:root{
  --chrome-bg:#0F1420;
  --chrome-bg-2:#161C2A;
  --chrome-bg-3:#1F2736;
  --chrome-line:#2B3446;
  --text:#ECEFF4;
  --text-soft:#99A3B8;
  --text-faint:#626D82;
  /* UI 전용 강조색(Ice Mint). 버튼/탭/포커스/hover/selected 등 인터랙션에만 쓰고
     Cluster/Type/Score/Validation 같은 데이터 의미 색으로는 재사용하지 않는다. */
  --accent-mint:#A7E7DF;
  --accent-mint-hover:#8EDDD2;
  --accent-mint-dim:#123430;
  /* Opportunity Score 숫자 전용 색. Mint = UI interaction + Opportunity Score 강조라는 원칙에 따라
     이제 accent-mint를 그대로 참조(coral 폐기) -- Cluster/Type/Validation 색과는 계속 분리 유지. */
  --score:var(--accent-mint);
  --good:#5FBE8E;
  --map-bg:#EDEEF0;
  /* 백테스트 후보/비후보 비교처럼 "좋다/나쁘다"를 암시하면 안 되는 중립 비교용 색 (accent/good과 분리) */
  --neutral-a:#4F6C8F;
  --neutral-b:#9AA1AE;

  /* Segmentation cluster palette -- cool-tone, dark navy 위에서 서로 뚜렷이 구별되도록 선정 */
  --c-mega:#78A7FF;
  --c-evening:#A98BEF;
  --c-lunch:#63C7D4;

  --t-golmok:#8B93A6;
  --t-baldal:#5B8DEF;
  --t-jeontong:#D9A544;
  --t-gwangwang:#B07CD9;

  --radius:8px;
}

*{ box-sizing:border-box; }
html,body{ height:100%; margin:0; }
body{
  font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;
  background:var(--chrome-bg);
  color:var(--text);
  font-size:13px;
  overflow:hidden;
}
.mono{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; }
input{ font-family:inherit; }
button{ font-family:inherit; cursor:pointer; }

.app{ height:100vh; display:flex; flex-direction:column; }

/* ---------- toolbar ---------- */
.toolbar{
  height:44px; flex-shrink:0; display:flex; align-items:center; gap:20px;
  padding:0 14px; background:var(--chrome-bg-2); border-bottom:1px solid var(--chrome-line);
}
.brand{ font-size:13.5px; font-weight:600; color:var(--text); display:flex; align-items:center; gap:7px; white-space:nowrap; }
.brand-mark{ color:var(--accent-mint); font-size:11px; }

