/* =========================================================
   와썹 관리자 — 페이지별 스타일
   ========================================================= */

/* ---------- 공통: 페이지 머리 · 섹션 · 카드 그리드 ---------- */
.page-head { display: flex; flex-wrap: wrap; align-items: flex-end; justify-content: space-between; gap: 12px; }
.page-head .caption { margin-top: 2px; }
.sec { display: flex; flex-direction: column; gap: 12px; }
.sec-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; }
.card-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.card-head .ttl { display: flex; align-items: center; gap: 8px; }
.card-head.mb4 { margin-bottom: 4px; }
.card-head.mb12 { margin-bottom: 12px; }
.mt4 { margin-top: 4px; }
.mt8 { margin-top: 8px; }
.mt12 { margin-top: 12px; }
.mt16 { margin-top: 16px; }

/* 카드 그리드: 칸 최소 폭만 다르게 (좁아지면 한 줄에 하나) */
.grid { display: grid; gap: 12px; grid-template-columns: repeat(auto-fit, minmax(min(var(--col, 240px), 100%), 1fr)); }
.grid.g180 { --col: 180px; }
.grid.g240 { --col: 240px; }
.grid.g380 { --col: 380px; gap: 16px; }
.grid.g460 { --col: 460px; gap: 16px; }
.split2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }

/* ---------- 대시보드 (index.html) ---------- */
.dash-ratio-head { display: flex; justify-content: space-between; font-size: 12px; margin-bottom: 6px; }
.dash-ratio-head b { color: var(--danger); }
.dash-ratio { position: relative; }
.dash-ratio .mark { position: absolute; top: -4px; width: 2px; height: 16px; background: var(--ink); }
.dash-ratio-scale { display: flex; justify-content: space-between; margin-top: 4px; }
.dash-payout { margin-top: 12px; padding: 10px 12px; display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; }
.dash-win { align-items: center; }
.dash-win .r { text-align: right; }
.dash-wallets { display: flex; flex-direction: column; gap: 10px; }
.dash-wallet-top { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 8px; font-size: 12px; }
.dash-wallet-top .cnt { color: var(--danger); }
.dash-wallet-ids { margin-top: 4px; color: var(--ink-2); }
.tbl .minus { color: var(--ink-2); }

