/* ============================================================
   에피쿠스 아카데미 — 사관학교 나이트
   ============================================================ */

:root{
  --ink:      #0a0e1c;
  --ink-deep: #060912;
  --card:     #131a30;
  --card-hi:  #1a2342;
  --line:     rgba(201,162,39,.22);
  --line-soft:rgba(201,162,39,.10);

  --brass:      #c9a227;
  --brass-lt:   #e6c766;
  --brass-dim:  #8a7020;

  --ivory:  #e8e3d6;
  --muted:  #9aa3bd;
  --faint:  #5f6b8a;

  --y1: #4a7c52;
  --y2: #3d6fa8;
  --y3: #a83a3a;
  --prof: #c9a227;

  --rift: #7b6cff;

  /* Cormorant Garamond — 획 대비가 크고 세리프가 날카로운 고전 서체.
     한글 글리프가 없어 자동으로 Nanum Myeongjo(역시 대비가 강한 명조)로 넘어갑니다. */
  --serif: 'Cormorant Garamond','Nanum Myeongjo',Georgia,serif;
  --sans: 'Pretendard','Pretendard Variable',-apple-system,BlinkMacSystemFont,'Noto Sans KR','Malgun Gothic',sans-serif;

  --nav-h: 58px;
  --maxw: 1180px;
}

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

html{ scroll-behavior:smooth; scroll-padding-top:var(--nav-h); }
@media (prefers-reduced-motion:reduce){ html{ scroll-behavior:auto; } }

body{
  margin:0;
  background:var(--ink);
  color:var(--ivory);
  font-family:var(--sans);
  font-size:15px;
  line-height:1.85;
  -webkit-font-smoothing:antialiased;
  letter-spacing:-.005em;
  overflow-x:hidden;
}
body.locked{ overflow:hidden; }

img{ max-width:100%; display:block; }
a{ color:inherit; text-decoration:none; }
button{ font-family:inherit; color:inherit; cursor:pointer; }

/* 배경 텍스처: 옅은 격자 + 상단 광원 */
body::before{
  content:''; position:fixed; inset:0; pointer-events:none; z-index:0;
  background:
    radial-gradient(1100px 620px at 50% -8%, rgba(61,111,168,.16), transparent 62%),
    radial-gradient(760px 520px at 88% 104%, rgba(201,162,39,.07), transparent 60%),
    repeating-linear-gradient(0deg, rgba(255,255,255,.014) 0 1px, transparent 1px 3px);
}

/* ─────────── 공통 파츠 ─────────── */
.wrap{ width:min(100% - 40px, var(--maxw)); margin-inline:auto; }

.rule{
  height:1px; border:0; margin:0;
  background:linear-gradient(90deg,transparent,var(--line),transparent);
}

/* 금장 코너 장식 */
.ornate{ position:relative; }
.ornate::before,.ornate::after{
  content:''; position:absolute; width:13px; height:13px; pointer-events:none;
  border:1px solid var(--brass); opacity:.5; transition:opacity .3s;
}
.ornate::before{ top:-1px; left:-1px; border-right:0; border-bottom:0; }
.ornate::after{ bottom:-1px; right:-1px; border-left:0; border-top:0; }
.ornate:hover::before,.ornate:hover::after{ opacity:1; }

