/* CAMPCAR 공통 CSS - 헤더/네비게이션/푸터/플로팅메뉴/전체메뉴 패널
   모든 public 페이지(관리자 페이지 제외)에서 공유합니다. */

:root {
  --green-900: #0f2e24;
  --green-800: #0a2e24;
  --green-700: #16593f;
  --green-600: #1e8a5b;
  --green-500: #2ea86e;
  --mint-100: #ffffff;
  --off-white: #f8faf8;
  --charcoal: #1c231f;
  --gray-500: #5b6b63;
  /* 본문 회색 글자. 여섯 자리(AI 상담 · 공지 · 후기 · 위탁 동의줄 · 약관)가 쓰고 있었는데 정의가 없어
     그 선언이 통째로 버려지고 글자색을 부모에게서 물려받았다 — AI 화면에서는 흰 글자를 물려받아
     흰 칸 위에서 대비 1.05:1 로 보이지 않았다(2026-09-21 제보). 흰 바탕 8.1:1 · off-white 7.8:1. */
  --gray-600: #44534b;
  --gray-200: #e3e9e5;
  --gold-badge: #d9a441;
  --accent-red: #e0334d;

  --font-body: 'Noto Sans KR', sans-serif;
  --font-display: 'Sora', sans-serif;

  --radius-lg: 1.25rem;
  --radius-md: 0.85rem;
  --shadow-soft: 0 8px 24px rgba(15, 46, 36, 0.10);
  --shadow-card: 0 6px 18px rgba(15, 46, 36, 0.12);
}

* { box-sizing: border-box; }
html { scroll-behavior: smooth; font-size: 121%; }
@media (max-width: 767.98px) { html { font-size: 109%; } }
body {
  font-family: var(--font-body);
  color: var(--charcoal);
  background-color: var(--off-white);
  -webkit-font-smoothing: antialiased;
}
a { text-decoration: none; color: inherit; }

.section-pad { padding: 4.5rem 0; }
@media (max-width: 767.98px) { .section-pad { padding: 2.75rem 0; } }

/* ===== Header ===== */
.cc-header {
  position: sticky; top: 0; z-index: 1030;
  background-color: rgba(248, 250, 248, 0.97);
  backdrop-filter: blur(6px);
  border-bottom: 1px solid var(--gray-200);
}
.cc-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.5rem; color: var(--green-900); letter-spacing: -0.02em; }
.cc-logo span { color: var(--green-600); }
/* 로고 옆 '캠카랜드'(2026-09-13 요청). 로고 링크 안에 두어 누르면 같은 곳(홈)으로 갑니다 —
   따로 떼어 두면 글자만 있고 눌리지 않는 자리가 로고 바로 옆에 생깁니다.
   로고보다 한 단계 작고 가는 글씨에 앞에 선을 둬서, 이름이 둘로 읽히지 않고 "CAMPCAR 의
   캠카랜드" 로 읽히게 했습니다. 글꼴은 본문 글꼴입니다 — 로고 글꼴(Sora)에는 한글이 없어
   그대로 두면 브라우저가 아무 한글 글꼴로 대신 그립니다.
   .cc-logo span(초록) 규칙을 함께 받는 자리라 색을 여기서 다시 정합니다. */
/* 로고 링크가 한 줄에서 꺾이지 않게 합니다. 헤더는 flex 라 자리가 빠듯한 폭(992px)에서
   링크가 몇 px 좁아지면 '캠카랜드' 만 다음 줄로 떨어져 헤더가 두 칸 높이가 됩니다(확인함). */
.cc-logo { white-space: nowrap; flex-shrink: 0; }
.cc-logo .cc-logo-land {
  display: inline-block; vertical-align: middle;
  margin-left: 0.3rem; padding-left: 0.75rem;
  border-left: 1px solid var(--gray-200);
  font-family: var(--font-body); font-weight: 700; font-size: 1.05rem;
  line-height: 1.1; letter-spacing: -0.01em; color: var(--green-900);
  position: relative; top: -0.1em;
}
/* 휴대폰 폭(575px 이하)에서는 감춥니다. 그 폭에서는 로고 · 로그인 · 회원가입 · 메뉴 버튼이
   한 줄을 이미 꽉 채우고 있어서, 붙여두면 '캠카랜드' 가 로그인 글자 위로 올라탑니다
   (375px 에서 25px 겹침 — 확인함). 줄여서 넣어도 들어가지 않고, 로그인한 사람은 이름까지
   서서 더 빠듯합니다. 휴대폰에서 로그인 버튼을 밀어내는 것보다 이 글자를 빼는 편이 낫습니다. */
@media (max-width: 575.98px) {
  .cc-logo .cc-logo-land { display: none; }
}
.cc-nav-menu { display: flex; gap: 2.1rem; margin: 0; padding: 0; list-style: none; }
.cc-nav-menu > li { position: relative; }
/* 이 자리는 <button> 입니다. 누르면 메뉴가 펼쳐질 뿐 어디로도 가지 않아서,
   링크로 두면 화면낭독기가 목적지 있는 링크로 읽고 새 탭으로 열기도 됩니다
   (2026-09-07 — 전에는 <a href="#" role="button">). 버튼의 기본 배경·테두리를
   지워 보이는 모습은 그대로 둡니다. */
