@charset "utf-8";
/* ==========================================================================
   서울가든호텔 랜딩 페이지 시안 — 스타일
   설계서 §4(시각 방향) · §5(화면 구성) 를 그대로 옮긴 것입니다.

   지켜야 하는 것 (검사기 항목과 직결)
   - 항목 7(가로 넘침): 100vw 를 한 번도 쓰지 않습니다. 전체 폭은 100% 또는
     left:0/right:0 으로 냅니다. 모든 격자 칸은 minmax(0,…) 로 두어 내용이
     칸을 밀어내지 못하게 합니다. html,body 에 overflow-x:hidden 을 걸어
     덮지 않습니다(원인을 없앱니다).
   - 항목 9(상단 바): scrollY=0 에서 배경 알파가 정확히 0 이어야 하므로
     transparent 가 아니라 rgba(14,26,43,0) 으로 적습니다.
   - 항목 12(대비): 첫 화면 덮는 층은 설계서 값 그대로(.25 → .65). 옅게 하면
     실측 대비가 떨어져 바로 불합격입니다.
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 변수
   -------------------------------------------------------------------------- */
:root{
  /* 색 — 전역 제약 3(이름·값 그대로) */
  --navy:#0E1A2B;
  --navy-2:#16263D;
  --gold:#C9A96E;
  --gold-2:#E2C98F;
  --ivory:#F6F2EA;
  --white:#FFFFFF;
  --ink:#1C1C1C;
  --muted:#6B6F76;
  --line:rgba(255,255,255,.18);
  --line-dark:rgba(14,26,43,.12);

  /* 글꼴 — 전역 제약 4 · 설계서 §4.2
     --serif : 영문만 들어가는 제목(첫 화면 제목 · 객실 4종 영문명)
     --title : 언어가 바뀌는 구역 제목. 설계서 §4.2 는 「영문 제목 = Cormorant
               Garamond · 한국어 = Noto Sans KR」이므로, 라틴 글자는 Cormorant
               (없으면 Georgia)로, 한글은 Noto Sans KR 로 떨어지게 한 벌로 묶었다.
               Cormorant·Georgia·Times 에는 한글 글자꼴이 없어 브라우저가 글자마다
               다음 후보로 내려간다. 이 한 줄이 없으면 한글 제목이 PC 마다 다른
               바탕체로 떠서(집 PC 실측: 바탕) 시안이 기계마다 달라진다. */
  --serif:'Cormorant Garamond', Georgia, 'Times New Roman', serif;
  --title:'Cormorant Garamond', Georgia, 'Times New Roman',
          'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;
  --sans:'Noto Sans KR', 'Malgun Gothic', 'Apple SD Gothic Neo', sans-serif;

  /* 크기·간격 — 전역 제약 5 */
  --gutter:24px;      /* 좌우 여백 (모바일 16px) */
  --sec-pad:120px;    /* 구역 세로 여백 (태블릿 80 · 모바일 64) */
  --gap-lg:64px;
  --gap-md:48px;

  /* 모바일 메뉴 패널(≤991)에서 각 덩이가 놓이는 자리.
     DOM 순서(hotelBtn → 언어 → 메뉴)와 같은 순서로 위에서 아래로 내려간다.
     --panel-hotelmenu-h 는 Our Hotels 드롭다운이 열렸을 때 아래를 밀어내는 양
     (실측 드롭다운 높이 94px + 여유). 밀어내지 않으면 드롭다운이 KOR|ENG 와
     메뉴 첫 줄을 덮는다. */
  --panel-hotel-top:84px;
  --panel-lang-top:140px;
  --panel-menu-top:198px;
  --panel-hotelmenu-h:108px;

  /* 다이닝 큰 사진 비율.
     dining_01.jpg 원본은 1200x570(약 2.1:1)이라 4/5 틀에 넣으면 좌우가 크게
     잘립니다. 설계서 §5.5 가 4:5 를 지정했으므로 기본값은 4/5 이고, Task 8 의
     눈 검사에서 어색하면 이 한 줄만 3/4 로 바꾸면 됩니다. */
  --dining-hero-ratio:4 / 5;
}

/* --------------------------------------------------------------------------
   2. 바탕 정리
   -------------------------------------------------------------------------- */
*,*::before,*::after{ box-sizing:border-box; }

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

body{
  margin:0;
  font-family:var(--sans);
  font-size:16px;
  font-weight:400;
  line-height:1.8;            /* 고정값 — 대체 글꼴로 떠도 줄이 밀리지 않게 */
  color:var(--ink);
  background:var(--white);
  overflow-wrap:break-word;
}

h1,h2,h3,p,ul,figure{ margin:0; }
ul{ padding:0; list-style:none; }
img{ display:block; max-width:100%; }
a{ color:inherit; }
button{ font-family:inherit; }

/* hidden 속성은 어떤 display 규칙보다 우선한다.
   (#hotelMenu · #panelNl · #heroVideo 가 이 규칙에 기댄다 — 항목 10·14) */
[hidden]{ display:none !important; }

:focus-visible{ outline:2px solid var(--gold); outline-offset:2px; }
/* 금색 테두리는 흰 배경 위에서 1.93:1 이라 보이지 않는다.
   밝은 구역(흰·아이보리 배경과 흰 검색 카드)에서는 남색으로 바꾼다. */
