/* =========================================================
   Sulwhasoo · Brand Story page
   ========================================================= */
* { margin: 0; padding: 0; box-sizing: border-box; }

html, body {
  background: var(--color-cream);
}

body {
  font-family: var(--font-primary);
  color: var(--color-black);
}

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

/* .page is a fixed 1920px canvas. On narrower viewports (360/768/1280),
   brand_story.js scales it down via transform so nothing overflows horizontally.
   .stage uses overflow-x: clip (not hidden) so it doesn't become a scroll
   container — overflow-x: hidden would force overflow-y: auto and break any
   position: sticky descendants. */
.stage {
  width: 100%;
  overflow-x: clip;
  overflow-y: visible;
}
.page {
  width: var(--page-width);
  margin: 0 auto;
  /* overflow: hidden(양축)이면 .page가 스스로 스크롤하지 않는데도
     position: sticky/GSAP pin의 "가장 가까운 스크롤 조상"이 되어버려,
     고정 요소가 실제 뷰포트 스크롤을 못 따라가는 버그가 있었다.
     가로만 클리핑하고 세로는 흘려보내 뷰포트 기준 스크롤을 그대로 따르게 한다.
     주의: overflow-x:hidden + overflow-y:visible 조합은 스펙상 visible이
     auto로 강제 승격되어 다시 스크롤 조상이 되어버린다 — 반드시 clip을 써야
     visible이 실제로 유지된다(.stage가 이미 쓰던 것과 동일 패턴). */
  overflow-x: clip;
  overflow-y: visible;
  transform-origin: top left;
}

/* ---------- shared type ---------- */
.eyebrow {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.42px;
  text-transform: uppercase;
  line-height: 1.4;
  color: var(--color-black);
}
.eyebrow_muted { color: var(--color-gray-light); }
.eyebrow_orange { color: var(--color-orange); }

.caption_sm {
  font-weight: 300;
  font-size: 10px;
  letter-spacing: 2px;
  text-transform: uppercase;
  line-height: 1;
  color: var(--color-gray-dark);
}

.divider_orange {
  border-top: 1px solid var(--color-orange);
  padding-top: 24px;
}

.play_btn {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border-radius: 24px;
  border: 1px solid rgba(242, 237, 227, 0.6);
  color: var(--color-cream-2);
  font-size: 13px;
  cursor: pointer;
  background: rgba(0, 0, 0, 0.1);
  transition: transform .2s ease, background .2s ease;
}
.play_btn:hover { transform: scale(1.08); background: rgba(0, 0, 0, 0.25); }

.btn_pill {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 16px 31px;
  border: 1px solid var(--color-gray);
  border-radius: var(--radius-pill);
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.42px;
  text-transform: uppercase;
  color: var(--color-black);
  text-decoration: none;
  transition: background .2s ease, color .2s ease;
}
.btn_pill:hover { background: var(--color-black); color: var(--color-cream); border-color: var(--color-black); }
.btn_pill_sm { font-size: 9px; letter-spacing: 3.06px; padding: 14px 24px; }

/* =========================================================
   HERO · Holistic Beauty (Scroll Expand)
   하나의 프레임이 스크롤에 따라 작은 라운드 프레임 → 풀블리드로 확장된 뒤
   그 자리에 고정되고, 그 위로 Brand Story → Beauty that defies.../Holistic
   Beauty → Detailed Description(인용문) 3단계 텍스트가 순서대로 나타나는
   인터랙션 (GSAP ScrollTrigger, js/brand_story.js 참고)
   ========================================================= */
.hero { width: 100%; }

.scroll_expand {
  position: relative;
  width: 100%;
  height: 960px;
  overflow: hidden;
  background: var(--color-cream);
}
.scroll_expand_frame {
  position: absolute;
  inset: 0;
  clip-path: inset(21% 29% 21% 29% round 24px);
  overflow: hidden;
  will-change: clip-path;
}
.scroll_expand_media {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
}
.scroll_expand_scrim {
  position: absolute;
  inset: 0;
  pointer-events: none;
  background: linear-gradient(to top, rgba(0, 0, 0, 0.75), rgba(0, 0, 0, 0.1) 45%, rgba(0, 0, 0, 0.35));
  opacity: 0;
}

.scroll_expand_copy {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 6%;
  text-align: center;
  text-shadow: 0 2px 24px rgba(0, 0, 0, 0.45);
  pointer-events: none;
}
.se_stage {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 32px;
  opacity: 0;
  will-change: opacity, transform;
}

