/* 오늘의셀러 tenant layer · lock overlays + Claude-style profile modal */

/* ---- locked sections / cards ---- */
.sp-locked { position:relative; overflow:hidden; }
.sp-locked > *:not(.sp-lockcard) { filter:blur(7px) saturate(.8); pointer-events:none; user-select:none; }
.sp-lockcard { position:absolute; top:0;right:0;bottom:0;left:0; z-index:5; display:flex; flex-direction:column; align-items:center;
  justify-content:center; gap:10px; text-align:center; padding:24px; cursor:pointer;
  background:rgba(5,5,8,0.45); border-radius:inherit; }
.sp-lockcard .ic { font-size:30px; }
.sp-lockcard b { font-size:15.5px; color:#f5f5f7; letter-spacing:-0.01em; }
.sp-lockcard span { font-size:12.5px; color:#b9b9c0; line-height:1.6; max-width:340px; }
.sp-lockcard .tag { display:inline-block; margin-top:2px; background:linear-gradient(180deg,#6366f1,#4f46e5);
  color:#fff; border-radius:999px; padding:7px 16px; font-size:12.5px; font-weight:700; }
.sp-lockcard .tag.pro { background:linear-gradient(180deg,#f59e0b,#d97706); }

/* ---- trial banner ---- */
/* in normal flow so the goal gauge + trial banner ALWAYS push the dashboard down,
   never overlay/cover cards (sticky was overlapping the header on some viewports) */
#spTopStack { position:relative; z-index:96; }
#spTrialBar { display:flex; align-items:center; justify-content:center; flex-wrap:wrap; gap:8px;
  background:linear-gradient(90deg, rgba(99,102,241,0.92), rgba(79,70,229,0.92));
  -webkit-backdrop-filter:blur(10px); backdrop-filter:blur(10px);
  color:#fff; font-size:13px; font-weight:600; line-height:1.25; padding:8px 14px; }
#spTrialBar > span { white-space:nowrap; }
#spTrialBar button { background:rgba(255,255,255,0.18); color:#fff; border:none; border-radius:999px;
  padding:5px 13px; font-size:12px; font-weight:700; font-family:inherit; cursor:pointer; white-space:nowrap; flex:0 0 auto; }
@media (max-width:560px){ #spTrialBar { font-size:12px; padding:7px 12px; gap:7px; } #spTrialBar button { padding:5px 11px; } }

/* PRO feature markers (shown during free trial so people see what's premium) */
.sp-protag { display:inline-flex; align-items:center; vertical-align:middle; margin-left:7px; font-size:9.5px;
  font-weight:800; letter-spacing:.04em; color:#1c1400; background:linear-gradient(180deg,#fcd34d,#f59e0b);
  border-radius:5px; padding:2px 6px; line-height:1; box-shadow:0 1px 5px rgba(245,158,11,0.4); white-space:nowrap; }
.sp-protag.kpi { position:absolute; top:10px; right:10px; margin:0; z-index:2; }

/* PRO-only section during trial · data stays HIDDEN behind a strong blur; click anywhere → upgrade */
.sp-pro-peek { position:relative; cursor:pointer; }
.sp-pro-peek > *:not(.sp-pro-ov) { filter:blur(9px) saturate(.7); pointer-events:none; user-select:none; }
.sp-pro-ov { position:absolute; top:0;right:0;bottom:0;left:0; z-index:6; display:flex; flex-direction:column; align-items:center; justify-content:center;
  gap:7px; text-align:center; padding:20px; pointer-events:none; overflow:hidden;
  background:radial-gradient(130% 110% at 50% 0%, rgba(129,140,248,0.16), rgba(10,10,14,0.55));
  animation:spProIn .42s cubic-bezier(.22,.61,.36,1) both; }
.sp-pro-ov::before { content:""; position:absolute; top:0; left:-60%; width:45%; height:100%;
  background:linear-gradient(100deg, transparent, rgba(255,255,255,0.07), transparent); transform:skewX(-18deg);
  animation:spProSheen 5s ease-in-out infinite; pointer-events:none; }
@keyframes spProIn { from { opacity:0; transform:scale(.985); } to { opacity:1; transform:none; } }
@keyframes spProSheen { 0%,72% { left:-60%; } 90%,100% { left:130%; } }
.sp-pro-ov .b { font-size:10.5px; font-weight:800; letter-spacing:.05em; color:#1c1400; position:relative;
  background:linear-gradient(180deg,#fcd34d,#f59e0b); padding:3px 11px; border-radius:999px; box-shadow:0 2px 10px rgba(245,158,11,.45);
  animation:spProBadge 2.6s ease-in-out infinite; }
@keyframes spProBadge { 0%,100% { transform:translateY(0); box-shadow:0 2px 10px rgba(245,158,11,.45); } 50% { transform:translateY(-2px); box-shadow:0 6px 18px rgba(245,158,11,.6); } }
.sp-pro-ov .t { font-size:16px; font-weight:800; letter-spacing:-.02em; color:#f5f5f7; position:relative; }
.sp-pro-ov .s { font-size:11.5px; color:#c7c7d2; max-width:300px; line-height:1.65; position:relative; }
.sp-pro-ov .s .pk { color:#8a8a93; font-size:10.5px; }
.sp-pro-ov .go { pointer-events:auto; margin-top:5px; position:relative; background:linear-gradient(180deg,#818cf8,#6366f1); color:#fff; border:none;
  border-radius:999px; padding:9px 20px; font-size:13px; font-weight:800; font-family:inherit; cursor:pointer; box-shadow:0 8px 24px -6px rgba(99,102,241,.6);
  transition:transform .14s cubic-bezier(.22,.61,.36,1), box-shadow .14s; }
.sp-pro-ov .go:hover { transform:translateY(-1px); box-shadow:0 12px 30px -6px rgba(99,102,241,.7); }
.sp-pro-ov .go:active { transform:scale(.97); }
@media (prefers-reduced-motion:reduce){ .sp-pro-peek > *, .sp-pro-ov, .sp-pro-ov::before, .sp-pro-ov .b, .sp-pro-ov .go { transition:none !important; animation:none !important; } }

/* trial-ENDED paywall: blur the entire dashboard except the revenue KPI card */
body.sp-paywalled section:not(.sp-revsec) { filter:blur(8px) saturate(.6); pointer-events:none; user-select:none; }
body.sp-paywalled .sp-pwblur { filter:blur(8px) saturate(.6); pointer-events:none; user-select:none; }

/* exit-intent upgrade modal (once per session, when cursor leaves to the tab bar) */
#spExit { position:fixed; top:0;right:0;bottom:0;left:0; z-index:10000; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(6,6,10,0.66); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .3s ease;
  font-family:'Pretendard',-apple-system,sans-serif; }
#spExit.on { opacity:1; }
#spExit .box { position:relative; width:min(380px, calc(100vw - 32px)); background:#15161d; color:#f4f4f7;
  border:1px solid rgba(129,140,248,0.4); border-radius:22px; padding:28px 24px 22px; text-align:center;
  box-shadow:0 36px 90px -20px rgba(0,0,0,0.8); transform:translateY(14px) scale(.97); transition:transform .32s cubic-bezier(.2,.8,.2,1); }
#spExit.on .box { transform:translateY(0) scale(1); }
#spExit .x { position:absolute; top:12px; right:14px; background:none; border:none; color:#8a8a93; font-size:15px; cursor:pointer; padding:6px; line-height:1; }
#spExit .x:hover { color:#fff; }
@media (prefers-reduced-motion:reduce){ #spExit, #spExit .box { transition:none; } }

/* in-dashboard AI assistant (rule-based) */
#spChatBtn{ display:inline-flex; align-items:center; justify-content:center; width:38px; height:38px; padding:0;
  background:linear-gradient(180deg, var(--cardbg2, rgba(255,255,255,0.05)) 0%, var(--cardbg, rgba(255,255,255,0.02)) 100%);
  border:1px solid var(--stroke, rgba(255,255,255,0.1)); border-radius:14px; color:var(--text, #e9eef5); cursor:pointer;
  transition:border-color .15s, color .15s, transform .1s; }
#spChatBtn:hover{ border-color:#818cf8; color:#a5b4fc; }
#spChatBtn:active{ transform:scale(.94); }
#spChatBtn.open{ border-color:#818cf8; color:#a5b4fc; background:rgba(99,102,241,0.14); }
#spChat{ position:fixed; right:20px; bottom:84px; z-index:9997; width:min(360px, calc(100vw - 32px)); height:min(520px, calc(100vh - 130px));
  background:#15161d; border:1px solid rgba(255,255,255,.1); border-radius:18px; display:flex; flex-direction:column; overflow:hidden;
  box-shadow:0 30px 70px -20px rgba(0,0,0,.7); font-family:'Pretendard',-apple-system,sans-serif;
  opacity:0; visibility:hidden; transform:translateY(16px) scale(.96); transform-origin:bottom right;
  transition:opacity .26s ease, transform .3s cubic-bezier(.2,.9,.25,1), visibility .26s; }
#spChat.on{ opacity:1; visibility:visible; transform:translateY(0) scale(1); }
/* typing-dots while the assistant "thinks" */
#spChat .m.typing{ display:flex; gap:4px; align-items:center; padding:12px 13px; }
#spChat .m.typing span{ width:6px; height:6px; border-radius:50%; background:#9a9aa6; display:inline-block; animation:spDot 1.1s infinite ease-in-out; }
#spChat .m.typing span:nth-child(2){ animation-delay:.18s; } #spChat .m.typing span:nth-child(3){ animation-delay:.36s; }
@keyframes spDot{ 0%,60%,100%{ transform:translateY(0); opacity:.4; } 30%{ transform:translateY(-5px); opacity:1; } }
/* mobile: chat panel slides up from the bottom, raised above the floating dock */
@media (max-width:560px){
  #spChatBtn{ width:40px; height:40px; }
  #spChat{ right:8px; left:8px; width:auto; bottom:max(96px, calc(env(safe-area-inset-bottom) + 92px)); height:min(58vh, 58dvh); }
}
@media (prefers-reduced-motion:reduce){ #spChat, #spChatFab{ transition:none; } #spChat .m.typing span{ animation:none; } }
#spChat .hd{ display:flex; align-items:center; justify-content:space-between; padding:13px 15px; border-bottom:1px solid rgba(255,255,255,.07); color:#f4f4f7; font-size:14px; }
#spChat .hd .x{ background:none; border:none; color:#8a8a93; font-size:14px; cursor:pointer; }
#spChat .msgs{ flex:1; overflow:auto; padding:14px; display:flex; flex-direction:column; gap:9px; }
#spChat .m{ max-width:84%; padding:9px 12px; border-radius:13px; font-size:13px; line-height:1.6; white-space:pre-line; }
#spChat .m.b{ background:rgba(255,255,255,.06); color:#e7e7ee; align-self:flex-start; border-bottom-left-radius:4px; }
#spChat .m.u{ background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; align-self:flex-end; border-bottom-right-radius:4px; }
#spChat .sugg{ display:flex; gap:6px; flex-wrap:wrap; padding:0 12px 8px; }
#spChat .sugg .sg{ background:rgba(129,140,248,.12); color:#a5b4fc; border:none; border-radius:999px; padding:6px 11px; font-size:11.5px; cursor:pointer; font-family:inherit; }
#spChat .inp{ display:flex; gap:7px; padding:11px 12px; border-top:1px solid rgba(255,255,255,.07); }
#spChat .inp input{ flex:1; background:rgba(255,255,255,.06); border:1px solid rgba(255,255,255,.1); color:#fff; border-radius:11px; padding:9px 12px; font-size:13px; font-family:inherit; outline:none; }
#spChat .inp button{ width:38px; border:none; border-radius:11px; background:linear-gradient(180deg,#818cf8,#6366f1); color:#fff; font-size:16px; cursor:pointer; }

/* multi-step cancel/retention modal */
#spCancel { position:fixed; top:0;right:0;bottom:0;left:0; z-index:10001; display:flex; align-items:center; justify-content:center; padding:20px;
  background:rgba(6,6,10,0.7); -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; transition:opacity .25s ease;
  font-family:'Pretendard',-apple-system,sans-serif; }
#spCancel.on { opacity:1; }
#spCancel .box { width:min(380px, calc(100vw - 32px)); background:#15161d; color:#f4f4f7; border:1px solid rgba(129,140,248,0.4);
  border-radius:22px; padding:26px 24px 22px; text-align:center; box-shadow:0 36px 90px -20px rgba(0,0,0,0.8); max-height:88vh; overflow:auto;
  transform:translateY(14px) scale(.97); transition:transform .3s cubic-bezier(.2,.8,.2,1); }
#spCancel.on .box { transform:translateY(0) scale(1); }
@media (prefers-reduced-motion:reduce){ #spCancel, #spCancel .box { transition:none; } }

/* recurring upgrade nudge (every few minutes during trial) · dark blurry backdrop forces a dismiss */
#spNagBg { position:fixed; top:0;right:0;bottom:0;left:0; z-index:9997; background:rgba(4,4,8,0.74); -webkit-backdrop-filter:blur(5px); backdrop-filter:blur(5px);
  opacity:0; transition:opacity .35s ease; }
#spNagBg.on { opacity:1; }
#spNag { position:fixed; left:50%; z-index:9998; width:min(390px, calc(100vw - 24px));
  bottom:max(98px, calc(env(safe-area-inset-bottom) + 94px)); transform:translate(-50%, 160%);
  background:#15161d; color:#f4f4f7; border:1px solid rgba(129,140,248,0.45); border-radius:18px;
  padding:17px 18px 15px; box-shadow:0 26px 64px -16px rgba(0,0,0,0.65);
  font-family:'Pretendard',-apple-system,sans-serif; transition:transform .42s cubic-bezier(.2,.8,.2,1); }
#spNag.on { transform:translate(-50%, 0); }
#spNag .x { position:absolute; top:9px; right:11px; background:none; border:none; color:#8a8a93; font-size:14px; cursor:pointer; padding:6px; line-height:1; }
#spNag .x:hover { color:#fff; }
#spNag .t { font-size:15.5px; font-weight:800; letter-spacing:-0.02em; padding-right:18px; }
#spNag .d { font-size:12.5px; color:#b9b9c2; line-height:1.65; margin:7px 0 13px; }
#spNag .go { display:block; width:100%; background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; border:none;
  border-radius:11px; padding:12px; font-weight:800; font-size:14px; cursor:pointer; font-family:inherit; touch-action:manipulation; }
#spNag .go:active { transform:scale(.98); }
#spNag .nagoff { display:block; width:100%; margin-top:8px; background:none; border:none; color:#86868c; font-size:12px; cursor:pointer; font-family:inherit; padding:5px; touch-action:manipulation; }
#spNag .nagoff:hover { color:#b9b9c2; }
@media (prefers-reduced-motion:reduce){ #spNag { transition:none; } }

/* activation checklist card */
#spOnb { margin:0 0 18px; background:linear-gradient(160deg, rgba(99,102,241,0.12), rgba(99,102,241,0.04));
  border:1px solid rgba(129,140,248,0.32); border-radius:18px; padding:16px 17px;
  font-family:'Pretendard',-apple-system,sans-serif; animation:onbIn .5s cubic-bezier(.2,.8,.2,1) both; }
@keyframes onbIn { from{ opacity:0; transform:translateY(-8px); } to{ opacity:1; transform:none; } }
#spOnb .oh { display:flex; justify-content:space-between; align-items:flex-start; gap:10px; }
#spOnb .oh b { font-size:15px; letter-spacing:-0.02em; color:var(--text, #f4f4f7); }
#spOnb .os { font-size:12px; color:var(--muted, #9a9aa3); margin-top:3px; }
#spOnb .ox { background:none; border:none; color:var(--muted, #8a8a93); font-size:13px; cursor:pointer; padding:4px 6px; }
#spOnb .obar { height:7px; border-radius:4px; background:rgba(255,255,255,0.1); overflow:hidden; margin:12px 0 13px; }
#spOnb .obar span { display:block; height:100%; border-radius:4px; background:linear-gradient(90deg,#6366f1,#818cf8); transition:width .6s cubic-bezier(.2,.8,.2,1); }
#spOnb .olist { display:grid; gap:8px; }
#spOnb .oi { display:flex; align-items:center; gap:11px; width:100%; text-align:left; cursor:pointer;
  background:rgba(255,255,255,0.04); border:1px solid rgba(255,255,255,0.08); border-radius:12px; padding:10px 12px;
  font-family:inherit; transition:transform .12s, border-color .14s, background .14s; touch-action:manipulation; }
#spOnb .oi:not(.done):hover { transform:translateY(-1px); border-color:rgba(129,140,248,0.5); background:rgba(99,102,241,0.1); }
#spOnb .oi.done { opacity:0.62; cursor:default; }
#spOnb .ck { width:24px; height:24px; flex:0 0 24px; border-radius:50%; display:flex; align-items:center; justify-content:center;
  font-size:12px; font-weight:800; background:rgba(255,255,255,0.1); color:var(--muted, #c9c9cf); }
#spOnb .oi.done .ck { background:linear-gradient(180deg,#34d399,#10b981); color:#04210f; }
#spOnb .ol { flex:1; min-width:0; } #spOnb .ol b { display:block; font-size:13.5px; font-weight:700; color:var(--text, #f4f4f7); letter-spacing:-0.01em; }
#spOnb .ol span { font-size:11.5px; color:var(--muted, #9a9aa3); }
#spOnb .oar { color:#818cf8; font-weight:800; font-size:15px; }
html.light #spOnb .oh b, html.light #spOnb .ol b { color:#1c1d24; }

/* card-required gate (full-screen, blocks until a card is registered via Toss) */
#spCardGate { position:fixed; top:0;right:0;bottom:0;left:0; z-index:996; display:flex; align-items:center; justify-content:center; padding:22px;
  background:rgba(8,9,14,0.88); -webkit-backdrop-filter:blur(8px); backdrop-filter:blur(8px);
  font-family:'Pretendard',-apple-system,sans-serif; }
#spCardGate .box { width:min(420px,100%); background:#15161d; border:1px solid rgba(255,255,255,0.1); border-radius:22px;
  padding:32px 28px; text-align:center; box-shadow:0 40px 90px -24px rgba(0,0,0,0.7); color:#f4f4f7; }
#spCardGate h2 { letter-spacing:-0.02em; line-height:1.35; }
#spCardGate ul { text-align:left; max-width:240px; margin-left:auto; margin-right:auto; }

/* ---- floating settings modal ---- */
#spScrim { position:fixed; top:0;right:0;bottom:0;left:0; z-index:990; background:rgba(0,0,0,0.5);
  -webkit-backdrop-filter:blur(4px); backdrop-filter:blur(4px); opacity:0; pointer-events:none; transition:opacity .22s; }
#spScrim.open { opacity:1; pointer-events:auto; }
#spModal { position:fixed; z-index:991; left:50%; top:50%; transform:translate(-50%,-50%) scale(.97); opacity:0;
  pointer-events:none; transition:opacity .22s, transform .22s cubic-bezier(.32,1.2,.36,1);
  width:min(720px, calc(100vw - 24px)); max-height:min(620px, calc(100vh - 60px)); max-height:min(620px, calc(100dvh - 60px));
  background:#101014; border:1px solid rgba(255,255,255,0.1); border-radius:20px; overflow:hidden;
  display:flex; box-shadow:0 30px 90px rgba(0,0,0,0.6); color:#f5f5f7;
  font-family:-apple-system,"Pretendard","Apple SD Gothic Neo",system-ui,sans-serif; }
#spModal.open { opacity:1; transform:translate(-50%,-50%) scale(1); pointer-events:auto; }
.sp-side { width:188px; flex:0 0 188px; background:rgba(255,255,255,0.03); border-right:1px solid rgba(255,255,255,0.07);
  padding:18px 10px; display:flex; flex-direction:column; gap:2px; }
.sp-side .ttl { font-size:11px; font-weight:800; letter-spacing:.07em; color:#86868c; padding:0 10px 10px; text-transform:uppercase; }
.sp-tab { display:flex; align-items:center; gap:9px; padding:9px 10px; border-radius:10px; font-size:13.5px;
  color:#c9c9cf; cursor:pointer; border:none; background:none; font-family:inherit; text-align:left; width:100%; }
.sp-tab:hover { background:rgba(255,255,255,0.05); }
.sp-tab.on { background:rgba(99,102,241,0.16); color:#fff; font-weight:600; }
.sp-main { flex:1; min-height:0; padding:22px 24px calc(22px + env(safe-area-inset-bottom)); overflow-y:auto; -webkit-overflow-scrolling:touch; }
.sp-main h3 { margin:0 0 4px; font-size:16.5px; letter-spacing:-0.01em; }
.sp-main .desc { color:#86868c; font-size:12.5px; margin:0 0 18px; line-height:1.6; }
.sp-row { display:flex; align-items:center; justify-content:space-between; gap:14px; padding:13px 0;
  border-bottom:1px solid rgba(255,255,255,0.06); font-size:14px; }
.sp-row .k { color:#c9c9cf; }
.sp-row .v { color:#f5f5f7; font-weight:600; }
.sp-seg { display:inline-flex; background:rgba(255,255,255,0.06); border-radius:10px; padding:3px; gap:2px; }
.sp-seg button { border:none; background:none; color:#a9a9b0; font-family:inherit; font-size:12.5px; font-weight:600;
  padding:6px 13px; border-radius:8px; cursor:pointer; }
.sp-seg button.on { background:#3a3a44; color:#fff; }
.sp-range { width:160px; accent-color:#818cf8; }
.sp-btn { background:linear-gradient(180deg,#6366f1,#4f46e5); color:#fff; border:none; border-radius:11px;
  padding:11px 18px; font-size:13.5px; font-weight:700; font-family:inherit; cursor:pointer; }
.sp-btn.ghost { background:rgba(255,255,255,0.08); }
.sp-btn.danger { background:rgba(244,63,94,0.15); color:#fb7185; }
.sp-avatar { width:38px; height:38px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#a855f7);
  color:#fff; font-weight:800; font-size:15px; display:flex; align-items:center; justify-content:center; }
.sp-plan { display:inline-block; font-size:11px; font-weight:800; letter-spacing:.05em; border-radius:999px; padding:3px 10px;
  background:rgba(99,102,241,0.18); color:#a5b4fc; }
/* cogs table */
.sp-cogs table { width:100%; border-collapse:collapse; font-size:12.5px; margin-top:6px; }
.sp-cogs th { text-align:left; color:#86868c; font-weight:700; font-size:10.5px; letter-spacing:.05em; padding:7px 6px;
  border-bottom:1px solid rgba(255,255,255,0.09); }
.sp-cogs td { padding:4px 4px; border-bottom:1px solid rgba(255,255,255,0.05); }
.sp-cogs input { width:100%; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.09); color:#f5f5f7;
  border-radius:8px; padding:7px 9px; font-size:12.5px; font-family:inherit; outline:none; }
.sp-cogs input:focus { border-color:#818cf8; }
.sp-note { font-size:11.5px; color:#86868c; line-height:1.7; margin-top:12px; }
/* connector: distinct store cards + collapsible 광고 채널 dropdown */
.sp-store { border:1px solid rgba(255,255,255,0.09); border-radius:14px; padding:0 14px 6px; margin:10px 0; background:rgba(255,255,255,0.025); }
.sp-store .sp-row { border-bottom:1px solid rgba(255,255,255,0.05); }
.sp-store .sp-adbody > .sp-row:last-child { border-bottom:none; }
.sp-store-hd { display:flex; align-items:center; justify-content:space-between; gap:10px; padding:13px 0 12px; border-bottom:1px solid rgba(255,255,255,0.06); }
.sp-store-hd .nm { font-size:13.5px; font-weight:700; color:#f5f5f7; display:flex; align-items:center; gap:6px; flex-wrap:wrap; min-width:0; }
.sp-store-hd .rt { display:flex; align-items:center; gap:8px; flex:none; }
.sp-store-hd .st { font-size:12px; font-weight:700; white-space:nowrap; }
.sp-guide { font-size:10.5px; font-weight:700; color:#a5b4fc; text-decoration:none; border:1px solid rgba(129,140,248,0.35); border-radius:999px; padding:3px 9px; white-space:nowrap; transition:background .14s,border-color .14s; }
.sp-guide:hover { background:rgba(129,140,248,0.16); border-color:rgba(129,140,248,0.6); }
.sp-badge { font-size:9px; font-weight:800; letter-spacing:.04em; border:1px solid rgba(167,139,250,0.45); color:#a78bfa; border-radius:6px; padding:1px 6px; }
.sp-adtoggle { width:100%; display:flex; align-items:center; justify-content:space-between; background:none; border:none; color:#c9c9cf; font-family:inherit; font-size:12.5px; font-weight:600; padding:13px 0 11px; cursor:pointer; }
.sp-adtoggle:hover { color:#f5f5f7; }
.sp-adtoggle .chev { transition:transform .22s ease; color:#86868c; font-size:13px; }
.sp-adtoggle.open .chev { transform:rotate(180deg); }
.sp-adbody { padding-bottom:2px; }
.sp-msg { font-size:12.5px; margin-top:10px; min-height:16px; }
.sp-msg.ok { color:#34d399; } .sp-msg.err { color:#f87171; }
/* avatar button replacing the gear */
.sp-avatarbtn { width:38px !important; height:38px !important; border-radius:50% !important; padding:0 !important;
  display:inline-flex !important; align-items:center; justify-content:center;
  background:linear-gradient(135deg,#6366f1,#a855f7) !important; border:none !important;
  color:#fff; font-weight:800; font-size:15px; }
/* upgrade dialog: selectable plan cards */
.sp-plansel { position:relative; border:1.5px solid rgba(255,255,255,0.12); border-radius:16px; padding:16px 15px 14px;
  cursor:pointer; transition:border-color .15s, background .15s, transform .12s; }
.sp-plansel:hover { border-color:rgba(255,255,255,0.25); }
.sp-plansel:active { transform:scale(.99); }
.sp-plansel.on { border-color:#818cf8; background:rgba(99,102,241,0.09); }
.sp-plansel.pro.on { border-color:#f59e0b; background:rgba(245,158,11,0.07); }
.sp-check { width:20px; height:20px; border-radius:50%; background:rgba(255,255,255,0.1); color:transparent;
  font-size:12px; font-weight:800; display:flex; align-items:center; justify-content:center; transition:all .15s; }
.sp-plansel.on .sp-check { background:#6366f1; color:#fff; }
.sp-plansel.pro.on .sp-check { background:#f59e0b; }
.sp-pop { position:absolute; top:-10px; left:50%; transform:translateX(-50%); white-space:nowrap;
  background:linear-gradient(180deg,#f59e0b,#d97706); color:#fff; font-size:10px; font-weight:800;
  border-radius:999px; padding:3px 11px; }
.sp-bene { list-style:none; margin:0; padding:0; font-size:11.5px; line-height:1.95; color:#c9c9cf; }
.sp-bene li::before { content:"✓  "; color:#34d399; font-weight:700; }
.sp-bene li.no { color:#5c5c63; text-decoration:line-through; }
.sp-bene li.no::before { content:"✕  "; color:#5c5c63; }
@media (max-width:560px) { #spPlanGrid { grid-template-columns:1fr !important; } .sp-pop { top:-9px; } }

/* full paywall (trial expired) */
#spPaywall { position:fixed; top:0;right:0;bottom:0;left:0; z-index:995; background:rgba(0,0,0,0.72);
  -webkit-backdrop-filter:blur(14px); backdrop-filter:blur(14px);
  display:flex; align-items:center; justify-content:center; padding:20px; }
#spPaywall .box { background:#101014; border:1px solid rgba(255,255,255,0.1); border-radius:22px; padding:34px 30px;
  max-width:420px; text-align:center; color:#f5f5f7; }
@media (max-width:640px) {
  #spModal { flex-direction:column; width:calc(100vw - 16px);
    /* cap at a reachable size that fits ANY phone (even when dvh is unsupported) so the top
       tabs never get pushed off-screen and there's always scrim left to tap-close */
    max-height:min(560px, calc(100vh - 64px)); max-height:min(560px, calc(100dvh - 64px)); }
  .sp-side { width:100%; flex:0 0 auto; flex-direction:row; overflow-x:auto; -webkit-overflow-scrolling:touch;
    position:sticky; top:0; z-index:2; background:#15151b; border-right:none;
    border-bottom:1px solid rgba(255,255,255,0.07); padding:10px; }
  .sp-side .ttl { display:none; }
  .sp-tab { width:auto; white-space:nowrap; }
}

/* ---------- screen lock (PIN) ---------- */
#spLock { position:fixed; top:0;right:0;bottom:0;left:0; z-index:2147483600; display:flex; align-items:center; justify-content:center;
  background:rgba(8,8,12,0.86); -webkit-backdrop-filter:blur(22px) saturate(120%);backdrop-filter:blur(22px) saturate(120%); -webkit-backdrop-filter:blur(22px) saturate(120%);
  animation:lkIn .26s ease; padding:20px; }
@keyframes lkIn { from { opacity:0; } to { opacity:1; } }
#spLock .lk-card { width:min(340px,100%); display:flex; flex-direction:column; align-items:center; text-align:center;
  background:rgba(22,22,28,0.72); border:1px solid rgba(255,255,255,0.09); border-radius:22px; padding:30px 26px 22px;
  box-shadow:0 24px 70px rgba(0,0,0,0.5); }
#spLock .lk-av { width:60px; height:60px; border-radius:50%; background:linear-gradient(135deg,#6366f1,#a855f7);
  display:flex; align-items:center; justify-content:center; font-size:24px; font-weight:800; color:#fff; overflow:hidden; margin-bottom:12px; }
#spLock .lk-store { font-size:16px; font-weight:800; color:#f4f4f7; }
#spLock .lk-sub { font-size:12px; color:#9a9aa3; margin:5px 0 18px; line-height:1.6; }
#spLock .lk-dots { display:flex; gap:14px; margin-bottom:22px; }
#spLock .lk-dots i { width:13px; height:13px; border-radius:50%; background:rgba(255,255,255,0.16);
  border:1px solid rgba(255,255,255,0.22); transition:all .15s ease; }
#spLock .lk-dots i.on { background:#a5b4fc; border-color:#a5b4fc; box-shadow:0 0 12px rgba(165,180,252,0.6); transform:scale(1.05); }
#spLock .lk-dots.shake { animation:lkShake .42s; }
@keyframes lkShake { 0%,100%{transform:translateX(0)} 20%{transform:translateX(-9px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-6px)} 80%{transform:translateX(4px)} }
#spLock .lk-pad { display:grid; grid-template-columns:repeat(3,68px); gap:16px; justify-content:center; }
#spLock .lk-pad button { width:68px; height:68px; aspect-ratio:1; border-radius:50%; padding:0; border:1px solid rgba(255,255,255,0.08);
  display:flex; align-items:center; justify-content:center;
  background:rgba(255,255,255,0.05); color:#f4f4f7; font-size:23px; font-weight:600; font-family:inherit; cursor:pointer;
  transition:background .12s ease, transform .08s ease; }
#spLock .lk-pad button:hover { background:rgba(255,255,255,0.1); }
#spLock .lk-pad button:active { transform:scale(0.93); background:rgba(165,180,252,0.22); }
#spLock .lk-pad button.lk-ghost { font-size:13px; font-weight:600; color:#9a9aa3; background:transparent; border-color:transparent; }
#spLock .lk-pad button.lk-ghost:hover { color:#f4f4f7; }
#spLock .lk-out { margin-top:20px; background:none; border:none; color:#86868c; font-size:12px; cursor:pointer; font-family:inherit; }
#spLock .lk-out:hover { color:#cfcfd6; text-decoration:underline; }
#spLock .lk-in { width:100%; margin-top:10px; background:rgba(255,255,255,0.06); border:1px solid rgba(255,255,255,0.1);
  color:#fff; border-radius:10px; padding:11px 13px; font-size:15px; text-align:center; letter-spacing:4px; font-family:inherit; outline:none; }
#spLock .lk-btn { width:100%; margin-top:12px; background:linear-gradient(135deg,#6366f1,#8b5cf6); border:none; color:#fff;
  border-radius:10px; padding:12px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit; }
#spLock .lk-btn:hover { filter:brightness(1.08); }
#spLock .lk-msg { font-size:12px; margin-top:10px; min-height:16px; }
#spLock .lk-msg.ok { color:#34d399; } #spLock .lk-msg.err { color:#fb7185; }
@media (max-width:380px){ #spLock .lk-pad { grid-template-columns:repeat(3,64px); } #spLock .lk-pad button { height:56px; font-size:21px; } }

/* iOS: 키보드가 올라와도 고정 오버레이 내용이 잘리지 않게 스크롤 허용 */
#spExit,#spCancel,#spCardGate,#spPaywall,#spLock{ overflow-y:auto; -webkit-overflow-scrolling:touch; }