@charset "utf-8";

/* ==========================================================================
   base.css — 서브페이지 · 게시판이 쓰는 보조 토큰과 부품
   --------------------------------------------------------------------------
   이 파일은 layout.css 보다 *먼저* 읽힙니다.
   같은 이름이 layout.css(테마 고유 스타일)에도 있으면 그쪽이 이깁니다.
   즉 여기 값은 '테마가 정하지 않은 것'에만 적용되는 기본값입니다.
   ========================================================================== */


/* ==========================================================================
   layout.css — 디자인 토큰 · 타이포 · 공통 컴포넌트
   ver 4.0.0 (Modern Light / Amber)
   --------------------------------------------------------------------------
   참고 레이아웃 : https://onetenth8.mycafe24.com/
   - 팔레트   : Amber #FFA800 / Headline #222 / Body #505050 / Light #F8FCFC
   - 다크톤   : 순검정을 쓰지 않는다. 가장 어두운 값이 #222 이다.
   - 타이포   : Pretendard(본문 · 국문) + Montserrat(영문 라벨)
   - 라운드   : 12 / 20 / 24 / 32 / pill
   ========================================================================== */

/* --------------------------------------------------------------------------
   1. 디자인 토큰
   -------------------------------------------------------------------------- */
:root {
  /* --- 브랜드 컬러 ---
     주의: --primary-color 는 '진한 기본색' 입니다. 게시판 스킨·서브페이지에서
     흰 글씨를 얹는 버튼 배경 등으로 157곳에서 쓰이므로 밝은 색으로 바꾸지 마세요.
     포인트(강조) 색을 바꾸려면 --point-color 계열만 수정하면 됩니다.

     바탕은 검정(#070707) · 흰색 · 회색 세 단계로 가고, 강조에만 빨강을 씁니다.
     빨강은 라벨 · 버튼 · 링크처럼 '누르거나 눈에 먼저 들어와야 하는 것'에만 씁니다.
     사진 위를 덮는 층은 --dark-rgb 채널값을 rgba() 안에서 씁니다. */
  --primary-color: #070707; /* 진한 기본색 (버튼 배경 · 강조 라인) */
  --secondary-color: #353535; /* primary 의 hover 톤 */
  --tertiary-color: #f5f5f5; /* 옅은 면 */

  --point-color: #ea332b; /* ★ 포인트(레드) — 브랜드 색 변경 지점 */
  --point-dark: #c62a23; /* 포인트 hover / active */
  --point-soft: #fdecea; /* 포인트 옅은 배경 */
  --accent-warm: #dd7b22; /* 보조 강조(주황) — 맨 위로 버튼 그라데이션 */
  /* 포인트색을 배경으로 깔았을 때 그 위에 올릴 글자색.
     포인트를 밝은 색으로 바꾸면 이 값을 어두운 색으로 함께 바꿔야 합니다. */
  --point-on: #ffffff;

  /* --- 텍스트 --- */
  --headline-color: #070707; /* 제목 */
  --body-color: #474747; /* 본문 */
  --text-color: #474747; /* body 기본 색 (구버전 호환) */
  --muted-color: #6f6f6f; /* 보조 설명 · 캡션 (흰 배경에서 4.9:1) */
  --darkgray-color: #777777;

  /* --- 배경 · 면 --- */
  --white-color: #ffffff;
  --lightgray-color: #f5f5f5; /* 섹션 교차 배경 */
  --light-color: #fafafa; /* 아주 옅은 배경 */
  --background-color: #fafafa; /* .default.bg 배경 */
  --dark-color: #070707; /* 다크 패널 */
  --dark-rgb: 7, 7, 7;
  /* 사진 위에 덮는 막 (검정).
     ★ 사진 위 오버레이 색을 바꾸려면 여기만 고치면 됩니다. */
  --veil-rgb: 0, 0, 0; /* 사진 위 어둡게 덮는 층에 쓰는 채널값 */
  --footerbg-color: #070707; /* 푸터 배경 */
  --w-color: #ffffff; /* 흰 텍스트 별칭(구버전 호환) */

  /* --- 선 --- */
  --line-color: #e6e9ec;
  --line-strong: #d6dade;

  /* --- 라운드 --- */
  /* 버튼은 6px 수준의 절제된 라운드를 쓴다 */
  --radius-xs: 0.6rem;
  --radius-sm: 0.8rem;
  --radius-md: 1.2rem;
  --radius-lg: 1.6rem;
  --radius-xl: 2rem;
  --radius-pill: 999px;

  /* --- 그림자 --- */
  --shadow-sm: 0 2px 8px rgba(17, 17, 17, 0.05);
  --shadow-md: 0 8px 24px rgba(17, 17, 17, 0.07);
  --shadow-lg: 0 20px 60px rgba(17, 17, 17, 0.1);
  --shadow-brand: 0 10px 30px rgba(7, 7, 7, 0.18);

  /* --- 타이포 스케일 ---
     H1 64/48/34/32 · H2 48/36/28/26 · H3 26/24/20 · 본문 16 (px)
     clamp(최소, 유동, 최대) 로 브레이크포인트 없이 위 값을 따라간다. */
  --fs-h1: clamp(3.2rem, 4.45vw, 6.4rem); /* 히어로 대제목 */
  --fs-h2: clamp(2.6rem, 3.34vw, 4.8rem); /* 섹션 제목 */
  --fs-h3: clamp(2.4rem, 2.6vw, 3.2rem); /* 소제목 */
  --fs-h4: clamp(1.8rem, 1.9vw, 2.4rem); /* 카드 제목 */
  --fs-lead: clamp(1.6rem, 1.25vw, 1.8rem); /* 리드 문단 */
  --fs-body: 1.6rem; /* 본문 (고정) */
  --fs-sm: 1.5rem; /* 보조 텍스트 · 푸터 */
  --fs-xs: 1.3rem; /* 캡션 */
  --fs-label: 1.5rem; /* 섹션 영문 라벨 */

  /* --- 레이아웃 ---
     고정폭 컨테이너가 아니라 좌우 7vw 여백의 유동 구조다.
     (1920px → 좌우 134px / 1440px → 좌우 100px)
     같은 방식을 쓰되 초광폭에서 과하게 벌어지지 않도록 상한만 둔다. */
  --gutter: clamp(1.6rem, 7vw, 14rem); /* 와이드 섹션 좌우 여백 */
  --gutter-sm: clamp(1.6rem, 4vw, 8rem); /* 본문 영역 좌우 여백 */
  --inner-size: 1600px; /* 본문 컨텐츠 최대 폭 */
  --w-inner-size: 1920px; /* 와이드 컨텐츠 최대 폭 */
  --header-height: 8.8rem; /* 헤더 높이 (JS/스크롤 오프셋과 공유) */
  --section-gap: 12rem; /* 섹션 상하 여백 */

  /* --- 모션 --- */
  --t-fast: 0.2s;
  --t-base: 0.3s;
  --t-slow: 0.6s;
  --ease: cubic-bezier(0.22, 0.61, 0.36, 1);

  /* 버튼 전용 커브 */
  --t-btn: 0.2s;
  --ease-btn: cubic-bezier(0.68, 0.01, 0.58, 0.75);

  /* ★ 버튼 규격 — 이 세 값이 헤더 CTA · 메인 히어로 · 게시판 버튼을
     전부 동시에 결정합니다. 버튼 크기를 바꾸려면 여기만 고치세요. */
  --btn-pad-y: 1.3rem;
  --btn-pad-x: 2.4rem;
  --btn-fs: 1.6rem;
}

