/* KUBRODJAPAN Responsive CSS - breakpoint 768px
   v2.2 design tokens (green ramp + washi neutrals) - 2026-07-09 home rebuild */

:root {
  /* neutrals - washi/sumi */
  --sumi:    #1C1B1A;
  --washi:   #FAF8F5;
  --surface: #FFFFFF;
  --stone:   #E5E1DA;

  /* brand green ramp v2.2 */
  --g50:  #f3faf5;
  --g100: #e8f5ec;
  --g200: #bfe3cc;
  --g400: #5cb87e;
  --g600: #0f9d45;
  --g700: #0d7a33;
  --g800: #0b6329;
  --g900: #0a2e1a;

  /* brand surface - g600 opt-in only where no text sits on/in it
     (logo plate, borders, icons, tints). WCAG 1.4.11 non-text: 3.54 pass */
  --brand: var(--g600);

  /* aliases (legacy names kept for compatibility)
     --green carries text (as ink, or as solid bg under white) -> must be AA 4.5.
     g600 on white is 3.54, so --green stays at g700 (5.46). */
  --green: var(--g700);
  --green-dark: var(--g800);
  --green-press: var(--g900);
  --green-light: var(--g100);
  --dark: var(--sumi);
  --text: var(--sumi);
  --gray: #6b6560;
  --ink-2: #4a453e;      /* secondary body ink (9.50 on white) */
  --gray-light: #75716b; /* captions / meta / placeholder (3.43 - non-text AA) */
  --border: var(--stone);

  --line: #06C755;
  --fb: #1877F2;

  --radius: 12px;
  --radius-sm: 8px;
  --radius-lg: 16px;   /* cards/panels; 8/12/16 is the whole scale (+50% and 999px for shapes) */
  --shadow: 0 4px 16px rgba(0,0,0,.08);
  --max-w: 1080px;
  --header-h: 64px;

  --font-th: "Noto Sans Thai", "Sarabun", sans-serif;
  --font-display: "Outfit", sans-serif;

  /* type scale - 2026-08-29. 값이 곧 이름이라 나중 토큰화가 1:1 로 기계 치환된다.
     새로 만드는 곳은 반드시 이 중에서 고른다. 반픽셀(12.5/13.5 ...)은 금지 -
     같은 역할이 0.5px 로 갈려 화면마다 다르게 보이던 것을 이날 341곳 정리했다. */
  --fs-10: 10px;   /* 마이크로 라벨 (TAT 번호 등) */
  --fs-11: 11px;   /* 캡션 - 푸터 링크 */
  --fs-12: 12px;   /* 보조 텍스트 - 메타 */
  --fs-13: 13px;   /* 폼 컨트롤 - 칩 - 브레드크럼 */
  --fs-14: 14px;   /* 부제 - 아웃라인 버튼 */
  --fs-15: 15px;   /* 본문 (body 기준값) */
  --fs-16: 16px;   /* 강조 본문 / 모바일 자유입력 최소값 (iOS 확대 방지) */
  --fs-18: 18px;   /* 카드 제목 */
  --fs-20: 20px;   /* h2 모바일 */
  --fs-22: 22px;   /* h2 */
  --fs-24: 24px;   /* 섹션 제목 - h1 모바일 */
  --fs-28: 28px;   /* h1 */
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { scroll-behavior: smooth; }
body { font-family: var(--font-th); color: var(--text); background: var(--washi); font-size: 15px; line-height: 1.7; }
a { text-decoration: none; color: inherit; }
img { max-width: 100%; display: block; }
ul { list-style: none; }

/* --Header (2-tier: utilbar + mainbar) -- */
.kbj-header {
  background: var(--surface);
  position: sticky;
  top: 0;
  z-index: 200;
  box-shadow: 0 1px 4px rgba(0,0,0,.05);
}

/* utility bar (top row: self-service + secondary, quiet) */
.kbj-utilbar {
  background: var(--g50);
  border-bottom: 1px solid var(--stone);
}
.kbj-utilbar-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
  min-height: 34px;
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 16px;
  font-size: 12px;
}
/* site notice (maintenance etc.): mobile = full-bleed bar above header, desktop = utilbar left */
.kbj-notice-bar { background: #fff7ed; color: #b45309; font-size: 12px; line-height: 1.45; text-align: center; padding: 6px 14px; }
.kbj-notice-util { color: #b45309; margin-right: auto; min-width: 0; }
/* hide the bar on desktop only when the utilbar copy exists - CF-cached pages built
   before the utilbar notice keep their bar instead of losing the notice entirely */
@media (min-width: 769px) { body:has(.kbj-notice-util) .kbj-notice-bar { display: none; } }
.kbj-utilbar a, .kbj-util-lang {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  color: var(--gray);
  transition: color .2s;
  white-space: nowrap;
}
.kbj-utilbar a:hover { color: var(--g700); }
.kbj-utilbar a.active { color: var(--g700); font-weight: 600; }
.kbj-util-lookup { color: var(--text); font-weight: 600; }
.kbj-util-lang { cursor: default; }
.kbj-util-div { width: 1px; height: 14px; background: var(--stone); flex-shrink: 0; }
.kbj-util-soc { padding: 2px; }
.kbj-util-soc img { width: 18px; height: 18px; }

/* main bar (bottom row: logo + product nav, emphasized) */
.kbj-mainbar { border-bottom: 1px solid var(--stone); }
.kbj-header-inner {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0 16px;
  display: flex;
  align-items: center;
  height: var(--header-h);
  gap: 12px;
}
.kbj-logo { flex-shrink: 0; }
.kbj-logo img { height: 44px; width: auto; }

.kbj-nav {
  display: flex;
  flex: 1;
  justify-content: flex-end;
  gap: 4px;
}
.kbj-nav a {
  position: relative;
  padding: 8px 14px;
  font-size: 14px;
  font-weight: 600;
  color: #3a3733;
  transition: color .2s;
  white-space: nowrap;
}
.kbj-nav a:hover { color: var(--g700); }
.kbj-nav a.active { color: var(--g700); }
.kbj-nav a.active::after {
  content: "";
  position: absolute;
  left: 14px; right: 14px; bottom: 2px;
  height: 2px;
  background: var(--g600);
  border-radius: 1px;
}

.kbj-hamburger {
  display: none;
  flex-direction: column;
  justify-content: center;
  gap: 5px;
  background: none;
  border: none;
  cursor: pointer;
  padding: 8px;
  margin-left: auto;
  flex-shrink: 0;
}
.kbj-hamburger span {
  display: block;
  width: 24px;
  height: 2px;
  background: #333;
  border-radius: 2px;
  transition: transform .3s, opacity .3s;
}
.kbj-hamburger.active span:nth-child(1) { transform: translateY(7px) rotate(45deg); }
.kbj-hamburger.active span:nth-child(2) { opacity: 0; }
.kbj-hamburger.active span:nth-child(3) { transform: translateY(-7px) rotate(-45deg); }

/* --Banner Slider -- */
.kbn-wrap { position: relative; width: 100%; overflow: hidden; }
.kbn-track { position: relative; width: 100%; padding-bottom: 73.33%; /* mobile ratio 275/375 */ }
.kbn-slide {
  position: absolute; top: 0; left: 0; width: 100%; height: 100%;
  opacity: 0; transition: opacity .4s; pointer-events: none;
}
.kbn-slide.active { opacity: 1; pointer-events: auto; }
.kbn-slide a { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%; }
.kbn-img { width: 100%; height: 100%; object-fit: cover; }
.kbn-arr {
  position: absolute; top: 50%; transform: translateY(-50%); z-index: 10;
  background: rgba(0,0,0,.35); color: #fff; border: none;
  width: 32px; height: 48px; font-size: 22px; line-height: 1;
  cursor: pointer; padding: 0;
}
.kbn-arr-prev { left: 0; border-radius: 0 4px 4px 0; }
.kbn-arr-next { right: 0; border-radius: 4px 0 0 4px; }
.kbn-counter {
  position: absolute; bottom: 8px; right: 8px;
  background: rgba(0,0,0,.3); color: #fff; font-size: 11px;
  padding: 5px 10px; border-radius: 14px; z-index: 10;
  text-decoration: none;
  min-height: 36px; min-width: 48px;
  display: flex; align-items: center; justify-content: center;
}

/* --Layout Utilities -- */
.kbj-inner { max-width: var(--max-w); margin: 0 auto; padding: 0 16px; }
.kbj-section { padding: 48px 0; }
/* Section title - ONE rule. The page-prefixed selectors are transitional aliases so
   existing markup gets the same values; retire each as its markup adopts the class. */
.kbj-section-title,
.drv-sec h2, .ps-sec h2, .rc1-sec h2, .trn-sec h2,
.tf-section-title, .cp-section-title {
  font-size: 24px; font-weight: 800; color: var(--sumi);
  line-height: 1.35;
  margin: 0 0 20px;
  text-align: center;
}
/* a lead line directly under the title sits closer (.sub is the site-wide convention) */
.kbj-section-title:has(+ .sub), .drv-sec h2:has(+ .sub), .ps-sec h2:has(+ .sub),
.rc1-sec h2:has(+ .sub), .trn-sec h2:has(+ .sub),
.cp-section-title:has(+ .cp-section-sub) { margin-bottom: 6px; }
/* optional lead paragraph under a section title */
.kbj-section-sub {
  font-size: 14px; color: var(--gray);
  line-height: 1.8; text-align: center;
  max-width: 640px; margin: -10px auto 28px;
}

/* --Shared product hero (full-bleed deep-forest) -- */
.kbj-hero {
  background: linear-gradient(160deg, var(--g900) 0%, var(--g800) 100%);
  color: #fff;
  text-align: center;
  padding: clamp(96px, 12vw, 140px) 16px clamp(68px, 10vw, 106px);
}
.kbj-hero-inner { max-width: var(--max-w); margin: 0 auto; }
.kbj-hero h1 {
  font-size: clamp(24px, 4.4vw, 38px);
  font-weight: 800;
  line-height: 1.4;
  margin: 0 0 12px;
}
.kbj-hero-sub {
  font-size: clamp(13px, 1.6vw, 16px);
  color: #eef7f2;
  line-height: 1.8;
  max-width: 720px;
  margin: 0 auto;
}
.kbj-hero-chips {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; justify-content: center; gap: 8px 12px;
}
.kbj-hero-chip {
  font-size: 12px; color: #e6f3ea;
  background: rgba(0,0,0,.42);
  border: 1px solid rgba(255,255,255,.16);
  border-radius: 999px; padding: 6px 14px; white-space: nowrap;
}
/* ── 알약 칩 표준 ────────────────────────────────────────────────────────
   2026-08-30. 같은 역할의 필터 칩이 페이지마다 37/38/39/40/42/42/47px 로
   갈려 있었다(FAQ·패스·전용차량·차량·리뷰·지점·가이드). padding·글자크기·
   굵기·테두리 두께·테두리 색이 전부 제각각이라, 나란히 놓으면 다른 물건으로
   보였다. 두 단계로 고정한다:

     .kbj-chip       1차 필터 — 44px   (padding 9/18 · 14px/700)
     .kbj-chip--sm   2차 필터·정렬 — 38px (padding 7/16 · 13px/600)

   🔴 line-height 를 명시하는 이유: <button> 과 <a> 는 기본 line box 가 달라
   같은 padding·글자에도 2px 어긋난다(실측 42 vs 44). display 도 inline-flex
   로 고정해야 자식 유무에 따라 높이가 흔들리지 않는다.
   🔴 테두리 색은 var(--stone). 예전엔 #e0ddd6 / #e5e1da / #ddd 가 섞여 있었다.
   새 칩은 반드시 이 클래스를 쓸 것. 페이지에서 크기를 다시 정의하지 말고,
   색·아이콘 같은 그 페이지 고유의 것만 덧붙인다. */
.kbj-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 18px; line-height: 24px;
  font-size: var(--fs-14); font-weight: 700; font-family: inherit;
  color: #555; background: #fff;
  border: 1px solid var(--stone); border-radius: 999px;
  text-decoration: none; white-space: nowrap; cursor: pointer;
  transition: background .12s, color .12s, border-color .12s;
}
.kbj-chip:hover { border-color: var(--green); color: var(--green); }
.kbj-chip.on { background: var(--green); border-color: var(--green); color: #fff; }
.kbj-chip--sm {
  padding: 7px 16px; line-height: 22px;
  font-size: var(--fs-13); font-weight: 600;
}
.kbj-chips { display: flex; flex-wrap: wrap; gap: 8px; }

/* ── 배지 표준 ──────────────────────────────────────────────────────────
   2026-08-30. 고객 페이지의 알약 배지 13종이 21~30px 로 흩어져 있었다.
   용도를 실측해보니 두 갈래뿐이었다:

     .kbj-badge          인라인 — 텍스트 흐름 안(차종·지역·할인율). 25px
     .kbj-badge--over    오버레이 — 사진/카드 위에 얹는 라벨. 28px

   오버레이를 키우는 이유는 사진 위에서 같은 크기가 더 작아 보이고 가독성이
   떨어지기 때문. 실제로도 오버레이 쪽이 평균적으로 컸다(21~30, 중앙값 27).

   🔴 색은 표준에 넣지 않는다 -- 배지 색은 의미다. 크림/주황은 「조건 있음」,
   초록은 「혜택」, 진녹은 카드 오버레이. 6가지 조합이 각자 뜻을 담고 있어
   통일 대상이 아니다. 크기·모양만 여기서 정하고 색은 페이지에 남긴다.
   🔴 칩(.kbj-chip)과 헷갈리지 말 것. 배지는 읽는 것, 칩은 누르는 것이다. */
.kbj-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 3px 10px; line-height: 19px;
  font-size: var(--fs-11); font-weight: 700;
  border-radius: 999px; white-space: nowrap;
}
.kbj-badge--over {
  padding: 5px 12px; line-height: 18px;
  font-size: var(--fs-12);
}

.kbj-hero-cta {
  margin-top: 20px;
  display: flex; gap: 10px; justify-content: center; flex-wrap: wrap;
}
/* extra bottom room for pages whose search/launcher card overlaps up into the hero */
.kbj-hero--tall { padding-bottom: clamp(112px, 15vw, 156px); }

/* 히어로 최소 높이 — 내용량 차이로 페이지마다 277~507px(모바일) 로 벌어져 있었다.
   짧은 히어로의 하한만 올린다(내용이 많은 쪽은 그대로 자란다 = 잘릴 위험 0).
   grid + align-content:center 라 남는 공간이 위아래로 고르게 붙는다. */
.kbj-hero {
  display: grid; align-content: center;
  min-height: 440px;
}
@media (max-width: 860px) {
  .kbj-hero { min-height: 360px; }
}
/* photo variant (e.g. shinkansen): page sets inline background image */
/* 사진 히어로 배경 — 페이지는 이미지(와 필요하면 알파)만 넘긴다.
   예전엔 26곳에 인라인 style 로 복붙돼 있어서 railpass 두 곳이 160deg 로 흘렀다.
   기본 알파 .82/.62 는 여기 하나뿐이고, 사진이 밝아 따로 튜닝한 페이지만 --hero-a0/a1 을 준다. */
/* --hero-pos: 사진별 세로 크롭 위치(TB_TrainPass.Img1Focus). 넘기지 않으면 50%,
   즉 종전 center/cover 와 동일하다. 피사체가 위/아래로 치우친 사진만 값을 준다. */
/* 사진 히어로 — 사진 전체를 덮는 오버레이는 두지 않는다.
   08-28: 초록 워시(.82/.62)와 전면 라디얼 스크림이 겹쳐 글자 자리의 사진 투과율이 11%까지
   떨어져 있었다(홈 히어로 평균휘도 .042 = 사실상 초록 사각형). 둘 다 걷어내고
   스크림은 글자 블록 뒤에만 둔다. 사진 평균휘도 .044 -> .187 (약 4배).
   --hero-pos: 사진별 세로 크롭 위치(TB_TrainPass.Img1Focus). 넘기지 않으면 50%. */
.kbj-hero.has-photo {
  background: var(--hero-img) center var(--hero-pos, 50%)/cover;
}
/* inner 가 없는 히어로가 생겨도 글자가 죽지 않도록 남겨두는 바닥값 */
.kbj-hero.has-photo h1,
.kbj-hero.has-photo .kbj-hero-sub { text-shadow: 0 1px 10px rgba(0,0,0,.55); }

/* 글자 블록 뒤에만 깔리는 타원 스크림.
   ellipse closest-side = 알파 0 지점이 정확히 박스 변에 닿는다 -> 잘린 가로선이 생기지 않는다.
   (예전 `58% 64%` 는 ry 가 박스 절반을 넘어 위아래가 잘리면서 25/255 급변이 보였다.)
   실측 h1 최저대비(가장 밝은 사진 기준): 데스크톱 5.43 / 모바일 390px 5.65 — 둘 다 AA(4.5) 이상.
   선택자에 .kbj-hero-inner 를 끼운 건 페이지 <style> 이 `.kbj-hero.has-photo h1` 로
   약한 그림자를 다시 선언해 둔 11곳을 우선순위로 이기기 위해서다. */
/* overflow:hidden - 위 ::before 스크림은 폭이 132% 라 모바일에서 좌우로 57px씩 삐죽어 가로 스크롤을 만들었다(2026-08-29). */
.kbj-hero.has-photo { position: relative; isolation: isolate; overflow: hidden; }
.kbj-hero.has-photo > * { position: relative; z-index: 1; }
.kbj-hero.has-photo .kbj-hero-inner { position: relative; }
.kbj-hero.has-photo .kbj-hero-inner::before {
  content: ""; position: absolute; z-index: -1; pointer-events: none;
  top: -150px; bottom: -150px; left: 50%; width: min(1180px, 132%);
  transform: translateX(-50%);
  background: radial-gradient(ellipse closest-side at 50% 50%,
    rgba(6,30,18,.78) 0%, rgba(6,30,18,.66) 38%, rgba(6,30,18,.32) 68%, rgba(6,30,18,0) 100%);
}
.kbj-hero.has-photo .kbj-hero-inner h1,
.kbj-hero.has-photo .kbj-hero-inner .kbj-hero-sub {
  text-shadow: 0 1px 2px rgba(0,0,0,.9), 0 2px 10px rgba(0,0,0,.8);
}

/* 히어로 티어 2 — 콘텐츠 히어로(--compact): 사진 없이 절반 높이.
   읽으러 오는 페이지(리뷰/프로모션/공지/혜택/가이드/FAQ)용 — 본문 진입을 빠르게. */
.kbj-hero--compact {
  min-height: 0;
  padding: clamp(48px, 7vw, 72px) 16px clamp(40px, 6vw, 60px);
}
.kbj-hero--compact h1 { font-size: clamp(22px, 3.4vw, 30px); }
/* --compact + 사진 = 상품 상세 히어로(패스/공항철도/특별열차 상세).
   랜딩(--tall 440px)보다는 낮게, 그러나 사진이 사진으로 읽힐 만큼은 높게.
   기본 스크림(.82/.62)은 랜딩용 일괄 값이라 여기서는 걷어낸다 —
   상세의 사진은 '그 상품의 사진'이라 안 보이면 걸어놓은 이유가 없다.
   가운데 방사형 스크림(::before)은 그대로라 글자 대비는 유지된다. */
.kbj-hero--compact.has-photo {
  min-height: 300px;
}
@media (max-width: 860px) {
  .kbj-hero--compact.has-photo { min-height: 260px; }
}


/* 히어로 티어 3 — 타이틀 바(--bar): 브레드크럼 + H1 한 줄.
   트랜잭션/상세 페이지(예약조회·예약완료·코스/가이드 상세)용 — 본문이 곧 비주얼. */
.kbj-hero--bar {
  min-height: 0;
  padding: clamp(28px, 4vw, 44px) 16px;
}
.kbj-hero--bar h1 { font-size: clamp(20px, 3vw, 26px); margin: 0; }
.kbj-hero--bar .kbj-hero-sub { font-size: 13px; margin-top: 6px; }
.kbj-crumb { font-size: 12px; color: #cfe4d6; margin: 0 0 8px; }
.kbj-crumb a { color: inherit; text-decoration: none; }
.kbj-crumb a:hover { text-decoration: underline; }

/* 히어로 h1 앞 아이콘 — tabler 모양을 인라인 SVG로 넣는다(웹폰트 860KB 회피, 개당 ~350B).
   currentColor 라 h1 색을 그대로 따라간다. */
.kbj-h1ic { width: 1em; height: 1em; vertical-align: -.11em; margin-right: .32em; flex-shrink: 0; }
/* 본문 인라인 아이콘(LINE 로고 등) — 이모지와 같은 자리에 들어가므로 여백은 주지 않는다. */
.kbj-ic { width: 1em; height: 1em; vertical-align: -.13em; flex-shrink: 0; }

/* ── 푸터 위 여백 ─────────────────────────────────────────────
   페이지마다 0 / 48 / 60 / 64px 로 흩어져 있었다(내용 끝~푸터 1px~92px).
   규칙: **박스로 끝나면 60px 띄우고, 풀블리드 CTA 로 끝나면 푸터에 붙인다.** */
body > main,
.nt-wrap, .pr-wrap, .ck-wrap, .bf-wrap, .ps-wrap, .gd-wrap,
.trn-wrap, .dt-wrap, .fq-wrap, .tg-wrap, .rv-wrap, .drv-wrap { padding-bottom: 60px; }
.rc1-sec:last-of-type { padding-bottom: 60px; }   /* 렌터카는 section 이 최외곽 */
/* 차종(#vcl)·도시(#tcl) 페이지는 ID 선택자로 48px 를 박아둬서 위 규칙이 지고 있었다 */
body > main#vcl, body > main#tcl { padding-bottom: 60px; }
/* 페이지 CSS 가 padding 단축속성으로 하단을 덮어써 지는 곳들 — 한 단계 더 올려 이긴다 */
body > .drv-wrap, body > .tg-wrap, body > .rv-wrap { padding-bottom: 60px; }

/* 마지막 블록이 스스로 들고 있던 여백 — 위 60px 에 더해져 들쭉날쭉해진 원인 */
.drv-wrap > .drv-cta-bottom { margin-bottom: 0; }   /* 페이지 CSS 의 margin:36px 0 을 이기려면 한 단계 더 */
.rv-paging { margin-bottom: 0; }

/* 예외: 풀블리드 CTA(홈 밴드·회사소개 CTA)는 푸터로 이어져야 하므로
   부모의 60px 를 음수 마진으로 정확히 상쇄한다. */
main > .kbh-band:last-child,
main > .cp-cta:last-child { margin-bottom: -60px; }

/* --Service Cards -- */
.kbj-cards { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.kbj-card {
  position: relative; border-radius: var(--radius); overflow: hidden;
  display: block; height: 200px; text-decoration: none;
}

/* --Promo Grid -- */
.kbj-promo-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(280px, 1fr)); gap: 16px; }
.kbj-promo-card {
  background: var(--surface);
  border: 1px solid var(--stone); border-radius: var(--radius);
  overflow: hidden; display: flex; flex-direction: column;
  box-shadow: 0 2px 8px rgba(0,0,0,.04);
  transition: transform .2s, box-shadow .2s;
}
.kbj-promo-card:hover { transform: translateY(-4px); box-shadow: var(--shadow); }
.kbj-promo-img { width: 100%; aspect-ratio: 16/9; object-fit: cover; }
.kbj-promo-body { padding: 14px; flex: 1; display: flex; flex-direction: column; gap: 8px; }
.kbj-promo-title { font-size: 15px; font-weight: 700; color: var(--sumi); line-height: 1.45; }
.kbj-promo-desc { font-size: 13px; color: var(--gray); line-height: 1.7; flex: 1; }
.kbj-promo-cta {
  display: inline-block; margin-top: 8px;
  padding: 7px 16px;
  background: var(--surface); color: var(--g700);
  border: 1.5px solid var(--g200);
  border-radius: 20px; font-size: 13px; font-weight: 700;
  align-self: flex-start;
  transition: background .15s, border-color .15s;
}
.kbj-promo-cta:hover { background: var(--g50); border-color: var(--g400); }

/* outline pill button (secondary CTA, section footers) */
.kbj-btn-outline {
  display: inline-block; padding: 10px 28px;
  border: 1.5px solid var(--g200); border-radius: 22px;
  color: var(--g700); font-weight: 700; font-size: 14px;
  background: var(--surface);
  transition: background .15s, border-color .15s;
}
.kbj-btn-outline:hover { background: var(--g50); border-color: var(--g400); }

/* --Footer (G900 deep forest) -- */
.kbj-footer { background: var(--g900); color: #cfd8d1; font-family: var(--font-th); }
.kbj-footer-main {
  padding: 40px 40px 28px;
  display: grid;
  grid-template-columns: 1.5fr 1fr 1fr;
  gap: 36px;
  max-width: var(--max-w);
  margin: 0 auto;
}
.kbj-brand-name { font-size: 15px; font-weight: bold; color: #fff; margin-bottom: 8px; }
.kbj-brand-desc { font-size: 12px; color: #a8bcae; line-height: 1.9; margin-bottom: 12px; }
.kbj-contact { font-size: 12px; color: #8fa596; line-height: 1.9; margin-bottom: 16px; }
.kbj-contact a { color: var(--g400); text-decoration: underline; text-underline-offset: 2px; display: inline-block; padding: 4px 0; }
.kbj-col-title { font-size: 11px; font-weight: bold; color: var(--g400); text-transform: uppercase; letter-spacing: .08em; margin-bottom: 14px; padding-bottom: 8px; border-bottom: 1px solid rgba(255,255,255,.12); }
.kbj-col ul li { margin-bottom: 9px; }
.kbj-col ul li a { font-size: 13px; color: #cfd8d1; display: block; transition: color .2s; }
.kbj-col ul li a:hover { color: #fff; }
.kbj-region-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 0; }
.kbj-region-grid a { font-size: 12px; color: #a8bcae; padding: 4px 0; display: block; line-height: 1.7; transition: color .2s; }
.kbj-region-grid a:hover { color: #fff; }
.kbj-footer-bottom {
  border-top: 1px solid rgba(255,255,255,.12); padding: 14px 40px;
  display: flex; justify-content: space-between; align-items: center;
  flex-wrap: wrap; gap: 8px;
  max-width: var(--max-w); margin: 0 auto;
}
.kbj-bottom-left, .kbj-bottom-right { display: flex; gap: 16px; align-items: center; flex-wrap: wrap; }
.kbj-bottom-left a, .kbj-bottom-right a { font-size: 11px; color: #8fa596; transition: color .2s; }
.kbj-bottom-left a:hover, .kbj-bottom-right a:hover { color: #fff; }
.kbj-bottom-right p { font-size: 11px; color: #83998b; }
.kbj-badge-row { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.kbj-tat { background: rgba(255,255,255,.06); border: 1px solid rgba(255,255,255,.16); border-radius: 8px; padding: 7px 12px; }
.kbj-tat span { display: block; color: var(--g400); font-size: 10px; letter-spacing: .05em; margin-bottom: 2px; }
.kbj-tat strong { color: #eee; font-size: 12px; }

/* --Tablet nav squeeze -- */
@media (max-width: 1100px) and (min-width: 769px) {
  .kbj-nav a { padding: 8px 10px; font-size: 13px; }
  .kbj-nav a.active::after { left: 10px; right: 10px; }
}

/* --Mobile Overrides -- */
@media (max-width: 768px) {
  .kbj-utilbar-inner { justify-content: flex-start; gap: 12px; height: 32px; }
  .kbj-utilbar .kbj-util-txt, .kbj-util-div, .kbj-notice-util { display: none; }
  .kbj-util-lookup { margin-right: auto; }
  .kbj-nav {
    display: none;
    flex-direction: column;
    position: absolute; top: 100%; left: 0; right: 0;
    background: var(--surface); border-bottom: 2px solid var(--g600);
    padding: 8px 0; gap: 0;
    box-shadow: 0 4px 12px rgba(0,0,0,.1);
    z-index: 190;
  }
  .kbj-nav.open { display: flex; }
  .kbj-nav a { padding: 14px 20px; font-size: 16px; border-bottom: 1px solid #f2efe9; }
  .kbj-nav a.active::after { display: none; }
  .kbj-nav a.active { background: var(--g50); }
  .kbj-hamburger { display: flex; }

  .kbj-cards { grid-template-columns: 1fr; }

  .kbj-section-title,
  .drv-sec h2, .ps-sec h2, .rc1-sec h2, .trn-sec h2,
  .tf-section-title, .cp-section-title { font-size: 20px; }

  .kbj-footer-main { grid-template-columns: 1fr; padding: 24px 16px; gap: 24px; }
  .kbj-footer-bottom { padding: 14px 16px; flex-direction: column; align-items: flex-start; }
  .kbj-section { padding: 28px 0; }
}

/* --PC Banner Override -- */
@media (min-width: 769px) {
  .kbn-wrap { max-width: var(--max-w); margin: 0 auto; border-radius: 16px; }
  .kbn-track { padding-bottom: 0; height: 460px; }
  .kbn-slide a { height: 100%; }
  .kbn-img { width: 100%; height: 460px; object-fit: cover; }
  .kbn-arr { width: 40px; height: 60px; font-size: 28px; }
}


/* ── iOS 입력칸 자동 확대 방지 ─────────────────────────────────────────────
   iOS Safari 는 폰트가 16px 미만인 입력칸에 포커스가 가면 페이지를 확대하고,
   빠져나와도 원래 배율로 돌아오지 않는다. viewport 에 maximum-scale=1 을 박는
   해법은 손님이 화면을 못 키우게 만들어 접근성을 깨므로 쓰지 않는다.
   <select> 는 네이티브 피커가 떠서 확대되지 않으므로 제외한다 — 넣으면 검색바
   드롭다운(.rcs-sel 13px 등)만 커져서 디자인이 바뀐다.
   대상 필드는 페이지 인라인 <style> 에 선언돼 있어 외부 시트가 순서로 밀린다
   → 이 가드에만 !important 를 쓴다.
   2026-08-29 실측으로 걸린 자유입력: 홈 인원수(#kbnPax number 14px),
   예약조회 이메일·전화(email/tel 14px), FAQ 검색(#fqSearch search 14.5px). */
@media (max-width: 760px) {
  textarea, input:not([type]),
  input[type="text"], input[type="search"], input[type="email"], input[type="tel"],
  input[type="url"], input[type="password"], input[type="number"] { font-size: 16px !important; }
}