/* ═══════════════════════════════════════════════════════════
   시안2_copy — Match Origin v3
   Living mesh orb · constant micro-motion · editorial type
   ═══════════════════════════════════════════════════════════ */

@import url('https://fonts.googleapis.com/css2?family=Syne:wght@700;800&display=swap');

body.theme-sian2-match {
  --match-red: #C4151F;
  --match-ink: #0c0c0c;
  --match-muted: rgba(12, 12, 12, 0.45);
  --match-line: rgba(12, 12, 12, 0.055);
  --match-font: 'Syne', 'Noto Sans KR', sans-serif;
  --safe-top: env(safe-area-inset-top, 0px);
  --scroll-length: 180vh;
  --mx: 0;
  --my: 0;
}

@media (max-width: 900px) {
  body.theme-sian2-match { --scroll-length: 155vh; }
}

body.theme-sian2-match .sticky-viewport {
  background:
    radial-gradient(ellipse 38% 32% at 50% 14%, rgba(196, 21, 31, calc(0.1 + var(--match-punch, 0) * 0.2)), transparent 58%),
    radial-gradient(ellipse 46% 40% at 62% 44%, rgba(196, 21, 31, calc(0.035 + var(--match-flash, 0))), transparent 64%),
    radial-gradient(ellipse 60% 50% at 18% 90%, rgba(180, 83, 9, 0.05), transparent 60%),
    linear-gradient(180deg, #FFFFFF 0%, #FBFAF9 52%, #F4F2F0 100%) !important;
  --scene-y: 50%;
  transition: background 0.2s linear;
}

/* Refined high-end ambient layer over the main scene */
body.theme-sian2-match .sticky-viewport::before {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(32% 28% at 50% 45%, rgba(255, 248, 245, 0.9), transparent 72%),
    radial-gradient(46% 42% at 50% 47%, rgba(196, 21, 31, 0.12), transparent 72%);
  filter: blur(4px);
  opacity: calc((1 - var(--match-type-out, 0) * 0.4) * (1 - var(--match-layout, 0)));
}
body.theme-sian2-match .sticky-viewport::after {
  content: '';
  position: absolute;
  inset: 0;
  z-index: 1;
  pointer-events: none;
  background:
    radial-gradient(120% 90% at 50% -10%, transparent 60%, rgba(12, 12, 12, 0.05) 100%),
    radial-gradient(120% 90% at 50% 110%, transparent 62%, rgba(12, 12, 12, 0.06) 100%);
}

body.theme-sian2-match .match-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* CSS sphere used only as faint under-glow (canvas draws HQ body) */
body.theme-sian2-match .match-sphere {
  opacity: 0 !important;
  pointer-events: none;
  visibility: hidden;
}

/* ── Type spotlight: circle reveals inverted letters only ── */
body.theme-sian2-match .match-type-stage {
  position: relative;
  display: inline-block;
  max-width: 100%;
  cursor: none;
  pointer-events: auto;
}

body.theme-sian2-match .match-type-stage__layer {
  position: relative;
}

body.theme-sian2-match .match-type-stage__layer--cut {
  position: absolute;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  pointer-events: none;
  clip-path: circle(0 at 50% 50%);
  -webkit-clip-path: circle(0 at 50% 50%);
  will-change: clip-path;
}

body.theme-sian2-match .match-type-stage__fill {
  position: absolute;
  inset: -20%;
  background: radial-gradient(circle, #C4151F 0%, #a1121a 70%, #8e0f16 100%);
  border-radius: 50%;
}

body.theme-sian2-match .match-type-stage__layer--cut .match-hero-type__headline {
  position: relative;
  z-index: 1;
  color: #fff !important;
}

body.theme-sian2-match .match-type-stage__layer--cut .match-hero-type__line--accent {
  color: #fff !important;
  -webkit-text-stroke: 0;
}

body.theme-sian2-match .match-type-stage__layer--cut .match-char {
  transform: none !important;
  opacity: 1 !important;
}

body.theme-sian2-match .match-spot-ring {
  position: absolute;
  width: 0;
  height: 0;
  left: 0;
  top: 0;
  border-radius: 50%;
  border: 1.5px solid rgba(255, 255, 255, 0.7);
  box-shadow:
    0 0 0 1.5px rgba(196, 21, 31, 0.65),
    0 8px 28px rgba(196, 21, 31, 0.25);
  transform: translate(-50%, -50%);
  pointer-events: none;
  opacity: 0;
  transition: opacity 0.2s ease;
  z-index: 3;
  background: transparent;
}


body.theme-sian2-match .sticky-viewport.is-layout-phase {
  background:
    radial-gradient(ellipse 42% 34% at 78% 36%, rgba(196, 21, 31, 0.06), transparent 60%),
    #FAFAF9 !important;
}

body.theme-sian2-match .bg-wash,
body.theme-sian2-match .ambient-floats,
body.theme-sian2-match .ambient-light,
body.theme-sian2-match .scene-depth,
body.theme-sian2-match .layout-surface,
body.theme-sian2-match .data-grid,
body.theme-sian2-match .selection-connector,
body.theme-sian2-match .hero-grid,
body.theme-sian2-match .catchphrase-layer,
body.theme-sian2-match .dim-orb,
body.theme-sian2-match .shape-stage,
body.theme-sian2-match .match-morph {
  display: none !important;
}

body.theme-sian2-match .noise-layer {
  opacity: 0.03 !important;
  mix-blend-mode: multiply;
  z-index: 2;
  animation: matchNoiseShift 12s linear infinite;
}

@keyframes matchNoiseShift {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-2%, -1.5%, 0); }
}

/* ── World ── */
body.theme-sian2-match .match-world {
  position: absolute;
  inset: 0;
  z-index: 3;
  pointer-events: none;
  overflow: hidden;
}

body.theme-sian2-match .match-filters { position: absolute; width: 0; height: 0; }

body.theme-sian2-match .match-grid {
  position: absolute;
  inset: -15%;
  opacity: calc(0.85 * (1 - var(--match-type-out, 0) * 0.9));
  background-image:
    linear-gradient(var(--match-line) 1px, transparent 1px),
    linear-gradient(90deg, var(--match-line) 1px, transparent 1px);
  background-size: 40px 40px;
  filter: url(#matchGridDistort);
  animation: matchGridDrift 18s linear infinite;
  transform: scale(calc(var(--match-grid-scale, 1) * (1 - var(--match-punch, 0) * 0.025)));
  transform-origin: 58% 48%;
}

@keyframes matchGridDrift {
  0% { background-position: 0 0; }
  100% { background-position: 40px 20px; }
}

body.theme-sian2-match .match-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background: radial-gradient(circle at 58% 48%, transparent 8%, #fff 70%);
}

body.theme-sian2-match .match-canvas {
  position: absolute;
  inset: 0;
  z-index: 6;
}

/* Floating ambient motes */
body.theme-sian2-match .match-motes {
  position: absolute;
  inset: 0;
  z-index: 4;
  opacity: calc(1 - var(--match-layout, 0));
}

body.theme-sian2-match .match-motes span {
  position: absolute;
  width: 5px;
  height: 5px;
  border-radius: 50%;
  background: var(--match-red);
  opacity: 0.22;
  filter: blur(0.4px);
  animation: matchMoteFloat var(--dur, 7s) ease-in-out infinite;
  animation-delay: var(--delay, 0s);
  left: var(--x);
  top: var(--y);
}

body.theme-sian2-match .match-motes span:nth-child(odd) {
  width: 3px;
  height: 3px;
  opacity: 0.14;
  background: #111;
}

@keyframes matchMoteFloat {
  0%, 100% { transform: translate3d(0, 0, 0) scale(1); }
  50% { transform: translate3d(12px, -18px, 0) scale(1.35); }
}

/* ── Living mesh orb (modern, not radial ball) ── */
body.theme-sian2-match .match-sphere {
  position: absolute;
  left: var(--orb-x, 58%);
  top: var(--orb-y, 48%);
  width: clamp(240px, 32vw, 400px);
  height: clamp(240px, 32vw, 400px);
  transform:
    translate(-50%, -50%)
    translate3d(calc(var(--mx) * 18px), calc(var(--my) * 12px + var(--orb-float, 0px)), 0)
    scale(calc(var(--match-sphere-scale, 1) * var(--match-breathe, 1)));
  opacity: var(--match-sphere-opacity, 1);
  z-index: 5;
  will-change: transform, opacity, border-radius, left, top;
  filter: blur(calc(var(--match-sphere-blur, 0) * 1px));
  transition: left 0.15s linear, top 0.15s linear;
}

body.theme-sian2-match .match-sphere__glow {
  position: absolute;
  inset: -28%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 21, 31, 0.28) 0%, rgba(240, 74, 84, 0.1) 38%, transparent 68%);
  animation: matchGlowPulse 5.5s ease-in-out infinite;
}

