/* 시안 A — 공용 컴포넌트 상태 CSS.
   base.css(고정층)·A.css(자유층) 변수만 쓴다. 새 hex 0.
   형식 근거: austest-pipeline-K01(사각·소라운드 버튼), austest-pipeline-C01·C02(강조색 1개=accent 틸),
              hasugu-namdaepyo-K02·D01(전화 단일채널 버튼, 반복 배치), deco-map-kr-K03·K04(버튼쌍·모바일 하단 고정바),
              safe-reset-kr-K01·D06(1px 테두리, focus-visible 아웃라인 2px 단일색) — 공용 원칙만 차용.
   금지(공통): X01 8px+ 라운드 카드·그림자 카드·알약 버튼 / X02 별점·통계칸·로고벽 / X05 그라데이션·유리효과 / X06 자동캐러셀·점 — 전부 미사용.
   톤가정: 헤더·네비·모바일메뉴·폼 = 밝은 면(기본 토큰). 푸터만 어두운 면(--color-primary 배경, .site-footer--dark).
   재작업 2026-10-31(D3 수정 루프, fix_orders.json 회차1 A7·A8·A9·A1 반영) — 아래 각 항목에 표시. */

:root {
  /* 새 hex 없이 기존 토큰만으로 만든 파생값 */
  --c-muted: var(--color-muted); /* fix_orders A1: A.css에 --color-muted 실값(#595959)이 생겨 이전 color-mix 폴백(#818181, 대비 미달) 제거 */
  --c-border: color-mix(in srgb, var(--color-text) 20%, var(--color-bg) 80%);
  --c-focus: var(--color-accent, var(--color-primary)); /* 밝은 면: 대비 낮은 primary 대신 강조색(accent) 사용 */
}

* { box-sizing: border-box; }
body { margin:0; font-family: var(--font-sans); background: var(--color-bg); color: var(--color-text); }

/* ===== 헤더 ===== */
.site-header {
  display:flex; align-items:center; justify-content:space-between;
  gap: var(--sp-16);
  min-height: 64px;
  padding: 0 var(--gutter-desktop);
  background: var(--color-bg);
  color: var(--color-text);
  border-bottom: 1px solid var(--c-border);
}
.site-header__logo {
  display:inline-flex; align-items:center; min-height: var(--touch-min);
  font-weight:700; font-size: var(--fs-18); color: var(--color-text); text-decoration:none;
  white-space: nowrap; flex-shrink: 0; /* fix_orders A7: 좁은 폭에서 글자가 세로로 쌓여 44 미만이 되는 것 방지 */
}
.site-header__logo:hover, .site-header__logo.is-hover { color: color-mix(in srgb, var(--color-text) 70%, var(--color-primary) 30%); }
.site-header__logo:focus-visible, .site-header__logo.is-focus { outline:2px solid var(--c-focus); outline-offset:2px; }
.site-header__logo:active, .site-header__logo.is-active { filter: brightness(0.9); }

/* ===== 네비 ===== */
.nav__list { display:flex; gap: var(--sp-24); list-style:none; margin:0; padding:0; }
.nav__link {
  display:inline-flex; align-items:center; min-height: var(--touch-min);
  color: var(--color-text); text-decoration:none; font-size: var(--fs-16);
}
.nav__link:hover, .nav__link.is-hover { color: color-mix(in srgb, var(--color-text) 40%, var(--color-accent) 60%); }
.nav__link:focus-visible, .nav__link.is-focus { outline:2px solid var(--c-focus); outline-offset:2px; }
.nav__link:active, .nav__link.is-active { filter: brightness(0.85); }

/* fix_orders A7·A8: 모바일 폭(A 자체 그리드 분기점 640px과 동일)에서는 가로 네비를 숨기고 토글만 남긴다.
   데스크톱(641px 이상)에서는 반대로 토글을 숨긴다 — 네비·토글 동시 노출 금지. */
@media (max-width: 640px) {
  .site-header .nav { display: none; }
}
@media (min-width: 641px) {
  .site-header .menu-toggle { display: none; }
}

/* ===== 모바일 메뉴 토글·패널 (근거: safe-reset-kr-D01 전역 직각 — 사각형 유지, X01 알약 금지) ===== */
.menu-toggle {
  width: var(--touch-min); height: var(--touch-min);
  min-width: var(--touch-min); min-height: var(--touch-min); flex-shrink: 0; /* fix_orders A7: 폭이 눌려 44 미만이 되지 않게 고정 */
  display:inline-flex; align-items:center; justify-content:center; flex-direction:column; gap:4px;
  background: var(--color-bg); border: 1px solid var(--c-border); border-radius: var(--radius-button);
  padding:0; cursor:pointer;
}
.menu-toggle:hover, .menu-toggle.is-hover { background: color-mix(in srgb, var(--color-text) 8%, var(--color-bg) 92%); }
.menu-toggle:focus-visible, .menu-toggle.is-focus { outline:2px solid var(--c-focus); outline-offset:2px; }
.menu-toggle:active, .menu-toggle.is-active { filter: brightness(0.92); }
.menu-toggle__bar { display:block; width:20px; height:2px; background: var(--color-text); }

.mobile-menu {
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-card);
  padding: var(--sp-16);
}
.mobile-menu[hidden] { display:none; }
.mobile-menu__list { list-style:none; margin:0; padding:0; }
.mobile-menu__link {
  display:flex; align-items:center; min-height:56px;
  color: var(--color-text); text-decoration:none; font-size: var(--fs-17);
  border-bottom: 1px solid var(--c-border);
}
.mobile-menu__link:hover, .mobile-menu__link.is-hover { color: color-mix(in srgb, var(--color-text) 40%, var(--color-accent) 60%); }
.mobile-menu__link:focus-visible, .mobile-menu__link.is-focus { outline:2px solid var(--c-focus); outline-offset:2px; }
.mobile-menu__link:active, .mobile-menu__link.is-active { filter: brightness(0.85); }

