/* ════════════════════════════════════════════

   X같은 성좌 — 스타일

   인트로(화려함) → 홈(섹션마다 다른 고정 레이아웃) → 상세(조용함)

   ════════════════════════════════════════════ */



:root {

  --bg: #000;

  --line: rgba(255, 255, 255, .1);

  --text: #f5f5f7;

  --text-2: #d2d2d7;

  --muted: #86868b;

  --muted-2: #a8a8b3;

  --gold: #e2c27d;

  --gold-2: #f6e2b0;

  --crimson: #e0364d;

  --font: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", "Segoe UI", sans-serif;

  --mono: "JetBrains Mono", ui-monospace, SFMono-Regular, Consolas, monospace;

  --serif: "Noto Serif KR", "Nanum Myeongjo", "Batang", serif;

  --ease: cubic-bezier(.2, .7, .2, 1);

  --wrap: 1120px;

}



*, *::before, *::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; scroll-padding-top: 60px; scroll-behavior: smooth; }

html, body { margin: 0; background: var(--bg); }

body {

  color: var(--text); font-family: var(--font); font-size: 17px; line-height: 1.5; letter-spacing: -.012em;

  -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale;

  word-break: keep-all; overflow-wrap: break-word; overflow-x: hidden;

}

body.is-intro { overflow: hidden; }

h1, h2, h3, h4, p, dl, dd, ol, ul, blockquote, figure { margin: 0; padding: 0; }

a { color: inherit; text-decoration: none; }

button { font: inherit; color: inherit; }

img, svg { display: block; }

.mono { font-family: var(--mono); }

::selection { background: rgba(226, 194, 125, .35); }

.wrap { width: min(var(--wrap), calc(100% - 48px)); margin: 0 auto; }

@media (max-width: 734px) { .wrap { width: calc(100% - 32px); } }



/* 사진: 있으면 위에 덮고, 없으면 아래 임시 그림이 보인다 */

.photo { opacity: 0; transition: opacity .6s; }

.photo.is-loaded { opacity: 1; }



/* ════════════ 인트로 — 이야기 → 게이트 → 입장 (번쩍임 없이, 언제든 건너뛰기) ════════════ */

