:root {
  --background: #f7f5f2;
  --foreground: #1f2933;
  --surface: #ffffff;
  --surface-muted: #ebe7e0;
  --line: #ddd6cb;
  --accent: #116466;
  --accent-strong: #0b4f50;
  --accent-soft: #d8ece9;
}

* {
  box-sizing: border-box;
}

html {
  min-height: 100%;
  background: var(--background);
}

body {
  min-height: 100vh;
  margin: 0;
  color: var(--foreground);
  background: var(--background);
  font-family: Inter, ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  font: inherit;
}

.page-shell {
  min-height: 100vh;
}

.content-frame {
  width: min(100% - 40px, 1180px);
  margin: 0 auto;
}

.hero-band {
  border-bottom: 1px solid var(--line);
  background: var(--surface);
}

.hero-layout {
  display: flex;
  flex-direction: column;
  gap: 32px;
  padding: 32px 0;
}

.hero-header {
  display: flex;
  gap: 24px;
  align-items: center;
  justify-content: space-between;
}

.eyebrow {
  margin: 0 0 8px;
  color: var(--accent);
  font-size: 0.8rem;
  font-weight: 700;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

h1,
h2,
h3,
p {
  margin: 0;
}

h1 {
  color: #13211f;
  font-size: clamp(2rem, 1.6rem + 1.2vw, 3rem);
  font-weight: 700;
  letter-spacing: 0;
}

.hero-copy {
  max-width: 720px;
  margin-top: 12px;
  color: #66736e;
  line-height: 1.7;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
}

.primary-action,
.secondary-action {
  display: inline-flex;
  min-height: 42px;
  align-items: center;
  border-radius: 6px;
  padding: 0 16px;
  font-size: 0.92rem;
  font-weight: 700;
}

.primary-action {
  background: var(--accent);
  color: #ffffff;
}

.secondary-action {
  border: 1px solid var(--line);
  color: #263532;
}

.metric-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.metric-card,
.service-panel,
.pipeline-table {
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
}

.metric-card {
  padding: 20px;
  background: var(--background);
}

.metric-label {
  color: #56635f;
  font-size: 0.9rem;
  font-weight: 600;
}

.metric-value {
  margin-top: 8px;
  color: #13211f;
  font-size: 2rem;
  font-weight: 750;
}

.metric-caption {
  margin-top: 8px;
  color: #66736e;
  font-size: 0.94rem;
  line-height: 1.6;
}

.operations-grid {
  display: grid;
  grid-template-columns: minmax(0, 1.2fr) minmax(280px, 0.8fr);
  gap: 32px;
  padding: 32px 0;
}

.section-heading {
  display: flex;
  flex-wrap: wrap;
  gap: 20px;
  align-items: end;
  justify-content: space-between;
  margin-bottom: 16px;
}

.section-heading h2,
.service-panel h2 {
  color: #13211f;
  font-size: 1.3rem;
}

.section-heading p {
  margin-top: 6px;
  color: #66736e;
  font-size: 0.95rem;
  line-height: 1.6;
}

.filter-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}

.filter-toggle button {
  min-height: 36px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #56635f;
  cursor: pointer;
  padding: 0 12px;
}

.filter-toggle button:last-child {
  border-right: 0;
}

.filter-toggle button.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}

.pipeline-table {
  overflow: hidden;
}

.pipeline-head,
.pipeline-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) 72px;
  gap: 16px;
  align-items: start;
}

.pipeline-head {
  border-bottom: 1px solid var(--line);
  background: var(--surface-muted);
  padding: 12px 16px;
  color: #3f4d49;
  font-size: 0.9rem;
  font-weight: 700;
}

.pipeline-head span:last-child,
.pipeline-row strong {
  text-align: right;
}

.pipeline-row {
  border-bottom: 1px solid var(--line);
  padding: 16px;
}

.pipeline-row:last-child {
  border-bottom: 0;
}

.pipeline-row h3 {
  color: #172622;
  font-size: 1rem;
}

.pipeline-row p {
  margin-top: 6px;
  color: #66736e;
  font-size: 0.94rem;
  line-height: 1.6;
}

.pipeline-row strong {
  color: var(--accent-strong);
  font-size: 0.95rem;
}

.service-panel {
  padding: 20px;
}

.service-list {
  display: grid;
  gap: 12px;
  margin-top: 16px;
}

.service-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  border-radius: 6px;
  background: var(--background);
  padding: 13px 14px;
}

.service-item span {
  color: #172622;
  font-size: 0.95rem;
  font-weight: 650;
}

.service-item small,
.updated-at {
  color: #66736e;
  font-size: 0.88rem;
}

.updated-at {
  margin-top: 18px;
}

@media (max-width: 820px) {
  .content-frame {
    width: min(100% - 32px, 1180px);
  }

  .hero-header,
  .section-heading {
    align-items: stretch;
    flex-direction: column;
  }

  .metric-grid,
  .operations-grid {
    grid-template-columns: 1fr;
  }

  .hero-actions,
  .filter-toggle {
    width: 100%;
  }

  .primary-action,
  .secondary-action,
  .filter-toggle button {
    flex: 1;
    justify-content: center;
  }
}

@media (max-width: 520px) {
  .content-frame {
    width: min(100% - 24px, 1180px);
  }

  .hero-layout,
  .operations-grid {
    padding: 24px 0;
  }

  .pipeline-head,
  .pipeline-row {
    grid-template-columns: minmax(0, 1fr) 52px;
  }
}

/* --- 회원가입 / 마이페이지 / 인증 결과 --- */
.form-band {
  display: flex;
  min-height: 100vh;
  padding: 40px 0;
}

