/* ============================================================
   가게 물품(까마귀 서신으로 산다) · 평판지 숫자 · 달력 · 경비 밤 장면 — js/systems/Shop.js · js/ui/WorldView.js
   양피지(.book)의 잉크색 변수(--bk-ink 등)를 그대로 쓴다.
   ============================================================ */

/* ── 대륙 정세: 평판지 숫자 ── */
.wl-row.has-num { grid-template-areas: "name rel word" "bar bar num"; }
.wl-num { grid-area: num; display: flex; align-items: baseline; justify-content: flex-end; gap: 4px; font-family: var(--btn-font); font-size: 12px; color: var(--bk-dim); }
.wl-num b { font-size: 14px; color: var(--bk-ink); }
.wl-d { font-style: normal; font-size: 11.5px; font-weight: 700; }
.wl-d.up { color: #9a2a1a; } .wl-d.down { color: #3d5f86; } .wl-d.flat { color: var(--bk-dim); }
.wl-rel b { font-weight: 800; }
/* ── 달력 ── */
.wc-omen { margin: 6px 0 0; padding: 4px 8px; border-left: 3px solid #6d7f96; font-style: italic; font-size: calc(13px * var(--ui, 1)); color: #3f5062; }

/* ── 밤: 경비가 문틈으로 살핀다 ── */
.nk-who.nk-guard { margin-top: 8px; color: #c8a13a; }
.nk-line.nk-guard-line { color: #e6d6ae; }

/* ============================================================
   장부 개편 — 창고 · 달력 · 대륙 지도 · 대륙 정세 · 책 속 붓 화살표 · 아래 막대 아이콘 · 첫날 까마귀 튜토리얼
   ============================================================ */

/* ── 창고 현황 (한눈에): 위에 큰 게이지, 아래에 타일 ── */
.stk2-gauge { margin: 4px 0 10px; padding: 9px 12px 10px; border: 1px solid #a8742a; border-radius: 3px; background: rgba(90, 56, 20, .09);
  box-shadow: inset 0 0 0 3px rgba(230, 214, 174, .9), inset 0 0 0 4px rgba(168, 116, 42, .4); }
.sg-top { display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 10px; font-size: calc(14px * var(--ui, 1)); color: var(--bk-dim); }
.sg-top b { font-family: var(--btn-font); font-size: calc(30px * var(--ui, 1)); line-height: 1.1; color: var(--bk-ink); font-variant-numeric: tabular-nums; }
.sg-top b { white-space: nowrap; } .sg-top b small { font-size: .5em; font-weight: 700; color: var(--bk-dim); }
.sg-top em { margin-left: auto; font-style: normal; font-weight: 800; color: #4b6a2a; }
.sg-bar { position: relative; height: 16px; margin: 4px 0 5px; border: 2px solid #4a3218; border-radius: 2px; background: rgba(106, 74, 34, .16); overflow: hidden; }
.sg-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: linear-gradient(180deg, #7aa347, #4f7a2c); box-shadow: inset 0 -3px 0 rgba(0, 0, 0, .16); }
.sg-bar::after { content: ""; position: absolute; inset: 0; background: repeating-linear-gradient(90deg, transparent 0 calc(10% - 1px), rgba(42, 28, 16, .35) calc(10% - 1px) 10%); }
.stk2-gauge.high .sg-bar i { background: linear-gradient(180deg, #e0a83c, #b7791a); } .stk2-gauge.high .sg-top em { color: #8a5a10; }
.stk2-gauge.full .sg-bar i { background: linear-gradient(180deg, #d1523a, #a3261a); } .stk2-gauge.full .sg-top em { color: #a3261a; }
.sg-sub { display: flex; justify-content: space-between; font-size: calc(13px * var(--ui, 1)); font-weight: 700; color: var(--bk-ink); }
.stk2-grp { margin: 0 0 10px; }
.stk2-grp h4 { display: flex; align-items: center; gap: 6px; margin: 0 0 5px; padding: 3px 8px; border-left: 4px solid #a8742a; background: linear-gradient(90deg, rgba(168, 116, 42, .22), transparent);
  font-family: var(--serif); font-size: calc(16px * var(--ui, 1)); font-weight: 800; letter-spacing: .04em; color: var(--bk-ink); }
.stk2-grp h4 i { font-style: normal; font-size: 1.1em; }
.stk2-grp h4 em { font-style: normal; font-size: .8em; font-weight: 600; color: var(--bk-dim); }
.stk2-grp h4 small { margin-left: auto; font-family: var(--btn-font); font-size: 12.5px; font-weight: 700; color: var(--bk-dim); }
.stk2-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(148px, 1fr)); gap: 6px; margin: 0; padding: 0; list-style: none; }
.stk2-tile { display: grid; grid-template-columns: 46px minmax(0, 1fr) auto; grid-template-areas: "ico name n" "ico vol vol"; align-items: center; gap: 0 6px; padding: 5px 7px;
  border: 1px solid var(--bk-rule); border-radius: 3px; background: rgba(255, 246, 214, .42); }
.stk2-tile .pix-ico { grid-area: ico; width: 46px; height: 46px; object-fit: contain; }
.stk2-tile .t-name { grid-area: name; min-width: 0; font-size: calc(15px * var(--ui, 1)); font-weight: 800; line-height: 1.2; color: var(--bk-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.stk2-tile .held-tag { margin-left: 4px; }
.stk2-tile .t-n { grid-area: n; font-family: var(--btn-font); font-size: calc(21px * var(--ui, 1)); line-height: 1; font-variant-numeric: tabular-nums; color: var(--bk-ink); }
.stk2-tile .t-n small { margin-left: 1px; font-size: .55em; font-weight: 700; color: var(--bk-dim); }
.stk2-tile.low .t-n { color: #a3261a; }
.stk2-tile .t-v { grid-area: vol; display: flex; align-items: center; gap: 6px; }
.stk2-tile .t-v i { display: block; height: 5px; min-width: 3px; max-width: 60%; border-radius: 1px; background: #a8742a; opacity: .75; }
.stk2-tile .t-v small { font-size: 12px; color: var(--bk-dim); white-space: nowrap; }
.stk2-empty { padding: 26px 0; text-align: center; font-size: calc(15px * var(--ui, 1)); }
.stk2-foot { margin-top: 4px; }
.stk2-note { margin: 4px 0 0; padding: 6px 8px; border: 1px dashed var(--bk-rule); border-radius: 3px; text-align: center; font-size: calc(13px * var(--ui, 1)); line-height: 1.4; color: var(--bk-dim); }
.stk2-note.done { color: #4b6a2a; font-weight: 700; }
.stk2-stash { margin: 6px 0 0; padding: 6px 10px; border: 1px dashed var(--paper-neg); font-size: calc(14px * var(--ui, 1)); color: var(--bk-ink); }
.stk2-stash b { margin-right: 6px; color: var(--paper-neg); }

/* ── 2쪽 오른쪽: 달력 자리 + 최근 사건 ── */
.wr-log { display: flex; flex-direction: column; height: 100%; }
.wr-calslot { flex: 0 0 auto; min-height: 47%; }
.wr-chron { flex: 1 1 auto; min-height: 0; }
.cal-week { margin: 4px 0 0; padding: 0; list-style: none; }
.cal-week li { display: grid; grid-template-columns: 44px minmax(0, 1fr); gap: 8px; align-items: center; min-height: 34px; padding: 3px 4px; border-bottom: 1px dotted var(--bk-rule); font-size: calc(13.5px * var(--ui, 1)); line-height: 1.35; }
.cal-d { display: flex; flex-direction: column; align-items: center; justify-content: center; width: 42px; padding: 2px 0 1px; border: 1px solid var(--bk-rule); border-radius: 3px; background: rgba(255, 246, 214, .55); font-style: normal; }
.cal-d b { font-family: var(--btn-font); font-size: 17px; line-height: 1.05; color: var(--bk-ink); }
.cal-d small { font-size: 10.5px; line-height: 1; color: var(--bk-dim); }
.cal-week li.now .cal-d { background: #c8981f; border-color: #6a4a12; } .cal-week li.now .cal-d b, .cal-week li.now .cal-d small { color: #2a1c10; }
.cal-week li.has { background: linear-gradient(90deg, rgba(200, 152, 31, .16), transparent 70%); }
.cal-ev b { color: var(--bk-ink); } .cal-ev small { color: var(--bk-dim); }
.cal-none { color: var(--bk-dim); opacity: .6; }
.wr-chron .wc-list li { font-size: calc(14px * var(--ui, 1)); }

/* ── 3쪽: 대륙 지도 (쪽을 꽉 채운다) ── */
.bk-page.bk-map .bk-in { display: flex; flex-direction: column; }
.wm-page { display: flex; flex-direction: column; flex: 1 1 auto; min-height: 0; }
.wm-page .bk-title { flex: none; margin-bottom: 4px; }
.wm-page .wm { flex: 1 1 auto; min-height: 0; width: 100%; height: 0; }
.wm-sea { fill: #b4c2b6; fill-opacity: .42; }
.wm-frame { fill: none !important; stroke: #2a1c10; stroke-width: 2.4 !important; opacity: .9 !important; }
.wm-frame2 { fill: none; stroke: #2a1c10; stroke-width: .8; opacity: .55; }
.wm-title { font-family: var(--serif); font-size: 17px; font-weight: 900; letter-spacing: .3em; fill: #2a1c10; }
.wm-name { font-size: 13.5px !important; stroke-width: 3.6px !important; }
.wm-glyph { font-size: 14px !important; }
.wm-tag { font-size: 11.5px !important; }
.wm-flabel { font-size: 12.5px !important; }
.wm-index { flex: none; padding-top: 5px; }
.wm-idx-h { display: block; margin: 5px 0 3px; font-family: var(--serif); font-size: calc(14.5px * var(--ui, 1)); font-weight: 800; letter-spacing: .05em; color: var(--bk-ink); }
.wm-legend { font-size: calc(14.5px * var(--ui, 1)) !important; justify-content: flex-start !important; gap: 4px 14px !important; color: var(--bk-ink) !important; }
.wm-legend i { width: 1em !important; height: 1em !important; margin-right: 5px !important; }
.wm-fronts { text-align: left !important; font-size: calc(15px * var(--ui, 1)) !important; line-height: 1.5; }
.wm-fronts li i { font-style: normal; margin-right: 6px; }
.wm-quiet { text-align: left !important; font-size: calc(14px * var(--ui, 1)) !important; }

/* ── 4쪽: 대륙 정세 (넘치면 이 쪽 안에서 스크롤) ── */
.bk-page.bk-intel .bk-in { display: flex; flex-direction: column; }
.wl-scroll { flex: 1 1 auto; min-height: 0; overflow-y: auto !important; overflow-x: hidden; padding-right: 4px; overscroll-behavior: contain; scrollbar-width: thin; scrollbar-color: rgba(106, 74, 34, .6) transparent; }
.wl-scroll::-webkit-scrollbar { width: 8px; } .wl-scroll::-webkit-scrollbar-thumb { background: rgba(106, 74, 34, .55); border-radius: 4px; }
.wi-box { flex: none; margin: 4px 0 6px; padding: 4px 10px 8px; border: 1px solid #a8742a; border-radius: 3px; background: rgba(90, 56, 20, .09); box-shadow: inset 0 0 0 3px rgba(230, 214, 174, .9), inset 0 0 0 4px rgba(168, 116, 42, .4); }
.wi-box .bk-h { margin-top: 4px; }
.wi-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.wi-cell { display: flex; flex-direction: column; align-items: center; padding: 4px 2px; font-size: calc(13.5px * var(--ui, 1)); color: var(--bk-dim); }
.wi-cell b { font-family: var(--btn-font); font-size: calc(28px * var(--ui, 1)); line-height: 1.1; color: var(--bk-ink); }
.wi-cell .wl-d { font-size: 16px; }

/* ── 장부 쪽 아래 여백: 화살표는 책 밖 아래 막대(.pg-bar)에 있으니 책 안은 비워 두지 않는다 ── */
@media (min-width: 760px) and (min-aspect-ratio: 1/1) {
  .bk-no { bottom: 12px !important; }
}

/* ── 첫날 밤 까마귀 튜토리얼 ── */
.closing-note { margin: 8px 0 0; padding: 6px 10px; border-left: 3px solid #4b6a2a; background: rgba(120, 150, 80, .14); font-size: calc(14px * var(--ui, 1)); line-height: 1.45; }
.crow-tut { position: absolute; inset: 0; z-index: 60; display: grid; place-items: center; padding: 14px; background: rgba(8, 5, 3, .78); animation: emFade .3s ease-out both; }
.ct-card { --bk-ink: #2a1c10; --bk-dim: #594530; --bk-rule: rgba(106, 74, 34, .5); width: min(560px, 100%); max-height: 100%; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding: 18px 22px 16px;
  color: var(--bk-ink); font-family: var(--serif); word-break: keep-all; border-radius: 4px;
  background: radial-gradient(ellipse at 50% 0, rgba(255, 246, 214, .5), transparent 70%), url(../assets/ui/kit/paper_tile.png) 0 0 / 256px 256px, #e6d6ae; background-blend-mode: normal, multiply;
  box-shadow: inset 0 0 0 3px rgba(230, 214, 174, .9), inset 0 0 0 4px rgba(168, 116, 42, .55), 0 18px 44px rgba(0, 0, 0, .7); }
.ct-from { display: flex; align-items: center; gap: 8px; }
.ct-crow { font-size: 30px; line-height: 1; }
.ct-from small { font-family: var(--btn-font); font-size: 12.5px; font-weight: 700; letter-spacing: .05em; color: var(--bk-dim); }
.ct-card h3 { margin: 0; padding-bottom: 6px; border-bottom: 3px double var(--bk-rule); font-size: calc(22px * var(--ui, 1)); letter-spacing: .05em; color: var(--bk-ink); }
.ct-body { display: flex; flex-direction: column; gap: 8px; font-size: calc(15.5px * var(--ui, 1)); line-height: 1.6; }
.ct-body p { margin: 0; }
.ct-fine { padding: 6px 10px; border-left: 3px solid #a8742a; background: rgba(168, 116, 42, .1); font-size: .93em; }
.ct-list { margin: 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 5px; }
.ct-list li { display: grid; grid-template-columns: 30px minmax(0, 1fr); gap: 8px; align-items: start; padding: 4px 2px; border-bottom: 1px dotted var(--bk-rule); }
.ct-list li i { font-style: normal; font-size: 22px; text-align: center; line-height: 1.3; }
.ct-list li em { font-style: normal; margin-left: 4px; font-family: var(--btn-font); font-weight: 800; color: #8a5a10; }
.ct-list li small { display: block; font-size: .86em; line-height: 1.45; color: var(--bk-dim); }
.ct-list.goods { font-size: .95em; gap: 3px; }
.ct-ask { display: flex; align-items: center; gap: 14px; padding: 12px 14px; border: 1px solid #a8742a; background: rgba(168, 116, 42, .12); }
.ct-ask i { font-style: normal; font-size: 40px; }
.ct-ask p { margin: 0; font-size: 1.05em; line-height: 1.6; }
.ct-dots { display: flex; justify-content: center; gap: 7px; }
.ct-dots i { width: 8px; height: 8px; border-radius: 50%; border: 1px solid #6a4a22; background: transparent; }
.ct-dots i.on { background: #a8742a; }
.ct-btns { display: flex; gap: 10px; }
.ct-btns .pbtn { min-height: 48px; }
.ct-btns .pbtn.grow { flex: 1 1 auto; }
.ct-btns .pbtn b { margin-left: 6px; }
.crow-tut .pbtn.ghost { color: #3a250c; border-color: #6a4a22; background: rgba(255, 246, 214, .4); }
@media (max-width: 520px) { .stk2-tiles { grid-template-columns: 1fr; } .stk2-tile .t-name { white-space: normal; } }
/* 주문 취소 안내는 레이아웃에 자리를 차지하지 않고 책 위에 뜬다 (장부가 늘었다 줄었다 하지 않게) */
#stage[data-phase] #ui > .cart-warn { position: absolute; left: 50%; bottom: 100px; transform: translateX(-50%); margin: 0; z-index: 6; white-space: nowrap; }

/* ============================================================
   아침 내비게이션 — 서신 · 신문 · 장부 · 도매상은 모두 같은 자리의 붓 화살표로 넘긴다 (버튼 · 쪽 표시줄 없음)
   UIManager pageBar() · pageSlide() · streetPage() · morningLetters()
   ============================================================ */
/* 아래 막대: 높이 고정 — 쪽이 바뀌어도 책이 늘었다 줄었다 하지 않는다 */
.bottom-bar.page-bar.pg-bar { flex: none; position: relative; height: 94px; min-height: 94px; box-sizing: border-box; padding: 0; gap: 0; }
.pg-arw { position: absolute; z-index: 4; bottom: 6px; width: 132px; height: 85px; padding: 0; border: 0; background: none; cursor: pointer;
  filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .6)); transition: transform .16s; }
.pg-arw.prev { left: 22px; } .pg-arw.next { right: 22px; }
.pg-arw .brush-arw { position: absolute; inset: 0; width: 100%; height: 100%; overflow: visible; pointer-events: none; }
.pg-arw.prev .brush-arw { transform: scaleX(-1); }
.pg-arw:hover { transform: translateY(-2px) scale(1.07); } .pg-arw:active { transform: translateY(1px) scale(.97); }
.pg-arw:focus-visible { outline: 2px solid #ffe08a; outline-offset: 2px; border-radius: 6px; }
@media not all and ((min-width: 760px) and (min-aspect-ratio: 1/1)) {
  .bottom-bar.page-bar.pg-bar { height: 80px; min-height: 80px; }
  .pg-arw { width: 108px; height: 70px; bottom: 5px; }
  .pg-arw.prev { left: 14px; } .pg-arw.next { right: 14px; }
  #stage[data-phase] #ui > .cart-warn { bottom: 86px; }
}

/* 하루 시작 · 문 열기 — 틀 없이 촛불처럼 깜박이는 글자만 (거리의 유일한 버튼 / 장부를 덮은 뒤 나오는 버튼) */
.street-start { position: absolute; left: 0; right: 0; bottom: 56px; z-index: 2; display: flex; justify-content: flex-end; padding-right: 18px; pointer-events: none; }
.street-scene:not(.go) ~ .street-start { opacity: 0; visibility: hidden; }
.street-scene.go ~ .street-start { transition: opacity 450ms ease 800ms, visibility 0s linear 800ms; }
.day-start, .open-door { cursor: pointer; background: none; border: 0; padding: 10px 22px; text-align: center; font-family: 'Diphylleia', var(--serif); color: #ffdf9a; line-height: 1.15;
  text-shadow: 0 0 2px #1a0a02, 0 2px 3px #1a0a02, 0 0 10px rgba(30, 12, 2, .9), 0 0 18px rgba(255, 140, 40, .5); animation: candleText 3s ease-in-out infinite; transition: color .2s, transform .16s; }
.day-start { pointer-events: auto; }
.day-start b, .open-door b { display: block; font-weight: 400; font-size: calc(38px * var(--ui, 1)); letter-spacing: .3em; text-indent: .3em; -webkit-text-stroke: .9px currentColor; paint-order: stroke fill; }
.day-start small, .open-door small { display: block; margin-top: 4px; font-family: 'IM Fell English SC', var(--serif); font-size: calc(13px * var(--ui, 1)); letter-spacing: .4em; text-indent: .4em; color: #d1a55c; text-shadow: 0 1px 3px #000; -webkit-text-stroke: 0; }
.day-start:hover, .open-door:hover { color: #fff4cf; animation: none; transform: translateY(-2px);
  text-shadow: 0 0 2px #1a0a02, 0 2px 3px #1a0a02, 0 0 12px rgba(255, 200, 100, 1), 0 0 26px rgba(255, 150, 50, .85); }
.day-start:active, .open-door:active { transform: translateY(1px); }
.day-start:focus-visible, .open-door:focus-visible { outline: 1px dashed #ffe08a; outline-offset: 6px; }
.open-door { position: absolute; z-index: 5; left: auto; right: 98px; bottom: 56px; translate: 0 0; white-space: nowrap; animation: openDoorIn .45s cubic-bezier(.2, .8, .3, 1) both, candleText 3s ease-in-out .5s infinite; }
@keyframes candleText { 0%, 100% { opacity: .92; } 30% { opacity: 1; } 55% { opacity: .82; } 75% { opacity: .98; } }
@keyframes openDoorIn { from { opacity: 0; transform: translateY(16px); } }
@media not all and ((min-width: 760px) and (min-aspect-ratio: 1/1)) {
  /* 좁은 화면: 왼쪽 아래 이전 화살표와 겹치지 않게 오른쪽 아래에 */
  .open-door { left: auto; right: 36px; bottom: 50px; translate: 0 0; padding: 6px 12px; }
  .open-door b { font-size: 28px; }
}
@media (prefers-reduced-motion: reduce) { .day-start, .open-door { animation: none; } }

/* ── 서신: 두 쪽 펼침 — 왼쪽 뜯어 연 봉투, 오른쪽 편지 전문 ── */
.lt-spread { flex: 1 1 auto; min-height: 0; display: flex; gap: 26px; align-items: stretch; margin: 0 auto; padding: 8px 10px 6px; box-sizing: border-box; width: 100%; }
@media (min-width: 760px) and (min-aspect-ratio: 1/1) { #stage[data-phase="morning"] #ui > .lt-spread { width: calc(100% - 56px); max-width: none; padding: 8px 0 12px; } }
.lt-page { min-width: 0; min-height: 0; }
.lt-env-page { flex: 1 1 0; display: flex; align-items: center; justify-content: center; }
.lt-paper-page { flex: 1.2 1 0; overflow-y: auto; overflow-x: hidden; overscroll-behavior: contain; padding: 4px 6px 6px; scrollbar-width: thin; scrollbar-color: rgba(106, 74, 34, .6) transparent; }
.lt-paper-page .letter { min-height: calc(100% - 4px); padding: 26px 30px 22px; box-sizing: border-box; transform: rotate(.35deg); box-shadow: 0 14px 28px rgba(0, 0, 0, .55), 0 2px 0 rgba(0, 0, 0, .35); }
.lt-paper-page .letter h4 { font-size: calc(21px * var(--ui, 1)); margin: 8px 0 12px; }
.lt-paper-page .letter > p { font-size: calc(16.5px * var(--ui, 1)); }
.lt-paper-page .mail-flash { margin: 0 0 8px; }
.env-wrap { width: min(100%, 400px, 56vh); display: flex; flex-direction: column; align-items: center; gap: 16px; padding-top: 32%; }
.env { position: relative; width: 100%; aspect-ratio: 10 / 6.6; border: 2px solid #7a5a2e; border-radius: 3px; transform: rotate(-1.4deg);
  background: linear-gradient(180deg, rgba(255, 246, 214, .18), transparent 50%), url(../assets/ui/kit/paper_tile.png) 0 0 / 256px 256px, #d6c08c; background-blend-mode: normal, multiply;
  filter: drop-shadow(0 12px 14px rgba(0, 0, 0, .55)); }
.env::before { content: ''; position: absolute; left: 0; right: 0; top: 0; height: 34%; background: linear-gradient(180deg, rgba(70, 44, 16, .55), transparent); pointer-events: none; }
.env-flap { position: absolute; left: -2px; right: -2px; bottom: calc(100% - 1px); height: 48%; clip-path: polygon(0 100%, 50% 0, 100% 100%);
  background: linear-gradient(180deg, rgba(60, 38, 14, .25), transparent 70%), url(../assets/ui/kit/paper_tile.png) 0 0 / 256px 256px, #b89a62; background-blend-mode: normal, multiply; }
.env-front { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.env-front path { stroke: rgba(90, 58, 24, .5); stroke-width: 1.3; vector-effect: non-scaling-stroke; }
.env-seal { position: absolute; left: 50%; top: -40%; width: 20%; aspect-ratio: 5 / 4; translate: -50% 0; rotate: 8deg; z-index: 2; background: url(../assets/ui/kit/seal_broken.png) center / contain no-repeat; image-rendering: pixelated; filter: drop-shadow(0 2px 1px rgba(0, 0, 0, .5)); }
.env-addr { position: absolute; left: 9%; right: 9%; top: 40%; display: flex; flex-direction: column; gap: 3px; font-family: var(--serif); color: #2b1808; }
.env-addr small { font-family: var(--btn-font); font-size: calc(11px * var(--ui, 1)); font-weight: 700; letter-spacing: .14em; color: #6a4a22; }
.env-addr b { font-size: calc(21px * var(--ui, 1)); letter-spacing: .06em; }
.env-from { margin-top: 8px; display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.env-from em { font-style: normal; font-size: calc(15px * var(--ui, 1)); font-weight: 700; color: #5a3a1e; }
.env-post { position: absolute; right: 7%; top: 9%; width: 22%; aspect-ratio: 1; min-width: 56px; display: flex; flex-direction: column; align-items: center; justify-content: center; border: 2px solid rgba(120, 32, 22, .6); border-radius: 50%; rotate: -12deg; color: rgba(120, 32, 22, .78); font-family: var(--btn-font); line-height: 1.2; text-align: center; }
.env-post b { font-size: 9.5px; letter-spacing: .04em; } .env-post i { font-style: normal; font-size: 12px; font-weight: 800; }
.env.blank .env-addr { top: 44%; }
.env-count { margin: 0; padding: 4px 14px; border-radius: 3px; background: rgba(14, 9, 6, .78); border: 1px solid rgba(220, 174, 77, .5); font-family: var(--serif); font-size: calc(15px * var(--ui, 1)); letter-spacing: .06em; color: #f1e5cc; }
.env-count b { color: var(--brass-hi); font-family: var(--btn-font); }
@media not all and ((min-width: 760px) and (min-aspect-ratio: 1/1)) {
  .lt-spread { flex-direction: column; gap: 8px; padding: 6px 12px 4px; }
  .lt-env-page { flex: none; }
  .env-wrap { width: min(62%, 220px); gap: 8px; padding-top: 26%; }
  .env-addr { top: 36%; } .env-addr b { font-size: 15px; } .env-from { margin-top: 3px; } .env-from em { font-size: 12px; }
  .env-post { display: none; }
  .lt-paper-page { flex: 1 1 0; }
  .lt-paper-page .letter { padding: 18px 20px 16px; transform: none; }
}
/* 넓은 화면: 하루 시작은 다음 화살표와 같은 자리(무대 오른쪽 아래) — #ui 자식의 660px 제한을 푼다 */
#stage:not([data-phase="shop"]) #ui > .street-start { width: 100%; max-width: none; padding-right: 102px; }
/* 좁은 화면: 다음 화살표가 작아졌으니 오른쪽 여백도 줄이고, 글자가 두 줄로 꺾이지 않게 한다 (문 열기는 매우 좁을 때 이전 화살표 위로 올린다) */
@media (max-width: 480px) {
  #stage:not([data-phase="shop"]) #ui > .street-start { padding-right: 20px; }
  .day-start { padding: 8px 14px; white-space: nowrap; }
  .day-start b { font-size: 30px; }
}
@media (max-width: 340px) { .open-door { bottom: 96px; right: 20px; } }

/* ── 결말 책: 굽은 검은 화살표(장부와 같은 것) + 가죽 표지(제목 없음) ── */
.eb-arw { width: 92px; height: 60px; }
.eb-arw .brush-arw { display: block; width: 100%; height: 100%; overflow: visible; }
.eb-arw.prev .brush-arw { transform: scaleX(-1); }
@media (min-width: 760px) and (min-aspect-ratio: 1/1) { .eb-arw { width: 104px; height: 67px; top: calc(50% - 34px); } }
.eb-arw, .eb-arw:hover { color: inherit; }
.eb-arw:hover { filter: drop-shadow(0 0 6px rgba(240, 200, 110, .55)) drop-shadow(0 2px 2px rgba(0, 0, 0, .7)); transform: scale(1.06); }
.eb-cover .eb-lf.front { background: url(../assets/ui/ending_scroll/cover_leather.png) center / 100% 100% no-repeat; border-radius: 0; box-shadow: none; padding: 0; display: block; }

/* 좁은 화면(폰): 상단 표시 4칸 + ☰ 메뉴 버튼이 모두 들어가게 줄인다 — 넘치면 ☰ 가 화면 밖으로 밀려 메뉴를 열 수 없다 */
@media (max-width: 430px) {
  .hud { gap: 3px; }
  .hud .pill:not(.menu-pill):not(.mute) { font-size: 13px; padding: 0 3px; }
  .hud .menu-pill { flex: none; }
}
@media (max-width: 400px) { .hud .pill:not(.menu-pill):not(.mute) { font-size: 12.5px; padding: 0 2px; } .hud .pill .ui-ico { width: 15px; height: 15px; } .hud .menu-pill { min-width: 30px; padding: 0 4px; } }