/* TADPOLE SCANNER — 공용 스타일. 다크 기본 / 라이트는 [data-theme=light]. 외부 파일 참조 없음. */
:root {
  --bg: #000F0F; --panel: #11151d; --panel2: #161b25; --line: rgba(255,255,255,.08); --line-soft: rgba(255,255,255,.04);
  --text: #e6e9ef; --muted: #8b93a3; --accent: #4CAF50; --accent-2: #66BB6A; --red: #ef5350; --green: #4CAF50; --amber: #d9a441;
  --chip: #161b25; --chip-on: rgba(76,175,80,.16); --row-hover: rgba(255,255,255,.03); --radius: 10px; --shadow: 0 8px 30px rgba(0,0,0,.35);
  --scroll: rgba(255,255,255,.14);
  --wm-fill: #ffffff; --wm-line: #1F403E;   /* 워드마크: 흰 채움 + 딥틸 테두리 */
}
[data-theme="light"] {
  --bg: #f6f7f9; --panel: #ffffff; --panel2: #f0f2f5; --line: rgba(0,0,0,.1); --line-soft: rgba(0,0,0,.05);
  --text: #1c2130; --muted: #6b7280; --accent: #43A047; --accent-2: #2E7D32; --red: #d93025; --green: #2E7D32; --amber: #b7791f;
  --chip: #f0f2f5; --chip-on: rgba(67,160,71,.12); --row-hover: rgba(0,0,0,.03); --shadow: 0 8px 30px rgba(0,0,0,.08);
  --scroll: rgba(0,0,0,.18);
}
* { margin: 0; padding: 0; box-sizing: border-box; }
[hidden] { display: none !important; }   /* display:flex 등 클래스 스타일이 hidden 속성을 이기지 않게 */
/* 글꼴: 영문·숫자는 Segoe UI(시스템), 한글은 Pretendard. Mac 등 Segoe가 없으면 전부 Pretendard */
/* 바탕은 전 페이지 한 가지 채움색. 예전엔 아래로 갈수록 가라앉는 그라데이션이었는데, 페이지마다 색이 달라 보여 평평하게 통일했다(2026-09-27) */
body { background: var(--bg); color: var(--text); font-family: 'Segoe UI', 'Pretendard Variable', Pretendard, -apple-system, system-ui, sans-serif; font-size: 14px; line-height: 1.55; -webkit-font-smoothing: antialiased; }
a { color: inherit; text-decoration: none; } button, input, select { font-family: inherit; } button { cursor: pointer; color: inherit; }
.container { width: 100%; padding: 0 20px; }   /* 전체 폭 사용(창 크기 무관) */
.pos { color: var(--green); } .neg { color: var(--red); } .muted { color: var(--muted); } .warn { color: var(--amber); }
.num { font-variant-numeric: tabular-nums; }
/* 스크롤바: 기본 회색 막대는 촌스럽다. 평소엔 거의 안 보이다 손이 닿으면 브랜드 색으로 */
* { scrollbar-width: thin; scrollbar-color: var(--scroll) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: var(--scroll); border-radius: 999px; border: 2px solid transparent; background-clip: padding-box; }
::-webkit-scrollbar-thumb:hover { background: var(--accent); background-clip: padding-box; }
::-webkit-scrollbar-corner { background: transparent; }

