/* AMA v2 — "Maison" 디자인 레이어. 근흑 바탕 + 샴페인 골드, 원색 배제, 얇은 레일 메뉴, 절제된 모션.
   색은 skins.js의 규격(변수)에서 오고, 여기서는 구조·질감·모션만 다룹니다. */
html[data-lux]{--ease:cubic-bezier(.2,.8,.2,1);--rail:76px;--rail-open:244px;--gold:var(--cy);--hair:color-mix(in srgb,var(--cy) 14%,var(--line));--hair2:color-mix(in srgb,var(--cy) 38%,var(--line))}
html[data-lux] body{background:var(--bg);font-feature-settings:"tnum" 1,"ss01" 1;-webkit-font-smoothing:antialiased;text-rendering:optimizeLegibility}
/* 배경: 은은한 빛 번짐 + 미세 질감 */
html[data-lux] body::before{content:"";position:fixed;inset:0;z-index:0;pointer-events:none;background:
 radial-gradient(900px 520px at 8% -6%,color-mix(in srgb,var(--cy) 11%,transparent),transparent 70%),
 radial-gradient(780px 560px at 100% 104%,color-mix(in srgb,var(--gr) 9%,transparent),transparent 70%);animation:ambient 40s ease-in-out infinite alternate}
html[data-lux] body::after{content:"";position:fixed;inset:0;z-index:1;pointer-events:none;opacity:.05;mix-blend-mode:overlay;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='180' height='180'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='.85' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)'/%3E%3C/svg%3E")}
html[data-lux][data-mode=light] body::after{opacity:.035;mix-blend-mode:multiply}
@keyframes ambient{from{transform:translate3d(0,0,0)}to{transform:translate3d(-2.5%,2%,0) scale(1.04)}}
html[data-lux] .app,html[data-lux] .app>.main{position:relative;z-index:2}
/* ───── 메뉴: 얇은 레일(76px) → 마우스를 올리면 위로 겹쳐 펼침(본문 불이동) ───── */
@media(min-width:1001px){
 html[data-lux] .app{display:block}
 html[data-lux] .app>.main{margin-left:var(--rail);min-width:0}
 html[data-lux] .side{position:fixed;left:0;top:0;bottom:0;height:100vh;width:var(--rail);z-index:60;padding:22px 12px 18px;overflow:hidden;gap:22px;
  background:linear-gradient(180deg,color-mix(in srgb,var(--side1) 92%,transparent),color-mix(in srgb,var(--side2) 96%,transparent));
  -webkit-backdrop-filter:blur(22px) saturate(1.3);backdrop-filter:blur(22px) saturate(1.3);border-right:1px solid var(--hair);
  transition:width .55s var(--ease) .12s,box-shadow .55s var(--ease) .12s}
 html[data-lux] .side:hover,html[data-lux] .side:focus-within,html[data-lux] .side.open{width:var(--rail-open);transition-delay:.05s;box-shadow:30px 0 80px -30px rgba(0,0,0,.55),1px 0 0 var(--hair2)}
 html[data-lux] .brand{display:flex;align-items:center;gap:14px;white-space:nowrap;font-weight:300;letter-spacing:.28em;font-size:13px;text-transform:uppercase;color:transparent;transition:color .4s var(--ease);padding:0 10px;height:30px}
 html[data-lux] .side:hover .brand,html[data-lux] .side:focus-within .brand,html[data-lux] .side.open .brand{color:var(--txt)}
 html[data-lux] .brand .leaf{flex:none;width:30px;height:30px;display:grid;place-items:center;border-radius:50%;color:var(--cy);font-size:16px;border:1px solid var(--hair2);background:color-mix(in srgb,var(--cy) 8%,transparent);box-shadow:0 0 22px -4px color-mix(in srgb,var(--cy) 60%,transparent)}
 html[data-lux] #nav{gap:4px}
 html[data-lux] #nav a{white-space:nowrap;padding:8px 9px;border-radius:14px;gap:16px;letter-spacing:.02em;color:var(--mut);transition:color .35s,background .35s,border-color .35s}
 html[data-lux] #nav a>span:not(.ni){opacity:0;transform:translateX(-10px);transition:opacity .35s var(--ease),transform .5s var(--ease);font-weight:400;font-size:13.5px}
 html[data-lux] .side:hover #nav a>span:not(.ni),html[data-lux] .side:focus-within #nav a>span:not(.ni),html[data-lux] .side.open #nav a>span:not(.ni){opacity:1;transform:none}
 html[data-lux] .side:hover #nav a:nth-child(2)>span:not(.ni){transition-delay:.04s}html[data-lux] .side:hover #nav a:nth-child(3)>span:not(.ni){transition-delay:.08s}html[data-lux] .side:hover #nav a:nth-child(4)>span:not(.ni){transition-delay:.12s}html[data-lux] .side:hover #nav a:nth-child(5)>span:not(.ni){transition-delay:.16s}html[data-lux] .side:hover #nav a:nth-child(6)>span:not(.ni){transition-delay:.2s}html[data-lux] .side:hover #nav a:nth-child(7)>span:not(.ni){transition-delay:.24s}
 html[data-lux] #nav a .ni{width:34px;height:34px;border-radius:50%;flex:none}
 html[data-lux] #nav a.on{background:color-mix(in srgb,var(--cy) 9%,transparent);border-color:var(--hair);box-shadow:none;color:var(--txt)}
 html[data-lux] #nav a.on .ni{background:color-mix(in srgb,var(--cy) 18%,transparent);box-shadow:0 0 0 1px var(--hair2) inset,0 0 24px -6px color-mix(in srgb,var(--cy) 70%,transparent)}
 html[data-lux] #nav a::before{left:-12px;width:2px;background:var(--cy);box-shadow:0 0 12px var(--cy)}
 html[data-lux] .side-foot{white-space:nowrap;overflow:hidden;font-size:11px;letter-spacing:.06em;border-top:1px solid var(--hair);opacity:.0;transition:opacity .4s}
 html[data-lux] .side:hover .side-foot,html[data-lux] .side:focus-within .side-foot,html[data-lux] .side.open .side-foot{opacity:.8}
 html[data-lux] .kbtn{display:flex;align-items:center;gap:14px;white-space:nowrap;margin:0;padding:8px 9px;border-radius:14px;border:1px solid transparent;background:transparent;color:var(--mut);cursor:pointer;font:inherit;font-size:13px;letter-spacing:.02em;transition:.3s}
 html[data-lux] .kbtn:hover{color:var(--txt);background:color-mix(in srgb,var(--cy) 7%,transparent)}
 html[data-lux] .kbtn .ni{width:34px;height:34px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;flex:none;font-size:15px}
 html[data-lux] .kbtn kbd{margin-left:auto;font:inherit;font-size:10.5px;color:var(--mut);border:1px solid var(--hair);border-radius:6px;padding:1px 6px}
 html[data-lux] .kbtn>span:not(.ni){opacity:0;transition:opacity .35s}
 html[data-lux] .side:hover .kbtn>span:not(.ni),html[data-lux] .side:focus-within .kbtn>span:not(.ni),html[data-lux] .side.open .kbtn>span:not(.ni){opacity:1}
}
@media(max-width:1000px){html[data-lux] .kbtn{display:none}}
/* ───── 상단: 유리 질감, 가벼운 제목 ───── */
html[data-lux] .top{position:sticky;top:0;z-index:40;padding:16px 4px 12px;margin-bottom:4px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 90%,transparent) 55%,transparent);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px)}
html[data-lux] h1#title{font-weight:300;font-size:27px;letter-spacing:-.012em;line-height:1.15}
html[data-lux] h1#title::before{content:"AMA · CARBON & ENERGY";display:block;font-size:9.5px;letter-spacing:.36em;font-weight:500;color:var(--cy);margin-bottom:7px;opacity:.9}
html[data-lux] h1#title::after{content:"";display:block;width:34px;height:1px;margin-top:9px;background:linear-gradient(90deg,var(--cy),transparent);animation:rule 1.2s var(--ease) both}
@keyframes rule{from{width:0;opacity:0}to{width:34px;opacity:1}}
/* ───── 카드·표면: 헤어라인, 안쪽 하이라이트 ───── */
html[data-lux] .card{border:1px solid var(--hair);border-radius:20px;padding:18px 20px;background:linear-gradient(180deg,color-mix(in srgb,var(--card1) 96%,transparent),color-mix(in srgb,var(--card2) 96%,transparent));
 box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 6%,transparent),0 22px 44px -28px rgba(0,0,0,.65);transition:border-color .45s var(--ease),transform .5s var(--ease),box-shadow .5s var(--ease)}
