/**
 * Laravel 앱 ↔ V48 프로토타입 브릿지
 * - 레거시 레이아웃·Tailwind 충돌만 완화 (프로토타입 디자인 토큰은 harmony-v48.css 우선)
 */

html.has-harmony-v48,
body.has-harmony-v48 {
  font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, sans-serif;
  color: var(--ink-900);
  background: var(--bg);
  font-size: 18px;
  line-height: 1.7;
  letter-spacing: -0.02em;
}

body.has-harmony-v48 {
  padding-top: 0 !important;
  min-height: 100vh;
  min-height: 100dvh;
  display: flex;
  flex-direction: column;
}

/* layout.css #wrapper { overflow:hidden } — sticky 견적 패널이 스크롤을 따라가지 못함 */
body.has-harmony-v48.detail-page #wrapper {
  overflow: visible;
}

body.has-harmony-v48 #wrapper {
  flex: 1;
  display: flex;
  flex-direction: column;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
}

body.has-harmony-v48 #container {
  flex: 1;
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
  float: none;
}

/* 웹 접근성 스킵 링크 — 평소 숨김, Tab 포커스 시에만 표시 (layout.css 미로드 슬림 페이지 대응) */
#skipToContent a {
  position: absolute;
  top: 0;
  left: 0;
  z-index: 100000;
  width: 1px;
  height: 1px;
  margin: -1px;
  padding: 0;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
  font-size: 0;
  line-height: 0;
}

#skipToContent a:focus,
#skipToContent a:active {
  width: 200px;
  height: 50px;
  margin: 0;
  clip: auto;
  overflow: visible;
  background: #21272e;
  color: #fff;
  font-size: 14px;
  font-weight: 700;
  line-height: 50px;
  text-align: center;
  text-decoration: none;
}

/* proto-gnb → gnb 호환 */
header.proto-gnb,
header.gnb {
  background: transparent;
  border-bottom: 1px solid transparent;
  position: sticky;
  top: 0;
  z-index: 100;
  transition: background 0.3s, border-color 0.3s, box-shadow 0.2s;
}

body.has-harmony-v48.has-top-strip header.gnb,
body.has-harmony-v48.has-top-strip header.proto-gnb {
  top: var(--proto-top-strip-height, 36px);
}

header.proto-gnb.scrolled,
header.gnb.scrolled {
  background: var(--bg);
  border-bottom: 1px solid var(--ink-200);
  box-shadow: var(--shadow-gnb);
}

/* 레거시 doc/layout이 프로토타입 .container를 덮지 않도록 */
body.has-harmony-v48 .container {
  max-width: var(--container, 1200px);
}

body.has-harmony-v48 #page-main .hero,
body.has-harmony-v48 .catalog-scope .page {
  min-height: 0;
}

/* 상세·목록에서 레거시 퀵메뉴 숨김 */
body.has-harmony-v48.catalog-page #quick,
body.has-harmony-v48.catalog-page .floating-kakao,
body.has-harmony-v48.catalog-page .ops-fab-wrap,
body.has-harmony-v48.detail-page #quick,
body.has-harmony-v48.detail-page .floating-kakao,
body.has-harmony-v48.detail-page .ops-fab-wrap {
  display: none !important;
}

/* harmony-scope 보드: 래퍼 폭만 정리 (harmony-container 값은 harmony-v48.css 유지) */
#container > .harmony-scope,
#container > section.page[id^="page-notice"],
#container > section.page[id^="page-startdrive"],
#container > section.page[id="page-company"],
#container > div.page[id="page-rent"] {
  width: 100%;
  max-width: none;
  margin: 0;
  padding: 0;
}

/* Laravel 전용: footer-inner 대신 harmony-footer__inner 사용 */
body.has-harmony-v48 footer.site-footer.harmony-footer .harmony-footer__inner {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 40px;
}

.harmony-scope .notice-detail-files {
  margin-bottom: 20px;
  padding: 14px 16px;
  background: var(--ink-50);
  border-radius: var(--r-md);
}

/* 공지 상세 본문 이미지: 에디터 인라인 width 무시, 원본 픽셀 크기로 표시 */
.harmony-scope .notice-detail-body img {
  width: auto !important;
  height: auto !important;
  max-width: none !important;
  display: block;
  margin: 12px auto;
}

@media (max-width: 768px) {
  .harmony-scope .notice-detail-body img {
    max-width: 100% !important;
  }
}

