/* ─────────────────────────────────────────────────────────────
   FEARX BOOTCAMP — Facility tour page
   Brand: BFX guide (YELLOW #FFD200, BNK RED #D7141F, Black, White)
   Font: Pretendard
   ───────────────────────────────────────────────────────────── */

@font-face {
  font-family: "Bebas Neue";
  src: url("../fonts/BebasNeue-Regular.otf") format("opentype");
  font-weight: 400;
  font-style: normal;
  font-display: swap;
}

:root {
  --c-bg:         #0A0A0A;
  --c-bg-elev:   #141414;
  --c-fg:         #FFFFFF;
  --c-fg-muted:  #9A9A9A;
  --c-fg-dim:    #5A5A5A;
  --c-line:      #2A2A2A;

  --c-yellow:    #FFD200;
  --c-yellow-2:  #FFB92A;
  --c-red:       #D7141F;

  --font-sans:   "Pretendard Variable", "Pretendard", -apple-system, BlinkMacSystemFont,
                 "Segoe UI", system-ui, sans-serif;

  --max-w:       1280px;
  --gutter:      clamp(20px, 3vw, 32px);  /* 사방 균일 + 적정 — 모바일 20, PC 32 cap */

  --easing:      cubic-bezier(0.22, 0.61, 0.36, 1);
  --reveal-dur:  900ms;

  /* ── Spacing scale (P1 마일스톤 — 사이트 전역 통일) ──────────────
     모든 padding/gap 값은 가능한 한 이 토큰들을 사용. PC = 기본값.
     모바일은 @media (max-width: 720px)에서 override (--section-pad 등). */
  --space-2xs:  4px;
  --space-xs:   8px;
  --space-sm:   12px;
  --space-md:   16px;   /* 기본 gap 단위 (facility-photos, gallery--pair, dining-marquee 모두 이 값) */
  --space-lg:   24px;   /* 카드 내부 padding */
  --space-xl:   32px;   /* 큰 카드 padding (external-card 등) */
  --space-2xl:  48px;   /* 큰 블록 사이 (facility-body gap) */
  --space-3xl:  64px;   /* mobile 섹션 vertical */
  --space-4xl:  96px;   /* PC 섹션 vertical */
  --space-5xl: 128px;

  /* 의미 alias */
  --section-pad-y: clamp(48px, 8vw, 96px);  /* 섹션 T/B (vertical breathing — 모바일 ~48, PC 96 cap) */
  --section-pad-x: var(--gutter);            /* 섹션 L/R (clamp 20-32) */
  --gap-card:    var(--space-md);            /* 카드 ↔ 카드 (16px) */
  --gap-block:   var(--space-2xl);           /* 큰 블록 ↔ 블록 (48px) */
  --card-pad:    var(--space-lg);            /* 카드 내부 (24px) */
}

* { box-sizing: border-box; margin: 0; padding: 0; }

html {
  scroll-behavior: smooth;
  scroll-padding-top: var(--header-offset, 88px);  /* fixed header 높이만큼 anchor 점프 시 띄움 */
}
@media (max-width: 860px) {
  html {
    scroll-padding-top: var(--header-offset, 96px); /* 모바일 2-row header 실측값으로 JS가 보정 */
  }
}
@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
}

body {
  background: var(--c-bg);
  color: var(--c-fg);
  font-family: var(--font-sans);
  font-feature-settings: "ss02", "ss03";
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  line-height: 1.55;
  overflow-x: hidden;
}

img { display: block; max-width: 100%; height: auto; }
a { color: inherit; text-decoration: none; }

::selection { background: var(--c-yellow); color: var(--c-bg); }

/* ───────── HEADER ───────── */
.site-header {
  position: fixed;
  inset: 0 0 auto 0;
  z-index: 100;
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18px var(--gutter);
  transition: background-color 400ms var(--easing),
              backdrop-filter 400ms var(--easing),
              border-color 400ms var(--easing);
  border-bottom: 1px solid transparent;
}
.site-header[data-state="scrolled"] {
  background: rgba(10, 10, 10, 0.82);
  -webkit-backdrop-filter: saturate(140%) blur(14px);
          backdrop-filter: saturate(140%) blur(14px);
  border-bottom-color: var(--c-line);
}
.brand {
  display: flex; align-items: center; gap: 12px;
}
.brand-mark {
  width: 36px;
  height: 36px;
  object-fit: contain;
  flex-shrink: 0;
}
.brand-text-main {
  font-size: 18px;
  font-weight: 800;
  letter-spacing: -0.01em;
  line-height: 1;
}
.site-nav {
  display: flex; gap: 28px;
  font-size: 14px;
  color: var(--c-fg-muted);
}
.site-nav a {
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
  user-select: none;
  transition: color 250ms var(--easing),
              text-shadow 250ms var(--easing);
}
.site-nav a:hover,
.site-nav a:active,
.site-nav a.is-active {
  color: var(--c-yellow);
  text-shadow: 0 0 18px rgba(255, 210, 0, 0.55),
               0 0 6px  rgba(255, 210, 0, 0.30);
}
.header-cta {
  font-size: 13px;
  font-weight: 600;
  padding: 8px 14px;
  background: var(--c-yellow);
  color: var(--c-bg);
  border-radius: 999px;
  transition: transform 200ms var(--easing);
}
.header-cta:hover { transform: translateY(-1px); }

@media (max-width: 860px) {
  /* Mobile GNB — horizontal scroll chip nav (Apple AirPods Pro / Team Liquid pattern).
     Header wraps: row 1 = brand + CTA, row 2 = swipeable chip strip.
     .site-nav 클래스 유지 → 기존 IntersectionObserver 액티브 글로우 그대로 동작. */
  .site-header {
    flex-wrap: wrap;
    row-gap: 8px;
    padding: 12px var(--gutter) 0;
  }
  .site-nav {
    order: 3;
    flex: 1 0 100%;
    gap: 14px;
    overflow-x: auto;
    overflow-y: hidden;
    scroll-snap-type: x proximity;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(-1 * var(--gutter));
    padding: 8px var(--gutter) 10px;
    scrollbar-width: none;
    -ms-overflow-style: none;
    border-top: 1px solid var(--c-line);
    justify-content: safe center;   /* fit 시 중앙 / overflow 시 자동 start */
  }
  .site-nav::-webkit-scrollbar { display: none; }
  .site-nav a {
    flex: 0 0 auto;
    scroll-snap-align: center;
    padding: 2px 2px;
    font-size: 12px;
    white-space: nowrap;
  }
}
@media (max-width: 480px) {
  .site-nav { gap: 10px; }
  .site-nav a { font-size: 11px; }
  .brand-text-main { font-size: 15px; }
  .header-cta { padding: 7px 12px; font-size: 12px; }
}

/* ───────── HERO ───────── */
.hero {
  position: relative;
  height: 100svh;
  min-height: 600px;
  overflow: hidden;
  display: flex;
  align-items: flex-end;
  padding: 0 var(--section-pad-x) var(--section-pad-y);
  isolation: isolate;
}
.hero-bg {
  position: absolute; inset: -8% 0;
  z-index: -1;
  will-change: transform;
}
.hero-bg img {
  width: 100%; height: 100%;
  object-fit: cover;
  filter: brightness(0.55);
}
.hero-bg-overlay {
  position: absolute; inset: 0;
  background: linear-gradient(
    180deg,
    rgba(10,10,10,0.0) 0%,
    rgba(10,10,10,0.2) 40%,
    rgba(10,10,10,0.85) 100%
  );
}
.hero-content {
  max-width: var(--max-w);
  width: 100%;
  margin: 0 auto;
}
.eyebrow {
  font-size: 12px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-yellow);
  font-weight: 600;
  margin-bottom: 24px;
}
.hero-title {
  font-size: clamp(40px, 7vw, 96px);
  font-weight: 900;
  line-height: 1.02;
  letter-spacing: -0.03em;
  margin-bottom: 28px;
}
.hero-title span { display: block; }
.hero-title-main { color: var(--c-fg); }
.hero-title-sub {
  font-size: clamp(18px, 2vw, 26px);
  font-weight: 500;
  letter-spacing: -0.005em;
  color: var(--c-fg-muted);
  margin-top: 18px;
}
.hero-sub {
  font-size: clamp(15px, 1.4vw, 18px);
  color: var(--c-fg-muted);
  max-width: 540px;
  line-height: 1.7;
}
.hero-actions {
  display: flex;
  align-items: center;
  gap: 24px;
  flex-wrap: wrap;
  margin-top: 36px;
}
.btn--lg {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  padding: 18px 28px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.005em;
  box-shadow: 0 14px 40px rgba(255, 210, 0, 0.22);
}
.btn--lg svg { flex-shrink: 0; }
.hero-secondary {
  font-size: 14px;
  color: var(--c-fg-muted);
  transition: color 200ms;
}
.hero-secondary:hover { color: var(--c-yellow); }
.hero-helper {
  margin-top: 14px;
  font-size: 12px;
  color: var(--c-fg-dim);
  max-width: 480px;
  line-height: 1.6;
  letter-spacing: 0.01em;
}
.hero-scroll-indicator {
  position: absolute;
  bottom: 28px;
  left: 50%;
  transform: translateX(-50%);
  display: flex; flex-direction: column; align-items: center; gap: 10px;
  font-size: 11px;
  letter-spacing: 0.2em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
}
.hero-scroll-line {
  width: 1px; height: 36px;
  background: linear-gradient(180deg, var(--c-fg-muted), transparent);
  animation: scrollLine 2.4s var(--easing) infinite;
  transform-origin: top;
}
@keyframes scrollLine {
  0%   { transform: scaleY(0);   opacity: 0; }
  30%  { transform: scaleY(1);   opacity: 1; }
  100% { transform: scaleY(1);   opacity: 0; transform: scaleY(1) translateY(20px); }
}

