/* 앱 셸 — 목업(HAPPYESG 대시보드 목업.dc.html)의 배치 규칙. 색·폰트는 ds/styles.css 토큰만 사용 */
:root{--pg-x:28px;--pg-gap:28px}
html,body{max-width:100%;overflow-x:clip}
body{background:var(--color-neutral-200);margin:0}

/* 상단 내비 */
.topnav{position:sticky;top:0;z-index:20;background:var(--color-bg);border-bottom:1px solid var(--color-divider);padding:10px var(--pg-x);flex-wrap:wrap;gap:6px 22px}
.topnav a.nav-brand{color:inherit;text-decoration:none}
.topnav a[data-route]{padding:4px 0;border-bottom:2px solid transparent;font-family:var(--font-heading);font-weight:var(--font-heading-weight);font-size:15px}
.topnav a[data-route][aria-current="page"]{color:var(--color-accent-700);border-bottom-color:var(--color-accent)}
.tw-toggle{font-size:13px;padding:5px 12px}
.tw-toggle[aria-expanded="true"]{background:var(--color-accent-100);border-color:var(--color-accent)}

/* 보기 설정(#tweaks) — 페이지 위계에서 분리한 플로팅 패널 */
#tweaks{display:none;position:fixed;z-index:30;top:64px;right:16px;width:min(320px,calc(100vw - 32px));max-height:calc(100vh - 88px);overflow:auto;background:var(--color-bg);box-shadow:var(--shadow-lg);padding:16px;flex-direction:column;gap:10px;font-size:12px;color:var(--color-neutral-800)}
#tweaks.open{display:flex}
#tweaks .tw-head{display:flex;align-items:center;justify-content:space-between;font:var(--font-heading-weight) 17px var(--font-heading);color:var(--color-text);margin-bottom:2px}
#tweaks label{display:grid;grid-template-columns:92px minmax(0,1fr);align-items:center;gap:8px}
#tweaks label:has(input[type="checkbox"]){display:flex}
#tweaks select{font:inherit;font-size:12px;padding:5px 6px;border:1px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);width:100%}
#tweaks .tw-legend{margin:0;border-top:1px solid var(--color-divider);padding-top:10px;display:grid;gap:4px;font-size:11px;line-height:1.45;color:var(--color-neutral-700)}
#tweaks .tw-legend div{display:grid;grid-template-columns:72px minmax(0,1fr);gap:8px}
#tweaks .tw-legend dt{font-weight:600;color:var(--color-text)}
#tweaks .tw-legend dd{margin:0}
#tweaks .src{border-top:1px solid var(--color-divider);padding-top:10px;margin-top:4px}

/* 캔버스 카드 */
.dv-card{background:var(--color-bg);border:1px solid var(--color-divider);box-shadow:var(--shadow-md);max-width:1440px;margin:24px auto 48px;overflow:hidden;min-height:600px}
.dv-card [style*="display:grid"]>*,.card{min-width:0}
.loading{padding:60px 20px;text-align:center;color:var(--color-neutral-700)}
.src{font-size:11px;line-height:1.45;color:var(--color-neutral-700)}
.kicker-sm{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--color-neutral-700)}
.mono{font-family:ui-monospace,Menlo,monospace;font-size:11px;color:var(--color-neutral-700)}
.big{font:600 42px/1 var(--font-heading)}
.gradebox{width:88px;height:88px;display:grid;place-items:center;font:600 42px var(--font-heading);flex:none}
/* 추정 표시: 색 면 대신 조용한 캡션 */
.est{display:inline-block;font-size:11px;line-height:1.4;color:var(--color-neutral-700);border-bottom:1px dashed var(--color-neutral-500);padding:0}

/* 세그먼트 */
.seg.seg-btns{display:flex;flex-wrap:wrap}
.seg.seg-btns button{border:0;border-right:1px solid var(--color-divider);font:inherit;font-size:13px;padding:7px 13px;cursor:pointer;background:transparent;color:var(--color-text)}
.seg.seg-btns button:last-child{border-right:0}
.seg.seg-btns button:hover:not([aria-pressed="true"]){background:var(--color-accent-100)}
.seg.seg-btns button[aria-pressed="true"]{background:var(--color-accent);color:var(--color-bg)}
.seg.seg-btns.heading button{font:600 14px var(--font-heading);padding:6px 16px}

/* KPI 스트립: 1px 격자 — 줄바꿈되어도 선이 맞음 */
.kpi-strip{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr))!important;gap:1px;background:var(--color-divider);border:1px solid var(--color-divider)}
.kpi-strip>div{padding:12px 14px;background:var(--color-bg);border:0!important}
.kpi-strip .l{font-size:11px;color:var(--color-neutral-700)}
.kpi-strip .v{font:600 24px/1.2 var(--font-heading)}

