/*
 * 아흔아홉 — 제품 화면 공통 폴리싱
 *
 * 각 화면의 오래된 인라인 스타일은 레이아웃 계약을 들고 있다. 이 파일은 그 계약을
 * 건드리지 않고 색·재질·위계·피드백만 한 겹으로 묶는다. 낮은 양피지와 마른 나무,
 * 밤은 먹빛과 오래된 황동을 쓴다. 둘의 차이는 밝기뿐이고 재료는 같다.
 */

:root {
  --ui-ink-0: #f1e6cf;
  --ui-ink-1: #d6c4a3;
  --ui-ink-2: #a89270;
  --ui-ink-3: #725d43;
  --ui-soot-0: #17110d;
  --ui-soot-1: #211812;
  --ui-soot-2: #30231a;
  --ui-soot-3: #4b3829;
  --ui-gold: #e5bd68;
  --ui-gold-hot: #f2d28d;
  --ui-moss: #8daa76;
  --ui-wound: #b45f4c;
  --ui-night: #0a0d13;
  --ui-night-lift: #141a22;
  --ui-line: rgba(214, 196, 163, .28);
  --ui-line-soft: rgba(214, 196, 163, .12);
  --ui-shadow: rgba(4, 3, 2, .64);
  --ui-fast: 120ms;
  --ui-medium: 240ms;
  --ui-slow: 520ms;
  --ui-ease: cubic-bezier(.22, .72, .24, 1);
  color-scheme: dark;
}

*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  background: var(--ui-soot-0);
}

body {
  accent-color: var(--ui-gold);
}

body::after {
  display: none;
}

button,
[role="button"],
summary,
a {
  transition:
    color var(--ui-fast) ease,
    border-color var(--ui-fast) ease,
    background-color var(--ui-fast) ease,
    box-shadow var(--ui-fast) ease,
    filter var(--ui-fast) ease,
    transform var(--ui-fast) ease;
}

button:focus-visible,
[role="button"]:focus-visible,
summary:focus-visible,
a:focus-visible {
  outline: 2px solid var(--ui-gold-hot) !important;
  outline-offset: 3px !important;
}

::selection {
  color: var(--ui-soot-0);
  background: var(--ui-gold);
}

/* ── 낮: 목장과 장부 ─────────────────────────────────────────── */

.page-day {
  background:
    radial-gradient(ellipse at 50% -8%, rgba(229,189,104,.12), transparent 48%),
    linear-gradient(180deg, #1b140f 0%, #0e0b09 100%);
}

.page-day #stage {
  animation: ui-stage-in var(--ui-slow) var(--ui-ease) both;
}

.page-day #stage::after {
  content: "";
  position: absolute;
  z-index: 4;
  inset: 0;
  border-radius: inherit;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(241,230,207,.035), transparent 26%, rgba(13,9,7,.07)),
    radial-gradient(ellipse at 50% 52%, transparent 58%, rgba(10,7,5,.18) 100%);
  box-shadow: inset 0 0 72px rgba(15,10,7,.11);
}

.page-day #dio {
  filter: saturate(.96) contrast(1.025);
}

.page-day #hud {
  z-index: 8;
  padding: clamp(8px, 1.25vw, 15px);
  background: linear-gradient(180deg, rgba(15,10,7,.72), rgba(15,10,7,.2) 64%, transparent);
}

.page-day #hud .day,
.page-day #hud .coin,
.page-day #htime,
.page-day #tally {
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.page-day #hud .day {
  min-height: 36px;
  padding: 6px 13px 6px 15px;
  color: var(--ui-ink-0);
  border-color: rgba(229,189,104,.48);
  border-radius: 2px 10px 3px 7px;
  background:
    linear-gradient(105deg, rgba(75,56,41,.96), rgba(33,24,18,.93));
  box-shadow:
    inset 0 0 0 1px rgba(241,230,207,.08),
    0 5px 18px rgba(7,5,4,.24);
  letter-spacing: .06em;
}

.page-day #hud .kind {
  color: rgba(214,196,163,.78);
  letter-spacing: .06em;
}

.page-day #htime {
  min-height: 34px;
  padding: 5px 10px;
  color: rgba(214,196,163,.76);
  border-color: rgba(214,196,163,.22);
  border-radius: 999px;
  background: rgba(28,20,15,.52);
}

.page-day #htime:hover {
  color: var(--ui-ink-0);
  border-color: rgba(229,189,104,.58);
  background: rgba(50,36,27,.76);
}

.page-day #htime::before {
  border-color: var(--ui-gold);
  background: rgba(229,189,104,.22);
  box-shadow: 0 0 10px rgba(229,189,104,.3);
}

.page-day #hud .coin {
  min-height: 36px;
  padding: 6px 13px;
  border-color: rgba(229,189,104,.38);
  border-radius: 12px 12px 16px 16px;
  background: linear-gradient(145deg, rgba(70,51,37,.92), rgba(28,20,15,.96));
  box-shadow:
    inset 0 -3px rgba(9,6,4,.28),
    0 5px 18px rgba(7,5,4,.24);
}

.page-day #hud .coin::before,
.page-day #hud .coin b {
  color: var(--ui-gold-hot);
}

.page-day #tally {
  min-height: 34px;
  padding: 6px 9px;
  border: 1px solid rgba(214,196,163,.19);
  border-radius: 999px;
  background: rgba(28,20,15,.46);
}

.page-day #tally:hover {
  border-color: rgba(229,189,104,.45);
  background: rgba(50,36,27,.7);
}

.page-day #tally i.here {
  background: var(--ui-gold-hot);
  box-shadow: 0 0 9px rgba(229,189,104,.75);
}

.page-day #cutbar {
  left: 50%;
  right: auto;
  bottom: clamp(14px, 3.1vw, 42px);
  width: min(760px, calc(100% - 32px));
  transform: translateX(-50%);
  align-items: center;
  padding: 11px 15px;
  border: 1px solid rgba(214,196,163,.2);
  border-radius: 4px;
  background:
    linear-gradient(90deg, transparent, rgba(15,10,7,.74) 7%, rgba(15,10,7,.8) 93%, transparent);
  box-shadow: 0 12px 34px rgba(5,3,2,.2);
  backdrop-filter: blur(5px);
  -webkit-backdrop-filter: blur(5px);
}

.page-day #cuthint {
  color: rgba(241,230,207,.68);
  font-size: 12px;
  letter-spacing: .08em;
}

.page-day #cutnote {
  color: var(--ui-ink-1);
  font-size: 12px;
}

.page-day #cutskip {
  color: var(--ui-ink-1);
  border-color: rgba(214,196,163,.3);
  border-radius: 3px;
  background: rgba(30,21,15,.72);
}

.page-day #cutskip:hover {
  color: var(--ui-ink-0);
  border-color: rgba(229,189,104,.6);
  background: rgba(58,42,30,.82);
}

.page-day #objs button::before {
  border-color: rgba(229,189,104,.42);
  box-shadow:
    inset 0 0 0 1px rgba(16,11,8,.26),
    0 5px 14px rgba(8,5,3,.25);
}

.page-day #objs button::after {
  color: var(--ui-ink-0);
  border-color: rgba(229,189,104,.32);
  background: rgba(23,16,12,.84);
  box-shadow: 0 4px 14px rgba(5,3,2,.25);
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
}

.page-day #tip {
  color: var(--ui-ink-0);
  border-color: rgba(229,189,104,.36);
  background: rgba(28,20,15,.94);
  box-shadow: 0 7px 20px rgba(5,3,2,.36);
}

.page-day #book {
  background:
    radial-gradient(ellipse at 50% 42%, rgba(28,20,15,.18), rgba(8,6,4,.68));
  backdrop-filter: blur(4px);
  -webkit-backdrop-filter: blur(4px);
  animation: ui-veil-in var(--ui-medium) ease-out both;
}

.page-day .bk {
  border-color: rgba(83,62,43,.72);
  border-radius: 5px 8px 6px 4px;
  background:
    linear-gradient(90deg, rgba(101,77,51,.08), transparent 7% 93%, rgba(101,77,51,.08)),
    #d7c39d;
  box-shadow:
    0 24px 70px rgba(5,3,2,.62),
    0 0 0 1px rgba(229,205,164,.1),
    inset 0 0 46px rgba(84,59,34,.16);
  animation: ui-book-in 320ms var(--ui-ease) both;
}

.page-day .bk nav {
  border-bottom-color: rgba(31,22,16,.82);
  background:
    linear-gradient(rgba(229,205,164,.055), transparent),
    #3a2a20;
  box-shadow: inset 0 -1px rgba(229,205,164,.08);
}

.page-day .bk nav button {
  color: #cfb991;
  border-radius: 3px 3px 0 0;
}

.page-day .bk nav button:hover,
.page-day .bk nav button:focus-visible,
.page-day .bk nav button.x:hover {
  color: #f3e5c8;
  background: rgba(229,205,164,.1);
}

.page-day .bk nav button.x {
  color: #ad9878;
}

.page-day .bk nav button.on {
  color: #251b14;
  background: linear-gradient(#ead8b5, #d2bc92);
  box-shadow: 0 2px 0 #8b6b48, inset 0 1px rgba(255,255,255,.5);
}

.page-day #bkbody {
  color: #33251b;
  scrollbar-color: rgba(75,56,41,.45) transparent;
}

.page-day #bkbody h3 {
  padding-bottom: 8px;
  border-bottom: 1px solid rgba(75,56,41,.2);
  color: #34261c;
  font-size: 15px;
  letter-spacing: .04em;
}

.page-day #bkbody h4,
.page-day #bkbody .note,
.page-day #bkbody .pv,
.page-day #bkbody .pg b {
  color: #5e4733;
}

.page-day #bkbody .mp i {
  color: #493724;
  border: 1px solid rgba(73,55,36,.16);
  background: #bda77e;
  font-weight: 700;
}

.page-day .gcard {
  border-radius: 4px;
  box-shadow: inset 0 1px rgba(255,255,255,.18);
}

.page-day .gcard.buyable:hover,
.page-day .gcard.buyable:focus-visible {
  transform: translateY(-2px);
  box-shadow:
    inset 0 0 0 1px rgba(85,115,69,.32),
    0 6px 15px rgba(65,44,25,.14);
}

.page-day .bk footer {
  border-top-color: rgba(75,56,41,.18);
  background: rgba(94,70,46,.055);
}

.page-day .bk footer .note {
  color: #5e4733;
}

.page-day .bk footer button.main {
  border-radius: 3px;
  background: linear-gradient(105deg, #56402e, #2d2119);
  box-shadow: inset 0 1px rgba(241,230,207,.14), 3px 3px 0 rgba(36,26,18,.38);
}

/* 낮의 장부는 한 장짜리 설정창이 아니라, 탭마다 쓰임이 다른 실제 기록물이다. */
.page-day .bk {
  background:
    linear-gradient(90deg, rgba(73,51,31,.16), transparent 7% 92%, rgba(73,51,31,.14)),
    linear-gradient(rgba(205,181,137,.18), rgba(104,76,44,.09)),
    #d7c39d;
}

.page-day .bk[data-tab="trough"],
.page-day .bk[data-tab="store"] {
  height: min(440px, calc(100% - 76px));
  max-height: min(440px, calc(100% - 76px));
}

.page-day .bk[data-tab="flock"] {
  height: min(460px, calc(100% - 76px));
  max-height: min(460px, calc(100% - 76px));
}

.page-day .bk[data-tab="dogs"] {
  height: min(500px, calc(100% - 76px));
  max-height: min(500px, calc(100% - 76px));
}

.page-day .bk[data-tab="diary"] {
  height: min(530px, calc(100% - 46px));
  max-height: min(530px, calc(100% - 46px));
}

.page-day #bkbody {
  padding: 24px 30px 30px;
  background:
    linear-gradient(90deg, rgba(78,55,32,.04), transparent 9% 93%, rgba(78,55,32,.045)),
    linear-gradient(rgba(255,250,235,.12), rgba(118,84,48,.025));
}

