/* PARTYMAP — Soft Night (부드러운 UI 레이어). 가장 마지막에 로드되어 Night Edition 위에 덧씌운다.
   방향: 새까만 밤 → 해 질 녘 보랏빛 차콜. 쨍한 골드 → 샴페인 골드. 날 선 테두리 → 거의 보이지 않는 선 + 부드러운 그림자.
   둥근 모서리는 한 단계 크게, 버튼·칩은 알약형, 글자 굵기는 한 단계 가볍게, 움직임은 짧고 느긋한 ease-out.
   되돌리려면 index.html 의 soft.css 링크만 지우면 된다(밝은 모드 토큰은 light.css 가 그대로 우선). */

:root {
  --bg: #17151a;
  --canvas: #121015;
  --panel: #201d24;
  --panel-2: #2a2630;
  --panel-3: #332e3a;
  --line: rgba(255, 240, 225, .085);
  --line-soft: rgba(255, 240, 225, .055);
  --text: #f3eee8;
  --text-2: #d9d2ca;
  --muted: #aaa298;      /* #17151a 위 7.0:1 */
  --muted-2: #958d84;    /* #17151a 위 5.5:1 · #201d24 위 5.0:1 */
  --gold: #e3c583;       /* 샴페인 골드 — 채도 낮춤 */
  --gold-hi: #f1dfb2;
  --gold-lo: #b99c5e;
  --gold-tint: rgba(227, 197, 131, .12);
  --gold-edge: rgba(227, 197, 131, .38);
  --on-gold: #2a1f0b;
  --coral: #ff8f8a;      /* 지금 붐빔 — 살짝 파스텔 */
  --on-coral: #2b0a0b;
  --lime: #9fdcb0;
  --cyan: var(--gold);
  --pink: var(--coral);

  --radius: 22px;
  --r-btn: 999px;
  --r-input: 16px;
  --r-badge: 999px;

  --shadow-1: 0 1px 2px rgba(8, 6, 10, .22), 0 4px 14px rgba(8, 6, 10, .18);
  --shadow-float: 0 2px 6px rgba(8, 6, 10, .22), 0 14px 34px rgba(8, 6, 10, .32);
  --shadow-map: 0 4px 12px rgba(8, 6, 10, .25), 0 28px 60px rgba(8, 6, 10, .38);
  --shadow-gold: 0 2px 6px rgba(120, 90, 30, .22), 0 10px 26px rgba(120, 90, 30, .2);
  --ring: 0 0 0 4px rgba(227, 197, 131, .18);
  --ease: cubic-bezier(.22, 1, .36, 1);
}
html[data-theme="light"] {
  --bg: #f7f3ee;
  --canvas: #efe9e1;
  --panel: #ffffff;
  --panel-2: #f3eee7;
  --panel-3: #ebe4da;
  --line: rgba(60, 45, 30, .10);
  --line-soft: rgba(60, 45, 30, .065);
  --muted: #625a4f;
  --muted-2: #6b6357;
  --gold: #7a5c16;
  --gold-hi: #6b4f10;
  --gold-lo: #5c440c;
  --gold-tint: rgba(170, 130, 50, .12);
  --gold-edge: rgba(122, 92, 22, .32);
  --on-gold: #ffffff;
  --coral: #b9384a;
  --on-coral: #ffffff;
  --shadow-1: 0 1px 2px rgba(70, 50, 25, .06), 0 4px 14px rgba(70, 50, 25, .06);
  --shadow-float: 0 2px 6px rgba(70, 50, 25, .07), 0 14px 34px rgba(70, 50, 25, .10);
  --shadow-map: 0 4px 12px rgba(70, 50, 25, .08), 0 26px 56px rgba(70, 50, 25, .14);
  --shadow-gold: 0 2px 6px rgba(120, 90, 30, .14), 0 10px 24px rgba(120, 90, 30, .14);
  --ring: 0 0 0 4px rgba(122, 92, 22, .16);
}