/* ───────── INTRO ───────── */
.intro {
  padding: 0 var(--gutter);
  background: var(--c-bg);
  text-align: center;
  position: relative;
  overflow: hidden;
  isolation: isolate;
  min-height: 100vh;
  display: grid;
  grid-template-rows: 1fr auto 1fr;
  grid-template-columns: 1fr;
}
.intro-prelude {
  grid-row: 1 / 2;
  align-self: end;
  padding-bottom: 6vh;
  display: flex;
  flex-direction: column;
  gap: 18px;
  position: relative;
  z-index: 1;
}
.intro-line-big {
  grid-row: 2 / 3;
  align-self: center;
  position: relative;
  z-index: 1;
}
.intro-line {
  font-size: clamp(18px, 2vw, 24px);
  color: var(--c-fg-muted);
  letter-spacing: -0.01em;
}
.intro-line-big {
  font-size: clamp(32px, 5vw, 64px);
  font-weight: 800;
  color: var(--c-fg);
  line-height: 1.15;
  letter-spacing: -0.03em;
  margin-top: 24px;
}

/* Typewriter big text — three lines fill in one character at a time
   once the section enters view. */
.intro-line-big .type-line {
  display: block;
  min-height: 1.15em;
  position: relative;
}
.intro-line-big .type-line.is-active::after {
  content: "";
  display: inline-block;
  width: 0.06em;
  height: 0.95em;
  background: #fff;
  vertical-align: -0.08em;
  margin-left: 0.05em;
  animation: type-cursor 1s infinite;
}
@keyframes type-cursor {
  0%, 49%   { opacity: 1; }
  50%, 100% { opacity: 0; }
}

/* Silk shader background — WebGL fragment shader rendered to a canvas.
   Anisotropic sin-on-warped-coords pattern (React Bits Silk port).
   See assets/js/silk.js. Falls back gracefully (display:none) if WebGL fails. */
.intro-silk {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
  z-index: 0;
  pointer-events: none;
  overflow: hidden;
}
.intro-silk-canvas {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  display: block;
  mix-blend-mode: screen;
  opacity: 0.16;
}

/* ───────── FACILITY SECTIONS ───────── */
.facility {
  position: relative;
  padding: var(--section-pad-y) var(--section-pad-x);
  border-top: 1px solid var(--c-line);
}
.facility-sticky {
  position: relative;
  padding: 0;
  max-width: var(--max-w);
  margin: 0 auto var(--gap-block);  /* 48px — sticky title 블록 → facility-body 큰 호흡 */
}
.facility-meta {
  display: flex; align-items: center; gap: 14px;
  margin-bottom: 18px;
}
.facility-no {
  font-size: 11px;
  letter-spacing: 0.3em;
  color: var(--c-yellow);
  font-weight: 700;
}
.facility-tag {
  font-size: 11px;
  letter-spacing: 0.24em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
  padding: 4px 10px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
}
.facility-tag.accent-yellow {
  color: var(--c-bg);
  background: var(--c-yellow);
  border-color: var(--c-yellow);
}
.facility-title {
  font-size: clamp(36px, 6vw, 80px);
  font-weight: 900;
  line-height: 1.05;
  letter-spacing: -0.03em;
}
.facility-title .main { display: block; }
.facility-title .sub {
  display: block;
  font-size: clamp(15px, 1.4vw, 20px);
  font-weight: 500;
  letter-spacing: 0;
  color: var(--c-fg-muted);
  margin-top: 14px;
  line-height: 1.4;
}

.facility-body {
  max-width: var(--max-w);
  margin: 0 auto;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: var(--gap-block);         /* 48px — 큰 블록(lead text, 사진 그룹, dining-menu, external-card) 간 큰 호흡 */
}
.facility-lead {
  font-size: clamp(18px, 1.8vw, 24px);
  line-height: 1.6;
  color: var(--c-fg);
  max-width: 760px;
  letter-spacing: -0.01em;
}
.facility-lead .highlight {
  color: var(--c-yellow);
  font-weight: 700;
}

/* ───────── SUB-SECTIONS (within Group Training Facility) ───────── */
.subsection {
  display: flex; flex-direction: column; gap: 28px;
}
.subsection + .subsection {
  margin-top: 32px;
  padding-top: 56px;
  border-top: 1px solid var(--c-line);
}
.subsection-head {
  display: flex; align-items: baseline; gap: 28px;
  margin-bottom: 4px;
}
.subsection-floor {
  font-size: clamp(64px, 9vw, 128px);
  font-weight: 400;
  font-family: "Bebas Neue", "Impact", sans-serif;
  color: var(--c-fg-dim);
  letter-spacing: 0.04em;
  line-height: 0.9;
  min-width: 120px;
  flex-shrink: 0;
}
.subsection-floor.accent-yellow { color: var(--c-yellow); }
.subsection-title-wrap { flex: 1; padding-top: 8px; }
.subsection-title {
  font-size: clamp(20px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-bottom: 8px;
  display: flex; align-items: center; gap: 12px;
  flex-wrap: wrap;
}
.subsection-pill {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.22em;
  text-transform: uppercase;
  color: var(--c-bg);
  background: var(--c-yellow);
  padding: 4px 10px;
  border-radius: 999px;
}
.subsection-sub {
  font-size: 15px;
  color: var(--c-fg-muted);
  line-height: 1.55;
  max-width: 640px;
}

@media (max-width: 640px) {
  .subsection-head { flex-direction: column; align-items: flex-start; gap: 6px; }
  .subsection-floor { min-width: 0; }
  .subsection-title-wrap { padding-top: 0; }
}

/* ───────── STATION SPECS subsection (Group & Individual) ─────────
   Override subsection's default 28px child gap with 16px so the gap
   between the rig grid and the NETWORK card matches the gap between
   rig cards inside the grid. Head gets its own breathing margin. */
.facility-specs.subsection {
  gap: 16px;
}
.facility-specs-head {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);          /* 16px — 사이트 정책 */
  margin-bottom: var(--space-md);  /* 16px — head → cards */
}
.facility-specs-head .subsection-floor {
  /* SPEC label sits on its own line, smaller than floor numbers */
  font-size: clamp(40px, 5vw, 72px);
  min-width: 0;
}
.facility-specs-head h3 {
  font-size: clamp(22px, 2.4vw, 32px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.2;
  color: var(--c-fg);
  margin: 0;
}
.facility-specs-head p {
  font-size: 15px;
  color: var(--c-fg-muted);
  line-height: 1.6;
  max-width: 640px;
  margin: 0;
}
.facility-specs-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-md);             /* 16px */
  margin-top: var(--space-md);      /* 16px — head 아래 호흡, 사이트 정책 */
}
.facility-spec-card {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: var(--card-pad);    /* 24px 사방 균일 */
  display: flex;
  flex-direction: column;
  gap: var(--space-md);        /* 16px */
}
.facility-spec-tag {
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.3em;
  color: var(--c-yellow);
  text-transform: uppercase;
}
.facility-spec-card dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.facility-spec-card dl > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.facility-spec-card dl > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.facility-spec-card dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin: 0;
}
.facility-spec-card dd {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-fg);
  margin: 0;
  letter-spacing: -0.005em;
}

/* Network — facility-level spec, full-width block below the rig grid.
   margin-top: 0 because the parent .facility-specs.subsection now uses
   gap: 16px which provides the spacing. */
.facility-specs-network {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  padding: 24px;
  display: flex;
  flex-direction: column;
  gap: 16px;
}
.facility-spec-card {
  padding: 24px;
}
.facility-spec-footnotes {
  margin: 0;
  margin-top: auto;          /* push to bottom in stretched grid items */
  padding-top: 14px;
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.facility-spec-footnotes p {
  margin: 0;
  font-size: 12px;
  line-height: 1.6;
  color: var(--c-fg-muted);
  letter-spacing: 0.005em;
  padding-left: 14px;
  text-indent: -14px;        /* hanging indent for the leading footnote marker */
}
.footnote-marker {
  font-size: 0.72em;
  vertical-align: super;
  line-height: 0;
  color: var(--c-yellow);
  font-weight: 700;
  margin-left: 2px;
}
.facility-spec-footnotes p .footnote-marker {
  margin-left: 0;
  margin-right: 4px;
}
.facility-specs-network dl {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin: 0;
}
.facility-specs-network dl > div {
  display: grid;
  grid-template-columns: 96px 1fr;
  gap: 16px;
  align-items: baseline;
  padding-bottom: 12px;
  border-bottom: 1px solid var(--c-line);
}
.facility-specs-network dl > div:last-child {
  padding-bottom: 0;
  border-bottom: none;
}
.facility-specs-network dt {
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-fg-muted);
  margin: 0;
}
.facility-specs-network dd {
  font-size: 15px;
  font-weight: 600;
  line-height: 1.4;
  color: var(--c-fg);
  margin: 0;
  letter-spacing: -0.005em;
}
.facility-specs-disclaimer {
  margin: 14px 0 0;
  font-size: 12px;
  line-height: 1.55;
  color: var(--c-fg-dim);
  letter-spacing: 0.01em;
  max-width: 720px;
}

