/* =========================================================
   ENJO 레이아웃 — 메인 섹션
   ========================================================= */
.ej-main .ph{background:var(--ph);width:100%;overflow:hidden}
.ej-main .ph img{width:100%;height:100%;object-fit:cover}

/* 섹션 1 히어로 — 세로 스트립 3분할, 마우스 오버 시 옆 띠를 밀어내며 넓어짐 */
.hero{position:relative;height:clamp(520px,calc(100vh - var(--hd-h)),760px);overflow:hidden;background:var(--bg)}
.strips{position:absolute;inset:0;display:flex;gap:4px;container-type:inline-size}
.hero .st{position:relative;flex:1 1 0;min-width:0;overflow:hidden;cursor:pointer;transition:flex-grow 1.8s cubic-bezier(.25,.1,.25,1)}
.hero .st:hover{flex-grow:2}
.hero .st img{position:absolute;top:0;left:50%;height:100%;width:50vw;width:50cqw;max-width:none;object-fit:cover;transform:translateX(-50%)}
.hero .st span{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);color:#fff;font-size:var(--fs-small);letter-spacing:.2em;white-space:nowrap;text-shadow:0 1px 6px rgba(0,0,0,.4)}
.hero-dots{display:none}
.hero-txt{position:absolute;left:50%;top:50%;transform:translate(-50%,-50%);z-index:3;text-align:center;color:#fff;pointer-events:none;text-shadow:0 2px 20px rgba(0,0,0,.35)}
.hero-txt .eyebrow{font-size:var(--fs-small);letter-spacing:.32em;margin-bottom:18px}
.hero h1{font-family:var(--serif);font-weight:400;font-size:var(--fs-display);line-height:1.05;white-space:nowrap}
.hero-txt .link{margin-top:32px;pointer-events:auto;color:#fff}

/* 섹션 2 WORK */
.work{padding:var(--sec) 0;background:var(--bg)}
.work-head{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}
.work .grid{display:grid;grid-template-columns:repeat(3,1fr);gap:36px 34px}
.work .item{display:block}
.work .item .ph{aspect-ratio:5/4}
.work .item .ph img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.work .item:hover .ph img,.work .item:focus-visible .ph img{transform:scale(1.04)}
.work .item h3{font-size:var(--fs-body);font-weight:400;margin-top:12px}
.work .item .meta{font-size:var(--fs-small);color:var(--sub);margin-top:4px}
.work .item .meta span{margin:0 8px;color:var(--line)}

/* 섹션 3 TEXT — 스크롤에 따라 단어 채움 + 고정 사진 */
.text{padding:var(--sec) 0;background:var(--bg-alt)}
.text-sk{height:200vh}
.text-row{position:sticky;top:calc(var(--hd-h) + var(--sec));display:grid;grid-template-columns:5fr 7fr;gap:80px;align-items:center;width:100%}
.text-im{aspect-ratio:4/5;overflow:hidden;max-height:calc(100vh - var(--hd-h) - var(--sec) * 2)}
.text-im img{width:100%;height:100%;object-fit:cover;transform:scale(1.15);transition:transform .2s linear}
.text blockquote{font-family:var(--serif);font-weight:400;font-size:var(--fs-quote);line-height:1.4;margin:30px 0 36px}
.text blockquote span{color:var(--line);transition:color .25s}
.text blockquote span.on{color:var(--ink)}
.text .sign{display:flex;align-items:center;gap:14px;font-size:var(--fs-small);letter-spacing:.2em}
.text .sign::before{content:"";width:20px;height:1px;background:var(--ink)}

/* 섹션 4 VIDEO — 중앙 정렬 */
.video{padding:var(--sec) 0;text-align:center;background:var(--bg)}
.video-info h3{font-family:var(--serif);font-size:var(--fs-title);font-weight:400}
.video-info p{font-size:var(--fs-body);line-height:1.7;color:var(--sub);margin:12px 0 24px;white-space:nowrap}
.video-box{position:relative;width:100%;max-width:980px;margin:56px auto 0;cursor:pointer;display:block}
.video-box .ph{aspect-ratio:16/9}
.video-box .ph img{transition:transform 1.2s cubic-bezier(.2,.6,.2,1)}
.video-box:hover .ph img{transform:scale(1.04)}
.video-box .play{position:absolute;inset:0;margin:auto;width:56px;height:56px;border:1.5px solid #fff;border-radius:50%;background:rgba(0,0,0,.08);transition:background .4s}
.video-box .play::after{content:"";position:absolute;left:22px;top:17px;border-left:16px solid #fff;border-top:10px solid transparent;border-bottom:10px solid transparent}
.video-box:hover .play{background:rgba(255,255,255,.18)}

/* 유튜브 모달 */
.yt{position:fixed;inset:0;z-index:50;display:grid;place-items:center;padding:64px 24px 40px;background:rgba(15,15,14,.92);opacity:0;visibility:hidden;transition:opacity .5s,visibility 0s .5s}
.yt.on{opacity:1;visibility:visible;transition:opacity .5s}
.yt-box{position:relative;width:min(1100px,100%);transform:translateY(20px) scale(.98);transition:transform .7s cubic-bezier(.2,.6,.2,1)}
.yt.on .yt-box{transform:none}
.yt-frame{position:relative;aspect-ratio:16/9;background:#000;overflow:hidden}
.yt-frame iframe{position:absolute;inset:0;width:100%;height:100%;border:0}
.yt-x{position:absolute;right:0;top:-48px;display:flex;align-items:center;gap:10px;color:var(--dark-ink);font-size:var(--fs-small);letter-spacing:.2em}
.yt-x i{position:relative;width:18px;height:18px}
.yt-x i::before,.yt-x i::after{content:"";position:absolute;left:0;top:50%;width:18px;height:1px;background:currentColor;transform:rotate(45deg)}
.yt-x i::after{transform:rotate(-45deg)}

/* 섹션 5 ABOUT */
.about{background:var(--bg-alt);padding:var(--sec) 0}
.about .wrap{display:grid;grid-template-columns:1fr 1fr;gap:60px;align-items:center}
.about-txt p{font-size:var(--fs-body);line-height:1.75;color:var(--sub);max-width:300px;margin:26px 0 22px}
.about-txt .link{font-weight:400;letter-spacing:0;font-size:var(--fs-body)}
.about .ph{aspect-ratio:2/1}

@media (prefers-reduced-motion:reduce){
  .hero .st,.work .item .ph img,.video-box .ph img,.text-im img{transition:none}
}
@media (max-width:900px){
  .hero{height:auto}
  .hero h1{white-space:normal}
  .strips{position:relative;inset:auto;gap:0;overflow-x:auto;scroll-snap-type:x mandatory;scrollbar-width:none;container-type:normal}
  .strips::-webkit-scrollbar{display:none}
  .hero .st{flex:0 0 100%;scroll-snap-align:start;scroll-snap-stop:always;transition:none}
  .hero .st:hover{flex-grow:0}
  .hero .st img{position:static;display:block;width:100%;height:auto;aspect-ratio:4/5;object-fit:cover;transform:none}
  .hero .st span{bottom:48px}
  .hero-dots{display:flex;gap:8px;position:absolute;left:50%;bottom:22px;transform:translateX(-50%);z-index:3}
  .hero-dots button{width:6px;height:6px;border-radius:50%;background:rgba(255,255,255,.5);transition:width .4s,background .4s}
  .hero-dots button.on{width:22px;border-radius:3px;background:#fff}
  .work .grid{grid-template-columns:repeat(2,1fr);gap:28px 20px}
  .text-sk{height:auto}
  .text-row{position:static;grid-template-columns:1fr;gap:32px}
  .text-im{max-height:none}
  .text-im img{transform:none}
  .text blockquote span{color:var(--ink)}
  .video-info p{white-space:normal}
  .about .wrap{grid-template-columns:1fr}
}
@media (max-width:560px){
  .work .grid{grid-template-columns:1fr}
}