/* apps/sudoku/style.css — 스도쿠: 신문 퍼즐 지면(크림색 종이 + 남색 잉크 + 산호색 강조, 연필 메모는 회청색).
 * 모바일 한 줄(--app-width 480px). 글꼴은 언어 파일 fonts → :root 변수(--font-display 등, 생성기가 이 파일 뒤에 둔다).
 * 클래스 앞머리는 sd-(공통 컴포넌트의 mg- 와 겹치지 않게). 공통 타이틀 바(G.topBar)·끝 화면(data-mg-end)은 --mg-* 변수로만 색을 맞춘다.
 * 판은 DOM 격자(.sd-board > .sd-cell 버튼 81개) — 칸 크기는 sudoku.js 가 --cell 변수로 정한다. 3×3 상자 경계는 .bR/.bB 굵은 선.
 */
:root {
  --paper: #f7f1e3;
  --paper-2: #fffaf0;
  --ink: #1d2a44;
  --ink-dim: rgba(29, 42, 68, 0.78);
  --ink-faint: rgba(29, 42, 68, 0.56);
  --line: rgba(29, 42, 68, 0.18);
  --line-strong: #1d2a44;
  --coral: #e4572e;
  --coral-deep: #b63d1a;
  --blue: #2c5bd6;
  --pencil: #5f6f8c;
  --peer: #ebe4d1;
  --sel: #ffd98a;
  --same: #c9d9ff;
  --danger: #d0312d;
  --mint: #2e9e6b;
  --card: #fffdf7;

  --font-display: 'Fraunces', var(--font-sans);
  --display-weight: 700;
  --wb: normal;
  --hyphens: manual;

  /* 공통 타이틀 바 · 언어 선택 */
  --mg-top-fg: var(--ink);
  --mg-top-badge-bg: var(--coral);
  --mg-top-badge-fg: #fff;
  --lang-bg: rgba(255, 255, 255, 0.85);
  --lang-fg: var(--ink);
  --lang-border: rgba(29, 42, 68, 0.25);
  /* 공통 끝 화면 (밝은 종이 위) */
  --mg-star-on: #f2a623;
  --mg-star-off: rgba(29, 42, 68, 0.16);
  --mg-heart-bg: rgba(228, 87, 46, 0.08);
  --mg-heart-border: rgba(228, 87, 46, 0.4);
  --mg-heart-fg: var(--coral-deep);
  --mg-heart-on: var(--coral);
  --mg-share-bg: rgba(255, 255, 255, 0.9);
  --mg-share-border: rgba(29, 42, 68, 0.16);
  --mg-share-primary-bg: var(--ink);
  --mg-share-primary-fg: #fff;
  --mg-x: var(--ink);
  --mg-tiktok: var(--ink);
  --mg-faq-bg: rgba(255, 255, 255, 0.8);
  --mg-faq-border: rgba(29, 42, 68, 0.16);
  --mg-end-retry-bg: var(--coral);
  --mg-end-retry-fg: #fff;
  --toast-bg: rgba(29, 42, 68, 0.95);
}