/* Stage 1 · Brand Story — 최초 진입 시 가장 먼저 보이는 라벨, 색상 효과 없음 */
.se_brand {
  margin: 0;
  font-weight: 300;
  font-size: 48px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-white);
}

/* Stroke Text — "Brand Story" 라벨의 윤곽선 드로우인 인터랙션.
   js/brand_story.js initStrokeText()가 [data-stroke-text] span 안의 텍스트를
   SVG(stroke tspan + fill tspan)로 교체하고 GSAP으로 애니메이션한다.
   JS가 실패하거나 비활성화되면 span은 일반 텍스트 노드로 남아
   위 .se_brand 스타일(흰색/48px/uppercase)이 그대로 적용되는 fallback이다. */
.stroke_text {
  display: inline-block;
  line-height: 0;
}
.stroke_text_svg {
  display: block;
  width: auto;
  max-width: 100%;
  height: var(--stroke-text-height, 58px);
  overflow: visible;
}
.stroke_text_stroke,
.stroke_text_fill {
  font-family: inherit;
  font-size: 84px; /* 48px는 채워지는 게 거의 안 보일 만큼 글자 속이 좁고, 120px는 프레임에
                       꽉 차 보여서 그 중간으로 조정 (텍스트 자체는 opacity 페이드로만
                       빠르게 사라지므로 히어로 레이아웃에는 영향 없음) */
  font-weight: 300;
  letter-spacing: 2px;
  user-select: none;
}
.stroke_text_stroke {
  fill: none;
  stroke: var(--color-white);
  stroke-width: 1.6px; /* 줄어든 폰트 사이즈에 맞춰 비례 조정 */
  stroke-linejoin: round;
  stroke-linecap: round;
}
.stroke_text_fill {
  fill: var(--color-white);
  stroke: none;
}

/* Stage 3 · Detailed Description — 프레임 고정 상태에서 아래→위로 슬라이드 */
.se_stage_desc { gap: 16px; }

.hero_eyebrow, .hero_title, .hero_quote { color: var(--color-white); }
.hero_eyebrow {
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 4.42px;
  text-transform: uppercase;
}
.hero_title {
  font-weight: 300;
  font-size: 160px;
  letter-spacing: -4px;
  line-height: 1;
}
.hero_quote {
  font-weight: 300;
  font-size: 40px;
  line-height: 1.4;
  max-width: 1200px;
}

/* Stage 2 · eyebrow와 타이틀이 순서대로 흰색 → 오렌지로 채워지는 필 효과
   (--fill은 js/brand_story.js에서 각 요소별로 갱신). .hero_eyebrow/.hero_title의
   기본 color:white보다 뒤에 와야 이 규칙이 이긴다. */
.se_fill {
  background-image: linear-gradient(
    to right,
    var(--color-orange-deep) 0%,
    var(--color-orange-deep) var(--fill, 0%),
    var(--color-white) var(--fill, 0%),
    var(--color-white) 100%
  );
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
}

@media (prefers-reduced-motion: reduce) {
  .scroll_expand { overflow: visible; }
  .scroll_expand_frame { clip-path: inset(0 round 0); }
  .scroll_expand_media { transform: none; }
  .scroll_expand_scrim { opacity: 0.45; }
  .se_brand { display: none; }
  .se_stage_main, .se_stage_desc { opacity: 1; transform: none; position: static; gap: 32px; }
  .se_fill { background-image: none; -webkit-background-clip: initial; background-clip: initial; color: var(--color-white); }
  .scroll_expand_copy { position: static; flex-direction: column; gap: 48px; padding: 120px 6%; }
}

/* =========================================================
   OUR HERITAGE — Figma node 4557:568. 11개 연혁이 전부 같은 크기·풀컬러로
   보이는 아카이브 타임라인이 오른쪽에서 왼쪽으로 끊김 없이 자동으로 흐른다
   (js/brand_story.js initHeritageMarquee — product.css/product.js의
   .product_grid_track/.product_grid 베스트셀러 마퀴와 동일한 기법: 세트를
   한 번 복제해 이어붙이고, translateX가 원본 세트 폭만큼 이동하면 0으로
   되돌려 반복). 제목 페이드인은 다른 섹션들과 같은 범용 .will_reveal
   시스템을 그대로 재사용.
   ※ 이 블록의 좌표(패딩/간격/폰트 크기 등)는 Figma MCP 연결이 끊긴 상태에서
   스크린샷을 보고 근사치로 잡은 값이다 — 연결되면 정확한 수치로 다시 맞출 것.
   ========================================================= */
