/* 코리아트래블 — 원본(아임웹) 디자인 재구축
   모든 크기·색·섹션 높이는 라이브에서 getComputedStyle/getBoundingClientRect 로 실측한 값이다.
   → TYPE-SPEC.md
   🔴 원본은 고정 px 다 (vw 2560 에서도 100/60/48px, 섹션 높이 1092/873/532…).
      유동 clamp 를 쓰지 않고, 좁은 화면에서만 미디어쿼리로 줄인다. */

@font-face {
  font-family: "Pretendard";
  /* 🔴 서브셋이다(83KB). 문구를 고치면 tools/subset_font.sh 를 다시 돌려야 한다.
     안 돌리면 새 글자가 □ 로 뜬다 — tools/check_font_coverage.py 가 배포 전에 막는다. */
  src: url("font/Pretendard-min.woff2") format("woff2-variations");
  font-weight: 45 920;
  font-display: swap;
}

:root {
  --blue: #3182f6;            /* 서비스·Premium 아이브로우 */
  --blue-about: #2c91ec;      /* About 아이브로우 (원본이 다르다) */
  --blue-review: #4b91ff;     /* Review 아이브로우 */
  --muted: #8d8d93;           /* 본문 */
  --stat-label: #dddddd;
  --review-title: #212121;
  --review-body: #6c7074;
  --paper: #f8f8f8;
  --black: #000000;
  --wrap: 1180px;             /* 원본 .inside 실측 */
  --sans: "Pretendard", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
          "Malgun Gothic", system-ui, sans-serif;
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  * { animation-duration: .001ms !important; transition-duration: .001ms !important; }
}

body {
  margin: 0;
  background: var(--black);
  color: #fff;
  font-family: var(--sans);
  font-size: 16px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}

img { max-width: 100%; height: auto; display: block; }
picture { display: block; }
a { color: inherit; text-decoration: none; }
h1, h2, h3 { margin: 0; font-weight: 700; letter-spacing: normal; }
p { margin: 0; }

/* 🔴 원본 .inside 1180px 은 «패딩을 뺀 콘텐츠 폭»이다.
   좌우 24px 을 더해야 데스크톱 콘텐츠가 정확히 1180px 이 된다. */
.wrap { width: 100%; max-width: calc(var(--wrap) + 48px); margin: 0 auto; padding: 0 24px; }

:where(a, button):focus-visible { outline: 2px solid var(--blue); outline-offset: 4px; border-radius: 4px; }

