/* social 화면 (Night Edition) — 메시지함 · 1:1 메시지(웹 3단) · 오늘 가는 사람들 대화방 · 크루 */

/* ---------- 공통: 아바타 · 입력줄 · 가려진 연락처 ---------- */
.pm-avi { flex: none; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; color: var(--text-2); font-weight: 700; line-height: 1; letter-spacing: 0; user-select: none; }
.pm-avi.ring { box-shadow: 0 0 0 2px var(--bg), 0 0 0 4px var(--gold); }
.pm-mask { display: inline-block; padding: 0 4px; border-radius: 4px; background: var(--line); color: var(--muted); font-size: .92em; white-space: nowrap; }
.pm-compose { display: flex; gap: 8px; align-items: center; }
.pm-compose input { flex: 1; min-width: 0; height: 44px; border-radius: 22px; padding: 0 16px; font-size: 15px; background: var(--panel); border: 1px solid var(--line); }
.pm-send, .pm-plus { flex: none; width: 44px; height: 44px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center; font-size: 18px; cursor: pointer; padding: 0; font-family: inherit; }
.pm-send { background: var(--gold); color: var(--bg); border: 0; font-weight: 700; }
.pm-send:hover { filter: brightness(1.06); }
.pm-plus { background: none; border: 1px solid var(--line); color: var(--muted); font-size: 20px; }
.pm-plus:hover { border-color: var(--gold-edge); color: var(--gold); }