.heritage {
  position: relative;
  width: 100%;
  background: var(--color-cream);
  padding: 96px 0 160px;
  overflow: hidden;
}
/* 하단의 은은한 오렌지 그러데이션 — Figma에 있던 장식용 배경 워시.
   .heritage_inner(z-index:1)보다 아래에 깔린다. */
.heritage::after {
  content: '';
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 280px;
  background: linear-gradient(to bottom, rgba(232, 110, 37, 0) 0%, rgba(232, 110, 37, 0.16) 100%);
  pointer-events: none;
  z-index: 0;
}
/* .heritage는 (여전히 pin을 쓰는 .approach와 마찬가지 이유로) .stage/.page
   밖의 real px 형제라, 좁은 뷰포트에서 .page가 대신 해주던 --stage-scale
   축소를 못 받는다 — 여기서 직접 적용한다. margin:0 auto로 이미 폭
   100%(.heritage) 기준 가운데 정렬돼 있으니, scale도 자기 중심(top center)
   기준으로 걸면 별도 래퍼 없이 그대로 가운데를 유지하며 줄어든다. */
.heritage_inner {
  position: relative;
  z-index: 1;
  width: 1920px;
  margin: 0 auto;
  transform: scale(var(--stage-scale, 1));
  transform-origin: top center;
}
.heritage_head {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding-left: 32px;
  margin-bottom: 72px;
}
.heritage_eyebrow {
  font-weight: 400;
  font-size: 13px;
  color: var(--color-gray-mid);
}
.heritage_title {
  font-weight: 500;
  font-size: 40px;
  line-height: 1.1;
  color: var(--color-black);
}

/* 이미지·연도·점·선 자체가 타임라인이다. .heritage_track이 자르는 창
   (overflow:hidden, transform 없음 — product.css .product_grid_track과
   동일 역할), .heritage_group이 실제 애니메이션 대상(width:max-content,
   js가 .heritage_item을 복제해 뒤에 이어붙인다). */
.heritage_row {
  position: relative;
}
.heritage_track {
  overflow: hidden;
  padding: 0 32px;
}
.heritage_group {
  position: relative;
  display: flex;
  gap: 24px;
  width: max-content;
  will-change: transform;
}
/* left:0/right:0라 width:max-content로 폭이 늘어나는 .heritage_group을
   그대로 따라가 늘어난다 — 복제로 항목이 2배가 돼도 선을 따로 이어붙일
   필요가 없다. */
.heritage_row_line {
  position: absolute;
  left: 0;
  right: 0;
  top: 188px; /* 이미지(160) + margin-bottom(24) + dot 중심(4) */
  height: 1px;
  background: rgba(14, 12, 9, 0.2);
  z-index: 0;
}
.heritage_item {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  width: 190px;
  flex-shrink: 0;
}
.heritage_item_img {
  width: 160px;
  height: 160px;
  overflow: hidden;
  margin-bottom: 24px;
  box-shadow: 0 8px 20px rgba(14, 12, 9, 0.14);
  transition: transform .3s ease, box-shadow .3s ease;
}
.heritage_item_img img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}
/* 항목 hover 확대+그림자 — philosophy_card:hover img / gr_card:hover와
   같은 톤의 기존 관용구를 그대로 재사용(새 디자인 아님). */
.heritage_item:hover .heritage_item_img {
  transform: scale(1.04);
  box-shadow: 0 22px 46px rgba(26, 21, 18, .22);
}
.heritage_item_dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--color-orange-deep);
  margin-bottom: 20px;
}
.heritage_year {
  font-weight: 600;
  font-size: 17px;
  color: var(--color-black);
}
.heritage_event {
  margin-top: 6px;
  font-weight: 500;
  font-size: 13px;
  line-height: 1.3;
  color: var(--color-black);
}
.heritage_sub {
  margin-top: 4px;
  font-weight: 300;
  font-size: 9px;
  letter-spacing: 1px;
  text-transform: uppercase;
  color: var(--color-gray-mid);
}

/* =========================================================
   OUR APPROACH — Figma 원본(node 4307:517) 좌표를 그대로 사용.
   인터랙션: 오브 → 왼쪽 바깥 곡선 → 컬럼1 → 커넥터 → 컬럼2 → 커넥터 →
   컬럼3 → 오른쪽 바깥 곡선(다시 오브 쪽으로 이어짐) 순서로 한 번만 재생.
   스크롤 중 화면에 고정된 채로 이 시퀀스가 다 재생되도록 ritual/heritage와
   같은 3단 pin 구조(.approach_pin → .approach_pin_inner → .approach_inner)를
   쓴다(js/brand_story.js initApproachOrbit, GSAP ScrollTrigger pin).
   ========================================================= */
