/* ===== Aurasia Codex · Game Wiki Edition ===== */
:root{
  /* 배경 ─ 차가운 푸른 기운의 흑 (순흑보다 깊이감 있음) */
  --bg:#0a0c10;
  --bg-2:#10131a;
  --surface:#181c25;
  --surface-2:#222732;
  --surface-3:#2d3340;

  /* 잉크 ─ 차가운 백색 단계 */
  --ink:#f0f3f8;
  --ink-mute:#8892a3;
  --ink-dim:#525a6b;

  /* ★ 메인 강조 ─ 백색 (대담하게 흰색을 강조색으로) */
  --accent:#e8edf5;
  --accent-2:#ffffff;
  --accent-soft:rgba(232,237,245,0.08);
  --accent-glow:rgba(255,255,255,0.25);

  /* ★ 보조 강조 ─ 차가운 실버 */
  --cyan:#a8b0bd;
  --cyan-soft:rgba(168,176,189,0.10);

  /* 진영색 ─ 채도 낮춰 백색 톤과 어울리게 */
  --f-roselia:#d8607a;
  --f-iris:#7a8fd8;
  --f-lumina:#e8c878;
  --f-north:#8a8a8a;
  --f-drakaban:#a878d8;
  --f-camarat:#c8946a;
  --f-solaria:#e89868;
  --f-adventurer:#f2f2f2;
  --f-neutral:#c2c2c2;

  /* 선 ─ 백색 톤 */
  --line:rgba(240,243,248,0.08);
  --line-strong:rgba(240,243,248,0.22);
  --line-accent:rgba(255,255,255,0.4);

  --gold:var(--accent);
  --gold-2:var(--accent-2);
  --gold-soft:var(--accent-soft);
  --azure:var(--cyan);
  --azure-soft:var(--cyan-soft);
}

*{ -webkit-tap-highlight-color:transparent; }

html,body{ background:var(--bg); color:var(--ink); }

body{
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:400;
  /* 흑백 결 ─ 백색 글로우 + 미세 격자 */
  background-image:
    /* 좌상 백색 글로우 (아주 옅게) */
    radial-gradient(1200px 700px at -10% -20%, rgba(255,255,255,0.06), transparent 55%),
    /* 우상 차가운 청은 글로우 */
    radial-gradient(900px 600px at 110% 0%, rgba(168,176,189,0.06), transparent 55%),
    /* 우하 실버 글로우 */
    radial-gradient(900px 700px at 100% 110%, rgba(120,135,160,0.05), transparent 55%),
    /* 미세 격자 ─ 더 흐리게 */
    linear-gradient(rgba(255,255,255,0.012) 1px, transparent 1px),
    linear-gradient(90deg, rgba(255,255,255,0.012) 1px, transparent 1px);
  background-size:
    auto, auto, auto,
    32px 32px, 32px 32px;
  background-attachment:fixed;
}

/* === 타이포 === */
.font-serif-d{
  /* 더는 세리프 안 씀. 대신 굵은 산세리프 */
  font-family:'Pretendard', system-ui, sans-serif;
  font-weight:800;
  letter-spacing:-0.02em;
}
.text-gold{ color:var(--accent-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); }