/* ---------- 바탕 · 글자 · 브라우저 기본 요소 ---------- */
body {
  background: var(--bg);
  background-image:
    radial-gradient(1100px 520px at 50% -260px, rgba(227, 197, 131, .09), transparent 70%),
    radial-gradient(700px 420px at 100% 0, rgba(180, 140, 200, .06), transparent 70%);
  background-attachment: fixed;
}
html[data-theme="light"] body { background-image: radial-gradient(1100px 520px at 50% -260px, rgba(227, 197, 131, .18), transparent 70%); }
h1, h2, h3 { font-weight: 650; }
h1.page { font-weight: 650; letter-spacing: -0.035em; }
h1.page::after { width: 22px; height: 3px; border-radius: 3px; opacity: .8; }
b, strong { font-weight: 650; }
::selection { background: rgba(227, 197, 131, .28); color: var(--text); }
html { caret-color: var(--gold); scrollbar-color: var(--panel-3) transparent; }
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: var(--panel-3); border-radius: 99px; border: 3px solid var(--bg); }
::-webkit-scrollbar-track { background: transparent; }
:focus-visible { outline: none; box-shadow: var(--ring); border-radius: 12px; }
a:focus-visible, button:focus-visible { outline: none; }
.muted { color: var(--muted); }
.tnum, .stat b, .rank-n, time { font-variant-numeric: tabular-nums; }

/* ---------- 상단바 · 하단 탭바 ---------- */
.topbar {
  background: color-mix(in srgb, var(--bg) 82%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  border-bottom: 1px solid var(--line-soft);
}
.pm-pin { border-radius: 50% 50% 50% 18%; }
#nav a { color: var(--muted); font-weight: 550; border-radius: 99px; transition: color .25s var(--ease), background .25s var(--ease); }
#nav a::after { display: none; }
#nav a:hover { color: var(--text); background: var(--line-soft); }
#nav a.active { color: var(--text); background: var(--panel-2); }
#tabbar {
  background: color-mix(in srgb, var(--bg) 88%, transparent);
  backdrop-filter: blur(18px) saturate(1.15);
  border-top: 1px solid var(--line-soft);
}

/* ---------- 카드 · 리스트 · 패널 ---------- */
.card {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: var(--radius);
  box-shadow: var(--shadow-1);
  transition: transform .3s var(--ease), box-shadow .3s var(--ease), border-color .3s var(--ease), background .3s var(--ease);
}
a.card:hover, .grid > a.card:hover { border-color: var(--line); transform: translateY(-2px); box-shadow: var(--shadow-float); }
.list { border: 1px solid var(--line-soft); border-radius: var(--radius); box-shadow: var(--shadow-1); }
.list-item { border-left: 0; border-bottom-color: var(--line-soft); transition: background .2s var(--ease); }
.list-item:hover { background: var(--panel-2); border-left: 0; }
.thumb { border-radius: 16px; background: linear-gradient(145deg, var(--panel-3), var(--panel-2)); }
html[data-theme="light"] .thumb { background: linear-gradient(145deg, #f1ebe2, #e8e0d4); }
.post-img, .photo { border-radius: 18px; border-color: var(--line-soft); }
dialog { border-radius: 26px; border: 1px solid var(--line); box-shadow: var(--shadow-map); }
dialog::backdrop { background: rgba(12, 10, 14, .62); backdrop-filter: blur(6px); }
.sheet, .hm-sheet { border-radius: 30px 30px 0 0; border-top: 1px solid var(--line); box-shadow: 0 -8px 24px rgba(8, 6, 10, .18), 0 -24px 60px rgba(8, 6, 10, .28); }
.hm-sheet-head .grab { width: 36px; height: 5px; border-radius: 99px; background: var(--panel-3); }
.toast { border-radius: 99px; border: 1px solid var(--line); background: color-mix(in srgb, var(--panel) 94%, transparent); box-shadow: var(--shadow-float); }

/* ---------- 버튼 ---------- */
.btn {
  border-radius: var(--r-btn);
  background: var(--panel-2);
  border: 1px solid var(--line-soft);
  color: var(--text);
  font-weight: 600;
  padding: 10px 20px;
  transition: background .25s var(--ease), border-color .25s var(--ease), box-shadow .25s var(--ease), transform .15s var(--ease), filter .25s var(--ease);
}
.btn:hover { background: var(--panel-3); border-color: var(--line); }
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--gold); color: var(--on-gold); border-color: transparent; box-shadow: var(--shadow-gold); }
.btn.primary:hover { background: var(--gold-hi); filter: none; }
.btn.lg { border-radius: var(--r-btn); font-weight: 650; height: 54px; }
.btn.sm { border-radius: 99px; padding: 6px 14px; }
.btn.ghost { background: transparent; border-color: transparent; }
.btn.ghost:hover { background: var(--line-soft); }
.btn.outline-gold { background: var(--gold-tint); border-color: transparent; color: var(--gold-hi); }
.btn.outline-gold:hover { background: rgba(227, 197, 131, .2); }
html[data-theme="light"] .btn.outline-gold { color: var(--gold); }
.btn.coral { background: var(--coral); color: var(--on-coral); box-shadow: 0 2px 6px rgba(120, 40, 40, .2), 0 10px 24px rgba(120, 40, 40, .18); }
.btn.danger { color: var(--coral); }
.btn[disabled] { opacity: .45; box-shadow: none; }