/* 등급 배지 */
.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:36px; height:21px; padding:0 8px;
  font-family:var(--serif); font-size:13px; font-weight:700;
  letter-spacing:.09em; line-height:1;
  border:1px solid var(--brass-dim); color:var(--brass-lt);
  background:rgba(201,162,39,.07);
  border-radius:2px; white-space:nowrap;
}
/* V등급 셋 — PV 적색 · EV 청색 · XV 금색 */
.badge.pv{
  border-color:#c2503c; color:#ffeae4;
  background:linear-gradient(180deg,#d2573f,#962f26);
  box-shadow:0 0 12px rgba(200,72,50,.34);
}
.badge.ev{
  border-color:#4185c4; color:#e8f2ff;
  background:linear-gradient(180deg,#4e94d2,#255a91);
  box-shadow:0 0 12px rgba(70,135,205,.34);
}
.badge.xv{
  border-color:var(--brass); color:#241c05;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  box-shadow:0 0 12px rgba(201,162,39,.32);
}
.badge.unknown{
  border-color:rgba(123,108,255,.6); color:#c9c2ff;
  background:rgba(123,108,255,.12); font-size:11px; letter-spacing:.04em;
}

.apt{
  font-size:11.5px; letter-spacing:.04em; color:var(--muted);
  border:1px solid rgba(154,163,189,.24); border-radius:2px;
  padding:2px 7px; line-height:1.5; white-space:nowrap;
}

/* ─────────── 표지 — 끌어서 넘기는 첫 장 ─────────── */
#gate{
  position:fixed; inset:0; z-index:200;
  perspective:2400px; perspective-origin:34% 50%;
  touch-action:none; overflow:hidden;
}
#gate.gone{ opacity:0; visibility:hidden; transition:opacity .5s ease, visibility .5s; }

.gate-page{
  position:absolute; inset:0;
  transform-origin:left center;
  transform-style:preserve-3d;
  will-change:transform;
  cursor:grab;
}
.gate-page:active{ cursor:grabbing; }
.gate-page.turning{ transition:transform .95s cubic-bezier(.5,.02,.24,1); }
.gate-page.snapback{ transition:transform .55s cubic-bezier(.2,.9,.3,1); }

.gate-face{
  position:absolute; inset:0;
  backface-visibility:hidden; -webkit-backface-visibility:hidden;
  display:grid; place-items:center; text-align:center; padding:28px;
  overflow:hidden;
}
.gate-face.front{
  background:
    radial-gradient(760px 460px at 50% 36%, rgba(61,111,168,.15), transparent 65%),
    var(--ink-deep);
}
/* 금박 책배 */
.gate-face.front::after{
  content:''; position:absolute; top:0; right:0; bottom:0; width:4px;
  background:linear-gradient(180deg,transparent,var(--brass) 22%,var(--brass-lt) 50%,var(--brass) 78%,transparent);
  opacity:.55;
}
.gate-face.back{
  transform:rotateY(180deg);
  background:
    repeating-linear-gradient(90deg, rgba(201,162,39,.035) 0 1px, transparent 1px 7px),
    linear-gradient(120deg,#0d1326,#060912);
}
.gate-shade{
  position:absolute; inset:0; pointer-events:none; opacity:0;
  background:linear-gradient(90deg, rgba(0,0,0,.72), rgba(0,0,0,.22) 42%, transparent 72%);
}

/* 오른쪽 가장자리 손잡이 */
.gate-grip{
  position:absolute; right:16px; top:50%; transform:translateY(-50%);
  display:flex; flex-direction:column; gap:5px; pointer-events:none;
}
.gate-grip i{ width:2px; height:26px; background:var(--brass); opacity:.3; border-radius:1px; }
.gate-grip i:nth-child(2){ opacity:.5; }

.gate-in{ max-width:560px; animation:riseIn 1.5s cubic-bezier(.16,.9,.3,1) both; }
/* 문장 — 점선 고리와 본체를 겹쳐 고리만 천천히 돕니다 */
.crest{
  position:relative; display:block; width:112px; aspect-ratio:1/1;
  margin:0 auto 26px; opacity:.95;
}
.crest img{
  position:absolute; inset:0; width:100%; height:100%;
  object-fit:contain; display:block;
}
.crest .ring{ transform-origin:50% 50%; animation:slowSpin 44s linear infinite; }
.crest-watermark{ width:300px; margin:0; opacity:.1; }
.gate-kicker{
  font-family:var(--serif); font-size:12px; letter-spacing:.30em;
  color:var(--brass); text-transform:uppercase; margin:0 0 20px; padding-left:.30em;
}
.gate-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(30px,6.4vw,50px); line-height:1.24; margin:0 0 26px;
  letter-spacing:.02em;
}
.gate-lines{ color:var(--muted); font-size:14.5px; line-height:2.15; margin:0 0 42px; }
.gate-lines em{ color:var(--ivory); font-style:normal; }

.gate-btn{
  position:relative; background:transparent;
  border:1px solid var(--brass); color:var(--brass-lt);
  font-family:var(--serif); font-size:16px; font-weight:600;
  letter-spacing:.2em; padding:17px 44px 17px 47px;
  transition:.4s cubic-bezier(.2,.8,.3,1); overflow:hidden;
}
.gate-btn::after{
  content:''; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  transform:scaleY(0); transform-origin:bottom; transition:transform .4s cubic-bezier(.2,.8,.3,1);
}
.gate-btn:hover{ color:#241c05; box-shadow:0 0 34px rgba(201,162,39,.3); }
.gate-btn:hover::after{ transform:scaleY(1); }
.gate-btn > span{ position:relative; z-index:1; display:inline-flex; align-items:center; gap:14px; }
.gate-btn svg{ width:40px; height:8px; flex:none; animation:tug 2.1s ease-in-out infinite; }
@keyframes tug{ 0%,100%{ transform:translateX(4px); opacity:.55; } 50%{ transform:translateX(-4px); opacity:1; } }

@keyframes riseIn{ from{ opacity:0; transform:translateY(26px); } to{ opacity:1; transform:none; } }
@keyframes slowSpin{ to{ transform:rotate(360deg); } }

/* ─────────── 본문 ───────────
   표지 뒤에 처음부터 놓여 있습니다. 장을 넘기면 그대로 드러납니다. */
#site{ position:relative; z-index:1; }

/* ─────────── 내비게이션 ─────────── */
#nav{
  position:sticky; top:0; z-index:90; height:var(--nav-h);
  background:rgba(8,11,22,.86);
  backdrop-filter:blur(14px); -webkit-backdrop-filter:blur(14px);
  border-bottom:1px solid var(--line);
}
.nav-in{ height:100%; display:flex; align-items:center; gap:22px; }
.nav-mark{
  display:flex; align-items:center; gap:9px; flex:none;
  font-family:var(--serif); font-size:15px; font-weight:700;
  letter-spacing:.14em; color:var(--brass-lt); white-space:nowrap;
}
.nav-mark img{ width:23px; height:23px; flex:none; object-fit:contain; }
.nav-links{
  display:flex; gap:2px; overflow-x:auto; scrollbar-width:none;
  margin-left:auto; -webkit-overflow-scrolling:touch;
}
.nav-links::-webkit-scrollbar{ display:none; }
.nav-links a{
  position:relative; flex:none; padding:8px 11px;
  font-size:13px; color:var(--muted); letter-spacing:.02em;
  transition:color .25s; white-space:nowrap;
}
.nav-links a::after{
  content:''; position:absolute; left:11px; right:11px; bottom:2px; height:1px;
  background:var(--brass); transform:scaleX(0); transition:transform .3s;
}
.nav-links a:hover{ color:var(--ivory); }
.nav-links a.active{ color:var(--brass-lt); }
.nav-links a.active::after{ transform:scaleX(1); }

/* ─────────── 히어로 ─────────── */
#hero{
  position:relative; min-height:calc(100svh - var(--nav-h));
  display:grid; place-items:center; text-align:center; padding:80px 20px 110px;
}
.crest.hero-crest{ width:136px; margin:0 auto 32px; opacity:.95; }
.hero-latin{
  font-family:var(--serif); font-size:clamp(11px,2vw,13px);
  letter-spacing:.34em; color:var(--brass); margin:0 0 22px; padding-left:.34em;
}
.hero-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(42px,9vw,86px); line-height:1.06; margin:0 0 28px;
  letter-spacing:.01em;
}
.hero-sub{
  max-width:640px; margin:0 auto; color:var(--muted);
  font-size:clamp(14px,2.4vw,16px); line-height:2.1;
}
.hero-sub strong{ color:var(--ivory); font-weight:500; }
.ties{ display:flex; justify-content:center; gap:0; margin:44px auto 0; width:210px; }
.ties i{ height:3px; flex:1; opacity:.85; }
.scroll-cue{
  position:absolute; bottom:34px; left:50%; transform:translateX(-50%);
  font-family:var(--serif); font-size:10.5px; letter-spacing:.28em; color:var(--faint);
  display:flex; flex-direction:column; align-items:center; gap:10px; padding-left:.4em;
}
.scroll-cue b{ display:block; width:1px; height:38px; background:linear-gradient(var(--brass),transparent); }

/* ─────────── 페이지 전환 ───────────
   화면만 갈아끼울 뿐 문서는 그대로 — 오디오는 건드리지 않습니다. */
#view{
  transition:opacity .34s cubic-bezier(.2,.8,.3,1), transform .34s cubic-bezier(.2,.8,.3,1);
}
#view.swap{ opacity:0; transform:translateY(8px); }
@media (prefers-reduced-motion:reduce){
  #view{ transition:none; }
  #view.swap{ opacity:1; transform:none; }
}

/* ─────────── 페이지 머리 ─────────── */
.page-head{
  padding:78px 0 46px; text-align:center;
  border-bottom:1px solid var(--line-soft);
  background:radial-gradient(820px 320px at 50% 0%, rgba(61,111,168,.15), transparent 70%);
}
.page-head .sec-latin{ margin-bottom:18px; }
.page-title{
  font-family:var(--serif); font-weight:700; line-height:1.18; margin:0;
  font-size:clamp(32px,6.4vw,54px); letter-spacing:.015em;
}
.page-note{ margin:18px auto 0; max-width:640px; color:var(--muted); font-size:14px; line-height:2; }