/* hero 제목 ─ 매우 굵게, 자간 좁게 */
.hero-title{
  font-weight:900 !important;
  letter-spacing:-0.035em;
  line-height:1.0 !important;
}
/* hero 의 그라데이션 텍스트 ─ 백→실버 */
.hero-title em{
  background:linear-gradient(120deg, #ffffff 0%, #a8b0bd 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  font-style:normal;
}

/* hair 띠 ─ 실버에서 백으로 */
.hair{
  height:1px;
  background:linear-gradient(90deg,
    transparent,
    rgba(168,176,189,0.4) 30%,
    rgba(255,255,255,0.6) 50%,
    rgba(168,176,189,0.4) 70%,
    transparent);
  opacity:.6;
}

/* === 마크 / 닫기 버튼 ─ 슬래시 컷 === */
.mark{
  width:38px; height:38px;
  border:1px solid var(--line-strong);
  display:flex; align-items:center; justify-content:center;
  color:var(--accent-2);
  background:linear-gradient(135deg, var(--accent-soft), transparent);
  clip-path:polygon(8px 0, 100% 0, calc(100% - 8px) 100%, 0 100%);
  transition:all .25s;
}
.mark:hover{
  border-color:var(--accent);
  background:linear-gradient(135deg, var(--accent-soft), var(--cyan-soft));
  color:var(--ink);
}

/* === 네비게이션 ─ 두꺼운 밑줄 === */
.nav-link{
  position:relative; font-size:.9rem;
  font-weight:600;
  transition:color .2s;
  padding:.25rem 0;
}
.nav-link::after{
  content:''; position:absolute; left:0; bottom:-8px;
  height:3px; width:0;
  background:var(--accent);
  box-shadow:0 0 8px var(--accent-glow);
  transition:width .3s;
}
.nav-link:hover{ color:var(--accent-2); }
.nav-link:hover::after,
.nav-link.current::after{ width:100%; }
.nav-link.current{ color:var(--accent-2); }

/* === 카드 ─ 굵은 테두리 + 모서리 컷 + 강한 호버 === */
.card{
  position:relative;
  background:linear-gradient(165deg,
    var(--surface-2) 0%,
    var(--surface) 60%,
    var(--bg-2) 100%);
  border:1px solid var(--line-strong);
  border-left:3px solid var(--accent);
  transition:transform .3s cubic-bezier(.2,.8,.2,1),
             border-color .25s, box-shadow .35s;
  cursor:pointer;
  overflow:hidden;
}
.card::before{
  content:''; position:absolute;
  top:0; right:0;
  width:60px; height:60px;
  background:linear-gradient(225deg, var(--accent-soft) 0%, transparent 60%);
  pointer-events:none;
}
.card::after{
  content:''; position:absolute;
  bottom:0; right:0;
  width:0; height:2px;
  background:linear-gradient(90deg, transparent, var(--accent), var(--cyan));
  transition:width .35s;
}
.card:hover{
  transform:translateY(-6px);
  border-color:var(--accent);
  box-shadow:
    0 24px 50px -20px var(--accent-glow),
    0 0 0 1px var(--line-accent) inset;
}
.card:hover::after{ width:100%; }

/* 진영별 카드 좌측 테두리 */
.faction-roselia { border-left-color:var(--f-roselia); }
.faction-iris    { border-left-color:var(--f-iris); }
.faction-lumina  { border-left-color:var(--f-lumina); }
.faction-north   { border-left-color:var(--f-north); }
.faction-drakaban{ border-left-color:var(--f-drakaban); }
.faction-camarat { border-left-color:var(--f-camarat); }
.faction-solaria { border-left-color:var(--f-adventurer); }
/* 옛 border-top 도 유지 */
.faction-roselia { border-top:none; }
.faction-iris,.faction-lumina,.faction-north,.faction-drakaban,
.faction-camarat,.faction-solaria{ border-top:none; }

/* === 태그 ─ 채워진 평행사변형 === */
.tag{
  display:inline-flex; align-items:center; gap:.35rem;
  font-size:.72rem; font-weight:600;
  padding:.35rem .85rem;
  border:1px solid var(--accent);
  color:var(--accent-2);
  background:var(--accent-soft);
  border-radius:0;
  clip-path:polygon(6px 0, 100% 0, calc(100% - 6px) 100%, 0 100%);
  transition:all .2s;
  letter-spacing:.02em;
}
.tag:hover{
  background:var(--accent);
  color:#fff;
  box-shadow:0 0 14px var(--accent-glow);
}

/* === 섹션 제목 ─ 좌측 굵은 마크 + 우측 가는 띠 === */
.sec-title{
  display:flex; align-items:center; gap:1rem;
  position:relative;
  padding-left:1rem;
}
.sec-title::before{
  content:'';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:4px; height:1.6em;
  background:linear-gradient(180deg, var(--accent), var(--cyan));
  box-shadow:0 0 12px var(--accent-glow);
}
.sec-title::after{
  content:''; flex:1; height:1px;
  background:linear-gradient(90deg, var(--line-strong), transparent);
}

/* eyebrow ─ 굵은 한글 또는 강조된 영문 */
.eyebrow{
  font-family:'Pretendard', sans-serif;
  font-weight:700;
  letter-spacing:.25em;
  font-size:.7rem;
  color:var(--accent-2);
  text-transform:uppercase;
  position:relative;
  display:inline-block;
  padding-left:18px;
}
.eyebrow::before{
  content:'◆';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  color:var(--accent);
  font-size:.6rem;
}

/* === 입력 / 검색 === */
input[type="search"]{
  background:rgba(0,0,0,0.5);
  border:1px solid var(--line-strong);
  border-bottom:2px solid var(--line-strong);
  color:var(--ink);
  border-radius:0;
  padding:.5rem .85rem;
  font-weight:500;
  transition:all .25s;
}
input[type="search"]::placeholder{ color:var(--ink-dim); }
input[type="search"]:focus{
  outline:none;
  border-color:var(--accent);
  border-bottom-color:var(--accent);
  background:rgba(230,57,70,0.05);
  box-shadow:0 4px 14px -4px var(--accent-glow);
}

/* === 탭 버튼 ─ 굵은 활성 표시 === */
.tab-btn{
  padding:.6rem 1.2rem;
  border:1px solid var(--line);
  border-radius:0;
  color:var(--ink-mute);
  background:rgba(0,0,0,0.2);
  transition:all .2s;
  font-size:.85rem;
  font-weight:600;
  white-space:nowrap;
  position:relative;
}
.tab-btn:hover{
  color:var(--ink);
  border-color:var(--line-strong);
  background:var(--surface-2);
}
.tab-btn.active{
  color:var(--ink);                          /* ★ 백색 글씨는 유지 */
  background:var(--surface-2);               /* ★ 배경은 어두운 회청 */
  border-color:var(--accent-2);              /* ★ 테두리만 또렷한 백 */
  box-shadow:
    0 4px 14px -4px var(--accent-glow),
    inset 0 -2px 0 var(--accent-2);          /* ★ 하단 2px 백색 강조 띠 */
}
.tab-pane{ display:none; }
.tab-pane.active{ display:block; animation:fadeUp .35s; }
@keyframes fadeUp{
  from{ opacity:0; transform:translateY(12px);}
  to{ opacity:1; transform:none;}
}

/* === 모달 ─ 무겁고 또렷한 창 === */
.modal-backdrop{
  position:fixed; inset:0;
  background:rgba(5,7,12,0.85);
  backdrop-filter:blur(12px);
  z-index:80;
  display:none; align-items:flex-start; justify-content:center;
  padding:2rem 1rem;
  overflow-y:auto;
}
.modal-backdrop.open{ display:flex; animation:fadeUp .25s; }
.modal{
  width:min(880px,100%);
  background:var(--surface);
  border:1px solid var(--line-strong);
  border-top:3px solid var(--accent);
  border-radius:0;
  overflow:hidden; margin:auto;
  box-shadow:
    0 40px 100px -20px rgba(0,0,0,0.8),
    0 0 80px -20px var(--accent-glow);
}
.modal-hero{
  height:relative; position:relative; overflow:hidden;
  background-size:cover; background-position:center;
}
.modal-hero::before{
  content:''; position:absolute; inset:0;
  background:
    linear-gradient(180deg, transparent 30%, var(--surface) 100%),
    linear-gradient(90deg, rgba(0,0,0,0.4), transparent 50%);
}
.modal-hero::after{
  content:''; position:absolute;
  bottom:0; left:0; right:0;
  height:3px;
  background:linear-gradient(90deg, var(--accent), var(--cyan), transparent);
}
.modal-body{ padding:1.75rem 2rem 2rem; }

.info-row{
  display:flex; gap:1rem;
  padding:.75rem 0;
  border-bottom:1px solid var(--line);
  font-size:.875rem;
  transition:background .2s;
}
.info-row:hover{ background:rgba(255,255,255,0.02); }
.info-row:last-child{ border-bottom:none; }
.info-row .k{
  width:96px; flex-shrink:0;
  color:var(--accent-2);
  font-weight:700;
  font-size:.78rem;
  letter-spacing:.05em;
  text-transform:uppercase;
}
.info-row .v{ flex:1; color:var(--ink); }

.sub-h{
  font-family:'Pretendard', sans-serif;
  font-weight:800;
  color:var(--ink);
  font-size:1.05rem;
  margin:1.5rem 0 .75rem;
  letter-spacing:-0.01em;
  position:relative;
  padding-left:14px;
}
.sub-h::before{
  content:'';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:4px; height:1em;
  background:var(--accent);
}

/* === 모바일 메뉴 === */
.mobile-menu{
  position:fixed; inset:0; z-index:70;
  background:var(--bg);
  background-image:
    radial-gradient(800px 600px at 50% -10%, var(--accent-soft), transparent 60%),
    radial-gradient(600px 500px at 100% 100%, var(--cyan-soft), transparent 60%);
  display:none; flex-direction:column;
  padding:5rem 1.75rem 2rem;
}
.mobile-menu.open{ display:flex; animation:fadeUp .25s; }
.mobile-menu a{
  padding:1.1rem 0;
  border-bottom:1px solid var(--line-strong);
  font-family:'Pretendard', sans-serif;
  font-size:1.35rem;
  font-weight:700;
  color:var(--ink);
  position:relative;
  padding-left:1.25rem;
  transition:all .25s;
}
.mobile-menu a::before{
  content:''; position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:4px; height:0; background:var(--accent);
  transition:height .25s;
}
.mobile-menu a:hover{
  color:var(--accent-2);
  padding-left:1.5rem;
}
.mobile-menu a:hover::before{ height:60%; }

/* === 스크롤바 ─ 진홍 === */
::-webkit-scrollbar{ width:10px; height:10px; }
::-webkit-scrollbar-track{ background:var(--bg-2); }
::-webkit-scrollbar-thumb{
  background:linear-gradient(180deg, var(--accent), var(--accent-2));
  border:2px solid var(--bg-2);
}
::-webkit-scrollbar-thumb:hover{
  background:linear-gradient(180deg, var(--accent-2), var(--cyan));
}

/* 텍스트 선택 */
::selection{
  background:var(--accent);
  color:#fff;
}

/* === 진영별 「테마 페이지」 ─ data-theme 만 박으면 페이지 전체 톤 변경 === */
body[data-theme="roselia"]{
  --accent:#e63946; --accent-2:#ff5a6a;
  --accent-soft:rgba(230,57,70,0.12); --accent-glow:rgba(230,57,70,0.45);
}
body[data-theme="iris"]{
  --accent:#5b7fff; --accent-2:#8aa5ff;
  --accent-soft:rgba(91,127,255,0.12); --accent-glow:rgba(91,127,255,0.45);
}
body[data-theme="lumina"]{
  --accent:#ffc94a; --accent-2:#ffd96a;
  --accent-soft:rgba(255,201,74,0.14); --accent-glow:rgba(255,201,74,0.5);
}
body[data-theme="north"]{
  --accent:#5cc7b8; --accent-2:#7ad8ca;
  --accent-soft:rgba(92,199,184,0.12); --accent-glow:rgba(92,199,184,0.45);
}
body[data-theme="drakaban"]{
  --accent:#a455d6; --accent-2:#c478e8;
  --accent-soft:rgba(164,85,214,0.14); --accent-glow:rgba(164,85,214,0.5);
}

@media (max-width:768px){
  .sec-title{ font-size:1.5rem !important; }
  .hero-title{ font-size:2.5rem !important; line-height:1.05; }
  .modal-hero{ height:160px; }
  .info-row{ flex-direction:column; gap:.25rem; padding:.6rem 0; }
  .info-row .k{ width:auto; }
  body{ background-size:auto, auto, auto, 24px 24px, 24px 24px; }
}

/* === 헤더 워드마크 === */
.wordmark{
  font-family:'Pretendard', sans-serif;
  font-weight:900;
  font-size:1.15rem;
  color:var(--ink);
  letter-spacing:-0.02em;
  line-height:1;
  background:linear-gradient(120deg, var(--ink) 0%, var(--cyan) 100%);
  -webkit-background-clip:text;
  background-clip:text;
  color:transparent;
  transition:opacity .25s;
}
.group:hover .wordmark{ opacity:.85; }
.wordmark-sub{
  font-family:'Pretendard', sans-serif;
  font-weight:500;
  font-size:.7rem;
  color:var(--ink-dim);
  letter-spacing:.05em;
}
@media (min-width:768px){
  .wordmark{ font-size:1.3rem; }
}

/* === 푸터 === */
.footer-h{
  font-family:'Pretendard', sans-serif;
  font-weight:800;
  color:var(--ink);
  font-size:.85rem;
  letter-spacing:-.01em;
  margin-bottom:.85rem;
  position:relative;
  padding-left:10px;
}
.footer-h::before{
  content:'';
  position:absolute; left:0; top:50%;
  transform:translateY(-50%);
  width:3px; height:.85em;
  background:var(--accent-2);
}
.footer-link{
  color:var(--ink-mute);
  transition:color .2s, padding-left .2s;
  display:inline-block;
}
.footer-link:hover{
  color:var(--accent-2);
  padding-left:4px;
}

/* 소셜 버튼 ─ 게임 위키 결의 작은 사각 */
.social-btn{
  width:36px; height:36px;
  display:inline-flex; align-items:center; justify-content:center;
  border:1px solid var(--line-strong);
  color:var(--ink-mute);
  background:rgba(0,0,0,0.2);
  transition:all .25s;
}
.social-btn:hover{
  color:var(--ink);
  border-color:var(--accent-2);
  background:var(--surface-2);
  box-shadow:0 4px 12px -4px var(--accent-glow);
  transform:translateY(-2px);
}