/* =========================================================
   Sulwhasoo · Flagship Store
   pages/flagship.html 전용 스타일

   Naming: 이 파일이 직접 정의하는 클래스는 PRD 명명 규칙에 따라
   snake_case를 사용합니다. components/logo, components/footer가
   가져오는 badge__*, footer__* 클래스는 공유 컴포넌트 소유이므로
   그대로 둡니다.
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: #f5ecd7;
}

body {
  font-family: 'Open Sans', sans-serif;
  color: #2c2d32;
}

img { display: block; max-width: none; }

button:focus-visible,
a:focus-visible {
  outline: 2px solid #2c2d32;
  outline-offset: 3px;
}

/* =========================================================
   RESPONSIVE STAGE
   .page는 1920px 고정 캔버스로 제작되어 있습니다. 360 / 768 / 1280px에서
   가로 스크롤이 생기지 않도록, 뷰포트보다 넓을 때만 flagship.js가
   .page 전체를 축소(transform: scale)합니다. 1920px 이상에서는
   scale(1)이라 기존 디자인과 100% 동일합니다.
   ========================================================= */
/* overflow-x only (not plain "overflow: hidden") — an ancestor with
   overflow: hidden on both axes registers as a scroll container and breaks
   position: sticky on descendants like .hero. overflow-x: clip keeps the
   horizontal clipping needed for the scaled canvas without that side effect. */
.stage {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}
.page {
  width: 1920px;
  transform-origin: top left;
}

/* =========================================================
   HERO
   페이지에 들어오면 알약 모양 영상이 재생되고 화면이 고정됩니다. 휠을 한 번
   내리면 영상이 화면 전체로 커지면서 #f5ecd7로 점점 물들고, 그대로 BUKCHON
   HISTORY로 내려갑니다 — 중간에 멈추는 곳 없이 한 번에 이어집니다.

   .hero_video / .hero_wash / .badge_stage / .hero_txt의 위치·크기·투명도는
   flagship.js가 매 프레임 인라인으로 지정합니다. 여기 값은 스크립트가 첫
   프레임을 그리기 전의 초기 상태입니다.
   ========================================================= */
.hero {
  /* 화면에 고정된 한 장의 레이어입니다. 하강 구간에서는 flagship.js가 이
     레이어를 페이지가 스크롤되는 양만큼 위로 밀어 올립니다 — 걷어내는 게
     아니라 같이 올라가므로, hero 아랫변과 history 카드 윗변이 붙은 채로
     한 번의 하강처럼 보입니다. */
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: #0e0c09;
  /* .stage(.page)는 transform 때문에 z-index: 0으로 칠해집니다. hero가 그
     위에 있어야 전환 중에 history가 크림색 화면을 뚫고 올라오지 않습니다.
     공용 헤더(.arc_nav)는 z-index: 100이라 그대로 hero 위에 보입니다. */
  z-index: 1;
  will-change: transform;
}
/* 하강이 끝난 뒤 (flagship.js).
   hero를 지우지 않고 문서 맨 위에 그대로 남겨 둡니다 — history 위에 넣어둔
   화면 한 장 높이의 여백이 hero의 자리입니다. fixed에서 absolute(top: 0)로
   바뀌면서 페이지와 함께 스크롤되므로, 언제든 위로 올리면 hero를 다시 볼 수
   있습니다. 그 구간의 모습(영상·wash·카피)은 flagship.js가 스크롤 위치에
   맞춰 그립니다. */
.hero.is_done { position: absolute; }

