/* 하나비 소개 페이지 6차 시안 - 한 화면 한 섹션 / 벚꽃 노을 + 불꽃놀이 + 입체 배경 */
:root {
  --night: #5a1f44;
  --navy: #FF5E7E;
  --sky: #FFA2B5;
  --ink: #142047;
  --ink-soft: #615D7B;
  --gold: #FFA2B5;
  --gold-deep: #B0607E;
  --paper: #fff3f6;
  --paper-2: #ffe8ee;
  --serif: "Noto Serif KR", "Gowun Batang", "Apple Myungjo", serif;
  --deco: "Cinzel", "Noto Serif KR", serif;
  --script: "Pinyon Script", "Cinzel", cursive;
  --sans: "Pretendard", -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --ease: cubic-bezier(.77, 0, .18, 1);
  --pad: 6vw;
}
* { box-sizing: border-box; }
html { background: var(--night); }
html, body { margin: 0; }
body { font-family: var(--sans); color: var(--ink); background: var(--night); -webkit-font-smoothing: antialiased; }
button { font: inherit; color: inherit; cursor: pointer; }
a { color: inherit; }
:focus-visible { outline: 2px solid var(--gold); outline-offset: 3px; border-radius: 6px; }
.dark :focus-visible, .nav :focus-visible { outline-color: #fff; }

/* ---------- 페이지 / 스크롤 방식 ---------- */
.page { position: relative; }
.sec { position: relative; min-height: 100vh; min-height: 100svh; overflow: hidden; scroll-snap-align: start; scroll-snap-stop: always; }
html:not(.paged) { scroll-snap-type: y mandatory; }
.fl { position: fixed; left: 0; top: 0; width: 100%; height: 100%; display: block; pointer-events: none; }
#petals-back { z-index: 1; }
#yui-canvas { z-index: 3; opacity: 0; transition: opacity .9s ease; }
body.yui-ready #yui-canvas { opacity: 1; }
body.yui-ready #yui-canvas[data-hide] { opacity: 0; }
#petals-front { z-index: 6; }

/* 데스크톱: 휠 한 번에 한 화면 */
html.paged { height: 100%; overflow: hidden; overscroll-behavior: none; }
html.paged body { height: 100%; overflow: visible; }
html.paged .page { height: 400vh; height: calc(var(--vh, 100vh) * 4); transform: translate3d(0, calc(var(--i, 0) * var(--vh, 100vh) * -1), 0); transition: transform 1s var(--ease); will-change: transform; }
html.paged .sec { height: var(--vh, 100vh); min-height: 0; }
html.paged .fl { position: absolute; height: var(--vh, 100vh); transform: translate3d(0, calc(var(--i, 0) * var(--vh, 100vh)), 0); transition: transform 1s var(--ease); }
html.no-tr .page, html.no-tr .fl { transition: none !important; }

/* ---------- 나타나기 ---------- */
.js .rv { opacity: 0; transform: translateY(30px); transition: opacity .5s ease, transform .6s ease; }   /* 떠날 때는 흐려지며 함께 밀려 나간다 */
.js .sec.in .rv { opacity: 1; transform: none; transition: opacity .8s ease, transform .8s cubic-bezier(.2, .7, .2, 1); transition-delay: calc(var(--d, 0s) + var(--w, 0s)); }
html.paged .sec { --w: .35s; }

/* ---------- 상단 메뉴 ---------- */
.nav { position: fixed; z-index: 20; left: 0; right: 0; top: 0; height: 76px; padding: 0 4vw; display: flex; align-items: center; gap: clamp(24px, 4vw, 72px); color: #fff; transition: color .6s; pointer-events: none; }
.nav a { pointer-events: auto; text-decoration: none; }
body[data-sec="1"] .nav, body[data-sec="2"] .nav { color: var(--ink); }
.logo { display: flex; align-items: baseline; gap: 10px; }
.logo-en { font-family: var(--deco); font-weight: 600; font-size: 24px; letter-spacing: .22em; }
.menu ul { list-style: none; margin: 0; padding: 0; display: flex; gap: clamp(20px, 3vw, 52px); }
\.menu a { position: relative; display: block; padding: 16px 6px 8px; text-align: center; font-size: 17px; font-weight: 400; opacity: .72; transition: opacity .3s, transform .3s; text-shadow: 0 1px 12px rgba(0,0,0,.25); }
body[data-sec="1"] .menu a, body[data-sec="2"] .menu a { text-shadow: none; }
.menu .t { display: inline-block; }
.menu .t::after { content: attr(data-t); display: block; height: 0; overflow: hidden; visibility: hidden; font-weight: 600; }
.menu a:hover { opacity: 1; }
.menu a.on { opacity: 1; font-weight: 600; transform: scale(1.1); }
.mstar { position: absolute; left: 50%; top: -3px; width: 18px; height: 18px; margin-left: -9px; color: var(--navy); opacity: 0; transform: scale(.3) rotate(-40deg); transition: opacity .4s, transform .5s; filter: drop-shadow(0 0 6px rgba(255,94,126,.8)); }
.dark-nav .mstar, body[data-sec="0"] .mstar, body[data-sec="3"] .mstar { color: #fff; }
.menu a.on .mstar { opacity: 1; transform: none; animation: twinkle 2.4s ease-in-out infinite; }
@keyframes twinkle { 50% { transform: scale(.7) rotate(25deg); opacity: .65; } }
.dots { display: none; }

/* ---------- 배경 ---------- */
.bg { position: absolute; inset: 0; pointer-events: none; overflow: hidden; }
.bg-hero { background: var(--night); }
.bg-art { position: absolute; inset: -4%; background: center / cover no-repeat url(../img/shrine-portrait.jpg); filter: blur(2px) saturate(.95) brightness(.88) contrast(1.02); animation: drift 48s ease-in-out infinite alternate; transform: translate3d(var(--px, 0px), var(--py, 0px), 0); }
@media (min-width: 901px) { .bg-art { background-image: url(../img/hall-wide-1600.jpg); } }
.bg-shade { position: absolute; inset: 0; background:
  linear-gradient(180deg, rgba(120,36,84,.62) 0%, rgba(255,150,140,.16) 42%, rgba(110,30,76,.78) 100%),
  radial-gradient(ellipse 60% 50% at 70% 35%, rgba(255,190,170,.35), transparent 70%); mix-blend-mode: multiply; }
.bg-shade::after { content: ""; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(255,150,170,.28), rgba(255,255,255,0) 60%); mix-blend-mode: screen; }
.bg-hero.deep .bg-art { filter: blur(4px) saturate(.9) brightness(.7); }
.glow { position: absolute; inset: 0; background: radial-gradient(ellipse 45% 40% at 18% 78%, rgba(255,120,150,.32), transparent 70%); animation: breathe 7s ease-in-out infinite alternate; }
@keyframes breathe { from { opacity: .5; } to { opacity: 1; } }
@keyframes drift { from { scale: 1.02; translate: -1.2% .6%; } to { scale: 1.09; translate: 1.2% -.8%; } }
.stars { position: absolute; inset: 0; }
.stars i { position: absolute; width: var(--s); height: var(--s); background: radial-gradient(circle, #fff 0 30%, rgba(190,210,255,.0) 70%); border-radius: 50%; opacity: .15; animation: tw var(--t) ease-in-out var(--dl) infinite; }
.stars i.k { background: none; color: #fff0f4; filter: drop-shadow(0 0 5px rgba(255,160,185,.95)); }
.stars i.k svg { width: 100%; height: 100%; display: block; }
@keyframes tw { 0%, 100% { opacity: .1; transform: scale(.6); } 50% { opacity: 1; transform: scale(1.1); } }

.bg-paper { background:
  radial-gradient(ellipse 70% 60% at 25% 20%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(ellipse 60% 50% at 90% 100%, rgba(176,96,126,.18), transparent 70%),
  repeating-linear-gradient(135deg, rgba(20,32,71,.028) 0 1px, transparent 1px 5px),
  var(--paper); }
.bg-paper.alt { background:
  radial-gradient(ellipse 60% 60% at 80% 10%, rgba(255,255,255,.55), transparent 70%),
  radial-gradient(ellipse 60% 50% at 0% 100%, rgba(176,96,126,.2), transparent 70%),
  repeating-linear-gradient(45deg, rgba(20,32,71,.028) 0 1px, transparent 1px 5px),
  var(--paper-2); }
.deco { position: absolute; color: var(--gold); opacity: .5; animation: spin 140s linear infinite; }
.d1 { width: min(78vh, 62vw); aspect-ratio: 1; left: -9vh; top: 12vh; }
.d2 { width: min(46vh, 34vw); aspect-ratio: 1; right: 22vw; bottom: -14vh; opacity: .35; animation-direction: reverse; }
.d3 { width: min(90vh, 70vw); aspect-ratio: 1; right: -16vh; top: -20vh; opacity: .4; }
@keyframes spin { to { rotate: 360deg; } }

.ct { position: absolute; inset: 0; z-index: 4; pointer-events: none; }
.ct a, .ct button, .ct .badge { pointer-events: auto; }

/* ---------- 메인 ---------- */
.hero-ct { inset: auto auto 21vh var(--pad); width: min(62vw, 960px); }
.title { margin: 0; display: grid; font-family: var(--serif); font-weight: 700; font-size: clamp(44px, 7.1vw, 118px); line-height: 1.12; letter-spacing: -.01em; color: #fff;
  background: linear-gradient(180deg, #fff 18%, #fff0f4 62%, #ffc2d0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent;
  filter: drop-shadow(0 0 22px rgba(255,94,126,.5)) drop-shadow(0 4px 14px rgba(80,20,52,.5)); }
.title span { display: block; white-space: nowrap; }
.pill { display: inline-block; margin: clamp(14px, 2.4vh, 26px) 0 clamp(18px, 3vh, 34px); padding: 10px 24px 10px 26px; border-radius: 999px; background: rgba(100,26,66,.58); font-family: var(--serif); font-weight: 600; font-size: clamp(14px, 1.25vw, 19px); letter-spacing: .2em; color: #fff; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.cta-row { display: flex; flex-wrap: wrap; align-items: center; gap: 14px 18px; }
.cta { position: relative; display: inline-flex; align-items: center; height: 66px; padding: 0 40px 0 84px; border-radius: 999px; overflow: visible; text-decoration: none; color: #fff; font-weight: 600; font-size: 19px; letter-spacing: .02em;
  background: radial-gradient(120% 220% at 15% 0%, #FFA2B5 0%, #FE6882 40%, #FF5E7E 100%); border: 1px solid rgba(255,235,240,.85);
  box-shadow: 0 0 0 1px rgba(176,96,126,.5), 0 0 28px rgba(255,94,126,.6), inset 0 0 22px rgba(255,255,255,.3); transition: transform .3s, box-shadow .3s; }
.cta::before { content: ""; position: absolute; inset: 0; border-radius: inherit; overflow: hidden; background: linear-gradient(110deg, transparent 35%, rgba(255,255,255,.35) 50%, transparent 65%) -200% 0 / 200% 100% no-repeat; animation: sheen 4.5s ease-in-out infinite; }
@keyframes sheen { 0%, 55% { background-position: 220% 0; } 100% { background-position: -120% 0; } }
.cta-star { position: absolute; left: -6px; top: 50%; width: 76px; height: 76px; margin-top: -38px; color: #fff; filter: drop-shadow(0 0 10px #ffd0da) drop-shadow(0 0 22px #ff5e7e); animation: starpulse 3s ease-in-out infinite; }
@keyframes starpulse { 0%, 100% { transform: scale(.82) rotate(0); } 50% { transform: scale(1.05) rotate(14deg); } }
.cta:hover, .cta:focus-visible { transform: translateY(-3px); box-shadow: 0 0 0 1px rgba(176,96,126,.5), 0 0 42px rgba(255,94,126,.9), inset 0 0 26px rgba(255,255,255,.45); }
.badge { display: inline-flex; align-items: center; gap: 10px; height: 66px; padding: 0 20px; border-radius: 12px; background: rgba(100,26,66,.6); border: 1px solid rgba(255,255,255,.35); color: rgba(255,255,255,.8); font-size: 16px; cursor: default; }
.badge b { font-weight: 600; }
.badge em { font-style: normal; font-size: 12px; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.16); color: #fff; }
/* 스토어 버튼: 열리기 전엔 누를 수 없고 「곧 출시」가 붙는다(main.js) */
.cta em { position: relative; margin-left: 12px; font-style: normal; font-size: 12px; font-weight: 600; padding: 3px 10px; border-radius: 999px; background: rgba(255,255,255,.26); }
.cta.soon { cursor: default; }
.cta.soon:hover { transform: none; box-shadow: 0 0 0 1px rgba(176,96,126,.5), 0 0 28px rgba(255,94,126,.6), inset 0 0 22px rgba(255,255,255,.3); }
a.badge { text-decoration: none; }
a.badge:not(.soon) { cursor: pointer; color: #fff; transition: transform .3s, background .3s, border-color .3s; }
a.badge:not(.soon):hover, a.badge:not(.soon):focus-visible { transform: translateY(-3px); background: rgba(100,26,66,.8); border-color: rgba(255,255,255,.8); }
.hint { position: absolute; z-index: 5; right: 3vw; top: 27vh; margin: 0; padding: 8px 16px; font-size: 14px; color: #fff; background: rgba(100,26,66,.6); border: 1px solid rgba(255,200,215,.6); border-radius: 999px; animation: bob 2.6s ease-in-out infinite; pointer-events: none; transition: opacity .8s; }
.hint.sleepy { color: #fff; }
@keyframes bob { 50% { transform: translateY(-6px); } }
.wordmark { position: absolute; z-index: 2; left: 0; right: 0; bottom: 0; height: 17vh; overflow: hidden; border-top: 1px solid rgba(255,255,255,.22); margin: 0 3vw; pointer-events: none; }
.wordmark { font-size: 0; color: transparent; }
.wordmark::before { content: "HANABI"; position: absolute; left: 0; right: 0; top: -.06em; text-align: center; font-family: var(--deco); font-weight: 600; font-size: 21vw; line-height: 1; letter-spacing: .03em; color: rgba(255,225,235,.22);
  -webkit-mask-image: linear-gradient(180deg, #000 20%, transparent 95%); mask-image: linear-gradient(180deg, #000 20%, transparent 95%); }
.wordmark.small { height: 11vh; }
.wordmark.small::before { font-size: 14vw; color: rgba(255,225,235,.14); }

/* ---------- 유이 ---------- */
.yui-ct { inset: 0 auto 0 var(--pad); width: min(46vw, 640px); display: flex; flex-direction: column; justify-content: center; padding: 76px 0 4vh; }
.script { margin: 0 0 4px; font-family: var(--script); font-size: clamp(40px, 4.4vw, 72px); line-height: 1.15; color: var(--gold-deep); }
.name-row { display: block; }
.kname { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(56px, 7vw, 116px); line-height: 1.05; color: var(--ink); letter-spacing: -.02em; }
.tag { display: inline-flex; margin-top: 10px !important; align-items: center; gap: 8px; margin-top: 18px; padding: 9px 20px 9px 14px; border-radius: 999px; background: #ffe1e8; color: var(--ink); font-weight: 600; font-size: 16px; box-shadow: inset 0 0 0 1px rgba(176,96,126,.5); }
.tag svg { width: 20px; height: 20px; color: var(--gold-deep); }
.voice { margin-top: clamp(16px, 3vh, 34px); }
.voice[hidden] { display: none; }
.vlabel { margin: 0 0 6px; font-family: var(--deco); font-weight: 600; font-size: clamp(22px, 2.6vw, 40px); letter-spacing: .08em; color: transparent; -webkit-text-stroke: 1px rgba(20,32,71,.2); }
.vbtn { display: inline-flex; align-items: center; gap: 12px; height: 52px; padding: 0 24px 0 8px; border: 0; border-radius: 999px; background: transparent; font-weight: 600; font-size: 17px; color: var(--ink); }
.vbtn .wv { width: 38px; height: 38px; border-radius: 50%; border: 1.5px solid var(--ink); display: grid; grid-auto-flow: column; align-items: center; justify-content: center; gap: 2.5px; transition: background .3s, box-shadow .3s; }
.vbtn .wv i { display: block; width: 2.5px; height: 10px; border-radius: 2px; background: var(--ink); transition: background .3s; }
.vbtn .wv i:nth-child(2), .vbtn .wv i:nth-child(4) { height: 17px; } .vbtn .wv i:nth-child(3) { height: 22px; }
.vbtn:hover .wv { box-shadow: 0 0 0 5px rgba(176,96,126,.3); }
.vbtn.playing .wv { background: var(--ink); } .vbtn.playing .wv i { background: #fff; animation: eq .7s ease-in-out infinite alternate; }
.vbtn.playing .wv i:nth-child(2) { animation-delay: .15s; } .vbtn.playing .wv i:nth-child(3) { animation-delay: .3s; } .vbtn.playing .wv i:nth-child(4) { animation-delay: .1s; } .vbtn.playing .wv i:nth-child(5) { animation-delay: .25s; }
@keyframes eq { to { transform: scaleY(.45); } }
.line { margin: clamp(16px, 3vh, 30px) 0 0; display: grid; gap: 8px; }
.line .jp { font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 1.7vw, 27px); line-height: 1.5; }
.line .ko { font-size: clamp(16px, 1.25vw, 19px); color: var(--ink-soft); }
.faces { margin-top: clamp(18px, 3.4vh, 38px); }
.face-row { display: flex; gap: clamp(10px, 1.4vw, 20px); }
.face-row button { position: relative; display: grid; justify-items: center; gap: 6px; padding: 0; border: 0; background: none; }
.face-row button span { display: grid; place-items: center; height: 48px; padding: 0 20px; border-radius: 999px; background: #fff3f6; border: 2px solid #fff; box-shadow: 0 6px 18px -8px rgba(20,32,71,.5), inset 0 0 0 1px rgba(176,96,126,.3); font-weight: 600; font-size: 16px; color: var(--ink); white-space: nowrap; transition: transform .3s, box-shadow .3s; }
.face-row button:hover span { transform: translateY(-3px); }
.face-row button[aria-pressed="true"] span { border-color: #fff; box-shadow: 0 0 0 3px #FF5E7E, 0 0 22px 4px rgba(255,94,126,.7); }
.flabel { margin: 0 0 12px; font-size: clamp(15px, 1.2vw, 18px); font-weight: 500; color: var(--ink-soft); }

.wm.yw { left: auto; right: 2vw; top: 54%; font-size: min(30vw, 56vh); -webkit-text-stroke-color: rgba(20,32,71,.14); }

/* ---------- 배우는 방법 ---------- */
.learn-ct { display: grid; grid-template-columns: minmax(250px, 22vw) 1fr; grid-template-rows: auto 1fr; column-gap: 3vw; padding: 100px var(--pad) 6vh; }
.learn-head { grid-column: 1 / -1; }
.learn-head h2 { margin: 0 0 0 6px; font-family: var(--serif); font-weight: 700; font-size: clamp(28px, 2.6vw, 42px); }
.learn-list { align-self: center; display: grid; gap: 6px; }
.learn-list button { position: relative; display: grid; grid-template-columns: 18px 1fr; align-items: center; column-gap: 12px; text-align: left; padding: 14px 6px; border: 0; background: none; color: var(--ink-soft); font-family: var(--serif); font-weight: 600; font-size: clamp(19px, 1.7vw, 27px); transition: color .3s; pointer-events: auto; }
.learn-list button span { position: relative; justify-self: start; }
.learn-list button span::after { content: ""; position: absolute; left: 0; right: 0; bottom: -6px; height: 2px; background: var(--navy); transform: scaleX(0); transform-origin: left; transition: transform .45s var(--ease); }
.bs { width: 14px; height: 14px; color: var(--gold); align-self: center; margin-top: 0; transition: transform .5s, color .3s; }
.learn-list button:hover, .learn-list button[aria-selected="true"] { color: var(--ink); }
.learn-list button[aria-selected="true"] span::after { transform: none; }
.learn-list button[aria-selected="true"] .bs { color: var(--gold-deep); transform: scale(1.5) rotate(20deg); filter: drop-shadow(0 0 5px rgba(176,96,126,.9)); }
.stage { position: relative; min-height: 0; }
.detail { position: absolute; inset: 0; opacity: 0; visibility: hidden; transition: opacity .5s, visibility 0s .5s; pointer-events: none; }
.detail.on { opacity: 1; visibility: visible; transition: opacity .6s; pointer-events: auto; }
.wm { position: absolute; left: -1vw; top: 22%; translate: 0 -50%; font-family: var(--deco); font-weight: 600; font-size: clamp(90px, 14vw, 240px); line-height: 1; letter-spacing: .02em; color: transparent; -webkit-text-stroke: 1.5px rgba(20,32,71,.2); white-space: nowrap; user-select: none; }
.phone { position: absolute; right: 4vw; top: 50%; height: min(74vh, 640px); aspect-ratio: 540 / 1170; translate: 0 -50%; border-radius: 30px; background: #fff; box-shadow: 0 34px 60px -24px rgba(176,96,126,.6), 0 0 0 5px #fff, 0 0 0 6px rgba(176,96,126,.35); }
.phone img { width: 100%; height: 100%; display: block; border-radius: 30px; object-fit: cover; }
.detail.on .phone { animation: phone-in .9s cubic-bezier(.2, .7, .2, 1) both, floaty 6s ease-in-out .9s infinite; }
@keyframes phone-in { from { opacity: 0; transform: translateY(30px); } to { opacity: 1; transform: none; } }
@keyframes floaty { 50% { transform: translateY(-10px); } }
.card { position: absolute; left: 4vw; bottom: 8%; width: min(30vw, 440px); padding: 28px 30px 30px; border-radius: 22px; background: rgba(255,255,252,.82); border: 1px solid rgba(176,96,126,.55); box-shadow: 0 24px 50px -28px rgba(20,32,71,.55); -webkit-backdrop-filter: blur(10px); backdrop-filter: blur(10px); }
.card h3 { margin: 12px 0 8px; font-family: var(--serif); font-weight: 700; font-size: clamp(24px, 2.2vw, 34px); }
.card p { margin: 0; font-size: clamp(14.5px, 1.1vw, 17px); line-height: 1.75; color: var(--ink-soft); word-break: keep-all; }
.tags { display: flex; gap: 8px; flex-wrap: wrap; }
.tags span { padding: 5px 14px; border-radius: 999px; background: #ffe1e8; color: var(--ink); font-size: 13px; font-weight: 600; }
.detail.on .card .tags, .detail.on .card h3, .detail.on .card p { animation: card-in .8s cubic-bezier(.2,.7,.2,1) both; }
.detail.on .card h3 { animation-delay: .1s; } .detail.on .card p { animation-delay: .2s; }
@keyframes card-in { from { opacity: 0; transform: translateY(18px); } to { opacity: 1; transform: none; } }
.fx { position: absolute; width: 34px; height: 34px; color: var(--gold); animation: float 5.5s ease-in-out infinite; pointer-events: none; }
.f1 { left: 34%; top: 8%; }
.f3 { right: 36%; bottom: 6%; width: 28px; color: #FF8FA8; animation-delay: -1s; } .f4 { right: 2%; top: 4%; width: 22px; height: 22px; animation-delay: -3.5s; }
@keyframes float { 0%, 100% { transform: translateY(0) rotate(-6deg); } 50% { transform: translateY(-14px) rotate(7deg); } }

/* ---------- 시작하기 ---------- */
.start-ct { inset: 0 auto 0 var(--pad); width: min(54vw, 760px); display: flex; flex-direction: column; justify-content: center; padding: 76px 0 14vh; }
.start-ct h2 { margin: 0; font-family: var(--serif); font-weight: 700; font-size: clamp(46px, 6.4vw, 104px); line-height: 1.1; color: #fff; filter: drop-shadow(0 0 22px rgba(255,94,126,.55)); }
.lead { margin: clamp(14px, 2.6vh, 28px) 0 clamp(22px, 4vh, 40px); font-size: clamp(16px, 1.4vw, 21px); line-height: 1.8; color: #fff3f6; text-shadow: 0 2px 14px rgba(80,20,52,.8); }
.foot { position: absolute; z-index: 5; left: var(--pad); right: var(--pad); bottom: calc(17vh * .0 + 20px); display: flex; flex-wrap: wrap; align-items: center; gap: 8px 24px; font-size: 14px; line-height: 20px; color: rgba(255,255,255,.85); }
.s-start .wordmark.small { display: none; }
.foot a, .foot .copy { display: block; padding: 6px 0; line-height: 20px; }
.foot a { text-decoration: none; pointer-events: auto; }
.foot a:hover { text-decoration: underline; }
.foot .copy { opacity: .6; }

/* ---------- 로딩 ---------- */
.loader { position: fixed; z-index: 30; right: 20vw; bottom: 30vh; display: grid; justify-items: center; gap: 12px; font-size: 14px; color: #fff0f4; pointer-events: none; transition: opacity .6s; }
.loader p { margin: 0; text-shadow: 0 0 12px rgba(80,20,52,.9); }
.loader-star { width: 28px; height: 28px; background: #fff; clip-path: polygon(50% 0, 62% 38%, 100% 50%, 62% 62%, 50% 100%, 38% 62%, 0 50%, 38% 38%); filter: drop-shadow(0 0 8px #FFA2B5); animation: spin2 2s linear infinite; }
@keyframes spin2 { to { transform: rotate(360deg); } }
body:not(.is-loading) .loader, body.no-yui .loader { opacity: 0; visibility: hidden; transition: opacity .6s, visibility 0s .6s; }

/* ---------- 좁은 화면 / 낮은 화면 : 세로 스크롤 스냅 ---------- */
@media (max-width: 900px), (max-height: 599px) {
  :root { --pad: 16px; }
  .nav { height: 56px; padding: 0 16px; }
  .menu { display: none; }
  .logo-en { font-size: 19px; }
  .dots { position: fixed; z-index: 20; right: 8px; top: 50%; translate: 0 -50%; display: grid; gap: 4px; }
  .dots a { display: block; width: 24px; height: 24px; position: relative; }
  .dots a::after { content: ""; position: absolute; left: 50%; top: 50%; width: 6px; height: 6px; margin: -3px 0 0 -3px; border-radius: 50%; background: currentColor; opacity: .4; transition: .3s; }
  .dots { color: #fff; } body[data-sec="1"] .dots, body[data-sec="2"] .dots { color: var(--ink); }
  .dots a.on::after { opacity: 1; width: 12px; height: 12px; margin: -6px 0 0 -6px; background: var(--navy); box-shadow: 0 0 8px var(--navy); }

  .hero-ct { inset: 76px 16px auto 16px; width: auto; }
  .title { font-size: clamp(34px, 10.4vw, 52px); }
  .pill { margin: 12px 0 0; padding: 8px 14px 8px 16px; font-size: 13px; letter-spacing: .06em; }
  .s-hero .cta-row { position: absolute; left: 0; right: 0; top: calc(100svh - 76px - 168px); }
  .cta { height: 58px; padding: 0 28px 0 70px; font-size: 17px; }
  .cta-star { width: 64px; height: 64px; margin-top: -32px; }
  .badge { height: 58px; font-size: 15px; }
  .hint { right: auto; left: 50%; top: calc(76px + 150px); translate: -50% 0; animation: none; }
  .wordmark { height: 90px; margin: 0 16px; }
  .wordmark::before { font-size: 30vw; }

  .yui-ct { inset: 56px 16px auto 16px; width: auto; padding: 14px 0 0; }
  .script { font-size: 38px; }
  .kname { font-size: 54px; }
  .tag { font-size: 14px; padding: 7px 16px 7px 12px; }
  .voice { margin-top: 8px; } .vlabel { display: none; }
  .vbtn { height: 44px; font-size: 15px; background: rgba(255,255,252,.7); padding: 0 18px 0 6px; box-shadow: inset 0 0 0 1px rgba(176,96,126,.5); }
  .vbtn .wv { width: 32px; height: 32px; }
  .line { margin-top: 12px; max-width: 64%; }
  .line .jp { font-size: 17px; } .line .ko { font-size: 15px; }
  .faces { position: absolute; left: 0; right: 0; top: calc(100svh - 168px); margin: 0; }
  .face-row { gap: 6px; } .face-row button span { height: 42px; padding: 0 12px; font-size: 14px; }
  .flabel { margin-bottom: 8px; font-size: 15px; }
  .yw { display: none; }
  .d1 { width: 90vw; left: -30vw; top: auto; bottom: 6vh; } .d2 { width: 50vw; right: -10vw; top: 22vh; bottom: auto; }

  .learn-ct { display: block; padding: 60px 16px 0; }
  .learn-head { margin-bottom: 6px; }
  .learn-list { grid-template-columns: 1fr 1fr; gap: 6px 10px; margin: 6px 0 12px; }
  .learn-list button { grid-template-columns: 14px 1fr; padding: 8px 8px; border-radius: 12px; background: rgba(255,255,252,.6); box-shadow: inset 0 0 0 1px rgba(176,96,126,.35); font-size: 15px; letter-spacing: -.02em; }
    .learn-list button[aria-selected="true"] { background: #fff; box-shadow: inset 0 0 0 1.5px var(--gold); }
  .learn-list button span::after { display: none; }
  .bs { width: 11px; height: 11px; }
  .stage { height: calc(100svh - 60px - 142px - 100px); min-height: 360px; }
  .wm { left: 0; top: 18%; font-size: 19vw; }
  .phone { right: 0; top: 4%; translate: 0 0; height: calc(100% - 10px); max-height: 440px; }
  .card { left: 0; bottom: 14px; width: 61%; padding: 14px 16px 16px; border-radius: 18px; }
  .card h3 { margin: 8px 0 4px; font-size: 21px; }
  .card p { font-size: 13px; line-height: 1.6; }
  .tags span { font-size: 11px; padding: 3px 10px; }
  .f1 { left: 30%; top: 0; } .f3 { right: 34%; bottom: -4px; } .f4 { right: 0; top: -6px; }

  .start-ct { inset: 56px 16px auto 16px; width: auto; padding: 26px 0 0; text-align: center; align-items: center; }
  .start-ct h2 { font-size: clamp(42px, 13vw, 56px); }
  .lead { font-size: 15px; margin: 12px 0 18px; }
  .start-ct .cta-row { justify-content: center; }
  .foot { left: 50%; right: auto; translate: -50% 0; bottom: 14px; white-space: nowrap; flex-wrap: nowrap; gap: 14px; justify-content: center; font-size: 13px; padding: 4px 16px; border-radius: 999px; background: rgba(100,26,66,.7); }
  .loader { right: 50%; translate: 50% 0; bottom: 24vh; }
}
@media (max-width: 380px) { .learn-list button { font-size: 14px; } }

@media (prefers-reduced-motion: reduce) {
  html.paged .page, html.paged .fl { transition-duration: .01s; }
  .js .rv, .js .sec.in .rv { opacity: 1; transform: none; transition: none; }
  .bg-art, .deco, .glow, .stars i, .cta::before, .cta-star, .fx, .hint, .loader-star, .menu a.on .mstar, .detail.on .phone { animation: none; }
  .stars i { opacity: .6; }
  .detail.on .card .tags, .detail.on .card h3, .detail.on .card p { animation: none; }
}

/* ---------- 5차: 불꽃놀이 · 깊이 · 반응 ---------- */
#sky { z-index: 2; }
.dim, .flash { position: absolute; inset: 0; pointer-events: none; }
.dim { background: #1e0716; opacity: 0; transition: opacity 3s ease; }
html.intro-dark .s-hero .dim { opacity: .68; transition: none; }
.flash { opacity: 0; mix-blend-mode: screen;
  background: radial-gradient(circle at var(--fx, 35%) var(--fy, 30%), rgba(255,238,244,.95) 0, rgba(255,172,198,.55) 16%, rgba(255,120,160,.18) 40%, transparent 68%); }
.flash.on { animation: flash var(--fd, 1.6s) cubic-bezier(.2, .7, .3, 1) both; }
@keyframes flash { 0% { opacity: 0; } 6% { opacity: var(--fo, .9); } 100% { opacity: 0; } }

/* 첫 화면: 불꽃이 터질 때까지 글을 숨기고, 터지면 제목이 한 글자씩 떠오른다 */
html.intro .s-hero .rv { opacity: 0 !important; transform: translateY(30px) !important; transition: none !important; }
html.intro .s-hero .title.rv { opacity: 1 !important; transform: none !important; }
.title.split { background: none; }
.title .ch { display: inline-block; background: linear-gradient(180deg, #fff 18%, #fff0f4 62%, #ffc2d0 100%); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
html.intro .title .ch { opacity: 0; transform: translateY(.42em) scale(.96); filter: blur(12px); }
.title.go .ch { animation: ch-in 1.15s cubic-bezier(.16, .8, .24, 1) both; animation-delay: calc(var(--k) * 52ms); }
@keyframes ch-in { from { opacity: 0; transform: translateY(.42em) scale(.96); filter: blur(12px); } 50% { opacity: 1; } to { opacity: 1; transform: none; filter: blur(0); } }

/* 섹션을 넘길 때 글은 배경보다 조금 더 움직여 앞에 떠 있는 것처럼 */
html.paged .sec .ct { transform: translate3d(0, calc(clamp(-1, var(--n, 0) - var(--i, 0), 1) * 14vh), 0); transition: transform 1s var(--ease); }
/* 푸터는 .rv 라 transform·transition 을 나타나기 효과와 나눠 쓴다(깊이감 = translate 속성) */
html.paged .s-start .foot { translate: 0 calc(clamp(-1, var(--n, 0) - var(--i, 0), 1) * 14vh); transition: translate 1s var(--ease), opacity .5s ease, transform .6s ease; }
html.paged .s-start.in .foot { transition: translate 1s var(--ease), opacity .8s ease calc(var(--d, 0s) + var(--w, 0s)), transform .8s cubic-bezier(.2, .7, .2, 1) calc(var(--d, 0s) + var(--w, 0s)); }
html.paged .sec .wordmark { transform: translate3d(0, calc(clamp(-1, var(--n, 0) - var(--i, 0), 1) * -9vh), 0); transition: transform 1s var(--ease); }

/* 배우는 방법: 탭을 바꾸면 폰 화면이 돌아 들어오고, 큰 영문 글자가 모이며 나타난다 */
.detail { perspective: 1400px; }
@keyframes phone-in { from { opacity: 0; transform: translateX(70px) rotateY(-34deg) scale(.92); } 60% { opacity: 1; } to { opacity: 1; transform: none; } }
.detail.on .wm { animation: wm-in 1.2s cubic-bezier(.16, .8, .24, 1) both; }
@keyframes wm-in { from { opacity: 0; letter-spacing: .22em; transform: translateX(-36px); } to { opacity: 1; letter-spacing: .02em; transform: none; } }

@media (prefers-reduced-motion: reduce) {
  #sky { display: none; }
  html.paged .sec .ct, html.paged .sec .wordmark { transform: none; transition: none; }
  html.paged .s-start .foot { translate: none; transition: none; }
  .detail.on .wm { animation: none; }
}

/* ---------- 6차: 입체 배경 · 빛 · 꽃잎 막 · 대사 · 말풍선 ---------- */
/* 사진 + 깊이 지도(WebGL). 준비되면 CSS 배경과 바꿔 낀다 */
.bg-gl { position: absolute; inset: 0; width: 100%; height: 100%; display: block; opacity: 0; transition: opacity 1s ease; }
.bg-hero.gl-on .bg-gl { opacity: 1; }
.bg-hero.gl-on .bg-art { opacity: 0; transition: opacity 1s ease; }
.bg-hero.deep .bg-gl { filter: blur(3px); }
/* 창으로 들어오는 빛줄기: 불꽃이 하늘을 밝힌 뒤 천천히 나타난다 */
.rays { position: absolute; inset: -10% -10% 0 -10%; pointer-events: none; mix-blend-mode: screen; opacity: .6; transition: opacity 3s ease; }
html.intro-dark .s-hero .rays { opacity: 0; transition: none; }
.rays i { position: absolute; top: -20%; width: 13vw; height: 150%; background: linear-gradient(180deg, rgba(255,238,222,.5), rgba(255,200,215,.12) 55%, transparent 82%); filter: blur(20px); transform-origin: 50% 0; animation: ray 9s ease-in-out infinite alternate; }
.rays i:nth-child(1) { left: 50%; rotate: 24deg; animation-delay: -2s; }
.rays i:nth-child(2) { left: 61%; width: 6vw; rotate: 20deg; animation-delay: -5s; }
.rays i:nth-child(3) { left: 71%; width: 10vw; rotate: 27deg; animation-delay: -1s; }
.rays i:nth-child(4) { left: 38%; width: 5vw; rotate: 17deg; animation-delay: -7s; }
@keyframes ray { from { opacity: .3; translate: -2vw 0; } to { opacity: 1; translate: 2vw 0; } }
/* 유이: 어두울 땐 실루엣, 불꽃이 터지면 빛을 받아 번쩍 */
#yui-canvas { transition: opacity .9s ease, filter 1.4s ease; }
html.intro-dark #yui-canvas { filter: brightness(.16) saturate(.4); transition: opacity .9s ease; }
body.yui-lit #yui-canvas { animation: yui-lit 1.7s cubic-bezier(.2, .7, .3, 1); }
@keyframes yui-lit { 0% { filter: brightness(.16) saturate(.4); } 10% { filter: brightness(1.45) saturate(.9) drop-shadow(0 0 22px rgba(255,214,226,.9)); } 45% { filter: brightness(1.08) saturate(1) drop-shadow(0 0 10px rgba(255,214,226,.45)); } 100% { filter: brightness(1) saturate(1) drop-shadow(0 0 0 rgba(255,214,226,0)); } }
/* 맨 위 효과(꽃잎 막·커서 반짝임). 메뉴(20)보다는 아래 */
#fxtop { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 15; pointer-events: none; display: block; }
/* 섹션 제목: 한 글자씩 */
.splitc .ch { display: inline-block; }
.sec:not(.in) .splitc .ch { opacity: 0; }
.sec.in .splitc .ch { animation: ch-in 1s cubic-bezier(.16, .8, .24, 1) both; animation-delay: calc(var(--w, 0s) + .12s + var(--k) * 70ms); }
/* 유이 대사창(비주얼 노벨처럼 이름표 + 한 글자씩) */
.line { position: relative; max-width: 560px; padding: 24px 28px 20px; border-radius: 18px; background: rgba(255,255,255,.74); border: 1px solid rgba(176,96,126,.42); box-shadow: 0 18px 40px -26px rgba(20,32,71,.5); -webkit-backdrop-filter: blur(8px); backdrop-filter: blur(8px); }
.line .who { position: absolute; left: 20px; top: -15px; padding: 4px 16px; border-radius: 999px; background: linear-gradient(120deg, #FF5E7E, #FFA2B5); color: #fff; font-family: var(--serif); font-weight: 600; font-size: 15px; letter-spacing: .14em; box-shadow: 0 6px 14px -6px rgba(255,94,126,.8); }
.line .jp { position: relative; display: block; }
.line .jp .ghost { visibility: hidden; }
.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; }
.line .jp .typed { position: absolute; inset: 0; }
.line .ko { transition: opacity .5s ease .1s; }
.line.typing .ko { opacity: 0; transition: none; }
.line .more { position: absolute; right: 18px; bottom: 12px; width: 0; height: 0; border-left: 6px solid transparent; border-right: 6px solid transparent; border-top: 8px solid #FF5E7E; animation: more 1s ease-in-out infinite; }
.line.typing .more { opacity: 0; }
@keyframes more { 50% { transform: translateY(4px); } }
/* 배우는 방법: 폰이 마우스를 따라 기울고, 자유대화엔 말풍선이 하나씩 */
.phone { rotate: y var(--ry, 0deg); transition: rotate .6s cubic-bezier(.2, .7, .2, 1); }
.bubbles { position: absolute; z-index: 2; right: calc(4vw + min(74vh, 640px) * .4615 - 40px); top: 20%; display: grid; gap: 12px; justify-items: end; pointer-events: none; }
.bubbles .b { margin: 0; padding: 11px 18px; border-radius: 20px; font-family: var(--serif); font-weight: 600; font-size: clamp(15px, 1.15vw, 18px); white-space: nowrap; box-shadow: 0 14px 28px -16px rgba(20,32,71,.5); opacity: 0; transform: translateY(14px) scale(.8); }
.bubbles .yui { justify-self: start; background: #fff; color: var(--ink); border: 1px solid rgba(176,96,126,.35); border-bottom-left-radius: 6px; }
.bubbles .me { background: linear-gradient(120deg, #FF5E7E, #FE6882); color: #fff; border-bottom-right-radius: 6px; }
.sec.in .detail.on .bubbles .b { animation: bub .6s cubic-bezier(.3, 1.5, .5, 1) both; }
.sec.in .detail.on .bubbles .b:nth-child(1) { animation-delay: .7s; }
.sec.in .detail.on .bubbles .b:nth-child(2) { animation-delay: 1.4s; }
.sec.in .detail.on .bubbles .b:nth-child(3) { animation-delay: 2.1s; }
@keyframes bub { to { opacity: 1; transform: none; } }
@media (max-width: 900px), (max-height: 599px) {
  .line { padding: 16px 14px 14px; max-width: 64%; }   /* 오른쪽 유이 얼굴을 가리지 않게(세로가 짧은 폰) */
  .line .who { left: 12px; top: -12px; font-size: 13px; padding: 3px 12px; }
  .line .more { display: none; }
  .bubbles { display: none; }
  .rays i { width: 26vw; }
}
@media (prefers-reduced-motion: reduce) {
  .rays i, .line .more { animation: none; }
  .sec.in .splitc .ch, body.yui-lit #yui-canvas { animation: none; }
  .sec:not(.in) .splitc .ch { opacity: 1; }
  .bubbles .b { opacity: 1; transform: none; animation: none !important; }
  .phone { rotate: none; }
}