/* ==========================================================================
   COLARME Urban Vacation — 공통 스타일
   기준: 00_확정디자인/메인_10.png (PC 1440px 환산)
   색상·글꼴·본문 폭·여백은 아래 :root 토큰에서만 관리한다.
   ========================================================================== */

:root {
  /* 색상 */
  --c-bg: #000000;
  --c-text: #ffffff;
  --c-text-sub: #e6e6e6;
  --c-red: #e8200c;
  --c-yellow: #fad400;
  --c-line: #1a1a1b;
  --c-map-bg: #e8e7e8;
  --c-map-title: #1e1e1e;
  --c-map-sub: #8c8c8c;

  /* 글꼴 */
  --f-display: "Montserrat", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --f-body: "Nunito Sans", "Pretendard", "Apple SD Gothic Neo", sans-serif;
  --f-ko: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --f-youtube: "Oswald", "Arial Narrow", sans-serif;

  /* 글자 크기 체계 — 메인 확정 기준 (PC 1440 값 → 화면 폭에 따라 축소)
     46.4 / 32 / 28 / 22.4 / 18 / 16 / 12 / 10.4 */
  --fs-logo: clamp(28px, 2.5vw, 36px);          /* 헤더 (변경 없음) */
  --fs-logo-sub: clamp(9.5px, 0.8vw, 11.5px);
  --fs-nav: 16px;
  --fs-btn: 12.5px;
  --fs-display: clamp(32px, 3.24vw, 46.4px);    /* 페이지 대제목 (URBAN VACATION 등) */
  --fs-section: clamp(24px, 2.24vw, 32px);      /* 섹션 제목 */
  --fs-hero-ko: clamp(19.2px, 1.92vw, 28px);    /* 한글 헤드카피 · 큰 숫자 */
  --fs-card-title: clamp(18.4px, 1.56vw, 22.4px); /* 카드 제목 */
  --fs-sub-ko: clamp(17px, 1.56vw, 22.4px);     /* 섹션 한글 부제 */
  --fs-sub: clamp(16px, 1.25vw, 18px);          /* 섹션 영문 부제 */
  --fs-body-ko: clamp(15px, 1.25vw, 18px);      /* 한글 본문 */
  --fs-body: 16px;                              /* 영문 설명 본문 */
  --fs-label: 16px;                             /* 영문 대문자 항목명 */
  --fs-placeholder: clamp(12.8px, 1.12vw, 16px);/* 지도·사진 자리 제목 */
  --fs-caption: 12px;                           /* 사진 캡션 */
  --fs-eyebrow: clamp(10.4px, 0.84vw, 12px);    /* 빨간 소제목 */
  --fs-link: 10.4px;                            /* 텍스트 링크 */
  --fs-small: 10.4px;                           /* 저작권 */
  --fs-note: 13px;                              /* 확인 전 안내(회색) */
  --fs-phone: var(--fs-section);
  --fs-num: var(--fs-hero-ko);
  --c-note: #7a7a7a;
  --c-divider: rgba(255, 255, 255, 0.3);
  /* 사진·지도 준비 전 자리 */
  --c-placeholder: #2c2f33;
  --c-placeholder-text: #b4b6ba;

  /* 본문 폭·여백 */
  --container: 1240px;
  --gutter: clamp(20px, 6.9vw, 100px);
  --header-inset: 0px;           /* 헤더·본문·푸터 좌우 기준선 통일 */
  /* 양식 간격 */
  --space-head: clamp(18px, 1.55vw, 22px);  /* 섹션 제목 묶음 → 내용 */
  --info-pad: clamp(20px, 3.3vw, 48px);     /* 정보 표: 칸 안쪽 여백(구분선 양옆) */
  --info-cell-y: clamp(18px, 1.55vw, 22px); /* 정보 표: 행 위아래 여백 */
  --info-row: clamp(24px, 2.2vw, 32px);     /* 서로 다른 안내 항목 사이 */
  --pair-gap: 6px;                          /* 한글·영문 한 묶음 사이 */
  --label-gap: 8px;                         /* 항목명 → 내용 */
  --divider-w: 1px;                         /* 정보 양식 구분선 두께 (색: --c-divider) */
  --radius: 10px;
  --space-section: clamp(80px, 9.6vw, 138px);
  --space-location: clamp(72px, 9.2vw, 133px);
}

