/* SHOW MAKER 웹 — 원본: SHOW MAKER 웹.dc.html (다크/라이트 토큰). 레이아웃은 전체 화면 */
:root {
  /* 안쪽 콘텐츠의 최대 폭. 더 넓게 쓰려면 키우고, 화면 끝까지 쓰려면 100vw 로 */
  --wrap:1280px;
  /* 좌우 여백: 화면이 좁으면 32px, 넓으면 콘텐츠를 가운데로 모으는 만큼 */
  --gutter:max(32px, calc((100% - var(--wrap)) / 2));
  --bg:#0B0B14; --nv:#0D0D17; --cd:#15151F; --bd:rgba(255,255,255,.08); --dv:rgba(255,255,255,.06);
  --tx:#F5F5FA; --sb:#8A8A9C; --ft:#6E6E80; --ac:#8B5CF6; --na:#A78BFA; --at:#C4B0F7;
  --ch:rgba(139,92,246,.16); --sh:none; --ph:#E9E9EF;
}
:root[data-theme="light"] {
  --bg:#FFFFFF; --nv:#FFFFFF; --cd:#F6F6FA; --bd:#ECECF2; --dv:#EFEFF4;
  --tx:#1A1A24; --sb:#77778A; --ft:#A5A5B4; --ac:#7C3AED; --na:#7C3AED; --at:#7C3AED;
  --ch:#F3EEFE; --sh:0 4px 14px rgba(30,20,70,.06);
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]) {
    --bg:#FFFFFF; --nv:#FFFFFF; --cd:#F6F6FA; --bd:#ECECF2; --dv:#EFEFF4;
    --tx:#1A1A24; --sb:#77778A; --ft:#A5A5B4; --ac:#7C3AED; --na:#7C3AED; --at:#7C3AED;
    --ch:#F3EEFE; --sh:0 4px 14px rgba(30,20,70,.06);
  }
}
* { box-sizing:border-box; }
body { margin:0; background:var(--bg); font-family:'Pretendard Variable',Pretendard,-apple-system,'Noto Sans KR',sans-serif; color:var(--tx); }
a { color:inherit; text-decoration:none; }
button { font:inherit; color:inherit; cursor:pointer; }
.page { min-height:100vh; background:var(--bg); display:flex; flex-direction:column; }
main { flex:1; }

