/* Shared public guide. Dark by default; no external fonts or runtime styles. */
:root {
  color-scheme:dark;
  --ground:#0a1019; --ink:#edf2fa; --muted:#aab8cd; --rule:#29364a;
  --panel:#101a29; --selected:#152641; --link:#adc4ff; --on-link:#0e1728;
  --mark:#2c4166; --ok:#80d8a4; --degraded:#efc477; --fail:#ffac9e; --unknown:#b2bdce;
  --shadow:0 18px 60px #0003;
  --sans:Inter,-apple-system,BlinkMacSystemFont,"Segoe UI","Apple SD Gothic Neo","Noto Sans KR","Malgun Gothic",sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
:root[data-theme="light"] {
  color-scheme:light;
  --ground:#fcfcfd; --ink:#192638; --muted:#566476; --rule:#d5deeb;
  --panel:#fff; --selected:#eef3ff; --link:#285bd6; --on-link:#fff;
  --mark:#dce7ff; --ok:#216b40; --degraded:#825800; --fail:#a32e20; --unknown:#596777;
  --shadow:0 18px 60px #224bae16;
}
* { box-sizing:border-box; }
[hidden] { display:none!important; }
html { background:var(--ground); scroll-padding-top:2rem; }
body { margin:0; color:var(--ink); font:1rem/1.75 var(--sans); letter-spacing:-.02em; word-break:keep-all; overflow-wrap:anywhere; -webkit-font-smoothing:antialiased; }
a { color:var(--link); text-underline-offset:.3em; }
button { font:inherit; color:inherit; cursor:pointer; }
button,a,summary { -webkit-tap-highlight-color:transparent; touch-action:manipulation; }
button { background:none; border:0; }
:focus-visible { outline:3px solid var(--link); outline-offset:5px; }
::selection { background:var(--link); color:var(--on-link); }
h1,h2,h3,p { margin:0; }
h1,h2,h3 { line-height:1.3; letter-spacing:-.045em; }
h2 { font-size:clamp(1.65rem,3vw,2.5rem); font-weight:650; }
h3 { font-size:1rem; }
p+p { margin-top:1rem; }
button:disabled { cursor:default; }
header.site,main,footer.site { width:min(1200px,calc(100% - 96px)); margin-inline:auto; }
header.site { display:flex; align-items:center; justify-content:space-between; gap:1.5rem; min-height:90px; border-bottom:1px solid var(--rule); }
.wordmark { display:flex; align-items:center; gap:.75rem; color:var(--ink); font-size:.85rem; font-weight:650; line-height:1.2; text-decoration:none; }
.brand-image { display:grid; place-items:center; width:34px; height:34px; flex-shrink:0; background:#fff; border-radius:9px; }
.brand-image img { display:block; width:30px; height:30px; object-fit:contain; }
nav { display:flex; align-items:center; gap:1.75rem; }
nav a { color:var(--muted); text-decoration:none; font-size:.82rem; }
nav a:hover,nav a[aria-current] { color:var(--link); }
.theme-toggle { width:42px; height:42px; border:1px solid var(--rule); border-radius:50%; background:var(--panel); font-size:1.1rem; }
.skip { position:fixed; z-index:20; top:-100px; left:20px; padding:.75rem 1.25rem; background:var(--ink); color:var(--ground); }
.skip:focus { top:12px; }
.visually-hidden { position:absolute; width:1px; height:1px; padding:0; margin:-1px; overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0; }
.eyebrow { font-size:.66rem; font-weight:650; letter-spacing:.12em; color:var(--muted); }
.lede,.sub { color:var(--muted); }
.sub { font-size:.84rem; }
.hero { position:relative; isolation:isolate; text-align:center; padding:64px 0 28px; }
.hero:before { content:""; position:absolute; z-index:-1; inset:0; background:radial-gradient(ellipse at 50% 38%,var(--selected),transparent 65%); opacity:.65; pointer-events:none; }
.hero-copy { position:relative; z-index:2; }
.hero .eyebrow { display:inline-flex; align-items:center; gap:9px; padding:6px 14px; border:1px solid var(--rule); border-radius:30px; font-size:10px; letter-spacing:.06em; }
.hero .eyebrow:before { content:""; width:5px; height:5px; border-radius:50%; background:var(--link); }
.hero h1 { max-width:1100px; margin:22px auto; font-size:clamp(44px,5vw,72px); font-weight:550; letter-spacing:-.06em; line-height:1.24; }
.hero h1 em { font-style:normal; color:var(--link); }
.hero .lede { max-width:640px; margin:0 auto; font-size:15px; line-height:1.9; }
.actions { display:flex; flex-wrap:wrap; gap:12px; }
.hero .actions { justify-content:center; margin-top:28px; }
.button { display:inline-flex; align-items:center; justify-content:center; gap:22px; min-height:48px; padding:12px 21px; border:1px solid transparent; border-radius:7px; font-size:.83rem; font-weight:650; text-decoration:none; }
.primary { background:var(--link); color:var(--on-link); }
.secondary { color:var(--ink); border-color:var(--rule); background:var(--panel); }
.button:hover { text-decoration:none; transform:translateY(-2px); box-shadow:var(--shadow); }
.state { display:flex; flex-wrap:wrap; align-items:center; gap:.4rem .65rem; font-size:.8rem; }
.state a { color:var(--muted); }
.state strong { font-weight:550; }
.hero .state { justify-content:center; margin-top:18px; font-size:.7rem; }
.dot { display:inline-block; width:7px; height:7px; border-radius:50%; flex-shrink:0; background:var(--unknown); }
.state-operational .dot { background:var(--ok); }
.state-degraded .dot { background:var(--degraded); }
.state-unavailable .dot { background:var(--fail); }
.warn { color:var(--degraded); }
.notice-inline { font-size:.8rem; margin-top:.6rem; }
.hero-art { position:relative; width:100%; max-width:960px; height:265px; margin:32px auto 0; overflow:hidden; }
.source-atmosphere { position:absolute; inset:0; pointer-events:none; user-select:none; mask-image:linear-gradient(to bottom,#000 75%,transparent); -webkit-mask-image:linear-gradient(to bottom,#000 75%,transparent); }
.source-atmosphere:before { content:""; position:absolute; inset:0 7%; background:radial-gradient(ellipse at center,var(--mark),transparent 68%); opacity:.7; }
.source-atmosphere:after { content:""; position:absolute; inset:15px 10%; border:1px solid var(--rule); border-radius:50%; transform:scaleY(.7); opacity:.55; z-index:-1; }
.source-sculpture { position:absolute; width:300px; animation-name:none; animation-duration:12s; animation-timing-function:ease-in-out; animation-iteration-count:infinite; }
.motion-ready .source-sculpture { animation-name:source-hover; }
.source-tile { text-align:left; min-height:175px; padding:20px 23px; border:1px solid var(--rule); border-radius:11px; background:linear-gradient(145deg,var(--panel),var(--ground)); box-shadow:0 15px 45px #0002; }
.tile-category { display:block; font-size:9px; letter-spacing:.12em; color:var(--link); margin-bottom:12px; }
.source-tile h3 { font-size:15px; font-weight:550; line-height:1.5; }
.tile-excerpt { font-size:11px; line-height:1.85; margin-top:12px; color:var(--muted); }
.tile-locator { display:block; margin-top:16px; padding-top:10px; border-top:1px solid var(--rule); font-size:9px; color:var(--muted); }
.sculpture-law { left:3%; top:50px; opacity:.64; animation-delay:-4s; }
.sculpture-law .source-tile { transform:rotate(-9deg); }
.sculpture-guide { left:calc(50% - 150px); top:13px; z-index:3; animation-delay:-8s; }
.sculpture-guide .source-tile { transform:rotate(1deg); border-color:var(--link); box-shadow:var(--shadow),0 0 45px var(--selected); }
.sculpture-case { right:3%; top:50px; opacity:.64; animation-delay:-1s; }
.sculpture-case .source-tile { transform:rotate(9deg); }
.motion-toggle { position:absolute; z-index:4; bottom:16px; right:10px; width:36px; height:36px; border:1px solid var(--rule); border-radius:50%; background:var(--ground); color:var(--muted); font-size:12px; }
.hero-art.is-paused .source-sculpture { animation-play-state:paused; }
@keyframes source-hover { 0%,100% { transform:translateY(0); } 50% { transform:translateY(-9px); } }
.section { padding:68px 0; border-top:1px solid var(--rule); }
.section-heading { display:flex; justify-content:space-between; align-items:end; gap:1.5rem; margin-bottom:30px; }
.section-heading .eyebrow { margin-bottom:12px; }
.section-heading>.sub { max-width:270px; }
.work-context { display:flex; flex-wrap:wrap; gap:8px; margin-bottom:25px; }
.work-context button,.range button { min-height:42px; padding:9px 15px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); font-size:.78rem; }
.work-context button[aria-pressed=true],.range button[aria-pressed=true] { color:var(--link); border-color:var(--link); background:var(--selected); }
.evidence-layout { display:grid; grid-template-columns:minmax(0,.95fr) minmax(0,1.05fr); border:1px solid var(--rule); border-radius:12px; overflow:hidden; background:var(--panel); align-items:start; }
.answer-pane { background:var(--selected); border-right:1px solid var(--rule); min-width:0; }
.example-question { padding:25px 30px; border-bottom:1px solid var(--rule); }
.example-question .eyebrow { margin-bottom:14px; }
.question-text { font-size:.95rem; font-weight:500; line-height:1.85; letter-spacing:-.02em; }
.answer-text { padding:28px 30px; font-size:.9rem; }
.answer-text>.eyebrow { margin-bottom:22px; }
.answer-text>p+p { margin-top:18px; }
.work-answer+.work-answer { border-top:1px solid var(--rule); }
.answer-kind { display:block; margin-bottom:8px; font-size:.7rem; color:var(--link); font-weight:650; }
.answer-text .answer-source-line { color:var(--muted); font-size:.75rem; line-height:1.8; border-top:1px solid var(--rule); padding-top:18px; margin-top:25px; }
.draft-question { padding:18px; margin:24px 0; border:1px dashed var(--rule); border-radius:7px; background:var(--panel); }
.draft-question .eyebrow { font-size:.65rem; letter-spacing:.025em; }
.draft-question p+p { font-size:.9rem; margin-top:12px; }
table { width:100%; border-collapse:collapse; font-size:.88rem; }
caption { color:var(--muted); text-align:left; padding:.75rem 0; }
th,td { padding:12px 8px; text-align:left; vertical-align:top; border-bottom:1px solid var(--rule); }
thead th { color:var(--muted); font-weight:500; font-size:.75rem; }
tbody th { font-weight:500; }
.deliverable-table { table-layout:fixed; font-size:.8rem; line-height:1.8; }
.deliverable-table th,.deliverable-table td { padding:12px 6px; overflow-wrap:anywhere; }
.deliverable-table thead th { padding-top:0; font-size:.65rem; }
.deliverable-table thead th:first-child { width:24%; }
.deliverable-table thead th:last-child { width:13%; }
.deliverable-table th:last-child,.deliverable-table td:last-child { text-align:center; }
.deliverable-table tbody th { font-size:.74rem; }
.cite { display:inline-grid; place-items:center; min-width:26px; height:26px; margin-left:4px; border:1px solid var(--rule); border-radius:6px; background:var(--panel); color:var(--link); text-decoration:none; font-size:.7rem; vertical-align:middle; }
.cite:hover,.cite[aria-current] { color:var(--on-link); background:var(--link); }
.deliverable-table .cite { margin:0; }
.cited-sources { position:relative; list-style:none; padding:0; margin:0; max-height:49rem; overflow:auto; scrollbar-width:thin; scrollbar-color:var(--rule) transparent; }
.source { padding:24px; border-bottom:1px solid var(--rule); scroll-margin-top:2rem; }
.source:last-child { border-bottom:0; }
.source.selected,.source:target { background:var(--selected); box-shadow:inset 3px 0 var(--link); }
.source-kind { display:inline-block; padding:3px 8px; margin-bottom:13px; border:1px solid var(--rule); border-radius:4px; background:var(--selected); color:var(--link); font-size:.65rem; }
.source h3 { font-size:.84rem; line-height:1.7; margin-bottom:13px; }
.source blockquote { margin:0; font-size:.86rem; line-height:1.9; }
mark { background:var(--mark); color:inherit; padding:1px 3px; border-radius:3px; }
.source .meta { color:var(--muted); font-size:.7rem; line-height:1.9; margin-top:15px; }
.example-footnote { display:flex; justify-content:space-between; gap:24px; color:var(--muted); font-size:.7rem; margin-top:16px; }
.example-footnote p+p { margin:0; }
.connect-section { padding:42px; margin:24px 0 64px; border:1px solid var(--rule); border-radius:12px; background:var(--selected); }
.connect-section>.eyebrow { margin-bottom:18px; }
.connection-layout { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:start; gap:60px; }
.connection-layout h2 { font-size:2rem; line-height:1.4; }
.connection-layout .sub { margin-top:18px; }
.connection { min-width:0; }
.copy-row { display:flex; flex-direction:column; gap:18px; padding:22px; background:var(--panel); border:1px solid var(--rule); border-radius:8px; }
pre { margin:0; min-width:0; }
code { font-family:var(--sans); font-size:.9rem; white-space:pre-wrap; overflow-wrap:anywhere; user-select:all; }
.copy { min-height:44px; border-radius:6px; background:var(--link); color:var(--on-link); font-size:.8rem; font-weight:650; }
.source-group,.chart-data,.hourly-data { border-bottom:1px solid var(--rule); }
summary { display:flex; align-items:center; justify-content:space-between; gap:20px; padding:22px 0; cursor:pointer; list-style:none; font-size:.88rem; }
summary::-webkit-details-marker { display:none; }
summary:after { content:"+"; font:22px var(--mono); color:var(--muted); }
details[open]>summary:after { content:"−"; }
summary h3 { font-size:.95rem; }
.source-rows { list-style:none; padding:0 0 24px; margin:0; }
.source-rows li { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); gap:20px; padding:12px 0; border-top:1px solid var(--rule); font-size:.88rem; }
.empty { padding:22px; border:1px dashed var(--rule); border-radius:8px; font-size:.88rem; color:var(--muted); }
.page-heading { padding:60px 0 36px; }
.page-heading .eyebrow { color:var(--link); margin-bottom:18px; }
.page-heading h1 { font-size:clamp(2rem,4vw,3.4rem); margin-bottom:18px; }
.page-heading .lede { max-width:650px; font-size:1rem; }
.panel { padding:32px; border:1px solid var(--rule); border-radius:12px; background:var(--panel); }
.now { display:grid; grid-template-columns:minmax(0,1fr) minmax(0,1fr); align-items:center; gap:32px; }
.now .eyebrow { margin-bottom:8px; }
.now h2 { font-size:1.15rem; }
.now .state { margin-top:18px; font-size:1rem; }
.now .state>span:not(.dot),.now .state>a { display:none; }
.now .state>.warn { display:block!important; font-size:.8rem; }
.now .dot { width:9px; height:9px; }
.status-context { color:var(--muted); font-size:.85rem; border-left:1px solid var(--rule); padding-left:32px; }
.status-context time { color:var(--ink); font-size:.85rem; }
.chart-block { margin-top:28px; }
.chart-head { display:flex; align-items:center; justify-content:space-between; gap:20px; margin-bottom:24px; }
.chart-head .eyebrow { margin-bottom:8px; }
.chart-head h2 { font-size:1.25rem; }
.range { display:flex; gap:6px; }
.range button { font-size:.75rem; padding:7px 12px; min-height:36px; }
.chart-box { position:relative; }
.chart { display:block; width:100%; height:auto; overflow:visible; }
.chart .grid { stroke:var(--rule); stroke-width:1; }
.chart .line { fill:none; stroke:var(--link); stroke-width:2.5; }
.chart text { fill:var(--muted); font:12px var(--sans); }
.chart .chart-dot { fill:var(--link); }
.chart .chart-dot:focus { outline:none; stroke:var(--ink); stroke-width:3; }
.chart-tip { position:absolute; right:12px; top:4px; padding:7px 12px; max-width:95%; border-radius:6px; background:var(--ink); color:var(--ground); font-size:.78rem; pointer-events:auto; }
.chart-summary { min-height:1.5em; margin-top:14px; }
.collection-note { color:var(--degraded); font-size:.8rem; margin-bottom:18px; }
.table-scroll { overflow:auto; max-height:25rem; margin-bottom:22px; }
.privacy-layout { display:grid; grid-template-columns:180px minmax(0,1fr); gap:60px; padding-bottom:30px; }
.page-index { display:flex; flex-direction:column; align-items:start; gap:20px; position:sticky; top:30px; align-self:start; padding-top:8px; }
.page-index a { font-size:.8rem; }
.policy-body { max-width:48rem; }
.policy-body section { padding:28px 0 36px; border-top:1px solid var(--rule); }
.policy-body .eyebrow { margin-bottom:16px; }
.policy-body h2 { font-size:1.4rem; margin-bottom:20px; }
.policy-body p { font-size:.95rem; }
.retention-note { padding:20px 24px; margin:24px 0; background:var(--selected); border-left:3px solid var(--link); border-radius:0 8px 8px 0; }
.retention-note p { color:var(--muted); margin-top:8px; font-size:.85rem; }
footer.site { display:flex; flex-wrap:wrap; align-items:center; justify-content:space-between; gap:20px; padding:30px 0 44px; border-top:1px solid var(--rule); margin-top:48px; }
.footer-brand { color:var(--ink); font-weight:650; font-size:.85rem; text-decoration:none; }
footer nav { gap:24px; }
footer nav a { font-size:.75rem; }
@media(max-width:1100px) {
  .hero { padding-top:54px; }
  .hero h1 { font-size:clamp(42px,5vw,62px); }
  .source-sculpture { width:270px; }
  .sculpture-guide { left:calc(50% - 135px); }
  .connection-layout { gap:30px; }
  .connection-layout h2 { font-size:1.8rem; }
}
@media(max-width:800px) {
  header.site,main,footer.site { width:calc(100% - 40px); }
  header.site { min-height:76px; gap:16px; }
  .wordmark { font-size:.75rem; gap:9px; }
  nav { gap:16px; }
  nav .optional { display:none; }
  .theme-toggle { width:36px; height:36px; }
  .hero { padding:36px 0 18px; }
  .hero h1 { font-size:clamp(30px,7.5vw,48px); line-height:1.25; margin:20px auto; }
  .hero .lede { font-size:13px; max-width:560px; }
  .hero .eyebrow { font-size:9px; padding:6px 11px; }
  .hero .actions { margin-top:24px; gap:10px; }
  .hero .button { font-size:12px; padding:11px 16px; gap:16px; min-height:46px; }
  .hero .state { font-size:10px; margin-top:15px; }
  .hero-art { height:230px; margin-top:26px; }
  .source-sculpture { width:250px; }
  .source-tile { padding:18px 20px; min-height:170px; }
  .source-tile h3 { font-size:14px; }
  .sculpture-guide { left:calc(50% - 125px); top:9px; }
  .sculpture-law { left:-9%; top:45px; }
  .sculpture-case { right:-9%; top:45px; }
  .motion-toggle { bottom:10px; right:3px; }
  .section { padding:48px 0; }
  .section-heading { flex-direction:column; align-items:start; gap:16px; }
  .section-heading>.sub { max-width:none; }
  .work-context { gap:6px; }
  .work-context button { font-size:.7rem; padding:8px 10px; }
  .evidence-layout { grid-template-columns:1fr; }
  .answer-pane { border-right:0; border-bottom:1px solid var(--rule); }
  .example-question,.answer-text,.source { padding:22px; }
  .cited-sources { max-height:none; }
  .example-footnote { flex-direction:column; gap:8px; }
  .connection-layout { grid-template-columns:1fr; gap:24px; }
  .connect-section { padding:28px 22px; margin-bottom:40px; }
  .connection-layout h2 { font-size:1.7rem; }
  .source-rows li { grid-template-columns:1fr; gap:4px; }
  .source-rows .sub { font-size:.75rem; }
  .page-heading { padding:40px 0 28px; }
  .page-heading h1 { font-size:clamp(1.9rem,5.5vw,2.7rem); }
  .panel { padding:24px 20px; }
  .now { grid-template-columns:1fr; gap:22px; }
  .status-context { border-left:0; border-top:1px solid var(--rule); padding:18px 0 0; }
  .chart-head { flex-wrap:wrap; }
  .privacy-layout { grid-template-columns:1fr; gap:28px; }
  .page-index { position:static; flex-direction:row; flex-wrap:wrap; gap:12px 22px; padding:0; }
  footer.site { align-items:start; margin-top:30px; }
  footer nav { flex-wrap:wrap; gap:12px 20px; }
}
@media(max-width:420px) {
  .hero .eyebrow { font-size:8px; letter-spacing:.025em; }
  .hero-art { height:215px; }
  .source-sculpture { width:220px; }
  .sculpture-guide { left:calc(50% - 110px); }
  .sculpture-law { left:-27%; }
  .sculpture-case { right:-27%; }
  .source-tile { padding:16px 18px; }
  .source-tile h3 { font-size:13px; }
  .tile-excerpt { font-size:10px; }
  .tile-category { margin-bottom:8px; }
  .tile-locator { margin-top:12px; }
  .hero .button { gap:13px; padding:11px 14px; }
}
@media(prefers-reduced-motion:no-preference) {
  html { scroll-behavior:smooth; }
  /* Theme colors change together; interpolating them can briefly lose contrast. */
  button,.button,.cite { transition:transform .18s; }
}
@media(prefers-reduced-motion:reduce) {
  *,*:before,*:after { animation:none!important; transition:none!important; }
  .motion-toggle { display:none; }
}