.approach {
  position: relative;
  background: var(--color-cream);
}
/* pin 대상(js data-approach-pin) — ritual_pin/heritage_pin과 같은 이유로
   .stage/.page(반응형 scale 조상) 밖의 real px라서 100vh만으로 정확히
   뷰포트 전체를 채운다. */
.approach_pin {
  position: relative;
  width: 100%;
  height: 100vh;
  overflow: hidden;
  background: var(--color-cream);
}
/* 1920x1080 캔버스(.approach_inner)를 여기서 --stage-scale로 축소·중앙정렬한다
   — ritual_pin_inner와 동일한 패턴. */
.approach_pin_inner {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  transform: scale(var(--stage-scale, 1));
}
.approach_inner {
  position: relative;
  width: 1920px;
  height: 1080px;
  flex: none;
}

.approach_subtitle {
  position: absolute;
  left: 242px;
  top: 132px;
  margin: 0;
  font-weight: 400;
  font-size: 13px;
  letter-spacing: 2px;
  text-transform: uppercase;
  color: var(--color-black);
}
.approach_title {
  position: absolute;
  left: 238px;
  top: 175px;
  margin: 0;
  font-weight: 600;
  font-size: 40px;
  letter-spacing: -0.4px;
  color: var(--color-black);
}

.approach_col {
  position: absolute;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  /* 궤도 라인이 본문 텍스트를 가로질러도 글자가 묻히지 않도록 살짝 배경을 깔아준다 */
  background: var(--color-cream);
}
.approach_desc { background: var(--color-cream); }
.approach_num {
  margin: 0;
  font-weight: 600;
  font-size: 12px;
  letter-spacing: -0.636px;
  color: var(--color-orange-2);
}
.approach_name {
  margin: 16px 0 0;
  font-weight: 600;
  font-size: 24px;
  line-height: 1;
  color: var(--color-orange-2);
}
.approach_desc {
  margin: 40px 0 0;
  font-weight: 300;
  font-size: 15px;
  line-height: 1.8;
  color: var(--color-gray-mid);
}

/* 오브를 지나 컬럼 1·2·3을 잇는 실제 타원 궤도 하나. path 길이는
   js/brand_story.js가 getTotalLength()로 재서 stroke-dasharray/dashoffset을
   설정하고 애니메이션한다 (실제로 "그려지는" 효과). */
.approach_orbit {
  position: absolute;
  inset: 0;
  width: 1920px;
  height: 1080px;
  pointer-events: none;
  overflow: visible;
}
.approach_dot {
  position: absolute;
  width: 8px;
  height: 8px;
  margin: -4px 0 0 -4px;
  border-radius: 50%;
  background: var(--color-black);
  opacity: 0.55;
}

.approach_orb { position: absolute; left: 655px; top: 693px; width: 630px; height: 328px; }
.approach_orb_glow { position: absolute; inset: 0; }
.approach_orb_txt {
  position: absolute;
  left: 175px;
  top: 111px;
  width: 248px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin: 0;
  font-weight: 600;
  font-size: 36px;
  line-height: 1.15;
  text-transform: uppercase;
  color: var(--color-white);
}
.approach_orb_txt span:first-child { text-align: left; }
.approach_orb_txt span:last-child { text-align: right; }

/* ---- 순차 인터랙션 초기 상태: 오브 → 컬럼1 나타남 → 구간0 그려짐 →
   컬럼2 나타남 → 구간1 그려짐 → 컬럼3 나타남 → 구간2 그려짐 → 구간3(마무리)
   그려짐. 실제 타이밍은 js/brand_story.js의 GSAP 타임라인이 전담한다
   (섹션에 충분히 도착한 뒤에만 재생 시작). ---- */
.approach_col, .approach_orb { opacity: 0; }
.approach_col { transform: translateY(20px); }
.approach_orb { transform: scale(.92); transform-origin: center; }
.approach_dot { opacity: 0; }
[data-approach-orbit-seg] { will-change: stroke-dashoffset; }

/* =========================================================
   RAW MATERIAL STORY
   ========================================================= */
/* margin-top: pin 박스(.raw_material_pin) "안"의 padding과는 별개로, Approach
   섹션이 끝나고 이 섹션이 시작되는 문서 흐름상의 경계 자체에 여백을 준다 —
   pin 중 세로 중앙정렬/축소(scale-to-fit) 로직과 무관하게, pin이 걸리기
   전/풀린 후 정상 스크롤 구간에서만 작용한다(2026-08-11, 두 섹션이 붙어
   겹쳐 보이던 문제 수정). */
