/* 다뿌서버 위키 — 디자인
   어두운 보라 밤하늘 + 주황 네온. 유리 같은 반투명 판과 얇은 선으로 정리한 게임 사이트 톤. */
:root {
  --bg: #0B0714;
  --bg2: #120B22;
  --paper: rgba(255,255,255,.035);
  --paper-solid: #16102A;
  --ink: #F2EEFA;
  --soft: #9B92B3;
  --mute: #6B6383;
  --line: rgba(255,255,255,.08);
  --line2: rgba(255,255,255,.14);
  --accent: #FF8A3D;          /* 주황 네온 */
  --accent2: #FFB36B;
  --violet: #9D7BFF;
  --pink: #FF6FAE;
  --green: #5EE39A;
  --code: rgba(255,255,255,.06);
  --display: 'Bebas Neue', 'Noto Sans KR', sans-serif;
  --title: 'Black Han Sans', 'Noto Sans KR', sans-serif;
  --font: 'Noto Sans KR', 'Pretendard', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --mono: 'D2Coding', 'JetBrains Mono', Consolas, monospace;
  --top-h: 64px;
  --r: 14px;
  --blur: blur(8px);
}
:root[data-theme="light"] {
  --bg: #F3F1F8; --bg2: #FFFFFF; --paper: rgba(255,255,255,.75); --paper-solid: #FFFFFF; --ink: #1B1530; --soft: #5E5677; --mute: #8A829F;
  --line: rgba(20,10,40,.08); --line2: rgba(20,10,40,.16); --accent: #E86A17; --accent2: #C85606; --violet: #6D47E8; --code: rgba(20,10,40,.05);
}

* { box-sizing: border-box; }
[hidden] { display: none !important; }
html { scroll-padding-top: calc(var(--top-h) + 20px); scrollbar-color: #3A2E5A var(--bg); }
html, body { overflow-x: clip; }
body {
  margin: 0; background: var(--bg); color: var(--ink); font-family: var(--font); font-size: 16px; line-height: 1.75;
  word-break: keep-all; overflow-wrap: break-word; -webkit-font-smoothing: antialiased;
}
a { color: var(--accent2); text-decoration: none; }
:focus-visible { outline: 2px solid var(--accent); outline-offset: 3px; border-radius: 4px; }
::selection { background: rgba(255,138,61,.35); }
.skip { position: absolute; left: -999px; }
.skip:focus { left: 8px; top: 8px; z-index: 50; background: var(--paper-solid); padding: 8px 12px; }

/* ---------- 배경 ---------- */
.sky { position: fixed; inset: 0; z-index: -1; overflow: hidden; pointer-events: none; background: radial-gradient(ellipse 90% 60% at 50% -10%, #241544 0%, var(--bg) 60%); }
.glow { position: absolute; border-radius: 50%; opacity: .5; will-change: transform; transform: translateZ(0); }
.g1 { width: 60vw; height: 60vw; right: -18vw; top: -24vw; background: radial-gradient(circle, rgba(106,61,194,.85) 0%, rgba(106,61,194,.35) 30%, rgba(106,61,194,.1) 52%, transparent 70%); }
.g2 { width: 50vw; height: 50vw; left: -20vw; bottom: -22vw; background: radial-gradient(circle, rgba(180,71,26,.85) 0%, rgba(180,71,26,.3) 32%, rgba(180,71,26,.08) 54%, transparent 70%); opacity: .35; }
.grid {
  position: absolute; inset: 0; opacity: .5;
  background-image: linear-gradient(var(--line) 1px, transparent 1px), linear-gradient(90deg, var(--line) 1px, transparent 1px);
  background-size: 56px 56px; -webkit-mask: radial-gradient(ellipse 70% 50% at 50% 0, #000, transparent); mask: radial-gradient(ellipse 70% 50% at 50% 0, #000, transparent);
}
:root[data-theme="light"] .sky { background: radial-gradient(ellipse 90% 60% at 50% -10%, #E9E2FA 0%, var(--bg) 60%); }
:root[data-theme="light"] .glow { opacity: .35; }

/* ---------- 맨 위 바 ---------- */
.top {
  position: sticky; top: 0; z-index: 20; height: var(--top-h); display: flex; align-items: center; gap: 10px; padding: 0 22px;
  background: color-mix(in srgb, var(--bg) 72%, transparent); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur);
  border-bottom: 1px solid var(--line);
}
.top::after { content: ""; position: absolute; left: 0; right: 0; bottom: -1px; height: 1px; background: linear-gradient(90deg, transparent, var(--accent) 30%, var(--violet) 70%, transparent); opacity: .7; }
.brand { display: flex; align-items: center; gap: 10px; font-weight: 900; font-size: 1.15rem; letter-spacing: -.02em; color: var(--ink); white-space: nowrap; margin-right: 8px; }
.brand::before { content: ""; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 12px var(--accent); }

.icon-btn {
  display: grid; place-items: center; width: 40px; height: 40px; flex: none; padding: 0; border: 1px solid var(--line2); border-radius: 10px; cursor: pointer;
  background: var(--paper); color: var(--soft); transition: color .15s, border-color .15s, background .15s, transform .1s;
}
.icon-btn svg { width: 20px; height: 20px; }
.icon-btn:hover { color: var(--ink); border-color: var(--accent); background: rgba(255,138,61,.1); }
.icon-btn:active { transform: scale(.94); }
#menuBtn { display: none; }
#fxBtn[aria-pressed="false"] { color: var(--mute); }
#fxBtn[aria-pressed="false"] svg { transform: rotate(180deg); }

.topnav { display: flex; gap: 2px; margin-left: 6px; }
.topnav a { padding: 8px 10px; white-space: nowrap; border-radius: 8px; font-size: .88rem; font-weight: 600; color: var(--soft); transition: color .15s, background .15s; }
.topnav a:hover { color: var(--ink); background: var(--paper); }
.topnav a[aria-current="page"] { color: var(--accent2); }
.is-home .top { background: transparent; border-bottom-color: transparent; backdrop-filter: none; -webkit-backdrop-filter: none; }
.is-home .top::after { opacity: 0; }
.is-home .top.scrolled { background: color-mix(in srgb, var(--bg) 72%, transparent); border-bottom-color: var(--line); backdrop-filter: var(--blur); -webkit-backdrop-filter: var(--blur); }
.is-home .top.scrolled::after { opacity: .7; }
.search { position: relative; flex: 1; max-width: 300px; margin-left: auto; }
.search input {
  width: 100%; height: 40px; padding: 0 44px 0 40px; border: 1px solid var(--line2); border-radius: 10px;
  background: var(--paper); color: var(--ink); font: inherit; font-size: .92rem; transition: border-color .15s, box-shadow .15s, background .15s;
}
.search input::placeholder { color: var(--mute); }
.search input:hover { border-color: rgba(255,255,255,.25); }
.search input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,61,.18); background: var(--paper-solid); }
.search-icon { position: absolute; left: 12px; top: 10px; width: 20px; height: 20px; color: var(--mute); pointer-events: none; }
.search:focus-within .search-icon { color: var(--accent); }
.search::after {
  content: "/"; position: absolute; right: 10px; top: 10px; width: 20px; height: 20px; display: grid; place-items: center;
  font: 600 .72rem var(--mono); color: var(--mute); border: 1px solid var(--line2); border-radius: 5px; pointer-events: none;
}
.search:focus-within::after { display: none; }
#results {
  position: absolute; top: 48px; left: 0; right: 0; max-height: 70vh; overflow: auto; padding: 6px;
  background: var(--paper-solid); border: 1px solid var(--line2); border-radius: 12px; box-shadow: 0 20px 50px rgba(0,0,0,.5);
}
#results a { display: block; padding: 10px 12px; border-radius: 8px; color: var(--ink); }
#results a:hover, #results a:focus { background: rgba(255,138,61,.12); }
#results strong { display: block; font-size: .95rem; color: var(--accent2); }
#results span { font-size: .82rem; color: var(--soft); }
#results mark { background: rgba(255,138,61,.3); color: var(--ink); border-radius: 3px; padding: 0 2px; }
.no-hit { margin: 0; padding: 12px; font-size: .88rem; color: var(--soft); }


/* ---------- 틀 ---------- */
.layout { display: grid; grid-template-columns: 236px minmax(0, 1fr) 210px; gap: 36px; max-width: 1340px; margin: 0 auto; padding: 32px 24px 90px; align-items: start; }
#side, #toc { position: sticky; top: calc(var(--top-h) + 32px); max-height: calc(100vh - var(--top-h) - 64px); overflow: auto; }
#side ul { list-style: none; margin: 0 0 6px; padding: 0; }
.side-group { margin: 22px 0 6px; padding: 0 12px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--mute); }
.side-link { display: flex; align-items: center; gap: 10px; padding: 8px 12px; border-radius: 9px; color: var(--soft); font-size: .93rem; font-weight: 500; transition: background .15s, color .15s; }
.side-link:hover { background: var(--paper); color: var(--ink); }
.side-link[aria-current="page"] { background: linear-gradient(90deg, rgba(255,138,61,.18), rgba(255,138,61,.04)); color: var(--ink); box-shadow: inset 3px 0 0 var(--accent); }
.side-home { font-weight: 700; color: var(--ink); }
.side-icon { width: 1.3em; text-align: center; font-size: 1.05em; }

#toc { padding: 4px 0 0 14px; border-left: 1px solid var(--line); }
#toc:empty { display: none; }
@media (min-width: 1121px) { .no-toc .layout { grid-template-columns: 236px minmax(0, 1fr); } }
.toc-title { margin: 0 0 8px; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--mute); }
#toc ul { list-style: none; margin: 0; padding: 0; }
#toc a { display: block; padding: 4px 0; font-size: .85rem; color: var(--soft); transition: color .15s; }
#toc a:hover { color: var(--accent2); }
#toc .toc-h3 a { padding-left: 14px; }

