:root{
  --land:#EFEBE3;--sea:#B7D5E6;--sea-hi:#8FC0DC;--canal:#2F7BAE;--ink:#1D2530;--sub:#5B6673;
  --hot:#00B4C9;--pier:#E4DFD5;--site:#E5DCC8;--paper:#F7F5F0;
  --header:64px;
}
*{box-sizing:border-box}

body{margin:0;background:var(--paper);color:var(--ink);font-family:"Noto Sans KR",Pretendard,"Malgun Gothic",sans-serif;-webkit-font-smoothing:antialiased;word-break:keep-all}
img{display:block;max-width:100%}

/* hero */
.hero{position:relative;min-height:100vh;display:flex;align-items:flex-end;padding:calc(var(--header) + 24px) 20px 64px;background:#0d1a24 var(--img) center/cover no-repeat;color:#fff}
.hero::before{content:"";position:absolute;inset:0;background:linear-gradient(180deg,rgba(8,18,26,.15) 30%,rgba(8,18,26,.8))}
.hero-inner{position:relative;max-width:960px;margin:0 auto;width:100%}
.kicker{font-size:13px;letter-spacing:.12em;font-weight:700;color:#4FD3E2;margin:0 0 10px}
.hero h1{font-size:clamp(40px,8vw,84px);line-height:1.08;margin:0;font-weight:900;letter-spacing:-.03em}
.dek{font-size:clamp(18px,2.6vw,26px);margin:14px 0 0;font-weight:500;opacity:.92}
.byline{font-size:14px;opacity:.7;margin:18px 0 0}
.credit{position:absolute;right:14px;bottom:10px;margin:0;font-size:11px;opacity:.7}

/* photo sequences */
.photo-seq{position:relative}
.photo-stage{position:sticky;top:0;height:100vh;overflow:hidden;background:#0d1a24}
.ph{position:absolute;inset:0;margin:0;opacity:0;transition:opacity .8s ease}
.ph.is-on{opacity:1}
.ph img{width:100%;height:100%;object-fit:cover;filter:brightness(.72)}
.ph figcaption{position:absolute;right:14px;bottom:10px;font-size:11px;color:#fff;opacity:.75}
.photo-seq .steps{position:relative;margin-top:-100vh;z-index:2}
.photo-seq .step{min-height:100vh;display:flex;align-items:center;justify-content:center;padding:0 20px}
.photo-seq .card{color:#fff;background:none;box-shadow:none;text-align:center;font-size:clamp(22px,3.6vw,34px);font-weight:700;line-height:1.5;text-shadow:0 2px 18px rgba(0,0,0,.55);max-width:640px}
.photo-seq .card.big{font-size:clamp(44px,9vw,96px);font-weight:900;letter-spacing:-.03em;line-height:1.15}
.count{display:block;margin-top:18px;font-size:clamp(48px,10vw,104px);font-weight:900;letter-spacing:-.03em}

/* beat */
.beat{min-height:80vh;display:flex;align-items:center;justify-content:center;padding:0 20px}
.q{font-size:clamp(36px,7vw,72px);font-weight:900;letter-spacing:-.03em;margin:0;text-align:center}

/* scrolly maps */
.scrolly{position:relative}
.stage{position:sticky;top:var(--header);height:calc(100vh - var(--header));overflow:hidden;background:var(--sea)}
.map{position:absolute;inset:0;opacity:0;transition:opacity .9s ease}
.map.is-on{opacity:1}
.map svg{width:100%;height:100%;display:block}
.map-credit{position:absolute;left:12px;bottom:8px;margin:0;font-size:11px;color:var(--sub);background:rgba(247,245,240,.75);padding:2px 6px;border-radius:4px;z-index:3}
.scrolly .steps{position:relative;margin-top:calc(-100vh + var(--header));z-index:2;pointer-events:none}
.scrolly .step{min-height:100vh;display:flex;align-items:center;padding:0 5vw}
.scrolly .card{pointer-events:auto;max-width:420px;background:rgba(255,255,255,.95);border-radius:14px;padding:22px 24px;box-shadow:0 10px 30px rgba(20,40,60,.14);font-size:clamp(19px,2.2vw,24px);font-weight:700;line-height:1.55;margin:0}
.scrolly .card b{color:var(--hot)}
.scrolly .card.big{font-size:clamp(30px,4.4vw,46px);font-weight:900;line-height:1.25;letter-spacing:-.02em}
.card-photo{width:100%;border-radius:8px;margin-bottom:4px}
.card-credit{display:block;font-size:11px;font-weight:400;color:var(--sub);margin-bottom:12px}
.scrolly .step.right{justify-content:flex-end}

/* svg text */
.map text{font-family:"Noto Sans KR","Malgun Gothic",sans-serif}
.halo{paint-order:stroke;stroke:#fff;stroke-width:4px;stroke-linejoin:round}
.halo-sea{paint-order:stroke;stroke:var(--sea);stroke-width:5px;stroke-linejoin:round}
.layer{opacity:0;transition:opacity .6s ease}
.layer.on{opacity:1}
.pulse{animation:pulse 1.8s ease-out infinite;transform-box:fill-box;transform-origin:center}
@keyframes pulse{0%{transform:scale(.6);opacity:.9}100%{transform:scale(2.4);opacity:0}}
.sea-fill{transition:fill .6s ease}

/* notes */
.notes{max-width:760px;margin:0 auto;padding:56px 20px 80px;font-size:14px;line-height:1.8;color:var(--sub)}
.notes h2{font-size:16px;color:var(--ink);margin:0 0 10px}
.notes a{color:inherit}

@media (max-aspect-ratio:10/11){
  .stage{height:58vh}
  .scrolly .steps{margin-top:-58vh}
  .scrolly .step{align-items:flex-end;padding:0 14px 4vh}
  .scrolly .card{max-width:none!important;width:100%;padding:18px 18px}
  .card-photo{max-height:20vh;object-fit:cover}
  .why p{font-size:15px}
  .map-credit{font-size:10px}
}
@media (prefers-reduced-motion:reduce){
  .ph,.map,.layer{transition:none}
  .pulse{animation:none}
}


/* 폭 비교 카드 */
.big-line{display:block;font-size:clamp(30px,4.4vw,46px);font-weight:900;letter-spacing:-.02em;line-height:1.2;margin-bottom:14px}
.scale-cmp{margin:0}
.scale-cmp figcaption{font-size:14px;font-weight:800;margin-bottom:4px}
.scale-cmp svg{width:100%;height:auto;display:block}
.scale-note{display:block;font-size:12px;font-weight:400;color:var(--sub);margin-top:2px}

/* 프롤로그 이름 */
.name{display:block;margin-top:14px;font-size:clamp(48px,10vw,104px);font-weight:900;letter-spacing:-.03em;line-height:1.1}

/* 29일 재구성 안내 */
.scene-note{position:absolute;right:12px;top:12px;margin:0;font-size:11px;line-height:1.5;text-align:right;color:var(--ink);background:rgba(255,255,255,.85);padding:4px 8px;border-radius:6px;z-index:3;opacity:0;transition:opacity .5s}
.stage.show-note .scene-note{opacity:1}

/* 가능성 본문 */
.why-sec{max-width:720px;margin:0 auto;padding:24px 20px 72px}
.why-intro{font-size:18px;line-height:1.8;margin:0 0 36px;color:var(--ink)}
.why-group{font-size:15px;letter-spacing:.06em;color:var(--sub);border-top:2px solid var(--ink);padding-top:12px;margin:48px 0 20px}
.why{background:#fff;border-radius:14px;padding:26px 26px 20px;margin:0 0 22px;box-shadow:0 6px 24px rgba(20,40,60,.07)}
.why .why-no{margin:0;color:var(--hot);font-size:14px;font-weight:700;letter-spacing:.06em}
.why h3{margin:4px 0 10px;font-size:clamp(24px,3.2vw,30px);font-weight:900;letter-spacing:-.02em}
.why .why-lead{font-size:clamp(17px,2vw,20px);font-weight:700;margin:0 0 14px;line-height:1.5}
.why p{font-size:16px;line-height:1.85;margin:0 0 12px}
.why .src{list-style:none;margin:14px 0 0;padding:12px 0 0;border-top:1px solid #E6E1D6;font-size:12.5px;color:var(--sub);line-height:1.8}
.why .src a{color:inherit;text-underline-offset:2px}
.vs{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin:0 0 4px}
.vs>div{background:var(--paper);border-radius:10px;padding:14px 16px}
.vs .vs-tag{font-size:13px;font-weight:800;color:var(--hot);margin:0 0 6px}
.vs p{font-size:15px;line-height:1.75;margin:0}
@media (max-width:620px){ .vs{grid-template-columns:1fr} .why{padding:22px 18px 16px} .why-intro{font-size:17px} }
@media (max-aspect-ratio:10/11){ .scene-note{font-size:10px;top:8px;right:8px} }
@media (max-aspect-ratio:10/11){ .map-credit{top:6px;bottom:auto;left:8px;right:8px} .scene-note{top:46px} }

/* 방문객 수 */
.count-note{display:block;font-size:14px;font-weight:500;margin-top:8px;opacity:.9}

/* 카드 안 보충 설명 */
.card-note{display:block;margin-top:12px;padding-top:10px;border-top:1px solid #E6E1D6;font-size:13px;font-weight:400;line-height:1.65;color:var(--sub)}

/* 가운데 팝업 */
.scrolly .step.center{justify-content:center}
.scrolly .card.popup{max-width:520px!important;text-align:center;padding:30px 30px 24px;transform:scale(.94);opacity:.0;transition:transform .5s ease,opacity .5s ease}
.scrolly .card.popup.is-in{transform:none;opacity:1}
.pop-kicker{margin:0;font-size:15px;font-weight:700;color:var(--sub)}
.pop-title{margin:4px 0 18px;font-size:clamp(26px,3.6vw,36px);font-weight:900;letter-spacing:-.02em;color:var(--hot)}
.popup blockquote{margin:0 0 14px;padding:14px 16px;background:var(--paper);border-radius:10px}
.popup blockquote p{margin:0 0 4px;font-size:clamp(17px,2vw,20px);font-weight:700;line-height:1.5}
.popup cite{display:block;margin-top:6px;font-size:12.5px;font-style:normal;font-weight:400;color:var(--sub)}
.popup cite a{color:inherit}
@media (max-aspect-ratio:10/11){
  .scrolly .step.center{align-items:center;padding-bottom:0}
  .scrolly .card.popup{padding:22px 18px 16px}
}
@media (prefers-reduced-motion:reduce){ .scrolly .card.popup{transform:none;opacity:1;transition:none} }

/* 외해 설명용 전체 조망 인셋 */
.oehae-inset{position:absolute;right:20px;top:50%;width:min(300px,26vw);margin:0;background:#fff;border-radius:12px;box-shadow:0 10px 30px rgba(20,40,60,.18);padding:8px 8px 6px;z-index:4;opacity:0;transform:translateY(-50%) scale(.92);transition:opacity .5s ease,transform .5s ease;pointer-events:none}
.stage.show-inset .oehae-inset{opacity:1;transform:translateY(-50%) scale(1)}
.oehae-inset figcaption{font-size:12px;font-weight:800;color:var(--sub);margin:2px 4px 6px}
.inset-map{aspect-ratio:10/9;border-radius:8px;overflow:hidden}
.inset-map svg{width:100%;height:100%;display:block}
@media (max-aspect-ratio:10/11){
  .oehae-inset{width:42vw;top:auto;bottom:10px;right:10px;transform:scale(.92)}
  .stage.show-inset .oehae-inset{transform:none}
}
.inset-map text{font-family:"Noto Sans KR","Malgun Gothic",sans-serif}
.card-inset{display:none;margin:12px 0 0}
.card-inset figcaption{font-size:12px;font-weight:700;color:var(--sub);margin-bottom:6px}
.card-inset .inset-map{aspect-ratio:10/9}
@media (max-aspect-ratio:10/11){
  .oehae-inset{display:none}
  .card-inset{display:block;float:right;width:42%;margin:4px 0 4px 12px}
  .card-inset figcaption{font-size:10.5px;line-height:1.35}
}
@media (max-aspect-ratio:10/11){
  .map .oehae-far{display:none}
  .card-inset{width:38%}
  .card-note{font-size:12.5px}
}

/* '수로에 갇혔다고?' 철창 */
.beat.cage{position:relative;overflow:hidden;min-height:90vh}
.beat.cage::before{
  content:"";position:absolute;inset:0;pointer-events:none;
  /* 세로 철창: 바마다 좌우 음영을 넣어 둥근 쇠막대처럼 */
  background:
    linear-gradient(180deg,#8E959C 0,#8E959C 10px,transparent 10px) top/100% 10px no-repeat,
    linear-gradient(0deg,#8E959C 0,#8E959C 10px,transparent 10px) bottom/100% 10px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 calc(var(--bar-gap) - var(--bar-w)),#6F767D calc(var(--bar-gap) - var(--bar-w)),#C9CED2 calc(var(--bar-gap) - var(--bar-w)/2),#6F767D var(--bar-gap));
  opacity:.38;
  /* 글자 주변은 비워 읽기 방해를 줄임 */
  -webkit-mask:radial-gradient(ellipse 34% 26% at 50% 50%,transparent 55%,#000 100%);
          mask:radial-gradient(ellipse 34% 26% at 50% 50%,transparent 55%,#000 100%);
}
.beat.cage{--bar-gap:clamp(56px,7vw,96px);--bar-w:10px}
.beat.cage .q{position:relative;z-index:1}
@media (max-width:620px){
  .beat.cage{--bar-gap:48px;--bar-w:8px}
  .beat.cage::before{-webkit-mask:radial-gradient(ellipse 48% 18% at 50% 50%,transparent 50%,#000 100%);mask:radial-gradient(ellipse 48% 18% at 50% 50%,transparent 50%,#000 100%)}
}
/* 철창 화면: 살짝 어두운 회색 배경 + 밝은 글자 */
.beat.cage{background:#4B5157}
.beat.cage .q{color:#F1EFEA}
.beat.cage::before{
  background:
    linear-gradient(180deg,#30353A 0,#30353A 10px,transparent 10px) top/100% 10px no-repeat,
    linear-gradient(0deg,#30353A 0,#30353A 10px,transparent 10px) bottom/100% 10px no-repeat,
    repeating-linear-gradient(90deg,transparent 0 calc(var(--bar-gap) - var(--bar-w)),#2B3035 calc(var(--bar-gap) - var(--bar-w)),#7A8188 calc(var(--bar-gap) - var(--bar-w)/2),#2B3035 var(--bar-gap));
  opacity:.75;
}

/* 외해 점 ↔ 전체 조망 연결선 */
.connector{position:absolute;inset:0;width:100%;height:100%;pointer-events:none;z-index:5;overflow:visible;opacity:0;transition:opacity .4s ease}
.connector.on{opacity:1}
.connector line{stroke:#00B4C9;stroke-width:2;stroke-dasharray:5 5}
.connector circle{fill:#00B4C9;stroke:#fff;stroke-width:2}
@media (max-aspect-ratio:10/11){ .connector{display:none} }

/* 엔딩 '외해' → '왜' */
.photo-seq .step.swap-step{min-height:200vh;align-items:flex-start}
.swap-card{position:sticky;top:calc(50vh - .9em);margin-top:calc(50vh - 1.4em)}
.sw1{display:inline-grid;vertical-align:baseline}
.sw1>span{grid-area:1/1;transition:opacity .6s ease,transform .6s ease}
.sw-b{opacity:0;transform:translateY(.35em)}
.sw2{display:inline-block;max-width:1.2em;overflow:hidden;vertical-align:bottom;white-space:nowrap;transition:max-width .7s ease .15s,opacity .5s ease}
.swap-step.swapped .sw-a{opacity:0;transform:translateY(-.35em)}
.swap-step.swapped .sw-b{opacity:1;transform:none;color:#4FD3E2}
.swap-step.swapped .sw2{max-width:0;opacity:0}
@media (prefers-reduced-motion:reduce){ .sw1>span,.sw2{transition:none} }

/* 카드마다 휠이 한 번씩 걸리도록 (근접 스냅) */
html{scroll-snap-type:y proximity}
.step{scroll-snap-align:start}
.photo-seq .step.swap-step{position:relative;scroll-snap-align:none}
.snap-pt{position:absolute;left:0;width:1px;height:100vh;scroll-snap-align:start;pointer-events:none}
@media (prefers-reduced-motion:reduce){ html{scroll-snap-type:none} }

/* 타이틀 글자 좌측 상단 */
.hero{align-items:flex-start;padding-top:calc(var(--header) + 40px)}
.hero::before{background:linear-gradient(160deg,rgba(8,18,26,.78) 0%,rgba(8,18,26,.35) 45%,rgba(8,18,26,.1) 75%)}
.hero-inner{margin:0;max-width:none}

/* 화면 낭독용 */
.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}

/* '수로에 갇혔다고?' 상어 말풍선 (테두리만) */
.shark-bubble{position:relative;z-index:1;width:min(92vw,820px);aspect-ratio:1000/400}
.shark-bubble svg{position:absolute;inset:0;width:100%;height:100%;overflow:visible}
.shark-bubble svg path,.shark-bubble svg circle{fill:none;stroke:#F1EFEA;stroke-width:4;stroke-linejoin:round;stroke-linecap:round;vector-effect:non-scaling-stroke}
.shark-bubble svg circle{fill:#F1EFEA}
.shark-bubble .q{position:absolute;left:47%;top:53%;transform:translate(-50%,-50%);white-space:nowrap;font-size:clamp(22px,5.2vw,56px)}
.shark-bubble .q{left:56%;font-size:clamp(17px,4.4vw,48px)}
@media (max-aspect-ratio:10/11){ .stage.show-inset .exit2{display:none} }
/* 문구는 화면 정중앙, 상어 몸통이 문구를 감싸도록 상어 쪽을 옮김 */
.shark-bubble .q{left:50%;top:50%}
.shark-bubble svg{transform:translate(-6%,-3%)}
.shark-bubble{width:min(84vw,820px)}
/* 상어도 정중앙: 이동 없이 몸통을 키운 새 형태 */
.shark-bubble{aspect-ratio:1000/420;width:min(90vw,860px)}
.shark-bubble svg{transform:none}
.shark-bubble .q{left:52%;top:50%;font-size:clamp(17px,4.6vw,50px)}
.shark-bubble .q{left:50%;font-size:clamp(16px,4.2vw,46px)}

/* 철창 화면: 화면 꽉 채우기 + 위에서 내려오는 철창 + 상어와 겹치지 않게 */
.beat.cage{height:100vh;min-height:0;scroll-snap-align:start;scroll-snap-stop:always}
.beat.cage::before{-webkit-mask:none!important;mask:none!important;transform:translateY(-100%);transition:transform 1.1s cubic-bezier(.22,.9,.28,1.12)}
.beat.cage.drop::before{transform:none}
/* 상어 몸통을 배경색으로 채워 창살이 몸통을 지나가지 않게 */
.shark-bubble svg path.body{fill:#4B5157}
@media (prefers-reduced-motion:reduce){ .beat.cage::before{transition:none;transform:none} }

/* 첫 화면: 스크롤 동안 고정 + '외해' → '왜' 자모 변환 */
.hero-wrap{position:relative;height:180vh}
.hero-wrap>.hero{position:sticky;top:0;height:100vh}
.morph{display:inline-block;position:relative;vertical-align:top;height:1.08em;width:calc((2 - var(--k,0)) * 1em)}
.morph>span{position:absolute;top:0;left:0;width:1em;height:100%}
.morph .m-hae{left:calc((1 - var(--k,0)) * 1em)}
.morph .keep,.morph .drop{position:absolute;left:0;top:0}
.morph .m-oe .keep{clip-path:inset(-10% 34% -10% -10%)}
.morph .m-oe .drop{clip-path:inset(-10% -10% -10% 66%)}
.morph .m-hae .drop{clip-path:inset(-10% 50% -10% -10%)}
.morph .m-hae .keep{clip-path:inset(-10% -10% -10% 50%)}
.morph .drop{color:var(--dc,#fff);opacity:var(--d,1)}
.morph .keep{opacity:calc(1 - var(--f,0))}
.morph .m-wae{opacity:var(--f,0)}
@media (prefers-reduced-motion:reduce){ .hero-wrap{height:auto} .hero-wrap>.hero{position:relative} }
/* 첫 화면: 스크롤 고정 대신 시간 애니메이션 */
.hero-wrap{height:auto}
.hero-wrap>.hero{position:relative;height:auto;min-height:100vh}

/* 경고 팝업: 어두운 배경 + 가운데에서 튀어나오는 등장 */
.stage-dark{position:absolute;inset:0;background:rgba(10,16,22,.72);opacity:0;transition:opacity .5s ease;z-index:6;pointer-events:none}
.stage.dark .stage-dark{opacity:1}
.stage.dark .map-credit,.stage.dark .scene-note{opacity:.25}
.scrolly .card.popup{transform:scale(.55);opacity:0;transition:transform .55s cubic-bezier(.2,1.4,.4,1),opacity .35s ease}
.scrolly .card.popup.is-in{transform:scale(1);opacity:1}
/* 팝업은 스크롤로 올라오지 않고 화면 한가운데에서 바로 나타남 */
.scrolly .card.popup{position:fixed;left:50%;top:50%;width:min(520px,calc(100vw - 32px));transform:translate(-50%,-50%) scale(.55);z-index:20;pointer-events:none}
.scrolly .card.popup.is-in{transform:translate(-50%,-50%) scale(1);pointer-events:auto}
@media (prefers-reduced-motion:reduce){ .scrolly .card.popup{transition:opacity .2s} }
.stage-dark{position:fixed;inset:0;z-index:15}

/* 첫 헤드라인 '외해' 뉴시스 민트 */
.hero h1 .hl-mint{color:#00B4C9}

/* 팝업 다음 카드: 팝업이 사라진 뒤 나타남 */
.scrolly .after-pop-step > .card{opacity:0;transform:translateY(12px);transition:opacity .45s ease,transform .45s ease}
.scrolly .after-pop-step > .card.show{opacity:1;transform:none}

/* '살 만한 곳인가' 팝업 */
.pop-sub{margin:-6px 0 16px;font-size:14px;color:var(--sub)}
.pop-vs{text-align:left;margin:0}
.pop-vs>div{background:var(--paper)}
.pop-vs p{font-size:clamp(15px,1.7vw,17px);font-weight:700;line-height:1.55;margin:0 0 4px}
.pop-vs cite{display:block;margin-top:6px;font-size:12px;font-style:normal;color:var(--sub)}
@media (max-width:620px){ .pop-vs{grid-template-columns:1fr} }

/* 첫 화면 제목 옆 망원경 캐릭터 (한눈에 알아볼지도 시리즈) */
.hero h1 .hero-line{display:inline-flex;align-items:flex-end;gap:.12em;white-space:nowrap}
.hero h1 .hero-pin{display:block;height:1.15em;width:auto;margin-bottom:-.06em;filter:drop-shadow(0 4px 10px rgba(0,0,0,.35))}

/* 엔딩 문구: 화면 정중앙에 고정 (고정 구간 동안 스크롤해도 움직이지 않음) */
.photo-seq .step.swap-step{display:block;min-height:200vh;padding:0}
.swap-pin{position:sticky;top:0;height:100vh;display:flex;align-items:center;justify-content:center;padding:0 20px}
.swap-pin .swap-card{position:static;margin:0;top:auto}
.hero h1 .hero-pin{filter:drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 1.5px #fff) drop-shadow(0 0 8px rgba(255,255,255,.45))}
/* 망원경 캐릭터: 효과 없이 원본 그대로 축소만 */
.hero h1 .hero-pin{filter:none}

/* '왜 나가지 않을까': 같은 상어 테두리를 회색으로 + 머리 위 물음표 */
.beat.why-shark{min-height:90vh}
.why-shark .shark-bubble svg path,.why-shark .shark-bubble svg circle{stroke:#4B5157}
.why-shark .shark-bubble svg circle{fill:#4B5157}
.why-shark .shark-bubble svg path.body{fill:none}
.why-shark .shark-bubble svg .qmark{fill:#4B5157;stroke:none;font-family:"Noto Sans KR","Malgun Gothic",sans-serif;font-weight:900;font-size:120px}
.why-shark .shark-bubble .q{color:#4B5157}
.why-shark .shark-bubble .q{font-size:clamp(20px,5.4vw,58px)}

/* '왜 나가지 않을까' 화면: 항공사진 전체 화면 배경 + 위쪽 지면색 그라데이션 */
.beat.why-shark{position:relative;height:100vh;min-height:0;overflow:hidden;align-items:flex-start;padding-top:calc(var(--header) + 3vh);scroll-snap-align:start}
.why-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover;object-position:50% 60%;z-index:0}
.beat.why-shark::before{content:"";position:absolute;inset:0;z-index:1;pointer-events:none;
  background:linear-gradient(180deg,rgba(247,245,240,.96) 0%,rgba(247,245,240,.9) 26%,rgba(247,245,240,.55) 44%,rgba(247,245,240,0) 62%)}
.why-shark .shark-bubble{z-index:2;width:min(78vw,720px)}
/* 문구 위치는 그대로 두고 상어 외곽선만 키워 아가미와 글자를 분리한다. */
.why-shark .shark-bubble svg{transform:scale(1.18);transform-origin:50% 50%}
.why-credit{position:absolute;right:12px;bottom:10px;margin:0;z-index:2;font-size:11px;color:#fff;text-shadow:0 1px 4px rgba(0,0,0,.6)}
@media (max-aspect-ratio:10/11){
  .why-bg{object-position:50% 50%}
  .beat.why-shark::before{background:linear-gradient(180deg,rgba(247,245,240,.96) 0%,rgba(247,245,240,.9) 22%,rgba(247,245,240,.5) 34%,rgba(247,245,240,0) 48%)}
  .why-shark .shark-bubble{width:90vw}
  .why-shark .shark-bubble svg{transform:scale(1.06)}
}

/* 모바일: 지도 상단에는 출처만 두고, 29일 재구성 안내는 지도 아래쪽으로 내려 지명 라벨과 겹치지 않게 */
@media (max-aspect-ratio:10/11){
  .scene-note{top:auto;bottom:8px;right:8px}
}
@media (max-aspect-ratio:10/11){ .scene-note{left:8px;right:auto;text-align:left} }
@media (max-aspect-ratio:10/11){ .stage.show-inset .scene-note{display:none} }

/* 엔딩 '외해' → '왜': 'ㅣ'와 'ㅎ'이 흐려져 사라진 뒤, 남은 '오'와 'ㅐ'가 미끄러져 붙어 '왜'가 됨 (스크롤 지점에서 시작) */
.swap-card .morph.merge{height:1.15em;width:2em;transition:width .55s cubic-bezier(.5,0,.2,1) .55s}
.swap-card .morph.merge .m-hae{left:1em;transition:left .55s cubic-bezier(.5,0,.2,1) .55s}
.swap-card .morph.merge .drop{color:#fff;opacity:1;transition:color .3s ease,opacity .3s ease .3s}
.swap-card .morph.merge .keep{opacity:1;transition:opacity .25s ease 1.15s}
.swap-card .morph.merge .m-wae{opacity:0;color:#4FD3E2;transition:opacity .25s ease 1.1s}
.swap-step.swapped .morph.merge{width:1em}
.swap-step.swapped .morph.merge .m-hae{left:0}
.swap-step.swapped .morph.merge .drop{color:#8B939A;opacity:0}
.swap-step.swapped .morph.merge .keep{opacity:0}
.swap-step.swapped .morph.merge .m-wae{opacity:1}
/* 되돌아갈 때는 빠르게 원래 글자로 */
.swap-step:not(.swapped) .morph.merge,.swap-step:not(.swapped) .morph.merge .m-hae{transition-delay:0s;transition-duration:.3s}
.swap-step:not(.swapped) .morph.merge .drop,.swap-step:not(.swapped) .morph.merge .keep,.swap-step:not(.swapped) .morph.merge .m-wae{transition-delay:0s}
@media (prefers-reduced-motion:reduce){ .swap-card .morph.merge,.swap-card .morph.merge *{transition:none!important} }

/* 시민들의 바람: 인파 사진 전체 화면 + 가운데 큰 인용 */
.voice{position:relative;height:100vh;overflow:hidden;display:flex;align-items:center;justify-content:center;scroll-snap-align:start;scroll-snap-stop:always;background:#1d2530}
.voice-bg{position:absolute;inset:0;width:100%;height:100%;object-fit:cover}
.voice::before{content:"";position:absolute;inset:0;z-index:1;background:radial-gradient(ellipse 70% 55% at 50% 50%,rgba(10,16,22,.62),rgba(10,16,22,.28) 70%,rgba(10,16,22,.18))}
.voice-inner{position:relative;z-index:2;text-align:center;color:#fff;padding:0 20px;opacity:0;transform:translateY(18px);transition:opacity .8s ease,transform .8s ease}
.voice.in .voice-inner{opacity:1;transform:none}
.voice-kicker{margin:0 0 16px;font-size:clamp(16px,2vw,22px);font-weight:700;color:#4FD3E2;letter-spacing:.02em}
.voice-quote{margin:0;font-size:clamp(28px,5.4vw,64px);font-weight:900;line-height:1.25;letter-spacing:-.03em;text-shadow:0 3px 24px rgba(0,0,0,.45)}
.voice-credit{position:absolute;right:12px;bottom:10px;margin:0;z-index:2;font-size:11px;color:#fff;opacity:.8}
@media (prefers-reduced-motion:reduce){ .voice-inner{transition:none;opacity:1;transform:none} }
/* 시민 멘트 산개 배치: 큰 인용이 뜬 뒤 반박자(0.5초)씩 차례로 나타남 */
.voice-says{list-style:none;margin:0;padding:0;position:absolute;inset:0;z-index:2;pointer-events:none}
.voice-say{position:absolute;max-width:34vw;color:#fff;font-size:clamp(13px,1.45vw,20px);font-weight:700;line-height:1.45;letter-spacing:-.02em;text-shadow:0 2px 14px rgba(0,0,0,.6);opacity:0;transform:translateY(12px);transition:opacity .8s ease,transform .8s ease}
.voice.in .voice-say{opacity:.92;transform:none;transition-delay:calc(1s + var(--i)*.5s)}
.vs-1{left:7%;top:13%}
.vs-2{left:6%;top:50%}
.vs-3{right:7%;top:15%;text-align:right}
.vs-4{right:6%;top:52%;text-align:right}
.vs-5{left:50%;bottom:11%;transform:translate(-50%,12px);text-align:center;max-width:none}
.voice.in .vs-5{transform:translate(-50%,0)}
@media (max-aspect-ratio:10/11){
  .voice-say{max-width:70vw;font-size:13px}
  .vs-1{left:6%;top:11%}
  .vs-3{right:6%;top:23%}
  .vs-2{left:7%;top:auto;bottom:27%}
  .vs-4{right:7%;top:auto;bottom:23%}
  .vs-5{bottom:9%;width:88vw}
}
@media (prefers-reduced-motion:reduce){ .voice-say{transition:none;opacity:.92;transform:none} .vs-5{transform:translateX(-50%)} }
/* 중앙 인용 문단 정렬: 블록은 화면 가운데, 두 줄은 왼쪽 시작선을 맞추고 여는 따옴표는 바깥으로 */
.voice-quote .vq-lines{display:inline-block;text-align:left;text-indent:-.6em;padding-left:.6em}
/* 시민 멘트를 중앙 인용 가까이로 (데스크톱만, 모바일 규칙은 아래 미디어쿼리가 그대로 덮음) */
.vs-1{left:17%;top:22%}
.vs-3{right:15%;top:24%}
.vs-2{left:13%;top:51%}
.vs-4{right:13%;top:53%}
.vs-5{bottom:20%}
@media (max-aspect-ratio:10/11){
  .vs-1{left:6%;top:11%}
  .vs-3{right:6%;top:23%}
  .vs-2{left:7%;top:auto;bottom:27%}
  .vs-4{right:7%;top:auto;bottom:23%}
  .vs-5{bottom:9%}
}
/* 중앙 인용 한 줄 */
.voice-quote .vq-lines{white-space:nowrap;text-indent:0;padding-left:0}
@media (max-aspect-ratio:10/11){ .voice-quote{font-size:6.4vw} }
/* 한 줄 인용과 겹치지 않도록 좌우 짧은 멘트를 아래로 (데스크톱) */
.vs-2{left:14%;top:63%}
.vs-4{right:14%;top:66%}
.vs-5{bottom:13%}
@media (max-aspect-ratio:10/11){
  .vs-2{left:7%;top:auto;bottom:27%}
  .vs-4{right:7%;top:auto;bottom:23%}
  .vs-5{bottom:9%}
}
/* 모바일: 지도 위 출처 상자는 숨김 (출처는 하단 취재·제작 정보에 표기) */
@media (max-aspect-ratio:10/11){ .map-credit{display:none} }
/* 모바일: 지도 아래 빈 영역을 철창·양옆 채움과 같은 회색으로 */
@media (max-aspect-ratio:10/11){ .scrolly{background:#4B5157} }
/* 모바일: '사람들은 이름을 붙였다' 사진에서 부캉이가 화면 안에 들어오도록 왼쪽으로 */
@media (max-aspect-ratio:10/11){ .photo-seq .ph[data-ph="1"] img{object-position:16% 50%} }
/* 첫 화면 PC 최적화 안내 */
.pc-note{margin:10px 0 0;font-size:12px;opacity:.6}
/* 외해 → 왜 (2차): 글리프 실측(Noto Sans KR 900) 기준으로 조각을 나눔
   외 = 오 [0~68%] + ㅣ [73~90%] · 해 = ㅎ [0~52%] + ㅐ [55~94%] · 왜 = 오(가로 78%) + ㅐ(해의 ㅐ와 같은 자리)
   ① ㅣ·ㅎ이 회색으로 바래며 사라지고 ② ㅐ가 왼쪽으로 붙는 동안 오가 가로로 줄어 왜의 오 자리에 맞고
   ③ 모양이 거의 같아진 뒤 실제 '왜' 글자로 교차 — 잘림 없이 자연스럽게 */
.swap-card .morph.merge{transition:width .6s cubic-bezier(.45,0,.2,1) .3s}
.swap-card .morph.merge .m-hae{transition:left .6s cubic-bezier(.45,0,.2,1) .3s}
.swap-card .morph.merge .m-oe .keep{clip-path:inset(-15% 29.5% -15% -15%);transform-origin:0 50%;transition:transform .6s cubic-bezier(.45,0,.2,1) .3s,color .5s ease .3s,opacity .3s ease .9s}
.swap-card .morph.merge .m-oe .drop{clip-path:inset(-15% -15% -15% 70.5%)}
.swap-card .morph.merge .m-hae .drop{clip-path:inset(-15% 45.7% -15% -15%)}
.swap-card .morph.merge .m-hae .keep{clip-path:inset(-15% -15% -15% 54.3%);transition:color .5s ease .3s,opacity .3s ease .9s}
.swap-card .morph.merge .drop{transition:color .25s ease,opacity .35s ease .05s}
.swap-card .morph.merge .m-wae{transition:opacity .3s ease .9s}
.swap-step.swapped .morph.merge .m-oe .keep{transform:scaleX(.78);color:#4FD3E2}
.swap-step.swapped .morph.merge .m-hae .keep{color:#4FD3E2}
.swap-step:not(.swapped) .morph.merge .m-oe .keep,.swap-step:not(.swapped) .morph.merge .m-hae .keep{transition-delay:0s;transition-duration:.3s}
.swap-card .morph.merge .m-wae,.swap-card .morph.merge .keep,.swap-card .morph.merge .drop{text-align:left}
/* 교차 시 밝기가 꺼지지 않도록: 진짜 '왜'를 먼저 올리고 조각은 그 뒤에 내림 */
.swap-card .morph.merge .m-oe .keep{transition:transform .6s cubic-bezier(.45,0,.2,1) .3s,color .5s ease .3s,opacity .2s ease 1.12s}
.swap-card .morph.merge .m-hae .keep{transition:color .5s ease .3s,opacity .2s ease 1.12s}
.swap-card .morph.merge .m-wae{transition:opacity .22s ease .9s}
/* 모바일: 빠르게 휙 넘겨도 설명 카드마다 한 번씩은 멈추도록 */
@media (max-aspect-ratio:10/11){ .scrolly .step,.photo-seq .step,.snap-pt{scroll-snap-stop:always} }
/* 모바일: 좁은 폰에서 한 줄 제목 등이 화면보다 넓어 페이지가 옆으로 늘어나면
   가운데 팝업(left:50%)이 오른쪽으로 밀려 잘린다 → 가로 넘침을 자르고 팝업은 양옆 여백 기준으로 고정 */
main{overflow-x:clip}
.hero h1{font-size:min(clamp(40px,8vw,84px),calc((100vw - 40px) / 8.9))}
@media (max-aspect-ratio:10/11){
  .scrolly .card.popup{left:16px;right:16px;width:auto;max-width:520px;margin:0 auto;transform:translateY(-50%) scale(.55);max-height:calc(100vh - 80px);overflow:auto}
  .scrolly .card.popup.is-in{transform:translateY(-50%) scale(1)}
}