.section--ivory :focus-visible,
.section--white :focus-visible,
.events :focus-visible,
.search__card :focus-visible{ outline-color:var(--navy); }

/* --------------------------------------------------------------------------
   3. 공통 조각
   -------------------------------------------------------------------------- */
.container{
  width:min(1200px, calc(100% - var(--gutter) * 2));
  margin-inline:auto;
}

.section{ padding-block:var(--sec-pad); }
.section--ivory{ background:var(--ivory); }
.section--white{ background:var(--white); }
.section--navy{ background:var(--navy); color:var(--ivory); }

/* 작은 라벨 — 12px · 자간 .18em · 영문 대문자 (§4.3) */
.label{
  font-size:12px;
  font-weight:500;
  letter-spacing:.18em;
  line-height:1.6;
  text-transform:uppercase;
  color:var(--muted);
}
.label--gold{ color:var(--gold); }

/* 구역 제목 — 40 / 32 / 28px */
.sectitle{
  margin-top:18px;
  font-family:var(--title);
  font-size:40px;
  font-weight:500;
  line-height:1.3;
  letter-spacing:.005em;
  color:var(--ink);
}
.sectitle--light{ color:var(--white); }

.bodytext{
  margin-top:20px;
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
}
.bodytext--light{ color:var(--ivory); }

.secintro{
  margin-top:14px;
  font-size:16px;
  line-height:1.8;
  color:var(--muted);
}

/* 「전체 보기 →」 · 「객실 보기 →」 — 동작 없는 표시용(설계서 §5.3·§5.4).
   C-2 로 button → span 이 되었다(키보드 막다른 길 제거).
   커서는 pointer 를 유지한다 — 설계서 §6.4 가 「동작 없는 메뉴 7개도 커서는
   pointer 유지, hover 시 얇은 금색 선만」이라고 못박아, 이 시안에서 「눌릴 것
   같지만 동작 없음」의 표준 표현이 pointer + hover 이기 때문이다(N-3 판정). */
.morelink{
  display:inline-flex;
  align-items:center;
  gap:8px;
  padding:6px 0;
  border-bottom:1px solid var(--line-dark);
  font-size:14px;
  letter-spacing:.04em;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.morelink::after{ content:"\2192"; font-size:15px; line-height:1; }
.morelink:hover{ border-bottom-color:var(--gold); color:var(--navy); }

/* 단추는 금색 한 종류만 (§4.4) */
.btn{
  display:inline-flex;
  align-items:center;
  justify-content:center;
  height:44px;
  padding:0 22px;
  border:0;
  border-radius:4px;
  font-size:14px;
  font-weight:500;
  letter-spacing:.04em;
  line-height:1;
  text-decoration:none;
  white-space:nowrap;
  cursor:pointer;
  transition:background-color .2s ease;
}
.btn--gold{ background:var(--gold); color:var(--navy); }   /* 대비 7.81 */
.btn--gold:hover{ background:var(--gold-2); }
.btn--block{ width:100%; }

/* --------------------------------------------------------------------------
   4. 상단 바 (§5.1)
   -------------------------------------------------------------------------- */
#siteHeader{
  position:fixed;
  inset:0 0 auto;            /* top:0 · right:0 · left:0 — 100vw 를 쓰지 않는다 */
  z-index:100;
  background:rgba(14,26,43,0);        /* 알파 정확히 0 (항목 9) */
  border-bottom:1px solid var(--line);
  transition:background .25s ease;
}
#siteHeader.is-solid{ background:rgba(14,26,43,.96); }

.header__bar{ position:relative; z-index:100; }

.header__bar-in{
  height:72px;
  display:grid;
  grid-template-columns:minmax(0,1fr) auto minmax(0,1fr);
  align-items:center;
  gap:16px;
}

.header__left{ justify-self:start; display:flex; align-items:center; gap:14px; min-width:0; }
.header__logo{ justify-self:center; }
.header__logo img{ height:40px; width:auto; }
.header__right{ justify-self:end; display:flex; align-items:center; gap:22px; min-width:0; }

.header__reserve{ height:38px; padding:0 20px; font-size:13px; }

/* 햄버거 — ≥992 에서는 숨김 */
.navtoggle{
  display:none;
  flex-direction:column;
  justify-content:center;
  gap:5px;
  width:36px;
  height:36px;
  padding:0;
  border:0;
  background:none;
  cursor:pointer;
}
.navtoggle__bar{
  display:block;
  width:22px;
  height:1px;
  background:var(--white);
  transition:transform .22s ease, opacity .22s ease;
}

/* Our Hotels */
.hotelsel{ position:relative; }
.hotelsel__btn{
  display:inline-flex;
  align-items:center;
  gap:9px;
  padding:6px 2px;
  border:0;
  background:none;
  color:var(--white);
  cursor:pointer;
}
.hotelsel__ttl{             /* 작은 라벨 규격(전역 제약 5) 그대로 */
  font-size:12px;
  letter-spacing:.18em;
  text-transform:uppercase;
  color:var(--gold);
}
.hotelsel__name{ font-size:14px; letter-spacing:.02em; white-space:nowrap; }
.hotelsel__caret{
  width:7px; height:7px;
  border-right:1px solid currentColor;
  border-bottom:1px solid currentColor;
  transform:translateY(-2px) rotate(45deg);
}
.hotelsel__menu{
  position:absolute;
  top:calc(100% + 12px);
  left:0;
  min-width:190px;
  padding:6px;
  background:var(--navy);
  border:1px solid var(--line);
  z-index:5;
}
.hotel__item{
  display:flex;
  align-items:center;
  width:100%;
  padding:10px 12px;
  border:0;
  background:none;
  font-size:14px;
  text-align:left;
  color:var(--ivory);
  cursor:pointer;
}
.hotel__item::before{
  content:"\2713";
  width:18px;
  font-size:12px;
  color:transparent;
}
.hotel__item.is-current::before{ color:var(--gold); }
.hotel__item:hover{ background:rgba(255,255,255,.07); }