/* 네비 */
.nav { display:flex; align-items:center; gap:28px; padding:16px var(--gutter); border-bottom:1px solid var(--bd); background:var(--nv); }
.logo { display:flex; align-items:center; gap:9px; font-size:15px; font-weight:900; letter-spacing:.14em; }
.logo img { width:28px; height:28px; border-radius:8px; }
.logo b { color:var(--na); }
.nav__links { flex:none; display:flex; gap:22px; font-size:14px; }
.nav__links a { white-space:nowrap; font-weight:600; color:var(--sb); }
.nav__links a[aria-current] { font-weight:800; color:var(--tx); }
.nav__right { margin-left:auto; min-width:0; display:flex; align-items:center; gap:12px; }
.search { display:flex; align-items:center; gap:8px; background:var(--cd); border:1px solid var(--bd); border-radius:999px; padding:8px 14px; width:180px; }
.search input { flex:1; min-width:0; background:none; border:0; outline:0; color:var(--tx); font:inherit; font-size:13px; }
.search svg { flex:none; }
.theme { width:34px; height:34px; border-radius:999px; border:1px solid var(--bd); background:var(--cd); display:flex; align-items:center; justify-content:center; }
.btn { white-space:nowrap; display:inline-block; text-align:center; background:var(--ac); color:#fff; font-size:13px; font-weight:800; padding:9px 16px; border-radius:999px; border:0; }
.btn--line { background:none; border:1.5px solid var(--ac); color:var(--na); }

/* 히어로 */
.hero { position:relative; height:clamp(280px, 30vw, 440px); background-size:cover; background-position:center; }
.hero--detail { height:clamp(280px, 28vw, 420px); }
.hero__shade { position:absolute; left:0; right:0; bottom:0; padding:28px var(--gutter); background:linear-gradient(transparent,rgba(8,8,16,.95)); color:#fff; display:flex; align-items:flex-end; gap:24px; }
.hero__body { flex:1; display:flex; flex-direction:column; gap:9px; min-width:0; }
.eyebrow { font-size:11px; font-weight:800; letter-spacing:.18em; color:#A78BFA; }
.hero h1 { margin:0; font-size:34px; font-weight:900; line-height:1.1; letter-spacing:-.02em; }
.hero__meta { display:flex; gap:14px; font-size:14px; color:#D5D5E0; flex-wrap:wrap; }
.hero__meta b { color:#fff; }
.hero__back { position:absolute; top:18px; left:var(--gutter); background:rgba(11,11,20,.55); color:#fff; font-size:13px; font-weight:700; padding:8px 14px; border-radius:999px; }
.tag { align-self:flex-start; font-size:10px; font-weight:800; letter-spacing:.16em; color:#fff; background:rgba(139,92,246,.9); padding:4px 10px; border-radius:6px; }

.section { padding:24px var(--gutter) 32px; display:flex; flex-direction:column; gap:20px; }
.title-row { display:flex; align-items:baseline; gap:12px; }
.title-row h1 { margin:0; font-size:26px; font-weight:900; letter-spacing:-.02em; }
.title-row span { font-size:13.5px; color:var(--sb); }

/* 탭 */
.tabs { display:flex; align-items:center; gap:20px; border-bottom:1px solid var(--bd); overflow-x:auto; }
.tabs a { font-size:14.5px; font-weight:600; color:var(--sb); padding-bottom:10px; white-space:nowrap; border-bottom:2px solid transparent; }
.tabs a[aria-current] { font-weight:800; color:var(--tx); border-color:var(--ac); }
.tabs .locate { margin-left:auto; display:flex; align-items:center; gap:6px; font-size:13px; font-weight:700; color:var(--na); padding-bottom:10px; background:none; border:0; white-space:nowrap; }

/* 카드 그리드 (3열 → 2열 → 1열) */
.grid { display:grid; grid-template-columns:repeat(auto-fill, minmax(240px, 1fr)); gap:20px; }
.card { display:flex; flex-direction:column; gap:8px; min-width:0; }
.card__cover { position:relative; aspect-ratio:16/10; height:auto; border-radius:16px; background-size:cover; background-position:center; }
.card__badge { position:absolute; top:10px; left:10px; font-size:10px; font-weight:800; letter-spacing:.14em; color:#fff; background:rgba(11,11,20,.55); padding:4px 9px; border-radius:6px; }
.card__live { position:absolute; bottom:10px; left:10px; font-size:10px; font-weight:800; color:#fff; background:var(--ac); padding:3px 9px; border-radius:999px; }
.card__title { font-size:16px; font-weight:800; line-height:1.25; letter-spacing:-.01em; overflow-wrap:anywhere; }
.card__date { font-size:12.5px; color:var(--at); font-weight:700; }
.card__sub { font-size:12px; color:var(--sb); }
.empty { padding:48px 0; text-align:center; color:var(--sb); font-size:14px; }

/* 탐색 */
.filters { display:flex; align-items:center; gap:10px; padding:14px var(--gutter); border-bottom:1px solid var(--bd); flex-wrap:wrap; }
.chip { background:var(--cd); border:1px solid var(--bd); color:var(--tx); font-size:13px; font-weight:600; padding:9px 16px; border-radius:999px; }
.chip[aria-current] { background:var(--ac); border-color:var(--ac); color:#fff; font-weight:700; }
.explore { display:grid; grid-template-columns:clamp(300px, 28vw, 400px) 1fr; height:max(560px, calc(100vh - 135px)); }
.list { border-right:1px solid var(--bd); overflow-y:auto; }
.list__count { padding:14px 20px 8px; font-size:12.5px; color:var(--sb); }
.list__count b { color:var(--tx); }
.item { display:flex; gap:12px; align-items:center; padding:12px 20px; border-bottom:1px solid var(--dv); border-left:3px solid transparent; }
.item[aria-current] { background:var(--ch); border-left-color:var(--ac); }
.item__thumb { width:56px; height:56px; flex:none; border-radius:12px; background-size:cover; background-position:center; }
.item__body { flex:1; min-width:0; display:flex; flex-direction:column; gap:3px; }
.item__date { font-size:11px; font-weight:800; color:var(--at); }
.item__date--live { letter-spacing:.1em; color:var(--na); }
.item__title { font-size:14.5px; font-weight:800; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.item__sub { font-size:12px; color:var(--sb); }
.item__sub b { color:var(--at); }
#map { height:100%; width:100%; background:var(--cd); }
:root:not([data-theme="light"]) .leaflet-tile-pane { filter:invert(1) hue-rotate(180deg) brightness(.85) contrast(.9); }
@media (prefers-color-scheme: light) { :root:not([data-theme="dark"]) .leaflet-tile-pane { filter:none; } }
:root[data-theme="light"] .leaflet-tile-pane { filter:none; }

/* 상세 */
.detail { display:grid; grid-template-columns:1fr 320px; gap:40px; padding:28px var(--gutter) 40px; }
.stack { display:flex; flex-direction:column; gap:24px; min-width:0; }
.box { border:1px solid var(--bd); background:var(--cd); border-radius:20px; padding:18px; display:flex; flex-direction:column; gap:14px; box-shadow:var(--sh); }
.box--accent { border:1.5px solid var(--ac); background:var(--ch); box-shadow:none; gap:10px; }
.box h3 { margin:0; font-size:15px; font-weight:800; }
.host { display:flex; align-items:center; gap:12px; background:var(--cd); border:1px solid var(--bd); border-radius:18px; padding:14px 16px; box-shadow:var(--sh); }
.avatar { width:44px; height:44px; flex:none; border-radius:999px; background:linear-gradient(140deg,#7C5CBF,#3A2A66) center/cover; }
.avatar--sm { width:28px; height:28px; }
.host__name { font-size:14.5px; font-weight:800; }
.host__sub { font-size:12px; color:var(--sb); }
h2 { margin:0; font-size:17px; font-weight:800; }
h2 small { font-size:13px; font-weight:600; color:var(--sb); }
.intro { font-size:14px; line-height:1.65; color:var(--sb); white-space:pre-line; margin:0; }
.steps { display:flex; flex-direction:column; }
.step { display:flex; gap:12px; }
.step__rail { display:flex; flex-direction:column; align-items:center; }
.step__dot { width:10px; height:10px; border-radius:999px; background:var(--ac); margin-top:4px; }
.step--todo .step__dot { background:none; border:2px solid var(--ft); }
.step__line { width:2px; flex:1; background:var(--ch); }
.step__row { display:flex; justify-content:space-between; gap:12px; flex:1; padding-bottom:16px; font-size:14px; font-weight:700; }
.step--todo .step__row { color:var(--sb); }
.step:last-child .step__row { padding-bottom:0; }
.step__row span:last-child { font-size:12.5px; font-weight:400; color:var(--sb); white-space:nowrap; }
.reviews { display:grid; grid-template-columns:1fr 1fr; gap:12px; }
.review { border:1px solid var(--bd); background:var(--cd); border-radius:16px; padding:14px; display:flex; flex-direction:column; gap:7px; box-shadow:var(--sh); }
.review__head { display:flex; align-items:center; gap:8px; font-size:13px; font-weight:700; }
.review p { margin:0; font-size:13px; line-height:1.55; color:var(--sb); }
.info { display:flex; align-items:center; gap:12px; }
.info__ico { width:38px; height:38px; flex:none; border-radius:12px; background:var(--ch); display:flex; align-items:center; justify-content:center; }
.info__t { font-size:14px; font-weight:700; }
.info__s { font-size:12px; color:var(--sb); }
.sponsor { display:flex; align-items:center; gap:10px; font-size:13.5px; font-weight:700; }
#map.minimap { height:140px; border-radius:14px; overflow:hidden; }

.footer { margin-top:auto; padding:20px var(--gutter); border-top:1px solid var(--bd); font-size:12px; color:var(--ft); }

@media (min-width:1100px) { .search { width:280px; } }

/* 모바일: 시안 "모바일 디자인 유지" */
@media (max-width:820px) { .search { width:130px; } }
@media (max-width:720px) {
  .nav { flex-wrap:wrap; gap:12px 16px; padding:14px 16px; }
  .nav__links { order:3; width:100%; gap:18px; }
  .search { display:none; }
  .hero, .hero--detail { height:260px; }
  .hero h1 { font-size:26px; }
  .hero__shade { padding:20px 16px; flex-direction:column; align-items:flex-start; }
  .hero__back { left:16px; }
  .section, .detail { padding-left:16px; padding-right:16px; }
  .footer { padding-left:16px; padding-right:16px; }
  .hero__shade { padding-left:16px; padding-right:16px; }
  .filters { padding:12px 16px; }
  .grid { grid-template-columns:1fr 1fr; gap:14px; }
  .explore { grid-template-columns:1fr; height:auto; }
  .list { border-right:0; max-height:340px; border-bottom:1px solid var(--bd); }
  #map { height:320px; }
  .detail { grid-template-columns:1fr; }
  .reviews { grid-template-columns:1fr; }
}
@media (max-width:420px) { .grid { grid-template-columns:1fr; } }