/* ---------- Reset ---------- */
*,
*::before,
*::after { box-sizing: border-box; }

html { -webkit-text-size-adjust: 100%; }

body {
  margin: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: var(--f-body);
  font-size: var(--fs-body);
  line-height: 1.7;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  word-break: keep-all;
}

h1, h2, h3, p, ul { margin: 0; }
ul { padding: 0; list-style: none; }
img { display: block; max-width: 100%; }
a { color: inherit; text-decoration: none; }
a:not([href]) { cursor: default; }  /* 링크 미확정 항목 */
button { font: inherit; color: inherit; background: none; border: 0; padding: 0; cursor: pointer; }

:focus-visible { outline: 2px solid var(--c-yellow); outline-offset: 3px; }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

.container {
  width: min(var(--container), 100% - var(--gutter) * 2);
  margin-inline: auto;
}

/* ---------- 공통 요소 ---------- */

/* 빨간 짧은 선 + 빨간 소제목 */
.eyebrow {
  font-family: var(--f-display);
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: 0.14em;
  line-height: 1;
  color: var(--c-red);
  text-transform: uppercase;
}
.eyebrow::before {
  content: "";
  display: block;
  width: 47px;
  height: 3px;
  margin-bottom: 12px;
  background: var(--c-red);
}

.section-title {
  font-family: var(--f-display);
  font-size: var(--fs-section);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.005em;
  text-transform: uppercase;
}

/* 제목 위 빨간 짧은 선 (서브페이지 제목) */
.bar-title::before {
  content: "";
  display: block;
  width: 47px;
  height: 3px;
  margin-bottom: 18px;
  background: var(--c-red);
}

/* 섹션 제목 묶음: 레드 선 + 제목 + 한글·영문 부제 → 내용 간격 통일 */
.sec-head { margin-bottom: var(--space-head); }
.sec-head .sub-ko { margin-top: 12px; }
.sec-head .sub-en,
.sec-head .pending-note { margin-top: var(--pair-gap); }

/* 서브페이지 대제목 (메인 히어로와 같은 크기) */
.page-title {
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 200;
  line-height: 1;
  letter-spacing: -0.01em;
  text-transform: uppercase;
}

/* 제목 아래 국문·영문 부제 */
.sub-ko {
  font-family: var(--f-ko);
  font-size: var(--fs-sub-ko);
  font-weight: 500;
  line-height: 1.3;
  letter-spacing: -0.01em;
}
.sub-en {
  font-family: var(--f-body);
  font-size: var(--fs-sub);
  font-weight: 400;
  line-height: 1.4;
  color: var(--c-text-sub);
}

/* 사진 + 캡션 */
.photo {
  margin: 0;
}
.photo-frame {
  border-radius: var(--radius);
  overflow: hidden;
}
.photo-frame img {
  width: 100%;
  height: 100%;
  object-fit: cover;          /* 비율 유지, 넘치는 부분만 잘라냄 */
}
.photo figcaption {
  margin-top: 12px;
  font-family: var(--f-body);
  font-size: var(--fs-caption);
  font-weight: 600;
  line-height: 1.2;
  letter-spacing: 0.03em;
  text-transform: uppercase;
}

/* 확인 전 정보 자리 표시 (확정 후 삭제) */
.pending-note {
  font-size: var(--fs-note);
  line-height: 1.45;
  color: var(--c-note);
}

/* 안내 항목 공통 (GUEST GUIDE · LOCATION) */
.g-label {
  font-family: var(--f-body);
  font-size: var(--fs-label);
  font-weight: 600;
  line-height: 1.2;
  text-transform: uppercase;
}
.g-ko {
  font-family: var(--f-ko);
  font-size: var(--fs-body-ko);
  font-weight: 400;
  line-height: 1.5;
}
.g-en {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-sub);
}

