/* =========================================================
 * style.css — 오로지 공통 디자인 (예식프로그램과 같은 색·글꼴)
 * 매출관리와 스태프 앱이 같은 파일을 씁니다.
 * 색상은 맨 위 :root 에서 한 번에 바꿀 수 있습니다.
 * ========================================================= */

:root {
  /* 남색·흰색 시안 (2026-11-03): 신청서와 같은 값. 홈페이지 3차 tokens.css 기준 */
  --bg: #EEF1F6;
  --card: #FCFDFE;
  --paper: #F7F8F9;
  --grey50: #F3F5F9;
  --grey100: #E9EDF3;
  --grey200: #D4D9E1;      /* 괘선 */
  --grey300: #B8C0CC;
  --grey400: #7B8799;      /* 입력 칸 테두리 */
  --grey500: #4C596C;      /* 둘째 글자 (흰 바탕 대비 7:1) */
  --grey600: #4C596C;
  --grey700: #3B475A;
  --grey800: #1B2B47;
  --grey900: #0E1E3A;      /* 글자 */
  --blue: #11294F;      --blue-soft: #DFE5EF;   --blue-light: #B8C5D8;
  --navy-dark: #0A192F;
  --navy: #11294F;      --navy-hover: #1C3A6B;  --navy-press: #0A192F;
  --tint: #DFE5EF;      --on-navy: #F7F8F9;
  --script: #4C596C;    --sunday: #B23A2E;   /* --sunday 는 신부 구분색이라 그대로 (대표님 결정 전) */
  /* 금색·빨강·초록·주황은 쓰지 않음 → 남색 계열 */
  --gold: #11294F;      --gold-ink: #11294F;    --gold-soft: #DFE5EF;
  --red: #0E1E3A;       --red-soft: #DFE5EF;
  --orange: #11294F;    --orange-soft: #DFE5EF;
  --green: #11294F;     --green-soft: #DFE5EF;
  --rule: #D4D9E1;
  --radius: 8px;
  --field-line: #7B8799;   /* 글 쓰는 칸 테두리 (흰 바탕 대비 3.6:1, 신청서와 같음) */
  --scrim: rgba(14, 30, 58, .45);    /* 창 뒤 어둡게 */
  --toast-bg: rgba(14, 30, 58, .94);
  /* 신랑·신부 구분 (대표님 결정 전이라 신부는 지금 붉은 계열 그대로. 바꾸면 이 두 줄만) */
  /* 신랑 하늘 · 신부 분홍 파스텔 (2026-11-03 대표님 결정). 옅은 색은 바탕, 진한 색은 글자 */
  --side-groom: #2C6A99;        /* 신랑 글자 */
  --side-groom-fill: #D6EAF8;   /* 신랑 띠 · 표 머리 */
  --side-bride: #F7D6E2;        /* 신부 띠 · 표 머리 */
  --side-bride-ink: #B04870;    /* 신부 글자 */
  --side-fill-ink: #0E1E3A;     /* 파스텔 띠 위 글자 */
  --appbar-h: 60px;
  --tabbar-h: 64px;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }

body {
  margin: 0;
  background: var(--bg);
  color: var(--grey900);
  font-family: "Pretendard Variable", Pretendard, -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  font-size: 15px;
  line-height: 1.5;
  letter-spacing: -0.01em;
  -webkit-font-smoothing: antialiased;
}

[hidden] { display: none !important; }
a { color: inherit; text-decoration: none; }
b, strong { font-weight: 700; }

h1 { font-size: 26px; font-weight: 700; letter-spacing: -0.03em; margin: 0; }
h1 small { font-size: 15px; color: var(--grey500); font-weight: 500; margin-left: 4px; letter-spacing: 0; }
h2 { font-size: 17px; font-weight: 700; letter-spacing: -0.02em; margin: 0 0 14px; }
.muted { color: var(--grey500); }
.small { font-size: 13px; }
.blue { color: var(--blue); }
.red { color: var(--grey900); font-weight: 700; }
.orange { color: var(--orange); }
.green { color: var(--grey900); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }

/* ---------- 상단 바 ---------- */
.appbar {
  position: sticky; top: 0; z-index: 30;
  background: rgba(238, 241, 246, .94);
  border-bottom: 1px solid var(--grey300);
  backdrop-filter: saturate(180%) blur(16px);
  -webkit-backdrop-filter: saturate(180%) blur(16px);
}
.appbar-inner {
  max-width: 1120px; height: var(--appbar-h); margin: 0 auto;
  display: flex; align-items: center; gap: 12px; padding: 0 20px;
}
.logo { display: flex; align-items: center; gap: 8px; font-size: 17px; font-weight: 600; color: var(--grey800); }
.logo b { color: var(--blue); }