/* ─────────── 홈 자료실 인덱스 ─────────── */
.card.idx{ display:flex; flex-direction:column; }
.card.idx .lt{ margin:0 0 7px; }
.card.idx h3{ margin:0 0 11px; }
.card.idx .go{
  margin-top:auto; padding-top:20px;
  font-family:var(--serif); font-size:12px; letter-spacing:.16em;
  color:var(--brass); padding-left:.22em; transition:color .3s, letter-spacing .3s;
}
.card.idx:hover{ transform:translateY(-4px); border-color:var(--line); box-shadow:0 16px 40px rgba(0,0,0,.48); }
.card.idx:hover .go{ color:var(--brass-lt); letter-spacing:.24em; }

/* ─────────── 섹션 ─────────── */
.sec{ padding:96px 0; position:relative; }
.sec + .sec{ border-top:1px solid var(--line-soft); }

.sec-head{ text-align:center; margin-bottom:56px; }
.sec-latin{
  display:inline-flex; align-items:center; gap:16px;
  font-family:var(--serif); font-size:11.5px; letter-spacing:.28em;
  color:var(--brass); text-transform:uppercase; margin:0 0 16px; padding-left:.42em;
}
.sec-latin::before,.sec-latin::after{ content:''; width:32px; height:1px; background:var(--brass); opacity:.5; }
.sec-title{
  font-family:var(--serif); font-weight:700;
  font-size:clamp(27px,5vw,40px); line-height:1.3; margin:0;
}
.sec-note{ margin:16px auto 0; max-width:620px; color:var(--muted); font-size:14px; }
.center-latin{ display:flex; justify-content:center; margin:48px 0 22px; }

/* 본문 강조 */
.hi{ color:var(--ivory); font-weight:500; }
.hi-brass{ color:var(--brass-lt); font-weight:500; }

/* 유틸 그리드 */
.grid{ display:grid; gap:18px; }
.g2{ grid-template-columns:repeat(auto-fit,minmax(300px,1fr)); }
.g3{ grid-template-columns:repeat(auto-fill,minmax(268px,1fr)); }
.g4{ grid-template-columns:repeat(auto-fill,minmax(212px,1fr)); }

/* 일반 카드 */
.card{
  background:linear-gradient(160deg,var(--card),rgba(10,14,28,.9));
  border:1px solid var(--line-soft); padding:26px 24px;
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.card:hover{ border-color:var(--line); }
.card h3{
  font-family:var(--serif); font-size:20px; font-weight:700;
  margin:0 0 4px; letter-spacing:.01em;
}
.card .lt{
  font-family:var(--serif); font-size:11px; letter-spacing:.18em;
  color:var(--brass); text-transform:uppercase; margin:0 0 14px; padding-left:.26em;
}
.card p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.95; }

/* 정의 목록 */
.deflist{ margin:0; }
.deflist > div{
  display:grid; grid-template-columns:106px 1fr; gap:18px;
  padding:15px 0; border-bottom:1px solid var(--line-soft);
}
.deflist > div:last-child{ border-bottom:0; }
.deflist dt{
  font-family:var(--serif); font-weight:700; font-size:15px;
  color:var(--brass-lt); letter-spacing:.03em;
}
.deflist dd{ margin:0; color:var(--muted); font-size:13.5px; }
.deflist dd b{ color:var(--ivory); font-weight:500; }

/* 이미지 슬롯 + 문장 플레이스홀더 */
.slot{ position:relative; overflow:hidden; background:var(--ink-deep); }
.slot img{ width:100%; height:100%; object-fit:cover; transition:transform .8s cubic-bezier(.2,.8,.3,1), opacity .5s; }
.slot img.pending{ opacity:0; }
.ph{
  position:absolute; inset:0; display:grid; place-items:center; gap:9px;
  background:
    repeating-linear-gradient(135deg, rgba(201,162,39,.045) 0 1px, transparent 1px 9px),
    linear-gradient(160deg,var(--card-hi),var(--ink-deep));
}
.ph .mono{
  font-family:var(--serif); font-size:30px; font-weight:700;
  color:rgba(201,162,39,.34); letter-spacing:.05em; line-height:1;
}
.ph .cap{ font-size:9.5px; letter-spacing:.24em; color:rgba(154,163,189,.34); padding-left:.24em; }