@media (max-width: 720px) {
  .facility-specs-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);            /* 16px — 모바일도 동일 정책 */
  }
  .facility-spec-card {
    padding: 20px;
  }
  .facility-spec-card dl > div {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding-bottom: 10px;
  }
  .facility-spec-card dd {
    font-size: 14px;
  }
  .facility-specs-network {
    padding: 20px;
  }
  .facility-specs-network dl > div {
    grid-template-columns: 80px 1fr;
    gap: 12px;
    padding-bottom: 10px;
  }
  .facility-specs-network dd {
    font-size: 14px;
  }
}

/* ───────── FIGURES & GALLERY ───────── */
figure { position: relative; margin: 0; }
figure img {
  width: 100%;
  border-radius: 8px;
  aspect-ratio: 16 / 10;
  object-fit: cover;
}
figcaption {
  margin-top: 14px;
  font-size: 13px;
  color: var(--c-fg-muted);
  letter-spacing: 0.01em;
}

.bleed {
  width: 100%;
}
.bleed img {
  aspect-ratio: 16 / 9;
  border-radius: 12px;
}

/* Facility photo group — gap matches spec-card grid (16px) for visual
   consistency across photos and spec cards. */
.facility-photos {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);   /* 16px */
}

.gallery {
  display: grid;
  gap: var(--space-md);   /* 16px — 스펙 카드 gap과 동일 */
}
.gallery--pair {
  grid-template-columns: 1fr 1fr;
}
.gallery--grid {
  grid-template-columns: repeat(3, 1fr);
}
.gallery--grid figure[data-span="2"] { grid-column: span 2; }

@media (max-width: 860px) {
  /* Galleries → horizontal scroll on mobile (cuts vertical scroll fatigue) */
  .gallery--pair,
  .gallery--grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);             /* 16px — 스펙 카드 gap과 동일 */
    margin: 0;                        /* edge-bleed 제거 — 섹션 gutter 안에 정렬 */
    padding: 0;                       /* 부모 섹션 gutter가 L/R 담당 */
    scrollbar-width: none;
    -ms-overflow-style: none;
  }
  .gallery--pair::-webkit-scrollbar,
  .gallery--grid::-webkit-scrollbar { display: none; }
  .gallery--pair > figure,
  .gallery--grid > figure {
    flex: 0 0 82%;
    scroll-snap-align: start;     /* 모든 모바일 marquee 통일 — 첫 카드 left-flush */
    margin: 0;
  }
  .gallery--grid > figure[data-span="2"] { flex-basis: 82%; }

  /* bleed images — cap height so single big shots don't dominate */
  .bleed img { max-height: 56vh; }
}

/* ───────── EXTERNAL CARD — FEARX Kitchen + mascot ───────── */
.external-card {
  display: grid;
  grid-template-columns: 220px 1fr auto;
  align-items: center;
  gap: 32px;
  padding: 32px;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 18px;
  position: relative;
  overflow: hidden;
  transition: border-color 300ms var(--easing),
              transform 400ms var(--easing),
              background-color 300ms var(--easing);
}
.external-card::before {
  /* faint yellow glow that gets stronger on hover — frames the mascot */
  content: "";
  position: absolute;
  top: -30%; left: -10%;
  width: 320px; height: 320px;
  background: radial-gradient(closest-side, rgba(255, 210, 0, 0.10), transparent 70%);
  pointer-events: none;
  transition: opacity 300ms var(--easing);
  opacity: 0.6;
}
.external-card:hover {
  border-color: var(--c-yellow);
  transform: translateY(-2px);
}
/* .external-card에 .reveal 클래스가 같이 붙으면 .reveal(1 class, 후순위)의
   transition: opacity/transform 선언이 shorthand로 .external-card의 transition을 통째 덮어
   hover 시 border-color가 instant 스냅됨. 2-class specificity로 두 transition을 병합.
   transform: 400ms 유지(hover lift 자연), opacity: 900ms 유지(reveal fade) */
.external-card.reveal {
  transition: opacity var(--reveal-dur) var(--easing),
              transform 400ms var(--easing),
              border-color 300ms var(--easing),
              background-color 300ms var(--easing);
}
.external-card-mascot {
  width: 220px; height: 220px;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.external-card-mascot img {
  display: block;
  max-width: 100%;
  max-height: 100%;
  width: auto;
  height: 100%;
  object-fit: contain;
  transform-origin: 50% 90%;
  transition: transform 500ms var(--easing);
}
/* Partner/X-card의 photo scale(1.04) hover 패턴과 통일 — 내부 motion으로 border transition 부드럽게 */
.external-card:hover .external-card-mascot img {
  transform: scale(1.04);
}
.external-card-arrow {
  position: relative;
  z-index: 1;
  align-self: center;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 88px;
  height: 88px;
  font-size: 40px;
  line-height: 1;
  color: var(--c-yellow);
  transition: transform 300ms var(--easing);
}
/* arrow translateX hover 제거 — book-card 톤 통일 */
.external-card-body {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  gap: 8px;
  min-width: 0;
}
.external-card-tag {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--c-yellow);
  font-weight: 700;
  margin-bottom: 4px;
}
.external-card-body h3 {
  font-size: 22px; font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
  color: var(--c-fg);
}
.external-card-body p {
  font-size: 14px;
  color: var(--c-fg-muted);
  line-height: 1.55;
  max-width: 520px;
}
@media (max-width: 720px) {
  .external-card {
    grid-template-columns: 140px 1fr auto;
    align-items: center;
    gap: 18px;
    padding: 22px;
  }
  .external-card-mascot {
    width: 140px; height: 140px;
    align-self: center;
  }
  .external-card-body {
    gap: 6px;
  }
  .external-card-body h3 { font-size: 17px; line-height: 1.3; }
  .external-card-body p { font-size: 13px; line-height: 1.5; }
  .external-card-tag { margin-bottom: 2px; }
  .external-card-arrow {
    width: 56px; height: 56px;
    font-size: 30px;
  }
}

@media (max-width: 460px) {
  .external-card {
    grid-template-columns: 96px 1fr auto;
    gap: 12px;
    padding: 20px;
  }
  .external-card-mascot {
    width: 96px; height: 96px;
    align-self: center;
  }
  .external-card-arrow {
    width: 40px; height: 40px;
    font-size: 24px;
  }
}

/* ───────── DINING MENU (live from danchelin) ───────── */
.dining-menu {
  display: flex; flex-direction: column; gap: 24px;
}
.dining-menu-head {
  display: flex; flex-direction: column; gap: 10px;
}
.dining-menu-tag {
  font-size: 10px;
  letter-spacing: 0.3em;
  color: var(--c-yellow);
  font-weight: 700;
}
.dining-menu-head h3 {
  font-size: clamp(22px, 2.4vw, 30px);
  font-weight: 800;
  letter-spacing: -0.02em;
  line-height: 1.25;
}
.dining-menu-head h3 .main { display: block; }
.dining-menu-head h3 .sub {
  display: block;
  font-size: 0.55em;
  font-weight: 500;
  color: var(--c-fg-muted);
  margin-top: 6px;
  letter-spacing: 0;
}
.dining-menu-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 12px;
  min-height: 240px;
}

/* Loaded: 3-row auto marquee (slower than Alumni — "browse, don't sprint")
   Gap 16px matches the site-wide .facility-photos policy. */
.dining-menu-grid[data-state="ready"] {
  display: flex;
  flex-direction: column;
  gap: 16px;
  overflow-x: hidden;
  overflow-y: visible;
  grid-template-columns: none;
  min-height: 0;
  background: none;
  border: none;
  padding: 0;
}
.dining-marquee-row {
  overflow-x: hidden;
  overflow-y: visible;
  display: flex;
  padding: 0;                  /* removed 8px vertical — row gap is owned by parent */
}
.dining-marquee-track {
  display: flex;
  gap: 16px;                   /* tile spacing — matches site-wide 16px policy */
  width: max-content;
  flex-shrink: 0;
  animation: alumni-marquee var(--marquee-duration, 140s) linear infinite;
  will-change: transform;
}
.dining-marquee-row:hover .dining-marquee-track {
  animation-play-state: paused;
}
.dining-marquee-track .dining-menu-tile {
  width: 220px;
  flex-shrink: 0;
  aspect-ratio: 1 / 1;
}