.raw_material { background: var(--color-cream); margin-top: 100px; }
/* JS(initRawMaterialReveal)가 pin을 걸 때만 height/overflow를 인라인으로
   100vh에 맞춰 덮어쓴다 — 여기 padding은 reduced-motion·GSAP 미지원 등
   JS가 아무 것도 안 하는 폴백 상태에서 자연스러운 스크롤 흐름으로 보일 때
   쓰는 기본값이다(2026-08-11, pin 도중 콘텐츠가 화면 아래로 잘리던 문제 수정). */
.raw_material_pin {
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 100px 0;
}
.raw_material_inner { width: 1573px; transform-origin: center center; }
.raw_material_title {
  font-weight: 600;
  font-size: 40px;
  line-height: 1.3;
  color: var(--color-black);
}
.raw_material_intro {
  display: flex;
  justify-content: space-between;
  gap: 64px;
  padding-top: 40px;
  max-width: 1573px;
}
.raw_material_quote_block { max-width: 620px; flex: 0 0 auto; }
.raw_material_quote {
  font-weight: 400;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-gray-mid);
  white-space: nowrap;
}
.raw_material_since {
  font-weight: 300;
  font-size: 13px;
  line-height: 1.5;
  color: var(--color-gray-mid);
  padding-top: 16px;
}
.raw_material_desc {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-gray-dark);
  max-width: 646px;
}

/* height는 실제 이미지 4장이 차지하는 최대 bottom(img4: top 301 + height 171
   = 472px)에 box-shadow 여유분을 더한 값이다 — 예전 626px는 이 아래로
   ~154px짜리 빈 공간이었는데, pin 상태에서 .raw_material_inner 전체를 세로
   가운데 정렬하다 보니 그 숨은 빈 공간 때문에 실제 콘텐츠(타이틀+사진)가
   위로 쏠리고 여백이 아래에만 몰려 보이는 문제가 있었다(2026-08-11 수정). */
.raw_material_collage {
  position: relative;
  height: 480px;
  margin-top: 88px;
}
.rm_img {
  position: absolute;
  border-radius: 4px;
  object-fit: cover;
  transform-origin: center center;
  will-change: transform;
}
/* 위치/크기(top·left·width·height)는 Figma 좌표 그대로 — z-index만 명시해
   깊이감을 준다: 2(메인 비주얼)가 1 위, 4(작은 디테일)가 가장 위에 뜬
   floating specimen처럼 보이도록 2·3보다도 위에 오게 한다
   (js/brand_story.js initRawMaterialReveal의 에디토리얼 패럴랙스와 짝,
   2026-08-11). 실제 스크롤 중 움직임은 transform(translate/scale/rotate)
   만 건드리고 이 top/left/width/height는 건드리지 않는다. */
.rm_img_1 { left: 0; top: 0; width: 541px; height: 363px; z-index: 1; }
.rm_img_2 { left: 494px; top: 89px; width: 486px; height: 327px; z-index: 3; }
.rm_img_3 { left: 1081px; top: 117px; width: 381px; height: 321px; z-index: 2; }
.rm_img_4 { left: 950px; top: 301px; width: 182px; height: 171px; box-shadow: 0 12px 32px rgba(0,0,0,.2); z-index: 4; }

/* =========================================================
   RADIANT AND RESILIENT SKIN
   ========================================================= */
.skin_science { background: var(--color-cream); padding: 200px 192px; }
.skin_science_quote {
  font-weight: 600;
  font-size: 40px;
  color: var(--color-black);
  white-space: nowrap;
  padding-bottom: 160px;
}
.skin_science_row {
  display: grid;
  grid-template-columns: 388px 1fr;
  gap: 96px;
  align-items: start;
  padding-bottom: 160px;
}
.skin_science_row_reverse { grid-template-columns: 1fr 388px; }

/* media/text/collage/drugs의 opacity·transform 초기값은 여기 CSS에 두지
   않는다 — js/brand_story.js initSkinScienceReveal이 GSAP/ScrollTrigger를
   확인한 뒤에만 인라인 스타일로 숨김→등장을 직접 제어하고(각 로우 자신의
   스크롤 스크럽에 물림, Raw Material Story와 같은 원리), reduced-motion·
   GSAP 미지원이면 아무 것도 안 건드려 아래 기본값(=항상 보임) 그대로
   둔다(2026-08-11, 예전 .will_reveal_scale/.is_visible 1회성 리빌 대체). */
