/* 문서 페이지(방침 · 약관 · 지원) 공통 — 담은 · 트리밸이 함께 쓴다.
   앱마다 다른 건 <body data-app="…"> 아래의 색뿐이다.
   본문 마크업(_includes 의 privacy.html · terms.html)은 그대로 두고 겉모습만 이 파일이 정한다. */
:root{
  color-scheme:light;
  --bg:#F1F1EE; --sheet:#FFFFFF; --ink:#16181A; --ink2:#4A4E53; --ink3:#8E9297; --line:#DEDED8; --line2:#ECECE7;
  --accent:#3E9E6E; --accent-ink:#2E7A56; --accent-soft:#E4F0E9;
}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%}
body{margin:0; background:var(--bg); color:var(--ink); word-break:keep-all; overflow-wrap:anywhere; line-height:1.6;
     font-family:'Pretendard Variable',Pretendard,-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo',system-ui,sans-serif}
a{color:inherit}

/* 언어 — head 의 인라인 스크립트가 첫 페인트 전에 <html data-lang> 을 심는다 */
html[data-lang="ko"] #sec-en, html[data-lang="en"] #sec-ko,
html[data-lang="ko"] .l-en,   html[data-lang="en"] .l-ko,
html[data-lang] #lang-divider{display:none !important}

/* ---------- 위 막대 — 메인 · 소개 페이지와 같은 높이 · 글자 · 폭(tokens.css) ---------- */
.top{position:sticky; top:0; z-index:30; background:rgba(241,241,238,.84);
     -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px)}
.top .in{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter); display:flex; align-items:center; gap:10px; height:76px}
.logo{font-size:18px; font-weight:var(--fw-heavy); letter-spacing:-.04em; text-decoration:none}
.crumb{color:var(--color-line-strong); font-weight:500}
.me{display:flex; align-items:center; gap:8px; font-weight:var(--fw-heavy); font-size:18px; letter-spacing:-.04em; text-decoration:none}
.me img{width:24px; height:24px; border-radius:var(--radius-icon)}
.top nav{margin-left:auto; margin-right:-14px; display:flex; gap:var(--space-1); font-size:var(--fs-ui); font-weight:600; color:var(--ink2)}
.top nav a{display:flex; align-items:center; min-height:44px; padding:0 14px; text-decoration:none; transition:color var(--dur-fast) var(--ease-out)}
.top nav a:hover{color:var(--ink)}
.top nav a[aria-current]{color:var(--ink); font-weight:var(--fw-bold)}

/* ---------- 목차 + 종이 ---------- */
.layout{max-width:var(--container); margin:0 auto; padding:24px var(--gutter) 72px; display:grid; grid-template-columns:220px minmax(0,760px); gap:clamp(24px,4vw,56px); justify-content:center}
.layout.solo{grid-template-columns:minmax(0,760px)}
.toc{position:sticky; top:82px; align-self:start; max-height:calc(100vh - 100px); overflow:auto; padding-top:44px}
.toc summary{display:none}
.toc ol{list-style:none; margin:0; padding:0; border-left:1px solid var(--line)}
.toc a{display:block; padding:6px 0 6px 14px; margin-left:-1px; border-left:2px solid transparent;
       font-size:13.5px; line-height:1.45; color:var(--ink3); text-decoration:none}
.toc a:hover{color:var(--ink)}
.toc a.on{color:var(--ink); font-weight:700; border-left-color:var(--accent)}

.sheet{background:var(--sheet); border-radius:28px; padding:clamp(28px,5vw,64px); box-shadow:0 1px 0 var(--line2), 0 20px 50px rgba(22,24,26,.05)}

