.story{--ink:#2d302b;--muted:#777a72;--paper:#f7f4ed;--sage:#667d65;--sage2:#dfe7da;--dark:#30342f;--white:#fbfaf7}
*{box-sizing:border-box}html{scroll-behavior:smooth;scroll-snap-type:y mandatory;scroll-snap-stop:always}body{margin:0;background:#f7f4ed;color:#2d302b;font-family:Pretendard,-apple-system,BlinkMacSystemFont,"Segoe UI",sans-serif;-webkit-font-smoothing:antialiased;letter-spacing:-.018em}
main{overflow:clip}.chapter{height:100svh;position:relative}.copy{position:absolute;z-index:20;left:22px;right:22px;top:10svh;pointer-events:none}.eyebrow{margin:0 0 14px;font-size:10px;letter-spacing:.11em;font-weight:760;color:#969991}.copy h1,.copy h2{margin:0;max-width:360px;font-size:clamp(37px,10.5vw,48px);line-height:1.04;letter-spacing:-.062em;font-weight:620}.accent{display:block;color:var(--sage);font-weight:780}.sub{margin:16px 0 0;font-size:14px;line-height:1.68;color:var(--muted)}
.story{height:700svh;position:relative;background:var(--paper)}.snap-point{position:absolute;left:0;width:1px;height:1px;pointer-events:none;scroll-snap-align:start;scroll-snap-stop:always}.sp0{top:0}.sp1{top:100svh}.sp2{top:200svh}.sp3{top:300svh}.sp4{top:400svh}.sp5{top:500svh}.sp6{top:600svh}.stage{position:sticky;top:0;height:100svh;overflow:hidden}.stage-bg{position:absolute;inset:0;background:var(--paper);transition:background .7s ease}.home-wrap{position:absolute;left:22px;right:22px;top:40svh;height:47svh;transition:top .7s cubic-bezier(.2,.75,.2,1),height .7s ease,transform .7s ease}
.home{position:absolute;inset:0;border:1.5px solid rgba(102,125,101,.5);border-radius:32px;background:rgba(255,255,255,.38);overflow:hidden;transition:.65s cubic-bezier(.2,.75,.2,1);box-shadow:0 20px 60px rgba(54,61,52,.035)}
.home:before{content:"";position:absolute;inset:14px;border:1px solid rgba(102,125,101,.12);border-radius:22px}
.floor{position:absolute;left:9%;right:9%;bottom:14%;height:1px;background:rgba(45,48,43,.15)}.window{position:absolute;right:10%;top:11%;width:31%;height:37%;border:1px solid rgba(45,48,43,.15);background:linear-gradient(#e7ece8,#f3ead9);transition:.6s}.sofa{position:absolute;left:26%;right:13%;bottom:15%;height:21%;border-radius:17px 17px 7px 7px;background:#d8ddd2;transition:.6s}.sofa:before{content:"";position:absolute;left:6%;top:-38%;width:42%;height:60%;border-radius:13px;background:#e2e4dc}.lamp{position:absolute;left:15%;bottom:15%;width:2px;height:29%;background:#b7bbb2}.lamp:after{content:"";position:absolute;left:-14px;top:-4px;width:30px;height:17px;border-radius:50% 50% 15% 15%;background:#d6d1c5}
.cup{position:absolute;left:53%;bottom:26%;width:12px;height:12px;border:1px solid #a8aca3;border-radius:2px 2px 5px 5px;transition:.5s}.blanket{position:absolute;left:33%;bottom:18%;width:42px;height:18px;border-radius:55% 35% 45% 25%;background:#c8c4b8;transform:rotate(-7deg);opacity:.75}.shoe{position:absolute;left:10%;bottom:10%;width:27px;height:8px;border-radius:70% 20% 35% 50%;background:#9fa49b;transform:rotate(8deg);opacity:.6}
.person{position:absolute;left:48%;bottom:22%;width:48px;height:18px;border-radius:50%;background:#a9afa5;transform:rotate(-7deg);opacity:.55}.person:after{content:"";position:absolute;right:-7px;top:-3px;width:16px;height:16px;border-radius:50%;background:#a9afa5}
.dot{position:absolute;left:50%;top:50%;width:7px;height:7px;border-radius:50%;background:var(--sage);box-shadow:0 0 0 8px rgba(102,125,101,.08)}
.thought{position:absolute;z-index:5;padding:10px 13px;border-radius:999px;background:#f8f6f0;color:#373b35;font-size:11px;font-weight:650;box-shadow:0 8px 25px rgba(0,0,0,.12);opacity:0;transform:translateY(9px) scale(.94);transition:.35s}.t1{left:6%;top:15%}.t2{right:5%;top:27%}.t3{left:16%;bottom:30%}.t4{right:8%;bottom:11%}.t5{left:42%;top:50%}
.scan{position:absolute;z-index:4;width:42px;height:42px;border:1px solid rgba(102,125,101,.35);border-radius:50%;opacity:0;transition:.5s}.scan:after{content:"";position:absolute;inset:7px;border:1px solid rgba(102,125,101,.18);border-radius:50%}.sc1{left:32%;bottom:13%}.sc2{right:17%;bottom:12%}.sc3{left:48%;top:34%}
.word{position:absolute;z-index:6;padding:10px 14px;border-radius:999px;background:white;border:1px solid rgba(45,48,43,.08);font-size:11px;color:#62665e;opacity:0;transition:.75s cubic-bezier(.2,.8,.2,1)}.w1{left:8%;top:17%}.w2{right:8%;top:38%}.w3{left:24%;bottom:16%}
.memory-layer{position:absolute;inset:0;border:1px solid rgba(102,125,101,.17);border-radius:32px;opacity:0;transition:.7s}.ml1{transform:translateY(-11px) scale(.975)}.ml2{transform:translateY(-22px) scale(.95)}.memory-label{position:absolute;z-index:7;left:18px;font-size:9px;letter-spacing:.08em;color:#858a81;opacity:0;transition:.5s}.m1{top:17%}.m2{top:29%}.m3{top:41%}
.copy-state{position:absolute;z-index:30;left:22px;right:22px;top:9svh;opacity:0;transform:translateY(16px);transition:.5s ease;pointer-events:none}.copy-state.active{opacity:1;transform:none}.copy-state .eyebrow{color:#969991}.copy-state h2{margin:0;max-width:360px;font-size:clamp(36px,10vw,46px);line-height:1.04;letter-spacing:-.06em;font-weight:620}.copy-state .sub{max-width:330px}
.progress{position:absolute;z-index:40;right:13px;top:50%;transform:translateY(-50%);display:grid;gap:8px}.progress i{width:3px;height:3px;border-radius:50%;background:rgba(45,48,43,.2);transition:.3s}.progress i.on{height:18px;border-radius:4px;background:var(--sage)}
.cta{display:none;position:absolute;z-index:50;left:50%;bottom:7svh;transform:translateX(-50%);min-height:48px;align-items:center;padding:0 24px;border-radius:999px;background:var(--ink);color:white;text-decoration:none;font-size:13px;font-weight:700;white-space:nowrap}.cta.show{display:flex}
.stage.dark .stage-bg{background:var(--dark)}.stage.dark .home{border-color:rgba(223,231,218,.32);background:rgba(255,255,255,.025)}.stage.dark .home:before{border-color:rgba(255,255,255,.07)}.stage.dark .floor{background:rgba(255,255,255,.12)}.stage.dark .sofa,.stage.dark .sofa:before{background:#505650}.stage.dark .window{background:#3c4542;border-color:rgba(255,255,255,.12)}.stage.dark .lamp{background:#646b63}.stage.dark .lamp:after{background:#60665f}.stage.dark .cup,.stage.dark .blanket,.stage.dark .shoe,.stage.dark .person,.stage.dark .person:after{filter:brightness(.55)}.stage.dark .copy-state{color:#f6f3ed}.stage.dark .copy-state .sub{color:rgba(255,255,255,.5)}.stage.dark .copy-state .eyebrow{color:#aab4a6}.stage.dark .progress i{background:rgba(255,255,255,.2)}.stage.dark .progress i.on{background:#a9bba5}
.stage.good .stage-bg{background:var(--sage2)}.stage.good .home{background:rgba(255,255,255,.32)}
.stage[data-step="1"] .thought:nth-of-type(-n+2),.stage[data-step="2"] .thought{opacity:1;transform:none}
.stage[data-step="2"] .home{transform:scale(.965)}
.stage[data-step="3"] .scan{opacity:1}.stage[data-step="3"] .thought{opacity:0}.stage[data-step="3"] .home{transform:scale(1)}
.stage[data-step="4"] .word{opacity:1}.stage[data-step="4"] .scan{opacity:0}
.stage[data-step="4"].released .w1{opacity:0;transform:translate(-90px,-35px)}.stage[data-step="4"].released .w2{opacity:0;transform:translate(90px,-20px)}.stage[data-step="4"].released .w3{opacity:0;transform:translate(-20px,85px)}
.stage[data-step="5"] .memory-layer,.stage[data-step="5"] .memory-label{opacity:1}.stage[data-step="5"] .ml1{transform:translateY(-13px) scale(.975)}.stage[data-step="5"] .ml2{transform:translateY(-27px) scale(.95)}
.stage[data-step="6"] .memory-layer,.stage[data-step="6"] .memory-label{opacity:0}.stage[data-step="6"] .home{transform:scale(1.025);background:rgba(255,255,255,.42)}
@media(min-width:760px){.home-wrap{left:48%;right:7%;top:17svh;height:66svh}.copy-state{left:7%;right:auto;top:28svh;width:36%}.progress{right:3%}}
@media(prefers-reduced-motion:reduce){*{transition:none!important}}


/* Preview 16 — clean rebuild of image switching */
.section-photo{
 position:absolute;inset:0;width:100%;height:100%;
 object-fit:contain;object-position:center;
 opacity:0!important;display:none!important;
 transform:none!important;filter:none!important;
 z-index:1;background:#efe8dc;
}
.stage[data-step="0"] .photo-1,
.stage[data-step="1"] .photo-2,
.stage[data-step="2"] .photo-2,
.stage[data-step="3"] .photo-3,
.stage[data-step="4"] .photo-4,
.stage[data-step="5"] .photo-5,
.stage[data-step="6"] .photo-6{
 display:block!important;opacity:1!important;
}

/* All images keep their original horizontal ratio without crop */
.home-wrap{height:auto!important;aspect-ratio:16/9!important;top:45svh!important}
.home{background:#efe8dc!important}

/* Remove old drawn room. Interactive copy/bubbles remain above photos. */
.home .window,.home .lamp,.home .floor,.home .sofa,
.home .blanket,.home .cup,.home .shoe,.home .person,.home .dot{
 opacity:0!important;
}
.home .thought,.home .scan,.home .word,.home .memory-label{z-index:6}
.memory-layer{z-index:0}
@media(min-width:760px){
 .home-wrap{top:24svh!important;height:auto!important;aspect-ratio:16/9!important}
}


/* Preview 18 — restore larger image frame; keep lightweight images */
.home-wrap{
  left:22px!important;
  right:22px!important;
  top:39svh!important;
  height:48svh!important;
  aspect-ratio:auto!important;
}
.home{border-radius:32px!important}
.section-photo{
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
}
@media(min-width:760px){
  .home-wrap{
    left:48%!important;
    right:5%!important;
    top:17svh!important;
    height:66svh!important;
    aspect-ratio:auto!important;
  }
}


/* Preview 20 — large card + complete uncropped image */
.section-photo{
  position:absolute!important;
  inset:0!important;
  width:100%!important;
  height:100%!important;
  object-fit:contain!important;
  object-position:center center!important;
  transform:none!important;
  filter:none!important;
}
/* Fill only the unavoidable empty area created by aspect-ratio mismatch */
.home{
  background:#eee9df!important;
}


/* ============================================================
   PRODUCTION INTEGRATION — KEEP EXISTING MOOHAE HEADER / FOOTER
   Visual content remains Preview 20. Global site header/footer are
   rendered by the existing site.js/site.css without restyling them.
   ============================================================ */

/* Fixed existing header sits above the immersive story. */
#site-header{position:relative;z-index:2000}
.story .copy-state{top:calc(var(--header-height, 76px) + 3.5svh)}
#site-footer{scroll-snap-align:start;scroll-snap-stop:normal;scroll-margin-top:var(--header-height,76px)}

@media(min-width:760px){
  .story .copy-state{top:28svh}
}

@media(max-height:720px) and (max-width:759px){
  .story .copy-state{top:calc(var(--header-height,66px) + 2.2svh)}
  .home-wrap{top:41svh!important;height:45svh!important}
}

/* ============================================================
   PRODUCTION MOBILE LAYOUT FIX — 2026-10-02 v2
   Fixed global header is preserved. Mobile content now reserves
   a real header-to-copy gap and a safe copy-to-HOME-card gap,
   including the longest 3-line sections.
   VISUAL ONLY — no data/backend behavior is changed.
   ============================================================ */
@media (max-width:759px){
  .story .copy-state{
    top:calc(var(--header-height,66px) + clamp(50px,7.5svh,64px))!important;
    left:22px;
    right:28px;
  }

  .story .copy-state h2{
    font-size:clamp(34px,10vw,42px);
    line-height:1.045;
  }

  .story .copy-state .sub{
    margin-top:18px;
    line-height:1.72;
  }

  .home-wrap{
    top:calc(var(--header-height,66px) + 51svh)!important;
    height:34svh!important;
    min-height:205px;
    max-height:300px;
  }

  .home{
    border-radius:28px!important;
  }

  .cta{
    bottom:5.5svh;
  }
}

/* Override the old preview-only short-height compression that caused
   production overlap on phones with browser UI reducing the viewport. */
@media (max-width:759px) and (max-height:720px){
  .story .copy-state{
    top:calc(var(--header-height,66px) + 50px)!important;
  }

  .home-wrap{
    top:calc(var(--header-height,66px) + 51svh)!important;
    height:34svh!important;
    min-height:205px;
  }
}