/*
  JP 공용 스타일 (/ja/*) — 12페이지가 함께 쓴다.
  결은 둘로 나뉜다 — 오미쿠지는 놀이(뽑기 인터랙션), 해설·일람·상성·타입은 참고(읽는 문서).

  색·크기·간격은 **전부 assets/site.css의 토큰**이다. 이 시트에는 리터럴 색상값이 없다.
  하는 일은 두 가지뿐:
    1) 강조 계약(--accent*)을 **JP 계열(브라스 + 먹)** 에 묶는다 — 아래 :root 한 벌.
    2) JP 페이지에만 있는 컴포넌트를 그 계약 위에서 그린다.

  KR(멀베리 주조)과의 구분은 색 하나가 아니라 **역할 배치**로 낸다.
    · 면(채운 버튼·활성 칩·좌측 바·표 적중·인용)     = 브라스 --jp
    · 그 위와 주변의 글자·링크                        = 먹 --jp-ink
    · 링크 밑줄만 브라스로 남긴다(text-decoration-color)
  브라스는 paper 위 대비가 1.88:1이라 글자색으로 쓸 수 없다 — 그래서 글자를 먹으로 둔다.
  W3C 표준만 쓴다: 접두사 단독 금지, 색만으로 상태를 표시하지 않는다.
*/
:root{
  --accent:var(--jp);
  --accent-ink:var(--jp-ink);
  --accent-on:var(--jp-on);
  --accent-tint:var(--jp-tint);
  --accent-line:var(--jp-line);
  --focus:var(--jp-ink);
}
body{font-family:var(--font-ja);font-size:var(--fs-60);line-height:var(--lh-loose)}
.skip:focus{border-color:var(--accent-ink);color:var(--accent-ink)}
a{color:var(--accent-ink);text-decoration-color:var(--accent);text-underline-offset:3px}
a:focus-visible,button:focus-visible,summary:focus-visible,select:focus-visible,input:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-gap)}

header{padding:var(--sp-5) var(--sp-1)}
.brand{font-size:var(--fs-20);color:var(--muted);letter-spacing:var(--track-wide)}
.brand b{font-weight:var(--fw-bold);color:var(--ink)}
h1{font-size:var(--fs-80);font-weight:var(--fw-bold);line-height:var(--lh-snug);margin-top:var(--sp-1)}
.lead{font-size:var(--fs-40);color:var(--muted);margin-top:var(--sp-3)}

nav.site{display:flex;flex-wrap:wrap;gap:var(--sp-3);margin:var(--sp-5) 0 var(--sp-1)}
nav.site a{font-size:var(--fs-25);color:var(--accent-ink);background:var(--surface);border:1px solid var(--line);border-radius:var(--r-pill);padding:7px 11px;text-decoration:none;min-height:var(--tap-sm);display:inline-flex;align-items:center}
nav.site a[aria-current="page"]{background:var(--accent-tint);border-color:var(--accent-line);font-weight:var(--fw-bold)}

.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--sp-7);margin:var(--sp-6) 0 var(--sp-5)}
.card h2{font-size:var(--fs-50);margin-bottom:var(--sp-4)}
.card h3{font-size:var(--fs-40);margin:var(--sp-7) 0 var(--sp-2)}
.card p{font-size:var(--fs-45)}
.card p+p{margin-top:var(--sp-4)}
.note{font-size:var(--fs-25);color:var(--muted);line-height:var(--lh-relaxed)}
.note a{overflow-wrap:anywhere}
fieldset{border:0;padding:0;margin:0;min-width:0}
legend{font-size:var(--fs-40);font-weight:var(--fw-bold);padding:0;margin-bottom:var(--sp-1)}
label{font-size:var(--fs-30);color:var(--muted);display:block;margin-bottom:var(--sp-2)}
select,input[type=text]{width:100%;padding:var(--sp-6);font-size:var(--fs-65);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);min-width:0;max-width:100%;font-family:inherit;color:inherit}

.choices{display:grid;gap:var(--sp-4);margin-top:var(--sp-4)}
.choice{display:flex;gap:var(--sp-5);align-items:flex-start;padding:11px var(--sp-6);border:1px solid var(--line);border-radius:var(--r-md);background:var(--surface);min-height:var(--tap);cursor:pointer}
.choice input{margin:var(--sp-2) 0 0;accent-color:var(--accent-ink);flex:none;width:18px;height:18px}
.choice:has(input:checked){border-color:var(--accent);background:var(--accent-tint)}
.choice input:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-gap)}
.choice strong{display:block;font-size:var(--fs-45);font-weight:var(--fw-medium)}
.choice small{display:block;font-size:var(--fs-20);color:var(--muted);line-height:var(--lh-normal)}

.btn{width:100%;padding:var(--sp-6);border-radius:var(--r-md);font-size:var(--fs-50);font-weight:var(--fw-bold);min-height:var(--tap-lg);font-family:inherit;cursor:pointer;border:1px solid var(--accent)}
.btn.primary{background:var(--accent);color:var(--accent-on)}
.btn.ghost{background:var(--surface);color:var(--accent-ink)}
.btn+.btn{margin-top:var(--sp-4)}
.btn[disabled]{opacity:.55;cursor:default}
.linkrow{display:flex;flex-wrap:wrap;gap:var(--sp-5);margin:var(--sp-5) 0}
.linkrow a{font-size:var(--fs-35);min-height:var(--tap-sm);display:inline-flex;align-items:center}