.page-day #bkbody::before {
  content: "아침 장부";
  display: flex;
  align-items: center;
  min-height: 25px;
  max-width: 700px;
  margin: 0 0 18px;
  color: #6f553d;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .14em;
}

.page-day #bkbody::before {
  background:
    linear-gradient(90deg, rgba(90,65,40,.38), rgba(90,65,40,.08) 72%, transparent 72%)
    left bottom / 100% 1px no-repeat;
}

.page-day #bkbody[data-tab="trough"]::before { content: "젖틀 정산 · 밤이 남긴 수치"; }
.page-day #bkbody[data-tab="flock"]::before { content: "무리 장부 · 이름과 익명의 수"; }
.page-day #bkbody[data-tab="dogs"]::before { content: "목양견 배치 · 오늘 밤의 순서"; }
.page-day #bkbody[data-tab="store"]::before { content: "창고 선반 · 지금 가진 것"; }
.page-day #bkbody[data-tab="merchant"]::before { content: "행상인의 수레 · 어디서 멈출 것인가"; }
.page-day #bkbody[data-tab="diary"]::before { content: "오늘의 기록 · 지나간 밤의 문장"; }
.page-day #bkbody[data-tab="journey"]::before { content: "앞장 지도 · 마흔 밤의 흔적"; }

.page-day #bkbody > :not(.grid6):not(.mp) {
  max-width: 700px;
}

.page-day #bkbody .big {
  display: flex;
  gap: 12px;
  align-items: baseline;
  width: fit-content;
  min-width: 250px;
  margin: 0 0 16px;
  padding: 13px 17px 12px;
  color: #2d2118;
  font-size: 34px;
  font-variant-numeric: tabular-nums;
  border-left: 4px solid #80613e;
  background: linear-gradient(90deg, rgba(116,86,50,.12), transparent);
}

.page-day #bkbody .big small {
  color: #6a5038;
  font-size: 11px;
  letter-spacing: .025em;
}

.page-day #bkbody .note,
.page-day #bkbody .act,
.page-day #bkbody .warn {
  max-width: 700px;
  padding: 8px 11px 8px 13px;
  border-left: 2px solid rgba(94,70,46,.34);
  background: linear-gradient(90deg, rgba(109,80,45,.07), transparent 86%);
}

.page-day #bkbody .act {
  color: #425d37;
  border-left-color: #6c8658;
  background: linear-gradient(90deg, rgba(91,120,70,.11), transparent 86%);
}

.page-day #bkbody .warn {
  color: #8c493d;
  border-left-color: #9d5a4b;
  background: linear-gradient(90deg, rgba(157,90,75,.1), transparent 86%);
}

/* 젖틀: 표를 세 개의 손기록 칸으로 바꿔 숫자의 위계를 먼저 읽힌다. */
.page-day #bkbody[data-tab="trough"] table {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 9px;
  max-width: 700px;
  border-collapse: separate;
}

.page-day #bkbody[data-tab="trough"] tbody { display: contents; }

.page-day #bkbody[data-tab="trough"] tr {
  display: flex;
  min-height: 112px;
  padding: 14px 15px 12px;
  flex-direction: column;
  justify-content: space-between;
  border: 1px solid rgba(81,58,36,.25);
  border-radius: 2px 5px 3px 2px;
  background: rgba(239,225,193,.28);
  box-shadow: 2px 3px 0 rgba(75,52,31,.08), inset 0 1px rgba(255,255,255,.25);
}

.page-day #bkbody[data-tab="trough"] tr:nth-child(2) { transform: translateY(3px); }
.page-day #bkbody[data-tab="trough"] tr:nth-child(3) { transform: translateY(1px); }

.page-day #bkbody[data-tab="trough"] td {
  display: block;
  width: auto;
  padding: 0;
  border: 0;
}

.page-day #bkbody[data-tab="trough"] td:first-child {
  width: auto;
  color: #72583f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
}

.page-day #bkbody[data-tab="trough"] td:last-child {
  color: #2c2118;
  font-size: 27px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

/* 무리·개·창고: 원시 목록 대신 장부의 개별 행처럼 묶는다. */
.page-day #bkbody[data-tab="flock"] > ul,
.page-day #bkbody[data-tab="store"] > ul,
.page-day #bkbody[data-tab="dogs"] > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 7px;
  max-width: 700px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-day #bkbody[data-tab="flock"] > ul > li,
.page-day #bkbody[data-tab="store"] > ul > li,
.page-day #bkbody[data-tab="dogs"] > ul > li {
  position: relative;
  min-height: 45px;
  margin: 0;
  padding: 9px 12px 8px 22px;
  border-bottom: 1px solid rgba(84,61,38,.2);
  background: rgba(240,226,194,.16);
}

.page-day #bkbody[data-tab="flock"] > ul > li::before,
.page-day #bkbody[data-tab="store"] > ul > li::before,
.page-day #bkbody[data-tab="dogs"] > ul > li::before {
  content: "";
  position: absolute;
  left: 9px;
  top: 15px;
  width: 5px;
  height: 5px;
  border: 1px solid rgba(89,64,38,.48);
  border-radius: 50%;
}

.page-day #bkbody[data-tab="flock"] li small,
.page-day #bkbody[data-tab="store"] li small,
.page-day #bkbody[data-tab="dogs"] li small {
  display: block;
  margin-top: 2px;
  color: #745a41;
  line-height: 1.45;
}

.page-day #bkbody[data-tab="dogs"] > ul:first-of-type::before,
.page-day #bkbody[data-tab="dogs"] > ul:last-of-type::before {
  grid-column: 1 / -1;
  color: #72583f;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .08em;
}

.page-day #bkbody[data-tab="dogs"] > ul:first-of-type::before { content: "들에 나가는 개"; }
.page-day #bkbody[data-tab="dogs"] > ul:last-of-type::before { content: "공격 우선순위"; }

.page-day #bkbody[data-tab="dogs"] > ul:last-of-type {
  margin-top: 8px;
}

.page-day #bkbody[data-tab="dogs"] a {
  color: #3f5736;
  text-decoration-color: rgba(63,87,54,.45);
  text-underline-offset: 3px;
}

/* 상인: 공란은 미완성 자리가 아니라, 수레에 눌러 찍은 여섯 분류 표식이다. */
.page-day #bkbody[data-tab="merchant"]::before { max-width: none; }

.page-day #bkbody[data-tab="merchant"] .grid6 {
  gap: 10px;
  margin-top: 12px;
}

.page-day #bkbody[data-tab="merchant"] .gcard {
  gap: 5px;
  padding: 10px 11px 11px;
  border-color: rgba(76,53,31,.27);
  background: rgba(225,206,166,.26);
  box-shadow: 2px 3px 0 rgba(76,53,31,.09), inset 0 1px rgba(255,255,255,.24);
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi {
  position: relative;
  overflow: hidden;
  aspect-ratio: 2.2 / 1;
  border: 0;
  border-top: 1px solid rgba(80,56,33,.17);
  border-bottom: 1px solid rgba(80,56,33,.17);
  border-radius: 0;
  background:
    radial-gradient(circle at 50% 46%, rgba(106,76,43,.1), transparent 58%),
    linear-gradient(90deg, transparent, rgba(255,248,224,.2), transparent);
  box-shadow: none;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi::before {
  content: "물";
  position: absolute;
  inset: 0;
  display: grid;
  place-items: center;
  color: rgba(69,49,30,.48);
  font-family: "Batang", "Malgun Gothic", serif;
  font-size: 24px;
  font-weight: 800;
  text-shadow: 1px 1px rgba(255,245,216,.45);
  transform: rotate(-2deg);
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="flock"]::before { content: "양"; }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="dog"]::before { content: "개"; }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="train"]::before { content: "련"; }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="heal"]::before { content: "약"; }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="vigor"]::before { content: "힘"; }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="david"]::before { content: "돌"; }
.page-day #bkbody[data-tab="merchant"] .gcard .gi.has-art::before { display: none; }

.page-day #bkbody[data-tab="merchant"] .gcard .gh {
  padding-bottom: 3px;
  border-bottom: 1px dotted rgba(79,57,35,.24);
}

.page-day #bkbody[data-tab="merchant"] .gcard .gbar {
  height: 4px;
  margin-top: auto;
}

/* 일기: 문장이 단순 목록이 아니라 날짜가 쌓이는 기록처럼 보인다. */
.page-day #bkbody .diary {
  display: grid;
  gap: 8px;
  max-width: 700px;
  margin: 0 0 18px;
  padding: 0;
  counter-reset: diary-line;
  list-style: none;
}

.page-day #bkbody .diary li {
  position: relative;
  min-height: 44px;
  margin: 0;
  padding: 10px 14px 9px 42px;
  border-bottom: 1px solid rgba(80,58,36,.2);
  background: linear-gradient(90deg, rgba(239,224,191,.2), transparent);
  counter-increment: diary-line;
}

.page-day #bkbody .diary li::before {
  content: counter(diary-line, decimal-leading-zero);
  position: absolute;
  left: 11px;
  top: 9px;
  color: #886947;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .04em;
}

.page-day #bkbody .pg {
  max-width: 700px;
  margin-bottom: 9px;
  padding: 8px 12px 8px 14px;
  background: rgba(237,221,188,.16);
}

/* 여정: 지도와 세 개의 판독값을 같은 장부 문법으로 묶는다. */
.page-day #bkbody[data-tab="journey"] h4 {
  max-width: 700px;
  margin-top: 18px;
  padding-bottom: 5px;
  border-bottom: 1px dotted rgba(81,59,37,.28);
}

.page-day #bkbody[data-tab="journey"] h4:first-of-type { margin-top: 0; }

.page-day #bkbody[data-tab="journey"] .mp {
  gap: 6px;
  max-width: 560px;
  margin: 11px 0 13px;
}

.page-day #bkbody[data-tab="journey"] .mp i {
  background: rgba(174,148,101,.5);
  box-shadow: inset 0 1px rgba(255,250,232,.28);
}

.page-day #bkbody[data-tab="journey"] .pv {
  margin: 0;
  padding: 5px 0 1px;
  color: #5f4934;
}

/* ?debug 전용 진단실은 문서 흐름을 밀지 않고, 독립된 개발 서랍으로 연다. */
.page-day #diagnostics:not([hidden]) {
  position: fixed;
  z-index: 80;
  top: 62px;
  right: 12px;
  width: min(420px, calc(100vw - 24px));
  max-height: calc(100dvh - 74px);
  margin: 0;
  overflow: auto;
  border-style: solid;
  background: rgba(20,18,23,.95);
  box-shadow: 0 16px 44px rgba(0,0,0,.5);
  backdrop-filter: blur(9px);
  -webkit-backdrop-filter: blur(9px);
}

/* ── 밤: 전투, 이름, 결과 ─────────────────────────────────────── */

.page-night {
  background:
    radial-gradient(ellipse at 50% 45%, #171b21 0%, #090b10 70%);
  color: var(--ui-ink-0);
  font-family: "Noto Sans KR Variable", "Noto Sans KR", "Malgun Gothic", system-ui, sans-serif;
}

.page-night #game::before,
.page-lab #game::before {
  content: "";
  position: fixed;
  z-index: 4;
  inset: 0;
  pointer-events: none;
  background:
    linear-gradient(180deg, rgba(235,215,176,.025), transparent 20%),
    radial-gradient(ellipse at 50% 50%, transparent 66%, rgba(1,3,6,.2) 100%);
}

.page-night #game canvas,
.page-lab #game canvas {
  filter: saturate(.94) contrast(1.025);
}