/* KOR | ENG */
.lang{ display:flex; align-items:center; gap:8px; }
.lang__btn{
  padding:4px 2px;
  border:0;
  background:none;
  font-size:12px;
  font-weight:500;
  letter-spacing:.1em;
  color:rgba(255,255,255,.62);
  cursor:pointer;
  transition:color .2s ease;
}
.lang__btn[aria-pressed="true"]{ color:var(--gold); }
.lang__btn:hover{ color:var(--white); }
.lang__sep{ font-size:11px; color:rgba(255,255,255,.3); }

/* 메뉴 8개 — 원문 표기 그대로(대문자 변환 없음) */
.gnb__list{
  display:flex;
  flex-wrap:wrap;                /* 좁아져도 가로로 넘치지 않고 접힌다 */
  justify-content:center;
  align-items:center;
  gap:4px 30px;
  min-height:48px;
  padding-bottom:2px;
}
.gnb__link{
  position:relative;
  display:inline-block;
  padding:5px 0;
  font-size:13px;
  letter-spacing:.12em;
  line-height:1.4;
  color:rgba(255,255,255,.86);
  text-decoration:none;
  white-space:nowrap;
}
.gnb__link::after{
  content:"";
  position:absolute;
  left:0; right:0; bottom:0;
  height:1px;
  background:var(--gold);
  transform:scaleX(0);
  transform-origin:left;
  transition:transform .22s ease;
}
.gnb__link:hover{ color:var(--white); }
.gnb__link:hover::after{ transform:scaleX(1); }

/* --------------------------------------------------------------------------
   5. 첫 화면 (§5.2)
   -------------------------------------------------------------------------- */
.hero{
  position:relative;
  height:100vh;
  min-height:640px;
  display:flex;
  align-items:center;
  justify-content:center;
  overflow:hidden;
  background:var(--navy);
}
.hero__media{ position:absolute; inset:0; }
.hero__img,
.hero__video{
  position:absolute;
  inset:0;
  width:100%;
  height:100%;
  object-fit:cover;
}
/* 동영상은 재생이 실제로 시작될 때만 서서히 나타난다(main.js 6.7 이 is-playing 을 붙임).
   그 전·재생이 막혔을 때는 같은 16:9 구도의 사진이 보인다. */
.hero__video{
  opacity:0;
  transition:opacity .8s ease;
}
.hero__video.is-playing{ opacity:1; }
@media (prefers-reduced-motion: reduce){
  .hero__video{ display:none; }
}
.hero__overlay{
  position:absolute;
  inset:0;
  /* 설계서 값 그대로 — 옅게 하면 항목 12(대비 실측)가 바로 떨어진다 */
  background:linear-gradient(rgba(14,26,43,.25), rgba(14,26,43,.65));
}
/* 상단 바 뒤를 어둡게(2026-09-24 동영상을 넣으면서). 밝은 실내 장면(흰 천장·커튼)에서 투명 상단 바의
   글자 대비가 1.13~1.93 까지 떨어졌고(verify/header_contrast.py), 사진도 동영상과 같은 16:9 구도로 바꾸면서
   호텔 꼭대기의 불 켜진 창이 상단 바 바로 뒤로 올라와 사진 상태에서도 2.73 이었다 → 늘 켠다.
   금색 글자(Our Hotels·KOR)가 있는 윗줄은 진하게, 메뉴 줄은 그보다 옅게, 아래로 갈수록 0. */
.hero__overlay::after{
  content:"";
  position:absolute;
  inset:0;
  background:linear-gradient(to bottom,
              rgba(14,26,43,.84) 0,
              rgba(14,26,43,.8) 70px,
              rgba(14,26,43,.62) 130px,
              rgba(14,26,43,0) 320px);
}
/* 글 덩이 뒤에만 덧씌우는 국소 스크림.
   위 덮는 층(.25→.65)은 설계서 §5.2 값이라 손대지 않는다. 문제는 그 층이
   아니라 "12px 금색 눈썹글이 하필 켜진 금색 창문 위에 놓인 것"이었다
   — 글자가 실제로 덮는 자리만 12x3 타일로 재니 대비가 2.99(합격선 4.5)로,
   4배 확대하면 가운뎃점이 사라졌다. 사진 전체를 어둡게 하지 않고 글이 놓인
   타원 안에서만 남색을 덧씌워 푼다. 바깥으로 갈수록 0 이라 테두리가 안 보인다. */
.hero__scrim{
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 46% 27% at 50% 47%,
              rgba(14,26,43,.72) 0%,
              rgba(14,26,43,.66) 55%,
              rgba(14,26,43,0) 100%);
}
/* 동영상이 재생 중일 때만 스크림을 가로로 넓힌다(2026-09-24). 동영상의 실내 장면(흰 커튼·창가)이
   제목 줄 양 끝 뒤로 오면 제목 대비가 4.10 까지 떨어졌다(검사 항목 12 · 15.0초 프리미어 침실).
   사진 상태는 그대로 두고, 동영상이 나타날 때 같이 서서히 넓어지도록 겹 한 장을 투명도로 켠다. */