/* ---------- 문서 ---------- */
#doc { background: var(--paper-solid); border: 1px solid var(--line); border-radius: var(--r); padding: 44px clamp(22px, 4vw, 56px) 52px; outline: 0; }
#doc > * { max-width: 46em; }
#doc > .table-wrap, #doc > pre { max-width: none; }
#doc h1, #doc h2, #doc h3, #doc h4 { font-weight: 900; letter-spacing: -.02em; line-height: 1.25; }
#doc h1 { font-size: 2.2rem; margin: 0 0 .6em; }
#doc h2 { font-size: 1.45rem; margin: 2.2em 0 .6em; padding-bottom: .4em; border-bottom: 1px solid var(--line2); }
#doc h3 { font-size: 1.12rem; margin: 1.8em 0 .4em; }
#doc h4 { font-size: 1rem; margin: 1.4em 0 .3em; }
#doc p { margin: 0 0 1em; color: color-mix(in srgb, var(--ink) 88%, var(--soft)); }
#doc ul, #doc ol { margin: 0 0 1em; padding-left: 1.3em; }
#doc li { margin: .3em 0; }
#doc ul li::marker { color: var(--accent); }
#doc ol { list-style: none; padding-left: 0; counter-reset: num; }
#doc ol > li { counter-increment: num; position: relative; padding-left: 2.6em; margin: .55em 0; }
#doc ol > li::before {
  content: counter(num, decimal-leading-zero); position: absolute; left: 0; top: .32em; font: 700 .72rem var(--mono); letter-spacing: .04em;
  color: var(--accent); padding: 1px 6px; border: 1px solid rgba(255,138,61,.4); border-radius: 6px; background: rgba(255,138,61,.08);
}
#doc li .sub { color: var(--soft); font-size: .92em; }
#doc video { display: block; width: 100%; max-height: 82vh; border-radius: 10px; border: 1px solid var(--line); background: #000; margin: 1em 0; }
#doc img { max-width: 100%; max-height: 82vh; width: auto; height: auto; border-radius: 10px; border: 1px solid var(--line); }
#doc hr { border: 0; border-top: 1px solid var(--line2); margin: 2.4em 0; }
#doc code { font-family: var(--mono); font-size: .88em; background: var(--code); padding: 2px 7px; border-radius: 6px; border: 1px solid var(--line); }
#doc pre { position: relative; margin: 0 0 1.3em; padding: 16px 84px 16px 18px; overflow-x: auto; background: #07040F; color: #E8E2F5; border: 1px solid var(--line2); border-radius: 10px; }
#doc pre code { background: none; border: 0; padding: 0; color: inherit; font-size: .9rem; }
.copy { position: absolute; top: 10px; right: 10px; padding: 4px 12px; cursor: pointer; font: 600 .76rem var(--font); color: var(--soft); background: var(--paper); border: 1px solid var(--line2); border-radius: 7px; transition: all .15s; }
.copy:hover { color: var(--ink); border-color: var(--accent); }
.copy.copied { color: #0A2A18; background: var(--green); border-color: var(--green); }

.table-wrap { overflow-x: auto; margin: 0 0 1.4em; border: 1px solid var(--line2); border-radius: 10px; }
#doc table { border-collapse: collapse; width: 100%; font-size: .9rem; }
#doc th, #doc td { padding: 11px 14px; text-align: left; vertical-align: top; border-bottom: 1px solid var(--line); }
#doc th { background: rgba(255,255,255,.05); color: var(--soft); font-size: .76rem; font-weight: 700; letter-spacing: .06em; white-space: nowrap; }
#doc tbody tr:last-child td { border-bottom: 0; }
#doc tbody tr:hover td { background: rgba(255,138,61,.05); }
#doc td.nw { white-space: nowrap; }
#doc td strong { color: var(--ink); }

#doc blockquote { margin: 0 0 1.3em; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line2); border-left: 3px solid var(--mute); border-radius: 0 10px 10px 0; }
#doc blockquote p { margin: 0; }
#doc blockquote p + p { margin-top: .3em; }
#doc blockquote p:first-child strong { font-size: .78rem; letter-spacing: .06em; color: var(--soft); }
#doc blockquote.tip { border-left-color: var(--violet); }
#doc blockquote.tip p:first-child strong { color: var(--violet); }
#doc blockquote.warn { border-left-color: var(--accent); }
#doc blockquote.warn p:first-child strong { color: var(--accent); }
.loading { color: var(--soft); }
#doc a { border-bottom: 1px solid rgba(255,179,107,.35); transition: border-color .15s, color .15s; }
#doc a:hover { color: var(--ink); border-bottom-color: var(--accent); }

/* ---------- 이전·다음 ---------- */
#pager { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 18px; }
#pager:empty { display: none; }
#pager a { flex: 1 1 220px; padding: 14px 18px; background: var(--paper); border: 1px solid var(--line); border-radius: 12px; color: var(--ink); font-weight: 700; transition: border-color .15s, background .15s; }
#pager a:hover { border-color: rgba(255,138,61,.5); background: rgba(255,138,61,.06); }
#pager small { display: block; font-size: .72rem; font-weight: 600; letter-spacing: .06em; color: var(--mute); margin-bottom: 2px; }
.pager-next { text-align: right; }
#pager .edit { flex-basis: 100%; text-align: center; font-weight: 500; font-size: .85rem; color: var(--soft); background: none; border: 0; }

#shade { position: fixed; inset: 0; z-index: 14; background: rgba(3,1,8,.7); }

/* ---------- 효과 캔버스 ---------- */
#fx { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 12; pointer-events: none; opacity: .6; will-change: transform; }

/* ---------- 움직임 ---------- */
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) #doc.page-in { animation: pagein .35s cubic-bezier(.2,.8,.2,1); }
  html:not(.fx-off) .g1 { animation: drift 18s ease-in-out infinite alternate; }
  html:not(.fx-off) .g2 { animation: drift 24s ease-in-out -8s infinite alternate-reverse; }
}
@keyframes pagein { from { opacity: 0; transform: translateY(8px); } }
@keyframes drift { to { transform: translate(6vw, 4vw); } }
@keyframes shimmer { to { background-position: 200% 0; } }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1120px) { .layout { grid-template-columns: 220px minmax(0, 1fr); } #toc { display: none; } .topnav { display: none; } }
@media (max-width: 780px) {
  #menuBtn { display: grid; }
  .is-home #menuBtn { display: none; }
  .layout { grid-template-columns: minmax(0, 1fr); padding: 16px 14px 70px; gap: 16px; }
  #side {
    position: fixed; top: var(--top-h); left: 0; bottom: 0; z-index: 15; width: 280px; max-height: none; padding: 16px 12px;
    background: var(--paper-solid); border-right: 1px solid var(--line2); transform: translateX(-100%); transition: transform .2s; visibility: hidden;
  }
  .menu-open #side { transform: none; visibility: visible; }
  .top { padding: 0 12px; gap: 8px; }
  .brand { font-size: 1rem; }
  #doc { padding: 28px 18px 36px; }
  #doc h1 { font-size: 1.8rem; }
  .search::after { display: none; }
}
/* 모바일 검색: 평소엔 돋보기 버튼, 누르면 화면 너비 검색창 */
@media (max-width: 780px) {
  .search { flex: 0 0 40px; max-width: 40px; margin-left: auto; }
  .search input { padding: 0; color: transparent; cursor: pointer; }
  .search input::placeholder { color: transparent; }
  .search.open { position: fixed; left: 12px; right: 12px; top: calc(var(--top-h) + 8px); max-width: none; z-index: 40; }
  .search.open input { padding: 0 14px 0 40px; color: var(--ink); cursor: text; background: var(--paper-solid); box-shadow: 0 10px 30px rgba(0,0,0,.45); }
  .search.open input::placeholder { color: var(--mute); }
  .search.open #results { top: 48px; left: 0; right: 0; max-height: 60vh; }
}

/* =====================================================
   첫 입장 인트로 (intro.js)
   ===================================================== */