/* 헤더 */
.site-header { position: sticky; top: 0; z-index: 50; background: var(--bg); }
.main-nav { position: relative; }
.main-nav a { position: relative; z-index: 1; transition: color .15s; background: none !important; }
/* 미끄러지는 활성 표시 — 검색란과 같은 알약 모양·같은 바탕색 */
.nav-ind { position: absolute; left: 0; top: 0; border-radius: 999px; background: var(--panel2); z-index: 0; pointer-events: none; opacity: 0; }
/* 통합 검색(헤더) */
/* 검색은 메뉴 옆이 아니라 헤더 한가운데. 메뉴 글자 수가 바뀌어도 자리가 흔들리지 않는다 */
.gsearch { position: absolute; left: 50%; transform: translateX(-50%); display: flex; align-items: center; color: var(--muted); }
.gsearch svg { position: absolute; left: 15px; pointer-events: none; }
.gsearch .input { width: 460px; height: 40px; padding: 0 16px 0 38px; font-size: 14px; background: var(--panel2); border-color: transparent; border-radius: 999px; }
.gsearch .input:focus { border-color: transparent; }   /* 탭해도 테두리가 생기지 않는다 */
.gsearch .input::placeholder { color: var(--muted); opacity: 1; }   /* 힌트 글자를 돋보기 아이콘과 같은 색으로 */
.gs-menu { position: absolute; top: 46px; left: 0; width: 380px; max-height: 420px; overflow: auto; z-index: 80; }
.gs-head { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; padding: 6px 10px 2px; }
.gs-item { display: flex; align-items: center; gap: 8px; padding: 7px 10px; border-radius: 6px; font-size: 13px; color: var(--text); }
.gs-item .muted { font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; }
.gs-item:hover, .gs-item.on { background: var(--panel2); }
.gs-tag { font-size: 10.5px; font-weight: 800; color: var(--accent-2); background: var(--chip-on); border-radius: 5px; padding: 2px 6px; white-space: nowrap; }
.gs-empty { padding: 10px; color: var(--muted); font-size: 12.5px; }
.field-dd { display: inline-flex; flex-direction: column; gap: 3px; }
.field-dd .cap { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; padding-left: 2px; }
.theme-toggle { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; color: var(--muted); }
/* 해/달 토글 */
.theme-switch { position: relative; display: inline-flex; align-items: center; width: 64px; height: 32px; border-radius: 999px; background: var(--panel2); border: none; padding: 0; margin-right: 4px; }
.theme-switch .ico { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); z-index: 1; }
.theme-switch .ico svg { width: 16px; height: 16px; display: block; }
.theme-switch .knob { position: absolute; top: 3px; left: 3px; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); transition: transform .2s cubic-bezier(.4,0,.2,1); }
.theme-switch.on .knob { transform: translateX(32px); }
.theme-switch:not(.on) .ico:first-child, .theme-switch.on .ico:nth-child(2) { color: #fff; }
.dd.xl { padding: 6px 12px 6px 14px; font-size: 15px; }   /* 글자만 크고 여백은 그대로 */
.dd.sm { padding: 5px 9px 5px 11px; font-size: 12.5px; }
/* 설정: 페이지로 가지 않고 그 자리에서 열리는 드롭다운 */
.nav-menu { position: relative; display: inline-flex; }
.icon-btn.gear { display: inline-flex; align-items: center; }
.icon-btn.gear[aria-expanded="true"], .nav-right .icon-btn.help.on { color: var(--text); background: var(--panel2); }
.popover.menu.nav-pop { position: absolute; top: 46px; right: 0; left: auto; min-width: 200px; padding: 6px; }
.nav-pop .nm-head { display: grid; gap: 7px; justify-items: start; padding: 8px 10px 8px; font-size: 12px; color: var(--muted); }
.nav-pop .nm-head .em { max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.nav-pop .nm-label { padding: 8px 10px 4px; font-size: 11px; font-weight: 700; letter-spacing: .04em; color: var(--muted); }
.nav-pop hr { border: 0; border-top: 1px solid var(--line); margin: 5px 4px; }
/* 드롭다운(버튼과 같은 모양) */
/* 드롭다운은 필터 칩과 같은 알약 한 모양으로 통일한다(마켓·거래소·시간대·기간·필터).
   여백도 칩과 같은 비율 — 예전엔 모서리 8px에 여백이 과해 글자에 비해 알약만 컸다 */
.dd { display: inline-flex; align-items: center; gap: 7px; background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 5px 10px 5px 12px; font-size: 12.5px; font-weight: 700; color: var(--text); }
.dd:hover { border-color: var(--muted); }
.dd .caret { color: var(--muted); font-size: 11px; }
.dd .dd-cap { color: var(--muted); font-weight: 600; }   /* 알약 안의 앞말 — 밖에 라벨을 따로 두지 않기 위해 */
.dd.lg { padding: 8px 12px 8px 14px; font-size: 13.5px; }
.dd.chip-dd { border-radius: 999px; padding: 5px 10px 5px 12px; }
.dd .ex-logo, .menu .ex-logo { width: 16px; height: 16px; vertical-align: -3px; margin-right: 6px; }
.popover.menu { padding: 6px; min-width: 160px; }
.popover.menu button { display: block; width: 100%; text-align: left; background: none; border: none; border-radius: 6px; padding: 8px 10px; font-size: 13px; font-weight: 600; color: var(--text); }
.popover.menu button:hover { background: var(--panel2); }
.popover.menu button.on { color: var(--accent-2); background: var(--chip-on); }
.popover.menu button:disabled { opacity: .45; cursor: not-allowed; }
.live { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; color: var(--muted); margin-right: 6px; cursor: default; }
.header-inner { position: relative; display: flex; align-items: center; gap: 26px; height: 64px; }
/* 워드마크: 흰 글자에 딥틸 테두리. paint-order로 테두리를 글자 뒤에 깔아야 획이 얇아지지 않는다 */
.wordmark { font-weight: 800; letter-spacing: .06em; font-size: 18px; white-space: nowrap; color: var(--wm-fill); -webkit-text-stroke: 1px var(--wm-line); paint-order: stroke fill; }
.wordmark .accent { color: inherit; }
/* 라이트 테마에선 흰 글자가 안 보인다 → 테두리색을 글자색으로 쓴다. 요금 페이지는 테마와 무관하게 늘 다크라 제외 */
[data-theme="light"] body:not([data-page="pricing"]) .wordmark { color: #1F403E; -webkit-text-stroke-width: 0; }
.main-nav { display: flex; gap: 4px; align-items: center; }
/* 활성·호버는 초록이 아니라 흰색으로 — 초록은 로고와 눈(모션)에만 남긴다 */
.main-nav a { color: var(--muted); font-size: 15px; font-weight: 600; padding: 8px 13px; border-radius: 999px; }
.main-nav a:hover, .main-nav a.active { color: var(--text); }
/* 우측 아이콘들: 테두리 없이 크게, 호버는 채움. 높이를 주고 flex로 가운데 맞춤(패딩으로 맞추면 글자가 살짝 위로 뜬다) */
.nav-right { display: flex; gap: 2px; align-items: center; margin-left: auto; }
.nav-right .icon-btn { background: none; border: none; border-radius: 10px; color: var(--muted); font-size: 13.5px; font-weight: 700; height: 38px; min-width: 38px; padding: 0 12px; display: inline-flex; align-items: center; justify-content: center; line-height: 1; }
.nav-right .icon-btn:hover { color: var(--text); background: var(--panel2); }
.nav-right .icon-btn.active { color: var(--accent-2); background: var(--chip-on); }
.icon-btn { background: none; border: 1px solid var(--line); border-radius: 8px; color: var(--muted); font-size: 12px; font-weight: 700; padding: 5px 9px; height: 30px; }
.icon-btn:hover { color: var(--text); border-color: var(--muted); }
.plan-badge { font-size: 10.5px; font-weight: 800; letter-spacing: .06em; padding: 3px 8px; border-radius: 6px; border: 1px solid var(--line); color: var(--muted); }
.plan-badge.pro { border-color: rgba(76,175,80,.5); color: var(--accent-2); background: var(--chip-on); }
.plan-badge.max { border-color: rgba(139,92,246,.5); color: #a78bfa; background: rgba(139,92,246,.12); }

main { padding: 18px 0 64px; }
.card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 18px; }
.card + .card { margin-top: 14px; }
.card h2 { font-size: 15px; font-weight: 700; margin-bottom: 6px; }
.page-title { font-size: 22px; font-weight: 800; margin-bottom: 4px; }
.page-desc { color: var(--muted); font-size: 13px; margin-bottom: 18px; }
.note { color: var(--muted); font-size: 12.5px; }
.note.warn { color: var(--amber); }
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; background: var(--accent); color: #fff; border: none; border-radius: 8px; font-size: 13.5px; font-weight: 700; padding: 9px 16px; }
.btn:hover { background: var(--accent-2); }
.btn.ghost { background: none; border: 1px solid var(--line); color: var(--text); }
.btn.ghost:hover { border-color: var(--accent); color: var(--accent-2); }
.btn.sm { padding: 6px 12px; font-size: 12.5px; }
.btn:disabled { opacity: .45; cursor: not-allowed; }
.input { width: 100%; background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 8px; font-size: 13.5px; padding: 9px 12px; outline: none; }
.input:focus { border-color: var(--accent); }
select.input { appearance: none; }
.lock { font-size: 11px; color: var(--muted); }

/* 시장 요약 띠 */

/* 스크리너 헤더 (유니버스·거래소·TF) */
.screener-head { display: flex; gap: 8px; align-items: flex-end; flex-wrap: wrap; margin-bottom: 14px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.seg button { background: none; border: none; padding: 6px 12px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.seg button.on { background: var(--chip-on); color: var(--accent-2); }
.screener-head .right { margin-left: auto; display: flex; gap: 8px; align-items: center; color: var(--muted); font-size: 12px; }

/* 칩 행 */
.chip-row { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin-bottom: 8px; }
.chip-row .label { font-size: 11.5px; color: var(--muted); font-weight: 700; letter-spacing: .04em; margin: 0 4px 0 10px; }
.chip { background: var(--chip); border: 1px solid var(--line); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; font-weight: 600; color: var(--text); display: inline-flex; align-items: center; gap: 6px; }
.chip:hover { border-color: var(--muted); }
.chip.on { background: var(--chip-on); border-color: var(--accent); color: var(--accent-2); }
.chip.setup { font-weight: 700; }
.chip .x { color: var(--muted); font-size: 11px; }
.chip.add { color: var(--muted); }
.chip.disabled { opacity: .5; }

/* 필터 팝오버 */
.popover { position: absolute; z-index: 60; background: var(--panel); border: 1px solid var(--line); border-radius: 10px; padding: 12px; box-shadow: var(--shadow); min-width: 240px; }
.popover .row { display: flex; gap: 8px; align-items: center; margin-top: 8px; }
.popover .row input { width: 100%; }
.popover .title { font-size: 12.5px; font-weight: 700; }
.popover .actions { display: flex; justify-content: flex-end; gap: 6px; margin-top: 10px; }

/* 컬럼 탭 + 툴바 */
.table-toolbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 2px 0 8px; margin-bottom: 4px; font-size: 12.5px; color: var(--muted); }
.table-toolbar .count { margin-left: 8px; color: var(--text); font-weight: 600; }
.table-toolbar .summary b { color: var(--text); }
.btn.icon { padding: 5px 8px; min-width: 32px; }
.scan-btn { margin-right: 6px; }   /* 필터 행 맨 앞: 스캐너 = 필터 묶음이므로 필터가 시작되는 자리에 */
.scan-btn .caret { color: rgba(255,255,255,.75); }
.btn .caret { color: var(--muted); font-size: 11px; margin-left: 2px; }
.col-tab { background: none; border: none; padding: 6px 10px; font-size: 13px; font-weight: 700; color: var(--muted); border-radius: 8px; }
.col-tab.on { color: var(--text); background: var(--panel2); }
.table-toolbar .right { margin-left: auto; display: flex; gap: 6px; }
.chip.toggle.on { background: var(--chip-on); border-color: var(--accent); color: var(--accent-2); }
.col-sets { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 8px; }

/* 결과표 */
/* 표: TV처럼 창 전체 폭(좌우 테두리 없음), 머리글은 스크롤해도 상단 고정 */
.table-wrap { background: var(--bg); }
#tableView { margin: 0 -20px; }                 /* 스크리너 표는 창 전체 폭 */
#tableView, #cardsView { overflow: auto; }      /* 페이지가 아니라 이 영역이 스크롤(높이는 JS가 창에 맞춤) */
#tableView .sc-table th { top: 0; }
#cardsView { align-content: start; padding-bottom: 8px; }
#tableView th:first-child, #tableView td:first-child { padding-left: 20px; }
#tableView th:last-child, #tableView td:last-child, .watch-table th:last-child, .watch-table td:last-child { padding-right: 20px; }
.sc-table { width: 100%; border-collapse: separate; border-spacing: 0; font-size: 13px; }   /* separate: 고정 머리글의 선이 함께 고정되고, 셀 배경이 머리글 선까지 빈틈 없이 닿음 */
.sc-table th { text-align: right; color: var(--muted); font-size: 11.5px; font-weight: 600; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); padding: 9px 10px; white-space: nowrap; cursor: pointer; user-select: none; position: sticky; top: 54px; background: var(--bg); z-index: 5; }
.sc-table th:first-child, .sc-table td:first-child { text-align: left; }
.sc-table th.sorted { color: var(--text); }
.sc-table th .th-in { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }   /* 라벨 우측 정렬, 화살표는 라벨 바로 왼쪽(종목 열과 같은 간격) */
.sc-table th:first-child .th-in { justify-content: flex-start; }
.sc-table th .sort-ind { display: inline-block; width: 10px; font-size: 10px; visibility: hidden; flex-shrink: 0; }   /* 화살표 칸: 항상 같은 폭 확보 */
.sc-table th.sorted .sort-ind { visibility: visible; color: var(--text); }
.sc-table th:not(.nosort):not(.sorted):hover .sort-ind { visibility: visible; color: var(--muted); }
.sc-table td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: right; white-space: nowrap; }
.sc-table tr:hover td { background: var(--row-hover); }
.sc-table td[data-c] { transition: background-color .7s ease-out; }
.sc-table td.tick-up { background: rgba(38, 166, 154, .22); transition: none; }
.sc-table td.tick-down { background: rgba(239, 83, 80, .22); transition: none; }
.live-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--green); margin-right: 5px; vertical-align: middle; }
.live-dot.off { background: var(--muted); }
.sc-table td.sym { font-weight: 700; }
.sc-table td.sym a { color: var(--text); }
.sc-table td.sym .name { color: var(--muted); font-weight: 500; font-size: 11.5px; margin-left: 6px; }
.sc-table td .star { background: none; border: none; color: var(--muted); font-size: 14px; margin-right: 6px; }
.sc-table td .star.on { color: var(--amber); }
.badge { display: inline-block; font-size: 10.5px; font-weight: 800; padding: 2px 7px; border-radius: 6px; border: 1px solid rgba(76,175,80,.45); color: var(--accent-2); background: var(--chip-on); margin-left: 4px; }
.badge.new { border-color: rgba(76,175,80,.8); }
.link { color: var(--accent-2); font-weight: 700; }
.empty { color: var(--muted); font-size: 13px; padding: 28px 0; text-align: center; }
.rsi-bar { display: inline-block; width: 40px; height: 4px; background: var(--line); border-radius: 2px; margin-left: 6px; vertical-align: middle; position: relative; }
.rsi-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--accent); border-radius: 2px; }