.hero__scrim::after{
  content:"";
  position:absolute;
  inset:0;
  background:radial-gradient(ellipse 64% 32% at 50% 47%,
              rgba(14,26,43,.5) 0%,
              rgba(14,26,43,.42) 60%,
              rgba(14,26,43,0) 100%);
  opacity:0;
  transition:opacity .8s ease;
}
.hero__video.is-playing ~ .hero__scrim::after{ opacity:1; }

.hero__inner{
  position:relative;
  z-index:2;
  text-align:center;
  color:var(--white);
}
/* 자간 .18em 은 영문 대문자 라벨(PACKAGES & OFFERS 등)에 맞춘 값이다.
   이 줄만 사전 문구(한글/영문)라 한글에서 지나치게 벌어져 .13em 으로 줄인다. */
.hero__eyebrow{ color:var(--gold-2); letter-spacing:.13em; }
.hero__title{
  margin-top:26px;
  font-family:var(--serif);
  font-size:64px;
  font-weight:400;
  line-height:1.14;
  letter-spacing:.012em;
  color:var(--white);
}
.hero__sub{
  margin-top:22px;
  font-size:17px;
  font-weight:300;
  line-height:1.7;
  color:var(--ivory);
}
.hero__rule{
  display:block;
  width:48px;
  height:1px;
  margin:38px auto 0;
  background:var(--gold);
}

.hero__scrollwrap{
  position:absolute;
  left:0; right:0; bottom:30px;
  z-index:2;
  display:flex;
  flex-direction:column;
  align-items:center;
  gap:12px;
}
.hero__scroll{
  font-size:11px;
  letter-spacing:.2em;
  text-transform:uppercase;
  color:rgba(255,255,255,.78);
}
.hero__scroll-line{
  width:1px;
  height:46px;
  background:linear-gradient(rgba(201,169,110,0), var(--gold));
  animation:scrollhint 2.6s ease-in-out infinite;
}
@keyframes scrollhint{
  0%,100%{ transform:translateY(-6px); opacity:.45; }
  50%    { transform:translateY(4px);  opacity:1; }
}

/* --------------------------------------------------------------------------
   6. Packages & Offers (§5.3)
   -------------------------------------------------------------------------- */
.sechead{
  display:flex;
  align-items:flex-end;
  justify-content:space-between;
  gap:32px;
}
.sechead__main{ max-width:640px; }