html { background: var(--paper); }
body.sd-body {
  min-height: 100vh;
  background:
    radial-gradient(ellipse 110% 50% at 50% -10%, #fffdf6, transparent 70%),
    repeating-linear-gradient(90deg, transparent 0 39px, rgba(29, 42, 68, 0.035) 39px 40px),
    repeating-linear-gradient(0deg, transparent 0 39px, rgba(29, 42, 68, 0.035) 39px 40px),
    var(--paper);
  color: var(--ink);
  line-height: 1.6;
  word-break: var(--wb);
  hyphens: var(--hyphens);
  -webkit-hyphens: var(--hyphens);
}
[hidden] { display: none !important; }

/* 제목·버튼 글꼴: base.css 의 :lang(zh|th|vi) 규칙보다 뒤에서 다시 지정 */
.sd-h1, .sd-kicker, .sd-h1-main, .sd-h1-main em, .sd-btn-main, .sd-btn, .sd-diff-name,
.sd-pause, .sd-eyebrow, .sd-tier, .sd-newbest, .sd-doc h1 {
  font-family: var(--font-display);
}
/* 숫자는 본문 글꼴 굵게 (판·패드·시간) */
.sd-cell, .sd-key-n, .sd-hud-val, .sd-score-big, .sd-stat-num, .sd-top, .sd-best, .sd-hc { font-family: var(--font-sans); font-variant-numeric: tabular-nums; }

/* ---------------- 공통 레이아웃 ---------------- */
.sd-shell { max-width: var(--app-width); margin: 0 auto; padding: 8px 16px 0; }
.sd-screen { padding-top: 12px; }

.sd-btn {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0;
  width: 100%; min-height: 56px; margin: 0 0 10px;
  padding: 10px 18px;
  border: 2px solid var(--ink); border-radius: 14px;
  font-size: 19px; font-weight: var(--display-weight);
  line-height: 1.25; cursor: pointer; color: var(--ink); background: var(--card);
  transition: transform 0.12s ease, box-shadow 0.12s ease;
  -webkit-tap-highlight-color: transparent;
}
.sd-btn-primary { background: var(--coral); color: #fff; border-color: var(--ink); box-shadow: 0 4px 0 var(--ink); }
.sd-btn-primary:active, .sd-btn-resume:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--ink); }
.sd-btn-resume { background: var(--ink); color: #fff; box-shadow: 0 4px 0 #0b1426; }
.sd-btn-main { font-size: 19px; }
.sd-btn-sub { font-family: var(--font-sans); font-weight: 600; font-size: 13px; opacity: 0.85; font-variant-numeric: tabular-nums; }
.sd-btn-ghost { min-height: 48px; font-size: 16px; background: transparent; border-style: dashed; border-color: rgba(29, 42, 68, 0.45); flex-direction: row; gap: 6px; }
.sd-btn:focus-visible { outline: 3px solid var(--blue); outline-offset: 3px; }

/* ---------------- 시작 화면 (티징 + 짧은 방법) ---------------- */
.sd-start { text-align: center; padding-top: 14px; }
.sd-badge {
  display: inline-block; margin: 0 0 12px;
  padding: 5px 14px; border-radius: 999px;
  background: var(--card); color: var(--ink);
  border: 1.5px solid var(--line-strong);
  font-size: 13px; line-height: 1.35;
}
.sd-hero {
  display: grid; grid-template-columns: repeat(3, 1fr);
  width: 150px; margin: 0 auto 8px; border: 3px solid var(--ink); border-radius: 6px; background: var(--paper-2);
  box-shadow: 6px 6px 0 rgba(29, 42, 68, 0.12); transform: rotate(-2deg);
}
.sd-hc {
  display: flex; font-style: normal; align-items: center; justify-content: center; aspect-ratio: 1;
  font-size: 24px; font-weight: 700; line-height: 1; color: var(--ink);
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
.sd-hc:nth-child(3n) { border-right: 0; }
.sd-hc:nth-child(n+7) { border-bottom: 0; }
.sd-hc-u { color: var(--blue); }
.sd-hc-sel { background: var(--sel); animation: sd-blink 1.6s ease-in-out infinite; }
.sd-hc-n { display: grid; grid-template-columns: repeat(3, 1fr); align-content: center; font-size: 10px; font-weight: 600; color: var(--pencil); padding: 3px; }
.sd-hc-n b { font-weight: 600; }
@keyframes sd-blink { 0%, 100% { background: var(--sel); } 50% { background: #fff2cf; } }
.sd-h1 { margin: 14px 0 10px; line-height: 1.15; font-weight: var(--display-weight); }
.sd-kicker {
  display: inline-block; max-width: 100%; margin-bottom: 10px; padding: 3px 12px;
  background: var(--ink); color: #fff; border-radius: 6px;
  font-size: 15px; line-height: 1.35; letter-spacing: 0.02em;
}
.sd-h1-main { display: block; font-size: 31px; color: var(--ink); overflow-wrap: break-word; }
.sd-h1-main em { font-style: italic; color: var(--coral); }
.sd-hook { margin: 0 auto 16px; max-width: 400px; font-size: 16px; color: var(--ink-dim); }
.sd-how { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 0 0 16px; padding: 0; list-style: none; }
.sd-how li {
  display: flex; flex-direction: column; align-items: center; gap: 4px; min-width: 0;
  padding: 10px 6px; border-radius: 12px; background: var(--card); border: 1.5px solid var(--line);
}
.sd-how-ico { font-size: 22px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.sd-how-txt { font-size: 12.5px; line-height: 1.3; color: var(--ink); overflow-wrap: break-word; max-width: 100%; font-weight: 600; }
.sd-diffs { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin: 0 0 14px; }
.sd-diff {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 0; min-height: 56px;
  padding: 6px 8px; border-radius: 12px; cursor: pointer; color: var(--ink);
  background: var(--card); border: 2px solid var(--line);
  -webkit-tap-highlight-color: transparent;
}
.sd-diff[aria-checked="true"] { border-color: var(--ink); background: var(--sel); box-shadow: 0 3px 0 var(--ink); }
.sd-diff:focus-visible { outline: 3px solid var(--blue); outline-offset: 2px; }
.sd-diff-dots { font-size: 9px; letter-spacing: 1px; color: var(--coral); line-height: 1; }
.sd-diff-name { font-weight: var(--display-weight); font-size: 15px; line-height: 1.25; overflow-wrap: break-word; max-width: 100%; }
.sd-facts { margin: 4px 0 0; font-size: 13px; color: var(--ink-faint); }

/* ---------------- 게임 화면 ---------------- */
.sd-play { padding-top: 4px; }
.sd-hud { display: grid; grid-template-columns: 1.4fr 1fr 1fr; gap: 6px; margin: 0 auto 8px; max-width: 456px; }
.sd-hud-box {
  display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0;
  padding: 3px 6px 4px; border-radius: 10px; background: var(--card); border: 1.5px solid var(--line);
}
.sd-hud-label { font-size: 11px; line-height: 1.25; color: var(--ink-faint); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sd-hud-val { font-size: 18px; font-weight: 800; line-height: 1.2; color: var(--ink); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.sd-hud-level { font-size: 14px; line-height: 1.55; }

.sd-field { position: relative; margin: 0 auto; width: fit-content; max-width: 100%; }
.sd-board {
  --cell: 36px;
  display: grid; grid-template-columns: repeat(9, var(--cell));
  border: 3px solid var(--line-strong); border-radius: 6px; overflow: hidden; background: var(--paper-2);
  touch-action: manipulation; -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  box-shadow: 0 8px 22px rgba(29, 42, 68, 0.14);
}
.sd-cell {
  position: relative; width: var(--cell); height: var(--cell); padding: 0; margin: 0; border: 0;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; align-items: center; justify-content: center; overflow: hidden;
  font-size: calc(var(--cell) * 0.6); font-weight: 600; line-height: 1; color: var(--blue);
  background: transparent; cursor: pointer; touch-action: manipulation; -webkit-tap-highlight-color: transparent;
}
.sd-cell:nth-child(9n) { border-right: 0; }
.sd-cell:nth-child(n+73) { border-bottom: 0; }
.sd-cell.bR { border-right: 2px solid var(--line-strong); }
.sd-cell.bB { border-bottom: 2px solid var(--line-strong); }
.sd-cell.is-given { color: var(--ink); font-weight: 800; }
.sd-cell.is-hint { color: var(--mint); font-weight: 800; }
.sd-cell.is-peer { background: var(--peer); }
.sd-cell.is-same { background: var(--same); }
.sd-cell.is-sel { background: var(--sel); }
.sd-cell.is-conflict { box-shadow: inset 0 0 0 2px rgba(208, 49, 45, 0.65); }
.sd-cell.is-wrong { color: var(--danger); }
.sd-cell:focus-visible { outline: 3px solid var(--blue); outline-offset: -3px; z-index: 1; }
.sd-notes { display: grid; grid-template-columns: repeat(3, 1fr); width: 100%; height: 100%; padding: 1px; }
.sd-notes i {
  display: flex; align-items: center; justify-content: center; font-style: normal;
  font-size: calc(var(--cell) * 0.25); font-weight: 600; line-height: 1; color: var(--pencil);
}
.sd-notes i.on { color: var(--ink); background: rgba(44, 91, 214, 0.18); border-radius: 3px; }
.sd-board.is-solved .sd-cell { animation: sd-wave 0.7s ease both; }
@keyframes sd-wave { 0% { background: transparent; } 40% { background: #cdeedc; } 100% { background: transparent; } }
.sd-pause {
  position: absolute; inset: 0; z-index: 2; display: flex; align-items: center; justify-content: center; padding: 16px; margin: 0;
  width: 100%; border: 0; border-radius: 6px; cursor: pointer; color: #fff; text-align: center;
  background: rgba(29, 42, 68, 0.96); font-weight: var(--display-weight); font-size: 20px; line-height: 1.35;
}
.sd-pause:focus-visible { outline: 3px solid var(--sel); outline-offset: -4px; }

.sd-tools { display: grid; grid-template-columns: repeat(5, 1fr); gap: 2px; margin: 10px auto 8px; max-width: 456px; }
.sd-tool {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 1px; min-width: 0; min-height: 52px;
  padding: 4px 0; border: 0; border-radius: 10px; background: transparent; color: var(--ink); cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.sd-tool:active { background: rgba(29, 42, 68, 0.08); }
.sd-tool:disabled { opacity: 0.38; cursor: default; }
.sd-tool:focus-visible { outline: 3px solid var(--blue); outline-offset: 0; }
.sd-tool-ico { display: flex; align-items: center; justify-content: center; width: 30px; height: 30px; border-radius: 50%; font-size: 19px; line-height: 1; font-weight: 700; border: 1.5px solid var(--line); background: var(--card); }
.sd-tool-txt { font-size: 11px; letter-spacing: -0.01em; line-height: 1.2; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sd-tool[aria-pressed="true"] .sd-tool-ico { background: var(--ink); color: #fff; border-color: var(--ink); }
.sd-tool[aria-pressed="true"] .sd-tool-txt { color: var(--coral-deep); }
.sd-tool-badge {
  position: absolute; top: 1px; left: calc(50% + 8px); min-width: 17px; height: 17px; padding: 0 4px; border-radius: 9px;
  background: var(--coral); color: #fff; font-size: 11px; font-weight: 800; line-height: 17px; font-family: var(--font-sans);
}
.sd-tool.is-empty .sd-tool-badge { background: rgba(29, 42, 68, 0.35); }

.sd-pad { display: grid; grid-template-columns: repeat(9, 1fr); gap: 4px; margin: 0 auto 14px; max-width: 456px; }
.sd-key {
  position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; min-width: 0; height: 58px;
  padding: 0; border: 1.5px solid var(--line); border-radius: 10px; background: var(--card); color: var(--ink); cursor: pointer;
  box-shadow: 0 2px 0 rgba(29, 42, 68, 0.18); -webkit-tap-highlight-color: transparent; touch-action: manipulation;
}
.sd-key:active { transform: translateY(2px); box-shadow: none; }
.sd-key:focus-visible { outline: 3px solid var(--blue); outline-offset: 1px; }
.sd-key-n { font-size: 26px; font-weight: 700; line-height: 1.05; color: var(--blue); }
.sd-key-left { font-size: 10.5px; font-weight: 700; line-height: 1.2; min-height: 12px; color: var(--ink-faint); font-family: var(--font-sans); }
.sd-key.is-same { border-color: var(--blue); background: #eef3ff; }
.sd-key.is-done { opacity: 0.35; }

/* ---------------- 끝 화면: 결과 카드 ---------------- */
.sd-end { padding-top: 10px; }
.sd-result {
  position: relative; margin: 0 0 22px; padding: 20px 16px 18px; text-align: center;
  border-radius: 18px; border: 2px solid var(--ink); background: var(--card);
  box-shadow: 6px 6px 0 rgba(29, 42, 68, 0.14);
}
.sd-eyebrow {
  display: inline-block; max-width: 100%; margin: 0 0 8px; padding: 4px 14px; border-radius: 999px;
  background: var(--ink); color: #fff; font-size: 15px; line-height: 1.35;
}
.sd-tier-line { display: flex; align-items: center; justify-content: center; gap: 10px; margin: 6px 0 0; line-height: 1.2; }
.sd-tier-emoji { font-size: 38px; line-height: 1; font-family: 'Apple Color Emoji', 'Segoe UI Emoji', 'Noto Color Emoji', sans-serif; }
.sd-tier { min-width: 0; font-size: 24px; line-height: 1.25; color: var(--coral-deep); overflow-wrap: break-word; }
.sd-score-line { margin: 10px 0 0; line-height: 1; }
.sd-score-big { font-size: 60px; font-weight: 800; line-height: 1.05; color: var(--ink); }
.sd-newbest {
  display: inline-block; margin: 10px 0 0; padding: 3px 12px; border-radius: 8px;
  background: var(--sel); color: var(--ink); font-size: 15px; line-height: 1.35; transform: rotate(-2deg); border: 1.5px solid var(--ink);
}
.sd-best { margin: 8px 0 0; font-size: 15px; font-weight: 700; color: var(--ink-dim); }
.sd-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 16px 0 0; }
.sd-stat { min-width: 0; padding: 10px 6px; border-radius: 12px; background: var(--paper); border: 1.5px solid var(--line); }
.sd-stat dt { font-size: 12.5px; line-height: 1.3; color: var(--ink-faint); overflow-wrap: break-word; font-weight: 600; }
.sd-stat dd { margin: 6px 0 0; }
.sd-stat-num { font-size: 28px; font-weight: 800; line-height: 1.3; color: var(--ink); }
.sd-rank { margin: 14px 0 0; padding: 12px 10px; border-radius: 12px; background: rgba(44, 91, 214, 0.06); border: 1.5px dashed rgba(44, 91, 214, 0.45); }
.sd-comparing { margin: 0; font-size: 14px; color: var(--ink-faint); }
.sd-top { margin: 0; font-size: 28px; font-weight: 800; line-height: 1.2; color: var(--blue); }
.sd-beat { margin: 4px 0 0; font-size: 15px; font-weight: 600; line-height: 1.4; color: var(--ink); }
.sd-others { margin: 2px 0 0; font-size: 13px; line-height: 1.4; color: var(--ink-faint); }

/* ---------------- 언어별 ---------------- */
html:lang(th) .sd-h1-main, html:lang(th) .sd-kicker, html:lang(th) .sd-how-txt, html:lang(th) .sd-btn, html:lang(th) .sd-hook, html:lang(th) .sd-pause, html:lang(th) .sd-diff-name, html:lang(th) .sd-tier, html:lang(th) .sd-tool-txt { line-height: 1.55; letter-spacing: 0; }
html:lang(th) .sd-hud-label, html:lang(th) .sd-stat dt { line-height: 1.5; letter-spacing: 0; }
html:lang(vi) .sd-h1-main, html:lang(vi) .sd-kicker, html:lang(vi) .sd-tier { line-height: 1.3; }
html:lang(ja) .sd-h1-main, html:lang(zh) .sd-h1-main, html:lang(ko) .sd-h1-main { font-size: 30px; line-height: 1.3; }
html:lang(ja) .sd-how-txt, html:lang(zh) .sd-how-txt, html:lang(ko) .sd-how-txt { font-size: 13px; }
html:lang(ja) .sd-h1-main em, html:lang(zh) .sd-h1-main em, html:lang(ko) .sd-h1-main em, html:lang(th) .sd-h1-main em { font-style: normal; }

/* ---------------- 개인정보처리방침 ---------------- */
.sd-doc { padding: 16px 0 8px; }
.sd-doc h1 { font-size: 26px; line-height: 1.25; margin: 8px 0 14px; }
.sd-doc h2 { font-size: 17px; margin: 22px 0 6px; color: var(--coral-deep); }
.sd-doc p { color: var(--ink-dim); font-size: 15px; }
.sd-doc a, .site-footer a { color: var(--blue); }
.site-footer { color: var(--ink-faint); }

/* ---------------- 움직임 줄이기 ---------------- */
@media (prefers-reduced-motion: reduce) {
  .sd-hc-sel, .sd-board.is-solved .sd-cell { animation: none; }
  .sd-btn, .sd-key { transition: none; }
}
@media (max-width: 359px) {
  .sd-h1-main { font-size: 26px; }
  .sd-key { height: 52px; }
  .sd-key-n { font-size: 22px; }
}