@charset "UTF-8";
/*
 Theme Name:   GeneratePress EP Theme
 Theme URI:    https://generatepress.com
 Description:  Default GeneratePress child theme made by EP.
 Author:       EVERYDAY PRACTICE
 Author URI:   http://everyday-practice.com
 License:      GNU General Public License v3.0 (or later)
 License URI:  https://www.gnu.org/licenses/gpl-3.0.html
 Template:     generatepress
 Version:      0.1
*/
/* Initialize */
@font-face {
  font-family: "Pretendard Variable";
  src: url("./assets/fonts/PretendardVariable.woff2") format("woff2");
  font-weight: 45 930;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url("./assets/fonts/SuisseIntl-Light-WebS.woff2") format("woff2"), url("./assets/fonts/SuisseIntl-Light-WebS.woff") format("woff");
  font-weight: 1 349;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url("./assets/fonts/SuisseIntl-Regular-WebS.woff2") format("woff2"), url("./assets/fonts/SuisseIntl-Regular-WebS.woff") format("woff");
  font-weight: 350 399;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url("./assets/fonts/SuisseIntl-Book-WebS.woff2") format("woff2"), url("./assets/fonts/SuisseIntl-Book-WebS.woff") format("woff");
  font-weight: 400 474;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url("./assets/fonts/SuisseIntl-Medium-WebS.woff2") format("woff2"), url("./assets/fonts/SuisseIntl-Medium-WebS.woff") format("woff");
  font-weight: 475 899;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url("./assets/fonts/SuisseIntl-SemiBold-WebS.woff2") format("woff2"), url("./assets/fonts/SuisseIntl-SemiBold-WebS.woff") format("woff");
  font-weight: 900 949;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Suisse Int'l";
  src: url("./assets/fonts/SuisseIntl-Bold-WebS.woff2") format("woff2"), url("./assets/fonts/SuisseIntl-Bold-WebS.woff") format("woff");
  font-weight: 950 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha";
  src: url("./assets/fonts/HanwhaL_OTF.otf") format("opentype");
  font-weight: 1 424;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha";
  src: url("./assets/fonts/HanwhaR_OTF.otf") format("opentype");
  font-weight: 425 899;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha";
  src: url("./assets/fonts/HanwhaB_OTF.otf") format("opentype");
  font-weight: 900 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha Gothic";
  src: url("./assets/fonts/08HanwhaGothicT.woff2") format("woff2"), url("./assets/fonts/08HanwhaGothicT.woff") format("woff");
  font-weight: 1 250;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha Gothic";
  src: url("./assets/fonts/07HanwhaGothicEL.woff2") format("woff2"), url("./assets/fonts/07HanwhaGothicEL.woff") format("woff");
  font-weight: 251 349;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha Gothic";
  src: url("./assets/fonts/06HanwhaGothicL.woff2") format("woff2"), url("./assets/fonts/06HanwhaGothicL.woff") format("woff");
  font-weight: 350 399;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha Gothic";
  src: url("./assets/fonts/05HanwhaGothicR.woff2") format("woff2"), url("./assets/fonts/05HanwhaGothicR.woff") format("woff");
  font-weight: 400 474;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "Hanwha Gothic";
  src: url("./assets/fonts/04HanwhaGothicB.woff2") format("woff2"), url("./assets/fonts/04HanwhaGothicB.woff") format("woff");
  font-weight: 475 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LIFEPLUS";
  src: url("./assets/fonts/LIFEPLUS-Bold.woff2") format("woff2");
  font-weight: 451 1000;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LIFEPLUS";
  src: url("./assets/fonts/LIFEPLUS-Medium.woff2") format("woff2");
  font-weight: 201 450;
  font-style: normal;
  font-display: swap;
}
@font-face {
  font-family: "LIFEPLUS";
  src: url("./assets/fonts/LIFEPLUS-Light.woff2") format("woff2");
  font-weight: 1 200;
  font-style: normal;
  font-display: swap;
}
:root {
  --white: #fff;
  --black: #000;
  --pattern-00: rgba(147, 147, 147, 0);
  --pattern-20: rgba(147, 147, 147, 0.2);
  --pattern-40: rgba(147, 147, 147, 0.4);
  --pattern-60: rgba(147, 147, 147, 0.6);
  --pattern-80: rgba(147, 147, 147, 0.8);
  --gray-100: #BFBFBF;
  --gray-200: #A7A7A7;
  --gray-300: #8B8686;
  --bg-gray: #D3D3D3;
}

.font-suisse-intl {
  font-family: "Suisse Int'l", "Pretendard Variable", sans-serif;
}

.font-hanwha {
  font-family: "Hanwha", "Pretendard Variable", sans-serif;
  letter-spacing: -0.05em;
}

.font-hanwha-gothic {
  font-family: "Hanwha Gothic", "Pretendard Variable", sans-serif;
}

.font-pretendard {
  font-family: "Pretendard Variable", sans-serif;
}

.font-lifeplus {
  font-family: "LIFEPLUS", "Pretendard Variable", sans-serif;
  -webkit-text-stroke: 0.02em currentColor;
  paint-order: stroke fill;
}
.font-lifeplus:is(.font-\[500\], .font-\[600\], .font-\[700\], .font-\[800\], .font-\[900\], .font-\[950\]) {
  -webkit-text-stroke: 0;
}

/*
 * 파티클 캔버스(`#bg-canvas`)는 랜딩·콘텐츠가 같은 마운트를 쓰므로 `_particle.scss` 한 곳에서
 * 정의한다. 랜딩이 쓰는 프리셋은 `[data-preset='landing']` 이다.
 */
/* ── Intro (front page first screen) ─────────────────────────────────────── */
/*
 * 헤더 로고 인트로(assets/js/ui/header-logo-intro.js)와 파티클이 재생되는 첫 화면.
 * 자체 콘텐츠는 하단 마퀴 한 줄뿐이고 나머지는 높이만 차지한다. 홈에서는 `body` 배경이 어두운 값이라
 * (style.scss 의 `--scene-bg`) 반투명한 계열사 섹션까지 하나의 어두운 면으로 이어지고,
 * 그 위에 색 있는 파티클이 얹힌다.
 * --vh 를 쓰지 않는 이유는 아래 Affiliates 주석 참고.
 */
body.is-logo-intro-scroll-locked, body.is-site-popup-scroll-locked {
  overscroll-behavior: none;
  touch-action: none;
}
body header {
  opacity: 0;
  transition: opacity 0.8s ease;
}
body header.header-loaded {
  opacity: 1;
}
body header .main-nav,
body header .side-nav {
  transition: opacity 0.8s ease;
  pointer-events: auto;
}
body header:not(.header-loaded) .main-nav,
body header:not(.header-loaded) .side-nav {
  opacity: 0;
  pointer-events: none;
}
body header.header-logo-intro {
  opacity: 1;
  transition: none;
}

.index-intro {
  --index-intro-h: 100svh;
  height: var(--index-intro-h);
  /*
   * 배경색은 전역 `body` 규칙(style.scss)에 맡기고 여기서는 두지 않는다. 이 요소는
   * `position: relative` 라, 마크업상 뒤에 있는 것만으로 파티클 캔버스(문서 맨 앞,
   * `z-index: 0`)를 덮어 버린다 — 불투명 배경을 두면 씬이 통째로 가려진다.
   * 자세한 내용은 _particle.scss 의 `#bg-canvas` 주석 참고.
   */
}
@supports (height: 100svh) {
  .index-intro {
    --index-intro-h: 100svh;
  }
}

/*
 * 인트로 하단을 가로지르는 텍스트 마퀴(순수 CSS, 무한 반복).
 * 트랙에 같은 텍스트를 짝수 벌 넣고 -50% 까지 옮긴다 — 앞 절반이 뒤 절반과 같은 그림이라
 * 되감기는 지점이 보이지 않는다. 벌 수는 front-page.php 의 $intro_marquee_repeat 가 정하며
 * 두 가지 조건을 지켜야 한다.
 *   1) 짝수일 것            — 홀수면 절반 지점이 텍스트 한가운데라 이어지지 않는다.
 *   2) 절반 폭 ≥ 뷰포트 폭  — 되감기 직전(트랙이 -50% 인 순간) 오른쪽 끝이 비지 않게.
 * 항목 간격을 gap 이 아니라 padding-right 로 주는 것도 같은 이유다. gap 은 마지막 항목 뒤에
 * 붙지 않아 앞뒤 절반의 폭이 한 칸씩 어긋나고, 그러면 -50% 마다 텍스트가 툭 튄다.
 */
.index-intro-marquee {
  --ii-marquee-size: 14.3rem;
  --ii-marquee-gap: 6rem;
  --ii-marquee-dur: 40s;
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0.5rem;
  overflow: hidden;
  z-index: 1;
  color: var(--black);
  pointer-events: none;
  /*
   * 로고 인트로가 도는 동안에는 첫 화면에 로고만 두고 감춰 둔다.
   * 로고가 헤더로 이동하기 시작하는 시점(header-logo-intro:dock)에 assets/js/index.js 가
   * `is-visible` 을 붙여 페이드인한다. 트랙 애니메이션은 그 전에도 돌고 있으므로
   * 드러나는 순간 이미 흐르는 중이다.
   */
  opacity: 0;
  transition: opacity 0.8s ease;
}
.index-intro-marquee.is-visible {
  opacity: 1;
}

.index-intro-marquee-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  animation: index-intro-marquee var(--ii-marquee-dur) linear infinite;
}

.index-intro-marquee-text {
  font-family: "Suisse Int'l", "Pretendard Variable", sans-serif;
  flex-shrink: 0;
  padding-right: var(--ii-marquee-gap);
  font-size: var(--ii-marquee-size);
  font-weight: 450;
  line-height: 1.2;
  white-space: nowrap;
}

@keyframes index-intro-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
/*
 * 모션 축소: 흐르지 않고 첫 벌이 그대로 멈춰 있다.
 * 이때는 로고 인트로도 건너뛰므로 페이드인을 기다리지 않고 바로 보여 준다
 * (header-logo-intro.js 가 dock 을 즉시 쏘지만, 그 스크립트가 없어도 글이 사라지지 않게).
 */
@media (prefers-reduced-motion: reduce) {
  .index-intro-marquee {
    opacity: 1;
    transition: none;
  }
  .index-intro-marquee-track {
    animation: none;
  }
}
/* ── Affiliates (front page top) ─────────────────────────────────────────── */
/*
 * 계열사명 목록이 일정 간격으로 한 행씩 올라가며 화면 중앙 괄호를 통과한다(자동 재생·무한 반복).
 * JS(front-page.php inline)는 단위 없는 값만 쓴다:
 *   --fa-progress-rows : 중앙에 놓일 행 번호(정수)
 *   --fa-d             : 각 행의 중앙 거리(|index - progress|)
 * 길이·시간 계산은 전부 여기(CSS)에서 한다.
 *
 * 주의: 이 섹션에서는 --vh 를 쓰지 않는다. 홈에서도 index.js 의 _doInit() 이
 * LandingSnapEngine.updateViewportHeightVar() 를 무조건 호출해 --vh 를 px 문자열로
 * 덮어쓰기 때문에, 첫 페인트(1vh)와 이후(812px 등)에 동시에 맞는 계산식이 없다.
 */
.index-affiliates {
  --fa-stage-h: 100lvh;
  --fa-name-size: 5.28rem;
  --fa-row-gap: 3rem;
  --fa-row-h: calc(var(--fa-name-size) + var(--fa-row-gap));
  --fa-window-rows: 5;
  --fa-window-max: 60vh;
  --fa-window-h: min(calc(var(--fa-row-h) * var(--fa-window-rows)), var(--fa-window-max));
  --fa-bracket-h: 5.28rem;
  --fa-bracket-gap: 5rem;
  --fa-shift-dur: 0.7s;
  --fa-shift-ease: cubic-bezier(0.65, 0, 0.35, 1);
  --fa-fade-1: 0.5;
  --fa-fade-2: 0.3;
  --fa-fade-min: 0.06;
  --fa-scale-slope: 0;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.8);
  z-index: 1;
}
@supports (height: 100svh) {
  .index-affiliates {
    --fa-stage-h: 100svh;
    --fa-window-max: 60svh;
  }
}
.index-affiliates {
  /*
  * 마지막 행에서 첫 행으로 되감을 때만 JS 가 잠깐 붙인다.
  * 전환을 꺼야 3벌 중 가운데 벌의 시작점으로 순간 이동하는 것이 보이지 않는다.
  */
}
.index-affiliates.is-instant .index-affiliates-list,
.index-affiliates.is-instant .index-affiliates-name {
  transition: none;
}
.index-affiliates .index-affiliates-stage {
  height: var(--fa-stage-h);
  display: flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
}
.index-affiliates .index-affiliates-viewport {
  height: var(--fa-window-h);
  max-width: 100%;
}
.index-affiliates .index-affiliates-viewport,
.index-affiliates .index-affiliates-footer {
  transform: translateY(-9lvh);
}
.index-affiliates {
  /*
  * width: max-content → 목록 중 가장 긴 항목(한화생명금융서비스)의 폭이 된다.
  * 괄호는 이 박스를 기준으로 배치되므로 화면 폭과 무관하게 항상 최장 항목 ±gap 에 온다.
  * 마스크는 목록에만 걸어야 한다(괄호는 선명하게 유지).
  */
}
.index-affiliates .index-affiliates-window {
  width: -moz-max-content;
  width: max-content;
  max-width: 100%;
  height: 100%;
  overflow: hidden;
  -webkit-mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
  mask-image: linear-gradient(to bottom, transparent 0%, #000 12%, #000 88%, transparent 100%);
}
.index-affiliates {
  /* 목록은 흐름 안에 둔다(절대 배치하면 window 가 max-content 폭을 못 잡는다).
    창 위쪽에서 시작하므로 progress 행의 중심이 창 중앙에 오도록 끌어올린다. */
}
.index-affiliates .index-affiliates-list {
  will-change: transform;
  transition: transform var(--fa-shift-dur) var(--fa-shift-ease);
  transform: translate3d(0, calc(var(--fa-window-h) * 0.5 - var(--fa-row-h) * 0.5 - var(--fa-row-h) * var(--fa-progress-rows, 0)), 0);
}
.index-affiliates .index-affiliates-item {
  display: flex;
  align-items: center;
  justify-content: center;
  height: var(--fa-row-h);
}
.index-affiliates {
  /* 배율·투명도는 name 에만 건다. item 높이가 변하면 행 간격 계산이 깨진다. */
}
.index-affiliates .index-affiliates-name {
  font-family: "Hanwha", "Pretendard Variable", sans-serif;
  display: inline-block;
  white-space: nowrap;
  font-size: var(--fa-name-size);
  font-weight: 500;
  line-height: 1;
  color: var(--gray-300);
  /*
  * 1 → 0.5 → 0.3 은 직선 하나로 지나갈 수 없어(첫 칸 -0.5, 이후 -0.2)
  * 기울기가 다른 두 직선의 max 로 꺾는다. 소수 d 에서도 연속이라 전환이 매끄럽다.
  *   가까운 쪽: 1 - (1 - fade-1) × d        → d=0 에서 1,   d=1 에서 fade-1
  *   먼 쪽:     fade-1 - (fade-1 - fade-2) × (d - 1) → d=1 에서 fade-1, d=2 에서 fade-2
  */
  opacity: clamp(var(--fa-fade-min), max(1 - (1 - var(--fa-fade-1)) * var(--fa-d, 0), var(--fa-fade-1) - (var(--fa-fade-1) - var(--fa-fade-2)) * (var(--fa-d, 0) - 1)), 1);
  transform: scale(clamp(0.6, 1 - var(--fa-d, 0) * var(--fa-scale-slope), 1));
  transform-origin: center center;
  transition: opacity var(--fa-shift-dur) var(--fa-shift-ease), transform var(--fa-shift-dur) var(--fa-shift-ease), color 0.3s linear;
  will-change: opacity, transform;
}
.index-affiliates .index-affiliates-item.is-active .index-affiliates-name {
  color: var(--white);
}
.index-affiliates .index-affiliates-bracket {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  height: var(--fa-bracket-h);
  aspect-ratio: 62/103;
  pointer-events: none;
  z-index: 1;
  color: var(--white);
}
.index-affiliates .index-affiliates-bracket svg {
  display: block;
  width: 100%;
  height: 100%;
}
.index-affiliates {
  /* right: 100% → 괄호의 오른쪽 끝이 최장 항목의 왼쪽 끝. 거기서 gap 만큼 더 바깥으로. */
}
.index-affiliates .index-affiliates-bracket-left {
  right: calc(100% + var(--fa-bracket-gap));
}
.index-affiliates .index-affiliates-bracket-right {
  left: calc(100% + var(--fa-bracket-gap));
}
.index-affiliates .index-affiliates-footer {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 20rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 7.2rem;
  padding-inline: var(--cntr);
  z-index: 2;
}
.index-affiliates .index-affiliates-caption {
  text-align: center;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.6;
  width: 80%;
  margin: 0 auto;
}
.index-affiliates .index-affiliates-cta {
  font-family: "Suisse Int'l", "Pretendard Variable", sans-serif;
  display: inline-flex;
  align-items: center;
  padding: 1.2rem 2rem;
  border: 1px solid var(--white);
  border-radius: 999px;
  font-size: 2.8rem;
  font-weight: 450;
  line-height: 1;
  color: var(--white);
  background-color: rgba(0, 0, 0, 0.4);
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}
.index-affiliates .index-affiliates-cta:hover, .index-affiliates .index-affiliates-cta:focus-visible {
  background-color: var(--white);
  border-color: var(--white);
  color: var(--black);
}
.index-affiliates {
  /* 모션 축소: 자동 재생/변환을 모두 끄고 정적 목록으로. JS도 타이머를 돌리지 않는다. */
}
@media (prefers-reduced-motion: reduce) {
  .index-affiliates .index-affiliates-stage {
    height: auto;
    overflow: visible;
    flex-direction: column;
    padding-block: 12rem;
  }
  .index-affiliates .index-affiliates-viewport {
    height: auto;
  }
  .index-affiliates .index-affiliates-window {
    position: static;
    overflow: visible;
    -webkit-mask-image: none;
    mask-image: none;
  }
  .index-affiliates .index-affiliates-list {
    position: static;
    transform: none;
    transition: none;
  }
  .index-affiliates .index-affiliates-item {
    height: auto;
    padding-block: 1rem;
  }
  .index-affiliates {
    /* 자동 재생용 복제본(JS 생성)은 정적 목록에서 중복으로 보인다. */
  }
  .index-affiliates .index-affiliates-item.is-clone {
    display: none;
  }
  .index-affiliates .index-affiliates-name {
    opacity: 1;
    transform: none;
    transition: none;
    color: var(--white);
  }
  .index-affiliates .index-affiliates-bracket {
    display: none;
  }
  .index-affiliates .index-affiliates-footer {
    position: static;
    padding-top: 6rem;
  }
}
@media (max-width: 780px) {
  .index-affiliates {
    --fa-name-size: 2.9rem;
    --fa-bracket-h: 2.7rem;
    --fa-bracket-gap: 2rem;
    --fa-row-gap: 1.5rem;
  }
  .index-affiliates .index-affiliates-viewport {
    transform: translateY(-13lvh);
  }
  .index-affiliates .index-affiliates-footer {
    gap: 4rem;
    bottom: 14rem;
    transform: translateY(2vh);
  }
  .index-affiliates .index-affiliates-caption {
    font-size: 1.7rem;
  }
  .index-affiliates .index-affiliates-cta {
    font-size: 1.7rem;
    padding: 0.7rem 1.1rem;
  }
}

/* ── 홈 섹션 공통 헤더 / 더보기 ───────────────────────────────────────────── */
.index-wrap {
  position: relative;
}
.index-wrap .index-more {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 5;
}
@media (max-width: 1024px) {
  .index-wrap .index-more {
    position: static;
    padding-top: 3.4rem;
  }
  .index-wrap .index-more-link {
    font-size: 1.9rem;
  }
}

.index-head,
.index-more {
  padding-left: var(--cntr);
  padding-right: var(--cntr);
}

.index-head {
  position: relative;
  display: flex;
  padding-bottom: 6rem;
  z-index: 5;
}
@media (max-width: 1024px) {
  .index-head {
    padding-bottom: 3.2rem;
  }
}

.index-head-col {
  width: 50%;
}
.index-head-col + .index-head-col {
  padding-top: 0.6rem;
}

.index-head-title {
  font-size: 8rem;
  font-weight: 500;
  line-height: 1;
}
@media (max-width: 1024px) {
  .index-head-title {
    font-size: 4rem;
  }
}

.index-head-desc {
  width: 50%;
  max-width: 45rem;
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .index-head-desc {
    width: 100%;
    font-size: 1.2rem;
  }
}

.index-more-link {
  display: inline-block;
  font-size: 3rem;
  font-weight: 500;
  line-height: 1;
}

.index-activity .index-head-title,
.index-activity .index-head-desc,
.index-activity .index-more-link,
.index-event .index-head-title,
.index-event .index-head-desc,
.index-event .index-more-link {
  color: var(--white);
}

/* 왼쪽부터 순차적으로 작아지는 스텝 스와이퍼 (디자인: 1728 프레임 / 819 > 536 > 392) */
.step-swiper {
  --step-swiper-gap: 1rem; /* JS의 GAP_PC와 같은 값 */
  --step-swiper-speed: 0.5s; /* JS의 SPEED와 같은 값 */
  /* 카드 = .image-wrap(1:1) + 아래 텍스트 블록. 텍스트 몫은 고정 상수로 잡는다(JS의 TEXT_H). */
  --step-swiper-text: 14rem;
  /* 카드(= .swiper) 높이 상한. lvh 미지원 브라우저용 폴백이고 아래 @supports 가 덮는다. */
  --step-swiper-max-h: calc(100lvh - 25rem);
  /* px-cntr 안쪽 가로 영역. 아래 상한(1.25장) 계산의 기준. */
  --step-swiper-view: calc(100vw - var(--cntr) * 2);
  /* 화면이 아주 낮을 때(가로 모드 폰 등) 카드가 0에 가깝게 줄어들지 않도록 두는 하한. */
  --step-swiper-min: 18rem;
  /*
   * 활성 카드 폭. 기준은 브라우저 "높이" 다 — .image-wrap 이 1:1 이라 이미지 높이가 곧
   * 카드 폭이므로, 높이 상한에서 텍스트 몫을 빼면 그대로 폭이 된다.
   * 상한(clamp 세 번째 항): 세로로 긴 화면에서 카드가 가로로 넘치지 않도록, 보이는 영역에
   *   활성 카드 1.25장이 들어가는 폭을 넘지 않게 한다. 모바일에서는 이 항이 항상 이겨서
   *   기존의 "1.25장" 배치가 그대로 유지된다(예전 phone_large 블록의 식과 동일).
   * 2번 이후 카드는 STEPS(819 > 536 > 392 > 320) 비율을 그대로 곱한다.
   * JS ratio() 는 이 값을 다시 계산하지 않고 .swiper 높이로 실측한다.
   */
  --step-swiper-1: clamp(
    var(--step-swiper-min),
    calc(var(--step-swiper-max-h) - var(--step-swiper-text)),
    calc((var(--step-swiper-view) - var(--step-swiper-gap) * 0.25) / 1.25)
  );
  --step-swiper-2: calc(var(--step-swiper-1) * 0.65446); /* 536 / 819 */
  --step-swiper-3: calc(var(--step-swiper-1) * 0.47863); /* 392 / 819 */
  --step-swiper-4: calc(var(--step-swiper-1) * 0.39072); /* 320 / 819 */
}
@supports (height: 100lvh) {
  .step-swiper {
    --step-swiper-max-h: calc(100lvh - 25rem);
  }
}
@media (max-width: 780px) {
  .step-swiper {
    --step-swiper-gap: 6.4rem; /* JS의 GAP_MOBILE과 같은 값 */
  }
}
.step-swiper.is-empty .swiper,
.step-swiper.is-empty .step-swiper-navigation {
  display: none;
}
.step-swiper.is-empty .step-swiper-empty {
  display: block;
}
.step-swiper .swiper {
  height: calc(var(--step-swiper-1) + var(--step-swiper-text));
  overflow: hidden;
  -moz-user-select: none;
       user-select: none;
  -webkit-user-select: none;
  touch-action: pan-y;
}
.step-swiper .swiper a,
.step-swiper .swiper img {
  -webkit-user-drag: none;
}
.step-swiper .swiper-wrapper {
  align-items: flex-start;
}
.step-swiper .swiper-slide {
  position: relative;
  flex-shrink: 0;
  /* JS가 인라인 값을 넣기 전 초기 렌더 기준.
     폭은 4번째부터, 불투명도는 5번째부터 마지막 단계로 묶인다
     (JS의 stepWidth() / stepOpacity()와 같은 규칙. 아래 :nth-child 가 앞 단계를 덮는다). */
  width: var(--step-swiper-4);
  opacity: 0;
  /* 폭 전환이 이 컴포넌트의 기본 모션이자 카테고리 전환 모션의 재료 */
  transition: width var(--step-swiper-speed) ease, opacity var(--step-swiper-speed) ease;
  overflow: hidden;
  /* Swiper는 spaceBetween을 초기화 시점에 인라인 margin으로 찍는다.
     같은 값을 CSS에 미리 깔아 초기 렌더에서 간격이 뒤늦게 생기는 현상을 막는다. */
  margin-right: var(--step-swiper-gap);
}
.step-swiper .swiper-slide:last-child {
  margin-right: 0;
}
.step-swiper .swiper-slide:nth-child(1) {
  width: var(--step-swiper-1);
  opacity: 1;
}
.step-swiper .swiper-slide:nth-child(2) {
  width: var(--step-swiper-2);
  opacity: 0.8;
}
.step-swiper .swiper-slide:nth-child(3) {
  width: var(--step-swiper-3);
  opacity: 0.5;
}
.step-swiper .swiper-slide:nth-child(4) {
  opacity: 0.3;
}
.step-swiper .swiper-slide .image-wrap {
  aspect-ratio: 1/1;
  overflow: hidden;
}
.step-swiper .swiper-slide .image-wrap img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.step-swiper {
  /*
   * 1025px 이상에서만 내비게이션의 기준 박스가 된다.
   * .step-swiper 의 높이 = .swiper 의 높이(나머지 자식인 -empty 는 display: none)라,
   * 여기 기준 top: 50% 가 곧 "스와이퍼 높이의 정중앙" 이다.
   * 1024px 이하에서는 relative 를 주지 않는다 — 컨테이닝 블록이 .index-wrap 으로 남아
   * 기존의 "오른쪽 아래(More 링크 줄)" 배치가 그대로 유지된다.
   */
}
@media (min-width: 1025px) {
  .step-swiper {
    position: relative;
  }
}
.step-swiper .step-swiper-navigation {
  display: flex;
  justify-content: flex-end;
  gap: 1rem;
  position: absolute;
  right: 0;
  bottom: 0;
  z-index: 5;
  padding-inline: var(--cntr);
}
@media (min-width: 1025px) {
  .step-swiper .step-swiper-navigation {
    top: 50%;
    bottom: auto;
    left: 0;
    transform: translateY(-50%);
    justify-content: space-between;
    pointer-events: none;
  }
}
.step-swiper .step-swiper-empty {
  display: none;
  padding-block: 8rem;
}
.step-swiper {
  /* 카테고리 전환(접힘 → 교체 → 펼침) 중 조작 차단 */
}
.step-swiper.is-swapping {
  pointer-events: none;
}
.step-swiper .step-swiper-button {
  width: 4rem;
  height: 4rem;
  border: 1px solid currentColor;
  background: none;
  padding: 0;
  cursor: pointer;
  background: var(--black) !important;
  transition: opacity 0.3s ease;
  pointer-events: auto;
}
.step-swiper .step-swiper-button::after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-color: currentColor;
  -webkit-mask: url("assets/images/arrow_top_down.svg") no-repeat center/100% auto;
  mask: url("assets/images/arrow_top_down.svg") no-repeat center/100% auto;
}
.step-swiper .step-swiper-button--next::after {
  transform: rotate(90deg);
}
.step-swiper .step-swiper-button--prev::after {
  transform: rotate(-90deg);
}
.step-swiper .step-swiper-button:disabled {
  opacity: 0.3;
  cursor: default;
}
@media (max-width: 1024px) {
  .step-swiper .step-swiper-button {
    width: 2.6rem;
    height: 2.6rem;
  }
}

