/*
  사이트 공용 스타일 — **전 16페이지 공통 시트**.

  구성은 세 층이다.
    0) 디자인 토큰 층 — 색·타이포·간격·라운드·그림자·터치 타깃의 **단일 정의**.
       리터럴 색상값(#rrggbb·rgb())은 **이 층에만** 존재한다. 다른 시트·인라인 style·JS는
       토큰만 참조한다. 디자인을 바꿀 때 손대는 곳은 여기 한 곳이다(덕지 금지).
    1) 공통 레이아웃 층 — 모든 페이지가 쓴다. 콘텐츠 래퍼 폭·좌우 패딩·중앙 정렬,
       상단 고정 바·푸터·언어 토글의 내부 폭, 스크롤바 자리 고정이 **여기에만** 정의된다.
       페이지별 시트(ja.css)나 인라인 style에서 이 값을 다시 정의하지 않는다 —
       페이지마다 폭이 달라 중심축이 흔들리던 원인이 그것이었다(Daniel 지시 2026-09-11).
    2) 홈·처리방침 전용 층 — `body.page-site` 스코프. 전 페이지 공통 시트가 되면서
       KR·JP 페이지로 새지 않도록 스코프를 걸었다.

  모바일 우선 430px · W3C 표준만 사용(접두사 단독 금지 · 색만으로 상태를 표시하지 않는다).
  단일 라이트 테마다 — 다크 대응은 하지 않고, 대신 body의 배경·글자색을 명시해
  호스트(브라우저 기본·다크 확장)의 색이 배어들지 않게 한다.
*/

/* ═════════════════════════════════════════════════════════════════════════
   0) 디자인 토큰 — 리터럴 값은 여기에만 둔다
   ═════════════════════════════════════════════════════════════════════════ */