/* 한 항목 안: 항목명 → 내용, 한글 → 영문은 가깝게 */
.g-label + .g-ko,
.g-label + .loc-sub-ko { margin-top: var(--label-gap); }
.g-ko + .g-en,
.loc-sub-ko + .loc-sub-en { margin-top: var(--pair-gap); }

/* 정보 표: 두 칸 + 가운데 세로선 (열 간격·안쪽 여백·구분선 통일) */
.g-cols {
  display: grid;
  grid-template-columns: 1fr 1fr;
  row-gap: var(--info-row);
  position: relative;
}
.g-cols > * { padding-inline: var(--info-pad); }
.g-cols::before {
  content: "";
  position: absolute;
  top: 0;
  bottom: 0;
  left: 50%;
  width: var(--divider-w);
  background: var(--c-divider);
}

/* 전화번호 링크 */
.contact-phone {
  font-family: var(--f-display);
  font-size: var(--fs-phone);
  font-weight: 300;
  line-height: 1.1;
  letter-spacing: 0.01em;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.contact-phone:hover { color: var(--c-yellow); }

/* 지도 삽입: 기존 지도 영역 크기·모서리 그대로, iframe을 영역에 맞춤 */
.map-embed { padding: 0; overflow: hidden; }
.map-embed iframe {
  display: block;
  width: 100%;
  height: 100%;
  border: 0;
}

/* 텍스트 링크 (빨간 밑줄 + 빨간 화살표) */
.text-link {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: 20px;
  padding-bottom: 10px;
  font-family: var(--f-display);
  font-size: var(--fs-link);
  font-weight: 700;
  letter-spacing: 0.12em;
  line-height: 1;
  text-transform: uppercase;
}
.text-link::after {
  content: "";
  position: absolute;
  left: 0;
  bottom: 0;
  width: 53px;
  height: 2px;
  background: var(--c-red);
  transition: width 0.2s ease;
}
.text-link[href]:hover::after { width: 100%; }
.text-link .arrow {
  width: 27px;
  height: 14px;
  flex: none;
  color: var(--c-red);
}

/* 노란 BOOK NOW 버튼 */
.btn-book {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 133px;
  height: 38px;
  border-radius: 4px;
  background: var(--c-yellow);
  color: #000;
  font-family: var(--f-display);
  font-size: var(--fs-btn);
  font-weight: 700;
  letter-spacing: 0.02em;
  text-transform: uppercase;
  transition: filter 0.2s ease;
}
.btn-book:hover { filter: brightness(1.08); }

/* ---------- Header ---------- */
.site-header {
  position: relative;
  z-index: 20;
  padding-top: calc(clamp(24px, 8.3vw, 120px) * 0.748);   /* 메인 확정 기준 */
}

.header-inner {
  display: flex;
  align-items: center;
  padding-inline: var(--header-inset);
}

.logo {
  display: inline-flex;
  flex-direction: column;
  align-items: flex-end;
  font-family: var(--f-display);
  font-weight: 600;
  line-height: 1;
  color: var(--c-text);
}
.logo-sub {
  font-size: var(--fs-logo-sub);
  letter-spacing: 0.2em;
  margin-right: -0.2em; /* 자간 끝 여백 보정 */
}
.logo-main {
  margin-top: 0.22em;
  font-size: var(--fs-logo);
  letter-spacing: 0.035em;
  margin-right: -0.035em;
}

.gnb {
  margin-left: clamp(40px, 14vw, 201px);
}
.gnb-list {
  display: flex;
  gap: clamp(28px, 4.6vw, 66px);
}
.gnb-list a {
  position: relative;
  display: block;
  padding: 6px 0;
  font-family: var(--f-body);
  font-size: var(--fs-nav);
  font-weight: 400;
  line-height: 1.2;
  text-transform: uppercase;
  white-space: nowrap;
  transition: color 0.2s ease;
}
.gnb-list a::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -4px;
  height: 2px;
  background: var(--c-red);
  transform: scaleX(0);
  transition: transform 0.2s ease;
}
.gnb-list a[aria-current="page"]::after,
.gnb-list a:hover::after { transform: scaleX(1); }