.index-activity {
  position: relative;
}
.index-activity .activity-card {
  height: auto;
}
.index-activity .activity-card .list-text {
  border-top: none;
}
.index-activity .activity-card .list-title {
  -webkit-line-clamp: 1;
  line-clamp: 1;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index-activity .activity-card .list-description {
  -webkit-line-clamp: 2;
  line-clamp: 2;
  -webkit-box-orient: vertical;
  box-orient: vertical;
  display: -webkit-box;
  overflow: hidden;
  text-overflow: ellipsis;
}
.index-activity .index-head {
  padding-bottom: 0;
}
@media (max-width: 1024px) {
  .index-activity .index-head {
    padding-bottom: 0;
  }
}
.index-activity .step-swiper {
  color: var(--white);
}
.index-activity .index-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 7%;
  height: 100%;
  left: auto;
  right: 0;
  background: linear-gradient(90deg, rgba(32, 32, 32, 0) 0%, rgba(32, 32, 32, 0.95) 100%);
  z-index: 4;
  pointer-events: none;
}
.index-activity .category-label:not(.is-active):hover {
  color: var(--pattern-80) !important;
}
.index-activity .category-label.is-active {
  color: var(--white) !important;
}

/* JS(initInsightSwiper)의 MOBILE_PER_VIEW 와 같은 값 */
/* 슬라이드 간격 — JS(initInsightSwiper)의 GAP_PC / GAP_MOBILE 과 같은 값 */
.index-insight {
  position: relative;
}
.index-insight .swiper:not(.swiper-initialized) .swiper-wrapper {
  display: flex;
}
.index-insight .swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: calc((100% - 3rem) / 3);
  margin-right: 1.5rem;
}
.index-insight .swiper:not(.swiper-initialized) .swiper-slide:last-child {
  margin-right: 0;
}
.index-insight .swiper:not(.swiper-initialized) .swiper-slide {
  /* 모바일은 1.25장 (Swiper 초기화 전 기준값) */
}
@media (max-width: 780px) {
  .index-insight .swiper:not(.swiper-initialized) .swiper-slide {
    width: calc((100% - 1.6rem) / 1.25);
    margin-right: 6.4rem;
  }
}
.index-insight .swiper:not(.swiper-initialized) .swiper-slide {
  /* 1025px 이상은 초기화 후와 같은 "높이 기준" 폭을 쓴다(아래 --insight-card-w). */
}
@media (min-width: 1025px) {
  .index-insight .swiper:not(.swiper-initialized) .swiper-slide {
    width: var(--insight-card-w);
  }
}
.index-insight {
  /*
   * 1025px 이상: 장수(slidesPerView)를 세지 않고 카드 크기를 화면 "높이" 가 정한다.
   * JS(initInsightSwiper)는 이 구간에서 slidesPerView: 'auto' 라 폭을 여기서 받아 간다.
   *
   * 섹션이 한 화면에 들어가도록 100dvh 에서 위아래 여백과 헤더(타이틀 + 설명) 몫을 뺀
   * 나머지를 카드가 전부 가져간다. More 링크는 이 구간에서 absolute 라 높이를 차지하지 않는다.
   */
}
@media (min-width: 1025px) {
  .index-insight {
    /* 섹션 상하 여백 — front-page.php 의 lg:pt-[3.4rem] / lg:pb-[5rem] 과 같은 값 */
    --insight-card-pad: 8.4rem;
    /* .index-head = 타이틀 8rem(line-height 1) + padding-bottom 6rem */
    --insight-card-head: 14rem;
    /* 이미지 아래 텍스트 블록(제목 + 날짜) 몫. step-swiper 와 같이 고정 상수로 잡는다. */
    --insight-card-text: 8.4rem;
    /* 화면이 아주 낮을 때(낮은 창·가로 모드 등) 카드가 뭉개지지 않도록 두는 하한 */
    --insight-card-min: 32rem;
    /* px-cntr 안쪽 가로 영역. 아래 상한 계산의 기준. */
    --insight-card-view: calc(100vw - var(--cntr) * 2);
    /* dvh 미지원 브라우저용 폴백이고 아래 @supports 가 덮는다. */
    --insight-card-h: max(
      var(--insight-card-min),
      calc(100vh - var(--insight-card-pad) - var(--insight-card-head))
    );
    /*
     * 카드 폭. 이미지가 3:4 라 "남는 높이 - 텍스트 몫" 이 곧 이미지 높이이고, 거기에 3/4 를
     * 곱하면 폭이 된다.
     * 상한(min 두 번째 항): 세로로 긴 창에서 카드 한 장이 화면을 다 먹지 않도록 보이는 영역에
     *   2.25장은 들어가게 묶는다. 이때는 폭만 줄어들고 높이는 그대로라 이미지가 조금 더
     *   세로로 잘릴 뿐이다(object-fit: cover).
     */
    --insight-card-w: min(
      calc((var(--insight-card-h) - var(--insight-card-text)) * 3 / 4),
      calc((var(--insight-card-view) - 1.5rem * 1.25) / 2.25)
    );
  }
  @supports (height: 100dvh) {
    .index-insight {
      --insight-card-h: max(
        var(--insight-card-min),
        calc(100dvh - var(--insight-card-pad) - var(--insight-card-head))
      );
    }
  }
  .index-insight .swiper {
    height: var(--insight-card-h);
  }
  .index-insight .swiper-slide {
    width: var(--insight-card-w);
    height: 100%;
  }
  .index-insight .insight-card,
  .index-insight .insight-card > a {
    display: flex;
    flex-direction: column;
    height: 100%;
  }
  .index-insight {
    /*
     * 텍스트 몫이 상수(--insight-card-text)와 어긋나도(제목 두 줄 등) 카드 전체 높이는
     * 그대로 유지되도록 남는 높이를 이미지가 받는다. 채우고 남는 부분은 잘라 낸다.
     */
  }
  .index-insight .image-wrap {
    flex: 1 1 auto;
    min-height: 0;
    overflow: hidden;
  }
  .index-insight .image-wrap img {
    width: 100%;
    height: 100%;
    aspect-ratio: auto; /* 카드 마크업의 Tailwind aspect-[3/4] 를 끈다 */
    -o-object-fit: cover;
       object-fit: cover;
  }
}
.index-insight .index-wrap::after {
  content: "";
  position: absolute;
  top: 0;
  width: 7%;
  height: 100%;
  left: auto;
  right: 0;
  background: linear-gradient(90deg, rgba(255, 255, 255, 0) 0%, rgba(255, 255, 255, 0.95) 100%);
  pointer-events: none;
  z-index: 4;
}

.index-film {
  position: relative;
}
.index-film .index-film-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: var(--black);
}
.index-film .index-film-embed iframe {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  border: 0;
}

.event-list-description {
  font-size: 1.8rem;
  font-size: 2rem;
  padding-top: 0.4rem;
}
@media (max-width: 1024px) {
  .event-list-description {
    font-size: 1.4rem;
  }
}

body.is-header-on-light .index-landing__navigation-btn {
  background: #fff !important;
  border: 1px solid #000;
  color: #000;
}
body.is-header-on-light .index-landing__navigation-btn:after {
  filter: invert(1);
}
body.is-header-on-light .index-landing__navigation-btn:hover {
  background: #fff !important;
}
body.lang-ko .landing-lang--en {
  display: none !important;
}
body.lang-ko .section-finance {
  --finance-title-height: calc(var(--finance-title-height-sm-ko) * 2);
}
body.lang-ko .section-finance__pixel-item-description {
  max-width: 40rem;
}
body.lang-en .landing-lang--ko {
  display: none !important;
}
body.lang-en .section-finance {
  --finance-title-height: calc(var(--finance-title-height-sm-en) * 3);
}
body.lang-en .section-finance__pixel-item-description {
  max-width: none;
}
body .section,
body .section-value__overlay,
body .section-outro__content {
  opacity: 0;
}
body.is-particles-loaded .section,
body.is-particles-loaded .section-value__overlay,
body.is-particles-loaded .section-outro__content {
  opacity: 1;
}
body.is-snap-debug-noanim .section,
body.is-snap-debug-noanim .section-value__overlay,
body.is-snap-debug-noanim .section-outro__content,
body.is-snap-debug-noanim #bg-canvas,
body.is-snap-debug-noanim header {
  transition: none !important;
  animation: none !important;
  opacity: 1 !important;
}
body.lang-en .text-w-700 {
  font-weight: 600;
}
body.lang-en .text-lh-md {
  line-height: 1.35;
}
body.lang-en .text-lh-sm {
  line-height: 1.15;
}
body[data-current-section-index="0"] .index-landing__navigation-btn-top {
  opacity: 0;
  pointer-events: auto;
}
body[data-current-section-index="4"] .index-landing__navigation-btn-bottom {
  opacity: 0;
  pointer-events: auto;
}
@media (max-width: 780px) {
  body[data-current-section-index="4"] .index-landing__navigation {
    bottom: -2rem;
  }
}

body:has(.index-landing) > footer {
  scroll-snap-align: start;
  scroll-snap-stop: always;
}

/*
 * 브랜드 랜딩(`.index-landing`, page-brand.php)의 스냅 스크롤은 `.index-landing` 자신이 아니라
 * 문서(`document.scrollingElement`, 표준 모드에서는 `html`)가 맡는다 — 홈이 이미 문서 스크롤을
 * 쓰는 것과 같은 모델이다(assets/js/pages/landing-shared.js 의 `getLandingScrollRoot()`).
 *
 * 그래서 `.index-landing`은 높이를 뷰포트로 가두지 않는 평범한 흐름 요소이고, 마지막 섹션
 * 다음에는 body 직계 `<footer>`가 이어서 스크롤되어 나온다(전에는 body 를 뷰포트 높이로 잠가
 * 푸터를 아예 숨겼었다).
 *
 * `overflow-x: hidden` 을 여기(또는 html/body)에 두지 않는 이유: `.index-landing` 은
 * `.section-timeline-track` > `.section--timeline-sticky`(finance 내러티브 sticky 트랙)의
 * 조상이다. `overflow` 가 `visible` 이 아닌 축이 하나라도 있으면 다른 축도 `auto` 로 계산되어
 * 그 요소가 스크롤 컨테이너가 되고, `position: sticky` 자손은 문서 스크롤이 아니라 그 컨테이너
 * 기준으로 계산되기 시작한다 — sticky pin 이 깨진다(_particle.scss 의 `.particle-hero` 주석에
 * 같은 경고가 있다). 가로 스크롤 방지가 필요하면 sticky 조상 바깥, 더 안쪽 지역 요소에 걸 것.
 */
html:has(.index-landing) {
  scroll-snap-type: y mandatory;
  scroll-behavior: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-y: contain;
  touch-action: pan-y;
}
html {
  /*
   * finance 는 sticky 타임라인 트랙(`.section-timeline-track`)이라 트랙 안에서 자유 스크롤이 필요하다.
   * mandatory 스냅이 트랙 내부를 잡아채지 않게, 타임라인 구간에서만 완화한다(assets/js/brand.js 의 setTimelineActive).
   */
}
html.index-landing--timeline-active {
  scroll-snap-type: y proximity;
}
html.index-landing--finance-mid {
  scroll-snap-type: none !important;
}
html.is-android {
  scroll-snap-type: none;
}

