:root{
  /* 배경 ─ 먹빛 흑 (붓글씨 종이의 그림자) */
  --bg:#0c0a06;
  --bg-2:#13100a;
  --surface:#1c1810;
  --surface-2:#272015;
  --surface-3:#332a1c;

  /* 잉크 ─ 따뜻한 미색 단계 */
  --ink:#f5ecd6;
  --ink-mute:#b09a6e;
  --ink-dim:#6e6044;

  /* ★ 메인 강조 ─ 금(金) */
  --accent:#c9a227;
  --accent-2:#e6c155;
  --accent-soft:rgba(201,162,39,0.10);
  --accent-glow:rgba(230,193,85,0.35);

  /* ★ 보조 강조 ─ 적동(붉은 인장) */
  --cyan:#a83232;
  --cyan-soft:rgba(168,50,50,0.12);

  /* ═══ 세력색 ─ 원본 위키 <details> 배경색 그대로 ═══ */
  /* ── 정파 ── */
  --f-seolsan:#D8EDF8;     /* 설산파 */
  --f-dangga:#BBEFC5;     /* 사천당가 */
  --f-namgung:#ABC5F3;     /* 남궁세가 */
  --f-murimmaeng:#ADADAD;  /* 무림맹 */
  --f-hwasan:#DCA9BC;     /* 화산파 */
  --f-paengga:#923333;     /* 하북팽가 */
  --f-hwangbo:#E6C155;     /* 황보세가 */
  --f-jeomchang:#B0F7F8;   /* 점창파 */
  --f-mudang:#FFFFF;     /* 무당파 */
  --f-gaebang:#73997E;     /* 개방 */
  --f-jongnam:#8094A7;     /* 종남파 */
  --f-mosan:#2F4F4F;     /* 모산파 */
  --f-moyong:#B8860B;     /* 모용세가 */
  /* ── 사파 ── */
  --f-cheonsal:#0D0D0D;    /* 천살문 */
  --f-salmak:#484759;     /* 살막 */
  --f-haomun:#7D6596;     /* 하오문 */
  --f-jinryeong:#355E3B;   /* 진령채 */
  /* ── 그 외 (새외·마교) ── */
  --f-binggung:#FFFFFF;    /* 북해빙궁 */
  --f-yongma:#CC5C5D;     /* 용마신교 */

  /* 선 ─ 금빛 결 */
  --line:rgba(230,193,85,0.10);
  --line-strong:rgba(230,193,85,0.26);
  --line-accent:rgba(230,193,85,0.5);

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

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

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

body{
  font-family:'Pretendard', system-ui, serif;
  /* 화선지 결 ─ 금 글로우 + 먹 번짐 */
  background-image:
    radial-gradient(1200px 700px at -10% -20%, rgba(230,193,85,0.08), transparent 55%),
    radial-gradient(900px 600px at 110% 0%, rgba(168,50,50,0.06), transparent 55%),
    radial-gradient(900px 700px at 100% 110%, rgba(201,162,39,0.06), transparent 55%),
    linear-gradient(rgba(230,193,85,0.02) 1px, transparent 1px),
    linear-gradient(90deg, rgba(230,193,85,0.02) 1px, transparent 1px);
  background-size:auto, auto, auto, 36px 36px, 36px 36px;
  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, #e6c155 0%, #a83232 100%);
  -webkit-background-clip:text; background-clip:text;
  color:transparent; font-style:normal;
}

/* hair 띠 ─ 금 먹선 */
.hair{
  height:2px;
  background:linear-gradient(90deg, transparent,
    rgba(201,162,39,0.5) 30%, rgba(230,193,85,0.85) 50%,
    rgba(201,162,39,0.5) 70%, transparent);
  opacity:.7;
}

/* === 마크 / 닫기 버튼 ─ 슬래시 컷 === */
.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-2);
  box-shadow:0 24px 50px -20px var(--accent-glow), 0 0 0 1px var(--line-accent) inset;
}
.card:hover::after{ width:100%; }

