/* BeatNote Customize Modal — external asset shared across all SEO pages */
/* Variables */
:root{
  --cz-purple:#6c47d9;
  --cz-purple-deep:#4a2bb0;
  --cz-text:#1a1a2e;
  --cz-text-mid:#595959;
  --cz-text-low:#767676;
  --cz-border:#e0e0e0;
  --cz-bg-soft:#fafafa;
}

/* Sr-only helper */
.sr-only{position:absolute!important;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* Dual-CTA cards */
.cta-grid{display:grid;grid-template-columns:1fr 1.15fr;gap:14px;margin-bottom:20px}
.cta-card{border-radius:14px;padding:18px;background:#fff;border:1px solid var(--cz-border);display:flex;flex-direction:column}
.cta-card.free{border-color:#cfe3d4}
.cta-card.paid{border:2px solid var(--cz-purple);background:linear-gradient(180deg,#faf7ff 0%,#fff 100%);position:relative;box-shadow:0 6px 20px rgba(108,71,217,.10)}
.cta-card.paid .badge{position:absolute;top:-10px;right:14px;background:var(--cz-purple);color:#fff;padding:3px 10px;border-radius:10px;font-size:11px;font-weight:700;letter-spacing:.3px}
/* 품질 검수 미통과 곡 — 유료 판매를 열지 않은 상태 */
.cta-card.paid.off{border:1px dashed #cfcfcf;background:#fafafa;box-shadow:none}
.cta-card.paid.off .badge{background:#9a9a9a}
.cta-card.paid.off .cta-title{color:var(--cz-text-mid)}
.cta-card .btn[disabled]{background:#e8e8e8;color:#8a8a8a;border-color:#e0e0e0;cursor:not-allowed;box-shadow:none}
.cta-title{font-size:16px;font-weight:800;color:var(--cz-text);margin-bottom:4px}
.cta-sub{font-size:12px;color:var(--cz-text-mid);margin-bottom:12px;line-height:1.5;min-height:32px}
.cta-price{font-size:22px;font-weight:800;color:var(--cz-purple);margin-bottom:8px;display:flex;align-items:baseline;gap:10px;flex-wrap:wrap}
.cta-price .free{color:#2e7d32}
.cta-price .strike{font-size:14px;font-weight:500;color:#9a9a9a;text-decoration:line-through}
.cta-price .micro{font-size:11px;font-weight:500;color:var(--cz-text-mid);letter-spacing:.2px}
.cta-card .btn{width:100%;margin-bottom:6px}
.cta-btn-purple{background:var(--cz-purple);color:#fff;padding:14px;font-size:14px}
.cta-btn-purple:hover{background:var(--cz-purple-deep)}
.cta-features{margin-top:10px;font-size:12px;color:var(--cz-text-mid);line-height:1.7}
.cta-features li{margin-left:16px;list-style:disc}
.editor-link{display:inline-block;margin-top:6px;font-size:12px;color:var(--cz-text-mid);text-decoration:none}
.editor-link:hover{color:#4a90d9;text-decoration:underline}

/* Mobile: paid on top, free below */
@media(max-width:600px){
  .cta-grid{grid-template-columns:1fr;gap:12px}
  .cta-card.paid{order:-1;margin-top:14px}
}

/* Customize modal */
.cz-overlay{display:none;position:fixed;inset:0;background:rgba(0,0,0,.55);z-index:9500;align-items:center;justify-content:center;padding:20px}
.cz-overlay.open{display:flex}
.cz-modal{background:#fff;border-radius:16px;width:100%;max-width:960px;height:92dvh;max-height:92dvh;display:grid;grid-template-columns:360px 1fr;grid-template-rows:minmax(0,1fr);overflow:hidden;box-shadow:0 20px 60px rgba(0,0,0,.3)}
.cz-options{padding:20px;overflow-y:auto;border-right:1px solid #eee;background:var(--cz-bg-soft);overscroll-behavior:contain;min-height:0;min-width:0}
.cz-preview{padding:20px;overflow-y:auto;display:flex;flex-direction:column;background:#fff;overscroll-behavior:contain;min-height:0;min-width:0}
.cz-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:14px}
.cz-head h2{font-size:18px;font-weight:800;color:var(--cz-text);margin:0}
.cz-close{background:none;border:1px solid transparent;font-size:24px;color:var(--cz-text-mid);cursor:pointer;line-height:1;min-width:44px;min-height:44px;border-radius:8px;display:flex;align-items:center;justify-content:center}
.cz-close:hover{background:#eee;color:var(--cz-text)}
.cz-close:focus-visible{outline:2px solid var(--cz-purple);outline-offset:2px}

.cz-group{margin-bottom:18px;padding-bottom:14px;border-bottom:1px solid #ececec}
.cz-group:last-child{border-bottom:none}
.cz-group-title{font-size:11px;font-weight:700;color:var(--cz-text-low);text-transform:uppercase;letter-spacing:.6px;margin-bottom:10px}
.cz-label{display:block;font-size:13px;font-weight:700;color:var(--cz-text);margin-bottom:8px}
.cz-hint{display:block;font-size:11px;color:var(--cz-text-mid);margin-top:4px}
.cz-input{width:100%;padding:11px 12px;border:1px solid #ddd;border-radius:8px;font-size:16px;box-sizing:border-box;background:#fff} /* 16px = iOS no-zoom */
.cz-input:focus{outline:2px solid var(--cz-purple);outline-offset:1px;border-color:var(--cz-purple)}
.cz-toggle{display:flex;align-items:center;gap:10px;padding:10px 0;font-size:13px;color:var(--cz-text);cursor:pointer;user-select:none;min-height:44px}
.cz-toggle input{width:20px;height:20px;cursor:pointer;accent-color:var(--cz-purple)}
.cz-toggle .cz-pill{margin-left:auto;font-size:10px;color:var(--cz-purple);background:#f1ebff;padding:2px 7px;border-radius:8px;letter-spacing:.3px;font-weight:700}

/* Theme picker (radio group) */
.cz-skins{display:grid;grid-template-columns:repeat(2,1fr);gap:8px}
.cz-skin{border:2px solid #e0e0e0;border-radius:10px;padding:10px 6px;text-align:center;cursor:pointer;font-size:11px;color:var(--cz-text-mid);background:#fff;transition:all .12s;min-height:74px;outline:none}
.cz-skin:focus-visible{outline:2px solid var(--cz-purple);outline-offset:2px}
.cz-skin.active{border-color:var(--cz-purple);background:#f5efff;color:var(--cz-text);font-weight:700}
.cz-skin.active::after{content:" ✓"}
.cz-skin-swatch{height:38px;border-radius:6px;margin-bottom:6px;border:1px solid rgba(0,0,0,.08)}
.cz-skin[data-skin=classic] .cz-skin-swatch{background:#fff;background-image:linear-gradient(#222 1px,transparent 1px),linear-gradient(#222 1px,transparent 1px),linear-gradient(#222 1px,transparent 1px);background-size:100% 8px,100% 8px,100% 8px;background-position:0 8px,0 16px,0 24px;background-repeat:no-repeat}
.cz-skin[data-skin=vintage] .cz-skin-swatch{background:#f3e3c2;background-image:radial-gradient(rgba(120,80,30,.12) 1px,transparent 1px);background-size:6px 6px}
.cz-skin[data-skin=wedding] .cz-skin-swatch{background:linear-gradient(135deg,#fffaf2,#fff);border:1px solid #c9a961;position:relative}
.cz-skin[data-skin=wedding] .cz-skin-swatch::after{content:"♥";position:absolute;inset:0;display:flex;align-items:center;justify-content:center;color:#c9a961;font-size:14px}
.cz-skin[data-skin=hand] .cz-skin-swatch{background:repeating-linear-gradient(0deg,#fff,#fff 6px,#f5efe4 6px,#f5efe4 7px)}

/* Live preview stage */
.cz-preview-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:10px}
.cz-preview-head .preview-label{font-size:11px;color:var(--cz-text-low);text-transform:uppercase;letter-spacing:.5px}
.cz-stage{flex:1 1 auto;border:1px dashed #ddd;border-radius:10px;padding:18px;background:#fff;min-height:180px;overflow:auto;position:relative;display:flex;flex-direction:column;justify-content:center;align-items:center;transition:background .2s}
.cz-stage[data-skin=classic]{background:#fff;color:#111}
.cz-stage[data-skin=vintage]{background:#f3e3c2;color:#3a2410;background-image:radial-gradient(rgba(120,80,30,.06) 1px,transparent 1px);background-size:5px 5px}
.cz-stage[data-skin=wedding]{background:#fffaf2;color:#1a1a2e;border:2px solid #c9a961}
.cz-stage[data-skin=hand]{background:#fdfaf3;color:#1a1a2e;background-image:repeating-linear-gradient(0deg,transparent,transparent 19px,#e8dcc4 19px,#e8dcc4 20px)}
.cz-mock-cover{font-size:13px;color:inherit;text-align:center;width:100%;padding:14px;border:1px dashed currentColor;border-radius:8px;margin-bottom:10px;opacity:.85}
.cz-mock-cover .t1{font-weight:800;font-size:18px;margin-bottom:4px}
.cz-mock-cover .t2{font-size:11px;opacity:.7;margin-bottom:6px}
.cz-mock-cover .t3{font-style:italic;font-size:12px;margin-top:8px}
.cz-mock-staff{width:100%;height:80px;background:repeating-linear-gradient(0deg,currentColor,currentColor 1px,transparent 1px,transparent 12px);opacity:.6;border-radius:4px;margin-bottom:8px}
.cz-stage[data-skin=hand] .cz-mock-staff{transform:skewY(-.3deg)}
.cz-mock-name{font-size:11px;opacity:.7;margin-top:6px}
.cz-mock-watermark{position:absolute;bottom:6px;left:0;right:0;text-align:center;font-size:10px;color:#999;opacity:.8;pointer-events:none}
.cz-mock-watermark.hidden{display:none}

/* 음이름 서브옵션 (언어 선택) */
.cz-subopt{margin:2px 0 6px 26px;padding:8px 10px;background:rgba(108,71,217,.05);border-radius:8px}
.cz-subhint{font-size:11px;color:var(--cz-text-mid);line-height:1.5;margin-bottom:6px}
.cz-notelang{display:flex;gap:12px;flex-wrap:wrap}
.cz-notelang label{font-size:12px;color:var(--cz-text);display:flex;align-items:center;gap:4px;cursor:pointer}
.cz-notelang input{margin:0}


/* ── 미리보기 캡처 방어: 대각선 워터마크 + 악보 peek 블러 ── */
.cz-wm{position:absolute;inset:0;pointer-events:none;z-index:5;
  background-image:repeating-linear-gradient(-30deg,
    rgba(108,71,217,.16) 0 2px, transparent 2px 130px);
  mix-blend-mode:multiply}
.cz-wm::after{content:"PREVIEW · beatnoteplay.com   PREVIEW · beatnoteplay.com   PREVIEW · beatnoteplay.com";
  position:absolute;top:50%;left:50%;width:200%;
  transform:translate(-50%,-50%) rotate(-30deg);
  font-size:15px;font-weight:800;letter-spacing:2px;color:rgba(108,71,217,.4);
  text-align:center;line-height:2.4;white-space:normal;word-spacing:14px}
.cz-mock-cover{position:relative;z-index:4}
.cz-score-peek{position:relative;width:100%;max-height:230px;overflow:hidden;
  border-radius:8px;border:1px solid rgba(0,0,0,.06);background:#fff;margin-bottom:8px}
.cz-peek-inner{padding:8px 8px 0}
.cz-peek-inner svg{display:block}
/* 아래로 갈수록 블러+페이드 → 뒷부분은 안 보이게 */
.cz-peek-fade{position:absolute;left:0;right:0;bottom:0;height:60%;
  background:linear-gradient(to bottom, rgba(255,255,255,0) 0%, rgba(255,255,255,.75) 55%, #fff 100%);
  backdrop-filter:blur(1.5px);-webkit-backdrop-filter:blur(1.5px);pointer-events:none}
.cz-peek-note{font-size:11px;color:var(--cz-text-mid);text-align:center;margin:2px 0 4px}
.cz-stage[data-skin=vintage] .cz-score-peek,.cz-stage[data-skin=wedding] .cz-score-peek,.cz-stage[data-skin=hand] .cz-score-peek{background:transparent}


/* Pay bar (sticky bottom) */
.cz-pay{margin-top:14px;display:flex;justify-content:space-between;align-items:center;gap:12px;padding:14px;background:#fff;border-top:1px solid #eee;position:sticky;bottom:0;padding-bottom:max(14px,env(safe-area-inset-bottom))}
.cz-pay .price{font-size:20px;font-weight:800;color:var(--cz-text);display:flex;flex-direction:column;line-height:1.2}
.cz-pay .price small{font-size:10px;color:var(--cz-text-mid);font-weight:500}
.cz-pay .pay-btn{flex:1;background:var(--cz-purple);color:#fff;padding:14px 18px;border:none;border-radius:10px;font-size:15px;font-weight:700;cursor:pointer;min-height:48px}
.cz-pay .pay-btn:hover{background:var(--cz-purple-deep)}
.cz-pay .pay-btn[aria-disabled=true]{opacity:.55;cursor:not-allowed}

/* Notify-me capture */
.cz-notify{display:none;flex-direction:column;gap:8px;padding:14px;background:#f8f4ff;border:1px solid #ddd0ff;border-radius:10px;margin-top:10px}
.cz-notify.open{display:flex}
.cz-notify p{font-size:12px;color:var(--cz-text);margin:0;line-height:1.5}
.cz-notify form{display:flex;gap:8px}
.cz-notify input{flex:1;padding:11px 12px;border:1px solid #ddd;border-radius:8px;font-size:16px;box-sizing:border-box}
.cz-notify button{background:var(--cz-purple);color:#fff;border:none;padding:11px 16px;border-radius:8px;font-weight:700;font-size:13px;cursor:pointer;min-height:44px}
.cz-notify .ok{font-size:12px;color:#2e7d32;font-weight:700}

/* Mobile modal */
@media(max-width:760px){
  .cz-overlay{padding:8px}
  .cz-modal{grid-template-columns:1fr;grid-template-rows:auto minmax(0,1fr);height:96dvh;max-height:96dvh}
  .cz-options{border-right:none;border-bottom:1px solid #eee;max-height:55dvh;padding:16px}
  .cz-preview{padding:14px}
  .cz-stage{min-height:200px}
  .cz-pay{margin-left:-14px;margin-right:-14px}
  .cz-skins{grid-template-columns:repeat(2,1fr)}
}

/* ── 곡페이지 전환 강화: Keepsake 미리보기·테마·신뢰바 ── */
.ks-preview{margin:10px 0 8px;border:1px solid #ece4fb;border-radius:10px;overflow:hidden;background:#fff}
.ks-preview img{display:block;width:100%;height:auto}
.ks-preview-cap{font-size:11px;color:#8a7bc8;text-align:center;padding:5px 0 7px;font-weight:600}
.ks-themes{display:flex;gap:6px;margin:2px 0 4px;flex-wrap:wrap}
.ks-th{flex:1;min-width:64px;text-align:center;font-size:11px;font-weight:700;color:#4a3f6b;padding:8px 4px;border-radius:8px;border:1px solid rgba(108,71,217,.14)}
.trust-bar{display:flex;flex-wrap:wrap;gap:8px 18px;justify-content:center;margin:14px 0 6px;padding:12px;background:#f7f5fc;border-radius:10px;font-size:12.5px;font-weight:600;color:#5b5170}
.trust-bar span{white-space:nowrap}