/* QQQ brand v3 — Stripe식 정돈 + 로켓 엠블럼 + 컬러 캐릭터 (확정 시안 적용) */
:root,[data-theme="light"]{
  --color-bg:#f6f9fc;--color-surface:#fff;--color-surface-2:#f8fafd;--color-surface-offset:#eef2f7;--color-border:#e3e8ee;--color-divider:#e3e8ee;
  --color-text:#0a2540;--color-text-muted:#425466;--color-text-faint:#8792a2;
  --color-primary:#533afd;--color-primary-hover:#4434d4;--color-primary-highlight:#fff6ea;
  --color-violet:#533afd;--color-violet-wash:#efedff;--color-text-inverse:#fff;
  --color-success:#1f8a5b;--color-success-bg:#e8f6ef;
  --radius-md:.5rem;--radius-lg:.5rem;
  --shadow-sm:0 1px 1px rgba(10,37,64,.04),0 2px 5px -1px rgba(10,37,64,.07);
  --shadow-md:0 6px 16px -6px rgba(10,37,64,.16);
  --shadow-lg:0 30px 60px -24px rgba(10,37,64,.35),0 18px 36px -18px rgba(0,0,0,.22);
  --depth-edge:rgba(255,255,255,0);
  --depth-card:0 1px 1px rgba(10,37,64,.04),0 2px 6px -2px rgba(10,37,64,.09);
  --depth-card-hover:0 2px 4px rgba(10,37,64,.05),0 8px 18px -8px rgba(10,37,64,.2);
  --band:#a59ff5;--band-ink:#0a2540;
}
[data-theme="dark"]{
  --color-bg:#0a1628;--color-surface:#111f36;--color-surface-2:#15243d;--color-surface-offset:#1c2e4a;--color-border:#27395a;--color-divider:#27395a;
  --color-text:#f2f5fa;--color-text-muted:#aab7cb;--color-text-faint:#7f8ea6;
  --color-primary:#6e5cff;--color-primary-hover:#8374ff;--color-primary-highlight:#3a2f1e;
  --color-violet:#a59ff5;--color-violet-wash:#232850;--color-text-inverse:#fff;
  --color-success:#6fd3a0;--color-success-bg:#163a2b;
  --shadow-sm:0 1px 2px rgba(0,0,0,.25);--shadow-lg:0 30px 60px -24px rgba(0,0,0,.6);
  --depth-card:0 1px 2px rgba(0,0,0,.25),0 4px 10px -4px rgba(0,0,0,.35);
  --depth-card-hover:0 2px 4px rgba(0,0,0,.3),0 10px 20px -8px rgba(0,0,0,.45);
  --band:#3a3290;--band-ink:#f2f5fa;
}
.light-only{display:inline-block}.dark-only{display:none}
[data-theme="dark"] .light-only{display:none}[data-theme="dark"] .dark-only{display:inline-block}

/* 엠블럼: 상단 헤더·앱 바 가운데 */
.brand-emblem{height:46px;width:auto}
.phone-appbar{display:grid;grid-template-columns:44px 1fr 44px;box-shadow:none;border-bottom:1px solid var(--color-border)}
.phone-brand{display:flex;justify-content:center;align-items:center}
.phone-emblem{height:36px;width:auto}