/* ═══ 세력 카드 좌측선 ─ 새 key 기준 ═══ */
/* 정파 */
.faction-seolsan    { border-left-color:var(--f-seolsan); }
.faction-dangga     { border-left-color:var(--f-dangga); }
.faction-namgung    { border-left-color:var(--f-namgung); }
.faction-murimmaeng { border-left-color:var(--f-murimmaeng); }
.faction-hwasan     { border-left-color:var(--f-hwasan); }
.faction-paengga    { border-left-color:var(--f-paengga); }
.faction-hwangbo    { border-left-color:var(--f-hwangbo); }
.faction-jeomchang  { border-left-color:var(--f-jeomchang); }
.faction-mudang     { border-left-color:var(--f-mudang); }
.faction-gaebang    { border-left-color:var(--f-gaebang); }
.faction-jongnam    { border-left-color:var(--f-jongnam); }
.faction-mosan     { border-left-color:var(--f-mosan); }
.faction-moyong     { border-left-color:var(--f-moyong); }
/* 사파 */
.faction-cheonsal   { border-left-color:var(--f-cheonsal); }
.faction-salmak     { border-left-color:var(--f-salmak); }
.faction-haomun     { border-left-color:var(--f-haomun); }
.faction-jinryeong  { border-left-color:var(--f-jinryeong); }
/* 그 외 */
.faction-binggung   { border-left-color:var(--f-binggung); }
.faction-yongma     { border-left-color:var(--f-yongma); }
/* 옛 border-top 잔재 제거 유지 */
.faction-seolsan,.faction-dangga,.faction-namgung,.faction-murimmaeng,
.faction-hwasan,.faction-paengga,.faction-hwangbo,.faction-jeomchang,
.faction-mudang,.faction-gaebang,.faction-jongnam,.faction-mosan,
.faction-moyong,.faction-cheonsal,.faction-salmak,.faction-haomun,
.faction-jinryeong,.faction-binggung,.faction-yongma{ 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(201,162,39,0.06);
  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);
}
.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(8,6,3,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(245,236,214,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(--cyan); color:#f5ecd6; }

/* ═══ 세력별 「테마 페이지」 ─ data-theme 만 박으면 페이지 전체 톤 변경 ═══ */
/* 정파 ── 빙청 설산 */
body[data-theme="seolsan"]{
  --accent:#8fb4cc; --accent-2:#bcdcee;
  --accent-soft:rgba(143,180,204,0.12); --accent-glow:rgba(188,220,238,0.45);
}
/* 정파 ── 독초 당가 */
body[data-theme="dangga"]{
  --accent:#5fae6f; --accent-2:#92d8a2;
  --accent-soft:rgba(95,174,111,0.12); --accent-glow:rgba(146,216,162,0.45);
}
/* 정파 ── 창궁 남궁 */
body[data-theme="namgung"]{
  --accent:#5b7fce; --accent-2:#8aa5ee;
  --accent-soft:rgba(91,127,206,0.12); --accent-glow:rgba(138,165,238,0.45);
}
/* 정파 ── 회백 무림맹 */
body[data-theme="murimmaeng"]{
  --accent:#9a9a9a; --accent-2:#c4c4c4;
  --accent-soft:rgba(154,154,154,0.12); --accent-glow:rgba(196,196,196,0.4);
}
/* 정파 ── 매화 화산 */
body[data-theme="hwasan"]{
  --accent:#cc7d96; --accent-2:#e6a8c0;
  --accent-soft:rgba(204,125,150,0.14); --accent-glow:rgba(230,168,192,0.5);
}
/* 정파 ── 패도 팽가 */
body[data-theme="paengga"]{
  --accent:#c24a4a; --accent-2:#e06a6a;
  --accent-soft:rgba(194,74,74,0.14); --accent-glow:rgba(224,106,106,0.5);
}
/* 정파 ── 금 황보 */
body[data-theme="hwangbo"]{
  --accent:#d6ad2e; --accent-2:#e6c155;
  --accent-soft:rgba(214,173,46,0.14); --accent-glow:rgba(230,193,85,0.5);
}
/* 정파 ── 청록 점창 */
body[data-theme="jeomchang"]{
  --accent:#5fc7c8; --accent-2:#8fe2e3;
  --accent-soft:rgba(95,199,200,0.12); --accent-glow:rgba(143,226,227,0.45);
}
/* 정파 ── 은백 무당 */
body[data-theme="mudang"]{
  --accent:#a8b4c4; --accent-2:#cfd6e0;
  --accent-soft:rgba(168,180,196,0.12); --accent-glow:rgba(207,214,224,0.45);
}
/* 정파 ── 녹림 개방 */
body[data-theme="gaebang"]{
  --accent:#6a9a78; --accent-2:#8fb89a;
  --accent-soft:rgba(106,154,120,0.12); --accent-glow:rgba(143,184,154,0.45);
}
/* 정파 ── 청회 종남 */
body[data-theme="jongnam"]{
  --accent:#647890; --accent-2:#8094a7;
  --accent-soft:rgba(100,120,144,0.12); --accent-glow:rgba(128,148,167,0.45);
}
/* 정파 ── 청자 모산 */
body[data-theme="mosan"]{
  --accent:#3e7a7a; --accent-2:#5e9a9a;
  --accent-soft:rgba(62,122,122,0.12); --accent-glow:rgba(94,154,154,0.45);
}
/* 정파 ── 황금갈 모용 */
body[data-theme="moyong"]{
  --accent:#b8860b; --accent-2:#d6a82e;
  --accent-soft:rgba(184,134,11,0.14); --accent-glow:rgba(214,168,46,0.5);
}
/* 사파 ── 무색 천살 */
body[data-theme="cheonsal"]{
  --accent:#6e6e6e; --accent-2:#9a9a9a;
  --accent-soft:rgba(110,110,110,0.14); --accent-glow:rgba(154,154,154,0.4);
}
/* 사파 ── 음영 살막 */
body[data-theme="salmak"]{
  --accent:#6a6982; --accent-2:#8a89a0;
  --accent-soft:rgba(106,105,130,0.14); --accent-glow:rgba(138,137,160,0.45);
}
/* 사파 ── 몽월 하오문 */
body[data-theme="haomun"]{
  --accent:#8a68a8; --accent-2:#a988c2;
  --accent-soft:rgba(138,104,168,0.14); --accent-glow:rgba(169,136,194,0.5);
}
/* 사파 ── 녹림 진령 */
body[data-theme="jinryeong"]{
  --accent:#508a58; --accent-2:#6fa877;
  --accent-soft:rgba(80,138,88,0.12); --accent-glow:rgba(111,168,119,0.45);
}
/* 그 외 ── 빙백 빙궁 */
body[data-theme="binggung"]{
  --accent:#a8cce6; --accent-2:#d4ebff;
  --accent-soft:rgba(168,204,230,0.12); --accent-glow:rgba(212,235,255,0.5);
}
/* 그 외 ── 혈적 마교 */
body[data-theme="yongma"]{
  --accent:#cc5c5d; --accent-2:#e87a7b;
  --accent-soft:rgba(204,92,93,0.14); --accent-glow:rgba(232,122,123,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);
}