﻿/* 계정 삭제 — 홈페이지와 같은 톤. 동작(delete-account.js)은 id · data-en · [hidden] 만 쓴다. */
:root{color-scheme:dark;--ink:#0B132B;--ink-2:#131d3d;--line:rgba(245,242,235,.14);--sun:#F8C000;--pool:#A9E6EE;--sand:#F5F2EB;--cherry:#EE1E52;
  --muted:rgba(245,242,235,.66);--error:#ff9a9a;--display:"Rubik","Noto Sans KR",system-ui,sans-serif}
*{box-sizing:border-box}[hidden]{display:none!important}
body{margin:0;background:var(--ink);color:var(--sand);font:16px/1.75 "Rubik","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo",sans-serif;word-break:keep-all}
a{color:var(--pool)}a:hover{color:var(--sun)}
header{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px max(20px,calc((100vw - 800px)/2));
  background:#D6F1F6;border-radius:0 0 20px 20px;box-shadow:0 10px 30px -18px rgba(11,19,43,.45)}
header .brand{line-height:0}header .brand img{width:132px;height:auto}
header .home{margin-left:auto;font:700 13px var(--display);letter-spacing:.04em;color:var(--ink);text-decoration:none;border:1.5px solid var(--ink);border-radius:999px;padding:6px 14px}
header .home:hover{background:var(--ink);color:var(--sand)}
#language{font:700 13px var(--display);letter-spacing:.04em;cursor:pointer;background:var(--sun);color:var(--ink);border:0;border-radius:999px;padding:8px 16px;width:auto;margin:0}
main{max-width:800px;margin:auto;padding:40px 20px}
h1{font-family:var(--display);font-weight:900;font-size:clamp(32px,6vw,52px);line-height:1.1;margin:0 0 16px}
h2{font-family:var(--display);font-size:20px;line-height:1.4;margin:0 0 14px;color:var(--sun)}
p{margin:0 0 18px}
.notice,.panel{border-radius:24px;padding:26px;margin:26px 0}
.notice{background:var(--ink-2);border:1px solid var(--line)}
.panel{background:var(--ink-2);border:1px solid var(--line)}
ul{padding-left:22px;margin:0}li{color:rgba(245,242,235,.88)}li+li{margin-top:12px}li::marker{color:var(--sun)}
nav{display:flex;gap:10px;margin-top:18px;flex-wrap:wrap}
nav a{font:700 13px var(--display);letter-spacing:.04em;text-decoration:none;color:var(--sand);border:1.5px solid rgba(245,242,235,.6);border-radius:999px;padding:8px 16px}
nav a:hover{background:var(--sand);color:var(--ink)}
label{display:block;font-weight:700}
input:not([type=checkbox]){width:100%;font:inherit;color:var(--sand);background:var(--ink);border:1.5px solid var(--line);border-radius:14px;padding:12px 14px;margin:8px 0 12px}
input:not([type=checkbox]):focus{border-color:var(--sun);outline:none}
input:focus-visible,button:focus-visible,a:focus-visible{outline:3px solid var(--sun);outline-offset:3px}
button{font:inherit;font-weight:700;background:transparent;color:var(--sand);border:1.5px solid rgba(245,242,235,.6);border-radius:999px;padding:12px 20px;cursor:pointer}
button:hover{background:rgba(245,242,235,.08)}
form button{display:block;width:100%;margin-top:12px}
button.primary{background:var(--sun);border-color:var(--sun);color:var(--ink)}
button.primary:hover{filter:brightness(1.05);background:var(--sun)}
button.danger{background:var(--cherry);border-color:var(--cherry);color:#fff}
button.danger:hover{filter:brightness(1.06);background:var(--cherry)}
button:disabled{opacity:.55;cursor:wait}
.hint{font-size:14px;color:var(--muted)}
.check{display:flex;align-items:flex-start;gap:12px;font-weight:400}
.check input{width:20px;height:20px;flex-shrink:0;margin-top:5px;accent-color:var(--sun)}
#success a{display:inline-block;margin-top:6px;font-weight:700;text-decoration:none;background:var(--sun);color:var(--ink);border-radius:999px;padding:10px 20px}
#error{color:var(--error);margin:16px 0 0}#status{color:var(--muted);margin:16px 0 0}#error:empty,#status:empty{display:none}
#sent-to,#verified-email{overflow-wrap:anywhere;color:var(--pool)}
noscript{display:block;color:var(--error)}
/* 꼬리말 — 지원·약관 페이지(doc.css)와 같은 모양 */
footer{max-width:800px;margin:0 auto;padding:26px 20px 60px;border-top:1px solid var(--line);color:var(--muted);font-size:13px;display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:space-between}
footer a{color:var(--pool)}
footer span{display:inline-flex;flex-wrap:wrap;gap:4px 16px}
@media(max-width:480px){.notice,.panel{padding:20px}main{padding-top:28px}header .brand img{width:108px}header .home{display:none}#language{margin-left:auto}}
/* 공지 카드 안의 중요한 문구 */
mark{background:none;color:var(--sun);font-weight:700}

/* 사업자 정보 — 전자상거래법 제10조 표시 항목(값은 src/data/legal.ts BUSINESS_INFO) */
footer .biz{flex-basis:100%;display:flex;flex-wrap:wrap;gap:4px 16px;font-size:12px;line-height:1.6;margin-top:6px}
footer .biz b{font-weight:700;margin-right:4px}
footer .biz span{display:inline}

/* 헤더 로고: 테마 = 태양 로고 그림, 기본 = 앱 기본 글꼴 "ABoardFit"(A 만 기본 하이라이트 파랑) */
.wordmark{display:none;font:800 26px/1 -apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,"Noto Sans KR",sans-serif;letter-spacing:-.01em;color:#0A0A0A;white-space:nowrap}
.wordmark b{color:#1A6FCF;font-weight:800}
html[data-skin="classic"] .top .brand img,html[data-skin="classic"] header .brand img{display:none}
html[data-skin="classic"] .top .brand .wordmark,html[data-skin="classic"] header .brand .wordmark{display:inline-block}
@media (max-width:520px){.wordmark{font-size:22px}}

/* 정책 페이지 헤더 — 홈 헤더와 같은 모양: 왼쪽 로고, 오른쪽 KO/EN 토글 + 노란 "← 홈" 알약 */
.top,header{--gut:clamp(16px,4vw,40px);padding:10px max(var(--gut),calc((100% - 1240px)/2 + var(--gut)))}
.top .brand img,header .brand img{width:150px}
.tools{margin-left:auto;display:flex;align-items:center;gap:12px}
.lang{display:flex;border:1.5px solid #0B132B;border-radius:999px;padding:3px;font:700 12px "Rubik","Noto Sans KR",system-ui,sans-serif}
.lang button{font:inherit;color:#0B132B;background:none;border:0;border-radius:999px;padding:5px 10px;cursor:pointer;letter-spacing:.06em;width:auto;margin:0}
.lang button[aria-pressed="true"]{background:#0B132B;color:#F5F2EB}
.top .home,header .home{margin-left:0;display:inline-flex;align-items:center;font:800 13px "Rubik","Noto Sans KR",system-ui,sans-serif;letter-spacing:.06em;
  text-decoration:none;background:#F8C000;color:#0B132B;border:0;box-shadow:inset 0 0 0 1.5px #0B132B;border-radius:999px;padding:11px 20px}
.top .home:hover,header .home:hover{background:#ffd23a;color:#0B132B}
@media (max-width:520px){.top .brand img,header .brand img{width:118px}.tools{gap:8px}.top .home,header .home{display:inline-flex;padding:9px 14px;font-size:12px}}
/* 줄 끝에 한 단어만 남지 않게(iOS Safari 26, Chrome 117+) · 알약은 한 줄 유지 */
p,li,.sub{text-wrap:pretty}
h1,h2,h3{text-wrap:balance}
.top .home,header .home,.lang button{white-space:nowrap}
@media (max-width:370px){
  .top .brand img,header .brand img{width:100px}
  .wordmark{font-size:19px}
  .tools{gap:6px}
  .lang button{padding:5px 8px;letter-spacing:.03em}
  .top .home,header .home{padding:9px 11px;letter-spacing:.03em}
}