.screen-tabs{ display:flex; gap:2px; background:var(--chrome-bg-3); border-radius:7px; padding:2px; }
.screen-tab{ background:none; border:none; color:var(--text-faint); font-size:12px; font-weight:500; padding:6px 13px; border-radius:5px; }
.screen-tab.active{ background:var(--chrome-bg); color:var(--text); }
.toolbar-right{ display:flex; align-items:center; gap:20px; flex:1; min-width:0; }
.toolbar-stats{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:11.5px; color:var(--text-faint); white-space:nowrap; }
.toolbar-search{ position:relative; flex:1; max-width:280px; }
.toolbar-search input{
  width:100%; background:var(--chrome-bg-3); border:1px solid var(--chrome-line); border-radius:6px;
  color:var(--text); font-size:12.5px; padding:6px 10px; outline:none;
}
.toolbar-search input:focus{ border-color:var(--accent-mint); }
.search-results{
  position:absolute; top:calc(100% + 4px); left:0; right:0; background:var(--chrome-bg-3);
  border:1px solid var(--chrome-line); border-radius:8px; max-height:260px; overflow-y:auto;
  display:none; z-index:1000; box-shadow:0 8px 24px rgba(0,0,0,0.4);
}
.search-results.show{ display:block; }
.search-item{ padding:7px 11px; font-size:12.5px; cursor:pointer; display:flex; justify-content:space-between; gap:8px; }
.search-item:hover{ background:var(--chrome-bg); }
.search-item .sc{ color:var(--score); font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
.toolbar-mode{ display:flex; gap:2px; background:var(--chrome-bg-3); border-radius:7px; padding:2px; margin-left:auto; }
.mode-btn{ background:none; border:none; color:var(--text-faint); font-size:12px; font-weight:600; padding:6px 13px; border-radius:5px; transition:color .15s; }
.mode-btn.active{ background:var(--chrome-bg); color:var(--accent-mint); }

/* ---------- body layout ---------- */
.body{ flex:1; display:flex; min-height:0; }

.rail{ background:var(--chrome-bg-2); flex-shrink:0; display:flex; flex-direction:column; overflow-y:auto; }
.rail-left{ width:220px; border-right:1px solid var(--chrome-line); padding:14px 12px; gap:18px; }
.rail-right{ width:270px; border-left:1px solid var(--chrome-line); }

.rail-section{ display:flex; flex-direction:column; gap:8px; }
/* 행정 분류 필터: 기능은 클러스터 필터와 동일하되, "이 프로젝트는 클러스터를 더 중요하게 본다"는
   메시지에 맞춰 시각적 무게만 한 단계 낮춤(체크박스 동작·상태는 손대지 않음) */
/* .rail-label은 기본값도 이미 text-faint라 색만으로는 차이가 안 나서, 전체를 살짝 dim 처리 +
   글자 크기를 한 단계 낮춰 "이건 보조 필터"라는 위계를 실제로 보이게 함(클릭/체크는 그대로 동작) */
.rail-section-secondary{ opacity:0.8; }
.rail-section-secondary .rail-label{ font-weight:500; }
.rail-section-secondary .check-item{ font-size:11.5px; padding:4px 8px; }
.rail-section-secondary .check-item .cnt{ font-size:10px; }

/* 접이식 방법론 섹션(Segmentation의 K 선정 근거·변수 설명): 기본 접힘, 필요한 사람만 펼쳐서 확인 */
.rail-details{ border-top:1px solid var(--chrome-line); padding-top:12px; display:flex; flex-direction:column; gap:14px; }
.rail-details summary{ cursor:pointer; list-style:none; display:flex; align-items:flex-start; gap:6px; }
.rail-details summary::-webkit-details-marker{ display:none; }
.rail-details summary::before{ content:"▸"; font-size:9px; display:inline-block; margin-top:2px; color:var(--text-faint); transition:transform .15s; }
.rail-details[open] summary::before{ transform:rotate(90deg); }
.rail-details-text{ display:flex; flex-direction:column; gap:2px; }
.rail-details-title{ font-size:11px; font-weight:600; color:var(--text-soft); }
.rail-details-sub{ font-size:10px; font-weight:400; color:var(--text-faint); }
.rail-details[open] .rail-details-title{ color:var(--text); }
.rail-details[open] summary{ margin-bottom:2px; }

/* 화면 해석에 직접 영향을 주는 핵심 caveat: rail-note보다 크고(12px+) 진하게 --
   text-soft는 다크 배경 대비 명암비 약 6.5:1 이상으로 WCAG AA(4.5:1) 통과 */
.caveat-strong{ font-size:12px; line-height:1.7; color:var(--text-soft); }
.caveat-strong b{ color:var(--text); }
.rail-label{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.06em; color:var(--text-faint); display:flex; justify-content:space-between; }
.rail-value{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:400; color:var(--text-soft); text-transform:none; letter-spacing:0; }
.rail-note{ font-size:10.5px; color:var(--text-faint); line-height:1.5; }

.preset-list{ display:flex; flex-direction:column; gap:2px; }
.preset-item{ display:flex; align-items:center; gap:8px; padding:6px 8px; border-radius:6px; font-size:12.5px; color:var(--text-soft); cursor:pointer; }
.preset-item:hover{ background:var(--chrome-bg-3); }
.preset-item.active{ background:var(--accent-mint-dim); color:var(--text); }
.preset-item input{ accent-color:var(--accent-mint); }

.check-list{ display:flex; flex-direction:column; gap:1px; }
.check-item{ display:flex; align-items:center; gap:8px; padding:5px 8px; border-radius:6px; font-size:12.5px; color:var(--text-soft); cursor:pointer; }
.check-item:hover{ background:var(--chrome-bg-3); }
.check-item input{ accent-color:var(--accent-mint); }
.check-item .sw{ width:9px; height:9px; border-radius:3px; flex-shrink:0; }
.check-item .cnt{ margin-left:auto; font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:10.5px; color:var(--text-faint); }

.range-dual{ position:relative; height:22px; }
/* 실제로 눈에 보이는 회색 선은 이 pseudo-element 하나뿐이다(native track은 아래에서 투명 처리).
   left/right를 thumb 반지름(5.5px)만큼 인셋해서, 브라우저가 계산하는 thumb의 실제 이동 범위
   [반지름, 너비-반지름]과 정확히 같은 구간에 선을 그린다. */
.range-dual::before{
  content:""; position:absolute; left:5.5px; right:5.5px; top:8px; height:4px;
  background:var(--chrome-line); border-radius:2px; pointer-events:none;
}
.range-dual input[type="range"]{
  position:absolute; width:100%; -webkit-appearance:none; background:none; pointer-events:none; top:8px; margin:0;
}
/* WebKit은 track/thumb를 따로 그리기만 할 뿐 자동으로 세로 중앙 정렬을 안 해줘서,
   margin-top을 (track높이-thumb높이)/2로 직접 줘야 thumb 중심이 track 중심과 맞는다. */
.range-dual input[type="range"]::-webkit-slider-thumb{
  -webkit-appearance:none; pointer-events:auto; width:11px; height:11px; border-radius:50%;
  background:var(--accent-mint); margin-top:-3.5px; cursor:pointer;
}
/* native track은 "thumb가 어디까지 이동 가능한가"를 결정하는 용도로만 남기고 시각적으로는 완전히 숨긴다.
   여기에 폭/margin을 커스텀하면 브라우저의 기본 반지름 인셋과 이중으로 겹쳐 thumb 위치가 또 어긋난다
   (지난 수정의 실패 원인) -- 그래서 width/margin은 절대 건드리지 않고 background만 지운다. */
.range-dual input[type="range"]::-webkit-slider-runnable-track{ height:4px; background:transparent; }
.range-dual input[type="range"]::-moz-range-thumb{
  width:11px; height:11px; border-radius:50%; background:var(--accent-mint); border:none; cursor:pointer;
}
.range-dual input[type="range"]::-moz-range-track{ height:4px; background:transparent; }

/* ---------- map ---------- */
.map-wrap{ flex:1; position:relative; min-width:0; }
#map{ position:absolute; inset:0; background:var(--map-bg); }
.leaflet-container{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }
/* OSM 타일이 원색이라 데이터 폴리곤과 대비가 강함 -> 채도/명암을 낮춰 배경으로 밀어냄 */
.leaflet-tile-pane{ filter:saturate(0.4) brightness(1.18) contrast(0.88); }
.leaflet-control-attribution{ background:rgba(20,23,28,0.85) !important; color:var(--text-faint) !important; }
.leaflet-control-attribution a{ color:var(--text-soft) !important; }

.stat-info{ margin-left:5px; color:var(--text-faint); cursor:help; font-size:11px; }
.stat-info:hover{ color:var(--accent-mint); }

/* Segmentation의 PCA scatter는 Leaflet이 아니라 순수 SVG라, Opportunity Map(.legend)과 별개로
   범례/툴팁/줌버튼을 직접 그려야 함. 클래스명이 .legend와 다른 건 실수 아님 -- 둘 다 유지. */
.map-legend{ position:absolute; top:10px; left:10px; z-index:5; background:rgba(20,23,28,0.92); border:1px solid var(--chrome-line); border-radius:8px; padding:9px 12px; font-size:11px; color:var(--text-soft); }
.map-legend .row{ display:flex; align-items:center; gap:7px; margin-top:4px; }
.map-legend .row:first-child{ margin-top:0; }
.map-legend .sw{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

.map-tip{ position:absolute; pointer-events:none; background:var(--chrome-bg-3); color:var(--text); border:1px solid var(--chrome-line); font-size:12px; padding:7px 10px; border-radius:8px; z-index:6; display:none; line-height:1.5; white-space:nowrap; box-shadow:0 4px 16px rgba(0,0,0,0.35); }
.map-tip b{ display:block; font-size:12.5px; }

.map-zoom{ position:absolute; top:10px; right:10px; display:flex; flex-direction:column; gap:1px; background:var(--chrome-bg-3); border:1px solid var(--chrome-line); border-radius:8px; overflow:hidden; z-index:5; }
.map-zoom button{ width:28px; height:28px; border:none; background:var(--chrome-bg-3); color:var(--text-soft); font-size:15px; }
.map-zoom button:hover{ background:var(--chrome-bg); }

.legend{
  position:absolute; bottom:14px; left:14px; z-index:500; background:rgba(20,23,28,0.92);
  border:1px solid var(--chrome-line); border-radius:8px; padding:9px 12px; font-size:11px; color:var(--text-soft);
  backdrop-filter:blur(4px);
}
.legend .row{ display:flex; align-items:center; gap:7px; margin-top:4px; }
.legend .row:first-child{ margin-top:0; }
.legend .sw{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }

/* leaflet popup theme override */
.leaflet-popup-content-wrapper{ background:var(--chrome-bg-3); color:var(--text); border-radius:8px; }
.leaflet-popup-tip{ background:var(--chrome-bg-3); }
.popup-card{ font-size:12.5px; min-width:190px; }
.popup-card .pname{ font-weight:600; font-size:13.5px; margin-bottom:3px; }
.popup-card .ptype{ color:var(--text-faint); font-size:11px; margin-bottom:8px; }
.popup-card .pscore{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:22px; color:var(--score); font-weight:600; }
.popup-card .plabel{ font-size:10px; color:var(--text-faint); }
.popup-sub{ display:grid; grid-template-columns:1fr 1fr; gap:4px 10px; margin-top:8px; padding-top:8px; border-top:1px solid var(--chrome-line); }
.popup-sub div{ display:flex; justify-content:space-between; font-size:11px; }
.popup-sub b{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text); }

/* ---------- rank list ---------- */
.rail-header{ display:flex; justify-content:space-between; align-items:center; padding:12px 14px; border-bottom:1px solid var(--chrome-line); font-size:11px; font-weight:600; text-transform:uppercase; letter-spacing:0.05em; color:var(--text-faint); }
.rail-count{ color:var(--text-soft); font-weight:400; text-transform:none; letter-spacing:0; }
.rank-body{ flex:1; overflow-y:auto; }
/* 상권명/Score/메타가 겹치지 않도록: .info를 세로 flex로 분리해 이름·메타를 각각 한 줄로 고정하고,
   Score는 고정 폭 우측 정렬로 둬서 이름 길이와 무관하게 항상 분리되게 함(Opportunity Map·Market Detail 공통). */
.rank-row{ display:flex; align-items:center; gap:10px; padding:10px 14px; border-bottom:1px solid var(--chrome-line); cursor:pointer; }
.rank-row:hover{ background:var(--chrome-bg-3); }
.rank-row.selected{ background:var(--accent-mint-dim); }
.rank-row .rk{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:11px; color:var(--text-faint); width:16px; flex-shrink:0; }
.rank-row .info{ flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.rank-row .nm{ display:block; min-width:0; font-size:12.5px; line-height:1.3; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-row .tp{ display:block; min-width:0; max-width:100%; font-size:10.5px; line-height:1.3; color:var(--text-faint); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.rank-row .sc{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-weight:600; color:var(--score); font-size:13px; width:40px; text-align:right; flex-shrink:0; }

/* ---------- Segmentation: 변수 목록 ---------- */
.var-list{ display:flex; flex-direction:column; gap:3px; }
.var-group{ font-size:10.5px; font-weight:600; color:var(--text-soft); margin-top:8px; }
.var-group:first-child{ margin-top:0; }
.var-item{ font-size:11.5px; color:var(--text-faint); line-height:1.5; padding-left:2px; }

/* ---------- Segmentation: K 선택 미니 차트 ---------- */
.k-chart-wrap{ background:var(--chrome-bg-3); border-radius:8px; padding:8px; }
#kChart{ width:100%; height:70px; display:block; }

/* ---------- Segmentation: PCA scatter ---------- */
.scatter-wrap{ position:absolute; inset:0; }
#scatter{ position:absolute; inset:0; }
#scatter svg{ width:100%; height:100%; display:block; }
#scatter circle{ cursor:pointer; transition:opacity 0.15s; }
#scatter circle.dim{ opacity:0.12; }
#scatter circle.hovered{ stroke:#14171C; stroke-width:1.5; }
.pca-caption{
  position:absolute; bottom:14px; right:14px; background:rgba(20,23,28,0.9); border:1px solid var(--chrome-line);
  border-radius:8px; padding:8px 12px; font-size:11px; color:var(--text-soft); text-align:right; max-width:240px; z-index:5;
}
.pca-caption b{ color:var(--text); font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; }

/* ---------- Segmentation: 우측 레일 ---------- */
.rail-wide{ width:340px; }
.cluster-compare{ padding:12px 14px; display:flex; flex-direction:column; gap:12px; border-bottom:1px solid var(--chrome-line); }
.compare-card{ background:var(--chrome-bg-3); border-radius:10px; padding:12px 13px; border:1px solid transparent; cursor:pointer; }
.compare-card:hover{ border-color:var(--chrome-line); }
.compare-card.dim{ opacity:0.4; }
.compare-card .ch{ display:flex; align-items:center; gap:7px; margin-bottom:8px; }
.compare-card .sw{ width:10px; height:10px; border-radius:3px; flex-shrink:0; }
.compare-card .cname{ font-size:12.5px; font-weight:600; flex:1; }
.compare-card .ccount{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-size:11.5px; color:var(--text-faint); }
.time-bars{ display:flex; align-items:flex-end; gap:3px; height:44px; margin-bottom:8px; }
.time-bars .tb{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:2px; }
.time-bars .tb i{ width:100%; border-radius:2px 2px 0 0; background:var(--accent-mint); } /* 클러스터별 실제 색은 JS 인라인 스타일(CLUSTER_COLOR)로 항상 덮어써짐 -- 이 값은 fallback */
.time-bars .tb span{ font-size:8.5px; color:var(--text-faint); }
.scale-stats{ display:grid; grid-template-columns:1fr 1fr; gap:3px 10px; font-size:11px; }
.scale-stats div{ display:flex; justify-content:space-between; color:var(--text-faint); }
.scale-stats b{ font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; color:var(--text-soft); font-weight:500; }

.crosstab-wrap{ padding:10px 14px 0; overflow-x:auto; }
table.crosstab{ width:100%; border-collapse:collapse; font-size:11px; }
table.crosstab th, table.crosstab td{ padding:5px 6px; text-align:right; border-bottom:1px solid var(--chrome-line); }
table.crosstab th{ color:var(--text-faint); font-weight:500; }
table.crosstab td:first-child, table.crosstab th:first-child{ text-align:left; color:var(--text-soft); }
table.crosstab td.hl{ color:var(--accent-mint); font-weight:600; }
.callout-note{ margin:10px 14px 14px; background:var(--accent-mint-dim); border-radius:8px; padding:10px 12px; color:var(--text); line-height:1.6; }

/* scrollbars */
.rail::-webkit-scrollbar, .rank-body::-webkit-scrollbar, .search-results::-webkit-scrollbar{ width:7px; }
.rail::-webkit-scrollbar-thumb, .rank-body::-webkit-scrollbar-thumb, .search-results::-webkit-scrollbar-thumb{ background:var(--chrome-line); border-radius:4px; }

/* ---------- Opportunity Map 팝업 -> Market Detail 연결 버튼 ---------- */
.popup-detail-btn{
  width:100%; margin-top:10px; padding:7px 0; border:1px solid var(--chrome-line); border-radius:6px;
  background:var(--chrome-bg); color:var(--accent-mint); font-size:11.5px; font-weight:600;
}
.popup-detail-btn:hover{ background:var(--accent-mint-dim); }

/* ================= Market Detail ================= */
.detail-wrap{ flex:1; min-width:0; overflow-y:auto; padding:20px 26px 40px; display:flex; flex-direction:column; gap:22px; background:var(--chrome-bg); }
.detail-wrap::-webkit-scrollbar{ width:7px; }
.detail-wrap::-webkit-scrollbar-thumb{ background:var(--chrome-line); border-radius:4px; }

.md-section-title{ font-size:10.5px; font-weight:600; text-transform:uppercase; letter-spacing:0.07em; color:var(--text-faint); margin-bottom:11px; }
.md-section{ display:flex; flex-direction:column; }

/* header */
.md-header{ background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:12px; padding:20px 22px; }
.md-title-row{ display:flex; flex-wrap:wrap; align-items:flex-start; gap:14px 20px; }
.md-title-main{ flex:1 1 200px; min-width:200px; }
.md-name{ font-size:19px; font-weight:700; color:var(--text); margin-bottom:9px; white-space:normal; overflow-wrap:normal; word-break:keep-all; }
.md-badges{ display:flex; gap:6px; flex-wrap:wrap; }
.md-badge{ font-size:11px; padding:3px 9px; border-radius:20px; background:var(--chrome-bg-3); color:var(--text-soft); border:1px solid var(--chrome-line); white-space:nowrap; }
.md-badge-cluster{ display:flex; align-items:center; gap:5px; }
.md-badge .sw{ width:8px; height:8px; border-radius:3px; flex-shrink:0; }
.md-score-block{ text-align:right; flex:0 0 auto; margin-left:auto; }
.md-score{ font-size:34px; font-weight:700; color:var(--score); line-height:1; }
.md-score-label{ font-size:9.5px; letter-spacing:0.06em; color:var(--text-faint); margin-top:3px; }
.md-rank{ font-size:11px; color:var(--text-soft); margin-top:8px; }
.md-rank b{ color:var(--text); }

/* subscore bars */
.md-subscore-grid{ display:flex; flex-direction:column; gap:11px; }
.md-subrow{ display:grid; grid-template-columns:minmax(110px,190px) 1fr 38px; align-items:center; gap:8px 12px; }
.md-subrow .lbl{ font-size:12.5px; color:var(--text); }
.md-subrow .lbl small{ display:block; font-size:10px; color:var(--text-faint); margin-top:1px; font-weight:400; }
.md-subrow .bar-track{ height:9px; background:var(--chrome-bg-3); border-radius:5px; overflow:hidden; }
.md-subrow .bar-fill{ height:100%; border-radius:5px; }
.md-subrow .val{ text-align:right; font-weight:600; font-size:13px; }

/* market profile */
.md-profile-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(200px, 1fr)); gap:18px 26px; }
.md-profile-col{ background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:10px; padding:14px 16px; }
.md-profile-label{ font-size:11px; color:var(--text-soft); margin-bottom:8px; }
.md-time-legend{ display:flex; gap:14px; font-size:10px; color:var(--text-faint); margin-bottom:8px; }
.md-time-legend span{ display:flex; align-items:center; gap:5px; }
.md-time-legend .sw{ width:8px; height:8px; border-radius:2px; display:inline-block; }
.md-time-bars{ display:flex; align-items:flex-end; gap:10px; height:110px; }
.md-time-bars .tcol{ flex:1; display:flex; flex-direction:column; align-items:center; justify-content:flex-end; height:100%; gap:6px; }
.md-time-bars .pair{ display:flex; align-items:flex-end; gap:3px; height:100%; }
.md-time-bars .pair i{ width:10px; border-radius:2px 2px 0 0; display:block; }
.md-time-bars .pair i.this{ background:var(--accent-mint); }
.md-time-bars .pair i.cluster{ background:var(--text-faint); opacity:0.55; }
.md-time-bars .tcol span{ font-size:9.5px; color:var(--text-faint); }
.md-noprofile{ font-size:11.5px; color:var(--text-faint); line-height:1.6; padding:6px 0; }

.md-scale-table{ display:flex; flex-direction:column; }
.md-scale-row{ display:grid; grid-template-columns:1fr minmax(50px,90px) minmax(60px,100px); gap:6px 8px; padding:7px 0; border-bottom:1px solid var(--chrome-line); align-items:center; }
.md-scale-row:last-child{ border-bottom:none; }
.md-scale-row .k{ font-size:11.5px; color:var(--text-soft); }
.md-scale-row .v{ font-size:12px; text-align:right; color:var(--text); }
.md-scale-row .v.cluster{ color:var(--text-faint); }
.md-scale-head .v{ font-size:9.5px; text-transform:uppercase; letter-spacing:0.04em; color:var(--text-faint); }

/* observation / strategic implication rail */
.md-observed{ list-style:none; margin:0; padding:12px 14px; display:flex; flex-direction:column; gap:9px; border-bottom:1px solid var(--chrome-line); }
.md-observed li{ position:relative; padding-left:13px; font-size:12px; color:var(--text-soft); line-height:1.6; }
.md-observed li::before{ content:""; position:absolute; left:0; top:6px; width:5px; height:5px; border-radius:50%; background:var(--text-faint); }
.md-observed b{ color:var(--text); font-weight:600; }
.md-strategic{ padding:12px 14px; display:flex; flex-direction:column; gap:10px; }
.md-strategic-card{ background:var(--accent-mint-dim); border-radius:8px; padding:11px 13px; font-size:12px; line-height:1.6; color:var(--text); }
.md-strategic-card b{ display:block; font-size:10px; text-transform:uppercase; letter-spacing:0.05em; color:var(--accent-mint); margin-bottom:5px; }
.md-strategic-empty{ font-size:11.5px; color:var(--text-faint); line-height:1.7; padding:2px 0; }

/* ================= Validation ================= */
.validation-wrap{ flex:1; min-width:0; overflow-y:auto; padding:26px 30px 60px; background:var(--chrome-bg); }
.validation-wrap::-webkit-scrollbar{ width:7px; }
.validation-wrap::-webkit-scrollbar-thumb{ background:var(--chrome-line); border-radius:4px; }
.validation-inner{ max-width:920px; margin:0 auto; display:flex; flex-direction:column; gap:32px; }

.val-section{ display:flex; flex-direction:column; gap:12px; }
.val-section-head{ display:flex; flex-direction:column; gap:6px; }
.val-method{ font-size:11.5px; color:var(--text-faint); line-height:1.65; }

.val-bt-card, .val-corr-card{ background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:12px; padding:20px 22px; display:flex; flex-direction:column; gap:16px; }

.val-bar-row{ display:grid; grid-template-columns:minmax(120px,180px) 1fr 66px; align-items:center; gap:10px 14px; }
.val-bar-label{ font-size:12.5px; color:var(--text); display:flex; flex-direction:column; gap:2px; }
.val-bar-n{ font-size:10px; color:var(--text-faint); }
.val-bar-track{ height:20px; background:var(--chrome-bg-3); border-radius:5px; overflow:hidden; }
/* 후보군/비후보군 색은 "좋다/나쁘다"를 암시하는 accent(빨강)를 쓰지 않고,
   해석은 색이 아니라 옆의 수치·문구가 전달하도록 중립 색 2개로만 구분한다 */
.val-bar-fill{ height:100%; border-radius:5px; }
.val-bar-fill.candidate{ background:var(--neutral-a); }
.val-bar-fill.noncandidate{ background:var(--neutral-b); }
.val-bar-value{ text-align:right; font-weight:600; font-size:14px; color:var(--text); }

.val-callout{ background:var(--accent-mint-dim); border-radius:8px; padding:12px 14px; font-size:12.5px; line-height:1.65; color:var(--text); }
.val-callout b{ color:var(--text); }

/* 4개 지표가 한 덩어리로 붙어 보이던 문제 -- 행 사이에 명확한 세로 간격을 준다(값·색상 의미는 그대로) */
.val-corr-chart{ display:flex; flex-direction:column; gap:16px; }
.val-corr-row{ display:grid; grid-template-columns:minmax(90px,120px) 1fr 56px; align-items:center; gap:8px 12px; min-height:22px; }
.val-corr-label{ font-size:12px; line-height:1.4; color:var(--text-soft); text-align:left; }
.val-corr-track{ position:relative; height:14px; background:var(--chrome-bg-3); border-radius:4px; overflow:hidden; }
/* 0 기준선을 chrome-line(배경과 거의 구별 안 됨)보다 밝은 톤으로 올려서 실제로 보이게 함 */
.val-corr-zero{ position:absolute; left:50%; top:0; bottom:0; width:1px; background:var(--text-faint); z-index:1; }
.val-corr-fill{ position:absolute; top:0; bottom:0; border-radius:3px; }
/* 상관계수 색은 "좋다/나쁘다"가 아니라 방향(+/-)만 구분 -- cool-tone 팔레트로 통일 */
.val-corr-fill.pos{ background:#78A7FF; }
.val-corr-fill.neg{ background:#A98BEF; }
.val-corr-value{ text-align:right; line-height:1.4; font-size:12px; font-family:"Pretendard",-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif; font-variant-numeric:tabular-nums; color:var(--text-soft); }

.val-hhll-note{ font-size:12px; color:var(--text-soft); line-height:1.65; }
.val-hhll-table-wrap{ overflow-x:auto; background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:12px; }
table.val-hhll-table{ width:100%; border-collapse:collapse; font-size:12px; min-width:560px; }
table.val-hhll-table th, table.val-hhll-table td{ padding:10px 14px; text-align:right; border-bottom:1px solid var(--chrome-line); }
table.val-hhll-table th{ color:var(--text-faint); font-weight:500; font-size:10.5px; text-transform:uppercase; letter-spacing:0.03em; line-height:1.5; }
.th-sub{ text-transform:none; letter-spacing:0; font-size:9.5px; }
table.val-hhll-table td.nm, table.val-hhll-table th:first-child{ text-align:left; color:var(--text); }
table.val-hhll-table td .faint{ color:var(--text-faint); margin-left:4px; font-size:10.5px; }
table.val-hhll-table tr:last-child td{ border-bottom:none; }

.hh-badge{ display:inline-block; font-size:10px; font-weight:700; padding:2px 6px; border-radius:4px; margin-right:6px; }
.hh-hh{ background:rgba(91,141,239,0.2); color:#8FB2F5; }
.hh-ll{ background:rgba(217,165,68,0.2); color:#E8C179; }
.hh-hl{ background:rgba(176,124,217,0.2); color:#C9A3E8; }
.hh-lh{ background:rgba(95,190,142,0.2); color:#8FD6AE; }

.val-final{ background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:12px; padding:26px 28px; display:flex; flex-direction:column; gap:12px; }
.val-final-headline{ font-size:24px; font-weight:700; color:var(--text); }
.val-final-headline .ne{ color:var(--accent-mint); margin:0 8px; }
.val-final-body{ font-size:13px; color:var(--text-soft); line-height:1.75; max-width:720px; }
.val-final-body b{ color:var(--text); }

/* ================= Overview ================= */
.overview-wrap{ flex:1; min-width:0; overflow-y:auto; padding:34px 30px 60px; background:var(--chrome-bg); }
.overview-wrap::-webkit-scrollbar{ width:7px; }
.overview-wrap::-webkit-scrollbar-thumb{ background:var(--chrome-line); border-radius:4px; }
.overview-inner{ max-width:900px; margin:0 auto; display:flex; flex-direction:column; gap:34px; }
.ov-section{ display:flex; flex-direction:column; gap:12px; }

.ov-hero{ display:flex; flex-direction:column; gap:14px; }
.ov-hero-eyebrow{ font-size:11px; font-weight:600; letter-spacing:0.12em; color:var(--accent-mint); text-transform:uppercase; }
.ov-hero-question{ font-size:32px; line-height:1.28; font-weight:700; color:var(--text); margin:0; text-wrap:balance; }
.ov-hero-sub{ font-size:13.5px; line-height:1.7; color:var(--text-soft); max-width:680px; margin:0; }
.ov-hero-sub b{ color:var(--text); }

.ov-flow-steps{ display:flex; align-items:stretch; gap:8px; flex-wrap:wrap; }
.ov-flow-card{ flex:1 1 160px; min-width:150px; background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:10px; padding:14px 15px; text-align:left; color:var(--text); display:flex; flex-direction:column; gap:5px; cursor:pointer; font-family:inherit; }
.ov-flow-card:hover{ border-color:var(--accent-mint); background:var(--chrome-bg-3); }
.ov-flow-step{ font-size:9.5px; font-weight:700; letter-spacing:0.08em; color:var(--accent-mint); }
.ov-flow-title{ font-size:13.5px; font-weight:600; }
.ov-flow-desc{ font-size:11px; color:var(--text-faint); line-height:1.5; }
.ov-flow-arrow{ display:flex; align-items:center; justify-content:center; color:var(--text-faint); font-size:16px; flex:0 0 auto; padding:0 1px; }

.ov-number-grid{ display:grid; grid-template-columns:repeat(auto-fit, minmax(140px,1fr)); gap:12px; }
.ov-number-tile{ background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:10px; padding:16px 14px; text-align:center; }
.ov-number-value{ font-size:26px; font-weight:700; color:var(--accent-mint); }
.ov-number-label{ font-size:10.5px; color:var(--text-faint); margin-top:6px; line-height:1.4; }

.ov-insight-list{ display:flex; flex-direction:column; background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:12px; overflow:hidden; }
.ov-insight-row{ display:flex; gap:14px; padding:16px 18px; border-bottom:1px solid var(--chrome-line); }
.ov-insight-row:last-child{ border-bottom:none; }
.ov-insight-num{ font-size:19px; font-weight:700; color:var(--text-faint); flex-shrink:0; width:22px; }
.ov-insight-title{ font-size:13px; font-weight:600; color:var(--text); margin-bottom:4px; }
.ov-insight-desc{ font-size:12px; color:var(--text-soft); line-height:1.6; }

.ov-usecase{ background:var(--chrome-bg-2); border:1px solid var(--chrome-line); border-radius:12px; padding:18px 20px; }
.ov-usecase-label{ font-size:10.5px; font-weight:600; letter-spacing:0.06em; color:var(--text-faint); text-transform:uppercase; margin-bottom:8px; }
.ov-usecase p{ font-size:12.5px; color:var(--text-soft); line-height:1.7; margin:0; }

.ov-cta{ display:flex; justify-content:center; padding-top:2px; }
/* pale mint를 solid-fill 배경으로 쓸 때는 흰 글씨 대비가 안 나와서(1.4:1) 어두운 chrome-bg 계열 텍스트를 씀 */
.ov-cta-btn{ background:var(--accent-mint); color:var(--chrome-bg); border:none; border-radius:8px; padding:13px 26px; font-size:13.5px; font-weight:700; }
.ov-cta-btn:hover{ background:var(--accent-mint-hover); }
.ov-footer{ text-align:center; font-size:10.5px; color:var(--text-faint); padding-top:4px; display:flex; flex-direction:column; align-items:center; gap:8px; }
.ov-footer-raw-link{ font-size:10.5px; color:var(--text-soft); text-decoration:none; border-bottom:1px dotted var(--text-faint); padding-bottom:1px; }
.ov-footer-raw-link:hover{ color:var(--accent-mint); border-bottom-color:var(--accent-mint); }