/* ---------- 입력 ---------- */
input, select, textarea {
  background: var(--panel-2);
  border: 1px solid transparent;
  border-radius: var(--r-input);
  color: var(--text);
  transition: border-color .25s var(--ease), box-shadow .25s var(--ease), background .25s var(--ease);
}
input::placeholder, textarea::placeholder { color: var(--muted-2); }
input:hover, select:hover, textarea:hover { border-color: var(--line); }
input:focus, select:focus, textarea:focus { background: var(--panel); border-color: var(--gold-edge); box-shadow: var(--ring); }
html[data-theme="light"] input, html[data-theme="light"] select, html[data-theme="light"] textarea { background: var(--panel-2); }
.hm-q, .hm-filter { background: color-mix(in srgb, var(--panel) 94%, transparent); border: 1px solid var(--line-soft); border-radius: 18px; backdrop-filter: blur(10px); }
.hm-q:focus-within { border-color: var(--gold-edge); box-shadow: var(--ring); }
input[type=checkbox], input[type=radio] { accent-color: var(--gold); }

/* ---------- 칩 · 탭 · 세그먼트 · 배지 ---------- */
.chip, .tab {
  background: var(--panel);
  border: 1px solid var(--line-soft);
  border-radius: 99px;
  color: var(--text-2);
  font-weight: 550;
  transition: background .25s var(--ease), color .25s var(--ease), border-color .25s var(--ease);
}
.chip:hover, .tab:hover { background: var(--panel-2); border-color: var(--line); color: var(--text); box-shadow: none; }
.chip.on, .chip.active, .tab.active {
  background: var(--gold-tint);
  border-color: var(--gold-edge);
  color: var(--gold-hi);
  font-weight: 650;
  box-shadow: none;
}
html[data-theme="light"] .chip.on, html[data-theme="light"] .chip.active, html[data-theme="light"] .tab.active { color: var(--gold); }
.chip.tint { background: var(--gold-tint); border-color: transparent; }
.seg { background: var(--panel-2); border: 0; border-radius: 99px; padding: 4px; }
.seg > * { border-radius: 99px; transition: background .25s var(--ease), color .25s var(--ease); }
.seg > .on { background: var(--panel); color: var(--text); box-shadow: var(--shadow-1); }
.badge { border-radius: 99px; font-weight: 600; padding: 3px 9px; }
.badge.VIP, .badge.gold { color: var(--on-gold); }
.badge.pending { background: rgba(255, 143, 138, .14); color: var(--coral); box-shadow: none; border: 0; }
.badge.confirmed { background: rgba(159, 220, 176, .12); color: var(--lime); box-shadow: none; }
.badge.live { box-shadow: none; }
.fx-badge { border-color: var(--gold-edge); }
.card.fx-2 { box-shadow: var(--shadow-1), 0 0 0 1px var(--gold-edge); }
.card.fx-3 { box-shadow: var(--shadow-float), 0 0 0 1px var(--gold); animation: none; }