.page-night #note {
  gap: 14px;
  color: var(--ui-ink-1);
  background:
    radial-gradient(ellipse at 50% 46%, rgba(58,43,31,.34), transparent 34%),
    rgba(10,8,7,.95);
  animation: ui-veil-in var(--ui-slow) ease both;
}

.page-night #note::before {
  content: "◆";
  color: var(--ui-gold);
  font-size: 10px;
  opacity: .72;
}

.page-night #note a {
  min-width: 180px;
  padding: 9px 15px;
  color: var(--ui-ink-1);
  text-decoration: none;
  border: 1px solid rgba(214,196,163,.28);
  border-radius: 3px;
  background: rgba(46,33,24,.5);
}

.page-night #note a:hover {
  color: var(--ui-ink-0);
  border-color: rgba(229,189,104,.58);
  background: rgba(66,48,34,.7);
}

.page-night #ntitle {
  top: 18%;
  gap: 11px;
  filter: drop-shadow(0 7px 14px rgba(0,0,0,.6));
}

.page-night #ntitle .no {
  color: rgba(214,196,163,.78);
  font-size: clamp(12px, 1.25vw, 16px);
  letter-spacing: .52em;
}

.page-night #ntitle .nm {
  color: var(--ui-ink-0);
  font-size: clamp(29px, 4.8vw, 58px);
  letter-spacing: .11em;
  text-shadow: 0 3px 10px #000, 0 0 38px rgba(229,189,104,.18);
}

.page-night #ntitle .rule {
  width: min(190px, 20vw);
  background: linear-gradient(90deg, transparent, var(--ui-gold), transparent);
  box-shadow: 0 0 12px rgba(229,189,104,.25);
}

.page-night #nightend {
  background:
    radial-gradient(ellipse at 50% 50%, rgba(92,67,45,.12), transparent 40%),
    rgba(8,6,5,.72);
  backdrop-filter: blur(7px) saturate(.75);
  -webkit-backdrop-filter: blur(7px) saturate(.75);
}

.page-night #nightend .panel {
  width: min(520px, 92vw);
  padding: 18px 22px 20px;
  border-width: 24px;
  box-shadow:
    9px 10px 0 rgba(10,8,5,.52),
    0 30px 80px rgba(0,0,0,.62),
    inset 0 0 30px rgba(87,60,33,.08);
}

.page-night #nightend .night {
  margin-bottom: 5px;
  color: #8a7355;
  letter-spacing: .08em;
}

.page-night #nightend h1 {
  margin-bottom: 17px;
  padding-bottom: 13px;
  border-bottom: 1px solid rgba(74,59,46,.26);
  font-size: clamp(22px, 3vw, 28px);
  letter-spacing: .025em;
}

.page-night #nightend .rows {
  margin-bottom: 22px;
}

.page-night #nightend .rows > div {
  min-height: 44px;
  padding: 9px 3px;
}

.page-night #nightend .rows span:last-child {
  color: #2d2118;
  font-size: 21px;
}

.page-night #nightend button {
  min-height: 46px;
  padding-inline: 28px;
  border-color: #21170f;
  background: linear-gradient(105deg, #604832, #2b2018);
}

.page-night #nightend button:hover {
  color: #fff1d4;
  filter: brightness(1.12) saturate(1.05);
}

/* ── 회색박스: 개발 도구는 조용하고 읽기 쉽게 ───────────────── */

.page-lab {
  background: #07090d;
}

.page-lab #panel {
  right: 14px;
  top: 14px;
  width: min(430px, calc(100vw - 28px));
  max-height: calc(100dvh - 28px);
  padding: 16px 17px 22px;
  color: #d7d0c5;
  border-color: rgba(168,146,112,.28);
  border-radius: 5px;
  background:
    linear-gradient(180deg, rgba(31,27,23,.97), rgba(14,15,18,.97));
  box-shadow: 0 22px 60px rgba(0,0,0,.5), inset 0 1px rgba(255,255,255,.035);
  scrollbar-color: rgba(168,146,112,.35) transparent;
}

.page-lab #panel::-webkit-scrollbar {
  width: 8px;
}

.page-lab #panel::-webkit-scrollbar-thumb {
  border: 2px solid transparent;
  border-radius: 9px;
  background: rgba(168,146,112,.34) content-box;
}

.page-lab #panel h1 {
  position: sticky;
  z-index: 2;
  top: -16px;
  margin: -16px -17px 12px;
  padding: 15px 17px 12px;
  color: var(--ui-gold);
  border-bottom: 1px solid rgba(168,146,112,.2);
  background: rgba(25,21,18,.97);
  box-shadow: 0 9px 16px rgba(7,6,5,.18);
  letter-spacing: .045em;
}

.page-lab #panel > div {
  line-height: 1.55;
}

.page-lab #panel > div + div {
  margin-top: 8px !important;
}

.page-lab #panel button,
.page-lab #fold {
  min-height: 31px;
  padding: 6px 9px;
  color: #d9d2c7;
  border-color: rgba(168,146,112,.28);
  border-radius: 3px;
  background: rgba(48,42,36,.72);
  box-shadow: inset 0 1px rgba(255,255,255,.03);
}

.page-lab #panel button:hover,
.page-lab #fold:hover {
  color: #f1e6cf;
  border-color: rgba(229,189,104,.55);
  background: rgba(78,59,43,.8);
}

.page-lab #panel button.on {
  color: #fff0d2;
  border-color: rgba(141,170,118,.75);
  background: rgba(64,79,50,.75);
  box-shadow: inset 0 0 0 1px rgba(141,170,118,.15);
}

.page-lab #fold {
  right: 14px;
  top: 14px;
  z-index: 12;
  color: var(--ui-ink-1);
  background: rgba(31,27,23,.94);
}

.page-lab #hint {
  width: calc(100vw - 458px);
  color: rgba(168,146,112,.45);
  font-family: "Gowun Batang", "Malgun Gothic", serif;
  letter-spacing: .09em;
  text-shadow: 0 2px 8px #000;
}

.page-lab #hint::before {
  content: "◆";
  color: rgba(229,189,104,.55);
  font-size: 9px;
}

.page-lab #hint span {
  color: rgba(168,146,112,.35);
}

.page-lab #hint b {
  color: rgba(214,196,163,.62);
}

.page-lab .note,
.page-lab .why {
  color: #8e8b87;
}

.page-lab .q,
.page-lab .warn {
  color: var(--ui-gold);
}

.page-lab .pass {
  color: #91bd79;
}

.page-lab .fail {
  color: #cf7561;
}

/* ── 좁은 창 / 터치 / 움직임 저감 ─────────────────────────────── */

@media (max-width: 760px) {
  .page-day #hud {
    padding: 6px;
  }

  .page-day #hud .day,
  .page-day #hud .coin {
    min-height: 30px;
    padding: 4px 8px;
  }

  .page-day #htime,
  .page-day #tally {
    min-height: 30px;
  }

  .page-day #cutbar {
    bottom: 8px;
    width: calc(100% - 16px);
    padding: 8px 10px;
  }

  .page-day #cutnote {
    display: none;
  }

  .page-day .bk {
    width: calc(100% - 10px);
  }

  .page-day .bk[data-tab="trough"],
  .page-day .bk[data-tab="flock"],
  .page-day .bk[data-tab="dogs"],
  .page-day .bk[data-tab="store"],
  .page-day .bk[data-tab="diary"] {
    height: calc(100% - 10px);
    max-height: calc(100% - 10px);
  }

  .page-day #bkbody {
    padding: 18px 20px 22px;
  }

  .page-day #bkbody::before {
    margin-bottom: 14px;
  }

  .page-lab #panel {
    width: calc(100vw - 20px);
    right: 10px;
    top: 10px;
    max-height: calc(100dvh - 20px);
  }

  .page-lab #hint {
    width: 100vw;
  }
}

@media (max-width: 560px) {
  .page-day #bkbody[data-tab="trough"] table,
  .page-day #bkbody[data-tab="flock"] > ul,
  .page-day #bkbody[data-tab="store"] > ul,
  .page-day #bkbody[data-tab="dogs"] > ul {
    grid-template-columns: 1fr;
  }

  .page-day #bkbody .big {
    min-width: 0;
    width: 100%;
    align-items: flex-start;
    flex-direction: column;
    gap: 2px;
  }

  .page-day #bkbody[data-tab="trough"] tr {
    min-height: 82px;
  }

  .page-day .bk footer {
    padding: 5px 7px;
  }

  .page-day .bk footer .note {
    display: none;
  }

  .page-day .bk footer button.main {
    min-height: 34px;
    padding-block: 5px;
  }
}

@media (hover: hover) {
  .page-day #objs button:hover::before,
  .page-day #objs button:focus-visible::before {
    filter: brightness(1.12) saturate(1.05);
  }
}

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    scroll-behavior: auto !important;
    animation-duration: .001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: .001ms !important;
  }
}

@keyframes ui-stage-in {
  from { opacity: 0; filter: brightness(.76); }
  to { opacity: 1; filter: none; }
}

@keyframes ui-veil-in {
  from { opacity: 0; }
  to { opacity: 1; }
}

@keyframes ui-book-in {
  from { opacity: 0; transform: translateY(10px) scale(.985); }
  to { opacity: 1; transform: none; }
}

/* ══════════════════════════════════════════════════════════════════
   낮 장부 · 상용 화면 재구축

   종이 전체를 웹 패널처럼 채우던 판을 폐기한다. 실제 월드 픽셀 아트를 각 갈피의
   표제 정물로 끌어오고, 갈피·가죽 장정·종이·목패가 한 픽셀 게임의 재료로 읽히게
   한다. 아래 규칙은 기존 DOM 계약을 유지하면서 최종 제품 화면을 전부 덮는다.
   ══════════════════════════════════════════════════════════════════ */

@media not all {

.page-day #book {
  padding: clamp(12px, 2.5vw, 28px);
  background:
    radial-gradient(ellipse at 50% 44%, rgba(74,52,34,.16), rgba(7,5,4,.84) 76%),
    rgba(10,7,5,.78);
  backdrop-filter: blur(7px) saturate(.7);
  -webkit-backdrop-filter: blur(7px) saturate(.7);
}

.page-day .bk,
.page-day .bk[data-tab] {
  color-scheme: light;
  color-scheme: light;
  width: min(96%, 1080px);
  height: min(94%, 664px) !important;
  max-height: min(94%, 664px) !important;
  padding-left: 136px;
  overflow: hidden;
  color: #2d2117;
  border: 0;
  border-radius: 2px;
  background: #e6d3aa;
  box-shadow:
    0 0 0 2px #1a120c,
    0 0 0 6px #67472f,
    0 0 0 8px #21150e,
    0 28px 78px rgba(0,0,0,.72),
    10px 12px 0 rgba(8,5,3,.48),
    inset 0 0 0 1px rgba(255,245,216,.42),
    inset 0 0 48px rgba(91,61,34,.11);
}

.page-day .bk::before {
  content: "";
  position: absolute;
  z-index: 7;
  left: 136px;
  top: 0;
  bottom: 0;
  width: 7px;
  pointer-events: none;
  background:
    linear-gradient(90deg, rgba(26,17,11,.5), rgba(255,237,198,.32) 35%, transparent 68%);
  opacity: .72;
}