html[data-lux][data-mode=light] .card{box-shadow:inset 0 1px 0 #fff,0 18px 40px -26px rgba(70,50,20,.28)}
html[data-lux] .card h3{font-weight:500;font-size:12px;letter-spacing:.16em;text-transform:uppercase;color:var(--mut);display:flex;align-items:center;gap:8px}
html[data-lux] .kx:hover,html[data-lux] .kpi:hover{transform:translateY(-3px);border-color:var(--hair2);box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 8%,transparent),0 28px 50px -26px rgba(0,0,0,.7),0 0 0 1px color-mix(in srgb,var(--cy) 10%,transparent)}
html[data-lux] .kx .v,html[data-lux] .kpi .v{font-weight:200;font-size:40px;letter-spacing:-.025em;line-height:1.05;font-variant-numeric:tabular-nums}
html[data-lux] .kx .u,html[data-lux] .kpi .u{font-weight:300;letter-spacing:.04em;font-size:13px}
html[data-lux] .tag{letter-spacing:.08em;font-size:10px;border-radius:999px;border:1px solid var(--hair);background:transparent;color:var(--mut);padding:1px 8px}
/* 버튼·세그먼트: 윤곽선 중심, 골드 선택 */
html[data-lux] button{border-radius:999px;transition:background .3s,border-color .3s,color .3s,transform .3s var(--ease)}
html[data-lux] button:not(.seg button):hover{transform:translateY(-1px)}
html[data-lux] .seg{border-radius:999px;border:1px solid var(--hair);background:transparent;padding:2px}
html[data-lux] .seg button{border:0;background:transparent;color:var(--mut)}
html[data-lux] .seg button.on{background:color-mix(in srgb,var(--cy) 16%,transparent);color:var(--cy);box-shadow:0 0 0 1px var(--hair2) inset}
html[data-lux] .tbl th,html[data-lux] .mt th{font-weight:500;font-size:11px;letter-spacing:.12em;text-transform:uppercase;color:var(--mut);border-bottom:1px solid var(--hair2)}
html[data-lux] td,html[data-lux] th{border-bottom-color:var(--hair)}
html[data-lux] tr.pick:hover td{background:color-mix(in srgb,var(--cy) 6%,transparent)}
/* ───── 지도: 작고 정제된 지도 ───── */
@media(min-width:721px){
 html[data-lux] .row.r21>.card:first-child .mapbox,html[data-lux] .row.zoomrow>.card:first-child .mapbox,html[data-lux] .mapsplit .mapbox{min-height:300px!important;max-height:430px;height:auto}
 html[data-lux] .row.r21>.card:first-child .mapbox{flex:none;aspect-ratio:957/560!important}
}
html[data-lux] .mapbox{border-radius:16px;border:1px solid var(--hair);box-shadow:inset 0 0 80px rgba(0,0,0,.28);background:radial-gradient(ellipse at 42% 38%,var(--seaA),var(--seaB) 82%)}
html[data-lux] .asia .lead{stroke:var(--cy);stroke-width:1;stroke-dasharray:3 5;opacity:.7;animation:flow 9s linear infinite}
@keyframes flow{to{stroke-dashoffset:-80}}
html[data-lux] .asia .anc{fill:var(--cy);stroke:var(--bg);stroke-width:2.4;filter:drop-shadow(0 0 7px var(--cy))}
html[data-lux] .asia .anc2{stroke:var(--cy);opacity:.5}
html[data-lux] .asia .cbox{fill:color-mix(in srgb,var(--card1) 80%,transparent);stroke:var(--hair2);stroke-width:1;rx:12}
html[data-lux] .asia .ctitle{fill:var(--txt);font-weight:500;letter-spacing:.03em}
html[data-lux] .asia .csum{fill:var(--cy);font-weight:300}
html[data-lux] .asia .cid,html[data-lux] .asia .cv{fill:var(--txt);font-weight:300}
html[data-lux] .asia .crow{fill:transparent}html[data-lux] .asia .crow.on{fill:color-mix(in srgb,var(--cy) 14%,transparent);stroke:var(--hair2)}
html[data-lux] .asia .pt:hover .crow{fill:color-mix(in srgb,var(--cy) 8%,transparent)}
html[data-lux] .asia .mlab{fill:var(--mut);opacity:.55;letter-spacing:.3em;font-weight:300}
html[data-lux] .asia .mlab.sea{fill:var(--mut);opacity:.4;font-style:normal}
html[data-lux] .legend.ov{background:color-mix(in srgb,var(--card1) 80%,transparent);color:var(--mut);border:1px solid var(--hair);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}
/* ───── 모션: 등장(순차), 진행바, 선 그리기 ───── */
@keyframes rise{from{opacity:0;transform:translateY(16px) scale(.985);filter:blur(4px)}to{opacity:1;transform:none;filter:none}}
html[data-lux] .view>*,html[data-lux] .view .row>*,html[data-lux] .view .kxrow>*{animation:rise .9s var(--ease) both;animation-delay:calc(var(--i,0)*80ms + 60ms)}
html[data-lux] .nofx *,html[data-lux].static *,html[data-lux].nomotion *{animation:none!important;transition:none!important}
html[data-lux] .nofx .view>*,html[data-lux].static .view>*{opacity:1!important;transform:none!important}
html[data-lux] .draw{stroke-dasharray:1200;stroke-dashoffset:1200;animation:drawln 1.8s var(--ease) .3s forwards}
@keyframes drawln{to{stroke-dashoffset:0}}
html[data-lux] .nofx .draw,html[data-lux].static .draw{stroke-dasharray:none;stroke-dashoffset:0}
/* ───── 명령 팔레트 ───── */
.kp{position:fixed;inset:0;z-index:200;display:none;align-items:flex-start;justify-content:center;padding-top:14vh;background:rgba(6,5,4,.55);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px)}
.kp.on{display:flex;animation:kpfade .25s ease both}@keyframes kpfade{from{opacity:0}}
.kp-box{width:min(620px,92vw);border-radius:22px;border:1px solid var(--hair2);background:linear-gradient(180deg,var(--card1),var(--card2));box-shadow:0 50px 120px -30px rgba(0,0,0,.8);overflow:hidden;animation:rise .5s var(--ease) both}
.kp-box input{width:100%;border:0;border-bottom:1px solid var(--hair);background:transparent;color:var(--txt);font:inherit;font-size:16px;font-weight:300;letter-spacing:.01em;padding:20px 24px;outline:0}
.kp-list{max-height:48vh;overflow:auto;padding:8px}
.kp-it{display:flex;align-items:center;gap:14px;padding:11px 16px;border-radius:12px;color:var(--mut);cursor:pointer;font-size:14px}
.kp-it small{margin-left:auto;font-size:11px;letter-spacing:.1em;text-transform:uppercase;opacity:.7}
.kp-it.on,.kp-it:hover{background:color-mix(in srgb,var(--cy) 12%,transparent);color:var(--txt)}
.kp-it i{font-style:normal;width:26px;height:26px;border-radius:50%;border:1px solid var(--hair);display:grid;place-items:center;font-size:12px;color:var(--cy)}
.kp-ft{padding:10px 20px;border-top:1px solid var(--hair);font-size:11px;color:var(--mut);letter-spacing:.06em}
/* 모바일은 기존 탭 메뉴 유지 */
@media(max-width:1000px){html[data-lux] .app>.main{margin-left:0}html[data-lux] .side{position:static;width:auto;backdrop-filter:none}html[data-lux] #nav a>span:not(.ni){opacity:1;transform:none}html[data-lux] .brand{letter-spacing:.18em}html[data-lux] h1#title::before{display:none}}
@media(max-width:720px){html[data-lux] .kx .v,html[data-lux] .kpi .v{font-size:30px}}
@media(prefers-reduced-motion:reduce){html[data-lux] *{animation:none!important;transition:none!important}html[data-lux] .view>*{opacity:1!important}}

html[data-lux] .kbtn .ni svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:1.6;stroke-linecap:round}