.cc-nav-menu .nav-link-plain {
  font-weight: 500; font-size: 1.05rem; color: var(--charcoal); position: relative;
  padding: 0.35rem 0.1rem; display: inline-block; white-space: nowrap;
  background: none; border: 0; cursor: pointer;
  font-family: inherit; line-height: inherit;
}
.cc-nav-menu .nav-link-plain i { font-size: 0.62rem; margin-left: 0.25rem; color: var(--gray-500); }
.cc-nav-menu .nav-link-plain::after { content: ""; position: absolute; left: 0; bottom: -2px; width: 0%; height: 2px; background: var(--green-600); transition: width 0.25s ease; }
.cc-nav-menu .nav-link-plain:hover::after { width: 100%; }
.cc-nav-menu .nav-link-plain:hover { color: var(--green-700); }
/* ===== 헤더 두 줄 =====
   로고를 왼쪽에 세우고 오른쪽을 두 줄로 나눈다 — 윗줄은 유틸리티(전화·로그인·회원가입·
   전체서비스), 아랫줄은 주요 메뉴. 한 줄에 다 세우면 자리가 모자라 유틸리티를 아이콘으로
   줄여야 했는데, 그러면 로그인인지 회원가입인지 바로 읽히지 않는다(2026-08-30 제보).
   줄을 하나 더 쓰면 글자로 둘 수 있다. */
.cc-header-inner { display: flex; align-items: center; gap: 1.5rem; padding-top: 0.55rem; padding-bottom: 0.55rem; }
.cc-header-stack { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; align-items: flex-end; gap: 0.3rem; }
.cc-header-top { display: flex; align-items: center; gap: 1.15rem; }
.cc-header-bottom { display: flex; justify-content: flex-end; }

/* 유틸리티 글자 링크. 전체서비스는 <button> 이라 배경·테두리를 지워 링크와 같은 모양으로 둔다. */
.cc-util-link {
  display: inline-flex; align-items: center; gap: 0.3rem;
  background: none; border: none; padding: 0;
  font-size: 0.84rem; font-weight: 500; line-height: 1.7;
  color: var(--gray-500); white-space: nowrap;
  transition: color 0.15s ease;
}
.cc-util-link:hover, .cc-util-link:focus-visible { color: var(--green-700); }
/* 관리 센터 링크만 색으로 가른다. 자기 관리 화면으로 돌아가는 자리라 고객 메뉴와 성격이
   다르고, 로그인한 사람만 보인다. 회원가입은 로그인과 한 쌍으로 읽히도록 같은 모양으로 둔다. */
.cc-util-link.is-accent { color: var(--green-700); font-weight: 600; }
.cc-util-link.is-accent:hover { color: var(--green-900); }
/* 관리 화면으로 가는 링크(딜러 센터·파트너 센터·관리자 센터)만 테두리 버튼으로 둔다.
   옆의 글자들과 섞여 있으면 눌러야 하는 자리인지 눈에 들어오지 않는다.
   글자 크기는 그대로 두고 테두리만 입혀 윗줄 높이가 흔들리지 않게 한다. */