/* 버튼류 */
.list-btn{display:grid;grid-template-columns:52px minmax(0,1fr) 14px 34px;gap:6px;align-items:center;padding:7px 6px;font:inherit;font-size:13px;text-align:left;cursor:pointer;border:0;border-bottom:1px solid var(--color-neutral-200);background:transparent;width:100%;color:var(--color-text)}
.list-btn:hover{background:var(--color-neutral-100)}
.list-btn[aria-current="true"]{background:var(--color-accent-100);box-shadow:inset 0 0 0 1px var(--color-accent-300)}
.cell-btn{height:38px;border:0;cursor:pointer;font:inherit;font-size:13px;outline-offset:-2px}
.layer-btn{display:block;width:100%;text-align:left;font:inherit;cursor:pointer;background:transparent;border:0;padding:8px 0;border-bottom:1px solid var(--color-neutral-200);color:var(--color-text)}
.scorebtn{height:52px;border:1px solid var(--color-divider);font:600 20px var(--font-heading);cursor:pointer;background:transparent;color:var(--color-text)}
.scorebtn:hover:not(:disabled):not([aria-pressed="true"]){background:var(--color-accent-100)}
.scorebtn[aria-pressed="true"]{background:var(--color-accent);color:var(--color-bg);border-color:var(--color-accent)}
.scorebtn:disabled{opacity:.45;cursor:not-allowed}
.wf-rect{cursor:pointer}
.cause-btn{text-align:left;font:inherit;cursor:pointer;background:transparent;border:1px solid var(--color-divider);padding:12px 14px;display:flex;flex-direction:column;gap:4px;color:var(--color-text)}
.cause-btn:hover{background:var(--color-neutral-100)}
.cause-btn[aria-pressed="true"]{background:var(--color-accent-100);border-color:var(--color-accent)}
.tbl-sm td{padding:3px 6px}
select.inline{font:inherit;font-size:13px;padding:5px 8px;border:1px solid var(--color-divider);background:var(--color-bg);color:var(--color-text);max-width:100%}
canvas{display:block}

/* 접기 */
.fold>summary{cursor:pointer;list-style:none;display:flex;align-items:center;gap:8px;font:600 15px var(--font-heading);padding:2px 0}
.fold>summary::-webkit-details-marker{display:none}
.fold>summary::before{content:"+";display:inline-grid;place-items:center;width:16px;height:16px;border:1px solid var(--color-divider);font:400 13px/1 var(--font-body);color:var(--color-accent-700)}
.fold[open]>summary::before{content:"−"}
.fold[open]>summary{margin-bottom:8px}

/* 워크벤치 — 목업 1c 3열(항목 · 근거 · 채점) */
.wb-bar{border-bottom:1px solid var(--color-divider);padding:10px 20px;display:flex;flex-direction:column;gap:8px}
.wb-row{display:flex;flex-wrap:wrap;align-items:center;gap:8px 12px}
.wb-title{font:600 18px var(--font-heading)}
.wb-sp{flex:1}
.wb-toggle{display:inline-flex;align-items:center;gap:8px;border:1px solid var(--color-divider);background:transparent;font:inherit;font-size:13px;padding:6px 10px;cursor:pointer;color:var(--color-text)}
.wb-toggle:hover{background:var(--color-neutral-100)}
.wb-toggle .sw{width:28px;height:14px;background:var(--color-neutral-400);position:relative;display:inline-block}
.wb-toggle .sw>span{position:absolute;top:2px;left:2px;width:10px;height:10px;background:var(--color-bg)}
.wb-toggle[aria-pressed="true"] .sw{background:var(--color-accent)}
.wb-toggle[aria-pressed="true"] .sw>span{left:16px}
.wb-msg{margin:10px 20px 0;padding:8px 12px;border:1px solid var(--color-accent);color:var(--color-accent-800);font-size:13px}
.wb-msg.err{border:1.5px solid var(--color-text);color:var(--color-text);font-weight:500}
.wb-grid{display:grid;grid-template-columns:290px minmax(0,1fr) 360px;min-height:840px}
.wb-left{border-right:1px solid var(--color-divider);padding:16px}
.wb-list{display:flex;flex-direction:column;margin-top:6px}
.wb-center{padding:20px;display:flex;flex-direction:column;gap:20px;min-width:0}
.wb-right{border-left:1px solid var(--color-divider);padding:20px;display:flex;flex-direction:column;gap:14px}
.wb-rubric{display:grid;grid-template-columns:repeat(var(--n),minmax(0,1fr));gap:1px;background:var(--color-divider);border:1px solid var(--color-divider);font-size:13px}
.wb-rubric>div{background:var(--color-bg);padding:10px}
.wb-ev{display:grid;grid-template-columns:1fr 1fr;gap:20px}

