/* 같은 스크롤 시계로 설명과 실제 제품의 초점을 바꾼다. 확대만 하는 장면이 아니다. */
@layer components {
  .story-field { padding-inline:40px; }
  .story-steps { position:relative; z-index:2; margin-bottom:22px; gap:12px; }
  .story-steps>button[data-story-step] { display:flex; align-items:center; justify-content:center; gap:9px; padding:10px 14px; min-height:48px; border:1px solid #ffffffa6; border-radius:13px; background:#ffffff70; color:#437659; cursor:pointer; font:500 12px/1 var(--sans); box-shadow:none; }
  .story-steps>button[data-story-step] img { object-fit:contain; }
  .story-steps>button[aria-current="step"] { background:#fff; color:#14734b; border-color:#fff; box-shadow:0 8px 18px #28563a14; }
  .story-steps>button:hover { background:#fff; }
  .story-step-line { width:20px; background:#7cae924d; }
  .spotlight-card { width:100%; max-width:1180px; display:grid; grid-template-columns:290px minmax(0,1fr); gap:34px; align-items:center; padding:34px; margin:0 auto; border-radius:28px; background:#fff; box-shadow:0 28px 65px #26573d20; }
  .spotlight-copy { min-width:0; padding:10px 0 10px 4px; }
  .spotlight-copy-phase { display:none; }
  .spotlight-copy-phase { animation:spotlight-copy-in .45s cubic-bezier(.2,.7,.2,1) both; }
  @keyframes spotlight-copy-in { from { opacity:0; transform:translateY(12px); } to { opacity:1; transform:none; } }
  .spotlight-copy-check { display:block; }
  [data-scroll-story][data-story-phase="0"] .spotlight-copy-check,[data-scroll-story][data-story-phase="1"] .spotlight-copy-check { display:none; }
  [data-scroll-story][data-story-phase="0"] .spotlight-copy-request,[data-scroll-story][data-story-phase="1"] .spotlight-copy-work { display:block; }
  .spotlight-feature { display:flex; align-items:center; gap:8px; color:#395744; font:500 12px/1.4 var(--sans); margin-bottom:22px; }
  .spotlight-feature>img { object-fit:contain; }
  .spotlight-feature>img[src$="/web.png"],.story-steps>button>img[src$="/web.png"] { background:#14734b; border-radius:5px; padding:3px; }
  .spotlight-optional { margin-left:1px; padding:3px 6px; font-size:10px; color:#5b7564; background:#eef5f0; border-radius:4px; }
  .light-home .spotlight-copy h2 { font:600 31px/1.42 var(--sans); letter-spacing:-.05em; color:#142b23; }
  .spotlight-copy h2+p { margin-top:24px; color:#61746a; font-size:14px; line-height:1.85; }
  .spotlight-copy .home-text-link { color:#283f31; font-size:12px; gap:16px; padding-bottom:8px; border-bottom:1px solid #789886; margin-top:28px; }
  .spotlight-product { min-width:0; overflow:hidden; border-radius:15px; }
  .light-home .spotlight-product .workspace-demo { container:spotlight-native / inline-size; width:100%; margin:0; }
  .light-home .spotlight-product .workspace-screen { transform:none; border:1px solid #29362e; border-radius:11px; box-shadow:none; }
  .light-home .spotlight-product .demo-stage { --native-scene-height:500px; height:500px; padding:0; background:#15181d; }
  .light-home .spotlight-product .demo-connection { display:none; }
  .light-home .spotlight-product .demo-menubar { min-height:35px; font-size:12px; }
  .light-home .spotlight-product .demo-browser-window { position:absolute; left:15px; right:15px; top:15px; width:auto; z-index:3; transform:none; opacity:1; transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1); }
  .light-home .spotlight-product .demo-browser-body { grid-template-columns:minmax(0,1fr) 196px; min-height:365px; height:365px; }
  .light-home .spotlight-product .demo-agent-panel { min-height:0; }
  .light-home .spotlight-product .demo-terminal-window { position:absolute; left:28px; right:28px; top:40px; width:auto; z-index:2; opacity:0; transform:translateY(22px) scale(.94); transition:opacity .45s,transform .6s cubic-bezier(.2,.7,.2,1); }
  .light-home .spotlight-product .demo-terminal-body { height:416px; min-height:416px; font-size:13px; padding:20px 20px 62px; overflow:hidden; }
  .light-home [data-scroll-story][data-story-phase="1"] .spotlight-product .demo-agent-heading { display:none; }
  .light-home .spotlight-product .demo-terminal-result { position:absolute; left:20px; right:20px; bottom:82px; }
  .light-home .spotlight-product .demo-browser-check { position:absolute; left:20px; bottom:134px; }
  .light-home .spotlight-product .demo-agent-heading>div>.demo-cli-welcome { font-size:11px; }
  .light-home .spotlight-product .demo-terminal-prompt { font-size:13px; margin-top:24px; }
  .light-home .spotlight-product .demo-terminal-output>p { font-size:12px; }
  .light-home .spotlight-product .demo-file-edit { font-size:12px; }
  .light-home .spotlight-product .demo-code-change { font-size:12px; }
  .light-home .spotlight-product .demo-panel-intro { display:none; }
  .light-home .spotlight-product .demo-page-main { padding:20px 23px; }
  .light-home .spotlight-product .demo-page { overflow:auto; }
  .light-home .spotlight-product .demo-page h3 { font-size:25px; }
  .light-home .spotlight-product .demo-page-copy { font-size:12px; }
  .light-home .spotlight-product .demo-browser-tools { gap:11px; font-size:9px; }
  .light-home .spotlight-product .demo-dock { min-height:15px; }
  .light-home .spotlight-product .demo-dock>span { display:none; }
  .light-home .spotlight-product .demo-dock::before { content:""; width:42px; height:3px; border-radius:3px; background:#859089; }
  .light-home .spotlight-product .workspace-caption { font-size:10px; margin-top:11px; }
  .light-home .spotlight-product .workspace-caption .demo-caption-note { display:none; }
  .light-home [data-scroll-story][data-story-phase="1"] .spotlight-product .demo-terminal-window { opacity:1; z-index:4; transform:none; }
  .light-home [data-scroll-story][data-story-phase="1"] .spotlight-product .demo-browser-window { opacity:.12; transform:translate(18px,10px) scale(.95); }
  .light-home [data-scroll-story][data-story-phase="2"] .spotlight-product .demo-browser-window { transform:none; opacity:1; }
  .light-home [data-scroll-story][data-story-phase="0"] .spotlight-product .demo-download-before,
  .light-home [data-scroll-story][data-story-phase="0"] .spotlight-product .demo-page-selection { opacity:1!important; }
  @container page (max-width:1100px) {
    .spotlight-card { grid-template-columns:230px minmax(0,1fr); gap:24px; padding:27px; }
    .light-home .spotlight-copy h2 { font-size:27px; }
    .spotlight-copy h2+p { font-size:13px; }
    .story-field { padding:28px 24px; }
  }
  @container page (max-width:760px) {
    .spotlight-card { grid-template-columns:1fr; gap:25px; padding:25px 20px; border-radius:18px; }
    .spotlight-copy { padding:0; }
    .spotlight-feature { margin-bottom:15px; }
    .light-home .spotlight-copy h2 { font-size:28px; }
    .spotlight-copy h2+p { margin-top:17px; }
    .spotlight-copy .home-text-link { margin-top:20px; }
    .story-field { padding:22px 15px 18px; }
    .story-steps>button[data-story-step] { flex-direction:row; font-size:11px; gap:7px; padding:9px 10px; min-height:43px; flex:none; }
    .story-steps>button[data-story-step] img,.story-steps>button[data-story-step] svg { width:20px; height:20px; }
    .story-steps { margin-bottom:18px; }
    .story-step-line { width:10px; }
  }
  @container spotlight-native (max-width:650px) {
    .light-home .spotlight-product .demo-browser-body { grid-template-columns:1fr; min-height:365px; height:365px; }
    .light-home .spotlight-product .demo-agent-panel { display:none; }
    .light-home .spotlight-product .demo-browser-window { left:10px; right:10px; top:18px; }
    .light-home .spotlight-product .demo-page-main { padding:20px 22px; }
    .light-home .spotlight-product .demo-terminal-window { left:10px; right:10px; top:30px; }
    .light-home .spotlight-product .demo-terminal-body { min-height:410px; height:410px; font-size:12px; padding-inline:15px; }
    .light-home .spotlight-product .demo-terminal-prompt,.light-home .spotlight-product .demo-terminal-output>p,.light-home .spotlight-product .demo-file-edit,.light-home .spotlight-product .demo-code-change { font-size:11px; }
    .light-home .spotlight-product .demo-browser-toolbar { gap:7px; padding-inline:8px; }
    .light-home .spotlight-product .demo-address { font-size:10px; padding-inline:7px; }
    .light-home .spotlight-product .demo-toolbar-icon { width:15px; }
    .light-home .spotlight-product .demo-page h3 { font-size:28px; }
    .light-home .spotlight-product .demo-agent-heading>div>.demo-cli-welcome { font-size:10px; }
  }
  @container page (max-width:480px) {
    .light-home .story-pin.home-wrap { padding-inline:20px; }
    .story-field { padding-inline:10px; }
    .spotlight-card { padding:24px 16px; }
    .story-steps { gap:6px; }
    .story-steps>button[data-story-step] { padding:8px; gap:6px; font-size:10px; }
    .story-steps>button[data-story-step] img,.story-steps>button[data-story-step] svg { width:18px; height:18px; }
    .story-step-line { width:8px; }
    .light-home .hero-heading h1 { font-size:clamp(26px,7.6cqw,32px); }
  }
  @media (prefers-reduced-motion:reduce) {
    .spotlight-product *, .spotlight-product *::before,.spotlight-product *::after { transition:none!important; animation:none!important; }
  }
}