:root,[data-theme="light"]{
  --text-xs:clamp(.75rem,.7rem + .25vw,.875rem);--text-sm:clamp(.875rem,.8rem + .35vw,1rem);--text-base:clamp(1rem,.95rem + .25vw,1.125rem);--text-lg:clamp(1.125rem,1rem + .75vw,1.5rem);--text-xl:clamp(1.5rem,1.2rem + 1.25vw,2.25rem);
  --space-1:.25rem;--space-2:.5rem;--space-3:.75rem;--space-4:1rem;--space-5:1.25rem;--space-6:1.5rem;--space-8:2rem;--space-10:2.5rem;--space-12:3rem;--space-16:4rem;
  --font-body:"Noto Sans KR","Satoshi",sans-serif;--font-display:"Satoshi","Noto Sans KR",sans-serif;
  --color-bg:#f7f6f3;--color-surface:#fff;--color-surface-2:#faf9f7;--color-surface-offset:#f2f0ec;--color-border:#e5e2dd;--color-divider:#e6e3de;--color-text:#20212b;--color-text-muted:#666675;--color-text-faint:#868694;--color-primary:#fdb34f;--color-primary-hover:#f3a338;--color-primary-highlight:#fff1d9;--color-violet:#6359c9;--color-violet-wash:#f1f0ff;--color-error:#a13544;--color-success:#327953;--color-success-bg:#eaf7ee;--color-text-inverse:#1a1a2e;
  --radius-sm:.375rem;--radius-md:.5rem;--radius-lg:.875rem;--radius-xl:1.25rem;--radius-full:9999px;--shadow-sm:0 1px 2px rgba(30,28,40,.07);--shadow-md:0 8px 24px rgba(30,28,40,.08);--shadow-lg:0 20px 50px rgba(30,28,40,.14);--transition-interactive:180ms cubic-bezier(.16,1,.3,1);
}
[data-theme="dark"]{--color-bg:#15151a;--color-surface:#202027;--color-surface-2:#292932;--color-surface-offset:#303039;--color-border:#40404a;--color-divider:#3c3c46;--color-text:#f4f3f3;--color-text-muted:#b7b5c2;--color-text-faint:#9c9aa9;--color-primary:#f3ad50;--color-primary-hover:#f9bf71;--color-primary-highlight:#3f3526;--color-violet:#b5afff;--color-violet-wash:#343149;--color-error:#ea8293;--color-success:#8ed2a9;--color-success-bg:#2a4135;--color-text-inverse:#1a1a2e;--shadow-sm:0 1px 2px rgba(0,0,0,.2);--shadow-md:0 8px 24px rgba(0,0,0,.25);--shadow-lg:0 20px 50px rgba(0,0,0,.4)}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}html{-webkit-text-size-adjust:none;text-size-adjust:none;-webkit-font-smoothing:antialiased;scroll-behavior:smooth}body{min-height:100dvh;line-height:1.55;font-family:var(--font-body);font-size:var(--text-base);background:var(--color-bg);color:var(--color-text)}button,input,textarea,select{font:inherit;color:inherit}button{cursor:pointer;border:0;background:none}img,svg{display:block;max-width:100%}h1,h2,h3{line-height:1.2;text-wrap:balance}p{text-wrap:pretty}button,input,select,textarea{transition:color var(--transition-interactive),background var(--transition-interactive),border-color var(--transition-interactive),box-shadow var(--transition-interactive)}:focus-visible{outline:2px solid var(--color-violet);outline-offset:2px}.skip-link{position:absolute;top:-4rem;left:1rem;z-index:100;background:var(--color-primary);padding:var(--space-2)}.skip-link:focus{top:1rem}
.app-shell{min-height:100dvh;max-width:1800px;margin:auto;display:flex;flex-direction:column}.topbar{height:76px;padding:0 clamp(var(--space-5),3vw,var(--space-12));display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--color-border);background:var(--color-surface)}.brand{display:flex;align-items:center;gap:var(--space-2);font-family:var(--font-display);font-size:1.55rem;font-weight:700;letter-spacing:-.06em;white-space:nowrap}.brand-mark{width:30px;height:30px;color:var(--color-text)}.brand-dot,.phone-brand span{color:var(--color-primary)}.topbar-center{color:var(--color-text-muted);font-size:var(--text-sm);letter-spacing:-.025em}.separator{color:var(--color-primary);margin:0 var(--space-2)}.topbar-actions{display:flex;align-items:center;gap:var(--space-5)}.prototype-label{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;color:var(--color-text-muted)}.theme-toggle{display:grid;place-items:center;width:44px;height:44px;border:1px solid var(--color-border);border-radius:var(--radius-full);background:var(--color-surface-2)}.theme-toggle svg{width:19px;height:19px}.workspace{display:grid;grid-template-columns:minmax(250px,1fr) minmax(430px,1.2fr) minmax(230px,.85fr);gap:clamp(var(--space-6),4vw,var(--space-16));padding:clamp(var(--space-6),4vw,var(--space-12));flex:1}.eyebrow{font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:.14em;color:var(--color-violet)}.journey-panel{padding-top:var(--space-3)}.journey-panel h1{font-size:clamp(1.75rem,2.5vw,2.75rem);font-weight:800;letter-spacing:-.06em;margin:var(--space-6) 0 var(--space-5);word-break:keep-all}.journey-panel h1 span{color:var(--color-violet)}.journey-intro{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.8;max-width:38ch}.journey-nav{margin-top:var(--space-10)}.nav-section{margin-bottom:var(--space-6)}.nav-section-head{display:flex;justify-content:space-between;padding-bottom:var(--space-2);border-bottom:1px solid var(--color-border);font-size:var(--text-sm);font-weight:700}.nav-section-head span:last-child{font-family:var(--font-display);font-size:var(--text-xs);color:var(--color-text-faint)}.nav-link{display:flex;gap:var(--space-3);align-items:center;text-align:left;width:100%;min-height:36px;padding:var(--space-2) var(--space-3);border-radius:var(--radius-md);font-size:var(--text-sm);color:var(--color-text-muted)}.nav-link:hover{background:var(--color-surface-offset)}.nav-link.active{background:var(--color-violet-wash);color:var(--color-violet);font-weight:700}.nav-code{font-family:var(--font-display);font-size:var(--text-xs);min-width:30px;letter-spacing:.04em}.journey-footnote{font-size:var(--text-xs);color:var(--color-text-faint);line-height:1.7;border-top:1px solid var(--color-border);padding-top:var(--space-5);margin-top:var(--space-8)}
.brand-wordmark{width:116px;height:43px;object-fit:contain}
.phone-wordmark{width:84px;height:35px;object-fit:contain}
[data-theme="dark"] .brand-wordmark,[data-theme="dark"] .phone-wordmark{background:#fff;border-radius:6px;padding:2px}
.stage{display:flex;align-items:center;flex-direction:column;min-width:0}.stage-topline{display:flex;justify-content:space-between;width:min(100%,440px);font-family:var(--font-display);font-size:var(--text-xs);font-weight:700;letter-spacing:.12em;padding:0 var(--space-1) var(--space-4)}.live-dot{display:inline-block;width:7px;height:7px;border-radius:50%;background:var(--color-success);margin-right:var(--space-2)}.stage-dim{color:var(--color-text-faint);margin-left:var(--space-2)}.phone-frame{width:390px;max-width:100%;height:844px;max-height:min(844px,calc(100dvh - 200px));min-height:620px;border:7px solid #22232b;border-radius:42px;background:var(--color-surface);box-shadow:var(--shadow-lg),0 0 0 1px #292932;overflow:hidden;position:relative}.phone-screen{height:100%;display:flex;flex-direction:column;overflow:hidden;background:var(--color-surface)}.phone-status{height:35px;display:flex;justify-content:space-between;align-items:center;padding:0 25px;font-family:var(--font-display);font-weight:700;font-size:12px;flex:none}.status-signals{font-size:10px;letter-spacing:1px}.phone-appbar{height:52px;display:flex;justify-content:space-between;align-items:center;padding:0 17px;flex:none}.phone-brand{font-family:var(--font-display);font-size:22px;font-weight:700;letter-spacing:-.07em}.icon-button{width:44px;height:44px;display:grid;place-items:center;font-family:var(--font-display);font-size:25px;line-height:1;border-radius:var(--radius-md)}.icon-button:hover{background:var(--color-surface-offset)}.phone-progress{height:3px;background:var(--color-surface-offset);flex:none}.phone-progress>div{height:100%;width:5%;background:var(--color-primary);transition:width .3s ease}.phone-content{flex:1;min-height:0;overflow-y:auto;padding:var(--space-6) var(--space-5) var(--space-8);scrollbar-width:thin}.phone-actions{flex:none;z-index:2;padding:var(--space-3) var(--space-5) var(--space-2);border-top:1px solid var(--color-border);background:var(--color-surface);box-shadow:0 -8px 20px rgba(40,35,40,.03)}.home-indicator{width:118px;height:4px;border-radius:var(--radius-full);background:var(--color-text);margin:var(--space-2) auto var(--space-2);flex:none}.stage-controls{width:min(100%,440px);display:flex;align-items:center;justify-content:space-between;gap:var(--space-4);padding-top:var(--space-4)}.stage-controls>span{font-family:var(--font-display);font-weight:700;font-size:var(--text-xs);letter-spacing:.12em;color:var(--color-text-faint)}.step-control{display:flex;align-items:center;gap:var(--space-2);min-height:44px;color:var(--color-text-muted);font-size:var(--text-sm)}.step-control:hover{color:var(--color-violet)}.step-control:disabled{opacity:.35;cursor:not-allowed}
.context-panel{padding-top:var(--space-3)}.context-panel h2{font-size:var(--text-xl);margin:var(--space-6) 0 var(--space-3);letter-spacing:-.05em}.context-panel .context-code{font-family:var(--font-display);font-size:var(--text-sm);font-weight:700;color:var(--color-violet)}.context-panel .context-desc{color:var(--color-text-muted);font-size:var(--text-sm);line-height:1.75}.context-tag{display:inline-block;border:1px solid var(--color-border);border-radius:var(--radius-full);padding:var(--space-1) var(--space-3);font-size:var(--text-xs);font-weight:700;margin-top:var(--space-5)}.context-divider{border-top:1px solid var(--color-border);margin:var(--space-10) 0}.principle{display:flex;gap:var(--space-3);margin-bottom:var(--space-6)}.principle-number{font-family:var(--font-display);color:var(--color-violet);font-size:var(--text-xs);font-weight:700}.principle strong{font-size:var(--text-sm)}.principle p{font-size:var(--text-xs);color:var(--color-text-muted);line-height:1.7;margin-top:var(--space-2)}.context-disclaimer{font-size:var(--text-xs);color:var(--color-text-muted);background:var(--color-surface-offset);padding:var(--space-4);border-radius:var(--radius-md);line-height:1.7}.outer-footer{display:flex;justify-content:space-between;padding:var(--space-4) clamp(var(--space-5),3vw,var(--space-12));border-top:1px solid var(--color-border);font-family:var(--font-display);color:var(--color-text-faint);font-size:var(--text-xs);letter-spacing:.05em}
.screen-kicker{display:flex;justify-content:space-between;align-items:center;font-family:var(--font-display);font-size:12px;font-weight:700;letter-spacing:.08em;color:var(--color-violet);margin-bottom:var(--space-4)}.screen-kicker .micro-step{color:var(--color-text-faint)}.screen-title{font-size:26px;letter-spacing:-.065em;font-weight:800;line-height:1.3;word-break:keep-all;margin-bottom:var(--space-2)}.screen-sub{font-size:14px;line-height:1.7;color:var(--color-text-muted);word-break:keep-all;margin-bottom:var(--space-6)}.section-label{display:flex;justify-content:space-between;align-items:center;margin:var(--space-6) 0 var(--space-3);font-size:14px;font-weight:700}.section-label small{font-size:12px;color:var(--color-text-faint);font-weight:500}.card{background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-lg);padding:var(--space-4);margin-bottom:var(--space-3);box-shadow:var(--shadow-sm)}.select-card{display:flex;align-items:center;gap:var(--space-4);text-align:left;width:100%;min-height:92px}.select-card.active,.chip.active,.frame-card.active{border-color:var(--color-violet);background:var(--color-violet-wash)}.select-card strong{display:block;font-size:16px}.select-card small{display:block;color:var(--color-text-muted);font-size:12px;margin-top:var(--space-1)}.select-card .select-icon{width:42px;height:42px;border-radius:var(--radius-md);display:grid;place-items:center;background:var(--color-surface-offset);font-size:20px;flex:none}.select-card .check-circle{margin-left:auto;width:20px;height:20px;border-radius:50%;border:1.5px solid var(--color-border);flex:none}.select-card.active .check-circle{border:6px solid var(--color-violet)}.hint{font-size:12px;line-height:1.65;color:var(--color-text-muted);padding:var(--space-3) var(--space-4);background:var(--color-surface-2);border-radius:var(--radius-md);margin:var(--space-4) 0}.notice{font-size:13px;line-height:1.65;background:var(--color-violet-wash);padding:var(--space-4);border-radius:var(--radius-md);margin:var(--space-4) 0;color:var(--color-text)}.notice.warning{background:var(--color-primary-highlight)}.notice.success{background:var(--color-success-bg)}.primary-btn{width:100%;min-height:48px;border-radius:var(--radius-md);background:var(--color-primary);color:var(--color-text-inverse);font-size:15px;font-weight:800;box-shadow:0 2px 0 #cd8730}.primary-btn:hover{background:var(--color-primary-hover)}.primary-btn:disabled{opacity:.45;cursor:not-allowed;box-shadow:none}.secondary-btn{width:100%;min-height:44px;margin-top:var(--space-2);color:var(--color-text-muted);font-size:14px;font-weight:600;border-radius:var(--radius-md)}.secondary-btn:hover{background:var(--color-surface-offset)}.status-pill{display:inline-flex;align-items:center;gap:6px;border-radius:var(--radius-full);padding:5px 10px;font-size:12px;font-weight:700;background:var(--color-success-bg);color:var(--color-success)}.status-pill.pending{background:var(--color-primary-highlight);color:var(--color-text)}.status-pill.violet{background:var(--color-violet-wash);color:var(--color-violet)}.status-pill.error{background:var(--color-surface-offset);color:var(--color-error)}
.media-cover{overflow:hidden;position:relative;border-radius:var(--radius-lg);background:var(--color-surface-offset);height:220px;margin-bottom:var(--space-3)}.media-cover.tall{height:290px}.media-cover img,.model-card img,.thumb img,.frame-card img{width:100%;height:100%;object-fit:cover}.media-cover img{object-position:center 30%}.media-overlay{position:absolute;bottom:0;left:0;right:0;padding:var(--space-4);color:#fff;background:linear-gradient(transparent,rgba(0,0,0,.55));font-size:12px}.media-label{position:absolute;top:12px;left:12px;padding:5px 10px;font-size:11px;color:#222;background:rgba(255,255,255,.88);border-radius:var(--radius-full);font-weight:700}.media-sample{position:absolute;bottom:10px;right:12px;font-size:10px;letter-spacing:.09em;color:white;text-shadow:0 1px 3px #000}
.info-row{display:flex;align-items:flex-start;justify-content:space-between;gap:var(--space-3);padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider);font-size:14px;line-height:1.5}.info-row:last-child{border-bottom:0}.info-row span:first-child{color:var(--color-text-muted);flex:none}.info-row strong{text-align:right;font-size:14px;max-width:65%;word-break:keep-all}.info-row.emphasis strong{font-size:20px}.field{margin-bottom:var(--space-4)}.field label{display:block;font-size:13px;font-weight:700;margin-bottom:var(--space-2)}.field input,.field select,.field textarea{width:100%;min-height:46px;padding:var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px}.field textarea{min-height:86px;resize:vertical}.chip-row{display:flex;gap:var(--space-2);flex-wrap:wrap;margin-bottom:var(--space-4)}.chip{padding:8px 12px;border:1px solid var(--color-border);border-radius:var(--radius-full);font-size:12px;font-weight:600;background:var(--color-surface);min-height:36px}.chip:hover{border-color:var(--color-violet)}.toggle-row{display:flex;align-items:center;justify-content:space-between;gap:var(--space-3);min-height:58px;border-bottom:1px solid var(--color-divider);font-size:14px}.toggle-row small{display:block;color:var(--color-text-muted);font-size:12px;margin-top:2px}.switch{position:relative;width:38px;height:23px;flex:none;background:var(--color-border);border-radius:var(--radius-full)}.switch::after{content:"";position:absolute;top:3px;left:3px;width:17px;height:17px;border-radius:50%;background:white;transition:transform .18s}.switch.on{background:var(--color-violet)}.switch.on::after{transform:translateX(15px)}
.quality-track{margin:var(--space-5) 0}.quality-step{display:flex;align-items:center;gap:var(--space-3);font-size:14px;padding:var(--space-3) 0;border-bottom:1px solid var(--color-divider)}.quality-step b{color:var(--color-success)}.quality-bar{height:7px;background:var(--color-surface-offset);border-radius:var(--radius-full);overflow:hidden;margin:var(--space-5) 0}.quality-bar span{display:block;width:72%;height:100%;background:var(--color-violet)}.frame-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-2)}.frame-card{height:115px;border-radius:var(--radius-md);overflow:hidden;border:2px solid transparent;position:relative}.frame-card img{object-fit:cover}.frame-card:nth-child(1) img{object-position:25% 30%}.frame-card:nth-child(2) img{object-position:55% 30%}.frame-card:nth-child(3) img{object-position:75% 30%}.frame-card span{position:absolute;bottom:4px;left:6px;color:#fff;font-size:11px;text-shadow:0 1px 3px #000}.model-grid{display:grid;grid-template-columns:1fr 1fr;gap:var(--space-3)}.model-card{text-align:left;overflow:hidden;border:1px solid var(--color-border);border-radius:var(--radius-lg);background:var(--color-surface)}.model-card img{height:160px;object-fit:cover}.model-card span{display:block;padding:var(--space-2) var(--space-3);font-size:13px;font-weight:700}.model-card small{display:block;color:var(--color-text-muted);font-size:11px;font-weight:500}.model-card.active{border-color:var(--color-violet)}.thumb{width:46px;height:52px;border-radius:var(--radius-md);overflow:hidden;flex:none}.identity-row{display:flex;align-items:center;gap:var(--space-3);margin-bottom:var(--space-3)}.identity-row strong{font-size:14px}.identity-row small{display:block;font-size:12px;color:var(--color-text-muted)}.campaign-preview{position:relative;height:278px;overflow:hidden;border-radius:var(--radius-lg);background:#ded2ba;color:#fff;margin-bottom:var(--space-3)}.campaign-preview img{height:100%;width:100%;object-fit:cover;object-position:center 31%;filter:saturate(.82)}.campaign-preview:after{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(0,0,0,.12),transparent 35%,rgba(15,14,23,.58))}.campaign-copy{position:absolute;z-index:1;left:20px;bottom:22px;font-family:var(--font-display);font-size:25px;line-height:1.12;font-weight:700;letter-spacing:-.04em}.campaign-watermark{position:absolute;z-index:1;top:43%;left:10%;width:80%;text-align:center;transform:rotate(-18deg);font-family:var(--font-display);font-size:20px;font-weight:700;letter-spacing:.22em;color:rgba(255,255,255,.72)}.timeline{border-left:1px solid var(--color-border);margin:var(--space-5) 0 0 var(--space-2);padding-left:var(--space-5)}.timeline-item{position:relative;padding-bottom:var(--space-5);font-size:13px}.timeline-item::before{content:"";position:absolute;left:-25px;top:2px;width:9px;height:9px;border-radius:50%;background:var(--color-violet)}.timeline-item.muted::before{background:var(--color-border)}.timeline-item strong{display:block}.timeline-item small{color:var(--color-text-muted)}.error-text{font-size:12px;color:var(--color-error);margin:-8px 0 var(--space-3)}
#modal-root:empty{display:none}.modal-scrim{position:fixed;inset:0;z-index:50;display:grid;place-items:center;background:rgba(10,10,17,.58);padding:var(--space-4)}.modal{max-width:380px;width:100%;padding:var(--space-6);border-radius:var(--radius-xl);background:var(--color-surface);box-shadow:var(--shadow-lg)}.modal h2{font-size:20px;margin-bottom:var(--space-3)}.modal p{font-size:14px;color:var(--color-text-muted);line-height:1.7;margin-bottom:var(--space-5)}.modal-actions{display:flex;gap:var(--space-2)}.modal-actions button{flex:1}.modal-secondary{min-height:48px;border:1px solid var(--color-border);border-radius:var(--radius-md);font-size:14px}
@media(max-width:1140px){.workspace{grid-template-columns:minmax(210px,.8fr) minmax(400px,1.2fr);gap:var(--space-6)}.context-panel{display:none}}@media(max-width:760px){.topbar{height:58px;padding:0 var(--space-4)}.brand{font-size:21px}.brand-mark{width:24px;height:24px}.topbar-center,.prototype-label{display:none}.workspace{display:block;padding:var(--space-3) var(--space-4) var(--space-6)}.journey-panel{padding:0;margin-bottom:var(--space-4)}.journey-panel .eyebrow,.journey-panel h1,.journey-intro,.journey-footnote{display:none}.journey-nav{display:flex;overflow-x:auto;gap:var(--space-2);margin:0;padding-bottom:var(--space-2);scrollbar-width:none}.journey-nav::-webkit-scrollbar{display:none}.nav-section{display:flex;gap:var(--space-2);margin:0;flex:none}.nav-section-head{display:none}.nav-link{width:auto;min-height:40px;padding:var(--space-2) var(--space-3);background:var(--color-surface);border:1px solid var(--color-border);white-space:nowrap}.nav-link:not(.active) span:last-child{display:none}.stage-topline{display:none}.phone-frame{height:min(844px,calc(100dvh - 165px));max-height:none;min-height:580px}.outer-footer{display:none}}@media(max-width:430px){.workspace{padding:var(--space-2) 0 var(--space-4)}.journey-panel{padding:0 var(--space-3)}.phone-frame{border:0;border-radius:0;width:100%;box-shadow:none;height:calc(100dvh - 168px);min-height:545px}.phone-screen{border-top:1px solid var(--color-border)}.stage-controls{padding:var(--space-2) var(--space-5) 0}.phone-content{padding-left:var(--space-5);padding-right:var(--space-5)}.topbar{border-bottom:0}.home-indicator{margin-bottom:var(--space-1)}}@media(max-width:340px){.phone-content{padding-left:var(--space-4);padding-right:var(--space-4)}.phone-actions{padding-left:var(--space-4);padding-right:var(--space-4)}.screen-title{font-size:24px}.model-card img{height:120px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{animation-duration:.01ms!important;transition-duration:.01ms!important;scroll-behavior:auto!important}}