@media (max-width: 1024px) {
  :root {
    --header-height: 7.2rem;
    --section-gap: 9rem;
  }
}

@media (max-width: 768px) {
  :root {
    --section-gap: 7rem;
  }
}

/* --------------------------------------------------------------------------
   2. 문서 기본값
   -------------------------------------------------------------------------- */
html {
  /* 1rem = 10px 고정. 화면 폭에 따른 크기 조절은 아래 타이포 스케일(clamp)이 맡는다.
     이 값을 줄이면 모바일 본문이 너무 작아지므로 건드리지 마세요. */
  font-size: 62.5%;
  scroll-padding-top: calc(var(--header-height) + 2rem);
  /* scroll-behavior: smooth 는 쓰지 않는다.
     jQuery 의 animate({scrollTop}) 와 충돌해 스크롤이 튀는 원인이 된다. */
}

/* 모션 최소화 설정 존중 */
@media (prefers-reduced-motion: reduce) {
  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

body {
  background-color: var(--white-color);
  color: var(--body-color);
  font-size: var(--fs-body);
  line-height: 1.7;
  letter-spacing: -0.02em;
  word-break: keep-all;
  overflow-wrap: break-word;

  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* 제목 공통 - Pretendard 볼드 + 타이트한 자간
   ★ 색은 일부러 주지 않고 부모에게서 물려받습니다.
     여기서 color 를 정해 버리면 강조색 밴드 · 다크 패널 · 사진 위처럼
     부모가 흰 글씨를 지정한 자리에서도 제목만 검게 나옵니다.
     (요소에 직접 준 색은 물려받는 색을 무조건 이깁니다)
     제목을 따로 진하게 하고 싶으면 그 자리에서만 --headline-color 를 쓰세요. */
h1,
h2,
h3,
h4,
h5,
h6 {
  color: inherit;
  font-weight: 700;
  letter-spacing: -0.025em;
  line-height: 1.3;
}

a {
  color: inherit;
  transition: color var(--t-fast) var(--ease);
}

/* 키보드 포커스 표시 (접근성) */
:focus-visible {
  outline: 2px solid var(--point-color);
  outline-offset: 3px;
  border-radius: 4px;
}

img {
  max-width: 100%;
}

/* 터치 기기에서만 전화 걸기 허용, 마우스 환경에서는 클릭 비활성화 */
@media (hover: hover) and (pointer: fine) {
  a[href^="tel"] {
    pointer-events: none;
    cursor: default;
  }
}

/* --------------------------------------------------------------------------
   3. 컨테이너
   -------------------------------------------------------------------------- */
.inner {
  width: 100%;
  max-width: var(--inner-size);
  margin: 0 auto;
  padding: 0 var(--gutter-sm);
}

.w_inner {
  width: 100%;
  max-width: var(--w-inner-size);
  margin: 0 auto;
  padding: 0 var(--gutter);
}

/* 오른쪽만 정렬되는 변형 (좌측은 화면 끝까지) */
.w_inner_r {
  width: 100%;
  max-width: calc((100% - var(--w-inner-size)) / 2 + var(--w-inner-size));
  margin: 0 0 0 auto;
  padding: 0 var(--gutter) 0 0;
}

/* --------------------------------------------------------------------------
   4. 섹션 리듬
   -------------------------------------------------------------------------- */
.default {
  position: relative;
  padding: var(--section-gap) 0;
}

.default.bg {
  background: var(--background-color);
}

.default.bg_soft {
  background: var(--lightgray-color);
}

/* 섹션 헤더 (라벨 · 제목 · 설명) */
.title {
  margin-bottom: 5.6rem;
}

.title em {
  display: inline-block;
  font-family: "Montserrat", "Pretendard Variable", sans-serif;
  font-size: var(--fs-label);
  font-weight: 700;
  font-style: normal;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  color: var(--point-color);
  margin-bottom: 1.6rem;
}

.title h2 {
  font-size: var(--fs-h2);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

/* .title 안에 h3 를 쓰는 페이지가 있어 함께 정의한다.
   (없으면 font-size 가 지정되지 않아 브라우저 기본값으로 작게 나온다) */
.title h3 {
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
}

.title .desc {
  font-size: var(--fs-lead);
  font-weight: 400;
  line-height: 1.8;
  color: var(--muted-color);
  margin-top: 1.6rem;
  max-width: 68rem;
}

.title.center {
  text-align: center;
}

.title.center .desc {
  margin-left: auto;
  margin-right: auto;
}

/* 섹션 라벨 단독 사용 */
.eyebrow {
  display: inline-flex;
  align-items: center;
  gap: 0.8rem;
  height: 4rem;
  padding: 0 2rem;
  border-radius: var(--radius-pill);
  background: var(--point-soft);
  color: var(--point-dark);
  font-size: 1.6rem;
  font-weight: 600;
  font-style: normal;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

.eyebrow::before {
  content: "";
  width: 0.6rem;
  height: 0.6rem;
  border-radius: 50%;
  background: var(--point-color);
}

/* --------------------------------------------------------------------------
   5. 버튼 시스템
   -------------------------------------------------------------------------- */
/* 버튼 규격
   padding 18/36 · 16/32 · 14/28 · font 16px 700 · line-height 1 · ls -.025em
   radius 50px(pill) · transition all .2s cubic-bezier(.68,.01,.58,.75)
   ------------------------------------------------------------------------
   단, 채움형 글자색은 흰색 대신
   진한 색을 쓴다. 16px 굵은 글씨는 WCAG 기준 4.5:1 이 필요해 흰색은 미달이다. */
/* 모든 버튼의 '한 벌' 규칙.
   .btn 과 그누보드 게시판 버튼 클래스를 같은 선택자 목록에 넣어 두었으므로
   여기 값 하나를 고치면 헤더 CTA · 메인 히어로 · 게시판 버튼이 함께 바뀝니다.
   (게시판 스킨 마크업에는 class 를 추가할 수 없어 클래스명을 여기에 모았습니다.
    #content .sub_content 를 붙인 이유는 스킨 CSS 가 본문에서 늦게 로드돼
    같은 우선순위면 그쪽이 이기기 때문입니다. !important 대체용) */
.btn,
#content .sub_content .btn_submit,
#content .sub_content .btn_cancel,
#content .sub_content .btn_close,
#content .sub_content .btn_b01,
#content .sub_content .btn_b02,
#content .sub_content .btn_b03,
#content .sub_content .btn_admin,
#content .sub_content .btn_write,
#content .sub_content .btn_bo_sch,
#content .sub_content .btn_prv,
#content .sub_content .btn_next,
#content .sub_content .btn_bo_adm input[type="submit"],
#content .sub_content #bo_w .btn_submit,
#content .sub_content #bo_w .btn_cancel,
#content .sub_content .bo_vc_w .btn_submit {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;

  width: auto;
  height: auto;
  min-width: 0;
  /* 좁은 화면에서는 루트 글자가 8px 까지 줄어(layout.css) rem 이 같이 작아진다.
     손으로 누를 자리를 지키려고 px 하한을 둔다. */
  min-height: max(4.8rem, 44px);
  margin: 0;
  padding: var(--btn-pad-y) var(--btn-pad-x);

  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  background-image: none;
  box-shadow: none;

  font-family: inherit;
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
  cursor: pointer;

  transition: background-color var(--t-btn) var(--ease-btn),
    border-color var(--t-btn) var(--ease-btn),
    color var(--t-btn) var(--ease-btn);
}

.btn .icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2;
  fill: none;
  flex-shrink: 0;
}

/* 예전 테마가 의사요소로 그리던 아이콘 흔적 제거 */
#content .sub_content .btn_submit::before,
#content .sub_content .btn_submit::after,
#content .sub_content .btn_cancel::before,
#content .sub_content .btn_cancel::after {
  content: none;
}

/* --- 사이즈 변형 : 규격 변수만 덮어쓴다 --- */
.btn_sm {
  --btn-pad-y: 1rem;
  --btn-pad-x: 2rem;
  --btn-fs: 1.3rem;
}

.btn_sm .icon {
  width: 1.4rem;
  height: 1.4rem;
}

.btn_lg {
  --btn-pad-y: 1.7rem;
  --btn-pad-x: 3.4rem;
  --btn-fs: 1.6rem;
}

/* 메인 히어로 전용 대형 버튼 */
.btn_xl {
  --btn-pad-y: 2.1rem;
  --btn-pad-x: 4.2rem;
  --btn-fs: 1.7rem;
}

.btn_xl .icon {
  width: 1.8rem;
  height: 1.8rem;
}

/* --- 채움형 (주 CTA) : 등록 · 글쓰기 · 검색 --- */
.btn_primary,
#content .sub_content .btn_submit,
#content .sub_content .btn_write,
#content .sub_content #bo_w .btn_submit,
#content .sub_content .bo_vc_w .btn_submit,
#content .sub_content .btn_bo_adm input[type="submit"] {
  background-color: var(--point-color);
  border-color: var(--point-color);
  color: var(--point-on);
}