/* ---------- 06 오늘 가는 사람들 (업장 상세의 대화방 카드) ---------- */
.pmc-box { padding: 0 !important; overflow: hidden; }
.pmc-head { display: flex; align-items: center; gap: 10px; padding: 14px 18px; border-bottom: 1px solid var(--line-soft); }
.pmc-head b { font-size: 16px; }
.pmc-count { font-size: 12px; color: var(--muted); }
.pmc-sys { align-self: center; margin: 14px auto 2px; width: fit-content; max-width: calc(100% - 24px); padding: 7px 14px; border-radius: 99px; background: var(--bg); font-size: 12px; color: var(--muted); text-align: center; line-height: 1.45; }
.pmc-box > .pmc-sys { background: var(--panel-2); }
.pmc-gate { margin: 10px 18px 18px; font-size: 13px; color: var(--muted); text-align: center; }
.pmc-log { display: flex; flex-direction: column; gap: 14px; padding: 0 16px 16px; max-height: 420px; overflow-y: auto; background: var(--bg); }
.pmc-msg { display: flex; gap: 10px; align-items: flex-start; }
.pmc-msg.cont { margin-top: -9px; }
.pmc-msg.cont .pm-avi { visibility: hidden; height: 0; }
.pmc-col { display: flex; flex-direction: column; gap: 5px; max-width: min(250px, 78%); min-width: 0; }
.pmc-name { font-size: 12px; color: var(--muted); display: flex; gap: 5px; align-items: center; }
.pmc-name .badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.pmc-name .badge.REGULAR { padding: 0; }
.pmc-bub { align-self: flex-start; padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--panel-2); font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; }
.pmc-time { font-size: 11px; color: var(--muted-2); }
.pmc-rxs { display: none; gap: 6px; flex-wrap: wrap; align-self: flex-start; }
.pmc-rxs.has, .pmc-msg.rx-open .pmc-rxs { display: flex; }
.pmc-msg.mine .pmc-rxs { align-self: flex-end; }
.pmc-rx { display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; padding: 3px 9px; border-radius: 99px; border: 1px solid #2a2720; background: transparent; color: var(--text); font: inherit; font-size: 12px; line-height: 1.4; cursor: pointer; }
.pmc-rx b { font-weight: 600; }
.pmc-rx.on { border-color: var(--gold); background: rgba(212,175,55,.1); color: #f0d98a; }
.pmc-rx.zero { display: none; opacity: .65; }
.pmc-msg.rx-open .pmc-rx.zero { display: inline-flex; }
.pmc-rx:disabled { cursor: default; }
.pmc-msg .pmc-bub { cursor: default; }
@media (hover: hover) {
  .pmc-msg:hover .pmc-rxs { display: flex; }
  .pmc-msg:hover .pmc-rx.zero:not(:disabled) { display: inline-flex; }
  .pmc-rx:not(:disabled):hover { border-color: var(--gold-edge, #6b5a2a); }
}
.pmc-time a { color: var(--muted-2); }
.pmc-time a:hover { color: var(--coral); }
.pmc-msg.has-next .pmc-time { display: none; }
.pmc-msg.mine { flex-direction: column; align-items: flex-end; gap: 4px; }
.pmc-msg.mine .pmc-bub { align-self: flex-end; max-width: min(250px, 78%); border-radius: 16px 4px 16px 16px; background: var(--gold); color: var(--bg); font-weight: 500; }
.pmc-msg.mine .pm-mask { background: rgba(23,21,26,.18); color: rgba(23,21,26,.7); }
.pmc-rep { display: flex; align-items: center; gap: 10px; font-size: 12px; color: var(--muted-2); }
.pmc-rep i { flex: 1; height: 1px; background: #24221c; }
.pmc-rep .dot { margin-right: 4px; }
.pmc-box .pm-compose { padding: 10px 14px 6px; border-top: 1px solid var(--line-soft); }
.pmc-note { margin: 0; padding: 0 18px 12px; font-size: 11px; color: var(--muted-2); }

/* ---------- 10 메시지함 · 11 1:1 메시지 · W2 메시지 웹 ---------- */
body[data-page="dm"] main { max-width: 1280px; }
.dmw { display: block; }
.dmw-thread, .dmw-prof { display: none; }
.dmw.has-thread .dmw-list { display: none; }
.dmw.has-thread .dmw-thread { display: flex; }

/* 목록 */
.dm-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; padding: 4px 0 4px; }
.dm-head h1 { margin: 0; font-size: 28px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.2; }
.dm-head h1::after { display: none; }
.dm-head span { font-size: 12px; color: var(--muted-2); }
.dm-head > div { display: flex; flex-direction: column; gap: 3px; }
.dm-icon { background: none; border: 0; color: var(--text-2); padding: 6px; cursor: pointer; border-radius: 10px; font-family: inherit; }
.dm-icon:hover { color: var(--gold); }
.dm-find { margin-top: 10px; }
.dm-find input { height: 42px; }
.dm-stories { padding: 18px 0 4px; display: flex; flex-direction: column; gap: 12px; }
.dm-stories-h { display: flex; justify-content: space-between; font-size: 13px; }
.dm-stories-h b { font-weight: 600; }
.dm-stories-h span { color: var(--muted); }
.dm-stories-empty { margin: 0; font-size: 12.5px; color: var(--muted-2); }
.dm-story-row { display: flex; gap: 14px; overflow-x: auto; scrollbar-width: none; margin: 0 -2px; padding: 0 2px 2px; }
.dm-story-row::-webkit-scrollbar { display: none; }
.dm-story { flex: none; width: 64px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.dm-ring { width: 60px; height: 60px; border-radius: 50%; padding: 3px; background: var(--line); }
.dm-story.live .dm-ring { background: conic-gradient(var(--coral), var(--gold), var(--coral)); }
.dm-ph { position: relative; width: 100%; height: 100%; border-radius: 50%; border: 2px solid var(--bg); overflow: hidden; background: repeating-linear-gradient(135deg, #1d1b16 0 6px, #17150f 6px 12px); display: flex; align-items: center; justify-content: center; font-size: 20px; }
.dm-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-story-nm { font-size: 11px; color: var(--text-2); max-width: 64px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; line-height: 1.3; }
.dm-story-ct { font-size: 10px; color: var(--muted-2); margin-top: -4px; line-height: 1.2; }
.dm-story.live .dm-story-ct { color: var(--coral); }
.dm-story:hover .dm-story-nm { color: var(--gold-hi); }
.dm-seg { margin: 14px 0 0; background: var(--panel); border: 0; }
.dm-seg > button { height: 36px; padding: 0 10px; font-size: 14px; color: var(--muted); font-weight: 500; }
.dm-seg > button.on { background: #24221c; color: var(--text); font-weight: 700; }
.dm-rows { padding: 4px 0 0; display: flex; flex-direction: column; }
.dm-row { display: flex; align-items: center; gap: 12px; padding: 13px 0; }
.dm-row-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.dm-row-top { display: flex; align-items: center; gap: 6px; }
.dm-row-top b { font-size: 15px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row-top .badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; flex: none; }
.dm-row-top .badge.REGULAR { padding: 0; }
.dm-row-top time { margin-left: auto; font-size: 12px; color: var(--muted-2); flex: none; }
.dm-row-bot { display: flex; align-items: center; gap: 8px; }
.dm-prev { flex: 1; min-width: 0; font-size: 14px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-row.unread .dm-prev { color: var(--text); }
.dm-unread { flex: none; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 10px; background: var(--coral); color: var(--on-coral); font-size: 11px; font-weight: 700; font-style: normal; display: inline-flex; align-items: center; justify-content: center; }
.dm-row:hover b { color: var(--gold-hi); }
.dm-empty { margin: 18px 0; font-size: 13.5px; color: var(--muted); text-align: center; }
.dm-empty.sm { margin: 6px 0; font-size: 12px; text-align: left; color: var(--muted-2); }
.dm-off { display: flex; flex-wrap: wrap; gap: 4px 8px; align-items: center; margin: 14px 0 0; padding-top: 14px; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--text-2); cursor: pointer; }
.dm-off input { width: auto; margin: 0; accent-color: var(--gold); }
.dm-off span { font-size: 11.5px; color: var(--muted-2); }

/* 대화창 */
.dmw-thread { flex-direction: column; min-width: 0; height: calc(100dvh - var(--dmw-top, 140px) - 24px); min-height: 420px; }
.dm-thead { flex: none; display: flex; align-items: center; gap: 12px; padding: 6px 2px 14px; border-bottom: 1px solid var(--line-soft); }
.dm-back { font-size: 26px; line-height: 1; padding: 0 6px 4px 0; color: var(--text); }
.dm-thead-id { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.dm-thead-id b { font-size: 16px; font-weight: 600; display: flex; gap: 6px; align-items: center; }
.dm-thead-id b .badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.dm-thead-id b .badge.REGULAR { padding: 0; }
.dm-thead-id span { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-more { font-size: 20px; color: var(--muted); letter-spacing: 2px; line-height: 1; }
.dm-log { flex: 1; overflow-y: auto; padding: 14px 2px 10px; display: flex; flex-direction: column; gap: 12px; }
.dm-safe { display: flex; gap: 10px; align-items: flex-start; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid #24221c; font-size: 12px; line-height: 1.55; color: var(--muted); }
.dm-safe > span:first-child { color: var(--gold); font-size: 14px; line-height: 1.3; }
.dm-day { align-self: center; font-size: 11px; color: var(--muted-2); }
.dm-hint { margin: auto 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.dm-msg { display: flex; gap: 8px; align-items: flex-end; }
.dm-msg.cont { margin-top: -8px; }
.dm-msg.has-next .pm-avi { visibility: hidden; }
.dm-col { display: flex; flex-direction: column; gap: 4px; max-width: min(250px, 78%); min-width: 0; align-items: flex-start; }
.dm-bub { padding: 10px 14px; border-radius: 4px 16px 16px 16px; background: var(--panel-2); font-size: 15px; line-height: 1.5; white-space: pre-wrap; word-break: break-word; cursor: default; }
.dm-msg.mine { justify-content: flex-end; }
.dm-msg.mine .dm-col { align-items: flex-end; }
.dm-msg.mine .dm-bub { border-radius: 16px 4px 16px 16px; background: var(--gold); color: var(--bg); font-weight: 500; }
.dm-msg.mine .pm-mask { background: rgba(23,21,26,.18); color: rgba(23,21,26,.7); }
.dm-masknote { font-size: 11px; color: var(--muted-2); padding: 0 4px; }
.dm-meta { font-size: 11px; color: var(--muted-2); padding: 0 4px; }
.dm-meta a { color: var(--muted-2); }
.dm-meta a:hover { color: var(--coral); }
.dm-msg.has-next:not(.show-meta) .dm-meta { display: none; }
.dm-msg:not(.mine) .dm-bub { cursor: pointer; }
.dm-place { display: block; width: 240px; max-width: 100%; border-radius: 4px 16px 16px 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--gold-edge); }
.dm-place.mine { border-radius: 16px 4px 16px 16px; }
.dm-place-ph { position: relative; display: flex; align-items: center; justify-content: center; height: 90px; font-size: 26px; background: repeating-linear-gradient(135deg, #1d1b16 0 8px, #17150f 8px 16px); }
.dm-place-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.dm-place-body { display: flex; flex-direction: column; gap: 2px; padding: 10px 12px; }
.dm-place-body b { font-size: 14px; }
.dm-place-body > span { font-size: 12px; color: var(--muted); }
.dm-place:hover { border-color: var(--gold); }
.dm-link { font-size: 13px; color: var(--gold); }
.dmw-thread .pm-compose { flex: none; padding: 10px 0 0; border-top: 1px solid var(--line-soft); }
.dm-foot { flex: none; margin: 8px 0 0; font-size: 11px; line-height: 1.5; color: var(--muted-2); }
.dm-closed { flex: none; margin: 0; padding: 14px 0; border-top: 1px solid var(--line-soft); font-size: 13px; color: var(--muted); text-align: center; }

/* 상대 프로필 패널 · 장소 행 */
.dmw-prof { flex-direction: column; align-items: center; gap: 18px; text-align: center; padding: 28px 22px; }
.dm-prof-id { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.dm-prof-id b { font-size: 18px; }
.dm-prof-id > span { font-size: 13px; color: var(--muted); }
.dm-prof-id .badge { font-size: 10px; }
.dm-prof-badges { display: flex; gap: 6px; font-size: 20px; }
.dm-prof-sec { width: 100%; display: flex; flex-direction: column; gap: 8px; text-align: left; }
.dm-lbl { font-size: 12px; color: var(--muted-2); font-weight: 700; letter-spacing: .1em; }
#dmplaces { display: flex; flex-direction: column; gap: 8px; }
.dm-prow { display: flex; gap: 10px; align-items: center; padding: 10px; border-radius: 12px; background: var(--panel); border: 1px solid #24221c; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer; }
.dm-prow > span:last-child { display: flex; flex-direction: column; min-width: 0; }
.dm-prow b { font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dm-prow > span:last-child > span { font-size: 11px; }
.dm-prow .thumb { font-size: 1rem; }
.dm-prow:hover { border-color: var(--gold-edge); }
.dm-prof-gap { flex: 1; }
.dm-prof-act { width: 100%; display: flex; gap: 8px; }
.dm-prof-act .btn { flex: 1; background: none; border-color: var(--line); border-radius: 10px; }
.dm-prof-act .dm-rep { border-color: rgba(255,93,108,.4); color: var(--coral); }
.dm-pres { display: flex; flex-direction: column; gap: 8px; margin-top: 12px; max-height: 50vh; overflow-y: auto; }

/* 시트 메뉴 (메시지 ···, 크루 ···) */
.dm-menu { display: flex; flex-direction: column; margin: 8px 0 10px; }
.dm-menu > a, .dm-menu > button { display: block; width: 100%; text-align: left; padding: 15px 4px; border: 0; border-bottom: 1px solid var(--line-soft); background: none; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.dm-menu > .coral { color: var(--coral); }
.dm-menu > [data-close]:last-child { border-bottom: 0; color: var(--muted); text-align: center; }

/* 모바일: 한 칸씩, 대화창은 화면 높이에 맞춰 */
@media (max-width: 720px) {
  body[data-page="dm"] main { padding-top: 12px; }
  body[data-page="dm"] main:has(.has-thread) { padding-top: 6px; padding-bottom: 0; min-height: 0; }
  body[data-page="dm"] .footer { display: none; }
  .dmw-thread { height: calc(100dvh - var(--dmw-top, 120px) - 64px - env(safe-area-inset-bottom, 0px) - 6px); min-height: 360px; margin: 0 -4px; }
  .dm-foot { display: none; }
  .dmw-thread .pm-compose { padding-bottom: 8px; }
}

/* 데스크톱 W2: 320px 목록 · 대화 · 280px 프로필 */
@media (min-width: 1040px) {
  body[data-page="dm"] main { padding-top: 22px; padding-bottom: 30px; }
  .dmw { display: grid; grid-template-columns: 320px minmax(0, 1fr) 280px; height: calc(100vh - var(--dmw-top, 150px) - 24px); min-height: 520px; border: 1px solid #24221c; border-radius: 14px; overflow: hidden; background: var(--bg); }
  .dmw .dmw-list, .dmw.has-thread .dmw-list { display: flex; flex-direction: column; border-right: 1px solid var(--line-soft); overflow-y: auto; min-height: 0; }
  .dmw .dmw-thread { display: flex; height: auto; min-height: 0; margin: 0; }
  .dmw .dmw-prof { display: flex; border-left: 1px solid var(--line-soft); overflow-y: auto; min-height: 0; }
  .dmw-blank { align-items: center; justify-content: center; }
  .dmw-prof.dmw-blank { display: block; }
  .dmw-list .dm-head { padding: 22px 20px 0; }
  .dmw-list .dm-head h1 { font-size: 22px; letter-spacing: -0.03em; }
  .dmw-list .dm-find, .dmw-list .dm-stories, .dmw-list .dm-seg, .dmw-list .dm-off { margin-left: 20px; margin-right: 20px; }
  .dmw-list .dm-stories { padding-top: 16px; }
  .dmw-list .dm-story-row { gap: 10px; }
  .dmw-list .dm-rows { padding-top: 8px; }
  .dmw-list .dm-row { padding: 13px 20px; gap: 12px; }
  .dmw-list .dm-row .pm-avi { width: 44px !important; height: 44px !important; font-size: 17px !important; }
  .dmw-list .dm-row-top b { font-size: 14px; }
  .dmw-list .dm-row-top time { font-size: 11px; }
  .dmw-list .dm-prev { font-size: 13px; }
  .dmw-list .dm-unread { min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; }
  .dmw-list .dm-row.on { background: var(--panel); box-shadow: inset 2px 0 0 var(--gold); }
  .dmw-list .dm-off { margin-top: auto; padding: 14px 0 18px; }
  .dm-back { display: none; }
  .dm-thead { padding: 16px 24px; }
  .dm-thead .pm-avi { width: 38px !important; height: 38px !important; }
  .dm-thead-id b { font-size: 15px; }
  .dm-more { display: none; }
  .dm-log { padding: 22px 24px; }
  .dm-log > :first-child { margin-top: auto; }
  .dm-safe { align-self: center; width: fit-content; padding: 6px 14px; border-radius: 99px; border: 0; background: var(--panel); color: var(--muted-2); }
  .dm-safe > span:first-child { display: none; }
  .dm-col { max-width: min(420px, 70%); }
  .dmw-thread .pm-compose { padding: 14px 24px 8px; border-top: 0; }
  .dmw-thread .pm-compose input { height: 46px; border-radius: 23px; padding: 0 18px; font-size: 14px; }
  .dmw-thread .pm-send, .dmw-thread .pm-plus { width: 46px; height: 46px; }
  .dm-foot { padding: 0 24px 14px; margin: 0; }
  .dm-closed { margin: 0 24px; }
}

/* ---------- 13 크루 ---------- */
.crew-tier { background: transparent; border: 1px solid var(--line); color: var(--muted); font-weight: 700; letter-spacing: .06em; font-size: 10px; padding: 2px 6px; }
.crew-tier.SILVER { border-color: #6f6c63; color: var(--text-2); }
.crew-tier.GOLD { border-color: var(--gold-edge); color: var(--gold); }
.crew-tier.BLACK { background: var(--gold); border-color: var(--gold); color: var(--bg); }

/* 목록 */
.crews-head { display: flex; align-items: flex-end; justify-content: space-between; gap: 14px; flex-wrap: wrap; }
.crews-head > div { display: flex; flex-direction: column; gap: 2px; }
.crews-head .serif { font-size: 15px; }
.crews-head h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.crews-head p { margin: 4px 0 0; font-size: 14px; color: var(--muted); }
.crews-note { margin: 16px 0; padding: 12px 14px; border-radius: 12px; background: var(--panel); border: 1px solid #24221c; font-size: 12.5px; line-height: 1.55; color: var(--muted); }
.crews-seg { max-width: 360px; }
.crews-seg > a { display: block; }
.crews-regions { margin: 12px 0 18px; }
.crews-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 14px; }
.crew-card { display: flex; flex-direction: column; border-radius: 16px; overflow: hidden; background: var(--panel); border: 1px solid var(--line); transition: border-color .2s, transform .2s; }
.crew-card:hover { border-color: var(--gold-edge); transform: translateY(-1px); }
.crew-card-cover { position: relative; height: 88px; background: repeating-linear-gradient(135deg, #1d1b16 0 10px, #16140f 10px 20px); display: flex; align-items: flex-end; justify-content: space-between; padding: 10px 14px; }
.crew-card-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, transparent 30%, rgba(32,29,36,.9)); }
.crew-card-cover > * { position: relative; z-index: 1; }
.crew-no { font-size: 26px; color: var(--gold); line-height: 1; }
.crew-no.wait { font-size: 11px; color: var(--muted-2); font-family: var(--sans); font-style: normal; letter-spacing: .02em; }
.crew-card-body { display: flex; flex-direction: column; gap: 4px; padding: 12px 16px 16px; }
.crew-card-name { font-size: 17px; letter-spacing: -0.02em; }
.crew-card-meta { font-size: 12px; color: var(--muted-2); }
.crew-card-intro { font-size: 13.5px; color: var(--text-2); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.crew-card-foot { display: flex; align-items: center; gap: 10px; margin-top: 8px; font-size: 12.5px; color: var(--muted); }
.crew-card-foot b { color: var(--text); }
.crew-card-pts { margin-left: auto; font-size: 20px; color: var(--text); line-height: 1; }
.crew-card-medals { margin-top: 4px; }
.crew-card-hint { font-size: 11.5px; color: var(--muted-2); }
.crew-pips { display: inline-flex; gap: 3px; }
.crew-pips i { width: 6px; height: 6px; border-radius: 50%; background: var(--line); }
.crew-pips i.on { background: var(--gold); }

/* 상세 */
body[data-page="crews"] main:has(.crew-pg) { max-width: 760px; }
.crew-pg { position: relative; }
.crew-hero { position: relative; margin: -34px -22px 0; padding: 0 22px; min-height: 250px; display: flex; flex-direction: column; }
.crew-cover { position: absolute; inset: 0 0 auto 0; height: 250px; background: repeating-linear-gradient(135deg, #1d1b16 0 10px, #16140f 10px 20px); }
.crew-cover::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(23,21,26,.5), rgba(23,21,26,.2) 40%, var(--bg)); }
.crew-bar { position: relative; display: flex; align-items: center; justify-content: space-between; height: 44px; margin-top: 14px; }
.crew-ic { width: 38px; height: 38px; border-radius: 50%; background: rgba(23,21,26,.7); border: 0; color: var(--text); display: inline-flex; align-items: center; justify-content: center; font-size: 20px; cursor: pointer; letter-spacing: 1px; font-family: inherit; }
.crew-ic:first-child { font-size: 24px; padding-bottom: 3px; }
.crew-hero-body { position: relative; padding: 80px 0 0; display: flex; flex-direction: column; gap: 10px; }
.crew-season { font-size: 15px; }
.crew-hero-body h1 { margin: 0; font-size: 30px; font-weight: 700; letter-spacing: -0.035em; line-height: 1.15; }
.crew-sub { font-size: 14px; color: #c9c3b2; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.crew-intro { margin: 0; font-size: 14px; line-height: 1.6; color: var(--text-2); white-space: pre-wrap; }
.crew-stack { display: flex; align-items: center; gap: 12px; margin-top: 6px; font-size: 13px; color: var(--muted); }
.crew-stack b { color: var(--text); }
.crew-avis { display: flex; }
.crew-avis .pm-avi { border: 2px solid var(--bg); font-size: 11px !important; }
.crew-avis .pm-avi + .pm-avi { margin-left: -9px; }
.crew-stats { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 18px 0 0; }
.crew-stat { border-radius: 14px; background: var(--panel); border: 1px solid var(--line); padding: 12px 14px; display: flex; flex-direction: column; gap: 2px; }
.crew-stat span { font-size: 12px; color: var(--muted); }
.crew-stat b { font-size: 28px; line-height: 1.1; font-weight: 400; }
.crew-stat b:not(.serif) { font-size: 22px; font-weight: 700; letter-spacing: -0.02em; }
.crew-medals { margin-top: 10px; }
.crew-reqs { margin-top: 20px; }
.crew-reqs h2 { font-size: 16px; margin: 0 0 8px; }
.crew-req { display: flex; gap: 10px; align-items: center; padding: 10px 0; border-bottom: 1px solid #1a1814; }
.crew-req > div { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.crew-req > div span { font-size: 12.5px; color: var(--muted); }
.crew-tabs { display: flex; margin: 20px 0 0; border-bottom: 1px solid #24221c; overflow-x: auto; scrollbar-width: none; }
.crew-tabs button { flex: none; padding: 10px 14px 12px; margin-right: 6px; background: none; border: 0; color: var(--muted-2); font: inherit; font-size: 15px; cursor: pointer; }
.crew-tabs button:first-child { padding-left: 0; }
.crew-tabs button.on { color: var(--text); font-weight: 700; box-shadow: inset 0 -2px 0 var(--gold); }
.crew-pane { padding: 4px 0 0; }
.crew-write { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; padding: 14px 0; border-bottom: 1px solid #1a1814; }
.crew-write textarea { width: 100%; min-height: 70px; }
.crew-post { display: flex; gap: 10px; padding: 14px 0; border-bottom: 1px solid #1a1814; }
.crew-post:last-child { border-bottom: 0; }
.crew-post-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.crew-post-meta { font-size: 12px; color: var(--muted); display: flex; gap: 4px; align-items: center; flex-wrap: wrap; }
.crew-post-act { margin-left: auto; display: inline-flex; gap: 8px; }
.crew-post-act button, .crew-kick { background: none; border: 0; padding: 0; color: var(--muted-2); font: inherit; font-size: 12px; cursor: pointer; }
.crew-post-act button:hover, .crew-kick:hover { color: var(--coral); }
.crew-post-main p { margin: 0; font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.crew-member { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1a1814; }
.crew-member > a { flex: 1; min-width: 0; display: flex; align-items: center; gap: 6px; }
.crew-member .badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.crew-member .badge.REGULAR { padding: 0; }
.crew-role { font-size: 11px; color: var(--gold); border: 1px solid var(--gold-edge); border-radius: 4px; padding: 0 5px; }
.crew-member-pts { font-size: 18px; color: var(--text-2); }
.crew-season-now { display: flex; flex-direction: column; gap: 2px; padding: 16px; margin: 14px 0 6px; border-radius: 14px; background: radial-gradient(400px 120px at 0 0, rgba(212,175,55,.12), transparent 70%), var(--panel); border: 1px solid var(--gold-edge); }
.crew-season-now span { font-size: 12.5px; color: var(--muted); }
.crew-season-now b { font-size: 34px; line-height: 1.1; font-weight: 400; }
.crew-medal { display: flex; align-items: center; gap: 12px; padding: 12px 0; border-bottom: 1px solid #1a1814; font-size: 14px; }
.crew-medal-ic { font-size: 20px; }
.crew-medal .serif { margin-left: auto; font-size: 18px; color: var(--gold); }
.crew-empty { margin: 16px 0; font-size: 13.5px; color: var(--muted); }
.crew-cta { position: sticky; bottom: 0; z-index: 5; margin: 18px -22px 0; padding: 12px 22px 16px; border-top: 1px solid var(--line-soft); background: var(--bg); }
.crew-cta .btn { width: 100%; height: 54px; font-size: 16px; }
.crew-cta .btn[disabled] { opacity: .6; cursor: default; box-shadow: none; }

@media (max-width: 720px) {
  .crew-hero { margin: -24px -16px 0; padding: 0 20px; }
  .crew-cta { bottom: calc(64px + env(safe-area-inset-bottom, 0px)); margin: 18px -16px 0; padding: 12px 16px; }
  .crews-head h1 { font-size: 28px; }
  .crews-grid { grid-template-columns: 1fr; }
}

/* ---------- 친구와 고르기 (public/choose.js) ---------- */
.ch-eyebrow { display: block; font-size: 12px; letter-spacing: .04em; font-weight: 700; color: var(--gold); text-transform: uppercase; margin-bottom: 6px; }
.ch-sheet h3 { font-size: 1.3rem; }
.ch-sheet input { width: 100%; }
.ch-slots { display: flex; flex-direction: column; gap: 8px; margin-bottom: 10px; }
.ch-slot { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 8px 10px; border-radius: 12px; border: 1px dashed var(--line); background: transparent; }
.ch-slot.on { border-style: solid; border-color: var(--gold-edge); background: var(--panel); }
.ch-slot .thumb { font-size: 1rem; }
.ch-no { width: 20px; text-align: center; font-style: italic; font-size: 1.3rem; color: var(--gold); flex: none; }
.ch-slot:not(.on) .ch-no { color: var(--muted-2); }
.ch-slot-t { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.ch-slot-t b, .ch-row b { font-size: 13.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-slot-t span, .ch-row > span > span { font-size: 11.5px; }
.ch-x { border: 0; background: var(--panel-2); color: var(--muted); width: 28px; height: 28px; border-radius: 50%; cursor: pointer; flex: none; }
.ch-res { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ch-res .dm-lbl, #chpick .dm-lbl { display: block; margin: 6px 0 2px; }
.ch-row { display: flex; gap: 10px; align-items: center; padding: 9px 10px; border-radius: 12px; background: var(--panel); border: 1px solid #24221c; text-align: left; width: 100%; color: inherit; font: inherit; cursor: pointer; }
.ch-row > span:nth-child(2) { flex: 1; display: flex; flex-direction: column; min-width: 0; }
.ch-row .thumb { font-size: 1rem; }
.ch-row:hover { border-color: var(--gold-edge); }
.ch-row:disabled { opacity: .5; }
.ch-add { width: 28px; height: 28px; flex: none; border-radius: 50%; display: grid; place-items: center; background: var(--gold-tint); color: var(--gold-hi); font-weight: 700; }
.ch-crew-ic { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; background: var(--panel-2); color: var(--gold); flex: none; }
.ch-hours > * { padding: 9px 4px; }
.ch-link { display: flex; align-items: center; gap: 10px; padding: 10px 12px; border-radius: 12px; background: var(--panel); border: 1px solid var(--line); margin: 10px 0 4px; }
.ch-link span { flex: 1; min-width: 0; font-family: var(--mono); font-size: 12.5px; color: var(--text-2); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ch-share > button { display: flex; align-items: center; gap: 10px; }
.ch-share > button svg { color: var(--gold); }
#chpick { display: flex; flex-direction: column; gap: 6px; }
.ch-entry { margin-left: auto; }

.ch-pg { max-width: 640px; margin: 0 auto; }
.ch-head { position: relative; padding: 8px 0 18px; border-bottom: 1px solid var(--line-soft); margin-bottom: 16px; }
.ch-head h1 { font-size: 28px; line-height: 1.25; margin: 0 0 10px; padding-right: 84px; word-break: keep-all; }
.ch-meta { display: flex; flex-wrap: wrap; gap: 8px 12px; align-items: center; font-size: 13px; color: var(--muted); }
.ch-live { display: inline-flex; align-items: center; color: var(--text-2); }
.ch-live .dot { background: var(--lime); box-shadow: 0 0 0 4px rgba(143,227,160,.15); }
.ch-total { position: absolute; right: 0; top: 18px; text-align: right; display: flex; align-items: baseline; gap: 4px; }
.ch-total b { font-size: 46px; font-style: italic; color: var(--gold); line-height: 1; font-weight: 400; }
.ch-total span { color: var(--muted); font-size: 13px; }
.ch-list { display: flex; flex-direction: column; gap: 12px; }
.ch-card { padding: 14px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); display: flex; flex-direction: column; gap: 12px; transition: border-color .2s; }
.ch-card.lead { border-color: var(--gold-edge); background: linear-gradient(180deg, rgba(212,175,55,.08), var(--panel) 70%); box-shadow: 0 10px 30px rgba(212,175,55,.08); }
.ch-card.mine { outline: 1px solid var(--gold); outline-offset: -1px; }
.ch-card-top { display: flex; gap: 12px; align-items: center; }
.ch-card-top .thumb .rank-no { font-size: 1.15rem; top: 6px; right: 7px; }
.ch-card-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.ch-name, .ch-card-main > b { font-size: 16px; font-weight: 700; color: var(--text); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ch-lead { align-self: flex-start; display: inline-flex; align-items: center; gap: 4px; font-size: 11px; font-weight: 700; color: var(--gold-hi); background: var(--gold-tint); border: 1px solid var(--gold-edge); padding: 2px 8px; border-radius: var(--r-badge); }
.ch-crowd { display: flex; align-items: center; gap: 4px; }
.ch-votes { text-align: right; flex: none; display: flex; flex-direction: column; align-items: flex-end; }
.ch-votes b { font-size: 34px; font-style: italic; font-weight: 400; line-height: 1; color: var(--text); }
.ch-votes small { font-size: .5em; color: var(--muted); }
.ch-card.lead .ch-votes b { color: var(--gold); }
.ch-votes span { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ch-bar { height: 8px; border-radius: 4px; background: var(--line-soft); overflow: hidden; }
.ch-bar i { display: block; height: 100%; border-radius: 4px; background: var(--muted-2); transition: width .4s ease; }
.ch-card.lead .ch-bar i { background: linear-gradient(90deg, var(--gold-lo), var(--gold-hi)); }
.ch-vote { width: 100%; }
.ch-wide { display: block; width: 100%; text-align: center; margin-top: 14px; }
.ch-result { margin-top: 16px; padding: 14px 16px; border-radius: 14px; border: 1px solid var(--gold-edge); background: var(--gold-tint); text-align: center; font-size: 15px; }
.ch-result b { color: var(--gold-hi); }
.ch-result.muted { border-color: var(--line); background: var(--panel); }
.ch-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 18px; }
.ch-actions .btn { display: inline-flex; align-items: center; gap: 6px; }
.ch-note { margin: 14px 0 0; font-size: 12px; color: var(--muted-2); line-height: 1.6; }
.dm-link.ch-dm, .crew-post .ch-dm { display: inline-flex; align-items: center; gap: 6px; margin-top: 6px; padding: 8px 12px; border-radius: 12px; border: 1px solid var(--gold-edge); background: var(--gold-tint); color: var(--gold-hi); font-weight: 600; font-size: 13px; }
@media (max-width: 720px) {
  .ch-head h1 { font-size: 24px; padding-right: 70px; }
  .ch-total b { font-size: 38px; }
  .ch-votes b { font-size: 28px; }
}
.crew-write-act { display: flex; gap: 8px; }

/* ---------- 관리자 화면 (public/admin.js) — Night Edition ---------- */
.adm { max-width: 1080px; margin: 0 auto; }
.adm-head { padding: 4px 0 14px; }
.adm-eyebrow { display: block; font-size: 11.5px; letter-spacing: .16em; font-weight: 700; color: var(--gold); text-transform: uppercase; }
.adm-title { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 52px; line-height: 1; margin: 6px 0 0; color: var(--text); letter-spacing: -.01em; }
.adm-sub { margin: 10px 0 0; color: var(--muted); font-size: 14px; }
.adm-tabs { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding: 4px; margin: 0 0 20px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); }
.adm-tabs::-webkit-scrollbar { display: none; }
.adm-tabs .chip { flex: none; border-color: transparent; background: none; color: var(--muted); font-weight: 600; padding: 8px 14px; }
.adm-tabs .chip:hover { color: var(--text); box-shadow: none; }
.adm-tabs .chip.on { background: var(--text); color: var(--bg); border-color: var(--text); }
.adm-sec { margin-bottom: 22px; }
.adm-sec-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.adm-sec-head h2 { font-size: 17px; margin: 0; font-weight: 700; }
.adm-sec-head h2 .serif { font-size: 1.5em; font-style: italic; font-weight: 400; }
.adm-todo { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.adm-todo a { position: relative; display: flex; flex-direction: column; gap: 4px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--text); transition: border-color .2s; }
.adm-todo a b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 34px; line-height: 1; color: var(--muted-2); }
.adm-todo a span { font-size: 12.5px; color: var(--muted); }
.adm-todo a.hot { border-color: rgba(255,93,108,.45); background: linear-gradient(180deg, rgba(255,93,108,.08), var(--panel) 75%); }
.adm-todo a.hot b { color: var(--coral); }
.adm-todo a i { position: absolute; right: 14px; top: 12px; font-style: normal; color: var(--muted-2); font-size: 18px; }
.adm-todo a:hover { border-color: var(--gold-edge); }
.adm-stats { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.adm-stats.sm { margin-top: 16px; }
.adm-stat { display: flex; flex-direction: column; gap: 6px; padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); color: var(--text); }
a.adm-stat:hover { border-color: var(--gold-edge); }
.adm-stat b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 32px; line-height: 1; color: var(--gold); }
.adm-stat span { font-size: 12px; color: var(--muted); }
.adm-stat.alert b { color: var(--coral); }
.adm-card { padding: 18px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); margin-bottom: 18px; }
.adm-card h3 { margin: 0 0 6px; font-size: 16px; }
.adm-inline { display: flex; gap: 12px; align-items: center; flex-wrap: wrap; font-size: 13.5px; color: var(--text-2); }
.adm-inline > span { flex: 1; min-width: 220px; }
.adm-form { max-width: 620px; }
.adm-form label { display: block; font-size: 12.5px; color: var(--muted); margin: 12px 0 6px; font-weight: 600; }
.adm-form input, .adm-form select, .adm-form textarea { width: 100%; }
.adm-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 0 12px; }
.adm-grid3 { display: grid; grid-template-columns: 1fr 1fr 1.4fr; gap: 0 12px; }
.adm-dau-wrap { display: flex; gap: 20px; align-items: flex-end; }
.adm-dau-now { display: flex; flex-direction: column; gap: 4px; flex: none; padding-bottom: 18px; }
.adm-dau-now b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 46px; line-height: 1; }
.adm-dau-now span { font-size: 12px; color: var(--muted); }
.adm-dau { flex: 1; display: flex; gap: 8px; align-items: flex-end; height: 104px; }
.adm-dau > div { flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; gap: 4px; height: 100%; }
.adm-dau i { display: block; width: 100%; max-width: 36px; border-radius: 6px 6px 2px 2px; background: var(--line); }
.adm-dau i.now { background: linear-gradient(180deg, var(--gold-hi), var(--gold-lo)); }
.adm-dau-n { font-family: var(--serif); font-style: italic; font-size: 13px; color: var(--muted); }
.adm-dau-d { font-size: 11px; color: var(--muted-2); }
.adm-count { font-size: 13px; color: var(--muted); margin: 4px 0 10px; }
.adm-count b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--text); margin: 0 2px; }
.adm-help { font-size: 13px; color: var(--muted); line-height: 1.65; margin: 0 0 14px; }
.adm-help b { color: var(--text-2); }
.adm-empty { display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 48px 16px; border: 1px dashed var(--line); border-radius: var(--radius); color: var(--muted); font-size: 14px; }
.adm-search { display: flex; gap: 8px; margin-bottom: 14px; }
.adm-search input { flex: 1; min-width: 0; }
.adm-search select { width: auto; }
.adm-filters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.adm-row { padding: 14px 16px; border-radius: var(--radius); background: var(--panel); border: 1px solid var(--line); margin-bottom: 10px; display: flex; flex-direction: column; gap: 10px; }
.adm-row.hot { border-color: rgba(255,93,108,.4); }
.adm-row.dim { opacity: .5; }
.adm-row-top { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; }
.adm-row-id { flex: 1; min-width: 160px; display: flex; flex-direction: column; gap: 2px; }
.adm-row-id b { font-size: 15px; }
.adm-row-title { font-size: 15px; }
.adm-meta { font-size: 12.5px; color: var(--muted); }
.adm-row-top > .adm-meta { flex: 1; }
.adm-flag { margin-left: auto; font-size: 12px; color: var(--muted); }
.adm-flag b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 22px; color: var(--coral); margin-right: 2px; }
.adm-quote { white-space: pre-wrap; font-size: 14px; color: var(--text-2); padding: 10px 12px; border-left: 2px solid var(--line); background: var(--bg); border-radius: 0 10px 10px 0; }
.adm-img { max-height: 160px; max-width: 100%; border-radius: 10px; align-self: flex-start; }
.adm-reasons { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-reasons span { font-size: 12px; padding: 4px 10px; border-radius: 999px; background: var(--panel-2); color: var(--text-2); }
.adm-reasons em { font-style: normal; color: var(--muted-2); }
.adm-note { font-size: 12.5px; color: var(--muted); }
.adm-note.gold, .adm-dl .gold { color: var(--gold); }
.adm-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adm-gap { flex: 1; }
.adm-sus { display: inline-flex; gap: 6px; }
.adm-sus select { width: auto; padding: 5px 8px; }
.adm-avatar { width: 36px; height: 36px; border-radius: 50%; flex: none; display: grid; place-items: center; background: var(--panel-2); color: var(--gold); font-weight: 700; border: 1px solid var(--line); }
.adm-badges { display: inline-flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.adm-dl { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; font-size: 13px; }
.adm-dl dt { color: var(--muted-2); }
.adm-dl dd { margin: 0; color: var(--text-2); word-break: break-all; }
.adm-date { width: 46px; flex: none; display: flex; flex-direction: column; align-items: center; padding: 6px 0; border-radius: 10px; background: var(--panel-2); border: 1px solid var(--line); }
.adm-date b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1; color: var(--gold); }
.adm-date span { font-size: 10.5px; color: var(--muted); }
.adm-mini { display: flex; flex-direction: column; align-items: flex-end; min-width: 48px; }
.adm-mini b { font-family: var(--serif); font-style: italic; font-weight: 400; font-size: 24px; line-height: 1; color: var(--gold); }
.adm-mini span { font-size: 11px; color: var(--muted); }
.adm-link { font-size: 12.5px; color: var(--gold); word-break: break-all; }
.adm-words { display: flex; flex-wrap: wrap; gap: 6px; }
.adm-words .chip a { margin-left: 6px; color: var(--muted-2); }
.adm-words .chip a:hover { color: var(--coral); }
.adm-bars { display: flex; flex-direction: column; gap: 6px; }
.adm-bar { position: relative; display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; background: var(--bg); overflow: hidden; font-size: 13px; }
.adm-bar i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--gold-tint); }
.adm-bar span, .adm-bar b { position: relative; }
.adm-bar span { flex: 1; }
.adm-bar b { font-family: var(--serif); font-style: italic; font-weight: 400; color: var(--gold); }
.ad-badge { border: 1px solid var(--gold); color: var(--gold); background: transparent; }
.btn.on-gold { border-color: var(--gold-edge); color: var(--gold-hi); }
/* 업장 표: 데스크톱은 표, 모바일은 카드 */
.adm-table { border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden; background: var(--panel); }
.adm-tr { display: grid; grid-template-columns: minmax(180px, 1.4fr) minmax(120px, 1fr) minmax(130px, 1fr) auto; gap: 12px; align-items: center; padding: 10px 16px; border-top: 1px solid var(--line-soft); }
.adm-tr:first-child { border-top: 0; }
.adm-th { background: var(--panel-2); font-size: 11.5px; font-weight: 700; letter-spacing: .1em; color: var(--muted-2); padding-top: 9px; padding-bottom: 9px; }
.adm-tr.dim { opacity: .45; }
.adm-td-main { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.adm-td-main b { font-size: 14px; }
.adm-tr .adm-acts { justify-content: flex-end; }
/* 운영 기록: 데스크톱 표 / 모바일 카드 */
.adm-rtable { border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
.adm-rtable table { font-size: 13px; }
.adm-rtable th { text-align: left; padding: 10px 12px; background: var(--panel-2); color: var(--muted-2); font-size: 11.5px; letter-spacing: .1em; font-weight: 700; border-bottom: 1px solid var(--line); }
.adm-rtable td { padding: 10px 12px; border-bottom: 1px solid var(--line-soft); vertical-align: top; }
.adm-rtable tr:last-child td { border-bottom: 0; }
.adm-action { font-weight: 600; color: var(--text); }
/* features.js 의 운영 도구 카드(좌표·제안·페스티벌)도 같은 톤으로 */
.adm-body .card { background: var(--panel); border: 1px solid var(--line); border-radius: var(--radius); padding: 14px 16px; }
.adm-body .section-head h2 { font-size: 16px; }
@media (max-width: 720px) {
  .adm-title { font-size: 40px; }
  .adm-tabs { margin-left: -16px; margin-right: -16px; border-radius: 0; border-left: 0; border-right: 0; padding: 6px 12px; }
  .adm-todo { grid-template-columns: 1fr 1fr; }
  .adm-stats { grid-template-columns: 1fr 1fr; }
  .adm-todo a b, .adm-stat b { font-size: 28px; }
  .adm-grid2, .adm-grid3 { grid-template-columns: 1fr; }
  .adm-dau-wrap { flex-direction: column; align-items: stretch; gap: 8px; }
  .adm-dau-now { padding-bottom: 0; flex-direction: row; align-items: baseline; gap: 8px; }
  .adm-acts .adm-gap { display: none; }
  .adm-table { border: 0; background: none; overflow: visible; }
  .adm-th { display: none; }
  .adm-tr { grid-template-columns: 1fr; gap: 8px; padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .adm-tr:first-child { border-top: 1px solid var(--line); }
  .adm-tr .adm-acts { justify-content: flex-start; }
  .adm-rtable { border: 0; background: none; }
  .adm-rtable table, .adm-rtable tbody, .adm-rtable tr, .adm-rtable td { display: block; width: 100%; }
  .adm-rtable thead { display: none; }
  .adm-rtable tr { padding: 12px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--radius); background: var(--panel); }
  .adm-rtable td { padding: 2px 0; border: 0; display: flex; gap: 10px; }
  .adm-rtable td:empty { display: none; }
  .adm-rtable td::before { content: attr(data-th); flex: none; width: 44px; color: var(--muted-2); font-size: 11.5px; font-weight: 600; }
}
/* ---------- 회원 아바타 사진 (avatar.js avatarHtml) ---------- */
.pm-avi.av { overflow: hidden; position: relative; }
.pm-avi.av img { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: 50%; }
.pm-avi.av.has-img { background: var(--panel-2) !important; }

/* ---------- 프로필 /u/:id ---------- */
.up-page { max-width: 560px; margin: 0 auto; position: relative; }
.up-cover { position: relative; height: 140px; margin: 0; border-radius: 22px; overflow: hidden;
  background: linear-gradient(180deg, transparent 30%, var(--bg)), repeating-linear-gradient(135deg, #1d1b16 0 10px, #16140f 10px 20px); }
.up-cover-glow { position: absolute; inset: 0; background: radial-gradient(240px 160px at 50% 100%, rgba(212,175,55,.22), transparent 70%); }
.up-more { position: absolute; top: 12px; right: 12px; width: 36px; height: 36px; border-radius: 50%; border: 1px solid var(--line); background: rgba(23,21,26,.7); color: var(--text-2); font-size: 18px; line-height: 1; cursor: pointer; }
.up-id { position: relative; display: flex; flex-direction: column; align-items: center; gap: 10px; margin-top: -56px; padding-bottom: 18px; text-align: center; }
.up-avi .pm-avi.ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); color: var(--gold-hi); }
.up-name { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: center; }
.up-name b { font-size: 1.5rem; letter-spacing: -0.02em; }
.up-bio { margin: 0; max-width: 360px; font-size: .9375rem; color: var(--text-2); line-height: 1.5; word-break: keep-all; overflow-wrap: anywhere; }
.up-genres { display: flex; gap: 6px; flex-wrap: wrap; justify-content: center; }
.up-genres .chip { padding: 4px 11px; font-size: .8rem; color: var(--text-2); }
.up-badges { font-size: 1.3rem; display: flex; gap: 6px; }
.up-dj { font-size: .875rem; color: var(--gold); }
.up-warn { margin: 0; padding: 6px 12px; border-radius: 10px; background: rgba(255,93,108,.1); color: var(--coral); font-size: .8125rem; }
.up-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; margin-top: 4px; }
.up-actions .btn { min-width: 96px; display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.up-stats { display: grid; padding: 14px 0; border-top: 1px solid #24221c; border-bottom: 1px solid #24221c; text-align: center; }
.up-stats > div { display: flex; flex-direction: column; gap: 2px; }
.up-stats > div + div { border-left: 1px solid #24221c; }
.up-stats b { font-size: 1.25rem; font-weight: 700; }
.up-stats span { font-size: .75rem; color: var(--muted); }
.up-note { margin: 8px 0 0; font-size: .75rem; color: var(--muted-2); text-align: center; }
.me-panel .up-note { text-align: left; margin: 0; }
.up-manner { margin: 16px 0 0; padding: 14px 16px; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); }
.up-manner h3 { margin: 0 0 10px; font-size: .875rem; color: var(--muted); font-weight: 600; }
.up-manner > div { display: flex; gap: 6px; flex-wrap: wrap; }
.up-mtag { padding: 5px 11px; border-radius: 99px; background: var(--gold-tint); box-shadow: inset 0 0 0 1px var(--gold-edge); color: var(--gold-hi); font-size: .8125rem; }
.up-mtag b { margin-left: 2px; }
.up-tabs { margin-top: 18px; }
.up-empty { margin: 18px 0 6px; text-align: center; color: var(--muted); font-size: .875rem; }
.up-center { text-align: center; margin: 0; }
.up-rev { font-size: .75rem; display: flex; gap: 6px; align-items: center; }
.up-crew-ic { width: 48px; height: 48px; border-radius: 10px; flex: none; display: flex; align-items: center; justify-content: center; color: var(--gold); background: var(--gold-tint); }
.up-foot { margin: 26px 0 8px; text-align: center; font-size: .75rem; color: var(--muted-2); }
.fd-stars { color: var(--gold); letter-spacing: 1px; font-size: .8rem; }
.up-sheet { display: flex; flex-direction: column; padding: 6px 0; }
.up-sheet-row { background: none; border: 0; border-bottom: 1px solid var(--line-soft); color: var(--text); font: inherit; font-size: 1rem; padding: 16px 4px; text-align: left; cursor: pointer; }
.up-sheet-row:first-child { color: var(--coral); }
.up-sheet-row:last-child { border-bottom: 0; color: var(--muted); }

/* 프로필 편집 시트 */
.up-edit { display: flex; flex-direction: column; gap: 8px; padding-top: 4px; }
.up-edit h3 { margin: 0 0 6px; font-size: 1.125rem; }
.up-edit label { margin: 6px 0 0; }
.up-edit-avi { display: flex; gap: 16px; align-items: center; padding: 6px 0 4px; }
.up-edit-avi .pm-avi.ring { box-shadow: 0 0 0 3px var(--bg), 0 0 0 5px var(--gold); color: var(--gold-hi); }
.up-edit-avi p { margin: 8px 0 0; }
.up-edit-row { display: flex; gap: 8px; flex-wrap: wrap; }
.up-edit-row label { margin: 0; cursor: pointer; }
.up-edit p.muted { margin: 0; }
.up-gchips { display: flex; gap: 6px; flex-wrap: wrap; }
.up-gchips .chip { cursor: pointer; font: inherit; font-size: .84rem; color: var(--text-2); }
.up-gchips .chip.on { color: var(--bg); }
.up-switch { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 14px; background: var(--panel); border: 1px solid var(--line); cursor: pointer; color: var(--text); margin-top: 10px !important; }
.up-switch input { width: 20px; height: 20px; margin: 2px 0 0; flex: none; accent-color: var(--gold); }
.up-switch span { display: flex; flex-direction: column; gap: 3px; }
.up-switch small { color: var(--muted); font-size: .78rem; line-height: 1.45; }
.up-edit-btns { display: flex; gap: 8px; justify-content: flex-end; margin-top: 8px; }
.up-edit-btns .btn { min-width: 88px; }

/* ---------- 피드 /feed ---------- */
.fd-page { max-width: 600px; margin: 0 auto; }
.fd-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fd-seg { margin: 0 0 16px; max-width: 320px; }
.fd-list { display: flex; flex-direction: column; gap: 12px; }
.fd-card { display: flex; flex-direction: column; gap: 10px; padding: 14px 16px 16px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.fd-card header { display: flex; justify-content: space-between; align-items: center; gap: 10px; }
.fd-who { display: flex; align-items: center; gap: 10px; color: var(--text); min-width: 0; }
.fd-name { display: flex; align-items: center; gap: 6px; min-width: 0; }
.fd-name b { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-name .badge { font-size: 10px; padding: 1px 5px; border-radius: 3px; }
.fd-time { flex: none; font-size: .75rem; color: var(--muted-2); }
.fd-kind { display: flex; align-items: center; gap: 8px; font-size: .8125rem; color: var(--muted); flex-wrap: wrap; }
.fd-kind svg { color: var(--gold); }
.fd-body { display: flex; flex-direction: column; gap: 6px; color: var(--text); }
.fd-body:hover .fd-title { color: var(--gold-hi); }
.fd-title { font-size: 1rem; line-height: 1.4; }
.fd-text { margin: 0; font-size: .875rem; color: #c9c3b2; line-height: 1.55; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; overflow-wrap: anywhere; }
.fd-img { display: block; border-radius: 12px; overflow: hidden; max-height: 280px; background: var(--panel-2); }
.fd-img img { width: 100%; max-height: 280px; object-fit: cover; display: block; }
.fd-meta { display: flex; align-items: center; gap: 5px; font-size: .75rem; color: var(--muted); }
.fd-club { display: flex; align-items: center; gap: 10px; padding: 8px; border-radius: 12px; background: var(--bg); border: 1px solid var(--line-soft); color: var(--text); }
.fd-club:hover { border-color: var(--gold-edge); }
.fd-club > span:last-child { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.fd-club b { font-size: .9375rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fd-club small { font-size: .75rem; color: var(--muted); }
.fd-club .thumb { font-size: 1.1rem; }
.fd-more { display: block; width: 100%; margin: 14px 0 0; }
.fd-end { text-align: center; color: var(--muted-2); font-size: .8rem; margin: 18px 0 0; }
.fd-sec { margin: 0 0 22px; }
.fd-sec h2 { font-size: 1rem; margin: 0 0 10px; }
.fd-sec h2 small { font-size: .75rem; color: var(--muted); font-weight: 400; margin-left: 4px; }
.fd-chip { cursor: pointer; display: inline-flex; align-items: center; }
.fd-chip input { position: absolute; opacity: 0; pointer-events: none; width: 1px; height: 1px; }
.fd-rows { display: flex; flex-direction: column; border-radius: 16px; background: var(--panel); border: 1px solid var(--line); overflow: hidden; }
.fd-row { display: flex; justify-content: space-between; gap: 10px; align-items: baseline; padding: 12px 16px; color: var(--text); }
.fd-row + .fd-row { border-top: 1px solid var(--line-soft); }
.fd-row b { font-size: .9rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fd-row span { flex: none; font-size: .78rem; color: var(--muted); }
.fd-row span.gold { color: var(--gold); }
@media (max-width: 720px) {
  .up-cover { height: 120px; margin: -8px -16px 0; border-radius: 0 0 22px 22px; }
}
/* 함께했던 사람 추천 */
.sf-strip { margin: 0 0 16px; }
.sf-h { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: 8px; }
.sf-row { display: flex; gap: 10px; overflow-x: auto; padding-bottom: 6px; scrollbar-width: none; }
.sf-card { flex: none; width: 128px; display: flex; flex-direction: column; align-items: center; gap: 6px; padding: 14px 10px; border: 1px solid var(--line); border-radius: 14px; background: var(--panel); text-align: center; }
.sf-card a { display: flex; flex-direction: column; align-items: center; gap: 6px; color: inherit; text-decoration: none; }
.sf-card b { max-width: 108px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-card .muted { min-height: 2.4em; }

/* ---------- SNS 2차: 프로필 사진 여러 장 · 타임라인 · 태그 요청 (public/timeline.js) ---------- */
.ph-strip { display: flex; gap: 8px; width: 100%; max-width: 520px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 6px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.ph-strip::-webkit-scrollbar { display: none; }
.ph-cell { position: relative; flex: 0 0 auto; width: 88px; height: 88px; padding: 0; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel-2); scroll-snap-align: start; cursor: zoom-in; }
.ph-cell img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ph-main { position: absolute; left: 6px; top: 6px; padding: 2px 6px; border-radius: var(--r-badge); background: rgba(23,21,26,.78); color: var(--gold-hi); font-size: .68rem; font-weight: 700; }
.up-avi[role="button"] { cursor: zoom-in; }
.ph-view { display: flex; flex-direction: column; gap: 12px; padding: 4px 0 8px; }
.ph-stage { display: flex; align-items: center; justify-content: center; min-height: 240px; max-height: 66vh; border-radius: 16px; overflow: hidden; background: var(--canvas); touch-action: pan-y; }
.ph-stage img { max-width: 100%; max-height: 66vh; object-fit: contain; display: block; }
.ph-bar { display: flex; align-items: center; justify-content: center; gap: 16px; }
.ph-nav { min-width: 44px; min-height: 44px; font-size: 1.4rem; line-height: 1; }
.ph-count { font-family: var(--serif); font-style: italic; color: var(--text-2); min-width: 48px; text-align: center; }
.ph-acts { display: flex; justify-content: flex-end; gap: 8px; }

.pg-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.pg-cell { position: relative; display: flex; flex-direction: column; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: var(--panel); }
.pg-cell img { width: 100%; aspect-ratio: 1; object-fit: cover; display: block; }
.pg-add, .pg-empty { aspect-ratio: 1; }
.pg-cell.off img { opacity: .35; }
.pg-cell.drag { opacity: .5; outline: 2px dashed var(--gold-edge); }
.pg-hid { position: absolute; left: 6px; top: 34px; right: 6px; font-size: .7rem; color: var(--coral); font-weight: 700; }
.pg-acts { display: flex; border-top: 1px solid var(--line-soft); }
.pg-btn { flex: 1; min-width: 0; min-height: 44px; border: 0; background: none; color: var(--text-2); font-size: 1rem; cursor: pointer; }
.pg-btn:hover:not(:disabled) { background: var(--panel-2); color: var(--text); }
.pg-btn[data-del] { color: var(--coral); }
.pg-btn:disabled { opacity: .3; cursor: default; }
.pg-add { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; border-style: dashed; border-color: var(--gold-edge); color: var(--gold-hi); cursor: pointer; font-size: .8rem; margin: 0 !important; }
.pg-plus { font-size: 1.6rem; line-height: 1; }
.pg-empty { border-style: dashed; opacity: .4; }

.tl-compose { display: flex; flex-direction: column; gap: 10px; padding: 14px; margin-bottom: 14px; border-radius: 18px; background: var(--panel); border: 1px solid var(--line); }
.tl-compose textarea { width: 100%; min-height: 84px; resize: vertical; box-sizing: border-box; }
.tl-compose p { margin: 0; }
.tl-tools { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.tl-tool { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; padding: 0 12px; border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--bg); color: var(--text-2); font: inherit; font-size: .85rem; cursor: pointer; margin: 0 !important; }
.tl-tool:hover { border-color: var(--gold-edge); color: var(--text); }
.tl-tools select { width: auto; min-height: 44px; margin: 0; }
.tl-cnt { margin-left: auto; }
.tl-post { min-height: 44px; }
.tl-thumb { position: relative; display: inline-block; width: 96px; height: 96px; border-radius: 12px; overflow: hidden; border: 1px solid var(--line); }
.tl-thumb img { width: 100%; height: 100%; object-fit: cover; }
.tl-thumb button { position: absolute; right: 4px; top: 4px; width: 32px; height: 32px; border: 0; border-radius: 50%; background: rgba(23,21,26,.75); color: var(--text); cursor: pointer; }
.tl-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.tl-chips:empty { display: none; }
.tl-chip { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 10px; border-radius: 999px; border: 1px solid var(--gold-edge); background: var(--gold-tint); color: var(--gold-hi); font-size: .8rem; }
.tl-chip.person { border-color: var(--line); background: var(--panel-2); color: var(--text-2); }
.tl-chip.pending { border-style: dashed; opacity: .75; }
.tl-chip small { color: var(--muted); font-size: .7rem; }
.tl-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; min-width: 24px; min-height: 24px; }
.tl-text { white-space: normal; overflow-wrap: anywhere; }
.tl-vis { margin-right: 6px; padding: 1px 6px; border-radius: var(--r-badge); border: 1px solid var(--line); color: var(--muted); font-size: .68rem; }
.tl-foot { display: flex; align-items: center; gap: 6px; }
.tl-sp { flex: 1; }
.tl-act { display: inline-flex; align-items: center; gap: 6px; min-height: 44px; min-width: 44px; padding: 0 10px; border: 0; border-radius: 12px; background: none; color: var(--muted); font: inherit; font-size: .84rem; cursor: pointer; }
.tl-act:hover { color: var(--text); background: var(--panel-2); }
.tl-act.on { color: var(--coral); }
.tl-act.on svg { fill: currentColor; }
.tl-list { display: flex; flex-direction: column; gap: 12px; }
.tl-pick { display: flex; flex-direction: column; gap: 10px; }
.tl-pick h3 { margin: 0; }
.tl-res { display: flex; flex-direction: column; gap: 4px; max-height: 50vh; overflow-y: auto; }
.tl-row { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 12px; border: 1px solid var(--line-soft); background: var(--bg); color: var(--text); font: inherit; text-align: left; cursor: pointer; margin: 0 !important; }
.tl-row small { color: var(--muted); font-size: .75rem; margin-left: auto; }
.tl-row input { width: 22px; height: 22px; margin: 0 0 0 auto; accent-color: var(--gold); }
.tl-row.off { opacity: .5; cursor: default; }
button.tl-row { flex-direction: column; align-items: flex-start; gap: 2px; }
button.tl-row small { margin-left: 0; }

.tg-req { display: flex; flex-direction: column; gap: 8px; padding: 14px; margin-bottom: 14px; border-radius: 18px; border: 1px solid var(--gold-edge); background: var(--gold-tint); }
.tg-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.tg-main { flex: 1 1 160px; display: flex; flex-direction: column; gap: 2px; min-width: 0; font-size: .88rem; }
.tg-main small { color: var(--muted); font-size: .75rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tg-btns { display: flex; gap: 6px; }
.tg-btns .btn { min-height: 44px; }