/* =========================================================
   Craft — Global Style (rev. radar-first, dark navy theme)
   - 배경 네이비 + 그라데이션/노이즈/비네팅
   - 텍스트 대비/라인하이트/자간 조정
   - 카드 고도감, 버튼 접근성 포커스
   - 모달/특성 트리
   - 세력 카드 일러스트(.card.has-illus) 지원
   ========================================================= */

/* ---------- Theme Variables ---------- */
:root {
  --bg: #0f141c;      /* 완전 블랙 대신 짙은 네이비 */
  --card: #131a26;

  --text: #e9eef6;    /* 순백 대신 차가운 밝은 회색 */
  --muted: #a7b2c6;

  --accent: #6aa9ff;  /* CTA/포커스 */
  --accent-2: #d97cff;

  --border: #213047;  /* 카드 윤곽 */
  --border-2: #2a3040;/* 내부 요소 윤곽 */

  --shadow: 0 6px 20px rgba(0,0,0,.22);

  /* 레이더/지도(있다면) */
  --grid: #111a2b;
  --ring: #1a2942;
  --sweep: #6aa9ff;
}

/* ---------- Reset & Typography ---------- */
* { box-sizing: border-box; }
html, body { height: 100%; }

body {
  margin: 0;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(106,169,255,.05), transparent 60%),
    radial-gradient(1400px 900px at 110% 110%, rgba(217,124,255,.05), transparent 55%),
    linear-gradient(180deg, #0b1220, var(--bg));
  color: var(--text);
  font-family: system-ui, -apple-system, Segoe UI, Roboto, Helvetica, Arial, sans-serif;
  line-height: 1.6;
  letter-spacing: .1px;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* 얇은 노이즈 텍스처 & 비네팅 */
body::before{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-2;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64" viewBox="0 0 64 64"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.025"/></svg>');
  mix-blend-mode:soft-light;
}
body::after{
  content:"";
  position:fixed; inset:0; pointer-events:none; z-index:-1;
  background:radial-gradient(90% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.35) 100%);
}

/* ---------- Layout ---------- */
.wrap { max-width: 980px; margin: 0 auto; padding: 16px; }

header {
  padding: 20px 16px;
  border-bottom: 1px solid #182234;
}

h1 { margin: 0; font-size: 20px; }
p { max-width: 68ch; }