.intro-on { overflow: hidden; }
.intro-on #fx { z-index: 41; }
#intro {
  position: fixed; inset: 0; z-index: 40; overflow: hidden; display: grid; place-items: center; align-content: center; gap: 0;
  background: radial-gradient(ellipse 70% 55% at 50% 45%, #1E1238, #09060F 75%); color: #F2EEFA; text-align: center; font-family: var(--font);
  animation: in-fade .9s ease-out both;
}
#intro.out { animation: in-open .8s cubic-bezier(.7,0,.3,1) forwards; pointer-events: none; }
#intro.hit { animation: in-fade .9s ease-out both, in-shake .4s ease-out; }
.in-bar { position: absolute; left: 0; right: 0; height: 9vh; background: #000; z-index: 3; }
.in-top { top: 0; animation: in-bar-top 1s cubic-bezier(.2,.8,.2,1) .1s both; }
.in-bot { bottom: 0; animation: in-bar-bot 1s cubic-bezier(.2,.8,.2,1) .1s both; }
.in-moon {
  position: absolute; left: 50%; top: 50%; width: min(70vw, 520px); aspect-ratio: 1; border-radius: 50%; transform: translate(-50%, -56%);
  background: radial-gradient(circle at 40% 35%, rgba(157,123,255,.35), rgba(106,61,194,.18) 45%, transparent 70%); filter: blur(10px);
  animation: in-moon 2.4s cubic-bezier(.2,.8,.2,1) .2s both;
}
.in-rings { position: absolute; left: 50%; top: 50%; width: min(90vw, 760px); aspect-ratio: 1; transform: translate(-50%, -56%); border-radius: 50%; border: 1px solid rgba(157,123,255,.18); animation: in-ring 3s ease-out .6s both; }
.in-rings::before, .in-rings::after { content: ""; position: absolute; inset: 14%; border-radius: 50%; border: 1px solid rgba(255,138,61,.2); }
.in-rings::after { inset: 30%; border-color: rgba(157,123,255,.25); }
.in-pre { position: relative; z-index: 2; margin: 0 0 .6em; font-size: clamp(.78rem, 1.8vw, .95rem); font-weight: 600; letter-spacing: .3em; color: #9B92B3; animation: in-up .9s ease-out 1.4s both; }
.in-title { position: relative; z-index: 2; margin: 0; font-weight: 900; letter-spacing: -.03em; line-height: 1.05; font-size: clamp(3.2rem, 13vw, 8.5rem); white-space: nowrap; }
.in-title span { display: inline-block; background: linear-gradient(100deg, #FFFFFF 0%, var(--accent2) 45%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent;
  animation: in-drop .7s cubic-bezier(.2,.9,.2,1) both; animation-delay: calc(2.2s + var(--i) * 90ms); }
.in-title .sp { animation: none; }

.in-shock { position: absolute; left: 50%; top: 50%; width: 10px; height: 10px; border-radius: 50%; opacity: 0; z-index: 1; border: 1px solid rgba(255,138,61,.8); transform: translate(-50%, -50%); }
#intro.hit .in-shock { animation: in-shock 1.2s ease-out both; }
.in-date { position: relative; z-index: 2; margin: 1.4em 0 0; padding: .45em 1.3em; display: inline-flex; gap: .6em; align-items: center; font-size: clamp(.9rem, 2.4vw, 1.15rem); font-weight: 700; letter-spacing: .06em; color: var(--accent2);
  border: 1px solid rgba(255,138,61,.4); border-radius: 999px; background: rgba(255,138,61,.08); animation: in-up .8s ease-out 3.6s both; }
.in-date::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.in-line { position: relative; z-index: 2; margin: 1.2em 0 0; font-size: clamp(.95rem, 2.4vw, 1.3rem); color: #D9D3EA; min-height: 1.6em; }
.in-line span { display: inline-block; overflow: hidden; white-space: nowrap; vertical-align: bottom; max-width: 0; border-right: 2px solid var(--accent); animation: in-type 1.8s steps(28, end) 4.4s forwards, in-caret .7s step-end 4.4s 6, in-caret-off 1ms linear 8.6s forwards; }
.in-enter {
  position: relative; z-index: 2; margin-top: 2.4em; padding: .75em 2.6em; opacity: 0; cursor: pointer; font: 700 clamp(1rem, 2.6vw, 1.2rem) var(--font); letter-spacing: .04em;
  color: #1A0A00; border: 0; border-radius: 999px; background: linear-gradient(135deg, var(--accent2), var(--accent));
  box-shadow: 0 0 0 1px rgba(255,138,61,.5), 0 10px 40px -8px rgba(255,138,61,.9); transition: transform .12s, box-shadow .15s, filter .15s;
}
#intro.ready .in-enter { animation: in-pop .5s cubic-bezier(.2,1.2,.3,1) both, in-pulse 1.8s ease-in-out .5s infinite alternate; }
.in-enter:hover { filter: brightness(1.08); transform: translateY(-2px); }
.in-enter:active { transform: scale(.97); }
.in-skip { position: absolute; right: 22px; top: calc(9vh + 16px); z-index: 4; padding: 7px 14px; cursor: pointer; font: 600 .8rem var(--font); letter-spacing: .04em; color: #9B92B3; background: transparent; border: 1px solid rgba(255,255,255,.18); border-radius: 999px; animation: in-up .9s ease-out .9s both; transition: all .15s; }
.in-skip:hover { color: #fff; border-color: var(--accent); }
.in-hint { position: absolute; bottom: calc(9vh + 14px); left: 0; right: 0; z-index: 4; margin: 0; font-size: .75rem; letter-spacing: .06em; color: #6B6383; opacity: 0; }
#intro.ready .in-hint { animation: in-up 1s ease-out .8s both; }
@media (max-width: 600px) { .in-skip { top: calc(9vh + 10px); right: 14px; } .in-hint { display: none; } }

@keyframes in-fade { from { opacity: 0; } }
@keyframes in-open { to { opacity: 0; transform: scale(1.04); } }
@keyframes in-bar-top { from { transform: translateY(-100%); } }
@keyframes in-bar-bot { from { transform: translateY(100%); } }
@keyframes in-moon { from { opacity: 0; transform: translate(-50%, -56%) scale(.4); } }
@keyframes in-ring { from { opacity: 0; transform: translate(-50%, -56%) scale(.6); } }
@keyframes in-up { from { opacity: 0; transform: translateY(12px); } to { opacity: 1; transform: none; } }
@keyframes in-drop { from { opacity: 0; transform: translateY(40px) scale(1.15); } }
@keyframes in-shake { 0%, 100% { transform: none; } 25% { transform: translate(-4px, 3px); } 50% { transform: translate(4px, -3px); } 75% { transform: translate(-2px, 1px); } }
@keyframes in-shock { from { opacity: 1; width: 10px; height: 10px; } to { opacity: 0; width: 170vmax; height: 170vmax; } }
@keyframes in-type { to { max-width: 30em; } }
@keyframes in-caret { 50% { border-color: transparent; } }
@keyframes in-caret-off { to { border-color: transparent; } }
@keyframes in-pop { from { opacity: 0; transform: scale(.6); } to { opacity: 1; transform: none; } }
@keyframes in-pulse { from { box-shadow: 0 0 0 1px rgba(255,138,61,.5), 0 10px 30px -8px rgba(255,138,61,.7); } to { box-shadow: 0 0 0 1px rgba(255,138,61,.7), 0 14px 50px -6px rgba(255,138,61,1); } }

/* =====================================================
   첫 화면 (landing.js)
   ===================================================== */
#landing { overflow-x: clip; }
.eyebrow { margin: 0 0 10px; font: 700 .74rem var(--font); letter-spacing: .22em; color: var(--accent); }
.btn { display: inline-flex; align-items: center; gap: 8px; padding: 12px 22px; border-radius: 999px; font-weight: 700; font-size: .95rem; color: var(--ink); border: 1px solid var(--line2); background: var(--paper); transition: all .15s; }
.btn:hover { border-color: var(--accent); background: rgba(255,138,61,.1); transform: translateY(-1px); }
.btn-main { color: #1A0A00; border-color: transparent; background: linear-gradient(135deg, var(--accent2), var(--accent)); box-shadow: 0 10px 34px -10px rgba(255,138,61,.9); }
.btn-main:hover { filter: brightness(1.08); background: linear-gradient(135deg, var(--accent2), var(--accent)); }

/* 히어로 */
.hero { position: relative; min-height: calc(100vh - var(--top-h)); display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, .9fr); gap: 40px; align-items: center; max-width: 1340px; margin: calc(-1 * var(--top-h)) auto 0; padding: calc(var(--top-h) + 60px) 24px 70px; perspective: 1200px; }
.hero-text { position: relative; z-index: 2; }
.hero-title { margin: 0 0 6px; font: 400 clamp(3.4rem, 8.6vw, 7.2rem) var(--title); line-height: 1; letter-spacing: -.01em; display: flex; flex-wrap: wrap; align-items: baseline; gap: 0 .18em; }
.ht-word { color: #FFFFFF; text-shadow: 0 2px 0 rgba(0,0,0,.35), 0 0 40px rgba(157,123,255,.35); }
.ht-num { font-family: var(--display); font-size: 1.08em; letter-spacing: .02em; background: linear-gradient(180deg, #FFE0B8 0%, var(--accent) 60%, #D44D0A 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] .ht-word { color: #1B1530; text-shadow: none; }
.hero-tag { margin: 16px 0 24px; font-size: clamp(1.05rem, 2.2vw, 1.35rem); font-weight: 500; color: var(--soft); letter-spacing: -.01em; }
.hero-date { display: inline-flex; align-items: center; gap: 10px; padding: 8px 16px 8px 12px; border-radius: 999px; border: 1px solid rgba(255,138,61,.4); background: rgba(255,138,61,.08); font-weight: 700; font-size: .92rem; color: var(--accent2); }
.hero-date i { width: 8px; height: 8px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 10px var(--accent); }
.cd { display: flex; gap: 10px; margin: 22px 0 6px; }
.cd[hidden] { display: none; }
.cd-cell { min-width: 74px; padding: 10px 8px 8px; text-align: center; border-radius: 12px; background: var(--paper); border: 1px solid var(--line2); }
.cd-cell b { display: block; font: 400 2.3rem var(--display); line-height: 1; letter-spacing: .04em; color: var(--ink); }
.cd-cell span { font-size: .7rem; font-weight: 700; letter-spacing: .1em; color: var(--mute); }
.cd.live .cd-cell { border-color: rgba(94,227,154,.4); }
.cd.live .cd-cell b { color: var(--green); }
.cd-label { margin: 0 0 26px; font-size: .8rem; font-weight: 700; letter-spacing: .1em; color: var(--soft); }
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; }
.hero-contact { display: inline-flex; align-items: center; gap: 8px; margin-top: 16px; padding: 6px 2px; color: var(--mute); font-size: .9rem; text-decoration: none; border-bottom: 1px dashed var(--line2); transition: color .15s, border-color .15s; }
.hero-contact svg { width: 18px; height: 18px; color: #8C9EFF; flex: none; }
.hero-contact b { font-weight: 600; transition: transform .15s; }
.hero-contact:hover { color: var(--ink); border-bottom-color: #8C9EFF; }
.hero-contact:hover b { transform: translate(2px, -2px); }
.hero-art { position: relative; justify-self: center; width: min(100%, 440px); transform-style: preserve-3d; transition: transform .25s ease-out; }
.hero-art img { position: relative; z-index: 1; display: block; width: 100%; border-radius: 18px; box-shadow: 0 40px 90px -30px rgba(0,0,0,.9), 0 0 0 1px var(--line2); }
.hero-art::before { content: ""; position: absolute; inset: -8% -6%; border-radius: 30%; background: radial-gradient(circle at 50% 40%, rgba(157,123,255,.45), rgba(255,138,61,.25) 45%, transparent 70%); filter: blur(30px); }
.hero-ring { position: absolute; inset: -14%; border-radius: 50%; border: 1px solid rgba(157,123,255,.25); pointer-events: none; }
.hero-ring::after { content: ""; position: absolute; top: -5px; left: 50%; width: 10px; height: 10px; border-radius: 50%; background: var(--accent); box-shadow: 0 0 14px var(--accent); }
.hero-scroll { position: absolute; left: 50%; bottom: 18px; width: 26px; height: 42px; margin-left: -13px; border: 2px solid var(--line2); border-radius: 14px; }
.hero-scroll span { position: absolute; left: 50%; top: 8px; width: 4px; height: 8px; margin-left: -2px; border-radius: 2px; background: var(--accent); }

/* 흐르는 띠 */
.ticker { overflow: hidden; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); background: var(--paper); }
.ticker-row { display: flex; width: max-content; gap: 34px; padding: 12px 0; font: 400 1.2rem var(--display); letter-spacing: .14em; color: var(--soft); white-space: nowrap; }
.ticker-row i { color: var(--accent); font-style: normal; }

/* 섹션 공통 */
.sec { max-width: 1340px; margin: 0 auto; padding: 90px 24px 10px; }
.sec-head { max-width: 40em; margin-bottom: 34px; }
.sec-head h2 { margin: 0 0 10px; font-size: clamp(1.8rem, 4vw, 2.6rem); font-weight: 900; letter-spacing: -.03em; line-height: 1.15; }
.sec-head p { margin: 0; color: var(--soft); }
.sec-head p b { color: var(--accent2); }
.sec-more { margin: 26px 0 0; }

.feat-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(260px, 1fr)); gap: 16px; }
.feat { padding: 28px 26px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); position: relative; overflow: hidden; }
.feat::after { content: ""; position: absolute; inset: 0; background: radial-gradient(circle at 100% 0, rgba(255,138,61,.14), transparent 50%); opacity: 0; transition: opacity .25s; }
.feat:hover::after { opacity: 1; }
.feat-icon { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; background: rgba(255,255,255,.06); border: 1px solid var(--line2); font-size: 1.4rem; }
.feat h3 { margin: 18px 0 8px; font-size: 1.2rem; font-weight: 800; letter-spacing: -.02em; }
.feat p { margin: 0; color: var(--soft); font-size: .95rem; }

.tier-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 16px; }
.tier { position: relative; display: block; padding: 28px 26px 24px; border-radius: 18px; background: var(--paper); border: 1px solid var(--line); color: var(--ink); overflow: hidden; transition: transform .2s, border-color .2s, box-shadow .2s; }
.tier::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); box-shadow: 0 0 18px var(--c); }
.tier::after { content: ""; position: absolute; right: -40px; top: -40px; width: 160px; height: 160px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--c) 30%, transparent), transparent 70%); }
.tier:hover { transform: translateY(-4px); border-color: color-mix(in srgb, var(--c) 50%, transparent); box-shadow: 0 24px 50px -24px var(--c); }
.tier-en { font: 400 .95rem var(--display); letter-spacing: .2em; color: var(--c); }
.tier h3 { margin: 4px 0 14px; font-size: 1.6rem; font-weight: 900; letter-spacing: -.02em; }
.tier-n { display: flex; align-items: baseline; gap: 4px; font: 400 3.4rem var(--display); line-height: 1; color: var(--c); }
.tier-n small { font: 700 .8rem var(--font); letter-spacing: .1em; color: var(--soft); }
.tier ul { list-style: none; margin: 16px 0 18px; padding: 0; font-size: .9rem; color: var(--soft); }
.tier li { padding: 5px 0; border-top: 1px solid var(--line); }
.tier li.more { color: var(--mute); }
.tier-go { font-size: .85rem; font-weight: 700; color: var(--c); }

.api-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 12px; }
.api-card { padding: 20px 18px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line); transition: border-color .2s, background .2s; }
.api-card:hover { border-color: rgba(255,138,61,.5); background: rgba(255,138,61,.06); }
.api-card b { display: block; font: 400 2.4rem var(--display); line-height: 1; color: var(--accent2); }
.api-card b small { font: 700 .75rem var(--font); margin-left: 3px; color: var(--mute); }
.api-card strong { display: block; margin: 8px 0 4px; font-size: 1rem; }
.api-card p { margin: 0; font-size: .84rem; color: var(--soft); }