.page-day .bk::after {
  content: "";
  position: absolute;
  z-index: 8;
  left: 19px;
  top: 20px;
  width: 94px;
  height: 34px;
  pointer-events: none;
  background:
    radial-gradient(circle, #d8ad57 0 2px, #63452b 3px 4px, transparent 5px)
      left center / 16px 16px repeat-x;
  border-top: 1px solid rgba(226,195,132,.22);
  border-bottom: 1px solid rgba(11,7,5,.66);
  opacity: .78;
}

.page-day .bk nav {
  position: absolute;
  z-index: 6;
  inset: 0 auto 0 0;
  width: 136px;
  min-height: 0;
  padding: 68px 10px 12px;
  overflow-x: hidden;
  overflow-y: auto;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  border: 0;
  border-right: 2px solid #1b120c;
  background:
    linear-gradient(90deg, rgba(242,207,139,.045), transparent 10% 86%, rgba(5,3,2,.28)),
    linear-gradient(150deg, #4a3021, #25170f 74%);
  box-shadow: inset -1px 0 rgba(226,189,119,.2), inset 0 0 30px rgba(5,3,2,.36);
  scrollbar-width: none;
}

.page-day .bk nav::-webkit-scrollbar { display: none; }

.page-day .bk nav button {
  display: grid;
  grid-template-columns: 26px 1fr;
  align-items: center;
  width: 100%;
  min-height: 38px;
  padding: 6px 8px;
  color: #bca27a;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 11px;
  line-height: 1.1;
  text-align: left;
  letter-spacing: .025em;
}

.page-day .bk nav button:hover,
.page-day .bk nav button:focus-visible {
  color: #f1dfbc;
  border-color: rgba(222,185,116,.22);
  background: rgba(229,193,123,.08);
}

.page-day .bk nav button.on {
  color: #2b1e14;
  border-color: #c5a66d;
  border-right-color: #e9d5ad;
  background:
    linear-gradient(90deg, #efdcb7, #d6bb88 78%, #ead3a8);
  box-shadow:
    3px 3px 0 rgba(8,5,3,.3),
    inset 0 1px rgba(255,248,226,.7),
    inset 4px 0 #9d7442;
  transform: translateX(5px);
}

.page-day .bk nav button.on::after { display: none; }

.page-day .bknav-code {
  color: #806240;
  font-family: Georgia, serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .02em;
}

.page-day .bk nav button:not(.on) .bknav-code { color: #7f674b; }

.page-day .bk nav button .cue {
  top: 5px;
  right: 5px;
  width: 5px;
  height: 5px;
  background: #efc467;
  box-shadow: 0 0 0 1px #5a3a20, 0 0 7px rgba(239,196,103,.7);
}

.page-day .bk nav .grow { min-height: 6px; }

.page-day .bk nav button.x {
  grid-template-columns: 26px 1fr;
  min-height: 36px;
  margin-top: 6px;
  color: #a98e68;
  border-top-color: rgba(218,183,119,.18);
  font-family: Georgia, "Gowun Batang", serif;
  font-size: 18px;
}

.page-day .bk nav button.x span {
  font-family: "Gowun Batang", "Malgun Gothic", serif;
  font-size: 10px;
}

.page-day #bkbody {
  padding: 0;
  color: #302218;
  overflow: auto;
  line-height: 1.62;
  font-size: 14px;
  background:
    linear-gradient(90deg, rgba(92,62,34,.09), transparent 7% 94%, rgba(92,62,34,.07)),
    #e8d7b4;
  scrollbar-color: #8b6a42 #d2ba8a;
}

.page-day #bkbody::before { display: none; }

.page-day #bkbody > .bkhero,
.page-day #bkbody > .bkcontent {
  width: 100% !important;
  max-width: none !important;
}

.page-day .bkhero {
  position: relative;
  min-height: 136px;
  display: grid;
  grid-template-columns: minmax(280px, 1fr) auto 190px;
  align-items: center;
  gap: 24px;
  padding: 17px 25px 16px 29px;
  overflow: hidden;
  color: #eee0c4;
  border-bottom: 3px solid #a27845;
  background:
    linear-gradient(90deg, rgba(235,205,146,.05), transparent 44%),
    linear-gradient(145deg, #3e3427, #242018 76%);
  box-shadow: inset 0 -1px #f0d39a, inset 0 0 40px rgba(4,3,2,.25);
}

.page-day .bkhero::after {
  content: "";
  position: absolute;
  inset: 12px;
  pointer-events: none;
  border: 1px solid rgba(226,193,128,.15);
  box-shadow: inset 0 0 0 1px rgba(10,7,5,.34);
}

.page-day .bkhero-copy,
.page-day .bkhero-stat,
.page-day .bkhero-art { position: relative; z-index: 1; }

.page-day .bkfolio {
  display: block;
  margin-bottom: 6px;
  color: #c7a66d;
  font-family: Georgia, "Times New Roman", serif;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .18em;
}

.page-day .bkhero h2 {
  margin: 0;
  color: #f4e5c7;
  font-size: clamp(20px, 2.2vw, 28px);
  font-weight: 700;
  line-height: 1.15;
  letter-spacing: -.035em;
  text-shadow: 0 2px #0e0a07;
}

.page-day .bkhero p {
  max-width: 390px;
  margin: 8px 0 0;
  color: #bda98a;
  font-size: 14px;
  line-height: 1.55;
}

.page-day .bkhero-stat {
  min-width: 108px;
  padding: 11px 13px 10px;
  border-left: 2px solid #9d7643;
  background: linear-gradient(90deg, rgba(209,172,102,.08), transparent);
}

.page-day .bkhero-stat strong,
.page-day .bkhero-stat span { display: block; }

.page-day .bkhero-stat strong {
  color: #f0d28f;
  font-size: 15px;
  font-weight: 700;
  white-space: nowrap;
}

.page-day .bkhero-stat span {
  margin-top: 2px;
  color: #927e62;
  font-size: 9px;
  letter-spacing: .07em;
}

.page-day .bkhero-art {
  width: 156px;
  height: 96px;
  justify-self: end;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(5px 7px 0 rgba(8,5,3,.32));
}

.page-day .bkhero[data-panel="trough"] .bkhero-art {
  background-image: url("/art/day/objects/milking-station-96-v1.png");
}

.page-day .bkhero[data-panel="flock"] .bkhero-art {
  background-image: url("/art/sheep/v1/sheet-4x3.png");
}

.page-day .bkhero[data-panel="dogs"] .bkhero-art {
  background-image: url("/art/day/dogs/seori-3x1-48.png");
}

.page-day .bkhero[data-panel="store"] .bkhero-art {
  background-image: url("/art/day/epilogue/storehouse-field-facing-160-v3.png");
}

.page-day .bkhero[data-panel="merchant"] .bkhero-art {
  background-image: url("/art/day/objects/merchant-idle-96-v17.png");
}

.page-day .bkhero[data-panel="diary"] .bkhero-art {
  background-image: url("/art/day/objects/diary-open-96.png");
}

.page-day .bkhero[data-panel="journey"] .bkhero-art {
  background-image: url("/art/day/objects/map-stamp-5x1-16.png");
}

.page-day .bkcontent {
  position: relative;
  padding: 18px 29px 27px;
}

.page-day #bkbody[data-tab="trough"] .bkcontent::before,
.page-day #bkbody[data-tab="diary"] .bkcontent::before {
  content: "";
  position: absolute;
  right: 38px;
  bottom: -152px;
  width: 250px;
  height: 250px;
  pointer-events: none;
  opacity: .055;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

.page-day #bkbody[data-tab="trough"] .bkcontent::before {
  background-image: url("/art/day/objects/milking-station-96-v1.png");
}

.page-day #bkbody[data-tab="diary"] .bkcontent::before {
  background-image: url("/art/day/objects/diary-open-96.png");
}

.page-day .bkcontent::after {
  content: "";
  position: absolute;
  right: 18px;
  top: 18px;
  width: 34px;
  height: 34px;
  pointer-events: none;
  border: 1px solid rgba(91,65,38,.12);
  transform: rotate(45deg);
}

.page-day #bkbody .big {
  min-width: 0;
  margin: 0 0 18px;
  padding: 0 0 8px;
  color: #2a1d13;
  font-size: 38px;
  border: 0;
  border-bottom: 2px solid #9b7547;
  background: none;
}

.page-day #bkbody .big small {
  color: #705437;
  font-size: 11px;
}

.page-day #bkbody .note,
.page-day #bkbody .act,
.page-day #bkbody .warn {
  max-width: none;
  margin: 12px 0 0;
  padding: 8px 11px 8px 14px;
  color: #654d35;
  border: 0;
  border-left: 3px solid #9e7c50;
  background: rgba(104,76,44,.055);
}

.page-day #bkbody .act {
  color: #40552f;
  border-left-color: #6e8b56;
  background: rgba(89,116,65,.08);
}

.page-day #bkbody .warn {
  color: #7d392f;
  border-left-color: #a45242;
  background: rgba(155,73,57,.08);
}

/* 정산표: 세 칸을 단순 카드가 아니라 손으로 찍은 목패 계수판으로 만든다. */
.page-day #bkbody[data-tab="trough"] table {
  gap: 11px;
  max-width: none;
}

.page-day #bkbody[data-tab="trough"] tr {
  position: relative;
  min-height: 106px;
  padding: 14px 16px;
  border: 2px solid #7b5a38;
  border-radius: 0;
  background:
    linear-gradient(135deg, rgba(255,245,213,.32), transparent 55%),
    #c6a979;
  box-shadow: 4px 4px 0 rgba(76,51,29,.22), inset 0 0 0 2px rgba(239,220,180,.35);
  transform: none !important;
}

.page-day #bkbody[data-tab="trough"] tr::after {
  content: "";
  position: absolute;
  right: 10px;
  top: 10px;
  width: 8px;
  height: 8px;
  border: 1px solid #755333;
  border-radius: 50%;
  background: #ad8b58;
  box-shadow: inset 1px 1px rgba(255,236,194,.35);
}

.page-day #bkbody[data-tab="trough"] td:first-child {
  color: #62492f;
  font-size: 10px;
  letter-spacing: .08em;
}

.page-day #bkbody[data-tab="trough"] td:last-child {
  color: #251911;
  font-size: 29px;
}

/* 목록은 웹 카드 대신 장부의 가로 기록 행이다. */
.page-day #bkbody[data-tab="flock"] .bkcontent > ul,
.page-day #bkbody[data-tab="store"] .bkcontent > ul,
.page-day #bkbody[data-tab="dogs"] .bkcontent > ul {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.page-day #bkbody[data-tab="flock"] .bkcontent > ul > li,
.page-day #bkbody[data-tab="store"] .bkcontent > ul > li,
.page-day #bkbody[data-tab="dogs"] .bkcontent > ul > li {
  position: relative;
  min-height: 48px;
  margin: 0;
  padding: 9px 9px 8px 23px;
  border: 0;
  border-bottom: 1px solid rgba(83,59,34,.27);
  background: transparent;
}

.page-day #bkbody[data-tab="flock"] .bkcontent > ul > li::before,
.page-day #bkbody[data-tab="store"] .bkcontent > ul > li::before,
.page-day #bkbody[data-tab="dogs"] .bkcontent > ul > li::before {
  left: 7px;
  top: 17px;
  width: 6px;
  height: 6px;
  border: 1px solid #785938;
  border-radius: 0;
  background: #b6935e;
  transform: rotate(45deg);
}

.page-day #bkbody[data-tab="dogs"] .bkcontent > ul:first-of-type::before,
.page-day #bkbody[data-tab="dogs"] .bkcontent > ul:last-of-type::before {
  grid-column: 1 / -1;
  margin: 3px 0 7px;
  color: #6e5033;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: .12em;
}

.page-day #bkbody[data-tab="dogs"] .bkcontent > ul:first-of-type::before { content: "들에 나가는 개"; }
.page-day #bkbody[data-tab="dogs"] .bkcontent > ul:last-of-type::before { content: "공격 우선순위"; }

.page-day .bkempty {
  min-height: 188px;
  display: grid;
  grid-template-columns: minmax(310px, 1.4fr) minmax(180px, .8fr);
  align-items: center;
  gap: 24px;
  max-width: 760px;
  padding: 18px 20px;
  color: #493522;
  border-top: 1px solid rgba(85,61,37,.26);
  border-bottom: 1px solid rgba(85,61,37,.26);
  background: linear-gradient(90deg, rgba(113,80,43,.08), transparent);
}

