/* 인구 구조(/population/) 전용. 전부 .pop 안으로 한정해 사이트 공통 스타일과 섞이지 않게 한다. */
.pop{
  --bg:#f8f8fa; --panel:#fff; --ink:#1a1a24; --sub:#6f6f80; --line:#e4e4e9; --chip:#f1f1f4;
  --kid:#2f9e8f; --work:#5b7bd5; --old:#e0703a; --accent:#6727e9; --cohort:#d6336c;
  color:var(--ink);line-height:1.6;font-size:15px
}
.pop *{box-sizing:border-box}
.pop .muted{color:var(--sub)}
.pop .banner{background:#fde68a;color:#3b2f00;padding:8px 16px;font-size:13px;text-align:center;border-radius:8px}
.pop .hero{padding:4px 0 24px}
.pop .eyebrow{color:var(--accent);font-weight:700;font-size:13px;letter-spacing:.06em}
.pop h1{font-size:clamp(28px,5vw,46px);line-height:1.18;margin:8px 0 22px;font-weight:900;letter-spacing:-.02em}
.pop h1 em{font-style:normal;color:var(--accent)}
.pop .clock{display:flex;flex-wrap:wrap;gap:24px;align-items:flex-end;background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:18px 20px}
.pop .clock-label{display:block;font-size:13px;color:var(--sub)}
.pop #clockPop{display:block;font-size:clamp(28px,5vw,40px);font-weight:900;font-variant-numeric:tabular-nums}
.pop .clock-sub{font-size:13px;color:var(--sub)}
.pop .clock-shares{display:flex;gap:18px;flex-wrap:wrap;font-size:14px}
.pop .clock-shares b{font-size:20px;margin-left:4px;font-variant-numeric:tabular-nums}
.pop .dot{display:inline-block;width:10px;height:10px;border-radius:50%;margin-right:5px}
.pop .dot.kid,.pop i.kid{background:var(--kid)} .pop .dot.work,.pop i.work{background:var(--work)} .pop .dot.old,.pop i.old{background:var(--old)}
.pop .controls{position:sticky;top:var(--site-sticky-h,0);z-index:20;margin:0 -16px;padding:10px 16px;background:color-mix(in srgb,var(--bg) 92%,transparent);backdrop-filter:blur(8px);border-top:1px solid var(--line);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;flex-wrap:wrap}
.pop .year-ctl{display:flex;align-items:center;gap:10px;flex:1;min-width:220px}
.pop .year-ctl input{flex:1;accent-color:var(--accent)}
.pop .year-label{font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;min-width:4.2em}
.pop .year-label small{font-size:11px;font-weight:700;color:var(--accent);margin-left:4px}
.pop .btn{font:inherit;border:1px solid var(--line);background:var(--panel);color:var(--ink);border-radius:8px;padding:6px 12px;cursor:pointer}
.pop .btn:hover{border-color:var(--sub)}
.pop .btn.sm{font-size:12px;padding:4px 10px}
.pop .seg{display:flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;width:max-content}
.pop .seg button{font:inherit;font-size:13px;border:0;background:var(--panel);color:var(--ink);padding:6px 12px;cursor:pointer}
.pop .seg button[aria-pressed="true"]{background:var(--ink);color:#fff}
.pop .birth{font-size:13px;color:var(--sub);display:flex;align-items:center;gap:6px}
.pop .birth input{font:inherit;width:6.5em;padding:5px 8px;border:1px solid var(--line);border-radius:8px;background:var(--panel);color:var(--ink)}
.pop section{padding:36px 0;border-bottom:1px solid var(--line)}
.pop h2{font-size:22px;margin:0 0 4px;font-weight:800}
.pop .lead{color:var(--sub);margin:0 0 16px;max-width:780px}
.pop .note{font-size:12px;color:var(--sub);margin:8px 0 0}
.pop .two{display:grid;grid-template-columns:3fr 2fr;gap:28px}
@media (max-width:820px){.pop .two{grid-template-columns:1fr}}
.pop .chart{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:8px}
.pop .chart svg{display:block;width:100%;height:auto}
.pop .chart text{fill:var(--sub);font-family:inherit}
.pop .terrain-box{position:relative;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden}
.pop .terrain{height:min(62vh,560px,max(340px,95vw));min-height:300px;cursor:grab}
.pop .terrain canvas{display:block}
.pop .views{position:absolute;top:10px;left:10px;display:flex;gap:6px;flex-wrap:wrap}
.pop .tip{position:absolute;pointer-events:none;background:var(--ink);color:#fff;font-size:12px;padding:6px 9px;border-radius:6px;white-space:nowrap;transform:translate(12px,12px)}
.pop .terrain-legend{display:flex;flex-wrap:wrap;gap:14px;font-size:12px;padding:8px 12px;border-top:1px solid var(--line)}
.pop .terrain-legend i{display:inline-block;width:10px;height:10px;border-radius:2px;margin-right:5px;vertical-align:-1px}
.pop .terrain-legend i.slice{background:var(--ink)} .pop .terrain-legend i.cohort{background:var(--cohort)}
.pop .me{display:grid;gap:10px}
.pop .me .stat{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pop .me .stat b{font-size:22px;font-variant-numeric:tabular-nums}
.pop .me .stat p{margin:2px 0 0;font-size:13px;color:var(--sub)}
.pop .cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:10px}
.pop .card{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:12px 14px}
.pop .card h3{font-size:13px;margin:0;font-weight:700}
.pop .card .def{font-size:11px;color:var(--sub)}
.pop .card .val{font-size:24px;font-weight:900;font-variant-numeric:tabular-nums;margin:4px 0 2px}
.pop .card .val small{font-size:12px;font-weight:500;color:var(--sub);margin-left:6px}
.pop .card svg{display:block;width:100%;height:40px}
.pop .milestones{list-style:none;margin:0;padding:0;display:grid;gap:6px;grid-template-columns:repeat(auto-fill,minmax(320px,1fr))}
.pop .milestones li{display:grid;grid-template-columns:4.5em 1fr;gap:12px;align-items:baseline;background:var(--panel);border:1px solid var(--line);border-radius:10px;padding:10px 14px;cursor:pointer}
.pop .milestones li:hover,.pop .milestones li.on{border-color:var(--accent)}
.pop .milestones .y{font-weight:900;font-size:18px;font-variant-numeric:tabular-nums}
.pop .milestones .y.proj{color:var(--sub)}
.pop .milestones b{display:block}
.pop .milestones span{font-size:13px;color:var(--sub)}
.pop .big3{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:8px}
.pop .big3>div{background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 12px}
.pop .big3 span{font-size:12px;color:var(--sub);font-weight:700}
.pop .big3 b{display:block;font-size:22px;font-weight:900;font-variant-numeric:tabular-nums;line-height:1.3}
.pop .big3 b small{font-size:12px;font-weight:500;margin-left:2px}
.pop .big3 p{margin:0;font-size:11px;color:var(--sub)}
.pop .ctab{width:100%;border-collapse:collapse;font-size:13px;background:var(--panel);border:1px solid var(--line);border-radius:12px;overflow:hidden;font-variant-numeric:tabular-nums}
.pop .ctab th,.pop .ctab td{padding:5px 10px;border-bottom:1px solid var(--line);text-align:right}
.pop .ctab th:first-child,.pop .ctab td:first-child{text-align:left}
.pop .ctab th{font-size:11px;color:var(--sub);background:var(--chip)}
.pop .ctab small{font-size:10px;color:var(--sub);margin-left:4px}
.pop .ctab tr.now td{font-weight:700;color:var(--cohort)}
.pop .source{font-size:12px;color:var(--sub);padding-top:20px}
.pop .clock-flow{flex-basis:100%;margin:0;font-size:13px;color:var(--sub)}
.pop .clock-flow b{color:var(--ink);font-variant-numeric:tabular-nums}
.pop .scen-info{margin:16px 0 0;background:var(--panel);border:1px solid var(--line);border-radius:12px;padding:10px 16px}
.pop .scen-info summary{cursor:pointer;font-weight:700;font-size:14px}
.pop .scen-info p{max-width:780px;margin:10px 0}
.pop .scen-info .ctab{max-width:640px}
.pop .cut-ctl{position:absolute;top:10px;right:10px;display:flex;gap:6px;flex-wrap:wrap;justify-content:flex-end;align-items:center}
.pop .cut-ctl[hidden],.pop .views[hidden]{display:none}
.pop #cutBtn[aria-pressed="true"]{background:var(--ink);color:#fff;border-color:var(--ink)}
.pop .seg.sm button{font-size:12px;padding:4px 10px}
.pop .seg button:disabled{opacity:.4;cursor:default}
.pop .hscale{display:flex;align-items:center;gap:6px;font-size:12px;color:var(--sub);background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:2px 8px}
.pop .hscale input{width:80px;accent-color:var(--accent)}
@media (max-width:640px){.pop .cut-ctl{position:static;justify-content:flex-start;padding:8px 12px;border-top:1px solid var(--line)}}
.pop .milestones em{display:block;font-style:normal;font-size:11px;color:var(--accent)}
.pop .milestones li.me{border-color:var(--cohort)}
.pop .milestones li.me b{color:var(--cohort)}
.pop .sexbar{display:flex;height:8px;border-radius:4px;overflow:hidden;background:var(--cohort);margin:6px 0 6px}
.pop .sexbar i{display:block;background:var(--accent)}