/* ═══════════════════════════════════════════════════════════════════════════
   5230 BRAND — 브랜드 소개 전용 스타일 (S8-21 · S8-22 개편)
   공통 룩앤필(--ink/--grey/--line/--bg/--card/--accent, 헤더·푸터)은
   css/main5230.css 를 재사용한다.

   ★ 사진 안에는 글자가 없다. 생성 모델은 한글을 제대로 못 써서(자모가 깨진다)
     이미지에 문구를 넣으면 그 자체가 신뢰를 깎는다. 글은 전부 HTML 이고,
     사진 위에 얹을 때는 **어둠막(scrim)** 을 깔아 읽히게 한다 — 메인 히어로와 같은 방식.

   ★ 리듬 — 전부 같은 형태로 이어지면 스크롤이 지루해진다.
       ① 덮기(hero)  ② 글만  ③ 나란히  ④ 덮기  ⑤ 나란히  ⑥ 마무리
     '덮기'는 크게 보여줄 사진에만 쓴다.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  --bd-hero:   url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/brand_hero.webp');
  --bd-fabric: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/brand_fabric.webp');
  --bd-look:   url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/brand_look.webp');
  --bd-studio: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/brand_studio.webp');
  --bd-sewing: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/brand_sewing.webp');
  --bd-stitch: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/brand_stitch.webp');
  --bd-market: url('https://pub-d299de678d4f45f18e8b75dcfea7f543.r2.dev/elcorp/brand_market.webp');
  /* 사진 위 글자를 읽히게 하는 어둠막. 아래는 진하게, 위는 사진 그대로 —
     전체를 균일하게 덮으면 옷 색이 실제와 달라 보인다. */
  --bd-scrim: linear-gradient(to top, rgba(18,14,11,0.78) 0%, rgba(18,14,11,0.34) 42%, rgba(18,14,11,0.04) 78%);
}

.bd { padding: 0 0 90px; }

.bd-crumb {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 20px 30px 0;
  font-size: 12px;
  letter-spacing: 0.14em;
  color: var(--grey);
}
.bd-crumb a:hover { color: var(--ink); }
.bd-crumb b { color: var(--ink); font-weight: 700; }

/* ── 공통 타이포 ───────────────────────────── */
.bd-eyebrow,
.bd-sec-label {
  font-size: 12px;
  font-weight: 800;
  letter-spacing: 0.28em;
  color: var(--accent);
  margin-bottom: 14px;
}
.bd-title {
  font-size: clamp(34px, 5.4vw, 68px);
  font-weight: 900;
  line-height: 1.16;
  letter-spacing: -0.015em;
  margin-bottom: 20px;
}
.bd-sec-title {
  font-size: clamp(24px, 3.2vw, 40px);
  font-weight: 900;
  line-height: 1.3;
  margin-bottom: 18px;
}
.bd-lead {
  font-size: clamp(15px, 1.35vw, 18px);
  line-height: 1.85;
  color: var(--grey);
  max-width: 46ch;
}
.bd-lead b { color: var(--ink); font-weight: 700; }
.bd-body {
  font-size: 15px;
  line-height: 1.95;
  color: var(--grey);
  max-width: 52ch;
}
.bd-body b { color: var(--ink); font-weight: 700; }
.bd-body + .bd-body { margin-top: 14px; }

/* ══════════ 덮기(overlay) — 사진 위에 글 ══════════
   화면 폭을 꽉 채운다. 사진이 작으면 분위기가 안 살고, 그게 이 페이지의 요점이다. */