.btn_primary:hover,
.btn_primary:focus-visible,
#content .sub_content .btn_submit:hover,
#content .sub_content .btn_write:hover,
#content .sub_content #bo_w .btn_submit:hover,
#content .sub_content .bo_vc_w .btn_submit:hover,
#content .sub_content .btn_bo_adm input[type="submit"]:hover {
  background-color: var(--point-dark);
  border-color: var(--point-dark);
  color: var(--white-color);
}

/* --- 검정 채움형 : 목록 · 관리 --- */
.btn_dark,
#content .sub_content .btn_b02,
#content .sub_content .btn_admin {
  background-color: var(--headline-color);
  border-color: var(--headline-color);
  color: var(--white-color);
}

.btn_dark:hover,
.btn_dark:focus-visible,
#content .sub_content .btn_b02:hover,
#content .sub_content .btn_admin:hover {
  background-color: var(--primary-color);
  border-color: var(--primary-color);
  color: var(--white-color);
}

/* 호버 배경은 --secondary-color 를 쓰지 않습니다.
   그 토큰은 '옅은 면' 용이라 거의 흰색이어서, 흰 글자와 겹치면
   올렸을 때 글자가 사라집니다. 어두운 강조색으로 눌러 줍니다. */

/* --- 선형 (보조 CTA) : 취소 · 닫기 · 이전/다음 --- */
.btn_line,
#content .sub_content .btn_cancel,
#content .sub_content .btn_close,
#content .sub_content .btn_b01,
#content .sub_content .btn_b03,
#content .sub_content .btn_prv,
#content .sub_content .btn_next,
#content .sub_content #bo_w .btn_cancel {
  background-color: transparent;
  border-color: var(--line-strong);
  color: var(--headline-color);
}