/* ===== 푸터 — 어두운 면 (근거: austest-pipeline-C01 네이비·흰 2색 교대) ===== */
.site-footer--dark {
  background: var(--color-primary); color: var(--color-bg);
  padding: var(--section-mobile) var(--gutter-desktop);
}
.footer__link {
  display:inline-flex; align-items:center; min-height: var(--touch-min);
  color: var(--color-bg); text-decoration:none;
}
.footer__link:hover, .footer__link.is-hover { color: color-mix(in srgb, var(--color-bg) 70%, var(--color-accent) 30%); }
.footer__link:focus-visible, .footer__link.is-focus { outline:2px solid var(--color-bg); outline-offset:2px; } /* 어두운 면 — 흰색(재사용 var(--color-bg)) */
.footer__link:active, .footer__link.is-active { filter: brightness(0.85); }

/* ===== 버튼 (근거: austest-pipeline-K01 사각 소라운드, hasugu-namdaepyo-K02 전화 단일채널 반복형) ===== */
.btn {
  display:inline-flex; align-items:center; justify-content:center;
  min-height: var(--touch-min); padding: 0 var(--sp-24);
  font-family: var(--font-sans); font-size: var(--fs-16); font-weight:600;
  border-radius: var(--radius-button); border:1px solid transparent; cursor:pointer;
  text-decoration:none;
}
.btn--primary {
  min-height: var(--btn-height);
  background: var(--color-accent); color: var(--color-bg); border-color: var(--color-accent);
}
.btn--primary:hover, .btn--primary.is-hover { filter: brightness(1.1); } /* 원본 ref 호버=더 밝은 틸(hex 새로 안 씀, filter만) */
.btn--primary:focus-visible, .btn--primary.is-focus { outline:2px solid var(--c-focus); outline-offset:2px; }
.btn--primary:active, .btn--primary.is-active { filter: brightness(0.88); }

.btn--secondary {
  background: transparent; color: var(--color-primary); border-color: var(--color-primary);
}
.btn--secondary:hover, .btn--secondary.is-hover { background: color-mix(in srgb, var(--color-primary) 12%, transparent); }
.btn--secondary:focus-visible, .btn--secondary.is-focus { outline:2px solid var(--c-focus); outline-offset:2px; }
.btn--secondary:active, .btn--secondary.is-active { background: color-mix(in srgb, var(--color-primary) 22%, transparent); }

.btn--text {
  background:transparent; border-color:transparent; color: var(--color-primary);
  text-decoration: underline; padding: 0; min-height: var(--touch-min);
}
.btn--text:hover, .btn--text.is-hover { filter: brightness(0.85); }
.btn--text:focus-visible, .btn--text.is-focus { outline:2px solid var(--c-focus); outline-offset:2px; }
.btn--text:active, .btn--text.is-active { filter: brightness(0.7); }

.btn:disabled, .btn.is-disabled {
  background: var(--color-bg-alt); color: var(--c-muted); border-color: var(--c-border);
  cursor:not-allowed; filter: grayscale(0.4);
}

/* fix_orders A9: 390에서 같은 .btn--primary 클래스 높이가 97px(2줄)·48px(1줄)로 섞이는 문제 완화 —
   먼저 좌우 패딩을 고정층 간격 한 단계(24px→16px) 낮춘다. 그래도 꺾이면 sample-copy의 CTA 길이 조정이 필요하다. */
@media (max-width: 640px) {
  .btn { padding: 0 var(--sp-16); }
}

/* ===== 모바일 하단 고정 상담 막대 (근거: deco-map-kr-K04 모바일 하단 고정바, hasugu-namdaepyo-D01 반복 전화 CTA.
   conversion.json 채널=["phone"] 전화 1개 → 넣음) ===== */
.sticky-call-bar {
  position: fixed; left:0; right:0; bottom:0;
  display:flex; align-items:center; justify-content:center;
  min-height: 56px; padding: var(--sp-8) var(--gutter-mobile);
  background: var(--color-primary);
  border-top: 1px solid var(--c-border);
}
.sticky-call-bar .btn--primary { width:100%; min-height: var(--btn-height); }

/* ===== 폼 (해부 행에 전용 항목 없음 — safe-reset-kr-D01 전역직각·K01 1px 테두리 원칙을 그대로 적용) ===== */
.form { display:flex; flex-direction:column; gap: var(--sp-16); max-width: var(--container-prose); }
.field { display:flex; flex-direction:column; gap: var(--sp-4); }
.field__label { font-size: var(--fs-14); color: var(--color-text); }
.field__control {
  min-height: var(--touch-min); padding: 0 var(--sp-12);
  font-family: var(--font-sans); font-size: var(--fs-16);
  background: var(--color-bg); color: var(--color-text);
  border: 1px solid var(--c-border); border-radius: var(--radius-button);
}
.field__control:hover, .field__control.is-hover { border-color: color-mix(in srgb, var(--color-text) 40%, var(--color-bg) 60%); }
.field__control:focus-visible, .field__control.is-focus { outline:2px solid var(--c-focus); outline-offset:1px; border-color: var(--color-primary); }
.field__control:active, .field__control.is-active { filter: brightness(0.97); }
.field__control:disabled, .field__control.is-disabled {
  background: var(--color-bg-alt); color: var(--c-muted); cursor:not-allowed; filter: grayscale(0.3);
}
.field--error .field__control { border-color: var(--color-warning); }
.field__error { font-size: var(--fs-13); color: var(--color-warning); }
.form__submit { align-self:flex-start; }