/* 기기 프레임: 평면 + 네이비 테두리 */
.phone-frame,.stage:has(.phone-frame:hover) .phone-frame{transform:none!important;border-color:#0a2540;box-shadow:var(--shadow-lg)!important}
[data-theme="dark"] .phone-frame{border-color:#030a15}
.phone-frame::before{display:none}

/* 카드·버튼: 얇은 그림자, 보라 주 버튼 */
.phone-content .card.active,.phone-content .model-card.active,.phone-content .variant-card.active,
.phone-content button.card.active:hover,.phone-content .model-card.active:hover,.phone-content .variant-card.active:hover,
[data-theme="dark"] .phone-content .card.active,[data-theme="dark"] .phone-content button.card.active:hover{
  box-shadow:0 0 0 1px var(--color-violet),0 6px 14px -6px rgba(83,58,253,.35)!important}
.primary-btn{background:var(--color-primary);color:#fff;font-weight:700;box-shadow:0 1px 1px rgba(10,37,64,.1),0 6px 14px -6px rgba(83,58,253,.6)}
.primary-btn:hover{background:var(--color-primary-hover)}
.primary-btn:not(:disabled):active{transform:translateY(1px);box-shadow:0 1px 2px rgba(10,37,64,.15)}
.phone-actions{box-shadow:none}
.phone-progress>div{box-shadow:none}
.field input,.field select,.field textarea{box-shadow:0 1px 1px rgba(10,37,64,.04)}
.draft,.campaign-preview,.media-cover{box-shadow:0 2px 4px rgba(10,37,64,.06),0 14px 28px -14px rgba(10,37,64,.35)}
.bell-btn{box-shadow:var(--shadow-sm);border-radius:10px}
.bell-btn i{background:#ff6f61}
.select-card .select-icon{transform:none;box-shadow:none}
.select-card[data-action="deliverable"] .select-icon{background:var(--color-surface-2);border:1px solid var(--color-border);box-shadow:none}
[data-theme="dark"] .select-card[data-action="deliverable"] .select-icon{background:#f6f9fc;border-color:#f6f9fc}
.select-card[data-action="deliverable"].active .select-icon{background:#fff}
.ico-c{stroke:#1b2559!important;stroke-width:2.2!important;fill:initial!important;flex:none}
.select-card.is-disabled .ico-c{filter:grayscale(.6);opacity:.6}
.hl{background:linear-gradient(transparent 58%,#d9d5ff 58%);color:#533afd;padding:0 2px}
[data-theme="dark"] .hl{background:linear-gradient(transparent 58%,#3a3290 58%);color:#c9c4ff}
.status-pill.violet{background:var(--color-violet-wash);color:var(--color-violet)}

/* 하단 탭: 컬러 아이콘 */
.phone-tabs{box-shadow:none}
.tab .tab-icon{width:40px;height:30px}
.tab:not(.active) .ico-c{opacity:.55}
.tab.active{color:var(--color-violet)}
.tab-studio .tab-icon,.tab-studio.active .tab-icon{background:#533afd;box-shadow:0 6px 14px -6px rgba(83,58,253,.7);border-radius:14px}
.tab-studio .ico-c{opacity:1!important}

/* 스튜디오 히어로·정산 카드: 네이비→보라 */
.studio-hero{background:linear-gradient(135deg,#0a2540 0%,#3a2bb8 60%,#533afd 100%);box-shadow:0 10px 24px -12px rgba(83,58,253,.6)}
.studio-hero-go{box-shadow:none}
.payout-card{background:linear-gradient(140deg,#0a2540,#3a2bb8 75%,#533afd);box-shadow:0 10px 24px -12px rgba(40,30,140,.55)}

/* H01·P02 상단 밴드 (B안) */
.hero-band{margin:calc(-1 * var(--space-6)) calc(-1 * var(--space-5)) 0;padding:var(--space-6) var(--space-5) 58px;background:var(--band);border-radius:0 0 22px 22px}
.hero-band .home-greet,.hero-band .my-head{margin-bottom:0}
.hero-band .home-greet small,.hero-band .my-head small{color:var(--band-ink);opacity:.78}
.hero-band h2,.hero-band .my-head strong{color:var(--band-ink)}
.band-lift{position:relative;margin-top:-44px;margin-bottom:var(--space-4)}
.band-lift .card{margin-bottom:0}
.spend-card small{display:block;font-size:12px;color:var(--color-text-muted)}
.spend-card strong{display:block;font-size:25px;letter-spacing:-.03em;margin:4px 0 2px}
.spend-card .delta{font-size:12px;font-weight:700;color:var(--color-success)}
.spend-chart{position:relative;height:64px;margin-top:10px}
.spend-chart svg{width:100%;height:100%;overflow:visible}
.spend-chart .line{stroke-dasharray:420;stroke-dashoffset:420;animation:q-draw 4.5s ease-out infinite}
.spend-chart .area{opacity:0;animation:q-area 4.5s ease-out infinite}
.chart-rocket{position:absolute;right:-6px;top:-26px;animation:q-launch 4.5s ease-out infinite}
@keyframes q-draw{0%{stroke-dashoffset:420}55%,100%{stroke-dashoffset:0}}
@keyframes q-area{0%,40%{opacity:0}70%,100%{opacity:1}}
@keyframes q-launch{0%,50%{opacity:0;transform:translate(-24px,30px) rotate(45deg)}65%{opacity:1}80%,100%{opacity:1;transform:translate(0,0) rotate(45deg)}}

/* 목표 달성: 로켓 진행 바 */
.goal-card{margin-top:var(--space-3)}
.goal-head{display:flex;justify-content:space-between;font-size:13px;font-weight:700}
.goal-head b{color:var(--color-violet)}
.goal-track{position:relative;height:12px;border-radius:99px;background:var(--color-surface-offset);margin:32px 30px 6px 2px}
.goal-track.slim{height:9px;margin:26px 26px 8px 2px}
.goal-fill{position:absolute;inset:0 auto 0 0;width:var(--goal);border-radius:inherit;background:linear-gradient(90deg,#9ccbf2,#a59ff5,#533afd);animation:q-fill 3.4s cubic-bezier(.3,.8,.3,1) infinite}
.goal-rocket{position:absolute;top:50%;left:var(--goal);transform:translate(-50%,-80%) rotate(45deg);animation:q-ride 3.4s cubic-bezier(.3,.8,.3,1) infinite}
.goal-flag{position:absolute;right:-28px;top:50%;transform:translateY(-72%)}
@keyframes q-fill{0%{width:0}70%,100%{width:var(--goal)}}
@keyframes q-ride{0%{left:0}70%,100%{left:var(--goal)}}

/* 승인 알림: 큐봇 */
.alert-bot{position:relative;flex:none;display:grid;place-items:center}
.alert-bot i{position:absolute;top:-4px;right:-6px;min-width:20px;height:20px;padding:0 5px;border-radius:99px;background:#ff6f61;color:#fff;font-size:11px;font-weight:800;font-style:normal;display:grid;place-items:center;box-shadow:0 0 0 2px var(--color-surface)}

/* 등급: 플래니 */
.level-card{display:flex;align-items:center;gap:var(--space-3)}
.lv{flex:1}
.lv-steps{display:flex;justify-content:space-between;font-size:11px;font-weight:700;color:var(--color-text-faint)}
.lv-steps .now{color:var(--color-violet)}
.lv-bar{height:9px;border-radius:9px;background:var(--color-surface-offset);margin:6px 0;overflow:hidden}
.lv-bar span{display:block;height:100%;width:var(--lv);background:linear-gradient(90deg,#b6f000,#9ccbf2);border-radius:9px;animation:q-lv 3s ease-out infinite}
@keyframes q-lv{0%{width:0}60%,100%{width:var(--lv)}}
.lv small{font-size:11.5px;color:var(--color-text-muted)}

/* 빈 화면 · 승인 축하 · AI 생성 중 */
.empty-state,.celebrate{position:relative;display:flex;flex-direction:column;align-items:center;text-align:center;gap:4px;padding:var(--space-6) var(--space-4);border:1px dashed var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface-2)}
.empty-state b,.celebrate b{font-size:14.5px;margin-top:6px}
.empty-state small,.celebrate small{font-size:12px;color:var(--color-text-muted);max-width:28ch}
.celebrate{border-style:solid;background:linear-gradient(180deg,#fff9ef,var(--color-surface));margin-bottom:var(--space-4)}
[data-theme="dark"] .celebrate{background:var(--color-surface-2)}
.confetti{position:absolute;left:50%;top:58px}
.confetti i{position:absolute;width:8px;height:12px;border-radius:2px;background:var(--c);border:1.5px solid #1b2559;opacity:0;animation:q-conf 2.6s var(--d) ease-out 2 forwards}
@keyframes q-conf{0%{opacity:0;transform:translate(0,0) rotate(0)}10%{opacity:1}60%{opacity:1;transform:translate(var(--x),var(--y)) rotate(var(--r))}100%{opacity:0;transform:translate(var(--x),calc(var(--y) + 30px)) rotate(var(--r))}}
.pop{animation:q-pop 1.2s ease-out 1}
@keyframes q-pop{0%{transform:scale(.5)}40%{transform:scale(1.14)}70%,100%{transform:scale(1)}}
.ai-busy{display:flex;align-items:center;gap:14px;padding:var(--space-4);margin-bottom:var(--space-4);border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface);box-shadow:var(--depth-card)}
.ai-busy b{font-size:14px}
.ai-busy small{font-size:11.5px;color:var(--color-text-muted)}
.ai-bar{height:8px;border-radius:9px;background:var(--color-surface-offset);overflow:hidden;margin:8px 0 6px;width:170px;max-width:100%}
.ai-bar span{display:block;height:100%;width:40%;border-radius:9px;background:repeating-linear-gradient(45deg,#9ccbf2 0 8px,#a59ff5 8px 16px);animation:q-load 1.6s linear infinite}
@keyframes q-load{0%{transform:translateX(-100%)}100%{transform:translateX(260%)}}
.dots{display:inline-flex;gap:3px;margin-left:4px;vertical-align:middle}
.dots i{width:4px;height:4px;border-radius:50%;background:var(--color-violet);animation:q-dt 1.2s infinite}
.dots i:nth-child(2){animation-delay:.2s}.dots i:nth-child(3){animation-delay:.4s}
@keyframes q-dt{0%,100%{opacity:.2}50%{opacity:1}}

/* 캐릭터 공통 움직임 */
.char{flex:none;overflow:visible}
.work .eyes{animation:q-blink 3s infinite;transform-origin:32px 32px}
@keyframes q-blink{0%,92%,100%{transform:scaleY(1)}95%{transform:scaleY(.1)}}
.work .bulb{animation:q-bulb 1.2s infinite}
@keyframes q-bulb{50%{fill:#b6f000}}
.bob{animation:q-bob 2.6s ease-in-out infinite}
.bob.d1{animation-delay:.3s}.bob.d2{animation-delay:.6s}
@keyframes q-bob{0%,100%{transform:translateY(0)}50%{transform:translateY(-6px)}}
.c-rocket .flame{transform-origin:32px 47px;animation:q-flame .35s ease-in-out infinite alternate}
@keyframes q-flame{to{transform:scaleY(.72)}}
.c-planet .twinkle{transform-box:fill-box;transform-origin:center;animation:q-tw 1.6s ease-in-out infinite}
@keyframes q-tw{50%{transform:scale(.5) rotate(40deg)}}

/* 워터마크 W2: 엠블럼 타일 */
.draft-wm{position:absolute;inset:-25%;z-index:2;pointer-events:none;background:url(assets/wm-emblem-tile.svg) 0 0/110px 110px repeat;opacity:.3;transform:rotate(-20deg)}
.draft.small .draft-wm{background-size:76px 76px}
.draft>img{position:relative;z-index:0}

/* S00 시작 화면: 보라 전면 + 엠블럼 ③ */
.phone-screen.is-splash{background:#533afd}
.phone-screen.is-splash .phone-status{color:#fff}
.phone-screen.is-splash .phone-actions{background:transparent;border-top:0}
.phone-screen.is-splash .primary-btn{background:#fff;color:#0a2540;box-shadow:0 8px 18px -8px rgba(10,37,64,.5)}
.phone-screen.is-splash .secondary-btn{color:#fff}
.phone-screen.is-splash .secondary-btn:hover{background:rgba(255,255,255,.12)}
.phone-screen.is-splash .home-indicator{background:#fff}
.splash{background-image:none}
.splash-emblem{width:150px;height:auto;margin-bottom:var(--space-6)}
.phone-screen.is-splash .splash-tag{color:#fff}
.splash-friends{display:flex;gap:10px;margin-top:var(--space-5)}
.phone-screen.is-splash .splash-points span{background:rgba(255,255,255,.12);border-color:rgba(255,255,255,.25);color:#fff;box-shadow:none}
.phone-screen.is-splash .splash-points .ui-icon{color:#fbad48}

/* 파비콘 안내 */
.icon-sizes{align-items:flex-end}

@media(prefers-reduced-motion:reduce){.char *,.char,.goal-fill,.goal-rocket,.spend-chart *,.chart-rocket,.lv-bar span,.confetti i,.ai-bar span,.dots i{animation:none!important}.spend-chart .line{stroke-dashoffset:0}.spend-chart .area{opacity:1}.chart-rocket{transform:rotate(45deg)}}

/* 3D 두께 그림자 → 얇은 그림자 */
.auth-btn,.ghost-btn,.stat-tile,.seg button.on{box-shadow:var(--shadow-sm)}
.auth-btn.kakao{box-shadow:0 1px 1px rgba(10,37,64,.06),0 4px 10px -6px rgba(120,100,0,.4)}
.auth-submit{box-shadow:0 1px 1px rgba(10,37,64,.1),0 6px 14px -8px rgba(10,37,64,.5)}
.studio-new{box-shadow:0 1px 1px rgba(10,37,64,.1),0 10px 22px -10px rgba(83,58,253,.65)}
.flow-steps b{box-shadow:none}
.studio-new-icon{background:rgba(255,255,255,.16)!important}
.menu-row,.toggle-row{box-shadow:none}