/* 느긋한 이세계 촌장 v0.2 — 촌장의 장부 UI (단일 테마: 종이·먹·나무) */
:root {
  --paper: #EFEBDD; --paper-2: #F7F4EA; --paper-3: #E3DECB;
  --ink: #2A2620; --ink-2: #5B554A; --ink-3: #8C8577; --line: #CFC8B4;
  --wood: #7A5636; --moss: #3F6B3A; --moss-2: #DCE7D6; --wheat: #D9A441; --wheat-2: #F3E6C4;
  --water: #5E97A4; --water-2: #D8E8EB; --danger: #B0503C; --danger-2: #F0D9D2;
  --shadow: 0 2px 8px rgba(42, 38, 32, .12);
}
* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { height: 100%; }
/* 본문·UI = Pretendard (v0.5.31) · 제목·일기 = Gowun Batang(명조)로 "장부" 정체성 유지 */
body { margin: 0; background: #1E2A20; color: var(--ink); font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, system-ui, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif; font-size: 17px; line-height: 1.55; overflow: hidden; -webkit-font-smoothing: antialiased; user-select: none; -webkit-user-select: none; letter-spacing: -0.01em; }
button { font: inherit; color: inherit; cursor: pointer; }
button:focus-visible, select:focus-visible, input:focus-visible { outline: 2px solid var(--wheat); outline-offset: 1px; }
.mono { font-family: "IBM Plex Mono", ui-monospace, Menlo, monospace; font-variant-numeric: tabular-nums; }
#app { position: relative; width: 100%; max-width: 480px; height: 100dvh; margin: 0 auto; background: var(--paper); display: flex; flex-direction: column; overflow: hidden; }

#topbar { padding: 8px 12px 8px; background: var(--paper-2); border-bottom: 1px solid var(--line); }
#topbar .row1 { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
#topbar .date { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 20px; }
#topbar .ap { font-size: 15.5px; color: var(--moss); letter-spacing: .05em; }
#topbar .row2 { display: flex; flex-wrap: wrap; gap: 4px 10px; margin-top: 4px; font-size: 15px; color: var(--ink-2); }
#topbar .row2 b { color: var(--ink); font-weight: 500; }
#hint { min-height: 30px; padding: 6px 12px; font-size: 15px; color: var(--moss); background: var(--moss-2); border-bottom: 1px solid var(--line); }
#hint:empty { display: none; }
#hint { cursor: pointer; } /* v0.8.14: 접어 둔 안내 스포트라이트를 다시 편다 */

/* v0.8.14: 안내 스포트라이트 — #guide 는 #app 전체를 덮되 입력을 안 잡는다(말풍선의 버튼만 잡는다). 촌장 결정: 안내는 막지 않는다.
   딤(.gd-dim)은 전체를 덮는 판에 clip-path 다각형으로 구멍을 낸 것 — 첫 달 묶음만 옅게 가리고, 그 뒤 단계는 링·말풍선만.
   (구멍 요소의 큰 box-shadow 로도 되지만 다각형이 검사하기 쉽다 — 픽셀 실측: 바탕 239→147, 구멍 247 그대로.) #modal(z 20)보다 아래, 시트가 열리면 ui.js 가 숨긴다. */
#guide { position: absolute; inset: 0; z-index: 15; pointer-events: none; overflow: hidden; }
#guide .gd-dim { position: absolute; inset: 0; background: rgba(20, 28, 20, .42); display: none; }
#guide .gd-dim.on { display: block; }
#guide .gd-hole { position: absolute; border-radius: 12px; transition: left .2s, top .2s, width .2s, height .2s; }
#guide .gd-hole::after { content: ''; position: absolute; inset: -3px; border-radius: 14px; border: 3px solid var(--wheat); animation: gdPulse 1.4s ease-out infinite; }
@keyframes gdPulse { 0% { box-shadow: 0 0 0 0 rgba(217, 164, 65, .6); } 100% { box-shadow: 0 0 0 14px rgba(217, 164, 65, 0); } }
#guide .gd-tip { position: absolute; width: max-content; max-width: calc(100% - 16px); background: rgba(42, 38, 32, .94); color: #fff; border-radius: 12px; padding: 9px 12px; font-size: 15.5px; line-height: 1.35; display: flex; align-items: center; gap: 8px; box-shadow: 0 4px 14px rgba(0, 0, 0, .25); }
#guide .gd-tip::before { content: ''; position: absolute; left: var(--cx, 20px); top: -6px; margin-left: -6px; border: 6px solid transparent; border-top: 0; border-bottom-color: rgba(42, 38, 32, .94); }
#guide .gd-tip.up::before { top: auto; bottom: -6px; border-bottom: 0; border-top: 6px solid rgba(42, 38, 32, .94); }
#guide .gd-txt { flex: 1; }
#guide .gd-btns { display: flex; gap: 6px; flex-shrink: 0; pointer-events: auto; }
#guide .gd-btns button { border: 1px solid rgba(255, 255, 255, .35); background: rgba(255, 255, 255, .12); color: #fff; border-radius: 8px; padding: 4px 9px; font-size: 14px; }
#guide .gd-btns button[data-gd=ack] { background: var(--wheat); border-color: var(--wheat); color: var(--ink); font-weight: 600; }
#guide .gd-btns button[data-gd=fold] { padding: 4px 7px; }
@media (prefers-reduced-motion: reduce) { #guide .gd-hole::after { animation: none; } #guide .gd-hole { transition: none; } }
#guide .gd-tip .gd-txt { min-width: 0; }

#view { flex: 1; min-height: 0; position: relative; overflow: hidden; }
.panel { position: absolute; inset: 0; overflow-y: auto; padding: 12px 12px 24px; background: var(--paper); -webkit-overflow-scrolling: touch; }
#panel-village { padding: 0; overflow: hidden; } /* v0.8.7.1: 지도는 패널 높이에 맞춰 그리므로 스크롤이 필요 없다 */
#mapmodes { display: grid; grid-template-columns: repeat(3, 1fr); background: #1B2A1C; padding: 7px 10px 0; gap: 8px; }
/* v0.8.10.6: 스티커 버튼 — 크림 면 + 갈색 외곽선 + 두께 한 줄 (3단계 지시서 09절, 촌장 승인) */
#mapmodes button { border: 1.5px solid #7A5636; border-bottom: 0; background: #E9DCC4; color: #4A3A2A; border-radius: 10px 10px 0 0; padding: 7px 0; font-size: 14.5px; font-weight: 600; box-shadow: inset 0 1px 0 #fff; }
#mapmodes button.on { background: var(--moss); color: #fff; border-color: #3B5A36; font-weight: 700; box-shadow: inset 0 1px 0 rgba(255,255,255,.25); } /* v0.8.10.14 (피드백 #31): 선택 = 이끼색 — 소탭 .on과 같은 규칙, 크림 대 크림은 구분이 안 됐다 */
#mapmodes button.locked { opacity: .5; }
#farmwrap { width: 100%; display: flex; justify-content: center; background: #24331F; }
canvas#farm { display: block; touch-action: none; } /* v0.5.30 (#17): 핀치 줌·팬을 캔버스가 직접 받는다 */
.panel h2 { font-family: "Gowun Batang", serif; font-size: 21px; margin: 0 0 8px; }
.panel h2 small { font-family: inherit; font-weight: 400; font-size: 14px; }
.panel h3 { font-family: "Gowun Batang", serif; font-size: 17.5px; margin: 16px 0 6px; color: var(--ink-2); }
.panel h3 small { font-family: inherit; font-weight: 400; font-size: 14px; }
.panel p { margin: 0 0 8px; font-size: 16.5px; }

/* 명령 패널 (행동 탭) */
.cmdgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 6px; }
.cmd { display: flex; flex-direction: column; align-items: flex-start; gap: 1px; padding: 8px 9px; min-height: 82px; border: 1px solid var(--line); border-radius: 10px; background: var(--paper-2); text-align: left; box-shadow: var(--shadow); }
.cmd .ic { font-size: 30px; }
.cmd b { font-size: 16.5px; }
.cmd small { font-size: 13px; color: var(--ink-3); line-height: 1.3; }
.cmd.off { opacity: .5; box-shadow: none; }
.cmd.off small { color: var(--danger); }
.cmd:active { transform: translateY(1px); }

.card { background: var(--paper-2); border: 1px solid var(--line); border-radius: 8px; padding: 10px 12px; margin-bottom: 8px; box-shadow: var(--shadow); }
.card .title { display: flex; justify-content: space-between; align-items: center; font-weight: 600; gap: 8px; }
.card .sub { font-size: 15px; color: var(--ink-2); margin-top: 2px; }
.chips { display: flex; flex-wrap: wrap; gap: 4px 6px; margin-top: 6px; font-size: 14px; }
.chip { background: var(--paper-3); padding: 1px 7px; border-radius: 10px; color: var(--ink-2); }
.chip.moss { background: var(--moss-2); color: var(--moss); }
.chip.wheat { background: var(--wheat-2); color: #7A5A15; }
.chip.water { background: var(--water-2); color: #2F6873; }
.chip.danger { background: var(--danger-2); color: var(--danger); }
.bar { height: 8px; background: var(--paper-3); border-radius: 3px; overflow: hidden; margin-top: 4px; }
.bar i { display: block; height: 100%; background: var(--moss); }
.bar.wheat i { background: var(--wheat); }
.bar.danger i { background: var(--danger); }
.bar.water i { background: var(--water); }
.rowbtns { display: flex; gap: 6px; margin-top: 8px; flex-wrap: wrap; }
.btn { border: 1px solid var(--line); background: var(--paper-2); border-radius: 8px; padding: 9px 14px; font-size: 16px; }
.btn.primary { background: var(--moss); color: #fff; border-color: var(--moss); }
.btn.wheat { background: var(--wheat); color: var(--ink); border-color: var(--wheat); }
.btn:disabled { opacity: .45; cursor: default; }
.btn.sm { padding: 6px 11px; font-size: 15px; }
/* 촌장실 규칙 켜짐/꺼짐 — 슬라이드 스위치 */
.switch { display: inline-flex; align-items: center; gap: 8px; border: 0; background: none; padding: 2px 0; font-size: 15px; color: var(--ink-3); cursor: pointer; }
.switch i { position: relative; width: 46px; height: 26px; border-radius: 13px; background: var(--paper-3); border: 1px solid var(--line); transition: background .15s, border-color .15s; }
.switch i::after { content: ''; position: absolute; top: 2px; left: 2px; width: 20px; height: 20px; border-radius: 50%; background: #fff; box-shadow: 0 1px 2px rgba(0,0,0,.3); transition: left .15s; }
.switch.on { color: var(--moss); font-weight: 700; }
.switch.on i { background: var(--moss); border-color: var(--moss); }
.switch.on i::after { left: 22px; }
.list { display: flex; flex-direction: column; gap: 6px; }
.item { display: flex; align-items: center; gap: 8px; padding: 6px 8px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; font-size: 16px; }
.item.dim { opacity: .5; }
/* v0.8.10.1: 사람 고르기 줄 — 탭하면 얼굴이 보이는 목록 시트 */
.pick { display: flex; align-items: center; gap: 8px; padding: 6px 8px; margin-top: 4px; background: var(--paper-2); border: 1px solid var(--line); border-radius: 6px; cursor: pointer; font-size: 15px; }
.pick > .muted:first-child { min-width: 44px; }
.pick img.face { border-radius: 50%; }
.pick small { font-size: 12px; }
.pick .chev { margin-left: auto; color: var(--ink-3); font-size: 18px; }
.pick.inline { display: inline-flex; margin-top: 0; padding: 3px 4px 3px 10px; font-size: 14.5px; gap: 5px; } /* v0.8.10.3: 주민 카드 임무 줄 */
.pick.inline .chev { margin-left: 2px; font-size: 16px; }
.item .nm small b, .pick small b { color: var(--ink); }
.item .ic { font-size: 26px; width: 32px; text-align: center; }
.item .nm { flex: 1; }
.item .nm small { display: block; color: var(--ink-3); font-size: 13.5px; }
.item .nm small b.ing-lack { color: var(--danger); } /* v0.8.11.10: 레시피 재료 재고가 모자랄 때 */
/* 농사 계획 — 계절 3개월 타임라인 (촌장실 규칙 ②) */
.tlrow { display: inline-flex; gap: 3px; vertical-align: middle; }
.tl { width: 19px; height: 17px; border-radius: 3px; font-style: normal; font-size: 11px; line-height: 17px; text-align: center; background: var(--paper-3); color: var(--ink-3); }
.tl.grow { background: var(--wheat-2); color: #7A5A15; }
.tl.harvest { background: var(--moss-2); color: var(--moss); font-weight: 700; }
.tl.wither { background: var(--danger-2); color: var(--danger); }
.tl.now { outline: 2px solid var(--ink-3); outline-offset: 1px; }
.subtabs.sm { margin: 4px 0 6px; }
.subtabs.sm button { padding: 4px 6px; font-size: 14px; line-height: 1.2; }
.subtabs.sm button small { display: block; font-size: 11.5px; opacity: .7; }
.subtabs.sm button.past { opacity: .45; } /* v0.8.7.3: 농사 계획에서 이미 지난 달 — 고쳐도 올해엔 반영되지 않는다 */
label.item { cursor: pointer; }
label.item input { margin: 0 2px 0 0; }
select, input[type=number], input[type=text], textarea { font: inherit; font-size: 16px; padding: 7px 8px; border: 1px solid var(--line); border-radius: 6px; background: var(--paper-2); color: var(--ink); }
textarea { width: 100%; resize: vertical; }
input, textarea { user-select: text; -webkit-user-select: text; }
.muted { color: var(--ink-3); font-size: 15px; }
.stat { display: grid; grid-template-columns: 52px 1fr 40px; gap: 8px; align-items: center; font-size: 15.5px; margin-bottom: 3px; }
.stat .v { text-align: right; }

/* 하단 */
#actions { padding: 8px 12px; background: var(--paper-2); border-top: 1px solid var(--line); }
#nextbtn { width: 100%; height: 60px; border-radius: 12px; border: 2px solid var(--wood); background: linear-gradient(180deg, #F5E9C9, #E6C97A); color: var(--ink); font-size: 20px; font-weight: 700; box-shadow: 0 3px 0 #9A6F3A; display: flex; align-items: center; justify-content: center; gap: 10px; }
#nextbtn small { font-weight: 400; font-size: 14px; color: var(--ink-2); }
#nextbtn:active { transform: translateY(2px); box-shadow: 0 1px 0 #9A6F3A; }
#nextbtn:disabled { opacity: .55; box-shadow: none; transform: none; }
#nextbtn.soft { background: var(--paper); border-color: var(--line); color: var(--ink-2); box-shadow: none; font-weight: 500; height: 50px; font-size: 17px; }
#nextbtn.soft small { color: var(--ink-3); }
#tabs { display: grid; grid-template-columns: repeat(5, 1fr); background: var(--wood); padding-bottom: env(safe-area-inset-bottom); } /* v0.7 (GDD 21.3): 6 → 5 — 행동→운영, 가족은 주민 안으로 */
/* 패널 안 소탭 (v0.7): 운영 = 이번 달 | 촌장실 · 주민 = 주민 | 가족 | 파견 */
.subtabs { display: flex; gap: 8px; margin: 0 0 10px; }
/* v0.8.10.6: 스티커 버튼 (3단계 지시서 09절) — 면·외곽선·바닥 그림자, 선택은 이끼색, 누르면 1px 내려앉는다 */
.subtabs button { flex: 1; border: 1.5px solid #7A5636; background: #FBF6E8; color: #4A3A2A; border-radius: 10px; padding: 8px 0 7px; font-size: 15px; font-weight: 600; box-shadow: 0 2px 0 #B9A98A, inset 0 1px 0 #fff; }
.subtabs button.on { background: var(--moss); color: #fff; border-color: #3B5A36; font-weight: 700; box-shadow: 0 2px 0 #2E4A2A, inset 0 1px 0 rgba(255,255,255,.25); }
.subtabs button:active { transform: translateY(1px); box-shadow: 0 1px 0 #B9A98A, inset 0 1px 0 #fff; }
.subtabs button.on:active { box-shadow: 0 1px 0 #2E4A2A, inset 0 1px 0 rgba(255,255,255,.25); }
#tabs button { border: 0; background: transparent; color: #E9DCC4; padding: 8px 0 7px; font-size: 14px; display: flex; flex-direction: column; align-items: center; gap: 1px; opacity: .75; }
#tabs button .ic { font-size: 24px; }
#tabs button.on { opacity: 1; background: rgba(255, 255, 255, .12); color: #fff; }

/* 모달 */
#modal { position: absolute; inset: 0; background: rgba(30, 40, 30, .55); display: flex; align-items: flex-end; justify-content: center; z-index: 20; }
#modal[hidden] { display: none; }
/* v0.5.24 (피드백 #7): 일기·월초 이벤트는 전체 화면 — 상단 정보창·탭까지 덮는다 */
#modal.full { position: absolute; inset: 0; align-items: stretch; } /* v0.8.10.28 (촌장): PC에서 fixed는 브라우저 전체를 덮었다 — #app(최대 480px) 안에서만 */
#modal.full .sheet { max-height: 100%; height: 100%; border-radius: 0; padding-top: env(safe-area-inset-top, 0); }
#modal.full .sheet .text.scroll, #modal.full .sheet .diary.scroll { max-height: none; }
/* v0.8.6: 거점·정착지 시트 — #view 안에서만 꽉 찬다 (하단 실행 버튼·메인 메뉴는 그대로 보인다). 이벤트·일기만 full(fixed) */
#modal.tall { align-items: stretch; }
#modal.tall .sheet { max-height: 100%; height: 100%; border-radius: 0; }
#modal.tall .sheet .text.scroll, #modal.tall .sheet .diary.scroll { max-height: none; }
/* v0.8.6: 대륙 지도에서 세력을 누르면 외교 탭의 그 카드로 스크롤 + 잠깐 표시 */
.card.point { animation: cardPoint 1.6s ease-out; }
@keyframes cardPoint { 0% { box-shadow: 0 0 0 3px var(--wheat); background: var(--wheat-2); } 100% { box-shadow: 0 0 0 0 transparent; } }
.sheet { width: 100%; max-height: 88%; display: flex; flex-direction: column; overflow: hidden; background: var(--paper); border-radius: 14px 14px 0 0; box-shadow: 0 -4px 20px rgba(0, 0, 0, .3); }
/* 헤더(제목+닫기)는 고정, 내용만 스크롤 — 내용이 헤더를 침범하지 않는다 (v0.4.3) */
.sheet-head { flex: 0 0 auto; display: flex; align-items: center; gap: 8px; padding: 12px 16px 10px; border-bottom: 1px solid var(--line); }
.sheet-head:empty { display: none; }
.sheet-head h2 { flex: 1; margin: 0; }
.sheet-head .close { margin-left: auto; }
.sheet-body { flex: 1 1 auto; overflow-y: auto; -webkit-overflow-scrolling: touch; padding: 12px 16px 22px; }
.sheet h2 { font-family: "Gowun Batang", serif; font-size: 22.5px; margin: 0 0 8px; display: flex; align-items: center; gap: 8px; }
.sheet h2 .ic { font-size: 30.5px; }
.sheet h2 small { font-family: inherit; font-weight: 400; font-size: 14px; }
.sheet .text { white-space: pre-line; font-size: 17px; line-height: 1.65; margin-bottom: 12px; }
.sheet .choices { display: flex; flex-direction: column; gap: 6px; }
.sheet .diary.scroll, .sheet .text.scroll { max-height: 42vh; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.sheet .choices.sticky { position: sticky; bottom: -22px; background: var(--paper); padding: 10px 0 22px; margin-top: 12px; box-shadow: 0 -8px 12px -8px rgba(0,0,0,.25); }
.sheet .choices button { text-align: left; padding: 14px 14px; border-radius: 8px; border: 1px solid var(--line); background: var(--paper-2); font-size: 17px; }
.sheet .choices button.primary { background: var(--moss); color: #fff; border-color: var(--moss); }
.sheet .choices button:disabled { opacity: .45; }
.sheet .close { flex: 0 0 auto; border: 0; background: var(--paper-3); border-radius: 50%; width: 38px; height: 38px; font-size: 19px; line-height: 1; }
.sheet .diary { background: var(--paper-2); border-left: 3px solid var(--wheat); padding: 8px 12px; font-size: 16px; margin-bottom: 12px; border-radius: 0 6px 6px 0; }
.sheet .diary p, .panel .diary p { margin: 0 0 4px; }
.diary .rcat { font-family: "Gowun Batang", serif; font-weight: 700; font-size: 15px; margin: 10px 0 2px; color: var(--ink-soft); }
.diary .rcat:first-child { margin-top: 0; }
.diary ul.rlist { margin: 0 0 6px; padding-left: 18px; max-width: none; }
.diary ul.rlist li { margin-bottom: 3px; font-size: 15.5px; }
.panel .diary { background: var(--paper-2); border-left: 3px solid var(--wheat); padding: 8px 12px; font-size: 15.5px; border-radius: 0 6px 6px 0; }
.sheet h3 { font-family: "Gowun Batang", serif; font-size: 17.5px; margin: 14px 0 6px; color: var(--ink-2); }
.sheet p { margin: 0 0 8px; font-size: 16.5px; }

#toast { position: absolute; left: 50%; top: 12px; transform: translateX(-50%); background: rgba(42, 38, 32, .92); color: #fff; padding: 6px 14px; border-radius: 16px; font-size: 15.5px; opacity: 0; transition: opacity .2s; pointer-events: none; z-index: 40; white-space: nowrap; max-width: 92%; overflow: hidden; text-overflow: ellipsis; }
#toast.on { opacity: 1; }
@media (prefers-reduced-motion: reduce) { #toast { transition: none; } }

/* 주민 얼굴 (v0.6 3단계) — 이모지 자리에 들어가므로 세로 정렬을 맞춘다 */
img.face { vertical-align: middle; border-radius: 4px; image-rendering: auto; }
/* v0.8.10.11: 주민 이벤트 — 큰 프로필(30%) + 말풍선 (촌장) */
.talk { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 14px; }
.talk .who { flex: 0 0 30%; display: flex; flex-direction: column; align-items: center; gap: 6px; font-size: 17px; }
.talk .who img.face, .talk .who .facewrap { width: 100% !important; height: auto !important; border-radius: 14px !important; aspect-ratio: 1; object-fit: cover; }
.talk .who .ic { font-size: 64px; }
.talk .bubble { flex: 1; position: relative; background: var(--paper-2); border: 1px solid var(--line); border-radius: 14px; padding: 12px 14px; font-size: 17px; line-height: 1.6; white-space: pre-line; margin-top: 10px; }
.talk .bubble::before { content: ''; position: absolute; left: -9px; top: 16px; border: 9px solid transparent; border-left: 0; border-right-color: var(--line); }
.talk .bubble::after { content: ''; position: absolute; left: -7px; top: 17px; border: 8px solid transparent; border-left: 0; border-right-color: var(--paper-2); }
/* v0.8.10.10: 기존 스티커(건물·지도)를 목록·제목·칩에 — .ico.art */
.ico.art { display: inline-flex; align-items: center; justify-content: center; vertical-align: middle; }
.ico.art img { display: block; filter: drop-shadow(0 1px 1px rgba(55,38,20,.22)); }
/* v0.8.11.6: 픽커 줄의 의미 심볼(얼굴이 없는 후보) — 얼굴 30px 자리와 눈높이를 맞춘다 */
.ui-art .pick .ico.ic[data-k] { width: 26px; height: 26px; vertical-align: -7px; }
.item .ic.art { width: 32px; }
.sheet h2 .ic.art { margin-right: 2px; }
.card .title .ico.art { margin-right: 2px; }
.card .title img.face { margin-right: 2px; }
.sheet h2 img.face { border-radius: 6px; }
span.facewrap { position: relative; display: inline-block; vertical-align: middle; border-radius: 4px; overflow: hidden; }
span.facewrap img { position: absolute; inset: 0; width: 100%; height: 100%; }
/* 얼굴 그림이 들어가며 제목이 밀리지 않게 — 이름은 안 자르고, 임무 선택이 줄어든다 */
.card .title > span:first-child { white-space: nowrap; flex-shrink: 0; }
.card .title select { min-width: 0; flex: 1 1 auto; }
/* 주민 수가 두 자리가 되면 부제가 두 줄로 밀리던 것 — 좁으면 말줄임 */
.panel h2 small.muted { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.sheet .codebox { display: flex; align-items: center; justify-content: center; gap: 12px; margin: 2px 0 14px; padding: 12px; border: 1.5px dashed var(--wood); border-radius: 10px; background: var(--paper-2); } /* v0.8.10.34: 접속 번호 */
.sheet .codebox b { font-size: 24px; letter-spacing: .1em; }
/* v0.8.10.34: 타이틀은 상단바·하단 메뉴까지 덮는다. fixed지만 폭은 #app과 같게 묶어 PC에서 번지지 않는다 */
#modal.cover { position: fixed; inset: 0; align-items: stretch; }
#modal.cover .sheet { max-width: 480px; height: 100%; max-height: 100%; border-radius: 0; }
#modal.cover .sheet-body { display: flex; flex-direction: column; justify-content: center; } /* 접속 번호 시트는 가운데 */
#modal.cover.flush .sheet-body { padding: 0; display: block; } /* 타이틀은 가장자리까지 꽉 찬다 */
/* v0.8.10.34: 첫 화면(타이틀) — 클래스는 titlescreen. 'title'은 카드 머리글이 이미 쓰고 있어 겹치면 시트가 깨진다 (v0.8.10.47)
   v0.8.10.34: 첫 화면(타이틀) — 접속 번호 입력 대신 [새로 시작]·[이어서 하기] */
.sheet .titlescreen { min-height: 100%; display: flex; flex-direction: column; background: linear-gradient(180deg, #2C4227 0%, #4A6B3E 60%, #6E8552 100%); }
.sheet .titlescreen .pic { flex: 1 1 auto; min-height: 160px; position: relative; background-size: cover; background-position: center 58%; }
.sheet .titlescreen .pic::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(28,40,28,.10) 0%, rgba(28,40,28,.05) 40%, var(--paper) 100%); }
.sheet .titlescreen .in { flex: 0 0 auto; position: relative; background: var(--paper); padding: 16px 18px 28px; text-align: center; }
.sheet .titlescreen h1 { font-family: "Gowun Batang", serif; font-size: 28px; margin: 0 0 6px; letter-spacing: -.02em; }
.sheet .titlescreen .lead { color: var(--ink-2); font-size: 15.5px; margin: 0 0 16px; }
.sheet .titlescreen .warn { color: var(--danger); font-size: 15px; margin: 0 0 12px; }
.sheet .titlescreen button { display: block; width: 100%; margin-bottom: 8px; padding: 15px; border-radius: 10px; border: 1.5px solid #7A5636; background: #FBF6E8; color: #4A3A2A; font-size: 17px; font-weight: 600; box-shadow: 0 2px 0 #B9A98A, inset 0 1px 0 #fff; }
.sheet .titlescreen button.primary { background: var(--moss); color: #fff; border-color: #3B5A36; box-shadow: 0 2px 0 #2E4A2A, inset 0 1px 0 rgba(255,255,255,.25); }
.sheet .titlescreen button:active { transform: translateY(1px); box-shadow: 0 1px 0 #B9A98A; }
.sheet .titlescreen .ver { display: block; margin-top: 10px; color: var(--ink-3); font-size: 13px; }
.xlink { color: inherit; text-decoration: underline dotted; text-underline-offset: 3px; } /* v0.8.13.1: 저작권 줄의 X 손잡이 — 색은 주변과 같고 점선 밑줄만 */
.sheet .titlescreen .codebox { margin: 0 0 16px; padding: 16px 12px; } /* v0.8.10.37: 접속 번호 화면 */
.sheet .titlescreen .codebox b { font-size: 29px; }

/* v0.8.10.49: 엔딩(본편 완결) — 다른 이벤트 시트와 확실히 다른 화면. 모든 규칙을 .ending 안으로 가둔다 */
#modal.ending .sheet { background: #212C1D; }
#modal.ending .sheet-head { display: none; }
#modal.ending .sheet-body { padding: 0; display: block; } /* cover의 가운데 정렬을 되돌린다 — 엔딩은 위에서부터 읽는다 */
.sheet .ending { min-height: 100%; display: flex; flex-direction: column; color: #E8E0C8; }
.sheet .ending .top { position: relative; padding: 40px 20px 28px; text-align: center; background-size: cover; background-position: center 62%; }
.sheet .ending .top::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(18,26,16,.52) 0%, rgba(18,26,16,.86) 62%, #212C1D 100%); }
.sheet .ending .top > * { position: relative; z-index: 1; }
.sheet .ending .crown { font-size: 46px; line-height: 1; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.sheet .ending h1 { font-family: "Gowun Batang", serif; font-size: 31px; margin: 8px 0 0; color: #F4EBCF; letter-spacing: .02em; text-shadow: 0 2px 10px rgba(0,0,0,.55); }
.sheet .ending .rule { width: 58px; height: 2px; background: #C9A24A; margin: 15px auto 0; }
.sheet .ending .body { flex: 1 1 auto; padding: 4px 20px 28px; }
.sheet .ending .lead { font-family: "Gowun Batang", serif; font-size: 17.5px; line-height: 1.8; text-align: center; color: #E4DBC0; margin: 0; white-space: pre-line; }
.sheet .ending .tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 22px 0 0; }
.sheet .ending .tile { background: rgba(255,255,255,.05); border: 1px solid rgba(201,162,74,.32); border-radius: 10px; padding: 9px 6px; text-align: center; }
.sheet .ending .tile b { display: block; font-family: "Gowun Batang", serif; font-size: 21px; color: #F4EBCF; }
.sheet .ending .tile small { display: block; margin-top: 2px; font-size: 12.5px; color: #9E9884; }
.sheet .ending .known, .sheet .ending .call { text-align: center; font-family: "Gowun Batang", serif; color: #DCD3B8; white-space: pre-line; }
.sheet .ending .known { font-size: 15.5px; margin: 16px 0 0; }
.sheet .ending .call { font-size: 17px; line-height: 1.75; margin: 22px 0 0; }
.sheet .ending h3 { font-family: "Gowun Batang", serif; font-size: 15px; font-weight: 400; color: #B6AE94; text-align: center; margin: 24px 0 10px; letter-spacing: .12em; }
.sheet .ending h3::before, .sheet .ending h3::after { content: '—'; color: #6F7A63; margin: 0 8px; }
.sheet .ending .eps { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sheet .ending .ep { border: 1px solid rgba(201,162,74,.7); color: #EACF92; border-radius: 999px; padding: 4px 12px; font-size: 14px; }
.sheet .ending .none { text-align: center; color: #8D8672; font-size: 14.5px; margin: 0; }
.sheet .ending .chron { background: rgba(0,0,0,.24); border-left: 3px solid #C9A24A; border-radius: 0 8px 8px 0; padding: 11px 14px; max-height: 32vh; overflow: auto; white-space: pre-line; font-size: 15px; line-height: 1.65; color: #D6CEB6; }
.sheet .ending .fin-close { text-align: center; font-family: "Gowun Batang", serif; font-size: 16.5px; line-height: 1.8; color: #C6BFA6; margin: 28px 0 0; white-space: pre-line; }
.sheet .ending .finbtn { display: block; width: 100%; margin: 10px 0 0; padding: 15px; border-radius: 10px; border: 1.5px solid rgba(201,162,74,.55); background: rgba(255,255,255,.04); color: #D8CFB2; font-family: "Gowun Batang", serif; font-size: 16.5px; }
.sheet .ending .finbtn.on { margin-top: 26px; border-color: #C9A24A; background: rgba(201,162,74,.16); color: #F0E3BC; font-size: 17.5px; }
.sheet .ending .finbtn:active { transform: translateY(1px); background: rgba(201,162,74,.24); }
/* v0.8.10.50: 검수 도킹(PC 960+)에서는 게임이 화면 가운데가 아니다 — fixed로 덮으면 패널 위로 어긋난다 */
body.qa-dock #modal.cover { position: fixed; top: 0; bottom: 0; left: auto; right: auto; width: 480px; } /* v0.8.12.7 (촌장 "습격 창이 이런데?"): dock 상태에서 absolute 는 #view 안에 갇혀 상단바·하단 메뉴가 남았다 — 고정 위치에 가로는 정적 위치(앱 왼쪽)·앱 폭으로 */
body.qa-dock #modal.cover .sheet { max-width: none; }
/* 엔딩의 스크롤 막대도 어두운 화면에 맞춘다 */
#modal.ending .sheet-body::-webkit-scrollbar, .sheet .ending .chron::-webkit-scrollbar { width: 8px; }
#modal.ending .sheet-body::-webkit-scrollbar-track, .sheet .ending .chron::-webkit-scrollbar-track { background: transparent; }
#modal.ending .sheet-body::-webkit-scrollbar-thumb, .sheet .ending .chron::-webkit-scrollbar-thumb { background: rgba(201,162,74,.38); border-radius: 4px; }

/* v0.8.12.1 (촌장): 여름 대축제 결과창 — 여름 배경 머리 + 시상대 + 순위 + 점수 조각 + 보상 타일. 모든 규칙을 .fest 안으로 가둔다 */
.sheet .fest { margin: -12px -16px 0; }
.sheet .fest .top { position: relative; padding: 26px 16px 20px; text-align: center; background-size: cover; background-position: center 55%; color: #F4EBCF; }
.sheet .fest .top::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(24,34,20,.28) 0%, rgba(24,34,20,.62) 70%, rgba(24,34,20,.8) 100%); }
.sheet .fest .top > * { position: relative; z-index: 1; }
.sheet .fest .crown .ico { font-size: 40px; } .sheet .fest .crown img { width: 48px; height: 48px; filter: drop-shadow(0 2px 6px rgba(0,0,0,.5)); }
.sheet .fest h1 { font-family: "Gowun Batang", serif; font-size: 26px; margin: 4px 0 0; letter-spacing: .02em; text-shadow: 0 2px 8px rgba(0,0,0,.55); }
.sheet .fest .sub { margin-top: 4px; font-size: 14.5px; color: #DCD3B8; }
.sheet .fest .body { padding: 12px 16px 6px; }
.sheet .fest .lead { text-align: center; font-family: "Gowun Batang", serif; font-size: 17.5px; margin: 0 0 12px; color: var(--ink); }
.sheet .fest .lead.win { color: #8A5A12; font-weight: 700; }
.sheet .fest .podium { display: grid; grid-template-columns: 1fr 1.2fr .9fr; gap: 6px; align-items: end; margin: 4px 0 8px; } /* v0.8.12.2: 올림픽식 — 1위 > 2위 > 3위 높이·크기 */
.sheet .fest .p { text-align: center; background: var(--paper-2); border: 1px solid var(--line); border-radius: 12px; padding: 8px 4px 8px; display: flex; flex-direction: column; justify-content: flex-start; align-items: center; }
.sheet .fest .p1 { background: var(--wheat-2); border-color: var(--wheat); padding-top: 12px; min-height: 210px; }
.sheet .fest .p2 { background: #F1E4D6; border-color: #D3B092; min-height: 176px; } .sheet .fest .p3 { background: #EEEEE8; border-color: #C5C5BA; min-height: 148px; } .sheet .fest .p3 b { font-size: 13px; } .sheet .fest .p3 .medal { font-size: 11.5px; }
.sheet .fest .p.ours { box-shadow: 0 0 0 2px var(--moss); }
.sheet .fest .p .medal { display: inline-block; font-size: 12.5px; font-weight: 700; padding: 2px 8px; border-radius: 10px; background: rgba(42,38,32,.08); margin-bottom: 6px; }
.sheet .fest .p1 .medal { background: var(--wheat); color: #fff; }
.sheet .fest .p img.face, .sheet .fest .p .facewrap { display: block; margin: 0 auto; border-radius: 50%; } .sheet .fest .p .crest img { display: block; margin: 0 auto; }
.sheet .fest .p b { display: block; margin-top: 6px; font-size: 14px; line-height: 1.25; } .sheet .fest .p1 b { font-size: 15.5px; }
.sheet .fest .p small { display: block; color: var(--ink-3); font-size: 12.5px; margin-top: 2px; }
.sheet .fest .rows { display: flex; flex-direction: column; gap: 4px; margin: 0 0 4px; }
.sheet .fest .row { display: flex; align-items: center; gap: 8px; padding: 6px 10px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); font-size: 15px; }
.sheet .fest .row.ours { border-color: var(--moss); background: var(--moss-2); }
.sheet .fest .row .rk { flex: 0 0 34px; color: var(--ink-3); font-size: 13.5px; } .sheet .fest .row .nm { flex: 1; } .sheet .fest .row .sc { color: var(--ink-2); }
.sheet .fest .row img.face, .sheet .fest .row .crest img { width: 28px; height: 28px; border-radius: 50%; }
.sheet .fest h3 { font-family: "Gowun Batang", serif; font-size: 14.5px; font-weight: 400; color: var(--ink-3); text-align: center; margin: 14px 0 8px; letter-spacing: .12em; }
.sheet .fest h3::before, .sheet .fest h3::after { content: '—'; color: var(--line); margin: 0 8px; }
.sheet .fest .chips { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; }
.sheet .fest .chip { font-size: 13.5px; padding: 4px 10px; border-radius: 12px; background: var(--paper-2); border: 1px solid var(--line); }
.sheet .fest .chip.dim { color: var(--ink-3); }
.sheet .fest .tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; } .sheet .fest .tiles.four { grid-template-columns: repeat(4, 1fr); gap: 6px; } .sheet .fest .tile.sttile { background: var(--moss-2); border-color: #B9CDB2; }
.sheet .fest .tile { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; text-align: center; }
.sheet .fest .tile .ico { font-size: 22px; width: 24px; height: 24px; display: inline-block; vertical-align: middle; } .sheet .fest .tile img { width: 24px; height: 24px; } /* v0.8.12.3 (촌장): 네 상자 아이콘·숫자·이름 크기 통일 */
.sheet .fest .tile b { display: block; font-family: "Gowun Batang", serif; font-size: 20px; line-height: 1.3; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sheet .fest .tile small { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-3); margin-top: 2px; }
.sheet .fest .xrows { display: flex; flex-direction: column; gap: 5px; margin-top: 10px; }
.sheet .fest .xrow { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 6px 10px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.sheet .fest .xrow .ico { font-size: 20px; flex: 0 0 auto; } .sheet .fest .xrow img { width: 22px; height: 22px; }

/* v0.8.12.5 (촌장): 결산형 이벤트 — 차분한 톤. 종이색 그대로, 계절 띠 한 줄, 타일·아이콘 줄. 대축제 .fest 부품과 같은 치수 */
.sheet .sum { margin: -12px -16px 0; padding: 0 16px 6px; }
.sheet .sum .band { height: 4px; margin: 0 -16px 14px; background: var(--wheat); } /* v0.8.12.9 (촌장): 잘린 그림 띠는 어색하다 → 톤 색선만 */
.sheet .sum.good .band { background: var(--moss); } .sheet .sum.warn .band { background: var(--danger); }
.sheet .sum .lead { font-family: "Gowun Batang", serif; font-size: 17px; line-height: 1.6; text-align: center; margin: 0 0 12px; color: var(--ink); }
.sheet .sum .big { text-align: center; background: var(--wheat-2); border: 1px solid var(--wheat); border-radius: 12px; padding: 12px 10px; margin: 0 0 12px; }
.sheet .sum .big b { display: block; font-family: "Gowun Batang", serif; font-size: 23px; color: #6E4A0F; }
.sheet .sum .big small { display: block; margin-top: 3px; font-size: 13px; color: var(--ink-3); }
.sheet .sum .tiles { display: grid; gap: 8px; margin-bottom: 10px; }
.sheet .sum .tiles.n1 { grid-template-columns: 1fr; } .sheet .sum .tiles.n2 { grid-template-columns: repeat(2, 1fr); } .sheet .sum .tiles.n3 { grid-template-columns: repeat(3, 1fr); } .sheet .sum .tiles.n4 { grid-template-columns: repeat(2, 1fr); }
.sheet .sum .tile { background: var(--paper-2); border: 1px solid var(--line); border-radius: 10px; padding: 8px 4px; text-align: center; }
.sheet .sum .tile.warn { background: var(--danger-2); border-color: #D9A89A; } .sheet .sum .tile.warn b { color: var(--danger); }
.sheet .sum .tile .ico { font-size: 22px; width: 24px; height: 24px; display: inline-block; vertical-align: middle; } .sheet .sum .tile img { width: 24px; height: 24px; }
.sheet .sum .tile b { display: block; font-family: "Gowun Batang", serif; font-size: 20px; line-height: 1.3; margin-top: 4px; font-variant-numeric: tabular-nums; }
.sheet .sum .tile small { display: block; font-size: 13px; line-height: 1.3; color: var(--ink-3); margin-top: 2px; }
.sheet .sum .xrows { display: flex; flex-direction: column; gap: 5px; }
.sheet .sum .xrow { display: flex; align-items: center; gap: 8px; font-size: 15px; padding: 6px 10px; border-radius: 8px; background: var(--paper-2); border: 1px solid var(--line); }
.sheet .sum .xrow .ico { font-size: 20px; flex: 0 0 auto; } .sheet .sum .xrow img { width: 22px; height: 22px; }
.sheet .sum .note { margin: 12px 0 0; font-size: 14.5px; color: var(--ink-2); text-align: center; }

#hint .more { color: var(--ink); font-weight: 600; } /* v0.8.16: 예정된 일 개수 — 누르면 상황판 */