/* ==========================================================================
   sub.css — 서브페이지 셸 (배너 · 경로 · LNB · 본문 머리)
   --------------------------------------------------------------------------
   서브페이지는 세 덩이로 이루어집니다.
     .sub_title  : 카테고리 사진 배너 (images/hero_bg0N.jpg)
     .sub_nav    : 경로(HOME > 카테고리 > 페이지) + LNB 탭
     .sub_content: 본문. 안쪽 .page_title / .page_content

   생김새 규칙
     · 사진 위는 먹색 베일 + 굵은 고딕 헤드라인 + 주홍 마침점
     · LNB 는 판·테두리 없이 '글자 + 밑줄' 한 겹 (게시판 #bo_cate 와 같은 말투)
     · 카드 · 사진 · 띠는 둥근 모서리(1.8~2.4rem), 포인트는 주홍 한 가지
       (배너와 .full_bleed 처럼 화면 끝까지 가는 요소만 각지게 둡니다)
   ========================================================================== */

/* ==========================================================================
   ① 카테고리 배너
   ========================================================================== */
.sub_title {
  position: relative;
  overflow: hidden;

  min-height: 36rem;

  /* 사진이 없거나 늦게 뜰 때를 대비한 바탕색 (글자가 흰색이라 어둡게 둔다) */
  background-color: var(--ink);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  /* 사진 고정 : 배너는 제자리에 머물고 본문이 그 위를 지나갑니다.
     (사진 주소는 sub.head.php 가 인라인 style 로 넣습니다) */
  background-attachment: fixed;

  color: var(--on-photo);
}

/* 손가락으로 넘기는 기기(iOS 사파리 등)는 fixed 배경을 제대로 그리지 못해
   사진이 튀거나 확대돼 보입니다. 그런 기기에서는 함께 흐르게 되돌립니다. */
@media (hover: none) {
  .sub_title {
    background-attachment: scroll;
  }
}

/* 먹색 베일 : 사진 위 흰 글자의 대비를 확보한다.
   ※ backdrop-filter(blur) 는 쓰지 않는다 — filter 류는 고정 자식(모바일
     메뉴 오버레이)의 기준을 가로채 메뉴가 잘려 열리지 않는다. */
.sub_title::after {
  content: "";
  position: absolute;
  inset: 0;

  background: linear-gradient(
      to bottom,
      rgba(14, 15, 16, 0.72),
      rgba(14, 15, 16, 0.34) 45%,
      rgba(14, 15, 16, 0.78)
    );
  pointer-events: none;
}

.sub_title .title {
  position: relative;
  z-index: 1;

  display: flex;
  flex-direction: column;
  justify-content: flex-end;

  min-height: 36rem;
  padding: 12rem 2.4rem 5.6rem;
  margin-bottom: 0;
}

/* 카테고리 이름 : 굵은 고딕 (메인 섹션 머리말과 같은 서체) */
.sub_title .title h2 {
  font-family: var(--font-serif);
  font-size: 7.8rem;
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.02em;
  color: var(--on-photo);
  text-transform: none;
}

/* 제목 끝 주홍 마침점 */
.sub_title .title h2::after {
  content: "";
  display: inline-block;

  width: 0.18em;
  height: 0.18em;
  margin-left: 0.16em;

  border-radius: 50%;
  background: var(--brand);
  vertical-align: 0.06em;
}

.sub_title .title p {
  max-width: 62rem;
  margin-top: 1.6rem;

  font-size: 1.7rem;
  font-weight: 300;
  line-height: 1.8;
  color: var(--on-photo-sub);
}

@media (max-width: 1024px) {
  .sub_title,
  .sub_title .title {
    min-height: 28rem;
  }

  /* 좁은 화면에서는 배너가 낮아 고정 효과가 잘 보이지 않고,
     모바일 브라우저 주소창이 접힐 때 사진이 튀므로 함께 흐르게 둡니다 */
  .sub_title {
    background-attachment: scroll;
  }

  /* 좁은 화면에서는 글을 오른쪽으로 붙이고 아래로 내립니다. */
  .sub_title .title {
    align-items: flex-end;
    text-align: right;
    padding: 17rem 2.4rem 4rem;
  }

  .sub_title .title h2 {
    font-size: 6.8rem;
  }

  /* 제목과 설명 사이를 좁힌다 (제목이 커진 만큼 줄 간격도 줄인다) */
  .sub_title .title p {
    margin-top: 0.4rem;
  }
}

@media (max-width: 768px) {
  .sub_title,
  .sub_title .title {
    min-height: 22rem;
  }

  .sub_title .title {
    padding: 15rem 1.6rem 3.2rem;
  }

  .sub_title .title h2 {
    font-size: 5.6rem;
  }

  .sub_title .title p {
    margin-top: 0.4rem;
    font-size: 1.6rem;
  }
}