@media (max-width: 860px) {
  .dining-marquee-track .dining-menu-tile { width: 180px; }
}
@media (prefers-reduced-motion: reduce) {
  .dining-marquee-track { animation: none; }
}
.dining-menu-grid[data-state="loading"],
.dining-menu-grid[data-state="error"],
.dining-menu-grid[data-state="empty"] {
  place-items: center;
  display: grid;
  grid-template-columns: 1fr;
  background: var(--c-bg-elev);
  border-radius: 12px;
  border: 1px dashed var(--c-line);
}
.dining-menu-status {
  font-size: 14px;
  color: var(--c-fg-muted);
  padding: 32px;
  text-align: center;
}
.dining-menu-tile {
  position: relative;
  aspect-ratio: 1 / 1;
  overflow: hidden;
  border-radius: 10px;
  background: var(--c-bg-elev);
  border: none;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}
.dining-menu-tile img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
  transition: transform 600ms var(--easing);
}
.dining-menu-tile:hover img { transform: scale(1.04); }
.dining-menu-tile-meta {
  position: absolute;
  inset: auto 0 0 0;
  padding: 10px 12px;
  background: linear-gradient(180deg, transparent, rgba(10,10,10,0.85));
  font-size: 11px;
  color: var(--c-fg);
  letter-spacing: 0.02em;
  display: flex; justify-content: space-between; gap: 8px;
}
.dining-menu-tile-predicted {
  position: absolute;
  top: 10px; left: 10px;
  background: rgba(215, 20, 31, 0.85);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 3px 8px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}

/* ───────── PARTNERS ───────── */
.partners-grid {
  display: flex; flex-direction: column;
  gap: var(--space-md);
}
.partners-grid[data-state="loading"],
.partners-grid[data-state="error"] {
  text-align: center;
  padding: var(--space-xl) 0;
  color: var(--c-fg-muted);
}

.partner-big-card {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1.1fr);
  gap: 0;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  text-align: left;
  color: inherit; font: inherit;
  cursor: pointer;
  padding: 0;
  position: relative;
  width: 100%;
  transition: border-color 300ms var(--easing),
              transform 400ms var(--easing),
              background-color 300ms var(--easing);
}
.partner-big-card:hover {
  border-color: var(--c-yellow);
  transform: translateY(-2px);
}
.partner-big-card-media {
  aspect-ratio: 4/3;
  overflow: hidden;
  background: var(--c-bg);
  position: relative;
}
.partner-big-card-media img {
  width: 100%; height: 100%; object-fit: cover; display: block;
  transition: transform .5s;
}
.partner-big-card:hover .partner-big-card-media img { transform: scale(1.04); }

/* iPhone-style horizontal slide (right → left) + Ken Burns slow zoom on active.
   Outer .partner-slide handles translateX (transition);
   inner img handles scale (Ken Burns animation) — splitting prevents transform conflict. */
.partner-slide {
  position: absolute; inset: 0;
  transform: translate3d(100%, 0, 0);
  opacity: 0;
  /* opacity 변화는 클래스 토글 즉시 (transition 미포함) — outgoing이 슬라이드 끝까지 보임 */
  transition: transform 850ms cubic-bezier(0.32, 0.72, 0, 1);
  pointer-events: none;
  will-change: transform;
  overflow: hidden;
}
.partner-slide.is-active {
  transform: translate3d(0, 0, 0);
  opacity: 1;
}
.partner-slide.is-leaving {
  transform: translate3d(-100%, 0, 0);
  opacity: 1;   /* 슬라이드 빠지는 동안 계속 보이게 */
}
.partner-slide > img {
  width: 100%; height: 100%;
  object-fit: cover; display: block;
  transform: scale(1);
  animation: none;
  transition: transform 500ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.partner-slide.is-active > img {
  animation: partnerKenBurns 7000ms cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}
.partner-big-card:hover .partner-slide.is-active > img {
  animation-play-state: paused;
}
@keyframes partnerKenBurns {
  0%   { transform: scale(1.00); }
  100% { transform: scale(1.07); }
}
@media (prefers-reduced-motion: reduce) {
  .partner-slide { transition: none; transform: none; }
  .partner-slide.is-active { opacity: 1; }
  .partner-slide:not(.is-active) { opacity: 0; }
  .partner-slide > img,
  .partner-slide.is-active > img { animation: none; }
}

.partner-big-card-logo-overlay {
  position: absolute;
  left: var(--space-md); bottom: var(--space-md);
  display: flex; align-items: center;
  padding: 8px 14px;
  background: rgba(10,10,10,0.78);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  -webkit-backdrop-filter: blur(6px);
          backdrop-filter: blur(6px);
}
.partner-big-card-logo-overlay img {
  height: 20px;
  width: auto; max-width: 200px;
  display: block;
  object-fit: contain;
}
.partner-big-card-photo-badge {
  position: absolute; top: var(--space-md); right: var(--space-md);
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--c-bg); background: var(--c-yellow);
  padding: 6px 12px; border-radius: 999px;
  text-transform: uppercase;
}

.partner-big-card-body {
  padding: var(--space-xl);
  display: flex; flex-direction: column; gap: var(--space-md);
  justify-content: center;
}
.partner-big-card-tag {
  font-size: 10px; font-weight: 700; letter-spacing: 0.24em;
  color: var(--c-yellow); text-transform: uppercase;
}
.partner-big-card-body h3 {
  font-size: clamp(28px, 3vw, 40px); font-weight: 800;
  letter-spacing: 0.01em; line-height: 1.15; margin: 0;
  text-transform: uppercase;
}
.partner-big-card-body p {
  font-size: 15px; line-height: 1.65; color: var(--c-fg-muted); margin: 0;
}
.partner-big-card-amenities {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-top: 4px;
}
.partner-big-card-amenities span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid var(--c-line); border-radius: 999px;
  color: var(--c-fg);
}
.partner-big-card-cta {
  font-size: 12px; font-weight: 700; letter-spacing: 0.16em;
  color: var(--c-yellow); text-transform: uppercase;
  margin-top: 4px;
}

.partner-big-card--placeholder {
  opacity: 0.5;
  border-style: dashed;
  cursor: default;
  pointer-events: none;
}
.partner-big-card--placeholder:hover { transform: none; }
.partner-big-card-media--empty {
  aspect-ratio: 4/3;
  background: repeating-linear-gradient(
    45deg, var(--c-bg-elev) 0 12px, var(--c-bg) 12px 24px
  );
}

/* ───────── PARTNER MODAL ───────── */
.partner-modal-backdrop {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: none;
  padding: var(--space-lg);
  overflow-y: auto;
}
.partner-modal-backdrop.is-open {
  display: flex;
  align-items: safe center;
  justify-content: center;
}
.partner-modal {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  width: min(1100px, 100%);
  max-width: 1100px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}
.partner-modal-head {
  display: flex; align-items: center; gap: 14px;
  padding: var(--card-pad);
  border-bottom: 1px solid var(--c-line);
}
.partner-modal-no {
  font-size: 11px; letter-spacing: 0.3em;
  color: var(--c-yellow); font-weight: 700;
}
.partner-modal-tag {
  font-size: 11px; letter-spacing: 0.24em; text-transform: uppercase;
  color: var(--c-fg-muted);
  padding: 4px 10px;
  border: 1px solid var(--c-line); border-radius: 999px;
  order: 2;
}
.partner-modal-title {
  font-size: clamp(20px, 2.2vw, 26px);
  font-weight: 800; letter-spacing: -0.01em;
  margin: 0; flex: 0 0 auto;
  min-width: 0;
  display: flex; align-items: center;
  /* Head order (PC + mobile 통일): [04] [로고] [OFFICIAL PARTNER pill] ... [×] */
  order: 1;
}
.partner-modal-logo {
  height: 30px;
  width: auto; max-width: 260px;
  display: block;
  object-fit: contain;
}
.partner-modal-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-fg);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
  order: 3;
  margin-left: auto;
}
.partner-modal-close:hover {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}
.partner-modal-body {
  padding: var(--card-pad);
  display: flex; flex-direction: column;
  gap: var(--space-md);
}
.partner-modal-stage {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  height: min(70vh, 700px);
}
.partner-modal-track {
  display: flex;
  width: 100%; height: 100%;
  transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.partner-modal-slide {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  display: block;
  background: var(--c-bg);
}
.partner-modal-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}
.partner-modal-caption {
  position: absolute; left: 12px; bottom: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.18em;
  color: var(--c-fg); text-transform: uppercase;
  background: rgba(10,10,10,0.78);
  padding: 6px 12px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
}
.partner-modal-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(10,10,10,0.78);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-fg);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  transition: border-color .2s, color .2s, background .2s;
}
.partner-modal-nav:hover {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}
.partner-modal-nav--prev { left: 12px; }
.partner-modal-nav--next { right: 12px; }
.partner-modal-counter {
  position: absolute; right: 12px; top: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--c-fg);
  background: rgba(10,10,10,0.78);
  padding: 4px 10px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
}
.partner-modal-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-xs);
}
.partner-modal-thumb {
  aspect-ratio: 4/3;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s;
}
.partner-modal-thumb img {
  width: 100%; height: 100%; object-fit: cover; display: block;
}
.partner-modal-thumb:hover { border-color: var(--c-fg-muted); }
.partner-modal-thumb.is-active { border-color: var(--c-yellow); }
.partner-modal-footer {
  padding: var(--card-pad);
  border-top: 1px solid var(--c-line);
  display: flex; flex-wrap: wrap; align-items: center; gap: var(--space-md);
}
.partner-modal-amenities {
  display: flex; flex-wrap: wrap; gap: 8px;
  flex: 1; min-width: 0;
}
.partner-modal-amenities span {
  font-size: 11px; font-weight: 600; letter-spacing: 0.06em;
  padding: 5px 10px;
  border: 1px solid var(--c-line); border-radius: 999px;
  color: var(--c-fg);
}
.partner-modal-cta {
  font-size: 12px; font-weight: 700; letter-spacing: 0.14em;
  text-transform: uppercase;
  padding: 10px 18px;
  border: 1px solid var(--c-yellow);
  border-radius: 999px;
  background: var(--c-yellow);
  color: var(--c-bg);
  text-decoration: none;
  transition: opacity .2s;
}
.partner-modal-cta:hover { opacity: 0.85; }
body.has-partner-modal-open { overflow: hidden; }

