@font-face{font-family:"Pretendard Variable";src:url("./fonts/PretendardVariable.woff2") format("woff2");font-weight:100 900;font-display:swap}
@font-face{font-family:"Jost";src:url("./fonts/JostVariable-Latin.woff2") format("woff2");font-weight:200 600;font-display:swap}

/* 색: 먹색 하나를 주색으로 쓰고, 판정만 파랑(충족), 청록(주의), 빨강(미충족)으로 칠한다 */
:root{
  color-scheme:light;
  --ink:#141210;
  --ink-2:#4A4541;
  --muted:#736D68;
  --line:#E5E2DF;
  --surface:#F6F5F4;
  --accent:#141210;
  --ok:#366ECD;
  --warn:#2C6464;
  --ok-text:#366ECD;
  --warn-text:#2C6464;
  --bad:#C94C48;
  --bad-text:#C94C48;
  --stone:#D9D5D1;
  --pale:#ECE9E6;
  --cell:34px;
  --r:6px;
  --r-lg:10px;
  --sans:"Pretendard Variable",Pretendard,"Noto Sans KR","Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  --num:"Jost","Pretendard Variable",sans-serif;
}

/* 기본 */
*{box-sizing:border-box}
html{scroll-behavior:smooth}
body{margin:0;background:#fff;color:var(--ink);font:14px/1.5 var(--sans);font-synthesis:none}
h1,h2,h3,p{margin-top:0}
a{color:inherit}
button,select{font:inherit;-webkit-tap-highlight-color:transparent}
button{cursor:pointer}
:focus-visible{outline:2px solid var(--accent);outline-offset:3px}
.num{font-variant-numeric:tabular-nums}
.loading{padding:5rem 1rem;text-align:center;color:var(--muted)}
.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg)}