.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 12px; }
.doc-card { position: relative; display: grid; grid-template-columns: 44px 1fr auto; grid-template-rows: auto auto; column-gap: 12px; align-items: center; padding: 16px 18px; border-radius: 14px; color: var(--ink); background: var(--paper); border: 1px solid var(--line); transition: border-color .15s, background .15s, transform .15s; }
.doc-ico { grid-row: span 2; display: grid; place-items: center; width: 44px; height: 44px; border-radius: 11px; font-size: 1.3rem; background: rgba(255,255,255,.06); border: 1px solid var(--line2); }
.doc-name { font-weight: 700; font-size: 1rem; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.doc-group { grid-column: 2; font-size: .72rem; font-weight: 700; letter-spacing: .08em; color: var(--mute); }
.doc-go { grid-row: span 2; color: var(--mute); font-size: 1.3rem; transition: transform .15s, color .15s; }
.doc-card:hover { border-color: rgba(255,138,61,.5); background: rgba(255,138,61,.06); transform: translateY(-2px); }
.doc-card:hover .doc-go { transform: translateX(3px); color: var(--accent); }

.news-list { list-style: none; margin: 0; padding: 0; border-top: 1px solid var(--line2); }
.news-list li { border-bottom: 1px solid var(--line); }
.news-list a { display: flex; justify-content: space-between; align-items: center; padding: 16px 4px; color: var(--ink); font-weight: 600; transition: color .15s, padding .15s; }
.news-list a span { color: var(--mute); }
.news-list a:hover { color: var(--accent2); padding-left: 10px; }
.docs-sec { padding-bottom: 60px; }

.foot { margin-top: 70px; border-top: 1px solid var(--line); }
.foot-in { max-width: 1340px; margin: 0 auto; padding: 26px 24px; display: flex; flex-wrap: wrap; gap: 14px; justify-content: space-between; font-size: .8rem; color: var(--mute); }
.foot-brand { font-weight: 800; color: var(--soft); }
.foot-links { display: flex; gap: 18px; flex-wrap: wrap; }
.foot-links a { color: var(--soft); border-bottom: 1px solid var(--line2); }
.foot-links a:hover { color: var(--accent2); border-color: var(--accent); }

/* 나타나는 효과 */
.reveal { opacity: 0; transform: translateY(22px); transition: opacity .7s cubic-bezier(.2,.8,.2,1), transform .7s cubic-bezier(.2,.8,.2,1); transition-delay: var(--d, 0ms); }
.reveal.in { opacity: 1; transform: none; }
html.fx-off .reveal { opacity: 1; transform: none; transition: none; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .ticker-row { animation: ticker 40s linear infinite; }
  html:not(.fx-off) .hero-ring { animation: spin 14s linear infinite; }
  html:not(.fx-off) .hero-scroll span { animation: scrollhint 1.6s ease-in-out infinite; }
  html:not(.fx-off) .cd-cell b.flip { animation: flip .35s ease-out; }
  html:not(.fx-off) .hero-text > * { animation: pagein .8s cubic-bezier(.2,.8,.2,1) both; }
  html:not(.fx-off) .hero-text > :nth-child(2) { animation-delay: .08s; }
  html:not(.fx-off) .hero-text > :nth-child(3) { animation-delay: .16s; }
  html:not(.fx-off) .hero-text > :nth-child(n+4) { animation-delay: .26s; }
  html:not(.fx-off) .hero-art { animation: artin 1.1s cubic-bezier(.2,.8,.2,1) both; }
}
@keyframes ticker { to { transform: translateX(-50%); } }
@keyframes numglow { from { filter: drop-shadow(0 0 10px rgba(255,138,61,.35)); } to { filter: drop-shadow(0 0 28px rgba(255,138,61,.85)); } }
@keyframes spin { to { transform: rotate(360deg); } }
@keyframes scrollhint { 0% { transform: translateY(0); opacity: 1; } 100% { transform: translateY(14px); opacity: 0; } }
@keyframes flip { from { transform: translateY(-6px); opacity: .3; } }
@keyframes artin { from { opacity: 0; transform: translateY(30px) scale(.96); } }
@media (prefers-reduced-motion: reduce) { .reveal { opacity: 1; transform: none; } }

@media (max-width: 900px) {
  .hero { grid-template-columns: 1fr; padding-top: calc(var(--top-h) + 30px); gap: 28px; text-align: left; }
  .hero-art { order: -1; width: min(70%, 300px); justify-self: start; }
  .hero-scroll { display: none; }
  .cd-cell { min-width: 62px; }
  .cd-cell b { font-size: 1.8rem; }
  .sec { padding-top: 60px; }
}

/* =====================================================
   카드 덱 (증강 문서) — 들어오면 카드가 흩날리며 자리를 잡습니다
   ===================================================== */
#doc .deck { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 14px; margin: 0 0 2em; max-width: none; perspective: 1400px; }
#doc .card { position: relative; perspective: 900px; }
#doc .card-in {
  position: relative; height: 100%; padding: 18px 18px 20px; border-radius: 16px; overflow: hidden; transform-style: preserve-3d;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 14%, var(--paper-solid)), var(--paper-solid) 60%);
  border: 1px solid color-mix(in srgb, var(--c) 35%, var(--line2));
  box-shadow: 0 10px 30px -14px rgba(0,0,0,.8), inset 0 1px 0 rgba(255,255,255,.08);
  transition: transform .15s ease-out, box-shadow .2s, border-color .2s;
}
#doc .card-in::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 3px; background: var(--c); box-shadow: 0 0 16px var(--c); }
#doc .card:hover .card-in { border-color: color-mix(in srgb, var(--c) 70%, transparent); box-shadow: 0 24px 50px -20px var(--c), inset 0 1px 0 rgba(255,255,255,.1); }
#doc .card-tier { display: flex; justify-content: space-between; font: 400 .85rem var(--display); letter-spacing: .2em; color: var(--c); }
#doc .card-tier i { font-style: normal; color: var(--mute); }
#doc .card h4 { margin: 10px 0 6px; font-size: 1.1rem; font-weight: 800; letter-spacing: -.02em; max-width: none; }
#doc .card h4 strong { color: var(--ink); }
#doc .card p { margin: 0; font-size: .88rem; color: var(--soft); line-height: 1.6; max-width: none; }
#doc .card-shine { position: absolute; inset: 0; pointer-events: none; opacity: 0; background: radial-gradient(circle at var(--tx, 50%) var(--ty, 50%), rgba(255,255,255,.22), transparent 45%); transition: opacity .2s; }
#doc .card:hover .card-shine { opacity: 1; }
:root[data-theme="light"] #doc .card-in { background: linear-gradient(160deg, color-mix(in srgb, var(--c) 18%, #fff), #fff 60%); }

@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .deal .card { animation: deal .9s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--n) * 55ms + 120ms); }
}
@keyframes deal {
  0% { opacity: 0; transform: translate(calc(var(--dx) * 60vw), 70vh) rotate(var(--rot)) scale(.5); }
  60% { opacity: 1; }
  80% { transform: translate(0, -8px) rotate(calc(var(--rot) * -.08)) scale(1.03); }
  100% { transform: none; }
}
@keyframes sweep { from { transform: translateX(-60%); } to { transform: translateX(60%); } }

/* 효과음 버튼 */
#soundBtn .snd-x { display: none; }
#soundBtn[aria-pressed="false"] { color: var(--mute); }
#soundBtn[aria-pressed="false"] .snd-wave { display: none; }
#soundBtn[aria-pressed="false"] .snd-x { display: block; }

/* =====================================================
   문서별 등장 효과 (config.js의 pageFx)
   ===================================================== */
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) #doc.stag-run .stag { animation: fx-fade .55s cubic-bezier(.2,.8,.2,1) both; animation-delay: calc(var(--n) * 28ms); }
  html:not(.fx-off) #doc.stag-run[data-fx="loot"] .stag { animation-name: fx-loot; animation-duration: .7s; animation-timing-function: cubic-bezier(.2,1.4,.3,1); animation-delay: calc(var(--n) * 45ms); }
  html:not(.fx-off) #doc.stag-run[data-fx="slide"] .stag { animation-name: fx-slide; animation-duration: .6s; animation-delay: calc(var(--n) * 35ms); }
  html:not(.fx-off) #doc.stag-run[data-fx="pop"] .stag { animation-name: fx-pop; animation-duration: .5s; animation-timing-function: cubic-bezier(.2,1.6,.4,1); animation-delay: calc(var(--n) * 40ms); }
  html:not(.fx-off) #doc.stag-run[data-fx="loot"] tbody tr.stag { animation-name: fx-loot; }
}
@keyframes fx-fade { from { opacity: 0; transform: translateY(10px); } }
@keyframes fx-loot { 0% { opacity: 0; transform: translateY(-40px) scale(.96); } 60% { opacity: 1; transform: translateY(6px); } 100% { transform: none; } }
@keyframes fx-slide { from { opacity: 0; transform: translateX(-40px); } }
@keyframes fx-pop { from { opacity: 0; transform: scale(.6); } }
#doc tbody tr.stag { display: table-row; }

/* =====================================================
   증강 뽑기 체험 (첫 화면)
   ===================================================== */
.gacha { margin-top: 24px; padding: 34px clamp(20px, 4vw, 44px) 30px; border-radius: 22px; border: 1px solid var(--line2); position: relative; overflow: hidden;
  background: radial-gradient(ellipse 60% 80% at 50% 110%, rgba(157,123,255,.22), transparent 60%), var(--paper); }
.gacha-head { text-align: center; max-width: 36em; margin: 0 auto 10px; }
.gacha-head h3 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; }
.gacha-head p { margin: 0; color: var(--soft); font-size: .95rem; }
.gacha-stage { display: grid; grid-template-columns: repeat(3, minmax(0, 220px)); justify-content: center; gap: clamp(10px, 2.5vw, 26px); min-height: 250px; padding: 24px 0 8px; perspective: 1400px; }
.gacha-act { margin: 10px 0 0; text-align: center; }
.gcard { width: 100%; height: clamp(170px, 24vw, 308px); cursor: pointer; perspective: 1000px; border-radius: 16px; outline: 0; }
.gcard:focus-visible .gcard-in { box-shadow: 0 0 0 2px var(--accent); }
.gcard-in { position: relative; width: 100%; height: 100%; transform-style: preserve-3d; transition: transform .6s cubic-bezier(.3,1.2,.3,1); border-radius: 16px; }
.gcard.open .gcard-in { transform: rotateY(180deg); }
.gcard.dim { opacity: .35; transition: opacity .4s; }
.gcard.chosen { z-index: 2; }
.gcard.chosen .gcard-in { transform: rotateY(180deg) scale(1.08); }
.gcard.lit .gfront { box-shadow: 0 0 30px 4px color-mix(in srgb, var(--c) 70%, transparent), 0 0 70px 10px color-mix(in srgb, var(--c) 30%, transparent); }
.gface { position: absolute; inset: 0; border-radius: 16px; backface-visibility: hidden; -webkit-backface-visibility: hidden; overflow: hidden; }
.gback { display: grid; place-items: center; font-size: 2.2rem; color: var(--violet);
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.03) 0 6px, transparent 6px 12px), linear-gradient(160deg, #2A1B50, #150C2A);
  border: 1px solid rgba(157,123,255,.4); box-shadow: inset 0 0 0 6px #120A22, inset 0 0 0 7px rgba(157,123,255,.35), 0 20px 40px -20px #000; }
.gback span { text-shadow: 0 0 18px var(--violet); }
.gfront { transform: rotateY(180deg); padding: 16px 16px 18px; display: flex; flex-direction: column; justify-content: flex-start; text-align: left;
  background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, var(--paper-solid)), var(--paper-solid) 65%); border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); }