.index-landing {
  /*
   * 배경색은 전역 `body` 규칙(style.scss)에 맡기고 여기서는 두지 않는다. 이 요소는
   * `position: relative` 라, 마크업상 뒤에 있는 것만으로 파티클 캔버스(문서 맨 앞,
   * `z-index: 0`)를 덮어 버린다 — 불투명 배경을 두면 씬이 통째로 가려진다.
   * 자세한 내용은 _particle.scss 의 `#bg-canvas` 주석 참고.
   */
}
.index-landing .index-landing__navigation-btn {
  cursor: pointer;
}
.index-landing .index-landing__navigation-btn:disabled {
  cursor: default;
}
.index-landing .section {
  opacity: 0;
  transition: opacity 0.4s ease;
}
.index-landing__navigation {
  position: fixed;
  right: var(--cntr);
  bottom: var(--cntr);
  z-index: 100;
  pointer-events: none;
  display: flex;
  flex-direction: column;
  gap: 1rem;
  transition: bottom 0.25s ease;
  z-index: 101;
}
.index-landing__navigation-btn {
  display: block;
  width: 3.7rem;
  height: 3.7rem;
  pointer-events: auto;
  background: #000;
  border: 1px solid #fff;
  padding: 0;
  cursor: pointer;
  transition: background 0.25s ease, opacity 0.25s ease;
  opacity: 1;
}
.index-landing__navigation-btn:after {
  content: "";
  display: block;
  width: 100%;
  height: 100%;
  background-image: url("assets/images/arrow_top_down.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  transition: filter 0.25s ease;
}
.index-landing__navigation-btn:hover {
  background: #000 !important;
}
.index-landing__navigation-btn-bottom {
  transform: rotate(180deg);
}
@media (max-width: 780px) {
  .index-landing__navigation {
    gap: 0.8rem;
    bottom: 2rem;
  }
  .index-landing__navigation-btn {
    width: 3.2rem;
    height: 3.2rem;
  }
}
.index-landing .section {
  height: 100svh;
  overflow-anchor: none;
  scroll-snap-align: start;
  scroll-snap-stop: always;
}
.index-landing .section-timeline-track {
  --timeline-range-vh: 2;
  position: relative;
  min-height: calc(100lvh * (1 + var(--timeline-range-vh)));
}
.index-landing .section--timeline-sticky {
  position: sticky;
  top: 0;
  height: 100lvh;
}
.index-landing .section-outro {
  pointer-events: none;
}
.index-landing .section-outro__title-marquee {
  overflow: hidden;
  width: 100%;
}
.index-landing .section-outro__title-track {
  display: inline-flex;
  align-items: baseline;
  width: -moz-max-content;
  width: max-content;
  gap: var(--cntr, 3rem);
  will-change: transform;
}
.index-landing .section-outro__title-marquee .section-outro__title {
  margin: 0;
  flex-shrink: 0;
}
.index-landing .section-outro__content {
  opacity: 0;
  transition: opacity 0.35s ease;
}
.index-landing .section-outro__content.is-visible {
  opacity: 1;
}
.index-landing .section-value .section-value__content {
  display: none;
}
.index-landing .section-value__overlay {
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.35s ease;
}
.index-landing .section-value__content-item {
  text-align: center;
}
.index-landing .section-value__content-title {
  font-size: 6rem;
  font-weight: 450;
  line-height: 1;
}
.index-landing .section-value__content-description {
  width: 80%;
  padding-top: 3.6rem;
  margin-inline: auto;
  font-size: 3rem;
  font-weight: 700;
  line-height: 1.5;
  white-space: normal;
  word-break: keep-all;
}
@media (max-width: 1024px) {
  .index-landing .section-value__content-title {
    font-size: min(3rem, 4.2vh);
  }
  .index-landing .section-value__content-description {
    width: 60%;
    padding-top: 0.975rem;
    font-size: min(1.6rem, 2vh);
  }
}
.index-landing .section-finance {
  --finance-title-height: 0px;
  --finance-pixels-title-extra-padding: 2rem;
}
.index-landing .section-finance__title {
  position: absolute;
  pointer-events: none;
  font-size: 9rem;
  line-height: 1.3;
  font-weight: 700;
  will-change: transform;
  transform-origin: left top;
}
.index-landing .section-finance__pixels-heading {
  font-size: min(18rem, 16vh);
  padding-inline: var(--cntr);
  font-weight: 450;
  line-height: 0.8;
  margin-left: -0.5rem;
}
.index-landing .section-finance__pixel-item-title {
  font-size: min(9.8rem, 7.8vh);
  font-weight: 450;
  line-height: 1;
}
.index-landing .section-finance__pixel-item-label {
  margin-top: 0.1em;
}
.index-landing .section-finance__pixel-item-bracket {
  font-size: min(8.1rem, 6.1vh);
  font-weight: 900;
}
.index-landing .section-finance__pixel-item-description {
  font-size: min(2.8rem, 2.2vh);
  text-align: left;
  font-weight: 700;
  line-height: 1.3;
  margin-top: -0.1rem;
}
.index-landing .section-finance .section-finance__pixels {
  z-index: 1;
}
.index-landing .section-finance video {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  pointer-events: none;
}
.index-landing .section-finance #pixelCanvas {
  display: block;
  width: 100%;
  height: 100%;
  image-rendering: pixelated;
  pointer-events: auto;
  touch-action: none;
}
.index-landing .section-finance .section-finance__items-swiper {
  padding-top: 2.2em;
  padding-inline: var(--cntr);
}
@media (max-width: 1024px) {
  .index-landing .section-finance .section-finance__items-swiper {
    overflow: hidden;
  }
  .index-landing .section-finance .section-finance__items-swiper .section-finance__pixel-item {
    position: relative;
    opacity: 0.12 !important;
  }
  .index-landing .section-finance .section-finance__items-swiper .section-finance__pixel-item button {
    font-family: inherit;
  }
  .index-landing .section-finance .section-finance__items-swiper .section-finance__pixel-item-description {
    position: absolute;
    top: 4.4rem;
    left: 0;
    opacity: 0;
    transition: opacity 0.4s ease;
    width: calc(70vw - var(--cntr) * 2);
    max-width: initial;
  }
  .index-landing .section-finance .section-finance__items-swiper .section-finance__pixel-item.swiper-slide-active {
    opacity: 1 !important;
  }
  .index-landing .section-finance .section-finance__items-swiper .section-finance__pixel-item.swiper-slide-active .section-finance__pixel-item-description {
    opacity: 1;
  }
  .index-landing .section-finance .section-finance__items-swiper .swiper-wrapper {
    align-items: stretch;
  }
  .index-landing .section-finance .section-finance__items-swiper .swiper-slide {
    width: auto;
    flex-shrink: 0;
  }
}
.index-landing .section-finance .section-finance__items-swiper .swiper-navigation {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
}
.index-landing .section-finance .section-finance__items-swiper .swiper-button-prev,
.index-landing .section-finance .section-finance__items-swiper .swiper-button-next {
  position: static;
  width: 3.5rem;
  height: 3.5rem;
  border-radius: 5rem;
  background-color: var(--pattern-40, rgba(147, 147, 147, 0.4));
  background-image: url("assets/images/arrow_swiper.svg");
  background-size: 2.1rem auto;
  background-repeat: no-repeat;
  background-position: center center;
}
.index-landing .section-finance .section-finance__items-swiper .swiper-button-prev::after,
.index-landing .section-finance .section-finance__items-swiper .swiper-button-next::after {
  content: none;
}
.index-landing .section-finance .section-finance__items-swiper .swiper-button-next {
  transform: rotate(180deg);
}
@media (max-width: 1024px) {
  .index-landing .section-finance__title {
    font-size: 2.7rem;
    font-weight: 800;
  }
  .index-landing .section-finance__pixels-heading {
    font-size: 5rem;
    margin-left: -0.1rem;
  }
  .index-landing .section-finance__pixel-item-title {
    font-size: 3.2rem;
  }
  .index-landing .section-finance__pixel-item-bracket {
    font-size: 2.8rem;
  }
  .index-landing .section-finance__pixel-item-description {
    font-size: 1.6rem;
  }
  .index-landing .section-finance__pixel-item-label {
    margin-top: 0.1em;
  }
  .index-landing .section-finance__pixels-title {
    padding-bottom: 2em;
    padding-top: calc(var(--finance-title-height) + var(--finance-pixels-title-extra-padding) + var(--finance-title-top, var(--header-height)));
  }
  .index-landing .section-finance .section-finance__items-swiper {
    padding-top: 0.4em;
    flex: 1;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
  }
}
@media (min-width: 1025px) {
  .index-landing .section-finance__pixels-title {
    padding-bottom: 4em;
  }
}
.index-landing .section-service__swiper {
  overflow: hidden;
}
.index-landing .section-service__swiper .swiper-pagination {
  position: relative;
  margin-top: 4rem;
}
.index-landing .section-service__swiper .swiper-pagination-bullet {
  background: #000;
  opacity: 0.25;
}
.index-landing .section-service__swiper .swiper-pagination-bullet-active {
  opacity: 1;
}
.index-landing .section-service__item-content {
  position: relative;
  margin-top: -1px;
}
.index-landing .section-service__item-content::before {
  position: absolute;
  bottom: 2.8rem;
  right: 2rem;
  content: "";
  display: block;
  width: 3.5rem;
  height: 7rem;
  background-image: url("assets/images/arrow_right.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: right center;
}
@media (max-width: 1024px) {
  .index-landing .section-service__item-content::before {
    bottom: 1.4rem;
    right: 1rem;
    width: 2.4rem;
    height: 4.9rem;
  }
}
@media (max-width: 1024px) {
  .index-landing__quick-nav {
    top: calc(var(--header-height) + 1rem);
    gap: 0.6rem;
  }
  .index-landing__quick-nav-btn {
    min-width: 7rem;
    padding: 0.65rem 1.1rem;
    font-size: 1.2rem;
  }
}

header + [data-page=brand] .header-text {
  padding-top: var(--header-height);
}
@media (max-width: 1024px) {
  header + [data-page=brand] .header-text {
    padding-top: calc(var(--header-height) + 2rem);
  }
}
header.is-hidden + [data-page=brand] .header-text {
  transition: padding-top 0.25s ease;
  padding-top: 6rem;
}
@media (max-width: 1024px) {
  header.is-hidden + [data-page=brand] .header-text {
    padding-top: 2.4rem;
  }
}

/*
 * 파티클 캔버스 마운트 — 랜딩(홈·브랜드)과 콘텐츠 페이지가 함께 쓴다.
 *
 * 요소는 문서 셸이 하나만 낸다(`child_render_particle_stage()`, `wp_body_open`). 등급은
 * `child_particle_tier()` 가 정해 셸 래퍼의 `data-particle-tier` 로 내려오고, 배치는 페이지의
 * `.particle-slot` 이 선언한다. `assets/js/scene/stage.js` 의 `syncParticleStage()` 가
 * 그 둘을 아래 `[data-preset]` 과 커스텀 속성으로 옮긴다.
 *
 * 전에는 랜딩(`#bg-canvas`, _index.scss)과 콘텐츠(`#particle-bg`)가 각자 마운트를 갖고 배치도
 * 따로 정의했다. 콘텐츠 쪽은 `.particle-hero` 안에서 `position: absolute` 였는데, 그 래퍼가
 * `<body>` 직계 sticky 라 스크롤 내내 붙어 있어 결과적으로 `fixed` 와 같았다 — 그래서 하나로
 * 합칠 수 있었다.
 *
 * ── 랜딩 셸에 불투명 배경을 두면 안 되는 이유 ────────────────────────────────────────
 * `.index-intro`·`.index-landing` 은 `position: relative` 다. 위치 지정 요소는 배경까지
 * "위치 지정 요소" 층에서 그려지므로, 같은 층(`z-index: 0`/`auto`)인 캔버스와는 마크업 순서로
 * 앞뒤가 갈린다. 캔버스가 문서 맨 앞이라 셸이 뒤 → 셸에 불투명 배경이 있으면 씬이 통째로 가려진다.
 * 그래서 두 셸은 배경을 갖지 않고 전역 `body` 배경(style.scss 의 `body { background-color }`)에
 * 맡긴다. 값이 같아 화면은 그대로이고, 캔버스만 그 위로 올라온다.
 *
 * 캔버스의 `z-index` 를 올리는 것으로는 풀리지 않는다. 인트로 뒤의 섹션들(`.index-activity`
 * 등)도 `position: relative; z-index: auto` + 불투명 배경이라, 캔버스를 그 위로 올리면
 * 스크롤한 뒤에 본문을 뚫고 나온다. 캔버스는 "모든 위치 지정 콘텐츠 아래, 문서 배경 위" 여야 한다.
 */
#bg-canvas {
  /*
   * 캔버스 높이 기본값. `var()` 폴백으로는 dvh 미지원 브라우저를 처리할 수 없다 — 폴백 값이
   * 무효해지면 선언 전체가 무효가 되어 `height` 가 `auto` 로 떨어진다. 그래서 `.index-intro`
   * 와 같은 `@supports` 방식으로 변수 자체를 갈아 끼운다.
   */
  --particle-bg-height-default: 100svh;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  height: var(--particle-bg-height, var(--particle-bg-height-default));
  z-index: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity var(--particle-stage-fade, 0.4s) ease;
}
@supports (height: 100svh) {
  #bg-canvas {
    --particle-bg-height-default: 100svh;
  }
}
#bg-canvas canvas {
  display: block;
}
#bg-canvas {
  /*
   * JS 가 씬을 띄운 뒤 붙인다 — WebGL 이 없거나 실패하면 끝까지 투명하게 남는다.
   * 랜딩은 대신 `prepareSceneReveal()` 이 인라인 opacity 로 드러낸다(인라인이 우선).
   */
}
#bg-canvas.is-ready {
  opacity: 1;
}
#bg-canvas {
  /*
   * 콘텐츠 페이지 프리셋 — 분산 구름을 제목 뒤에 깔고 아래쪽을 흘린다.
   *
   * 페이드는 화면 하단에 계속 머무는데, 본문이 밀고 들어오는 자리와 겹쳐 경계가 드러나지 않는다.
   * 화면을 꽉 채운 느낌이 필요하면 시작·종료를 함께 100% 로 밀어 없앤다
   * (particle-hero.php 의 `fade_start`·`fade_end`).
   *
   * 마스크는 합성 레이어를 강제하므로 랜딩(마스크 없음)에는 걸지 않는다.
   */
}
#bg-canvas[data-preset=background] {
  --particle-stage-fade: 0.6s;
  -webkit-mask-image: linear-gradient(to bottom, #000 var(--particle-bg-fade-start, 35%), transparent var(--particle-bg-fade-end, 95%));
  mask-image: linear-gradient(to bottom, #000 var(--particle-bg-fade-start, 35%), transparent var(--particle-bg-fade-end, 95%));
}
#bg-canvas {
  /*
   * 파티클을 쓰지 않는 화면 (`child_particle_tier()` 가 `none` 을 돌려준 경우).
   *
   * 마운트를 없애지 않는다 — 없애면 그 화면을 지나는 동안 WebGL 컨텍스트가 버려져 돌아왔을 때
   * 파티클이 끊긴다. 대신 페이드로 감춘다. `display: none` 은 전환을 태울 수 없어 씬이 툭 끊겨
   * 사라졌다.
   *
   * 그리는 비용은 렌더 루프를 세워서 없앤다(`setSceneVisible(false)`, pages/registry.js) —
   * 감추기만 해서는 합성에서만 빠질 뿐 GPU 는 매 프레임 같은 일을 한다.
   *
   * `visibility` 는 페이드가 끝난 뒤에 넘어가도록 지연시킨다. 그래야 사라지는 동안에도 화면에
   * 남아 있고, 끝난 뒤에는 히트 테스트에서도 빠진다.
   *
   * `html.is-scene-leaving` 은 "파티클을 쓰지 않는 화면으로 떠나는 중" 표시다. 등급은 교체될
   * 본문에 실려 오므로, 본문이 바뀌기를 기다리면 씬이 새 화면과 함께 늦게 사라진다. 라우터가
   * 응답을 받는 시점에 미리 붙여 떠남 페이드와 같은 흐름을 타게 한다(assets/js/scene/stage.js).
   */
}
#bg-canvas[data-preset=none], html.is-scene-leaving #bg-canvas {
  opacity: 0;
  visibility: hidden;
  transition: opacity var(--particle-stage-fade, 0.4s) ease, visibility 0s linear var(--particle-stage-fade, 0.4s);
}

/*
 * 캔버스 배치 선언용 슬롯 — 마크업에만 존재하고 그려지지 않는다.
 * `display: none` 이어도 `querySelector`·`dataset` 은 그대로 읽힌다.
 * (등급은 슬롯이 아니라 셸 래퍼의 `data-particle-tier` 가 갖는다 — stage.js 주석 참고.)
 */
.particle-slot {
  display: none;
}

/*
 * 제목 + 파티클 배경을 묶는 히어로 래퍼 (template-parts/particle-hero.php).
 *
 * `sticky` 로 화면에 붙여 두고 본문(`relative z-10`)이 그 위를 지나가게 한다. 부모가 `<body>` 라
 * 문서 전체가 스크롤되는 동안 계속 붙어 있다. `fixed` 와 달리 흐름에서 자리를 차지하므로 본문
 * 시작 위치를 밀어 줄 스페이서가 따로 필요 없다.
 *
 * `z-index: 0` 은 캔버스와 같은 층이지만 마크업상 뒤라 캔버스 위에 그려진다 — 안에 있는 제목이
 * 배경에 가리지 않는 것이 여기에 달려 있다. 캔버스가 문서 맨 앞(`wp_body_open`)에 나오는 것도
 * 같은 이유다. 이 `z-index` 를 빼면 제목이 캔버스 뒤로 숨는다.
 *
 * 본문이 배경 위로 올라오려면 형제 요소에 `relative z-10` 을 함께 준다(page-insights/events).
 * 위치 지정이 없는 본문 블록(single-insight 의 `.bg-light` 등)은 캔버스보다 먼저 그려져
 * 배경 아래에 남는다 — 하단 페이드 구간이라 실제로는 가려지지 않는다.
 *
 * 주의: 조상에 `overflow: hidden/auto` 가 생기면 sticky 가 즉시 죽는다. 현재 뷰포트부터 이 요소
 * 사이 어떤 조상에도 `overflow-x`/`overflow-y` 가 없다 — `.index-landing` 도 마찬가지다(랜딩
 * 자신이 finance 내러티브의 sticky 트랙을 담고 있어, 여기 걸면 브랜드 랜딩의 sticky pin 이 깨진다.
 * styles/_brand.scss 의 `.index-landing` 주석 참고). 새로 추가할 때도 이 사이는 피할 것.
 *
 * Tailwind 는 Play CDN 런타임 JIT 이라 유틸 클래스가 늦게 붙을 수 있다. 그 사이 배치가 튀지
 * 않도록 기준만은 컴파일된 CSS 로 박아 둔다.
 *
 * `--particle-hero-height` 는 흐름에서 차지하는 높이 = 본문이 시작하는 지점이다(기본은 제목
 * 높이). 캔버스 높이는 이와 독립이며 슬롯의 `data-bg-height` 로 넘어간다. 캔버스가 이 높이보다
 * 크면 넘친 만큼이 본문 뒤에 깔려서, "배경은 화면을 꽉 채우되 본문은 첫 화면 안에서 시작해 그
 * 위로 겹쳐 올라오는" 배치가 된다. `min-height` 라서 제목이 길면 그만큼 늘어난다.
 */
.particle-hero {
  position: sticky;
  top: 0;
  z-index: 0;
  min-height: var(--particle-hero-height, auto);
}

