:root{
  --bg:#0b1220; --fg:#dbe8ff; --mut:#0f1724; --br:#1f2a3b;
  --sub:#9fb0c3; --good:#a7f3c3; --bad:#ffb3b3; --chip:#102132;
  --tile:#0f1b2b; --tile-on:#17365d;
}
#ymx-hub-root{background:var(--bg);color:var(--fg);}
#ymx-hub-root .wrap{max-width:1200px;margin:0 auto;padding:20px}
.group-tiles{display:grid;grid-template-columns:repeat(4,1fr);gap:14px;margin-bottom:16px}

/* Tablet: 2x2 */
@media(max-width:900px){
  .group-tiles{grid-template-columns:repeat(2,1fr)}
}

/* Mobile: 1 column */
@media(max-width:520px){
  .group-tiles{grid-template-columns:1fr}
}

.tile-btn{display:flex;flex-direction:column;gap:8px;align-items:flex-start;justify-content:center;background:var(--tile);border:2px solid var(--br);border-radius:16px;padding:18px;cursor:pointer}
.tile-btn.on{background:var(--tile-on)}
.tile-h{display:flex;gap:10px;align-items:center}
.tile-h .name{font-size:20px;font-weight:800}
.badge{background:#10233a;border:1px solid var(--br);border-radius:999px;padding:6px 10px;font-size:12px;color:#cfe0ff}
.tile-row{display:flex;gap:8px;flex-wrap:wrap}
.card{background:var(--mut);border:1px solid var(--br);border-radius:16px;padding:16px;margin:16px 0}
.hdr{display:flex;justify-content:space-between;align-items:center;gap:10px;flex-wrap:wrap}
h2{margin:0;font-size:20px;font-weight:800;color:#eaf2ff}
.chips{display:flex;gap:6px;flex-wrap:wrap}
.chip{
  background:var(--chip);
  border:1px solid var(--br);
  border-radius:999px;
  padding:4px 10px;                /* 터치/가독성 */
  font-size:12px;
  color:#cfddf0
}

/* per-share 칩만 살짝 더 강조 */
.chip-ps{
  font-weight:900;
  letter-spacing:.1px;
}
.chip-ps .chip-unit{
  font-weight:800;
  opacity:.85;
  margin-left:2px;
}

@media (max-width: 480px){
  .banner{
    flex-direction:column;
    align-items:flex-start;
  }
  #cycleChips{
    width:100%;
  }
  #cycleChips .chip{
    white-space:normal;     /* 줄바꿈 허용 */
  }
  #timerLabel{
    display:block;
  }
}

