/* Leapinity 스트레스 해소 화면 모양
   - 위·아래 막대, 버튼, 글꼴은 lp-brand.css (Leapinity 공통)
   - 문 두 개 칸은 밝게·어둡게와 상관없이 늘 같은 색(지옥은 어둡고 붉게, 천국은 하얗고 금빛)
   - 움직임은 transform·opacity 만 써요. "움직임 줄이기" 설정이면 장식 움직임은 멈춰요
   - style-src 'self' 라서 HTML 에 style="…" 을 쓰지 않아요
   - 사이트 고유 색: 불꽃 주황 #c2410c (흰 글자 5.2:1 / 어두운 바탕 글자 #fdba74) */
:root {
  --lp-accent: #c2410c; --lp-accent-ink: #b4360a; --lp-accent-ink-dark: #fdba74; --lp-on-accent: #ffffff;
  --page-bg: #f6f1fb; --page-glow-a: rgba(255, 106, 26, .14); --page-glow-b: rgba(56, 189, 248, .18);
  --t-hell: linear-gradient(100deg, #b91c1c, #ea580c); --t-heaven: linear-gradient(100deg, #0369a1, #6d4fe0);
  --about-card: #ffffff; --about-line: #e7e1f1;
  --hell-red: #5c0a04;
  color-scheme: light;
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --page-bg: #0d0a1f; --page-glow-a: rgba(255, 90, 20, .16); --page-glow-b: rgba(120, 190, 255, .14);
  --t-hell: linear-gradient(100deg, #ff6b4a, #ffb347); --t-heaven: linear-gradient(100deg, #9ad8ff, #fff1b8);
  --about-card: #17132f; --about-line: #2c2650;
  color-scheme: dark;
} }
:root[data-theme="dark"] {
  --page-bg: #0d0a1f; --page-glow-a: rgba(255, 90, 20, .16); --page-glow-b: rgba(120, 190, 255, .14);
  --t-hell: linear-gradient(100deg, #ff6b4a, #ffb347); --t-heaven: linear-gradient(100deg, #9ad8ff, #fff1b8);
  --about-card: #17132f; --about-line: #2c2650;
  color-scheme: dark;
}

* { box-sizing: border-box; }
html { -webkit-text-size-adjust: 100%; }
body { min-height: 100vh; display: flex; flex-direction: column; font-size: 16px; line-height: 1.65; overflow-x: hidden;
  background: radial-gradient(60% 50% at 15% 30%, var(--page-glow-a), transparent 70%),
              radial-gradient(60% 50% at 85% 30%, var(--page-glow-b), transparent 70%), var(--page-bg); }
main { flex: 1; }
a { color: var(--lp-accent-ink); }
a:focus-visible, button:focus-visible { outline: 3px solid var(--lp-focus); outline-offset: 3px; }
h1, h2, h3 { letter-spacing: -0.02em; line-height: 1.3; }
.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; }
.skip { position: absolute; left: 12px; top: -60px; z-index: 100; background: var(--lp-card); color: var(--lp-ink); padding: 10px 16px; border-radius: 12px; }
.skip:focus { top: 12px; }
.sound-btn span { font-size: 17px; }

/* ---------- 큰 제목 ---------- */
.hero { text-align: center; padding-top: 40px; padding-bottom: 8px; }
.hero-pill { display: inline-block; margin: 0 0 14px; padding: 6px 14px; border-radius: 999px; font-size: 14px; font-weight: 700;
  background: var(--lp-card); color: var(--lp-soft); border: 1px solid var(--lp-line); }
.hero-title { margin: 0; font-size: clamp(34px, 7.4vw, 66px); font-weight: var(--lp-title-w); letter-spacing: var(--lp-hero-track); line-height: var(--lp-hero-lh); }
.t-hell, .t-heaven { -webkit-background-clip: text; background-clip: text; color: transparent; }
.t-hell { background-image: var(--t-hell); }
.t-heaven { background-image: var(--t-heaven); }
.hero .lead { margin: 14px auto 0; max-width: 34em; font-size: clamp(17px, 2.4vw, 21px); font-weight: var(--lp-lead-w); letter-spacing: var(--lp-lead-track); color: var(--lp-soft); }

/* ---------- 문 두 개 ---------- */
.gates { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 20px; margin-top: 28px; }
.gates-or { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; font-size: 14px; font-weight: 800;
  background: var(--lp-card); color: var(--lp-soft); border: 1px solid var(--lp-line); box-shadow: var(--lp-shadow); }
@media (max-width: 760px) {
  .gates { grid-template-columns: 1fr; gap: 14px; }
  .gates-or { justify-self: center; width: 44px; height: 44px; }
}

.gate { --sw: min(240px, 62vw); position: relative; isolation: isolate; overflow: hidden; display: flex; flex-direction: column; align-items: center;
  gap: 18px; padding: 34px 18px 26px; border-radius: 28px; text-decoration: none; cursor: pointer;
  box-shadow: 0 18px 50px rgba(20, 10, 40, .22); transition: transform .4s var(--lp-ease), box-shadow .4s; -webkit-tap-highlight-color: transparent; }
.gate:focus-visible { outline: 4px solid var(--lp-focus); outline-offset: 4px; }
.gate-bg { position: absolute; inset: 0; z-index: -2; }
.gate-hell { color: #fff1e6; }
.gate-hell .gate-bg { background: radial-gradient(70% 55% at 50% 78%, #8a1a08 0%, #3d0905 45%, #150202 85%); }
.gate-heaven { color: #18244d; }
.gate-heaven .gate-bg { background: radial-gradient(60% 45% at 50% 40%, #fffbe6 0%, rgba(255, 251, 230, 0) 70%), linear-gradient(180deg, #a9dbff 0%, #dff1ff 50%, #fffaf0 100%); }

.door-wrap { position: relative; width: var(--sw); display: block; }
.door-stage { position: relative; display: block; width: 100%; aspect-ratio: 300 / 420; z-index: 1; }
.door-frame { position: absolute; inset: 0; width: 100%; height: 100%; z-index: 3; overflow: visible; }
.door-aura { position: absolute; left: 50%; top: 55%; width: 150%; height: 120%; z-index: 0; border-radius: 50%; transform: translate(-50%, -50%) scale(.85); opacity: .45;
  transition: transform .5s var(--lp-ease), opacity .5s; }
.gate-hell .door-aura { background: radial-gradient(closest-side, rgba(255, 110, 30, .75), rgba(255, 60, 10, 0)); }
.gate-heaven .door-aura { background: radial-gradient(closest-side, rgba(255, 240, 180, .95), rgba(255, 255, 255, 0)); }
.door-hole { position: absolute; left: 16.667%; top: 19.048%; width: 66.667%; height: 80.952%; z-index: 2; overflow: hidden;
  border-radius: 50% 50% 0 0 / 29.41% 29.41% 0 0; perspective: 520px; }
.door-light { position: absolute; inset: 0; opacity: .6; transition: opacity .5s; }
.gate-hell .door-light { background: radial-gradient(circle at 50% 70%, #fff4c4 0%, #ffb02e 22%, #ff4d0d 52%, #5a0802 100%); }
.gate-heaven .door-light { background: radial-gradient(circle at 50% 60%, #ffffff 0%, #fffbe8 30%, #ffe38f 70%, #f0be45 100%); }
.door-rays { position: absolute; left: -50%; top: -30%; width: 200%; height: 200%; opacity: 0; transition: opacity .5s;
  animation: spin 18s linear infinite; }
.gate-hell .door-rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 230, 160, .55) 0deg 6deg, rgba(255, 230, 160, 0) 6deg 24deg); }
.gate-heaven .door-rays { background: repeating-conic-gradient(from 0deg at 50% 50%, rgba(255, 255, 255, .9) 0deg 6deg, rgba(255, 255, 255, 0) 6deg 24deg); }
.leaf { position: absolute; top: 0; bottom: 0; width: 50%; transition: transform .5s var(--lp-ease); backface-visibility: hidden; }
.leaf-l { left: 0; transform-origin: 0 50%; }
.leaf-r { right: 0; transform-origin: 100% 50%; }
.leaf-svg { display: block; width: 100%; height: 100%; }
.seam { opacity: .8; }

/* 문 위에 손을 올리거나(키보드로 고르면) 살짝 열리고 빛이 새어 나와요 */
@media (hover: hover) { .gate:hover { transform: translateY(-4px); box-shadow: 0 26px 60px rgba(20, 10, 40, .3); } }
.gate:hover .leaf-l, .gate:focus-visible .leaf-l { transform: rotateY(32deg); }
.gate:hover .leaf-r, .gate:focus-visible .leaf-r { transform: rotateY(-32deg); }
.gate:hover .door-light, .gate:focus-visible .door-light { opacity: 1; }
.gate:hover .door-rays, .gate:focus-visible .door-rays { opacity: .7; }
.gate:hover .door-aura, .gate:focus-visible .door-aura { transform: translate(-50%, -50%) scale(1.08); opacity: .9; }
/* 눌렀을 때: 활짝 */
.gate.is-open .leaf { transition-duration: .45s; }
.gate.is-open .leaf-l { transform: rotateY(84deg); }
.gate.is-open .leaf-r { transform: rotateY(-84deg); }
.gate.is-open .door-light, .gate.is-open .door-rays { opacity: 1; }
.gate.is-open .door-aura { transform: translate(-50%, -50%) scale(1.5); opacity: 1; }

/* 글자 */
.gate-label { position: relative; z-index: 2; display: flex; flex-direction: column; align-items: center; gap: 6px; text-align: center; }
.gate-name { font-size: clamp(28px, 4vw, 34px); font-weight: 800; letter-spacing: -.03em; line-height: 1.2; }
.gate-sub { font-size: 16px; font-weight: 600; }
.gate-hell .gate-sub { color: #ffd2b0; }
.gate-heaven .gate-sub { color: #2c3a6b; }
.gate-go { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; margin-top: 8px; padding: 0 22px; border-radius: 999px; font-size: 15px; font-weight: 800; }
.gate-hell .gate-go { background: #c2410c; color: #fff; box-shadow: 0 0 24px rgba(255, 106, 26, .45); }
.gate-heaven .gate-go { background: #18244d; color: #fff; box-shadow: 0 0 24px rgba(255, 220, 120, .6); }

/* 🔥 지옥: 횃불·불꽃·불티 */
.torch { position: absolute; bottom: 3%; width: 14px; height: 74px; z-index: 4; }
.torch::before { content: ''; position: absolute; left: 3px; right: 3px; bottom: 0; height: 52px; border-radius: 3px; background: linear-gradient(90deg, #2a0a05, #5a2414, #2a0a05); }
.torch::after { content: ''; position: absolute; left: -4px; right: -4px; bottom: 48px; height: 9px; border-radius: 3px; background: #3a1208; }
.torch-l { left: -10%; }
.torch-r { right: -10%; }
.flame { position: absolute; left: 50%; bottom: 52px; width: 26px; height: 42px; margin-left: -13px; transform-origin: 50% 100%;
  border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 78%, #fff8cc 0%, #ffcf4a 26%, #ff6a12 58%, rgba(255, 60, 0, 0) 72%);
  animation: flicker .42s ease-in-out infinite alternate; }
.flame.f2 { width: 16px; height: 28px; margin-left: -8px; bottom: 54px; animation-duration: .31s; animation-delay: -.15s; opacity: .9; }
.ground { position: absolute; left: -22%; right: -22%; bottom: -4px; z-index: 4; display: flex; justify-content: space-around; align-items: flex-end; pointer-events: none; }
.ground-hell { height: 46px; background: radial-gradient(60% 100% at 50% 100%, rgba(255, 96, 20, .75), rgba(255, 60, 10, 0) 70%); }
.lick { width: 18px; height: 30px; transform-origin: 50% 100%; border-radius: 50% 50% 50% 50% / 62% 62% 38% 38%;
  background: radial-gradient(ellipse at 50% 80%, #ffe08a 0%, #ff7a1a 45%, rgba(255, 60, 0, 0) 72%); animation: flicker .5s ease-in-out infinite alternate; }
.lick:nth-child(2n) { height: 22px; animation-duration: .37s; animation-delay: -.2s; }
.lick:nth-child(3n) { height: 36px; animation-duration: .45s; animation-delay: -.1s; }
.fx { position: absolute; inset: -6% -14%; z-index: 5; pointer-events: none; overflow: visible; }
.ember { position: absolute; bottom: 8%; width: 5px; height: 5px; border-radius: 50%; background: #ffc061; box-shadow: 0 0 8px 2px rgba(255, 110, 20, .8);
  opacity: 0; animation: rise 3.4s linear infinite; }
.crack, .rune { animation: pulse 1.8s ease-in-out infinite alternate; }

/* ☁️ 천국: 구름·반짝이 */
.clouds { position: absolute; inset: 0; z-index: -1; pointer-events: none; }
.cloud { position: absolute; width: 120px; height: 34px; border-radius: 999px; background: #fff; opacity: .9; animation: drift 11s ease-in-out infinite alternate; }
.cloud::before, .cloud::after { content: ''; position: absolute; border-radius: 50%; background: inherit; }
.cloud::before { width: 48px; height: 48px; left: 16px; top: -24px; }
.cloud::after { width: 62px; height: 62px; left: 46px; top: -36px; }
.c1 { left: 4%; top: 12%; }
.c2 { right: 2%; top: 30%; transform: scale(.8); animation-duration: 14s; animation-delay: -4s; }
.c3 { left: -4%; top: 52%; transform: scale(.7); animation-duration: 12s; animation-delay: -7s; opacity: .75; }
.c4 { right: 8%; top: 6%; transform: scale(.55); animation-duration: 9s; animation-delay: -2s; opacity: .8; }
.ground-heaven { height: 54px; bottom: -14px; }
.puff { width: 74px; height: 54px; margin: 0 -18px; border-radius: 50%; background: #fff; box-shadow: 0 -2px 0 rgba(255, 236, 170, .6) inset; animation: bob 4.5s ease-in-out infinite alternate; }
.puff:nth-child(2n) { height: 44px; animation-delay: -1.5s; }
.puff:nth-child(3n) { height: 62px; animation-delay: -3s; }
.spark { position: absolute; width: 14px; height: 14px; opacity: 0; background: #ffd65a;
  clip-path: polygon(50% 0, 61% 39%, 100% 50%, 61% 61%, 50% 100%, 39% 61%, 0 50%, 39% 39%); animation: twinkle 2.6s ease-in-out infinite; }
.halo { transform-box: fill-box; transform-origin: 50% 50%; animation: bob 3s ease-in-out infinite alternate; }

@keyframes spin { to { transform: rotate(360deg); } }
@keyframes flicker { 0% { transform: scale(1, 1) translateX(0); } 50% { transform: scale(.92, 1.1) translateX(-1px); } 100% { transform: scale(1.06, .9) translateX(1px); } }
@keyframes rise { 0% { transform: translate(0, 0); opacity: 0; } 12% { opacity: 1; } 100% { transform: translate(var(--dx, 12px), -280px); opacity: 0; } }
@keyframes pulse { from { opacity: .45; } to { opacity: 1; } }
@keyframes drift { from { translate: -24px 0; } to { translate: 24px 0; } }
@keyframes bob { from { transform: translateY(0); } to { transform: translateY(-6px); } }
@keyframes twinkle { 0%, 100% { transform: scale(.2) rotate(0deg); opacity: 0; } 50% { transform: scale(1) rotate(45deg); opacity: 1; } }

/* ---------- 설명 ---------- */
.about { margin-top: 48px; }
.about h2 { margin: 0 0 14px; font-size: 22px; text-align: center; }
.about-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .about-grid { grid-template-columns: 1fr; } }
.about-card { padding: 18px 20px; border-radius: 20px; background: var(--about-card); border: 1px solid var(--about-line); }
.about-card h3 { margin: 0 0 6px; font-size: 18px; }
.about-card p { margin: 0; color: var(--lp-soft); }
.about-hell { border-top: 4px solid #c2410c; }
.about-heaven { border-top: 4px solid #38bdf8; }
.about-note { margin: 16px 0 0; text-align: center; color: var(--lp-mute); font-size: 15px; }

/* ---------- 포탈 덮개 ---------- */
.portal-fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 100; pointer-events: none; opacity: 0; }
.portal-fx.is-on { opacity: 1; }
body.portal-on .portal-fx, body.portal-on .portal-veil { pointer-events: auto; }
.portal-veil { position: fixed; inset: 0; z-index: 99; pointer-events: none; opacity: 0; transition: opacity .3s ease; }
.portal-veil.is-hell, .arrive-hell .portal-veil { background: var(--hell-red); }
.portal-veil.is-heaven, .arrive-heaven .portal-veil { background: #ffffff; }
.portal-veil.is-on { opacity: 1; }
.arrive-hell .portal-veil, .arrive-heaven .portal-veil { opacity: 1; transition: none; animation: veil-safety .3s 3s forwards; }
.portal-veil.is-quick { transition: none; }
@keyframes veil-safety { to { opacity: 0; } }

/* ---------- 다른 화면 (개인정보·404) ---------- */
.page-head { padding-top: 40px; }
.page-head h1 { margin: 0 0 8px; font-size: clamp(28px, 5vw, 40px); }
.page-head .lead { color: var(--lp-soft); font-weight: 600; }
.legal { max-width: 820px; padding-bottom: 24px; }
.legal h2 { font-size: 19px; margin: 28px 0 6px; }
.legal p { color: var(--lp-soft); margin: 0 0 10px; }
.muted { color: var(--lp-mute) !important; font-size: 14px; }
.nf { text-align: center; padding-bottom: 40px; }
.nf-ico { margin: 10px 0 0; }
.btn-row { display: flex; justify-content: center; flex-wrap: wrap; gap: 10px; margin-top: 18px; }

/* ---------- 움직임 줄이기 ---------- */
@media (prefers-reduced-motion: reduce) {
  .flame, .lick, .ember, .crack, .rune, .cloud, .puff, .spark, .halo, .door-rays { animation: none !important; }
  .ember { opacity: 0; }
  .spark { opacity: .8; transform: scale(.7); }
  .gate, .leaf, .door-aura, .door-light, .door-rays { transition-duration: .01s !important; }
  .gate:hover { transform: none; }
  .arrive-hell .portal-veil, .arrive-heaven .portal-veil { animation-delay: 1.5s; }
}

/* 불티·반짝이 자리 (scripts 로 만든 값) */
.ember:nth-child(1) { left: 41%; animation-delay: -0.53s; animation-duration: 2.89s; --dx: 15px; }
.ember:nth-child(2) { left: 78%; animation-delay: -1.06s; animation-duration: 3.18s; --dx: -22px; }
.ember:nth-child(3) { left: 23%; animation-delay: -1.59s; animation-duration: 3.47s; --dx: 29px; }
.ember:nth-child(4) { left: 60%; animation-delay: -2.12s; animation-duration: 3.76s; --dx: -36px; }
.ember:nth-child(5) { left: 5%; animation-delay: -2.65s; animation-duration: 4.05s; --dx: 13px; }
.ember:nth-child(6) { left: 42%; animation-delay: -3.18s; animation-duration: 2.74s; --dx: -20px; }
.ember:nth-child(7) { left: 79%; animation-delay: -0.31s; animation-duration: 3.03s; --dx: 27px; }
.ember:nth-child(8) { left: 24%; animation-delay: -0.84s; animation-duration: 3.32s; --dx: -34px; }
.ember:nth-child(9) { left: 61%; animation-delay: -1.37s; animation-duration: 3.61s; --dx: 11px; }
.ember:nth-child(10) { left: 6%; animation-delay: -1.9s; animation-duration: 3.90s; --dx: -18px; }
.ember:nth-child(11) { left: 43%; animation-delay: -2.43s; animation-duration: 4.19s; --dx: 25px; }
.ember:nth-child(12) { left: 80%; animation-delay: -2.96s; animation-duration: 2.88s; --dx: -32px; }
.ember:nth-child(13) { left: 25%; animation-delay: -0.09s; animation-duration: 3.17s; --dx: 9px; }
.ember:nth-child(14) { left: 62%; animation-delay: -0.62s; animation-duration: 3.46s; --dx: -16px; }
.spark:nth-child(1) { left: 8%; top: 14%; animation-delay: -0.37s; }
.spark:nth-child(2) { left: 86%; top: 10%; animation-delay: -0.74s; }
.spark:nth-child(3) { left: 20%; top: 40%; animation-delay: -1.11s; width: 9px; height: 9px; }
.spark:nth-child(4) { left: 78%; top: 46%; animation-delay: -1.48s; }
.spark:nth-child(5) { left: 50%; top: 4%; animation-delay: -1.85s; }
.spark:nth-child(6) { left: 12%; top: 70%; animation-delay: -2.22s; width: 9px; height: 9px; }
.spark:nth-child(7) { left: 90%; top: 72%; animation-delay: -2.59s; }
.spark:nth-child(8) { left: 32%; top: 18%; animation-delay: -0.36s; }
.spark:nth-child(9) { left: 66%; top: 24%; animation-delay: -0.73s; width: 9px; height: 9px; }
.spark:nth-child(10) { left: 40%; top: 58%; animation-delay: -1.10s; }
.spark:nth-child(11) { left: 60%; top: 80%; animation-delay: -1.47s; }
.spark:nth-child(12) { left: 4%; top: 36%; animation-delay: -1.84s; width: 9px; height: 9px; }
.lp-foot-links a { min-width: 44px; justify-content: center; }