/* C-01 home + C-02 consult */
.hero{position:relative;overflow:hidden}
.hero__stage{position:relative;min-height:88vh;display:flex;align-items:center;padding:var(--space-10) 0 var(--space-16)}
/* 마당 인터랙티브 배경 — 콘텐츠 아래, 클릭은 통과 */
.hero__backdrop{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:0}
.hero__inner{position:relative;z-index:1;text-align:center;max-width:860px;margin:0 auto;width:100%}
.hero__title{font:800 64px/1.14 var(--font-sans);letter-spacing:-.025em;color:var(--text-strong);margin:0 0 var(--space-5)}
.hero__title .tw{color:var(--coral-500);border-bottom:6px solid var(--coral-100)}
.hero__title .caret{display:inline-block;width:4px;height:.85em;background:var(--coral-500);vertical-align:-6px;margin-left:2px;animation:blink 1s steps(1) infinite}
@keyframes blink{50%{opacity:0}}
.hero__sub{font:var(--text-body-lg);color:var(--text-muted);margin:0 auto var(--space-10);max-width:560px}
.hero__card{position:relative;background:var(--paper);border:1px solid var(--line-200);border-radius:var(--radius-xl);box-shadow:var(--shadow-3);padding:var(--space-6);text-align:left;transition:box-shadow .3s}
.is-live .hero__card{box-shadow:0 0 0 2px var(--forge-100),var(--shadow-4)}
.hero__frame-t,.hero__frame-b{position:absolute;left:-13px;right:-13px;height:58px;pointer-events:none;border:6px solid var(--forge-500)}
.hero__frame-t{top:-13px;border-bottom:none;border-radius:34px 34px 0 0}
.hero__frame-b{bottom:-13px;border-top:none;border-radius:0 0 34px 34px}
.hero__booting{position:absolute;inset:0;z-index:3;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:10px;text-align:center;padding:var(--space-6);border-radius:var(--radius-xl);background:rgba(253,251,247,.93);backdrop-filter:blur(3px)}
.hero__booting b{font:600 16px/1.4 var(--font-sans);color:var(--text-strong)}
.spinner{width:30px;height:30px;border-radius:50%;border:3px solid var(--line-200);border-top-color:var(--forge-500);animation:spin .8s linear infinite}
@keyframes spin{to{transform:rotate(360deg)}}
@media(prefers-reduced-motion:reduce){.spinner{animation-duration:2s}}
.hero__prompt{width:100%;border:none;resize:none;font:var(--text-body-lg);line-height:1.7;color:var(--text-strong);background:transparent;min-height:84px;font-family:var(--font-sans);border-radius:8px;transition:box-shadow .35s ease,background-color .35s ease}
.hero__prompt:focus{outline:none}
.hero__prompt.is-flash{background:rgba(37,99,235,.06);box-shadow:0 0 0 3px rgba(37,99,235,.22)}
.hero__prompt::placeholder{color:var(--text-faint)}
.hero__actions{display:flex;align-items:center;gap:var(--space-3);margin-top:var(--space-3);flex-wrap:wrap}
.hero__examples{display:flex;gap:8px;flex-wrap:wrap}
.hero__trust{display:flex;gap:var(--space-8);justify-content:center;margin-top:var(--space-10);flex-wrap:wrap}
.hero__trust .item{display:flex;align-items:center;gap:9px;font:600 13.5px/1 var(--font-sans);color:var(--text-muted)}
@media(max-width:860px){.hero__title{font-size:40px}.hero__stage{min-height:auto}}

.marquee{border-top:1px solid var(--line-100);border-bottom:1px solid var(--line-100);overflow:hidden;padding:14px 0;background:var(--paper)}
.marquee__track{display:flex;gap:56px;white-space:nowrap;animation:mq 26s linear infinite;font:600 13px/1 var(--font-mono);letter-spacing:.14em;color:var(--ink-400)}
.marquee__track .dot{width:6px;height:6px;align-self:center}
@keyframes mq{to{transform:translateX(-50%)}}