.banner{display:flex;align-items:center;justify-content:space-between;flex-wrap:wrap;gap:12px;min-height:140px}
.timer{font-weight:900;letter-spacing:1px;line-height:1;display:flex;align-items:baseline;gap:12px}
.timer .big{font-size:44px}
.timer .md{font-size:16px;color:var(--sub)}
.controls{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:10px}
input[type="search"],select{background:#0f1724;border:1px solid var(--br);color:#cfe0ff;border-radius:10px;padding:8px 10px}
.toggle{display:inline-flex;align-items:center;gap:6px;cursor:pointer}
.toggle input{accent-color:#3b82f6}
.hl{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
@media(max-width:900px){.hl{grid-template-columns:1fr}}
.hl .box{background:#0f1724;border:1px solid var(--br);border-radius:12px;padding:12px}
.value{font-size:24px;font-weight:800}
.pos{color:var(--good)} .neg{color:var(--bad)}
.note{font-size:11px;color:#9fb0c3}
.cards{display:grid;grid-template-columns:repeat(4,1fr);gap:12px}
@media(max-width:1200px){.cards{grid-template-columns:repeat(2,1fr)}}

/* Mobile: keep 2 columns down to ~360px */
@media(max-width:720px){
  .cards{grid-template-columns:repeat(2,1fr)}
}
@media(max-width:360px){
  .cards{grid-template-columns:1fr}  /* 극소형만 1열 */
}
a.tile{display:flex;text-decoration:none;color:inherit;outline:none;-webkit-tap-highlight-color:transparent}
a.tile:focus,a.tile:focus-visible,a.tile:active{outline:none;box-shadow:none}
.tile{background:#0f1724;border:1px solid var(--br);border-radius:12px;padding:12px;display:flex;flex-direction:column;gap:10px;cursor:pointer;transition:border-color .15s ease,transform .15s ease}
.tile:hover{border-color:#3a7bd5;transform:translateY(-2px)}
.kv{display:flex;gap:12px;align-items:baseline}
.k{font-size:12px;color:var(--sub)}
.v{font-size:22px;font-weight:900}  /* 티커명 더 또렷하게 */
.row{display:flex;justify-content:space-between;align-items:center;gap:8px}
.btn-sm{background:#132840;border:1px solid #1f3a5f;border-radius:8px;padding:4px 8px;color:#cfe0ff;text-decoration:none;font-size:12px}
.pills{display:flex;gap:6px;flex-wrap:wrap;margin:6px 0 10px}
.pill{background:#0f1724;border:1px solid var(--br);border-radius:999px;padding:4px 8px;font-size:12px}
.tbl{overflow:auto}
#ymx-hub-root #distArea table{
  width:100%;
  border-collapse:separate;   /* 셀 합치기 끊기 */
  border-spacing:0;
  border:0;                   /* 테마가 건 외곽선 차단 */
  box-shadow:none;            /* 섀도우형 구분선 차단 */
  outline:0;                  /* 일부 테마의 아웃라인 차단 */
  background:none;            /* 배경 잔상 제거 */
}
#ymx-hub-root #distArea table th,
#ymx-hub-root #distArea table td{
  padding:9px;
  border:0;            /* 모든 보더 제거 */
  border-top:0;
  border-bottom:0;
  outline:0;           /* 혹시 모를 아웃라인 제거 */
  box-shadow:none;     /* 셀 단위 섀도우 제거 */
  background-clip:padding-box; /* 배경 번짐 방지 */
  font-size:13px;
  white-space:nowrap;
}
th{color:#cfe0ff;text-align:left}
.badROC{background:#401c1c;color:#ffdada;padding:2px 6px;border-radius:6px}
.helper{font-size:11px;color:#9fb0c3;line-height:1.5}

/* Hub CTA (ticker card) */
.cta-link{
  font-size:12px;
  color:#cfe0ff;
  text-decoration:none;
  opacity:.85;
  transition:all .15s ease;
}
.cta-link:hover{
  opacity:1;
  text-decoration:underline;
}

/* Mobile tuning */
@media (max-width: 480px){
  .timer .big{ font-size: 34px; }      /* 44 -> 34 */
  .timer{ gap: 8px; }
  input[type="search"], select{ width: 100%; }
  .controls{ gap: 10px; }
}

/* Make ticker CTA more readable (button-like) */
.cta-link{
  display:inline-flex;
  align-items:center;
  gap:6px;
  padding:8px 10px;
  border-radius:10px;
  border:1px solid #1f3a5f;
  background:#132840;
  opacity:1;                 /* 기존 .85 제거 */
  font-weight:700;
}

.cta-link:hover{
  text-decoration:none;      /* 버튼 느낌 유지 */
  filter:brightness(1.05);
}

/* watch button touch target */
.watch-btn{
  padding:8px 10px;
  border-radius:10px;
}

/* Ad slot placeholder (Hub) */
.ad-slot{
  background:#0f1724;
  border:1px dashed #2a3a52;
  border-radius:16px;
  padding:14px;
  color:#9fb0c3;
  font-size:12px;
  display:flex;
  justify-content:center;
  align-items:center;
  min-height:90px;
}

/* Hub top blurb (meaning lock) */
/* Hub top blurb (meaning lock) */
.hub-blurb{
  background:#0d1626;                 /* 기존 타일/배너(#0f1b2b)와 확실히 분리 */
  border:1px solid #24344a;           /* 테두리도 조금 밝게 */
  border-left:4px solid #3b82f6;      /* 시각적 고정 장치(오해 방지 문구 강조) */
  border-radius:14px;
  padding:12px 14px;
  margin: 0 0 12px 0;
}


/* Mobile: 줄바꿈/가독성 */
@media (max-width: 480px){
  .hub-blurb{ padding:12px; }
  .hub-blurb__main{ font-size:13px; }
  .hub-blurb__sub{ font-size:11.5px; }
}


.hub-blurb__main{
  font-weight:800;
  font-size:14px;
  color:#eaf2ff;
  letter-spacing:.2px;
}

.hub-blurb__sub{
  margin-top:4px;
  font-size:12px;
  color:var(--sub);
  line-height:1.45;
}
/* =========================
   Hub responsive tuning v2
   - PC unchanged
   - Tablet/mobile only
   ========================= */

/* (A) Cards grid: mobile = 1 column earlier */
@media (max-width: 600px){
  .cards{ grid-template-columns: 1fr; }
}

/* (B) Tablet typography downsize (keep PC intact) */
@media (max-width: 900px){
  h2{ font-size: 18px; }
  .tile-h .name{ font-size: 18px; }    /* group tile title 20 -> 18 */
  .value{ font-size: 20px; }          /* highlights 24 -> 20 */
  .v{ font-size: 20px; }              /* ticker name 22 -> 20 */
  .k{ font-size: 11px; }
  .note{ font-size: 10.5px; }
  .chip{ font-size: 11px; padding: 3px 8px; }
}

/* (C) Mobile typography (more compact) */
@media (max-width: 480px){
  h2{ font-size: 17px; }
  .value{ font-size: 18px; }
  .v{ font-size: 18px; }
  .k{ font-size: 10.5px; }
  .note{ font-size: 10px; }
}

/* (D) Fix: tablet card action split (View detail + star) */
#ymx-hub-root .row{
  align-items: center;
}

/* theme/브라우저가 버튼을 block 처리하는 경우를 강제로 눌러줌 */
#ymx-hub-root .row .cta-link,
#ymx-hub-root .row .watch-btn{
  display: inline-flex;
  align-items: center;
  white-space: nowrap;
}

/* 태블릿 구간에서만 버튼을 살짝 슬림하게 */
@media (max-width: 1024px){
  #ymx-hub-root .row .cta-link{
    font-size: 11px;
    padding: 6px 8px;     /* 8 10 -> 6 8 */
    gap: 5px;
  }
  #ymx-hub-root .row .watch-btn{
    padding: 6px 8px;
    font-size: 11px;
  }
}

/* (E) Mobile에서만 액션을 2줄(중앙정렬)로 보내고 싶으면: 선택사항 */
/* 이미 720px에서 .row를 column으로 바꾸는 규칙이 있으니,
   "모바일만 column"으로 확실히 하려면 기존 @media(max-width:720px) .row 규칙을 지우고,
   아래로 교체하는 게 더 안전함. */
@media (max-width: 600px){
  #ymx-hub-root .row{
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  #ymx-hub-root .row .cta-link,
  #ymx-hub-root .row .watch-btn{
    justify-content: center;
  }
}
/* Tablet: keep actions on ONE line (prevent split) */
@media (max-width: 1100px){
  #ymx-hub-root .row{
    flex-wrap: nowrap;
    gap: 6px;
  }
  #ymx-hub-root .row .cta-link{
    font-size: 10.5px;
    padding: 5px 7px;
    line-height: 1;
    flex: 1 1 auto;          /* 남는 공간을 먹게 해서 별표 밀림 방지 */
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis; /* 너무 좁으면 View detail만 말줄임 */
  }
  #ymx-hub-root .row .watch-btn{
    padding: 5px 7px;
    font-size: 11px;
    flex: 0 0 auto;
    white-space: nowrap;
  }
}
/* Highlights smaller on tablet/mobile */
@media (max-width: 900px){
  #ymx-hub-root .value{ font-size: 18px; }
  #ymx-hub-root .note{ font-size: 10px; }
}
@media (max-width: 480px){
  #ymx-hub-root .value{ font-size: 16px; }
  #ymx-hub-root .note{ font-size: 9.5px; }
}
/* Mobile: 1 column earlier + smaller tiles */
@media (max-width: 640px){
  #ymx-hub-root .cards{ grid-template-columns: 1fr; }
  #ymx-hub-root .tile{ padding: 10px; gap: 8px; }
  #ymx-hub-root .v{ font-size: 17px; }
  #ymx-hub-root .k{ font-size: 10.5px; }
  #ymx-hub-root .pill{ font-size: 11px; padding: 3px 7px; }
  #ymx-hub-root .chip{ font-size: 10.5px; padding: 3px 7px; }
}

/* Hub SSR title/lead contrast fix */
#ymx-hub-root .hub-ssr__title{
  color:#eaf2ff;
  font-weight:900;
  letter-spacing:.2px;
}
#ymx-hub-root .hub-ssr__lead{
  color:#cfddf0;
  opacity:1;
}
#ymx-hub-root .hub-ssr__links a{
  color:#cfe0ff;
}