.btn_line:hover,
.btn_line:focus-visible,
#content .sub_content .btn_cancel:hover,
#content .sub_content .btn_close:hover,
#content .sub_content .btn_b01:hover,
#content .sub_content .btn_b03:hover,
#content .sub_content .btn_prv:hover,
#content .sub_content .btn_next:hover,
#content .sub_content #bo_w .btn_cancel:hover {
  background-color: var(--headline-color);
  border-color: var(--headline-color);
  color: var(--white-color);
}

/* --- 어두운 배경 위 선형 --- */
.btn_line_w {
  background-color: transparent;
  border-color: rgba(255, 255, 255, 0.4);
  color: var(--white-color);
}

.btn_line_w:hover,
.btn_line_w:focus-visible {
  background-color: var(--white-color);
  border-color: var(--white-color);
  color: var(--headline-color);
}

/* --- 연한 채움형 --- */
.btn_soft {
  background-color: var(--point-soft);
  border-color: transparent;
  color: var(--point-dark);
}

.btn_soft:hover,
.btn_soft:focus-visible {
  background-color: var(--point-color);
  color: var(--point-on);
}

/* --- 텍스트 링크형 (화살표 동반) --- */
.btn_text {
  display: inline-flex;
  align-items: center;
  gap: 1.6rem;
  font-size: var(--fs-body);
  font-weight: 700;
  letter-spacing: -0.025em;
  color: var(--headline-color);
}