.page-day .bkempty-copy {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 5px;
}

.page-day .bkempty b { font-size: 16px; }
.page-day .bkempty small { color: #745b3d; font-size: 11px; line-height: 1.5; }
.page-day .bkempty em {
  margin-top: 8px;
  padding: 5px 8px;
  color: #3f2c1c;
  border: 1px solid #987246;
  background: #c7a66f;
  font-size: 10px;
  font-style: normal;
  font-weight: 700;
}

/* 상인: 여섯 상품을 무채색 웹 카드가 아닌 수레의 진열 상자로 보이게 한다. */
.page-day #bkbody[data-tab="merchant"] .bkcontent { padding-top: 20px; }

.page-day #bkbody[data-tab="merchant"] .grid6 {
  gap: 10px;
  margin-top: 12px;
}

.page-day #bkbody[data-tab="merchant"] .gcard {
  position: relative;
  min-height: 176px;
  gap: 4px;
  padding: 9px 10px 10px;
  overflow: hidden;
  border: 2px solid #765434;
  border-radius: 0;
  background:
    linear-gradient(145deg, rgba(255,243,208,.26), transparent 42%),
    #c4a372;
  box-shadow:
    4px 4px 0 rgba(66,43,24,.21),
    inset 0 0 0 2px rgba(234,210,166,.42);
}

.page-day #bkbody[data-tab="merchant"] .gcard.buyable {
  border-color: #5a733f;
  background:
    linear-gradient(145deg, rgba(255,245,215,.35), transparent 42%),
    #c9ad79;
}

.page-day #bkbody[data-tab="merchant"] .gcard.buyable:hover,
.page-day #bkbody[data-tab="merchant"] .gcard.buyable:focus-visible {
  transform: translateY(-3px);
  border-color: #3f602d;
  box-shadow: 5px 6px 0 rgba(61,44,25,.24), inset 0 0 0 2px rgba(231,218,177,.56);
}

.page-day #bkbody[data-tab="merchant"] .gcard.poor,
.page-day #bkbody[data-tab="merchant"] .gcard.sold,
.page-day #bkbody[data-tab="merchant"] .gcard.maxed { opacity: 1; }

.page-day #bkbody[data-tab="merchant"] .gcard.poor .gp,
.page-day #bkbody[data-tab="merchant"] .gcard.poor .gw,
.page-day #bkbody[data-tab="merchant"] .gcard.poor .gbar,
.page-day #bkbody[data-tab="merchant"] .gcard.sold .gp,
.page-day #bkbody[data-tab="merchant"] .gcard.sold .gw,
.page-day #bkbody[data-tab="merchant"] .gcard.maxed .gp,
.page-day #bkbody[data-tab="merchant"] .gcard.maxed .gw { opacity: .58; }

.page-day #bkbody[data-tab="merchant"] .gcard .gh {
  padding-bottom: 5px;
  color: #604629;
  border: 0;
  border-bottom: 1px solid rgba(75,51,28,.34);
  font-size: 9px;
  letter-spacing: .1em;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi {
  position: relative;
  height: 56px;
  aspect-ratio: auto;
  margin: 1px 0 4px;
  border: 0;
  border-bottom: 1px solid rgba(75,51,28,.26);
  background-color: transparent;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  box-shadow: none;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 rgba(69,45,24,.18));
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi::before {
  content: "" !important;
  display: block;
  position: absolute;
  inset: 0;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  transform: none;
  color: transparent;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="flock"]::before {
  background-image: url("/art/sheep/v1/sheet-4x3.png");
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="train"]::before {
  background-image: url("/art/day/goods/good-driedMeat-96-v1.png");
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="heal"]::before {
  background-image: url("/art/day/objects/milk-5x1-32.png");
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="vigor"]::before {
  background-image: url("/art/day/objects/cart-near-64.png");
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="david"]::before {
  background-image: url("/art/day/objects/field-stones-5x1-32-v1.png");
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi.has-art::before { display: none; }

.page-day #bkbody[data-tab="merchant"] .gcard .gn {
  color: #251a11;
  font-size: 14px;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gs {
  min-height: 29px;
  color: #584029;
  font-size: 11px;
  line-height: 1.45;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gbar {
  height: 4px;
  margin-top: auto;
  border-color: rgba(61,43,25,.4);
  background: rgba(53,36,21,.1);
}

.page-day #bkbody[data-tab="merchant"] .gcard .gbar i { background: #607642; }
.page-day #bkbody[data-tab="merchant"] .gcard.poor .gbar i { background: #9a4d3d; }

.page-day #bkbody[data-tab="merchant"] .gcard .gp { color: #382619; }
.page-day #bkbody[data-tab="merchant"] .gcard .gp b { color: #24170e; font-size: 16px; }
.page-day #bkbody[data-tab="merchant"] .gcard .gw { color: #6c5338; }
.page-day #bkbody[data-tab="merchant"] .gcard .gw.ok { color: #405e30; font-weight: 700; }

/* 일기와 지도는 여백을 의도적인 기록 면으로 사용한다. */
.page-day #bkbody .diary {
  gap: 0;
  max-width: 760px;
}

.page-day #bkbody .diary li {
  min-height: 46px;
  padding: 11px 14px 10px 45px;
  border: 0;
  border-bottom: 1px solid rgba(80,55,31,.25);
  background: transparent;
}

.page-day #bkbody .diary li::before {
  left: 11px;
  top: 11px;
  color: #8b653c;
  font-family: Georgia, serif;
  font-size: 10px;
}

.page-day #bkbody .pg {
  max-width: 760px;
  margin: 0 0 9px;
  padding: 9px 13px 9px 15px;
  border-left: 2px solid #9a7548;
  background: rgba(110,78,43,.045);
}

.page-day #bkbody[data-tab="journey"] .mp {
  grid-template-columns: repeat(10, minmax(25px, 1fr));
  gap: 7px;
  max-width: 620px;
  margin: 13px 0 16px;
}

.page-day #bkbody[data-tab="journey"] .mp i {
  color: #553c25;
  border: 1px solid #876642;
  border-radius: 0;
  background: #c2a574;
  box-shadow: 2px 2px 0 rgba(72,48,27,.15), inset 0 1px rgba(252,233,191,.38);
}

.page-day #bkbody[data-tab="journey"] .mp i.done { color: #eadab7; background: #705439; }
.page-day #bkbody[data-tab="journey"] .mp i.here { outline-color: #8b5c1d; }
.page-day #bkbody[data-tab="journey"] .mp i.sab { background: #9cad78; }

.page-day .bk footer {
  min-height: 52px;
  padding: 7px 11px 7px 15px;
  border: 0;
  border-top: 2px solid #a47d4c;
  background:
    linear-gradient(90deg, rgba(99,67,37,.12), transparent 60%),
    #d2ba8b;
  box-shadow: inset 0 1px rgba(255,241,206,.46);
}

.page-day .bk footer .note {
  color: #6c5033;
  font-size: 9px;
  letter-spacing: .035em;
}

.page-day .bk footer button.main {
  min-width: 152px;
  min-height: 38px;
  margin-left: auto;
  padding: 7px 14px;
  color: #f0dfbd;
  border: 1px solid #2c1c12;
  border-radius: 0;
  background: linear-gradient(#58402b, #302116);
  box-shadow: 3px 3px 0 rgba(53,35,20,.32), inset 0 1px rgba(237,207,151,.25);
}

.page-day .bk footer button.main:hover {
  color: #fff1d2;
  background: linear-gradient(#684a30, #382519);
}

/* 여정 복구는 개발 로그가 아니라 플레이어가 바로 닿는 작은 현장 표식으로 보인다. */
.page-day #recovery {
  position: absolute;
  z-index: 42;
  left: 50%;
  top: 78px;
  width: min(620px, calc(100% - 36px));
  box-sizing: border-box;
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 17px;
  color: #f0dfbd;
  border: 1px solid #b79053;
  border-left-width: 4px;
  background: rgba(35, 24, 16, .96);
  box-shadow: 5px 6px 0 rgba(5, 3, 2, .38);
  font-size: 13px;
  line-height: 1.55;
  transform: translateX(-50%);
}

.page-day #recovery[hidden] { display: none; }
.page-day #recovery-text { flex: 1; }
.page-day #recovery-action {
  flex: none;
  min-height: 34px;
  padding: 7px 11px;
  color: #23170f;
  border: 1px solid #f0d08d;
  border-radius: 0;
  background: #d6ae64;
  font: 700 11px "Gowun Batang", "Malgun Gothic", serif;
}

.page-day #recovery-action:hover { background: #efd28f; }

/* 낮 장부는 세로폰에서 무대의 16:9 높이에 갇히지 않고 온 화면으로 열린다. */
@media (max-width: 620px) and (orientation: portrait) {
  .page-day #book {
    position: fixed;
    inset: 0;
    z-index: 100;
    padding: 0;
    border-radius: 0;
  }

  .page-day .bk,
  .page-day .bk[data-tab] {
    width: 100%;
    height: 100% !important;
    max-height: 100% !important;
    padding: 62px 0 0;
    border-radius: 0;
    box-shadow: none;
  }

  .page-day .bk::before {
    left: 0;
    right: 0;
    top: 62px;
    bottom: auto;
    width: auto;
    height: 6px;
    background: linear-gradient(rgba(22,14,9,.48), rgba(255,237,198,.28), transparent);
  }

  .page-day .bk::after { display: none; }

  .page-day .bk nav {
    inset: 0 0 auto 0;
    width: auto;
    height: 62px;
    padding: 8px;
    overflow-x: auto;
    overflow-y: hidden;
    flex-direction: row;
    align-items: stretch;
    gap: 3px;
    border: 0;
    border-bottom: 2px solid #1a110b;
  }

  .page-day .bk nav button {
    display: flex;
    width: auto;
    min-width: 58px;
    min-height: 42px;
    justify-content: center;
    padding: 6px 9px;
    text-align: center;
  }

  .page-day .bk nav button.on { transform: translateY(4px); }
  .page-day .bknav-code { display: none; }
  .page-day .bk nav .grow { min-width: 0; }

  .page-day .bk nav button.x {
    position: sticky;
    right: 0;
    min-width: 42px;
    margin: 0;
    background: #2d1d13;
  }

  .page-day .bk nav button.x span { display: none; }

  .page-day .bkhero {
    min-height: 144px;
    grid-template-columns: 1fr 106px;
    gap: 10px;
    padding: 19px 16px 17px 19px;
  }

  .page-day .bkhero-stat { display: none; }
  .page-day .bkhero-art { width: 104px; height: 88px; }
  .page-day .bkhero h2 { font-size: 23px; }
  .page-day .bkhero p { font-size: 10px; }
  .page-day .bkcontent { padding: 20px 17px 26px; }

  .page-day #bkbody[data-tab="merchant"] .grid6 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .page-day #bkbody[data-tab="merchant"] .gcard { min-height: 212px; }
  .page-day .bk footer { flex-direction: row; align-items: center; }
  .page-day .bk footer .note { display: none; }
  .page-day .bk footer button.main { width: 100%; margin: 0; }
}

