:root { --ink:#070707; --charcoal:#111111; --panel:#151515; --paper:#f2f2ee; --muted:#aaa9a3; --line:rgba(255,255,255,.13); --lime:#d8f233; --lime-soft:rgba(216,242,51,.09); --danger:#ff826e; --display:"Bebas Neue", "Noto Sans KR", sans-serif; --body:"Inter", "Noto Sans KR", sans-serif; --ease:cubic-bezier(.2,.78,.2,1); }
* { box-sizing:border-box; } html { background:var(--ink); color:var(--paper); font-family:var(--body); } body { min-width:320px; min-height:100svh; margin:0; overflow-x:hidden; background:radial-gradient(72vw 70vh at 86% -10%,rgba(216,242,51,.09),transparent 58%), var(--ink); } button, input, textarea, select { font:inherit; } button, a, label { -webkit-tap-highlight-color:transparent; } button { cursor:pointer; } button:disabled { cursor:not-allowed; } a { color:inherit; text-decoration:none; } .skip-link { position:fixed; z-index:100; top:9px; left:9px; padding:9px 12px; transform:translateY(-150%); border-radius:5px; background:var(--lime); color:#050505; font-weight:800; } .skip-link:focus { transform:translateY(0); }
.quick-header { display:flex; align-items:center; justify-content:space-between; min-height:82px; padding:0 clamp(18px,5vw,76px); border-bottom:1px solid var(--line); background:rgba(5,5,5,.82); backdrop-filter:blur(16px); } .wordmark { display:flex; align-items:center; gap:9px; } .wordmark b { font-family:var(--display); font-size:34px; letter-spacing:.035em; } .wordmark em { padding-left:9px; border-left:1px solid var(--line); color:var(--muted); font-size:9px; font-style:normal; font-weight:800; letter-spacing:.13em; } .mark { position:relative; width:20px; height:25px; border:4px solid var(--paper); border-bottom:0; transform:skew(-10deg); } .mark:after { position:absolute; right:-4px; bottom:4px; width:12px; height:4px; background:var(--lime); content:""; } .header-status { display:flex; align-items:center; gap:7px; color:var(--muted); font-size:9px; font-weight:700; letter-spacing:.08em; } .live-dot { width:6px; height:6px; border-radius:50%; background:var(--lime); box-shadow:0 0 0 5px rgba(216,242,51,.1); } .studio-link { min-height:37px; padding:0 14px; display:flex; align-items:center; gap:8px; border:1px solid var(--line); border-radius:99px; color:var(--paper); font-size:10px; font-weight:800; } .studio-link:hover { border-color:var(--lime); color:var(--lime); }
#quick-main { width:min(1180px,100%); margin:0 auto; padding:clamp(42px,7vw,94px) clamp(16px,4vw,38px) 90px; } .quick-hero { display:grid; grid-template-columns:minmax(0,1.18fr) minmax(230px,.53fr); align-items:end; gap:30px; margin-bottom:42px; } .eyebrow { display:block; margin:0 0 9px; color:var(--muted); font-size:9px; font-weight:900; letter-spacing:.17em; } .eyebrow.lime,.lime { color:var(--lime); } h1,h2,h3,p { margin-top:0; } .quick-hero h1 { margin-bottom:0; font-family:var(--display); font-size:clamp(62px,9.5vw,130px); font-weight:400; line-height:.82; letter-spacing:.015em; text-transform:uppercase; } .quick-hero h1 span { color:var(--lime); } .quick-hero>p { max-width:360px; margin:0 0 3px; color:var(--muted); font-size:13px; line-height:1.8; }
.progress-shell { margin-bottom:16px; border:1px solid var(--line); border-radius:12px; background:rgba(255,255,255,.018); } .progress-list { display:grid; grid-template-columns:repeat(4,1fr); margin:0; padding:0; list-style:none; } .progress-list li { position:relative; display:flex; align-items:center; gap:8px; min-height:56px; padding:0 16px; color:var(--muted); font-size:10px; font-weight:800; } .progress-list li+li:before { position:absolute; top:18px; left:0; width:1px; height:20px; background:var(--line); content:""; } .progress-list b { color:var(--paper); font-family:var(--display); font-size:21px; font-weight:400; } .progress-list .is-active { color:var(--lime); background:var(--lime-soft); } .progress-list .is-active b { color:var(--lime); }
.quick-flow { min-height:600px; padding:clamp(23px,4vw,48px); border:1px solid var(--line); border-radius:17px; background:linear-gradient(140deg,rgba(255,255,255,.04),rgba(255,255,255,.008)); box-shadow:0 30px 80px rgba(0,0,0,.2); } .quick-step { animation:step-in .35s var(--ease); } @keyframes step-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } } .step-title { display:flex; align-items:flex-start; gap:16px; } .step-title>span { display:grid; flex:0 0 auto; width:35px; height:35px; place-items:center; border:1px solid var(--lime); border-radius:50%; color:var(--lime); font-size:11px; font-weight:900; } .step-title h2 { margin-bottom:8px; font-family:var(--display); font-size:clamp(35px,5vw,61px); font-weight:400; line-height:.9; letter-spacing:.02em; } .step-title p:last-child { max-width:620px; margin-bottom:0; color:var(--muted); font-size:12px; line-height:1.65; }
.industry-grid { display:grid; grid-template-columns:repeat(5,1fr); gap:10px; margin-top:43px; } .industry-card,.format-card { min-height:180px; padding:17px; border:1px solid var(--line); border-radius:11px; background:rgba(255,255,255,.02); color:var(--muted); text-align:left; transition:.22s var(--ease); } .industry-card:hover,.industry-card.is-selected,.format-card:hover,.format-card.is-selected { border-color:var(--lime); background:var(--lime-soft); transform:translateY(-3px); } .industry-card i { display:grid; width:34px; height:34px; place-items:center; margin-bottom:37px; border:1px solid var(--line); border-radius:50%; color:var(--lime); font-size:17px; font-style:normal; } .industry-card b,.industry-card small { display:block; } .industry-card b { color:var(--paper); font-size:13px; } .industry-card.is-selected b { color:var(--lime); } .industry-card small { margin-top:6px; font-size:9px; line-height:1.4; }
.step-actions { display:flex; justify-content:space-between; gap:10px; margin-top:42px; } .step-actions.end { justify-content:flex-end; } .primary-button,.secondary-button { display:inline-flex; min-height:43px; align-items:center; justify-content:center; gap:18px; padding:0 17px; border-radius:7px; font-size:10px; font-weight:900; letter-spacing:.04em; transition:.2s var(--ease); } .primary-button { border:1px solid var(--lime); background:var(--lime); color:#0b0b08; } .primary-button:hover { box-shadow:0 0 28px rgba(216,242,51,.25); transform:translateY(-2px); } .primary-button b { font-size:17px; } .secondary-button { border:1px solid var(--line); background:rgba(255,255,255,.018); color:var(--paper); } .secondary-button:hover { border-color:var(--lime); color:var(--lime); }
.product-form-grid { display:grid; grid-template-columns:minmax(260px,.92fr) minmax(300px,1.08fr); gap:17px; margin-top:37px; } .photo-input-card,.field-stack,.panel { min-width:0; border:1px solid var(--line); border-radius:12px; background:rgba(0,0,0,.17); } .photo-input-card { padding:15px; } .photo-drop { display:grid; min-height:242px; place-content:center; place-items:center; gap:10px; border:1px dashed rgba(216,242,51,.48); border-radius:8px; background:radial-gradient(circle at center,rgba(216,242,51,.08),transparent 60%); text-align:center; cursor:pointer; } .photo-drop .plus { color:var(--lime); font-size:41px; font-weight:300; line-height:1; } .photo-drop b { font-size:13px; } .photo-drop small,.field-note { color:var(--muted); font-size:9px; line-height:1.6; } .photo-list { display:flex; flex-wrap:wrap; gap:7px; min-height:0; margin-top:10px; } .photo-thumb { position:relative; width:62px; height:62px; overflow:hidden; border:1px solid var(--line); border-radius:7px; background:#222; } .photo-thumb img { width:100%; height:100%; object-fit:cover; } .photo-thumb span { position:absolute; right:3px; bottom:3px; display:grid; width:14px; height:14px; place-items:center; border-radius:50%; background:var(--lime); color:#000; font-size:7px; font-weight:900; } .field-note { margin:10px 1px 0; } .field-stack { display:flex; flex-direction:column; gap:13px; padding:18px; } .field-label { display:grid; gap:7px; color:var(--muted); font-size:9px; font-weight:800; letter-spacing:.04em; } input,textarea,select { width:100%; border:1px solid var(--line); border-radius:6px; outline:none; background:#0d0d0d; color:var(--paper); } input,select { min-height:42px; padding:0 11px; } textarea { padding:11px; resize:vertical; line-height:1.55; } input:focus,textarea:focus,select:focus { border-color:var(--lime); box-shadow:0 0 0 3px rgba(216,242,51,.08); } .consent-line { margin:0; padding:11px; border-left:2px solid var(--lime); background:var(--lime-soft); color:var(--muted); font-size:9px; line-height:1.65; } .consent-line b { color:var(--lime); }
.format-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:11px; margin-top:40px; } .format-card { min-height:223px; display:flex; flex-direction:column; } .format-card>span { color:var(--lime); font-family:var(--display); font-size:24px; } .format-card b { margin-top:auto; color:var(--paper); font-family:var(--display); font-size:36px; font-weight:400; letter-spacing:.02em; } .format-card.is-selected b { color:var(--lime); } .format-card p { margin:9px 0; font-size:10px; line-height:1.6; } .format-card small { color:var(--muted); font-size:8px; } .duration-choice { display:flex; align-items:end; gap:10px; margin-top:30px; padding-top:22px; border-top:1px solid var(--line); } .duration-choice .eyebrow { min-width:96px; margin:0 10px 12px 0; } .duration-button { display:grid; grid-template-columns:auto auto; align-items:baseline; column-gap:4px; min-width:118px; padding:11px 14px; border:1px solid var(--line); border-radius:8px; background:transparent; color:var(--paper); text-align:left; } .duration-button b { font-family:var(--display); font-size:37px; font-weight:400; line-height:.8; } .duration-button span { color:var(--muted); font-size:11px; font-weight:800; } .duration-button small { grid-column:1/-1; margin-top:8px; color:var(--muted); font-size:8px; } .duration-button.is-selected { border-color:var(--lime); background:var(--lime-soft); } .duration-button.is-selected b { color:var(--lime); }
.result-heading { display:flex; align-items:flex-start; justify-content:space-between; gap:18px; } .result-grid { display:grid; grid-template-columns:minmax(255px,.72fr) minmax(0,1.28fr); gap:15px; margin-top:31px; } .vertical-preview { padding:11px; } .preview-top { display:flex; align-items:center; justify-content:space-between; min-height:30px; padding:0 5px 9px; color:var(--muted); font-size:8px; font-weight:900; letter-spacing:.13em; } .play-button { display:grid; width:30px; height:30px; place-items:center; border:1px solid var(--lime); border-radius:50%; background:transparent; color:var(--lime); font-size:9px; } .ad-screen { position:relative; min-height:536px; overflow:hidden; border-radius:8px; background:linear-gradient(160deg,#232323,#0a0a0a 65%); } .ad-screen.is-playing .ad-image { animation:ad-image 3s var(--ease) infinite; } .ad-screen.is-playing .ad-copy { animation:ad-copy 3s var(--ease) infinite; } .ad-screen.is-playing .ad-progress i { animation:ad-progress 3s linear infinite; } @keyframes ad-image { 0%,100% { transform:scale(1); filter:saturate(.85); } 50% { transform:scale(1.1); filter:saturate(1.25); } } @keyframes ad-copy { 0%,12% { opacity:0; transform:translateY(15px); } 25%,82% { opacity:1; transform:none; } 100% { opacity:0; } } @keyframes ad-progress { from { transform:scaleX(0); } to { transform:scaleX(1); } } .ad-grid { position:absolute; inset:0; background-image:linear-gradient(rgba(216,242,51,.06) 1px,transparent 1px),linear-gradient(90deg,rgba(216,242,51,.06) 1px,transparent 1px); background-size:27px 27px; mask-image:linear-gradient(transparent,black 25%,black 70%,transparent); } .ad-image { position:absolute; inset:18% 9% 34%; display:grid; overflow:hidden; place-items:center; border:1px solid rgba(216,242,51,.45); border-radius:50% 50% 9% 9%; background:radial-gradient(circle at 35% 30%,rgba(216,242,51,.65),rgba(216,242,51,.1) 34%,transparent 65%); transition:.4s var(--ease); } .ad-image img { width:100%; height:100%; object-fit:cover; mix-blend-mode:screen; } .ad-image span { color:var(--paper); font-family:var(--display); font-size:45px; line-height:.82; text-align:center; } .ad-copy { position:absolute; right:18px; bottom:28px; left:18px; } .ad-copy small { color:var(--lime); font-size:8px; font-weight:900; letter-spacing:.17em; } .ad-copy strong { display:block; margin:11px 0; font-family:var(--display); font-size:55px; font-weight:400; line-height:.82; letter-spacing:.01em; } .ad-copy p { margin:0; color:#d3d3cd; font-size:10px; line-height:1.55; } .ad-progress { position:absolute; right:18px; bottom:12px; left:18px; height:2px; overflow:hidden; background:rgba(255,255,255,.2); } .ad-progress i { display:block; width:100%; height:100%; transform-origin:left; background:var(--lime); } .preview-note { margin:9px 4px 1px; color:var(--muted); font-size:8px; line-height:1.45; }
.planning-pack { display:grid; grid-template-columns:1fr 1fr; gap:12px; align-content:start; } .result-card { padding:15px; } .card-head { display:flex; align-items:center; justify-content:space-between; gap:8px; } .card-head .eyebrow { margin:0; } .card-head small { color:var(--muted); font-size:8px; } .hook-list { display:grid; gap:6px; margin-top:13px; } .hook-choice { width:100%; padding:11px; border:1px solid var(--line); border-radius:7px; background:rgba(255,255,255,.018); color:var(--muted); text-align:left; } .hook-choice b { display:block; color:var(--paper); font-size:10px; line-height:1.45; } .hook-choice small { display:block; margin-top:5px; font-size:8px; } .hook-choice.is-selected { border-color:var(--lime); background:var(--lime-soft); } .hook-choice.is-selected b { color:var(--lime); } .storyboard-list { display:grid; gap:8px; margin:13px 0 0; padding:0; list-style:none; } .storyboard-list li { display:grid; grid-template-columns:21px 1fr; gap:8px; padding-top:8px; border-top:1px solid var(--line); } .storyboard-list b { color:var(--lime); font-size:8px; } .storyboard-list strong { display:block; font-size:10px; } .storyboard-list span { display:block; margin-top:3px; color:var(--muted); font-size:8px; line-height:1.45; } .script-card { grid-column:1/-1; } .text-button { padding:0; border:0; background:transparent; color:var(--lime); font-size:8px; font-weight:900; } .text-button:hover { color:var(--paper); } pre { overflow:auto; margin:13px 0 0; padding:12px; border-left:2px solid var(--lime); background:#0b0b0b; color:#d5d5ce; font:9px/1.72 var(--body); white-space:pre-wrap; } .adapter-note { margin:11px 0 0; color:var(--muted); font-size:8px; line-height:1.55; } .adapter-note b { color:var(--paper); } .cta-copy { display:block; margin:14px 0 8px; color:var(--lime); font-family:var(--display); font-size:32px; font-weight:400; line-height:.9; } .post-copy { margin:0; color:var(--muted); font-size:9px; line-height:1.6; }
.locked-delivery { display:flex; align-items:center; justify-content:space-between; gap:24px; margin-top:15px; padding:20px; border-color:rgba(216,242,51,.36); background:linear-gradient(125deg,rgba(216,242,51,.095),rgba(255,255,255,.018)); } .locked-delivery h3 { margin:4px 0 8px; font-family:var(--display); font-size:39px; font-weight:400; line-height:.9; } .locked-delivery p { max-width:540px; margin:0; color:var(--muted); font-size:9px; line-height:1.6; } .locked-features { display:flex; gap:7px; } .locked-features button { display:grid; min-width:100px; min-height:86px; align-content:center; gap:4px; padding:8px; border:1px solid var(--line); border-radius:7px; background:rgba(0,0,0,.25); color:var(--muted); } .locked-features b { color:#777; font-family:var(--display); font-size:24px; font-weight:400; } .locked-features span { color:var(--paper); font-size:8px; font-weight:800; } .locked-features small { color:#777; font-size:7px; }
.ad-notice { display:grid; grid-template-columns:100px 1fr; gap:15px; margin-top:15px; padding:16px 0; border-bottom:1px solid var(--line); color:var(--muted); } .ad-notice>span { color:var(--lime); font-size:8px; font-weight:900; letter-spacing:.12em; } .ad-notice p { margin:0; font-size:9px; line-height:1.75; } .ad-notice b { color:var(--paper); }
.toast { position:fixed; z-index:30; bottom:22px; left:50%; max-width:calc(100vw - 34px); padding:12px 15px; transform:translate(-50%,20px); border:1px solid rgba(216,242,51,.5); border-radius:8px; background:rgba(12,12,12,.95); box-shadow:0 15px 40px rgba(0,0,0,.5); color:var(--lime); font-size:10px; font-weight:800; opacity:0; pointer-events:none; transition:.28s var(--ease); } .toast.is-on { transform:translate(-50%,0); opacity:1; }
@media (max-width:850px) { .quick-hero { grid-template-columns:1fr; }.quick-hero>p { max-width:500px; }.industry-grid { grid-template-columns:repeat(3,1fr); }.result-grid { grid-template-columns:1fr; }.vertical-preview { max-width:425px; }.locked-delivery { align-items:flex-start; flex-direction:column; }.planning-pack { grid-template-columns:1fr 1fr; } }
@media (max-width:600px) { .quick-header { min-height:65px; padding:0 15px; }.wordmark b { font-size:27px; }.wordmark em,.header-status { display:none; }.studio-link { min-height:33px; padding:0 10px; font-size:8px; } #quick-main { padding:39px 13px 55px; }.quick-hero { margin-bottom:29px; }.quick-hero h1 { font-size:clamp(59px,18vw,77px); }.quick-hero>p { font-size:11px; }.progress-list li { min-height:51px; justify-content:center; padding:0 7px; }.progress-list b { font-size:18px; }.progress-list span { display:none; }.quick-flow { min-height:540px; padding:22px 13px; border-radius:13px; }.step-title { gap:11px; }.step-title h2 { font-size:42px; }.step-title p:last-child { font-size:10px; }.industry-grid { grid-template-columns:1fr 1fr; margin-top:28px; }.industry-card { min-height:128px; }.industry-card i { margin-bottom:20px; }.industry-card:last-child { grid-column:1/-1; }.step-actions { margin-top:30px; }.product-form-grid,.format-grid { grid-template-columns:1fr; margin-top:28px; }.photo-drop { min-height:195px; }.format-card { min-height:160px; }.format-card b { margin-top:23px; }.duration-choice { align-items:stretch; flex-wrap:wrap; }.duration-choice .eyebrow { width:100%; margin:0 0 3px; }.duration-button { flex:1; }.result-heading { flex-direction:column; }.result-grid { margin-top:24px; }.ad-screen { min-height:490px; }.planning-pack { grid-template-columns:1fr; }.script-card { grid-column:auto; }.locked-features { width:100%; }.locked-features button { min-width:0; flex:1; }.locked-delivery h3 { font-size:33px; }.ad-notice { grid-template-columns:1fr; gap:6px; }.result-step .step-actions { flex-direction:column; }.result-step .step-actions>* { width:100%; }.step-actions .primary-button,.step-actions .secondary-button { flex:1; }.step-actions.end .primary-button { flex:0 1 auto; } }
@media (prefers-reduced-motion:reduce) { *,*:before,*:after { animation-duration:.001ms!important; animation-iteration-count:1!important; transition-duration:.001ms!important; } }