/* home.css — 폴라리스 홈 (Stitch 디자인 적용)
   ─────────────────────────────────────────────────────────────
   클래스 이름은 기존과 100% 동일하게 유지한다.
   polaris_home.py:scan() 등이 HTML 구조를 정규식으로 파싱하므로
   마크업/클래스를 바꾸면 홈이 죽는다(실제로 두 번 겪었다).
   바뀐 것은 '보이는 방식'뿐이다.

   디자인 출처: Google Stitch 시안(라이트 계열)
   · 배경은 순백이 아닌 따뜻한 오프화이트, 카드가 순백으로 떠오르는 구조
   · 강조는 검정(primary) + 틸블루(secondary), 등락은 에메랄드/크림슨
   · Tailwind CDN은 쓰지 않는다 — 2,260페이지에 브라우저 JIT를 얹을 수 없다
*/

:root{
  /* ── 표면 ── */
  --bg:#fcf8fa;                 /* 페이지 배경 (따뜻한 오프화이트) */
  --card:#ffffff;               /* 카드 */
  --surface:#f6f3f5;            /* 낮은 표면 */
  --surface-2:#f0edef;          /* 컨테이너 */
  --surface-3:#eae7e9;          /* 높은 표면 */
  --line:#e4e2e4;              /* 카드 경계 */
  --line-strong:#c6c6cd;        /* 구분선 */
  /* 아래 둘은 polaris_theme.css 에만 있었다. 홈은 home.css 만 불러오므로
     var(--raised)·var(--hair) 가 해석되지 않아 선언 전체가 버려졌고,
     전광판 라벨('실시간 급등주'·'주도 테마') 배경이 투명해졌다.
     그래서 밑으로 흐르는 종목 칩이 라벨 글자와 겹쳐 보였다. */
  --raised:#f0edef;             /* 살짝 올라온 표면 (전광판 라벨 배경) */
  --hair:#e4e2e4;               /* 실선보다 얇은 경계 */

  /* ── 글자 ── */
  --ink:#1b1b1d;                /* 본문 */
  --muted:#45464d;              /* 보조 */
  --faint:#76777d;              /* 흐림 */

  /* ── 강조 ── */
  --primary:#000000;            /* 주요 액션·중요 수치 */
  --on-primary:#ffffff;
  --primary-soft:#dae2fd;       /* 티커 배지 등 */
  --primary-ink:#131b2e;
  --secondary:#006591;          /* 링크·선택 상태 */
  --secondary-soft:#c9e6ff;

  /* ── 등락 ── */
  --up:#d6293e;                 /* 상승 — 한국식 빨강 */
  --up-strong:#f0455a;
  --up-soft:#ffe8ea;
  --down:#1b64da;               /* 하락 — 한국식 파랑 */
  --down-strong:#3b82f6;
  --down-soft:#e4eeff;
  --warn:#b57200;
  --warn-soft:#f8efdb;

  /* 이전 이름 호환 (다른 페이지·컴포넌트가 참조) */
  --panel:var(--surface);
  --panel-strong:var(--surface-2);
  --white:var(--card);
  --gold:var(--secondary);
  --gold-soft:var(--secondary-soft);
  --blue:var(--secondary);
  --aqua:#39b8fd;

  --shadow:0 4px 20px rgba(0,0,0,.04);
  --shadow-lg:0 8px 24px rgba(0,0,0,.08);
  --r:12px;                     /* 기본 라운드 */
  --r-lg:16px;

  /* 한글이 반드시 렌더되도록 Pretendard/Apple 계열을 앞에 둔다.
     Hanken Grotesk·Be Vietnam Pro에는 한글 글리프가 없다. */
  /* Pretendard 를 맨 앞에 뒀지만 웹폰트로 싣지 않아, 설치된 기기에서만 적용됐다.
     안드로이드·윈도우에선 Hanken Grotesk(한글 글리프 없음)를 건너뛰고 기본 산세리프로
     떨어졌다. 시스템 한글 폰트를 앞에 둬 어느 기기에서나 제대로 된 한글로 그린다. */
  --sans:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Malgun Gothic','Noto Sans KR','Pretendard',sans-serif;
  --mono:'Geist Mono','SF Mono','Roboto Mono',ui-monospace,monospace;
}

*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:var(--bg);color:var(--ink);font-family:var(--sans);
  /* antialiased 는 한글 획을 얇게 만들어 흐려 보인다. 음수 자간까지 겹치면 더 답답하다.
     둘 다 빼고 기본 렌더링에 맡긴다 (2026-08-07 '글씨가 잘 안 보인다'). */
  line-height:1.6}
button,input{font:inherit}
button,a{-webkit-tap-highlight-color:transparent}
a{color:inherit}
.up{color:var(--up)!important}.down{color:var(--down)!important}

/* ══ 헤더 ══ */
/* 2026-08-23: 헤더를 2줄로 나눴다(사장님 지시).
   윗줄 = 로고 + 로그인, 아랫줄 = 메뉴가 폭을 통째로 쓴다.
   예전엔 한 줄에 다 넣느라 메뉴 자리가 모자라 '더보기'가 필요했다. */
.site-header{position:sticky;top:0;z-index:40;
  background:rgba(252,248,250,.85);backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line)}
.header-inner{max-width:1280px;height:62px;margin:0 auto;padding:0 20px;
  display:flex;align-items:center;gap:30px}
.header-nav-row{max-width:1280px;margin:0 auto;padding:0 20px;
  border-top:1px solid color-mix(in srgb,var(--line) 60%,transparent)}
.brand{display:inline-flex;align-items:center;gap:8px;text-decoration:none;
  font-size:24.5px;font-weight:800;letter-spacing:-.04em;white-space:nowrap;color:var(--primary)}
.brand-star{color:var(--secondary);font-size:21.5px;line-height:1}
.desktop-nav{display:flex;align-items:center;gap:26px;min-width:0;overflow-x:auto;scrollbar-width:none}
.desktop-nav::-webkit-scrollbar{display:none}
.desktop-nav a{position:relative;text-decoration:none;white-space:nowrap;
  color:var(--muted);font-weight:600}
.desktop-nav a:hover,.desktop-nav a.active{color:var(--primary)}
.desktop-nav a.active::after{content:"";position:absolute;left:0;right:0;bottom:0;height:2px;background:var(--primary)}
.header-actions{margin-left:auto;display:flex;align-items:center;gap:6px}
.header-ad-slot{display:none;text-decoration:none}
.hd-link{display:inline-flex;align-items:center;gap:4px;padding:8px 12px;border:1px solid var(--line-strong);
  border-radius:999px;background:var(--card);color:var(--muted);font-size:14px;font-weight:600;
  text-decoration:none;white-space:nowrap;cursor:pointer;transition:.15s}
.hd-link:hover{border-color:var(--secondary);color:var(--secondary)}
.icon-button,.login-button,.menu-button{border:0;background:transparent;cursor:pointer}
.login-button{padding:8px 14px;border-radius:999px;background:var(--primary);color:var(--on-primary);
  font-size:14px;font-weight:700;white-space:nowrap}
.login-button:hover{opacity:.88}
.menu-button{display:none;width:38px;height:38px;padding:9px;border-radius:999px}
.menu-button span{display:block;height:2px;margin:4px 0;background:var(--ink);border-radius:2px}
.mobile-nav{display:none}
.me{display:inline-flex;align-items:center;gap:6px;font-size:14px;color:var(--muted)}
.me-btn{border:0;background:transparent;font:inherit;cursor:pointer;color:inherit;padding:4px 2px;font-weight:700}
.me-btn:hover{color:var(--primary)}
/* 👤별명은 my.html 로 가는 <a> 다(예전엔 패널을 여는 <button>). 알약 모양을 그대로 쓰려면
   .me button 과 같은 규칙을 받아야 한다 — 선택자에서 빠지면 이것만 맨몸 링크가 된다. */
.me button,.me .me-btn{border:1px solid var(--line-strong);background:var(--card);border-radius:999px;
  padding:5px 10px;font-size:12.5px;color:var(--muted);cursor:pointer;text-decoration:none;
  display:inline-flex;align-items:center;gap:4px}

.page-shell{max-width:1280px;margin:0 auto;padding:0 20px 96px}

/* ══ 히어로 (오늘의 판정 요약) ══ */
/* 배너 높이를 고정한다.
   장마다 글 길이가 달라 넘길 때마다 카드가 늘었다 줄었다 하면
   아래 내용이 통째로 밀려 화면이 튄다. 가장 긴 장에 맞춰 고정하고,
   짧은 장은 남는 자리를 비워 둔다. */
.hero{position:relative;margin:24px 0 32px;padding:28px 24px 30px;border-radius:var(--r-lg);
  background:var(--primary);color:var(--on-primary);overflow:hidden;
  display:grid;grid-template-columns:minmax(0,1fr) auto;align-items:center;gap:24px}
/* 높이를 못박지 않는다.
   원래는 "장마다 글 길이가 달라 넘길 때마다 카드가 늘었다 줄었다 한다"는 이유로
   312px/462px 로 고정해 뒀는데, 그 뒤에 h1 은 2줄·설명은 3줄로 잘리고
   각각 min-height 까지 걸렸다. 즉 어떤 슬라이드가 와도 내용 높이는 이미 같다.
   고정값만 남아서 아래쪽에 100px 가까운 빈칸이 생겼다(형님 지적).
   내려오는 화살표·점 자리만 padding-bottom 으로 확보하면 된다. */
 .hero{padding-bottom:62px}
