/* ── 1. 디자인 토큰 보강 ───────────────────────────────────── */
:root {
/* Surface tier — 5단계 명확 */
--d-surface-0: #08080C; /* 페이지 배경 */
--d-surface-1: #0E0E15; /* 카드 base */
--d-surface-2: #15151E; /* 카드 hover / elevated */
--d-surface-3: #1B1B27; /* 모달·dropdown */
--d-surface-overlay: rgba(8,8,12,0.78);
/* Border tier */
--d-line: rgba(255,255,255,0.06);
--d-line-strong: rgba(255,255,255,0.10);
--d-line-glow: rgba(167,139,250,0.32);
/* Text */
--d-ink: #F4F4F8;
--d-ink-mute: #B5B5C2;
--d-ink-faint: #797986;
--d-ink-whisper:#52525E;
/* Accent — 단일 시그니처 색 */
--d-acc: #A78BFA;
--d-acc-hover: #957EF2;
--d-acc-soft: rgba(167,139,250,0.10);
--d-acc-glow: rgba(167,139,250,0.20);
/* Status — 채도 살짝 낮춤 */
--d-ok: #34D399;
--d-warn: #FBBF24;
--d-bad: #F87171;
--d-info: #22D3EE;
/* Spacing scale (8px grid) */
--d-s-1: 4px; --d-s-2: 8px; --d-s-3: 12px; --d-s-4: 16px;
--d-s-5: 20px; --d-s-6: 24px; --d-s-7: 32px; --d-s-8: 40px;
--d-s-9: 56px; --d-s-10: 72px;
/* Type scale */
--d-fs-xs: 11px;
--d-fs-sm: 12.5px;
--d-fs-md: 14px;
--d-fs-lg: 16px;
--d-fs-xl: 20px;
--d-fs-2xl: 26px;
--d-fs-3xl: 34px;
--d-fs-4xl: 44px;
--d-lh-tight: 1.18;
--d-lh-snug: 1.38;
--d-lh-base: 1.55;
--d-lh-relax: 1.72;
--d-tracking-tight: -0.022em;
--d-tracking-snug: -0.012em;
--d-tracking-flat: 0;
--d-tracking-wide: 0.04em;
/* Radius — 4 단계 */
--d-r-sm: 6px;
--d-r-md: 10px;
--d-r-lg: 16px;
--d-r-xl: 22px;
--d-r-pill: 999px;
/* Elevation */
--d-shadow-sm: 0 1px 2px rgba(0,0,0,0.40), 0 0 0 1px var(--d-line);
--d-shadow-md: 0 6px 18px -6px rgba(0,0,0,0.55), 0 0 0 1px var(--d-line);
--d-shadow-lg: 0 20px 40px -16px rgba(0,0,0,0.55), 0 0 0 1px var(--d-line-strong);
--d-shadow-glow: 0 0 0 1px var(--d-acc), 0 8px 28px -8px var(--d-acc-glow);
/* Motion */
--d-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--d-ease-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--d-t-quick: 120ms;
--d-t-base: 200ms;
--d-t-slow: 320ms;
}
/* ── 2. 글로벌 타이포·렌더링 보강 ─────────────────────────── */
body {
font-feature-settings: 'cv01','cv02','ss01';
letter-spacing: var(--d-tracking-snug);
text-rendering: optimizeLegibility;
-webkit-font-smoothing: antialiased;
-moz-osx-font-smoothing: grayscale;
}
h1, h2, h3, h4, .pl-detail-title, .sd-intent-text {
letter-spacing: var(--d-tracking-tight);
font-feature-settings: 'cv01','cv02','ss01','ss02';
}
/* Display 폰트 강조 — page-head h1 */
.page-head h1, .sfx-head, .doc-title, .sd-intent-text {
font-family: var(--font-display, 'Fraunces');
font-weight: 600;
line-height: var(--d-lh-tight);
}
/* mono — tabular numbers */
.mp-time, .pl-wf-pager-page, .lib-count, .dec-count, .pl-wf-step-num,
.td-todo-reorder-idx, .nav-pill, code, kbd {
font-variant-numeric: tabular-nums;
}
/* ── 3. 스크롤바 — 미니멀 ──────────────────────────────────── */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.06);
border-radius: var(--d-r-pill);
border: 2px solid transparent;
background-clip: padding-box;
transition: background var(--d-t-quick);
}
::-webkit-scrollbar-thumb:hover {
background: rgba(167,139,250,0.28);
background-clip: padding-box;
}
/* ── 4. 셀렉션 ──────────────────────────────────────────── */
::selection { background: rgba(167,139,250,0.30); color: #fff; }
/* ── 5. 포커스 링 — 키보드 친화 ──────────────────────────── */
*:focus { outline: none; }
*:focus-visible {
outline: none;
box-shadow: 0 0 0 2px var(--d-acc-soft), 0 0 0 1px var(--d-acc) !important;
border-radius: var(--d-r-sm);
}
button:focus-visible, a:focus-visible {
box-shadow: 0 0 0 3px var(--d-acc-soft), 0 0 0 1px var(--d-acc) !important;
}
/* ── 6. 카드 — 통일 톤 ──────────────────────────────────── */
.lib-card,
.info-card,
.mg-stat-card,
.price-card,
.parchive-card,
.td-todo-card,
.td-last-card,
.settings-card,
.vault-card,
.pk-card,
.sd-side-block,
.sfx-quickgen,
.pl-wf-card,
.bible-modal-card,
.vault-modal-card,
.qj-card {
transition: border-color var(--d-t-base) var(--d-ease),
background var(--d-t-base) var(--d-ease),
box-shadow var(--d-t-base) var(--d-ease),
transform var(--d-t-base) var(--d-ease);
}
/* ── 7. 버튼 — 통일된 시각·호버 ──────────────────────────── */
.vault-btn, .pl-btn, .sfx-quickgen-btn, .h-btn,
.td-goal-btn, .td-todo-add-btn, .pl-wf-add-btn, .pl-wf-add-step,
.sv-docs-btn, .memory-reco-btn, .price-card .vault-btn,
.nav-foot a, .doc-actions button, .sfx-tab,
.lib-tab, .dec-tab, .sd-filter, .sd-cta,
.pk-toggle-btn, .pl-wf-model-toggle, .sfx-ctrl,
button:not(.icon-btn):not(.brand) {
transition: background var(--d-t-quick) var(--d-ease),
color var(--d-t-quick) var(--d-ease),
border-color var(--d-t-quick) var(--d-ease),
transform var(--d-t-quick) var(--d-ease),
box-shadow var(--d-t-quick) var(--d-ease);
}
button:not(:disabled):active { transform: translateY(1px); }
/* ── 8. 입력 필드 — 일관 톤 ──────────────────────────────── */
input, textarea, select {
transition: border-color var(--d-t-quick) var(--d-ease),
box-shadow var(--d-t-quick) var(--d-ease);
}
input::placeholder, textarea::placeholder { color: var(--d-ink-whisper); }
input:hover:not(:disabled):not(:focus), textarea:hover:not(:disabled):not(:focus), select:hover:not(:disabled):not(:focus) {
border-color: var(--d-line-strong) !important;
}
/* ── 9. 페이지 헤더 통일 — 호흡 있는 위계 ─────────────────── */
.page-head { margin-bottom: var(--d-s-7); }
.page-head h1, .pl-detail-title {
font-size: var(--d-fs-3xl);
font-weight: 600;
letter-spacing: var(--d-tracking-tight);
line-height: var(--d-lh-tight);
color: var(--d-ink);
margin-bottom: 6px;
}
.page-head p {
font-size: var(--d-fs-md);
color: var(--d-ink-mute);
line-height: var(--d-lh-base);
max-width: 720px;
}
/* ── 10. 사이드바 정돈 ──────────────────────────────────── */
.nav-section-label {
font-size: 10px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--d-ink-faint);
padding: var(--d-s-4) var(--d-s-3) var(--d-s-2);
margin-top: var(--d-s-3);
}
.nav-section-label:first-child { margin-top: 0; padding-top: var(--d-s-2); }
.nav-item {
transition: background var(--d-t-quick) var(--d-ease),
color var(--d-t-quick) var(--d-ease);
}
.nav-item:hover {
color: var(--d-ink);
background: rgba(255,255,255,0.025);
}
.nav-item.active {
background: var(--d-acc-soft);
color: var(--d-acc);
font-weight: 600;
}
/* ── 11. 토스트 — 더 부드러운 등장 ──────────────────────── */
.toast {
backdrop-filter: blur(12px) saturate(160%);
-webkit-backdrop-filter: blur(12px) saturate(160%);
box-shadow: var(--d-shadow-lg);
letter-spacing: var(--d-tracking-snug);
}
/* ── 12. 모달 — 일관 elevation ──────────────────────────── */
.vault-modal-backdrop, .pl-wf-modal, .bible-modal,
.qj-backdrop, #sv-docs-modal, #sv-reject-modal {
background: var(--d-surface-overlay);
backdrop-filter: blur(8px) saturate(160%);
-webkit-backdrop-filter: blur(8px) saturate(160%);
}
.vault-modal-card, .pl-wf-card, .bible-modal-card, .qj-card,
.sv-docs-card {
box-shadow: 0 40px 80px -20px rgba(0,0,0,0.65), 0 0 0 1px var(--d-line-strong);
border-radius: var(--d-r-xl);
}
/* ── 13. Pipeline·트리 정돈 ──────────────────────────────── */
.pl-tree-node {
transition: background var(--d-t-quick) var(--d-ease);
}
.pl-tree-node:hover { background: rgba(255,255,255,0.025); }
.pl-tree-node.active {
background: var(--d-acc-soft);
color: var(--d-acc);
}
/* ── 14. 단계 카드 — 워크플로우 빌더 호흡 ───────────────── */
.pl-wf-step-wrap {
transition: border-color var(--d-t-base) var(--d-ease),
background var(--d-t-base) var(--d-ease);
}
.pl-wf-step-wrap:hover { border-color: var(--d-line-strong); }
/* ── 15. SFX·Decision·Memory 카드 hover ─────────────────── */
.lib-card:hover, .info-card:hover, .parchive-card:hover,
.price-card:hover, .pk-card:hover, .pl-wf-model-card:hover:not(:disabled),
.mg-stat-card:hover {
border-color: var(--d-line-glow) !important;
transform: translateY(-2px);
}
/* ── 16. 텍스트 그라데이션 액센트 (페이지 강조용) ────────── */
.d-grad-text {
background: linear-gradient(135deg, var(--d-acc), var(--d-info));
-webkit-background-clip: text;
background-clip: text;
color: transparent;
font-weight: 700;
}
/* ── 17. 미니플레이어·top bar 정돈 ──────────────────────── */
.topbar {
backdrop-filter: blur(14px) saturate(180%);
-webkit-backdrop-filter: blur(14px) saturate(180%);
background: rgba(8,8,12,0.78);
border-bottom: 1px solid var(--d-line);
}
.mini-player {
background: var(--d-surface-1);
border: 1px solid var(--d-line);
border-radius: var(--d-r-pill);
transition: border-color var(--d-t-quick) var(--d-ease);
}
.mini-player:hover { border-color: var(--d-line-strong); }
/* ── 18. 우상단 액션 아이콘 — 통일 ──────────────────────── */
.top-actions .icon-btn {
transition: color var(--d-t-quick) var(--d-ease),
background var(--d-t-quick) var(--d-ease),
border-color var(--d-t-quick) var(--d-ease),
transform var(--d-t-quick) var(--d-ease);
}
.top-actions .icon-btn:hover { transform: translateY(-1px); }
/* ── 19. Today LAST WORK — 위계 명확 ──────────────────── */
.td-todo-name {
font-size: var(--d-fs-md);
font-weight: 600;
letter-spacing: var(--d-tracking-snug);
color: var(--d-ink);
}
.td-todo-meta {
font-size: var(--d-fs-xs);
color: var(--d-ink-faint);
letter-spacing: 0;
}
/* ── 20. 빈 상태 — 톤 일관 ──────────────────────────────── */
.lib-empty, .pl-detail-empty, .sd-empty,
#parchive-empty, #sd-timeline-empty {
color: var(--d-ink-faint);
font-style: italic;
letter-spacing: var(--d-tracking-snug);
}
/* ── 21. Compare Mode 셀 ────────────────────────────────── */
.cmp-cell {
transition: border-color var(--d-t-base) var(--d-ease),
box-shadow var(--d-t-base) var(--d-ease);
}
.cmp-cell.winner {
box-shadow: var(--d-shadow-glow);
}
/* ── 22. 코드/KBD ───────────────────────────────────────── */
code, kbd {
font-family: var(--font-mono, 'JetBrains Mono');
font-size: 0.92em;
letter-spacing: 0;
}
.kbd {
padding: 1px 6px;
background: rgba(255,255,255,0.04);
border: 1px solid var(--d-line);
border-radius: 4px;
font-size: 11px;
color: var(--d-ink-mute);
}
/* ── 23. 링크 ──────────────────────────────────────────── */
a {
transition: color var(--d-t-quick) var(--d-ease);
}
a:hover { color: var(--d-acc-hover); }
/* ── 24. 모바일 보강 — 터치 타깃 44px ────────────────────── */
@media (max-width: 768px) {
.nav-item, .lib-tab, .dec-tab, .sfx-tab,
button:not(.icon-btn):not(.dec-quick-btn):not(.pl-wf-step-rm) {
min-height: 38px;
}
}
@media (max-width: 520px) {
.layout { grid-template-columns: 72px 1fr !important; }
.layout.sidebar-collapsed { grid-template-columns: 0 1fr !important; }
.nav-item {
flex-direction: column !important;
justify-content: center !important;
gap: 3px !important;
padding: 9px 4px !important;
font-size: 9px !important;
line-height: 1.15 !important;
letter-spacing: 0 !important;
text-align: center !important;
}
.nav-section-label {
font-size: 8px !important;
text-align: center !important;
padding-inline: 0 !important;
}
.nav-pill { display: none !important; }
}
/* ── 25. 모션 감소 선호 ────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
*, *::before, *::after {
animation-duration: 0.01ms !important;
transition-duration: 0.01ms !important;
scroll-behavior: auto !important;
}
}
/* ── 26. 인쇄 톤 정돈 ──────────────────────────────────── */
@media print {
.topbar, .sidebar, .mini-player, .toast, .icon-btn,
.nav-item, .pro-upgrade-btn { display: none !important; }
body { background: #fff !important; color: #000 !important; }
}
/* ── 27. Pro 업그레이드 버튼 — 시니어 톤 다이아몬드 알약 ──── */
.pro-upgrade-btn {
position: relative;
width: auto !important;
height: 32px !important;
padding: 0 14px 0 11px !important;
gap: 7px !important;
border-radius: var(--d-r-pill, 999px) !important;
/* 보라→인디고 그라데이션 — 톤앤무드 일관 */
background: linear-gradient(135deg, #A78BFA 0%, #818CF8 50%, #6366F1 100%) !important;
background-size: 200% 100% !important;
background-position: 0% 50% !important;
border: 1px solid rgba(255,255,255,0.18) !important;
color: #fff !important;
font-size: 11.5px !important;
font-weight: 700 !important;
letter-spacing: 0.06em !important;
box-shadow:
0 0 0 1px rgba(167,139,250,0.18),
0 6px 18px -6px rgba(99,102,241,0.55),
0 1px 0 rgba(255,255,255,0.18) inset !important;
overflow: hidden;
transition: background-position 360ms var(--d-ease, cubic-bezier(0.22,0.61,0.36,1)),
transform 200ms var(--d-ease, cubic-bezier(0.22,0.61,0.36,1)),
box-shadow 200ms var(--d-ease, cubic-bezier(0.22,0.61,0.36,1)) !important;
animation: proIndigoBreathe 3.6s ease-in-out infinite;
}
.pro-upgrade-btn:hover {
background-position: 100% 50% !important;
transform: translateY(-1px) !important;
border-color: rgba(255,255,255,0.32) !important;
box-shadow:
0 0 0 2px rgba(167,139,250,0.30),
0 0 22px -4px rgba(167,139,250,0.55),
0 10px 26px -6px rgba(99,102,241,0.70),
0 1px 0 rgba(255,255,255,0.30) inset !important;
animation-play-state: paused;
}
.pro-upgrade-btn:active {
transform: translateY(0) !important;
}
/* 라벨 다시 표시 — 모노 폰트, tracking */
.pro-upgrade-btn .pro-label {
display: inline-block !important;
font-family: var(--font-mono, 'JetBrains Mono');
letter-spacing: 0.10em;
text-shadow: 0 1px 2px rgba(99,102,241,0.40);
line-height: 1;
font-variant-numeric: tabular-nums;
}
/* 다이아몬드 아이콘 */
.pro-upgrade-btn .pro-ic {
position: static !important;
transform: none !important;
width: 13px !important;
height: 13px !important;
flex-shrink: 0;
filter: drop-shadow(0 0 4px rgba(255,255,255,0.55))
drop-shadow(0 1px 1px rgba(99,102,241,0.40));
animation: proIndigoTwinkle 5.4s ease-in-out infinite;
}
/* 부드러운 sweep — 좌→우 광택 */
.pro-upgrade-btn .pro-shine {
position: absolute;
top: 0; left: -45%;
width: 40%;
height: 100%;
background: linear-gradient(
110deg,
transparent 30%,
rgba(255,255,255,0.55) 50%,
transparent 70%
);
transform: skewX(-22deg);
animation: proIndigoSweep 4.2s ease-in-out infinite;
pointer-events: none;
mix-blend-mode: overlay;
}
/* 부드러운 호흡 — 박스 그림자 살짝 강도 변화 */
@keyframes proIndigoBreathe {
0%, 100% {
box-shadow:
0 0 0 1px rgba(167,139,250,0.18),
0 6px 18px -6px rgba(99,102,241,0.55),
0 1px 0 rgba(255,255,255,0.18) inset;
}
50% {
box-shadow:
0 0 0 2px rgba(167,139,250,0.22),
0 8px 22px -4px rgba(99,102,241,0.70),
0 1px 0 rgba(255,255,255,0.24) inset;
}
}
/* 다이아몬드 살짝 빛나기 — 5.4초마다 짧은 윙크 */
@keyframes proIndigoTwinkle {
0%, 75%, 100% {
filter: drop-shadow(0 0 4px rgba(255,255,255,0.55))
drop-shadow(0 1px 1px rgba(99,102,241,0.40));
}
80% {
filter: drop-shadow(0 0 8px rgba(255,255,255,1.0))
drop-shadow(0 0 12px rgba(167,139,250,0.85))
drop-shadow(0 1px 1px rgba(99,102,241,0.40));
}
85% {
filter: drop-shadow(0 0 6px rgba(255,255,255,0.78))
drop-shadow(0 0 8px rgba(167,139,250,0.60))
drop-shadow(0 1px 1px rgba(99,102,241,0.40));
}
}
/* sweep — 좌에서 우로 부드러운 광택 (4.2초마다) */
@keyframes proIndigoSweep {
0%, 60% { left: -45%; }
80%, 100% { left: 145%; }
}
/* Pro 멤버 (이미 결제) — 매우 차분한 톤 */
.pro-upgrade-btn.is-pro {
background: linear-gradient(135deg,
rgba(167,139,250,0.18) 0%,
rgba(99,102,241,0.18) 100%) !important;
border-color: rgba(167,139,250,0.32) !important;
color: var(--d-acc, #A78BFA) !important;
box-shadow:
0 0 0 1px rgba(167,139,250,0.20),
0 1px 0 rgba(255,255,255,0.06) inset !important;
animation: none !important;
}
.pro-upgrade-btn.is-pro .pro-shine,
.pro-upgrade-btn.is-pro .pro-ic { animation: none !important; }
.pro-upgrade-btn.is-pro .pro-ic {
filter: drop-shadow(0 0 4px rgba(167,139,250,0.40)) !important;
}
.pro-upgrade-btn.is-pro:hover {
transform: none !important;
background: linear-gradient(135deg,
rgba(167,139,250,0.28) 0%,
rgba(99,102,241,0.28) 100%) !important;
}
/* 모바일 — 라벨 숨기고 다이아몬드만 */
@media (max-width: 600px) {
.pro-upgrade-btn {
padding: 0 10px !important;
}
.pro-upgrade-btn .pro-label { display: none !important; }
}
/* 모션 감소 선호 시 */
@media (prefers-reduced-motion: reduce) {
.pro-upgrade-btn,
.pro-upgrade-btn .pro-ic,
.pro-upgrade-btn .pro-shine {
animation: none !important;
}
}
/* ── 28. User Avatar — 플랜별 반짝 테두리 ─────────────────── */
.avatar#user-avatar {
position: relative;
transition: transform var(--d-t-quick) var(--d-ease);
isolation: isolate;
overflow: visible !important; /* ring이 외곽으로 나가야 */
}
.avatar#user-avatar:hover { transform: translateY(-1px); }
/* 사진 — 항상 ring 위에 표시 */
.avatar#user-avatar > img {
width: 100% !important;
height: 100% !important;
object-fit: cover !important;
border-radius: 50% !important;
display: block !important;
position: relative;
z-index: 2;
}
/* 텍스트 이니셜 — 사진 없을 때 */
.avatar#user-avatar:not(:has(img)) {
/* 텍스트는 부모 grid place-items:center 그대로 사용 */
}
/* 모든 플랜 공통 — conic 회전 ring (사진 뒤) */
.avatar#user-avatar[data-plan]::before {
content: '';
position: absolute;
inset: -3px;
border-radius: 50%;
pointer-events: none;
z-index: 0;
filter: blur(1.5px);
opacity: 0.85;
}
/* ─── Free / 게스트 — 연보라 ─────────────────── */
.avatar#user-avatar[data-plan="free"],
.avatar#user-avatar:not([data-plan]) {
box-shadow:
0 0 0 2px #C4B5FD, /* 연보라 inner ring */
0 0 0 3.5px rgba(196,181,253,0.18),
0 0 12px -2px rgba(167,139,250,0.40),
0 4px 14px -3px rgba(167,139,250,0.28);
animation: avPurpleSoft 3.2s ease-in-out infinite;
}
.avatar#user-avatar[data-plan="free"]::before,
.avatar#user-avatar:not([data-plan])::before {
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(255,255,255,0.55) 25deg,
transparent 80deg,
rgba(167,139,250,0.55) 180deg,
transparent 280deg,
rgba(255,255,255,0.45) 320deg,
transparent 360deg
);
animation: avRingSpin 6s linear infinite;
}
.avatar#user-avatar[data-plan="free"]:hover {
transform: translateY(-1px) scale(1.04);
animation-play-state: paused;
}
/* ─── Standard — 하늘색 반짝 (Free 연보라보다 명확, Pro 핫핑크보다 차분) ── */
.avatar#user-avatar[data-plan="standard"] {
box-shadow:
0 0 0 2.5px #38BDF8, /* 선명한 하늘색 inner ring */
0 0 0 4.5px rgba(56,189,248,0.22),
0 0 16px -2px rgba(14,165,233,0.65),
0 4px 18px -3px rgba(14,165,233,0.45);
animation: avSkyVivid 2.4s ease-in-out infinite;
}
.avatar#user-avatar[data-plan="standard"]::before {
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(255,255,255,0.90) 25deg,
transparent 75deg,
rgba(56,189,248,0.90) 170deg,
rgba(186,230,253,0.70) 200deg,
transparent 280deg,
rgba(255,255,255,0.80) 325deg,
transparent 360deg
);
animation: avRingSpin 3.8s linear infinite;
filter: blur(1.6px);
opacity: 1;
}
.avatar#user-avatar[data-plan="standard"]:hover {
transform: translateY(-1px) scale(1.05);
animation-play-state: paused;
box-shadow:
0 0 0 3px #38BDF8,
0 0 0 6px rgba(56,189,248,0.28),
0 0 26px 0 rgba(14,165,233,0.85),
0 6px 24px -2px rgba(14,165,233,0.60);
}
.avatar#user-avatar[data-plan="standard"]:hover::before {
animation-play-state: paused;
}
/* ─── Pro — 핫핑크 강한 반짝 ─────────────── */
.avatar#user-avatar[data-plan="pro"] {
box-shadow:
0 0 0 2.5px #FF1493,
0 0 0 4.5px rgba(255,20,147,0.22),
0 0 16px -2px rgba(255,20,147,0.70),
0 4px 18px -3px rgba(255,20,147,0.50);
animation: avPinkPulse 2.2s ease-in-out infinite;
}
.avatar#user-avatar[data-plan="pro"]::before {
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(255,255,255,0.95) 25deg,
transparent 75deg,
rgba(255,20,147,0.85) 170deg,
rgba(255,180,210,0.65) 200deg,
transparent 280deg,
rgba(255,255,255,0.85) 325deg,
transparent 360deg
);
animation: avRingSpin 3.2s linear infinite;
filter: blur(1.8px);
opacity: 1;
}
.avatar#user-avatar[data-plan="pro"]:hover {
transform: translateY(-1px) scale(1.06);
animation-play-state: paused;
box-shadow:
0 0 0 3px #FF1493,
0 0 0 6px rgba(255,20,147,0.32),
0 0 26px 0 rgba(255,20,147,0.90),
0 6px 24px -2px rgba(255,20,147,0.65);
}
.avatar#user-avatar[data-plan="pro"]:hover::before {
animation-play-state: paused;
}
/* ─── Team — 골드 톤 ─────────────────── */
.avatar#user-avatar[data-plan="team"] {
box-shadow:
0 0 0 2.5px #FBBF24,
0 0 0 4.5px rgba(251,191,36,0.22),
0 0 14px -2px rgba(251,191,36,0.60),
0 4px 16px -3px rgba(251,191,36,0.42);
animation: avGoldPulse 2.6s ease-in-out infinite;
}
.avatar#user-avatar[data-plan="team"]::before {
background: conic-gradient(
from 0deg,
transparent 0deg,
rgba(255,255,255,0.85) 30deg,
transparent 90deg,
rgba(251,191,36,0.75) 180deg,
transparent 270deg,
rgba(255,255,255,0.65) 320deg,
transparent 360deg
);
animation: avRingSpin 4s linear infinite;
}
/* ── Animations ─────────────────────────── */
@keyframes avRingSpin {
from { transform: rotate(0deg); }
to { transform: rotate(360deg); }
}
@keyframes avPurpleSoft {
0%, 100% {
box-shadow:
0 0 0 2px #C4B5FD,
0 0 0 3.5px rgba(196,181,253,0.18),
0 0 12px -2px rgba(167,139,250,0.40),
0 4px 14px -3px rgba(167,139,250,0.28);
}
50% {
box-shadow:
0 0 0 2px #C4B5FD,
0 0 0 5px rgba(196,181,253,0.12),
0 0 18px 0 rgba(167,139,250,0.55),
0 4px 18px -2px rgba(167,139,250,0.40);
}
}
@keyframes avSkyVivid {
0%, 100% {
box-shadow:
0 0 0 2.5px #38BDF8,
0 0 0 4.5px rgba(56,189,248,0.22),
0 0 16px -2px rgba(14,165,233,0.65),
0 4px 18px -3px rgba(14,165,233,0.45);
}
50% {
box-shadow:
0 0 0 3px #38BDF8,
0 0 0 6.5px rgba(56,189,248,0.14),
0 0 26px 0 rgba(14,165,233,0.90),
0 6px 22px -2px rgba(14,165,233,0.60);
}
}
@keyframes avPinkPulse {
0%, 100% {
box-shadow:
0 0 0 2.5px #FF1493,
0 0 0 4.5px rgba(255,20,147,0.22),
0 0 16px -2px rgba(255,20,147,0.70),
0 4px 18px -3px rgba(255,20,147,0.50);
}
50% {
box-shadow:
0 0 0 3px #FF1493,
0 0 0 6.5px rgba(255,20,147,0.14),
0 0 26px 0 rgba(255,20,147,0.90),
0 6px 22px -2px rgba(255,20,147,0.65);
}
}
@keyframes avGoldPulse {
0%, 100% {
box-shadow:
0 0 0 2.5px #FBBF24,
0 0 0 4.5px rgba(251,191,36,0.22),
0 0 14px -2px rgba(251,191,36,0.60),
0 4px 16px -3px rgba(251,191,36,0.42);
}
50% {
box-shadow:
0 0 0 3px #FBBF24,
0 0 0 6px rgba(251,191,36,0.14),
0 0 22px 0 rgba(251,191,36,0.80),
0 6px 20px -2px rgba(251,191,36,0.55);
}
}
/* prefers-reduced-motion 시 애니메이션 정지 */
@media (prefers-reduced-motion: reduce) {
.avatar#user-avatar,
.avatar#user-avatar::before {
animation: none !important;
}
}
/* ── 28-pre. Credit Pill — 제작 탭 우상단 잔량 표시 ─────── */
.page-head { position: relative; }
.credit-pill {
position: absolute;
top: 4px; right: 0;
display: inline-flex; align-items: center; gap: 9px;
padding: 6px 12px 6px 11px;
background: var(--bg-card, #14141A);
border: 1px solid var(--border, #2A2A33);
border-radius: 999px;
font-size: 11.5px;
letter-spacing: 0.01em;
color: var(--text, #E9E9F0);
cursor: pointer;
transition: border-color 200ms, transform 200ms, box-shadow 200ms;
user-select: none;
z-index: 3;
}
.credit-pill:hover {
border-color: var(--accent, #A78BFA);
transform: translateY(-1px);
box-shadow: 0 6px 16px -8px rgba(167,139,250,0.45);
}
.credit-pill .cp-ic {
width: 13px; height: 13px;
color: var(--accent, #A78BFA);
flex-shrink: 0;
}
.credit-pill .cp-num {
font-variant-numeric: tabular-nums;
font-weight: 600;
color: var(--text, #E9E9F0);
}
.credit-pill .cp-total {
font-variant-numeric: tabular-nums;
color: var(--text-faint, #797986);
font-weight: 400;
}
.credit-pill .cp-bar {
width: 54px; height: 3px;
background: rgba(255,255,255,0.06);
border-radius: 999px;
overflow: hidden;
}
.credit-pill .cp-fill {
height: 100%;
background: linear-gradient(90deg, var(--accent, #A78BFA), #6366F1);
border-radius: 999px;
transition: width 360ms cubic-bezier(0.22,0.61,0.36,1);
}
.credit-pill .cp-plan {
font-size: 10px;
letter-spacing: 0.08em;
color: var(--text-faint, #797986);
text-transform: uppercase;
padding-left: 8px;
margin-left: 2px;
border-left: 1px solid var(--border, #2A2A33);
}
.credit-pill.low { border-color: rgba(245,158,11,0.45); }
.credit-pill.low .cp-ic { color: #F59E0B; }
.credit-pill.low .cp-fill { background: linear-gradient(90deg, #F59E0B, #EF4444); }
.credit-pill.empty { border-color: rgba(239,68,68,0.55); }
.credit-pill.empty .cp-ic { color: #EF4444; }
.credit-pill.empty .cp-fill { background: #EF4444; }
.credit-pill.unlimited .cp-bar,
.credit-pill.unlimited .cp-total { display: none; }
.credit-pill.unlimited .cp-num { color: var(--accent, #A78BFA); }
@media (max-width: 720px) {
.credit-pill {
position: static;
margin-top: 12px;
}
.credit-pill .cp-bar { width: 40px; }
.credit-pill .cp-plan { display: none; }
}
/* ── 29. 잠긴 도구 — 자물쇠 아이콘 통일 ─────────────────── */
.nav-item.locked,
.nav-item.locked-standard {
position: relative;
opacity: 0.55;
transition: opacity var(--d-t-quick) var(--d-ease, cubic-bezier(0.22,0.61,0.36,1));
}
.nav-item.locked:hover,
.nav-item.locked-standard:hover {
opacity: 0.85;
}
.nav-item.locked::after,
.nav-item.locked-standard::after {
content: '';
margin-left: auto;
width: 13px;
height: 13px;
flex-shrink: 0;
background-color: var(--d-ink-faint, #797986);
-webkit-mask-image: url("data:image/svg+xml;utf8,");
mask-image: url("data:image/svg+xml;utf8,");
-webkit-mask-size: contain;
mask-size: contain;
-webkit-mask-repeat: no-repeat;
mask-repeat: no-repeat;
-webkit-mask-position: center;
mask-position: center;
transition: background-color var(--d-t-quick) var(--d-ease, cubic-bezier(0.22,0.61,0.36,1));
}
.nav-item.locked:hover::after,
.nav-item.locked-standard:hover::after {
background-color: var(--d-acc, #A78BFA);
}
.nav-item.guest-locked,
.bn-item.guest-locked {
position: relative;
opacity: .55;
cursor: not-allowed;
}
.nav-item.guest-locked::after,
.bn-item.guest-locked::after {
content: "🔒";
margin-left: auto;
font-size: 12px;
opacity: .9;
}
.bn-item.guest-locked::after {
position: absolute;
top: 4px;
right: 8px;
margin: 0;
font-size: 10px;
}
/* ── soaviz.com landing ───────────────────────────────── */
.landing-page {
min-height: calc(100vh - 70px);
padding: 0;
color: var(--text, #fff);
background:
radial-gradient(circle at 18% 6%, rgba(167,139,250,.26), transparent 34%),
radial-gradient(circle at 86% 12%, rgba(129,140,248,.18), transparent 30%),
linear-gradient(180deg, rgba(6,5,14,.96), rgba(10,8,20,.98));
}
.landing-section {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
}
.landing-hero {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, .95fr);
gap: 36px;
align-items: center;
min-height: calc(100vh - 92px);
padding: 58px 0 34px;
}
.landing-kicker {
display: inline-flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
padding: 8px 12px;
border-radius: 999px;
background: rgba(167,139,250,.12);
border: 1px solid rgba(167,139,250,.28);
color: #c4b5fd;
font-size: 12px;
font-weight: 800;
}
.landing-title {
margin: 0;
max-width: 760px;
font-size: clamp(42px, 7vw, 88px);
line-height: 1.02;
letter-spacing: 0;
font-weight: 900;
}
.landing-copy {
max-width: 620px;
margin: 22px 0 0;
color: rgba(255,255,255,.72);
font-size: clamp(16px, 2vw, 20px);
line-height: 1.75;
}
.landing-actions {
display: flex;
flex-wrap: wrap;
gap: 12px;
margin-top: 30px;
align-items: center;
}
.landing-primary,
.landing-secondary {
min-height: 54px;
padding: 0 22px;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 900;
cursor: pointer;
}
.landing-primary {
border: 0;
color: white;
background: linear-gradient(135deg, #a78bfa, #818cf8);
box-shadow: 0 20px 54px rgba(167,139,250,.34);
}
.landing-secondary {
color: rgba(255,255,255,.86);
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
}
.landing-note {
margin-top: 14px;
color: #c4b5fd;
font-size: 13px;
font-weight: 800;
}
.landing-preview {
position: relative;
min-height: 460px;
border-radius: 28px;
overflow: hidden;
border: 1px solid rgba(255,255,255,.12);
background:
linear-gradient(135deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
radial-gradient(circle at 50% 0%, rgba(167,139,250,.3), transparent 48%);
box-shadow: 0 32px 90px rgba(0,0,0,.42);
}
.landing-preview::before {
content: "";
position: absolute;
inset: 0;
background:
linear-gradient(90deg, transparent 0 18%, rgba(255,255,255,.06) 18% 18.4%, transparent 18.4% 100%),
linear-gradient(180deg, transparent 0 22%, rgba(255,255,255,.06) 22% 22.4%, transparent 22.4% 100%);
opacity: .42;
}
.landing-preview-card {
position: absolute;
left: 24px;
right: 24px;
bottom: 24px;
padding: 18px;
border-radius: 20px;
background: rgba(8,7,18,.72);
border: 1px solid rgba(255,255,255,.14);
backdrop-filter: blur(18px);
}
.landing-preview-card h3 {
margin: 0 0 12px;
font-size: 16px;
}
.landing-flow {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 8px;
}
.landing-flow span {
min-height: 74px;
display: grid;
place-items: center;
border-radius: 14px;
background: linear-gradient(135deg, rgba(167,139,250,.28), rgba(129,140,248,.12));
color: rgba(255,255,255,.88);
font-size: 12px;
font-weight: 800;
text-align: center;
}
.landing-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
padding: 28px 0;
}
.landing-card,
.landing-compare,
.landing-final {
border-radius: 24px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.11);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
backdrop-filter: blur(16px);
}
.landing-card {
padding: 22px;
}
.landing-card h3 {
margin: 0 0 10px;
font-size: 20px;
}
.landing-card p,
.landing-step p,
.landing-compare p,
.landing-final p {
margin: 0;
color: rgba(255,255,255,.68);
line-height: 1.65;
font-size: 14px;
}
.landing-how {
padding: 34px 0;
}
.landing-section-title {
margin: 0 0 18px;
font-size: clamp(26px, 4vw, 44px);
letter-spacing: 0;
}
.landing-steps {
display: grid;
grid-template-columns: repeat(5, minmax(0, 1fr));
gap: 10px;
}
.landing-step {
padding: 18px;
border-radius: 20px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.10);
}
.landing-step strong {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
margin-bottom: 12px;
border-radius: 12px;
color: white;
background: linear-gradient(135deg, #a78bfa, #818cf8);
}
.landing-compare-wrap {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
padding: 28px 0;
}
.landing-compare {
padding: 24px;
}
.landing-compare.before { border-color: rgba(248,113,113,.22); }
.landing-compare.after { border-color: rgba(167,139,250,.38); }
.landing-compare h3 {
margin: 0 0 10px;
font-size: 14px;
color: #c4b5fd;
text-transform: uppercase;
}
.landing-compare strong {
display: block;
color: white;
font-size: clamp(24px, 3vw, 36px);
line-height: 1.2;
}
.landing-final {
margin: 30px auto 54px;
padding: 34px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
}
.landing-final h2 {
margin: 0;
font-size: clamp(30px, 5vw, 58px);
line-height: 1.12;
letter-spacing: 0;
}
@media (max-width: 980px) {
.landing-hero { grid-template-columns: 1fr; min-height: auto; padding-top: 36px; }
.landing-preview { min-height: 360px; }
.landing-grid,
.landing-steps,
.landing-compare-wrap,
.landing-final { grid-template-columns: 1fr; }
}
@media (max-width: 640px) {
.landing-section { width: min(100% - 28px, 1180px); }
.landing-actions { flex-direction: column; align-items: stretch; }
.landing-primary,
.landing-secondary { width: 100%; }
.landing-preview { min-height: 300px; border-radius: 22px; }
.landing-flow { grid-template-columns: 1fr; }
.landing-final { padding: 24px; }
}
.soaviz-landing {
width: min(1180px, calc(100% - 40px));
margin: 0 auto;
padding: 58px 0 56px;
}
.soaviz-landing .landing-copy {
max-width: 650px;
margin: 0;
color: var(--text, #fff);
font-size: inherit;
line-height: normal;
}
.landing-subtitle {
max-width: 620px;
margin: 22px 0 0;
color: rgba(255,255,255,.72);
font-size: clamp(16px, 2vw, 20px);
line-height: 1.75;
}
.landing-btn {
min-height: 54px;
padding: 0 22px;
border-radius: 999px;
font-family: inherit;
font-size: 15px;
font-weight: 900;
cursor: pointer;
transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background .18s ease;
}
.landing-btn:hover {
transform: translateY(-2px);
}
.landing-btn.primary {
border: 0;
color: white;
background: linear-gradient(135deg, #a78bfa, #818cf8);
box-shadow: 0 20px 54px rgba(167,139,250,.34);
}
.landing-btn.secondary {
color: rgba(255,255,255,.86);
background: rgba(255,255,255,.07);
border: 1px solid rgba(255,255,255,.14);
}
.landing-visual-card {
border-radius: 30px;
padding: 18px;
background:
radial-gradient(circle at 24% 16%, rgba(167,139,250,.28), transparent 36%),
linear-gradient(135deg, rgba(255,255,255,.09), rgba(255,255,255,.035));
border: 1px solid rgba(255,255,255,.12);
box-shadow: 0 32px 90px rgba(0,0,0,.42);
}
.mock-window {
overflow: hidden;
min-height: 420px;
border-radius: 24px;
background: rgba(7,6,18,.82);
border: 1px solid rgba(255,255,255,.12);
}
.mock-topbar {
display: flex;
gap: 8px;
padding: 16px;
border-bottom: 1px solid rgba(255,255,255,.1);
}
.mock-topbar span {
width: 10px;
height: 10px;
border-radius: 999px;
background: rgba(255,255,255,.24);
}
.mock-content {
display: grid;
gap: 12px;
padding: 26px;
}
.mock-content h3 {
margin: 0 0 8px;
font-size: 22px;
}
.mock-badge {
width: max-content;
padding: 6px 10px;
border-radius: 999px;
background: rgba(167,139,250,.18);
color: #c4b5fd;
font-size: 12px;
font-weight: 900;
}
.mock-version {
padding: 16px;
border-radius: 16px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.78);
font-weight: 800;
}
.mock-version.selected {
color: white;
border-color: rgba(167,139,250,.7);
background: linear-gradient(135deg, rgba(167,139,250,.24), rgba(129,140,248,.12));
box-shadow: 0 20px 50px rgba(167,139,250,.18);
}
.landing-value-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 14px;
padding: 28px 0;
}
.landing-value-card,
.ba-card,
.landing-final-cta {
border-radius: 24px;
background: rgba(255,255,255,.06);
border: 1px solid rgba(255,255,255,.11);
box-shadow: 0 24px 70px rgba(0,0,0,.24);
backdrop-filter: blur(16px);
}
.landing-value-card {
padding: 22px;
}
.landing-value-card h3 {
margin: 0 0 10px;
font-size: 20px;
}
.landing-value-card p,
.ba-card p {
margin: 0;
color: rgba(255,255,255,.68);
line-height: 1.65;
font-size: 14px;
}
.soaviz-landing .landing-how h2 {
margin: 0 0 18px;
font-size: clamp(26px, 4vw, 44px);
letter-spacing: 0;
}
.soaviz-landing .landing-steps span {
display: block;
padding: 18px;
border-radius: 18px;
background: rgba(255,255,255,.055);
border: 1px solid rgba(255,255,255,.1);
color: rgba(255,255,255,.8);
font-weight: 800;
}
.landing-before-after {
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 14px;
align-items: center;
padding: 28px 0;
}
.ba-card {
padding: 24px;
}
.ba-card strong {
display: block;
margin-bottom: 10px;
color: #c4b5fd;
font-size: 14px;
text-transform: uppercase;
}
.ba-card.before { border-color: rgba(248,113,113,.22); }
.ba-card.after { border-color: rgba(167,139,250,.38); }
.ba-arrow {
color: #c4b5fd;
font-size: 32px;
font-weight: 900;
}
.landing-final-cta {
margin-top: 28px;
padding: 34px;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 20px;
align-items: center;
}
.landing-final-cta h2 {
margin: 0;
font-size: clamp(30px, 5vw, 58px);
line-height: 1.12;
letter-spacing: 0;
}
@media (max-width: 980px) {
.landing-value-grid,
.landing-before-after,
.landing-final-cta { grid-template-columns: 1fr; }
.ba-arrow { transform: rotate(90deg); justify-self: center; }
.mock-window { min-height: 340px; }
}
@media (max-width: 640px) {
.soaviz-landing { width: min(100% - 28px, 1180px); padding-top: 36px; }
.landing-btn { width: 100%; }
.landing-final-cta { padding: 24px; }
}
/* soaviz landing final art direction — v3 redesign */
.soaviz-landing {
width: 100%;
margin: 0;
padding: 80px clamp(20px, 5vw, 72px) 96px;
color: var(--text, #f0eff8);
position: relative;
overflow: hidden;
}
.soaviz-landing::before {
content: "";
position: absolute;
inset: 0;
background:
radial-gradient(ellipse 80% 50% at 15% -10%, rgba(147,120,250,0.18), transparent 52%),
radial-gradient(ellipse 55% 35% at 85% 8%, rgba(129,140,248,0.12), transparent 44%),
radial-gradient(ellipse 45% 30% at 55% 95%, rgba(167,139,250,0.06), transparent 55%),
#06050F;
pointer-events: none;
z-index: 0;
}
.soaviz-landing > * { position: relative; z-index: 1; }
.soaviz-landing .landing-hero {
max-width: 1280px;
margin: 0 auto;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(300px, 0.9fr);
gap: 56px;
align-items: center;
min-height: auto;
padding: 0;
}
.soaviz-landing .landing-kicker {
display: inline-flex;
align-items: center;
gap: 7px;
margin: 0 0 20px;
padding: 7px 14px;
border-radius: 999px;
background: rgba(167,139,250,0.12);
border: 1px solid rgba(167,139,250,0.32);
color: #c4b5fd;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
}
.soaviz-landing .landing-kicker::before {
content: "";
display: inline-block;
width: 6px; height: 6px;
border-radius: 50%;
background: #a78bfa;
box-shadow: 0 0 8px rgba(167,139,250,0.9);
animation: kicker-pulse 2.4s ease-in-out infinite;
}
@keyframes kicker-pulse {
0%, 100% { opacity: 1; transform: scale(1); }
50% { opacity: 0.45; transform: scale(0.65); }
}
.soaviz-landing .landing-title {
margin: 0 0 20px;
max-width: none;
font-size: clamp(44px, 6.5vw, 84px);
line-height: 0.97;
letter-spacing: -0.02em;
font-weight: 900;
font-family: var(--font-display);
}
.soaviz-landing .landing-title em {
font-style: normal;
background: linear-gradient(135deg, #c4b5fd 0%, #a78bfa 45%, #818cf8 100%);
-webkit-background-clip: text;
-webkit-text-fill-color: transparent;
background-clip: text;
}
.soaviz-landing .landing-subtitle {
max-width: 580px;
margin: 0;
color: rgba(240,239,248,0.68);
font-size: clamp(15px, 1.4vw, 18px);
line-height: 1.72;
}
.soaviz-landing .landing-actions {
margin-top: 28px;
display: flex;
flex-wrap: wrap;
gap: 12px;
align-items: center;
}
.soaviz-landing .landing-btn {
min-height: 50px;
padding: 0 24px;
border-radius: 999px;
font-size: 14px;
font-weight: 700;
cursor: pointer;
transition: transform 0.2s var(--ease-spring), box-shadow 0.2s ease, background 0.18s ease;
border: 0;
}
.soaviz-landing .landing-btn.primary {
color: white;
background: linear-gradient(135deg, #a78bfa 0%, #818cf8 100%);
box-shadow: 0 0 0 1px rgba(167,139,250,0.3), 0 20px 48px rgba(167,139,250,0.36);
}
.soaviz-landing .landing-btn.primary:hover {
transform: translateY(-2px);
box-shadow: 0 0 0 1px rgba(167,139,250,0.45), 0 28px 56px rgba(167,139,250,0.46);
}
.soaviz-landing .landing-btn.secondary {
color: rgba(240,239,248,0.86);
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.13);
}
.soaviz-landing .landing-btn.secondary:hover {
transform: translateY(-2px);
background: rgba(255,255,255,0.10);
border-color: rgba(167,139,250,0.36);
}
.soaviz-landing .landing-note {
margin-top: 14px;
color: rgba(196,181,253,0.6);
font-size: 12.5px;
font-weight: 500;
display: flex;
align-items: center;
gap: 6px;
}
.soaviz-landing .landing-note::before {
content: "✦";
font-size: 9px;
color: #a78bfa;
}
.soaviz-landing .landing-visual-card {
border-radius: 32px;
padding: 16px;
background: linear-gradient(145deg, rgba(167,139,250,0.12) 0%, rgba(255,255,255,0.04) 60%);
border: 1px solid rgba(167,139,250,0.22);
box-shadow: 0 0 0 1px rgba(255,255,255,0.05), 0 40px 100px rgba(0,0,0,0.52), inset 0 1px 0 rgba(255,255,255,0.08);
position: relative;
}
.soaviz-landing .landing-visual-card::before {
content: "";
position: absolute;
top: -1px; left: 20%; right: 20%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(167,139,250,0.7), transparent);
border-radius: 999px;
}
.soaviz-landing .mock-window {
overflow: hidden;
border-radius: 22px;
background: rgba(9,8,20,0.94);
border: 1px solid rgba(255,255,255,0.10);
}
.soaviz-landing .mock-topbar {
height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
padding: 0 16px;
background: rgba(255,255,255,0.03);
border-bottom: 1px solid rgba(255,255,255,0.07);
}
.soaviz-landing .mock-topbar-dots { display: flex; gap: 6px; }
.soaviz-landing .mock-topbar span { width: 10px; height: 10px; border-radius: 50%; }
.soaviz-landing .mock-topbar span:nth-child(1) { background: rgba(248,113,113,0.55); }
.soaviz-landing .mock-topbar span:nth-child(2) { background: rgba(251,191,36,0.50); }
.soaviz-landing .mock-topbar span:nth-child(3) { background: rgba(52,211,153,0.50); }
.soaviz-landing .mock-topbar-label { font-size: 11px; color: rgba(255,255,255,0.30); font-weight: 600; }
.soaviz-landing .mock-content { display: block; padding: 24px 24px 28px; }
.soaviz-landing .mock-badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 5px 11px;
border-radius: 999px;
color: #c4b5fd;
background: rgba(167,139,250,0.14);
border: 1px solid rgba(167,139,250,0.28);
font-size: 11px;
font-weight: 700;
letter-spacing: 0.04em;
}
.soaviz-landing .mock-content h3 {
margin: 14px 0 18px;
font-size: 22px;
font-weight: 700;
letter-spacing: -0.01em;
}
.soaviz-landing .mock-version {
margin-top: 8px;
padding: 13px 16px;
border-radius: 14px;
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
color: rgba(240,239,248,0.60);
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
font-size: 13px;
font-weight: 600;
}
.soaviz-landing .mock-version-tag {
font-size: 11px;
padding: 2px 8px;
border-radius: 999px;
background: rgba(255,255,255,0.08);
color: rgba(255,255,255,0.40);
font-weight: 500;
}
.soaviz-landing .mock-version.selected {
color: white;
border-color: rgba(167,139,250,0.55);
background: linear-gradient(135deg, rgba(167,139,250,0.18), rgba(129,140,248,0.08));
box-shadow: 0 0 0 1px rgba(167,139,250,0.28), 0 8px 24px rgba(167,139,250,0.14);
}
.soaviz-landing .mock-version.selected .mock-version-tag {
background: rgba(167,139,250,0.25);
color: #c4b5fd;
}
.soaviz-landing .landing-value-grid {
max-width: 1280px;
margin: 72px auto 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 16px;
padding: 0;
}
.soaviz-landing .landing-value-card {
padding: 28px 26px;
border-radius: 24px;
background: var(--bg-card);
border: 1px solid var(--border-strong);
box-shadow: 0 4px 24px rgba(0,0,0,0.22);
position: relative;
overflow: hidden;
transition: transform 0.22s var(--ease-out), border-color 0.22s, box-shadow 0.22s;
}
.soaviz-landing .landing-value-card::before {
content: "";
position: absolute;
top: 0; left: 0; right: 0;
height: 2px;
background: linear-gradient(90deg, transparent, rgba(167,139,250,0.6), transparent);
opacity: 0;
transition: opacity 0.22s;
}
.soaviz-landing .landing-value-card:hover {
transform: translateY(-3px);
border-color: rgba(167,139,250,0.28);
box-shadow: 0 16px 44px rgba(0,0,0,0.30), 0 0 0 1px rgba(167,139,250,0.14);
}
.soaviz-landing .landing-value-card:hover::before { opacity: 1; }
.soaviz-landing .landing-value-card-icon {
font-size: 26px;
margin-bottom: 14px;
display: block;
line-height: 1;
}
.soaviz-landing .landing-value-card h3 {
margin: 0 0 10px;
font-size: 18px;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--text);
}
.soaviz-landing .landing-value-card p {
margin: 0;
color: var(--text-dim);
line-height: 1.68;
font-size: 13.5px;
}
.soaviz-landing .landing-how,
.soaviz-landing .landing-final-cta {
max-width: 1280px;
margin: 80px auto 0;
padding: 0;
text-align: center;
}
.soaviz-landing .landing-how-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
margin-bottom: 14px;
font-size: 11px;
font-weight: 700;
letter-spacing: 0.10em;
text-transform: uppercase;
color: var(--accent-3, #c4b5fd);
}
.soaviz-landing .landing-how h2 {
margin: 0 0 40px;
font-size: clamp(28px, 4vw, 46px);
letter-spacing: -0.02em;
font-family: var(--font-display);
}
.soaviz-landing .landing-steps {
margin-top: 0;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 0;
position: relative;
}
.soaviz-landing .landing-steps::before {
content: "";
position: absolute;
top: 27px; left: 10%; right: 10%;
height: 1px;
background: linear-gradient(90deg, transparent, rgba(167,139,250,0.25), transparent);
z-index: 0;
}
.soaviz-landing .landing-steps span {
display: flex;
flex-direction: column;
align-items: center;
gap: 12px;
padding: 0 8px;
position: relative;
z-index: 1;
}
.soaviz-landing .landing-steps span strong {
display: grid;
place-items: center;
width: 54px; height: 54px;
border-radius: 50%;
background: linear-gradient(135deg, rgba(167,139,250,0.22), rgba(129,140,248,0.10));
border: 1px solid rgba(167,139,250,0.35);
color: #c4b5fd;
font-size: 15px;
font-weight: 700;
box-shadow: 0 0 20px rgba(167,139,250,0.12);
}
.soaviz-landing .landing-steps span em {
font-style: normal;
font-size: 12px;
font-weight: 600;
color: var(--text-dim);
text-align: center;
line-height: 1.4;
}
.soaviz-landing .landing-before-after {
max-width: 900px;
margin: 72px auto 0;
display: grid;
grid-template-columns: 1fr auto 1fr;
gap: 20px;
align-items: center;
padding: 0;
}
.soaviz-landing .ba-card {
padding: 28px 30px;
border-radius: 24px;
background: var(--bg-card);
border: 1px solid var(--border-strong);
}
.soaviz-landing .ba-card.before {
border-color: rgba(248,113,113,0.20);
background: rgba(248,113,113,0.04);
}
.soaviz-landing .ba-card.after {
border-color: rgba(167,139,250,0.30);
background: rgba(167,139,250,0.06);
}
.soaviz-landing .ba-card strong {
display: inline-flex;
align-items: center;
gap: 5px;
color: var(--text-faint);
font-size: 10px;
letter-spacing: 0.12em;
text-transform: uppercase;
margin-bottom: 10px;
}
.soaviz-landing .ba-card.before strong { color: rgba(248,113,113,0.75); }
.soaviz-landing .ba-card.after strong { color: #c4b5fd; }
.soaviz-landing .ba-card p {
margin: 0;
color: rgba(240,239,248,0.88);
font-size: 18px;
font-weight: 700;
line-height: 1.4;
}
.soaviz-landing .ba-card.before p { color: rgba(240,239,248,0.50); text-decoration: line-through; }
.soaviz-landing .ba-arrow {
display: flex;
align-items: center;
justify-content: center;
width: 44px; height: 44px;
border-radius: 50%;
background: rgba(167,139,250,0.14);
border: 1px solid rgba(167,139,250,0.32);
color: #a78bfa;
font-size: 18px;
font-weight: 900;
flex-shrink: 0;
}
.soaviz-landing .landing-final-cta {
max-width: 680px;
margin: 80px auto 0;
padding: 56px 48px;
border-radius: 32px;
background:
radial-gradient(circle at 50% 0%, rgba(167,139,250,0.16), transparent 55%),
rgba(255,255,255,0.035);
border: 1px solid rgba(167,139,250,0.25);
box-shadow: 0 0 0 1px rgba(255,255,255,0.04), 0 40px 80px rgba(0,0,0,0.35), inset 0 1px 0 rgba(255,255,255,0.06);
text-align: center;
display: block;
}
.soaviz-landing .landing-final-cta h2 {
margin: 0;
font-size: clamp(26px, 4vw, 42px);
letter-spacing: -0.02em;
line-height: 1.12;
font-family: var(--font-display);
}
.soaviz-landing .landing-final-cta .landing-btn {
margin-top: 24px;
min-height: 54px;
padding: 0 32px;
font-size: 15px;
}
.soaviz-landing .landing-final-note {
margin-top: 14px;
font-size: 13px;
color: rgba(196,181,253,0.45);
}
@media (max-width: 980px) {
.soaviz-landing .landing-hero,
.soaviz-landing .landing-value-grid {
grid-template-columns: 1fr;
}
.soaviz-landing .landing-before-after {
grid-template-columns: 1fr;
max-width: 480px;
}
.soaviz-landing .ba-arrow {
margin: 0 auto;
transform: rotate(90deg);
}
.soaviz-landing .landing-steps {
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.soaviz-landing .landing-steps::before { display: none; }
}
@media (max-width: 640px) {
.soaviz-landing {
padding: 38px 18px 56px;
overflow-x: hidden;
}
.soaviz-landing .landing-hero { gap: 28px; }
.soaviz-landing .landing-title {
margin-top: 10px;
font-size: clamp(36px, 11vw, 50px);
line-height: 0.98;
}
.soaviz-landing .landing-subtitle { font-size: 14.5px; line-height: 1.65; }
.soaviz-landing .landing-actions { flex-direction: column; align-items: stretch; gap: 10px; }
.soaviz-landing .landing-btn { width: 100%; min-height: 52px; text-align: center; }
.soaviz-landing .landing-visual-card { padding: 12px; border-radius: 22px; }
.soaviz-landing .mock-content { padding: 18px; }
.soaviz-landing .mock-content h3 { font-size: 18px; }
.soaviz-landing .landing-value-grid { margin-top: 40px; gap: 12px; }
.soaviz-landing .landing-value-card { padding: 20px; border-radius: 18px; }
.soaviz-landing .landing-how { margin-top: 48px; }
.soaviz-landing .landing-steps { grid-template-columns: 1fr; gap: 10px; }
.soaviz-landing .landing-steps span { flex-direction: row; text-align: left; gap: 14px; padding: 0; }
.soaviz-landing .landing-steps span strong { width: 44px; height: 44px; flex-shrink: 0; font-size: 14px; border-radius: 14px; }
.soaviz-landing .landing-before-after { margin-top: 48px; gap: 12px; }
.soaviz-landing .ba-card { padding: 20px; border-radius: 18px; }
.soaviz-landing .ba-card p { font-size: 16px; }
.soaviz-landing .landing-final-cta { margin-top: 48px; padding: 36px 24px; border-radius: 24px; }
.soaviz-landing .ba-arrow {
transform: rotate(90deg);
}
}
/* ═══════════════════════════════════════════════════════════════
MOBILE REDESIGN ≤768px — Senior Dev Pass
드로어 사이드바 · 바텀 네비 · Safe-area · 터치 타겟 · 바텀시트
═══════════════════════════════════════════════════════════════ */
/* Backdrop (항상 DOM에 존재, 모바일 드로어 오픈 시에만 활성화) */
.mobile-nav-backdrop {
display: none;
position: fixed;
inset: 0;
z-index: 299;
background: rgba(0,0,0,0);
transition: background 0.28s ease;
-webkit-tap-highlight-color: transparent;
}
@media (max-width: 768px) {
/* ── 1. LAYOUT ── */
.layout,
.layout.sidebar-collapsed {
grid-template-columns: 0 1fr !important;
padding-top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)) !important;
}
/* ── 2. SIDEBAR → DRAWER ── */
.sidebar {
position: fixed !important;
left: 0 !important;
top: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)) !important;
bottom: 0 !important;
width: min(280px, 82vw) !important;
z-index: 300 !important;
transform: translateX(-100%) !important;
transition: transform 0.28s cubic-bezier(0.4,0,0.2,1), box-shadow 0.28s ease !important;
overflow-y: auto !important;
overflow-x: hidden !important;
-webkit-overflow-scrolling: touch;
padding: 12px 8px calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 24px) !important;
display: flex !important;
border-right: 1px solid var(--border) !important;
}
body.mobile-nav-open .sidebar {
transform: translateX(0) !important;
box-shadow: 6px 0 32px rgba(0,0,0,0.55) !important;
}
body.mobile-nav-open .mobile-nav-backdrop {
display: block;
background: rgba(0,0,0,0.55);
backdrop-filter: blur(3px);
-webkit-backdrop-filter: blur(3px);
}
/* ── 3. NAV ITEMS in drawer ── */
.nav-item {
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
gap: 10px !important;
padding: 11px 12px !important;
font-size: 13px !important;
color: var(--text-faint) !important;
min-height: 44px !important;
border-radius: var(--r-sm) !important;
white-space: nowrap !important;
}
.nav-item .icon {
width: 18px !important; height: 18px !important;
margin: 0 !important; flex-shrink: 0 !important;
}
.nav-section-label {
font-size: 10px !important;
text-align: left !important;
padding-inline: 8px !important;
}
.nav-pill { display: inline-flex !important; }
.nav-upgrade { font-size: 11px !important; padding: 10px 12px !important; margin: 8px 4px 0 !important; }
/* ── 4. TOPBAR: minimal + safe-area ── */
.topbar {
padding: env(safe-area-inset-top, 0px) 12px 0 !important;
height: calc(var(--topbar-h) + env(safe-area-inset-top, 0px)) !important;
}
.brand-sub { display: none !important; }
.mini-player { display: none !important; }
.kbd { display: none !important; }
#top-docs-btn { display: none !important; }
.pro-upgrade-btn { display: none !important; }
.avatar { display: none !important; }
button[aria-label="알림"] { display: none !important; }
.top-logout-btn { display: none !important; }
.tbb-label { display: none !important; }
/* ── 5. BOTTOM NAV: 활성화 + safe-area ── */
.bottom-nav {
display: flex !important;
padding-bottom: env(safe-area-inset-bottom, 0px) !important;
height: calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px)) !important;
}
.bn-item { font-size: 9.5px !important; gap: 3px !important; padding: 6px 4px !important; }
#bn-menu-btn.active { color: var(--accent); }
/* ── 6. MAIN: bottom nav clearance + full bleed ── */
.main {
padding: 20px 16px calc(var(--bottom-nav-h) + env(safe-area-inset-bottom, 0px) + 24px) !important;
max-width: 100% !important;
min-width: 0 !important;
overflow-x: hidden !important;
}
/* ── 7. PAGE HEADS ── */
.page-head { margin-bottom: 20px !important; }
.page-head h1 { font-size: clamp(20px, 5.5vw, 24px) !important; line-height: 1.2 !important; }
.page-head p { font-size: 13px !important; }
/* ── 8. iOS ZOOM 방지 + 터치타겟 ── */
input[type="text"], input[type="email"], input[type="password"],
input[type="search"], input[type="number"], input[type="url"],
select, textarea { font-size: 16px !important; }
select { min-height: 44px !important; }
button:not(.icon-btn):not(.bn-item):not(.mp-btn):not(.sidebar-toggle):not(.story-mode-btn):not(.pipeline-tab) {
min-height: 40px;
}
/* ── 9. FORMS ── */
.url-form { flex-direction: column !important; gap: 8px !important; }
.url-form input, .url-form .url-submit { width: 100% !important; box-sizing: border-box !important; }
.next-btn { width: 100% !important; justify-content: center !important; }
.stage-body { padding: 16px !important; }
.ba-toggle { width: 100% !important; }
.ba-toggle button { flex: 1 !important; justify-content: center !important; }
.dropzone { padding: 32px 16px !important; }
/* ── 10. 샷리스트 2단 → 1단 ── */
.shotlist-grid {
grid-template-columns: 1fr !important;
min-height: unset !important;
}
.shotlist-grid > aside {
border-right: none !important;
border-bottom: 1px solid var(--border) !important;
max-height: 190px !important;
}
.shotlist-grid > aside #shotlist-proj-list,
.shotlist-grid > aside #pl-sl-proj-list {
max-height: 110px !important;
}
/* ── 11. TAB BARS: 가로 스크롤 ── */
.story-tabs-bar {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
flex-wrap: nowrap !important;
width: 100% !important;
padding-bottom: 2px !important;
}
.story-tabs-bar::-webkit-scrollbar { display: none !important; }
#pipeline-tab-bar {
display: flex !important;
overflow-x: auto !important;
-webkit-overflow-scrolling: touch !important;
scrollbar-width: none !important;
flex-wrap: nowrap !important;
width: 100% !important;
}
#pipeline-tab-bar::-webkit-scrollbar { display: none !important; }
/* ── 12. 2열 그리드 → 1열 ── */
.admin-row { grid-template-columns: 1fr !important; }
.admin-kpi-grid { grid-template-columns: repeat(2,1fr) !important; }
.admin-plan-grid { grid-template-columns: repeat(2,1fr) !important; }
.cn-shell { grid-template-columns: 1fr !important; }
.cmp-shell { grid-template-columns: 1fr !important; }
/* ── 13. 워크플로우 빌더 1열 ── */
.pl-wf-body { grid-template-columns: 1fr !important; }
.pl-wf-list {
max-height: 160px !important;
border-right: none !important;
border-bottom: 1px solid var(--border) !important;
}
/* ── 14. 모달 → 바텀시트 ── */
.vault-modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
.vault-modal-backdrop .vault-modal {
width: 100% !important; max-width: 100% !important;
max-height: 88vh !important;
border-radius: 20px 20px 0 0 !important;
margin: 0 !important;
}
.qj-backdrop { align-items: flex-end !important; padding: 0 !important; }
.qj-backdrop .qj-modal {
width: 100% !important; max-width: 100% !important;
max-height: 92vh !important;
border-radius: 20px 20px 0 0 !important;
margin: 0 !important;
}
.bible-modal-backdrop { align-items: flex-end !important; padding: 0 !important; }
.bible-modal-backdrop .bible-modal {
width: 100% !important; max-width: 100% !important;
max-height: 92vh !important;
border-radius: 20px 20px 0 0 !important;
margin: 0 !important;
}
.pl-wf-modal {
width: 100% !important; max-width: 100% !important;
max-height: 92vh !important;
border-radius: 20px 20px 0 0 !important;
bottom: 0 !important; top: auto !important;
left: 0 !important; right: 0 !important;
}
}
/* ════════════════════════════════════════════════════════════
CREDITS PAGE — 요금 안내
════════════════════════════════════════════════════════════ */
.credits-plans-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
gap: 18px;
margin: 28px 0;
}
.credits-plan-card {
background: var(--bg-1);
border: 1.5px solid var(--border);
border-radius: 14px;
padding: 24px 20px;
display: flex;
flex-direction: column;
gap: 16px;
position: relative;
transition: border-color .2s;
}
.credits-plan-card:hover {
border-color: var(--accent);
}
.credits-plan-card.featured {
border-color: var(--accent);
box-shadow: 0 0 0 3px color-mix(in srgb, var(--accent) 14%, transparent);
}
.credits-plan-tag {
position: absolute;
top: -12px;
left: 50%;
transform: translateX(-50%);
background: var(--accent);
color: #fff;
font-size: 11px;
font-weight: 700;
padding: 3px 12px;
border-radius: 20px;
letter-spacing: .04em;
}
.credits-plan-header {
text-align: center;
}
.credits-plan-badge {
display: inline-block;
font-size: 11px;
font-weight: 700;
letter-spacing: .08em;
padding: 3px 10px;
border-radius: 20px;
margin-bottom: 10px;
}
.credits-plan-badge.free { background: var(--bg-2); color: var(--text-dim); }
.credits-plan-badge.standard { background: #e8f4ff; color: #2979cc; }
.credits-plan-badge.pro { background: linear-gradient(90deg,#7c3aed,#a855f7); color: #fff; }
.credits-plan-badge.team { background: linear-gradient(90deg,#059669,#10b981); color: #fff; }
.credits-plan-price {
margin: 6px 0 4px;
}
.credits-price-amount {
font-size: 28px;
font-weight: 700;
color: var(--text);
}
.credits-price-period {
font-size: 13px;
color: var(--text-dim);
margin-left: 2px;
}
.credits-plan-desc {
font-size: 12px;
color: var(--text-dim);
margin: 0;
}
.credits-plan-features {
list-style: none;
padding: 0;
margin: 0;
flex: 1;
font-size: 13px;
line-height: 1.6;
color: var(--text);
}
.credits-plan-features li.dim {
color: var(--text-dim);
opacity: .55;
}
.credits-plan-cta {
width: 100%;
padding: 10px 0;
border-radius: 8px;
font-size: 13px;
font-weight: 600;
cursor: pointer;
border: 1.5px solid var(--border);
background: var(--bg-2);
color: var(--text);
transition: background .15s, color .15s;
}
.credits-plan-cta:hover {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.credits-plan-cta.primary {
background: var(--accent);
color: #fff;
border-color: var(--accent);
}
.credits-plan-cta.primary:hover {
opacity: .88;
}
.credits-plan-cta.secondary {
opacity: .55;
cursor: default;
pointer-events: none;
}
.credits-notice {
text-align: center;
color: var(--text-dim);
font-size: 13px;
margin-top: 12px;
padding: 16px;
background: var(--bg-1);
border-radius: 10px;
border: 1px solid var(--border);
}
.credits-notice p { margin: 4px 0; }
/* ════════════════════════════════════════════════════════════
MOBILE APP SHELL — 768px 이하 전용
데스크톱 UI는 절대 건드리지 않음
════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {
html, body {
width: 100%;
max-width: 100%;
overflow-x: hidden;
background: #06050F;
-webkit-text-size-adjust: 100%;
}
*, *::before, *::after {
box-sizing: border-box;
min-width: 0;
}
.layout { display: none !important; }
.sidebar, .mobile-nav-backdrop { display: none !important; }
.topbar {
height: 52px;
padding: 0 12px;
border-bottom: 1px solid rgba(255,255,255,0.08);
}
.brand-sub, .kbd,
.top-logout-btn span,
.pro-upgrade-btn .pro-label { display: none !important; }
/* Shell */
#mobile-app-shell {
display: block;
min-height: 100dvh;
padding-top: 52px;
padding-bottom: calc(76px + env(safe-area-inset-bottom));
background:
radial-gradient(circle at 10% -5%, rgba(167,139,250,0.12), transparent 35%),
#06050F;
}
.mobile-screen {
display: none;
padding: 18px 16px 24px;
}
.mobile-screen.active { display: block; }
/* Tab bar */
.mobile-tabbar {
position: fixed;
left: 0; right: 0; bottom: 0;
z-index: 300;
display: grid;
grid-template-columns: repeat(5, 1fr);
gap: 4px;
padding: 8px 8px calc(8px + env(safe-area-inset-bottom));
background: rgba(8,8,16,0.94);
backdrop-filter: blur(20px);
border-top: 1px solid rgba(255,255,255,0.08);
}
.mobile-tab {
min-height: 50px;
border-radius: 14px;
display: grid;
place-items: center;
gap: 2px;
color: var(--text-faint);
font-size: 10px;
font-weight: 700;
border: none;
background: transparent;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-tab.active {
color: white;
background: rgba(167,139,250,0.16);
box-shadow: inset 0 0 0 1px rgba(167,139,250,0.20);
}
.mobile-tab-ic { font-size: 17px; line-height: 1; }
/* Typography */
.mobile-page-title {
margin: 0;
font-size: 26px;
line-height: 1.12;
letter-spacing: -0.045em;
font-weight: 800;
}
.mobile-page-sub {
margin: 8px 0 0;
color: var(--text-dim);
font-size: 13px;
line-height: 1.55;
}
.mobile-section { margin-top: 18px; }
.mobile-section-title {
margin: 0 0 10px;
font-size: 14px;
font-weight: 800;
color: var(--text);
}
/* Cards */
.mobile-card {
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.035);
border-radius: 22px;
padding: 16px;
box-shadow: 0 12px 32px rgba(0,0,0,0.28);
text-align: left;
color: var(--text);
cursor: pointer;
width: 100%;
-webkit-tap-highlight-color: transparent;
}
.mobile-card + .mobile-card { margin-top: 12px; }
.mobile-hero-card {
padding: 20px;
border-radius: 26px;
background:
radial-gradient(circle at 0% 0%, rgba(167,139,250,0.22), transparent 45%),
rgba(255,255,255,0.045);
border: 1px solid rgba(167,139,250,0.20);
}
/* Buttons */
.mobile-primary-btn {
width: 100%;
min-height: 54px;
border-radius: 999px;
background: linear-gradient(135deg, var(--accent), var(--accent-2, #6366F1));
color: white;
font-size: 15px;
font-weight: 800;
box-shadow: 0 16px 40px rgba(167,139,250,0.28);
border: none;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-secondary-btn {
width: 100%;
min-height: 48px;
border-radius: 16px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.09);
color: var(--text);
font-size: 14px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-sticky-cta {
position: sticky;
bottom: calc(84px + env(safe-area-inset-bottom));
z-index: 60;
margin-top: 18px;
}
/* ── 뒤로가기 버튼 ── */
.mobile-back-row {
display: flex;
align-items: center;
gap: 8px;
margin-bottom: 18px;
}
.mobile-back-btn {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 8px 14px 8px 10px;
border-radius: 999px;
background: rgba(255,255,255,0.07);
color: var(--text-dim);
font-size: 13px;
font-weight: 600;
border: 1px solid rgba(255,255,255,0.08);
transition: background 180ms, color 180ms;
-webkit-tap-highlight-color: transparent;
}
.mobile-back-btn:active { background: rgba(255,255,255,0.13); color: var(--text); }
.mobile-back-btn svg { flex-shrink: 0; }
/* ── 스토리 모드 탭 ── */
.mobile-story-tabs {
display: flex;
gap: 4px;
padding: 4px;
background: var(--bg-card);
border-radius: var(--r-xl);
border: 1px solid var(--border);
margin-bottom: 20px;
}
.mobile-story-tab {
flex: 1;
display: inline-flex;
align-items: center;
justify-content: center;
gap: 6px;
padding: 9px 12px;
border-radius: calc(var(--r-xl) - 2px);
font-size: 13px;
font-weight: 600;
color: var(--text-faint);
transition: background 200ms, color 200ms, box-shadow 200ms;
}
.mobile-story-tab.active {
background: var(--bg-elev);
color: var(--text);
box-shadow: 0 1px 3px rgba(0,0,0,0.35);
}
.mobile-story-tab svg { flex-shrink: 0; }
/* ── 랜덤 아이디어 ── */
.mobile-dice-card {
background: linear-gradient(135deg, var(--accent-soft) 0%, rgba(167,139,250,0.06) 100%);
border: 1px solid rgba(167,139,250,0.2);
border-radius: var(--r-xl);
padding: 22px 20px;
text-align: center;
margin-bottom: 14px;
}
.mobile-dice-icon-wrap {
width: 60px; height: 60px;
margin: 0 auto 12px;
border-radius: 16px;
background: rgba(167,139,250,0.18);
display: grid;
place-items: center;
font-size: 28px;
}
.mobile-dice-icon-wrap.rolling { animation: mDiceRoll 0.45s linear infinite; }
@keyframes mDiceRoll {
0% { transform: rotate(0deg) scale(1); }
25% { transform: rotate(9deg) scale(1.06); }
75% { transform: rotate(-9deg) scale(1.06); }
100%{ transform: rotate(0deg) scale(1); }
}
.mobile-dice-result {
background: var(--bg-elev);
border: 1px solid var(--border);
border-radius: var(--r-lg);
padding: 16px;
margin-bottom: 14px;
text-align: left;
min-height: 76px;
}
.mobile-dice-result .idea-genre {
font-size: 10px; font-weight: 800; letter-spacing: .08em;
text-transform: uppercase; color: var(--accent); margin-bottom: 6px;
}
.mobile-dice-result .idea-text {
font-size: 15px; font-weight: 600; line-height: 1.55; color: var(--text);
}
.mobile-dice-result .idea-hook {
margin-top: 7px; font-size: 12px; color: var(--text-faint); line-height: 1.5;
}
.mobile-dice-roll-btn {
display: flex; align-items: center; justify-content: center; gap: 8px;
width: 100%; padding: 14px;
border-radius: var(--r-lg);
background: linear-gradient(135deg, var(--accent), var(--accent-2, #818cf8));
color: #fff; font-size: 15px; font-weight: 700;
box-shadow: 0 4px 18px rgba(167,139,250,0.3);
transition: opacity 180ms, transform 180ms;
}
.mobile-dice-roll-btn:active { opacity: .85; transform: scale(.98); }
.mobile-dice-use-btn {
display: flex; align-items: center; justify-content: center; gap: 6px;
width: 100%; padding: 12px; margin-top: 8px;
border-radius: var(--r-lg);
background: rgba(255,255,255,0.07);
border: 1px solid rgba(255,255,255,0.1);
color: var(--text); font-size: 13px; font-weight: 600;
transition: background 180ms;
}
.mobile-dice-use-btn:active { background: rgba(255,255,255,0.13); }
/* Chips */
.mobile-chip-row {
display: flex;
gap: 8px;
overflow-x: auto;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
scrollbar-width: none;
}
.mobile-chip-row::-webkit-scrollbar { display: none; }
.mobile-chip {
flex: 0 0 auto;
min-height: 36px;
padding: 0 12px;
border-radius: 999px;
color: var(--text-dim);
background: rgba(255,255,255,0.055);
border: 1px solid rgba(255,255,255,0.08);
font-size: 12px;
font-weight: 700;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-chip.active {
color: white;
background: rgba(167,139,250,0.20);
border-color: rgba(167,139,250,0.35);
}
/* Inputs */
.mobile-input, .mobile-select, .mobile-textarea {
width: 100%;
min-height: 48px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.10);
background: rgba(0,0,0,0.22);
color: var(--text);
padding: 13px 14px;
font-size: 16px;
outline: none;
}
.mobile-textarea {
min-height: 160px;
resize: vertical;
line-height: 1.55;
}
/* Layout helpers */
.mobile-grid-2 {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 10px;
}
.mobile-list { display: grid; gap: 12px; }
.mobile-scroll-x {
display: flex;
gap: 10px;
overflow-x: auto;
padding-bottom: 4px;
-webkit-overflow-scrolling: touch;
}
.mobile-scroll-x > * { flex: 0 0 auto; }
.desktop-only-on-mobile { display: none !important; }
/* Character sheet step flow */
.mobile-step-header {
display: flex;
align-items: center;
gap: 10px;
margin-bottom: 16px;
}
.mobile-step-num {
width: 28px; height: 28px;
border-radius: 50%;
background: rgba(167,139,250,0.20);
border: 1px solid rgba(167,139,250,0.35);
color: var(--accent);
font-size: 12px;
font-weight: 800;
display: grid;
place-items: center;
flex-shrink: 0;
}
.mobile-step-label {
font-size: 14px;
font-weight: 700;
color: var(--text);
}
.mobile-model-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 8px;
margin-top: 10px;
}
.mobile-model-card {
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.035);
border-radius: 16px;
padding: 12px;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
text-align: left;
}
.mobile-model-card.selected {
border-color: rgba(167,139,250,0.5);
background: rgba(167,139,250,0.12);
}
.mobile-model-card .mc-name {
font-weight: 700;
font-size: 13px;
color: var(--text);
}
.mobile-model-card .mc-cost {
font-size: 11px;
color: var(--accent);
font-weight: 700;
margin-top: 2px;
}
.mobile-model-card .mc-meta {
font-size: 10px;
color: var(--text-faint);
margin-top: 4px;
}
.mobile-model-card .mc-rec {
display: inline-block;
font-size: 9px;
font-weight: 800;
padding: 1px 5px;
border-radius: 4px;
background: rgba(167,139,250,0.20);
color: var(--accent);
margin-top: 4px;
}
/* Character sheet flow — upload card */
.mobile-upload-card {
width: 100%;
min-height: 168px;
border-radius: 22px;
border: 1.5px dashed rgba(255,255,255,0.16);
background: rgba(0,0,0,0.18);
overflow: hidden;
color: var(--text);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: border-color 0.15s;
}
.mobile-upload-card.has-image {
border-style: solid;
border-color: rgba(167,139,250,0.5);
}
.mobile-upload-card img {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: 20px;
}
/* Angle / option selector cards */
.mobile-option-card {
min-height: 64px;
padding: 12px 10px;
border-radius: 16px;
border: 1px solid rgba(255,255,255,0.09);
background: rgba(255,255,255,0.03);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
font-size: 12px;
font-weight: 700;
color: var(--text-dim);
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 4px;
transition: background 0.12s, border-color 0.12s, color 0.12s;
text-align: center;
}
.mobile-option-card.active {
color: white;
background: rgba(167,139,250,0.18);
border-color: rgba(167,139,250,0.42);
box-shadow: 0 0 0 1px rgba(167,139,250,0.18) inset;
}
/* model card — add .active alias for JS compatibility */
.mobile-model-card.active {
border-color: rgba(167,139,250,0.5);
background: rgba(167,139,250,0.12);
}
.mobile-model-card {
width: 100%;
min-height: 82px;
display: flex;
justify-content: space-between;
align-items: flex-start;
}
/* Section labels */
.mobile-label {
display: block;
margin: 14px 0 8px;
font-size: 12px;
font-weight: 800;
color: var(--text-dim);
text-transform: uppercase;
letter-spacing: 0.06em;
}
/* Result image cards */
.mobile-result-card {
overflow: hidden;
border-radius: 20px;
border: 1px solid rgba(255,255,255,0.08);
background: rgba(0,0,0,0.2);
}
.mobile-result-card img {
width: 100%;
display: block;
border-radius: 20px 20px 0 0;
}
.mobile-result-card-actions {
display: flex;
gap: 8px;
padding: 10px;
}
/* Disabled CTA */
.mobile-primary-btn:disabled,
.mobile-cta-btn:disabled {
opacity: 0.45;
filter: grayscale(0.5);
cursor: not-allowed;
}
/* Character selection mini-cards */
.mobile-character-mini-card {
width: 100%;
min-height: 78px;
padding: 14px;
border-radius: 18px;
display: flex;
align-items: center;
gap: 12px;
text-align: left;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.08);
color: var(--text);
cursor: pointer;
-webkit-tap-highlight-color: transparent;
transition: background 0.12s, border-color 0.12s;
}
.mobile-character-mini-card.active {
background: rgba(167,139,250,0.18);
border-color: rgba(167,139,250,0.42);
}
.mobile-character-avatar {
width: 46px;
height: 46px;
border-radius: 14px;
flex: 0 0 auto;
background: linear-gradient(135deg, rgba(167,139,250,0.35), rgba(129,140,248,0.18));
overflow: hidden;
display: grid;
place-items: center;
color: var(--accent);
font-weight: 900;
font-size: 18px;
}
.mobile-character-avatar img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* Library cards */
.mobile-library-card {
overflow: hidden;
border-radius: 20px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.08);
}
.mobile-library-thumb {
width: 100%;
aspect-ratio: 4 / 3;
background: rgba(0,0,0,0.28);
display: grid;
place-items: center;
color: var(--text-faint);
overflow: hidden;
}
.mobile-library-thumb img {
width: 100%;
height: 100%;
object-fit: cover;
}
.mobile-library-body {
padding: 13px;
}
.mobile-library-actions {
display: grid;
grid-template-columns: repeat(2, minmax(0,1fr));
gap: 8px;
margin-top: 12px;
}
/* Danger button */
.mobile-danger-btn {
width: 100%;
min-height: 44px;
border-radius: 14px;
background: rgba(248,113,113,0.10);
border: 1px solid rgba(248,113,113,0.25);
color: #fca5a5;
font-size: 13px;
font-weight: 800;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
/* Upload zone */
.mobile-upload-zone {
border: 2px dashed rgba(167,139,250,0.30);
border-radius: 20px;
padding: 32px 16px;
text-align: center;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.mobile-upload-zone.has-image {
border-style: solid;
border-color: rgba(167,139,250,0.50);
}
.mobile-upload-zone img {
width: 100%;
border-radius: 14px;
max-height: 200px;
object-fit: cover;
}
/* 4차 — Shot & Prompt cards */
.mobile-shot-card, .mobile-prompt-card {
border: 1px solid rgba(255,255,255,0.08);
background: rgba(255,255,255,0.045);
border-radius: 22px;
padding: 15px;
}
.mobile-shot-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 8px;
margin-bottom: 10px;
}
.mobile-shot-head span {
color: var(--accent);
font-size: 11px;
font-weight: 900;
letter-spacing: 0.06em;
flex-shrink: 0;
}
.mobile-shot-head small {
color: var(--text-faint);
font-size: 11px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.mobile-shot-card strong, .mobile-prompt-card strong {
display: block;
font-size: 15px;
line-height: 1.35;
}
.mobile-shot-card p, .mobile-prompt-card p {
margin: 8px 0 0;
color: var(--text-dim);
font-size: 13px;
line-height: 1.55;
}
.mobile-shot-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 10px;
}
.mobile-shot-meta span, .mobile-mini-badge {
display: inline-flex;
min-height: 24px;
align-items: center;
padding: 0 8px;
border-radius: 999px;
background: rgba(167,139,250,0.12);
color: var(--accent);
font-size: 10px;
font-weight: 800;
}
/* 4차 — Production tabs sticky */
.mobile-production-tabs {
position: sticky;
top: 58px;
z-index: 70;
padding: 6px 0 8px;
background: linear-gradient(180deg, #06050F 70%, rgba(6,5,15,0));
}
/* 4차 — Secondary btn active state */
.mobile-secondary-btn.active {
background: rgba(167,139,250,0.18);
border-color: rgba(167,139,250,0.38);
color: white;
}
/* 5차 — Shot workspace compact primary btn */
.mobile-primary-btn.compact {
min-height: 46px;
font-size: 13px;
box-shadow: 0 10px 24px rgba(167,139,250,0.20);
}
/* 5차 — Generated asset card */
.mobile-generated-asset-card {
overflow: hidden;
border-radius: 22px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.08);
}
.mobile-generated-asset-card.active {
border-color: rgba(52,211,153,0.48);
box-shadow: 0 0 0 1px rgba(52,211,153,0.18);
}
/* 5차 — Generated asset thumbnail */
.mobile-generated-thumb {
width: 100%;
aspect-ratio: 16 / 9;
background: rgba(0,0,0,0.30);
display: grid;
place-items: center;
color: var(--text-faint);
overflow: hidden;
}
.mobile-generated-thumb img,
.mobile-generated-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* 5차 — Sticky CTA disabled state */
.mobile-sticky-cta .mobile-primary-btn[disabled] {
opacity: 0.45;
cursor: not-allowed;
filter: grayscale(0.4);
}
/* 6차 — Bottom Sheet */
.mobile-bottom-sheet-backdrop {
display: none;
position: fixed; inset: 0; z-index: 200;
background: rgba(0,0,0,0.55);
}
.mobile-bottom-sheet-backdrop.open { display: block; }
.mobile-bottom-sheet {
position: fixed; bottom: 0; left: 0; right: 0; z-index: 201;
background: #12101F;
border-radius: 24px 24px 0 0;
border-top: 1px solid rgba(255,255,255,0.09);
padding: 14px 20px 32px;
transform: translateY(100%);
transition: transform 0.28s cubic-bezier(0.34,1.56,0.64,1);
}
.mobile-bottom-sheet.open { transform: translateY(0); }
.mobile-sheet-handle {
width: 36px; height: 4px;
background: rgba(255,255,255,0.15);
border-radius: 99px;
margin: 0 auto 16px;
}
/* 6차 — Cost card */
.mobile-cost-card {
display: flex; justify-content: space-between; align-items: center;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
border-radius: 12px; padding: 10px 14px;
}
.mobile-cost-label { font-size: 12px; color: var(--text-faint); }
.mobile-cost-value { font-size: 13px; font-weight: 800; color: var(--accent); }
.mobile-sheet-note {
font-size: 12px; color: var(--text-faint);
line-height: 1.5; margin: 0;
}
/* 6차 — Job card */
.mobile-job-card {
border-radius: 16px;
padding: 12px 14px;
margin-bottom: 8px;
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.07);
}
.mobile-job-card.running {
border-color: rgba(167,139,250,0.30);
background: rgba(167,139,250,0.07);
}
.mobile-job-card.completed {
border-color: rgba(52,211,153,0.25);
background: rgba(52,211,153,0.05);
}
.mobile-job-card.failed {
border-color: rgba(248,113,113,0.28);
background: rgba(248,113,113,0.05);
}
.mobile-job-card.cancelled {
opacity: 0.55;
}
/* 6차 — Progress bar */
.mobile-progress-track {
height: 4px; border-radius: 99px;
background: rgba(255,255,255,0.08);
overflow: hidden; margin: 6px 0;
}
.mobile-progress-fill {
height: 100%; border-radius: 99px;
background: linear-gradient(90deg, #8B5CF6, #6366F1);
transition: width 0.4s ease;
}
/* 6차 — Batch selected shot card */
.mobile-shot-card.batch-selected {
border-color: rgba(167,139,250,0.45);
background: rgba(167,139,250,0.08);
box-shadow: 0 0 0 1px rgba(167,139,250,0.20);
}
/* 7차 — Timeline Player */
.mobile-timeline-player {
background: #0d0d12;
border-radius: 14px;
overflow: hidden;
margin-bottom: 12px;
border: 1px solid rgba(255,255,255,0.08);
}
.mobile-timeline-stage {
position: relative;
width: 100%;
aspect-ratio: 16/9;
background: #000;
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
}
.mobile-timeline-stage.fit .mobile-timeline-media {
max-width: 100%; max-height: 100%;
object-fit: contain;
}
.mobile-timeline-stage.fill .mobile-timeline-media {
width: 100%; height: 100%;
object-fit: cover;
}
.mobile-timeline-media {
display: block;
max-width: 100%;
max-height: 100%;
}
.mobile-timeline-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
color: rgba(255,255,255,0.3);
font-size: 13px;
width: 100%;
height: 100%;
}
.mobile-timeline-player-info {
padding: 10px 14px;
font-size: 12px;
color: rgba(255,255,255,0.5);
display: flex;
align-items: center;
gap: 8px;
flex-wrap: wrap;
}
/* 7차 — Timeline Cut Card */
.mobile-timeline-cut-card {
background: rgba(255,255,255,0.04);
border: 1px solid rgba(255,255,255,0.08);
border-radius: 12px;
padding: 10px;
display: flex;
gap: 10px;
align-items: flex-start;
margin-bottom: 8px;
transition: border-color 0.15s;
}
.mobile-timeline-cut-card.active {
border-color: rgba(167,139,250,0.5);
background: rgba(167,139,250,0.07);
}
.mobile-timeline-cut-card.has-asset .mobile-timeline-cut-thumb {
border-color: rgba(167,139,250,0.3);
}
.mobile-timeline-cut-card.missing-asset .mobile-timeline-cut-thumb {
border-color: rgba(239,68,68,0.35);
background: rgba(239,68,68,0.07);
}
.mobile-timeline-cut-thumb {
width: 64px;
height: 40px;
border-radius: 7px;
border: 1px solid rgba(255,255,255,0.1);
overflow: hidden;
flex-shrink: 0;
background: rgba(0,0,0,0.4);
display: flex;
align-items: center;
justify-content: center;
font-size: 18px;
}
.mobile-timeline-cut-thumb img,
.mobile-timeline-cut-thumb video {
width: 100%; height: 100%;
object-fit: cover;
display: block;
}
.mobile-timeline-cut-body {
flex: 1;
min-width: 0;
}
.mobile-mini-badge.warning {
background: rgba(239,68,68,0.18);
color: #f87171;
border: 1px solid rgba(239,68,68,0.3);
border-radius: 6px;
padding: 1px 6px;
font-size: 10px;
font-weight: 600;
}
.mobile-inline-field {
display: flex;
align-items: center;
gap: 6px;
flex-wrap: wrap;
margin-top: 6px;
}
.mobile-inline-field label {
font-size: 11px;
color: rgba(255,255,255,0.4);
white-space: nowrap;
}
.mobile-select.compact {
padding: 3px 7px;
font-size: 11px;
height: 26px;
border-radius: 7px;
background: rgba(255,255,255,0.06);
border: 1px solid rgba(255,255,255,0.12);
color: rgba(255,255,255,0.85);
}
.mobile-secondary-btn[disabled] {
opacity: 0.35;
pointer-events: none;
}
/* 8차 — Review */
.mobile-review-stat {
padding: 12px;
border-radius: 16px;
background: rgba(255,255,255,0.05);
border: 1px solid rgba(255,255,255,0.08);
}
.mobile-review-stat span {
display: block;
color: var(--text-faint);
font-size: 11px;
font-weight: 800;
margin-bottom: 6px;
}
.mobile-review-stat strong {
font-size: 20px;
color: var(--text);
}
.mobile-review-cut-card {
overflow: hidden;
border-radius: 22px;
background: rgba(255,255,255,0.045);
border: 1px solid rgba(255,255,255,0.08);
margin-bottom: 12px;
}
.mobile-review-cut-card.approved {
border-color: rgba(52,211,153,0.34);
}
.mobile-review-cut-card.needs_revision {
border-color: rgba(251,191,36,0.34);
}
.mobile-review-cut-card.rejected {
border-color: rgba(248,113,113,0.34);
}
.mobile-review-thumb {
width: 100%;
aspect-ratio: 16 / 9;
background: rgba(0,0,0,0.32);
display: grid;
place-items: center;
color: var(--text-faint);
font-size: 24px;
}
.mobile-review-thumb img,
.mobile-review-thumb video {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
.mobile-review-body {
padding: 14px;
}
.mobile-review-body strong {
display: block;
margin-top: 10px;
font-size: 15px;
line-height: 1.4;
}
.mobile-review-body p {
margin: 7px 0 0;
color: var(--text-dim);
font-size: 13px;
line-height: 1.5;
}
.mobile-review-comment {
min-height: 92px;
font-size: 15px;
}
.mobile-mini-badge.needs_revision,
.mobile-mini-badge.warning {
background: rgba(251,191,36,0.14);
color: #fbbf24;
}
.mobile-mini-badge.rejected {
background: rgba(248,113,113,0.14);
color: #fca5a5;
}
.mobile-mini-badge.approved {
background: rgba(52,211,153,0.14);
color: #86efac;
}
}
@media (min-width: 769px) {
#mobile-app-shell { display: none !important; }
}
/* ═══ Main Production Dashboard (Task #86) ═══ */
.prod-home {
max-width: 1540px;
margin: 0 auto;
padding: 28px;
color: var(--text);
}
.cyber-aura-home {
background:
radial-gradient(circle at 25% 10%, rgba(111,76,255,0.14), transparent 30%),
radial-gradient(circle at 80% 20%, rgba(0,194,255,0.10), transparent 28%);
}
.prod-home-header {
display: flex;
justify-content: space-between;
gap: 24px;
align-items: flex-start;
margin-bottom: 22px;
flex-wrap: wrap;
}
.prod-home-title {
margin: 0;
font-size: 30px;
letter-spacing: -0.04em;
line-height: 1.2;
}
.prod-beta-badge {
display: inline-flex;
margin-left: 8px;
padding: 3px 8px;
border-radius: 999px;
font-size: 11px;
color: #c4b5fd;
background: rgba(167,139,250,0.16);
vertical-align: middle;
font-weight: 700;
}
.prod-home-sub {
margin: 7px 0 0;
color: var(--text-dim);
font-size: 14px;
}
.prod-kpis {
display: flex;
gap: 12px;
flex-wrap: wrap;
}
.prod-kpi-card {
min-width: 130px;
display: flex;
align-items: center;
gap: 10px;
padding: 12px 16px;
border: 1px solid rgba(139,92,246,0.26);
border-radius: 14px;
background: rgba(13,18,32,0.78);
box-shadow: 0 0 20px rgba(86,72,255,0.09);
}
.prod-kpi-card > span { font-size: 20px; }
.prod-kpi-card small { display: block; color: var(--text-faint); font-size: 11px; margin-bottom: 2px; }
.prod-kpi-card strong { font-size: 18px; }
.prod-home-grid {
display: grid;
grid-template-columns: minmax(0,2.2fr) minmax(300px,0.8fr);
gap: 18px;
align-items: start;
}
.prod-home-main,
.prod-home-aside {
display: grid;
gap: 14px;
align-content: start;
}
.prod-card,
.prod-project-hero {
border: 1px solid rgba(110,134,255,0.20);
border-radius: 16px;
background: rgba(9,16,30,0.80);
box-shadow: 0 0 24px rgba(43,72,255,0.06);
overflow: hidden;
}
.prod-card { padding: 18px; }
.prod-card-head {
display: flex;
justify-content: space-between;
align-items: center;
gap: 10px;
margin-bottom: 14px;
}
.prod-card-head h3 { margin: 0; font-size: 16px; }
.prod-card-head h3 span,
.prod-ai-badge { color: #a78bfa; font-size: 11px; margin-left: 5px; }
.prod-queue-count {
display: inline-flex;
padding: 1px 7px;
background: rgba(167,139,250,0.18);
border: 1px solid rgba(167,139,250,0.32);
border-radius: 999px;
font-size: 11px;
color: var(--accent);
margin-left: 5px;
}
.prod-project-hero {
min-height: 240px;
position: relative;
display: grid;
grid-template-columns: 1fr auto;
gap: 20px;
padding: 24px;
}
.prod-project-bg {
position: absolute;
inset: 0;
background:
linear-gradient(90deg, rgba(6,10,20,0.97), rgba(6,10,20,0.60), rgba(6,10,20,0.92)),
url('https://images.unsplash.com/photo-1519608487953-e999c86e7455?auto=format&fit=crop&w=1400&q=80');
background-size: cover;
background-position: center;
}
.prod-project-content,
.prod-project-actions { position: relative; z-index: 2; }
.prod-status-pill,
.prod-deadline-chip {
display: inline-flex;
padding: 5px 10px;
border-radius: 999px;
font-size: 11px;
font-weight: 700;
color: #dbeafe;
background: rgba(255,255,255,0.10);
}
.prod-deadline-chip { color: #c4b5fd; background: rgba(167,139,250,0.16); }
.prod-project-title {
margin: 16px 0 14px;
font-size: 28px;
letter-spacing: -0.04em;
line-height: 1.2;
}
.prod-stage-line {
display: flex;
gap: 8px;
color: var(--text-dim);
margin-bottom: 10px;
font-size: 13px;
}
.prod-stage-line strong { color: #a78bfa; }
.prod-progress-row {
display: flex;
align-items: center;
gap: 10px;
max-width: 420px;
}
.prod-progress-track,
.prod-mini-track,
.mini-progress {
height: 7px;
border-radius: 999px;
background: rgba(255,255,255,0.11);
overflow: hidden;
}
.prod-progress-track { flex: 1; }
.prod-progress-track > span,
.prod-mini-track > span,
.mini-progress > span {
display: block;
height: 100%;
border-radius: 999px;
background: linear-gradient(90deg, #5865ff, #a855f7, #00d4ff);
}
.prod-progress-row strong { font-size: 18px; }
.prod-deadline-line {
display: flex;
align-items: center;
gap: 6px;
margin-top: 12px;
font-size: 14px;
}
.prod-deadline-line.warning,
.prod-deadline-line.urgent,
.prod-deadline-line.overdue { color: #fb7185; }
.prod-deadline-line.safe { color: #60a5fa; }
.prod-deadline-line.neutral { color: var(--text-faint); }
.prod-deadline-line em { font-style: normal; }
.prod-project-meta { margin: 10px 0 0; color: var(--text-faint); font-size: 12px; }
.prod-project-actions {
display: flex;
flex-direction: column;
justify-content: center;
gap: 10px;
min-width: 200px;
}
.prod-primary-cta,
.prod-secondary-cta {
display: flex;
align-items: center;
justify-content: center;
gap: 7px;
border-radius: 11px;
font-weight: 700;
cursor: pointer;
min-height: 44px;
padding: 0 16px;
font-size: 13px;
transition: opacity .15s;
}
.prod-primary-cta:hover, .prod-secondary-cta:hover { opacity: .85; }
.prod-primary-cta {
border: 1px solid rgba(139,92,246,0.65);
background: linear-gradient(135deg, #7c3aed, #2563eb);
color: #fff;
box-shadow: 0 0 20px rgba(79,70,229,0.28);
}
.prod-secondary-cta {
border: 1px solid rgba(255,255,255,0.12);
background: rgba(255,255,255,0.055);
color: var(--text);
}
.prod-primary-cta.small, .prod-secondary-cta.small { min-height: 36px; padding: 0 12px; font-size: 12px; }
.prod-two-col {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 14px;
}
.prod-flow-steps {
display: grid;
grid-template-columns: repeat(3, 1fr);
gap: 12px;
}
.prod-flow-step {
border: 1px solid rgba(255,255,255,0.08);
border-radius: 13px;
padding: 14px;
background: rgba(255,255,255,0.03);
}
.prod-flow-step.active {
border-color: rgba(167,139,250,0.80);
box-shadow: 0 0 22px rgba(124,58,237,0.22);
}
.prod-step-icon {
width: 30px;
height: 30px;
border-radius: 999px;
display: inline-grid;
place-items: center;
margin-bottom: 9px;
background: rgba(167,139,250,0.16);
color: #c4b5fd;
font-weight: 900;
font-size: 13px;
}
.prod-flow-step.complete .prod-step-icon { background: rgba(134,239,172,0.16); color: #86efac; }
.prod-flow-step div strong { display: block; font-size: 13px; }
.prod-flow-step div > span { font-size: 11px; color: #86efac; }
.prod-flow-step.active div > span { color: #c4b5fd; }
.prod-flow-step.waiting div > span { color: var(--text-faint); }
.prod-flow-step p { color: var(--text-dim); font-size: 12px; line-height: 1.4; margin: 5px 0 0; }
.prod-tasks-card .prod-card-head { align-items: flex-start; }
.prod-tasks-card .prod-card-head h3 { display: flex; align-items: center; gap: 6px; }
.prod-next-rec {
display: flex;
align-items: center;
gap: 12px;
padding: 12px;
border-radius: 12px;
border: 1px solid rgba(167,139,250,0.22);
background: rgba(167,139,250,0.08);
margin-bottom: 10px;
}
.prod-next-icon { font-size: 22px; flex-shrink: 0; }
.prod-next-rec strong { display: block; font-size: 13px; }
.prod-next-rec p { margin: 4px 0 0; color: var(--text-faint); font-size: 11px; }
.prod-row-action {
display: block;
width: 100%;
text-align: left;
padding: 8px 10px;
background: transparent;
border: 0;
color: var(--text-dim);
font-size: 12px;
cursor: pointer;
border-radius: 8px;
transition: background .12s;
}
.prod-row-action:hover { background: rgba(255,255,255,0.05); color: var(--text); }
.prod-queue-list { display: grid; gap: 8px; }
.prod-queue-row {
display: grid;
grid-template-columns: 70px 1fr auto;
gap: 10px;
align-items: center;
padding: 10px;
border-radius: 12px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.03);
}
.prod-queue-thumb {
height: 50px;
border-radius: 9px;
background: linear-gradient(135deg, rgba(88,101,255,0.45), rgba(236,72,153,0.22));
}
.prod-queue-row strong { font-size: 12px; display: block; }
.prod-type-tag { color: #c4b5fd; font-size: 10px; margin-left: 4px; }
.prod-queue-row p { margin: 3px 0 0; color: var(--text-faint); font-size: 11px; }
.prod-queue-status { text-align: right; }
.prod-queue-status strong { font-size: 11px; display: block; }
.prod-status-running { color: #60a5fa; }
.prod-status-waiting { color: var(--text-faint); }
.prod-empty-state {
padding: 20px;
text-align: center;
color: var(--text-faint);
font-size: 13px;
}
.prod-recent-grid {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 10px;
}
.prod-recent-project {
padding: 10px;
border-radius: 13px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.03);
cursor: pointer;
transition: border-color .15s;
}
.prod-recent-project:hover { border-color: rgba(167,139,250,0.4); }
.prod-recent-project.active {
border-color: rgba(167,139,250,0.80);
box-shadow: 0 0 18px rgba(124,58,237,0.18);
}
.prod-recent-thumb {
height: 76px;
border-radius: 10px;
margin-bottom: 9px;
background: linear-gradient(135deg, rgba(88,101,255,0.4), rgba(236,72,153,0.18));
}
.prod-recent-project strong { display: block; font-size: 12px; line-height: 1.3; }
.prod-recent-project p { margin: 3px 0 6px; color: var(--text-faint); font-size: 11px; }
.prod-recent-bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
.prod-recent-bottom span { color: #a78bfa; font-size: 11px; }
.prod-recent-bottom em { color: #fb7185; font-style: normal; font-weight: 800; font-size: 11px; }
.prod-mini-track { margin-top: 7px; height: 4px; }
.prod-settings-card .prod-setting-row {
display: flex;
justify-content: space-between;
align-items: center;
width: 100%;
padding: 9px 12px;
border-radius: 10px;
border: 1px solid rgba(255,255,255,0.07);
background: rgba(255,255,255,0.035);
color: var(--text);
cursor: pointer;
font-size: 13px;
margin-top: 7px;
transition: background .12s;
}
.prod-settings-card .prod-setting-row:hover { background: rgba(255,255,255,0.065); }
.prod-settings-card .prod-setting-row span { color: var(--text-dim); }
.prod-settings-card .prod-setting-row strong { color: #a78bfa; }
.prod-calendar-card .prod-card-head { margin-bottom: 10px; }
.prod-tip-card {
padding: 16px;
border-radius: 14px;
border: 1px solid rgba(167,139,250,0.20);
background: linear-gradient(135deg, rgba(88,28,135,0.24), rgba(30,64,175,0.18));
}
.prod-tip-card strong { display: block; color: #fde68a; margin-bottom: 10px; font-size: 13px; line-height: 1.5; }
.ghost-link {
background: transparent;
border: 0;
color: var(--text-faint);
cursor: pointer;
font-size: 12px;
padding: 0;
}
.ghost-link:hover { color: var(--text); }
.ghost-link.danger { color: #fca5a5; }
@media (max-width: 1200px) {
.prod-home-grid { grid-template-columns: 1fr; }
.prod-home-aside { grid-template-columns: 1fr 1fr; }
.prod-project-hero { grid-template-columns: 1fr; }
.prod-project-actions { flex-direction: row; }
}
@media (max-width: 820px) {
.prod-home { padding: 16px; }
.prod-home-header { flex-direction: column; gap: 14px; }
.prod-two-col,
.prod-flow-steps,
.prod-home-aside,
.prod-recent-grid { grid-template-columns: 1fr; }
.prod-project-actions { flex-direction: column; }
.prod-home-title { font-size: 24px; }
.prod-project-title { font-size: 24px; }
.prod-queue-row { grid-template-columns: 60px 1fr; }
}
/* ════════════════════════════════════════════════════════════════════════
v4 — TOP 1% UX REFINEMENT LAYER
근거:
· 미국 상위 1% SaaS 디자인 패턴 (Linear, Vercel, Framer, Loom 레퍼런스)
· 8px 그리드 철저 적용 + 명확한 3단계 elevation 시스템
· 타이포 위계: Display(Fraunces) → Body → Mono 역할 명확화
· 동작 원칙: spring easing(0.34,1.4,0.64,1) + 160~220ms 표준
════════════════════════════════════════════════════════════════════════ */
/* ── v4.0 토큰 확장 ────────────────────────────────────────────────── */
:root {
/* Canvas — 극단적으로 깊은 배경 */
--v4-canvas: #04030E;
--v4-base: #07061A;
/* Card elevation — 더 분명한 3단계 */
--v4-card-0: rgba(255,255,255,0.022);
--v4-card-1: rgba(255,255,255,0.038);
--v4-card-2: rgba(255,255,255,0.058);
/* Border — 명확한 3티어 */
--v4-line-0: rgba(255,255,255,0.048);
--v4-line-1: rgba(255,255,255,0.082);
--v4-line-2: rgba(255,255,255,0.140);
--v4-line-acc: rgba(167,139,250,0.42);
/* Glow — 3단계 */
--v4-glow-xs: 0 0 0 1px rgba(167,139,250,0.28), 0 4px 14px -4px rgba(167,139,250,0.40);
--v4-glow-sm: 0 0 0 1px rgba(167,139,250,0.35), 0 8px 28px -8px rgba(167,139,250,0.55);
--v4-glow-md: 0 0 0 1px rgba(167,139,250,0.42), 0 16px 44px -10px rgba(124,108,234,0.65);
/* 버튼 높이 scale */
--v4-btn-xs: 28px;
--v4-btn-sm: 34px;
--v4-btn-md: 40px;
--v4-btn-lg: 46px;
--v4-btn-xl: 54px;
/* Motion — spring 통일 */
--v4-spring: cubic-bezier(0.34, 1.4, 0.64, 1);
--v4-ease: cubic-bezier(0.22, 0.61, 0.36, 1);
--v4-t-xs: 100ms;
--v4-t-sm: 160ms;
--v4-t-md: 220ms;
--v4-t-lg: 320ms;
}
/* ── v4.1 바디 배경 — 더 깊고 풍부한 ambient ────────────────────── */
body {
background-color: var(--v4-canvas) !important;
background-image:
radial-gradient(ellipse 110% 60% at 10% -4%, rgba(130,100,240,0.14), transparent 50%),
radial-gradient(ellipse 75% 45% at 90% 2%, rgba(100,115,235,0.10), transparent 44%),
radial-gradient(ellipse 55% 35% at 52% 98%, rgba(150,110,255,0.06), transparent 50%),
radial-gradient(ellipse 35% 25% at 70% 55%, rgba(80,100,230,0.04), transparent 45%) !important;
background-attachment: fixed !important;
}
/* ── v4.2 Topbar — ultra-glass ──────────────────────────────────── */
.topbar {
background: rgba(4,3,14,0.82) !important;
backdrop-filter: blur(28px) saturate(210%) brightness(0.96) !important;
-webkit-backdrop-filter: blur(28px) saturate(210%) brightness(0.96) !important;
border-bottom-color: var(--v4-line-0) !important;
padding-left: 14px !important;
padding-right: 18px !important;
}
.topbar::after {
background: linear-gradient(
90deg,
transparent 0%,
rgba(167,139,250,0.18) 30%,
rgba(196,181,253,0.55) 50%,
rgba(167,139,250,0.18) 70%,
transparent 100%
) !important;
opacity: 0.50 !important;
}
.brand-name {
font-size: 17px !important;
font-weight: 800 !important;
letter-spacing: -0.04em !important;
color: var(--d-ink, #F4F4F8) !important;
text-transform: lowercase !important;
}
.brand-sub {
font-size: 9.5px !important;
letter-spacing: 0.08em !important;
color: var(--d-ink-whisper, #52525E) !important;
border-left: 0 !important;
padding-left: 0 !important;
margin-left: 0 !important;
}
/* ── v4.3 Sidebar — 더 정제된 아이콘 내비 ──────────────────────── */
.sidebar {
background: rgba(4,3,14,0.50) !important;
border-right-color: var(--v4-line-0) !important;
padding: 8px 5px !important;
gap: 1px !important;
}
.nav-item {
min-height: 46px !important;
padding: 9px 10px !important;
border-radius: 11px !important;
font-size: 12px !important;
font-weight: 600 !important;
letter-spacing: 0.005em !important;
gap: 9px !important;
flex-direction: row !important;
align-items: center !important;
justify-content: flex-start !important;
color: var(--d-ink-faint, #797986) !important;
white-space: nowrap !important;
overflow: hidden !important;
text-overflow: ellipsis !important;
}
.nav-item .icon {
width: 18px !important;
height: 18px !important;
flex: 0 0 18px !important;
stroke-width: 1.55 !important;
transition: transform var(--v4-t-sm) var(--v4-spring) !important;
}
.nav-item:hover {
background: rgba(255,255,255,0.030) !important;
color: var(--d-ink-mute, #B5B5C2) !important;
transform: none !important; /* 수직 이동 제거 — 안정감 */
}
.nav-item:hover .icon {
transform: scale(1.10) !important;
}
/* Active — glow pill */
.nav-item.active {
background: rgba(167,139,250,0.11) !important;
color: var(--d-acc, #A78BFA) !important;
box-shadow: none !important;
}
.nav-item.active .icon {
color: var(--d-acc, #A78BFA) !important;
filter: drop-shadow(0 0 5px rgba(167,139,250,0.52)) !important;
transform: scale(1.04) !important;
}
/* Active — left accent bar (override ::before) */
.nav-item.active::before {
width: 3px !important;
height: 20px !important;
border-radius: 0 3px 3px 0 !important;
background: linear-gradient(180deg, #c4b5fd, #8b6fea) !important;
box-shadow: 0 0 12px rgba(167,139,250,0.65), 0 0 22px rgba(167,139,250,0.30) !important;
}
/* Nav divider */
.nav-divider {
margin: 6px 12px !important;
background: var(--v4-line-0) !important;
}
/* ── v4.4 Layout + main content ─────────────────────────────────── */
.layout {
max-width: 1440px !important;
}
.main {
padding: 40px 48px 96px !important;
max-width: 1080px !important;
}
@media (max-width: 1200px) {
.main { padding: 36px 40px 80px !important; max-width: 960px !important; }
}
@media (max-width: 900px) {
.main { padding: 28px 24px 72px !important; max-width: 100% !important; }
}
@media (max-width: 640px) {
.main { padding: 20px 16px 64px !important; }
}
/* ── v4.5 Page head — editorial ─────────────────────────────────── */
.page-head {
margin-bottom: 38px !important;
position: relative;
}
.page-head h1 {
font-size: 31px !important;
font-weight: 700 !important;
letter-spacing: -0.038em !important;
line-height: 1.08 !important;
color: var(--d-ink, #F4F4F8) !important;
margin-bottom: 7px !important;
}
.page-head p {
font-size: 13.5px !important;
color: var(--d-ink-mute, #B5B5C2) !important;
line-height: 1.62 !important;
max-width: 700px !important;
margin: 0 !important;
}
/* Accent gradient rule under heading */
.page-head::after {
content: "" !important;
display: block !important;
margin-top: 20px !important;
height: 1px !important;
background: linear-gradient(
90deg,
rgba(167,139,250,0.40) 0%,
rgba(167,139,250,0.12) 50%,
transparent 100%
) !important;
}
/* ── v4.6 Card system — visible elevation ────────────────────────── */
.card {
background: var(--v4-card-1) !important;
border-color: var(--v4-line-1) !important;
border-radius: 14px !important;
}
.stage {
background: var(--v4-card-0) !important;
border-color: var(--v4-line-0) !important;
border-radius: 14px !important;
}
.stage-header {
padding: 15px 18px !important;
border-bottom-color: var(--v4-line-0) !important;
}
.stage-body { padding: 18px !important; }
/* History items */
.history-item {
background: var(--v4-card-0) !important;
border-color: var(--v4-line-0) !important;
border-radius: 12px !important;
transition: background var(--v4-t-sm) var(--v4-ease),
border-color var(--v4-t-sm) var(--v4-ease),
transform var(--v4-t-sm) var(--v4-spring) !important;
}
.history-item:hover {
background: var(--v4-card-1) !important;
border-color: var(--v4-line-1) !important;
transform: translateX(3px) !important;
}
/* Control cards */
.control-card {
background: var(--v4-card-0) !important;
border-color: var(--v4-line-0) !important;
border-radius: 12px !important;
}
/* Vault card */
.vault-card {
background: linear-gradient(145deg, rgba(167,139,250,0.055), var(--v4-card-0)) !important;
border-color: rgba(167,139,250,0.22) !important;
border-radius: 18px !important;
}
/* Persona card */
.persona-card {
background: var(--v4-card-0) !important;
border-color: var(--v4-line-0) !important;
border-radius: 14px !important;
}
/* ── v4.7 Generate 버튼 — 시그니처 CTA ───────────────────────────── */
.btn-generate {
height: var(--v4-btn-xl, 54px) !important;
padding: 0 30px !important;
font-size: 15px !important;
font-weight: 700 !important;
letter-spacing: -0.012em !important;
border-radius: 14px !important;
background: linear-gradient(
135deg,
#A78BFA 0%,
#7C6CEA 45%,
#6366F1 100%
) !important;
background-size: 200% 100% !important;
background-position: 0% 50% !important;
border: 1px solid rgba(255,255,255,0.15) !important;
box-shadow:
0 0 0 1px rgba(99,102,241,0.32),
0 8px 26px -6px rgba(124,108,234,0.62),
inset 0 1px 0 rgba(255,255,255,0.18) !important;
transition:
background-position var(--v4-t-lg) var(--v4-ease),
transform var(--v4-t-sm) var(--v4-spring),
box-shadow var(--v4-t-md) var(--v4-ease) !important;
position: relative !important;
overflow: hidden !important;
}
.btn-generate::before {
content: "" !important;
position: absolute !important;
inset: 0 !important;
background: radial-gradient(
ellipse 80% 50% at 50% -5%,
rgba(255,255,255,0.20),
transparent 65%
) !important;
pointer-events: none !important;
}
.btn-generate:hover:not(:disabled) {
background-position: 100% 50% !important;
transform: translateY(-2px) !important;
box-shadow:
0 0 0 1px rgba(167,139,250,0.48),
0 14px 36px -8px rgba(124,108,234,0.78),
inset 0 1px 0 rgba(255,255,255,0.24) !important;
}
.btn-generate:active:not(:disabled) {
transform: translateY(0px) scale(0.985) !important;
}
.btn-generate:disabled {
opacity: 0.60 !important;
cursor: wait !important;
}
/* ── v4.8 Primary 버튼 ────────────────────────────────────────── */
.btn-primary {
height: var(--v4-btn-lg, 46px) !important;
padding: 0 24px !important;
font-size: 13.5px !important;
font-weight: 650 !important;
letter-spacing: -0.010em !important;
border-radius: 12px !important;
background: linear-gradient(135deg, var(--d-acc, #A78BFA), #818CF8) !important;
border: 1px solid rgba(255,255,255,0.13) !important;
box-shadow:
0 6px 20px -6px rgba(139,92,246,0.52),
inset 0 1px 0 rgba(255,255,255,0.16) !important;
transition:
transform var(--v4-t-sm) var(--v4-spring),
box-shadow var(--v4-t-md) var(--v4-ease) !important;
}
.btn-primary:hover {
transform: translateY(-1px) !important;
box-shadow:
0 10px 28px -6px rgba(139,92,246,0.68),
inset 0 1px 0 rgba(255,255,255,0.20) !important;
}
.btn-primary:active {
transform: translateY(0) scale(0.988) !important;
}
.btn-primary:disabled { opacity: 0.50 !important; cursor: not-allowed !important; transform: none !important; }
/* ── v4.9 Ghost 버튼 ───────────────────────────────────────────── */
.ghost-btn, .btn-ghost {
height: var(--v4-btn-md, 40px) !important;
padding: 0 18px !important;
background: rgba(255,255,255,0.038) !important;
border: 1px solid var(--v4-line-1) !important;
color: var(--d-ink-mute, #B5B5C2) !important;
font-size: 13px !important;
font-weight: 600 !important;
border-radius: 10px !important;
transition: background var(--v4-t-xs), border-color var(--v4-t-xs), color var(--v4-t-xs) !important;
}
.ghost-btn:hover, .btn-ghost:hover {
background: rgba(255,255,255,0.062) !important;
border-color: var(--v4-line-2) !important;
color: var(--d-ink, #F4F4F8) !important;
}
/* ── v4.10 Input 통일 ──────────────────────────────────────────── */
input[type="text"],
input[type="password"],
input[type="email"],
input[type="url"],
input[type="number"],
input[type="search"],
.url-input,
.mock-input,
.mock-textarea,
textarea,
select {
background: rgba(255,255,255,0.030) !important;
border-color: var(--v4-line-1) !important;
border-radius: 10px !important;
color: var(--d-ink, #F4F4F8) !important;
}
input[type="text"]:focus,
input[type="password"]:focus,
input[type="email"]:focus,
input[type="url"]:focus,
input[type="number"]:focus,
input[type="search"]:focus,
.url-input:focus,
.mock-input:focus,
.mock-textarea:focus,
textarea:focus,
select:focus {
border-color: rgba(167,139,250,0.70) !important;
background: rgba(255,255,255,0.042) !important;
box-shadow: 0 0 0 3px rgba(167,139,250,0.12) !important;
outline: none !important;
}
input::placeholder, textarea::placeholder {
color: var(--d-ink-whisper, #52525E) !important;
}
/* ── v4.11 Pill/tab 활성 상태 ──────────────────────────────────── */
.pill.active, .ba-toggle button.active {
background: linear-gradient(
135deg,
rgba(167,139,250,0.18),
rgba(129,140,248,0.12)
) !important;
border-color: rgba(167,139,250,0.38) !important;
color: var(--d-ink, #F4F4F8) !important;
box-shadow: inset 0 1px 0 rgba(255,255,255,0.07) !important;
}
.tag-btn:hover {
background: rgba(167,139,250,0.10) !important;
border-color: rgba(167,139,250,0.30) !important;
}
.tag-btn.selected {
border-color: rgba(255,255,255,0.55) !important;
background: rgba(255,255,255,0.08) !important;
box-shadow: 0 0 0 1px rgba(255,255,255,0.22) !important;
}
/* ── v4.12 Toast — 프리미엄 ────────────────────────────────────── */
.toast {
border-radius: 13px !important;
padding: 13px 20px !important;
font-size: 13.5px !important;
letter-spacing: -0.012em !important;
background: rgba(10,9,22,0.88) !important;
border: 1px solid rgba(255,255,255,0.09) !important;
box-shadow:
0 28px 72px -14px rgba(0,0,0,0.70),
0 0 0 1px rgba(255,255,255,0.055) !important;
backdrop-filter: blur(18px) saturate(200%) !important;
-webkit-backdrop-filter: blur(18px) saturate(200%) !important;
}
/* ── v4.13 Modal 퀄리티 ────────────────────────────────────────── */
.vault-modal {
border-radius: 22px !important;
background: rgba(10,9,22,0.92) !important;
border-color: var(--v4-line-1) !important;
box-shadow:
0 40px 100px -20px rgba(0,0,0,0.75),
0 0 0 1px var(--v4-line-1) !important;
backdrop-filter: blur(24px) !important;
-webkit-backdrop-filter: blur(24px) !important;
}
/* ── v4.14 Dropzone ────────────────────────────────────────────── */
.dropzone {
border-radius: 18px !important;
border-width: 1.5px !important;
border-color: var(--v4-line-1) !important;
}
.dropzone:hover, .dropzone.dragging {
border-color: var(--d-acc, #A78BFA) !important;
box-shadow: 0 0 0 1px rgba(167,139,250,0.18) inset !important;
}
/* ── v4.15 Scrollbar — 6px 미니멀 ─────────────────────────────── */
::-webkit-scrollbar {
width: 6px !important;
height: 6px !important;
}
::-webkit-scrollbar-track { background: transparent !important; }
::-webkit-scrollbar-thumb {
background: rgba(255,255,255,0.06) !important;
border-radius: 999px !important;
border: none !important;
background-clip: initial !important;
}
::-webkit-scrollbar-thumb:hover {
background: rgba(167,139,250,0.28) !important;
}
/* ── v4.16 Page 진입 애니메이션 ─────────────────────────────────── */
.page.active {
animation: v4-page-in 0.26s cubic-bezier(0.22, 1, 0.36, 1) both !important;
}
@keyframes v4-page-in {
from { opacity: 0; transform: translateY(8px); }
to { opacity: 1; transform: translateY(0); }
}
/* ── v4.17 Focus ring ──────────────────────────────────────────── */
*:focus-visible {
outline: none !important;
box-shadow:
0 0 0 2px rgba(167,139,250,0.14),
0 0 0 1px rgba(167,139,250,0.80) !important;
border-radius: var(--d-r-sm, 6px) !important;
}
button:focus-visible, a:focus-visible, input:focus-visible {
box-shadow:
0 0 0 3px rgba(167,139,250,0.16),
0 0 0 1px rgba(167,139,250,0.82) !important;
}
/* ── v4.18 Mini-interactions ────────────────────────────────────── */
/* Library cards */
.lib-card {
border-radius: 14px !important;
transition:
border-color var(--v4-t-sm) var(--v4-ease),
transform var(--v4-t-md) var(--v4-spring),
box-shadow var(--v4-t-md) var(--v4-ease) !important;
}
.lib-card:hover {
transform: translateY(-3px) !important;
box-shadow: 0 12px 36px -10px rgba(0,0,0,0.50) !important;
}
/* Play btn */
.play-btn {
transition:
background var(--v4-t-xs) var(--v4-ease),
color var(--v4-t-xs) var(--v4-ease),
transform var(--v4-t-sm) var(--v4-spring) !important;
}
.play-btn:hover {
transform: scale(1.08) !important;
background: var(--d-acc, #A78BFA) !important;
color: white !important;
}
/* Next-btn */
.next-btn {
border-radius: 14px !important;
background: rgba(139,92,246,0.08) !important;
border-color: rgba(139,92,246,0.22) !important;
transition: background var(--v4-t-sm), border-color var(--v4-t-sm), transform var(--v4-t-sm) var(--v4-spring) !important;
}
.next-btn:hover:not(:disabled) {
background: rgba(139,92,246,0.16) !important;
transform: translateX(3px) !important;
}
/* Icon btn topbar */
.icon-btn {
border-radius: 9px !important;
transition:
background var(--v4-t-xs),
color var(--v4-t-xs),
border-color var(--v4-t-xs),
transform var(--v4-t-sm) var(--v4-spring) !important;
}
.icon-btn:hover {
transform: translateY(-1px) !important;
}
.icon-btn:active {
transform: scale(0.92) !important;
}
/* ── v4.19 Segment + waveform ───────────────────────────────────── */
.segment { border-radius: 10px !important; }
.wave span { border-radius: 3px !important; }
.wave-big span { border-radius: 2px !important; }
/* ── v4.20 Range input ──────────────────────────────────────────── */
input[type=range]::-webkit-slider-thumb {
box-shadow: 0 0 0 3px rgba(139,92,246,0.20) !important;
}
input[type=range]::-webkit-slider-thumb:hover {
box-shadow: 0 0 0 5px rgba(139,92,246,0.28) !important;
}
/* ── v4.21 Section heading 패턴 ────────────────────────────────── */
.history-head h2 {
font-size: 14px !important;
font-weight: 700 !important;
letter-spacing: -0.012em !important;
}
.section-title,
.summary-section h4 {
font-size: 11px !important;
font-weight: 700 !important;
letter-spacing: 0.07em !important;
text-transform: uppercase !important;
}
/* ── v4.22 Stage-actions 버튼 ───────────────────────────────────── */
.stage-actions button, .stage-actions a {
border-radius: 9px !important;
font-size: 12.5px !important;
border-color: var(--v4-line-1) !important;
transition: background var(--v4-t-xs), border-color var(--v4-t-xs), color var(--v4-t-xs) !important;
}
.stage-actions button:hover, .stage-actions a:hover {
background: rgba(255,255,255,0.055) !important;
border-color: var(--v4-line-2) !important;
}
/* ── v4.23 Waveform selection ───────────────────────────────────── */
.wave-selection {
border-radius: 5px !important;
box-shadow:
inset 0 0 28px rgba(139,92,246,0.28),
0 0 16px rgba(139,92,246,0.22) !important;
}
/* ── v4.24 File badge ───────────────────────────────────────────── */
.file-badge {
border-radius: 999px !important;
border-color: var(--v4-line-1) !important;
background: var(--v4-card-1) !important;
}
/* ── v4.25 모션 감소 ─────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.page.active { animation: none !important; }
.btn-generate, .btn-primary { transition-duration: 0.01ms !important; }
.nav-item .icon { transition: none !important; }
}
/* ── v4.26 Mobile refinements ───────────────────────────────────── */
@media (max-width: 768px) {
.page-head h1 { font-size: 26px !important; }
.btn-generate { height: var(--v4-btn-lg, 46px) !important; font-size: 14px !important; }
}
@media (max-width: 480px) {
.page-head h1 { font-size: 22px !important; }
.btn-generate { height: 44px !important; font-size: 13.5px !important; }
}
/* ── Day 5B · Script Editor ─────────────────────────────────────── */
.script-editor-wrap { display:grid; grid-template-columns:200px 1fr; gap:0; border:1px solid var(--border); border-radius:var(--r-xl); overflow:hidden; min-height:600px; }
.script-nav { background:var(--bg-card); border-right:1px solid var(--border); overflow-y:auto; display:flex; flex-direction:column; }
.script-nav-head { padding:14px 14px 10px; border-bottom:1px solid var(--border); font-size:10px; letter-spacing:.07em; text-transform:uppercase; color:var(--text-faint); font-weight:700; flex-shrink:0; }
.script-nav-ep { padding:8px 10px 3px; font-size:10px; font-weight:700; color:var(--accent); letter-spacing:.05em; text-transform:uppercase; }
.script-nav-item { padding:6px 14px; font-size:12px; color:var(--text-dim); cursor:pointer; border-left:3px solid transparent; transition:background .1s,color .1s; display:flex; align-items:center; gap:7px; line-height:1.35; }
.script-nav-item:hover { background:var(--bg-elev); color:var(--text); }
.script-nav-item.active { border-left-color:var(--accent); color:var(--accent); background:var(--accent-soft); font-weight:600; }
.script-nav-num { font-weight:700; min-width:26px; font-size:11px; }
.script-nav-shots { margin-left:auto; padding:2px 6px; background:var(--bg-elev); border-radius:999px; font-size:10px; color:var(--text-faint); white-space:nowrap; }
.script-body { background:var(--bg-1); overflow-y:auto; padding:28px 36px; display:flex; flex-direction:column; gap:32px; }
.script-scene-block { display:flex; flex-direction:column; gap:10px; scroll-margin-top:20px; }
.script-scene-heading-row { display:flex; align-items:center; gap:12px; flex-wrap:wrap; }
.script-scene-num { font-size:10px; font-weight:800; color:var(--accent); letter-spacing:.08em; text-transform:uppercase; min-width:36px; }
.script-scene-heading { flex:1; font-family:'Courier New',Courier,monospace; font-size:13px; font-weight:700; text-transform:uppercase; letter-spacing:.04em; background:transparent; border:none; border-bottom:1px solid var(--border); color:var(--text); padding:4px 0; outline:none; min-width:160px; }
.script-scene-heading:focus { border-bottom-color:var(--accent); }
.script-scene-heading::placeholder { color:var(--text-faint); font-weight:400; text-transform:none; }
.script-shot-badge { padding:3px 9px; background:var(--bg-card); border:1px solid var(--border); border-radius:999px; font-size:11px; color:var(--text-faint); white-space:nowrap; }
.script-beat-line { font-size:11px; color:var(--accent); font-style:italic; padding:0 0 0 48px; opacity:.75; }
.script-content-area { font-family:'Courier New',Courier,monospace; font-size:13px; line-height:1.85; background:var(--bg-card); border:1px solid var(--border); border-radius:var(--r-md); padding:16px 20px; color:var(--text); resize:none; outline:none; width:100%; box-sizing:border-box; min-height:100px; transition:border-color .15s; overflow:hidden; }
.script-content-area:focus { border-color:var(--accent); }
.script-content-area::placeholder { color:var(--text-faint); font-family:inherit; }
.script-scene-foot { display:flex; align-items:center; gap:8px; padding:0 0 0 2px; }
.script-add-shot-btn { padding:5px 12px; font-size:11px; background:transparent; border:1px dashed var(--border-strong); border-radius:var(--r-md); color:var(--accent); cursor:pointer; transition:background .15s; }
.script-add-shot-btn:hover { background:var(--accent-soft); }
.script-save-indicator { font-size:11px; color:var(--text-faint); margin-left:auto; opacity:0; transition:opacity .3s; }
.script-save-indicator.visible { opacity:1; }
.script-empty { padding:80px 20px; text-align:center; color:var(--text-faint); font-size:13px; display:flex; flex-direction:column; align-items:center; gap:10px; }
/* Shot workspace CTA 버튼 (5A) */
.pl-shot-cta-row { display:flex; gap:8px; flex-wrap:wrap; margin-top:4px; }
.pl-shot-cta { flex:1; min-width:82px; padding:9px 10px; border-radius:var(--r-md); font-size:12px; font-weight:600; cursor:pointer; display:inline-flex; align-items:center; justify-content:center; gap:5px; transition:opacity .15s,transform .1s; border:1px solid transparent; }
.pl-shot-cta:active { transform:scale(.97); }
.pl-shot-cta.cta-image { background:rgba(139,92,246,.15); border-color:rgba(139,92,246,.35); color:#a78bfa; }
.pl-shot-cta.cta-video { background:rgba(236,72,153,.12); border-color:rgba(236,72,153,.30); color:#f472b6; }
.pl-shot-cta.cta-voice { background:rgba(34,197,94,.10); border-color:rgba(34,197,94,.28); color:#4ade80; }
.pl-shot-cta.cta-image:hover { background:rgba(139,92,246,.25); }
.pl-shot-cta.cta-video:hover { background:rgba(236,72,153,.22); }
.pl-shot-cta.cta-voice:hover { background:rgba(34,197,94,.20); }
@media (max-width:768px) {
.script-editor-wrap { grid-template-columns:1fr; }
.script-nav { display:none; }
.script-body { padding:16px 14px; }
}