/* 관리자 대시보드 — 모토모토 admin 과 다른 새 디자인(D-015). 왼쪽 어두운 메뉴 + 밝은 작업면.
   ★ 공용 색 · 글꼴 · 알림은 base.css 에 있다(색은 임시값 — 디자인 · 색상은 사장님이 따로 정한다). 여기에는 대시보드에만 쓰는 값만 둔다. */
   ★ 단추 · 표 · 폼 · 칩 같은 공용 부품은 shared/css/ui.css 로 옮겼다(영업 포털과 같이 쓴다 — D-042).
/* 로그인 */
.login-help { margin: -6px 0 6px; font-size: 13.5px; line-height: 1.6; color: var(--sub); }
.login-help b { color: var(--accent-d); }
.login-status { margin: 0; min-height: 1.4em; font-size: 13.5px; font-weight: 600; color: var(--err); }

/* 피그마 변수(파일 wJH98VfUZ7u9YryxAJuk4j 「메뉴/*」 · 「바탕/*」 · 「판플/빨강 *」 · 「그림자/카드」) — 대시보드에서만 쓴다.
   ★ 공용 이름(base.css)은 다시 정의하지 않는다(시험이 지킨다). */
:root {
  --side-mute: #9CA2AB; --side-on: #2A2E35; --side-box: #1D2127; --avatar-ink: #FFD2C9;
  --soft: #F8F9FB; --board: #ECEFF3; --accent-line: #F4C3B9; --accent-ink: #C0301C;
  --shadow-card: 0 1px 2px rgba(17, 20, 24, .04), 0 4px 16px rgba(17, 20, 24, .06);
}