@media (max-height: 500px) and (orientation: landscape) {
  .page-day #book { padding: 8px; }

  .page-day .bk,
  .page-day .bk[data-tab] {
    width: calc(100% - 8px);
    height: calc(100% - 8px) !important;
    max-height: calc(100% - 8px) !important;
    padding-left: 112px;
  }

  .page-day .bk nav { width: 112px; padding: 12px 7px 8px; }
  .page-day .bk::before { left: 112px; }
  .page-day .bk::after { display: none; }
  .page-day .bk nav button { min-height: 31px; grid-template-columns: 22px 1fr; padding: 4px 6px; font-size: 9px; }
  .page-day .bk nav .grow { min-height: 2px; }
  .page-day .bkhero { min-height: 106px; grid-template-columns: 1fr auto 128px; padding: 13px 17px 12px 20px; }
  .page-day .bkhero h2 { font-size: 20px; }
  .page-day .bkhero p { margin-top: 4px; font-size: 9px; }
  .page-day .bkhero-stat { padding: 7px 9px; }
  .page-day .bkhero-stat strong { font-size: 12px; }
  .page-day .bkhero-art { width: 120px; height: 80px; }
  .page-day .bkcontent { padding: 16px 20px 22px; }
  .page-day .bk footer { min-height: 44px; padding: 5px 8px 5px 12px; }
  .page-day .bk footer button.main { min-height: 33px; }
  .page-day #bkbody[data-tab="merchant"] .grid6 { gap: 7px; margin-top: 8px; }
  .page-day #bkbody[data-tab="merchant"] .gcard { min-height: 164px; padding: 7px 9px 8px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gi { height: 48px; margin-bottom: 2px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gs { min-height: 24px; font-size: 10px; }
}
}

/* ══════════════════════════════════════════════════════════════════
   낮 장부 · 출시 레이아웃 최종 패스

   데스크톱은 갈피 / 장면과 기록 / 하루 마치기의 세 층, 낮은 가로 화면은 갈피 /
   장면과 기록 + 하단 행동의 두 층으로 접힌다. 내용 카드의 반복 대신 각 패널의
   실제 기능에 맞는 계수판·기록 행·거래 행을 사용한다.
   ══════════════════════════════════════════════════════════════════ */

.page-day .bk,
.page-day .bk[data-tab] {
  width: min(1180px, calc(100vw - 32px));
  height: min(720px, calc(100vh - 32px)) !important;
  max-height: min(720px, calc(100vh - 32px)) !important;
  display: grid;
  grid-template-columns: 142px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr) 66px;
  padding: 0;
  overflow: hidden;
  border-radius: 2px;
}

.page-day .bk::before,
.page-day .bk::after { display: none; }

.page-day .bkrail {
  position: relative;
  z-index: 3;
  grid-column: 1;
  grid-row: 1 / 3;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: column;
  border-right: 2px solid #1a110b;
  background:
    linear-gradient(90deg, rgba(238,202,133,.045), transparent 12% 84%, rgba(3,2,1,.3)),
    linear-gradient(155deg, #4a3021, #25170f 74%);
  box-shadow: inset -1px 0 rgba(226,189,119,.2), inset 0 0 34px rgba(5,3,2,.34);
}

.page-day .bkbrand {
  flex: none;
  min-height: 92px;
  display: grid;
  align-content: center;
  justify-items: center;
  padding: 18px 10px 12px;
  color: #dcc18b;
  border-bottom: 1px solid rgba(226,190,121,.18);
  text-shadow: 0 2px #100a06;
}

.page-day .bkbrand b {
  font: 700 28px/1 Georgia, "Times New Roman", serif;
  letter-spacing: -.06em;
}

.page-day .bkbrand span {
  margin-top: 7px;
  color: #9f8560;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .08em;
}

.page-day .bk nav {
  position: relative;
  inset: auto;
  width: auto;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 4px;
  flex: 1 1 auto;
  padding: 11px 9px 7px;
  overflow: auto;
  border: 0;
  background: none;
  box-shadow: none;
}

.page-day .bk nav button {
  width: 100%;
  min-height: 42px;
  grid-template-columns: 1fr;
  padding: 7px 8px;
  color: #bca27a;
  border: 1px solid transparent;
  border-radius: 0;
  background: transparent;
  font-size: 12px;
  text-align: left;
}

.page-day .bk nav button.on {
  color: #2b1e14;
  border-color: #c5a66d;
  background: linear-gradient(90deg, #efdcb7, #d6bb88 78%, #ead3a8);
  box-shadow: 3px 3px 0 rgba(8,5,3,.3), inset 4px 0 #9d7442;
  transform: translateX(4px);
}
.page-day .bk nav button.on::after { display: none; }
.page-day .bknav-code { display: none; }
.page-day .bk nav button.x { min-height: 38px; }
.page-day .bk nav .grow { min-height: 8px; }

.page-day .bkmain {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  min-height: 0;
  overflow: hidden;
  background: #e8d7b4;
}

.page-day #bkbody {
  width: 100%;
  height: 100%;
  min-width: 0;
  min-height: 0;
  display: grid;
  grid-template-columns: 220px minmax(0, 1fr);
  grid-template-rows: minmax(0, 1fr);
  padding: 0;
  overflow: hidden;
  font-size: 13px;
  line-height: 1.56;
}

.page-day #bkbody::before { display: none; }

.page-day #bkbody > .bkhero,
.page-day #bkbody > .bkcontent {
  width: auto !important;
  max-width: none !important;
  min-width: 0;
  min-height: 0;
}

