/* 짝로그 · 편집기 — 화이트 톤. 모든 글자는 자간을 좁게 쓴다. */
:root{
  --bg:#ffffff;--card:#fff;--ink:#222;--muted:#8b8b8b;--line:#ebebea;--soft:#f7f7f6;
  --accent:#a47a64;--accent-soft:#f6f0ec;--ok:#4f8a6b;--warn:#c4573f;
  --r:18px;--shadow:0 1px 2px rgba(0,0,0,.03),0 6px 22px rgba(0,0,0,.045);
}
*{box-sizing:border-box;margin:0;padding:0;letter-spacing:-.025em}
html{-webkit-text-size-adjust:100%}
body{background:var(--bg);color:var(--ink);font:400 14px/1.6 'Pretendard Variable',Pretendard,system-ui,sans-serif;-webkit-font-smoothing:antialiased;-webkit-tap-highlight-color:transparent}
button,input,textarea,select{font:inherit;color:inherit}
button{cursor:pointer}
button:disabled{cursor:not-allowed;opacity:.45}
a{color:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}

/* 상단바 */
.top{position:sticky;top:0;z-index:30;height:64px;display:flex;align-items:center;gap:16px;padding:0 max(20px,calc((100vw - 1240px)/2));background:rgba(255,255,255,.9);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-bottom:1px solid var(--line)}
.brand{display:inline-flex;align-items:center;gap:9px;font:700 22px/1 'Pretendard Variable',Pretendard,system-ui,sans-serif;text-decoration:none}
.brand-logo{border-radius:9px;display:block}
.save-pill{font-size:12px;color:var(--muted);background:#fff;border:1px solid var(--line);border-radius:99px;padding:5px 12px;max-width:42vw;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.save-pill.dirty{color:var(--accent);border-color:#ebcfc4;background:var(--accent-soft)}
.save-pill.ok{color:var(--ok)}
.save-pill.err{color:var(--warn);border-color:#efc7bf}
.top-actions{margin-left:auto;display:flex;gap:8px}
.btn{border:1px solid var(--line);background:#fff;border-radius:99px;padding:10px 20px;font-weight:600;min-height:42px;transition:background .15s,border-color .15s,transform .05s}
.btn:hover{border-color:#d6d6d4}
.btn:active{transform:scale(.98)}
.btn.dark{background:var(--ink);border-color:var(--ink);color:#fff}
.btn.dark:hover{background:#3b3b3b}
.btn.accent{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.ghost{background:transparent}
.btn.mini{padding:6px 14px;min-height:34px;font-size:13px}
.btn.light{background:#fff;border-color:var(--line);color:var(--ink)}

/* 작업 영역 */
.workspace{max-width:1240px;margin:0 auto;padding:24px 20px 60px;display:grid;grid-template-columns:minmax(340px,420px) minmax(0,1fr);gap:32px;align-items:start}
.stage{position:sticky;top:88px}
.stage-bar{display:flex;justify-content:space-between;align-items:center;margin:0 6px 12px}
.stage-bar b{font-size:13px}
.device{width:min(100%,372px);margin:0 auto;padding:10px;border-radius:44px;background:#f4f4f3;box-shadow:0 18px 50px rgba(0,0,0,.10),0 0 0 1px #e6e6e4,inset 0 0 0 2px #fff}
.device-screen{position:relative;border-radius:34px;overflow:hidden;background:#fff;height:min(720px,calc(100vh - 210px));min-height:560px}
.device-screen::before{content:'';position:absolute;top:8px;left:50%;transform:translateX(-50%);width:88px;height:24px;border-radius:14px;background:#ececea;z-index:2;pointer-events:none}
.device-screen iframe{display:block;width:100%;height:100%;border:0}
.stage-note{margin-top:12px;text-align:center;font-size:12px;color:var(--muted)}

/* 탭 */
.tabs{display:flex;gap:6px;overflow-x:auto;padding:4px 2px 14px;scrollbar-width:none;position:sticky;top:64px;z-index:20;background:linear-gradient(var(--bg) 78%,transparent)}
.tabs::-webkit-scrollbar{display:none}
.tab{flex:none;display:flex;align-items:center;gap:8px;border:1px solid var(--line);background:#fff;border-radius:99px;padding:10px 18px;font-weight:600;min-height:44px;color:var(--muted)}
.tab i{display:grid;place-items:center;width:20px;height:20px;border-radius:50%;background:var(--soft);font-size:11px;font-style:normal;color:var(--muted)}
.tab.on{background:var(--ink);border-color:var(--ink);color:#fff}
.tab.on i{background:rgba(255,255,255,.2);color:#fff}
.tab .dot{width:7px;height:7px;border-radius:50%;background:var(--warn)}

/* 카드 */
.panel{display:flex;flex-direction:column;gap:16px}
.card{background:var(--card);border:1px solid var(--line);border-radius:var(--r);box-shadow:var(--shadow);padding:24px 26px}
.card>header{margin-bottom:18px}
.card h2{font-size:17px;font-weight:700}
.card h2 .req{margin-left:6px}
.card .sub{font-size:12.5px;color:var(--muted);margin-top:2px}
.card h3{font-size:13px;font-weight:700;margin:22px 0 10px}
.card h3:first-of-type{margin-top:4px}
.req{font-size:11px;font-weight:700;color:var(--warn);font-style:normal}
.hint{font-size:12px;color:var(--muted);line-height:1.65;margin-top:8px}
.notice{background:var(--soft);color:#6b5a50;border-radius:12px;padding:12px 14px;font-size:12.5px;line-height:1.65}

/* 접고 펼치는 카드 (내용 탭) */
details.card.acc{padding:0;overflow:hidden}
details.card.acc>summary{display:flex;align-items:center;gap:10px;list-style:none;cursor:pointer;padding:0 24px;min-height:62px}
details.card.acc>summary::-webkit-details-marker{display:none}
details.card.acc>summary h2{flex:1;font-size:16px}
details.card.acc>summary:hover{background:var(--soft)}
.card-no{flex:none;display:grid;place-items:center;min-width:26px;height:26px;padding:0 7px;border-radius:99px;background:var(--soft);border:1px solid var(--line);font-size:11px;font-weight:700;color:var(--muted)}
.card .meta{font-size:12px;color:var(--muted);white-space:nowrap}
.chev{position:relative;flex:none;display:block;width:30px;height:30px;border-radius:50%;font-size:0;line-height:0;transition:transform .25s ease,background .2s}
.chev::before{content:'';position:absolute;left:50%;top:50%;margin:-5px 0 0 -6px;width:12px;height:10px;background:#cfcfcf;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.2 1.4 11.6 9.4'%3E%3Cpath d='M2.4 2.6h9.2L7 9.6z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.2 1.4 11.6 9.4'%3E%3Cpath d='M2.4 2.6h9.2L7 9.6z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transition:background .2s,transform .25s}
details.card.acc>summary:hover .chev{background:var(--accent-soft)}
details.card.acc>summary:hover .chev::before,details.card.acc[open]>summary .chev::before{background:var(--accent)}
details.card.acc[open]>summary{border-bottom:1px solid var(--line)}
details.card.acc[open]>summary .chev::before{transform:rotate(180deg)}
details.card.acc>.card-body{padding:18px 26px 24px}
details.card.acc.hidden-sec>summary h2{color:var(--muted);font-weight:600}
.sub-acc{margin:16px 0 4px;border:1px solid var(--line);border-radius:14px;background:#fff}
.sub-acc>summary{list-style:none;display:flex;align-items:center;gap:10px;padding:6px 8px 6px 16px;min-height:48px;cursor:pointer}
.sub-acc>summary::-webkit-details-marker{display:none}
.sub-acc>summary h3{margin:0;flex:1;font-size:14px}
.sub-acc .meta{font-size:12px;color:var(--muted);white-space:nowrap}
.sub-acc>summary:hover .chev{background:var(--accent-soft)}
.sub-acc>summary:hover .chev::before,.sub-acc[open]>summary .chev::before{background:var(--accent)}
.sub-acc[open]>summary .chev::before{transform:rotate(180deg)}
.sub-acc[open]>summary{border-bottom:1px solid var(--line)}
.sub-acc>.sub-body{padding:6px 16px 16px}
.sub-acc.hi{margin:20px 0 8px;border:2px solid var(--accent);background:var(--accent-soft);box-shadow:0 4px 16px rgba(0,0,0,.06)}
.sub-acc.hi>summary{min-height:56px}
.sub-acc.hi>summary h3{font-size:15px;font-weight:800;display:flex;align-items:center;gap:8px}
.sub-acc.hi>summary h3::before{content:'AI';display:inline-grid;place-items:center;height:22px;padding:0 8px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-weight:800;letter-spacing:0}
.sub-acc.hi .meta{color:var(--accent);font-weight:600}
.sub-acc.hi[open]>summary{border-bottom:1px solid rgba(0,0,0,.08)}
.sub-acc.hi>.sub-body{background:#fff;border-radius:0 0 12px 12px}
.flow-note{font-size:12.5px;color:var(--muted);margin:2px 4px 4px;line-height:1.6}
.flow-note .req{margin:0 2px}

/* 폼 */
.field{display:block;margin:14px 0}
.field>span{display:block;margin-bottom:6px;font-size:12.5px;font-weight:600}
.field input,.field textarea,.field select,.input{width:100%;border:1px solid var(--line);background:var(--soft);border-radius:12px;padding:12px 14px;outline:none;min-height:46px}
.field select{-webkit-appearance:none;appearance:none;padding-right:40px;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.2 1.4 11.6 9.4'%3E%3Cpath d='M2.4 2.6h9.2L7 9.6z' fill='%23cfcfcf' stroke='%23cfcfcf' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 14px center;background-size:12px 10px}
/* 적용 표시 */
.card .meta.ok,.sub-acc .meta.ok{color:#3f8f68;font-weight:600}
.card .meta:empty{display:none}
.chip.selected::before{content:'✓';margin-right:5px;color:var(--accent);font-weight:800}
.scene{position:relative}
.scene.selected::after,.cv.selected::after{content:'✓ 적용 중';position:absolute;top:8px;right:8px;font-size:10.5px;font-weight:800;padding:3px 8px;border-radius:999px;background:var(--accent);color:#fff;pointer-events:none}
.cv{position:relative}
.cv.selected::after{top:6px;right:6px}
.photo.selected{box-shadow:0 0 0 2px var(--accent)}
.flash{animation:applyFlash .9s ease}
@keyframes applyFlash{0%{box-shadow:0 0 0 0 rgba(227,138,163,.65)}60%{box-shadow:0 0 0 9px rgba(227,138,163,0)}100%{box-shadow:0 0 0 0 rgba(227,138,163,0)}}
.gpick{grid-template-columns:repeat(5,1fr);gap:6px;max-width:360px}
.gpick .photo{aspect-ratio:3/4;border-radius:9px}
.gorder{display:grid;grid-template-columns:repeat(5,1fr);gap:6px;margin-top:6px;max-width:360px}
.gcell{position:relative;aspect-ratio:3/4;border-radius:9px;overflow:hidden;background:var(--line);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;box-shadow:0 1px 4px rgba(0,0,0,.12)}
.gcell img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.gcell b{position:absolute;left:4px;top:4px;min-width:20px;height:20px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;display:grid;place-items:center;pointer-events:none}
.gcell .gx{position:absolute;right:3px;top:3px;width:20px;height:20px;padding:0;border:0;border-radius:50%;background:rgba(255,255,255,.92);color:#555;font-size:14px;line-height:1;cursor:pointer;box-shadow:0 1px 3px rgba(0,0,0,.25)}
.gcell.gdrag{opacity:.3}
.upload.full{cursor:default;opacity:.85;border-style:solid;background:var(--soft)}
.upload .cnt{font-weight:600;color:var(--accent)}
.gp{position:relative}
.gp b{position:absolute;top:6px;left:6px;min-width:22px;height:22px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:12px;display:grid;place-items:center;box-shadow:0 1px 4px rgba(0,0,0,.25)}
.gp.off img{opacity:.4}
.gp.sel{box-shadow:0 0 0 2.5px var(--accent)}
.grow2{display:flex;align-items:center;gap:10px;padding:8px 0;border-bottom:1px solid var(--line);background:#fff}
.grow2 .grip{flex:none;width:28px;height:44px;display:flex;align-items:center;justify-content:center;color:var(--muted,#999);font-size:16px;letter-spacing:-.15em;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:8px}
.grow2 .grip:hover{background:var(--soft,#f3f3f3)}
.grow2 img{flex:none;width:44px;height:58px;object-fit:cover;border-radius:8px;pointer-events:none}
.grow2 .gn{flex:1;font-size:13px;font-weight:600}
.grow2 .gx{flex:none;width:32px;height:32px;border:1px solid var(--line);background:#fff;border-radius:50%;font-size:18px;line-height:1;color:var(--muted);cursor:pointer}
.grow2.dragging{position:relative;z-index:20;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.18);transition:none;cursor:grabbing}
.grow2.dragging .grip{cursor:grabbing}
.kmock{display:flex;align-items:flex-end;gap:6px;padding:14px;border-radius:14px;background:#b2c7da}
.km-card{width:min(300px,100%);background:#fff;border-radius:6px 16px 16px 16px;overflow:hidden;box-shadow:0 1px 3px rgba(0,0,0,.15)}
.km-img{aspect-ratio:1200/630;background:var(--line);overflow:hidden}
.km-img img{display:block;width:100%;height:100%;object-fit:cover}
.km-noimg{height:100%;display:grid;place-items:center;font-size:12px;color:var(--muted)}
.km-tx{padding:10px 12px 12px}
.km-tx b{display:block;font-size:14px;line-height:1.4;color:#222;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.km-tx p{margin:3px 0 0;font-size:12.5px;line-height:1.45;color:#666;display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden}
.km-tx span{display:block;margin-top:6px;font-size:11px;color:#999}
.kmock small{font-size:10.5px;color:#556;white-space:nowrap}
.atabs{display:flex;gap:6px;margin:6px 0 4px;padding:4px;background:var(--soft);border-radius:14px}
.atab{flex:1;min-height:42px;border:0;border-radius:11px;background:transparent;font:inherit;font-weight:700;color:var(--muted);cursor:pointer}
.atab.on{background:#fff;color:var(--ink);box-shadow:0 1px 5px rgba(0,0,0,.12)}
.atab i{display:inline-grid;place-items:center;min-width:18px;height:18px;margin-left:4px;padding:0 5px;border-radius:999px;background:var(--accent);color:#fff;font-size:11px;font-style:normal}
.acc-add{display:flex;gap:8px;align-items:center;margin-top:12px}
.acc-add select{flex:1;min-height:42px;border:1px solid var(--line);border-radius:12px;padding:0 12px;background:var(--soft);font:inherit}
.psets{display:grid;grid-template-columns:1fr;gap:12px;margin:12px 0}
.pset{position:relative;display:flex;gap:14px;align-items:stretch;padding:12px;border:1.5px solid var(--line);border-radius:16px;background:#fff}
.pset.on{border-color:var(--accent);background:var(--accent-soft)}
.pset.on::after{content:'✓ 적용 중';position:absolute;top:10px;right:10px;font-size:10.5px;font-weight:800;padding:3px 9px;border-radius:999px;background:var(--accent);color:#fff}
.pset .ph{position:relative;flex:0 0 96px;aspect-ratio:9/16;border-radius:10px;overflow:hidden;background:var(--line);box-shadow:0 2px 8px rgba(0,0,0,.12)}
.pset .ph iframe{position:absolute;left:0;top:0;width:375px;height:812px;border:0;transform-origin:0 0;pointer-events:none}
.pset .pi{flex:1;min-width:0;display:flex;flex-direction:column;gap:5px}
.pset .pi b{font-size:15px}
.pset .pi small{font-size:12.5px;color:var(--muted);line-height:1.5}
.ptags{display:flex;flex-wrap:wrap;gap:4px}
.ptags i{font-style:normal;font-size:11px;padding:3px 8px;border-radius:999px;background:var(--soft);color:#6f5a50}
.pset .btn{align-self:flex-start;margin-top:auto}
.rsum{display:grid;grid-template-columns:repeat(4,1fr);gap:8px;margin-top:10px}
.rsum>div{background:var(--soft);border-radius:12px;padding:12px 6px;text-align:center}
.rsum b{display:block;font-size:22px;color:var(--accent)}
.rsum span{font-size:11.5px;color:var(--muted)}
.grow{display:flex;align-items:flex-start;gap:10px;padding:12px 0;border-bottom:1px solid var(--line)}
.gsv{flex:0 0 34px;height:34px;display:block}.gsv svg{width:100%;height:100%}
.gtx{flex:1;min-width:0}.gtx b{font-size:13.5px}.gtx p{margin:3px 0 0;font-size:13px;line-height:1.5;word-break:break-all}
.gbt{display:flex;flex-direction:column;gap:5px;flex:none}
.gst{font-style:normal;font-size:11px;padding:2px 8px;border-radius:999px;margin-left:4px}
.gst.on{background:#eaf6ef;color:#3f8f68}.gst.wait{background:#fff3df;color:#b9792b}.gst.off{background:#f0eceb;color:#8c807b}
.price{font-size:26px;font-weight:800;margin:6px 0 4px;color:var(--ink)}
.notice.ok{background:#eef8f2;border-color:#cfe9da;color:#2f6f50}
.btn[disabled]{opacity:.5;cursor:not-allowed}
.fpair{margin:14px 0}
.fpair-t{display:block;margin-bottom:2px;font-size:12.5px;font-weight:600}
.fpair .field{margin:6px 0}
.fpair .field>span{font-weight:400;color:var(--muted);font-size:12px;margin-bottom:4px}
.field textarea{min-height:96px;resize:vertical;line-height:1.7}
.field input:focus,.field textarea:focus,.field select:focus,.input:focus{border-color:var(--accent);background:#fff;box-shadow:0 0 0 3px var(--accent-soft)}
.two{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.toggle{display:flex;justify-content:space-between;align-items:center;gap:12px;padding:12px 0;border-bottom:1px solid var(--line);font-weight:600;cursor:pointer}
.switch{position:relative;width:46px;height:28px;flex:none}
.switch input{position:absolute;inset:0;opacity:0;width:100%;height:100%;margin:0;cursor:pointer}
.switch i{position:absolute;inset:0;border-radius:99px;background:#dcdcda;transition:.2s}
.switch i::after{content:'';position:absolute;left:3px;top:3px;width:22px;height:22px;border-radius:50%;background:#fff;box-shadow:0 1px 3px rgba(0,0,0,.25);transition:.2s}
.switch input:checked+i{background:var(--accent)}
.switch input:checked+i::after{transform:translateX(18px)}
.range{display:flex;align-items:center;gap:12px}
.range input{flex:1;accent-color:var(--accent)}
.range output{min-width:34px;text-align:right;font-weight:700}

/* 선택지 */
.chips{display:flex;flex-wrap:wrap;gap:8px}
.chip{border:1px solid var(--line);background:#fff;border-radius:12px;padding:9px 14px;min-height:40px;font-weight:500;display:inline-flex;align-items:center;gap:8px}
.chip:hover{border-color:#cfcfcd}
.chip.selected{border-color:var(--accent);background:var(--accent-soft);color:#6f4d3d;font-weight:700}
.sw{width:18px;height:18px;border-radius:50%;border:1px solid rgba(0,0,0,.14);flex:none}

/* 커버 썸네일 */
.cover-scroll{position:relative}
.cover-row{display:flex;gap:12px;overflow-x:auto;scroll-snap-type:x proximity;padding:4px 2px 14px;scrollbar-width:thin;scrollbar-color:#cfcfcd transparent;-webkit-overflow-scrolling:touch}
.cover-row::-webkit-scrollbar{height:8px}
.cover-row::-webkit-scrollbar-thumb{background:#d4d4d2;border-radius:99px}
.cover-row::-webkit-scrollbar-track{background:transparent}
.cs-arrow{position:absolute;top:34%;left:-10px;z-index:3;width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:rgba(255,255,255,.95);box-shadow:0 2px 10px rgba(0,0,0,.12);font-size:20px;line-height:1;color:var(--ink)}
.cs-arrow.r{left:auto;right:-10px}
.cs-arrow:hover{border-color:var(--accent)}
.cs-arrow{font-size:0}
.cs-arrow::before{content:'';position:absolute;left:50%;top:50%;margin:-5px 0 0 -6px;width:12px;height:10px;background:#cfcfcf;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.2 1.4 11.6 9.4'%3E%3Cpath d='M2.4 2.6h9.2L7 9.6z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.2 1.4 11.6 9.4'%3E%3Cpath d='M2.4 2.6h9.2L7 9.6z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(90deg)}
.cs-arrow.r::before{transform:rotate(-90deg)}
.cs-arrow:hover::before{background:var(--accent)}
.cv{flex:0 0 112px;scroll-snap-align:start;border:2px solid transparent;background:none;border-radius:14px;padding:0;text-align:center}
.cv .ph{display:block;position:relative;aspect-ratio:9/16;border-radius:12px;overflow:hidden;background:var(--line);box-shadow:0 2px 10px rgba(60,40,20,.12)}
.cv .ph iframe{position:absolute;left:0;top:0;width:375px;height:667px;border:0;transform-origin:0 0;pointer-events:none;background:#fff}
.cv b{display:block;margin-top:7px;font-size:12px}
.cv small{display:block;font-size:10.5px;color:var(--muted);line-height:1.3}
.cv.selected{border-color:var(--accent);padding:3px}
.cv.selected b{color:var(--accent)}

/* 인트로 장면 선택 */
.scene-list{display:grid;grid-template-columns:repeat(2,1fr);gap:10px}
.scene{display:flex;gap:12px;align-items:center;text-align:left;border:1px solid var(--line);background:#fff;border-radius:14px;padding:12px 14px;min-height:64px}
.scene i{flex:none;display:grid;place-items:center;width:38px;height:38px;border-radius:12px;background:var(--soft);font-style:normal;font-size:18px}
.scene b{display:block;font-size:13.5px}
.scene small{display:block;font-size:11.5px;color:var(--muted);line-height:1.4;margin-top:1px}
.scene.selected{border-color:var(--accent);background:var(--accent-soft)}
.scene.selected i{background:#fff}
.play-row{display:flex;gap:8px;margin-top:16px;flex-wrap:wrap}
.rand-now{font-size:15px;font-weight:700;padding:12px 14px;background:var(--soft);border:1px solid var(--line);border-radius:12px}

/* 사진 */
.upload{display:block;border:1.5px dashed #d8d8d6;border-radius:14px;padding:22px;text-align:center;background:var(--soft);color:var(--muted);cursor:pointer;font-weight:600}
.upload:hover{border-color:var(--accent);color:var(--accent)}
.upload input{display:none}
.photos{display:grid;grid-template-columns:repeat(5,1fr);gap:8px;margin-top:14px}
.photo{position:relative;aspect-ratio:1;border:2px solid transparent;border-radius:12px;overflow:hidden;padding:0;background:var(--line)}
.photo img{width:100%;height:100%;object-fit:cover;display:block}
.photo.selected{border-color:var(--accent)}
.photo:not(.selected) em{display:none}
.photo em{position:absolute;left:0;right:0;bottom:0;background:rgba(0,0,0,.62);color:#fff;font-size:10px;font-style:normal;padding:2px 0;text-align:center}
.photo.none{display:grid;place-items:center;font-size:11px;color:var(--muted);background:var(--soft);border:1px dashed #d8d8d6}
.photo.none.selected{border:2px solid var(--accent);color:var(--accent)}
.focus{margin:4px 0 2px;text-align:center}
.focus-frame{position:relative;margin:0 auto 8px;overflow:hidden;border-radius:12px;border:2px solid var(--accent);background:var(--line);cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none}
.focus-frame.drag{cursor:grabbing}
.focus-frame::before{content:'';position:absolute;inset:0;z-index:2;background:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='150' height='96'%3E%3Ctext x='75' y='54' text-anchor='middle' transform='rotate(-24 75 50)' font-size='17' font-weight='800' letter-spacing='1.5' fill='rgba(255,255,255,.8)' stroke='rgba(40,40,40,.45)' stroke-width='.8' font-family='sans-serif'%3ESAMPLE%3C/text%3E%3C/svg%3E") 0 0/150px 96px repeat;pointer-events:none}
.focus-frame img{display:block;width:100%;height:100%;object-fit:cover;pointer-events:none}
.focus-frame::after{content:'✥ 끌어서 이동';position:absolute;left:8px;top:8px;padding:3px 8px;border-radius:999px;background:rgba(255,255,255,.92);color:#555;font-size:11px;box-shadow:0 1px 4px rgba(0,0,0,.2);pointer-events:none;transition:opacity .25s}
.focus-frame.drag::after{opacity:0}
.pdel{position:absolute;top:4px;right:4px;z-index:2;min-width:22px;height:22px;padding:0 6px;border:0;border-radius:11px;background:rgba(255,255,255,.94);color:#6b6b6b;font:inherit;font-size:15px;line-height:22px;text-align:center;cursor:pointer;box-shadow:0 1px 4px rgba(0,0,0,.22)}
.pdel::after{content:'';position:absolute;inset:-7px}
.pdel:hover{color:#d94452}
.pdel.armed{background:#e5646e;color:#fff;font-size:11px;font-weight:700}
.picker{display:flex;gap:8px;overflow-x:auto;padding:4px 2px 8px}
.picker .photo{flex:0 0 68px;width:68px;height:68px}

/* 반복 항목 */
.item{background:var(--soft);border:1px solid var(--line);border-radius:14px;padding:6px 16px 16px;margin:12px 0}
.item-head{display:flex;justify-content:space-between;align-items:center;margin:10px 0 0}
.item-head b{font-size:13px}
.link-btn{border:0;background:none;color:var(--muted);font-size:12px;text-decoration:underline;padding:6px}
.add-btn{width:100%;border:1.5px dashed #d8d8d6;background:none;border-radius:12px;padding:12px;font-weight:600;color:var(--muted);margin-top:6px}
.add-btn:hover{border-color:var(--accent);color:var(--accent)}

/* 사진 스타일 변환 */
.stiles{display:grid;grid-template-columns:repeat(4,1fr);gap:10px}
.stile{border:2px solid transparent;background:none;border-radius:14px;padding:0;text-align:center}
.stile img{display:block;width:100%;aspect-ratio:3/4;object-fit:cover;border-radius:11px;background:var(--soft);border:1px solid var(--line)}
.stile b{display:block;margin-top:7px;font-size:12.5px}
.stile small{display:block;font-size:11px;color:var(--muted);line-height:1.3}
.stile.selected{border-color:var(--accent);padding:3px}
.stile.selected b{color:var(--accent)}

.consent{display:flex;gap:10px;align-items:flex-start;padding:12px 14px;background:var(--soft);border:1px solid var(--line);border-radius:12px;font-size:12.5px;line-height:1.55;cursor:pointer;margin-bottom:12px}
.consent input{flex:none;width:18px;height:18px;margin-top:2px;accent-color:var(--accent)}
/* 장소 검색 */
.venue-search{display:flex;gap:8px;margin:10px 0}
.venue-search .input{flex:1;min-width:0}
.venue-results{font-size:12.5px;color:var(--muted)}
.venue-result{display:block;width:100%;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:12px 14px;margin:6px 0}
.venue-result:hover{border-color:var(--accent);background:var(--accent-soft)}
.venue-result b{display:block;font-size:13.5px;color:var(--ink)}

/* 구성 순서 */
.srow{display:flex;align-items:center;gap:8px;padding:9px 0;border-bottom:1px solid var(--line);background:#fff}
.srow .grip{flex:none;width:28px;height:36px;display:flex;align-items:center;justify-content:center;color:var(--muted,#999);font-size:16px;letter-spacing:-.15em;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:8px}
.srow .grip:hover{background:var(--soft,#f3f3f3)}
.srow.off{padding-left:36px}
.srow.dragging{position:relative;z-index:20;border:1px solid var(--line);border-radius:12px;box-shadow:0 10px 28px rgba(0,0,0,.18);transition:none;cursor:grabbing}
.srow.dragging .grip{cursor:grabbing}
body.dragging-row{user-select:none;-webkit-user-select:none;cursor:grabbing}
.srow label{flex:1;display:flex;align-items:center;gap:10px;font-weight:600;cursor:pointer}
.srow.off label{color:var(--muted);font-weight:500}
.srow input[type=checkbox]{width:18px;height:18px;accent-color:var(--accent)}
.srow button{position:relative;width:36px;height:36px;border:1px solid var(--line);background:#fff;border-radius:10px;font-size:0;cursor:pointer}
.srow button::before{content:'';position:absolute;left:50%;top:50%;margin:-5px 0 0 -6px;width:12px;height:10px;background:#cfcfcf;-webkit-mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.2 1.4 11.6 9.4'%3E%3Cpath d='M2.4 2.6h9.2L7 9.6z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;mask:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='1.2 1.4 11.6 9.4'%3E%3Cpath d='M2.4 2.6h9.2L7 9.6z' fill='%23000' stroke='%23000' stroke-width='2.4' stroke-linejoin='round'/%3E%3C/svg%3E") center/contain no-repeat;transform:rotate(0deg)}
.srow button[data-dir="-1"]::before{transform:rotate(180deg)}
.srow button:hover::before{background:var(--accent)}

/* 공개 */
.check{display:flex;align-items:center;gap:10px;padding:10px 6px;font-weight:600;width:100%;border:0;border-bottom:1px solid var(--line);background:none;text-align:left;cursor:pointer;border-radius:10px}
.check:hover{background:var(--soft)}
.check .go{margin-left:auto;font-style:normal;font-size:12px;font-weight:600;color:var(--accent);white-space:nowrap}
.check.ok .go{color:var(--muted);font-weight:500}
.check i{display:grid;place-items:center;width:22px;height:22px;border-radius:50%;font-style:normal;font-size:12px;background:#dcdcda;color:#fff}
.check.ok i{background:var(--ok)}
.check small{color:var(--muted);font-weight:400}
.url-box{word-break:break-all;background:var(--soft);border:1px solid var(--line);border-radius:12px;padding:12px 14px;margin:8px 0;font-size:13px}
.btn-row{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px}
.btn-row a.btn{text-decoration:none;display:inline-flex;align-items:center}

[hidden]{display:none!important}

/* 모바일 미리보기 */
.m-preview,.m-fab{display:none}
@media(max-width:900px){
  .top{padding:0 14px;height:58px}
  .save-pill{max-width:36vw}
  .btn.ghost{display:none}
  .workspace{display:block;padding:10px 12px 100px}
  .stage{display:none}
  .tabs{top:58px;margin:0 -12px;padding:6px 12px 12px}
  .card{padding:20px 18px;border-radius:16px}
  details.card.acc{padding:0}
  details.card.acc>summary{padding:0 16px}
  details.card.acc>.card-body{padding:16px 16px 20px}
  .cv{flex-basis:98px}
  .cs-arrow{display:none}
  .photos{grid-template-columns:repeat(4,1fr)}
  .scene-list{grid-template-columns:1fr}
  .stiles{grid-template-columns:repeat(2,1fr)}
  .two{grid-template-columns:1fr}
  .m-fab{display:block;position:fixed;left:50%;transform:translateX(-50%);bottom:calc(16px + env(safe-area-inset-bottom));z-index:40;border:0;border-radius:99px;padding:15px 28px;background:var(--ink);color:#fff;font-weight:700;box-shadow:0 10px 30px rgba(0,0,0,.3)}
  .m-preview{position:fixed;inset:0;z-index:60;background:#fff;flex-direction:column}
  .m-preview.open{display:flex}
  .m-preview-bar{display:flex;justify-content:space-between;padding:calc(10px + env(safe-area-inset-top)) 12px 10px;border-bottom:1px solid var(--line)}
  .m-preview iframe{flex:1;border:0;width:100%;background:#fff}
}

/* AI 변환 중 로딩 안내 */
.busy-ov{position:fixed;inset:0;z-index:9999;display:flex;align-items:center;justify-content:center;padding:24px;background:rgba(255,250,245,.88);backdrop-filter:blur(3px);-webkit-backdrop-filter:blur(3px)}
.busy-box{max-width:340px;text-align:center}
.busy-spin{width:46px;height:46px;margin:0 auto 18px;border:4px solid #f3d9d6;border-top-color:#f08fa2;border-radius:50%;animation:busySpin .9s linear infinite}
.busy-msg{margin:0 0 12px;font-size:17px;line-height:1.55;font-weight:600;color:#4a4039}
.busy-warn{margin:0;padding:10px 12px;border-radius:10px;background:#fff1ef;color:#b4513f;font-size:13px;line-height:1.6}
@keyframes busySpin{to{transform:rotate(360deg)}}

/* 처음 접속 가이드 */
.gd-ov{position:fixed;inset:0;z-index:9998}
.gd-hole{position:fixed;border-radius:12px;box-shadow:0 0 0 9999px rgba(40,32,30,.62);outline:2px solid #fff;pointer-events:none;transition:top .25s,left .25s,width .25s,height .25s}
.gd-card{position:fixed;padding:14px 16px;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.25);color:#4a4039}
.gd-step{font-size:11px;color:#b4513f;margin-bottom:2px}
.gd-title{font-size:16px}
.gd-desc{margin:6px 0 0;font-size:13.5px;line-height:1.6}
.gd-bar{position:fixed;left:0;right:0;bottom:0;display:flex;gap:8px;align-items:center;padding:12px 16px calc(12px + env(safe-area-inset-bottom));background:rgba(40,32,30,.78)}
.gd-bar button{height:40px;padding:0 16px;border-radius:999px;border:1px solid rgba(255,255,255,.5);background:transparent;color:#fff;font:inherit;font-size:14px;cursor:pointer}
.gd-bar .gd-off{margin-right:auto;border-color:transparent;opacity:.85;text-decoration:underline}
.gd-bar .gd-next{background:#fff;color:#4a4039;border-color:#fff;font-weight:600}

/* 혼주 정보: 좁은 화면(휴대폰)에서도 한 줄에 두 칸 */
.two.keep{grid-template-columns:1fr 1fr;gap:8px}

.hostf .dead{display:inline-flex;align-items:center;gap:6px;margin:-6px 0 10px;font-size:12.5px;color:var(--muted,#8a7a70);cursor:pointer}
.hostf .dead input{width:16px;height:16px;margin:0}
.hostf .dead .mum-ic{width:18px;height:18px;object-fit:contain;vertical-align:-4px;margin-right:4px}
.hostf .dead span{font-weight:600}

/* ===== 휴대폰 전용 화면 (PC 와 다르게): 아래 고정 메뉴, 위 탭 숨김, 터치하기 쉬운 크기 ===== */
.mbar,.mmore{display:none}
@media(max-width:900px){
  body{padding-bottom:calc(84px + env(safe-area-inset-bottom))}
  .tabs,.m-fab,.top-actions{display:none}
  .top{height:52px;gap:10px}
  .brand{font-size:17px}
  .save-pill{max-width:none;flex:1;min-width:0;text-align:center}
  .mbar{display:flex;position:fixed;left:0;right:0;bottom:0;z-index:50;padding:6px 8px calc(6px + env(safe-area-inset-bottom));background:rgba(255,255,255,.96);backdrop-filter:blur(14px);-webkit-backdrop-filter:blur(14px);border-top:1px solid var(--line);box-shadow:0 -4px 16px rgba(0,0,0,.05)}
  .mbar button{position:relative;flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px;min-height:52px;border:0;background:transparent;color:var(--muted);font:inherit;font-size:11px;border-radius:12px}
  .mbar button i{font-style:normal;font-size:19px;line-height:1;display:flex;align-items:center;justify-content:center;height:20px}
  .mbar button.on{color:var(--ink);font-weight:700;background:#f4efe9}
  .mbar button.mid{flex:1.15;margin:-14px 4px 0;min-height:60px;border-radius:18px;background:var(--ink);color:#fff;box-shadow:0 6px 16px rgba(0,0,0,.22)}
  .mbar .mdot{position:absolute;top:8px;right:calc(50% - 20px);width:8px;height:8px;border-radius:50%;background:#e2563f}
  .mmore{display:flex;flex-direction:column;position:fixed;right:10px;bottom:calc(76px + env(safe-area-inset-bottom));z-index:55;min-width:180px;padding:6px;border-radius:14px;background:#fff;box-shadow:0 10px 30px rgba(0,0,0,.2);border:1px solid var(--line)}
  .mmore[hidden]{display:none}
  .mmore button{min-height:46px;padding:0 14px;border:0;background:transparent;text-align:left;font:inherit;font-size:15px;border-radius:10px}
  .mmore button:active{background:#f4efe9}
  /* 입력·버튼은 손가락으로 누르기 쉽게 (글자 16px 이상이면 아이폰이 확대하지 않아요) */
  .input,.field input,.field textarea,.field select,select,input[type=text],input[type=search],input[type=password],textarea{font-size:16px}
  .btn{min-height:44px}
  .btn.mini{min-height:40px}
  details.card.acc>summary{min-height:58px}
  .chip{min-height:40px}
  .m-preview-bar .btn{min-height:42px}
  .gd-bar{bottom:0}
}

/* 스티커 디자인: 마우스를 올리면(휴대폰은 누르면) 스티커 5개 미리보기 */
.stk-chip{position:relative}
.stk-chip .stp{display:none;position:absolute;left:0;bottom:calc(100% + 8px);z-index:30;gap:6px;padding:8px;border-radius:14px;background:#fff;border:1px solid var(--line);box-shadow:0 8px 24px rgba(0,0,0,.16);white-space:nowrap}
.stk-chip .stp::after{content:'';position:absolute;left:var(--ax,22px);bottom:-6px;width:10px;height:10px;background:#fff;border-right:1px solid var(--line);border-bottom:1px solid var(--line);transform:rotate(45deg)}
.stk-chip .stp i{display:block;width:46px;height:46px;border-radius:10px;background:#f6f0ea;padding:4px;box-sizing:border-box}
.stk-chip .stp svg,.stk-chip .stp img{display:block;width:100%;height:100%;object-fit:contain}
.stk-chip:hover .stp,.stk-chip:focus-visible .stp,.stk-chip:focus .stp{display:flex}

/* 글꼴 선택: 한글 / 영문·숫자를 고르면 해당 드롭박스만 보인다 */
.flang{display:flex;gap:6px;margin:4px 0 2px}
.flang .chip{min-height:36px;padding:0 14px}
.fpair[data-lang="ko"] .fp-sel[data-l="en"],.fpair[data-lang="en"] .fp-sel[data-l="ko"]{display:none}

/* 인트로 장면 목록: 각 장면 옆에 재생 버튼 */
.scene-row{display:flex;gap:6px;align-items:stretch}
.scene-row .scene{flex:1;min-width:0}
.scene-play{flex:none;width:54px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1px;border:1px solid var(--line);background:#fff;border-radius:14px;color:var(--ink);font:inherit;cursor:pointer}
.scene-play span{font-size:15px;line-height:1}
.scene-play small{font-size:10.5px;color:var(--muted)}
.scene-play:hover,.scene-play:active{background:var(--soft)}

/* ===== 짝로그 러블리 리디자인: "페이퍼컷 러브레터" =====
   로고(분홍 종이를 오려 낸 카드, 하트 구멍, 계단 모양 네모)에서 가져온 디자인.
   - 카드는 종이를 한 장 더 겹쳐 놓은 듯한 그림자, 오른쪽 위 모서리는 계단 모양으로 살짝 오려 냄
   - 하트는 "완료"처럼 뜻이 있는 곳에만 쓰고, 장식으로 흩뿌리지 않는다 */
:root{
  --bg:#fffaf8;--card:#fff;--ink:#4b3a3c;--muted:#9a8688;--line:#f4e0e0;--soft:#fdf1f0;
  --accent:#d0627c;--accent-soft:#fdecec;--ok:#c9566f;--warn:#c4573f;--paper2:#fbe3e3;
  --r:22px;--shadow:0 1px 0 #fff,0 6px 0 -3px var(--paper2),0 16px 22px -16px rgba(208,98,124,.38);
}
body{background:var(--bg);color:var(--ink)}
.brand,.card h2,.card h3,.gd-title,.busy-msg{font-family:'Pretendard Variable',Pretendard,system-ui,sans-serif}
.brand{color:var(--accent);font-weight:400;font-size:24px;letter-spacing:-.04em}
.top{background:rgba(255,250,248,.92);border-bottom:1px solid var(--line)}
.save-pill{border-color:var(--line);background:#fff;color:var(--muted)}
.btn{border-color:var(--line)}
.btn:hover{background:var(--soft)}
.btn.dark{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.dark:hover{background:#bd5570}
.tab{border-color:var(--line)}
.tab.on{background:var(--accent);border-color:var(--accent);color:#fff}
.card,details.card.acc{border:0;border-radius:var(--r);box-shadow:var(--shadow);position:relative}
details.card.acc>summary:hover{background:var(--soft)}
details.card.acc>summary h2{font-size:17px;font-weight:400}
/* 오른쪽 위 모서리를 계단 모양으로 오려 낸 표시 (로고의 계단 네모) */
details.card.acc::after{content:'';position:absolute;top:0;right:0;width:8px;height:8px;background:var(--bg);box-shadow:-8px 0 0 var(--bg),0 8px 0 var(--bg);pointer-events:none}
details.card.acc[open]>summary{border-bottom:1px dashed var(--line)}
.chip.selected,.cv.selected,.scene.selected{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.scene.selected{background:var(--accent-soft)}
.meta.ok,.live-ok{color:var(--ok)}
input:focus,textarea:focus,select:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.mbar{background:rgba(255,250,248,.96);border-top:1px solid var(--line);box-shadow:0 -6px 18px -10px rgba(208,98,124,.3)}
.mbar button.on{background:var(--accent-soft);color:var(--accent)}
.mbar button.mid{background:var(--accent);box-shadow:0 8px 16px -6px rgba(208,98,124,.55)}
.mbar .mdot{background:var(--accent)}
.gd-step{color:var(--accent)}
.gd-bar .gd-next{color:var(--accent)}
.busy-spin{border-top-color:var(--accent)}

/* 인트로: 사진·AI 캐릭터가 필요한 장면 안내 */
.scene small.need{display:inline-block;margin-top:5px;padding:2px 9px;border-radius:999px;background:#fff1ef;color:#c4573f;font-size:11px;font-weight:700}
.scene small.need.ok{background:#e9f6ef;color:#2f8a63}
.notice.warn{margin:10px 0 0;padding:11px 14px;border-radius:12px;background:#fff6f3;border:1px solid #f6d6cd;color:#8a4a3c;font-size:13px;line-height:1.55}
.notice.warn[hidden]{display:none}
.notice.warn .link-btn{margin-left:4px;color:var(--accent);font-weight:700}

/* 설명 박스 (잘 보이게): 연분홍 바탕 + 굵은 제목 + 단계 목록 */
.guide-box{margin:4px 0 12px;padding:14px 16px;border-radius:14px;background:var(--accent-soft);border:1px solid #f6cfd6;color:var(--ink)}
.guide-box .gb-t{display:block;margin-bottom:6px;font-size:14px;color:var(--accent)}
.guide-box ol{margin:0;padding-left:20px;font-size:14px;line-height:1.7}
.guide-box li+li{margin-top:2px}
.guide-box b{color:var(--accent)}

.guide-mini{margin:4px 0 8px!important;padding:9px 12px;border-radius:10px;background:var(--accent-soft);color:var(--ink)!important;font-size:13px!important}
.guide-mini b{color:var(--accent)}

/* AI 변환 버튼: 마우스를 올리면(또는 눌러 포커스하면) 변환 예시가 위로 뜬다 */
.ai-pv{position:relative;display:inline-flex}
.ai-pop{display:none;position:absolute;bottom:calc(100% + 10px);left:50%;transform:translateX(-50%);z-index:80;width:190px;padding:6px;background:#fff;border:1px solid var(--line);border-radius:14px;box-shadow:0 14px 34px rgba(0,0,0,.2);pointer-events:none}
.ai-pop img{display:block;width:100%;height:auto;aspect-ratio:2/3;object-fit:cover;border-radius:9px;background:#eee}
.ai-pv:hover .ai-pop,.ai-pv:focus-within .ai-pop{display:block}
.ai-pv:first-child .ai-pop{left:0;transform:none}
.ai-pv:last-child .ai-pop{left:auto;right:0;transform:none}

/* 청첩장 순서 바꾸기: 우측 하단 작은 플로팅 버튼 + 열리는 창 */
.ofab{position:fixed;right:16px;bottom:22px;z-index:44}
.ofab-btn{width:44px;height:44px;padding:0;border-radius:50%;border:1px solid var(--line);background:#fff;color:var(--ink);display:flex;align-items:center;justify-content:center;box-shadow:0 8px 20px rgba(0,0,0,.16);cursor:pointer}
.ofab.open .ofab-btn{background:var(--accent);border-color:var(--accent);color:#fff}
.ofab-sheet{display:none;position:absolute;right:0;bottom:calc(100% + 10px);width:min(88vw,340px);max-height:min(66vh,520px);overflow:auto;-webkit-overflow-scrolling:touch;background:#fff;border:1px solid var(--line);border-radius:16px;box-shadow:0 16px 40px rgba(0,0,0,.2);padding:12px 14px 6px}
.ofab.open .ofab-sheet{display:block}
.ofab-head{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.ofab-head b{font-size:15px}
.ofab-x{border:0;background:transparent;font-size:22px;line-height:1;width:32px;height:32px;color:var(--muted);cursor:pointer}
@media(max-width:900px){.ofab{bottom:calc(84px + env(safe-area-inset-bottom))}}

/* 문의하기(FAQ) 창 */
.sp-ov{position:fixed;inset:0;z-index:120;background:rgba(40,28,32,.5);display:flex;align-items:center;justify-content:center;padding:16px}
.sp-ov[hidden]{display:none}
body.sp-lock{overflow:hidden}
.sp-card{width:min(100%,520px);max-height:min(86vh,720px);display:flex;flex-direction:column;background:#fff;border-radius:20px;box-shadow:0 20px 60px rgba(0,0,0,.3);overflow:hidden}
.sp-head{display:flex;align-items:center;justify-content:space-between;padding:16px 18px 12px;border-bottom:1px solid var(--line)}
.sp-head b{font-size:17px}
.sp-x{border:0;background:transparent;font-size:26px;line-height:1;width:36px;height:36px;color:var(--muted);cursor:pointer}
.sp-body{flex:1;overflow:auto;-webkit-overflow-scrolling:touch;padding:6px 12px}
.sp-q{border-bottom:1px solid var(--line)}
.sp-q summary{display:flex;gap:10px;align-items:flex-start;padding:14px 6px;cursor:pointer;list-style:none;font-weight:600;line-height:1.45}
.sp-q summary::-webkit-details-marker{display:none}
.sp-n{flex:none;color:var(--accent);font-weight:700}
.sp-t{flex:1}
.sp-q[open] .sp-t{color:var(--accent)}
.sp-a{padding:0 6px 16px 34px;color:var(--ink);line-height:1.7;font-size:14px}
.sp-foot{padding:12px 16px calc(14px + env(safe-area-inset-bottom));border-top:1px solid var(--line);background:#fff}
.sp-cta{display:flex;align-items:center;justify-content:center;width:100%;min-height:48px;border:0;border-radius:99px;background:var(--accent);color:#fff;font:inherit;font-weight:700;text-decoration:none;cursor:pointer}
.sp-note{margin-top:8px;text-align:center;font-size:13px;color:var(--muted)}

/* 마이페이지: 로고 줄 오른쪽 끝의 독립 버튼 (PC·휴대폰 공통) */
.top-my{flex:none;min-height:36px;padding:6px 14px;font-size:13px;white-space:nowrap}
@media(max-width:900px){.btn.ghost.top-my{display:inline-flex;align-items:center;justify-content:center;min-height:32px;padding:5px 11px;font-size:12px}}

/* 최초 공유 후 무료 수정 안내 띠 */
.edits-banner{margin:0 0 12px;padding:10px 14px;border-radius:12px;background:var(--accent-soft);color:var(--ink);font-size:13px;line-height:1.55}
.edits-banner small{color:var(--muted)}
.edits-banner.warn{background:#fdecea;color:#a3342b;display:flex;flex-wrap:wrap;align-items:center;gap:8px}

/* 배경 음악 고르기 */
.mlist{display:grid;gap:8px;margin:8px 0 4px}
.mrow{display:flex;gap:8px;align-items:stretch}
.mpick{flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;gap:2px;text-align:left;border:1px solid var(--line);background:#fff;border-radius:12px;padding:11px 14px;min-height:50px;font:inherit;color:var(--ink);cursor:pointer}
.mpick small{color:var(--muted);font-size:12px}
.mrow.selected .mpick{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft);font-weight:700}
.mplay{flex:none;width:50px;border:1px solid var(--line);background:#fff;border-radius:12px;font:inherit;font-size:14px;color:var(--ink);cursor:pointer}