/* ========================================================
   역사여행지도 TimeWalk — 사진 중심 에디토리얼 디자인
   ======================================================== */
:root {
  --bg: #0e0d0b;
  --bg-2: #171512;
  --panel: #1e1b17;
  --line: rgba(255,255,255,.10);
  --txt: #f2ede4;
  --txt-2: #b8b0a2;
  --txt-3: #8a8276;
  --gold: #c9a227;
  --gold-2: #e6c35c;
  --accent: #b3552e;
  --serif: "Noto Serif KR", "Nanum Myeongjo", serif;
  --sans: "Pretendard", "Noto Sans KR", -apple-system, "Malgun Gothic", sans-serif;
  --rad: 14px;
  --shadow: 0 12px 40px rgba(0,0,0,.45);
}
* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { background:var(--bg); color:var(--txt); font-family:var(--sans); line-height:1.65; -webkit-font-smoothing:antialiased; }
img { display:block; max-width:100%; }
a { color:inherit; text-decoration:none; }
button { font-family:inherit; cursor:pointer; border:none; background:none; color:inherit; }

.skip-link {
  position:fixed; left:16px; top:10px; z-index:10000;
  transform:translateY(-160%); background:var(--gold); color:#181307;
  padding:10px 16px; border-radius:999px; font-weight:800; box-shadow:var(--shadow);
  transition:transform .18s;
}
.skip-link:focus { transform:translateY(0); }