@media(min-width:721px){ .hero{align-content:center} }
.hero::before,.hero::after{content:none}
.eyebrow,.section-kicker{margin:0;font-family:var(--sans);font-weight:700;letter-spacing:.12em;text-transform:uppercase}
.eyebrow{margin-bottom:14px;color:#bec6e0;font-size:12.5px}
/* 광고 배너 표시 — 우리 분석과 광고를 눈으로 구분할 수 있어야 한다 */
.hero-ad{display:inline-block;margin-right:8px;padding:2px 6px;border-radius:4px;
  background:rgba(255,255,255,.18);color:#fff;font-size:10.5px;font-weight:800;letter-spacing:.08em}
.hero h1{margin:0;max-width:16ch;font-size:33.5px;line-height:1.28;letter-spacing:-.03em;
  font-weight:700;text-wrap:balance;min-height:2.6em;
  display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.hero-description{margin:16px 0 0;max-width:44ch;color:#b8bcc6;font-size:15.5px;line-height:1.7;
  min-height:3.4em;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hero-description strong{color:#fff;font-weight:700}
.hero-button{display:inline-flex;align-items:center;gap:18px;margin-top:22px;padding:11px 18px;
  border:0;border-radius:999px;background:rgba(255,255,255,.12);color:#fff;text-decoration:none;
  font-size:14.5px;font-weight:700;transition:.18s}
.hero-button:hover{background:#fff;color:var(--primary)}
.hero-visual{display:flex;flex-direction:column;align-items:center;gap:12px;opacity:.9}
.compass-tile{width:96px;height:96px;display:grid;place-items:center;border-radius:24px;
  background:rgba(255,255,255,.07);border:1px solid rgba(255,255,255,.12)}
.compass-ring{position:relative;width:54px;height:54px;border:6px solid rgba(255,255,255,.85);border-radius:50%}
.compass-ring::before{display:none}
.compass-ring i{position:absolute;left:50%;top:50%;width:5px;height:36px;border-radius:10px;
  background:linear-gradient(to bottom,var(--up-strong) 0 50%,rgba(255,255,255,.85) 50%);
  transform:translate(-50%,-50%) rotate(38deg)}
.hero-visual>span{font:700 9.5px var(--mono);letter-spacing:.2em;color:rgba(255,255,255,.5)}
.hero-arrow{position:absolute;bottom:14px;z-index:4;width:32px;height:32px;display:grid;place-items:center;
  border:1px solid rgba(255,255,255,.22);border-radius:999px;background:rgba(255,255,255,.08);
  color:#fff;font-size:19px;line-height:1;cursor:pointer;transition:.16s}
.hero-arrow:hover{background:rgba(255,255,255,.2)}
.hero-arrow.prev{left:18px}.hero-arrow.next{right:18px}
.hero-dots{position:absolute;z-index:3;left:50%;bottom:20px;transform:translateX(-50%);
  display:flex;align-items:center;gap:6px}
.hero-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:rgba(255,255,255,.3);
  cursor:pointer;transition:.2s}
.hero-dot.active{width:22px;background:#fff}

/* ══ 섹션 공통 ══ */
.section{scroll-margin-top:90px;margin-top:40px}
.section-heading{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.section-kicker{margin-bottom:5px;color:var(--faint);font-size:11px}
.section-heading h2{margin:0;font-size:24.5px;font-weight:700;letter-spacing:-.03em}
.text-link,.card-heading a{color:var(--secondary);text-decoration:none;font-size:14px;font-weight:600}
.text-link:hover,.card-heading a:hover{text-decoration:underline}
.updated{color:var(--faint);font:500 11px var(--mono)}

/* ══ 시장 현황 카드 ══ */
/* 지수 카드 — 한 화면에 아래 '실시간 급등주'까지 들어오게 높이를 줄인다.
   숫자·등락률·미니차트는 그대로 두고 여백과 글자만 줄였다 (2026-08-09). */
.market-cards{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px}
.market-card{position:relative;min-width:0;padding:10px 11px;text-align:left;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);box-shadow:var(--shadow);cursor:pointer;transition:.16s;
  text-decoration:none;display:block}
.market-card:hover,.market-card.selected{box-shadow:var(--shadow-lg);border-color:var(--secondary)}
.market-card span{display:block;color:var(--faint);font-size:13px;font-weight:600}
.market-card strong{display:block;margin-top:8px;font:600 22.5px var(--mono);letter-spacing:-.02em;color:var(--ink)}
.market-card em{display:inline-block;margin-top:6px;font:500 13.5px var(--mono);font-style:normal}
.market-card small{display:block;margin-top:10px;color:var(--faint);font-size:10.5px}
/* 카드 미니 차트 — 최근 한 달 종가. 모양만 보여주므로 눈금·축은 없다.
   preserveAspectRatio:none 으로 늘려 쓰기 때문에 선 굵기는 vector-effect 로 고정한다.
   안 그러면 가로로 늘어난 만큼 선이 가늘어져 보인다. */
.mk-spark{display:block;width:100%;height:28px;margin-top:8px;overflow:visible}
.mk-spark polyline{fill:none;stroke-width:1.6px;vector-effect:non-scaling-stroke;
  stroke-linecap:round;stroke-linejoin:round}
.mk-spark.up polyline{stroke:var(--up,#d6293e)}
.mk-spark.down polyline{stroke:var(--down,#1b64da)}

/* 오늘의 주도주 실시간 차트 — 시장 현황 바로 아래 한 개만 */
.lead-chart{margin-top:16px;border:1px solid var(--line);border-radius:var(--r-lg);
  background:var(--card,#fff);overflow:hidden}
.lead-head{display:flex;align-items:center;gap:8px;padding:12px 14px 10px}
.lead-tag{flex:none;padding:3px 8px;border-radius:999px;background:var(--up-soft);
  color:var(--up);font-size:11px;font-weight:800;letter-spacing:.02em}
.lead-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;
  color:var(--ink);font-size:14.5px;font-weight:700;text-decoration:none}
.lead-name small{margin-left:6px;color:var(--faint);font:500 11.5px var(--mono)}
.lead-head em{margin-left:auto;flex:none;font:600 13.5px var(--mono);font-style:normal}
/* 높이는 반드시 .lead-box(부모)에 준다 — 임베드 스크립트가 컨테이너에 인라인으로
   height:100% 를 박아서 컨테이너 쪽 규칙은 무조건 진다. 부모에 높이가 없으면
   100%가 풀리지 않아 위젯 기본값 150px 로 찌그러진다. */
.lead-box{position:relative;height:300px;border-top:1px solid var(--line)}
#leadBox,#leadBox .tradingview-widget-container__widget{height:100%}
#leadBox iframe{display:block;border:0}
@media(max-width:720px){
  .lead-box{height:240px}
  .lead-head{padding:10px 12px 8px}
  .lead-name{font-size:13.5px}
}

/* ══ 전광판 ══ */
/* 전광판 — 검은 바탕에 회색 글씨(#8f93a0)라 안 읽혔다.
   페이지의 다른 카드와 같은 밝은 배경으로 바꾸고 글자를 키웠다. */
.market-tape{height:60px;margin-top:12px;display:flex;align-items:center;overflow:hidden;
  border-radius:var(--r);background:var(--white);border:1px solid var(--line);color:var(--ink)}
/* 전광판 아래 한 줄로 따로 둔다 (예전엔 라벨 왼쪽에 붙어 있었다) */
.tape-status-line{margin:6px 0 0;display:flex;justify-content:flex-end}
.tape-status{display:inline-flex;align-items:center;gap:6px;
  padding:3px 10px;border-radius:999px;background:var(--raised);
  color:var(--up);font:800 11.5px var(--mono);white-space:nowrap}
.tape-status.closed{color:var(--faint)}
.tape-status[hidden]{display:none}
.tape-status i{width:7px;height:7px;border-radius:50%;background:currentColor;box-shadow:0 0 8px currentColor}
.tape-label{position:relative;z-index:2;align-self:stretch;display:flex;align-items:center;padding:0 15px;
  background:var(--raised);border-right:1px solid var(--line);
  color:var(--muted);font-size:13.5px;font-weight:800;white-space:nowrap}
.tape-track{display:flex;align-items:center;min-width:0;overflow-x:auto;scrollbar-width:none}
.tape-track::-webkit-scrollbar{display:none}
/* ── 2026-08-14: 전광판이 "1,2,3,1,2,3" 으로 튕기던 문제 ──────────────────
   내용을 두 벌 만들고 -50%(=한 벌) 만큼 밀어 이어붙이는 방식인데,
   .tape-track 이 **플렉스 자식**이라 `flex:0 1 auto` + `min-width:0` 때문에
   width:max-content 가 무시되고 부모 폭(291px)까지 쪼그라들었다.
   그러면 -50% 가 한 벌(2,641px)이 아니라 146px 이라 앞 한두 개만 지나고 되감긴다.
   실측: 내용폭 5,283 · 요소폭 291 · 미는거리 146.
   줄어들지 못하게 못박아야 -50% 가 정확히 한 벌이 된다. */
.tape-track.marquee{overflow:visible;flex-wrap:nowrap;
  width:max-content;min-width:max-content;flex:0 0 auto;
  animation:tapescroll 9s linear infinite;will-change:transform}
.theme-tape{margin-top:8px}
.market-tape:hover .tape-track.marquee{animation-play-state:paused}
@keyframes tapescroll{from{transform:translateX(0)}to{transform:translateX(-50%)}}
@media(prefers-reduced-motion:reduce){.tape-track.marquee{animation:none}}
.tape-track a{flex:none;height:26px;display:flex;align-items:center;gap:8px;padding:0 16px;
  border-left:1px solid var(--hair);text-decoration:none;white-space:nowrap}
.tape-track a:first-child{border-left:0}
.tape-track b{color:var(--ink);font-size:15.5px;font-weight:700;letter-spacing:-.02em}
.tape-track small{color:var(--faint);font:600 12.5px var(--mono)}
.tape-track span{color:var(--muted);font:600 14.5px var(--mono);font-variant-numeric:tabular-nums}
.tape-track em{font:700 14.5px var(--mono);font-style:normal;font-variant-numeric:tabular-nums}
.tape-track em.up{color:var(--up)}.tape-track em.down{color:var(--down)}

/* ══ 폴라리스 매매기록 ══ */
.track-box{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow)}
.tk-row{display:grid;grid-template-columns:62px minmax(0,1fr) 74px auto 66px;align-items:center;gap:10px;
  padding:13px 15px;border-bottom:1px solid var(--line);text-decoration:none;transition:.15s}
.tk-row:last-child{border-bottom:0}
.tk-row:hover{background:var(--surface)}
.tk-v{padding:4px 6px;border-radius:6px;font:700 10.5px var(--mono);text-align:center}
.tk-v.v-buy{background:var(--up-soft);color:var(--up)}
.tk-v.v-sell{background:var(--down-soft);color:var(--down)}
.tk-nm{min-width:0}
.tk-nm b{display:block;font-size:15px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.tk-nm small{color:var(--faint);font:500 10.5px var(--mono)}
/* 장부 오른쪽 칸은 좁아서 원화(진입가)만 들어간다. 그것만 보면
   이 종목이 지금 몇 달러인지 알 수가 없어 종목 옆에 현재가·등락률을 같이 적는다. */
/* 현재가·등락률 — 오른쪽 칸 윗줄 */
.tk-live{display:block;font:600 13px var(--mono);color:var(--ink);white-space:nowrap}
.tk-live em{margin-left:4px;font-style:normal;font-weight:700;font-size:11.5px}
.tk-live em.up{color:var(--up)}.tk-live em.down{color:var(--down)}
.tk-live-px{display:inline-flex;align-items:baseline;gap:5px;margin-left:7px;
  font:600 13px var(--mono);color:var(--muted);white-space:nowrap}
.tk-live-px em{font-style:normal;font-weight:700}
/* 기록 당시 판정과 현재 판정이 다를 때만 붙는다 */
.tk-now{display:inline-block;margin-left:6px;padding:1px 6px;border-radius:999px;
  background:var(--raised);color:var(--muted);font:700 10.5px/1.6 var(--sans);
  text-decoration:none;vertical-align:1px}
.tk-when{text-align:right;color:var(--faint);font:500 11px var(--mono)}
.tk-when i{display:block;font-style:normal;font-size:10.5px;margin-top:2px}
.tk-row em{text-align:right;font:600 15px var(--mono);font-style:normal}
.tk-row em.up{color:var(--up)}.tk-row em.down{color:var(--down)}
.tk-wait{color:var(--faint);font-size:11px!important;font-weight:500!important}
/* 종목 옆 미니차트 — 빌드 때 그린 인라인 SVG(외부 요청 0) */
.tk-spark{display:block;min-width:0}
.tk-spark svg{display:block;width:100%;height:26px;overflow:visible}
/* 이 줄에는 등락률이 둘이다 — '오늘'과 '판정 이후'. 라벨이 없으면 구분이 안 된다.
   숫자 아래에 아주 작게 붙여 자리를 거의 안 먹게 한다. */
.tk-lbl{display:block;margin-top:1px;font:600 9px/1.2 var(--sans);color:var(--faint);
  text-decoration:none;letter-spacing:0}
.tk-perf{text-align:right}
.tk-perf em{display:block}
@media(max-width:640px){
  .tk-spark svg{height:22px}
  .tk-lbl{font-size:8.5px}
}

/* ══ 검색 ══ */
.search-section{margin-top:-14px;position:relative;margin:22px 0 8px;scroll-margin-top:90px}
/* 검색창은 홈에서 제일 많이 쓰는 칸인데 흰 바탕에 회색 테두리라
   그냥 여백처럼 보였다. 테두리·아이콘에 색을 주고 살짝 띄워 눈에 걸리게 한다. */
.search-box{position:relative;height:60px;display:flex;align-items:center;gap:13px;padding:0 20px;
  border:2px solid var(--secondary);border-radius:999px;
  background:linear-gradient(180deg,var(--card),color-mix(in srgb,var(--secondary) 4%,var(--card)));
  box-shadow:0 2px 10px color-mix(in srgb,var(--secondary) 12%,transparent),var(--shadow)}
.search-box:focus-within{box-shadow:0 0 0 5px color-mix(in srgb,var(--secondary) 16%,transparent),var(--shadow-lg)}
.search-box::after{content:none}
.search-icon{position:relative;width:19px;height:19px;flex:none;border:2.4px solid var(--secondary);border-radius:50%}
.search-icon::after{content:"";position:absolute;right:-6px;bottom:-3px;width:8px;height:2.4px;
  border-radius:2px;background:var(--secondary);transform:rotate(45deg)}
.search-box input{flex:1;min-width:0;border:0;outline:0;background:transparent;font-size:18px;
  font-weight:600;color:var(--ink)}
.search-box input::placeholder{color:var(--muted);font-weight:500}
.search-box kbd{font:700 12.5px var(--mono);color:var(--secondary);
  border:1px solid color-mix(in srgb,var(--secondary) 35%,transparent);
  background:color-mix(in srgb,var(--secondary) 8%,transparent);
  border-radius:7px;padding:4px 8px;white-space:nowrap}
.search-results{position:absolute;left:0;right:0;top:calc(100% + 8px);z-index:30;
  border:1px solid var(--line);border-radius:var(--r);background:var(--card);
  box-shadow:var(--shadow-lg);overflow:hidden}
.search-results[hidden]{display:none}
.search-result{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:12px;
  padding:12px 16px;border-bottom:1px solid var(--line);text-decoration:none}
.search-result:last-child{border-bottom:0}
.search-result:hover{background:var(--surface)}
.search-result strong{font-size:15px;font-weight:600}
.search-result small{margin-left:6px;color:var(--faint);font:500 10.5px var(--mono)}
.search-result span{font:500 13.5px var(--mono);color:var(--muted)}
.search-empty{padding:22px;text-align:center;color:var(--faint);font-size:14.5px}

/* ══ 오늘 시장 한눈에 (2카드) ══ */
.brief-section{margin-top:40px}
.brief-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(0,1fr);gap:14px}
.regime-card{padding:22px;border-radius:var(--r-lg);background:var(--primary);color:#fff;
  cursor:pointer;position:relative;overflow:hidden}
.regime-head{display:flex;align-items:flex-start;justify-content:space-between;gap:14px}
.regime-head span{color:#bec6e0;font-size:12.5px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.regime-head h3{margin:6px 0 0;font-size:24.5px;font-weight:700;letter-spacing:-.03em}
.regime-score{font:700 42px var(--mono);letter-spacing:-.04em;line-height:1;color:var(--up-strong)}
.regime-score small{font-size:15.5px;color:#8f93a0;font-weight:500}
.regime-card>p{margin:14px 0 0;color:#b8bcc6;font-size:14.5px;line-height:1.7}
.signal-scale{display:grid;grid-template-columns:auto minmax(0,1fr) auto;align-items:center;gap:10px;margin-top:18px}
.signal-scale>span{color:#8f93a0;font-size:12px}
.signal-scale>div{height:6px;border-radius:999px;background:rgba(255,255,255,.12);overflow:hidden}
.signal-scale i{display:block;height:100%;border-radius:999px;
  background:linear-gradient(90deg,var(--down-strong),var(--warn),var(--up-strong))}
.metric-row{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px;margin-top:16px}
.metric-row>div{padding:11px 12px;border-radius:10px;background:rgba(255,255,255,.06)}
.metric-row span{display:block;color:#8f93a0;font-size:12px}
.metric-row b{display:block;margin-top:4px;font:600 17px var(--mono)}
.regime-toggle{display:inline-block;margin-top:16px;color:var(--secondary-soft);font-size:13px;font-weight:700}
.regime-more{margin-top:16px;padding-top:14px;border-top:1px solid rgba(255,255,255,.14)}
.regime-more[hidden]{display:none}
.regime-more h4{margin:0 0 8px;font-size:14px;color:#fff}
.regime-more h4:not(:first-child){margin-top:16px}
.rg-how{margin:0 0 12px;font-size:13px;line-height:1.7;color:#b8bcc6}
.rg-row{display:grid;grid-template-columns:58px minmax(0,1fr) 74px;align-items:center;gap:9px;margin-bottom:6px}
.rg-row>span{font-size:12.5px;color:#b8bcc6}
.rg-row>div{height:6px;border-radius:4px;background:rgba(255,255,255,.12);overflow:hidden}
.rg-row i{display:block;height:100%;border-radius:4px}
.rg-row i.up{background:var(--up-strong)}.rg-row i.down{background:var(--down-strong)}.rg-row i.mid{background:#8f93a0}
.rg-row b{text-align:right;font:600 12.5px var(--mono);color:#fff}
.rg-row b em{margin-left:5px;font-style:normal;color:#8f93a0;font-weight:500}
.rg-bars{margin:6px 0 4px}
.rg-bars .sector-row{grid-template-columns:78px minmax(0,1fr) 52px;font-size:12.5px;padding:3px 0}
.rg-bars .sector-row>span{color:#b8bcc6}
.rg-bars .sector-row>div{background:rgba(255,255,255,.12)}
.rg-movers{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:7px;margin-top:4px}
.rgm{display:block;padding:10px 11px;border-radius:10px;background:rgba(255,255,255,.06);text-decoration:none}
.rgm:hover{background:rgba(255,255,255,.12)}
.rgm-h{display:flex;align-items:baseline;justify-content:space-between;gap:6px}
.rgm-h b{color:#fff;font-size:13.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.rgm-h em{font:600 12.5px var(--mono);font-style:normal}
.rgm-w{display:block;margin-top:3px;color:#8f93a0;font-size:10.5px;line-height:1.5}
.rg-load{color:#8f93a0;font-size:12.5px}
.rg-links{display:flex;flex-wrap:wrap;gap:14px;margin-top:14px}
.rg-links a{color:var(--secondary-soft);font-size:13px;font-weight:600;text-decoration:none}

.sector-card{padding:22px;border-radius:var(--r-lg);background:var(--card);
  border:1px solid var(--line);box-shadow:var(--shadow)}
.card-heading{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;margin-bottom:16px}
.card-heading span{color:var(--faint);font-size:11px;font-weight:700;letter-spacing:.1em;text-transform:uppercase}
.card-heading h3{margin:5px 0 0;font-size:20px;font-weight:700;letter-spacing:-.02em}
.sector-list{display:flex;flex-direction:column;gap:9px}
.sector-row{display:grid;grid-template-columns:88px minmax(0,1fr) 56px;align-items:center;gap:10px}
.sector-row>span{font-size:14px;color:var(--muted);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.sector-row>div{height:7px;border-radius:999px;background:var(--surface-2);overflow:hidden}
.sector-row i{display:block;height:100%;border-radius:999px}
.sector-row i.positive{background:var(--up)}
.sector-row i.negative{background:var(--down)}
.sector-row b{text-align:right;font:600 13.5px var(--mono)}

/* ══ 오늘의 관찰종목 ══ */
.watch-heading{align-items:center}
.filter-tabs,.mover-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none}
.filter-tabs::-webkit-scrollbar,.mover-tabs::-webkit-scrollbar{display:none}
.filter-tabs button,.mover-tabs button{padding:8px 14px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--card);color:var(--muted);font-size:13.5px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.15s}
.filter-tabs button:hover,.mover-tabs button:hover{border-color:var(--secondary);color:var(--secondary)}
.filter-tabs button.active,.mover-tabs button.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.watch-carousel{position:relative;display:flex;align-items:stretch}
.watch-grid{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;padding:2px}
.watch-grid::-webkit-scrollbar{display:none}
.watch-card{flex:0 0 calc((100% - 24px)/3);scroll-snap-align:start;padding:18px;border-radius:var(--r);
  border:1px solid var(--line);background:var(--card);box-shadow:var(--shadow);
  text-decoration:none;transition:.18s}
.watch-card:hover{box-shadow:var(--shadow-lg);border-color:var(--secondary)}
.watch-card[hidden]{display:none}
.watch-top,.stock-title,.watch-footer{display:flex;align-items:center;justify-content:space-between;gap:12px}
.watch-theme{color:var(--secondary);font-size:12px;font-weight:700}
.verdict{padding:4px 9px;border-radius:999px;font-size:11px;font-style:normal;font-weight:700}
.verdict.strong-buy{background:var(--up-soft);color:var(--up)}
.verdict.buy{background:var(--secondary-soft);color:var(--secondary)}
.verdict.sell{background:var(--down-soft);color:var(--down)}
.verdict.wait{background:var(--surface-2);color:var(--muted)}
/* 관찰종목 카드 머리 — 왼쪽에 이름/티커·등락률, 오른쪽에 가격. 한 줄로 맞춘다. */
.stock-title{align-items:center;margin-top:14px;gap:10px}
.stock-title .wc-id{min-width:0;flex:1}
.stock-title h3{margin:0;font-size:18px;font-weight:700;letter-spacing:-.02em;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.stock-title .wc-sub{display:flex;align-items:baseline;gap:7px;margin-top:3px}
.stock-title .wc-sub b{color:var(--faint);font:500 11.5px var(--mono);font-weight:500}
.stock-title .wc-chg{font:700 12px var(--mono);font-style:normal}
.stock-title .wc-px{flex:none;text-align:right;font:600 14.5px var(--mono);
  white-space:nowrap;color:var(--ink);line-height:1.35}
.stock-title .wc-px .krw{display:block;color:var(--faint);font-size:11px;font-weight:500}
.wc-chg{margin-left:6px;font:600 12.5px var(--mono);font-style:normal}
.wc-chg.up{color:var(--up)}.wc-chg.down{color:var(--down)}
.watch-card>p{min-height:44px;margin:14px 0 0;color:var(--muted);font-size:13.5px;line-height:1.65}
.watch-footer{margin-top:14px;padding-top:12px;border-top:1px solid var(--line);
  color:var(--faint);font:500 10.5px var(--mono)}
.watch-footer b{margin-left:auto;color:var(--secondary);font-size:12.5px;white-space:nowrap;flex:none}
.wc-arrow{flex:none;align-self:center;width:34px;height:34px;margin:0 -6px;z-index:3;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--ink);
  font-size:19px;line-height:1;cursor:pointer;box-shadow:var(--shadow);transition:.15s}
.wc-arrow:hover{border-color:var(--secondary);color:var(--secondary)}
.wc-arrow[hidden]{display:none}
.watch-dots{display:flex;justify-content:center;gap:6px;margin-top:14px}
/* CODEX 2026-08-10: 실제 광고와 콘텐츠를 혼동하지 않도록 AD 표기를 항상 노출한다. */
.watch-ad-slot{display:flex;align-items:center;gap:10px;min-height:58px;margin-top:14px;padding:10px 14px;
  border:1px solid var(--line);border-radius:9px;background:var(--panel);color:var(--ink);text-decoration:none}
.watch-ad-slot>span{flex:none;padding:2px 5px;border:1px solid var(--line-strong);border-radius:3px;
  color:var(--muted);font:700 8px var(--sans);letter-spacing:.08em}
.watch-ad-slot>b{font-size:13px}.watch-ad-slot>small{margin-left:auto;color:var(--secondary);font-size:11px;font-weight:700}
.wc-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:.15s}
.wc-dot.active{background:var(--primary);width:20px;border-radius:999px}

/* ══ 지금 움직이는 종목 ══ */
.movers-table-wrap{border:1px solid var(--line);border-radius:var(--r);overflow:hidden;
  background:var(--card);box-shadow:var(--shadow)}
.movers-table{width:100%;border-collapse:collapse}
.movers-table thead th{padding:11px 14px;background:var(--surface);border-bottom:1px solid var(--line);
  color:var(--faint);font-size:12px;font-weight:700;text-align:left;text-transform:uppercase;letter-spacing:.04em}
.movers-table th:not(:first-child){text-align:right}
.movers-table td{padding:12px 14px;border-bottom:1px solid var(--line);font-size:14.5px}
.movers-table tr:last-child td{border-bottom:0}
.mv-row{cursor:pointer;transition:.14s}
.mv-row:hover{background:var(--surface)}
.stock-cell{display:flex;align-items:center;gap:10px}
.ticker-avatar{flex:none;width:36px;height:36px;display:grid;place-items:center;border-radius:9px;
  background:var(--primary-soft);color:var(--primary-ink);font:700 10.5px var(--mono)}
.stock-cell b{display:block;font-size:14.5px;font-weight:600}
.stock-cell small{color:var(--faint);font:500 10.5px var(--mono)}
.number-cell,.volume-cell{text-align:right;font:500 14px var(--mono);color:var(--muted)}
.number-cell.up{color:var(--up)}.number-cell.down{color:var(--down)}
.table-verdict{display:inline-block;padding:5px 10px;border-radius:999px;font-size:12px;font-weight:700;
  text-decoration:none;float:right}
.table-verdict.buy{background:var(--up-soft);color:var(--up)}
.table-verdict.sell{background:var(--down-soft);color:var(--down)}
.table-verdict.wait{background:var(--surface-2);color:var(--muted)}
.movers-more,.verdict-more{text-align:center;margin-top:14px}
.movers-more button,.verdict-more button{padding:10px 24px;border:1px solid var(--line-strong);border-radius:999px;
  background:var(--card);color:var(--ink);font-size:14px;font-weight:600;cursor:pointer;transition:.15s}
.movers-more button:hover,.verdict-more button:hover{border-color:var(--secondary);color:var(--secondary)}
.movers-more button[hidden],.verdict-more button[hidden]{display:none}
.table-note{margin-top:10px;font-size:12.5px;line-height:1.6;color:var(--faint)}

/* ══ 전체 종목 판정 ══ */
.verdict-count{margin-left:auto;color:var(--faint);font:500 13.5px var(--mono)}
.verdict-tabs{display:flex;align-items:center;gap:6px;overflow-x:auto;scrollbar-width:none;margin-bottom:14px}
.verdict-tabs::-webkit-scrollbar{display:none}
.verdict-tabs button{display:inline-flex;align-items:center;gap:6px;padding:9px 14px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--card);color:var(--muted);
  font-size:14px;font-weight:600;white-space:nowrap;cursor:pointer;transition:.15s}
.verdict-tabs button:hover{border-color:var(--secondary);color:var(--secondary)}
.verdict-tabs button.active{background:var(--primary);border-color:var(--primary);color:var(--on-primary)}
.tab-badge{font:600 11px var(--mono);opacity:.65}
.verdict-list{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:9px}
.v-item{display:flex;align-items:center;gap:10px;padding:12px 14px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);text-decoration:none;transition:.15s}
.v-item:hover{border-color:var(--secondary);box-shadow:var(--shadow)}
.v-nm{min-width:0;flex:1}
.v-nm b{display:block;font-size:14.5px;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.v-nm small{color:var(--faint);font:500 10px var(--mono)}
/* 달러가 기준, 등락률은 그 옆, 원화는 아래 참고값 */
.v-px{font:500 13.5px var(--mono);color:var(--muted);white-space:nowrap;text-align:right}
.v-px b{font-weight:600;color:var(--ink)}
.v-px em{margin-left:5px;font-style:normal;font-weight:700;font-size:11.5px}
.v-px em.up{color:var(--up)}.v-px em.down{color:var(--down)}
.v-px i{display:block;margin-top:1px;font-style:normal;font-size:10px;color:var(--faint)}
.v-tag{padding:4px 9px;border-radius:999px;font:700 11px var(--sans);font-style:normal;white-space:nowrap}
.v-tag.v-buy{background:var(--up-soft);color:var(--up)}
.v-tag.v-sell{background:var(--down-soft);color:var(--down)}
.v-tag.v-wait{background:var(--surface-2);color:var(--muted)}
.verdict-pager{display:flex;align-items:center;justify-content:center;gap:14px;margin-top:16px}
.vp-arrow{width:34px;height:34px;border:1px solid var(--line-strong);border-radius:999px;background:var(--card);
  color:var(--ink);font-size:19px;line-height:1;cursor:pointer;transition:.15s}
.vp-arrow:hover:not(:disabled){border-color:var(--secondary);color:var(--secondary)}
.vp-arrow:disabled{opacity:.3;cursor:default}
.verdict-dots{display:flex;align-items:center;gap:6px}
.vp-dot{width:6px;height:6px;padding:0;border:0;border-radius:999px;background:var(--line-strong);cursor:pointer;transition:.15s}
.vp-dot.active{background:var(--primary);width:20px}
.verdict-pager[hidden]{display:none}

/* ══ 푸터 ══ */
.site-footer{margin-top:56px;border-top:1px solid var(--line);background:var(--surface)}
.footer-inner{max-width:1280px;margin:0 auto;padding:32px 20px 40px}
.footer-brand{font-size:21.5px}
.site-footer p{margin:8px 0 0;color:var(--faint);font-size:13.5px}
.footer-links{display:flex;gap:18px;margin-top:16px}
.footer-links a{color:var(--muted);font-size:13.5px;text-decoration:none}
.footer-links a:hover{color:var(--primary)}
.disclaimer{margin-top:18px!important;padding-top:16px;border-top:1px solid var(--line);
  font-size:12.5px!important;line-height:1.7}

/* ══ 로그인 시트 ══ */
.login-overlay{position:fixed;inset:0;z-index:100;display:none;place-items:center;padding:20px;
  background:rgba(20,20,22,.5);backdrop-filter:blur(4px)}
.login-overlay.open{display:grid}
.login-sheet{width:100%;max-width:360px;padding:26px;border-radius:var(--r-lg);background:var(--card);
  box-shadow:var(--shadow-lg)}
.login-sheet h2{margin:0;font-size:22.5px;font-weight:700}
.login-sub{margin:8px 0 18px;color:var(--muted);font-size:14.5px;line-height:1.6}
.sso-google{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:13px;
  border:1px solid var(--line-strong);border-radius:999px;background:var(--card);
  font-size:15.5px;font-weight:600;cursor:pointer;transition:.15s}
.sso-google:hover{border-color:var(--secondary);background:var(--surface)}
#lgNick input{width:100%;box-sizing:border-box;margin-bottom:9px;padding:12px 14px;
  border:1px solid var(--line-strong);border-radius:999px;font-size:15.5px}
.login-me{font-size:17px;margin-bottom:12px}
.login-me b{color:var(--secondary)}
#lgMe button,.login-x{width:100%;margin-top:8px;padding:11px;border:1px solid var(--line-strong);
  border-radius:999px;background:var(--card);color:var(--muted);font-size:14.5px;cursor:pointer}
.login-x{margin-top:12px}

/* ══ 사이드 패널 ══ */
.sheet-back{position:fixed;inset:0;z-index:95;background:rgba(20,20,22,.45);backdrop-filter:blur(2px)}
.sheet-back[hidden]{display:none}
.side-pane{position:fixed;top:0;right:0;bottom:0;z-index:96;width:min(380px,88vw);
  display:flex;flex-direction:column;background:var(--card);box-shadow:-8px 0 32px rgba(0,0,0,.16)}
.side-pane[hidden]{display:none}
.pane-h{display:flex;align-items:center;justify-content:space-between;padding:18px;border-bottom:1px solid var(--line)}
.pane-h b{font-size:17px;font-weight:700}
.pane-x{width:32px;height:32px;border:0;border-radius:999px;background:var(--surface);color:var(--muted);
  font-size:15.5px;cursor:pointer}
.pane-b{flex:1;overflow-y:auto;padding:14px 16px calc(20px + env(safe-area-inset-bottom))}
.pane-empty{padding:26px 6px;text-align:center;color:var(--faint);font-size:14.5px;line-height:1.7}
.pane-cta{margin-top:6px;padding:11px 22px;border:0;border-radius:999px;background:var(--primary);
  color:var(--on-primary);font-size:14.5px;font-weight:700;cursor:pointer}
.pane-item{display:flex;align-items:center;gap:10px;padding:13px;border:1px solid var(--line);
  border-radius:var(--r);background:var(--card);text-decoration:none;margin-bottom:8px;transition:.15s}
.pane-item:hover{border-color:var(--secondary)}
.my-head{display:flex;align-items:center;gap:12px;padding:6px 4px 14px}
.my-av{width:44px;height:44px;display:grid;place-items:center;border-radius:999px;background:var(--surface-2);font-size:22.5px}
.my-head b{display:block;font-size:17px;font-weight:700}
.my-head small{color:var(--faint);font-size:13px}
.my-note{margin:0 4px 4px;color:var(--faint);font-size:12.5px;line-height:1.6}
.my-h{margin:18px 4px 10px;font-size:14.5px;font-weight:700}
.my-post{display:block;padding:13px;border:1px solid var(--line);border-radius:var(--r);
  text-decoration:none;margin-bottom:8px}
.my-post:hover{border-color:var(--secondary)}
.mp-top{display:flex;align-items:center;gap:7px;margin-bottom:5px}
.mp-top em{font-style:normal;font-size:13px;font-weight:700}
.mp-kind{font-style:normal;padding:2px 7px;border-radius:999px;background:var(--secondary-soft);
  color:var(--secondary);font-size:10.5px;font-weight:700}
.mp-top small{margin-left:auto;color:var(--faint);font:500 11px var(--mono)}
.my-post p{margin:0;color:var(--muted);font-size:13.5px;line-height:1.6}

/* ══ 반응형 ══ */
@media(max-width:1000px){
  .brief-grid{grid-template-columns:minmax(0,1fr)}
  .verdict-list{grid-template-columns:repeat(2,minmax(0,1fr))}
  /* 관찰종목 카드 간격 좁히기(형님 지적) — 카드 안 여백과 카드 사이 간격을 같이 줄인다 */
  .watch-grid{gap:8px}
  .watch-card{flex-basis:calc((100% - 8px)/2);padding:12px}
  .watch-card>p{min-height:36px;margin-top:9px;font-size:12.5px;line-height:1.55}
  .stock-title .wc-px{font-size:13px}
  .stock-title .wc-px .krw{font-size:10px}
}
@media(max-width:820px){
  .desktop-nav{display:none}
  .menu-button{display:block}
  .mobile-nav{display:block;border-top:1px solid var(--line);background:var(--card);padding:8px 20px 14px}
  .mobile-nav[hidden]{display:none}
  .mobile-nav a{display:inline-block;padding:9px 12px 9px 0;margin-right:6px;color:var(--muted);
    font-size:15px;font-weight:600;text-decoration:none}
}
@media(max-width:720px){
  .page-shell{padding:0 16px 96px}
  .header-inner{height:58px;padding:0 16px;gap:10px}
  .site-header{height:58px}
  /* 배너 높이 절반 (330px → 165px, 형님 지시).
     높이만 줄이면 글이 넘쳐 잘리므로 줄 수 제한을 3줄·4줄 → 2줄·2줄로 같이 줄인다.
     min-height 와 줄 수 제한이 둘 다 있어야 어떤 슬라이드로 넘겨도 높이가 같다 —
     하나라도 빠지면 글 길이에 따라 카드가 늘었다 줄었다 한다. */
  .hero{grid-template-columns:minmax(0,1fr);padding:16px 20px 34px;margin:16px 0 24px;gap:8px;
    min-height:165px;align-content:center}
  .hero h1{font-size:18px;line-height:1.25;min-height:2.1em;-webkit-line-clamp:2}
  .hero-description{margin-top:6px;font-size:12px;line-height:1.5;
    min-height:2.5em;-webkit-line-clamp:2}
  .hero-button{margin-top:8px;padding:6px 13px;gap:9px;font-size:12px}
  .hero-ad{font-size:9.5px}
  /* 배너를 절반으로 줄이려면 뭔가는 빠져야 한다. 'DAILY MARKET COMPASS' 라벨이
     제목·설명·버튼 중 가장 덜 아쉬워서 모바일에서만 접는다(데스크톱은 그대로). */
  .hero .eyebrow{display:none}
  /* 배너가 낮아진 만큼 화살표·점도 같이 낮춘다 — 안 그러면 버튼 위로 겹친다 */
  .hero-arrow{width:26px;height:26px;bottom:6px}
  .hero-arrow.prev{left:12px}.hero-arrow.next{right:12px}
  .hero-dots{bottom:12px}
  .hero-visual{display:none}
  .section{margin-top:34px}
  .section-heading h2{font-size:21.5px}
  .market-cards{gap:8px}
  .market-card{padding:12px 10px}
  .market-card span{font-size:11px}
  .market-card strong{font-size:18px;margin-top:5px}
  .market-card em{font-size:11px}
  .market-card small{margin-top:6px;font-size:9.5px}
  /* 모바일에서도 읽히게 — 예전엔 9.5px 라 사실상 안 보였다 */
  .market-tape{height:50px}
  .tape-status,.tape-label{padding:0 11px;font-size:12.5px}
  .tape-track a{gap:7px;padding:0 13px}
  .tape-track b{font-size:14.5px}
  .tape-track span,.tape-track em{font-size:13.5px}
  .tape-track small{font-size:11px}
  .tape-track a{padding:0 12px}
  .regime-card,.sector-card{padding:18px}
  .regime-score{font-size:38px}
  .watch-heading{display:block}
  .filter-tabs{margin-top:12px}
  /* 이름 칸이 한 줄로 줄어든 만큼 행 간격도 좁힌다(형님 지적) */
  .tk-row{grid-template-columns:52px minmax(0,1fr) 54px auto 56px;padding:8px 12px;gap:7px}
  .tk-nm b{font-size:13.5px}
  .tk-live{font-size:12px}
  .tk-when i{font-size:9.5px;margin-top:1px}
  .tk-row em{font-size:13.5px}
  .movers-table td,.movers-table thead th{padding:10px 8px;font-size:13.5px}
  .ticker-avatar{width:32px;height:32px;font-size:9.5px}
}
@media(max-width:640px){
  /* 1fr = minmax(auto,1fr) 이라 가장 긴 종목명(예: 체크 포인트 소프트웨어 테크놀로지스)의
     min-content 만큼 칸이 벌어져 문서가 화면보다 넓어졌다 — 모바일에서 가로로 밀리고
     오른쪽에 흰 띠가 생겼다. minmax(0,1fr) 로 칸을 가두면 .v-nm b 의 ellipsis 가 동작한다. */
  .verdict-list{grid-template-columns:minmax(0,1fr)}
  .watch-card{flex-basis:calc((100% - 10px)/2)}
  .wc-arrow{display:none}
  .rg-movers{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:430px){
  .movers-table .volume-cell:nth-last-child(2){display:none}
  .movers-table thead th:nth-last-child(2){display:none}
}

/* ── 모바일 헤더: 항목이 많아 375px를 넘긴다. 라벨을 아이콘만 남기고 압축 ── */
@media(max-width:520px){
  .header-inner{gap:6px;padding:0 12px}
  .brand{font-size:20px}.brand-star{font-size:17px}
  .header-actions{gap:4px}
  .hd-link{padding:7px 9px;font-size:12.5px;gap:0}
  .hd-link .lbl{display:none}          /* '히트맵'·'관심' 글자는 숨기고 기호만 */
  .login-button{padding:7px 11px;font-size:13px}
  .menu-button{width:32px;height:32px;padding:7px;margin-left:2px}
  .me{font-size:12.5px}
}

/* ── 모바일 movers 표: 6컬럼은 375px에 안 들어간다 ── */
.table-verdict{white-space:nowrap}
@media(max-width:720px){
  /* 제목과 정렬탭이 한 줄에 있으면 제목이 깨진다 → 세로로 */
  .section-heading:has(.mover-tabs){display:block}
  .section-heading:has(.mover-tabs) .mover-tabs{margin-top:12px}
}
@media(max-width:520px){
  /* 거래대금·거래량은 숨기고 핵심 4컬럼만 (종목·현재가·등락·판정) */
  .movers-table td.volume-cell,
  .movers-table thead th:nth-child(4),
  .movers-table thead th:nth-child(5){display:none}
  .movers-table td,.movers-table thead th{padding:10px 7px;font-size:13px}
  .movers-table thead th:last-child{text-align:right}
  .table-verdict{padding:4px 8px;font-size:11px;float:none}
  .number-cell{font-size:13px}
  .stock-cell{gap:8px}
  .stock-cell b{font-size:13.5px}
  .ticker-avatar{width:28px;height:28px;font-size:9px}
  .usd{display:block;margin-left:0;font-size:10.5px}
}

/* ══ 이번 달 모멘텀 순위 ══
   '추천'이 아니라 '순위표'다. 등락률만 크게 보여주고 판정 배지는 붙이지 않는다. */
.mm-cap{margin:-4px 0 14px;font-size:14px;line-height:1.6;color:var(--faint)}
.mm-cap b{color:var(--muted)}
.mm-list{border:1px solid var(--line);border-radius:var(--r-lg);background:var(--card);
  overflow:hidden;box-shadow:var(--shadow)}
.mm-row{display:flex;align-items:center;gap:10px;padding:13px 16px;text-decoration:none;
  color:inherit;border-top:1px solid var(--line)}
/* 순위·수익률만으로는 지금 어떤 모양인지 알 수 없어 미니차트와 현재가를 같이 둔다.
   이름 칸이 줄어들 수 있어야(min-width:0) 긴 한글 이름이 줄을 밀지 않는다. */
.mm-nm{flex:1 1 auto;min-width:0}
.mm-sp{flex:0 0 62px;min-width:0}
.mm-sp svg{display:block;width:100%;height:24px;overflow:visible}
.mm-px{flex:0 0 auto;font:700 12.5px var(--mono);color:var(--ink);text-align:right;white-space:nowrap}
.mm-px em{display:block;font-style:normal;font-size:10.5px;font-weight:700;margin-top:1px}
.mm-px em.up{color:var(--up)} .mm-px em.down{color:var(--down)}
/* 지연 시세가 없어 빌드 가격을 쓴 종목 표시 — 오늘 등락률과 헷갈리면 안 된다 */
.mm-px em.mm-old{color:var(--faint);font-weight:600}
@media(max-width:640px){
  .mm-row{gap:7px;padding:11px 12px}
  .mm-sp{flex-basis:46px}
  .mm-sp svg{height:20px}
  .mm-px{font-size:11.5px}
}
.mm-row:first-child{border-top:0}
.mm-row:hover{background:var(--surface)}
.mm-rk{flex:none;width:20px;font-size:14px;font-weight:700;color:var(--faint)}
.mm-nm{flex:1;min-width:0;display:flex;align-items:baseline;gap:7px;flex-wrap:wrap}
.mm-nm b{font-size:16px;font-weight:700;letter-spacing:-.02em}
.mm-nm em{font-style:normal;font-size:13px;color:var(--faint)}
.mm-off{font-style:normal;font-size:11px;color:var(--muted);
  border:1px solid var(--line-strong);border-radius:999px;padding:1px 7px}
.mm-rt{flex:none;font-size:15.5px;font-weight:800;color:var(--up);
  font-variant-numeric:tabular-nums;white-space:nowrap}
.mm-empty{padding:22px;text-align:center;color:var(--faint);font-size:14.5px}
@media(max-width:520px){
  .mm-row{padding:12px 13px;gap:9px}
  .mm-nm b{font-size:15px}
  .mm-rt{font-size:14.5px}
}

/* ══ 전략 메뉴 강조 ══
   뉴스·경제 같은 일반 메뉴와 우리 전략 3개를 구분한다.
   전략이 제품의 본체이므로 시각적으로 먼저 읽혀야 한다. */
.desktop-nav .nav-hl{color:var(--primary);font-weight:700}
.desktop-nav .nav-hl::before{content:"";display:inline-block;width:5px;height:5px;
  margin-right:6px;border-radius:999px;background:var(--secondary);vertical-align:middle}
.nav-sep{flex:none;width:1px;height:16px;background:var(--line-strong);margin:0 4px}
.mobile-nav .nav-hl{color:var(--primary);font-weight:700}
.mobile-nav .nav-hl::before{content:"●";color:var(--secondary);font-size:9px;
  margin-right:7px;vertical-align:middle}

/* ══ 로그인 시트 ══
   "로그인하세요"만 있으면 왜 해야 하는지 알 수 없다.
   로그인 없이도 대부분을 쓸 수 있다는 사실과, 계정으로 얻는 것을 함께 보여준다. */
.login-sheet{text-align:left}
.lg-mark{width:46px;height:46px;margin:0 0 14px;display:grid;place-items:center;
  border-radius:14px;background:var(--primary)}
.lg-mark span{color:var(--secondary-soft);font-size:24.5px;line-height:1}
.login-sheet h2{font-size:23.5px;font-weight:800;letter-spacing:-.03em}
.login-sub{margin:8px 0 16px}
.login-sub b{color:var(--ink)}
.lg-perks{list-style:none;margin:0 0 18px;padding:0;display:grid;gap:10px}
.lg-perks li{display:flex;align-items:flex-start;gap:11px}
.lg-perks i{flex:none;width:30px;height:30px;display:grid;place-items:center;font-style:normal;
  font-size:15.5px;border-radius:9px;background:var(--surface);color:var(--secondary)}
.lg-perks b{display:block;font-size:15px;font-weight:700;letter-spacing:-.01em}
.lg-perks span{display:block;margin-top:1px;font-size:13px;color:var(--faint);line-height:1.5}
.lg-step{margin:0 0 10px;font-size:14.5px;color:var(--muted);line-height:1.6}
.lg-primary{width:100%;padding:13px;border:0;border-radius:var(--r);cursor:pointer;
  background:var(--primary);color:var(--on-primary);font-size:15.5px;font-weight:700}
.lg-primary:hover{opacity:.88}
.lg-legal{margin:14px 0 0;padding-top:13px;border-top:1px solid var(--line);
  font-size:12.5px;line-height:1.7;color:var(--faint)}
.lg-legal a{color:var(--secondary);text-decoration:none}
.login-x{margin-top:10px}
#nickInput{width:100%;padding:12px 13px;border:1px solid var(--line-strong);border-radius:var(--r);
  background:var(--card);color:var(--ink);font-size:15.5px;margin-bottom:10px}
#nickInput:focus{outline:none;border-color:var(--secondary)}

/* CODEX 2026-08-09: 홈을 '오늘 시장 → 관찰종목 → 신호 → 시세 → 전체 판정'의
   단순한 흐름으로 재편한다. 새 요약 영역은 장식용 그림자 없이 선과 여백으로만 구분한다. */
.site-header{height:62px;background:rgba(252,248,250,.96)}
.header-inner{max-width:1120px;height:62px;gap:24px}
/* 2026-08-23: 메뉴가 17개로 늘어 1280px 한 줄에 안 들어갔다.
   ⚠️ 이 규칙이 위(106행)의 설정을 덮는다 — 같은 선택자를 두 군데 두면
   나중 것만 살아남는다. 값은 **여기서** 관리한다. */
.desktop-nav{gap:12px}
.desktop-nav a{padding:12px 0;font-size:13.5px}
@media(min-width:1400px){.desktop-nav{gap:20px}.desktop-nav a{font-size:14.5px}}
.page-shell{max-width:1120px}
.home-intro{display:flex;align-items:flex-end;justify-content:space-between;gap:32px;
  padding:42px 0 26px;border-bottom:1px solid var(--line)}
.home-intro h1{margin:6px 0 12px;font-size:38px;line-height:1.22;font-weight:800;
  letter-spacing:-.055em;text-wrap:balance}
.home-intro h1 span{color:var(--secondary)}
.home-intro>div>p:last-child{margin:0;color:var(--muted);font-size:14.5px}
.home-intro>div>p:last-child b,.home-intro>div>p:last-child strong{color:var(--ink)}
.home-intro>a{flex:none;display:inline-flex;align-items:center;gap:18px;padding:10px 15px;
  border:1px solid var(--line-strong);border-radius:10px;background:var(--card);color:var(--ink);
  text-decoration:none;font-size:13.5px;font-weight:700}
.home-intro>a:hover{border-color:var(--ink)}
.search-section{margin:18px 0 4px}
.search-box{height:54px;padding:0 18px;border:1px solid var(--line-strong);border-radius:12px;
  background:var(--card);box-shadow:none}
.search-box:focus-within{border-color:var(--secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--secondary) 10%,transparent)}
.search-box input{font-size:16px}
.section{margin-top:34px}
.section-heading{margin-bottom:12px}
.section-heading h2{font-size:22px}
.home-market-grid{display:grid;grid-template-columns:minmax(0,1.35fr) minmax(280px,.65fr);gap:10px}
.home-market-grid .market-card{box-shadow:none}
.home-market-grid .market-card:hover{box-shadow:none}
.home-regime{padding:17px 18px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card)}
.home-regime>div:first-child{display:flex;align-items:baseline;justify-content:space-between;gap:12px}
.home-regime>div:first-child>span{color:var(--faint);font-size:12px;font-weight:700}
.home-regime>div:first-child>strong{font:800 28px/1 var(--mono);color:var(--ink)}
.home-regime>div:first-child small{margin-left:2px;color:var(--faint);font-size:12px;font-weight:600}
.home-regime h3{margin:10px 0 4px;font-size:18px;line-height:1.35}
.home-regime>p{margin:0;color:var(--muted);font-size:12.5px;line-height:1.55}
.home-regime .metric-row{gap:5px;margin-top:12px}
.home-regime .metric-row>div{padding:8px 9px;border-radius:8px;background:var(--surface)}
.home-regime .metric-row span{color:var(--faint);font-size:10.5px}
.home-regime .metric-row b{margin-top:2px;color:var(--ink);font-size:13px}
.home-shortcuts{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:7px;margin-top:9px}
.home-shortcuts a{padding:9px 10px;border:1px solid var(--line);border-radius:9px;background:var(--card);
  color:var(--muted);text-align:center;text-decoration:none;font-size:12.5px;font-weight:700}
.home-shortcuts a:hover{border-color:var(--secondary);color:var(--secondary)}
.home-chart{margin-top:12px}
/* CODEX 2026-08-09: 오늘 시장 바로 아래에 배치하는 큰 자체 캔들차트. */
.pmc{border:1px solid var(--line);border-radius:var(--r);background:var(--card);overflow:hidden}
.pmc-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px;
  padding:14px 16px 11px;border-bottom:1px solid var(--line)}
.pmc-title b{display:block;font-size:17px}.pmc-title span{display:block;margin-top:2px;
  color:var(--faint);font:600 11px var(--mono)}
.pmc-ohlc{color:var(--muted);font:700 11px/1.65 var(--mono);text-align:right}
.pmc-tools{display:flex;align-items:center;gap:7px;flex-wrap:wrap;padding:9px 12px;
  border-bottom:1px solid var(--line);background:var(--surface)}
.pmc-mobile-tools{display:none}
.pmc-group{display:flex;gap:4px;padding-right:7px;border-right:1px solid var(--line)}
.pmc-group:last-child{padding-right:0;border-right:0}
.pmc-btn{padding:6px 9px;border:1px solid transparent;border-radius:7px;background:transparent;
  color:var(--muted);font:700 12px var(--sans);white-space:nowrap;cursor:pointer}
.pmc-btn:hover{border-color:var(--line);color:var(--ink)}
.pmc-btn[aria-pressed="true"]{border-color:var(--line);background:var(--card);color:var(--ink)}
/* CODEX 2026-08-11: 거래량 고정 패널과 선택 보조지표 패널을 서로 분리한다. */
.pmc-fixed-indicator{display:inline-flex;align-items:center;padding:6px 8px;color:var(--faint);
  font:750 11.5px var(--sans);white-space:nowrap}
.pmc-sub-select{max-width:220px;height:34px;padding:0 28px 0 9px;border:1px solid var(--line);
  border-radius:8px;background:var(--card);color:var(--ink);font:750 11.5px var(--sans)}
/* 캔들·거래량·독립 RSI·x축 라벨이 모두 들어가도록 높이를 확보한다. */
/* 2026-08-12: 세로로 쓸면 페이지가 내려가고, 가로로 쓸면 차트가 움직인다.
   touch-action 을 안 주면 KLineChart 가 세로 제스처까지 먹어서, 차트가 화면을
   거의 다 채우는 홈에서는 좌우 얇은 여백으로만 스크롤이 됐다(지적됨). */
.pmc-canvas{position:relative;width:100%;height:720px;background:var(--card);touch-action:pan-y}
.pmc-canvas canvas{touch-action:pan-y!important}
.pmc-state{display:grid;place-items:center;height:100%;min-height:320px;padding:24px;
  color:var(--muted);font-size:14px;text-align:center}
.pmc-note{margin-top:10px;margin:0;padding:9px 14px 12px;border-top:1px solid var(--line);
  color:var(--faint);font-size:11.5px;line-height:1.6}
.watch-card,.mm-list,.movers-table-wrap,.verdict-card{box-shadow:none}
.site-footer{margin-top:40px}
.footer-inner{max-width:1120px;padding-top:26px}

@media(max-width:820px){
  .site-header{height:58px}
  .header-inner{height:58px}
  .menu-button,.mobile-nav{display:none}
  .home-intro{padding:30px 0 22px}
  .home-intro h1{font-size:31px}
  .home-market-grid{grid-template-columns:minmax(0,1fr)}
}
@media(max-width:520px){
  .page-shell{padding-left:12px;padding-right:12px}
  .home-intro{display:block;padding:24px 0 18px}
  .home-intro h1{font-size:27px;line-height:1.25}
  .home-intro>div>p:last-child{font-size:13px}
  .home-intro>a{margin-top:16px;padding:8px 12px;font-size:12.5px}
  .search-section{margin-top:14px}
  .search-box{height:50px;padding:0 15px}
  .search-box input{font-size:15px}
  .search-box kbd{display:none}
  .section{margin-top:28px}
  .section-heading h2{font-size:20px}
  .home-shortcuts{gap:5px}
  .home-shortcuts a{padding:8px 2px;font-size:11.5px;letter-spacing:-.04em}
  .home-regime{padding:15px}
  .pmc-head{display:block;padding:12px}
  .pmc-ohlc{margin-top:7px;text-align:left;font-size:10px}
  .pmc-tools{display:none}
  .pmc-mobile-tools{display:block;border-bottom:1px solid var(--line);background:var(--surface)}
  .pmc-mobile-row{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:5px;padding:8px}
  .pmc-menu{display:flex;align-items:center;justify-content:center;gap:5px;min-width:0;
    padding:8px 3px;border:1px solid var(--line);border-radius:8px;background:var(--card);
    color:var(--ink);font:700 11.5px var(--sans);white-space:nowrap;cursor:pointer}
  .pmc-menu i{width:6px;height:6px;border-right:1.5px solid currentColor;
    border-bottom:1.5px solid currentColor;transform:rotate(45deg) translateY(-2px)}
  .pmc-menu[aria-expanded="true"]{border-color:var(--secondary);color:var(--secondary)}
  .pmc-menu[aria-expanded="true"] i{transform:rotate(225deg) translate(-1px,-1px)}
  .pmc-pop{display:flex;align-items:center;gap:5px;overflow-x:auto;padding:0 8px 8px;
    scrollbar-width:none}.pmc-pop::-webkit-scrollbar{display:none}.pmc-pop[hidden]{display:none}
  .pmc-pop .pmc-btn{flex:1 0 auto;min-width:60px;border-color:var(--line);background:var(--card)}
  /* CODEX 2026-08-11: 보조지표 22개를 가로 스크롤하지 않고 4열 펼침 메뉴로 표시한다. */
  .pmc-pop[data-pmc-pop="sub"]{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));
    align-items:stretch;gap:5px;overflow:visible;max-height:260px;padding:0 8px 8px}
  .pmc-pop[data-pmc-pop="sub"][hidden]{display:none}
  .pmc-pop[data-pmc-pop="sub"] .pmc-btn{display:block;min-width:0;padding:7px 3px;text-align:left}
  .pmc-pop[data-pmc-pop="sub"] .pmc-btn b,.pmc-pop[data-pmc-pop="sub"] .pmc-btn small{display:block;
    overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .pmc-pop[data-pmc-pop="sub"] .pmc-btn b{font-size:10.5px}.pmc-pop[data-pmc-pop="sub"] .pmc-btn small{margin-top:2px;color:var(--faint);font-size:8.5px}
  .pmc-canvas{height:590px}
}

/* CODEX 2026-08-09: 확정된 이미지젠 홈 A를 실제 모바일 홈에 적용한다.
   첫 화면의 순서를 로고 → 한 줄 시장 요약 → 검색 → 지수 3개 → 큰 차트로 압축한다. */
.site-header .brand>span:last-child{display:flex;flex-direction:column;align-items:flex-start;color:var(--secondary);
  font-size:10px;font-weight:800;line-height:1.05;letter-spacing:-.02em}
.site-header .brand>span:last-child::before{content:"POLARIS";color:var(--secondary);font-size:19px;
  font-weight:800;line-height:1;letter-spacing:.01em}

@media(max-width:520px){
  .site-header,.header-inner{height:62px}
  .header-inner{padding:0 14px;gap:7px}
  .brand{flex:0 0 auto;gap:7px;min-width:0}
  .brand-star{font-size:23px}
  .site-header .brand>span:last-child{font-size:9px}
  .site-header .brand>span:last-child::before{font-size:18px}
  .header-actions>.hd-link{display:none}
  .header-actions>.login-button{padding:6px 7px;border-radius:0;background:transparent;color:var(--ink);font-size:13px}
  .header-actions .me button{display:none}
  .header-actions .me .me-btn{padding:5px 7px}
  /* CODEX 2026-08-10: 로고·광고·계정·햄버거를 390px 한 줄 안에 정돈한다. */
  .header-ad-slot{display:flex;flex:none;align-items:center;margin-left:auto;padding:5px;
    border:1px solid var(--line);border-radius:6px;color:var(--muted);background:var(--panel)}
  /* CODEX 2026-08-10: 390px에서 로고가 눌리지 않도록 헤더 광고는 AD 표식만 남긴다. */
  .header-ad-slot span{font-size:7px;color:var(--secondary);font-weight:800}.header-ad-slot b{display:none}
  .header-actions{margin-left:0;gap:2px}

  .page-shell{padding-left:14px;padding-right:14px}
  /* CODEX 2026-08-10: 요청대로 모바일 첫 화면의 중복 시장 문구를 없애 검색부터 보여준다. */
  .home-intro{display:none}
  .home-intro .section-kicker,.home-intro>div>p:last-child,.home-intro>a{display:none}
  .home-intro h1{margin:0;font-size:21px;line-height:1.35;font-weight:750;letter-spacing:-.04em;white-space:nowrap}
  .home-intro h1 br{display:none}
  .home-intro h1 span{color:var(--ink)}

  .search-section{margin:10px 0 0}
  /* 검색칸은 홈에서 가장 많이 쓰는 입력이다. 테두리를 강조색으로 두껍게 줘서
   지수 카드와 차트 사이에서 눈에 먼저 들어오게 한다 (2026-08-10 요청). */
.search-box{height:52px;padding:0 15px;border:2px solid var(--secondary);border-radius:11px;
  background:var(--card);box-shadow:0 0 0 3px color-mix(in srgb,var(--secondary) 12%,transparent)}
.search-box:focus-within{border-color:var(--secondary);
  box-shadow:0 0 0 4px color-mix(in srgb,var(--secondary) 20%,transparent)}
  .search-box:focus-within{border-color:var(--secondary);box-shadow:0 0 0 3px color-mix(in srgb,var(--secondary) 10%,transparent)}
  .search-box input{font-size:14.5px;font-weight:500}
  .search-icon{width:17px;height:17px;border-width:2px}

  #market{margin-top:12px}
  #market>.section-heading{display:none}
  .home-market-grid{display:block}
  .market-cards{grid-template-columns:repeat(3,minmax(0,1fr));gap:0;border:1px solid var(--line);border-radius:9px;background:var(--card);overflow:hidden}
  .market-card{padding:8px 8px 7px;border:0;border-right:1px solid var(--line);border-radius:0;background:transparent;box-shadow:none}
  .market-card:last-child{border-right:0}
  .market-card span{font-size:9.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .market-card strong{margin-top:3px;font-size:15px;line-height:1.2;white-space:nowrap}
  .market-card em{margin-top:2px;font-size:9.5px;white-space:nowrap}
  .market-card small{display:none}
  .mk-spark{height:18px;margin-top:4px}
  .home-regime{display:none}

  .home-chart{margin-top:12px;border-radius:9px}
  .pmc-head{display:flex;align-items:flex-start;padding:10px 11px 8px}
  .pmc-title b{font-size:15px}
  .pmc-title span{margin-top:0;font-size:9.5px}
  .pmc-ohlc{display:none}
  .pmc-mobile-row{gap:4px;padding:6px}
  .pmc-menu{min-height:34px;padding:6px 2px;font-size:10.5px;border-radius:6px}
  .pmc-pop{padding:0 6px 6px}
  .pmc-canvas{height:560px}
  .pmc-note{display:none}
  .watch-ad-slot{min-height:52px;margin-top:10px;padding:9px 11px}
  .watch-ad-slot>b{font-size:12px}.watch-ad-slot>small{font-size:10px}
}


/* ══ 관찰종목 아래 안내 카드 ══
   광고주가 없을 때 빈 광고 문구가 놓여 있던 자리. 홈의 다른 카드와 같은 문법으로
   ([작은 라벨] / 큰 제목 + 숫자 / 설명) 맞춰 겉돌지 않게 한다 (2026-08-10). */
.slot-card{position:relative;margin-top:14px;border:1px solid var(--line);border-radius:var(--r);
  background:var(--card);box-shadow:var(--shadow);overflow:hidden;transition:.18s}
.slot-card:hover{box-shadow:var(--shadow-lg);border-color:var(--secondary)}
.slot-view{position:relative;min-height:84px}
.slot-item{position:absolute;inset:0;display:flex;align-items:center;gap:14px;
  padding:16px 18px;text-decoration:none;color:inherit;
  opacity:0;transform:translateY(6px);transition:opacity .4s,transform .4s;pointer-events:none}
.slot-item.on{position:relative;opacity:1;transform:none;pointer-events:auto}
.slot-txt{flex:1 1 auto;min-width:0}
.slot-kicker{display:block;font-style:normal;font-size:11px;font-weight:800;letter-spacing:.1em;
  color:var(--faint)}
.slot-title{display:flex;align-items:baseline;gap:8px;margin-top:5px;
  font-size:18px;font-weight:800;letter-spacing:-.02em;color:var(--ink)}
.slot-title i{font-style:normal;font:800 15px var(--mono);color:var(--secondary)}
.slot-desc{display:block;margin-top:4px;color:var(--muted);font-size:12.5px;
  overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.slot-go{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;
  background:var(--surface);color:var(--muted);font-size:15px}
.slot-card:hover .slot-go{background:var(--secondary);color:#fff}
.slot-dots{position:absolute;right:14px;bottom:10px;display:flex;gap:5px}
.slot-dots button{width:5px;height:5px;padding:0;border:0;border-radius:50%;
  background:var(--line-strong);cursor:pointer}
.slot-dots button.on{width:16px;border-radius:3px;background:var(--secondary)}
@media(max-width:640px){
  .slot-view{min-height:78px}
  .slot-item{padding:14px 15px;gap:10px}
  .slot-title{font-size:16px}
  .slot-title i{font-size:13.5px}
  .slot-desc{font-size:11.5px}
}

/* 2026-08-25: 차트 지표를 접이식 두 그룹으로 묶는다(사장님 지시).
   예전엔 보조지표 22개가 평면으로 깔려 도구줄이 화면 절반을 먹었다.
   기본은 접어 두고, 고른 개수를 제목 옆에 적어 열지 않아도 알 수 있게 한다. */
.pmc-fold{margin:6px 0 0;border:1px solid var(--line);border-radius:10px;background:var(--card)}
.pmc-fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;
  padding:9px 12px;font-size:13px;color:var(--muted)}
.pmc-fold>summary::-webkit-details-marker{display:none}
.pmc-fold>summary::after{content:"▾";margin-left:auto;color:var(--faint)}
.pmc-fold[open]>summary::after{content:"▴"}
.pmc-fold>summary b{color:var(--text);font-size:13.5px}
.pmc-fold>summary em{font-style:normal;font-size:11.5px;color:var(--faint)}
.pmc-fold [data-fold-count]{font:700 11.5px var(--mono);color:var(--primary)}
.pmc-fold .pmc-pick-row{display:flex;flex-wrap:wrap;gap:6px;padding:0 12px 12px}