/* ===== Aurasia Codex · Common Stylesheet ===== */
:root{
  --bg:#0e0a08; --bg-2:#15100c;
  --surface:#1b1410; --surface-2:#221a14;
  --line:rgba(201,161,74,0.18);
  --line-strong:rgba(201,161,74,0.45);
  --ink:#e9dfca; --ink-mute:#a99e87;
  --gold:#c9a14a; --gold-2:#f1d27a;
  --gold-soft:rgba(241,210,122,0.08);
}
*{ -webkit-tap-highlight-color: transparent; }
html,body{ background:var(--bg); color:var(--ink); }
body{
  font-family:'Pretendard', system-ui, sans-serif;
  background-image:
   radial-gradient(1200px 600px at 10% -10%, rgba(201,161,74,0.08), transparent 60%),
   radial-gradient(900px 500px at 110% 10%, rgba(162,58,58,0.08), transparent 60%),
   radial-gradient(800px 800px at 50% 120%, rgba(63,107,74,0.06), transparent 60%);
}
.font-serif-d{ font-family:'Fraunces', serif; font-optical-sizing:auto; }
.text-gold{ color:var(--gold-2); }
.text-mute{ color:var(--ink-mute); }
.border-line{ border-color:var(--line); }
.border-line-strong{ border-color:var(--line-strong); }
.bg-surface{ background:var(--surface); }
.bg-surface-2{ background:var(--surface-2); }
.hair{ height:1px; background:linear-gradient(90deg, transparent, var(--line-strong), transparent); }

.mark{
  width:36px; height:36px; border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  border-radius:2px; color:var(--gold-2);
  font-family:'Fraunces', serif;
  background:linear-gradient(135deg, rgba(241,210,122,0.06), transparent);
}

/* === 네비게이션 === */
.nav-link{ position:relative; font-size:.875rem; transition:color .25s; }
.nav-link::after{ content:''; position:absolute; left:0; bottom:-6px; height:1px; width:0; background:var(--gold-2); transition:width .35s; }
.nav-link:hover{ color:var(--gold-2); }
.nav-link:hover::after{ width:100%; }
.nav-link.current{ color:var(--gold-2); }
.nav-link.current::after{ width:100%; }

/* === 카드 === */
.card{
  background:linear-gradient(180deg, rgba(34,26,20,0.92), rgba(20,15,11,0.92));
  border:1px solid var(--line);
  transition:transform .35s, border-color .25s, box-shadow .35s;
  cursor:pointer;
}
.card:hover{
  transform:translateY(-3px);
  border-color:var(--line-strong);
  box-shadow:0 18px 40px -20px rgba(241,210,122,0.18);
}

.tag{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.7rem; padding:.2rem .6rem;
  border:1px solid var(--line-strong);
  color:var(--gold-2); border-radius:999px;
  background:var(--gold-soft);
}

.sec-title{ display:flex; align-items:center; gap:1.25rem; }
.sec-title::before, .sec-title::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, transparent, var(--line-strong), transparent);
}
.eyebrow{ font-family:'Fraunces', serif; letter-spacing:.45em; font-size:.7rem; color:var(--gold-2); text-transform:uppercase; }

input[type="search"]{ background:rgba(0,0,0,0.4); border:1px solid var(--line-strong); color:var(--ink); border-radius:2px; }
input[type="search"]::placeholder{ color:var(--ink-mute); }
input[type="search"]:focus{ outline:none; border-color:var(--gold-2); }

.tab-btn{ padding:.55rem 1.05rem; border:1px solid transparent; border-radius:2px; color:var(--ink-mute); transition:all .25s; font-size:.85rem; white-space:nowrap; }
.tab-btn:hover{ color:var(--ink); }
.tab-btn.active{ border-color:var(--line-strong); color:var(--gold-2); background:var(--gold-soft); }
.tab-pane{ display:none; }
.tab-pane.active{ display:block; animation:fade .4s; }
@keyframes fade{ from{ opacity:0; transform:translateY(8px);} to{ opacity:1; transform:none;} }

/* === 모달 공통 === */
.modal-backdrop{
  position:fixed; inset:0; background:rgba(0,0,0,.78);
  backdrop-filter:blur(8px); z-index:80;
  display:none; align-items:flex-start; justify-content:center; padding:2rem 1rem;
  overflow-y:auto;
}
.modal-backdrop.open{ display:flex; animation:fade .25s; }
.modal{
  width:min(820px,100%); background:var(--surface);
  border:1px solid var(--line-strong); border-radius:2px;
  overflow:hidden; margin:auto;
}
.modal-hero{
  height:200px; position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.modal-hero::after{
  content:''; position:absolute; inset:0;
  background:linear-gradient(180deg, transparent 30%, var(--surface) 100%);
}
.modal-body{ padding:1.5rem 1.75rem 1.75rem; }
.info-row{ display:flex; gap:1rem; padding:.65rem 0; border-bottom:1px dashed var(--line); font-size:.875rem; }
.info-row:last-child{ border-bottom:none; }
.info-row .k{ width:90px; flex-shrink:0; color:var(--ink-mute); font-size:.8rem; letter-spacing:.05em; }
.info-row .v{ flex:1; color:var(--ink); }
.sub-h{ font-family:'Fraunces', serif; color:var(--gold-2); font-size:1rem; margin:1.25rem 0 .6rem; letter-spacing:.02em; }

/* === 모바일 메뉴 === */
.mobile-menu{ position:fixed; inset:0; z-index:70; background:var(--bg); display:none; flex-direction:column; padding:5rem 1.5rem 2rem; }
.mobile-menu.open{ display:flex; animation:fade .25s; }
.mobile-menu a{ padding:1rem 0; border-bottom:1px solid var(--line); font-family:'Fraunces', serif; font-size:1.25rem; }

/* === 진영 색 === */
.faction-roselia{ border-top:2px solid #b85b5b; }
.faction-iris{   border-top:2px solid #6f7fbf; }
.faction-lumina{ border-top:2px solid #d9c66a; }
.faction-north{  border-top:2px solid #6c8a8a; }
.faction-solaria{ border-top:2px solid #d99a4a; }
.faction-camarat{ border-top:2px solid #8a6a3a; } /* ★ 갈색 */
.faction-drakaban{ border-top:2px solid #7a4a8c; } /* ★ 보라 */

::-webkit-scrollbar{ width:8px; height:8px; }
::-webkit-scrollbar-track{ background:var(--bg); }
::-webkit-scrollbar-thumb{ background:var(--line-strong); }

@media (max-width: 768px){
  .sec-title{ font-size:1.5rem !important; }
  .hero-title{ font-size:2.25rem !important; line-height:1.15; }
  .modal-hero{ height:140px; }
  .info-row{ flex-direction:column; gap:.25rem; }
  .info-row .k{ width:auto; }
}