/* 지도 가장자리 부드럽게 + 국가별 요약 띠 */
html[data-lux] .row.r21>.card:first-child .mapbox svg{-webkit-mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%);mask-image:linear-gradient(90deg,transparent 0,#000 7%,#000 93%,transparent 100%)}
html[data-lux] .row.r21>.card:first-child .mapbox{max-height:400px;flex:none}
html[data-lux] .cstrip{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:14px}
html[data-lux] .cs{border:1px solid var(--hair);border-radius:16px;padding:11px 15px 13px;display:grid;gap:2px;background:color-mix(in srgb,var(--cy) 3%,transparent);transition:border-color .4s var(--ease),transform .5s var(--ease)}
html[data-lux] .cs:hover{border-color:var(--hair2);transform:translateY(-2px)}
html[data-lux] .cs .cn{font-size:10.5px;letter-spacing:.2em;color:var(--mut);text-transform:uppercase}
html[data-lux] .cs .cv{font-weight:200;font-size:21px;letter-spacing:-.01em;font-variant-numeric:tabular-nums}
html[data-lux] .cs .cu{font-size:11.5px;color:var(--mut)}
html[data-lux] .cs .cb{display:block;height:2px;border-radius:2px;background:var(--hair);margin-top:7px;overflow:hidden}
html[data-lux] .cs .cb u{display:block;height:100%;border-radius:2px;transform-origin:left;animation:fillbar 1.4s var(--ease) .5s both}
@keyframes fillbar{from{transform:scaleX(0)}to{transform:scaleX(1)}}
@media(max-width:720px){html[data-lux] .cstrip{grid-template-columns:1fr}}
/* 카드 안 남는 높이는 본문을 가운데로 모아 빈 공간 편중을 막습니다 */
html[data-lux] .view .row>.card:not(.rvl):not(.rvr){display:flex;flex-direction:column}
html[data-lux] .view .row>.card:not(.rvl):not(.rvr)>h3{flex:none}
html[data-lux] .view .row>.card:not(.rvl):not(.rvr)>h3+*{margin-top:auto}
html[data-lux] .view .row>.card:not(.rvl):not(.rvr)>*:last-child{margin-bottom:auto}
html[data-lux] .card h3{letter-spacing:.1em;text-transform:none;font-size:12.5px}
/* 1000~1180px: KPI 5개를 3+2 줄로 균등 배치(마지막 줄 카드가 홀로 남지 않게) */
@media(min-width:721px) and (max-width:1180px){html[data-lux] .kxrow{grid-template-columns:repeat(6,minmax(0,1fr))}html[data-lux] .kxrow>*{grid-column:span 2}html[data-lux] .kxrow>*:nth-child(n+4){grid-column:span 3}}
/* 로그인 화면도 같은 톤으로 */
html[data-lux] .login-bg{background:radial-gradient(900px 600px at 18% -4%,color-mix(in srgb,var(--cy) 15%,transparent),transparent 70%),radial-gradient(820px 620px at 102% 106%,color-mix(in srgb,var(--gr) 11%,transparent),transparent 70%),var(--bg)!important}
html[data-lux] .login h2{font-weight:300;letter-spacing:-.01em}
/* 메인 지도 카드: 카드 높이에 맞춰 지도가 줄고, 제목·요약 띠가 잘리지 않게 */
@media(min-width:721px){
 html[data-lux] .row.main:not(.zoomrow)>.card:first-child{justify-content:flex-start;overflow:visible}
 html[data-lux] .row.main:not(.zoomrow)>.card:first-child .mapbox{flex:1 1 0!important;aspect-ratio:auto!important;min-height:230px!important;max-height:410px!important;height:auto!important}
}
html[data-lux] h1#title{flex:none;white-space:nowrap}
html[data-lux] .top-r{margin-left:auto}
html[data-lux] .kx .v,html[data-lux] .kpi .v{white-space:nowrap;font-size:clamp(30px,2.7vw,40px)}
html[data-lux] .top-r{flex-wrap:wrap;justify-content:flex-end;max-width:100%}
html[data-lux] .view .row>.card:not(.rvl):not(.rvr)>*{flex-shrink:0}
/* 스크롤 영역에서 반쯤 잘린 줄이 이웃 글자와 겹쳐 보이지 않도록 여백 */
html[data-lux] .rvl .rvitems{margin-bottom:24px}
html[data-lux] .rvr .chat{margin-top:18px}
/* 표가 카드 안에 들어가도록 여백·자간 조정 */
html[data-lux] .card{padding:18px 18px}
html[data-lux] .tbl th,html[data-lux] .mt th{letter-spacing:.06em;font-size:10.5px}
html[data-lux] .tbl td,html[data-lux] .mt td{padding-left:8px;padding-right:8px}

/* v2.3: 더 밝은 바탕에 맞춰 질감·그림자 완화 */
html[data-lux] body::after{opacity:.035}
html[data-lux] .card{box-shadow:inset 0 1px 0 color-mix(in srgb,#fff 9%,transparent),0 18px 36px -26px rgba(0,0,0,.45)}
html[data-lux] .mapbox{box-shadow:inset 0 0 60px rgba(0,0,0,.16)}

/* 개요 하단 인사이트 행 */
html[data-lux] .row.ins{margin-top:14px}
html[data-lux] .insc h3{display:flex;align-items:center;gap:8px}
html[data-lux] .insc .tag{font-size:10.5px;color:var(--mu);border:1px solid var(--ln);border-radius:999px;padding:1px 8px;font-weight:400}
html[data-lux] .insc .ibig{font-size:clamp(28px,2.4vw,36px);font-weight:300;letter-spacing:-.01em;margin-top:6px}
html[data-lux] .insc .ibig small{font-size:13px;color:var(--mu)}
html[data-lux] .insc .isub{color:var(--mu);font-size:12.5px;margin:2px 0 12px}
html[data-lux] .insc .li{display:flex;justify-content:space-between;padding:7px 0;border-top:1px solid var(--ln);font-size:12.5px}
html[data-lux] .insc .inote{color:var(--mu);font-size:11.5px;line-height:1.5;margin-top:auto;padding-top:10px}
html[data-lux] .insc .pf{display:grid;grid-template-columns:54px 56px 1fr auto;gap:10px;align-items:center;padding:9px 0;border-top:1px solid var(--ln);font-size:12.5px}
html[data-lux] .insc .pf span{color:var(--mu)}
html[data-lux] .insc .pf .cb{height:5px;background:color-mix(in srgb,var(--tx) 10%,transparent);border-radius:9px;overflow:hidden;display:block}
html[data-lux] .insc .pf .cb u{display:block;height:100%;border-radius:9px}
html[data-lux] .insc .bl{font-size:12.5px;line-height:1.6;margin:0;padding:8px 0;border-top:1px solid var(--ln)}
html[data-lux] .insc{display:flex;flex-direction:column}
@media(max-width:1000px){html[data-lux] .row.ins{grid-template-columns:1fr}}

/* 작업 일지 화면 */
html[data-lux] .jlead{color:var(--mu);font-size:13px;line-height:1.7;margin:2px 0 12px}
html[data-lux] .jitem{display:grid;grid-template-columns:52px 1fr;gap:1px 12px;padding:12px 0;border-top:1px solid var(--ln);color:var(--tx);text-decoration:none}
html[data-lux] .jitem:hover{background:color-mix(in srgb,var(--ac) 7%,transparent)}
html[data-lux] .jitem .jd{grid-row:span 2;color:var(--ac);font-size:17px;font-weight:300}
html[data-lux] .jitem .jt{font-size:14px}
html[data-lux] .jitem .js{color:var(--mu);font-size:12px;line-height:1.5}
html[data-lux] .jbtn{display:inline-block;margin-top:14px;padding:8px 16px;border:1px solid var(--ac);border-radius:999px;color:var(--ac);font-size:12.5px;text-decoration:none}
html[data-lux] .jbtn:hover{background:color-mix(in srgb,var(--ac) 14%,transparent)}
html[data-lux] .view .row>.card.jtop>h3+*{margin-top:10px}
html[data-lux] .view .row>.card.jtop>*:last-child{margin-bottom:0}
html[data-lux] .view .row>.card.jtop{justify-content:flex-start}
html[data-lux] .view .row>.card.jtop:not(.rvl):not(.rvr)>h3+*{margin-top:10px}
html[data-lux] .view .row>.card.jtop:not(.rvl):not(.rvr)>*:last-child{margin-bottom:0}

/* v3: 하단 빈 공간 채우기 */
html[data-lux] .row.r21>.card:first-child{display:flex;flex-direction:column}
html[data-lux] .row.r21>.card:first-child .cstrip{flex:1 1 auto;min-height:0;align-items:stretch}
html[data-lux] .cs{display:flex;flex-direction:column;gap:2px}
html[data-lux] .cs .csp{position:relative;flex:1 1 auto;min-height:30px;margin-top:8px}
html[data-lux] .cs .csp svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
html[data-lux] .cs .csp polyline{fill:none;stroke:var(--cy);stroke-width:1.4;vector-effect:non-scaling-stroke;stroke-linejoin:round}
html[data-lux] .cs .csp polygon{fill:color-mix(in srgb,var(--cy) 12%,transparent);stroke:none}
html[data-lux] .cs .csp span{position:absolute;right:0;bottom:-1px;font-size:10px;color:var(--mut);letter-spacing:.06em}
html[data-lux] .chsum{margin-top:auto;padding-top:12px}
html[data-lux] .chsum .cbar{display:flex;gap:3px;height:6px;border-radius:9px;overflow:hidden}
html[data-lux] .chsum .cbar u{display:block;height:100%;border-radius:9px}
html[data-lux] .chsum .cleg{display:flex;flex-wrap:wrap;gap:6px 14px;margin-top:9px;font-size:11.5px;color:var(--mut)}
html[data-lux] .chsum .cnext{margin:9px 0 0;font-size:12px;color:var(--mut)}

html[data-lux] .row.r21>.card:first-child .cstrip{flex:0 1 auto}
html[data-lux] .cs .csp{min-height:44px}
html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr){display:flex;flex-direction:column;min-height:0;overflow:hidden}
html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr)>.list{flex:0 1 auto;min-height:70px;overflow-y:auto;margin-top:10px}
html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr)>.chsum{margin-top:auto;flex:none}
html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr)>*{flex-shrink:1}
html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr)>h3,html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr)>.chsum,html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr)>.inote,html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr)>p{flex-shrink:0}
/* 선택한 KPI 카드는 종류별 색(녹색·황색·적색 계열)으로 채워 표시 */
html[data-lux] .kx.sel,html[data-lux] .kx.sel:hover{background:linear-gradient(180deg,color-mix(in srgb,var(--cy) 24%,var(--card1)),color-mix(in srgb,var(--cy) 10%,var(--card2)));border-color:var(--cy);box-shadow:0 0 0 1px var(--cy) inset,0 22px 44px -26px color-mix(in srgb,var(--cy) 60%,transparent)}
html[data-lux] .kx.sel .v{color:color-mix(in srgb,var(--cy) 35%,var(--txt))}
/* 상단 KPI 5칸을 모두 같은 폭으로(배출권 시세 포함) */
@media(min-width:1181px){html[data-lux] .r4.kxrow,html[data-lux] .kxrow{grid-template-columns:repeat(5,minmax(0,1fr))}}
html[data-lux] .kxrow>*{min-width:0}
/* 배출권 시세 카드: 좁아져도 줄바꿈이 어색하지 않게 */
html[data-lux] .mktile .mk-sp{display:flex;align-items:flex-end;gap:8px;flex-wrap:nowrap}
html[data-lux] .mktile .mk-sp svg{flex:1 1 0;min-width:0;max-width:100%}
html[data-lux] .mktile .mk-sp .small{white-space:nowrap;flex:none;font-size:10.5px}
/* 상단 제목 영역: 박스처럼 보이던 배경을 없애고 위에서 아래·양옆으로 자연스럽게 번지듯 사라지게 */
html[data-lux] .top{margin-left:-56px;margin-right:-56px;padding-left:60px;padding-right:60px;padding-bottom:22px;background:linear-gradient(180deg,color-mix(in srgb,var(--bg) 82%,transparent),color-mix(in srgb,var(--bg) 46%,transparent) 70%,transparent);-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);border:0;box-shadow:none;
  -webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%),linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);-webkit-mask-composite:source-in;mask-image:linear-gradient(180deg,#000 52%,transparent 100%),linear-gradient(90deg,transparent 0,#000 56px,#000 calc(100% - 56px),transparent 100%);mask-composite:intersect}
@media(max-width:1000px){html[data-lux] .top{margin-left:0;margin-right:0;padding-left:4px;padding-right:4px;-webkit-mask-image:linear-gradient(180deg,#000 52%,transparent 100%);mask-image:linear-gradient(180deg,#000 52%,transparent 100%)}}
/* 지도 카드는 상단 KPI 3칸 끝선에, 오른쪽 열은 4번째 KPI 왼쪽 끝선에 맞춤(5칸 격자 공유) */
@media(min-width:1181px){
  html[data-lux] .row.r21.main{grid-template-columns:repeat(5,minmax(0,1fr))}
  html[data-lux] .row.r21.main>.card:first-child{grid-column:span 3}
  html[data-lux] .row.r21.main>.col{grid-column:span 2;min-width:0}
}
/* 오른쪽 열 내용이 길면 행 높이가 늘어나도록(잘리지 않게), 왼쪽은 지도:요약 띠를 3:1로 나눠 채움 */
html[data-lux] .view .row>.card.chkc:not(.rvl):not(.rvr){min-height:auto;overflow:visible}
html[data-lux] .row.r21.main>.col>.card{min-height:auto}
html[data-lux] .row.r21>.card:first-child .mapbox{flex:3 1 0}
html[data-lux] .row.r21>.card:first-child .cstrip{flex:1 1 auto}
@media(min-width:1181px){
  html[data-lux] .row.r21.main:not(.zoomrow)>.col>.card:last-child{flex:1 0 auto;overflow:visible}
  html[data-lux] .row.r21.main:not(.zoomrow)>.col>.card:last-child>.list{max-height:none;overflow:visible}
}
/* 지도가 남는 높이를 우선 차지하고, 국가 요약 띠는 자기 높이만 사용 */
html[data-lux] .row.main:not(.zoomrow)>.card:first-child .mapbox{flex:1 1 0!important;max-height:520px!important;min-height:260px!important}
html[data-lux] .row.r21.main:not(.zoomrow)>.card:first-child .cstrip{flex:0 0 auto!important}
html[data-lux] .cs .csp{flex:0 0 58px;min-height:58px}