.header-inner .btn-book { margin-left: auto; }

.menu-toggle { display: none; }

/* ---------- Footer ---------- */
.site-footer {
  margin-top: calc(clamp(64px, 7.3vw, 105px) * 0.75);
}
.footer-inner {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--c-line);
  padding: 30px 0 calc(clamp(56px, 6.8vw, 98px) * 0.669);
}
.footer-sns {
  display: flex;
  align-items: center;
  gap: clamp(32px, 4.5vw, 65px);
}
.sns-link {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  min-height: 44px;                 /* 누르기 편한 높이 */
  line-height: 1;
  transition: opacity 0.2s ease;
}
.sns-link[href]:hover { opacity: 0.8; }

.sns-youtube .yt-icon { width: 25.9px; height: 18.2px; }
.sns-youtube .yt-word {
  font-family: var(--f-youtube);
  font-size: 23.1px;
  font-weight: 500;
  letter-spacing: -0.035em;
  transform: scaleY(1.06);
  margin-left: -2.8px;
}
.sns-naver .blog-icon { width: 21px; height: 23.1px; }
.sns-naver .blog-word {
  font-family: var(--f-body);
  font-size: 14px;
  font-weight: 400;
  letter-spacing: 0.01em;
}

.copyright {
  margin-left: auto;
  font-family: var(--f-body);
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--c-text);
}

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 1180px) {
  :root { --header-inset: 0px; }
  .gnb { margin-left: auto; margin-right: clamp(24px, 4vw, 56px); }
  .header-inner .btn-book { margin-left: 0; }
}

@media (max-width: 900px) {
  :root { --fs-nav: 18px; }

  .site-header { padding-block: calc(20px * 0.7375) 20px; }
  .header-inner { gap: 12px; }

  .header-inner .btn-book {
    margin-left: auto;
    width: 112px;
    height: 34px;
    font-size: 11.5px;
  }

  .menu-toggle {
    display: inline-flex;
    flex-direction: column;
    justify-content: center;
    gap: 6px;
    width: 40px;
    height: 40px;
    padding: 0 8px;
  }
  .menu-toggle span {
    display: block;
    height: 2px;
    background: var(--c-text);
    transition: transform 0.25s ease, opacity 0.2s ease;
  }
  .menu-open .menu-toggle span:nth-child(1) { transform: translateY(8px) rotate(45deg); }
  .menu-open .menu-toggle span:nth-child(2) { opacity: 0; }
  .menu-open .menu-toggle span:nth-child(3) { transform: translateY(-8px) rotate(-45deg); }

  .gnb {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    margin: 0;
    background: var(--c-bg);
    border-bottom: 1px solid var(--c-line);
    visibility: hidden;
    opacity: 0;
    transform: translateY(-8px);
    transition: opacity 0.2s ease, transform 0.2s ease, visibility 0s linear 0.2s;
  }
  .menu-open .gnb {
    visibility: visible;
    opacity: 1;
    transform: none;
    transition: opacity 0.2s ease, transform 0.2s ease;
  }
  .gnb-list {
    flex-direction: column;
    gap: 0;
    width: min(var(--container), 100% - var(--gutter) * 2);
    margin-inline: auto;
    padding: 8px 0 24px;
  }
  .gnb-list a { padding: 16px 0; border-top: 1px solid var(--c-line); }
  .gnb-list li:first-child a { border-top: 0; }
  .gnb-list a::after { left: 0; right: auto; width: 40px; bottom: 10px; }

  .footer-inner { flex-wrap: wrap; row-gap: 24px; padding-bottom: calc(clamp(56px, 6.8vw, 98px) * 0.689); }
  .copyright { margin-left: 0; width: 100%; }
}

@media (max-width: 640px) {
  .g-cols { grid-template-columns: 1fr; }
  .g-cols > * { padding-inline: 0; }
  .g-cols::before { display: none; }
}

