/* index.html 정본과 compare.html이 공유하는 비교 화면 레이아웃. */
.compare-view { padding:0; min-height:0; height:auto; overflow:hidden;
  display:flex; flex-direction:column; }
.compare-toolbar { min-height:42px; }
/* 맵 7 : 차트 3. 1536×730 에서 티커가 보이는 종목 70 → 342 개 (3:2 대비, 실측 2026-09-19) */
.cshell { display:grid; grid-template-columns:minmax(0,7fr) minmax(0,3fr); gap:10px; padding:10px 14px;
  flex:1; min-height:0; box-sizing:border-box; }
.pane { background:var(--surface); border:1px solid var(--border); border-radius:var(--radius-lg);
  padding:10px 12px; display:flex; flex-direction:column; min-height:0; }
.phead { display:flex; align-items:baseline; gap:10px; margin-bottom:8px; flex-wrap:wrap; }
.phead h2 { font-size:13px; font-weight:500; margin:0; }
.subbar { display:flex; gap:12px; align-items:center; flex-wrap:wrap; margin-bottom:7px;
  font-size:11px; color:var(--text-3); }
.subbar .group { display:flex; gap:5px; align-items:center; }
.subbar .seg button { font-size:10px; padding:1px 6px; }
.subbar .seg button[disabled] { opacity:.32; cursor:not-allowed; }
#map { position:relative; flex:1; min-height:0; }
/* 맵 타일 — 핀비즈식: 가운데 굵은 티커, 그 아래 값. 글자 크기는 JS 가 타일 크기로 정한다. */
.tile { position:absolute; overflow:hidden; box-sizing:border-box; border:1px solid var(--bg);
  cursor:pointer; display:flex; flex-direction:column; align-items:center; justify-content:center;
  text-align:center; line-height:1.05; }
.tile:hover,.tile.added { outline:2px solid var(--accent); outline-offset:-2px; z-index:2; }
/* 티커 = Bahnschrift (윈도우 기본 탑재, DIN 계열). 좁아서 같은 칸에 더 크게 들어가고
   획이 단순해 9px 에서도 안 뭉친다. 굵기는 700 → 600 (503개가 다 굵으면 다 안 굵다) */
.tile .tl { font-family:var(--ticker); font-weight:600; letter-spacing:0; white-space:nowrap; }
.tile .tv { font-weight:600; opacity:.92; margin-top:2px; font-variant-numeric:tabular-nums; white-space:nowrap; }
.tile .into { position:absolute; top:2px; right:3px; font-size:10px; opacity:.6;
  background:none; border:0; color:inherit; cursor:pointer; padding:1px 4px; }
/* 틀(섹터·산업) — 핀비즈처럼 틀 사이를 바탕색 틈과 테두리로 확실히 가른다.
   머리띠는 무채색, 값만 색 — 머리띠까지 칠하면 경계가 타일 색에 묻힌다. */
.gframe { position:absolute; box-sizing:border-box; border:3px solid var(--border-2);
  background:var(--bg); border-radius:3px; }
/* 선택된 틀은 테두리를 타일 위로 올려야 보이는데, 배경까지 올라오면 안의 타일을 덮는다
   (클릭하면 안이 사라지던 버그). 배경을 비우고 클릭은 머리띠만 받는다. */
.gframe.added { outline:2px solid var(--accent); outline-offset:1px; z-index:3;
  background:transparent; pointer-events:none; }
.gframe.added .ghead { pointer-events:auto; }
.ghead { height:18px; display:flex; align-items:center; gap:6px; padding:0 5px; font-size:11.5px;
  cursor:pointer; white-space:nowrap; overflow:hidden; background:var(--surface-2); color:var(--text); }
.ghead b { font-weight:700; overflow:hidden; text-overflow:ellipsis; min-width:2.2em; flex-shrink:1; }
.ghead span { flex-shrink:2; overflow:hidden; font-weight:700; font-variant-numeric:tabular-nums; }
.ghead.small span.up { color:var(--up); } .ghead.small span.dn { color:var(--down); }
.ghead i { font-style:normal; opacity:.75; font-size:10.5px; flex-shrink:3; overflow:hidden; }
/* 산업 틀 — 섹터 틀보다 가는 경계, 작은 머리. 위계는 경계 굵기로 읽힌다 */
.gframe.sub { border-width:1px; border-color:var(--border); border-radius:0; }
.ghead.small { height:13px; font-size:9.5px; padding:0 3px; gap:4px; background:transparent; color:var(--text-2); }
.ghead.small b { font-weight:600; min-width:1em; }
.ghead.small span { font-weight:600; }
.ghead .into { margin-left:auto; background:none; border:0; color:inherit; opacity:.7; cursor:pointer;
  font-size:10px; padding:0 2px; }