.skin_science_media { overflow: hidden; border-radius: 4px; }
.skin_science_media img {
  width: 100%;
  height: auto;
  border-radius: 4px;
  object-fit: cover;
}
.skin_science_media figcaption { padding-top: 16px; }
.skin_science_media_accent figcaption { padding-top: 0; padding-bottom: 16px; }

.skin_science_drugs {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 16px;
  padding-bottom: 8px;
}
.skin_science_drugs img { width: 48px; height: 48px; object-fit: cover; border-radius: 50%; }

.skin_science_text { display: flex; flex-direction: column; gap: 24px; }
.skin_science_subtitle {
  font-weight: 300;
  font-size: 22px;
  line-height: 1.8;
  color: var(--color-black);
}
.skin_science_desc {
  font-weight: 300;
  font-size: 16px;
  line-height: 1.5;
  color: var(--color-gray-mid);
}

.skin_science_collage {
  width: 100%;
  aspect-ratio: 1 / 1;
  object-fit: cover;
  border-radius: 4px;
}

/* =========================================================
   THE ART OF HERITAGE / CULTURAL PHILOSOPHY
   ========================================================= */
.philosophy { background: var(--color-cream); }
.philosophy_hero {
  position: relative;
  width: 100%;
  height: 1080px;
  overflow: hidden;
}
.philosophy_hero_media { position: absolute; inset: 0; overflow: hidden; }
/* 패럴랙스(스크롤=이동)와 켄번즈(항상=확대)를 서로 다른 요소에 나눠 걸어야
   두 transform이 서로를 덮어쓰지 않는다: 바깥 래퍼는 GSAP가 translateY를,
   안쪽 미디어(이전엔 img, 지금은 배경 video)는 CSS 애니메이션이 scale을 담당한다. */
.philosophy_hero_kenburns { position: absolute; inset: 0; will-change: transform; }
/* 실제 높이보다 20% 크게 잡아, 확대/이동이 일어나도 빈틈이 보이지 않게 함.
   video도 img와 동일하게 object-fit:cover가 그대로 먹어서 같은 규칙을 공유한다. */
.philosophy_hero_kenburns img,
.philosophy_hero_kenburns video {
  position: absolute;
  top: -10%;
  left: 0;
  width: 100%;
  height: 120%;
  object-fit: cover;
  transform-origin: center;
  will-change: transform;
  animation: philosophy_kenburns 24s ease-in-out infinite alternate;
}
.philosophy_hero_kenburns video {
  /* 배경 연출 전용이라 재생바/클릭/우클릭 등 어떤 컨트롤도 노출되지 않게 한다
     (controls 속성 자체를 안 줬지만, 브라우저 기본 우클릭 메뉴까지 차단). */
  pointer-events: none;
}
@keyframes philosophy_kenburns {
  from { transform: scale(1); }
  to { transform: scale(1.1); }
}
.philosophy_hero_overlay {
  position: absolute;
  inset: 0;
  background: linear-gradient(to bottom, rgba(26,21,18,.55) 0%, rgba(26,21,18,.3) 55%, rgba(26,21,18,.92) 100%);
}
.philosophy_hero_txt {
  position: absolute;
  left: 192px;
  bottom: 100px;
  width: calc(100% - 384px);
  z-index: 1;
}
/* eyebrow → title → subtitle 순서로 여유 있게 등장하도록 시차를 둔다 */
.philosophy_hero_txt .eyebrow {
  opacity: 0;
  transform: translateY(10px);
  transition: opacity .6s ease, transform .6s ease;
}
.philosophy_hero_txt.is_visible .eyebrow { opacity: 1; transform: translateY(0); }
.philosophy_hero_title {
  font-weight: 300;
  font-size: 80px;
  line-height: 1.3;
  color: var(--color-white);
  padding-top: 24px;
  clip-path: inset(0 100% 0 0);
  transition: clip-path 1.7s cubic-bezier(.19, 1, .22, 1) .15s;
}
.philosophy_hero_txt.is_visible .philosophy_hero_title { clip-path: inset(0 0 0 0); }
.philosophy_hero_sub {
  font-weight: 300;
  font-size: 22px;
  line-height: 1.8;
  color: var(--color-gray-soft);
  padding-top: 48px;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity 1s ease .9s, transform 1s ease .9s;
}
.philosophy_hero_txt.is_visible .philosophy_hero_sub { opacity: 1; transform: translateY(0); }