/* Symbol 상세 */
.symbol-head { display: flex; align-items: baseline; gap: 14px; flex-wrap: wrap; margin-bottom: 12px; }
.symbol-head h1 { font-size: 24px; font-weight: 800; }
.symbol-head .price { font-size: 22px; font-weight: 800; }
.symbol-layout { display: grid; grid-template-columns: 1fr 320px; gap: 14px; align-items: start; }
#chart { height: 380px; }
.stat-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; font-size: 13px; }
.stat-grid .k { color: var(--muted); }
.stat-grid .v { text-align: right; font-weight: 700; }

/* Scanner: 기본 스캐너 카드 · 내 스캐너 */
.page-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.block-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.block-head h2 { font-size: 15px; font-weight: 700; }
.preset-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 10px; }
.preset-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px; display: flex; flex-direction: column; gap: 6px; }
.preset-card.fav { border-color: rgba(76,175,80,.45); }
.preset-card .ph { display: flex; justify-content: space-between; align-items: center; font-size: 14px; }
.preset-card .ph .star { background: none; border: none; color: var(--muted); font-size: 15px; }
.preset-card .ph .star.on { color: var(--amber); }
.preset-card .meta { color: var(--muted); font-size: 12px; }
.preset-card .count { font-size: 13px; margin-top: 2px; }
.preset-card .actions { display: flex; gap: 6px; margin-top: auto; padding-top: 8px; align-items: center; }
/* 스캐너 페이지: 보관함 · 상황판 · 포착 기록 · 둘러보기 */
.block { margin-bottom: 26px; }
.block-head .hist-tools { margin-left: auto; display: flex; gap: 6px; align-items: center; }
.preset-card.tap { cursor: pointer; transition: border-color .15s; }
.preset-card.tap:hover { border-color: var(--muted); }
.preset-card.off { opacity: .55; }
.sm-note { font-size: 12px; }
/* 과열 표시 — 조용한 스캐너와 시끄러운 스캐너를 경고 두 개로 나누지 않고 눈금 하나로 */
.heat-tag { font-size: 10.5px; font-weight: 800; letter-spacing: .04em; padding: 2px 7px; border-radius: 999px; border: 1px solid var(--line); color: var(--muted); white-space: nowrap; }
.heat-tag.lv1 { color: var(--accent-2); border-color: rgba(76,175,80,.45); background: var(--chip-on); }
.heat-tag.lv2 { color: var(--amber); border-color: rgba(217,164,65,.45); background: rgba(217,164,65,.12); }
.dup-warn { font-size: 11.5px; color: var(--amber); }
/* 최근 7일 일별 포착 수 — 숫자 하나보다 "돌고 있다"가 이 모양으로 더 잘 읽힌다 */
.spark7 { display: flex; align-items: flex-end; gap: 3px; height: 24px; }
.spark7 i { flex: 1; background: var(--line); border-radius: 2px 2px 0 0; }
.spark7 i:last-child { background: var(--accent); }
.status-row .spark7 { width: 92px; display: inline-flex; vertical-align: middle; margin-left: 8px; }
/* 카드 상세 모달 */
.modal.wide { max-width: 720px; }
.md-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 6px; }
.md-head h2 { margin-top: 6px; }
.md-x { border: none; font-size: 15px; }
.md-desc { color: var(--muted); font-size: 13px; margin-bottom: 10px; }
.md-chips { margin-top: 10px; max-height: 170px; overflow: auto; }
.md-tip { font-size: 12.5px; color: var(--amber); margin-top: 8px; }
/* 조건 만들기 모달 — 요소마다 성격에 맞는 컨트롤(세그먼트·스위치·슬라이더·로그 슬라이더·스테퍼) */
.modal.builder { max-width: 780px; }
.bld-sec { margin-top: 16px; }
.bld-sec h3 { font-size: 13px; font-weight: 800; letter-spacing: .02em; color: var(--muted); margin-bottom: 8px; }
.frow { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding: 6px 0; font-size: 13px; }
.frow > label { width: 116px; flex-shrink: 0; color: var(--muted); font-size: 12.5px; }
.frow .mini, .cond-head .mini { font-size: 12px; color: var(--muted); }
.seg.bld button { padding: 5px 11px; font-size: 12.5px; }
.seg.bld button:disabled { opacity: .35; cursor: not-allowed; }
.vrow { display: inline-flex; align-items: center; gap: 8px; flex: 1; min-width: 200px; }
.vrow input[type=range] { flex: 1; min-width: 90px; accent-color: var(--accent); }
.input.num { width: 92px; padding: 5px 8px; font-size: 12.5px; }
.input.sel { width: auto; padding: 5px 8px; font-size: 12.5px; }
.vtag { font-size: 12px; font-variant-numeric: tabular-nums; min-width: 62px; text-align: right; }
.stepper { display: inline-flex; align-items: center; border: 1px solid var(--line); border-radius: 8px; overflow: hidden; }
.stepper button { background: var(--chip); border: none; color: var(--text); width: 26px; height: 28px; font-size: 14px; }
.stepper button:hover { background: var(--panel2); }
.stepper input { width: 52px; height: 28px; border: none; border-left: 1px solid var(--line); border-right: 1px solid var(--line); background: var(--bg); color: var(--text); text-align: center; font-size: 12.5px; font-family: inherit; }
.cond { border: 1px solid var(--line); border-radius: 10px; padding: 10px 12px; margin-bottom: 8px; background: var(--bg); }
.cond-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; padding-bottom: 6px; border-bottom: 1px solid var(--line-soft); }
.cond-head .del { margin-left: auto; }
.cond-head .cno { width: 20px; height: 20px; border-radius: 50%; background: var(--chip); color: var(--muted); font-size: 11px; font-weight: 800; display: inline-flex; align-items: center; justify-content: center; flex-shrink: 0; }
.cond-body { padding-top: 4px; }
.bld-preview { margin-top: 16px; border-top: 1px solid var(--line); padding-top: 12px; min-height: 64px; }
.bp-head { font-size: 14px; }
.bp-sum { font-size: 12.5px; color: var(--muted); margin: 2px 0 6px; }
.bld-warn { font-size: 12px; color: var(--amber); margin-top: 6px; }
.bld-err { font-size: 12.5px; color: var(--red); margin-top: 6px; }
.modal-actions #bldName { flex: 1; margin-right: auto; }
/* 내 스캐너 목록 */
.watch-item { border: 1px solid var(--line); border-radius: 10px; padding: 12px 14px; display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: center; margin-bottom: 8px; }
.watch-item .name { font-weight: 700; }
.watch-item .meta { color: var(--muted); font-size: 12px; }
.switch { position: relative; width: 36px; height: 20px; border-radius: 999px; background: var(--line); border: none; flex-shrink: 0; }
.switch::after { content: ''; position: absolute; top: 2px; left: 2px; width: 16px; height: 16px; border-radius: 50%; background: #fff; transition: left .15s; }
.switch.on { background: var(--accent); } .switch.on::after { left: 18px; }
.locked-overlay { position: relative; min-height: 158px; }   /* 로그인 전엔 버튼이 둘이라 자리가 필요하다 */
.locked-overlay .blur { filter: blur(3px); pointer-events: none; user-select: none; }
.locked-overlay .gate { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: color-mix(in srgb, var(--bg) 60%, transparent); border-radius: 10px; text-align: center; padding: 20px; }

/* 코인 아이콘 · 스파크라인 · 뷰 전환 */
.coin { width: 20px; height: 20px; border-radius: 50%; vertical-align: middle; margin-right: 8px; background: var(--panel2); flex-shrink: 0; }
.coin.letter { display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 800; color: var(--muted); border: 1px solid var(--line); }
.sc-table td.sym a { display: inline-flex; align-items: center; vertical-align: middle; }
.sc-table td.sym .name { max-width: 130px; overflow: hidden; text-overflow: ellipsis; }
.sc-table th.nosort { cursor: default; }
.sc-table td.spark-cell { padding: 4px 10px; }
.spark { display: block; margin-left: auto; }
.seg.sm button { padding: 4px 10px; font-size: 12px; }
.icon-btn.mini { height: 22px; padding: 0 6px; font-size: 12px; margin-left: 4px; }
.heat-legend-bar { display: flex; gap: 2px; margin-top: 8px; font-size: 11.5px; color: var(--muted); }
.heat-legend-bar span { flex: 1; text-align: center; }
.heat-legend-bar i { display: block; height: 8px; border-radius: 2px; margin-bottom: 3px; }
.heat-cell .coin { width: 1.7em; height: 1.7em; margin: 0 0 .25em; }
.dd-table { min-width: 0; font-size: 12.5px; }
.dd-table th { position: static; }
.dd-table tr.sel td { background: var(--chip-on); }
.col-picker label { display: flex; align-items: center; gap: 8px; padding: 4px 0; font-size: 12.5px; cursor: pointer; }
.col-picker input { accent-color: var(--accent); }
.cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 10px; }
.coin-card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 12px; display: block; min-width: 0; }
.coin-card:hover { border-color: var(--muted); }
.coin-card .top { display: flex; align-items: center; gap: 6px; font-weight: 700; font-size: 13.5px; }
.coin-card .top .name { color: var(--muted); font-weight: 500; font-size: 11.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1; min-width: 0; }
.coin-card .top .pct { margin-left: auto; font-size: 12.5px; }
.coin-card .price { font-size: 17px; font-weight: 800; margin: 6px 0 2px; transition: background-color .7s ease-out; border-radius: 4px; }
.coin-card .price.tick-up { background: rgba(76,175,80,.22); transition: none; }
.coin-card .price.tick-down { background: rgba(239,83,80,.22); transition: none; }
.coin-card .spark-big svg { width: 100%; height: 56px; }
.coin-card .foot { color: var(--muted); font-size: 11.5px; margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.heat-inner { position: relative; }
.heat-zoom { display: flex; justify-content: center; align-items: center; gap: 6px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.heat-zoom .btn { min-width: 30px; padding: 4px 8px; }
.tip { position: fixed; z-index: 400; pointer-events: none; background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 10px; font-size: 12.5px; box-shadow: var(--shadow); min-width: 170px; }
.tip .t-head { display: flex; align-items: center; gap: 6px; font-weight: 700; margin-bottom: 4px; }
.tip .t-head .muted { font-weight: 500; font-size: 11.5px; }
.tip .t-row { display: flex; justify-content: space-between; gap: 14px; color: var(--muted); padding: 1px 0; }
.tip .t-row b { color: var(--text); }
.heat { position: relative; height: 560px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); }
.heat.zoomed { overflow: auto; }
.heat-zoom .btn:disabled { opacity: .35; }
.heat-cell { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; overflow: hidden; border: 1px solid var(--bg); color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.45); line-height: 1.15; box-sizing: border-box; }
.heat-cell b { font-weight: 800; } .heat-cell span { font-weight: 600; font-size: .8em; opacity: .92; }
.heat-cell:hover { outline: 2px solid #fff; z-index: 2; }
.sym-chip { display: inline-block; font-size: 11.5px; font-weight: 700; padding: 2px 7px; border-radius: 6px; background: var(--chip); border: 1px solid var(--line); margin: 4px 4px 0 0; }
.sym-chip.new { border-color: var(--accent); color: var(--accent-2); }
.watch-item.off { opacity: .55; }
.hist-row { padding: 8px 0; border-bottom: 1px solid var(--line-soft); }
.hist-row .meta { color: var(--muted); font-size: 12px; }

/* 우측 스캐너 패널(스크리너 작업대) */
/* 스크리너는 목록이 화면 아래까지 차지한다 — 푸터를 두면 목록이 잘리고 어차피 스크롤해야 보인다.
   페이지 스크롤도 막는다: main의 아래 여백(64px)만큼 페이지가 밀려 스크롤할 때마다 배경의 검은 띠가 보였다 */
body[data-page="screener"] .site-footer { display: none; }
body[data-page="screener"] { overflow: hidden; }
/* 헤더(64px) 아래를 정확히 채운다. 예전엔 JS가 창 높이를 재서 목록 높이에 넣었는데
   칩이 줄바꿈되면 한 박자 늦게 맞아 아래에 빈 띠가 남고 페이지가 그만큼 스크롤됐다 */
body[data-page="screener"] main { height: calc(100vh - 64px); height: calc(100dvh - 64px); padding-bottom: 0; box-sizing: border-box; }
body[data-page="screener"] .workspace > .container { display: flex; flex-direction: column; min-height: 0; }
body[data-page="screener"] #tableView, body[data-page="screener"] #cardsView, body[data-page="screener"] #heatView { flex: 1 1 auto; min-height: 0; }
.workspace { display: flex; align-items: stretch; }
.workspace .container { flex: 1; min-width: 0; }
/* 스크리너 7 : 스캐너 패널 3 */
.scan-panel { width: clamp(320px, 30%, 560px); flex-shrink: 0; border-left: 1px solid var(--line); display: flex; flex-direction: column; min-height: 0; background: var(--bg); }
.scan-panel.collapsed { width: 44px; align-items: center; padding-top: 2px; }
.sp-rail { background: none; border: none; color: var(--muted); position: relative; padding: 8px; border-radius: 8px; }
.sp-rail:hover { color: var(--text); background: var(--panel2); }
.sp-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; }
.sp-rail .sp-badge { position: absolute; top: 0; right: -2px; }
.sp-head { display: flex; justify-content: space-between; align-items: flex-start; padding: 0 12px 10px; border-bottom: 1px solid var(--line); }
.sp-head b { font-size: 14px; }
.sp-pick { display: flex; gap: 6px; align-items: center; padding: 10px 12px 0; }
.sp-pick .scan-btn { flex: 1; justify-content: space-between; }
.sp-tabs { display: flex; border-bottom: 1px solid var(--line); }
.sp-tab { flex: 1; background: none; border: none; border-bottom: 2px solid transparent; padding: 8px 6px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.sp-tab.on { color: var(--accent-2); border-bottom-color: var(--accent); }
.sp-body { flex: 1; min-height: 0; overflow: auto; padding: 10px 12px; font-size: 12.5px; }
/* 이 화면에서만 할 수 있는 일은 탭과 무관하게 바닥에 고정 — 목록을 스크롤해도 사라지지 않는다 */
.sp-foot { border-top: 1px solid var(--line); padding: 10px 12px; }
.sp-head-act { display: flex; gap: 4px; align-items: center; flex-shrink: 0; }
.sp-head-act .icon-btn { height: 24px; padding: 0 7px; font-size: 11.5px; }
.sp-sec { font-size: 11px; font-weight: 700; color: var(--muted); letter-spacing: .04em; margin: 10px 0 4px; }
.sp-item { padding: 8px; border-radius: 8px; cursor: pointer; border: 1px solid transparent; }
.sp-item:hover { background: var(--panel2); }
.sp-item.on { border-color: rgba(76,175,80,.5); background: var(--chip-on); }
.sp-row { display: flex; align-items: center; gap: 6px; min-width: 0; }
.sp-row .nm { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sp-row > .muted:last-child { margin-left: auto; white-space: nowrap; }
.sp-row .dot { width: 7px; height: 7px; border-radius: 50%; background: var(--muted); flex-shrink: 0; }
.sp-row .dot.on { background: var(--green); }
.sp-alert { padding: 8px; border-radius: 8px; border-left: 2px solid transparent; }
.sp-alert.unread { border-left-color: var(--accent); background: var(--chip-on); }
.sp-alert .time { color: var(--muted); font-variant-numeric: tabular-nums; white-space: nowrap; }
.sp-alert .chips { margin-top: 2px; }
.badge-new { display: inline-block; font-size: 9.5px; font-weight: 800; color: var(--accent-2); border: 1px solid rgba(76,175,80,.6); border-radius: 4px; padding: 0 4px; margin-left: 6px; line-height: 1.5; vertical-align: middle; }
/* 지표가 마지막 수집에서 갱신되지 못한 종목. 옛 값을 새 값인 척 보여 주지 않기 위한 표시라
   눈에 띄어야 하지만 포착(NEW)과 헷갈리면 안 된다 → 초록이 아닌 호박색 */
.stale-mark { display: inline-block; font-size: 9.5px; font-weight: 700; color: var(--amber); border: 1px solid color-mix(in srgb, var(--amber) 55%, transparent); border-radius: 4px; padding: 0 4px; margin-left: 6px; line-height: 1.5; vertical-align: middle; cursor: help; }
.nav-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 16px; height: 16px; padding: 0 4px; margin-left: 5px; border-radius: 8px; background: var(--accent); color: #fff; font-size: 10px; font-weight: 800; vertical-align: middle; }
@media (max-width: 900px) {
  .scan-panel { position: fixed; top: 54px; right: 0; bottom: 0; width: min(360px, 92vw); z-index: 70; box-shadow: var(--shadow); }
  .scan-panel.collapsed { top: auto; bottom: 14px; right: 14px; width: auto; height: auto; border: 1px solid var(--line); border-radius: 999px; padding: 0; background: var(--panel); }
}

/* 모달 */
.modal-bg { position: fixed; inset: 0; background: rgba(0,0,0,.55); display: none; align-items: center; justify-content: center; z-index: 100; padding: 20px; }
.modal-bg.show { display: flex; }
.modal { background: var(--panel); border: 1px solid var(--line); border-radius: 12px; width: 100%; max-width: 560px; padding: 22px; max-height: 90vh; overflow: auto; box-shadow: var(--shadow); }
.modal h2 { font-size: 16px; font-weight: 800; }
.field { display: grid; grid-template-columns: 170px 1fr auto; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--line-soft); font-size: 13px; }
.field label { color: var(--muted); font-size: 12.5px; }
.field input[type=range] { width: 100%; accent-color: var(--accent); }
.field .val { font-variant-numeric: tabular-nums; min-width: 64px; text-align: right; font-weight: 700; }
.field input[type=checkbox] { accent-color: var(--accent); width: 16px; height: 16px; }
.modal-actions { display: flex; gap: 8px; justify-content: flex-end; margin-top: 14px; }

/* 기타 페이지 */
.narrow { max-width: 440px; margin: 40px auto 0; }
.code-input { letter-spacing: .4em; text-align: center; font-size: 22px; font-weight: 800; }
.status-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--line-soft); font-size: 13.5px; }
.status-row .k { color: var(--muted); }
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px; }
.price-big { font-size: 30px; font-weight: 800; }
.price-big .unit { font-size: 13px; color: var(--muted); font-weight: 600; margin-left: 4px; }
.compare { width: 100%; border-collapse: collapse; font-size: 13px; }
.compare th, .compare td { padding: 8px 10px; border-bottom: 1px solid var(--line-soft); text-align: left; }
.compare th { color: var(--muted); font-size: 12px; font-weight: 600; border-bottom: 1px solid var(--line); }
.faq details { border-bottom: 1px solid var(--line-soft); padding: 10px 0; }
.faq summary { cursor: pointer; font-weight: 700; font-size: 13.5px; }
.faq p { color: var(--muted); font-size: 13px; margin-top: 6px; }
.legal h2 { font-size: 16px; margin: 18px 0 6px; } .legal p { color: var(--muted); font-size: 13px; margin-bottom: 8px; }
.tabs { display: flex; gap: 6px; margin-bottom: 14px; flex-wrap: wrap; }
.tab { background: none; border: 1px solid var(--line); border-radius: 999px; color: var(--muted); font-size: 12.5px; font-weight: 600; padding: 6px 14px; }
.tab.active { border-color: var(--accent); color: var(--accent-2); }
.toast { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); background: var(--panel); border: 1px solid var(--line); border-radius: 8px; padding: 8px 14px; font-size: 12.5px; box-shadow: var(--shadow); z-index: 300; }

