@charset "UTF-8";

/* ------------------------------1. 웹폰트------------------------------- */

@font-face {
   font-family: 'Kyobo Handwriting 2025';
   src: url('../fonts/kyobo-handwriting-2025-latin.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
   unicode-range: U+0020-007E, U+00A0, U+2018-201D, U+2026;
}

@font-face {
   font-family: 'Kyobo Handwriting 2025';
   src: url('../fonts/kyobo-handwriting-2025-korean.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
   unicode-range: U+AC00-D7A3;
}

@font-face {
   font-family: 'Amatic SC';
   src: url('../fonts/amatic-sc-400-latin.woff2') format('woff2');
   font-weight: 400;
   font-style: normal;
   font-display: swap;
}
@font-face {
   font-family: 'Amatic SC';
   src: url('../fonts/amatic-sc-700-latin.woff2') format('woff2');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
}

/* -------------------------------2. 토큰-------------------------------- */

:root {
   --nx-navy-rgb: 31, 41, 80;
   --nx-navy: rgb(var(--nx-navy-rgb));
   --nx-paper: #ffffff;
   --nx-intro-rgb: 125, 217, 255;
   --nx-intro: rgb(var(--nx-intro-rgb));
   --nx-pad: clamp(20px, 6vw, 64px);
   --nx-max: 1280px;
   --nx-gutter: max(var(--nx-pad), calc((100vw - var(--nx-max)) / 2));
   --c-sky: #f0efef;
   --c-sea: #4dbefe;
   --c-sea-fill: #4ebefb;
   --c-ink: #2b2b29;
   --c-hint: #4fbffd;
   --c-paper: #fcfcfc;
   --font-hand: 'Amatic SC', 'Kyobo Handwriting 2025', 'Bradley Hand', 'Segoe Print', cursive;
   --font-kyobo: 'Kyobo Handwriting 2025', 'Amatic SC', 'Bradley Hand', cursive;
   --font-count: var(--font-kyobo);
   --ls-kyobo: -0.5px;
   --water-0: -0.38444;
   --water-50: 0.11556;
   --water-99: 0.32;
   --water-100: 0.61556;
   --sea-top: 0.36778;
   --vh: 1vh;
   --scene-w: 100vw;
   --scene-h: 125vw;
   --scene-shift: 0;
   --ease-reveal: cubic-bezier(0.45, 0, 0.25, 1);
   --rock-start-y: 4vh;    /* 산 뒤 (앞면 레이어에 가려 안 보인다) */
   --rock-ridge-y: -9.8vh; /* 능선을 막 넘는 자리 */
   --rock-pop-y: -36vh;    /* 하늘로 튀어오른 자리 */
   --rock-pop-scale: 0.085;
   --rock-full-y: calc(50.625vw - 42.1vh);
   --rise-distance: 0.5em;
   --rise-duration: 1020ms;
   --font-sans: 'Pretendard Variable', 'Pretendard', -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Malgun Gothic', '맑은 고딕', 'Noto Sans KR', sans-serif;
   --c-footer-bar: #17301f;
   --c-footer-bg: #f6f6f6;
   --c-footer-on-bar: #ece6da;
   --c-footer-ink: #1f2950;
   --c-footer-dim: rgba(31, 41, 80, 0.7);
   --c-footer-rule: rgba(31, 41, 80, 0.5);
   --c-doc-bg: #ffffff;
   --c-doc-ink: #1f2950;
   --c-doc-dim: rgba(31, 41, 80, 0.7);
   --c-doc-tint: rgba(31, 41, 80, 0.1);
   --c-doc-tint-soft: rgba(31, 41, 80, 0.05);
   --c-doc-rule: rgba(31, 41, 80, 0.25);
}

/* ---------------------------3. 리셋 / 베이스--------------------------- */

*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
.is-hinted, .is-hinted body { height: auto; min-height: 100%; overflow: visible; }
.is-gate, .is-gate body, .is-popup, .is-popup body, .is-story, .is-story body, .is-story-closing, .is-story-closing body { overflow: hidden; }
body { margin: 0; overflow: hidden; background-color: var(--c-sky); color: var(--c-ink); font-family: var(--font-hand); word-break: keep-all; -webkit-text-size-adjust: 100%; -webkit-font-smoothing: antialiased; }
img { border: 0; }
p { margin: 0; }
.a11y-only { position: absolute; width: 1px; height: 1px; margin: -1px; padding: 0; overflow: hidden; border: 0; clip: rect(0, 0, 0, 0); clip-path: inset(50%); white-space: nowrap; }

/* -----------------------------4. 스테이지------------------------------ */

.stage { position: relative; height: calc(100 * var(--vh)); overflow: hidden; background-color: var(--c-sky); }

/* ------------------------------5. 배경 씬------------------------------ */

.scene { position: absolute; top: 0; left: 50%; width: var(--scene-w); height: var(--scene-h); transform: translateX(-50%); transform: translateX(-50%) translateY(calc(var(--scene-shift) * 100%)); will-change: transform; }

@supports (width: clamp(1px, 2px, 3px)) {
   :root { --scene-w: clamp(85.6vh, 100vw, 160vh); --scene-h: clamp(107vh, 125vw, 200vh); }
}

@supports (height: 100dvh) {
   :root { --vh: 1dvh; --scene-w: clamp(85.6dvh, 100vw, 160dvh); --scene-h: clamp(107dvh, 125vw, 200dvh); }
}
.bottle { position: absolute; top: 0; left: 50%; z-index: 1; width: var(--scene-w); height: var(--scene-h); transform: translateX(-50%); transform: translateX(-50%) translateY(calc(var(--scene-shift) * 100%)); pointer-events: none; }
.bottle__art { position: absolute; top: 15.9444%; left: 32.9167%; width: 35.4861%; height: 35.1111%; }
.bottle__frame { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.bottle__frame.is-on { opacity: 1; }
.artwork::before { content: ''; position: absolute; right: 0; left: 0;
                  top: calc(var(--scene-h) - 1px); height: 200vh;
                  transform: translateY(calc(var(--scene-shift) * var(--scene-h)));
                  background-color: var(--c-sea-fill);
                  background-image: url('../images/bak/charlang-sea-fill.webp?v=2');
                  background-repeat: repeat; background-size: var(--scene-w) auto;
                  will-change: transform; }
.is-revealing .artwork::before { transition: transform 1600ms var(--ease-reveal); }
.scene__art { position: absolute; top: 0; right: 0; bottom: 0; left: 0; display: block; }
.scene__art img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene__edge { position: absolute; top: 0; display: block; width: 100%; height: 100%; pointer-events: none; }
.scene__edge img { display: block; width: 100%; height: 100%; object-fit: cover; }
.scene__edge--l { right: calc(100% - 1px); transform: scaleX(-1); }
.scene__edge--r { left: calc(100% - 1px); transform: scaleX(-1); }

/* -------------6. 구름 — 뷰포트 기준 배치 (Figma loading-4)------------- */

.clouds { position: absolute; top: 0; right: 0; bottom: 0; left: 0; pointer-events: none; }
.cloud { position: absolute; margin: 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; pointer-events: auto; }
.cloud picture { display: block; width: 100%; height: 100%; }
.cloud img { display: block; width: 100%; height: 100%; }
.cloud:focus { outline: 2px dashed var(--c-sea); outline-offset: 6px; border-radius: 999px; }
.cloud:focus:not(:focus-visible) { outline: none; }
.cloud--large { width: 29.2969vw; height: 10.8507vw; }
.cloud--medium { width: 18.9887vw; height: 6.5104vw; }
.cloud--small { width: 10.8507vw; height: 4.3403vw; }
.cloud--mini { width: 14.1059vw; height: 4.6115vw; }
.cloud--1 { top: calc(6.8889 * var(--vh)); left: 70.625vw; }
.cloud--2 { top: calc(8 * var(--vh)); left: -1.9444vw; }
.cloud--3 { top: calc(1.6667 * var(--vh)); left: 31.6667vw; }
.cloud--4 { top: calc(29.1111 * var(--vh)); left: 12.7083vw; }
.cloud--5 { top: calc(32.5556 * var(--vh)); left: 63.0556vw; }
.cloud--6 { top: calc(21.7778 * var(--vh)); left: 42.9167vw; }
.cloud--7 { top: calc(38.5556 * var(--vh)); left: 80.625vw; }

/* ----------------------------7. 로딩 카운터---------------------------- */

.loader { position: absolute; top: 50%; right: 0; left: 0; text-align: center; color: var(--c-paper); opacity: 0; visibility: hidden; transform: translateY(-50%); }
.loader__count { font-family: var(--font-count); font-size: 8.8889vw; font-size: min(8.8889vw, 21vh); line-height: 1.13; letter-spacing: var(--ls-kyobo); }
.loader__label { margin-top: 0.25em; font-family: var(--font-kyobo); font-size: 3vw; font-size: min(3vw, 7vh); line-height: 1.27; letter-spacing: var(--ls-kyobo); }

/* --------------------------8. 로딩 완료 카피--------------------------- */

.reveal { position: absolute; top: 0; right: 0; bottom: 0; left: 0; color: var(--c-ink); text-align: center; pointer-events: none; }
.reveal__title { position: absolute; top: calc(13.5556 * var(--vh)); right: 0; left: 0; margin: 0; font-family: var(--font-kyobo); font-size: 5.5vw; font-size: min(5.5vw, 17vh, 127px); font-weight: 400; line-height: 1.13; letter-spacing: var(--ls-kyobo); }
.reveal__br { display: none; }
.reveal__lead { position: absolute; top: calc(70 * var(--vh)); right: 0; left: 0; font-family: var(--font-kyobo); font-size: 4.4444vw; font-size: min(4.4444vw, 8.28vh, 52px); line-height: 1.2; letter-spacing: var(--ls-kyobo); }
.reveal__line { display: block; }
.reveal__title, .reveal__line { opacity: 0; transform: translateY(var(--rise-distance)); }

/* -------------------------------9. 상태-------------------------------- */

.is-loading { --scene-shift: -0.56; }
.is-loading .stage { background-color: var(--c-sea-fill); }
.is-loading .loader { opacity: 1; visibility: visible; }
.is-loading .clouds { opacity: 0; visibility: hidden; }
.is-revealing .scene { transition: transform 1600ms var(--ease-reveal); }
.is-outro .loader { opacity: 0; visibility: hidden; transition: opacity 700ms ease, visibility 0s 700ms; }
.is-revealed .clouds { opacity: 1; visibility: visible; transition: opacity 900ms ease 800ms, visibility 0s 800ms; }
.is-revealed .reveal__title, .is-revealed .reveal__line { opacity: 1; transform: translateY(0); transition: opacity var(--rise-duration) ease, transform var(--rise-duration) var(--ease-reveal); }
.is-revealed .reveal__title { transition-delay: 1100ms; }
.is-revealed .reveal__line:nth-child(1) { transition-delay: 1560ms; }
.is-revealed .reveal__line:nth-child(2) { transition-delay: 1740ms; }
.is-revealed .reveal__line:nth-child(3) { transition-delay: 1920ms; }
.is-quiet .reveal { opacity: 0; transition: opacity 1200ms ease; }
.hint { position: absolute; top: calc(27.7089 * var(--vh)); left: 68.09vw; margin: 0; font-family: var(--font-kyobo); font-size: 2.0vw; font-size: min(2.0vw, 3.82vh); line-height: 1.25; letter-spacing: 0.04em; color: var(--c-hint); text-transform: uppercase; white-space: nowrap; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.is-hinted .hint { opacity: 1; transition: opacity var(--rise-duration) ease; }
.peek { position: absolute; top: 0; right: 0; bottom: 0; left: 0; opacity: 0; pointer-events: none; }
.is-hinted .peek { opacity: 1; transition: opacity var(--rise-duration) ease; }
.peek__label { position: absolute; top: calc(44.7211 * var(--vh)); left: 23.0323vw; margin: 0; font-family: var(--font-kyobo); font-size: 2.0vw; font-size: min(2.0vw, 3.82vh); line-height: 1.25; letter-spacing: 0.04em; color: var(--c-ink); text-transform: uppercase; white-space: nowrap; transform: translateX(-50%); }
.knock { position: absolute; z-index: 2; top: calc(var(--water-100) * 100 * var(--vh)); right: 0; bottom: 0; left: 0; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; margin: 0; padding: 23px 24px; box-sizing: border-box; font-family: var(--font-kyobo); font-size: 2.3vw; font-size: min(2.3vw, 4.39vh, 33px); line-height: 1.25; letter-spacing: 0.04em; color: var(--c-paper); background: none; border: 0; -webkit-appearance: none; appearance: none; white-space: nowrap; cursor: pointer; opacity: 0; pointer-events: none; -webkit-user-select: none; user-select: none; touch-action: manipulation; }
.knock__br { display: none; }
.knock__hand { position: relative; display: block; width: 88px; height: 100px; }
.knock__frame { position: absolute; top: 0; left: 0; display: block; width: 100%; height: 100%; opacity: 0; }
.knock__frame.is-on { opacity: 1; }
.is-hinted .knock { opacity: 1; pointer-events: auto; transition: opacity var(--rise-duration) ease; }
.is-rising .knock { opacity: 0; pointer-events: none; transition: opacity 520ms ease; }
.meet { position: absolute; z-index: 2; bottom: calc(3.5 * var(--vh) + 8px + env(safe-area-inset-bottom, 0px)); left: 50%; margin: 0; padding: 0.4em 0.9em; font-family: var(--font-kyobo); font-size: 2.6vw; font-size: min(2.6vw, 4.96vh, 37px); line-height: 1.25; letter-spacing: 0.04em; color: var(--c-paper); white-space: nowrap; opacity: 0; transform: translateX(-50%); pointer-events: none; }
.is-afloat .meet { opacity: 1; transition: opacity var(--rise-duration) ease; }
.knock:focus { outline: none; }
.knock:focus .knock__inner { outline: 2px dashed var(--c-paper); outline-offset: 6px; border-radius: 999px; }
.knock:focus:not(:focus-visible) .knock__inner { outline: none; }
.peek__arrow { position: absolute; top: calc(46.6667 * var(--vh)); left: 29.9861vw; display: block; width: 6.1806vw; width: min(6.1806vw, 11.8vh); height: auto; }

@keyframes nudge {
   0% { transform: translateY(0); }
   4% { transform: translateY(calc(var(--nudge, 0.05em) * -1)); }
   9% { transform: translateY(0); }
   13% { transform: translateY(calc(var(--nudge, 0.05em) * -1)); }
   18% { transform: translateY(0); }
   100% { transform: translateY(0); }
}
.hint__inner, .peek__inner, .knock__inner { display: inline-block; --nudge: 0.05em; }

@keyframes knock-hop {
   0% { transform: translateY(0); }
   40% { transform: translateY(calc(var(--nudge, 0.05em) * -1)); }
   100% { transform: translateY(0); }
}
.knock__tok { display: inline-block; }
.knock__tok.is-tap { animation: knock-hop 240ms ease-in-out; }
.is-hinted .hint__inner { animation: nudge 2.4s ease-in-out 1.3s infinite; }
.is-hinted .peek__inner, .is-hinted .peek__arrow { animation: nudge 2.4s ease-in-out 1.9s infinite; }
.peek__arrow { --nudge: 3.7%; }
.rock { position: absolute; top: 27.17%; left: 15.69%; width: 63.06%; height: 9.61%; margin: 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; visibility: hidden; }
.is-hinted .rock { visibility: visible; }
.rock:focus { outline: 2px dashed var(--c-ink); outline-offset: 4px; }
.rock:focus:not(:focus-visible) { outline: none; }

/* --------------------------10. 현무암 이야기--------------------------- */

.story { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 3; overflow: hidden; }
.story__rock { position: absolute; top: 50%; left: 50%; z-index: 1; width: 133.3333vw; height: auto; transform: translate(-50%, calc(-50% + var(--rock-start-y))) scale(0.055); }
@keyframes rock-rise {
   0% { transform: translate(-50%, calc(-50% + var(--rock-start-y))) scale(0.055); opacity: 1; z-index: 1; animation-timing-function: cubic-bezier(0.35, 0, 0.5, 1); }
   12% { transform: translate(-50%, calc(-50% + var(--rock-ridge-y))) scale(0.06); opacity: 1; z-index: 1; animation-timing-function: cubic-bezier(0.25, 0.7, 0.35, 1); }
   15% { z-index: 3; }
   31.25% { transform: translate(-50%, calc(-50% + var(--rock-pop-y))) scale(var(--rock-pop-scale)); opacity: 1; z-index: 3; }
   56.25% { transform: translate(-50%, calc(-50% + var(--rock-pop-y))) scale(var(--rock-pop-scale)); opacity: 1; z-index: 3; animation-timing-function: cubic-bezier(0.6, 0, 0.3, 1); }
   100% { transform: translate(-50%, calc(-50% + var(--rock-full-y))) scale(1); opacity: 1; z-index: 3; }
}
.is-story .story__rock { animation: rock-rise 1600ms both; }

@keyframes rock-sink {
   0% { transform: translate(-50%, calc(-50% + var(--rock-full-y))) scale(1); opacity: 1; z-index: 3; animation-timing-function: cubic-bezier(0.7, 0, 0.4, 1); }
   62% { transform: translate(-50%, calc(-50% + var(--rock-pop-y))) scale(var(--rock-pop-scale)); opacity: 1; z-index: 3; animation-timing-function: cubic-bezier(0.7, 0.2, 0.8, 1); }
   63% { z-index: 1; }
   88% { transform: translate(-50%, calc(-50% + var(--rock-ridge-y))) scale(0.06); opacity: 1; z-index: 1; }
   100% { transform: translate(-50%, calc(-50% + var(--rock-start-y))) scale(0.055); opacity: 1; z-index: 1; }
}
.is-story-closing .story__rock { animation: rock-sink 900ms both; }

@keyframes story-front-out {
   0% { opacity: 1; }
   20% { opacity: 1; }
   26% { opacity: 0; }
   100% { opacity: 0; }
}
.is-story .story__front { animation: story-front-out 1600ms both; }

@keyframes story-front-in {
   0% { opacity: 0; }
   56% { opacity: 0; }
   62% { opacity: 1; }
   100% { opacity: 1; }
}
.is-story-closing .story__front { animation: story-front-in 900ms both; }

@keyframes bottle-over-rock {
   0% { z-index: 4; animation-timing-function: step-end; }
   56.25% { z-index: 1; animation-timing-function: step-end; }
   100% { z-index: 1; }
}
.is-story .bottle { animation: bottle-over-rock 1600ms both; }

@keyframes bottle-under-rock {
   0% { z-index: 1; animation-timing-function: step-end; }
   50% { z-index: 4; animation-timing-function: step-end; }
   100% { z-index: 4; }
}
.is-story-closing .bottle { animation: bottle-under-rock 900ms both; }
.story__front { position: absolute; top: 0; left: 50%; z-index: 2; width: var(--scene-w); height: var(--scene-h); transform: translateX(-50%); transform: translateX(-50%) translateY(calc(var(--scene-shift) * 100%)); pointer-events: none; }
.story__front img { position: absolute; top: 26.9444%; left: 23.3333%; display: block; width: 53.4028%; height: auto; }
.story__body { position: absolute; top: 0; right: 0; bottom: 0; left: 0; z-index: 4; opacity: 0; transition: opacity 240ms ease; }
.is-story .story__body { opacity: 1; transition: opacity 420ms ease 1300ms; }
.is-story .hint, .is-story .peek, .is-story .knock, .is-story .meet { opacity: 0; transition: opacity 240ms ease; }
.is-story .knock { pointer-events: none; }
.is-story-closing .story__body { opacity: 0; transition: opacity 200ms ease; }
.story__text { position: absolute; top: calc(26.1111 * var(--vh)); left: 50%; margin: 0; transform: translateX(-50%); font-family: var(--font-kyobo); font-size: 4.4444vw; font-size: min(4.4444vw, 7.11vh); font-weight: 400; line-height: 1.27; letter-spacing: 0.02em; color: var(--c-paper); text-align: center; }
.story__line { display: block; white-space: nowrap; }
.story__line--gap { height: 0.8em; }
.story__back { position: absolute; top: calc(75 * var(--vh)); left: 50%; width: 6.25vw; width: min(6.25vw, 10vh); margin: 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; transform: translateX(-50%); }
.story__back img { display: block; width: 100%; height: auto; }
.story__back:focus { outline: 2px dashed var(--c-paper); outline-offset: 6px; border-radius: 999px; }
.story__back:focus:not(:focus-visible) { outline: none; }

/* ----------------------------11. 구름 팝업----------------------------- */

.popup { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 2; }
.popup__scrim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; cursor: pointer; }
.popup__panel { position: absolute; top: 50%; left: 50%; width: 64.7917vw; width: min(64.7917vw, 103.6vh); height: 49.0278vw; height: min(49.0278vw, 78.4vh); }
.popup__cloud { display: block; width: 100%; height: 100%; }
.popup__text { position: absolute; top: 48%; left: 50%; width: 80%; margin: 0; transform: translate(-50%, -50%); font-family: var(--font-hand); font-size: 4.4444vw; font-size: min(4.4444vw, 7.11vh); font-weight: 400; line-height: 1.27; letter-spacing: 0.02em; color: var(--c-ink); text-align: center; }
.popup__text.is-ko { font-family: var(--font-kyobo); font-size: 3.6vw; font-size: min(3.6vw, 5.75vh); }
.popup__line { display: block; white-space: nowrap; }
.popup__back { position: absolute; top: 66.57%; left: 50%; width: 6.25vw; width: min(6.25vw, 10vh); margin: 0; padding: 0; border: 0; background: none; -webkit-appearance: none; appearance: none; cursor: pointer; transform: translateX(-50%); }
.popup__back img { display: block; width: 100%; height: auto; }
.popup__back:focus { outline: 2px dashed var(--c-sea); outline-offset: 6px; border-radius: 999px; }
.popup__back:focus:not(:focus-visible) { outline: none; }
.popup__scrim { opacity: 0; transition: opacity 320ms ease; }
.popup__panel { opacity: 0; transform: translate(-50%, calc(-50% + 0.6em)); transition: opacity 380ms ease, transform 460ms var(--ease-reveal); }
.is-popup .popup__scrim { opacity: 1; }
.is-popup .popup__panel { opacity: 1; transform: translate(-50%, -50%); }

/* -----------------12. 공용 푸터 (includes/footer.php)------------------ */

.site-footer { padding: 0 20px; background-color: var(--c-footer-bg); color: var(--c-footer-dim); font-family: var(--font-sans); font-size: 14px; line-height: 1.75; letter-spacing: -0.01em; word-break: keep-all; }
.site-footer__inner { display: flex; flex-wrap: wrap; width:1200px; max-width: 100%; margin: 0 auto; padding: 32px 0; }
.site-footer__col { flex: 1 1 260px; min-width: 0; padding: 0 26px; border-left: 1px solid var(--c-footer-rule); font-style: normal; }
.site-footer__col:first-child { padding-left: 0; border-left: 0; }
.site-footer__list { display: flex; flex-wrap: wrap; margin: 0; padding: 0; list-style: none; }
.site-footer__item { position: relative; margin-right: 6px; padding-right: 6px; letter-spacing: -0.8px; }
.site-footer__item::after { content: ''; position: absolute; top: 0.42em; right: 0; width: 1px; height: 0.95em; background-color: var(--c-footer-rule); }
.site-footer__item:last-child { margin-right: 0; padding-right: 0; }
.site-footer__item:last-child::after { display: none; }
.site-footer__link { color: var(--c-footer-ink); font-weight: 500; text-decoration: none; }
.site-footer__link:hover, .site-footer__link:focus { text-decoration: underline; }
.site-footer__link:focus { outline: 2px dashed currentColor; outline-offset: 3px; }
.site-footer__link:focus:not(:focus-visible) { outline: none; }
.site-footer__warning { margin: 0; }

/* ----------바다에 이어지는 변형 — 첫 화면 전용 ($footerOnSea)---------- */

.site-footer--sea { border-top: 1px solid rgba(255, 255, 255, 0.5); background-color: var(--c-sea-fill); background-image: url('../images/bak/charlang-sea-fill.webp?v=2'); background-repeat: repeat; background-size: var(--scene-w) auto; color: rgba(255, 255, 255, 0.8); }
.site-footer--sea .site-footer__link { color: #ffffff; }
.site-footer--sea .site-footer__col { border-left-color: rgba(255, 255, 255, 0.35); }
.site-footer--sea .site-footer__item::after { background-color: #ffffff; }

/* ----------------------13. 연령 확인 (index.php)----------------------- */

.agegate { position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 10; display: flex; align-items: center; justify-content: center; padding: 20px; background-color: rgba(17, 22, 40, 0.55); }
html:not(.is-gate) .agegate { display: none; }
.agegate[hidden] { display: none; }
.agegate__panel:focus { outline: none; }
.agegate__panel { width: 100%; max-width: 520px; padding: 46px 32px 34px; border-radius: 12px; background-color: #ffffff; color: var(--c-doc-ink); font-family: var(--font-sans); text-align: center; }
.agegate__title { margin: 0 0 12px; font-size: 38px; font-weight: 700; letter-spacing: -0.02em; }
.agegate__lead { margin: 0 0 32px; font-size: 21px; font-weight: 700; letter-spacing: -0.02em; }
.agegate__actions { display: flex; justify-content: center; margin: 0 0 26px; }
.agegate__btn { flex: 0 1 190px; padding: 17px 10px; border: 1px solid var(--c-doc-ink); border-radius: 8px; font-family: inherit; font-size: 18px; font-weight: 700; line-height: 1.2; letter-spacing: 0.02em; cursor: pointer; -webkit-appearance: none; appearance: none; transition: background-color 160ms ease, color 160ms ease; }
.agegate__btn + .agegate__btn { margin-left: 16px; }
.agegate__btn--yes { background-color: var(--c-doc-ink); color: #ffffff; }
.agegate__btn--no { border-color: var(--c-doc-rule); background-color: transparent; color: var(--c-doc-ink); }
.agegate__btn--no:hover { background-color: var(--c-doc-tint-soft); }
.agegate__btn:focus { outline: 2px solid var(--c-doc-ink); outline-offset: 3px; }
.agegate__btn:focus:not(:focus-visible) { outline: none; }
.agegate__warning { margin: 0; color: var(--c-doc-dim); font-size: 13px; line-height: 1.7; }

/* -----------------14. 약관·방침 문서 페이지 (policy/)------------------ */

.is-doc, .is-doc body { height: auto; min-height: 100%; overflow: visible; }
.is-doc body { background-color: var(--c-doc-bg); color: var(--c-doc-ink); font-family: var(--font-sans); }
.is-doc .site-head::before { background-color: var(--c-doc-bg); border-bottom: 1px solid var(--c-doc-rule); box-sizing: border-box; }
.policy__inner { max-width: 860px; margin: 0 auto; padding: calc(68px + 64px) 5vw 72px; }
.policy__title { margin: 0 0 22px; font-size: 30px; font-weight: 700; letter-spacing: -0.02em; }
.policy__meta { display: flex; flex-wrap: wrap; align-items: center; padding-bottom: 20px; border-bottom: 1px solid var(--c-doc-rule); }
.policy__date { margin: 0 24px 0 0; color: var(--c-doc-dim); font-size: 14px; }
.policy__picker { display: flex; align-items: center; margin: 0; }
.policy__picker-label { margin-right: 8px; color: var(--c-doc-dim); font-size: 14px; }
.policy__select { padding: 6px 10px; border: 1px solid var(--c-doc-rule); border-radius: 4px; background-color: #fff; color: inherit; font-family: inherit; font-size: 14px; }
.policy__go { margin-left: 8px; padding: 6px 12px; border: 1px solid var(--c-doc-rule); border-radius: 4px; background-color: #fff; color: inherit; font-family: inherit; font-size: 14px; cursor: pointer; }
.policy__notice { margin: 22px 0 0; padding: 12px 16px; border-radius: 6px; background-color: #fbf1dd; font-size: 14px; }
.policy__body { margin-top: 30px; font-size: 15px; line-height: 1.85; }
.policy__body h2 { margin: 34px 0 10px; font-size: 18px; font-weight: 700; }
.policy__body h2:first-child { margin-top: 0; }
.policy__body p { margin: 0 0 12px; }
.policy__todo { padding: 14px 16px; border: 1px dashed #c04a3c; border-radius: 6px; color: #a2382c; }
.policy__empty { margin: 24px 0 0; color: var(--c-doc-dim); }
.policy__back { margin: 52px 0 0; font-size: 15px; text-align: center; }
.policy__back-link { display: inline-block; min-width: 200px; padding: 17px 44px; border: 1px solid var(--c-doc-ink); border-radius: 8px; color: var(--c-doc-ink); font-size: 17px; text-decoration: none; transition: background-color 160ms ease; }
.policy__back-link:hover { background-color: var(--c-doc-tint-soft); }
.policy__back-link:focus { outline: 2px solid var(--c-doc-ink); outline-offset: 2px; }
.policy__back-link:focus:not(:focus-visible) { outline: none; }
.policy__toc { margin: 26px 0 34px; padding: 20px 24px; border-radius: 8px; background-color: var(--c-doc-tint); }
.policy__toc-list { margin: 0; padding: 0; list-style: none; }
.policy__toc-list li { margin: 0 0 6px; }
.policy__toc-list li:last-child { margin-bottom: 0; }
.policy__num { display: inline-block; min-width: 2.1em; color: var(--c-doc-dim); font-variant-numeric: tabular-nums; }
.policy__body h2 .policy__num { color: inherit; }
.policy__list { margin: 12px 0; padding-left: 1.9em; }
.policy__list li { margin: 0 0 8px; }
.policy__list--ko { list-style-type: decimal; list-style-type: hangul; }
.policy__list--num { list-style-type: decimal; }
.policy__list .policy__list { margin: 8px 0 4px; }
.policy__table-wrap { margin: 16px 0 20px; overflow-x: auto; -webkit-overflow-scrolling: touch; }
.policy__table { width: 100%; min-width: 520px; border-collapse: collapse; font-size: 14px; }
.policy__table th, .policy__table td { padding: 10px 12px; border: 1px solid var(--c-doc-rule); text-align: left; vertical-align: top; }
.policy__table thead th { background-color: var(--c-doc-tint); font-weight: 700; }
.policy__table tbody th { background-color: var(--c-doc-tint-soft); font-weight: 700; }
.policy__link { color: inherit; }

/* --------------------------15. 좁은 화면 푸터-------------------------- */

@media (max-width: 1024px) {
   .site-footer__inner { display: block; }
   .site-footer__col { padding: 0; border-left: 0; }
   .site-footer__col + .site-footer__col { margin-top: 16px; }
}

/* ----------------------16. 모바일 (Figma 390×844)---------------------- */

@media (max-width: 768px) {
   :root {
      --ls-kyobo: -0.25px;
      --water-0: -0.18128;
      --water-50: 0.07583;
      --water-99: 0.20024;
      --water-100: 0.49526;
   }
   .bottle__art { transform: translateY(26%) scale(1.26); transform-origin: 50% 100%; }
   .cloud--large { width: 54.0865vw; width: min(54.0865vw, 24.99vh); height: 20.0321vw; height: min(20.0321vw, 9.26vh); }
   .cloud--medium { width: 35.0561vw; width: min(35.0561vw, 16.2vh); height: 12.0192vw; height: min(12.0192vw, 5.55vh); }
   .cloud--small { width: 20.0321vw; width: min(20.0321vw, 9.26vh); height: 8.0128vw; height: min(8.0128vw, 3.7vh); }
   .cloud--mini { width: 26.0417vw; width: min(26.0417vw, 12.03vh); height: 8.5136vw; height: min(8.5136vw, 3.93vh); }
   .cloud--1 { top: calc(1.8957 * var(--vh)); left: -10.5128vw; }
   .cloud--2 { top: calc(4.8578 * var(--vh)); left: 66.1538vw; }
   .cloud--3 { top: calc(13.0332 * var(--vh)); left: 12.3077vw; }
   .cloud--4 { top: calc(20.7346 * var(--vh)); left: 55.8974vw; }
   .cloud--5 { top: calc(29.6209 * var(--vh)); left: 37.4359vw; }
   .cloud--6 { top: calc(25.7109 * var(--vh)); left: -3.3333vw; }
   .cloud--7 { top: calc(33.2938 * var(--vh)); left: 71.0256vw; }
   .loader__count { font-size: 68px; }
   .loader__label { font-size: 32px; }
   .reveal__title { top: calc(14 * var(--vh)); font-size: 42px; line-height: 1.2; }
   .reveal__br { display: inline; }
   .reveal__lead { top: calc(70.0237 * var(--vh)); font-size: 32px; }
   .hint { top: calc(17 * var(--vh)); left: 73.3333vw; font-size: 20px; }
   .knock { font-size: 30px; }
   .knock__br { display: inline; }
   .knock__hand { width: 62px; height: 70px; }
   .meet { font-size: 30px; }
   .peek__label { top: calc(33.1896 * var(--vh)); left: 16vw; font-size: 20px; width: 96px; white-space: normal; text-align: center; }
   .peek__arrow { top: calc(35.2630 * var(--vh)); left: 30vw; width: 11.4103vw; width: min(11.4103vw, 10.3vh); }
   .is-loading { --scene-shift: -0.5372; }
   :root { --rock-pop-y: -30vh; --rock-full-y: calc(93.4vw - 22.16vh); --rock-start-y: -6vh; }
   .story__rock { width: 246.1538vw; }
   .story__text { top: calc(37.5592 * var(--vh)); font-size: 32px; font-size: min(32px, 8.2051vw, 3.79vh); }
   .story__back { top: calc(63.6256 * var(--vh)); width: 11.5385vw; width: min(11.5385vw, 5.33vh); }
   .popup__panel { width: 114.359vw; width: min(114.359vw, 52.84vh); height: 86.667vw; height: min(86.667vw, 40.05vh); }
   .popup__text { font-size: 32px; font-size: min(32px, 8.2051vw, 3.79vh); }
   .popup__text.is-ko { font-size: 25.9px; font-size: min(25.9px, 6.64vw, 3.07vh); }
   .popup__back { width: 11.5385vw; width: min(11.5385vw, 5.33vh); }
   .agegate__panel { padding: 34px 22px 26px; }
   .agegate__title { margin-bottom: 10px; font-size: 28px; }
   .agegate__lead { margin-bottom: 24px; font-size: 17px; }
   .agegate__btn { padding: 15px 10px; font-size: 16px; }
   .agegate__btn + .agegate__btn { margin-left: 10px; }
   .agegate__warning { font-size: 11.5px; }
   .sound { top: calc(12px + env(safe-area-inset-top, 0px)); right: calc(12px + env(safe-area-inset-right, 0px)); width: 40px; height: 40px; }
   .sound__icon { width: 22px; height: 22px; }
   .site-footer { padding: 0 24px; font-size: 13px; }
   .site-footer__inner { padding: 20px 0; }
   .policy__inner { padding: calc(53px + 40px) 20px 52px; }
   .policy__title { margin-bottom: 18px; font-size: 23px; }
   .policy__meta { display: block; }
   .policy__date { margin: 0 0 10px; }
   .policy__body { font-size: 14px; line-height: 1.6; }
   .policy__body h2 { margin-top: 28px; font-size: 16px; }
   .policy__toc { padding: 16px 18px; }
   .policy__list { padding-left: 1.6em; }
   .policy__table { min-width: 460px; font-size: 13px; }
}
.nx-lock { overflow: hidden; }

/* -------------------공용 머리 (includes/header.php)-------------------- */

.site-head {
   position: fixed; z-index: 30;
   top: 0; right: 0; left: 0;
   display: flex; align-items: center; justify-content: space-between;
   box-sizing: border-box;
   height: 92px;
   padding: 16px max(24px, calc((100% - 1400px) / 2));
   background: transparent;
   transition: background-color 260ms ease;
}
.site-head::before {
   content: "";
   position: absolute; z-index: -1;
   top: 0; right: 0; bottom: 0; left: 0;
   background: transparent;
   clip-path: inset(0 0 0 0);
   transition: background-color 260ms ease, clip-path 480ms cubic-bezier(0.22, 1, 0.36, 1);
}
.nx-menu .site-head::before { clip-path: inset(0 400px 0 0); }
.site-head__logo { display: block; width: 98px; height: auto; }
.site-head__logo-img { display: block; width: 100%; height: 100%; }
.site-head__logo:focus-visible { outline: 2px dashed currentColor; outline-offset: 4px; }
.site-head__menu-btn { display: block; flex: 0 0 auto; width: 52px; height: 52px; margin: 0; padding: 0; border: 0; background: none; color: var(--nx-navy); cursor: pointer; transition: color 260ms ease;}
.site-head__menu-btn svg { display: block; margin: 0 auto; overflow: visible; fill: none; stroke: currentColor; stroke-miterlimit: 10; }
.site-head__ico-open { display: block; width: 34px; height: 34px; margin: 0 auto; }   /* 52 버튼 안에 34 물결 — 버튼이 block 이라 margin auto 로 가운데 */
.site-head__menu-btn .site-head__ico-close { display: none; width: 18px; height: 18px; stroke-width: 1.5; }
.nx-menu .site-head__ico-open { display: none; }
.nx-menu .site-head__ico-close { display: block; }
.site-head__menu-btn:focus-visible { outline: 2px dashed currentColor; outline-offset: 2px; }
/*
 * 메뉴가 열리면 닫기(X)는 서랍 안에 있어야 한다.
 * 평소 머리는 1400px 가운데 칸을 쓰므로(위 padding) 화면이 넓어질수록 오른쪽 여백이
 * (100vw - 1400)/2 로 커져 X 가 서랍 왼쪽 밖으로 밀려난다 — 열렸을 때만 오른쪽을 40 으로 고정해
 * 서랍의 로고(.site-menu__logo, 왼쪽 40)와 같은 여백에 맞춘다. 화면 폭이 변해도 자리가 안 바뀐다.
 */
.nx-menu .site-head { padding-right: 40px; }
.nx-menu .site-head__menu-btn { width: 52px; height: 52px; color: var(--nx-navy); }
.nx-menu .site-head__menu-btn .site-head__ico-close { width: 36px; height: 36px; }
.site-menu {
   position: fixed; z-index: 25;
   /*
    * 상단 띠배너가 '페이지를 밀어내기' 면 머리(.site-head)는 banner_render.js 가 그만큼 내려 준다.
    * 서랍은 fixed 라 같이 내려가지 않아 그대로 두면 배너 뒤에 깔리고, 서랍 안 로고가
    * 머리의 로고·닫기 버튼과 어긋난다 → 같은 값(--sbn-push-top)만큼 함께 내린다.
    * 배너가 없거나 '덮기' 면 0px 이라 평소와 같다.
    */
   top: var(--sbn-push-top, 0px); right: 0; bottom: 0;
   width: 400px; max-width: 100%;
   display: flex; flex-direction: column; justify-content: space-between;
   box-sizing: border-box;
   padding: 100px 0 calc(40px + var(--sbn-push-bottom, 0px));   /* 하단 띠배너가 있으면 그만큼 위로 */
   background: var(--nx-intro) no-repeat center / cover;
   background-image: url("../images/main/charlang-menu-bg.webp");
   visibility: hidden;
   transform: translateX(100%);
   transition: transform 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 480ms;
}
.site-menu__dim { position: fixed; z-index: 24; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.45); opacity: 0; visibility: hidden; cursor: pointer; transition: opacity 480ms cubic-bezier(0.22, 1, 0.36, 1), visibility 0s linear 480ms; }
.nx-menu .site-menu__dim { opacity: 1; visibility: visible; transition-delay: 0s; }
.site-menu__logo { position: absolute; z-index: 1; left: 40px; top: 28px; display: block; width: 80px; }
.site-menu__logo:focus-visible { outline: 2px dashed var(--nx-navy); outline-offset: 4px; }
.nx-menu .site-menu { visibility: visible; transform: translateX(0); transition-delay: 0s; }
.site-menu__nav { flex: 0 0 auto; }
.site-menu__list { margin: 0; padding: 0; list-style: none; }
.site-menu__item + .site-menu__item { margin-top: 0; }
.site-menu__link { margin: 0; padding: 0; border: 0; background: none; cursor: pointer; }
.site-menu__link { display: flex; align-items: center; padding: 12px 40px; font-family: var(--font-hand); font-size: 52px; font-weight: 700; line-height: 43.2px; letter-spacing: -0.005em; color: var(--nx-navy); text-decoration: none; }
.site-menu__arrow { display: block; flex: 0 0 auto; width: 28px; height: auto; margin-left: 5px; transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1); }
.site-menu__link:hover .site-menu__arrow, .site-menu__link:focus-visible .site-menu__arrow { transform: translateX(8px); }
.site-menu__link:focus { outline: 2px dashed var(--nx-navy); outline-offset: 6px; }
.site-menu__link:focus:not(:focus-visible) { outline: none; }
/*
 * 하단 띠배너(includes/banner_render.php)가 깔리면 그 높이만큼 위로 올린다.
 * 서랍은 fixed 라 배너가 미는 body 여백을 받지 않아, 그냥 두면 아이콘이 배너에 가린다.
 * --sbn-push-bottom 은 배너가 뜰 때 높이가 들어오고 닫으면 0 이 되므로 자동으로 제자리로 돌아온다.
 */
.site-menu__sns { position: absolute; left: 40px; bottom: calc(40px + var(--sbn-push-bottom, 0px)); display: block; width: 52px; transition: bottom 240ms ease; }
.site-menu__sns img { display: block; width: 100%; height: auto; }
.site-menu__sns:focus-visible { outline: 2px dashed var(--nx-navy); outline-offset: 6px; border-radius: 50%; }
.site-menu__img { display: block; width: 100%; height: auto; }

/* ----------------------준비 중 안내 (메뉴 > 지도)---------------------- */

.coming-soon {
   position: fixed; z-index: 3200;
   top: 0; right: 0; bottom: 0; left: 0;
   display: flex; align-items: center; justify-content: center;
   padding: 24px;
   visibility: hidden;
   opacity: 0;
   transition: opacity 240ms ease, visibility 0s linear 240ms;
}
.coming-soon.is-open { visibility: visible; opacity: 1; transition-delay: 0s; }
.coming-soon__dim { position: absolute; top: 0; right: 0; bottom: 0; left: 0; background: rgba(0, 0, 0, 0.55); }
.coming-soon__card {
   position: relative;
   box-sizing: border-box;
   width: min(376px, 100%);
   background: transparent no-repeat center / 100% 100%;
   background-image: url("../images/main/charlang-coming-card.webp");
   border-radius: 12px;
   overflow: hidden;
   text-align: center;
   box-shadow: 0 0 10px rgba(0, 0, 0, 0.19);
   transform: scale(0.96);
   transition: transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
}
.coming-soon.is-open .coming-soon__card { transform: scale(1); }
.coming-soon__body {
   box-sizing: border-box;
   min-height: 377px;
   display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 20px;
   padding: 28px 24px;
}
.coming-soon__art { position: relative; width: min(225px, 100%); margin: 0; }
.coming-soon__text { margin: 0; font-family: var(--font-kyobo); font-size: 32px; line-height: 1.2; letter-spacing: -0.005em; color: var(--nx-paper); }
.coming-soon__ok {
   display: block;
   width: 100%; height: 50px;
   margin: 0; padding: 0; border: 0;
   border-top: 1px solid rgba(255, 255, 255, 0.45);
   background: none;
   font-family: var(--font-sans); font-size: 18px; font-weight: 600; line-height: 1.2; letter-spacing: -0.005em;
   color: var(--nx-paper);
   cursor: pointer;
}
.coming-soon__ok:hover { background: rgba(255, 255, 255, 0.14); }
.coming-soon__ok:focus-visible { outline: 2px dashed var(--nx-paper); outline-offset: -4px; }
.site-menu__z { position: absolute; display: block; height: auto; opacity: 0; animation: nx-zz 3s ease-out infinite both; }
.site-menu__z--1 { left: 62.2%; top: 51.3%; width: 4%;   animation-delay: 0s; }
.site-menu__z--2 { left: 65.8%; top: 42.3%; width: 5.8%; animation-delay: 0.45s; }
.site-menu__z--3 { left: 68%;   top: 33.3%; width: 5.3%; animation-delay: 0.9s; }
@keyframes nx-zz {
   0%   { opacity: 0; transform: translateY(6px); }
   14%  { opacity: 1; transform: translateY(0); }
   68%  { opacity: 1; transform: translateY(0); }
   82%  { opacity: 0; transform: translateY(-3px); }
   100% { opacity: 0; transform: translateY(-3px); }
}

@media (max-width: 768px) {
   .site-head { height: 64px; padding: 0 24px !important; }
   .nx-menu .site-head::before { clip-path: inset(0 100% 0 0); }
   .nx-menu .site-head__menu-btn { width: 48px; height: 48px; }
   .nx-menu .site-head__menu-btn .site-head__ico-close { width: 32px; height: 32px; }
   .site-head__logo { width: 67px; height: auto; }
   .site-head__menu-btn{ width: 48px; height: 48px; }
   .site-head__ico-open { width: 30px; height: 30px; }   /* 36 버튼 기준 — PC(52:34)와 같은 비율 */
   .site-head__menu-btn .site-head__ico-close { width: 14px; height: 14px; }
   .site-menu { width: 100%; padding: 68px 0 calc(28px + var(--sbn-push-bottom, 0px)); }
   .site-menu__logo { display: none; }
   .site-menu__link { padding: 22px 24px; font-size: 48px; }
   .site-menu__arrow { margin-left: 5px; }
   .coming-soon__body { min-height: 328px; }
   .coming-soon__text { font-size: 28px; }
}

/* ----------------------17. 모션 최소화 설정 존중----------------------- */

@media (prefers-reduced-motion: reduce) {
   .site-menu__arrow { transition: none; }
   .cloud img { animation: none; }
   .is-revealing .scene, .is-revealing .artwork::before { transition-duration: 1ms; }
   .reveal__title, .reveal__line { transform: none; }
   .loader, .is-revealed .clouds { transition-duration: 1ms; transition-delay: 0s; }
   .is-revealed .reveal__title, .is-revealed .reveal__line { transition-duration: 1ms; transition-delay: 0s; }
   .is-quiet .reveal { transition-duration: 1ms; }
   .is-hinted .hint, .is-hinted .peek { transition-duration: 1ms; }
   .is-hinted .hint__inner, .is-hinted .peek__inner, .is-hinted .peek__arrow, .knock__tok.is-tap { animation: none; }
   .is-popup .popup__panel, .is-popup .popup__scrim { transition-duration: 1ms; }
   .is-story .story__rock, .is-story-closing .story__rock,
   .is-story .bottle, .is-story-closing .bottle,
   .is-story .story__front, .is-story-closing .story__front { animation-duration: 1ms; }
   .is-story .story__body, .is-story-closing .story__body { transition-duration: 1ms; transition-delay: 0s; }
}

/* ---------18. 쿠키 동의 플로팅 버튼 (OneTrust, GTM 으로 주입)---------- */

#ot-sdk-btn-floating,
.ot-floating-button { opacity: 0.7 !important; transform: scale(0.6) !important; transform-origin: bottom left !important; transition: opacity 0.3s ease, transform 0.3s ease !important; }
#ot-sdk-btn-floating:hover,
#ot-sdk-btn-floating:focus,
#ot-sdk-btn-floating:focus-within,
.ot-floating-button:hover,
.ot-floating-button:focus,
.ot-floating-button:focus-within { opacity: 1 !important; transform: scale(1) !important; }

@media (max-width: 768px) {
   #ot-sdk-btn-floating:hover,
   #ot-sdk-btn-floating:focus,
   #ot-sdk-btn-floating:focus-within,
   .ot-floating-button:hover,
   .ot-floating-button:focus,
   .ot-floating-button:focus-within { transform: scale(0.6) !important; }
}

/* -----------19. 소리 켜고 끄기 (index_bak.php, audio_bak.js)----------- */

.sound { position: fixed; z-index: 4; top: calc(16px + env(safe-area-inset-top, 0px)); right: calc(16px + env(safe-area-inset-right, 0px)); display: flex; align-items: center; justify-content: center; width: 44px; height: 44px; margin: 0; padding: 0; border: 0; border-radius: 50%; background: rgba(252, 252, 252, 0.88); color: var(--c-ink); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12); cursor: pointer; -webkit-appearance: none; appearance: none; -webkit-tap-highlight-color: transparent; transition: background-color 160ms ease, transform 160ms ease; }
.sound:hover { background: var(--c-paper); }
.sound:active { transform: scale(0.94); }
.sound:focus { outline: 2px dashed var(--c-ink); outline-offset: 3px; }
.sound:focus:not(:focus-visible) { outline: none; }
.is-gate .sound { display: none; }
.sound__icon { display: block; width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.sound__body { fill: currentColor; stroke: currentColor; stroke-width: 1; }
.sound__x { display: none; }
.is-muted .sound__wave { display: none; }
.is-muted .sound__x { display: block; }
.is-muted .sound { color: rgba(43, 43, 41, 0.55); }