.pkg-grid{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:32px;
  margin-top:56px;
}
.pkg-card{
  background:var(--white);
  border:1px solid var(--line-dark);
  overflow:hidden;
}
.pkg-card__media{ aspect-ratio:4 / 3; overflow:hidden; }
.pkg-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.pkg-card:hover .pkg-card__media img{ transform:scale(1.04); }
.pkg-card__body{ padding:26px 26px 30px; }
.pkg-card__name{
  font-size:20px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
}
.pkg-card__desc{
  margin-top:10px;
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
}
.pkg-card__price{
  margin-top:22px;
  padding-top:18px;
  border-top:1px solid var(--line-dark);
  font-size:16px;
  font-weight:500;
  line-height:1.5;
  color:var(--ink);
}
.pkg-card__period{
  margin-top:4px;
  font-size:12px;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   7. Rooms & Suites (§5.4)
   -------------------------------------------------------------------------- */
.rooms__top{
  display:grid;
  grid-template-columns:minmax(0,1.12fr) minmax(0,.88fr);
  gap:var(--gap-lg);
  align-items:center;
}
.rooms__media{ aspect-ratio:16 / 10; overflow:hidden; }
.rooms__media img{ width:100%; height:100%; object-fit:cover; }
.rooms__text .morelink{ margin-top:30px; }

.room-grid{
  display:grid;
  grid-template-columns:repeat(4, minmax(0,1fr));
  gap:28px;
  margin-top:78px;
}
.room-card__media{ aspect-ratio:3 / 2; overflow:hidden; margin-bottom:18px; }
.room-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.room-card:hover .room-card__media img{ transform:scale(1.04); }
.room-card__name{
  font-family:var(--serif);
  font-size:21px;
  font-weight:500;
  line-height:1.4;
  letter-spacing:.01em;
  color:var(--ink);
}
.room-card__desc{
  margin-top:7px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   8. Dining (§5.5)
   -------------------------------------------------------------------------- */
/* 두 칸의 윗선을 맞춘다(center 로 두면 짧은 글 칸이 위아래로 각 155px 씩 뜬
   채 떠 있어 이 구역만 텅 비어 보였다). 사진 칸 폭도 사진 폭에 맞춰 두어
   좌우로 각 54px 씩 비던 것을 없앴다. */
.dining__grid{
  display:grid;
  grid-template-columns:minmax(0,1fr) minmax(0,460px);
  gap:var(--gap-lg);
  align-items:start;
}
.dining__list{
  margin-top:38px;
  border-top:1px solid var(--line);
}
.dining__item{
  padding:19px 0;
  border-bottom:1px solid var(--line);
  font-size:16px;
  letter-spacing:.01em;
  line-height:1.6;
  color:var(--ivory);
}
/* 4:5 사진은 세로로 길어 그대로 두면 왼쪽 글 칸이 텅 빈다.
   사진 폭에 상한을 두어 두 칸의 높이 차를 줄였다. */
.dining__media{ width:100%; max-width:460px; margin-inline:auto; }
.dining__hero{ aspect-ratio:var(--dining-hero-ratio); overflow:hidden; }
.dining__hero img{ width:100%; height:100%; object-fit:cover; }
.dining__strip{
  display:grid;
  grid-template-columns:repeat(3, minmax(0,1fr));
  gap:12px;
  margin-top:12px;
}
.dining__strip-item{ aspect-ratio:3 / 2; overflow:hidden; }
.dining__strip-item img{ width:100%; height:100%; object-fit:cover; }

/* --------------------------------------------------------------------------
   9. Wedding & Convention (§5.6)
   -------------------------------------------------------------------------- */
.events{ background:var(--white); padding-block:0 var(--sec-pad); }

.events__banner{
  position:relative;
  height:520px;
  display:flex;
  align-items:center;
  overflow:hidden;
}
.events__banner-img{
  position:absolute;
  inset:0;
  width:100%; height:100%;
  object-fit:cover;
}
.events__banner-overlay{
  position:absolute;
  inset:0;
  background:rgba(14,26,43,.45);     /* 실측 근거: wedding_03 최악 타일 9.15 */
}
.events__banner-inner{ position:relative; z-index:1; }
.events__banner-inner .bodytext{ max-width:560px; }

.events__cards{
  display:grid;
  grid-template-columns:repeat(2, minmax(0,1fr));
  gap:40px;
  margin-top:var(--gap-md);
}
.event-card__media{ aspect-ratio:16 / 10; overflow:hidden; margin-bottom:22px; }
.event-card__media img{
  width:100%; height:100%;
  object-fit:cover;
  transition:transform .6s ease;
}
.event-card:hover .event-card__media img{ transform:scale(1.04); }
.event-card__title{
  font-family:var(--title);
  font-size:26px;
  font-weight:500;
  line-height:1.4;
  color:var(--ink);
}
.event-card__desc{
  margin-top:8px;
  font-size:15px;
  line-height:1.75;
  color:var(--muted);
}

/* --------------------------------------------------------------------------
   10. Location (§5.7) — 지도는 사진이 아니라 CSS 로 그린 틀
   -------------------------------------------------------------------------- */
.loc__grid{
  display:grid;
  grid-template-columns:minmax(0,1.05fr) minmax(0,.95fr);
  gap:var(--gap-lg);
  align-items:center;
}
.loc__map{
  position:relative;
  aspect-ratio:4 / 3;
  background:var(--navy);
  overflow:hidden;
}
.loc__map::before{                  /* 얇은 격자 선 */
  content:"";
  position:absolute;
  inset:0;
  background-image:
    linear-gradient(to right, var(--line) 1px, transparent 1px),
    linear-gradient(to bottom, var(--line) 1px, transparent 1px);
  background-size:46px 46px;
}
/* 설계서 §5.7 「가운데 금색 핀」 — 도로 두 줄이 한가운데서 만나고 핀이 그 위에 선다 */
.loc__road{ position:absolute; background:rgba(255,255,255,.09); }
.loc__road--h{ left:0; right:0; top:50%; height:15px; }
.loc__road--v{ top:0; bottom:0; left:50%; width:11px; }

/* C-3: 라벨이 아주 좁은 화면에서 지도 밖으로 잘리던 것을 막는다.
   right 를 묶어 두어 무리가 쓸 수 있는 폭이 남은 자리를 넘지 못하게 하고,
   nowrap 을 풀어 정 좁으면 라벨이 두 줄로 접히게 했다(잘리는 대신 접힌다). */
.loc__pin{
  position:absolute;
  left:50%;
  right:10px;
  top:50%;
  transform:translate(-14px, -100%);
  display:flex;
  align-items:center;
  gap:12px;
}
.loc__pin-mark{
  position:relative;
  flex:none;
  width:28px;
  height:28px;
  background:var(--gold);
  border-radius:50% 50% 50% 0;
  transform:rotate(-45deg);
}
.loc__pin-mark::after{
  content:"";
  position:absolute;
  left:50%; top:50%;
  width:10px; height:10px;
  margin:-5px 0 0 -5px;
  border-radius:50%;
  background:var(--navy);
}
.loc__pin-label{
  font-size:13px;
  letter-spacing:.06em;
  color:var(--white);
}

.loc__addr{
  margin-top:20px;
  font-size:17px;
  line-height:1.7;
  color:var(--ink);
}
.loc__list{ margin-top:26px; border-top:1px solid var(--line-dark); }
.loc__item{
  padding:14px 0;
  border-bottom:1px solid var(--line-dark);
  font-size:15px;
  line-height:1.7;
  color:var(--muted);
}
.loc__tel{
  margin-top:24px;
  font-size:15px;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--ink);
}

/* --------------------------------------------------------------------------
   11. 검색 영역 (§5.8) — 이 시안의 핵심
   -------------------------------------------------------------------------- */
#search{
  background:var(--navy-2);
  padding-block:96px;
}
.search__label{ text-align:center; }
/* 크기는 .sectitle 의 40/32/28(전역 제약 5)을 그대로 쓴다.
   두 줄로 접히는 것이 설계 의도이므로 따로 줄이지 않는다. */
