/* 목록과 작성창은 같은 배경과 팔레트를 공유한다. */
body[data-page="guest"],
body[data-page="guest-write"] {
  --guest-bg: var(--guest-surface);
  --guest-panel: var(--black);
  --guest-yellow: var(--guest-accent);
  --guest-blue: var(--blue-deep);
  --guest-lime: var(--lime);
  --guest-text: var(--guest-ink);
  --guest-muted: var(--gray-500);
  --wrap: 1280px;
  background: var(--guest-bg);
  color: var(--guest-text);
}

.guest-page [hidden] { display: none !important; }
.guest-page :focus-visible { outline: 3px solid var(--guest-yellow); outline-offset: 5px; }
.guest-page p { margin-block: 0 1rem; }
.guest-eyebrow { font-size: 0.75rem; font-weight: 700; letter-spacing: 0.15em; }
.guest-button { display: inline-flex; align-items: center; justify-content: center; gap: 2rem; min-height: 3.25rem; padding: 0.85rem 1.5rem; border: 1px solid transparent; border-radius: 2px; background: var(--guest-yellow); color: var(--guest-bg); font-size: 1rem; font-weight: 700; }
.guest-button:disabled { opacity: 0.5; cursor: wait; }
.guest-button--outline { background: transparent; color: var(--guest-text); border-color: var(--guest-muted); }
.guest-status { padding-block: 1.25rem; font-size: 0.95rem; color: var(--guest-muted); }
body:is([data-page="guest"], [data-page="guest-write"]) .site-header { background: var(--guest-header); }
body:is([data-page="guest"], [data-page="guest-write"]) .gnb a[aria-current="page"] { color: var(--guest-ink); }
body:is([data-page="guest"], [data-page="guest-write"]) .site-footer { margin-top: 0; }
body:is([data-page="guest"], [data-page="guest-write"]) .back-to-top { background: var(--guest-accent); color: var(--guest-surface); }
.guest-page--board { position: relative; isolation: isolate; margin-top: calc(-1 * var(--header-height)); padding-block: 140px 60px; min-height: 100svh; background: linear-gradient(89.9456deg, var(--guest-primary-deep) 0%, var(--guest-primary) 62.09%, var(--guest-glow) 137.29%); }
.guest-page--board::before { content: ""; position: absolute; z-index: -1; inset: 0; background: var(--guest-shade); pointer-events: none; }
.guest-backdrop { position: absolute; z-index: -2; top: 0; left: 50%; width: 465px; height: 888px; max-width: 100%; object-fit: cover; transform: translateX(-50%); opacity: .2; pointer-events: none; }
.guest-hero { display: flex; flex-direction: column; align-items: center; gap: 60px; padding-bottom: 20px; text-align: center; }
.guest-hero__title { display: flex; flex-direction: column; align-items: center; gap: 16px; }
.guest-hero__title h1 { line-height: 0; }
.guest-hero__title img { display: block; }
.guest-hero__title p { margin: 0; color: var(--guest-copy); font-size: 20px; line-height: 1.4; }
.guest-hero__intro h2 { color: var(--guest-heading); font-size: 30px; font-weight: 600; line-height: 1.2; }
.guest-hero__intro p { margin: 12px 0 20px; color: var(--gray-500); font-size: 14px; line-height: 1.6; }
.guest-page--board .guest-button { min-height: 40px; padding: 12px 10px; border: 0; border-radius: 8px; background: var(--guest-accent); color: var(--guest-ink); font-size: 16px; font-weight: 600; line-height: 1; }
.guest-hero .guest-button { width: 158px; }
.guest-page--board .guest-button--outline { background: transparent; color: var(--guest-copy); border: 1px solid var(--guest-line); }
.guest-hero__action { margin-top: 24px; }
.guest-board { margin-top: 40px; }
.guest-board > .guest-status { text-align: center; }
.guest-board > .guest-status.sr-only { padding: 0; }
.guest-grid { display: flex; flex-wrap: wrap; justify-content: center; gap: 20px; }
.guest-grid > li { flex: 0 0 calc((100% - 80px) / 5); min-width: 0; }
.guest-piece { position: relative; display: flex; flex-direction: column; align-items: center; gap: 16px; width: 100%; min-height: 320px; padding: 20px 16px; background: var(--guest-card); border-radius: 0; -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); color: var(--guest-copy); font-size: 14px; font-weight: 400; line-height: 1.6; text-align: center; }
.guest-piece__recipient[href] { position: relative; z-index: 2; display: inline-flex; align-items: center; min-height: 44px; margin-block: -11px; text-decoration: underline; text-underline-offset: 3px; }
.guest-piece__people { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 100%; }
.guest-piece__author, .guest-piece__recipient { max-width: 100%; overflow-wrap: anywhere; }
.guest-piece__mark { flex: none; }
/* 시안의 어두운 회색은 본문 대비가 부족하므로 읽는 정보에는 공통 중간 회색을 쓴다. */
.guest-piece__date, .guest-piece .guest-piece__message { color: var(--gray-500); }
.guest-piece__date { font-variant-numeric: tabular-nums; }
.guest-piece .guest-piece__message { margin: 0; white-space: pre-wrap; overflow-wrap: anywhere; }
.guest-empty { display: flex; justify-content: center; padding: 40px 0 80px; }
.guest-board__actions { display: flex; flex-wrap: wrap; justify-content: center; gap: 16px; }
.guest-board__actions .guest-button { margin-top: 40px; }
.guest-dialog { width: min(34rem, calc(100% - 2rem)); max-height: 85dvh; padding: 2rem; border: 1px solid var(--guest-muted); border-radius: 4px; background: var(--guest-panel); color: var(--guest-text); overscroll-behavior: contain; }
.guest-dialog::backdrop { background: rgb(0 0 0 / 75%); }
.guest-dialog__top { display: flex; justify-content: space-between; align-items: center; gap: 1rem; color: var(--guest-yellow); font-size: 0.8rem; }
.guest-dialog__top button { min-height: 44px; }
.guest-dialog .guest-dialog__message { margin-block: 1.5rem 2rem; white-space: pre-wrap; overflow-wrap: anywhere; line-height: 1.8; }
.guest-dialog .guest-dialog__author { margin-bottom: 0.25rem; font-weight: 700; }
.guest-dialog time { color: var(--guest-muted); font-size: 0.8rem; }
.guest-delete { margin-top: 1.5rem; padding-top: 1rem; border-top: 1px solid var(--rule); }
.guest-delete summary { cursor: pointer; padding-block: 0.5rem; }
.guest-delete form { display: grid; gap: 0.75rem; margin-top: 1rem; }
.guest-delete__guide { margin-top: 0.75rem; color: var(--guest-copy); font-size: 0.875rem; line-height: 1.7; }
.guest-delete__guide p { margin: 0 0 0.5rem; }
.guest-delete__guide ol { padding-left: 1.25rem; list-style: decimal; }
.guest-delete__guide a { color: var(--guest-yellow); text-decoration: underline; text-underline-offset: 0.2em; }
.guest-delete input { width: 100%; min-width: 0; padding: 0.75rem; border: 1px solid var(--guest-muted); background: var(--guest-bg); color: var(--guest-text); font: inherit; }
.guest-delete .guest-help { margin: 0; }
/* native dialog가 배경 포커스를 막고 Escape·키보드 이동을 처리한다. */
.guest-write { --guest-muted: var(--guest-copy); width: min(480px, calc(100% - 32px)); max-height: min(92dvh, 640px); margin: auto; padding: 28px 24px 20px; border: 0; border-radius: 0; background: var(--guest-form-surface); color: var(--guest-copy); overflow-y: auto; overscroll-behavior: contain; }
.guest-write::backdrop { background: var(--guest-overlay); }
.guest-write :is(input, textarea, select):focus,
.guest-write :is(input, textarea, select):focus-visible { outline: none; }
body:has(.guest-write[open], .guest-dialog[open]) { overflow: hidden; }
.guest-write__close { position: absolute; top: 6px; right: 8px; width: 36px; height: 36px; font-size: 20px; color: var(--guest-copy); border: 0; background: transparent; cursor: pointer; }
.guest-write__close:focus, .guest-write__close:focus-visible { outline: none; }
.guest-fields { display: flex; flex-direction: column; gap: 32px; margin: 0; padding: 0; border: 0; min-width: 0; }
.guest-fields:disabled { opacity: .6; }
.guest-field { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.guest-field > label { color: var(--guest-label); font-size: 13px; line-height: 18px; letter-spacing: .0547px; }
.guest-field input, .guest-field textarea, .guest-field select { display: block; width: 100%; min-width: 0; margin: 0; padding: 6px 0 7px; border: 0; border-bottom: 1px solid var(--gray-500); border-radius: 0; background: transparent; color: var(--guest-ink); font: inherit; font-size: 14px; line-height: 20px; letter-spacing: -.27px; transition: border-bottom-color 0.2s ease; }
.guest-field input:focus, .guest-field textarea:focus, .guest-field select:focus,
.guest-field input:focus-visible, .guest-field textarea:focus-visible, .guest-select select:focus, .guest-select select:focus-visible { border-bottom-color: var(--guest-label, #b3d4ef); }
.guest-field input::placeholder, .guest-field textarea::placeholder { color: var(--gray-70, #525a60); opacity: 1; }
.guest-field textarea { height: 90px; min-height: 70px; resize: vertical; }
.guest-select { position: relative; }
/* 디자이너 검색 — 선택 상자 위 작은 검색칸. 결과 수는 오른쪽에 */
.guest-designer-search { position: relative; margin-bottom: 2px; }
.guest-field .guest-designer-search input { height: 32px; padding: 4px 50px 4px 0; border-bottom-color: var(--gray-80); font-size: 13px; line-height: 18px; }
.guest-field .guest-designer-search input:focus,
.guest-field .guest-designer-search input:focus-visible { border-bottom-color: var(--guest-label, #b3d4ef); }
.guest-field .guest-designer-search input::placeholder { color: var(--gray-70, #525a60); }
.guest-designer-search__count { position: absolute; right: 0; top: 50%; transform: translateY(-50%); color: var(--guest-yellow); font-size: 12px; pointer-events: none; }
.guest-select select { appearance: none; height: 38px; padding-right: 32px; cursor: pointer; }
.guest-select select:has(option[value=""]:checked) { color: var(--guest-muted); }
.guest-select option { background: var(--guest-surface); color: var(--guest-ink); }
.guest-select img { position: absolute; right: 6px; top: 10px; width: 18px; height: 18px; pointer-events: none; }
.guest-page .guest-help { display: flex; align-items: flex-start; gap: 6px; margin: 0; color: var(--guest-muted); font-size: 11px; line-height: 16px; }
.guest-help img { flex: none; margin-top: 2px; }
.guest-count { align-self: flex-end; color: var(--guest-muted); font-size: 12px; line-height: 16px; margin-top: 2px; }
.guest-form__bottom { display: flex; flex-direction: column; align-items: stretch; gap: 14px; margin-top: 10px; }
.guest-form__buttons { display: flex; align-items: center; gap: 10px; width: 100%; }
.guest-cancel { flex: 1; min-height: 40px; padding: 10px 14px; color: var(--guest-copy); font-size: 14px; font-weight: 500; text-align: center; background: transparent; border: 1px solid var(--gray-70, #525a60); border-radius: 0 !important; cursor: pointer; transition: background-color 0.2s, color 0.2s, border-color 0.2s; }
.guest-cancel:hover, .guest-cancel:focus-visible { background: rgba(255, 255, 255, 0.06); color: var(--guest-ink); border-color: var(--gray-500); }
.guest-submit { flex: 1; min-height: 40px; padding: 10px 14px; color: var(--guest-ink); font-size: 14px; font-weight: 700; text-align: center; background: var(--guest-accent, #3b5062); border: 0; border-radius: 0; cursor: pointer; transition: opacity 0.2s; }
.guest-submit:hover:not(:disabled) { opacity: 0.9; }
.guest-submit:disabled { opacity: .5; cursor: default; }
.guest-write .guest-status:not(.sr-only) { margin: 0 0 16px; padding: 0; font-size: 13px; }
.guest-write [data-guest-form-retry] { margin-top: 16px; }
.guest-success h2 { color: var(--guest-heading); margin-bottom: 20px; }
.guest-success p { color: var(--guest-copy); }
.guest-success .guest-button { margin-top: 20px; }

@media (hover: hover) and (pointer: fine) {
  .guest-piece { transition: background-color var(--motion-card-hover, 0s) ease-out; }
  .guest-piece:hover, .guest-piece:focus-within { background: var(--guest-card-hover); }
  .guest-button:hover { text-decoration: underline; text-underline-offset: 4px; }
}
@media (max-width: 1199px) { .guest-grid > li { flex-basis: calc((100% - 60px) / 4); } }
@media (max-width: 999px) { .guest-grid > li { flex-basis: calc((100% - 40px) / 3); } }
@media (max-width: 760px) {
  .guest-grid > li { flex-basis: calc((100% - 20px) / 2); }
}
@media (max-width: 420px) {
  .guest-grid > li { flex-basis: 100%; max-width: 320px; }
  .guest-button { width: 100%; }
}
@media (max-width: 600px) {
  .guest-page--board { padding-top: 112px; }
  .guest-write { width: calc(100% - 24px); margin: auto; padding: 24px 16px 16px; border-radius: 0; max-height: calc(100dvh - 24px); }
  .guest-fields { gap: 26px; }
  .guest-field textarea { height: 80px; }
  .guest-form__bottom { align-items: stretch; }
  .guest-backdrop { width: 100%; height: auto; aspect-ratio: 465 / 888; object-fit: contain; }
  .guest-hero { gap: 40px; padding-bottom: 40px; }
  .guest-hero__intro h2 { font-size: 24px; }
  .guest-hero__intro p { max-width: 320px; }
  .guest-page--board .guest-button { min-height: 44px; }
  .guest-piece { min-height: 280px; }
}
@media (prefers-reduced-motion: reduce) { button.guest-piece { transition: none; } button.guest-piece:hover { transform: none; } }

/* 디자이너 상세도 동일한 방명록 카드와 메시지 dialog를 사용한다. */
[data-designer-guest] { --guest-bg: var(--guest-surface); --guest-panel: var(--black); --guest-yellow: var(--guest-accent); --guest-text: var(--guest-ink); --guest-muted: var(--gray-500); }
[data-designer-guest] > [data-designer-guest-status] { color: var(--guest-copy); text-align: center; }
[data-designer-guest] .guest-piece { background: var(--guest-card); }
[data-designer-guest] .guest-piece__recipient { font-weight: 700; }
[data-designer-guest] > .guest-button { display: flex; margin: 32px auto 0; }