.ink{background:var(--ink-900);color:#F5F2EA;padding:var(--space-24) 0}
.ink .eyebrow{color:#8F8A80}.ink .eyebrow::before{background:var(--forge-500)}
.ink__grid{display:grid;grid-template-columns:1fr 1.1fr;gap:var(--space-16);align-items:center}
@media(max-width:960px){.ink__grid{grid-template-columns:1fr}}
.ink h2{color:#fff;font:700 44px/1.25 var(--font-sans);letter-spacing:-.02em;margin:0 0 var(--space-5)}
.ink p{color:#CFCAC0;font:var(--text-body-lg);margin:0}
.ink .accent{color:#FF7B50}
.term{background:#151411;border:1px solid #38352E;border-radius:var(--radius-lg);box-shadow:var(--shadow-4);overflow:hidden}
.term__bar{display:flex;gap:7px;padding:13px 16px;border-bottom:1px solid #2E2B25}
.term__bar i{width:11px;height:11px;border-radius:50%;background:#38352E}
.term__bar i:first-child{background:#E5484D}.term__bar i:nth-child(2){background:#F0A028}.term__bar i:nth-child(3){background:#2BC48A}
.term__body{padding:var(--space-5) var(--space-6);font:12.5px/2.1 var(--font-mono);min-height:220px}
.term--cmd{color:#F5F2EA}.term--ok{color:#9B958A}.term--done{color:#3BD69B;font-weight:600}
.ink__stats{display:flex;gap:var(--space-10);margin-top:var(--space-8);flex-wrap:wrap}
.ink__stats b{display:block;font:700 34px/1.1 var(--font-mono);color:#fff}
.ink__stats span{font:var(--text-caption);color:#9B958A}

.estdemo{display:grid;grid-template-columns:380px 1fr;gap:var(--space-12);align-items:start}
@media(max-width:960px){.estdemo{grid-template-columns:1fr}}
.esttoggle{display:flex;align-items:center;justify-content:space-between;gap:12px;padding:14px 16px;border:1px solid var(--line-200);border-radius:var(--radius-md);background:var(--paper);cursor:pointer;transition:border-color .15s,box-shadow .15s;margin-bottom:var(--space-3);font:var(--text-label)}
.esttoggle:hover{box-shadow:var(--shadow-1)}
.esttoggle input{display:none}
.esttoggle .sw{width:40px;height:24px;border-radius:999px;background:var(--line-200);position:relative;transition:background .18s;flex-shrink:0}
.esttoggle .sw::after{content:'';position:absolute;top:3px;left:3px;width:18px;height:18px;border-radius:50%;background:#fff;box-shadow:var(--shadow-1);transition:left .18s}
.esttoggle input:checked+.sw{background:var(--forge-500)}
.esttoggle input:checked+.sw::after{left:19px}
.esttoggle:has(input:checked){border-color:var(--forge-500);box-shadow:0 0 0 2px var(--forge-50)}
.estslider{margin:var(--space-5) 0}
.estslider input{width:100%;accent-color:var(--coral-500)}
.epart{display:flex;align-items:center;gap:12px;margin-bottom:11px;font:var(--text-body-sm)}
.epart b{width:110px;flex-shrink:0;font-weight:600;color:var(--text-body)}
.epart .amt{width:64px;text-align:right;font-family:var(--font-mono);font-size:12px;color:var(--text-muted)}
.price-bar__fill{transition:width .45s cubic-bezier(.2,.7,.2,1)}
.esttotal{display:flex;align-items:baseline;justify-content:space-between;flex-wrap:wrap;gap:8px;border-top:1px solid var(--line-100);padding-top:var(--space-5);margin-top:var(--space-5)}
.esttotal b{font:700 42px/1 var(--font-mono);letter-spacing:-.02em;color:var(--text-strong)}
.esttotal b small{font:600 15px/1 var(--font-sans);color:var(--text-muted)}

.howto{counter-reset:hstep}
.howto .card{position:relative;counter-increment:hstep;padding-top:var(--space-8)}
.howto .card::before{content:counter(hstep,decimal-leading-zero);position:absolute;top:var(--space-5);right:var(--space-6);font:700 13px/1 var(--font-mono);color:var(--forge-500)}
.howto .card p{font:var(--text-body-sm);color:var(--text-muted);margin:6px 0 0}
.counters{display:grid;grid-template-columns:repeat(4,1fr);gap:var(--space-6);text-align:center}
@media(max-width:860px){.counters{grid-template-columns:repeat(2,1fr)}}
.counters b{display:block;font:800 52px/1.1 var(--font-mono);letter-spacing:-.02em;color:var(--text-strong)}
.counters span{font:var(--text-body-sm);color:var(--text-muted)}
.mstrip{display:flex;gap:var(--space-2);overflow-x:auto;padding-bottom:var(--space-2)}
.mstrip .m{flex:1;min-width:150px;border:1px solid var(--line-200);border-radius:var(--radius-md);padding:var(--space-4);background:var(--paper);transition:transform .18s,box-shadow .18s}
.mstrip .m:hover{transform:translateY(-4px);box-shadow:var(--shadow-2)}
.mstrip .m b{display:block;font:600 13.5px/1.5 var(--font-sans);color:var(--text-strong);margin-top:8px}
.mstrip .m span{font:var(--text-caption);color:var(--text-muted)}

.story{position:relative;min-height:520px;display:flex;align-items:center;background:var(--fill-100)}
.story__img{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.story__scrim{position:absolute;inset:0;background:var(--ink-900)}
.story__inner{position:relative;color:#fff;text-align:center;width:100%;padding:var(--space-24) 28px}
.story__inner .t-caption{color:rgba(255,255,255,.75);letter-spacing:.16em;text-transform:uppercase;font-weight:600}
.story__inner h2{color:#fff;font:800 52px/1.25 var(--font-sans);letter-spacing:-.02em;margin:var(--space-4) 0}
.story__inner p{color:rgba(255,255,255,.88);font:var(--text-body-lg);max-width:520px;margin:0 auto;word-break:keep-all;overflow-wrap:break-word}
@media(max-width:860px){.story__inner h2{font-size:34px}}

.resume-banner{background:var(--forge-50);border-bottom:1px solid var(--forge-100)}
.resume-banner .wrap{display:flex;align-items:center;gap:12px;padding-top:10px;padding-bottom:10px;flex-wrap:wrap}

.consult{display:grid;grid-template-columns:1fr 300px;gap:var(--space-8);max-width:1120px;margin:0 auto;padding:var(--space-8) 28px 140px}
@media(max-width:960px){.consult{grid-template-columns:1fr}}
.cprog{display:flex;align-items:center;gap:6px;font:600 12.5px/1 var(--font-sans);color:var(--text-faint)}
.cprog b{color:var(--text-strong)}
.cprog .sep{width:16px;height:1px;background:var(--line-200)}
.cprog .now{color:var(--forge-600)}
.refgrid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--space-3);margin-top:var(--space-2)}
@media(max-width:720px){.refgrid{grid-template-columns:repeat(2,1fr)}}
.refcard{padding:0;overflow:hidden;cursor:pointer}
.refcard .shot{height:96px;background:var(--fill-100);position:relative;display:flex;align-items:center;justify-content:center}
.refcard .body{padding:var(--space-3) var(--space-4)}
.refcard .body b{display:block;font:600 13.5px/1.4 var(--font-sans);color:var(--text-strong)}
.refcard .body span{font:var(--text-caption);color:var(--text-muted)}
.refcard.is-locked .shot,.refcard.is-locked .body{filter:blur(4px);pointer-events:none;user-select:none}
.refcard .lock{position:absolute;inset:0;display:flex;flex-direction:column;gap:6px;align-items:center;justify-content:center;z-index:2;font:600 12.5px/1.5 var(--font-sans);color:var(--text-strong);background:rgba(253,251,247,.55)}
.refcard--skeleton{pointer-events:none;cursor:default}
.refcard--skeleton .shot,.refcard--skeleton .body b,.refcard--skeleton .body span{background:linear-gradient(90deg,var(--fill-100) 25%,var(--fill-200) 50%,var(--fill-100) 75%);background-size:200% 100%;animation:shimmer 1.4s ease-in-out infinite}
.refcard--skeleton .body b{display:block;height:14px;width:72%;border-radius:4px;margin-bottom:6px}
.refcard--skeleton .body span{display:block;height:11px;width:90%;border-radius:4px}
@keyframes shimmer{0%{background-position:200% 0}100%{background-position:-200% 0}}
.bench-status{display:flex;align-items:center;gap:8px}
.spinner--sm{width:16px;height:16px;border-width:2px;flex-shrink:0}
.sidepanel{position:sticky;top:calc(var(--header-h) + 24px);align-self:start;display:flex;flex-direction:column;max-height:calc(100dvh - var(--header-h) - 24px - 96px);min-height:0}
.sidepanel > :not(.livelog){flex-shrink:0}
.sidepanel .livelog{flex:1 1 auto;min-height:0;overflow-x:hidden;overflow-y:auto;overscroll-behavior:contain;overflow-anchor:none;scrollbar-width:none;-ms-overflow-style:none}
.sidepanel .livelog::-webkit-scrollbar{display:none}
.inputbar{position:fixed;left:0;right:0;bottom:0;z-index:50;background:rgba(253,251,247,.97);backdrop-filter:blur(10px);border-top:2px solid var(--forge-500);box-shadow:0 -10px 30px rgba(31,30,28,.08);padding:14px 0}
.inputbar .wrap{display:flex;gap:var(--space-3);align-items:flex-end}
.inputbar textarea{flex:1;min-height:56px;max-height:120px;border:1.5px solid var(--line-300,var(--line-200));border-radius:var(--radius-lg);background:#fff;font-size:15px}
.inputbar textarea:focus{border-color:var(--forge-500);box-shadow:0 0 0 3px rgba(15,163,177,.14);outline:none}
.shot--link{cursor:pointer}
.shot--link:hover::after{content:"↗ 사이트 열기";position:absolute;right:8px;bottom:8px;z-index:1;background:rgba(31,30,28,.78);color:#fff;font:600 11px/1 var(--font-sans);padding:6px 8px;border-radius:6px}
.typing{display:inline-flex;gap:4px;padding:14px 18px}
.typing i{width:6px;height:6px;border-radius:50%;background:var(--ink-300);animation:tp 1.2s infinite}
.typing i:nth-child(2){animation-delay:.15s}.typing i:nth-child(3){animation-delay:.3s}
@keyframes tp{0%,60%,100%{opacity:.3;transform:none}30%{opacity:1;transform:translateY(-3px)}}
.msg__bubble.is-clickable{cursor:pointer;outline:1px dashed transparent}
.msg__bubble.is-clickable:hover{outline-color:var(--line-200)}
.consult-boot{min-height:50vh;display:flex;align-items:center;justify-content:center;padding:48px;text-align:center}