:root{color-scheme:light dark;--bg:#fff;--fg:#16181b;--muted:#656a71;--faint:#9a9fa5;--line:#e5e6e8;--soft:#f4f5f6;--focus:#2f6fd0;--sans:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR","Segoe UI",Roboto,sans-serif;--mono:ui-monospace,"SF Mono","JetBrains Mono",Menlo,Consolas,monospace;font:15px/1.5 var(--sans);color:var(--fg);background:var(--bg)}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]){--bg:#121314;--fg:#e6e7e8;--muted:#9a9ea4;--faint:#6c7177;--line:#2a2c2f;--soft:#1c1e20;--focus:#5b95ea}}
:root[data-theme="dark"]{--bg:#121314;--fg:#e6e7e8;--muted:#9a9ea4;--faint:#6c7177;--line:#2a2c2f;--soft:#1c1e20;--focus:#5b95ea;color-scheme:dark}
:root[data-theme="light"]{color-scheme:light}

*{box-sizing:border-box}
[hidden]{display:none!important}
body{margin:0;min-height:100vh;background:var(--bg);-webkit-font-smoothing:antialiased;overflow-wrap:anywhere}
a{color:inherit}
button{font:inherit;color:inherit;cursor:pointer}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}
#notice:focus{outline:none}

/* 언어: 기본은 한국어. 영어는 스크립트가 data-lang="en"을 지정할 때만 보인다. */
[data-lang="en"]{display:none}
html[lang="en"] [data-lang="en"]{display:inline}
html[lang="en"] [data-lang="ko"]{display:none}
html:not(.js) .js-only{display:none!important}

.skip{position:absolute;left:12px;top:-60px;padding:8px 12px;background:var(--fg);color:var(--bg);z-index:10;border-radius:6px;text-decoration:none}
.skip:focus{top:8px}

.wrap{max-width:960px;margin:0 auto;padding:0 24px}
.top{border-bottom:1px solid var(--line)}
.top .wrap{height:56px;display:flex;align-items:center;gap:0 16px}
.brand{display:flex;align-items:center;flex:none;text-decoration:none}
.brand .wordmark{display:block;width:120px;height:auto}
.brand .wm-dark{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .brand .wm-light{display:none}:root:not([data-theme="light"]) .brand .wm-dark{display:block}}
:root[data-theme="dark"] .brand .wm-light{display:none}
:root[data-theme="dark"] .brand .wm-dark{display:block}

.tools{display:flex;align-items:center;gap:2px;margin-left:auto}
.tools .sep{width:1px;height:16px;margin:0 8px;background:var(--line)}
.tools .icon{display:flex;align-items:center;justify-content:center;width:32px;height:32px;padding:0;color:var(--muted);background:none;border:0;border-radius:6px}
.tools .icon:hover{color:var(--fg);background:var(--soft)}
.tools .icon svg{display:block}
.tools .icon .i-sun{display:none}
@media(prefers-color-scheme:dark){:root:not([data-theme="light"]) .tools .i-moon{display:none}:root:not([data-theme="light"]) .tools .i-sun{display:block}}
:root[data-theme="dark"] .tools .i-moon{display:none}
:root[data-theme="dark"] .tools .i-sun{display:block}

.segmented{display:inline-flex;border:1px solid var(--line);border-radius:6px;overflow:hidden}
.segmented button{height:30px;padding:0 10px;font-size:13px;color:var(--muted);background:none;border:0}
.segmented button+button{border-left:1px solid var(--line)}
.segmented button:hover{background:var(--soft);color:var(--fg)}
.segmented button[aria-pressed="true"]{background:var(--fg);color:var(--bg);font-weight:600}
.segmented button:focus-visible{outline-offset:-2px}

main.wrap{padding-top:48px;padding-bottom:40px}
.lead{max-width:560px}
h1{margin:0;font-size:22px;font-weight:650;line-height:1.4}
.sub{margin:8px 0 0;font-size:14px;color:var(--muted)}
.actions{display:flex;flex-wrap:wrap;gap:8px;margin-top:24px}
.button{display:inline-flex;align-items:center;min-height:40px;padding:8px 14px;border:1px solid var(--line);border-radius:6px;background:none;font-size:14px;line-height:1.3;text-decoration:none}
.button:hover{background:var(--soft)}
.button.primary{background:var(--fg);border-color:var(--fg);color:var(--bg)}
.button.primary:hover{opacity:.88}
.status{min-height:18px;margin:12px 0 0;font-size:13px;color:var(--muted)}

.block{margin-top:40px;max-width:560px}
.block-head{display:flex;align-items:flex-end;justify-content:space-between;gap:8px 16px;flex-wrap:wrap;padding-bottom:10px;border-bottom:1px solid var(--fg)}
.block-head h2{margin:0;font-size:15px;font-weight:650}
.link{padding:0;border:0;background:none;font-size:12px;color:var(--muted);text-decoration:underline;text-underline-offset:3px}
.link:hover{color:var(--fg)}
.address{margin:12px 0 0;font:13px/1.5 var(--mono);color:var(--muted);word-break:break-all}

.faq details{border-bottom:1px solid var(--line)}
.faq summary{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:44px;padding:8px 2px;font-size:14px;font-weight:600;cursor:pointer;list-style:none}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:"";flex:none;width:7px;height:7px;margin-right:4px;border:solid var(--muted);border-width:0 1.8px 1.8px 0;transform:rotate(45deg) translateY(-2px);transition:transform .15s}
.faq details[open] summary::after{transform:rotate(-135deg) translateY(-2px)}
.faq summary:hover{background:var(--soft)}
.faq summary:focus-visible{outline-offset:-2px}
.faq p{margin:0;padding:0 2px 14px;font-size:14px;color:var(--muted)}

@media(max-width:640px){
  .wrap{padding:0 16px}
  main.wrap{padding-top:32px}
  .block{margin-top:32px}
  .actions .button{flex:1 1 auto;justify-content:center}
}
@media(prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}