/* 틀 — 피그마 「왼쪽 메뉴」(186:920) · 「머리줄」(186:557) */
.shell { display: grid; grid-template-columns: 224px minmax(0, 1fr); min-height: 100vh; }
.side { position: sticky; top: 0; height: 100vh; display: flex; flex-direction: column; gap: 24px; padding: 28px 16px 20px; background: var(--side); color: var(--side-mute); }
.side-brand { display: flex; align-items: center; gap: 10px; padding: 0 8px; color: var(--white); text-decoration: none; }
.side-mark { flex: none; width: 32px; height: 32px; }
.side-name { display: grid; gap: 2px; min-width: 0; }
.side-name b { font-size: 17px; font-weight: 700; letter-spacing: -.035em; line-height: 1.4; white-space: nowrap; }
.side-name small { font-size: 11px; color: var(--side-mute); letter-spacing: .02em; }
.side-nav { display: grid; align-content: start; gap: 2px; min-height: 0; overflow-y: auto; margin: 0 -4px; padding: 0 4px; }
.side-nav a { position: relative; display: flex; align-items: center; gap: 11px; min-height: 40px; padding: 0 14px; border-radius: 8px; text-decoration: none; font-size: 13px; color: var(--side-mute); }
.side-nav .nav-label { flex: 1 1 auto; min-width: 0; }
.side-nav .ico { flex: none; width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.side-nav a.soon { opacity: .6; }
.side-nav a em { font-style: normal; font-size: 11px; color: var(--side-mute); }
.side-nav a:hover { background: var(--side-on); color: var(--white); }
.side-nav a.on { background: var(--accent-soft); color: var(--ink); font-weight: 700; }
.side-nav a.on::after { content: ''; flex: none; width: 4px; height: 4px; border-radius: 50%; background: var(--accent-d); }
.side-nav a.on em { color: var(--sub); }
.nav-group { display: grid; gap: 2px; }
.nav-group + .nav-group { margin-top: 12px; }
.nav-title { margin: 0 0 3px; padding: 0 8px; display: flex; align-items: baseline; gap: 6px; font-size: 11px; font-weight: 400; color: var(--side-mute); }
.nav-title small { font-size: 11px; opacity: .7; }
.nav-inbox { position: sticky; bottom: 0; margin-top: 12px !important; padding: 8px 0 2px; border-top: 1px solid var(--side-on); background: var(--side); }
.side-nav a em.nav-view { padding: 1px 6px; border-radius: 4px; background: var(--side-on); font-weight: 500; }
.side-nav a.on em.nav-view { background: var(--white); }
.nav-count { min-width: 20px; padding: 2px 6px; border-radius: 4px; background: var(--side-on); color: var(--white); font-size: 11px; font-weight: 600; text-align: center; font-variant-numeric: tabular-nums; }
.side-nav a.on .nav-count { background: var(--accent-d); }
.side-foot { margin-top: auto; display: flex; align-items: center; gap: 10px; padding: 16px 6px 0; border-top: 1px solid var(--side-on); }
.side-face { flex: none; display: grid; place-items: center; width: 34px; height: 34px; border-radius: 50%; background: var(--text); color: var(--avatar-ink); font-size: 13px; font-weight: 600; }
.side-foot p { flex: 1 1 auto; min-width: 0; margin: 0; display: grid; gap: 2px; color: var(--white); font-size: 13px; font-weight: 500; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.side-foot small { color: var(--side-mute); font-size: 11px; font-weight: 400; }
.side-foot .btn-ghost { flex: none; min-height: 32px; padding: 0 10px; border-color: var(--side-on); color: var(--side-mute); font-size: 12px; }
.side-foot .btn-ghost:hover { color: var(--white); }
.body { min-width: 0; display: flex; flex-direction: column; background: var(--panel); }
.bar { position: sticky; top: 0; z-index: 5; display: flex; align-items: center; justify-content: space-between; gap: 16px; min-height: 72px; padding: 0 32px; background: var(--panel); border-bottom: 1px solid var(--line); }
.bar-left, .bar-right { display: flex; align-items: center; gap: 20px; min-width: 0; }
.bar-right { gap: 12px; }
.bar .ico { flex: none; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.crumbs { display: flex; align-items: center; gap: 12px; font-size: 13px; color: var(--sub); white-space: nowrap; }
.crumbs .ico { width: 12px; height: 12px; }
.crumbs b { color: var(--ink); font-weight: 500; }
.bar-rule { width: 1px; height: 20px; background: var(--line); }
.picker { position: relative; display: flex; align-items: center; gap: 8px; margin: 0; min-width: 0; font-size: 13px; color: var(--ink); }
.picker > .ico:first-child { width: 17px; height: 17px; color: var(--text); }
.picker select { width: auto; min-width: 0; min-height: 36px; padding: 0 22px 0 0; border: 0; background: transparent; font-weight: 700; font-size: 13px; color: var(--ink); appearance: none; -webkit-appearance: none; cursor: pointer; }
.picker select:focus { box-shadow: none; }
.picker > .ico:last-child { position: absolute; right: 0; width: 13px; height: 13px; pointer-events: none; color: var(--ink); }
.picker.fixed b { color: var(--ink); font-size: 13px; font-weight: 700; white-space: nowrap; }
.picker.fixed small { color: var(--sub); font-size: 12px; white-space: nowrap; }
.demo-badge { padding: 3px 8px; border-radius: 6px; background: var(--soft); color: var(--text); font-size: 12px; font-weight: 500; white-space: nowrap; }
.content { min-width: 0; padding: 28px 32px 48px; display: grid; grid-template-columns: minmax(0, 1fr); gap: 18px; align-content: start; }
@media (max-width: 860px) {
  .shell { grid-template-columns: minmax(0, 1fr); }
  .side { position: static; height: auto; flex-direction: row; flex-wrap: wrap; align-items: center; gap: 8px; padding: 12px 16px; }
  .side-name small { display: none; }
  .side-nav { order: 3; width: 100%; display: flex; overflow-x: auto; gap: 4px; margin: 0; padding: 4px 0 0; }
  .side-nav a { white-space: nowrap; min-height: 40px; }
  .side-nav a em, .side-nav a.on::after { display: none; }
  .nav-group { display: contents; }
  .nav-title { display: none; }
  .nav-inbox { position: static; margin: 0 !important; padding: 0; border: 0; background: none; }
  .side-foot { margin: 0 0 0 auto; border: 0; padding: 0; }
  .side-foot p, .side-face { display: none; }
  .bar { position: static; flex-wrap: wrap; min-height: 0; padding: 10px 16px; gap: 8px 12px; }
  .bar-left { gap: 12px; flex-wrap: wrap; }
  .crumbs { display: none; }
  .bar-rule { display: none; }
  .content { padding: 16px; }
}

/* 이름 · 값 목록(신청 상세 · 입점 문의 · 직원 계정 · 모토모토) */
.kv { display: grid; grid-template-columns: 64px 1fr; gap: 6px 12px; margin: 0; font-size: 14px; }
.kv dt { color: var(--sub); }
.kv dd { margin: 0; color: var(--ink); }
.kv .pre { white-space: pre-wrap; }

.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--line); overflow-x: auto; }
.tabs a { padding: 10px 14px; text-decoration: none; font-weight: 600; color: var(--sub); border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap; }
.tabs a.on { color: var(--ink); border-bottom-color: var(--accent); }
/* 보기 고르기(role=tablist 인 .chips — 입퇴실 · 신청함 · 견적서 · 요금 · 정산 · 영업사원 · 요청함)도 같은 밑줄 탭(피그마 「밑줄 탭」, D-089 · D-101).
   한 줄에 검색 · 단추가 같이 있으면(.toolbar) 밑줄 선을 그 줄 전체에 긋는다. 필터 알약(.chips · role 없음)은 그대로. */
.chips[role="tablist"] { flex-wrap: nowrap; gap: 2px; overflow-x: auto; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.toolbar:has(> .chips[role="tablist"]) { border-bottom: 1px solid var(--line); align-items: flex-end; }
.toolbar > .chips[role="tablist"] { border-bottom: 0; }
.toolbar:has(> .chips[role="tablist"]) > :not(.chips) { margin-bottom: 6px; }   /* 검색칸 · 단추가 밑줄 선에 붙지 않게 */
.chips[role="tablist"] .chip-btn, .chips[role="tablist"] .chip-btn.on { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; margin-bottom: -1px;
  border: 0; border-bottom: 2px solid transparent; border-radius: 0; background: none; color: var(--sub); font-size: 14px; font-weight: 600; white-space: nowrap; }
.chips[role="tablist"] .chip-btn.on { color: var(--ink); border-bottom-color: var(--accent); }
.chips[role="tablist"] .chip-btn:hover { color: var(--ink); }
@media (max-width: 720px) {   /* 폰: 검색칸이 다음 줄로 내려가면 밑줄 선은 탭 줄에만 */
  .toolbar:has(> .chips[role="tablist"]) { border-bottom: 0; }
  .toolbar > .chips[role="tablist"] { flex: 1 1 100%; border-bottom: 1px solid var(--line); }
  .toolbar:has(> .chips[role="tablist"]) > :not(.chips) { margin-bottom: 0; }
  .toolbar:has(> .chips[role="tablist"]) > .search { width: 100%; margin-left: 0; }
}

/* 줄 목록(주소 · 계약 · 직원) */
.rows { list-style: none; margin: 0; padding: 0; display: grid; border: 1px solid var(--line); border-radius: var(--r); }
.rows li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 12px 14px; border-top: 1px solid var(--line); }
.rows li:first-child { border-top: 0; }
.rows li b { color: var(--ink); }
.rows li small { color: var(--sub); }
.rows li.off { background: var(--bg); }
.rows li.off b { color: var(--sub); }
.rows li.none { color: var(--sub); justify-content: center; padding: 20px; }
.rows li > .btn, .row-actions { margin-left: auto; display: flex; gap: 6px; }
.form-grid .f { align-content: start; }

.btn[href] { text-decoration: none; }

/* 여러 메뉴가 쓰는 것 — 쌓기 · 표시 꼬리표 · 실패 글자 */
.stack { display: grid; gap: 16px; min-width: 0; }
.rows li .grow { flex: 1 1 auto; }
.flag { padding: 0 8px; border: 1px solid var(--line); border-radius: 999px; color: var(--sub); font-size: 12px; line-height: 1.7; }
.flag.on { border-color: var(--ok); color: var(--ok); font-weight: 700; }
.lost-text { color: var(--err); font-size: 12.5px; font-weight: 700; }

/* 테두리 없는 단추(틀 · 객실 · 입퇴실 · 홈페이지) */
.btn-ghost { background: none; color: var(--sub); }

/* ── 로그인 — 왼쪽 소개 판 · 오른쪽 입력(폰에서는 위아래) ── */
.login { min-height: 100vh; display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); background: var(--panel); }
.login-side { display: flex; flex-direction: column; justify-content: space-between; gap: 40px; padding: 48px clamp(28px, 5vw, 72px); background: var(--side); color: var(--side-text); }
.login-logo { display: block; align-self: flex-start; height: 40px; width: auto; }
.login-pitch { display: grid; gap: 18px; max-width: 460px; }
.login-tag { margin: 0; color: #fff; font-size: clamp(30px, 3.4vw, 44px); font-weight: 800; letter-spacing: -.04em; line-height: 1.2; }
.login-lead { margin: 0; font-size: 16px; line-height: 1.6; }
.login-feats { list-style: none; margin: 10px 0 0; padding: 0; display: grid; gap: 16px; }
.login-feats li { display: flex; gap: 14px; align-items: flex-start; }
.login-feats b { display: block; color: #fff; font-size: 15px; }
.login-feats small { display: block; margin-top: 2px; font-size: 13.5px; line-height: 1.5; }
.feat-ic { flex: none; display: grid; place-items: center; width: 38px; height: 38px; border-radius: 10px; background: rgba(255, 255, 255, .08); color: var(--accent); }
.feat-ic svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.login-foot { margin: 0; font-size: 12.5px; color: rgba(255, 255, 255, .4); }
.login-main { display: grid; place-content: center; gap: 18px; padding: 48px 24px; }
.login-form { width: min(380px, 100%); display: grid; gap: 14px; }
.login-form h1 { font-size: 26px; letter-spacing: -.03em; }
.login-aside { margin: 0; width: min(380px, 100%); padding-top: 16px; border-top: 1px solid var(--line); font-size: 13px; color: var(--sub); }
.pw-wrap { position: relative; display: block; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 6px; top: 50%; transform: translateY(-50%); min-height: 32px; padding: 0 10px; border: 0; border-radius: 6px; background: transparent; color: var(--sub); font-size: 12.5px; font-weight: 700; cursor: pointer; }
.pw-toggle:hover { background: var(--bg); color: var(--ink); }
@media (max-width: 900px) {
  .login { grid-template-columns: minmax(0, 1fr); }
  .login-side { gap: 14px; padding: 28px 20px 24px; }
  .login-logo { height: 32px; }
  .login-tag { font-size: 24px; }
  .login-lead, .login-feats, .login-foot { display: none; }
  .login-main { place-content: start center; padding: 32px 20px 48px; }
}
.ext-link { font-size: 13px; font-weight: 700; color: var(--accent-d); text-decoration: none; white-space: nowrap; }   /* 자체 관리자 바로가기(D-025) */

/* 대화 상자 폭(예약 · 객실 · 결제 · 쿠폰 등) */
.res-dialog { width: min(760px, calc(100vw - 24px)); }
.res-dialog form { padding: 22px; }

/* ── 여러 메뉴가 함께 쓰는 것(요금 · 캘린더 · 입퇴실) — 메뉴 CSS 끼리 서로 기대지 않게 여기 둔다 ── */
.warn-note { background: var(--warn-bg); color: var(--warn-text); }
/* 고른 칩(보기 고르기) — 검정 상자 대신 옅은 빨강 + 빨강 글자(사장님 2026-10-30 「이런 블랙 박스는 쓰지 말자」 · 피그마 「탭 · 선택됨」, D-089). 공용 ui.css 는 영업 포털 · OTA 도 써서 여기서만 덮는다 */
.chip-btn.on { background: var(--accent-soft); border-color: var(--accent-soft); color: var(--accent-ink); }
.month-nav { display: flex; align-items: center; gap: 10px; }
.cal-legend { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; font-size: 12.5px; }
/* 예약 상태 색(011) */
.bk-chip { display: inline-block; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.9; }
.st-tentative { --bk: var(--st-tentative); }
.st-confirmed { --bk: var(--accent); }
.st-checked_in { --bk: var(--st-booked); }
.st-checked_out { --bk: var(--st-hold); }
.st-cancelled { --bk: var(--st-cancelled); }
.bk-chip { background: color-mix(in srgb, var(--bk, var(--sub)) 14%, var(--panel)); color: var(--bk, var(--sub)); }
.k-block { --bk: var(--ink); }
/* 손님 갈래 색(calendar/booking-rules.js guestType) — 달력 막대 · 입퇴실 띠. 개인 파랑 · 단체 판플 빨강 */
.g-indiv { --bk: #2F6FB3; }
.g-group { --bk: var(--accent); }
.g-tag { display: inline-block; padding: 0 7px; border-radius: 6px; font-size: 11.5px; font-weight: 700; line-height: 1.8; background: color-mix(in srgb, var(--bk) 12%, var(--panel)); color: var(--bk); }
/* 방 상태 색(core/occupancy.js — 입퇴실 · 홈) */
.rs-chip { display: inline-block; padding: 0 9px; border-radius: 999px; font-size: 12px; font-weight: 700; line-height: 1.9; }
.rs-free { background: color-mix(in srgb, var(--st-booked) 10%, var(--panel)); color: var(--st-booked); }
.rs-hold { background: color-mix(in srgb, var(--st-tentative) 18%, var(--panel)); color: var(--st-tentative); }
.rs-used { background: color-mix(in srgb, var(--accent) 22%, var(--panel)); color: var(--accent-d); }
.rs-block { background: repeating-linear-gradient(135deg, #C9CDD3 0 5px, #E4E7EB 5px 10px); color: var(--ink); }
/* 숫자 칸(요금 · 견적 · 가견적) */
.num-in { min-height: 36px; padding: 6px 8px; text-align: right; font-variant-numeric: tabular-nums; }
/* 지우기 · 취소처럼 되돌리기 어려운 단추(요금 · 정산) */
.btn-danger-text { border-color: transparent; background: transparent; color: var(--err); }
/* 이름 · 값 목록(입점 문의 · 모토모토 신청 상세) */
.p-kv { display: grid; grid-template-columns: 80px minmax(0, 1fr); gap: 6px 12px; margin: 0; font-size: 14px; }
.p-kv dt { color: var(--sub); font-weight: 600; }
.p-kv dd { margin: 0; white-space: pre-wrap; color: var(--ink); }
.mf-detail { display: grid; gap: 14px; padding: 22px; }