/* ---------- Grid ---------- */
.grid {
  display: grid;
  grid-template-columns: repeat(1, minmax(0, 1fr));
  gap: 16px;
}
@media (min-width: 700px) {
  .grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ---------- Card ---------- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 14px;
  padding: 16px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  transition: transform .12s ease, border-color .12s, box-shadow .12s ease, filter .2s ease;
  box-shadow: var(--shadow);
}
.card:hover { transform: translateY(-2px); border-color: #2f3b56; }

/* 세력 카드 일러스트(배경 이미지 + 오버레이 + 호버 연출)
   - 방법 1: JS에서 card.style.backgroundImage = 'url(...)'로 설정 (faction.html 방식)
   - 방법 2: CSS 변수 --illus-url: url(...); 를 card에 지정
*/
.card.has-illus{
  overflow:hidden; isolation:isolate;
  background-size:cover; background-position:center; /* 방법 1 대응 */
}
.card.has-illus::before{
  /* 방법 2 대응: --illus-url 지정 시 이 레이어가 이미지가 됨 */
  content:""; position:absolute; inset:0; z-index:-2;
  background-image: var(--illus-url);
  background-size:cover; background-position:center;
  filter:saturate(1) contrast(1.05) brightness(.9);
  transform:scale(1.02);
  transition:transform .2s ease, filter .2s ease;
  pointer-events:none;
}
.card.has-illus::after{
  /* 텍스트 가독성을 위한 어두운 오버레이 */
  content:""; position:absolute; inset:0; z-index:-1;
  background:linear-gradient(180deg, rgba(0,0,0,.45), rgba(0,0,0,.6));
  pointer-events:none;
}
.card.has-illus:hover::before{ transform:scale(1.06); filter:saturate(1.1) }
.illus-credit{ font-size:11px; color:#b9c5da; opacity:.72 }

/* ---------- Common UI ---------- */
.row { display: flex; align-items: center; gap: 10px; }

.pill {
  font-size: 12px; color: #d7deec;
  background: #1b2233; border: 1px solid #26324a;
  border-radius: 999px; padding: 2px 8px;
}

.title { font-weight: 700; font-size: 18px; display: flex; align-items: center; gap: 8px; }

/* 🔆 가독성 강화: 설명 텍스트 흰색 톤으로 상향 */
.desc { color: #e9eef6; line-height: 1.5; }

ul { margin: 8px 0 0 18px; }

/* 링크/버튼 일관성 */
a.btn, button.btn, button {
  display: inline-flex; align-items: center; gap: 8px;
  cursor: pointer; border-radius: 10px;
  border: 1px solid var(--border-2);
  background: #182132; color: var(--text);
  padding: 10px 12px; font-weight: 600; text-decoration: none;
  transition: background .12s ease, border-color .12s ease, transform .06s ease;
}
a.btn:hover, button.btn:hover, button:hover {
  background: #1f2a42; border-color: #31405c;
}
button.primary, a.btn.primary {
  background: var(--accent); border-color: #4b87de; color: #07101f;
}
button[disabled], .btn[aria-disabled="true"] { opacity: .55; cursor: not-allowed; }

.chosen { outline: 2px solid var(--accent); outline-offset: 2px; }

.footer { margin-top: 22px; color: #9fb0c9; font-size: 12px; }

.banner {
  background: #121a2a; border: 1px solid var(--border-2);
  border-radius: 12px; padding: 12px; margin-bottom: 16px;
}

/* 접근성: 키보드 포커스 */
:focus-visible {
  outline: 2px solid #7ac7ff;
  outline-offset: 3px;
  border-radius: 10px;
}

/* ---------- Profile (Avatar Themes) ---------- */
.avatar { width:56px;height:56px;border-radius:12px;display:grid;place-items:center;font-size:26px;color:#0b1220 }
.fac-restoration{background:linear-gradient(135deg,#7ac77a,#3f7848);color:#07160c}
.fac-preservation{background:linear-gradient(135deg,#ffcd66,#8e6a1c);color:#2b1d00}
.fac-progress{background:linear-gradient(135deg,#6aa9ff,#1f4b8a);color:#031021}
.fac-believers{background:linear-gradient(135deg,#d97cff,#5b2b74);color:#18031f}

/* ---------- Modal ---------- */
.modal-backdrop {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: none; align-items: center; justify-content: center; z-index: 1000;
}
.modal {
  width: min(680px, 92vw);
  background: var(--card); border: 1px solid var(--border);
  border-radius: 14px; overflow: hidden;
  box-shadow: 0 10px 40px rgba(0,0,0,.6);
}
.modal header {
  border-bottom: 1px solid var(--border); padding: 14px 16px;
  display: flex; align-items: center; justify-content: space-between;
}
.modal .content { display: grid; grid-template-columns: 1fr; }
@media (min-width: 680px) { .modal .content { grid-template-columns: 1.2fr 1fr; } }
.modal .art {
  width: 100%; height: 100%; background: #0e121a;
  display: flex; align-items: center; justify-content: center;
  aspect-ratio: 16/9; overflow: hidden;   /* 통일: 16:9 */
}
.modal .art img { width: 100%; height: 100%; object-fit: cover; }
.modal .text { padding: 16px; line-height: 1.6; }
.modal .text pre { white-space: pre-wrap; font-family: inherit; margin: 0; color: #dcdff1; }
.modal .actions {
  display: flex; gap: 10px; padding: 12px 16px; border-top: 1px solid var(--border);
  justify-content: flex-end;
}
.modal-close { background: transparent; border: 1px solid var(--border-2); }
.show { display: flex !important; }

/* ---------- Talent Tree (메인 특성 트리) ---------- */
.talent-card{position:relative}
.talent-hdr{display:flex;justify-content:space-between;align-items:center;margin-bottom:8px}
.talent-pts{font-weight:800}
.talent-grid{position:relative;background:#101621;border:1px solid #1b2334;border-radius:12px;height:380px;overflow:hidden}
.talent-svg{position:absolute;inset:0}
.talent-node{
  position:absolute; transform:translate(-50%,-50%); min-width:90px; text-align:center;
  background:#161b28; border:1px solid #23324e; border-radius:12px; padding:6px 8px;
  cursor:pointer; user-select:none;
}
.talent-node h4{margin:2px 0 0 0; font-size:13px}
.talent-node .pts{font-size:12px; opacity:.85}
.talent-node.locked{opacity:.55; filter:grayscale(40%)}
.talent-node.maxed{outline:2px solid var(--accent)}
.talent-tip{position:absolute; left:50%; transform:translateX(-50%); bottom:-26px; font-size:11px; color:#9aa3b5}
.talent-actions{display:flex;gap:8px}
.talent-actions .btn{padding:6px 10px; font-weight:700}

/* ---------- Back/Focus buttons (radar/map 공통) ---------- */
.back-btn{
  position: fixed; top: 12px; left: 12px; z-index: 1500;
  background: rgba(15,16,19,.92); color:var(--text);
  border:1px solid var(--border); border-radius:10px;
  padding:8px 12px; text-decoration:none; font-weight:700; font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}
.back-btn:hover{ background:#1a1f2c; border-color:#2a3040; }

.focus-btn{
  position: fixed; top: 12px; right: 12px; z-index: 1500;
  background: var(--accent); color:#0b1220; border:1px solid #4b87de; border-radius:10px;
  padding:8px 12px; text-decoration:none; font-weight:800; font-size:14px;
  box-shadow:0 6px 18px rgba(0,0,0,.35);
}

/* ---------- Utilities ---------- */
.visually-hidden{
  position:absolute !important; width:1px; height:1px; padding:0; margin:-1px;
  overflow:hidden; clip:rect(0,0,0,0); white-space:nowrap; border:0;
}

/* ---------- Accessibility / Motion ---------- */
@media (prefers-reduced-motion: reduce){
  * { animation-duration: .01ms !important; animation-iteration-count: 1 !important; transition-duration: .01ms !important; }
}

/* ---------- Light Mode (선택) ---------- */
@media (prefers-color-scheme: light){
  :root{
    --bg:#f6f8fc; --card:#ffffff; --text:#0e1320; --muted:#546078;
    --border:#d9e0ea; --border-2:#cfd8e6; --accent:#2a66d9;
  }
  body{
    background:
      radial-gradient(1200px 800px at 20% -10%, rgba(42,102,217,.06), transparent 60%),
      radial-gradient(1400px 900px at 110% 110%, rgba(217,124,255,.06), transparent 55%),
      linear-gradient(180deg, #eef3fb, var(--bg));
  }
  body::after{ background:radial-gradient(90% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.06) 100%); }
}


/* =========================================================
   Forge Haven — Splash / Overlay / Cinematic (updated)
   - Dark 기본, .fh-splash.light 또는 body.fh-light 로 라이트 전환
   - 버튼 대비 보강, 오버레이 클릭 보장, 모바일 높이 보정
   ========================================================= */

/* 안전한 색상 토큰(없을 때 대비용) */
:root{
  --bg:#0b1220; --text:#E9EEF8; --muted:#9FB3D9;
  --accent:#5A7CF2; --accent-ink:#0E1B4D;
  --card:#101827; --border:#22324d; --border-2:#2e3b56;
}

/* ===== Splash (Dark default) ===== */
.fh-splash{
  position:relative; min-height:100vh;
  display:grid; place-items:center;
  background:
    radial-gradient(1200px 800px at 10% -10%, rgba(106,169,255,.06), transparent 60%),
    radial-gradient(1400px 900px at 110% 110%, rgba(217,124,255,.06), transparent 55%),
    linear-gradient(180deg, #0b1220, var(--bg));
  color:var(--text);
}
.fh-noise,.fh-vignette,.fh-scanlines{position:absolute; inset:0; pointer-events:none}
.fh-noise{
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="64" height="64"><filter id="n"><feTurbulence type="fractalNoise" baseFrequency="0.8" numOctaves="2" stitchTiles="stitch"/></filter><rect width="100%" height="100%" filter="url(%23n)" opacity="0.025"/></svg>');
  mix-blend-mode:soft-light;
}
.fh-vignette{background:radial-gradient(90% 90% at 50% 50%, transparent 60%, rgba(0,0,0,.4) 100%)}
.fh-scanlines{background-image:linear-gradient(rgba(255,255,255,.05) 1px, transparent 1px); background-size:100% 3px; opacity:.06}
#fhParticles{position:absolute; inset:0; pointer-events:none}

/* 브랜드 */
.fh-brand{text-align:center}
.fh-logo{display:block; margin:0 auto 12px; width:110px; height:auto; filter:drop-shadow(0 6px 18px rgba(0,0,0,.4))}
.fh-mark{font-size:56px; filter:drop-shadow(0 6px 18px rgba(0,0,0,.3))}
.fh-title{margin:8px 0 2px; font-size:42px; letter-spacing:-0.02em}
.fh-tag{color:var(--muted); margin:0 0 18px}
.fh-cta{display:flex; gap:10px; flex-wrap:wrap; justify-content:center}

/* 버튼(대비 보장) */
a.btn, button.btn, button{
  display:inline-flex; align-items:center; gap:8px; cursor:pointer;
  border-radius:10px; border:1px solid var(--border-2);
  background:#182132; color:var(--text); padding:10px 12px;
  font-weight:700; text-decoration:none;
  transition:background .12s, border-color .12s, transform .06s, filter .12s, box-shadow .12s;
  box-shadow:0 1px 2px rgba(0,0,0,.24);
}
a.btn:hover, button.btn:hover, button:hover{
  background:#1d283b; border-color:#3a4b6a; transform:translateY(-1px);
}
a.btn.primary, button.primary{ background:var(--accent); border-color:#2d3f76; color:var(--accent-ink) }
a.btn.primary:hover, button.primary:hover{ filter:brightness(1.05) }

/* 키보드 접근성 */
a.btn:focus-visible, button:focus-visible{ outline:2px solid var(--accent); outline-offset:2px }

/* ===== Overlay (공통) ===== */
.fh-overlay{
  position:fixed; inset:0; display:grid; place-items:center;
  background:rgba(0,0,0,.55); z-index:99999;
  /* 외부 스타일이 막지 못하게 클릭 보장 */
  pointer-events:auto;
}
.fh-overlay *{ pointer-events:auto }

/* 구형 카드(텍스트 시네마틱용) 유지 시 */
.fh-overlay-card{
  width:min(820px,92vw); background:var(--card);
  border:1px solid var(--border); border-radius:14px;
  box-shadow:0 10px 40px rgba(0,0,0,.65); padding:18px; color:var(--text);
}
.fh-overlay-actions{display:flex; gap:8px; justify-content:flex-end; margin-top:12px}

/* ===== Cinematic (이미지+대사) ===== */
.fh-cinema{
  position:relative;
  width:min(960px,94vw); background:var(--card); color:var(--text);
  border:1px solid var(--border); border-radius:16px; overflow:hidden;
  box-shadow:0 18px 60px rgba(0,0,0,.7);
}
.cinema-frame{margin:0; display:grid; grid-template-rows:auto auto}
.cinema-frame img{width:100%; height:48vh; object-fit:cover; background:#0b1220}
.cinema-frame figcaption{padding:14px 16px; min-height:72px; line-height:1.6}
.cinema-ui{
  display:flex; align-items:center; gap:8px; justify-content:space-between;
  padding:10px 12px; border-top:1px solid var(--border)
}
.cinema-ui .left,.cinema-ui .right{display:flex; gap:8px; align-items:center}
#cinDots{display:flex; gap:6px; align-items:center; justify-content:center}
#cinDots i{width:8px; height:8px; border-radius:50%; background:#394764; opacity:.6}
#cinDots i.on{background:var(--accent); opacity:1; box-shadow:0 0 0 3px rgba(90,124,242,.25)}

/* 모바일 높이 보정 */
@media (max-width:600px){ .cinema-frame img{height:40vh} }

/* =========================================================
   라이트 테마 (index.html 등에서 흰 배경을 쓰고 싶을 때)
   - body.fh-light 또는 .fh-splash.light 를 추가하면 적용
   ========================================================= */
body.fh-light, .fh-splash.light{ background:#fff; color:#101828 }
body.fh-light .fh-splash, .fh-splash.light{
  background:#fff; color:#101828;
}
body.fh-light .fh-noise, body.fh-light .fh-scanlines, body.fh-light .fh-vignette,
.fh-splash.light .fh-noise, .fh-splash.light .fh-scanlines, .fh-splash.light .fh-vignette{
  display:none !important;
}

/* 라이트 토큰 */
body.fh-light, .fh-splash.light{
  --text:#101828; --muted:#475467;
  --card:#ffffff; --border:#e5e7eb; --border-2:#cbd5e1;
}
/* 라이트 버튼 */
body.fh-light a.btn, body.fh-light button,
.fh-splash.light a.btn, .fh-splash.light button{
  background:#fff; color:var(--text); border-color:var(--border-2);
  box-shadow:0 1px 2px rgba(16,24,40,.06);
}
body.fh-light a.btn:hover, body.fh-light button:hover,
.fh-splash.light a.btn:hover, .fh-splash.light button:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 12px rgba(16,24,40,.12);
  border-color:#94a3b8; background:#f9fafb;
}

/* 라이트 오버레이/시네마틱 */
body.fh-light .fh-cinema, .fh-splash.light .fh-cinema{
  background:#fff; color:#101828; border-color:#e5e7eb; box-shadow:0 18px 60px rgba(0,0,0,.45);
}
body.fh-light .cinema-frame img, .fh-splash.light .cinema-frame img{ background:#eceff3 }
body.fh-light #cinDots i, .fh-splash.light #cinDots i{ background:#cbd5e1 }
body.fh-light #cinDots i.on, .fh-splash.light #cinDots i.on{
  background:var(--accent); box-shadow:0 0 0 3px rgba(29,78,216,.18);
}

/* 유틸 */
.fh-hidden{display:none !important}


/* 버튼 상태 컬러 고정 */
button, .btn, a.btn { -webkit-tap-highlight-color: transparent; }
.btn,
a.btn { transition: box-shadow .12s, transform .06s, background .12s, border-color .12s; }

.btn:active,
a.btn:active { transform: translateY(0); }

/* 기본 버튼: 눌러도 흰색 유지 */
.btn:not(.primary):active,
a.btn:not(.primary):active {
  background: #fff !important;
  color: var(--fh-text) !important;
  border-color: #94a3b8 !important;
}

/* 프라이머리 버튼: 눌러도 동일 색 유지 */
.btn.primary:active,
a.btn.primary:active {
  background: var(--fh-accent) !important;
  color: var(--fh-accent-ink) !important;
  border-color: #1e40af !important;
}

/* 혹시 전체 프로젝트에 버튼 :active=검정 이 있었다면 덮어쓰기 */
button:active { background: initial; color: inherit; }



/* === Mobile balance fix (≤600px) === */
@media (max-width: 600px){
  html, body { overflow-x: hidden; }

  /* 스플래시 전체 여백/정렬 보정 */
  .fh-splash{
    grid-template-rows: auto auto auto;
    padding: 16px 12px;
    justify-items: center;
    align-content: start;
    row-gap: 16px;
  }

  /* 브랜드 영역 타이포 축소 + 중앙 정렬 */
  .fh-logo{ width:84px; margin-bottom:10px; }
  .fh-title{ font-size:28px; margin:6px 0 2px; text-align:center; }
  .fh-tag{ font-size:13px; text-align:center; }

  /* 히어로: 가로폭 꽉 차게 + 중앙 정렬 + 비율 완화 */
  .hero{
    width: 100%;
    aspect-ratio: 3 / 2;         /* 세로가 너무 길게 느껴지지 않도록 */
    border-radius: 12px;
    margin: 0 auto;
    display: grid;
    place-items: end center;      /* ← 모바일에서 중앙 정렬로 바꿈 (desktop은 start) */
  }
  .hero .overlay{
    width: 100%;
    padding: 10px 12px;
    font-size: 14px;
    text-align: center;           /* 문구도 중앙 */
    background: linear-gradient(0deg, rgba(0,0,0,.35), rgba(0,0,0,0));
  }

  /* CTA: 세로 스택 + 전체폭 버튼 */
  .fh-cta{
    width: 100%;
    flex-direction: column;
    align-items: stretch;
    gap: 8px;
  }
  .fh-cta .btn{
    width: 100%;
    justify-content: center;
    padding: 12px 14px;
    font-size: 15px;
  }

  /* 하단 힌트 여백/가독성 */
  .fh-hint, .fh-tap-hint{ font-size:12px; text-align:center; }

  /* 시네마틱 오버레이: 화면에 꽉 차게 */
  .fh-cinema{
    width: calc(100vw - 24px);
    border-radius: 12px;
  }
  .cinema-frame img{ height: 42vh; }
  .cinema-frame figcaption{ padding: 12px; font-size: 14px; }
  .cinema-ui{ padding: 8px 10px; gap: 6px; }
  .cinema-ui .left, .cinema-ui .right{ gap: 6px; }
  #cinDots i{ width:7px; height:7px; }
}

/* 눌렀을 때 어둡게 변하는 현상 방지(모바일 터치) */
button, .btn, a.btn { -webkit-tap-highlight-color: transparent; }
.btn:active, a.btn:active { transform: translateY(0); }
.btn:not(.primary):active, a.btn:not(.primary):active {
  background:#fff !important; color:var(--fh-text) !important; border-color:#94a3b8 !important;
}
.btn.primary:active, a.btn.primary:active {
  background:var(--fh-accent) !important; color:var(--fh-accent-ink) !important; border-color:#1e40af !important;
}

/* === 모바일 전용 전체 중앙 정렬 === */
@media (max-width: 600px){
  .fh-splash{
    justify-items: center;   /* 가로 중앙 */
    align-items: center;     /* 세로 중앙 */
    text-align: center;      /* 텍스트도 중앙 */
    padding: 20px 12px;
  }

  .fh-brand, .hero, .fh-cta, .fh-hint, .fh-tap-hint{
    margin-left: auto;
    margin-right: auto;
    text-align: center;
  }

  .fh-cta{
    flex-direction: column;
    align-items: center;
    width: 100%;
  }
  .fh-cta .btn{
    width: 100%;
    max-width: 320px;  /* 버튼이 너무 길게 퍼지지 않도록 제한 */
    justify-content: center;
  }

  .hero{
    width: 100%;
    max-width: 420px;   /* 중앙 정렬된 카드 느낌 */
    margin: 0 auto;
    display: grid;
    place-items: end center;
  }
}