:root{
  color-scheme:light;

  /* ── 원색 팔레트 (Daniel 승인 2026-09-11 · 시안 03 "오래 남는 빛")
        로고의 멀베리/브라스와 같은 값을 사이트 포인트 색으로 쓴다. */
  --paper:#F6F3EE;   /* 종이 바탕 */
  --ink:#33302F;     /* 본문 글자 */
  --muted:#736D69;   /* 보조 글자 */
  --line:#DDD7D0;    /* 실선·테두리 */
  --rose:#8B4964;    /* 멀베리 — 로고 본체 */
  --amber:#DEAA74;   /* 소프트 브라스 — 로고 빛 */
  --dark:#24262B;    /* 먹 — 어두운 면·브라스 위 글자 */

  /* ── 파생 색. 원색을 paper에 섞은 값을 미리 계산해 박았다.
        런타임 color-mix를 쓰지 않는 이유: 미지원 브라우저에서 색이 통째로 무효가 된다. */
  --surface:#FFFFFF;      /* 카드·입력·고정 바 */
  --surface-sunk:#EFEAE3; /* 표 머리·코드 배경(paper를 line 쪽으로 눌렀다) */
  --danger:#8A2B2B;       /* 오류 문구 전용 — 브랜드 색과 섞지 않는다 */

  /* ── 언어 계열 포인트.
        KR(/gunghap·/mbti) = **멀베리 주조** — 글자·테두리·채운 버튼까지 rose.
        JP(/ja/*)          = **브라스 주조 + 먹 글자** — 면(버튼·칩·좌측 바·표 적중)은 amber,
                             그 위 글자와 링크는 dark.
        amber는 paper 위 대비가 1.88:1이라 글자색으로 쓸 수 없다(WCAG 미달). 그래서
        JP는 "brass 면 + 먹 글자"로 계열을 만든다 — 언어 구분은 유지되고 가독성은 지킨다.
        대비 실측(sRGB 상대휘도): rose/paper 5.9:1 · ink/paper 11.8:1 · muted/paper 4.6:1 ·
        dark/amber 7.3:1 · paper/rose 5.9:1. */
  --kr:var(--rose);       /* = rose */
  --kr-ink:var(--rose);   /* KR 글자·링크 */
  --kr-on:var(--paper);    /* rose 면 위 글자 */
  --kr-tint:#EDE5E3;  /* rose 8% + paper */
  --kr-line:#D6C0C5;  /* rose 30% + paper */
  --jp:var(--amber);       /* = amber */
  --jp-ink:var(--dark);   /* JP 글자·링크 = dark */
  --jp-on:var(--dark);    /* amber 면 위 글자 */
  --jp-tint:#F3E9DD;  /* amber 14% + paper */
  --jp-line:#EBD2B7;  /* amber 45% + paper */

  /* ── 강조 계약(accent contract).
        페이지 시트는 색을 직접 고르지 않는다. 자기 언어 계열을 아래 6개 이름에 **한 번만**
        묶고(ja.css는 --jp-*, KR 2페이지는 --kr-*), 그 다음부터는 --accent* 만 참조한다.
        새 언어·새 계열이 생기면 묶는 줄 한 벌만 추가하면 된다. 기본값은 중립(먹)이다. */
  --accent:var(--dark);
  --accent-ink:var(--dark);
  --accent-on:var(--paper);
  --accent-tint:var(--surface-sunk);
  --accent-line:var(--line);

  /* ── 타이포. 글꼴 스택은 시스템 폰트만 쓴다(외부 요청 0 유지). */
  --font-ko:-apple-system,BlinkMacSystemFont,'Apple SD Gothic Neo','Noto Sans KR',system-ui,sans-serif;
  --font-ja:-apple-system,BlinkMacSystemFont,'Hiragino Sans','Noto Sans JP','Yu Gothic',system-ui,sans-serif;
  --font-latin:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,'Helvetica Neue',system-ui,sans-serif;
  --font-mono:ui-monospace,SFMono-Regular,Menlo,monospace;

  /* 크기 사다리. 현행 16페이지의 실측 인벤토리를 그대로 사다리로 고정했다 —
     이번 스킨에서 글자 크기 이동은 0이다(430px 넘침 회귀를 만들지 않기 위해).
     디자인을 다시 조율할 때는 이 숫자만 움직이면 전 페이지가 따라온다. */
  --fs-05:10px;   --fs-08:10.5px; --fs-10:11px;   --fs-15:11.5px;
  --fs-20:12px;   --fs-25:12.5px; --fs-30:13px;   --fs-35:13.5px;
  --fs-40:14px;   --fs-45:14.5px; --fs-50:15px;   --fs-55:15.5px;
  --fs-60:16px;   --fs-65:17px;   --fs-70:18px;   --fs-75:19px;
  --fs-80:20px;   --fs-85:22px;   --fs-90:23px;   --fs-95:34px;
  --fs-99:64px;

  --lh-none:1; --lh-tight:1.3; --lh-snug:1.45; --lh-normal:1.55; --lh-relaxed:1.7; --lh-loose:1.8;
  --fw-normal:400; --fw-medium:600; --fw-bold:700; --fw-display:750; --fw-heavy:800;
  --track-wide:.02em;

  /* ── 간격 사다리 */
  --sp-1:2px;  --sp-2:4px;  --sp-3:6px;  --sp-4:8px;   --sp-5:10px; --sp-6:12px;
  --sp-7:14px; --sp-8:18px; --sp-9:24px; --sp-10:28px; --sp-11:40px;

  /* ── 라운드 */
  --r-xs:4px; --r-sm:8px; --r-md:10px; --r-lg:12px; --r-xl:16px; --r-2xl:20px; --r-pill:99px;

  /* ── 그림자. 종이 결을 지키려고 아주 얕게만 쓴다(카드·고정 바). */
  --sh-card:0 1px 2px rgb(36 38 43 / .05);
  --sh-raised:0 2px 8px rgb(36 38 43 / .07);

  /* ── 터치 타깃·포커스 */
  --tap-sm:36px; --tap:44px; --tap-lg:48px;
  --focus:var(--rose); --focus-w:2px; --focus-gap:2px;

  /* ── 래퍼 토큰 — 폭과 좌우 패딩의 단일 정의. 데스크톱 620px로 전 페이지 통일. */
  --wrap:430px; --wrap-pad:14px;
}
@media(min-width:800px){:root{--wrap:620px}}

/* ═════════════════════════════════════════════════════════════════════════
   1) 공통 레이아웃 층
   ═════════════════════════════════════════════════════════════════════════ */
*{box-sizing:border-box;margin:0}
html{
  -webkit-text-size-adjust:100%;text-size-adjust:100%;
  scroll-padding-top:52px; /* 앵커가 상단 고정 바에 가리지 않게 */
  /* 스크롤바 자리 고정 — 짧은 페이지↔긴 페이지를 오갈 때 중심축이 좌우로 튀지 않게 한다.
     폴백을 먼저 쓰고, 표준을 지원하는 브라우저에서만 표준으로 바꾼다(기능 감지=@supports). */
  overflow-y:scroll;
}
@supports (scrollbar-gutter: stable){
  html{scrollbar-gutter:stable;overflow-y:auto}
}

/* 배경·글자색은 여기 한 곳에서 못 박는다 — 페이지별 시트가 다시 칠하지 않는다. */
body{background:var(--paper);color:var(--ink)}

.wrap{max-width:var(--wrap);margin:0 auto;padding:var(--sp-6) var(--wrap-pad) var(--sp-11)}