@media (max-width: 720px) {
  .partner-big-card { grid-template-columns: 1fr; }
  .partner-big-card-media,
  .partner-big-card-media--empty { aspect-ratio: 16/10; }
  .partner-big-card-body { padding: var(--space-lg); gap: 12px; }
  .partner-big-card-body h3 { font-size: 24px; }
  .partner-big-card-body p { font-size: 14px; }
  .partner-big-card-logo-overlay { left: 12px; bottom: 12px; padding: 6px 10px; }
  .partner-big-card-logo-overlay img { height: 16px; max-width: 160px; }
  .partner-big-card-photo-badge { top: 12px; right: 12px; font-size: 10px; padding: 4px 10px; }

  .partner-modal-backdrop { padding: var(--space-xl) 0; }
  .partner-modal {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .partner-modal-head { padding: var(--space-md); gap: 8px; }
  /* head order는 base에서 통일 — 모바일은 사이즈만 압축 */
  .partner-modal-tag {
    font-size: 10px;
    letter-spacing: 0.18em;
    padding: 3px 8px;
  }
  .partner-modal-logo { height: 22px; max-width: 160px; }
  .partner-modal-title { font-size: 18px; }
  .partner-modal-close { width: 32px; height: 32px; font-size: 16px; }
  .partner-modal-body { padding: var(--space-md); gap: 10px; }
  .partner-modal-stage { height: min(60vh, 600px); }
  /* 사진 많을 때 grid 세로 폭주 방지 — 단일 행 가로 스크롤 (iPhone Photos 패턴, lightbox와 통일) */
  .partner-modal-thumbs {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .partner-modal-thumbs::-webkit-scrollbar { display: none; }
  .partner-modal-thumb {
    flex: 0 0 64px;
    aspect-ratio: 4/3;
  }
  .partner-modal-nav { width: 36px; height: 36px; font-size: 18px; }
  .partner-modal-footer { padding: var(--space-md); flex-direction: column; align-items: stretch; gap: var(--space-sm); }
  .partner-modal-cta { text-align: center; }
}

/* ───────── ALUMNI LOGO STRIP (above the photo grid) ───────── */
.logo-strip {
  overflow: hidden;
  margin: 28px 0 40px;
  padding: 24px 0;
  position: relative;
  display: flex;
  flex-direction: column;
  gap: 28px;
}
/* fade gradients removed per spec — alumni logo strip exposes hard edges */
.logo-strip-track {
  display: flex;
  gap: 0;
  width: max-content;
  will-change: transform;
}
.logo-strip-track > .logo-chip {
  margin-right: 64px;
}
.logo-strip-row-a {
  animation: logo-marquee-l 55s linear infinite;
  position: relative;
  z-index: 1;
}
.logo-strip-row-b {
  animation: logo-marquee-r 55s linear infinite;
  position: relative;
  z-index: 1;
}
/* Row containing the hovered chip jumps above the other row, so its tooltip
   is never obscured by sibling logos. */
.logo-strip-row-a:has(.logo-chip:hover),
.logo-strip-row-b:has(.logo-chip:hover) {
  z-index: 5;
}
.logo-chip:hover {
  z-index: 10;
}
@keyframes logo-marquee-l {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
@keyframes logo-marquee-r {
  from { transform: translate3d(-50%, 0, 0); }
  to   { transform: translate3d(0, 0, 0); }
}
.logo-strip:hover .logo-strip-track { animation-play-state: paused; }
.logo-chip {
  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  height: 140px;
  width: 220px;
  padding: 0 12px;
  transition: transform 240ms var(--easing), opacity 240ms var(--easing);
}
.logo-chip > img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: contain;
  pointer-events: none;
}
.logo-chip:hover {
  transform: scale(1.08);
}
/* Hover tooltip — team name */
.logo-chip::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: calc(100% + 10px);
  left: 50%;
  transform: translateX(-50%) translateY(4px);
  background: var(--c-bg);
  color: var(--c-fg);
  border: 1px solid var(--c-line);
  padding: 6px 12px;
  border-radius: 8px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: -0.01em;
  white-space: nowrap;
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--easing),
              transform 180ms var(--easing);
  z-index: 5;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.45);
}
.logo-chip::before {
  content: "";
  position: absolute;
  bottom: calc(100% + 4px);
  left: 50%;
  transform: translateX(-50%);
  border: 6px solid transparent;
  border-top-color: var(--c-line);
  opacity: 0;
  pointer-events: none;
  transition: opacity 180ms var(--easing);
  z-index: 5;
}
.logo-chip:hover::after {
  opacity: 1;
  transform: translateX(-50%) translateY(0);
}
.logo-chip:hover::before { opacity: 1; }

/* Top row tooltips flip below the chip so they don't get clipped by the
   .logo-strip's top edge. */
.logo-strip-row-a .logo-chip::after {
  bottom: auto;
  top: calc(100% + 10px);
  transform: translateX(-50%) translateY(-4px);
}
.logo-strip-row-a .logo-chip::before {
  bottom: auto;
  top: calc(100% + 4px);
  border-top-color: transparent;
  border-bottom-color: var(--c-line);
}
.logo-strip-row-a .logo-chip:hover::after {
  transform: translateX(-50%) translateY(0);
}
@media (prefers-reduced-motion: reduce) {
  .logo-strip-track { animation: none; }
}
@media (max-width: 720px) {
  .logo-strip { margin: 20px 0 28px; gap: 18px; padding: 16px 0; }
  .logo-chip { height: 90px; width: 150px; padding: 0 8px; }
  .logo-chip > img { max-width: 100%; max-height: 100%; }
  .logo-strip-track { gap: 0; }
  .logo-strip-track > .logo-chip { margin-right: 40px; }
  .logo-strip::before, .logo-strip::after { width: 70px; }
}

/* ───────── GUEST TEAMS ───────── */
.teams-toolbar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 8px;
}
.teams-count {
  font-size: 12px;
  letter-spacing: 0.18em;
  color: var(--c-fg-muted);
  text-transform: uppercase;
}
.teams-search {
  flex: 0 1 320px;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  padding: 10px 16px;
  color: var(--c-fg);
  font: inherit;
  font-size: 13px;
  outline: none;
  transition: border-color 200ms;
}
.teams-search:focus { border-color: var(--c-yellow); }
.teams-search::placeholder { color: var(--c-fg-dim); }
.teams-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 16px;
}
.teams-grid[data-state="loading"],
.teams-grid[data-state="empty"],
.teams-grid[data-state="error"] {
  grid-template-columns: 1fr;
}

/* When loaded: 4-row auto-scrolling marquee — "graduation wall" feel.
   Each row scrolls leftward at its own pace; pauses on hover or when
   the search input is active. */
.teams-grid[data-state="ready"] {
  display: flex;
  flex-direction: column;
  /* gap: 0 — row 사이 거리는 .alumni-marquee-row의 padding(xs × 2 = 16px)로
     만든다. 그래야 카드 좌우 gap(md=16px)과 정확히 균등. md gap을 그대로 쓰면
     padding+gap+padding = 32px가 되어 column보다 두 배 벌어짐. */
  gap: 0;
  overflow-x: hidden;
  overflow-y: visible;
  grid-template-columns: none;
  margin: 0;                         /* edge-bleed 제거 — 섹션 gutter 안에 정렬 */
  padding: 0;                        /* 부모 섹션의 gutter padding 사용 */
  /* fade mask removed per spec — alumni person photo marquee exposes hard edges */
}
.alumni-marquee-row {
  overflow-x: hidden;
  overflow-y: visible;
  display: flex;
  /* hover lift(translateY -3px) + yellow border 클립 방지용 Y 페딩.
     overflow-x:hidden + overflow-y:visible 조합이 Y axis도 auto로 컴퓨트되는 브라우저 케이스 대응 */
  padding: var(--space-xs) 0;
}
.alumni-marquee-track {
  display: flex;
  gap: var(--space-md);              /* 16px — 사이트 정책 (was 14) */
  width: max-content;
  flex-shrink: 0;
  animation: alumni-marquee var(--marquee-duration, 90s) linear infinite;
  will-change: transform;
}
@keyframes alumni-marquee {
  from { transform: translate3d(0, 0, 0); }
  to   { transform: translate3d(-50%, 0, 0); }
}
.alumni-marquee-row:hover .alumni-marquee-track,
.teams-grid.is-filtered .alumni-marquee-track {
  animation-play-state: paused;
}
.alumni-marquee-track .team-card {
  width: 280px;
  flex-shrink: 0;
}
.alumni-marquee-track .team-card-photo {
  aspect-ratio: 4 / 3;
}
.team-card.is-hidden { display: none; }