.hero_video {
  position: absolute;
  width: 260px;
  height: 427px;
  border-radius: 300px 300px 0 0;
  overflow: hidden;
  z-index: 2;
  will-change: left, top, width, height, border-radius, filter;
}
.hero_video video {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 확대가 거의 끝나갈 때부터 영상을 점점 덮는 #f5ecd7 레이어 */
.hero_wash {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: #f5ecd7;
  opacity: 0;
  pointer-events: none;
  will-change: opacity;
}

/* 배지와 카피는 1920 캔버스 기준 크기 그대로 두고, flagship.js가 .page와
   같은 배율로 scale해서 실제 페이지와 비율을 맞춥니다. 그래서 여기서는
   transform-origin만 잡아두고 top/transform은 스크립트가 지정합니다. */
.hero .badge_stage,
.hero .hero_txt {
  position: absolute;
  left: 50%;
  z-index: 4;
  transform-origin: 50% 0;
  will-change: opacity, transform;
}

.hero_txt {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  width: 532px;
  text-align: center;
}
.hero_eyebrow {
  font-weight: 300;
  font-size: 14px;
  letter-spacing: 0.7px;
  text-transform: uppercase;
  line-height: 1.6;
  color: #978f80;
}
.hero_title {
  font-family: 'Cormorant Garamond', serif;
  font-weight: 500;
  font-size: 60px;
  line-height: 1.2;
  color: #f5ecd7;
}

/* =========================================================
   BUKCHON HISTORY
   ========================================================= */
.history {
  width: 100%;
  padding: 400px 160px 200px;
  display: flex;
  justify-content: center;
  background: #f5ecd7;
}
/* 카드 한 장은 "자리"(.history_slide)와 "실제 카드"(.history_card) 두 겹입니다.
   세 개의 .history_slide는 형제로 나란히 있고 모두 position: sticky; top: 0
   이라, 자리가 화면 맨 위에 붙어 있는 동안 바로 뒤 자리가 그 위로 올라와
   덮습니다. 덮이는 카드는 flagship.js가 뒤로 눕히고 줄이고 지웁니다.
   (gethyped.nl의 expertises 섹션과 같은 방식)

   원근(perspective)을 카드가 아니라 자리에 두는 이유: 소실점이 카드 자신이
   아니라 화면 안의 고정된 자리 기준이 되어서, 카드가 제자리에서 도는 게
   아니라 화면 안쪽으로 물러나는 것처럼 보입니다.

   sticky 자식이 붙어 있는 범위는 부모의 *content box*로 제한되므로
   .history_stack은 auto가 아니라 명시적인 높이를 갖습니다 — auto 높이는
   마지막 자식의 margin 처리에 따라 이 상자가 늘어나지 않아서 마지막 카드가
   붙어 있는 시간이 0이 되어버립니다.

   스크롤 양은 카드 높이(941)가 정합니다 — 다음 카드가 이 카드 아랫변에서
   윗변까지 올라오는 거리가 곧 덮이는 데 드는 스크롤이라, 그보다 짧게는
   줄일 수 없습니다. 그래서 줄일 수 있는 건 "덮이기 전에 그냥 서 있는
   시간"(margin-bottom)과 "마지막 카드가 붙어 있는 시간"뿐이고, 둘 다 카드를
   한 번 읽을 만큼만 남겼습니다. 카드 03을 다 보면 곧바로 자리가 풀려
   GALLERY로 이어집니다.
   3444 = (941 카드 + 160 여백) x2 + 941 (카드 03, 뒤 여백 없음)
          + 300 (카드 03이 붙어 있는 시간). */
.history_stack {
  width: 1600px;
  height: 3444px;
}

.history_slide {
  position: sticky;
  top: 0;
  width: 1600px;
  height: 941px;
  /* 덮이기 전에 카드가 그대로 서 있는 시간. 카드 높이만큼(941) 두면 한 장마다
     아무 일도 없는 스크롤이 한 화면씩 더 붙습니다. */
  margin-bottom: 160px;
  /* 카드 폭(1600px)의 2.5배. 값이 작을수록 눕는 각이 과장됩니다.
     .page에 scale이 걸려 있어 vw는 캔버스 좌표와 어긋나므로 px로 둡니다. */
  perspective: 4000px;
  z-index: 1;
}
.history_slide_02 { z-index: 2; }
.history_slide_03 { z-index: 3; margin-bottom: 0; }

.history_card {
  position: absolute;
  inset: 0;
  border-radius: 60px;
  overflow: hidden;
  padding: 109px 91px 0;
  background: #fff;
  /* 위쪽 10% 지점을 축으로 눕습니다. 카드 윗변은 거의 제자리에 남고 아랫변이
     화면 안쪽으로 밀려나므로, 다음 카드가 그 앞을 지나가는 것처럼 보입니다.
     (flagship.js의 "History cards" 참고) */
  transform-origin: 50% 10%;
  will-change: transform, opacity;
}
.history_card_02 { background: #ffb451; }
.history_card_03 { background: #e3c893; padding-top: 56px; }

.history_card_texture {
  position: absolute;
  inset: 0;
  opacity: 0.2;
  mix-blend-mode: luminosity;
  pointer-events: none;
}
.history_card_texture img { width: 100%; height: 100%; object-fit: cover; }

.history_card_tag {
  position: relative;
  z-index: 1;
  display: inline-flex;
  padding: 10px;
  border-radius: 10px;
  background: #e3ddd0;
  color: #5a5a5a;
  font-size: 13px;
  letter-spacing: 4.42px;
  text-transform: uppercase;
  line-height: 1.4;
}

.history_card_num {
  position: absolute;
  right: 91px;
  top: 46px;
  font-weight: 300;
  font-size: 80px;
  line-height: 1.4;
  color: #d1c0b5;
}
.history_card_02 .history_card_num,
.history_card_03 .history_card_num { color: #fbefd2; }

.history_card_body {
  position: relative;
  z-index: 1;
  max-width: 723px;
  margin-top: 61px;
}
.history_card_title {
  font-weight: 600;
  font-size: 48px;
  line-height: 1;
  color: #2c2d32;
}
.history_card_desc {
  margin-top: 48px;
  display: flex;
  flex-direction: column;
  gap: 24px;
  font-weight: 300;
  font-size: 18px;
  line-height: 1.8;
  color: #5a5a5a;
}
.history_card_02 .history_card_desc,
.history_card_03 .history_card_desc { color: #2c2d32; }

.history_card_photo {
  position: absolute;
  right: 155px;
  top: 331px;
  width: 415px;
  height: 533px;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: rotate(8.52deg);
}
.history_card_photo img {
  width: 347px;
  height: 487px;
  border-radius: 30px;
  object-fit: cover;
}

/* =========================================================
   SULWHASOO GALLERY
   ========================================================= */
.gallery {
  position: relative;
  width: 100%;
  height: 1080px;
  padding: 300px 288px 300px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: #f5ecd7;
  overflow: hidden;
}
/* 타이틀 위/아래가 아니라 좌우 양옆에 배치합니다. 흐름에서 빼내
   .gallery(position: relative) 기준으로 절대 배치합니다.
   left/top은 Figma(sulwhasoo_gallery 3569:1205) 좌표를 그대로 옮긴 값입니다.
   Figma의 box(1336x556)는 섹션(1920x1080) 안에서 가운데 정렬되므로
   box의 원점이 (292, 262)이고, left_tit이 그 안에서 (49, 250)입니다. */
.gallery_label {
  position: absolute;
  left: 341px;
  top: 512px;
  /* 트레일 이미지(.gallery_trail, z-index: 1)보다 위 — 이미지가 쌓여도 글자는 읽힙니다. */
  z-index: 2;
  padding: 10px;
  font-weight: 300;
  font-size: 16px;
  color: #2c2d32;
}
/* Figma의 txt_box — box 원점 (292, 262) + (166, 72). */
.gallery_head {
  position: absolute;
  left: 458px;
  top: 334px;
  z-index: 2;
  width: 1003px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 20px;
  text-align: center;
}
.gallery_title {
  font-weight: 600;
  font-size: 80px;
  line-height: 1.4;
  color: #2c2d32;
  /* 제목의 줄바꿈 위치를 직접 지정합니다. flagship.js가 textContent로 제목을
     넣으므로 <br> 대신 문자열의 개행(\n)을 살리는 방식을 씁니다. */
  white-space: pre-line;
}
/* 캠페인 전환 시 디졸브용 잔상 — 이전 제목을 복제해 같은 자리에 겹쳐 두고
   서서히 지웁니다. .gallery_head가 position: absolute라 그대로 기준이 됩니다. */
.gallery_title_ghost {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
  pointer-events: none;
}
.gallery_hint {
  display: flex;
  align-items: center;
  gap: 10px;
}
.gallery_hint img { width: 30px; height: 30px; }
.gallery_hint span {
  font-size: 13px;
  letter-spacing: 4.42px;
  text-transform: uppercase;
  color: #2c2d32;
}

/* Figma의 right_tit — box 원점 (292, 262) + (1144, 262). */
.gallery_campaigns {
  position: absolute;
  left: 1436px;
  top: 524px;
  z-index: 2;
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 5px;
}
/* button 요소라 브라우저 기본값을 먼저 지웁니다. */
.gallery_campaign {
  appearance: none;
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  text-align: right;
  display: flex;
  align-items: center;
  gap: 7px;
  font-family: inherit;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #d1c0b5;
}
.gallery_campaign:focus-visible {
  outline: 2px solid #2c2d32;
  outline-offset: 4px;
}
/* 상태는 색상만으로 구분하지 않습니다: is_active는 색상 + 글자 두께를 함께 사용합니다. */
.gallery_campaign.is_active {
  color: #ff6300;
  font-weight: 600;
}
.gallery_campaign i {
  display: block;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: currentColor;
}

/* ---- Gallery 마우스 트레일 ----
   섹션 전체를 덮는 레이어. 커서가 지나간 자리에 이미지가 한 장씩 나타나 그대로
   남습니다(위치·순서는 flagship.js가 정합니다). 넘치는 부분은 섹션의
   overflow: hidden이 잘라내고, pointer-events는 통과시켜 섹션 위 다른 요소를
   방해하지 않습니다. 글자보다 아래에 깔아서, 이미지가 쌓여도 제목과 캠페인
   버튼은 계속 읽히도록 합니다. */
.gallery_trail {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  pointer-events: none;
  z-index: 1;
}
/* 각 장은 레이어 원점에 두고 transform으로 옮깁니다 — 커서를 따라가는 좌표는
   js가 x/y로 넣습니다. 나타나기 전에는 opacity: 0으로 숨어 있습니다. */
.gallery_trail_item {
  position: absolute;
  left: 0;
  top: 0;
  width: 317px;
  opacity: 0;
  will-change: transform, opacity;
}
.gallery_trail_item img {
  display: block;
  width: 317px;
  height: 174px;
  object-fit: cover;
  border-radius: 10px;
}

/* =========================================================
   BUKCHON ROOM GUIDE
   ========================================================= */
.guide {
  width: 100%;
  padding: 300px 0;
  display: flex;
  justify-content: center;
  background: #f5ecd7;
}
.guide_box {
  position: relative;
  width: 1920px;
  height: 1239px;
}

/* ---------------------------------------------------------
   맨 뒤 배경 격자
   선 색 · 농도 · 간격은 기존 guide-grid SVG 에서 그대로 가져왔습니다
   (#FBF1DC, fill-opacity .73, 간격 66.303px, 두께 2.742px).
   그 SVG 는 가로선만 있고 blur 가 stdDeviation="0" 이라 실제로는 흐려지지
   않아서, 여기서는 세로선을 더해 격자로 만들고 위아래를 마스크로 점점
   지워지게 했습니다.
   --------------------------------------------------------- */
.guide_bg_grid {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1239px;
  z-index: 0;            /* 캔버스(1)보다 뒤 */
  pointer-events: none;

  --grid_line:  rgba(251, 241, 220, 0.73);   /* #FBF1DC 73% */
  --grid_cell:  66.303px;
  --grid_thick: 2.742px;

  background-image:
    repeating-linear-gradient(to bottom,
      var(--grid_line) 0 var(--grid_thick),
      transparent var(--grid_thick) var(--grid_cell)),
    repeating-linear-gradient(to right,
      var(--grid_line) 0 var(--grid_thick),
      transparent var(--grid_thick) var(--grid_cell));

  /* 맨 위 · 맨 아래로 갈수록 점점 흐려집니다 */
  -webkit-mask-image: linear-gradient(to bottom,
    transparent 0, #000 17%, #000 83%, transparent 100%);
          mask-image: linear-gradient(to bottom,
    transparent 0, #000 17%, #000 83%, transparent 100%);
}

/* ---------------------------------------------------------
   WebGL 레이어 (js/guide_gl.js)
   콜라주와 룸 캐러셀을 캔버스 하나에 그립니다. 캔버스는 .guide_box 와
   같은 좌표계 위에 정확히 겹쳐 있고, 콜라주의 <img> 는 화면에서 감춘 뒤
   "위치 자"로만 씁니다 — 그래서 아래 레이아웃 규칙은 하나도 안 바뀝니다.
   WebGL 을 못 쓰면 .gl_on 이 안 붙어서 원래 DOM 콜라주가 그대로 남습니다.
   --------------------------------------------------------- */
.guide_gl {
  position: absolute;
  left: 0;
  top: 0;
  width: 1920px;
  height: 1239px;
  z-index: 1;
  pointer-events: none;
}
.gl_on .guide_collage img { opacity: 0; }
.gl_on .guide_collage { pointer-events: none; }

/* 캐러셀이 쓰는 원본 10 장은 화면에 내보내지 않습니다 */
.room_sources { display: none; }

/* 룸 캐러셀 모드 — 섹션 제목은 계속 보이고, 콜라주에만 딸린
   캡션 · 격자만 물러납니다. */
.guide_caption,
.guide_grid { transition: opacity .55s ease; }
.room_on .guide_caption,
.room_on .guide_grid { opacity: 0; pointer-events: none; }

/* 캐러셀에서는 캔버스가 직접 휠 · 드래그를 받습니다 */
.room_on .guide_gl { pointer-events: auto; touch-action: none; }

/* 캐러셀에서 guide_chang 은 호버한 카드의 정보를 보여 주는 칩이 됩니다.
   .will_reveal / .is_visible 과 같은 "아래 24px → 제자리" 움직임입니다.
   주의: .will_reveal 은 transform 을 translateY 로만 덮어써서 .guide_chang 의
   translateX(-50%) 가운데 정렬을 지웁니다. 여기서는 두 변환을 함께 씁니다. */
.room_on .guide_chang {
  opacity: 0;
  transform: translate(-50%, 24px);
  transition: opacity .45s ease, transform .45s ease;
  pointer-events: none;
}
.room_on .guide_chang.is_visible {
  opacity: 1;
  transform: translate(-50%, 0);
}
/* 썸네일은 48×48 로 고정하고 그림만 카드에 맞춰 바뀝니다 */
.room_on .guide_chang_thumb { width: 48px; height: 48px; }

/* 캔버스가 z-index 1 이라, 캔버스 위에 얹혀야 하는 것들에 층을 줍니다 */
.guide_caption,
.guide_chang { z-index: 2; }

.guide_top_title {
  position: absolute;
  left: 50%;
  top: 154px;
  z-index: 3;          /* 두 모드 모두에서 캔버스 위에 계속 보입니다 */
  transform: translateX(-50%);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-weight: 600;
  font-size: 30px;
  letter-spacing: -1.5px;
  line-height: 1.5;
  color: #2c2d32;
  text-align: center;
  white-space: nowrap;
}

.guide_grid {
  position: absolute;
  left: 50%;
  top: 64px;
  transform: translateX(-50%);
  width: 1920px;
  height: 1175px;
  pointer-events: none;
}
.guide_grid_top {
  position: absolute;
  left: 0;
  top: 0;
  width: 1990px;
  height: 599px;
}
.guide_grid_bottom {
  position: absolute;
  left: 0;
  top: 537px;
  width: 1990px;
  height: 638px;
}

.guide_collage {
  position: absolute;
  left: 424px;
  top: 0;
  width: 1223.279px;
  height: 1202.505px;
}
.guide_piece { position: absolute; }
.guide_piece img { width: 100%; height: 100%; object-fit: cover; display: block; }
.guide_piece_inner { width: 100%; height: 100%; }
.guide_piece_inner img { width: 100%; height: 100%; object-fit: cover; }

.guide_piece_17   { left: 710px;    top: 794px;    width: 220px;      height: 151px; }
.guide_piece_343  { left: 124.28px; top: 371.18px;  width: 250.277px;  height: 208.113px; display: flex; align-items: center; justify-content: center; }
.guide_piece_343 .guide_piece_inner { width: 227.286px; height: 177.516px; transform: rotate(8.2deg); }
.guide_piece_344  { left: 358.72px; top: 324.39px;  width: 278.486px;  height: 249.739px; display: flex; align-items: center; justify-content: center; }
.guide_piece_344 .guide_piece_inner { width: 239.911px; height: 201.84px; transform: rotate(12.73deg); }
.guide_piece_342  { left: 523px;    top: 593px;    width: 371px;      height: 255px; }
.guide_piece_vec  { left: 40.28px;  top: 388.93px;  width: 108.953px;  height: 246.203px; display: flex; align-items: center; justify-content: center; }
.guide_piece_vec .guide_piece_inner { width: 102.917px; height: 243.716px; transform: rotate(1.43deg); }
.guide_piece_vec1 { left: 902.22px; top: 672.09px;  width: 103.365px;  height: 244.008px; display: flex; align-items: center; justify-content: center; }
.guide_piece_vec1 .guide_piece_inner { width: 102.673px; height: 243.716px; transform: scaleY(-1) rotate(-179.84deg); }
.guide_piece_341  { left: 137px;    top: 512px;    width: 368px;      height: 252px; }
.guide_piece_13   { left: 612px;    top: 274px;    width: 320px;      height: 212px; }
.guide_piece_14   { left: 906.28px; top: 39.5px;   width: 276.812px;  height: 312.639px; display: flex; align-items: center; justify-content: center; }
.guide_piece_14 .guide_piece_inner { width: 270.924px; height: 307.464px; transform: rotate(-1.11deg); }
.guide_piece_16   { left: 469.03px; top: 836.46px;  width: 292.119px;  height: 158.14px; display: flex; align-items: center; justify-content: center; }
.guide_piece_16 .guide_piece_inner { width: 284.96px; height: 143.317px; transform: rotate(3.02deg); }
.guide_piece_18   { left: 255.24px; top: 878.26px;  width: 282.769px;  height: 204.167px; display: flex; align-items: center; justify-content: center; }
.guide_piece_18 .guide_piece_inner { width: 270.011px; height: 184.991px; transform: rotate(4.18deg); }
.guide_piece_19   { left: 196.22px; top: 994.36px;  width: 139.184px;  height: 168.645px; display: flex; align-items: center; justify-content: center; }
.guide_piece_19 .guide_piece_inner { width: 123.794px; height: 156.805px; transform: rotate(5.87deg); }

.guide_caption {
  position: absolute;
  left: calc(50% - 216px);
  top: 672px;
  transform: translateX(-50%);
  width: 298px;
  text-align: center;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: #fff;
  text-shadow: 0 2px 10px rgba(0, 0, 0, 0.45);
}

.guide_chang {
  position: absolute;
  left: calc(50% + 2px);
  top: 980px;
  transform: translateX(-50%);
  width: 224px;
  height: 61px;
  border-radius: 15px;
  overflow: hidden;
  background: #fff;
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 6px;
  box-shadow: 0 10px 30px rgba(14, 12, 9, 0.12);
}
.guide_chang_thumb {
  width: 48px;
  height: 49px;
  border-radius: 10px;
  overflow: hidden;
  flex-shrink: 0;
}
.guide_chang_thumb img { width: 100%; height: 100%; object-fit: cover; }
.guide_chang_label {
  flex: 1;
  text-align: center;
  font-size: 16px;
  letter-spacing: -0.8px;
  color: #2c2d32;
}

/* =========================================================
   SALON
   ========================================================= */
/* 1920 기준 좌우 200px 여백. 그 안쪽 1520px이 슬라이더 영역이고, 카드가 이
   영역을 꽉 채우므로 넘치는 다음 카드는 잘려서 옆으로 비쳐 보이지 않는다. */
.salon {
  width: 100%;
  height: 1380px;
  padding: 300px 200px;
  display: flex;
  align-items: center;
  background: #f5ecd7;
}
/* 카운터가 슬라이더 밖에서 카드 위에 얹히도록 기준을 잡는다 */
.salon_stage {
  position: relative;
  width: 1520px;
}
.salon_swiper {
  width: 100%;
  overflow: hidden;
  /* 뷰포트에 들어오기 전에는 살짝 크고 흐리다 */
  transform-origin: top center;
  opacity: 0.75;
  transform: scale(1.05);
  transition: opacity 900ms cubic-bezier(0.22, 1, 0.36, 1),
              transform 900ms cubic-bezier(0.22, 1, 0.36, 1);
}
.salon_swiper.is_in_view {
  opacity: 1;
  transform: scale(1);
}
/* Swiper가 안 붙었을 때(스크립트를 못 받았을 때)의 대비 — 가로 스크롤로라도
   카드 6장을 다 볼 수 있게 한다. Swiper가 붙으면 이 규칙은 꺼진다. */
.salon_swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
  overflow-x: auto;
}

.salon_item {
  flex: 0 0 auto;
  width: 100%;
  height: 780px;
}
/* 투명도가 걸리는 층 — 카드 전체(텍스트+사진)가 같이 흐려진다 */
.salon_item_inner {
  display: flex;
  width: 100%;
  height: 100%;
}
.salon_text {
  position: relative;
  flex: 0 0 50%;
  width: 50%;
  height: 780px;
  background: #fff;
  overflow: hidden;
}
.salon_text_inner {
  position: absolute;
  left: 53px;
  right: 53px;
  top: 212px;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 30px;
  text-align: center;
}
.salon_eyebrow {
  width: 100%;
  font-size: 13px;
  line-height: 1.4;
  letter-spacing: 4.42px;
  text-transform: uppercase;
  color: #f47321;
}
.salon_title {
  width: 100%;
  font-weight: 300;
  font-size: 28px;
  line-height: 1.5;
  letter-spacing: -1.4px;
  color: #2c2d32;
}
.salon_desc {
  width: 100%;
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: #707070;
}
/* 본문 두 문단 사이는 디자인상 한 줄 비어 있습니다. */
.salon_desc p + p { margin-top: 1.8em; }
.salon_desc em { font-style: italic; }

/* number_box는 카드마다 두지 않고 슬라이더 밖에 하나만 두고 숫자만 갈아끼운다.
   txt_box가 슬라이더의 왼쪽 절반이므로 그 한가운데는 25%. */
.salon_count {
  position: absolute;
  left: 25%;
  top: 731px;
  transform: translateX(-50%);
  z-index: 2;
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  line-height: 1;
  text-transform: uppercase;
  /* 숫자 폭을 고정해 1→2로 갈아끼울 때 좌우가 밀리지 않게 한다 */
  font-variant-numeric: tabular-nums;
  user-select: none;
}
.salon_count_current {
  color: #000;
  transition: color 500ms cubic-bezier(0.4, 0, 0.2, 1);
}
.salon_count_total { color: #989898; }
.salon_count_line {
  width: 75px;
  height: 1px;
  background: #353535;
  opacity: 0.5;
}

.salon_photo {
  flex: 0 0 50%;
  width: 50%;
  height: 780px;
  overflow: hidden;
}
/* 드래그로 넘기는 슬라이더라 텍스트·이미지가 잡히지 않게 한다 */
.salon_text_inner { user-select: none; }
.salon_photo img { -webkit-user-drag: none; user-select: none; }
.salon_photo img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
}
/* Figma의 크롭 위치를 object-position으로 옮긴 값 — 넘치는 높이 대비 잘려나간 윗부분의 비율. */
.salon_photo_01 img { object-position: center bottom; } /* -11.53% / 11.47% */
.salon_photo_04 img { object-position: center 34%; }    /* -9.31%  / 27.15% */
.salon_photo_05 img { object-position: center 25%; }    /* -8.15%  / 32.08% */

/* =========================================================
   LOCATION / MAP
   ========================================================= */
.location {
  width: 100%;
  padding: 300px 426px 400px;
  display: flex;
  justify-content: center;
  background: #f5ecd7;
}
.location_box {
  position: relative;
  width: 1058px;
  min-height: 400px;
}
.location_info {
  display: flex;
  flex-direction: column;
  gap: 7px;
  max-width: 550px;
  margin-bottom: 24px;
}
.location_label {
  font-size: 26px;
  line-height: 1.5;
  color: #2c2d32;
}
.location_text {
  border-left: 1px solid #2c2d32;
  padding: 10px 16px;
  display: flex;
  flex-direction: column;
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: #5a5a5a;
}
.location_map {
  position: absolute;
  right: 0;
  top: 0;
  width: 432px;
  height: 400px;
}
.location_map img { width: 100%; height: 100%; object-fit: cover; }
.location_map iframe { width: 100%; height: 100%; border: 0; display: block; }

/* MAP에 고정돼 있는 동안(js/flagship.js) 지도는 휠·클릭을 받지 않습니다.
   iframe이 휠을 삼키면 커서가 지도 위에 있을 때 고정을 풀 길이 없습니다.
   지도를 한 번 클릭하면 이 클래스가 벗겨져 평소 지도로 돌아옵니다. */
.location.is_map_locked .location_map iframe { pointer-events: none; }

/* FOOTER styling now comes from the shared components/footer/footer.css. */

/* =========================================================
   Scroll reveal (JS) — prefers-reduced-motion 사용자에게는
   숨김/이동 없이 처음부터 최종 상태로 보여줍니다.
   ========================================================= */
@media (prefers-reduced-motion: no-preference) {
  .will_reveal {
    opacity: 0;
    transform: translateY(24px);
    transition: opacity .7s ease, transform .7s ease;
  }
  .will_reveal.is_visible {
    opacity: 1;
    transform: translateY(80px);
  }
}

@media (prefers-reduced-motion: reduce) {
  .hero_btn,
  .footer_pill,
  .footer_sns_btn {
    transition: none;
  }
  .hero_btn:hover {
    transform: none;
  }
}