.gfront::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: var(--c); box-shadow: 0 0 16px var(--c); }
.gfront .card-tier { font: 400 .85rem var(--display); letter-spacing: .2em; color: var(--c); }
.gfront h4 { margin: 10px 0 6px; font-size: clamp(.95rem, 1.6vw, 1.15rem); font-weight: 800; letter-spacing: -.02em; line-height: 1.25; }
.gfront p { margin: 0; font-size: clamp(.72rem, 1.2vw, .84rem); color: var(--soft); line-height: 1.55; }
.gcard[data-tier="prism"] .gfront { background: linear-gradient(160deg, rgba(157,123,255,.35), rgba(255,111,174,.18) 50%, var(--paper-solid) 85%); }
.gcard[data-tier="prism"].lit .gfront { animation: prism-pulse 1.4s ease-in-out infinite alternate; }
@keyframes prism-pulse { from { box-shadow: 0 0 24px 4px rgba(157,123,255,.8); } to { box-shadow: 0 0 60px 12px rgba(255,111,174,.8); } }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .gcard { animation: gdeal .8s cubic-bezier(.2,.9,.25,1) both; animation-delay: calc(var(--i) * 140ms); }
}
@keyframes gdeal { 0% { opacity: 0; transform: translate(0, 60vh) rotate(-20deg) scale(.5); } 70% { opacity: 1; transform: translate(0, -10px) rotate(2deg) scale(1.03); } 100% { transform: none; } }
@media (max-width: 600px) { .gacha-stage { min-height: 200px; } .gfront p { display: none; } }

/* =====================================================
   자주 묻는 질문 — 접이식 상자
   ===================================================== */
#doc .qa-bar { display: flex; gap: 8px; margin: 0 0 14px; }
#doc .qa-all { padding: 6px 12px; font: 600 .78rem var(--font); color: var(--soft); background: var(--paper); border: 1px solid var(--line2); border-radius: 7px; cursor: pointer; transition: all .15s; }
#doc .qa-all:hover { color: var(--ink); border-color: var(--accent); }
#doc details.qa { margin: 0 0 10px; border: 1px solid var(--line); border-radius: 12px; background: var(--paper); overflow: hidden; transition: border-color .15s, background .15s; max-width: none; }
#doc details.qa:hover { border-color: var(--line2); }
#doc details.qa[open] { border-color: rgba(255,138,61,.45); background: rgba(255,138,61,.04); }
#doc details.qa summary { display: flex; align-items: center; gap: 14px; padding: 15px 18px; cursor: pointer; list-style: none; font-weight: 700; font-size: 1rem; }
#doc details.qa summary::-webkit-details-marker { display: none; }
#doc .qa-n { flex: none; font: 400 .9rem var(--display); letter-spacing: .08em; color: var(--accent); padding: 3px 8px; border: 1px solid rgba(255,138,61,.4); border-radius: 6px; background: rgba(255,138,61,.08); }
#doc .qa-q { flex: 1; }
#doc .qa-arrow { flex: none; width: 9px; height: 9px; border-right: 2px solid var(--mute); border-bottom: 2px solid var(--mute); transform: rotate(45deg); transition: transform .2s; margin: -4px 4px 0 0; }
#doc details.qa[open] .qa-arrow { transform: rotate(-135deg); margin-top: 4px; border-color: var(--accent); }
#doc .qa-a { padding: 2px 18px 18px 58px; color: var(--soft); border-top: 1px dashed var(--line2); margin: 0 18px 0 18px; padding-left: 40px; }
#doc .qa-a > :first-child { margin-top: 14px; }
#doc .qa-a > :last-child { margin-bottom: 0; }
#doc .qa-a p { color: var(--soft); }
#doc .qa-a strong { color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { #doc details.qa[open] .qa-a { animation: pagein .25s ease-out; } }
@media (max-width: 600px) { #doc details.qa summary { padding: 13px 14px; gap: 10px; } #doc .qa-a { margin: 0 14px; padding-left: 0; } }

/* =====================================================
   구글 시트 연동 — 입주 명단
   ===================================================== */
#doc .sheet { max-width: none; margin-top: 10px; }
#doc .sheet-load, #doc .sheet-err { color: var(--soft); padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 10px; }
#doc .sheet-sum { position: relative; display: flex; align-items: baseline; gap: 8px; margin: 0 0 22px; padding: 18px 20px 24px; border-radius: 14px; background: var(--paper); border: 1px solid var(--line2); overflow: hidden; }
#doc .sheet-sum b { font: 400 2.6rem var(--display); line-height: 1; color: var(--accent2); }
#doc .sheet-sum span { color: var(--soft); font-weight: 600; }
#doc .sheet-sum i { position: absolute; left: 0; bottom: 0; height: 4px; width: var(--p); background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 12px var(--accent); transition: width 1s cubic-bezier(.2,.8,.2,1); }
#doc .sheet-g { margin: 0 0 26px; }
#doc .sheet-g header { display: flex; align-items: baseline; justify-content: space-between; padding-bottom: 8px; margin-bottom: 12px; border-bottom: 1px solid var(--line2); }
#doc .sheet-g h3 { margin: 0; font-size: 1.15rem; }
#doc .sheet-g header span { font: 400 1rem var(--display); letter-spacing: .08em; color: var(--accent2); }
#doc .sheet-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 1120px) and (min-width: 781px) { #doc .sheet-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (max-width: 640px) {
  #doc .sheet-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
  #doc .seat { padding: 10px 12px; gap: 10px; min-height: 48px; }
  #doc .seat-v { font-size: .9rem; white-space: normal; overflow: visible; text-overflow: clip; overflow-wrap: anywhere; line-height: 1.3; }
  #doc .seat-n { min-width: 2.2em; font-size: .9rem; }
  #doc .sheet-find input { padding-right: 90px; }
}
#doc .seat { position: relative; display: flex; align-items: center; gap: 8px; padding: 8px 10px; border-radius: 10px; background: var(--paper); border: 1px solid var(--line); min-height: 44px; }
#doc .seat-n { flex: none; min-width: 2em; text-align: center; font: 400 .9rem var(--display); letter-spacing: .04em; color: var(--mute); padding: 2px 5px; border-radius: 6px; border: 1px solid var(--line2); }
#doc .seat-v { font-weight: 600; font-size: .88rem; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; word-break: keep-all; line-height: 1.3; }
#doc .seat-v em { font-style: normal; font-weight: 500; color: var(--mute); }
#doc .seat.on { border-color: rgba(255,138,61,.4); background: rgba(255,138,61,.07); }
#doc .seat.on .seat-n { color: var(--accent); border-color: rgba(255,138,61,.5); background: rgba(255,138,61,.1); }
#doc .sheet-time { font-size: .78rem; color: var(--mute); text-align: right; }
@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) #doc .sheet-g { animation: pagein .5s cubic-bezier(.2,.8,.2,1) both; animation-delay: var(--d); }
  html:not(.fx-off) #doc .seat { animation: fx-pop .4s cubic-bezier(.2,1.6,.4,1) both; animation-delay: calc(var(--d) + var(--k) * 18ms); }
}
#doc .sheet-raw { font-size: .75rem; white-space: pre-wrap; max-height: 200px; overflow: auto; }

/* 명단 찾기 */
#doc .sheet-find { position: relative; display: flex; align-items: center; margin: 0 0 12px; }
#doc .sheet-find svg { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--mute); pointer-events: none; }
#doc .sheet-find input { width: 100%; height: 46px; padding: 0 110px 0 44px; border: 1px solid var(--line2); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
#doc .sheet-find input::placeholder { color: var(--mute); }
#doc .sheet-find input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,61,.18); }
#doc .sheet-hit { position: absolute; right: 14px; font-size: .8rem; font-weight: 700; color: var(--accent2); }
#doc .sheet.searching .seat.miss { opacity: .18; }
#doc .sheet.searching .seat.hit { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent), 0 0 18px rgba(255,138,61,.5); transform: scale(1.04); }
#doc .sheet.searching .sheet-g.empty { opacity: .3; }
#doc .seat { transition: opacity .2s, transform .2s, box-shadow .2s, border-color .2s; }

/* =====================================================
   모션 그래픽 (motion.js + 배경)
   ===================================================== */
.progress { position: fixed; left: 0; top: 0; z-index: 30; width: 100%; height: 2px; transform-origin: 0 50%; transform: scaleX(0); background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 10px var(--accent); pointer-events: none; }
.trail { position: fixed; inset: 0; width: 100%; height: 100%; z-index: 60; pointer-events: none; }
.wipe { position: fixed; inset: 0; z-index: 50; pointer-events: none; display: grid; grid-template-rows: repeat(3, 1fr); }
.wipe i { display: block; transform: scaleX(0); transform-origin: 0 50%; background: linear-gradient(90deg, var(--accent), var(--violet)); opacity: 0; }
.wipe.go i { animation: wipe .7s cubic-bezier(.7,0,.3,1) both; }
.wipe.go i:nth-child(2) { animation-delay: .05s; } .wipe.go i:nth-child(3) { animation-delay: .1s; }
@keyframes wipe { 0% { transform: scaleX(0); transform-origin: 0 50%; opacity: .9; } 45% { transform: scaleX(1); transform-origin: 0 50%; opacity: .9; } 55% { transform: scaleX(1); transform-origin: 100% 50%; opacity: .9; } 100% { transform: scaleX(0); transform-origin: 100% 50%; opacity: 0; } }

/* 배경: 오로라, 빛줄기, 스캔선 */
.aurora { position: absolute; width: 80vw; height: 50vh; opacity: .16; border-radius: 50%; will-change: transform; transform: translateZ(0); }
.a1 { left: -24vw; top: -14vh; background: radial-gradient(ellipse at 40% 50%, rgba(255,138,61,.8), rgba(106,61,194,.45) 35%, transparent 68%); }
.a2 { right: -34vw; top: 26vh; background: radial-gradient(ellipse at 60% 50%, rgba(255,111,174,.75), rgba(157,123,255,.4) 35%, transparent 68%); }
.rays { position: absolute; left: 50%; top: -70vh; width: 220vw; height: 160vh; margin-left: -110vw; opacity: .12; mix-blend-mode: screen;
  background: conic-gradient(from 0deg at 50% 50%, transparent 0 10deg, rgba(255,138,61,.5) 12deg 14deg, transparent 16deg 40deg, rgba(157,123,255,.5) 42deg 44deg, transparent 46deg 90deg, rgba(255,138,61,.4) 92deg 93deg, transparent 95deg 180deg, rgba(157,123,255,.4) 182deg 184deg, transparent 186deg 260deg, rgba(255,138,61,.5) 262deg 265deg, transparent 267deg 360deg); }
.scan { position: absolute; left: 0; right: 0; top: 0; height: 2px; background: linear-gradient(90deg, transparent, rgba(255,138,61,.35), transparent); opacity: 0; }
:root[data-theme="light"] .aurora, :root[data-theme="light"] .rays, :root[data-theme="light"] .scan { display: none; }

/* 히어로 HUD */
.hud { position: absolute; inset: -22%; width: 144%; height: 144%; color: rgba(157,123,255,.45); pointer-events: none; }
.hud-arc { color: var(--accent); }
.hero-ring.r2 { inset: -8%; border-color: rgba(255,138,61,.25); }
.hero-ring.r2::after { background: var(--violet); box-shadow: 0 0 14px var(--violet); top: auto; bottom: -5px; }
.corner { position: absolute; width: 22px; height: 22px; border: 2px solid var(--accent); opacity: .8; z-index: 2; }
.c1 { left: -14px; top: -14px; border-right: 0; border-bottom: 0; } .c2 { right: -14px; top: -14px; border-left: 0; border-bottom: 0; }
.c3 { left: -14px; bottom: -14px; border-right: 0; border-top: 0; } .c4 { right: -14px; bottom: -14px; border-left: 0; border-top: 0; }
.hero-title { position: relative; }
.hero-title::after { content: attr(data-text); position: absolute; inset: 0; pointer-events: none; color: var(--accent); opacity: 0; clip-path: inset(0 0 100% 0); font-family: var(--title); letter-spacing: -.01em; }