@keyframes matchGlowPulse {
  0%, 100% { opacity: 0.7; transform: scale(0.96); }
  50% { opacity: 1; transform: scale(1.05); }
}

body.theme-sian2-match .match-sphere__orb {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  overflow: hidden;
  isolation: isolate;
  box-shadow:
    0 40px 90px rgba(196, 21, 31, 0.22),
    0 10px 30px rgba(12, 12, 12, 0.08),
    inset 0 1px 0 rgba(255, 255, 255, 0.45);
}

body.theme-sian2-match .match-sphere__blob {
  position: absolute;
  inset: -30%;
  border-radius: 40% 60% 55% 45% / 50% 40% 60% 50%;
  filter: blur(28px);
  mix-blend-mode: normal;
  will-change: transform;
}

body.theme-sian2-match .match-sphere__blob--a {
  background: conic-gradient(from 0deg, #ff7a72, #C4151F, #7a1018, #ff5c4d, #C4151F, #ff7a72);
  animation: matchBlobSpin 16s linear infinite;
}

body.theme-sian2-match .match-sphere__blob--b {
  background: radial-gradient(circle at 30% 30%, rgba(255, 255, 255, 0.85), transparent 40%),
    radial-gradient(circle at 70% 65%, rgba(255, 160, 90, 0.7), transparent 45%),
    radial-gradient(circle at 40% 80%, rgba(160, 20, 40, 0.6), transparent 50%);
  animation: matchBlobMorph 9s ease-in-out infinite;
  mix-blend-mode: soft-light;
  opacity: 0.9;
}

body.theme-sian2-match .match-sphere__blob--c {
  inset: -10%;
  background: radial-gradient(circle at 62% 28%, rgba(255, 255, 255, 0.55), transparent 28%),
    radial-gradient(circle at 35% 70%, rgba(255, 80, 90, 0.35), transparent 40%);
  filter: blur(18px);
  animation: matchBlobDrift 11s ease-in-out infinite reverse;
}

@keyframes matchBlobSpin {
  from { transform: rotate(0deg) scale(1.05); }
  to { transform: rotate(360deg) scale(1.05); }
}

@keyframes matchBlobMorph {
  0%, 100% { transform: translate(-4%, 2%) rotate(0deg) scale(1); border-radius: 42% 58% 50% 50%; }
  33% { transform: translate(5%, -3%) rotate(25deg) scale(1.08); border-radius: 55% 45% 42% 58%; }
  66% { transform: translate(-2%, 4%) rotate(-15deg) scale(0.96); border-radius: 48% 52% 60% 40%; }
}

@keyframes matchBlobDrift {
  0%, 100% { transform: translate(0, 0) scale(1); }
  50% { transform: translate(-6%, 5%) scale(1.12); }
}

body.theme-sian2-match .match-sphere__glass {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  background:
    linear-gradient(145deg, rgba(255, 255, 255, 0.35) 0%, transparent 38%, transparent 62%, rgba(0, 0, 0, 0.12) 100%);
  box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.28);
  backdrop-filter: blur(0.5px);
}

body.theme-sian2-match .match-sphere__orbit {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  border: 1px dashed rgba(196, 21, 31, 0.14);
  animation: matchOrbitSpin 28s linear infinite;
  opacity: calc(0.9 * (1 - var(--match-particle, 0)));
}

body.theme-sian2-match .match-sphere__orbit span {
  position: absolute;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: #fff;
  box-shadow: 0 0 0 2px rgba(196, 21, 31, 0.35), 0 4px 12px rgba(196, 21, 31, 0.25);
}

body.theme-sian2-match .match-sphere__orbit span:nth-child(1) { top: 8%; left: 48%; }
body.theme-sian2-match .match-sphere__orbit span:nth-child(2) { bottom: 18%; right: 6%; width: 5px; height: 5px; }
body.theme-sian2-match .match-sphere__orbit span:nth-child(3) { top: 46%; left: 2%; width: 4px; height: 4px; background: var(--match-red); }

@keyframes matchOrbitSpin {
  from { transform: rotate(0deg); }
  to { transform: rotate(360deg); }
}

/* Hide old unused layers */
body.theme-sian2-match .match-sphere__mesh,
body.theme-sian2-match .match-sphere__core,
body.theme-sian2-match .match-sphere__noise,
body.theme-sian2-match .match-sphere__rim { display: none !important; }

/* ── Hero type: FLEX-style bold grid copy (always readable) ── */
body.theme-sian2-match .match-hero-type {
  position: absolute;
  inset: 0;
  z-index: 12;
  pointer-events: none;
  padding:
    calc(64px + var(--safe-top))
    clamp(24px, 4.5vw, 64px)
    clamp(64px, 9vh, 96px);
  opacity: calc(1 - var(--match-type-out, 0));
  transform: scale(calc(1 - var(--match-type-out, 0) * 0.04));
  transition: opacity 0.25s linear;
}

body.theme-sian2-match .match-flex-chrome {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  opacity: 0.9;
}

/* Persistent blueprint word (DAECHI on hero → MATCH on cards), pinned to viewport bottom */
body.theme-sian2-match .match-hero-ghost {
  position: absolute;
  right: clamp(18px, 3.5vw, 60px);
  left: auto;
  bottom: 40px;
  transform: none;
  text-align: right;
  z-index: 2;
  font-family: var(--match-font);
  font-weight: 800;
  font-size: clamp(96px, 15vw, 216px);
  line-height: 0.76;
  letter-spacing: -0.06em;
  color: transparent;
  -webkit-text-stroke: 1.5px rgba(12, 12, 12, 0.2);
  opacity: 0;
  pointer-events: none;
  user-select: none;
  white-space: nowrap;
  transition: opacity 0.35s ease;
}

/* Kill the fussy full-page lattice grid */
body.theme-sian2-match .match-grid { display: none !important; }

/* Persistent, refined blueprint grid — identical on hero + cards pages.
   A clean, evenly-spaced module grid framed by a precise border. */
body.theme-sian2-match .match-bp-grid {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
}
/* Minimal frame: only the two outer vertical lines + top/bottom horizontal
   lines. All inner lattice lines removed for a clean, decisive structure. */