@media (prefers-reduced-motion: reduce) {
  #bg-canvas {
    transition: none;
  }
}
.page-single {
  --dynamic-font: 2.1rem;
  --dynamic-font-min: 1.8rem;
  --dynamic-font-max: 2.6rem;
  --dynamic-scale: 1;
}
@media (max-width: 1024px) {
  .page-single {
    --dynamic-font: 1.5rem;
    --dynamic-font-min: 1.2rem;
    --dynamic-font-max: 2rem;
  }
}
.page-single .wp-block-group__inner-container {
  max-width: initial;
  padding: 0;
}
.page-single .korea-sns {
  display: none;
}
.page-single .post-toc .post-toc-title {
  padding-bottom: 0.9rem;
  margin-bottom: 0.9rem;
  font-size: 1.7rem;
  font-weight: 700;
  line-height: 1.7;
  border-bottom: 1px solid var(--black);
}
.page-single .post-toc .post-toc-list {
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.page-single .post-toc .post-toc-item.post-toc-item-h3 a {
  display: flex;
  align-items: flex-start;
  gap: 0.6rem;
  font-size: 1.8rem;
  font-weight: 700;
  line-height: 1.5;
  color: #A4A4A4;
  text-decoration: none;
  border-bottom: 1px solid transparent;
  transition: border-color 0.2s ease, color 0.2s ease;
  word-break: keep-all;
}
.page-single .post-toc .post-toc-item.post-toc-item-h3 a:before {
  --size: 2.2rem;
  flex-shrink: 0;
  content: "·";
  display: inline-block;
  width: var(--size);
  height: var(--size);
  text-align: center;
  line-height: var(--size);
  vertical-align: middle;
  transition: background-position 0.3s, color 0.2s ease;
  background-image: url(data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTUiIGhlaWdodD0iOCIgdmlld0JveD0iMCAwIDE1IDgiIGZpbGw9Im5vbmUiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyI+CjxwYXRoIGQ9Ik0xMC41IDFMMTMuNSA0TDEwLjUgNyIgc3Ryb2tlPSIjMkIyQjJCIi8+CjxwYXRoIGQ9Ik0xMy41IDRMMC41IDQiIHN0cm9rZT0iIzJCMkIyQiIvPgo8L3N2Zz4K);
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: calc(var(--size) * -1) center;
}
.page-single .post-toc .post-toc-item.post-toc-item-h3.active a, .page-single .post-toc .post-toc-item.post-toc-item-h3:hover a {
  color: var(--black);
}
.page-single .post-toc .post-toc-item.post-toc-item-h3.active a:before, .page-single .post-toc .post-toc-item.post-toc-item-h3:hover a:before {
  content: "";
  background-position: center center;
}
.page-single .post-toc .post-toc-item.post-toc-item-h2 a {
  display: inline-block;
  font-size: 2.2rem;
  font-weight: 950;
  line-height: 1;
  text-transform: uppercase;
  padding: 0.9rem 1.7rem;
  border: 1px solid var(--black);
  border-radius: 5rem;
  background-color: color-mix(in srgb, var(--gray-100) 60%, transparent);
  transition: background-color 0.2s ease;
}
.page-single .post-toc .post-toc-item.post-toc-item-h2.active a, .page-single .post-toc .post-toc-item.post-toc-item-h2:hover a {
  background-color: var(--white);
}
.page-single .post-content-wrap {
  position: relative;
}
.page-single .post-content-wrap * {
  font-size: var(--dynamic-font);
  font-weight: 400;
  line-height: 1.7;
}
.page-single .post-content-wrap .post-content-toolbar {
  position: absolute;
  top: 0;
  right: 0;
  z-index: 10;
  display: flex;
  flex-direction: column;
  gap: 1.2rem;
}
.page-single .post-content-wrap .post-content-toolbar button,
.page-single .post-content-wrap .post-content-toolbar .korea-sns-button {
  width: 2.8rem;
  height: 2.8rem;
  border-radius: 5rem;
  background-color: #ECECEC !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: opacity 0.2s ease;
}
.page-single .post-content-wrap .post-content-toolbar button:hover,
.page-single .post-content-wrap .post-content-toolbar .korea-sns-button:hover {
  opacity: 0.7;
}
.page-single .post-content-wrap .post-content-toolbar button.disabled,
.page-single .post-content-wrap .post-content-toolbar .korea-sns-button.disabled {
  opacity: 0.3;
  cursor: default;
  pointer-events: none;
}
.page-single .post-content-wrap .post-content-toolbar .button-minus {
  background-image: url("assets/images/zoom_minus.svg") !important;
  background-size: 80% auto !important;
}
.page-single .post-content-wrap .post-content-toolbar .button-plus {
  background-image: url("assets/images/zoom_plus.svg") !important;
  background-size: 80% auto !important;
}
.page-single .post-content-wrap .post-content-toolbar .button-korea-sns-pro {
  background-image: url("assets/images/share.svg") !important;
}
.page-single .post-content-wrap .post-content-toolbar .korea-sns-pro-button-wrap {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
}
.page-single .post-content-wrap .post-content-toolbar .korea-sns-shortcode {
  display: flex;
  flex-direction: column;
  gap: 0.8rem;
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
}
.page-single .post-content-wrap .post-content-toolbar .korea-sns-shortcode.active {
  pointer-events: auto;
  opacity: 1;
}
.page-single .post-content-wrap .post-content-toolbar .korea-sns-shortcode .korea-sns-button {
  margin-right: 0;
}
.page-single .post-content-wrap .post-content-inner {
  padding-right: 18rem;
  padding-bottom: 11rem;
}
.page-single .post-content-wrap h2 {
  font-size: calc(5rem * var(--dynamic-scale, 1));
  font-weight: 500;
  scroll-margin-top: 10rem;
}
.page-single .post-content-wrap h3, .page-single .post-content-wrap h4, .page-single .post-content-wrap h5, .page-single .post-content-wrap h6, .page-single .post-content-wrap strong {
  font-weight: 700;
  scroll-margin-top: 10rem;
}
.page-single .post-content-wrap > p,
.page-single .post-content-wrap .flex-1 > p,
.page-single .post-content-wrap .post-content-inner p {
  margin-bottom: calc(3.2rem * var(--dynamic-scale, 1));
}
.page-single .post-content-wrap img {
  width: 100%;
}
.page-single .post-content-wrap > img,
.page-single .post-content-wrap .flex-1 > img {
  margin-bottom: calc(2rem * var(--dynamic-scale, 1));
}
.page-single .post-content-wrap .post-toc * {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
}
.page-single .post-content-wrap h2 {
  line-height: 1;
  padding-bottom: calc(5rem * var(--dynamic-scale, 1));
}
.page-single .post-content-wrap .wp-block-image {
  padding-bottom: 5rem;
}
.page-single .post-content-wrap .gallery-swiper-wrap,
.page-single .post-content-wrap .gallery-grid-wrap,
.page-single .post-content-wrap .history-wrap {
  --insight-gallery-offset: calc(var(--insight-toc-w) + var(--insight-toc-gap) + var(--cntr-lg));
  position: relative;
  padding-top: calc(10rem * var(--dynamic-scale, 1));
  padding-bottom: calc(10rem * var(--dynamic-scale, 1));
}
.page-single .post-content-wrap .gallery-swiper-wrap *,
.page-single .post-content-wrap .gallery-grid-wrap * {
  color: var(--white);
}
.page-single .post-content-wrap .gallery-swiper-wrap::before,
.page-single .post-content-wrap .gallery-grid-wrap::before {
  position: absolute;
  top: 0;
  left: 0;
  left: calc(var(--insight-gallery-offset) * -1);
  right: calc(var(--cntr-lg) * -1);
  content: "";
  display: block;
  height: 100%;
  background-color: var(--black);
}
.page-single .post-content-wrap .gallery-swiper-wrap .swiper,
.page-single .post-content-wrap .gallery-swiper-wrap .wp-block-gallery:has(> .wp-block-image) {
  margin-left: calc(var(--insight-gallery-offset) * -1);
  margin-right: calc(var(--cntr-lg) * -1);
  padding-left: var(--insight-gallery-offset);
  padding-right: var(--cntr-lg);
}
.page-single .post-content-wrap .gallery-swiper-wrap .wp-block-gallery:has(> .wp-block-image) {
  display: flex;
  flex-wrap: nowrap;
  align-items: flex-start;
  gap: 20px;
  overflow: hidden;
}
.page-single .post-content-wrap .gallery-swiper-wrap .wp-block-gallery:has(> .wp-block-image) > .wp-block-image {
  flex: 0 0 auto;
  width: calc((100% - 16px) / 1.8) !important;
}
.page-single .post-content-wrap .gallery-swiper-wrap .wp-block-gallery:has(> .wp-block-image) > .wp-block-image img {
  width: 100%;
  height: auto !important;
}
.page-single .post-content-wrap .gallery-swiper-wrap .wp-block-gallery:not(:has(> .wp-block-image)) {
  display: none;
}
.page-single .post-content-wrap .gallery-grid-wrap .gallery-grid {
  --columns: 4;
  --gap: calc(3rem * var(--dynamic-scale, 1));
  gap: var(--gap);
  margin-left: calc(var(--insight-gallery-offset) * -1);
  margin-right: calc(var(--cntr-lg) * -1);
  padding: 0 var(--cntr-lg);
}
.page-single .post-content-wrap .gallery-grid-wrap .gallery-grid > figure {
  width: calc((100% - var(--gap) * (var(--columns) - 1)) / var(--columns)) !important;
}
@media (max-width: 780px) {
  .page-single .post-content-wrap .gallery-grid-wrap .gallery-grid {
    --columns: 2;
    --gap: calc(1.5rem * var(--dynamic-scale, 1));
    margin-left: calc(var(--cntr-lg) * -1);
  }
}
.page-single .main-swiper-wrap img {
  vertical-align: middle;
}
.page-single .main-swiper-wrap .swiper:not(.swiper-initialized) .swiper-slide {
  flex-shrink: 0;
  width: calc((100% - 1.5px) / 1.5);
  margin-right: 3px;
}
.page-single .main-swiper-wrap .main-swiper-navigation-wrap {
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.8rem;
  padding-top: 2rem;
}
.page-single .main-swiper-wrap .main-swiper-prev,
.page-single .main-swiper-wrap .main-swiper-next {
  display: block;
  width: 1.6rem;
  height: 1.6rem;
  background-image: url("assets/images/arrow_pagination.svg") !important;
  background-size: 100% auto !important;
  background-repeat: no-repeat !important;
  background-position: center center !important;
  transition: opacity 0.2s ease;
}
.page-single .main-swiper-wrap .main-swiper-prev:not(.swiper-button-disabled):hover,
.page-single .main-swiper-wrap .main-swiper-next:not(.swiper-button-disabled):hover {
  opacity: 0.7;
}
.page-single .main-swiper-wrap .main-swiper-prev.swiper-button-disabled,
.page-single .main-swiper-wrap .main-swiper-next.swiper-button-disabled {
  opacity: 0.3;
  cursor: default;
}
.page-single .main-swiper-wrap .main-swiper-prev {
  transform: rotate(180deg);
}
.page-single .main-swiper-wrap .main-swiper-pagination {
  position: static;
  flex: 0;
  display: flex;
  justify-content: center;
  align-items: center;
  gap: 1.5rem;
}
.page-single .main-swiper-wrap .swiper-pagination-bullets .swiper-pagination-bullet {
  width: 0.7rem;
  height: 0.7rem;
  background-color: var(--gray-200);
  opacity: 1;
  margin: 0;
  transition: background-color 0.2s ease;
}
.page-single .main-swiper-wrap .swiper-pagination-bullets .swiper-pagination-bullet-active {
  background-color: var(--black);
}
@media (max-width: 1024px) {
  .page-single aside {
    display: none;
  }
  .page-single .post-content-wrap .post-content-inner {
    padding-right: 0;
  }
  .page-single .post-content-wrap .post-content-toolbar {
    position: static;
    flex-direction: row;
    justify-content: center;
    gap: 0.48rem;
  }
  .page-single .post-content-wrap .post-content-toolbar button,
  .page-single .post-content-wrap .post-content-toolbar .korea-sns-button {
    width: 2.2rem;
    height: 2.2rem;
  }
  .page-single .post-content-wrap h2 {
    font-size: calc(3rem * var(--dynamic-scale, 1));
    padding-bottom: calc(2rem * var(--dynamic-scale, 1));
  }
}
.page-single [class*=section-block-] {
  --section-block-gap: 20rem;
  width: 80%;
  margin: 0 auto;
}
.page-single [class*=section-block-] + [class*=section-block-] {
  padding-top: var(--section-block-gap);
}
.page-single [class*=section-block-]:not([class*=-banner-]):not(:has(~ [class*=section-block-])) {
  padding-bottom: var(--section-block-gap);
}
.page-single [class*=section-block-]:not([class*=-banner-]) + [class*=section-block-]:has([class*=-banner]) {
  margin-top: var(--section-block-gap);
}
.page-single [class*=section-block-].section-block-banner-text {
  padding-top: var(--section-block-gap);
  padding-bottom: var(--section-block-gap);
}
@media (max-width: 1024px) {
  .page-single [class*=section-block-] {
    --section-block-gap: 4rem;
    width: 100%;
  }
  .page-single [class*=section-block-].section-block-banner-text {
    padding-top: 8rem;
    padding-bottom: 8rem;
  }
}
.page-single .single-wrap {
  background: var(--white);
  padding-left: var(--cntr-lg);
  padding-right: var(--cntr-lg);
}
.page-single .single-wrap .dynamic-entry-content > [class*=section-block-]:not([class*=-banner]):nth-child(1 of [class*=section-block-]:not([class*=-banner])) {
  padding-top: var(--section-block-gap);
}
.page-single .single-wrap img {
  vertical-align: bottom;
}
.page-single .section-block-main-image img,
.page-single .section-block-main-video img {
  width: 100%;
  max-width: none;
}
.page-single .section-block-desc h2 {
  padding-bottom: calc(2rem * var(--dynamic-scale, 1));
}
.page-single .section-block-desc .block-desc {
  font-size: calc(2rem * var(--dynamic-scale, 1));
  font-weight: 500;
  line-height: 1.5;
}
@media (max-width: 1024px) {
  .page-single .section-block-desc .block-desc {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
    font-weight: 400;
  }
}
.page-single .section-block-gallery-col {
  --gap: calc(0.3rem * var(--dynamic-scale, 1));
  display: flex;
  flex-direction: column;
  gap: var(--gap);
}
.page-single .section-block-gallery-col [class^=gb-element-] {
  gap: var(--gap);
}
.page-single .section-block-gallery-col img {
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-single .gb-element-985a8619 > img:first-of-type,
.page-single .gb-element-985a8619 > :first-child img {
  min-width: 50rem;
}
@media (max-width: 1024px) {
  .page-single .gb-element-985a8619 > img:first-of-type,
  .page-single .gb-element-985a8619 > :first-child img {
    min-width: 100%;
  }
}
.page-single {
  /*
   * 이미지 그리드 스와이프 — `.block-image-grid-swipe`
   * PC: 세로(flex-col) 갤러리 목록. 모바일: 가로 스크롤(터치 스와이프).
   * Swiper 없이 overflow + scroll-snap 만 쓴다. 편집기 갤러리(`.wp-block-gallery`)
   * 또는 이미지 figure 를 직접 둔 경우 모두 잡는다.
   */
}
.page-single .block-image-grid-swipe {
  --gap: calc(0.3rem * var(--dynamic-scale, 1));
  --swipe-slide: 100%;
}
.page-single .block-image-grid-swipe .wp-block-gallery, .page-single .block-image-grid-swipe:not(:has(.wp-block-gallery)) {
  display: flex;
  flex-direction: column;
  flex-wrap: nowrap;
  gap: var(--gap);
  align-items: stretch;
}
.page-single .block-image-grid-swipe .wp-block-gallery {
  display: flex;
}
.page-single .block-image-grid-swipe .wp-block-image,
.page-single .block-image-grid-swipe figure {
  width: 100% !important;
  margin: 0;
}
.page-single .block-image-grid-swipe img {
  width: 100%;
  height: auto;
  display: block;
  vertical-align: middle;
}
@media (max-width: 1024px) {
  .page-single .block-image-grid-swipe {
    --gap: calc(1.2rem * var(--dynamic-scale, 1));
    width: calc(100% + var(--cntr-lg) * 2);
    margin-left: calc(var(--cntr-lg) * -1);
    margin-right: calc(var(--cntr-lg) * -1);
    padding-left: var(--cntr-lg);
  }
  .page-single .block-image-grid-swipe .wp-block-gallery, .page-single .block-image-grid-swipe:not(:has(.wp-block-gallery)) {
    flex-direction: row;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-x: contain;
    padding-inline: var(--cntr-lg);
    scrollbar-width: none;
  }
  .page-single .block-image-grid-swipe .wp-block-gallery::-webkit-scrollbar, .page-single .block-image-grid-swipe:not(:has(.wp-block-gallery))::-webkit-scrollbar {
    display: none;
  }
  .page-single .block-image-grid-swipe .wp-block-gallery > .wp-block-image,
  .page-single .block-image-grid-swipe .wp-block-gallery > figure, .page-single .block-image-grid-swipe:not(:has(.wp-block-gallery)) > .wp-block-image, .page-single .block-image-grid-swipe:not(:has(.wp-block-gallery)) > figure {
    flex: 0 0 var(--swipe-slide);
    width: var(--swipe-slide) !important;
    scroll-snap-align: start;
  }
}
.page-single .section-block-sticky {
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  justify-content: space-between;
}
.page-single .section-block-sticky .block-sticky-text,
.page-single .section-block-sticky .block-sticky-content {
  flex: 0 0 50%;
}
.page-single .section-block-sticky .block-sticky-text {
  height: -moz-max-content;
  height: max-content;
  position: sticky;
  top: var(--header-height);
  z-index: 10;
  display: flex;
  flex-direction: column;
}
.page-single .section-block-sticky .block-sticky-title {
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 2rem;
}
@media (max-width: 1024px) {
  .page-single .section-block-sticky .block-sticky-title {
    font-size: 3.2rem;
    padding-bottom: 1.6rem;
  }
}
.page-single .section-block-sticky .block-sticky-title-sub {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.3;
  padding-bottom: 2rem;
}
@media (max-width: 1024px) {
  .page-single .section-block-sticky .block-sticky-title-sub {
    font-size: 2rem;
    padding-bottom: 1.4rem;
  }
}
.page-single .section-block-sticky .block-sticky-desc {
  width: 80%;
  max-width: 40rem;
  font-size: 2rem;
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: 2rem;
}
@media (max-width: 1024px) {
  .page-single .section-block-sticky .block-sticky-desc {
    font-size: 1.6rem;
    padding-bottom: 1.4rem;
  }
}
@media (max-width: 1024px) {
  .page-single .section-block-sticky {
    flex-direction: column;
    gap: 4rem;
  }
  .page-single .section-block-sticky .block-sticky-text,
  .page-single .section-block-sticky .block-sticky-content {
    flex: 0 0 100%;
  }
  .page-single .section-block-sticky .block-sticky-text {
    position: static;
  }
  .page-single .section-block-sticky .block-sticky-desc {
    width: 100%;
    max-width: none;
    padding-bottom: 0;
  }
}
.page-single .section-block-youtube .block-youtube-list {
  --columns: 2;
  --gap: calc(3rem * var(--dynamic-scale, 1));
  display: grid;
  grid-template-columns: repeat(var(--columns), 1fr);
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.page-single .section-block-youtube .block-youtube-item[hidden] {
  display: none;
}
.page-single .section-block-youtube .block-youtube-link {
  display: flex;
  flex-direction: column;
  gap: calc(1rem * var(--dynamic-scale, 1));
  text-decoration: none;
}
.page-single .section-block-youtube .block-youtube-link:hover .block-youtube-thumb img, .page-single .section-block-youtube .block-youtube-link:focus-visible .block-youtube-thumb img {
  transform: scale(1.03);
}
.page-single .section-block-youtube .block-youtube-link:hover .block-youtube-play, .page-single .section-block-youtube .block-youtube-link:focus-visible .block-youtube-play {
  opacity: 0;
}
.page-single .section-block-youtube .block-youtube-link:hover .block-youtube-overlay, .page-single .section-block-youtube .block-youtube-link:focus-visible .block-youtube-overlay {
  opacity: 1;
}
.page-single .section-block-youtube .block-youtube-title {
  font-size: 3rem;
  font-weight: 500;
  line-height: 1.3;
  padding-bottom: 2rem;
}
@media (max-width: 1024px) {
  .page-single .section-block-youtube .block-youtube-title {
    font-size: 2rem;
    padding-bottom: 1.4rem;
  }
}
.page-single .section-block-youtube .block-youtube-desc {
  font-size: calc(2rem * var(--dynamic-scale, 1));
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: calc(3.2rem * var(--dynamic-scale, 1));
}
@media (max-width: 1024px) {
  .page-single .section-block-youtube .block-youtube-desc {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
  }
}
.page-single .section-block-youtube .block-youtube-thumb {
  position: relative;
  display: block;
  aspect-ratio: 16/9;
  overflow: hidden;
  background-color: var(--black);
}
.page-single .section-block-youtube .block-youtube-thumb img {
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  transition: transform 0.6s cubic-bezier(0, 0, 0.58, 1);
}
.page-single .section-block-youtube .block-youtube-item-title {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  line-clamp: 2;
  overflow: hidden;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 500;
  line-height: 1.4;
  color: var(--black);
  word-break: keep-all;
}
.page-single .section-block-youtube .block-youtube-notice {
  font-size: 1.4rem;
  font-weight: 400;
  line-height: 1.5;
  color: var(--gray-300);
  padding: 2rem;
  border: 1px dashed var(--gray-200);
}
.page-single .section-block-youtube .block-youtube-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  justify-content: center;
  align-items: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
}
.page-single .section-block-youtube .block-youtube-more-text,
.page-single .section-block-youtube .block-youtube-more-count {
  font-size: inherit;
  font-weight: inherit;
  line-height: inherit;
  color: inherit;
}
.page-single .section-block-youtube .block-youtube-more {
  display: inline-block;
  padding: 0;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
  border: none;
  border-bottom: 0.25rem solid currentColor;
  padding-bottom: 0.2rem;
  background-color: transparent;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.page-single .section-block-youtube .block-youtube-more:hover {
  opacity: 0.7;
}
.page-single .section-block-youtube .block-youtube-more[hidden] {
  display: none;
}
@media (max-width: 1024px) {
  .page-single .section-block-youtube .block-youtube-more {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
  }
}
.page-single .section-block-youtube .block-youtube-more {
  display: block;
  margin: 0 auto;
  margin-top: calc(8rem * var(--dynamic-scale, 1));
}
.page-single .section-block-youtube .block-youtube-label {
  display: inline-flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  padding: calc(1.4rem * var(--dynamic-scale, 1)) calc(2.8rem * var(--dynamic-scale, 1));
  border-radius: 5rem;
  background-color: var(--black);
}
.page-single .section-block-youtube .block-youtube-label.icon-arrow::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: calc(1.4rem * var(--dynamic-scale, 1));
  height: calc(1.4rem * var(--dynamic-scale, 1));
  margin-left: calc(0.8rem * var(--dynamic-scale, 1));
  background-color: currentColor;
  -webkit-mask-image: url("assets/images/arrow_link.svg");
          mask-image: url("assets/images/arrow_link.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.page-single .section-block-youtube .block-youtube-label.lg {
  font-size: calc(2rem * var(--dynamic-scale, 1));
  padding: calc(1.6rem * var(--dynamic-scale, 1)) calc(3.2rem * var(--dynamic-scale, 1));
}
.page-single .section-block-youtube .block-youtube-label {
  margin: calc(4rem * var(--dynamic-scale, 1)) auto 0;
}
@media (max-width: 1024px) {
  .page-single .section-block-youtube .block-youtube-link {
    gap: 0.8rem;
  }
  .page-single .section-block-youtube .block-youtube-item-title {
    font-size: calc(1.4rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-youtube .block-youtube-more {
    margin-top: calc(4rem * var(--dynamic-scale, 1));
  }
}
@media (max-width: 780px) {
  .page-single .section-block-youtube .block-youtube-list {
    --columns: 1;
  }
}
.page-single .section-block-banner-text {
  width: 100%;
  color: var(--white);
  background-color: var(--black);
  padding-top: 8rem;
  padding-bottom: 8rem;
}
.page-single .section-block-banner-text > div {
  width: 80%;
  margin: 0 auto;
  display: flex;
  flex-wrap: wrap;
}
.page-single .section-block-banner-text .block-banner-title {
  flex: 0 0 40%;
  font-size: 5rem;
  font-weight: 700;
  line-height: 1;
  padding-bottom: 2rem;
}
@media (max-width: 1024px) {
  .page-single .section-block-banner-text .block-banner-title {
    font-size: 3.2rem;
    padding-bottom: 1.6rem;
  }
}
.page-single .section-block-banner-text .block-banner-desc {
  font-size: calc(2rem * var(--dynamic-scale, 1));
  font-weight: 400;
  line-height: 1.5;
  padding-bottom: calc(2rem * var(--dynamic-scale, 1));
}
.page-single .section-block-banner-text > div > div {
  flex: 0 0 60%;
}
.page-single .section-block-banner-text .block-banner-text-link {
  width: -moz-max-content;
  width: max-content;
  display: inline-block;
  padding: 0;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  border: none;
  border-bottom: 0.25rem solid currentColor;
  padding-bottom: 0.2rem;
  background-color: transparent;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.page-single .section-block-banner-text .block-banner-text-link:hover {
  opacity: 0.7;
}
.page-single .section-block-banner-text .block-banner-text-link[hidden] {
  display: none;
}
@media (max-width: 1024px) {
  .page-single .section-block-banner-text .block-banner-text-link {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
  }
}
.page-single .section-block-banner-text .block-banner-text-link::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: calc(1.4rem * var(--dynamic-scale, 1));
  height: calc(1.4rem * var(--dynamic-scale, 1));
  margin-left: calc(0.8rem * var(--dynamic-scale, 1));
  background-color: currentColor;
  -webkit-mask-image: url("assets/images/arrow_link.svg");
          mask-image: url("assets/images/arrow_link.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
@media (max-width: 1024px) {
  .page-single .section-block-banner-text {
    padding-right: var(--cntr-lg);
    padding-left: var(--cntr-lg);
  }
  .page-single .section-block-banner-text > div {
    width: 100%;
    flex-direction: column;
  }
}
.page-single .section-block-banner-text-image {
  width: 100%;
  background-color: #f6f6f6;
  padding-top: 0 !important;
  padding-bottom: 0;
}
.page-single .section-block-banner-text-image > div {
  width: 80%;
  margin: 0 auto;
  display: flex;
  align-items: center;
}
.page-single .section-block-banner-text-image .block-banner-title {
  flex: 0 0 40%;
  font-size: 3.9rem;
  font-weight: 500;
  line-height: 1;
  padding-bottom: 2rem;
}
@media (max-width: 1024px) {
  .page-single .section-block-banner-text-image .block-banner-title {
    font-size: 2.4rem;
    padding-bottom: 1.6rem;
  }
}
.page-single .section-block-banner-text-image .block-banner-title {
  line-height: 1.3;
  padding-bottom: 4rem;
}
.page-single .section-block-banner-text-image .block-banner-title-sub {
  font-size: calc(2rem * var(--dynamic-scale, 1));
  font-weight: 500;
  line-height: 1.5;
  padding-bottom: 2rem;
}
.page-single .section-block-banner-text-image > div > div, .page-single .section-block-banner-text-image > div > figure, .page-single .section-block-banner-text-image > div > img {
  width: 50%;
}
.page-single .section-block-banner-text-image > div > figure, .page-single .section-block-banner-text-image > div > img {
  max-width: 64rem;
  margin: 0 auto;
}
.page-single .section-block-banner-text-image > div > figure > img, .page-single .section-block-banner-text-image > div > div > img {
  width: 100%;
}
.page-single .section-block-banner-text-image .wp-block-image {
  padding-bottom: 0;
}
.page-single .section-block-banner-text-image .block-banner-text-image-link {
  display: inline-flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  padding: calc(1.4rem * var(--dynamic-scale, 1)) calc(2.8rem * var(--dynamic-scale, 1));
  border-radius: 5rem;
  background-color: var(--black);
}
.page-single .section-block-banner-text-image .block-banner-text-image-link.icon-arrow::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: calc(1.4rem * var(--dynamic-scale, 1));
  height: calc(1.4rem * var(--dynamic-scale, 1));
  margin-left: calc(0.8rem * var(--dynamic-scale, 1));
  background-color: currentColor;
  -webkit-mask-image: url("assets/images/arrow_link.svg");
          mask-image: url("assets/images/arrow_link.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.page-single .section-block-banner-text-image .block-banner-text-image-link.lg {
  font-size: calc(2rem * var(--dynamic-scale, 1));
  padding: calc(1.6rem * var(--dynamic-scale, 1)) calc(3.2rem * var(--dynamic-scale, 1));
}
@media (max-width: 1024px) {
  .page-single .section-block-banner-text-image .block-banner-title {
    text-align: center;
    margin: 0 auto;
  }
  .page-single .section-block-banner-text-image .block-banner-title-sub {
    text-align: center;
    margin: 0 auto;
  }
  .page-single .section-block-banner-text-image > div {
    width: 100%;
    flex-direction: column;
  }
  .page-single .section-block-banner-text-image > div > div:first-child {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: calc(4rem * var(--dynamic-scale, 1)) 0 calc(2rem * var(--dynamic-scale, 1)) 0;
  }
  .page-single .section-block-banner-text-image > div > div, .page-single .section-block-banner-text-image > div > figure {
    width: 100%;
  }
  .page-single .section-block-banner-text-image > div > img {
    width: 80%;
  }
}
.page-single .section-block-swiper-common {
  width: 100%;
  overflow: hidden;
}
.page-single .section-block-swiper-common .block-swiper-common-wrap {
  width: 60%;
  margin: 0 auto;
  overflow: visible;
}
.page-single .section-block-swiper-overlay img {
  width: 100%;
}
.page-single .block-history-item .block-history-year {
  font-size: 3.9rem;
  font-weight: 500;
  line-height: 1;
  padding-bottom: 2rem;
}
@media (max-width: 1024px) {
  .page-single .block-history-item .block-history-year {
    font-size: 2.4rem;
    padding-bottom: 1.6rem;
  }
}
.page-single .block-history-item .block-history-year + div,
.page-single .block-history-item .wp-block-columns {
  -moz-column-gap: calc(3rem * var(--dynamic-scale, 1));
       column-gap: calc(3rem * var(--dynamic-scale, 1));
  row-gap: calc(1.8rem * var(--dynamic-scale, 1));
}
.page-single .block-history-item .wp-block-table table,
.page-single .block-history-item .wp-block-table thead,
.page-single .block-history-item .wp-block-table tbody,
.page-single .block-history-item .wp-block-table td {
  display: block;
  border: none;
  padding: 0;
}
.page-single .block-history-item .wp-block-table tr {
  display: flex;
  flex-wrap: wrap;
  gap: calc(1.2rem * var(--dynamic-scale, 1));
}
.page-single .block-history-item .wp-block-table tr:not(:last-child) {
  padding-bottom: calc(0.7rem * var(--dynamic-scale, 1));
}
.page-single .block-history-item .wp-block-table td {
  font-size: calc(1.7rem * var(--dynamic-scale, 1));
  line-height: 1.3;
}
.page-single .block-history-item .wp-block-table td:last-child {
  flex: 1;
  font-weight: 400;
}
.page-single .block-history-item .wp-block-table td:first-child {
  width: calc(13rem * var(--dynamic-scale, 1));
  font-weight: 500;
}
.page-single .block-history-item:not(:last-child) {
  padding-bottom: calc(4.8rem * var(--dynamic-scale, 1));
}
@media (max-width: 1024px) {
  .page-single .block-history-item:not(:last-child) {
    padding-bottom: calc(2rem * var(--dynamic-scale, 1));
  }
  .page-single .block-history-item .block-history-year + div,
  .page-single .block-history-item .wp-block-columns {
    grid-template-columns: 1fr;
    gap: calc(1.4rem * var(--dynamic-scale, 1));
  }
}
.page-single .section-block-banner-text,
.page-single .section-block-banner-text-image,
.page-single .section-block-swiper-common,
.page-single .section-block-rolling,
.page-single .section-block-tribes-intro {
  width: calc(100% + var(--cntr-lg) * 2);
  margin-left: calc(var(--cntr-lg) * -1);
  margin-right: calc(var(--cntr-lg) * -1);
}
.page-single {
  /*
   * 인터내셔널 크라운 토너먼트 정보 — `[international_crown_info]`
   * 골프 코스 배경 + 반투명 오버레이 위에 대회 메타를 올린다.
   */
}
.page-single .section-block-tournament-info .tournament-info {
  position: relative;
  overflow: hidden;
  border-radius: 2rem;
  color: var(--white);
  background: var(--tournament-bg) no-repeat center center/cover;
}
.page-single .section-block-tournament-info .tournament-info::before {
  content: "";
  position: absolute;
  inset: 0;
  background: #000;
  opacity: 0.5;
}
.page-single .section-block-tournament-info .tournament-info__inner {
  position: relative;
  padding: calc(12rem * var(--dynamic-scale, 1)) calc(7rem * var(--dynamic-scale, 1));
  text-align: center;
}
.page-single .section-block-tournament-info .tournament-info__label {
  display: block;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.67;
  color: rgba(244, 244, 244, 0.8);
}
.page-single .section-block-tournament-info .tournament-info__value {
  margin: 0;
  font-size: calc(2.4rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.83;
}
.page-single .section-block-tournament-info .tournament-info__num {
  display: inline-block;
  vertical-align: middle;
  margin-right: 0.4rem;
  font-size: calc(3.2rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.44;
}
.page-single .section-block-tournament-info .tournament-info__rule {
  margin-top: calc(10rem * var(--dynamic-scale, 1));
}
.page-single .section-block-tournament-info .tournament-info__rule .tournament-info__label {
  margin-bottom: calc(1.2rem * var(--dynamic-scale, 1));
}
.page-single .section-block-tournament-info .tournament-info__rule + .tournament-info__rule {
  margin-top: calc(2.4rem * var(--dynamic-scale, 1));
}
.page-single .section-block-tournament-info .tournament-info__data {
  display: flex;
  justify-content: center;
  gap: calc(3rem * var(--dynamic-scale, 1));
  margin: calc(10rem * var(--dynamic-scale, 1)) 0 0;
  padding: 0 calc(26.9rem * var(--dynamic-scale, 1));
  list-style: none;
}
.page-single .section-block-tournament-info .tournament-info__data > li {
  position: relative;
  flex: 1;
  display: grid;
  gap: calc(1.2rem * var(--dynamic-scale, 1));
}
.page-single .section-block-tournament-info .tournament-info__data > li + li::before {
  content: "";
  position: absolute;
  top: 50%;
  left: calc(-1.6rem * var(--dynamic-scale, 1));
  width: 1px;
  height: 8rem;
  transform: translateY(-50%);
  background: var(--white);
  opacity: 0.3;
}
.page-single .section-block-tournament-info .tournament-info__more {
  margin-top: calc(10rem * var(--dynamic-scale, 1));
}
.page-single .section-block-tournament-info .tournament-info__link {
  display: inline-flex;
  align-items: center;
  gap: calc(0.8rem * var(--dynamic-scale, 1));
  padding-bottom: 0.3rem;
  font-size: calc(2rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.6;
  color: var(--white);
  text-decoration: none;
  border-bottom: 0.3rem solid currentColor;
  transition: opacity 0.2s ease;
}
.page-single .section-block-tournament-info .tournament-info__link:hover, .page-single .section-block-tournament-info .tournament-info__link:focus-visible {
  opacity: 0.7;
}
.page-single .section-block-tournament-info .tournament-info__link svg {
  flex-shrink: 0;
  width: 1.2rem;
  height: 1.2rem;
  fill: currentColor;
}
.page-single .section-block-tournament-info .tournament-info__br-sm {
  display: none;
}
@media (max-width: 1024px) {
  .page-single .section-block-tournament-info .tournament-info__inner {
    padding: calc(8rem * var(--dynamic-scale, 1)) calc(4rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__data {
    padding: 0;
  }
  .page-single .section-block-tournament-info .tournament-info__label {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__value {
    font-size: calc(2rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__num {
    font-size: calc(2.6rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__link {
    font-size: calc(1.8rem * var(--dynamic-scale, 1));
  }
}
@media (max-width: 480px) {
  .page-single .section-block-tournament-info .tournament-info {
    border-radius: 1.2rem;
  }
  .page-single .section-block-tournament-info .tournament-info__inner {
    padding: calc(6rem * var(--dynamic-scale, 1)) calc(2.9rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__data {
    margin-top: calc(6rem * var(--dynamic-scale, 1));
    padding: 0 calc(0.3rem * var(--dynamic-scale, 1));
    gap: calc(1.6rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__data > li {
    gap: calc(0.8rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__data > li + li::before {
    height: 90%;
    left: calc(-0.8rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__rule {
    margin-top: calc(6rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__rule .tournament-info__label {
    margin-bottom: calc(0.8rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__rule + .tournament-info__rule {
    margin-top: calc(2rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__more {
    margin-top: calc(6rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__br-sm {
    display: block;
  }
  .page-single .section-block-tournament-info .tournament-info__label {
    font-size: calc(1.4rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__value {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
    line-height: 1.5;
  }
  .page-single .section-block-tournament-info .tournament-info__num {
    font-size: calc(2.2rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tournament-info .tournament-info__link {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
  }
}
.page-single {
  /*
   * 롤링 마퀴 — `.section-block-rolling` 안의 갤러리 이미지를 JS가 트랙으로 옮긴다
   * (`assets/js/effects/rolling-marquee.js`). 스크립트가 없으면 편집기 갤러리가 그대로 보인다.
   *
   * 트랙은 동일 세트를 두 벌 나란히 두고 `-50%` 만큼 민다. 항목 간격은 gap 이 아니라
   * margin-right — gap 은 마지막 칸 뒤에 없어 앞뒤 절반 폭이 어긋난다.
   */
}
.page-single .section-block-rolling {
  --rolling-gap: 1.2rem;
  --rolling-dur: 50s;
  overflow: hidden;
}
.page-single .section-block-rolling[data-rolling-marquee] > :not(.rolling-marquee) {
  display: none;
}
.page-single .section-block-rolling .rolling-marquee {
  overflow: hidden;
  width: 100%;
  container-type: inline-size;
}
.page-single .section-block-rolling .rolling-marquee-track {
  display: flex;
  width: -moz-max-content;
  width: max-content;
  will-change: transform;
  animation: rolling-marquee var(--rolling-dur) linear infinite;
}
.page-single .section-block-rolling .rolling-marquee-set {
  display: flex;
  flex-shrink: 0;
}
.page-single .section-block-rolling .rolling-marquee-item {
  flex: 0 0 55cqw;
  width: 55cqw;
  aspect-ratio: 3/2;
  margin: 0;
  margin-right: var(--rolling-gap);
  padding: 0;
  height: auto;
  overflow: hidden;
}
.page-single .section-block-rolling .rolling-marquee-item img {
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
}
@media (max-width: 1024px) {
  .page-single .section-block-rolling {
    --rolling-gap: 0.8rem;
  }
}
.page-single {
  /*
   * 서비스 트라이브 소개 — `[service_tribes_intro]`
   * PC: sticky 스크롤로 1→2→3.
   * 모바일: 세로 스택(타이틀 → 목업 → 상세), 목업 고정 + 화면/텍스트 fade.
   */
}
.page-single .section-block-tribes-intro {
  --section-block-gap: 0rem;
  --tribes-run: 240vh;
  --tribes-fade-ms: 0.55s;
  --tribes-grid-line: rgba(0, 0, 0, 0.06);
  width: calc(100% + var(--cntr-lg) * 2);
  color: var(--black);
  background-color: var(--white);
}
.page-single .section-block-tribes-intro .tribes-intro-title {
  margin: 0;
  font-size: calc(4.2rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.2;
  text-align: center;
}
.page-single .section-block-tribes-intro .tribes-intro-desc {
  margin: calc(2.4rem * var(--dynamic-scale, 1)) 0 0;
  font-size: calc(2rem * var(--dynamic-scale, 1));
  font-weight: 400;
  line-height: 1.6;
  text-align: center;
}
.page-single .section-block-tribes-intro .tribes-intro-bullets {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: calc(1.6rem * var(--dynamic-scale, 1));
  margin: 0;
  padding: 0;
  list-style: none;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 400;
  line-height: 1.55;
}
.page-single .section-block-tribes-intro .tribes-intro-bullets li {
  position: relative;
  padding-left: 1.4em;
}
.page-single .section-block-tribes-intro .tribes-intro-bullets li::before {
  content: "";
  position: absolute;
  top: 0.55em;
  left: 0;
  width: 0.35em;
  height: 0.35em;
  border-radius: 50%;
  background: currentColor;
}
.page-single .section-block-tribes-intro .tribes-intro-device-row {
  position: relative;
}
.page-single .section-block-tribes-intro .tribes-intro-device {
  position: relative;
  height: 84.277svh;
  max-height: 80.4rem;
  min-width: 40rem;
  max-width: 100%;
  aspect-ratio: 390/794;
  width: auto;
  margin-inline: auto;
}
.page-single .section-block-tribes-intro .tribes-intro-screens {
  position: absolute;
  inset: 0;
  z-index: 1;
}
.page-single .section-block-tribes-intro .tribes-intro-screen {
  position: absolute;
  inset: 0;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
  opacity: 0;
  transition: opacity var(--tribes-fade-ms) ease;
  pointer-events: none;
}
.page-single .section-block-tribes-intro .tribes-intro-screen.is-active {
  opacity: 1;
}
.page-single .section-block-tribes-intro .tribes-intro-frame {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: block;
  width: 100%;
  height: 100%;
  -o-object-fit: contain;
     object-fit: contain;
  pointer-events: none;
}
.page-single .section-block-tribes-intro .tribes-intro-prev,
.page-single .section-block-tribes-intro .tribes-intro-next {
  display: none;
}
.page-single .section-block-tribes-intro .tribes-intro-track {
  height: calc(100svh + var(--tribes-run));
}
.page-single .section-block-tribes-intro .tribes-intro-stage {
  position: sticky;
  top: 0;
  z-index: 5;
  display: flex;
  align-items: center;
  height: 100svh;
  padding-block: calc(var(--header-height, 0px) + 2rem) 2rem;
  box-sizing: border-box;
}
.page-single .section-block-tribes-intro .tribes-intro-layout {
  display: grid;
  grid-template-columns: 1fr auto 1fr;
  align-items: center;
  gap: calc(4rem * var(--dynamic-scale, 1));
  width: 100%;
  max-width: 180rem;
  margin-inline: auto;
  padding-inline: var(--cntr-lg);
}
.page-single .section-block-tribes-intro .tribes-intro-col--lead,
.page-single .section-block-tribes-intro .tribes-intro-col--detail {
  display: grid;
  align-content: center;
  min-width: 0;
}
.page-single .section-block-tribes-intro .tribes-intro-col--lead {
  max-width: 38rem;
  justify-items: start;
  text-align: left;
  margin-left: 10rem;
}
.page-single .section-block-tribes-intro .tribes-intro-col--detail {
  justify-items: start;
  margin-left: 10rem;
}
.page-single .section-block-tribes-intro .tribes-intro-col--detail .tribes-intro-bullets {
  max-width: 38rem;
}
.page-single .section-block-tribes-intro .tribes-intro-panel {
  grid-area: 1/1;
  opacity: 0;
  visibility: hidden;
  transform: translate3d(0, 2.4rem, 0);
  transition: opacity var(--tribes-fade-ms) ease, transform var(--tribes-fade-ms) ease, visibility 0s linear var(--tribes-fade-ms);
  pointer-events: none;
}
.page-single .section-block-tribes-intro .tribes-intro-panel.is-active {
  opacity: 1;
  visibility: visible;
  transform: translate3d(0, 0, 0);
  transition-delay: 0s, 0s, 0s;
  pointer-events: auto;
}
@media (max-width: 1024px) {
  .page-single .section-block-tribes-intro .tribes-intro-track {
    height: auto;
  }
  .page-single .section-block-tribes-intro .tribes-intro-stage {
    position: static;
    height: auto;
    padding-block: calc(6rem * var(--dynamic-scale, 1)) calc(8rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tribes-intro .tribes-intro-layout {
    grid-template-columns: 1fr;
    justify-items: center;
    gap: calc(3.2rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tribes-intro .tribes-intro-col--lead,
  .page-single .section-block-tribes-intro .tribes-intro-col--detail {
    width: 100%;
    max-width: 42rem;
    justify-items: center;
    margin-left: 0;
    margin-right: 0;
  }
  .page-single .section-block-tribes-intro .tribes-intro-col--lead {
    text-align: center;
  }
  .page-single .section-block-tribes-intro .tribes-intro-col--detail .tribes-intro-bullets {
    max-width: none;
    width: 100%;
    text-align: left;
  }
  .page-single .section-block-tribes-intro .tribes-intro-col--device {
    width: 100%;
  }
  .page-single .section-block-tribes-intro .tribes-intro-device {
    height: auto;
    max-height: none;
    width: min(52vw, 28rem);
  }
  .page-single .section-block-tribes-intro .tribes-intro-title {
    font-size: calc(3.2rem * var(--dynamic-scale, 1));
    text-align: center;
  }
  .page-single .section-block-tribes-intro .tribes-intro-desc {
    margin-top: calc(1.6rem * var(--dynamic-scale, 1));
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
    text-align: center;
  }
  .page-single .section-block-tribes-intro .tribes-intro-bullets {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
  }
  .page-single .section-block-tribes-intro .tribes-intro-device-row {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 100%;
    padding-inline: 5.2rem;
  }
  .page-single .section-block-tribes-intro .tribes-intro-prev,
  .page-single .section-block-tribes-intro .tribes-intro-next {
    position: absolute;
    top: 50%;
    z-index: 3;
    display: flex;
    align-items: center;
    justify-content: center;
    width: 3.2rem;
    height: 3.2rem;
    margin: 0;
    padding: 0;
    border: 1px solid currentColor;
    background: var(--black) !important;
    color: var(--white);
    cursor: pointer;
    transform: translateY(-50%);
    transition: opacity 0.3s ease;
    pointer-events: auto;
  }
  .page-single .section-block-tribes-intro .tribes-intro-prev::after,
  .page-single .section-block-tribes-intro .tribes-intro-next::after {
    content: "";
    display: block;
    width: 100%;
    height: 100%;
    background-color: currentColor;
    -webkit-mask: url("assets/images/arrow_top_down.svg") no-repeat center/100% auto;
    mask: url("assets/images/arrow_top_down.svg") no-repeat center/100% auto;
  }
  .page-single .section-block-tribes-intro .tribes-intro-prev:disabled, .page-single .section-block-tribes-intro .tribes-intro-prev.is-disabled,
  .page-single .section-block-tribes-intro .tribes-intro-next:disabled,
  .page-single .section-block-tribes-intro .tribes-intro-next.is-disabled {
    opacity: 0.3;
    cursor: default;
  }
  .page-single .section-block-tribes-intro .tribes-intro-prev {
    left: 0;
    margin-left: 1rem;
  }
  .page-single .section-block-tribes-intro .tribes-intro-prev::after {
    transform: rotate(-90deg);
  }
  .page-single .section-block-tribes-intro .tribes-intro-next {
    right: 0;
    margin-right: 1rem;
  }
  .page-single .section-block-tribes-intro .tribes-intro-next::after {
    transform: rotate(90deg);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-single .section-block-tribes-intro .tribes-intro-screen,
  .page-single .section-block-tribes-intro .tribes-intro-panel {
    transition: none;
  }
  .page-single .section-block-tribes-intro .tribes-intro-panel {
    transform: none;
  }
}

@keyframes rolling-marquee {
  from {
    transform: translate3d(0, 0, 0);
  }
  to {
    transform: translate3d(-50%, 0, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  .page-single .section-block-rolling .rolling-marquee-track {
    animation: none;
  }
}
.page-single-activity {
  /*
   * 대표 이미지·영상 핀 — 화면보다 조금 작게 들어와 제자리에서 화면을 꽉 채웠다가 그대로
   * 흘러 나간다.
   *
   * 마크업(`.pin-media-track` → `.pin-media-stage` → `.pin-media-frame`)은
   * `assets/js/effects/pin-media.js` 가 만든다. 스크립트가 걸리지 않으면 아래 규칙은 대상이
   * 없으므로 블록은 원래 모습 그대로 남는다.
   *
   * 처음 상자와 끝 상자는 둘 다 화면 비율(`--pin-vw` × `100svh`) 그대로다 — 처음이
   * `--pin-scale0` 만큼 줄어 있을 뿐이라 자라는 내내 비율이 흔들리지 않는다. 블록 칼럼 너비도
   * 미디어 자체 비율도 크기에 끼어들지 않는다(프레임을 `object-fit: cover` 로 채운다).
   *
   * 스크립트가 매 프레임 건드리는 값은 진행도(`--pin-p`) 하나뿐이고 크기 계산은 전부 여기서
   * 한다 — 눈에 보이는 값이 자바스크립트로 새지 않게.
   *
   *   --pin-p      0 = 처음 크기, 1 = 화면 가득
   *   --pin-scale0 처음 크기가 화면의 몇 배인지
   *   --pin-scale  지금 크기가 화면의 몇 배인지 — 처음 배율에서 1 까지 진행도를 따라간다.
   *   --pin-x      무대의 처음 왼쪽 위치. 본문 칼럼은 목차만큼 오른쪽으로 밀려 있어 화면
   *                가운데가 아니다 — 무대를 화면 왼쪽 끝으로 끌어오는 데 쓴다.
   *   --pin-vw     세로 스크롤바를 뺀 화면 너비. `100vw` 는 스크롤바를 포함해 가로 스크롤을 만든다.
   *   --pin-run    붙어 있는 동안의 스크롤 거리 — 커지는 구간과 멈춰 있는 구간을 합한 것.
   *
   * 무대는 화면 왼쪽 끝에서 정확히 화면 너비만큼만 차지하고, 프레임은 그 안에서 가운데 정렬로
   * 자랄 뿐이라 화면 밖으로 나가지 않는다. 그래서 조상에 `overflow` 를 걸어 막을 필요가 없다 —
   * 걸면 `.particle-hero` 의 sticky 가 죽는다(styles/_particle.scss 주석 참고).
   */
}
.page-single-activity .section-block-main-image[data-pin-media],
.page-single-activity .section-block-main-video[data-pin-media],
.page-single-activity .section-block-main-image-2[data-pin-media] {
  --section-block-gap: 0rem;
  --pin-p: 0;
  --pin-scale0: 0.8;
  --pin-scale: calc(var(--pin-scale0) + (1 - var(--pin-scale0)) * var(--pin-p));
  --pin-x: 0px;
  --pin-vw: 100vw;
  --pin-run: 90svh;
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-track,
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-track,
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-track {
  height: calc(100svh + var(--pin-run));
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-stage,
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-stage,
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-stage {
  position: sticky;
  top: 0;
  z-index: 20;
  display: flex;
  justify-content: center;
  align-items: center;
  width: var(--pin-vw);
  height: 100svh;
  margin-left: calc(-1 * var(--pin-x));
  pointer-events: none;
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-frame,
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-frame,
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame {
  flex: none;
  display: grid;
  width: calc(var(--pin-vw) * var(--pin-scale));
  height: calc(100svh * var(--pin-scale));
  overflow: hidden;
  pointer-events: auto;
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-frame > *,
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-frame > *,
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame > * {
  grid-area: 1/1;
  min-width: 0;
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-frame,
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-frame,
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame {
  /*
   * 편집기가 미디어를 무엇으로 감싸 넣든(figure · 컨테이너 블록 · 임베드 래퍼)
   * 프레임을 그대로 채우게 편다. 감싼 것의 종류를 여기서 알 수 없으므로 껍데기 역할을
   * 하는 태그를 통째로 편다 — 프레임 안에는 미디어 하나뿐이라 휩쓸릴 것이 없다.
   */
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-frame *,
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-frame *,
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame * {
  margin: 0;
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-frame :is(figure, picture, div),
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-frame :is(figure, picture, div),
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame :is(figure, picture, div) {
  display: block;
  width: 100%;
  height: 100%;
  padding: 0;
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-frame ::before,
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-frame ::before,
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame ::before {
  display: none;
}
.page-single-activity .section-block-main-image[data-pin-media] .pin-media-frame :is(img, video, iframe),
.page-single-activity .section-block-main-video[data-pin-media] .pin-media-frame :is(img, video, iframe),
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame :is(img, video, iframe) {
  position: static;
  display: block;
  width: 100%;
  height: 100%;
  max-width: none;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-single-activity {
  /*
   * 트라이브 비주얼 핀 — 확대 후 visual-01 → visual-02 + 오버레이 전환.
   * `--pin-swap` 은 pin-media.js 가 스크롤 진행도로 갱신한다.
   *
   * 공통 `.pin-media-frame :is(div)` 규칙이 display/height 를 덮어쓰므로,
   * 레이어는 grid 대신 absolute 로 겹친다 — 세로 스택되면 overflow 에 두 번째가 잘린다.
   */
}
.page-single-activity .section-block-main-image-2[data-pin-media] {
  --pin-swap: 0;
  --pin-run: 140svh;
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-layers {
  position: relative;
  width: 100%;
  height: 100%;
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-layer {
  position: absolute;
  inset: 0;
  z-index: 0;
  overflow: hidden;
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-layer--swap {
  z-index: 1;
  opacity: var(--pin-swap);
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  -o-object-fit: cover;
     object-fit: cover;
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-img--desktop {
  display: block;
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-img--mobile {
  display: none;
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-overlay {
  position: absolute;
  inset: 0;
  z-index: 2;
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  width: auto;
  height: auto;
  box-sizing: border-box;
  padding: calc(4rem * var(--dynamic-scale, 1));
  color: var(--white);
  opacity: var(--pin-swap);
  pointer-events: none;
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-overlay::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: 1;
  background-color: rgba(0, 0, 0, 0.5);
}
.page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-overlay > div {
  position: static;
  z-index: 5;
}
@media (max-width: 780px) {
  .page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-img--desktop {
    display: none;
  }
  .page-single-activity .section-block-main-image-2[data-pin-media] .pin-media-frame .pin-visual-img--mobile {
    display: block;
  }
}
@media (max-width: 1024px) {
  .page-single-activity .section-block-main-image[data-pin-media],
  .page-single-activity .section-block-main-video[data-pin-media] {
    --pin-run: 60svh;
  }
  .page-single-activity .section-block-main-image-2[data-pin-media] {
    --pin-run: 100svh;
  }
}
.page-single-activity .section-block-main-image.block-static,
.page-single-activity .section-block-main-video.block-static,
.page-single-activity .section-block-main-image-2.block-static {
  width: calc(100% + var(--cntr-lg) * 2);
  margin-left: calc(var(--cntr-lg) * -1);
  margin-right: calc(var(--cntr-lg) * -1);
  padding-top: 0 !important;
}
.page-single-activity .section-block-main-image:last-child {
  padding-top: var(--section-block-gap) !important;
  padding-bottom: 0 !important;
}

.page-single-insight [class*=section-block-] {
  --section-block-gap: 0;
  width: 100%;
}

@keyframes popup-button-move-in {
  from {
    transform: translate(-50%, calc(-50% + 100vh));
  }
  to {
    transform: translate(-50%, -50%);
  }
}
@keyframes popup-button-backdrop-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes popup-button-move-out {
  from {
    transform: translate(-50%, -50%);
  }
  to {
    transform: translate(-50%, calc(-50% + 100vh));
  }
}
@keyframes popup-button-backdrop-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.popup-button {
  display: inline-block;
}
.popup-button .popup-button-trigger {
  display: flex;
  align-items: center;
  gap: calc(2.3rem * var(--dynamic-scale, 1));
  font-size: calc(3rem * var(--dynamic-scale, 1));
  font-weight: 500;
  line-height: 1;
  text-align: center;
  color: var(--black);
  padding: calc(1.5rem * var(--dynamic-scale, 1)) calc(2.3rem * var(--dynamic-scale, 1));
  margin-top: calc(3rem * var(--dynamic-scale, 1));
  border-radius: 4rem;
  background: rgba(147, 147, 147, 0.2);
  border: none;
  transition: background-color 0.3s ease, color 0.3s ease;
}
.popup-button .popup-button-trigger:hover, .popup-button .popup-button-trigger:focus-visible {
  background-color: var(--black) !important;
  color: var(--white);
}
.popup-button .popup-button-trigger:hover:after, .popup-button .popup-button-trigger:focus-visible:after {
  background-color: var(--white);
}
.popup-button .popup-button-trigger:after {
  content: "";
  display: block;
  flex-shrink: 0;
  width: calc(1.2rem * var(--dynamic-scale, 1));
  height: calc(2.4rem * var(--dynamic-scale, 1));
  background-color: var(--black);
  -webkit-mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyNyIgdmlld0JveD0iMCAwIDE2IDI3IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMS4wNjI1IDEuMDYwNTVMMTMuMDYyNSAxMy4wNjA1TDEuMDYyNSAyNS4wNjA1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiLz48L3N2Zz4=");
  mask-image: url("data:image/svg+xml;base64,PHN2ZyB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHdpZHRoPSIxNiIgaGVpZ2h0PSIyNyIgdmlld0JveD0iMCAwIDE2IDI3IiBmaWxsPSJub25lIj48cGF0aCBkPSJNMS4wNjI1IDEuMDYwNTVMMTMuMDYyNSAxMy4wNjA1TDEuMDYyNSAyNS4wNjA1IiBzdHJva2U9ImJsYWNrIiBzdHJva2Utd2lkdGg9IjMiLz48L3N2Zz4=");
  -webkit-mask-size: contain;
  mask-size: contain;
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
}
.popup-button .popup-button-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(93rem, 100vw - var(--cntr) * 2);
  max-width: none;
  max-height: min(97rem, 100 * var(--vh) - var(--cntr) * 2);
  padding: 0;
  background-color: transparent;
  color: var(--white);
  overflow: visible;
  border: none;
}
.popup-button .popup-button-dialog[open] {
  animation: popup-button-move-in 500ms cubic-bezier(0, 0, 0.58, 1) both;
}
.popup-button .popup-button-dialog::backdrop {
  background-color: rgba(255, 255, 255, 0.8);
}
.popup-button .popup-button-dialog[open]::backdrop {
  animation: popup-button-backdrop-in 500ms cubic-bezier(0, 0, 0.58, 1) both;
}
.popup-button .popup-button-dialog[open].is-closing {
  animation: popup-button-move-out 500ms cubic-bezier(0.42, 0, 1, 1) both;
}
.popup-button .popup-button-dialog[open].is-closing::backdrop {
  animation: popup-button-backdrop-out 500ms cubic-bezier(0.42, 0, 1, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .popup-button .popup-button-dialog[open], .popup-button .popup-button-dialog[open]::backdrop, .popup-button .popup-button-dialog[open].is-closing, .popup-button .popup-button-dialog[open].is-closing::backdrop {
    animation: none;
  }
}
.popup-button .popup-button-panel {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3.2rem;
  max-height: inherit;
}
.popup-button .popup-button-body {
  width: 100%;
  min-height: 0;
  overflow-y: auto;
  padding: calc(3rem * var(--dynamic-scale, 1));
  background-color: var(--black);
  scrollbar-width: thin;
  scrollbar-color: var(--gray-100) transparent;
}
.popup-button .popup-button-body::-webkit-scrollbar {
  width: 5px;
}
.popup-button .popup-button-body::-webkit-scrollbar-track {
  background: transparent;
}
.popup-button .popup-button-body::-webkit-scrollbar-thumb {
  background: var(--gray-100);
}
.popup-button .popup-button-title {
  font-size: calc(5rem * var(--dynamic-scale, 1));
  font-weight: 500;
  line-height: 100%;
  padding-bottom: 0;
  margin-bottom: calc(3rem * var(--dynamic-scale, 1));
}
.popup-button .popup-button-content {
  font-size: var(--dynamic-font, 2.1rem);
  font-weight: 400;
  line-height: 170%;
}
.popup-button .popup-button-content > * + * {
  margin-top: calc(1.6rem * var(--dynamic-scale, 1));
}
.popup-button .popup-button-content img {
  max-width: 100%;
  height: auto;
  vertical-align: top;
}
.popup-button .popup-button-content a {
  color: inherit;
  text-decoration: underline;
}
.popup-button .popup-button-content ul,
.popup-button .popup-button-content ol {
  padding-left: calc(2rem * var(--dynamic-scale, 1));
}
.popup-button .popup-button-content li {
  list-style: revert;
}
.popup-button .popup-button-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  width: 5.6rem;
  height: 5.6rem;
  padding: 1.4rem;
  border: none;
  border-radius: 50%;
  background-color: var(--black) !important;
  color: var(--white);
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.popup-button .popup-button-close:hover, .popup-button .popup-button-close:focus-visible {
  opacity: 0.7;
}
.popup-button .popup-button-close .icon-close {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}
@media (max-width: 1024px) {
  .popup-button {
    display: block;
  }
  .popup-button .popup-button-trigger {
    font-size: calc(2rem * var(--dynamic-scale, 1));
    padding: calc(1rem * var(--dynamic-scale, 1)) calc(1.6rem * var(--dynamic-scale, 1));
    gap: calc(1rem * var(--dynamic-scale, 1));
  }
  .popup-button .popup-button-trigger:after {
    width: calc(1rem * var(--dynamic-scale, 1));
    height: calc(2rem * var(--dynamic-scale, 1));
  }
  .popup-button .popup-button-dialog {
    width: calc(100vw - var(--cntr) * 2);
  }
  .popup-button .popup-button-panel {
    gap: 1.2rem;
  }
  .popup-button .popup-button-body {
    padding: calc(2.4rem * var(--dynamic-scale, 1)) calc(2rem * var(--dynamic-scale, 1));
  }
  .popup-button .popup-button-title {
    font-size: calc(3.2rem * var(--dynamic-scale, 1));
    margin-bottom: calc(2rem * var(--dynamic-scale, 1));
  }
  .popup-button .popup-button-close {
    width: 4.4rem;
    height: 4.4rem;
    padding: 1.1rem;
  }
}

.button-underline {
  display: inline-block;
  padding: 0;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1.3;
  color: var(--black);
  border: none;
  border-bottom: 0.25rem solid currentColor;
  padding-bottom: 0.2rem;
  background-color: transparent;
  text-decoration: none;
  transition: opacity 0.2s ease;
}
.button-underline:hover {
  opacity: 0.7;
}
.button-underline[hidden] {
  display: none;
}
@media (max-width: 1024px) {
  .button-underline {
    font-size: calc(1.6rem * var(--dynamic-scale, 1));
  }
}

.button-pill {
  display: inline-flex;
  align-items: center;
  width: -moz-max-content;
  width: max-content;
  font-size: calc(1.8rem * var(--dynamic-scale, 1));
  font-weight: 700;
  line-height: 1;
  color: var(--white);
  padding: calc(1.4rem * var(--dynamic-scale, 1)) calc(2.8rem * var(--dynamic-scale, 1));
  border-radius: 5rem;
  background-color: var(--black);
}
.button-pill.icon-arrow::after {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: calc(1.4rem * var(--dynamic-scale, 1));
  height: calc(1.4rem * var(--dynamic-scale, 1));
  margin-left: calc(0.8rem * var(--dynamic-scale, 1));
  background-color: currentColor;
  -webkit-mask-image: url("assets/images/arrow_link.svg");
          mask-image: url("assets/images/arrow_link.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
}
.button-pill.lg {
  font-size: calc(2rem * var(--dynamic-scale, 1));
  padding: calc(1.6rem * var(--dynamic-scale, 1)) calc(3.2rem * var(--dynamic-scale, 1));
}

* {
  word-break: keep-all;
  box-sizing: border-box;
  position: relative;
  padding: 0;
  margin: 0;
}

ul,
ol,
li {
  list-style: none;
  margin: 0;
}

h1,
h2,
h3,
h4,
h5,
h6,
p {
  margin-bottom: 0;
}

button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  border: none;
  background: none;
  cursor: pointer;
  padding: 0;
}
button:active, button:focus, button:hover {
  background: none !important;
}

html {
  font-size: min(0.35vw + 3px, 9.5px);
}
@media (max-width: 1024px) {
  html {
    font-size: 10px;
  }
}

body,
input,
select,
optgroup,
textarea,
button {
  font-family: "Suisse Int'l", "Hanwha Gothic", "Pretendard Variable", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Oxygen, Ubuntu, Cantarell, "Open Sans", "Helvetica Neue", sans-serif !important;
}

/*
 * 씬 배경 — 파티클 색과 한 쌍이다.
 *
 * 홈만 어두운 면 위에 색 파티클을 얹고(`HOME_SCENE_BG_HEX`·`HOME_PARTICLE_PALETTE_HEX`),
 * 나머지 화면은 회색 면 위에 검은 파티클을 얹는다(`SCENE_BG_HEX`·`PARTICLE_PALETTE_HEX`).
 * 값은 assets/js/scene/constants.js 와 같게 유지할 것 — 캔버스는 투명하고 그 뒤로 이 배경이
 * 그대로 비치므로, 어긋나면 파티클이 배경에 묻히거나 캔버스 경계가 드러난다.
 *
 * ── 왜 body 가 갖나 ──────────────────────────────────────────────────────────────
 * 랜딩 셸(`.index-landing`·`.index-intro`)에 불투명 배경을 두면 파티클 캔버스가 통째로 가려진다
 * (styles/_particle.scss 의 `#bg-canvas` 주석). 배경은 캔버스보다 아래인 문서 배경이어야 한다.
 *
 * ── 왜 :has() 인가 ───────────────────────────────────────────────────────────────
 * 판단 근거는 셸 래퍼의 `data-page` 하나뿐이다 — 자바스크립트가 파티클 색 테마를 고르는 것과
 * 같은 값이라(assets/js/pages/registry.js) 둘이 어긋날 수 없다. 서버가 찍어 주므로 첫 페인트부터
 * 맞고, 소프트 내비게이션은 이 래퍼째로 갈아 끼우므로 새 값으로 다시 걸린다 — 색을 맞추려고
 * 자바스크립트를 기다릴 필요가 없다. `:has()` 를 모르는 브라우저는 회색 배경에 머문다.
 */
body {
  --scene-bg: var(--bg-gray);
  --scene-bg-home: #050203;
  --scene-bg-fade: 0.6s;
  background-color: var(--scene-bg);
  transition: background-color var(--scene-bg-fade) ease;
}
body:has([data-soft-nav][data-page=home]) {
  --scene-bg: var(--scene-bg-home);
}

@media (prefers-reduced-motion: reduce) {
  body {
    transition: none;
  }
}
a {
  text-decoration: none;
  color: var(--black);
}

a:hover, a:focus, a:active {
  color: inherit;
}

.container {
  max-width: initial !important;
}

.a11y {
  display: none;
}

.bg-light {
  background-color: var(--white);
  color: var(--black);
}
.bg-light a {
  color: inherit;
}

/* ----- Initialize End ----- */
/* Global Styles */
:root {
  --vh: 1vh;
  --cntr: 3rem;
  --cntr-lg: 4rem;
  --header-height: 10.8rem;
  --header-height-compact: 7.8rem;
  --footer-height: 11.6rem;
  --page-fade: 0.25s;
}
@media (max-width: 1024px) {
  :root {
    --header-height: 5.4rem;
    --header-height-compact: 5.4rem;
    --cntr: 1.5rem;
    --cntr-lg: 1.5rem;
    --footer-height: 10.1rem;
  }
}

.bg-blur, .tag-label, .page-single .post-toc .post-toc-item.post-toc-item-h2 a {
  backdrop-filter: blur(3px);
}

.category-label-list {
  display: flex;
  flex-wrap: wrap;
  flex-direction: row;
  justify-content: center;
  align-items: center;
  -moz-column-gap: 2.4rem;
       column-gap: 2.4rem;
  row-gap: 1rem;
}
@media (max-width: 1024px) {
  .category-label-list {
    gap: 1rem;
  }
}
@media (max-width: 780px) {
  .category-label-list {
    flex-direction: column;
    justify-content: flex-start;
    align-items: stretch;
    gap: 0.3rem;
  }
}

.category-label {
  font-size: 4.2rem;
  font-weight: 600;
  line-height: 100%;
  text-decoration-line: underline;
  text-decoration-style: solid;
  -webkit-text-decoration-skip: ink;
          text-decoration-skip-ink: auto;
  text-decoration-thickness: 0.08rem;
  text-underline-offset: auto;
  text-underline-position: from-font;
  color: var(--pattern-60) !important;
}
.category-label:not(.is-active):hover {
  color: var(--pattern-40) !important;
}
.category-label.is-active {
  color: var(--black) !important;
}
@media (max-width: 1024px) {
  .category-label {
    font-size: 2.5rem;
    text-decoration-thickness: 0.05rem;
  }
}

.tag-list {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}
@media (max-width: 1024px) {
  .tag-list {
    gap: 0.3rem;
  }
}

.tag-label {
  display: block;
  text-align: center;
  font-size: 1.9rem;
  font-weight: 600;
  line-height: 1;
  color: var(--black);
  border-radius: 4rem;
  border: 1px solid var(--black);
  background-color: color-mix(in srgb, var(--gray-100) 60%, transparent);
  padding: 0.8rem 1.3rem;
}
.tag-label.is-active {
  background: var(--white);
  color: var(--black);
}
.tag-label:not(.is-active):hover {
  background: var(--gray-300);
  color: var(--black);
}
.tag-label .sm {
  font-size: 1.4rem;
  font-weight: 600;
  padding: 0.6rem 1rem;
}
@media (max-width: 1024px) {
  .tag-label {
    font-size: 1.28rem;
    padding: 0.54rem 0.87rem;
  }
}

.tag-label-static {
  display: block;
  font-size: 1.4rem;
  font-weight: 600;
  line-height: 1;
  text-align: center;
  padding: 0.6rem 1rem;
  border-radius: 4rem;
  border: 1px solid var(--black);
  background: var(--white);
  backdrop-filter: blur(2px);
  color: var(--black);
}
.tag-label-static.bg-line {
  border: 1px solid var(--white);
  background: transparent;
  color: var(--white);
}
@media (max-width: 1024px) {
  .tag-label-static {
    font-size: 0.96rem;
    padding: 0.42rem 0.66rem;
  }
}

.tag-label-rect {
  font-size: 1.6rem;
  font-weight: 700;
  line-height: 1.3;
  color: var(--white);
  padding: 0.4rem 0.7rem;
  border: 1px solid var(--white);
  text-transform: uppercase;
  letter-spacing: 0.06rem;
}
@media (max-width: 1024px) {
  .tag-label-rect {
    font-size: 1.2rem;
    padding: 0.2rem 0.5rem;
  }
}

.image-wrap img {
  width: 100%;
  vertical-align: top;
}

.list-pagination {
  padding: 5rem 0 0;
}
.list-pagination .page-numbers {
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  align-items: center;
  gap: 2rem;
  list-style: none;
  margin: 0;
  padding: 0;
}
.list-pagination li {
  margin: 0;
}
.list-pagination a.page-numbers,
.list-pagination span.page-numbers {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 2.4rem;
  height: 2.4rem;
  font-size: 2.2rem;
  font-weight: 950;
  line-height: 1;
  color: var(--black);
  opacity: 0.3;
  transition: opacity 0.3s ease;
}
.list-pagination a.page-numbers.next, .list-pagination a.page-numbers.prev,
.list-pagination span.page-numbers.next,
.list-pagination span.page-numbers.prev {
  font-size: 0;
  background-image: url("assets/images/arrow_pagination.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
  opacity: 1;
}
.list-pagination a.page-numbers.next,
.list-pagination span.page-numbers.next {
  margin-left: 1.2rem;
}
.list-pagination a.page-numbers.prev,
.list-pagination span.page-numbers.prev {
  transform: rotate(180deg);
  margin-right: 1.2rem;
}
.list-pagination span.page-numbers.current {
  opacity: 1;
}
.list-pagination a.page-numbers:hover {
  opacity: 0.6;
}
@media (max-width: 1024px) {
  .list-pagination {
    padding-top: 6rem;
  }
  .list-pagination .page-numbers {
    gap: 1.5rem;
  }
  .list-pagination a.page-numbers,
  .list-pagination span.page-numbers {
    font-size: 1.54rem;
    width: 1.54rem;
    height: 1.54rem;
  }
  .list-pagination a.page-numbers.next,
  .list-pagination span.page-numbers.next {
    margin-left: 0.7rem;
  }
  .list-pagination a.page-numbers.prev,
  .list-pagination span.page-numbers.prev {
    margin-right: 0.7rem;
  }
}
@media (max-width: 780px) {
  .list-pagination {
    padding-top: 4rem;
  }
}

.breadcrumb {
  --gap: 0.8rem;
  display: flex;
  flex-wrap: wrap;
  gap: var(--gap);
  list-style: none;
  margin: 0;
  padding: 0;
}
.breadcrumb li, .breadcrumb a {
  font-size: 2rem;
  font-weight: 500;
  line-height: 1;
}
.breadcrumb li {
  display: flex;
}
.breadcrumb a {
  display: block;
  transition: opacity 0.3s ease;
}
.breadcrumb a:hover {
  opacity: 0.6;
}
.breadcrumb li:not(:last-child)::after {
  font-family: "Pretendard Variable", sans-serif;
  content: "→";
  margin-left: var(--gap);
}
@media (max-width: 1024px) {
  .breadcrumb {
    --gap: 0.5rem;
  }
  .breadcrumb li, .breadcrumb a {
    font-size: 1.6rem;
  }
}

.search-list mark {
  text-decoration: none;
  background: transparent;
  color: inherit;
}

.empty-text {
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  min-height: 80rem;
  font-size: 2.2rem;
  font-weight: 700;
  line-height: 1.5;
}

#landingScroll {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 1.2rem;
  position: fixed;
  bottom: 2rem;
  left: 0;
  right: 0;
  width: -moz-max-content;
  width: max-content;
  margin-inline: auto;
  padding: 1.8rem 0.9rem 1.2rem;
  border: none;
  border-radius: 3rem;
  background: rgba(0, 0, 0, 0.7);
  color: #fff;
  font-size: 1.5rem;
  font-weight: 450;
  cursor: pointer;
  z-index: 60;
  opacity: 0;
  pointer-events: none;
  animation: landing-scroll-bounce 1.8s ease-in-out infinite;
  transition: opacity 0.3s ease;
}
#landingScroll.is-visible {
  opacity: 1;
  pointer-events: auto;
}
#landingScroll::after {
  content: "";
  display: block;
  width: 3rem;
  height: 2.4rem;
  background-image: url("assets/images/arrow_scroll.svg");
  background-size: 100% auto;
  background-repeat: no-repeat;
  background-position: center center;
}
@media (max-width: 1024px) {
  #landingScroll {
    width: 5.3rem;
    height: 5.3rem;
    gap: 0.6rem;
    bottom: 1.7rem;
    padding: 0;
    font-size: 1.2rem;
    background: rgba(0, 0, 0, 0.65);
  }
  #landingScroll::after {
    width: 2.4rem;
    height: 1.2rem;
    background-image: url("assets/images/arrow_scroll_mo.svg");
    background-position: center bottom;
    filter: brightness(0) invert(1);
  }
}

@keyframes landing-scroll-bounce {
  0%, 100% {
    transform: translate3d(0, 0, 0);
  }
  50% {
    transform: translate3d(0, -0.6rem, 0);
  }
}
@media (prefers-reduced-motion: reduce) {
  #landingScroll {
    animation: none;
    transition: none;
  }
}
/*
 * 소프트 내비게이션 화면 전환 (assets/js/nav/router.js).
 *
 * 순서는 셋이다 — 이동 트리거 → 기존 화면 페이드 아웃 → 새 화면 페이드 인. Swup 이
 * `animationSelector` 로 지정한 요소의 CSS 전환이 끝날 때까지 다음 단계로 넘어가지 않으므로,
 * 여기서 시간을 정하면 그대로 지켜진다.
 *
 * Swup 이 `<html>` 에 붙이는 클래스로 단계를 가른다(`animationScope: 'html'`).
 *   is-changing   이동이 시작되고 끝날 때까지 계속 붙어 있다 → 전환 자체를 여기서 켠다
 *   is-animating  페이드가 걸려 있어야 하는 구간(떠날 때 · 새 화면이 들어오기 직전) → 투명
 *   to-list       목록 안쪽 이동(필터·페이지 번호)
 *
 * ── 페이드하는 범위 ─────────────────────────────────────────────────────────────
 * 페이지 이동   `[data-soft-nav]`  본문 전체
 * 목록 이동     `#post-list`       결과 목록만
 *
 * 목록 이동에서 갈아 끼우는 범위는 `[data-ajax-list]` 다 — 필터의 활성 표시도 서버가 새로
 * 내려 준 것으로 바뀌어야 하기 때문이다. 하지만 **페이드는 결과 목록에만** 건다. 필터까지
 * 함께 흐려지면 방금 누른 버튼이 사라졌다 나타나 "내가 누른 것이 먹었나" 가 흐려지고,
 * "제자리에서 목록만 바뀐다" 는 느낌도 함께 사라진다. 필터는 그 자리에 그대로 있고 활성
 * 표시만 즉시 옮겨 가는 편이 조작에 대한 반응으로 읽힌다.
 *
 * 파티클 캔버스는 이 범위 밖(문서 셸)이라 페이드에 딸려 가지 않는다 — "씬은 이어지고 본문만
 * 바뀐다" 가 그대로 보인다. 등급이 바뀌는 이동에서만 캔버스도 함께 페이드한다(_particle.scss).
 */
html.is-changing:not(.to-list) [data-soft-nav],
html.is-changing.to-list #post-list {
  transition: opacity var(--page-fade, 0.25s) ease;
  pointer-events: none;
}

html.is-animating:not(.to-list) [data-soft-nav],
html.is-animating.to-list #post-list {
  opacity: 0;
}

/*
 * 모션을 줄이도록 설정한 환경에서는 페이드 없이 곧바로 바꾼다.
 * Swup 은 전환이 없으면 기다릴 것도 없다고 보고 즉시 넘어간다.
 */
@media (prefers-reduced-motion: reduce) {
  html.is-changing [data-soft-nav],
  html.is-changing #post-list {
    transition: none;
  }
}
/*
 * 본문을 갈아 끼운 뒤 초점을 옮길 대상 (Swup a11y-plugin).
 *
 * 플러그인이 새 화면의 첫 제목에 `tabindex="-1"` 을 붙여 초점을 옮긴다. 옮기지 않으면 초점이
 * 사라진 링크에 남아 문서 처음으로 튕기고 스크린 리더가 화면 전환을 알 수 없다. 다만 마우스
 * 사용자에게 큰 사각 테두리가 보일 이유는 없으므로, 프로그램이 옮긴 초점의 테두리만 지운다.
 * `tabindex="-1"` 은 탭 순서에 들지 않으므로 키보드 초점 표시는 그대로 남는다.
 */
[data-soft-nav] [tabindex="-1"]:focus,
[data-soft-nav][tabindex="-1"]:focus {
  outline: none;
}

/* ----- Global Styles End ----- */
/* Custom Styles */
/*
 * 모바일 메뉴가 열린 동안 뒤 페이지 스크롤 잠금 (assets/js/ui/menu-button.js 가 body 에 `menu-open` 을 붙인다).
 * 셋을 함께 거는 이유 —
 *   overflow            : 문서 스크롤(휠·스크롤바·키보드)
 *   touch-action        : iOS 는 overflow 만으로 터치 팬이 멈추지 않는다
 *   overscroll-behavior : 잠긴 상태에서의 고무줄 반동
 * 브랜드 랜딩도 스크롤 주체가 문서(`.index-landing` 은 더 이상 자체 스크롤 컨테이너가 아니다,
 * styles/_brand.scss 참고)라 예외 없이 여기서 함께 막힌다.
 *
 * 메뉴 자체가 tablet 이하 전용이므로 잠금도 같은 범위로 묶는다 —
 * 메뉴를 연 채 창을 넓히면 잠금이 저절로 풀린다(헤더 배경도 같은 범위라 함께 사라진다).
 */
@media (max-width: 1024px) {
  body.menu-open {
    overflow: hidden;
    touch-action: none;
    overscroll-behavior: none;
  }
}
/*
 * 어두운 배경 위의 헤더 — 글자·로고·아이콘을 흰쪽으로 뒤집는다.
 *
 * 쓰는 곳이 둘이라 믹스인으로 뺐다.
 *   1) 뒤 배경을 재서 붙는 `header--on-dark` (ui/header-contrast.js) — 배경이 투명할 때만이다.
 *   2) 홈의 컴팩트 헤더 — 헤더가 스스로 검정 배경을 깔므로 판정과 무관하게 늘 흰색이다.
 */
.header-site {
  background-color: transparent;
}
.header-site .main-nav-item-link,
.header-site .btn-lang,
.header-site .header-site-lang-sep {
  color: #0a0a0a;
  transition: color 0.3s ease;
}
.header-site .btn-lang[aria-pressed=true],
.header-site .main-nav-item-link.is-active {
  text-decoration: underline;
  text-decoration-thickness: 0.1rem;
  text-underline-offset: 0.4rem;
}
.header-site .header-site-logo,
.header-site .header-nav-item-sns a img {
  filter: brightness(0);
  transition: filter 0.3s ease;
}
.header-site .header-site-logo-anim {
  display: block;
  --logo-intro-bracket-h: 10.3rem;
  --logo-intro-bracket-gap: 3.9rem;
}
@media (max-width: 1024px) {
  .header-site .header-site-logo-anim {
    --logo-intro-bracket-h: 6.1rem;
    --logo-intro-bracket-gap: 2.3rem;
  }
}
.header-site .header-site-logo {
  display: block;
  height: 4.4rem;
  width: auto;
  overflow: visible;
  transition: height 0.3s ease;
}
@media (max-width: 1024px) {
  .header-site .header-site-logo {
    height: 2.6rem;
  }
}
.header-site .main-nav-search {
  display: none;
}
.header-site .header-search {
  width: 20rem;
}
@media (max-width: 1024px) {
  .header-site .header-search {
    width: 12rem;
  }
}
.header-site .header-search form.searchwp-form {
  position: relative;
}
.header-site .header-search form.searchwp-form .swp-flex--col,
.header-site .header-search form.searchwp-form .swp-flex--row,
.header-site .header-search form.searchwp-form .searchwp-form-input-container {
  gap: 1.2rem;
  flex-wrap: nowrap;
  align-items: center;
}
.header-site .header-search form.searchwp-form .swp-select,
.header-site .header-search form.searchwp-form .swp-toggle,
.header-site .header-search form.searchwp-form .searchwp-form-advanced-filters,
.header-site .header-search form.searchwp-form .searchwp-form-quick-search {
  display: none !important;
}
.header-site .header-search form.searchwp-form input.swp-input--search {
  width: 100%;
  height: 3.6rem;
  min-height: 0;
  padding: 0;
  padding-right: 3.2rem;
  border: 0 !important;
  border-bottom: 1px solid rgba(10, 10, 10, 0.45) !important;
  border-radius: 0 !important;
  background: transparent !important;
  box-shadow: none;
  color: #0a0a0a !important;
  font-size: 2rem !important;
  font-weight: 700;
  line-height: 1.3;
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  transition: border-color 0.3s ease;
}
@media (max-width: 1024px) {
  .header-site .header-search form.searchwp-form input.swp-input--search {
    font-size: 1.6rem !important;
    padding-bottom: 0.4rem !important;
  }
}
.header-site .header-search form.searchwp-form input.swp-input--search::-moz-placeholder {
  color: rgba(10, 10, 10, 0.45);
}
.header-site .header-search form.searchwp-form input.swp-input--search::placeholder {
  color: rgba(10, 10, 10, 0.45);
}
.header-site .header-search form.searchwp-form input.swp-input--search:focus {
  outline: none;
  box-shadow: none;
}
.header-site .header-search form.searchwp-form input.swp-input--search::-webkit-search-decoration, .header-site .header-search form.searchwp-form input.swp-input--search::-webkit-search-cancel-button, .header-site .header-search form.searchwp-form input.swp-input--search::-webkit-search-results-button, .header-site .header-search form.searchwp-form input.swp-input--search::-webkit-search-results-decoration {
  -webkit-appearance: none;
          appearance: none;
}
.header-site .header-search form.searchwp-form input[type=submit].swp-button {
  position: absolute;
  top: 50%;
  right: 0;
  transform: translateY(-50%);
  z-index: 1;
  flex: none;
  width: 1.9rem;
  height: 1.9rem;
  min-height: 0;
  padding: 0 !important;
  border: 0 !important;
  border-radius: 0 !important;
  box-shadow: none;
  background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='19' height='19' viewBox='0 0 19 19' fill='none'%3E%3Cpath d='M2.19629 2.19629C5.12523 -0.732208 9.87393 -0.732429 12.8027 2.19629C15.4917 4.88526 15.7093 9.10658 13.4609 12.0469L18.8135 17.3994L17.3994 18.8135L12.0469 13.4609C9.10669 15.7099 4.88555 15.4926 2.19629 12.8037C-0.732643 9.87478 -0.732643 5.12522 2.19629 2.19629ZM11.3887 3.61133C9.24079 1.46344 5.75824 1.46344 3.61035 3.61133C1.46257 5.75919 1.46257 9.24081 3.61035 11.3887C5.75824 13.5366 9.24079 13.5366 11.3887 11.3887C13.536 9.24089 13.536 5.75911 11.3887 3.61133Z' fill='white'/%3E%3C/svg%3E") no-repeat center/contain !important;
  color: transparent !important;
  font-size: 0 !important;
  text-indent: -9999px;
  overflow: hidden;
  cursor: pointer;
  /* 위 배경 아이콘이 흰색이라 기본(밝은 배경) 상태에서 반전시킨다 */
  filter: brightness(0);
  transition: filter 0.3s ease;
}
.header-site .header-search form.searchwp-form input[type=submit].swp-button:hover, .header-site .header-search form.searchwp-form input[type=submit].swp-button:focus {
  background-color: transparent !important;
}
.header-site.header-site--scroll.is-anim-ready {
  transition: transform 0.4s cubic-bezier(0.22, 0.61, 0.36, 1), background-color 0.3s ease;
}
.header-site.header-site--scroll.is-anim-ready > div {
  transition: height 0.3s ease;
}
.header-site.header-site--scroll.is-compact {
  --header-height: var(--header-height-compact);
  background-color: rgba(255, 255, 255, 0.8);
  /*
   * 메뉴가 열린 동안에는 흐림을 걸지 않는다.
   *
   * `backdrop-filter` 는 `transform` 과 마찬가지로 헤더를 fixed 자손의 기준 상자로
   * 만들어 버린다. 그러면 화면 전체를 덮어야 할 메뉴 배경(아래 tablet 의 `&::before` —
   * `position: fixed; inset: 0`)이 헤더 높이만큼만 깔린다. `.is-hidden` 의 transform 을
   * `:not(.menu-open)` 으로 막아 둔 것과 같은 이유이고, 어차피 메뉴가 열리면 그 배경이
   * 화면을 덮으므로 흐릴 것도 없다.
   */
}
.header-site.header-site--scroll.is-compact:not(.menu-open) {
  backdrop-filter: blur(5px);
}
@media (min-width: 1025px) {
  .header-site.header-site--scroll.is-compact .header-site-logo {
    height: 3.6rem;
  }
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact {
  /*
   * 홈은 씬 배경이 거의 검정(`--scene-bg-home`)이라 최상단의 투명 헤더가 이미 검정으로
   * 읽히고, 로고·글자는 명암 판정으로 흰색이 되어 있다(`header--on-dark`). 컴팩트에서
   * 흰 배경으로 뒤집히면 그 흐름이 끊기므로 배경을 검정으로 바꿔 최상단과 이어 붙인다.
   * 화면 판정은 `body:has()` 로 한다 — 헤더는 소프트 내비게이션 교체 범위 밖이라 자기
   * 마크업에 화면 값이 없고, 본문 래퍼의 `data-page` 를 읽는 것이 유일한 방법이다
   * (같은 값으로 `--scene-bg-home` 도 고른다).
   *
   * 흰 글자·로고는 명암 판정에 기대지 않고 여기서 직접 준다. 헤더가 자기 배경을 깔았으니
   * 뒤로 무엇이 지나가든(홈에는 흰 인사이트 섹션이 있다) 흰색이어야 하는데, 판정 쪽은
   * `:not(.is-compact)` 로 컴팩트를 아예 보지 않기 때문이다.
   */
  background-color: rgba(0, 0, 0, 0.8);
  /*
   * 색 뒤집기만 메뉴가 닫힌 동안으로 제한한다. 메뉴가 열리면 화면 전체가 밝은 패턴
   * 배경으로 덮이므로(아래 tablet 의 `&::before`) 로고·메뉴 버튼은 그 위의 검정이어야
   * 한다. 배경색은 그 위에서 가려지니 굳이 되돌리지 않는다 — 되돌리면 메뉴 배경이
   * 페이드되는 0.3s 동안 검정이 흰색으로 번쩍인다.
   */
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .main-nav-item-link,
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .btn-lang,
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .header-site-lang-sep {
  color: #fff;
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .header-site-logo,
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .header-nav-item-sns a img {
  filter: none;
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .header-search form.searchwp-form input.swp-input--search {
  border-bottom-color: #fff !important;
  color: #fff !important;
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .header-search form.searchwp-form input.swp-input--search::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .header-search form.searchwp-form input.swp-input--search::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .header-search form.searchwp-form input[type=submit].swp-button {
  filter: none;
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .menu-button {
  background-color: #fff !important;
}
body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .menu-button::after, body:has([data-soft-nav][data-page=home]) .header-site.header-site--scroll.is-compact:not(.menu-open) .menu-button::before {
  background-color: var(--black);
}
.header-site.header-site--scroll.is-hidden:not(.menu-open) {
  transform: translateY(-100%);
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .main-nav-item-link,
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .btn-lang,
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .header-site-lang-sep {
  color: #fff;
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .header-site-logo,
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .header-nav-item-sns a img {
  filter: none;
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .header-search form.searchwp-form input.swp-input--search {
  border-bottom-color: #fff !important;
  color: #fff !important;
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .header-search form.searchwp-form input.swp-input--search::-moz-placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .header-search form.searchwp-form input.swp-input--search::placeholder {
  color: rgba(255, 255, 255, 0.5);
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .header-search form.searchwp-form input[type=submit].swp-button {
  filter: none;
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .menu-button {
  background-color: #fff !important;
}
.header-site.header--on-dark:not(.menu-open):not(.is-compact) .menu-button::after, .header-site.header--on-dark:not(.menu-open):not(.is-compact) .menu-button::before {
  background-color: var(--black);
}
.header-site .menu-button {
  display: none;
  position: relative;
  width: 2.6rem;
  height: 2.6rem;
  background-color: var(--black) !important;
}
.header-site .menu-button::after, .header-site .menu-button::before {
  content: "";
  display: block;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 1.4rem;
  height: 2px;
  background-color: var(--bg-gray);
  transition: transform 0.3s ease;
  transform-origin: center center;
}
.header-site .menu-button::after {
  transform: translate(-50%, -50%) rotate(90deg);
}
@media (max-width: 1024px) {
  .header-site {
    /*
     * 메뉴 배경 — 헤더 바가 아니라 화면 전체를 덮는다.
     * 헤더 박스를 키우는 대신 fixed 의사요소로 뒤에 깔기만 한다. 헤더 높이를 기준으로
     * 재거나 배치하는 곳(ui/header-contrast.js 명암 판정의 rect.bottom, 아래 .main-nav 의 top)이
     * 그대로 유지되기 때문. z-index: -1 은 헤더가 만든 쌓임 맥락(fixed + z-50) 안이라
     * 헤더 내용 뒤·페이지 위에 놓인다.
     * 닫힘 상태에서 화면 전체가 탭을 가로채지 않도록 visibility 로 함께 끈다(.main-nav 와 같은 방식).
     */
    /*
     * 배경 위에 얹는 플러스 패턴 — 굵기 1px, 가로·세로 7px, 플러스 사이 간격 2px.
     * 그라디언트로는 "선분"이 아니라 화면을 가로지르는 선밖에 못 만들어(한 축만 자를 수 있다)
     * 타일 한 칸을 그린 SVG 를 쓴다. 색은 #949494 — data URI 안에서는 변수를 못 쓴다.
     * --pattern-* 토큰(#939393)과 채널당 1 차이라 눈으로는 같지만 토큰 값은 아니다.
     *
     * 좌표는 정수라 1px 획이 픽셀 경계에 딱 맞는다(반 픽셀이면 두 픽셀에 걸쳐 흐려진다).
     * 길이가 홀수(7 = 팔 3 + 가운데 1 + 팔 3)라 가운데 픽셀을 기준으로 정확히 대칭이다.
     * 값을 바꾸려면 SVG 의 width·height 와 rect 좌표를 함께 고친다:
     *   칸 = 길이 + 간격 = 9   ·   여백 = 간격/2 = 1
     *   가로획 x = 여백, y = 여백 + (길이 - 1)/2   ·   세로획 x = 여백 + (길이 - 1)/2, y = 여백
     * 간격이 홀수면 여백이 반 픽셀이 되어 획이 흐려진다 — 짝수로 둘 것.
     * background-size 를 두지 않는 것도 같은 이유 — 늘리면 플러스까지 같이 커진다.
     */
  }
  .header-site::before {
    content: "";
    position: fixed;
    inset: 0;
    z-index: -1;
    background-color: var(--bg-gray);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='9' fill='%23949494' fill-opacity='1'%3E%3Crect x='1' y='4' width='7' height='1'/%3E%3Crect x='4' y='1' width='1' height='7'/%3E%3C/svg%3E");
    background-repeat: repeat;
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .header-site .menu-button {
    display: block;
  }
  .header-site .header-search {
    display: none;
  }
  .header-site .header-nav-item {
    opacity: 1;
    transition: opacity 0.3s ease;
  }
  .header-site .main-nav {
    position: fixed;
    top: var(--header-height);
    right: var(--cntr);
    opacity: 0;
    visibility: hidden;
    transition: opacity 0.3s ease, visibility 0.3s ease;
  }
  .header-site .main-nav ul {
    flex-direction: column;
    align-items: flex-end;
    gap: 0.2rem;
    margin-top: -1.1rem;
  }
  .header-site .main-nav .main-nav-item-link {
    font-size: 2.9rem;
    line-height: 1;
    font-weight: 500;
    background-color: var(--black);
    color: var(--bg-gray) !important;
    padding: 0.9rem 0.8rem;
    padding-right: 0.7rem;
  }
  .header-site .main-nav .main-nav-item-link.is-active {
    text-decoration: none;
  }
  .header-site .main-nav .main-nav-search {
    display: block;
    width: 18.8rem;
    margin-top: 0.2rem;
    background-color: var(--black);
    padding: 0.9rem 0.8rem;
    padding-right: 0.7rem;
  }
  .header-site .main-nav .main-nav-search form.searchwp-form input.swp-input--search {
    height: 2.9rem;
    min-width: 0;
    padding: 0 !important;
    padding-right: 3rem !important;
    border: 0 !important;
    color: var(--bg-gray) !important;
    font-size: 2.9rem !important;
    font-weight: 500;
    line-height: 1;
  }
  .header-site .main-nav .main-nav-search form.searchwp-form input.swp-input--search::-moz-placeholder {
    color: var(--bg-gray);
    opacity: 0.5;
  }
  .header-site .main-nav .main-nav-search form.searchwp-form input.swp-input--search::placeholder {
    color: var(--bg-gray);
    opacity: 0.5;
  }
  .header-site .main-nav .main-nav-search form.searchwp-form input[type=submit].swp-button {
    width: 2.2rem;
    height: 2.2rem;
    filter: brightness(0.83);
  }
  .header-site.menu-open::before {
    opacity: 1;
    visibility: visible;
  }
  .header-site.menu-open .header-nav-item:not(.header-nav-item-menu) {
    opacity: 0;
  }
  .header-site.menu-open .main-nav {
    opacity: 1;
    visibility: visible;
  }
  .header-site.menu-open .menu-button::after {
    transform: translate(-50%, -50%) rotate(45deg);
  }
  .header-site.menu-open .menu-button::before {
    transform: translate(-50%, -50%) rotate(-45deg);
  }
}

.activity-card .image-wrap {
  position: relative;
}
.activity-card .external-overlay {
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 0.3s ease;
  pointer-events: none;
}
.activity-card .external-overlay::after {
  content: "";
  display: block;
  width: 4.4rem;
  height: 4.4rem;
  background-color: var(--white);
  -webkit-mask: url("assets/images/arrow_link.svg") no-repeat center/contain;
  mask: url("assets/images/arrow_link.svg") no-repeat center/contain;
}
@media (max-width: 1024px) {
  .activity-card .external-overlay::after {
    width: 2.8rem;
    height: 2.8rem;
  }
}
@media (hover: hover) {
  .activity-card a:hover .external-overlay,
  .activity-card a:focus-visible .external-overlay {
    opacity: 1;
  }
}
.activity-card .external-inline {
  content: "";
  display: inline-block;
  vertical-align: middle;
  flex-shrink: 0;
  width: calc(0.85em * var(--dynamic-scale, 1));
  height: calc(0.85em * var(--dynamic-scale, 1));
  margin-left: calc(0.4em * var(--dynamic-scale, 1));
  background-color: currentColor;
  -webkit-mask-image: url("assets/images/arrow_link.svg");
          mask-image: url("assets/images/arrow_link.svg");
  -webkit-mask-size: contain;
          mask-size: contain;
  -webkit-mask-position: center center;
          mask-position: center center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  display: none;
  margin-top: -0.3rem;
}
@media (hover: none) {
  .activity-card .external-inline {
    display: inline-block;
  }
}

.separate-containers .site-main {
  margin-top: 0 !important;
  margin-bottom: 0 !important;
}

@keyframes site-popup-fade-in {
  from {
    opacity: 0;
  }
  to {
    opacity: 1;
  }
}
@keyframes site-popup-fade-out {
  from {
    opacity: 1;
  }
  to {
    opacity: 0;
  }
}
.site-popup-dialog {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: min(80rem, 100vw - var(--cntr) * 2);
  max-width: none;
  max-height: min(97rem, 100 * var(--vh) - var(--cntr) * 2);
  padding: 0;
  background-color: transparent;
  color: var(--black);
  overflow: visible;
  border: none;
  outline: none;
}
.site-popup-dialog[open] {
  animation: site-popup-fade-in 500ms cubic-bezier(0, 0, 0.58, 1) both;
}
.site-popup-dialog::backdrop {
  background-color: rgba(0, 0, 0, 0.5);
  backdrop-filter: blur(3px);
}
.site-popup-dialog[open]::backdrop {
  animation: popup-button-backdrop-in 500ms cubic-bezier(0, 0, 0.58, 1) both;
}
.site-popup-dialog[open].is-closing {
  animation: site-popup-fade-out 500ms cubic-bezier(0.42, 0, 1, 1) both;
}
.site-popup-dialog[open].is-closing::backdrop {
  animation: popup-button-backdrop-out 500ms cubic-bezier(0.42, 0, 1, 1) both;
}
@media (prefers-reduced-motion: reduce) {
  .site-popup-dialog[open], .site-popup-dialog[open]::backdrop, .site-popup-dialog[open].is-closing, .site-popup-dialog[open].is-closing::backdrop {
    animation: none;
  }
}

.site-popup-panel {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 3.2rem;
  max-height: inherit;
}

.site-popup-actions {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
  flex-shrink: 0;
}

.site-popup-hide-today {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  height: 5.6rem;
  padding: 0;
  border: none;
  background: none;
  color: var(--white);
  font-size: 1.8rem;
  font-weight: 500;
  line-height: 1;
  text-align: left;
  cursor: pointer;
  transition: opacity 0.3s ease;
}
.site-popup-hide-today:hover, .site-popup-hide-today:focus-visible {
  opacity: 0.7;
}

.site-popup-close {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  width: 5.6rem;
  height: 5.6rem;
  padding: 1.4rem;
  border: none;
  border-radius: 50%;
  background-color: var(--bg-gray) !important;
  color: var(--black);
  cursor: pointer;
  transition: color 0.3s ease, opacity 0.3s ease;
}
.site-popup-close:hover, .site-popup-close:focus-visible {
  background-color: var(--bg-gray) !important;
  color: var(--black);
  opacity: 0.7;
}
.site-popup-close .icon-close {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
}

.site-popup-body {
  min-height: 0;
  overflow: hidden;
}

.site-popup-banner {
  display: block;
}
.site-popup-banner .site-popup-image {
  display: block;
  width: 100%;
  height: auto;
  max-height: calc(100 * var(--vh) - var(--cntr) * 2 - 5.6rem - 3.2rem);
  -o-object-fit: contain;
     object-fit: contain;
  -o-object-position: center top;
     object-position: center top;
  vertical-align: top;
}

@media (max-width: 1024px) {
  .site-popup-dialog {
    width: calc(100vw - var(--cntr) * 2);
  }
  .site-popup-panel {
    gap: 1.2rem;
  }
  .site-popup-hide-today {
    height: 4.4rem;
    font-size: 1.4rem;
  }
  .site-popup-close {
    width: 4.4rem;
    height: 4.4rem;
    padding: 1.1rem;
  }
  .site-popup-banner .site-popup-image {
    max-height: calc(100 * var(--vh) - var(--cntr) * 2 - 4.4rem - 1.2rem);
  }
}
.page-insights,
.page-events,
.page-activities,
.page-search {
  min-height: calc(100vh - var(--footer-height));
}

@media (max-width: 1024px) {
  .page-insights .insight-card-tags {
    position: absolute;
    bottom: 0;
    right: 0;
  }
}

.page-search .image-wrap img {
  contain-intrinsic-size: 24rem auto;
}

/* ----- Custom Styles End ----- */