@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;600;900&family=Gowun+Batang:wght@400;700&family=Ma+Shan+Zheng&display=swap');

  :root {
    --ink: #2b2724;
    --ink-soft: #4a443d;
    --ink-read: #3a352f;   /* 보조 텍스트 가독용 — ink-soft보다 진함 (고연령 사용자 대비) */
    --paper: #e8ddc7;
    --paper-deep: #ddcfb2;
    --line: #6b5d48;
    --red: #9e2b25;
    --red-deep: #7a1f1a;
    --blue: #1f4e5f;
    --blue-deep: #15323d;
    --gold: #b08d57;
    --glow: rgba(176,141,87,0.55);
  }

  * { box-sizing: border-box; margin: 0; padding: 0; }

  html, body {
    background: #d8c9ab;
    font-family: 'Gowun Batang', serif;
    color: var(--ink);
    min-height: 100vh;
    padding: 18px;
  }

  .wrap {
    width: 100%;
    max-width: 1100px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 14px;
  }

  .game-area {
    display: flex;
    flex-direction: row;
    gap: 20px;
    align-items: flex-start;
  }
  .board-col {
    flex: 2.7 1 0;
    min-width: 0;
    position: relative;
  }
  .side-panel {
    flex: 1 1 0;
    min-width: 232px;   /* 버튼 3개가 한 줄 유지되는 하한 (루미: 폭 +20~30px) */
    display: flex;
    flex-direction: column;
    gap: 12px;
  }
  /* 좁은 화면(모바일/좁은 iframe): 세로로 접기 + 순서 재배치 */
  @media (max-width: 720px) {
    .game-area { flex-direction: column; align-items: stretch; }
    .board-col, .side-panel { flex: 1 1 auto; }
    /* 사이드 패널 내부 순서: 상태 → 버튼 → 항복확인 → 잡은기물 → 기보 */
    .side-panel { display: flex; flex-direction: column; }
    .lang-toggle-wrap { order: -1; }   /* 설정버튼은 타이틀바에 있으므로 side-panel엔 없음 */
    .status      { order: 1; }
    .controls    { order: 2; }
    .resign-confirm { order: 3; }
    .captured-bar   { order: 4; }
    .movelog-wrap   { order: 5; }
  }

  .title-bar {
    text-align: center;
    position: relative;
  }
  .title-bar h1 {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: 1.5rem;
    letter-spacing: 0.3em;
    color: var(--ink);
    text-indent: 0.3em;
  }
  .title-bar .sub {
    font-size: 0.72rem;
    letter-spacing: 0.4em;
    color: var(--ink-soft);
    margin-top: 2px;
    text-indent: 0.4em;
  }

  /* 대국 시계 (timeMode != none일 때만 표시) */
  .clock-bar {
    display: flex;
    gap: 8px;
  }
  .clock-bar .clock {
    flex: 1;
    text-align: center;
    font-family: 'Gowun Batang', serif;
    font-size: 0.84rem;
    letter-spacing: 0.04em;
    padding: 7px 6px;
    background: rgba(43,39,36,0.04);
    border: 1px solid rgba(107,93,72,0.3);
    border-radius: 2px;
    color: var(--ink-soft);
    font-variant-numeric: tabular-nums;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
  }
  .clock-bar .clock.active {
    background: rgba(176,141,87,0.18);
    border-color: var(--gold);
    color: var(--ink);
    font-weight: 700;
  }
  .clock-bar .clock.low { color: var(--red); }
  .clock-bar .clock.active.low {
    background: rgba(158,43,37,0.1);
    border-color: var(--red);
    color: var(--red-deep);
  }

  .status {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
    padding: 16px 18px 15px;
    background: rgba(43,39,36,0.04);
    border: 1px solid rgba(107,93,72,0.3);
    /* ★ 상단에 얇은 먹색 강조선 — 기보창과 시각적 무게를 분리 (루미 제안) */
    border-top: 3px solid var(--ink-soft);
    border-radius: 2px;
    font-size: 0.86rem;
    min-height: 64px;
  }
  /* 차례에 따라 상단선 색 (초=청록 / 한=인주) — 누구 차례인지 색으로도 */
  .status.turn-r { border-top-color: var(--blue); }
  .status.turn-b { border-top-color: var(--red); }
  /* ★ 차례 줄: 우측 패널에서 가장 큰 정보 — 0.5초 안에 누구 차례인지. */
  .status .turn-line {
    white-space: nowrap;
    font-size: 1.6rem;
    font-weight: 800;
    line-height: 1.1;
    color: var(--ink);
  }
  .status .turn-line b { font-weight: 800; }
  /* ★ 관점 줄: "당신이 둘 차례" / "상대가 생각 중" — 차례 줄 바로 아래, 또렷한 안내. */
  .status .turn-persp {
    font-size: 1.08rem;
    font-weight: 600;
    line-height: 1.3;
    letter-spacing: 0.01em;
    color: var(--ink);
  }
  .status .turn-persp:empty { display: none; }   /* 문구 없으면 자리 안 차지 */
  /* 내 차례면 강조색(청록 깊은 톤), 상대(AI) 차례면 차분하게 */
  .status .turn-persp.mine { color: var(--blue-deep); }
  .status .turn-persp.theirs { color: var(--ink-soft); font-weight: 500; }
  /* AI 생각 중 점 세 개 — 수묵 점이 천천히 차오름 (스피너 대신, 루미 제안) */
  .status .ai-dots { display: inline-block; margin-left: 2px; }
  .status .ai-dots i {
    font-style: normal;
    opacity: 0.25;
    animation: aiDot 1.4s ease-in-out infinite;
  }
  .status .ai-dots i:nth-child(2) { animation-delay: 0.25s; }
  .status .ai-dots i:nth-child(3) { animation-delay: 0.5s; }
  @keyframes aiDot {
    0%, 60%, 100% { opacity: 0.2; }
    30%           { opacity: 0.85; }
  }
  .status .turn-dot {
    display: inline-block;
    width: 12px; height: 12px;
    border-radius: 50%;
    margin-right: 9px;
    vertical-align: 1px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.08);
  }
  .turn-r .turn-dot { background: var(--blue); }
  .turn-b .turn-dot { background: var(--red); }
  /* 보조 줄: 기물을 골라 두세요 등 — 작고 차분하게 (계층 맨 아래) */
  .status .msg { color: var(--ink-read); font-size: 0.9rem; }

  /* ── AI 생각 중 연출 (루미 톤: 보이지 않는 기객, 옅은 먹 번짐 + 느린 호흡) ──
     번쩍임 없이, 보드 위에 아주 옅은 먹빛 베일이 느리게 숨쉬듯. */
  .board-frame.ai-thinking::after {
    content: '';
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 3;
    background: radial-gradient(ellipse at center, rgba(43,39,36,0.05), transparent 70%);
    animation: aiBreath 3.2s ease-in-out infinite;
  }
  @keyframes aiBreath {
    0%, 100% { opacity: 0.25; }
    50%      { opacity: 0.7; }
  }

  /* 보드: 9열 x 10행, 교차점에 기물. 높이는 JS가 폭 기준으로 고정. */
  .board-frame {
    position: relative;
    width: 100%;
    flex: 0 0 auto;
    overflow: hidden;
    background: #d8c9ab;
    border: 1px solid #5a4a32;
    border-radius: 4px;
    box-shadow:
      0 14px 36px rgba(43,39,36,0.33),
      0 0 0 7px #cdb88f,
      0 0 0 8px #5a4a32;
    --pad: 6%;
    touch-action: manipulation;
  }
  /* 배경 그림 전용 레이어 — 진영(flipped)에 따라 정방향/180도 배경 이미지 교체 */
  .board-frame::before {
    content: '';
    position: absolute; inset: 0;
    pointer-events: none;
    border-radius: 3px;
    background:
      linear-gradient(rgba(248,240,224,0.06), rgba(248,240,224,0.06)),
      url('assets/board/board-bg.png');
    background-size: cover;
    background-position: center;
    z-index: 0;
  }
  .board-frame.flipped::before {
    background:
      linear-gradient(rgba(248,240,224,0.06), rgba(248,240,224,0.06)),
      url('assets/board/board-bg-flip.png');
    background-size: cover;
    background-position: center;
  }


  svg.grid { position: absolute; overflow: visible; z-index: 1; }
  .grid line { stroke: rgba(60,45,28,0.09); stroke-width: 1.2; stroke-linecap: round; }
  .grid .palace { stroke: rgba(60,45,28,0.12); stroke-width: 1.2; }

  .pieces { position: absolute; z-index: 1; }

  /* 마지막 둔 수 하이라이트 (출발/도착 교차점) */
  .last-mark {
    position: absolute;
    width: 9.5%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 4px;
    background: rgba(120,160,90,0.28);
    box-shadow: inset 0 0 0 2px rgba(90,130,60,0.5);
    pointer-events: none;
    z-index: 0;
  }

  .piece {
    position: absolute;
    width: 15%;
    aspect-ratio: 1;
    transform: translate(-50%, -50%);
    border-radius: 50%;
    display: flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: clamp(13px, 4vw, 25px);
    cursor: pointer;
    user-select: none;
    transition: top 0.32s cubic-bezier(.34,1.3,.5,1), left 0.32s cubic-bezier(.34,1.3,.5,1), transform 0.18s, box-shadow 0.18s;
    z-index: 2;
  }
  .piece-img {
    width: 100%; height: 100%;
    object-fit: contain;
    pointer-events: none;
    user-select: none;
    filter: drop-shadow(0 3px 4px rgba(43,39,36,0.35));
  }

  .piece.sel { z-index: 5; }
  .piece.sel .piece-img {
    filter: drop-shadow(0 0 6px var(--gold)) drop-shadow(0 0 10px var(--glow)) drop-shadow(0 3px 4px rgba(43,39,36,0.4));
  }

  /* 장군당한 궁(K) — 붉은 링 + 약한 금빛 glow, 아주 은은한 pulse */
  .piece.in-check { z-index: 4; }
  .piece.in-check .piece-img {
    filter:
      drop-shadow(0 0 4px rgba(158,43,37,0.9))
      drop-shadow(0 0 9px rgba(158,43,37,0.55))
      drop-shadow(0 0 13px var(--glow))
      drop-shadow(0 3px 4px rgba(43,39,36,0.4));
    animation: checkPulse 1.6s ease-in-out infinite;
  }
  /* sel + in-check 동시: 선택 glow에 붉은 링을 얹어 둘 다 보이게 */
  .piece.in-check.sel .piece-img {
    filter:
      drop-shadow(0 0 5px rgba(158,43,37,0.95))
      drop-shadow(0 0 10px rgba(158,43,37,0.6))
      drop-shadow(0 0 12px var(--glow))
      drop-shadow(0 3px 4px rgba(43,39,36,0.4));
  }
  @keyframes checkPulse {
    0%,100% { opacity: 0.92; }
    50%     { opacity: 1; }
  }
  .piece:hover { transform: translate(-50%, -52%); }

  /* 합법수 표시 — 히트박스(투명) + 시각 표시 */
  .dot {
    position: absolute;
    width: 8.2%; aspect-ratio: 1;
    transform: translate(-50%, -50%);
    z-index: 3;
    cursor: pointer;
    display: flex; align-items: center; justify-content: center;
  }
  /* 이동 가능: 작은 채워진 점 — 존재감 줄이고 판 정갈하게 */
  .dot::after {
    content: '';
    width: 28%; aspect-ratio: 1;
    border-radius: 50%;
    background: var(--dot-line, rgba(31,78,95,0.75));
    border: none;
    box-shadow: 0 0 6px var(--dot-glow, rgba(31,78,95,0.4));
    animation: pulse 1.3s ease-in-out infinite;
  }
  /* 잡기 가능: 링 유지 — 적 기물 위에 강조 */
  .dot.capture::after {
    width: 96%;
    background: transparent;
    border: 3.5px solid var(--dot-line, rgba(158,43,37,0.7));
    box-shadow: 0 0 14px var(--dot-glow, rgba(158,43,37,0.6)), inset 0 0 8px var(--dot-fill, rgba(158,43,37,0.25));
  }
  /* 초(楚) 차례 — 청먹 */
  .dot-r { --dot-fill: rgba(31,78,95,0.2); --dot-line: rgba(31,78,95,0.75); --dot-glow: rgba(31,78,95,0.5); }
  /* 한(漢) 차례 — 적먹 */
  .dot-b { --dot-fill: rgba(158,43,37,0.18); --dot-line: rgba(158,43,37,0.72); --dot-glow: rgba(158,43,37,0.45); }
  @keyframes pulse { 0%,100%{opacity:0.55; transform: scale(0.94);} 50%{opacity:0.62; transform: scale(1.06);} }

  /* 잡기 연출: 먹 번짐 */
  .ink-splat {
    position: absolute;
    width: 14%; aspect-ratio: 1;
    transform: translate(-50%,-50%) scale(0.2);
    border-radius: 50%;
    background: radial-gradient(circle, rgba(43,39,36,0.85), rgba(43,39,36,0.35) 45%, transparent 72%);
    pointer-events: none;
    z-index: 4;
    animation: splat 0.6s ease-out forwards;
  }
  @keyframes splat {
    0% { transform: translate(-50%,-50%) scale(0.2); opacity: 0; }
    35% { opacity: 0.9; }
    100% { transform: translate(-50%,-50%) scale(1.8); opacity: 0; }
  }

  /* 장군 선언 — 궁에서 붉은 파동이 한 번 퍼짐 (일회성, doMove에서만 생성) */
  .check-burst {
    position: absolute;
    width: 12%; aspect-ratio: 1;
    transform: translate(-50%,-50%) scale(0.3);
    border-radius: 50%;
    border: 4px solid rgba(158,43,37,0.9);
    box-shadow:
      0 0 18px rgba(158,43,37,0.8),
      0 0 36px var(--glow),
      inset 0 0 16px rgba(158,43,37,0.45);
    pointer-events: none;
    z-index: 6;
    animation: checkBurst 0.9s cubic-bezier(.2,.7,.3,1) forwards;
  }
  @keyframes checkBurst {
    0%   { transform: translate(-50%,-50%) scale(0.3); opacity: 0; border-width: 5px; }
    16%  { opacity: 1; }
    100% { transform: translate(-50%,-50%) scale(4.6); opacity: 0; border-width: 1px; }
  }

  /* 장군 선언 — 보드 중앙 글자. 시작 안개(mist)와 같은 결, 더 짧고(0.85s) 옅은 적먹 섞음 */
  .check-announce {
    position: absolute; inset: 0;
    z-index: 9;
    border-radius: 3px;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    background:
      radial-gradient(110% 80% at 50% 45%, rgba(158,43,37,0.16), rgba(158,43,37,0) 55%),
      radial-gradient(120% 80% at 35% 30%, rgba(248,244,236,0.82), rgba(248,244,236,0) 62%),
      linear-gradient(rgba(244,236,228,0.7), rgba(238,228,216,0.7));
    backdrop-filter: blur(4px);
    animation: checkMist 0.85s ease-out forwards;
  }
  .check-announce-text {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: clamp(2rem, 8vw, 3.6rem);
    letter-spacing: 0.3em;
    text-indent: 0.3em;
    color: var(--red-deep);
    text-shadow: 0 2px 10px rgba(158,43,37,0.4), 0 0 20px var(--glow);
    opacity: 0;
    animation: checkMistText 0.85s ease-out forwards;
  }
  @keyframes checkMist {
    0%   { opacity: 1; backdrop-filter: blur(4px); }
    100% { opacity: 0; backdrop-filter: blur(0px); }
  }
  @keyframes checkMistText {
    0%   { opacity: 0; transform: scale(1.25); letter-spacing: 0.5em; }
    28%  { opacity: 1; transform: scale(1); letter-spacing: 0.3em; }
    65%  { opacity: 1; }
    100% { opacity: 0; transform: scale(0.96); }
  }

  .controls { display: flex; gap: 10px; }
  button {
    flex: 1;
    font-family: 'Gowun Batang', serif;
    font-size: 0.86rem;
    padding: 9px;
    background: rgba(43,39,36,0.05);
    border: 1px solid var(--line);
    border-radius: 2px;
    color: var(--ink);
    cursor: pointer;
    letter-spacing: 0.1em;
    transition: background 0.15s, transform 0.1s;
  }
  button:hover { background: rgba(176,141,87,0.18); }
  button:active { transform: translateY(1px); }
  /* ── 하단 컨트롤 3개: 사용 빈도에 따라 시각 무게 차등 (루미 제안) ──
     무르기=강조 / 처음부터=보통 / 돌 던지기=옅게+위험색 */
  .controls button {
    font-size: 0.96rem;
    padding: 11px 6px;
    letter-spacing: 0.04em;
    white-space: nowrap;
    transition: background 0.15s, transform 0.1s, border-color 0.15s, opacity 0.15s;
  }
  .controls button:hover { background: rgba(176,141,87,0.22); border-color: var(--gold); }
  /* 무르기: 가장 자주 — 강조 (굵게 + 또렷한 배경/테두리) */
  #undoBtn {
    font-weight: 700;
    background: rgba(43,39,36,0.09);
    border-color: var(--line);
    color: var(--ink);
  }
  /* 처음부터: 가끔 — 보통 톤 */
  #resetBtn {
    font-weight: 600;
    background: rgba(43,39,36,0.05);
    color: var(--ink-soft);
  }
  /* 돌 던지기: 특수·위험 동작 — 옅게 두되 인주빛으로 구분. 호버 때 또렷해짐. */
  #resignBtn {
    font-weight: 400;
    background: transparent;
    color: var(--red-deep);
    border-color: rgba(122,31,26,0.35);
    opacity: 0.8;
  }
  #resignBtn:hover {
    background: rgba(158,43,37,0.12);
    border-color: var(--red);
    opacity: 1;
  }

  .captured-bar {
    display: flex; flex-direction: column;
    gap: 6px; padding: 8px 10px;
    background: rgba(43,39,36,0.05);
    border: 1px solid rgba(107,93,72,0.25);
    border-radius: 2px;
  }
  .captured-bar .side-cap {
    display: flex; flex-wrap: wrap; align-items: center;
    gap: 3px; min-height: 26px;
  }
  .cap-label {
    font-size: 0.78rem; color: var(--ink-read);
    letter-spacing: 0.05em; margin-right: 4px;
    white-space: nowrap; align-self: center;
  }
  .cap-chip {
    width: 22px; height: 22px;
    border-radius: 50%;
    display: inline-flex; align-items: center; justify-content: center;
    font-family: 'Noto Serif KR', serif; font-weight: 900;
    font-size: 12px;
    background: radial-gradient(circle at 34% 30%, rgba(255,255,255,0.4), transparent 55%), #e7cfa6;
    border: 1px solid rgba(43,39,36,0.5);
    box-shadow: 0 1px 2px rgba(43,39,36,0.3);
    opacity: 0.55;
  }
  .cap-chip.r { color: var(--blue-deep); }
  .cap-chip.b { color: var(--red-deep); }

  /* 기보 */
  .movelog-wrap {
    background: rgba(43,39,36,0.05);
    border: 1px solid rgba(107,93,72,0.25);
    border-radius: 2px;
    display: flex; flex-direction: column;
    min-height: 0;
  }
  .movelog-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 0.86rem; letter-spacing: 0.2em;
    color: var(--ink-read);
    padding: 8px 12px 6px;
    border-bottom: 1px solid rgba(107,93,72,0.2);
    text-indent: 0.2em;
  }
  .movelog {
    list-style: none;
    margin: 0; padding: 6px 8px;
    max-height: 305px;
    overflow-y: auto;
    font-size: 0.88rem;
    color: var(--ink);
    counter-reset: mv;
  }
  .movelog li {
    display: flex; align-items: baseline; gap: 6px;
    padding: 3px 6px;
    border-radius: 2px;
  }
  .movelog li:nth-child(odd) { background: rgba(176,141,87,0.07); }
  .movelog li .num {
    flex: 0 0 24px;
    color: var(--ink-soft); font-size: 0.72rem;
    text-align: right;
  }
  .movelog li .mv-cell {
    flex: 1 1 0; min-width: 0;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .movelog li .mv-r { color: var(--blue-deep); }
  .movelog li .mv-b { color: var(--red-deep); }
  .movelog li .mv-piece { font-family: 'Noto Serif KR', serif; font-weight: 700; margin-right: 1px; }
  .movelog .empty { color: var(--ink-read); font-size: 0.86rem; padding: 8px 6px; }
  @media (max-width: 760px) {
    .movelog { max-height: 150px; }
  }

  .win-overlay {
    position: absolute; inset: 0;
    background: rgba(43,39,36,0.78);
    display: none;
    align-items: center; justify-content: center;
    flex-direction: column;
    border-radius: 3px;
    z-index: 10;
    color: var(--paper);
    text-align: center;
    backdrop-filter: blur(2px);
  }
  .win-overlay.show { display: flex; animation: fadein 0.4s; }
  @keyframes fadein { from{opacity:0;} to{opacity:1;} }

  /* 대국 시작 — 수묵 안개가 걷히는 연출 */
  .mist-overlay {
    position: absolute; inset: 0;
    z-index: 8;
    border-radius: 3px;
    pointer-events: none;
    display: flex; align-items: center; justify-content: center;
    opacity: 0;
    background:
      radial-gradient(120% 80% at 30% 20%, rgba(248,244,236,0.95), rgba(248,244,236,0) 60%),
      radial-gradient(120% 80% at 75% 70%, rgba(244,238,228,0.92), rgba(244,238,228,0) 62%),
      linear-gradient(rgba(246,240,230,0.9), rgba(240,232,218,0.9));
    backdrop-filter: blur(7px);
  }
  .mist-overlay.run {
    animation: mistClear 1.5s ease-out forwards;
  }
  .mist-text {
    font-family: 'Noto Serif KR', serif;
    font-weight: 900;
    font-size: clamp(1.4rem, 5vw, 2.4rem);
    letter-spacing: 0.35em;
    text-indent: 0.35em;
    color: var(--ink);
    opacity: 0;
  }
  .mist-overlay.run .mist-text {
    animation: mistText 1.5s ease-out forwards;
  }
  @keyframes mistClear {
    0%   { opacity: 1; backdrop-filter: blur(7px); }
    100% { opacity: 0; backdrop-filter: blur(0px); }
  }
  @keyframes mistText {
    0%   { opacity: 0; transform: translateY(6px); letter-spacing: 0.55em; }
    35%  { opacity: 1; }
    70%  { opacity: 1; transform: translateY(0); letter-spacing: 0.35em; }
    100% { opacity: 0; }
  }
  .win-overlay .win-faction {
    font-family: 'Noto Serif KR', serif;
    font-weight: 700;
    font-size: 1rem;
    letter-spacing: 0.15em;
    margin-bottom: 6px;
    opacity: 0.95;
  }
  .win-overlay .win-faction.chu { color: #7fd4cf; }
  .win-overlay .win-faction.han { color: #f0918a; }
  .win-overlay .win-faction.draw { color: #d8cdb2; }
  .win-overlay h2 { font-family: 'Noto Serif KR'; font-size: 2.1rem; letter-spacing: 0.25em; margin-bottom: 8px; text-indent: 0.25em; }
  .win-overlay h2.win { color: #f5ecdb; }
  .win-overlay h2.lose { color: #c9bfae; }
  .win-overlay h2.draw { color: #e8dcc0; }
  .win-overlay p { font-size: 0.85rem; opacity: 0.85; }

  /* 상차림 선택 오버레이 — viewport 기준 중앙 (모바일 보드 높이 0 문제 해결) */
  .setup-overlay {
    position: fixed; inset: 0;
    background: rgba(43,39,36,0.78);
    display: none;
    align-items: center; justify-content: center;
    z-index: 200;
    backdrop-filter: blur(3px);
    padding: 16px;
    overflow-y: auto;   /* 패널이 viewport보다 길 때 overlay 자체가 스크롤 */
  }
  .setup-overlay.show { display: flex; animation: fadein 0.35s; }
  .setup-panel {
    width: 100%;
    max-width: 500px;
    max-height: calc(100vh - 32px);   /* overlay padding(16px×2) 제외 */
    overflow-y: auto;
    background: linear-gradient(160deg, var(--paper), var(--paper-deep));
    border: 2px solid var(--gold);
    border-radius: 5px;
    padding: 30px 28px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  }
  /* 가로 모드: 뷰포트 높이가 짧으므로 패널 padding 축소 + 제목 margin 축소 */
  @media (orientation: landscape) and (max-height: 680px) {
    .setup-panel { padding: 18px 22px; }
    .setup-title { font-size: 1.1rem; margin-bottom: 14px; }
    .mode-grid   { gap: 6px; }
    .mode-card   { padding: 9px 14px; }
    .level-play  { margin-bottom: 10px; }
    .level-grid  { gap: 7px; }
    .level-card  { padding: 10px 14px; }
    .level-note  { margin-top: 10px; }
    .faction-grid { gap: 9px; }
    .faction-card { padding: 14px 10px 12px; }
    .setup-grid  { gap: 9px; }
    .setup-card  { padding: 9px 10px 8px; }
    .setup-skip  { margin-top: 12px; padding: 9px; }
  }
  .setup-title {
    text-align: center;
    font-family: 'Noto Serif KR', serif;
    font-size: 1.32rem;
    color: var(--ink);
    margin-bottom: 24px;
    letter-spacing: 0.05em;
  }
  .setup-title b { font-size: 1.42rem; }
  .setup-title.r b { color: var(--blue-deep); }
  .setup-title.b b { color: var(--red-deep); }
  .setup-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }
  .setup-card {
    background: rgba(255,255,255,0.4);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    padding: 13px 12px 11px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    text-align: center;
  }
  .setup-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(176,141,87,0.45);
  }
  .setup-card .mini {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 4px;
    margin-bottom: 6px;
  }
  .setup-card .mini .cell {
    /* 카드 폭에 비례하되 하한·상한만 고정 (자동 반응형) */
    width: clamp(40px, 25%, 80px);
    aspect-ratio: 1;
    display: flex; align-items: center; justify-content: center;
  }
  .setup-card .mini .cell img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 1px 2px rgba(43,39,36,0.3));
  }
  .setup-card .name {
    font-family: 'Gowun Batang', serif;
    font-size: 1.02rem; color: var(--ink);
    letter-spacing: 0.04em; font-weight: 700;
  }
  .setup-skip {
    width: 100%;
    margin-top: 18px;
    font-family: 'Gowun Batang', serif;
    font-size: 0.9rem;
    padding: 12px;
    background: rgba(43,39,36,0.08);
    border: 1px dashed var(--line);
    border-radius: 3px;
    color: var(--ink-soft);
    cursor: pointer;
    letter-spacing: 0.05em;
  }
  .setup-skip:hover { background: rgba(176,141,87,0.18); }
  /* 진영 선택 */
  .faction-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 13px;
  }
  .faction-card {
    background: rgba(255,255,255,0.4);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    padding: 20px 14px 16px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s;
    text-align: center;
  }
  .faction-card:hover {
    transform: translateY(-3px);
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(176,141,87,0.45);
  }
  .faction-card .fc-piece {
    width: clamp(56px, 40%, 92px);
    aspect-ratio: 1;
    margin: 0 auto 10px;
  }
  .faction-card .fc-piece img { width: 100%; height: 100%; object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(43,39,36,0.32)); }
  .faction-card .fc-name {
    font-family: 'Noto Serif KR', serif; font-weight: 900;
    font-size: 1.15rem; letter-spacing: 0.04em;
  }
  .faction-card.chu .fc-name { color: var(--blue-deep); }
  .faction-card.han .fc-name { color: var(--red-deep); }
  .faction-card .fc-sub {
    display: block; font-size: 0.76rem; color: var(--ink-soft);
    margin-top: 3px; font-weight: 400; letter-spacing: 0.02em;
  }
  .faction-note {
    margin-top: 16px; text-align: center;
    font-size: 0.76rem; color: var(--ink-soft);
    letter-spacing: 0.02em; line-height: 1.5;
  }
  /* 모드 메뉴 (대국 방식 선택 현관) */
  .mode-grid {
    display: flex;
    flex-direction: column;
    gap: 10px;
  }
  .mode-card {
    display: flex;
    align-items: center;
    gap: 14px;
    background: rgba(255,255,255,0.4);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    padding: 14px 18px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
    text-align: left;
  }
  .mode-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(176,141,87,0.45);
  }
  .mode-card.mode-coming {
    opacity: 0.5;
    cursor: default;
  }
  .mode-card.mode-coming:hover {
    transform: none;
    border-color: var(--line);
    box-shadow: none;
  }
  .mode-icon {
    font-family: 'Ma Shan Zheng', 'Noto Serif KR', serif;
    font-size: 1.45rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.8rem;
    text-align: center;
    color: var(--ink-soft);
  }
  .mode-text {
    flex: 1;
    display: flex;
    flex-direction: column;
    gap: 2px;
  }
  .mode-name {
    font-family: 'Noto Serif KR', serif;
    font-weight: 800;
    font-size: 1.05rem;
    color: var(--ink);
    letter-spacing: 0.04em;
  }
  .mode-sub {
    font-size: 0.78rem;
    color: var(--ink-soft);
    letter-spacing: 0.01em;
    line-height: 1.4;
  }
  /* 강도 서브패널 — 모드 카드와 동일 스크롤 영역 안 */
  .level-sub-panel { }
  /* 강도 선택 (작은 현관 — "오늘은 어떻게 두실까요?") */
  .level-play {
    text-align: center;
    margin-bottom: 18px;
  }
  .level-play-label {
    display: inline-block;
    font-family: 'Gowun Batang', serif;
    font-size: 0.92rem;
    letter-spacing: 0.06em;
    color: var(--ink-soft);
    padding: 6px 18px;
    border: 1px solid var(--line);
    border-radius: 3px;
    background: rgba(255,255,255,0.28);
  }
  .level-grid {
    display: flex;
    flex-direction: column;
    gap: 11px;
  }
  .level-card {
    display: flex;
    align-items: center;
    gap: 15px;
    background: rgba(255,255,255,0.4);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    padding: 15px 18px;
    cursor: pointer;
    transition: transform 0.12s, box-shadow 0.15s, border-color 0.15s, background 0.15s;
    text-align: left;
  }
  .level-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 6px 16px rgba(176,141,87,0.45);
  }
  .level-card.current {
    border-color: var(--gold);
    border-width: 2px;
    background: rgba(176,141,87,0.16);
    /* 클릭 순간 "선택되었습니다" 찰나의 피드백 — 금빛이 한 번 차오르고 가라앉음 */
    animation: levelPick 0.42s ease-out;
  }
  @keyframes levelPick {
    0%   { transform: translateY(0);    box-shadow: 0 0 0 rgba(176,141,87,0); }
    40%  { transform: translateY(-3px); box-shadow: 0 8px 22px rgba(176,141,87,0.55); }
    100% { transform: translateY(0);    box-shadow: 0 3px 10px rgba(176,141,87,0.30); }
  }
  .level-card .lv-emoji {
    font-size: 1.7rem;
    line-height: 1;
    flex-shrink: 0;
    width: 1.9rem;
    text-align: center;
  }
  .level-card .lv-text { flex: 1; }
  .level-card .lv-name {
    font-family: 'Noto Serif KR', serif; font-weight: 800;
    font-size: 1.08rem; color: var(--ink);
    letter-spacing: 0.04em;
  }
  .level-card .lv-sub {
    font-size: 0.8rem; color: var(--ink-soft);
    margin-top: 3px; line-height: 1.45;
    letter-spacing: 0.01em;
  }
  .level-note {
    margin-top: 16px; text-align: center;
    font-size: 0.76rem; color: var(--ink-soft);
    letter-spacing: 0.02em; line-height: 1.5;
  }

  /* ── 튜토리얼 ──────────────────────────────────────────── */
  /* 기물 선택 오버레이 — board-frame 위 fixed */
  .tutorial-piece-overlay {
    position: fixed; inset: 0;
    background: rgba(43,39,36,0.82);
    display: flex;
    align-items: center; justify-content: center;
    z-index: 210;
    backdrop-filter: blur(3px);
    padding: 16px;
  }
  .tutorial-piece-panel {
    width: 100%; max-width: 420px;
    background: linear-gradient(160deg, var(--paper), var(--paper-deep));
    border: 2px solid var(--gold);
    border-radius: 5px;
    padding: 28px 24px;
    box-shadow: 0 16px 40px rgba(0,0,0,0.5);
  }
  .tutorial-piece-title {
    text-align: center;
    font-family: 'Noto Serif KR', serif;
    font-size: 1.1rem;
    color: var(--ink);
    margin-bottom: 20px;
    letter-spacing: 0.04em;
  }
  .tutorial-piece-grid {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 9px;
  }
  .tut-piece-card {
    display: flex; flex-direction: column;
    align-items: center; justify-content: center;
    gap: 4px;
    background: rgba(255,255,255,0.4);
    border: 1.5px solid var(--line);
    border-radius: 4px;
    padding: 10px 6px 8px;
    cursor: pointer;
    transition: transform 0.12s, border-color 0.15s, box-shadow 0.15s;
    text-align: center;
  }
  .tut-piece-card:hover {
    transform: translateY(-2px);
    border-color: var(--gold);
    box-shadow: 0 5px 14px rgba(176,141,87,0.4);
  }
  .tut-piece-card.tut-coming {
    opacity: 0.45; cursor: default;
  }
  .tut-piece-card.tut-coming:hover {
    transform: none; border-color: var(--line); box-shadow: none;
  }
  .tut-piece-img {
    width: 72px;
    height: 72px;
    margin: 0 auto 4px;
  }
  .tut-piece-img img {
    width: 100%; height: 100%;
    object-fit: contain;
    filter: drop-shadow(0 2px 3px rgba(43,39,36,0.28));
  }
  .tut-piece-name {
    font-size: 0.7rem; color: var(--ink-soft);
    letter-spacing: 0.01em; line-height: 1.3;
  }
  /* 튜토리얼 사이드 패널 */
  .tutorial-side-panel {
    display: flex; flex-direction: column;
    gap: 14px;
    padding: 14px 0 0;
  }
  .tut-desc {
    font-size: 0.9rem;
    color: var(--ink-read);
    line-height: 1.7;
    letter-spacing: 0.02em;
  }
  .tut-buttons {
    display: flex; flex-direction: column; gap: 8px;
    margin-top: 4px;
  }
  .tut-btn {
    width: 100%;
    font-family: 'Gowun Batang', serif;
    font-size: 0.9rem;
    padding: 10px;
    border-radius: 3px;
    cursor: pointer;
    letter-spacing: 0.04em;
    transition: background 0.15s, border-color 0.15s;
  }
  .tut-next-piece {
    background: rgba(176,141,87,0.12);
    border: 1.5px solid var(--gold);
    color: var(--ink);
  }
  .tut-next-piece:hover { background: rgba(176,141,87,0.25); }
  .tut-reset {
    background: rgba(176,141,87,0.15);
    border: 1.5px solid var(--gold);
    color: var(--ink);
  }
  .tut-reset:hover { background: rgba(176,141,87,0.3); }
  .tut-moves-left {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--ink);
    text-align: center;
    padding: 10px 0 4px;
    letter-spacing: 0.06em;
  }
  .tut-result {
    padding: 14px 0 8px;
    text-align: center;
  }
  .tut-result-title {
    font-family: 'Noto Serif KR', serif;
    font-size: 1.3rem;
    font-weight: 900;
    letter-spacing: 0.1em;
    margin-bottom: 6px;
  }
  .tut-result-success .tut-result-title { color: var(--blue-deep); }
  .tut-result-fail .tut-result-title { color: var(--ink-soft); }
  .tut-result-msg {
    font-size: 0.88rem;
    color: var(--ink-soft);
    line-height: 1.6;
  }
  .tut-exit {
    background: rgba(43,39,36,0.07);
    border: 1px dashed var(--line);
    color: var(--ink-soft);
  }
  .tut-exit:hover { background: rgba(43,39,36,0.14); }
  .tut-btn-primary {
    background: rgba(31,78,95,0.10);
    border: 1.5px solid var(--blue);
    color: var(--blue-deep);
    font-weight: 600;
  }
  .tut-btn-primary:hover { background: rgba(31,78,95,0.20); }
  /* 설정 버튼 — 타이틀바 우측 */
  .settings-btn {
    position: absolute;
    right: 0; top: 50%;
    transform: translateY(-50%);
    width: 34px; height: 34px;
    display: flex; align-items: center; justify-content: center;
    background: transparent;
    border: 1px solid rgba(107,93,72,0.14);
    border-radius: 50%;
    cursor: pointer;
    color: var(--ink-soft);
    font-size: 1rem;
    opacity: 0.75;
    transition: background 0.15s, border-color 0.15s, color 0.15s, opacity 0.15s;
    flex: none;
    padding: 0;
    letter-spacing: 0;
  }
  .settings-btn:hover {
    background: rgba(176,141,87,0.15);
    border-color: var(--gold);
    color: var(--ink);
    opacity: 1;
  }
  /* 전역 button:active의 transform 간섭 차단 — top:50%+translateY(-50%) 와 충돌 방지 */
  .settings-btn:active { transform: translateY(-50%); }
  /* 설정 드롭다운 */
  .settings-dropdown {
    position: absolute;
    top: calc(100% + 6px);
    right: 0;
    background: linear-gradient(160deg, var(--paper), var(--paper-deep));
    border: 1.5px solid var(--gold);
    border-radius: 4px;
    padding: 10px 0;
    min-width: 160px;
    box-shadow: 0 8px 24px rgba(43,39,36,0.28);
    z-index: 300;
    display: none;
    animation: fadein 0.18s;
  }
  .settings-dropdown.open { display: block; }
  .settings-section-label {
    font-family: 'Gowun Batang', serif;
    font-size: 0.7rem;
    color: var(--ink-soft);
    letter-spacing: 0.08em;
    padding: 4px 16px 6px;
    border-bottom: 1px solid rgba(107,93,72,0.2);
    margin-bottom: 4px;
  }
  .lang-btn {
    display: block; width: 100%;
    font-family: 'Gowun Batang', serif;
    font-size: 0.84rem;
    padding: 8px 16px;
    background: transparent;
    border: none;
    border-radius: 0;
    color: var(--ink-soft);
    cursor: pointer;
    letter-spacing: 0.04em;
    text-align: left;
    transition: background 0.12s, color 0.12s;
    flex: none;
  }
  .lang-btn:hover { background: rgba(176,141,87,0.15); color: var(--ink); }
  .lang-btn.active {
    color: var(--ink);
    font-weight: 700;
    background: rgba(176,141,87,0.12);
  }
  .lang-btn.active::before {
    content: '✓ ';
    color: var(--gold);
  }
  /* 드롭다운 열려있을 때 바깥 클릭 닫기용 오버레이 */
  .settings-backdrop {
    display: none;
    position: fixed; inset: 0;
    z-index: 299;
  }
  .settings-backdrop.open { display: block; }
  /* 항복 확인 */
  .resign-confirm {
    display: none;
    flex-direction: column;
    gap: 8px;
    padding: 11px 12px;
    background: rgba(158,43,37,0.06);
    border: 1px solid rgba(158,43,37,0.35);
    border-radius: 2px;
  }
  .resign-confirm.show { display: flex; animation: fadein 0.2s; }
  .resign-confirm .rc-text {
    font-size: 0.84rem; color: var(--red-deep);
    text-align: center; letter-spacing: 0.02em;
  }
  .resign-confirm .rc-buttons { display: flex; gap: 8px; }
  .resign-confirm button {
    flex: 1; font-family: 'Gowun Batang', serif;
    font-size: 0.84rem; padding: 8px; border-radius: 2px; cursor: pointer;
    letter-spacing: 0.05em; transition: background 0.15s;
  }
  .resign-confirm .rc-yes {
    background: rgba(158,43,37,0.85); color: #f3ead9;
    border: 1px solid var(--red-deep);
  }
  .resign-confirm .rc-yes:hover { background: var(--red-deep); }
  .resign-confirm .rc-no {
    background: rgba(43,39,36,0.05); color: var(--ink);
    border: 1px solid var(--line);
  }
  .resign-confirm .rc-no:hover { background: rgba(176,141,87,0.18); }