/* Brand Story: 선언 비주얼 · 출발점 · 품질 · 인증 기준 */
:root { --story-steel:#c1c5c9 }

/* ---------- Hero Visual 변형: 좌측 정렬 ---------- */
.hero-visual--story { justify-content:flex-start; min-height:680px; padding:96px; text-align:left }
.hero-visual--story .hero-visual__image { object-position:right center }
.hero-visual--story .hero-visual__overlay { background:#0000003d }
.hero-visual--story .hero-visual__copy { gap:32px }
.hero-visual--story .hero-visual__title { font-size:112px; line-height:1.1 }
.hero-visual--story .hero-visual__guide { line-height:1.3 }
.hero-visual--story .hero-visual__description { font:500 18px/24px var(--font-head) }

/* ---------- 01 출발점 ---------- */
.story-origin { padding-block:120px }
.story-origin__inner { display:grid; grid-template-columns:minmax(0,624fr) minmax(0,720fr); align-items:center; gap:96px }
.story-origin__copy { display:grid; gap:24px; justify-items:start }
.story-origin__label,.story-quality__label { font:500 18px/24px var(--font-head); color:var(--action-primary) }
.story-origin__title { font:700 72px/1.1 var(--font-head) }
.story-origin__local { font-size:28px; font-weight:700; line-height:42px; color:var(--text-heading) }
.story-origin__body { max-width:580px; line-height:24px; color:var(--text-body) }
.story-origin__address { width:100%; max-width:580px; padding-top:24px; border-top:1px solid var(--border); font:500 18px/24px var(--font-head); font-style:normal; color:var(--text-body) }
.story-origin__figure { margin:0; background:var(--color-black); color:white }
.story-map { position:relative; aspect-ratio:720/430; overflow:hidden }
.story-map__image,.story-map__art { position:absolute; inset:0; width:100%; height:100%; max-width:none }
.story-map__label { position:absolute; left:53.89%; top:63.49%; padding:6px 8px; background:var(--color-black); font-family:var(--font-head); font-weight:500 }
.story-map__city { display:block; font-size:18px; line-height:21px }
.story-map__region { display:block; margin-top:2px; font-size:9px; line-height:12px; color:var(--story-steel) }
.story-origin__caption { display:grid; gap:8px; padding:24px }
.story-origin__place { font:500 28px/36px var(--font-head) }
.story-origin__note { font-size:14px; line-height:20px; color:var(--story-steel) }

/* ---------- 02 품질: 이미지 · 문구 교차 ---------- */
.story-quality { padding-block:96px; overflow:hidden }
.story-quality--surface { background:var(--surface) }
.story-quality__inner { display:grid; grid-template-columns:minmax(0,768fr) minmax(0,672fr); align-items:center; gap:96px; width:80%; max-width:1536px; margin-inline:auto }
.story-quality--surface .story-quality__inner { grid-template-columns:minmax(0,672fr) minmax(0,768fr) }
.story-quality__media { aspect-ratio:768/560; overflow:hidden; background:var(--surface-on-dark) }
.story-quality__media img { width:100%; height:100%; object-fit:cover }
.story-quality__copy { display:grid; gap:32px }
.story-quality__title { font:700 64px/1.08 var(--font-head) }
.story-quality__local { font-size:26px; font-weight:700; line-height:1.75; color:var(--text-heading) }
.story-quality__body { font-size:18px; line-height:1.75; color:var(--text-body) }

/* ---------- 03 인증 기준 ---------- */
.story-assurance { padding-block:96px 112px; background:var(--color-black); color:white; text-align:center }
.story-assurance__inner { display:grid; gap:64px }
.story-assurance__label { font:500 18px/24px var(--font-head); color:var(--color-gold) }
.story-assurance__title { font:700 64px/1.08 var(--font-head); color:white }
.story-assurance__intro { font-size:18px; line-height:1.75; color:var(--story-steel) }
.story-assurance__list { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:48px }
.story-assurance__item { display:grid; justify-items:center; align-content:start; gap:24px }
.story-assurance__badge { display:grid; place-items:center; width:112px; height:112px; border-radius:50%; background:white }
.story-assurance__badge img { width:88px; height:88px; object-fit:contain }
.story-assurance__name { font:500 36px/42px var(--font-head); color:white }
.story-assurance__description { line-height:1.75; color:var(--story-steel) }

/* ---------- 반응형: 1599px 이하 ---------- */
@media(max-width:1599px) {
    .hero-visual--story { margin-inline:var(--gutter); padding:72px }
    .hero-visual--story .hero-visual__overlay { background:linear-gradient(90deg,#000000bf 0%,#00000099 60%,#00000040 100%) }
    .hero-visual--story .hero-visual__title { font-size:88px }
    .story-origin__inner { gap:64px }
    .story-origin__title { font-size:60px }
    .story-quality__inner { gap:64px; width:calc(100% - var(--gutter)*2) }
    .story-quality__copy { gap:24px }
    .story-quality__title,.story-assurance__title { font-size:52px }
    .story-quality__local { font-size:24px }
    .story-quality__body { font-size:16px }
}

/* ---------- 반응형: 1199px 이하 (태블릿) ---------- */
@media(max-width:1199px) {
    .hero-visual--story { min-height:480px; padding:56px 40px }
    .hero-visual--story .hero-visual__copy { gap:20px }
    .story-br { display:none }
    .hero-visual--story .hero-visual__title { font-size:72px }
    .story-origin { padding-block:72px }
    .story-origin__inner { grid-template-columns:minmax(0,1fr); gap:40px }
    .story-origin__body,.story-origin__address { max-width:none }
    .story-quality { padding-block:72px }
    .story-quality__inner,.story-quality--surface .story-quality__inner { grid-template-columns:repeat(2,minmax(0,1fr)); gap:40px }
    .story-quality__media { aspect-ratio:1 }
    .story-quality__copy { gap:16px }
    .story-quality__title { font-size:44px }
    .story-quality__local { font-size:20px; line-height:30px }
    .story-assurance { padding-block:72px 80px }
    .story-assurance__inner { gap:40px }
    .story-assurance__title { font-size:44px }
    .story-assurance__intro { font-size:16px }
    .story-assurance__list { gap:24px }
    .story-assurance__name { font-size:28px; line-height:36px }
    .story-assurance__description { font-size:15px }
}

/* ---------- 반응형: 767px 이하 (모바일) ---------- */
@media(max-width:767px) {
    .hero-visual--story { min-height:400px; padding:40px 24px }
    .hero-visual--story .hero-visual__overlay { background:#000000a6 }
    .hero-visual--story .hero-visual__title { font-size:clamp(40px,11.5vw,64px) }
    .hero-visual--story .hero-visual__description { font-size:16px; line-height:22px }
    .story-origin { padding-block:56px }
    .story-origin__label,.story-quality__label,.story-assurance__label { font-size:16px; line-height:22px }
    .story-origin__copy { gap:16px }
    .story-origin__title { font-size:clamp(40px,11.5vw,56px) }
    .story-origin__local { font-size:22px; line-height:32px }
    .story-map__region { display:none }
    .story-map__city { font-size:16px; line-height:18px }
    .story-map__label { padding:4px 6px }
    .story-origin__caption { padding:20px }
    .story-origin__place { font-size:24px; line-height:30px }
    .story-quality { padding-block:56px }
    .story-quality__inner,.story-quality--surface .story-quality__inner { grid-template-columns:minmax(0,1fr); gap:28px }
    .story-quality__media { aspect-ratio:768/560 }
    .story-quality__title,.story-assurance__title { font-size:clamp(34px,10vw,44px) }
    .story-assurance { padding-block:56px 64px }
    .story-assurance__inner { gap:28px }
    .story-assurance__list { grid-template-columns:minmax(0,1fr); gap:40px; margin-top:12px }
    .story-assurance__item { gap:16px }
    .story-assurance__description { font-size:16px }
}