/*
  사이트 공용 스타일 — `/`(홈)과 `/privacy`(개인정보 처리방침).

  색 토큰은 기존 두 결을 그대로 가져온다. 홈 자체는 **중립 기조**이고,
  두 서비스 색은 카드 그룹의 포인트로만 쓴다(전면 채색 금지).
    KR(/gunghap·/mbti)  --kr  #d6336c  ← gunghap.html의 --b
    JP(/ja/*)           --jp  #5f3dc4  ← assets/ja.css의 --b
  모바일 우선 430px · W3C 표준만 사용(접두사 단독 금지 · 색만으로 상태를 표시하지 않는다).
*/
:root{
  --kr:#d6336c; --kr-soft:#fff3f7; --kr-line:#f0cad9;
  --jp:#5f3dc4; --jp-soft:#f3eefc; --jp-line:#d4c6f2;
  --bg:#f7f6f8; --tx:#231d20; --mut:#6f6a72; --line:#e6e2e8; --acc:#3f3a44;
}
*{box-sizing:border-box;margin:0}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:-apple-system,'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;background:var(--bg);color:var(--tx);font-size:16px;line-height:1.65}
.wrap{max-width:430px;margin:0 auto;padding:12px 14px 40px}
@media(min-width:800px){.wrap{max-width:620px}}

.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;margin:6px 0;padding:8px;background:#fff;border:1px solid var(--acc);border-radius:8px;color:var(--acc)}

a{color:var(--acc)}
a:focus-visible,button:focus-visible,summary:focus-visible{outline:2px solid var(--acc);outline-offset:2px}

header{padding:10px 2px 2px}
.site{font-size:13px;color:var(--mut)}
.site a{color:var(--mut);text-decoration:none}
h1{font-size:22px;font-weight:700;line-height:1.4;margin-top:4px}
h1 .wm{letter-spacing:.01em}
.tagline{font-size:15px;font-weight:600;margin-top:6px}
.lead{font-size:14px;color:var(--mut);margin-top:6px;line-height:1.7}
.romaji{font-size:12px;color:var(--mut);margin-top:6px}

section.block{margin-top:24px}
section.block>h2{font-size:16px;font-weight:700}
.grouphead{display:flex;flex-wrap:wrap;align-items:baseline;gap:8px}
.langtag{font-size:11.5px;font-weight:700;letter-spacing:.04em;border-radius:99px;padding:3px 9px;border:1px solid}
.kr .langtag{color:var(--kr);border-color:var(--kr-line);background:var(--kr-soft)}
.jp .langtag{color:var(--jp);border-color:var(--jp-line);background:var(--jp-soft)}
.groupnote{font-size:12.5px;color:var(--mut);margin-top:6px;line-height:1.7}

.cards{display:grid;gap:10px;margin-top:10px}
.card{display:block;background:#fff;border:1px solid var(--line);border-radius:12px;padding:13px 14px;text-decoration:none;color:inherit;min-height:44px}
.card h3{font-size:15.5px;font-weight:700;line-height:1.45}
.card .url{font-size:11.5px;color:var(--mut);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.card p{font-size:13.5px;color:var(--mut);margin-top:5px;line-height:1.7}
.kr .card{border-left:3px solid var(--kr)}
.jp .card{border-left:3px solid var(--jp)}
.kr .card:hover,.kr .card:focus-visible{background:var(--kr-soft);border-color:var(--kr-line);border-left-color:var(--kr)}
.jp .card:hover,.jp .card:focus-visible{background:var(--jp-soft);border-color:var(--jp-line);border-left-color:var(--jp)}

.panel{background:#fff;border:1px solid var(--line);border-radius:12px;padding:14px;margin-top:10px}
.panel p{font-size:14px}
.panel p+p{margin-top:8px}
dl.rules{margin-top:8px}
dl.rules dt{font-size:13.5px;font-weight:700;margin-top:12px}
dl.rules dt:first-child{margin-top:0}
dl.rules dd{font-size:13.5px;color:var(--mut);margin:3px 0 0;line-height:1.75}
.note{font-size:12.5px;color:var(--mut);line-height:1.75}
.note code,code{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:.92em;background:#efedf1;border-radius:4px;padding:1px 4px;overflow-wrap:anywhere}
.pending{font-size:12.5px;color:var(--mut);border:1px dashed var(--line);border-radius:9px;padding:10px 12px;margin-top:8px;line-height:1.75;background:#fbfafc}

/* 처리방침 본문 */
.doc h2{font-size:16px;font-weight:700;margin-top:26px}
.doc h2:first-of-type{margin-top:14px}
.doc p{font-size:14.5px;margin-top:8px;line-height:1.8}
.doc ul{margin:8px 0 0 18px}
.doc li{font-size:14.5px;margin-bottom:6px;line-height:1.8}
.doc table{border-collapse:collapse;margin-top:10px;width:100%}
.doc th,.doc td{border:1px solid var(--line);padding:7px 9px;font-size:13.5px;text-align:left;vertical-align:top}
.doc th{background:#f1eff3;font-weight:700;white-space:nowrap}
.tablescroll{overflow-x:auto}

footer{font-size:12px;color:var(--mut);border-top:1px solid var(--line);padding-top:12px;margin-top:28px;line-height:1.8}
footer nav{display:flex;flex-wrap:wrap;gap:12px;margin-top:6px}
footer nav a{color:var(--mut);min-height:36px;display:inline-flex;align-items:center}
[hidden]{display:none}