.search__title{ margin-top:16px; text-align:center; }

.search__card{
  max-width:1040px;
  margin:44px auto 0;
  padding:0 32px 32px;
  background:var(--white);
  border-radius:16px;
}
.search__tabs{
  display:flex;
  gap:30px;
  margin-bottom:30px;
  border-bottom:1px solid var(--line-dark);
}
.search__tab{
  position:relative;
  padding:21px 2px;
  border:0;
  border-bottom:2px solid transparent;
  margin-bottom:-1px;
  background:none;
  font-size:15px;
  font-weight:500;
  letter-spacing:.02em;
  color:var(--muted);
  cursor:pointer;
  transition:color .2s ease;
}
.search__tab[aria-selected="true"]{
  color:var(--ink);
  border-bottom-color:var(--gold);     /* 선택 탭 아래 금색 밑줄 */
}

/* 탭 1 · 조건 검색 — 칸 6 + 단추 1 */
.sform{
  display:grid;
  grid-template-columns:minmax(0,1.25fr) minmax(0,1.35fr) minmax(0,1.35fr)
                        minmax(0,.7fr) minmax(0,.7fr) minmax(0,.7fr) 148px;
  gap:16px;
  align-items:end;
}
.sform__field{ min-width:0; }
.sform__label{
  display:block;
  margin-bottom:8px;
  font-size:12px;
  letter-spacing:.06em;
  line-height:1.5;
  color:var(--muted);
}
.sform__input{
  width:100%;
  min-width:0;
  height:48px;
  padding:0 11px;
  border:1px solid var(--line-dark);
  border-radius:8px;
  background:var(--white);
  font-family:inherit;
  font-size:14px;
  line-height:1.4;
  color:var(--ink);
}
select.sform__input{
  appearance:none;
  -webkit-appearance:none;
  padding-right:28px;
  background-image:url('data:image/svg+xml;utf8,<svg xmlns="http://www.w3.org/2000/svg" width="10" height="6"><path d="M1 1l4 4 4-4" fill="none" stroke="%236B6F76" stroke-width="1.4"/></svg>');
  background-repeat:no-repeat;
  background-position:right 11px center;
}
.sform__input:focus{ border-color:var(--gold); }
.sform__go .btn{ height:48px; }

/* 탭 2 · 자연어 검색 */
.nl{ display:flex; gap:12px; }
.nl__input{
  flex:1 1 auto;
  min-width:0;
  height:60px;
  padding:0 18px;
  border:1px solid var(--line-dark);
  border-radius:10px;
  background:var(--white);
  font-family:inherit;
  font-size:16px;
  color:var(--ink);
}
.nl__input::placeholder{ color:var(--muted); }
.nl__input:focus{ border-color:var(--gold); }
.nl__btn{ flex:none; width:148px; height:60px; }
.nl__hint{
  margin-top:16px;
  font-size:14px;
  line-height:1.7;
  color:var(--muted);
}
.nl__chips{
  display:flex;
  flex-wrap:wrap;
  gap:10px;
  margin-top:18px;
}
.chip{
  padding:9px 16px;
  border:1px solid var(--line-dark);
  border-radius:999px;
  background:var(--white);
  font-family:inherit;
  font-size:13px;
  line-height:1.5;
  color:var(--ink);
  cursor:pointer;
  transition:border-color .2s ease, color .2s ease;
}
.chip:hover{ border-color:var(--gold); color:var(--navy); }

.search__note{
  margin-top:22px;
  font-size:13px;
  line-height:1.7;
  text-align:center;
  color:rgba(246,242,234,.72);    /* navy-2 위 대비 7.7 */
}

/* --------------------------------------------------------------------------
   12. 푸터 (§5.9)
   -------------------------------------------------------------------------- */
.footer{
  background:var(--navy);
  color:var(--ivory);
  padding-block:72px 36px;
}
.footer__in{
  display:grid;
  grid-template-columns:minmax(0,auto) minmax(0,1fr) minmax(0,auto);
  gap:40px;
  align-items:start;
  padding-bottom:36px;
  border-bottom:1px solid var(--line);
}
.footer__logo{ height:36px; width:auto; }
.footer__name{
  margin-top:16px;
  font-size:15px;
  letter-spacing:.04em;
  line-height:1.6;
  color:var(--ivory);
}
.footer__info{ padding-top:4px; font-style:normal; }   /* address 기본 이탤릭을 되돌림 */
.footer__addr,
.footer__tel{
  font-size:14px;
  line-height:1.9;
  color:rgba(246,242,234,.72);
}
.footer__sns{ display:flex; gap:22px; padding-top:6px; }
.footer__sns-item{
  font-size:12px;
  letter-spacing:.12em;
  text-transform:uppercase;
  color:rgba(246,242,234,.72);
}

.footer__bottom{
  display:flex;
  flex-wrap:wrap;
  justify-content:space-between;
  gap:8px 32px;
  padding-top:26px;
}
.footer__copy,
.footer__disclaimer{
  font-size:12px;
  letter-spacing:.02em;
  line-height:1.7;
  color:rgba(246,242,234,.6);      /* navy 위 대비 6.3 */
}

/* ==========================================================================
   13. 반응형 — ≥1200 데스크톱 · 768~1199 태블릿 · ≤767 모바일
        상단 메뉴 줄은 ≤991 에서 햄버거로 접음 (전역 제약 6)
   ========================================================================== */