/* ─────────── 균열 등급 ─────────── */
.rifts{ display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; }
.rift-step{
  border:1px solid var(--line-soft); padding:20px 16px; text-align:center;
  background:linear-gradient(180deg,rgba(123,108,255,.05),transparent);
  transition:border-color .3s, background .3s;
}
.rift-step:hover{ border-color:rgba(123,108,255,.4); background:linear-gradient(180deg,rgba(123,108,255,.12),transparent); }
.rift-step .n{
  font-family:var(--serif); font-size:30px; font-weight:700;
  color:var(--brass-lt); line-height:1; margin-bottom:10px; letter-spacing:.06em;
}
.rift-step .t{ font-size:12.5px; color:var(--muted); }
.rift-step.named{ border-color:rgba(123,108,255,.42); background:linear-gradient(180deg,rgba(123,108,255,.12),transparent); }
.rift-step.named .n{ color:#b7aeff; }
.rift-step .t b{ color:#b7aeff; font-weight:500; }

/* ─────────── 등급 체계 ─────────── */
.vtiers{ display:grid; grid-template-columns:repeat(auto-fit,minmax(232px,1fr)); gap:16px; margin-top:22px; }
.vtier{
  border:1px solid var(--line); padding:24px 22px; text-align:center;
  background:linear-gradient(180deg,rgba(201,162,39,.06),transparent);
}
.vtier .k{
  font-family:var(--serif); font-size:38px; font-weight:700; line-height:1;
  color:var(--brass-lt); letter-spacing:.08em; margin-bottom:12px;
  text-shadow:0 0 24px rgba(201,162,39,.3);
}
.vtier .d{ font-size:13px; color:var(--muted); }
/* 등급별 색 */
.vtier.pv{ border-color:rgba(194,80,60,.45); background:linear-gradient(180deg,rgba(194,80,60,.09),transparent); }
.vtier.pv .k{ color:#e88a74; text-shadow:0 0 24px rgba(200,72,50,.36); }
.vtier.ev{ border-color:rgba(65,133,196,.45); background:linear-gradient(180deg,rgba(65,133,196,.09),transparent); }
.vtier.ev .k{ color:#7db6e8; text-shadow:0 0 24px rgba(70,135,205,.36); }

/* ─────────── 학적부 ─────────── */
.filters{ display:flex; flex-wrap:wrap; justify-content:center; gap:8px; margin-bottom:34px; }
.filters button{
  background:transparent; border:1px solid var(--line-soft);
  color:var(--muted); font-size:12.5px; letter-spacing:.09em;
  padding:8px 18px; transition:.3s; border-radius:2px;
}
.filters button:hover{ color:var(--ivory); border-color:var(--line); }
.filters button.on{ color:#241c05; background:linear-gradient(180deg,var(--brass-lt),var(--brass)); border-color:var(--brass); font-weight:600; }

.roster{ display:grid; grid-template-columns:repeat(auto-fill,minmax(196px,1fr)); gap:16px; }

.pc{
  position:relative; text-align:left; padding:0; overflow:hidden;
  background:linear-gradient(170deg,var(--card),rgba(10,14,28,.92));
  border:1px solid var(--line-soft); border-left:3px solid var(--tie,var(--brass));
  transition:transform .4s cubic-bezier(.2,.8,.3,1), border-color .35s, box-shadow .4s;
  display:block; width:100%;
}
.pc:hover{ transform:translateY(-5px); border-color:var(--line); box-shadow:0 16px 40px rgba(0,0,0,.5); }
.pc:hover .slot img{ transform:scale(1.06); }
.pc .slot{ aspect-ratio:4/5; }
/* 사진 아래쪽만 살짝 어둡게 해 카드 본문으로 자연스럽게 이어지게 합니다.
   (예전 .veil은 카드 하단 58%를 덮어 이름과 소개 문구까지 가렸습니다) */
.pc .slot::after{
  content:''; position:absolute; left:0; right:0; bottom:0; height:26%;
  background:linear-gradient(transparent,rgba(10,14,28,.5));
  pointer-events:none; z-index:1;
}
.pc .grade{ position:absolute; top:10px; right:10px; z-index:2; }
.pc .body{ padding:15px 16px 18px; }
.pc .nm{ font-family:var(--serif); font-size:17.5px; font-weight:700; line-height:1.35; margin:0 0 5px; }
.pc .tg{ font-size:11.5px; color:var(--brass); letter-spacing:.05em; margin:0 0 11px; }
.pc .meta{ display:flex; flex-wrap:wrap; gap:6px; align-items:center; }
.pc .org{ font-size:11.5px; color:var(--faint); }
.pc .yr{
  position:absolute; top:10px; left:10px; z-index:2;
  font-size:10px; letter-spacing:.12em; padding:3px 8px; border-radius:2px;
  background:rgba(6,9,18,.78); border:1px solid var(--tie); color:var(--tie);
}

/* ─────────── 3분류 카드 (16:9) ─────────── */
.card.fac{ padding:0; display:flex; flex-direction:column; overflow:hidden; }
.fac .slot{ aspect-ratio:1216/832; }
.fac:hover .slot img{ transform:scale(1.05); }
.fac .body{ padding:20px 22px 24px; }

/* ─────────── 배너 플레이트 (시설 · 지역) ─────────── */
.plates{ display:grid; gap:22px; }
.plate{
  background:linear-gradient(170deg,var(--card),rgba(10,14,28,.92));
  border:1px solid var(--line-soft); overflow:hidden;
  transition:border-color .35s, transform .35s, box-shadow .35s;
}
.plate:hover{ border-color:var(--line); transform:translateY(-3px); box-shadow:0 18px 46px rgba(0,0,0,.5); }
.plate:hover .slot img{ transform:scale(1.03); }
.slot.banner{ aspect-ratio:1216/256; }
.plate .body{ padding:22px 26px 26px; }
.plate .head{ display:flex; align-items:baseline; gap:13px; flex-wrap:wrap; margin-bottom:12px; }
.plate .head h3{ font-family:var(--serif); font-size:21px; font-weight:700; margin:0; letter-spacing:.01em; }
.plate .head .lt{
  margin:0; font-family:var(--serif); font-size:11px; letter-spacing:.17em;
  color:var(--brass); text-transform:uppercase; padding-left:.24em;
}
.plate .body > p{ margin:0; color:var(--muted); font-size:13.5px; line-height:1.95; }
.plate .tagline{
  font-size:11px; letter-spacing:.18em; color:var(--brass);
  border:1px solid var(--line); padding:2px 10px; border-radius:2px; padding-left:calc(.18em + 10px);
}
.plate .named{
  margin-top:16px !important; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--faint) !important;
}
.plate .named b{ color:var(--ivory); font-weight:500; }

/* ─────────── 네임드 마물 ─────────── */
.card.nmd{ padding:0; }
.nmd{ overflow:hidden; position:relative; }
.nmd .slot{ aspect-ratio:1216/832; }
.nmd:hover .slot img{ transform:scale(1.05); }
.nmd .body{ padding:24px 26px 26px; }
.nmd h3{ display:flex; align-items:baseline; gap:12px; flex-wrap:wrap; margin-bottom:6px; }
.nmd .rg{ font-size:11px; letter-spacing:.16em; color:var(--brass); }
.nmd .lead{ font-family:var(--serif); font-size:16px; color:var(--ivory); margin:0 0 14px; }
.nmd .body p{ margin:0 0 10px; }
.nmd .pw{
  margin-top:16px; padding-top:14px; border-top:1px solid var(--line-soft);
  font-size:12.5px; color:var(--muted);
}
.nmd .pw b{ color:var(--brass-lt); font-weight:500; letter-spacing:.08em; font-size:11px; display:block; margin-bottom:4px; }

.seal-btn{
  position:relative; width:100%; margin-top:18px;
  background:rgba(123,108,255,.06); border:1px dashed rgba(123,108,255,.45);
  color:#b7aeff; font-size:12px; letter-spacing:.2em; padding:12px;
  transition:.3s; overflow:hidden; padding-left:calc(.2em + 12px);
}
.seal-btn:hover{ background:rgba(123,108,255,.16); border-style:solid; color:#dcd7ff; }
.seal-btn::before{
  content:''; position:absolute; inset:0;
  background:linear-gradient(100deg,transparent 42%,rgba(123,108,255,.28) 50%,transparent 58%);
  transform:translateX(-100%); animation:sweep 3.4s ease-in-out infinite;
}
@keyframes sweep{ 0%,62%{ transform:translateX(-100%); } 88%,100%{ transform:translateX(100%); } }

/* ─────────── 대륙 지도 ─────────── */
.mapwrap{ margin:0; border:1px solid var(--line); background:#070c18; }
.map{ display:block; width:100%; height:auto; }
.mapwrap figcaption{
  padding:12px 16px; border-top:1px solid var(--line-soft);
  font-size:11.5px; letter-spacing:.06em; color:var(--faint); text-align:center;
}
.map .m-ko{ font-family:var(--serif); font-weight:700; font-size:29px; fill:#f3e4b4; letter-spacing:.05em; }
.map .m-lat{ font-family:var(--serif); font-size:12px; letter-spacing:.2em; fill:#c9a227; }
.map .np{
  fill:rgba(8,12,24,.76); stroke:rgba(201,162,39,.5); stroke-width:1.2;
  transition:fill .25s, stroke .25s;
}
/* 나라 영역 */
.map .area{
  fill:var(--tint); fill-opacity:.16;
  stroke:var(--tint); stroke-opacity:.65; stroke-width:2.5;
  stroke-linejoin:round; cursor:pointer;
  transition:fill-opacity .25s, stroke-opacity .25s;
}
.map .area.center{ fill-opacity:.1; stroke-dasharray:9 7; cursor:default; pointer-events:none; }
.map .area.hot{ fill-opacity:.34; stroke-opacity:1; }

.map .rg[data-region]{ cursor:pointer; }
.map .rg text{ transition:fill .25s; }
.map .rg.center{ pointer-events:none; }
.map .rg.center .np{ fill:rgba(8,12,24,.88); stroke:rgba(230,199,102,.85); stroke-width:1.6; }
.map .rg.center .m-ko{ font-size:26px; fill:#fff3d0; }
.map .rg.hot .np{ fill:rgba(201,162,39,.94); stroke:#e6c766; }
.map .rg.hot .m-ko{ fill:#1a1405; }
.map .rg.hot .m-lat{ fill:#3a2d08; }
.map .rg:focus{ outline:none; }
.map image{ cursor:zoom-in; }

/* 지도에서 넘어왔을 때 해당 항목을 잠깐 밝힘 */
@keyframes plateFlash{
  0%,100%{ border-color:var(--line-soft); box-shadow:none; }
  18%,55%{ border-color:var(--brass); box-shadow:0 0 0 1px var(--brass), 0 18px 46px rgba(201,162,39,.22); }
}
.plate.flash{ animation:plateFlash 1.8s ease both; }

/* ─────────── 이미지 확대 ─────────── */
.slot img{ cursor:zoom-in; }
.pc .slot img{ cursor:inherit; }
.zoom{
  position:fixed; inset:0; z-index:170; display:none;
  background:rgba(4,6,13,.94); backdrop-filter:blur(6px); -webkit-backdrop-filter:blur(6px);
  padding:56px 24px 64px; place-items:center;
}
.zoom.on{ display:grid; animation:fadeIn .22s ease both; }
.zoom img{
  max-width:min(96vw,1400px); max-height:82vh; width:auto; height:auto;
  object-fit:contain; border:1px solid var(--line);
  box-shadow:0 30px 90px rgba(0,0,0,.7); cursor:zoom-out;
  animation:riseIn .4s cubic-bezier(.16,.9,.3,1) both;
}
.zoom-cap{
  position:absolute; left:0; right:0; bottom:22px; margin:0; text-align:center;
  font-size:12px; letter-spacing:.1em; color:var(--muted);
}
.zoom-close{
  position:absolute; top:18px; right:22px;
  width:38px; height:38px; border-radius:50%;
  background:rgba(10,14,28,.8); border:1px solid var(--line);
  color:var(--muted); font-size:15px; line-height:1; transition:.25s;
}
.zoom-close:hover{ color:var(--brass-lt); border-color:var(--brass); }

/* ─────────── 봉인된 기록 (인물 · 네임드 카드 안) ─────────── */
.arcbox{
  margin-top:22px; padding:20px 22px;
  border:1px solid rgba(123,108,255,.34);
  background:linear-gradient(160deg,rgba(123,108,255,.09),rgba(10,14,28,.6));
}
.arcbox .ttl{
  display:inline-block; font-family:var(--serif); font-size:12px; letter-spacing:.17em;
  color:#b7aeff; border:1px solid rgba(123,108,255,.42);
  padding:4px 13px 4px calc(.17em + 13px); margin-bottom:14px;
}
.arcbox p{ margin:0 0 10px; color:var(--muted); font-size:13.5px; line-height:2; }
.arcbox p:last-child{ margin-bottom:0; }
.arcbox.open{ border-color:rgba(123,108,255,.5); }
.arcbox.locked,.arcbox.warn{ text-align:center; }
.arcbox.locked .lockform{ margin-top:16px; }
.arcbox.locked .lockmsg{ min-height:18px; margin-top:10px; font-size:12px; color:var(--y3); }

/* 스포일러 경고 — 비밀번호 없이 확인만 받습니다 */
.arcbox.warn{ border-color:rgba(201,162,39,.34); background:linear-gradient(160deg,rgba(201,162,39,.08),rgba(10,14,28,.6)); }
.arcbox.warn .ttl{ color:var(--brass-lt); border-color:rgba(201,162,39,.45); }
.spoil-btn{
  margin-top:16px; background:transparent;
  border:1px solid var(--brass); color:var(--brass-lt);
  font-family:var(--serif); font-size:13px; font-weight:600;
  letter-spacing:.16em; padding:11px 26px 11px 29px;
  transition:background .3s, color .3s, box-shadow .3s;
}
.spoil-btn:hover{
  background:linear-gradient(180deg,var(--brass-lt),var(--brass));
  color:#241c05; box-shadow:0 0 22px rgba(201,162,39,.28);
}
.arccard, .nmp-card{ margin:0 0 18px; border:1px solid var(--line); background:var(--ink-deep); }
.arccard .slot, .nmp-card .slot{ aspect-ratio:1216/832; }
.nmp-card{ margin:26px 0 0; }

/* ─────────── 네임드 상세 모달 ─────────── */
.nmp .slot{ aspect-ratio:1216/832; border-bottom:1px solid var(--line-soft); }
.nmp-body{ padding:28px 32px 34px; }

/* ─────────── 봉인(비밀번호) ─────────── */
#arcana{ background:linear-gradient(180deg,transparent,rgba(123,108,255,.05),transparent); }
.lockbox{ max-width:470px; margin:0 auto; text-align:center; }
.lockbox .glyph{ width:56px; margin:0 auto 24px; opacity:.6; }
.lockbox p{ color:var(--muted); font-size:13.5px; margin:0 0 26px; }
.lockform{ display:flex; gap:9px; }
.lockform input{
  flex:1; background:rgba(6,9,18,.7); border:1px solid var(--line);
  color:var(--ivory); font-family:var(--serif); font-size:16px;
  letter-spacing:.34em; text-align:center; padding:14px; outline:none;
  transition:border-color .3s, box-shadow .3s;
}
.lockform input:focus{ border-color:var(--brass); box-shadow:0 0 22px rgba(201,162,39,.18); }
.lockform button{
  background:transparent; border:1px solid var(--brass); color:var(--brass-lt);
  font-family:var(--serif); font-size:14px; letter-spacing:.18em; padding:14px 26px;
  transition:.3s; white-space:nowrap;
}
.lockform button:hover{ background:linear-gradient(180deg,var(--brass-lt),var(--brass)); color:#241c05; }
.lockmsg{ min-height:22px; margin-top:14px; font-size:12.5px; color:var(--y3); letter-spacing:.04em; }
.shake{ animation:shake .4s; }
@keyframes shake{ 0%,100%{transform:translateX(0)} 20%{transform:translateX(-8px)} 40%{transform:translateX(8px)} 60%{transform:translateX(-5px)} 80%{transform:translateX(5px)} }

#arcanaOut{ display:none; }
#arcanaOut.on{ display:grid; animation:riseIn .9s cubic-bezier(.16,.9,.3,1) both; }
.arc{
  border:1px solid rgba(123,108,255,.3); padding:28px 26px;
  background:linear-gradient(160deg,rgba(123,108,255,.07),rgba(10,14,28,.9));
}
.arc .who{ font-family:var(--serif); font-size:19px; font-weight:700; margin:0 0 3px; }
.arc .sub{ font-size:11px; letter-spacing:.16em; color:var(--faint); margin:0 0 16px; }
.arc .ttl{
  display:inline-block; font-family:var(--serif); font-size:13px; letter-spacing:.17em;
  color:#b7aeff; border:1px solid rgba(123,108,255,.4); padding:4px 13px; margin-bottom:16px;
  padding-left:calc(.24em + 13px);
}
.arc p{ margin:0 0 10px; color:var(--muted); font-size:13.5px; line-height:2; }
.arc p:last-child{ margin-bottom:0; }

/* ─────────── 모달 ─────────── */
.modal{
  position:fixed; inset:0; z-index:150; display:none;
  background:rgba(4,6,13,.86); backdrop-filter:blur(8px); -webkit-backdrop-filter:blur(8px);
  padding:26px 18px; overflow:hidden;
}
/* 상자를 세로 플렉스로 두어 CLOSE 막대는 고정, 본문만 스크롤합니다 */
.modal.on{ display:flex; align-items:flex-start; justify-content:center; animation:fadeIn .3s ease both; }
@keyframes fadeIn{ from{opacity:0} to{opacity:1} }
.modal-box{
  width:min(100%,940px); position:relative;
  max-height:calc(100vh - 52px);
  max-height:calc(100dvh - 52px);
  display:flex; flex-direction:column; overflow:hidden;
  background:linear-gradient(165deg,var(--card),var(--ink-deep));
  border:1px solid var(--line); padding:0;
  animation:riseIn .5s cubic-bezier(.16,.9,.3,1) both;
}
#modalBody{ overflow-y:auto; overscroll-behavior:contain; min-height:0; }
.modal-close{
  flex:none; z-index:5;
  display:flex; align-items:center; gap:8px;
  background:rgba(6,9,18,.9); border:0; border-bottom:1px solid var(--line-soft);
  width:100%; justify-content:flex-end;
  color:var(--muted); font-size:11px; letter-spacing:.24em; padding:13px 20px;
  transition:color .25s;
}
.modal-close:hover{ color:var(--brass-lt); }

/* 명함 전체 — 상세를 열면 여기서 보입니다 */
.mp-card{ border-bottom:1px solid var(--line-soft); background:var(--ink-deep); }
.mp-card .slot{ aspect-ratio:1216/832; }
.mp-top{
  padding:26px 34px 24px; border-bottom:1px solid var(--line-soft);
  border-left:3px solid var(--tie);
  background:linear-gradient(120deg, color-mix(in srgb, var(--tie) 12%, transparent), transparent 62%);
}
.mp-id{ min-width:0; }
.mp-detail{ padding:28px 34px 36px; min-width:0; }
.mp-tag{ font-size:12px; letter-spacing:.14em; color:var(--brass); margin:0 0 8px; }
.mp-name{ font-family:var(--serif); font-size:clamp(26px,4.6vw,36px); font-weight:700; line-height:1.2; margin:0 0 5px; }
.mp-latin{ font-family:var(--serif); font-size:12px; letter-spacing:.16em; color:var(--faint); margin:0 0 20px; }
.mp-chips{ display:flex; flex-wrap:wrap; gap:7px; align-items:center; }
.chip{
  font-size:11.5px; letter-spacing:.05em; color:var(--muted);
  border:1px solid var(--line-soft); padding:3px 10px; border-radius:2px;
}
.chip.title{ color:var(--brass-lt); border-color:var(--line); }
.mp-row{ display:grid; grid-template-columns:80px 1fr; gap:16px; padding:11px 0; border-bottom:1px solid var(--line-soft); }
.mp-row:last-of-type{ border-bottom:0; }
.mp-row dt{ font-size:11.5px; letter-spacing:.1em; color:var(--brass); padding-top:2px; }
.mp-row dd{ margin:0; font-size:13.5px; color:var(--ivory); line-height:1.9; }
.mp-row dd .dim{ color:var(--muted); }
.taglist{ display:flex; flex-wrap:wrap; gap:6px; }
.taglist span{ font-size:12px; color:var(--muted); border:1px solid var(--line-soft); padding:2px 9px; border-radius:2px; }
.quotes{ margin:22px 0 0; padding:18px 20px; border-left:2px solid var(--brass); background:rgba(201,162,39,.05); }
.quotes p{ margin:0 0 7px; font-family:var(--serif); font-size:15px; color:var(--ivory); font-style:italic; }
.quotes p:last-child{ margin-bottom:0; }
.relicbox{
  margin-top:20px; padding:16px 18px; border:1px solid var(--line);
  background:rgba(201,162,39,.05); font-size:13px; color:var(--muted);
}
.relicbox b{ display:block; font-family:var(--serif); color:var(--brass-lt); letter-spacing:.14em; font-size:11px; margin-bottom:6px; }
.relicbox.arc-note{ border-color:rgba(123,108,255,.35); background:rgba(123,108,255,.06); color:#b7aeff; }
.relicbox.arc-note b{ color:#b7aeff; }
.relicbox.arc-note a{ color:#dcd7ff; text-decoration:underline; text-underline-offset:3px; }

.wk{ margin-top:26px; padding-top:22px; border-top:1px solid var(--line-soft); }
.wk h4{ font-family:var(--serif); font-size:22px; margin:0 0 6px; }
.wk .sub{
  font-family:var(--serif); font-size:11px; letter-spacing:.2em;
  color:var(--brass); margin:0 0 12px; text-transform:uppercase; padding-left:.2em;
}
.wk ol{ margin:0; padding-left:0; list-style:none; counter-reset:w; }
.wk li{
  counter-increment:w; position:relative; padding:14px 0 14px 44px;
  border-bottom:1px solid var(--line-soft); color:var(--muted); font-size:13.5px; line-height:1.95;
}
.wk li:last-child{ border-bottom:0; }
.wk li::before{
  content:counter(w); position:absolute; left:0; top:13px;
  width:26px; height:26px; display:grid; place-items:center;
  font-family:var(--serif); font-size:13px; color:#b7aeff;
  border:1px solid rgba(123,108,255,.45); border-radius:50%;
}
.wk .warn{
  margin:0 0 22px; padding:12px 16px; font-size:12px; letter-spacing:.06em;
  color:#b7aeff; border:1px dashed rgba(123,108,255,.4); background:rgba(123,108,255,.06);
}

/* ─────────── BGM 플레이어 ─────────── */
#bgm{
  position:fixed; right:20px; bottom:20px; z-index:120;
  display:none; align-items:center; gap:11px;
  background:rgba(8,11,22,.9); backdrop-filter:blur(12px); -webkit-backdrop-filter:blur(12px);
  border:1px solid var(--line); padding:9px 15px 9px 10px;
  transition:border-color .3s, box-shadow .3s;
}
#bgm.show{ display:flex; animation:riseIn .7s cubic-bezier(.16,.9,.3,1) both; }
#bgm:hover{ border-color:var(--brass); box-shadow:0 0 26px rgba(201,162,39,.16); }
#bgmToggle{
  width:32px; height:32px; flex:none; display:grid; place-items:center;
  background:transparent; border:1px solid var(--brass-dim); border-radius:50%;
  color:var(--brass-lt); transition:.3s;
}
#bgmToggle:hover{ border-color:var(--brass); background:rgba(201,162,39,.12); }
#bgmToggle svg{ width:12px; height:12px; }
.eq{ display:flex; align-items:flex-end; gap:2.5px; height:15px; }
.eq i{ width:2.5px; background:var(--brass); height:3px; opacity:.5; border-radius:1px; }
#bgm.playing .eq i{ animation:eqbar .95s ease-in-out infinite; opacity:1; }
#bgm.playing .eq i:nth-child(2){ animation-delay:.16s; }
#bgm.playing .eq i:nth-child(3){ animation-delay:.33s; }
#bgm.playing .eq i:nth-child(4){ animation-delay:.5s; }
@keyframes eqbar{ 0%,100%{height:3px} 50%{height:15px} }
.bgm-label{ font-family:var(--serif); font-size:11px; letter-spacing:.16em; color:var(--muted); white-space:nowrap; padding-left:.16em; }
#bgmVol{
  width:60px; height:2px; -webkit-appearance:none; appearance:none;
  background:var(--line); outline:none; cursor:pointer;
}
#bgmVol::-webkit-slider-thumb{ -webkit-appearance:none; width:9px; height:9px; border-radius:50%; background:var(--brass); }
#bgmVol::-moz-range-thumb{ width:9px; height:9px; border:0; border-radius:50%; background:var(--brass); }

/* ─────────── 푸터 ─────────── */
footer{ padding:64px 0 78px; text-align:center; border-top:1px solid var(--line-soft); }
footer .crest{ width:52px; margin:0 auto 18px; opacity:.5; }
footer p{ margin:0 0 7px; font-size:12px; color:var(--faint); letter-spacing:.05em; }
footer .lat{ font-family:var(--serif); font-size:11px; letter-spacing:.24em; color:var(--brass-dim); padding-left:.24em; }

/* ─────────── 스크롤 등장 ─────────── */
.rev{ opacity:0; transform:translateY(22px); transition:opacity .8s cubic-bezier(.16,.9,.3,1), transform .8s cubic-bezier(.16,.9,.3,1); }
.rev.in{ opacity:1; transform:none; }
@media (prefers-reduced-motion:reduce){
  .rev{ opacity:1; transform:none; transition:none; }
  .crest .ring, .seal-btn::before, #bgm.playing .eq i, .gate-btn svg{ animation:none; }
  #gate{ perspective:none; }
  .gate-page{ transform:none !important; cursor:pointer; }
  .gate-face.back, .gate-shade{ display:none; }
}

/* ─────────── 반응형 ─────────── */
@media (max-width:560px){
  .mp-top{ padding:22px 18px 20px; }
}
@media (max-width:640px){
  .sec{ padding:70px 0; }
  .sec-head{ margin-bottom:40px; }
  .page-head{ padding:56px 0 36px; }
  .plate .body{ padding:18px 18px 22px; }
  .plates{ gap:16px; }
  /* 모바일: 지도를 가로로 넓게 펴고 이름표를 키워 손가락으로 누를 수 있게 */
  .mapscroll{ overflow-x:auto; -webkit-overflow-scrolling:touch; }
  .map{ min-width:820px; }
  .map .rg{ transform-box:fill-box; transform-origin:center; transform:scale(1.6); }
  .mapwrap figcaption{ padding:10px 12px; font-size:11px; }
  .arcbox{ padding:16px 16px; }
  .nmp-body{ padding:22px 18px 26px; }
  .zoom{ padding:48px 12px 56px; }
  .zoom img{ max-width:96vw; max-height:76vh; }
  .nav-mark span{ display:none; }
  .roster{ grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
  .pc .body{ padding:12px 13px 15px; }
  .pc .nm{ font-size:15.5px; }
  .deflist > div{ grid-template-columns:1fr; gap:5px; }
  .mp-detail,.wk{ padding:24px 20px 30px; }
  .mp-row{ grid-template-columns:1fr; gap:5px; }
  #bgm{ right:12px; bottom:12px; padding:8px 12px 8px 9px; }
  .bgm-label,#bgmVol{ display:none; }
  .lockform{ flex-direction:column; }
}

/* ════════════════════════════════════════════════════════════
   서체 보정 — Cormorant Garamond 대응
   Cinzel보다 획이 가늘고 x-높이가 낮아, 작은 글자가 흐려 보입니다.
   라틴 소제목·배지 계열만 크기와 굵기를 올려 잡아줍니다.
   ════════════════════════════════════════════════════════════ */
.badge{ font-size:15px; font-weight:700; }
.badge.unknown{ font-size:12.5px; }

.gate-kicker{ font-size:13px; font-weight:600; }
.hero-latin{ font-size:clamp(12px,2.2vw,14.5px); font-weight:600; }
.sec-latin{ font-size:12.5px; font-weight:600; }
.card .lt,
.plate .head .lt{ font-size:12px; font-weight:600; }
.mp-latin{ font-size:13px; font-weight:600; }
.mp-tag{ font-weight:500; }
footer .lat{ font-size:12px; font-weight:600; }
.nav-mark{ font-size:17px; }
.bgm-label{ font-size:12px; font-weight:600; }
.arcbox .ttl{ font-size:13px; font-weight:600; }
.wk .sub{ font-size:12px; font-weight:600; }
.gate-btn{ font-size:17px; font-weight:700; }
.card.idx .go{ font-size:13px; font-weight:600; }
.modal-close{ font-size:12px; font-weight:600; }
.seal-btn{ font-weight:600; }
.spoil-btn{ font-size:14px; font-weight:700; }
.ph .cap{ font-weight:600; }

/* 한글 제목은 Nanum Myeongjo 800이 가장 또렷합니다 */
.gate-title,.hero-title,.page-title,.sec-title{ font-weight:800; }
.mp-name,.card h3,.plate .head h3{ font-weight:700; }

/* ════════════════════════════════════════════════════════════
   문서고 — 증언 · 보고서 · 피해 기록
   ════════════════════════════════════════════════════════════ */
.archive{
  margin-top:26px; padding-top:22px;
  border-top:1px solid var(--line-soft);
}
.arch-head{
  font-family:var(--serif); font-size:12px; font-weight:600;
  letter-spacing:.2em; padding-left:.2em; text-transform:uppercase;
  color:var(--brass); margin:0 0 16px;
}
.arch-foot{
  margin:14px 0 0; font-size:11.5px; letter-spacing:.05em;
  color:var(--faint); text-align:right;
}
.doc{
  position:relative; margin-bottom:12px; padding:15px 18px 16px;
  border:1px solid var(--line-soft); border-left:2px solid var(--brass-dim);
  background:linear-gradient(170deg,rgba(19,26,48,.7),rgba(6,9,18,.5));
}
.doc:last-of-type{ margin-bottom:0; }
.doc header{
  display:flex; align-items:baseline; justify-content:space-between;
  gap:12px; margin-bottom:9px;
}
.doc .kind{
  font-family:var(--serif); font-size:12.5px; font-weight:700;
  letter-spacing:.06em; color:var(--brass-lt);
}
.doc .ref{
  font-size:10.5px; letter-spacing:.14em; color:var(--faint);
  font-variant-numeric:tabular-nums;
}
.doc p{ margin:0; font-size:13px; line-height:1.95; color:var(--muted); }

/* 먹칠 */
.doc .black{
  background:#05070e; color:transparent; user-select:none;
  border-radius:1px; box-shadow:0 0 0 1px rgba(255,255,255,.05) inset;
  cursor:not-allowed;
}

/* 통째로 봉인된 문서 */
.doc.lost{
  border-left-color:var(--rift);
  background:repeating-linear-gradient(135deg,
    rgba(123,108,255,.05) 0 8px, transparent 8px 16px), rgba(6,9,18,.6);
}
.doc.lost .sealed{
  font-family:var(--serif); font-size:13px; font-weight:600;
  letter-spacing:.18em; padding-left:.18em;
  color:#b7aeff; text-align:center; margin:6px 0 2px;
}

@media (max-width:560px){
  .doc{ padding:13px 14px 14px; }
  .doc header{ flex-direction:column; gap:2px; }
}

/* 문서 기록자 · 출처 — 필사본 서명처럼 */
.doc .by{
  margin:10px 0 0; padding-top:8px;
  border-top:1px dotted rgba(201,162,39,.18);
  font-family:var(--serif); font-size:12px; font-style:italic;
  color:var(--faint); text-align:right;
}

/* ════════════════════════════════════════════════════════════
   문서고 — 녹취록 · 서식지 · 부가 요소
   ════════════════════════════════════════════════════════════ */
.doc .note{
  margin:0 0 12px; padding:6px 10px;
  border-left:2px solid var(--rift);
  background:rgba(123,108,255,.07);
  font-size:11.5px; color:#a99fe8; line-height:1.7;
}
.doc.islog{ border-left-color:var(--brass); }

/* 녹취록 */
.log{ display:flex; flex-direction:column; gap:7px; }
.log .line{
  display:grid; grid-template-columns:auto minmax(52px,max-content) 1fr;
  gap:10px; align-items:baseline;
  font-size:12.5px; line-height:1.8;
}
.log .t{
  font-family:var(--serif); font-size:11px; color:var(--faint);
  font-variant-numeric:tabular-nums; white-space:nowrap;
}
.log .who{
  font-family:var(--serif); font-weight:700; font-size:12px;
  color:var(--brass-lt); white-space:nowrap; text-align:right;
}
.log .s{ color:var(--muted); }
.log .aside .s{ color:var(--faint); font-style:italic; }
.log .aside .who{ color:var(--faint); }

/* 서식지 · 표 */
.form{ margin:0; }
.form > div{
  display:grid; grid-template-columns:minmax(84px,auto) 1fr;
  gap:14px; padding:6px 0;
  border-bottom:1px dotted rgba(201,162,39,.14);
}
.form > div:last-child{ border-bottom:0; }
.form dt{
  font-family:var(--serif); font-size:12px; font-weight:700;
  color:var(--brass); letter-spacing:.04em;
}
.form dd{ margin:0; font-size:12.5px; color:var(--muted); line-height:1.8; }

@media (max-width:560px){
  .log .line{ grid-template-columns:1fr; gap:1px; }
  .log .who{ text-align:left; }
  .log .t{ display:inline-block; margin-right:8px; }
  .form > div{ grid-template-columns:1fr; gap:2px; }
}

/* 봉인 해제 시 나오는 명함 */
.arccard{ margin:14px 0 16px; border:1px solid rgba(123,108,255,.3); }
.arccard .slot{ aspect-ratio:1216/832; }

/* 행사 배너 */
.eventbanner{
  margin:26px 0 0; border:1px solid var(--line-soft);
  background:linear-gradient(170deg,var(--card),rgba(10,14,28,.9));
}
.eventbanner figcaption{
  padding:14px 20px; border-top:1px solid var(--line-soft);
  font-size:13px; line-height:1.9; color:var(--muted);
}

/* 원작 표기 */
.src{
  display:inline-block; font-family:var(--serif); font-size:13px;
  font-style:italic; color:var(--brass-lt);
}

/* 문서고 — 고어 원문 (그리스 각석 등) */
.doc .greek{
  margin:0 0 12px; padding:12px 14px;
  border:1px solid var(--line-soft);
  background:rgba(6,9,18,.55);
  font-family:var(--serif); font-size:14px; letter-spacing:.08em;
  color:var(--brass-lt); text-align:center; line-height:1.9;
}
.doc .greek + p{ font-style:italic; }

/* 토벌 대상이 아닌 네임드 표시 */
.notag{
  display:inline-block; margin-left:8px; vertical-align:middle;
  font-family:var(--sans); font-size:10.5px; font-weight:600; letter-spacing:.06em;
  color:#9fd8c0; border:1px solid rgba(120,200,170,.45);
  background:rgba(120,200,170,.1);
  padding:2px 8px; border-radius:2px; white-space:nowrap;
}
.noticebar{
  margin:14px 0 0; padding:9px 14px;
  border:1px solid rgba(120,200,170,.4);
  background:linear-gradient(160deg,rgba(120,200,170,.1),rgba(10,14,28,.5));
  font-size:12.5px; letter-spacing:.04em; color:#9fd8c0; text-align:center;
}