/* =============================================
   Distributions table mobile fix
   - section.card 패딩 축소 → div.tbl 확보
   - 폰트/패딩 축소로 622px → ~420px 압축
   - 30d SEC% 컬럼 모바일 숨김
   ============================================= */
@media (max-width: 690px){
  /* 카드 패딩 축소: 양쪽 32px → 16px 확보 */
  #ymx-hub-root .card{
    padding: 12px 8px;
  }

  /* tbl이 카드 전체 너비 사용 */
  #ymx-hub-root .tbl{
    width: 100%;
  }

  /* 테이블 셀 폰트·패딩 압축 */
  #ymx-hub-root #distArea table th,
  #ymx-hub-root #distArea table td{
    font-size: 11px;
    padding: 6px 5px;
    white-space: nowrap;
  }

  /* 30d SEC% 컬럼(4번째) 숨김 — 가장 덜 중요 */
  #ymx-hub-root #distArea table th:nth-child(4),
  #ymx-hub-root #distArea table td:nth-child(4){
    display: none;
  }
}

/* Force Hub SSR title contrast (theme override-proof) */
#ymx-hub-root .hub-ssr__title{
  color:#ffffff !important;
  opacity:1 !important;
  filter:none !important;
  text-shadow:none;
}
#ymx-hub-root .hub-ssr__lead{
  color:#dbe8ff !important;
  opacity:1 !important;
  filter:none !important;
}

/* AdSense review safety: hide empty Hub ad placeholder before approval */
#ymx-hub-root .ad-slot:empty{
  display:none;
}