.ghead .pick-sector { margin-left:auto; border:1px solid currentColor; border-radius:3px;
  background:rgba(0,0,0,.18); color:inherit; padding:0 4px; line-height:15px; cursor:pointer;
  font-size:13px; flex:none; }
.ghead .pick-sector[aria-pressed="true"] { background:var(--accent); color:#fff; }
.ghead .pick-sector + .into { margin-left:0; }
.ghead:hover b { text-decoration:underline; }
#heatWrap,#stockWrap { flex:1; min-height:0; overflow:auto; }
#heat { display:grid; gap:1px; align-content:start; --cell:clamp(9px,1.5vh,20px); }
#heat .rowname { font-size:11.5px; font-weight:600; color:var(--text); padding-right:7px; white-space:nowrap;
  overflow:hidden; max-width:152px; display:flex; align-items:center; gap:3px; cursor:pointer; height:var(--cell); }
#heat .rowname.added { color:var(--accent); font-weight:600; }
#heat .rowname .into { background:none; border:0; color:var(--text-3); font-size:9px; cursor:pointer; }
#heat .rowname .nm { overflow:hidden; text-overflow:ellipsis; }
#heat .cell { height:var(--cell); border-radius:2px; cursor:pointer; display:flex; align-items:center;
  justify-content:center; font-size:var(--cf,10px); font-weight:600; font-variant-numeric:tabular-nums; overflow:hidden; }
#heat .cell.sel { outline:1px solid var(--accent); outline-offset:-1px; }
#heat .colname { font-size:10px; color:var(--text-3); text-align:center; white-space:nowrap; height:13px; }
#stockGrid { display:grid; grid-template-columns:repeat(auto-fill,minmax(118px,1fr)); gap:4px; align-content:start; }
.stock-tile { border:1px solid var(--border); border-radius:4px; min-height:76px; padding:4px;
  cursor:pointer; color:var(--text); overflow:hidden; }
.stock-tile:hover,.stock-tile.added { outline:2px solid var(--accent); outline-offset:-2px; }
.stock-tile .st-head { display:flex; justify-content:space-between; gap:5px; font-size:10px; }
.stock-tile .st-head b { font-size:11px; }.stock-tile svg { width:100%; height:50px; display:block; }
.stock-tile .peer { fill:none; stroke:var(--text-3); stroke-width:1; opacity:.55; }
.stock-tile .own { fill:none; stroke:var(--text); stroke-width:1.7; }
.crumb { display:flex; gap:4px; align-items:center; font-size:11px; color:var(--text-3); flex-wrap:wrap; }
.crumb button { background:none; border:0; color:var(--accent); font:inherit; cursor:pointer; padding:0; }
#chart { flex:1; min-height:0; position:relative; } #chart svg { width:100%; height:100%; display:block; }
.cl { fill:none; stroke-width:1.8; stroke-linejoin:round; }.gl { stroke:var(--border); stroke-width:1; }
.zl { stroke:var(--border-2); stroke-width:1; stroke-dasharray:3 3; }.ctx { fill:var(--text); opacity:.045; }
.cl.etf { stroke-dasharray:5 3; stroke-width:1.4; }.axis { font-size:10px; fill:var(--text-3); }
.chips,.related { display:flex; align-items:center; flex-wrap:wrap; gap:5px; margin-top:7px; }
.chip { display:flex; align-items:center; gap:5px; font-size:11px; background:var(--surface-2);
  border:1px solid var(--border); border-radius:20px; padding:2px 6px 2px 8px; }
.chip i { width:9px; height:9px; border-radius:50%; }.chip button { border:0; background:none; color:var(--text-3); }
.related { min-height:24px; font-size:10px; color:var(--text-3); }
.related button { border:1px solid var(--border); background:var(--surface-2); color:var(--text);
  border-radius:14px; padding:2px 7px; cursor:pointer; font-size:10px; }
.empty { color:var(--text-3); font-size:12px; padding:20px 0; text-align:center; }
.scalebar { display:flex; align-items:center; gap:5px; font-size:10px; color:var(--text-3); margin-left:auto; }
.scalebar .bar { width:64px; height:7px; border-radius:2px;
  background:linear-gradient(90deg,var(--heat-neg-3),var(--heat-zero),var(--heat-pos-3)); }
