/* 웹 방명록(2026-09-25) — 가입하면서 이름·생년월일을 적는다. guestbook-form.js 가 #signed-in 맨 위에 세운다. */
.guestbook-panel { margin: 0 0 18px; padding: 22px 18px; border: 1px solid #b5a17699; border-radius: 12px; background: #1b2436; color: #f0e6ce; }
.guestbook-panel[data-state="done"] { padding: 14px 18px; background: #172030; }
.guestbook-panel h2 { margin: 4px 0 6px; font-size: 22px; line-height: 1.4; word-break: keep-all; overflow-wrap: anywhere; }
.guestbook-panel[data-state="done"] h2 { font-size: 17px; }
.guestbook-panel h2:focus, .guestbook-confirm h3:focus { outline: none; }
.guestbook-kicker { margin: 0; color: #d9bd7c; font-size: 14px; letter-spacing: .02em; }
.guestbook-panel .hint { margin: 6px 0 0; color: #c4c9d4; font-size: 15px; line-height: 1.6; overflow-wrap: anywhere; }
.guestbook-panel .status { margin: 0; font-size: 16px; line-height: 1.6; }
.guestbook-panel .status.error { color: #ffb4a8; }
.my-card-page { max-width: 560px; margin: 20px auto 40px; padding: 0 16px; }
#my-card-status .guestbook-panel { margin: 12px 0; text-align: left; }

/* 나이 드신 손님 기준(2026-09-26): 칸 제목 16px 이상, 적는 글자 18px 이상, 누르는 자리 48px 이상.
   열은 minmax(0,…) 로 — 글자를 키운 폰에서 칸의 기본 폭이 열을 밀어내지 않게(6ba737a). */
.guestbook-panel form { display: grid; grid-template-columns: minmax(0, 1fr); gap: 26px; max-width: 620px; margin-top: 18px; }
.guestbook-panel form[hidden], .guestbook-confirm[hidden] { display: none; }
.guestbook-field { display: grid; gap: 8px; min-width: 0; margin: 0; font-size: 17px; }
.guestbook-field > span, .guestbook-panel .birth-label, .guestbook-panel .birth-calendar legend { color: #f7eed8; font-size: 17px; font-weight: 600; line-height: 1.45; }
.guestbook-field input, .guestbook-field select, .guestbook-panel .birth-date-input, .guestbook-panel .birth-time select {
  width: 100%; min-width: 0; min-height: 54px; padding: 10px 12px; box-sizing: border-box; border: 1px solid #8e98ae; border-radius: 10px;
  background: #0d1424; color: #fbf3de; font: 19px/1.3 system-ui, sans-serif; color-scheme: dark; }
.guestbook-field small { color: #c4c9d4; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
/* 적기 단추를 눌렀는데 빠진 칸 — 까닭은 칸 바로 밑에 빨간 말로(폼 아래 문구는 휴대폰에서 화면 밖이다). */
.guestbook-field small.error { color: #ffc4b8; font-size: 16px; font-weight: 600; }
.guestbook-panel :is(input, select)[aria-invalid="true"] { border-color: #ff9d8c; }
/* 한국어만 낱말 안에서 끊지 않는다 — 일본어는 띄어쓰기가 없어 keep-all 이면 줄이 안 바뀐다(i18n-ja.js 가 html lang 을 ja 로). */
.guestbook-panel:lang(ko) :is(h2, h3, .hint, .status, .guestbook-field small, .birth-date-spell, .birth-time-line, .birth-time-note,
  .guestbook-summary dd, .guestbook-warning, .guestbook-actions button) { word-break: keep-all; }
.guestbook-panel :is(input, select):focus-visible { outline: 3px solid #f1d58f; outline-offset: 2px; }

/* 생년월일 — 양력·음력 큰 단추 둘, 윤달(음력만), 숫자 여덟 자리, 바로 밑에서 읽어 주는 큰 줄. */
.guestbook-birth { display: grid; gap: 18px; min-width: 0; }
.guestbook-panel .birth-calendar { min-width: 0; margin: 0; padding: 0; border: 0; }
.guestbook-panel .birth-calendar legend { margin: 0 0 8px; padding: 0; }
.guestbook-panel .birth-calendar-choices { display: flex; flex-wrap: wrap; gap: 10px; }
.guestbook-panel .birth-calendar-choice { position: relative; flex: 1 1 5em; min-width: 0; margin: 0; cursor: pointer; }
.guestbook-panel .birth-calendar-choice input { position: absolute; width: 1px; height: 1px; opacity: 0; }
.guestbook-panel .birth-calendar-choice span { display: flex; align-items: center; justify-content: center; min-height: 54px; padding: 8px 10px; box-sizing: border-box;
  border: 1px solid #8e98ae; border-radius: 10px; background: #0d1424; color: #e3e7ef; font: 600 19px/1.3 system-ui, sans-serif; text-align: center; }
.guestbook-panel .birth-calendar-choice input:checked + span { border-color: #e0c387; background: #e0c387; color: #182030; }
.guestbook-panel .birth-calendar-choice input:focus-visible + span { outline: 3px solid #f1d58f; outline-offset: 2px; }
.guestbook-panel .birth-leap { display: flex; align-items: center; gap: 12px; min-height: 48px; margin: 10px 0 0; color: #f7eed8; font-size: 17px; line-height: 1.4; cursor: pointer; }
.guestbook-panel .birth-leap[hidden] { display: none; }
.guestbook-panel .birth-leap input { flex: none; width: 26px; height: 26px; margin: 0; accent-color: #e0c387; }
.guestbook-panel .birth-date { display: grid; gap: 8px; min-width: 0; }
.guestbook-panel .birth-label { display: block; margin: 0; }
.guestbook-panel .birth-date-input { min-height: 60px; font-size: 26px; letter-spacing: .08em; font-variant-numeric: tabular-nums; }
.guestbook-panel .birth-date-input::placeholder { color: #8a93a7; font-size: 20px; letter-spacing: .02em; }
.guestbook-panel .birth-date-spell { display: grid; gap: 4px; margin: 0; padding: 12px 14px; border-left: 4px solid #5d6882; border-radius: 0 10px 10px 0; background: #0f192b;
  overflow-wrap: anywhere; }
.guestbook-panel .birth-date-spell strong { color: #cdd3de; font-size: 20px; font-weight: 600; line-height: 1.45; }
.guestbook-panel .birth-date-spell small { color: #c4c9d4; font-size: 15px; line-height: 1.5; }
.guestbook-panel .birth-date-spell small[hidden] { display: none; }
.guestbook-panel .birth-date-spell:is([data-state="empty"], [data-state="partial"]) strong { color: #c4c9d4; font-size: 18px; font-weight: 400; }
.guestbook-panel .birth-date-spell[data-state="ok"] { border-left-color: #e0c387; }
.guestbook-panel .birth-date-spell[data-state="ok"] strong { color: #fff4d8; font-size: 24px; }
.guestbook-panel .birth-date-spell[data-state="invalid"] { border-left-color: #ff9d8c; }
.guestbook-panel .birth-date-spell[data-state="invalid"] strong { color: #ffc4b8; font-size: 19px; }

/* 태어난 시각 — 「모르겠어요」가 기본. 단추는 #guestbook 으로 잡는다: 내 카드 창의 `#my-card-status button` 이 이긴다. */
.guestbook-time { gap: 10px; }
#guestbook .birth-time-choices { display: flex; flex-wrap: wrap; gap: 10px; }
#guestbook .birth-time-choice { flex: 1 1 7em; min-width: 0; min-height: 54px; margin: 0; padding: 8px 12px; border: 1px solid #8e98ae; border-radius: 10px;
  background: #0d1424; color: #e3e7ef; font: 600 18px/1.3 system-ui, sans-serif; overflow-wrap: anywhere; cursor: pointer; }
#guestbook .birth-time-choice[aria-pressed="true"] { border-color: #e0c387; background: #e0c387; color: #182030; }
#guestbook .birth-time-choice:focus-visible { outline: 3px solid #f1d58f; outline-offset: 2px; }
.guestbook-panel .birth-time-pick { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; }
.guestbook-panel .birth-time-pick[hidden] { display: none; }
.guestbook-panel .birth-time-field { display: grid; gap: 6px; flex: 1 1 13em; min-width: 0; margin: 0; color: #e3e7ef; font-size: 16px; line-height: 1.4; }
.guestbook-panel .birth-time-minute { flex-basis: 8em; }
.guestbook-panel .birth-time-say { display: grid; gap: 4px; flex: 1 0 100%; min-width: 0; }
.guestbook-panel .birth-time-line { margin: 0; color: #fff4d8; font-size: 19px; font-weight: 600; line-height: 1.5; overflow-wrap: anywhere; }
.guestbook-panel .birth-time-note { margin: 0; color: #d3d8e2; font-size: 16px; line-height: 1.55; overflow-wrap: anywhere; }
.guestbook-panel :is(.birth-time-line, .birth-time-note):empty { display: none; }
.guestbook-panel .birth-time-say[data-state="invalid"] .birth-time-line { color: #ffc4b8; }

/* 적기 · 확인 판 — 이름과 생일은 한 번 적으면 못 고친다. */
#guestbook .guestbook-submit { display: block; width: 100%; min-height: 56px; margin: 0; padding: 12px 16px; border: 0; border-radius: 10px; background: #e0c387; color: #182030;
  font: 700 19px/1.3 system-ui, sans-serif; cursor: pointer; }
#guestbook .guestbook-submit:disabled, #guestbook .guestbook-back:disabled { opacity: .6; }
/* 확인 판은 휴대폰 한 화면에 단추까지 들어가게 — 열 때 판 첫머리로 굴린다(guestbook-form.js confirm). */
.guestbook-confirm { max-width: 620px; box-sizing: border-box; margin-top: 18px; padding: 16px 16px 14px; border: 2px solid #e0c387; border-radius: 12px; background: #111a2b;
  scroll-margin-top: 8px; }
.guestbook-confirm h3 { margin: 0; color: #fff4d8; font-size: 23px; line-height: 1.35; }
.guestbook-summary { display: grid; grid-template-columns: minmax(0, 1fr); margin: 0; }
.guestbook-summary dt { margin: 10px 0 1px; color: #c4c9d4; font-size: 15px; line-height: 1.4; }
.guestbook-summary dd { margin: 0; color: #fff4d8; font-size: 20px; font-weight: 600; line-height: 1.4; overflow-wrap: anywhere; }
.guestbook-summary-note { display: block; margin-top: 3px; color: #ffdcab; font-size: 16px; font-weight: 400; line-height: 1.5; }
/* 「바꿀 수 없어요」와 두 단추는 판 아래에 붙어 따라온다 — 글자를 키워 판이 한 화면을 넘어도 누를 곳이 늘 보인다.
   판 안쪽 여백만큼 음수 여백으로 넓혀 판의 바닥이 된다(내 카드 창처럼 창 안에서 굴러도 그 창 바닥에 붙는다). */
.guestbook-commit { position: sticky; bottom: 0; margin: 14px -16px -14px; padding: 12px 16px 14px; border-top: 1px solid #e0c38766; border-radius: 0 0 10px 10px;
  background: #111a2b; box-shadow: 0 -12px 14px -10px #000c; }
.guestbook-warning { margin: 0; padding: 9px 12px; border-radius: 8px; background: #3b2b1b; color: #ffdcab; font-size: 17px; font-weight: 600; line-height: 1.45; }
/* 튜토리얼에서 적은 생일(2026-09-30) — 칸 대신 한 줄. 「생일을 잘못 적었어요」로 칸을 열면 책장에 안 옮겨진다는 말을 빨간 글로(사용자 결정). */
.guestbook-locked-line { color: #fff4d8; font-size: 19px; font-weight: 600; line-height: 1.45; overflow-wrap: anywhere; }
#guestbook .guestbook-unlock { justify-self: start; min-height: 48px; margin: 0; padding: 0 2px; border: 0; background: none; color: #e0c387;
  font: 600 16px/1.4 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.guestbook-unlock-warning { margin: 0; padding: 10px 12px; border: 2px solid #ff5a5a; border-radius: 8px; background: #3a1519; color: #ff8a8a;
  font-size: 17px; font-weight: 700; line-height: 1.45; overflow-wrap: anywhere; }
.guestbook-panel:lang(ko) :is(.guestbook-locked-line, .guestbook-unlock-warning) { word-break: keep-all; }
#guestbook .guestbook-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 12px; }
.guestbook-news { display: flex; gap: 12px; align-items: flex-start; margin: 4px 0 0; padding: 14px 16px; border: 1px solid #e0c387; border-radius: 12px; background: #22304a; cursor: pointer; font-size: 15px; }
.guestbook-news input { width: 24px; height: 24px; flex: 0 0 24px; margin: 2px 0 0; accent-color: #e0c387; cursor: pointer; }
.guestbook-news strong { display: block; font-size: 16px; line-height: 1.5; color: #f0e6ce; }
.guestbook-news small { display: block; margin-top: 4px; color: #c9c2ae; font-size: 12px; line-height: 1.7; }
#guestbook .guestbook-actions button { flex: 1 1 8em; width: auto; min-width: 0; min-height: 56px; margin: 0; overflow-wrap: anywhere; }
#guestbook .guestbook-back { padding: 12px 16px; border: 1px solid #8e98ae; border-radius: 10px; background: transparent; color: #f0e6ce; font: 600 18px/1.3 system-ui, sans-serif; cursor: pointer; }
#guestbook .guestbook-confirm .status { margin-top: 10px; }
#guestbook .guestbook-confirm .status:empty { display: none; }

/* 문 앞 방명록(2026-09-26) — /play 가 방명록부터 적으라고 보낸 손님에게 까닭 한 줄, 다 적으면 가던 방으로 가는 큰 단추. */
.guestbook-panel .guestbook-gate { margin: 10px 0 0; padding: 12px 14px; border-left: 4px solid #e0c387; border-radius: 0 10px 10px 0; background: #2a2418;
  color: #fff4d8; font-size: 17px; font-weight: 600; line-height: 1.55; overflow-wrap: anywhere; }
.guestbook-panel:lang(ko) :is(.guestbook-gate, .guestbook-enter, .guestbook-channel) { word-break: keep-all; }
.guestbook-panel { scroll-margin-top: 8px; }
#guestbook .guestbook-enter { display: flex; align-items: center; justify-content: center; min-height: 56px; margin-top: 14px; padding: 12px 16px; box-sizing: border-box;
  border-radius: 10px; background: #e0c387; color: #182030; font: 700 19px/1.3 system-ui, sans-serif; text-align: center; text-decoration: none; overflow-wrap: anywhere; }
#guestbook .guestbook-enter:focus-visible { outline: 3px solid #f1d58f; outline-offset: 2px; }
/* 가입 선물 받고 들어가기(2026-09-26) — 들어가는 링크와 같은 꼴의 단추. */
#guestbook button.guestbook-enter { width: 100%; border: 0; cursor: pointer; }
#guestbook button.guestbook-enter:disabled { opacity: .7; cursor: progress; }
#guestbook .guestbook-gift-note:empty { display: none; }
#guestbook .guestbook-gift-note { margin: 8px 0 0; }
/* 튜토리얼 풀이를 책장에 옮겼다는 한 줄(2026-09-29) — 들어가는 단추 아래, 링크는 금빛. */
#guestbook .guestbook-shelf { margin: 10px 0 0; }
#guestbook .guestbook-shelf a { color: #e0c387; text-decoration: underline; text-underline-offset: 3px; white-space: nowrap; }

/* 카카오톡 채널 추가 — 막 방명록을 적은 손님에게 공식 채널 심볼과 함께 선명한 단추로 보여 준다. */
#guestbook .guestbook-channel { display: flex; align-items: center; gap: 12px; min-height: 78px; margin-top: 18px; padding: 12px 14px; box-sizing: border-box;
  border: 2px solid #fff29d; border-radius: 14px; background: #fee500; color: #191600; text-decoration: none; text-align: left;
  box-shadow: 0 5px 0 #a88e00, 0 14px 24px #0008, inset 0 2px #fff9bd; cursor: pointer; touch-action: manipulation;
  transition: transform .15s ease, box-shadow .15s ease, filter .15s ease; }
#guestbook .guestbook-channel:hover { transform: translateY(-2px); filter: brightness(1.04); box-shadow: 0 7px 0 #a88e00, 0 17px 27px #0008, inset 0 2px #fff9bd; }
#guestbook .guestbook-channel:active { transform: translateY(3px); box-shadow: 0 2px 0 #a88e00, 0 6px 12px #0008, inset 0 2px #fff9bd; }
#guestbook .guestbook-channel:focus-visible { outline: 3px solid #fff; outline-offset: 4px; }
.guestbook-channel-symbol { display: grid; place-items: center; flex: none; width: 48px; height: 48px; border: 1px solid #c0a600; border-radius: 12px;
  background: #fff4a2; box-shadow: inset 0 1px 2px #fff9cf, 0 2px 4px #9b85004d; }
.guestbook-channel-symbol img { display: block; width: 32px; height: 35px; }
.guestbook-channel-copy { display: grid; gap: 2px; flex: 1; min-width: 0; overflow-wrap: anywhere; }
.guestbook-channel-copy strong { font: 800 18px/1.25 system-ui, sans-serif; }
.guestbook-channel-copy small { font: 600 13px/1.35 system-ui, sans-serif; }
.guestbook-channel-arrow { flex: none; font: 800 24px/1 system-ui, sans-serif; }
@media (prefers-reduced-motion: reduce) { #guestbook .guestbook-channel { transition: none; } }
/* 태어난 곳(2026-10-07) — 한국어 화면은 접힌 한 줄(「한국 밖에서 태어났어요」), 일본어 화면은 고르기가 보인다. */
.guestbook-panel .birth-place { display: grid; gap: 8px; }
#guestbook .birth-place-open { justify-self: start; min-height: 48px; margin: 0; padding: 0 2px; border: 0; background: none; color: #e0c387;
  font: 600 16px/1.4 system-ui, sans-serif; text-decoration: underline; text-underline-offset: 4px; cursor: pointer; }
.guestbook-panel .birth-place-pick { display: grid; gap: 6px; }
.guestbook-panel :is(.birth-place-open, .birth-place-pick)[hidden] { display: none; }
.guestbook-panel .birth-place-select { width: 100%; min-width: 0; min-height: 54px; padding: 10px 12px; box-sizing: border-box; border: 1px solid #8e98ae; border-radius: 10px;
  background: #0d1424; color: #fbf3de; font: 19px/1.3 system-ui, sans-serif; color-scheme: dark; }
.guestbook-panel .birth-place-hint { color: #c4c9d4; font-size: 15px; line-height: 1.55; overflow-wrap: anywhere; }
.guestbook-panel:lang(ko) .birth-place-hint { word-break: keep-all; }
#guestbook :is(.birth-place-open, .birth-place-select):focus-visible { outline: 3px solid #f1d58f; outline-offset: 2px; }