/* ============================================================
   은하수마을 — style.css  (light-modern-country 테마)
   ============================================================ */

/* ── 테마 변수 ── */
:root {
  --bg:         #fdf9f3;
  --bg-2:       #f7f1e6;
  --bg-3:       #ede5d4;
  --accent:     #c47c3a;
  --accent-dim: rgba(196,124,58,0.1);
  --text:       #3d3028;
  --text-muted: #9a8a7a;
  --border:     rgba(196,124,58,0.22);
  --white:      #2c2018;

  --font-serif: 'Jua','Noto Serif KR',sans-serif;
  --font-sans:  'Noto Sans KR',sans-serif;
  --font-cute:  'Jua','Noto Sans KR',sans-serif;

  --section-py: 110px;
  --container:  1100px;

  --hero-bg:          none;
  --hero-overlay:     transparent;
  --hero-title-color: #2c2018;
}

/* ============================================================
   기본 리셋
   ============================================================ */
*, *::before, *::after { margin:0; padding:0; box-sizing:border-box; }
html  { scroll-behavior:smooth; font-size:16px; }
body  {
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-weight:300;
  line-height:1.8;
  overflow-x:hidden;
}
img { display:block; max-width:100%; }
a   { color:inherit; text-decoration:none; }

/* ============================================================
   NAV
   ============================================================ */
#navbar {
  position:fixed; top:0; left:0; right:0;
  z-index:100;
  padding:0 40px;
  transition:background .4s, backdrop-filter .4s, border-color .4s;
}
#navbar.scrolled {
  background: rgba(253,249,243,0.94);
  backdrop-filter: blur(14px);
  border-bottom: 1px solid var(--border);
}
.nav-inner {
  max-width: var(--container);
  margin:0 auto;
  display:flex; align-items:center; justify-content:space-between;
  height:64px;
}
.nav-logo {
  font-family: var(--font-serif);
  font-size: 1rem;
  color: var(--accent);
  letter-spacing: .2em;
}
.nav-links { list-style:none; display:flex; gap:36px; }
.nav-links a {
  color: var(--text-muted);
  font-size: .75rem;
  letter-spacing: .18em;
  text-transform: uppercase;
  transition: color .2s;
}
.nav-links a:hover { color: var(--accent); }

.nav-toggle {
  display:none; flex-direction:column; gap:5px;
  background:none; border:none; cursor:pointer; padding:8px;
}
.nav-toggle span {
  display:block; width:22px; height:1px;
  background: var(--accent);
  transition: .3s;
}

/* ============================================================
   HERO
   ============================================================ */
.section-hero {
  position:relative;
  height:100vh; min-height:600px;
  display:flex; align-items:center; justify-content:center;
  background-image: var(--hero-bg);
  background-size:cover; background-position:center;
  background-color: var(--bg-3);
}
.hero-overlay {
  position:absolute; inset:0;
  background: var(--hero-overlay);
}
/* 위에서 내리쬐는 햇살 빛줄기 (은은하게) */
.section-hero::before {
  content:'';
  position:absolute; top:0; left:0; right:0; height:75%;
  pointer-events:none;
  background:
    linear-gradient(170deg, rgba(255,248,220,0.55) 0%, rgba(255,248,220,0) 40%),
    linear-gradient(200deg, rgba(255,244,205,0.35) 0%, rgba(255,244,205,0) 32%),
    linear-gradient(150deg, rgba(255,250,228,0.4) 0%, rgba(255,250,228,0) 30%);
  mix-blend-mode:screen;
}
.hero-content {
  position:relative; z-index:1;
  text-align:center; padding:0 24px;
  animation: fadeUp .9s ease both;
}
.hero-eyebrow {
  font-size:.72rem; letter-spacing:.48em;
  text-transform:uppercase; color: var(--accent);
  margin-bottom:20px;
}
.hero-title {
  font-family: var(--font-cute);
  font-size: clamp(2.6rem,7vw,5.6rem);
  font-weight:400; line-height:1.25;
  letter-spacing:.02em;
  white-space:pre-line;          /* config 의 \n 을 줄바꿈으로 */
  text-align:center;
  color: var(--hero-title-color, var(--white));
  margin-bottom:24px;
}
.hero-subtitle {
  font-size:1rem; color: var(--text);
  max-width:480px; margin:0 auto 44px; opacity:.8;
}
.hero-bgm-btn {
  display:flex; align-items:center; gap:9px;
  width:fit-content; margin:0 auto 36px;
  padding:12px 28px;
  background:rgba(255,255,255,0.5);
  border:1px solid var(--accent);
  border-radius:999px;
  color:var(--accent);
  font-family:var(--font-sans); font-size:.82rem; font-weight:500;
  letter-spacing:.14em;
  cursor:pointer;
  backdrop-filter:blur(4px);
  transition:all .25s;
}
.hero-bgm-btn:hover {
  background:var(--accent); color:#fff;
  transform:translateY(-2px);
  box-shadow:0 8px 22px rgba(196,124,58,.35);
}
.hero-bgm-btn .hero-bgm-icon { font-size:1rem; }
.hero-bgm-btn.playing .hero-bgm-icon {
  display:inline-block;
  animation:spin 3s linear infinite;
}