.harmony-scope .notice-detail-body {
  overflow-x: auto;
}

/* 목록 빈 상태 (V49 car-empty) */
body.has-harmony-v48.catalog-page .catalog-scope .car-empty-title {
  margin: 0 0 6px;
  padding: 0;
  border: 0;
  background: none;
}

body.has-harmony-v48.catalog-page .catalog-scope .car-empty-btn,
body.has-harmony-v48.catalog-page .catalog-scope .car-empty-consult {
  min-width: 0;
  line-height: 1;
  text-decoration: none;
  box-shadow: none;
}

/* 상세·목록: 레거시 doc/layout이 V48 타이포·링크 스타일을 덮지 않도록 */
body.has-harmony-v48.catalog-page .catalog-scope a,
body.has-harmony-v48.detail-page .catalog-scope a {
  color: inherit;
  text-decoration: none;
}

body.has-harmony-v48.catalog-page .catalog-scope .stock,
body.has-harmony-v48.detail-page .catalog-scope .stock {
  text-decoration: none;
  color: inherit;
}

body.has-harmony-v48.catalog-page .catalog-scope .hero-name,
body.has-harmony-v48.detail-page .catalog-scope .hero-name {
  margin: 0;
  padding: 0;
  border: 0;
  background: none;
  line-height: 1.25;
}

body.has-harmony-v48.catalog-page .catalog-scope .breadcrumb a,
body.has-harmony-v48.detail-page .catalog-scope .breadcrumb a {
  color: var(--ink-500);
}

body.has-harmony-v48.catalog-page .catalog-scope .breadcrumb a:hover,
body.has-harmony-v48.detail-page .catalog-scope .breadcrumb a:hover {
  color: var(--ink-900);
}

body.has-harmony-v48.catalog-page #page-list .car-name,
body.has-harmony-v48.catalog-page #page-list .car-price,
body.has-harmony-v48.catalog-page #page-list .car-sub {
  font-family: inherit;
}

body.has-harmony-v48.catalog-page #page-list .car-price {
  color: var(--brand);
}

/* 적용 필터 바 — 텍스트형 초기화 버튼 */
body.has-harmony-v48.catalog-page .catalog-scope .af-clear:not(:has(.af-clear-ic)) {
  font-size: 12px;
  font-weight: 500;
  text-decoration: underline;
  padding: 0;
}

/* 중고차 카드 썸네일 — 영역 전체 채움, 비율 유지(잘림 허용) */
body.has-harmony-v48.catalog-page #page-list .car-card--used .car-thumb--used.has-image {
  padding: 0;
  overflow: hidden;
}

body.has-harmony-v48.catalog-page #page-list .car-card--used .car-thumb--used .car-thumb-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}

/* ===== 상세 페이지: 프로토타입 V49 선택 스타일 고정 (아웃라인 + 연한 배경) =====
 * 구버전 car-catalog.css 등이 solid fill로 덮어쓰는 경우 방지 */