.intro { position: fixed; inset: 0; z-index: 100; background: #000; overflow: hidden; transition: opacity 1.8s ease; }

.intro.is-done { opacity: 0; pointer-events: none; }

.intro-canvas { position: absolute; inset: 0; width: 100%; height: 100%; }

.intro-vignette { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(120% 90% at 50% 45%, transparent 35%, rgba(0, 0, 0, .82) 100%); }

.intro.is-story { cursor: pointer; }



/* 위쪽: 작은 로고 · 사운드 */

.intro-top { position: absolute; left: 0; right: 0; top: 0; z-index: 3; display: flex; justify-content: center; align-items: center; padding: 26px 32px; opacity: 0; transition: opacity 1.4s ease; }

.intro.is-story .intro-top, .intro.is-gate .intro-top { opacity: 1; }

.intro.is-enter .intro-top { opacity: 0; }

.intro-brand { display: inline-flex; align-items: center; gap: 10px; font-size: 12px; font-weight: 600; letter-spacing: .38em; padding-left: .38em; color: rgba(255, 255, 255, .7); }

.intro-brand .logo-mark { width: 20px; height: 20px; color: var(--gold); }

.intro-top .audio-btn { position: absolute; right: 28px; }



/* 사운드 버튼 (인트로 · 메뉴 공용) */

.audio-btn { display: inline-flex; align-items: center; gap: 8px; background: none; border: 0; cursor: pointer; padding: 4px; font-size: 10px; letter-spacing: .2em; color: rgba(255, 255, 255, .7); }

.audio-btn:hover { color: #fff; }

.bars { display: inline-flex; align-items: center; gap: 2px; height: 12px; }

.bars i { width: 2px; height: 3px; background: currentColor; border-radius: 1px; }

.audio-btn[aria-pressed="true"] .bars i { animation: eq 1.2s ease-in-out infinite; }

.audio-btn[aria-pressed="true"] .bars i:nth-child(2) { animation-delay: -.3s; }

.audio-btn[aria-pressed="true"] .bars i:nth-child(3) { animation-delay: -.6s; }

.audio-btn[aria-pressed="true"] .bars i:nth-child(4) { animation-delay: -.15s; }

@keyframes eq { 0%, 100% { height: 3px; } 50% { height: 12px; } }



/* 0. 불러오는 중 */

.intro-loader { position: absolute; left: 50%; top: 46%; transform: translate(-50%, -50%); display: grid; place-items: center; transition: opacity 1s ease; }

.intro:not(.is-loading) .intro-loader { opacity: 0; pointer-events: none; }

.load-ring { width: 120px; height: 120px; transform: rotate(-90deg); }

.load-ring circle { fill: none; stroke-width: 1; }

.load-ring .track { stroke: rgba(255, 255, 255, .1); }

.load-ring .fill { stroke: rgba(226, 194, 125, .9); stroke-dasharray: 1; stroke-dashoffset: 1; transition: stroke-dashoffset .3s linear; }

.load-mark { position: absolute; width: 42px; height: 42px; color: var(--gold); opacity: .9; }

.load-mark .logo-mark, .start-mark .logo-mark { width: 100%; height: 100%; }

.load-pct { position: absolute; top: calc(100% + 18px); font-size: 10px; letter-spacing: .24em; color: rgba(255, 255, 255, .4); font-variant-numeric: tabular-nums; }



/* 1. 시작 화면 */

.intro-start { position: absolute; inset: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; padding: 0 20px; opacity: 0; pointer-events: none; transition: opacity 1.4s ease; }

.intro.is-start .intro-start { opacity: 1; pointer-events: auto; }

.start-mark { width: 64px; height: 64px; color: var(--gold); filter: drop-shadow(0 0 18px rgba(226, 194, 125, .35)); }

.start-word { margin-top: 22px; font-size: clamp(22px, 2.6vw, 32px); font-weight: 700; letter-spacing: .44em; padding-left: .44em; }

.start-sub { margin-top: 12px; font-size: 10px; letter-spacing: .42em; padding-left: .42em; color: rgba(255, 255, 255, .5); }

.start-lead { margin-top: 30px; font-size: 15px; line-height: 1.7; color: rgba(255, 255, 255, .62); }

.intro-cta {

  position: relative; margin-top: 28px; cursor: pointer; padding: 12px 36px; border-radius: 980px;

  border: 1px solid rgba(255, 255, 255, .45); background: rgba(255, 255, 255, .05); color: #fff;

  font-size: 15px; font-weight: 600; letter-spacing: .12em; transition: background .4s, border-color .4s, box-shadow .4s;

}

.intro-cta:hover, .intro-cta:focus-visible { background: rgba(255, 255, 255, .12); border-color: #fff; box-shadow: 0 0 26px rgba(170, 150, 255, .35); outline: none; }

.intro-phones { margin-top: 18px; display: flex; align-items: center; gap: 8px; font-size: 10px; letter-spacing: .14em; color: rgba(255, 255, 255, .4); }

.intro-phones svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 1.4; }



/* 2. 이야기 — 한 장면씩 글이 천천히 떠오른다 */

.intro-story { position: absolute; left: 0; right: 0; top: 50%; transform: translateY(-50%); z-index: 2; text-align: center; padding: 0 24px; pointer-events: none; }

.st-kicker, .st-line { opacity: 0; transform: translateY(10px); filter: blur(4px); transition: opacity 1.3s ease, transform 1.6s var(--ease), filter 1.3s ease; }

.st-line { transition-delay: .35s; }

.intro-story.is-show .st-kicker, .intro-story.is-show .st-line { opacity: 1; transform: none; filter: none; }

.st-kicker { font-size: 11px; letter-spacing: .34em; color: rgba(226, 194, 125, .9); }

.st-line { margin-top: 18px; font-size: clamp(20px, 2.6vw, 32px); font-weight: 600; line-height: 1.6; letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }

.st-hint { position: absolute; left: 0; right: 0; bottom: 64px; z-index: 2; text-align: center; font-size: 10px; letter-spacing: .2em; color: rgba(255, 255, 255, .32); opacity: 0; transition: opacity 1s ease; pointer-events: none; }

.intro.is-story .st-hint { opacity: 1; }

.story-bar { position: absolute; left: 50%; bottom: 44px; z-index: 2; width: min(240px, 50vw); height: 1px; transform: translateX(-50%); background: rgba(255, 255, 255, .12); opacity: 0; transition: opacity 1s ease; }

.story-bar i { display: block; height: 100%; width: 0; background: rgba(226, 194, 125, .8); transition: width .6s linear; }

.intro.is-story .story-bar { opacity: 1; }



/* 3. 게이트 앞 문구 · 입장 */

.intro-copy { position: absolute; left: 0; right: 0; bottom: 9vh; z-index: 2; display: flex; flex-direction: column; align-items: center; text-align: center; padding: 0 20px; opacity: 0; transform: translateY(10px); transition: opacity 1.4s ease, transform 1.4s var(--ease); pointer-events: none; }

.intro.is-ready .intro-copy { opacity: 1; transform: none; pointer-events: auto; }

.intro.is-enter .intro-copy { opacity: 0; transition-duration: .7s; pointer-events: none; }

.intro-kicker { font-size: 10px; letter-spacing: .32em; color: rgba(226, 194, 125, .85); }

.intro-line { margin-top: 12px; font-size: clamp(20px, 2.4vw, 28px); font-weight: 600; letter-spacing: -.01em; text-shadow: 0 2px 20px rgba(0, 0, 0, .8); }

.intro-sub { margin-top: 6px; font-size: 14px; color: rgba(255, 255, 255, .55); }



/* 4. 입장 — 게이트 안의 어둠으로 들어간다 (흰 빛 없음) */

.intro-dark { position: absolute; inset: 0; z-index: 4; pointer-events: none; background: #05030c; opacity: 0; transition: opacity 1.1s ease; }

.intro.is-fade .intro-dark { opacity: 1; }



/* 건너뛰기 — 처음부터 끝까지 항상 */

.intro-skip {

  position: absolute; right: 24px; bottom: 22px; z-index: 5; cursor: pointer;

  display: inline-flex; align-items: center; gap: 6px; padding: 9px 16px; border-radius: 980px;

  border: 1px solid rgba(255, 255, 255, .25); background: rgba(0, 0, 0, .35); color: rgba(255, 255, 255, .78);

  font-size: 13px; font-weight: 600; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); transition: background .3s, color .3s, border-color .3s;

}

.intro-skip:hover, .intro-skip:focus-visible { background: rgba(255, 255, 255, .12); color: #fff; border-color: rgba(255, 255, 255, .6); outline: none; }

.intro-skip span { font-size: 16px; line-height: 1; }

.intro.is-enter .intro-skip { opacity: 0; pointer-events: none; }

@media (max-width: 734px) {

  .intro-top { padding: 18px 16px; }

  .intro-top .audio-btn { right: 12px; }

  .st-hint { bottom: 72px; }

  .intro-skip { right: 16px; bottom: 16px; }

}




/* Standalone opening: focus, safe areas and small landscape screens. */
.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}
.intro-fallback{position:fixed;inset:0;z-index:200;display:grid;place-content:center;text-align:center;gap:24px;background:#05030c}
.intro-fallback a{padding:16px;border:1px solid #e2c27d}
.intro-top{padding-top:max(26px,env(safe-area-inset-top));}
.intro-skip{bottom:max(22px,env(safe-area-inset-bottom));}
.intro-copy{bottom:max(9vh,90px);}
@media(max-width:480px){
 .intro-top{justify-content:flex-start;padding:18px 16px;}
 .intro-brand{font-size:10px;letter-spacing:.18em;}
 .intro-top .audio-btn{right:16px;}
 .intro-copy{bottom:max(100px,12vh);}
 .intro-skip{bottom:max(18px,env(safe-area-inset-bottom));}
}
@media(max-height:500px) and (min-aspect-ratio:4/3){
 .start-mark{width:38px;height:38px}.start-word{margin-top:10px;font-size:22px}
 .start-sub{margin-top:6px}.start-lead{margin-top:12px;font-size:12px}
 .intro-cta{margin-top:14px;padding:9px 28px}.intro-phones{margin-top:10px}
 .intro-copy{left:56%;right:3%;top:34%;bottom:auto;padding:0 16px}
 .intro-kicker{font-size:9px}.intro-line{font-size:22px}
}
@media(prefers-reduced-motion:reduce){
 *,*::before,*::after{animation:none!important;transition:none!important;scroll-behavior:auto!important}
}

/* v4.8 — only the gate and its arrival controls. */
.gate-scene{position:absolute;inset:0;width:100%;height:100%;z-index:1;pointer-events:none;opacity:0}
.gate-scene-fallback{object-fit:contain;transform-origin:51.5% 40%;background:#000}
.intro.is-gate .intro-vignette,.intro.is-enter .intro-vignette{z-index:1;background:linear-gradient(0deg,#000 0%,rgba(0,0,0,.58) 16%,transparent 38%)}
.intro:is(.is-gate,.is-enter) .intro-copy{bottom:max(8vh,76px);text-shadow:0 2px 18px #000}
.intro:is(.is-gate,.is-enter) .intro-line{font-family:var(--serif);font-size:clamp(24px,2.8vw,36px);font-weight:600;letter-spacing:.025em}
.intro:is(.is-gate,.is-enter) .intro-kicker{color:#b8d1e4;font-size:9px;letter-spacing:.42em}
.intro:is(.is-gate,.is-enter) .intro-sub{margin-top:10px;color:#b2bcc8}
.intro:is(.is-gate,.is-enter) #enterBtn{margin-top:22px;min-width:184px;padding:14px 36px;border:1px solid rgba(194,216,241,.6);border-radius:2px;background:linear-gradient(115deg,rgba(127,163,200,.18),rgba(7,12,20,.55));box-shadow:inset 0 0 18px #b7d6ff08,0 0 28px #94bfff12;letter-spacing:.15em;transition:background .3s,border-color .3s,box-shadow .3s}
.intro:is(.is-gate,.is-enter) #enterBtn:hover,.intro:is(.is-gate,.is-enter) #enterBtn:focus-visible{background:rgba(130,173,216,.23);border-color:#e8f5ff;box-shadow:0 0 28px #8fbfff36;outline:2px solid #d1e6ff;outline-offset:5px}
@media(max-width:600px){.intro:is(.is-gate,.is-enter) .intro-copy{bottom:max(105px,12vh)}.intro:is(.is-gate,.is-enter) .intro-line{font-size:25px}.intro:is(.is-gate,.is-enter) .intro-sub{font-size:12px}}
@media(max-height:500px) and (min-aspect-ratio:4/3){.intro:is(.is-gate,.is-enter) .intro-copy{left:55%;right:2%;top:29%;bottom:auto}.intro:is(.is-gate,.is-enter) .intro-line{font-size:24px}.intro:is(.is-gate,.is-enter) #enterBtn{margin-top:18px;padding:11px 26px}}