@media (max-width:900px) { .cshell { grid-template-columns:1fr; overflow:auto; height:auto; }
  .pane { min-height:420px; } }
/* 접힌 산업 타일 — 긴 영문 이름을 두 줄까지 */
.tile.grp .tl { white-space:normal; line-height:1.1; padding:0 3px; display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical; overflow:hidden; word-break:break-word; }
/* 맵 아래 한 줄: 경로 · 설명 · 색 범례 (보기 전환 줄을 없애고 옮겨온 것) */
.mapfoot { display:flex; align-items:center; gap:10px; margin-top:6px; min-height:16px; }
.mapfoot .crumb { flex-shrink:0; }
.mapfoot #mapHint { margin:0; flex:1; min-width:0; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.mapfoot .scalebar { margin-left:0; flex-shrink:0; }
/* 모드 설명 문장은 모드 버튼 툴팁으로 (1536 폭에서 도구줄이 두 줄로 접혀 맵 40px 을 먹던 원인) */
#modeHint { display:none; }
/* 검색식 통과 = 금색. 빨강(상승)·파랑(하락)은 이미 값의 색이라 판정엔 쓰지 않는다. */
:root { --pass:#c99a06; }
:root[data-theme="dark"] { --pass:#f5c400; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pass:#f5c400; } }
/* 안쪽 2px — 선택·hover 의 파란 outline(-2px) 과 같은 자리지만 outline 이 위에 그려져 둘 다 읽힌다 */
.tile.pass { box-shadow:inset 0 0 0 2px var(--pass), inset 0 0 0 3px rgba(0,0,0,.35); }

/* 오른쪽 판: 위 차트 절반 · 아래 검색식 판정 절반 (1920 에서 차트가 495×881 로 세로로 눌려 있었다) */
#why { flex:1; min-height:0; overflow:auto; border-top:1px solid var(--border); margin-top:8px; padding-top:8px;
  font-size:12px; }
.why-top { display:flex; align-items:baseline; gap:8px; flex-wrap:wrap; margin-bottom:8px; }
.why-top b { font-size:15px; }
.why-top .path { color:var(--text-3); font-size:11px; flex:1; min-width:0; }
.why-top a { color:var(--accent); font-size:11px; text-decoration:none; }
.why-top span:not(.tag):not(.path) { color:var(--text-3); font-size:11px; }
#why .warn { color:var(--pass); font-weight:600; }
#why .tag { font-size:10.5px; padding:1px 7px; border-radius:10px; border:1px solid var(--border); color:var(--text-3); }
#why .tag.ok { border-color:var(--pass); color:var(--pass); font-weight:700; }
.why-sc { border:1px solid var(--border); border-radius:6px; padding:6px 8px; margin-bottom:6px; }
.why-sc.ok { border-color:var(--pass); }
.why-name { display:flex; justify-content:space-between; font-weight:600; margin-bottom:5px; }
.why-name span { font-weight:500; color:var(--text-3); }
.why-sc.ok .why-name span { color:var(--pass); font-weight:700; }
/* 단계 칩: 통과는 옅게, 끊긴 단계는 진하게 — "어디서 끊겼나" 가 한 줄로 */
.why-steps { display:flex; flex-wrap:wrap; gap:3px; }
.why-steps i { font-style:normal; font-size:10.5px; padding:1px 6px; border-radius:3px;
  background:var(--surface-2); color:var(--text-2); cursor:default; }
.why-steps i.no { background:var(--text); color:var(--surface); font-weight:700; }
.why-sc.ok .why-steps i { box-shadow:inset 0 0 0 1px var(--pass); }
.why-fail { margin-top:5px; font-size:11px; color:var(--text-2); font-variant-numeric:tabular-nums; }
.why-foot { font-size:10.5px; color:var(--text-3); margin-top:4px; }
.why-list { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:6px; }
.why-list button { border:1px solid var(--pass); background:var(--surface-2); color:var(--text);
  border-radius:4px; padding:2px 7px; cursor:pointer; font-size:11px; font-weight:600; }
/* 구름 — 같은 그룹의 시총가중·동일가중 사이 (D26). 색은 그룹 색 하나,
   위아래는 채움 여부로 읽는다: 채워짐 = 시총가중이 위 = 대형주가 끌고 간다 */
.cloud { stroke: none; pointer-events: none; }
.cl.edge { stroke-width: 1.2; opacity: .85; }
.chip .tilt { text-decoration: none; color: var(--text-3); font-size: 10px;
  font-variant-numeric: tabular-nums; }