.form-frame {
  width: min(100% - 40px, 560px);
  margin: auto;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 32px;
}

.form-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 20px;
}

.lang-toggle {
  display: inline-flex;
  gap: 8px;
  align-items: center;
  color: #66736e;
  font-size: 0.85rem;
  font-weight: 600;
}

.lang-toggle a.active {
  color: var(--accent-strong);
  font-weight: 800;
  text-decoration: underline;
}

.form-copy {
  margin-top: 10px;
  color: #66736e;
  line-height: 1.7;
}

.member-form {
  display: grid;
  gap: 18px;
  margin-top: 24px;
}

.form-field {
  display: grid;
  gap: 6px;
}

.form-field label {
  color: #3f4d49;
  font-size: 0.9rem;
  font-weight: 700;
}

.form-field input,
.form-field select {
  min-height: 44px;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  padding: 0 12px;
}

.form-field input:focus,
.form-field select:focus {
  border-color: var(--accent);
  outline: 2px solid var(--accent-soft);
}

.field-hint {
  color: #66736e;
  font-size: 0.85rem;
}

.field-error {
  color: #a3271f;
  font-size: 0.85rem;
  font-weight: 600;
}

.form-alert {
  margin-top: 18px;
  border-radius: 6px;
  padding: 12px 14px;
  font-size: 0.92rem;
  line-height: 1.6;
}

.form-alert.error {
  border: 1px solid #e5b6b2;
  background: #fbeeed;
  color: #a3271f;
}

.form-alert.notice {
  border: 1px solid #bcd8d2;
  background: var(--accent-soft);
  color: var(--accent-strong);
}

.form-submit {
  justify-content: center;
  border: 0;
  cursor: pointer;
  margin-top: 6px;
}

.form-footnote {
  margin-top: 18px;
  color: #66736e;
  font-size: 0.9rem;
}

.form-footnote a {
  color: var(--accent-strong);
  font-weight: 700;
}

.verify-frame {
  text-align: center;
}

.verify-frame .form-submit {
  margin-top: 24px;
}

.verify-banner {
  display: flex;
  flex-wrap: wrap;
  gap: 14px;
  align-items: center;
  justify-content: space-between;
  margin-top: 20px;
  border-radius: 8px;
  padding: 16px;
}

.verify-banner.ok {
  border: 1px solid #bcd8d2;
  background: var(--accent-soft);
}

.verify-banner.warn {
  border: 1px solid #ecd9ae;
  background: #fdf6e5;
}

.verify-banner strong {
  color: #172622;
  font-size: 0.98rem;
}

.verify-banner p {
  margin-top: 4px;
  color: #66736e;
  font-size: 0.9rem;
  line-height: 1.5;
}

.verify-banner form button {
  border: 0;
  cursor: pointer;
}

.profile-list {
  margin: 24px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.profile-row {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 13px 16px;
}

.profile-row:last-child {
  border-bottom: 0;
}

.profile-row dt {
  color: #56635f;
  font-size: 0.9rem;
  font-weight: 700;
}

.profile-row dd {
  margin: 0;
  color: #172622;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
}

.logout-form {
  margin-top: 24px;
}

.logout-form button {
  cursor: pointer;
  background: transparent;
}

@media (max-width: 520px) {
  .form-frame {
    width: min(100% - 24px, 560px);
    padding: 22px 18px;
  }

  .profile-row {
    grid-template-columns: 1fr;
    gap: 4px;
  }

  .verify-banner form,
  .verify-banner form button {
    width: 100%;
    justify-content: center;
  }
}

/* --- 병원 콘솔 (A1) --- */
[v-cloak] {
  display: none;
}

.console-shell {
  padding: 32px 0 60px;
}

.console-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 20px;
  padding: 8px 0 24px;
}

.console-header h1 {
  margin: 10px 0 8px;
  font-size: clamp(1.5rem, 3vw, 2.1rem);
}

.console-header-side {
  display: grid;
  gap: 10px;
  justify-items: end;
}

.console-account {
  margin: 0;
  color: #66736e;
  font-size: 0.85rem;
}

.console-header-side .logout-form {
  margin-top: 0;
}

.console-panel {
  margin-top: 22px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  padding: 24px;
}

.slot-form {
  display: grid;
  grid-template-columns: minmax(180px, 2fr) repeat(3, minmax(110px, 1fr)) auto;
  align-items: end;
  gap: 14px;
  margin-top: 18px;
}

.slot-form .primary-action {
  cursor: pointer;
  border: 0;
  min-height: 44px;
}

.console-table-heading {
  margin-top: 28px;
}

.console-table-heading h3 {
  margin: 0;
  font-size: 1.05rem;
}

.console-table-wrap {
  margin-top: 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow-x: auto;
}

.console-table {
  width: 100%;
  min-width: 640px;
  border-collapse: collapse;
  font-size: 0.92rem;
}

.console-table th {
  text-align: left;
  color: #56635f;
  font-size: 0.82rem;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  background: var(--surface-muted);
  padding: 10px 14px;
}

.console-table td {
  border-top: 1px solid var(--line);
  padding: 12px 14px;
  vertical-align: top;
}

.console-empty {
  color: #66736e;
  text-align: center;
  padding: 22px 14px;
}

.customer-name {
  display: block;
  font-weight: 700;
}

.customer-meta {
  display: block;
  margin-top: 3px;
  color: #66736e;
}

/* 상태 배지 — 색상 + 텍스트 병행 (색상 단독 구분 금지) */
.status-badge {
  display: inline-block;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  border: 1px solid var(--line);
  background: var(--surface-muted);
  color: #3f4d49;
}

