/* ══════════════════════════════════════════════════
   RE&H 병원 특식 예약 서비스 — Design System
   브랜드 컬러: 신규 홈페이지 시안에서 추출 승계
   ══════════════════════════════════════════════════ */

:root {
  /* Brand */
  --green: #18392c;
  --green-sub: #1f4a39;
  --green-deep: #102419;
  --gold: #c89a45;
  --gold-soft: #e0c894;

  /* Neutral */
  --ivory: #fcfaf5;
  --ivory-2: #f7f5f0;
  --line: #e8e5dd;
  --ink: #1b2530;
  --ink-2: #55606b;
  --ink-3: #8b949d;
  --white: #fff;

  /* System */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow: 0 2px 12px rgba(24, 57, 44, .07);
  --shadow-lg: 0 8px 30px rgba(24, 57, 44, .13);
  --header-h: 56px;
  --maxw: 480px;
  --ease: cubic-bezier(.22, .61, .36, 1);
}

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

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: 'Pretendard Variable', Pretendard, -apple-system, BlinkMacSystemFont,
    system-ui, 'Malgun Gothic', sans-serif;
  background: var(--ivory);
  color: var(--ink);
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }

/* 데스크톱에서는 모바일 폭으로 중앙 정렬 (모바일 우선 검증 목적) */
.wrap {
  max-width: var(--maxw);
  margin: 0 auto;
  background: var(--ivory);
  min-height: 100vh;
  position: relative;
  /* ★ Phase D P0-1 — hidden 은 스크롤 컨테이너를 생성해
       하위 .sticky-cta 의 position:sticky 를 무력화합니다.
       clip 은 잘라내기만 하므로 sticky 가 정상 동작합니다. */
  overflow-x: clip;
}
@media (min-width: 520px) {
  body { background: #e9e7e1; }
  .wrap { box-shadow: 0 0 50px rgba(0, 0, 0, .09); }
}

/* ── 프로토타입 안내 배너 ───────────────────── */
.proto-flag {
  position: fixed; top: 0; left: 0; right: 0; z-index: 200;
  background: var(--ink); color: #fff;
  font-size: 10.5px; letter-spacing: -.2px;
  text-align: center; padding: 5px 12px;
  line-height: 1.4;
}
.proto-flag strong { color: var(--gold-soft); font-weight: 700; }
body { padding-top: 24px; }

/* ── 헤더 ──────────────────────────────────── */
.site-header {
  position: sticky; top: 24px; z-index: 100;
  height: var(--header-h);
  display: flex; align-items: center; gap: 10px;
  padding: 0 16px;
  background: rgba(252, 250, 245, .93);
  backdrop-filter: saturate(180%) blur(12px);
  border-bottom: 1px solid var(--line);
}
.hd-logo { display: flex; align-items: baseline; gap: 6px; }
.hd-mark {
  font-size: 19px; font-weight: 800; letter-spacing: .5px;
  color: var(--green);
}
.hd-amp { color: var(--gold); }
.hd-sub {
  font-size: 9.5px; font-weight: 700; letter-spacing: 1.6px;
  color: var(--gold); text-transform: uppercase;
}
.hd-back {
  width: 34px; height: 34px; margin-left: -6px;
  display: grid; place-items: center; color: var(--ink);
}
.hd-title {
  font-size: 15px; font-weight: 700; letter-spacing: -.3px;
}
.hd-contact {
  margin-left: auto; font-size: 13px; font-weight: 600;
  color: var(--green);
  border: 1px solid var(--line);
  background: var(--white);
  padding: 7px 14px; border-radius: 100px;
}

/* ── 히어로 ────────────────────────────────── */
.hero { position: relative; }
.hero-img {
  width: 100%; height: 66vh; min-height: 400px; max-height: 560px;
  object-fit: cover;
}
.hero-veil {
  position: absolute; inset: 0;
  background: linear-gradient(
    to bottom,
    rgba(16, 36, 25, .34) 0%,
    rgba(16, 36, 25, .12) 32%,
    rgba(16, 36, 25, .72) 72%,
    rgba(16, 36, 25, .93) 100%
  );
}
.hero-body {
  position: absolute; left: 0; right: 0; bottom: 0;
  padding: 0 22px 26px;
  color: #fff;
}
.eyebrow {
  font-size: 10.5px; font-weight: 700; letter-spacing: 2.2px;
  color: var(--gold-soft); text-transform: uppercase;
  margin: 0 0 12px;
}
.hero-h1 {
  font-size: 31px; font-weight: 800; line-height: 1.28;
  letter-spacing: -1px; margin: 0 0 14px;
}
.hero-p {
  font-size: 14.5px; line-height: 1.65; margin: 0;
  color: rgba(255, 255, 255, .87);
}

/* ── 버튼 ──────────────────────────────────── */
.btn {
  display: flex; align-items: center; justify-content: center; gap: 7px;
  width: 100%; min-height: 54px;
  border: none; border-radius: var(--radius-sm);
  font-size: 15.5px; font-weight: 700; letter-spacing: -.3px;
  transition: transform .15s var(--ease), background .2s;
}
.btn:active { transform: scale(.985); }
.btn-primary { background: var(--green); color: #fff; }
.btn-primary:disabled {
  background: #cfd4d0; color: #fff; cursor: not-allowed;
}
.btn-gold { background: var(--gold); color: #fff; }
.btn-ghost {
  background: var(--white); color: var(--green);
  border: 1.4px solid var(--green);
}
.btn-line {
  background: transparent; color: var(--ink-2);
  border: 1px solid var(--line);
}
.btn svg { flex: none; }

.hero-cta { padding: 18px 18px 4px; }

/* ── 섹션 공통 ─────────────────────────────── */
.section { padding: 34px 18px; }
.section-label {
  font-size: 10.5px; font-weight: 700; letter-spacing: 2px;
  color: var(--gold); text-transform: uppercase; margin: 0 0 9px;
}
.section-h2 {
  font-size: 22px; font-weight: 800; line-height: 1.35;
  letter-spacing: -.7px; margin: 0 0 8px;
}
.section-p {
  font-size: 14px; color: var(--ink-2); margin: 0 0 20px; line-height: 1.68;
}
/* 하위 섹션 제목 (상세페이지) — 인라인 스타일 대신 클래스로 관리해 반응형 대응 */
.h2-sub { font-size: 19px; }
.section-tight { padding-top: 22px; }

/* ── 상품 쇼케이스 (2차 피드백 ①) ─────────────
   박스형 카드 제거 → 사진 비중 확대 + 에디토리얼 구성
   프리미엄 F&B 서비스 인상을 위해 테두리·그림자·흰 박스를 걷어냄
   ─────────────────────────────────────────── */
.showcase { display: flex; flex-direction: column; gap: 30px; }

.sc-item { position: relative; }

/* 사진이 화면의 주인공이 되도록 세로 비중을 키움 */
.sc-media {
  position: relative; display: block;
  aspect-ratio: 4 / 5;
  border-radius: 4px;
  overflow: hidden;
  background: var(--ivory-2);
}
.sc-item:first-child .sc-media { aspect-ratio: 3 / 4; }
.sc-media img {
  width: 100%; height: 100%; object-fit: cover;
  transition: transform .7s var(--ease);
}
.sc-media:active img { transform: scale(1.02); }

/* 텍스트 가독성 확보용 그라데이션 — 박스가 아닌 사진 위 캡션 */
.sc-veil {
  position: absolute; inset: 0;
  background: linear-gradient(
    to top,
    rgba(11, 24, 18, .86) 0%,
    rgba(11, 24, 18, .52) 26%,
    rgba(11, 24, 18, .06) 55%,
    rgba(11, 24, 18, .10) 100%
  );
}
.sc-badge {
  position: absolute; top: 14px; left: 14px;
  color: var(--gold-soft);
  font-size: 11px; font-weight: 700; letter-spacing: .06em;
  padding: 5px 10px 6px;
  /* 밝은 사진 위에서도 라벨이 읽히도록 얇은 스크림 적용 (라인형 인상 유지) */
  background: rgba(11, 24, 18, .38);
  backdrop-filter: blur(3px);
  border-top: 1px solid rgba(224, 200, 148, .55);
  border-bottom: 1px solid rgba(224, 200, 148, .55);
}
.sc-caption {
  position: absolute; left: 18px; right: 18px; bottom: 18px;
  display: block; color: #fff;
}
.sc-no {
  display: block;
  font-size: 11px; font-weight: 700; letter-spacing: .16em;
  color: var(--gold-soft);
  margin-bottom: 7px;
}
.sc-name {
  display: block;
  font-size: 23px; font-weight: 800; letter-spacing: -.9px;
  line-height: 1.28; margin-bottom: 6px;
}
.sc-tag {
  display: block;
  font-size: 13.5px; line-height: 1.6;
  color: rgba(255, 255, 255, .82);
}

/* 요청서 §10·§24 Quick Path — 버튼 두 개를 밑줄형/라인형으로 절제 */
.sc-actions {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; margin-top: 13px; padding: 0 2px;
}
.sc-link {
  display: inline-flex; align-items: center; gap: 2px;
  font-size: 13.5px; font-weight: 700; color: var(--ink-2);
  padding: 8px 0;
}
.sc-link svg { color: var(--ink-3); }
.sc-apply {
  display: inline-flex; align-items: center; justify-content: center;
  min-height: 44px; padding: 0 22px;
  border: 1px solid var(--green);
  border-radius: 100px;
  font-size: 14px; font-weight: 700; letter-spacing: -.2px;
  color: var(--green); background: transparent;
  transition: background .2s var(--ease), color .2s var(--ease);
}
.sc-apply:active { background: var(--green); color: #fff; }

@media (min-width: 520px) {
  .sc-name { font-size: 25px; }
}

/* ── 프로세스(예약 흐름) ─────────────────────
   2차 피드백 ②: 메인은 3단계만. 상세 절차는 완료화면에서 안내
   ─────────────────────────────────────────── */
.flow-band { background: var(--green); color: #fff; padding: 34px 18px; }
.flow-band .section-h2 { color: #fff; }
.flow-band .section-p { color: rgba(255, 255, 255, .72); }

.flow3 { display: flex; flex-direction: column; gap: 0; margin-top: 4px; }
.f3-row {
  display: flex; align-items: flex-start; gap: 14px;
  padding: 16px 0;
  border-bottom: 1px solid rgba(255, 255, 255, .12);
}
.f3-row:last-child { border-bottom: none; }
.f3-num {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  border: 1px solid rgba(224, 200, 148, .55);
  color: var(--gold-soft);
  font-size: 12px; font-weight: 700;
  display: grid; place-items: center;
  margin-top: 1px;
}
.f3-txt strong {
  display: block; font-size: 15.5px; font-weight: 700;
  letter-spacing: -.4px; margin-bottom: 3px;
}
.f3-txt span { font-size: 13px; color: rgba(255, 255, 255, .66); line-height: 1.55; }

/* ── 상세 페이지 ───────────────────────────── */
.detail-hero { position: relative; }
.detail-hero img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; }
.detail-head { padding: 22px 18px 8px; }
.detail-h1 {
  font-size: 26px; font-weight: 800; letter-spacing: -.9px;
  line-height: 1.32; margin: 0 0 7px;
}
.detail-lead { font-size: 14.5px; color: var(--ink-2); margin: 0; }

.gallery-scroll {
  display: flex; gap: 10px; overflow-x: auto;
  padding: 0 18px 4px;
  scroll-snap-type: x mandatory;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
}
.gallery-scroll::-webkit-scrollbar { display: none; }
.gallery-scroll figure {
  flex: none; width: 74%; margin: 0; scroll-snap-align: start;
}
.gallery-scroll img {
  width: 100%; aspect-ratio: 4 / 3; object-fit: cover;
  border-radius: var(--radius-sm);
}
.gallery-scroll figcaption {
  font-size: 12px; color: var(--ink-3); margin-top: 7px;
}

.body-text { font-size: 14.5px; line-height: 1.78; color: var(--ink-2); margin: 0; }

/* ── 이런 경우 추천합니다 (2차 피드백 ⑤) ──────
   검색 유입 고객이 자기 상황과 즉시 연결되도록 질문형 제시
   ─────────────────────────────────────────── */
.ask-list { list-style: none; margin: 0 0 6px; padding: 0; }
.ask-list li {
  border-bottom: 1px solid var(--line);
}
.ask-list li:last-child { border-bottom: none; }
.ask-q {
  display: block;
  position: relative;
  padding: 15px 0 15px 21px;
  font-size: 15px; font-weight: 700; letter-spacing: -.45px;
  line-height: 1.55; color: var(--ink);
}
.ask-q::before {
  content: 'Q';
  position: absolute; left: 0; top: 15px;
  font-size: 12.5px; font-weight: 800;
  color: var(--gold);
  line-height: 1.85;
}

/* 추천 대상 원문은 접어서 보조 정보로 유지 */
.disclosure-plain { border-top: 1px solid var(--line); margin-top: 2px; }
.disclosure-plain > summary {
  font-size: 13px; font-weight: 600; color: var(--ink-3);
  padding: 14px 0;
}

.target-list { list-style: none; margin: 0; padding: 0; }
.target-list li {
  display: flex; gap: 10px; align-items: flex-start;
  font-size: 14px; color: var(--ink); padding: 9px 0;
  border-bottom: 1px dashed var(--line);
}
.target-list li:last-child { border-bottom: none; }
.target-list svg { flex: none; margin-top: 3px; color: var(--gold); }

.steps { display: flex; flex-direction: column; gap: 0; }
.step-row {
  display: flex; gap: 13px; align-items: flex-start;
  padding: 14px 0; border-bottom: 1px solid var(--line);
}
.step-row:last-child { border-bottom: none; }
.step-num {
  flex: none; width: 27px; height: 27px; border-radius: 50%;
  background: var(--green); color: #fff;
  font-size: 11.5px; font-weight: 700;
  display: grid; place-items: center;
}
.step-txt strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.step-txt span { font-size: 13.5px; color: var(--ink-2); line-height: 1.6; }

.case-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.case-item {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 14px 13px;
}
.case-item strong { display: block; font-size: 13.5px; font-weight: 700; margin-bottom: 4px; }
.case-item span { font-size: 12px; color: var(--ink-2); line-height: 1.55; }

/* ── Sticky 하단 CTA ───────────────────────── */
.sticky-cta {
  position: sticky; bottom: 0; z-index: 90;
  padding: 12px 16px calc(12px + env(safe-area-inset-bottom));
  background: rgba(252, 250, 245, .95);
  backdrop-filter: blur(12px);
  border-top: 1px solid var(--line);
}

/* ── 스텝 인디케이터 ───────────────────────── */
.stepper {
  display: flex; align-items: center; gap: 0;
  padding: 16px 18px 4px;
}
.stepper-item { flex: 1; text-align: center; position: relative; }
.stepper-dot {
  width: 26px; height: 26px; border-radius: 50%;
  margin: 0 auto 6px;
  display: grid; place-items: center;
  font-size: 11.5px; font-weight: 700;
  background: var(--line); color: var(--ink-3);
  position: relative; z-index: 2;
}
.stepper-item.done .stepper-dot,
.stepper-item.active .stepper-dot { background: var(--green); color: #fff; }
.stepper-label { font-size: 11px; color: var(--ink-3); font-weight: 600; }
.stepper-item.active .stepper-label { color: var(--green); font-weight: 700; }
.stepper-item::before {
  content: ''; position: absolute; top: 13px; left: 0; right: 50%;
  height: 2px; background: var(--line); z-index: 1;
}
.stepper-item::after {
  content: ''; position: absolute; top: 13px; left: 50%; right: 0;
  height: 2px; background: var(--line); z-index: 1;
}
.stepper-item:first-child::before,
.stepper-item:last-child::after { display: none; }
.stepper-item.done::after,
.stepper-item.done::before,
.stepper-item.active::before { background: var(--green); }

/* ── 선택 내역 요약 ────────────────────────── */
.summary {
  display: flex; gap: 12px; align-items: center;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 12px;
  margin: 0 18px 20px;
}
.summary img {
  width: 58px; height: 58px; border-radius: 8px; object-fit: cover; flex: none;
}
.summary-txt { flex: 1; min-width: 0; }
.summary-txt strong { display: block; font-size: 14.5px; font-weight: 700; margin-bottom: 3px; }
.summary-txt span { font-size: 13px; color: var(--green); font-weight: 600; }
/* ★★ Phase U-1 2차 — 모바일 터치영역 마감 (대표 승인 §1-②)
     [실측 결함] padding 7px + 줄높이 → 31px 로 터치영역 부족.
     「변경」 은 사용자가 선택 내용을 되돌릴 때 실제로 누르는 버튼이므로
     44px 를 확보합니다.
     ★ 시각적으로 커지지 않게 하는 방법: padding 을 키우지 않고
       min-height + place-items:center 로 '터치 높이만' 늘립니다.
       테두리 박스는 44px 가 되지만 글자 크기·좌우 여백은 그대로여서
       .summary 카드 안에서 기존과 거의 같은 비중으로 보입니다
       (카드 자체가 이미 58px 썸네일 기준 높이입니다). */
.summary-edit {
  flex: none; font-size: 12.5px; font-weight: 600; color: var(--ink-2);
  border: 1px solid var(--line); background: var(--ivory);
  padding: 7px 11px; border-radius: 8px;
  min-height: 44px; display: grid; place-items: center;
}

/* ── 달력 ──────────────────────────────────── */
.cal-card {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 16px 14px;
  margin: 0 18px;
}
.cal-nav {
  display: flex; align-items: center; justify-content: space-between;
  margin-bottom: 14px;
}
.cal-nav button {
  width: 36px; height: 36px; border-radius: 9px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink); display: grid; place-items: center;
}
.cal-nav button:disabled { opacity: .3; cursor: not-allowed; }
.cal-month { font-size: 16.5px; font-weight: 800; letter-spacing: -.4px; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 2px; }
.cal-dow {
  text-align: center; font-size: 11.5px; font-weight: 700;
  color: var(--ink-3); padding-bottom: 7px;
}
.cal-dow.sun { color: #c0554b; }

/* ★ Phase D §2 — 상태를 '점'이 아니라 셀 안의 텍스트로 읽게 합니다.
     셀 구성: [날짜 숫자] + [상태 텍스트] 2단 */
.cal-cell {
  border: 1px solid transparent; background: var(--white);
  border-radius: 9px; padding: 5px 1px 4px;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 1px; position: relative;
  min-height: 54px;
  font-size: 14.5px; font-weight: 600; color: var(--ink);
  transition: background .15s var(--ease), border-color .15s var(--ease);
  overflow: hidden;
}
.cal-cell.empty { visibility: hidden; }
.cal-num { display: block; line-height: 1.15; font-variant-numeric: tabular-nums; }
.cal-st {
  display: block; font-size: 9.5px; font-weight: 700; line-height: 1.2;
  letter-spacing: -.4px; white-space: nowrap;
  max-width: 100%; overflow: hidden; text-overflow: ellipsis;
}

/* 신청 가능 — RE&H Green (선택 가능) */
.cal-cell[data-st="available"] { border-color: #cfdcd5; }
.cal-cell[data-st="available"] .cal-st { color: var(--green); }
/* 협의 필요 — Gold (선택 가능) */
.cal-cell[data-st="check_required"] { border-color: #e8dcc2; background: #fffdf7; }
.cal-cell[data-st="check_required"] .cal-st { color: #a87d2c; }
/* 신청 마감 — Gray (선택 불가) */
.cal-cell[data-st="closed"] {
  background: var(--ivory-2); color: #b6bcc1; cursor: not-allowed;
}
.cal-cell[data-st="closed"] .cal-num { text-decoration: line-through; }
.cal-cell[data-st="closed"] .cal-st { color: #b6bcc1; }
/* 리드타임 미달 — 선택 불가 */
.cal-cell[data-st="disabled"] { background: transparent; color: #ced3d7; cursor: not-allowed; }
.cal-cell[data-st="disabled"] .cal-st { color: #d5dade; }

/* ★ Phase D §3 — 주말·공휴일은 '선택 불가'임이 모바일에서 즉시 인식되도록
     사선 해칭 + 회색 배경 + 숫자 취소선을 함께 적용합니다
     (단순 회색 점 수준이 아닙니다). */
.cal-cell[data-st="weekend"],
.cal-cell[data-st="holiday"] {
  cursor: not-allowed; color: #9aa1a7; border-color: #e3e0d9;
  background-color: #eeece7;
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.045) 0 3px, transparent 3px 6px);
}
.cal-cell[data-st="weekend"] .cal-num,
.cal-cell[data-st="holiday"] .cal-num { text-decoration: line-through; opacity: .85; }
.cal-cell[data-st="weekend"] .cal-st { color: #8f969c; }
/* 공휴일은 명칭이 들어가므로 색으로 한 번 더 구분합니다 */
.cal-cell[data-st="holiday"] { border-color: #e6cdc9; }
.cal-cell[data-st="holiday"] .cal-num,
.cal-cell[data-st="holiday"] .cal-st { color: #b2635a; }

.cal-cell[data-st="available"]:active,
.cal-cell[data-st="check_required"]:active { background: var(--ivory-2); }

/* ★ Phase D §4 — 선택된 날짜는 셀 전체가 RE&H Green 배경입니다 */
.cal-cell.selected {
  background: var(--green) !important; background-image: none !important;
  border-color: var(--green) !important; color: #fff !important;
  box-shadow: 0 2px 8px rgba(24, 57, 44, .22);
}
.cal-cell.selected .cal-num { color: #fff !important; text-decoration: none; }
.cal-cell.selected .cal-st { color: rgba(255, 255, 255, .9) !important; }

/* ── 범례 (§5 — 보조 정보. 상태는 셀 자체로 먼저 인지됩니다) ── */
.cal-legend {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px 13px;
  margin-top: 15px; padding-top: 14px;
  border-top: 1px solid var(--line);
}
.cal-legend span {
  display: flex; align-items: center; gap: 5px;
  font-size: 11.5px; color: var(--ink-2);
}
.cal-legend-t { font-weight: 700; color: var(--ink-3); letter-spacing: -.2px; }
.lg-chip { width: 11px; height: 11px; border-radius: 3px; border: 1px solid transparent; flex: none; }
.lg-chip.ok { background: var(--white); border-color: #cfdcd5; box-shadow: inset 0 -3px 0 var(--green); }
.lg-chip.chk { background: #fffdf7; border-color: #e8dcc2; box-shadow: inset 0 -3px 0 var(--gold); }
.lg-chip.no { background: var(--ivory-2); border-color: #dcdfe1; box-shadow: inset 0 -3px 0 #b6bcc1; }
.lg-chip.off {
  background-color: #eeece7; border-color: #e3e0d9;
  background-image: repeating-linear-gradient(-45deg, rgba(0,0,0,.10) 0 2px, transparent 2px 4px);
}
.cal-weekday-note { margin: 10px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-3); }

/* ── 안내 박스 ─────────────────────────────── */
.notice {
  display: flex; gap: 10px;
  background: var(--ivory-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 14px;
  margin: 16px 18px 0;
}
.notice svg { flex: none; color: var(--gold); margin-top: 1px; }
.notice p { margin: 0; font-size: 13px; line-height: 1.65; color: var(--ink-2); }
.notice strong { color: var(--ink); font-weight: 700; }

/* ── 폼 ────────────────────────────────────── */
.form-section { padding: 4px 18px 8px; }
.form-legend {
  font-size: 12px; font-weight: 700; letter-spacing: 1.2px;
  color: var(--gold); text-transform: uppercase;
  margin: 14px 0 12px;
}
.field { margin-bottom: 14px; }
.field label {
  display: block; font-size: 13px; font-weight: 600;
  margin-bottom: 6px; color: var(--ink);
}
.field .req { color: var(--gold); margin-left: 2px; }

/* ★ Phase D P0-3 — .field label{display:block} / .field input{width:100%}
     광역 규칙이 체크박스 행·카드 레이아웃을 덮어쓰던 문제를 해소합니다.
     (마크업은 그대로. CSS 특이성만 정정) */
.field label.optcard,
.field label.ckrow { display: flex; margin-bottom: 0; font-weight: 400; }
.field input[type="checkbox"],
.field input[type="radio"] {
  width: auto; padding: 0; border: 0; background: none;
  border-radius: 0; font-size: inherit;
}
.field .opt { color: var(--ink-3); font-weight: 500; font-size: 12px; margin-left: 4px; }
.field input,
.field textarea,
.field select {
  width: 100%; font-family: inherit; font-size: 15px;
  padding: 13px 14px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
  transition: border-color .18s;
}
.field input:focus,
.field textarea:focus,
.field select:focus {
  outline: none; border-color: var(--green);
}
.field input::placeholder, .field textarea::placeholder { color: #b6bcc2; }
.field textarea { resize: vertical; min-height: 84px; }
.field-hint { font-size: 12px; color: var(--ink-3); margin: 5px 0 0; }

/* ═══ 후속 요청 §10 — 회색 안내문 겹침 구조적 정정 ════════════════════
   [문제]
     .field-hint-tight 의 margin-top:-10px 은 "바로 위 형제가 .field-row
     (margin-bottom:14px)" 인 경우만 성립하는 값이었습니다. 이 클래스가
     .pick-grid(margin-bottom:0) 나 <label>(margin-bottom:6px) 뒤에도
     쓰이면서 안내문이 위 요소를 10px / 4px 침범했습니다.
     → 390 / 768 / 1440 3폭 모두 동일하게 발생 (해상도 문제가 아님)

   [정정 방향]  카드 영역 ↓ 회색 안내문 ↓ 적정 여백 ↓ 다음 선택 영역
     ① .field-hint-tight 의 '기본값' 을 안전한 양수 여백으로 되돌립니다.
        → 어떤 요소 뒤에 붙어도 겹치지 않습니다.
     ② 음수 여백은 원래 의도였던 '.field-row 바로 뒤' 에서만 적용합니다.
        (입력칸+단위 한 덩어리로 읽히게 하는 기존 UX 유지)
     ③ 카드 그리드·라벨 뒤 안내문은 .field-hint-gap 을 씁니다.
   ★ 특정 해상도용 예외값(-xx)·미디어쿼리 하드코딩을 쓰지 않았습니다. */
.field-hint-tight { margin: 5px 0 14px; }
.field-row + .field-hint-tight { margin-top: -10px; }
/* 카드(.pick-grid / .optgrid / .ckrow) · 라벨 바로 아래 안내문 */
.field-hint-gap { margin: 8px 0 0; }
.field-row { display: flex; gap: 9px; align-items: flex-end; margin-bottom: 14px; }
.field-row .field { flex: 1; margin-bottom: 0; }
.suffix-unit {
  font-size: 14px; color: var(--ink-2); font-weight: 600;
  padding-bottom: 14px; flex: none;
}

/* U-1A §2-4 — .same-check 삭제 (「병원에서 직접 신청합니다」 체크박스 제거) */

/* 목적 선택 칩
   ★★ Phase U-1 2차 최종 미세개선 ①-a (대표 승인) — 터치 타깃 44px.
     [실측 근거] 390px 에서 .chip 높이 40px (기준 44px 미달 · SD/PS 6개).
     ★ .more-btn / .summary-edit 과 완전히 같은 방식입니다 —
       min-height + place-items:center 로 '터치 높이만' 확보하고
       font-size · padding · border-radius · gap 은 1px도 바꾸지 않습니다.
       (padding 9px 를 키워 높이를 늘리면 칩 폭까지 커져 줄바꿈이
        늘어나 화면이 길어집니다. 그래서 min-height 만 씁니다.)
     ★ 상품별 CSS 복제 없음 — .chip 한 곳만 고칩니다. */
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chip {
  font-size: 13px; font-weight: 600;
  padding: 9px 14px; border-radius: 100px;
  border: 1px solid var(--line); background: var(--white);
  color: var(--ink-2);
  min-height: 44px; display: inline-grid; place-items: center;
}
.chip.on { background: var(--green); border-color: var(--green); color: #fff; }

/* 선택 항목 접기 */
.disclosure { border-top: 1px solid var(--line); margin-top: 6px; }
.disclosure summary {
  display: flex; align-items: center; gap: 7px;
  padding: 15px 0; font-size: 14px; font-weight: 600;
  color: var(--green); cursor: pointer; list-style: none;
}
.disclosure summary::-webkit-details-marker { display: none; }
.disclosure summary svg { transition: transform .2s; }
.disclosure[open] summary svg { transform: rotate(90deg); }

/* 동의 */
.agree {
  display: flex; gap: 10px; align-items: flex-start;
  background: var(--ivory-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm); padding: 13px 14px;
  margin: 6px 0 4px;
}
.agree input { width: 19px; height: 19px; accent-color: var(--green); flex: none; margin-top: 1px; }
.agree label { font-size: 13px; line-height: 1.55; color: var(--ink); font-weight: 500; }
.agree a { color: var(--green); text-decoration: underline; font-weight: 600; }

/* ── 완료 화면 ─────────────────────────────── */
.done-wrap { padding: 40px 22px 24px; text-align: center; }
.done-icon {
  width: 68px; height: 68px; border-radius: 50%;
  background: var(--green); color: #fff;
  display: grid; place-items: center; margin: 0 auto 22px;
  animation: pop .45s var(--ease);
}
@keyframes pop {
  from { transform: scale(.5); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}
.done-h1 { font-size: 22px; font-weight: 800; letter-spacing: -.7px; margin: 0 0 12px; }
.done-p { font-size: 14.5px; color: var(--ink-2); line-height: 1.7; margin: 0; }

.receipt {
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); overflow: hidden;
  margin: 26px 18px 0; text-align: left;
}
.receipt-code {
  background: var(--green); color: #fff;
  padding: 16px 16px 15px;
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
}
.receipt-code div span {
  display: block; font-size: 11px; letter-spacing: 1.4px;
  color: var(--gold-soft); font-weight: 700; margin-bottom: 4px;
}
.receipt-code div strong {
  font-size: 19px; font-weight: 800; letter-spacing: .3px;
}
.copy-btn {
  flex: none; background: rgba(255, 255, 255, .16); color: #fff;
  border: none; font-size: 12.5px; font-weight: 700;
  padding: 8px 13px; border-radius: 8px;
}
.receipt-rows { padding: 4px 16px 14px; }
.receipt-rows > div {
  display: flex; gap: 12px; padding: 11px 0;
  border-bottom: 1px dashed var(--line);
  font-size: 13.5px;
}
.receipt-rows > div:last-child { border-bottom: none; }
.receipt-rows dt { flex: none; width: 66px; color: var(--ink-3); font-weight: 500; }
.receipt-rows dd { margin: 0; font-weight: 600; flex: 1; }

.done-actions { padding: 22px 18px 8px; display: flex; flex-direction: column; gap: 9px; }

/* ── 푸터 ──────────────────────────────────── */
.site-footer {
  background: var(--green-deep); color: rgba(255, 255, 255, .62);
  padding: 30px 18px calc(28px + env(safe-area-inset-bottom));
  margin-top: 10px;
}
.ft-brand { margin-bottom: 18px; }
.ft-mark {
  display: block; font-size: 19px; font-weight: 800;
  color: #fff; letter-spacing: .4px; margin-bottom: 4px;
}
.ft-tag { font-size: 12px; }
.ft-link-home {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 13.5px; font-weight: 600; color: var(--gold-soft);
  border: 1px solid rgba(224, 200, 148, .3);
  padding: 10px 15px; border-radius: 100px;
  margin-bottom: 20px;
}
.ft-info { display: flex; gap: 26px; margin: 0 0 18px; }
.ft-info dt { font-size: 11px; margin-bottom: 3px; }
.ft-info dd { margin: 0; font-size: 13px; font-weight: 700; color: #fff; }
.ft-copy {
  font-size: 11px; margin: 0; padding-top: 16px;
  border-top: 1px solid rgba(255, 255, 255, .1);
  color: rgba(255, 255, 255, .38);
}

/* ── 유틸 ──────────────────────────────────── */
.divider { height: 1px; background: var(--line); margin: 0 18px; }
.band-ivory { background: var(--ivory-2); }
.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;
}
.toast {
  position: fixed; left: 50%; bottom: 30px; transform: translateX(-50%) translateY(20px);
  background: var(--ink); color: #fff;
  font-size: 13.5px; font-weight: 600;
  padding: 12px 20px; border-radius: 100px;
  opacity: 0; pointer-events: none; transition: all .28s var(--ease);
  z-index: 300; white-space: nowrap;
}
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ═══════════════════════════════════════════════════════════
   요청서 반영분 (§8 신청≠확정 / §9 달력 안내 / §12 완료화면 /
   §13·§14 관리자 목업 / §20 서버검증 오류)
   ═══════════════════════════════════════════════════════════ */

/* ── §8 히어로 보조안내 ─────────────────────── */
/* 아이보리 배경(.hero-cta) 위에 놓이므로 어두운 텍스트를 사용 */
.hero-note {
  margin: 14px 2px 0;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
  letter-spacing: -.2px;
  text-align: center;
}
.hero-note strong { color: var(--green); font-weight: 700; }

/* ── §8 프로세스 밴드: 최종 확정 강조 + 주의문 ─ */
.f3-row.is-final .f3-num {
  background: var(--gold);
  color: var(--green-deep);
  border-color: var(--gold);
}
.f3-row.is-final .f3-txt strong { color: var(--gold-soft); }
.flow-caution {
  margin: 18px 0 0;
  padding: 12px 14px;
  border: 1px solid rgba(200, 154, 69, .45);
  border-radius: var(--radius-sm);
  background: rgba(200, 154, 69, .1);
  font-size: 12.5px;
  line-height: 1.65;
  color: rgba(255, 255, 255, .86);
}

/* ── §9 주의형 안내 박스 ───────────────────── */
.notice-warn {
  background: #fdf8ee;
  border-color: rgba(200, 154, 69, .5);
}
.notice-warn svg { color: var(--gold); }
.notice-warn p { color: #6b5527; }
.notice-warn strong { color: #8a6415; font-weight: 800; }

/* ── §12 '확정 아님' 알림 배너 ─────────────── */
.alert-confirm {
  margin: 20px 18px 0;
  padding: 15px 16px;
  border: 1px solid rgba(200, 154, 69, .55);
  border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm);
  background: #fdf8ee;
  text-align: left;
}
.alert-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 800;
  color: #8a6415;
  letter-spacing: -.3px;
}
.alert-body {
  margin: 0;
  font-size: 13px;
  line-height: 1.65;
  color: #6b5527;
}

/* ── §12 이후 절차 안내 ────────────────────── */
.next-steps {
  margin: 20px 18px 0;
  padding: 16px 16px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  text-align: left;
}
.next-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--ink-3);
  text-transform: uppercase;
  margin-bottom: 10px;
}
.next-list {
  margin: 0;
  padding: 0;
  list-style: none;
  counter-reset: nx;
}
.next-list li {
  display: flex;
  gap: 10px;
  align-items: flex-start;
  padding: 7px 0;
  font-size: 13.5px;
  line-height: 1.6;
  color: var(--ink-2);
}
.next-list li strong { color: var(--ink); font-weight: 700; }
.next-n {
  flex: none;
  width: 20px; height: 20px;
  border-radius: 50%;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 700;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-top: 1px;
}

/* ── §12 접수증 '확정 전' 태그 ─────────────── */
.dd-tag {
  display: inline-block;
  margin-left: 6px;
  padding: 1px 7px;
  border-radius: 20px;
  background: rgba(200, 154, 69, .16);
  border: 1px solid rgba(200, 154, 69, .45);
  color: #8a6415;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: -.2px;
  vertical-align: 1px;
}

/* ── §20 서버 검증 오류 목록 ───────────────── */
.err-list {
  margin: 4px 18px 0;
  padding: 14px 16px 14px 34px;
  border: 1px solid #f0c9c4;
  border-radius: var(--radius-sm);
  background: #fdf3f2;
  color: #9c3a2e;
  font-size: 13.5px;
  line-height: 1.75;
}
.err-list li { margin: 2px 0; }

/* ═══════════════ §13·§14 관리자 목업 ═══════════════ */
.ad-wrap { padding-bottom: 40px; }

.ad-flag {
  /* sticky 헤더가 프로토타입 배너만큼(24px) 아래로 밀려 있어 겹침 방지 */
  margin: 24px 0 0;
  padding: 11px 18px;
  background: var(--green-deep);
  color: rgba(255, 255, 255, .8);
  font-size: 12px;
  line-height: 1.6;
}
.ad-flag strong { color: var(--gold-soft); font-weight: 700; }

.ad-section { padding: 26px 18px 4px; }
.ad-h2 {
  margin: 0 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--ink);
}
.ad-note {
  margin: 0 0 14px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-2);
}
.ad-note strong { color: var(--ink); font-weight: 700; }
.ad-note-warn {
  margin: 14px 0 0;
  padding: 11px 13px;
  border: 1px solid rgba(200, 154, 69, .45);
  border-radius: var(--radius-sm);
  background: #fdf8ee;
  color: #6b5527;
}
.ad-note-warn strong { color: #8a6415; }

/* 대시보드 카드 */
.ad-cards {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
}
.ad-card {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 15px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.ad-card-n {
  font-size: 26px;
  font-weight: 800;
  line-height: 1.1;
  color: var(--green);
  letter-spacing: -1px;
}
.ad-card-label { font-size: 13px; font-weight: 700; color: var(--ink); }
.ad-card-sub { font-size: 11px; color: var(--ink-3); }

/* 상태 흐름 */
.ad-flow {
  margin: 0;
  padding: 0;
  list-style: none;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
}
.ad-flow-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px 13px;
  border-bottom: 1px solid var(--line);
  font-size: 13.5px;
}
.ad-flow-item:last-child { border-bottom: none; }
.ad-flow-n {
  flex: none;
  font-size: 11px;
  font-weight: 700;
  color: var(--ink-3);
  font-variant-numeric: tabular-nums;
}
.ad-flow-label { font-weight: 600; color: var(--ink); }
.ad-flow-intake { background: var(--ivory-2); }
.ad-flow-intake .ad-flow-label { color: var(--ink-2); }
.ad-flow-confirmed { background: rgba(24, 57, 44, .06); }
.ad-flow-confirmed .ad-flow-label { color: var(--green); font-weight: 800; }
.ad-flow-mark {
  margin-left: auto;
  padding: 2px 8px;
  border-radius: 20px;
  background: var(--gold);
  color: var(--green-deep);
  font-size: 10.5px;
  font-weight: 700;
}

.ad-exc {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 12px;
}
.ad-exc-label { font-size: 11.5px; font-weight: 700; color: var(--ink-3); margin-right: 2px; }
.ad-exc-tag {
  padding: 3px 10px;
  border: 1px dashed var(--line);
  border-radius: 20px;
  background: var(--white);
  font-size: 11.5px;
  color: var(--ink-2);
}

/* 상태 배지 */
.ad-badge {
  flex: none;
  padding: 3px 10px;
  border-radius: 20px;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: -.2px;
}
.ad-badge-intake {
  background: var(--ivory-2);
  border: 1px solid var(--line);
  color: var(--ink-2);
}
.ad-badge-confirmed {
  background: var(--green);
  border: 1px solid var(--green);
  color: #fff;
}
.ad-badge-operation {
  background: rgba(200, 154, 69, .16);
  border: 1px solid rgba(200, 154, 69, .45);
  color: #8a6415;
}

/* 신청 목록 */
.ad-list { display: flex; flex-direction: column; gap: 10px; }
.ad-row {
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.ad-row-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 7px;
}
.ad-row-code {
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-3);
  letter-spacing: .3px;
  font-variant-numeric: tabular-nums;
}
.ad-row-product {
  margin: 0 0 9px;
  font-size: 15px;
  font-weight: 800;
  letter-spacing: -.4px;
  color: var(--ink);
}
.ad-row-meta {
  margin: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.ad-row-meta > div { display: flex; gap: 8px; font-size: 12.5px; }
/* 라벨 폭 — '현재 직원식 식단가'처럼 긴 라벨이 3줄로 쪼개지지 않도록 확보 */
.ad-row-meta dt {
  flex: none;
  width: 96px;
  color: var(--ink-3);
  line-height: 1.45;
}
.ad-row-meta dd { margin: 0; color: var(--ink-2); font-weight: 600; line-height: 1.45; }

/* 신청 상세 */
.ad-detail {
  padding: 16px 15px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.ad-detail-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.ad-detail-product {
  margin: 8px 0 14px;
  font-size: 17px;
  font-weight: 800;
  letter-spacing: -.5px;
  color: var(--green);
}
.ad-detail-dl { margin: 0; }
.ad-dl-row {
  display: flex;
  gap: 10px;
  padding: 9px 0;
  border-bottom: 1px solid var(--line);
  font-size: 13px;
}
.ad-dl-row:last-child { border-bottom: none; }
.ad-dl-row dt { flex: none; width: 108px; color: var(--ink-3); }
.ad-dl-row dd { margin: 0; flex: 1; color: var(--ink); font-weight: 600; line-height: 1.6; }

/* ═══════════════════════════════════════════════════════════
   신청 상세 — 정보 그룹 (3차 피드백 ⑥)
   한 줄씩 이어지던 구조를 ①~⑤ 그룹 카드로 분리해
   담당자가 "연락 전 필요한 정보"를 블록 단위로 훑을 수 있게 합니다.
   ═══════════════════════════════════════════════════════════ */
.ad-grps { display: flex; flex-direction: column; gap: 12px; }
.ad-grp {
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--ivory-2);
  overflow: hidden;
}
.ad-grp-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 7px;
  padding: 11px 13px;
  background: var(--white);
  border-bottom: 1px solid var(--line);
}
/* 그룹 번호 배지 — 원문자(①) 대신 CSS 원형으로 그려 폰트 의존을 없앱니다 */
.ad-grp-no {
  flex: none;
  width: 18px;
  height: 18px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: translateY(2px);
}
.ad-grp-title {
  font-size: 13.5px;
  font-weight: 800;
  letter-spacing: -.3px;
  color: var(--ink);
}
.ad-grp-desc {
  flex: 1 1 100%;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--ink-3);
}
.ad-grp-dl { margin: 0; padding: 3px 13px; }
.ad-grp-dl .ad-dl-row { padding: 8px 0; font-size: 13px; }
.ad-grp-dl .ad-dl-row dt { width: 104px; }
/* 미입력 선택항목 — 0원/빈값을 값처럼 보이지 않게 약하게 표시 */
.ad-grp-dl dd.is-muted { color: var(--ink-3); font-weight: 500; }
/* 연락처·이메일 등 고객이 직접 입력한 핵심 연락정보 강조 */
.ad-grp-dl dd.is-strong { color: var(--green-sub); }
/* 요청사항처럼 긴 텍스트는 라벨 아래로 흘려 읽기 */
.ad-grp-dl .ad-dl-row.is-wide { flex-direction: column; gap: 5px; }
.ad-grp-dl .ad-dl-row.is-wide dt { width: auto; }
.ad-grp-dl .ad-dl-row.is-wide dd { font-weight: 500; }

/* ⑤ RE&H 처리 — 조회가 아니라 '행동' 블록이라 시각적으로 분리 */
.ad-grp-action { margin-top: 14px; background: var(--white); }
.ad-grp-action .ad-btns { padding: 13px; }
.ad-grp-action .ad-btn-note { padding: 0 13px 13px; margin: 0; }

/* 처리 버튼 */
.ad-actions { margin-top: 18px; }
.ad-actions-label {
  display: block;
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: .8px;
  color: var(--ink-3);
  margin-bottom: 9px;
}
.ad-btns { display: flex; flex-wrap: wrap; gap: 7px; }
.ad-btn {
  padding: 9px 13px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  color: var(--ink);
  font-size: 13px;
  font-weight: 700;
  font-family: inherit;
  cursor: pointer;
}
.ad-btn-primary { background: var(--green); border-color: var(--green); color: #fff; }
.ad-btn-sub { background: var(--ivory-2); }
.ad-btn-danger { border-color: #e7c4bf; color: #9c3a2e; background: #fdf3f2; }
.ad-btn-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

.ad-foot {
  margin: 26px 18px 0;
  padding: 13px 14px;
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  border: 1px solid var(--line);
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
}

/* ── 예약서비스 / AI Office 역할 경계 (2차 피드백 ⑥) ── */
.ad-flow-operation { background: repeating-linear-gradient(
  -45deg, var(--ivory-2) 0 6px, #f2efe7 6px 12px); }
.ad-flow-operation .ad-flow-label { color: var(--ink-3); font-weight: 600; }
.ad-scope-handoff { opacity: .95; }
.ad-flow-hand {
  margin-left: auto;
  font-size: 10.5px; font-weight: 700; letter-spacing: -.2px;
  color: var(--ink-3);
  background: #fff; border: 1px dashed #cbd1d6;
  padding: 3px 8px; border-radius: 100px;
  white-space: nowrap;
}
.ad-scope-box {
  margin: 16px 0 4px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--white);
  padding: 15px 14px 13px;
}
.ad-scope-title {
  margin: 0 0 11px;
  font-size: 13px; font-weight: 800; letter-spacing: -.3px;
  color: var(--green);
}
.ad-scope-row {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 9px 0;
  border-top: 1px solid var(--line);
}
.ad-scope-key {
  flex: none; width: 108px;
  font-size: 12px; font-weight: 700; color: var(--ink);
}
.ad-scope-val {
  flex: 1; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.ad-scope-val b { color: var(--green); font-weight: 800; }
.ad-scope-note {
  margin: 11px 0 0;
  padding: 10px 11px;
  background: var(--ivory-2);
  border-radius: 8px;
  font-size: 12px; line-height: 1.65; color: var(--ink-2);
}
.ad-scope-note b { color: var(--ink); font-weight: 700; }

/* ═══════════════════════════════════════════════════════════
   반응형 레이아웃 (3차 피드백)
   ───────────────────────────────────────────────────────────
   설계 원칙
   ① 모바일(~759px)  : 기존 UX·디자인 그대로 유지 (수정 없음)
   ② 태블릿(760px~)  : 2열 전환 + 이미지 4:3 (원본과 동일 비율 = 크롭 0)
   ③ 데스크탑(1080px~): 2열 × 2행 + 이미지 3:2(가로형) + 넓은 여백 활용
   ④ 와이드(1500px~) : 콘텐츠 폭 상한(1320px)으로 과도한 확장 방지

   이미지 원칙
   - 모든 이미지는 aspect-ratio 컨테이너 + object-fit: cover
   - width/height 를 각각 강제 지정하지 않으므로 찌그러짐(왜곡) 없음
   - 상품 원본 = 900×672 (4:3). 태블릿은 4/3(무크롭), PC는 3/2(상하 소폭 크롭)
   ═══════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────
   ② 태블릿 : 760px ~
   ───────────────────────────────────────────── */
@media (min-width: 760px) {
  :root { --maxw: 880px; }

  /* 헤더 */
  .site-header { padding: 0 30px; height: 62px; }
  .hd-mark { font-size: 21px; }
  .hd-contact { font-size: 13.5px; padding: 8px 16px; }

  /* 히어로 — 가로로 넓어진 만큼 세로는 억제 */
  .hero-img { height: auto; aspect-ratio: 16 / 9; min-height: 0; max-height: 560px; }
  .hero-body { padding: 0 30px 34px; max-width: 620px; }
  .hero-h1 { font-size: 38px; letter-spacing: -1.3px; }
  .hero-p { font-size: 15.5px; }

  /* 히어로 CTA — 전폭 버튼 대신 버튼 + 안내문 가로 배치 */
  .hero-cta {
    display: flex; align-items: center; gap: 22px;
    padding: 24px 30px 6px;
  }
  .hero-cta .btn { width: auto; min-width: 230px; flex: none; }
  .hero-note { margin: 0; text-align: left; flex: 1; }

  /* 섹션 공통 */
  .section { padding: 52px 30px; }
  .section-h2 { font-size: 27px; letter-spacing: -.9px; }
  .section-p { font-size: 15px; max-width: 620px; margin-bottom: 26px; }
  .h2-sub { font-size: 22px; }
  .divider { margin: 0 30px; }

  /* 상품 쇼케이스 — 1열 → 2열 */
  .showcase {
    display: grid; grid-template-columns: repeat(2, 1fr);
    gap: 32px 20px;
  }
  /* 첫 항목만 컸던 모바일 예외 규칙을 무효화해 2열 높이를 정렬 */
  .sc-media,
  .sc-item:first-child .sc-media { aspect-ratio: 4 / 3; max-height: 420px; }
  .sc-name { font-size: 22px; }
  .sc-tag { font-size: 13px; }
  .sc-caption { left: 20px; right: 20px; bottom: 18px; }

  /* 3단계 프로세스 — 세로 나열 → 가로 3열 */
  .flow-band { padding: 52px 30px; }
  .flow3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 0; margin-top: 14px; }
  .f3-row {
    flex-direction: column; align-items: flex-start; gap: 12px;
    padding: 6px 24px; border-bottom: none;
    border-right: 1px solid rgba(255, 255, 255, .14);
  }
  .f3-row:first-child { padding-left: 0; }
  .f3-row:last-child { border-right: none; padding-right: 0; }
  .flow-caution { max-width: 780px; margin-top: 26px; }

  /* 상품 상세 */
  /* img 의 height 속성(672) 때문에 aspect-ratio 가 무시되므로 height:auto 명시 */
  .detail-hero img { height: auto; aspect-ratio: 2 / 1; max-height: 480px; }
  .detail-head { padding: 30px 30px 8px; }
  .detail-h1 { font-size: 32px; }
  .detail-lead { font-size: 15.5px; }
  .body-text { font-size: 15.5px; max-width: 760px; }
  .section-tight { padding-top: 34px; padding-bottom: 14px; }

  /* 갤러리 — 가로 스크롤 → 3열 그리드 */
  .gallery-scroll {
    display: grid; grid-template-columns: repeat(3, 1fr);
    gap: 16px; overflow: visible; padding: 0 30px 4px;
  }
  .gallery-scroll figure { width: auto; }

  /* 추천 질문 · 프로그램 · 사례 */
  .ask-list { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; max-width: 860px; }
  .disclosure-plain { max-width: 860px; }
  .steps { display: grid; grid-template-columns: 1fr 1fr; gap: 0 30px; max-width: 860px; }
  .step-row:nth-last-child(2) { border-bottom: none; }
  .case-grid { grid-template-columns: repeat(3, 1fr); gap: 14px; max-width: 900px; }

  /* 안내 박스 */
  .notice { margin: 20px 30px 0; max-width: 820px; }

  /* 하단 고정 CTA — 버튼을 중앙 정렬하고 폭 제한 */
  .sticky-cta { padding: 14px 30px calc(14px + env(safe-area-inset-bottom)); }
  .sticky-cta .btn { max-width: 560px; margin: 0 auto; }

  /* 신청 퍼널 — 폼은 넓히지 않고 가운데 정렬 (가독성 우선) */
  .stepper { max-width: 520px; margin: 0 auto; padding: 24px 18px 6px; }
  .summary { max-width: 560px; margin: 0 auto 22px; padding: 14px; }
  .cal-card { max-width: 620px; margin: 0 auto; padding: 20px 18px; }
  .cal-cell { min-height: 62px; font-size: 15.5px; padding: 7px 2px 6px; }
  .cal-st { font-size: 10.5px; letter-spacing: -.3px; }
  .cal-legend span { font-size: 12px; }
  .form-section { max-width: 560px; margin: 0 auto; padding: 6px 18px 8px; }
  #cal-disclaimer,
  .err-list,
  .alert-confirm,
  .next-steps,
  .receipt,
  .done-actions { max-width: 560px; margin-left: auto; margin-right: auto; }
  .done-wrap { padding: 56px 30px 24px; }
  .done-h1 { font-size: 27px; }
  .done-actions { flex-direction: row; }
  .done-actions .btn { flex: 1; }

  /* 푸터 — 브랜드 / 연락처 좌우 배치 */
  .site-footer { padding: 42px 30px calc(34px + env(safe-area-inset-bottom)); }
  .ft-inner {
    display: grid; grid-template-columns: 1fr auto;
    align-items: start; column-gap: 40px;
  }
  .ft-brand { margin-bottom: 14px; }
  .ft-link-home { grid-row: 2; grid-column: 1; margin-bottom: 0; }
  .ft-info { grid-row: 1 / span 2; grid-column: 2; margin: 0; justify-self: end; }
  .ft-copy { grid-column: 1 / -1; margin-top: 30px; }

  /* 관리자 목업 */
  .ad-section { padding: 30px 30px 4px; }
  .ad-list { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
  .ad-scope-box { max-width: 720px; }

  /* 신청 상세 그룹 — 넓어진 폭을 그룹 단위로 사용 (3차 피드백 ⑥)
     ※ 고객 신청폼은 중앙 제한폭을 유지합니다. 여기는 관리자 업무화면입니다. */
  .ad-detail { padding: 20px 20px; }
  .ad-grps { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: start; }
  .ad-grp-head { padding: 12px 15px; }
  .ad-grp-dl { padding: 4px 15px; }
  .ad-grp-action .ad-btns,
  .ad-grp-action .ad-btn-note { padding-left: 15px; padding-right: 15px; }
}

/* ─────────────────────────────────────────────
   ③ 데스크탑 : 1080px ~
   ───────────────────────────────────────────── */
@media (min-width: 1080px) {
  :root { --maxw: 1180px; }

  .site-header { padding: 0 48px; height: 68px; }

  /* 히어로 */
  .hero-img { aspect-ratio: 21 / 9; max-height: 600px; }
  .hero-body { padding: 0 48px 46px; max-width: 660px; }
  .hero-h1 { font-size: 46px; letter-spacing: -1.8px; margin-bottom: 16px; }
  .hero-p { font-size: 16.5px; }
  .hero-cta { padding: 32px 48px 8px; gap: 30px; }
  .hero-cta .btn { min-width: 250px; min-height: 58px; font-size: 16px; }
  .hero-note { font-size: 13px; max-width: 520px; }

  /* 섹션 */
  .section { padding: 76px 48px; }
  .section-h2 { font-size: 32px; letter-spacing: -1.2px; }
  .section-p { font-size: 15.5px; margin-bottom: 34px; }
  .h2-sub { font-size: 25px; }
  .divider { margin: 0 48px; }

  /* 상품 쇼케이스 — 2열 × 2행, 가로형(3:2) 이미지 */
  .showcase { gap: 44px 28px; }
  .sc-media,
  .sc-item:first-child .sc-media {
    aspect-ratio: 3 / 2; max-height: 400px; border-radius: 3px;
  }
  .sc-badge { top: 18px; left: 18px; }
  .sc-caption { left: 24px; right: 24px; bottom: 22px; }
  .sc-name { font-size: 26px; letter-spacing: -1px; }
  .sc-tag { font-size: 13.5px; }
  .sc-actions { margin-top: 16px; }
  .sc-link, .sc-apply { font-size: 14px; }

  /* 3단계 프로세스 */
  .flow-band { padding: 76px 48px; }
  .f3-row { padding: 8px 34px; gap: 14px; }
  .f3-num { width: 32px; height: 32px; font-size: 13px; }
  .f3-txt strong { font-size: 17px; }
  .f3-txt span { font-size: 13.5px; }
  .flow-caution { margin-top: 34px; }

  /* 상품 상세 */
  .detail-hero img { height: auto; aspect-ratio: 21 / 9; max-height: 500px; }
  .detail-head { padding: 38px 48px 8px; }
  .detail-h1 { font-size: 38px; letter-spacing: -1.4px; }
  .section-tight { padding-top: 48px; padding-bottom: 16px; }
  .gallery-scroll { padding: 0 48px 4px; gap: 20px; }
  .ask-list { gap: 0 44px; }
  .ask-q { font-size: 16px; padding: 18px 0 18px 24px; }
  .ask-q::before { top: 18px; }
  .steps { gap: 0 44px; }
  .case-grid { gap: 18px; }
  .case-item { padding: 18px 17px; }
  .notice { margin: 26px 48px 0; padding: 15px 17px; }
  .sticky-cta { padding: 16px 48px calc(16px + env(safe-area-inset-bottom)); }

  /* 신청 퍼널 */
  .stepper { max-width: 560px; padding: 30px 18px 8px; }
  .summary { max-width: 600px; }
  .cal-card { max-width: 680px; padding: 24px 22px; }
  .cal-cell { min-height: 70px; font-size: 16px; padding: 9px 3px 8px; }
  .cal-st { font-size: 11.5px; letter-spacing: -.2px; }
  .form-section { max-width: 600px; }
  #cal-disclaimer,
  .err-list,
  .alert-confirm,
  .next-steps,
  .receipt,
  .done-actions { max-width: 600px; }
  .done-wrap { padding: 76px 48px 26px; }

  /* 푸터 */
  .site-footer { padding: 52px 48px calc(40px + env(safe-area-inset-bottom)); }

  /* 관리자 목업 */
  .ad-section { padding: 34px 48px 4px; }
  .ad-flag { padding: 13px 48px; }

  /* PC — ①②③ 3열 + ④ 전폭. 연락 전에 필요한 정보를 한 화면에서 파악 */
  .ad-detail { padding: 24px 24px; }
  .ad-list { grid-template-columns: repeat(2, 1fr); }
  .ad-grps { grid-template-columns: repeat(3, 1fr); gap: 14px; }
  #ad-grp-request { grid-column: 1 / -1; }
  #ad-grp-request .ad-grp-dl { padding-bottom: 6px; }
  .ad-grp-dl .ad-dl-row { font-size: 13.5px; }
  .ad-foot { padding-left: 48px; padding-right: 48px; }
}

/* ─────────────────────────────────────────────
   ④ 와이드 데스크탑 : 1500px ~
   콘텐츠 폭 상한을 두어 좌우로 지나치게 벌어지지 않게 함
   ───────────────────────────────────────────── */
@media (min-width: 1500px) {
  :root { --maxw: 1320px; }

  .hero-img { max-height: 640px; }
  .hero-h1 { font-size: 52px; }
  .hero-body { max-width: 720px; padding-bottom: 54px; }

  .section { padding: 88px 56px; }
  .flow-band { padding: 88px 56px; }
  .section-h2 { font-size: 34px; }
  .h2-sub { font-size: 26px; }

  .showcase { gap: 52px 32px; }
  .sc-media,
  .sc-item:first-child .sc-media { max-height: 430px; }
  .sc-name { font-size: 28px; }

  .site-header { padding: 0 56px; }
  .hero-cta { padding: 36px 56px 8px; }
  .detail-head { padding: 42px 56px 8px; }
  .gallery-scroll { padding: 0 56px 4px; }
  .notice { margin: 26px 56px 0; }
  .divider { margin: 0 56px; }
  .sticky-cta { padding: 18px 56px calc(18px + env(safe-area-inset-bottom)); }
  .site-footer { padding: 60px 56px calc(44px + env(safe-area-inset-bottom)); }
}

/* ─────────────────────────────────────────────
   마우스 환경(PC) 전용 인터랙션
   터치 기기에는 적용되지 않으므로 모바일 UX 영향 없음
   ───────────────────────────────────────────── */
@media (hover: hover) and (min-width: 760px) {
  .sc-media img { transition: transform .8s var(--ease); }
  .sc-media:hover img { transform: scale(1.045); }
  .sc-apply:hover { background: var(--green); color: #fff; }
  .sc-link:hover { color: var(--green); }
  .sc-link:hover svg { color: var(--green); }
  .btn-primary:hover:not(:disabled) { background: var(--green-sub); }
  .btn-ghost:hover { background: var(--green); color: #fff; }
  .hd-contact:hover { border-color: var(--green); }
  .cal-cell[data-st="available"]:hover,
  .cal-cell[data-st="check_required"]:hover {
    background: var(--ivory-2); border-color: var(--green); cursor: pointer;
  }
  /* ★ Phase D §6·§11 — 카드/행 전체가 클릭 영역임을 hover 로도 알립니다 */
  .optcard:hover { border-color: #b9c8c1; }
  .ckrow:hover { border-color: #b9c8c1; background: var(--ivory-2); }
  .ft-link-home:hover { border-color: var(--gold-soft); }
  .summary-edit:hover { border-color: var(--green); color: var(--green); }
  .chip:hover { border-color: var(--green); }
}

/* ═══════════════════════════════════════════════════════════
   5차 피드백 — 관리자 로그인 / 중복신청 확인 / 상태 이력
   ═══════════════════════════════════════════════════════════ */

/* ── 관리자 로그인 ─────────────────────── */
.ad-login {
  max-width: 380px;
  margin: 8px auto 0;
  padding: 24px 20px 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
}
.ad-login-h1 {
  margin: 0 0 8px;
  font-size: 19px;
  font-weight: 800;
  letter-spacing: -.6px;
  color: var(--green);
}
.ad-login-p {
  margin: 0 0 18px;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.ad-login-msg {
  margin: 0 0 14px;
  padding: 10px 12px;
  border-radius: var(--radius-sm);
  font-size: 12.5px;
  line-height: 1.6;
}
.ad-login-msg.is-err { background: #fdf3f2; border: 1px solid #e7c4bf; color: #9c3a2e; }
.ad-login-msg.is-ok  { background: var(--ivory-2); border: 1px solid var(--line); color: var(--ink-2); }
.ad-login-form { display: flex; flex-direction: column; gap: 14px; }
.ad-login-form .btn { margin-top: 4px; }
.ad-login-note {
  margin: 18px 0 0;
  padding: 12px 12px 12px 28px;
  background: var(--ivory-2);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-3);
}
.ad-login-note li { margin: 1px 0; }

/* ── 로그인 상태 표시 / 로그아웃 ──────── */
.ad-logout-form { margin-left: auto; }
.ad-logout {
  padding: 6px 12px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--white);
  font-size: 11.5px;
  font-weight: 700;
  color: var(--ink-2);
  cursor: pointer;
  font-family: inherit;
}
.ad-who {
  margin: 24px 0 0;
  padding: 10px 18px;
  background: var(--green-deep);
  color: rgba(255, 255, 255, .78);
  font-size: 11.5px;
  line-height: 1.65;
}
.ad-who strong { color: var(--gold-soft); font-weight: 700; }

.ad-flash {
  margin: 0;
  padding: 11px 18px;
  font-size: 12.5px;
  line-height: 1.6;
  font-weight: 600;
}
.ad-flash.is-ok  { background: #eef5f1; color: var(--green); border-bottom: 1px solid var(--line); }
.ad-flash.is-err { background: #fdf3f2; color: #9c3a2e; border-bottom: 1px solid #e7c4bf; }

.ad-empty {
  margin: 0;
  padding: 22px 14px;
  border: 1px dashed var(--line);
  border-radius: var(--radius);
  background: var(--white);
  text-align: center;
  font-size: 12.5px;
  color: var(--ink-3);
}

/* 목록 항목이 링크가 됨 */
a.ad-row { display: block; text-decoration: none; color: inherit; }
a.ad-row.is-active { border-color: var(--green); box-shadow: 0 0 0 2px rgba(24, 57, 44, .09); }

/* ── 상태 변경 폼 ─────────────────────── */
.ad-action-form { padding: 13px; }
.ad-action-form .field { margin-bottom: 12px; }
.ad-grp-action .ad-action-form + .ad-btn-note { padding: 0 13px 13px; }

/* ── 상태 변경 이력 (append-only) ─────── */
.ad-hist { margin: 0; padding: 13px 13px 13px 30px; list-style: none; }
.ad-hist-item {
  position: relative;
  padding: 0 0 14px 14px;
  border-left: 2px solid var(--line);
  font-size: 12.5px;
  line-height: 1.6;
}
.ad-hist-item:last-child { padding-bottom: 0; border-left-color: transparent; }
.ad-hist-item::before {
  content: '';
  position: absolute;
  left: -6px;
  top: 4px;
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--ink-3);
  border: 2px solid var(--white);
}
.ad-hist-confirmed::before { background: var(--green); }
.ad-hist-operation::before { background: var(--gold); }
.ad-hist-exception::before { background: #9c3a2e; }
.ad-hist-at   { display: block; font-size: 11px; color: var(--ink-3); font-variant-numeric: tabular-nums; }
.ad-hist-move { display: block; color: var(--ink-2); }
.ad-hist-move strong { color: var(--ink); font-weight: 800; }
.ad-hist-who  { display: block; font-size: 11.5px; color: var(--ink-3); }
.ad-hist-memo {
  display: block;
  margin-top: 4px;
  padding: 7px 9px;
  background: var(--ivory-2);
  border-radius: 8px;
  font-size: 11.5px;
  color: var(--ink-2);
}

.ad-badge-exception { background: #fdf3f2; color: #9c3a2e; }

/* ── 중복신청 확인 화면 ───────────────── */
.dupe-icon {
  width: 48px;
  height: 48px;
  margin: 0 0 14px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #fdf6ea;
  color: var(--gold);
}
.dupe-prev, .dupe-new {
  margin: 18px 0 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.dupe-prev { border-color: var(--gold-soft); background: #fffdf8; }
.dupe-prev-title {
  margin: 0 0 10px;
  font-size: 12px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--green);
}
.dupe-dl { margin: 0; display: flex; flex-direction: column; gap: 8px; }
.dupe-dl > div { display: flex; gap: 10px; font-size: 13px; }
.dupe-dl dt {
  flex: 0 0 68px;
  margin: 0;
  color: var(--ink-3);
  font-size: 12px;
  font-weight: 600;
  line-height: 1.5;
}
.dupe-dl dd { margin: 0; color: var(--ink-2); font-weight: 600; line-height: 1.5; }
.dupe-dl dd.is-strong { color: var(--ink); font-weight: 800; font-variant-numeric: tabular-nums; }
.dupe-prev-note {
  margin: 12px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.dupe-actions {
  margin: 22px 0 0;
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.dupe-form { display: contents; }
.dupe-foot {
  margin: 18px 0 0;
  padding: 12px;
  background: var(--ivory-2);
  border-radius: var(--radius-sm);
  font-size: 11.5px;
  line-height: 1.75;
  color: var(--ink-3);
}
.dupe-foot strong { color: var(--ink-2); font-weight: 700; }

/* ── 데스크탑 ─────────────────────────── */
@media (min-width: 760px) {
  .ad-login { max-width: 420px; padding: 30px 26px 24px; }
  .dupe-dl > div { font-size: 13.5px; }
  .dupe-actions { flex-direction: row; }
  .dupe-actions .btn { flex: 1; }
  .dupe-form { display: flex; flex: 1; }
  .dupe-form .btn { width: 100%; }
}
@media (hover: hover) and (min-width: 760px) {
  a.ad-row:hover { border-color: var(--green); }
  .ad-logout:hover { border-color: var(--green); color: var(--green); }
  .ad-btn:hover { border-color: var(--green); }
}

/* ═══════════════════════════════════════════════════════════════
   6차 — 관리자 견적 시뮬레이터 (Phase A)
   ※ 관리자 전용 화면입니다. 고객 화면 변수/규칙을 그대로 씁니다.
   ═══════════════════════════════════════════════════════════════ */
.ad-navlink {
  margin-left: auto;
  margin-right: 12px;
  font-size: 13px;
  color: var(--gold);
  text-decoration: none;
  border-bottom: 1px solid transparent;
}
@media (hover: hover) {
  .ad-navlink:hover { border-bottom-color: var(--gold); }
}

.sim { padding-bottom: 48px; }
.sim-head {
  display: flex; flex-wrap: wrap; gap: 12px;
  align-items: flex-start; justify-content: space-between;
  padding: 18px 0 10px;
}
.sim-title { font-size: 20px; font-weight: 700; color: var(--green); margin: 0 0 4px; }
.sim-sub { font-size: 13px; line-height: 1.6; color: #5a6b63; margin: 0; max-width: 52ch; }
.sim-who { display: flex; align-items: center; gap: 10px; font-size: 13px; color: #5a6b63; }

.sim-card { margin-bottom: 14px; }
.sim-card--warn { border-left: 3px solid var(--gold); }
.sim-card--meta { margin-top: 22px; background: #fbfaf7; }
.sim-h2 {
  font-size: 14px; font-weight: 700; color: var(--green);
  margin: 0 0 12px; letter-spacing: -0.2px;
}
.sim-h3 {
  font-size: 13px; font-weight: 700; color: var(--ink);
  margin: 22px 0 8px;
}
.sim-hint { font-size: 12px; line-height: 1.65; color: #6e7d76; margin: 10px 0 0; }
.sim-label { display: block; font-size: 12px; font-weight: 600; color: #47564f; margin-bottom: 6px; }
.sim-block { margin-bottom: 16px; }
.sim-block:last-child { margin-bottom: 0; }

.sim-tabs { display: flex; flex-wrap: wrap; gap: 8px; }
.sim-tab {
  display: inline-flex; align-items: center; padding: 8px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-size: 13px; cursor: pointer; background: #fff;
}
.sim-tab input { position: absolute; opacity: 0; width: 0; height: 0; }
.sim-tab.is-on { background: var(--green); color: #fff; border-color: var(--green); }
@media (hover: hover) {
  .sim-tab:not(.is-on):hover { border-color: var(--green); }
}

.sim-grid2 { display: grid; gap: 12px; }
@media (min-width: 760px) { .sim-grid2 { grid-template-columns: 1fr 1fr; } }
.sim-field select, .sim-field input {
  width: 100%; padding: 11px 12px; font-size: 14px;
  border: 1px solid var(--line); border-radius: 10px; background: #fff;
  color: var(--ink); box-sizing: border-box;
}

.sim-choices { display: grid; gap: 8px; }
@media (min-width: 1080px) { .sim-choices { grid-template-columns: 1fr 1fr; } }
.sim-choice {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px;
  font-size: 13px; line-height: 1.5; cursor: pointer; background: #fff;
}
.sim-choice input { margin-top: 2px; flex: 0 0 auto; }
.sim-plus { font-style: normal; color: var(--gold); margin-left: 6px; font-size: 12px; }
.sim-note {
  font-style: normal; display: inline-block; margin-left: 6px;
  font-size: 11px; color: #6e7d76;
}
.sim-actions { padding: 6px 0 4px; }

.sim-result { margin-top: 20px; }
.sim-amount {
  padding: 16px; border-radius: 12px; background: #f3f7f4;
  border: 1px solid #dbe7df; margin-bottom: 16px;
}
.sim-amount--consult { background: #fdf8ee; border-color: #ecdcba; }
.sim-amount__label { font-size: 12px; color: #5a6b63; margin: 0 0 4px; }
.sim-amount__value { font-size: 24px; font-weight: 700; color: var(--green); margin: 0 0 8px; }
.sim-amount__notice { font-size: 12px; line-height: 1.6; color: #5a6b63; margin: 0; }
.sim-amount__consult { font-size: 16px; font-weight: 700; color: #8a6a1f; margin: 0 0 6px; }
.sim-amount__reason { font-size: 12px; color: #6e7d76; margin: 0; }

.sim-summary {
  display: grid; gap: 10px; margin: 0 0 8px;
  grid-template-columns: 1fr 1fr;
}
@media (min-width: 1080px) { .sim-summary { grid-template-columns: repeat(4, 1fr); } }
.sim-summary dt { font-size: 11px; color: #6e7d76; margin-bottom: 3px; }
.sim-summary dd { font-size: 14px; font-weight: 600; color: var(--ink); margin: 0; }

.sim-table { width: 100%; border-collapse: collapse; font-size: 13px; }
.sim-table th, .sim-table td {
  padding: 9px 8px; border-bottom: 1px solid var(--line);
  text-align: left; vertical-align: top;
}
.sim-table th { font-size: 11px; font-weight: 600; color: #6e7d76; background: #fbfaf7; }
.sim-table .ta-r { text-align: right; }
.sim-total td { font-weight: 700; color: var(--green); background: #f6f8f6; }

.sim-valuebreak {
  display: flex; flex-wrap: wrap; gap: 14px; padding: 10px 0 0;
  margin: 0; list-style: none; font-size: 12px; color: #5a6b63;
}
.sim-list { margin: 0; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.sim-list--warn { color: #8a6a1f; }

/* ══════════════════════════════════════════════════
   Phase B — 관리자 정책 설정 (.pol-*)
   요청 4: 상품 중심 관리화면 / 요청 1: 임시저장→적용 관문
   기존 디자인 토큰(--green/--gold/--line/--ink/--ivory)만 사용
   반응형 기준선은 기존과 동일 760 / 1080 / 1500
   ══════════════════════════════════════════════════ */

/* ── 버튼 이중하이픈 변형 (policyadmin/simulator 에서 사용) ── */
.btn--primary { background: var(--green); color: #fff; }
.btn--primary:disabled { background: #cfd4d0; color: #fff; cursor: not-allowed; }
.btn--gold { background: var(--gold); color: #fff; }
.btn--ghost {
  background: var(--white); color: var(--green);
  border: 1.4px solid var(--green);
}
.btn--line { background: transparent; color: var(--ink-2); border: 1px solid var(--line); }
.btn--lg { min-height: 60px; font-size: 16.5px; }

/* 정책화면 안의 버튼은 인라인 폭으로 (기본 .btn 은 width:100%) */
.pol .btn {
  width: auto; min-height: 40px; padding: 0 16px;
  font-size: 13.5px; cursor: pointer; text-decoration: none;
  border-radius: var(--radius-sm);
}
.pol .btn--lg { min-height: 56px; padding: 0 28px; font-size: 16px; width: 100%; }

/* ── 셸 ────────────────────────────────────── */
.pol {
  max-width: var(--maxw); margin: 0 auto;
  background: var(--ivory); min-height: 100vh;
  padding-bottom: 40px;
}
.pol-head {
  background: var(--green); color: #fff;
  padding: 18px 18px 0;
}
.pol-head__main {
  display: flex; align-items: flex-start;
  justify-content: space-between; gap: 12px;
  padding-bottom: 14px;
}
.pol-title {
  font-size: 19px; font-weight: 800; letter-spacing: -.6px;
  margin: 0 0 4px;
}
.pol-sub {
  font-size: 12.5px; line-height: 1.55; margin: 0;
  color: rgba(255, 255, 255, .78);
}
.pol-who {
  flex: none; font-size: 11.5px; padding: 5px 10px;
  border-radius: 999px; background: rgba(255, 255, 255, .14);
  color: rgba(255, 255, 255, .92); white-space: nowrap;
}

/* ── 상단 내비 ─────────────────────────────── */
.pol-nav {
  display: flex; gap: 4px; overflow-x: auto;
  scrollbar-width: none; padding: 0 12px;
}
.pol-nav::-webkit-scrollbar { display: none; }
.pol-navlink {
  flex: none; padding: 10px 12px 11px;
  font-size: 13px; font-weight: 600; text-decoration: none;
  color: rgba(255, 255, 255, .66);
  border-bottom: 2.5px solid transparent;
  white-space: nowrap;
}
.pol-navlink.is-on {
  color: #fff; border-bottom-color: var(--gold);
}

.pol-foot {
  padding: 22px 18px; font-size: 11.5px; line-height: 1.7;
  color: var(--ink-3); border-top: 1px solid var(--line);
  margin-top: 24px;
}
.pol-foot strong { color: var(--ink-2); }

/* ── 플래시 ────────────────────────────────── */
.pol-flash {
  margin: 14px 14px 0; padding: 12px 14px;
  border-radius: var(--radius-sm); font-size: 13px;
  font-weight: 600; line-height: 1.55;
}
.pol-flash.is-ok { background: #eaf4ee; color: #1d5b3b; border: 1px solid #c6e2d1; }
.pol-flash.is-err { background: #fdeeee; color: #9c2b2b; border: 1px solid #f2cdcd; }

/* ── 배너 (초안 상태) ──────────────────────── */
.pol-banner {
  margin: 14px 14px 0; padding: 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  background: var(--white); box-shadow: var(--shadow);
  font-size: 13px; line-height: 1.6; color: var(--ink-2);
}
.pol-banner p { margin: 0 0 4px; }
.pol-banner p:last-child { margin-bottom: 0; }
.pol-banner strong { color: var(--ink); }
.pol-banner--live { border-left: 4px solid #b9c4bd; }
.pol-banner--draft {
  border-left: 4px solid var(--gold); background: #fffaf0;
}
.pol-banner--warn {
  border-left: 4px solid #d98b2b; background: #fff7ec;
  color: #7d5215;
}
.pol-banner__acts {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 12px;
}

/* ── 배지 ──────────────────────────────────── */
.pol-badge {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 11px; font-weight: 700; letter-spacing: -.2px;
  background: var(--ivory-2); color: var(--ink-2);
  border: 1px solid var(--line); vertical-align: middle;
}
.pol-badge--err { background: #fdeeee; color: #9c2b2b; border-color: #f2cdcd; }
.pol-badge--warn { background: #fff7ec; color: #7d5215; border-color: #f0dcbb; }
.pol-badge--ok { background: #eaf4ee; color: #1d5b3b; border-color: #c6e2d1; }
.pol-badge--draft { background: #fdf3e0; color: #8a6118; border-color: #ecd7a9; }

/* ── 검증 이슈 목록 ────────────────────────── */
.pol-issues {
  margin: 14px 14px 0; padding: 14px;
  border-radius: var(--radius); background: var(--white);
  border: 1px solid var(--line);
}
.pol-issues__head {
  display: flex; align-items: center; gap: 8px;
  font-size: 13.5px; font-weight: 700; color: var(--ink);
  margin-bottom: 10px;
}
.pol-issuelist { margin: 0; padding: 0; list-style: none; }
.pol-issue {
  padding: 9px 11px; border-radius: 8px; margin-bottom: 6px;
  font-size: 12.5px; line-height: 1.55;
}
.pol-issue:last-child { margin-bottom: 0; }
.pol-issue.is-error { background: #fdeeee; color: #8f2727; }
.pol-issue.is-warn { background: #fff7ec; color: #7d5215; }
.pol-issue__at { display: block; font-weight: 700; margin-bottom: 2px; }
.pol-issue__msg { display: block; }

/* ── 섹션 ──────────────────────────────────── */
.pol-section {
  margin: 14px 14px 0; padding: 16px 14px;
  background: var(--white); border: 1px solid var(--line);
  border-radius: var(--radius); box-shadow: var(--shadow);
}
.pol-h2 {
  font-size: 15px; font-weight: 800; color: var(--ink);
  letter-spacing: -.5px; margin: 0 0 4px;
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
}
.pol-h2--alert { color: #9c2b2b; }
.pol-lead {
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
  margin: 0 0 14px;
}
.pol-warnline {
  font-size: 12.5px; line-height: 1.6; color: #7d5215;
  background: #fff7ec; border-radius: 8px;
  padding: 10px 12px; margin: 0 0 12px;
}

/* ── 상품 카드 (요청 4 첫 진입) ─────────────── */
.pol-cards {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.pol-card {
  border: 1px solid var(--line); border-radius: var(--radius);
  padding: 14px; background: var(--ivory-2);
}
.pol-card.has-draft {
  background: #fffaf0; border-color: #ecd7a9;
}
.pol-card__head {
  display: flex; align-items: center; justify-content: space-between;
  gap: 10px; margin-bottom: 10px;
}
.pol-card__name {
  font-size: 15px; font-weight: 800; color: var(--green);
  letter-spacing: -.4px; margin: 0;
}
.pol-card__meta {
  display: grid; grid-template-columns: repeat(2, 1fr);
  gap: 6px 12px; margin: 0 0 12px;
  font-size: 12.5px; color: var(--ink-2);
}
.pol-card__meta dt { color: var(--ink-3); font-size: 11.5px; }
.pol-card__meta dd { margin: 0 0 4px; font-weight: 600; }
.pol-card__none {
  font-size: 12.5px; color: #9c2b2b; margin: 0 0 12px;
  line-height: 1.6;
}
.pol-card__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 표 ────────────────────────────────────── */
.pol-tablewrap {
  overflow-x: auto; -webkit-overflow-scrolling: touch;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white);
}
.pol-table {
  width: 100%; border-collapse: collapse;
  font-size: 12.5px; min-width: 560px;
}
.pol-table--edit { min-width: 720px; }
.pol-table th, .pol-table td {
  padding: 8px 9px; text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle; white-space: nowrap;
}
.pol-table thead th {
  background: var(--ivory-2); color: var(--ink-2);
  font-size: 11.5px; font-weight: 700; white-space: nowrap;
}
.pol-table tbody tr:last-child td { border-bottom: none; }
.pol-table tr.is-off { opacity: .5; background: #fafafa; }
.pol-table tr.is-spike { background: #fff5f5; }
.pol-td-before { color: var(--ink-3); }
.pol-td-after { color: var(--ink); font-weight: 700; }
.pol-td-flags { font-size: 11.5px; color: var(--ink-3); }
.pol-td-when { font-size: 11.5px; color: var(--ink-3); }
.pol-spike {
  display: inline-block; margin-left: 6px; padding: 2px 7px;
  border-radius: 999px; font-size: 10.5px; font-weight: 800;
  background: #9c2b2b; color: #fff;
}
.pol-empty {
  padding: 20px 14px; text-align: center;
  font-size: 12.5px; color: var(--ink-3);
}

/* ── 입력 ──────────────────────────────────── */
.pol-form { margin: 0; }
.pol-grid {
  display: grid; grid-template-columns: 1fr; gap: 12px;
}
.pol-field { display: flex; flex-direction: column; gap: 5px; }
.pol-label {
  font-size: 12px; font-weight: 700; color: var(--ink-2);
}
.pol-hint {
  font-size: 11.5px; line-height: 1.55; color: var(--ink-3);
  margin: 6px 0 0;
}
/* 옵션 마스터 — 기본금액 vs 상품별 적용금액 안내 (Gap 1 §5) */
.pol-note {
  margin: 8px 0 12px; padding: 9px 11px;
  background: var(--bg-2, #f7f7f4); border-left: 3px solid var(--green);
  border-radius: 0 6px 6px 0;
}
.pol-note p { margin: 0; font-size: 12px; line-height: 1.6; color: var(--ink-2); }
.pol-note em { font-style: normal; color: var(--ink-3); }
.pol-details {
  margin-top: 10px; font-size: 12.5px; color: var(--ink-2);
}
.pol-details summary {
  cursor: pointer; font-weight: 700; color: var(--green);
  padding: 6px 0;
}
.pol-num, .pol-txt, .pol-sel {
  width: 100%; min-height: 40px; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 8px;
  background: var(--white); color: var(--ink);
  font-size: 13.5px; font-family: inherit;
}
.pol-num { text-align: right; }
.pol-num:focus, .pol-txt:focus, .pol-sel:focus {
  outline: none; border-color: var(--green);
  box-shadow: 0 0 0 3px rgba(24, 57, 44, .08);
}
.pol-num--s { width: 78px; min-width: 78px; }
.pol-num--xs { width: 58px; min-width: 58px; }
.pol-txt--s { width: 110px; min-width: 110px; }
.pol-sel--wide { min-width: 180px; }
.pol-chk {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12.5px; color: var(--ink-2); cursor: pointer;
  white-space: nowrap;
}
.pol-chk input { width: 17px; height: 17px; accent-color: var(--green); }
.pol-flagrow { display: flex; flex-wrap: wrap; gap: 10px 14px; }
.pol-rowacts { display: flex; gap: 6px; }
.pol-addrow { margin-top: 12px; display: flex; flex-wrap: wrap; gap: 8px; }
.pol-itemname { font-weight: 700; color: var(--ink); }
.pol-itemcode {
  display: block; font-size: 11px; color: var(--ink-3);
  font-weight: 400;
}
.pol-inline { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }

/* ── 저장 바 (요청 1) ──────────────────────── */
.pol-savebar {
  position: sticky; bottom: 0; z-index: 20;
  margin: 16px 0 0; padding: 14px;
  background: var(--white); border-top: 1.5px solid var(--green);
  box-shadow: 0 -4px 18px rgba(24, 57, 44, .1);
}
.pol-savebar__msg {
  font-size: 12px; line-height: 1.6; color: var(--ink-3);
  margin: 0 0 10px;
}
.pol-savebar__msg strong { color: var(--green); }
.pol-savebar__acts { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 혜택 블록 ─────────────────────────────── */
.pol-promos { display: grid; gap: 12px; }
.pol-promo {
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  padding: 14px; background: var(--ivory-2);
}
.pol-promo.is-off { opacity: .55; }
.pol-subblock { margin-top: 12px; }
.pol-subblock > h4 {
  font-size: 12.5px; font-weight: 800; color: var(--ink-2);
  margin: 0 0 8px;
}
.pol-items { display: grid; gap: 8px; }

/* ── 설정 (VAT · 요청 7) ───────────────────── */
.pol-setlist { display: grid; gap: 12px; }
.pol-setrow {
  display: grid; grid-template-columns: 1fr; gap: 8px;
  padding: 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--ivory-2);
}
.pol-setrow__info { font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
.pol-setrow__info strong { display: block; color: var(--ink); font-size: 13.5px; }
.pol-setrow__input { max-width: 320px; }

/* ── 급변 경고 상자 (요청 1 핵심) ──────────── */
.pol-spikebox {
  margin: 14px 14px 0; padding: 16px 14px;
  border: 2px solid #9c2b2b; border-radius: var(--radius);
  background: #fff5f5;
}
.pol-spikebox h2 {
  font-size: 15px; font-weight: 800; color: #9c2b2b;
  margin: 0 0 6px; letter-spacing: -.4px;
}
.pol-spikebox p {
  font-size: 12.5px; line-height: 1.6; color: #7c3a3a; margin: 0 0 12px;
}
.pol-spikelist { margin: 0; padding: 0; list-style: none; }
.pol-spikelist li {
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--white); border: 1px solid #f0cccc;
  border-radius: 8px; font-size: 12.5px; line-height: 1.6;
}
.pol-spikelist li:last-child { margin-bottom: 0; }
.pol-spike__at { display: block; font-size: 11.5px; color: var(--ink-3); }
.pol-spike__field { font-weight: 700; color: var(--ink); }
.pol-spike__from { color: var(--ink-3); text-decoration: line-through; }
.pol-spike__arrow { margin: 0 5px; color: var(--ink-3); }
.pol-spike__to { font-weight: 800; color: #9c2b2b; }

/* ── 최종 적용 폼 ──────────────────────────── */
.pol-publishform { display: grid; gap: 12px; }
.pol-confirm {
  display: flex; align-items: flex-start; gap: 9px;
  padding: 13px; border: 1.5px solid var(--gold);
  border-radius: var(--radius-sm); background: #fffaf0;
  font-size: 13px; line-height: 1.55; color: #6b4a12;
  cursor: pointer; font-weight: 600;
}
.pol-confirm input { flex: none; width: 19px; height: 19px; margin-top: 1px; accent-color: var(--gold); }
.pol-blocked {
  padding: 16px 14px; border-radius: var(--radius);
  background: #fdeeee; border: 1px solid #f2cdcd;
  color: #8f2727; font-size: 13px; line-height: 1.6;
}
.pol-blocked strong { display: block; margin-bottom: 4px; }

/* ── 시뮬레이터 초안 바 (요청 6) ───────────── */
.sim-draftbar {
  margin: 14px 14px 0; padding: 13px 14px;
  border-radius: var(--radius); border: 1px solid var(--line);
  border-left: 4px solid #b9c4bd; background: var(--white);
  font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
}
.sim-draftbar.is-draft {
  border-color: #ecd7a9; border-left-color: var(--gold);
  background: #fffaf0;
}
.sim-draftbar p { margin: 0 0 4px; }
.sim-draftbar p:last-child { margin-bottom: 0; }
.sim-draftbar strong { color: var(--ink); }
.sim-draftbar__acts {
  display: flex; flex-wrap: wrap; gap: 8px; margin-top: 11px;
}
.sim-draftbar__acts .btn {
  width: auto; min-height: 38px; padding: 0 14px;
  font-size: 13px; text-decoration: none; border-radius: var(--radius-sm);
}

/* ── VAT 표기 (요청 7) ─────────────────────── */
.sim-vat {
  display: inline-block; margin-left: 8px;
  font-size: 12px; font-style: normal; font-weight: 700;
  padding: 3px 9px; border-radius: 999px;
  background: rgba(255, 255, 255, .18); color: rgba(255, 255, 255, .92);
  vertical-align: middle;
}
.sim-vat--none {
  background: rgba(200, 154, 69, .22); color: var(--gold-soft);
}

/* ── 반응형 760 ────────────────────────────── */
@media (min-width: 760px) {
  .pol-cards--2 { grid-template-columns: repeat(2, 1fr); }
  .pol-grid { grid-template-columns: repeat(2, 1fr); }
  .pol-setrow { grid-template-columns: 1fr 320px; align-items: center; }
  .pol-head { padding: 22px 24px 0; }
  .pol-nav { padding: 0 18px; }
  .pol-flash, .pol-banner, .pol-issues, .pol-section,
  .pol-spikebox, .sim-draftbar { margin-left: 20px; margin-right: 20px; }
  .pol-section { padding: 20px; }
  .pol-title { font-size: 22px; }
}

/* ── 반응형 1080 ───────────────────────────── */
@media (min-width: 1080px) {
  .pol-cards { grid-template-columns: repeat(2, 1fr); }
  .pol-grid { grid-template-columns: repeat(3, 1fr); }
  .pol-table { min-width: 0; }
  .pol-savebar { border-radius: var(--radius) var(--radius) 0 0; }
  .pol-flash, .pol-banner, .pol-issues, .pol-section,
  .pol-spikebox, .sim-draftbar { margin-left: 24px; margin-right: 24px; }
}

/* ── 반응형 1500 ───────────────────────────── */
@media (min-width: 1500px) {
  .pol-cards { grid-template-columns: repeat(4, 1fr); }
  .pol-cards--2 { grid-template-columns: repeat(2, 1fr); }
  .pol-section { padding: 24px 26px; }
}

/* ── 데스크탑 hover ────────────────────────── */
@media (hover: hover) {
  .pol .btn:hover { filter: brightness(1.06); }
  .pol-navlink:hover { color: #fff; }
  .pol-card:hover { border-color: #c9d2cb; }
  .pol-details summary:hover { text-decoration: underline; }
}

/* ══════════════════════════════════════════════════════════════
   Phase C-3 — 식수구간 / 진행지역 선택 + 예상 운영정보
   ─────────────────────────────────────────────────────────────
   · 기존 CSS 변수·반경·색만 사용합니다 (새 색상 정의 없음)
   · 기존 반응형 기준(520 / 760 / 1080 / 1500 + hover)을 그대로 따릅니다
   ══════════════════════════════════════════════════════════════ */

/* ── 선택 그리드 (구간 · 지역 공통) ────────── */
.pick-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}
.pick {
  display: flex; flex-direction: column; gap: 3px;
  align-items: flex-start; text-align: left;
  padding: 12px 13px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); color: var(--ink);
  font-family: inherit; cursor: pointer;
  transition: border-color .18s, background .18s, color .18s;
}
.pick-label { font-size: 14px; font-weight: 600; line-height: 1.35; }
.pick-hint { font-size: 11.5px; font-weight: 500; color: var(--ink-3); line-height: 1.4; }
/* ★ 후속 요청 §4 — 진행 지역 추가금액 배지.
     .optcard-price 와 같은 시각언어를 씁니다 (같은 성격의 '추가금액').
     max-width:100% + 줄바꿈 허용으로 좁은 폭(390px)에서도 잘리지 않습니다. */
.pick-price {
  display: inline-block; max-width: 100%; margin-top: 5px;
  padding: 2px 8px; border-radius: 999px;
  background: #f3efe4; color: #8a6a22;
  font-size: 12px; font-weight: 800; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
  white-space: nowrap; overflow-wrap: normal;
}
.pick.on {
  background: var(--green); border-color: var(--green); color: #fff;
}
.pick.on .pick-hint { color: rgba(255, 255, 255, .78); }
.pick.on .pick-price { background: rgba(255, 255, 255, .16); color: #fff; }
.pick:focus-visible { outline: 2px solid var(--gold); outline-offset: 2px; }

/* ── 예상 운영정보 패널 ────────────────────── */
.quote-box {
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ivory-2);
  padding: 15px 16px; margin: 4px 0 18px;
}
.quote-idle { margin: 0; font-size: 13px; line-height: 1.6; color: var(--ink-3); }
.quote-error { margin: 0; font-size: 13px; line-height: 1.6; color: var(--gold); font-weight: 600; }

.quote-row {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 12px; padding: 5px 0;
}
.quote-cap { font-size: 12.5px; font-weight: 600; color: var(--ink-2); flex: none; }
.quote-amount {
  font-size: 23px; font-weight: 800; letter-spacing: -.4px;
  color: var(--green); text-align: right; line-height: 1.25;
}
/* 상담 전환 — 금액이 아니라 안내문이 들어오므로 크기를 낮춥니다 */
.quote-amount.is-consult {
  font-size: 14px; font-weight: 600; color: var(--ink-2);
}
.quote-staff { font-size: 14px; font-weight: 700; color: var(--ink); text-align: right; }

.quote-blocks { margin-top: 4px; }
.qblock {
  display: grid; grid-template-columns: 1fr auto;
  gap: 2px 10px; align-items: baseline;
  border-top: 1px dashed var(--line); padding: 9px 0 2px; margin-top: 8px;
}
.qblock-t { font-size: 11.5px; font-weight: 700; letter-spacing: .6px; color: var(--gold); }
.qblock-v { font-size: 12.5px; font-weight: 700; color: var(--ink); text-align: right; grid-row: 1; grid-column: 2; }
.qblock-i { font-size: 12px; color: var(--ink-3); line-height: 1.5; grid-column: 1 / -1; }

.quote-note {
  margin: 12px 0 0; padding-top: 11px;
  border-top: 1px solid var(--line);
  font-size: 12px; line-height: 1.6; color: var(--ink-2);
}

/* ── 반응형 520 ────────────────────────────── */
@media (min-width: 520px) {
  .pick-grid { grid-template-columns: repeat(3, 1fr); }
  .pick-grid-2 { grid-template-columns: repeat(2, 1fr); }
}

/* ── 반응형 760 ────────────────────────────── */
@media (min-width: 760px) {
  .pick-grid { grid-template-columns: repeat(4, 1fr); gap: 9px; }
  .pick-grid-2 { grid-template-columns: repeat(3, 1fr); }
  .quote-box { padding: 18px 20px; }
  .quote-amount { font-size: 26px; }
}

/* ── 반응형 1080 ───────────────────────────── */
@media (min-width: 1080px) {
  .pick-grid-2 { grid-template-columns: repeat(4, 1fr); }
  .quote-amount { font-size: 28px; }
}

/* ── 반응형 1500 ───────────────────────────── */
@media (min-width: 1500px) {
  .pick-grid { gap: 10px; }
}

/* ── 데스크탑 hover ────────────────────────── */
@media (hover: hover) {
  .pick:hover { border-color: #c9d2cb; background: var(--white); }
  .pick.on:hover { border-color: var(--green); filter: brightness(1.08); }
}

/* ═══════════════════════════════════════════════════════════════
   Phase C-4 — 행사 구성 / 기본 제공 서비스 / Sticky 요약
   ★ 기존 CSS 변수와 기존 breakpoint(520 / 760 / 1080 / 1500)만 사용합니다.
   ★ 요청서 §9 — 화면 복잡도 통제: 카드에 금액을 쓰지 않으므로
     칩/카드는 라벨·설명·추천배지만 담는 얇은 형태로 유지합니다.
   ═══════════════════════════════════════════════════════════════ */
.form-legend-spaced { margin-top: 26px; }
.pick-grid-3 { grid-template-columns: repeat(2, 1fr); }
.pick-desc {
  display: block; margin-top: 3px;
  font-size: 12px; line-height: 1.45; color: var(--ink-3);
}
.pick-badge {
  display: inline-block; margin-left: 6px; padding: 1px 6px;
  border-radius: 999px; background: var(--gold); color: #fff;
  font-size: 10px; font-weight: 700; letter-spacing: .02em; vertical-align: 1px;
}
.pick-reco { border-color: var(--gold); }
.pick-clear { color: var(--ink-3); }
.disclosure-tight { margin-top: 10px; }

/* ═══ U-1A §2-6 — 「현재 식단가」 상시 노출 ══════════════
   이전 <details class="disclosure disclosure-tight"> 접힘을 대신합니다.
   접힘을 펼치는 단계 없이 바로 입력할 수 있어야 합니다 —
   병원 현재 단가를 알고 상담을 시작하는 것이 목표입니다.
   ★ 가격 계산과는 연결되지 않는 상담 추가정보이므로
     기본 입력칸보다 한 단계 연하게(ivory) 처리합니다. */
.band-exact-row {
  margin-top: 12px; padding: 12px 13px 2px;
  background: var(--ivory-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.band-exact-title {
  font-size: 12.5px; font-weight: 700; color: var(--ink-2);
  margin: 0 0 10px;
}
.band-exact-row .field-row { margin-bottom: 10px; }
.band-exact-row .field-hint-tight { margin: 0 0 10px; }

/* ═══ U-1A §2-7 — 「기본 상품 / 선택 옵션」 2그룹 구분 ══════════
   대표 지시: 고객이 기본적으로 제공받는 영역과 추가로 선택하는
   영역을 직관적으로 구분합니다.
   ★ 내부 DB 구조(kind / category / selectable_mode)는 무수정이며
     이것은 고객 화면의 정보구조 표시일 뿐입니다.
   ★ 그룹 배지도 버튼이 아니므로 cursor:default 입니다. */
.group-head {
  display: flex; align-items: center; gap: 9px;
  margin: 22px 0 12px;
}
/* 배지 우측으로 얇은 구분선을 흘려 '영역이 시작된다'는 신호를 줍니다 */
.group-head::after {
  content: ''; flex: 1 1 auto; height: 1px;
  background: var(--line);
}
.group-badge {
  display: inline-block; flex: none;
  padding: 5px 11px; border-radius: 999px;
  font-size: 12px; font-weight: 800; letter-spacing: .02em;
  line-height: 1.35; white-space: nowrap;
  cursor: default;
}
/* 기본 상품 = 진녹색 채움 (상품의 본체) */
.group-badge-base { background: var(--green); color: #fff; }
/* 선택 옵션 = 골드 외곽선 (추가 선택이라는 성격) */
.group-badge-option {
  /* 골드(#c89a45) 원색은 흰 배경에서 대비가 부족하므로 글자만 어둡게 씁니다 */
  background: #fff; color: #8a6a1f;
  border: 1.5px solid var(--gold);
}
/* 선택 옵션 그룹은 SPECIAL OPTION 라벨 바로 위에 오므로 상단여백만 조정 */
#opt-field .group-head { margin-top: 4px; }
#group-option-note { margin-bottom: 4px; }

/* ★ 실측 검수 2차에서 발견한 정보구조 결함 수정 —
     「기본 제공 서비스」(#inc-box)가 「선택 옵션」 배지 아래에 이어 붙어
     선택 옵션에 속한 항목처럼 읽혔습니다. DOM 순서와 id 는 회귀 보호
     대상이므로 건드리지 않고, 선택 옵션 영역(#opt-field)에 옅은 골드
     경계를 둘러 "그룹이 여기서 끝난다"를 시각적으로 확정합니다.
     → #inc-box 는 이 경계 밖에 놓이므로 선택 옵션 소속으로 보이지 않습니다. */
#opt-field {
  padding: 4px 12px 12px;
  border: 1px solid rgba(200, 154, 69, .28);
  border-radius: var(--radius-sm);
  background: rgba(200, 154, 69, .035);
  margin-bottom: 18px;
}
/* 그룹 경계 안에서는 구분선을 지웁니다 (테두리와 이중선이 되므로) */
#opt-field .group-head::after { display: none; }

/* 390px — 배지가 잘리지 않도록 구분선을 접습니다 */
@media (max-width: 400px) {
  .group-head { gap: 7px; margin: 18px 0 10px; }
  .group-badge { padding: 4px 10px; font-size: 11.5px; }
  /* 좁은 화면에서 좌우 여백이 과해지지 않도록 축소 */
  #opt-field { padding: 4px 10px 10px; }
}

/* ── SPECIAL OPTION (다중선택) ── */
.optgrid { display: grid; gap: 8px; }
.optcard {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 12px 13px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white);
  cursor: pointer; transition: border-color .18s var(--ease), background .18s var(--ease);
}
/* ★ Phase D §6 — 카드 전체가 선택 영역입니다.
     실제 checkbox input 은 제거하지 않고 시각적으로만 감춥니다
     (폼 전송 · 키보드 · 스크린리더 유지). */
.optcard-input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
/* ○ → ✓ 표시자 */
.optcard-check {
  flex: 0 0 auto; width: 22px; height: 22px; margin-top: 1px;
  border: 1.8px solid #cdd3d0; border-radius: 50%;
  background: var(--white); color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.optcard-body { display: block; flex: 1 1 auto; min-width: 0; }
.optcard-label { display: block; font-size: 14px; font-weight: 600; color: var(--ink); }
.optcard-desc { display: block; margin-top: 3px; font-size: 12px; line-height: 1.5; color: var(--ink-3); }
/* ★ Phase D §7 — 선택 전에도 보이는 '실제 예상 운영금액 증가액' */
.optcard-price {
  display: inline-block; margin-top: 7px;
  padding: 2px 8px; border-radius: 999px;
  background: #f3efe4; color: #8a6a22;
  font-size: 12.5px; font-weight: 800; letter-spacing: -.2px;
  font-variant-numeric: tabular-nums;
}
/* 선택 상태 — 카드 전체를 강조합니다 */
.optcard:has(.optcard-input:checked) {
  border-color: var(--green); background: #f3f7f4;
  box-shadow: inset 0 0 0 1px var(--green);
}
.optcard:has(.optcard-input:checked) .optcard-check {
  background: var(--green); border-color: var(--green); color: #fff;
}
.optcard:has(.optcard-input:checked) .optcard-label { color: var(--green); }
.optcard:has(.optcard-input:checked) .optcard-price { background: var(--green); color: #fff; }
.optcard:has(.optcard-input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
/* ★★ Phase U-1 2차 — 모바일 터치영역 마감 (대표 승인 §1-①)
     [실측 결함] padding 11px + 줄높이 17px = 39px 로 터치영역 부족.
     → min-height 로 44px 를 확보합니다. padding·dashed 테두리·폰트·
       전체폭 정렬은 그대로 두어 디자인이 바뀌지 않습니다.
       (높이만 39→44px, place-items 로 라벨은 계속 정중앙) */
.more-btn {
  margin-top: 10px; width: 100%; padding: 11px;
  min-height: 44px; display: grid; place-items: center;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  background: transparent; color: var(--ink-2);
  font-size: 13px; font-weight: 600; cursor: pointer;
}
.more-count {
  display: inline-block; margin-left: 6px; padding: 0 6px;
  border-radius: 999px; background: var(--ivory-2); color: var(--ink-3); font-size: 11px;
}

/* ── 기본 제공 서비스 (읽기전용 · 체크박스 아님) ── */
.incbox {
  margin: 18px 0 4px; padding: 14px 15px;
  border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--ivory-2);
}
.incbox-h {
  margin: 0 0 9px; font-size: 13px; font-weight: 700; color: var(--green);
  letter-spacing: .02em;
  /* U-1A §2-7 — 배지와 제목을 한 줄에 두되 좁은 화면에서는 줄바꿈 허용 */
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
}
/* ═══ U-1A §2-7 — 「기본 제공」 배지 ═════════════════════════
   ★ 선택 버튼으로 오해되지 않아야 합니다:
     · cursor 를 pointer 로 두지 않습니다
     · 테두리를 강조하지 않고 배경 톤만 씁니다 (버튼 아님)
     · 클릭 대상이 아니므로 hover/active 상태가 없습니다 */
.inc-badge {
  display: inline-block; flex: none;
  padding: 3px 8px; border-radius: 999px;
  background: var(--green); color: #fff;
  font-size: 11px; font-weight: 700; letter-spacing: .02em;
  line-height: 1.35; white-space: nowrap;
  cursor: default;
}
.inclist { margin: 0; padding: 0; list-style: none; display: grid; gap: 6px; }
.inclist li { display: flex; gap: 7px; align-items: baseline; font-size: 13.5px; color: var(--ink); }
.inc-check { color: var(--green); font-weight: 700; flex: 0 0 auto; }
.inc-desc { font-size: 12px; color: var(--ink-3); }
.incbox-sum { margin: 10px 0 0; font-size: 13px; font-weight: 700; color: var(--gold); }
.incbox-note { margin: 7px 0 0; font-size: 11.5px; line-height: 1.55; color: var(--ink-3); }

/* ── 행사 후 관리 ── */
/* ★ Phase D §11 — 행 전체가 클릭 영역이고, 체크 영역을 크게 키웁니다.
     최소 높이 48px 로 모바일 터치 타겟 기준을 만족합니다. */
.ckrow {
  display: flex; gap: 11px; align-items: center;
  min-height: 48px; padding: 11px 12px;
  margin-bottom: 8px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--white); cursor: pointer;
  transition: border-color .16s var(--ease), background .16s var(--ease);
}
.ckrow-input {
  position: absolute; opacity: 0; width: 1px; height: 1px;
  margin: 0; pointer-events: none;
}
.ckrow-check {
  flex: 0 0 auto; width: 22px; height: 22px;
  border: 1.8px solid #cdd3d0; border-radius: 6px;
  background: var(--white); color: transparent;
  display: flex; align-items: center; justify-content: center;
  transition: background .16s var(--ease), border-color .16s var(--ease), color .16s var(--ease);
}
.ckrow-body { display: block; flex: 1 1 auto; min-width: 0; }
.ckrow-label { font-size: 14px; color: var(--ink); font-weight: 600; }
.ckrow:has(.ckrow-input:checked) { border-color: var(--green); background: #f3f7f4; }
.ckrow:has(.ckrow-input:checked) .ckrow-check {
  background: var(--green); border-color: var(--green); color: #fff;
}
.ckrow:has(.ckrow-input:checked) .ckrow-label { color: var(--green); font-weight: 700; }
.ckrow:has(.ckrow-input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }
.ckrow-sub { margin-left: 20px; }
.reco-banner {
  margin: 4px 0 8px; padding: 12px 13px;
  border: 1px solid var(--gold); border-radius: var(--radius-sm);
  background: rgba(200, 154, 69, .07);
}
.reco-banner p { margin: 0 0 9px; font-size: 12.5px; line-height: 1.6; color: var(--ink-2); }
.reco-cta {
  padding: 7px 13px; border: 1px solid var(--green); border-radius: 999px;
  background: var(--white); color: var(--green);
  font-size: 12.5px; font-weight: 700; cursor: pointer;
}

/* ── Sticky 요약 (축약형 + 상세) — 요청서 §10 ──
   ★ 금액을 그리는 DOM 은 여기 한 곳뿐입니다. */
.sticky-cta .quote-box { margin: 0 0 9px; padding: 0; border: 0; background: transparent; }
/* ★★ Phase U-1 2차 최종 미세개선 ①-b (대표 승인) — 터치 타깃 44px.
     [실측 근거] 390px 에서 .quote-head(#quote-toggle) 높이 41px.
     ★ 이미 display:flex + align-items:center 이므로 min-height 만
       더하면 내용은 계속 세로 정중앙에 남습니다. padding·font-size
       무변경 → 금액 글자 크기와 좌우 여백은 기존과 동일합니다.
     ★ 접힘 sticky 는 3px 만 커집니다 (129 → 132px 예상). */
.quote-head {
  display: flex; align-items: center; gap: 9px; width: 100%;
  padding: 9px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white);
  text-align: left; cursor: pointer;
  min-height: 44px;
}
.quote-head .quote-cap { font-size: 11.5px; color: var(--ink-3); flex: 0 0 auto; }
.quote-head .quote-amount { margin-left: auto; font-size: 17px; font-weight: 800; color: var(--green); }
.quote-amount.is-consult { font-size: 13.5px; font-weight: 700; }

/* ★★ Phase U-1 2차 최종 미세개선 ② (대표 승인) — 상담 안내 2줄 요약.
     [실측 결함] 접힘 Sticky 에 정책 안내 원문이 그대로 들어가 390px 에서
       4줄로 번지고, sticky 441 → 475px / 화면 56% 를 점유했습니다.
     ★ 고객이 첫 화면에서 즉시 알아야 하는 2가지만 남깁니다.
         ① 신청이 막힌 것이 아니다 → .quote-consult-s 「신청은 가능하며」
         ② 현재 금액이 최종이 아니다 → .quote-consult-t 「범위 초과」
     ★ 새 컴포넌트가 아니라 기존 .quote-head 안의 한 슬롯입니다.
       원문 전문은 기존 상세보기(.quote-consult-full)에서 확인합니다.
     ★ 상담 전환이 아닌 상품·상태에서는 hidden 이라 1픽셀도 안 바뀝니다. */
.quote-consult {
  margin-left: auto; display: flex; flex-direction: column;
  gap: 1px; text-align: right; min-width: 0;
}
.quote-consult-t {
  font-size: 12.5px; font-weight: 800; color: var(--ink);
  line-height: 1.35; letter-spacing: -.2px;
}
.quote-consult-s {
  font-size: 11px; font-weight: 600; color: var(--ink-3); line-height: 1.4;
}
/* 상세보기 안의 정책 안내문 '전문' — 축약하지 않은 원문 */
.quote-consult-full {
  margin: 0 0 9px; padding: 9px 10px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--ivory);
  font-size: 12px; line-height: 1.65; color: var(--ink-2);
}
.quote-more { flex: 0 0 auto; font-size: 11px; color: var(--gold); font-weight: 700; }
.quote-detail {
  margin-top: 8px; padding: 11px 12px; border: 1px solid var(--line);
  border-radius: var(--radius-sm); background: var(--white);
  max-height: 42vh; overflow-y: auto;
}
.quote-line { display: flex; gap: 10px; align-items: baseline; padding: 4px 0; font-size: 12.5px; }
.quote-k { flex: 0 0 auto; color: var(--ink-3); }
.quote-v { margin-left: auto; text-align: right; color: var(--ink); font-weight: 600; }
.quote-detail .quote-blocks { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.quote-detail .quote-note { margin: 9px 0 0; font-size: 11px; line-height: 1.55; color: var(--ink-3); }
.quote-idle { margin: 0 0 9px; font-size: 12px; line-height: 1.55; color: var(--ink-3); text-align: center; }
.quote-error { margin: 0 0 9px; font-size: 12.5px; color: #a3402f; text-align: center; }

/* ★ Phase U-1 단계3 (대표 지시 §5) — 부분 자동견적 안내.
   상담형 항목이 섞였을 때만 나타납니다. 상담 항목이 없으면 [hidden] 이라
   기존 상품 화면의 여백·높이가 전혀 바뀌지 않습니다.
   ★ 390px 에서도 줄바꿈으로만 처리되고 가로 스크롤을 만들지 않습니다. */
.quote-partial {
  margin: 6px 0 0; padding: 7px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); background: #fffaf0;
}
.quote-partial[hidden] { display: none; }
.quote-partial-note {
  margin: 0; font-size: 11.5px; line-height: 1.5; font-weight: 600; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.quote-partial-items {
  margin: 0 0 3px; font-size: 11px; line-height: 1.5; color: var(--ink-3);
  overflow-wrap: anywhere;
}
.quote-partial-items:empty { display: none; }

/* ★★ Phase U-1 2차 A3 (대표 지시) — 접힘 상태의 상담항목 '건수' 표기.
   [기존 결함] 항목 이름을 전문 나열해서 항목이 2~3개면 Sticky 가 계속
     커졌습니다 (390px 실측: sticky 191px · 상세 펼침 시 화면 66% 점유).
   → 접힘은 「상담 후 안내 2건」 한 줄로 고정 높이가 됩니다.
   ★ 상담형의 의미·데이터는 그대로입니다 — 0원·무료 표기를 만들지 않습니다. */
.quote-partial-count {
  display: inline-block;
  font-size: 11.5px; font-weight: 700; color: var(--gold);
  letter-spacing: -0.1px;
}
.quote-partial-count:empty { display: none; }

@media (min-width: 520px) {
  .pick-grid-3 { grid-template-columns: repeat(3, 1fr); }
}
@media (min-width: 760px) {
  .optgrid { grid-template-columns: repeat(2, 1fr); }
  .sticky-cta .quote-box { max-width: 560px; margin: 0 auto 10px; }
  .quote-detail { max-height: 34vh; }
}
@media (min-width: 1080px) {
  .inclist { grid-template-columns: repeat(2, 1fr); }
}

/* ═══════════════════════════════════════════════════════════════
   Phase C-5 — 담당자 STEP(§9) / 금액변경 재확인(§2) /
                관리자 상담 브리핑(§8) / 완료화면 Snapshot 요약(§10)
   ★ 기존 CSS 변수와 기존 breakpoint(520 / 760 / 1080 / 1500)만 사용합니다.
   ═══════════════════════════════════════════════════════════════ */

/* ── §9 담당자 STEP 표제 (화면 추가 없이 구획만 명확히) ── */
.form-legend-wrap { margin-top: 28px; }
.form-legend-wrap .form-legend { margin-bottom: 4px; }
.form-legend-note {
  margin: 0 0 12px;
  font-size: 12.5px; line-height: 1.6; color: var(--ink-3);
}

/* ── §2 금액변경 재확인 화면 ── */
.amtchg-icon {
  width: 46px; height: 46px; margin: 6px auto 14px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: var(--ivory-2); color: var(--gold);
  border: 1px solid var(--line);
}
.amtchg-now {
  margin: 16px 0 18px; padding: 18px 16px;
  background: var(--green); color: var(--white);
  border-radius: var(--radius); text-align: center;
}
.amtchg-now-cap {
  margin: 0 0 6px;
  font-size: 12px; font-weight: 700; letter-spacing: .06em;
  color: var(--gold);
}
.amtchg-now-amt {
  margin: 0;
  font-size: 26px; font-weight: 800; letter-spacing: -1px;
  line-height: 1.25;
}
.amtchg-now-note {
  margin: 8px 0 0;
  font-size: 12px; line-height: 1.6; opacity: .82;
}
.amtchg-sum {
  padding: 4px 16px 2px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.amtchg-sum-title {
  margin: 14px 0 2px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.1px;
  color: var(--gold); text-transform: uppercase;
}
.amtchg-dl { margin: 0; }
.amtchg-dl > div {
  display: flex; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--line); font-size: 13.5px;
}
.amtchg-dl > div:last-child { border-bottom: none; }
.amtchg-dl dt { flex: none; width: 96px; color: var(--ink-3); }
.amtchg-dl dd { margin: 0; flex: 1; color: var(--ink); font-weight: 600; line-height: 1.55; }
.amtchg-actions { margin-top: 18px; display: grid; gap: 10px; }
.amtchg-form { display: block; }
.amtchg-form .btn { width: 100%; }
.amtchg-foot {
  margin: 14px 0 4px;
  font-size: 12px; line-height: 1.65; color: var(--ink-3); text-align: center;
}

/* ── §8 관리자 상담 브리핑 (Snapshot 전용 · 라이브 재계산 없음) ── */
.ad-brief {
  margin: 0 0 18px; padding: 16px;
  background: var(--ivory-2);
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius);
}
.ad-brief-head {
  display: flex; align-items: baseline; flex-wrap: wrap; gap: 8px;
  margin-bottom: 12px;
}
.ad-brief-title {
  font-size: 12px; font-weight: 800; letter-spacing: 1.1px;
  color: var(--gold); text-transform: uppercase;
}
.ad-brief-note { font-size: 11.5px; color: var(--ink-3); }
.ad-brief-top {
  display: grid; gap: 12px;
  padding-bottom: 12px; margin-bottom: 4px;
  border-bottom: 1px solid var(--line);
}
.ad-brief-hosp {
  margin: 0 0 4px;
  font-size: 17px; font-weight: 800; letter-spacing: -.4px; color: var(--green);
}
.ad-brief-sub { margin: 2px 0 0; font-size: 12.5px; color: var(--ink-2); line-height: 1.55; }
/* ★★ Phase U-1 2차 A4 — 요청사항이 '없음' 인 경우.
   비어 있는 것과 값이 누락된 것을 구분하기 위해 회색으로만 약화시킵니다. */
.ad-brief-note-empty { color: var(--ink-3); font-weight: 500; }
.ad-brief-amt {
  padding: 12px 14px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ad-brief-amt-cap {
  margin: 0 0 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-3);
}
.ad-brief-amt-val {
  margin: 0; font-size: 21px; font-weight: 800; letter-spacing: -.7px; color: var(--green);
}
.ad-brief-amt-consult {
  margin: 0; font-size: 14.5px; font-weight: 700; color: var(--gold); line-height: 1.5;
}
.ad-brief-amt-staff { margin: 6px 0 0; font-size: 12.5px; color: var(--ink-2); }
.ad-brief-dl { margin: 0; }
.ad-brief-dl > div {
  display: flex; gap: 10px; padding: 8px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.ad-brief-dl > div:last-child { border-bottom: none; }
.ad-brief-dl dt { flex: none; width: 108px; color: var(--ink-3); }
.ad-brief-dl dd { margin: 0; flex: 1; color: var(--ink); font-weight: 600; line-height: 1.6; }
.ad-brief-opt { display: inline; }

/* ★ Phase U-1 단계3 (대표 지시 §4) — 상담 필요 항목.
   담당자가 '금액 누락' 과 '상담 대상' 을 즉시 구분하도록 강조합니다. */
.ad-brief-consult-item { display: inline; font-weight: 600; }
.ad-brief-consult-note {
  display: block; margin-top: 3px;
  font-size: 11.5px; line-height: 1.5; font-weight: 400; color: var(--ink-3);
}
.ad-brief-contact {
  display: flex; flex-wrap: wrap; gap: 6px 14px; align-items: center;
  margin-top: 12px; padding-top: 12px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.ad-brief-tel { color: var(--green); font-weight: 800; text-decoration: none; }
.ad-brief-tel:hover { text-decoration: underline; }
.ad-brief-mail, .ad-brief-co { color: var(--ink-3); font-size: 12.5px; }
.ad-brief-basis {
  margin: 10px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.5;
}

/* ── §10 완료화면 Snapshot 요약 (라이브 재계산 금지) ── */
.done-sum {
  margin: 18px 0 4px; padding: 4px 16px 16px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
  text-align: left;
}
.done-sum-title {
  margin: 16px 0 12px;
  font-size: 12px; font-weight: 700; letter-spacing: 1.1px;
  color: var(--gold); text-transform: uppercase;
}
.done-sum-amt {
  padding: 14px 14px; margin-bottom: 4px;
  background: var(--ivory-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  text-align: center;
}
.done-sum-amt-cap { margin: 0 0 4px; font-size: 11.5px; font-weight: 700; color: var(--ink-3); }
.done-sum-amt-val {
  margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.8px; color: var(--green);
}
.done-sum-consult {
  margin: 0; font-size: 14.5px; font-weight: 700; color: var(--gold); line-height: 1.5;
}
.done-sum-rows { margin: 0; }
.done-sum-rows > div {
  display: flex; gap: 10px; padding: 9px 0;
  border-bottom: 1px solid var(--line); font-size: 13px;
}
.done-sum-rows > div:last-child { border-bottom: none; }
.done-sum-rows dt { flex: none; width: 104px; color: var(--ink-3); }
.done-sum-rows dd { margin: 0; flex: 1; color: var(--ink); font-weight: 600; line-height: 1.6; }
.done-sum-note {
  margin: 12px 0 0; font-size: 12px; line-height: 1.65; color: var(--ink-3);
}

@media (min-width: 760px) {
  .amtchg-now-amt { font-size: 30px; }
  .amtchg-dl dt { width: 120px; }
  .amtchg-actions {
    grid-template-columns: 1fr 1fr;
    align-items: center;
  }
  .ad-brief { padding: 20px; }
  .ad-brief-top { grid-template-columns: 1fr auto; align-items: center; }
  .ad-brief-amt { min-width: 240px; text-align: right; }
  .ad-brief-dl {
    display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px;
  }
  .ad-brief-dl > div.is-wide { grid-column: 1 / -1; }
  .done-sum-rows { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
}

@media (hover: hover) {
  .amtchg-form .btn:hover { opacity: .92; }
}

/* ═══════════════════════════════════════════════════════════
   Phase S-1A — 설문 · 사후관리
   ───────────────────────────────────────────────────────────
   구성
     A. 고객 응답 화면 (.sp-*)  — 390px 우선, 현장 QR 스캔 상황
     B. 관리자 설문 화면 (.sv-*) — 목록 / 빌더 / 상세 / 통계
     C. 사후관리 패널 (.ac-*)
   원칙
     · 터치 대상은 최소 44px 높이를 확보합니다 (한 손 조작 · 장갑 착용 고려).
     · 색만으로 상태를 전달하지 않습니다 (테두리 두께 · 굵기를 함께 씁니다).
     · 외부 폰트/아이콘에 의존하지 않습니다.
   ═══════════════════════════════════════════════════════════ */

/* ───────────────────────────────────────────────────────────
   A. 고객 응답 화면
   ─────────────────────────────────────────────────────────── */

/* 설문 화면은 프로토타입 배너가 없으므로 전역 body 여백을 되돌립니다. */
body.sp-body {
  padding-top: 0;
  background: var(--ivory);
  /* 노치 단말 좌우 안전영역 */
  padding-left: env(safe-area-inset-left, 0);
  padding-right: env(safe-area-inset-right, 0);
}

.sp-head {
  display: flex;
  align-items: center;
  height: 52px;
  padding: 0 18px;
  background: var(--green);
  color: #fff;
}
.sp-brand {
  font-size: 14px;
  font-weight: 800;
  letter-spacing: -.3px;
}

.sp-main {
  max-width: var(--maxw);
  margin: 0 auto;
  padding: 22px 16px 40px;
}

.sp-title {
  margin: 0 0 10px;
  font-size: 21px;
  font-weight: 800;
  line-height: 1.35;
  letter-spacing: -.7px;
  color: var(--ink);
}
.sp-intro {
  margin: 0 0 14px;
  font-size: 14px;
  line-height: 1.7;
  color: var(--ink-2);
}

/* 익명 안내 — 응답 전에 반드시 읽히도록 본문보다 강한 블록으로 둡니다. */
.sp-anon {
  margin: 0 0 18px;
  padding: 12px 13px;
  border: 1px solid #cfdcd5;
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  background: #eef5f1;
  font-size: 12.5px;
  line-height: 1.7;
  color: var(--green);
  font-weight: 600;
}

.sp-errs {
  margin: 0 0 18px;
  padding: 12px 14px 12px 30px;
  border: 1px solid #e7c4bf;
  border-radius: var(--radius-sm);
  background: #fdf3f2;
  color: #9c3a2e;
  font-size: 13px;
  line-height: 1.7;
  font-weight: 600;
}
.sp-errs li + li { margin-top: 4px; }

.sp-form { margin: 0; }

/* ── 질문 카드 ────────────────────────────────
   카드 사이 간격을 넉넉히 둬 스크롤 중 문항 경계를 놓치지 않게 합니다. */
.sp-q {
  margin: 0 0 16px;
  padding: 15px 14px 16px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  box-shadow: var(--shadow);
  /* fieldset 기본 min-width 때문에 좁은 화면에서 넘치는 문제 방지 */
  min-width: 0;
}
/* 응답한 문항은 좌측 띠로 표시 (survey.js 가 토글) */
.sp-q.is-answered {
  border-color: #cfdcd5;
  box-shadow: inset 3px 0 0 var(--green), var(--shadow);
}

.sp-q-legend {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  padding: 0;
  margin-bottom: 13px;
  width: 100%;
}
.sp-q-no {
  flex: none;
  width: 21px;
  height: 21px;
  border-radius: 50%;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--green);
  color: #fff;
  font-size: 12px;
  font-weight: 800;
  line-height: 1;
  font-variant-numeric: tabular-nums;
  transform: translateY(3px);
}
.sp-q-title {
  flex: 1;
  min-width: 0;
  font-size: 15.5px;
  font-weight: 700;
  line-height: 1.5;
  letter-spacing: -.4px;
  color: var(--ink);
}
.sp-q-req,
.sp-q-opt {
  flex: none;
  padding: 2px 7px;
  border-radius: 999px;
  font-size: 10.5px;
  font-weight: 800;
  line-height: 1.5;
  letter-spacing: -.2px;
}
.sp-q-req { background: #fdf3f2; color: #9c3a2e; border: 1px solid #e7c4bf; }
.sp-q-opt { background: var(--ivory-2); color: var(--ink-3); border: 1px solid var(--line); }

/* ── 5점 척도 ────────────────────────────────
   390px 에서 5칸이 모두 한 줄에 들어가면서 각 칸이 최소 44px 이상이 되도록
   grid 로 균등 분할합니다. (390 - 32(main) - 28(card) = 330 → 칸당 약 60px) */
.sp-rate {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 7px;
}
.sp-rate-item {
  display: block;
  margin: 0;
  cursor: pointer;
}
/* 라디오 자체는 접근성을 위해 남기고 시각적으로만 숨깁니다. */
.sp-rate-item input {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}
.sp-rate-box {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  font-size: 17px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  color: var(--ink-2);
  transition: background .12s var(--ease), border-color .12s var(--ease);
}
.sp-rate-item input:checked + .sp-rate-box {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
  font-weight: 800;
}
.sp-rate-item input:focus-visible + .sp-rate-box {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
}
.sp-rate-ends {
  display: flex;
  justify-content: space-between;
  margin-top: 7px;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ── 단일 / 복수 선택 ─────────────────────────
   라벨 전체가 터치 대상입니다 (텍스트만 누르는 실수를 없앱니다). */
.sp-opts { display: flex; flex-direction: column; gap: 8px; }
.sp-opt {
  display: flex;
  align-items: center;
  gap: 11px;
  min-height: 50px;
  padding: 11px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  cursor: pointer;
}
.sp-opt input {
  flex: none;
  width: 21px;
  height: 21px;
  margin: 0;
  accent-color: var(--green);
}
.sp-opt-label {
  flex: 1;
  min-width: 0;
  font-size: 14.5px;
  line-height: 1.5;
  color: var(--ink);
}
.sp-opt:has(input:checked) {
  border-color: var(--green);
  background: #eef5f1;
}
.sp-opt:has(input:checked) .sp-opt-label { font-weight: 700; color: var(--green); }
.sp-opt:has(input:focus-visible) { outline: 2px solid var(--gold); outline-offset: 2px; }

.sp-hint {
  margin: 8px 0 0;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
}

/* ── 자유 입력 ───────────────────────────────
   모바일 브라우저의 자동 확대를 막기 위해 16px 이상을 유지합니다. */
.sp-textarea {
  display: block;
  width: 100%;
  min-height: 108px;
  padding: 12px 13px;
  border: 1.5px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  font-family: inherit;
  font-size: 16px;
  line-height: 1.7;
  color: var(--ink);
  resize: vertical;
}
.sp-textarea:focus {
  outline: none;
  border-color: var(--green);
  background: var(--white);
}
.sp-textarea::placeholder { color: #b6bcc2; }

/* survey.js 가 만들어 붙이는 글자수 표시 */
.sp-count {
  margin: 6px 0 0;
  text-align: right;
  font-size: 11.5px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
}
.sp-count.is-full { color: #9c3a2e; font-weight: 700; }

/* 스크린리더 전용 라벨 */
.sp-sr {
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
  border: 0;
}

/* 봇 차단용 honeypot — 사람에게는 어떤 경우에도 보이지 않아야 합니다.
   display:none 은 일부 봇이 걸러내므로 화면 밖으로 밀어냅니다. */
.sp-hp {
  position: absolute;
  left: -9999px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}

/* ── 제출 ────────────────────────────────── */
.sp-submit {
  display: block;
  width: 100%;
  min-height: 54px;
  margin-top: 20px;
  padding: 15px 18px;
  border: none;
  border-radius: var(--radius);
  background: var(--green);
  color: #fff;
  font-size: 16.5px;
  font-weight: 800;
  letter-spacing: -.3px;
  box-shadow: var(--shadow-lg);
}
.sp-submit[disabled],
.sp-submit[aria-busy="true"] { opacity: .6; cursor: progress; }

.sp-note {
  margin: 12px 0 0;
  font-size: 12px;
  line-height: 1.7;
  color: var(--ink-3);
  text-align: center;
}

.sp-foot {
  padding: 18px 16px 26px;
  text-align: center;
  font-size: 11.5px;
  color: var(--ink-3);
}

/* ── 완료 화면 ───────────────────────────── */
.sp-done { text-align: center; padding-top: 44px; }
.sp-done-mark { color: var(--green); display: flex; justify-content: center; margin-bottom: 16px; }
.sp-done .sp-title { font-size: 22px; }
.sp-done-sub {
  margin: 4px 0 16px;
  font-size: 14px;
  font-weight: 600;
  color: var(--ink-2);
}
.sp-done .sp-anon { text-align: left; }

/* ── 안내(오류/마감) 화면 ─────────────────── */
.sp-notice { text-align: center; padding-top: 48px; }
.sp-notice .sp-note { margin-top: 12px; text-align: left; font-size: 13.5px; }

/* ── 768px (태블릿 · 현장 게시용 큰 화면) ─────
   폭만 넓히고 터치영역은 줄이지 않습니다. */
@media (min-width: 768px) {
  body.sp-body { background: #e9e7e1; }
  .sp-head { justify-content: center; height: 60px; }
  .sp-main {
    max-width: 620px;
    margin: 24px auto;
    padding: 30px 28px 40px;
    background: var(--ivory);
    border-radius: var(--radius);
    box-shadow: 0 0 50px rgba(0, 0, 0, .09);
  }
  .sp-title { font-size: 25px; }
  .sp-q { padding: 19px 18px 20px; }
  .sp-rate { gap: 10px; }
  .sp-rate-box { min-height: 60px; font-size: 19px; }
  .sp-opt { min-height: 54px; }
  .sp-submit { min-height: 58px; font-size: 17.5px; }
  .sp-foot { padding-bottom: 34px; }
}

/* ───────────────────────────────────────────────────────────
   B. 관리자 설문 화면
   ─────────────────────────────────────────────────────────── */

/* 상태 칩 — draft/open/closed 를 색 + 테두리로 구분합니다. */
.sv-chip {
  display: inline-block;
  padding: 2px 9px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--ivory-2);
  color: var(--ink-2);
  font-size: 11px;
  font-weight: 800;
  line-height: 1.7;
  letter-spacing: -.2px;
  white-space: nowrap;
}
.sv-chip-draft  { background: var(--ivory-2); color: var(--ink-3); border-color: var(--line); }
.sv-chip-open   { background: #eef5f1; color: var(--green); border-color: #cfdcd5; }
.sv-chip-closed { background: #fffdf7; color: #8a6415; border-color: #e8dcc2; }
.sv-chip-state-none    { background: var(--ivory-2); color: var(--ink-3); }
.sv-chip-state-created { background: var(--ivory-2); color: var(--ink-2); border-color: #dcdfe1; }
.sv-chip-state-open    { background: #eef5f1; color: var(--green); border-color: #cfdcd5; }
.sv-chip-state-closed  { background: #fffdf7; color: #8a6415; border-color: #e8dcc2; }

/* 익명 고지 — 관리자 화면에도 항상 노출합니다. */
.sv-anon-note {
  margin: 0 0 14px;
  padding: 10px 12px;
  border: 1px solid #cfdcd5;
  border-left: 3px solid var(--green);
  border-radius: var(--radius-sm);
  background: #eef5f1;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--green);
}
.sv-anon-note strong { font-weight: 800; }

/* ── 목록 표 ─────────────────────────────── */
.sv-table {
  width: 100%;
  margin: 0 0 6px;
  border-collapse: collapse;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  overflow: hidden;
  background: var(--white);
  font-size: 12.5px;
}
.sv-table th,
.sv-table td {
  padding: 9px 8px;
  text-align: left;
  border-bottom: 1px solid var(--line);
  vertical-align: middle;
}
.sv-table th {
  background: var(--ivory-2);
  font-size: 11px;
  font-weight: 800;
  color: var(--ink-3);
  letter-spacing: -.2px;
  white-space: nowrap;
}
.sv-table tr:last-child td { border-bottom: none; }
.sv-td-code { font-weight: 700; white-space: nowrap; font-variant-numeric: tabular-nums; }
.sv-td-num  { text-align: right; font-variant-numeric: tabular-nums; font-weight: 700; }
.sv-td-at   { color: var(--ink-3); font-size: 11px; white-space: nowrap; }
.sv-table .ad-btn { padding: 6px 10px; font-size: 11.5px; white-space: nowrap; }

/* 좁은 화면에서는 가로 스크롤을 허용합니다 (열을 숨기면 정보가 사라집니다). */
@media (max-width: 519px) {
  .sv-table { display: block; overflow-x: auto; white-space: nowrap; }
}

/* ★ 기본 템플릿 만들기 — 버튼과 설명문이 인라인으로 흘러 겹쳐 보이던 문제를 정리합니다.
     390px 에서는 세로로 쌓고, 넓은 화면에서는 버튼 오른쪽에 설명을 둡니다.
     (마크업 변경 없이 레이아웃만 조정) */
.sv-tpl-form {
  margin-top: 14px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
}
.sv-tpl-form > #btn-tpl-default { flex: 0 0 auto; }
.sv-tpl-form > .ad-btn-note {
  display: block;
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--ink-3);
}
@media (min-width: 768px) {
  .sv-tpl-form { flex-direction: row; align-items: center; gap: 12px; }
  .sv-tpl-form > .ad-btn-note { flex: 1 1 auto; min-width: 0; }
}

/* ── 빌더 ────────────────────────────────── */
.sv-form { margin-top: 4px; }
.sv-errs {
  margin: 0 0 14px;
  padding: 11px 13px 11px 28px;
  border: 1px solid #e7c4bf;
  border-radius: var(--radius-sm);
  background: #fdf3f2;
  color: #9c3a2e;
  font-size: 12.5px;
  line-height: 1.7;
  font-weight: 600;
}
.sv-slots { display: flex; flex-direction: column; gap: 12px; margin-bottom: 18px; }
.sv-slot {
  margin: 0;
  padding: 13px 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
  min-width: 0;
}
.sv-slot legend {
  padding: 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: -.2px;
  color: var(--ink-3);
}
.sv-req-label {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 40px;
  margin: 2px 0 10px;
  font-size: 13px;
  font-weight: 600;
  color: var(--ink);
  cursor: pointer;
}
.sv-req-label input { width: 18px; height: 18px; margin: 0; accent-color: var(--green); }

.sv-choices {
  padding: 11px 12px 12px;
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  border: 1px solid var(--line);
}
.sv-choices-cap {
  margin: 0 0 8px;
  font-size: 11.5px;
  line-height: 1.6;
  color: var(--ink-3);
}
.sv-choice-input {
  display: block;
  width: 100%;
  margin-bottom: 6px;
  padding: 9px 11px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--white);
  font-family: inherit;
  font-size: 13px;
  color: var(--ink);
}
.sv-choice-input:last-child { margin-bottom: 0; }
.sv-choice-input:focus { outline: none; border-color: var(--green); }
.sv-choice-input:disabled { background: var(--ivory-2); color: var(--ink-3); }

/* ── 상세 ────────────────────────────────── */
.sv-detail-head {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  margin-bottom: 4px;
}
.sv-detail-head .ad-h2 { margin: 0; }
.sv-stage { margin: 6px 0 18px; }

/* QR + 공개 링크 */
.sv-share {
  display: flex;
  flex-direction: column;
  gap: 14px;
  margin: 14px 0;
  padding: 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.sv-qr { text-align: center; }
/* 서버가 만든 SVG — 여백 없이 흰 배경 위에서 스캔되도록 크기를 고정합니다. */
.sv-qr svg,
.sv-qr .qr-svg {
  display: block;
  width: 200px;
  height: 200px;
  margin: 0 auto;
  image-rendering: pixelated;
  shape-rendering: crispEdges;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: 8px;
  padding: 8px;
}
.sv-qr-cap {
  margin: 9px 0 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-3);
}
.sv-link-cap {
  margin: 0 0 6px;
  font-size: 11.5px;
  font-weight: 800;
  letter-spacing: .4px;
  color: var(--ink-3);
}
.sv-link-input {
  display: block;
  width: 100%;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  font-family: inherit;
  font-size: 12.5px;
  color: var(--ink);
}
.sv-link-note {
  margin: 7px 0 0;
  font-size: 11.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

/* 질문 구성 목록 */
.sv-qs { margin: 0; padding: 10px 13px 13px 30px; }
.sv-q { margin-bottom: 9px; font-size: 13px; line-height: 1.6; }
.sv-q:last-child { margin-bottom: 0; }
.sv-q-type {
  display: inline-block;
  margin-right: 6px;
  padding: 1px 7px;
  border-radius: 999px;
  border: 1px solid var(--line);
  background: var(--white);
  font-size: 10.5px;
  font-weight: 800;
  color: var(--ink-3);
}
.sv-q-title { font-weight: 700; color: var(--ink); }
.sv-q-req {
  display: inline-block;
  margin-left: 5px;
  padding: 1px 6px;
  border-radius: 999px;
  border: 1px solid #e7c4bf;
  background: #fdf3f2;
  font-size: 10px;
  font-weight: 800;
  color: #9c3a2e;
}
.sv-q-choices {
  margin: 5px 0 0;
  padding-left: 17px;
  font-size: 12px;
  color: var(--ink-2);
}
.sv-q-choices li { margin-bottom: 2px; }

/* ── 통계 ────────────────────────────────── */
.sv-total {
  display: flex;
  align-items: baseline;
  flex-wrap: wrap;
  gap: 6px;
  margin: 4px 0 14px;
  padding: 13px 14px;
  border: 1px solid var(--line);
  border-radius: var(--radius);
  background: var(--white);
}
.sv-total-num {
  font-size: 27px;
  font-weight: 800;
  letter-spacing: -1px;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}
.sv-total-cap { font-size: 13px; font-weight: 700; color: var(--ink-2); }
.sv-total .ad-btn { margin-left: auto; }

.sv-stat-q { background: var(--white); }
.sv-rating { padding: 11px 13px 4px; }
.sv-avg { margin: 0 0 9px; font-size: 13px; color: var(--ink-2); }
.sv-avg strong {
  font-size: 19px;
  font-weight: 800;
  color: var(--green);
  font-variant-numeric: tabular-nums;
}

/* 가로 막대 — 라벨 / 막대 / 수치 3열 고정 */
.sv-bars { list-style: none; margin: 0; padding: 11px 13px 13px; }
.sv-rating .sv-bars { padding: 0 0 9px; }
.sv-bar-row {
  display: grid;
  grid-template-columns: 78px 1fr 74px;
  align-items: center;
  gap: 8px;
  margin-bottom: 7px;
}
.sv-bar-row:last-child { margin-bottom: 0; }
.sv-bar-label {
  font-size: 11.5px;
  line-height: 1.4;
  color: var(--ink-2);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.sv-bar-track {
  display: block;
  height: 14px;
  border-radius: 999px;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  overflow: hidden;
}
.sv-bar-fill {
  display: block;
  height: 100%;
  min-width: 0;
  border-radius: 999px;
  background: var(--green);
}
.sv-bar-num {
  text-align: right;
  font-size: 11px;
  font-variant-numeric: tabular-nums;
  color: var(--ink-3);
  font-weight: 700;
  white-space: nowrap;
}

/* 자유 의견 — 개별 응답이므로 카드로 분리해 읽습니다. */
.sv-texts { list-style: none; margin: 0; padding: 11px 13px 13px; }
.sv-text {
  margin-bottom: 7px;
  padding: 10px 12px;
  border: 1px solid var(--line);
  border-left: 3px solid var(--gold-soft);
  border-radius: var(--radius-sm);
  background: var(--ivory-2);
  font-size: 13px;
  line-height: 1.7;
  color: var(--ink);
  word-break: break-word;
}
.sv-text:last-child { margin-bottom: 0; }

/* ───────────────────────────────────────────────────────────
   C. 사후관리 패널 (신청 상세 ⑦)
   ─────────────────────────────────────────────────────────── */
.ad-grp-aftercare { background: var(--white); }
.ad-grp-aftercare .ad-dl { padding: 3px 13px; }
.ad-grp-aftercare .ad-dl-row { padding: 8px 0; font-size: 13px; }
.ad-grp-aftercare .ad-dl-row dt { width: 104px; }
.ad-grp-aftercare .ad-btns { padding: 4px 13px 0; }
.ad-grp-aftercare .ad-btn-note { padding: 0 13px 13px; margin: 10px 0 0; }
.ac-cnt { font-size: 12px; font-weight: 600; color: var(--ink-2); }
.ac-inline-form { display: inline-block; margin: 0; }

/* ── 관리자 화면 768px 이상 ───────────────── */
@media (min-width: 768px) {
  .sv-share { flex-direction: row; align-items: flex-start; }
  .sv-qr { flex: none; width: 216px; }
  .sv-link { flex: 1; min-width: 0; }
  .sv-slots { display: grid; grid-template-columns: 1fr 1fr; }
  .sv-bar-row { grid-template-columns: 120px 1fr 88px; }
  .ad-grp-aftercare .ad-dl { display: grid; grid-template-columns: 1fr 1fr; column-gap: 22px; }
}

@media (hover: hover) {
  .sp-opt:hover { border-color: #cfdcd5; }
  .sp-rate-item:hover .sp-rate-box { border-color: #cfdcd5; }
  .sv-table tbody tr:hover { background: var(--ivory-2); }
}

/* 애니메이션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  .sp-rate-box { transition: none; }
}

/* ═══════════════════════════════════════════════════════════════
   Phase S-1B — 접수알림 발송상태 (관리자 상세 ⑧ 그룹)
   ───────────────────────────────────────────────────────────────
   ★ 추가만 합니다. 기존 선택자를 수정하지 않습니다.
   ★ 색은 :root 디자인 토큰과 기존 sv-chip 팔레트를 그대로 씁니다.
   ═══════════════════════════════════════════════════════════════ */

/* 발송상태 칩 — .sv-chip 기본형을 상속하고 색만 덮습니다. */
.nt-chip-none    { background: var(--ivory-2); color: var(--ink-3); border-color: var(--line); }
.nt-chip-pending { background: #fffdf7; color: #8a6415; border-color: #e8dcc2; }
.nt-chip-sent    { background: #eef5f1; color: var(--green); border-color: #cfdcd5; }
.nt-chip-failed  { background: #fdf2f2; color: #9b2c2c; border-color: #f0d4d4; }

/* 시도 횟수 등 보조 텍스트 */
.nt-meta {
  margin-left: 6px;
  font-size: 11px;
  color: var(--ink-3);
  font-weight: 600;
}

/* 마스킹·분리 처리 고지 */
.nt-note {
  margin: 10px 0 0;
  font-size: 11.5px;
  line-height: 1.7;
  color: var(--ink-3);
}
.nt-note strong { color: var(--ink-2); font-weight: 700; }

/* 재발송 버튼 — 파괴적 동작이 아니므로 보조 버튼 톤을 유지합니다. */
.nt-inline-form { display: inline-block; margin: 0; }
.nt-resend { font-size: 13px; }

/* ═══════════════════════════════════════════════════════════════
   ★★ Phase U-1 2차 — 목적을 「첫 질문」으로 (대표 승인 §1·§4)
   ─────────────────────────────────────────────────────────────
   기존 .form-legend 는 12px 골드 대문자 라벨이라 '섹션 머리표' 역할이고,
   질문으로 읽히지 않았습니다. purposeFirst 상품(병원 스페셜데이 /
   환자 스페셜 특식)에서는 이 블록이 신청화면의 첫 질문이므로
   본문 크기의 문장으로 세웁니다.

   ★ 새 컴포넌트를 만든 것이 아니라, 이미 있는 .chips / .chip 위에
     제목·보조설명 2줄을 얹는 최소 스타일입니다.
   ★ chef-special / food-therapy 에는 이 클래스가 렌더되지 않으므로
     기존 화면은 1픽셀도 바뀌지 않습니다.
   ═══════════════════════════════════════════════════════════════ */
.purpose-lead { margin: 10px 0 12px; }
.purpose-lead-title {
  margin: 0;
  font-size: 17px;
  font-weight: 800;
  line-height: 1.45;
  letter-spacing: -.2px;
  color: var(--ink);
}
.purpose-lead-hint {
  margin: 6px 0 0;
  font-size: 12.5px;
  line-height: 1.65;
  color: var(--ink-3);
}

/* 첫 질문이므로 칩을 조금 더 크게 — 손가락 타겟(모바일 44px 권장) 확보 */
.purpose-lead + .chips .chip {
  font-size: 13.5px;
  padding: 11px 16px;
}

/* ═══ ★★ Phase U-1 2차 ①-c — 사후관리 접기 (승인 §4 간편화) ══════
   「행사 후 관리」(설문 / 결과보고서 / 응답 부스트)는 신청 단계의
   핵심 판단이 아니라 부가 희망사항입니다. 간편형 상품에서는 이 3줄이
   화면 중간에 펼쳐져 있어 「간단히 신청」 이라는 상품 성격을 흐렸습니다.
   ★ 항목을 삭제하지 않습니다 — 접어서 흐름에서 분리만 합니다.
     (체크박스 input 은 details 안에 그대로 살아 있어 전송값 동일)
   ★ .disclosure 와 톤을 맞춰 신규 시각언어를 만들지 않습니다.
   ═══════════════════════════════════════════════════════════════ */
.after-fold {
  border: 1px solid var(--line);
  border-radius: var(--radius-sm);
  background: var(--ivory);
  padding: 0 13px;
  margin: 4px 0 14px;
}
.after-fold > summary {
  display: flex; align-items: center; gap: 7px;
  padding: 13px 0;
  font-size: 13.5px; font-weight: 700;
  color: var(--green);
  cursor: pointer; list-style: none;
}
.after-fold > summary::-webkit-details-marker { display: none; }
.after-fold > summary svg { transition: transform .2s var(--ease); flex: none; }
.after-fold[open] > summary svg { transform: rotate(90deg); }
.after-fold-opt {
  margin-left: auto;
  font-size: 11.5px; font-weight: 600;
  color: var(--ink-3);
}
.after-fold-body { padding: 0 0 6px; }

/* ═══ ★★ Phase U-1 2차 ③ — 혼합형 견적박스 금액 구성 위계 ═══════
   대표 지시:
     ① 기본 진행비  ② 지역 추가비  ③ 확정 선택옵션
     ───────────────────────────────────
     = 현재 예상 운영금액
     그리고 별도로 「상담 후 안내 항목」

   ★ 견적 이해도 25점의 원인은 「금액이 하나의 덩어리로만 보인다」 였습니다.
     구성 항목을 줄 단위로 나누고, 합계 줄 위에 실선을 두어
     「= 」 관계를 시각적으로 만듭니다.
   ★ 금액 문자열은 전부 서버가 만든 완성 문자열입니다.
     브라우저는 textContent 로 넣기만 합니다 (계산식 복제 0건).
   ★ 상담형 항목은 이 표에 들어오지 않습니다 —
     0원·무료로 표시하지 않고 별도 「상담 후 안내」 블록으로 갑니다 (§4).
   ★ .quote-detail 은 흰 배경이므로 본문 잉크색을 씁니다.
   ═══════════════════════════════════════════════════════════════ */
.quote-breakdown { margin: 0 0 9px; }
.quote-breakdown[hidden] { display: none; }
.qb-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3px 0; font-size: 12.5px;
}
.qb-k {
  flex: 1 1 auto; min-width: 0;
  line-height: 1.5; color: var(--ink-3);
  overflow-wrap: anywhere;
}
.qb-v {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-weight: 600; color: var(--ink);
  font-variant-numeric: tabular-nums;
}
/* 합계 줄 — 위에 실선을 두어 「= 」 관계를 시각적으로 만듭니다 */
.qb-sum {
  display: flex; align-items: baseline; gap: 10px;
  margin-top: 7px; padding-top: 8px;
  border-top: 1px solid var(--line);
  font-size: 13px;
}
.qb-sum .qb-k { font-weight: 700; color: var(--ink-2); }
.qb-sum .qb-v { font-size: 15px; font-weight: 800; color: var(--green); }

/* 「상담 후 안내 항목」 라벨 — 항목 이름 앞에 붙어 성격을 밝힙니다 (§4).
   ★ 0원·무료 표현을 쓰지 않고 '상담으로 안내되는 항목' 임을 라벨로만 알립니다. */
.quote-partial-label {
  display: inline-block;
  margin-right: 5px;
  padding: 1px 6px;
  border-radius: 100px;
  background: var(--ivory-2);
  border: 1px solid var(--line);
  font-size: 10.5px; font-weight: 700;
  color: var(--gold);
  vertical-align: 1px;
}
.quote-partial-label[hidden] { display: none; }

/* ★★ Phase U-1 2차 A3 — 상세보기 안의 「상담 후 안내 항목」 목록.
   접힘에서는 건수만 보이고, 여기서 실제 항목 이름을 확인합니다.
   ★ 금액 칸이 없습니다 — 우측은 '상담 후 안내' 상태 문자열뿐이며
     0원·+0원·무료 라는 표기를 만들지 않습니다 (§4 · 3상태 원칙 유지). */
.quote-undecided {
  margin: 0 0 9px; padding: 8px 10px;
  border: 1px solid var(--line); border-left: 3px solid var(--gold);
  border-radius: var(--radius-sm); background: #fffaf0;
}
.quote-undecided[hidden] { display: none; }
.qu-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 3px 0; font-size: 12.5px;
}
.qu-k {
  flex: 1 1 auto; min-width: 0;
  line-height: 1.5; color: var(--ink-2); font-weight: 600;
  overflow-wrap: anywhere;
}
.qu-v {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-size: 11px; font-weight: 700; color: var(--gold);
  white-space: nowrap;
}

/* ══ ★★ Phase U-2 §12 — 관리자 예상견적 구성내역 ══════════════
   ★ 상담형 항목은 금액 줄에 넣지 않으므로 「0원」 이 렌더될 CSS 경로가
     없습니다. 목록(.ad-quote-ul)으로만 표시됩니다. */
.ad-quote {
  margin: 14px 0 0; padding: 14px 16px 12px;
  background: var(--white);
  border: 1px solid var(--line); border-radius: var(--radius);
}
.ad-quote-title {
  margin: 0 0 10px; font-size: 13.5px; font-weight: 800; color: var(--ink-1);
}
.ad-quote-sub { font-weight: 600; font-size: 11.5px; color: var(--ink-3); }
.ad-quote-lines { margin: 0; padding: 0; list-style: none; }
.ad-quote-line {
  display: flex; align-items: baseline; gap: 10px;
  padding: 7px 0; border-bottom: 1px dashed var(--line);
  font-size: 13px;
}
.ad-quote-label { flex: 1 1 auto; color: var(--ink-2); }
.ad-quote-amt {
  flex: 0 0 auto; margin-left: auto; text-align: right;
  font-weight: 800; color: var(--ink-1); white-space: nowrap;
}
.ad-quote-total {
  display: flex; align-items: baseline; gap: 10px;
  margin: 10px 0 0; padding: 10px 0 0;
  border-top: 2px solid var(--ink-1); font-size: 14px;
}
.ad-quote-total .ad-quote-label { font-weight: 800; color: var(--ink-1); }
.ad-quote-total .ad-quote-amt { font-size: 16px; color: var(--green); }
.ad-quote-consult {
  margin: 0; padding: 10px 12px; font-size: 12.5px; line-height: 1.6;
  color: var(--ink-2); background: var(--bg-2); border-radius: 8px;
}
.ad-quote-block { margin: 12px 0 0; }
.ad-quote-block-title {
  margin: 0 0 5px; font-size: 12px; font-weight: 800; color: var(--gold);
}
.ad-quote-ul {
  margin: 0; padding-left: 17px; font-size: 12.5px; line-height: 1.7;
  color: var(--ink-2);
}
.ad-quote-basis {
  margin: 12px 0 0; font-size: 11px; color: var(--ink-3); line-height: 1.5;
}

/* ══ ★★ Phase U-2 §11 — 이메일 미리보기 화면 ══════════════════ */
.mp-pre {
  margin: 0 0 18px; padding: 14px 16px;
  background: var(--bg-2); border: 1px solid var(--line); border-radius: 8px;
  font-size: 12px; line-height: 1.7;
  white-space: pre-wrap; word-break: break-all;
  color: var(--ink-2); overflow-x: auto;
}
/* 미리보기 링크도 44px 터치영역을 지킵니다 (U-1 보호조건) */
.nt-preview, .mp-tab {
  min-height: 44px; display: inline-flex; align-items: center;
}

/* ══ ★★★ Phase U-3 §2~§6 — 관리자 최종견적 (예상견적과 시각 분리) ══
   ★ 위 .ad-quote(예상견적 Snapshot)와 색·테두리를 다르게 두어
     관리자가 두 값을 혼동하지 않게 합니다.
     · 예상견적 = 흰 배경 + 회색 테두리 (신청 당시 · 불변)
     · 최종견적 = 강조 좌측선 (상담 후 확정 · 관리자 입력)
   ★ 새 색 토큰을 만들지 않고 기존 변수만 씁니다. */
.ad-fq {
  margin: 14px 0 0; padding: 14px 16px 12px;
  background: var(--white);
  border: 1px solid var(--line); border-left: 3px solid var(--green);
  border-radius: var(--radius);
}
.ad-fq-title {
  margin: 0 0 10px; font-size: 13.5px; font-weight: 800; color: var(--ink-1);
}
.ad-fq-sub { font-weight: 600; font-size: 11.5px; color: var(--ink-3); }

.ad-fq-cur {
  margin: 0 0 10px; padding: 10px 12px;
  background: var(--bg-2); border-radius: 8px;
}
.ad-fq-amt-row {
  display: flex; align-items: baseline; gap: 10px; margin: 0;
}
.ad-fq-amt-label { font-size: 12.5px; font-weight: 700; color: var(--ink-2); }
.ad-fq-amt {
  margin-left: auto; text-align: right;
  font-size: 17px; font-weight: 800; color: var(--green); white-space: nowrap;
}
.ad-fq-meta { margin: 6px 0 0; font-size: 11px; color: var(--ink-3); }
.ad-fq-memo {
  margin: 7px 0 0; font-size: 12.5px; line-height: 1.6; color: var(--ink-2);
  overflow-wrap: anywhere;
}
.ad-fq-empty {
  margin: 0 0 10px; padding: 10px 12px; font-size: 12.5px;
  color: var(--ink-3); background: var(--bg-2); border-radius: 8px;
}

/* 이전 revision — 과거 금액을 지우거나 흐리게 하지 않습니다 (확인용) */
.ad-fq-hist { margin: 0 0 12px; }
.ad-fq-hist-title {
  margin: 0 0 5px; font-size: 12px; font-weight: 800; color: var(--ink-3);
}
.ad-fq-hist-list { margin: 0; padding: 0; list-style: none; }
.ad-fq-hist-item {
  display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px;
  padding: 6px 0; border-bottom: 1px dashed var(--line); font-size: 12px;
}
.ad-fq-hist-rev { font-weight: 800; color: var(--ink-2); }
.ad-fq-hist-amt { font-weight: 700; color: var(--ink-1); white-space: nowrap; }
.ad-fq-hist-by { color: var(--ink-3); font-size: 11px; }
.ad-fq-hist-memo {
  flex: 1 1 100%; color: var(--ink-3); font-size: 11.5px;
  overflow-wrap: anywhere;
}

.ad-fq-form { margin: 0 0 10px; }
/* 입력창 44px 터치영역 유지 (U-1 보호조건) */
.ad-fq-form input[type="text"] { min-height: 44px; }
#ad-fq-submit { min-height: 44px; }

/* confirmed 연계 안내 (§6) — 전환을 막지 않는 '표시 전용' 배너 */
.ad-fq-confirm {
  margin: 0 0 12px; padding: 10px 12px;
  font-size: 12.5px; line-height: 1.6; border-radius: 8px;
}
.ad-fq-confirm.is-ok {
  color: var(--ink-2); background: var(--bg-2);
  border-left: 3px solid var(--green);
}
.ad-fq-confirm.is-warn {
  color: var(--ink-2); background: var(--bg-2);
  border-left: 3px solid var(--gold);
}
#ad-fq-confirm-amt { color: var(--green); font-weight: 800; }