/* 현재 접속 팝업 */
.online-tools { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.online-tools .inp { width: 280px; max-width: 100%; }
.online-legend { display: inline-flex; align-items: center; gap: 8px; color: var(--ink-2); }

/* ---------- 손익 정산 (pnl.html) ---------- */
.count.count-risk { background: var(--danger-soft); color: var(--danger); }
.pnl-sum { display: grid; grid-template-columns: minmax(0, 1.25fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.pnl-wf { align-items: center; }
.pnl-wf.is-sub { padding-left: 16px; }
.pnl-wf-l { min-width: 0; }
.pnl-wf-r { display: flex; align-items: center; gap: 12px; flex: none; }
.pnl-src { width: 92px; text-align: right; }
@media (max-width: 1023px) { .pnl-sum { grid-template-columns: minmax(0, 1fr); } }
@media (max-width: 599px) {
  .pnl-wf { flex-wrap: wrap; }
  .pnl-wf-r { margin-left: auto; }
  .pnl-src { width: auto; }
}

/* ---------- 회원 (members · signup · loginlog) ---------- */
.online-mark { display: inline-flex; align-items: center; gap: 6px; font-weight: 600; }
.grid3 { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.grid4 { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; }
.kcard { padding: 14px; }
.kcard .kpi { font-size: 18px; }
.sub-title { font-size: 12px; line-height: 18px; font-weight: 700; color: var(--ink); }
.md-head { display: flex; align-items: flex-start; gap: 12px; }
.md-ava { width: 48px; height: 48px; border-radius: 50%; background: var(--raised); flex: none; display: flex; align-items: center; justify-content: center; font-weight: 800; color: var(--ink-2); }
.md-who { flex: 1 1 auto; min-width: 0; }
.md-chips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.md-chips > b { font-size: 15px; }
.chip.ink { border-color: var(--ink); color: var(--ink); }
.md-ngr { text-align: right; flex: none; }
.md-ngr .kpi { font-size: 18px; }
.donut-row { display: flex; flex-wrap: wrap; align-items: center; gap: 32px; }
.donut-row svg { flex: none; }
.donut-legend { flex: 1 1 280px; display: flex; flex-direction: column; gap: 2px; }
.swatch { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex: none; }
.filter-row { display: flex; flex-wrap: wrap; gap: 8px; }
.filter-row .inp { width: 130px; }
.filter-row .inp[type="date"] { width: 150px; }
.bet-detail td { background: var(--chrome-2); padding: 10px 12px; white-space: normal; }
.tbl tbody tr.bet-detail:hover { background: transparent; }
.fold-list { display: flex; flex-direction: column; gap: 6px; }
.fold { display: flex; justify-content: space-between; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.fold > span:first-child { color: var(--ink-2); }
.fold .odd-bad { color: var(--danger); margin-left: 8px; }
.path-row { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.path-row .box { padding: 6px 10px; }
.path-row .me { padding: 6px 10px; border-radius: var(--radius-md); background: var(--ink); color: var(--surface); font-weight: 700; }
.path-row .me small, .path-row .box small { margin-right: 6px; font-size: 12px; }
.path-row .me small { opacity: 0.7; }
.path-row .box small { color: var(--ink-3); }
.memo { padding: 12px; }
.memo .caption { display: flex; justify-content: space-between; gap: 8px; }
.memo p { margin-top: 4px; }
.qa { overflow: hidden; padding: 0; }
.qa-head { width: 100%; display: flex; justify-content: space-between; align-items: center; gap: 8px; padding: 10px 12px; border: 0; background: transparent; color: inherit; font: inherit; cursor: pointer; text-align: left; }
.qa-head .meta { display: flex; align-items: center; gap: 8px; flex: none; }
.qa-head .meta::after { content: "▾"; font-size: 12px; color: var(--ink-3); }
.qa-head[aria-expanded="true"] .meta::after { content: "▴"; }
.qa-body { border-top: 1px solid var(--line); padding: 10px 12px; display: flex; flex-direction: column; gap: 8px; }
.form2 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; }
.label.between { display: flex; justify-content: space-between; gap: 8px; }
.inp.ro { display: flex; align-items: center; background: var(--raised); border-color: var(--line); color: var(--ink-2); }
textarea.inp { height: auto; padding: 10px 12px; resize: vertical; }
.inp.r { text-align: right; }
.row-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.row-btns .push { margin-left: auto; }
.end { display: flex; justify-content: flex-end; }
.lim-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.lim { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 10px 12px; border-radius: var(--radius-md); border: 1px solid var(--line); }
.lim.is-off { border-color: var(--danger-line); background: var(--danger-soft); }
.lim.is-off .caption { color: var(--danger); font-weight: 700; }
.rate-inp { display: inline-flex; align-items: center; gap: 6px; }
.rate-inp .inp { width: 96px; height: 32px; text-align: right; }
.rate-inp .inp:disabled { opacity: 0.5; }
.seg { display: flex; }
.seg .tab { flex: 1; justify-content: center; }
.signup-mode { padding: 16px; display: flex; flex-wrap: wrap; align-items: center; gap: 16px; }
.signup-mode > div:first-child { flex: 1 1 320px; min-width: 0; }
.signup-mode .tab { min-width: 110px; justify-content: center; }
.sel-bar { display: flex; align-items: center; gap: 8px; }
.ip-group { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ip-group-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; }
.ip-group-head > div { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.ip-group-head .ip { font-size: 15px; }
/* 회원 직접 등록 팝업 */
.modal-box.madd { max-width: 640px; }
.req { color: var(--danger); }
.inp-row { display: flex; gap: 6px; }
.inp-row .inp { flex: 1 1 auto; min-width: 0; }
.inp-row .btn.sm { height: 36px; }
.check-line { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; cursor: pointer; }
.caption.ok-msg { color: var(--success); font-weight: 600; }
.caption.bad-msg { color: var(--danger); font-weight: 600; }
.form12 { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 2fr); gap: 12px; }
@media (max-width: 767px) { .form12 { grid-template-columns: minmax(0, 1fr); } }

/* ---------- 총판 (tree · partners · rates · settle · pwithdraw) ---------- */
.grid.g170 { --col: 170px; }
.grid.g320 { --col: 320px; }
.lvbox { padding: 4px 10px; font-weight: 600; }
.tree-wrap { display: grid; grid-template-columns: minmax(260px, 320px) minmax(0, 1fr); gap: 16px; align-items: start; }
.tree-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.tree-search { padding: 4px 4px 8px; }
[data-tree] { display: flex; flex-direction: column; gap: 4px; }
.tnode { display: flex; align-items: center; gap: 4px; padding: 0 8px 0 calc(8px + var(--d, 0) * 16px); border-radius: var(--radius-md); }
.tnode.is-active { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.tnode-caret { width: 18px; height: 24px; flex: none; padding: 0; border: 0; background: none; color: var(--ink-3); font-size: 10px; text-align: center; cursor: pointer; }
.tnode-caret[aria-expanded="true"]::before { content: "▾"; }
.tnode-caret[aria-expanded="false"]::before { content: "▸"; }
.tnode-btn { flex: 1 1 auto; min-width: 0; height: 34px; padding: 0; border: 0; background: transparent; display: flex; align-items: center; gap: 8px; cursor: pointer; text-align: left; color: var(--ink-2); font: inherit; font-weight: 500; }
.tnode-btn:hover { color: var(--ink); }
.tnode.is-active .tnode-btn { color: var(--ink); font-weight: 700; }
.tnode-name { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tnode-btn .caption { margin-left: auto; }
.tree-empty { padding: 8px; }
.tree-detail { padding: 20px; display: flex; flex-direction: column; gap: 20px; }
.tree-detail-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: 12px; }
.kbox { padding: 12px; }
.kbox .kpi { font-size: 18px; }
.ap-rates { display: grid; grid-template-columns: 72px minmax(0, 1fr) minmax(0, 1fr); align-items: center; gap: 8px; }
.rates-tbl th.grp { text-align: center; }
.rates-tbl .sep { border-left: 1px solid var(--line); }
.rates-tbl td.rc { vertical-align: top; }
.rname { display: flex; align-items: center; gap: 8px; padding-left: calc(var(--d, 0) * 18px); }
.sel-sm { width: 104px; height: 32px; padding: 0 8px; }
.rcell { width: 84px; }
.rcell-off { width: 84px; height: 32px; display: flex; align-items: center; justify-content: center; border: 1px dashed var(--line); border-radius: var(--radius-sm); color: var(--ink-3); }
.rcell-in { position: relative; display: block; }
.rcell-in .inp { height: 32px; padding: 0 22px 0 8px; text-align: right; }
.rcell-in .pct { position: absolute; right: 8px; top: 7px; }
.rcell-sub { display: block; font-size: 11px; }
.rcell.is-bad .inp { border-color: var(--danger); background: var(--danger-soft); color: var(--danger); font-weight: 700; }
.rcell.is-bad .rcell-sub { color: var(--danger); font-weight: 700; }
.chip.rate-over { height: 28px; font-size: 12px; }
.split-13 { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 12px; }
.split-l300 { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 12px; }
.step-line { display: flex; gap: 10px; align-items: center; }
.step-line.top { align-items: flex-start; }
.step-n { flex: none; width: 20px; height: 20px; border-radius: 50%; border: 1px solid var(--line-strong); display: inline-flex; align-items: center; justify-content: center; font-size: 11px; font-weight: 700; color: var(--ink-2); }
.g8 { gap: 8px; }
.box.mini { padding: 8px 10px; }
.box.mini2 { padding: 10px 12px; }
.game-cell { display: flex; align-items: center; gap: 6px; }
.game-cell .ellipsis { max-width: 200px; overflow: hidden; text-overflow: ellipsis; }
.flowbox { padding: 4px 10px; color: var(--ink-2); }
.flowbox.now { border-radius: var(--radius-md); border: 1px solid var(--ink); color: var(--ink); font-weight: 700; }
@media (max-width: 1023px) {
  .tree-wrap, .split-13, .split-l300 { grid-template-columns: minmax(0, 1fr); }
}

/* ---------- 베팅 · 게임 (bets · games) ---------- */
.filters .f-130 { flex: 0 1 130px; }
.filters .f-170 { flex: 0 1 170px; }
.filters .f-190 { flex: 0 1 190px; }
.filters .f-200 { flex: 0 1 200px; }
.grid.g200 { --col: 200px; }
.card.stat { padding: 14px; }
.card.stat .kpi { font-size: 20px; }
.bar-acts { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; }
.tbl .ellipsis.w240 { max-width: 240px; }
/* 스포츠북 행: 행 어디를 눌러도 펼쳐져요 (pages/bets.js) */
.tbl tr.fold-row { cursor: pointer; }
.leg { display: grid; grid-template-columns: minmax(0, 1fr) 160px 64px 88px; align-items: center; gap: 12px; padding: 8px 12px; border-radius: var(--radius-md); background: var(--surface); border: 1px solid var(--line); }
.leg-m { color: var(--ink-2); white-space: normal; }
.leg b { text-align: right; }
.leg .chip { justify-self: end; }
/* 게임 관리 */
.tab-n { opacity: 0.7; }
.ord { display: flex; gap: 4px; }
.ord .btn.icon { width: 28px; }
.pv-logo { width: 72px; height: 30px; border-radius: 6px; display: flex; align-items: center; justify-content: center; overflow: hidden; white-space: nowrap; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; background: var(--raised); border: 1px solid var(--line-strong); color: var(--ink-2); }
.pv-logo.is-empty { background: transparent; border-style: dashed; color: var(--ink-3); }
.pv-logo img { max-width: 100%; max-height: 100%; }
/* 게임 관리 스위치: 꺼짐 = 회색, 점검 켜짐 = 노랑 (회원 제한 스위치는 꺼짐 = 빨강이라 따로) */
.switch.soft { background: var(--line-strong); }
.switch.soft[aria-checked="true"] { background: var(--accent); }
.switch.soft.maint[aria-checked="true"] { background: var(--warn); }
.thumb { width: 36px; height: 48px; border-radius: 6px; background: var(--raised); border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; overflow: hidden; font-size: 9px; color: var(--ink-3); }
.ck { width: 18px; height: 18px; accent-color: var(--accent); cursor: pointer; }
.lobby-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(min(200px, 100%), 1fr)); gap: 12px; }
.lobby-card, .book-card { padding: 12px; display: flex; flex-direction: column; gap: 10px; }
.lobby-art, .book-art { position: relative; border-radius: var(--radius-md); background: var(--raised) center / cover no-repeat; border: 1px solid var(--line-strong); display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; color: var(--ink-3); font-size: 12px; }
.lobby-art { aspect-ratio: 4 / 5; }
.book-art { aspect-ratio: 3 / 4; padding: 8px; border-color: var(--line); }
.lobby-art.is-empty { background-color: transparent; border-style: dashed; }
.lobby-art.has-img .ph, .book-art.has-img .ph { visibility: hidden; }
.lobby-logo { position: absolute; left: 10px; right: 10px; bottom: 10px; height: 28px; border-radius: 6px; background: var(--chrome); display: flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700; letter-spacing: 0.04em; color: var(--ink-2); }
label.btn:focus-within { outline: 2px solid var(--focus); outline-offset: 2px; }   /* 파일 고르기 버튼 (안의 input 이 포커스를 받아요) */
.grid2.g6 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 6px; }
.book-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(380px, 100%), 460px)); gap: 16px; }
.book-card { padding: 16px; display: grid; grid-template-columns: 140px minmax(0, 1fr); gap: 16px; }
.book-name { font-size: 15px; }
@media (max-width: 479px) {
  .book-card { grid-template-columns: 96px minmax(0, 1fr); gap: 12px; }
}

