/* ════════════════════════════════════════════════
   전통문화포털 — 새 시안 (index.html)
   클래스 프리픽스 x- / 색상 토큰 :root --x-*
   데스크톱 고정폭, 반응형 없음
   ════════════════════════════════════════════════ */

:root{
  /* 레이아웃 */
  --x-container: 1440px;          /* 콘텐츠 컨테이너 최대 폭 */
  --x-gutter: 0px;                /* 좌우 거터 */
  --x-header-h: 80px;             /* 헤더 높이 */

  /* 색상 (미니멀 출발 — 추후 팔레트 확장) */
  --x-bg: #ffffff;
  --x-ink: #1a1a1a;               /* 본문/제목 */
  --x-ink-soft: #6b6b6b;          /* 보조 텍스트 */
  --x-line: #e7e4df;              /* 보더/구분선 */
  --x-surface: #f7f5f1;           /* 옅은 면 배경 */
  --x-point: #a67c52;             /* 포인트 색 (호버 밑줄 · 서브메뉴 중분류 타이틀) */

  /* 타이포 */
  --x-sans: 'Noto Sans KR', 'IBM Plex Sans', sans-serif;
  --x-serif: 'Noto Serif KR', serif;
}

/* ── reset ──
   이 파일은 전 페이지(메인+서브)에 전역 로드된다.
   서브페이지는 base.css 가 이미 전역 리셋(*{box-sizing/margin/padding}, ul, a, button 등)을 하므로,
   base.css 와 "다른 값"으로 덮어써 서브 레이아웃을 바꿀 수 있는 body/a/svg 는
   새 디자인 영역(.x-page / .x-header / .x-footer) 안으로만 스코프한다.
   *{...} 와 button{...} 은 base.css 와 동일/무해하므로 전역 유지(메인은 base.css 미로드라 필요). */
*{ margin:0; padding:0; box-sizing:border-box; }
html{ -webkit-text-size-adjust:100%; }
.x-page, .x-header, .x-footer{
  font-family: var(--x-sans);
  color: var(--x-ink);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
/* a / svg 는 :where() 로 specificity 0 → 스코프는 유지하되 .x-hero__cta·아이콘 토글 등 클래스 규칙을 덮어쓰지 않음 */
:where(.x-page, .x-header, .x-footer) a{ color:inherit; text-decoration:none; }
button{ font:inherit; color:inherit; background:none; border:none; cursor:pointer; }
:where(.x-page, .x-header, .x-footer) svg{ display:block; }

/* 데스크톱 고정폭 — 가로 스크롤 방지 (반응형 미디어쿼리에서 해제됨) */
.x-page{ min-width:1280px; overflow-x: clip; }

/* 공통 인너 컨테이너: 섹션 배경은 full-bleed, 내부 정렬만 1320 */
.x-inner{
  max-width: var(--x-container);
  margin: 0 auto;
  padding: 0 var(--x-gutter);
}

/* ════════════════ Header / GNB ════════════════ */
.x-header{
  position: sticky;
  top: 0;
  z-index: 100;
  background: var(--x-bg);
  border-bottom: 1px solid var(--x-line);
}
.x-header__bar{
  max-width: var(--x-container);
  margin: 0 auto;
  padding: 0 var(--x-gutter);
  height: var(--x-header-h);
  display: grid;
  grid-template-columns: auto 1fr auto;   /* 로고 / 메뉴(중앙) / 유틸 */
  align-items: center;
  gap: 24px;
}

/* 로고 */
.x-logo{
  font-family: var(--x-serif);
  font-size: 34px;              /* 28 → +20% */
  font-weight: 700;
  letter-spacing: -0.02em;
  white-space: nowrap;
}

/* GNB (헤더 중앙 정렬) */
.x-gnb{
  display: flex;
  align-items: stretch;
  gap: 33.6px;                  /* 28 → +20% */
  justify-self: center;
}
.x-gnb__item{
  position: relative;
  display: flex;
  align-items: center;
}
.x-gnb__label{
  height: var(--x-header-h);
  padding: 0 20px;
  font-size: 20px;             /* 헤더 메뉴 */
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--x-ink);
  position: relative;
}
/* 활성 표시 밑줄 */
.x-gnb__label::after{
  content: "";
  position: absolute;
  left: 20px; right: 20px;
  bottom: 0;
  height: 2px;
  background: var(--x-point);
  transform: scaleX(0);
  transform-origin: left;
  transition: transform .22s ease;
}
.x-gnb__item:hover .x-gnb__label{ color: var(--x-point); }
.x-gnb__item:hover .x-gnb__label::after{ transform: scaleX(1); }

/* 드롭다운 */
.x-gnb__drop{
  position: absolute;
  top: var(--x-header-h);
  left: 50%;
  transform: translateX(-50%) translateY(8px);
  display: flex;
  gap: 40px;
  padding: 28px 32px;
  background: var(--x-bg);
  border: 1px solid var(--x-line);
  box-shadow: 0 18px 40px rgba(0,0,0,.08);
  opacity: 0;
  visibility: hidden;
  pointer-events: none;
  transition: opacity .2s ease, transform .2s ease;
  white-space: nowrap;
  z-index: 90;
}
.x-gnb__item:hover .x-gnb__drop{
  opacity: 1;
  visibility: visible;
  pointer-events: auto;
  transform: translateX(-50%) translateY(0);
}
.x-gnb__col{ display: flex; flex-direction: column; min-width: 120px; }
.x-gnb__head{
  font-size: 16.8px;           /* 14 → +20% */
  font-weight: 700;
  color: var(--x-point);       /* 중분류 타이틀 포인트 색 */
  padding-bottom: 12px;
  margin-bottom: 10px;
  border-bottom: 1px solid var(--x-line);
}
.x-gnb__col a{
  font-size: 16.8px;           /* 14 → +20% */
  color: var(--x-ink-soft);
  padding: 6px 0;
  transition: color .15s ease;
}
.x-gnb__col a:hover{ color: var(--x-ink); }

/* 우측 유틸 */
.x-header__util{ display: flex; align-items: center; gap: 6px; }
.x-iconbtn{
  width: 40px; height: 40px;
  display: flex; align-items: center; justify-content: center;
  color: var(--x-ink);
  border-radius: 8px;
  transition: background .15s ease;
}
.x-iconbtn:hover{ background: var(--x-surface); }

/* 헤더 검색: 돋보기 클릭 시 왼쪽으로 밑줄 입력창이 펼쳐짐
   입력창은 absolute로 띄워 레이아웃 흐름에서 제외 → 펼쳐져도 헤더 메뉴/버튼이 움직이지 않음 */
.x-search{ position: relative; display: flex; align-items: center; }
.x-search__input{
  position: absolute;
  right: 46px;                             /* 돋보기 버튼(40) + 여백(6) 만큼 왼쪽 */
  top: 50%;
  transform: translateY(-50%);
  width: 0;
  padding: 4px 2px 12px;                   /* 하단 패딩으로 밑줄을 글자보다 더 아래로 */
  border: none;
  border-bottom: 2px solid transparent;    /* 닫힘: 밑줄 숨김 (굵기 2px) */
  background: transparent;
  font-family: var(--x-sans);
  font-size: 18px;
  color: var(--x-ink);
  opacity: 0;
  visibility: hidden;                      /* 닫힘: 키보드 포커스 대상에서 제외 */
  transition: width .3s ease, opacity .3s ease, visibility .3s ease;
}
.x-search__input::placeholder{ color: var(--x-ink-soft); }
.x-search__input:focus{ outline: none; }
.x-search.is-open .x-search__input{
  width: 250px;
  opacity: 1;
  visibility: visible;
  border-bottom-color: var(--x-point);     /* 열림: 밑줄 = 헤더 호버색 */
}
.x-search__go{ display: none; }            /* 모바일 전용 검색 실행 버튼 (데스크톱 숨김) */

/* ════════════════ Hero ════════════════ */
.x-hero{
  position: relative;
  z-index: 2;                  /* 뉴스(1)보다 위 → 위로 흘러나온 배경 무늬가 슬라이드 뒤로 가린다. 헤더(90/100)보다는 낮아 GNB 드롭다운은 유지 */
  width: 100%;
  height: 715px;               /* 650 → +10% */
  overflow: hidden;
  background: var(--x-bg);      /* 흰색 (이미지 로딩 전/레터박스 영역) */
}
.x-hero__track{ position: absolute; inset: 0; }
.x-hero__slide{
  position: absolute;
  inset: 0;
  opacity: 0;
  visibility: hidden;
  transition: opacity .9s ease, visibility .9s;
}
.x-hero__slide.is-active{
  opacity: 1;
  visibility: visible;
  cursor: pointer;          /* 슬라이드 어디를 눌러도 바로가기로 이동 */
}
/* 줌은 이미지에만 적용 (텍스트는 스케일되지 않도록 슬라이드가 아닌 img에) */
.x-hero__img{
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  object-fit: cover;
  object-position: center;
  transform: scale(1.30);
  /* 줌아웃은 교체 주기(JS HERO_INTERVAL=5500ms)보다 0.5s 짧은 5s → 교체 0.5s 전 종료 */
  transition: transform 5s linear;
}
.x-hero__slide.is-active .x-hero__img{ transform: scale(1); }

