/* 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;
  --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); }
.cc-nav-menu { display: flex; gap: 2.25rem; margin: 0; padding: 0; list-style: none; }
.cc-nav-menu > li { position: relative; }
.cc-nav-menu .nav-link-plain { font-weight: 600; font-size: 0.98rem; color: var(--charcoal); position: relative; padding: 0.35rem 0.1rem; display: inline-block; white-space: nowrap; }
.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); }
.cc-header-right { display: flex; align-items: center; gap: 1.1rem; font-size: 0.9rem; }
.cc-header-right a, .cc-header-right button { white-space: nowrap; }
.cc-tel-link { font-weight: 700; color: var(--green-900); }
.cc-tel-link i { color: var(--green-600); margin-right: 0.3rem; }
.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; }
.cc-navbar-toggler:focus { outline: none; box-shadow: none; }
.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); }

/* 헤더 한 줄 글자 밑선 맞춤.
   로고(Sora 1.5rem)·메뉴(0.98rem)·로그인/회원가입(0.9rem)은 글자 크기가 제각각이라
   박스를 가운데 맞추면(.align-items-center) 글자 밑선이 최대 2.6px까지 어긋난다.
   크기가 다른 글자는 가운데를 맞춰도 밑선이 맞지 않기 때문에 밑선 기준으로 세운다.
   글자가 없는 아이콘 버튼(햄버거·전화)은 맞출 밑선이 없어 가운데 정렬로 되돌린다. */
@media (min-width: 768px) {
  .cc-header .navbar > .container { align-items: baseline !important; }
  .cc-header-right { align-items: baseline; }
  .cc-header .cc-navbar-toggler,
  .cc-header-right .cc-tel-link { align-self: center; }
}

/* ===== 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; }

/* ===== 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; }
.cc-float-kakao { background: #FEE500; color: #3C1E1E; }
.cc-float-kakao i { color: #3C1E1E; }
.cc-float-kakao:hover { background: #FDD800; }
.cc-float-kakao:hover i { color: #3C1E1E; }

/* ===== Responsive ===== */
/* 상단 메뉴(내비게이션+로그인영역+전체메뉴 버튼)가 한 줄에 다 안 들어가는 좁은 데스크톱
   창 폭(992~1299px)에서도 겹치지 않도록, 모바일 햄버거 메뉴로 전환되는 기준을 1300px로 올림 */
@media (max-width: 1299.98px) {
  .cc-nav-menu { display: none; }
  .cc-navbar-toggler.d-lg-none { display: inline-flex !important; }
  .cc-header-right .btn-cc-price.d-lg-inline-flex { display: none !important; }
}
@media (min-width: 1300px) {
  .cc-navbar-toggler.d-lg-none { display: none !important; }
}
/* 위 1300px 기준은 로그아웃 상태(로그인·회원가입만 있는 오른쪽 영역)를 기준으로 잡은 값이다.
   관리자·딜러·파트너사로 로그인하면 오른쪽에 "관리자 센터" 링크와 이름이 더 붙어
   오른쪽 영역이 약 130px 넓어지고, 그만큼 메뉴 자리가 좁아져 "내차 찾기"가
   "내차 / 찾기 ▾"로 두 줄이 되면서 화살표만 아래로 떨어졌다.
   1400px 미만에서는 전체메뉴 버튼을 접어 메뉴가 한 줄로 들어갈 자리를 만든다.
   전체메뉴 버튼은 1300px 미만에서 이미 접히고 있고, 같은 항목을 상단 메뉴에서 볼 수 있다. */
@media (max-width: 1399.98px) {
  body.cc-has-console .cc-header-right .btn-cc-price.d-lg-inline-flex { display: none !important; }
  /* 이름이 긴 계정(예: 사이트 관리자 테스트님)까지 여유를 두려고 간격도 함께 좁힌다.
     줄바꿈을 막아둔 상태라 자리가 모자라면 두 줄이 되는 대신 오른쪽 영역과 겹치기 때문이다. */
  body.cc-has-console .cc-nav-menu { gap: 1.6rem; }
  body.cc-has-console .cc-header-right { gap: 0.75rem; }
}
@media (max-width: 767.98px) { .cc-float-menu { display: none; } }
a:focus-visible, button:focus-visible { outline: 2px solid var(--green-600); outline-offset: 2px; }

/* ===========================================================
   전체메뉴 패널 (헤더 우측 버튼)
   =========================================================== */
.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; }