.status-badge.slot-open {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.status-badge.slot-hold {
  background: #fdf3e0;
  border-color: #c98f2e;
  color: #7c5410;
}

.status-badge.slot-closed {
  background: #ece9e4;
  border-color: #a49c8f;
  color: #56635f;
}

.status-badge.res-approved,
.status-badge.reviewed {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.status-badge.res-pending {
  background: #fdf3e0;
  border-color: #c98f2e;
  color: #7c5410;
}

.console-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.action-btn {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: var(--foreground);
  padding: 6px 10px;
  font-size: 0.82rem;
  font-weight: 700;
}

.action-btn:disabled {
  opacity: 0.5;
  cursor: default;
}

.action-btn.approve {
  background: var(--accent);
  border-color: var(--accent);
  color: #ffffff;
}

.action-btn.danger {
  border-color: #b5484d;
  color: #93383d;
}

.link-action {
  cursor: pointer;
  border: 0;
  background: transparent;
  color: var(--accent-strong);
  font-size: 0.85rem;
  font-weight: 700;
  text-decoration: underline;
  padding: 0 0 0 6px;
}

.console-modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 30;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(31, 41, 51, 0.5);
  padding: 20px;
}

.console-modal {
  width: min(100%, 560px);
  max-height: 85vh;
  overflow-y: auto;
  border-radius: 10px;
  background: var(--surface);
  padding: 24px;
}

.console-modal h3 {
  margin: 0 0 8px;
  display: flex;
  align-items: center;
  gap: 10px;
}

.questionnaire-code {
  color: #66736e;
  font-size: 0.9rem;
  font-weight: 600;
}

/* ②-1 대체슬롯 제안 오버레이 (A1) */
.console-modal.proposal-modal {
  position: relative;
  width: min(100%, 760px);
}

.modal-close {
  position: absolute;
  top: 14px;
  right: 14px;
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  color: #56635f;
  width: 28px;
  height: 28px;
  font-size: 1rem;
  line-height: 1;
}

.proposal-request {
  margin-top: 16px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  padding: 14px 16px;
}

.proposal-request-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.proposal-request-head .customer-meta {
  display: inline;
  margin: 0;
}

.proposal-request-head .status-badge {
  margin-left: auto;
}

.status-badge.res-closed {
  background: #ece9e4;
  border-color: #a49c8f;
  color: #56635f;
}

.status-badge.hold-kept,
.status-badge.res-proposed {
  background: #fdf3e0;
  border-color: #c98f2e;
  color: #7c5410;
}

.proposal-readonly {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-top: 12px;
}

.proposal-readonly input[readonly] {
  background: var(--surface);
  color: #56635f;
}

.proposal-subtitle {
  margin: 20px 0 8px;
  font-size: 0.95rem;
}

.proposal-table td label {
  cursor: pointer;
  font-weight: 700;
}

.proposal-table tr.selected {
  background: var(--accent-soft);
}

.proposal-message {
  margin-top: 18px;
}

.proposal-note {
  margin: 18px 0 0;
  border-left: 3px solid var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  padding: 10px 12px;
  font-size: 0.85rem;
  line-height: 1.6;
}

.questionnaire-list {
  margin: 16px 0 0;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.questionnaire-list > div {
  display: grid;
  grid-template-columns: 160px minmax(0, 1fr);
  gap: 12px;
  border-bottom: 1px solid var(--line);
  padding: 12px 16px;
}

.questionnaire-list > div:last-child {
  border-bottom: 0;
}

.questionnaire-list dt {
  color: #56635f;
  font-size: 0.9rem;
  font-weight: 700;
}

.questionnaire-list dd {
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.console-modal-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 20px;
}

.console-modal-actions .primary-action,
.console-modal-actions .secondary-action {
  cursor: pointer;
  border: 1px solid var(--line);
}

.console-modal-actions .primary-action {
  border-color: var(--accent);
}

.console-modal-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 1099px) {
  .slot-form {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

@media (max-width: 559px) {
  .console-header {
    flex-direction: column;
  }

  .console-header-side {
    justify-items: start;
  }

  .slot-form {
    grid-template-columns: 1fr;
  }

  .proposal-readonly {
    grid-template-columns: 1fr;
  }

  .proposal-request-head .status-badge {
    margin-left: 0;
  }

  .console-panel {
    padding: 18px 14px;
  }

  .questionnaire-list > div {
    grid-template-columns: 1fr;
    gap: 4px;
  }
}

/* 병원 콘솔 — 자체 캘린더 팝업 (페이지 로케일로 렌더) */
.calendar-field {
  position: relative;
}

.calendar-field input {
  cursor: pointer;
}

.calendar-popup {
  position: absolute;
  top: calc(100% + 6px);
  left: 0;
  z-index: 20;
  width: 272px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  box-shadow: 0 10px 30px rgba(31, 41, 51, 0.18);
  padding: 12px;
}

.calendar-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.calendar-nav strong {
  font-size: 0.95rem;
}

.calendar-nav button {
  cursor: pointer;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
  width: 30px;
  height: 30px;
  font-size: 1rem;
  line-height: 1;
}

.calendar-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 2px;
}

.calendar-weekday {
  text-align: center;
  color: #66736e;
  font-size: 0.72rem;
  font-weight: 700;
  padding: 4px 0;
}

.calendar-day {
  cursor: pointer;
  border: 0;
  border-radius: 6px;
  background: transparent;
  color: var(--foreground);
  min-height: 32px;
  font-size: 0.86rem;
}

.calendar-day:hover:not(:disabled) {
  background: var(--accent-soft);
}

.calendar-day:disabled {
  color: #b4aea3;
  cursor: default;
}

.calendar-day.blank {
  visibility: hidden;
}

.calendar-day.selected {
  background: var(--accent);
  color: #ffffff;
  font-weight: 700;
}

/* --- C8 일정·슬롯 선택 --- */
.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  margin-top: 16px;
}

.slot-card {
  cursor: pointer;
  display: grid;
  gap: 6px;
  justify-items: start;
  text-align: left;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  color: var(--foreground);
  padding: 14px 16px;
}

.slot-card:hover:not(:disabled) {
  border-color: var(--accent);
}

.slot-card:disabled {
  cursor: default;
  background: var(--surface-muted);
  color: #8a938f;
}

.slot-card.selected {
  border-color: var(--accent);
  box-shadow: 0 0 0 2px var(--accent-soft);
  background: var(--accent-soft);
}

/* 내 홀드/내 예약 하이라이트 — 색상 + 배지 텍스트 병행 */
.slot-card.my-hold {
  border-color: #c98f2e;
  box-shadow: 0 0 0 2px #fdf3e0;
}

.slot-card.my-reservation {
  border-color: var(--accent-strong);
  box-shadow: 0 0 0 2px var(--accent-soft);
}

.slot-card-datetime {
  font-size: 0.98rem;
}

.slot-card-treatment {
  color: #56635f;
  font-size: 0.88rem;
}

.slot-card-remaining {
  color: var(--accent-strong);
  font-size: 0.82rem;
  font-weight: 700;
}

.slot-card-remaining.full {
  color: #8a938f;
}

.status-badge.hold-badge {
  background: #fdf3e0;
  border-color: #c98f2e;
  color: #7c5410;
}

.status-badge.res-badge {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}

.status-badge.res-badge.alternative {
  background: #fdf3e0;
  border-color: #c98f2e;
  color: #7c5410;
}

.schedule-submit-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 14px;
  margin-top: 20px;
}