.btn_text .icon {
  width: 1.6rem;
  height: 1.6rem;
  stroke-width: 2;
  fill: none;
  transition: transform var(--t-btn) var(--ease-btn);
}

.btn_text:hover {
  color: var(--point-color);
}

.btn_text:hover .icon {
  transform: translateX(4px);
}

/* --- 블록형 (모바일에서 꽉 차게) --- */
.btn_block {
  width: 100%;
}

/* --------------------------------------------------------------------------
   구버전 클래스 호환 (게시판 · 서브페이지에서 사용 중)
   -------------------------------------------------------------------------- */
.default_btn,
.icon_btn,
.icon_btn_write,
.icon_btn_cancel {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 1.6rem;
  padding: var(--btn-pad-y) var(--btn-pad-x);
  border: 1px solid transparent;
  border-radius: var(--radius-pill);
  font-size: var(--btn-fs);
  font-weight: 600;
  line-height: 1;
  letter-spacing: -0.025em;
  white-space: nowrap;
  cursor: pointer;
  transition: background-color var(--t-btn) var(--ease-btn),
    border-color var(--t-btn) var(--ease-btn),
    color var(--t-btn) var(--ease-btn);
}

.default_btn {
  background-color: transparent;
  border-color: var(--line-strong);
  color: var(--headline-color);
}