.hero-scroll-btn {
  display:inline-flex; align-items:center; justify-content:center;
  width:44px; height:44px;
  border:1px solid var(--border); border-radius:50%;
  color: var(--accent); font-size:1.1rem;
  transition:all .3s;
  animation: bounce 2.2s infinite;
}
.hero-scroll-btn:hover {
  background: var(--accent-dim); border-color: var(--accent);
}

/* ============================================================
   공통 섹션
   ============================================================ */
.container {
  max-width: var(--container);
  margin:0 auto; padding:0 24px;
}
.section-title {
  font-family: var(--font-serif);
  font-size: clamp(1.5rem,3vw,2.2rem);
  font-weight:300; color: var(--white);
  letter-spacing:.12em; text-align:center;
  margin-bottom:64px;
}
.section-title::after {
  content:'';
  display:block; width:36px; height:1px;
  background: var(--accent);
  margin:14px auto 0;
}

.reveal {
  opacity:0;
  transform:translateY(32px);
  transition:opacity .8s ease, transform .8s ease;
}
.reveal.visible { opacity:1; transform:translateY(0); }

/* ============================================================
   LORE
   ============================================================ */
.section-lore { padding:var(--section-py) 0; background:var(--bg-2); }

.lore-body {
  max-width:720px; margin:0 auto;
  display:grid; gap:1.8em;
}
.lore-body p {
  font-size:1.02rem; line-height:2.1; color:var(--text);
}

/* ============================================================
   SCENERY
   ============================================================ */
.section-scenery { padding:var(--section-py) 0; background:var(--bg); }

.scenery-grid {
  display:grid;
  grid-template-columns: repeat(3, 1fr);
  gap:16px;
}
.scenery-item {
  overflow:hidden;
  border:1px solid var(--border);
  border-radius:2px;
  transition: box-shadow .3s;
}
.scenery-item:hover { box-shadow:0 8px 32px rgba(196,124,58,.15); }

.scenery-img-wrap {
  aspect-ratio:4/3; overflow:hidden;
  background:var(--bg-3);
}
.scenery-img-wrap img {
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .5s ease;
}
.scenery-item:hover .scenery-img-wrap img { transform:scale(1.05); }

.scenery-item figcaption {
  padding:12px 16px;
  font-size:.8rem; color:var(--text-muted);
  letter-spacing:.1em;
  background:var(--bg-2);
  border-top:1px solid var(--border);
}

/* ============================================================
   CHARACTERS
   ============================================================ */
.section-characters { padding:var(--section-py) 0; background:var(--bg-2); }

.chars-filter {
  display:flex; justify-content:center; gap:10px;
  flex-wrap:wrap; margin-bottom:52px;
}
.filter-btn {
  padding:7px 18px;
  border:1px solid var(--border); background:none;
  color:var(--text-muted);
  font-family:var(--font-sans); font-size:.75rem;
  letter-spacing:.15em; text-transform:uppercase;
  cursor:pointer; transition:all .2s; border-radius:2px;
}
.filter-btn:hover, .filter-btn.active {
  border-color:var(--accent); color:var(--accent);
  background:var(--accent-dim);
}

.chars-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(220px,1fr));
  gap:20px;
}