.schedule-submit-row .form-copy {
  margin: 0;
}

.schedule-submit-row .primary-action {
  cursor: pointer;
  border: 0;
  min-height: 44px;
}

.schedule-submit-row .primary-action:disabled {
  opacity: 0.5;
  cursor: default;
}

.hold-status .hold-countdown {
  display: flex;
  align-items: baseline;
  gap: 10px;
  margin: 10px 0 0;
}

.hold-status .hold-countdown strong {
  color: #7c5410;
  font-size: 1.6rem;
  font-variant-numeric: tabular-nums;
}

.reservation-status-list {
  list-style: none;
  margin: 14px 0 0;
  padding: 0;
  display: grid;
  gap: 10px;
}

.reservation-status-list li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 10px;
}

.reservation-slot-info {
  color: #56635f;
  font-size: 0.92rem;
}

/* 병원 대체슬롯 제안 재확인 카드 (C8) */
.alternative-proposal {
  margin-top: 14px;
  border: 1px solid #c98f2e;
  border-radius: 10px;
  background: #fdf9f1;
  padding: 16px 18px;
}

.alternative-proposal h3 {
  margin: 0;
  font-size: 1rem;
}

.alternative-proposal-list {
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.alternative-proposal-list > div {
  display: grid;
  grid-template-columns: 200px minmax(0, 1fr);
  gap: 12px;
}

.alternative-proposal-list dt {
  color: #56635f;
  font-size: 0.9rem;
  font-weight: 700;
}

.alternative-proposal-list dd {
  margin: 0;
  font-size: 0.95rem;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}

.alternative-proposal-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 10px;
  margin-top: 16px;
}

.alternative-proposal-actions button {
  cursor: pointer;
  border: 1px solid var(--line);
}

.alternative-proposal-actions button:disabled {
  opacity: 0.5;
  cursor: default;
}

@media (max-width: 559px) {
  .slot-grid {
    grid-template-columns: 1fr;
  }

  .alternative-proposal-list > div {
    grid-template-columns: 1fr;
    gap: 2px;
  }

  .schedule-submit-row {
    justify-content: stretch;
  }

  .schedule-submit-row .primary-action {
    width: 100%;
  }
}

/* C10 문진 폼 (C8 모달 내) */
.questionnaire-form {
  margin-top: 18px;
}

.questionnaire-form textarea {
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--background);
  color: var(--foreground);
  font: inherit;
  padding: 10px 12px;
  resize: vertical;
}

.questionnaire-form textarea:focus {
  outline: none;
  border-color: var(--accent);
}