.default_btn:hover {
  background-color: var(--headline-color);
  border-color: var(--headline-color);
  color: var(--white-color);
}

.icon_btn,
.icon_btn_write {
  background-color: var(--point-color);
  border-color: var(--point-color);
  color: var(--point-on);
}

/* 게시판 글쓰기 버튼 : 글자와 아이콘을 흰색으로
   (::before 의 ✎ 아이콘은 currentColor 를 따르므로 함께 흰색이 된다) */
.icon_btn_write {
  color: var(--white-color);
}

.icon_btn_write::before {
  color: inherit;
}

.icon_btn:hover,
.icon_btn_write:hover {
  background-color: var(--headline-color);
  border-color: var(--headline-color);
  color: var(--white-color);
}

.icon_btn_cancel {
  background-color: var(--lightgray-color);
  border-color: var(--line-color);
  color: var(--body-color);
}

.icon_btn_cancel:hover {
  background-color: var(--line-color);
}

.icon_btn_write,
.icon_btn_cancel {
  margin-top: 4rem;
}

/* 아이콘은 배경이미지 대신 의사요소 문자로 (기존 filter:invert 제거) */
.icon_btn::after {
  content: "→";
  font-size: 1.6rem;
  line-height: 1;
}

.icon_btn_write::before {
  content: "✎";
  font-size: 1.6rem;
  line-height: 1;
}

.icon_btn_cancel::before {
  content: "×";
  font-size: 1.8rem;
  line-height: 1;
}

/* --------------------------------------------------------------------------
   6. 카드 · 유틸리티
   -------------------------------------------------------------------------- */
.card {
  background: var(--white-color);
  border: 1px solid var(--line-color);
  border-radius: var(--radius-lg);
  padding: 3.2rem;
  transition: box-shadow var(--t-base) var(--ease),
    transform var(--t-base) var(--ease), border-color var(--t-base) var(--ease);
}

.card:hover {
  border-color: transparent;
  box-shadow: var(--shadow-md);
  transform: translateY(-4px);
}

/* 라운드 이미지 프레임 */
.media_frame {
  position: relative;
  overflow: hidden;
  border-radius: var(--radius-lg);
  background: var(--lightgray-color);
}

.media_frame img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
  transition: transform var(--t-slow) var(--ease);
}

.media_frame:hover img {
  transform: scale(1.04);
}

.flx {
  display: flex;
  gap: 3rem;
}

