/* 웰시코기 키우기 — docs/design/mockups/final.html 시안을 그대로 구현 기반으로 삼았다. */
:root{
  --bg:#f6efe4;--paper:#fffaf2;--ink:#3b2f27;--muted:#8a7a6d;--line:#e6d9c8;
  --orange:#e8913a;--orange-d:#c9721e;--green:#5aa469;--red:#d9584a;--blue:#4f7fb8;--gold:#d8a53a;
  --shadow:0 2px 6px rgba(60,40,20,.08);
}
*{box-sizing:border-box}
html,body{height:100%}
html{background:#d8cdbd} /* 모바일 바운스 스크롤 때 흰 배경이 비치지 않게 — 바탕색을 문서 루트에도 깐다 (v3.27) */
button,select,input,.choice{-webkit-tap-highlight-color:transparent;touch-action:manipulation} /* 터치 하이라이트 제거 · 더블탭 확대 비활성 (v3.27) */
body{
  margin:0;font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Pretendard","Noto Sans KR",sans-serif;
  background:#d8cdbd;color:var(--ink);font-size:14px;
  word-break:keep-all;overflow-wrap:break-word; /* 한글은 어절 단위로 줄바꿈 — 단어 중간에서 끊기지 않게 */
}
button{font-family:inherit}
.screen{display:none;min-height:100vh}
.screen.active{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:16px}

/* ── 타이틀 / 캐릭터 생성 ───────────────────────────────── */
.title-card,.create-card{
  width:min(480px,94vw);background:var(--paper);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.3);
  padding:36px 32px;text-align:center;
}
.title-card h1{margin:0 0 6px;font-size:26px}
.title-card p.sub{color:var(--muted);margin:0 0 28px;font-size:13px}
.title-card .dog-emoji{font-size:56px;margin-bottom:10px}
.stack{display:flex;flex-direction:column;gap:10px}
.btn{border:1px solid var(--line);background:#fff;border-radius:10px;padding:10px 16px;font-size:14px;cursor:pointer;font-weight:600;color:var(--ink)}
.btn:hover{border-color:var(--orange)}
.btn.primary{background:var(--orange);border-color:var(--orange-d);color:#fff;font-size:15px;padding:12px 20px}
.btn.primary:hover{background:var(--orange-d)}
.btn.ghost{background:transparent}
.btn:disabled{opacity:.4;cursor:not-allowed}
.btn.danger{color:var(--red);border-color:var(--red)}

.create-card h2{margin:0 0 4px;font-size:19px}
.create-card .step-label{color:var(--muted);font-size:12px;margin-bottom:20px}
.create-card input[type=text]{
  width:100%;padding:12px 14px;font-size:15px;border:1px solid var(--line);border-radius:10px;
  background:#fff;margin-bottom:6px;color:var(--ink);
}
.job-cards{display:flex;flex-direction:column;gap:10px;margin:14px 0}
.job-card{border:1.5px solid var(--line);border-radius:12px;padding:12px 14px;text-align:left;cursor:pointer;background:#fff}
.job-card:hover{border-color:var(--orange)}
.job-card.sel{border-color:var(--orange);background:#fff6ea}
.job-card b{display:block;font-size:14px;margin-bottom:3px}
.job-card .desc{font-size:12px;color:var(--muted);line-height:1.5}
.create-nav{display:flex;justify-content:space-between;margin-top:18px;gap:8px}
.pers-note{font-size:11px;color:var(--muted);margin-top:8px}

/* ── 프롤로그 (입양 장면) ─────────────────────────────────── */
.prologue-text{font-size:15px;line-height:1.7;text-align:left;margin:4px 0 0;min-height:64px}
.choice-btn{text-align:left;padding:12px 14px}

/* ── 메인 루프 (final.html 이식) ─────────────────────────── */
.stage{width:min(1400px,98vw);margin:0 auto;background:var(--bg);border-radius:14px;overflow:hidden;box-shadow:0 10px 30px rgba(0,0,0,.25);display:grid;grid-template-rows:48px 1fr auto;height:min(900px,94vh);position:relative}
.top{display:flex;align-items:center;gap:14px;padding:0 16px;background:var(--paper);border-bottom:1px solid var(--line)}
.top .date{font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.top .turn{font-weight:800;font-size:16px}
.top .chip{background:#f1e6d5;border-radius:999px;padding:3px 10px;font-size:12px;color:var(--muted)} .top .chip b{color:var(--ink)}
.top .phase{display:flex;gap:4px;margin-left:auto;font-size:11px;color:var(--muted)}
.top .phase span{padding:3px 8px;border-radius:6px;background:#eee4d4}
.top .phase span.on{background:var(--orange);color:#fff;font-weight:700}
.top .icons{display:flex;gap:6px}
.top .icons button{border:1px solid var(--line);background:#fff;border-radius:8px;padding:4px 8px;font-size:12px;cursor:pointer}

.mid{display:grid;grid-template-columns:1fr 400px;min-height:0}
.dogpane{position:relative;background:linear-gradient(#f9f1e2,#efe2cc);border-right:1px solid var(--line);display:flex;flex-direction:column;min-height:0}
.scene{flex:1;display:flex;align-items:center;justify-content:center;position:relative;min-height:0}
.scene svg{width:300px;height:auto;filter:drop-shadow(0 8px 6px rgba(0,0,0,.12))}
.dog-sprite{width:300px;height:300px;position:relative;filter:drop-shadow(0 8px 6px rgba(0,0,0,.12))}
.dog-sprite>img{position:absolute;inset:0;width:100%;height:100%;object-fit:contain;z-index:1}
.dog-fallback{display:none;width:100%;height:100%}.dog-sprite.missing .dog-fallback{display:block}.dog-fallback svg{width:100%;height:100%}
.dog-sprite.missing>img{display:none}
.event-scene,.prologue-scene,.ending-scene{display:block;width:100%;height:auto;object-fit:cover;border-radius:10px;margin:0 0 14px}
.modal .mb .event-scene{width:calc(100% + 40px);max-width:none;border-radius:0;margin:-18px -20px 14px}
.result-event{display:flex;gap:10px;align-items:center}.result-sticker{width:76px;height:76px;object-fit:contain;flex:none}.asset-photo{width:100%;height:100%;object-fit:cover;display:block}
.name{position:absolute;left:20px;top:16px;background:var(--paper);border:1px solid var(--line);border-radius:12px;padding:10px 14px;box-shadow:var(--shadow)}
.name h2{margin:0 0 4px;font-size:18px}
.name .tags{display:flex;gap:6px;font-size:11px;flex-wrap:wrap}
.name .tags span{background:#f1e6d5;padding:2px 8px;border-radius:999px;color:var(--muted)}
.name .tags span.p{background:#ffe6c7;color:var(--orange-d);font-weight:700}
.bubble{position:absolute;right:24px;top:24px;max-width:300px;background:#fff;border-radius:16px;padding:12px 14px;box-shadow:var(--shadow);font-size:13px;line-height:1.55}
.bubble:after{content:"";position:absolute;left:-10px;bottom:18px;border:8px solid transparent;border-right-color:#fff}
.bubble .lbl{font-size:11px;color:var(--muted);margin-bottom:4px}
.story{background:var(--paper);border-top:1px solid var(--line);padding:12px 20px;font-size:13px;line-height:1.6;max-height:140px;overflow:auto}
.story h4{margin:0 0 6px;font-size:12px;color:var(--muted);letter-spacing:.04em}
.story p{margin:0 0 4px}

/* 지난주 이야기 — 항목별 줄바꿈 + 강조 단계 (v2.2). 컨디션 이벤트는 그 주의 헤드라인이라
   강조하고, 계획 요약은 부가정보라 옅게 보여준다. */
.story-line{margin:0 0 6px}
.story-line:last-child{margin-bottom:0}
.story-line.story-highlight{font-weight:700;color:var(--orange-d)}
.story-line.story-note{color:var(--ink)}
.story-line.story-plan{color:var(--muted);font-size:12px}

.result{position:absolute;inset:0;background:var(--paper);display:none;flex-direction:column;overflow:auto;z-index:3}
.result.show{display:flex}
.result .rh{padding:12px 20px;border-bottom:1px solid var(--line);display:flex;align-items:center;gap:10px}
.result .rh h3{margin:0;font-size:16px}
.result .rh small{color:var(--muted)}
.result .rb{padding:14px 20px;display:grid;grid-template-columns:1fr 200px;gap:16px}
.result .blk{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;font-size:13px;line-height:1.65;margin-bottom:8px}
.result .blk h4{margin:0 0 6px;font-size:12px;color:var(--muted);letter-spacing:.04em}
.result .blk.ev{border-left:3px solid var(--red)}
.result .chg{display:grid;grid-template-columns:1fr 1fr;gap:4px 16px;font-size:13px}
.result .chg div{display:flex;justify-content:space-between;border-bottom:1px dashed var(--line);padding:3px 0}
.result .chg .to{font-weight:700}
.result .chg .to.up{color:var(--green)} .result .chg .to.down{color:var(--red)}
.polaroid{background:#fff;padding:8px 8px 20px;box-shadow:0 6px 16px rgba(0,0,0,.15);transform:rotate(-2deg);width:180px;margin:0 auto}
.polaroid .ph{height:164px;background:linear-gradient(160deg,#f5c58f,#e8913a 60%,#b85f1a);display:grid;place-items:center;font-size:40px;overflow:hidden}
.polaroid .c{font-size:11px;text-align:center;margin-top:8px;color:#5b4d43;line-height:1.35}
.result .rf{margin-top:auto;padding:10px 20px;border-top:1px solid var(--line);display:flex;justify-content:flex-end;gap:8px;position:sticky;bottom:0;background:var(--paper)}

.stats{background:var(--paper);padding:14px 16px;overflow:auto}
.stats h3{margin:0 0 8px;font-size:12px;color:var(--muted);letter-spacing:.06em;display:flex;justify-content:space-between}
.money{display:flex;justify-content:space-between;font-size:13px;margin-bottom:6px}
.money b{font-size:15px}
.money.debt b{color:var(--red)}

/* 지출 내역 — 왜 돈이 나갔는지 항목별로 보여준다 */
.expenses{display:flex;flex-direction:column;gap:2px;font-size:12px}
.expenses div{display:flex;justify-content:space-between;padding:2px 0;border-bottom:1px dashed var(--line)}
.expenses .amt{font-weight:700;white-space:nowrap;padding-left:8px}
.expenses .amt.out{color:var(--red)}
.expenses .amt.in{color:var(--green)}
.expenses .total{border-top:1px solid var(--line);border-bottom:0;margin-top:4px;padding-top:6px;font-weight:700}

/* 사람 / 강아지 상태 분리 카드 */
.stat-group{border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px;background:#fff}
.stat-group h3{margin:0 0 8px}
.divider{height:1px;background:var(--line);margin:10px 0}
.st{display:grid;grid-template-columns:52px 1fr;gap:3px 10px;align-items:center;margin-bottom:9px}
.st .l{font-size:13px;font-weight:600}
.st .bar{height:14px;background:#eee4d4;border-radius:7px;position:relative;overflow:hidden}
.st .bar .f{position:absolute;left:0;top:0;bottom:0;border-radius:7px;background:var(--col)}
.st .bar .f.low{background:var(--red);background-image:repeating-linear-gradient(135deg,rgba(255,255,255,.35) 0 4px,transparent 4px 8px)}
.st .bar .f.high{background:var(--colhi)}
.st .bar .g{position:absolute;top:0;bottom:0;background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(90,164,105,.8) 3px 6px)}
.st .bar .g.down{background:repeating-linear-gradient(45deg,transparent 0 3px,rgba(217,88,74,.8) 3px 6px)}
.st .word{grid-column:2;font-size:12px;color:#5b4d43;display:flex;justify-content:space-between;align-items:baseline}
.st .word b{font-weight:700}
.st .word .to{color:var(--green)} .st .word .to.down{color:var(--red)}
.st .word .arrow.up{color:var(--green)} .st .word .arrow.down{color:var(--red)} .st .word .arrow.flat{color:var(--muted)}
.st .word .num{color:var(--muted);font-size:11px;margin-left:5px;font-variant-numeric:tabular-nums}
.st.warn .l,.st.warn .word b{color:var(--red)}
.legend{font-size:11px;color:var(--muted);line-height:1.6;margin-top:6px}
.legend .k{display:inline-block;width:14px;height:8px;border-radius:2px;vertical-align:middle;margin-right:3px}

.plan{background:var(--paper);border-top:2px solid var(--orange);padding:12px 16px 14px}
.plan-h{display:flex;align-items:center;gap:14px;margin-bottom:10px;flex-wrap:wrap}
.plan-h h3{margin:0;font-size:14px}
.ap{flex:1;display:flex;align-items:center;gap:10px;min-width:200px}
.ap .track{flex:1;height:16px;background:#eee4d4;border-radius:8px;overflow:hidden;display:flex}
.ap .track i{display:block;height:100%}
.ap .n{font-size:13px;font-variant-numeric:tabular-nums;white-space:nowrap} .ap .n b{font-size:16px}
.ap .n .why{display:block;font-size:11px;color:var(--muted);font-weight:normal;white-space:normal}
.grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr)) 240px;gap:8px} /* v3.9 — 개인 일정 타일 복원으로 7열 */
.grid.with-parttime{grid-template-columns:repeat(8,minmax(0,1fr)) 240px} /* 빚이 있으면 알바 타일이 9번째로 붙는다 — 두 줄로 꺾이면 고정 높이 stage의 가운데(강아지·상태)가 눌린다 */
.act{background:#fff;border:1px solid var(--line);border-radius:12px;padding:8px 9px;min-width:0;display:flex;flex-direction:column;gap:6px;position:relative}
.act.locked{opacity:.5}
.act .t{display:flex;justify-content:space-between;align-items:baseline;font-size:12.5px;font-weight:700;white-space:nowrap;overflow:hidden}
.act .t small{font-weight:400;color:var(--muted);font-size:11px}
.act .ctl{display:flex;align-items:center}
/* 값 선택은 전부 select — 사료 선택과 같은 모양으로 통일 (v2.9). 네이티브 화살표는 감추고 직접 그린다 */
.pick{
  width:100%;min-height:32px;font-size:12.5px;font-weight:700;color:var(--ink);
  border:1px solid var(--line);border-radius:8px;background:#fff;padding:4px 26px 4px 10px;cursor:pointer;
  appearance:none;-webkit-appearance:none;
  background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a7a6d' stroke-width='1.6' stroke-linecap='round'/></svg>");
  background-repeat:no-repeat;background-position:right 9px center;
}
.pick:hover,.pick:focus{border-color:var(--orange);outline:none}
.pick:disabled{opacity:.6;cursor:not-allowed;background-color:#f6efe4}
.act.locked .pick{pointer-events:none}
.act .eff{font-size:11px;color:var(--muted);line-height:1.5;min-height:32px}
.act .eff b{color:var(--ink);letter-spacing:-.5px}
.act .eff .m{color:var(--red);letter-spacing:-.5px}
.act .eff .lk{color:var(--orange-d)}
.act .cost{position:absolute;right:8px;top:-8px;background:var(--orange);color:#fff;font-size:10px;padding:1px 6px;border-radius:999px;font-weight:700}
.food{background:#fff;border:1px dashed var(--line);border-radius:12px;padding:8px 10px;font-size:12px}
.food .row{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}
.food select{font-size:12px;font-weight:600;color:var(--ink);border:1px solid var(--line);border-radius:8px;padding:4px 24px 4px 8px;background:#fff;appearance:none;-webkit-appearance:none;background-image:url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path d='M1 1l4 4 4-4' fill='none' stroke='%238a7a6d' stroke-width='1.6' stroke-linecap='round'/></svg>");background-repeat:no-repeat;background-position:right 7px center;min-height:28px}
.food select:disabled{opacity:.6;background-color:#f6efe4}
.food .sum{color:var(--muted);font-size:11px;border-top:1px solid var(--line);padding-top:6px;margin-top:2px}
.food .lbl{font-weight:700;margin-bottom:6px;font-size:12px}
.plan-f{display:flex;gap:10px;justify-content:flex-end;align-items:center;margin-top:10px;flex-wrap:wrap}
.plan-f .hint{margin-right:auto;font-size:12px;color:var(--muted)}

.overlay{position:absolute;inset:0;background:rgba(40,25,10,.45);display:flex;align-items:center;justify-content:center;z-index:9}
.overlay.hidden{display:none}
/* '이번 주 시작' 로딩 연출 (v3.9) */
.overlay.week-passing{background:rgba(40,25,10,.55);align-items:center}
.week-card{background:var(--paper);border-radius:16px;padding:28px 40px;text-align:center;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.week-card .paw{font-size:34px;animation:pawstep .5s ease-in-out infinite alternate}
.week-card .date{font-size:20px;font-weight:800;margin:8px 0 2px;font-variant-numeric:tabular-nums}
.week-card .sub{font-size:12px;color:var(--muted)}
.week-card .dots{display:flex;gap:5px;justify-content:center;margin-top:12px}
.week-card .dots i{width:8px;height:8px;border-radius:50%;background:#eee4d4}
.week-card .dots i.on{background:var(--orange)}
@keyframes pawstep{from{transform:translateX(-6px) rotate(-8deg)}to{transform:translateX(6px) rotate(8deg)}}
.modal{width:min(520px,92vw);background:var(--paper);border-radius:16px;box-shadow:0 20px 50px rgba(0,0,0,.35);overflow:hidden;max-height:88vh;display:flex;flex-direction:column}
.modal .mh{background:#3b2f27;color:#fff;padding:10px 16px;font-size:12px;letter-spacing:.06em;display:flex;justify-content:space-between}
.modal .mb{padding:18px 20px;overflow:auto;min-height:0} /* flex 자식이 실제로 스크롤되려면 min-height:0 (v3.32) */
.modal h2{margin:0 0 8px;font-size:18px}
.modal p{margin:0 0 14px;line-height:1.6;font-size:14px;color:#5b4d43}
.choice{display:flex;align-items:center;gap:12px;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:8px;cursor:pointer;background:#fff}
.choice:hover{border-color:var(--orange)}
.choice .k{width:24px;height:24px;border-radius:50%;background:#f1e6d5;display:grid;place-items:center;font-weight:800;font-size:12px;flex:none}
.choice .txt{flex:1;font-size:13px;font-weight:600}
.choice .txt .note{display:block;font-size:11px;font-weight:400;color:var(--muted);margin-top:2px}
.choice:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.job-card:focus-visible{outline:2px solid var(--orange);outline-offset:2px}
.choice .eff{font-size:12px;color:var(--muted);text-align:right;line-height:1.35}
.choice .eff small{display:block;font-size:11px}
.choice.lock{opacity:.5;background:#f6efe4;cursor:not-allowed}
.modal-cta{display:flex;justify-content:flex-end;margin-top:4px}

/* ── 월간 요약 ─────────────────────────────────────────── */
.monthly{position:absolute;inset:0;background:rgba(40,25,10,.5);display:none;align-items:center;justify-content:center;z-index:10}
.monthly.show{display:flex}
.monthly .card{width:min(460px,92vw);max-height:88vh;overflow:auto;background:var(--paper);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.35)}
.monthly .mh2{text-align:center;padding:16px 0 4px}
.monthly .mh2 .m{font-size:11px;color:var(--muted);letter-spacing:.1em}
.monthly .mh2 h2{margin:2px 0 0;font-size:20px}
.monthly .mh2 h2 small{font-size:12px;color:var(--muted);font-weight:400}
.monthly .body{padding:0 16px 16px}
.monthly .blk{background:#fff;border:1px solid var(--line);border-radius:12px;padding:10px 12px;margin-bottom:10px}
.monthly .blk h4{margin:0 0 8px;font-size:11px;color:var(--muted);letter-spacing:.06em;display:flex;justify-content:space-between}
.monthly .stat-row{display:grid;grid-template-columns:44px 1fr;gap:8px;align-items:center;margin-bottom:5px;font-size:12px}
.monthly .stat-row .v{font-size:12px;text-align:right}
.monthly .stat-row .to.up{color:var(--green)} .monthly .stat-row .to.down{color:var(--red)}
.monthly .fore{border-color:#f0d3ad;background:#fff8ee}
.monthly .fore .imp{color:var(--red);font-weight:700}
.monthly .cta{display:flex;justify-content:flex-end;padding:0 4px}

/* ── 사진첩 ────────────────────────────────────────────── */
.album-overlay{position:absolute;inset:0;background:rgba(40,25,10,.5);display:none;align-items:center;justify-content:center;z-index:10}
.album-overlay.show{display:flex}
.album-card{width:min(560px,94vw);max-height:88vh;overflow:auto;background:var(--paper);border-radius:18px;box-shadow:0 20px 50px rgba(0,0,0,.35);padding:18px 20px}
.album-card h3{margin:0 0 12px}
.sheet-head{position:sticky;top:-18px;z-index:2;display:flex;align-items:center;justify-content:space-between;gap:12px;margin:-18px -20px 14px;padding:12px 20px;background:rgba(255,250,242,.97);border-bottom:1px solid var(--line);backdrop-filter:blur(8px)}
.sheet-head h3{margin:0}
.sheet-close{width:44px;height:44px;min-width:44px;padding:0;display:grid;place-items:center;font-size:16px}
.sheet-foot{display:flex;justify-content:flex-end;margin-top:14px}
.log-list{display:flex;flex-direction:column;gap:10px;max-height:56vh;overflow:auto}
.settings-card{width:min(360px,90vw)}
.album-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.album-slot{aspect-ratio:1;border-radius:10px;background:#eee4d4;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:6px;text-align:center}
.album-slot.got{background:linear-gradient(160deg,#f5c58f,#e8913a 60%,#b85f1a);color:#fff}
.album-slot.got{position:relative;overflow:hidden;padding:0;justify-content:flex-end}
.album-slot.got .asset-photo{position:absolute;inset:0;z-index:0}
.album-slot.got .cap{position:relative;z-index:1;width:100%;padding:5px 4px;background:linear-gradient(transparent,rgba(0,0,0,.7));color:#fff}
.album-slot .n{font-size:22px}
.album-slot .cap{font-size:9px;line-height:1.3;margin-top:4px}
.album-slot.locked .cap{color:var(--muted);font-size:9px}

/* ── 엔딩 ──────────────────────────────────────────────── */
.ending-card{width:min(640px,94vw);max-height:92vh;overflow:auto;background:var(--paper);border-radius:20px;box-shadow:0 20px 50px rgba(0,0,0,.35);padding:32px}
.ending-card .tier{display:inline-block;padding:4px 14px;border-radius:999px;font-size:12px;font-weight:800;color:#fff;margin-bottom:10px}
.ending-card h1{margin:0 0 14px;font-size:30px}
.ending-card .epi{font-size:15px;line-height:1.8;color:#4a3b30;margin-bottom:22px}
.ending-card .graph{display:flex;gap:3px;align-items:flex-end;height:80px;margin-bottom:8px}
.ending-card .graph i{flex:1;border-radius:2px 2px 0 0}
.ending-card .moments{display:flex;flex-direction:column;gap:6px;font-size:13px;line-height:1.5;margin:14px 0}
.ending-card .moments div{border-bottom:1px dashed var(--line);padding-bottom:6px}
.ending-card .next{font-size:12px;color:var(--muted);text-align:center;margin-top:20px;line-height:1.7}
.ending-photo{aspect-ratio:1;border-radius:6px;background:linear-gradient(160deg,#f5c58f,#e8913a 60%,#b85f1a);display:grid;place-items:center;color:#fff;font-size:16px;overflow:hidden}
.ending-photo img{width:100%;height:100%;object-fit:cover;display:block}

/* ── 반응형 (모바일, v2.9 전면 점검) ─────────────────────
   원칙: 세로 한 줄 흐름 · 터치 타깃 40px 이상 · 진행 버튼은 항상 손 닿는 곳(sticky) ·
   오버레이는 스테이지가 아니라 화면(fixed)에 붙인다 — 스테이지가 100vh보다 길면 absolute는 화면 밖에 뜬다. */
@media (max-width:900px){
  body{font-size:15px}
  .screen.active{padding:0}
  .stage{width:100%;border-radius:0;box-shadow:none;height:auto;min-height:100vh;min-height:100dvh;grid-template-rows:auto auto auto;overflow:visible} /* dvh — 주소창이 접히고 펼쳐질 때 높이가 출렁이지 않게 (v3.27) */

  /* 상단바 — 날짜·주차·도구를 한 줄에 묶고, 상태 칩과 단계를 각 한 줄로 고정한다. */
  .top{display:grid;grid-template-columns:auto auto minmax(0,1fr) auto;height:auto;padding:8px 12px;gap:6px 8px}
  .top .date{font-size:12px;grid-column:1;grid-row:1;white-space:nowrap}
  .top .turn{font-size:18px}
  .top .chip{font-size:12px;padding:4px 8px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .top .chip-age{grid-column:1/3;grid-row:2;justify-self:start}
  .top .chip-chapter{grid-column:3;grid-row:2;min-width:0}
  .top .chip-season{grid-column:4;grid-row:2;justify-self:end}
  .top .icons{grid-column:3/5;grid-row:1;justify-self:end;margin-left:0;gap:6px}
  .top .icons button{min-width:44px;min-height:44px;padding:6px 9px;font-size:13px}
  .top .icons .icon-label{display:none}
  .top .phase{grid-column:1/-1;grid-row:3;margin-left:0;width:100%;font-size:12px}
  .top .phase span{flex:1;text-align:center;padding:6px 4px}

  .mid{grid-template-columns:1fr}
  .dogpane{border-right:0;border-bottom:1px solid var(--line)}
  .scene{padding:12px 12px 0;flex-direction:column;align-items:stretch}
  .scene svg{width:140px;align-self:flex-end;margin-top:-30px}
  .dog-sprite{width:150px;height:150px;align-self:flex-end;margin-top:-30px}
  .name{position:static;order:-2;align-self:flex-start;margin:0 0 8px;padding:10px 12px}
  .name h2{font-size:17px}
  .bubble{position:static;max-width:none;margin:0 0 6px;order:-1;font-size:14px}
  .bubble:after{display:none}
  .story{max-height:none;padding:12px 14px;font-size:14px}

  .stats{padding:12px 12px 4px}
  .stat-group{padding:12px 12px}
  .st{grid-template-columns:60px 1fr;margin-bottom:10px}
  .st .l{font-size:14px}
  .st .bar{height:16px}
  .st .word{font-size:13px}

  .result{position:static}
  .result.show{display:flex;padding-bottom:calc(70px + env(safe-area-inset-bottom))}
  .result .rh{padding:12px 14px}
  .result .rb{grid-template-columns:1fr;padding:12px 14px}
  .result .blk{font-size:14px}
  .result .chg{grid-template-columns:1fr;font-size:14px}
  .result .rf{position:fixed;left:0;right:0;bottom:0;z-index:4;padding:10px 14px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(60,40,20,.12)}
  .result .rf .btn.primary{flex:1;min-height:48px;font-size:16px}
  .polaroid{width:min(220px,80%);transform:none}

  /* 계획 화면 — 타일 2열, 식단은 한 줄 전체, 진행 버튼은 하단 고정 */
  .plan{padding:12px 12px calc(76px + env(safe-area-inset-bottom))}
  .plan-h{gap:8px 12px}
  .plan-h h3{font-size:15px;width:100%}
  .ap{min-width:0;width:100%}
  .ap .n{font-size:14px} .ap .n b{font-size:18px}
  .plan-h #btnSame{min-height:44px;padding:8px 12px}
  .grid,.grid.with-parttime{grid-template-columns:1fr 1fr;gap:10px}
  .act{padding:10px 10px;gap:8px}
  .act .t{font-size:14px;white-space:normal;overflow:visible;flex-wrap:wrap;gap:2px 6px}
  .act .t small{font-size:11.5px}
  .act .eff{font-size:12px;min-height:0}
  .act .cost{font-size:11px;padding:2px 8px;top:-9px}
  .pick{min-height:44px;font-size:16px;border-radius:10px;padding:8px 30px 8px 12px} /* 16px — iOS는 그보다 작은 폼 요소에 포커스하면 화면을 확대한다 (v3.27) */
  .food{grid-column:1/-1;padding:12px 12px;font-size:14px}
  .food .lbl{font-size:14px}
  .food .row{margin-bottom:8px}
  .food select{min-height:44px;font-size:16px;padding:6px 28px 6px 10px}
  .plan-f{position:fixed;left:0;right:0;bottom:0;background:var(--paper);margin:0;padding:10px 12px calc(10px + env(safe-area-inset-bottom));box-shadow:0 -6px 16px rgba(60,40,20,.12);flex-wrap:wrap;z-index:4}
  .plan-f .hint{display:none} /* 고정 바 높이를 줄인다 — 안내문이 식단 카드를 가렸다 (v3.28) */
  .plan-f .hint.warn{display:block;color:var(--red);font-weight:700} /* 초과 경고만은 보여준다 — 숨기면 잠긴 버튼의 이유를 알 수 없다 (v3.32) */
  .plan-f .btn.primary{flex:1;min-height:50px;font-size:17px}

  /* 계획 단계의 정보 우선순위 — 주인공은 먼저 보여주되, 현재 할 일인 계획을 지난주 이야기·상세 상태보다 앞에 둔다. */
  .stage[data-phase="plan"] .mid,.stage[data-phase="plan"] .dogpane{display:contents}
  .stage[data-phase="plan"] .scene{grid-row:2;background:linear-gradient(#f9f1e2,#efe2cc);border-bottom:1px solid var(--line)}
  .stage[data-phase="plan"]>.plan{grid-row:3;padding-bottom:14px}
  .stage[data-phase="plan"] .story{grid-row:4}
  .stage[data-phase="plan"] .stats{grid-row:5;padding-bottom:calc(76px + env(safe-area-inset-bottom))}

  /* 오버레이 — 화면에 고정. 컨디션 이벤트는 바텀시트, 나머지는 중앙 */
  .overlay{position:fixed;align-items:flex-end}
  .modal{width:100%;border-radius:16px 16px 0 0;max-height:85vh;max-height:85dvh}
  .modal .mb{padding:16px 16px calc(16px + env(safe-area-inset-bottom))}
  .modal h2{font-size:17px}
  .choice{padding:14px 12px;gap:10px;flex-wrap:wrap}
  .choice .txt{font-size:15px;min-width:0;flex:1 1 60%}
  .choice .eff{width:100%;text-align:left;font-size:13px;padding-left:34px}
  .monthly,.album-overlay{position:fixed;align-items:stretch}
  /* 오버레이 카드는 화면을 꽉 채우는 한 장짜리 시트 — 안쪽 max-height 스크롤(중첩 스크롤)은 터치에서 잘 안 잡히고 뒤 화면이 같이 밀린다 (v3.28) */
  .monthly .card,.album-card{max-height:none;width:100%;border-radius:0;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding-bottom:calc(16px + env(safe-area-inset-bottom))}
  .modal .mb{overscroll-behavior:contain;-webkit-overflow-scrolling:touch}
  .modal .mb .event-scene{width:calc(100% + 32px);max-height:200px;margin:-16px -16px 14px} /* 모바일 패딩과 정확히 맞춰 가로 스크롤 없이 장면을 꽉 채운다 */
  body.lock{overflow:hidden}
  /* 엔딩·타이틀·생성·프롤로그 — 카드 안쪽 스크롤 대신 페이지 스크롤 */
  .ending-card{max-height:none;overflow:visible;width:100%;border-radius:0;box-shadow:none;padding:24px 16px calc(24px + env(safe-area-inset-bottom))}
  .ending-card h1{font-size:26px}
  .title-card,.create-card{width:100%;min-height:100dvh;border-radius:0;box-shadow:none;padding:32px 20px calc(32px + env(safe-area-inset-bottom));display:flex;flex-direction:column;justify-content:center}
  #createRoot,#prologueRoot,#endingRoot{width:100%} /* 중간 래퍼가 내용 너비로 줄어 생성 카드가 가느다란 세로 띠가 되지 않게 */
  .monthly .cta .btn.primary,.modal-cta .btn.primary{width:100%;min-height:48px;font-size:16px}
  .album-grid{grid-template-columns:repeat(3,1fr)}
  .album-card{height:100dvh}
  .log-list{max-height:none;overflow:visible}
  .settings-overlay{align-items:flex-end}
  .settings-overlay .settings-card{width:100%;height:auto;min-height:0;max-height:min(70dvh,520px);border-radius:18px 18px 0 0;padding-bottom:calc(18px + env(safe-area-inset-bottom))}
  .settings-card label{min-height:44px}
  .btn{min-height:44px}
  .create-card input[type=text]{font-size:16px}
}