:root{
  --linen:#F4EBD9; --petal:#FFD1DC; --morning:#FFE58F; --peach:#FFDAB9; --terra:#E2725B;
  --fern:#A8B89A; --early:#D6D0E0; --clay:#C4A882; --ink:#3D2B1F; --white:#fff; --kakao:#FEE500;
  --muted:#7a6a5e; --line:1px solid var(--ink);
}
*{box-sizing:border-box;-webkit-tap-highlight-color:transparent}
[hidden]{display:none!important}
html,body{margin:0;height:100%}
body{background:#e9e1d2;color:var(--ink);font-family:Pretendard,-apple-system,sans-serif;font-size:14px;line-height:1.55;letter-spacing:-.01em;display:flex;justify-content:center}
button,input,textarea{font:inherit;color:inherit;letter-spacing:inherit}
.phone{width:100%;max-width:400px;min-height:100vh;background:var(--linen);position:relative;overflow-x:hidden}
@media(min-width:520px){body{align-items:center;padding:24px 0}.phone{min-height:820px;height:820px;border:var(--line);border-radius:28px;overflow-y:auto}}
.screen{display:none;min-height:100%;padding:18px 20px 150px;animation:in .3s ease;flex-direction:column}
.screen.on{display:flex}
@keyframes in{from{opacity:0}to{opacity:1}}
.bar-top{display:flex;justify-content:space-between;align-items:center;font-size:11px;letter-spacing:.04em;border-bottom:var(--line);padding-bottom:8px;margin-bottom:22px}
.bar-top .back{border:0;background:none;padding:0;cursor:pointer;font-size:11px}
.logo{font-weight:600;letter-spacing:.02em}
h1{font-size:21px;line-height:1.35;font-weight:500;letter-spacing:-.03em;margin:0 0 6px}
.sub{color:var(--muted);margin:0 0 18px;font-size:13px}
.lab{font-size:11px;letter-spacing:.04em;margin:22px 0 8px;color:var(--muted)}
.seg{display:flex;border:var(--line)}
.seg button{flex:1;border:0;border-right:var(--line);background:none;padding:10px 4px;font-size:13px;cursor:pointer}
.seg button:last-child{border-right:0}
.seg button.on{background:var(--ink);color:var(--linen)}
textarea{width:100%;min-height:220px;border:var(--line);border-radius:0;padding:14px;font-size:15px;line-height:1.7;background:var(--white);resize:none;margin-top:12px}
.drop{display:block;border:1px dashed var(--ink);padding:40px 16px;text-align:center;background:var(--white);cursor:pointer;margin-top:12px;font-size:13px}
.drop small{display:block;color:var(--muted);margin-top:4px}
.chips{display:flex;flex-wrap:wrap;gap:6px}
.chip{border:var(--line);background:none;padding:8px 12px;font-size:13px;cursor:pointer}
.chip.on{background:var(--ink);color:var(--linen)}
.field{display:flex;gap:8px}.field label{flex:1;font-size:11px;color:var(--muted)}
.field input{display:block;width:100%;margin-top:6px;border:var(--line);border-radius:0;padding:10px;font-size:15px;background:var(--white);color:var(--ink)}
.cta{position:fixed;left:50%;transform:translateX(-50%);bottom:0;width:100%;max-width:400px;padding:12px 20px calc(16px + env(safe-area-inset-bottom));background:inherit;border-top:var(--line)}
@media(min-width:520px){.cta{position:sticky;transform:none;left:auto;margin:auto -20px -150px;width:auto}}
.screen>.cta{background:inherit}
.btn{display:block;width:100%;border:var(--line);border-radius:0;padding:14px;font-size:15px;font-weight:500;cursor:pointer;background:var(--ink);color:var(--linen);text-align:center}
.btn+.btn{margin-top:6px}
.btn.terra{background:var(--terra);border-color:var(--terra);color:#fff}
.btn.line{background:none;color:var(--ink)}
.btn.kakao{background:var(--kakao);border-color:var(--kakao);color:#191600}
.btn.ghost{background:none;border:0;color:var(--muted);font-weight:400;font-size:13px;padding:10px}
.btn small{display:block;font-weight:400;font-size:11px;opacity:.75}
.lines{display:flex;flex-direction:column}
.ln{display:flex;align-items:center;border-bottom:var(--line);transition:.25s}
.ln.tag{border:0;padding:16px 0 4px;font-size:11px;letter-spacing:.06em;color:var(--terra)}
.ln input{flex:1;border:0;font-size:15px;background:none;padding:11px 0;min-width:0;color:var(--ink)}
.ln button{border:0;background:none;height:34px;padding:0 6px;cursor:pointer;flex:none;font-size:12px;color:var(--muted)}
.ln.gone{opacity:0;height:0;border:0;overflow:hidden}
.toast{position:fixed;left:50%;bottom:120px;transform:translateX(-50%) translateY(10px);background:var(--ink);color:var(--linen);padding:10px 16px;font-size:13px;opacity:0;transition:.25s;pointer-events:none;display:flex;gap:12px;align-items:center;z-index:9;white-space:nowrap}
.toast.on{opacity:1;transform:translateX(-50%);pointer-events:auto}.toast button{background:none;border:0;color:var(--morning);cursor:pointer;text-decoration:underline}
.mascot svg{display:block;width:100%;height:auto}
.hop svg{animation:hop 1.1s ease-in-out infinite;transform-origin:50% 90%}
@keyframes hop{0%,100%{transform:translateY(0)}45%{transform:translateY(-10px) rotate(-3deg)}55%{transform:translateY(-10px) rotate(3deg)}}
.prog{height:6px;border:var(--line);margin:18px 0 8px}.prog i{display:block;height:100%;width:0;background:var(--ink);transition:width .2s}
.song{border:var(--line);background:var(--white);padding:14px;margin-bottom:8px}
.song.on{outline:2px solid var(--terra);outline-offset:-2px}
.song .row{display:flex;align-items:center;gap:12px}
.play{width:42px;height:42px;border-radius:50%;border:var(--line);background:none;cursor:pointer;flex:none;display:flex;align-items:center;justify-content:center}
.play svg{width:14px;height:14px}
.song .t{font-weight:500;font-size:14px}.song .m{font-size:12px;color:var(--muted)}
.song .prog{height:3px;margin:12px 0 8px;border:0;background:var(--linen)}
.song .ly{min-height:20px;font-size:13px;color:var(--muted);text-align:center}
.pick{margin-top:10px;width:100%;border:var(--line);background:none;padding:9px;font-size:13px;cursor:pointer}
.song.on .pick{background:var(--terra);border-color:var(--terra);color:#fff}
.covers{display:grid;grid-template-columns:repeat(4,1fr);gap:6px}
.cv{aspect-ratio:1;border:var(--line);cursor:pointer;padding:6px;display:flex;align-items:flex-end;justify-content:center;background:var(--c)}
.cv.on{outline:2px solid var(--terra);outline-offset:2px}
.cv .mascot{width:70%}
.photo-add{display:flex;justify-content:space-between;align-items:center;border:var(--line);padding:12px 14px;margin-top:8px;background:var(--white);cursor:pointer;font-size:13px}
.photo-add b{font-weight:500}
.card{border:var(--line);background:var(--white);position:relative;overflow:hidden}
.card .cover{background:var(--c,var(--peach));padding:18px 18px 0;border-bottom:var(--line);position:relative;min-height:230px;display:flex;flex-direction:column;background-size:cover;background-position:center}
.card .cover .meta{display:flex;justify-content:space-between;font-size:11px;letter-spacing:.03em}
.card .cover h3{font-size:19px;font-weight:500;letter-spacing:-.03em;margin:10px 0 0}
.card .cover .mascot{width:120px;margin:auto auto 0}
.card .cover.has-photo .mascot{display:none}

.card .now{padding:16px 18px;min-height:56px;font-size:16px;font-weight:500;text-align:center;border-bottom:var(--line);display:flex;align-items:center;justify-content:center;gap:12px}
.card .now .play{width:36px;height:36px}
.card .now span{flex:1}
.card .letter{padding:18px;font-size:14px;line-height:1.8;white-space:pre-wrap}
.card .letter .from{display:block;text-align:right;margin-top:8px;font-size:12px;color:var(--muted)}
.wm{position:absolute;inset:0;pointer-events:none;display:flex;flex-wrap:wrap;align-content:space-around;justify-content:space-around;transform:rotate(-20deg) scale(1.4);opacity:.22;font-size:12px;font-weight:600;letter-spacing:.1em}
.price{display:flex;align-items:baseline;gap:8px;margin-top:4px}
.price b{font-size:28px;font-weight:500;letter-spacing:-.03em}
.price s{color:var(--muted);font-size:13px}
.badge{align-self:flex-start;display:inline-block;background:var(--terra);color:#fff;font-size:11px;padding:3px 7px;margin-top:8px}
.rows{margin-top:20px;border-top:var(--line)}
.rows div{display:flex;justify-content:space-between;padding:10px 0;border-bottom:var(--line);font-size:13px}
.rows div span:last-child{color:var(--muted)}
.where{font-size:12px;color:var(--muted);margin-top:14px}
.where i{font-style:normal;color:var(--ink);border:var(--line);padding:3px 7px;margin:6px 4px 0 0;display:inline-block;font-size:11px}
.small{font-size:11px;color:var(--muted);text-align:center;margin-top:10px}
.mini{display:flex;gap:12px;align-items:center;border:var(--line);background:var(--white);padding:10px}
.mini .sw{width:48px;height:48px;border:var(--line);background:var(--c,var(--peach));flex:none;background-size:cover;background-position:center}
.mini b{font-weight:500;display:block}.mini small{color:var(--muted);font-size:12px}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:6px;margin-top:6px}
.grid2 .btn{margin:0;font-size:13px;padding:12px}
.env{text-align:center;cursor:pointer;flex:1;display:flex;flex-direction:column;justify-content:center}
.env .mascot{width:190px;margin:10px auto 24px}
.env .open{display:inline-block;border:var(--line);padding:11px 22px;margin-top:6px;font-size:14px;background:var(--white)}
.hero{flex:1;display:flex;flex-direction:column}
.hero .mascot{width:210px;margin:18px auto 0}
.foot{display:flex;justify-content:space-between;font-size:11px;color:var(--muted);margin-top:16px}
.tpls{display:grid;grid-template-columns:repeat(4,1fr);gap:6px;margin-top:8px}
.tp{border:var(--line);background:none;padding:0;cursor:pointer;text-align:center;font-size:11px}
.tp.on{outline:2px solid var(--terra);outline-offset:2px}
.tp .th{aspect-ratio:3/4;position:relative;overflow:hidden;border-bottom:var(--line);background:var(--peach)}
.tp span{display:block;padding:4px 0}
.ph-full,.ph-frame,.ph-circle,.ph-grid i{background:var(--clay) center/cover no-repeat}
.ph-full{position:absolute;inset:0}
.ph-frame{position:absolute;left:18%;right:18%;top:22%;aspect-ratio:1;border:4px solid #fff;outline:1px solid var(--ink);transform:rotate(-4deg)}
.ph-circle{position:absolute;left:22%;right:22%;top:26%;aspect-ratio:1;border-radius:50%;border:1px solid var(--ink)}
.ph-grid{position:absolute;left:10%;right:10%;top:22%;bottom:8%;display:grid;grid-template-columns:1fr 1fr;gap:3px}
.ph-grid i{border:1px solid var(--ink)}
.card .cover .ph-frame{top:auto;bottom:18px;left:50%;width:150px;margin-left:-75px;right:auto;border-width:6px}
.card .cover .ph-circle{top:auto;bottom:18px;left:50%;width:150px;margin-left:-75px;right:auto}
.card .cover .ph-grid{top:auto;bottom:14px;height:150px;left:18px;right:18px}
.card .cover.t-frame,.card .cover.t-circle,.card .cover.t-grid{min-height:300px}
.card .cover.t-full{min-height:300px;color:#fff;text-shadow:0 1px 6px #0006}
.card .cover.has-photo .mascot{display:none}
.card .cover .meta,.card .cover h3{position:relative;z-index:1}
.how{border:var(--line);border-top:0;background:var(--white);padding:12px 14px;font-size:12px;display:flex;gap:10px;align-items:flex-start}
.how b{font-weight:500;display:block;font-size:13px}
.how .eq{flex:none;display:flex;gap:2px;align-items:flex-end;height:16px;margin-top:2px}
.how .eq i{width:3px;background:var(--terra);animation:eq .9s infinite ease-in-out}
.how .eq i:nth-child(2){animation-delay:.2s}.how .eq i:nth-child(3){animation-delay:.4s}
@keyframes eq{0%,100%{height:4px}50%{height:16px}}
.pays{border-top:var(--line);margin-top:18px}
.pay{display:flex;align-items:center;gap:10px;padding:11px 2px;border-bottom:var(--line);cursor:pointer;font-size:14px}
.pay input{appearance:none;width:16px;height:16px;border:var(--line);border-radius:50%;margin:0;flex:none}
.pay input:checked{background:radial-gradient(var(--ink) 40%,transparent 45%)}
.pay small{margin-left:auto;font-size:11px;color:var(--muted)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:6px;margin-top:6px}
.grid3 .btn{margin:0;font-size:12px;padding:11px 4px}

.codebox{display:flex;gap:6px;margin-top:10px}
.codebox input{flex:1;border:var(--line);border-radius:0;padding:10px;font-size:15px;background:var(--white);text-transform:uppercase;min-width:0}
.codebox button{border:var(--line);background:var(--ink);color:var(--linen);padding:0 14px;cursor:pointer}
.codeok{font-size:12px;color:var(--muted);margin-top:8px}
.btn[disabled]{opacity:.45;cursor:default}
.err{color:var(--terra);font-size:12px;margin-top:6px;min-height:16px}
.addline{border:1px dashed var(--ink);background:none;padding:8px;font-size:12px;cursor:pointer;margin-top:6px}
.card .cover .msg{position:relative;z-index:1;font-size:30px;line-height:1.1;font-weight:500;letter-spacing:-.04em;margin-top:14px;max-width:80%}
.card .cover.on-dark{color:#fff}
.card .cover.has-photo .msg{font-size:24px}
.card .cover.t-full .msg,.card .cover.t-full .meta{color:#fff;text-shadow:0 1px 6px #0006}
.swatches{display:grid;grid-template-columns:repeat(8,1fr);gap:6px}
.swatch{aspect-ratio:1;border:var(--line);cursor:pointer;background:var(--c);padding:0}
.swatch.on{outline:2px solid var(--terra);outline-offset:2px}
.msgs{display:flex;flex-wrap:wrap;gap:6px}
.photo-btns{display:grid;grid-template-columns:1fr 1fr;gap:6px}
.photo-btns label{border:var(--line);background:var(--white);padding:12px;text-align:center;font-size:13px;cursor:pointer}
.photo-btns label.has{grid-column:1/-1}
.price-note{display:flex;justify-content:space-between;font-size:12px;color:var(--muted);margin-top:6px}
.clear-ph{border:0;background:none;color:var(--muted);text-decoration:underline;font-size:12px;cursor:pointer;padding:0}
.cta.flow{position:static;transform:none;left:auto;width:auto;margin:16px 0 0;padding:0;border-top:0;background:none}
#s-done{padding-bottom:40px}