/* 기존 색·글꼴·버튼·3D 무대는 유지한다. 낮고 넓은 띠 전체를 좌우로 밀어 넘긴다. */
.is-home .header{background:var(--paper);border-color:var(--ui-line);color:var(--ui-accent)}.is-home .brand-dot{color:#2b8bb2}.is-home nav a{color:#445d6b}.is-home nav a:hover{color:#102f40}.is-home .nav-actions .dark{background:#1c3d4f;color:#f4fbff}.is-home .header .text-button{color:#395463}
.product-hero.home-showcase{display:flex;flex-direction:column;min-height:0;padding:12px 0;gap:0;margin:0;background:var(--paper);color:var(--ui-accent);overflow:hidden}
.showcase-track{display:grid;position:relative;isolation:isolate;overflow:hidden;outline-offset:-3px;touch-action:pan-y}
/* 배경 띠는 화면을 채우고, 내용은 아래 홈 섹션과 같은 1200px 기준선에 맞춘다. */
.showcase-card{position:relative;isolation:isolate;grid-area:1/1;width:100%;min-width:0;display:grid;grid-template-columns:minmax(0,.92fr) minmax(0,1.15fr);align-items:center;gap:clamp(32px,4vw,56px);min-height:clamp(400px,calc(100svh - 490px),560px);padding:32px max(40px,calc((100% - 1200px)/2));border:0;border-radius:0;overflow:hidden;background:var(--card-surface,var(--ui-accent-soft));color:var(--ui-accent);transform-origin:center;transform:translate3d(var(--slide-x,100%),0,0);transition:transform .6s cubic-bezier(.2,.75,.2,1)}
.showcase-card.is-active{transform:translate3d(calc(var(--slide-x,0%) + var(--drag,0px)),0,0);opacity:1}
.showcase-card.is-leaving,.showcase-card.is-entering{transform:translate3d(-100%,0,0);pointer-events:none}
.showcase-card.is-entering,.showcase-card.is-resetting{transition:none!important}
.showcase-track.is-dragging .showcase-card.is-active{transition:none;cursor:grabbing;user-select:none}
.showcase-card:not(.is-active){pointer-events:none}
.showcase-visual{min-width:0;align-self:center}
.showcase-arrows{display:flex;gap:4px;justify-self:end}.showcase-arrows button{display:grid;place-items:center;width:44px;height:44px;min-height:44px;border-radius:50%;color:var(--ui-accent);font-size:21px}.showcase-arrows button[hidden]{display:none}.showcase-arrows button:hover{background:var(--ui-surface-2)}.showcase-arrows button:focus-visible{outline-offset:-3px}:is(.hero-cta,.showcase-copy)>.button{background:var(--ui-accent);color:#fff;border:1px solid var(--ui-accent);border-radius:100px;min-height:54px;padding:8px 11px 8px 25px;gap:24px;font-size:15px;font-weight:600;letter-spacing:-.015em;max-width:100%;transition:background .18s,border-color .18s,transform .18s;box-shadow:0 2px 3px #16362d0a}:is(.hero-cta,.showcase-copy)>.button:hover{background:var(--ui-accent-hover);border-color:var(--ui-accent-hover);filter:none}:is(.hero-cta,.showcase-copy)>.button:active{transform:translateY(1px)}:is(.hero-cta,.showcase-copy)>.button:focus-visible{outline:3px solid #4b7291;outline-offset:4px}
.showcase-motion .design-stage{margin:0;padding:0 22px 14px;background:#fff;border-radius:18px;color:#344957;overflow:hidden}
.showcase-motion .stage-topline h2{color:#2e4352}.showcase-motion .stage-kicker{color:var(--text-secondary)}.showcase-motion .stage-views{background:var(--paper);border-color:var(--ui-line)}.showcase-motion .stage-views::before{background:#fff;box-shadow:0 2px 6px #27465f17,inset 0 0 0 1px var(--line)}.showcase-motion .stage-views button{color:var(--muted)}.showcase-motion .stage-views button[aria-pressed=true]{color:#244d65}.showcase-motion .stage-description{color:var(--text-secondary)}.showcase-motion .stage-controls{border-color:#cbd6df}.showcase-motion .stage-play{background:var(--ui-accent);color:#fff}.showcase-motion .stage-play:hover{background:var(--ui-accent-hover)}.showcase-motion .stage-recenter{right:22px;border-color:#e3eaef;background:#ffffffe6;color:#50687a}.showcase-motion .stage-recenter:hover{background:#fff}.showcase-motion .motion-control>span{color:var(--muted)}.showcase-motion .motion-control strong{color:#2e4352}.showcase-motion .motion-control input{accent-color:#577c99}.showcase-motion .viewer-status,.showcase-motion .design-stage:not([data-viewer-state]) .canvas-frame:has(canvas)::after{background:var(--ui-surface-2);color:#506e86}.showcase-motion .viewer-status a{color:#365e7b}.showcase-motion .stage-side{background:#fff;border-color:var(--ui-line)}.showcase-motion .bom-title{color:#486580;border-color:#ccd9e4}.showcase-motion .bom-item{color:#446481;border-color:#d5dfe8}.showcase-motion .bom-item:hover,.showcase-motion .bom-item.selected{background:#dce7f0;color:#214764}
.showcase-motion .stage-topline{padding-top:16px;gap:12px 14px;border:0;flex-wrap:wrap}.showcase-motion .stage-topline h2{font-size:15px}
.showcase-motion .canvas-frame{height:clamp(170px,calc(100svh - 759px),260px);min-height:0;margin:0 -22px;flex:none}
.showcase-motion .stage-side{right:22px;top:12px;bottom:12px;width:220px}
.showcase-motion .stage-description{font-size:11px;gap:10px;padding-bottom:12px}.showcase-motion .stage-controls{padding:11px 0 0;gap:14px}.showcase-motion .motion-control{flex:1;min-width:0;margin:0;gap:12px}.showcase-motion .motion-control>span{white-space:nowrap}.showcase-motion .motion-control strong{font-size:14px}.showcase-motion .motion-control input{min-width:0}.showcase-motion .stage-note{font-size:11px;color:var(--text-secondary);margin-top:10px}
.showcase-navigation{display:grid;grid-template-columns:1fr auto 1fr;align-items:center;gap:24px;width:100%;max-width:1280px;margin-inline:auto;padding:8px 40px 0}.showcase-navigation>[data-showcase-count]{font:11px/1.5 Consolas,monospace;color:var(--text-secondary);min-width:65px}.showcase-choices{position:relative;isolation:isolate;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0;align-items:center;padding:3px;border:1px solid var(--ui-line);border-radius:100px;background:#fff}.showcase-choices button{position:relative;font-size:12px;padding:10px 20px;color:var(--text-secondary);border:0;border-radius:100px;white-space:nowrap;min-height:40px;transition:color .2s}.showcase-choices button[aria-pressed=true]{color:#244d65;font-weight:600}
@media(max-width:1100px){.product-hero.home-showcase{padding:12px 0}.showcase-card{gap:3%;padding:28px 40px;grid-template-columns:minmax(0,1fr) minmax(0,1.05fr)}.showcase-motion .design-stage{padding:0 16px 16px}.showcase-motion .canvas-frame{height:clamp(170px,calc(100svh - 759px),240px);margin:0 -16px}.showcase-motion .stage-topline h2{font-size:13px}.showcase-motion .stage-views{width:196px}.showcase-motion .stage-side{right:16px;width:200px}}
@media(max-width:850px) and (min-width:761px){.showcase-card{grid-template-columns:minmax(0,1fr) minmax(0,1fr);padding:28px 32px;gap:24px}:is(.hero-cta,.showcase-copy)>.button{font-size:14px;padding:9px 10px 9px 21px;gap:17px}.showcase-motion .stage-topline h2{font-size:11px}.showcase-motion .stage-views{width:100%}}
@media(max-width:760px){
.is-home nav{background:var(--paper);border-color:var(--ui-line)}
.product-hero.home-showcase{padding:0 0 12px;overflow:hidden}
.showcase-navigation{grid-template-columns:1fr;order:-1;padding:12px 20px;gap:0}.showcase-arrows{display:none}.showcase-navigation>[data-showcase-count]{display:none}.showcase-choices{min-width:0;width:100%;max-width:360px;justify-self:center}.showcase-choices button{min-height:44px;padding:8px 6px}
html[lang=en] .showcase-choices button{white-space:normal}
/* 모바일에서는 선택한 배너의 실제 내용만 높이를 정한다. */
.showcase-track{display:block}
.showcase-card{position:absolute;inset:0;grid-template-columns:minmax(0,1fr);grid-template-rows:auto auto;align-items:center;align-content:start;gap:24px;padding:28px max(20px,calc((100% - 520px)/2)) 24px;min-height:0}
.showcase-card.is-active{position:relative;inset:auto}:is(.hero-cta,.showcase-copy)>.button{font-size:15px;padding:7px 10px 7px 22px;gap:19px;min-height:52px}
.showcase-visual{align-self:center;width:100%}.showcase-motion .showcase-visual{margin:0;width:100%;align-self:center}
.showcase-motion .design-stage{padding:0 13px 10px;border-radius:14px}.showcase-motion .stage-topline{padding-top:12px}.showcase-motion .stage-topline h2{font-size:12px;margin-top:5px}.showcase-motion .canvas-frame{height:145px;margin:0 -13px;min-height:0}.showcase-motion .stage-views{width:100%}.showcase-motion .stage-controls{padding:9px 0 0;gap:11px}.showcase-motion .motion-control{display:flex;margin:0;gap:10px}.showcase-motion .motion-control>span{margin:0}.showcase-motion .motion-control strong{font-size:13px}.showcase-motion .stage-description{font-size:11px;padding-bottom:9px}.showcase-motion .stage-note{font-size:11px;line-height:1.7;text-align:left}.showcase-motion .stage-side{top:10px;bottom:10px;right:13px;width:min(210px,calc(100% - 26px))}
}
@media(max-width:360px){.showcase-card{padding:24px 20px;gap:20px}.showcase-choices button{padding-inline:2px}.showcase-motion .canvas-frame{height:140px}}
@media(prefers-reduced-motion:reduce){:is(.hero-cta,.showcase-copy)>.button{transition:none}.showcase-card{transition:none;will-change:auto}}
.showcase-choices::before{content:"";position:absolute;z-index:-1;top:3px;bottom:3px;left:3px;width:calc((100% - 6px)/3);border-radius:100px;background:#fff;box-shadow:0 2px 6px #27465f12,inset 0 0 0 1px var(--line);transform:translateX(calc(var(--showcase-index,0)*100%));transition:transform .48s cubic-bezier(.2,.75,.2,1)}
.showcase-choices button:focus-visible{outline:2px solid #477898;outline-offset:3px}
.showcase-choices button:focus-visible{outline-offset:-2px}
.showcase-track.is-transitioning .showcase-card,.showcase-track.is-dragging .showcase-card.is-active{will-change:transform}
@media(prefers-reduced-motion:reduce){.showcase-card,.showcase-choices::before{transition:none}.showcase-track.is-transitioning .showcase-card,.showcase-track.is-dragging .showcase-card.is-active{will-change:auto}}

/* Four familiar destinations; the submenu explains the first action. */
.nav-group{position:relative}.nav-group>summary{display:flex;align-items:center;gap:9px;cursor:pointer;list-style:none;font-size:14px;font-weight:600;padding:31px 0;border-bottom:2px solid transparent;color:inherit}.nav-group>summary::-webkit-details-marker{display:none}.nav-group>summary::after{content:'⌄';font-size:12px;font-weight:400;color:#7a929f}.nav-group.active>summary{border-bottom-color:var(--green)}.nav-group>summary:focus-visible{outline:3px solid #268db7;outline-offset:4px}
.nav-dropdown{position:absolute;left:-22px;top:calc(100% - 4px);width:290px;padding:9px;background:#fff;border:1px solid var(--ui-line);border-radius:11px;box-shadow:0 15px 38px #20374716;color:#264453;z-index:30}.nav-dropdown a{display:flex;flex-direction:column;gap:6px;padding:15px 13px;border:0;border-radius:7px}.nav-dropdown a strong{font-size:13px;font-weight:600}.nav-dropdown a span{font-size:11px;font-weight:400;line-height:1.6;color:#758a96}.nav-dropdown a:hover,.nav-dropdown a.active{background:var(--ui-surface-2)}.is-home .nav-dropdown a:hover{color:#21485e}
@media(max-width:760px){.nav-group>summary{padding:14px 0;justify-content:space-between;border:0}.nav-group.active>summary{color:var(--green)}.nav-dropdown{position:static;width:auto;border:0;box-shadow:none;background:var(--ui-surface-2);padding:4px 9px;margin-bottom:10px}.nav-dropdown a strong{font-size:13px}.header nav.open{max-height:calc(100dvh - 68px);overflow-y:auto}}