.bd-cover {
  position: relative;
  display: flex;
  align-items: flex-end;
  min-height: 78svh;
  padding: 0 0 clamp(38px, 6vw, 76px);
  overflow: hidden;
  color: #fff;
  background-size: cover;
  background-position: center;
  background-color: #cabfae;
}
.bd-cover--hero {
  min-height: 86svh;
  background-image: var(--bd-scrim), var(--bd-hero);
}
/* 손과 바늘이 화면 가운데 오도록 — 재봉틀 사진은 아래쪽이 작업면이라 살짝 내려 잡는다 */
.bd-cover--sewing {
  min-height: 80svh;
  background-position: center 58%;
  background-image: var(--bd-scrim), var(--bd-sewing);
}
.bd-cover--look {
  min-height: 82svh;
  /* 인물이 가운데 세로로 서 있어 위쪽을 조금 더 보여준다 */
  background-position: center 22%;
  background-image: var(--bd-scrim), var(--bd-look);
}
.bd-cover-inner {
  position: relative;
  width: 100%;
  max-width: 1180px;
  margin: 0 auto;
  padding: 0 clamp(20px, 4vw, 54px);
}
/* 사진 위에서는 회색 본문이 안 읽힌다 — 밝게 올린다 */
.bd-cover .bd-eyebrow,
.bd-cover .bd-sec-label { color: #e7dfd2; }
.bd-cover .bd-lead,
.bd-cover .bd-body { color: #eee7dc; }
.bd-cover .bd-lead b,
.bd-cover .bd-body b { color: #fff; }
.bd-cover .bd-title,
.bd-cover .bd-sec-title { color: #fff; }

/* ══════════ 글만 있는 구간 — 숨 고르는 자리 ══════════ */
.bd-sec {
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(62px, 8vw, 108px) clamp(20px, 4vw, 54px);
}
.bd-cols {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(280px, 1fr));
  gap: 26px 52px;
}

/* ══════════ 나란히(split) ══════════ */
.bd-split {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  align-items: center;
  gap: clamp(28px, 5vw, 64px);
  max-width: 1180px;
  margin: 0 auto;
  padding: clamp(48px, 6vw, 86px) clamp(20px, 4vw, 54px);
}
.bd-split--rev .bd-split-media { order: 2; }   /* 번갈아 배치 — 같은 리듬 반복 방지 */
.bd-split-media {
  aspect-ratio: 3 / 4;
  max-height: 640px;
  border-radius: 18px;
  background-size: cover;
  background-position: center;
  background-color: var(--card);
}
.bd-split-media--fabric { background-image: var(--bd-fabric); }
.bd-split-media--stitch { background-image: var(--bd-stitch); }
.bd-split-media--market { background-image: var(--bd-market); }
.bd-split-media--studio {
  aspect-ratio: 4 / 3;
  background-image: var(--bd-studio);
}

/* ══════════ 마무리 ══════════ */
.bd-cta {
  max-width: 1180px;
  margin: clamp(20px, 3vw, 40px) auto 0;
  padding: clamp(56px, 7vw, 84px) 30px;
  background: var(--ink);
  color: #fff;
  border-radius: 22px;
  text-align: center;
}
.bd-cta-title {
  font-size: clamp(24px, 3vw, 38px);
  font-weight: 900;
  margin-bottom: 12px;
}
.bd-cta .bd-body { color: #d9d2c7; margin: 0 auto; }
.bd-cta-btns {
  display: flex;
  justify-content: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-top: 28px;
}

/* ── 버튼 ──────────────────────────────────── */
.bd-btn {
  display: inline-block;
  margin-top: 24px;
  padding: 14px 28px;
  border: 1px solid var(--ink);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 800;
  letter-spacing: 0.1em;
  color: var(--ink);
  transition: background 0.2s, color 0.2s, transform 0.2s;
}
.bd-btn:hover { background: var(--ink); color: #fff; transform: translateY(-1px); }
/* 사진 위 · 어두운 배경 위에서는 흰 테두리 */
.bd-cover .bd-btn,
.bd-cta .bd-btn { border-color: rgba(255,255,255,0.6); color: #fff; }
.bd-cover .bd-btn:hover,
.bd-cta .bd-btn:hover { background: #fff; color: var(--ink); }
.bd-btn--fill { background: #fff; border-color: #fff; color: var(--ink); }
.bd-cover .bd-btn--fill,
.bd-cta .bd-btn--fill { background: #fff; color: var(--ink); }
.bd-cover .bd-btn--fill:hover,
.bd-cta .bd-btn--fill:hover { background: #efe9df; color: var(--ink); }

/* 현재 메뉴 표시 — 헤더의 SHOP/LOOK 과 같은 계열 */
.gnb-link--on { color: var(--ink); border-bottom: 2px solid var(--ink); }

/* ── 반응형 ────────────────────────────────── */
@media (max-width: 900px) {
  .bd-cover { min-height: 72svh; }
  /* 세로 화면은 가로의 일부만 보인다. 히어로 사진은 옷이 **오른쪽**에 걸려 있어
     가운데를 기준으로 자르면 빈 벽만 남는다 — 오른쪽을 기준으로 채운다. */
  .bd-cover--hero { min-height: 78svh; background-position: 82% center; }
  .bd-cover--sewing { min-height: 72svh; background-position: center 56%; }
  .bd-cover--look { min-height: 74svh; background-position: center 18%; }
  .bd-split {
    grid-template-columns: 1fr;
    gap: 24px;
  }
  .bd-split--rev .bd-split-media { order: 0; }   /* 세로로 쌓이면 사진이 먼저가 자연스럽다 */
  .bd-split-media { aspect-ratio: 4 / 5; max-height: none; }
  .bd-split-media--studio { aspect-ratio: 4 / 3; }
  .bd-crumb { padding: 18px 20px 0; }
  .bd-cta { margin: 20px 20px 0; border-radius: 18px; }
}