.char-card {
  background:var(--bg);
  border:1px solid var(--border);
  cursor:pointer;
  transition:border-color .3s, transform .3s, box-shadow .3s;
  overflow:hidden; border-radius:2px;
}
.char-card:hover {
  border-color:var(--accent);
  transform:translateY(-5px);
  box-shadow:0 16px 40px rgba(196,124,58,.15);
}
.char-card-img {
  aspect-ratio:3/4; overflow:hidden;
  background:var(--bg-3);
}
.char-card-img img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
  transition:transform .5s ease;
}
.char-card:hover .char-card-img img { transform:scale(1.06); }
.char-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:3.5rem;
}
.char-card-info { padding:18px 20px 20px; }
.char-card-role {
  font-size:.68rem; color:var(--accent);
  letter-spacing:.18em; text-transform:uppercase;
  margin-bottom:6px;
}
.char-card-name {
  font-family:var(--font-serif);
  font-size:1.1rem; color:var(--white);
  margin-bottom:8px; font-weight:400;
}
.char-card-desc {
  font-size:.84rem; color:var(--text-muted);
  display:-webkit-box;
  -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden;
}
.char-tags {
  display:flex; flex-wrap:wrap; gap:6px; margin-top:12px;
}
.tag {
  padding:2px 10px;
  border:1px solid var(--border);
  font-size:.68rem; color:var(--text-muted);
  letter-spacing:.1em; border-radius:2px;
}

/* ============================================================
   FACTIONS (명소)
   ============================================================ */
.section-factions { padding:var(--section-py) 0; background:var(--bg); }

.factions-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill, minmax(260px,1fr));
  gap:20px;
}
.faction-card {
  padding:28px 24px;
  border:1px solid var(--border);
  background:var(--bg-2);
  transition:border-color .3s, box-shadow .3s;
  border-radius:2px;
}
.faction-card:hover {
  border-color:var(--accent);
  box-shadow:0 8px 24px rgba(196,124,58,.1);
}
.faction-icon  { font-size:2.2rem; margin-bottom:12px; }
.faction-name  {
  font-family:var(--font-serif);
  font-size:1.05rem; color:var(--white);
  margin-bottom:10px; font-weight:400;
}
.faction-desc  { font-size:.86rem; color:var(--text-muted); line-height:1.9; }

/* ============================================================
   TIMELINE
   ============================================================ */
.section-timeline { padding:var(--section-py) 0; background:var(--bg-2); }

.timeline-list {
  max-width:700px; margin:0 auto;
  position:relative; padding-left:32px;
}
.timeline-list::before {
  content:''; position:absolute;
  left:0; top:0; bottom:0;
  width:1px; background:var(--border);
}
.timeline-item { position:relative; margin-bottom:44px; }
.timeline-item::before {
  content:''; position:absolute;
  left:-36px; top:6px;
  width:8px; height:8px;
  border:1px solid var(--accent); border-radius:50%;
  background:var(--bg);
}
.timeline-year {
  font-size:.72rem; color:var(--accent);
  letter-spacing:.2em; text-transform:uppercase;
  margin-bottom:6px;
}
.timeline-event {
  font-family:var(--font-serif);
  font-size:1.05rem; color:var(--white);
  margin-bottom:6px; font-weight:400;
}
.timeline-desc { font-size:.88rem; color:var(--text-muted); line-height:1.85; }

/* ============================================================
   FOOTER
   ============================================================ */
.site-footer {
  padding:36px 0;
  background:var(--bg-2);
  border-top:1px solid var(--border);
  text-align:center;
}
.site-footer p {
  font-size:.78rem; color:var(--text-muted);
  letter-spacing:.12em;
}

/* ============================================================
   MODAL
   ============================================================ */
.modal-overlay {
  position:fixed; inset:0;
  background:rgba(61,48,40,.7);
  z-index:200;
  display:flex; align-items:center; justify-content:center;
  padding:24px;
  opacity:0; pointer-events:none;
  transition:opacity .3s;
}
.modal-overlay.active {
  opacity:1; pointer-events:all;
}
.modal-box {
  background:var(--bg);
  border:1px solid var(--border);
  max-width:680px; width:100%;
  max-height:88vh; overflow-y:auto;
  position:relative; border-radius:4px;
  transform:translateY(24px);
  transition:transform .3s;
}
.modal-overlay.active .modal-box { transform:translateY(0); }

.modal-close {
  position:sticky; top:0; float:right;
  margin:16px 16px 0 0;
  background:none; border:1px solid var(--border);
  color:var(--text-muted);
  width:32px; height:32px;
  cursor:pointer; font-size:.85rem;
  transition:all .2s; z-index:1;
}
.modal-close:hover { border-color:var(--accent); color:var(--accent); }

