/* nugu.app/japanese 공용 디자인. 모든 앱이 이 파일 하나를 먼저 읽는다.
   규칙은 DESIGN.md 에 있다 — 여기 값을 바꾸면 거기도 같이 고친다.

   종이 노트 같은 미색 바탕, 먹색 글씨, 강조색은 朱(주홍) 하나.
   층은 지금처럼 **진하기**로 낸다. 朱 는 좁게 쓴다: 음변화 · 지금 배우는 글자 · 재생 중.
   고른 것(탭, 선택 칸)은 먹색으로 칠한다 — 朱 를 고른 표시로 쓰면 강조가 흔해져 묻힌다. */
:root {
  --paper: #FBF8F3;
  --card:  #FFFFFF;
  --ink:   #2B2B2B;
  --soft:  #5A5650;
  --dim:   #9A948B;
  --faint: #CFC8BD;
  --line:  #E8E2D8;
  --wash:  #F4EFE6;          /* 카드 안 옅은 칸, 눌렀을 때 */
  --shu:   #D9502F;          /* 朱 — 강조 하나 */
  --shu-wash: #FBEAE4;       /* 朱 를 옅게 깐 바탕 (음변화 칸) */
  --tap:   44px;
  --radius: 14px;

  --f-ja:    "Zen Maru Gothic", "Hiragino Maru Gothic ProN", "Hiragino Sans", sans-serif;
  --f-serif: "Noto Serif JP", "Hiragino Mincho ProN", serif;
  --f-ko:    "Pretendard Variable", Pretendard, -apple-system, "Apple SD Gothic Neo", system-ui, sans-serif;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--f-ko);
  line-height: 1.6;
}
a { color: inherit; }
button { font: inherit; color: inherit; }
:lang(ja), .ja { font-family: var(--f-ja); }

/* ── 사이트 머리 ───────────────────────────────────────────
   모든 앱 맨 위에 같은 줄이 선다: 왼쪽 「日本語」(허브로), 가운데 앱 목록, 오른쪽 韓/英.
   jp.js 의 JP.head() 가 그린다. 앱 목록은 jp.js 의 APPS 한 곳에만 적는다. */
.site-head {
  display: flex; align-items: center; gap: .6rem;
  max-width: 66rem; margin: 0 auto; padding: .7rem 1rem;
  border-bottom: 1px solid var(--line);
}
.site-head__logo {
  flex: none; text-decoration: none;
  font-family: var(--f-serif); font-weight: 700; font-size: 1.1rem; letter-spacing: .08em;
}
.site-head__logo::before {
  /* 도장 같은 朱 점 하나 */
  content: ""; display: inline-block; width: .5em; height: .5em; margin-right: .4em;
  border-radius: 50%; background: var(--shu); vertical-align: .12em;
}
.site-head__apps {
  flex: 1; display: flex; gap: .15rem; overflow-x: auto; scrollbar-width: none;
  margin: 0; padding: 0; list-style: none;
}
.site-head__apps::-webkit-scrollbar { display: none; }
/* 좁은 화면에서는 목록이 옆으로 밀린다. 끝을 흐리게 해 「더 있다」는 것을 보인다 —
   그냥 두면 글자가 반쯤 잘려 깨진 것처럼 보였다 */
@media (max-width: 40rem) {
  .site-head__apps {
    -webkit-mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent);
            mask-image: linear-gradient(to right, #000 calc(100% - 1.6rem), transparent);
    padding-right: 1.2rem;
  }
}
.site-head__apps a {
  display: block; white-space: nowrap; text-decoration: none;
  padding: .3rem .6rem; border-radius: 999px;
  font-family: var(--f-ja); font-size: .9rem; color: var(--dim);
}
.site-head__apps a:hover { color: var(--ink); }
.site-head__apps a[aria-current="page"] { color: var(--ink); background: var(--wash); font-weight: 700; }