.skip{position:absolute;left:-9999px}
.skip:focus{position:static;display:inline-block;margin:var(--sp-3) 0;padding:var(--sp-4);background:var(--surface);border:1px solid currentColor;border-radius:var(--r-sm)}

/*
  고정 내비(상단 슬림 바) — 전 페이지 공통 구조.
  · 브랜드=홈 역링크 · 같은 언어 형제 링크 · 언어 전환(홈의 언어 섹션으로).
  · KR과 JP는 번역 짝이 아니므로 페이지 1:1 전환을 만들지 않는다 —
    전환은 언어 허브(홈의 #ko / #ja 섹션)로만 보낸다(c-jp-spec-draft §2.2 승계).
  · 링크 줄은 좁은 화면에서 가로 스크롤로 접히고, 문서는 가로로 넘치지 않는다.
  · 바의 내부 폭·좌우 패딩은 본문 래퍼와 같은 토큰을 쓴다 — 좌우 엣지가 전 페이지에서 일치한다.
*/
.topbar{position:sticky;top:0;z-index:20;background:var(--surface);border-bottom:1px solid var(--line);box-shadow:var(--sh-card)}
.tb-in{max-width:var(--wrap);margin:0 auto;padding:0 var(--wrap-pad);display:flex;align-items:center;gap:var(--sp-4);min-height:var(--tap)}
.tb-home{flex:0 0 auto;font-size:var(--fs-30);font-weight:var(--fw-bold);color:var(--ink);text-decoration:none;white-space:nowrap;padding:11px 0}
.tb-links{flex:1 1 auto;min-width:0;display:flex;align-items:center;gap:var(--sp-6);overflow-x:auto;white-space:nowrap;scrollbar-width:none}
.tb-links a{font-size:var(--fs-25);color:var(--muted);text-decoration:none;white-space:nowrap;padding:11px 0}
.tb-links a[aria-current="page"]{color:var(--ink);font-weight:var(--fw-bold)}
.langtoggle{display:inline-flex;align-items:stretch;flex:0 0 auto;border:1px solid var(--line);border-radius:var(--r-pill);overflow:hidden;background:var(--surface)}
.langtoggle a{display:inline-flex;align-items:center;font-size:var(--fs-15);line-height:var(--lh-tight);color:var(--muted);text-decoration:none;padding:9px var(--sp-5);white-space:nowrap}
.langtoggle a+a{border-left:1px solid var(--line)}
footer .langtoggle{margin-top:var(--sp-4)}
footer nav{display:flex;flex-wrap:wrap;gap:var(--sp-6);margin-top:var(--sp-3)}
footer nav a{color:var(--muted);min-height:var(--tap-sm);display:inline-flex;align-items:center}
footer nav a[aria-current="page"]{color:var(--ink);font-weight:var(--fw-bold)}
[hidden]{display:none!important}

/* ═════════════════════════════════════════════════════════════════════════
   2) 홈(`/`)·개인정보 처리방침(`/privacy`) 전용 — body.page-site 스코프
       홈은 **중립 기조**이고, 두 언어 색은 카드 그룹의 포인트로만 쓴다(전면 채색 금지).
   ═════════════════════════════════════════════════════════════════════════ */
.page-site{
  --acc:var(--dark); /* 중립 강조 — 홈·처리방침의 링크 */
  font-family:var(--font-ko);
  font-size:var(--fs-60);line-height:1.65;
}
.page-site .skip:focus{border-color:var(--acc);color:var(--acc)}
.page-site a{color:var(--acc)}
.page-site a:focus-visible,.page-site button:focus-visible,.page-site summary:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-gap)}
.page-site .langtoggle a[aria-current]{background:var(--acc);color:var(--paper);font-weight:var(--fw-bold)}

.page-site header{padding:var(--sp-5) var(--sp-1) var(--sp-1)}
.page-site .site{font-size:var(--fs-30);color:var(--muted)}
.page-site .site a{color:var(--muted);text-decoration:none}
.page-site h1{font-size:var(--fs-85);font-weight:var(--fw-bold);line-height:1.4;margin-top:var(--sp-2)}
.page-site h1 .wm{letter-spacing:.01em}
.page-site .tagline{font-size:var(--fs-50);font-weight:var(--fw-medium);margin-top:var(--sp-3)}
.page-site .lead{font-size:var(--fs-40);color:var(--muted);margin-top:var(--sp-3);line-height:var(--lh-relaxed)}
.page-site .romaji{font-size:var(--fs-20);color:var(--muted);margin-top:var(--sp-3)}