.doc-head{display:grid; grid-template-columns:1fr auto; gap:6px 16px; align-items:start; padding-bottom:28px; margin-bottom:8px; border-bottom:1px solid var(--line)}
.doc-head h1{margin:0; font-size:clamp(28px,3.6vw,40px); letter-spacing:-.04em; line-height:1.2; font-weight:800}
.doc-head .meta{grid-column:1; margin:6px 0 0; font-size:14px; color:var(--ink3)}
.lang{grid-column:2; grid-row:1; display:inline-flex; border:1px solid var(--line); border-radius:10px; overflow:hidden; background:var(--sheet)}
.lang button{all:unset; cursor:pointer; padding:6px 12px; font-size:13px; font-weight:700; color:var(--ink3)}
.lang button:focus-visible{outline:2px solid var(--accent); outline-offset:-2px}
html[data-lang="ko"] .lang button[data-lang="ko"],
html[data-lang="en"] .lang button[data-lang="en"]{background:var(--ink); color:#fff}

.doc{font-size:16px; line-height:1.85; color:var(--ink2)}
.doc h2{margin:44px 0 12px; font-size:19px; line-height:1.4; letter-spacing:-.02em; font-weight:800; color:var(--ink); scroll-margin-top:84px}
.doc p{margin:0 0 14px}
.doc ul,.doc ol{margin:0 0 16px; padding-left:22px}
.doc li{margin:4px 0}
.doc ul li::marker{color:var(--accent)}
.doc strong{color:var(--ink); font-weight:700}
.doc a{color:var(--accent-ink); text-decoration:underline; text-decoration-thickness:1px; text-underline-offset:3px}
.doc a:hover{text-decoration-thickness:2px}
.doc > :first-child{margin-top:28px}

/* ---------- 지원 ---------- */
.contact-card{margin-top:28px; padding:26px 28px; border-radius:20px; background:var(--accent-soft)}
.contact-card h2{margin:0; font-size:13px; font-weight:700; color:var(--accent-ink)}
.contact-card .mail{display:inline-block; margin-top:4px; font-size:min(clamp(22px,3vw,30px),5vw); font-weight:800; letter-spacing:-.03em; color:var(--ink); text-decoration:none}
.contact-card .mail:hover{text-decoration:underline; text-underline-offset:5px}
.contact-card p{margin:10px 0 0; font-size:15px; line-height:1.75; color:var(--ink2)}
.faq{margin-top:8px; border-top:1px solid var(--ink)}
.faq details{border-bottom:1px solid var(--line)}
.faq summary{list-style:none; cursor:pointer; padding:18px 40px 18px 0; position:relative; font-size:16.5px; font-weight:700; letter-spacing:-.02em; color:var(--ink); line-height:1.5}
.faq summary::-webkit-details-marker{display:none}
.faq summary::after{content:'+'; position:absolute; right:4px; top:50%; transform:translateY(-50%); font-size:22px; font-weight:400; color:var(--ink3); transition:transform .2s ease}
.faq details[open] summary::after{transform:translateY(-50%) rotate(45deg)}
.faq details p{margin:-4px 0 20px; max-width:62ch}
.faq details:target summary{color:var(--accent-ink)}

/* ---------- 바닥글 — 메인과 같은 검정, 문서 · 404 는 얇은 한 줄 ---------- */
.footer{background:var(--color-inverse-bg); color:var(--color-inverse-ink); overflow:hidden}
.footer .in{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter)}
.footer a{text-decoration:none}
.footer a:focus-visible{outline:2px solid var(--color-inverse-ink); outline-offset:4px; border-radius:6px}
.footer__copy{margin:0; font-size:var(--fs-label); color:var(--color-inverse-ink-2)}
/* 얇은 바닥글(문서 · 404) — 같은 검정, 한 줄 */
.footer--slim .in{display:flex; flex-wrap:wrap; justify-content:space-between; align-items:center; gap:var(--space-3) var(--space-8); padding-block:var(--space-6) var(--space-8)}
.footer__links{display:flex; flex-wrap:wrap; gap:var(--space-1) var(--space-6); font-size:var(--fs-label)}
.footer__links a{display:flex; align-items:center; min-height:32px; color:var(--color-inverse-ink-2); transition:color var(--dur-fast) var(--ease-out)}
.footer__links a:hover{color:var(--color-inverse-ink)}