/* ---------- 혜택 (bonus · events) ---------- */
.lbl-row { display: flex; justify-content: space-between; gap: 8px; }
.ink { color: var(--ink); }
.w36 { width: 36px; text-align: right; flex: none; }
.w72 { width: 72px; } .w96 { width: 96px; } .w130 { width: 130px; } .w240 { width: 240px; max-width: 100%; }
.h32 { height: 32px; }
.tbl td .inp { white-space: normal; }
/* 진행 막대 + 숫자 */
.prog { display: flex; align-items: center; gap: 10px; }
.prog .bar { flex: 1 1 auto; }
.prog b { width: 40px; text-align: right; flex: none; }
.bar.ok > i { background: var(--success); }
.tbl tr.fixed-row:hover { background: transparent; }
/* 콤프 적립률 표 */
.comp-card { padding: 16px; max-width: 900px; }
.rate-inp { width: 84px; height: 32px; }
.rate-inp.is-bad, .inp.is-bad { border-color: var(--danger); background: var(--danger-soft); }
/* 이벤트 배너 */
.sq-thumb { width: 44px; height: 44px; border-radius: 6px; background: var(--raised) center / cover no-repeat; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 10px; color: var(--ink-3); }
.ck.sm { width: 16px; height: 16px; }
.radio-l { display: inline-flex; align-items: center; gap: 6px; cursor: pointer; }
.radio-l b { font-size: 12px; visibility: hidden; }
.radio-l input:checked + b { visibility: visible; }
/* 룰렛 당첨표 */
.pic-cell { display: flex; align-items: center; gap: 8px; }
.pic { width: 28px; height: 28px; border-radius: 6px; background: var(--raised); display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; color: var(--ink-2); }
.inp-unit { display: inline-flex; align-items: center; gap: 6px; }
.inp-unit .inp { height: 32px; }
.chip.bad-sum { background: var(--danger-soft); border-color: var(--danger-line); color: var(--danger); }
/* 2칸 · 6칸 카드 */
.grid2c { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.grid6 { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; align-items: end; }
.tbl.is-dim { opacity: 0.5; }   /* 지급 방식 '수동만'일 때 자동 조건 표 */
.box-36 { height: 36px; display: flex; align-items: center; padding: 0 12px; }
.split-grant { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.2fr); gap: 16px; align-items: start; }
/* 마블 보드 (6 × 6 바깥 20칸) */
.board { max-width: 560px; margin: 0 auto; aspect-ratio: 1 / 1; display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); grid-template-rows: repeat(6, minmax(0, 1fr)); gap: 6px; }
.cell { min-width: 0; border-radius: 8px; border: 1px solid var(--line-strong); background: var(--raised); color: var(--ink); font-size: 11px; font-weight: 700; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px; cursor: pointer; padding: 2px; text-align: center; line-height: 14px; }
.cell > .tn { font-size: 10px; opacity: 0.7; }
.cell.is-pt { border-style: dashed; border-color: var(--line); background: transparent; color: var(--ink-3); font-weight: 500; }
.cell.is-start { background: var(--ink); border-color: var(--ink); color: var(--surface); }
.cell.is-sel { background: var(--accent); border-color: var(--accent); color: var(--on-accent); box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--accent); }
.cell:hover:not(.is-sel) { background: var(--hover); }
.board-mid { grid-row: 2 / 6; grid-column: 2 / 6; border: 1px dashed var(--line-strong); border-radius: 10px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 4px; text-align: center; color: var(--ink-3); font-size: 12px; padding: 8px; }
/* 이벤트 수정 · 기프티콘 팝업 */
.modal-box.is-ev { max-width: 760px; }
.modal-box.is-gift { max-width: 460px; }
.ev-imgs { display: grid; grid-template-columns: 1fr 1.4fr 1fr 2fr; gap: 12px; align-items: end; }
.img-slot { border-radius: 8px; background: var(--raised) center / cover no-repeat; border: 1px solid var(--line); display: flex; align-items: center; justify-content: center; font-size: 11px; color: var(--ink-3); }
.img-slot.has-img { color: transparent; }
.img-slot.r11 { aspect-ratio: 1 / 1; } .img-slot.r169 { aspect-ratio: 16 / 9; } .img-slot.r45 { aspect-ratio: 4 / 5; } .img-slot.r219 { aspect-ratio: 21 / 9; }
.img-slot.sq64 { width: 64px; height: 64px; flex: none; border-style: dashed; border-color: var(--line-strong); background-color: transparent; }
.gift-img { display: flex; align-items: center; gap: 10px; }
@media (max-width: 1023px) {
  .grid2c, .split-grant { grid-template-columns: minmax(0, 1fr); }
  .grid6 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 599px) {
  .grid6, .ev-imgs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .board { gap: 4px; }
  .cell { font-size: 10px; line-height: 12px; }
}