@media (max-width: 860px) {
  /* fade mask removed per spec */
  .alumni-marquee-track .team-card { width: 220px; }
  .team-card-body { padding: var(--space-md); }   /* 16px 사방 균일 */
  .team-card-name { font-size: 13px; }
}

@media (prefers-reduced-motion: reduce) {
  .alumni-marquee-track { animation: none; }
}
.teams-grid[data-state="loading"],
.teams-grid[data-state="error"],
.teams-grid[data-state="empty"] {
  grid-template-columns: 1fr;
  place-items: center;
  min-height: 220px;
  background: var(--c-bg-elev);
  border-radius: 12px;
  border: 1px dashed var(--c-line);
}
.team-card {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 12px;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  cursor: pointer;
  font: inherit;
  color: var(--c-fg);
  text-align: left;
  padding: 0;
  transition: transform 300ms var(--easing),
              border-color 300ms var(--easing);
}
.team-card:hover {
  transform: translateY(-3px);
  border-color: var(--c-yellow);
}
.team-card.is-hidden { display: none; }
.team-card-photo {
  position: relative;
  aspect-ratio: 4 / 3;
  overflow: hidden;
}
.team-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  aspect-ratio: auto;
  border-radius: 0;
  transition: transform 600ms var(--easing);
}
.team-card:hover .team-card-photo img { transform: scale(1.05); }
.team-card-count {
  position: absolute; top: 10px; right: 10px;
  background: rgba(10, 10, 10, 0.7);
  color: var(--c-fg);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  padding: 4px 8px;
  border-radius: 999px;
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
}
.team-card-body {
  padding: var(--space-md);   /* 16px 사방 균일 */
}
.team-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.3;
  margin-bottom: 4px;
}
.team-card-meta {
  font-size: 11px;
  color: var(--c-fg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}

/* Lightbox — shell mirrors Partner modal (frosted glass + modal box + slide track).
   Shared by Dining Menu + Guest Teams. */
.lb {
  position: fixed; inset: 0; z-index: 1000;
  background: rgba(0,0,0,0.55);
  -webkit-backdrop-filter: blur(20px);
          backdrop-filter: blur(20px);
  display: none;
  padding: var(--space-lg);
  overflow-y: auto;
  -webkit-user-select: none;
          user-select: none;
}
.lb[data-open="true"] {
  display: flex;
  align-items: safe center;
  justify-content: center;
}
.lb-modal {
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  width: min(1100px, 100%);
  max-width: 1100px;
  display: flex; flex-direction: column;
  overflow: hidden;
  box-shadow: 0 30px 60px rgba(0,0,0,0.6);
}

.lb-head {
  display: flex; align-items: center; gap: 14px;
  padding: var(--card-pad);
  border-bottom: 1px solid var(--c-line);
}
.lb-head-text {
  flex: 1; min-width: 0;
  display: flex; flex-direction: column; gap: 4px;
}
.lb-title {
  margin: 0;
  font-size: clamp(18px, 2vw, 22px);
  font-weight: 800; letter-spacing: -0.01em;
  color: var(--c-fg);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-subtitle {
  font-size: 12px; font-weight: 600;
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--c-fg-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.lb-title[data-empty="true"],
.lb-subtitle[data-empty="true"] { display: none; }
.lb-close {
  width: 36px; height: 36px;
  background: transparent;
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-fg);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 18px; line-height: 1;
  transition: border-color .2s, color .2s;
  flex-shrink: 0;
}
.lb-close:hover {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}

.lb-body {
  padding: var(--card-pad);
  display: flex; flex-direction: column;
  gap: var(--space-md);
}

.lb-stage {
  position: relative;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  height: min(70vh, 700px);
}
.lb-track {
  display: flex;
  width: 100%; height: 100%;
  transition: transform 700ms cubic-bezier(0.32, 0.72, 0, 1);
  will-change: transform;
}
.lb-slide {
  flex: 0 0 100%;
  width: 100%; height: 100%;
  display: block;
  background: var(--c-bg);
}
.lb-slide img {
  width: 100%; height: 100%;
  object-fit: contain;
  display: block;
}

.lb-nav {
  position: absolute; top: 50%; transform: translateY(-50%);
  width: 44px; height: 44px;
  background: rgba(10,10,10,0.78);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  color: var(--c-fg);
  cursor: pointer;
  display: grid; place-items: center;
  font-size: 22px; line-height: 1;
  transition: border-color .2s, color .2s, background .2s, opacity .2s;
}
.lb-nav:hover {
  border-color: var(--c-yellow);
  color: var(--c-yellow);
}
.lb-nav:disabled { opacity: 0.3; cursor: default; }
.lb-nav--prev { left: 12px; }
.lb-nav--next { right: 12px; }
.lb-counter {
  position: absolute; right: 12px; top: 12px;
  font-size: 11px; font-weight: 700; letter-spacing: 0.14em;
  color: var(--c-fg);
  background: rgba(10,10,10,0.78);
  padding: 4px 10px;
  border: 1px solid var(--c-line);
  border-radius: 999px;
}

.lb-thumbs {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(96px, 1fr));
  gap: var(--space-xs);
}
.lb-thumbs[data-empty="true"] { display: none; }
.lb-thumb {
  aspect-ratio: 4/3;
  background: var(--c-bg);
  border: 1px solid var(--c-line);
  border-radius: 4px;
  overflow: hidden;
  cursor: pointer;
  padding: 0;
  transition: border-color .15s;
}
.lb-thumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
.lb-thumb:hover { border-color: var(--c-fg-muted); }
.lb-thumb[data-active="true"],
.lb-thumb.is-active {
  border-color: var(--c-yellow);
}

@media (max-width: 720px) {
  .lb { padding: var(--space-xl) 0; }
  .lb-modal {
    border-radius: 0;
    border-left: none;
    border-right: none;
  }
  .lb-head { padding: var(--space-md); gap: 10px; }
  .lb-body { padding: var(--space-md); gap: 10px; }
  .lb-stage { height: min(60vh, 600px); }
  .lb-nav { width: 36px; height: 36px; font-size: 18px; }
  /* 사진 많을 때 grid 세로 폭주 방지 — 단일 행 가로 스크롤 (iPhone Photos 패턴) */
  .lb-thumbs {
    display: flex;
    grid-template-columns: none;
    overflow-x: auto;
    overflow-y: hidden;
    scrollbar-width: none;
    -ms-overflow-style: none;
    padding-bottom: 2px;
  }
  .lb-thumbs::-webkit-scrollbar { display: none; }
  .lb-thumb {
    flex: 0 0 64px;
    aspect-ratio: 4/3;
  }
}

/* ───────── MEDIA ───────── */
.media {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.media-inner { max-width: var(--max-w); margin: 0 auto; }
.media-head { margin-bottom: 56px; }
.media-title {
  font-size: clamp(32px, 4.4vw, 52px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 14px 0 12px;
  line-height: 1.1;
}
.media-sub {
  color: var(--c-fg-muted);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 640px;
  line-height: 1.6;
}
.media-sub--wide {
  max-width: none;
  white-space: nowrap;
}
@media (max-width: 860px) {
  .media-sub--wide { white-space: normal; max-width: 100%; }
}
.media-block { margin-bottom: 64px; }
.media-block:last-child { margin-bottom: 0; }
.media-block-title {
  display: flex; align-items: center; gap: 12px;
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin-bottom: 22px;
}
.media-block-tag {
  font-size: 10px;
  letter-spacing: 0.3em;
  font-weight: 700;
  color: var(--c-bg);
  background: var(--c-yellow);
  padding: 4px 10px;
  border-radius: 999px;
}

/* YouTube cards */
.yt-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 16px;
}
.yt-card {
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  transition: border-color 300ms var(--easing);
}
.yt-card:hover { border-color: var(--c-yellow); }
.yt-embed {
  position: relative;
  width: 100%;
  aspect-ratio: 16 / 9;
  background: #000;
}
.yt-embed iframe {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  border: 0;
}
.yt-card-body { padding: var(--space-md); }   /* 16px 사방 균일 */
.yt-source {
  font-size: 11px;
  letter-spacing: 0.18em;
  text-transform: uppercase;
  color: var(--c-yellow);
  font-weight: 700;
  margin-bottom: 4px;
}
.yt-title {
  font-size: 15px;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--c-fg);
  line-height: 1.35;
}

/* When yt-card is an anchor (X posts) it should still look like a button */
a.yt-card { color: inherit; text-decoration: none; }

/* Thumbnail overlays (X badge + play icon) — share .yt-embed */
.yt-embed > img {
  width: 100%; height: 100%;
  object-fit: cover;
  position: absolute; inset: 0;
}
.yt-embed-badge {
  position: absolute;
  top: 10px; right: 10px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 999px;
  color: #fff;
  font-size: 13px;
  font-weight: 700;
  letter-spacing: 0;
}
.yt-embed-play {
  position: absolute;
  top: 50%; left: 50%;
  transform: translate(-50%, -50%);
  width: 60px; height: 60px;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.72);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.15);
  border-radius: 999px;
  color: #fff;
  font-size: 18px;
  padding-left: 4px;  /* visual centering of ▶ */
  transition: background-color 200ms, transform 200ms, border-color 200ms;
}
a.yt-card:hover .yt-embed-play {
  background: var(--c-yellow);
  border-color: var(--c-yellow);
  color: var(--c-bg);
  transform: translate(-50%, -50%) scale(1.06);
}