body.has-harmony-v48.detail-page .catalog-scope .period-chip.active,
body.has-harmony-v48.detail-page .catalog-scope .chip-row .chip.active,
body.has-harmony-v48.detail-page .catalog-scope .age-opt.active {
  background: var(--action-soft, #f2f7ff) !important;
  color: var(--action, #1e63d6) !important;
  border-color: var(--action, #1e63d6) !important;
  font-weight: 600;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr.active {
  background: var(--action-soft, #f2f7ff) !important;
  border-color: var(--action, #1e63d6) !important;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr.active .ctr-name {
  color: var(--action, #1e63d6) !important;
}

body.has-harmony-v48.detail-page .catalog-scope .stock.active {
  background: var(--action-soft, #f2f7ff) !important;
  border-color: var(--action, #1e63d6) !important;
}

/* 트림 탭(전체/트림명)은 프로토타입대로 다크 필 */
body.has-harmony-v48.detail-page .catalog-scope .trim-tabs .chip.active {
  background: var(--ink-900) !important;
  border-color: var(--ink-900) !important;
  color: #fff !important;
}

/* 상세: 브레드크럼 제거 후 — 신차만 상단 여백 축소, 중고는 64px */
body.has-harmony-v48.detail-page .catalog-scope .container {
  padding-top: 40px;
}

body.has-harmony-v48.detail-page .catalog-scope #page-detail-used .container {
  padding-top: 64px;
}

body.mobile.has-harmony-v48.detail-page .catalog-scope .container {
  padding-top: 24px;
}

body.mobile.has-harmony-v48.detail-page .catalog-scope #page-detail-used .container {
  padding-top: 40px;
}

body.has-harmony-v48.detail-page .catalog-scope .detail-layout > div:first-child {
  margin-top: -12px;
}

body.has-harmony-v48.detail-page .catalog-scope .hero {
  padding-top: 0;
  margin-top: 0;
}

body.has-harmony-v48.detail-page .catalog-scope .detail-layout > .quote-panel {
  margin-top: -36px;
}

body.has-harmony-v48.detail-page .catalog-scope #page-detail-used .detail-layout > .quote-panel {
  margin-top: -60px;
}

body.desktop.has-harmony-v48.detail-page .catalog-scope #page-detail-used .hero {
  align-items: flex-start;
}

/* 히어로 이미지 없을 때 와이어프레임과 동일한 좌측 박스 유지 */
body.has-harmony-v48.detail-page .catalog-scope .hero-img.is-placeholder {
  background: var(--ink-100);
  border: 1px solid var(--ink-200);
}

body.has-harmony-v48.detail-page .catalog-scope .hero-img-empty {
  font-size: 13px;
  font-weight: 500;
  color: var(--ink-400);
  letter-spacing: -0.02em;
}

/* 구입형 견적 없음 — 1행 버튼 동일 높이, 2행 좌측 안내 */
body.has-harmony-v48.detail-page .catalog-scope .contract-grid {
  align-items: stretch;
}

body.has-harmony-v48.detail-page .catalog-scope .contract-grid > .ctr {
  height: 100%;
  min-height: 100%;
}

/* 구입형 미제공 — detail active 강제 스타일보다 우선 */
body.has-harmony-v48.detail-page .catalog-scope .ctr.ctr--locked,
body.has-harmony-v48.detail-page .catalog-scope .ctr.is-unavailable,
body.has-harmony-v48.detail-page .catalog-scope .ctr:disabled {
  background: var(--ink-50) !important;
  border-color: var(--ink-200) !important;
  cursor: not-allowed;
  opacity: 1;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr.ctr--locked:hover,
body.has-harmony-v48.detail-page .catalog-scope .ctr.is-unavailable:hover,
body.has-harmony-v48.detail-page .catalog-scope .ctr:disabled:hover {
  border-color: var(--ink-200) !important;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr.ctr--locked .ctr-name,
body.has-harmony-v48.detail-page .catalog-scope .ctr.is-unavailable .ctr-name,
body.has-harmony-v48.detail-page .catalog-scope .ctr:disabled .ctr-name {
  color: var(--ink-400) !important;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr.ctr--locked .ctr-tag,
body.has-harmony-v48.detail-page .catalog-scope .ctr.is-unavailable .ctr-tag,
body.has-harmony-v48.detail-page .catalog-scope .ctr:disabled .ctr-tag {
  background: var(--ink-200) !important;
  color: var(--ink-400) !important;
  border: none !important;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr.ctr--locked .ctr-desc,
body.has-harmony-v48.detail-page .catalog-scope .ctr.is-unavailable .ctr-desc,
body.has-harmony-v48.detail-page .catalog-scope .ctr:disabled .ctr-desc {
  color: var(--ink-400) !important;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr-unavail-note {
  display: flex;
  align-items: center;
  gap: 4px;
  margin-top: 10px;
  font-size: 13px;
  font-weight: 500;
  line-height: 1.5;
  color: var(--ink-500);
  letter-spacing: -0.02em;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr-unavail-note[hidden] {
  display: none;
}

body.has-harmony-v48.detail-page .catalog-scope .ctr-unavail-note .material-symbols-outlined {
  font-size: 16px;
}

/* reset.css 입력 기본값이 모달·폼 스타일을 덮지 않도록 */
body.has-harmony-v48 .consent-modal input,
body.has-harmony-v48 .consent-modal select,
body.has-harmony-v48 .consent-modal textarea,
body.has-harmony-v48 .cm-field input,
body.has-harmony-v48 .cm-field select,
body.has-harmony-v48 .cm-field textarea {
  -webkit-appearance: none;
  appearance: none;
  border-radius: var(--r-md);
  background: var(--bg);
  vertical-align: baseline;
}

body.has-harmony-v48 .consent-modal input[type='checkbox'],
body.has-harmony-v48 .cm-field input[type='checkbox'] {
  -webkit-appearance: checkbox;
  appearance: checkbox;
}