/* ---------- 상단바 ---------- */
.topbar {
  position:fixed; inset:0 0 auto 0; z-index:1200;
  display:flex; align-items:center; gap:18px;
  padding:14px 22px;
  background:linear-gradient(180deg, rgba(10,9,7,.92), rgba(10,9,7,.72) 70%, transparent);
 
}
.brand { display:flex; flex-direction:column; line-height:1.15; }
.brand b { font-family:var(--serif); font-size:1.18rem; letter-spacing:.04em; color:var(--gold-2); }
.brand span { font-size:.68rem; color:var(--txt-3); letter-spacing:.22em; text-transform:uppercase; }
.nav { display:flex; gap:4px; margin-left:auto; flex-wrap:wrap; }
.nav button, .nav a {
  padding:8px 14px; border-radius:999px; font-size:.86rem; color:var(--txt-2);
  border:1px solid transparent; transition:.2s;
}
.nav button:hover, .nav a:hover { color:var(--txt); border-color:var(--line); }
.nav .active { color:#181307; background:var(--gold); font-weight:700; }
.nav .cta { background:var(--accent); color:#fff; font-weight:700; }
.mobile-nav { display:none; position:relative; margin-left:auto; }
.mobile-nav summary { min-height:42px; display:flex; align-items:center; padding:8px 12px; border:1px solid var(--line); border-radius:7px; color:var(--txt); font-size:.78rem; font-weight:700; list-style:none; cursor:pointer; }
.mobile-nav summary::-webkit-details-marker { display:none; }
.mobile-nav-menu { position:absolute; z-index:1100; top:calc(100% + 8px); right:0; width:min(270px,calc(100vw - 24px)); max-height:calc(100vh - 90px); overflow:auto; padding:8px; border:1px solid var(--line); border-radius:10px; background:var(--panel); box-shadow:0 18px 45px rgba(0,0,0,.45); }
.mobile-nav-menu a,.mobile-nav-menu button { width:100%; min-height:44px; display:flex; align-items:center; padding:10px 12px; border-radius:6px; color:var(--txt-2); text-align:left; font-size:.84rem; }
.mobile-nav-menu a:hover,.mobile-nav-menu button:hover { color:var(--txt); background:rgba(255,255,255,.06); }
.section { scroll-margin-top:72px; }
.brand,.auth-status,.xp-badge { flex-shrink:0; }
.xp-badge { display:flex; flex-direction:column; min-width:132px; line-height:1.25; color:var(--txt-2); font-size:.68rem; }
.xp-badge b { color:var(--txt); font-size:.76rem; }
.xp-badge span { white-space:nowrap; }

/* ---------- 히어로 ---------- */
.hero {
  position:relative; min-height:78vh; display:flex; align-items:flex-end;
  background-size:cover; background-position:center 30%;
}
.hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,11,.25) 0%, rgba(14,13,11,.55) 55%, var(--bg) 100%); }
.hero-inner { position:relative; z-index:2; padding:120px 6vw 70px; max-width:980px; }
.hero-kicker { font-size:.8rem; letter-spacing:.34em; color:var(--gold-2); text-transform:uppercase; margin-bottom:14px; }
.hero h1 { font-family:var(--serif); font-size:clamp(2rem, 5.4vw, 3.8rem); font-weight:900; line-height:1.22; text-shadow:0 4px 30px rgba(0,0,0,.6); }
.hero p { margin-top:16px; font-size:clamp(.98rem, 1.6vw, 1.15rem); color:#ded7c9; max-width:640px; text-shadow:0 2px 14px rgba(0,0,0,.7); }
.hero-actions { display:flex; gap:12px; margin-top:28px; flex-wrap:wrap; }
.btn {
  display:inline-flex; align-items:center; gap:8px;
  padding:13px 26px; border-radius:999px; font-size:.95rem; font-weight:700; transition:.2s;
}
.btn-gold { background:var(--gold); color:#181307; }
.btn-gold:hover { background:var(--gold-2); transform:translateY(-2px); }
.btn-ghost { border:1px solid rgba(255,255,255,.4); color:#fff; }
.btn-ghost:hover { background:rgba(255,255,255,.12); }
.hero-credit { position:absolute; right:14px; bottom:10px; z-index:3; font-size:.62rem; color:rgba(255,255,255,.4); }
html.data-lite .hero, html.data-lite .region-card, html.data-lite .today-card, html.data-lite .stamp, html.data-lite .m-hero { background-image:linear-gradient(145deg,#202733,#0f1319) !important; }
.network-status { position:fixed; z-index:9500; top:74px; left:50%; transform:translate(-50%,-12px); display:flex; align-items:center; gap:9px; max-width:min(92vw,680px); padding:10px 14px; border:1px solid rgba(201,162,39,.55); border-radius:12px; background:#171b22; color:var(--txt-2); box-shadow:var(--shadow); opacity:0; pointer-events:none; transition:.2s; font-size:.78rem; }
.network-status.show { opacity:1; transform:translate(-50%,0); pointer-events:auto; }
.network-status b { color:var(--gold-2); white-space:nowrap; }
.network-status button { margin-left:auto; padding:6px 10px; border:1px solid var(--line); border-radius:999px; color:var(--txt); white-space:nowrap; }
.image-fallback { display:grid; place-items:center; min-height:110px; padding:18px; background:#171b22; color:var(--txt-2); text-align:center; font-size:.8rem; }

/* ---------- 공통 섹션 ---------- */
.section { padding:72px 6vw; max-width:1280px; margin:0 auto; }
.sec-kicker { font-size:.74rem; letter-spacing:.3em; color:var(--gold); text-transform:uppercase; margin-bottom:10px; }
.sec-title { font-family:var(--serif); font-size:clamp(1.5rem,3vw,2.2rem); font-weight:800; margin-bottom:10px; }
.sec-desc { color:var(--txt-2); max-width:640px; margin-bottom:34px; }

/* ---------- 지도 ---------- */
.map-wrap { position:relative; border-radius:var(--rad); overflow:hidden; box-shadow:var(--shadow); border:1px solid var(--line); }
#map { height:62vh; min-height:430px; background:#10141a; z-index:1; }
.map-a11y-help { padding:10px 14px; color:var(--txt-2); font-size:.82rem; background:#10141a; }
.journey-steps { position:sticky; top:0; z-index:5; display:flex; gap:7px; overflow:auto; padding:10px 0; background:var(--bg-2); }
.journey-steps a { white-space:nowrap; color:var(--txt-2); border:1px solid var(--line); border-radius:999px; padding:7px 11px; font-size:.78rem; text-decoration:none; }
.journey-steps a.done { color:var(--gold-2); border-color:rgba(201,162,39,.55); background:rgba(201,162,39,.08); }
.journey-steps a[aria-current="step"] { color:#181307; border-color:var(--gold); background:var(--gold); font-weight:700; }
.journey-progress { margin:2px 0 18px; padding:12px 14px; border:1px solid var(--line); border-radius:12px; background:var(--panel); }
.journey-progress-copy { display:flex; justify-content:space-between; gap:12px; color:var(--txt-2); font-size:.78rem; }
.journey-progress-copy b { color:var(--gold-2); }
.journey-progress-track { height:5px; margin-top:9px; border-radius:999px; overflow:hidden; background:rgba(255,255,255,.09); }
.journey-progress-track span { display:block; width:0; height:100%; border-radius:inherit; background:linear-gradient(90deg,var(--gold),var(--gold-2)); transition:width .25s ease; }
.journey-steps a:focus-visible,.region-card:focus-visible,.gb-report:focus-visible { outline:3px solid var(--gold-2); outline-offset:3px; }
.learning-note { width:100%; margin-top:10px; padding:14px; border-radius:10px; border:1px solid var(--line); background:var(--panel); color:var(--txt); font:inherit; resize:vertical; }
.learning-actions { display:flex; align-items:center; gap:12px; margin-top:10px; }
.gb-report { float:right; border:0; background:transparent; color:var(--txt-3); text-decoration:underline; cursor:pointer; }
@media (max-width:600px){.journey-steps{position:static;display:grid;grid-template-columns:repeat(2,minmax(0,1fr));overflow:visible;margin-inline:0;padding:10px 0}.journey-steps a{white-space:normal;text-align:center;line-height:1.3}.journey-progress-copy{align-items:flex-start;flex-direction:column;gap:3px}.learning-actions{align-items:flex-start;flex-direction:column}}
@media (max-width:600px){.network-status{top:62px;align-items:flex-start;flex-wrap:wrap}.network-status span{flex:1 1 60%}}
.map-toolbar {
  position:absolute; z-index:1000; top:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:8px; background:rgba(14,13,11,.86); border:1px solid var(--line);
  padding:6px; border-radius:999px; flex-wrap:wrap; justify-content:center;
}
.map-toolbar button { padding:7px 16px; border-radius:999px; font-size:.84rem; color:var(--txt-2); }
.map-toolbar button.on { background:var(--gold); color:#181307; font-weight:700; }
.era-filter {
  position:absolute; z-index:1000; bottom:14px; left:50%; transform:translateX(-50%);
  display:flex; gap:6px; background:rgba(14,13,11,.86); border:1px solid var(--line);
  padding:6px; border-radius:999px; flex-wrap:wrap; justify-content:center; max-width:94%;
}
.era-filter button { padding:5px 13px; border-radius:999px; font-size:.78rem; color:var(--txt-2); white-space:nowrap; }
.era-filter button.on { background:var(--accent); color:#fff; font-weight:700; }

/* 사진 마커 */
.photo-marker { border-radius:50%; overflow:hidden; box-shadow:0 4px 14px rgba(0,0,0,.55), 0 0 0 3px var(--gold); width:100%; height:100%; background-size:cover; background-position:center; transition:transform .15s; }
.photo-marker span { display:grid; width:100%; height:100%; place-items:center; background:#202733; color:var(--gold-2); font-weight:800; font-size:.78rem; }
.photo-marker:hover { transform:scale(1.12); box-shadow:0 6px 20px rgba(0,0,0,.7), 0 0 0 3px var(--gold-2); }
.leaflet-popup-content-wrapper { background:var(--panel); color:var(--txt); border-radius:12px; box-shadow:var(--shadow); }
.leaflet-popup-tip { background:var(--panel); }
.mini-pop { width:210px; }
.mini-pop img { width:100%; height:110px; object-fit:cover; border-radius:8px 8px 0 0; }
.mini-pop .mp-body { padding:10px 12px 12px; }
.mini-pop b { font-family:var(--serif); font-size:1.02rem; }
.mini-pop p { font-size:.78rem; color:var(--txt-2); margin:4px 0 10px; }
.mini-pop button { width:100%; padding:8px; background:var(--gold); color:#181307; border-radius:8px; font-weight:700; font-size:.84rem; }

/* ---------- 지역 카드 그리드 ---------- */
.region-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(250px,1fr)); gap:18px; }
.region-card {
  position:relative; height:300px; border-radius:var(--rad); overflow:hidden; cursor:pointer;
  background-size:cover; background-position:center; box-shadow:var(--shadow);
  transition:transform .25s;
}
.region-card:hover { transform:translateY(-6px); }
.region-card::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, transparent 30%, rgba(8,7,5,.88) 100%); }
.rc-body { position:absolute; z-index:2; left:0; right:0; bottom:0; padding:18px; }
.rc-body h3 { font-family:var(--serif); font-size:1.3rem; }
.rc-body p { font-size:.8rem; color:#cfc7b8; margin-top:3px; }
.rc-badges { position:absolute; z-index:2; top:12px; left:12px; display:flex; gap:6px; }
.badge { font-size:.66rem; padding:4px 10px; border-radius:999px; background:rgba(10,9,7,.72); border:1px solid rgba(255,255,255,.18); color:#e9e2d3; }
.badge.stamped { background:var(--gold); color:#181307; border-color:transparent; font-weight:700; }

/* ---------- 스토리 모달 ---------- */
body.modal-open .map-wrap { visibility:hidden; } /* GPU 합성 충돌 방지 */
.modal-back {
  position:fixed; inset:0; z-index:2000; background:rgba(5,4,3,.78);
  display:flex; align-items:center; justify-content:center; padding:3vh 3vw;
  opacity:0; pointer-events:none; transition:.25s;
}
.modal-back.show { opacity:1; pointer-events:auto; }
.modal {
  width:min(1060px, 100%); max-height:94vh; overflow-y:auto; border-radius:18px;
  background:var(--bg-2); border:1px solid var(--line); box-shadow:0 30px 80px rgba(0,0,0,.7);
}
.modal::-webkit-scrollbar { width:8px; } .modal::-webkit-scrollbar-thumb { background:#3a352c; border-radius:8px; }
.m-hero { position:relative; height:330px; background-size:cover; background-position:center; }
.m-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(180deg, rgba(14,13,11,.1) 30%, var(--bg-2) 100%); }
.m-hero-txt { position:absolute; z-index:2; left:34px; right:34px; bottom:18px; }
.m-hero-txt .mk { font-size:.74rem; letter-spacing:.3em; color:var(--gold-2); text-transform:uppercase; }
.m-hero-txt h2 { font-family:var(--serif); font-size:clamp(1.7rem,3.4vw,2.5rem); font-weight:900; text-shadow:0 3px 20px rgba(0,0,0,.7); }
.m-hero-txt p { color:#d8d0c0; font-size:.95rem; text-shadow:0 2px 10px rgba(0,0,0,.8); }
.m-close { position:absolute; z-index:5; top:16px; right:16px; width:40px; height:40px; border-radius:50%; background:rgba(10,9,7,.7); border:1px solid rgba(255,255,255,.25); color:#fff; font-size:1.1rem; }
.m-close:hover { background:var(--accent); }
.m-actions { display:flex; gap:10px; padding:16px 34px 0; flex-wrap:wrap; }
.m-actions .btn { padding:10px 20px; font-size:.88rem; }
.btn-line { border:1px solid var(--line); color:var(--txt-2); }
.btn-line:hover { color:var(--txt); border-color:var(--gold); }
.btn-line.on { background:var(--gold); color:#181307; border-color:transparent; font-weight:700; }

.m-body { padding:10px 34px 38px; }
.era-tabs { display:flex; gap:8px; margin:20px 0 6px; flex-wrap:wrap; }
.era-tab {
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); color:var(--txt-2); font-size:.88rem; transition:.2s;
}
.era-tab.on { background:var(--accent); border-color:transparent; color:#fff; font-weight:700; }
.era-panel { padding:22px 0 6px; }
.era-period { font-size:.78rem; letter-spacing:.2em; color:var(--gold); margin-bottom:6px; }
.era-title { font-family:var(--serif); font-size:1.5rem; font-weight:800; margin-bottom:12px; }
.era-story { color:#ddd5c6; font-size:1.02rem; line-height:1.95; }
.era-spots { display:flex; gap:8px; flex-wrap:wrap; margin-top:16px; }
.spot-chip { font-size:.78rem; padding:6px 13px; border-radius:999px; background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.35); color:var(--gold-2); }
.era-ask {
  margin-top:22px; padding:18px 22px; border-left:3px solid var(--gold); background:rgba(201,162,39,.07);
  border-radius:0 12px 12px 0; font-family:var(--serif); font-size:1.02rem; color:#ecdfc0;
}
.era-ask small { display:block; font-family:var(--sans); font-size:.7rem; letter-spacing:.26em; color:var(--gold); margin-bottom:6px; }

.m-gallery { display:grid; grid-template-columns:repeat(auto-fill,minmax(170px,1fr)); gap:10px; margin-top:26px; }
.m-gallery figure { position:relative; height:130px; border-radius:10px; overflow:hidden; cursor:pointer; }
.m-gallery img { width:100%; height:100%; object-fit:cover; transition:transform .3s; }
.m-gallery figure:hover img { transform:scale(1.07); }
.m-gallery figcaption { position:absolute; left:0; right:0; bottom:0; padding:18px 10px 7px; font-size:.68rem; color:#eee; background:linear-gradient(transparent, rgba(0,0,0,.85)); }

.m-sub { margin-top:34px; }
.m-sub h4 { font-family:var(--serif); font-size:1.12rem; color:var(--gold-2); margin-bottom:12px; display:flex; align-items:center; gap:8px; }
.course-line { display:flex; flex-wrap:wrap; gap:8px; align-items:center; }
.course-stop { padding:9px 15px; border-radius:10px; background:var(--panel); border:1px solid var(--line); font-size:.85rem; }
.course-arrow { color:var(--gold); font-weight:900; }
.sync-box { padding:20px 24px; border-radius:12px; background:linear-gradient(135deg, rgba(179,85,46,.16), rgba(201,162,39,.10)); border:1px solid rgba(201,162,39,.25); }
.sync-box b { color:var(--gold-2); }
.local-box { padding:20px 24px; border-radius:12px; background:var(--panel); border:1px solid var(--line); }
.local-box li { margin:8px 0 8px 18px; color:#d8d0c0; font-size:.92rem; }
.local-partner { font-size:.76rem; color:var(--txt-3); margin-top:10px; }

/* 검수·출처 안내 */
.trust-box { padding:20px 22px; border-radius:14px; background:rgba(245,239,226,.06); border:1px solid rgba(201,162,39,.22); }
.trust-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:10px; margin-bottom:14px; }
.trust-pill { background:var(--panel); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.trust-pill b { display:block; font-size:.76rem; color:var(--txt-3); margin-bottom:3px; }
.trust-pill span { display:block; color:var(--gold-2); font-weight:800; font-size:.95rem; }
.trust-note { color:var(--txt-2); font-size:.86rem; line-height:1.72; margin-top:10px; }
.trust-note b { color:var(--gold-2); margin-right:6px; }
@media (max-width:760px){ .trust-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:420px){ .trust-grid { grid-template-columns:1fr; } }

/* 교과서 연계 */
.edu-box { padding:16px 22px; border-radius:12px; background:rgba(80,120,180,.10); border:1px solid rgba(120,160,220,.25); }
.edu-line { padding:7px 0; font-size:.9rem; color:#cfd9ea; border-bottom:1px dashed rgba(255,255,255,.08); }
.edu-line:last-child { border-bottom:none; }

/* 4컷 만화 */
.comic-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:12px; }
.comic-panel {
  position:relative; border-radius:12px; padding:38px 16px 16px; min-height:150px;
  background:#f5efe2; color:#2a241a; border:3px solid #2a241a;
  display:flex; flex-direction:column; justify-content:space-between;
}
.comic-no {
  position:absolute; top:-12px; left:-10px; width:30px; height:30px; border-radius:50%;
  background:var(--accent); color:#fff; font-weight:900; display:flex; align-items:center; justify-content:center; border:3px solid #2a241a; font-size:.85rem;
}
.comic-bubble {
  position:relative; background:#fff; border:2px solid #2a241a; border-radius:14px;
  padding:12px 14px; font-size:.9rem; font-weight:600; line-height:1.5;
}
.comic-bubble::after {
  content:""; position:absolute; bottom:-12px; left:24px;
  border:7px solid transparent; border-top-color:#2a241a;
}
.comic-who { margin-top:14px; font-size:.78rem; font-weight:800; color:#6b5b39; text-align:right; }

/* 암기송 */
.song-box { padding:20px 24px; border-radius:12px; background:linear-gradient(135deg, rgba(201,162,39,.14), rgba(179,85,46,.10)); border:1px solid rgba(201,162,39,.3); }
.song-box p { font-family:var(--serif); font-size:1.02rem; color:#f0e6cb; padding:4px 0; }

/* 문화 연결 */
.cul-row { display:flex; gap:14px; margin-bottom:14px; align-items:flex-start; }
.cul-label { flex:0 0 84px; font-size:.78rem; font-weight:800; color:var(--gold-2); padding:10px 0; letter-spacing:.08em; }
.cul-items { display:flex; flex-wrap:wrap; gap:8px; flex:1; }
.cul-item {
  display:block; padding:10px 14px; border-radius:10px; background:var(--panel); border:1px solid var(--line);
  max-width:300px; transition:.15s;
}
.cul-item:hover { border-color:var(--gold); transform:translateY(-2px); }
.cul-item b { display:block; font-size:.86rem; color:var(--txt); }
.cul-item span { display:block; font-size:.74rem; color:var(--txt-3); margin-top:2px; }
@media (max-width:760px){ .cul-row { flex-direction:column; gap:4px; } .cul-label { padding:0; } }

/* 퀴즈 */
.quiz-q { font-weight:700; margin:14px 0 10px; font-size:.98rem; }
.quiz-opts { display:grid; gap:8px; }
.quiz-opt { text-align:left; padding:11px 16px; border-radius:10px; border:1px solid var(--line); background:var(--panel); font-size:.9rem; color:var(--txt-2); transition:.15s; }
.quiz-opt:hover { border-color:var(--gold); color:var(--txt); }
.quiz-opt.correct { background:rgba(64,140,80,.25); border-color:#5da06f; color:#cdebd5; }
.quiz-opt.wrong { background:rgba(160,55,45,.22); border-color:#a0372d; color:#f0c9c2; }
.quiz-exp { margin-top:10px; font-size:.85rem; color:var(--gold-2); display:none; }
.quiz-exp.show { display:block; }

/* ---------- 시네마 모드 ---------- */
.cinema {
  position:fixed; inset:0; z-index:3000; background:#000; display:none;
  align-items:center; justify-content:center; overflow:hidden;
}
.cinema.show { display:flex; }
.cinema-img {
  position:absolute; inset:-6%; background-size:cover; background-position:center;
  animation:kenburns 16s ease-in-out infinite alternate; filter:brightness(.82);
}
@keyframes kenburns { from { transform:scale(1) translate(0,0);} to { transform:scale(1.12) translate(-1.5%, -1.5%);} }
.cinema-grad { position:absolute; inset:0; background:linear-gradient(180deg, rgba(0,0,0,.45), transparent 32%, transparent 58%, rgba(0,0,0,.88)); }
.cinema-ui { position:relative; z-index:5; width:100%; height:100%; display:flex; flex-direction:column; justify-content:space-between; padding:30px clamp(20px,6vw,80px); }
.cinema-top { display:flex; justify-content:space-between; align-items:center; }
.cinema-tag { font-size:.78rem; letter-spacing:.32em; color:var(--gold-2); text-transform:uppercase; }
.cinema-close { width:44px; height:44px; border-radius:50%; background:rgba(0,0,0,.55); border:1px solid rgba(255,255,255,.3); color:#fff; font-size:1.2rem; }
.cinema-bottom { max-width:860px; padding-bottom:14px; }
.cinema-era { font-size:.8rem; letter-spacing:.26em; color:var(--gold-2); margin-bottom:8px; }
.cinema-title { font-family:var(--serif); font-size:clamp(1.5rem,3.6vw,2.6rem); font-weight:900; margin-bottom:14px; text-shadow:0 4px 24px rgba(0,0,0,.8); }
.cinema-text { font-size:clamp(1rem,1.9vw,1.3rem); line-height:1.9; color:#f3eee2; text-shadow:0 2px 14px rgba(0,0,0,.9); font-family:var(--serif); }
.cinema-ctrl { display:flex; gap:10px; margin-top:22px; align-items:center; flex-wrap:wrap; }
.cinema-ctrl button { padding:10px 20px; border-radius:999px; border:1px solid rgba(255,255,255,.35); color:#fff; font-size:.86rem; background:rgba(0,0,0,.35); }
.cinema-ctrl button.main { background:var(--gold); color:#181307; border-color:transparent; font-weight:800; }
.cinema-prog { display:flex; gap:6px; margin-top:18px; }
.cinema-prog span { height:3px; flex:1; background:rgba(255,255,255,.25); border-radius:3px; overflow:hidden; }
.cinema-prog span.done { background:var(--gold); }

/* ---------- 여행 유형 테스트 ---------- */
.dna-card { max-width:760px; margin:0 auto; background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:38px clamp(20px,5vw,52px); box-shadow:var(--shadow); }
.dna-prog { height:5px; background:var(--panel); border-radius:5px; margin-bottom:28px; overflow:hidden; }
.dna-prog i { display:block; height:100%; background:linear-gradient(90deg,var(--accent),var(--gold)); transition:width .3s; }
.dna-q { font-family:var(--serif); font-size:1.3rem; font-weight:800; margin-bottom:22px; }
.dna-opts { display:grid; gap:10px; }
.dna-opt { text-align:left; padding:15px 20px; border-radius:12px; border:1px solid var(--line); background:var(--panel); color:var(--txt-2); font-size:.95rem; transition:.15s; }
.dna-opt:hover { border-color:var(--gold); color:var(--txt); transform:translateX(4px); }
.dna-result-hero { position:relative; height:260px; border-radius:14px; overflow:hidden; margin-bottom:24px; background-size:cover; background-position:center; }
.dna-result-hero::after { content:""; position:absolute; inset:0; background:linear-gradient(transparent, rgba(8,7,5,.9)); }
.dna-result-hero div { position:absolute; z-index:2; bottom:16px; left:20px; }
.dna-result-hero small { color:var(--gold-2); letter-spacing:.26em; font-size:.72rem; }
.dna-result-hero h3 { font-family:var(--serif); font-size:1.9rem; }

/* ---------- 스탬프 ---------- */
.stamp-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(130px,1fr)); gap:14px; }
.stamp {
  position:relative; aspect-ratio:1; border-radius:50%; overflow:hidden; border:3px dashed var(--line);
  display:flex; align-items:center; justify-content:center; background-size:cover; background-position:center;
  filter:grayscale(1) brightness(.45); transition:.3s; cursor:pointer;
}
.stamp.got { filter:none; border:3px solid var(--gold); box-shadow:0 0 22px rgba(201,162,39,.35); }
.stamp span { position:absolute; inset:auto 0 0 0; text-align:center; padding:16px 4px 8px; font-size:.78rem; font-weight:700; background:linear-gradient(transparent, rgba(0,0,0,.9)); }
.stamp-count { font-family:var(--serif); font-size:1.1rem; color:var(--gold-2); margin-bottom:18px; }

/* ---------- 품질 고도화 ---------- */
.quality-section { max-width:1180px; }
.quality-head {
  display:grid; grid-template-columns:minmax(0,1fr) 280px; gap:24px; align-items:end;
  padding:34px; border:1px solid rgba(201,162,39,.26); border-radius:18px;
  background:linear-gradient(135deg, rgba(245,239,226,.08), rgba(201,162,39,.08));
}
.quality-head .sec-desc { margin-bottom:0; max-width:760px; }
.quality-status {
  border:1px solid rgba(201,162,39,.35); border-radius:14px; padding:18px 20px;
  background:rgba(14,13,11,.45);
}
.quality-status b { display:block; color:var(--gold-2); font-family:var(--serif); font-size:1.12rem; }
.quality-status span { display:block; color:var(--txt-2); font-size:.84rem; margin-top:5px; }
.quality-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:14px; margin-top:16px; }
.quality-card {
  min-height:230px; border:1px solid var(--line); border-radius:16px; padding:22px 20px;
  background:var(--bg-2); display:flex; flex-direction:column;
}
.quality-card span {
  width:36px; height:36px; display:flex; align-items:center; justify-content:center;
  border-radius:50%; background:rgba(201,162,39,.14); color:var(--gold-2);
  font-weight:800; font-size:.78rem; margin-bottom:18px;
}
.quality-card h3 { font-family:var(--serif); font-size:1.06rem; color:var(--txt); margin-bottom:10px; }
.quality-card p { color:var(--txt-2); font-size:.88rem; line-height:1.72; }
@media (max-width:1024px){
  .quality-head { grid-template-columns:1fr; padding:24px; }
  .quality-grid { grid-template-columns:1fr 1fr; }
}
@media (max-width:600px){
  .quality-grid { grid-template-columns:1fr; }
  .quality-card { min-height:auto; }
}

/* ---------- 멤버십 ---------- */
.plan-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(250px,1fr)); gap:18px; max-width:1080px; margin:0 auto; }
.plan {
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:30px 26px; position:relative; transition:.25s;
  display:flex; flex-direction:column;
}
.plan:hover { transform:translateY(-6px); border-color:rgba(201,162,39,.5); }
.plan.best { border-color:var(--gold); box-shadow:0 0 36px rgba(201,162,39,.18); }
.plan .flag { position:absolute; top:-12px; left:24px; background:var(--gold); color:#181307; font-size:.7rem; font-weight:800; padding:4px 12px; border-radius:999px; }
.plan h3 { font-family:var(--serif); font-size:1.2rem; margin-bottom:4px; }
.plan .price { font-size:1.7rem; font-weight:900; color:var(--gold-2); margin:10px 0 2px; }
.plan .per { font-size:.78rem; color:var(--txt-3); margin-bottom:16px; }
.plan ul { list-style:none; flex:1; }
.plan li { padding:7px 0; font-size:.88rem; color:var(--txt-2); border-bottom:1px dashed rgba(255,255,255,.07); }
.plan li::before { content:"✓ "; color:var(--gold); font-weight:800; }
.plan .btn { margin-top:20px; justify-content:center; }
.pay-note { text-align:center; color:var(--txt-3); font-size:.78rem; margin-top:18px; }

/* 결제 모달 */
.pay-modal { width:min(560px,100%); background:#fff; color:#222; border-radius:18px; overflow:hidden; }
.pay-modal .pm-head { padding:20px 26px 12px; }
.pay-modal .pm-head h3 { font-size:1.1rem; }
.pay-modal .pm-head p { font-size:.84rem; color:#666; }
#payment-method, #agreement { padding:0 10px; }
.pay-modal .pm-foot { padding:14px 26px 24px; display:flex; gap:10px; }
.pay-modal .pm-foot button { flex:1; padding:14px; border-radius:10px; font-weight:800; font-size:.95rem; }
.pm-pay { background:#3282f6; color:#fff; }
.pm-cancel { background:#eee; color:#555; }

/* ---------- 제휴/B2G ---------- */
.b2g-grid { display:grid; grid-template-columns:repeat(auto-fit,minmax(280px,1fr)); gap:18px; }
.b2g-card { background:var(--bg-2); border:1px solid var(--line); border-radius:16px; overflow:hidden; transition:.25s; }
.b2g-card:hover { transform:translateY(-5px); border-color:rgba(201,162,39,.45); }
.b2g-card .bc-img { height:150px; background-size:cover; background-position:center; }
.b2g-card .bc-body { padding:20px 22px 24px; }
.b2g-card h3 { font-family:var(--serif); font-size:1.08rem; margin-bottom:8px; color:var(--gold-2); }
.b2g-card p { font-size:.86rem; color:var(--txt-2); }

/* ---------- 푸터 ---------- */
.footer { border-top:1px solid var(--line); margin-top:60px; padding:46px 6vw 80px; background:#0a0908; }
.footer-grid { max-width:1280px; margin:0 auto; display:grid; grid-template-columns:1.4fr 1fr 1fr; gap:36px; }
.footer h5 { font-family:var(--serif); color:var(--gold-2); margin-bottom:12px; font-size:.95rem; }
.footer p, .footer li { font-size:.78rem; color:var(--txt-3); line-height:1.9; list-style:none; }
.footer a:hover { color:var(--gold-2); }
.footer-legal { max-width:1280px; margin:30px auto 0; padding-top:18px; border-top:1px solid rgba(255,255,255,.06); font-size:.72rem; color:#6b6458; line-height:1.9; }

/* ---------- 법률/문서 페이지 ---------- */
.doc-page { max-width:840px; margin:0 auto; padding:120px 6vw 80px; }
.doc-page h1 { font-family:var(--serif); font-size:1.9rem; margin-bottom:8px; color:var(--gold-2); }
.doc-page h2 { font-family:var(--serif); font-size:1.2rem; margin:34px 0 12px; color:var(--gold-2); }
.doc-page p, .doc-page li { font-size:.92rem; color:#cfc7b8; margin-bottom:10px; }
.doc-page ul, .doc-page ol { margin-left:22px; }
.doc-page table { width:100%; border-collapse:collapse; margin:14px 0; font-size:.85rem; }
.doc-page th, .doc-page td { border:1px solid var(--line); padding:10px 12px; text-align:left; color:#cfc7b8; }
.doc-page th { background:var(--panel); color:var(--gold-2); }
.doc-meta { font-size:.78rem; color:var(--txt-3); margin-bottom:30px; }

/* XP 토스트 */
#toast {
  position:fixed; bottom:26px; left:50%; transform:translate(-50%, 80px); z-index:4000;
  background:var(--gold); color:#181307; font-weight:800; padding:13px 26px; border-radius:999px;
  box-shadow:0 10px 36px rgba(0,0,0,.5); opacity:0; transition:.35s; font-size:.92rem; pointer-events:none;
}
#toast.show { transform:translate(-50%,0); opacity:1; }

/* 반응형 */
@media (max-width: 760px) {
  .topbar { padding:10px 12px; gap:8px; }
  .brand span { display:none; }
  .nav button, .nav a { padding:7px 10px; font-size:.78rem; }
  .hero { min-height:64vh; }
  .hero-inner { padding:100px 6vw 50px; }
  .m-hero { height:230px; }
  .m-body, .m-actions { padding-left:18px; padding-right:18px; }
  .footer-grid { grid-template-columns:1fr; }
  #map { height:54vh; }
}

/* ---------- 광고 슬롯 ---------- */
.ad-slot { position:relative; }
.ad-label { font-size:.6rem; letter-spacing:.2em; color:var(--txt-3); margin-bottom:6px; text-transform:uppercase; }
.ad-banner {
  display:flex; align-items:center; gap:18px; border-radius:var(--rad); overflow:hidden;
  background:var(--bg-2); border:1px solid var(--line); transition:.2s; min-height:96px;
}
.ad-banner:hover { border-color:rgba(201,162,39,.5); transform:translateY(-2px); }
.ad-banner-img { flex:0 0 180px; align-self:stretch; background-size:cover; background-position:center; }
.ad-banner-body { flex:1; padding:14px 6px 14px 0; }
.ad-banner-body b { font-family:var(--serif); font-size:1.05rem; color:var(--gold-2); display:block; margin:4px 0 4px; }
.ad-banner-body p { font-size:.82rem; color:var(--txt-2); }
.ad-tag { font-size:.64rem; padding:3px 9px; border-radius:999px; background:rgba(201,162,39,.15); border:1px solid rgba(201,162,39,.4); color:var(--gold-2); }
.ad-cta { flex:0 0 auto; margin-right:20px; padding:9px 16px; border-radius:999px; background:var(--gold); color:#181307; font-weight:800; font-size:.82rem; white-space:nowrap; }
.ad-card .rc-body p { -webkit-line-clamp:3; }
@media (max-width:680px){ .ad-banner { flex-direction:column; align-items:stretch; gap:0; } .ad-banner-img { height:110px; flex-basis:auto; } .ad-banner-body { padding:12px 16px 0; } .ad-cta { margin:12px 16px 16px; text-align:center; } }

/* 음성 재생 상태 */
.js-speak.on { background:var(--accent) !important; color:#fff !important; border-color:transparent !important; animation:speakPulse 1.2s ease-in-out infinite; }
@keyframes speakPulse { 0%,100%{opacity:1} 50%{opacity:.65} }

/* 만화 모바일 2열 */
@media (max-width:680px){ .comic-grid { grid-template-columns:1fr 1fr; } .comic-bubble{ font-size:.8rem; } }

/* ======================= 프리미엄 / 결제 ======================= */
.pm-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:18px; margin-top:26px; }
.pm-card { position:relative; background:var(--panel); border:1px solid var(--line); border-radius:16px; padding:26px 22px; display:flex; flex-direction:column; }
.pm-card.best { border-color:var(--gold); box-shadow:0 0 0 1px var(--gold) inset, var(--shadow); }
.pm-badge { display:inline-block; align-self:flex-start; font-size:.72rem; font-weight:700; letter-spacing:.04em; color:var(--gold-2); background:rgba(201,162,39,.12); border:1px solid rgba(201,162,39,.3); padding:4px 12px; border-radius:999px; }
.pm-card h3 { font-family:var(--serif); font-size:1.25rem; margin:14px 0 4px; color:var(--txt); }
.pm-price { font-size:1.45rem; font-weight:800; color:var(--gold-2); margin-bottom:14px; }
.pm-card ul { list-style:none; padding:0; margin:0 0 22px; flex:1; }
.pm-card li { position:relative; padding:7px 0 7px 24px; font-size:.9rem; color:var(--txt-2); border-bottom:1px dashed var(--line); }
.pm-card li:before { content:"✓"; position:absolute; left:0; color:var(--gold); font-weight:800; }
.pm-card .btn { width:100%; justify-content:center; }
.pm-foot { margin-top:18px; font-size:.78rem; color:var(--txt-3); text-align:center; }
@media (max-width:880px){ .pm-grid { grid-template-columns:1fr; } }

/* 결제 모달 */
.pay-back .pay-modal { background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:30px 28px; max-width:520px; width:92%; max-height:90vh; overflow:auto; position:relative; }
.pay-modal h3 { font-family:var(--serif); font-size:1.3rem; color:var(--txt); margin-bottom:6px; }
.pay-modal .doc-meta { color:var(--txt-2); font-size:.85rem; margin-bottom:16px; }
.pay-legal { font-size:.74rem; color:var(--txt-3); margin-top:12px; text-align:center; }
.pay-legal a { color:var(--gold-2); }

/* 워크북 잠금 안내(게이트) */
.pm-gate { background:var(--bg-2); border:1px solid var(--line); border-radius:18px; padding:32px 28px; max-width:480px; width:92%; text-align:center; }
.pm-gate-ic { font-size:2.6rem; }
.pm-gate h3 { font-family:var(--serif); font-size:1.3rem; color:var(--txt); margin:8px 0; }
.pm-gate p { color:var(--txt-2); font-size:.9rem; line-height:1.7; }
.pm-gate-note { font-size:.82rem !important; color:var(--txt-3) !important; margin-top:10px; }
.pm-gate-btns { display:flex; flex-direction:column; gap:10px; margin-top:20px; }
.pm-gate-btns .btn { width:100%; justify-content:center; }

/* 프리미엄 활성 표시(선택) */
body.is-premium .ad-slot, body.is-premium .ad-card, body.is-premium .ad-banner { display:none !important; }

/* ======================= UX 보조 (도움말·맨위로·힌트) ======================= */
.to-top, .help-fab { position:fixed; z-index:9000; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-2); color:var(--gold-2); font-size:1.35rem; font-weight:800;
  box-shadow:var(--shadow); cursor:pointer; transition:.22s; display:flex; align-items:center; justify-content:center; }
.to-top { right:18px; bottom:80px; opacity:0; pointer-events:none; }
.to-top.show { opacity:1; pointer-events:auto; }
.help-fab { right:18px; bottom:22px; }
.help-fab:hover, .to-top:hover { border-color:var(--gold); transform:translateY(-2px); }
.help-panel { position:fixed; right:18px; bottom:82px; z-index:9001; width:min(330px,92vw);
  background:var(--bg-2); border:1px solid var(--line); border-radius:16px; padding:20px 22px; box-shadow:var(--shadow);
  opacity:0; transform:translateY(12px) scale(.98); pointer-events:none; transition:.2s; }
.help-panel.show { opacity:1; transform:none; pointer-events:auto; }
.help-panel h4 { font-family:var(--serif); color:var(--gold-2); font-size:1.08rem; margin-bottom:10px; }
.help-panel ol { padding-left:18px; margin:0; }
.help-panel li { font-size:.86rem; color:var(--txt-2); margin:8px 0; line-height:1.55; }
.help-panel .help-close { width:100%; justify-content:center; margin-top:14px; }
.first-hint { position:fixed; left:50%; bottom:86px; z-index:9000; transform:translate(-50%,12px);
  background:var(--gold); color:#181307; font-weight:700; font-size:.9rem; padding:11px 20px; border-radius:999px;
  box-shadow:var(--shadow); opacity:0; transition:.4s; max-width:90vw; text-align:center; }
.first-hint.show { opacity:1; transform:translate(-50%,0); }

/* ======================= 가독성 ======================= */
:focus-visible { outline:2px solid var(--gold-2); outline-offset:2px; border-radius:4px; }

/* Egg Money — 비현금성 학습 포인트 */
.egg-section { background:var(--bg-2); }
.egg-head { display:grid; grid-template-columns:1fr auto; gap:32px; align-items:center; margin-bottom:30px; }
.egg-wallet { min-width:170px; min-height:150px; display:flex; flex-direction:column; align-items:center; justify-content:center; border:1px solid rgba(201,162,39,.55); background:var(--panel); border-radius:16px; }
.egg-wallet span { color:var(--gold-2); font-size:.68rem; letter-spacing:.24em; }
.egg-wallet b { font-family:var(--serif); font-size:3.3rem; line-height:1.1; color:var(--txt); }
.egg-wallet em { color:var(--gold-2); font-style:normal; font-size:.84rem; }
.egg-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.egg-card { min-height:310px; padding:26px 24px; background:var(--panel); border:1px solid var(--line); border-radius:16px; }
.egg-card h3 { font-family:var(--serif); font-size:1.15rem; color:var(--gold-2); margin-bottom:16px; }
.egg-rules,.egg-ledger { list-style:none; padding:0; margin:0; display:grid; gap:8px; }
.egg-rules li,.egg-ledger li { display:flex; justify-content:space-between; align-items:flex-start; gap:14px; padding:10px 0; border-bottom:1px solid var(--line); color:var(--txt-2); }
.egg-rules b,.egg-ledger .plus { color:var(--gold-2); white-space:nowrap; }
.egg-ledger .minus { color:#e3a28b; white-space:nowrap; }
.egg-ledger .empty { color:var(--txt-3); line-height:1.7; }
.egg-note { margin-top:16px; color:var(--txt-3); font-size:.78rem; }
.egg-use { border-color:rgba(201,162,39,.52); }
.egg-badge { display:inline-block; padding:4px 10px; margin-bottom:12px; border:1px solid rgba(201,162,39,.4); border-radius:999px; color:var(--gold-2); font-size:.7rem; }
.egg-use > p { color:var(--txt-2); font-size:.9rem; }
.egg-use .btn { width:100%; justify-content:center; margin-top:20px; }
.egg-use .btn:disabled { background:#4d4941; color:#aaa297; cursor:not-allowed; transform:none; }
.egg-mission { margin-top:18px; padding:14px 16px; background:rgba(201,162,39,.07); border-left:3px solid var(--gold); color:var(--txt-2); font-size:.84rem; }
.egg-mission li { margin:7px 0; }
.egg-status { min-height:1.5em; margin-top:10px; color:var(--gold-2)!important; font-size:.8rem!important; }

/* 무료 → Egg → 전체판·구독 전환 */
.subscribe-section { display:grid; grid-template-columns:minmax(0,1.15fr) minmax(330px,.85fr); gap:44px; align-items:center; background:linear-gradient(135deg,rgba(201,162,39,.1),rgba(20,24,30,.96)); border-top:1px solid rgba(201,162,39,.22); border-bottom:1px solid rgba(201,162,39,.22); }
.subscribe-actions { display:flex; flex-wrap:wrap; gap:10px; margin-top:24px; }
.subscribe-path { display:grid; gap:10px; }
.subscribe-path > div { display:grid; grid-template-columns:38px 1fr; column-gap:12px; padding:16px; border:1px solid var(--line); border-radius:12px; background:rgba(10,13,17,.62); }
.subscribe-path span { grid-row:1 / 3; width:34px; height:34px; display:grid; place-items:center; border:1px solid rgba(201,162,39,.55); border-radius:50%; color:var(--gold-2); font-family:var(--serif); font-weight:800; }
.subscribe-path b { color:var(--txt); }
.subscribe-path small { color:var(--txt-3); margin-top:3px; }

@media (max-width:900px) {
  .egg-grid { grid-template-columns:1fr; }
  .egg-card { min-height:auto; }
  .subscribe-section { grid-template-columns:1fr; gap:28px; }
}
@media (max-width:600px) {
  .egg-head { grid-template-columns:1fr; }
  .egg-wallet { width:100%; min-height:125px; }
}
.btn { min-height:44px; }            /* 터치 타깃 확보 */
.region-card, .stamp, .gq-opt, .dna-opt, .quiz-opt { -webkit-tap-highlight-color:transparent; }
@media (min-width:1500px){ body { font-size:17px; } .wrap, .section { } }

/* ======================= 반응형: 태블릿(≤1024px) ======================= */
@media (max-width:1024px){
  .nav a:not(.cta), .nav button { font-size:.82rem; padding:8px 10px; }
  #map { height:54vh; min-height:340px; }
  .hero h1 { font-size:2.2rem; }
}
/* ======================= 반응형: 모바일(≤600px) ======================= */
@media (max-width:600px){
  .topbar { min-height:62px; }
  .nav { display:none; }
  .mobile-nav { display:block; }
  .mobile-nav-menu { position:fixed; top:62px; right:12px; left:auto; }
  .auth-status { min-width:0; }
  .auth-chip { max-width:112px; overflow:hidden; text-overflow:ellipsis; }
  .xp-badge { display:none; }
  .nav::-webkit-scrollbar { display:none; }
  .nav button, .nav a { white-space:nowrap; flex:0 0 auto; padding:9px 11px; }
  .hero h1 { font-size:1.7rem; line-height:1.3; }
  .hero p { font-size:.92rem; }
  .hero-actions { flex-direction:column; }
  .hero-actions .btn { width:100%; justify-content:center; }
  #map { height:46vh; min-height:300px; }
  .m-actions { flex-wrap:wrap; }
  .m-actions .btn { flex:1 1 46%; justify-content:center; font-size:.82rem; }
  .modal { border-radius:14px 14px 0 0; max-height:94vh; }
  .help-panel { right:10px; left:10px; width:auto; }
  .to-top { bottom:78px; }
}

/* ======================= 주변 관광지(TourAPI) ======================= */
.tour-grid { display:grid; grid-template-columns:repeat(auto-fill,minmax(150px,1fr)); gap:12px; }
.tour-card { display:block; border-radius:12px; overflow:hidden; background:var(--bg-2); border:1px solid var(--line); text-decoration:none; transition:.18s; }
.tour-card:hover { transform:translateY(-3px); border-color:rgba(201,162,39,.5); }
.tour-img { height:96px; background-size:cover; background-position:center; }
.tour-tx { padding:9px 11px; }
.tour-tx b { display:block; font-size:.85rem; color:var(--txt); line-height:1.35; }
.tour-tx span { display:block; font-size:.72rem; color:var(--txt-3); margin-top:3px; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }

/* ======================= 방명록(UGC) ======================= */
.gb-list { display:flex; flex-direction:column; gap:10px; margin-bottom:18px; }
.gb-item { background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:12px 14px; }
.gb-head { display:flex; justify-content:space-between; align-items:baseline; margin-bottom:4px; }
.gb-head b { color:var(--gold-2); font-size:.9rem; }
.gb-head span { color:var(--txt-3); font-size:.72rem; }
.gb-item p { color:var(--txt-2); font-size:.9rem; line-height:1.6; white-space:pre-wrap; word-break:break-word; }
.gb-loading, .gb-empty { color:var(--txt-3); font-size:.86rem; padding:8px 2px; }
.gb-form { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:16px; }
.gb-hp { position:absolute; left:-9999px; width:1px; height:1px; opacity:0; }
.gb-row { display:flex; justify-content:space-between; align-items:center; gap:10px; }
.gb-nick { flex:1; background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--txt); padding:9px 12px; font-size:.86rem; }
.gb-count { color:var(--txt-3); font-size:.72rem; white-space:nowrap; }
.gb-msg { width:100%; margin-top:10px; min-height:76px; resize:vertical; background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--txt); padding:11px 12px; font-size:.9rem; font-family:inherit; line-height:1.6; }
.gb-nick:focus, .gb-msg:focus { outline:none; border-color:var(--gold); }
.cf-turnstile { margin-top:10px; }
.gb-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:12px; flex-wrap:wrap; }
.gb-note { color:var(--txt-3); font-size:.74rem; }
.gb-actions .btn { min-height:40px; padding:9px 22px; }
.gb-result { margin-top:10px; font-size:.84rem; }
.gb-result.ok { color:#7dd59a; }
.gb-result.no { color:#e88; }
@media (max-width:600px){ .tour-grid { grid-template-columns:repeat(auto-fill,minmax(120px,1fr)); } }

/* ---------- 기관·지자체 상담 신청 폼 (partner.html, lead-) ---------- */
.lead-form { background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:20px 22px; max-width:640px; margin:0 auto; text-align:left; }
.lead-grid { display:grid; grid-template-columns:1fr 1fr; gap:12px 14px; }
.lead-field label { display:block; font-size:.78rem; color:var(--txt-3); margin-bottom:5px; }
.lead-input { width:100%; background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--txt); padding:10px 12px; font-size:.88rem; font-family:inherit; }
.lead-input:focus { outline:none; border-color:var(--gold); }
.lead-msg { width:100%; margin-top:12px; min-height:90px; resize:vertical; background:var(--bg); border:1px solid var(--line); border-radius:9px; color:var(--txt); padding:11px 12px; font-size:.9rem; font-family:inherit; line-height:1.6; }
.lead-msg:focus { outline:none; border-color:var(--gold); }
.lead-actions { display:flex; justify-content:space-between; align-items:center; gap:12px; margin-top:14px; flex-wrap:wrap; }
.lead-note { color:var(--txt-3); font-size:.74rem; }
.lead-actions .btn { min-height:40px; padding:9px 22px; }
.lead-result { margin-top:10px; font-size:.84rem; min-height:1.2em; }
.lead-result.ok { color:#7dd59a; }
.lead-result.no { color:#e88; }
.lead-alt { margin-top:10px; font-size:.78rem; color:var(--txt-3); text-align:center; }
.lead-alt a { color:var(--gold-2); }
@media (max-width:600px){ .lead-grid { grid-template-columns:1fr; } }

/* ======================= 하이브리드: PC 화면 보기 토글 ======================= */
.view-toggle { position:fixed; left:18px; bottom:22px; z-index:9002; display:none; align-items:center; gap:6px;
  background:var(--bg-2); border:1px solid var(--gold); color:var(--gold-2); font-weight:700; font-size:.82rem;
  padding:11px 16px; border-radius:999px; box-shadow:var(--shadow); cursor:pointer; min-height:44px; }
.view-toggle:hover { background:var(--panel); }
@media (max-width:1024px){ .view-toggle { display:inline-flex; } }   /* 모바일·패드에서 노출 */
html.view-pc .view-toggle { display:inline-flex; }                  /* PC모드 전환 후 되돌리기 버튼 유지 */
/* PC모드(데스크톱 폭 강제)일 때는 단순화 미디어쿼리가 안 먹도록 — viewport 폭이 1280이라 자동 적용됨 */

/* ======================= 모바일/패드 단순화(하이브리드) ======================= */
/* 데스크톱(>1024px)은 기존 디자인 그대로 유지. 아래는 좁은 화면 전용. */
@media (max-width:1024px){
  /* 한 손에 잡히는 단순한 흐름: 큰 터치 타깃·여백 정리 */
  .section { padding-top:30px; padding-bottom:30px; }
  .sec-kicker { font-size:.66rem; }
  .sec-title { font-size:1.5rem; }
  .sec-desc { font-size:.92rem; }
  .region-grid { grid-template-columns:repeat(auto-fill,minmax(160px,1fr)); gap:12px; }
  .m-actions .btn { font-size:.84rem; }
}
@media (max-width:600px){
  /* 더 단순하게: 핵심(지도→스토리)에 집중 */
  .hero-inner { padding:92px 6vw 44px; }
  .hero h1 { font-size:1.65rem; line-height:1.32; }
  .hero p { font-size:.9rem; -webkit-line-clamp:3; }
  .hero-kicker { font-size:.62rem; letter-spacing:.18em; }
  .region-grid { grid-template-columns:1fr 1fr; gap:10px; }
  .region-card { height:150px; }
  .rc-body h3 { font-size:1rem; }
  .rc-body p { font-size:.74rem; }
  .sec-title { font-size:1.35rem; }
  .section { padding:26px 5vw; }
  /* 모달: 풀스크린에 가깝게, 읽기 집중 */
  .modal { border-radius:14px 14px 0 0; }
  .m-sub h4 { font-size:.96rem; }
  .era-story { font-size:.95rem; }
  /* 보조 FAB 위치 겹침 방지 (PC보기 토글 ↔ 도움말) */
  .view-toggle { bottom:80px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior:auto; }
  *, *::before, *::after {
    animation-duration:.01ms !important;
    animation-iteration-count:1 !important;
    scroll-behavior:auto !important;
    transition-duration:.01ms !important;
  }
  .cinema-img { animation:none !important; }
}

/* ---------- 회원 로그인(선택 기능) — 내 여행기록 저장 ---------- */
.auth-chip {
  padding:8px 16px; border-radius:999px; font-size:.82rem; font-weight:600;
  border:1px solid var(--line); color:var(--txt-2); background:transparent; transition:.2s;
  display:flex; align-items:center; gap:6px; white-space:nowrap;
}
.auth-chip:hover { border-color:var(--gold); color:var(--txt); }
.auth-chip-on { background:rgba(201,162,39,.12); border-color:rgba(201,162,39,.4); color:var(--gold-2); }
.auth-dot { width:7px; height:7px; border-radius:50%; background:#5da06f; display:inline-block; }
.auth-gate { max-width:420px; }
.auth-form { display:flex; flex-direction:column; gap:10px; margin-top:18px; }
.auth-input {
  padding:12px 14px; border-radius:10px; border:1px solid var(--line); background:var(--panel);
  color:var(--txt); font-size:.92rem;
}
.auth-input:focus { outline:none; border-color:var(--gold); }
.auth-kakao { width:100%; margin-top:10px; background:#FEE500; border-color:transparent; color:#181307; font-weight:700; }
.auth-kakao:hover { background:#f5d900; color:#181307; }
.auth-switch { font-size:.82rem; color:var(--txt-3); margin-top:14px; }
.auth-switch a { color:var(--gold-2); }
.auth-notice { font-size:.84rem !important; color:#f0c9c2 !important; background:rgba(160,55,45,.14); padding:9px 12px; border-radius:8px; margin-top:6px !important; }
.auth-gate .btn-ghost { width:100%; margin-top:10px; }
@media (max-width:480px) {
  .auth-chip { padding:7px 12px; font-size:.76rem; }
}

/* ── 패밀리 서비스 크로스 네비게이션 (fam-) ── */
.fam-section { padding-top:0; }
.fam-grid { display:flex; gap:16px; }
.fam-card {
  flex:1; display:flex; flex-direction:column; gap:8px;
  padding:20px 22px; border:1px solid var(--line); border-radius:var(--rad);
  background:var(--panel); text-decoration:none;
  transition:border-color .2s, transform .2s;
}
.fam-card:hover { border-color:rgba(201,162,39,.45); transform:translateY(-2px); }
.fam-name { font-family:var(--serif); font-size:1.05rem; font-weight:800; color:var(--txt); }
.fam-desc { font-size:.86rem; color:var(--txt-2); }
.fam-go { font-size:.78rem; color:var(--gold-2); margin-top:2px; }
@media (max-width:640px) {
  .fam-grid { flex-direction:column; }
}

/* ======================= 시대별 색상·아이콘 (사용자 피드백 반영) ======================= */
/* 팔레트 — 다크+골드 테마와 조화, 어두운 배경 위 대비(AA 근사).
   색상만으로 구분하지 않음: 기존 텍스트 라벨 유지 + 아이콘 병행.
   data-era는 필터 버튼(index.html 정적) / 시대 탭·시대 표기(js/ui-prefs.js가 부여). */
[data-era="선사"] { --era-c:#c08b52; --era-line:rgba(192,139,82,.55);  --era-bg:rgba(192,139,82,.12);  --era-ic:"🪨"; }  /* 흙갈색 */
[data-era="가야"] { --era-c:#45b8ae; --era-line:rgba(69,184,174,.55);  --era-bg:rgba(69,184,174,.12);  --era-ic:"⚒️"; } /* 청동·철 teal */
[data-era="삼국"] { --era-c:#58b37c; --era-line:rgba(88,179,124,.55);  --era-bg:rgba(88,179,124,.12);  --era-ic:"⚔️"; } /* 녹청 */
[data-era="신라"] { --era-c:#e6c35c; --era-line:rgba(230,195,92,.55);  --era-bg:rgba(230,195,92,.12);  --era-ic:"👑"; } /* 금관 금색 */
[data-era="고려"] { --era-c:#7fc4b4; --era-line:rgba(127,196,180,.55); --era-bg:rgba(127,196,180,.12); --era-ic:"🏺"; } /* 청자 비색 */
[data-era="조선"] { --era-c:#7aa5e0; --era-line:rgba(122,165,224,.55); --era-bg:rgba(122,165,224,.12); --era-ic:"📜"; } /* 쪽빛 */
[data-era="근대"] { --era-c:#d0765a; --era-line:rgba(208,118,90,.55);  --era-bg:rgba(208,118,90,.12);  --era-ic:"🚂"; } /* 적갈 */
[data-era="현대"] { --era-c:#9fb2c4; --era-line:rgba(159,178,196,.55); --era-bg:rgba(159,178,196,.12); --era-ic:"🏙️"; } /* 회청 */
[data-era="전체"] { --era-ic:"⏳"; } /* 아이콘만, 색상은 기존 유지 */

/* 아이콘 — 유니코드 이모지, 시대당 1개 (외부 이미지 없음) */
.era-filter button[data-era]::before,
.era-tab[data-era]::before,
.era-period[data-era]::before { content:var(--era-ic, ""); margin-right:5px; font-size:.92em; }

/* 시대 필터(지도 하단) — 평상시: 시대색 테두리+은은한 배경, 텍스트는 기존 색 유지 */
.era-filter button[data-era]:not([data-era="전체"]) { box-shadow:inset 0 0 0 1px var(--era-line); background:var(--era-bg); }
.era-filter button.on[data-era]:not([data-era="전체"]) { background:var(--era-c); color:#181307; font-weight:700; box-shadow:none; }

/* 시대 탭(스토리 모달) — 세계 시대 등 매핑 밖 시대는 기존 스타일 그대로 */
.era-tab[data-era] { border-color:var(--era-line); background:var(--era-bg); }
.era-tab.on[data-era] { background:var(--era-c); border-color:transparent; color:#181307; font-weight:700; }

/* 시대 표기(패널 상단 '시대 · 연대') */
.era-period[data-era] { color:var(--era-c); }

/* ======================= 폰트 크기 3단 토글 (가A) ======================= */
/* html 루트 font-size 배율 — rem 기반 텍스트 전체에 적용, 레이아웃은 px/vh라 안전 */
html.fs-90 { font-size:90%; }
html.fs-115 { font-size:115%; }
@media (min-width:1500px){ /* 기존 body{font-size:17px} 규칙도 배율 연동 */
  html.fs-90 body { font-size:15.3px; }
  html.fs-115 body { font-size:19.5px; }
}

.font-fab { position:fixed; right:18px; bottom:138px; z-index:9000; width:48px; height:48px; border-radius:50%;
  border:1px solid var(--line); background:var(--bg-2); color:var(--gold-2); font-size:.86rem; font-weight:800;
  box-shadow:var(--shadow); cursor:pointer; transition:.22s; display:flex; align-items:center; justify-content:center; }
.font-fab:hover { border-color:var(--gold); transform:translateY(-2px); }
.font-panel { position:fixed; right:18px; bottom:196px; z-index:9001; display:none; gap:8px;
  background:var(--bg-2); border:1px solid var(--line); border-radius:14px; padding:10px; box-shadow:var(--shadow); }
.font-panel.show { display:flex; }
.font-opt { display:flex; flex-direction:column; align-items:center; gap:3px; min-width:62px;
  padding:9px 10px; border-radius:10px; border:1px solid var(--line); color:var(--txt-2); font-size:.74rem; transition:.15s; }
.font-opt:hover { border-color:var(--gold); color:var(--txt); }
.font-opt.on { background:var(--gold); color:#181307; border-color:transparent; font-weight:700; }
.font-opt .fo-sample { font-weight:800; line-height:1; }
.font-opt-0 .fo-sample { font-size:.82rem; }
.font-opt-1 .fo-sample { font-size:1rem; }
.font-opt-2 .fo-sample { font-size:1.2rem; }
@media (max-width:600px){ .font-fab { bottom:134px; } .font-panel { bottom:192px; } }

/* ======================= 상단 메뉴 "더보기" 드롭다운 (2026-07-11 UI 간소화) ======================= */
.nav-more { position:relative; }
.nav-more summary {
  list-style:none; cursor:pointer; padding:8px 14px; border-radius:999px; font-size:.86rem;
  color:var(--txt-2); border:1px solid transparent; transition:.2s;
}
.nav-more summary::-webkit-details-marker { display:none; }
.nav-more summary::after { content:" ▾"; font-size:.7em; }
.nav-more summary:hover { color:var(--txt); border-color:var(--line); }
.nav-more[open] summary { color:var(--txt); border-color:var(--line); }
.nav-more-menu {
  position:absolute; top:calc(100% + 6px); right:0; min-width:168px; z-index:1300;
  background:var(--bg-2); border:1px solid var(--line); border-radius:12px; padding:6px;
  box-shadow:var(--shadow); display:flex; flex-direction:column; gap:2px;
}
.nav-more-menu a, .nav-more-menu button {
  padding:9px 12px; border-radius:8px; font-size:.86rem; color:var(--txt-2);
  background:none; border:none; text-align:left; width:100%; display:block;
  font-family:inherit; cursor:pointer;
}
.nav-more-menu a:hover, .nav-more-menu button:hover { background:rgba(255,255,255,.06); color:var(--txt); }
.nav-more-menu .active { color:#181307; background:var(--gold); font-weight:700; }
@media (max-width:860px){
  .nav-more-menu { right:auto; left:0; }
}

/* ======================= 이용방법 섹션 (2026-07-11) ======================= */
.howto { padding-top:44px; padding-bottom:44px; }
.howto-grid { display:grid; grid-template-columns:repeat(4,1fr); gap:16px; margin-top:8px; }
.howto-step {
  background:var(--panel); border:1px solid var(--line); border-radius:var(--rad);
  padding:22px 18px; text-align:center;
}
.howto-num {
  display:inline-flex; align-items:center; justify-content:center;
  width:34px; height:34px; border-radius:50%; background:var(--gold); color:#181307;
  font-weight:800; font-family:var(--serif); margin-bottom:12px;
}
.howto-step h3 { font-size:1rem; margin-bottom:6px; color:var(--txt); }
.howto-step p { font-size:.84rem; color:var(--txt-2); line-height:1.6; }
@media (max-width:860px){ .howto-grid { grid-template-columns:1fr 1fr; } }
@media (max-width:520px){ .howto-grid { grid-template-columns:1fr; } .howto-step { display:flex; align-items:center; gap:14px; text-align:left; padding:16px; } .howto-num { margin-bottom:0; flex:0 0 auto; } }

/* ======================= 품질 고도화 압축 태그 (2026-07-11, quality-grid 대체) ======================= */
.quality-tags { display:flex; flex-wrap:wrap; gap:10px; margin-top:18px; }
.quality-tags span {
  padding:8px 16px; border-radius:999px; border:1px solid var(--line); background:var(--panel);
  font-size:.84rem; color:var(--txt-2);
}

/* ======================= 체험·기록 통합 탭 (2026-07-11, 오늘의여행/타임퀘스트/DNA/스탬프 통합) ======================= */
.sec-tabs { display:flex; gap:8px; flex-wrap:wrap; margin-bottom:12px; }
.sec-tab {
  padding:9px 18px; border-radius:999px; border:1px solid var(--line); color:var(--txt-2);
  font-size:.88rem; transition:.2s; background:var(--panel);
}
.sec-tab:hover { color:var(--txt); border-color:var(--gold); }
.sec-tab.on { background:var(--gold); color:#181307; font-weight:700; border-color:transparent; }
.sec-tab-desc { color:var(--txt-2); font-size:.9rem; margin-bottom:28px; }
.sec-panel { display:none; }
.sec-panel.on { display:block; }
@media (max-width:600px){ .sec-tabs { gap:6px; } .sec-tab { padding:8px 14px; font-size:.82rem; } }

/* ======================= 모바일 반응형 보정 (2026-07-22 UX 감사, 추가 전용) ======================= */
/* 동적 뷰포트 단위(dvh) 지원 브라우저에서만 모바일 지도/모달 높이를 보정 —
   주소창 표시/숨김에 따른 100vh 흔들림으로 지도·모달 하단이 가려지거나 빈 여백이 생기는 문제 완화.
   미지원 브라우저는 이 블록이 무시되고 기존 vh 값이 그대로 유지됨(안전한 점진적 향상). */
@supports (height: 100dvh) {
  .modal { max-height: 94dvh; }
  @media (max-width:1024px){ #map { height:54dvh; } }
  @media (max-width:600px){ #map { height:46dvh; } }
}

/* 지도 상단·하단 컨트롤 및 탭류의 터치 타깃 확대 (모바일 전용).
   기존 .btn{min-height:44px} 터치 타깃 확보 방침과 동일한 취지로,
   시대 필터처럼 버튼 수가 많아 44px 전면 적용 시 줄바꿈이 늘어나는 요소는
   지도 표시 영역을 침범하지 않도록 완만하게만 키움. */
@media (max-width:600px){
  .era-filter button { min-height:34px; display:inline-flex; align-items:center; justify-content:center; }
  .map-toolbar button { min-height:38px; display:inline-flex; align-items:center; justify-content:center; }
  .era-tab, .sec-tab { min-height:40px; display:inline-flex; align-items:center; justify-content:center; }
  .nav-more-menu a, .nav-more-menu button { min-height:40px; display:flex; align-items:center; }
}

/* ======================= 법적 고지 배너 · 가입 연령확인 (js/legal-consent.js, 추가 전용) ======================= */
.legal-banner {
  position:fixed; left:0; right:0; bottom:0; z-index:5000;
  background:var(--bg-2); border-top:1px solid var(--line);
  padding:16px 20px; box-shadow:0 -10px 30px rgba(0,0,0,.35);
  transform:translateY(120%); transition:transform .3s ease;
}
.legal-banner.show { transform:translateY(0); }
.legal-banner-in { max-width:980px; margin:0 auto; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.legal-banner-text { flex:1; min-width:220px; font-size:.82rem; color:var(--txt-2); line-height:1.6; margin:0; }
.legal-banner-text a { color:var(--gold-2); text-decoration:underline; }
.legal-banner-btns { display:flex; gap:8px; flex-shrink:0; }
.legal-banner-btns .btn { padding:9px 18px; font-size:.84rem; }
@media (max-width:600px) {
  .legal-banner { padding:14px 14px 16px; }
  .legal-banner-in { flex-direction:column; align-items:stretch; }
  .legal-banner-btns { width:100%; }
  .legal-banner-btns .btn { flex:1; justify-content:center; }
}

.lc-age-check { display:flex; align-items:flex-start; gap:8px; font-size:.82rem; color:var(--txt-2); line-height:1.5; cursor:pointer; margin-top:2px; }
.lc-age-check input { margin-top:3px; flex-shrink:0; }
.lc-age-check .lc-req { color:var(--gold-2); font-size:.74rem; }
.lc-age-msg { display:none; font-size:.78rem; color:#f0c9c2; background:rgba(160,55,45,.14); padding:7px 10px; border-radius:8px; margin-top:4px; }
.lc-age-msg.show { display:block; }

/* ======================= 2026-07-24 디자인 업그레이드 (추가 전용 — 기존 규칙 무변경) =======================
   1) 글래스모피즘: 반투명 오버레이 패널에 블러 레이어
   2) 벤토형 비대칭 지역 카드 그리드
   3) 스크롤 리빌 애니메이션 (js/scroll-reveal.js)
   4) 타입 스케일 토큰 (--fs-*)
   ======================================================================================= */

/* --- 1) 글래스모피즘: 기존 rgba() 반투명 배경은 그대로 두고 블러만 레이어 --- */
.modal,
.map-toolbar,
.era-filter,
.nav-more-menu {
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
}

/* --- 2) 벤토형 비대칭 그리드: 첫 카드를 2x2로 강조 (js/app.js가 .featured 부여) --- */
.region-card.featured {
  grid-column: span 2;
  grid-row: span 2;
}
.region-card.featured .rc-body h3 { font-size: var(--fs-4, 1.6rem); }
.region-card.featured .rc-body p { font-size: var(--fs-2, .88rem); }
@media (max-width:600px) {
  /* 좁은 화면에서는 span을 되돌려 카드가 어색하게 넘치지 않도록 함 */
  .region-card.featured { grid-column: span 1; grid-row: span 1; }
}

/* --- 3) 스크롤 리빌: js/scroll-reveal.js가 IntersectionObserver로 .reveal-in 부여 --- */
.reveal { opacity:0; transform:translateY(16px); transition: opacity .6s ease, transform .6s ease; }
.reveal.reveal-in { opacity:1; transform:none; }

/* --- 4) 타입 스케일 토큰: 기존 파일 전반의 font-size 하드코딩 값 중 반복 빈도가 높은 값을 변수화.
   기존 선언은 건드리지 않으며, 이번에 새로 추가하는 요소(.region-card.featured 등)에 우선 적용.
   추후 점진적으로 기존 font-size 값을 이 토큰으로 치환할 수 있음(강제 아님). --- */
:root {
  --fs-1: .78rem;  /* 캡션·배지·라벨 (.badge, .era-period 등에서 반복) */
  --fs-2: .88rem;  /* 보조 본문 (.rc-body p, .sec-tab 등에서 반복) */
  --fs-3: .95rem;  /* 기본 본문 (.dna-opt, .local-box li 등에서 반복) */
  --fs-4: 1.3rem;  /* 카드/모달 제목 (.rc-body h3, .era-title 등에서 반복) */
  --fs-5: 1.5rem;  /* 섹션 타이틀 하한값 (.sec-title clamp 하한) */
  --fs-6: 2.2rem;  /* 섹션 타이틀 상한값 (.sec-title clamp 상한) */
}

/* 리듀스 모션 사용자를 위한 예외: 위 .reveal 애니메이션이 영구히 숨겨진 채 남지 않도록
   opacity/transform을 즉시 원상태로 되돌림 (기존 prefers-reduced-motion 블록은 무변경, 신규 블록으로 추가) */
@media (prefers-reduced-motion: reduce) {
  .reveal { opacity:1; transform:none; transition:none; }
}