/* ══════════════════════════════════════════════════════
   지원 · 개인정보 처리방침 · 이용약관 — 홈페이지와 같은 톤(남색 바탕 · 해 노랑 · 수영장 하늘색)
   ⚠️ 본문 마크업(section.ko/.en, h1, .meta, .note, h2 + p.body)은 앱 legal.ts 와 글자 단위
     동기화 테스트(src/data/legal.privacy-sync.test.cjs)가 읽는다 — 여기서는 모양만 바꾼다.
   ══════════════════════════════════════════════════════ */
:root{--ink:#0B132B;--ink-2:#131d3d;--line:rgba(245,242,235,.14);--sun:#F8C000;--pool:#A9E6EE;--sand:#F5F2EB;
  --muted:rgba(245,242,235,.66);--r:24px;--maxw:820px;
  --display:"Rubik","Noto Sans KR",system-ui,sans-serif;--body:"Rubik","Noto Sans KR",-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0;background:var(--ink);color:var(--sand);font-family:var(--body);line-height:1.8;word-break:keep-all}
a{color:var(--pool)}
a:hover{color:var(--sun)}
body.lang-en .ko{display:none}
body.lang-ko .en{display:none}

/* 머리: 홈 히어로처럼 파도 텍스처 띠 + 둥근 아래 모서리 */
.top{position:sticky;top:0;z-index:10;display:flex;align-items:center;gap:14px;padding:12px max(20px,calc((100vw - var(--maxw))/2));
  background:#D6F1F6;border-radius:0 0 20px 20px;box-shadow:0 10px 30px -18px rgba(11,19,43,.45)}
.top .brand{display:block;line-height:0}
.top .brand img{width:132px;height:auto}
.top .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}
.top .home:hover{background:var(--ink);color:var(--sand)}
.langbtn{font:700 13px var(--display);letter-spacing:.04em;cursor:pointer;background:var(--sun);color:var(--ink);border:0;border-radius:999px;padding:8px 16px}
.langbtn:hover{filter:brightness(1.05)}

main{max-width:var(--maxw);margin:0 auto;padding:40px 20px 80px}
h1{font-family:var(--display);font-weight:900;font-size:clamp(32px,6vw,52px);line-height:1.1;letter-spacing:-.01em;margin:.2em 0 .25em;color:var(--sand)}
.meta{display:inline-block;color:var(--ink);background:var(--pool);font:700 12.5px var(--display);letter-spacing:.02em;border-radius:999px;padding:4px 12px;margin-bottom:10px}
.note{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:16px 22px;font-size:14px;color:var(--muted);margin:18px 0 8px}
h2{font-family:var(--display);font-size:20px;line-height:1.35;color:var(--sun);margin:2.2em 0 .5em;padding-top:1.1em;border-top:1px solid var(--line)}
p.body{white-space:pre-line;margin:.3em 0 0;color:rgba(245,242,235,.88)}

/* 지원 페이지 */
.contact{background:var(--ink-2);border:1px solid var(--line);border-radius:var(--r);padding:22px 24px;margin:22px 0 6px}
.contact .email{font:800 20px var(--display)}
.contact .email a{color:var(--sun);text-decoration:none}
.contact .sub{color:var(--muted);font-size:14px;margin-top:6px}
details{background:var(--ink-2);border:1px solid var(--line);border-radius:18px;padding:2px 20px;margin:10px 0;transition:border-color .17s}
details[open],details:hover{border-color:var(--sun)}
summary{cursor:pointer;font-weight:700;padding:14px 0;list-style:none;color:var(--sand)}
summary::-webkit-details-marker{display:none}
summary::before{content:"＋";display:inline-grid;place-items:center;width:24px;height:24px;margin-right:12px;border-radius:50%;background:var(--sun);color:var(--ink);font-size:14px;font-weight:900}
details[open] summary::before{content:"－"}
details p{margin:0 0 16px;white-space:pre-line;color:rgba(245,242,235,.86)}

footer{max-width:var(--maxw);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){.top .brand img{width:108px}.top .home{display:none}.langbtn{margin-left:auto}}
/* 공지 카드 안의 중요한 문구 */
mark{background:none;color:var(--sun);font-weight:700}

/* 이용약관: App Store 판 / Google Play 판 탭 (terms.html — 기본은 접속 기기) */
.stores{display:inline-flex;gap:4px;padding:4px;margin:6px 0 14px;border-radius:999px;background:var(--ink-2);border:1px solid var(--line)}
.stores button{font:700 13px var(--display);letter-spacing:.02em;cursor:pointer;border:0;border-radius:999px;padding:8px 16px;background:transparent;color:var(--sand);opacity:.72}
.stores button:hover{opacity:1}
.stores button[aria-pressed="true"]{background:var(--sun);color:var(--ink);opacity:1}
.stores button:focus-visible{outline:2px solid var(--sun);outline-offset:2px}
.ed[data-store="android"]{display:none}
body.store-android .ed[data-store="ios"]{display:none}
body.store-android .ed[data-store="android"]{display:block}

/* 사업자 정보 — 전자상거래법 제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}
}