/* ==========================================================================
   STORY 페이지 전용 스타일 — 기준: 00_확정디자인/스토리_08.png
   (시안 본문 폭 860px = 공통 본문 폭 1240px 기준으로 환산)
   ========================================================================== */

.story {
  padding-top: calc(clamp(32px, 7.2vw, 104px) * 0.793);   /* 메인: 메뉴바→본문 간격과 동일 */
  text-align: center;
}

/* 사진 공통: 비율 유지, 넘치는 부분만 잘라냄 (늘리지 않음) */
.story-media {
  margin-inline: auto;
  border-radius: var(--radius);
  overflow: hidden;
}
.story-media img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

/* 상단 와이드 사진 (시안 860×238) */
.story-media--wide {
  aspect-ratio: 860 / 238;
}
.story-media--wide img { object-position: 50% 72%; }

/* 하단 거실 사진 (시안 646×304, 본문 폭의 약 75%) */
.story-media--living {
  width: min(931px, 100%);
  aspect-ratio: 646 / 304;
  margin-top: clamp(56px, 6.7vw, 96px);
}
.story-media--living img { object-position: 50% 50%; }

/* COLARME STORY 제목 */
.story-title {
  margin-top: clamp(56px, 6.7vw, 96px);
  font-family: var(--f-display);
  font-size: var(--fs-display);
  font-weight: 300;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--c-yellow);
  text-transform: uppercase;
}
.story-title strong { font-weight: 700; }

/* 국문·영문 문단 */
.story-ko {
  font-family: var(--f-ko);
  font-size: var(--fs-body-ko);
  font-weight: 400;
  line-height: 1.5;
}
.story-en {
  font-family: var(--f-body);
  font-size: var(--fs-body);
  font-weight: 400;
  line-height: 1.45;
  color: var(--c-text-sub);
}

/* 소개 문단: 리드 카피 크기 */
.story-intro .story-ko { margin-top: clamp(18px, 1.7vw, 24px); font-size: var(--fs-sub-ko); line-height: 1.45; }
.story-intro .story-en { margin-top: 10px; font-size: var(--fs-sub); line-height: 1.45; }   /* 한글과 한 묶음 */

/* 함께 머무는 여유 */
.story-feature { margin-top: clamp(36px, 4.4vw, 64px); }
.story-heading-ko {
  font-family: var(--f-ko);
  font-size: var(--fs-sub-ko);
  font-weight: 600;
  line-height: 1.3;
}
.story-heading-en {
  font-family: var(--f-body);
  font-size: var(--fs-sub);
  font-weight: 700;
  line-height: 1.3;
}
.story-feature .story-ko { margin-top: 10px; }
.story-feature .story-heading-en { margin-top: 16px; }   /* 한글 묶음 바로 아래 영문 묶음 */
.story-feature .story-en { margin-top: 6px; }

/* ==========================================================================
   반응형
   ========================================================================== */
@media (max-width: 900px) {
  .story { padding-top: calc(12px * 0.395); }   /* 메인 모바일과 동일 */
}

@media (max-width: 640px) {
  .story-media--wide { aspect-ratio: 2 / 1; }
  .story-media--living { aspect-ratio: 3 / 2; }
}