.philosophy_grid {
  display: grid;
  grid-template-columns: 782px 380px 292px;
  grid-template-rows: 584px 370px;
  gap: 16px;
  width: 1588px;
  margin: 0 auto;
  padding: 300px 0;
}
.philosophy_intro {
  border: 1px solid var(--color-border-soft);
  border-radius: 8px;
  padding: 1px 49px;
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 16px;
}
.philosophy_intro_title {
  font-weight: 600;
  font-size: 48px;
  line-height: 1.33;
  color: var(--color-black);
}
.philosophy_intro_desc {
  font-weight: 300;
  font-size: 14px;
  line-height: 1.8;
  color: var(--color-gray-mid);
  max-width: 653px;
}
.philosophy_links { display: flex; gap: 16px; padding-top: 32px; }

.philosophy_card {
  position: relative;
  display: block;
  border-radius: 8px;
  overflow: hidden;
  text-decoration: none;
  grid-row: span 1;
  min-height: 0;
  min-width: 0;
}
.philosophy_card img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform .6s ease;
}
.philosophy_card:hover img { transform: scale(1.04); }
.philosophy_card::after {
  content: "";
  position: absolute;
  inset: 0;
  background: linear-gradient(to top, rgba(0,0,0,.85) 0%, rgba(0,0,0,.35) 55%, rgba(0,0,0,0) 100%);
  transition: background .4s ease;
}
.philosophy_card:hover::after {
  background: linear-gradient(to top, rgba(0,0,0,.92) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,0) 100%);
}
.philosophy_card_txt {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 1;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.philosophy_card_eyebrow {
  font-weight: 600;
  font-size: 12px;
  letter-spacing: 1.2px;
  color: var(--color-orange-3);
}
.philosophy_card_title {
  font-weight: 600;
  font-size: 32px;
  line-height: 1.25;
  color: var(--color-cream-2);
}

.philosophy_card_heritage { grid-column: 2; grid-row: 1; }
.philosophy_card_project { grid-column: 3; grid-row: 1 / 2; align-self: start; height: 284px; }
.philosophy_card_archive1 { grid-column: 3; grid-row: 1 / 2; align-self: end; height: 284px; }
.philosophy_card_archive1 .philosophy_card_title,
.philosophy_card_project .philosophy_card_title { font-size: 24px; }
.philosophy_card_archive2 { grid-column: 1; grid-row: 2; }
.philosophy_card_archive3 { grid-column: 2 / span 2; grid-row: 2; }
.philosophy_card_archive2 .philosophy_card_title,
.philosophy_card_archive3 .philosophy_card_title { font-size: 24px; }

/* =========================================================
   GREEN RESULTS
   ========================================================= */
.green_results { background: var(--color-cream); padding: 300px 0; display: flex; justify-content: center; }
.green_results_inner { position: relative; width: 1618px; height: 1197px; }
.green_results_title {
  position: absolute;
  left: 32px;
  top: 31px;
  font-weight: 600;
  font-size: 60px;
  line-height: 1.2;
  letter-spacing: -1.2px;
  color: var(--color-black);
}

.gr_card {
  position: absolute;
  background: var(--color-cream-peach);
  border-radius: 0 40px 40px 40px;
  padding: 34px 46px;
  color: var(--color-black);
  overflow: hidden;
  transition: transform .45s cubic-bezier(.22, 1, .36, 1), box-shadow .45s ease, color .35s ease .08s;
}
/* 기본 FFDBC2 → 호버 시 바닥에서부터 FF6300 바가 천천히 차오른다. 이미 강조색인
   accent 카드는 대상에서 제외하고, 대신 살짝 떠오르는 느낌으로만 반응한다. */
.gr_card::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0%;
  background: var(--color-orange-deep);
  transition: height .6s cubic-bezier(.22, 1, .36, 1);
  z-index: 0;
}
.gr_card:hover { transform: translateY(-6px); box-shadow: 0 24px 48px rgba(26, 21, 18, .16); }
/* 순수 CSS 사각형 wipe: js/brand_story.js initGreenResultsLiquid()가 정상 동작하면
   .green_results에 gr_liquid_js가 붙어 아래 두 규칙이 꺼지고, 대신 천천히 차오르는
   바 인터랙션(.gr_card_liquid 이하)이 자리를 대신한다. GSAP 미로드/
   reduced-motion처럼 JS가 못 켜지는 경우의 안전망(fallback)으로 남겨둔다.
   gr_card_accent도 이제 다른 카드와 동일하게 기본 peach 배경에서 시작해
   hover로만 채워지므로 더 이상 제외하지 않는다. */