/* 홀로그램 반사 (motion.js가 --mx --my를 줌) */
.holo { position: relative; transition: transform .12s ease-out, box-shadow .2s, border-color .2s; z-index: 1; }
.holo::after { content: ""; position: absolute; inset: 0; border-radius: inherit; pointer-events: none; opacity: .7;
  background: radial-gradient(circle at var(--mx, 50%) var(--my, 50%), rgba(255,255,255,.22), transparent 42%), linear-gradient(115deg, transparent 30%, rgba(157,123,255,.18) 45%, rgba(255,138,61,.18) 55%, transparent 70%); }


/* 섹션 제목 밑줄이 쓸고 지나감 */
.sec-head h2 { position: relative; display: inline-block; }
.sec-head h2::after { content: ""; position: absolute; left: 0; bottom: -6px; height: 3px; width: 0; border-radius: 2px; background: linear-gradient(90deg, var(--accent), var(--violet)); box-shadow: 0 0 12px var(--accent); transition: width .9s cubic-bezier(.2,.8,.2,1) .2s; }
.sec-head.in h2::after { width: 100%; }
#doc h2 { position: relative; }
#doc h2::after { content: ""; position: absolute; left: 0; bottom: -1px; height: 2px; width: 0; background: linear-gradient(90deg, var(--accent), var(--violet)); animation: underline 1s cubic-bezier(.2,.8,.2,1) .3s both; }
@keyframes underline { to { width: 40%; } }

/* 문서 판 모서리 HUD */
#doc { position: relative; }
#doc::before, #doc::after { content: ""; position: absolute; width: 18px; height: 18px; border: 2px solid rgba(255,138,61,.6); pointer-events: none; }
#doc::before { left: -1px; top: -1px; border-right: 0; border-bottom: 0; border-radius: var(--r) 0 0 0; }
#doc::after { right: -1px; bottom: -1px; border-left: 0; border-top: 0; border-radius: 0 0 var(--r) 0; }

@media (prefers-reduced-motion: no-preference) {
  html:not(.fx-off) .a1 { animation: aurora1 16s ease-in-out infinite alternate; }
  html:not(.fx-off) .a2 { animation: aurora2 20s ease-in-out -6s infinite alternate; }
  html:not(.fx-off) .hud { animation: spin 40s linear infinite; will-change: transform; }
  html:not(.fx-off) .hud-arc { animation: spinrev 6s linear infinite; transform-origin: 50% 50%; transform-box: fill-box; }
  html:not(.fx-off) .hero-ring.r2 { animation: spinrev 22s linear infinite; }
}
html.fx-off .hero-title::after, html.fx-off .scan { display: none; }
@keyframes aurora1 { to { transform: translate(18vw, 10vh) rotate(12deg) scale(1.15); } }
@keyframes aurora2 { to { transform: translate(-16vw, -10vh) rotate(-10deg) scale(1.1); } }
@keyframes spinrev { to { transform: rotate(-360deg); } }
@keyframes scan { 0% { top: -2px; opacity: 0; } 5% { opacity: 1; } 95% { opacity: 1; } 100% { top: 100%; opacity: 0; } }
@keyframes corner { to { transform: scale(1.3); opacity: .35; } }
@keyframes glitch {
  0%, 91%, 100% { opacity: 0; }
  92% { opacity: .9; clip-path: inset(10% 0 70% 0); transform: translate(-6px, 0); }
  93% { clip-path: inset(50% 0 20% 0); transform: translate(5px, 0); }
  94% { clip-path: inset(80% 0 5% 0); transform: translate(-3px, 0); }
  95% { opacity: 0; }
}
@keyframes cdglow { from { box-shadow: 0 0 0 rgba(255,138,61,0); } to { box-shadow: 0 0 22px -4px rgba(255,138,61,.6); border-color: rgba(255,138,61,.45); } }