.result{padding:var(--sp-8) var(--sp-7);border:1px solid var(--accent-line);border-radius:var(--r-xl);background:var(--surface);box-shadow:var(--sh-card);margin:var(--sp-6) 0 var(--sp-5)}
.result .kicker{font-size:var(--fs-20);color:var(--muted)}
.grade{font-size:var(--fs-95);font-weight:var(--fw-display);color:var(--accent-ink);line-height:var(--lh-tight);margin-top:var(--sp-1)}
.grade small{display:block;font-size:var(--fs-30);font-weight:var(--fw-normal);color:var(--muted)}
.headline{font-size:var(--fs-65);font-weight:var(--fw-medium);margin-top:var(--sp-4)}
.meaning{font-size:var(--fs-40);color:var(--ink);margin-top:var(--sp-4)}
.chosen{display:inline-block;font-size:var(--fs-20);color:var(--accent-ink);background:var(--accent-tint);border-radius:var(--r-pill);padding:var(--sp-3) 11px;margin-top:var(--sp-5)}
.items div{padding:var(--sp-5) 0;border-top:1px solid var(--line);font-size:var(--fs-45)}
.items b{display:block;font-size:var(--fs-20);color:var(--accent-ink);margin-bottom:var(--sp-1)}
.limit{margin:var(--sp-6) 0 0;padding:var(--sp-6) 0 0;border-top:1px solid var(--line);color:var(--muted);font-size:var(--fs-25)}

table{border-collapse:collapse;width:100%;font-size:var(--fs-35)}
.scroll{overflow-x:auto;-webkit-overflow-scrolling:touch}
th,td{border:1px solid var(--line);padding:var(--sp-4) 9px;text-align:left;vertical-align:top}
th{background:var(--surface-sunk);font-weight:var(--fw-medium);font-size:var(--fs-25)}
td.hit{background:var(--accent-tint);font-weight:var(--fw-bold);color:var(--accent-ink);outline:var(--focus-w) solid var(--accent);outline-offset:-2px}

details{margin:var(--sp-5) 0;background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);padding:0 var(--sp-7)}
summary{font-size:var(--fs-40);color:var(--ink);cursor:pointer;min-height:var(--tap-lg);display:flex;align-items:center;font-weight:var(--fw-medium)}
details>*:not(summary){padding-bottom:var(--sp-6)}
.faq p{font-size:var(--fs-40);color:var(--ink)}

.srcbox{font-size:var(--fs-30);line-height:var(--lh-loose)}
.srcbox li{margin-bottom:var(--sp-4)}
.srcbox a{overflow-wrap:anywhere}
ul{padding-left:1.1em}

.status{font-size:var(--fs-30);color:var(--accent-ink);min-height:1.2em;margin-top:var(--sp-4)}
.status.err{color:var(--danger)}
.visually-hidden{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}

.feedback{background:var(--surface);border:1px solid var(--line);border-radius:var(--r-lg);box-shadow:var(--sh-card);padding:var(--sp-7);margin:var(--sp-7) 0}
.feedback p{font-size:var(--fs-40)}
.feedback .note{margin-top:var(--sp-2)}
.fbtns{display:flex;flex-wrap:wrap;gap:var(--sp-4);margin-top:var(--sp-5)}
.fbtns button{border:1px solid var(--line);background:var(--surface);color:var(--ink);border-radius:var(--r-pill);padding:9px var(--sp-7);font-size:var(--fs-30);font-family:inherit;min-height:40px;cursor:pointer}
.fbtns button:hover{border-color:var(--accent);background:var(--accent-tint)}

/* 광고 자리(D0 비활성) — 브랜드 색을 쓰지 않는 중립 자리다. */
.ad{background:var(--surface-sunk);border:1px dashed var(--line);border-radius:var(--r-md);height:100px;display:flex;align-items:center;justify-content:center;color:var(--muted);font-size:var(--fs-30);margin:var(--sp-7) 0}
footer{font-size:var(--fs-15);color:var(--muted);border-top:1px solid var(--line);padding-top:var(--sp-5);margin-top:var(--sp-8);line-height:var(--lh-relaxed)}
img{max-width:100%;height:auto}

/*
  고정 내비·푸터·언어 토글의 **구조와 폭은 assets/site.css 공통 층**에 있다.
  여기에는 JP 계열에 기대는 상태 표시만 남긴다 — 폭을 다시 정의하면 중심축이 어긋난다.
*/
.langtoggle a[aria-current]{background:var(--accent);color:var(--accent-on);font-weight:var(--fw-bold)}

/* 장면 선택 버튼(상성 §11) — .choice를 버튼으로도 쓴다. 색만으로 상태를 표시하지 않는다. */
button.choice{width:100%;text-align:left;font-family:inherit;font-size:inherit;color:inherit}
button.choice[aria-current]{border-color:var(--accent);background:var(--accent-tint)}
button.choice[aria-current] strong{font-weight:var(--fw-bold)}
button.choice:focus-visible{outline:var(--focus-w) solid var(--focus);outline-offset:var(--focus-gap)}
.scene+.scene{margin-top:var(--sp-7)}

/* .quote = 카피의 회화 예·자기 물음 한 줄. #results = 문언 사전 검색 결과 묶음. */
.quote{margin-top:var(--sp-5);padding:var(--sp-5) var(--sp-6);border-left:3px solid var(--accent);background:var(--accent-tint);border-radius:0 var(--r-md) var(--r-md) 0;font-size:var(--fs-45)}
#results h3{font-size:var(--fs-40);margin:var(--sp-6) 0 var(--sp-1)}
#results .linkrow{margin-top:var(--sp-2)}
#results .linkrow a{overflow-wrap:anywhere}
#results .note{width:100%}
ol{padding-left:1.2em}
li{font-size:var(--fs-45)}