/* Planowa 안내 문서 공용 스타일
   ---------------------------------------------------------------
   개인정보처리방침(privacy.html)과 계정 및 데이터 삭제(account-deletion.html)가 같이 쓴다.
   * 두 문서는 앱(my-ledger.html)과 별개의 페이지다. 앱의 CSS 를 가져다 쓰지 않는다 —
     스토어 심사·검색엔진이 여는 '문서' 라서 앱이 깨져도 이 페이지는 열려야 한다.
   * 색은 기기 설정(밝게/어둡게)을 따른다. 앱과 같은 토큰 이름을 쓰되 값은 여기서 따로 정한다.
   * 서비스워커 캐시 목록(app/sw.js)에 이 파일이 들어 있어야 오프라인에서도 열린다. */

:root{
  color-scheme: light;
  --paper:#f6f6f8; --surface:#ffffff; --sunken:#f0f0f4;
  --ink:#17171c; --ink-2:#3f3f4a; --muted:#6e6e7a;
  --line:#e5e5ea; --accent:#6a2c68; --accent-soft:#f3ecf3; --danger:#dc3f45;
  --accent-ink:#ffffff;   /* --accent 위에 얹는 글자색. 다크에서 accent 가 밝아지므로 뒤집힌다 */
  --r:12px;
}
@media (prefers-color-scheme: dark){
  :root:not([data-theme="light"]){
    color-scheme: dark;
    --paper:#111114; --surface:#1c1c21; --sunken:#17171b;
    --ink:#ececf1; --ink-2:#b9b9c2; --muted:#8e8e99;
    --line:#2e2e36; --accent:#d9a2d4; --accent-soft:#2a1f29; --danger:#ef6f72;
    --accent-ink:#1a1a1f;
  }
}
:root[data-theme="dark"]{
  color-scheme: dark;
  --paper:#111114; --surface:#1c1c21; --sunken:#17171b;
  --ink:#ececf1; --ink-2:#b9b9c2; --muted:#8e8e99;
  --line:#2e2e36; --accent:#d9a2d4; --accent-soft:#2a1f29; --danger:#ef6f72;
  --accent-ink:#1a1a1f;
}

*{box-sizing:border-box}
body{margin:0; background:var(--paper); color:var(--ink);
  font-family:"Pretendard","Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
  font-size:15px; line-height:1.75; -webkit-text-size-adjust:100%}
.wrap{max-width:760px; margin:0 auto; padding:32px 20px 72px}

/* 머리글은 스크롤해도 위에 붙어 있는다.
   .wrap 의 좌우 여백(20px)만큼 음수 마진으로 넓혀야 본문이 옆으로 비쳐 지나가지 않는다. */
header.top{position:sticky; top:0; z-index:5; background:var(--paper);
  margin:-32px -20px 26px; padding:18px 20px 16px;
  border-bottom:1px solid var(--line)}
.xbtn{position:absolute; top:14px; right:14px; width:34px; height:34px;
  border:1px solid var(--line); background:var(--surface); color:var(--muted);
  border-radius:50%; font-size:15px; line-height:1; cursor:pointer;
  display:grid; place-items:center; padding:0}
.xbtn:hover{color:var(--ink); border-color:var(--muted)}
.brand{display:flex; align-items:center; gap:10px; margin-bottom:14px}
.brand img{width:32px; height:32px; border-radius:8px}
.brand b{font-size:16px; letter-spacing:-.01em}
h1{font-size:26px; line-height:1.3; margin:0 0 8px; letter-spacing:-.02em; text-wrap:balance}
.dates{color:var(--muted); font-size:13px; margin:0}

h2{font-size:17px; margin:34px 0 10px; letter-spacing:-.01em; padding-top:4px}
h3{font-size:14.5px; margin:20px 0 6px; color:var(--ink-2)}
p, li{color:var(--ink-2)}
p{margin:0 0 12px}
ul{margin:0 0 12px; padding-left:20px}
li{margin-bottom:5px}
b, strong{color:var(--ink); font-weight:600}
code{background:var(--sunken); border:1px solid var(--line); border-radius:5px;
  padding:1px 5px; font-family:ui-monospace,"SFMono-Regular",Consolas,monospace; font-size:.9em}
a{color:var(--accent); text-underline-offset:3px}

/* 머리말 상자 — 두 문서 공통 */
.lead{background:var(--surface); border:1px solid var(--line); border-radius:var(--r);
  padding:16px 18px; margin:0 0 8px}
.lead p:last-child{margin-bottom:0}

/* 표 */
.tblwrap{overflow-x:auto; margin:0 0 14px}
table{border-collapse:collapse; width:100%; min-width:460px; font-size:13.5px}
th, td{border:1px solid var(--line); padding:8px 10px; text-align:left; vertical-align:top}
th{background:var(--sunken); color:var(--ink); font-weight:600; white-space:nowrap}
td{color:var(--ink-2)}

/* 강조 상자 — .note 는 안내(보라), .warn 은 경고(빨강) */
.note{background:var(--accent-soft); border:1px solid var(--line); border-left:3px solid var(--accent);
  border-radius:var(--r); padding:13px 16px; margin:0 0 14px; font-size:14px}
.note p:last-child{margin-bottom:0}
.warn{background:var(--surface); border:1px solid var(--line); border-left:3px solid var(--danger);
  border-radius:var(--r); padding:13px 16px; margin:0 0 16px; font-size:14px}
.warn p:last-child{margin-bottom:0}

/* 번호가 붙는 절차 목록 (계정 삭제 문서) */
ol.steps{counter-reset:s; list-style:none; margin:0 0 16px; padding:0}
ol.steps > li{counter-increment:s; position:relative; padding:0 0 0 38px; margin-bottom:14px}
ol.steps > li::before{content:counter(s); position:absolute; left:0; top:1px;
  width:25px; height:25px; border-radius:50%; background:var(--accent); color:var(--accent-ink);
  display:grid; place-items:center; font-size:13px; font-weight:700}
/* 앱 안의 메뉴 경로 표시 — '설정 → 다운로드·백업' */
.path{display:inline-block; background:var(--accent-soft); border:1px solid var(--line);
  border-radius:6px; padding:2px 8px; font-weight:600; color:var(--ink)}

footer.bot{border-top:1px solid var(--line); margin-top:44px; padding-top:18px;
  color:var(--muted); font-size:13px}
footer.bot a{color:var(--muted)}

@media (prefers-reduced-motion:reduce){ *{transition:none!important} }