/* ---------- 헤더 ---------- */
.site-header {
  position: fixed; inset: 0 0 auto 0; z-index: 50;
  background: transparent;
  transition: background .25s ease, backdrop-filter .25s ease;
}
.site-header.scrolled { background: rgba(0,0,0,.72); backdrop-filter: saturate(150%) blur(10px); }
.site-header .bar { display: flex; align-items: center; justify-content: space-between; gap: 24px; height: 76px; }
.site-header .logo img { width: 186px; }
.site-header nav { display: flex; align-items: center; gap: 32px; }
/* 🔴 .pill 제외 — 이 규칙이 .pill-solid 색을 특이도로 이겨 흰 배경에 흰 글씨가 됐던 자리다. */
.site-header nav a:not(.pill) { font-size: 16px; font-weight: 500; color: rgba(255,255,255,.86); }
.site-header nav a:not(.pill):hover { color: #fff; }

.pill {
  display: inline-flex; align-items: center; justify-content: center;
  border-radius: 9999px; padding: 12px 24px;
  font-size: 16px; font-weight: 400; line-height: 1.43; white-space: nowrap;
  transition: background .2s ease, color .2s ease, border-color .2s ease;
}
.pill-solid { background: #fff; color: #111; font-weight: 600; }
.pill-solid:hover { background: rgba(255,255,255,.88); }
.pill-ghost { border: 1px solid rgba(255,255,255,.7); color: #fff; }
.pill-ghost:hover { background: rgba(255,255,255,.12); }
.pill-ghost.dim { border-color: rgba(255,255,255,.5); font-size: 14px; }

/* ---------- 히어로 (원본 1092px, padding-top 89px) ---------- */
.hero {
  position: relative;
  background-image: image-set(url("img/hero-bg.avif") type("image/avif"),
                            url("img/hero-bg.webp") type("image/webp"),
                            url("img/hero-bg.png")  type("image/png"));
  background-position: center; background-size: cover; background-repeat: no-repeat;
  padding: 89px 0 0;
  text-align: center;
  overflow: hidden;
}
.hero .eyebrow { font-size: 20px; font-weight: 700; line-height: 24px; color: #fff; margin-top: 70px; }
.hero h1 { margin-top: 18px; font-size: 100px; line-height: 100px; font-weight: 700; color: #fff; }
.hero .cta { margin-top: 40px; }
.hero .van { margin: 40px auto 0; width: 954px; max-width: 88%; }

/* ---------- 구분 띠 (원본 53px) ---------- */
.divider { display: block; width: 100%; line-height: 0; }
.divider img { width: 100%; height: auto; }

/* ---------- 공통 섹션 ---------- */
.band { display: flex; align-items: center; }
.band.black { background: var(--black); }
.band.paper { background: var(--paper); }
.band > .wrap { width: 100%; }
.spacer-82 { height: 82px; background: var(--black); }

/* 아이브로우 — 원본은 굵기 700 */
.eyebrow-16 { font-size: 16px; font-weight: 700; line-height: 25.6px; margin-bottom: 18px; }
.eyebrow-18 { font-size: 18px; font-weight: 700; line-height: 21.6px; color: var(--blue); margin-bottom: 16px; }
.eyebrow-16.about   { color: var(--blue-about); }
.eyebrow-16.premium { color: var(--blue); }
.eyebrow-16.rv      { color: var(--blue-review); }

.lead-48 { font-size: 48px; font-weight: 700; line-height: 57.6px; color: #fff; }
.lead-60 { font-size: 60px; font-weight: 700; line-height: 66px; color: #fff; }
.body-16 { font-size: 16px; font-weight: 400; line-height: 25.6px; color: var(--muted); margin-top: 24px; }

/* ---------- About + 통계 (원본 873px) ---------- */
.about-grid { display: grid; gap: 56px; }
@media (min-width: 900px) { .about-grid { grid-template-columns: 1fr 1fr; align-items: start; } }
.stats { display: grid; gap: 40px 16px; }
@media (min-width: 640px) { .stats { grid-template-columns: repeat(3, 1fr); } }
.stats .label { font-size: 20px; font-weight: 700; line-height: 24px; color: var(--stat-label); }
.stats .num {
  font-size: 48px; font-weight: 700; line-height: 57.6px; color: #fff; margin-top: 12px;
  font-variant-numeric: tabular-nums;
  /* 🔴 「10년+」의 + 가 줄바꿈되던 자리. 숫자는 한 덩어리로 읽혀야 한다. */
  white-space: nowrap;
}
.about-cta { margin-top: 48px; }

/* ---------- 서비스 3블록 ----------
   🔴 원본은 섹션 3개가 «맞닿아» 있고 높이가 각각 532/574/634 다. 사이 여백이 없다.
   🔴 이미지는 «고정 크기» — 컬럼 폭에 맞춰 늘어나지 않는다. */
.svc { display: grid; gap: 44px; align-items: center; }
.svc h3, .svc .svc-h { font-size: 26px; font-weight: 700; line-height: 31.2px; color: #fff; }
.svc .shot img { width: auto; height: auto; }
@media (min-width: 900px) {
  .svc { grid-template-columns: 1fr auto; gap: 60px; }
  .svc .shot { justify-self: end; margin-right: 77px; }   /* 원본: 우측 끝에서 77px 안쪽 */
  .svc.rev { grid-template-columns: auto 1fr; }
  .svc.rev .text { order: 2; }
  .svc.rev .shot { order: 1; justify-self: start; margin-right: 0; }
}
.svc-1 .shot img { width: 333px; height: 502px; object-fit: cover; }
.svc-2 .shot img { width: 468px; height: 362px; object-fit: cover; }
.svc-3 .shot img { width: 336px; height: 504px; object-fit: cover; }
@media (min-width: 900px) { .svc-3 .shot { margin-right: 75px; } }  /* 원본 left 1459 */

/* ---------- 후기 ---------- */
.review-head { text-align: center; }
.review-head h1, .review-head h2 { font-size: 60px; font-weight: 700; line-height: 66px; color: #000; }

/* 원본 owl-carousel: 카드 374px, 슬라이드 간격 394px(gap 20px), 3장 노출.
   🔴 실측 결과 자동재생·도트·화살표 «없음» — 드래그만 가능하므로 스크롤 스냅으로 동일 구현. */
.reviews {
  display: flex; gap: 20px;
  overflow-x: auto; scroll-snap-type: x mandatory;
  padding-bottom: 8px;
  scrollbar-width: none; -ms-overflow-style: none;
}
.reviews::-webkit-scrollbar { display: none; }
.review { flex: 0 0 374px; scroll-snap-align: start; }
.review .shot { aspect-ratio: 3 / 4; overflow: hidden; background: #e9e9e9; }
.review .shot img { width: 100%; height: 100%; object-fit: cover; object-position: 50% 50%; }
.review h3, .review .rv-h { margin-top: 20px; font-size: 18px; font-weight: 400; line-height: 28.8px; color: var(--review-title); }
.review p  { margin-top: 6px;  font-size: 14px; font-weight: 400; line-height: 22.4px; color: var(--review-body); }

/* ---------- 푸터 (원본은 후기 섹션 «안»에 있다) ---------- */
.site-footer { color: var(--muted); padding: 64px 0 0; text-align: center; }
.site-footer img { width: 269px; margin: 0 auto 22px; }   /* 원본 실측 269×64 */
.site-footer .biz   { font-size: 16px; font-weight: 400; line-height: 25.6px; }
.site-footer .links { margin-top: 18px; font-size: 16px; line-height: 25.6px; }
.site-footer .links a:hover { color: #212121; }

/* ---------- 스크롤 리빌 ----------
   🔴 기본은 «보임». JS 가 죽거나 관측이 어긋나도 콘텐츠가 사라지면 안 된다. */
.reveal-on .reveal { opacity: 0; transform: translateY(24px); transition: opacity .7s ease, transform .7s ease; }
.reveal-on .reveal.in { opacity: 1; transform: none; }
@media (prefers-reduced-motion: reduce) { .reveal-on .reveal { opacity: 1; transform: none; transition: none; } }

/* ---------- 데스크톱 고정 높이 (원본 실측) ---------- */
@media (min-width: 1250px) {
  .hero       { min-height: 1092px; }
  .h-about    { min-height: 873px; }
  .h-decl     { min-height: 423px; }
  .svc-1      { min-height: 532px; }
  .svc-2      { min-height: 574px; }
  .svc-3      { min-height: 634px; }
  .h-revhead  { min-height: 366px; }
  .h-reviews  { min-height: 924px; }
}

/* ---------- 좁은 화면 ---------- */
@media (max-width: 1249px) {
  .band { padding: 84px 0; }
  .hero { padding-bottom: 84px; }
  .svc .shot { margin-right: 0 !important; justify-self: center !important; }
  .svc-1 .shot img, .svc-2 .shot img, .svc-3 .shot img { width: 100%; max-width: 468px; height: auto; }
}
@media (max-width: 1400px) and (min-width: 1101px) {
  .stats .num { font-size: 42px; line-height: 50px; }   /* nowrap 유지하며 3열에 들어가게 */
}
@media (max-width: 1100px) {
  .hero h1 { font-size: 72px; line-height: 76px; }
  .lead-60, .review-head h2 { font-size: 46px; line-height: 54px; }
  .lead-48 { font-size: 38px; line-height: 46px; }
  .stats .num { font-size: 38px; line-height: 46px; }
  .review { flex: 0 0 min(374px, 78vw); }
}
@media (max-width: 760px) {
  .band { padding: 64px 0; }
  .hero h1 { font-size: 44px; line-height: 48px; }
  .hero .eyebrow { font-size: 17px; line-height: 22px; margin-top: 40px; }
  .lead-60, .review-head h2 { font-size: 34px; line-height: 42px; }
  .lead-48 { font-size: 30px; line-height: 38px; }
  .stats .num { font-size: 32px; line-height: 40px; }
  .stats .label { font-size: 17px; }
  .svc h3 { font-size: 22px; line-height: 28px; }
  .site-header nav a:not(.pill) { display: none; }
  .site-footer .biz, .site-footer .links { font-size: 14px; line-height: 22px; }
  .review { flex: 0 0 84vw; }
}


/* ---------- 하위 페이지 (service / review) ---------- */

/* 접근성: 키보드 사용자를 위한 본문 바로가기 */
.skip-link {
  position: absolute; left: -9999px; top: 0; z-index: 100;
  background: #fff; color: #111; padding: 12px 20px; border-radius: 0 0 8px 0;
  font-weight: 600;
}
.skip-link:focus { left: 0; }

/* 고정 헤더 아래로 내려주는 첫 섹션 */
.page-top { padding-top: 76px; }

/* 밝은 배경 위 텍스트 */
.on-paper      { color: #000 !important; }
.on-paper-body { color: #5f6368 !important; margin-left: auto; margin-right: auto; max-width: 60ch; }

/* 밝은 배경용 버튼 */
.pill-ink { background: #111; color: #fff; font-weight: 600; }
.pill-ink:hover { background: #333; }

/* 하위 페이지 섹션 높이 */
.h-cta  { padding: 96px 0; }
.h-foot { padding: 0 0 88px; }
.h-foot .site-footer { padding-top: 0; }

@media (max-width: 760px) {
  .h-cta { padding: 64px 0; }
  .page-top { padding-top: 64px; }
}


/* ---------- 밝은 배경으로 시작하는 페이지의 헤더 ----------
   🔴 고정 헤더가 투명인데 첫 섹션이 밝으면 흰 메뉴가 안 보인다 (review.html 실측).
   그 페이지는 <body class="hdr-ink"> 로 잉크색 헤더를 쓴다. */
.hdr-ink .site-header { background: rgba(248,248,248,.92); backdrop-filter: saturate(150%) blur(10px); }
.hdr-ink .site-header.scrolled { background: rgba(248,248,248,.96); }
.hdr-ink .site-header nav a:not(.pill) { color: #3c4043; }
.hdr-ink .site-header nav a:not(.pill):hover,
.hdr-ink .site-header nav a[aria-current="page"] { color: #000; }
.hdr-ink .site-header .pill-solid { background: #111; color: #fff; }
.hdr-ink .site-header .pill-solid:hover { background: #333; }
/* 흰 로고 대신 잉크 로고 */
.hdr-ink .site-header .logo .logo-white { display: none; }
.hdr-ink .site-header .logo .logo-ink   { display: block; }
.site-header .logo .logo-ink { display: none; }