@media (max-width: 767px) {
  .grid3, .grid4, .form2, .lim-grid { grid-template-columns: minmax(0, 1fr); }
  .grid4.g8 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .btn-row3 { grid-template-columns: minmax(0, 1fr); }
  .md-head { flex-wrap: wrap; }
  .md-ngr { text-align: left; width: 100%; padding-left: 60px; }
  .side-body { padding: 16px; }
  .side-head { padding: 0 16px; }
}

@media (max-width: 599px) {
  .split2 { gap: 8px; }
  .kpi { font-size: 20px; }
}

/* ---------- 운영 (cs · settings · admins) ---------- */
.count.count-danger { background: var(--danger); color: var(--on-danger); }
.count[hidden] { display: none; }
.title-row { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.w64 { width: 64px; } .w110 { width: 110px; } .w120 { width: 120px; } .w140 { width: 140px; }
.tbl .ellipsis.w360 { max-width: 360px; }
.chip-btn { cursor: pointer; font: inherit; font-size: 11px; font-weight: 700; }
.chip-btn:hover { filter: brightness(1.1); }
.is-dim { opacity: 0.5; }
.modal-box.is-xs { max-width: 440px; }
/* 1:1 문의 */
.inq-wrap { display: grid; grid-template-columns: 340px minmax(0, 1fr); gap: 16px; align-items: start; }
.inq-list { padding: 8px; display: flex; flex-direction: column; gap: 4px; }
.inq-item { width: 100%; border: 0; text-align: left; cursor: pointer; padding: 10px 12px; border-radius: 8px; background: transparent; color: var(--ink); display: flex; flex-direction: column; gap: 4px; font: inherit; }
.inq-item:hover { background: var(--hover); }
.inq-item.is-sel { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); }
.inq-item[data-st="done"] .inq-top b { color: var(--ink-2); }
.inq-top { display: flex; justify-content: space-between; gap: 8px; }
.inq-top b { font-size: 13px; }
.inq-detail { padding: 20px; display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.inq-body { padding: 14px 16px; line-height: 22px; }
.inq-dep { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 8px; }
.inq-hist { border-top: 1px solid var(--line); padding-top: 12px; display: flex; flex-direction: column; gap: 2px; }
/* 쪽지 · 알림 */
.grid-note { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1.25fr); gap: 16px; align-items: start; }
.ck-row { display: flex; align-items: center; gap: 8px; cursor: pointer; }
.tbl tr.is-recalled td { color: var(--ink-3); }
.tbl tr.is-recalled b { text-decoration: line-through; font-weight: 500; }
/* 빠른 제목 · 답변 */
.qitems { display: flex; flex-direction: column; gap: 10px; }
.qitem { display: flex; align-items: center; gap: 8px; padding: 8px 10px; border: 1px solid var(--line); border-radius: 8px; }
.qitem .qn { width: 18px; flex: none; }
.qitem .qt { flex: 1 1 auto; min-width: 0; }
.qitem .btn.icon { width: 28px; flex: none; }
.add-row { display: flex; gap: 8px; }
/* 사이트 설정 */
.ops-head { padding: 14px 16px; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; }
.ops-head:not(.warn-card) { border-color: var(--line); }
.chip-lg { height: 28px; font-size: 12px; }
.grid3c { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 16px; }
.ops-card { padding: 16px; display: flex; flex-direction: column; gap: 12px; }
.ops-card.is-off { background: var(--danger-soft); }
.ops-card.is-off [data-op-sub] { color: var(--danger); font-weight: 700; }
.ops-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.ops-t { font-size: 14px; }
.ops-off { gap: 10px; }
.ops-note { margin-top: auto; }
.wallet-qr { display: grid; grid-template-columns: minmax(0, 1fr) 104px; gap: 12px; align-items: start; }
.qr-box { aspect-ratio: 1 / 1; border-radius: 8px; border: 1px solid var(--line); background: var(--raised); display: flex; align-items: center; justify-content: center; text-align: center; font-size: 11px; color: var(--ink-3); padding: 6px; }
.dash-box { height: 36px; display: flex; align-items: center; padding: 0 12px; border: 1px dashed var(--line-strong); border-radius: 6px; color: var(--ink-3); font-size: 12px; }
.inline-inp { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }
.risk-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 12px; border: 1px solid var(--danger-line); background: var(--danger-soft); border-radius: 8px; }
.join-items { border-top: 1px solid var(--line); padding-top: 10px; }
.basic-card { padding: 16px; max-width: 920px; }
.logo-grid { display: grid; grid-template-columns: 2fr 1fr 1fr; gap: 12px; max-width: 560px; }
.logo-slot { height: 72px; border-radius: 8px; background: var(--logo-plate); display: flex; align-items: center; justify-content: center; }
.logo-slot img { height: 26px; max-width: 90%; display: block; }
.img-slot.sq72 { height: 72px; aspect-ratio: 1 / 1; border-style: dashed; border-color: var(--line-strong); background-color: transparent; }
.terms-wrap { display: grid; grid-template-columns: 260px minmax(0, 1fr); gap: 16px; align-items: start; }
.terms-groups { padding: 8px; display: flex; flex-direction: column; gap: 2px; }
.tgroup { width: 100%; height: 38px; border: 0; border-radius: 8px; padding: 0 12px; display: flex; align-items: center; justify-content: space-between; cursor: pointer; background: transparent; color: var(--ink-2); font: inherit; font-weight: 500; text-align: left; }
.tgroup:hover { background: var(--hover); }
.tgroup.is-sel { background: var(--raised); box-shadow: inset 0 0 0 1px var(--line-strong); color: var(--ink); font-weight: 700; }
.titem { padding: 12px; display: flex; flex-direction: column; gap: 8px; }
.titem-head { display: flex; align-items: center; gap: 8px; }
.titem-head .qn { width: 16px; flex: none; }
.titem-head .btn { flex: none; }
.titem-head .btn.icon { width: 28px; }
.inp.b { font-weight: 700; }
.grid-domain { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
.maint-wrap { max-width: 920px; }
@media (max-width: 1023px) {
  .inq-wrap, .grid-note, .grid3c, .terms-wrap, .grid-domain { grid-template-columns: minmax(0, 1fr); }
}
@media (max-width: 599px) {
  .wallet-qr { grid-template-columns: minmax(0, 1fr) 80px; }
  .logo-grid { grid-template-columns: 1fr 1fr; }
  .logo-grid > :first-child { grid-column: 1 / -1; }
  .qitem { flex-wrap: wrap; }
  .titem-head { flex-wrap: wrap; }
  .titem-head .inp { flex: 1 1 100%; order: -1; }
}

/* ---------- 관리자 로그인 (login.html · 상단 바 · 좌측 메뉴 없음) ---------- */
.login-wrap { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 40px 16px; background: var(--bg); }
.login-main { width: 100%; max-width: 400px; display: flex; flex-direction: column; gap: 16px; }
.login-card { padding: 28px 24px; display: flex; flex-direction: column; gap: 16px; box-shadow: var(--shadow-pop); }
.login-card .alert b { font-size: 13px; }
.inp.lg { height: 44px; }
.pw-wrap { position: relative; display: block; }
.pw-wrap .inp { width: 100%; padding-right: 72px; }
.pw-eye { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); }
.caps-warn { color: var(--warn); font-weight: 600; margin-top: -8px; }
.lg-btn { height: 44px; width: 100%; justify-content: center; font-size: 14px; }
.lg-btn:disabled { opacity: 0.5; cursor: not-allowed; }
.login-foot { text-align: center; }
@media (max-width: 479px) { .login-card { padding: 24px 18px; } }
.login-card .inp.is-bad { background: var(--surface); border-color: var(--danger); }   /* 디자인: 틀리면 테두리만 빨강 */