.flx > * {
  flex: 1;
  min-width: 0;
}

@media (max-width: 768px) {
  .flx {
    flex-direction: column;
    gap: 2rem;
  }
}

hr.hr {
  display: block;
  border: 0;
  height: 4rem;
}

hr.hr_line {
  display: block;
  border: 0;
  border-top: 1px solid var(--line-color);
  margin: 8rem 0;
}

.table_responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.design {
  margin-top: 1.6rem;
  font-size: 1.3rem;
  font-weight: 400;
  color: var(--muted-color);
  text-transform: uppercase;
  letter-spacing: 0.08em;
}

/* --------------------------------------------------------------------------
   7. 페이징
   -------------------------------------------------------------------------- */
/* 게시판 · 목록 페이징 통일
   default.css 는 처음/이전/다음/맨끝을 gif 배경 + text-indent:-999px 로 감춘다.
   여기서는 배경 이미지를 없애고 글자를 그대로 보여 준다. */
.pg_wrap {
  clear: both;
  float: none;
  display: flex;
  justify-content: center;
  margin-top: 5.6rem;
}

.pg {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 0.4rem;
  text-align: center;
}

.pg_page,
.pg_current {
  display: inline-flex;
  align-items: center;
  justify-content: center;

  min-width: 4rem;
  height: 4rem;
  padding: 0 1.2rem;
  margin: 0;

  border-radius: var(--radius-xs);
  font-size: 1.5rem;
  font-weight: 500;
  line-height: 1;
  text-decoration: none;

  transition: background-color var(--t-btn) var(--ease-btn),
    border-color var(--t-btn) var(--ease-btn), color var(--t-btn) var(--ease-btn);
}

.pg_page {
  background: var(--white-color);
  border: 1px solid var(--line-color);
  color: var(--body-color);
}

.pg a.pg_page:hover,
.pg a.pg_page:focus {
  background: var(--lightgray-color);
  border-color: var(--line-strong);
  color: var(--headline-color);
  text-decoration: none;
}

.pg_current {
  background: var(--headline-color);
  border: 1px solid var(--headline-color);
  color: var(--white-color);
  font-weight: 700;
}

/* 처음 · 이전 · 다음 · 맨끝 — 배경 gif 를 걷어내고 글자로 표시 */
.pg_start,
.pg_prev,
.pg_next,
.pg_end {
  overflow: visible;
  text-indent: 0;
  padding: 0 1.6rem;
  background-image: none;
  background-color: var(--white-color);
  border: 1px solid var(--line-color);
  color: var(--muted-color);
  font-size: 1.4rem;
}

.pg_start:hover,
.pg_prev:hover,
.pg_next:hover,
.pg_end:hover {
  background-image: none;
  background-color: var(--lightgray-color);
  color: var(--headline-color);
}

@media (max-width: 480px) {
  .pg_page,
  .pg_current {
    min-width: 3.4rem;
    height: 3.4rem;
    padding: 0 0.8rem;
    font-size: 1.4rem;
  }

  .pg_start,
  .pg_end {
    display: none; /* 좁은 화면에서는 처음/맨끝 숨김 */
  }
}

/* --------------------------------------------------------------------------
   8. 풀블리드(좌우 꽉 채움) 블록
   --------------------------------------------------------------------------
   .inner / .w_inner 안에 있어도 화면 좌우 끝까지 빠져나오게 하는 유틸리티와,
   중간 배너로 쓰는 CTA 밴드 컴포넌트.

   사용 예 (page_content/*.php 안에서)
     <figure class="fullbleed">…이미지…</figure>
     <section class="fullbleed band" style="background-image:url(...)"> … </section>
   -------------------------------------------------------------------------- */

/* 가로 스크롤 방지 : 풀블리드가 만드는 100vw 를 잘라 준다 */
.sub_content,
#content {
  overflow-x: hidden; /* 구형 브라우저 대비 */
  overflow-x: clip;  /* sticky 를 깨지 않는 최신 방식 */
}