/* ---------- 태블릿 (≤1199) ---------- */
@media (max-width:1199px){
  :root{ --sec-pad:80px; --gap-lg:48px; --gap-md:40px; }

  .hero__title{ font-size:48px; }
  .hero__sub{ font-size:16px; }
  .sectitle{ font-size:32px; }

  .gnb__list{ gap:4px 24px; }

  /* 다이닝: 글 위 · 사진 아래 세로 배치 (§5.5) */
  .dining__grid{ grid-template-columns:minmax(0,1fr); gap:44px; }
  .dining__media{ max-width:460px; }

  /* 칸 사이를 좁혀 「한 줄」을 햄버거 기준(≤991)까지 지킨다 */
  .sform{ gap:12px; }

  .search__card{ padding:0 26px 26px; }
  .events__banner{ height:440px; }
}

/* ---------- 햄버거 기준 (≤991) ---------- */
@media (max-width:991px){
  .navtoggle{ display:flex; }

  /* 닫힘 상태 — 1줄은 햄버거 · 로고 · Reservation 만 (§5.1) */
  .hotelsel{ display:none; }
  .lang{ display:none; }

  .header__bar-in{ height:64px; gap:12px; }
  .header__logo img{ height:34px; }

  /* 메뉴 줄을 전체 화면 패널로 재배치 — 요소를 복제하지 않는다 (전역 제약 8) */
  #gnb{
    position:fixed;
    left:0; right:0; top:0; bottom:0;
    z-index:90;
    /* 위 여백은 상단 바(64) + 패널 맨 위에 놓이는 Our Hotels·KOR|ENG 자리다.
       그 둘을 위에 두어야 탭 순서(DOM 순서)와 눈에 보이는 순서가 맞는다 — C-1. */
    padding:var(--panel-menu-top) var(--gutter) 64px;
    background:var(--navy);
    overflow-y:auto;
    opacity:0;
    visibility:hidden;
    transform:translateY(-8px);
    transition:opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  #siteHeader.is-nav-open #gnb{
    opacity:1;
    visibility:visible;
    transform:none;
  }
  .gnb__list{
    flex-direction:column;
    flex-wrap:nowrap;
    align-items:flex-start;
    gap:0;
    min-height:0;
  }
  .gnb__item{ width:100%; border-bottom:1px solid var(--line); }
  .gnb__link{
    display:block;
    padding:17px 0;
    font-size:19px;
    letter-spacing:.06em;
  }
  .gnb__link::after{ display:none; }

  /* 패널이 열렸을 때만 Our Hotels 와 KOR/ENG 를 보인다.
     (같은 요소를 자리만 옮기는 것 — 복제 아님)

     C-1: 이 둘을 패널 **위쪽**에 둔다. DOM 은 navToggle → hotelBtn → 언어 →
     reserveBtn → 메뉴 순인데 예전처럼 화면 아래쪽에 두면, 탭 키는 메뉴 링크보다
     이 둘을 먼저 만나는데 눈에는 맨 아래 있어 순서가 어긋났다. 탭 순서는 CSS
     order 로 못 바꾸므로 **보이는 자리를 DOM 순서에 맞췄다.** */
  #siteHeader.is-nav-open .hotelsel{
    display:block;
    position:fixed;
    left:var(--gutter); right:var(--gutter);
    top:var(--panel-hotel-top);
    z-index:101;
  }
  #siteHeader.is-nav-open .hotelsel__menu{
    left:0; right:0;
    min-width:0;
  }
  #siteHeader.is-nav-open .lang{
    display:flex;
    position:fixed;
    left:var(--gutter);
    top:var(--panel-lang-top);
    z-index:101;
  }

  /* N-1: 패널에서 Our Hotels 드롭다운은 아래로 열리는데, 그 자리에 KOR|ENG 와
     메뉴 첫 줄이 있어 덮여 버린다(390 실측: 드롭다운 128~222 · lang 140~165 ·
     첫 링크 198~259). 드롭다운이 열려 있는 동안 그 둘을 드롭다운 높이만큼
     아래로 밀어 서로 겹치지 않게 한다.
     Task 6 이 hidden 속성을 떼든 aria-expanded 를 바꾸든 둘 중 하나만 해도
     걸리도록 두 선택자를 함께 적는다. */
  #siteHeader.is-nav-open:has(#hotelMenu:not([hidden])) .lang,
  #siteHeader.is-nav-open:has(#hotelBtn[aria-expanded="true"]) .lang{
    top:calc(var(--panel-lang-top) + var(--panel-hotelmenu-h));
  }
  #siteHeader.is-nav-open:has(#hotelMenu:not([hidden])) #gnb,
  #siteHeader.is-nav-open:has(#hotelBtn[aria-expanded="true"]) #gnb{
    padding-top:calc(var(--panel-menu-top) + var(--panel-hotelmenu-h));
  }
  /* 패널이 열린 동안에는 상단 바의 예약 단추를 감춘다.
     설계서 §6.8 의 패널 구성(메뉴 8개·Our Hotels·KOR/ENG·닫기)에 이 단추는
     없고, 메뉴 안의 Reservation 이 같은 새 창 링크라 기능도 그대로다.
     display:none 이라 탭 순서에서도 빠져, 보이는 순서와 완전히 같아진다. */
  #siteHeader.is-nav-open .header__reserve{ display:none; }

  /* 패널이 화면을 남색으로 다 덮고 있는데도 탭 초점이 그 뒤 본문(검색 탭·
     입력 칸 등)으로 넘어갔다 — 실측으로 잡음. visibility:hidden 이면 초점
     대상에서도 빠지므로 「보이는 것만 초점을 받는다」가 성립한다.
     패널이 덮고 있어 겉모습은 달라지지 않는다. */
  /* N-2: main 이 class 붙는 즉시 사라지는데 패널은 0.25초에 걸쳐 나타나서,
     그 사이 body 의 흰 배경이 번쩍였다(실측: 35ms 에 패널 opacity 0.113 인데
     main 은 이미 hidden). 사라지는 것을 패널이 다 나타난 뒤로 미룬다.
     닫을 때는 아래 기본 규칙(지연 0)이 적용되어 즉시 돌아온다. */
  main, footer{ transition:visibility 0s 0s; }
  #siteHeader.is-nav-open ~ main,
  #siteHeader.is-nav-open ~ footer{
    visibility:hidden;
    transition:visibility 0s .25s;
  }

  /* 햄버거가 ✕ 로 */
  #siteHeader.is-nav-open .navtoggle__bar:nth-child(1){ transform:translateY(6px) rotate(45deg); }
  #siteHeader.is-nav-open .navtoggle__bar:nth-child(2){ opacity:0; }
  #siteHeader.is-nav-open .navtoggle__bar:nth-child(3){ transform:translateY(-6px) rotate(-45deg); }

  /* 패널이 열려 있는 동안 본문 스크롤 잠금.
     이름을 헤더 쪽(is-nav-open)과 일부러 다르게 둔다 — 같은 이름이면 Task 6 이
     헤더에만 붙였을 때 패널은 정상으로 열리고 검사기도 통과하는데 스크롤 잠금만
     조용히 빠진다. Task 6 은 헤더에 is-nav-open, body 에 is-nav-locked 를 붙인다. */
  body.is-nav-locked{ overflow:hidden; }

  /* 조건 검색: 3칸씩 두 줄 + 단추 한 줄 (설계서 「한 줄」은 992 까지 지킨다) */
  .sform{ grid-template-columns:repeat(3, minmax(0,1fr)); gap:16px; }
  .sform__go{ grid-column:1 / -1; }

  .rooms__top{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .loc__grid{ grid-template-columns:minmax(0,1fr); gap:36px; }
  .sechead{ flex-direction:column; align-items:flex-start; gap:20px; }
}