/* ---------- 첫 방문 화면 ---------- */
.onboard-photo {
  background:
    radial-gradient(60% 45% at 28% 22%, rgba(227, 197, 131, .30), transparent 70%),
    radial-gradient(55% 40% at 78% 34%, rgba(196, 150, 210, .22), transparent 70%),
    radial-gradient(70% 50% at 50% 60%, rgba(255, 143, 138, .12), transparent 70%),
    var(--canvas);
  filter: blur(2px);
}
html[data-theme="light"] .onboard-photo {
  background:
    radial-gradient(60% 45% at 28% 22%, rgba(227, 197, 131, .45), transparent 70%),
    radial-gradient(55% 40% at 78% 34%, rgba(196, 150, 210, .28), transparent 70%),
    var(--canvas);
}
.onboard-body h1 { font-weight: 650; }
.onboard-skip { border-radius: 99px; }

/* ---------- 사진 없는 자리: 빗금 대신 부드러운 그러데이션 ---------- */
.cm-photos a, .me-row-ic, .dm-place-ph, .dm-ph { background: linear-gradient(145deg, var(--panel-3), var(--panel-2)); }
.dt-photo, .ev-poster, .dj-ph, .crew-card-cover, .crew-cover {
  background:
    radial-gradient(70% 60% at 25% 20%, rgba(227, 197, 131, .16), transparent 70%),
    radial-gradient(60% 60% at 85% 40%, rgba(196, 150, 210, .12), transparent 70%),
    linear-gradient(160deg, var(--panel-3), var(--panel-2) 60%, var(--panel));
}
html[data-theme="light"] .cm-photos a, html[data-theme="light"] .me-row-ic, html[data-theme="light"] .dm-place-ph, html[data-theme="light"] .dm-ph { background: linear-gradient(145deg, #f1ebe2, #e8e0d4); }
html[data-theme="light"] .dt-photo, html[data-theme="light"] .ev-poster, html[data-theme="light"] .dj-ph, html[data-theme="light"] .crew-card-cover, html[data-theme="light"] .crew-cover {
  background: radial-gradient(70% 60% at 25% 20%, rgba(227, 197, 131, .32), transparent 70%), radial-gradient(60% 60% at 85% 40%, rgba(196, 150, 210, .2), transparent 70%), linear-gradient(160deg, #efe8de, #e7dfd2);
}
@media (min-width: 721px) { .dt-hero { border-radius: 26px; } }

/* 게시판 왼쪽 메뉴 */
.board-menu a, .board-menu summary { border-radius: 12px; }
.board-menu a.active { box-shadow: none; background: var(--gold-tint); color: var(--gold-hi); }
html[data-theme="light"] .board-menu a.active { color: var(--gold); }

/* ---------- 지도 위 떠 있는 버튼 ---------- */
.leaflet-control-zoom a, .leaflet-bar a { border-radius: 14px !important; }
.leaflet-bar { border: 0 !important; box-shadow: var(--shadow-float) !important; border-radius: 16px !important; overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  .card, .btn, .chip, .tab, input, select, textarea { transition: none; }
  a.card:hover, .grid > a.card:hover { transform: none; }
}

/* 검색 상자 안쪽 입력칸은 투명 (상자 자체가 입력칸 역할) */
.hm-q input, html[data-theme="light"] .hm-q input { background: transparent; border: 0; box-shadow: none; }
.hm-q input:focus { background: transparent; box-shadow: none; }
.ls-q { box-shadow: none; }