/* 개발용 상태 스위치 (프로토타입 전용) */
.dev-switch { position: fixed; bottom: 14px; right: 14px; z-index: 200; background: var(--panel); border: 1px dashed var(--amber); border-radius: 8px; padding: 6px 10px; font-size: 11.5px; color: var(--amber); display: flex; gap: 6px; align-items: center; }
.dev-switch select { background: var(--bg); color: var(--text); border: 1px solid var(--line); border-radius: 6px; padding: 2px 6px; font-family: inherit; font-size: 11.5px; }

.site-footer { border-top: 1px solid var(--line); padding: 20px 0 36px; }
.site-footer .container { display: flex; justify-content: space-between; gap: 16px; flex-wrap: wrap; font-size: 12px; color: var(--muted); }
.site-footer .disclaimer { width: 100%; font-size: 12px; color: var(--muted); }
.site-footer nav { display: flex; gap: 14px; }
.site-footer nav a:hover { color: var(--text); }

@media (max-width: 900px) {
  .symbol-layout, .grid-2, .grid-3 { grid-template-columns: 1fr; }
  .field { grid-template-columns: 1fr; gap: 6px; } .field .val { text-align: left; }
  .main-nav a { padding: 6px 7px; font-size: 12.5px; }
  .chip-row .label { width: auto; }
  #chart { height: 280px; }
}