/* --- 리퍼럴 랜딩/콘솔 --- */
.ad-disclosure {
  margin: 0;
  padding: 0.5rem 1rem;
  text-align: center;
  font-size: 0.8rem;
  background: #f4f4f5;
  color: #52525b;
  border-bottom: 1px solid #e4e4e7;
}
.referral-form {
  display: grid;
  gap: 0.75rem;
  max-width: 420px;
}
.referral-filter {
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* --- 상담 상태 배지 (C9/A2) --- */
.status-badge.consult-requested {
  background: #fdf3e0;
  border-color: #c98f2e;
  color: #7c5410;
}
.status-badge.consult-in_progress {
  background: var(--accent-soft);
  border-color: var(--accent);
  color: var(--accent-strong);
}
.status-badge.consult-reserved {
  background: #e2eefb;
  border-color: #3b74b8;
  color: #1f4a7a;
}
.status-badge.consult-on_hold {
  background: #ece9e4;
  border-color: #a49c8f;
  color: #56635f;
}
.status-badge.unread-badge {
  margin-left: 8px;
  background: #fbe4e4;
  border-color: #c0504d;
  color: #8a2b28;
}

/* --- C9 상담 채팅 --- */
.chat-shell {
  padding-top: 16px;
}
.chat-frame {
  display: flex;
  flex-direction: column;
  height: calc(100vh - 32px);
  max-height: 900px;
  padding: 0;
  overflow: hidden;
}
.chat-header {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.chat-back {
  font-size: 0.85rem;
  font-weight: 700;
  color: var(--accent-strong);
  text-decoration: none;
  white-space: nowrap;
}
.chat-header-main {
  display: flex;
  align-items: center;
  gap: 10px;
  flex: 1;
  min-width: 0;
}
.chat-title {
  font-size: 1.05rem;
  margin: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chat-thread {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: var(--background);
}
.chat-loading,
.chat-empty {
  text-align: center;
  color: #6b736f;
  font-size: 0.85rem;
  margin: 8px 0;
}
.chat-message {
  display: flex;
  flex-direction: column;
  max-width: 78%;
}
.chat-message.mine {
  align-self: flex-end;
  align-items: flex-end;
}
.chat-message.theirs {
  align-self: flex-start;
  align-items: flex-start;
}
.chat-bubble {
  border-radius: 14px;
  padding: 9px 12px;
  border: 1px solid var(--line);
  background: var(--surface);
}
.chat-message.mine .chat-bubble {
  background: var(--accent-soft);
  border-color: var(--accent);
}
.chat-line {
  margin: 0;
  display: flex;
  gap: 6px;
  align-items: baseline;
  line-height: 1.4;
  word-break: break-word;
}
.chat-line + .chat-line {
  margin-top: 5px;
  padding-top: 5px;
  border-top: 1px dashed var(--line);
}
.chat-translated .chat-text {
  color: #3f4d49;
}
.chat-country {
  flex: 0 0 auto;
  font-size: 0.62rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 5px;
  border-radius: 6px;
  background: var(--surface-muted);
  color: #56635f;
  border: 1px solid var(--line);
}
.chat-meta {
  display: flex;
  gap: 8px;
  margin-top: 3px;
  font-size: 0.68rem;
  color: #8a918d;
}
.chat-receipt {
  font-weight: 700;
}
.chat-composer {
  display: flex;
  gap: 10px;
  padding: 12px 18px;
  border-top: 1px solid var(--line);
  background: var(--surface);
}
.chat-input {
  flex: 1;
  resize: none;
  border-radius: 12px;
  border: 1px solid var(--line);
  padding: 10px 12px;
  font: inherit;
  max-height: 120px;
}
.chat-send {
  white-space: nowrap;
}
.chat-frame .form-alert.error {
  margin: 0 18px;
}

@media (max-width: 559px) {
  .chat-message {
    max-width: 90%;
  }
  .chat-frame {
    height: calc(100vh - 16px);
  }
}

/* --- 컨시어지 가용성 토글 (A2) + 고객 화면 가용성 배지 (C5) --- */
.availability-toggle {
  display: inline-flex;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: 6px;
  background: var(--surface);
}
.availability-option {
  min-height: 36px;
  border: 0;
  border-right: 1px solid var(--line);
  background: transparent;
  color: #56635f;
  cursor: pointer;
  padding: 0 14px;
  font: inherit;
}
.availability-option:last-child {
  border-right: 0;
}
.availability-option:disabled {
  cursor: progress;
  opacity: 0.6;
}
/* 상태는 색만으로 구분하지 않는다 — 라벨 텍스트가 항상 함께 노출된다(접근성) */
.availability-option.active {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 700;
}
.status-badge.concierge-available {
  background: #e8f5ec;
  border-color: #2f7d4f;
  color: #1d5233;
}
.status-badge.concierge-away {
  background: #f1f2f3;
  border-color: #8a9299;
  color: #4c5559;
}
.concierge-availability {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-bottom: 10px;
}

/* --- 상담 큐 페이징 (A2) --- */
.queue-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}
.queue-pager-status {
  color: #66736e;
  font-size: 0.95rem;
  font-variant-numeric: tabular-nums;
}

/* --- C9 고객 조작 (일정 선택 진입 / 보류 토글) --- */
.chat-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  padding: 10px 18px 0;
}

@media (max-width: 559px) {
  .availability-toggle {
    width: 100%;
  }
  .availability-option {
    flex: 1;
  }
  .chat-actions .secondary-action {
    flex: 1;
    justify-content: center;
  }
}

/* --- C13 마이페이지 섹션 링크 --- */
.mypage-sections {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 14px;
}

/* --- 견적 패널 (C9 컨시어지) + 견적 카드 (마이페이지 견적함 공용) --- */
.chat-frame {
  position: relative;
}
.quote-panel {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  z-index: 10;
}
.quote-panel-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px 18px;
  border-bottom: 1px solid var(--line);
}
.quote-panel-header h2 {
  margin: 0;
  font-size: 1.05rem;
}
.quote-panel-body {
  flex: 1;
  overflow-y: auto;
  padding: 16px 18px;
  display: flex;
  flex-direction: column;
  gap: 14px;
  background: var(--background);
}
.quote-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
  padding: 12px 14px;
}
/* 철회 견적은 흐림 + 배지 라벨로 구분 (색상 단독 구분 금지 — 접근성) */
.quote-card.canceled {
  opacity: 0.65;
}
.quote-card-header {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 8px;
}
.quote-card-time {
  flex: 1;
  color: #66736e;
  font-size: 0.8rem;
}
.status-badge.quote-submitted {
  background: #e8f5ec;
  border-color: #2f7d4f;
  color: #1d5233;
}
/* A2 큐의 견적 배지는 링크(견적 패널로 이동) — 배지 모양은 유지하고 밑줄만 제거 */
a.status-badge.quote-submitted {
  text-decoration: none;
  cursor: pointer;
}
a.status-badge.quote-submitted:hover {
  background: #d7ecdd;
}
.status-badge.quote-canceled {
  background: #f1f2f3;
  border-color: #8a9299;
  color: #4c5559;
}
.quote-item-list {
  list-style: none;
  margin: 0;
  padding: 0;
}
.quote-item-list li {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  border-bottom: 1px dashed var(--line);
}
.quote-item-name {
  display: inline-flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  word-break: break-word;
}
.quote-item-category {
  font-size: 0.68rem;
  font-weight: 800;
  letter-spacing: 0.04em;
  padding: 1px 6px;
  border-radius: 6px;
  background: var(--surface-muted);
  color: #56635f;
  border: 1px solid var(--line);
  white-space: nowrap;
}
.quote-item-amount {
  font-variant-numeric: tabular-nums;
  white-space: nowrap;
}
.quote-item-description {
  margin: 2px 0 0;
  color: #66736e;
  font-size: 0.8rem;
}
.quote-card-total {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin: 10px 0 0;
  font-size: 1rem;
}
.quote-currency-note {
  margin: 4px 0 10px;
  color: #66736e;
  font-size: 0.78rem;
}

