.service-box{border:1px solid var(--line);padding:25px;margin:25px 0;background:var(--panel)}
.coupon-entry{display:flex;gap:10px;margin-top:8px}.coupon-entry .input{min-width:0;flex:1;text-transform:uppercase}.coupon-entry .secondary{flex:none;border-radius:8px}.coupon-box #coupon-message{min-height:20px}
@media(max-width:480px){.coupon-entry{gap:7px}.coupon-entry .secondary{padding:12px 17px}}
.service-box h2{font:400 24px/1.6 var(--serif);margin:0 0 12px}.service-box p{font-size:13px;line-height:1.95;color:var(--muted)}
.service-tools{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.service-tools button,.service-tools a{min-height:44px}
.service-hint{font:400 18px/1.9 var(--serif);letter-spacing:-.4px;margin:25px 0}.service-hint small{display:block;font:12px/1.9 var(--sans);color:var(--muted);margin-top:10px}
.service-status{font-size:12px;line-height:1.9;white-space:pre-wrap;min-height:24px}.error-text{color:#a03e32!important}
.service-dialog{max-width:560px;width:calc(100% - 40px);padding:30px;border:1px solid var(--line);background:#fcfaf6;color:var(--ink);box-sizing:border-box;isolation:isolate;box-shadow:0 24px 80px #17140f44}.service-dialog::backdrop{background:#24232066}.service-dialog h2{font:26px/1.6 var(--serif);margin-top:0}.service-dialog p{font-size:13px;line-height:1.9}.service-dialog .check-line{display:flex;align-items:start;gap:10px;font-size:12px;line-height:1.9}.service-dialog input{margin-top:5px}
.package-choices{display:grid;grid-template-columns:1fr 1fr;gap:15px}.package-choice{position:relative;border:1px solid var(--line);padding:20px;cursor:pointer}.package-choice:has(input:checked){background:#e9e1d5;border-color:#655c4f}.package-choice input{margin-right:6px}.package-choice strong{display:block;font:23px/1.8 var(--serif);margin-top:8px}.package-choice small{font-size:12px;line-height:1.9;color:var(--muted);display:block}.check-line{display:flex;gap:10px;align-items:start;margin:14px 0;font-size:12px;line-height:1.9}.check-line input{width:17px;height:17px;flex-shrink:0;margin-top:3px;accent-color:var(--ink)}
.order-total{display:flex;justify-content:space-between;padding:22px 0;border-block:1px solid var(--line);margin:25px 0;font-size:18px}.delivery-player{width:100%;margin:20px 0}.version-grid{display:grid;gap:10px}.version-choice{padding:16px;text-align:left;background:transparent;border:1px solid var(--line);min-height:54px}.version-choice[aria-pressed=true]{background:#e9e1d5;border-color:#655c4f}
.download-actions{display:flex;gap:10px;flex-wrap:wrap;margin:18px 0}.download-actions>*{min-height:44px}.service-box textarea{width:100%;box-sizing:border-box;min-height:110px}.service-box .input{width:100%;box-sizing:border-box}
.recovery-code{display:block;font:11px/1.8 monospace;overflow-wrap:anywhere;background:var(--soft);padding:14px;user-select:all}.gift-message{white-space:pre-wrap;font:18px/2 var(--serif);overflow-wrap:anywhere;margin:30px 0}.service-page{max-width:850px;margin:auto;padding-bottom:60px}.service-page h1{font:36px/1.6 var(--serif);letter-spacing:-1px}.service-page .form-title{overflow-wrap:anywhere}.service-cover{width:100%;max-width:400px;display:block;margin:25px auto}.service-library-item{padding:20px 0;border-bottom:1px solid var(--line)}.service-library-item h2{font:23px/1.7 var(--serif);overflow-wrap:anywhere}
[hidden]{display:none!important}audio{max-width:100%}
.delivery-record{max-width:520px;margin:35px auto}.delivery-record .album img{filter:none}
@media(max-width:720px){.service-box{padding:20px}.service-page h1{font-size:29px}.package-choices{gap:10px}.package-choice{padding:15px}.package-choice strong{font-size:21px}.service-dialog{padding:22px}.service-tools{gap:8px}.service-tools .secondary{font-size:11px;padding:12px}.download-actions{flex-direction:column}.service-page textarea,.service-page input:not([type=checkbox]):not([type=radio]){font-size:16px}}

.title-edit-heading{display:flex;align-items:center;justify-content:space-between;gap:12px;margin-bottom:10px}.title-edit-heading label{margin:0}.title-edit-button{border:0;background:transparent;color:#726856;font:500 12px var(--sans);text-decoration:underline;text-underline-offset:4px;cursor:pointer;padding:8px 0;min-height:44px}.photo-cover-box{border:1px solid var(--line,#ded8cd);border-radius:12px;background:#faf8f3;padding:24px;margin:24px 0}.photo-cover-head{display:flex;justify-content:space-between;align-items:center;gap:20px}.photo-cover-head h2{font:400 20px/1.6 var(--serif);margin:0 0 8px}.photo-cover-head .eyebrow{font-size:10px;margin:0 0 6px}.photo-cover-thumb{width:92px;height:92px;flex-shrink:0;object-fit:cover;border-radius:6px}.photo-pick{position:relative;overflow:hidden;cursor:pointer;min-height:44px;display:inline-flex;align-items:center}.photo-pick input{position:absolute;inset:0;width:100%;height:100%;opacity:0;cursor:pointer}.photo-pick:focus-within{outline:2px solid #8d7960;outline-offset:3px}.photo-cover-status:empty{display:none}@media(max-width:480px){.photo-cover-box{padding:18px}.photo-cover-thumb{width:72px;height:72px}.photo-cover-head{gap:12px}.photo-cover-head h2{font-size:18px}.photo-pick{width:100%;justify-content:center}.title-edit-heading{gap:8px}}

/* The exported PNG already contains its typography and shading. */
.delivery-record .album:after{background:none}

/* Keep the confirmation fully separate from the lyric editor on narrow screens. */
.service-dialog[open]{position:fixed;inset:0;margin:auto;z-index:9999;border-radius:16px;max-height:calc(100dvh - 24px);overflow:auto}
.service-dialog::backdrop{background:rgba(18,20,19,.76)}
.service-dialog .service-tools{display:flex;flex-wrap:wrap}.service-dialog .service-tools button{flex:1 1 180px;min-height:48px}
@media(max-width:650px){.service-dialog[open]{width:calc(100vw - 28px);padding:22px;max-height:calc(100dvh - 28px)}.service-dialog h2{font-size:22px;line-height:1.4}.photo-cover-head{align-items:flex-start}.photo-cover-head>div{min-width:0;flex:1}.photo-cover-head h2{font-size:17px;line-height:1.4;overflow-wrap:anywhere}.photo-cover-thumb{width:64px;height:64px}.photo-cover-box .help{font-size:12px;line-height:1.6}}

.creation-progress{margin:24px 0 4px;padding:26px 25px 28px;background:#fcfaf6;border:1px solid #dcd5c9;border-radius:4px}.creation-progress-caption{margin:0 0 24px;font-size:10px;font-weight:600;letter-spacing:2px;color:#817769}.creation-progress ol{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;list-style:none;padding:0;margin:0}.creation-progress li{position:relative;display:flex;align-items:flex-start;gap:11px;min-width:0}.creation-progress li:not(:last-child)::after{content:"";position:absolute;left:36px;right:-4px;top:17px;height:1px;background:#d8d1c7}.creation-step-mark{position:relative;z-index:1;flex:none;display:grid;place-items:center;width:35px;height:35px;border-radius:50%;border:1px solid #cfc7bb;background:#fcfaf6;color:#968d80;font-size:11px;font-weight:600}.creation-progress li>span:last-child{padding-top:1px}.creation-progress strong,.creation-progress small{display:block;line-height:1.45}.creation-progress strong{font-size:13px;font-weight:600;white-space:nowrap}.creation-progress small{font-size:10px;color:#837b70;margin-top:5px}.creation-progress .is-done .creation-step-mark{background:#dfe9e1;border-color:#aabfb0;color:#365343}.creation-progress .is-current .creation-step-mark{background:#33322e;border-color:#33322e;color:#fff;box-shadow:0 0 0 4px #e9e5db}.creation-progress .is-current strong{color:#22211e}.creation-progress .is-next{color:#a39b90}.creation-progress .is-next small{color:#a39b90}.preview-art.cover-pending .album{background:linear-gradient(145deg,#c9c0b3,#8a918b 52%,#454e50)}.preview-art.cover-pending .album:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 70% 20%,#f7e7c840,transparent 37%),linear-gradient(160deg,transparent 30%,#293a4555)}@media(max-width:600px){.creation-progress{padding:22px 18px}.creation-progress ol{grid-template-columns:1fr;gap:22px}.creation-progress li:not(:last-child)::after{left:17px;right:auto;top:35px;bottom:-22px;width:1px;height:auto}.creation-progress li>span:last-child{padding-top:4px}.creation-progress small{margin-top:3px}}
.creation-progress li{display:block}.creation-progress li>span:last-child{display:block;padding-top:12px}.creation-progress li:not(:last-child)::after{left:35px;right:-12px}.creation-progress .is-current .creation-step-mark{animation:creation-pulse 2s ease-in-out infinite}@keyframes creation-pulse{50%{box-shadow:0 0 0 8px #e9e5db88}}@media(max-width:600px){.creation-progress li{display:flex}.creation-progress li>span:last-child{padding-top:4px}.creation-progress li:not(:last-child)::after{left:17px;right:auto}}@media(prefers-reduced-motion:reduce){.creation-progress .is-current .creation-step-mark{animation:none}}
@media(max-width:720px){.preview-layout .audio-card{order:-1;margin-top:0}.preview-layout .preview-art{order:1}}

.audio-card.is-waiting{border:0;padding:0;background:transparent;margin:25px 0 5px}
.audio-card.is-waiting .service-status:empty{display:none}
.creation-wait{position:relative;overflow:hidden;margin:0;padding:44px 22px 38px;text-align:center;background:#f8f4ed;border:1px solid #ddd4c7;border-radius:12px}
.creation-wait-mark{height:32px;display:flex;align-items:center;justify-content:center;gap:5px;margin-bottom:24px}
.creation-wait-mark span{display:block;width:3px;height:9px;border-radius:4px;background:#947e65;animation:creation-sound 1.55s ease-in-out infinite}
.creation-wait-mark span:nth-child(2),.creation-wait-mark span:nth-child(4){animation-delay:.18s}
.creation-wait-mark span:nth-child(3){animation-delay:.38s}
.creation-wait-mark span:nth-child(5){animation-delay:.56s}
.creation-wait-kicker{margin:0 0 12px;color:#837766;font-size:10px;letter-spacing:2.1px;font-weight:600}
.creation-wait-message{min-height:1.6em;margin:0 auto 9px;font:400 clamp(15px,3.8vw,24px)/1.55 var(--serif);letter-spacing:-.7px;white-space:nowrap}
.creation-wait-note{margin:0;color:#756d63;font-size:12px;line-height:1.8}
.creation-wait-line{width:min(180px,60%);height:1px;margin:27px auto 0;background:#e1d9ce;overflow:hidden}
.creation-wait-line span{display:block;width:42%;height:100%;background:#8d745d;animation:creation-glide 2.7s ease-in-out infinite alternate}
@keyframes creation-sound{0%,100%{height:8px;opacity:.45}50%{height:27px;opacity:1}}
@keyframes creation-glide{from{transform:translateX(-100%)}to{transform:translateX(340%)}}
@media(max-width:600px){.creation-wait{padding:31px 12px 25px}.creation-wait-mark{margin-bottom:18px}.creation-wait-message{font-size:clamp(13px,3.8vw,18px)}}
@media(prefers-reduced-motion:reduce){.creation-wait-mark span,.creation-wait-line span{animation:none}.creation-wait-mark span{height:16px;opacity:1}.creation-wait-line span{transform:translateX(70%)}}

/* The recipient opens this page most often on a phone. */
.gift-lyrics-toggle{min-height:48px;margin:14px 0}
.gift-lyrics{border-top:1px solid var(--line);padding:20px 0;margin:10px 0}
.gift-lyrics h2{font:400 23px/1.5 var(--serif);margin:0 0 10px}
.gift-lyrics pre{white-space:pre-wrap;overflow-wrap:anywhere;font:15px/2 var(--serif);margin:0}
.gift-downloads,.gift-share-actions{display:flex;gap:9px;flex-wrap:wrap;margin:12px 0}
.gift-downloads button,.gift-share-actions button{min-height:48px}
@media(max-width:600px){
 body[data-service-page=gift] .service-page{width:min(100%,460px);margin:auto}
 body[data-service-page=gift] .service-page h1{font-size:clamp(27px,7vw,35px);line-height:1.35}
 body[data-service-page=gift] .service-cover{width:100%;max-width:420px;margin:18px auto 22px}
 body[data-service-page=gift] #gift-song-title{font-size:clamp(24px,6vw,31px);line-height:1.4;overflow-wrap:anywhere}
 body[data-service-page=gift] .delivery-player{margin:12px 0 20px}
 body[data-service-page=gift] .gift-message{font-size:16px;line-height:1.85;margin:22px 0}
 body[data-service-page=gift] .gift-lyrics-toggle,body[data-service-page=gift] .gift-downloads button{width:100%}
}
.gift-ready{border:1px solid var(--line);border-radius:18px;background:#fffcf7;padding:22px;margin:16px 0;box-shadow:0 14px 30px #342c2014}
.gift-done{display:inline-block;background:#e7f2e9;color:#2c6b40;font-size:12px;font-weight:700;border-radius:30px;padding:5px 11px}
.gift-ready-note{margin:12px 0 14px;overflow-wrap:anywhere}
.gift-ready-album{display:flex;align-items:center;gap:16px;background:#f4eee6;padding:10px;border-radius:10px}
.gift-ready-album img{width:96px;height:96px;flex:none;object-fit:cover;border-radius:3px}
.gift-ready-album strong{display:block;font:400 19px/1.45 var(--serif);overflow-wrap:anywhere}
.gift-ready-album small{color:#756a5f}
.gift-ready-actions{display:grid;gap:10px;margin:18px 0 8px}
.gift-ready-actions>*{min-height:48px;width:100%;display:flex;align-items:center;justify-content:center;text-align:center}
.gift-chat-preview{margin:20px 0 12px;max-width:420px}
.gift-chat-label{font-size:12px;font-weight:700;letter-spacing:1px;color:#8c7b68;margin:0 0 8px}
.gift-chat{background:#b5c7d3;border-radius:14px;padding:18px 14px}
.gift-chat-bubble{background:#ffe342;border-radius:12px 4px 12px 12px;padding:10px 13px;margin:0 0 8px auto;max-width:85%;width:fit-content;font-size:14px;overflow-wrap:anywhere}
.gift-chat-card{background:#fff;border-radius:9px;overflow:hidden;margin-left:auto;max-width:85%;box-shadow:0 4px 9px #4f627022}
.gift-chat-card img{width:100%;aspect-ratio:1;height:auto;object-fit:contain;display:block}
.gift-chat-card div{padding:10px 13px;display:grid;gap:3px}
.gift-chat-card b{font-size:14px;overflow-wrap:anywhere}
.gift-chat-card span{font-size:12px;color:#777}
.gift-chat-card small{font-size:11px;color:#aaa}
#edit-gift{width:100%;min-height:48px}
@media(max-width:420px){.gift-ready{padding:16px}.gift-ready-album img{width:76px;height:76px}}

.cover-customize{margin:24px 0;padding:20px;border:1px solid var(--line);border-radius:20px;background:var(--panel)}.cover-customize summary{cursor:pointer;font-weight:500}.cover-customize label{display:block;margin:18px 0;font-size:13px}.cover-customize input[type=range]{display:block;width:100%;margin-top:12px;accent-color:#687561}.cover-customize input[type=color]{width:60px;height:36px;vertical-align:middle;border:0;background:none}.custom-targets{display:flex;gap:8px;margin:20px 0}.custom-targets button{flex:1;border:1px solid var(--line);border-radius:30px;background:transparent;padding:9px}.custom-targets button[aria-pressed=true]{background:var(--ink);color:var(--panel)}

.photo-processing{border:1px solid var(--line);border-radius:26px;padding:42px 32px;text-align:center;width:min(420px,calc(100% - 40px));color:var(--ink);background:var(--panel)}.photo-processing::backdrop{background:#24232077;backdrop-filter:blur(4px)}.photo-processing h2{font:400 25px/1.6 var(--serif);margin:20px 0 10px}.photo-processing p{font-size:13px;color:var(--muted)}.photo-processing-spinner{width:38px;height:38px;border:2px solid var(--line);border-top-color:var(--ink);border-radius:50%;margin:auto;animation:record-spin 1.2s linear infinite}

.recovery-code{font:400 14px/1.9 var(--sans);letter-spacing:.3px;border-radius:14px;border:1px solid var(--line);padding:20px;white-space:normal}.copy-toast{position:fixed;left:50%;bottom:32px;transform:translateX(-50%);z-index:9999;max-width:calc(100% - 40px);padding:15px 25px;border-radius:30px;background:#242320;color:white;text-align:center;font:14px/1.5 var(--sans);box-shadow:0 8px 24px #0003}@media(min-width:721px){.personal-record .record-caption{font-size:13px;line-height:1.8;letter-spacing:.5px}.personal-record #record-style{font-size:15px;color:var(--ink)}}
/* Gift package emphasis (A안 261027) */
.package-choice.gift{background:#f5e9e8;border-color:#d9c2c1}.package-choice.gift:has(input:checked){background:#fbefee;border-color:#655c4f}.package-choice small b{color:var(--ink)}
.package-badge{position:absolute;top:-11px;right:14px;background:#2a2622;color:#fff;font-size:11px;font-weight:700;border-radius:30px;padding:3px 10px;line-height:1.6}

#gift-background {margin-block:1.5rem;word-break:keep-all}
#background-controls {margin:0;padding:0;border:0;min-width:0}
#background-controls legend {margin-bottom:.7rem}
.background-options {display:flex;flex-wrap:wrap;gap:.55rem;margin-block:.6rem 1rem}
.background-options label {display:flex;align-items:center;gap:.4rem;border:1px solid #c9c0b3;border-radius:2rem;padding:.65rem .9rem;cursor:pointer}
.background-options label:has(:checked) {background:#eae3d8;border-color:#796b5d}
#illustration-form label {display:grid;gap:.4rem}
#illustration-form input,#illustration-form select,#illustration-form textarea {font:inherit;width:100%;max-width:100%;min-width:0;border:1px solid #cabfaf;border-radius:.7rem;padding:.65rem;background:#fffdf9;color:inherit}
#illustration-form {display:grid;gap:1rem}
#illustration-form[hidden] {display:none}
.illustration-person {display:grid;grid-template-columns:2fr 1fr 1fr;gap:.6rem;border:0;padding:0;margin:.8rem 0;min-width:0}
.illustration-person legend {margin-bottom:.3rem}
@media(max-width:600px){.illustration-person{grid-template-columns:1fr 1fr}.illustration-person label:first-of-type{grid-column:1/-1}}

.revision-progress{display:flex;gap:12px;align-items:flex-start;margin:18px 0;padding:18px;background:#f3effc;border:1px solid #d8cbed;border-radius:14px}.revision-progress[hidden]{display:none}.revision-progress p{margin:6px 0 0;font-size:14px;line-height:1.7}.revision-spinner{flex:none;width:22px;height:22px;border:3px solid #d8cbed;border-top-color:#7451a2;border-radius:50%;animation:revision-spin 1s linear infinite}@keyframes revision-spin{to{transform:rotate(360deg)}}@media(prefers-reduced-motion:reduce){.revision-spinner{animation:none}}
/* A visible preview stays with the typography controls rather than at page top. */
.cover-customize{overflow:visible!important}.custom-live-preview{position:sticky;top:12px;z-index:8;display:flex;align-items:center;gap:16px;margin:16px 0;padding:12px;background:#fcfaf6f5;border:1px solid var(--line);border-radius:16px;box-shadow:0 5px 20px #30292012;backdrop-filter:blur(8px)}.custom-live-preview img{display:block;width:150px;height:150px;max-width:45%;object-fit:contain;border-radius:5px}.custom-live-preview figcaption{font:inherit;font-size:12px;color:var(--muted);word-break:keep-all}.cover-customize input[type=range]{touch-action:pan-y}@media(max-width:600px){.custom-live-preview{top:8px;padding:8px;gap:12px}.custom-live-preview img{width:118px;height:118px}.custom-live-preview figcaption{font-size:11px}}