/* ===== 요금 페이지: 우주 + 눈 레이저 탐지 히어로 + 플랜. 테마와 무관하게 항상 다크 ===== */
body[data-page="pricing"] { --bg: #000F0F; --panel: #11151d; --panel2: #161b25; --line: rgba(255,255,255,.08); --line-soft: rgba(255,255,255,.04); --text: #e6e9ef; --muted: #8b93a3; --accent: #4CAF50; --accent-2: #66BB6A; --red: #ef5350; --green: #4CAF50; --amber: #d9a441; --chip: #161b25; --chip-on: rgba(76,175,80,.16); --row-hover: rgba(255,255,255,.03); --shadow: 0 8px 30px rgba(0,0,0,.35); color-scheme: dark; }
/* 낮/밤 토글은 다른 페이지와 똑같이 보여 준다(헤더가 페이지마다 달라 보이지 않게).
   이 페이지 자체는 위 토큰으로 항상 이 다크 디자인을 유지한다 */
main.pricing { padding-top: 0; }
/* 제목이 모션 띠 **안에** 얹힌다. 따로 위에 두면 그만큼 모션이 낮아져 눈의 존재감이 죽는다.
   모션은 위아래가 페이지 배경으로 녹아들어 한 페이지처럼 이어진다 */
.plan-head { position: absolute; top: 0; left: 0; right: 0; z-index: 2; padding: 52px 20px 0; text-align: center; pointer-events: none; }
.eyebrow { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: var(--accent-2); margin-bottom: 14px; }
.plan-head h1 { display: grid; gap: 6px; line-height: 1.08; }
/* 이름은 초록에 자간을 벌리고 옅은 광을 얹어 눈에 걸리게, 문장은 흰색으로 받쳐준다 */
.plan-head .brand { font-size: clamp(34px, 5.6vw, 76px); font-weight: 900; letter-spacing: .06em; color: var(--accent);
  background: linear-gradient(100deg, var(--accent) 12%, #86f79b 52%, var(--accent) 88%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(76,175,80,.28)); }
.plan-head .tag { font-size: clamp(22px, 3.1vw, 42px); font-weight: 800; letter-spacing: -.015em; }
/* 캔버스는 투명하게 두고 위아래 페이드를 셰이더 안에서 처리한다 — 띠 배경을 칠하면 고정 그라데이션과 어긋나 경계가 드러난다 */
/* 제목을 품고(예전 380~580 + 제목 자리), 위아래로 배경 그리드가 더 보이도록 한 번 더 키웠다.
   눈·패널은 커지지 않는다 — 셰이더가 내용을 가운데 띠(CFG.BAND)에만 그리고 나머지는 그리드가 채운다.
   그래서 이 값 = 예전 높이 ÷ BAND(0.80) 다. 둘을 함께 바꿔야 눈 크기가 유지된다. */
.preview { position: relative; width: 100%; height: clamp(675px, 69vw, 975px); overflow: hidden; }
/* 첫 프레임이 그려질 때까지만 감춘다(셰이더 컴파일 중의 빈 깜빡임 방지).
   모듈은 <head>에서 미리 받아 두므로 제목과 거의 동시에 올라온다 */
.preview canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity .35s ease; }
.preview canvas.ready { opacity: 1; }
.hero-cta { display: flex; gap: 10px; flex-wrap: wrap; justify-content: center; }
.btn.lg { padding: 12px 22px; font-size: 14.5px; border-radius: 10px; }
.hero-stats { display: flex; gap: 40px; padding: 4px 20px 6px; flex-wrap: wrap; justify-content: center; }
.hero-stats b { display: block; font-size: 19px; font-weight: 800; letter-spacing: -.01em; }
.hero-stats span { font-size: 12px; color: var(--muted); }
.plans { display: grid; grid-template-columns: repeat(2, minmax(0, 440px)); gap: 18px; justify-content: center; padding: 44px 20px 8px; }
.plan { position: relative; background: var(--panel); border: 1px solid var(--line); border-radius: 16px; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.plan.pro { border-color: rgba(76,175,80,.55); box-shadow: 0 0 0 1px rgba(76,175,80,.22), 0 24px 70px rgba(76,175,80,.10); }
.plan .tier { font-size: 12.5px; font-weight: 800; letter-spacing: .12em; color: var(--muted); }
.plan.pro .tier { color: var(--accent-2); }
.plan .price { font-size: 40px; font-weight: 800; letter-spacing: -.02em; line-height: 1; }
.plan .price small { font-size: 14px; color: var(--muted); font-weight: 600; margin-left: 6px; letter-spacing: 0; }
.plan .desc { color: var(--muted); font-size: 13.5px; line-height: 1.55; }
.plan ul { list-style: none; display: grid; gap: 10px; margin: 8px 0 4px; }
.plan li { display: flex; gap: 10px; align-items: flex-start; font-size: 13.5px; line-height: 1.5; }
.plan li .ck { width: 16px; height: 16px; flex-shrink: 0; margin-top: 3px; fill: none; stroke: var(--accent-2); stroke-width: 2; stroke-linecap: round; stroke-linejoin: round; }
.plan li.dim { color: var(--muted); } .plan li.dim .ck { stroke: var(--muted); }
.plan .cta { margin-top: auto; }
.plan .fine { font-size: 12px; color: var(--muted); line-height: 1.5; margin-top: 8px; }
.ribbon { position: absolute; top: -12px; right: 22px; background: var(--accent); color: #fff; font-size: 10.5px; font-weight: 800; letter-spacing: .12em; padding: 5px 11px; border-radius: 999px; }
/* 아직 열지 않은 플랜 — 팔지 않는 카드이므로 가라앉혀 둔다 */
.ribbon.soon { background: var(--chip); color: var(--muted); border: 1px solid var(--line); }
.plan.soon { border-style: dashed; background: transparent; }
.plan.soon .price { font-size: 26px; color: var(--muted); }
/* 요금제 제목 + 결제 주기 토글 — 카드 바로 위. 제목 크기는 히어로의 문장과 같게 맞춘다 */
.plans-head { display: flex; flex-direction: column; align-items: center; gap: 18px; padding: 30px 20px 0; }
.plans-head h2 { font-size: clamp(24px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.015em; }
/* 낮/밤 토글과 같은 방식: 노브가 미끄러지고 글자는 그 위에 얹힌다 */
.billing { position: relative; display: inline-flex; padding: 4px; background: var(--panel2); border: 1px solid var(--line); border-radius: 999px; }
.billing .knob { position: absolute; top: 4px; left: 4px; width: calc(50% - 4px); height: calc(100% - 8px); border-radius: 999px; background: var(--accent); transition: transform .22s cubic-bezier(.4,0,.2,1); }
.billing.yearly .knob { transform: translateX(100%); }
.billing .bt { position: relative; z-index: 1; flex: 1 1 0; min-width: 104px;   /* 두 칸이 정확히 반반이어야 노브가 딱 맞는다 */ border: 0; background: none; color: var(--muted); font-size: 13.5px; font-weight: 700; padding: 8px 20px; border-radius: 999px; text-align: center; transition: color .18s; }
.billing .bt.on { color: #fff; }
/* 결제 안내 — 전체 폭 */
.pay-note { margin-top: 48px; border-top: 1px solid var(--line); padding: 40px 0 8px; }
.pay-note h2 { font-size: 18px; font-weight: 800; letter-spacing: -.01em; margin-bottom: 8px; }
.pay-note p { font-size: 13.5px; color: var(--muted); }
.faq-grid { max-width: 898px; margin: 26px auto 0; padding: 0 20px; }
@media (max-width: 900px) { .plans { grid-template-columns: 1fr; } .plan-head { padding: 36px 16px 0; } .plan-head h1 { font-size: 32px; } .hero-stats { gap: 24px; } }
/* 폰에서는 띠가 폭보다 높아지면 눈이 화면 밖으로 넘친다 — 높이를 폭에 묶는다 */
@media (max-width: 600px) { .preview { height: clamp(500px, 131vw, 650px); } }   /* 폰도 같은 비율(÷0.80) */
/* 마지막 마감에 갱신되지 못한 지표 칸. 같은 행에 실시간 값(가격·24h·거래량)과 섞여 있어
   어느 숫자가 옛것인지 구분되어야 한다. 값을 지우거나 바꾸지 않고 흐리게만 한다 */
.sc-table td.stale-cell { opacity: .45; }

/* 좁은 화면에서는 가운데 고정을 풀고 흐름에 맡긴다 — 안 그러면 메뉴·아이콘과 겹친다 */
/* `static`이면 안 된다 — 돋보기 아이콘이 절대배치라 기준이 헤더로 올라가 로고 위에 얹힌다. relative로 푼다 */
@media (max-width: 1180px) { .gsearch { position: relative; left: auto; transform: none; margin-left: 12px; } .gsearch .input { width: clamp(140px, 24vw, 300px); } }