/*
 * 「찾아가지 않은 사진」의 조작 판들.
 * (게임 공통은 game.css, 극장은 theater.css)
 */

/* ── 조작형: 확대기 (enlarger) — 붉은 등 아래의 암실 ── */
.en-board { width: 100%; max-width: 560px; margin: 0 auto; display: block; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(216, 52, 42, 0.45), 0 10px 30px rgba(0, 0, 0, 0.45); }
.en-bg { fill: #170707; }
.en-shelf { fill: #3a1512; }
.en-bottle { fill: #3a1a16; stroke: #7a2a22; stroke-width: 0.8; }
.en-label { fill: #c9a08a; opacity: 0.7; }
.en-glint { stroke: #ff8a70; stroke-width: 1; opacity: 0.5; }
.en-wire { stroke: #0a0303; stroke-width: 1.6; }
.en-lampshade { fill: #2a0a08; }
.en-safelight { fill: #ff5a3c; filter: drop-shadow(0 0 8px #ff3a20); animation: en-safe 3.4s ease-in-out infinite; }
@keyframes en-safe { 50% { opacity: 0.82; } }
.en-table { fill: #2a0e0c; }
.en-table-edge { fill: #a8423a; opacity: 0.6; }
.en-base { fill: #4a1c16; }
.en-base-edge { fill: #d86a5a; opacity: 0.6; }
.en-ruler { stroke: #ffb0a0; stroke-width: 0.8; opacity: 0.6; }
.en-easel { fill: #1c0808; stroke: #7a2a22; stroke-width: 0.8; }
.en-paper { fill: #f4e6d0; }
.en-cone { fill: url(#en-cone-g); mix-blend-mode: screen; }
.en-carriage { fill: #3a1512; stroke: #a8423a; stroke-width: 0.8; }
.en-knob { fill: #1c0808; stroke: #d86a5a; stroke-width: 1.2; }
.en-knob-mark { stroke: #ffb0a0; stroke-width: 1.6; stroke-linecap: round; }
.en-arm { fill: #2a0e0c; }
.en-lamphouse { fill: #3a1512; stroke: #7a2a22; stroke-width: 1; }
.en-lamphouse-hi { fill: #d86a5a; opacity: 0.35; }
.en-vent { stroke: #0a0303; stroke-width: 2; stroke-linecap: round; }
.en-negholder { fill: #1c0808; stroke: #a8423a; stroke-width: 0.6; }
.en-filter-slip { transition: fill 0.2s; }
.en-bellows { fill: #120505; }
.en-fold { stroke: #5a1e18; stroke-width: 0.8; }
.en-lens { fill: #2a0e0c; stroke: #d86a5a; stroke-width: 0.8; }
.en-lens-glass { fill: #fff2d8; opacity: 0.9; }
.en-timer { fill: #1c0808; stroke: #7a2a22; stroke-width: 1.2; }
.en-dial { fill: #f1dcc8; }
.en-tick { stroke: #3a1512; stroke-width: 1; }
.en-needle { stroke: #b8261c; stroke-width: 1.8; stroke-linecap: round; transition: transform 0.15s; }
.en-hub { fill: #1c0808; }
.en-timer-no { fill: #ffb0a0; font-size: 20px; font-weight: 700; }
.en-timer-unit { fill: #a8625a; font-size: 9px; }
.en-row { display: grid; grid-template-columns: 5.2em 3.4em 1fr; align-items: center; gap: 8px; }
.en-label-t { color: var(--cream-dim); }
.en-no { color: var(--amber); font-variant-numeric: tabular-nums; text-align: right; }
.en-ctrl { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 8px; min-width: 0; }
.en-step { margin-top: 0; min-width: 2.6em; }
.en-range { width: 100%; min-width: 0; accent-color: #d8342a; height: 32px; touch-action: pan-y; }
.en-filters { display: flex; gap: 8px; flex-wrap: wrap; }
.en-filter { width: 44px; height: 44px; border-radius: 8px; border: 2px solid rgba(0, 0, 0, 0.4); background: var(--f); color: #2a0e0c; font-weight: 700; cursor: pointer; opacity: 0.6; }
.en-filter.on { opacity: 1; box-shadow: 0 0 0 3px var(--cream), 0 0 14px var(--f); }
.en-line { display: flex; gap: 12px; overflow-x: auto; padding: 16px 8px 8px; min-height: 140px; border-top: 2px solid #8a6a4a; background: linear-gradient(#1a0a08, transparent 60%); border-radius: 0 0 10px 10px; scrollbar-width: thin; }
.en-empty { margin: auto; color: var(--cream-dim); font-style: italic; }
.en-print { position: relative; margin: 0; flex: 0 0 132px; background: #efe2c6; padding: 6px 6px 4px; border-radius: 2px; box-shadow: 0 6px 14px rgba(0, 0, 0, 0.5); transform-origin: 50% -14px; transform: rotate(-1.5deg); }
.en-print:nth-child(even) { transform: rotate(1.6deg); }
.en-print.new { animation: en-hang 0.7s ease-out; }
@keyframes en-hang { 0% { transform: translateY(-18px) rotate(7deg); opacity: 0; } 55% { transform: rotate(-4deg); opacity: 1; } 100% { transform: rotate(-1.5deg); } }
.en-peg { position: absolute; left: 50%; top: -12px; width: 8px; height: 16px; margin-left: -4px; background: #c9a05a; border-radius: 2px; box-shadow: 0 1px 2px rgba(0, 0, 0, 0.5); }
.en-pic { display: block; width: 120px; height: 90px; background: #efe2c6; }
.en-print figcaption { display: grid; gap: 1px; margin-top: 4px; font-size: 0.72rem; line-height: 1.25; color: #3a2018; }
.en-print figcaption span { color: #a8261c; font-weight: 700; }

/* ── 조작형: 깨진 유리 조각 맞추기 (shards) — 빛 상자 ── */
.sh-board { width: 100%; display: block; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: inset 0 0 0 2px rgba(224, 179, 84, 0.35), 0 10px 30px rgba(0, 0, 0, 0.45); }
.sh-bg { fill: #1a1412; }
.sh-box { fill: #3a2a20; stroke: #6b4a34; stroke-width: 2; }
.sh-box-rim { fill: none; stroke: #fff6d8; stroke-width: 1.5; opacity: 0.6; }
.sh-piece { cursor: grab; outline: none; }
.sh-piece:active { cursor: grabbing; }
.sh-glass { fill: #1c1815; opacity: 0.55; }
.sh-edge { fill: none; stroke: #e9f4ff; stroke-width: 1.1; opacity: 0.55; stroke-linejoin: round; }
.sh-gloss { opacity: 0; pointer-events: none; }
.sh-piece.flip .sh-gloss { opacity: 0.9; }
.sh-piece.flip .sh-edge { stroke: #fff; opacity: 0.95; }
.sh-piece.on .sh-edge, .sh-piece:focus-visible .sh-edge { stroke: var(--amber); stroke-width: 2.6; opacity: 1; }
.sh-tools { justify-content: center; }

@media (prefers-reduced-motion: reduce) { .en-safelight, .en-print.new { animation: none; } }

/* 좁은 화면: 이름과 값은 윗줄, 손잡이는 아랫줄에 길게 */
@media (max-width: 560px) {
  .en-row { grid-template-columns: 1fr auto; row-gap: 4px; }
  .en-row > .en-ctrl, .en-row > .en-filters { grid-column: 1 / -1; }
  .en-range { height: 40px; }
}

/* ── 1챕터의 조작 판들 ─────────────────────────────────── */
/* 김 서린 유리 (wipe) */
.wp-board { width: 100%; display: block; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; cursor: grab; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.wp-fog { fill: #dfe8f4; opacity: 0.93; pointer-events: none; }
.wp-frame { fill: none; stroke: #3a2018; stroke-width: 10; pointer-events: none; }
.wp-sign { fill: #ecd8b4; font-size: 17px; font-weight: 700; }
.wp-plate { fill: #3a2018; font-size: 13px; font-weight: 700; }
.wp-hit { fill: transparent; }
.wp-person.open { cursor: pointer; }
.wp-person.open:hover .wp-hit, .wp-person:focus-visible .wp-hit { fill: rgba(255, 240, 196, 0.18); }
.wp-person.on .wp-hit { fill: rgba(255, 207, 134, 0.28); stroke: var(--amber); stroke-width: 3; }
.wp-person { outline: none; }

/* 구멍 뚫린 표 (tickets) */
.tk-cap { color: var(--cream-dim); }
.tk-row { display: flex; flex-wrap: wrap; gap: 10px; }
.tk-card { height: 62px; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45)); }
.tk-paper { fill: #e9dcc0; }
.tk-card.flipped .tk-paper { fill: #d6c7a6; }
.tk-card.mine .tk-paper { fill: #f4ead0; stroke: var(--amber); stroke-width: 2; }
.tk-no { fill: #5a3a26; font-size: 13px; font-weight: 700; letter-spacing: 2px; }
.tk-card.flipped .tk-no { fill: #9a8a6a; }
.tk-hole { fill: none; stroke: #b9a98a; stroke-width: 1.4; stroke-dasharray: 2 3; }
.tk-hole.open { fill: #1a0f0c; stroke: #1a0f0c; stroke-dasharray: none; }
.tk-card.mine .tk-hole { cursor: pointer; stroke: #8a6a3a; outline: none; pointer-events: all; }
.tk-card.mine .tk-hole:focus-visible { stroke: var(--amber); stroke-width: 3; }

/* 물려 있는 손잡이 (toggles) */
.tg-board { width: 100%; max-width: 560px; margin: 0 auto; display: block; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.tg-ropes .tg-bg { fill: #241a1c; }
.tg-bar { fill: #6b4330; }
.tg-cloth { stroke: rgba(0, 0, 0, 0.45); stroke-width: 1.5; transition: height 0.35s ease; }
.tg-fold { stroke: rgba(0, 0, 0, 0.18); stroke-width: 1; }
.tg-name { fill: #1a0f0c; font-size: 12px; font-weight: 700; }
.tg-roll { stroke: rgba(0, 0, 0, 0.55); stroke-width: 1.5; }
.tg-no { fill: #c9b58c; font-size: 11px; font-weight: 700; }
.tg-floor { fill: #3a2018; }
.tg-lamps .tg-bg { fill: #160808; }
.tg-door { fill: #2e1a16; stroke: #5a3626; stroke-width: 3; }
.tg-knob { fill: #c9a05a; }
.tg-socket { fill: #0a0404; }
.tg-bulb { fill: #3a2a2a; stroke: #0a0404; stroke-width: 2; transition: fill 0.2s; }
.tg-halo { fill: transparent; transition: fill 0.2s; }
.tg-lamp.on .tg-bulb { fill: #fff2cf; }
.tg-lamp.on .tg-halo { fill: rgba(255, 220, 160, 0.25); }
.tg-lamp.want.on .tg-bulb { fill: #ff5a3c; }
.tg-lamp.want.on .tg-halo { fill: rgba(255, 70, 40, 0.3); }
.tg-lamp.want .tg-bulb { stroke: #d8342a; stroke-width: 3; }
.tg-lamps .tg-name { fill: var(--cream-dim); }
.tg-controls { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.tg-btn { margin-top: 0; min-width: 5.4em; }
.tg-btn.on { box-shadow: inset 0 0 0 3px rgba(0, 0, 0, 0.35); filter: brightness(0.82); }

/* 간유리 (glass) */
.gl-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.gl figure { margin: 0; display: grid; gap: 4px; }
.gl figcaption { color: var(--cream-dim); font-size: 0.85rem; text-align: center; }
.gl-view, .gl-floor { width: 100%; display: block; border-radius: 8px; }
.gl-bottom { max-width: 420px; margin: 0 auto; width: 100%; }
.gl-bg { fill: #2a1c18; }
.gl-sample .gl-bg { fill: #e2c49a; }
.gl-glass .gl-bg { fill: #c9d6d2; }
.gl-cell { fill: rgba(255, 255, 255, 0.06); stroke: rgba(0, 0, 0, 0.25); stroke-width: 1; }
.gl-item path { fill: #f1ddb8; stroke: #f1ddb8; stroke-width: 2.4; stroke-linejoin: round; fill-rule: evenodd; }
.gl-sample .gl-item path { fill: #5a3a26; stroke: #5a3a26; }
.gl-glass .gl-item path { fill: #33423e; stroke: #33423e; opacity: 0.85; }
.gl-slot { cursor: pointer; outline: none; }
.gl-slot:focus-visible .gl-cell, .gl-slot:hover .gl-cell { stroke: var(--amber); stroke-width: 2; }
.gl-slot.on .gl-cell { fill: rgba(255, 207, 134, 0.3); stroke: var(--amber); stroke-width: 3; }

/* 서랍 가리기 (drawers) */
.dw-rules { margin: 0; padding: 10px 14px 10px 34px; background: #efe2c6; color: #3a2018; border-radius: 4px; box-shadow: 0 4px 10px rgba(0, 0, 0, 0.4); line-height: 1.6; transform: rotate(-0.4deg); }
.dw-grid { display: grid; grid-template-columns: repeat(var(--cols), 1fr); gap: 5px; padding: 10px; background: #3a2018; border-radius: 8px; }
.dw-cell { position: relative; min-height: 50px; padding: 4px 2px 12px; border: 0; border-radius: 4px; background: linear-gradient(#7a4c2c, #5a3824); color: #f1ddb8; font: inherit; font-size: 0.72rem; line-height: 1.2; box-shadow: inset 0 -3px 0 rgba(0, 0, 0, 0.35), inset 0 1px 0 rgba(255, 220, 170, 0.25); }
.dw-cell:disabled { opacity: 1; color: #f1ddb8; cursor: default; }
.dw-tag { display: inline-block; min-width: 2.6em; min-height: 1.2em; padding: 1px 3px; background: #efe2c6; color: #3a2018; border-radius: 2px; }
.dw-cell.blank { cursor: pointer; }
.dw-cell.blank .dw-tag { background: rgba(0, 0, 0, 0.28); box-shadow: inset 0 0 0 1px rgba(255, 220, 170, 0.2); }
.dw-handle { position: absolute; left: 50%; bottom: 5px; width: 14px; height: 4px; margin-left: -7px; border-radius: 2px; background: #c9a05a; }
.dw-cell.on { outline: 3px solid var(--amber); outline-offset: 1px; transform: translateY(2px); }
.dw-cell.crossed { filter: brightness(0.55); }
.dw-cell.crossed::after { content: '✕'; position: absolute; inset: 0; display: grid; place-items: center; color: #e4572e; font-size: 1.3rem; }

/* 관 돌려 잇기 (pipes) */
.pp-board { width: 100%; max-width: 440px; margin: 0 auto; display: block; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.pp-bg { fill: #2a2420; }
.pp-cell { fill: #3a322c; stroke: #1a1512; stroke-width: 1; }
.pp-tile { cursor: pointer; outline: none; }
.pp-tile:focus-visible .pp-cell, .pp-tile:hover .pp-cell { stroke: var(--amber); stroke-width: 2; }
.pp-pipe-out { stroke: #14100e; stroke-width: 18; stroke-linecap: butt; }
.pp-pipe { stroke: #8a8f98; stroke-width: 12; stroke-linecap: butt; transition: stroke 0.25s; }
.pp-joint { fill: #6a6f78; stroke: #14100e; stroke-width: 2; }
.pp-tap { fill: #c9a05a; stroke: #14100e; stroke-width: 2; }
.pp-tank { fill: #2f4a5a; stroke: #14100e; stroke-width: 2; }
.pp-tile.wet .pp-pipe { stroke: #5ab8e8; }
.pp-tile.wet .pp-joint { fill: #3a8fc0; }
.pp-tile.wet .pp-tank { fill: #5ab8e8; }
.pp-drip { fill: #9fe0ff; stroke: #fff; stroke-width: 1; animation: pp-drip 0.9s ease-in-out infinite; }
@keyframes pp-drip { 50% { transform: translateY(3px); opacity: 0.6; } }

/* 겹치기 (overlay) */
.ov-board { width: 100%; display: block; border-radius: 12px; touch-action: none; user-select: none; -webkit-user-select: none; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.ov-bg { fill: #e6d8ba; }
.ov-sheet { cursor: grab; outline: none; mix-blend-mode: multiply; }
.ov-paper { fill: #efe2c4; fill-opacity: 0.6; stroke: #8a6a3a; stroke-width: 1; }
.ov-margin { stroke: #b8433f; stroke-width: 1.5; opacity: 0.6; }
.ov-ink { fill: none; stroke-width: 2.6; stroke-linecap: round; }
.ov-text { font-family: 'Gowun Batang', 'Noto Serif KR', serif; font-weight: 700; white-space: pre; pointer-events: none; }
.ov-sheet.on .ov-paper { stroke: var(--amber); stroke-width: 3; }

/* 시험 인화 띠 (strip) */
.sp-board { width: 100%; max-width: 520px; margin: 0 auto; display: block; border-radius: 12px; box-shadow: inset 0 0 0 2px rgba(216, 52, 42, 0.4), 0 10px 30px rgba(0, 0, 0, 0.45); }
.sp-bg { fill: #1a0a08; }
.sp-cap { fill: #c9a08a; font-size: 12px; }
.sp-cell { stroke: #0a0404; stroke-width: 1; transition: fill 0.3s; }
.sp-no { fill: #3a2018; font-size: 15px; font-weight: 700; }
.sp-no.light { fill: #f1ddb8; }
.sp-over { fill: none; stroke: #e4572e; stroke-width: 4; }
.sp-under { fill: none; stroke: #f1ddb8; stroke-width: 2; stroke-dasharray: 5 5; opacity: 0.6; }
.sp-mask { fill: #0a0404; opacity: 0.88; stroke: #c9a05a; stroke-width: 1.5; }
.sp-row { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.sp-row .btn { margin-top: 0; }
.sp-label { color: var(--cream-dim); min-width: 4.4em; }
.sp-go { min-width: 9em; }
@media (max-width: 560px) { .gl-top { gap: 8px; } .dw-cell { font-size: 0.62rem; min-height: 44px; } }
@media (prefers-reduced-motion: reduce) { .pp-drip { animation: none; } }

/* ── 「찾아가지 않은 사진」의 색: 비에 젖은 남색 밤, 백열등의 호박색, 암실의 붉은 등 ──
   body.theme-photo 가 붙으면 기본 색을 이 게임의 색으로 바꾼다 (극장의 theater.css 와 같은 방식) */
body.theme-photo {
  --navy: #10162c;
  --navy-deep: #070a16;
  --navy-mid: #1a2140;
  --navy-light: #2e3866;
  --teal: #3a6a60;
  --teal-light: #9fd8c8;
  --amber: #ffcf86;
  --amber-dark: #c9914a;
  --cream: #f4ead0;
  --cream-dim: #b8b4c2;
  --line: rgba(244, 234, 208, 0.18);
  --modal-top: #1a2140;
  --font-title: "Gowun Batang", "Noto Sans KR", serif;
  background: radial-gradient(ellipse 90% 520px at 50% 0, rgba(255, 180, 100, 0.14), transparent), #070a16;
}
body.theme-photo.playing { background: #04060d; }
body.theme-photo .modal-box { background: linear-gradient(180deg, #1c2446, #10162c); border: 1px solid rgba(255, 207, 134, 0.45); box-shadow: 0 0 0 4px rgba(4, 6, 13, 0.6), 0 18px 60px rgba(0, 0, 0, 0.7); }
body.theme-photo .pz-layer:empty { display: none; }
/* 장면이 바뀔 때: 사진이 현상되듯 번져 나온다 */
body.theme-photo .scene-svg { animation: photo-develop 0.9s ease-out; }
@keyframes photo-develop { 0% { opacity: 0; filter: blur(14px) sepia(0.8) brightness(1.6); } 60% { opacity: 1; filter: blur(3px) sepia(0.4) brightness(1.15); } 100% { filter: none; } }
@media (prefers-reduced-motion: reduce) { body.theme-photo .scene-svg { animation: none; } }

/* ── 2챕터의 조작 판들 ─────────────────────────────────── */
/* 흔적으로 자리 맞히기 (seats) */
.st-cap, .fs-cap { color: var(--cream-dim); }
.st-table { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border-radius: 12px; background: #3a2018; box-shadow: inset 0 0 0 2px #6b4330; }
.st-seat { display: grid; gap: 4px; align-content: start; min-height: 112px; padding: 8px; border-radius: 10px; border: 1.5px dashed #b9a98a; background: #efe2c6; color: #2a1a14; font: inherit; text-align: left; cursor: pointer; }
.st-seat.open { border-color: var(--amber); box-shadow: 0 0 0 2px rgba(255, 207, 134, 0.4); }
.st-seat.full { border-style: solid; }
.st-no { font-size: 0.75rem; color: #8a6a3a; font-weight: 700; }
.st-trace { font-size: 0.86rem; line-height: 1.35; }
.st-tag { margin-top: auto; padding: 3px 6px; border-radius: 6px; background: #d9c8a0; font-size: 0.82rem; font-weight: 700; color: #7a6a4a; text-align: center; }
.st-seat.full .st-tag { background: #5a1e28; color: #f4ead0; }
.st-tray { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.st-person { display: grid; gap: 2px; padding: 8px; border-radius: 10px; border: 1.5px solid var(--line); background: #1c2446; color: var(--cream); font: inherit; text-align: left; cursor: pointer; }
.st-person small { color: var(--cream-dim); line-height: 1.3; }
.st-person.used { opacity: 0.45; }
.st-person.held { border-color: var(--amber); background: #3a2a1a; opacity: 1; }

/* 짝 맞추기 (pairs) */
.pr-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; padding: 12px; border-radius: 12px; background: #4a2c1c; box-shadow: inset 0 0 0 2px #6b4330; }
.pr-cell { position: relative; aspect-ratio: 1.3; border-radius: 10px; border: 2px solid transparent; background: rgba(0, 0, 0, 0.18); padding: 4px; cursor: pointer; }
.pr-cell.held { border-color: var(--amber); background: rgba(255, 207, 134, 0.18); }
.pr-cell.paired { opacity: 0.55; }
.pr-shoe { width: 100%; height: 100%; display: block; }
.pr-body { stroke: rgba(0, 0, 0, 0.5); stroke-width: 1.5; }
.pr-sole { stroke: #120807; stroke-width: 4; stroke-linecap: round; }
.pr-lace { stroke: #f4ead0; stroke-width: 1.6; }
.pr-no { position: absolute; right: 4px; top: 2px; min-width: 1.4em; border-radius: 1em; background: var(--amber); color: #2a1a14; font-size: 0.75rem; font-weight: 700; }

/* 종이 재단 (guillotine) */
.gl-board, .nc-board, .po-board, .hp-board, .wk-board, .th-board, .sv-board, .nm-board, .hg-board { width: 100%; display: block; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
.gl-board { max-width: 520px; background: #2a160e; }
.gl-piece { fill: #f4ead0; stroke: #8a6a3a; stroke-width: 1.5; }
.gl-piece.ok { fill: #d8e6c8; }
.gl-size { fill: #5a3a26; font-size: 15px; font-weight: 700; pointer-events: none; }
.gl-cut { stroke: #b8433f; stroke-width: 12; stroke-opacity: 0.12; stroke-linecap: round; cursor: crosshair; outline: none; }
.gl-cut:hover, .gl-cut:focus-visible { stroke-opacity: 0.6; }
.gl-orders { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.gl-cap { color: var(--cream-dim); margin-right: 4px; }
.gl-order { padding: 3px 10px; border-radius: 8px; background: #efe2c6; color: #3a2018; font-weight: 700; }
.gl-order.ok { background: #8fbf8a; text-decoration: line-through; }

/* 엇갈리지 않게 잇기 (noncross) */
.nc-board { max-width: 440px; }
.nc-bg { fill: #141a35; }
.nc-wall { fill: #2a2a4a; }
.nc-hit { fill: transparent; }
.nc-dot { stroke: #05070f; stroke-width: 2; }
.nc-peg { cursor: pointer; outline: none; }
.nc-peg.on .nc-dot { stroke: #fff; stroke-width: 3; filter: drop-shadow(0 0 6px #fff); }
.nc-peg:focus-visible .nc-hit { fill: rgba(255, 207, 134, 0.2); }
.nc-line { fill: none; stroke-width: 4; stroke-linecap: round; pointer-events: none; }
.nc-line.bad { stroke-dasharray: 6 6; filter: drop-shadow(0 0 3px #ff3a20); }

/* 병으로 옮겨 재기 (pour) */
.po-board { max-width: 520px; }
.po-bg { fill: #170707; }
.po-shelf { fill: #3a1512; }
.po-hit { fill: transparent; }
.po-jar { cursor: pointer; outline: none; }
.po-jar.from .po-glass { stroke: var(--amber); stroke-width: 4; }
.po-jar:focus-visible .po-hit { fill: rgba(255, 207, 134, 0.1); }
.po-glass { fill: rgba(255, 220, 200, 0.08); stroke: #c9a08a; stroke-width: 2; }
.po-liquid { fill: #d8a45a; opacity: 0.85; }
.po-tick { stroke: #c9a08a; stroke-width: 1.5; }
.po-crack { fill: none; stroke: #ff8a70; stroke-width: 2; }
.po-goal { stroke: #7ff4ff; stroke-width: 2; stroke-dasharray: 5 4; }
.po-name { fill: #f4ead0; font-size: 14px; font-weight: 700; }
.po-no { fill: #ffcf86; font-size: 18px; font-weight: 700; }

/* 사방치기 (hopscotch) */
.hp-board { max-width: 260px; }
.hp-bg { fill: #2a2c44; }
.hp-sq { fill: #3a3c58; stroke: #e9dcc0; stroke-width: 2.5; }
.hp-no { fill: #e9dcc0; font-size: 18px; font-weight: 700; pointer-events: none; }
.hp-cell { cursor: pointer; outline: none; }
.hp-cell.mine .hp-sq { fill: #5a6a8a; }
.hp-cell.lit .hp-sq { fill: var(--amber); }
.hp-cell.lit .hp-no { fill: #2a1a14; }
.hp-stone { fill: #8a8f98; stroke: #05070f; stroke-width: 2; pointer-events: none; }

/* 밀랍 본 (waxkey) */
.wk-board { max-width: 480px; }
.wk-bg { fill: #1c1412; }
.wk-key { fill: #c9a05a; }
.wk-hole { fill: #1c1412; }
.wk-wax { fill: #e8cf8a; }
.wk-rim { fill: none; stroke: #8a6a2e; stroke-width: 2; }
.wk-ghost { fill: #c9a05a; opacity: 0.55; }
.wk-ghost.bad { fill: #d8342a; opacity: 0.6; }
.wk-cap { fill: #b8a070; font-size: 12px; }
.wk-keys { display: flex; flex-wrap: wrap; gap: 8px; }
.wk-keys .btn { margin-top: 0; }

/* 실 종 장치 (threads) */
.th-board { max-width: 520px; }
.th-board.shake { animation: shake 0.35s; }
.th-bg { fill: #0f1c1c; }
.th-rail { fill: #c9a05a; }
.th-hit { fill: transparent; }
.th-thread { cursor: pointer; outline: none; }
.th-thread:focus-visible .th-hit, .th-thread:hover .th-hit { fill: rgba(255, 207, 134, 0.08); }
.th-line { stroke-width: 4; stroke-linecap: round; fill: none; }
.th-line.slack { opacity: 0.4; stroke-dasharray: 3 5; }
.th-thread.off .th-knob { opacity: 0.35; }
.th-knob { stroke: #05070f; stroke-width: 2; }
.th-name { fill: #f4ead0; font-size: 11px; }
.th-hook { pointer-events: none; }
.th-hook path { fill: none; stroke-width: 2.5; }
.th-hook circle { fill: #0f1c1c; stroke-width: 3; }
.th-hook.any path { stroke-dasharray: 5 4; }
.th-hook.off { opacity: 0.2; }
.th-bell { fill: #d9b05e; }
.th-bell.rung { fill: #ff5a3c; }

/* 지도 겹치기 (survey) */
.sv-board { touch-action: none; user-select: none; -webkit-user-select: none; }
.sv-bg { fill: #efe2c6; }
.sv-parcel { fill: #f7efd9; stroke: #6a5a4a; stroke-width: 1.5; outline: none; }
.sv-board.picking .sv-parcel { cursor: pointer; }
.sv-board.picking .sv-parcel:hover { fill: #ffe9b0; }
.sv-parcel.on { fill: #ffb866; }
.sv-label { fill: #6a5a4a; font-size: 12px; pointer-events: none; }
.sv-ref { pointer-events: none; }
.sv-ref circle { fill: #1a2a6a; }
.sv-ref text { fill: #1a2a6a; font-size: 11px; font-weight: 700; }
.sv-sheet { cursor: grab; }
.sv-sheet.through { pointer-events: none; opacity: 0.55; }
.sv-oparcel { fill: rgba(200, 64, 47, 0.07); stroke: #c8402f; stroke-width: 1.6; }
.sv-oref path { stroke: #c8402f; stroke-width: 2; }
.sv-oref circle { fill: rgba(200, 64, 47, 0.12); stroke: #c8402f; stroke-width: 1.5; }

/* 무늬 잇기 (sequence) */
.sq-line { display: flex; flex-wrap: wrap; gap: 2px; align-items: flex-end; padding: 10px; border-radius: 12px; background: #1c2446; border-top: 3px solid #c9b58c; }
.sq-balloon { width: 38px; height: 54px; flex: 0 0 auto; }
.sq-balloon.mine { filter: drop-shadow(0 0 4px var(--amber)); }
.sq-string { stroke: #c9b58c; stroke-width: 1.2; }
.sq-shine { fill: #fff; opacity: 0.5; }
.sq-slot { width: 38px; height: 54px; display: grid; place-items: center; border: 1.5px dashed var(--line); border-radius: 8px; color: var(--cream-dim); }
.sq-palette { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sq-pick { padding: 2px 4px; border-radius: 10px; border: 1.5px solid var(--line); background: #10162c; cursor: pointer; }
.sq-pick:disabled { opacity: 0.4; }

/* 번갈아 꺼내기 (nim) */
.nm-board { max-width: 460px; }
.nm-bg { fill: #170707; }
.nm-box { fill: none; stroke: #7a4c2c; stroke-width: 4; stroke-linecap: round; }
.nm-plate { fill: #9fb8c8; stroke: #e9f4ff; stroke-width: 1; opacity: 0.85; cursor: pointer; outline: none; }
.nm-plate:hover, .nm-plate:focus-visible { fill: var(--amber); }
.nm-name { fill: #f4ead0; font-size: 12px; }
.nm-log { min-height: 5.6em; padding: 6px 10px; border-radius: 10px; background: rgba(0, 0, 0, 0.3); color: var(--cream-dim); font-size: 0.9rem; line-height: 1.4; }
.nm-log .me { color: var(--amber); }

/* 모래시계 (hourglass) */
.hg-board { max-width: 480px; }
.hg-bg { fill: #170707; }
.hg-hit { fill: transparent; }
.hg-glass { cursor: pointer; outline: none; }
.hg-glass:hover .hg-hit, .hg-glass:focus-visible .hg-hit { fill: rgba(255, 207, 134, 0.08); }
.hg-body { fill: rgba(255, 220, 200, 0.08); stroke: #c9a08a; stroke-width: 2.5; stroke-linejoin: round; }
.hg-glass.broken .hg-body { stroke: #ff8a70; stroke-dasharray: 6 4; }
.hg-sand { fill: #e8cf8a; }
.hg-fall { stroke: #e8cf8a; stroke-width: 2; stroke-dasharray: 3 4; animation: hg-fall 0.5s linear infinite; }
@keyframes hg-fall { to { stroke-dashoffset: -7; } }
.hg-name { fill: #f4ead0; font-size: 13px; font-weight: 700; }
.hg-no { fill: #b8a070; font-size: 11px; }

/* 찍힌 차례 (filmstrip) */
.fs-strip { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; padding: 10px; border-radius: 12px; background: #0a0606; }
.fs-frame { position: relative; padding: 4px; border-radius: 6px; border: 2px solid #2a1a16; background: #1c1210; cursor: pointer; }
.fs-frame.held { border-color: var(--amber); transform: translateY(-4px); }
.fs-no { position: absolute; left: 6px; top: 4px; color: #f4ead0; font-size: 0.75rem; font-weight: 700; text-shadow: 0 1px 2px #000; }
.fs-pic { width: 100%; display: block; border-radius: 3px; }
.fs-room { fill: #5a3626; }
.fs-table { fill: #2a160e; }
.fs-candle { fill: #f4ead0; }
.fs-flame { fill: #ffb866; }
.fs-dish { fill: #cfd6dc; }
.fs-cake { fill: #f4d0d8; stroke: #a8625a; stroke-width: 0.8; }
.fs-string { stroke: #c9b58c; stroke-width: 0.8; }

/* 시간표 판 (timetable) */
.tt-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.tt-tab { flex: 1 1 0; min-width: 3.6em; padding: 8px 4px; border-radius: 10px 10px 0 0; border: 1.5px solid var(--line); border-bottom: 0; background: #10162c; color: var(--cream-dim); font: inherit; font-weight: 700; cursor: pointer; }
.tt-tab.on { background: #3a2a1a; color: var(--amber); border-color: var(--amber); }
.tt-tab.done::after { content: " ✓"; color: #8fbf8a; }
.tt-house { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; padding: 8px; border-radius: 0 0 12px 12px; background: #2a160e; box-shadow: inset 0 0 0 2px #6b4330; }
.tt-room { min-height: 92px; padding: 6px; border-radius: 8px; background: #efe2c6; color: #2a1a14; outline: none; }
.tt-room.open { cursor: pointer; box-shadow: 0 0 0 2px var(--amber); }
.tt-room-name { font-size: 0.8rem; font-weight: 700; color: #7a5a3a; margin-bottom: 4px; }
.tt-here, .tt-tray-row { display: flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.tt-tray { display: grid; gap: 6px; }
.tt-tray-row small { color: var(--cream-dim); margin-right: 4px; }
.tt-token { padding: 4px 10px; border-radius: 999px; border: 2px solid #5a1e28; background: #5a1e28; color: #f4ead0; font: inherit; font-size: 0.88rem; font-weight: 700; cursor: pointer; }
.tt-token.held { border-color: var(--amber); background: #3a2a1a; }
.tt-token.extra { background: #141a3a; border-color: #5a6ab0; }
.tt-token.unknown { background: transparent; border: 1.5px dashed var(--line); color: var(--cream-dim); cursor: default; }
.tt-cards { border-radius: 10px; background: rgba(0, 0, 0, 0.28); padding: 8px 10px; }
.tt-cards summary { cursor: pointer; color: var(--amber); font-weight: 700; }
.tt-card { margin-top: 8px; padding: 8px 10px; border-radius: 8px; background: #efe2c6; color: #2a1a14; }
.tt-card p { margin: 2px 0 0; font-size: 0.9rem; line-height: 1.4; }

/* 화면 위의 시계 (2챕터) */
.hud-clock { font-family: var(--font-title); font-variant-numeric: tabular-nums; padding: 2px 10px; border-radius: 8px; background: rgba(0, 0, 0, 0.35); color: var(--amber); border: 1px solid rgba(255, 207, 134, 0.35); white-space: nowrap; }
.hud-clock.tick { animation: clock-tick 0.6s ease-out; }
.hud-clock.rewind { animation: clock-rewind 1.6s ease-in-out; }
@keyframes clock-tick { 0% { transform: scale(1.25); color: #fff; } }
@keyframes clock-rewind { 0%, 100% { transform: none; } 30% { transform: rotate(-8deg) scale(1.3); color: #ff8a70; } 60% { transform: rotate(6deg) scale(1.3); color: #ff8a70; } }
/* 섬광: 1999년에서 2024년으로 돌아올 때 화면이 하얘진다 */
.stage-fade.flash { background: #fff; transition: opacity 0.12s ease-in; }

@media (max-width: 560px) {
  .st-table, .st-tray { grid-template-columns: repeat(2, 1fr); }
  .fs-strip { grid-template-columns: repeat(3, 1fr); }
  .tt-house { grid-template-columns: repeat(2, 1fr); }
}

/* 다른 날로 건너가기 (2챕터의 시작): 붉은 등 아래에서 해가 넘어간다 */
.stage-travel { position: absolute; inset: 0; z-index: 6; display: grid; place-items: center; align-content: center; gap: 10px; background: radial-gradient(circle at 50% 45%, rgba(216, 52, 42, 0.55), rgba(20, 4, 4, 0.96) 62%); animation: travel-in 0.6s ease-out, travel-pulse 1.1s ease-in-out infinite; transition: opacity 0.7s ease; }
.stage-travel.out { opacity: 0; }
.travel-ring { position: absolute; width: min(70vmin, 520px); aspect-ratio: 1; border-radius: 50%; border: 2px solid rgba(255, 138, 112, 0.35); box-shadow: 0 0 80px rgba(255, 60, 30, 0.35), inset 0 0 80px rgba(255, 60, 30, 0.25); animation: travel-spin 6s linear infinite reverse; border-top-color: rgba(255, 207, 134, 0.9); }
.travel-year { position: relative; font-family: var(--font-title); font-size: clamp(3.4rem, 14vmin, 8rem); font-variant-numeric: tabular-nums; color: #ffd9c8; text-shadow: 0 0 24px rgba(255, 90, 60, 0.9); letter-spacing: 0.06em; }
.travel-year.land { animation: travel-land 0.9s ease-out; color: #fff6d8; }
.travel-sub { position: relative; color: #ffb0a0; font-style: italic; }
@keyframes travel-in { from { opacity: 0; } }
@keyframes travel-pulse { 50% { filter: brightness(0.72); } }
@keyframes travel-spin { to { transform: rotate(360deg); } }
@keyframes travel-land { 0% { transform: scale(1.5); filter: blur(6px); } 100% { transform: none; filter: none; } }
@media (prefers-reduced-motion: reduce) { .stage-travel, .travel-ring, .travel-year.land { animation: none; } }

/* ── 3챕터의 조작 판들 ─────────────────────────────────── */
.wd-board, .rp-board, .pb-board, .tr-board, .oj-board, .gs-board, .c3-board, .tw-board, .ld-board, .w3-board { width: 100%; display: block; margin: 0 auto; border-radius: 12px; box-shadow: 0 10px 30px rgba(0, 0, 0, 0.45); }
/* 따라 하기 (follow) */
.fw-lines { margin: 0; padding: 10px 10px 10px 34px; border-radius: 12px; background: #efe2c6; color: #2a1a14; display: grid; gap: 6px; }
.fw-lines li { padding: 4px 6px; border-radius: 6px; }
.fw-lines li.now { background: #ffe9b0; font-weight: 700; }
.fw-lines li.done { color: #7a6a4a; }
.fw-did { margin-left: 8px; color: #8a2f2a; font-weight: 700; }
.fw-pad { display: flex; flex-wrap: wrap; gap: 8px; }
.fw-pad .btn { margin-top: 0; }
/* 쐐기 (wedges) */
.wd-board { max-width: 460px; }
.wd-bg { fill: #3a2a2a; }
.wd-stone { fill: #8a8a94; stroke: #b0b0bc; stroke-width: 3; }
.wd-vial { fill: #2f4a5a; stroke: #c9a05a; stroke-width: 3; }
.wd-target { fill: none; stroke: #f4ead0; stroke-width: 1.5; stroke-dasharray: 3 3; }
.wd-bubble { fill: #cfe6ff; transition: cx 0.3s, cy 0.3s; }
.wd-bubble.ok { fill: #8fbf8a; }
.wd-hit { fill: rgba(0, 0, 0, 0.35); stroke: #f4ead0; stroke-width: 1.5; }
.wd-corner { cursor: pointer; outline: none; }
.wd-corner.open .wd-hit, .wd-corner:focus-visible .wd-hit { stroke: var(--amber); stroke-width: 3; }
.wd-no { fill: #f4ead0; font-size: 22px; font-weight: 700; pointer-events: none; }
.wd-no.high { fill: #ff8a70; }
.wd-name { fill: #c9c2b4; font-size: 12px; }
.wd-wedge { fill: #c9a05a; }
.wd-wno { fill: #ffcf86; font-size: 10px; font-weight: 700; }
.wd-tray, .tw-tray { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.wd-tray .btn { margin-top: 0; }
.wd-cap { color: var(--cream-dim); }
/* 가위바위보 계단 (rps) */
.rp-board { max-width: 440px; }
.rp-bg { fill: #1c2446; }
.rp-step { fill: #5e3824; }
.rp-step.top { fill: #c9a05a; }
.rp-no { fill: #b8b4c2; font-size: 11px; }
.rp-me { fill: #141a3a; stroke: #7fa8ff; stroke-width: 2.5; }
.rp-him { fill: #e8b84a; stroke: #2a1a14; stroke-width: 2; }
.rp-tag { fill: #fff; font-size: 10px; font-weight: 700; pointer-events: none; }
/* 시험해서 좁히기 (probe) */
.pb-bg { fill: #170f0c; }
.pb-rail { fill: #3a2a20; }
.pb-live { fill: rgba(255, 207, 134, 0.3); stroke: var(--amber); stroke-width: 1.5; }
.pb-mark { stroke: #ff8a70; stroke-width: 2; }
.pb-pick { fill: #fff6d8; }
.pb-no { fill: #b8a070; font-size: 12px; }
.pb-cap { fill: #f4ead0; font-size: 14px; font-weight: 700; }
.pb-plate { fill: #9fb8c8; stroke: #e9f4ff; stroke-width: 1; }
.pb-plate.used { fill: #2a1a16; stroke: #5a3a26; }
/* 한 번씩 다 밟기 (trail) */
.tr-board { max-width: 380px; }
.tr-bg { fill: #1a2146; }
.tr-cell { fill: #9a9ca8; stroke: #5a5a64; stroke-width: 2; cursor: pointer; }
.tr-cell.shut { fill: #2a2c44; stroke: #1a1c30; cursor: default; }
.tr-cell.done { fill: #5a6a8a; }
.tr-cell.here { fill: var(--amber); }
.tr-cell.end { stroke: #8fbf8a; stroke-width: 4; }
.tr-line { fill: none; stroke: #141a3a; stroke-width: 5; stroke-linecap: round; stroke-linejoin: round; opacity: 0.6; pointer-events: none; }
.tr-mark { font-size: 22px; pointer-events: none; }
.tr-tag { fill: #1a1c30; font-size: 10px; font-weight: 700; pointer-events: none; }
.tr-no { fill: #f4ead0; font-size: 10px; pointer-events: none; }
/* 하나만 다른 병 (oddjar), 추로 달기 (weigh3) */
.oj-bg, .w3-bg { fill: #170707; }
.oj-stand { stroke: #7a4c2c; stroke-width: 8; stroke-linecap: round; fill: none; }
.oj-beam { stroke: #c9a05a; stroke-width: 6; stroke-linecap: round; }
.oj-string { stroke: #c9a05a; stroke-width: 2; }
.oj-pan { fill: #8a6a3a; }
.oj-shelf { fill: #5a221c; }
.oj-cap, .w3-cap { fill: #b8a070; font-size: 11px; }
.oj-jar, .w3-weight { cursor: pointer; outline: none; }
.oj-body { fill: #5a2a22; stroke: #d86a5a; stroke-width: 1.5; }
.oj-jar.clear .oj-body { fill: #2a1a16; stroke: #5a3a34; }
.oj-jar.clear .oj-no { fill: #7a6a64; }
.oj-no { fill: #f4ead0; font-size: 13px; font-weight: 700; pointer-events: none; }
.w3-body { fill: #c9a05a; stroke: #5a3a1a; stroke-width: 1.5; }
.w3-no { fill: #2a1a14; font-size: 13px; font-weight: 700; pointer-events: none; }
.w3-powder { fill: #e9e9f0; }
.w3-title { fill: #f4ead0; font-size: 15px; font-weight: 700; }
/* 간유리 (spot) */
.gs-bg { fill: #0c0a10; }
.gs-glassbg { fill: #d9cdb6; }
.gs-frost { fill: #dfe8f4; opacity: 0.28; pointer-events: none; }
.gs-rim { fill: none; stroke: #5a3824; stroke-width: 8; pointer-events: none; }
.gs-hit { fill: transparent; }
.gs-person { cursor: pointer; outline: none; }
.gs-person.on .gs-hit, .gs-person:focus-visible .gs-hit { fill: rgba(255, 207, 134, 0.45); }
.gs-coat { fill: #5a3e2a; }
.gs-head { fill: #e3b98f; }
.gs-eye { fill: #2a1a14; }
.gs-lid, .gs-mouth { fill: none; stroke: #2a1a14; stroke-width: 1.8; stroke-linecap: round; }
.gs-glass { fill: rgba(255, 255, 255, 0.5); stroke: #2a1a14; stroke-width: 1.4; }
.gs-glare { stroke: #fff; stroke-width: 2; }
/* 무늬 계수기 (counter3), 두 줄 구멍 (punchread) */
.c3-board { max-width: 500px; }
.c3-bg { fill: #1c1210; }
.c3-wheel { fill: #efe2c6; stroke: #8a6a3a; stroke-width: 2; }
.c3-wheel.main { fill: #d9c8a0; stroke: #c9a05a; stroke-width: 3; }
.c3-sym { fill: #2a1a14; font-size: 26px; }
.c3-cap, .c3-note { fill: #b8a070; font-size: 11px; }
.c3-dial { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: center; }
.c3-dial .btn { margin-top: 0; min-width: 3em; }
.c3-value { min-width: 2.4em; text-align: center; font-size: 1.8rem; color: var(--amber); font-variant-numeric: tabular-nums; }
.c3-cap2 { color: var(--cream-dim); }
.pr2-card { height: 82px; flex: 0 0 auto; filter: drop-shadow(0 3px 5px rgba(0, 0, 0, 0.45)); }
.pr2-card.mine .tk-paper { fill: #f4ead0; stroke: var(--amber); stroke-width: 2; }
/* 두 줄로 세우기 (tworows) */
.tw-bg { fill: #f1e6cc; }
.tw-cap { fill: #7a5a3a; font-size: 12px; font-weight: 700; }
.tw-hit { fill: transparent; }
.tw-slot { cursor: pointer; outline: none; }
.tw-slot.open .tw-foot, .tw-slot:focus-visible .tw-foot { fill: var(--amber-dark); }
.tw-foot { fill: #c9a57c; }
.tw-coat { fill: #5a3e2a; }
.tw-head { fill: #e3b98f; stroke: #5a3e2a; stroke-width: 1.5; }
.tw-name { fill: #fff6e0; font-size: 11px; font-weight: 700; pointer-events: none; paint-order: stroke; stroke: #33200f; stroke-width: 3.5px; stroke-linejoin: round; }
.tw-person { display: grid; padding: 6px 10px; border-radius: 10px; border: 1.5px solid var(--line); background: #1c2446; color: var(--cream); font: inherit; cursor: pointer; }
.tw-person small { color: var(--cream-dim); }
.tw-person.used { opacity: 0.4; }
.tw-person.held { border-color: var(--amber); background: #3a2a1a; opacity: 1; }
.tw-notes { margin: 0; padding-left: 1.2em; color: #ff8a70; min-height: 1.4em; }
/* 맞는 뚜껑 (fitlid) */
.ld-bg { fill: #27504a; }
.ld-lensrim { fill: #1a1414; stroke: #c9a05a; stroke-width: 3; }
.ld-lens { fill: #1a2a4a; }
.ld-string { stroke: #f4ead0; stroke-width: 3; stroke-linecap: round; }
.ld-cap, .ld-name { fill: #e9dcc0; font-size: 11px; }
.ld-hit { fill: transparent; }
.ld-lid { cursor: pointer; outline: none; }
.ld-cap-disc { fill: #c9c9d4; stroke: #5a5a64; stroke-width: 2; }
.ld-lid.on .ld-cap-disc, .ld-lid:focus-visible .ld-cap-disc { stroke: var(--amber); stroke-width: 4; }
/* 현상 방법 (develop) */
.dv-baths { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dv-bath { display: grid; gap: 2px; padding: 10px 6px; border-radius: 8px 8px 14px 14px; border: 2px solid #7a2a22; background: #3a1512; color: #f4ead0; font: inherit; cursor: pointer; }
.dv-bath small { color: #ffb0a0; }
.dv-knobs { display: grid; gap: 8px; }
.dv-knob { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dv-knob span { color: var(--cream-dim); min-width: 9em; }
.dv-knob strong { min-width: 8em; text-align: center; color: var(--amber); }
.dv-knob .btn { margin-top: 0; min-width: 3em; }
.dv-cap { color: var(--amber); }
@media (max-width: 560px) { .dv-baths { grid-template-columns: repeat(2, 1fr); } }