body.theme-sian2-match .match-bp-grid::before {
  content: '';
  position: absolute;
  inset: 0;
  background-image:
    linear-gradient(rgba(12, 12, 12, 0.09), rgba(12, 12, 12, 0.09)),
    linear-gradient(rgba(12, 12, 12, 0.09), rgba(12, 12, 12, 0.09)),
    linear-gradient(rgba(12, 12, 12, 0.09), rgba(12, 12, 12, 0.09)),
    linear-gradient(rgba(12, 12, 12, 0.09), rgba(12, 12, 12, 0.09));
  background-repeat: no-repeat;
  background-size:
    1px 100%,
    1px 100%,
    100% 1px,
    100% 1px;
  background-position:
    8% 0,
    92% 0,
    0 11%,
    0 89%;
}
body.theme-sian2-match .match-bp-grid__label {
  position: absolute;
  font-family: var(--match-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(12, 12, 12, 0.28);
}
body.theme-sian2-match .match-bp-grid__label--tl { top: 16px; left: 16px; }
body.theme-sian2-match .match-bp-grid__label--br { bottom: 52px; right: 16px; }

/* Red corner brackets living on the persistent grid so they stay on BOTH the
   hero and the cards page (aligned to the outer grid lines: 8% / 11%). */
body.theme-sian2-match .match-bp-grid__corner {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 3px solid var(--match-red);
  opacity: 0;
  animation: matchCornerIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.theme-sian2-match .match-bp-grid__corner--tl { top: 11%; left: 8%; border-right: 0; border-bottom: 0; animation-delay: 0.15s; }
body.theme-sian2-match .match-bp-grid__corner--tr { top: 11%; right: 8%; border-left: 0; border-bottom: 0; animation-delay: 0.28s; }
body.theme-sian2-match .match-bp-grid__corner--bl { bottom: 11%; left: 8%; border-right: 0; border-top: 0; animation-delay: 0.41s; }
body.theme-sian2-match .match-bp-grid__corner--br { bottom: 11%; right: 8%; border-left: 0; border-top: 0; animation-delay: 0.54s; }

/* Chrome corners duplicated the same spot on the hero — hide them so only the
   persistent grid brackets show (identical look, now on every page). */
body.theme-sian2-match .match-flex-chrome__corner { display: none !important; }

/* Second bloom for the cards page — different location than page-1 bloom */
body.theme-sian2-match .match-bloom2 {
  position: absolute;
  inset: 0;
  z-index: 0;
  pointer-events: none;
  background:
    radial-gradient(30% 26% at 26% 64%, rgba(255, 246, 242, 0.85), transparent 70%),
    radial-gradient(40% 36% at 26% 66%, rgba(196, 21, 31, 0.11), transparent 72%);
  filter: blur(6px);
  opacity: var(--match-layout, 0);
}

/* Soft drifting aurora (extra gradient depth) */
body.theme-sian2-match .match-flex-chrome__aurora {
  position: absolute;
  inset: -20%;
  z-index: -1;
  background:
    radial-gradient(30% 34% at 24% 30%, rgba(196, 21, 31, 0.12), transparent 62%),
    radial-gradient(28% 30% at 78% 66%, rgba(180, 83, 9, 0.1), transparent 60%),
    radial-gradient(34% 30% at 62% 20%, rgba(196, 21, 31, 0.06), transparent 64%);
  filter: blur(12px);
  animation: matchAurora 24s ease-in-out infinite alternate;
  will-change: transform;
}
@keyframes matchAurora {
  0% { transform: translate3d(-2%, -1%, 0) scale(1); }
  50% { transform: translate3d(3%, 2%, 0) scale(1.08); }
  100% { transform: translate3d(-1%, 3%, 0) scale(1.03); }
}

/* Corner brackets — inward, RED, thicker */
body.theme-sian2-match .match-flex-chrome__corner {
  position: absolute;
  width: 46px;
  height: 46px;
  border: 3px solid var(--match-red);
  opacity: 0;
  animation: matchCornerIn 1.1s cubic-bezier(0.16, 1, 0.3, 1) forwards;
}
body.theme-sian2-match .match-flex-chrome__corner--tl { top: 11%; left: 8%; border-right: 0; border-bottom: 0; animation-delay: 0.15s; }
body.theme-sian2-match .match-flex-chrome__corner--tr { top: 11%; right: 8%; border-left: 0; border-bottom: 0; animation-delay: 0.28s; }
body.theme-sian2-match .match-flex-chrome__corner--bl { bottom: 11%; left: 8%; border-right: 0; border-top: 0; animation-delay: 0.41s; }
body.theme-sian2-match .match-flex-chrome__corner--br { bottom: 11%; right: 8%; border-left: 0; border-top: 0; animation-delay: 0.54s; }
@keyframes matchCornerIn {
  from { opacity: 0; transform: scale(1.35); }
  to { opacity: 0.9; transform: scale(1); }
}

/* Data readout (top-left) — live monospace telemetry */
body.theme-sian2-match .match-flex-chrome__readout {
  position: absolute;
  top: 30%;
  left: 11%;
  display: flex;
  flex-direction: column;
  gap: 5px;
  font-family: var(--match-font);
  font-size: 10.5px;
  letter-spacing: 0.14em;
  color: rgba(12, 12, 12, 0.4);
  padding-left: 14px;
}
body.theme-sian2-match .match-flex-chrome__readout b {
  font-weight: 800;
  letter-spacing: 0.22em;
  color: rgba(12, 12, 12, 0.62);
}
body.theme-sian2-match .match-flex-chrome__readout i { font-style: normal; }
body.theme-sian2-match .match-flex-chrome__live {
  position: absolute;
  left: 0;
  top: 3px;
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--match-red);
  box-shadow: 0 0 0 0 rgba(196, 21, 31, 0.5);
  animation: matchLive 1.8s ease-out infinite;
}
@keyframes matchLive {
  0% { box-shadow: 0 0 0 0 rgba(196, 21, 31, 0.5); opacity: 1; }
  70% { box-shadow: 0 0 0 8px rgba(196, 21, 31, 0); opacity: 0.7; }
  100% { box-shadow: 0 0 0 0 rgba(196, 21, 31, 0); opacity: 1; }
}
body.theme-sian2-match .match-flex-chrome__bar {
  position: relative;
  width: 96px;
  height: 3px;
  border-radius: 2px;
  background: rgba(12, 12, 12, 0.1);
  overflow: hidden;
}
body.theme-sian2-match .match-flex-chrome__bar s {
  position: absolute;
  inset: 0;
  right: auto;
  width: 40%;
  background: var(--match-red);
  animation: matchBar 4.5s cubic-bezier(0.45, 0.05, 0.55, 0.95) infinite;
}
@keyframes matchBar {
  0% { width: 12%; }
  50% { width: 88%; }
  100% { width: 32%; }
}

/* Odometer-style vertical rollers */
body.theme-sian2-match .match-flex-chrome__roll,
body.theme-sian2-match .match-flex-chrome__vroll em {
  display: inline-block;
  height: 1.2em;
  overflow: hidden;
  vertical-align: bottom;
}
body.theme-sian2-match .match-flex-chrome__roll ul,
body.theme-sian2-match .match-flex-chrome__vroll em ul {
  margin: 0;
  padding: 0;
  list-style: none;
  animation: matchRoll5 6s cubic-bezier(0.7, 0, 0.3, 1) infinite;
}
/* NOW MATCHING roller cycles a touch slower for a calmer read */
body.theme-sian2-match .match-flex-chrome__vroll em ul {
  animation-duration: 9s;
}
body.theme-sian2-match .match-flex-chrome__roll li,
body.theme-sian2-match .match-flex-chrome__vroll em li {
  height: 1.2em;
  line-height: 1.2em;
}
@keyframes matchRoll5 {
  0%, 14% { transform: translateY(0); }
  19%, 33% { transform: translateY(-1.2em); }
  38%, 52% { transform: translateY(-2.4em); }
  57%, 71% { transform: translateY(-3.6em); }
  76%, 100% { transform: translateY(-4.8em); }
}

/* Vertical status roller (right edge) */
body.theme-sian2-match .match-flex-chrome__vroll {
  position: absolute;
  top: 56%;
  left: 11%;
  text-align: left;
  font-family: var(--match-font);
  font-size: 11px;
  letter-spacing: 0.14em;
  color: rgba(12, 12, 12, 0.42);
}
body.theme-sian2-match .match-flex-chrome__vroll span {
  display: block;
  font-size: 9px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: var(--match-red);
  margin-bottom: 4px;
}
body.theme-sian2-match .match-flex-chrome__vroll em { font-style: normal; font-weight: 700; }

/* Version tag (bottom-left) */
body.theme-sian2-match .match-flex-chrome__tag {
  position: absolute;
  bottom: 12%;
  left: 11%;
  font-family: var(--match-font);
  font-size: 10px;
  font-weight: 800;
  letter-spacing: 0.24em;
  color: rgba(12, 12, 12, 0.4);
  display: flex;
  align-items: center;
  gap: 8px;
}
body.theme-sian2-match .match-flex-chrome__tag b {
  padding: 3px 10px;
  border-radius: 999px;
  background: var(--match-red);
  color: #fff;
  font-size: 12px;
  letter-spacing: 0.1em;
}

/* Two-word auto flip (top-to-bottom 3D flip) — reused in the hero + readout.
   inline-block keeps the baseline/height predictable so the big hero words
   never overflow the stack and get clipped. */
body.theme-sian2-match .match-flip {
  display: inline-block;
  position: relative;
  perspective: 720px;
  vertical-align: baseline;
  line-height: 1;
  overflow: visible;
}
body.theme-sian2-match .match-flip__inner {
  display: inline-grid;
  transform-style: preserve-3d;
  animation: matchWordFlip 5s cubic-bezier(0.62, 0, 0.32, 1) infinite;
}
body.theme-sian2-match .match-flip__face {
  grid-area: 1 / 1;
  white-space: nowrap;
  line-height: 1.06;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
body.theme-sian2-match .match-flip__face--b { transform: rotateX(-180deg); }
body.theme-sian2-match .match-flip--sm .match-flip__face {
  font-weight: 700;
  letter-spacing: 0.14em;
  color: rgba(12, 12, 12, 0.62);
}
@keyframes matchWordFlip {
  0%, 42% { transform: rotateX(0deg); }
  50%, 92% { transform: rotateX(-180deg); }
  100% { transform: rotateX(-360deg); }
}

/* Bottom marquee bar — pinned to the true viewport bottom (in match-world) */
body.theme-sian2-match .match-flex-chrome__ticker {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 42px;
  z-index: 3;
  display: flex;
  align-items: center;
  overflow: hidden;
  border-top: 1px solid rgba(12, 12, 12, 0.1);
  background: #E4E3DF;
  font-family: var(--match-font);
}
body.theme-sian2-match .match-flex-chrome__ticker-track {
  display: flex;
  align-items: center;
  gap: 2.4rem;
  white-space: nowrap;
  font-size: 11px;
  font-weight: 800;
  letter-spacing: 0.26em;
  line-height: 1;
  animation: matchTicker 62s linear infinite;
  will-change: transform;
}
body.theme-sian2-match .match-flex-chrome__ticker-track span {
  display: inline-flex;
  align-items: center;
  color: rgba(12, 12, 12, 0.62);
}
/* alternate items in brand red for clearer colour separation */
body.theme-sian2-match .match-flex-chrome__ticker-track span:nth-child(odd) {
  color: var(--match-red);
}
body.theme-sian2-match .match-flex-chrome__ticker-track span::after {
  content: '';
  width: 5px;
  height: 5px;
  margin-left: 2.4rem;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.55;
}
@keyframes matchTicker {
  from { transform: translate3d(0, 0, 0); }
  to { transform: translate3d(-50%, 0, 0); }
}

body.theme-sian2-match .match-hero-type__top {
  position: relative;
  z-index: 2;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
}

body.theme-sian2-match .match-hero-type__eyebrow {
  margin: 0;
  font-family: var(--match-font);
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: var(--match-muted);
}

body.theme-sian2-match .match-hero-type__meta {
  margin: 0;
  font-family: var(--match-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(12, 12, 12, 0.28);
  text-align: right;
  line-height: 1.55;
}

body.theme-sian2-match .match-flex-aside {
  position: absolute;
  z-index: 2;
  max-width: 18ch;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: 12px;
  line-height: 1.65;
  color: rgba(12, 12, 12, 0.42);
}
body.theme-sian2-match .match-flex-aside span {
  display: block;
  margin-top: 12px;
  font-family: var(--match-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.22em;
  color: rgba(12, 12, 12, 0.3);
}
body.theme-sian2-match .match-flex-aside p { margin: 0; white-space: nowrap; }
body.theme-sian2-match .match-flex-aside--left {
  left: clamp(24px, 4.5vw, 64px);
  top: 38%;
}

/* Bold FLEX-like stack — always solid, no glass, no shuffle */
body.theme-sian2-match .match-flex-stack {
  position: absolute;
  left: auto;
  /* Proportional width + offset so the card keeps the SAME footprint across every
     PC width from small laptops up to ultra-wide — no per-breakpoint jumps. */
  right: clamp(40px, 4.6vw, 128px);
  top: 55%;
  bottom: auto;
  transform: translateY(-50%);
  z-index: 3;
  /* Flex column pinned to the right so BOTH the headline rows and the sub line
     share the exact same right edge (content-box right) — perfect alignment. */
  display: flex;
  flex-direction: column;
  align-items: flex-end;
  text-align: right;
  width: clamp(520px, 42vw, 860px);
  max-width: calc(100vw - clamp(40px, 7vw, 120px));
  opacity: 1;
  /* Generous right padding so the right edge of the words always sits well
     inside the frosted card — never past its right corner. */
  padding: 24px clamp(30px, 3.4vw, 64px) 0 0;
  overflow: visible;
  pointer-events: auto;
}

/* Clean frosted-glass panel behind the hero text.
   The top-left diagonal is masked out so the moving glyphs behind stay partly
   visible there; hovering fills the glass back in (reverse). */
body.theme-sian2-match .match-flex-stack::before {
  content: '';
  position: absolute;
  inset: -11% -3% -9% -6%;
  border-radius: 26px;
  background: linear-gradient(140deg, rgba(255, 255, 255, 0.5), rgba(255, 255, 255, 0.2));
  -webkit-backdrop-filter: blur(18px) saturate(1.3);
  backdrop-filter: blur(18px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 30px 70px -24px rgba(12, 12, 12, 0.14),
    inset 0 1px 0 rgba(255, 255, 255, 0.9);
  z-index: -1;
  opacity: calc(1 - var(--match-type-out, 0));
  /* Top-left stays partially frosted (back visible through a soft blur),
     transitioning to full glass toward the lower-right. */
  -webkit-mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.82) 16%, #000 50%, #000 100%);
  mask-image: linear-gradient(135deg, rgba(0, 0, 0, 0.82) 0%, rgba(0, 0, 0, 0.82) 16%, #000 50%, #000 100%);
  transition: opacity 0.4s ease;
  pointer-events: none;
}
/* The frosted panel is present (blurred) from the very first frame — only the
   inner copy eases in, so there is never a sudden blur pop. */
@keyframes matchTextIn {
  from { opacity: 0; transform: translateY(14px); }
  to { opacity: 1; transform: translateY(0); }
}

body.theme-sian2-match .match-flex-stack.is-exit {
  opacity: calc(1 - var(--match-layout, 0));
}

body.theme-sian2-match .match-flex-stack__word {
  margin: 0 0 14px;
  font-family: var(--match-font);
  font-size: clamp(11px, 1vw, 12px);
  font-weight: 800;
  letter-spacing: 0.42em;
  color: var(--match-red);
}

body.theme-sian2-match .match-flex-hero {
  margin: 0;
  display: grid;
  gap: clamp(4px, 0.6vw, 10px);
  justify-items: end;
  max-width: 100%;
  animation: matchTextIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.45s backwards;
}
body.theme-sian2-match .match-flex-stack__sub {
  animation: matchTextIn 0.95s cubic-bezier(0.22, 1, 0.36, 1) 0.62s backwards;
}

body.theme-sian2-match .match-flex-hero__row {
  display: grid;
  grid-template-columns: auto auto;
  align-items: baseline;
  justify-content: end;
  column-gap: clamp(12px, 1.6vw, 22px);
}

body.theme-sian2-match .match-flex-hero__row em {
  margin: 0;
  font-family: var(--match-font);
  font-style: normal;
  font-size: clamp(10px, 0.95vw, 12px);
  font-weight: 700;
  letter-spacing: 0.24em;
  color: rgba(12, 12, 12, 0.35);
  transform: translateY(-0.35em);
}

body.theme-sian2-match .match-flex-hero__row strong {
  font-family: var(--match-font);
  font-weight: 800;
  /* Fills the wider card while still leaving the right padding clear. */
  font-size: clamp(40px, 6vw, 88px);
  line-height: 0.92;
  letter-spacing: -0.055em;
  color: var(--match-ink);
  text-transform: uppercase;
  white-space: nowrap;
}

body.theme-sian2-match .match-flex-hero__row strong.is-accent {
  color: var(--match-red);
}


body.theme-sian2-match .match-flex-stack__sub {
  margin: 20px 0 0;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(14px, 1.28vw, 17px);
  line-height: 1.55;
  color: var(--match-muted);
  font-weight: 500;
  /* Right-aligned to the exact same content edge as the big headline rows so the
     sentence end lines up perfectly under the words. */
  text-align: right;
}

/* MATCH splash (no big text) */
body.theme-sian2-match .match-bang {
  position: absolute;
  left: 50%;
  top: 46%;
  width: 0;
  height: 0;
  z-index: 22;
  pointer-events: none;
  opacity: 0;
  visibility: hidden;
}
body.theme-sian2-match .match-bang.is-on {
  visibility: visible;
  opacity: 1;
}
body.theme-sian2-match .match-bang__splash {
  position: absolute;
  left: 0;
  top: 0;
}
body.theme-sian2-match .match-drop {
  position: absolute;
  left: 0;
  top: 0;
  width: calc(18px * var(--s, 1));
  height: calc(18px * var(--s, 1));
  margin: calc(-9px * var(--s, 1)) 0 0 calc(-9px * var(--s, 1));
  border-radius: 50%;
  background:
    radial-gradient(circle at 32% 28%, rgba(255, 255, 255, 0.95), transparent 36%),
    radial-gradient(circle at 50% 55%, #ff7a6a, #c4151f 70%, #8e0f16);
  box-shadow: 0 8px 16px rgba(196, 21, 31, 0.28);
  opacity: 0;
  transform: translate3d(0, 0, 0) scale(0.2);
  animation: matchDropSplash 0.95s cubic-bezier(0.2, 0.9, 0.2, 1) var(--delay, 0s) forwards;
}
@keyframes matchDropSplash {
  0% { opacity: 0; transform: translate3d(0, 0, 0) scale(0.15); }
  25% { opacity: 1; }
  100% { opacity: 0; transform: translate3d(var(--dx), var(--dy), 0) scale(0.5); }
}

body.theme-sian2-match .sticky-viewport.is-match-bang {
  animation: matchViewportKick 0.5s ease-out;
}
@keyframes matchViewportKick {
  0% { filter: brightness(1); }
  35% { filter: brightness(1.06) saturate(1.12); }
  100% { filter: none; }
}

@media (hover: hover) {
  body.theme-sian2-match .match-type-stage:hover {
    cursor: none;
  }
}

body.theme-sian2-match .stage-hint {
  color: var(--match-ink) !important;
  top: auto !important;
  bottom: clamp(56px, 8vh, 88px) !important;
  transform: translate(-50%, 0) !important;
  z-index: 12;
  display: flex !important;
  flex-direction: column;
  align-items: center;
  gap: 9px;
  padding: 0 !important;
  border-radius: 0;
  background: none;
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
  border: 0;
  box-shadow: none;
  opacity: calc((1 - var(--match-type-out, 0) * 5) * (1 - var(--match-layout, 0))) !important;
}

/* Only the text label wears the glassmorphism pill; the icon floats free above it */
body.theme-sian2-match .stage-hint__label {
  font-family: var(--match-font) !important;
  color: var(--match-red) !important;
  letter-spacing: 0.2em !important;
  font-size: 10px !important;
  font-weight: 800 !important;
  padding: 7px 15px !important;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.5);
  -webkit-backdrop-filter: blur(14px) saturate(1.3);
  backdrop-filter: blur(14px) saturate(1.3);
  border: 1px solid rgba(255, 255, 255, 0.65);
  box-shadow:
    0 8px 22px -12px rgba(12, 12, 12, 0.22),
    inset 0 1px 0 rgba(255, 255, 255, 0.8);
}

body.theme-sian2-match .scroll-nudge {
  width: 19px !important;
  height: 38px !important;
}
body.theme-sian2-match .scroll-nudge__frame,
body.theme-sian2-match .scroll-nudge__chev { stroke: rgba(12, 12, 12, 0.55) !important; stroke-width: 2 !important; }
body.theme-sian2-match .scroll-nudge__wheel { fill: var(--match-red) !important; }

body.theme-sian2-match .header-bar {
  background: rgba(255, 255, 255, 0.65) !important;
  border-bottom-color: rgba(12, 12, 12, 0.04) !important;
}

/* ── Selection ── */
body.theme-sian2-match .split-layout {
  padding:
    calc(76px + var(--safe-top))
    clamp(22px, 4vw, 60px)
    clamp(24px, 4vh, 40px) !important;
  z-index: 18 !important;
}

body.theme-sian2-match .split-layout__inner {
  width: min(1260px, 100%) !important;
  height: 100%;
  display: grid !important;
  grid-template-columns: minmax(0, 0.82fr) minmax(0, 1.18fr);
  gap: clamp(24px, 4vw, 64px);
  align-items: center;
  padding-top: clamp(60px, 13vh, 150px);
  box-sizing: border-box;
}

body.theme-sian2-match .split-layout__copy {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  max-width: none !important;
  margin-left: clamp(-64px, -3.6vw, -24px);
  transform: translate3d(0, calc((1 - var(--copy-t, 0)) * 28px), 0) !important;
  opacity: var(--copy-t, 0) !important;
  align-self: center;
}

body.theme-sian2-match .match-sel-index {
  display: flex;
  gap: 10px;
  align-items: center;
  margin-bottom: 14px;
  font-family: var(--match-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.2em;
  color: rgba(12, 12, 12, 0.28);
}
body.theme-sian2-match .match-sel-index b { color: var(--match-red); }

body.theme-sian2-match .role-flip__welcome {
  position: static !important;
  margin: 0 0 14px !important;
  font-family: var(--match-font) !important;
  font-size: 11px !important;
  letter-spacing: 0.22em !important;
  color: rgba(12, 12, 12, 0.32) !important;
}

body.theme-sian2-match .role-flip__title {
  display: grid !important;
  font-family: var(--match-font) !important;
  font-size: clamp(46px, 7vw, 96px) !important;
  font-weight: 800 !important;
  line-height: 0.88 !important;
  letter-spacing: -0.055em !important;
}
body.theme-sian2-match .role-flip__line { display: block; }
/* PATH: identical font family / weight / size / tracking / leading to the
   SELECT & YOUR lines above — only the colour differs (main red). */
body.theme-sian2-match .role-flip__accent-slot,
body.theme-sian2-match .role-flip__accent-layer {
  height: auto !important;
  overflow: visible !important;
  font-family: var(--match-font) !important;
  font-size: inherit !important;
  font-weight: 800 !important;
  letter-spacing: -0.055em !important;
  line-height: 0.88 !important;
  color: var(--match-red) !important;
  -webkit-text-stroke: 0 !important;
  -webkit-text-fill-color: var(--match-red) !important;
}
body.theme-sian2-match .role-flip__suffix { display: none !important; }

body.theme-sian2-match .role-flip__ko {
  margin-top: 44px;
  font-size: clamp(14px, 1.4vw, 16px);
  line-height: 1.7;
  color: rgba(12, 12, 12, 0.62);
  font-weight: 600;
  max-width: 22em;
  transition: opacity 0.34s ease, transform 0.34s ease;
}
/* Both the role lead + subtitle cross-fade together (no hard cut) */
body.theme-sian2-match .role-flip__ko.is-fading {
  opacity: 0;
  transform: translateY(7px);
}
/* Role lead word carries the role colour, bolded */
body.theme-sian2-match .role-flip__ko-lead {
  font-weight: 800;
  color: var(--match-red);
}
body.theme-sian2-match .role-flip--student .role-flip__ko-lead {
  color: #B45309;
}
body.theme-sian2-match .role-flip--teacher .role-flip__ko-lead {
  color: var(--match-red);
}

body.theme-sian2-match .role-flip__hint {
  margin-top: 22px !important;
  font-family: var(--match-font) !important;
  font-size: 10px !important;
  letter-spacing: 0.14em;
  color: rgba(12, 12, 12, 0.32) !important;
  animation: matchHintBlink 1.7s ease-in-out infinite;
}
/* Steady blink (not a flip) to draw the eye to the CTA prompt */
@keyframes matchHintBlink {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.28; }
}

body.theme-sian2-match .match-sel-stats {
  margin-top: 26px;
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 10px;
  max-width: 320px;
}

body.theme-sian2-match .match-sel-stat {
  padding: 14px;
  border-radius: 16px;
  border: 1px solid rgba(12, 12, 12, 0.06);
  background: rgba(255, 255, 255, 0.65);
  backdrop-filter: blur(10px);
  animation: matchStatFloat 5s ease-in-out infinite;
}
body.theme-sian2-match .match-sel-stat:nth-child(2) { animation-delay: -2.5s; }

@keyframes matchStatFloat {
  0%, 100% { transform: translateY(0); }
  50% { transform: translateY(-4px); }
}

body.theme-sian2-match .match-sel-stat span {
  display: block;
  font-family: var(--match-font);
  font-size: 9px;
  font-weight: 700;
  letter-spacing: 0.18em;
  color: rgba(12, 12, 12, 0.3);
  margin-bottom: 6px;
}
body.theme-sian2-match .match-sel-stat strong {
  font-family: var(--match-font);
  font-size: 20px;
  font-weight: 800;
  letter-spacing: -0.03em;
}
body.theme-sian2-match .match-sel-stat em {
  display: block;
  margin-top: 2px;
  font-style: normal;
  font-size: 12px;
  color: var(--match-muted);
}

body.theme-sian2-match .split-layout__cards {
  position: relative !important;
  left: auto !important;
  top: auto !important;
  right: auto !important;
  width: 100% !important;
  min-height: min(460px, 62vh) !important;
  height: auto !important;
  transform: none !important;
  display: flex !important;
  flex-direction: row !important;
  flex-wrap: nowrap !important;
  align-items: center;
  justify-content: flex-start;
  padding-left: clamp(6px, 1.4vw, 26px);
  gap: clamp(16px, 2.2vw, 38px);
  perspective: 1500px;
  transform: translateX(clamp(8px, 1.6vw, 30px)) !important;
}

body.theme-sian2-match .match-card-aura {
  display: none !important;
}

body.theme-sian2-match .split-layout .glass-card,
body.theme-sian2-match .glass-card {
  position: relative !important;
  left: auto !important;
  right: auto !important;
  top: auto !important;
  bottom: auto !important;
  margin: 0 !important;
  flex: 1 1 clamp(300px, 32vw, 420px) !important;
  width: auto !important;
  max-width: clamp(300px, 32vw, 420px) !important;
  min-height: clamp(390px, 50vh, 460px) !important;
  height: auto !important;
  aspect-ratio: auto !important;
  visibility: hidden;
  opacity: 0;
  border-radius: 28px !important;
  overflow: hidden;
  isolation: isolate;
  border: 1px solid rgba(255, 255, 255, 0.78) !important;
  background:
    linear-gradient(160deg, rgba(255, 255, 255, 0.55), rgba(255, 255, 255, 0.22)) !important;
  box-shadow:
    0 30px 70px rgba(12, 12, 12, 0.1),
    0 8px 24px rgba(196, 21, 31, 0.06),
    inset 0 1px 0 rgba(255, 255, 255, 1) !important;
  -webkit-backdrop-filter: blur(28px) saturate(1.55);
  backdrop-filter: blur(28px) saturate(1.55);
  transform-style: preserve-3d;
  transform: translateY(0) scale(1);
  transition: box-shadow 0.55s cubic-bezier(0.22, 1, 0.36, 1),
    transform 0.5s cubic-bezier(0.22, 1, 0.36, 1),
    opacity 0.4s ease;
  will-change: transform, opacity;
  z-index: 20;
}

body.theme-sian2-match .split-layout .glass-card.is-visible {
  visibility: visible !important;
  opacity: var(--match-emerge, 0) !important;
}

body.theme-sian2-match .glass-card--teacher {
  --base-rot: 0deg;
  align-self: center;
  margin-top: 0 !important;
  z-index: 3;
}

body.theme-sian2-match .glass-card--student {
  --base-rot: 0deg;
  align-self: center;
  margin-top: 0 !important;
  z-index: 2;
}

body.theme-sian2-match .glass-card.is-hot {
  z-index: 8 !important;
  box-shadow:
    0 42px 90px rgba(12, 12, 12, 0.14),
    0 0 0 1px rgba(196, 21, 31, 0.14),
    0 20px 50px rgba(196, 21, 31, 0.12),
    inset 0 1px 0 #fff !important;
}
/* On hover the selected card simply floats up a little (with a whisper of tilt).
   !important overrides the idle float animation so the lift holds while hovered. */
body.theme-sian2-match .glass-card--teacher.is-hot {
  transform: translateY(-16px) rotate(-1.5deg) scale(1.03) !important;
}
body.theme-sian2-match .glass-card--student.is-hot {
  transform: translateY(-16px) rotate(1.5deg) scale(1.03) !important;
}

/* white top-left glow removed for a cleaner card */
body.theme-sian2-match .glass-card::before {
  display: none !important;
}

body.theme-sian2-match .glass-card__drop,
body.theme-sian2-match .glass-card__frost,
body.theme-sian2-match .glass-card__veil,
body.theme-sian2-match .glass-card__tint,
body.theme-sian2-match .glass-card__glass,
body.theme-sian2-match .glass-card__edge { opacity: 0.3; }
body.theme-sian2-match .glass-card__shine { z-index: 2; opacity: 0.28; }
body.theme-sian2-match .split-layout .glass-card::after { display: none !important; }

body.theme-sian2-match .glass-card__content {
  position: relative;
  z-index: 3;
  padding: 22px 26px 22px !important;
  min-height: 0;
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  justify-content: flex-start;
  text-align: left;
}

body.theme-sian2-match .glass-card__chip {
  position: absolute;
  top: 20px;
  right: 20px;
  font-family: var(--match-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.16em;
  color: rgba(12, 12, 12, 0.28);
}

body.theme-sian2-match .glass-card__icon {
  width: auto !important;
  height: auto !important;
  border-radius: 0 !important;
  margin-bottom: 4px !important;
  display: grid !important;
  place-items: center start;
  background: none !important;
  box-shadow: none !important;
  border: 0 !important;
  animation: matchIconBob 5.6s cubic-bezier(0.45, 0, 0.25, 1) infinite;
  transition:
    transform 0.45s cubic-bezier(0.22, 1, 0.36, 1),
    box-shadow 0.35s ease,
    background 0.35s ease;
  will-change: transform;
}

body.theme-sian2-match .glass-card.is-hot .glass-card__icon {
  animation: none;
  box-shadow: none !important;
}

body.theme-sian2-match .glass-card--student .glass-card__icon {
  background: none !important;
  animation-delay: -2.6s;
}

@keyframes matchIconBob {
  0%, 100% { transform: translate3d(0, 0, 0) rotate(-2deg); }
  40% { transform: translate3d(0, -7px, 0) rotate(2deg); }
  70% { transform: translate3d(0, -2px, 0) rotate(-1deg); }
}

body.theme-sian2-match .glass-card.is-visible {
  animation: matchCardFloat 6s ease-in-out infinite;
}
body.theme-sian2-match .glass-card--student.is-visible { animation-delay: -3s; }
/* idle: soft weightless float on the `translate` property so it never fights
   the hover `transform` transition (keeps hover buttery-smooth) */
@keyframes matchCardFloat {
  0%, 100% { translate: 0 0; }
  50% { translate: 0 -9px; }
}

body.theme-sian2-match .glass-card__icon img,
body.theme-sian2-match .glass-card--teacher .glass-card__icon img,
body.theme-sian2-match .glass-card--student .glass-card__icon img {
  width: clamp(94px, 9.6vw, 128px) !important;
  height: auto !important;
  max-height: none !important;
  object-fit: contain;
  filter: drop-shadow(0 12px 24px rgba(196, 21, 31, 0.2));
  transform: rotate(var(--icon-rot, 0deg));
  transition: transform 0.45s cubic-bezier(0.22, 1, 0.36, 1);
}
body.theme-sian2-match .glass-card.is-hot .glass-card__icon img {
  transform: scale(1.08) rotate(var(--icon-rot, 0deg));
}

/* CTA rendered as a pill button; fills with accent colour on hover */
body.theme-sian2-match .glass-card__cta {
  --cta-accent: var(--match-red);
  display: inline-flex !important;
  align-items: center;
  justify-content: center;
  gap: 8px;
  align-self: center;
  padding: 11px 20px !important;
  border-radius: 999px !important;
  border: 1.5px solid var(--cta-accent);
  color: var(--cta-accent) !important;
  background: rgba(255, 255, 255, 0.5);
  transition: background 0.3s ease, color 0.25s ease, transform 0.3s cubic-bezier(0.22, 1, 0.36, 1), box-shadow 0.3s ease;
}
body.theme-sian2-match .glass-card--student .glass-card__cta {
  --cta-accent: #B45309;
}
body.theme-sian2-match .glass-card.is-hot .glass-card__cta {
  background: var(--cta-accent);
  color: #fff !important;
  transform: translateY(-2px);
  box-shadow: 0 14px 28px -12px var(--cta-accent);
}
body.theme-sian2-match .glass-card.is-hot .glass-card__cta-icon svg { stroke: #fff; }
body.theme-sian2-match .glass-card__cta-icon svg { width: 16px; height: 16px; stroke: currentColor; }

body.theme-sian2-match .glass-card__eyebrow {
  font-family: var(--match-font) !important;
  letter-spacing: 0.18em !important;
  font-size: 13px !important;
  font-weight: 700 !important;
}
body.theme-sian2-match .glass-card__title {
  font-family: var(--match-font) !important;
  font-size: clamp(42px, 4.6vw, 58px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.04em !important;
  line-height: 1.02 !important;
  display: inline-block;
  transform-origin: center;
}
/* On hover the big title does a single top-to-bottom flip (motion emphasis only) */
body.theme-sian2-match .glass-card.is-hot .glass-card__title {
  animation: matchTitleFlip 0.7s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes matchTitleFlip {
  0% { transform: perspective(680px) rotateX(0deg); }
  100% { transform: perspective(680px) rotateX(360deg); }
}
body.theme-sian2-match .glass-card__desc {
  margin-top: 12px;
  font-size: 15.5px !important;
  line-height: 1.62 !important;
  font-weight: 600 !important;
  color: rgba(12, 12, 12, 0.75) !important;
  word-break: keep-all;
}
body.theme-sian2-match .glass-card__body {
  display: flex !important;
  flex-direction: column;
  align-items: flex-start;
  flex: 0 0 auto;
}
/* CTA sits just below the copy (higher up) instead of pinned to the bottom */
body.theme-sian2-match .glass-card__cta {
  margin-top: 8px !important;
  align-self: flex-start !important;
}
body.theme-sian2-match .glass-card__cta-label {
  font-family: var(--match-font) !important;
  font-size: 13px !important;
  font-weight: 800 !important;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

body.theme-sian2-match .split-layout.is-form-view .split-layout__inner { display: block !important; }
body.theme-sian2-match .split-layout.is-form-view .split-layout__copy,
body.theme-sian2-match .split-layout.is-form-view .split-layout__cards { display: none !important; }
body.is-form-open.theme-sian2-match .match-world,
body.is-form-open.theme-sian2-match .match-hero-type,
body.is-form-open.theme-sian2-match .match-bang,
body.is-form-open.theme-sian2-match .stage-hint { display: none !important; }

/* ── Laptops / smaller desktops (down to ~981px): keep the identical two-column
   layout, just scale sizes + spacing so nothing crowds the edges, wraps, or
   overlaps. The full stacking rearrange only happens below at 980px. ── */
@media (max-width: 1280px) {
  body.theme-sian2-match .split-layout__inner {
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(18px, 2.8vw, 46px);
  }
  body.theme-sian2-match .split-layout__copy {
    margin-left: clamp(-22px, -1.5vw, -8px);
  }
  body.theme-sian2-match .split-layout__cards {
    transform: translateX(clamp(4px, 1vw, 18px)) !important;
    padding-left: clamp(4px, 1vw, 16px);
    gap: clamp(14px, 1.8vw, 28px);
  }
  body.theme-sian2-match .glass-card {
    flex-basis: clamp(256px, 31vw, 344px) !important;
    max-width: clamp(256px, 31vw, 344px) !important;
    min-height: clamp(356px, 50vh, 430px) !important;
  }
  body.theme-sian2-match .role-flip__title {
    font-size: clamp(40px, 6.2vw, 78px) !important;
  }
  /* Card width/offset come from the proportional base clamp — only the headline
     text scales down here so it always fits the (now smaller) card. */
  body.theme-sian2-match .match-flex-hero__row strong {
    font-size: clamp(34px, 5.2vw, 60px);
  }
  body.theme-sian2-match .match-flex-stack__sub {
    font-size: clamp(12px, 1.05vw, 14px);
    margin-top: 12px;
  }
  /* Blueprint word: smaller + pinned to the left on tighter screens */
  body.theme-sian2-match .match-hero-ghost {
    font-size: clamp(82px, 13vw, 150px);
    left: clamp(16px, 4vw, 44px);
    right: auto;
    text-align: left;
  }
  /* DAECHI/MATCH floating glyphs shrink so they stop piling on top of each
     other in the smaller float area. */
  body.theme-sian2-match .match-glyph,
  body.theme-sian2-match .match-glyph--exit,
  body.theme-sian2-match .match-glyph--enter,
  body.theme-sian2-match .match-glyph--shared {
    width: clamp(96px, 11.5vw, 144px);
    height: clamp(96px, 11.5vw, 144px);
  }
}

@media (max-width: 1080px) {
  body.theme-sian2-match .split-layout__copy { margin-left: 0; }
  body.theme-sian2-match .split-layout__cards {
    transform: translateX(clamp(2px, 0.6vw, 10px)) !important;
  }
  body.theme-sian2-match .glass-card {
    flex-basis: clamp(238px, 33vw, 312px) !important;
    max-width: clamp(238px, 33vw, 312px) !important;
  }
  body.theme-sian2-match .role-flip__title { font-size: clamp(38px, 6vw, 68px) !important; }
  body.theme-sian2-match .match-flex-hero__row strong { font-size: clamp(30px, 5vw, 50px); }
  body.theme-sian2-match .match-hero-ghost { font-size: clamp(68px, 12vw, 120px); }
  body.theme-sian2-match .match-glyph,
  body.theme-sian2-match .match-glyph--exit,
  body.theme-sian2-match .match-glyph--enter,
  body.theme-sian2-match .match-glyph--shared {
    width: clamp(80px, 11.5vw, 122px);
    height: clamp(80px, 11.5vw, 122px);
  }
  body.theme-sian2-match .match-flex-aside--left { max-width: 32vw; }
  body.theme-sian2-match .match-flex-aside--left p { white-space: normal; }
}

/* ── True 4K / ultra-wide only (>=2560px): everything else (1600–2559) now shares
   the identical proportional base layout, so ordinary wide monitors stay clean.
   Here — and only here — the hero card, headline, ghost word, floating glyphs
   and the cards page all scale up together (kept in ratio, text never overflows). ── */
@media (min-width: 2560px) {
  /* Card grows but the headline grows in step, so the words keep the same tidy
     padding inside the frost (no overflow). */
  body.theme-sian2-match .match-flex-stack {
    width: clamp(900px, 38vw, 1200px);
    right: clamp(120px, 5vw, 220px);
  }
  body.theme-sian2-match .match-flex-stack::before {
    inset: -13% -5% -10% -5%;
  }
  body.theme-sian2-match .match-flex-hero__row strong {
    font-size: clamp(92px, 4vw, 124px);
  }
  body.theme-sian2-match .match-flex-stack__sub {
    font-size: clamp(17px, 0.95vw, 22px);
  }
  body.theme-sian2-match .match-hero-ghost {
    font-size: clamp(220px, 11vw, 300px);
  }
  /* Bigger floating alphabet glyphs so the hero fills the wide canvas */
  body.theme-sian2-match .match-glyph,
  body.theme-sian2-match .match-glyph--exit,
  body.theme-sian2-match .match-glyph--enter,
  body.theme-sian2-match .match-glyph--shared {
    width: clamp(260px, 13vw, 340px);
    height: clamp(260px, 13vw, 340px);
  }
  /* Cards page: spread wide instead of hugging the centre, and sit a touch lower */
  body.theme-sian2-match .split-layout__inner {
    width: min(1560px, 92%) !important;
    grid-template-columns: minmax(0, 0.86fr) minmax(0, 1.14fr);
    gap: clamp(56px, 4.6vw, 110px);
    padding-top: clamp(120px, 17vh, 240px);
  }
  body.theme-sian2-match .split-layout__copy {
    margin-left: clamp(-72px, -2.6vw, -28px);
  }
  body.theme-sian2-match .split-layout__cards {
    transform: translateX(clamp(10px, 1.5vw, 38px)) !important;
    padding-left: clamp(16px, 2vw, 48px);
    gap: clamp(24px, 2vw, 46px);
  }
  body.theme-sian2-match .glass-card {
    flex-basis: clamp(340px, 23vw, 440px) !important;
    max-width: clamp(340px, 23vw, 440px) !important;
    min-height: clamp(440px, 50vh, 520px) !important;
  }
  body.theme-sian2-match .role-flip__title {
    font-size: clamp(80px, 5.8vw, 104px) !important;
  }
}

@media (max-width: 980px) {
  body.theme-sian2-match .match-sphere {
    left: 50% !important;
    top: 38% !important;
    width: clamp(200px, 56vw, 280px);
    height: clamp(200px, 56vw, 280px);
  }
  body.theme-sian2-match .split-layout__inner {
    grid-template-columns: 1fr;
    align-content: start;
  }
  body.theme-sian2-match .split-layout__cards {
    flex-direction: column !important;
    min-height: auto !important;
    gap: 16px;
    padding-left: 0 !important;
    transform: none !important;
  }
  body.theme-sian2-match .glass-card--teacher,
  body.theme-sian2-match .glass-card--student {
    margin-top: 0 !important;
    align-self: center;
  }
  body.theme-sian2-match .match-sel-stats { display: none; }
  body.theme-sian2-match .glass-card {
    flex: 0 0 auto !important;
    width: min(320px, 88%) !important;
    max-width: min(320px, 88%) !important;
    min-height: 240px !important;
    aspect-ratio: auto !important;
  }
  body.theme-sian2-match .glass-card--teacher,
  body.theme-sian2-match .glass-card--student { align-self: center; }
  body.theme-sian2-match .glass-card__content { min-height: 210px; }
}

@media (prefers-reduced-motion: reduce) {
  body.theme-sian2-match .match-sphere__blob,
  body.theme-sian2-match .match-sphere__glow,
  body.theme-sian2-match .match-sphere__orbit,
  body.theme-sian2-match .match-grid,
  body.theme-sian2-match .match-motes span,
  body.theme-sian2-match .glass-card.is-visible,
  body.theme-sian2-match .glass-card__icon,
  body.theme-sian2-match .match-sel-stat,
  body.theme-sian2-match .noise-layer,
  body.theme-sian2-match .match-sat,
  body.theme-sian2-match .match-float-glow {
    animation: none !important;
  }
}

/* ═══ v9 GPU glyphs ═══ */
body.theme-sian2-match .match-canvas,
body.theme-sian2-match .match-sphere,
body.theme-sian2-match .match-float-stage,
body.theme-sian2-match .match-sats,
body.theme-sian2-match .match-motes {
  display: none !important;
}

body.theme-sian2-match .match-world {
  z-index: 4;
}

body.theme-sian2-match .match-grid {
  filter: none !important;
  opacity: 0.75;
  background-size: 48px 48px;
}

body.theme-sian2-match .match-glyph-layer {
  position: absolute;
  inset: 0;
  z-index: 5;
  pointer-events: none;
  overflow: visible;
  contain: layout style;
}
body.theme-sian2-match .match-glyph-layer.is-behind-glass .match-glyph {
  opacity: 0.75;
}

body.theme-sian2-match .match-glyph {
  position: absolute;
  left: 0;
  top: 0;
  width: clamp(118px, 16.2vw, 208px);
  height: clamp(118px, 16.2vw, 208px);
  padding: 0;
  border: 0;
  background: transparent !important;
  box-shadow: none !important;
  cursor: pointer;
  pointer-events: auto;
  will-change: transform, opacity;
  transform: translate3d(-9999px, 0, 0);
  contain: layout style;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  filter: drop-shadow(0 18px 28px rgba(180, 40, 50, 0.18));
  transition: none;
  backface-visibility: hidden;
  -webkit-font-smoothing: antialiased;
}

body.theme-sian2-match .match-glyph img {
  width: 100%;
  height: 100%;
  object-fit: contain;
  background: transparent !important;
  pointer-events: none;
  user-select: none;
  -webkit-user-drag: none;
  display: block;
  transform: translateZ(0);
}

body.theme-sian2-match .match-glyph.is-gone {
  visibility: hidden;
  pointer-events: none;
}

body.theme-sian2-match .match-glyph.is-hover {
  filter: drop-shadow(0 22px 36px rgba(196, 21, 31, 0.35));
}
body.theme-sian2-match .match-glyph.is-hover::after {
  content: '';
  position: absolute;
  inset: 8%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(255, 120, 100, 0.28), transparent 68%);
  pointer-events: none;
  z-index: -1;
  animation: matchGlyphAura 0.5s ease-out;
}
@keyframes matchGlyphAura {
  from { transform: scale(0.6); opacity: 0; }
  to { transform: scale(1); opacity: 1; }
}

/* MATCH assemble color punch on letters */
body.theme-sian2-match .match-glyph.is-flash {
  animation: matchGlyphFlash 1.2s cubic-bezier(0.22, 1, 0.36, 1);
}
@keyframes matchGlyphFlash {
  0% { filter: drop-shadow(0 16px 24px rgba(180, 40, 50, 0.16)) hue-rotate(0deg) brightness(1); }
  35% { filter: drop-shadow(0 28px 48px rgba(255, 80, 60, 0.45)) hue-rotate(-18deg) brightness(1.25) saturate(1.35); }
  100% { filter: drop-shadow(0 16px 24px rgba(180, 40, 50, 0.16)) hue-rotate(0deg) brightness(1); }
}

body.theme-sian2-match .match-glyph-layer.is-matched .match-glyph--shared,
body.theme-sian2-match .match-glyph-layer.is-matched .match-glyph--enter {
  filter: drop-shadow(0 20px 34px rgba(255, 70, 50, 0.32)) brightness(1.08) saturate(1.2);
}

body.theme-sian2-match .match-glyph--exit,
body.theme-sian2-match .match-glyph--enter,
body.theme-sian2-match .match-glyph--shared {
  width: clamp(118px, 16.2vw, 208px);
  height: clamp(118px, 16.2vw, 208px);
}

body.theme-sian2-match .match-glyph--enter.is-gone {
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

@media (max-width: 980px) {
  body.theme-sian2-match .match-glyph,
  body.theme-sian2-match .match-glyph--exit,
  body.theme-sian2-match .match-glyph--enter,
  body.theme-sian2-match .match-glyph--shared {
    width: clamp(88px, 24vw, 150px);
    height: clamp(88px, 24vw, 150px);
  }
  body.theme-sian2-match .match-flex-aside { display: none; }
  body.theme-sian2-match .match-flex-stack {
    right: 16px;
    top: 46%;
    width: min(94vw, 520px);
  }
  body.theme-sian2-match .match-flex-hero__row strong {
    font-size: clamp(36px, 12vw, 64px);
  }
}


body.theme-sian2-match .match-float-stage {
  position: absolute;
  left: 54%;
  top: 48%;
  width: min(560px, 58vw);
  height: min(360px, 48vh);
  transform: translate(-50%, -50%) translate3d(var(--stage-x, 0px), var(--stage-y, 0px), 0);
  z-index: 6;
  pointer-events: none;
}

body.theme-sian2-match .match-float-glow {
  position: absolute;
  inset: -18%;
  border-radius: 50%;
  background: radial-gradient(circle, rgba(196, 21, 31, 0.2) 0%, rgba(196, 21, 31, 0.06) 42%, transparent 70%);
  filter: blur(8px);
  animation: matchGlowPulse 6s ease-in-out infinite;
}

body.theme-sian2-match .match-float-word {
  position: absolute;
  inset: 8% 0;
  display: grid;
  place-items: center;
  will-change: transform, opacity;
  filter: drop-shadow(0 28px 50px rgba(196, 21, 31, 0.22));
}

body.theme-sian2-match .match-float-word img {
  width: min(520px, 100%);
  height: auto;
  object-fit: contain;
  mix-blend-mode: multiply;
  user-select: none;
  -webkit-user-drag: none;
}

body.theme-sian2-match .match-float-word--match { opacity: 0; }

body.theme-sian2-match .match-sats {
  position: absolute;
  inset: -8%;
  transform: rotate(var(--sat-rot, 0deg)) scale(var(--sat-spread, 1)) translateY(var(--sat-y, 0px));
}

body.theme-sian2-match .match-sat {
  position: absolute;
  width: clamp(64px, 9vw, 96px);
  height: clamp(64px, 9vw, 96px);
  border-radius: 22px;
  background:
    var(--sat-img) center / contain no-repeat,
    linear-gradient(145deg, rgba(255,255,255,0.85), rgba(255,255,255,0.2));
  box-shadow: 0 18px 40px rgba(196, 21, 31, 0.16), inset 0 1px 0 rgba(255,255,255,0.85);
  backdrop-filter: blur(8px);
  animation: matchSatFloat calc(5s + var(--i) * 0.8s) ease-in-out infinite;
  animation-delay: calc(var(--i) * -1.2s);
}

body.theme-sian2-match .match-sat--1 { left: 2%; top: 12%; --sat-img: url('../images/icon1.png'); }
body.theme-sian2-match .match-sat--2 { right: 0; top: 28%; --sat-img: url('../images/icon2.png'); width: clamp(56px, 8vw, 84px); height: clamp(56px, 8vw, 84px); }
body.theme-sian2-match .match-sat--3 { left: 18%; bottom: 4%; --sat-img: url('../images/icon4.png'); width: clamp(52px, 7.5vw, 78px); height: clamp(52px, 7.5vw, 78px); }

@keyframes matchSatFloat {
  0%, 100% { transform: translateY(0) rotate(-4deg); }
  50% { transform: translateY(-12px) rotate(5deg); }
}

body.theme-sian2-match .match-float-caption {
  position: absolute;
  left: 50%;
  bottom: -6%;
  transform: translateX(-50%);
  display: flex;
  align-items: center;
  gap: 10px;
  margin: 0;
  font-family: var(--match-font);
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.28em;
  color: rgba(12, 12, 12, 0.28);
}
body.theme-sian2-match .match-float-caption i {
  width: 28px;
  height: 1px;
  background: linear-gradient(90deg, transparent, var(--match-red), transparent);
  display: block;
}

body.theme-sian2-match .match-roller {
  display: flex;
  align-items: center;
  gap: 14px;
  margin: 0;
}

body.theme-sian2-match .match-roller--en {
  font-family: var(--match-font);
  font-weight: 800;
  font-size: clamp(42px, 8vw, 96px);
  line-height: 0.95;
  letter-spacing: -0.05em;
  color: var(--match-ink);
  transform: translate3d(calc(var(--mx) * -8px + var(--match-type-out, 0) * -16px), calc(var(--my) * -6px + var(--match-type-out, 0) * -20px), 0);
  opacity: calc(1 - var(--match-type-out, 0));
}

body.theme-sian2-match .match-roller__prefix {
  flex: 0 0 auto;
  color: rgba(12, 12, 12, 0.28);
}

body.theme-sian2-match .match-roller__slot {
  position: relative;
  height: 1em;
  overflow: hidden;
  flex: 1 1 auto;
  min-width: 0;
  color: var(--match-red);
}

body.theme-sian2-match .match-roller__track {
  display: flex;
  flex-direction: column;
  transition: transform 0.7s cubic-bezier(0.16, 1, 0.3, 1);
  will-change: transform;
}

body.theme-sian2-match .match-roller__item {
  display: block;
  height: 1em;
  line-height: 1em;
  white-space: nowrap;
}

body.theme-sian2-match .match-roller--ko {
  margin-top: 18px;
  max-width: 28ch;
  font-family: 'Noto Sans KR', sans-serif;
  font-size: clamp(14px, 1.3vw, 16px);
  font-weight: 500;
  color: var(--match-muted);
  opacity: calc(1 - var(--match-type-out, 0));
}

body.theme-sian2-match .match-roller--ko .match-roller__slot {
  height: 1.65em;
  color: var(--match-muted);
}

body.theme-sian2-match .match-roller--ko .match-roller__item {
  height: 1.65em;
  line-height: 1.65;
  white-space: normal;
}

@media (max-width: 980px) {
  body.theme-sian2-match .match-float-stage {
    left: 50%;
    top: 34%;
    width: min(420px, 88vw);
    height: min(240px, 32vh);
  }
  body.theme-sian2-match .match-roller--en {
    font-size: clamp(34px, 10vw, 56px);
    flex-wrap: wrap;
  }
  body.theme-sian2-match .match-sat { display: none; }
}