/* --- 견적 작성 폼·이력 (A2 컨시어지 콘솔) --- */
.quote-composer h3 {
  margin: 16px 0 4px;
  font-size: 0.95rem;
}
.quote-target {
  margin: 0 0 10px;
  font-size: 0.9rem;
}
.quote-target strong {
  margin-left: 8px;
}
.quote-card-no {
  font-weight: 700;
  font-size: 0.85rem;
}
.quote-treatment-picker {
  display: flex;
  gap: 8px;
  margin-bottom: 12px;
}
.quote-treatment-picker select {
  flex: 1;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px 10px;
  font: inherit;
  min-width: 0;
}
.quote-item-table input,
.quote-item-table select {
  width: 100%;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 6px 8px;
  font: inherit;
  min-width: 0;
}
.quote-item-table input + input {
  margin-top: 4px;
}
.quote-item-table tfoot th {
  text-align: right;
}
.quote-composer-actions {
  display: flex;
  flex-wrap: wrap;
  justify-content: flex-end;
  gap: 8px;
  margin: 14px 0;
}
.quote-history-heading {
  margin-top: 22px;
}
/* 정책 안내(별도 청구·철회 규칙) — 본문과 구분되는 점선 박스 */
.quote-notice {
  border: 1px dashed var(--line);
  border-radius: 10px;
  padding: 10px 12px;
  margin: 10px 0;
  color: #56635f;
  font-size: 0.8rem;
  line-height: 1.6;
}
/* 상태 배지 — 색상 단독 구분 금지 원칙에 따라 라벨과 함께 쓴다 */
.status-badge.quote-draft {
  background: #f4f2ea;
  border-color: #97906f;
  color: #5c5636;
}
.status-badge.quote-paid {
  background: #e6eefb;
  border-color: #3a5f9e;
  color: #22406e;
}
.status-badge.quote-expired {
  background: #f7f0ee;
  border-color: #9a7a72;
  color: #6b4c45;
}
.status-badge.quote-hospital {
  background: #eef1fb;
  border-color: #4a5c9e;
  color: #2f3d6e;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}


/* =========================================================
   A4 운영자 콘솔 ⑥ 병원·시술 패키지 관리
   모바일 우선 — 1열 → 태블릿 2열 → 데스크탑 4열
   ========================================================= */
.catalog-form {
  margin-top: 18px;
}

.catalog-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: 14px;
}

.catalog-grid + .catalog-grid,
.catalog-form .chip-field + .catalog-grid,
.catalog-form .catalog-grid + .chip-field {
  margin-top: 16px;
}

.catalog-form .form-field label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: 600;
  color: #465350;
}

.catalog-form input[type="text"],
.catalog-form input[type="url"],
.catalog-form input[type="date"],
.catalog-form input[type="number"],
.catalog-form input[type="file"],
.catalog-form select,
.catalog-form textarea {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  color: inherit;
}

.catalog-form textarea {
  min-height: 66px;
  resize: vertical;
}

.catalog-form input[readonly] {
  background: var(--surface-muted);
  color: #56635f;
}

/* 병원 미선택 시 의료진 입력 영역 비활성화 (요구사항) */
.catalog-form fieldset[disabled] {
  opacity: 0.55;
}

.catalog-fieldset,
.catalog-fieldset-plain {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.catalog-fieldset {
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 16px;
}

.catalog-fieldset legend,
.chip-field legend {
  padding: 0 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #465350;
}

.field-hint {
  margin: 6px 0 0;
  font-size: 0.82rem;
  color: #66736e;
}

.catalog-output {
  display: block;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px dashed var(--line);
  border-radius: 8px;
  background: var(--surface-muted);
  font-weight: 700;
}

.catalog-thumb {
  display: block;
  margin-top: 8px;
  max-width: 100%;
  max-height: 120px;
  border-radius: 8px;
}

.catalog-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 12px;
  margin-top: 18px;
}

.catalog-actions .primary-action {
  cursor: pointer;
  border: 0;
  min-height: 44px;
}

/* 태그·언어·구성시술 선택 칩 — 체크박스를 숨기고 label 을 버튼처럼 쓴다.
   :checked 상태를 CSS 로만 표현해 JS 없이도 선택이 동작한다. */