/* 틀: 왼쪽 메뉴, 상단, 하단 */
.app-shell{display:grid;grid-template-columns:76px minmax(0,1fr);min-height:100vh;max-width:1920px;margin:auto}
.rail{position:sticky;top:0;z-index:3;height:100vh;display:flex;flex-direction:column;align-items:center;gap:44px;padding:20px 10px;border-right:1px solid var(--line);background:#fff}
/* 왼쪽 위 로고: SC2K */
.brand-mark{display:block;color:var(--ink);font-size:13px;font-weight:750;letter-spacing:-.03em;line-height:1.1;text-decoration:none;white-space:nowrap}
.brand-mark .bw-full{display:none}
.brand-mark .bw-short{display:block;font-size:15px}
.rail-links{display:flex;flex-direction:column;gap:10px;width:100%}
.rail-links a{position:relative;height:50px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;border-radius:var(--r);color:var(--muted);font-size:11px;text-decoration:none}
.rail-links a:hover{color:var(--ink);background:var(--surface)}
.rail-links a.active{color:var(--accent);background:var(--surface)}
.rail-links a.active:before{content:"";position:absolute;left:0;top:12px;bottom:12px;width:2px;border-radius:1px;background:var(--accent)}
.rail-links svg{width:19px;height:19px;fill:none;stroke:currentColor;stroke-width:1.4;stroke-linecap:round;stroke-linejoin:round}
.workspace{min-width:0;display:flex;flex-direction:column;padding:0 clamp(22px,3.3vw,58px)}
.topbar{min-height:72px;display:flex;flex-wrap:wrap;align-items:center;justify-content:space-between;gap:10px 24px;padding:10px 0;border-bottom:1px solid var(--line)}
.brand-title{display:flex;align-items:baseline;gap:11px;white-space:nowrap;text-decoration:none}
.brand-title strong{font-size:19px;font-weight:650;letter-spacing:-.04em}
.brand-title span{padding-left:11px;border-left:1px solid var(--line);color:var(--muted);font-size:12px}
.topbar-actions{flex:1;display:flex;align-items:center;justify-content:flex-end;gap:8px}
.proposal-notice{margin-right:auto;color:var(--muted);font-size:12px;white-space:nowrap} /* 안내는 왼쪽, 검색칸과 보고서 칸은 오른쪽에 붙여 둠 */
.report-select{display:flex;align-items:center;gap:8px;color:var(--muted);font-size:12px;white-space:nowrap}
.report-select{position:relative}
.report-select > button{position:relative;min-width:140px;height:36px;padding:0 32px 0 12px;border:1px solid var(--stone);border-radius:var(--r);background:var(--surface);color:var(--ink);font-weight:600;text-align:left}
.report-select > button:after{content:"";position:absolute;top:50%;right:13px;width:6px;height:6px;margin-top:-5px;border:solid var(--muted);border-width:0 1.5px 1.5px 0;transform:rotate(45deg)}
.report-select > button[aria-expanded="true"]{border-color:var(--ink-2)}
.report-select > button span{margin-right:8px;color:var(--muted);font-weight:500}
/* 보고서 고르는 창: 칸을 덮지 않고 아래 왼쪽으로 펼치는 가로 창, 살짝 비치는 흰 바탕. 누른 칸 쪽(오른쪽 위)에서 커지며 열림 */
.report-pop{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:max-content;max-width:calc(100vw - 32px);padding:14px 16px 12px;border:1px solid var(--line);border-radius:var(--r-lg);background:rgba(255,255,255,.74);-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);box-shadow:0 12px 32px rgba(20,18,16,.12);color:var(--ink);font-size:12px;transform-origin:top right;animation:rp-in .16s ease-out}
.report-pop.side{position:fixed;right:auto;transform-origin:top left} /* 사이드바에서 연 경우: 코인 줄 오른쪽. left, top은 app.js가 넣음 */
@keyframes rp-in{from{opacity:0;transform:scale(.97)}}
@media(prefers-reduced-motion:reduce){.report-pop{animation:none}}
/* 한 판: 왼쪽 보고서 이름, 위 연도 탭, 칸은 달 숫자. 좁은 화면에서는 칸이 줄어듦 */
.rp-body{display:grid;grid-template-columns:max-content minmax(0,1fr);gap:6px 14px;align-items:center}
.rp-years{display:flex;gap:4px;margin-bottom:4px}
.rp-years button{padding:3px 8px;border:0;border-radius:var(--r);background:none;color:var(--muted);font:500 12px/1.4 var(--num);font-variant-numeric:tabular-nums}
.rp-years button:hover{color:var(--ink);background:rgba(20,18,16,.05)}
.rp-years button[aria-selected="true"]{background:var(--ink);color:#fff;font-weight:600}
.rp-name{justify-self:start;padding:0;border:0;background:none;color:var(--ink-2);text-align:left;white-space:nowrap}
.rp-name:hover{color:var(--ink)}
/* 한 줄(이름 + 달 칸): 부모 격자 열을 그대로 써서 줄이 맞음. 진하기 3단계: 다른 줄 < 고른 보고서의 줄(cur) < 이름을 눌러 강조한 줄(pick) */
.rp-line{grid-column:1/-1;display:grid;grid-template-columns:subgrid;align-items:center;margin:-3px -8px;padding:3px 8px;border-radius:var(--r);transition:background-color .15s ease-out,opacity .15s ease-out}
.rp-line.cur{background:rgba(20,18,16,.04)}
.rp-line.pick{background:rgba(20,18,16,.09)}
.rp-line.pick .rp-name{color:var(--ink);font-weight:650}
.rp-body.picking .rp-line:not(.pick){opacity:.45}
.rp-body.picking .rp-line.cur:not(.pick){opacity:.8}
.rp-name.on{color:var(--ink);font-weight:650}
.rp-name.hi{color:var(--ink)}
.rp-row{display:flex;align-items:center;gap:3px}
.rp-row button,.rp-row i{flex:0 1 auto;width:28px;min-width:14px;height:22px;padding:0;border:0;border-radius:3px}
.rp-row .qe{margin-right:6px}
/* 분기 줄: 석 달 칸 폭만큼 */
.rp-qs b{flex:0 1 auto;width:90px;padding-bottom:3px;border-bottom:1px solid var(--stone);color:var(--muted);font-size:11px;font-weight:500;text-align:center}
.rp-row button{background:var(--stone);color:var(--ink-2);font:500 11px/22px var(--num);font-variant-numeric:tabular-nums;text-align:center}
.rp-row button:hover{background:var(--muted);color:#fff}
.rp-row button.on{background:var(--ink);color:#fff;font-weight:650;box-shadow:0 0 0 2px #fff,0 0 0 3px var(--ink)}
.rp-row button:focus-visible{outline-offset:2px}
.rp-row i.miss{display:grid;place-items:center}
.rp-row i.later{box-shadow:inset 0 0 0 1px var(--stone)}
.rp-row i.miss:after{content:"";width:3px;height:3px;border-radius:50%;background:var(--muted)}
.rp-cap{display:flex;align-items:baseline;gap:8px;margin-top:10px;padding-top:10px;border-top:1px solid var(--line);color:var(--ink-2);white-space:nowrap}
.rp-cap span{color:var(--muted)}
.search{position:relative}
.search-icon{position:absolute;top:50%;left:11px;width:16px;height:16px;margin-top:-8px;fill:none;stroke:var(--muted);stroke-width:1.8;stroke-linecap:round;pointer-events:none}
.search input{width:clamp(240px,24vw,380px);height:36px;padding:0 12px 0 34px;border:1px solid var(--stone);border-radius:var(--r);background:var(--surface);color:var(--ink);font:inherit;font-size:13px}
.search input::placeholder{color:var(--muted)}
.search input:focus-visible{outline:none;border-color:var(--ink-2)}
.search input::-webkit-search-cancel-button{-webkit-appearance:none}
.search-list{position:absolute;top:calc(100% + 6px);right:0;z-index:30;width:340px;max-height:360px;overflow:auto;margin:0;padding:6px;list-style:none;border:1px solid var(--line);border-radius:var(--r);background:#fff;box-shadow:0 8px 24px rgba(20,18,16,.08)}
.search-list li{display:grid;grid-template-columns:40px minmax(0,1fr) auto;align-items:baseline;gap:8px;padding:7px 8px;border-radius:4px;font-size:13px;cursor:pointer}
.search-list li[aria-selected=true]{background:var(--pale)}
.search-kind,.search-sub{color:var(--muted);font-size:11px;white-space:nowrap}
.search-title{overflow:hidden;color:var(--ink);font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.search-list .search-empty{display:block;color:var(--muted);cursor:default}
.hm-rule.hit{background:var(--pale)}
.footer{margin-top:auto;min-height:44px;display:flex;align-items:center;justify-content:space-between;gap:6px 12px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}

/* 판정 표시: 정사각형 색 칸. 충족 초록, 주의 주황, 미충족 빨강, 판정 안 됨 옅은 회색 */
.sw{display:inline-block;flex:none;width:10px;height:10px;border-radius:2px}
.sw.met,.hm-c.met{background:var(--ok)}
.sw.caution,.hm-c.caution{background:var(--warn)}
.sw.unmet,.hm-c.unmet{background:var(--bad)}
.sw.none,.hm-c.none{background:var(--pale)}
.sw.none{box-shadow:inset 0 0 0 1px var(--stone)}
.status.met,.hm-st.met,.kr-find-key.met{color:var(--ok-text)}
.status.caution,.hm-st.caution,.kr-find-key.caution{color:var(--warn-text)}
.status.unmet,.hm-st.unmet,.kr-find-key.unmet{color:var(--bad-text)}
.legend{display:flex;flex-wrap:wrap;align-items:center;gap:6px 16px;color:var(--muted);font-size:12px}
.legend>span{display:inline-flex;align-items:center;gap:6px}
.legend b{color:var(--ink);font-weight:650}

/* 개요 */
.home{padding:18px 0 14px}
.home-head{display:flex;align-items:start;justify-content:space-between;gap:18px;margin-bottom:14px}
.home-head h1{margin:0 0 3px;font-size:clamp(23px,2vw,30px);font-weight:650;letter-spacing:-.04em;line-height:1.25}
.home-head p{margin:0;color:var(--muted);font-size:13px}
.lead{margin:6px 0 10px;color:var(--ink-2);font-size:15px;line-height:1.6}
.steps{display:flex;flex-wrap:wrap;gap:6px 26px;margin:0 0 10px;padding:0;list-style:none;color:var(--ink-2);font-size:13px}
.steps li{display:flex;align-items:baseline;gap:7px}
.steps b{color:var(--accent);font-size:15px;font-weight:600}
.home-head .report-line{color:var(--muted);font-size:13px}
.head-index{padding-bottom:3px;color:var(--muted);font-size:12px;white-space:nowrap}
.stats{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) minmax(0,1fr);margin-bottom:14px}
.stat{padding:12px 22px 12px;border-right:1px solid var(--line)}
.stat:last-child{border-right:0}
.stat-label{display:block;color:var(--muted);font-size:12px}
.stat-value{display:block;color:var(--accent);font:200 clamp(34px,3.1vw,46px)/1.05 var(--num);letter-spacing:-.04em}
.stat-main .stat-value{font-size:clamp(46px,4.2vw,62px)}
.stat-value small{margin-left:3px;font:500 .42em var(--sans);letter-spacing:0}
.stat-note{display:block;margin-top:4px;color:var(--muted);font-size:12px;line-height:1.5}

/* 준비금 구성 그래프 */
.chart-card{min-width:0;margin-bottom:14px;padding:15px 20px 13px}
.panel-heading,.section-head{display:flex;justify-content:space-between;gap:12px}
.panel-heading{align-items:start}
.section-head{align-items:end;margin-bottom:11px}
.panel-heading h2,.section-head h2{margin:0 0 2px;font-size:17px;font-weight:650;letter-spacing:-.03em}
.panel-heading p,.section-head p{margin:0;color:var(--muted);font-size:12px}
.panel-index{color:var(--muted);font-size:12px;white-space:nowrap}
.seg.bank{background:var(--accent)}
.seg.repo{background:var(--ink-2)}
.seg.fund{background:var(--muted)}
.seg.treasury{background:var(--stone)}
.seg.other{background:var(--pale)}
/* 준비금 보고서 비교 격자: 줄은 코인, 칸은 달. 좁은 화면은 격자만 가로로 밀어 본다 */
.mx-wrap{overflow-x:auto;margin-top:12px}
.mx{display:grid;grid-template-columns:minmax(130px,1.2fr) repeat(var(--n),minmax(22px,1fr));gap:2px;min-width:calc(130px + var(--n) * 24px)}
.mx-m{align-self:end;padding-bottom:2px;text-align:center;color:var(--muted);font-size:11px;white-space:nowrap}
.mx-m.chosen{color:var(--ink);font-weight:700}
.mx-m.yr{justify-self:start;text-align:left}
.mx-corner{text-align:left}
.mx-head{display:flex;flex-direction:column;justify-content:center;gap:4px;min-width:0;padding-right:10px}
.mx-head strong{font-size:13px;font-weight:650}
.mx-head small{color:var(--muted);font-size:11px;line-height:1.2}
.mx-bar{display:flex;height:8px;overflow:hidden;border-radius:2px}
.mx-bar .seg{display:block;height:100%}
.mx-c{display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;min-height:40px;padding:3px 0;border:0;border-radius:3px;background:#fff;color:var(--ink);cursor:pointer}
.mx-c b{font-size:10px;font-weight:650;line-height:1.25}
.mx-c sup{font-size:8px}
.mx-c small{color:var(--muted);font-size:9px;line-height:1.25}
.mx-c small.over{color:var(--bad-text);font-weight:650}
.mx-c.hi,.tint.hi{background:color-mix(in srgb,var(--ok) 14%,#fff)}
.mx-c.lo,.tint.lo{background:color-mix(in srgb,var(--bad) 11%,#fff)}
.mx-c.hi b{color:var(--ok-text)}
.mx-c.lo b{color:var(--bad-text)}
.mx-c:hover{filter:brightness(.96)}
.mx-c.selected{box-shadow:inset 0 0 0 1.5px var(--ink)}
.mx-c.empty{cursor:default;color:var(--muted);font-size:11px;line-height:1}
/* 빈 칸 이유: 출시 전은 회색 칸, 합계 오류로 뺌은 빨간 테두리와 ×, 아직 게시 전은 점선과 …, 분기 공시는 – */
.mx-c.pre,.mk.pre{background:var(--surface);box-shadow:inset 0 0 0 1px var(--line)}
.mx-c.excl,.mk.excl{background:color-mix(in srgb,var(--bad) 7%,#fff);box-shadow:inset 0 0 0 1px color-mix(in srgb,var(--bad) 55%,#fff);color:var(--bad-text);font-weight:700}
.mx-c.wait,.mk.wait{background:#fff;outline:1px dashed var(--muted);outline-offset:-2px;color:var(--muted)}
.mx-c.nb,.tint.nb{background:repeating-linear-gradient(135deg,#fff 0 3px,var(--pale) 3px 6px)}
.mx-c.nb b{color:var(--muted)}
.mk{display:inline-grid;place-items:center;flex:none;width:14px;height:14px;border-radius:3px;background:#fff;box-shadow:inset 0 0 0 1px var(--line);color:var(--muted);font-size:10px;font-style:normal;line-height:1}
.chart-foot .mx-key{flex:1 0 100%}
.chart-foot{display:flex;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:6px 20px;margin-top:12px}
.legend .seg{display:inline-block;width:10px;height:10px;border-radius:2px}
.legend .tint{display:inline-block;width:10px;height:10px;border-radius:2px}
.chart-note{margin:0;color:var(--muted);font-size:12px}

/* 나라별 판정 카드 */
.disclosure{padding:12px 4px 0;color:var(--muted);font-size:12px;line-height:1.6}
.disclosure strong{color:var(--ink);font-weight:600}

/* 한국 판정 결과와 규칙별 판정 목록 */
.result{margin-bottom:14px;padding:14px 16px 12px}
.result .section-head{align-items:start}
.link-more{color:var(--accent);font-size:13px;font-weight:600;text-decoration:none;white-space:nowrap}
.link-more:hover{text-decoration:underline}
.result-body{display:grid;gap:10px}
.kr-finds .kr-find:first-child{margin-top:0}
.kr-find{display:flex;align-items:baseline;gap:4px 14px;margin:8px 0 0;color:var(--ink-2);font-size:13px;line-height:1.6}
.kr-find-key{display:inline-flex;flex:none;align-items:center;gap:6px;font-size:12px;font-weight:650}
.rl-section{margin-bottom:14px;padding:14px 16px 16px}
.hm{display:flex;flex-direction:column;padding:0 16px 14px;border-radius:var(--r);background:#fff}
.hm-col{display:contents}
.hm-block{order:var(--o);padding-top:16px}
.hm-row{display:grid;grid-template-columns:var(--hm-name,220px) max-content minmax(0,1fr);align-items:center;column-gap:var(--hm-gap,20px);margin-top:3px}
.hm-cells{display:flex;gap:3px}
.hm-cells>:first-child{margin-right:5px}
.hm-c{position:relative;display:block;flex:none;width:var(--cell);height:var(--cell);border-radius:2px}
.hm-head{align-items:end;margin:0}
.hm-head a,.hm-head .hm-why{color:var(--muted);font-size:11px;line-height:1.25;font-weight:500}
.hm-head a{flex:none;width:var(--cell);text-align:center;text-decoration:none;white-space:nowrap}
.hm-head a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.hm-title{margin:0;color:var(--ink);font-size:15px;font-weight:700;letter-spacing:-.02em}
.hm-rule{padding:6px 0 8px;border-bottom:1px solid var(--pale)}
.hm-rule .hm-row{margin-top:0}
.hm-name{font-size:13px;font-weight:500}
.hm-name small,.hm-none{color:var(--muted)}
.hm-name small{margin-left:3px;font:500 11px var(--num)}
.hm-why{min-width:0;color:var(--ink-2);font-size:12px;line-height:1.4}
.hm-st{margin-right:3px;font-weight:650}
.sr{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
.home-sec{margin:18px 0 10px;max-width:880px}
.home-sec h2{margin:0 0 4px;font-size:20px;font-weight:650;letter-spacing:-.03em}
.home-sec p{margin:0;color:var(--ink-2);font-size:13px;line-height:1.65}

@media(min-width:1100px){
  .result-body{grid-template-columns:max-content minmax(0,1fr);gap:0 24px;align-items:center}
  .kr-finds{display:flex;flex-direction:column;gap:10px}
  .kr-finds .kr-find{margin:0}
}
@media(min-width:1152px){
  :root{--hm-name:144px;--hm-gap:14px}
  .hm{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));column-gap:36px;align-items:start}
  .hm-col{display:flex;flex-direction:column}
  .hm-block{order:0}
}
@media(min-width:1152px) and (max-width:1299px){
  :root{--cell:28px}
}
@media(min-width:1152px) and (max-width:1199px){
  :root{--cell:24px}
}

/* 나라 상세: 왼쪽 요약 */
.detail{padding:18px 0}
.detail-head{display:flex;justify-content:space-between;align-items:center;gap:18px;margin-bottom:14px}
.back-link{color:var(--accent);font-size:13px;font-weight:600;text-decoration:none}
.back-link:hover{text-decoration:underline}
.detail-head .context{color:var(--muted);font-size:12px}
.detail-layout{display:grid;grid-template-columns:minmax(320px,.86fr) minmax(0,1.4fr);gap:18px;align-items:start}
.identity-card{--px:26px;--py:20px;position:relative;overflow:hidden;display:flex;flex-direction:column;gap:16px;padding:var(--py) var(--px)}
.identity-top{position:relative;z-index:1;display:flex;justify-content:space-between;align-items:center;gap:10px;margin-top:-4px;min-height:96px}
.identity-card>div:not(.identity-top):not(.globe),.identity-card>p{position:relative;z-index:1}
.identity-name{min-width:0}
.identity-name .legal{padding-top:10px;text-align:left}
.identity-top h1{margin:0;font-size:40px;font-weight:650;letter-spacing:-.05em;line-height:1.1}
.legal{padding-top:4px;text-align:right;color:var(--muted);font-size:12px}
.legal strong{display:block;margin-top:2px;color:var(--ink);font-size:14px;font-weight:650}
.score{display:flex;align-items:baseline;gap:12px;margin-bottom:12px}
.score strong{color:var(--accent);font:200 56px/1 var(--num);letter-spacing:-.04em}
.score strong small{margin-left:4px;color:var(--muted);font:500 18px var(--sans);letter-spacing:0}
.score span{color:var(--muted);font-size:13px}
.rule-grid{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:3px;margin-bottom:12px}
.rg{height:40px;display:flex;align-items:center;justify-content:center;border-radius:2px;color:#fff;font-size:11px;font-weight:600}
.rg.met{background:var(--ok)}
.rg.unmet{background:var(--bad)}
.rg.caution{background:var(--warn);color:#fff}
.rg.none{background:var(--pale);color:var(--muted);font-weight:500}
.small-head{margin-bottom:6px;color:var(--accent);font-size:12px;font-weight:700}
.identity-card p{margin:0;color:var(--ink-2);font-size:14px;line-height:1.8}
.notes{display:flex;flex-direction:column;gap:8px}
.comparison-note{padding:10px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink-2);font-size:12px;line-height:1.6}
.source-links{margin:0;padding:0;list-style:none;font-size:13px;line-height:1.75}
.source-links a{text-underline-offset:2px}
.source-date{padding-top:11px;border-top:1px solid var(--line);color:var(--muted);font-size:12px}

/* 나라 상세: 오른쪽 탭 */
.detail-right{min-width:0;overflow:hidden}
.detail-tabs{display:grid;grid-template-columns:1fr 1fr;padding:0 16px;border-bottom:1px solid var(--line)}
.detail-tabs button{min-height:52px;margin-bottom:-1px;border:0;border-bottom:2px solid transparent;background:none;color:var(--muted);font-weight:600}
.detail-tabs button:hover{color:var(--ink)}
.detail-tabs button[aria-selected=true]{color:var(--accent);border-bottom-color:var(--accent)}
.pane-intro{padding:12px 20px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;line-height:1.6}
.pane-intro strong{color:var(--ink)}
.rule-item{border-bottom:1px solid var(--line)}
.rule-heading{display:grid;grid-template-columns:40px minmax(0,1fr) auto 84px 12px;align-items:center;gap:12px;width:100%;min-height:52px;padding:8px 20px;border:0;background:none;color:var(--ink);text-align:left}
.rule-heading:hover,.rule-item.open .rule-heading{background:#fff}
.rule-code{color:var(--muted);font-size:12px;font-weight:600}
.rule-title{font-size:14px;font-weight:600}
.rule-vals{text-align:right;font-size:13px;white-space:nowrap}
.rule-vals small{display:block;color:var(--muted);font-size:11px}
.status{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:600;white-space:nowrap}
.status.none{color:var(--muted)}
.chevron{width:8px;height:8px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:translateY(-2px) rotate(45deg)}
.rule-item.open .chevron{transform:translateY(2px) rotate(-135deg)}
.rule-body{padding:12px 20px 16px 72px;background:#fff;font-size:13px;line-height:1.65}
.value-pair{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin:0 0 10px}
.value-pair dt{color:var(--muted);font-size:12px}
.value-pair dd{margin:2px 0 0;font-size:16px;font-weight:650;overflow-wrap:anywhere}
.rule-body p{margin:6px 0}
.rule-body .key{margin-right:8px;color:var(--muted);font-weight:600}
.rule-body a{color:var(--accent);text-underline-offset:2px}
.kind-box{margin:8px 0}
.kind-list{margin:4px 0 0;padding:0;list-style:none}
.kind-list li{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:baseline;gap:2px 14px;padding:7px 0;border-top:1px solid var(--line)}
.kind-name{font-weight:600}
.kind-v{display:inline-flex;align-items:center;gap:6px;font-size:12px;font-weight:650}
.kind-v.met{color:var(--ok-text)}
.kind-v.caution{color:var(--warn-text)}
.kind-v.unmet{color:var(--bad-text)}
.kind-amt{min-width:72px;text-align:right;color:var(--ink-2);font-size:12px}
.kind-list .kind-basis{grid-column:1/-1;margin:0;color:var(--muted);font-size:12px;line-height:1.55}
.body-cand{display:flex;flex-wrap:wrap;align-items:baseline;gap:6px 8px;margin-top:10px}
.fold-button{width:100%;padding:14px 20px;border:0;background:none;color:var(--accent);font-size:13px;font-weight:600;text-align:left}
.fold-button:hover{background:#fff}

/* 한국 후보값 */
.cand-panel{padding:14px 20px 10px;border-bottom:1px solid var(--line);background:#fff}
.cand-head{display:flex;flex-direction:column;gap:2px;margin-bottom:8px}
.cand-head strong{font-size:14px}
.cand-head span{color:var(--muted);font-size:12px}
.cand-row{display:grid;grid-template-columns:160px minmax(0,1fr);gap:10px;align-items:start;padding:7px 0;border-top:1px solid var(--line)}
.cand-rule{padding-top:3px;font-size:13px}
.cand-rule b{margin-right:6px;color:var(--muted);font-weight:600}
.cand-opts{display:flex;flex-wrap:wrap;gap:4px}
.cand-opts label{padding:3px 9px;border:1px solid var(--line);border-radius:4px;background:#fff;font-size:12px;cursor:pointer}
.cand-opts label:hover{border-color:var(--muted)}
.cand-opts label.on{border-color:var(--accent);background:var(--accent);color:#fff}
.cand-opts label:has(input:focus-visible){outline:2px solid var(--accent);outline-offset:2px}
.cand-opts input{position:absolute;opacity:0;pointer-events:none}

/* 이 나라 보고서 */
.report-item{display:block;width:100%;padding:13px 20px;border:0;border-bottom:1px solid var(--line);background:none;color:var(--ink);text-align:left}
.report-item:hover{background:#fff}
.report-item.current{background:#fff;box-shadow:inset 0 0 0 1px var(--accent)}
.report-item-top{display:flex;justify-content:space-between;align-items:baseline;gap:10px}
.report-item strong{font-size:15px;font-weight:650}
.report-item em{color:var(--accent);font-size:12px;font-style:normal;font-weight:600}
.report-item .issuer{margin:2px 0 10px;color:var(--muted);font-size:12px}
.report-fields{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:8px 14px;margin:0}
.report-fields dt{color:var(--muted);font-size:11px}
.report-fields dd{margin:1px 0 0;font-size:13px;font-weight:600;overflow-wrap:anywhere}
.report-note{margin:8px 0 0;color:var(--muted);font-size:12px}
/* 토큰마다 접어 묶음: 제목 줄 오른쪽에 펼치기, 접기(규칙 15개 설명과 같은 말투) */
.rep-grp>summary{display:flex;align-items:baseline;gap:8px;padding:12px 20px;border-bottom:1px solid var(--line);list-style:none;cursor:pointer}
.rep-grp>summary::-webkit-details-marker{display:none}
.rep-grp>summary:hover{background:#fff}
.rep-grp>summary strong{font-size:15px;font-weight:650}
.rep-grp>summary small{color:var(--muted);font-size:12px}
.rep-grp>summary:after{content:"펼치기";margin-left:auto;color:var(--muted);font-size:12px}
.rep-grp[open]>summary:after{content:"접기"}
.empty-report{padding:44px 24px;font-size:15px;line-height:1.7}
.empty-report small{display:block;margin-top:6px;color:var(--muted);font-size:12px}
.weekly{padding:18px 20px}
.weekly-warning{margin:0 0 4px;font-size:13px;font-weight:650}
.weekly p{margin:8px 0;color:var(--muted);font-size:12px;line-height:1.7}
.weekly table{width:100%;border-collapse:collapse;font-size:13px}
.weekly th{padding:9px 6px;border-bottom:1px solid var(--line);color:var(--muted);font-size:12px;font-weight:600;text-align:right;white-space:nowrap}
.weekly td{padding:9px 6px;border-bottom:1px solid var(--line);text-align:right;font-variant-numeric:tabular-nums}
.weekly th:first-child,.weekly td:first-child{text-align:left}
.weekly td:last-child{width:33%}
.weekly-bars{position:relative;height:12px;min-width:85px}
.weekly-bars i,.weekly-bars b{position:absolute;left:0;height:5px;border-radius:2px}
.weekly-bars i{top:0;background:var(--stone)}
.weekly-bars b{bottom:0;background:var(--accent)}
.weekly .legend{margin:12px 0}
.legend .bar{display:inline-block;width:12px;height:5px;border-radius:2px;background:var(--stone)}
.legend .bar.ink{background:var(--accent)}

/* 나라 이동 */
.country-nav{display:flex;flex-wrap:wrap;gap:6px;margin-top:14px}
.country-nav a{flex:1;padding:9px 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--muted);font-size:13px;text-align:center;text-decoration:none;white-space:nowrap}
.country-nav a:hover{border-color:var(--muted);color:var(--ink)}
.country-nav a.active{border-color:var(--accent);background:var(--accent);color:#fff}

/* 화면 높이가 충분하면 왼쪽 요약을 고정한다 */
@media(min-width:901px) and (min-height:820px){
  .identity-card{position:sticky;top:16px}
}
@media(max-width:1150px){
  .topbar-actions{gap:12px}
  .detail-layout{grid-template-columns:minmax(280px,.8fr) minmax(0,1.4fr)}
  .identity-card{--px:22px;--py:22px}
}
@media(max-width:900px){
  .app-shell{grid-template-columns:minmax(0,1fr);grid-template-rows:auto 1fr}
  .rail{position:sticky;top:0;height:auto;flex-direction:row;gap:15px;padding:10px 18px;border-right:0;border-bottom:1px solid var(--line)}
  .rail-links{flex-direction:row;width:auto;gap:5px}
  .rail-links a{width:56px;height:44px}
  .rail-links a.active:before{top:auto;right:14px;bottom:0;left:14px;width:auto;height:2px}
  .workspace{padding:0 18px}
  .proposal-notice{display:none}
  .stats{grid-template-columns:minmax(0,1fr)}
  .stat{border-right:0;border-bottom:1px solid var(--line)}
  .stat:last-child{border-bottom:0}
  .detail-layout{grid-template-columns:minmax(0,1fr)}
  .cand-row{grid-template-columns:minmax(0,1fr)}
  .rule-heading{grid-template-columns:34px minmax(0,1fr) 84px 12px}
  .rule-vals{display:none}
  .footer{flex-wrap:wrap;padding:10px 0}
}
@media(max-width:720px){
  .rl-section{padding:12px}
  .steps{flex-direction:column}
  :root{--cell:26px}
  .hm{padding:2px 12px 12px}
  .hm-row{grid-template-columns:minmax(0,1fr) max-content;column-gap:12px;row-gap:3px}
  .hm-row .hm-why{grid-column:1/-1;padding-bottom:6px}
  .hm-head .hm-why{display:none}
  .hm-head a{font-size:10px}
  .kr-find{flex-direction:column;gap:2px}
}
@media(max-width:570px){
  .topbar{flex-direction:column;align-items:stretch;gap:10px;padding:12px 0}
  .report-select{justify-content:space-between}
  .report-select > button{flex:1;min-width:0}
  .report-pop{left:0;width:auto;max-width:none}
  .rp-row{gap:2px}
  .rp-row .qe{margin-right:4px}
  .topbar-actions{flex-direction:column;align-items:stretch}
  .search input{width:100%}
  .search-list{left:0;width:auto}
  .home-head{flex-direction:column;align-items:start;gap:4px}
  .chart-card{padding:14px 12px}
  .section-head,.panel-heading{flex-direction:column;align-items:start;gap:4px}
  .identity-card{--px:18px;--py:18px}
  .identity-top h1{font-size:34px}
  .detail-head .context{display:none}
  .rule-heading{padding:10px 14px;gap:8px}
  .rule-body{padding:12px 14px}
  .report-fields{grid-template-columns:repeat(2,minmax(0,1fr))}
  .weekly{padding:14px 12px}
  .weekly td,.weekly th{padding:8px 3px}
  .country-nav a{flex:1 1 22%}
}
@media(prefers-reduced-motion:reduce){html{scroll-behavior:auto}*{transition:none!important}}

/* 규칙별 기준값 차트 */
/* 한국 요약 */
.rv-sum{margin:0;padding:14px 18px 16px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.rv-sum-label{margin:0 0 8px;color:var(--muted);font-size:12px}
.rv-sum-nums{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;margin-bottom:12px}
.rv-sum-item{display:flex;flex-direction:column;gap:6px;min-width:0}
.rv-sum-n{color:var(--accent);font:200 56px/1 var(--num);letter-spacing:-.04em}
.rv-sum-name{display:inline-flex;align-items:center;gap:6px;color:var(--ink-2);font-size:13px}
.rv-sum-bar{display:grid;grid-template-columns:repeat(var(--rv-count),minmax(0,var(--cell)));gap:3px}
.rv-sum-bar .hm-c{width:auto;height:auto;aspect-ratio:1}

/* 공통 카드 */
.rv-card{padding:16px 18px 14px;margin-bottom:14px}
.rv-card .panel-heading{margin-bottom:12px}

/* 규칙 값 표 */
.rv-scroll{overflow-x:auto}
.rv-table{width:100%;border-collapse:separate;border-spacing:2px;table-layout:fixed;font-size:12px}
.rv-col-rule{width:21%}
.rv-col-gap{width:14px}
.rv-table th,.rv-table td{padding:0;font-weight:400}
.rv-group th{padding:0 4px 4px;color:var(--muted);font-size:12px;font-weight:600;text-align:left}
.rv-group th[colspan]{border-bottom:1px solid var(--stone);padding-bottom:3px}
.rv-cols th{padding:2px 4px 4px;color:var(--ink);font-size:12px;font-weight:650;text-align:center}
.rv-cols th.rv-rule{text-align:left}
.rv-table .rv-gap{background:none;border:0}
.rv-rule{display:flex;align-items:center;gap:8px;min-height:34px;padding:0 6px 0 4px;color:var(--ink);font-size:13px;font-weight:600;text-align:left;background:var(--surface)}
th.rv-rule{display:table-cell;vertical-align:middle}
.rv-code{display:inline-block;margin-left:6px;color:var(--muted);font:500 11px/1 var(--num)}
.rv-code2{margin-left:6px;color:var(--muted);font:500 11px var(--num);letter-spacing:0}
.rv-cell{height:34px;padding:4px 6px;background:#fff;color:var(--ink);text-align:center;vertical-align:middle;line-height:1.3;word-break:keep-all;overflow-wrap:anywhere}
.rv-cell.rv-muted{color:var(--muted)}
.rv-n{font-family:var(--num);font-weight:500}
.rv-star{margin-left:1px;color:var(--muted)}
.rv-s0{background:var(--ink);color:#fff}
.rv-s1{background:var(--ink-2);color:#fff}
.rv-s2{background:var(--pale);color:var(--ink)}
.rv-cell.rv-s0 .rv-star,.rv-cell.rv-s1 .rv-star{color:#fff}
.rv-opt{display:inline-block;width:6px;height:6px;margin-right:5px;border:1.5px solid currentColor;border-radius:50%;vertical-align:1px}
.rv-legend{display:flex;flex-wrap:wrap;align-items:center;gap:4px 18px;margin-top:10px;color:var(--muted);font-size:12px}
.rv-legend>span{display:inline-flex;align-items:center}
.rv-leg-steps{gap:2px}
.rv-leg-steps i{display:block;width:18px;height:10px;margin-right:0}
.rv-swipe{display:none!important}
.rv-legend .rv-opt{color:var(--ink)}

/* 점 그래프 */
.rv-dots{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px 28px}
@media(min-width:1530px){
  .rv-dots{grid-template-columns:repeat(4,minmax(0,1fr))}
}
.rv-plot{margin:0;min-width:0}
.rv-plot h3{margin:0 0 6px;font-size:13px;font-weight:650;letter-spacing:-.02em}
.rv-svg-num{font-family:var(--num)}
.rv-key{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px;color:var(--muted);font-size:11px}
.rv-key>span{display:inline-flex;align-items:center;gap:5px}
.rv-key-dot{display:inline-block;width:8px;height:8px;border:1.5px solid var(--ink);border-radius:50%;background:var(--ink)}
.rv-key-dot.hollow{background:#fff}
.rv-key-dash{display:inline-block;width:14px;border-top:1px dashed var(--ink)}
.rv-key-band{display:inline-block;width:14px;height:8px;background:var(--pale)}

@media(max-width:900px){
  .rv-sum-n{font-size:44px}
}
@media(max-width:720px){
  .rv-sum-nums{grid-template-columns:repeat(2,minmax(0,1fr))}
  .rv-sum-n{font-size:40px}
  .rv-card{padding:14px 12px 12px}
  .rv-swipe{display:inline-flex!important}
  .rv-table{min-width:700px}
  .rv-col-rule{width:104px}
  .rv-rule{font-size:12px}
  .rv-code{display:block;margin:2px 0 0}
  .rv-table th.rv-rule,.rv-table tr>.rv-rule:first-child{position:sticky;left:0;z-index:1}
  .rv-dots{grid-template-columns:minmax(0,1fr)}
}

/* 나라 화면 지구본: 카드 오른쪽 위에 걸쳐 오른쪽과 아래로 커지고, 테두리 없이 가장자리가 투명하게 사라짐. 글은 위에 얹힘 */
.globe{position:absolute;top:0;right:-50px;width:360px;height:330px;z-index:0;opacity:.85;-webkit-mask-image:linear-gradient(to right,transparent,#000 30%,#000 86%,transparent),linear-gradient(to bottom,#000 55%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,transparent,#000 30%,#000 86%,transparent),linear-gradient(to bottom,#000 55%,transparent);mask-composite:intersect}
.globe-canvas{display:block;width:100%;height:100%;cursor:grab;touch-action:pan-y;user-select:none;-webkit-user-select:none}
.globe-canvas.globe-dragging{cursor:grabbing}
@media (max-width:720px){.globe{width:240px;height:220px;right:-30px}.identity-top{min-height:84px}}

/* 개요 화면 윗부분: 왼쪽 4 수치와 판정 결과, 오른쪽 6 지구본. 좁으면 지구본이 위로 */
.hero{display:grid;gap:14px;margin-bottom:14px}
.hero .home-head{margin-bottom:0}
.hero .home-head h1{font-size:clamp(22px,1.6vw,27px)}
.hero-main{min-width:0;display:flex;flex-direction:column;gap:14px}
.hero-main .stats,.hero-main .result{margin-bottom:0}
.hero-globe{position:relative;height:280px;overflow:hidden}
.hero-canvas{position:absolute;inset:0;cursor:default;touch-action:auto;-webkit-mask-image:linear-gradient(to right,#000 88%,transparent),linear-gradient(to bottom,#000 88%,transparent);-webkit-mask-composite:source-in;mask-image:linear-gradient(to right,#000 88%,transparent),linear-gradient(to bottom,#000 88%,transparent);mask-composite:intersect} /* 흐림은 지구본에만, 위의 카드는 흐리지 않음 */
@media(min-width:1100px){
  .hero{grid-template-columns:minmax(0,4fr) minmax(0,6fr);grid-template-rows:auto 1fr;align-items:stretch}
  .hero .home-head{grid-column:1;grid-row:1}
  .hero-globe{grid-column:2;grid-row:1 / span 2;height:auto;min-height:440px}
  .hero-main{grid-column:1;grid-row:2}
  .hero-main .stats{grid-template-columns:repeat(2,minmax(0,1fr))}
  .hero-main .stat{padding:12px 18px}
  .hero-main .stat-main{grid-column:1/-1;border-right:0;border-bottom:1px solid var(--line)}
  .hero-main .stat-value{font-size:clamp(34px,2.6vw,42px)}
  .hero-main .stat-main .stat-value{font-size:clamp(46px,3.6vw,58px)}
  .hero-main .result-body{grid-template-columns:minmax(0,1fr);gap:12px}
  .hero-main .kr-finds{gap:8px}
  .hero-main .kr-find{flex-direction:column;gap:2px}
  .hero-main .rv-sum{padding:12px 14px 14px}
  .hero-main .rv-sum-n{font-size:44px}
}

/* 넓은 화면의 왼쪽 메뉴: 화면, 나라, 보고서 달력 */
.side{display:none}
@media(min-width:1100px){
  .app-shell{grid-template-columns:248px minmax(0,1fr)}
  .rail{align-items:stretch;gap:20px;padding:20px 14px 28px;overflow-y:auto;background:var(--surface)}
  .brand-mark{align-self:flex-start}
  .rail-links{display:none}
  .side{display:flex;flex-direction:column;gap:22px}
  .side-sec h2{margin:0 0 6px;padding:0 8px;color:var(--muted);font-size:11px;font-weight:600;letter-spacing:.02em}
  .side-link{position:relative;display:flex;align-items:center;justify-content:space-between;gap:10px;min-height:34px;padding:0 8px;border-radius:var(--r);color:var(--ink);font-size:14px;text-decoration:none}
  .side-link:hover{color:var(--ink);background:var(--pale)}
  .side-link.active{color:var(--accent);background:#fff;font-weight:600}
  .side-link.active:before{content:"";position:absolute;left:0;top:8px;bottom:8px;width:2px;border-radius:1px;background:var(--accent)}
  .side-name{white-space:nowrap}
}

/* 기본 배율: 1100px 이상 화면은 브라우저 90%로 본 크기와 같게 그림(아래 1152px, 1530px 기준도 90%에 맞춘 값). 화면 높이 단위는 배율만큼 늘려 채움 */
@media(min-width:1100px){
  html{zoom:.9}
  .app-shell{min-height:calc(100vh / .9)}
  .rail{height:calc(100vh / .9)}
}

/* 넓은 화면은 왼쪽 사이드바에 나라 목록이 있어 나라 화면 아래 나라 탭을 숨김. 좁은 화면에서는 이 탭으로 나라를 옮김 */
@media(min-width:1100px){.country-nav{display:none}}
/* 사이드바 보고서 목록: 이름 왼쪽, 기준일 오른쪽 */
.side-note{margin:0 0 6px;padding:0 8px;color:var(--ink-2);font-size:12px;line-height:1.45}
.side-date{color:var(--ink-2);font-size:12px}
/* 사이드바 묶음 접기: 제목을 누르면 접고 폄 */
/* 보고서 칸의 코인 줄: 이름과 개수, 아래 줄에 검증 한 줄 설명. 누르면 오른쪽에 보고서 달력 */
.side-tok{display:grid;grid-template-columns:minmax(0,1fr) auto 12px;align-items:center;column-gap:8px;width:100%;margin:0;padding:5px 8px;border:0;border-radius:var(--r);background:none;color:var(--ink);font:inherit;text-align:left;cursor:pointer}
.side-tok:hover{background:var(--pale)}
.side-tok.active{background:#fff}
.side-tok .side-name{font-size:14px;font-weight:600}
.side-tok small{color:var(--muted);font-size:11px}
.side-tok .side-sub{grid-column:1/-1}
.side-tok:after{content:"";grid-column:3;grid-row:1;width:6px;height:6px;border-right:1.5px solid var(--muted);border-bottom:1.5px solid var(--muted);transform:rotate(-45deg)}
/* 한국: 목록 맨 위 흰 상자. 왼쪽 색 막대 없이 글자 크기와 1px 선으로 구분하고, 고르면 선만 먹색 */
.side-kr{flex-direction:column;align-items:flex-start;justify-content:center;gap:1px;min-height:52px;margin:0 0 12px;padding:8px 10px;border:1px solid var(--line);background:#fff}
.side-kr .side-name{color:var(--ink);font-size:15px;font-weight:650}
.side-sub{color:var(--ink-2);font-size:12px;font-weight:400}
.side-kr:hover{background:#fff;border-color:var(--stone)}
.side-kr.active{border-color:var(--accent)}
.side-group{margin:0 0 4px;padding:0 8px;color:var(--ink-2);font-size:11px;font-weight:600;letter-spacing:.02em}
/* 고른 항목은 흰 바탕과 굵기로만 표시(둥근 상자 + 왼쪽 색 막대 조합은 쓰지 않음) */
.side-link.active:before{display:none}

/* 개요 지구본 위 유리 카드: 흰색 반투명 + 흐림, 1px 선. 자리는 app.js가 정함 */
.gcards{position:absolute;inset:0;pointer-events:none}
.gc{position:absolute;display:flex;flex-direction:column;gap:3px;padding:6px 9px;border:1px solid var(--line);border-radius:var(--r);background:rgba(255,255,255,.66);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:var(--ink);font-size:12px;line-height:1.35;text-decoration:none;pointer-events:auto;white-space:nowrap}
.gc[hidden]{display:none}
a.gc:hover,.gc-line:hover{background:rgba(255,255,255,.9)}
.gc-name{font-size:13px;font-weight:650}
a.gc:not(.gc-kr){flex-direction:row;align-items:center;gap:10px}
.gc-sub{color:var(--muted);font-size:11px}
.gc-row{display:inline-flex;gap:9px}
.gc-n{display:inline-flex;align-items:center;gap:4px}
.gc-n b{font-weight:650}
.gc-line{display:flex;align-items:center;justify-content:space-between;gap:12px;color:inherit;text-decoration:none}
.gc-kr{gap:4px;padding:9px 12px;border-color:var(--ink-2)}
.gc-kr .gc-name{font-size:15px}
.gc-grid{display:grid;grid-template-columns:repeat(2,auto);gap:3px 14px;margin-top:3px}
.gc-kr .gc-grid{grid-template-columns:auto;gap:3px}

/* 판정 흐름 */
.flow-scroll{padding:6px 8px 4px;border-radius:var(--r);background:#fff}
.flow-svg{display:block;margin:0 auto;height:auto}
.flow-svg text{font-family:var(--sans)}
.flow-axis{fill:var(--muted);font-weight:600}
.flow-u{opacity:.3;transition:opacity .12s}
.flow-u.kr{opacity:.85}
.flow-u path{fill:var(--stone)}
.flow-u.s-met path{fill:var(--ok)}
.flow-u.s-caution path{fill:var(--warn)}
.flow-u.s-unmet path{fill:var(--bad)}
.flow-u.s-none{opacity:.25}
.flow-u.s-none.kr{opacity:1}
.flow-svg.is-hl .flow-u{opacity:.08}
.flow-svg.is-hl .flow-u.hit{opacity:.9}
.flow-bar{fill:var(--ink)}
.flow-bar.s-met{fill:var(--ok)}
.flow-bar.s-caution{fill:var(--warn)}
.flow-bar.s-unmet{fill:var(--bad)}
.flow-bar.s-none{fill:var(--stone)}
.flow-tag{cursor:pointer;outline:none}
.flow-tag rect{fill:var(--ink)}
.flow-tag text{fill:#fff;font-weight:500}
.flow-tag.big text{font-weight:700}
.flow-tag .flow-code{fill:var(--stone);font-family:var(--num);font-weight:500}
.flow-tag:hover rect,.flow-tag:focus-visible rect,.flow-tag.on rect{fill:var(--accent);stroke:var(--ok);stroke-width:1.5}
.flow-totals{display:grid;grid-template-columns:repeat(3,minmax(0,auto));justify-content:space-between;gap:8px 24px;margin-top:10px;padding:0 8px}
.flow-totals p{margin:0;font-size:12px;line-height:1.5;color:var(--muted)}
.flow-totals span{display:block}
.flow-totals b{font-size:14px;font-weight:650;color:var(--ink)}
@media(max-width:900px){
  .flow-scroll{overflow-x:auto}
  .flow-svg{width:1100px!important;max-width:none!important}
  .flow-totals{grid-template-columns:1fr}
}
/* 판정 흐름의 범례: 판정 안 됨 견본을 선 색(--stone)과 맞춤 */
.flow-section .sw.none{background:var(--stone);box-shadow:none}
/* 규칙 15개 설명: 규칙별 판정 위에 접어 둠 */
.rule-help{margin:0 0 10px;color:var(--ink-2);font-size:13px;line-height:1.6}
.rl-note{margin:4px 0 0;color:var(--muted);font-size:12px}
/* 나라 한눈에: 한 줄 설명과 핵심 네 칸(법, 준비금, 공개, 돌려받기) */
.eli-line{margin:10px 0 0;color:var(--ink-2);font-size:13px;line-height:1.6}
.gl-law{display:grid;grid-template-columns:minmax(0,1fr) 150px;gap:14px;align-items:center;margin:2px 0 12px}
.gl-val{display:flex;flex-direction:column;gap:2px}
.gl-val strong{color:var(--ink);font-size:15px;font-weight:650;line-height:1.3}
.gl-val span{color:var(--ink-2);font-size:11.5px;line-height:1.45}
.gl-steps{display:flex;margin:0;padding:0;list-style:none}
.gl-steps li{position:relative;flex:1;padding-top:15px;color:var(--muted);font-size:11px;text-align:center}
.gl-steps li:before{content:"";position:absolute;z-index:1;top:1px;left:50%;box-sizing:border-box;width:10px;height:10px;margin-left:-5px;border:1.5px solid var(--stone);border-radius:50%;background:#fff}
.gl-steps li+li:after{content:"";position:absolute;top:5px;right:50%;width:100%;border-top:1.5px solid var(--stone)}
.gl-steps li.done:before,.gl-steps li.on:before{border-color:var(--ink);background:var(--ink)}
.gl-steps li.done:after,.gl-steps li.on:after{border-color:var(--ink)}
.gl-steps li.on{color:var(--ink);font-weight:700}
/* 숫자 카드: 이름, 큰 숫자와 단위. 숫자가 없으면 흐린 글 */
.kpi{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:6px}
.kpi-t{min-width:0;padding:9px 11px 10px;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.kpi-t span{display:flex;align-items:baseline;gap:5px;color:var(--muted);font-size:11px;white-space:nowrap}
.kpi-t span i{color:var(--ink-2);font-size:10px;font-style:normal}
.kpi-t span i:before{content:"· "}
.kpi-t p{display:flex;flex-wrap:wrap;align-items:baseline;gap:0 2px;min-height:26px;margin:5px 0 0}
.kpi-t strong{color:var(--ink);font-size:18px;font-weight:650;line-height:1.2}
.kpi-t strong.num{font-family:var(--num);font-size:26px;font-weight:500;font-variant-numeric:proportional-nums;line-height:1}
.kpi-t small{color:var(--ink-2);font-size:12px;white-space:pre}
.kpi-t em{color:var(--muted);font-size:13px;font-style:normal}
@media(max-width:520px){.kpi{grid-template-columns:repeat(2,minmax(0,1fr))}.gl-law{grid-template-columns:1fr}.gl-steps{max-width:200px}}
@media(min-width:1100px){.brand-mark{padding:6px 8px 2px;font-size:19px}.brand-mark .bw-full{display:block}.brand-mark .bw-short{display:none}}
@media(max-width:900px){.brand-mark{font-size:16px}.brand-mark .bw-full{display:block}.brand-mark .bw-short{display:none}}
/* 넓은 화면은 사이드바 맨 위에 이름과 부제가 있으니 상단 이름은 숨김(이름이 두 번 나오지 않게) */
.bw-sub{display:none}
@media(min-width:1100px){
  .brand-title{display:none}
  .topbar{justify-content:flex-end}
  .bw-sub{display:block;margin-top:4px;color:var(--muted);font-size:12px;font-weight:400;letter-spacing:0}
}
/* 사이드바 묶음 구분: 개요, 나라, 보고서 사이에 1px 선, 묶음 제목은 진하게, 해외 규칙은 선이 달린 작은 제목 */
@media(min-width:1100px){
  .side{gap:0}
  .side-top{padding-bottom:14px;border-bottom:1px solid var(--line)}
  section.side-sec{padding:14px 0;border-bottom:1px solid var(--line)}
  section.side-sec:last-child{border-bottom:0}
  .side-sec>h2{display:flex;align-items:baseline;gap:6px;color:var(--ink);font-size:12px;font-weight:700;letter-spacing:.01em}
  .side-h{color:inherit;text-decoration:none}
  .side-h:hover{color:var(--accent)}
  .side-sec>h2 small{color:var(--muted);font-size:11px;font-weight:500}
  .side-group{display:flex;align-items:center;gap:8px;margin:2px 0 4px}
  .side-group:after{content:"";flex:1;border-top:1px solid var(--line)}
}
/* 판정 흐름 나라 이름표: 검은 꼬리표 대신 국기와 이름 */
.flow-ctag rect{fill:transparent}
.flow-ctag text{fill:var(--ink);font-weight:500}
.flow-ctag.big text{font-weight:700}
.flow-ctag:hover rect,.flow-ctag:focus-visible rect,.flow-ctag.on rect{fill:var(--pale);stroke:none}
.flow-svg .flow-ctag rect.flow-flag{fill:none;stroke:var(--line);stroke-width:1}
/* 나라별 구조 흐름도(입체): 나라 상세 오른쪽 열 맨 위, 판정 탭 위. 좁은 화면(900px 이하)에서는 나라 개요 다음, 판정 탭 앞 */
.detail-side{display:flex;flex-direction:column;gap:18px;min-width:0}
.iso-section{min-width:0;padding:16px 20px 18px}
.iso-section h2{margin:0 0 2px;font-size:15px;font-weight:650;letter-spacing:-.03em}
.iso-section>p{margin:0 0 6px;color:var(--muted);font-size:12px;line-height:1.5;word-break:keep-all}
.iso-scroll{overflow-x:auto}
.iso-svg{display:block;height:auto;margin-inline:auto;border:1px solid var(--line);border-radius:var(--r);background:#fff}
.iso-svg text{font-family:var(--sans)}
.iso-grid{fill:none;stroke:var(--pale);stroke-width:.8}
.iso-zone{fill:var(--line);fill-opacity:.45;stroke:var(--stone);stroke-width:1}
.iso-ztag rect{fill:none;stroke:none}
.iso-zone-t{fill:var(--ink-2);font-weight:700}
.iso-zone-r{fill:var(--muted);font-weight:600}
.iso-face{stroke:var(--muted);stroke-opacity:.5;stroke-width:.8;stroke-linejoin:round}
.iso-t,.iso-w{fill:#fff}
.iso-l{fill:var(--pale)}
.iso-r{fill:var(--stone)}
.iso-st-l{fill:#dccfb4}
.iso-st-r{fill:#c9b995}
.iso-face.iso-coin-edge{fill:none;stroke:var(--ink-2);stroke-opacity:1}
.iso-d.iso-coin-fine{stroke-width:.6}
.iso-ghost .iso-face.iso-coin-edge{fill:rgba(255,255,255,.4);stroke:var(--muted);stroke-opacity:.8}
.iso-main .iso-face{stroke:var(--ink);stroke-opacity:1;stroke-width:1.6}
.iso-pf-l{fill:var(--ink-2)}
.iso-pf-d{fill:var(--ink)}
.iso-pf-s1{fill:var(--pale)}
.iso-pf-s2{fill:var(--stone)}
.iso-ghost .iso-face{fill:rgba(255,255,255,.4);stroke:var(--muted);stroke-opacity:.8;stroke-dasharray:4 3}
.iso-ghost .iso-pf-l,.iso-ghost .iso-pf-d{fill:var(--stone)}
.iso-ghost .iso-pf-s1,.iso-ghost .iso-pf-s2{display:none}
.iso-mark{fill:none;stroke:var(--ink-2);stroke-width:1.6;stroke-linecap:round;stroke-linejoin:round}
.iso-mark *{vector-effect:non-scaling-stroke}
.iso-coin-sym{fill:var(--ink-2);stroke:none;font-weight:800}
.iso-ghost .iso-coin-sym{fill:var(--muted);opacity:.45}
.iso-ghost .iso-mark{stroke:var(--muted);opacity:.45}
.iso-ghost .iso-flag{opacity:.45}
.iso-d{fill:none;stroke:var(--ink-2);stroke-width:.9;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.iso-df{fill:#fff}
.iso-dp{fill:var(--pale)}
.iso-dk{fill:var(--ink-2)}
.iso-fl{stroke:none}
.iso-fline{fill:none;stroke:#fff;stroke-opacity:.4;stroke-width:.5}
.iso-fline-d{stroke:var(--ink-2);stroke-opacity:.35}
.iso-lv{fill:none;stroke:var(--ink-2);stroke-width:.6;stroke-opacity:.85}
.iso-ghost .iso-fl,.iso-ghost .iso-lv,.iso-ghost .iso-fline{opacity:.35}
.iso-dc{stroke:var(--ink);stroke-width:1.8}
.iso-ghost .iso-d{fill:rgba(255,255,255,.4);stroke:var(--muted);stroke-opacity:.8;stroke-dasharray:3 2}
.iso-ghost .iso-dn{fill:none}
/* 흐름도 선 색(인성 지정): 돈과 코인이 오가는 길은 노랑, 확인과 공개는 충족과 같은 파랑 */
:root{--iso-money:#E8A700;--iso-check:var(--ok)}
.iso-ln{fill:none;stroke-width:1.8;stroke-dasharray:6 4}
.iso-legend{margin:0 0 12px}
.iso-key{width:9px;height:9px;border-radius:50%;background:var(--iso-money)}
.iso-key.check{background:var(--iso-check)}
.iso-key.ghost{background:none;border:1px dashed var(--muted)}
.iso-ln-ink{stroke:var(--iso-money)}
.iso-ln-mut{stroke:var(--iso-check)}
.iso-ln-off{stroke:var(--muted);stroke-opacity:.5;stroke-dasharray:4 4}
.iso-ln:not(.iso-ln-off){animation:iso-flow 1s linear infinite}
@keyframes iso-flow{from{stroke-dashoffset:0}to{stroke-dashoffset:-10}}
@media(prefers-reduced-motion:reduce){.iso-ln:not(.iso-ln-off){animation:none}}
.iso-dot{fill:#fff;stroke-width:1.2}
.iso-dot-ink{stroke:var(--iso-money)}
.iso-dot-mut{stroke:var(--iso-check)}
.iso-dot-off{stroke:var(--muted);stroke-opacity:.5}
.iso-mk-ink{fill:var(--iso-money)}
.iso-mk-mut{fill:var(--iso-check)}
.iso-mk-off{fill:var(--muted);fill-opacity:.5}
.iso-lead{stroke:var(--muted);stroke-width:1}
.iso-lab rect{fill:#fff;fill-opacity:.9;stroke:var(--stone)}
.iso-t1{fill:var(--ink);font-weight:650}
.iso-t2{fill:var(--ink-2)}
.iso-lab.iso-ghost rect{stroke-dasharray:4 3}
.iso-lab.iso-ghost text{fill:var(--muted)}
.iso-pill rect{fill:#fff;fill-opacity:.9;stroke-width:1}
.iso-pill text{font-weight:600}
.iso-pill-ink rect{stroke:var(--iso-money)}
.iso-pill-ink text{fill:var(--ink)}
.iso-pill-mut rect{stroke:var(--iso-check)}
.iso-pill-mut text{fill:var(--ink-2)}
.iso-pill-off rect{stroke:var(--stone)}
.iso-pill-off text{fill:var(--muted)}
.iso-note rect{fill:#fff;fill-opacity:.9;stroke:var(--muted)}
.iso-note text{fill:var(--ink-2);font-weight:600}
/* 이름표, 선 이름표, 꼬리표는 젖빛 유리: 흰 바탕(90%) 뒤에 흐리게 번진 흰 테두리(.iso-halo)를 깔고, 글자 둘레에 가는 흰 선을 둘러 격자와 선이 글자를 가로지르지 않게 한다 */
.iso-halo rect{fill:#fff}
.iso-lab text,.iso-pill text,.iso-note text{stroke:#fff;stroke-width:3px;stroke-linejoin:round;paint-order:stroke}
@media(max-width:720px){
  .iso-section{padding:14px 12px}
}
/* 흐름도는 오른쪽 열 맨 위(판정 탭 위)에 칸 폭에 맞춰 줄여 보이고, 누르면 큰 창으로 원래 크기를 본다(나라 카드가 밀려 내려가지 않게) */
.iso-head{display:flex;align-items:flex-start;justify-content:space-between;gap:12px}
.iso-zoom{flex:none;height:30px;padding:0 12px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink);font-size:12px;font-weight:600}
.iso-zoom:hover{border-color:var(--ink-2)}
.iso-mode{margin-left:auto;display:flex;flex:none;border:1px solid var(--line);border-radius:var(--r);overflow:hidden}
.iso-mode button{height:28px;padding:0 10px;border:0;background:#fff;color:var(--muted);font-size:12px;font-weight:600}
.iso-mode button+button{border-left:1px solid var(--line)}
.iso-mode button[aria-pressed="true"]{background:var(--ink);color:#fff}
.detail-side .iso-scroll{overflow:visible;cursor:zoom-in}
.detail-side .iso-svg{min-width:0!important;max-width:100%!important}
.iso-dlg{width:min(1260px,96vw);max-height:94vh;padding:16px 18px 20px;border:0;border-radius:var(--r-lg);background:var(--surface);color:var(--ink);overflow:auto}
.iso-dlg::backdrop{background:rgba(20,18,16,.45)}
.iso-dlg .iso-head{margin-bottom:10px}
.iso-dlg h2{margin:0;font-size:16px;font-weight:650}
.iso-dlg .iso-svg{width:100%!important;max-width:none!important;min-width:0!important}

/* 개요 오른쪽 끝 숨김 패널: 얇은 띠(손잡이)만 보이다가 커서를 대면 밀려 나오고 떼면 오른쪽으로 숨음 */
:root{--rx-w:480px;--rx-tab:30px}
.rx-dock{position:fixed;top:0;right:0;bottom:0;z-index:25;width:min(var(--rx-w),calc(100% - 36px));transform:translateX(100%);transition:transform .22s ease-out;pointer-events:none} /* 닫힌 때는 패널이 화면 밖. 띠, 탭, 패널만 마우스를 받는다 */
.rx-dock:hover,.rx-dock.open,.rx-dock:has(:focus-visible){transform:none}
.rx-dock:hover .rx-panel,.rx-dock.open .rx-panel,.rx-dock:has(:focus-visible) .rx-panel{box-shadow:-8px 0 24px rgba(20,18,16,.06)}
.rx-edge{position:absolute;top:0;bottom:0;left:-16px;width:16px;pointer-events:auto} /* 보이지 않는 감지 띠: 화면 오른쪽 끝, 세로 스크롤바 바로 안쪽 */
.rx-tab{position:absolute;top:50%;left:calc(1px - var(--rx-tab));z-index:1;width:var(--rx-tab);height:112px;margin-top:-56px;padding:0;border:1px solid var(--line);border-right:0;border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--surface);color:var(--muted);font-size:12px;font-weight:600;letter-spacing:.15em;writing-mode:vertical-rl;pointer-events:auto}
.rx-tab:hover{color:var(--ink)}
.rx-tab:focus-visible{outline-offset:-2px}
.rx-panel{position:absolute;top:50%;right:0;left:0;max-height:calc(100vh - 24px);overflow-y:auto;overscroll-behavior:contain;padding:16px 18px 18px;transform:translateY(-50%);border:1px solid var(--line);border-right:0;border-radius:var(--r-lg) 0 0 var(--r-lg);background:var(--surface);pointer-events:auto}
.rx-head{display:flex;align-items:baseline;gap:10px;padding-bottom:10px;border-bottom:1px solid var(--line)}
.rx-head strong{font-size:15px;font-weight:650;letter-spacing:-.03em;white-space:nowrap}
.rx-head a{margin-left:auto;color:var(--accent);font-size:12px;font-weight:600;text-decoration:none;white-space:nowrap}
.rx-head a:hover{text-decoration:underline;text-underline-offset:2px}
.rx-group h3{margin:12px 0 2px;color:var(--muted);font-size:11px;font-weight:600}
.rx-item{display:grid;grid-template-columns:22px minmax(0,1fr);align-items:baseline;gap:2px 8px;margin:0 -8px;padding:6px 8px;border-radius:var(--r);color:inherit;font-size:12px;text-decoration:none}
.rx-item:hover{background:var(--pale)}
.rx-item small{color:var(--muted);font:500 11px var(--num)}
.rx-item b{overflow:hidden;font-size:13px;font-weight:600;text-overflow:ellipsis;white-space:nowrap}
.rx-item p{grid-column:2;display:-webkit-box;margin:0;overflow:hidden;color:var(--ink-2);line-height:1.45;word-break:keep-all;-webkit-line-clamp:2;-webkit-box-orient:vertical}
/* 규칙 한 줄 그림(패널과 설명 페이지 공용). 판정 색은 .sw와 같은 토큰 */
.gl{display:block;overflow:visible}
.gl-base{stroke:var(--stone);stroke-width:1}
.gl-tick{stroke:var(--ink-2);stroke-width:1;stroke-dasharray:2 2}
.gl-dot.met,.gl-bar .met,.gl-ladder .met{fill:var(--ok);background:var(--ok)}
.gl-dot.caution,.gl-bar .caution,.gl-ladder .caution{fill:var(--warn);background:var(--warn)}
.gl-dot.unmet,.gl-bar .unmet,.gl-ladder .unmet{fill:var(--bad);background:var(--bad)}
.gl-dot.none{fill:var(--muted)}
.gl-bar,.gl-ladder{display:flex;gap:1px;width:124px;height:12px}
.gl-bar i{min-width:2px;border-radius:1px}
.gl-ladder i{flex:1;background:var(--pale);border-radius:2px}
.gl-ladder i.need{box-shadow:inset 0 0 0 1px var(--ink-2)}
.gl-t{color:var(--ink-2);font-size:12px;white-space:nowrap}
.gl-no{color:var(--muted);font-size:12px}
.gl-txt{color:var(--ink-2);font-size:12px;white-space:nowrap}
.gl-txt.met{color:var(--ok-text)}.gl-txt.caution{color:var(--warn-text)}.gl-txt.unmet{color:var(--bad-text)}
.rs-now{display:flex;flex-wrap:wrap;align-items:center;gap:6px 12px;margin:0 0 12px;font-size:12px}
.rs-now b{color:var(--muted);font-weight:500}
@media(prefers-reduced-motion:reduce){.rx-dock{transition:none}}
@media(max-width:900px){:root{--rx-tab:18px}}

/* 규칙 설명 페이지(#rules): 맨 위 소개, 네 묶음, 규칙마다 설명과 나라별 기준 표 */
.rs-page{display:flex;flex-direction:column;gap:14px;padding:18px 0 14px}
.rs-top{padding:20px 22px}
.rs-top h1{margin:0 0 8px;font-size:clamp(23px,2vw,30px);font-weight:650;letter-spacing:-.04em;line-height:1.25}
.rs-top p{max-width:880px;margin:0 0 6px;color:var(--ink-2);font-size:14px;line-height:1.65}
.rs-top .legend{margin-top:10px}
.rs-index{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px 24px;margin-top:16px;padding-top:14px;border-top:1px solid var(--line)}
.rs-index h2{margin:0 0 4px;color:var(--muted);font-size:11px;font-weight:600}
.rs-index a{display:block;padding:2px 0;color:var(--ink-2);font-size:13px;text-decoration:none}
.rs-index a:hover{color:var(--ink);text-decoration:underline;text-underline-offset:2px}
.rs-index small,.rs-rule h3 small{margin-right:3px;color:var(--muted);font:500 11px var(--num)}
.rs-group{display:flex;flex-direction:column;gap:12px;margin-top:6px}
.rs-gh h2{margin:0 0 2px;font-size:20px;font-weight:650;letter-spacing:-.03em}
.rs-gh p{margin:0;max-width:880px;color:var(--ink-2);font-size:13px;line-height:1.65}
.rs-rule{padding:18px 20px 16px;scroll-margin-top:12px}
.rs-rule h3{margin:0 0 10px;font-size:17px;font-weight:650;letter-spacing:-.03em}
.rs-rule h3 a{text-decoration:none}
.rs-rule h3 a:hover{text-decoration:underline;text-underline-offset:3px}
.rs-rule h3 small{font-size:13px}
.rs-dl{display:grid;grid-template-columns:130px minmax(0,1fr);gap:6px 16px;margin:0 0 14px;font-size:13px;line-height:1.6}
.rs-dl dt{color:var(--muted);font-weight:500}
.rs-dl dd{margin:0;max-width:880px;color:var(--ink-2)}
.rs-sub{margin:12px 0 6px}
.rs-sub h4{margin:0;font-size:13px;font-weight:650}
.rs-sub p{margin:2px 0 0;color:var(--muted);font-size:12px}
.rs-tablewrap{overflow-x:auto;border-radius:var(--r);background:#fff}
.rs-table{width:100%;min-width:680px;border-collapse:collapse;font-size:12.5px}
.rs-table th,.rs-table td{padding:8px 12px;border-bottom:1px solid var(--pale);text-align:left;vertical-align:top;line-height:1.5}
.rs-table thead th{color:var(--muted);font-size:11px;font-weight:500;white-space:nowrap}
.rs-table tbody tr:last-child>*{border-bottom:0}
.rs-table td:last-child{white-space:nowrap}
.rs-who{width:150px;font-weight:400}
.rs-who strong{display:block;font-weight:650}
.rs-who small{display:block;color:var(--muted);font-size:11px;line-height:1.4}
.rs-table tr.more>*{border-top:0}
.rs-std{width:42%}
.rs-std b{margin-right:8px;font-weight:650}
.rs-std .rs-state{color:var(--muted)}
.rs-std span{color:var(--ink-2)}
.rs-table a{color:var(--ink-2);text-underline-offset:2px}
.rs-table a:hover{color:var(--ink)}
.rs-mx{min-width:760px}
.rs-mx thead th,.rs-mx .rs-v{text-align:center}
.rs-mx tbody th{font-weight:500;white-space:nowrap}
.rs-mx tbody th,.rs-mx tbody td:first-child{position:sticky;left:0;background:#fff} /* 좁은 화면에서 가로로 밀어도 행 이름이 남게 */
.rs-v{white-space:nowrap}
.rs-v .sw{margin-right:6px;vertical-align:-2px}
.rs-v small{display:block;color:var(--muted);font-size:11px}
.rs-status{margin:12px 0 0;color:var(--ink-2);font-size:13px}
.rs-status b{margin-right:8px;color:var(--muted);font-weight:500}
.rs-status b.num{margin:0;color:var(--ink);font-weight:650}
@media(max-width:1100px){.rs-index{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:720px){
  .rs-top,.rs-rule{padding:14px 12px}
  .rs-index{grid-template-columns:minmax(0,1fr)}
  .rs-dl{grid-template-columns:minmax(0,1fr);gap:2px}
  .rs-dl dd{margin-bottom:8px}
}
/* 사이드바 나라 칸: 오른쪽에 국기를 은은하게 깔고 왼쪽으로 갈수록 사라지게, 법 이름은 나라 이름 아래 한 단계 작게(인성 요청) */
.side-flagbg{overflow:hidden}
.side-flagbg::after{content:"";position:absolute;top:0;right:0;bottom:0;width:110px;background:var(--flag) right center/auto 100% no-repeat;opacity:.32;-webkit-mask-image:linear-gradient(to right,transparent 15%,#000 70%);mask-image:linear-gradient(to right,transparent 15%,#000 70%);pointer-events:none}
.side-flagbg::before,.side-flagbg.active::before{content:"";display:block;position:absolute;top:0;right:0;bottom:0;left:auto;width:110px;border-radius:0;background:var(--flag) right center/auto 100% no-repeat;filter:blur(1.2px);opacity:.16;-webkit-mask-image:linear-gradient(to right,transparent,#000 25%,transparent 60%);mask-image:linear-gradient(to right,transparent,#000 25%,transparent 60%);pointer-events:none} /* 국기 왼쪽은 흐리게 번진 판, 오른쪽은 또렷한 판 */
.side-nm{display:flex;flex-direction:column;gap:1px;padding:6px 0}
.side-law{color:var(--muted);font-size:11px;font-weight:400;line-height:1.3}
.side-flagbg>span{position:relative;z-index:1}
/* 사이드바 스크롤 막대: 평소에는 안 보이고, 사이드바에 커서를 올리면 가는 회색 막대만 보인다 */
.rail{scrollbar-width:thin;scrollbar-color:transparent transparent;scrollbar-gutter:stable}
.rail:hover,.rail:focus-within{scrollbar-color:var(--stone) transparent}
/* 스크롤 모양: 페이지 막대는 가늘고 옅게, 사이드바는 위아래에 더 있을 때만 옅은 그림자 */
html{scrollbar-width:thin;scrollbar-color:var(--stone) transparent}
@media(min-width:1100px){
  .rail{background:linear-gradient(var(--surface) 30%,rgba(246,245,244,0)) center top/100% 40px no-repeat local,linear-gradient(rgba(246,245,244,0),var(--surface) 70%) center bottom/100% 40px no-repeat local,radial-gradient(farthest-side at 50% 0,rgba(20,18,16,.09),transparent) center top/100% 12px no-repeat scroll,radial-gradient(farthest-side at 50% 100%,rgba(20,18,16,.09),transparent) center bottom/100% 12px no-repeat scroll,var(--surface)}
}
/* 페이지를 내린 만큼 사이드바 오른쪽 테두리 선이 위에서부터 먹색으로 차오른다 */
@property --sp{syntax:'<percentage>';inherits:false;initial-value:0%}
@keyframes rail-sp{to{--sp:100%}}
@media(min-width:1100px){
  @supports (animation-timeline:scroll()){
    .rail{border-right:2px solid var(--line);border-image:linear-gradient(to bottom,var(--ink) var(--sp),var(--line) var(--sp)) 1;animation:rail-sp linear both;animation-timeline:scroll(root)}
  }
}

/* 홈 맨 위 4단계 이동 단추 */
.step-btn{display:inline-flex;align-items:baseline;gap:7px;padding:0;border:0;background:none;color:inherit;font:inherit;cursor:pointer;border-bottom:1px solid transparent}
.step-btn:hover,.step-btn:focus-visible{color:var(--ink);border-bottom-color:var(--ink)}
/* 264건 비교: 주의 칸, 비교 나라와 판정이 갈리는 칸 */
.mx-c.ca,.tint.ca{background:color-mix(in srgb,var(--warn) 16%,#fff)}
.mx-c.ca b{color:var(--warn-text,var(--ink))}
.mx-c[class*=' cm']{position:relative;overflow:hidden}
.mx-c[class*=' cm']::after{content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--pale)}
.mx-c.cmhi::after{background:var(--ok)}.mx-c.cmca::after{background:var(--warn)}.mx-c.cmlo::after{background:var(--bad)}
.tint.cmk{background:linear-gradient(#fff 0 60%,var(--ink-2) 60%);box-shadow:inset 0 0 0 1px var(--line)}
/* 나라 화면: 다른 나라와 비교 */
.cp-section{margin-top:0}
.cp-pick{display:flex;flex-wrap:wrap;align-items:center;justify-content:flex-end;gap:6px;color:var(--muted);font-size:12px}
.cp-base{display:inline-flex;align-items:center;gap:6px;white-space:nowrap}
.cp-base b{display:inline-flex;align-items:center;gap:6px;color:var(--ink);font-size:13px;font-weight:650}
.cp-vs{margin:0 2px 0 10px;padding-left:12px;border-left:1px solid var(--line);white-space:nowrap}
.cp-btns{display:inline-flex;flex-wrap:wrap;gap:6px}
.cp-pick button{display:inline-flex;align-items:center;gap:6px;padding:6px 11px;border:1px solid var(--line);border-radius:var(--r);background:#fff;color:var(--ink-2);font:inherit;font-size:13px;white-space:nowrap;cursor:pointer}
.cp-pick button:hover{border-color:var(--muted);color:var(--ink)}
.cp-pick button[aria-checked=true]{border-color:var(--accent);background:var(--accent);color:#fff;font-weight:600}
.cp-pick img,.cp-base img{width:16px;height:12px;border-radius:1px;object-fit:cover;box-shadow:0 0 0 1px rgba(0,0,0,.08)}
.cp-block{padding:14px 0 4px;border-top:1px solid var(--pale)}
.cp-block h3{margin:0 0 2px;font-size:14px;font-weight:650}
.cp-block>p{margin:0 0 10px;color:var(--muted);font-size:12px}
.cp-grid{--cell:22px;display:grid;grid-template-columns:max-content repeat(15,var(--cell));justify-content:start;gap:4px 3px;align-items:center;margin-bottom:8px}
.cp-name{padding-right:12px;font-size:13px;font-weight:600;white-space:nowrap}
.cp-rid{color:var(--muted);font-size:9px;text-align:center}
.cp-rid.df{color:var(--ink);font-weight:700;text-decoration:underline;text-underline-offset:2px}
.cp-section .rv-dots{margin-top:4px}

/* 나라 화면 맨 위 탭(규칙, 이 나라 보고서, 다른 나라와 비교) */
.detail-tabs.top{grid-template-columns:repeat(3,max-content);gap:0 28px;padding:0 2px;margin:0 0 16px}
.detail-tabs.top button{min-height:44px;padding:0 2px;font-size:14px}

/* 홈 칸 제목의 단계 번호(맨 위 4단계 단추와 같은 번호) */
.step-no{display:inline-block;margin-right:8px;color:var(--accent);font-weight:600}
.report-line .step-no{font-size:13px}
/* 보고서를 바꾸면 판정 보고서 줄을 잠깐 강조 */
@keyframes flash{0%{background:color-mix(in srgb,var(--ok) 22%,#fff)}100%{background:transparent}}
.flash{animation:flash 1.6s ease-out;border-radius:4px}
.mx-own{display:block;margin-top:1px;color:var(--accent);font-size:10px;font-style:normal;font-weight:600}