@media (max-width: 1080px) {
  .yt-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 720px) {
  .yt-grid {
    display: flex;
    flex-wrap: nowrap;
    overflow-x: auto;
    overscroll-behavior-inline: contain;
    scroll-snap-type: x mandatory;
    -webkit-overflow-scrolling: touch;
    gap: var(--space-md);             /* 16px */
    margin: 0;                        /* edge-bleed 제거 */
    padding: 0;                       /* 부모 섹션의 gutter padding 사용 */
    scrollbar-width: none;
  }
  .yt-grid::-webkit-scrollbar { display: none; }
  .yt-grid > .yt-card { flex: 0 0 82%; scroll-snap-align: start; }  /* 첫 카드 left-flush */
}

/* ───────── BOOK A TOUR ───────── */
.book-tour {
  padding: var(--section-pad-y) var(--section-pad-x);
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.book-tour-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.book-tour-title {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin: 14px 0 12px;
  line-height: 1.15;
}
.book-tour-sub {
  color: var(--c-fg-muted);
  font-size: clamp(15px, 1.4vw, 18px);
  max-width: 640px;
  margin-bottom: 48px;
  line-height: 1.6;
}
.book-tour-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 16px;
}
.book-card {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 10px;
  padding: var(--card-pad);         /* 24px 사방 — 사이트 정책 통일 (PC + 모바일 동일) */
  min-height: 132px;
  text-align: center;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  color: var(--c-fg);
  transition: border-color 300ms var(--easing),
              transform 400ms var(--easing),
              background-color 300ms var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .book-card:hover {
    border-color: var(--c-yellow);
    transform: translateY(-2px);
  }
}
.book-card-head {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 10px;
  margin: 0;
}
.book-card-logo {
  height: 26px;
  width: auto;
  max-width: 120px;
  flex-shrink: 0;
  opacity: 0.92;
  border-radius: 6px;        /* square logos like Viator get a soft corner */
  transition: opacity 250ms var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .book-card:hover .book-card-logo { opacity: 1; }
}
.book-card-name {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.02em;
  color: var(--c-fg-muted);
  transition: color 250ms var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .book-card:hover .book-card-name { color: var(--c-yellow); }
}
.book-card p {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: -0.01em;
  line-height: 1.4;
  margin: 0;
  max-width: 360px;
}
.book-card-arrow {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  color: var(--c-yellow);
  transition: transform 300ms var(--easing);
}
@media (hover: hover) and (pointer: fine) {
  .book-card:hover .book-card-arrow {
    transform: translateY(-50%) translateX(6px);
  }
}

@media (max-width: 720px) {
  .book-tour-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--gap-card);          /* 16px — 사이트 정책 통일 */
  }
  .book-card {
    /* padding은 base에서 var(--card-pad) 24px 사방 균일 (PC와 동일) */
    min-height: 110px;
  }
  .book-card-head {
    flex-direction: column;
    gap: 10px;
  }
  .book-card-logo {
    height: 36px;
    max-width: 100%;
  }
  .book-card-name {
    font-size: 13px;
  }
  .book-card p,
  .book-card-arrow {
    display: none;
  }
}

/* ───────── LATEST ON X ───────── */
.xnews {
  padding: 14vh var(--gutter) 8vh;
  background: var(--c-bg);
  border-top: 1px solid var(--c-line);
}
.xnews-inner { max-width: var(--max-w); margin: 0 auto; }
.xnews-head { margin-bottom: 40px; }
.xnews-title {
  font-size: clamp(28px, 4vw, 44px);
  font-weight: 800;
  letter-spacing: -0.02em;
  margin-top: 12px;
}
.xnews-title a {
  background: linear-gradient(transparent 70%, rgba(255, 210, 0, 0.4) 70%);
  transition: background-size 200ms;
}
.xnews-title a:hover { color: var(--c-yellow); }
.xnews-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
  gap: 14px;
  min-height: 240px;
}
.xnews-grid[data-state="loading"],
.xnews-grid[data-state="empty"],
.xnews-grid[data-state="error"] {
  grid-template-columns: 1fr;
  place-items: center;
  background: var(--c-bg-elev);
  border-radius: 12px;
  border: 1px dashed var(--c-line);
}

/* Loaded: click-and-drag horizontal scroll. Visitor presses → drags to browse.
   On first viewport entry, the track auto-nudges right→back-left so the
   visitor knows it scrolls horizontally. Width aligned with other sections. */
.xnews-grid[data-state="ready"] {
  display: flex;
  flex-wrap: nowrap;
  overflow-x: auto;
  overscroll-behavior-inline: contain;
  -webkit-overflow-scrolling: touch;
  gap: 14px;
  min-height: 0;
  margin: 0;
  padding: var(--space-md) 0;          /* T/B 16px 동일, L/R 0 (캐러셀 컨테이너가 L/R 담당) */
  grid-template-columns: none;
  scrollbar-width: none;
  cursor: grab;
  -webkit-user-select: none;
          user-select: none;
}
.xnews-grid[data-state="ready"]::-webkit-scrollbar { display: none; }
.xnews-grid[data-state="ready"].is-grabbing { cursor: grabbing; }
.xnews-grid[data-state="ready"] .x-card {
  /* PC: 4 visible per page → card width = (track - 3 gaps) / 4. Gap is 14px → 42px total. */
  flex: 0 0 calc((100% - 42px) / 4);
  scroll-snap-align: start;
}
.xnews-grid[data-state="ready"] {
  scroll-snap-type: x mandatory;
}
.xnews-grid[data-state="ready"] .x-card img { -webkit-user-drag: none; user-drag: none; pointer-events: none; }
.xnews-grid[data-state="ready"].is-grabbing .x-card { pointer-events: none; }

/* Carousel container + arrow buttons (PC only) */
.xnews-carousel {
  position: relative;
}
.xnews-nav {
  position: absolute;
  top: 50%;
  transform: translateY(-50%);
  width: 48px;
  height: 48px;
  display: grid;
  place-items: center;
  border-radius: 999px;
  border: none;
  background: var(--c-yellow);
  color: var(--c-bg);
  cursor: pointer;
  z-index: 3;
  box-shadow: 0 6px 18px rgba(0, 0, 0, 0.35);
  transition: transform 250ms var(--easing),
              background-color 200ms var(--easing),
              opacity 200ms var(--easing);
}
.xnews-nav:hover {
  background: var(--c-yellow-2);
  transform: translateY(-50%) scale(1.08);
}
.xnews-nav:active {
  transform: translateY(-50%) scale(0.96);
}
.xnews-nav[disabled] {
  opacity: 0;
  pointer-events: none;
}
.xnews-nav-prev { left: -8px; }
.xnews-nav-next { right: -8px; }

@media (max-width: 1024px) {
  .xnews-nav { display: none !important; }
  .xnews-grid[data-state="ready"] .x-card { flex-basis: 260px; }
  .xnews-grid[data-state="ready"] {
    scroll-snap-type: none;
    /* edge-bleed 제거 — 섹션 gutter 안에 정렬 (T/B = L/R = 0, 부모가 gutter 담당) */
    margin: 0;
    padding: 0;
  }
}

/* "Drag →" hint — deprecated visually. Kept opacity-0 to preserve the
   JS that adds/removes the is-hinted class without runtime errors. */
.xnews-block { position: relative; }
.xnews-hint {
  display: none !important;
}
.xnews-block.is-hinted .xnews-hint {
  opacity: 1;
  transform: translateX(0);
  animation: xnews-hint-pulse 3.2s ease-out 0.8s 2;
}
.xnews-block.is-scrolled .xnews-hint {
  opacity: 0;
  transform: translateX(8px);
}
@keyframes xnews-hint-pulse {
  0%, 100% { transform: translateX(0); }
  50%      { transform: translateX(8px); }
}

.x-card {
  display: flex;
  flex-direction: column;
  background: var(--c-bg-elev);
  border: 1px solid var(--c-line);
  border-radius: 14px;
  overflow: hidden;
  color: var(--c-fg);
  text-decoration: none;
  transition: border-color 300ms var(--easing),
              transform 400ms var(--easing);
}
.x-card:hover {
  border-color: var(--c-yellow);
  transform: translateY(-3px);
}
.x-card-photo {
  position: relative;
  aspect-ratio: 4 / 5;
  overflow: hidden;
  background: var(--c-bg);
}
.x-card-photo img {
  width: 100%; height: 100%;
  object-fit: cover;
  transition: transform 600ms var(--easing);
}
.x-card:hover .x-card-photo img { transform: scale(1.04); }
.x-card-x-badge {
  position: absolute;
  top: 12px; right: 12px;
  width: 30px; height: 30px;
  display: grid; place-items: center;
  background: rgba(10, 10, 10, 0.78);
  -webkit-backdrop-filter: blur(8px);
          backdrop-filter: blur(8px);
  border-radius: 999px;
  color: #fff;
}
.x-card-body {
  padding: var(--space-md);   /* 16px 사방 균일 */
  display: flex; flex-direction: column; gap: 10px;
  flex: 1;
}
.x-card-caption {
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-fg);
  display: -webkit-box;
  -webkit-line-clamp: 4;
  -webkit-box-orient: vertical;
  overflow: hidden;
  letter-spacing: -0.005em;
}
.x-card-meta {
  margin-top: auto;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 11px;
  color: var(--c-fg-muted);
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
}
.x-card-handle { color: var(--c-yellow); }