.green_results:not(.gr_liquid_js) .gr_card:hover::after { height: 100%; }
.green_results:not(.gr_liquid_js) .gr_card:hover,
.gr_card.is_liquid_filled { color: var(--color-white); } /* is_liquid_filled: JS가 바가 다 찬 시점에 붙인다 */
/* .gr_card_accent: 예전엔 상시 오렌지 배경(강조 카드)이었지만, 이제 다른
   카드와 완전히 같은 기본 상태(peach 배경)에서 시작해 hover 시에만 다른
   카드와 동일한 리퀴드 인터랙션으로 채워진다 — 그래서 별도 색상
   규칙 없이 .gr_card 기본값을 그대로 따른다. */

/* ---- 바 채우기 호버 (JS): 카드 바닥에서 오렌지 바가 천천히 차오른다.
   실제 상승은 js/brand_story.js initGreenResultsLiquid()가 맡고, 여기는
   시각 스타일만 정의한다. .gr_card_liquid는 항상 title/desc/stat
   (z-index:1)보다 먼저(DOM상 첫 자식) 와서 그 아래(z-index:0)에 깔린다. */
.gr_card_liquid {
  position: absolute;
  inset: 0;
  overflow: hidden;
  pointer-events: none;
  z-index: 0;
}
.gr_card_liquid_mass {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 0; /* JS(GSAP)가 호버 진행에 맞춰 0%→100%로 천천히 갱신 */
  background: var(--color-orange-deep);
}
.gr_card_title,
.gr_card_desc {
  position: relative;
  z-index: 1;
}
.gr_card_stat,
.gr_card_stat_label {
  z-index: 1;
}
.gr_card_title {
  font-weight: 300;
  font-size: 30px;
  letter-spacing: -1.59px;
  line-height: 1.3;
  max-width: 90%;
}
.gr_card_desc {
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
  padding-top: 18px;
  max-width: 95%;
  opacity: .9;
}
.gr_card_stat {
  position: absolute;
  right: 44px;
  bottom: 46px;
  font-weight: 400;
  font-size: 64px;
  line-height: 1;
}
.gr_card_stat_label {
  position: absolute;
  right: 44px;
  bottom: 24px;
  font-weight: 300;
  font-size: 12px;
  line-height: 1.8;
}

/* FOOTER — 공용 컴포넌트(components/footer/footer.css)를 그대로 사용합니다. */

/* =========================================================
   Lightbox (JS)
   ========================================================= */
.brand_story_lightbox {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0);
  display: none;
  align-items: center;
  justify-content: center;
  z-index: 1000;
  transition: background .45s ease;
}
.brand_story_lightbox.is_open { display: flex; }
.brand_story_lightbox.is_open_anim { background: rgba(0, 0, 0, 0.85); }
.brand_story_lightbox_img {
  max-width: 86vw;
  max-height: 86vh;
  object-fit: contain;
  border-radius: 4px;
  opacity: 0;
  transform: scale(0.9);
  transition: opacity .45s cubic-bezier(.22, 1, .36, 1), transform .45s cubic-bezier(.22, 1, .36, 1);
}
.brand_story_lightbox.is_open_anim .brand_story_lightbox_img { opacity: 1; transform: scale(1); }
.will_reveal {
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .7s ease, transform .7s ease;
}
.will_reveal.is_visible {
  opacity: 1;
  transform: translateY(0);
}

/* 제품/오브 등 "더 힘을 주고 싶은" 비주얼에 쓰는 스케일 리빌 (단순 페이드와 위계 구분) */
.will_reveal_scale {
  opacity: 0;
  transform: scale(0.94);
  transition: opacity .8s ease, transform .8s ease;
}
.will_reveal_scale.is_visible {
  opacity: 1;
  transform: scale(1);
}

.brand_story_lightbox_close {
  position: absolute;
  top: 32px;
  right: 40px;
  width: 44px;
  height: 44px;
  border-radius: 22px;
  border: 1px solid rgba(255, 255, 255, 0.5);
  color: #fff;
  background: transparent;
  font-size: 20px;
  cursor: pointer;
}

@media (prefers-reduced-motion: reduce) {
  .will_reveal,
  .will_reveal_scale,
  .approach_inner [data-approach-order],
  .skin_science_drugs img,
  .skin_science_media img,
  .skin_science_subtitle,
  .skin_science_desc,
  .philosophy_card img,
  .philosophy_hero_txt .eyebrow,
  .philosophy_hero_title,
  .philosophy_hero_sub,
  .brand_story_lightbox_img {
    opacity: 1 !important;
    transform: none !important;
    transition: none !important;
    clip-path: none !important;
  }
  .philosophy_hero_kenburns img,
  .philosophy_hero_kenburns video { animation: none !important; transform: none !important; }
  .approach_orbit path { stroke-dashoffset: 0 !important; }
  .approach_dot { opacity: 0.55 !important; }
}