.page-day .bkhero {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  min-height: 0;
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0;
  padding: 28px 22px 22px;
  overflow: hidden;
  color: #eee0c4;
  border: 0;
  border-right: 3px solid #a27845;
  background:
    linear-gradient(180deg, rgba(235,205,146,.055), transparent 40%),
    linear-gradient(155deg, #3f3427, #242018 78%);
  box-shadow: inset -1px 0 #efd095, inset 0 0 45px rgba(4,3,2,.24);
}

.page-day .bkhero::after {
  content: "";
  position: absolute;
  inset: 13px;
  pointer-events: none;
  border-color: rgba(226,193,128,.14);
  border-style: solid;
  border-width: 1px;
  box-shadow: inset 0 0 0 1px rgba(10,7,5,.34);
}

.page-day .bkhero-copy { flex: none; }

.page-day .bkhero-copy,
.page-day .bkhero-stat,
.page-day .bkhero-art { position: relative; z-index: 1; }

.page-day .bkfolio {
  display: none;
}

.page-day .bkhero h2 {
  max-width: 175px;
  margin: 0;
  color: #f4e5c7;
  font-size: 27px;
  font-weight: 700;
  line-height: 1.16;
  letter-spacing: -.035em;
  text-shadow: 0 2px #0e0a07;
}

.page-day .bkhero p {
  margin-top: 10px;
  color: #c8b493;
  font-size: 13px;
  line-height: 1.58;
}

.page-day .bkhero-art {
  order: 2;
  width: 100%;
  height: clamp(128px, 25vh, 202px);
  margin: auto 0 12px;
  background-size: contain;
  background-position: center bottom;
  background-repeat: no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(6px 8px 0 rgba(8,5,3,.32));
}

.page-day .bkhero[data-panel="trough"] .bkhero-art { background-image: url("/art/day/objects/milking-station-96-v1.png"); }
.page-day .bkhero[data-panel="flock"] .bkhero-art { background-image: url("/art/sheep/v1/sheet-4x3.png"); }
.page-day .bkhero[data-panel="dogs"] .bkhero-art { background-image: url("/art/day/dogs/seori-3x1-48.png"); }
.page-day .bkhero[data-panel="store"] .bkhero-art { display: none; }
.page-day .bkhero[data-panel="merchant"] .bkhero-art { background-image: url("/art/day/objects/merchant-idle-96-v17.png"); }
.page-day .bkhero[data-panel="diary"] .bkhero-art { background-image: url("/art/day/objects/diary-reading-table-96-v1.png"); }
.page-day .bkhero[data-panel="journey"] .bkhero-art { background-image: url("/art/day/objects/map-stamp-5x1-16.png"); }

.page-day .bkhero-stat {
  order: 3;
  min-width: 0;
  padding: 12px 12px 11px;
  border: 1px solid rgba(205,168,98,.27);
  border-left: 3px solid #a67e48;
  background: rgba(214,178,108,.06);
}

.page-day .bkhero-stat strong {
  display: block;
  color: #f0d28f;
  font-size: 16px;
  white-space: normal;
}

.page-day .bkhero-stat span { display: block; color: #b79a70; font-size: 12px; }

.page-day .bkcontent {
  position: relative;
  grid-column: 2;
  grid-row: 1;
  height: 100%;
  padding: 28px 30px 34px;
  overflow-y: auto;
  overflow-x: hidden;
  overscroll-behavior: contain;
  scrollbar-gutter: stable;
}

.page-day .bkcontent::after { display: none; }

.page-day .bkaction {
  position: relative;
  z-index: 2;
  grid-column: 2;
  grid-row: 2;
  min-width: 0;
  min-height: 0;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 18px;
  padding: 8px 12px 8px 20px;
  border: 0;
  border-top: 2px solid #8c653d;
  background:
    linear-gradient(180deg, rgba(255,239,201,.28), transparent 24%),
    #d4bb89;
  box-shadow: inset 0 1px rgba(255,240,204,.46), inset 0 10px 24px rgba(91,62,34,.08);
}

.page-day .bkaction-copy {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
  color: #38271a;
}

.page-day .bkaction-copy > b {
  font-size: 17px;
  line-height: 1.25;
}

.page-day .bk .bkaction-copy .note {
  display: block;
  color: #4c3824;
  font-size: 12px;
  line-height: 1.55;
}

.page-day .bk .bkaction button.main {
  width: auto;
  min-width: 240px;
  min-height: 48px;
  margin: 0;
  padding: 10px 12px;
  font-size: 14px;
  line-height: 1.35;
}

/* 정산은 대시보드 카드가 아니라 한 장의 계량 장부로 읽힌다. */
.page-day .settlement {
  display: grid;
  grid-template-columns: minmax(230px, .82fr) minmax(280px, 1.18fr);
  grid-template-rows: auto 1fr;
  min-height: 380px;
  align-content: center;
  margin: 6px 0 0;
  border-top: 2px solid #8f6b42;
  border-bottom: 1px solid rgba(83,58,33,.32);
}

.page-day .settlement-main {
  grid-row: 1 / 3;
  min-height: 300px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: flex-start;
  padding: 30px 34px;
  color: #2d2016;
  border: 0;
  border-left: 4px solid #7d5c39;
  border-right: 1px solid rgba(83,58,33,.3);
  background:
    linear-gradient(145deg, rgba(255,244,210,.28), transparent 58%),
    rgba(153,115,66,.16);
  box-shadow: inset 10px 0 22px rgba(95,65,34,.06);
}

.page-day .settlement-main > span {
  color: #684c30;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: .08em;
}

.page-day .settlement-main strong {
  margin: 10px 0 3px;
  font: 700 82px/.9 Georgia, serif;
}

.page-day .settlement-main small { color: #75583a; font-size: 12px; }

.page-day .settlement dl {
  display: grid;
  align-content: start;
  gap: 0;
  margin: 0;
  border-top: 0;
}

.page-day .settlement dl > div {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 16px;
  padding: 20px 18px 18px;
  border-bottom: 1px solid rgba(83,58,33,.28);
}

.page-day .settlement dt { color: #6c5135; font-size: 13px; }
.page-day .settlement dd { margin: 0; color: #2d1e13; font: 700 22px/1 Georgia, serif; }
.page-day .settlement dd small { font: 11px/1.2 "Gowun Batang", serif; }
.page-day .settlement > .note {
  align-self: end;
  margin: 0 !important;
  padding: 13px 18px 16px;
}

/* 무리와 개는 수치 카드가 아니라 이름을 따라 읽는 개체 장부다. */
.page-day .flock-ledger { max-width: 760px; }

.page-day .flock-total {
  min-height: 104px;
  display: grid;
  grid-template-columns: auto auto 1fr;
  align-items: baseline;
  gap: 8px;
  padding: 14px 8px 17px;
  border-top: 2px solid #8f6b42;
  border-bottom: 1px solid rgba(83,58,33,.3);
}

.page-day .flock-total > span { color: #654a30; font-size: 13px; font-weight: 700; }
.page-day .flock-total > strong { color: #2b1d13; font: 700 58px/.9 Georgia, serif; }
.page-day .flock-total > small { color: #6d5337; font-size: 13px; }

.page-day .flock-roster,
.page-day .dogs-roster ul,
.page-day .dogs-priority ul {
  display: grid;
  grid-template-columns: 1fr;
  gap: 0;
  margin: 0;
  padding: 0;
  list-style: none;
  border-top: 1px solid rgba(83,58,33,.28);
}

.page-day .flock-roster > li,
.page-day .dogs-roster li,
.page-day .dogs-priority li {
  min-height: 58px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 14px;
  padding: 14px 10px 12px 7px;
  border-bottom: 1px solid rgba(83,58,33,.24);
  font-size: 14px;
}

.page-day .flock-roster > li > b,
.page-day .dogs-roster li > b { color: #2c1e14; font-size: 15px; }

.page-day .flock-roster > li small,
.page-day .dogs-roster li small,
.page-day .dogs-priority li small {
  color: #71573a;
  font-size: 12px;
  text-align: right;
}

.page-day .dogs-ledger {
  display: grid;
  grid-template-columns: minmax(260px, 1fr) minmax(260px, 1fr);
  gap: 28px;
  max-width: 780px;
}

.page-day .dogs-ledger section { min-width: 0; }
.page-day .dogs-ledger h3 {
  min-height: 42px;
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  margin: 0;
  padding: 7px 7px 9px;
  color: #302117;
  border-top: 2px solid #8f6b42;
  font-size: 14px;
}
.page-day .dogs-ledger h3 span { color: #705438; font-size: 12px; font-weight: 400; }
.page-day .dogs-priority a { color: #3d5e32; font-weight: 700; text-underline-offset: 3px; }
.page-day .dogs-ledger > .note { grid-column: 1 / -1; margin-top: -10px !important; }

/* 창고는 보유 수치 + 실제 물건 행으로 채우고 빈 상태도 장소를 보여 준다. */
.page-day .store-summary {
  min-height: 74px;
  display: grid;
  grid-template-columns: auto auto auto 1fr;
  align-items: baseline;
  gap: 7px;
  padding: 10px 0 13px;
  color: #594128;
  border-bottom: 2px solid #9b7547;
}

.page-day .store-summary > span { font-size: 12px; font-weight: 700; letter-spacing: .06em; }
.page-day .store-summary strong { color: #291c12; font: 700 48px/1 Georgia, serif; }
.page-day .store-summary small { font-size: 12px; }
.page-day .store-summary em {
  justify-self: end;
  padding: 6px 9px;
  color: #3f2c1c;
  border: 1px solid #987246;
  background: #c7a66f;
  font-size: 12px;
  font-style: normal;
  font-weight: 700;
}

.page-day .store-ledger {
  display: grid;
  grid-template-columns: 1fr;
  margin-top: 10px;
  border-top: 1px solid rgba(83,59,34,.28);
}

.page-day .stored-good {
  min-height: 74px;
  display: grid;
  grid-template-columns: 54px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  padding: 7px 9px 7px 3px;
  border-bottom: 1px solid rgba(83,59,34,.28);
}

.page-day .stored-art {
  width: 48px;
  height: 48px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 rgba(62,40,23,.18));
}

.page-day .stored-art[data-slot="flock"] { background-image: url("/art/sheep/v1/sheet-4x3.png"); }
.page-day .stored-art[data-slot="train"] { background-image: url("/art/day/goods/good-driedMeat-96-v1.png"); }
.page-day .stored-art[data-slot="heal"] { background-image: url("/art/day/goods/good-oilJar-96-v1.png"); }
.page-day .stored-art[data-slot="vigor"] { background-image: url("/art/day/goods/good-grainSack-96-v1.png"); }
.page-day .stored-art[data-slot="david"] { background-image: url("/art/day/goods/good-apron-96-v1.png"); }

.page-day .stored-copy { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.page-day .stored-copy b { color: #2d2016; font-size: 15px; }
.page-day .stored-copy small { color: #6d5236; font-size: 12px; line-height: 1.45; }

.page-day .bkempty-copy {
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 6px;
}

.page-day .bkempty.store-empty {
  min-height: 400px;
  display: grid;
  grid-template-columns: 340px minmax(220px, 1fr);
  align-items: center;
  gap: 34px;
  margin-top: 12px;
  padding: 24px 14px 20px;
}

.page-day .store-empty-scene {
  position: relative;
  width: 100%;
  min-height: 320px;
  display: block;
  overflow: hidden;
  border-bottom: 3px solid #795535;
  background: linear-gradient(180deg, rgba(130,151,111,.2), rgba(113,83,48,.08));
}

.page-day .storehouse-art {
  position: absolute;
  left: 50%;
  bottom: 2px;
  width: 320px;
  height: 320px;
  background: url("/art/day/epilogue/storehouse-field-facing-160-v3.png") center bottom / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(4px 5px 0 rgba(64,42,24,.22));
  transform: translateX(-50%);
}
.page-day .bkempty-copy b { font-size: 18px; }
.page-day .bkempty-copy small { font-size: 13px; }
.page-day .bkempty-copy em { font-size: 12px; }

/* 상점은 타일 여섯 장이 아니라 수레에 놓인 거래 행 여섯 줄이다. */
.page-day #bkbody[data-tab="merchant"] .bkcontent { padding-top: 24px; }

.page-day #bkbody[data-tab="merchant"] .bkcontent > p:first-child {
  margin: 0 0 12px;
  padding: 0 0 11px;
  color: #42301f;
  border: 0;
  border-bottom: 2px solid #9b7547;
  background: none;
  font-size: 14px;
  font-weight: 700;
}

.page-day #bkbody[data-tab="merchant"] .grid6 {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 0 18px;
  margin: 0;
  padding: 0;
  border-top: 1px solid rgba(76,52,29,.32);
  min-width: 0;
}

.page-day #bkbody[data-tab="merchant"] .gcard {
  min-width: 0;
  min-height: 124px;
  display: grid;
  grid-template-columns: 96px minmax(0, 1fr);
  grid-template-rows: minmax(68px, auto) auto;
  align-items: center;
  gap: 5px 12px;
  margin: 0;
  padding: 10px 6px 10px 3px;
  overflow: hidden;
  color: #2d2016;
  border: 0;
  border-bottom: 1px solid rgba(76,52,29,.32);
  border-radius: 0;
  background: transparent;
  box-shadow: none;
  filter: none;
  opacity: 1;
  font: inherit;
  text-align: left;
}

.page-day #bkbody[data-tab="merchant"] button.gcard { cursor: pointer; }
.page-day #bkbody[data-tab="merchant"] button.gcard:disabled { cursor: default; opacity: 1; filter: none; }

.page-day #bkbody[data-tab="merchant"] .gcard.buyable:hover,
.page-day #bkbody[data-tab="merchant"] .gcard.buyable:focus-visible {
  z-index: 1;
  transform: translateX(3px);
  border-color: #486438;
  background: linear-gradient(90deg, rgba(95,124,70,.12), transparent 80%);
  box-shadow: inset 3px 0 #5f7b48;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi {
  position: relative;
  grid-column: 1;
  grid-row: 1 / 3;
  width: 96px;
  height: 96px;
  margin: 0;
  border: 0;
  border-right: 1px solid rgba(75,51,28,.24);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
  filter: drop-shadow(3px 4px 0 rgba(69,45,24,.18));
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi::before {
  content: "";
  position: absolute;
  inset: 4px;
  display: block;
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  image-rendering: pixelated;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="flock"]::before { background-image: url("/art/sheep/v1/sheet-4x3.png"); }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="train"]::before { background-image: url("/art/day/goods/good-driedMeat-96-v1.png"); }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="heal"]::before { background-image: url("/art/day/goods/good-oilJar-96-v1.png"); }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="vigor"]::before { background-image: url("/art/day/goods/good-grainSack-96-v1.png"); }
.page-day #bkbody[data-tab="merchant"] .gcard .gi[data-slot="david"]::before { background-image: url("/art/day/goods/good-apron-96-v1.png"); }
.page-day #bkbody[data-tab="merchant"] .gcard .gi.has-art::before { display: none; }

.page-day #bkbody[data-tab="merchant"] .gcopy {
  grid-column: 2;
  grid-row: 1;
  min-width: 0;
  align-self: stretch;
  display: flex;
  flex-direction: column;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gh {
  min-height: 0;
  margin: 0 0 4px;
  padding: 0 0 3px;
  font-size: 11px;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gn {
  color: #24180f;
  font-size: 15px;
  line-height: 1.35;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gs {
  min-height: 0;
  margin-top: 3px;
  color: #5f452c;
  font-size: 12px;
  line-height: 1.38;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gbar {
  height: 3px;
  margin: auto 0 0;
  overflow: hidden;
  border: 0;
  background: rgba(55,37,21,.12);
}

.page-day #bkbody[data-tab="merchant"] .gcard .gbar i {
  display: block;
  height: 100%;
  background: #607642;
}

.page-day #bkbody[data-tab="merchant"] .gcard.poor .gbar i { background: #9a4d3d; }

.page-day #bkbody[data-tab="merchant"] .gtrade {
  grid-column: 2;
  grid-row: 2;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 8px;
  min-width: 0;
  padding-top: 5px;
  border-top: 1px solid rgba(76,52,29,.2);
}

.page-day #bkbody[data-tab="merchant"] .gcard .gp {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 2px 4px;
  color: #4a3421;
  font-size: 12px;
  min-width: 0;
  white-space: normal;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gp b {
  color: #23170e;
  font: 700 21px/1 Georgia, serif;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gown {
  margin-left: 3px;
  color: #73573a;
  font-size: 11px;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gw {
  flex: none;
  padding: 3px 5px;
  color: #7b3d32;
  border: 1px solid rgba(129,61,48,.42);
  background: rgba(155,73,57,.07);
  font-size: 12px;
  font-weight: 700;
  line-height: 1.25;
  max-width: 100%;
  white-space: normal;
  text-align: center;
  opacity: 1;
}

.page-day #bkbody[data-tab="merchant"] .gcard .gw.ok {
  color: #36562b;
  border-color: rgba(64,94,47,.45);
  background: rgba(86,119,64,.1);
}

/* 일기는 오늘의 장과 지난 장을 분리해 빈 종이처럼 보이지 않게 한다. */
.page-day .diary-today {
  border-top: 2px solid #8d673f;
  border-bottom: 1px solid rgba(80,55,31,.28);
  background: linear-gradient(90deg, rgba(114,79,42,.07), transparent 80%);
}

.page-day .diary-today > header {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 18px;
  padding: 11px 13px 10px;
  color: #65482d;
  border-bottom: 1px solid rgba(80,55,31,.26);
}

.page-day .diary-today > header span {
  font: 700 12px/1 "Gowun Batang", "Malgun Gothic", serif;
  letter-spacing: .14em;
}

.page-day .diary-today > header b { color: #302117; font-size: 15px; }
.page-day .diary-today .diary { max-width: none; margin: 0; align-self: stretch; padding: 25px 14px 25px 34px; }

.page-day .diary-page {
  min-height: 286px;
  display: grid;
  grid-template-columns: 208px minmax(0, 1fr);
  align-items: center;
  gap: 22px;
  padding: 16px 18px;
}

.page-day .diary-scene {
  width: 192px;
  height: 192px;
  background: url("/art/day/objects/diary-open-96.png") center / contain no-repeat;
  image-rendering: pixelated;
  filter: drop-shadow(5px 6px 0 rgba(67,43,24,.19));
}

.page-day .diary-quiet {
  min-height: 0;
  display: flex;
  align-items: center;
  padding: 20px 14px;
}

.page-day .diary-quiet p { display: flex; flex-direction: column; gap: 5px; margin: 0; }
.page-day .diary-quiet b { color: #342419; font-size: 18px; }
.page-day .diary-quiet small { color: #72583c; font-size: 13px; line-height: 1.5; }

.page-day .diary-history {
  margin-top: 24px;
  border-top: 2px solid #8d673f;
}

.page-day .diary-history > header {
  min-height: 42px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 8px 4px;
  border-bottom: 1px solid rgba(80,55,31,.26);
}

.page-day .diary-history h4 {
  margin: 0;
  color: #5e4229;
  font-size: 12px;
  letter-spacing: .08em;
}

.page-day .diary-history > header span { color: #765a3b; font-size: 12px; }
.page-day .diary-history > .pv { margin: 0; padding: 18px 4px; }
.page-day .diary-history-list { padding: 8px 2px 1px; }
.page-day .diary-archive { margin-top: 10px; border-top: 1px solid rgba(80,55,31,.28); }
.page-day .diary-archive summary {
  min-height: 44px;
  display: flex;
  align-items: center;
  padding: 9px 4px;
  color: #4b3522;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

/* 이어가기와 오류 복구는 장부/회전 안내보다 먼저 읽히는 플레이어 상태다. */
.page-day #recovery {
  position: absolute;
  z-index: 142;
  left: 50%;
  top: 78px;
  width: min(620px, calc(100% - 36px));
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 12px 14px 12px 17px;
  color: #f0dfbd;
  border: 1px solid #b79053;
  border-left-width: 4px;
  background: rgba(35,24,16,.97);
  box-shadow: 5px 6px 0 rgba(5,3,2,.38);
  font-size: 13px;
  line-height: 1.55;
  transform: translateX(-50%);
}

.page-day #recovery[hidden] { display: none; }
.page-day #recovery-text { flex: 1; }
.page-day #recovery-action {
  flex: none;
  min-height: 38px;
  padding: 8px 12px;
  color: #23170f;
  border: 1px solid #f0d08d;
  border-radius: 0;
  background: #d6ae64;
  font: 700 13px "Gowun Batang", "Malgun Gothic", serif;
}

.page-day #recovery-action:hover { background: #efd28f; }

/* 세로폰에서는 축소 무대 대신 명확한 가로 회전 안내를 보여 준다. */
.page-day #day-rotate-gate { display: none; }
.page-day #day-rotate-gate:focus { outline: none; }
.page-day #day-rotate-gate:focus-visible .day-rotate-card {
  box-shadow: 0 0 0 2px #d3ad68, 0 0 0 5px #100a06, 8px 10px 0 rgba(5,3,2,.42), inset 0 0 0 1px rgba(235,202,139,.11);
}

@media (orientation: portrait) and (max-width: 900px) {
  .page-day #day-rotate-gate {
    position: fixed;
    z-index: 120;
    inset: 0;
    display: grid;
    place-items: center;
    padding: max(24px, env(safe-area-inset-top)) 24px max(24px, env(safe-area-inset-bottom));
    color: #ead9b8;
    background:
      radial-gradient(circle at 50% 28%, rgba(130,96,55,.2), transparent 34%),
      #160f0a;
  }

  .page-day .day-rotate-card {
    width: min(330px, 100%);
    display: grid;
    justify-items: center;
    padding: 26px 22px 24px;
    border: 1px solid #755438;
    background:
      linear-gradient(180deg, rgba(236,202,136,.06), transparent 26%),
      #2a1c13;
    box-shadow: 0 0 0 3px #100a06, 8px 10px 0 rgba(5,3,2,.42), inset 0 0 0 1px rgba(235,202,139,.11);
  }

  .page-day .day-rotate-art {
    width: 192px;
    height: 192px;
    background: url("/art/day/objects/diary-reading-table-96-v1.png") center / contain no-repeat;
    image-rendering: pixelated;
    filter: drop-shadow(6px 8px 0 rgba(6,4,2,.36));
  }

  .page-day .day-rotate-card p {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 7px;
    margin: 17px 0 0;
    text-align: center;
  }

  .page-day .day-rotate-card small {
    color: #9e7d51;
    font: 700 11px/1.4 "Gowun Batang", "Malgun Gothic", serif;
    letter-spacing: .14em;
  }

  .page-day .day-rotate-card b { color: #f0dfbe; font-size: 21px; line-height: 1.3; }
  .page-day .day-rotate-card p > span { color: #bca685; font-size: 13px; line-height: 1.62; }

  .page-day:has(#recovery:not([hidden])) #day-rotate-gate { display: none; }
  .page-day #recovery:not([hidden]) { z-index: 160; }
}

/* 760×430과 같은 낮은 가로 화면: 행동부를 하단으로 접고 본문 13px을 지킨다. */
@media (orientation: landscape) and (max-width: 900px),
       (orientation: landscape) and (max-height: 520px) {
  .page-day #book { padding: 4px; }

  .page-day .bk,
  .page-day .bk[data-tab] {
    width: calc(100vw - 8px);
    height: calc(100vh - 8px) !important;
    max-height: calc(100vh - 8px) !important;
    grid-template-columns: 108px minmax(0, 1fr);
    grid-template-rows: minmax(0, 1fr) 58px;
  }

  .page-day .bkrail { grid-column: 1; grid-row: 1 / 3; }
  .page-day .bkbrand { min-height: 44px; padding: 4px 6px 3px; }
  .page-day .bkbrand b { font-size: 18px; }
  .page-day .bkbrand span { margin-top: 2px; font-size: 10px; }
  .page-day .bk nav { gap: 2px; padding: 3px 6px; }

  .page-day .bk nav button {
    min-height: 44px;
    grid-template-columns: 1fr;
    padding: 5px 7px;
    font-size: 14px;
  }

  .page-day .bk nav button.x { min-height: 44px; margin-top: 0; }
  .page-day .bk nav .grow { min-height: 0; flex: 0 0 0; }
  .page-day .bknav-code { display: none; }

  .page-day .bkmain { grid-column: 2; grid-row: 1; }

  .page-day #bkbody {
    grid-template-columns: 158px minmax(0, 1fr);
    font-size: 13px;
    line-height: 1.48;
  }

  .page-day .bkhero { padding: 15px 13px 12px; }
  .page-day .bkhero h2 { font-size: 21px; }
  .page-day .bkhero p { margin-top: 6px; font-size: 13px; line-height: 1.42; }
  .page-day .bkhero-art { height: 92px; margin: auto 0 5px; }
  .page-day .bkhero-stat { padding: 7px 8px; }
  .page-day .bkhero-stat strong { font-size: 13px; }
  .page-day .bkhero-stat span { font-size: 12px; }
  .page-day .bkcontent { padding: 14px 16px 20px; overflow-x: hidden; }

  .page-day #bkbody[data-tab="store"] {
    grid-template-columns: minmax(0, 1fr);
    grid-template-rows: 68px minmax(0, 1fr);
  }

  .page-day #bkbody[data-tab="store"] .bkhero {
    grid-column: 1;
    grid-row: 1;
    min-height: 68px;
    flex-direction: row;
    align-items: center;
    gap: 12px;
    padding: 8px 14px;
    border-right: 0;
    border-bottom: 2px solid #a27845;
  }

  .page-day #bkbody[data-tab="store"] .bkhero::after { inset: 5px; }

  .page-day #bkbody[data-tab="store"] .bkhero-copy {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: baseline;
    gap: 10px;
  }

  .page-day #bkbody[data-tab="store"] .bkhero h2 {
    flex: none;
    max-width: none;
    font-size: 18px;
  }

  .page-day #bkbody[data-tab="store"] .bkhero p {
    min-width: 0;
    margin: 0;
    overflow: hidden;
    font-size: 13px;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .page-day #bkbody[data-tab="store"] .bkhero-stat {
    order: 2;
    flex: none;
    min-width: 110px;
    padding: 6px 9px;
  }

  .page-day #bkbody[data-tab="store"] .bkcontent {
    grid-column: 1;
    grid-row: 2;
  }

  .page-day .bkaction {
    grid-column: 2;
    grid-row: 2;
    min-height: 58px;
    flex-direction: row;
    align-items: center;
    gap: 10px;
    padding: 6px 8px 6px 13px;
    border: 0;
    border-top: 2px solid #8c653d;
    background: #d4bb89;
  }

  .page-day .bkaction-copy { flex: 1; gap: 1px; }
  .page-day .bkaction-copy > b { font-size: 13px; }
  .page-day .bk .bkaction-copy .note { font-size: 12px; line-height: 1.3; }
  .page-day .bk .bkaction button.main { width: auto; min-width: 190px; min-height: 44px; padding: 8px 12px; font-size: 14px; }

  .page-day .settlement { min-height: 0; grid-template-columns: minmax(136px, .78fr) minmax(170px, 1.22fr); gap: 0; margin-top: 0; }
  .page-day .settlement-main { min-height: 178px; padding: 18px 20px; }
  .page-day .settlement-main strong { font-size: 54px; }
  .page-day .settlement dl > div { padding: 10px 12px; }
  .page-day .settlement > .note { padding: 8px 12px 10px; }

  .page-day .flock-total { min-height: 72px; padding: 8px 4px 10px; }
  .page-day .flock-total > strong { font-size: 42px; }
  .page-day .flock-roster > li,
  .page-day .dogs-roster li,
  .page-day .dogs-priority li { min-height: 48px; padding: 9px 5px 8px; }
  .page-day .dogs-ledger { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 16px; }
  .page-day .dogs-ledger h3 { min-height: 38px; padding: 5px 4px 7px; }

  .page-day #bkbody[data-tab="store"] .store-summary { display: none; }
  .page-day .store-summary strong { font-size: 38px; }
  .page-day .bkempty.store-empty { min-height: 164px; grid-template-columns: 165px minmax(150px, 1fr); gap: 14px; margin-top: 5px; padding: 2px 4px; }
  .page-day .store-empty-scene { min-height: 160px; }
  .page-day .storehouse-art { width: 160px; height: 160px; }
  .page-day .bkempty-copy b { font-size: 16px; }
  .page-day .bkempty-copy small { font-size: 13px; }

  .page-day #bkbody[data-tab="merchant"] { grid-template-columns: 132px minmax(0, 1fr); }
  .page-day #bkbody[data-tab="merchant"] .bkcontent { padding: 11px 13px 16px; }
  .page-day #bkbody[data-tab="merchant"] .bkcontent > p:first-child { margin-bottom: 6px; padding-bottom: 6px; font-size: 13px; }
  .page-day #bkbody[data-tab="merchant"] .grid6 { gap: 0 10px; }
  .page-day #bkbody[data-tab="merchant"] .gcard { min-height: 114px; grid-template-columns: 56px minmax(0, 1fr); gap: 3px 8px; padding: 7px 2px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gi { width: 56px; height: 96px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gh,
  .page-day #bkbody[data-tab="merchant"] .gcard .gown { font-size: 12px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gn { font-size: 14px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gs { font-size: 13px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gp b { font-size: 18px; }
  .page-day #bkbody[data-tab="merchant"] .gtrade { align-items: baseline; justify-content: flex-start; gap: 4px 7px; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gp { white-space: normal; }
  .page-day #bkbody[data-tab="merchant"] .gcard .gw { padding: 3px 5px; font-size: 12px; white-space: normal; }

  .page-day .diary-page { min-height: 145px; grid-template-columns: 104px minmax(0, 1fr); gap: 14px; padding: 10px 12px; }
  .page-day .diary-scene { width: 96px; height: 96px; }
  .page-day .diary-today .diary { padding: 12px 8px 12px 26px; }
  .page-day .diary-quiet { padding: 10px 8px; }
  .page-day .diary-quiet small { font-size: 13px; }
  .page-day .diary-history { margin-top: 13px; }
  .page-day .diary-history > header { min-height: 36px; padding: 5px 3px; }
}