.xnews-all {
  display: inline-block;
  margin-top: 28px;
  font-size: 14px;
  color: var(--c-fg-muted);
  transition: color 200ms;
}
.xnews-all:hover { color: var(--c-yellow); }

/* ───────── BOTTOM CTA ───────── */
.bottom-cta {
  padding: var(--section-pad-y) var(--section-pad-x);
  background:
    radial-gradient(80% 60% at 50% 0%, rgba(255, 210, 0, 0.08), transparent 70%),
    var(--c-bg);
  text-align: center;
  border-top: 1px solid var(--c-line);
}
.bottom-cta-inner {
  max-width: var(--max-w);
  margin: 0 auto;
}
.bottom-cta h2 {
  font-size: clamp(28px, 4vw, 48px);
  font-weight: 800;
  line-height: 1.2;
  letter-spacing: -0.02em;
  margin: 18px 0 36px;
}
@media (max-width: 720px) {
  .bottom-cta h2 {
    font-size: clamp(20px, 5.5vw, 26px);
    white-space: nowrap;
  }
}
.bottom-cta-actions {
  display: flex; justify-content: center; gap: 12px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}
.bottom-cta-actions .btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}
.bottom-cta-actions .btn svg { flex-shrink: 0; }
.bottom-cta-helper {
  max-width: 420px;
  margin: 0 auto 12px;
  font-size: 13px;
  line-height: 1.5;
  color: var(--c-fg-muted);
  letter-spacing: 0.005em;
}
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  height: 48px;
  padding: 0 28px;
  border-radius: 999px;
  font-weight: 600;
  font-size: 15px;
  font-family: inherit;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
  box-sizing: border-box;
  transition: transform 200ms var(--easing), background-color 200ms, color 200ms;
  border: 1px solid transparent;
}
.btn--primary {
  background: var(--c-yellow);
  color: var(--c-bg);
}
.btn--primary:hover { transform: translateY(-2px); }
.btn--ghost {
  background: transparent;
  color: var(--c-fg);
  border-color: var(--c-line);
}
.btn--ghost:hover { border-color: var(--c-fg); }
/* ───────── BOTTOM CTA — Google Maps inline link ───────── */
.bottom-cta-map {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 13px;
  color: var(--c-fg-muted);
  letter-spacing: 0.02em;
  transition: color 200ms;
  margin-top: 8px;
}
.bottom-cta-map:hover { color: var(--c-yellow); }
.bottom-cta-map svg { flex-shrink: 0; }

/* ───────── TOAST ───────── */
.toast {
  position: fixed;
  bottom: 32px;
  left: 50%;
  transform: translate(-50%, 16px);
  opacity: 0;
  pointer-events: none;
  background: var(--c-yellow);
  color: var(--c-bg);
  font-size: 14px;
  font-weight: 700;
  letter-spacing: -0.005em;
  padding: 12px 22px;
  border-radius: 999px;
  box-shadow: 0 14px 40px rgba(255, 210, 0, 0.35);
  transition: opacity 220ms var(--easing), transform 220ms var(--easing);
  z-index: 300;
}
.toast[data-show="true"] {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* ───────── FOOTER ───────── */
.site-footer {
  padding: var(--gap-block) var(--gutter);   /* 48px T/B + gutter L/R 균일 */
  text-align: center;
  font-size: 12px;
  color: var(--c-fg-dim);
  border-top: 1px solid var(--c-line);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 24px;
}
.social-row {
  display: flex;
  gap: 8px;
}
.social-row a {
  width: 40px; height: 40px;
  display: grid; place-items: center;
  color: var(--c-fg-muted);
  border: 1px solid var(--c-line);
  border-radius: 999px;
  transition: color 200ms, border-color 200ms, background-color 200ms;
}
.social-row a:hover {
  color: var(--c-bg);
  background: var(--c-yellow);
  border-color: var(--c-yellow);
}

/* ─────────────────────────────────────────────────────────────
   REVEAL ANIMATIONS — single, restrained pattern
   ───────────────────────────────────────────────────────────── */
.reveal {
  opacity: 0;
  transform: translateY(28px);
  transition: opacity var(--reveal-dur) var(--easing),
              transform var(--reveal-dur) var(--easing);
  will-change: opacity, transform;
}
.reveal.is-visible {
  opacity: 1;
  transform: translateY(0);
}
/* Stagger child reveals inside galleries */
.gallery .reveal { transition-delay: 0ms; }
.gallery .reveal.is-visible:nth-child(2) { transition-delay: 80ms; }
.gallery .reveal.is-visible:nth-child(3) { transition-delay: 160ms; }
.gallery .reveal.is-visible:nth-child(4) { transition-delay: 80ms; }
.gallery .reveal.is-visible:nth-child(5) { transition-delay: 160ms; }
.gallery .reveal.is-visible:nth-child(6) { transition-delay: 240ms; }

@media (prefers-reduced-motion: reduce) {
  .reveal { opacity: 1; transform: none; transition: none; }
  .hero-bg { transform: none !important; }
  .hero-scroll-line { animation: none; }
}

/* ───────── Touch device hover reset ─────────
   Prevent sticky :hover effects on touch devices where scrolling triggers
   accidental hover/click visuals. Resets transforms, border tints, and
   color shifts on cards/tiles. */
@media (hover: none) {
  .book-card:hover,
  .external-card:hover,
  .logo-chip:hover,
  .team-card:hover,
  .yt-card:hover,
  .x-card:hover,
  .header-cta:hover,
  .btn--primary:hover,
  .btn--ghost:hover {
    transform: none;
    border-color: var(--c-line);
  }
  .book-card:hover .book-card-name,
  .external-card:hover .external-card-arrow,
  .x-card:hover .x-card-photo img,
  .team-card:hover .team-card-photo img,
  .dining-menu-tile:hover img,
  .logo-chip:hover > img,
  .book-card:hover .book-card-arrow,
  .external-card:hover .external-card-mascot img,
  .book-card:hover .book-card-logo {
    transform: none;
    opacity: inherit;
  }
  .book-card:hover .book-card-name,
  .xnews-title a:hover,
  .xnews-all:hover,
  .bottom-cta-map:hover,
  .site-nav a:hover,
  .hero-secondary:hover {
    color: inherit;
  }
  .site-nav a:active,
  .site-nav a.is-active {
    color: var(--c-yellow);
    text-shadow: 0 0 18px rgba(255, 210, 0, 0.55),
                 0 0 6px  rgba(255, 210, 0, 0.30);
  }
}

/* ───────── Utility: mobile-only line break ───────── */
.break-mobile { display: none; }
@media (max-width: 720px) {
  .break-mobile { display: inline; }
}

/* ───────── Utility: PC-only line break (hidden on mobile) ───────── */
.break-pc { display: inline; }
@media (max-width: 720px) {
  .break-pc { display: none; }
}

/* ─────────────────────────────────────────────────────
   Alumni teams: search mode (.teams-grid.is-filtered)
   Flatten 4 marquee rows into a single responsive grid.
   Duplicate cards (pass=1 with aria-hidden) are hidden so
   search results never show the same photo twice.
   ───────────────────────────────────────────────────── */
.teams-grid.is-filtered {
  display: grid;
  /* PC: 카드 280px 고정 — 마퀴 모드와 동일 너비 유지. justify-content:start로 좌측 정렬 */
  grid-template-columns: repeat(auto-fill, 280px);
  justify-content: start;
  gap: var(--space-md);
  /* 마퀴 모드의 .alumni-marquee-row가 가진 padding(xs=8px) top/bottom과 매칭 —
     검색 모드에서도 첫 카드 위 / 마지막 카드 아래 여백 동일하게 유지 */
  padding: var(--space-xs) 0;
  overflow-x: visible;
  overflow-y: visible;
}
.teams-grid.is-filtered .alumni-marquee-row,
.teams-grid.is-filtered .alumni-marquee-track {
  display: contents;
}
.teams-grid.is-filtered .alumni-marquee-track {
  animation: none;
  width: auto;
}
.teams-grid.is-filtered .team-card[aria-hidden="true"] {
  display: none;
}
/* Mobile: 1fr 한 장씩 노출 (사용자 명시 — 그대로 유지).
   카드 width(220px 마퀴)를 풀어 grid track 전체 채움. */
@media (max-width: 860px) {
  .teams-grid.is-filtered {
    grid-template-columns: 1fr;
  }
  .teams-grid.is-filtered .alumni-marquee-track .team-card {
    width: auto;
  }
}