.page-site section.block{margin-top:var(--sp-9)}
.page-site section.block>h2{font-size:var(--fs-60);font-weight:var(--fw-bold)}
.page-site .grouphead{display:flex;flex-wrap:wrap;align-items:baseline;gap:var(--sp-4)}
.page-site .langtag{font-size:var(--fs-15);font-weight:var(--fw-bold);letter-spacing:.04em;border-radius:var(--r-pill);padding:var(--sp-3) 9px;border:1px solid}
.page-site .kr .langtag{color:var(--kr-ink);border-color:var(--kr-line);background:var(--kr-tint)}
.page-site .jp .langtag{color:var(--jp-ink);border-color:var(--jp-line);background:var(--jp-tint)}
.page-site .groupnote{font-size:var(--fs-25);color:var(--muted);margin-top:var(--sp-3);line-height:var(--lh-relaxed)}

.page-site .cards{display:grid;gap:var(--sp-5);margin-top:var(--sp-5)}
.page-site .card{display:block;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--sp-6) var(--sp-7);text-decoration:none;color:inherit;min-height:var(--tap)}
.page-site .card h3{font-size:var(--fs-55);font-weight:var(--fw-bold);line-height:var(--lh-snug)}
.page-site .card .url{font-size:var(--fs-15);color:var(--muted);font-variant-numeric:tabular-nums;overflow-wrap:anywhere}
.page-site .card p{font-size:var(--fs-35);color:var(--muted);margin-top:var(--sp-2);line-height:var(--lh-relaxed)}
.page-site .kr .card{border-left:3px solid var(--kr)}
.page-site .jp .card{border-left:3px solid var(--jp)}
.page-site .kr .card:hover,.page-site .kr .card:focus-visible{background:var(--kr-tint);border-color:var(--kr-line);border-left-color:var(--kr)}
.page-site .jp .card:hover,.page-site .jp .card:focus-visible{background:var(--jp-tint);border-color:var(--jp-line);border-left-color:var(--jp)}
/* EN·ES 그룹 — 새 색 계열을 만들지 않는다(새 계열 = 토큰 층에 새 리터럴 색).
   두 언어는 **중립(먹)** 으로 두고, 구분은 색이 아니라 라벨과 언어 토글이 한다. */
.page-site .en .langtag,.page-site .es .langtag{color:var(--ink);border-color:var(--line);background:var(--surface-sunk)}
.page-site .en .card,.page-site .es .card{border-left:3px solid var(--ink)}
.page-site .en .card:hover,.page-site .en .card:focus-visible,
.page-site .es .card:hover,.page-site .es .card:focus-visible{background:var(--surface-sunk);border-color:var(--line);border-left-color:var(--ink)}

.page-site .panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--sp-7);margin-top:var(--sp-5)}
.page-site .panel p{font-size:var(--fs-40)}
.page-site .panel p+p{margin-top:var(--sp-4)}
.page-site dl.rules{margin-top:var(--sp-4)}
.page-site dl.rules dt{font-size:var(--fs-35);font-weight:var(--fw-bold);margin-top:var(--sp-6)}
.page-site dl.rules dt:first-child{margin-top:0}
.page-site dl.rules dd{font-size:var(--fs-35);color:var(--muted);margin:var(--sp-3) 0 0;line-height:1.75}
.page-site .note{font-size:var(--fs-25);color:var(--muted);line-height:1.75}
.page-site .note code,.page-site code{font-family:var(--font-mono);font-size:.92em;background:var(--surface-sunk);border-radius:var(--r-xs);padding:1px var(--sp-2);overflow-wrap:anywhere}
.page-site .pending{font-size:var(--fs-25);color:var(--muted);border:1px dashed var(--line);border-radius:var(--r-md);padding:var(--sp-5) var(--sp-6);margin-top:var(--sp-4);line-height:1.75;background:var(--surface)}

/* 처리방침 본문 */
.page-site .doc h2{font-size:var(--fs-60);font-weight:var(--fw-bold);margin-top:var(--sp-10)}
.page-site .doc h2:first-of-type{margin-top:var(--sp-7)}
.page-site .doc p{font-size:var(--fs-45);margin-top:var(--sp-4);line-height:var(--lh-loose)}
.page-site .doc ul{margin:var(--sp-4) 0 0 var(--sp-8)}
.page-site .doc li{font-size:var(--fs-45);margin-bottom:var(--sp-3);line-height:var(--lh-loose)}
.page-site .doc table{border-collapse:collapse;margin-top:var(--sp-5);width:100%}
.page-site .doc th,.page-site .doc td{border:1px solid var(--line);padding:7px 9px;font-size:var(--fs-35);text-align:left;vertical-align:top}
.page-site .doc th{background:var(--surface-sunk);font-weight:var(--fw-bold);white-space:nowrap}
.page-site .tablescroll{overflow-x:auto}

.page-site footer{font-size:var(--fs-20);color:var(--muted);border-top:1px solid var(--line);padding-top:var(--sp-6);margin-top:var(--sp-10);line-height:var(--lh-loose)}