/* 새 그림 없이 크림 종이와 묶은 자국으로 만드는 탐험 일지. */
.record-screen { position: relative; min-height: 100dvh; padding: 10px 8px 18px; display: block; background: #e9d5ae; }
.record-book { position: relative; z-index: 1; display: flex; flex-direction: column; gap: 24px; min-height: calc(100dvh - 28px); padding: 24px 18px 30px 32px; border: 6px solid #738168; border-radius: 14px 26px 28px 14px; background-color: #fbefd6;
  background-image: radial-gradient(ellipse at 50% 35%, #fffaf188, #ead0a329), radial-gradient(#8a6a5512 .5px, transparent .8px), radial-gradient(#fffaf1aa .7px, transparent 1px);
  background-size: auto, 5px 6px, 7px 9px; background-position: center, 0 0, 3px 4px;
  box-shadow: 0 5px 0 #59684f, 0 7px 16px #4a3b3044, inset 0 0 0 2px #b78858, inset 0 0 30px #a76d2c28; }
.record-left, .record-right { display: contents; }
.record-head { order: 0; display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.record-head h1 { font-size: clamp(24px, 3.5vmin, 36px); line-height: 1.15; font-weight: normal; }
.record-head button { font-size: clamp(14px, 1.8vmin, 18px); flex: none; min-width: 72px; padding: 2px 10px; box-shadow: 0 2px 0 #8a6a5526; }
.record-stats { order: 1; display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); }
.record-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; padding: 0 5px; }
.record-stat + .record-stat { border-left: 1px solid #bfa88077; }
.record-stat > span { font-size: clamp(14px, 1.8vmin, 18px); color: #695848; }
.record-stat strong { color: #4b633e; font-size: clamp(26px, 3.4vmin, 42px); line-height: 1.1; font-weight: normal; }
.record-illustration { order: 2; margin: 0; width: 100%; aspect-ratio: 16 / 9; overflow: hidden; border: 2px solid #b99b6f77; border-radius: 14px; box-shadow: 0 3px 4px #8a6a5526; }
.record-illustration img { width: 100%; height: 100%; object-fit: cover; }
.record-calendar { order: 3; display: flex; flex-direction: column; min-width: 0; gap: 5px; }
.calendar-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.calendar-head h2 { font-size: clamp(21px, 2.6vmin, 29px); line-height: 1.1; font-weight: normal; }
.calendar-head button { width: 44px; height: 44px; padding: 0; font-size: 32px; line-height: 1; border: 1px solid #bca37e66; background: #fffaf155; border-radius: 50%; }
.calendar-head button:disabled { opacity: 1; color: #695848; border-style: dashed; background: transparent; }
.calendar-weekdays, .calendar-days { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 4px; }
.calendar-weekdays { text-align: center; color: #695848; font-size: clamp(14px, 1.7vmin, 18px); }
.calendar-days { grid-template-rows: repeat(var(--weeks), minmax(0, 1fr)); }
.calendar-day { position: relative; aspect-ratio: 1.25; min-width: 0; border: 1px solid #c9ad7e77; border-radius: 5px; background: #fffaf144; }
.calendar-day.today { border: 2px solid var(--orange-d); background: #e8a46a22; }
.calendar-day.future { border-style: dashed; }
.day-number { position: absolute; left: 4px; top: 1px; font-size: clamp(14px, 1.65vmin, 17px); line-height: 1.1; color: #695848; }
.calendar-day.today .day-number { color: var(--ink); }
.paw-stamp { position: absolute; right: 9%; bottom: 4%; width: 60%; max-width: clamp(22px, 3.5vmin, 36px); aspect-ratio: 1; color: #77966a; transform: rotate(-12deg); opacity: .85; }
.paw-stamp svg { display: block; width: 100%; height: 100%; }
.calendar-legend { font-size: clamp(14px, 1.55vmin, 16px); color: #695848; margin-top: 4px; }
.record-places { order: 4; display: flex; flex-direction: column; gap: 12px; }
.record-places h2, .record-drills h2 { color: #55663f; font-size: clamp(23px, 3vmin, 32px); font-weight: normal; line-height: 1.15; }
.record-place-line { border-bottom: 1px dotted #b29875; padding-bottom: 6px; }
.record-place-label { display: flex; justify-content: space-between; gap: 8px; font-size: clamp(16px, 2vmin, 22px); }
.record-place-label > span:last-child { color: #864b24; }
.place-stamps { display: flex; gap: 7px; margin-top: 5px; }
.place-stamps span { width: clamp(10px, 1.6vmin, 15px); aspect-ratio: 1; border: 1.5px solid #b3a17f; border-radius: 50%; }
.place-stamps span.done { border-color: #829b6c; background: #829b6c; }
.record-drills { order: 5; display: flex; flex-direction: column; gap: 12px; }
.drill-lines { display: flex; flex-direction: column; gap: 8px; }
.record-drill-line, .record-empty { font-size: clamp(15px, 1.9vmin, 21px); line-height: 1.35; }
.journal-binding { position: absolute; left: 4px; top: 5%; bottom: 5%; width: 18px; display: flex; flex-direction: column; justify-content: space-around; pointer-events: none; }
.journal-binding i { display: block; width: 15px; height: 7px; border: 2px solid #99704d; border-radius: 50%; background: linear-gradient(#c9ad7b, #f8e3b6, #a47a4f); box-shadow: 1px 1px 2px #4a3b3055; transform: rotate(-9deg); }
.record-screen button:focus-visible { outline: 3px solid var(--ink); outline-offset: 3px; }
.record-grade { order: 7; display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-top: 10px; border-top: 1px dashed #8a6a55; font-size: 16px; }
.record-grade button { min-height: 44px; padding: 4px 12px; }
.record-screen :is(p, h1, h2, span) { text-wrap: pretty; }
@media (min-aspect-ratio: 1/1), (min-width: 760px) {
  .record-screen { position: fixed; inset: 0; min-height: 0; padding: 16px; overflow: hidden; background: #4a3b30; }
  .record-screen::before { content: ''; position: absolute; inset: 0; background: var(--journal-map) center / cover; filter: brightness(.67); }
  .record-book { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: clamp(36px, 4vw, 72px); height: calc(100dvh - 32px); min-height: 0; padding: clamp(20px, 3vmin, 34px); border-radius: 28px; }
  .record-book::after { content: ''; position: absolute; top: 0; bottom: 0; left: calc(50% - 10px); width: 20px; background: linear-gradient(90deg, transparent, #92734b38 45%, #5f513e55 50%, #fff9e855 65%, transparent); pointer-events: none; }
  .record-left, .record-right { display: flex; flex-direction: column; min-height: 0; gap: clamp(12px, 2vmin, 24px); }
  .record-left { grid-column: 1; grid-row: 1; overflow-y: auto; }
  .record-right { grid-column: 2; grid-row: 1; overflow-y: auto; padding: 0 4px 4px; }
  .record-illustration { flex: none; min-height: 0; aspect-ratio: 16 / 9; }
  /* 낮은 가로 화면은 왼쪽 면을 내려 읽는다. 날짜 줄을 눌러 줄이면 글자와 안내가 겹친다. */
  .record-calendar { flex: 1 0 auto; min-height: 0; }
  .calendar-days { flex: 1 0 auto; min-height: 0; grid-template-rows: repeat(var(--weeks), minmax(28px, 1fr)); }
  .calendar-day { aspect-ratio: auto; }
  .calendar-legend { flex: none; }
  .record-head, .record-stats { order: initial; flex: none; }
  .record-stats { padding: clamp(10px, 1.6vmin, 20px) 0; }
  .record-places { flex: none; gap: clamp(8px, 1.4vmin, 16px); }
  .record-place-line { padding-bottom: 4px; }
  .record-drills { gap: 10px; }
  .record-grade { margin-top: auto; flex: none; }
  .dense-drills .drill-lines { gap: 4px; }
  .dense-drills .record-drill-line { font-size: 15px; }
  .dense-record .record-right { gap: 10px; }
  .dense-record .record-stats { padding: 6px 0; }
  .dense-record .record-stat strong { font-size: 28px; }
  .dense-record .record-stat > span { font-size: 14px; }
  .dense-record .record-places { gap: 4px; }
  .dense-record .record-place-label { font-size: 14px; line-height: 1.2; }
  .dense-record .record-place-line { padding-bottom: 2px; }
  .dense-record .place-stamps { margin-top: 3px; }
  .dense-record .place-stamps span { width: 10px; }
  .dense-record .record-places h2, .dense-record .record-drills h2 { font-size: 23px; }
  .dense-record .record-drills { gap: 8px; }
  .dense-record .drill-lines { gap: 4px 12px; }
  .journal-binding { z-index: 2; left: calc(50% - 8px); width: 16px; }
}
@media (min-width: 1100px) {
  .dense-drills .drill-lines { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); }
}