:root{
    --bg: #080b10;
    --bg-grid: #0c1017;
    --panel: #111826;
    --panel-2: #0d1420;
    --line: #1e2a3a;
    --line-soft: #16202c;
    --text: #edf3f7;
    --text-muted: #7c8aa0;
    --text-dim: #4d5a6c;
    --gold: #f4b740;
    --teal: #2ce6b8;
    --vs-red: #ff4b5c;
    --left-accent: #2ce6b8;
    --right-accent: #f4b740;
    --diff-green: #22c55e;
    --radius: 18px;
    --font-display: 'Noto Sans KR', sans-serif;
    --font-body: 'Noto Sans KR', sans-serif;
    --font-mono: 'Noto Sans KR', sans-serif;

    /* ---------- 공통 모션 토큰 ---------- */
    --dur-fast: 140ms;
    --dur-chip: 200ms;
    --dur-base: 240ms;
    --dur-sheet: 400ms;
    --ease-standard: cubic-bezier(.22, 1, .36, 1);
  }
  @media(prefers-reduced-motion:reduce){
    :root{ --dur-fast:1ms; --dur-chip:1ms; --dur-base:1ms; --dur-sheet:1ms; }
  }

  html{ scrollbar-gutter: stable; overscroll-behavior-y: none; }
  *{box-sizing:border-box; margin:0; padding:0; -webkit-tap-highlight-color:transparent;}
  button, a, [onclick], .cmp-na, .ovr-num, .cmp-stat{ -webkit-tap-highlight-color:transparent; outline:none; }

  /* 앱 전체 공통 탭 피드백: 버튼/카드형 요소를 누르는 순간 살짝 눌리는 느낌.
     ranking-card는 테두리 없는 전체 폭 리스트 행이라 scale로 누르면 어색해서 배경색으로 피드백. */
  button,
  .filter-chip, .picker-item, .player-chip{
    transition: transform .12s ease;
  }
  button:active,
  .filter-chip:active, .picker-item:active, .player-chip:active{
    transform: scale(0.96);
  }
  .ranking-card:active{ background:#f1f4f9; }
  .today-mover-card:active, .today-compare-card:active{ background:#f1f4f9; }

  body{
    background:
      radial-gradient(ellipse 1200px 600px at 50% -10%, rgba(44,230,184,0.08), transparent 60%),
      radial-gradient(ellipse 900px 500px at 100% 110%, rgba(244,183,64,0.07), transparent 60%),
      repeating-linear-gradient(0deg, var(--bg-grid) 0px, var(--bg-grid) 1px, transparent 1px, transparent 42px),
      repeating-linear-gradient(90deg, var(--bg-grid) 0px, var(--bg-grid) 1px, transparent 1px, transparent 42px),
      var(--bg);
    color: var(--text);
    font-family: var(--font-body);
    min-height:100vh;
    padding: 28px 20px 60px;
    -webkit-font-smoothing:antialiased;
    overscroll-behavior-y: none;
    /* Noto Sans KR is proportional, not monospace -- every former --font-mono spot (ranking
       tables, prices, scores) relied on JetBrains Mono's fixed digit width to keep numbers
       aligned. font-variant-numeric is inherited, so setting it once here keeps every digit
       on-screen tabular (equal width) without having to touch each of those selectors. */
    font-variant-numeric: tabular-nums;
  }

  .wrap{ max-width: 1180px; margin: 0 auto; display:flex; flex-direction:column; overflow-x:hidden; transform-origin:50% 0; }
  @keyframes compareEnterIn{ from{ opacity:0; transform:scale(0.985); } to{ opacity:1; transform:scale(1); } }
  .wrap.compare-enter{ animation:compareEnterIn var(--dur-sheet) var(--ease-standard); }
  .home-title, .home-subtitle, .home-recent{ transition:opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard); }
  body:not(.home-mode) .home-title, body:not(.home-mode) .home-subtitle, body:not(.home-mode) .home-recent{ opacity:0; transform:translateY(-6px); }
  @keyframes countFadeIn{ from{ opacity:0; } to{ opacity:1; } }
  .count-fade-in{ animation:countFadeIn var(--dur-base) ease both; }

  /* 비교 실행/변경 시 1회 재생되는 순차 등장 (이름/로고 -> 점수 -> 레이더 -> 스탯 행 -> 요약) */
  @keyframes seqIn{ from{ opacity:0; transform:translateY(8px); } to{ opacity:1; transform:translateY(0); } }
  .seq-in{ animation:seqIn var(--dur-base) var(--ease-standard) both; }
  @media(prefers-reduced-motion:reduce){ .seq-in{ animation:none !important; opacity:1 !important; transform:none !important; } }

  button, input{ font-family: inherit; }

  /* ---------- HEADER ---------- */
  .header{
    display:flex;
    align-items:flex-end;
    justify-content:space-between;
    flex-wrap:wrap;
    gap:12px;
    margin-bottom:26px;
    padding-bottom:18px;
    border-bottom:1px solid var(--line-soft);
  }
  .eyebrow{
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:0.18em;
    color: var(--teal);
    text-transform:uppercase;
    margin-bottom:6px;
    display:none; align-items:center; gap:8px;
  }
  .eyebrow::before{
    content:"";
    width:6px; height:6px; border-radius:50%;
    background:var(--teal);
    box-shadow:0 0 8px var(--teal);
  }
  .wordmark{
    font-family: var(--font-display);
    font-weight:700;
    font-size: clamp(32px, 5vw, 48px);
    letter-spacing:0.01em;
    line-height:1;
  }
  .wordmark span{ color: var(--gold); }
  /* PAIR brand mark: fixed spec regardless of home/non-home mode or breakpoint -- symbol 32x32,
     "PAIR" set in Plus Jakarta Sans 700/25px/#0F172A, vertically centered, 9px gap. */
  .pair-brand{ display:flex; align-items:center; gap:9px; }
  .pair-symbol{ display:block; flex:0 0 auto; width:32px; height:32px; }
  .pair-wordmark{
    font-family:'Plus Jakarta Sans', var(--font-body), sans-serif;
    font-weight:700;
    font-size:25px;
    line-height:1;
    color:#0F172A;
    letter-spacing:0;
  }
  .header-right{ display:flex; flex-direction:column; align-items:flex-end; }
  .lang-switch{
    display:flex;
    align-items:center;
    gap:6px;
    margin-bottom:8px;
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:0.04em;
  }
  .lang-switch button{
    background:none;
    border:none;
    padding:2px 4px;
    cursor:pointer;
    color: var(--text-dim);
    font-family: inherit;
    font-size:inherit;
    transition: color .15s ease;
  }
  .lang-switch button:hover{ color: var(--text-muted); }
  .lang-switch button.active{
    color: var(--gold);
    font-weight:700;
    cursor:default;
  }
  .lang-switch .lang-sep{ color: var(--line); font-size:10px; }
  .tagline{
    font-size:13px;
    color:var(--text-muted);
    max-width:280px;
    text-align:right;
    line-height:1.5;
  }
  .disclaimer{
    font-family: var(--font-mono);
    font-size:10px;
    color: var(--text-dim);
    letter-spacing:0.02em;
    margin-top:6px;
  }
  /* ---------- FILTER BAR ---------- */
  .filter-bar{
    display:flex;
    flex-direction:column;
    gap:12px;
    margin-bottom:24px;
  }
  .search-wrap{
    position:relative;
    display:flex;
    align-items:center;
  }
  .search-wrap svg{
    position:absolute;
    left:14px;
    width:16px; height:16px;
    color: var(--text-dim);
    pointer-events:none;
  }
  .search-input{
    width:100%;
    background: var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:13px 14px 13px 40px;
    color:var(--text);
    font-size:14px;
    outline:none;
    transition: border-color .15s ease, box-shadow .15s ease;
  }
  .search-input::placeholder{ color: var(--text-dim); }
  .search-input:focus{
    border-color: var(--teal);
    box-shadow: 0 0 0 3px rgba(44,230,184,0.12);
  }
  .filter-chips{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    gap:8px;
    scrollbar-width:none;
    scroll-behavior:smooth;
  }
  @media (prefers-reduced-motion: reduce){
    .filter-chips{ scroll-behavior:auto; }
  }
  .filter-chips::-webkit-scrollbar{ display:none; }
  .filter-chip{
    flex-shrink:0;
    font-family: var(--font-mono);
    font-size:11px;
    letter-spacing:0.05em;
    line-height:1;
    color: var(--text-muted);
    background: var(--panel);
    border:1px solid var(--line);
    border-radius:999px;
    padding:7px 14px;
    cursor:pointer;
    transition: all .15s ease;
    white-space:nowrap;
  }
  .filter-chip:hover{ border-color: var(--text-muted); color:var(--text); }
  .filter-chip.active{
    background: var(--gold);
    border-color: var(--gold);
    color:#08110d;
    font-weight:700;
  }

  /* ---------- MATCHUP ---------- */
  .matchup{
    display:flex;
    align-items:center;
    justify-content:center;
    gap: 18px;
    margin-bottom:46px;
  }
  .matchup .card{
    flex: 1 1 0;
    max-width: 220px;
    min-width:0;
  }
  @media (max-width: 760px){
    .matchup{ gap:8px; margin-bottom:22px; }
    .matchup .card{ max-width:150px; }
    .header{ order:1; }
    .filter-bar{ order:2; margin-bottom:18px; }
    .active-side-indicator{ display:none; }
    .roster-section{ order:3; margin-bottom:22px; }
    .matchup{ order:4; }
    .cta-wrap{ order:5; margin-bottom:26px; }
    #compare-section{ order:6; }
    .tagline, .disclaimer{ display:none; }
  }

  /* ---------- VS (z-index 수정) ---------- */
  .vs-col{ display:flex; align-items:center; justify-content:center; z-index:1; flex-shrink:0; }
  .vs-badge{
    width:92px; height:92px;
    border-radius:50%;
    background: radial-gradient(circle at 35% 30%, #1a1010, #0a0708 70%);
    border: 2px solid var(--vs-red);
    box-shadow: 0 0 0 6px rgba(255,75,92,0.08), 0 0 30px rgba(255,75,92,0.35), inset 0 0 20px rgba(255,75,92,0.15);
    display:flex; align-items:center; justify-content:center;
    position:relative;
    flex-shrink:0;
  }
  .vs-badge span{
    font-family:var(--font-display);
    font-weight:700;
    font-size:28px;
    letter-spacing:0.03em;
    color:#fff;
    text-shadow: 0 0 14px var(--vs-red);
  }
  .vs-badge::after{
    content:"";
    position:absolute; inset:-14px;
    border-radius:50%;
    border:1px dashed rgba(255,75,92,0.35);
    animation: spin 18s linear infinite;
  }
  @keyframes spin{ to{ transform: rotate(360deg); } }

  @media (max-width:760px){
    .vs-badge{ width:48px; height:48px; }
    .vs-badge span{ font-size:13px; }
    .vs-badge::after{ inset:-7px; }
  }

  /* ---------- STOCK CARD ---------- */
  .card{
    background: linear-gradient(165deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 22px 20px;
    position:relative;
    overflow:hidden;
    transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
    cursor:pointer;
  }
  .card::before{
    content:"";
    position:absolute; top:0; left:0; right:0; height:3px;
    background: var(--side-color);
  }
  .card.left{ --side-color: var(--left-accent); }
  .card.right{ --side-color: var(--right-accent); }

  .card.active{
    border-color: var(--side-color);
    box-shadow: 0 0 0 1px var(--side-color), 0 12px 40px -12px var(--side-color);
    transform: translateY(-2px);
  }

  .card-tier-ribbon{
    position:absolute; top:14px; right:-32px;
    background: var(--side-color);
    color:#08110d;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:11px;
    letter-spacing:0.08em;
    padding:4px 38px;
    transform: rotate(40deg);
    box-shadow: 0 4px 10px rgba(0,0,0,0.4);
  }

  .card-top{
    display:flex;
    align-items:center;
    gap:28px;
    margin-bottom:16px;
  }

  .logo-frame{
    width:56px; height:56px;
    flex-shrink:0;
    position:relative;
    display:flex; align-items:center; justify-content:center;
    border-radius:0;
    background:transparent;
    border:none;
    box-shadow:none;
    overflow:visible;
  }
  .logo-frame img{
    width:88%; height:88%;
    object-fit:contain;
    filter: drop-shadow(0 1px 2px rgba(0,0,0,0.18));
    opacity:0;
    transition: opacity .25s ease;
  }
  .logo-frame.loaded img{ opacity:1; }
  body.home-mode .logo-frame img{ filter: drop-shadow(0 1px 3px rgba(0,0,0,0.45)); }
  .logo-frame:not(.loaded)::before{
    content:"";
    position:absolute; inset:8%;
    border-radius:10px;
    background: linear-gradient(90deg, #eef1f6 25%, #f6f8fa 37%, #eef1f6 63%);
    background-size:400% 100%;
    animation: logoShimmer 1.4s ease infinite;
  }
  @keyframes logoShimmer{
    0%{ background-position:100% 0; }
    100%{ background-position:0 0; }
  }
  @media (prefers-reduced-motion: reduce){
    .logo-frame:not(.loaded)::before{ animation:none; }
  }
  .logo-frame .logo-fallback{
    display:none;
    align-items:center; justify-content:center;
    width:100%; height:100%;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:11px;
    letter-spacing:0.01em;
    color: var(--logo-color);
    padding:0 2px;
    text-align:center;
    white-space:nowrap;
    border-radius:16px;
    background: color-mix(in srgb, var(--logo-color) 14%, var(--panel-2));
  }

  .ovr-block-group{ display:flex; flex-direction:column; align-items:flex-start; gap:2px; min-width:0; }
  .ovr-block{ text-align:left; }
  .ovr-num{
    font-family: var(--font-display);
    font-weight:700;
    font-size:42px;
    line-height:0.9;
    color: var(--gold);
    text-shadow: 0 0 18px rgba(244,183,64,0.35);
  }
  .ovr-num{ cursor:pointer; }
  .inv-block{ text-align:left; }
  .inv-num{
    font-family: var(--font-display);
    font-weight:700;
    font-size:42px;
    line-height:0.9;
    color: var(--diff-green);
    cursor:pointer;
  }
  .ovr-note-badge{
    display:inline-flex; align-items:center; justify-content:center;
    width:15px; height:15px; margin-left:4px; vertical-align:top;
    border-radius:50%; border:1.5px solid currentColor;
    font-family:var(--font-mono); font-size:10px; font-weight:700; line-height:1;
    opacity:0.85;
  }
  .ovr-label{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.14em;
    color:var(--text-muted);
    margin-top:2px;
  }
  .inv-badge{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.02em;
    color:var(--text-muted);
    margin-top:4px;
    cursor:pointer;
    display:flex;
    align-items:center;
    gap:3px;
  }
  .inv-arrow{ font-size:11px; }
  .inv-arrow-up{ color:var(--diff-green,#3ecf6a); }
  .inv-arrow-down{ color:#e05555; }

  .ticker-row{
    display:flex;
    align-items:baseline;
    gap:10px;
    margin-bottom:2px;
  }
  .ticker{
    font-family:var(--font-mono);
    font-weight:700;
    font-size:20px;
    letter-spacing:0.03em;
    color: var(--text);
  }
  .fav-btn{
    margin-left:auto;
    display:flex; align-items:center; justify-content:center;
    width:24px; height:24px; padding:0; border:none; background:transparent;
    color:var(--text-dim); cursor:pointer; flex-shrink:0;
  }
  .fav-btn svg{ width:20px; height:20px; fill:none; stroke:currentColor; stroke-width:1.8; }
  .fav-btn.active{ color:#ff4b5c; }
  .fav-btn.active svg{ fill:currentColor; stroke:none; }
  @keyframes favPop{ 0%{transform:scale(0.9);} 55%{transform:scale(1.35);} 100%{transform:scale(1);} }
  .fav-btn.fav-pop, .ranking-fav-btn.fav-pop, .detail-action-btn.fav-pop, .detail-head-fav-btn.fav-pop{ animation:favPop var(--dur-base) var(--ease-standard); }
  @media(prefers-reduced-motion:reduce){
    .fav-btn.fav-pop, .ranking-fav-btn.fav-pop, .detail-action-btn.fav-pop, .detail-head-fav-btn.fav-pop{ animation-duration:1ms; }
  }
  .rating-badge{
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:700;
    padding:2px 8px;
    border-radius:5px;
    background: rgba(255,255,255,0.06);
    color: var(--side-color);
    border:1px solid color-mix(in srgb, var(--side-color) 50%, transparent);
    letter-spacing:0.06em;
  }
  .company-name{
    font-size:15px;
    font-weight:600;
    color: var(--text);
    margin-bottom:4px;
  }
  .category{
    font-family:var(--font-mono);
    font-size:10.5px;
    color: var(--text-muted);
    letter-spacing:0.04em;
    text-transform:uppercase;
  }

  .active-tag{
    position:absolute;
    bottom:14px; left:22px;
    font-family:var(--font-mono);
    font-size:9.5px;
    letter-spacing:0.12em;
    color: var(--side-color);
    opacity:0;
    transition:opacity .2s ease;
  }
  .card.active .active-tag{ opacity:1; }

  .card-swap-hint{
    position:absolute;
    bottom:14px; right:22px;
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:0.1em;
    color: var(--text-dim);
  }

  @media (max-width:760px){
    .card{ padding: 14px 10px 12px; border-radius:14px; min-width:0; }
    .card-tier-ribbon{ top:8px; right:-28px; font-size:8px; padding:2px 24px; }
    .card-top{ gap:20px; margin-bottom:10px; }
    .logo-frame{ width:48px; height:48px; border-radius:13px; }
    .ovr-block-group{ gap:1px; }
    .ovr-num{ font-size:34px; }
    .inv-num{ font-size:34px; }
    .ovr-label{ font-size:8px; letter-spacing:0.1em; }
    .ticker-row{ gap:5px; flex-wrap:wrap; margin-bottom:1px; }
    .ticker{ font-size:13px; }
    .rating-badge{ font-size:8px; padding:1px 5px; }
    .company-name{ font-size:11px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
    .category{ display:none; }
    .active-tag{ display:none; }
    .card-swap-hint{ display:none; }
  }

  /* ---------- STAT COMPARISON TABLE ---------- */
  .compare-panel{
    background: linear-gradient(165deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--line);
    border-radius: var(--radius);
    padding: 22px 20px 24px;
    margin-bottom: 40px;
  }

  .cmp-header{
    display:grid;
    grid-template-columns: 1fr 180px 1fr;
    align-items:center;
    gap:10px;
    padding-bottom:14px;
    margin-bottom:6px;
    border-bottom:1px solid var(--line-soft);
  }
  .cmp-header-side{
    font-family:var(--font-mono);
    font-weight:700;
    font-size:13px;
    letter-spacing:0.08em;
    text-align:right;
  }
  .cmp-header-side.cmp-header-right{ text-align:left; }
  .cmp-header-title{
    font-family:var(--font-mono);
    font-size:10px;
    letter-spacing:0.16em;
    color:var(--text-muted);
    text-align:center;
    text-transform:uppercase;
  }

  .cmp-row{
    display:grid;
    grid-template-columns: 1fr 180px 1fr;
    align-items:center;
    gap:10px;
    padding:13px 0;
    border-bottom:1px solid var(--line-soft);
  }
  .cmp-row:last-of-type{ border-bottom:none; }

  .cmp-side{
    display:flex;
    align-items:baseline;
    gap:6px;
  }
  .cmp-left{ justify-content:flex-end; }
  .cmp-right{ justify-content:flex-start; }

  .cmp-score{
    font-family:var(--font-mono);
    font-weight:700;
    font-size:22px;
    letter-spacing:0.01em;
  }

  .cmp-score.cmp-na{ cursor:pointer; }
  .cmp-note-mark{ font-size:0.45em; margin-left:1px; opacity:0.75; }
  /* The icon variant (plain "i") draws its own circle, same as ovr-note-badge/detail-keymetric-
     info -- excludes .cmp-note-provisional, which holds the "잠정" word label, not an icon.
     vertical-align:top (rather than middle) plus the negative top offset pulls it up to sit at
     the number's top-right corner like a badge, instead of floating at its vertical center. */
  .cmp-note-mark:not(.cmp-note-provisional){
    display:inline-flex; align-items:center; justify-content:center;
    width:1.3em; height:1.3em; border-radius:50%; border:0.14em solid currentColor;
    font-family:var(--font-mono); font-weight:700; opacity:0.85; vertical-align:top;
    position:relative; top:-0.2em;
  }
  .cmp-note-mark.cmp-note-provisional{
    font-size:10px; font-weight:700; opacity:1; vertical-align:middle;
    margin-left:4px; padding:1px 5px; border-radius:6px; background:rgba(244,183,64,0.18); color:var(--gold);
  }

  .cmp-diff-slot{
    display:inline-flex;
    align-items:baseline;
    min-width:52px;
  }
  .cmp-left .cmp-diff-slot{ justify-content:flex-end; }
  .cmp-right .cmp-diff-slot{ justify-content:flex-start; }

  .cmp-diff{
    display:inline-flex;
    align-items:baseline;
    gap:3px;
    font-family:var(--font-mono);
    font-weight:700;
    font-size:17px;
    line-height:1;
    white-space:nowrap;
  }
  .cmp-diff .cmp-triangle{
    font-size:13px;
    transform: translateY(-1px);
    display:inline-block;
  }

  .cmp-stat{
    font-family:var(--font-mono);
    font-size:10.5px;
    letter-spacing:0.08em;
    color: var(--text-muted);
    text-transform:uppercase;
    text-align:center;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:4px;
    cursor:pointer;
  }
  .cmp-stat .stat-short{ display:none; }

  .info-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px; height:14px;
    border-radius:50%;
    background: var(--line);
    color: var(--teal);
    font-size:9px;
    font-weight:700;
    cursor:pointer;
    user-select:none;
  }

  .cmp-footer{
    margin-top:20px;
    padding-top:20px;
    border-top:1px solid var(--line-soft);
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    gap:8px;
  }
  .cmp-footer-title{
    font-family:var(--font-display);
    font-weight:600;
    font-size:14px;
    letter-spacing:0.14em;
    color: var(--text);
  }
  .cmp-footer-desc{
    font-family:var(--font-body);
    font-size:12.5px;
    color: var(--text-muted);
    max-width:420px;
    line-height:1.6;
  }
  .algo-btn{
    display:inline-flex;
    align-items:center;
    gap:5px;
    background:none;
    border:1px solid var(--line);
    color: var(--teal);
    font-family:var(--font-mono);
    font-size:11px;
    padding:6px 14px;
    border-radius:999px;
    cursor:pointer;
    margin-top:4px;
    transition: all .15s ease;
  }
  .algo-btn:hover{
    border-color: var(--teal);
    background: rgba(44,230,184,0.08);
  }

  @media (max-width:760px){
    .compare-panel{ padding:16px 12px 18px; }
    .cmp-header, .cmp-row{ grid-template-columns: 1fr 110px 1fr; gap:6px; }
    .cmp-score{ font-size:18px; }
    .cmp-stat { font-size: 12px; font-weight: 700; color: var(--text); }
    .cmp-stat .stat-full{ display:none; }
    .cmp-stat .stat-short{ display:inline; }
    .cmp-diff{ font-size:14px; }
    .cmp-diff .cmp-triangle{ font-size:11px; }
    .cmp-diff-slot{ min-width:40px; }
  }

  /* ---------- ROSTER ---------- */
  .roster-section{ margin-bottom: 38px; }
  .roster-head{ display:flex; align-items:center; gap:10px; margin-bottom:14px; }
  .roster-title{ font-family:var(--font-display); font-weight:600; font-size:15px; letter-spacing:0.08em; color: var(--text); }
  .roster-title #quick-picks-accent{ color:var(--gold); }
  .roster-sub{ font-family:var(--font-mono); font-size:10.5px; color: var(--text-dim); }
  .roster-line{ flex:1; height:1px; background:var(--line-soft); }
  .roster-empty{ font-family:var(--font-mono); font-size:11.5px; color: var(--text-dim); padding:14px 4px; }

  .roster-grid{ display:grid; grid-template-columns: repeat(7, 1fr); gap:10px; }
  @media (max-width:760px){
    .roster-grid{
      display:flex; flex-wrap:nowrap; overflow-x:auto; gap:8px; padding:2px 2px 6px;
      scroll-snap-type:x proximity; -webkit-overflow-scrolling:touch; scrollbar-width:none;
    }
    .roster-grid::-webkit-scrollbar{ display:none; }
  }

  .player-chip{
    background: var(--panel); border:1px solid var(--line); border-radius:12px;
    padding:12px 10px; text-align:center; cursor:pointer; transition: all .15s ease; position:relative;
  }
  .player-chip:hover{ border-color: var(--text-muted); transform: translateY(-2px); }
  .player-chip .chip-logo{ width:32px; height:32px; margin:0 auto 8px; border-radius:99px; }
  .player-chip .chip-ticker{ font-family:var(--font-mono); font-size:12px; font-weight:700; color:var(--text); }
  .player-chip .chip-ovr{ font-family:var(--font-mono); font-size:9.5px; color:var(--text-dim); margin-top:2px; }
  .player-chip.sel-left{ border-color: var(--left-accent); box-shadow:0 0 0 1px var(--left-accent); }
  .player-chip.sel-right{ border-color: var(--right-accent); box-shadow:0 0 0 1px var(--right-accent); }
  .chip-side-tag{
    position:absolute; top:-8px; right:-8px; font-family:var(--font-mono);
    font-size:9px; font-weight:700; padding:2px 6px; border-radius:6px; color:#08110d;
  }
  .chip-side-tag.L{ background: var(--left-accent); }
  .chip-side-tag.R{ background: var(--right-accent); }
  .player-chip.disabled{ opacity:0.35; cursor:not-allowed; }

  @media (max-width:760px){
    .player-chip{ flex:0 0 72px; scroll-snap-align:start; padding:10px 6px; }
  }

  /* ---------- COMPARE CTA ---------- */
  .cta-wrap{ display:flex; flex-direction:column; align-items:center; gap:10px; }
  .compare-btn{
    font-family:var(--font-display); font-weight:600; font-size:16px; letter-spacing:0.1em;
    color:#08110d; background: linear-gradient(90deg, var(--left-accent), var(--right-accent));
    border:none; padding:16px 52px; border-radius: 999px; cursor:pointer; text-transform:uppercase;
    box-shadow: 0 10px 30px -8px rgba(44,230,184,0.35), 0 10px 30px -8px rgba(244,183,64,0.25);
    transition: transform .15s ease, box-shadow .15s ease;
  }
  .compare-btn:hover{ transform: translateY(-2px) scale(1.02); }
  .compare-btn:active{ transform: translateY(0) scale(0.98); }
  .cta-hint{ font-family:var(--font-mono); font-size:10.5px; color: var(--text-dim); }

  .active-side-indicator{
    text-align:center; font-family:var(--font-mono); font-size:11px; color:var(--text-muted); margin-bottom:16px; letter-spacing:0.04em;
  }
  .active-side-indicator b{ color: var(--gold); }

  @media (max-width:760px){
    .cta-hint{ display:none; }
  }

  /* ---------- OVERLAYS & MODALS (컴팩트 팝업 모달) ---------- */
  .picker-overlay{
    --backdrop-fade:1;
    position:fixed; inset:0; background: rgba(3,5,8, calc(0.75 * var(--backdrop-fade))); backdrop-filter: blur(calc(5px * var(--backdrop-fade)));
    display:none; align-items:center; justify-content:center; z-index:1000; padding:16px;
  }
  .picker-overlay.open{ display:flex; }

  /* 스탯/핵심지표 안내는 기업 상세 위에 뜨는 2차 레이어다. 상세 시트(z-index:1100)보다
     반드시 높고, 상세의 고정 라이트 UI와 같은 톤을 사용한다. */
  #stat-modal-overlay{
    z-index:1300;
    background:rgba(16,24,40, calc(0.34 * var(--backdrop-fade)));
    backdrop-filter:blur(calc(5px * var(--backdrop-fade)));
  }
  /* 알고리즘 시트도 기업 상세(종합점수 팝업) 안에서 열릴 수 있는 2차 레이어라 동일하게
     상세 시트보다 높은 z-index가 필요함 -- 기본 .picker-overlay(z-index:1000)로는 상세 시트
     (z-index:1100)에 가려져 버림. */
  #algo-overlay{
    z-index:1300;
  }
  #stat-modal-overlay .picker-sheet{
    background:#fff !important;
    color:#101828;
    border:1px solid #e4e7ec !important;
    box-shadow:0 24px 70px rgba(16,24,40,.24) !important;
  }
  #stat-modal-overlay .picker-header{ border-color:#eaecf0; }
  #stat-modal-overlay .picker-title{ color:#101828; }
  #stat-modal-overlay .picker-close{ background:#f8fafc; border-color:#e4e7ec; color:#667085; }
  #stat-modal-overlay .tt-desc{ color:#475467; }
  #stat-modal-overlay .tt-sec{ color:#1468ff; }
  #stat-modal-overlay .tt-list{ color:#667085; }
  #stat-modal-overlay .tt-weight-row{ color:#475467; border-bottom-color:#eef1f5; }
  #stat-modal-overlay .tt-weight-note{ color:#98a2b3; }

  /* 팝업 모달 크기를 컴팩트하게 조정 (max-width: 420px) */
  .picker-sheet{
    width:100%; max-width:420px; max-height:80vh;
    background: linear-gradient(165deg, var(--panel) 0%, var(--panel-2) 100%);
    border:1px solid var(--teal); border-radius:16px; display:flex; flex-direction:column;
    overflow:hidden; box-shadow: 0 20px 60px -10px rgba(0,0,0,0.85);
  }
  .picker-sheet.sheet-anchored{ position:fixed; margin:0; max-height:min(70vh,420px); }
  /* 모바일 "상단 고정형" 종목 검색 팝업(#picker-overlay) 전용 각진 모서리 규칙이
     .picker-sheet 클래스를 공유하는 스탯 안내 팝업에도 적용되는 것을 방지 */
  #stat-modal-overlay .picker-sheet{ border-radius:16px !important; border-top:1px solid #e4e7ec !important; }
  .picker-header{ display:flex; align-items:center; justify-content:space-between; padding:14px 16px; border-bottom:1px solid var(--line-soft); }
  .picker-title{ font-family:var(--font-mono); font-weight:700; font-size:13.5px; color:var(--teal); display:flex; align-items:center; gap:6px; }
  .picker-close{
    width:26px; height:26px; border-radius:50%; border:1px solid var(--line); background: var(--panel-2);
    color: var(--text-muted); font-size:12px; cursor:pointer; display:flex; align-items:center; justify-content:center;
  }

  /* 스탯 상세 모달 내용 컴팩트화 */
  .stat-modal-body{ padding: 16px; overflow-y:auto; line-height:1.55; overscroll-behavior:contain; flex:1; min-height:0; }
  .stat-modal-footer{ flex:none; padding:12px 16px calc(12px + env(safe-area-inset-bottom, 0px)); border-top:1px solid #eef1f5; }
  .stat-modal-confirm-btn{
    width:100%; height:48px; border:0; border-radius:999px; background:#1468ff; color:#fff;
    font-family:var(--font-body); font-size:15px; font-weight:700; cursor:pointer;
  }
  .stat-modal-confirm-btn:active{ background:#0d4fc4; }
  .tt-desc { color: var(--text); margin-bottom: 10px; word-break: keep-all; font-size: 12.5px; }
  .tt-weight-row{
    display:flex; align-items:center; justify-content:space-between; gap:10px;
    padding:7px 0; border-bottom:1px solid #f1f4f9; font-size:12.5px; color:var(--text);
  }
  .tt-weight-row:last-of-type{ border-bottom:none; }
  .tt-weight-label{ flex:1; min-width:0; word-break:keep-all; }
  .tt-weight-badge{
    flex:none; font-family:var(--font-mono); font-weight:700; font-size:11px;
    color:#1468ff; background:#eef4ff; padding:2px 8px; border-radius:999px;
  }
  .tt-weight-note{ margin:-4px 0 6px; font-size:10.5px; color:var(--text-muted); }
  .tt-sec { font-weight: 700; color: var(--gold); margin-top: 10px; margin-bottom: 4px; font-size: 11.5px; font-family: var(--font-mono); }
  .tt-list { padding-left: 16px; margin-bottom: 10px; color: var(--text-muted); font-size: 11.5px; }
  .tt-list li { margin-bottom: 2px; }
  .tt-group-label { font-weight: 700; color: var(--text); font-size: 11.5px; margin-top: 6px; margin-bottom: 3px; }
  .tt-group-label:first-of-type { margin-top: 0; }
  /* Was border-left:3px solid var(--vs-red) -- --vs-red is redefined to blue (#1468ff) in this
     theme's light block below, so the warning box showed a blue accent line on a red-tinted
     background/text. Replaced with a self-consistent red border/background that doesn't depend
     on --vs-red at all. */
  .tt-warn { background: #fff5f6; border: 1px solid #ffd8dc; border-radius: 8px; padding: 8px 10px; font-size: 11px; color: #b93846; margin-top: 10px; word-break: keep-all; }
  .tt-footer { margin-top: 14px; padding-top: 10px; border-top: 1px solid var(--line-soft); text-align: center; }
  .tt-footer-brand { font-family: var(--font-mono); font-size: 9.5px; font-weight: 700; color: var(--text-muted); letter-spacing: 0.05em; }
  .tt-footer-sub { font-size: 9px; color: var(--text-dim); margin-top: 2px; margin-bottom: 6px; }
  .tt-algo-link { display: inline-block; font-family: var(--font-mono); font-size: 10px; color: var(--teal); text-decoration: underline; cursor: pointer; }
  .tt-methodology { margin:8px 0; }
  .tt-methodology summary { font-family: var(--font-mono); font-size: 10.5px; color: var(--text-muted); cursor: pointer; user-select:none; }
  .tt-methodology[open] summary { margin-bottom:6px; }
  .tt-methodology .tt-desc { font-size: 11.5px; }

  /* STOCK PICKER & ALGO */
  .picker-search-wrap{ position:relative; margin:12px 16px 10px; }
  .picker-search-wrap svg{ position:absolute; left:12px; top:50%; transform:translateY(-50%); width:14px; height:14px; color: var(--text-dim); }
  .picker-search{ width:100%; background: var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 12px 10px 34px; color: var(--text); font-size:13px; outline:none; }
  .picker-chips{ display:flex; gap:6px; overflow-x:auto; padding:0 16px 10px; scrollbar-width:none; }
  .picker-chip{ flex-shrink:0; font-family: var(--font-mono); font-size:10px; color: var(--text-muted); background: var(--panel-2); border:1px solid var(--line); border-radius:999px; padding:5px 10px; cursor:pointer; }
  .picker-chip.active{ background: var(--gold); border-color: var(--gold); color:#08110d; font-weight:700; }
  .picker-grid{ display:grid; grid-template-columns: repeat(auto-fill, minmax(95px, 1fr)); gap:8px; padding:4px 16px 16px; overflow-y:auto; }
  /* Touch/coarse-pointer layouts: fully hidden, same as every other scroll strip in the app. */
  @media (pointer:coarse){
    .picker-grid{ scrollbar-width:none; }
    .picker-grid::-webkit-scrollbar{ display:none; }
  }
  /* Fine-pointer (mouse/trackpad) layouts: replace the native ~15px gray scrollbar with a thin,
     quiet 6px one -- present (so the list still reads as scrollable) but unobtrusive at rest,
     slightly darker on hover/drag. */
  @media (pointer:fine){
    .picker-grid{ scrollbar-width:thin; scrollbar-color:#d8dce3 transparent; }
    .picker-grid:hover{ scrollbar-color:#b0b7c3 transparent; }
    .picker-grid::-webkit-scrollbar{ width:6px; }
    .picker-grid::-webkit-scrollbar-track{ background:transparent; }
    .picker-grid::-webkit-scrollbar-thumb{ background:#d8dce3; border-radius:999px; }
    .picker-grid:hover::-webkit-scrollbar-thumb{ background:#b0b7c3; }
    .picker-grid::-webkit-scrollbar-thumb:active{ background:#98a2b3; }
  }

  /* Item 2: Picker sector chips now match Ranking's segmented chip-track (#ranking-chips) exactly
     -- same track background/radius/padding, chip typography/height, selected/unselected colors,
     and sliding chip-pill. ID-scoped (#picker-chips) so these reliably win over the older
     .picker-chips/.picker-chip visual rules elsewhere in this file without needing to touch or
     remove them. Deliberately does NOT redeclare `position` -- the picker's own sticky-on-mobile
     positioning for this row (set on .picker-chips in several media-query blocks above) is left
     completely alone, so the horizontal-scroll/sticky behavior and hit area are unaffected; only
     the look of the track and its chips changes. */
  #picker-chips{
    background:#eef1f6;
    border-radius:999px;
    padding:3px;
    margin:0 16px 10px;
    min-height:0;
    gap:8px;
  }
  #picker-chips .filter-chip{
    position:relative; z-index:1;
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.05em;
    padding:7px 14px;
    border-radius:999px;
    background:transparent;
    border:1px solid transparent;
    color:#667085;
    font-weight:400;
    line-height:1.2;
    transition: color .15s ease;
  }
  #picker-chips .filter-chip:hover{ color:#1468ff; }
  #picker-chips .filter-chip.active{
    background:transparent !important;
    border-color:transparent !important;
    color:#1468ff;
    font-weight:700;
  }
  #picker-chips .chip-pill{
    position:absolute; top:3px; left:0; height:calc(100% - 6px);
    background:#fff; border-radius:999px; z-index:0;
    box-shadow:0 1px 3px rgba(16,24,40,.12);
    opacity:0; pointer-events:none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
  }
  @media(prefers-reduced-motion:reduce){
    #picker-chips .chip-pill{ transition:opacity .15s ease; }
  }
  .picker-item{ background: var(--panel-2); border:1px solid var(--line); border-radius:10px; padding:10px 6px; text-align:center; cursor:pointer; }
  .picker-item .logo-frame{ width:32px; height:32px; margin:0 auto 6px; border-radius:9px; }
  .picker-item .p-ticker{ font-family:var(--font-mono); font-size:11px; font-weight:700; }
  .picker-item .p-ovr{ font-family:var(--font-mono); font-size:9px; color:var(--text-dim); margin-top:2px; }
  .picker-suggestions{ padding:2px 16px 12px; overflow-y:auto; }
  .picker-suggestions.is-hidden{ display:none; }
  /* Sector chips and the full/filtered company grid are removed from the picker's default
     (no-query) view -- browsing happens only through Popular Companies + Recently selected now.
     The grid itself still renders and still powers search; it's just hidden until there's a query. */
  #picker-chips{ display:none !important; }
  .picker-grid.is-hidden{ display:none; }
  .picker-suggestion-section + .picker-suggestion-section{ margin-top:14px; }
  .picker-section-title{ margin-bottom:8px; font-size:11px; font-weight:800; color:var(--text-muted); }
  .picker-popular-grid{ display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
  .picker-suggestion-item{ display:flex; align-items:center; gap:9px; min-width:0; padding:9px 10px; border:1px solid var(--line); border-radius:12px; background:var(--panel-2); color:var(--text); cursor:pointer; text-align:left; }
  .picker-suggestion-item:hover{ border-color:var(--left-accent); }
  .picker-suggestion-item.disabled{ opacity:.38; cursor:not-allowed; }
  .picker-suggestion-logo{ width:30px; height:30px; flex:0 0 auto; object-fit:contain; border-radius:0; background:transparent; }
  .picker-suggestion-copy{ min-width:0; }
  .picker-suggestion-name{ display:block; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; font-size:11px; font-weight:700; }
  .picker-suggestion-ticker{ display:block; margin-top:2px; color:var(--text-dim); font:9px var(--font-mono); }
  .picker-recent-list{ display:flex; gap:7px; overflow-x:auto; scrollbar-width:none; }
  .picker-recent-chip{ flex:0 0 auto; border:1px solid var(--line); border-radius:999px; padding:7px 11px; background:var(--panel-2); color:var(--text); font:10px var(--font-mono); cursor:pointer; }
  .picker-recent-chip.disabled{ opacity:.38; cursor:not-allowed; }

  .algo-sheet-body{ padding: 16px; overflow-y: auto; font-size: 12px; line-height: 1.55; color: var(--text-muted); flex:1; min-height:0; }
  .algo-section{ margin-bottom: 14px; }
  .algo-title{ font-family: var(--font-mono); font-weight: 700; color: var(--gold); font-size: 12px; margin-bottom: 4px; }
  .algo-code{ background: var(--panel-2); border: 1px solid var(--line-soft); padding: 8px 10px; border-radius: 6px; font-family: var(--font-mono); font-size: 10px; color: var(--teal); white-space: pre-wrap; margin-top: 4px; }

  .page-footer{ margin-top:12px; padding-top:16px; border-top:1px solid var(--line-soft); text-align:center; }
  .page-footer a,
  .investment-notice-trigger,
  .privacy-notice-trigger{ font-family:var(--font-mono); font-size:10px; color:var(--text-dim); text-decoration:none; }
  .investment-notice-trigger,
  .privacy-notice-trigger{ appearance:none; border:0; padding:0; background:transparent; cursor:pointer; }
  .page-footer-sep{ margin:0 7px; color:var(--text-dim); font-size:10px; }
  .disclaimer[role="button"]{ cursor:pointer; }
  .login-legal-links{ display:flex; align-items:center; justify-content:center; margin-top:12px; }
  .login-legal-btn{ display:block; margin:0; padding:4px; border:0; background:transparent; color:#667085; font-size:11px; text-decoration:underline; text-underline-offset:3px; cursor:pointer; }
  .investment-notice-body{ line-height:1.65; }
  .investment-notice-body p{ margin:0 0 12px; }
  .investment-notice-body p:last-child{ margin-bottom:0; }
  .investment-notice-updated{ margin-top:18px !important; color:var(--text-dim); font:10px var(--font-mono); }
  .privacy-notice-body{ line-height:1.65; }
  .privacy-notice-section + .privacy-notice-section{ margin-top:18px; }
  .privacy-notice-section h3{ margin:0 0 7px; color:var(--text); font-size:13px; }
  .privacy-notice-section p{ margin:0 0 7px; }
  .privacy-notice-section ul{ margin:0; padding-left:18px; }
  .privacy-notice-section li + li{ margin-top:5px; }
  .privacy-notice-section a{ color:#1468ff; overflow-wrap:anywhere; }

  /* Legal notices share one bottom-sheet pattern on every viewport. This scoped override keeps
     the stock picker’s keyboard-oriented top-sheet behavior from leaking into these notices. */
  #investment-notice-overlay,
  #privacy-notice-overlay{
    align-items:flex-end !important;
    justify-content:center !important;
    padding:0 !important;
  }
  #investment-notice-overlay .picker-sheet,
  #privacy-notice-overlay .picker-sheet{
    width:calc(100% - 20px);
    max-width:560px;
    max-height:min(88vh, 760px);
    margin:0 10px 10px;
    border-radius:20px !important;
    border-top:1px solid #e4e7ec !important;
  }

  /* =========================================================
     STOCK SCORE — MINIMAL MOBILE-FIRST HOME
     비교 전에는 밝고 미니멀한 홈, 비교 후에는 기존 상세 비교 UI 사용
     ========================================================= */
  body.home-mode{
    background:#f7f9fc;
    color:#101828;
    padding:0;
  }
  body.home-mode .wrap{
    max-width:560px;
    min-height:100vh;
    padding:26px 22px 34px;
    overflow:visible;
  }
  body.home-mode .header{
    order:1;
    border:0;
    padding:0;
    margin:0 0 88px;
    align-items:center;
  }
  body.home-mode .eyebrow,
  body.home-mode .tagline,
  body.home-mode .disclaimer,
  body.home-mode #logo-key-notice,
  body.home-mode .filter-bar,
  body.home-mode .active-side-indicator,
  body.home-mode .roster-section,
  body.home-mode .matchup,
  body.home-mode #compare-section,
  body.home-mode .page-footer{
    display:none !important;
  }
  body.home-mode .wordmark{
    font-family:var(--font-body);
    font-size:22px;
    font-weight:800;
    letter-spacing:-0.04em;
    color:#101828;
    line-height:1;
  }
  body.home-mode .wordmark::before{
    content:none;
  }
  body.home-mode .wordmark span{ color:#1468ff; }
  body.home-mode .header-right{
    display:flex;
    flex-direction:row;
    align-items:center;
    gap:12px;
  }
  body.home-mode .lang-switch{
    margin:0;
    background:#eef2f7;
    border-radius:999px;
    padding:4px;
    gap:2px;
  }
  body.home-mode .lang-switch button{
    color:#98a2b3;
    padding:5px 8px;
    border-radius:999px;
    font-size:10px;
  }
  body.home-mode .lang-switch button.active{
    background:#fff;
    color:#1468ff;
    box-shadow:0 1px 4px rgba(16,24,40,.08);
  }

  .minimal-home{
    display:none;
  }
  body.home-mode .minimal-home{
    display:flex;
    order:2;
    flex-direction:column;
    width:100%;
  }
  .home-hero{
    text-align:center;
    margin-bottom:58px;
  }
  .home-title{
    font-family:var(--font-body);
    font-size:36px;
    line-height:1.25;
    font-weight:800;
    letter-spacing:-0.055em;
    color:#101828;
    word-break:keep-all;
  }
  .home-title .accent{ color:#1468ff; }
  .home-subtitle{
    margin-top:22px;
    color:#98a2b3;
    font-size:15px;
    line-height:1.65;
    font-weight:500;
    word-break:keep-all;
  }
  .home-picker{
    display:grid;
    grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
    align-items:stretch;
    gap:10px;
  }
  .home-stock-slot{
    width:100%;
    min-height:104px;
    border:1px solid #e4e7ec;
    background:#fff;
    border-radius:18px;
    box-shadow:0 8px 24px rgba(16,24,40,.055);
    padding:15px 14px;
    display:flex;
    align-items:center;
    gap:10px;
    cursor:pointer;
    text-align:left;
    transition:transform .15s ease, border-color .15s ease, box-shadow .15s ease;
  }
  .home-stock-slot:active{ transform:scale(.99); }
  .home-stock-slot:hover{
    border-color:#c7d7fe;
    box-shadow:0 10px 28px rgba(20,104,255,.08);
  }
  .home-slot-search{
    width:23px;
    height:23px;
    flex:0 0 auto;
    color:#98a2b3;
  }
  .home-slot-placeholder{
    color:#98a2b3;
    font-size:16px;
    font-weight:500;
  }
  .home-selected-logo{
    width:44px;
    height:44px;
    border-radius:12px;
    object-fit:contain;
    flex:0 0 auto;
    cursor:pointer;
  }
  .home-selected-copy{ min-width:0; cursor:pointer; }
  .home-selected-name{
    color:#101828;
    font-size:15px;
    font-weight:750;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }
  .home-selected-ticker{
    margin-top:4px;
    color:#98a2b3;
    font-family:var(--font-mono);
    font-size:12px;
    font-weight:600;
  }
  .home-selected-score{
    margin-top:7px;
    display:flex;
    flex-direction:column;
    align-items:center;
    gap:1px;
  }
  .home-selected-score-value{
    color:#1468ff;
    font-family:var(--font-mono);
    font-size:22px;
    font-weight:800;
    line-height:1.1;
    font-variant-numeric:tabular-nums;
  }
  .home-selected-score-label{
    color:#98a2b3;
    font-size:10px;
    font-weight:600;
    white-space:nowrap;
  }
  .home-vs-row{
    display:flex;
    align-items:center;
    gap:0;
    margin:0;
  }
  .home-vs-line{ display:none; }
  .home-vs{
    width:48px;
    height:48px;
    display:flex;
    align-items:center;
    justify-content:center;
    color:#101828;
    font-family:var(--font-mono);
    font-weight:800;
    font-size:14px;
  }
  .home-compare-btn{
    width:100%;
    height:68px;
    border:0;
    border-radius:999px;
    margin-top:18px;
    background:#1468ff;
    color:#fff;
    font-family:var(--font-body);
    font-size:18px;
    font-weight:750;
    cursor:pointer;
    box-shadow:0 10px 24px rgba(20,104,255,.22);
    transition:transform .15s ease, opacity .15s ease;
  }
  .home-compare-btn:active{ transform:scale(.99); }
  .home-compare-btn:disabled{
    opacity:.42;
    cursor:not-allowed;
    box-shadow:none;
  }
  .home-recent{
    margin-top:30px;
    padding-top:26px;
    border-top:1px solid #eaecf0;
  }
  .home-recent-title{
    color:#344054;
    font-size:13px;
    font-weight:750;
    margin-bottom:14px;
  }
  .home-discovery-reason{
    color:#98a2b3;
    font-size:11.5px;
    margin:-8px 0 12px;
  }
  .home-discovery-reason:empty{ display:none; }
  .home-discovery-block + .home-discovery-block{ margin-top:20px; }
  .home-discovery-empty{ color:#98a2b3; font-size:12px; padding:3px 0; }
  .home-recent-chips{
    display:flex;
    gap:8px;
    overflow-x:auto;
    scrollbar-width:none;
    padding-bottom:4px;
  }
  .home-recent-chips::-webkit-scrollbar{ display:none; }
  .home-recent-chip{
    flex:0 0 auto;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    line-height:1;
    border:1px solid #e4e7ec;
    background:#fff;
    color:#475467;
    border-radius:10px;
    padding:9px 12px;
    font-family:var(--font-mono);
    font-size:11px;
    font-weight:600;
    cursor:pointer;
  }
  .home-back-btn{
    display:none;
  }
  body:not(.home-mode) .home-back-btn{
    display:none;
  }

  /* 홈에서 열리는 종목 선택 모달만 밝은 스타일 */
  body.home-mode #picker-overlay{
    background:rgba(16,24,40, calc(0.28 * var(--backdrop-fade)));
    backdrop-filter:blur(calc(6px * var(--backdrop-fade)));
  }
  body.home-mode #picker-overlay .picker-sheet{
    background:#fff;
    border:1px solid #e4e7ec;
    box-shadow:0 24px 70px rgba(16,24,40,.18);
  }
  body.home-mode #picker-overlay .picker-header{
    border-bottom:1px solid #eaecf0;
  }
  body.home-mode #picker-overlay .picker-title{
    color:#101828;
  }
  body.home-mode #picker-overlay .picker-close{
    background:#f8fafc;
    border-color:#eaecf0;
    color:#667085;
  }
  body.home-mode #picker-overlay .picker-search{
    background:#f8fafc;
    border-color:#e4e7ec;
    color:#101828;
  }
  body.home-mode #picker-overlay .picker-chip{
    background:#f8fafc;
    border-color:#e4e7ec;
    color:#667085;
  }
  body.home-mode #picker-overlay .picker-chip.active{
    background:#1468ff;
    border-color:#1468ff;
    color:#fff;
  }
  body.home-mode #picker-overlay .picker-item{
    background:#fff;
    border-color:#eaecf0;
    color:#101828;
  }
  body.home-mode #picker-overlay .p-ticker{ color:#101828; }
  body.home-mode #picker-overlay .p-ovr{ color:#98a2b3; }

  @media(max-width:760px){
    body.home-mode .wrap{ padding:24px 20px 30px; }
    body.home-mode .header{ margin-bottom:76px; }
    body.home-mode .wordmark{ font-size:20px; }
    .home-title{ font-size:34px; }
    .home-subtitle{ font-size:14px; }
    .home-stock-slot{ min-height:96px; padding:11px 10px; flex-direction:column; justify-content:center; align-items:center; text-align:center; gap:5px; }
    .home-selected-logo{ width:36px; height:36px; }
    .home-selected-copy{ width:100%; }
    .home-selected-name{ font-size:13px; }
    .home-selected-ticker{ font-size:10px; margin-top:2px; }
    .home-selected-score{ margin-top:5px; }
    .home-selected-score-value{ font-size:20px; }
    .home-selected-action{ align-self:center; margin:6px auto 0; padding:5px 10px; background:#eef1f6; gap:2px; font-size:9px; line-height:1; }
    .home-selected-action-label{ display:inline; }
    .home-selected-action-arrow{ font-size:12px; }
    .home-vs{ width:36px; height:36px; font-size:11px; }
    .home-recent{ margin-top:26px; }
  }


  /* =========================================================
     UNIFIED LIGHT THEME — HOME + COMPARISON
     첫 화면과 비교 화면을 하나의 밝은 금융 앱 스타일로 통일
     ========================================================= */

  body:not(.home-mode){
    --bg:#f7f9fc;
    --bg-grid:#f7f9fc;
    --panel:#ffffff;
    --panel-2:#ffffff;
    --line:#e4e7ec;
    --line-soft:#eaecf0;
    --text:#101828;
    --text-muted:#667085;
    --text-dim:#98a2b3;
    --gold:#1468ff;
    --gold-dim:#b2ccff;
    --teal:#1468ff;
    --teal-dim:#e8f1ff;
    --vs-red:#1468ff;
    --left-accent:#1468ff;
    --right-accent:#ff7a1a;
    /* Brighter than the previous #15803d (too dark/muted against this theme's white panels) but
       still short of the :root default #22c55e's neon brightness, which drops below readable
       contrast on white. ~4.65:1 against #ffffff, clearing the WCAG AA normal-text threshold
       (.cmp-diff's 14-17px bold weight doesn't qualify as "large text"). */
    --diff-green: #168640;

    background:#f7f9fc;
    color:#101828;
  }

  body:not(.home-mode) .wrap{
    max-width:1080px;
  }

  body:not(.home-mode) .header{
    border-bottom:1px solid #eaecf0;
    margin-bottom:26px;
  }

  body:not(.home-mode) .eyebrow{
    color:#1468ff;
  }

  body:not(.home-mode) .eyebrow::before{
    background:#1468ff;
    box-shadow:none;
  }

  body:not(.home-mode) .wordmark{
    font-family:var(--font-body);
    color:#101828;
    letter-spacing:-0.04em;
  }

  body:not(.home-mode) .wordmark span{
    color:#1468ff;
  }

  body:not(.home-mode) .tagline{
    color:#667085;
  }

  body:not(.home-mode) .disclaimer{
    color:#98a2b3;
  }

  body:not(.home-mode) .lang-switch button{
    color:#98a2b3;
  }

  body:not(.home-mode) .lang-switch button.active{
    color:#1468ff;
  }

  /* 검색 */
  body:not(.home-mode) .search-input{
    background:#fff;
    border-color:#e4e7ec;
    color:#101828;
    box-shadow:0 6px 18px rgba(16,24,40,.035);
  }

  body:not(.home-mode) .search-input:focus{
    border-color:#1468ff;
    box-shadow:0 0 0 3px rgba(20,104,255,.10);
  }

  body:not(.home-mode) .filter-chip{
    background:#fff;
    border-color:#e4e7ec;
    color:#667085;
  }

  body:not(.home-mode) .filter-chip:hover{
    border-color:#b2ccff;
    color:#1468ff;
  }

  body:not(.home-mode) .filter-chip.active{
    background:#1468ff;
    border-color:#1468ff;
    color:#fff;
  }

  body:not(.home-mode) .active-side-indicator{
    color:#98a2b3;
  }

  body:not(.home-mode) .active-side-indicator b{
    color:#1468ff;
  }

  /* QUICK PICKS */
  body:not(.home-mode) .roster-title,
  body:not(.home-mode) .roster-title #quick-picks-accent{
    color:#101828;
  }

  body:not(.home-mode) .roster-sub{
    color:#98a2b3;
  }

  body:not(.home-mode) .roster-line{
    background:#eaecf0;
  }

  body:not(.home-mode) .player-chip{
    background:#fff;
    border-color:#e4e7ec;
    box-shadow:0 5px 16px rgba(16,24,40,.035);
  }

  body:not(.home-mode) .player-chip:hover{
    border-color:#c7d7fe;
    transform:translateY(-1px);
  }

  body:not(.home-mode) .player-chip .chip-ticker{
    color:#101828;
  }

  body:not(.home-mode) .player-chip .chip-ovr{
    color:#98a2b3;
  }

  body:not(.home-mode) .player-chip.sel-left{
    border-color:#1468ff;
    box-shadow:0 0 0 1px #1468ff, 0 5px 16px rgba(20,104,255,.08);
  }

  body:not(.home-mode) .player-chip.sel-right{
    border-color:#ff7a1a;
    box-shadow:0 0 0 1px #ff7a1a, 0 5px 16px rgba(255,122,26,.10);
  }

  /* 카드 — 티어/등급 및 상단 컬러 바 제거 */
  body:not(.home-mode) .card{
    background: color-mix(in srgb, var(--side-color) 6%, #ffffff);
    border:none;
    box-shadow:none;
    overflow:hidden;
    position:relative;
  }

  body:not(.home-mode) .card::before{
    display:none !important;
    content:none !important;
  }

  body:not(.home-mode) .card-tier-ribbon,
  body:not(.home-mode) .rating-badge{
    display:none !important;
  }

  body:not(.home-mode) .card.active{
    transform:none;
  }


  body:not(.home-mode) .ovr-num{
    color:#1468ff;
    text-shadow:none;
  }

  body:not(.home-mode) .ovr-label{
    color:#98a2b3;
  }

  body:not(.home-mode) .ticker{
    color:#101828;
  }

  body:not(.home-mode) .company-name{
    color:#344054;
  }

  body:not(.home-mode) .category,
  body:not(.home-mode) .card-swap-hint{
    color:#98a2b3;
  }

  body:not(.home-mode) .active-tag{
    color:#1468ff;
  }

  /* VS */
  body:not(.home-mode) .vs-badge{
    background:transparent;
    border:none;
    box-shadow:none;
  }

  body:not(.home-mode) .vs-badge span{
    color:#101828;
    text-shadow:none;
  }

  body:not(.home-mode) .vs-badge::after{
    display:none;
  }

  /* 비교 버튼 */
  body:not(.home-mode) .compare-btn{
    background:#1468ff;
    color:#fff;
    box-shadow:0 10px 24px rgba(20,104,255,.20);
    font-family:var(--font-body);
    font-weight:750;
    letter-spacing:-0.01em;
    text-transform:none;
  }

  body:not(.home-mode) .compare-btn:hover{
    transform:translateY(-1px);
    box-shadow:0 12px 26px rgba(20,104,255,.23);
  }

  body:not(.home-mode) .cta-hint{
    color:#98a2b3;
  }

  /* 스탯 비교 */
  body:not(.home-mode) .compare-panel{
    background:#fff;
    border-color:#e4e7ec;
    box-shadow:0 10px 30px rgba(16,24,40,.045);
  }

  body:not(.home-mode) .cmp-header{
    border-color:#eaecf0;
  }

  body:not(.home-mode) .cmp-header-title{
    color:#98a2b3;
  }

  body:not(.home-mode) .cmp-row{
    border-color:#eaecf0;
  }

  body:not(.home-mode) .cmp-stat{
    color:#344054;
  }

  body:not(.home-mode) .info-icon{
    background:#eff4ff;
    color:#1468ff;
  }

  body:not(.home-mode) .cmp-footer{
    border-color:#eaecf0;
  }

  body:not(.home-mode) .cmp-footer-title{
    color:#101828;
  }

  body:not(.home-mode) .cmp-footer-desc{
    color:#667085;
  }

  body:not(.home-mode) .algo-btn{
    color:#1468ff;
    border-color:#d6e4ff;
    background:#f8fbff;
  }

  body:not(.home-mode) .algo-btn:hover{
    border-color:#1468ff;
    background:#eff4ff;
  }

  /* 레이더 탭이 있는 버전과도 호환 */
  body:not(.home-mode) .cmp-tabs{
    border-color:#eaecf0;
  }

  body:not(.home-mode) .cmp-tab-btn{
    background:#f8fafc;
    border-color:#e4e7ec;
    color:#667085;
  }

  body:not(.home-mode) .cmp-tab-btn.active{
    background:#eff4ff;
    border-color:#1468ff;
    color:#1468ff;
  }

  body:not(.home-mode) .radar-legend{
    color:#344054;
  }

  /* 모든 모달도 동일한 화이트 스타일 */
  body:not(.home-mode) .picker-overlay{
    background:rgba(16,24,40, calc(0.28 * var(--backdrop-fade)));
    backdrop-filter:blur(calc(6px * var(--backdrop-fade)));
  }

  body:not(.home-mode) .picker-sheet{
    background:#fff;
    border:1px solid #e4e7ec;
    box-shadow:0 24px 70px rgba(16,24,40,.18);
  }

  body:not(.home-mode) .picker-header{
    border-color:#eaecf0;
  }

  body:not(.home-mode) .picker-title{
    color:#101828;
  }

  body:not(.home-mode) .picker-close{
    background:#f8fafc;
    border-color:#eaecf0;
    color:#667085;
  }

  body:not(.home-mode) .picker-search{
    background:#f8fafc;
    border-color:#e4e7ec;
    color:#101828;
  }

  body:not(.home-mode) .picker-chip{
    background:#f8fafc;
    border-color:#e4e7ec;
    color:#667085;
  }

  body:not(.home-mode) .picker-chip.active{
    background:#1468ff;
    border-color:#1468ff;
    color:#fff;
  }

  body:not(.home-mode) .picker-item{
    background:#fff;
    border-color:#eaecf0;
    color:#101828;
  }

  body:not(.home-mode) .p-ticker{
    color:#101828;
  }

  body:not(.home-mode) .p-ovr{
    color:#98a2b3;
  }

  body:not(.home-mode) .stat-modal-body,
  body:not(.home-mode) .tt-desc{
    color:#344054;
  }

  body:not(.home-mode) .tt-sec,
  body:not(.home-mode) .algo-title{
    color:#1468ff;
  }

  body:not(.home-mode) .tt-list,
  body:not(.home-mode) .algo-sheet-body{
    color:#667085;
  }

  body:not(.home-mode) .tt-footer{
    border-color:#eaecf0;
  }

  body:not(.home-mode) .tt-footer-brand{
    color:#667085;
  }

  body:not(.home-mode) .tt-footer-sub{
    color:#98a2b3;
  }

  body:not(.home-mode) .tt-algo-link{
    color:#1468ff;
  }

  body:not(.home-mode) .algo-code{
    background:#f8fafc;
    border-color:#eaecf0;
    color:#1468ff;
  }

  body:not(.home-mode) .page-footer{
    border-color:#eaecf0;
  }

  body:not(.home-mode) .page-footer a{
    color:#98a2b3;
  }

  body:not(.home-mode) .home-back-btn{
    background:#fff;
    color:#344054;
    border-color:#e4e7ec;
    box-shadow:0 6px 20px rgba(16,24,40,.08);
  }

  @media(max-width:760px){
    body:not(.home-mode){
      padding:20px 20px 44px;
    }

    body:not(.home-mode) .header{
      margin-bottom:20px;
    }

    body:not(.home-mode) .matchup{
      margin-top:4px;
    }

    body:not(.home-mode) .card{
      border-radius:16px;
    }

    body:not(.home-mode) .compare-panel{
      border-radius:18px;
    }

    body:not(.home-mode) .cmp-stat{
      color:#344054;
    }
  }


  /* =========================================================
     MOBILE PICKER SECTOR FILTER FIX
     검색창 아래 섹터 필터가 종목 카드와 겹치지 않도록
     독립된 가로 스크롤 행 + 하단 여백 확보
     ========================================================= */

  .picker-chips{
    display:flex;
    flex-wrap:nowrap;
    overflow-x:auto;
    overflow-y:hidden;
    gap:8px;
    padding:0 16px 14px;
    margin:0;
    min-height:42px;
    flex:0 0 auto;
    scrollbar-width:none;
    -webkit-overflow-scrolling:touch;
    position:relative;
    z-index:2;
    background:inherit;
  }

  .picker-chips::-webkit-scrollbar{
    display:none;
  }

  .picker-chip{
    flex:0 0 auto;
    white-space:nowrap;
    line-height:1;
  }

  .picker-grid{
    display:grid;
    grid-template-columns:repeat(auto-fill, minmax(95px, 1fr));
    gap:8px;
    padding:8px 16px 16px;
    overflow-y:auto;
    min-height:0;
    position:relative;
    z-index:1;
  }

  .picker-search-wrap{
    margin:12px 16px 10px;
    flex:0 0 auto;
  }

  .picker-sheet{
    display:flex;
    flex-direction:column;
  }

  @media (max-width:760px){
    .picker-sheet{
      max-height:82vh;
    }

    .picker-chips{
      padding:0 16px 16px;
      min-height:44px;
    }

    .picker-grid{
      grid-template-columns:repeat(3, minmax(0, 1fr));
      gap:10px;
      padding:10px 16px 18px;
    }

    .picker-item{
      min-width:0;
    }
  }


  /* =========================================================
     PICKER SECTOR CHIP — PERFECT VERTICAL CENTERING
     ========================================================= */
  .picker-chips{
    align-items:center !important;
  }

  .picker-chip{
    flex:0 0 auto;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    height:40px;
    padding:0 16px !important;
    line-height:1 !important;
    white-space:nowrap;
  }

  @media (max-width:760px){
    .picker-chips{
      align-items:center !important;
      min-height:56px;
      padding:0 16px 16px;
    }

    .picker-chip{
      height:40px;
      padding:0 16px !important;
    }
  }


  /* =========================================================
     DIRECT COMPARISON RESULT FLOW
     홈의 비교하기 → 바로 카드 + 스탯 결과
     ========================================================= */
  body:not(.home-mode) .filter-bar,
  body:not(.home-mode) .active-side-indicator,
  body:not(.home-mode) .roster-section{
    display:none !important;
  }

  body:not(.home-mode) .header{
    order:1;
  }

  body:not(.home-mode) .matchup{
    order:2;
    margin-top:8px;
    margin-bottom:24px;
  }

  body:not(.home-mode) #compare-section{
    order:3;
  }

  body:not(.home-mode) .cta-wrap{
    display:none;
  }

  body:not(.home-mode) .cta-hint{
    display:none !important;
  }

  body:not(.home-mode) .compare-btn{
    margin-top:0;
    min-width:auto;
    padding:10px 28px;
    font-size:13px;
    box-shadow: 0 6px 16px -6px rgba(44,230,184,0.3), 0 6px 16px -6px rgba(244,183,64,0.2);
  }

  body:not(.home-mode) .page-footer{
    order:5;
  }

  /* 결과 화면에서는 카드가 과하게 크지 않도록 압축 */
  body:not(.home-mode) .matchup .card{
    max-width:240px;
    padding:18px 18px 16px;
  }

  body:not(.home-mode) .matchup .card .card-swap-hint,
  body:not(.home-mode) .matchup .card .active-tag,
  body:not(.home-mode) .matchup .card .category{
    display:none;
  }

  body:not(.home-mode) .matchup .card .card-top{
    margin-bottom:10px;
  }

  /* 결과 화면 카드 재배치: 로고/기업명/티커/즐겨찾기 -> 점수(중앙정렬) -> 기업 변경 버튼 순 */
  body:not(.home-mode) .matchup .card{
    align-items:center;
    text-align:center;
  }
  body:not(.home-mode) .matchup .card .card-top{
    width:100%;
    justify-content:flex-start;
    gap:6px;
  }
  body:not(.home-mode) .matchup .card .card-top .logo-frame{
    width:42px;
    height:42px;
    flex:none;
  }
  body:not(.home-mode) .matchup .card .card-identity-copy{
    flex:1;
    min-width:0;
    text-align:left;
  }
  body:not(.home-mode) .matchup .card .card-identity-copy .company-name{
    font-size:11.5px;
    line-height:1.25;
    display:-webkit-box;
    -webkit-line-clamp:2;
    -webkit-box-orient:vertical;
    overflow:hidden;
    white-space:normal;
    text-overflow:clip;
  }
  body:not(.home-mode) .matchup .card .fav-btn{
    margin-left:auto;
    flex:none;
    align-self:flex-start;
  }
  body:not(.home-mode) .matchup .card .ovr-block-group{
    flex-direction:row;
    align-items:flex-start;
    justify-content:center;
    gap:12px;
  }
  body:not(.home-mode) .matchup .card .ovr-block,
  body:not(.home-mode) .matchup .card .inv-block{
    text-align:center;
  }
  body:not(.home-mode) .matchup .card .ovr-label{
    font-size:11.5px;
    font-weight:700;
  }
  body:not(.home-mode) .matchup .card .card-change-btn{
    display:inline-flex;
    align-items:center;
    gap:3px;
    margin-top:14px;
    padding:5px 10px;
    border-radius:999px;
    background:#eef1f6;
    border:1px solid transparent;
    color:#667085;
    font-size:10.5px;
    font-weight:700;
  }
  body:not(.home-mode) .matchup .card:hover .card-change-btn{
    background:#eaf1ff;
    border-color:#c7d7fe;
    color:#1468ff;
  }

  body:not(.home-mode) .compare-panel{
    margin-bottom:20px;
  }

  @media(max-width:760px){
    body:not(.home-mode) .header{
      margin-bottom:18px;
    }

    body:not(.home-mode) .matchup{
      gap:8px;
      margin-bottom:18px;
    }

    body:not(.home-mode) .matchup .card{
      max-width:150px;
      padding:14px 12px 13px;
    }

    body:not(.home-mode) .compare-panel{
      margin-bottom:18px;
    }

    body:not(.home-mode) .cta-wrap{
      margin-bottom:22px;
    }

    body:not(.home-mode) .compare-btn{
      width:min(100%, 360px);
      min-width:0;
      padding:14px 24px;
      font-size:16px;
    }
  }


  /* =========================================================
     HOME CLEANUP
     첫 화면에서는 '최근 비교'와 기존 하단 CTA를 완전히 숨김
     ========================================================= */
  body.home-mode .cta-wrap{
    display:none !important;
  }


  /* =========================================================
     MOBILE KEYBOARD / PICKER UX FIX
     - 모바일에서는 종목 선택창을 Bottom Sheet처럼 표시
     - 키보드가 올라오면 실제 보이는 높이에 맞게 축소
     - 헤더/검색창은 고정, 종목 리스트만 스크롤
     - 검색 입력 중에는 섹터 칩 자동 숨김
     ========================================================= */

  .picker-sheet{
    --picker-viewport-height: 80vh;
  }

  .picker-header,
  .picker-search-wrap,
  .picker-chips{
    flex:0 0 auto;
  }

  .picker-grid{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }

  .picker-chips.is-hidden{
    display:none !important;
  }

  @media (max-width:760px){
    .picker-overlay{
      align-items:flex-end !important;
      justify-content:center;
      padding:0 !important;
    }

    .picker-sheet{
      width:calc(100% - 20px);
      max-width:560px;
      height:auto;
      max-height:var(--picker-viewport-height);
      border-radius:20px !important;
      margin:0 10px 10px;
      transform:translateZ(0);
    }

    .picker-header{
      padding:16px 18px;
    }

    .picker-search-wrap{
      margin:12px 16px 10px;
    }

    .picker-chips{
      padding:0 16px 14px;
      min-height:54px;
    }

    .picker-grid{
      padding:8px 16px 18px;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }

    .picker-item{
      min-width:0;
    }
  }


  /* =========================================================
     MOBILE TOP SHEET PICKER
     - 종목 선택창을 화면 상단에 고정
     - 키보드가 열려도 검색창은 항상 위에 유지
     - 리스트만 스크롤
     ========================================================= */
  @media (max-width:760px){
    .picker-overlay{
      align-items:flex-start !important;
      justify-content:center !important;
      padding:0 !important;
    }

    .picker-sheet{
      width:100%;
      max-width:560px;
      height:auto;
      max-height:var(--picker-viewport-height);
      margin:0;
      border-radius:0 0 22px 22px !important;
      border-top:none !important;
      border-bottom:1px solid #e4e7ec !important;
      transform:translateZ(0);
    }

    .picker-header{
      padding:16px 18px;
      position:sticky;
      top:0;
      z-index:5;
      background:inherit;
    }

    .picker-search-wrap{
      position:sticky;
      top:57px;
      z-index:4;
      background:inherit;
      margin:0;
      padding:12px 16px 10px;
    }

    .picker-chips{
      position:sticky;
      top:126px;
      z-index:3;
      background:inherit;
      padding:0 16px 14px;
      min-height:54px;
    }

    .picker-chips.is-hidden{
      display:none !important;
    }

    .picker-grid{
      flex:1 1 auto;
      min-height:0;
      overflow-y:auto;
      overscroll-behavior:contain;
      -webkit-overflow-scrolling:touch;
      padding:10px 16px 18px;
      grid-template-columns:repeat(3, minmax(0,1fr));
      gap:10px;
    }
  }

  /* =========================================================
     OVERLAY AUDIT STAGE 1 -- #algo-overlay / #today-rank-overlay
     Neither has a search input or any keyboard-avoidance need, so the "MOBILE TOP SHEET PICKER"
     rules just above (added for the stock picker's on-screen-keyboard problem) should never have
     applied to them -- they only did because both share the generic .picker-overlay/.picker-sheet
     classes with the picker. Same class-leak the investment/privacy-notice override elsewhere in
     this file already fixes for those two; this fixes it for these two. Scoped to mobile only
     (this same 760px breakpoint) -- desktop's centered-modal .picker-overlay default is untouched.
     #picker-overlay and #stat-modal-overlay already have their own later ID-specific bottom-sheet
     overrides further down this file (search "#picker-overlay{ align-items:flex-end" and
     "#stat-modal-overlay{ align-items:flex-end") -- untouched here, not because they still need
     this fix, but because they already have their own equivalent one. Mirrors the original
     (pre-top-sheet) bottom-sheet values a few rules up, scoped by ID instead of reapplying to
     every .picker-overlay.
     ========================================================= */
  @media (max-width:760px){
    #algo-overlay,
    #today-rank-overlay{
      align-items:flex-end !important;
      justify-content:center !important;
      padding:0 !important;
    }

    #algo-overlay .picker-sheet,
    #today-rank-overlay .picker-sheet{
      width:calc(100% - 20px);
      max-width:560px;
      height:auto;
      max-height:80vh;
      margin:0 10px 10px;
      border-radius:20px !important;
      border-top:1px solid #e4e7ec !important;
      transform:translateZ(0);
    }

    #algo-overlay .picker-header,
    #today-rank-overlay .picker-header{
      position:static;
      padding:16px 18px;
    }
  }


  /* =========================================================
     PICKER SEARCH ICON ALIGNMENT FIX
     Top Sheet에서 돋보기가 검색창 밖으로 밀려나지 않도록
     아이콘 기준점을 padding 영역 내부로 고정
     ========================================================= */
  .picker-search-wrap{
    position:relative;
  }

  .picker-search-wrap svg{
    left:28px !important;
    top:50% !important;
    transform:translateY(-50%) !important;
    z-index:2;
    pointer-events:none;
  }

  .picker-search{
    padding-left:42px !important;
  }

  @media (max-width:760px){
    .picker-search-wrap{
      position:sticky !important;
      top:57px;
      z-index:4;
      background:inherit;
      margin:0;
      padding:12px 16px 10px;
    }

    .picker-search-wrap svg{
      left:28px !important;
      top:50% !important;
      transform:translateY(-50%) !important;
    }

    .picker-search{
      width:100%;
      padding-left:42px !important;
    }
  }


  /* =========================================================
     STAT INFO INTERACTION CLEANUP
     - 스탯 클릭 시 파란 클릭/포커스 박스 제거
     - info 아이콘은 소문자 i
     - 파란 원형 배경 제거
     ========================================================= */

  .cmp-stat{
    -webkit-tap-highlight-color: transparent !important;
    outline:none !important;
    user-select:none;
  }

  .cmp-stat:focus,
  .cmp-stat:focus-visible,
  .cmp-stat:active{
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  .info-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:auto !important;
    height:auto !important;
    min-width:0 !important;
    border-radius:0 !important;
    background:transparent !important;
    color:#98a2b3 !important;
    font-family:var(--font-body);
    font-size:12px !important;
    font-weight:700;
    font-style:normal;
    line-height:1;
    border:none !important;
    box-shadow:none !important;
    -webkit-tap-highlight-color:transparent !important;
    outline:none !important;
    padding:0 !important;
  }

  .info-icon:focus,
  .info-icon:focus-visible,
  .info-icon:active{
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  body:not(.home-mode) .info-icon{
    background:transparent !important;
    color:#98a2b3 !important;
  }


  /* =========================================================
     FINAL INFO ICON / ALGORITHM BUTTON CLEANUP
     ========================================================= */

  /* 스탯 옆: 원 안의 소문자 i, 배경 없음 */
  .info-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:15px !important;
    height:15px !important;
    min-width:15px !important;
    border:1px solid #98a2b3 !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#667085 !important;
    font-family:Arial, sans-serif !important;
    font-size:10px !important;
    font-weight:700 !important;
    font-style:normal !important;
    line-height:1 !important;
    padding:0 !important;
    box-shadow:none !important;
    outline:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .info-icon:active,
  .info-icon:focus,
  .info-icon:focus-visible{
    background:transparent !important;
    box-shadow:none !important;
    outline:none !important;
  }

  /* 산출 알고리즘 보기: 클릭 시 파란 박스/하이라이트 제거 */
  .algo-btn{
    -webkit-tap-highlight-color:transparent !important;
    outline:none !important;
  }

  .algo-btn:focus,
  .algo-btn:focus-visible,
  .algo-btn:active{
    outline:none !important;
    box-shadow:none !important;
  }


  /* =========================================================
     ALGORITHM CTA — lowercase i in circle + perfect centering
     ========================================================= */
  .algo-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:6px !important;
    min-height:32px;
    padding:0 14px !important;
    line-height:1 !important;
    vertical-align:middle;
    -webkit-tap-highlight-color:transparent !important;
    outline:none !important;
  }

  .algo-btn:focus,
  .algo-btn:focus-visible,
  .algo-btn:active{
    outline:none !important;
    box-shadow:none !important;
  }

  .algo-info-icon{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    width:14px;
    height:14px;
    min-width:14px;
    border:1px solid currentColor;
    border-radius:50%;
    background:transparent;
    font-family:Arial, sans-serif;
    font-size:9px;
    font-weight:700;
    font-style:normal;
    line-height:1;
    transform:none;
  }


  /* =========================================================
     FINAL STAT INFO ICON / ALGORITHM CTA
     - 스탯명 옆: 산출 알고리즘에 쓰던 얇은 원 + 소문자 i
     - 산출 알고리즘 보기 옆: 아이콘 없음
     - 알고리즘 CTA 텍스트는 타원 정중앙
     ========================================================= */

  .cmp-stat .info-icon{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:14px !important;
    height:14px !important;
    min-width:14px !important;
    padding:0 !important;
    border:1px solid currentColor !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#98a2b3 !important;
    font-family:Arial, sans-serif !important;
    font-size:9px !important;
    font-weight:700 !important;
    font-style:normal !important;
    line-height:1 !important;
    box-shadow:none !important;
    outline:none !important;
    -webkit-tap-highlight-color:transparent !important;
  }

  .cmp-stat,
  .cmp-stat:active,
  .cmp-stat:focus,
  .cmp-stat:focus-visible{
    -webkit-tap-highlight-color:transparent !important;
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  .algo-info-icon{
    display:none !important;
  }

  .algo-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    gap:0 !important;
    min-height:32px;
    padding:0 14px !important;
    line-height:1 !important;
    text-align:center !important;
    vertical-align:middle;
    -webkit-tap-highlight-color:transparent !important;
    outline:none !important;
  }

  .algo-btn:focus,
  .algo-btn:focus-visible,
  .algo-btn:active{
    outline:none !important;
    box-shadow:none !important;
  }


  /* =========================================================
     FINAL — STAT LABEL INFO INDICATOR
     스탯명 오른쪽 위에 작은 원형 i를 배치.
     상세 모달 제목에는 i를 표시하지 않음.
     ========================================================= */
  .cmp-stat{
    gap:0 !important;
    overflow:visible !important;
  }

  .cmp-stat .stat-label-wrap{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:max-content !important;
    overflow:visible !important;
  }

  .cmp-stat .stat-label-wrap > .info-icon{
    position:absolute !important;
    top:-6px !important;
    right:-11px !important;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    width:11px !important;
    height:11px !important;
    min-width:11px !important;
    margin:0 !important;
    padding:0 !important;
    border:1px solid #a6afbc !important;
    border-radius:50% !important;
    background:transparent !important;
    color:#8f99a8 !important;
    font-family:Arial, sans-serif !important;
    font-size:7px !important;
    font-weight:700 !important;
    font-style:normal !important;
    line-height:9px !important;
    letter-spacing:0 !important;
    box-shadow:none !important;
    pointer-events:none !important;
    transform:none !important;
  }


  /* =========================================================
     FINAL — STAT DETAIL DISCOVERY WITHOUT INFO ICON
     - 모든 i 아이콘 제거
     - 스탯명 자체를 눌러 상세 설명 열기
     - 하단 안내 문구로 기능을 자연스럽게 유도
     ========================================================= */

  .cmp-stat .info-icon{
    display:none !important;
  }

  .cmp-stat{
    cursor:pointer !important;
    -webkit-tap-highlight-color:transparent !important;
    outline:none !important;
    user-select:none !important;
  }

  .cmp-stat .stat-label-wrap{
    position:relative !important;
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    transition:color .12s ease, transform .12s ease;
  }

  .cmp-stat:active .stat-label-wrap{
    color:#1468ff !important;
    transform:scale(.98);
  }

  .cmp-stat:focus,
  .cmp-stat:focus-visible,
  .cmp-stat:active{
    outline:none !important;
    box-shadow:none !important;
    background:transparent !important;
  }

  body:not(.home-mode) .cmp-footer-desc{
    max-width:460px;
  }


  /* =========================================================
     LOGIN UI
     ========================================================= */
  .profile-login-btn{
    display:none;
    width:36px;
    height:36px;
    align-items:center;
    justify-content:center;
    border:1px solid #e4e7ec;
    border-radius:50%;
    background:#fff;
    color:#344054;
    cursor:pointer;
    padding:0;
    box-shadow:0 2px 8px rgba(16,24,40,.04);
    -webkit-tap-highlight-color:transparent;
  }

  .profile-login-btn svg{
    width:20px;
    height:20px;
  }

  .profile-login-btn:focus,
  .profile-login-btn:active{
    outline:none;
    box-shadow:0 2px 8px rgba(16,24,40,.04);
  }

  .header-right{
    gap:10px;
  }

  .login-overlay{
    --backdrop-fade:1;
    position:fixed;
    inset:0;
    display:none;
    align-items:flex-end;
    justify-content:center;
    background:rgba(16,24,40, calc(0.34 * var(--backdrop-fade)));
    backdrop-filter:blur(calc(6px * var(--backdrop-fade)));
    z-index:3000;
    padding:0;
  }

  .login-overlay.open{
    display:flex;
  }

  .login-sheet{
    width:100%;
    max-width:520px;
    position:relative;
    background:#fff;
    border-radius:24px 24px 0 0;
    padding:26px 20px 28px;
    box-shadow:0 -18px 50px rgba(16,24,40,.14);
  }

  .login-handle{
    position:relative;
    width:42px;
    height:4px;
    border-radius:999px;
    background:#d0d5dd;
    touch-action:none;
    margin:0 auto 22px;
    transition:background-color 120ms ease, transform 120ms ease;
  }
  .login-handle::before{ content:""; position:absolute; inset:-16px -30px; }
  .login-handle.armed{ background:#1468ff; transform:scaleX(1.15); }

  .login-close{
    position:absolute;
    right:18px;
    top:18px;
    width:34px;
    height:34px;
    border:1px solid #eaecf0;
    border-radius:50%;
    background:#f8fafc;
    color:#667085;
    cursor:pointer;
    -webkit-tap-highlight-color:transparent;
  }

  .login-brand{
    font-family:var(--font-body);
    font-size:16px;
    font-weight:800;
    letter-spacing:-.03em;
    color:#101828;
    margin-bottom:18px;
  }

  .login-brand span{
    color:#1468ff;
  }

  .login-sheet h2{
    font-size:24px;
    line-height:1.3;
    color:#101828;
    letter-spacing:-.04em;
    margin-bottom:10px;
  }

  .login-desc{
    font-size:14px;
    line-height:1.55;
    color:#667085;
    margin-bottom:24px;
    word-break:keep-all;
  }

  .social-login-btn{
    width:100%;
    height:54px;
    border-radius:14px;
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    font-family:var(--font-body);
    font-size:15px;
    font-weight:700;
    cursor:pointer;
    margin-bottom:10px;
    -webkit-tap-highlight-color:transparent;
  }

  .social-login-btn.google{
    background:#fff;
    border:1px solid #d0d5dd;
    color:#101828;
  }

  .social-login-btn.kakao{
    background:#fee500;
    border:1px solid #fee500;
    color:#191919;
  }

  .social-icon{
    width:22px;
    height:22px;
    display:inline-flex;
    align-items:center;
    justify-content:center;
    border-radius:50%;
    font-size:12px;
    font-weight:800;
  }

  .google-icon{
    border:1px solid #d0d5dd;
    color:#4285f4;
    background:#fff;
  }

  .kakao-icon{
    color:#191919;
    background:rgba(25,25,25,.08);
  }

  .login-note{
    margin-top:16px;
    font-size:11px;
    line-height:1.5;
    color:#98a2b3;
    text-align:center;
  }

  @media(min-width:761px){
    .login-overlay{
      align-items:center;
      padding:20px;
    }

    .login-sheet{
      border-radius:24px;
      max-width:430px;
    }

    .login-handle{
      display:none;
    }
  }


  /* =========================================================
     KO / EN LAYOUT UNIFICATION
     언어 전환 시 배치·높이·폭이 흔들리지 않도록 고정
     ========================================================= */

  /* ---------- 공통 헤더 ---------- */
  .header{
    min-height:72px;
  }

  .header-right{
    min-height:40px;
    justify-content:center;
  }

  .lang-switch{
    flex:0 0 auto;
  }

  /* ---------- 첫 화면 ---------- */
  .home-hero{
    min-height:155px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:flex-start;
  }

  .home-title{
    min-height:90px;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    text-align:center;
  }

  .home-subtitle{
    min-height:48px;
    display:flex;
    align-items:flex-start;
    justify-content:center;
    text-align:center;
  }

  .home-stock-slot{
    min-height:94px;
  }

  .home-selected-copy{
    min-width:0;
  }

  .home-selected-name{
    line-height:1.25;
  }

  .home-selected-ticker{
    line-height:1.2;
  }

  .home-selected-action{
    margin-left:auto;
    display:inline-flex;
    align-items:center;
    gap:7px;
    flex:0 0 auto;
    padding:9px 12px;
    border-radius:999px;
    background:#eef1f6;
    color:#667085;
    font-size:12px;
    font-weight:700;
  }
  .home-selected-action-label{ display:inline-block; line-height:1; transform:translateY(-1px); }
  .home-selected-action-arrow{ color:#1468ff; font-size:18px; line-height:1; transform:translateY(-1px); }
  .home-stock-slot:hover .home-selected-action{ background:#eaf1ff; color:#1468ff; }

  /* Row layout (viewport > 760px, home-stock-slot stays horizontal): the fixed-width logo +
     "기업 변경" pill were eating most of the ~224px slot, leaving so little room for
     .home-selected-copy that longer company names collapsed to a single character before the
     ellipsis. Drop the pill's text label here (full label + aria-label are still read by
     screen readers, and the mobile column layout below keeps the visible label) so the name
     gets enough width to read normally. */
  @media(min-width:761px){
    .home-selected-copy{ min-width:64px; }
    .home-selected-action{ padding:9px 10px; gap:0; }
    .home-selected-action-label{ display:none; }
  }

  .home-compare-btn{
    min-height:68px;
  }

  /* ---------- 비교 결과 카드 ---------- */
  body:not(.home-mode) .matchup{
    align-items:stretch;
  }

  body:not(.home-mode) .matchup .card{
    min-height:154px;
    display:flex;
    flex-direction:column;
    justify-content:flex-start;
  }

  body:not(.home-mode) .card-top{
    min-height:46px;
  }

  body:not(.home-mode) .ticker-row{
    min-height:22px;
  }

  body:not(.home-mode) .company-name{
    min-height:20px;
    line-height:1.3;
  }

  /* ---------- 스탯 비교표 ---------- */
  .cmp-header,
  .cmp-row{
    grid-template-columns:minmax(82px,1fr) 150px minmax(82px,1fr) !important;
  }

  .cmp-row{
    min-height:52px;
  }

  .cmp-stat{
    min-height:26px;
    display:flex;
    align-items:center;
    justify-content:center;
    padding:0 4px;
    text-align:center;
  }

  .cmp-stat .stat-label-wrap{
    width:100%;
    min-height:22px;
    display:flex !important;
    align-items:center !important;
    justify-content:center !important;
    text-align:center;
    white-space:nowrap;
  }

  .cmp-stat .stat-full,
  .cmp-stat .stat-short{
    width:100%;
    text-align:center;
    line-height:1.15;
  }

  .cmp-score{
    min-width:28px;
    text-align:center;
  }

  .cmp-diff-slot{
    min-width:52px;
  }

  /* EN은 긴 단어 때문에 레이아웃이 흔들리지 않도록 폰트만 아주 미세 조정 */
  html[lang="en"] .cmp-stat .stat-full,
  html[lang="en"] .cmp-stat .stat-short{
    font-size:10px !important;
    letter-spacing:0 !important;
  }

  html[lang="en"] .home-title{
    font-size:34px;
    letter-spacing:-0.05em;
  }

  html[lang="en"] .home-subtitle{
    font-size:14px;
  }

  /* ---------- 버튼 ---------- */
  .compare-btn,
  .algo-btn{
    min-height:32px;
  }

  .algo-btn{
    display:inline-flex !important;
    align-items:center !important;
    justify-content:center !important;
    line-height:1 !important;
    text-align:center;
  }

  /* ---------- 모바일 ---------- */
  @media (max-width:760px){
    .header{
      min-height:58px;
    }

    .home-hero{
      min-height:148px;
    }

    .home-title{
      min-height:84px;
      font-size:34px;
    }

    html[lang="en"] .home-title{
      font-size:31px;
    }

    .home-subtitle{
      min-height:44px;
      font-size:14px;
    }

    .home-stock-slot{
      min-height:92px;
    }

    .home-selected-action-label{ display:inline; }
    .home-selected-action{ padding:9px 11px; }

    body:not(.home-mode) .matchup .card{
      min-height:128px;
    }

    .cmp-header,
    .cmp-row{
      grid-template-columns:minmax(66px,1fr) 124px minmax(66px,1fr) !important;
      gap:4px !important;
    }

    .cmp-row{
      min-height:50px;
      padding:11px 0 !important;
    }

    .cmp-stat{
      min-height:24px;
      padding:0 2px;
    }

    .cmp-stat .stat-full,
    .cmp-stat .stat-short{
      font-size:11px !important;
      line-height:1.1;
    }

    html[lang="en"] .cmp-stat .stat-full,
    html[lang="en"] .cmp-stat .stat-short{
      font-size:9.5px !important;
      letter-spacing:-0.01em !important;
    }

    .cmp-score{
      font-size:18px !important;
    }

    .cmp-diff-slot{
      min-width:40px !important;
    }

    .compare-btn{
      min-height:48px;
    }
    body:not(.home-mode) .compare-btn{
      min-height:36px;
      padding:8px 22px;
      font-size:12px;
    }
  }

  /* 종목 선택: 데스크톱 중앙 모달 / 모바일 바텀시트 */
  @media (max-width:760px){
    #picker-overlay{ align-items:flex-end !important; }
    #picker-overlay .picker-sheet{
      border-radius:22px 22px 0 0 !important;
      border-top:1px solid #e4e7ec !important;
      border-bottom:0 !important;
      max-height:min(88dvh, var(--picker-viewport-height)) !important;
    }
    #picker-overlay .picker-header,
    #picker-overlay .picker-search-wrap,
    #picker-overlay .picker-chips{ position:static !important; }
  }

  /* ---------- 아주 좁은 모바일 ---------- */
  @media (max-width:390px){
    .cmp-header,
    .cmp-row{
      grid-template-columns:minmax(62px,1fr) 116px minmax(62px,1fr) !important;
    }

    html[lang="en"] .cmp-stat .stat-full,
    html[lang="en"] .cmp-stat .stat-short{
      font-size:9px !important;
    }
  }


  /* =========================================================
     ONE-SCREEN HOME LAYOUT
     첫 화면(종목 선택 + 비교하기 버튼)이 스크롤 없이
     화면 높이 안에서 항상 보이도록 여백을 화면 높이에 비례해 조정
     ========================================================= */

  body.home-mode{
    min-height:100vh;
    min-height:100dvh;
  }

  /* 하단 탭바(74px)가 항상 떠 있으므로, 첫 화면이 "탭바를 뺀 나머지 화면"
     안에서 스크롤 없이 다 보이도록 그만큼 빼고 계산한다 */
  body.home-mode .wrap{
    min-height: calc(100vh - 74px);
    min-height: calc(100dvh - 74px);
    justify-content:center;
    padding-top: clamp(14px, 4vh, 26px) !important;
    padding-bottom: clamp(14px, 4vh, 34px) !important;
  }

  body.home-mode .header{
    margin-bottom: clamp(18px, 6vh, 88px) !important;
  }

  .home-hero{
    min-height:0 !important;
    margin-bottom: clamp(14px, 4vh, 58px) !important;
  }

  .home-title{ min-height:0 !important; }

  .home-subtitle{
    min-height:0 !important;
    margin-top: clamp(8px, 2vh, 22px) !important;
  }

  .home-stock-slot{
    min-height: clamp(70px, 11vh, 94px) !important;
    padding: clamp(10px, 2vh, 18px) 20px !important;
  }

  .home-vs-row{
    margin: clamp(8px, 2vh, 18px) 0 !important;
  }

  .home-compare-btn{
    margin-top: clamp(16px, 4vh, 42px) !important;
    height: clamp(50px, 8vh, 68px) !important;
    min-height:0 !important;
  }

  @media (max-height:760px){
    .home-title{ font-size: clamp(26px, 6vh, 36px); }
    .home-subtitle{ font-size: clamp(12.5px, 2.4vh, 15px); }
    html[lang="en"] .home-title{ font-size: clamp(24px, 5.6vh, 34px); }
  }

  @media (max-width:760px){
    body.home-mode .wrap{ padding-left:20px; padding-right:20px; }
    body.home-mode .header{ margin-bottom: clamp(16px, 6vh, 76px) !important; }
  }


  /* =========================================================
     RADAR CHART — 스탯 비교 시각화
     6가지 스탯을 육각형 레이더로 겹쳐 보여주고,
     렌더링될 때마다 중심에서 커지는 이펙트로 등장
     ========================================================= */

  .radar-wrap{
    display:flex;
    flex-direction:column;
    align-items:center;
    padding: 8px 0 10px;
    margin-bottom: 8px;
    border-bottom: 1px solid var(--line-soft);
  }

  .radar-svg{
    width:100%;
    max-width:260px;
    height:auto;
    overflow:visible;
  }

  .radar-grid-line{
    fill:none;
    stroke: var(--line-soft);
    stroke-width:1;
  }

  .radar-axis-line{
    stroke: var(--line-soft);
    stroke-width:1;
  }

  .radar-axis-label{
    font-family: var(--font-mono);
    font-size:12px;
    font-weight:700;
    fill: var(--text-muted);
    text-anchor:middle;
    dominant-baseline:middle;
    letter-spacing:0.02em;
  }

  .radar-poly{
    fill-opacity:0.16;
    stroke-width:2;
    stroke-linejoin:round;
  }

  .radar-poly.left{ stroke:var(--left-accent); fill:var(--left-accent); }
  .radar-poly.right{ stroke:var(--right-accent); fill:var(--right-accent); }

  .radar-dot{ stroke:var(--panel); stroke-width:1.5; }
  .radar-dot.left{ fill:var(--left-accent); }
  .radar-dot.right{ fill:var(--right-accent); }

  /* 커지는 이펙트: 중심(0)에서 원래 크기(1)로 바운스감 있게 확대 */
  .radar-data-group{
    transform-box: fill-box;
    transform-origin: center;
    transform: scale(0);
    opacity:0;
    transition: transform .55s cubic-bezier(0.34, 1.56, 0.64, 1), opacity .4s ease;
  }

  .radar-data-group.radar-in{
    transform: scale(1);
    opacity:1;
  }

  .radar-legend{
    display:flex;
    gap:22px;
    margin-top:14px;
  }

  .radar-legend-item{
    display:flex;
    align-items:center;
    gap:6px;
    font-family: var(--font-mono);
    font-size:11px;
    font-weight:700;
    color: var(--text-muted);
    letter-spacing:0.03em;
  }

  .radar-legend-dot{
    width:9px; height:9px;
    border-radius:50%;
    flex-shrink:0;
  }

  .radar-legend-dot.left{ background: var(--left-accent); }
  .radar-legend-dot.right{ background: var(--right-accent); }

  @media (max-width:760px){
    .radar-wrap{ padding:6px 0 8px; }
    .radar-svg{ max-width:210px; }
    .radar-axis-label{ font-size:10.5px; }
    .radar-legend{ gap:16px; margin-top:10px; }
  }


  /* =========================================================
     SHARE RESULT
     비교 결과를 네이티브 공유 시트로 보내거나,
     지원하지 않으면 텍스트를 클립보드로 복사
     ========================================================= */

  .cmp-footer-actions{
    display:flex;
    align-items:center;
    justify-content:center;
    gap:10px;
    flex-wrap:wrap;
    margin-top:2px;
  }

  .share-btn{
    display:inline-flex;
    align-items:center;
    justify-content:center;
    gap:7px;
    background:#1468ff;
    color:#fff;
    border:none;
    font-family:var(--font-body);
    font-weight:700;
    font-size:12.5px;
    letter-spacing:-0.01em;
    padding:0 16px;
    min-height:32px;
    border-radius:999px;
    cursor:pointer;
    box-shadow:0 6px 16px rgba(20,104,255,.22);
    transition: transform .15s ease, box-shadow .15s ease;
    -webkit-tap-highlight-color:transparent;
  }

  .share-btn svg{ width:14px; height:14px; flex-shrink:0; }

  .share-btn:hover{
    transform: translateY(-1px);
    box-shadow:0 8px 20px rgba(20,104,255,.28);
  }

  .share-btn:active{
    transform: translateY(0) scale(.97);
  }

  .share-btn:focus,
  .share-btn:focus-visible{
    outline:none;
  }

  .share-toast{
    position:fixed;
    left:50%;
    bottom:28px;
    transform: translateX(-50%) translateY(16px);
    max-width: calc(100% - 32px);
    background:#101828;
    color:#fff;
    font-family:var(--font-body);
    font-size:13px;
    font-weight:600;
    text-align:center;
    padding:12px 22px;
    border-radius:999px;
    box-shadow:0 14px 34px rgba(16,24,40,.30);
    opacity:0;
    pointer-events:none;
    transition: opacity .25s ease, transform .25s ease;
    z-index:4000;
  }

  .share-toast.show{
    opacity:1;
    transform: translateX(-50%) translateY(0);
  }

  @media (max-width:760px){
    .share-btn{ font-size:12px; padding:0 14px; min-height:34px; }
  }


  /* =========================================================
     BOTTOM TAB BAR — 비교 / 랭킹 / 즐겨찾기
     ========================================================= */

  body{
    padding-bottom: calc(74px + env(safe-area-inset-bottom, 0px)) !important;
  }

  .bottom-tabbar{
    position:fixed;
    left:0; right:0; bottom:0;
    z-index:900;
    display:flex;
    background:#ffffff;
    border-top:1px solid #eaecf0;
    box-shadow:0 -6px 20px rgba(16,24,40,.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
  }

  .tabbar-btn{
    flex:1 1 0;
    display:flex;
    flex-direction:column;
    align-items:center;
    justify-content:center;
    gap:4px;
    background:none;
    border:none;
    padding:9px 4px 8px;
    cursor:pointer;
    color:#98a2b3;
    font-family:var(--font-body);
    font-size:11px;
    font-weight:700;
    -webkit-tap-highlight-color:transparent;
    transition: color .15s ease;
  }

  .tabbar-btn svg{
    width:22px; height:22px;
    stroke-width:1.8;
  }

  .tabbar-btn:hover{ color:#475467; }

  .tabbar-btn.active{
    color:#1468ff;
  }

  .tabbar-btn.active svg{
    stroke-width:2.1;
  }

  .tabbar-btn:focus,
  .tabbar-btn:focus-visible{
    outline:none;
  }

  /* 탭 전환 대상 화면 — 기본은 숨김, 활성 탭만 표시.
     .wrap(flex) 안에서 header(order:1)보다 항상 뒤에 오도록 order 고정 */
  #compare-view,
  .tab-view{
    display:none;
    order:2;
    width:100%;
  }

  #compare-view.tab-active{
    /* 내부의 matchup/compare-section/cta-wrap 등이 기존 order 규칙으로
       재배치되므로, .wrap과 동일하게 flex column 컨텍스트를 유지한다 */
    display:flex;
    flex-direction:column;
    animation: tabFadeIn 180ms ease;
  }

  .tab-view.tab-active{
    display:block;
    animation: tabFadeIn 180ms ease;
  }

  @keyframes tabFadeIn{ from{ opacity:0; } to{ opacity:1; } }

  body:not(.home-mode) .home-back-btn{
    bottom: calc(82px + env(safe-area-inset-bottom, 0px)) !important;
  }

  /* ---------- 랭킹 화면 ---------- */
  .ranking-head{
    padding-top:6px;
    margin-bottom:10px;
  }

  .ranking-eyebrow{
    font-family:var(--font-mono);
    font-size:11px;
    letter-spacing:0.18em;
    color:#1468ff;
    text-transform:uppercase;
    margin-bottom:8px;
    display:none;
  }

  .ranking-title{
    font-family:var(--font-body);
    font-weight:800;
    font-size:26px;
    letter-spacing:-0.03em;
    color:#101828;
    margin-bottom:8px;
  }

  .ranking-subtitle{
    font-size:13.5px;
    line-height:1.55;
    color:#667085;
    max-width:440px;
    min-height:42px;
    white-space:pre-line;
  }
  .ranking-search-wrap{ margin:0 0 12px; }
  .ranking-sticky-bar{
    position:sticky; top:0; z-index:5;
    background:#f7f9fc;
    padding-top:10px; margin-top:-10px;
    padding-bottom:2px;
  }
  .ranking-search{
    width:100%; box-sizing:border-box; padding:12px 14px; border-radius:12px;
    border:1px solid #dfe5ee; background:#ffffff; color:#101828;
    font:600 14px/1.2 var(--font-sans); outline:none;
  }
  .ranking-search::placeholder{ color:#98a2b3; opacity:1; }
  .ranking-search:focus{ border-color:var(--accent); box-shadow:0 0 0 3px rgba(52,120,246,.12); }

  .ranking-chips{
    margin-bottom:20px;
  }

  /* 랭킹 탭은 홈 화면(dark-var) 상태에서 열려도 항상 밝은 톤을 유지.
     Apple/Toss 세그먼트 컨트롤 스타일: 회색 트랙 위에 흰색 알약이 슬라이드하고, 선택된 탭은
     텍스트만 파란색+굵게 바뀐다 (칩 하나하나가 배경을 갖던 이전 방식과 달리, 배경은 트랙 전체와
     슬라이딩 알약 하나뿐 -- 나머지 칩은 항상 배경이 투명). */
  .ranking-chips.filter-chips{
    position:relative;
    background:#eef1f6;
    border-radius:999px;
    padding:3px;
  }
  .ranking-chips.filter-chips .filter-chip{
    position:relative; z-index:1;
    background:transparent;
    border-color:transparent;
    color:#667085;
  }

  .ranking-chips.filter-chips .filter-chip:hover{
    color:#1468ff;
  }

  .ranking-chips.filter-chips .filter-chip.active{
    background:transparent;
    border-color:transparent;
    color:#1468ff;
    font-weight:700;
  }
  .ranking-chips.filter-chips .chip-pill{
    position:absolute; top:3px; left:0; height:calc(100% - 6px);
    background:#fff; border-radius:999px; z-index:0;
    box-shadow:0 1px 3px rgba(16,24,40,.12);
    opacity:0; pointer-events:none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
  }

  .ranking-list{
    display:flex;
    flex-direction:column;
    gap:0;
    margin-bottom:24px;
  }

  .ranking-card{
    position:relative;
    display:flex;
    align-items:center;
    gap:14px;
    background:transparent;
    border:none;
    border-bottom:1px solid #eef1f5;
    border-radius:0;
    padding:14px 4px;
    min-height:85px;
    cursor:pointer;
    transition: background-color .15s ease;
  }
  .ranking-list .ranking-card:last-child{ border-bottom:none; }
  .ranking-card.picked{
    background:#eef4ff;
  }
  .ranking-card.pinned{
    background:#fff8ea;
  }
  .ranking-pick-badge{
    position:absolute; top:6px; right:6px; width:20px; height:20px;
    border-radius:50%; background:#1468ff; color:#fff;
    display:flex; align-items:center; justify-content:center;
    font-family:var(--font-mono); font-size:11px; font-weight:800;
    box-shadow:0 2px 6px rgba(20,104,255,.4); z-index:1;
    cursor:pointer;
  }
  .ranking-pick-badge.pinned{
    background:#f4b740; box-shadow:0 2px 6px rgba(244,183,64,.5);
  }
  .ranking-fav-btn{
    flex:0 0 auto; width:28px; height:28px;
    display:flex; align-items:center; justify-content:center;
    padding:0; border:none; background:transparent;
    color:#c8ccd4; cursor:pointer;
  }
  .ranking-fav-btn svg{ width:18px; height:18px; fill:none; stroke:currentColor; stroke-width:1.8; }
  .ranking-fav-btn.active{ color:#ff4b5c; }
  .ranking-fav-btn.active svg{ fill:currentColor; stroke:none; }

  .ranking-card:hover{
    background:#f8fafc;
  }

  .ranking-rank{
    flex:0 0 auto;
    width:32px;
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    font-family:var(--font-mono);
    font-weight:800;
    font-size:16px;
    color:#98a2b3;
  }
  .ranking-rank-num{ line-height:1; }

  .ranking-rank.top1{ color:#f4b740; }
  .ranking-rank.top2{ color:#a9b4c4; }
  .ranking-rank.top3{ color:#c98a4b; }

  /* R4: daily Investment rank/score movement -- color is never the only signal (distinct
     glyphs: ▲/▼/―/NEW/↻/—), matching the ranking-card-score movement line's own convention. */
  .ranking-rank-move{
    margin-top:2px; font-family:var(--font-mono); font-size:11px; font-weight:700; line-height:1;
    white-space:nowrap;
  }
  /* Scoped to the Ranking tab's own rank column (.ranking-rank), not the bare .ranking-rank-move
     class -- Today's mover cards (.today-mover-rank .ranking-rank-move) reuse the same class and
     get their own separate 12px override below, independent of this one. */
  .ranking-rank .ranking-rank-move{ font-size:12px; }
  .ranking-rank-move.up{ color:#12b76a; }
  .ranking-rank-move.down{ color:#f04438; }
  .ranking-rank-move.flat{ color:#98a2b3; }
  .ranking-rank-move.new{ color:#1468ff; }
  .ranking-rank-move.na{ color:#c8ccd4; }
  .ranking-rank-move.reset{ color:#c98a4b; }

  .ranking-score-move{
    margin-top:3px; font-family:var(--font-mono); font-size:11px; font-weight:700; white-space:nowrap;
  }
  .ranking-score-move.up{ color:#12b76a; }
  .ranking-score-move.down{ color:#f04438; }
  .ranking-score-move.flat{ color:#98a2b3; }
  .ranking-score-move.new{ color:#1468ff; }

  /* 투자 랭킹은 일일 변동을 남기되 카드마다 모멘텀 원자료/기준일을 반복하지 않는다. */
  .ranking-card.investment-ranking-card{ padding-top:11px; padding-bottom:11px; }
  .ranking-card.investment-ranking-card .ranking-bar-track{ margin-top:5px; }
  .ranking-card.investment-ranking-card .ranking-score-move{ margin-top:2px; }

  /* ---------- 오늘 탭 ---------- */
  .today-head{ padding-top:6px; margin-bottom:14px; }
  .today-title{ font-family:var(--font-body); font-size:26px; font-weight:800; letter-spacing:-.03em; color:#101828; }
  .favorites-head{ padding-top:6px; margin-bottom:14px; }
  .favorites-title{ font-family:var(--font-body); font-size:26px; font-weight:800; letter-spacing:-.03em; color:#101828; }
  .favorites-device-note{ margin-top:6px; color:#98a2b3; font-size:12px; }
  .today-subtitle{ margin-top:7px; color:#667085; font-size:13.5px; line-height:1.5; }
  .today-asof{ margin-top:6px; color:#98a2b3; font-family:var(--font-mono); font-size:10.5px; }
  .today-segments{
    position:relative;
    display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:4px;
    padding:4px; border-radius:999px; background:#eef2f7; margin:0 0 18px;
  }
  .today-segment{
    position:relative; z-index:1;
    min-height:40px; border:0; border-radius:999px; background:transparent; color:#667085;
    font:700 12px/1.2 var(--font-body); cursor:pointer;
  }
  .today-segment.active{ background:transparent; color:#1468ff; }
  .today-segments .chip-pill{
    position:absolute; top:4px; left:0; height:calc(100% - 8px);
    background:#fff; border-radius:999px; box-shadow:0 2px 8px rgba(16,24,40,.07);
    z-index:0; opacity:0; pointer-events:none;
    transition: transform .28s cubic-bezier(.2,.8,.2,1), width .28s cubic-bezier(.2,.8,.2,1), opacity .15s ease;
  }
  .today-panel{ display:none; }
  .today-panel.active{ display:block; }
  .today-section{ margin-bottom:24px; }
  .today-section-head{ display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
  .today-section-title{ color:#101828; font-size:15px; font-weight:800; }
  .today-more{ border:0; background:transparent; color:#1468ff; font-size:11px; font-weight:700; cursor:pointer; padding:8px 0; }
  .today-card-list{ display:flex; flex-direction:column; gap:8px; }
  .today-mover-card{
    display:grid; grid-template-columns:34px 38px minmax(0,1fr) auto; align-items:center; gap:10px;
    min-height:70px; padding:11px 12px; border:none; border-radius:15px; background:transparent;
    box-shadow:none; cursor:pointer;
  }
  /* Kept deliberately smaller than .ranking-rank's 16px (Today's rank is secondary to the
     company name/score/movement here, unlike the Ranking tab where it's the primary list key). */
  .today-mover-rank{ text-align:center; font-family:var(--font-mono); font-size:14px; color:#667085; font-weight:800; }
  .today-mover-rank .ranking-rank-move{ margin-top:4px; font-size:12px; }
  .today-mover-info{ min-width:0; }
  .today-mover-name{ color:#101828; font-size:13.5px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .today-mover-meta{ margin-top:2px; color:#98a2b3; font-family:var(--font-mono); font-size:10px; }
  .today-mover-score{ text-align:right; }
  .today-mover-score strong{ display:block; color:#1468ff; font-family:var(--font-display); font-size:19px; line-height:1; }
  .today-mover-score .ranking-score-move{ margin-top:4px; }

  /* ---------- 오늘의 변동 (구 요약) 개편: 인트로 + 순위/점수/즐겨찾기 3-칩 ---------- */
  .today-movers-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .today-movers-hero-title{ color:#101828; font-size:16px; font-weight:800; }
  .today-movers-hero-desc{ margin-top:4px; color:#667085; font-size:12.5px; line-height:1.5; }
  .today-info-icon{
    flex:0 0 auto; width:22px; height:22px; padding:0; border-radius:50%; border:1.4px solid #98a2b3;
    background:transparent; color:#98a2b3; font-family:var(--font-mono); font-weight:800; font-size:12px;
    line-height:1; display:inline-flex; align-items:center; justify-content:center; cursor:pointer;
  }
  .today-info-icon:hover{ color:#1468ff; border-color:#1468ff; }
  .today-movers-footnote{ margin-top:16px; color:#98a2b3; font-size:11px; line-height:1.5; text-align:center; }
  /* Secondary filter row -- deliberately NOT .today-segments/.chip-pill: that pale-track/sliding-
     pill look belongs to the parent Today subview nav one level up, and reusing it here made this
     internal Rank/Score/Favorites filter read as an equal-weight sibling tab bar instead of a
     smaller, subordinate control. Compact content-width chips, left-aligned, no pill. */
  .today-movers-filter{ margin:14px 0 18px; }
  .today-movers-filter-label{ margin-bottom:6px; color:#98a2b3; font-size:11px; font-weight:700; }
  .today-movers-filter-chips{ display:flex; flex-wrap:wrap; gap:6px; }
  .today-movers-chip{
    display:inline-flex; align-items:center; justify-content:center;
    height:32px; padding:0 12px; border:1px solid transparent; border-radius:999px; background:transparent;
    color:#98a2b3; font:700 12px/1.4 var(--font-body); cursor:pointer;
  }
  .today-movers-chip:hover{ color:#475467; }
  .today-movers-chip.active{
    background:rgba(15,157,105,.12); border-color:rgba(15,157,105,.35); color:#0f9d69;
  }
  .today-score-move{ margin-top:4px; font-size:12px; font-weight:700; }
  .today-score-move.up{ color:#0f9d69; }
  .today-score-move.down{ color:#e0384c; }
  .today-score-move.flat{ color:#98a2b3; }
  .today-fav-list{ display:flex; flex-direction:column; gap:8px; }
  .today-mover-card.today-fav-row{ grid-template-columns:38px minmax(0,1fr) auto; }
  .today-fav-move{ margin-top:4px; font-size:11px; font-weight:700; text-align:right; }
  .today-fav-move-part.up{ color:#0f9d69; }
  .today-fav-move-part.down{ color:#e0384c; }
  .today-fav-move-sep{ color:#98a2b3; }
  .today-fav-move-note{ color:#98a2b3; }
  .today-fav-move-note.new{ color:#1468ff; }
  .today-fav-move-note.reset{ color:#98a2b3; }
  .today-fav-empty{ padding:34px 16px; text-align:center; border:1px solid #eef1f5; background:#f8fafc; border-radius:14px; }
  .today-fav-empty-title{ color:#101828; font-size:14px; font-weight:800; }
  .today-fav-empty-desc{ margin-top:6px; color:#667085; font-size:12.5px; line-height:1.5; }
  .today-fav-empty-cta{ margin-top:14px; display:inline-block; }
  .today-direction-toggle{ display:flex; gap:6px; margin-bottom:6px; }
  .today-direction-btn{
    min-width:74px; height:36px; border:1px solid #e4e7ec; border-radius:999px; background:#fff;
    display:flex; align-items:center; justify-content:center;
    color:#667085; font-weight:700; font-size:12px; cursor:pointer;
  }
  .today-direction-btn.active{ color:#fff; background:#1468ff; border-color:#1468ff; }

  /* 투데이 탭은 (랭킹 탭과 마찬가지로) 아직 한 번도 비교하지 않아 body가 home-mode(dark-var)
     상태여도 항상 밝은 톤을 유지해야 함 -- 이 모달만의 always-light 오버라이드 */
  #today-rank-overlay.picker-overlay{ background:rgba(16,24,40, calc(0.28 * var(--backdrop-fade))); backdrop-filter:blur(calc(6px * var(--backdrop-fade))); }
  #today-rank-overlay .picker-sheet{ background:#fff; border:1px solid #e4e7ec; box-shadow:0 24px 70px rgba(16,24,40,.18); }
  #today-rank-overlay .picker-header{ border-color:#eaecf0; }
  #today-rank-overlay .picker-title{ color:#101828; }
  #today-rank-overlay .picker-close{ background:#f8fafc; border-color:#eaecf0; color:#667085; }
  #today-rank-overlay .algo-sheet-body{ color:#667085; }
  .today-compare-list{ display:flex; flex-direction:column; gap:10px; }
  .today-compare-card{ border:1px solid #eef1f5; background:#f8fafc; border-radius:16px; padding:14px; }
  .today-compare-reason{ color:#667085; font-size:11.5px; margin-bottom:10px; line-height:1.45; }
  .today-pair{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; }
  .today-pair-company{ min-width:0; text-align:center; }
  .today-pair-company .logo-frame{ width:36px; height:36px; margin:0 auto 5px; }
  .today-pair-name{ color:#101828; font-size:12px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .today-pair-move{ margin-top:2px; font-family:var(--font-mono); font-size:10px; font-weight:700; }
  .today-pair-vs{ color:#98a2b3; font-family:var(--font-mono); font-size:10px; font-weight:800; }
  .today-compare-action{
    width:100%; height:38px; margin-top:12px; border:0; border-radius:999px; background:#1468ff;
    color:#fff; font-size:12px; font-weight:750; cursor:pointer;
  }

  /* ---------- 오늘의 비교 개편: Intro / 대표 비교 / 추천 조합 / 최근 비교 ---------- */
  .today-compare-intro{ margin-bottom:18px; }
  .today-compare-intro-title{ color:#101828; font-size:16px; font-weight:800; line-height:1.35; }
  .today-compare-intro-sub{ margin-top:4px; color:#667085; font-size:12.5px; line-height:1.5; }

  .today-feature-hero{ padding:20px 16px; }
  .today-hero.today-feature-hero{ margin-bottom:32px; }
  .today-feature-row{ display:grid; grid-template-columns:minmax(0,1fr) auto minmax(0,1fr); align-items:center; gap:8px; }
  .today-feature-company{ min-width:0; text-align:center; }
  .today-feature-company .today-feature-logo{ width:44px; height:44px; margin:0 auto 8px; border-radius:12px; }
  .today-feature-name{ color:#101828; font-size:13px; font-weight:750; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .today-feature-ticker{ margin-top:1px; color:#98a2b3; font-family:var(--font-mono); font-size:10.5px; }
  .today-feature-score{ margin-top:8px; color:#1468ff; font-family:var(--font-mono); font-size:22px; font-weight:800; line-height:1; }
  .today-feature-score-label{ margin-top:2px; color:#98a2b3; font-size:9.5px; font-weight:700; }
  .today-feature-vs{ color:#98a2b3; font-family:var(--font-mono); font-size:11px; font-weight:800; }
  .today-feature-insight{
    margin-top:16px; padding-top:14px; border-top:1px solid #e4e7ec; text-align:center;
    color:#101828; font-size:12.5px; font-weight:700; line-height:1.5;
  }
  .today-feature-action{ margin-top:14px; }

  .today-pair-ticker{ color:#101828; font-family:var(--font-mono); font-size:11.5px; font-weight:750; }
  .today-pair-score{ margin-top:2px; color:#1468ff; font-family:var(--font-mono); font-size:14px; font-weight:800; }
  .today-compare-row{ padding:12px 14px; cursor:pointer; text-align:left; width:100%; }
  .today-compare-row-reason{ margin:8px 0 0; text-align:center; }
  .today-compare-list-extra[hidden]{ display:none; }
  .today-recommend-toggle{ margin-top:2px; }

  .today-recent-list{ display:flex; flex-direction:column; }
  .today-recent-row{
    width:100%; display:flex; align-items:baseline; justify-content:space-between; gap:8px;
    padding:9px 0; border:0; border-top:1px solid #f2f4f7; background:transparent; cursor:pointer; text-align:left; color:inherit; font:inherit;
  }
  .today-recent-list > :first-child{ border-top:0; }
  .today-recent-pair{ min-width:0; color:#101828; font-family:var(--font-mono); font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .today-recent-vs{ color:#98a2b3; font-weight:600; }
  .today-recent-time{ flex:0 0 auto; color:#98a2b3; font-size:10.5px; }
  .today-recent-empty{ display:flex; align-items:center; justify-content:space-between; gap:10px; padding:12px 14px; border:1px solid #eef1f5; background:#f8fafc; border-radius:14px; color:#667085; font-size:12px; }
  .today-recent-empty-cta{ flex:0 0 auto; border:0; background:transparent; color:#1468ff; font-size:12px; font-weight:750; cursor:pointer; padding:0; }

  .today-direct-compare-cta{
    width:100%; height:46px; margin-top:4px; border:1.5px dashed #c3cad6; border-radius:14px; background:transparent;
    color:#1468ff; font-size:13px; font-weight:750; cursor:pointer;
  }
  .today-direct-compare-cta:active{ background:#f5f8ff; }

  @media(max-width:400px){
    .today-feature-score{ font-size:19px; }
    .today-feature-company .today-feature-logo{ width:38px; height:38px; }
  }
  .today-empty{ padding:34px 12px; text-align:center; color:#98a2b3; font-size:12.5px; line-height:1.55; }
  .today-market-asof{ margin:0 0 4px; color:#98a2b3; font-size:10.5px; }
  .today-market-hint{ margin:0 0 10px; color:#667085; font-size:11.5px; font-weight:600; }
  .today-market-row{ display:grid; grid-template-columns:repeat(3, 1fr); gap:8px; }
  .today-market-tile{
    width:100%; min-width:0; padding:7px 12px; border:1px solid #eef1f5; background:#f8fafc;
    border-radius:14px; color:inherit; font:inherit; text-align:left; cursor:pointer;
    transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
  }
  .today-market-tile:hover{ border-color:#b2ccff; background:#f5f8ff; }
  .today-market-tile:focus-visible{ outline:2px solid #84adff; outline-offset:2px; }
  .today-market-tile:active{ transform:scale(.96); background:#eef4ff; border-color:#b2ccff; }
  .today-market-label{ color:#667085; font-size:10.5px; font-weight:700; white-space:nowrap; }
  .today-market-value{ margin-top:2px; color:#101828; font-family:var(--font-mono); font-size:13.5px; font-weight:750; white-space:nowrap; }
  .today-market-change{ margin-top:2px; font-family:var(--font-mono); font-size:13px; font-weight:800; }
  .today-market-change.up{ color:#0f9d69; }
  .today-market-change.down{ color:#e0384c; }
  .today-market-change.flat{ color:#98a2b3; }
  .today-market-detail-current{ display:flex; flex-direction:column; align-items:center; gap:6px; padding:20px 14px; border:1px solid #e4e7ec; background:#f8fafc; border-radius:14px; text-align:center; }
  .today-market-detail-value-row{ display:flex; align-items:baseline; justify-content:center; flex-wrap:wrap; gap:8px 10px; max-width:100%; }
  .today-market-detail-current strong{ color:#101828; font-family:var(--font-mono); font-size:26px; font-weight:800; white-space:nowrap; }
  .today-market-change-badge{ display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-family:var(--font-mono); font-size:12.5px; font-weight:800; white-space:nowrap; }
  .today-market-change-badge.up{ color:#0f9d69; background:rgba(15,157,105,.12); }
  .today-market-change-badge.down{ color:#e0384c; background:rgba(224,56,76,.12); }
  .today-market-change-badge.flat{ color:#98a2b3; background:rgba(152,162,179,.14); }
  .today-market-detail-asof{ margin-top:2px; color:#98a2b3; font-size:11px; }
  .today-market-detail-section{ margin-top:18px; }
  .today-market-detail-section h3{ margin:0 0 6px; color:#1468ff; font-size:12px; font-weight:800; }
  .today-market-detail-section p{ margin:0; color:#475467; font-size:13px; line-height:1.65; }
  .today-market-detail-note{ margin-top:18px; padding:10px 12px; border:1px solid #e4e7ec; background:#f8fafc; border-radius:12px; color:#667085; font-size:12px; line-height:1.55; }
  .today-market-summary{ margin-top:12px; padding:14px 16px; border:1px solid #eef1f5; background:#f8fafc; border-radius:16px; }
  .today-market-summary-title{ color:#1468ff; font-size:12px; font-weight:800; }
  .today-market-summary-body{ margin-top:8px; color:#344054; font-size:13px; line-height:1.6; white-space:pre-line; }
  .today-market-sources{ margin-top:10px; color:#98a2b3; font-size:10.5px; line-height:1.5; }
  .today-market-summary-ticker{
    color:#1468ff; font-weight:750; cursor:pointer; text-decoration:underline; text-decoration-style:dotted; text-underline-offset:2px;
  }
  @media(max-width:760px){
    .today-title{ font-size:22px; }
    .favorites-title{ font-size:22px; }
    .today-mover-card{ grid-template-columns:30px 34px minmax(0,1fr) auto; gap:8px; padding:10px; }
    .today-market-tile{ padding:6px 10px; }
    .today-market-value{ font-size:13px; }
  }

  /* ---------- 오늘의 증시: Hero + 섹션형 레이아웃 ---------- */
  .today-hero{
    padding:14px 16px; border:1px solid #e4e7ec; background:#f8fafc; border-radius:18px; margin-bottom:14px;
  }
  .today-hero-top{ display:flex; align-items:center; justify-content:space-between; gap:10px; }
  .today-hero-meta{ color:#667085; font-size:11.5px; font-weight:600; }
  .today-hero-badge{
    flex:0 0 auto; padding:3px 9px; border-radius:999px; font-family:var(--font-mono); font-size:10.5px; font-weight:800; letter-spacing:0.02em;
  }
  .today-hero-badge.down{ color:#e0384c; background:rgba(224,56,76,.1); }
  .today-hero-badge.up{ color:#0f9d69; background:rgba(15,157,105,.1); }
  .today-hero-badge.flat{ color:#667085; background:rgba(102,112,133,.1); }
  .today-hero-badge.relief{ color:#b7791f; background:rgba(217,138,17,.12); }
  .today-hero-headline{
    margin-top:8px; color:#101828; font-size:18px; font-weight:800; line-height:1.32; white-space:pre-line; letter-spacing:-0.01em;
  }
  .today-hero-summary{
    margin-top:6px; color:#475467; font-size:12.5px; line-height:1.55; white-space:pre-line;
  }

  .today-index-row{ display:grid; grid-template-columns:repeat(4, 1fr); gap:8px; }
  .today-index-row-extra{ margin-top:8px; grid-template-columns:repeat(3, 1fr); }
  .today-index-row-extra[hidden]{ display:none; }
  @media(max-width:400px){
    .today-index-row{ grid-template-columns:repeat(2, 1fr); }
  }
  .today-index-toggle{ margin-top:2px; }

  .today-driver-list{ display:flex; flex-direction:column; }
  .today-driver-row-wrap{ border-top:1px solid #eef1f5; }
  .today-driver-row-wrap:last-child{ border-bottom:1px solid #eef1f5; }
  .today-driver-row{
    width:100%; display:flex; align-items:center; gap:12px; padding:13px 2px; border:0; background:transparent; cursor:pointer; text-align:left; color:inherit; font:inherit;
  }
  .today-driver-index{ flex:0 0 auto; color:#98a2b3; font-family:var(--font-mono); font-size:12px; font-weight:700; }
  .today-driver-main{ flex:1 1 auto; min-width:0; display:flex; flex-direction:column; gap:2px; }
  .today-driver-title{ color:#101828; font-size:13.5px; font-weight:750; }
  .today-driver-stat{ color:#475467; font-family:var(--font-mono); font-size:12px; font-weight:600; }
  .today-driver-chevron{
    flex:0 0 auto; color:#98a2b3; font-size:16px; transition:transform var(--dur-fast);
  }
  .today-driver-row[aria-expanded="true"] .today-driver-chevron{ transform:rotate(90deg); }
  .today-driver-detail{ padding:0 2px 14px 32px; color:#475467; font-size:12.5px; line-height:1.6; }

  .today-movers-columns{ display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; }
  .today-movers-col-title{ font-size:12px; font-weight:800; margin-bottom:8px; }
  .today-movers-col-title-gainers{ color:#0f9d69; }
  .today-movers-col-title-losers{ color:#e0384c; }
  .today-movers-rows{ display:flex; flex-direction:column; }
  .today-movers-rows-extra[hidden]{ display:none; }
  .today-mini-mover{
    width:100%; display:flex; flex-direction:column; gap:2px; padding:8px 0; border:0; border-top:1px solid #f2f4f7; background:transparent; cursor:pointer; text-align:left; color:inherit; font:inherit;
  }
  .today-mini-mover-row{ display:flex; align-items:baseline; gap:5px; }
  .today-mini-mover-static{ cursor:default; }
  .today-movers-rows > :first-child{ border-top:0; }
  .today-mini-mover-name{ min-width:0; flex:1 1 auto; color:#101828; font-size:12.5px; font-weight:700; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .today-mini-mover-ticker{ flex:0 0 auto; color:#98a2b3; font-family:var(--font-mono); font-size:10px; }
  .today-mini-mover-change{ flex:0 0 auto; font-family:var(--font-mono); font-size:12px; font-weight:800; }
  .today-mini-mover-reason{ color:#667085; font-size:11px; line-height:1.5; white-space:normal; }
  .today-mini-mover-change.up{ color:#0f9d69; }
  .today-mini-mover-change.down{ color:#e0384c; }
  .today-mini-mover-change.flat{ color:#98a2b3; }
  .today-movers-toggle{ margin-top:4px; padding:6px 0; }

  .today-next-event{
    padding:16px; border:1px solid #dbe4ff; background:#f5f8ff; border-radius:16px; margin-bottom:20px;
  }
  .today-next-event-label{ color:#1468ff; font-size:11px; font-weight:800; letter-spacing:0.03em; }
  .today-next-event-title{ margin-top:6px; color:#101828; font-size:15px; font-weight:800; }
  .today-next-event-date{ margin-top:2px; color:#667085; font-family:var(--font-mono); font-size:11.5px; }
  .today-next-event-detail{ margin-top:8px; color:#475467; font-size:12.5px; line-height:1.6; }

  .today-sources-footer{ margin-top:4px; padding-top:12px; border-top:1px solid #eef1f5; }
  .today-sources-summary{
    display:block; width:100%; border:0; background:transparent; padding:0; text-align:left; cursor:pointer; color:#98a2b3; font-size:10.5px; line-height:1.5; font:inherit;
  }
  .today-sources-list{ margin:8px 0 0; padding-left:16px; color:#667085; font-size:11.5px; line-height:1.7; }
  .today-sources-list a{ color:#1468ff; text-decoration:none; }
  .today-sources-list a:hover{ text-decoration:underline; }
  .today-sources-domain{ color:#98a2b3; }
  .today-sources-asof{ margin-top:6px; color:#98a2b3; font-size:10.5px; }

  .ranking-card-logo{
    flex:0 0 auto;
    width:40px; height:40px;
    border-radius:11px;
  }

  .ranking-card-info{
    flex:1 1 auto;
    min-width:0;
  }

  .ranking-card-name{
    font-size:14.5px;
    font-weight:700;
    color:#101828;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .ranking-card-ticker{
    font-family:var(--font-mono);
    font-size:11px;
    color:#98a2b3;
    margin-top:2px;
    white-space:nowrap;
    overflow:hidden;
    text-overflow:ellipsis;
  }

  .ranking-card-score{
    flex:0 0 auto;
    min-width:50px;
    text-align:right;
  }

  .ranking-card-ovr{
    font-family:var(--font-display);
    font-weight:700;
    font-size:22px;
    color:#1468ff;
    line-height:1;
    white-space:nowrap;
  }
  .ranking-card-ovr.pending{ color:#98a2b3; }

  .ranking-card-ovr-label{
    font-family:var(--font-mono);
    font-size:9px;
    letter-spacing:0.1em;
    color:#98a2b3;
    margin-top:3px;
    text-transform:uppercase;
    white-space:nowrap;
  }

  .ranking-bar-track{
    margin-top:7px;
    height:5px;
    border-radius:999px;
    background:#eef1f5;
    overflow:hidden;
  }

  .ranking-bar-fill{
    height:100%;
    border-radius:999px;
    background:#1468ff;
    transition:width .5s cubic-bezier(0.34, 1.56, 0.64, 1);
  }


  .ranking-empty{
    font-family:var(--font-mono);
    font-size:12px;
    color:#98a2b3;
    padding:30px 4px;
    text-align:center;
  }

  /* ---------- 즐겨찾기(준비 중) 화면 ---------- */
  .tab-empty-state{
    display:flex;
    flex-direction:column;
    align-items:center;
    text-align:center;
    padding:70px 20px 40px;
  }

  .tab-empty-icon{
    width:56px; height:56px;
    border-radius:50%;
    background:#eff4ff;
    color:#1468ff;
    display:flex;
    align-items:center;
    justify-content:center;
    margin-bottom:18px;
  }

  .tab-empty-icon svg{ width:26px; height:26px; }

  .tab-empty-title{
    font-family:var(--font-body);
    font-weight:800;
    font-size:17px;
    color:#101828;
    margin-bottom:8px;
  }

  .tab-empty-desc{
    font-size:13.5px;
    line-height:1.6;
    color:#667085;
    max-width:320px;
  }

  @media (max-width:760px){
    .ranking-title{ font-size:22px; }
    .ranking-card{ padding:12px 2px; gap:11px; }
    .ranking-card-logo{ width:34px; height:34px; }
    .ranking-card-ovr{ font-size:19px; }
    .tab-empty-state{ padding:56px 20px 30px; }
    .ranking-card-right{ gap:7px; }
    .ranking-card-score{ min-width:40px; }
    .ranking-add-compare-btn{ height:28px; padding:0 10px; font-size:10.5px; }
    .ranking-add-compare-btn::before{ inset:-5px; } /* still >=44px effective hit area */
  }

  @media(max-width:760px){
    #stat-modal-overlay{ align-items:flex-end !important; padding:0 !important; }
    #stat-modal-overlay .picker-sheet{
      width:calc(100% - 20px); max-width:560px; max-height:72dvh; border-radius:20px !important;
      margin:0 10px 10px;
    }
    #stat-modal-overlay .picker-sheet.sheet-anchored{
      position:relative; left:auto !important; top:auto !important; width:100% !important;
    }
  }
  @media (max-width:340px){
    .ranking-card{ gap:6px; }
    .ranking-card-right{ gap:4px; }
    .ranking-card-score{ min-width:0; }
    .ranking-card-ovr{ font-size:17px; }
    /* Reclaim width for the company-name column: the Compare pill drops its text label and
       becomes an icon-only tap target (aria-label/title still carry the full "추가"/"제거"
       wording, so this is presentation-only). Rank/Score/Favorite stay exactly as they render
       at wider widths -- only Compare shrinks, and only at this narrowest tier. */
    .ranking-add-compare-btn{ padding:0 9px; gap:0; }
    .ranking-add-compare-btn-label{ display:none; }
  }

  /* ---------- 필터 칩 가로 스크롤 힌트(엣지 페이드) ---------- */
  .filter-chips{ padding-right:18px; scroll-padding-inline:18px; }
  .filter-chips.fade-right{
    -webkit-mask-image:linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    mask-image:linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  .filter-chips.fade-left{
    -webkit-mask-image:linear-gradient(to left, black calc(100% - 32px), transparent 100%);
    mask-image:linear-gradient(to left, black calc(100% - 32px), transparent 100%);
  }
  .filter-chips.fade-left.fade-right{
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
  }

  /* ---------- 랭킹 카드: rank/logo | info | score | compare 4개 영역을 서로 겹치지 않게 분리 ---------- */
  /* score와 compare 버튼을 한 그룹으로 묶어, 절대좌표가 아닌 일반 flex 흐름 안에서 각자의 폭을 확보함
     -- compare 버튼이 더 이상 score 위에 겹쳐지지 않고, 숫자도 잘리지 않음. */
  .ranking-card-right{
    flex:0 0 auto;
    display:flex;
    align-items:center;
    gap:10px;
  }
  .ranking-add-compare-btn{
    position:relative; flex:none; height:32px; min-width:auto;
    display:flex; align-items:center; gap:5px; justify-content:center;
    border-radius:999px; border:1px solid #e4e7ec; background:#fff; color:#667085;
    padding:0 13px; cursor:pointer; white-space:nowrap;
    font-family:var(--font-mono); font-size:11.5px; font-weight:700; letter-spacing:0.01em;
    transition: background-color var(--dur-chip) var(--ease-standard), border-color var(--dur-chip) var(--ease-standard), color var(--dur-chip) var(--ease-standard), transform var(--dur-fast) var(--ease-standard);
  }
  /* Press feedback lives on the button only -- never the card (spec item 4: no whole-row scale) */
  .ranking-add-compare-btn:active{ transform:scale(0.98); }
  /* 시각적 크기는 유지하되, 터치 히트 영역이 최소 44x44px가 되도록 살짝 확장 */
  .ranking-add-compare-btn::before{ content:""; position:absolute; inset:-4px; }
  .ranking-add-compare-btn:hover{ border-color:#c7d7fe; color:#1468ff; }
  .ranking-add-compare-btn.picked{ background:#1468ff; border-color:#1468ff; color:#fff; }
  .ranking-add-compare-btn-icon{ display:flex; width:13px; height:13px; flex:none; }
  .ranking-add-compare-btn-icon svg{ width:100%; height:100%; }
  @media(prefers-reduced-motion:reduce){ .ranking-add-compare-btn:active{ transform:none; } }
  /* Very subtle highlight on the row holding a selected compare ticker -- background/border only,
     no scale, no re-render (spec item 4). */
  .ranking-card.compare-row-selected{ background:rgba(20,104,255,.05); border-radius:12px; transition:background-color var(--dur-chip) var(--ease-standard); }

  /* 스크롤 중에도 선택된 종목이 계속 보이는 하단 고정 비교 트레이 -- 탭바 바로 위에 뜬다 */
  .ranking-tray{
    display:flex; position:fixed; left:0; right:0; bottom:64px; z-index:850;
    align-items:center; gap:10px;
    background:#fff; border-top:1px solid #e4e7ec; box-shadow:0 -8px 24px rgba(16,24,40,.1);
    padding:10px 16px; padding-bottom:calc(10px + env(safe-area-inset-bottom, 0px));
    /* Rises 8px + fades in rather than a hard display:none/flex swap (spec item 4). */
    opacity:0; transform:translateY(8px); pointer-events:none; visibility:hidden;
    transition: opacity var(--dur-base) var(--ease-standard), transform var(--dur-base) var(--ease-standard), visibility 0s linear var(--dur-base);
  }
  .ranking-tray.visible{ opacity:1; transform:translateY(0); pointer-events:auto; visibility:visible; transition-delay:0s; }
  .ranking-tray-chips{ flex:1 1 auto; display:flex; gap:8px; overflow-x:auto; scrollbar-width:none; min-width:0; }
  .ranking-tray-chips::-webkit-scrollbar{ display:none; }
  .ranking-tray-chip{
    flex:0 0 auto; display:flex; align-items:center; gap:6px;
    background:#f8fafc; border:1px solid #e4e7ec; border-radius:999px; padding:5px 6px 5px 8px;
    font-family:var(--font-mono); font-size:12px; font-weight:700; color:#101828;
  }
  .ranking-tray-chip .logo-frame{ width:18px; height:18px; }
  .ranking-tray-remove{
    display:flex; align-items:center; justify-content:center; width:16px; height:16px;
    border:none; border-radius:50%; background:#e4e7ec; color:#667085; font-size:9px; cursor:pointer; padding:0;
  }
  .ranking-tray-hint{ flex:0 0 auto; color:#667085; font-size:12px; font-weight:600; }

  /* ---------- 기업 상세 (데스크톱: 우측 드로어 / 모바일: 하단 시트) ---------- */
  .detail-overlay{
    --backdrop-fade:1;
    position:fixed; inset:0; background:rgba(16,24,40, calc(0.45 * var(--backdrop-fade)));
    display:none; align-items:flex-end; justify-content:center; z-index:1100;
  }
  .detail-overlay.open{ display:flex; }
  .detail-overlay.closing{ display:flex; }
  .detail-sheet{
    position:relative;
    width:100%; max-width:480px; max-height:85dvh;
    background:#fff; color:#101828;
    border:1px solid #e4e7ec; border-bottom:none;
    border-radius:20px 20px 0 0;
    display:flex; flex-direction:column; overflow:hidden;
    box-shadow:0 -20px 50px -10px rgba(16,24,40,0.35);
  }
  /* One-shot entrance -- a class, not a permanent rule on .detail-sheet itself. A canceled drag
     (see enableSheetDragToClose's onUp/onDown) suppresses this animation with an inline
     `animation:none` while dragging and clears that override afterwards; if the entrance were a
     permanent rule instead of gated by this class, clearing the inline override would make the
     keyframe fire again from its `from` state (translateY(100%)) even though the sheet never
     actually closed -- a visible jump-then-slide-back glitch on every canceled drag. */
  .detail-sheet.entering{ animation:detailSheetIn var(--dur-sheet) var(--ease-standard) both; }
  .detail-overlay.closing .detail-sheet{ animation:detailSheetOut var(--dur-base) ease-in both; }
  @keyframes detailSheetIn{ from{ transform:translateY(100%); } to{ transform:translateY(0); } }
  @keyframes detailSheetOut{ from{ transform:translateY(0); } to{ transform:translateY(100%); } }
  .detail-drag-handle{ position:relative; width:36px; height:4px; border-radius:2px; background:#e4e7ec; margin:10px auto 0; flex:none; touch-action:none; transition:background-color 120ms ease, transform 120ms ease; }
  .detail-drag-handle::before{ content:""; position:absolute; inset:-16px -30px; }
  .detail-drag-handle.armed{ background:#1468ff; transform:scaleX(1.15); }
  .detail-close{
    position:absolute; top:12px; right:14px; width:28px; height:28px; border-radius:50%;
    border:1px solid #e4e7ec; background:#f8fafc; color:#667085;
    font-size:13px; line-height:1; cursor:pointer; display:flex; align-items:center; justify-content:center; z-index:2;
    padding-bottom:2px; /* "✕" glyph's ink sits ~1px below the flex-centered line box for this font, so nudge up to visually center it in the circle */
  }
  .detail-close:hover{ border-color:#c7d7fe; color:#1468ff; }
  .detail-close::before{ content:""; position:absolute; inset:-8px; }
  .detail-scroll{ overflow-y:auto; -webkit-overflow-scrolling:touch; padding:10px 20px 26px; overscroll-behavior:contain; }

  /* 상세 스크롤시 축소되는 고정 헤더 -- 스크롤 위치에 비례해 JS가 opacity/transform을 직접
     매 프레임 갱신하므로(연속적인 전환), 여기선 transition을 걸지 않는다. 콘텐츠 흐름 밖의
     절대 위치라서 나타나도 스크롤 높이/위치가 튀지 않는다. */
  .detail-compact-header{
    position:absolute; top:0; left:0; right:0; z-index:3;
    display:flex; align-items:center; gap:10px;
    height:52px; padding:0 50px 0 16px;
    background:#fff; border-bottom:1px solid #e4e7ec;
    opacity:0; transform:translateY(-6px);
    pointer-events:none;
    will-change:opacity, transform;
  }
  .detail-compact-header.interactive{ pointer-events:auto; }
  .detail-compact-logo{ flex:none; width:26px; height:26px; }
  .detail-compact-logo .logo-frame{ width:26px; height:26px; }
  .detail-compact-name{ font-size:13px; font-weight:800; color:#101828; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
  .detail-compact-price{ margin-left:auto; flex:none; font-family:var(--font-display); font-weight:700; font-size:13px; color:#101828; }
  .detail-compact-inv{ flex:none; font-family:var(--font-mono); font-size:11px; font-weight:700; color:#1468ff; }
  @media(prefers-reduced-motion:reduce){
    .detail-compact-header{ transition:none; }
  }

  .detail-head{ display:flex; align-items:center; gap:12px; padding-top:8px; margin-bottom:16px; }
  .detail-head .logo-frame{ width:46px; height:46px; flex:none; }
  .detail-head-info{ min-width:0; flex:1 1 auto; }
  .detail-head-fav-btn{
    flex:none; display:flex; align-items:center; justify-content:center;
    width:44px; height:44px; border:0; background:transparent;
    color:#c1c7d0; cursor:pointer; transition:color .15s var(--ease-standard), transform .1s var(--ease-standard);
  }
  .detail-head-fav-btn svg{ width:22px; height:22px; fill:none; stroke:currentColor; stroke-width:1.8; }
  .detail-head-fav-btn:hover{ color:#98a2b3; }
  .detail-head-fav-btn:active{ transform:scale(0.9); }
  .detail-head-fav-btn.active{ color:#ff4b5c; }
  .detail-head-fav-btn.active svg{ fill:currentColor; stroke:none; }
  .detail-name{ font-size:16.5px; font-weight:800; color:#101828; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
  .detail-meta{ font-family:var(--font-mono); font-size:11.5px; color:#98a2b3; margin-top:2px; }

  /* ---------- 기업 상세: 회사 정보(설명/시세/시가총액) 섹션 -- Company Detail Data Foundation ---------- */
  .detail-company-info{ margin:2px 0 16px; }
  .detail-summary-text{ font-size:12.5px; line-height:1.55; color:#475467; }
  .detail-summary-pending{ font-size:12px; color:#98a2b3; font-style:italic; }
  .detail-market-row{ display:flex; align-items:baseline; gap:10px; margin-top:10px; flex-wrap:wrap; }
  .detail-price{ font-family:var(--font-display); font-weight:700; font-size:20px; color:#101828; }
  .detail-price-change{ font-family:var(--font-mono); font-size:12.5px; font-weight:700; }
  .detail-price-change.up{ color:#0f9d69; }
  .detail-price-change.down{ color:#e0384c; }
  .detail-price-change.flat{ color:#98a2b3; }
  .detail-marketcap-row{ display:flex; align-items:center; gap:6px; margin-top:4px; font-size:12px; color:#667085; }
  .detail-marketcap-value{ font-weight:700; color:#101828; }
  .detail-marketcap-estimate-tag{ font-size:10px; color:#b26a00; background:#fff4e0; border-radius:999px; padding:1px 7px; }
  .detail-asof-line{ font-size:10.5px; color:#98a2b3; margin-top:3px; }

  .detail-scores{ display:flex; gap:10px; margin-bottom:18px; }
  .detail-score-box{ flex:1 1 0; background:#f8fafc; border:1px solid #eef1f5; border-radius:14px; padding:14px; cursor:pointer; text-align:center; }
  .detail-score-box:hover{ border-color:#c7d7fe; }
  /* Applied only to #detail-inv-score-box, only once the trend chart below actually has data
     (see renderDetailTrendBox) -- ties this card visually to .detail-trend-box.has-chart's same
     blue border so it's clear the chart is THIS card's history, not the fundamental score's. */
  .detail-score-box.detail-score-linked{ background:#eaf1ff; border:1.5px solid #1468ff; }
  .detail-score-box.detail-score-linked .detail-score-label{ color:#1468ff; }
  .detail-score-value{ font-family:var(--font-display); font-weight:700; font-size:28px; color:#1468ff; line-height:1; }
  .detail-score-value.na{ color:#98a2b3; font-size:20px; }
  .detail-score-label{ font-family:var(--font-mono); font-size:11px; letter-spacing:0.06em; color:#98a2b3; text-transform:uppercase; margin-top:6px; }
  .detail-score-rank{ font-family:var(--font-mono); font-size:11.5px; color:#667085; margin-top:5px; }

  .detail-sec-title{ font-family:var(--font-mono); font-size:10.5px; letter-spacing:0.1em; text-transform:uppercase; color:#98a2b3; margin:10px 0 8px; }
  .detail-trend-box{
    position:relative;
    display:flex; flex-direction:column; gap:2px; margin-top:14px; padding:12px 14px;
    border:1px dashed #dfe4ea; border-radius:10px; background:#fafbfc;
  }
  /* Blue-on-blue with #detail-inv-score-box (see .detail-score-box.detail-score-linked) so it
     reads as "this chart is the investment-score card's history", not a floating unrelated box. */
  .detail-trend-box.has-chart{ border-style:solid; border-width:1.5px; border-color:#1468ff; background:#fff; gap:0; }
  .detail-trend-placeholder-title{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:#98a2b3; text-transform:uppercase; }
  .detail-trend-placeholder-desc{ font-size:11.5px; color:#98a2b3; line-height:1.5; }
  .detail-trend-head{ display:flex; align-items:baseline; justify-content:space-between; gap:8px; }
  .detail-trend-title{ font-family:var(--font-mono); font-size:10.5px; font-weight:700; letter-spacing:0.06em; color:#98a2b3; text-transform:uppercase; }
  .detail-trend-range-values{ font-family:var(--font-mono); font-size:11px; font-weight:600; color:#667085; white-space:nowrap; }
  .detail-trend-delta{ font-family:var(--font-display); font-size:12.5px; font-weight:700; }
  .detail-trend-delta.up{ color:#12b76a; }
  .detail-trend-delta.down{ color:#f04438; }
  .detail-trend-delta.flat{ color:#98a2b3; }
  /* margin-top reserves room for .detail-trend-tooltip (its exact top offset is set in JS from
     measured head height, but the tooltip's own ~20px height needs this much clearance below the
     head row so it can never overlap the line/dot below it either). */
  .detail-trend-sparkline-svg{ width:100%; height:46px; margin-top:30px; overflow:visible; touch-action:pan-y; }
  .detail-trend-area{ fill:rgba(20,104,255,0.08); stroke:none; }
  .detail-trend-line{ fill:none; stroke:#1468ff; stroke-width:1.75; stroke-linejoin:round; stroke-linecap:round; }
  .detail-trend-dot{ fill:#1468ff; }
  .detail-trend-touch-target{ fill:transparent; cursor:pointer; }
  .detail-trend-guide{ stroke:#1468ff; stroke-width:1; stroke-dasharray:2,2; opacity:0; }
  .detail-trend-touch-dot{ fill:#101828; stroke:#fff; stroke-width:1.5; opacity:0; }
  .detail-trend-range{ display:flex; justify-content:space-between; margin-top:2px; font-family:var(--font-mono); font-size:9.5px; color:#98a2b3; }
  /* Reserved slot between the head row and the chart (not overlaid on the line/dot, not
     overlapping the head text or the date range below) -- so the touch readout can never collide
     with anything else in the box regardless of which point is touched. */
  .detail-trend-tooltip{
    position:absolute; left:0;
    background:#101828; color:#fff; font-family:var(--font-mono); font-size:10.5px; font-weight:700;
    padding:4px 8px; border-radius:7px; white-space:nowrap; pointer-events:none; opacity:0;
    transition:opacity .1s ease; z-index:1;
  }
  .detail-coverage-note{ font-size:11.5px; color:#98a2b3; line-height:1.5; margin-top:8px; }
  .detail-momentum-line{ font-size:12px; color:#98a2b3; margin-top:10px; }

  /* ---------- 기업 상세: 6-스탯 육각형 레이더 요약 (세로 목록 대체) ----------
     읽기 전용 시각 요약. 색상은 전역 --line-soft 등 테마 반응형 변수를 그대로 쓰지 않고 이 차트 전용
     토큰으로 분리한다 -- 상세 시트 자체가 항상 라이트 톤(#fff 배경)으로 고정되어 있는데, 공용
     --line-soft는 dark 홈 화면(body.home-mode)에서 거의 검정(#16202c)으로 바뀌므로 그대로 재사용하면
     흰 배경 위에 새까만 그리드가 그려지는 문제가 생긴다(이번 라운드에서 수정한 버그의 원인).
     비교 화면 레이더와 동일한 마크업/컴포넌트 구조(같은 클래스 네이밍 패턴, 같은 다각형 구성 방식)는
     그대로 재사용하되, 색상 토큰만 상세 시트의 고정 라이트 배경에 맞게 로컬로 정의해 둔다 -- 상세
     시트 자체가 다크 모드에 반응하게 되면 이 토큰 값만 다시 정의하면 된다. */
  .detail-radar-wrap{
    --radar-grid: #e7eaef;      /* 연한 중립 회색, 촘촘하지 않은 그리드 */
    --radar-axis: #eef1f6;      /* 그리드보다 한 단계 더 옅음 */
    --radar-blue: #1468ff;
    --radar-blue-fill: rgba(20,104,255,0.10);
    --radar-blue-soft: #dbe8ff; /* 정점 안쪽 테두리용 아주 옅은 블루 (배경색 대체) */
    display:flex; flex-direction:column; align-items:center; padding:0 0 4px;
  }
  .detail-radar-svg{ width:100%; max-width:284px; height:auto; overflow:visible; }
  @media (max-width:760px){ .detail-radar-svg{ max-width:270px; } }
  .detail-radar-svg .radar-grid-line{ stroke:var(--radar-grid); stroke-width:0.75; }
  .detail-radar-svg .radar-axis-line{ stroke:var(--radar-axis); stroke-width:0.75; }
  .detail-radar-poly{ fill:var(--radar-blue-fill); stroke:var(--radar-blue); stroke-width:2.25; stroke-linejoin:round; }
  .detail-radar-dot{ stroke:#fff; stroke-width:2; }
  .detail-radar-dot.official{ fill:var(--radar-blue); }
  .detail-radar-dot.reference{ fill:#f4b740; }
  .detail-radar-na-marker{ fill:#fff; stroke:#d6dae1; stroke-width:1.5; stroke-dasharray:2 2; }
  .detail-radar-label-name{
    font-family:var(--font-mono); font-size:12px; font-weight:700; letter-spacing:0.02em;
    fill:#8a94a6; text-anchor:middle; dominant-baseline:middle; pointer-events:none;
  }
  .detail-radar-label-score{
    font-family:var(--font-display); font-size:15px; font-weight:700;
    text-anchor:middle; dominant-baseline:middle; pointer-events:none;
  }
  .detail-radar-label-score.official{ fill:#101828; }
  .detail-radar-label-score.reference{ fill:#b26a00; }
  .detail-radar-label-score.na{ fill:#98a2b3; font-weight:600; }
  .detail-radar-info-mark{ font-size:9px; fill:#b26a00; }
  .detail-radar-momentum-line{ font-size:12px; color:#98a2b3; margin-top:6px; text-align:center; }

  /* Each axis (name + score) is its own tap target for that stat's explanation modal. */
  .detail-radar-label-group{ cursor:pointer; outline:none; }
  .detail-radar-label-hit{ fill:transparent; }
  .detail-radar-label-group:hover .detail-radar-label-name{ fill:#1468ff; }
  /* Some mobile browsers (notably iOS Safari) don't apply the keyboard-only :focus-visible
     heuristic to a non-native <g role="button">, and instead paint the plain :focus ring -- a
     thick black rectangle -- on every tap. Suppressing outline unconditionally (not just under
     :focus-visible) is what actually removes it there; :focus-visible below still gets its own
     intentional highlight for real keyboard use. */
  .detail-radar-label-group:focus{ outline:none; }
  .detail-radar-label-group:focus-visible{ outline:none; }
  .detail-radar-label-group:focus-visible .detail-radar-label-hit{ fill:rgba(20,104,255,0.08); }
  .detail-stat-summary{
    font-size:12.5px; line-height:1.55; color:#667085; text-align:center;
    max-width:300px; margin:12px auto 0; padding:0 6px;
  }

  /* ---------- 기업 상세: Key Metrics (핵심 재무지표) 요약 ----------
     Overall/Investment 점수 카드보다 시각적으로 가볍고 작게 -- 별도의 큰 대시보드가 되지 않도록 함.
     모바일 2x2, 데스크톱 드로어 폭 720px 이상에서는 4열 한 줄(컨테이너 쿼리 기준, 뷰포트 폭이 아닌
     .detail-sheet 자체의 렌더링 폭 기준) -- 그 미만에서는 가로 스크롤 없이 2x2 유지. */
  .detail-sheet{ container-type: inline-size; container-name: detail-sheet; }
  .detail-keymetrics{ margin-top:16px; }
  .detail-keymetrics-grid{ display:grid; grid-template-columns:repeat(2, 1fr); gap:8px; }
  @container detail-sheet (min-width:720px){
    .detail-keymetrics-grid{ grid-template-columns:repeat(4, 1fr); }
  }
  .detail-sec-hint{ margin:-4px 0 8px; color:#98a2b3; font-size:11px; }
  .detail-keymetric-card{
    position:relative; background:#f8fafc; border:1px solid #eef1f5; border-radius:10px; padding:8px 10px;
    min-width:0; /* allow the grid track to shrink without forcing horizontal overflow */
    cursor:pointer; transition:border-color var(--dur-fast), background var(--dur-fast), transform var(--dur-fast);
  }
  .detail-keymetric-card:hover{ border-color:#b2ccff; background:#f5f8ff; }
  .detail-keymetric-card:focus-visible{ outline:2px solid #84adff; outline-offset:2px; }
  .detail-keymetric-card:active{ transform:scale(.97); background:#eef4ff; border-color:#b2ccff; }
  .detail-keymetric-top{ display:flex; align-items:flex-start; justify-content:space-between; gap:4px; }
  .detail-keymetric-label{ font-size:10px; color:#98a2b3; font-weight:600; line-height:1.3; }
  .detail-keymetric-value{ font-family:var(--font-display); font-size:15px; font-weight:700; color:#101828; margin-top:3px; }
  .detail-keymetric-value.na{ color:#c8ccd4; font-size:14px; }
  .detail-keymetric-period{ font-size:9px; color:#b0b8c4; margin-top:1px; }
  .detail-keymetric-card .sector{ font-size:9.5px; color:#667085; margin-top:4px; padding-top:4px; border-top:1px dashed #eef1f5; }
  .detail-keymetric-card .sector b{ color:#475467; font-weight:700; }

  /* ---------- 기업 상세: 비슷한 기업 (동일 섹터, 종합점수 근접순) ---------- */
  .detail-similar-row{
    display:flex; gap:8px; overflow-x:auto; padding:2px 18px 4px 2px; margin-top:2px;
    scroll-padding-inline:18px;
    scrollbar-width:none;
  }
  .detail-similar-row::-webkit-scrollbar{ display:none; }
  .detail-similar-row.fade-right{
    -webkit-mask-image:linear-gradient(to right, black calc(100% - 32px), transparent 100%);
    mask-image:linear-gradient(to right, black calc(100% - 32px), transparent 100%);
  }
  .detail-similar-row.fade-left{
    -webkit-mask-image:linear-gradient(to left, black calc(100% - 32px), transparent 100%);
    mask-image:linear-gradient(to left, black calc(100% - 32px), transparent 100%);
  }
  .detail-similar-row.fade-left.fade-right{
    -webkit-mask-image:linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
    mask-image:linear-gradient(to right, transparent 0%, black 32px, black calc(100% - 32px), transparent 100%);
  }
  .detail-similar-card{
    flex:0 0 auto; width:72px; display:flex; flex-direction:column; align-items:center; gap:4px;
    background:#f8fafc; border:1px solid #eef1f5; border-radius:12px; padding:10px 6px; cursor:pointer;
  }
  .detail-similar-card:hover{ border-color:#c7d7fe; }
  .detail-similar-card:active{ background:#f1f4f9; }
  .detail-similar-logo.logo-frame{ width:32px; height:32px; }
  .detail-similar-ticker{ font-family:var(--font-mono); font-size:11px; font-weight:700; color:#101828; }
  .detail-similar-ovr{ font-family:var(--font-display); font-size:12.5px; font-weight:700; color:#1468ff; }
  .sr-only{
    position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden;
    clip:rect(0,0,0,0); white-space:nowrap; border:0;
  }

  #pull-refresh-indicator{
    position:fixed; top:0; left:50%; transform:translate(-50%, -100%);
    width:34px; height:34px; margin-top:10px;
    display:flex; align-items:center; justify-content:center;
    background:#fff; border-radius:50%; box-shadow:0 4px 14px rgba(16,24,40,.16);
    z-index:2000; opacity:0; pointer-events:none;
    transition: opacity .15s ease;
  }
  #pull-refresh-indicator.visible{ opacity:1; }
  .pull-refresh-spinner{
    width:15px; height:15px; border-radius:50%;
    border:2px solid #e4e7ec; border-top-color:#1468ff;
  }
  #pull-refresh-indicator.loading .pull-refresh-spinner{ animation: pullRefreshSpin .6s linear infinite; }
  @keyframes pullRefreshSpin{ to{ transform:rotate(360deg); } }

  .detail-actions{ display:flex; gap:10px; margin-top:20px; }
  .detail-action-btn{
    flex:1 1 0; display:flex; align-items:center; justify-content:center; gap:6px;
    height:44px; border-radius:12px; font-weight:700; font-size:13px; cursor:pointer;
    border:1px solid #e4e7ec; background:#fff; color:#344054;
  }
  .detail-action-btn svg{ width:16px; height:16px; }
  .detail-action-btn.primary{ background:#1468ff; border-color:#1468ff; color:#fff; }
  .detail-action-btn.fav.active{ color:#ff4b5c; border-color:#ffd6da; background:#fff5f6; }
  .detail-action-btn.fav.active svg{ fill:currentColor; stroke:none; }
  .detail-action-btn.compare.picked{ background:#eff4ff; border-color:#1468ff; color:#1468ff; }
  .detail-action-btn.compare.pinned{ background:#fff8e8; border-color:#f4b740; color:#a06a00; }
  .detail-confirm-btn{
    display:block; width:100%; margin-top:10px; height:48px; border-radius:12px;
    border:none; background:#1468ff; color:#fff; font-weight:700; font-size:14px; cursor:pointer;
    transition:transform var(--dur-fast) var(--ease-standard), background-color var(--dur-fast) var(--ease-standard);
  }
  .detail-confirm-btn:active{ transform:scale(0.98); background:#0f56d6; }
  @media(prefers-reduced-motion:reduce){ .detail-confirm-btn:active{ transform:none; } }

  @media(min-width:861px){
    .detail-overlay{ align-items:stretch; justify-content:flex-end; }
    .detail-sheet{
      max-width:400px; max-height:100dvh; height:100%;
      border-radius:0; border:none; border-left:1px solid #e4e7ec;
    }
    /* One-shot entrance (same .entering class as the mobile bottom-sheet rule above) --
       previously a permanent animation directly on .detail-sheet, which meant the mobile
       detailSheetIn (translateY) played first (triggered by openCompanyDetail() adding
       .entering) and THEN, once .entering was removed ~450ms later, this rule's own always-on
       animation kicked in and played detailDrawerIn (translateX) a second time -- opening
       looked like slide-up-then-slide-in-from-the-right. Gating it behind .entering the same
       way mobile already is means only one of the two ever plays, chosen purely by which media
       query is active. */
    .detail-sheet.entering{ animation:detailDrawerIn var(--dur-sheet) var(--ease-standard) both; }
    .detail-overlay.closing .detail-sheet{ animation:detailDrawerOut var(--dur-base) ease-in both; }
    .detail-drag-handle{ display:none; }
    .detail-scroll{ padding-top:44px; }
  }
  @keyframes detailDrawerIn{ from{ transform:translateX(100%); } to{ transform:translateX(0); } }
  @keyframes detailDrawerOut{ from{ transform:translateX(0); } to{ transform:translateX(100%); } }
  @media(prefers-reduced-motion:reduce){
    .detail-sheet{ animation-duration:1ms !important; }
  }

  /* FINAL CONSOLIDATED MOBILE UI */
  /* Must stay a flexible, internally-scrolling sheet child (same treatment as .picker-grid
     above) -- not flex:0 0 auto/overflow:visible. This is the default (no-query) picker
     content (Popular Companies + Recently Selected), so when the mobile keyboard opens and
     updatePickerViewportHeight() shrinks the sheet's max-height, this is the region that must
     shrink and scroll internally; overflow:visible left it with no scroll container at all,
     so the on-screen keyboard's focus-into-view behavior scrolled the underlying page instead. */
  .picker-suggestions{
    flex:1 1 auto;
    min-height:0;
    overflow-y:auto;
    overscroll-behavior:contain;
    -webkit-overflow-scrolling:touch;
  }
  .picker-popular-grid{ grid-template-columns:repeat(4,minmax(0,1fr)); gap:7px; }
  .picker-suggestion-item{ flex-direction:column; justify-content:center; gap:4px; padding:8px 4px; background:#fff; border-color:#e4e7ec; color:#101828; text-align:center; }
  .picker-suggestion-name{ display:none; }
  .picker-suggestion-ticker{ color:#475467; font-weight:700; }
  .picker-recent-chip{ background:#f8fafc; border-color:#e4e7ec; color:#344054; }

  /* 모든 팝업/모달 공용: 시트가 아래에서 슬라이드업으로 뜨고, 내용은 그보다 살짝 늦게
     페이드인 -- 토스 증권류 바텀시트 진입감. .picker-overlay/.picker-sheet를 쓰는 모든
     모달(알고리즘, 스탯 안내, 종목 선택, 오늘 순위)에 공통 적용된다. */
  @keyframes sheetBackdropIn{ from{opacity:0} to{opacity:1} }
  @keyframes sheetBackdropOut{ from{opacity:1} to{opacity:0} }
  @keyframes sheetSlideIn{ from{opacity:0; transform:translateY(28px);} to{opacity:1; transform:translateY(0);} }
  @keyframes sheetSlideOut{ from{opacity:1; transform:translateY(0);} to{opacity:0; transform:translateY(20px);} }
  @keyframes sheetContentIn{ from{opacity:0; transform:translateY(8px);} to{opacity:1; transform:translateY(0);} }
  .picker-overlay.open{ animation:sheetBackdropIn var(--dur-base) ease-out both; }
  .picker-overlay.open .picker-sheet{ animation:sheetSlideIn var(--dur-sheet) var(--ease-standard) both; }
  .picker-overlay.closing{ display:flex; animation:sheetBackdropOut var(--dur-base) ease-in both; pointer-events:none; }
  .picker-overlay.closing .picker-sheet{ animation:sheetSlideOut var(--dur-base) ease-in both; }
  .picker-overlay.open .stat-modal-body,
  .picker-overlay.open .algo-sheet-body,
  .picker-overlay.open .picker-grid,
  .picker-overlay.open .picker-suggestions{
    animation:sheetContentIn var(--dur-base) ease both;
    animation-delay:90ms;
  }
  .detail-overlay.open .detail-scroll{
    animation:sheetContentIn 260ms ease both;
    animation-delay:120ms;
  }
  #picker-overlay .picker-search{ background:#f8fafc !important; border-color:#dfe3ea !important; color:#101828 !important; }
  #picker-overlay .picker-search-wrap{ position:relative !important; top:0 !important; }
  #picker-overlay .picker-search-wrap svg{ position:absolute !important; left:28px !important; top:50% !important; transform:translateY(-50%) !important; color:#667085 !important; }
  #picker-overlay .picker-item{ background:#fff !important; border-color:#e4e7ec !important; color:#101828 !important; transition:background-color var(--dur-fast) var(--ease-standard), border-color var(--dur-fast) var(--ease-standard); }
  #picker-overlay .picker-item.picked{ background:#eaf1ff !important; border-color:#1468ff !important; }

  @media(max-width:760px){
    body, body.home-mode, body:not(.home-mode){ padding-top:0 !important; }
    body .wrap, body.home-mode .wrap, body:not(.home-mode) .wrap,
    body[data-active-tab="compare"] .wrap, body[data-active-tab="ranking"] .wrap, body[data-active-tab="favorites"] .wrap{
      justify-content:flex-start !important;
      padding-top:44px !important;
      padding-bottom:86px !important;
    }
    body .header, body.home-mode .header, body:not(.home-mode) .header,
    body[data-active-tab="compare"] .header, body[data-active-tab="ranking"] .header, body[data-active-tab="favorites"] .header{
      min-height:58px !important; margin:0 0 12px !important; padding:0 !important; border:0 !important;
      display:flex !important; flex-wrap:nowrap !important; align-items:center !important; justify-content:space-between !important;
    }
    body .header .eyebrow, body .header .tagline, body .header .disclaimer{ display:none !important; }
    body .wordmark, body.home-mode .wordmark, body:not(.home-mode) .wordmark{
      font-family:var(--font-body) !important; font-size:22px !important; font-weight:800 !important;
      letter-spacing:-.04em !important; line-height:1 !important; color:#101828 !important;
    }
    body .wordmark::before{ display:none !important; content:none !important; }
    body .wordmark span{ color:#1468ff !important; }
    body .header-right, body.home-mode .header-right, body:not(.home-mode) .header-right{
      min-height:40px !important; display:flex !important; flex-direction:row !important; align-items:center !important; justify-content:center !important; gap:12px !important;
    }
    body .lang-switch, body.home-mode .lang-switch, body:not(.home-mode) .lang-switch{
      margin:0 !important; flex-direction:row !important; align-items:center !important; gap:2px !important;
      padding:4px !important; border-radius:999px !important; background:#eef2f7 !important;
    }
    body .lang-switch button{ padding:5px 8px !important; border-radius:999px !important; font-size:10px !important; color:#98a2b3 !important; }
    body .lang-switch button.active{ background:#fff !important; color:#1468ff !important; box-shadow:0 1px 4px rgba(16,24,40,.08) !important; }
    #picker-overlay{ align-items:flex-start !important; justify-content:center !important; padding:0 !important; }
    #picker-overlay .picker-sheet{ width:100%; max-width:560px; max-height:min(88dvh,var(--picker-viewport-height)) !important; border-radius:0 0 22px 22px !important; border-top:0 !important; }
    #picker-overlay .picker-header, #picker-overlay .picker-chips{ position:static !important; }
    #picker-overlay .picker-search-wrap{ position:relative !important; top:0 !important; }
    body.home-mode[data-active-tab="compare"] .home-hero{ margin-bottom:clamp(6px,1.5vh,16px) !important; }
    body.home-mode[data-active-tab="compare"] .home-subtitle{ margin-top:clamp(5px,1.1vh,10px) !important; }
    body.home-mode[data-active-tab="compare"] .home-vs-row{ margin:clamp(5px,1vh,9px) 0 !important; }
    body.home-mode[data-active-tab="compare"] .home-compare-btn{ margin-top:clamp(16px,3.2vh,32px) !important; }
    body[data-active-tab="ranking"] .ranking-head{ padding-top:0 !important; margin-bottom:6px !important; }
    body[data-active-tab="today"] .today-head{ padding-top:0 !important; margin-bottom:12px !important; }
    body[data-active-tab="favorites"] .favorites-head{ padding-top:0 !important; margin-bottom:12px !important; }
    body[data-active-tab="favorites"] .tab-empty-state{ padding:22px 20px 30px !important; }
  }

  @media(max-width:760px) and (max-height:720px){
    body.home-mode[data-active-tab="compare"] .home-title{ font-size:30px !important; line-height:1.18; }
    body.home-mode[data-active-tab="compare"] .home-stock-slot{ min-height:62px !important; }
    body.home-mode[data-active-tab="compare"] .home-compare-btn{ height:48px !important; }
  }

  @media(prefers-reduced-motion:reduce){
    .picker-overlay, .picker-overlay .picker-sheet, .detail-overlay, .detail-sheet,
    .stat-modal-body, .algo-sheet-body, .picker-grid, .picker-suggestions, .detail-scroll,
    .tab-view, #compare-view, .ranking-bar-fill, .radar-data-group{
      animation-duration:1ms !important;
      transition-duration:1ms !important;
    }
  }

  /* =========================================================
     팝업 통일: 종목 선택 / 알고리즘 / 오늘의 순위변동을 다른 팝업들과 같은
     "떠 있는 바텀시트"(좌우 여백 + 사방 둥근 모서리 + 드래그 핸들)로 고정.
     이전 코드에 이 팝업들을 상단 고정으로 되돌리는 leftover 규칙들이 남아있어
     ID 우선순위로 마지막에 다시 확정한다 (레거시 규칙은 그대로 두되 무력화됨).

     종목 선택(#picker-overlay)은 검색창 때문에 키보드가 뜨면 문제가 될 수 있는데,
     "바텀시트는 화면 전체 높이 기준으로 아래에 붙는다"는 문제 자체를 JS에서
     updatePickerViewportHeight()가 오버레이 자신의 top/height를 실제 보이는
     화면(visualViewport)에 맞게 매 순간 다시 잡아줘서 해결한다 -- 그러면
     align-items:flex-end가 "보이는 화면의 아래"에 붙게 되어, 시트 하단이
     항상 키보드 바로 위에 위치한다.
     ========================================================= */
  @media(max-width:760px){
    #picker-overlay, #algo-overlay, #today-rank-overlay{
      align-items:flex-end !important; justify-content:center !important; padding:0 !important;
    }
    #picker-overlay .picker-sheet, #algo-overlay .picker-sheet, #today-rank-overlay .picker-sheet{
      width:calc(100% - 20px) !important; max-width:560px;
      max-height:min(88dvh, var(--picker-viewport-height)) !important;
      margin:0 10px 10px !important; border-radius:20px !important; border:none !important;
    }
  }

  /* =========================================================
     눌림 피드백: 버튼/카드/칩 등 탭 가능한 요소 전반에 살짝 눌리는 느낌.
     transition은 건드리지 않는다 -- 이미 요소마다 hover/이동 transition이
     제각각 걸려있어서, transition을 새로 지정하면 그 목록을 통째로 덮어써버림.
     스냅 방식(즉시 축소, 즉시 복귀)만으로도 짧은 탭 피드백으로는 충분함.
     ========================================================= */
  button:active,
  .today-mover-card:active,
  .filter-chip:active,
  .picker-item:active,
  .picker-suggestion-item:active,
  .picker-recent-chip:active,
  .card.left:active,
  .card.right:active{
    transform: scale(0.97);
  }

  /* =========================================================
     로딩 스켈레톤: 랭킹/투데이 탭이 실제 렌더링되기 전, 정적 HTML 자리에
     깜빡이는 회색 블록을 먼저 보여준다. 각 render 함수가 innerHTML을
     통째로 갈아끼우므로 별도 JS 없이 이 마크업은 첫 렌더링 때 자동으로
     사라진다. 나중에 로고 자산이 생기면 이 자리(또는 첫 진입 스플래시)에
     교체해 넣으면 됨 -- 지금 구조는 그 교체를 막지 않는다.
     ========================================================= */
  .skeleton-block{
    border-radius:8px;
    background: linear-gradient(90deg, #eef1f6 25%, #f6f8fa 37%, #eef1f6 63%);
    background-size:400% 100%;
    animation: logoShimmer 1.4s ease infinite;
  }
  @media (prefers-reduced-motion: reduce){
    .skeleton-block{ animation:none; background:#eef1f6; }
  }
  .skeleton-ranking-row{ display:flex; align-items:center; gap:12px; padding:12px 2px; }
  .skeleton-ranking-row .skeleton-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }
  .skeleton-today-row{ display:flex; align-items:center; gap:10px; padding:11px 12px; }
  .skeleton-today-row .skeleton-info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:6px; }

  /* =========================================================
     키보드 포커스 표시: 전역 outline:none 때문에 안 보이던 키보드 포커스 링을
     공통으로 보강. :focus-visible만 써서 마우스 클릭 시엔 안 뜨고 Tab 등
     키보드 탐색일 때만 뜨게 한다. 이미 자체 focus-visible 스타일이 있는
     .detail-radar-label-group / .detail-keymetric-info 등은 여기서 건드리지 않는다.
     ========================================================= */
  button:focus-visible,
  a:focus-visible,
  .filter-chip:focus-visible,
  .picker-item:focus-visible,
  .picker-suggestion-item:focus-visible,
  .picker-recent-chip:focus-visible,
  .picker-search:focus-visible,
  .ranking-search:focus-visible,
  .ranking-card:focus-visible,
  .today-mover-card:focus-visible,
  .today-compare-card:focus-visible,
  .card.left:focus-visible,
  .card.right:focus-visible,
  .detail-similar-card:focus-visible,
  .home-stock-slot:focus-visible{
    outline: 2px solid #1468ff;
    outline-offset: 2px;
  }

  /* .ranking-search (shared by Ranking and Favorites search) already carries its own blue
     border + 3px box-shadow on :focus (see .ranking-search:focus above) -- stacking the shared
     2px outline above on top of that doubled/clipped the rounded-corner focus ring. Keep the
     border/box-shadow as the sole focus indicator here; it already covers keyboard focus. */
  .ranking-search:focus-visible{
    outline: none;
  }

  /* On phone widths, the title and the two ranking score descriptions must retain the
     same compact two-line rhythm as the other ranking-stat states. */
  @media(max-width:760px){
    .home-title{ font-size:30px; line-height:1.2; }
    html[lang="en"] .home-title{ font-size:30px; }
    .ranking-subtitle{ font-size:12px; line-height:1.55; letter-spacing:-0.015em; }
  }