/* 오로지 로고 (D안): 오로지 | OROJI 위, 앱 이름 아래 — 아이보리·먹색 */
.wordmark { display: inline-flex; align-items: center; color: #0E1E3A; line-height: 1; }
.wm-ko { font-family: "Gowun Batang", "Nanum Myeongjo", "Batang", serif; font-weight: 700; font-size: 21px; letter-spacing: .08em; }
.wm-rule { display: block; width: 1px; height: 26px; background: #0E1E3A; margin: 0 11px 0 9px; }
.wm-en { display: flex; flex-direction: column; gap: 3px; }
.wm-en b { font-family: "Bodoni Moda", "Didot", Georgia, serif; font-weight: 500; font-size: 12.5px; letter-spacing: .26em; }
.wordmark-star { display: none; }
.app-tag { font-size: 12px; font-weight: 600; color: #4C596C; letter-spacing: .12em; }

/* 예전 기울인 영어 장식 글씨 — 장부 톤에서는 숨김 */
.script { display: none; }
.logo-mark {
  width: 32px; height: 32px; border-radius: 9px; flex-shrink: 0;
  background: var(--card); object-fit: cover;
  box-shadow: 0 0 0 1px var(--grey200);
}
.logo-mark.big { display: block; width: 84px; height: 84px; border-radius: 16px; margin: 0 auto 18px; box-shadow: 0 0 0 1px #C4CBD6; }
.mode-badge {
  font-size: 12px; font-weight: 600; background: var(--orange-soft); color: var(--orange);
  padding: 3px 9px; border-radius: 999px;
}
.nav { display: flex; gap: 4px; margin-left: auto; }
.nav a {
  padding: 8px 14px; border-radius: 10px;
  color: var(--grey600); font-weight: 600; font-size: 15px; cursor: pointer;
  transition: background .15s, color .15s;
}
.nav a:hover { background: var(--grey200); color: var(--grey900); }
.nav a.active { color: var(--blue); background: var(--blue-soft); }
.text-btn {
  border: none; background: none; color: var(--grey500);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer; padding: 8px;
}
.text-btn:hover { color: var(--grey800); }

.container { max-width: 1120px; margin: 0 auto; padding: 8px 20px 120px; }
body.is-login .nav, body.is-login .tabbar { display: none; }

/* ---------- 하단 탭바 (휴대폰) ---------- */
.tabbar { display: none; }

/* ---------- 카드 ---------- */
.card {
  background: var(--card);
  border: 1px solid var(--rule);
  border-radius: var(--radius);
  padding: 22px 22px;
  margin-bottom: 14px;
  min-width: 0;
}
.card-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.card-head h2 { margin: 0; }
.count-badge {
  font-size: 13px; font-weight: 700; color: var(--on-navy); background: var(--grey900);
  padding: 2px 9px; border-radius: 999px;
}
.count-badge:empty { display: none; }
.pill-badge {
  font-size: 13px; font-weight: 600; color: var(--grey600); background: var(--grey100);
  padding: 4px 10px; border-radius: 999px;
}

/* ---------- 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 4px;
  height: 44px; padding: 0 18px; border-radius: 8px; border: none;
  font: inherit; font-size: 15px; font-weight: 600; cursor: pointer; white-space: nowrap;
  transition: background .15s, transform .1s;
}
.btn:active { transform: scale(.98); }
.btn.primary { background: var(--blue); color: var(--on-navy); }
.btn.primary:hover { background: var(--navy-dark); }
.btn.secondary { background: var(--blue-soft); color: var(--blue); }
.btn.secondary:hover { background: var(--grey200); }
.btn.ghost-red { background: var(--card); color: var(--grey900); box-shadow: inset 0 0 0 1.5px var(--grey900); }   /* 되돌리기 어려운 버튼: 빨강 대신 먹색 테두리 */
.btn.ghost-red:hover { background: var(--red-soft); }
.btn.sm { height: 36px; padding: 0 14px; font-size: 14px; border-radius: 8px; }
.btn.lg { height: 54px; font-size: 17px; border-radius: 8px; }
.btn.block { width: 100%; }
.btn:disabled { opacity: .5; cursor: wait; }
.link-sm {
  border: none; background: none; padding: 0; cursor: pointer;
  font: inherit; font-size: 13px; font-weight: 600; color: var(--grey500);
}
.link-sm:hover { color: var(--blue); }
.back-btn {
  border: none; background: none; padding: 6px 0; margin: 4px 0 6px; cursor: pointer;
  font: inherit; font-size: 15px; font-weight: 600; color: var(--grey600);
}

/* ---------- 입력 ---------- */
.field { display: block; margin: 16px 0 0; }
.field > span { display: block; font-size: 13px; font-weight: 600; color: var(--grey600); margin-bottom: 8px; }
.field small { color: var(--grey500); font-weight: 500; }

input[type="number"], input[type="email"], input[type="password"], input[type="text"], input[type="time"], textarea, select {
  width: 100%;
  height: 50px; padding: 0 16px;
  border: 1px solid var(--grey200); border-radius: 8px;
  background: var(--card); color: var(--grey900);
  font: inherit; font-size: 16px; font-weight: 500;
  transition: box-shadow .15s, background .15s;
}
textarea { height: auto; padding: 14px 16px; resize: vertical; line-height: 1.5; }
select { appearance: none; padding-right: 32px; cursor: pointer;
  background-image: linear-gradient(45deg, transparent 50%, var(--grey500) 50%), linear-gradient(135deg, var(--grey500) 50%, transparent 50%);
  background-position: calc(100% - 18px) 22px, calc(100% - 13px) 22px; background-size: 5px 5px; background-repeat: no-repeat; }
input:focus, textarea:focus, select:focus { outline: none; background: var(--card); border-color: var(--grey900); box-shadow: 0 0 0 1px var(--grey900); }
input::placeholder, textarea::placeholder { color: var(--grey500); }

.input-won { position: relative; }
.input-won input { padding-right: 40px; font-size: 18px; font-weight: 600; font-variant-numeric: tabular-nums; }
.input-won em { position: absolute; right: 16px; top: 50%; transform: translateY(-50%); font-style: normal; color: var(--grey500); font-weight: 600; }

/* 세그먼트 (토스식 탭 버튼) */
.segmented {
  display: inline-flex; background: var(--grey100); border-radius: 8px; padding: 3px; gap: 2px;
}
.segmented.full { display: flex; }
.segmented button, .segmented label {
  flex: 1; border: none; background: none; cursor: pointer;
  font: inherit; font-size: 14px; font-weight: 600; color: var(--grey600);
  padding: 8px 12px; border-radius: 6px; text-align: center; white-space: nowrap;
  transition: background .15s, color .15s;
}
.segmented.full label { padding: 11px 6px; font-size: 15px; }
.segmented label input { position: absolute; opacity: 0; pointer-events: none; }
.segmented button.active, .segmented label:has(input:checked) {
  background: var(--card); color: var(--grey900); box-shadow: 0 1px 3px rgba(0,0,0,.08);
}

/* 할인 체크 목록 */
.check-list { display: flex; flex-direction: column; }
.check {
  display: flex; align-items: center; gap: 12px;
  padding: 13px 4px; cursor: pointer; user-select: none;
  border-bottom: 1px solid var(--grey100);
}
.check:last-child { border-bottom: none; }
.check input {
  appearance: none; width: 24px; height: 24px; margin: 0; flex-shrink: 0;
  border-radius: 50%; background: var(--grey200); cursor: pointer; position: relative;
  transition: background .15s;
}
.check input::after {
  content: ""; position: absolute; left: 8px; top: 4px; width: 6px; height: 11px;
  border: solid var(--card); border-width: 0 2.5px 2.5px 0; transform: rotate(45deg);
}
.check input:checked { background: var(--blue); }
.check-name { flex: 1; font-weight: 500; }
.check-note { display: block; font-size: 12px; color: var(--grey500); font-weight: 500; }
.check-group {
  margin: 14px 0 2px; padding: 8px 12px; border-radius: 10px;
  background: var(--blue-soft); color: var(--blue); font-size: 13px; font-weight: 700;
}
.check-amount { color: var(--grey500); font-weight: 600; font-size: 14px; font-variant-numeric: tabular-nums; }
.check:has(input:checked) .check-amount { color: var(--blue); }

/* 예식별 인건비 · 비용 항목 */
.labor-box { background: var(--grey50); border-radius: 14px; padding: 10px 16px; }
.labor-box .kv b { font-size: 17px; }
.labor-box p { margin: 2px 0 6px; line-height: 1.6; }
.item-list { display: flex; flex-direction: column; gap: 8px; }
.item-list:not(:empty) { margin-bottom: 10px; }
.item-row { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) 36px; gap: 8px; align-items: center; }
.item-row input { height: 46px; }
.item-row .input-won input { font-size: 16px; }
.chips.wrap { flex-wrap: wrap; }
.chips.wrap button { background: var(--grey100); height: 34px; font-size: 13.5px; }
.chips.wrap button:hover { background: var(--grey200); }

/* 칩 (필터, 빠른 추가) */
.chips { display: flex; gap: 8px; overflow-x: auto; scrollbar-width: none; padding: 2px 0; }
.chips::-webkit-scrollbar { display: none; }
.chips button {
  flex-shrink: 0; height: 36px; padding: 0 14px; border-radius: 6px;
  border: 1px solid var(--grey200); background: var(--card); color: var(--grey700);
  font: inherit; font-size: 14px; font-weight: 600; cursor: pointer;
  transition: background .15s, color .15s;
}
.chips button:hover { background: var(--grey200); }
.chips button.active { background: var(--blue); border-color: var(--blue); color: var(--on-navy); }

/* 키-값 줄 */
.kv { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding: 7px 0; }
.kv > span:first-child { color: var(--grey600); }
.kv b, .kv span:last-child { font-variant-numeric: tabular-nums; }
.kv.total { padding-top: 12px; }
.kv.total b { font-size: 24px; letter-spacing: -0.02em; }
.divider { height: 1px; background: var(--grey100); margin: 10px 0; }

.kv-list { margin: 0; }
.kv-list > div { display: flex; justify-content: space-between; gap: 16px; padding: 9px 0; }
.kv-list dt { color: var(--grey500); flex-shrink: 0; }
.kv-list dd { margin: 0; text-align: right; font-weight: 500; word-break: break-word; white-space: pre-wrap; }

.note-box {
  margin: 14px 0 0; padding: 12px 14px; border-radius: 12px;
  background: var(--grey50); color: var(--grey700); font-size: 14px;
}
.note-box.warn { background: var(--orange-soft); color: #11294F; margin: 0 0 14px; }

/* =========================================================
 * 대시보드
 * ========================================================= */
.dash { display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.dash-col { min-width: 0; }

/* 이번 달 매출: 장부 첫 장처럼 숫자만 크게 */
.hero { position: relative; overflow: hidden; padding: 26px 26px 18px; }
.hero-top { display: flex; align-items: center; justify-content: space-between; }
.hero-label { font-size: 16px; font-weight: 600; color: var(--grey700); }
.hero-value {
  font-size: clamp(36px, 6vw, 52px); font-weight: 700; letter-spacing: -0.04em;
  color: var(--blue); line-height: 1.15; margin: 8px 0 10px;
  font-variant-numeric: tabular-nums;
}
.hero-sub { font-size: 14px; color: var(--grey600); }
.hero-sub b { color: var(--grey900); margin-left: 2px; }
.progress { height: 6px; background: var(--grey200); border-radius: 0; overflow: hidden; margin: 12px 0 18px; }
.progress span { display: block; height: 100%; width: 0; background: var(--blue); border-radius: 0; transition: width .6s cubic-bezier(.2,.8,.2,1); }
.hero-rows { border-top: 1px solid var(--grey300); padding: 8px 0 0; }
.hero-rows .kv + .kv { border-top: 1px dotted var(--grey300); }
.hero-rows b { font-size: 17px; }
.hero-note { margin: 2px 0 6px; font-size: 12.5px; color: var(--grey500); }
.hero-link { display: flex; justify-content: center; gap: 4px; margin-top: 14px; font-size: 14px; font-weight: 600; color: var(--grey500); }
.hero-link:hover { color: var(--blue); }

.stats { padding: 8px 10px; }
.stat {
  display: flex; align-items: center; gap: 14px;
  padding: 14px 12px; border-radius: 6px; transition: background .15s;
}
.stat + .stat { border-top: 1px solid var(--rule); }
.stat:hover { background: var(--grey50); }
.icon-circle { display: none; }   /* 장부 톤: 이모지 동그라미 아이콘은 쓰지 않음 */
.icon-circle.blue { background: var(--blue-soft); }
.icon-circle.orange { background: var(--orange-soft); }
.icon-circle.green { background: var(--green-soft); }
.stat-text { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.stat-label { font-weight: 600; color: var(--grey800); }
.stat-sub { font-size: 13px; color: var(--grey500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stat-value { font-size: 19px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* 예약 줄 (대시보드·목록 공통) */
.rows { list-style: none; margin: 0 -10px; padding: 0; }
.row {
  display: flex; align-items: center; gap: 14px;
  padding: 12px 10px; border-radius: 6px; transition: background .15s;
}
.row:hover { background: var(--grey50); }
.row.is-past { opacity: .5; }
.dash-todo .row.is-past { opacity: 1; }   /* 확인할 항목은 지난 예식이어도 또렷하게 */
.row-date {
  width: 46px; flex-shrink: 0; text-align: center; line-height: 1.2;
  background: none; border-right: 1px solid var(--grey300); border-radius: 0; padding: 2px 0;
}
.row-date b { display: block; font-size: 18px; font-variant-numeric: tabular-nums; }
.row-date span { font-size: 12px; color: var(--grey600); font-weight: 600; }
.row-main { flex: 1; min-width: 0; }
.row-title, .row-sub, .row-amount, .row-status { display: block; }
.row-title { font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-sub { font-size: 13px; color: var(--grey500); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.row-right { text-align: right; flex-shrink: 0; }
.row-amount { font-weight: 700; font-variant-numeric: tabular-nums; }
.row-status { font-size: 13px; font-weight: 600; white-space: nowrap; }
.row-status.paid { color: var(--grey900); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.row-status.deposit { color: var(--orange); }
.row-status.unpaid { color: var(--grey900); font-weight: 800; }
.row-status.none { color: var(--grey500); }
.rows .empty { color: var(--grey500); padding: 18px 10px; font-size: 14px; text-align: center; }
.rows .more a { display: block; text-align: center; padding: 10px; color: var(--grey500); font-size: 14px; font-weight: 600; border-radius: 12px; }
.rows .more a:hover { background: var(--grey50); color: var(--blue); }

/* 날씨 */
.weather-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.weather-head h2 { margin: 0; }
.weather-now { font-size: 15px; font-weight: 600; color: var(--grey700); }
.weather-days { display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px; }
.wday { text-align: center; padding: 10px 2px 8px; border-radius: 14px; }
.wday.has-event { background: var(--blue-soft); }
.wday-label { font-size: 12.5px; color: var(--grey600); font-weight: 600; }
.wday-icon { font-size: 22px; line-height: 1.6; }
.wday-temp { font-size: 13px; font-weight: 700; font-variant-numeric: tabular-nums; }
.wday-temp span { color: var(--grey500); font-weight: 500; }
.wday-event { font-size: 12px; color: var(--blue); font-weight: 700; min-height: 17px; margin-top: 2px; }

/* 차트 */
.legend { display: flex; gap: 14px; font-size: 13px; color: var(--grey600); margin: -4px 0 8px; }
.dot { display: inline-block; width: 9px; height: 9px; border-radius: 3px; margin-right: 6px; vertical-align: 0; }
.dot.received { background: var(--blue); }
.dot.rest { background: var(--blue-light); }
.chart { position: relative; }
.chart svg { width: 100%; height: auto; display: block; overflow: visible; }
.chart .grid { stroke: var(--grey100); stroke-width: 1; }
.chart .grid.base { stroke: var(--grey200); }
.chart .axis { fill: var(--grey500); font-size: 12px; }
.chart .value { fill: var(--grey800); font-size: 12px; font-weight: 700; }
.chart .month { fill: var(--grey500); font-size: 13px; font-weight: 600; }
.chart .month.current { fill: var(--grey900); font-weight: 800; }
.chart .bar-received { fill: var(--blue); }
.chart .bar-rest { fill: var(--blue-light); }
.chart .hit { fill: transparent; cursor: pointer; }
.chart .hit:hover { fill: rgba(0, 0, 0, .025); }
.chart .tooltip {
  position: absolute; top: 0; z-index: 2; pointer-events: none;
  background: var(--grey800); color: var(--on-navy); border-radius: 12px;
  padding: 12px 14px; font-size: 13px; min-width: 200px;
  box-shadow: 0 8px 24px rgba(0,0,0,.18);
}
.chart .tooltip strong { display: block; margin-bottom: 6px; font-size: 14px; }
.chart .tooltip div { display: flex; align-items: center; color: var(--grey300); padding: 1px 0; }
.chart .tooltip b { margin-left: auto; padding-left: 14px; color: var(--on-navy); font-variant-numeric: tabular-nums; }
.chart .tooltip .tip-sep { border-top: 1px solid rgba(255,255,255,.12); margin-top: 6px; padding-top: 6px; }
.chart .tooltip .dot.rest { background: var(--blue-light); }
.chart-table-wrap { margin-top: 8px; font-size: 13px; color: var(--grey500); }
.chart-table-wrap summary { cursor: pointer; font-weight: 600; }
.mini-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; color: var(--grey700); }
.mini-table th, .mini-table td { padding: 7px 6px; border-bottom: 1px solid var(--grey100); text-align: right; }
.mini-table th:first-child, .mini-table td:first-child { text-align: left; }

/* =========================================================
 * 페이지 공통 (목록·입력·설정)
 * ========================================================= */
.page-title { margin: 8px 0 18px; }
.page-title .muted { margin: 6px 0 0; }
.page-title.row-between { display: flex; align-items: center; justify-content: space-between; gap: 12px; }
.kicker { margin: 0 0 4px; font-size: 14px; font-weight: 600; color: var(--blue); }

.form-grid { display: grid; grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); gap: 14px; align-items: start; }
.form-col { min-width: 0; }
.summary-card .kv { font-size: 15px; }

.cta-bar {
  grid-column: 1 / -1;
  display: flex; justify-content: flex-end; gap: 8px;
}
.cta-bar .btn.primary { min-width: 200px; }

/* 목록 */
.list-summary { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; padding: 18px 22px; }
.list-summary span { display: block; font-size: 13px; color: var(--grey500); font-weight: 600; }
.list-summary b { font-size: 18px; letter-spacing: -0.02em; font-variant-numeric: tabular-nums; }
.filters { display: flex; flex-direction: column; gap: 8px; margin-bottom: 18px; }
.search-box {
  display: flex; align-items: center; gap: 10px;
  height: 50px; padding: 0 8px 0 16px; border-radius: 8px; background: var(--card); border: 1px solid var(--grey200);
  transition: box-shadow .15s;
}
.search-box:focus-within { box-shadow: 0 0 0 2px var(--blue); }
.search-box svg { width: 20px; height: 20px; fill: var(--grey400); flex-shrink: 0; }
.search-box input {
  flex: 1; min-width: 0; height: 100%; padding: 0; border: none; background: none;
  font: inherit; font-size: 16px; font-weight: 500; color: var(--grey900);
}
.search-box input:focus { outline: none; box-shadow: none; background: none; }
.search-box input::-webkit-search-cancel-button { display: none; }
.search-clear {
  width: 32px; height: 32px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--grey200); color: var(--grey600); font-size: 18px; line-height: 1;
}.date-range { display: flex; align-items: center; gap: 8px; color: var(--grey500); }
input[type="date"] {
  height: 38px; padding: 0 12px; border: 1px solid var(--grey200); border-radius: 8px;
  background: var(--card); color: var(--grey800); font: inherit; font-size: 14px; font-weight: 600;
}
input[type="date"]:focus { outline: none; box-shadow: 0 0 0 2px var(--blue); }

.month-group { margin-bottom: 14px; }
.month-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 6px 8px; }
.month-head b { font-size: 16px; }
.month-head span { font-size: 13px; color: var(--grey500); font-weight: 600; font-variant-numeric: tabular-nums; }
.month-group .rows { background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); margin: 0; padding: 8px; }
.empty-box { text-align: center; padding: 60px 16px; color: var(--grey500); background: var(--card); border: 1px solid var(--rule); border-radius: var(--radius); }

/* 비용 설정 */
.cost-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.cost-item { background: var(--grey50); border-radius: 16px; padding: 14px; }
.cost-item-top { display: flex; gap: 8px; align-items: center; }
.cost-item-top input[type="text"] { height: 44px; background: var(--card); font-weight: 600; }
.cost-del {
  width: 36px; height: 36px; flex-shrink: 0; border: none; border-radius: 10px; cursor: pointer;
  background: none; color: var(--grey500); font-size: 20px; line-height: 1;
}
.cost-del:hover { background: var(--red-soft); color: var(--red); }
.cost-item-bottom { display: grid; grid-template-columns: minmax(0, 1.3fr) minmax(0, 1fr); gap: 8px; margin-top: 8px; }
.cost-item-bottom select, .cost-item-bottom input { height: 44px; background: var(--card); font-size: 15px; }
.cost-item .input-won input { font-size: 16px; }
.cost-hint { font-size: 12.5px; color: var(--grey500); margin-top: 6px; }
.quick-add { margin-top: 16px; }
.quick-add > span { display: block; font-size: 13px; font-weight: 600; margin-bottom: 8px; }
.quick-add .chips { flex-wrap: wrap; }
.quick-add .chips button { background: var(--grey100); }
.preview-block + .preview-block { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--grey100); }
.preview-title { font-size: 13px; font-weight: 700; color: var(--grey500); margin-bottom: 4px; }

/* 가입 승인 대기 알림 */
.nav-badge {
  display: inline-block; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px;
  border-radius: 999px; background: var(--red); color: var(--on-navy);
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; vertical-align: 1px;
}
.tabbar a { position: relative; }
.nav-badge.tab { position: absolute; top: 6px; left: calc(50% + 6px); margin: 0; }
.signup-alert {
  display: flex; align-items: center; gap: 12px;
  background: var(--card); border-radius: var(--radius); padding: 14px 18px; margin-bottom: 14px;
  box-shadow: inset 0 0 0 2px var(--blue-light);
}
.signup-alert b { display: block; }
.signup-alert small { color: var(--grey500); font-size: 13px; }
.signup-alert .arrow { margin-left: auto; font-size: 22px; color: var(--grey500); }

/* 목록 / 달력 전환 (매출관리 배정 현황 · 스태프 앱 공통) */
.board-tools { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 14px; }
.board-tools .chips { min-width: 0; }
.board-tools .segmented { flex-shrink: 0; }

/* 달력 — 예식프로그램 달력과 같은 모양 (오늘 = 남색 원, 건수 = 알약) */
.calendar { padding: 18px 14px 14px; }
.cal-head { display: flex; align-items: center; gap: 12px; margin: 0 4px 12px; }
.cal-head b { font-size: 19px; order: 1; }
.cal-head [data-cal="-1"] { order: 0; }
.cal-head [data-cal="1"] { order: 2; }
.cal-nav {
  width: 38px; height: 38px; border: none; border-radius: 50%; cursor: pointer;
  background: var(--grey100); color: var(--grey600); font-size: 18px; line-height: 1;
}
.cal-grid { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 2px; }   /* 칸 폭 고정 (글자가 길어도 안 밀림) */
.cal-week span { text-align: center; font-size: 12.5px; font-weight: 600; color: var(--grey600); padding: 4px 0 8px; }
.cal-week span:first-child { color: var(--gold-ink); }   /* 일요일: 빨강 대신 진한 금색 */
.cal-week span:last-child { color: var(--grey700); }
.cal-cell {
  min-width: 0; min-height: 58px; aspect-ratio: 1 / 1.1;
  border: none; background: none; border-radius: 6px; cursor: pointer;
  display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 4px;
  padding: 6px 0 0; font: inherit; color: var(--grey800);
}
.cal-cell.empty { cursor: default; }
.cal-cell:not(.empty):hover { background: var(--grey50); }
.cal-cell.sun .cal-num { color: var(--gold-ink); }
.cal-cell.past .cal-num { color: var(--grey500); }
.cal-num { font-size: 15px; font-weight: 700; width: 30px; height: 30px; line-height: 30px; border-radius: 50%; }
.cal-cell.today .cal-num { background: var(--blue); color: var(--on-navy); }
.cal-cell.selected { background: var(--blue-soft); }
.cal-marks { display: flex; flex-wrap: wrap; justify-content: center; gap: 3px; align-items: center; min-height: 18px; }
.mark { display: inline-block; font-style: normal; }
.mark.open, .mark.done, .mark.short {
  height: 18px; padding: 0 7px; border-radius: 999px;
  font-size: 12px; font-weight: 700; line-height: 18px; text-align: center; white-space: nowrap;
}
.mark.open { background: var(--blue-soft); color: var(--blue); }
@media (max-width: 480px) {
  .calendar { padding: 14px 6px 12px; }
  .mark.open, .mark.done, .mark.short { padding: 0 4px; font-size: 12px; letter-spacing: -0.04em; }
  .cal-num { font-size: 14px; width: 26px; height: 26px; line-height: 26px; }
}
.mark.done { background: var(--green-soft); color: var(--green); }
.mark.short { background: var(--orange-soft); color: var(--orange); }
.mark.applied, .mark.mine { width: 7px; height: 7px; border-radius: 50%; }
.mark.applied { background: var(--orange); }
.mark.mine { background: var(--green); }
.cal-legend { display: flex; justify-content: center; flex-wrap: wrap; gap: 14px; margin-top: 10px; font-size: 12px; color: var(--grey500); }
.cal-legend span { display: flex; align-items: center; gap: 5px; }

/* 오늘 예식: 스태프 기상 · 출발 · 도착 */
.today-board { padding: 18px 20px; box-shadow: inset 0 0 0 2px var(--blue); }
.today-board .card-head { margin-bottom: 6px; }
.today-event { padding: 12px 0; border-top: 1px solid var(--grey100); }
.today-event:first-of-type { border-top: none; }
.today-event-title { font-weight: 700; }
.today-event-title small { color: var(--grey500); font-weight: 500; margin-left: 6px; }
.check-table { width: 100%; border-collapse: collapse; margin-top: 8px; font-variant-numeric: tabular-nums; }
.check-table th { font-size: 12px; color: var(--grey500); font-weight: 600; text-align: center; padding: 4px; }
.check-table th:first-child, .check-table td:first-child { text-align: left; }
.check-table td { padding: 8px 4px; text-align: center; border-top: 1px solid var(--grey100); font-weight: 600; }
.check-table td.ok { color: var(--grey900); font-weight: 800; }
.check-table td.wait { color: var(--grey300); }
.check-table td.late { color: var(--orange); }
.check-mini { font-size: 12px; margin-left: 2px; opacity: .85; }

/* 알림 켜기 카드 */
.push-card {
  display: flex; align-items: center; gap: 12px; padding: 14px 18px; margin: 4px 0 14px;
  background: var(--card);
}
.push-text { flex: 1; min-width: 0; }
.push-text b { display: block; }
.push-text small { display: block; color: var(--grey600); font-size: 13px; line-height: 1.5; }
.push-card .btn { flex-shrink: 0; }

/* 배정 현황 */
.team-card { padding: 16px 20px; }
.team-card.is-short { box-shadow: inset 3px 0 0 var(--orange); }
.team-status { display: block; font-size: 12.5px; font-weight: 700; }
.team-status.done { color: var(--grey900); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.team-status.short { color: var(--orange); }
.team-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 12px 0 4px; }
.name-chip {
  display: inline-flex; align-items: center; gap: 4px;
  height: 30px; padding: 0 12px; border-radius: 999px; font-size: 13.5px; font-weight: 600;
}
.name-chip.fixed { background: var(--grey100); color: var(--grey700); }
.name-chip.confirmed { background: var(--green-soft); color: var(--green); }
.name-chip.applied { background: var(--orange-soft); color: var(--orange); }
.name-chip button {
  border: none; background: rgba(0,0,0,.08); color: inherit; cursor: pointer;
  width: 18px; height: 18px; border-radius: 50%; font-size: 13px; line-height: 1; padding: 0; margin-right: -6px;
}
.final-note {
  margin: 10px 0 0; padding: 9px 12px; border-radius: 12px;
  background: var(--green-soft); color: var(--green); font-weight: 700; font-size: 14px;
}
.final-note small { color: var(--grey600); font-weight: 500; margin-left: 4px; }
.brief-editor { margin-top: 12px; padding-top: 12px; border-top: 1px solid var(--grey100); }
.brief-head b { display: block; }
.brief-head small { display: block; color: var(--grey500); font-size: 12.5px; margin: 2px 0 8px; }
.brief-editor textarea { font-size: 14px; line-height: 1.65; background: var(--grey50); }
.team-editor { margin-top: 10px; padding-top: 4px; border-top: 1px solid var(--grey100); }
.assign-row { display: flex; gap: 8px; }
.assign-row select, .assign-row input { flex: 1; min-width: 0; height: 46px; }
.assign-row .btn { height: 46px; }
#staff-tabs button { font-size: 14px; padding: 9px 6px; }

/* 스태프 관리 (대표님) */
.job-admin { padding: 18px 20px; }
.job-admin .assigned { margin: 8px 0 12px; }
.job-pill { flex-shrink: 0; font-size: 12.5px; font-weight: 700; padding: 3px 10px; border-radius: 999px; }
.job-pill.open { background: var(--blue-soft); color: var(--blue); }
.job-pill.closed { background: var(--grey100); color: var(--grey600); }
.job-meta { display: flex; flex-wrap: wrap; gap: 6px 16px; font-size: 14px; color: var(--grey600); margin-bottom: 6px; }
.job-meta b { color: var(--grey900); }
.applicants { margin: 10px 0 12px; border-top: 1px solid var(--grey100); }
.applicant { display: flex; align-items: center; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--grey100); }
.applicant.rejected { opacity: .55; }
.applicant-name { flex: 1; min-width: 0; font-weight: 600; }
.applicant-name small { display: block; font-weight: 500; }
.applicant-name a { color: var(--grey500); }
.applicant-status { font-size: 13px; font-weight: 700; flex-shrink: 0; }
.applicant-status.applied { color: var(--orange); }
.applicant-status.confirmed { color: var(--grey900); text-decoration: underline; text-decoration-color: var(--gold); text-decoration-thickness: 2px; text-underline-offset: 3px; }
.applicant-status.rejected { color: var(--grey500); }
.applicant-btns { display: flex; gap: 6px; flex-shrink: 0; }
.post-actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 12px; }
.post-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.post-grid .field, .post-form > .field:first-of-type { margin-top: 0; }
#staff-tabs .count-badge { margin-left: 4px; }

/* 로그인 */
.login { max-width: 380px; margin: 8vh auto 0; text-align: center; display: flex; flex-direction: column; gap: 10px; }
.login h1 { font-size: 24px; }
.login .muted { margin: 0 0 14px; }
.login input { background: var(--card); }   /* 회색 배경 위에서도 입력칸이 보이게 */
.error { color: var(--grey900); font-weight: 700; font-size: 14px; min-height: 1em; margin: 2px 0; }
.error:not(:empty)::before { content: '주의  '; font-weight: 800; border-bottom: 2px solid var(--gold); margin-right: 2px; }

/* 비용 설정 아래 비밀번호 변경 */
.password-card { display: flex; flex-direction: column; gap: 10px; max-width: 480px; margin-top: 20px; }
.password-card h2 { margin-bottom: 0; }

/* 알림 */
.toast {
  position: fixed; left: 50%; bottom: 32px; z-index: 60;
  transform: translate(-50%, 16px); opacity: 0; pointer-events: none;
  background: var(--toast-bg); color: var(--on-navy); font-weight: 600;
  padding: 13px 20px; border-radius: 8px; font-size: 15px;
  transition: opacity .2s, transform .2s;
  max-width: calc(100% - 32px);
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }

/* =========================================================
 * 휴대폰 (760px 이하)
 * ========================================================= */
@media (max-width: 760px) {
  :root { --radius: 10px; }
  .appbar-inner { padding: 0 16px; height: 54px; }
  .nav { display: none; }
  #logout-btn { margin-left: auto; }

  .container { padding: 4px 16px calc(var(--tabbar-h) + 100px + env(safe-area-inset-bottom)); }
  .card { padding: 20px 18px; }

  .tabbar {
    display: flex; position: fixed; left: 0; right: 0; bottom: 0; z-index: 40;
    height: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding-bottom: env(safe-area-inset-bottom);
    background: rgba(238, 241, 246,.97); backdrop-filter: blur(16px);
    border-top: 1px solid var(--grey300);
  }
  .tabbar a {
    flex: 1; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
    font-size: 12px; font-weight: 600; color: var(--grey500);
  }
  .tabbar svg { width: 24px; height: 24px; fill: currentColor; }
  .tabbar a.active { color: var(--blue); }

  /* 대시보드: 한 줄로, 중요한 순서대로 */
  .dash { display: flex; flex-direction: column; align-items: stretch; gap: 0; }
  .dash-col { display: contents; }
  .hero { order: 1; }
  .stats { order: 2; }
  .dash-upcoming { order: 3; }
  .dash-weather { order: 4; }
  .dash-todo { order: 5; }
  .chart-card { order: 6; }
  .hero { padding: 24px 20px 16px; }

  .form-grid { grid-template-columns: 1fr; gap: 0; }
  .cta-bar {
    position: fixed; left: 0; right: 0; z-index: 35;
    bottom: calc(var(--tabbar-h) + env(safe-area-inset-bottom));
    padding: 12px 16px; background: linear-gradient(rgba(238, 241, 246,0), var(--bg) 30%);
  }
  .cta-bar .btn.primary { flex: 1; min-width: 0; }

  .list-summary { grid-template-columns: 1fr 1fr; padding: 16px 18px; }
  .page-title h1 { font-size: 24px; }
  .row { gap: 12px; }
  .date-range input { flex: 1; min-width: 0; }
  .toast { bottom: calc(var(--tabbar-h) + 24px); }
}

/* ---------- 할인 인증 (고객 화면 카드 · 대표님 고객 상세 공통) ---------- */
.proof-card { margin-top: 12px; border-color: var(--grey300); }
.proof-disc { margin-top: 14px; padding-top: 12px; border-top: 1px dotted var(--grey300); }
.proof-card > p, .proof-admin p { word-break: keep-all; }
.proof-disc-head { display: flex; align-items: baseline; justify-content: space-between; gap: 8px; }
.proof-disc-head b { font-size: 15px; }
.proof-disc-head em { font-style: normal; font-size: 13px; color: var(--grey600); font-variant-numeric: tabular-nums; }
.proof-card .proof-due { margin: 2px 0 8px; font-size: 12.5px; color: var(--grey500); }
.proof-slot { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--grey50); }
.proof-slot-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 8px; }
.proof-slot-head b { font-size: 14px; }
.proof-state { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--grey100); color: var(--grey600); }
.proof-state.blue { background: var(--blue-soft); color: var(--blue); }
.proof-state.green { background: var(--green-soft); color: var(--green); }
.proof-state.red { background: var(--red-soft); color: var(--grey900); font-weight: 800; }
.proof-note { margin: 0 0 8px; font-size: 13px; color: var(--grey900); font-weight: 700; line-height: 1.5; }
.proof-thumb { display: block; max-width: 100%; max-height: 220px; border-radius: 6px; border: 1px solid var(--grey300); margin: 0 0 8px; background: var(--card); object-fit: contain; }
.proof-thumb.picked { outline: 2px solid var(--blue); }
.proof-thumb-link { display: inline-block; cursor: zoom-in; }
.proof-row { display: flex; gap: 8px; align-items: center; }
.proof-row input[type="url"] { flex: 1; min-width: 0; }
.proof-pick { display: inline-flex; align-items: center; cursor: pointer; }
.proof-link { margin: 0 0 8px; font-size: 13px; overflow-wrap: anywhere; }
.proof-link a:not(.btn) { color: var(--blue); text-decoration: underline; text-underline-offset: 3px; }
.proof-purge { margin-top: 16px; text-align: center; }
.tag.blue { background: var(--blue-soft); color: var(--blue); }

/* 현금영수증 (고객 화면 · 대표님 고객 상세) */
.receipt-card { margin-top: 12px; border-color: var(--grey300); }
.receipt-card > p, .receipt-admin p { word-break: keep-all; }
.receipt-item { margin-top: 10px; padding: 12px; border-radius: 8px; background: var(--grey50); }
.receipt-item-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-bottom: 4px; }
.receipt-item-head b { font-size: 14px; overflow-wrap: anywhere; }
.receipt-kind { font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: 999px; white-space: nowrap; background: var(--grey100); color: var(--grey600); }
.receipt-meta { margin: 0 0 8px; font-size: 12.5px; color: var(--grey500); }
.receipt-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.receipt-form { margin-top: 12px; padding-top: 12px; border-top: 1px dotted var(--grey300); display: grid; gap: 8px; }
.receipt-form label.small { display: grid; gap: 4px; }
.receipt-edit { display: grid; gap: 8px; margin: 8px 0; }
.receipt-picked { margin: 0; font-size: 12.5px; color: var(--grey600); overflow-wrap: anywhere; }
.receipt-orphans { margin-top: 16px; font-size: 13px; }
.receipt-orphans summary { cursor: pointer; color: var(--grey600); }


/* 짝꿍코드 칸 (대표님 고객 상세·예식 화면): 문장마다 한 줄, 낱말 중간에서 끊지 않고, 숫자와 단위는 붙여서 */
.pair-usage { word-break: keep-all; overflow-wrap: break-word; line-break: strict; text-wrap: pretty; }
.pair-usage .nw, .nw { white-space: nowrap; }
.pair-usage .pu-line { display: block; }
.pair-usage .kv-list dt { flex-shrink: 1; }
.pair-usage .kv-list dt small { display: block; font-weight: 400; font-size: 12.5px; line-height: 1.5; }
.pair-usage .kv-list dd { white-space: normal; }
.pair-usage .kv-list dd .pu-line + .pu-line { margin-top: 2px; }
.pair-usage .receipt-actions { gap: 8px 12px; flex-wrap: wrap; }
.pair-usage .pu-note { margin-top: 12px; line-height: 1.7; }
.pair-usage .card-head { flex-wrap: wrap; gap: 4px 12px; }