/* 슬라이드 좌측 콘텐츠 (타이틀 · 서브타이틀 · 버튼) */
.x-hero__inner{ position: relative; height: 100%; z-index: 2; }
.x-hero__content{
  height: 100%;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  padding: 165px 0 167px;    /* 타이틀 시작 높이 / 버튼 하단 여백 (150/152 → +10%) */
  color: var(--x-ink);
}
.x-hero__title{
  font-family: var(--x-serif);
  font-size: 50.6px;           /* 46 → +10% */
  font-weight: 600;
  line-height: 1.3;
  letter-spacing: 0.03em;
  color: var(--x-ink);
  min-height: 1.3em;         /* 타이핑 전에도 줄 높이 확보(레이아웃 점프 방지) */
}
/* 타이핑 중 깜빡이는 커서 */
.x-hero__title::after{ display: none; }
.x-hero__title.is-typing::after{
  content: "";
  display: inline-block;
  width: 2px;
  height: 0.92em;
  margin-left: 5px;
  background: var(--x-ink);
  vertical-align: -0.1em;
  animation: x-hero-caret .7s steps(1) infinite;
}
@keyframes x-hero-caret{ 0%,50%{ opacity:1; } 50.01%,100%{ opacity:0; } }

.x-hero__sub{
  margin-top: 17.6px;          /* 16 → +10% */
  font-size: 19.8px;           /* 18 → +10% */
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--x-ink);
  /* 기본: 아래에서 대기 + 투명, 타이핑 완료(is-typed) 후 상승 */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease .2s, transform .9s ease .2s;
}
.x-hero__cta{
  margin-top: 44px;          /* 40 → +10% */
  display: inline-flex;
  align-items: center;
  gap: 28.6px;               /* 26 → +10% */
  padding-bottom: 11px;      /* 10 → +10% */
  border-bottom: 1px solid var(--x-ink);
  font-size: 17.6px;         /* 16 → +10% */
  font-weight: 500;
  color: var(--x-ink);
  /* 기본: 아래에서 대기 + 투명, 서브보다 한참 뒤에 상승 */
  opacity: 0;
  transform: translateY(24px);
  transition: opacity .9s ease .9s, transform .9s ease .9s;
}
.x-hero__cta svg{ transition: transform .22s ease; }
.x-hero__cta:hover svg{ transform: translateX(6px); }

/* 타이핑 완료 후 서브타이틀 → 버튼 순으로 아래에서 위로 등장 */
.x-hero__slide.is-typed .x-hero__sub,
.x-hero__slide.is-typed .x-hero__cta{ opacity: 1; transform: translateY(0); }

/* 컨트롤 */
.x-hero__controls-wrap{
  position: absolute;
  left: 50%;
  bottom: 70px;                /* 하단 여백 */
  transform: translateX(-50%);
  width: 100%;
  z-index: 3;
  display: flex;
  justify-content: flex-start; /* 좌측 정렬 (타이틀·부제와 같은 라인) */
}
.x-hero__controls{
  display: flex;
  align-items: center;
  gap: 16px;
  width: max-content;
}
.x-hero__counter{
  font-size: 14px;
  font-weight: 500;
  letter-spacing: .06em;
  color: rgba(26,26,26,.6);
  font-variant-numeric: tabular-nums;
}
.x-hero__counter b{ color: var(--x-ink); font-weight: 700; }
.x-hero__progress{
  position: relative;
  width: 140px;
  height: 2px;
  background: rgba(26,26,26,.25);
  overflow: hidden;
}
.x-hero__progress-bar{
  position: absolute;
  left: 0; top: 0;
  height: 100%;
  width: 0;
  background: var(--x-ink);
}
.x-hero__btn{
  width: 38px;
  height: 38px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--x-ink);
  transition: background .18s ease, border-color .18s ease, opacity .18s ease;
}
/* 이전·다음: 네모 테두리 (크기 30% 축소: 38→27px) */
.x-hero__btn--box{ width: 27px; height: 27px; border: 1px solid rgba(26,26,26,.4); border-radius: 0; }
.x-hero__btn--box:hover{ background: rgba(26,26,26,.08); border-color: rgba(26,26,26,.7); }
/* 재생·정지: 테두리 없이 아이콘만 */
.x-hero__btn--plain{ border: none; background: none; }
.x-hero__btn--plain:hover{ opacity: .55; }
/* 재생/정지 아이콘 토글 */
.x-hero__ic-play{ display: none; }
.js-hero-toggle[data-playing="false"] .x-hero__ic-pause{ display: none; }
.js-hero-toggle[data-playing="false"] .x-hero__ic-play{ display: block; }

/* ════════════════ 공지사항 (News) ════════════════ */
/* overflow-x:clip 로 가로는 잘라 스크롤 방지, 세로는 visible 로 우측하단 전통무늬가
   아래 전통문화 행사 섹션으로 자연스럽게 흘러내리게 한다. z-index:1 로 행사 밴드 위에 얹는다. */
.x-news{ position: relative; z-index: 1; padding: 84px 0 0; background: var(--x-bg); overflow-x: clip; overflow-y: visible; }

/* 배경 무늬 (코너 장식, 흰 배경은 multiply로 제거)
   ── 무늬 번호 정의 (등장 순서) ──────────────────────────────
   · 1번 전통무늬 = .x-news__deco--tl  (뉴스 좌상단)
   · 2번 구름무늬 = .x-news__deco--bl  (뉴스 좌하단)
   · 3번 전통무늬 = .x-news__deco--br  (뉴스 우하단)
   · 4번 구름무늬 = .x-videos__deco--tr (홍보영상 우측 — 아래 .x-videos 블록)
   콘텐츠 컨테이너(폭 1320, 반폭 660px) 가장자리에 상대 배치 →
   어떤 화면폭에서도 무늬가 콘텐츠와 겹치지 않고 좌우 여백으로 자연스럽게 흘러나감 */