/* ---------- 모바일 (≤767) ---------- */
@media (max-width:767px){
  :root{ --gutter:16px; --sec-pad:64px; --gap-lg:36px; --gap-md:32px; }

  .hero{ min-height:600px; }
  .hero__title{ font-size:36px; }
  .hero__sub{ font-size:15px; }
  .hero__rule{ margin-top:30px; }
  .sectitle{ font-size:28px; }

  .header__reserve{ height:34px; padding:0 14px; font-size:12px; }

  /* 카드는 1열 (객실 카드만 설계서 §5.4 대로 2열) */
  .pkg-grid{ grid-template-columns:minmax(0,1fr); gap:22px; margin-top:36px; }
  .room-grid{ grid-template-columns:repeat(2, minmax(0,1fr)); gap:22px 18px; margin-top:44px; }
  .events__cards{ grid-template-columns:minmax(0,1fr); gap:32px; }
  .room-card__name{ font-size:18px; }
  .event-card__title{ font-size:22px; }

  .events__banner{ height:380px; }

  .dining__media{ max-width:none; }
  .dining__strip{ gap:8px; }

  /* C-3: 좁은 폭에서는 핀 옆에 라벨을 둘 자리가 없어 320px 에서 세 줄로 접혔다.
     라벨을 핀 **아래**로 내리면 지도 폭 전체를 쓸 수 있어 320px 에서도 한 줄이다.
     width:max-content 로 줄바꿈을 막고 max-width:100% 로 지도를 넘지 못하게 한다.
     마크(28px) 끝은 그대로 도로 교차점에 선다. */
  .loc__pin{
    right:auto;
    width:max-content;
    max-width:100%;
    flex-direction:column;
    align-items:center;
    gap:18px;                       /* 가로 도로(15px)를 피해 라벨을 놓는다 */
    transform:translate(-50%, -28px);
  }
  .loc__pin-label{ text-align:center; }

  /* 조건 검색: 세로 쌓기 (§5.8) */
  .sform{ grid-template-columns:minmax(0,1fr); gap:14px; }
  .search__card{ padding:0 18px 22px; margin-top:32px; border-radius:12px; }
  .search__tabs{ gap:22px; margin-bottom:24px; }
  .search__tab{ padding:17px 2px; font-size:14px; }

  .nl{ flex-direction:column; }
  .nl__btn{ width:100%; height:52px; }
  .nl__input{ height:54px; font-size:15px; }

  .footer{ padding-block:56px 30px; }
  .footer__in{ grid-template-columns:minmax(0,1fr); gap:28px; }
  .footer__bottom{ flex-direction:column; gap:6px; }
}

/* ---------- 움직임을 줄이도록 설정한 사용자 ---------- */
@media (prefers-reduced-motion: reduce){
  *,*::before,*::after{
    animation-duration:.001ms !important;
    animation-iteration-count:1 !important;
    transition-duration:.001ms !important;
  }
}