/* 섬결 이은영 · 창문 오프닝 복원 / v1.0
   독립적인 overlay 컴포넌트. 기존 웹사이트 메뉴/본문을 덮어쓰기 하지 않습니다. */
:root {
  --sg-paper: #f5f0e6;
  --sg-ink: #554d41;
  --sg-olive: #6a7855;
  --sg-wood-dark: #835c39;
  --sg-wood-mid: #b28b5b;
  --sg-wood-light: #d6b788;
  --sg-ease: cubic-bezier(.25,.7,.12,1);
}
body.sg-intro-lock { overflow: hidden !important; }
.sg-window-intro, .sg-window-intro * { box-sizing: border-box; }
.sg-window-intro {
  position: fixed; inset: 0; z-index: 2147483600;
  overflow: hidden;
  isolation: isolate;
  background: radial-gradient(ellipse at 50% 40%,#fff9eb 2%,var(--sg-paper) 56%,#ede3cf 100%);
  font-family: SeomSerif,'Apple SD Gothic Neo','Malgun Gothic',serif;
  color: var(--sg-ink);
  opacity: 1;
  visibility: visible;
  transition: opacity 1100ms ease, visibility 1100ms ease;
}
.sg-window-intro.sg-intro-exit { opacity: 0; visibility: hidden; pointer-events: none; }
.sg-intro-head { position:absolute; top:clamp(14px,3.4vh,34px); left:50%; transform:translateX(-50%); width:min(91vw,1160px); display:flex; align-items:center; justify-content:space-between; z-index:20; gap:16px; }
.sg-intro-signature { font-family: Georgia,serif; font-size:clamp(11px,1.0vw,14px); letter-spacing:.16em; text-transform:uppercase; color:#897963; }
.sg-intro-skip, .sg-intro-replay { appearance:none; border:1px solid #d6c8ae; border-radius:40px; background:rgba(255,252,247,.87); color:var(--sg-ink); font-family:inherit; cursor:pointer; transition:background .2s,color .2s,transform .2s; }
.sg-intro-skip { font-size:13px; padding:9px 18px; white-space:nowrap; }
.sg-intro-skip:hover, .sg-intro-replay:hover { background: #e9ddc9; transform:translateY(-1px); }
.sg-intro-skip:focus-visible,.sg-intro-replay:focus-visible { outline:3px solid #657e6a; outline-offset:3px; }
.sg-window-stage { position:absolute; left:50%; top:49%; transform:translate(-50%,-50%); width:min(91vw,1190px); aspect-ratio: 16/9; max-height:75svh; filter:drop-shadow(0 7px 10px rgba(110,85,48,.12)); }
.sg-window-frame { width:100%; height:100%; position:relative; background:#d5b47e; overflow:visible; perspective:1700px; border:9px solid transparent; border-image:url('assets/window-intro/window-casements-pencil-v2.webp') 40 32 / 9px stretch; }
.sg-scene { position:absolute; inset:0; overflow:hidden; background:#f6eddd; }
.sg-scene::after { content:""; position:absolute; inset:0; background:linear-gradient(0deg, rgba(48,37,22,.12),transparent 33%,rgba(255,255,255,.11)); pointer-events:none; }
.sg-scene-image { height:100%; width:100%; object-fit:cover; object-position:center; transform:scale(1.115); filter:brightness(.77) saturate(.78) blur(8px); transition:transform 5000ms var(--sg-ease),filter 4000ms ease; }
.sg-intro-open .sg-scene-image { transform:scale(1.0); filter:brightness(1) saturate(1) blur(0); }
.sg-scene-glow { position:absolute; inset:0; opacity:0; background:radial-gradient(ellipse at 52% 30%,rgba(255,250,204,.52),transparent 56%); pointer-events:none; transition:opacity 3s ease; mix-blend-mode: screen; }
.sg-intro-open .sg-scene-glow { opacity:.45; }
.sg-shutter { position:absolute; top:0; bottom:0; width:50.15%; z-index:9; transform-style:preserve-3d; backface-visibility:visible; transition:transform 3100ms var(--sg-ease),filter 2800ms ease; filter:drop-shadow(0px 3px 4px rgba(97,72,40,.12)); }
.sg-shutter-left { left:-1px; transform-origin:0 50%; }
.sg-shutter-right { right:-1px; transform-origin:100% 50%; }
.sg-intro-open .sg-shutter-left { transform:rotateY(-104deg); }
.sg-intro-open .sg-shutter-right { transform:rotateY(104deg); }
.sg-shutter-face { width:100%;height:100%;display:block;border:0;padding:0;box-shadow:none;background:#f8efd9 url('assets/window-intro/window-casements-pencil-v2.webp') no-repeat left top / 200% 100%; }
.sg-shutter-right .sg-shutter-face {background-position:right top}
.sg-frame-gold-dust { position:absolute;z-index:2;inset:0; pointer-events:none; opacity:0; transition:opacity 2000ms ease; background:linear-gradient(120deg, transparent 24%,rgba(255,246,213,.4) 47%,transparent 70%); }
.sg-intro-open .sg-frame-gold-dust {opacity:1;}
.sg-curtain { position:absolute; width:11%;height:100%;top:0;z-index:5;pointer-events:none;opacity:.0; background:linear-gradient(90deg,rgba(255,250,232,.87),rgba(255,255,245,.26),rgba(255,254,241,.8)); filter:drop-shadow(2px 0 4px rgba(255,250,241,.65)); transition:opacity 2000ms ease 900ms; }
.sg-curtain-left {left:0;clip-path:polygon(0 0,80% 0,60% 20%,100% 55%,62% 100%,0 100%);transform-origin:top left; }
.sg-curtain-right {right:0;clip-path:polygon(17% 0,100% 0,100% 100%,30% 100%,0 65%,47% 20%);transform-origin:top right;}
.sg-intro-open .sg-curtain {opacity:.79;animation:sg-curtain-breeze 3800ms ease-in-out infinite alternate;}
@keyframes sg-curtain-breeze { from{transform:rotate(-1.5deg) scaleX(1)} to{transform:rotate(2deg) scaleX(.84)} }
.sg-leaf { position:absolute; width:18px;height:10px; z-index:8; border-radius:90% 0 90% 0; background:#b8ae75; opacity:0; pointer-events:none; transform:rotate(-25deg) translateY(-70px); }
.sg-leaf:nth-of-type(1) {left:20%;top:8%;background:#c7bf82;}
.sg-leaf:nth-of-type(2) {left:68%;top:12%;width:13px;background:#8da27b;}
.sg-leaf:nth-of-type(3) {left:80%;top:25%;width:12px;background:#c4aa6c;}
.sg-leaf:nth-of-type(4) {left:44%;top:23%;background:#bbc987;}
.sg-intro-open .sg-leaf { animation:sg-leaf-drift 4.7s ease-in 800ms infinite; }
.sg-intro-open .sg-leaf:nth-of-type(2) {animation-delay:1200ms;animation-duration:5.5s}
.sg-intro-open .sg-leaf:nth-of-type(3) {animation-delay:1700ms;animation-duration:4.9s}
.sg-intro-open .sg-leaf:nth-of-type(4) {animation-delay:2300ms;animation-duration:5.9s}
@keyframes sg-leaf-drift {0%{opacity:0;transform:translate(0,-24px) rotate(-35deg)}18%{opacity:.7}80%{opacity:.5}100%{opacity:0;transform:translate(-56px,170px) rotate(105deg)}}
.sg-intro-foot {position:absolute;left:8vw;right:8vw;bottom:clamp(16px,3vh,34px);display:flex;justify-content:center;flex-direction:column;align-items:center;gap:6px;text-align:center;z-index:20;pointer-events:none;}
.sg-intro-kicker {font-family:Georgia,serif;font-size:clamp(10px,1.1vw,12px);color:#a18766;letter-spacing:.25em;text-transform:uppercase;}
.sg-intro-caption { margin:0; font-family:'Nanum Myeongjo','AppleMyungjo',Georgia,serif; font-weight:400; font-size:clamp(16px,2vw,26px);letter-spacing:-.035em;color:#675542; }
.sg-intro-caption strong { font-weight:600; }
.sg-intro-foot .sg-intro-caption { opacity:.76; }
.sg-intro-open .sg-intro-caption { animation:sg-caption-emerge 2200ms ease both; }
@keyframes sg-caption-emerge { from{opacity:.38;transform:translateY(7px)}to{opacity:1;transform:translateY(0)} }
.sg-demo-replay { position:fixed;right:22px;bottom:18px;z-index:25; }
.sg-intro-replay {padding:11px 16px;font-size:12px;box-shadow:0 4px 15px rgba(90,65,36,.08);}
.sg-intro-skip {box-shadow:0 2px 8px rgba(70,51,28,.07)}
@media (max-width: 730px) {
  .sg-window-stage { width:92vw;max-height:none;height:57svh;aspect-ratio:auto;top:48%; }
  .sg-window-frame {border-width:6px;border-image-width:6px}
  .sg-scene-image {object-position:49% 50%;}
  .sg-intro-head {top:20px;width:91vw;}
  .sg-intro-signature {letter-spacing:.09em}
  .sg-intro-foot {bottom:11svh;left:5vw;right:5vw;}
}
@media (max-width:450px) {
 .sg-window-stage {height:53svh;}
 .sg-scene-image {object-fit:cover;object-position:51% 50%}
 .sg-intro-foot {bottom:12svh;}
 .sg-intro-caption {font-size:17px;}
}
@media (prefers-reduced-motion:reduce) {
 .sg-shutter,.sg-scene-image,.sg-curtain,.sg-scene-glow,.sg-window-intro {transition-duration:.01ms !important;animation-duration:.01ms !important;}
 .sg-intro-open .sg-leaf {animation:none !important;}
}

/* Reconnect the recovered opening to the existing Site, using the supplied
   illustrations unchanged. A landscape window keeps the entire group visible. */
.sg-window-stage {
  width:min(84vw,1100px,calc((100svh - 240px) * 1.7778));
  height:auto;
  max-height:none;
  transform:translate(-50%,-50%) scale(1.025);
  transition:transform 10s var(--sg-ease);
}
.sg-intro-open .sg-window-stage {transform:translate(-50%,-50%) scale(.97)}
.sg-intro-exit .sg-window-stage {transform:translate(-50%,-50%) scale(.92);transition-duration:1100ms}
.sg-window-frame {aspect-ratio:16 / 9;height:auto}
.sg-scene-image {
  position:absolute;inset:0;
  opacity:0;
  transform:scale(1.12);
  filter:brightness(.84) saturate(.9);
  transition:opacity 1400ms ease,transform 10s var(--sg-ease),filter 3500ms ease;
}
.sg-scene-image.is-visible {opacity:1}
.sg-intro-open .sg-scene-image {transform:scale(1);filter:none}
.sg-shutter {transition-duration:3200ms,2800ms;transition-timing-function:cubic-bezier(.4,0,.2,1),ease}
.sg-intro-caption {font-family:SeomSerif,serif;font-size:clamp(16px,1.7vw,23px);line-height:1.9}
.sg-intro-foot {bottom:max(22px,5svh)}
.sg-home-replay {
  display:flex;align-items:center;gap:7px;
  margin:0;padding:2px 0;
  color:var(--muted);font-size:10px;line-height:1.8;
  border-bottom:1px solid var(--line);
}
.sg-home-replay:hover {color:var(--green);border-color:var(--green)}
.sg-home-replay span {font-family:Georgia,serif;font-size:16px}
.hero-caption-copy {display:flex;align-items:center;flex-wrap:wrap;gap:3px 18px}
@media (max-width:730px) {
  .sg-window-stage {width:88vw;height:auto;aspect-ratio:16 / 9;top:47%;max-height:none}
  .sg-window-frame {border-width:6px}
  .sg-scene-image {object-position:center;object-fit:cover}
  .sg-intro-head {top:max(20px,env(safe-area-inset-top));gap:10px}
  .sg-intro-signature {font-size:10px;letter-spacing:.06em}
  .sg-intro-skip {font-size:11px;padding:9px 13px;min-height:40px}
  .sg-intro-foot {bottom:17svh;gap:9px}
  .sg-intro-caption {font-size:16px;word-break:keep-all}
  .sg-home-replay {font-size:9px}
  .hero-caption-copy {gap:0 12px;max-width:62%}
}
@media (max-height:500px) and (orientation:landscape) {
  .sg-window-stage {width:min(63vw,calc((100svh - 120px) * 1.7778));top:48%}
  .sg-intro-foot {bottom:12px;gap:2px}
  .sg-intro-caption {font-size:14px}
  .sg-intro-kicker {font-size:8px}
  .sg-intro-head {top:10px}
}
@media (prefers-reduced-motion:reduce) {
  .sg-window-stage {transition:none!important;transform:translate(-50%,-50%)!important}
  .sg-intro-open .sg-curtain,.sg-intro-open .sg-leaf {animation:none!important}
}