/* ==========================================================================
   ② 경로 + LNB
   ========================================================================== */
.sub_nav {
  position: relative;
  z-index: 2;

  background: var(--white-color);
  border-bottom: 1px solid var(--line-color);
}

.sub_nav .inner {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 3.2rem;
}

/* ── 경로 (HOME > 카테고리 > 페이지) ─────────────────────── */
.sub_nav .navigation {
  display: flex;
  align-items: center;

  padding: 0;
  line-height: 6rem;
  white-space: nowrap;

  font-size: 1.5rem;
  color: var(--text-color-mute);
}

.sub_nav .navigation a {
  color: var(--text-color-mute);
  transition: color 0.2s;
}

.sub_nav .navigation a:hover {
  color: var(--text-color);
}

.sub_nav .navigation .icon {
  width: 1.2rem;
  height: 1.2rem;
  margin: 0 0.6rem;
  stroke: var(--line-color);
  stroke-width: 2;
  vertical-align: -1px;
}

/* ── LNB : 글자 + 밑줄 한 겹 (게시판 카테고리 탭과 같은 말투) ── */
.sub_nav .lnb ul {
  display: flex;
  justify-content: flex-end;
  gap: 3.2rem;
}

.sub_nav .lnb ul a {
  display: block;
  padding: 0 0.2rem;
  margin-bottom: -1px;

  line-height: 6rem;
  white-space: nowrap;
  background: none;
  border-bottom: 1px solid transparent;

  font-size: 1.7rem;
  font-weight: 400;
  color: var(--text-color-sub);
  transition: color 0.25s, border-color 0.25s;
}

.sub_nav .lnb ul a:hover {
  color: var(--text-color);
}

.sub_nav .lnb ul li ~ li {
  border-left: 0;
}

.sub_nav .lnb ul li.on a {
  margin-top: 0;
  border-top: 0;
  border-bottom-color: var(--brand);
  color: var(--brand);
  font-weight: 500;
}

/* 모바일 토글용 현재 항목 : PC 에서는 감춘다 */
.sub_nav .lnb > a {
  display: none;
}

@media (max-width: 1024px) {
  .sub_nav .lnb ul {
    gap: 2.4rem;
  }

  .sub_nav .lnb ul a {
    font-size: 1.6rem;
  }
}

/* ── 모바일 : 경로를 감추고 LNB 를 접이식 목록으로 ─────────── */
@media (max-width: 768px) {
  .sub_nav {
    margin: 0;
    border-bottom: 1px solid var(--line-color);
  }

  .sub_nav .inner {
    display: block;
    padding: 0;
  }

  .sub_nav .navigation {
    display: none;
  }

  /* 현재 페이지 이름 = 토글 버튼 */
  .sub_nav .lnb > a {
    position: relative;
    display: block;
    padding: 0 4.8rem 0 1.6rem;

    line-height: 5.6rem;
    font-size: 1.7rem;
    font-weight: 500;
    color: var(--text-color);
    background: var(--white-color);
  }

  .sub_nav .lnb > a::after {
    content: "";
    position: absolute;
    top: 50%;
    right: 1.6rem;

    width: 0.9rem;
    height: 0.9rem;
    margin-top: -0.6rem;

    border-right: 1px solid var(--text-color-mute);
    border-bottom: 1px solid var(--text-color-mute);
    transform: rotate(45deg);
    transition: transform 0.25s;
  }

  .sub_nav .lnb > a.on::after {
    margin-top: -0.2rem;
    transform: rotate(-135deg);
  }

  .sub_nav .lnb ul {
    display: none;
    flex-direction: column;
    justify-content: flex-start;
    gap: 0;

    border-top: 1px solid var(--line-color);
  }

  .sub_nav .lnb ul li ~ li {
    border-top: 1px solid var(--line-color);
  }

  .sub_nav .lnb ul a {
    padding: 0 1.6rem;
    margin-bottom: 0;

    line-height: 5rem;
    border-bottom: 0;
    background: var(--lightgray-color);
  }

  .sub_nav .lnb ul li.on a {
    border-bottom: 0;
    box-shadow: inset 3px 0 0 var(--brand);
  }
}

/* ==========================================================================
   ③ 본문
   ========================================================================== */
.sub_content {
  /* 경로(.sub_nav)와 본문 사이 여백. .full_bleed 가 이 값을 되돌려
     사진을 경로 바로 아래에 붙이므로, 여백은 여기 한 곳에서만 관리합니다. */
  --sub-gap: 9.6rem;

  min-height: 60rem;
  margin-top: var(--sub-gap);
  margin-bottom: 12rem;
  background: var(--white-color);
}

/* 페이지 제목 : 왼쪽 큰 글자 + 오른쪽으로 이어지는 얇은 실선 (11 방식) */
.sub_content .page_title {
  margin-bottom: 4.8rem;
}