.cc-util-link.is-console {
  border: 1.5px solid var(--green-600);
  border-radius: 50px;
  padding: 0.14rem 0.7rem;
  color: var(--green-700);
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.cc-util-link.is-console:hover, .cc-util-link.is-console:focus-visible {
  background: var(--green-600); border-color: var(--green-600); color: #fff;
}
.cc-util-link i { font-size: 0.78rem; }
.cc-tel-link { font-weight: 600; color: var(--green-700); }
.cc-util-allmenu i { font-size: 0.6rem; color: var(--gray-500); }

.btn-cc-price {
  display: inline-flex; align-items: center; gap: 0.4rem;
  background: #00693e; color: #fff; font-weight: 700; font-size: 0.85rem;
  padding: 0.5rem 1.15rem; border-radius: 50px; border: 1.5px solid #00693e;
  white-space: nowrap;
  transition: background 0.2s ease, transform 0.2s ease, box-shadow 0.2s ease;
}
.btn-cc-price i { font-size: 0.85rem; }
.btn-cc-price:hover { background: var(--green-600); border-color: var(--green-600); color: #fff; transform: translateY(-2px) scale(1.04); box-shadow: 0 8px 18px rgba(0,105,62,0.32); }
.cc-navbar-toggler { background: none; border: none; font-size: 1.5rem; color: var(--green-900); padding: 0.2rem 0.4rem; }
/* 마우스로 눌렀을 때 남는 테두리만 걷어냅니다. :focus 로 통째로 지우면
   탭으로 옮겨온 사람에게 지금 어디에 있는지 알려줄 것이 하나도 없습니다
   (WCAG 2.4.7 — 2026-09-07). 키보드로 온 경우는 아래 :focus-visible 이 받습니다. */
.cc-navbar-toggler:focus { outline: none; box-shadow: none; }
.cc-navbar-toggler:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
.cc-mobile-nav { width: 300px; }
.cc-mobile-nav .accordion-button { font-weight: 700; font-size: 1rem; color: var(--charcoal); box-shadow: none; padding: 0.9rem 0.25rem; }
.cc-mobile-nav .accordion-button:not(.collapsed) { color: var(--green-700); background: none; }
.cc-mobile-nav .accordion-button::after { background-size: 1rem; }
.cc-mobile-nav .accordion-item { border: none; border-bottom: 1px solid var(--gray-200); }
.cc-mobile-sublink, .cc-mobile-flatlink { display: block; padding: 0.6rem 0.6rem; font-size: 0.92rem; color: var(--gray-500); }
.cc-mobile-flatlink { font-weight: 700; color: var(--charcoal); padding: 0.9rem 0.25rem; }
.cc-mobile-sublink:hover, .cc-mobile-flatlink:hover { color: var(--green-700); }
.btn-cc-solid { background: var(--green-600); color: #fff; border-radius: 50px; padding: 0.45rem 1.15rem; font-weight: 600; font-size: 0.88rem; border: 1.5px solid var(--green-600); }
.btn-cc-solid:hover { background: var(--green-900); border-color: var(--green-900); color: #fff; }
.cc-nav-menu .dropdown-menu { border: none; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); padding: 0.5rem; margin-top: 0.75rem; }
.cc-nav-menu .dropdown-menu .dropdown-item { border-radius: 8px; padding: 0.55rem 0.9rem; font-size: 0.92rem; font-weight: 500; color: var(--charcoal); }
.cc-nav-menu .dropdown-menu .dropdown-item:hover, .cc-nav-menu .dropdown-menu .dropdown-item:focus { background-color: var(--mint-100); color: var(--green-700); }

/* 로고는 두 줄 전체 높이의 가운데에 선다(.cc-header-inner 의 align-items:center).
   한 줄이던 시절 쓰던 밑선 맞춤(align-items:baseline)은 줄이 나뉘면서 필요 없어져 뺐다. */

/* ===== Footer ===== */
.cc-footer { background: #0a2019; color: rgba(255,255,255,0.72); padding: 3.5rem 0 0; }
.cc-footer-logo { font-family: var(--font-display); font-weight: 800; font-size: 1.4rem; color: #fff; margin-bottom: 0.75rem; }
.cc-footer-logo span { color: var(--green-500); }
.cc-footer-desc { font-size: 0.87rem; line-height: 1.7; max-width: 320px; margin-bottom: 1.4rem; }
.cc-footer-sns { display: flex; gap: 0.6rem; }
.cc-footer-sns a { width: 36px; height: 36px; border-radius: 50%; border: 1px solid rgba(255,255,255,0.25); display: flex; align-items: center; justify-content: center; color: #fff; }
.cc-footer-sns a:hover { background: var(--green-600); border-color: var(--green-600); }
.cc-footer-heading { color: #fff; font-weight: 700; font-size: 0.95rem; margin-bottom: 1.1rem; }
.cc-footer-links { list-style: none; padding: 0; margin: 0; }
.cc-footer-links li { margin-bottom: 0.65rem; font-size: 0.87rem; }
.cc-footer-links a:hover { color: #fff; }
.cc-footer-senior { background: rgba(255,255,255,0.05); border: 1px solid rgba(255,255,255,0.15); border-radius: var(--radius-md); padding: 1.3rem 1.4rem; }
.cc-footer-senior-title { color: #fff; font-weight: 700; font-size: 0.95rem; margin-bottom: 0.6rem; }
.cc-footer-senior-tel { display: flex; align-items: center; gap: 0.6rem; font-family: var(--font-display); font-size: 1.25rem; font-weight: 700; color: #fff; }
.cc-footer-senior-tel i { color: var(--green-500); font-size: 1.4rem; }
.cc-footer-senior-desc { font-size: 0.8rem; margin-top: 0.5rem; color: rgba(255,255,255,0.55); }
.cc-footer-bottom { border-top: 1px solid rgba(255,255,255,0.12); margin-top: 2.5rem; padding: 1.4rem 0 1.6rem; font-size: 0.78rem; color: rgba(255,255,255,0.45); line-height: 1.8; position: relative; }

/* 바닥글의 약관 · 방침 링크. 회사 정보보다 위에 두고 글자를 밝게 한다 —
   개인정보처리방침은 법으로 공개해야 하는 글이라 눈에 띄어야 한다(2026-09-21). */
.cc-footer-legal { margin: 0 0 0.6rem; font-size: 0.82rem; color: rgba(255,255,255,0.7); }
.cc-footer-legal a { color: rgba(255,255,255,0.8); }
.cc-footer-legal a:hover { color: #fff; text-decoration: underline; }
.cc-footer-legal strong { color: #fff; font-weight: 700; }
.cc-footer-legal span { margin: 0 0.5rem; color: rgba(255,255,255,0.3); }

/* ===== Floating quick menu ===== */
.cc-float-menu { position: fixed; right: 1.25rem; bottom: 1.5rem; z-index: 1040; display: flex; flex-direction: column; gap: 0.6rem; }
.cc-float-item { width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 0.3rem; padding: 0.7rem 0.3rem; background: var(--green-900); color: #fff; border-radius: var(--radius-md); box-shadow: var(--shadow-soft); font-size: 0.7rem; font-weight: 600; text-align: center; line-height: 1.2; }
.cc-float-item i { font-size: 1.05rem; color: var(--green-500); }
.cc-float-item:hover { background: var(--green-600); }
.cc-float-item:hover i { color: #fff; }


/* 예약중·판매완료 배지. 팔린 차를 목록에 남겨두는 대신 상태를 분명히 적는 자리라
   (2026-09-01), 옆의 가격보다 조용하되 지나치지 않을 만큼은 눈에 띄어야 한다. */
.cc-sale-badge {
  display: inline-block;
  vertical-align: middle;
  margin-left: 0.35rem;
  padding: 0.12em 0.5em;
  border-radius: 999px;
  font-size: 0.72rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: nowrap;
}
.cc-sale-badge.is-reserved { background: #fff4e0; color: #a35c00; }
.cc-sale-badge.is-sold { background: #eceff3; color: #5b6472; }

/* 매물 카드의 연장 표시. 차체를 늘린 개조라 고객이 목록에서 바로 가려낼 수 있어야 한다.
   미연장은 붙이지 않는다(js/auth.js 의 ccExtendedBadge 주석 참고). */
.cc-ext-badge {
  display: inline-block; vertical-align: middle;
  margin-left: 0.3rem; padding: 0.1rem 0.4rem;
  /* --mint-100 은 이 프로젝트에서 순백(#ffffff)이라 배경으로 쓰면 배지가 보이지 않는다
     (2026-08-11에 같은 이유로 버튼 색을 고친 적이 있다). 옅은 초록을 직접 깐다. */
  border-radius: 4px; background: rgba(30, 138, 91, 0.12); color: var(--green-700);
  font-size: 0.7rem; font-weight: 700; line-height: 1.5; white-space: nowrap;
}

/* ===== Responsive ===== */
/* 헤더가 두 줄이 되면서 주요 메뉴가 한 줄을 통째로 쓴다. 전에는 로그인 영역과 자리를
   나눠 써서 1300px 아래로는 접어야 했는데, 이제 992px 까지 네 항목이 그대로 들어간다.
   그 아래(모바일)는 햄버거 메뉴가 받는다 — 토글 버튼의 d-lg-none 과 기준이 같다. */
@media (max-width: 991.98px) {
  .cc-header-bottom { display: none; }
  /* 좁은 화면에서는 전화·전체서비스·관리 센터를 접고 로그인·회원가입만 남긴다. 나머지는 햄버거
     메뉴 안에 같은 항목이 있고, 여기서는 로고와 토글 버튼에 자리를 내주는 편이 낫다. */
  .cc-header-inner { gap: 0.75rem; }
  .cc-header-top { gap: 0.75rem; min-width: 0; }
  .cc-header-top .cc-tel-link,
  .cc-header-top .cc-util-allmenu,
  .cc-header-top #cc-console-link-cc-auth-login-desktop { display: none; }
  /* 이름이 길면 그 자리만 줄인다. 줄이지 않으면 nowrap 이라 윗줄 전체가 왼쪽으로 밀려
     로고 위로 올라타고 첫 항목이 화면 밖으로 나간다(375px·관리자 이름에서 확인). */
  #cc-auth-login-desktop {
    display: block; min-width: 0; max-width: 5.5em;
    overflow: hidden; text-overflow: ellipsis;
  }
  /* 로고도 한 호흡 줄인다. 이름·로그아웃·햄버거까지 375px 안에 들어가야 해서,
     줄이지 않으면 이름 자리를 아무리 좁혀도 로고 위로 올라탄다. */
  .cc-logo { font-size: 1.3rem; }
}
@media (max-width: 767.98px) { .cc-float-menu { display: none; } }
/* 탭으로 옮겨다닐 때 지금 어디에 있는지 보이게 합니다. :focus 가 아니라
   :focus-visible 이라 마우스로 누른 자리에는 테두리가 남지 않습니다.
   입력칸까지 넣은 이유 — 폼은 탭으로만 다니는 사람이 실제로 있고, 부트스트랩이
   주는 옅은 그림자는 흰 칸에서 잘 보이지 않습니다(2026-09-07). */
a:focus-visible, button:focus-visible,
input:focus-visible, select:focus-visible, textarea:focus-visible,
[tabindex]:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }
/* 체크박스·라디오는 칸이 작아 테두리가 글자에 붙습니다. 한 칸 띄웁니다. */
input[type="checkbox"]:focus-visible, input[type="radio"]:focus-visible { outline-offset: 3px; }

/* 본문 바로가기 — 평소에는 화면 밖에 있다가 탭을 처음 누르면 나타납니다.
   머리말 메뉴가 서른 개 가까이라 이것이 없으면 탭만 쓰는 사람은 본문에 닿기까지
   그 메뉴를 페이지마다 전부 지나야 합니다(WCAG 2.4.1). display:none 으로 감추면
   탭 차례에서도 빠져 아예 닿을 수 없어, 자리만 화면 밖으로 옮겨둡니다. */
.cc-skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 2000;
  background: var(--green-700); color: #fff; padding: 0.6rem 1rem;
  border-radius: 0 0 6px 0; font-weight: 700; text-decoration: none;
}
.cc-skip-link:focus { left: 0; color: #fff; }

/* ===========================================================
   전체메뉴 패널 (헤더 우측 버튼)
   =========================================================== */
.cc-allmenu-panel {
  border-bottom: 1px solid var(--gray-200);
  box-shadow: 0 12px 30px rgba(15, 46, 36, 0.12);
}
#allMenuPanel.offcanvas-top {
  height: fit-content !important;
  max-height: 90vh;
}
.cc-allmenu-panel .offcanvas-header {
  border-bottom: 1px solid var(--gray-200);
  padding: 1.1rem 0;
}
.cc-allmenu-panel .offcanvas-header .container {
  display: flex; align-items: center; justify-content: space-between;
}
.cc-allmenu-title {
  font-family: var(--font-display); font-weight: 700; font-size: 1.15rem;
  color: var(--green-900); display: flex; align-items: center; gap: 0.5rem;
}
.cc-allmenu-title i { color: var(--green-600); }
.cc-allmenu-panel .offcanvas-body { padding: 2.2rem 0 2.6rem; }

.cc-allmenu-col-title {
  font-weight: 700; font-size: 0.95rem; color: var(--green-900);
  margin-bottom: 1rem; padding-bottom: 0.6rem;
  border-bottom: 2px solid var(--gray-200);
}
.cc-allmenu-links { list-style: none; padding: 0; margin: 0; }
.cc-allmenu-links li { margin-bottom: 0.75rem; }
.cc-allmenu-links a {
  font-size: 0.9rem; color: var(--gray-500);
  transition: color 0.18s ease, padding-left 0.18s ease;
}
.cc-allmenu-links a:hover { color: var(--green-700); padding-left: 0.25rem; }

.cc-allmenu-highlight {
  background: var(--mint-100);
  border-radius: var(--radius-md);
  padding: 1.4rem 1.5rem;
  height: 100%;
}
.cc-allmenu-highlight .cc-allmenu-col-title { border-bottom-color: rgba(30,138,91,0.25); }
.cc-allmenu-highlight a.btn-cc-solid { margin-top: 0.4rem; display: inline-block; }

/* 헤더의 "로그인 / 회원가입"을 로그인 여부가 확인될 때까지 감춘다.
   그 두 글자는 HTML에 로그아웃 상태로 적혀 있어서, 로그인한 사람은 페이지를 옮길 때마다
   그것이 먼저 그려졌다가 이름으로 바뀌는 것을 보게 된다.
   표시(.cc-auth-pending)는 <head>의 js/auth-boot.js가 붙이고, 응답이 오면 js/auth.js가 뗀다.
   직전에 로그인 상태였던 사람에게만 붙으므로 로그아웃 상태에서는 아무 일도 일어나지 않는다.

   visibility 로 감춘다(display 아님). 자리를 그대로 잡아두어야 감춘 동안 헤더가 접히지 않고,
   윗줄이 접히면서 헤더 높이가 출렁이지도 않는다. */
.cc-auth-pending #cc-auth-login-desktop,
.cc-auth-pending #cc-auth-login-mobile,
.cc-auth-pending #cc-auth-signup-desktop,
.cc-auth-pending #cc-auth-signup-mobile,
.cc-auth-pending #cc-auth-signup-allmenu {
  visibility: hidden;
}

/* ===== 한글 줄바꿈 (화면 전체) =====
   한글은 기본값이 글자 단위로 끊겨 "…책임지는 토탈케어 / 를 약속합니다" 처럼 낱말
   가운데가 잘린다. 2026-09-07 캠카소개 큰 제목에서 겪고 그 화면만 고쳤는데,
   2026-09-08 안내 문구에서 같은 일이 또 나서 여기 한 곳으로 모았다 — 안내 문구는
   화면마다 이름이 다르고(cc-*-desc 서른일곱 갈래) 문구도 자주 바뀌는 자리라,
   화면마다 걸어두면 새 화면에서 반드시 빠뜨린다.
   overflow-wrap 을 함께 두는 이유 — 칸보다 긴 낱말(긴 영문 주소 같은 것)이 오면
   keep-all 만으로는 칸 밖으로 삐져나가 가로 스크롤이 생긴다. 그때만 끊는다. */
[class*="-desc"],
.section-title + p,
.cc-subhero-title {
  word-break: keep-all;
  overflow-wrap: break-word;
}

/* ===== 서브 배너 글자 (화면 전체) =====
   사진 위에 얹는 배너 글자는 모두 이 모양이다 — 윗줄(작은 초록 글자) · 제목(큰 글자, h1) · 설명 한 줄, 왼쪽 정렬.
   2026-09-14에 자주 묻는 질문 화면의 모양으로 통일했다. 그 전에는 화면마다 style 블록에 제각각 적혀 있어
   (cc-mp-title 2.3rem · cc-rf-title 2.2rem · cc-gs-title 1.9rem · 이벤트는 가운데 정렬, 윗줄은 금색 · 아이콘 달린 것도)
   화면을 옮길 때마다 배너 글자 모양이 달라졌다. 배경 사진과 배너 높이는 화면마다 다르므로 각 화면에 둔다.
   윗줄 색은 FAQ 가 쓰던 --green-500 이 아니라 #6bd9a4 다 — 사진 위에서 --green-500 은 거의 보이지 않았다
   (캠카소개에서 재보니 4.4:1). 밝은 초록에 그림자를 받친다. */
.cc-subhero-eyebrow {
  display: inline-block;
  font-size: 0.85rem; font-weight: 700; letter-spacing: 0.14em;
  color: #6bd9a4;
  text-shadow: 0 1px 10px rgba(0,0,0,0.45);
  margin-bottom: 0.8rem;
}
.cc-subhero-title {
  font-family: var(--font-display); font-weight: 700;
  font-size: 2.5rem; line-height: 1.35; max-width: 640px;
  color: #fff;
  text-shadow: 0 2px 18px rgba(0,0,0,0.35);
}
.cc-subhero-desc {
  margin-top: 0.9rem; margin-bottom: 0;
  font-size: 1.02rem; color: rgba(255,255,255,0.85); max-width: 560px;
  text-shadow: 0 1px 12px rgba(0,0,0,0.35);
}
/* 배너 안에 카드 줄이 이어지는 화면(시세 조회 · 위탁 · 렌탈금융 · 토탈케어 · 캠핑용품)은 글자와 카드 사이를 띄운다.
   전에는 화면마다 제목에 margin-bottom 2rem 을 따로 줬다. */
.cc-subhero-title + .row,
.cc-subhero-desc + .row { margin-top: 1rem; }
/* 휴대폰에서는 제목을 한 단계 줄인다. 2.5rem(43px)이면 "캠카가 당신의 캠핑카를 가장 높은 가치로 안전하게 판매해 드립니다"
   같은 긴 제목이 여섯 줄로 접혀 배너가 화면을 통째로 덮는다. 모든 배너에 똑같이 걸어 휴대폰에서도 모양이 같다. */
@media (max-width: 575.98px) {
  .cc-subhero-title { font-size: 1.85rem; }
}

/* ===== 서브 배너 높이 (화면 전체 · 2026-10-01) =====
   "서브 타이틀 부분 전체적으로 height 통일" 요청. 기준은 PQC 인증 캠핑카 목록(pqc_find)의 제목 구역 높이(넓은 화면 약 220px)다.
   전에는 화면마다 배너 여백과 안의 내용이 달라 380px(공지) · 530px(캠카소개) · 1100px(캠핑용품 — 배너 안에 카드 줄)까지
   제각각이었고, 화면을 옮길 때마다 본문이 시작하는 자리가 출렁였다.
   - 배너 섹션에 cc-pagehero 를 달면 이 규칙이 높이 · 여백을 정한다. 화면마다 style 블록에 배너 여백이 적혀 있어
     클래스를 두 번 적어 그쪽을 이긴다(!important 는 쓰지 않는다 — 나중에 한 화면만 달리 둘 길을 막는다).
   - 배너 안에 있던 안내 카드는 배너 밖 cc-pagehero-after 로 옮겼다 — 카드가 들어 있으면 높이를 맞출 수가 없다.
   - 배경 사진 없이 글자만 있던 배너(문의 · 예약 · 내차 팔기 · 파트너)는 cc-pagehero--plain 으로 어두운 바탕에 밝은 글자.
   높이는 min-height 다 — 글이 길어 넘치면 늘어난다(잘리는 것보다 낫다). 그래서 제목을 한 줄에 담기 쉽게
   배너 안에서는 제목 폭 제한을 풀고 한 단계 줄였다. */
.cc-pagehero.cc-pagehero {
  min-height: 220px;
  padding: 1.5rem 0;
  display: flex; align-items: center;
}
.cc-pagehero.cc-pagehero > .container { width: 100%; }
.cc-pagehero .cc-subhero-title { font-size: 2.1rem; max-width: none; margin-bottom: 0; }
.cc-pagehero .cc-subhero-desc { max-width: 1040px; }
/* 넓은 화면에서는 제목 안의 줄바꿈(<br>)을 접어 한 줄로 — 두 줄이면 그 배너만 55px 높아진다.
   좁은 화면에서는 어차피 폭에 맞춰 접히므로 원래 줄바꿈을 그대로 둔다. */
@media (min-width: 992px) { .cc-pagehero .cc-subhero-title br { display: none; } }
/* 캠카소개 배너의 세 줄 목록 — 줄 사이를 조여 다른 배너와 높이를 맞춘다(글자는 그대로). */
.cc-pagehero .cc-subhero-points { margin-top: 0.7rem; margin-bottom: 0; }
.cc-pagehero .cc-subhero-points li { margin-bottom: 0.15rem; line-height: 1.45; }
.cc-pagehero .cc-subhero-eyebrow { margin-bottom: 0.55rem; }
/* 글자만 있던 배너 — 다른 배너의 사진 바탕(--green-800)과 같은 색으로 깔고 글자를 밝게. 흰 글자 대비 14:1. */
.cc-pagehero--plain.cc-pagehero--plain { background: var(--green-800); color: #fff; }
.cc-pagehero--plain.cc-pagehero--plain h1 { color: #fff; margin-bottom: 0; }
.cc-pagehero--plain.cc-pagehero--plain h1 + p { margin: 0.7rem 0 0; }
.cc-pagehero--plain.cc-pagehero--plain p { color: rgba(255,255,255,0.85); }
/* 글자만 있던 배너에도 사진을 깝니다(2026-10-01 요청 — "컬러만 들어간 서브배너도 사진 이미지").
   사진은 우리 서버의 파일(images/)만 씁니다 — 남의 사진 서비스에 걸면 그 서비스가 느린 날 첫 화면이 함께 늦습니다.
   글이 가운데 정렬이라 옆으로 옅어지는 덮개가 아니라 고른 덮개를 깝니다(글자 대비는 사진마다 재서 정한 값).
   사진을 못 받아도 아래 바탕색(--green-800)이 남아 글자는 그대로 읽힙니다.
   url 을 페이지의 style 속성이 아니라 여기 클래스에 두는 이유 — 상대 주소가 이 파일 기준으로 풀려 화면마다 경로가 갈리지 않습니다. */
.cc-pagehero--plain.cc-pagehero--plain[class*="cc-pagehero-img--"] {
  background-color: var(--green-800);
  background-size: cover; background-position: center; background-repeat: no-repeat;
}
.cc-pagehero-img--lake.cc-pagehero-img--lake   { background-image: linear-gradient(rgba(9,34,28,.64), rgba(9,34,28,.72)), url("../images/event-hero-rv-lake.jpg"); }
.cc-pagehero-img--land.cc-pagehero-img--land   { background-image: linear-gradient(rgba(9,34,28,.64), rgba(9,34,28,.72)), url("../images/campcarland-chungju.jpg"); }
.cc-pagehero-img--care.cc-pagehero-img--care   { background-image: linear-gradient(rgba(9,34,28,.64), rgba(9,34,28,.72)), url("../images/hero-camper-total-care.jpg"); }
.cc-pagehero-img--awning.cc-pagehero-img--awning { background-image: linear-gradient(rgba(9,34,28,.64), rgba(9,34,28,.72)), url("../images/hero-camper-awning.jpg"); }
.cc-pagehero-img--sunset.cc-pagehero-img--sunset { background-image: linear-gradient(rgba(9,34,28,.64), rgba(9,34,28,.72)), url("../images/hero-camper-lake-sunset.jpg"); }
.cc-pagehero-img--coast.cc-pagehero-img--coast { background-image: linear-gradient(rgba(9,34,28,.64), rgba(9,34,28,.72)), url("../images/hero-camper-family-coast.jpg"); }
/* 배너 밖으로 옮긴 안내 카드 줄. 흰 바탕 위라 카드에 테두리 · 그림자를 준다(사진 위에서는 바탕이 경계를 그려줬다). */
.cc-pagehero-after { padding: 2.2rem 0 0; }
.cc-pagehero-after .cc-mp-feature-card,
.cc-pagehero-after .cc-rf-feature-card,
.cc-pagehero-after .cc-gs-product-card { border: 1px solid var(--gray-200); box-shadow: var(--shadow-soft); }
@media (max-width: 575.98px) {
  .cc-pagehero.cc-pagehero { min-height: 180px; padding: 1.6rem 0; }
  .cc-pagehero .cc-subhero-title { font-size: 1.6rem; }
  .cc-pagehero-after { padding-top: 1.6rem; }
}

/* 인증 매물 카드 — 둘레 전체를 금색 테두리로(2026-09-13 요청 · 처음엔 빨강이었다가 금색으로). 어느 카드가 인증인지는 js/auth.js 의 ccCertifiedClass 가 정한다.
   카드 규칙은 화면마다 style 블록에 복사돼 있고(cc-search-card · cc-car-card · cc-pd-card …) 이 파일보다 뒤에 읽혀서,
   특히 목록 카드는 마우스를 올리면 border-color 를 transparent 로 바꾼다. 클래스를 두 번 적어 우선순위를 올려
   마우스를 올려도 테두리가 사라지지 않게 한다(!important 는 쓰지 않는다 — 나중에 이 카드만 달리 그릴 길을 막는다).
   금색은 --gold-badge(#d9a441)를 쓰지 않았다 — 흰 바탕에서 2.2:1 이라 테두리가 흐릿하게 녹아 보인다(기준 3:1).
   한 단계 짙은 금색 #b8860b 는 3.3:1 이다.
   2px 인 이유 — 1px 은 회색 테두리와 굵기가 같아 색만으로 갈리는데, 색으로만 가르면 색각 이상이 있는 분께는
   다른 카드와 구분되지 않는다(배지와 [PQC인증] 글자가 함께 있어 뜻은 글로도 전해진다). */
.cc-card-certified.cc-card-certified,
.cc-card-certified.cc-card-certified:hover {
  border: 2px solid #b8860b;
}

/* 일반매물 배지(2026-09-14). 전에는 '인증매물' 이라는 이름에 인증 매물과 같은 빨강이라, 캠카가 인증하지 않은 차가
   손님 눈에 인증 매물로 보였다. 빨강(PQC 인증) · 진초록(위탁) · 회색(직거래) · 보라(신차)와 갈리는 차분한 청회색이다.
   흰 글자와 7.5:1.
   배지 규칙은 화면마다 style 블록에 복사돼 있는데(cc-car-badge · cc-search-badge · cc-detail-badge · cc-pd-card-badge),
   신차 배지 때처럼 스무 곳에 나눠 심지 않고 여기 한 곳에 둔다. 클래스 둘을 붙인 선택자라 화면의 기본 배지 색
   (클래스 하나)을 순서와 상관없이 이긴다. */
.cc-car-badge.badge-general,
.cc-search-badge.badge-general,
.cc-detail-badge.badge-general,
.cc-pd-card-badge.badge-general {
  background: #37596b;
  color: #fff;
}

/* ===== 내차 찾기 조건검색 (find · pqc_find — js/find-filter.js) ===== */
/* Step 4(서류 · 사고 · 구조변경 · 차고지)는 매물에 받는 칸이 없어 조건으로 걸 수 없다(2026-09-15).
   골라진 척하지 않도록 흐리게 두고 누를 수 없게 한다 — 화면 스크립트가 모든 아이콘 단추에 켜고 끄기를 붙이고
   있어서, 여기서 막지 않으면 눌러서 켜진 것처럼 보인다. */
.cc-fs-step-soon .cc-fs-icon-grid,
.cc-fs-step-soon .cc-fs-cond-grid,
.cc-fs-step-soon .cc-fs-subhead { opacity: 0.45; pointer-events: none; }
.cc-fs-soon-note {
  display: flex; gap: 0.4rem; align-items: flex-start;
  margin: 0 0 0.7rem; padding: 0.55rem 0.7rem;
  border-radius: 8px; background: #f3f6f4;
  font-size: 0.78rem; line-height: 1.45; color: var(--gray-500); word-break: keep-all;
}
.cc-fs-soon-note i { color: var(--green-600); margin-top: 0.1rem; }

/* 조건에 맞는 매물이 0대일 때 목록 자리 안내 */
.cc-fs-empty {
  text-align: center; padding: 3rem 1.25rem;
  border: 1px dashed var(--gray-200); border-radius: var(--radius-md);
  background: #fbfcfb; word-break: keep-all;
}
.cc-fs-empty > i { font-size: 2rem; color: var(--green-600); }
.cc-fs-empty-title { margin: 0.6rem 0 0.25rem; font-size: 1.1rem; font-weight: 700; color: var(--charcoal); }
.cc-fs-empty-desc { margin: 0 0 1.1rem; color: var(--gray-500); font-size: 0.92rem; }
.cc-fs-empty-actions { display: flex; flex-wrap: wrap; gap: 0.6rem; justify-content: center; }
.cc-fs-empty-btn, .cc-fs-empty-link {
  display: inline-flex; align-items: center; padding: 0.55rem 1.3rem; border-radius: 50px;
  font-weight: 600; font-size: 0.92rem; text-decoration: none; cursor: pointer;
}
.cc-fs-empty-btn { background: var(--green-600); color: #fff; border: 0; }
.cc-fs-empty-btn:hover { background: var(--green-900); }
.cc-fs-empty-link { border: 1px solid var(--gray-200); color: var(--charcoal); background: #fff; }
.cc-fs-empty-link:hover { border-color: var(--green-600); color: var(--green-700); }
.cc-fs-submit-circle[aria-busy="true"] { opacity: 0.75; cursor: progress; }

/* SNS 로그인 버튼(js/social-login.js — 로그인 · 회원가입 · SNS 연결 화면).
   색은 각 서비스가 쓰는 색 그대로다. 카카오 노랑 위에는 검은 글자여야 읽힌다(흰 글자는 1.4:1).
   화면마다 복사해두면 한 곳만 고치게 되어 여기 한 곳에 둔다. */
.cc-social-divider { display: flex; align-items: center; gap: 0.7rem; margin: 1.4rem 0 1rem; color: var(--gray-500); font-size: 0.85rem; }
.cc-social-divider::before, .cc-social-divider::after { content: ""; flex: 1; height: 1px; background: var(--gray-200); }
.cc-social-btn {
  width: 100%; display: flex; align-items: center; justify-content: center; gap: 0.5rem;
  margin-bottom: 0.6rem; padding: 0.8rem; border-radius: 12px;
  font-weight: 700; font-size: 0.97rem; border: 1px solid transparent; cursor: pointer;
}
.cc-social-btn i, .cc-social-n { font-size: 1.05rem; line-height: 1; }
.cc-social-n { font-weight: 800; }
.cc-social-kakao { background: #fee500; color: #191600; }
.cc-social-kakao:hover { background: #f2da00; color: #191600; }
.cc-social-naver { background: #03c75a; color: #fff; }
.cc-social-naver:hover { background: #02af4f; color: #fff; }
.cc-social-google { background: #fff; color: #3c4043; border-color: #dadce0; }
.cc-social-google:hover { background: #f7f8f8; color: #3c4043; }

/* 차량 번호 칸 아래 안내(js/plate-input.js — 위탁 신청 · 개인 직거래). 빨강은 흰 바탕에서 4.5:1 을 넘는 #c52a42. */
.cc-plate-feedback { font-size: 0.8rem; margin-top: 0.35rem; display: none; word-break: keep-all; }
.cc-plate-feedback.is-valid { display: block; color: var(--green-700, #17704a); }
.cc-plate-feedback.is-invalid { display: block; color: #c52a42; }
/* 틀렸다는 말이 아니라 알려주는 말(영문을 한글로 바꿔 넣었습니다). 빨강·초록과 갈라 회색으로 둔다. */
.cc-plate-feedback.is-note { display: block; color: var(--gray-500); }