.chip-field {
  margin: 18px 0 0;
  padding: 0;
  border: 0;
}

.chip-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 8px;
}

.chip input[type="checkbox"] {
  position: absolute;
  width: 1px;
  height: 1px;
  opacity: 0;
}

.chip label {
  display: inline-block;
  padding: 9px 14px;
  min-height: 44px;
  line-height: 26px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--surface);
  cursor: pointer;
  font-size: 0.9rem;
}

.chip input[type="checkbox"]:checked + label {
  border-color: var(--accent);
  background: var(--accent-soft);
  color: var(--accent-strong);
  /* 색상만으로 상태를 구분하지 않는다 (접근성 — 대비 + 굵기 병행) */
  font-weight: 700;
}

.chip input[type="checkbox"]:focus-visible + label {
  outline: 2px solid var(--accent);
  outline-offset: 2px;
}

.catalog-row-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

.catalog-row-actions .secondary-action {
  cursor: pointer;
  min-height: 36px;
}

.catalog-row-actions .secondary-action[disabled] {
  opacity: 0.5;
  cursor: not-allowed;
}

.catalog-muted {
  color: #66736e;
  font-size: 0.86rem;
}

.catalog-pager {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-top: 14px;
}

/* 태블릿 2열 */
@media (min-width: 560px) {
  .catalog-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* 데스크탑 — 기본 4열, 변형 그리드는 2·3열 유지 */
@media (min-width: 1100px) {
  .catalog-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
  }

  .catalog-grid-2 {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .catalog-grid-3 {
    grid-template-columns: repeat(3, minmax(0, 1fr));
  }
}

/* ⑥-4 노출·매칭 룰 설정 — 모바일 1열 → 데스크탑 2열(대표 패키지 | 매칭 배점) */
.matching-columns {
  display: grid;
  grid-template-columns: 1fr;
  gap: 16px;
  margin-top: 18px;
}

.matching-card {
  border: 1px solid var(--line);
  border-radius: 10px;
  padding: 18px;
  background: var(--surface);
}

.matching-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.matching-card-head h3 {
  margin: 0;
  font-size: 1.02rem;
}

.featured-slot {
  margin-top: 14px;
}

.featured-slot label {
  display: block;
  margin-bottom: 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #465350;
}

/* 배점 한 줄: 라벨 — 입력 — 단위. 모바일에서도 한 줄을 유지할 만큼 짧다. */
.rule-row {
  display: grid;
  grid-template-columns: 1fr 92px auto;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}

.rule-row label {
  margin: 0;
  font-size: 0.9rem;
  font-weight: 600;
  color: #465350;
}

.rule-row input {
  width: 100%;
  min-height: 44px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--surface);
  font: inherit;
  text-align: right;
}

.rule-unit {
  color: #66736e;
  font-size: 0.86rem;
  white-space: nowrap;
}

.rule-history-table {
  min-width: 420px;
}

@media (min-width: 1100px) {
  .matching-columns {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    align-items: start;
  }
}

/* =========================================================
   고객 경로 A — C5 진입분기 / C6 설문 / C7 결과 / C8 일정 / C10 문진
   모바일 우선. 카드·칩은 터치 타깃 44px 이상을 유지한다.
   ========================================================= */

/* 진행 단계 (1설문 - 2결과 - 3일정 - 4문진) */
.step-rail {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin: 0 0 20px;
  padding: 0;
  list-style: none;
}

.step-rail li {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 7px 14px;
  border-radius: 999px;
  background: var(--surface-muted);
  color: #66736e;
  font-size: 0.86rem;
}

.step-rail li.current {
  background: var(--accent);
  color: #fff;
  font-weight: 700;
}

/* 지나온 단계는 색만이 아니라 굵기로도 구분한다 (색상 단독 구분 금지) */
.step-rail li.done {
  background: var(--accent-soft);
  color: var(--accent-strong);
  font-weight: 600;
}

.path-choice {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 12px;
  margin-top: 20px;
}

.path-choice .primary-action,
.path-choice .secondary-action {
  display: inline-block;
  min-height: 44px;
  line-height: 28px;
  cursor: pointer;
}

.survey-form {
  margin-top: 8px;
}

.survey-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 24px;
  cursor: pointer;
  border: 0;
}

.ad-disclaimer {
  margin-top: 22px;
  padding-top: 14px;
  border-top: 1px solid var(--line);
  color: #66736e;
  font-size: 0.8rem;
}

/* --- C7 결과 카드 --- */
.result-frame {
  max-width: 860px;
}

.result-summary {
  color: #56635f;
}

.result-list {
  margin: 18px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 16px;
}

.result-card {
  border: 1px solid var(--line);
  border-radius: 12px;
  padding: 18px;
  background: var(--surface);
}

.result-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.result-image {
  display: block;
  width: 100%;
  max-height: 200px;
  object-fit: cover;
  margin-top: 12px;
  border-radius: 10px;
  background: var(--surface-muted);
}

.result-image.placeholder {
  height: 120px;
}

.result-name {
  margin: 14px 0 0;
  font-size: 1.08rem;
  font-weight: 700;
}

.result-tags {
  margin-top: 10px;
}

.result-tag {
  display: inline-block;
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  font-size: 0.84rem;
  color: #56635f;
}

.result-price {
  margin: 14px 0 0;
  font-size: 1.3rem;
  font-weight: 700;
}

.result-price .catalog-muted {
  margin-left: 8px;
  font-size: 0.84rem;
  font-weight: 400;
}

.result-actions {
  margin-top: 14px;
}

.result-actions .primary-action {
  display: inline-block;
  min-height: 44px;
  line-height: 28px;
}

