/* =====================================================================
   common.css  —  사이트 공통 기본
   글자 크기, 글꼴, 색상 변수(:root), 여백 초기화 등 바탕이 되는 설정
   ★ 읽는 순서가 중요합니다 : common.css → header.css → footer.css
      HTML 의 <link> 세 줄 순서를 바꾸지 마세요.
   ===================================================================== */

/* 2026-09-06 — 여기 있던 @import(구글 글꼴) 를 각 HTML 의 <link> 로 옮겼습니다.
   @import 는 «common.css 를 다 받은 뒤에야» 글꼴 요청을 시작해서 첫 화면이 늦어집니다.
   <link> 로 두면 HTML 을 읽는 순간 CSS 와 «동시에» 받기 시작합니다.
   ⚠️ 되돌리려면 이 주석을 지우고 아래 한 줄을 되살리면 됩니다.
   @import url('https://fonts.googleapis.com/css2?family=Gothic+A1:wght@500;700;800;900&display=swap'); */

html{font-size:62.5%;}

body{font-size:1.6rem;}

/* 2026-09-05 — 넓은 화면에서 기준 글자를 10px → 9px 로 줄이던 설정을 뺐습니다.
   그 때문에 데스크톱에서만 모든 rem 글씨가 약 11% 작게 보였습니다.
   (모바일은 원래 10px 이라 달라지지 않습니다)
@media (min-width:861px){ html{font-size:56.25%;} }  ← 삭제 */

@font-face {
  font-family: 'Pretendard';
  src: url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/woff2/PretendardVariable.woff2') format('woff2-variations');
  font-weight: 45 920;
  /* ⚠️ 2026-09-06 — 이 한 줄이 없으면 글꼴을 다 받을 때까지(최대 3초)
     화면의 «모든 글씨가 안 보입니다». 인터넷이 느릴 때 백지처럼 보이던 원인입니다.
     swap 은 «기본 글꼴로 먼저 보여주고, 다 받으면 바꿔치기» 하라는 뜻입니다. 지우지 마세요. */
  font-display: swap;
}

:root{

/* 로고 기반 기본 색상 */
  --basalt: #2D2927;
  --basalt-2: #211E1C;

  /* 보조 색상 */
  --sea: #625D59;
  --sea-light: #D8D3CF;
  --hallasan-mint: #625D59;

  /* 검색·예약·선택 버튼 */
  --tangerine: #C93636;
  --tangerine-deep: #A92D2D;

  /* 배경·글자·구분선 */
  --wave: #FAF9F8;
  --ink: #2D2927;
  --line: #E9E5E2;

  /* 새로 추가할 공통 색상 */
  --surface: #FFFFFF;
  --text-body: #3F3A37;
  --text-muted: #77716D;
  --primary-light: #FBEAEA;

  /* 달력에서 «고를 수 없는 날짜»처럼 흐리게 보여줄 글자 */
  --text-disabled: #BDB7B3;

  font-family: 'Pretendard', -apple-system, sans-serif;
  
}

h1, h2, h3, .hero-slide h1, .route-title h2, .page-hero h1, .car-group-head h2{
  font-family:'Gothic A1', 'Pretendard', sans-serif; letter-spacing:-0.025em;
}

*{box-sizing:border-box; margin:0; padding:0;}

/* ── 안내 페이지 상단 제목 띠 (2026-09-06 통합) ─────────────────────
   ★ page-hero 공통 규칙 : 보유차종 · 보험안내 · 이용안내 · 고객센터 ·
      약관 · 예약확인 화면이 모두 이 한 곳을 씁니다.
      예전에는 carlist / info / insurance / legal / notice / payment 6개 파일에
      같은 규칙이 흩어져 있어 페이지마다 높이가 30~64px 로 제각각이었습니다.
      높이를 바꾸려면 «여기 한 곳만» 고치세요.
   ⚠️ 예약·결제 진행 화면(Reserve_*, Kbcard_*)은 이 띠를 쓰지 않습니다.
   ────────────────────────────────────────────────────────────── */
.page-hero{
  background:#FBF1EF;
  color:var(--ink); text-align:center; padding:36px 24px 34px;
}
.page-hero h1{font-size:3.2rem; font-weight:800; letter-spacing:-0.02em;}
.page-hero .rule{width:40px; height:3px; background:var(--tangerine); margin:12px auto;}
.page-hero p{color:#555250; font-size:1.5rem; font-weight:500;}
@media (max-width:860px){ .page-hero h1{font-size:2.6rem;} }


body{background:var(--wave); color:var(--ink); line-height:1.5; overflow-x:hidden;}

img{display:block; max-width:100%;}

a{color:inherit; text-decoration:none;}

button{font-family:inherit; cursor:pointer;}

.wrap{max-width:1180px; margin:0 auto; padding:0 24px;}

/* ── 터치 반응 (모바일에서 버튼이 즉시 눌리는 느낌) ── */
html{ -webkit-tap-highlight-color: transparent; }

button, .chip, .type-chip, .cal-day, .cal-side-btn,
.search-btn, .reset-btn, .plan-btn, .car-btn, .car-select-btn, .cars-cta-btn, .more-btn,
.date-modal-apply, .date-modal-close, .hero-arrow,
.qi, .sec-link, .plan-tab, .it-tab, .agree-view,
.copy-chip, .loc-btn, .lg-btn, .mf-btn, .btn-next, .btn-back,
.car-period-btn, .plan-card, .car-card, .field .input,
.nav-dropdown a, .mega-col a, .foot-links a{
  touch-action: manipulation;
}

button:not(:disabled):active,
.chip:active, .type-chip:active,
.cal-day:not(:disabled):not(.blank):active, .cal-side-btn:active,
.search-btn:active, .reset-btn:active, .plan-btn:active, .car-btn:active,
.car-select-btn:active, .cars-cta-btn:active, .more-btn:active,
.date-modal-apply:active, .date-modal-close:active, .hero-arrow:active,
.sec-link:active, .plan-tab:active, .it-tab:active, .agree-view:active,
.copy-chip:active, .loc-btn:active, .lg-btn:active, .mf-btn:active,
.btn-next:active, .btn-back:active, .car-period-btn:active,
.field .input:active,
.nav-dropdown a:active, .mega-col a:active, .foot-links a:active{
  transform: scale(.96) !important;
  filter: brightness(.93) !important;
  transition: transform .06s ease, filter .06s ease !important;
}

.qi:active, .plan-card:active, .car-card:active{
  filter: brightness(.96) !important;
  transition: filter .06s ease !important;
}