/* ---------- 지원 — 왼쪽 문의 · 오른쪽 자주 묻는 질문 (카드 없이) ---------- */
.wrap{max-width:var(--container); margin:0 auto; padding-inline:var(--gutter)}
.support{padding-block:var(--space-12) var(--space-20)}
.sup-head{display:flex; justify-content:space-between; align-items:flex-end; gap:var(--space-4); padding-bottom:var(--space-6); border-bottom:1px solid var(--color-line-ink)}
.sup-head h1{margin:0; font-size:var(--fs-h1); line-height:1; font-weight:var(--fw-black); letter-spacing:var(--ls-display)}
.sup-head .lang{grid-column:auto; grid-row:auto; margin:0}
.sup-grid{display:grid; grid-template-columns:repeat(12,minmax(0,1fr)); gap:var(--space-8) var(--space-5); padding-top:var(--space-10)}
.sup-contact{grid-column:span 5; align-self:start; position:sticky; top:100px}
.sup-faq{grid-column:7 / span 6}
.sup-label{margin:0 0 var(--space-3); font-size:var(--fs-label); font-weight:var(--fw-bold); color:var(--color-ink-2); letter-spacing:0}
.sup-mail{display:inline-block; font-size:clamp(24px,2.6vw,36px); font-weight:var(--fw-heavy); letter-spacing:-.05em; line-height:1.2; text-decoration:none; border-bottom:3px solid currentColor; padding-bottom:4px; color:var(--color-ink)}
.sup-mail:hover{color:var(--accent-ink)}
.sup-note{margin:var(--space-5) 0 0; max-width:44ch; font-size:15px; line-height:1.8; color:var(--ink2)}
.sup-faq .faq{margin-top:0}

/* 앱별 색 */
body[data-app="treebal"]{--accent:#4F7CFF; --accent-ink:#2F55C9; --accent-soft:#E8EEFF}

/* 트리밸 약관의 번호 목록 */
.doc ol li::marker{color:var(--ink3); font-weight:700}

@media (max-width:900px){
  .layout{grid-template-columns:minmax(0,1fr); padding-top:8px}
  .toc{position:static; max-height:none; padding:0; order:0}
  .toc summary{display:flex; justify-content:space-between; cursor:pointer; list-style:none; padding:14px 18px; border-radius:14px; background:var(--sheet);
               font-size:14px; font-weight:700}
  .toc summary::-webkit-details-marker{display:none}
  .toc summary::after{content:'⌄'; color:var(--ink3)}
  .toc[open] summary{border-radius:14px 14px 0 0}
  .toc ol{background:var(--sheet); border:0; border-radius:0 0 14px 14px; padding:0 18px 10px}
  .toc a{border-left:0; padding-left:0}
  .sheet{border-radius:22px}
  .top nav .opt{display:none}
}
@media (max-width:900px){
  .sup-grid{grid-template-columns:minmax(0,1fr); gap:var(--space-12)}
  .sup-contact,.sup-faq{grid-column:1 / -1; position:static}
}
@media (max-width:599px){
  .sup-mail{font-size:min(28px,6.6vw); border-bottom-width:2px}
  .support{padding-top:var(--space-8)}
  .top .in{height:60px}
  .logo,.me{font-size:17px}
  .crumb,.me{display:none}
  .logo,.top nav a{white-space:nowrap}
  .top nav a{padding:0 10px}
  .top nav{margin-right:-10px}
}
@media (max-width:374px){
  .top nav a{padding:0 7px}
  .top nav{margin-right:-7px}
  .contact-card{padding:22px 20px}
}
@media (max-width:520px){
  .doc-head{grid-template-columns:1fr}
  .lang{grid-column:1; grid-row:auto; justify-self:start; margin-top:12px}
  .doc{font-size:15.5px}
}

/* ---------- 앱 웹뷰 — 머리글 · 목차 · 바닥글 없이, 그 앱 화면 색으로 ----------
   담은: check_list lib/core/theme/theme.dart (bgWarm · textPrimary · textSecondary)
   트리밸: portfolio_rebalancing lib/theme/app_colors.dart (background · textPrimary · textSecondary) */
body.app{--bg:#F4EFE7; --sheet:#F4EFE7; --ink:#2A2521; --ink2:#4A433D; --ink3:#8A8178; --line:#E6DDCF; background:var(--bg)}
body.app[data-app="treebal"]{--bg:#FFFFFF; --sheet:#FFFFFF; --ink:#191F28; --ink2:#3E4652; --ink3:#66717E; --line:#E5E8EC}
body.app .layout{display:block; padding:20px 20px 40px; max-width:720px}
body.app .sheet{background:none; box-shadow:none; padding:0; border-radius:0}
body.app .doc-head h1{font-size:24px}
body.app .doc{font-size:15.5px}
body.app .doc h2{font-size:17px; margin-top:34px}