@media (max-width: 420px) {
  .header-inner .btn-book { width: 96px; font-size: 11px; }
  .sns-youtube .yt-icon { width: 22.4px; height: 15.4px; }
  .sns-youtube .yt-word { font-size: 19.6px; }
  .sns-naver .blog-word { font-size: 11.9px; }
  .sns-link { min-width: 44px; }
  .footer-sns { gap: 28px; }
}

/* ==========================================================================
   모바일·태블릿 최적화 (900px 이하) — PC 디자인에는 적용되지 않음
   ========================================================================== */
/* 주소·요금 등 끊기면 어색한 덩어리는 한 줄로 유지 (모든 화면 공통, 줄바꿈 위치만 제어) */
.nw { white-space: nowrap; }

@media (max-width: 900px) {
  /* 읽기 편한 최소 글자 크기 12px (로고 워드마크 제외) */
  :root {
    --fs-eyebrow: 12px;
    --fs-link: 12px;
    --fs-small: 12px;
    --fs-caption: 12px;
  }
  .header-inner .btn-book { font-size: 12px; }
  .site-footer .sns-naver .blog-word,
  .sns-naver .blog-word { font-size: 12px; }

  /* 클릭 영역 최소 44×44: 보이는 크기는 그대로 두고 투명 터치 영역만 확장 */
  .btn-book,
  .text-link,
  .contact-phone,
  .guide-jump a,
  .acc-body a {
    position: relative;
  }
  .btn-book::before,
  .text-link::before,
  .contact-phone::before,
  .guide-jump a::before,
  .acc-body a::before {
    content: "";
    position: absolute;
    left: 50%;
    top: 50%;
    width: max(100%, 44px);
    height: max(100%, 44px);
    transform: translate(-50%, -50%);
  }
  .menu-toggle { width: 44px; height: 44px; padding: 0 10px; margin-right: -10px; }
}

@media (max-width: 420px) {
  .site-footer .sns-naver .blog-word { font-size: 12px; }
}

/* ==========================================================================
   절제된 모션 — opacity·transform 위주, 레이아웃(크기·위치·페이지 길이) 불변
   ========================================================================== */
/* 1. 페이지 진입: 본문·푸터만 0.35초 페이드 (헤더는 즉시 표시, 로딩 화면 없음) */
@keyframes page-in { from { opacity: 0; } to { opacity: 1; } }
main, .site-footer { animation: page-in 0.35s ease-out both; }

/* 2. 스크롤 등장: JS가 첫 화면 밖의 묶음에만 .reveal을 붙임 (JS 실패 시 아무것도 숨기지 않음) */
.reveal {
  opacity: 0;
  transform: translateY(12px);
  transition: opacity 0.5s ease, transform 0.5s ease;
  transition-delay: var(--reveal-delay, 0s);
}
.reveal.is-in { opacity: 1; transform: none; }
@media (max-width: 900px) {
  .reveal { transform: translateY(6px); transition-duration: 0.35s, 0.35s; }
}

/* 3. 페이지 이동: 지원 브라우저에서만 0.2초 크로스페이드 (미지원 시 일반 이동) */
@view-transition { navigation: auto; }
::view-transition-old(root),
::view-transition-new(root) { animation-duration: 0.2s; }
.site-header { view-transition-name: site-header; }   /* 헤더는 고정, 본문만 전환 */

/* 4. 모바일 터치 반응: 짧고 명확하게 (호버가 없는 기기) */
html { -webkit-tap-highlight-color: transparent; }
@media (hover: none) {
  a[href]:active,
  button:active,
  summary:active { opacity: 0.6; transition: opacity 0s; }
  /* 탭 후 호버 색이 남지 않도록 */
  .btn-book:hover { filter: none; }
  .contact-phone:hover { color: inherit; }
  .sns-link[href]:hover { opacity: 1; }
  .text-link[href]:hover::after { width: 53px; }
}

/* 5. 모바일 메뉴가 열려 있는 동안만 배경 스크롤 잠금 */
html.menu-lock,
html.menu-lock body { overflow: hidden; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
  .reveal { opacity: 1; transform: none; }
  @view-transition { navigation: none; }
}