.fullbleed {
  position: relative;
  width: 100vw;
  max-width: 100vw;
  margin-left: calc(50% - 50vw);
  margin-right: calc(50% - 50vw);
}

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

/* --- 풀블리드 CTA 밴드 --- */
.band {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;

  min-height: 32rem;
  padding: 8rem var(--gutter);
  overflow: hidden;

  background-color: var(--dark-color);
  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;
  color: var(--white-color);
}

/* 패럴럭스용 배경 층 (선택).
   .band 에 background-image 를 직접 주는 대신 이 층을 넣으면
   js/custom.js 가 스크롤에 맞춰 천천히 밀어 준다.
   위아래로 12rem 씩 크게 잡아 두어야 움직여도 빈 곳이 드러나지 않는다. */
.band .band_bg {
  position: absolute;
  left: 0;
  right: 0;
  /* 움직임을 크게 준 만큼(js/custom.js 의 PARALLAX_RATE) 여유도 넉넉히 둔다.
     이 값을 줄이면 스크롤 끝에서 배경 없는 빈 곳이 드러난다. */
  top: -20rem;
  height: calc(100% + 40rem);
  z-index: 0;

  background-repeat: no-repeat;
  background-position: center center;
  background-size: cover;

  will-change: transform;
  pointer-events: none;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  /* 사진 위 글자를 위한 검은 막(--veil-rgb).
     0.6 이면 아주 밝은 사진 위에서도 라벨이 4.51:1 로 AA 를 겨우 넘긴다. */
  background: rgba(var(--veil-rgb), 0.6);
  pointer-events: none;
}

/* 어두운 막(::before)은 절대배치라 그냥 두면 글자 위에 덮인다.
   글자를 층 위로 올려 막에 눌리지 않게 한다. */
.band .band_label,
.band .band_tit,
.band .band_desc,
.band .band_btns {
  position: relative;
  z-index: 2;
}

.band > * {
  position: relative;
  z-index: 2;
}

.band .band_label {
  display: block;
  margin-bottom: 1.6rem;
  font-size: var(--fs-body);
  font-weight: 500;
  font-style: normal;
  color: rgba(255, 255, 255, 0.9);
}

.band .band_tit {
  max-width: 88rem;
  font-size: var(--fs-h3);
  font-weight: 700;
  line-height: 1.3;
  letter-spacing: -0.025em;
  color: var(--white-color);
}

.band .band_desc {
  max-width: 68rem;
  margin-top: 1.6rem;
  font-size: var(--fs-lead);
  line-height: 1.8;
  /* 라벨과 같은 밝기로 맞춘다 */
  color: rgba(255, 255, 255, 0.9);
}

.band .band_btns {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 1.2rem;
  margin-top: 3.2rem;
}

/* 밴드 위아래 여백 : 본문 흐름에서 충분히 떨어뜨린다 */
.sub_content .fullbleed {
  margin-top: 8rem;
  margin-bottom: 8rem;
}

.sub_content .fullbleed:first-child {
  margin-top: 0;
}

/* 풀블리드 블록으로 페이지가 끝나는 경우
   ------------------------------------------------------------------
   밴드 아래에 흰 띠가 생기는 이유는 두 겹이다.
     ① .fullbleed 자신의 margin-bottom (8rem)
     ② .sub_content 의 margin-bottom (var(--section-gap) = 12rem)
   둘 다 없애야 배너가 푸터와 바로 맞닿는다. */
.sub_content .fullbleed:last-child {
  margin-bottom: 0;
}

.sub_content:has(.fullbleed:last-child) {
  margin-bottom: 0;
}

@media (max-width: 768px) {
  .band {
    min-height: 24rem;
    padding: 5.6rem var(--gutter);
  }

  .band .band_btns .btn {
    flex: 1 1 100%;
  }

  .sub_content .fullbleed {
    margin-top: 5.6rem;
    margin-bottom: 5.6rem;
  }
}