.modal-content { padding:32px 40px 40px; clear:both; }

.modal-head {
  display:flex; gap:28px; margin-bottom:28px;
  align-items:flex-start;
}
.modal-portrait-wrap {
  width:130px; flex-shrink:0;
  aspect-ratio:3/4; overflow:hidden;
  background:var(--bg-3); border-radius:2px;
}
.modal-portrait-wrap img {
  width:100%; height:100%;
  object-fit:cover; object-position:top center;
}
.modal-portrait-placeholder {
  width:100%; height:100%;
  display:flex; align-items:center; justify-content:center;
  font-size:3rem;
}
.modal-meta { flex:1; padding-top:4px; }
.modal-role {
  font-size:.72rem; color:var(--accent);
  letter-spacing:.25em; text-transform:uppercase; margin-bottom:8px;
}
.modal-name {
  font-family:var(--font-serif);
  font-size:clamp(1.4rem,3vw,2rem);
  font-weight:300; color:var(--white);
  margin-bottom:14px;
}
.modal-tags { display:flex; flex-wrap:wrap; gap:8px; }

.modal-body p {
  color:var(--text); line-height:2.1;
  margin-bottom:1em; font-size:.95rem;
}
.modal-detail-row {
  margin-top:16px; padding-top:16px;
  border-top:1px solid var(--border);
}
.modal-detail-key {
  font-size:.68rem; color:var(--accent);
  letter-spacing:.22em; text-transform:uppercase;
  margin-bottom:4px;
}
.modal-detail-val { font-size:.9rem; color:var(--text); }

/* ============================================================
   BGM 플레이어
   ============================================================ */
#bgm-player {
  position:fixed; bottom:28px; right:28px;
  z-index:150;
}
#bgm-btn {
  display:flex; align-items:center; gap:8px;
  padding:10px 18px;
  background:var(--bg);
  border:1px solid var(--border);
  border-radius:999px;
  color:var(--text-muted);
  font-family:var(--font-sans); font-size:.75rem;
  letter-spacing:.12em;
  cursor:pointer;
  box-shadow:0 4px 20px rgba(196,124,58,.15);
  transition:all .25s;
}
#bgm-btn:hover {
  border-color:var(--accent);
  color:var(--accent);
  box-shadow:0 6px 24px rgba(196,124,58,.25);
}
#bgm-btn.playing {
  border-color:var(--accent);
  color:var(--accent);
  background:var(--accent-dim);
}
#bgm-icon {
  font-size:.95rem;
  animation:none;
}
#bgm-btn.playing #bgm-icon {
  display:inline-block;
  animation:spin 3s linear infinite;
}
@keyframes spin {
  from { transform:rotate(0deg); }
  to   { transform:rotate(360deg); }
}

/* ============================================================
   애니메이션
   ============================================================ */
@keyframes fadeUp {
  from { opacity:0; transform:translateY(28px); }
  to   { opacity:1; transform:translateY(0); }
}
@keyframes bounce {
  0%,100% { transform:translateY(0); }
  50%      { transform:translateY(7px); }
}

/* ============================================================
   반응형
   ============================================================ */
@media(max-width:900px) {
  :root { --section-py:80px; }
  .scenery-grid { grid-template-columns:repeat(2,1fr); }
}
@media(max-width:680px) {
  :root { --section-py:64px; }
  #navbar { padding:0 20px; }

  .nav-links {
    position:fixed; top:64px; left:0; right:0;
    background:rgba(253,249,243,.97); backdrop-filter:blur(12px);
    flex-direction:column; align-items:center;
    padding:24px 0; gap:22px;
    border-bottom:1px solid var(--border);
    transform:translateY(-100%); opacity:0;
    pointer-events:none; transition:all .3s;
  }
  .nav-links.open { transform:translateY(0); opacity:1; pointer-events:all; }
  .nav-toggle { display:flex; }

  .scenery-grid { grid-template-columns:1fr; }
  .chars-grid { grid-template-columns:repeat(auto-fill, minmax(160px,1fr)); }
  .modal-head { flex-direction:column; }
  .modal-portrait-wrap { width:100%; aspect-ratio:16/9; }
  .modal-content { padding:24px 24px 32px; }
}