/* 발음 표기 고르기 (韓 / 英). 모든 앱이 같은 값을 쓴다 — jp.reading */
.seg {
  flex: none; display: inline-flex; border: 1px solid var(--line);
  border-radius: 999px; overflow: hidden; background: var(--card);
}
.seg button {
  min-width: 2.1rem; min-height: 1.9rem; padding: .1rem .45rem;
  border: 0; background: transparent; color: var(--dim);
  font-family: var(--f-ja); font-size: .85rem; font-weight: 700; cursor: pointer;
}
.seg button + button { border-left: 1px solid var(--line); }
.seg button.is-on { background: var(--ink); color: var(--paper); }

/* ── 앱 제목과 탭 ─────────────────────────────────────── */
.app-head { padding: 1.6rem 1rem .4rem; text-align: center; }
.app-head h1 {
  margin: 0; font-family: var(--f-serif); font-weight: 700;
  font-size: 1.9rem; letter-spacing: .06em;
}
.app-head p { margin: .3rem 0 0; color: var(--soft); font-size: .92rem; }

/* 같은 너비 알약 격자 — 글자 수가 달라도 칸이 들쭉날쭉하지 않게 (05_Hiragana 에서 온 것) */
.tabs {
  margin: 1rem auto 0; max-width: 24rem;
  display: grid; grid-auto-flow: column; grid-auto-columns: 1fr; gap: .3rem;
}
.tabs button {
  min-height: var(--tap); padding: .4rem .3rem;
  border: 1px solid var(--line); border-radius: 999px;
  background: transparent; color: var(--dim);
  font-family: var(--f-ja); font-size: 1rem; font-weight: 700; cursor: pointer;
}
.tabs button.is-on { background: var(--ink); border-color: var(--ink); color: var(--paper); }

main { max-width: 36rem; margin: 0 auto; padding: .5rem 1rem 3rem; }
.view { display: none; }
.view.is-on { display: block; }

/* ── 부품 ─────────────────────────────────────────────── */
.card {
  background: var(--card); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 1rem 1.1rem;
}
.section-title {
  display: flex; align-items: baseline; gap: .5rem;
  margin: 2rem 0 .7rem; font-size: 1.05rem; font-weight: 700;
}
.section-title .ja { font-family: var(--f-serif); font-size: 1.25rem; }
.section-title small { color: var(--dim); font-weight: 400; font-size: .85rem; }

/* 3단 병기 — 일본어 / 로마자 / 한국어 발음. 크기와 진하기를 단계로 줄여 복잡해 보이지 않게.
   로마자와 한글 중 고른 쪽만 보인다(body.read-ro). 둘 다 보여 줄 자리는 .say--both */
.say { display: inline-flex; flex-direction: column; align-items: center; line-height: 1.25; }
.say__ja { font-family: var(--f-ja); font-size: 1em; color: var(--ink); }
.say__ro { font-size: .72em; color: var(--dim); letter-spacing: .02em; }
.say__ko { font-size: .8em;  color: var(--soft); }
body.read-ro .say:not(.say--both) .say__ko { display: none; }
body:not(.read-ro) .say:not(.say--both) .say__ro { display: none; }

/* 주석 상자 — 왼쪽 朱 선 */
.note {
  margin: .8rem 0; padding: .7rem .9rem;
  border-left: 3px solid var(--shu); border-radius: 0 10px 10px 0;
  background: var(--card); color: var(--soft); font-size: .9rem;
}
.note b { color: var(--ink); }
.note .ja { color: var(--ink); }

/* 음변화 표시 — 글자 안에서 바뀐 자리 */
.chg { color: var(--shu); }

.hint { color: var(--dim); font-size: .8rem; text-align: center; margin-top: 1rem; }

footer {
  max-width: 36rem; margin: 0 auto; padding: 1.5rem 1rem 2.5rem;
  border-top: 1px solid var(--line);
  color: var(--dim); font-size: .78rem; text-align: center; line-height: 1.7;
}
footer b { color: var(--soft); font-weight: 600; }

/* ── 넓은 화면 ────────────────────────────────────────────
   휴대폰이 앞이지만 브라우저에서는 가로가 넉넉하다. 그대로 두면 허전해서 같이 키운다. */
@media (min-width: 48rem) {
  main { max-width: 58rem; }
  footer { max-width: 58rem; }
  .app-head h1 { font-size: 2.3rem; }
}
@media (min-width: 64rem) {
  main { max-width: 66rem; }
}