/* --- C8 병원별 슬롯 --- */
.selected-package {
  display: grid;
  gap: 14px;
  padding: 16px;
  margin-bottom: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface-muted);
}

.selected-package h1 {
  margin: 0;
  font-size: 1.2rem;
}

.hospital-group {
  margin-top: 18px;
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

.hospital-group-head {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: 10px;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--line);
}

.hospital-name {
  margin: 0;
  font-size: 1.02rem;
  font-weight: 700;
}

.hospital-price strong {
  font-size: 1.15rem;
}

.hospital-price .catalog-muted {
  display: block;
  margin-top: 2px;
}

.slot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(140px, 1fr));
  gap: 10px;
  margin-top: 14px;
}

.slot-chip {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-height: 66px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
  cursor: pointer;
  text-align: left;
}

.slot-chip:hover:not([disabled]) {
  border-color: var(--accent);
}

.slot-chip[disabled] {
  opacity: 0.45;
  cursor: not-allowed;
}

/* 홀드 중인 슬롯 — 색 외에 테두리 굵기로도 구분한다 */
.slot-chip.held {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
  font-weight: 700;
}

.slot-date {
  font-weight: 700;
}

.slot-time {
  color: #465350;
}

.slot-remaining {
  font-size: 0.8rem;
  color: #66736e;
}

.hospital-group-action {
  margin-top: 14px;
}

.hospital-group-action .primary-action {
  display: inline-block;
  min-height: 44px;
  line-height: 28px;
}

.my-reservations {
  margin: 14px 0 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}

.my-reservations li {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* --- C1 홈 대표 패키지 --- */
.featured-band {
  margin: 22px 0;
}

.featured-title {
  margin: 0 0 12px;
  font-size: 1.05rem;
}

.featured-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 12px;
}

.featured-card {
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--surface);
}

.featured-thumb {
  width: 64px;
  height: 64px;
  object-fit: cover;
  border-radius: 8px;
}

.featured-name {
  margin: 0;
  font-weight: 700;
}

.featured-price {
  margin: 4px 0 0;
  color: #465350;
}

.featured-card .secondary-action {
  min-height: 44px;
  line-height: 28px;
}

/* 태블릿 이상 — 결과 카드 2열, 선택 패키지 가로 배치 */
@media (min-width: 560px) {
  .selected-package {
    grid-template-columns: 160px 1fr;
    align-items: center;
  }

  .selected-package .result-image {
    margin-top: 0;
    max-height: 120px;
  }
}

@media (min-width: 1100px) {
  .result-list {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* --- C3 패키지 상세 --- */
.detail-hero {
  max-height: 260px;
}

.detail-title {
  margin: 16px 0 0;
  font-size: 1.4rem;
}

.detail-link {
  margin: 8px 0 0;
}

.detail-section {
  margin-top: 28px;
  padding-top: 20px;
  border-top: 1px solid var(--line);
}

.detail-section h2 {
  margin: 0 0 12px;
  font-size: 1.08rem;
}

.treatment-list {
  margin: 0;
  padding-left: 20px;
  display: grid;
  gap: 18px;
}

.treatment-item {
  padding-left: 4px;
}

.treatment-name {
  margin: 0;
  font-weight: 700;
}

/* 주의·금기는 눈에 띄어야 하지만 경고색만으로 구분하지 않는다 (아이콘 대신 레이블 병기) */
.treatment-caution {
  margin: 10px 0 0;
  padding: 10px 12px;
  border-left: 3px solid var(--accent-strong);
  background: var(--surface-muted);
  border-radius: 0 8px 8px 0;
  font-size: 0.9rem;
}

.treatment-caution strong {
  margin-right: 6px;
}

/* --- C13 마이페이지 예약 목록 --- */
.mypage-heading {
  margin: 28px 0 12px;
  font-size: 1.1rem;
}

.reservation-list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 14px;
}

.reservation-card {
  padding: 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--surface);
}

/* 손을 대야 하는 예약은 테두리 굵기로도 구분한다 (색상 단독 구분 금지) */
.reservation-card.needs-action {
  border: 2px solid var(--accent);
  background: var(--accent-soft);
}

/* 지난 일정은 옅게 — 다만 내용은 그대로 읽을 수 있어야 한다 */
.reservation-card.past {
  background: var(--surface-muted);
  color: #56635f;
}

.reservation-card-head {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}

.reservation-package {
  margin: 12px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
}

.reservation-facts {
  margin: 12px 0 0;
  display: grid;
  gap: 8px;
}

.reservation-facts > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 10px;
  align-items: baseline;
}

.reservation-facts dt {
  color: #66736e;
  font-size: 0.86rem;
}

.reservation-facts dd {
  margin: 0;
}

.reservation-facts .catalog-muted {
  margin-left: 6px;
  font-size: 0.8rem;
}

.reservation-action {
  margin-top: 14px;
}

.reservation-action .primary-action {
  display: inline-block;
  min-height: 44px;
  line-height: 28px;
}

.status-badge.res-closed {
  background: var(--surface-muted);
  color: #56635f;
}

@media (min-width: 560px) {
  .reservation-facts {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px 20px;
  }
}

/* 예약 상태는 카드의 주된 정보 — 문진 배지보다 눈에 먼저 들어와야 한다 */
.status-badge.reservation-status {
  font-size: 0.95rem;
  padding: 7px 14px;
}

.my-reservations-title {
  margin: 14px 0 6px;
  font-size: 0.86rem;
  font-weight: 700;
  color: #465350;
}

.my-reservations ul {
  margin: 0;
  padding: 0;
  list-style: none;
  display: grid;
  gap: 8px;
}