.x-news__deco{
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
/* 1번 전통무늬 (뉴스 좌상단, 원형 메달리온) */
.x-news__deco--tl{
  width: 647px; height: 647px;   /* 462 → +40% (646.8 반올림) */
  top: -190px;                /* 위로 200px 이동 (10 → -190) */
  left: calc(50% - 1282px);   /* 좌측으로 200px 이동 (-1082 → -1282) */
  opacity: .4;
  background-image: url("/_static/kcult/img/main_new/news/main-bg1.png");
}
/* 2번 구름무늬 (뉴스 좌하단) */
.x-news__deco--bl{
  width: 500px; height: 250px;
  bottom: -60px;              /* 아래로 50px 이동 (-10 → -60) */
  left: calc(50% - 980px);    /* 좌측으로 30px 이동 (-950 → -980) */
  opacity: .4;
  background-image: url("/_static/kcult/img/main_new/news/main-bg2.png");
}
/* 3번 전통무늬 (뉴스 우하단, 원형 메달리온) */
.x-news__deco--br{
  width: 647px; height: 647px;   /* 462 → +40% (646.8 반올림) */
  bottom: -410px;             /* 아래로 추가 100px 이동 (-310 → -410) */
  left: calc(50% + 630px);    /* 우측으로 40px 이동 (+590 → +630) */
  opacity: .4;
  background-image: url("/_static/kcult/img/main_new/news/main-bg1.png");
}

/* 섹션 헤더: 제목 ── (탭) 더보기 */
.x-news__head{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 34px;
}
.x-news__title{
  font-family: var(--x-serif);
  font-size: 30px;             /* 섹션 타이틀 */
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
}
.x-news__rule{ flex: 1; height: 1px; background: var(--x-line); }
.x-news__tabs{ display: flex; gap: 2px; }
.x-news__tab{
  position: relative;
  padding: 6px 14px 8px;
  font-size: 24px;
  font-weight: 500;
  color: var(--x-ink-soft);
  letter-spacing: -0.01em;
  transition: color .15s ease;
}
.x-news__tab:hover{ color: var(--x-ink); }
.x-news__tab.is-active{ color: var(--x-point); font-weight: 700; }
.x-news__tab.is-active::after{
  content: "";
  position: absolute;
  left: 14px; right: 14px;
  bottom: 0;
  height: 2px;
  background: var(--x-point);
}
/* 탭별 활성 색 — 해당 탭 카드의 숫자/코너 색과 동일하게 */
.x-news__tab[data-tab="전통문화뉴스"].is-active{ color: #bb9b7b; }
.x-news__tab[data-tab="전통문화뉴스"].is-active::after{ background: #bb9b7b; }
.x-news__tab[data-tab="공모안내"].is-active{ color: #6f93ba; }
.x-news__tab[data-tab="공모안내"].is-active::after{ background: #6f93ba; }
.x-news__tab[data-tab="연구자료"].is-active{ color: #67a2a2; }
.x-news__tab[data-tab="연구자료"].is-active::after{ background: #67a2a2; }
.x-news__more{
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 14px;
  color: var(--x-ink-soft);
  white-space: nowrap;
}
.x-news__more:hover{ color: var(--x-ink); }
.x-news__more-ic{ display: flex; color: var(--x-ink-soft); }

/* 카드 4열 가로 그리드 */
.x-news__panels{ position: relative; z-index: 1; }
.x-news__grid{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 24px;
}
.x-news__grid[hidden]{ display: none; }
.x-news__card{
  position: relative;
  display: flex;
  flex-direction: column;
  height: 100%;
  min-height: 360px;            /* 세로로 긴 직사각형 (스크린샷 비율) */
  padding: 36px 32px;
  background: #fff;
  border: 1px solid #efece7;
  border-radius: 18px;
  overflow: hidden;
  transition: border-color .2s ease, transform .2s ease, box-shadow .2s ease;
}
.x-news__card:hover{
  transform: translateY(-4px);
  border-color: #e3ded5;
  box-shadow: 0 14px 30px rgba(26,26,26,.10);
}
.x-news__date{ display: flex; flex-direction: column; gap: 7px; margin-bottom: 26px; }
.x-news__day{
  font-family: var(--x-sans);
  font-size: 48px;
  font-weight: 700;
  line-height: 1;
  letter-spacing: -0.01em;
  color: var(--x-ink);
}
.x-news__full{ font-size: 14px; letter-spacing: .01em; color: var(--x-ink-soft); }
.x-news__card-title{
  font-size: 20px;
  font-weight: 700;
  line-height: 1.4;
  color: var(--x-ink);
  margin-bottom: 18px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
.x-news__desc{
  font-size: 14px;
  line-height: 1.7;
  color: var(--x-ink-soft);
  padding-right: 40px;          /* 우하단 코너 도형과 겹침 방지 */
  display: -webkit-box;
  -webkit-line-clamp: 3;
  -webkit-box-orient: vertical;
  overflow: hidden;
}
/* 우하단 코너 도형(색면 + 흰 화살표) */
.x-news__corner{ position: absolute; right: 0; bottom: 0; line-height: 0; pointer-events: none; }

/* 탭별 포인트 컬러 — 날짜 숫자(day)와 우하단 코너(corner)를 같은 색으로 통일 */
.x-news__grid[data-tab="전통문화뉴스"] .x-news__day,
.x-news__grid[data-tab="전통문화뉴스"] .x-news__corner{ color: #bb9b7b; }
.x-news__grid[data-tab="공모안내"] .x-news__day,
.x-news__grid[data-tab="공모안내"] .x-news__corner{ color: #6f93ba; }
.x-news__grid[data-tab="연구자료"] .x-news__day,
.x-news__grid[data-tab="연구자료"] .x-news__corner{ color: #67a2a2; }

/* ════════════════ 전통문화포털 한눈에 보기 (Quick) ════════════════ */
.x-quick{ position: relative; z-index: 1; padding: 44px 0 96px; background: transparent; }
.x-quick__head{
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 40px;
}
.x-quick__rule{ flex: 1; height: 1px; background: var(--x-line); }

.x-quick__list{
  list-style: none;
  display: grid;
  grid-template-columns: repeat(8, 1fr);
  gap: 16px;
}
.x-quick__item a{
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 16px;
  padding: 8px 4px;
  color: var(--x-ink);
}
.x-quick__icon{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 91px;                  /* 76 → +20% */
  height: 91px;
  border-radius: 50%;
  background: #f8f7f3;          /* 아이콘 배경: 단색 통일 */
  transition: transform .2s ease, box-shadow .2s ease;
}
.x-quick__icon img{
  width: 57px;
  height: 57px;
  object-fit: contain;
  opacity: 0.8;
}
.x-quick__icon svg{
  width: 34px;                  /* 28 → +20% (이벤트·자료실 SVG 아이콘) */
  height: 34px;
}
.x-quick__item a:hover .x-quick__icon{
  transform: translateY(-4px);
  box-shadow: 0 10px 22px rgba(0,0,0,.08);
}
.x-quick__item a:hover .x-quick__label{ color: var(--x-point); }
.x-quick__label{
  font-size: 18px;              /* 14 → +30% */
  font-weight: 500;
  letter-spacing: -0.01em;
  text-align: center;
  color: var(--x-ink);
}

/* ════════════════ 전통문화 행사안내 (Events Banner) ════════════════ */
/* 풀블리드(화면 폭 전체) 슬라이드형 배너 */
.x-events{
  position: relative;
}
/* 밴드 자체를 콘텐츠 컨테이너(1320)에 맞추고 라운드 처리 */
.x-events__inner{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;      /* 콘텐츠 가로 중앙 */
  min-height: 360px;            /* 배경사진 밴드 높이 (400 → -10%) */
  overflow: hidden;
  background: var(--x-surface) center / cover no-repeat;   /* 이미지는 DB(TYPE 12) 인라인 background-image 로만 */
  border-radius: 18px;
}
.x-events__content{ max-width: 600px; text-align: center; }
.x-events__title{
  font-family: var(--x-serif);
  font-size: 30px;            /* 다른 섹션 타이틀과 동일 */
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.15;
  color: var(--x-ink);
  margin-bottom: 16px;
}
.x-events__desc{
  font-size: 16px;
  line-height: 1.6;
  color: var(--x-ink-soft);
  margin-bottom: 30px;
}
.x-events__btn{
  display: inline-flex;
  align-items: center;
  gap: 16px;
  padding: 13px 28px;
  border: 1px solid var(--x-ink);
  border-radius: 999px;
  font-size: 14px;
  font-weight: 600;
  color: var(--x-ink);
  background: transparent;
  transition: background .2s ease, color .2s ease;
}
.x-events__btn:hover{ background: var(--x-ink); color: var(--x-bg); }
.x-events__btn svg{ transition: transform .2s ease; }
.x-events__btn:hover svg{ transform: translateX(5px); }

/* ════════════════ 오늘전통 홍보영상 (Coverflow 3D 캐러셀) ════════════════ */
.x-videos{
  position: relative;
  background: var(--x-bg);
  padding: 64px 0 76px;
  overflow: hidden;
}
/* 4번 구름무늬 (홍보영상 우측 — 뉴스 섹션에서 이동) — overflow:hidden 으로 우측 흘러나감은 잘려 콘텐츠와 겹치지 않는다 */
.x-videos__deco{
  position: absolute;
  z-index: 0;
  background-repeat: no-repeat;
  background-size: contain;
  pointer-events: none;
}
/* 4번 구름무늬 위치 */
.x-videos__deco--tr{
  width: 500px; height: 250px;
  top: 200px;                 /* 아래로 추가 100px 이동 (100 → 200) */
  left: calc(50% + 690px);    /* 우측으로 30px 이동 (+660 → +690) */
  opacity: .4;
  background-image: url("/_static/kcult/img/main_new/news/main-bg2.png");
}
/* 헤더: 타이틀 ── 라인 ── SNS (뉴스 섹션과 동일 패턴) */
.x-videos__head{
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  gap: 24px;
  margin-bottom: 44px;
}
.x-videos__title{
  font-family: var(--x-serif);
  font-size: 30px;            /* 뉴스 타이틀과 동일 */
  font-weight: 700;
  letter-spacing: -0.01em;
  white-space: nowrap;
  color: var(--x-ink);
}
.x-videos__rule{ flex: 1; height: 1px; background: var(--x-line); }
.x-videos__sns{ display: flex; gap: 12px; }
.x-videos__sns a{ display: inline-flex; }
.x-videos__sns img{
  display: block;
  width: 28px;
  height: 28px;
  border-radius: 8px;
  transition: transform .2s ease, opacity .2s ease;
}
.x-videos__sns a:hover img{ transform: translateY(-2px); opacity: .85; }
/* 무대(3D 원근) — 콘텐츠 컨테이너 1440에 맞춤 */
.x-videos__stage{
  position: relative;
  z-index: 1;
  max-width: var(--x-container);
  height: 500px;
  margin: 0 auto;
  perspective: 1700px;
}
.x-videos__deck{
  position: relative;
  height: 100%;
  list-style: none;
  margin: 0;
  padding: 0;
  transform-style: preserve-3d;
  cursor: pointer;          /* deck 전체(카드 사이 좌/우 존 포함)가 클릭 영역이라 손모양 표시 */
}
/* 카드 — 기본 위치는 무대 중앙, 실제 변형은 JS가 인라인으로 부여 */
.x-vcard{
  position: absolute;
  top: 50%;
  left: 50%;
  width: 340px;
  height: 470px;
  margin: -235px 0 0 -170px;
  border-radius: 14px;
  overflow: hidden;
  background: var(--x-ink);
  cursor: pointer;
  transition: transform .55s cubic-bezier(.4,0,.2,1), opacity .55s ease, filter .55s ease;
}
.x-vcard__media{ position: absolute; inset: 0; }
.x-vcard__media img{ width: 100%; height: 100%; object-fit: cover; display: block; }
.x-vcard__shade{ display: none; }   /* 카드 어둡게 덮던 오버레이 제거 */
/* 가운데(활성) 카드: 흰색 캡션(타이틀·날짜) 가독성 위해 이미지 아래쪽만 어둡게 */
.x-vcard.is-active .x-vcard__media::after{
  content: "";
  position: absolute;
  left: 0; right: 0; bottom: 0;
  height: 62%;
  background: linear-gradient(to top, rgba(0,0,0,.95) 0%, rgba(0,0,0,.7) 40%, rgba(0,0,0,0) 100%);
  pointer-events: none;
}
/* 재생 버튼 — 활성 카드에서만 등장 */
.x-vcard__play{
  position: absolute;
  top: 50%; left: 50%;
  width: 66px; height: 66px;
  transform: translate(-50%,-50%) scale(.85);
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid rgba(255,255,255,.65);
  background: rgba(255,255,255,.22);
  color: #fff;
  cursor: pointer;
  opacity: 0;
  transition: opacity .4s ease .1s, transform .4s ease .1s, background .2s ease;
}
.x-vcard__play svg{ margin-left: 3px; }
.x-vcard__play:hover{ background: rgba(255,255,255,.35); }
.x-vcard.is-active .x-vcard__play{ opacity: 1; transform: translate(-50%,-50%) scale(1); }
/* 캡션(타이틀/날짜) — 활성 카드에서 아래→위로 등장 */
.x-vcard__caption{
  position: absolute;
  left: 0; right: 0; bottom: 0;
  padding: 0 24px 28px;
  color: #fff;
  opacity: 0;
  transform: translateY(20px);
  transition: opacity .5s ease .18s, transform .5s ease .18s;
  pointer-events: none;
}
.x-vcard.is-active .x-vcard__caption{ opacity: 1; transform: translateY(0); }
.x-vcard__title{
  font-family: var(--x-serif);
  font-size: 23px;
  font-weight: 700;
  line-height: 1.32;
  letter-spacing: -0.01em;
  word-break: keep-all;        /* 한글 단어 중간 줄바꿈 방지(공백 단위로만 줄바꿈) */
  overflow-wrap: break-word;   /* 단어가 카드보다 길면 그때만 강제 분리 */
  text-shadow: 0 1px 10px rgba(0,0,0,.7), 0 1px 2px rgba(0,0,0,.6);
}
.x-vcard__date{
  margin-top: 12px;
  font-size: 12px;
  letter-spacing: .08em;
  color: rgba(255,255,255,.88);
  text-shadow: 0 1px 6px rgba(0,0,0,.7);
}
/* 좌우 이전/다음 버튼 */
.x-videos__nav{
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  z-index: 60;
  width: 48px; height: 48px;
  display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  border: 1px solid var(--x-line);
  background: #fff;
  color: var(--x-ink);
  box-shadow: 0 2px 12px rgba(0,0,0,.08);
  cursor: pointer;
  transition: background .2s ease, border-color .2s ease, color .2s ease;
}
.x-videos__nav:hover{ background: var(--x-point); border-color: var(--x-point); color: #fff; }
.x-videos__prev{ left: 0; }
.x-videos__next{ right: 0; }

/* ════════════════ 관련 사이트 (카드 캐러셀 + 좌우 이전/다음) ════════════════ */
.x-related{
  background: var(--x-surface);   /* 기존 푸터 색(베이지) */
  border-top: 1px solid var(--x-line);
}
.x-related__inner{
  display: flex;
  align-items: center;
  gap: 20px;
  padding-top: 60px;
  padding-bottom: 60px;
}
/* 좌우 이전/다음 버튼 */
.x-related__btn{
  flex: 0 0 auto;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  border: 1px solid var(--x-line);
  background: var(--x-bg);
  color: var(--x-ink);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background .2s ease, color .2s ease, border-color .2s ease, opacity .2s ease;
}
.x-related__btn:hover:not(:disabled){
  background: var(--x-point);
  border-color: var(--x-point);
  color: #fff;
}
.x-related__btn:disabled{ opacity: .35; cursor: default; }
/* 카드 뷰포트 + 트랙 */
/* 가로는 clip(스크롤 방지), 세로는 visible → 호버 시 카드 떠오름/그림자 안 잘림 */
.x-related__viewport{ flex: 1 1 auto; overflow-x: clip; overflow-y: visible; }
.x-related__track{
  display: flex;
  gap: 14px;
  list-style: none;
  margin: 0;
  padding: 0;
  transition: transform .4s cubic-bezier(.4,0,.2,1);
}
.x-related__item{
  flex: 0 0 calc(20% - 11.2px);   /* 5개 노출, gap 14px */
  min-width: calc(20% - 11.2px);
  height: 96px;
}
.x-related__item a{
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  padding: 14px 24px;
  background: var(--x-bg);
  border: 1px solid var(--x-line);
  border-radius: 12px;
  transition: border-color .2s ease, box-shadow .2s ease, transform .2s ease;
}
.x-related__item a:hover{
  box-shadow: 0 6px 16px rgba(0,0,0,.06);
  transform: translateY(-2px);
}
.x-related__item img{
  max-width: 100%;
  max-height: 56px;
  object-fit: contain;
  filter: grayscale(20%);
  transition: filter .2s ease;
}
.x-related__item a:hover img{ filter: grayscale(0%); }

/* ════════════════ 푸터 ════════════════ */
.x-footer{
  background: var(--x-bg);
  border-top: 1px solid var(--x-line);
}
.x-footer__inner{
  padding-top: 48px;
  padding-bottom: 44px;
}
/* 상단: 로고 ── 정책 링크 */
.x-footer__top{
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 32px;
}
.x-footer__logo{ display: inline-flex; }
.x-footer__logo img{ display: block; height: 40px; width: auto; }
.x-footer__policy{
  display: flex;
  align-items: center;
  gap: 24px;
}
.x-footer__policy a{
  font-family: var(--x-sans);
  font-size: 14px;
  font-weight: 500;
  color: var(--x-ink);
  transition: color .15s ease;
}
.x-footer__policy a:hover{ color: var(--x-point); text-decoration: underline; }
/* 구분선 */
.x-footer__rule{
  display: block;
  height: 1px;
  background: var(--x-line);
  margin: 28px 0 26px;
}
/* 하단: 연락처 ── SNS */
.x-footer__bottom{
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 32px;
}
.x-footer__addr{
  font-family: var(--x-sans);
  font-size: 14px;
  line-height: 1.8;
  color: var(--x-ink-soft);
}
.x-footer__copy{
  margin-top: 16px;
  font-family: var(--x-sans);
  font-size: 12px;
  letter-spacing: .06em;
  color: var(--x-ink);          /* 대비 확보(소형 텍스트) */
}
.x-footer__sns{
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  gap: 14px;
}
.x-footer__sns-label{
  font-family: var(--x-sans);
  font-size: 12px;
  font-weight: 700;
  letter-spacing: .22em;
  color: var(--x-ink-soft);
}
.x-footer__sns-list{
  display: flex;
  gap: 12px;
  list-style: none;
  margin: 0;
  padding: 0;
}
.x-footer__sns-list a{ display: inline-flex; }
.x-footer__sns-list img{
  display: block;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  transition: transform .2s ease, opacity .2s ease;
}
.x-footer__sns-list a:hover img{ transform: translateY(-2px); opacity: .85; }
/* 웹접근성 인증마크 + SNS 묶음 (데스크톱: 마크가 SNS 왼쪽, 높이 일치) */
.x-footer__right{ display: flex; align-items: stretch; gap: 44px; }
.x-footer__wa{ display: block; height: 72px; width: auto; }
.x-footer__right .x-footer__sns{ justify-content: space-between; }
.x-footer__topsns{ display: none; }   /* 상단 SNS 는 모바일 전용 (데스크톱 숨김) */
@media (max-width: 768px){
  /* 모바일: 하단 SNS 는 상단(로고 반대쪽)으로 올리고, 하단 우측엔 웹접근성 마크만 남긴다 */
  .x-footer__right{ align-items: flex-end; }
  .x-footer__right .x-footer__sns{ display: none; }
  .x-footer__wa{ height: 52px; }
}

/* ════════════════════════════════════════════════
   반응형 (Responsive)
   데스크톱(>1024) 규칙은 위에서 정의됨. 아래는 미디어쿼리 override.
   브레이크포인트: ≤1024 태블릿 / ≤768 모바일 / ≤480 소형
   ════════════════════════════════════════════════ */

/* 햄버거 토글 — 데스크톱에서는 숨김 (모바일에서만 노출) */
.x-nav-toggle{ display: none; }
.x-nav-toggle__close{ display: none; }
/* 메뉴 열림 시 햄버거(≡) → 닫기(✕) 아이콘 전환 */
.is-nav-open .x-nav-toggle__open{ display: none; }
.is-nav-open .x-nav-toggle__close{ display: block; }

/* ───────────── 태블릿 이하 (≤1024px) ───────────── */
@media (max-width: 1024px){
  /* 고정폭 해제 + 좌우 거터 부여.
     overflow-x:clip 은 fixed 모바일 메뉴의 컨테이닝 블록을 가두므로 해제(무늬는 어차피 숨김) */
  .x-page{ min-width: 0; overflow-x: visible; }
  :root{ --x-gutter: 24px; }

  /* 화면폭 기반 좌표라 좁은 화면에서 콘텐츠와 겹치는 배경 무늬는 숨김 */
  .x-news__deco, .x-videos__deco{ display: none; }

  /* ── 헤더: hover GNB → 햄버거 토글 패널 ── */
  .x-nav-toggle{ display: flex; }
  .x-header__bar{ grid-template-columns: 1fr auto; gap: 16px; }

  .x-gnb{
    position: fixed;
    top: var(--x-header-h);
    left: 0;
    /* 컨테이닝 블록에 의존하는 right/bottom 대신 viewport 기준으로 크기 고정 */
    width: 100vw;
    height: calc(100vh - var(--x-header-h));
    flex-direction: column;
    align-items: stretch;
    gap: 0;
    padding: 8px 24px 48px;
    background: var(--x-bg);
    border-top: 1px solid var(--x-line);
    overflow-y: auto;
    transform: translateX(-100%);
    visibility: hidden;
    transition: transform .3s ease, visibility .3s;
    z-index: 95;
  }
  .is-nav-open .x-gnb{ transform: translateX(0); visibility: visible; }

  .x-gnb__item{ flex-direction: column; align-items: stretch; }
  .x-gnb__label{
    height: auto;
    width: 100%;
    padding: 18px 6px;
    font-size: 18px;
    text-align: left;
    border-bottom: 1px solid var(--x-line);
    display: flex;
    align-items: center;
    justify-content: space-between;
  }
  .x-gnb__label::after{ display: none; }
  /* 아코디언 화살표 (JS가 부모 .x-gnb__item에 is-open 토글) */
  .x-gnb__label::before{
    content: "";
    order: 2;
    width: 9px; height: 9px;
    border-right: 1.6px solid var(--x-ink-soft);
    border-bottom: 1.6px solid var(--x-ink-soft);
    transform: rotate(45deg);
    transition: transform .2s ease;
  }
  .x-gnb__item.is-open .x-gnb__label{ color: var(--x-point); }
  .x-gnb__item.is-open .x-gnb__label::before{ transform: rotate(-135deg); border-color: var(--x-point); }

  /* 드롭다운을 인라인 아코디언으로 — 닫힘 기본, is-open 시 펼침 */
  .x-gnb__drop{
    position: static;
    transform: none;
    opacity: 1; visibility: visible; pointer-events: auto;
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 24px;
    padding: 0;
    max-height: 0;
    overflow: hidden;
    border: none;
    box-shadow: none;
    white-space: normal;
    transition: max-height .3s ease, padding .3s ease;
  }
  .x-gnb__item.is-open .x-gnb__drop{ max-height: 1200px; padding: 14px 6px 22px; }

  /* ════════ 태블릿(769~1024)도 모바일 디자인을 폭에 맞춰 비례 확대 ════════
     아래 vw 계수는 모바일(≤768)과 동일 → 폭이 커지면 같은 비율로 확대.
     상한(clamp max)만 태블릿 값까지 올려 키운다. (≤768 블록이 폰에서 다시 override → 모바일은 그대로) */

  /* ── 헤더 로고 ── */
  .x-logo{ font-size: clamp(22px, 3vw, 30px); }

  /* ※ 히어로 규칙은 아래 @media (max-width:819px) 로 분리 — 820px 이상은 PC 히어로(베이스 .x-hero 715px) 사용 */

  /* ── 섹션 간격(태블릿): 64px 통일 (배경경계 섹션은 32/32 분할) ── */
  .x-news{ padding-top: 64px; }
  .x-news__title, .x-videos__title, .x-events__title{ font-size: clamp(22px, 3vw, 34px); }
  .x-news__head{ gap: clamp(10px, 2vw, 18px); flex-wrap: wrap; }   /* 원래 모바일과 동일하게 wrap (nowrap이면 ≤768로 새어 탭이 깨짐) */
  .x-news__tabs{ gap: 0; }
  .x-news__tab{ font-size: clamp(16px, 2.4vw, 24px); padding: 6px clamp(8px, 1.6vw, 16px) 8px; }
  .x-news__tab.is-active::after{ left: clamp(8px, 1.6vw, 16px); right: clamp(8px, 1.6vw, 16px); }
  .x-news__more{ margin-left: auto; font-size: clamp(14px, 2vw, 20px); gap: 6px; }
  .x-quick__head{ gap: clamp(16px, 2.4vw, 28px); margin-bottom: clamp(24px, 3.5vw, 40px); }

  /* News: 2열 + 카드 비례 확대 */
  .x-news__grid{ grid-template-columns: repeat(2, 1fr); gap: clamp(12px, 2.4vw, 24px); }
  .x-news__card{ min-height: 0; padding: clamp(18px, 3vw, 32px) clamp(16px, 2.6vw, 28px); }
  .x-news__date{ margin-bottom: clamp(14px, 2.4vw, 22px); gap: 4px; }
  .x-news__day{ font-size: clamp(32px, 6.4vw, 56px); }
  .x-news__full{ font-size: clamp(13px, 2.9vw, 22px); }
  .x-news__card-title{ font-size: clamp(16px, 3vw, 26px); margin-bottom: clamp(10px, 1.6vw, 16px); }
  .x-news__desc{ font-size: clamp(13px, 2.4vw, 20px); padding-right: clamp(20px, 4vw, 40px); -webkit-line-clamp: 2; }   /* 태블릿도 내용 2줄 */
  .x-news__corner svg{ width: clamp(46px, 8vw, 84px); height: clamp(48px, 8.35vw, 88px); }

  /* Quick: 4열 + 아이콘 비례 확대 */
  .x-quick{ padding-bottom: 64px; }
  .x-quick__list{ grid-template-columns: repeat(4, 1fr); gap: clamp(10px, 2vw, 24px); row-gap: clamp(20px, 3.5vw, 40px); }
  .x-quick__item a{ gap: clamp(8px, 1.4vw, 14px); padding: 6px 2px; }
  .x-quick__icon{ width: clamp(58px, 11vw, 104px); height: clamp(58px, 11vw, 104px); }
  .x-quick__icon img{ width: clamp(36px, 6.8vw, 64px); height: clamp(36px, 6.8vw, 64px); }
  .x-quick__icon svg{ width: clamp(26px, 5vw, 48px); height: clamp(26px, 5vw, 48px); }
  .x-quick__label{ font-size: clamp(12px, 2vw, 18px); }

  /* Events: 5/2 밴드 + 텍스트·버튼 비례 확대 */
  .x-events__inner{ min-height: 0; aspect-ratio: 5 / 2; margin-left: var(--x-gutter); margin-right: var(--x-gutter); padding: clamp(16px, 3vw, 32px) clamp(24px, 5vw, 56px); background-size: cover; background-position: center; }
  .x-events__title{ font-size: clamp(20px, 4.2vw, 40px); margin-bottom: clamp(4px, 1vw, 10px); }
  .x-events__desc{ font-size: clamp(13px, 2.9vw, 26px); line-height: 1.35; margin-bottom: clamp(10px, 2vw, 22px); }
  .x-events__btn{ font-size: clamp(8px, 1.7vw, 15px); padding: clamp(5px, 1vw, 10px) clamp(13px, 2.4vw, 26px); gap: clamp(7px, 1.6vw, 14px); }
  .x-events__btn svg{ width: clamp(10px, 2.2vw, 20px); height: auto; }

  /* ── Videos: 모바일과 동일 3D 커버플로우, 카드·여백만 태블릿 비례 확대 ── */
  .x-videos{ padding-top: 64px; padding-bottom: 32px; }
  .x-videos__head{ margin-bottom: clamp(20px, 3vw, 40px); }
  .x-videos__stage{
    --xv-cardw: min(400px, 44vw);                  /* 카드 확대(여백 축소): 768폭에서 ~338px */
    --xv-cardh: calc(min(400px, 44vw) * 1.382);    /* aspect 340/470 */
    width: min(660px, 88vw);
    height: calc(var(--xv-cardh) + clamp(78px, 11vw, 120px));   /* 카드 + 아래 타이틀 공간 */
    perspective: clamp(900px, 120vw, 1300px);
    perspective-origin: 50% calc(var(--xv-cardh) / 2);
    overflow: visible;
  }
  .x-vcard{ width: var(--xv-cardw); height: auto; aspect-ratio: 340 / 470; margin: 0; top: 0; left: 50%; transform: translateX(-50%); transform-origin: 50% 0; backface-visibility: hidden; overflow: visible; }
  .x-vcard__media{ border-radius: clamp(14px, 1.6vw, 18px); overflow: hidden; }
  .x-vcard.is-active .x-vcard__media::after{ display: none; }   /* 모바일/태블릿은 캡션이 이미지 밖(흰배경)이라 그라데이션 불필요 */
  .x-vcard__caption{ top: calc(100% + clamp(10px, 1.6vw, 18px)); bottom: auto; left: 50%; width: min(620px, 84vw); padding: 0; transform: translateX(-50%); text-align: center; color: var(--x-ink); opacity: 0; transition: opacity .4s ease; }
  .x-vcard.is-active .x-vcard__caption{ transform: translateX(-50%); opacity: 1; }
  .x-vcard__title{ color: var(--x-ink); font-size: clamp(14px, 2.6vw, 26px); line-height: 1.3; text-shadow: none; text-wrap: balance; }
  .x-vcard__date{ color: var(--x-ink-soft); font-size: clamp(11px, 2vw, 18px); margin-top: clamp(5px, 1vw, 10px); text-shadow: none; }
  .x-vcard__play{ width: clamp(52px, 9vw, 84px); height: clamp(52px, 9vw, 84px); }
  .x-vcard__play svg{ width: clamp(20px, 3.6vw, 34px); height: auto; }
  .x-videos__nav{ top: calc(var(--xv-cardh) / 2); width: clamp(36px, 5vw, 52px); height: clamp(36px, 5vw, 52px); }
  .x-videos__nav svg{ width: clamp(18px, 2.6vw, 26px); height: auto; }
  .x-videos__prev{ left: calc(50% - 50vw + var(--x-gutter)); }
  .x-videos__next{ right: calc(50% - 50vw + var(--x-gutter)); }
  .x-videos__sns img{ width: clamp(26px, 4vw, 40px); height: clamp(26px, 4vw, 40px); }

  /* ── Related: 모바일과 동일 2개 노출 ── */
  .x-related__inner{ gap: clamp(12px, 2vw, 24px); padding-top: 32px; padding-bottom: 32px; }
  .x-related__item{ flex: 0 0 calc(50% - 8px); min-width: calc(50% - 8px); height: clamp(90px, 14vw, 150px); }
  .x-related__item a{ padding: clamp(14px, 3vw, 28px) clamp(22px, 4vw, 44px); border-radius: clamp(12px, 1.6vw, 18px); }
  .x-related__item img{ max-height: clamp(52px, 9vw, 90px); }
  .x-related__btn{ width: clamp(36px, 5vw, 52px); height: clamp(36px, 5vw, 52px); }
  .x-related__btn svg{ width: clamp(18px, 2.6vw, 26px); height: auto; }

  /* ── Footer: 모바일과 동일 세로 스택, 비례 확대 ── */
  .x-footer__inner{ padding-top: 32px; padding-bottom: clamp(44px, 7vw, 72px); }
  .x-footer__top{ flex-direction: column; align-items: flex-start; gap: clamp(20px, 4vw, 36px); }
  .x-footer__logo img{ height: clamp(40px, 8.5vw, 72px); }
  .x-footer__policy{ flex-wrap: wrap; gap: clamp(14px, 3vw, 26px) clamp(20px, 4vw, 36px); }
  .x-footer__policy a{ font-size: clamp(14px, 3vw, 22px); }
  .x-footer__rule{ margin: clamp(28px, 5vw, 48px) 0 clamp(26px, 4.5vw, 44px); }
  .x-footer__bottom{ align-items: baseline; gap: clamp(20px, 4vw, 36px); }
  .x-footer__addr{ font-size: clamp(14px, 3vw, 22px); line-height: 1.7; word-break: keep-all; }
  .x-footer__copy{ font-size: clamp(12px, 2.6vw, 20px); margin-top: clamp(16px, 3vw, 26px); }
  .x-footer__sns{ align-items: flex-end; gap: clamp(14px, 2.4vw, 22px); flex: 0 0 auto; }
  .x-footer__sns-label{ font-size: clamp(12px, 2.6vw, 20px); }
  .x-footer__sns-list img{ width: clamp(30px, 6.5vw, 48px); height: clamp(30px, 6.5vw, 48px); }
}

/* ───────────── 히어로만: 819px 이하에서 모바일/태블릿(흰글자·16:9) ─────────────
   820px 이상은 이 블록이 안 걸려 베이스 PC 히어로(.x-hero 715px·좌측 어두운 글자·줌인트로)가 그대로 나온다.
   (769~819 태블릿 = 16/9 흰글자, ≤768 = 아래 블록에서 6/6으로 override) */
@media (max-width: 819px){
  .x-hero{ height: auto; aspect-ratio: 16 / 9; }
  .x-hero__slide::after{ content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.58) 100%); pointer-events: none; }
  .x-hero__content{ padding: 0 0 clamp(36px, 5vw, 64px); justify-content: center; align-items: center; text-align: center; }
  .x-hero__title{ font-size: clamp(28px, 5vw, 52px); min-height: 0; color: #fff; }
  .x-hero__title.is-typing::after{ background: #fff; }
  .x-hero__sub{ font-size: clamp(19px, 3.6vw, 37px); margin-top: clamp(5px, 1vw, 10px); color: #fff; }
  .x-hero__cta{ margin-top: clamp(28px, 6vw, 52px); font-size: clamp(16px, 3vw, 30px); gap: clamp(11px, 2.2vw, 22px); padding-bottom: 4px; color: #fff; border-bottom-color: rgba(255,255,255,.7); }
  .x-hero__cta svg{ width: clamp(22px, 5vw, 46px); height: auto; }
  .x-hero__controls-wrap{ bottom: clamp(14px, 3vw, 30px); justify-content: center; }
  .x-hero__controls{ gap: clamp(10px, 2vw, 20px); }
  .x-hero__counter{ font-size: clamp(11px, 2.2vw, 20px); color: rgba(255,255,255,.7); }
  .x-hero__counter b{ color: #fff; }
  .x-hero__progress{ width: clamp(60px, 11vw, 120px); background: rgba(255,255,255,.3); }
  .x-hero__progress-bar{ background: #fff; }
  .x-hero__btn{ width: clamp(26px, 5.4vw, 50px); height: clamp(26px, 5.4vw, 50px); color: #fff; }
  .x-hero__btn--box{ width: clamp(16px, 3.4vw, 32px); height: clamp(16px, 3.4vw, 32px); border-color: rgba(255,255,255,.5); }
  .x-hero__btn--box:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); }
  .x-hero__btn svg{ height: clamp(11px, 2.4vw, 22px); width: auto; }
  .x-hero__img,
  .x-hero__slide.is-active .x-hero__img{ transform: scale(1); transition: none; object-position: 70% center; }
}

/* ───────────── 모바일 (≤768px) ───────────── */
@media (max-width: 768px){
  :root{ --x-gutter: 16px; --x-header-h: 60px; }

  /* ── 헤더 로고 축소 ── */
  .x-logo{ font-size: 22px; }

  /* ── 모바일 검색: 돋보기 누르면 헤더 아래로 둥근(pill) 검색창이 내려옴 ──
     데스크톱(밑줄 왼쪽 펼침)과 달리, 좁은 폭에서 로고와 겹치지 않도록 헤더 바 아래 풀폭으로 표시.
     .x-search를 static으로 바꿔 input의 기준을 sticky 헤더(.x-header)로 → top:100%가 헤더 바로 아래 */
  .x-search{ position: static; }
  .x-search__input{
    position: absolute;
    top: calc(100% + 10px);
    left: var(--x-gutter);
    right: var(--x-gutter);
    width: auto;
    transform: translateY(-8px);
    padding: 13px 50px 13px 22px;          /* 우측은 돋보기 아이콘 자리 */
    border: 1px solid var(--x-line);       /* 둥근 테두리(밑줄 대신) */
    border-radius: 999px;
    background: var(--x-bg) url("data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' width='20' height='20' viewBox='0 0 18 18' fill='none'><circle cx='8' cy='8' r='5.2' stroke='%236b6b6b' stroke-width='1.4'/><path d='M12 12 L16.5 16.5' stroke='%236b6b6b' stroke-width='1.4' stroke-linecap='round'/></svg>") no-repeat right 18px center;
    font-size: 16px;
    box-shadow: 0 6px 16px rgba(0,0,0,.06);
    opacity: 0;
    visibility: hidden;
    transition: opacity .25s ease, transform .25s ease, visibility .25s ease;
  }
  .x-search.is-open .x-search__input{
    width: auto;
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    border-color: var(--x-line);           /* 데스크톱의 밑줄색(--x-point) override → 연한 둥근 테두리 */
  }
  /* 입력 시 나타나는 브라우저 기본 X(클리어) 버튼 제거 */
  .x-search__input::-webkit-search-cancel-button,
  .x-search__input::-webkit-search-decoration{ -webkit-appearance: none; appearance: none; display: none; }
  /* 배경 돋보기(클릭 불가)를 제거하고, 클릭 가능한 검색 버튼(.x-search__go)으로 대체 */
  .x-search__input{ background-image: none; }
  .x-search__go{
    position: absolute;
    top: calc(100% + 10px);
    right: var(--x-gutter);
    width: 46px;
    height: 46px;                          /* 펼쳐진 pill 입력창 높이에 맞춰 우측 세로중앙 */
    align-items: center;
    justify-content: center;
    color: #6b6b6b;
    z-index: 2;
  }
  .x-search.is-open .x-search__go{ display: inline-flex; }

  /* ── 히어로: 배너(약 3:1)가 거의 전부 보이도록 높이를 이미지 비율에 근접 + 텍스트 축소 ── */
  .x-hero{ height: auto; aspect-ratio: 6 / 6; }   /* 1:1 */
  /* 이미지 위에 흰 글자가 잘 보이도록 다크 그라데이션 스크림(이미지 위·콘텐츠 아래) */
  .x-hero__slide::after{
    content: "";
    position: absolute;
    inset: 0;
    z-index: 1;
    background: linear-gradient(180deg, rgba(0,0,0,.30) 0%, rgba(0,0,0,.45) 55%, rgba(0,0,0,.58) 100%);
    pointer-events: none;
  }
  .x-hero__content{ padding: 0 0 32px; justify-content: center; align-items: center; text-align: center; }   /* 타이틀·부제·버튼을 세로 중앙쯤 + 가로 중앙정렬 (하단 32px는 컨트롤 공간) */
  /* 텍스트·버튼은 viewport 비례로 동적 축소(clamp) — 상한을 화면 비례값까지 낮춰 폭이 줄면 텍스트도 같이 줄게 (타이틀·부제·버튼 +30%). 모바일은 흰색 */
  .x-hero__title{ font-size: clamp(19px, 5vw, 28px); min-height: 0; color: #fff; }
  .x-hero__title.is-typing::after{ background: #fff; }
  .x-hero__sub{ font-size: clamp(14px, 3.6vw, 19px); margin-top: clamp(3px, 1vw, 5px); color: #fff; }
  /* 바로가기: 글자·화살표 추가 +20% + 부제와 간격 더 띄움 + 흰색 */
  .x-hero__cta{ margin-top: clamp(20px, 6vw, 28px); font-size: clamp(12px, 3vw, 16px); gap: clamp(6px, 2.2vw, 11px); padding-bottom: 3px; color: #fff; border-bottom-color: rgba(255,255,255,.7); }
  .x-hero__cta svg{ width: clamp(17px, 5vw, 22px); height: auto; }
  .x-hero__controls-wrap{ bottom: 10px; justify-content: center; }   /* 컨트롤도 가운데 정렬 */
  .x-hero__controls{ gap: clamp(5px, 2vw, 10px); }
  /* 카운터·상태바 흰색 */
  .x-hero__counter{ font-size: clamp(9px, 2.2vw, 11px); color: rgba(255,255,255,.7); }
  .x-hero__counter b{ color: #fff; }
  .x-hero__progress{ width: clamp(40px, 11vw, 60px); background: rgba(255,255,255,.3); }
  .x-hero__progress-bar{ background: #fff; }
  /* 재생/정지·이전/다음 컨트롤 버튼 + 내부 아이콘 축소 + 흰색 */
  .x-hero__btn{ width: clamp(20px, 5.4vw, 26px); height: clamp(20px, 5.4vw, 26px); color: #fff; }
  .x-hero__btn--box{ width: clamp(13px, 3.4vw, 16px); height: clamp(13px, 3.4vw, 16px); border-color: rgba(255,255,255,.5); }
  .x-hero__btn--box:hover{ background: rgba(255,255,255,.12); border-color: rgba(255,255,255,.8); }
  .x-hero__btn svg{ height: clamp(8px, 2.4vw, 11px); width: auto; }
  /* 슬라이드 이미지: 모바일은 줌 인트로(scale 1.3) 없이 cover로 화면 폭에 맞춤 + 이미지를 왼쪽으로 10% 이동(초점 60%) */
  .x-hero__img,
  .x-hero__slide.is-active .x-hero__img{ transform: scale(1); transition: none; object-position: 70% center; }

  /* 섹션 간격 통일(모바일): 히어로 → 뉴스 = 45px */
  .x-news{ padding-top: 45px; }

  /* ── 섹션 헤더 타이포(콘텐츠 타이틀 축소) ── */
  .x-news__title, .x-videos__title, .x-events__title{ font-size: 20px; }
  /* 뉴스 탭+더보기 한 줄: 텍스트 동적 축소(clamp) + 더보기 우측 정렬 */
  .x-news__head{ gap: 10px 8px; }
  .x-news__tabs{ gap: 0; }
  .x-news__tab{ font-size: clamp(11px, 3.2vw, 16px); padding: 5px clamp(5px, 1.8vw, 10px) 7px; }
  .x-news__tab.is-active::after{ left: clamp(5px, 1.8vw, 10px); right: clamp(5px, 1.8vw, 10px); }
  .x-news__more{ display: none; }   /* 모바일: 더보기 버튼 숨김 */
  .x-quick__head{ gap: 16px; margin-bottom: 24px; }

  /* ── News: 2열 + 카드 컴팩트 ── */
  .x-news__grid{ grid-template-columns: repeat(2, 1fr); gap: 12px; }
  .x-news__card{ min-height: 0; padding: 18px 16px; }
  .x-news__date{ margin-bottom: 14px; gap: 4px; }
  /* 카드 내부 텍스트도 viewport 비례 동적 축소(clamp) */
  .x-news__day{ font-size: clamp(22px, 6.4vw, 32px); }
  .x-news__full{ font-size: clamp(10px, 2.9vw, 13px); }
  .x-news__card-title{ font-size: clamp(13px, 3.5vw, 16px); margin-bottom: 10px; }
  .x-news__desc{ font-size: clamp(11px, 3vw, 13px); padding-right: 20px; -webkit-line-clamp: 2; }   /* 모바일은 내용 2줄만 노출(데스크톱 3줄) */
  .x-news__corner svg{ width: 46px; height: 48px; }   /* 좁은 2열 카드에서 곡선+화살표가 내용 가리지 않게 축소(64→46) */

  /* ── Quick: 4열 + 아이콘 축소 ── */
  /* 섹션 간격 통일: 뉴스/퀵 → 행사 = 45px */
  .x-quick{ padding-bottom: 45px; }
  .x-quick__list{ grid-template-columns: repeat(4, 1fr); gap: 10px; }
  .x-quick__item a{ gap: 8px; padding: 6px 2px; }
  .x-quick__icon{ width: 58px; height: 58px; }
  .x-quick__icon img{ width: 36px; height: 36px; }
  .x-quick__icon svg{ width: 26px; height: 26px; }
  .x-quick__label{ font-size: 12px; }

  /* ── Events: 밴드를 배너 비율(3:1)에 맞춰 이미지가 크롭·여백 없이 꽉 차게(cover) + 텍스트·버튼 전부 동적 축소해 이미지 안에 들어가도록 ── */
  .x-events__inner{ min-height: 0; aspect-ratio: 5 / 2; margin-left: 16px; margin-right: 16px; padding: clamp(10px, 3vw, 16px) clamp(16px, 5vw, 28px); background-size: cover; background-position: center; }
  .x-events__title{ font-size: clamp(14px, 4.2vw, 20px); margin-bottom: clamp(3px, 1vw, 6px); }   /* +10% */
  .x-events__desc{ font-size: clamp(10px, 2.9vw, 13px); line-height: 1.35; margin-bottom: clamp(6px, 2vw, 12px); }   /* +10% */
  .x-events__btn{ font-size: clamp(7px, 1.7vw, 8px); padding: clamp(4px, 1vw, 5px) clamp(8px, 2.4vw, 13px); gap: clamp(5px, 1.6vw, 7px); }   /* +20% */
  .x-events__btn svg{ width: clamp(7px, 2.2vw, 10px); height: auto; }   /* +20% */

  /* ── Videos: 카드폭을 화면에 맞춤 ── */
  /* ── 홍보영상: 카드 타이틀을 카드 밖(아래)에 어두운 텍스트·작게 표시 + 요소 동적 축소 ── */
  /* 카드 폭/높이를 변수화 → stage 높이·nav 세로위치를 정확히 계산(카드는 상단 앵커) */
  .x-videos{ padding-top: 45px; padding-bottom: 22px; }   /* 섹션 간격 통일: 행사→홍보영상 45px(상단) / 홍보영상→관련 45px(하단22 + 관련상단23) */
  .x-videos__head{ margin-bottom: 20px; }
  .x-videos__stage{
    --xv-cardw: min(144px, 37vw);
    --xv-cardh: calc(min(144px, 37vw) * 1.382);   /* aspect 340/470 = 1.382 */
    width: min(252px, 84vw);
    height: calc(var(--xv-cardh) + 78px);          /* 카드 이미지 + 아래 타이틀 공간 */
    perspective: 760px;                            /* 모바일 3D 커버플로우 원근(작은 카드라 데스크톱 1700보다 짧게) */
    perspective-origin: 50% calc(var(--xv-cardh) / 2);   /* 회전 소실점을 카드 이미지 세로중앙에 */
    overflow: visible;                             /* 측면 카드가 무대 밖으로 살짝 비져나오도록 */
  }
  /* 카드: 상단 앵커(top:0) → 아래에 타이틀 자리 확보. 변형은 JS가 인라인으로 부여(커버플로우). transform-origin:top → 측면 카드 윗변 정렬 */
  .x-vcard{ width: var(--xv-cardw); height: auto; aspect-ratio: 340 / 470; margin: 0; top: 0; left: 50%; transform: translateX(-50%); transform-origin: 50% 0; backface-visibility: hidden; overflow: visible; }
  .x-vcard__media{ border-radius: 14px; overflow: hidden; }   /* 카드 overflow:visible → 이미지 라운드는 media에서 처리 */
  /* 캡션을 카드 아래로 빼고 어두운 텍스트·작게. 가운데(is-active) 카드 타이틀만 노출 */
  .x-vcard__caption{ top: calc(100% + 10px); bottom: auto; left: 50%; width: min(300px, 84vw); padding: 0; transform: translateX(-50%); text-align: center; color: var(--x-ink); opacity: 0; transition: opacity .4s ease; }
  .x-vcard.is-active .x-vcard__caption{ transform: translateX(-50%); opacity: 1; }   /* 가운데 카드만 보이고 가로중앙 유지 */
  .x-vcard__title{ color: var(--x-ink); font-size: clamp(11px, 3.1vw, 14px); line-height: 1.3; text-shadow: none; text-wrap: balance; }   /* 끝줄에 단어 하나만 떨어지지 않게 줄 길이 균형 분배 */
  .x-vcard__date{ color: var(--x-ink-soft); font-size: clamp(9px, 2.4vw, 11px); margin-top: clamp(3px, 1vw, 5px); text-shadow: none; }
  /* 재생 버튼(이미지 중앙) 동적 축소 */
  .x-vcard__play{ width: clamp(38px, 11vw, 52px); height: clamp(38px, 11vw, 52px); }
  .x-vcard__play svg{ width: clamp(16px, 4.6vw, 20px); height: auto; }
  /* 이전/다음: 카드 이미지 세로 중앙에 맞춤(카드 상단 앵커) + 동적 축소 */
  /* 버튼 크기는 관련사이트(.x-related__btn)와 동일하게 통일 */
  .x-videos__nav{ top: calc(var(--xv-cardh) / 2); width: clamp(26px, 7vw, 36px); height: clamp(26px, 7vw, 36px); }
  .x-videos__nav svg{ width: clamp(13px, 3.8vw, 18px); height: auto; }
  /* 이전/다음을 카드(슬라이드) 바깥, 단 공통 콘텐츠 컨테이너(좌우 --x-gutter 안쪽)는 넘지 않게.
     50% - 50vw = -(stage 양옆여백) → +거터 만큼 안쪽 → 버튼 바깥변이 정확히 컨테이너 좌/우 변에 닿음 */
  .x-videos__prev{ left: calc(50% - 50vw + var(--x-gutter)); }
  .x-videos__next{ right: calc(50% - 50vw + var(--x-gutter)); }
  .x-videos__sns img{ width: clamp(20px, 5.6vw, 26px); height: clamp(20px, 5.6vw, 26px); }

  /* ── Related: [이전·카드1·카드2·다음] 항상 한 줄(JS perPage=2와 일치) + 요소 전부 동적 축소 ── */
  .x-related__inner{ gap: clamp(6px, 2vw, 12px); padding-top: 23px; padding-bottom: 22px; }   /* 섹션 간격 통일: 홍보영상→관련 45px(영상하단22+여기23) / 관련→푸터 45px(여기22+푸터상단23) */
  .x-related__item{ flex: 0 0 calc(50% - 7px); min-width: calc(50% - 7px); height: clamp(60px, 17vw, 90px); }
  .x-related__item a{ padding: clamp(8px, 3vw, 14px) clamp(10px, 4vw, 22px); border-radius: clamp(8px, 2.4vw, 12px); }
  .x-related__item img{ max-height: clamp(32px, 11vw, 52px); }
  .x-related__btn{ width: clamp(26px, 7vw, 36px); height: clamp(26px, 7vw, 36px); }
  .x-related__btn svg{ width: clamp(13px, 3.8vw, 18px); height: auto; }

  /* ── Footer: 가로 → 세로 스택 + 요소 전부 동적 축소 ── */
  .x-footer__inner{ padding-top: 23px; padding-bottom: clamp(28px, 7vw, 44px); }   /* 섹션 간격 통일: 관련→푸터 45px(관련하단22+여기23) */
  /* 상단: 로고(좌) ↔ SNS(우) 한 줄, 정책 링크는 아랫줄 전체 폭 */
  .x-footer__top{ flex-direction: row; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: clamp(12px, 3.5vw, 18px) clamp(12px, 4vw, 20px); }
  .x-footer__logo{ order: 1; }
  .x-footer__topsns{ display: flex; order: 2; }
  .x-footer__policy{ order: 3; flex-basis: 100%; }
  .x-footer__logo img{ height: clamp(30px, 8.5vw, 40px); }
  .x-footer__policy{ flex-wrap: wrap; gap: clamp(8px, 3vw, 14px) clamp(12px, 4vw, 20px); }
  .x-footer__policy a{ font-size: clamp(11px, 3vw, 14px); }
  .x-footer__rule{ margin: clamp(18px, 5vw, 28px) 0 clamp(16px, 4.5vw, 26px); }
  .x-footer__bottom{ align-items: center; gap: clamp(12px, 4vw, 20px); }   /* 주소 블록 ↔ 웹접근성 마크 같은 라인(세로 중앙 정렬) */
  .x-footer__addr{ font-size: clamp(11px, 3vw, 14px); line-height: 1.7; word-break: keep-all; }
  .x-footer__copy{ font-size: clamp(10px, 2.6vw, 12px); margin-top: clamp(10px, 3vw, 16px); }
  .x-footer__sns{ align-items: flex-end; gap: clamp(8px, 2.4vw, 14px); flex: 0 0 auto; }
  .x-footer__sns-label{ font-size: clamp(10px, 2.6vw, 12px); }
  .x-footer__sns-list img{ width: clamp(24px, 6.5vw, 30px); height: clamp(24px, 6.5vw, 30px); }
}

/* ───────────── 소형 모바일 (≤480px) ───────────── */
@media (max-width: 480px){
  /* ── 헤더 로고 ── */
  .x-logo{ font-size: 20px; }

  /* 히어로 텍스트는 ≤768 clamp가 viewport 비례로 동적 처리 → 별도 고정값 불필요 */

  /* ── 섹션 타이틀 더 축소 ── */
  .x-news__title, .x-videos__title{ font-size: 18px; }   /* 행사 타이틀은 ≤768 clamp가 동적 처리(밴드 안에 맞춤) */

  /* ── Quick: 4열 유지 + 아이콘 한 단계 더 축소 ── */
  .x-quick__list{ grid-template-columns: repeat(4, 1fr); gap: 8px; }
  .x-quick__icon{ width: 52px; height: 52px; }
  .x-quick__icon img{ width: 32px; height: 32px; }
  .x-quick__label{ font-size: 11px; }

  /* ── News: 2열 유지(카드 패딩만 더 축소; 텍스트는 ≤768 clamp가 동적 처리) ── */
  .x-news__card{ padding: 16px 12px; }

  /* 푸터 정책 링크·텍스트는 ≤768 clamp가 동적 처리 */
}

/* 모바일 메뉴 열렸을 때 본문 스크롤 잠금 (메인=.x-page, 서브=body) */
.x-page.is-nav-open, body.is-nav-open{ overflow: hidden; }