/* 랜딩 (D240 · F-1105-03) — 이야기 구역 하나: 고정 배경(live = 실제 게임 엔진 · lite = 프레임 시퀀스 캔버스) 위로 첫 화면 + 9장면이 한 화면씩 넘어감 (스크롤 스냅).
   외부 글꼴·인라인 스타일 0 (CSP style-src 'self') · 글꼴 = 자체 호스팅 서브셋(Jua·Black Han Sans, SIL OFL — fonts/OFL-*.txt) */
@font-face { font-family: "Black Han Sans"; src: url("fonts/blackhansans.woff2") format("woff2"); font-display: swap; }
@font-face { font-family: "Jua"; src: url("fonts/jua.woff2") format("woff2"); font-display: swap; }
:root {
  color-scheme: light;
  --ink: #1d2b4f;
  --ink-2: #3c4a6e;
  --yellow: #ffd84d;
  --yellow-d: #b99a1f;
  --cream: #fff4dc;
  --deep: #06192a;
  --card: #ffffff;
  --gut: 20px;
  --max: 1160px;
  --font: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", "Noto Sans KR", system-ui, -apple-system, "Segoe UI", sans-serif;
  --display: "Black Han Sans", var(--font);
  --round: "Jua", var(--font);
}
:lang(th) { --font: "Noto Sans Thai", "Leelawadee UI", "Thonburi", "Sukhumvit Set", system-ui, sans-serif; --display: var(--font); --round: var(--font); }
*, *::before, *::after { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; background: var(--deep); }
body { margin: 0; background: var(--cream); color: var(--ink); font: 17px/1.65 var(--font); word-break: keep-all; overflow-wrap: anywhere; }
:lang(th) body, body:lang(th) { word-break: normal; line-height: 1.75; }
img { display: block; max-inline-size: 100%; block-size: auto; }
a { color: inherit; }
h1, h2, h3 { margin: 0; font-weight: 400; line-height: 1.18; letter-spacing: -0.01em; }
:lang(th) :is(h1, h2, h3) { font-weight: 800; letter-spacing: 0; line-height: 1.4; }
p { margin: 0; }
.sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.skip { position: absolute; inset-inline-start: 12px; inset-block-start: -80px; z-index: 50; padding: 12px 18px; border-radius: 12px; background: var(--yellow); color: var(--ink); font-weight: 800; text-decoration: none; }
.skip:focus { inset-block-start: 12px; }
:focus-visible { outline: 3px solid var(--yellow); outline-offset: 3px; border-radius: 8px; }
.wrap { inline-size: min(100% - 2 * var(--gut), var(--max)); margin-inline: auto; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 10px; min-block-size: 56px; padding: 0 28px; border-radius: 16px; background: #ffffffee; color: var(--ink); font: 19px/1 var(--round); text-decoration: none; box-shadow: 0 4px 0 #1d2b4f33; transition: transform 0.12s ease, box-shadow 0.12s ease, background-color 0.2s; }
.btn--main { background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-d); font-size: 20px; }
.btn:hover { background: #fff; }
.btn--main:hover { background: #ffe066; }
.btn:active { transform: translateY(4px) scale(0.98); box-shadow: 0 1px 0 var(--yellow-d); }
.btn__icon { inline-size: 20px; block-size: 20px; flex: none; fill: currentColor; }
.minor { display: flex; flex-wrap: wrap; justify-content: center; gap: 4px 18px; margin-block-start: 12px; }
.minor a { display: inline-flex; align-items: center; min-block-size: 48px; font-size: 15px; font-weight: 700; text-underline-offset: 4px; }
.get { display: flex; flex-wrap: wrap; justify-content: center; gap: 12px; align-items: center; }
.get__qr { display: none; align-items: center; gap: 14px; font-size: 15px; }
.get__qr img { inline-size: 112px; block-size: 112px; padding: 8px; border-radius: 14px; background: #fff; }
[data-os="android"] .get__toss { order: 2; background: #ffffffee; box-shadow: 0 4px 0 #1d2b4f33; font-size: 19px; }
[data-os="android"] .get__play { order: 1; background: var(--yellow); box-shadow: 0 5px 0 var(--yellow-d); font-size: 20px; }
@media (hover: hover) and (pointer: fine) and (min-width: 900px) { .get__qr { display: flex; } }

/* 상단 줄 (장면 위에 떠 있음 — 고정하지 않음) */
.top { position: absolute; inset-block-start: 0; inset-inline: 0; z-index: 30; }
.top .wrap { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding-block: 14px; }
.brand { display: inline-flex; align-items: center; gap: 10px; min-block-size: 48px; color: #fff; text-decoration: none; font: 20px/1 var(--display); text-shadow: 0 1px 8px #06192acc; }
.brand img { inline-size: 40px; block-size: 40px; border-radius: 12px; box-shadow: 0 2px 0 #1d2b4f66; }
.langs { flex: none; display: flex; gap: 4px; margin: 0; padding: 4px; list-style: none; border-radius: 999px; background: #06192a66; backdrop-filter: blur(8px); }
.langs a { display: inline-flex; align-items: center; min-block-size: 48px; min-inline-size: 48px; justify-content: center; padding: 0 12px; white-space: nowrap; border-radius: 999px; color: #fff; font-size: 14px; font-weight: 700; text-decoration: none; }
.langs a[aria-current="page"] { background: #fff; color: var(--ink); }
.foot .langs { background: #1d2b4f14; }
.foot .langs a { color: var(--ink); }
.foot .langs a[aria-current="page"] { background: var(--ink); color: #fff; }
@media (max-width: 419px) { :lang(th) .brand__name { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); } }

/* 스크롤 스냅 (landing.js가 이야기 구역에서 손가락이 닿은 동안만 html.snap — 휠·키·버튼은 스크립트가 한 장면씩 · CTA부터 자유 스크롤) */
html.snap { scroll-snap-type: y mandatory; }
.hero, .live__slide { scroll-snap-align: start; scroll-snap-stop: always; }
.cta { scroll-snap-align: start; }

/* 첫 화면 (이야기 구역의 걸음 0 — 배경 = 쇼윈도 상자 · 글 = 제목·버튼·출시 소식 바로 가기) */
.hero { position: relative; z-index: 21; display: flex; align-items: flex-end; justify-content: center; block-size: 100svh; margin-block-start: -100svh; padding: 96px var(--gut) max(9svh, 48px); color: #fff; text-align: center; background: linear-gradient(#06192a99, #06192a00 22%, #06192a00 42%, #06192ad9 100%); }
.hero__in { max-inline-size: 15em; font-size: clamp(34px, 8.6vw, 76px); }
.hero__in > * { font-size: 1rem; }
.hero h1 { font: 1em/1.16 var(--display); text-wrap: balance; text-shadow: 0 2px 18px #06192aaa; }
:lang(th) .hero h1 { font-weight: 800; line-height: 1.35; }
.hero h1 em { font-style: normal; color: var(--yellow); }
.hero__s { max-inline-size: 22em; margin: 14px auto 26px; font: clamp(17px, 2.4vw, 24px)/1.45 var(--round); color: #ffffffe6; text-wrap: balance; text-shadow: 0 1px 10px #06192acc; }
.hero .btn--main { min-inline-size: min(100%, 300px); }
.hero .minor { margin-block-start: 6px; }
.hero .minor a { color: #fff; }
.hero__go { margin-block-start: 4px; }
.hero__skip { display: inline-flex; align-items: center; gap: 8px; min-block-size: 44px; padding: 0 16px; border: 1px solid #ffffff59; border-radius: 999px; background: #06192a73; color: #fff; font: 15px/1.2 var(--round); text-decoration: none; backdrop-filter: blur(6px); }
.hero__skip::after { content: ""; inline-size: 7px; block-size: 7px; margin-block-start: -4px; border-inline-end: 2px solid currentColor; border-block-end: 2px solid currentColor; transform: rotate(45deg); }
.hero__skip:hover { background: #0b2a48cc; border-color: #fff; }
.kin .w { display: inline-block; white-space: nowrap; }
.kin .c { display: inline-block; animation: rise 0.6s cubic-bezier(0.2, 1.4, 0.4, 1) both; animation-delay: calc(var(--i, 0) * 32ms + 120ms); }
@keyframes rise { from { opacity: 0; transform: translateY(0.7em) scale(0.9); } }
@media (min-width: 900px) {
  .hero { justify-content: flex-start; text-align: start; padding-inline: max(var(--gut), (100vw - var(--max)) / 2); padding-block-end: 11vh; background: linear-gradient(#06192a99, #06192a00 20%), linear-gradient(80deg, #06192ad0, #06192a00 58%); }
  .hero__in { font-size: clamp(44px, 5.2vw, 76px); }
  .hero__s { margin-inline: 0; }
  .hero .get, .hero .minor { justify-content: flex-start; }
}
@media (prefers-reduced-motion: reduce) {
  .kin .c { animation: none; }
  .btn { transition: none; }
}

/* 위로 가기 (첫 화면을 지나면 · 오른쪽 아래 — 눈 버튼은 왼쪽 아래 · 보기 모드·오프닝 중 숨김) */
.up { position: fixed; z-index: 25; inset-inline-end: max(16px, env(safe-area-inset-right)); inset-block-end: max(16px, env(safe-area-inset-bottom)); display: grid; place-items: center; inline-size: 48px; block-size: 48px; padding: 0; border: 1px solid #ffffff88; border-radius: 50%; background: #06192acc; color: #fff; cursor: pointer; opacity: 0; visibility: hidden; transform: translateY(8px); transition: opacity .2s, transform .2s, visibility .2s; }
.up[hidden] { display: none; }
html.past-hero .up { opacity: 1; visibility: visible; transform: none; }
html.live-view .up, html.op .up { opacity: 0; visibility: hidden; }
.up:hover, .up:focus-visible { background: #0b2a48; }
@media (prefers-reduced-motion: reduce) { .up { transition: none; } }

/* 이야기 구역 배경 — live = 브라우저에서 도는 3시대 섬(assets/live/live.js, .live--on) · lite(html[data-tier=lite]) = 프레임 시퀀스 캔버스(.seq__cv) · 준비 전 = 첫 그림(.seq__poster) */
.live { background: var(--deep); color: #fff; text-align: center; overflow-x: clip; }
/* 각 목록 항목이 한 화면씩 스크롤 공간을 차지하고, 배경 섬은 그 아래에 붙어 있다. */
.live__box { position: sticky; inset-block-start: 0; block-size: 100svh; overflow: hidden; isolation: isolate; background: #0b3a5a; }
.live__slides { position: relative; z-index: 21; margin: 0; padding: 0; list-style: none; pointer-events: none; }
.seq__poster img, .seq__cv { position: absolute; inset: 0; inline-size: 100%; block-size: 100%; object-fit: cover; }
.seq__cv { opacity: 0; transition: opacity .4s; }
html[data-tier="lite"].seq-ready .seq__cv { opacity: 1; }
.live__slide { display: grid; place-items: center; block-size: 100svh; min-block-size: 0; padding: 12svh 20px 20svh; background: linear-gradient(#06192a80, #06192a1a 36%, #06192aa8); }
/* 발표 문장은 읽기용 제목과 별도로 한 번만 움직인다. */
.live__txt { display: grid; justify-items: center; gap: 12px; inline-size: min(100%, 940px); min-inline-size: 0; text-shadow: 0 3px 14px #000c; opacity: 0; transition: opacity .25s ease-out; }
.live__slide.is-active .live__txt { opacity: 1; }
/* 발표 사진은 글 다음에 도착한다. 위치·방향은 CSS에 고정해 CSP 인라인 스타일을 쓰지 않는다. */
.live__photos { position: relative; inline-size: min(100%, 380px); block-size: min(39svh, 310px); margin-block-start: 8px; pointer-events: none; }
.live__photo { --turn: -7deg; --fly-x: -120vw; --fly-y: -50vh; position: absolute; inset-inline-start: 34%; inset-block-start: 43%; z-index: 1; inline-size: clamp(145px, 45vw, 220px); aspect-ratio: 4 / 5; pointer-events: auto; touch-action: pan-y; cursor: pointer; transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) rotate(var(--turn)); transition: transform .3s ease-in, opacity .3s, box-shadow .3s; opacity: 0; }
.live__photo:nth-child(2) { --turn: 6deg; --fly-x: 120vw; --fly-y: -35vh; inset-inline-start: 65%; inset-block-start: 47%; z-index: 2; }
.live__photo:nth-child(3) { --turn: -2deg; --fly-x: 100vw; --fly-y: 90vh; inset-inline-start: 49%; inset-block-start: 59%; z-index: 3; }
.live__slide:nth-child(even) .live__photo:first-child { --fly-x: 100vw; --fly-y: 45vh; }
.live__slide:nth-child(even) .live__photo:nth-child(2) { --fly-x: -100vw; --fly-y: -50vh; }
.live__slide.is-active .live__photo { opacity: 1; transform: translate(-50%, -50%) rotate(var(--turn)); animation: live-photo-land .55s cubic-bezier(.2, 1, .35, 1) both; animation-delay: .35s; }
.live__slide.is-active .live__photo:nth-child(2) { animation-delay: .47s; }
.live__slide.is-active .live__photo:nth-child(3) { animation-delay: .59s; }
.live__photo-card { display: block; inline-size: 100%; block-size: 100%; padding: 7px 7px 20px; border-radius: 5px; background: #fff; box-shadow: 0 12px 24px #0008, 0 2px 5px #0005; transform-origin: 50% 55%; transition: transform .22s, box-shadow .22s; }
.live__photo picture { display: block; inline-size: 100%; block-size: 100%; }
.live__photo img { display: block; inline-size: 100%; block-size: 100%; object-fit: cover; border-radius: 2px; }
.live__photo.is-enlarged { z-index: 10; }
.live__photo.is-enlarged .live__photo-card { transform: scale(1.15); animation: live-photo-wiggle .55s ease-in-out infinite alternate; box-shadow: 0 20px 36px #000a, 0 3px 8px #0005; }
@media (hover: hover) and (pointer: fine) { .live__photo:hover { z-index: 10; } .live__photo:hover .live__photo-card { transform: scale(1.15); animation: live-photo-wiggle .55s ease-in-out infinite alternate; box-shadow: 0 20px 36px #000a; } }
@keyframes live-photo-land { 0% { transform: translate(calc(-50% + var(--fly-x)), calc(-50% + var(--fly-y))) rotate(calc(var(--turn) * 2)); opacity: 0; filter: blur(3px); } 72% { transform: translate(-50%, -50%) rotate(calc(var(--turn) - 3deg)) scale(1.08); opacity: 1; filter: blur(0); } 100% { transform: translate(-50%, -50%) rotate(var(--turn)); opacity: 1; } }
@keyframes live-photo-wiggle { from { transform: scale(1.15) rotate(-2deg); } to { transform: scale(1.15) rotate(2deg); } }
@media (min-width: 900px) { .live__slide:has(.live__photos) { grid-template-columns: minmax(0, 1fr) minmax(350px, 43%); gap: 2vw; padding-inline: max(5vw, 40px); text-align: start; } .live__slide:has(.live__photos) .live__txt { justify-items: start; } .live__photos { inline-size: 100%; block-size: 420px; } .live__photo { inline-size: clamp(190px, 19vw, 270px); } }
.live__t { inline-size: 100%; min-inline-size: 0; font: clamp(32px, 6vw, 72px)/1.18 var(--display); text-wrap: balance; }
:lang(th) .live__t { font-weight: 800; }
.live__decor { display: block; }
.live__lead { display: block; margin-block-end: .16em; color: #91ddff; font-size: .72em; }
.live__body { display: block; }
.live__char { display: inline-block; white-space: pre; }
.live__s { max-inline-size: 34em; font: clamp(18px, 2vw, 24px)/1.5 var(--round); color: #ffffffea; text-wrap: balance; opacity: 0; transform: translateY(14px); transition: opacity .25s, transform .25s; }
.live__slide.is-active .live__s { animation: live-sub .7s .34s both; }
.live__slide--2 .live__lead { color: #87d4f6; }
.live__slide--3 .live__lead { color: #9bdefc; }
.live__slide--4 .live__lead { color: #b4e9ff; }
.live__slide--5 .live__lead { color: #d0f3ff; }
.live__slide--9 .live__lead { color: #d5eaff; }
.live__slide.is-active .live__char { animation: live-rise .68s cubic-bezier(.22, 1.2, .36, 1) both; animation-delay: calc(100ms + var(--i, 0) * 28ms); }
.live__slide--1.is-active .live__char { animation-name: live-focus; }
.live__slide--2.is-active .live__lead .live__char, .live__slide--3.is-active .live__lead .live__char, .live__slide--4.is-active .live__lead .live__char, .live__slide--5.is-active .live__lead .live__char { animation-name: live-lead; }
.live__slide--2.is-active .live__body .live__char, .live__slide--3.is-active .live__body .live__char, .live__slide--4.is-active .live__body .live__char, .live__slide--5.is-active .live__body .live__char { animation-delay: calc(320ms + var(--i, 0) * 28ms); }
.live__slide--6 .live__t { position: relative; }
.live__slide--6.is-active .live__body { animation: live-wipe-up .9s both; }
.live__slide--6.is-active .live__body::after { content: ""; position: absolute; inset: 0; z-index: -1; background: radial-gradient(ellipse, #ffcb7859, transparent 68%); filter: blur(20px); animation: live-glow 1.2s both; }
.live__slide--6.is-active .live__char { animation: none; }
.live__slide--7.is-active .live__body { animation: live-breathe 1.05s both; }
.live__slide--7.is-active .live__char { animation: none; }
.live__slide--8.is-active .live__body { animation: live-wipe-side .85s both; }
.live__slide--8.is-active .live__char { animation: none; }
.live__slide--9 { position: relative; background: linear-gradient(#020b1dee, #06192add); }
.live__slide--9::before, .live__slide--9::after { content: ""; position: absolute; inset: 0; pointer-events: none; opacity: .45; background: radial-gradient(circle at 19% 22%, #fff 0 1px, transparent 2px), radial-gradient(circle at 76% 35%, #fff 0 1px, transparent 2px), radial-gradient(circle at 58% 72%, #fff 0 1px, transparent 2px); }
.live__slide--9::after { transform: rotate(35deg); opacity: .2; }
.live__slide--9.is-active::before { animation: live-stars 3s ease-in-out infinite alternate; }
.live__slide--9.is-active::after { animation: live-stars 4s 1s ease-in-out infinite alternate-reverse; }
.live__slide--9.is-active .live__lead .live__char { animation-name: live-lead; }
.live__slide--9.is-active .live__body .live__char { animation-name: live-focus; animation-delay: calc(500ms + var(--i, 0) * 28ms); }
@keyframes live-focus { from { opacity: 0; filter: blur(10px); transform: scale(1.08); } to { opacity: 1; filter: none; transform: none; } }
@keyframes live-rise { from { opacity: 0; transform: translateY(.48em); } to { opacity: 1; transform: none; } }
@keyframes live-lead { from { opacity: 0; transform: translateX(-.65em); } to { opacity: 1; transform: none; } }
@keyframes live-sub { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
@keyframes live-wipe-up { from { clip-path: inset(100% 0 0); } to { clip-path: inset(0); } }
@keyframes live-glow { from { opacity: 0; transform: scale(.6); } 45% { opacity: 1; } to { opacity: 0; transform: scale(1.2); } }
@keyframes live-breathe { from { opacity: 0; letter-spacing: .2em; } to { opacity: 1; letter-spacing: 0; } }
@keyframes live-wipe-side { from { clip-path: inset(0 100% 0 0); } to { clip-path: inset(0); } }
@keyframes live-stars { from { opacity: .15; } to { opacity: .65; } }
.live__char:nth-child(1){--i:0}
.live__char:nth-child(2){--i:1}
.live__char:nth-child(3){--i:2}
.live__char:nth-child(4){--i:3}
.live__char:nth-child(5){--i:4}
.live__char:nth-child(6){--i:5}
.live__char:nth-child(7){--i:6}
.live__char:nth-child(8){--i:7}
.live__char:nth-child(9){--i:8}
.live__char:nth-child(10){--i:9}
.live__char:nth-child(11){--i:10}
.live__char:nth-child(12){--i:11}
.live__char:nth-child(13){--i:12}
.live__char:nth-child(14){--i:13}
.live__char:nth-child(15){--i:14}
.live__char:nth-child(16){--i:15}
.live__char:nth-child(17){--i:16}
.live__char:nth-child(18){--i:17}
.live__char:nth-child(19){--i:18}
.live__char:nth-child(20){--i:19}
.live__char:nth-child(21){--i:20}
.live__char:nth-child(22){--i:21}
.live__char:nth-child(23){--i:22}
.live__char:nth-child(24){--i:23}
.live__char:nth-child(25){--i:24}
.live__char:nth-child(26){--i:25}
.live__char:nth-child(27){--i:26}
.live__char:nth-child(28){--i:27}
.live__char:nth-child(29){--i:28}
.live__char:nth-child(30){--i:29}
.live__char:nth-child(31){--i:30}
.live__char:nth-child(32){--i:31}
.live__char:nth-child(33){--i:32}
.live__char:nth-child(34){--i:33}
.live__char:nth-child(35){--i:34}
.live__char:nth-child(36){--i:35}
.live__char:nth-child(37){--i:36}
.live__char:nth-child(38){--i:37}
.live__char:nth-child(39){--i:38}
.live__char:nth-child(40){--i:39}
.live__char:nth-child(41){--i:40}
.live__char:nth-child(42){--i:41}
.live__char:nth-child(43){--i:42}
.live__char:nth-child(44){--i:43}
.live__char:nth-child(45){--i:44}
.live__char:nth-child(46){--i:45}
.live__char:nth-child(47){--i:46}
.live__char:nth-child(48){--i:47}
.live__char:nth-child(49){--i:48}
.live__char:nth-child(50){--i:49}
.live__char:nth-child(51){--i:50}
.live__char:nth-child(52){--i:51}
.live__char:nth-child(53){--i:52}
.live__char:nth-child(54){--i:53}
.live__char:nth-child(55){--i:54}
.live__char:nth-child(56){--i:55}
.live__char:nth-child(57){--i:56}
.live__char:nth-child(58){--i:57}
.live__char:nth-child(59){--i:58}
.live__char:nth-child(60){--i:59}
.live__char:nth-child(61){--i:60}
.live__char:nth-child(62){--i:61}
.live__char:nth-child(63){--i:62}
.live__char:nth-child(64){--i:63}
.live__char:nth-child(65){--i:64}
.live__char:nth-child(66){--i:65}
.live__char:nth-child(67){--i:66}
.live__char:nth-child(68){--i:67}
.live__char:nth-child(69){--i:68}
.live__char:nth-child(70){--i:69}
.live__char:nth-child(71){--i:70}
.live__char:nth-child(72){--i:71}
.live__char:nth-child(73){--i:72}
.live__char:nth-child(74){--i:73}
.live__char:nth-child(75){--i:74}
.live__char:nth-child(76){--i:75}
.live__char:nth-child(77){--i:76}
.live__char:nth-child(78){--i:77}
.live__char:nth-child(79){--i:78}
.live__char:nth-child(80){--i:79}
.live__clip { position: absolute; inset: 0; overflow: hidden; contain: paint; opacity: 0; transition: opacity .8s; }
.live--on .live__clip { opacity: 1; }
/* 섬 입력(island_input)이 상자에 붙이는 touch-action: none을 덮음 — 엔진 위에서도 세로 스와이프 = 페이지 스크롤 (F-1105-03, 쇼윈도 main.ts도 지움) */
.live__host { position: absolute; inset: 0; touch-action: pan-y !important; overscroll-behavior: auto !important; }
/* 엔진 캔버스 = 상자 크기 (그리기 버퍼는 기기 px — CSS 크기를 안 주면 버퍼 px가 그대로 CSS px가 되어 렌더 DPR > 1이면 장면이 확대·왼쪽 위로 쏠림, F-1105-06) */
.live__host > canvas { display: block; inline-size: 100%; block-size: 100%; }
.live__fx { position: absolute; inset: 0; transform: translate(var(--fx-x, 0), var(--fx-y, 0)); pointer-events: none; }
.live__fx [data-testid="v2sc-brush"] { display: none; }
.live__touch { position: absolute; inset: 0; z-index: 20; pointer-events: none; touch-action: pan-y; }
/* 보기 모드: 끌기 층이 입력을 받음 — 가로 끌기 = 섬 돌리기 · 짧은 탭 = 반응 · 세로 스와이프(pan-y)·휠 = 브라우저가 페이지 스크롤 */
html.live-view .live__touch { pointer-events: auto; touch-action: pan-y; cursor: grab; }
html.live-view .live__touch:active { cursor: grabbing; }
.live:not(.live--on) .live__touch { display: none; }
/* 눈 버튼 = 화면에 고정 (상자는 sticky라 쌓임 맥락이 장면 글 아래 — 안에 두면 글·사진에 덮임) · 장면 위에서만 보임 */
.live__view { position: fixed; z-index: 25; inset-inline-start: max(16px, env(safe-area-inset-left)); inset-inline-end: 16px; inset-block-end: max(16px, env(safe-area-inset-bottom)); display: flex; align-items: center; gap: 8px; pointer-events: none; }
.live__eye { display: none; flex: none; inline-size: 48px; block-size: 48px; place-items: center; border: 1px solid #ffffff88; border-radius: 50%; background: #06192acc; color: #fff; cursor: pointer; pointer-events: auto; }
.live--on.in-story .live__eye { display: grid; }
.live__eye:hover, .live__eye:focus-visible { background: #06192acc; }
.live__hint { display: none; max-inline-size: min(260px, calc(100vw - 96px)); padding: 7px 10px; border-radius: 10px; background: #06192abb; color: #fff; font: 14px/1.3 var(--round); text-align: start; }
html.live-view .live__hint { display: block; }
/* 보기 모드 = 장면 글·사진을 투명하게 (visibility: hidden 금지 — 스냅점이 사라졌다 돌아오며 크롬이 옛 장면으로 되감음, F-1105-03) */
html.live-view .live__slides, html.live-view .hero { opacity: 0; pointer-events: none; }
html.live-view .live__slides *, html.live-view .hero * { pointer-events: none !important; }
.live__slides, .hero { transition: opacity .25s; }
html.live-view .live__eye { opacity: .3; }
html.live-view .live__eye:hover, html.live-view .live__eye:focus-visible { opacity: 1; }
@media (prefers-reduced-motion: reduce) { .live__txt, .live__s { transition: none; } .live__slide.is-active .live__char, .live__slide.is-active .live__body, .live__slide.is-active .live__s, .live__slide--9.is-active::before, .live__slide--9.is-active::after { animation: none; opacity: 1; transform: none; filter: none; clip-path: none; letter-spacing: normal; } }
@media (prefers-reduced-motion: reduce) { .live__photo, .live__slide.is-active .live__photo { animation: none; transition: none; filter: none; } .live__photo.is-enlarged .live__photo-card, .live__photo:hover .live__photo-card { animation: none; } }

/* CTA */
.cta { padding-block: clamp(80px, 14vw, 160px); background: linear-gradient(var(--deep), #0b3a5a); color: #fff; text-align: center; }
.cta__in { display: grid; justify-items: center; gap: 16px; }
.cta h2 { font: clamp(30px, 6vw, 56px)/1.2 var(--display); text-wrap: balance; }
:lang(th) .cta h2 { font-weight: 800; }
.cta p { max-inline-size: 30em; font: 18px/1.5 var(--round); color: #ffffffd9; }
.cta .cta__soon { display: inline-flex; align-items: center; gap: 8px; padding: 6px 16px; border: 1px solid #ffd84d99; border-radius: 999px; background: #ffd84d1f; color: var(--yellow); font: 16px/1.3 var(--round); }
.cta .cta__soon::before { content: ""; inline-size: 8px; block-size: 8px; border-radius: 50%; background: currentColor; }
.cta .minor a { color: #fff; }

/* FAQ (모두 접힘) */
.faq { padding-block: clamp(56px, 8vw, 96px); }
.faq__list { max-inline-size: 760px; }
.faq h2 { margin-block-end: 18px; font: clamp(26px, 4vw, 36px)/1.2 var(--display); }
:lang(th) .faq h2 { font-weight: 800; }
.faq details { border-block-end: 2px dashed #1d2b4f33; }
.faq summary { display: flex; align-items: center; gap: 12px; min-block-size: 56px; padding-block: 10px; font: 19px/1.4 var(--round); cursor: pointer; list-style: none; }
:lang(th) .faq summary { font-weight: 700; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::before { content: "+"; display: inline-grid; place-items: center; flex: none; inline-size: 28px; block-size: 28px; border-radius: 50%; background: var(--yellow); font-weight: 900; transition: transform 0.2s; }
.faq details[open] summary::before { transform: rotate(45deg); }
.faq details p { padding: 0 0 18px 40px; color: var(--ink-2); }

/* 푸터 */
.foot { padding-block: 36px 48px; font-size: 15px; border-block-start: 1px solid #1d2b4f1a; }
.foot__row { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px 24px; }
.foot nav ul { display: flex; flex-wrap: wrap; gap: 0 18px; margin: 0; padding: 0; list-style: none; }
.foot nav a { display: inline-flex; align-items: center; min-block-size: 48px; text-underline-offset: 4px; }
.foot__copy { margin-block-start: 8px; color: var(--ink-2); font-size: 14px; }
.foot__sns { display: flex; gap: 8px; margin: 0; padding: 0; list-style: none; }
.foot__sns a { display: inline-grid; place-items: center; inline-size: 48px; block-size: 48px; border-radius: 50%; background: var(--card); box-shadow: 0 3px 0 #1d2b4f1f; }
.foot__sns svg { inline-size: 20px; block-size: 20px; fill: var(--ink); }

.kin .i0{--i:0}.kin .i1{--i:1}.kin .i2{--i:2}.kin .i3{--i:3}.kin .i4{--i:4}.kin .i5{--i:5}.kin .i6{--i:6}.kin .i7{--i:7}.kin .i8{--i:8}.kin .i9{--i:9}.kin .i10{--i:10}.kin .i11{--i:11}.kin .i12{--i:12}.kin .i13{--i:13}.kin .i14{--i:14}.kin .i15{--i:15}.kin .i16{--i:16}.kin .i17{--i:17}.kin .i18{--i:18}.kin .i19{--i:19}.kin .i20{--i:20}.kin .i21{--i:21}.kin .i22{--i:22}.kin .i23{--i:23}.kin .i24{--i:24}.kin .i25{--i:25}.kin .i26{--i:26}.kin .i27{--i:27}.kin .i28{--i:28}.kin .i29{--i:29}.kin .i30{--i:30}.kin .i31{--i:31}.kin .i32{--i:32}.kin .i33{--i:33}.kin .i34{--i:34}.kin .i35{--i:35}.kin .i36{--i:36}.kin .i37{--i:37}.kin .i38{--i:38}.kin .i39{--i:39}.kin .i40{--i:40}.kin .i41{--i:41}.kin .i42{--i:42}.kin .i43{--i:43}.kin .i44{--i:44}.kin .i45{--i:45}.kin .i46{--i:46}.kin .i47{--i:47}

/* 오프닝 다시 보기 (F-1105-02 · 오너 11-05) — 오프닝이 도는 기기(live)에서만 */
html:not([data-tier="live"]) .foot__replay { display: none; }