/* ===== 통합 베이스 (모든 섹션 공통) ===== */
    *,
    *::before,
    *::after {
      box-sizing: border-box
    }

    /* Lenis 사용 시 native smooth 와 충돌하므로 auto 필수 */
    html {
      scroll-behavior: auto;
      overscroll-behavior-y: none
    }

    body {
      margin: 0;
      padding: 0;
      background: #000;
      color: #EFECE4;
      font-family: "Space Grotesk", system-ui, sans-serif;
      -webkit-font-smoothing: antialiased;
      overflow-x: hidden;
    }

    img {
      display: block;
      max-width: 100%
    }

    .block {
      position: relative
    }

    /* ===== Lenis(부드러운 스크롤) 필수 스타일 ===== */
    html.lenis,
    html.lenis body {
      height: auto
    }

    .lenis.lenis-smooth {
      scroll-behavior: auto !important
    }

    .lenis.lenis-smooth [data-lenis-prevent] {
      overscroll-behavior: contain
    }

    .lenis.lenis-stopped {
      overflow: hidden
    }

    .lenis.lenis-smooth iframe {
      pointer-events: none
    }

    /* ===== hero.html ===== */
    .block-hero {
      --bg: #060606;
      --ink: #EFECE4;
      --muted: rgba(239, 236, 228, .46);
      --faint: rgba(239, 236, 228, .26);
      --line: rgba(239, 236, 228, .14);
      --serif: "Sora", system-ui, sans-serif;
      --sans: "Sora", "Space Grotesk", system-ui, sans-serif;
      --mono: "JetBrains Mono", ui-monospace, monospace;
      --kr: "Pretendard", "Space Grotesk", sans-serif;
      --gut: clamp(16px, 3.4vw, 46px);
    }

    .hero {
      position: relative;
      width: 100vw;
      height: 100vh;
      height: 100svh;
      overflow: hidden
    }

    /* ---- WebGL canvas ---- */
    #gl {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      display: block
    }

    /* ---- texture / grain / vignette overlays ---- */
    .grain {
      position: absolute;
      inset: 0;
      pointer-events: none;
      opacity: .07;
      mix-blend-mode: overlay;
      z-index: 2;
      background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='140' height='140'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>")
    }

    .vignette {
      position: absolute;
      inset: 0;
      pointer-events: none;
      z-index: 2;
      background:
        radial-gradient(120% 90% at 50% 38%, transparent 40%, rgba(0, 0, 0, .55) 100%),
        linear-gradient(180deg, rgba(0, 0, 0, .42) 0%, transparent 22%, transparent 64%, rgba(0, 0, 0, .66) 100%)
    }

    /* ---- editorial overlay ---- */
    .ui {
      position: absolute;
      inset: 0;
      z-index: 3;
      pointer-events: none
    }

    .ui a,
    .ui button {
      pointer-events: auto
    }

    .mono {
      font-family: var(--mono);
      font-weight: 400;
      letter-spacing: .04em;
      text-transform: uppercase;
      font-size: clamp(9px, .78vw, 11px);
      color: var(--muted)
    }

    .tick {
      display: inline-block;
      width: 18px;
      height: 1px;
      background: var(--faint);
      vertical-align: middle;
      margin: 0 .55em
    }

    /* top row */
    .top {
      position: absolute;
      top: var(--gut);
      left: var(--gut);
      right: var(--gut);
      display: flex;
      justify-content: space-between;
      align-items: flex-start;
      gap: 14px
    }

    .top .idx {
      font-family: var(--mono);
      font-size: clamp(9px, .78vw, 11px);
      color: var(--faint)
    }

    .brand {
      font-family: var(--sans);
      font-weight: 600;
      font-size: clamp(11px, 1vw, 13px);
      letter-spacing: .34em;
      text-transform: uppercase;
      color: var(--ink)
    }

    .brand small {
      display: block;
      margin-top: 6px;
      font-family: var(--mono);
      font-weight: 400;
      font-size: 9.5px;
      letter-spacing: .18em;
      color: var(--faint)
    }

    /* center headline block */
    .stage {
      position: absolute;
      left: var(--gut);
      bottom: clamp(86px, 16vh, 160px);
      max-width: min(74vw, 900px)
    }

    .over {
      font-family: var(--mono);
      font-size: clamp(10px, .85vw, 12px);
      letter-spacing: .22em;
      text-transform: uppercase;
      color: var(--muted);
      margin-bottom: 18px
    }

    .head {
      font-family: var(--serif);
      font-weight: 800;
      line-height: .92;
      letter-spacing: -.015em;
      font-size: clamp(48px, 9.4vw, 138px);
      text-transform: none
    }

    .head .l2 {
      display: block;
      margin-left: .08em;
      color: var(--ink)
    }

    .head .l2 i {
      font-style: normal;
      -webkit-text-stroke: 1px var(--ink);
      color: transparent;
      text-stroke: 1px var(--ink)
    }

    .sub {
      font-family: var(--kr);
      font-weight: 400;
      font-size: clamp(12px, 1.1vw, 15px);
      color: var(--muted);
      margin-top: 22px;
      letter-spacing: .01em;
      line-height: 1.5;
      max-width: 30ch
    }

    .fade {
      transition: opacity .5s ease, transform .5s ease
    }

    .fade.out {
      opacity: 0;
      transform: translateY(8px)
    }

    /* counter / controls */
    .counter {
      position: absolute;
      left: var(--gut);
      bottom: calc(var(--gut) + 2px);
      display: flex;
      align-items: center;
      gap: 16px
    }

    .counter button {
      background: none;
      border: none;
      color: var(--muted);
      cursor: pointer;
      font-family: var(--mono);
      font-size: 15px;
      line-height: 1;
      padding: 4px;
      transition: color .3s, transform .3s
    }

    .counter button:hover {
      color: var(--ink);
      transform: scale(1.18)
    }

    .counter .num {
      font-family: var(--mono);
      font-size: clamp(11px, 1vw, 13px);
      letter-spacing: .16em;
      color: var(--ink);
      min-width: 74px;
      text-align: center
    }

    .counter .num b {
      font-weight: 500
    }

    .counter .num span {
      color: var(--faint)
    }

    /* progress bar */
    .bar {
      position: absolute;
      left: var(--gut);
      right: var(--gut);
      bottom: calc(var(--gut) - 8px);
      height: 1px;
      background: var(--line)
    }

    .bar i {
      position: absolute;
      left: 0;
      top: 0;
      height: 100%;
      width: 0;
      background: var(--ink);
      opacity: .7
    }

    /* scattered labels */
    .scatter {
      position: absolute;
      font-family: var(--mono);
      font-size: clamp(9px, .74vw, 11px);
      letter-spacing: .06em;
      text-transform: uppercase;
      color: var(--faint);
      white-space: nowrap
    }

    .s-vr {
      writing-mode: vertical-rl
    }

    .s-rt {
      top: clamp(96px, 17vh, 150px);
      right: var(--gut);
      text-align: right;
      color: var(--muted)
    }

    .s-rt .row {
      margin-bottom: 11px
    }

    .s-side {
      right: calc(var(--gut) - 4px);
      top: 50%;
      transform: translateY(-50%) rotate(180deg);
      color: var(--faint);
      letter-spacing: .34em
    }

    .s-leftvr {
      left: calc(var(--gut) - 2px);
      top: 46%;
      transform: translateY(-50%);
      color: var(--faint);
      letter-spacing: .3em
    }

    .s-coord {
      right: var(--gut);
      bottom: calc(var(--gut) + 2px);
      text-align: right;
      color: var(--muted)
    }

    .s-coord .g {
      color: var(--faint)
    }

    /* scroll cue */
    .scroll {
      position: absolute;
      left: 50%;
      bottom: calc(var(--gut) - 2px);
      transform: translateX(-50%);
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8px;
      color: var(--muted)
    }

    .scroll .ln {
      width: 1px;
      height: 26px;
      background: linear-gradient(var(--faint), transparent);
      animation: drop 1.9s ease-in-out infinite
    }

    @keyframes drop {
      0% {
        transform: scaleY(.2);
        transform-origin: top;
        opacity: .2
      }

      50% {
        transform: scaleY(1);
        opacity: .9
      }

      100% {
        transform: scaleY(.2);
        transform-origin: bottom;
        opacity: .2
      }
    }

    /* responsive */
    @media (max-width:720px) {

      .s-rt,
      .s-side,
      .s-leftvr,
      .scroll {
        display: none
      }

      .stage {
        bottom: 118px;
        max-width: 88vw
      }

      .head {
        font-size: clamp(44px, 13vw, 76px)
      }

      .brand {
        letter-spacing: .22em
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .scroll .ln {
        animation: none
      }
    }

    /* loader */
    .boot {
      position: absolute;
      inset: 0;
      z-index: 5;
      background: var(--bg);
      display: flex;
      align-items: center;
      justify-content: center;
      transition: opacity .8s ease
    }

    .boot.gone {
      opacity: 0;
      pointer-events: none
    }

    .boot .b {
      font-family: var(--mono);
      font-size: 11px;
      letter-spacing: .3em;
      color: var(--muted)
    }

    /* ===== section1.html ===== */
    .block-contribution {
      --c-bg: #0a0a0a;
      --c-fog: #f1f0ee;
      --c-dim: #505050;
      --c-line: #3b3b3b;
      --c-line-on: #6a6a6a;
      --ease: cubic-bezier(0.22, 1, 0.36, 1);
    }

    .contribution {
      position: relative;
      padding: 14vh 5.5vw 10vh;
      max-width: 1600px;
      margin: 0 auto;
      overflow: hidden;
    }

    .contribution-heading {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 600;
      font-size: clamp(2.6rem, 7vw, 6.5rem);
      line-height: 0.95;
      letter-spacing: -0.03em;
      margin: 0;
      display: flex;
      align-items: baseline;
      gap: 0.4em;
      position: relative;
      z-index: 3;
    }

    .contribution-heading .dot {
      display: inline-block;
      width: 0.18em;
      height: 0.18em;
      border-radius: 50%;
      background: var(--c-fog);
      transform: translateY(-0.06em);
    }

    .contribution-heading .reveal-mask {
      overflow: hidden;
      display: inline-block;
    }

    .contribution-heading .reveal-mask>span {
      display: inline-block;
      transform: translateY(110%);
      transition: transform 0.9s var(--ease);
    }

    .contribution.is-in .contribution-heading .reveal-mask>span {
      transform: translateY(0);
    }

    .contribution-list {
      margin: 9vh 0 0 auto;
      max-width: 74vw;
      font-family: "DM Mono", monospace;
      position: relative;
      z-index: 3;
    }

    .contribution-row {
      position: relative;
      display: block;
      width: 100%;
      cursor: pointer;
      text-decoration: none;
      color: inherit;
      padding-top: 3.2vh;
    }

    .contribution-row:first-child {
      padding-top: 0;
    }

    .contribution-top {
      display: flex;
      align-items: flex-end;
      justify-content: space-between;
      gap: 1rem;
      padding-bottom: 2.2vh;
    }

    .contribution-label {
      overflow: hidden;
      margin: 0;
      font-size: clamp(1.05rem, 2vw, 1.75rem);
      font-weight: 500;
      letter-spacing: -0.01em;
      color: var(--c-dim);
      transition: color 0.5s var(--ease);
      display: flex;
      align-items: center;
      gap: 0.7em;
    }

    .contribution-label .line {
      display: inline-block;
      transform: translateY(105%);
      opacity: 0;
      transition: transform 0.85s var(--ease), opacity 0.85s var(--ease);
    }

    .contribution.is-in .contribution-label .line {
      transform: translateY(0);
      opacity: 1;
    }

    .contribution-row:hover .contribution-label {
      color: var(--c-fog);
    }

    .contribution-arrow {
      display: inline-flex;
      width: 0;
      opacity: 0;
      transform: translateX(-8px);
      transition: width 0.45s var(--ease), opacity 0.45s var(--ease), transform 0.45s var(--ease);
      overflow: hidden;
    }

    .contribution-arrow svg {
      width: 1em;
      height: 1em;
      flex: none;
    }

    .contribution-row:hover .contribution-arrow {
      width: 1.2em;
      opacity: 1;
      transform: translateX(0);
    }

    .contribution-num {
      font-size: clamp(0.7rem, 1vw, 0.95rem);
      color: var(--c-dim);
      opacity: 0;
      transition: opacity 0.7s var(--ease) 0.15s, color 0.5s var(--ease);
      flex: none;
    }

    .contribution.is-in .contribution-num {
      opacity: 1;
    }

    .contribution-row:hover .contribution-num {
      color: var(--c-fog);
    }

    .contribution-divider {
      height: 1px;
      width: 100%;
      background: var(--c-line);
      transform: scaleX(0);
      transform-origin: left center;
      transition: transform 1s var(--ease), background 0.5s var(--ease);
    }

    .contribution.is-in .contribution-divider {
      transform: scaleX(1);
    }

    .contribution-row:hover .contribution-divider {
      background: var(--c-line-on);
    }

    .contribution-row:nth-child(1) .line,
    .contribution-row:nth-child(1) .contribution-divider {
      transition-delay: 0.05s;
    }

    .contribution-row:nth-child(2) .line,
    .contribution-row:nth-child(2) .contribution-divider {
      transition-delay: 0.15s;
    }

    .contribution-row:nth-child(3) .line,
    .contribution-row:nth-child(3) .contribution-divider {
      transition-delay: 0.25s;
    }

    .contribution-row:nth-child(4) .line,
    .contribution-row:nth-child(4) .contribution-divider {
      transition-delay: 0.35s;
    }

    /* ---------- Hover image preview (커서 따라다니는 프로젝트 이미지) ---------- */
    .contribution-preview {
      position: fixed;
      top: 0;
      left: 0;
      width: 26vw;
      max-width: 380px;
      min-width: 240px;
      aspect-ratio: 3 / 4;
      border-radius: 6px;
      overflow: hidden;
      pointer-events: none;
      z-index: 50;
      opacity: 0;
      transform: translate(-50%, -50%) scale(0.92);
      transition: opacity 0.5s var(--ease), transform 0.5s var(--ease);
      will-change: transform, opacity;
      box-shadow: 0 30px 80px rgba(0, 0, 0, 0.55);
    }

    .contribution-preview.is-visible {
      opacity: 1;
    }

    .contribution-preview img {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transition: opacity 0.4s var(--ease);
    }

    .contribution-preview img.is-active {
      opacity: 1;
    }

    @media (max-width: 1024px) {
      .contribution-list {
        max-width: 100%;
        margin-top: 7vh;
      }

      .contribution-preview {
        display: none;
      }

      /* 모바일/터치에서는 숨김 */
    }

    @media (max-width: 640px) {
      .contribution {
        padding: 11vh 6vw 8vh;
      }

      .contribution-num {
        display: none;
      }

      .contribution-label {
        font-size: 5vw;
      }
    }

    @media (prefers-reduced-motion: reduce) {

      .contribution-heading .reveal-mask>span,
      .contribution-label .line,
      .contribution-num,
      .contribution-divider {
        transition: none !important;
        transform: none !important;
        opacity: 1 !important;
      }

      .contribution-preview {
        transition: opacity 0.2s linear;
      }
    }

    /* ===== section2.html ===== */
    .block-gallery {
      --bg: #000;
      --txt: #fff;
      --accent: #22D3EE;
      /* 필요시 브랜드 컬러로 교체 */
      --font-body: "DM Sans", "Helvetica Neue", Arial, sans-serif;
      --font-disp: "Zalando Sans SemiExpanded", "DM Sans", sans-serif;
    }

    /* ─────────────────────────────────────────────
     배경: 갤러리 무드
     ① 검정 베이스  ② 느린 웨이브 그라데이션(원본 wavebg.mp4 대체)
     ③ 라디얼 글로우  ④ 필름 그레인(캔버스)  ⑤ 상하단 페이드
     ───────────────────────────────────────────── */
    .s3-gallery-section {
      position: relative;
      background: #000;
      isolation: isolate;
      /* ⚠️ overflow:hidden 금지 — 부모에 걸면 sticky 핀 고정이 깨짐.
       배경 블러 클리핑은 아래 .s3-bg 컨테이너가 따로 담당. */
    }

    /* 배경 전용 클리핑 박스: 블러가 섹션 밖으로 새는 것만 잘라줌 */
    .s3-bg {
      position: absolute;
      inset: 0;
      z-index: 0;
      overflow: hidden;
      pointer-events: none;
    }

    /* ② 웨이브 그라데이션 레이어 — mp4 없이 CSS만으로 은은하게 흐르게 */
    .bg-wave {
      position: absolute;
      inset: -20% -10%;
      z-index: 0;
      pointer-events: none;
      opacity: .5;
      mix-blend-mode: screen;
      background:
        radial-gradient(40% 55% at 22% 30%, rgba(34, 211, 238, .10) 0%, transparent 60%),
        radial-gradient(45% 60% at 80% 70%, rgba(120, 160, 200, .10) 0%, transparent 62%),
        radial-gradient(60% 70% at 50% 110%, rgba(200, 210, 215, .08) 0%, transparent 60%);
      filter: blur(40px);
      animation: waveDrift 24s ease-in-out infinite alternate;
    }

    @keyframes waveDrift {
      0% {
        transform: translate3d(0, 0, 0) scale(1)
      }

      50% {
        transform: translate3d(3%, -2%, 0) scale(1.08)
      }

      100% {
        transform: translate3d(-2%, 3%, 0) scale(1.04)
      }
    }

    /* ③ 좌하단 글로우 */
    .bg-glow {
      position: absolute;
      bottom: -15vh;
      left: -8vw;
      width: 60vw;
      height: 60vh;
      z-index: 0;
      background: radial-gradient(circle, rgba(200, 210, 215, .12) 0%, transparent 60%);
      filter: blur(60px);
      pointer-events: none;
    }

    /* ⑤ 상하단 페이드(섹션 경계 자연스럽게) */
    .s3-gallery-section::before,
    .s3-gallery-section::after {
      content: '';
      position: absolute;
      left: 0;
      width: 100%;
      height: clamp(96px, 18vh, 220px);
      pointer-events: none;
      z-index: 4;
    }

    .s3-gallery-section::before {
      top: 0;
      background: linear-gradient(180deg, rgba(0, 0, 0, .96) 0%, rgba(0, 0, 0, .72) 38%, rgba(0, 0, 0, 0) 100%);
    }

    .s3-gallery-section::after {
      bottom: 0;
      background: linear-gradient(0deg, rgba(0, 0, 0, .98) 0%, rgba(0, 0, 0, .78) 36%, rgba(0, 0, 0, 0) 100%);
    }

    /* ─── 헤더: 스크롤 중 화면 중앙에 핀 고정 ───
     sticky top:0 + height:100vh → 화면 정중앙에 붙음.
     z-index를 갤러리(2)보다 높이고 mix-blend-mode:difference 를 줘서
     이미지가 위로 흘러가도 글자가 계속 또렷하게 보임. */
    .gallery-header {
      position: sticky;
      top: 0;
      z-index: 6;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      height: 100vh;
      text-align: center;
      padding: 0 4vw;
      background: transparent;
      mix-blend-mode: difference;
      pointer-events: none;
    }

    .gallery-header-label {
      position: relative;
      z-index: 2;
      font-size: clamp(10px, 1vw, 13px);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .35);
      margin-bottom: 3vh;
    }

    .gallery-header-title {
      position: relative;
      z-index: 2;
      font-family: var(--font-disp);
      font-size: clamp(2.5rem, 8vw, 5rem);
      font-weight: 700;
      line-height: 1.05;
      text-transform: uppercase;
      margin: 0 0 1.5rem;
      letter-spacing: .02em;
    }

    .gallery-header-sub {
      position: relative;
      z-index: 2;
      font-size: clamp(10px, 1vw, 14px);
      letter-spacing: .2em;
      text-transform: uppercase;
      color: rgba(255, 255, 255, .3);
      margin: 0;
    }

    /* ─── 갤러리 그리드 (원본 비율 그대로) ─── */
    .pg-gallery {
      position: relative;
      z-index: 2;
      width: 100%;
      margin: 0 auto;
      padding: 0 4vw 22vh;
      display: grid;
      grid-template-columns: repeat(12, 1fr);
      column-gap: 2vw;
      row-gap: 12vw;
    }

    .pg-item {
      position: relative;
      display: flex;
      flex-direction: column;
      overflow: hidden
    }

    /* 이미지 래퍼: 등장 전 아래쪽으로 완전히 잘려있다 차오름 */
    .pg-img-wrap {
      position: relative;
      width: 100%;
      flex: 1;
      overflow: hidden;
      background: #0d0d0d;
      border-radius: 2px;
    }

    html.pg-anim-ready .pg-img-wrap {
      clip-path: inset(100% 0% 0% 0%);
    }

    /* 이미지는 래퍼보다 키워서(140%) 패럴럭스 여유 확보 → 검은 바닥 안 보임 */
    .pg-img-wrap img {
      position: absolute;
      top: -20%;
      left: 0;
      width: 100%;
      height: 140%;
      object-fit: cover;
      will-change: transform;
    }

    /* 호버 캡션(원본 mix-blend difference) */
    .pg-cap {
      position: absolute;
      inset: 0;
      z-index: 3;
      display: flex;
      flex-direction: column;
      justify-content: flex-end;
      padding: clamp(16px, 2vw, 30px);
      pointer-events: none;
      color: #fff;
      mix-blend-mode: difference;
    }

    .pg-cap small {
      font-size: .7rem;
      letter-spacing: .22em;
      text-transform: uppercase;
      opacity: .0;
      transform: translateY(14px);
      transition: opacity .5s, transform .5s;
    }

    .pg-cap strong {
      font-family: var(--font-disp);
      font-weight: 600;
      font-size: clamp(1.2rem, 2.4vw, 2rem);
      letter-spacing: -.02em;
      text-transform: uppercase;
      opacity: 0;
      transform: translateY(20px);
      transition: opacity .6s .05s, transform .6s .05s;
    }

    .pg-item:hover .pg-cap small,
    .pg-item:hover .pg-cap strong {
      opacity: 1;
      transform: translateY(0)
    }

    /* 그리드 배치 — 원본과 동일 */
    .pg-item-1 {
      grid-column: 1/6;
      grid-row: 1;
      height: 27.9vw
    }

    .pg-item-2 {
      grid-column: 7/13;
      grid-row: 2;
      height: 33.75vw
    }

    .pg-item-3 {
      grid-column: 4/10;
      grid-row: 3;
      height: 33.75vw
    }

    .pg-item-4 {
      grid-column: 1/6;
      grid-row: 4;
      height: 27.9vw
    }

    .pg-item-5 {
      grid-column: 7/13;
      grid-row: 5;
      height: 33.75vw
    }

    .pg-item-6 {
      grid-column: 4/10;
      grid-row: 6;
      height: 33.75vw
    }

    /* ④ 필름 그레인 */
    #grain {
      position: fixed;
      inset: 0;
      width: 100vw;
      height: 100vh;
      z-index: 9999;
      pointer-events: none;
      mix-blend-mode: screen;
      opacity: .05;
    }

    /* 모바일: 단일 컬럼 */
    @media (max-width:768px) {
      .pg-gallery {
        display: flex;
        flex-direction: column;
        gap: 15vw;
        padding: 14vw 8vw 18vh
      }

      .pg-item {
        height: 78vw !important
      }

      .gallery-header {
        height: auto;
        position: relative;
        padding: 24vh 6vw 6vh
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .bg-wave {
        animation: none
      }
    }

    /* ===== CTA (restyled, 무드 통일) ===== */
    .block-cta {
      padding: clamp(64px, 11vh, 132px) 24px;
      display: flex;
      justify-content: center;
      /* 검은 배경 + 은은한 뉴트럴 광원(패널이 이걸 블러로 굴절시켜 유리처럼 보임) */
      background:
        radial-gradient(48% 60% at 18% 18%, rgba(255, 255, 255, .055), transparent 60%),
        radial-gradient(44% 54% at 86% 92%, rgba(255, 255, 255, .035), transparent 60%),
        #000;
    }

    /* ── 메인 글래스 패널 ── */
    .block-cta .download {
      position: relative;
      width: min(1120px, 100%);
      border-radius: 22px;
      border: 1px solid rgba(255, 255, 255, .12);
      background: rgba(255, 255, 255, .035);
      -webkit-backdrop-filter: blur(30px) saturate(115%);
      backdrop-filter: blur(30px) saturate(115%);
      padding: clamp(32px, 5vw, 64px);
      overflow: hidden;
      isolation: isolate;
      box-shadow:
        0 44px 100px -34px rgba(0, 0, 0, .92),
        inset 0 1px 0 rgba(255, 255, 255, .14),
        /* 상단 엣지 하이라이트 */
        inset 0 0 0 1px rgba(255, 255, 255, .02);
    }

    /* 상단 얇은 광택 라인 */
    .block-cta .download::before {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: 0;
      height: 1px;
      z-index: 1;
      background: linear-gradient(90deg, transparent, rgba(255, 255, 255, .35), transparent);
      opacity: .6;
      pointer-events: none;
    }

    .block-cta .download__grid {
      display: grid;
      grid-template-columns: 1.1fr .9fr;
      align-items: center;
      gap: clamp(32px, 5vw, 72px);
    }

    /* eyebrow — 유리 미니 pill + 모노 라벨 */
    .block-cta .eyebrow {
      display: inline-flex;
      align-items: center;
      gap: 9px;
      font-family: "JetBrains Mono", ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: .22em;
      text-transform: uppercase;
      color: rgba(239, 236, 228, .55);
      padding: 7px 14px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .14);
      background: rgba(255, 255, 255, .05);
      -webkit-backdrop-filter: blur(8px);
      backdrop-filter: blur(8px);
      margin-bottom: 24px;
    }

    .block-cta .eyebrow .dot {
      width: 6px;
      height: 6px;
      border-radius: 50%;
      background: #EFECE4;
      box-shadow: 0 0 10px rgba(255, 255, 255, .6);
    }

    .block-cta h2 {
      font-family: "Space Grotesk", sans-serif;
      font-weight: 600;
      font-size: clamp(30px, 4.4vw, 52px);
      line-height: 1.04;
      letter-spacing: -.02em;
      color: #EFECE4;
      margin-bottom: 18px;
    }

    /* 강조: 파랑 대신 화이트→뮤트 메탈릭 그라데이션 */
    .block-cta h2 .grad {
      background: linear-gradient(100deg, #ffffff 0%, #8f8b83 95%);
      -webkit-background-clip: text;
      background-clip: text;
      color: transparent;
    }

    .block-cta .sub {
      font-family: "DM Sans", "Space Grotesk", sans-serif;
      color: rgba(239, 236, 228, .5);
      font-size: clamp(15px, 1.6vw, 17px);
      line-height: 1.65;
      max-width: 46ch;
      margin-bottom: 36px;
    }

    /* ── 버튼: 유리 패널 ── */
    .block-cta .stores {
      display: flex;
      flex-wrap: wrap;
      gap: 14px
    }

    .block-cta .store-btn {
      display: inline-flex;
      align-items: center;
      gap: 12px;
      padding: 14px 22px;
      border-radius: 13px;
      text-decoration: none;
      color: #EFECE4;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .14);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .10);
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, background .3s;
    }

    .block-cta .store-btn:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, .34);
      background: rgba(255, 255, 255, .09);
    }

    .block-cta .store-btn.is-primary {
      border-color: rgba(255, 255, 255, .24);
      background: rgba(255, 255, 255, .10);
    }

    .block-cta .store-btn.is-primary:hover {
      border-color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .15);
    }

    .block-cta .store-btn:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .7);
      outline-offset: 3px
    }

    .block-cta .store-btn svg {
      width: 22px;
      height: 22px;
      flex-shrink: 0;
      color: #EFECE4
    }

    .block-cta .store-btn .txt {
      display: flex;
      flex-direction: column;
      line-height: 1.1;
      text-align: left
    }

    .block-cta .store-btn .txt small {
      font-family: "JetBrains Mono", monospace;
      font-size: 10px;
      letter-spacing: .08em;
      color: rgba(239, 236, 228, .42);
      text-transform: uppercase;
    }

    .block-cta .store-btn .txt strong {
      font-size: 15px;
      font-weight: 600;
      font-family: "Space Grotesk", sans-serif
    }

    /* ── QR: 유리 카드 ── */
    .block-cta .qr-wrap {
      display: flex;
      justify-content: center
    }

    .block-cta .qr-card {
      position: relative;
      width: clamp(220px, 26vw, 264px);
      aspect-ratio: 1/1.06;
      border-radius: 22px;
      padding: 22px;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      gap: 16px;
      background: rgba(255, 255, 255, .05);
      border: 1px solid rgba(255, 255, 255, .12);
      -webkit-backdrop-filter: blur(18px) saturate(115%);
      backdrop-filter: blur(18px) saturate(115%);
      box-shadow:
        0 34px 66px -26px rgba(0, 0, 0, .85),
        inset 0 1px 0 rgba(255, 255, 255, .16);
      transform: perspective(1000px) rotateZ(3deg) rotateY(-5deg);
      transition: transform .5s cubic-bezier(.16, 1, .3, 1);
    }

    .block-cta .qr-card:hover {
      transform: perspective(1000px) rotateZ(0) rotateY(0)
    }

    /* 유리 프레임 링(화이트 그라데이션) */
    .block-cta .qr-card::before {
      content: "";
      position: absolute;
      inset: -1px;
      border-radius: 22px;
      padding: 1px;
      background: linear-gradient(135deg, rgba(255, 255, 255, .55), transparent 45%, transparent 55%, rgba(255, 255, 255, .22));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .9;
      pointer-events: none;
    }

    .block-cta .qr-code {
      background: #fff;
      padding: 12px;
      border-radius: 12px;
      display: grid;
      place-items: center;
      box-shadow: 0 0 30px rgba(255, 255, 255, .10);
    }

    .block-cta .qr-code img,
    .block-cta .qr-code canvas {
      display: block;
      width: 168px;
      height: 168px
    }

    .block-cta .qr-label {
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      color: rgba(239, 236, 228, .5);
      text-align: center;
      letter-spacing: .02em;
    }

    .block-cta .qr-label b {
      color: #EFECE4;
      font-weight: 600
    }

    @media (max-width:760px) {
      .block-cta .download__grid {
        grid-template-columns: 1fr;
        text-align: center
      }

      .block-cta .sub {
        margin-left: auto;
        margin-right: auto
      }

      .block-cta .eyebrow {
        margin-left: auto;
        margin-right: auto
      }

      .block-cta .stores {
        justify-content: center
      }

      .block-cta .qr-card {
        transform: none;
        margin-top: 8px
      }

      .block-cta .qr-card:hover {
        transform: none
      }
    }

    @media (prefers-reduced-motion:reduce) {
      .block-cta * {
        transition: none !important
      }
    }


    /* ── Get in touch : contact form (colours/buttons match this site's glass theme) ── */
    .block-cta .git-grid {
      display: grid;
      grid-template-columns: .92fr 1.08fr;
      gap: clamp(32px, 5vw, 64px);
      align-items: stretch
    }

    .block-cta .git-intro {
      display: flex;
      flex-direction: column;
      text-align: left
    }

    .block-cta .git-meta {
      list-style: none;
      display: flex;
      flex-direction: column;
      gap: 14px;
      margin: 0 0 30px;
      padding: 0
    }

    .block-cta .git-meta li {
      display: flex;
      flex-direction: column;
      gap: 3px
    }

    .block-cta .git-meta li span {
      font-family: "JetBrains Mono", ui-monospace, monospace;
      font-size: 11px;
      letter-spacing: .16em;
      text-transform: uppercase;
      color: rgba(239, 236, 228, .42)
    }

    .block-cta .git-meta li a,
    .block-cta .git-meta li b {
      font-family: "Space Grotesk", sans-serif;
      font-size: 15px;
      color: #EFECE4;
      font-weight: 600
    }

    .block-cta .git-meta li a {
      text-decoration: none;
      transition: color .2s
    }

    .block-cta .git-meta li a:hover {
      color: #fff
    }

    .block-cta .git-qr {
      margin-top: auto;
      position: relative;
      display: flex;
      align-items: center;
      gap: 16px;
      padding: 16px;
      border-radius: 16px;
      overflow: hidden;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .12)
    }

    .block-cta .git-qr::before {
      content: "";
      position: absolute;
      inset: 0;
      border-radius: 16px;
      padding: 1px;
      pointer-events: none;
      background: linear-gradient(135deg, rgba(255, 255, 255, .5), transparent 45%, transparent 55%, rgba(255, 255, 255, .2));
      -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0);
      -webkit-mask-composite: xor;
      mask-composite: exclude;
      opacity: .9
    }

    .block-cta .git-qr-code {
      flex: 0 0 auto;
      position: relative;
      display: block;
      background: #fff;
      padding: 9px;
      border-radius: 12px;
      overflow: hidden;
      box-shadow: 0 0 26px rgba(255, 255, 255, .10);
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), box-shadow .3s ease
    }

    .block-cta .git-qr-code img {
      display: block;
      width: 84px;
      height: 84px
    }

    .block-cta .git-qr-code::after {
      content: "";
      position: absolute;
      left: 0;
      right: 0;
      top: -45%;
      height: 40%;
      pointer-events: none;
      opacity: 0;
      background: linear-gradient(180deg, transparent, rgba(255, 255, 255, .6), transparent)
    }

    .block-cta .git-qr-code:hover {
      transform: translateY(-2px) scale(1.02);
      box-shadow: 0 14px 30px -10px rgba(0, 0, 0, .7), 0 0 32px rgba(255, 255, 255, .2)
    }

    .block-cta .git-qr-code:hover::after {
      opacity: 1;
      animation: git-qr-scan 1.5s ease-in-out infinite
    }

    @keyframes git-qr-scan {
      0% {
        top: -45%
      }

      100% {
        top: 105%
      }
    }

    .block-cta .git-qr-txt {
      display: flex;
      flex-direction: column;
      gap: 3px;
      line-height: 1.3;
      font-family: "DM Sans", "Space Grotesk", sans-serif
    }

    .block-cta .git-qr-txt small {
      font-size: 11px;
      color: rgba(239, 236, 228, .5);
      letter-spacing: .02em
    }

    .block-cta .git-qr-link {
      display: inline-flex;
      align-items: center;
      gap: 5px;
      width: max-content;
      text-decoration: none
    }

    .block-cta .git-qr-link b {
      font-family: "JetBrains Mono", monospace;
      font-size: 14px;
      color: #EFECE4;
      font-weight: 600;
      transition: color .2s
    }

    .block-cta .git-qr-link::after {
      content: "\2197";
      font-family: "JetBrains Mono", monospace;
      font-size: 12px;
      color: rgba(239, 236, 228, .42);
      transition: color .2s, transform .2s
    }

    .block-cta .git-qr-link:hover b {
      color: #fff
    }

    .block-cta .git-qr-link:hover::after {
      color: #fff;
      transform: translate(2px, -2px)
    }

    /* form */
    .block-cta .contact-form {
      display: flex;
      flex-direction: column;
      gap: 16px
    }

    .block-cta .cf-row {
      display: grid;
      grid-template-columns: 1fr 1fr;
      gap: 14px
    }

    .block-cta .cf-field {
      display: flex;
      flex-direction: column;
      gap: 8px
    }

    .block-cta .cf-field label {
      font-family: "JetBrains Mono", monospace;
      font-size: 11px;
      letter-spacing: .06em;
      text-transform: uppercase;
      color: rgba(239, 236, 228, .6);
      display: flex;
      gap: 8px;
      align-items: baseline
    }

    .block-cta .cf-field .req {
      color: #EFECE4
    }

    .block-cta .contact-form input,
    .block-cta .contact-form textarea,
    .block-cta .contact-form select {
      width: 100%;
      background: rgba(255, 255, 255, .04);
      border: 1px solid rgba(255, 255, 255, .14);
      border-radius: 12px;
      padding: 13px 15px;
      color: #EFECE4;
      font-family: "DM Sans", "Space Grotesk", sans-serif;
      font-size: 14px;
      line-height: 1.5;
      transition: border-color .2s, box-shadow .2s, background .2s
    }

    .block-cta .contact-form textarea {
      resize: vertical;
      min-height: 108px
    }

    .block-cta .contact-form input::placeholder,
    .block-cta .contact-form textarea::placeholder {
      color: rgba(239, 236, 228, .32)
    }

    .block-cta .contact-form input:focus,
    .block-cta .contact-form textarea:focus,
    .block-cta .contact-form select:focus {
      outline: none;
      border-color: rgba(255, 255, 255, .5);
      box-shadow: 0 0 0 3px rgba(255, 255, 255, .10);
      background: rgba(255, 255, 255, .06)
    }

    .block-cta .contact-form .invalid {
      border-color: rgba(255, 120, 110, .85) !important;
      box-shadow: 0 0 0 3px rgba(255, 120, 110, .14) !important
    }

    .block-cta .cf-select {
      position: relative
    }

    .block-cta .cf-select select {
      appearance: none;
      -webkit-appearance: none;
      -moz-appearance: none;
      padding-right: 42px;
      cursor: pointer
    }

    .block-cta .cf-select option {
      background: #0b0b0b;
      color: #EFECE4
    }

    .block-cta .cf-select svg {
      position: absolute;
      right: 14px;
      top: 50%;
      transform: translateY(-50%);
      width: 18px;
      height: 18px;
      stroke: rgba(239, 236, 228, .5);
      fill: none;
      stroke-width: 2;
      stroke-linecap: round;
      stroke-linejoin: round;
      pointer-events: none
    }

    .block-cta .cf-hint {
      font-family: "JetBrains Mono", monospace;
      font-weight: 400;
      text-transform: none;
      letter-spacing: .02em;
      color: rgba(239, 236, 228, .4);
      font-size: 10.5px
    }

    .block-cta .cf-file {
      position: relative;
      display: flex;
      align-items: center;
      gap: 10px;
      cursor: pointer;
      background: rgba(255, 255, 255, .03);
      border: 1px dashed rgba(255, 255, 255, .2);
      border-radius: 12px;
      padding: 13px 15px;
      color: rgba(239, 236, 228, .5);
      font-family: "DM Sans", sans-serif;
      font-size: 14px;
      transition: border-color .2s, background .2s, color .2s
    }

    .block-cta .cf-file input[type=file] {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      opacity: 0;
      cursor: pointer
    }

    .block-cta .cf-file:hover {
      border-color: rgba(255, 255, 255, .45);
      color: rgba(239, 236, 228, .82)
    }

    .block-cta .cf-file.dragover {
      border-color: rgba(255, 255, 255, .6);
      background: rgba(255, 255, 255, .08);
      color: #EFECE4
    }

    .block-cta .cf-file.has-file {
      border-style: solid;
      color: #EFECE4
    }

    .block-cta .cf-file.invalid {
      border-color: rgba(255, 120, 110, .85) !important;
      background: rgba(255, 120, 110, .06)
    }

    .block-cta .cf-file-ic {
      width: 18px;
      height: 18px;
      flex: 0 0 auto;
      color: #EFECE4
    }

    .block-cta .cf-file-txt {
      flex: 1;
      min-width: 0;
      overflow: hidden;
      text-overflow: ellipsis;
      white-space: nowrap
    }

    .block-cta .cf-file-clear {
      flex: 0 0 auto;
      position: relative;
      z-index: 2;
      width: 22px;
      height: 22px;
      border-radius: 6px;
      border: 1px solid rgba(255, 255, 255, .2);
      background: rgba(255, 255, 255, .05);
      color: rgba(239, 236, 228, .7);
      font-size: 15px;
      line-height: 1;
      cursor: pointer;
      transition: background .2s, color .2s
    }

    .block-cta .cf-file-clear:hover {
      background: rgba(255, 120, 110, .18);
      color: #ffb4ad
    }

    .block-cta .cf-consent {
      display: flex;
      align-items: flex-start;
      gap: 10px;
      cursor: pointer;
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      color: rgba(239, 236, 228, .6);
      line-height: 1.5;
      user-select: none
    }

    .block-cta .cf-consent b {
      font-weight: 500;
      color: rgba(239, 236, 228, .42)
    }

    .block-cta .cf-consent input {
      appearance: none;
      -webkit-appearance: none;
      flex: 0 0 auto;
      width: 18px;
      height: 18px;
      margin-top: 1px;
      border: 1px solid rgba(255, 255, 255, .24);
      border-radius: 6px;
      background: rgba(255, 255, 255, .04);
      cursor: pointer;
      position: relative;
      transition: background .2s, border-color .2s
    }

    .block-cta .cf-consent input:checked {
      background: #EFECE4;
      border-color: #EFECE4
    }

    .block-cta .cf-consent input:checked::after {
      content: "";
      position: absolute;
      left: 5px;
      top: 1.5px;
      width: 5px;
      height: 9px;
      border: solid #060606;
      border-width: 0 2px 2px 0;
      transform: rotate(45deg)
    }

    .block-cta .cf-consent input.invalid {
      border-color: rgba(255, 120, 110, .85) !important
    }

    .block-cta .cf-consent input:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .6);
      outline-offset: 2px
    }

    .block-cta .cf-submit {
      width: 100%;
      margin-top: 6px;
      display: inline-flex;
      align-items: center;
      justify-content: center;
      gap: 8px;
      padding: 15px 24px;
      border-radius: 13px;
      cursor: pointer;
      font-family: "Space Grotesk", sans-serif;
      font-size: 15px;
      font-weight: 600;
      color: #EFECE4;
      background: rgba(255, 255, 255, .10);
      border: 1px solid rgba(255, 255, 255, .24);
      -webkit-backdrop-filter: blur(10px);
      backdrop-filter: blur(10px);
      box-shadow: inset 0 1px 0 rgba(255, 255, 255, .14);
      transition: transform .3s cubic-bezier(.16, 1, .3, 1), border-color .3s, background .3s
    }

    .block-cta .cf-submit:hover {
      transform: translateY(-2px);
      border-color: rgba(255, 255, 255, .5);
      background: rgba(255, 255, 255, .15)
    }

    .block-cta .cf-submit:focus-visible {
      outline: 2px solid rgba(255, 255, 255, .7);
      outline-offset: 3px
    }

    .block-cta .cf-submit[disabled] {
      opacity: .55;
      cursor: not-allowed;
      transform: none
    }

    .block-cta .cf-status {
      min-height: 20px;
      font-family: "DM Sans", sans-serif;
      font-size: 13px;
      text-align: center;
      margin: 0;
      color: rgba(239, 236, 228, .5)
    }

    .block-cta .cf-status.ok {
      color: #cfe8d6
    }

    .block-cta .cf-status.err {
      color: #ffb4ad
    }

    @media (max-width:820px) {
      .block-cta .git-grid {
        grid-template-columns: 1fr;
        gap: 36px
      }

      .block-cta .git-qr {
        margin-top: 24px
      }

      .block-cta .cf-row {
        grid-template-columns: 1fr
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .block-cta .git-qr-code,
      .block-cta .git-qr-code:hover {
        transform: none
      }

      .block-cta .git-qr-code:hover::after {
        animation: none;
        opacity: 0
      }
    }

    /* ===== footer.html ===== */
    .block-footer {
      --bg: #0a0a0a;
      --footer-bg: #030303;
      --ink: #f5f5f3;
      --muted: #7a7a78;
      --line: rgba(255, 255, 255, .12);
      --accent: #2f6bff;
      /* brand blue */
      --sans: "Helvetica Neue", Arial, "Noto Sans TC", sans-serif;
    }

    .scroll-spacer {
      height: 90vh;
      display: flex;
      align-items: center;
      justify-content: center;
      color: var(--muted);
      font-size: 14px;
      letter-spacing: .2em;
      text-transform: uppercase;
      border-bottom: 1px solid var(--line)
    }

    /* ============ FOOTER ============ */
    .site-footer {
      position: relative;
      background: var(--footer-bg);
      overflow: hidden
    }

    .footer-top {
      position: relative;
      z-index: 2;
      max-width: 1320px;
      margin: 0 auto;
      padding: 90px 40px 60px
    }

    .footer-info-bar {
      display: flex;
      flex-wrap: wrap;
      gap: 8px 48px;
      padding-bottom: 48px;
      border-bottom: 1px solid var(--line);
      font-size: 13px;
      letter-spacing: .04em;
      color: var(--muted);
      text-transform: uppercase
    }

    .footer-info-bar>span {
      overflow: hidden;
      display: inline-block
    }

    .frev-inner {
      display: inline-block;
      will-change: transform;
      transform: translateY(110%);
      transition: transform .9s cubic-bezier(.16, 1, .3, 1)
    }

    .in-view .frev-inner {
      transform: translateY(0)
    }

    .footer-main-content {
      display: grid;
      grid-template-columns: 1.4fr 1fr;
      gap: 60px;
      padding-top: 56px;
      align-items: start
    }

    .footer-description {
      font-size: clamp(20px, 2.6vw, 34px);
      line-height: 1.45;
      letter-spacing: -.01em;
      max-width: 760px;
      clip-path: inset(0 0 100% 0);
      transition: clip-path 1.1s cubic-bezier(.16, 1, .3, 1)
    }

    .in-view .footer-description {
      clip-path: inset(0 0 0% 0)
    }

    .footer-tagline {
      display: block;
      margin-top: 18px;
      font-size: 14px;
      letter-spacing: .06em;
      color: var(--accent);
      text-transform: uppercase
    }

    .footer-contact-info {
      margin-top: 36px;
      display: flex;
      flex-direction: column;
      gap: 6px
    }

    .footer-contact-info>div {
      overflow: hidden
    }

    .footer-contact-info a,
    .footer-contact-info span {
      font-size: 17px;
      color: var(--ink);
      text-decoration: none;
      display: inline-block;
      transform: translateY(110%);
      transition: transform .8s cubic-bezier(.16, 1, .3, 1)
    }

    .in-view .footer-contact-info a,
    .in-view .footer-contact-info span {
      transform: translateY(0)
    }

    .footer-contact-info a:hover {
      color: var(--accent)
    }

    .footer-address {
      color: var(--muted);
      font-size: 14px;
      margin-top: 10px;
      letter-spacing: .02em
    }

    .footer-nav-links {
      margin-top: 34px;
      display: flex;
      gap: 26px;
      flex-wrap: wrap
    }

    .footer-nav-links .frev-wrap {
      overflow: hidden
    }

    .footer-nav-links a {
      color: var(--ink);
      text-decoration: none;
      font-size: 15px;
      letter-spacing: .02em;
      position: relative;
      display: inline-block;
      transform: translateY(110%);
      transition: transform .8s cubic-bezier(.16, 1, .3, 1)
    }

    .in-view .footer-nav-links a {
      transform: translateY(0)
    }

    .footer-nav-links a::after {
      content: "";
      position: absolute;
      left: 0;
      bottom: -3px;
      width: 0;
      height: 1px;
      background: var(--accent);
      transition: width .35s ease
    }

    .footer-nav-links a:hover::after {
      width: 100%
    }

    /* ---------- RIGHT: image slider ---------- */
    .footer-right-panel {
      display: flex;
      justify-content: flex-end
    }

    .footer-slider {
      position: relative;
      width: 100%;
      max-width: 420px;
      aspect-ratio: 4/3;
      border-radius: 12px;
      overflow: hidden;
      background: #161616;
      box-shadow: 0 20px 60px rgba(0, 0, 0, .45)
    }

    .footer-slider .slide {
      position: absolute;
      inset: 0;
      width: 100%;
      height: 100%;
      object-fit: cover;
      opacity: 0;
      transform: scale(1.06);
      transition: opacity 1s ease, transform 5s ease
    }

    .footer-slider .slide.is-active {
      opacity: 1;
      transform: scale(1)
    }

    /* cover that scales away to reveal the slider on first view */
    .footer-video-cover {
      position: absolute;
      inset: 0;
      background: var(--accent);
      transform: scaleX(1);
      transform-origin: 100% 50%;
      transition: transform 1s cubic-bezier(.16, 1, .3, 1);
      z-index: 3
    }

    .in-view .footer-video-cover {
      transform: scaleX(0)
    }

    .slider-dots {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 14px;
      z-index: 4;
      display: flex;
      gap: 8px;
      justify-content: center
    }

    .slider-dots .dot {
      width: 7px;
      height: 7px;
      border-radius: 50%;
      border: 0;
      padding: 0;
      cursor: pointer;
      background: rgba(255, 255, 255, .4);
      transition: background .3s, width .3s
    }

    .slider-dots .dot.is-active {
      background: #fff;
      width: 20px;
      border-radius: 4px
    }

    .slider-progress {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      height: 2px;
      background: rgba(255, 255, 255, .12);
      z-index: 4
    }

    .slider-progress>span {
      display: block;
      height: 100%;
      width: 0;
      background: var(--accent)
    }

    /* ============ BOTTOM PARALLAX (footer bg image) ============ */
    .footer-parallax {
      position: relative;
      width: 100%;
      aspect-ratio: 1500 / 418;
      overflow: hidden
    }

    .footer-parallax-bg {
      position: absolute;
      inset: 0;
      background-image: url('../img/footer-parallax-bg.jpg');
      background-size: cover;
      background-position: center
    }

    .footer-parallax::after {
      content: "";
      position: absolute;
      inset: 0;
      background: linear-gradient(180deg, rgba(3, 3, 3, .35), rgba(3, 3, 3, .05) 45%, rgba(3, 3, 3, .8))
    }

    .footer-copyright-bar {
      position: absolute;
      left: 0;
      right: 0;
      bottom: 0;
      z-index: 2;
      display: flex;
      justify-content: space-between;
      align-items: center;
      flex-wrap: wrap;
      gap: 10px;
      padding: 20px 40px;
      border-top: 1px solid var(--line);
      font-size: 12px;
      letter-spacing: .08em;
      color: var(--muted);
      text-transform: uppercase
    }

    @media (max-width:880px) {
      .footer-top {
        padding: 64px 22px 40px
      }

      .footer-main-content {
        grid-template-columns: 1fr;
        gap: 40px
      }

      .footer-right-panel {
        justify-content: flex-start
      }

      .footer-slider {
        max-width: 100%
      }

      .footer-info-bar {
        gap: 6px 24px
      }

      .footer-copyright-bar {
        padding: 16px 22px;
        font-size: 11px
      }
    }

    @media (prefers-reduced-motion:reduce) {

      .frev-inner,
      .footer-description,
      .footer-contact-info a,
      .footer-contact-info span,
      .footer-nav-links a,
      .footer-video-cover {
        transition: none;
        transform: none;
        clip-path: none
      }

      .footer-video-cover {
        transform: scaleX(0)
      }

      .footer-slider .slide {
        transition: opacity .4s ease;
        transform: none
      }
    }

    .block-footer .slider-dots {
      display: none !important
    }

    .block-footer .slider-progress {
      display: none !important
    }

    /* ===== 언어 전환 스위치 ===== */
    .lang-switch {
      position: fixed;
      top: 16px;
      right: 16px;
      z-index: 10001;
      display: flex;
      gap: 2px;
      padding: 3px;
      border-radius: 999px;
      border: 1px solid rgba(255, 255, 255, .16);
      background: rgba(18, 18, 20, .55);
      -webkit-backdrop-filter: blur(12px);
      backdrop-filter: blur(12px);
      font-family: "JetBrains Mono", ui-monospace, monospace;
      box-shadow: 0 8px 24px -12px rgba(0, 0, 0, .7)
    }

    .lang-switch button {
      appearance: none;
      -webkit-appearance: none;
      border: 0;
      cursor: pointer;
      background: transparent;
      color: rgba(239, 236, 228, .55);
      font: inherit;
      font-size: 11px;
      letter-spacing: .12em;
      padding: 6px 12px;
      border-radius: 999px;
      line-height: 1;
      transition: color .25s, background .25s
    }

    .lang-switch button:hover {
      color: #EFECE4
    }

    .lang-switch button.is-active {
      color: #0a0a0a;
      background: #EFECE4
    }

    @media (max-width:720px) {
      .lang-switch {
        top: 10px;
        right: 10px
      }
    }