@media (max-width:1000px){
  .grid-3,.grid-2,.grid-map,.grid-wb,.grid-zone{grid-template-columns:minmax(0,1fr)!important}
  .wb-left{border-right:0;border-bottom:1px solid var(--color-divider)}
  .wb-list{max-height:360px;overflow:auto}
  .wb-right{border-left:0;border-top:1px solid var(--color-divider)}
  .grid-map{height:auto!important}
  .grid-map>div:first-child{border-right:0!important;border-bottom:1px solid var(--color-divider)}
  .grid-map>div:last-child{border-left:0!important;border-top:1px solid var(--color-divider)}
  .map-stage{display:flex;flex-direction:column}
  .map-stage #mapl{position:static!important;height:440px}
  .map-tbar,.map-note,.map-info,.map-bbar{position:static!important;margin:10px}
  .map-tbar{order:-1}
  .map-bbar{flex-wrap:wrap}
}
@media (max-width:760px){
  :root{--pg-x:14px;--pg-gap:18px}
  .dv-card{margin:0;border:0;box-shadow:none}
  .topnav{gap:4px 16px}
  .topnav .tag{display:none}
  h1{font-size:32px}
  .big{font-size:34px}
  .gradebox{width:68px;height:68px;font-size:34px}
  .wb-bar{padding:10px 14px}
  .wb-center,.wb-right{padding:14px}
  .wb-msg{margin:10px 14px 0}
  .wb-rubric,.wb-ev{grid-template-columns:minmax(0,1fr)}
  #tweaks{top:auto;bottom:12px;right:12px;left:12px;width:auto}
}

/* 지도(Leaflet) */
.map-stage{min-height:520px}
.leaflet-container{font:inherit;background:var(--color-neutral-100)}
.base-tiles{filter:grayscale(1) contrast(.9) opacity(.8)}
.leaflet-tooltip.sido-tip{font:600 13px var(--font-heading);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-divider);box-shadow:none}
.leaflet-tooltip.zone-tip{font:600 14px var(--font-heading);color:var(--color-text);background:var(--color-bg);border:1px solid var(--color-accent-700);padding:2px 6px}
.leaflet-control-attribution{font-size:10px}
.map-tbar,.map-info,.map-bbar,.map-note{z-index:500}

/* 랜딩(메인) 스타일은 landing.css (Claude Design 조정본) */

/* 지도 툴팁: 긴 설명이 지도 가장자리에서 잘리지 않게 줄바꿈·폭 제한 */
#mapl .leaflet-tooltip{white-space:normal;width:max-content;max-width:280px;line-height:1.45;font-size:12px}
#mapl .leaflet-tooltip.zone-tip{white-space:nowrap;max-width:none}

/* 지도 타임라인(연도 슬라이더) */
.map-tl{position:absolute;left:14px;right:14px;bottom:14px;z-index:500;background:var(--color-bg);border:1px solid var(--color-divider);padding:8px 12px;display:flex;align-items:center;gap:12px}
.map-tl .tl-play{width:34px;height:34px;flex:none;border:1px solid var(--color-accent-700);background:var(--color-accent-700);color:#fff;font:600 13px var(--font-heading);cursor:pointer}
.map-tl .tl-play:hover{background:var(--color-accent-900)}
.map-tl .tl-year{font:600 26px/1 var(--font-heading);min-width:58px;font-variant-numeric:tabular-nums;color:var(--color-text)}
.map-tl .tl-track{flex:1;position:relative;padding-bottom:14px;min-width:120px}
.map-tl .tl-track input[type=range]{width:100%;accent-color:var(--color-accent-700);margin:0;cursor:pointer}
.map-tl .tl-ticks{position:absolute;left:8px;right:8px;bottom:0;height:12px}
.map-tl .tl-ticks span{position:absolute;transform:translateX(-50%);font-size:10px;color:var(--color-neutral-700)}
.map-tl .tl-note{font-size:10.5px;line-height:1.35;color:var(--color-neutral-700);max-width:230px}
.map-tl{flex-wrap:wrap}
.map-tl .tl-aq{width:100%;display:flex;align-items:center;gap:6px;flex-wrap:wrap;font-size:12px;border-top:1px solid var(--color-divider);padding-top:6px}
.map-tl .tl-aq select{font-size:12px}
@media (max-width:760px){.map-tl{position:static!important;margin:10px;flex-wrap:wrap}.map-tl .tl-note{max-width:none;width:100%}}

/* 상장사 목록 */
.ltable{width:100%;border-collapse:collapse;font-size:13px}
.ltable th{position:sticky;top:0;background:var(--color-bg);text-align:left;font:600 12px var(--font-heading);color:var(--color-neutral-700);padding:8px 10px;border-bottom:1px solid var(--color-divider);white-space:nowrap}
.ltable td{padding:7px 10px;border-bottom:1px solid var(--color-neutral-200);white-space:nowrap}
.ltable .th-arrow{font-size:10px;color:var(--color-neutral-500,#aaa);margin-left:2px}.ltable .th-arrow.on{color:var(--color-accent-800)}.ltable th[data-act]:hover .th-arrow{color:var(--color-text)}
.ltable .lrow{cursor:pointer}.ltable .lrow:hover td{background:var(--color-neutral-100)}
.lbadge{display:inline-block;color:#fff;font:600 12px var(--font-heading);padding:2px 8px;border-radius:2px}
.gbadge{display:inline-block;color:#fff;background:var(--color-accent-800);font:600 12px var(--font-heading);padding:2px 8px;border-radius:2px}
.rb{display:inline-block;font-size:10.5px;border:1px solid var(--color-divider);color:var(--color-neutral-800);padding:0 4px;margin-right:3px}

/* 워크벤치 진입점은 내부(담당자)에서만 — app.js STAFF */
.wb-only{display:none!important}
html.staff .wb-only{display:revert!important}