.voice-app { width:min(100%,520px); padding:10px 20px 32px; background:linear-gradient(155deg,#fff,#fff8fa 52%,#f4f6fb); }
.voice-intro { padding:14px 16px; border-radius:15px; background:#fff0f5; container-type:inline-size; }
.voice-intro h2 { font-size:clamp(9px,3.9cqw,18px); line-height:1.5; white-space:nowrap; letter-spacing:normal; }
.voice-intro p { line-height:1.75; }
.voice-intro .voice-eyebrow { margin:0 0 8px; }
.voice-intro h2 { margin:0 0 8px; }
.voice-intro .voice-intro-description { margin:0; }
.voice-eyebrow { margin-top:0; color:#c23d70; }
.voice-intro-description { font-size:clamp(6px,2.5cqw,12px); letter-spacing:normal; }
.voice-intro-description span { display:block; white-space:nowrap; }
.voice-section { margin-top:26px; }
.voice-registration { margin-top:0; }
.voice-registration-heading { display:flex; flex-direction:column; align-items:flex-start; gap:0; padding-left:12px; }
.voice-registration-heading h2 { margin:0; flex:0 0 auto; }
.voice-registration-description { box-sizing:border-box; display:flex; align-items:center; width:100%; aspect-ratio:486 / 78; margin:0 0 14px; padding:0 23% 0 24px; background:url("banner-voice-letter.jpg") center / contain no-repeat; color:#fff; font-family:"Poor Story","Malgun Gothic",sans-serif; font-size:clamp(14px,4.2vw,19px); font-weight:400; line-height:1.5; word-break:keep-all; }
.voice-registration-description { container-type:inline-size; }
.voice-registration-description span { white-space:nowrap; font-size:4.4cqw; line-height:1.5; }
.voice-section .section-heading { margin-bottom:14px; }
.voice-registration > .voice-registration-heading { margin-bottom:2px; }
.voice-card { padding:18px; border:1px solid #f0e4e8; border-radius:15px; background:#fff; }
.voice-registration #letterText { min-height:130px; }
.voice-details { display:grid; grid-template-columns:1fr; gap:12px; margin:16px 0; }
.voice-recorder { margin-top:18px; padding:16px; border-radius:12px; background:#fff7fa; text-align:center; }
.voice-actions { display:flex; flex-wrap:wrap; justify-content:center; align-items:center; gap:10px; }
.voice-actions .register-button { margin-top:12px; }
.voice-recorder .voice-actions { flex-direction:column; gap:14px; }
.voice-note { color:#68758a; font-size:13px; line-height:1.65; }
#recordTime { display:block; margin:14px 0; font-size:30px; font-variant-numeric:tabular-nums; }
#recordPreview { margin-top:18px; }
#voicePreview { display:block; width:100%; margin-bottom:12px; }
.voice-steps { padding-left:22px; line-height:1.9; }
.voice-recordings,.voice-attachments { margin-top:24px; }
.voice-file-item { padding:12px 0; border-bottom:1px solid #f0e4e8; }
.voice-file-heading { display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:10px; }
.voice-file-heading span { min-width:0; overflow-wrap:anywhere; font-size:14px; }
.voice-file-item audio { display:block; width:100%; }
.voice-attachment-memo { margin-top:12px; }
.voice-file-item img { display:block; max-width:100%; max-height:180px; border-radius:8px; object-fit:contain; }
.voice-storage-notice { padding-top:14px; border-top:1px solid #f0e4e8; }
.voice-order-summary { display:grid; grid-template-columns:100px minmax(0,1fr); gap:12px; font-size:14px; line-height:1.6; }
.voice-order-summary dt { color:#68758a; }
.voice-order-summary dd { margin:0; overflow-wrap:anywhere; }
.voice-checkout-fields { display:grid; gap:16px; }
.cover-template-picker h3 { margin:0; font-size:18px; color:#f63276; }
.cover-template-rail { position:relative; padding:0 14px; margin:0 -14px; }
.cover-template-rail > .cover-template-arrow { position:absolute; top:50%; transform:translateY(-50%); }
.cover-template-rail > .cover-template-arrow:first-of-type { left:-4px; }
.cover-template-rail > .cover-template-arrow:last-of-type { right:-4px; }
.cover-template-grid { display:flex; gap:12px; overflow-x:auto; padding:4px 0 12px; scroll-snap-type:none; scrollbar-width:none; }
.cover-template-grid::-webkit-scrollbar { display:none; }
.cover-template-option { flex:0 0 40%; min-width:0; position:relative; display:flex; padding:0; border:2px solid transparent; border-radius:0; background:#fff; text-align:left; scroll-snap-align:start; }
.cover-template-option img { display:block; width:100%; height:auto; aspect-ratio:1.576; object-fit:contain; border-radius:6px; }
.cover-template-name { position:absolute; width:1px; height:1px; overflow:hidden; clip-path:inset(50%); }
.cover-template-state { position:absolute; right:3px; bottom:3px; padding:2px 5px; background:#fff; font-size:11px; color:#68758a; }
.cover-template-option[aria-pressed="true"] { border-color:#ff176c; background:#fff0f5; }
.cover-template-option[aria-pressed="true"] .cover-template-state { color:#d90050; font-weight:700; }
.cover-template-option:focus-visible { outline:none; border-color:#d90050; }
.selected-cover-preview { display:block; width:min(100%,260px); margin-top:10px; border-radius:8px; }

@media (max-width:767px) { .voice-registration-description { font-size:clamp(11.5px,3.4vw,15.5px); } }

.voice-help { margin:12px 0; color:#68758a; font-size:15px; line-height:1.65; word-break:keep-all; }
.voice-recording-summary { color:#182b46; font-weight:700; }

.voice-letter-message { margin-top:28px; padding-top:24px; border-top:1px solid #f0e4e8; }
.voice-attachment-memo { margin-top:18px; }

.voice-audio { margin-top:28px; border-color:#f5ccdc; }
.voice-audio > .voice-help { margin-top:0; }
.voice-submit-section { margin-top:24px; }
.photo-attachment-heading { display:flex; align-items:baseline; flex-wrap:wrap; gap:6px 12px; }
.photo-attachment-heading .voice-photo-count { color:#68758a; font-size:12px; font-weight:400; line-height:1.5; }

.voice-audio-method { margin-top:24px; padding:18px 16px; border:1px solid #f0e4e8; border-radius:12px; background:#fffafb; }
.voice-audio-method > h3 { margin:0 0 18px; color:#182b46; font-size:18px; line-height:1.5; word-break:keep-all; }
.voice-audio-direct { background:#fff7fa; }
.voice-audio-direct > .voice-recorder { margin-top:0; padding:0; background:transparent; }
.voice-audio-upload .audio-upload-button { margin-top:0; }

.voice-letter-message > .form-field { margin-bottom:0; }
.voice-letter-message textarea { display:block; }

.voice-method-description { margin:0 0 18px; color:#68758a; font-size:15px; line-height:1.65; word-break:keep-all; }
.voice-audio-method > h3 { margin-bottom:10px; }
.voice-method-divider { display:flex; align-items:center; gap:12px; margin:20px 0; color:#68758a; font-size:15px; font-weight:700; }
.voice-method-divider::before,.voice-method-divider::after { content:""; flex:1; height:1px; background:#eadce2; }
.voice-method-divider + .voice-audio-direct { margin-top:0; }

.letter-example-heading { display:flex; align-items:center; justify-content:space-between; gap:8px; }
.letter-example-heading button { flex-shrink:0; font-size:12px; padding:6px 8px; }
.letter-examples-dialog { box-sizing:border-box; width:min(92vw,540px); max-height:88dvh; padding:20px; border:1px solid #f0cad9; border-radius:16px; color:#182b46; background:#fff; }
.letter-examples-dialog::backdrop { background:rgb(18 28 45 / 55%); }
.letter-examples-dialog header { display:flex; align-items:center; justify-content:space-between; gap:12px; }.letter-examples-dialog h2 { margin:0; font-size:21px; }.letter-example-list article { padding:18px 0; border-bottom:1px solid #f0e4e8; }.letter-example-list h3 { margin:0; font-size:17px; }.letter-example-list p { font-size:15px; line-height:1.8; white-space:pre-line; }.letter-example-actions { display:flex; justify-content:flex-end; gap:8px; }
body:has(.letter-examples-dialog[open]) { overflow:hidden; }

.letter-examples-dialog[open] { display:flex; flex-direction:column; height:min(88dvh,850px); overflow:hidden; }.letter-examples-dialog header { flex-shrink:0; padding-bottom:12px; }.letter-example-list { flex:1; min-height:0; overflow-y:auto; }.letter-examples-dialog > [role=status]:empty { display:none; }

/* 전달 방법 (2026-11-11): 문자 발송 / 카드북 배송. */
.voice-delivery-options { display:grid; gap:10px; margin:0; padding:0; border:0; }
.voice-delivery-options legend { margin-bottom:8px; font-size:15px; font-weight:700; }
.voice-delivery-options label { display:flex; gap:10px; align-items:flex-start; padding:12px; border:1px solid #e4e8ef; border-radius:10px; }
.voice-delivery-options label:has(input:checked) { border-color:var(--red, #ff075f); }
.voice-delivery-options span { display:grid; gap:2px; }
.voice-delivery-options small { color:#68758a; font-size:13px; }

/* 목소리 등록 방법 (2026-11-11): one of three. */
.voice-method-options { display:grid; gap:8px; margin:16px 0 0; padding:0; border:0; }
.voice-method-options label { display:flex; gap:10px; align-items:center; min-height:44px; padding:0 14px; border:1px solid #f0e4e8; border-radius:10px; font-weight:700; }
.voice-method-options label:has(input:checked) { border-color:var(--red, #ff075f); background:#fffafb; }
.voice-delivery-options { margin-top:8px; }
.visually-hidden { position:absolute; width:1px; height:1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; }

/* 임시저장 (2026-11-11). */
.voice-draft-button { display:block; width:100%; min-height:48px; margin-bottom:10px; }
.voice-summary-letter { white-space:pre-wrap; }