.sub_content .page_title h3 {
  position: relative;
  display: flex;
  align-items: center;
  gap: 4.8rem;

  padding: 0 0 2rem;
  white-space: nowrap;
  text-align: left;
}

.sub_content .page_title h3::after {
  content: "";
  display: block;

  flex: 1;
  width: auto;
  height: 1px;
  margin: 0;

  background: var(--line-strong);
  opacity: 0.18;
}

.sub_content .page_title h3 strong {
  font-family: var(--font-serif);
  font-size: 6.4rem;
  font-weight: 700;
  letter-spacing: -0.02em;
  color: var(--text-color);
}

.sub_content .content p {
  font-size: 1.8rem;
  line-height: 1.85;
  color: var(--text-color-sub);
  opacity: 1;
}

/* ==========================================================================
   ④ 화면 끝까지 늘리는 요소 — .full_bleed
   --------------------------------------------------------------------------
   본문은 .inner (1440px 가운데 정렬 + 좌우 여백) 안에 놓입니다.
   사진처럼 화면 끝까지 늘리고 싶은 요소가 있으면, 폭은 그대로 두고
   그 요소에만 클래스를 하나 더 주면 됩니다.

       <figure class="full_bleed">          … 좌우 화면 끝까지
       <figure class="full_bleed vh">       … 세로도 한 화면 (기본 68vh)
       <figure class="full_bleed vh" style="--vh:78vh; --vh-m:46vh;">
                                            … 높이 직접 지정 (m = 모바일)

   안쪽에 글을 넣을 때는 한 겹 더 감싸면 글만 본문 열에 맞춰집니다.

       <div class="full_bleed"><div class="inner"> … </div></div>

   ※ 페이지 쪽에서 그 요소에 height 를 다시 지정하지 마세요.
     ID 선택자가 이겨서 --vh 가 먹지 않습니다.
     실제 예시 : page_content/brand_story.php 의 대표 사진

   부모가 몇 픽셀이든 상관없이 화면 폭으로 펴집니다.
   --sbw 는 세로 스크롤바 두께로, custom.js 가 재서 넣어 줍니다.
   (이 값을 빼지 않으면 스크롤바 폭만큼 가로 스크롤이 생깁니다)
   ========================================================================== */
.full_bleed {
  --bleed-w: calc(100vw - var(--sbw, 0px));

  width: var(--bleed-w);
  max-width: var(--bleed-w);
  margin-left: calc(50% - var(--bleed-w) / 2);
  margin-right: calc(50% - var(--bleed-w) / 2);
}

/* 세로도 채우는 변형 : 높이는 --vh 로 조절 */
.full_bleed.vh {
  height: var(--vh, 68vh);
  min-height: 32rem;
  overflow: hidden;
}

/* 안에 사진이 들어오면 잘라서 꽉 채운다 */
.full_bleed.vh > img,
.full_bleed.vh > picture > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

.full_bleed > img {
  display: block;
  width: 100%;
  height: auto;
}

/* 본문 첫 요소가 화면 끝까지 늘어날 때는 위 여백을 없애 사진이
   경로(.sub_nav) 바로 아래에 붙게 한다 */
.sub_content .content > .full_bleed:first-child {
  margin-top: calc(var(--sub-gap, 9.6rem) * -1);
}

@media (max-width: 1024px) {
  .full_bleed.vh {
    min-height: 26rem;
  }
}

@media (max-width: 768px) {
  .full_bleed.vh {
    height: var(--vh-m, 42vh);
    min-height: 22rem;
  }
}

/* 페이지 도입 문구 : 가운데 정렬 대신 왼쪽 정렬 + 큰 행간 */
.sub_content .content .sub_title_desc {
  max-width: 78rem;
  margin-bottom: 7.2rem;

  font-size: 2.1rem;
  font-weight: 300;
  line-height: 1.9;
  color: var(--text-color-sub);
  text-align: left;
}

@media (max-width: 1024px) {
  .sub_content {
    --sub-gap: 6.4rem;
    margin-bottom: 9.6rem;
  }

  .sub_content .page_title h3 {
    gap: 2.4rem;
  }

  .sub_content .page_title h3 strong {
    font-size: 5.2rem;
  }
}

@media (max-width: 768px) {
  .sub_content {
    --sub-gap: 4.8rem;
    margin-bottom: 7.2rem;
  }

  .sub_content .page_title h3 strong {
    font-size: 4.2rem;
  }

  .sub_content .content .sub_title_desc {
    margin-bottom: 4.8rem;
    font-size: 1.8rem;
  }
}


/* ── 서브 LNB 글자 크기 ─────────────────────────────────────
   좁은 화면의 펼침 목록은 손가락 크기에 맞춰 따로 잡아 두었으므로
   769px 이상에서만 적용합니다. */
@media (min-width: 769px) {
  .sub_nav .lnb ul a { font-size: 1.8rem; }
}