/* ----- 증강 뽑기: 선택 연출 ----- */
.gacha { position: relative; }
.gacha.shake { animation: gshake .5s ease-out; }
@keyframes gshake { 0%, 100% { transform: none; } 20% { transform: translate(-5px, 3px); } 40% { transform: translate(5px, -4px); } 60% { transform: translate(-3px, 2px); } 80% { transform: translate(2px, -1px); } }
.gacha-flash { position: absolute; inset: 0; pointer-events: none; opacity: 0; border-radius: 22px; background: radial-gradient(circle at 50% 55%, var(--c, #FF8A3D), transparent 60%); }
.gacha-flash.go { animation: gflash .9s ease-out both; }
.gacha-flash.prism { background: radial-gradient(circle at 50% 55%, #9D7BFF, #FF6FAE 35%, transparent 65%); }
@keyframes gflash { 0% { opacity: 0; } 8% { opacity: .55; } 100% { opacity: 0; } }
.gacha-ring { position: absolute; left: 50%; top: 50%; width: 20px; height: 20px; margin: -10px 0 0 -10px; border-radius: 50%; border: 3px solid var(--c); pointer-events: none; animation: gring 1s ease-out both; }
@keyframes gring { to { width: 900px; height: 900px; margin: -450px 0 0 -450px; opacity: 0; border-width: 1px; } }
.gacha-rays { position: absolute; left: 50%; top: 50%; width: 260%; height: 260%; margin: -130% 0 0 -130%; pointer-events: none; z-index: -1; opacity: 0; border-radius: 50%;
  background: conic-gradient(from 0deg, transparent 0 14deg, color-mix(in srgb, var(--c) 55%, transparent) 16deg 24deg, transparent 26deg 60deg, color-mix(in srgb, var(--c) 45%, transparent) 62deg 68deg, transparent 70deg 110deg, color-mix(in srgb, var(--c) 55%, transparent) 112deg 120deg, transparent 122deg 160deg, color-mix(in srgb, var(--c) 45%, transparent) 162deg 168deg, transparent 170deg 210deg, color-mix(in srgb, var(--c) 55%, transparent) 212deg 220deg, transparent 222deg 260deg, color-mix(in srgb, var(--c) 45%, transparent) 262deg 268deg, transparent 270deg 310deg, color-mix(in srgb, var(--c) 55%, transparent) 312deg 320deg, transparent 322deg 360deg);
  -webkit-mask: radial-gradient(circle, #000 20%, transparent 70%); mask: radial-gradient(circle, #000 20%, transparent 70%);
  animation: grays-in .6s ease-out both, spin 14s linear .6s infinite; }
.gacha-rays.prism { background: conic-gradient(from 0deg, #9D7BFF, #FF6FAE, #FF8A3D, #9D7BFF); opacity: .5; -webkit-mask: radial-gradient(circle, #000 10%, transparent 68%); mask: radial-gradient(circle, #000 10%, transparent 68%); }
@keyframes grays-in { from { opacity: 0; transform: scale(.3); } to { opacity: .7; transform: none; } }
.gcard.chosen .gcard-in { transform: rotateY(180deg) scale(1.14) translateY(-10px); }
.gcard.lit .gcard-in { animation: gfloat 2.4s ease-in-out .6s infinite alternate; }
@keyframes gfloat { from { transform: rotateY(180deg) scale(1.14) translateY(-10px); } to { transform: rotateY(180deg) scale(1.16) translateY(-18px); } }
.gcard.lit .gfront::after { content: ""; position: absolute; inset: -40%; background: linear-gradient(115deg, transparent 42%, rgba(255,255,255,.5) 50%, transparent 58%); animation: sweep 1.2s ease-out .2s both; pointer-events: none; }
.gacha-act { display: flex; flex-direction: column; align-items: center; gap: 10px; }
.gacha-left { font-size: .82rem; font-weight: 700; letter-spacing: .04em; color: var(--soft); }
.gacha-bag { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.gacha-bag .eyebrow { text-align: center; }
.bag-grid { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 10px; }
.bag-slot { display: grid; place-items: center; align-content: center; gap: 4px; min-height: 78px; padding: 10px 8px; border-radius: 12px; border: 1px dashed var(--line2); color: var(--mute); font: 400 1.1rem var(--display); text-align: center; }
.bag-slot.on { border: 1px solid color-mix(in srgb, var(--c) 55%, transparent); background: linear-gradient(160deg, color-mix(in srgb, var(--c) 22%, var(--paper-solid)), var(--paper-solid)); box-shadow: inset 0 2px 0 var(--c); }
.bag-slot.on .card-tier { font: 400 .72rem var(--display); letter-spacing: .18em; color: var(--c); }
.bag-slot.on b { font: 800 .82rem var(--font); color: var(--ink); letter-spacing: -.02em; line-height: 1.25; }
.bag-slot.new { animation: bagin .6s cubic-bezier(.2,1.5,.3,1) both; }
@keyframes bagin { from { opacity: 0; transform: scale(.4) translateY(-30px); } }
@media (max-width: 600px) { .bag-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================
   사진첩
   ===================================================== */
#doc .gal { max-width: none; margin-top: 10px; }
#doc .gal-empty { color: var(--soft); padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 10px; }
#doc .gal-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 12px; }
#doc .gal-item { position: relative; margin: 0; border-radius: 14px; overflow: hidden; cursor: pointer; background: #000; border: 1px solid var(--line2); aspect-ratio: 4 / 3; outline: 0; }
#doc .gal-item img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 30%; display: block; border: 0; border-radius: 0; max-height: none; filter: grayscale(.35) contrast(1.05); transition: transform .5s cubic-bezier(.2,.8,.2,1), filter .4s; }
#doc .gal-item:hover img, #doc .gal-item:focus-visible img { transform: scale(1.07); filter: none; }
#doc .gal-item figcaption { position: absolute; left: 0; right: 0; bottom: 0; padding: 36px 14px 12px; background: linear-gradient(to top, rgba(5,2,12,.92), transparent); color: #fff; }
#doc .gal-item figcaption b { display: block; font-size: .95rem; }
#doc .gal-item figcaption span { font-size: .78rem; color: #C9BFE0; }
#doc .gal-item:focus-visible { box-shadow: 0 0 0 2px var(--accent); }
#doc .gal-flash { position: absolute; inset: 0; pointer-events: none; background: radial-gradient(circle at 50% 40%, rgba(255,138,61,.35), transparent 60%); opacity: 0; }
#doc .gal-item:hover .gal-flash { animation: galflash 1.2s ease-out; }
@keyframes galflash { 0% { opacity: 0; } 15% { opacity: 1; } 25% { opacity: .2; } 35% { opacity: .8; } 100% { opacity: 0; } }
@media (prefers-reduced-motion: no-preference) { html:not(.fx-off) #doc .gal-item { animation: fx-pop .5s cubic-bezier(.2,1.4,.4,1) both; animation-delay: calc(var(--i) * 50ms); } }

.lightbox { position: fixed; inset: 0; z-index: 70; display: none; place-items: center; padding: 24px; background: rgba(5,2,12,.92); }
.lightbox.open { display: grid; }
.lightbox figure { margin: 0; max-width: min(92vw, 900px); max-height: 92vh; display: grid; grid-template-rows: minmax(0, 1fr) auto; gap: 12px; text-align: center; }
.lightbox img { max-width: 100%; max-height: 78vh; object-fit: contain; border-radius: 14px; box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 0 1px var(--line2); }
.lightbox figcaption { color: #fff; }
.lightbox figcaption b { display: block; font-size: 1.1rem; }
.lightbox figcaption span { display: block; color: #C9BFE0; font-size: .9rem; }
.lightbox figcaption small { display: block; margin-top: 4px; font: 400 .85rem var(--display); letter-spacing: .1em; color: var(--accent2); }
.lightbox button { position: absolute; display: grid; place-items: center; width: 46px; height: 46px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 1.6rem; cursor: pointer; transition: background .15s, border-color .15s; }
.lightbox button:hover { background: rgba(255,138,61,.25); border-color: var(--accent); }
.lb-x { top: 18px; right: 18px; font-size: 1.1rem !important; }
.lb-prev { left: 18px; top: 50%; margin-top: -23px; } .lb-next { right: 18px; top: 50%; margin-top: -23px; }
.lightbox.in figure { animation: lbin .35s cubic-bezier(.2,.8,.2,1); }
@keyframes lbin { from { opacity: 0; transform: scale(.94); } }
body.lb-on { overflow: hidden; }
@media (max-width: 600px) { .lightbox { padding: 12px; } .lb-prev, .lb-next { width: 38px; height: 38px; top: auto; bottom: 14px; margin: 0; } .lb-prev { left: 14px; } .lb-next { right: 14px; } }

/* 첫 화면 사진 띠 */
.gal-strip { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; }
.gal-thumb { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 12px; overflow: hidden; border: 1px solid var(--line2); background: #000; transform: rotate(calc((var(--i) - 2.5) * 1.2deg)); transition: transform .3s; }
.gal-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; filter: grayscale(.4); transition: filter .3s, transform .5s; }
.gal-thumb span { position: absolute; left: 0; right: 0; bottom: 0; padding: 20px 10px 8px; font-size: .78rem; font-weight: 700; color: #fff; background: linear-gradient(to top, rgba(5,2,12,.9), transparent); }
.gal-thumb:hover { transform: rotate(0) scale(1.06); z-index: 1; }
.gal-thumb:hover img { filter: none; transform: scale(1.08); }
@media (max-width: 700px) { .gal-strip { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* =====================================================
   문서 다듬기
   ===================================================== */
#doc .crumb { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: -10px 0 14px; font-size: .78rem; font-weight: 600; letter-spacing: .04em; color: var(--mute); }
#doc .crumb a { color: var(--soft); border: 0; }
#doc .crumb a:hover { color: var(--accent2); }
#doc .crumb b { color: var(--accent); }
#doc .crumb span { opacity: .5; }

#doc .chips { display: flex; flex-wrap: wrap; gap: 8px; margin: 0 0 1.4em; max-width: none; }
#doc .chip { display: inline-flex; align-items: baseline; gap: 6px; padding: 8px 14px; border-radius: 999px; font-weight: 600; font-size: .92rem; color: var(--ink); background: var(--paper); border: 1px solid var(--line2); transition: border-color .15s, background .15s, transform .15s; }
#doc .chip small { font-size: .75rem; font-weight: 500; color: var(--accent2); }
#doc .chip:hover { border-color: rgba(255,138,61,.5); background: rgba(255,138,61,.07); transform: translateY(-1px); }

#doc td.pct { position: relative; font: 400 1.05rem var(--display); letter-spacing: .04em; }
#doc td.pct::before { content: ""; position: absolute; left: 0; bottom: 0; height: 3px; width: var(--p); border-radius: 2px; opacity: .8; }
#doc td.pct.ok { color: var(--green); } #doc td.pct.ok::before { background: var(--green); }
#doc td.pct.bad { color: var(--pink); } #doc td.pct.bad::before { background: var(--pink); }
#doc td.pct.warn { color: var(--accent2); } #doc td.pct.warn::before { background: var(--accent); }
#doc td.key { font-weight: 700; color: var(--ink); white-space: nowrap; }
#doc td code { display: inline-block; min-width: 1.8em; text-align: center; padding: 3px 9px; border-radius: 7px; border: 1px solid var(--line2); border-bottom-width: 3px; background: var(--paper-solid); font-weight: 600; }
#doc .table-wrap { box-shadow: 0 10px 30px -20px rgba(0,0,0,.8); }
#doc h1 { background: linear-gradient(100deg, #FFFFFF 0%, var(--accent2) 70%, var(--violet) 100%); -webkit-background-clip: text; background-clip: text; color: transparent; }
:root[data-theme="light"] #doc h1 { background: none; -webkit-background-clip: initial; color: var(--ink); }
@media (prefers-reduced-motion: no-preference) { html:not(.fx-off) #doc .chip { animation: fx-pop .45s cubic-bezier(.2,1.5,.4,1) both; animation-delay: calc(var(--n) * 35ms); } }

/* 입주 명단 → SOOP 링크 */
#doc a.seat { text-decoration: none; border: 1px solid rgba(255,138,61,.4); color: var(--ink); }
#doc a.seat:hover { border-color: var(--accent); background: rgba(255,138,61,.14); transform: translateY(-2px); box-shadow: 0 10px 24px -12px rgba(255,138,61,.7); }
#doc .seat-go { position: absolute; right: 5px; top: 3px; font-size: .62rem; line-height: 1; color: var(--accent2); opacity: .6; }
.lb-soop { margin-left: 10px; font-size: .78rem; font-weight: 600; padding: 3px 10px; border-radius: 999px; color: var(--accent2); border: 1px solid rgba(255,138,61,.5); background: rgba(255,138,61,.1); }
.lb-soop:hover { background: rgba(255,138,61,.25); }

/* 증강 뽑기: 앞면 공개 후 직접 고르기 */
.gacha-stage.ready:not(.done) .gcard { cursor: pointer; }
.gacha-stage.ready:not(.done) .gcard:hover .gcard-in, .gacha-stage.ready:not(.done) .gcard:focus-visible .gcard-in { transform: rotateY(180deg) translateY(-12px) scale(1.04); }
.gacha-stage.ready:not(.done) .gcard:hover .gfront { box-shadow: 0 0 0 2px var(--c), 0 18px 40px -14px var(--c); }
.gacha-stage:not(.ready) .gcard { cursor: default; }

.gacha-sec { padding-top: 60px; }
.gacha-sec .gacha { margin-top: 0; }

/* 후원 표: 짝 항목 두 줄 */
#doc td .pair { display: block; white-space: nowrap; }
#doc td .pair + .pair { margin-top: 6px; padding-top: 6px; border-top: 1px dashed var(--line); }
#doc tbody td:first-child { white-space: nowrap; font-weight: 700; color: var(--ink); }

.btn.again { background: linear-gradient(135deg, #C9B2FF, var(--violet)); box-shadow: 0 10px 34px -10px rgba(157,123,255,.9); color: #160A2E; }

/* 증강 체험 ↔ 증강 설명 연결 */
#doc .card-try { display: inline-block; margin-top: 10px; font-size: .78rem; font-weight: 700; color: var(--c); border: 0; opacity: .75; }
#doc .card-try:hover { opacity: 1; color: var(--c); }
#doc .card.target .card-in { animation: target 2.2s ease-out; }
@keyframes target { 0%, 60% { box-shadow: 0 0 0 3px var(--c), 0 0 40px 6px var(--c); transform: scale(1.06); } 100% { box-shadow: none; transform: none; } }
.gcard-more { display: none; margin-top: auto; padding-top: 10px; font-size: .78rem; font-weight: 700; color: var(--c); }
.gcard.lit .gcard-more { display: inline-block; }
.gcard-more:hover { text-decoration: underline; }
a.bag-slot { text-decoration: none; position: relative; transition: transform .15s, box-shadow .15s; }
a.bag-slot:hover { transform: translateY(-3px); box-shadow: inset 0 2px 0 var(--c), 0 10px 24px -10px var(--c); }
.bag-go { font-size: .68rem; font-weight: 700; color: var(--c); opacity: .8; }
.gacha-link { margin-top: 10px !important; font-size: .88rem; }
.gacha-link a { color: var(--accent2); font-weight: 700; }

/* =====================================================
   강화 시뮬레이션
   ===================================================== */
.esim { position: relative; padding: 30px clamp(18px, 4vw, 40px) 26px; border-radius: 22px; border: 1px solid var(--line2); overflow: hidden;
  background: radial-gradient(ellipse 60% 80% at 20% 100%, rgba(94,227,154,.10), transparent 60%), radial-gradient(ellipse 50% 70% at 90% 0, rgba(157,123,255,.16), transparent 60%), var(--paper); }
#doc .esim { max-width: none; margin: 10px 0 1.6em; }
.esim-head { text-align: center; max-width: 36em; margin: 0 auto 22px; }
.esim-head h3 { margin: 0 0 8px; font-size: clamp(1.4rem, 3vw, 1.9rem); font-weight: 900; letter-spacing: -.02em; }
#doc .esim-head h3 { font-size: 1.4rem; }
.esim-head p { margin: 0; color: var(--soft); font-size: .95rem; }
.esim-head b { color: var(--accent2); }
.esim-body { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 28px; align-items: center; }
.esim-body.shake { animation: gshake .45s ease-out; }
.esim-pick { display: grid; justify-items: center; gap: 6px; }
.esim-orb { --glow: 0; position: relative; display: grid; place-items: center; width: 150px; height: 150px; border-radius: 50%;
  background: radial-gradient(circle at 50% 40%, rgba(255,255,255,.08), rgba(0,0,0,.25) 70%), var(--paper-solid);
  border: 1px solid var(--line2); box-shadow: 0 0 calc(10px + var(--glow) * 60px) calc(var(--glow) * 14px) rgba(255,198,90,calc(.15 + var(--glow) * .55)), inset 0 0 30px rgba(0,0,0,.6); transition: box-shadow .4s; }
.esim-ico { font-size: 4.2rem; filter: drop-shadow(0 6px 10px rgba(0,0,0,.6)); transition: transform .2s; }
.esim-ring { position: absolute; inset: -8px; border-radius: 50%; border: 2px dashed rgba(157,123,255,.35); }
.esim-orb.charge .esim-ico { animation: charge .5s ease-in infinite; }
.esim-orb.charge .esim-ring { animation: spin .6s linear infinite; border-color: var(--accent); }
.esim-orb.hit.ok { animation: orbok .6s ease-out; }
.esim-orb.hit.bad { animation: orbbad .4s ease-out; }
.esim-orb.hit.warn { animation: orbwarn .6s ease-out; }
@keyframes charge { 0%, 100% { transform: rotate(-8deg) scale(1); } 50% { transform: rotate(8deg) scale(1.08); } }
@keyframes orbok { 0% { box-shadow: 0 0 0 0 rgba(94,227,154,.9); } 100% { box-shadow: 0 0 0 40px rgba(94,227,154,0); } }
@keyframes orbbad { 25% { transform: translateX(-6px); } 75% { transform: translateX(6px); } }
@keyframes orbwarn { 0% { box-shadow: 0 0 0 0 rgba(255,111,174,.9); filter: brightness(.6); } 100% { box-shadow: 0 0 0 40px rgba(255,111,174,0); } }
.esim-pop { position: absolute; top: -6px; left: 50%; transform: translateX(-50%); font: 400 1.6rem var(--display); letter-spacing: .06em; white-space: nowrap; pointer-events: none; animation: pop 1.1s ease-out forwards; }
.esim-pop.ok { color: var(--green); text-shadow: 0 0 14px rgba(94,227,154,.8); } .esim-pop.bad { color: var(--soft); } .esim-pop.warn { color: var(--pink); text-shadow: 0 0 14px rgba(255,111,174,.8); }
@keyframes pop { from { opacity: 0; transform: translate(-50%, 10px) scale(.7); } 20% { opacity: 1; transform: translate(-50%, -14px) scale(1.15); } to { opacity: 0; transform: translate(-50%, -40px) scale(1); } }
.esim-lv { font: 400 2.6rem var(--display); line-height: 1; letter-spacing: .04em; color: var(--accent2); }
.esim-name { font-size: .85rem; color: var(--soft); font-weight: 600; }
.esim-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 14px; }
.esim-stat { display: grid; gap: 4px; padding: 10px 12px; text-align: left; cursor: pointer; font: inherit; color: var(--ink); background: var(--paper-solid); border: 1px solid var(--line2); border-radius: 12px; transition: border-color .15s, background .15s; }
.esim-stat span { font-size: .82rem; color: var(--soft); font-weight: 700; }
.esim-stat b { font: 400 1.3rem var(--display); letter-spacing: .04em; }
.esim-bar { display: block; height: 4px; border-radius: 2px; background: rgba(255,255,255,.08); overflow: hidden; }
.esim-bar i { display: block; height: 100%; width: 0; background: linear-gradient(90deg, var(--accent), #FFC65A); transition: width .4s cubic-bezier(.2,.8,.2,1); }
.esim-stat:hover { border-color: rgba(255,138,61,.5); }
.esim-stat.on { border-color: var(--accent); background: rgba(255,138,61,.1); box-shadow: 0 0 0 1px var(--accent); }
.esim-stat.max b { color: #FFC65A; }
.esim-odds { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: baseline; font-size: .9rem; font-weight: 700; }
.esim-odds b { font: 400 1.3rem var(--display); letter-spacing: .04em; }
.esim-odds .ok, .esim-total .ok { color: var(--green); } .esim-odds .bad, .esim-total .bad { color: var(--soft); } .esim-odds .warn, .esim-total .warn { color: var(--pink); }
.esim-meter { flex-basis: 100%; display: flex; height: 8px; border-radius: 4px; overflow: hidden; margin-top: 4px; background: rgba(255,255,255,.06); }
.esim-meter i { display: block; height: 100%; transition: width .3s; }
.esim-meter i.ok { background: var(--green); } .esim-meter i.bad { background: #5C5475; } .esim-meter i.warn { background: var(--pink); }
.esim-max { margin: 0; color: #FFC65A; font-weight: 700; }
.esim-cost { display: flex; flex-wrap: wrap; gap: 6px 8px; align-items: center; margin: 14px 0; font-size: .85rem; }
.esim-cost span { color: var(--mute); font-weight: 700; margin-right: 4px; }
.esim-cost em { font-style: normal; font-weight: 600; padding: 4px 10px; border-radius: 999px; background: var(--paper-solid); border: 1px solid var(--line2); }
.esim-act { display: flex; flex-wrap: wrap; gap: 8px; }
.esim-act .btn { padding: 10px 20px; cursor: pointer; font: inherit; font-weight: 700; }
.esim-go { min-width: 120px; justify-content: center; }
.esim-act .btn:disabled { opacity: .45; cursor: default; transform: none; }
.esim-foot { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 18px; margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.esim-total { display: flex; flex-wrap: wrap; gap: 6px 14px; align-content: start; font-size: .85rem; color: var(--soft); font-weight: 600; }
.esim-total b { color: var(--ink); font-weight: 800; }
.esim-total .ok b { color: var(--green); } .esim-total .warn b { color: var(--pink); }
.esim-log { list-style: none; margin: 0 !important; padding: 0 !important; font-size: .82rem; }
#doc .esim-log li::before { content: none; display: none; }
#doc .esim-log > li { margin: 0; padding: 3px 0 3px 12px; border-left: 3px solid var(--line2); color: var(--soft); }
.esim-log li { padding: 3px 0 3px 12px; border-left: 3px solid var(--line2); color: var(--soft); }
.esim-log li:first-child { color: var(--ink); font-weight: 700; }
.esim-log li.ok { border-color: var(--green); } .esim-log li.warn { border-color: var(--pink); }
.esim-sec { padding-top: 40px; }
.esim-sec .gacha-link { text-align: center; }
@media (max-width: 720px) {
  .esim-body { grid-template-columns: 1fr; gap: 18px; }
  .esim-orb { width: 120px; height: 120px; } .esim-ico { font-size: 3.4rem; }
  .esim-foot { grid-template-columns: 1fr; }
  .esim-stat { padding: 8px; } .esim-stat b { font-size: 1.1rem; }
}

.lightbox img.linked { cursor: pointer; transition: box-shadow .2s; }
.lightbox img.linked:hover { box-shadow: 0 30px 80px rgba(0,0,0,.8), 0 0 0 2px var(--accent), 0 0 30px rgba(255,138,61,.5); }

/* 사진첩 찾기 */
#doc .gal-find { position: relative; display: flex; align-items: center; margin: 0 0 14px; max-width: 420px; }
#doc .gal-find svg { position: absolute; left: 14px; width: 20px; height: 20px; color: var(--mute); pointer-events: none; }
#doc .gal-find input { width: 100%; height: 46px; padding: 0 84px 0 44px; border: 1px solid var(--line2); border-radius: 12px; background: var(--paper); color: var(--ink); font: inherit; font-size: .95rem; transition: border-color .15s, box-shadow .15s; }
#doc .gal-find input::placeholder { color: var(--mute); }
#doc .gal-find input:focus { outline: 0; border-color: var(--accent); box-shadow: 0 0 0 3px rgba(255,138,61,.18); }
#doc .gal-hit { position: absolute; right: 14px; font-size: .8rem; font-weight: 700; color: var(--accent2); }
#doc .gal-item[hidden] { display: none; }
#doc .gal-none { color: var(--soft); padding: 14px 16px; border: 1px dashed var(--line2); border-radius: 10px; }

/* 문서 그림 크게 보기 */
#doc img:not(.gal-item img) { cursor: zoom-in; }
.zoom { position: fixed; inset: 0; z-index: 70; display: none; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 50px 12px 20px; background: #07040F; }
.zoom.open { display: flex; }
.zoom-in { max-width: 100%; max-height: 82vh; overflow: auto; border-radius: 12px; -webkit-overflow-scrolling: touch; }
.zoom-in img { display: block; max-height: 82vh; width: auto; max-width: none; border-radius: 12px; }
@media (min-width: 900px) { .zoom-in img { max-width: 94vw; } .zoom-tip { display: none; } }
.zoom-x { position: absolute; top: 14px; right: 14px; width: 42px; height: 42px; border-radius: 50%; border: 1px solid rgba(255,255,255,.2); background: rgba(255,255,255,.08); color: #fff; font-size: 1rem; cursor: pointer; }
.zoom-tip { margin: 0; font-size: .78rem; color: #9B92B3; }
.zoom.open .zoom-in { animation: lbin .3s cubic-bezier(.2,.8,.2,1); }

/* 밝은 화면: 등급 색 글자 대비 올리기 */
:root[data-theme="light"] .tier-en, :root[data-theme="light"] .tier-n, :root[data-theme="light"] .tier-go,
:root[data-theme="light"] #doc .card-tier, :root[data-theme="light"] #doc .card-try,
:root[data-theme="light"] .gfront .card-tier, :root[data-theme="light"] .gcard-more,
:root[data-theme="light"] .bag-slot.on .card-tier, :root[data-theme="light"] .bag-go { color: color-mix(in srgb, var(--c) 50%, #1B1530); }

/* ---------- 줄바꿈 다듬기 ---------- */
h1, h2, h3, h4, .hero-tag, .feat h3, .doc-card b, blockquote strong { text-wrap: balance; }
p, li, td, th, blockquote, .feat p, .doc-card p, .api-card p { text-wrap: pretty; }
#doc :not(pre) > code { white-space: nowrap; }
#doc td, #doc th { overflow-wrap: break-word; }
.nw { white-space: nowrap; }

/* 사진 제작 표기 */
#doc .credit-wrap { position: relative; display: inline-block; max-width: 100%; line-height: 0; }
#doc .credit-wrap img { display: block; }
#doc .credit { position: absolute; right: 10px; bottom: 10px; display: flex; flex-direction: column; align-items: flex-end; gap: 2px; padding: 6px 10px; border-radius: 8px;
  background: rgba(8, 5, 16, .62); color: #F2EEFA; font-size: .74rem; font-weight: 600; line-height: 1.35; letter-spacing: .01em; pointer-events: none; white-space: nowrap; }
@media (max-width: 640px) { #doc .credit { right: 6px; bottom: 6px; padding: 4px 7px; font-size: .62rem; } }

/* 제작진 표기 (> [!제작]) */
#doc .staff { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: -.2em 0 1.2em; font-size: .84rem; color: var(--soft); }
#doc .staff span { display: inline-flex; align-items: center; gap: 8px; padding: 5px 12px; border: 1px solid var(--line2); border-radius: 99px; background: var(--paper); white-space: nowrap; }
#doc .staff b { font-weight: 600; color: var(--mute); font-size: .78rem; }
#doc .staff b::after { content: ""; display: inline-block; width: 1px; height: .8em; margin-left: 8px; background: var(--line2); vertical-align: -1px; }

/* 영상 바둑판 (아이템 이펙트 등) */
#doc .vgrid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 14px; margin: 1em 0 1.6em; }
#doc .vgrid figure { margin: 0; border: 1px solid var(--line2); border-radius: 12px; overflow: hidden; background: var(--paper); }
#doc .vgrid video { cursor: zoom-in; margin: 0; border: 0; border-radius: 0; width: 100%; aspect-ratio: 16 / 8.5; object-fit: cover; }
#doc .vgrid figcaption { padding: 8px 12px; font-size: .9rem; font-weight: 700; color: var(--ink); }
@media (min-width: 1300px) { #doc .vgrid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (max-width: 560px) { #doc .vgrid { grid-template-columns: minmax(0, 1fr); } }

/* 증강 카드 속 주의 줄 */
.card-warn { display: flex; gap: 6px; align-items: flex-start; margin: 8px 0 0 !important; padding: 7px 9px; border-radius: 8px;
  background: rgba(255, 92, 122, .14); border: 1px solid rgba(255, 92, 122, .45); color: #FFD3DC !important; font-size: .8rem; line-height: 1.45; }
.card-warn b { flex: none; color: #FF7A93; font-weight: 800; }
:root[data-theme="light"] .card-warn { background: #FFE9EE; color: #9B1C38 !important; border-color: #F4A3B4; }
:root[data-theme="light"] .card-warn b { color: #C8193F; }

/* 메뉴가 많을 때(노트북 폭): 검색은 돋보기 버튼으로 접기 */
@media (min-width: 781px) and (max-width: 1360px) {
  .search { flex: 0 0 40px; max-width: 40px; margin-left: auto; }
  .search input { padding: 0; color: transparent; cursor: pointer; }
  .search input::placeholder { color: transparent; }
  .search::after { display: none; }
  .search.open { flex: 0 0 300px; max-width: 300px; }
  .search.open input { padding: 0 14px 0 40px; color: var(--ink); cursor: text; background: var(--paper-solid); }
  .search.open input::placeholder { color: var(--mute); }
  .search.open ~ * { }
  .top:has(.search.open) #topnav { display: none; }
}