/* =====================================================================
   SEA 홈페이지: B 디자인 (e스포츠 중계 포스터, 황동 + 먹색)
   - 색·글꼴·간격은 맨 위 :root 토큰만 바꾸면 전체에 반영된다.
   - 바탕색은 SEA 로고의 금속(황동)과 따뜻한 먹색, 가운데 비스듬한 "틈"은 로고의 대각선 틈에서 가져왔다.
   - 게임 색(--lol, --val)은 "지원 게임" 이름표의 작은 점으로 어느 게임인지 알려 줄 때만 쓴다.
   - 설계 문서: docs/superpowers/specs/2026-11-09-homepage-b-design.md, 2026-11-09-games-section-design.md, 2026-11-10-hero-live-screen-design.md(첫 화면)
   ===================================================================== */

:root {
  color-scheme: dark;

  /* 바탕과 글자: 따뜻한 먹색 위에 분필색 글자. --night-2 는 기운 섹션 띠 색 */
  --night: #0d0b08;
  --night-deep: #080705;
  --night-2: #15120d;
  --line: #2d2a24;
  --chalk: #f3f3f1;
  --soft: #cbc7bf;
  --mute: #9a958b;
  --ink: #0d0b08;

  /* 면과 틈: 황동 = 로고 금속의 어두운 쪽, 칼날 = 틈 속 */
  --brass: #7a5a24;
  --blade: #030201;

  /* 브랜드 금색 (로고와 앱 워드마크 그라데이션에서) */
  --gold: #c8aa6e;
  --gold-hi: #fff3c9;
  --gold-lo: #8a6a2a;

  /* 게임 색: "지원 게임" 이름표의 점에서만 쓴다(바탕에는 쓰지 않는다) */
  --lol: #0ac8b9;
  --val: #ff4655;

  /* 방송 중 표시(첫 화면의 LIVE 점 하나)에만 쓰는 붉은색. 게임 색 규칙과 별개라 따로 둔다 */
  --live-dot: #ff4655;

  /* 글꼴: 제목 = 앱 홈 기둥 제목, 본문 = 앱 본문, 숫자 = 오버레이 점수판 */
  --font-display: "Black Han Sans", "Noto Sans KR", sans-serif;
  --font-body: "Noto Sans KR", "Malgun Gothic", sans-serif;
  --font-num: "Barlow Condensed", "Rajdhani", sans-serif;
  --font-brand: "Rajdhani", "Noto Sans KR", sans-serif;
  --font-code: ui-monospace, "Cascadia Mono", Consolas, monospace;

  /* 글자 크기 */
  --fs-body: 1.0625rem;
  --fs-small: 0.875rem;
  --fs-h3: 1.375rem;
  --fs-h2: clamp(1.875rem, 3.4vw, 2.875rem);
  --fs-h1: clamp(2.75rem, 4.5vw, 4.25rem);

  /* 간격 */
  --wrap: 1200px;
  --gutter: clamp(16px, 4vw, 32px);
  --section-y: clamp(64px, 8vw, 112px);
  --header-h: 64px;

  /* 기울임: 오버레이 프레임과 섹션 경계 */
  --frame-skew: 3deg;
  --band-skew: 2.5deg;
}

/* ---------------------------------------------------------------------
   기본
   --------------------------------------------------------------------- */
*,
*::before,
*::after {
  box-sizing: border-box;
}

html {
  scroll-behavior: smooth;
  scroll-padding-top: calc(var(--header-h) + 16px);
  -webkit-text-size-adjust: 100%;
}

body {
  margin: 0;
  background: var(--night);
  color: var(--chalk);
  font: 400 var(--fs-body) / 1.75 var(--font-body);
  word-break: keep-all;
  overflow-wrap: break-word;
  -webkit-font-smoothing: antialiased;
}

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

a {
  color: inherit;
}

h1,
h2,
h3,
p,
ul,
ol,
dl,
dd,
figure {
  margin: 0;
}

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

button {
  font: inherit;
}

h1,
h2,
h3 {
  font-synthesis: none;
  line-height: 1.2;
  text-wrap: balance;
}

/* 큰 제목만 굵은 제목용 글꼴. 작은 소제목(h3)은 뭉개지지 않게 본문 글꼴의 굵은체를 쓴다 */
h1,
h2 {
  font-family: var(--font-display);
  font-weight: 400;
}

h3 {
  font-family: var(--font-body);
  font-weight: 700;
}

h2 {
  font-size: var(--fs-h2);
}

:focus-visible {
  outline: 3px solid var(--gold);
  outline-offset: 3px;
}

.wrap {
  width: min(100% - 2 * var(--gutter), var(--wrap));
  margin-inline: auto;
}

.visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  white-space: nowrap;
}

.skip-link {
  position: absolute;
  top: -64px;
  left: 16px;
  z-index: 20;
  padding: 10px 16px;
  background: var(--gold);
  color: var(--ink);
  font-weight: 700;
}

.skip-link:focus {
  top: 12px;
}

/* 섹션 공통: 위아래 간격은 여기 한 곳에서만 정한다 */
.section {
  padding-block: var(--section-y);
}

/* 기운 섹션: 띠 모양 바탕(::before)을 --band-skew 만큼 기울여서, 위·아래 경계가 같은 각도로 비스듬하게 이어진다.
   바탕이 body 와 같은 섹션(#how, #faq)에는 띠가 없어서, 이 띠(--night-2)가 경계를 만든다.
   기울인 띠의 오른쪽 끝이 앞 섹션 아래쪽으로 올라오지만, 섹션 아래 여백(최소 64px)이 그 높이보다 커서 글자를 가리지 않는다 */
.band {
  position: relative;
  isolation: isolate;
}

.band::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--night-2);
  border-top: 1px solid var(--line);
  transform: skewY(calc(-1 * var(--band-skew)));
  transform-origin: 0 0;
}

/* 첫 화면 바로 아래 경계(지원 게임 띠의 위쪽 선)를 완만하게: 이 섹션의 띠만 기울기를 줄인다 */
#games {
  --band-skew: 1.25deg;
}

.section-head {
  margin-bottom: clamp(32px, 5vw, 56px);
}

/* 제목은 왼쪽, 설명은 오른쪽(컨트롤러) */
.split-head {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 24px 56px;
  align-items: end;
  margin-bottom: clamp(32px, 4.5vw, 56px);
}

.split-head p {
  max-width: 30em;
  color: var(--soft);
}

/* ---------------------------------------------------------------------
   버튼과 링크
   --------------------------------------------------------------------- */
/* 기울어진 버튼: 글자는 똑바로 두고 배경판(::before)만 기울인다 */
.btn {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 26px;
  border: 0;
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  text-decoration: none;
  cursor: pointer;
}

.btn::before {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: var(--chalk);
  transform: skewX(-10deg);
  transition: background-color 0.15s ease;
}

.btn-primary {
  color: var(--ink);
}

.btn-primary:hover::before {
  background: var(--gold-hi);
}

.btn-sm {
  min-height: 40px;
  padding: 0 18px;
  font-size: 0.9375rem;
}

.text-link {
  text-decoration: underline;
  text-decoration-color: var(--mute);
  text-decoration-thickness: 1px;
  text-underline-offset: 0.35em;
}

.text-link:hover {
  text-decoration-color: var(--chalk);
}

/* ---------------------------------------------------------------------
   머리말
   --------------------------------------------------------------------- */
.site-header {
  position: sticky;
  top: 0;
  z-index: 10;
  background: var(--night);
  border-bottom: 1px solid var(--line);
}

.bar {
  display: flex;
  align-items: center;
  gap: 32px;
  min-height: var(--header-h);
}

.brand {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  text-decoration: none;
}

.brand img {
  width: auto;
  height: 35px;
}

/* 워드마크는 앱 시작 화면(desktop.css)과 같은 금색 그라데이션 */
.brand-word {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold) 60%, var(--gold-lo));
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  font: 800 3.0rem / 1 var(--font-brand);
  letter-spacing: 0.16em;
}

.badge {
  padding: 3px 7px;
  border: 1px solid var(--line);
  color: var(--mute);
  font: 700 0.75rem / 1 var(--font-num);
  letter-spacing: 0.04em;
}

.nav {
  display: flex;
  gap: 28px;
  margin-inline-start: auto;
}

.nav a {
  padding: 8px 0;
  color: var(--mute);
  font-size: 0.9375rem;
  font-weight: 500;
  text-decoration: none;
  transition: color 0.15s ease;
}

.nav a:hover {
  color: var(--chalk);
}

/* ---------------------------------------------------------------------
   히어로
   --------------------------------------------------------------------- */
.hero {
  position: relative;
  isolation: isolate;
  padding-block: clamp(32px, 3.2vw, 44px) clamp(56px, 5vw, 72px);
  /* 위에서 아래로 어두워지는 그림자 + 왼쪽 황동 / 오른쪽 먹색.
     .stage-bg 는 최대 1440px 이라, 그보다 넓은 화면의 양옆은 이 바탕이 같은 색으로 이어 준다 */
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.3)),
    linear-gradient(to right, var(--brass) 50%, var(--night) 50%);
}

/* 두 색 면과 틈을 한 장의 SVG 로 그려서, 색의 경계와 틈이 언제나 같은 선을 따른다 */
.stage-bg {
  position: absolute;
  top: 0;
  left: 50%;
  z-index: -1;
  width: min(100%, 1440px);
  height: 100%;
  transform: translateX(-50%);
  pointer-events: none;
}

.plane-l {
  fill: var(--brass);
}

.plane-r {
  fill: var(--night);
}

/* 로고의 대각선 틈: 검은 칼날에 금속 금 테두리, 그 뒤로 금빛이 번진다(설치 섹션에만 있다. 첫 화면에는 틈 없이 두 면의 경계만 있다) */
.slit-blade {
  fill: var(--blade);
  stroke: url(#g-rim);
  stroke-width: 1.8;
  vector-effect: non-scaling-stroke;
}

.slit-glow {
  fill: var(--gold-hi);
  opacity: 0.5;
  filter: url(#f-leak);
}

/* 첫 화면의 두 면 사이 경계선: 빛 없이 가는 금빛 선 하나 */
.edge-line {
  stroke: rgb(200 170 110 / 0.55);
  stroke-width: 1;
  vector-effect: non-scaling-stroke;
}

.hero-title {
  font-size: var(--fs-h1);
  line-height: 1.02;
  letter-spacing: -0.02em;
  /* 글자 크기를 200%로 키운 좁은 화면에서 한 단어("결승전처럼")가 폭보다 길어지면 마지막 수단으로 중간에서 끊는다.
     그러지 않으면 한 칸짜리 그리드가 단어 길이만큼 넓어져 가로 스크롤이 생긴다 */
  overflow-wrap: anywhere;
}

.hero-title span {
  display: block;
}

.hero-actions {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 16px 28px;
  margin-top: 28px;
}

/* 기울어진 프레임: 판(.obs-box)만 기울이고 그림(.obs-stage)은 반대로 되돌려 똑바로 둔다.
   좌우 안쪽 여백 14px 이 기울임으로 생기는 가장자리 이동량(약 10px)보다 커서 그림이 잘리지 않는다 */
.obs-box {
  padding: 10px 14px;
  border: 2px solid rgb(243 243 241 / 0.3);
  background: var(--night-deep);
  transform: skewX(calc(-1 * var(--frame-skew)));
}

.obs-stage {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
  background: var(--night-deep);
  transform: skewX(var(--frame-skew));
}

.obs-stage img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
}

/* ---------------------------------------------------------------------
   첫 화면의 방송 화면: 기울이지 않은 큰 16:9 한 장. 게임 탭, 화면, 아래 한 줄(LIVE, 단계, 예시 화면, 멈춤 버튼).
   글 칸의 왼쪽 끝은 머리말 로고와 같은 줄(--wrap 틀)에 맞추고, 화면은 오른쪽으로 틀 밖 최대 88px 더 나온다.
   움직임은 js/site.js: 장면 전환은 웹 애니메이션으로 걸고, 모션을 줄인 환경에서는 걸지 않는다.
   --------------------------------------------------------------------- */
.hero-grid {
  display: grid;
  grid-template-columns: minmax(0, 22.5rem) minmax(0, 1fr);
  gap: 40px 44px;
  align-items: center;
}

.hero-copy p {
  max-width: 23em;
  margin-top: 22px;
  color: var(--chalk);
}

/* 이 글은 황동 면 위에 있어서, 밑줄도 어두운 회색(--mute)이 아니라 밝게 */
.hero-copy .text-link {
  text-decoration-color: var(--soft);
}

/* 틀 밖으로 나가는 양은 화면 양옆 여백(100vw 기준)보다 24px 작게 잡아, 어느 폭에서도 가로 스크롤이 생기지 않게 한다 */
.live {
  container-type: inline-size;
  min-width: 0;
  margin-right: calc(-1 * min(88px, max(0px, (100vw - min(100vw - 2 * var(--gutter), var(--wrap))) / 2 - 24px)));
}

.live-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
  margin-bottom: 16px;
}

/* 스크립트가 없으면 탭과 아래 한 줄은 숨고 롤 첫 장면 한 장만 보인다 */
.live:not([data-ready]) .live-tabs,
.live:not([data-ready]) .live-strip {
  display: none;
}

.live-frame {
  position: relative;
  border: 1px solid rgb(243 243 241 / 0.22);
  background: var(--night-deep);
  box-shadow: 0 30px 80px rgb(0 0 0 / 0.55);
}

/* 모서리 표시(캡처 영역 표시): 화면 바깥 10px에 길이 22px, 두께 2px */
.live-frame::before {
  content: "";
  position: absolute;
  inset: -10px;
  z-index: 3;
  pointer-events: none;
  background:
    linear-gradient(var(--gold-hi), var(--gold-hi)) top left / 22px 2px no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) top left / 2px 22px no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) top right / 22px 2px no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) top right / 2px 22px no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom left / 22px 2px no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom left / 2px 22px no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom right / 22px 2px no-repeat,
    linear-gradient(var(--gold-hi), var(--gold-hi)) bottom right / 2px 22px no-repeat;
}

.live-screen {
  position: relative;
  aspect-ratio: 16 / 9;
  overflow: hidden;
}

/* 여섯 장을 겹쳐 놓고 지금 장면(.on)과 덮여 가는 이전 장면(.prev)만 보이게 한다.
   보이지 않는 장은 보조기기에도 읽히지 않는다(visibility) */
.live-screen img {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  visibility: hidden;
}

.live-screen img.prev {
  z-index: 1;
  visibility: visible;
}

.live-screen img.on {
  z-index: 2;
  visibility: visible;
}

/* 장면이 바뀔 때 지나가는 금빛 선: 로고의 비스듬한 틈과 같은 기울기. 평소에는 투명 */
.live-edge {
  position: absolute;
  top: -4%;
  bottom: -4%;
  left: -8%;
  z-index: 5;
  width: 3px;
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  box-shadow: 0 0 22px 3px rgb(255 243 201 / 0.5);
  transform: skewX(-16deg);
  opacity: 0;
  pointer-events: none;
}

/* 화면 아래 한 줄: LIVE 표시 | 지금 단계 | 예시 화면과 멈춤 버튼. 칸 폭이 720px 아래이면 두 줄로 접는다(아래 @container) */
.live-strip {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr) auto;
  grid-template-areas: "chip phases aside";
  align-items: center;
  gap: 12px 28px;
  margin-top: 22px;
}

.live-chip {
  grid-area: chip;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  color: var(--chalk);
  font: 800 1rem / 1 var(--font-num);
  letter-spacing: 0.14em;
}

.live-chip i {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--live-dot);
}

/* 퍼지는 빛은 재생 중에만(멈춤을 누르면 같이 멈춘다). 상태는 js/site.js 가 .live 의 data-state 로 알린다 */
.live[data-state="playing"] .live-chip i {
  animation: live-pulse 1.8s ease-out infinite;
}

@keyframes live-pulse {
  0% {
    box-shadow: 0 0 0 0 rgb(255 70 85 / 0.7);
  }

  70%,
  100% {
    box-shadow: 0 0 0 9px rgb(255 70 85 / 0);
  }
}

.live-phases {
  grid-area: phases;
  display: flex;
  align-items: center;
  min-width: 0;
}

.live-phases li {
  display: flex;
  flex: 1 1 0;
  align-items: center;
  min-width: 0;
}

.live-phases li:last-child {
  flex: none;
}

.live-phase {
  display: inline-flex;
  flex: 0 1 auto;
  align-items: center;
  gap: 10px;
  min-width: 0;
  padding: 8px 0;
  border: 0;
  background: none;
  color: var(--soft);
  font: 500 0.9375rem / 1.2 var(--font-body);
  text-align: left;
  cursor: pointer;
}

.live-phase::before {
  content: "";
  flex: none;
  width: 11px;
  height: 11px;
  border: 2px solid rgb(243 243 241 / 0.55);
  border-radius: 50%;
}

.live-phases .done .live-phase::before {
  border-color: var(--gold);
  background: var(--gold);
}

.live-phases .now .live-phase {
  color: var(--chalk);
  font-weight: 700;
}

.live-phases .now .live-phase::before {
  border-color: var(--gold-hi);
  background: var(--gold-hi);
  box-shadow: 0 0 0 5px rgb(255 243 201 / 0.2);
}

/* 단계 사이의 선: 지금 단계에서 다음 단계로 가는 시간만큼 금색이 채워진다(--p, 0~1) */
.live-seg {
  position: relative;
  flex: 1 1 8px;
  min-width: 8px;
  height: 2px;
  margin-inline: 14px;
  background: rgb(243 243 241 / 0.22);
}

.live-seg i {
  position: absolute;
  inset: 0;
  background: var(--gold-hi);
  transform: scaleX(var(--p, 0));
  transform-origin: 0 50%;
}

.live-aside {
  grid-area: aside;
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: 6px 16px;
}

.live-note {
  color: var(--soft);
  font-size: 0.8125rem;
  line-height: 1.4;
}

/* 멈춤 / 계속 / 다시 재생. 글자 앞의 작은 표시(두 줄, 삼각형, 둥근 화살표)는 상태(data-state)에 따라 달라진다 */
.live-play {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-height: 32px;
  padding: 0 14px;
  border: 1px solid rgb(243 243 241 / 0.4);
  background: rgb(13 11 8 / 0.35);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 0.8125rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.live-play:hover {
  border-color: var(--gold-hi);
}

.live-play::before {
  content: "";
  flex: none;
}

.live-play[data-state="playing"]::before {
  width: 9px;
  height: 11px;
  border-right: 3px solid currentColor;
  border-left: 3px solid currentColor;
}

.live-play[data-state="paused"]::before {
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 6px 0 6px 10px;
  border-color: transparent transparent transparent currentColor;
}

.live-play[data-state="ended"]::before {
  width: 11px;
  height: 11px;
  border: 2px solid currentColor;
  border-top-color: transparent;
  border-radius: 50%;
}

@container (max-width: 720px) {
  .live-strip {
    grid-template-columns: minmax(0, 1fr) auto;
    grid-template-areas:
      "chip aside"
      "phases phases";
  }
}

/* 컨트롤러 목록 앞 표식: 오버레이 밴 칸을 닮은 작은 네모 */
.controls li {
  position: relative;
  padding-left: 14px;
  line-height: 1.55;
}

.controls li::before {
  content: "";
  position: absolute;
  top: 0.72em;
  left: 0;
  width: 5px;
  height: 5px;
  background: currentColor;
  opacity: 0.6;
}

/* ---------------------------------------------------------------------
   지원 게임: 게임마다 가로 띠 하나
   황동빛 띠 위에 먹색 자막판(이름표, 제목, 기능 세 가지)과 오버레이 화면 프레임.
   기능을 고르면 .game 의 data-active 가 바뀌고, 화면의 해당 자리(.hl)가 켜진다.
   --------------------------------------------------------------------- */
.games {
  display: grid;
  gap: 12px;
}

.game {
  position: relative;
  isolation: isolate;
  overflow: hidden;
  padding-block: 60px 28px;
  background: var(--night);
}

/* 띠 위의 황동빛: 바깥쪽에서 안쪽으로 옅어진다 */
.game::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  pointer-events: none;
}

.game-lol {
  --gc: var(--lol);
}

.game-val {
  --gc: var(--val);
}

.game-lol::after {
  background: linear-gradient(100deg, color-mix(in srgb, var(--brass) 55%, transparent) 0, rgb(21 17 10 / 0.25) 55%, transparent 82%);
}

.game-val::after {
  background: linear-gradient(260deg, color-mix(in srgb, var(--brass) 55%, transparent) 0, rgb(21 17 10 / 0.25) 55%, transparent 82%);
}

/* 좁은 화면 기본: 한 칸. 자막판 바탕(::before)이 제목, 화면, 기능 세 줄을 한 장으로 덮는다.
   바탕이 잘린 모양(clip-path)이라 글 위로 올라오지 않도록, 내용 칸(.game-head, .feats, .game-shot)은 position: relative 로 위에 둔다 */
.game-grid {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  align-items: start;
}

.game-grid::before {
  content: "";
  grid-column: 1;
  grid-row: 1 / span 3;
  align-self: stretch;
  background: var(--night);
  border-top: 2px solid var(--gold);
}

.game-head {
  position: relative;
  grid-column: 1;
  grid-row: 1;
  display: flex;
  flex-wrap: wrap;
  align-items: baseline;
  gap: 4px 22px;
  padding: 22px 20px 0;
}

/* 이름표: 금색 판을 기울여 자막판 위에 얹고, 안에 게임 색 점 하나 */
.game-tab {
  position: absolute;
  bottom: 100%;
  left: 0;
  isolation: isolate;
  display: flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 30px 0 22px;
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
}

.game-tab::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--ink);
  border-radius: 50%;
  background: var(--gc);
}

.game-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  background: linear-gradient(90deg, var(--gold-hi), var(--gold));
  transform: skewX(-10deg);
}

.game-title {
  font-family: var(--font-display);
  font-size: clamp(2.75rem, 4.2vw, 3.75rem);
  font-weight: 400;
  line-height: 1;
  white-space: nowrap;
}

.game-lead {
  color: var(--soft);
  font-size: 0.9375rem;
  font-weight: 500;
}

.feats {
  position: relative;
  grid-column: 1;
  grid-row: 3;
  display: grid;
  gap: 16px;
  padding: 20px;
}

/* 기능 하나 = 버튼 하나. 켜진 기능이 화면의 해당 자리를 밝힌다 */
.feat {
  display: grid;
  grid-template-columns: 112px minmax(0, 1fr);
  grid-template-rows: auto 1fr;
  gap: 0 14px;
  align-items: center;
  width: 100%;
  padding: 0;
  border: 0;
  background: none;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.feat .dg {
  grid-row: 1 / span 2;
}

.feat-name {
  align-self: end;
  font-size: 0.9375rem;
  font-weight: 700;
  line-height: 1.4;
}

.where {
  align-self: start;
  color: var(--mute);
  font-size: 0.8125rem;
  line-height: 1.5;
}

.feat[aria-pressed="true"] .feat-name {
  color: var(--gold-hi);
}

.feat[aria-pressed="true"] .dg {
  outline: 2px solid var(--gold-hi);
  outline-offset: 2px;
}

/* 화면 속 자리 도해: 오버레이 1920×1080 기준 퍼센트 좌표. 켜진 자리는 금색 */
.dg {
  position: relative;
  display: block;
  width: min(150px, 100%);
  aspect-ratio: 16 / 9;
  border: 1px solid var(--line);
  background: var(--night-deep);
}

.dg i {
  position: absolute;
  background: rgb(243 243 241 / 0.1);
}

.dg i.on {
  background: var(--gold);
}

.dg .r-gear-l:not(.on),
.dg .r-gear-r:not(.on) {
  display: none;
}

/* 자리 좌표: 도해(.dg i)와 화면 강조(.hl)가 같은 클래스를 쓴다 */
.r-panel-l { left: 3.1%; top: 14.8%; width: 22.4%; height: 47.2%; }
.r-panel-r { left: 74.5%; top: 14.8%; width: 22.4%; height: 47.2%; }
.r-splash { left: 26%; top: 6%; width: 48%; height: 56%; }
.r-timeline { left: 18.8%; top: 71.3%; width: 62.4%; height: 21.3%; }
.r-timer { left: 63%; top: 53.7%; width: 9%; height: 5.5%; }
.r-fear-l { left: 3.1%; top: 70.4%; width: 14.4%; height: 9.3%; }
.r-fear-r { left: 82.6%; top: 70.4%; width: 14.4%; height: 9.3%; }
.r-bar { left: 0; top: 0; width: 100%; height: 6.5%; }
.r-side-l { left: 0; top: 33.8%; width: 15.6%; height: 38%; }
.r-side-r { left: 84.4%; top: 33.8%; width: 15.6%; height: 38%; }
.r-gear-l { left: 10.4%; top: 33.8%; width: 5.2%; height: 38%; }
.r-gear-r { left: 84.4%; top: 33.8%; width: 5.2%; height: 38%; }

.game-shot {
  position: relative;
  grid-column: 1;
  grid-row: 2;
  margin: 18px 20px 0;
}

.game-shot figcaption {
  margin-top: 12px;
  color: var(--soft);
  font-size: 0.8125rem;
}

.hl {
  position: absolute;
  border: 2px solid var(--gold-hi);
  background: rgb(200 170 110 / 0.3);
  box-shadow: 0 0 0 1px rgb(0 0 0 / 0.5);
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.2s ease;
}

.game[data-active="1"] .hl-1,
.game[data-active="2"] .hl-2,
.game[data-active="3"] .hl-3 {
  opacity: 1;
}

/* 넓은 화면: 자막판(왼쪽)과 화면(오른쪽). 발로란트는 좌우를 뒤집는다 */
@media (min-width: 1001px) {
  .game-grid {
    grid-template-columns: minmax(0, 730fr) minmax(0, 440fr);
    column-gap: 30px;
  }

  .game-grid::before {
    grid-row: 1 / span 2;
    clip-path: polygon(0 0, 100% 0, calc(100% - 38px) 100%, 0 100%);
  }

  .game-head {
    padding: 16px 66px 0 28px;
  }

  .feats {
    grid-row: 2;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 20px;
    padding: 14px 66px 22px 28px;
  }

  .feat {
    display: block;
  }

  .feat-name {
    display: block;
    margin-top: 7px;
  }

  .where {
    display: block;
  }

  .game-shot {
    grid-column: 2;
    grid-row: 1 / span 2;
    align-self: end;
    margin: 0 0 8px;
  }

  .game-val .game-grid {
    grid-template-columns: minmax(0, 440fr) minmax(0, 730fr);
  }

  .game-val .game-grid::before {
    grid-column: 2;
    clip-path: polygon(38px 0, 100% 0, 100% 100%, 0 100%);
  }

  .game-val .game-head {
    grid-column: 2;
    padding: 16px 28px 0 66px;
  }

  .game-val .feats {
    grid-column: 2;
    padding: 14px 28px 22px 66px;
  }

  .game-val .game-shot {
    grid-column: 1;
  }
}

/* ---------------------------------------------------------------------
   연결 방법: 왼쪽 세 단계, 오른쪽 큰 화면
   단계를 고르면 .how 의 data-active 가 바뀌고, 고른 단계는 금색 세로선과 밝은 번호가 되며 큰 화면의 그림(.pic-N)이 바뀐다.
   --------------------------------------------------------------------- */
#how {
  position: relative;
  isolation: isolate;
  overflow: hidden;
}

/* 좁은 화면 기본: 한 칸. 큰 화면이 위, 황동 띠 위에 놓인다 */
.how {
  position: relative;
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 32px;
}

.how-stage {
  order: -1;
  margin-inline: calc(-1 * var(--gutter));
  padding: 28px var(--gutter) 20px;
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.3)),
    var(--brass);
}

.how-stage figcaption {
  margin-top: 16px;
  color: var(--soft);
  font-size: 0.8125rem;
}

/* 그림 세 장을 겹쳐 놓고 고른 것만 켠다 */
.pic {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  transition: opacity 0.2s ease;
}

.pic text {
  font-family: var(--font-body);
}

.pic .pic-brand {
  font: 700 64px / 1 var(--font-brand);
  letter-spacing: 0.16em;
}

.pic .pic-display text {
  font-family: var(--font-display);
}

.pic .pic-mono text {
  font-family: var(--font-code);
}

.how[data-active="1"] .pic-1,
.how[data-active="2"] .pic-2,
.how[data-active="3"] .pic-3 {
  opacity: 1;
}

.steps {
  display: grid;
}

.step {
  display: grid;
  grid-template-columns: 56px minmax(0, 1fr);
  gap: 0 8px;
  padding: 14px 0 14px 20px;
  border-left: 2px solid var(--line);
}

.step-no {
  color: var(--mute);
  font: 800 2.875rem / 1 var(--font-num);
}

.step h3 {
  margin-bottom: 6px;
  padding-top: 6px;
  font-size: var(--fs-h3);
  line-height: 1.4;
}

.step-btn {
  padding: 0;
  border: 0;
  background: none;
  color: var(--soft);
  font: inherit;
  text-align: left;
  cursor: pointer;
}

.step p {
  max-width: 24em;
  color: var(--soft);
}

/* 고른 단계: 금색 세로선, 밝은 번호, 흰 제목 */
.how[data-active="1"] .step[data-s="1"],
.how[data-active="2"] .step[data-s="2"],
.how[data-active="3"] .step[data-s="3"] {
  border-left-color: var(--gold);
}

.how[data-active="1"] .step[data-s="1"] .step-no,
.how[data-active="2"] .step[data-s="2"] .step-no,
.how[data-active="3"] .step[data-s="3"] .step-no {
  color: var(--gold-hi);
}

.how[data-active="1"] .step[data-s="1"] .step-btn,
.how[data-active="2"] .step[data-s="2"] .step-btn,
.how[data-active="3"] .step[data-s="3"] .step-btn {
  color: var(--chalk);
}

/* 넓은 화면: 단계(왼쪽)와 큰 화면(오른쪽). 뒤에 왼쪽이 "/"로 잘린 황동 판이 화면 오른쪽 끝까지 깔린다 */
@media (min-width: 1001px) {
  .how {
    grid-template-columns: minmax(0, 470fr) minmax(0, 640fr);
    column-gap: 80px;
    align-items: center;
  }

  .how::before {
    content: "";
    position: absolute;
    top: -40px;
    bottom: -36px;
    left: 41%;
    right: calc(50% - 50vw);
    z-index: -1;
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.3)),
      var(--brass);
    clip-path: polygon(72px 0, 100% 0, 100% 100%, 0 100%);
  }

  .how-stage {
    order: 0;
    margin: 0;
    padding: 0;
    background: none;
  }

  #how .note {
    margin-top: 72px;
  }
}

.addr {
  display: grid;
  gap: 14px;
  max-width: 24em;
  margin-top: 22px;
}

.addr dt {
  margin-bottom: 4px;
  color: var(--mute);
  font-size: var(--fs-small);
}

.addr dd {
  display: flex;
  border: 1px solid var(--line);
}

.addr code {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  font: 500 0.9375rem / 1.2 var(--font-code);
  overflow-wrap: anywhere;
}

.copy {
  flex: none;
  padding: 0 16px;
  border: 0;
  border-left: 1px solid var(--line);
  background: transparent;
  color: var(--chalk);
  font-size: var(--fs-small);
  font-weight: 700;
  cursor: pointer;
  transition: background-color 0.15s ease, color 0.15s ease;
}

.copy:hover {
  background: var(--chalk);
  color: var(--ink);
}

.copy[data-done],
.copy[data-done]:hover {
  background: transparent;
  color: var(--gold);
}

.note {
  max-width: 36em;
  margin-top: clamp(32px, 4vw, 48px);
  color: var(--mute);
}

/* ---------------------------------------------------------------------
   컨트롤러: [롤 | 발로란트] 탭 → 컨트롤러 카드 → 미리보기(기울어진 프레임) → 기능 목록 판 둘.
   바탕은 섹션 띠(--night-2) 그대로이고 황동 면은 쓰지 않는다. 구조는 얇은 테두리, 금색 이름표, 화살표로 만든다.
   카드에 입력하면 JS 가 미리보기([data-out])를 바꾼다. 자바스크립트가 꺼져 있으면 롤 처음 상태가 그대로 보이고 탭은 숨는다.
   --------------------------------------------------------------------- */
.ctl {
  display: grid;
  gap: 28px;
}

.game-dot-lol {
  --gc: var(--lol);
}

.game-dot-val {
  --gc: var(--val);
}

/* 탭: 금색 테두리를 기울인 버튼. 고르면 금색 판이 채워진다 */
.ctl-tabs {
  display: flex;
  flex-wrap: wrap;
  gap: 10px 14px;
}

.ctl:not([data-ready]) .ctl-tabs {
  display: none;
}

.ctl-tab {
  position: relative;
  isolation: isolate;
  display: inline-flex;
  align-items: center;
  gap: 9px;
  height: 44px;
  padding: 0 26px;
  border: 0;
  background: none;
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 1rem;
  font-weight: 700;
  line-height: 1;
  cursor: pointer;
}

.ctl-tab::before {
  content: "";
  flex: none;
  width: 9px;
  height: 9px;
  border: 1.5px solid var(--chalk);
  border-radius: 50%;
  background: var(--gc);
}

.ctl-tab::after {
  content: "";
  position: absolute;
  inset: 0;
  z-index: -1;
  border: 1px solid var(--gold);
  transform: skewX(-10deg);
}

.ctl-tab:hover::after {
  border-color: var(--gold-hi);
}

.ctl-tab[aria-pressed="true"] {
  color: var(--ink);
}

.ctl-tab[aria-pressed="true"]::before {
  border-color: var(--ink);
}

.ctl-tab[aria-pressed="true"]::after {
  background: linear-gradient(90deg, var(--gold-hi), var(--gold));
}

/* 고른 게임만 보인다 */
.ctl[data-game="lol"] [data-for="val"],
.ctl[data-game="lol"] .pv-val,
.ctl[data-game="val"] [data-for="lol"],
.ctl[data-game="val"] .pv-lol {
  display: none;
}

/* 카드 | 화살표 | 미리보기. 좁은 화면 기본은 한 칸(위에서 아래로) */
.ctl-demo {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  justify-items: stretch;
  gap: 16px;
}

.ctl-card {
  border: 2px solid rgb(243 243 241 / 0.3);
  background: var(--night);
}

.ctl-bar {
  display: flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-bottom: 1px solid var(--line);
  background: var(--night-2);
  color: var(--mute);
  font-size: 0.8125rem;
}

.ctl-body {
  display: grid;
  gap: 14px;
  padding: 18px 18px 20px;
}

.ctl-two {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 14px;
}

.ctl-field {
  display: block;
  min-width: 0;
  color: var(--mute);
  font-size: 0.8125rem;
}

.ctl-field input,
.ctl-field select {
  display: block;
  width: 100%;
  height: 40px;
  margin-top: 6px;
  padding: 0 12px;
  border: 1px solid rgb(243 243 241 / 0.3);
  border-radius: 0;
  background: var(--night-deep);
  color: var(--chalk);
  font-family: var(--font-body);
  font-size: 0.9375rem;
}

.ctl-scores {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 12px 10px;
}

.ctl-pair {
  display: flex;
  align-items: center;
  gap: 8px;
}

.ctl-step,
.ctl-swap {
  border: 1px solid rgb(243 243 241 / 0.3);
  background: var(--night-2);
  color: var(--chalk);
  font-family: var(--font-body);
  cursor: pointer;
}

.ctl-step:hover,
.ctl-swap:hover {
  border-color: var(--gold);
}

.ctl-step {
  width: 40px;
  height: 40px;
  font-size: 1.25rem;
  line-height: 1;
}

.ctl-swap {
  height: 40px;
  padding: 0 16px;
  font-size: 0.875rem;
  font-weight: 700;
}

.ctl-score {
  min-width: 1.5em;
  text-align: center;
  font-family: var(--font-num);
  font-size: 1.75rem;
  font-weight: 800;
  line-height: 1;
}

.ctl-sep {
  color: var(--mute);
  font-family: var(--font-num);
  font-size: 1.5rem;
  font-weight: 800;
}

/* 카드에서 미리보기로 가는 금색 화살표(좁은 화면에서는 아래 방향) */
.ctl-arrow {
  position: relative;
  justify-self: center;
  width: 2px;
  height: 40px;
  background: var(--gold);
}

.ctl-arrow::after {
  content: "";
  position: absolute;
  bottom: -3px;
  left: -5px;
  border-top: 9px solid var(--gold);
  border-right: 6px solid transparent;
  border-left: 6px solid transparent;
}

.ctl-view figcaption {
  margin-top: 14px;
  color: var(--mute);
  font-size: var(--fs-small);
}

/* 미리보기 그림: 앱의 오버레이 색(블루, 레드, ATK, DEF)만 이 프레임 안에서 쓴다. 글자 크기는 프레임 폭(cqw)에 맞춰 커지고 작아진다 */
.ctl-stage {
  --pv-blue: #6f9bff;
  --pv-red: #ff7a85;
  --pv-atk: #ff4655;
  --pv-def: #46ccff;
  container-type: inline-size;
  color: var(--chalk);
  background:
    radial-gradient(ellipse 40% 50% at 12% 0, rgb(60 100 255 / 0.3), transparent 70%),
    radial-gradient(ellipse 40% 50% at 88% 0, rgb(255 70 90 / 0.26), transparent 70%),
    linear-gradient(180deg, #0a0c16, #131c33);
}

.pv {
  position: absolute;
  inset: 0;
}

.pv-val {
  background: linear-gradient(180deg, rgb(8 8 14 / 0.55), rgb(8 8 14 / 0.1) 40%, rgb(8 8 14 / 0.5));
}

.pv-head {
  position: absolute;
  top: 12%;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 4%;
  width: 28%;
  height: 12%;
  padding-bottom: 1%;
  border-bottom: 2px solid;
  font-family: var(--font-display);
  line-height: 1.1;
}

.pv-head-l {
  left: 3%;
  border-color: var(--pv-blue);
}

.pv-head-r {
  right: 3%;
  border-color: var(--pv-red);
}

.pv-val .pv-head-l {
  justify-content: flex-start;
  border-color: var(--pv-red);
}

.pv-val .pv-head-r {
  justify-content: flex-end;
  border-color: var(--pv-blue);
}

.pv-name {
  flex: 0 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: clamp(0.625rem, 3cqw, 1.125rem);
}

.pv-head-r .pv-name {
  text-align: right;
}

.pv-num {
  flex: none;
  font-family: var(--font-num);
  font-size: clamp(1rem, 5.2cqw, 1.875rem);
  font-weight: 800;
}

.pv-blue {
  color: var(--pv-blue);
}

.pv-red {
  color: var(--pv-red);
}

.pv-val .pv-num {
  color: var(--gold);
}

.pv-tag {
  flex: none;
  padding: 0.1em 0.5em;
  border-radius: 2px;
  font-family: var(--font-body);
  font-size: clamp(0.5rem, 1.6cqw, 0.625rem);
  font-weight: 700;
  letter-spacing: 0.08em;
}

.pv-tag.is-atk {
  background: var(--pv-atk);
  color: var(--chalk);
}

.pv-tag.is-def {
  background: var(--pv-def);
  color: #000;
}

.pv-rows {
  position: absolute;
  top: 28%;
  width: 24%;
  height: 52%;
  background: repeating-linear-gradient(180deg, rgb(255 255 255 / 0.09) 0 17.5%, transparent 17.5% 20%);
}

.pv-rows-l {
  left: 3%;
}

.pv-rows-r {
  right: 3%;
}

.pv-center {
  position: absolute;
  top: 28%;
  left: 29%;
  display: grid;
  place-items: center;
  width: 42%;
  height: 40%;
  padding: 0 4%;
  background: linear-gradient(135deg, #3b3050, #1d2238);
  color: var(--mute);
  font-size: clamp(0.625rem, 2cqw, 0.75rem);
  text-align: center;
}

.pv-val .pv-center {
  top: 40%;
  height: 14%;
  background: none;
}

.pv-label {
  position: absolute;
  top: 72%;
  left: 25%;
  width: 50%;
  overflow: hidden;
  font-family: var(--font-display);
  font-size: clamp(0.625rem, 3cqw, 1.125rem);
  line-height: 1.3;
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pv-strip {
  position: absolute;
  inset: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 0.5% 0;
  border-bottom: 1px solid rgb(243 243 241 / 0.12);
  background: rgb(0 0 0 / 0.55);
  line-height: 1.2;
}

.pv-cur {
  color: var(--mute);
  font-size: clamp(0.4375rem, 1.3cqw, 0.5625rem);
  letter-spacing: 0.1em;
}

.pv-map {
  color: var(--gold);
  font-size: clamp(0.5625rem, 1.8cqw, 0.75rem);
  font-weight: 700;
}

/* 기능 목록 판: 지원 게임 판과 같은 모양. 이름표(.game-tab)는 판 위에 얹히고, 판 몸통만 오른쪽 끝을 비스듬히 깎는다 */
.controls {
  display: grid;
  grid-template-columns: minmax(0, 1fr);
  gap: 68px 24px;
  margin-top: 32px;
}

.plate {
  position: relative;
}

.plate .game-tab {
  margin: 0;
}

.plate-body {
  padding: 22px 56px 24px 26px;
  border-top: 2px solid var(--gold);
  background: var(--night);
  clip-path: polygon(0 0, 100% 0, calc(100% - 26px) 100%, 0 100%);
}

.plate ul {
  display: grid;
  gap: 4px;
  color: var(--soft);
  font-size: 0.9375rem;
}

@media (min-width: 1001px) {
  .ctl-demo {
    grid-template-columns: minmax(0, 5fr) 56px minmax(0, 6fr);
    align-items: center;
    gap: 0 12px;
  }

  /* 카드는 첫 칸, 화살표는 가운데 칸, 미리보기는 마지막 칸. 숨겨진 카드는 칸을 차지하지 않는다 */
  .ctl-arrow {
    width: 56px;
    height: 2px;
  }

  .ctl-arrow::after {
    top: -5px;
    right: -3px;
    bottom: auto;
    left: auto;
    border-top: 6px solid transparent;
    border-right: 0;
    border-bottom: 6px solid transparent;
    border-left: 9px solid var(--gold);
  }

  .controls {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .plate ul {
    grid-template-columns: repeat(2, minmax(0, 1fr));
    column-gap: 24px;
  }
}

/* ---------------------------------------------------------------------
   자주 묻는 질문
   --------------------------------------------------------------------- */
.faq {
  display: grid;
  grid-template-columns: minmax(0, 5fr) minmax(0, 7fr);
  gap: 32px 56px;
  align-items: start;
}

/* 질문 목록: details/summary 그대로(자바스크립트 없음). 줄마다 기울어진 금색 표시와 +/−가 있고,
   열린 줄은 금색 윗선이 달린 판(오른쪽 끝이 비스듬)이 된다. 판은 details 가 아니라 ::before 로 그려서,
   줄 안쪽에 그리는 초점 테두리가 깎이지 않는다. 열고 닫아도 질문 글자의 가로 위치는 그대로다 */
.faq-list details {
  position: relative;
  isolation: isolate;
  border-top: 1px solid var(--line);
}

.faq-list details:last-child {
  border-bottom: 1px solid var(--line);
}

.faq-list details[open] {
  border-top-color: transparent;
}

.faq-list details[open]::before {
  content: "";
  position: absolute;
  inset: -1px 0 0;
  z-index: -1;
  border-top: 2px solid var(--gold);
  background: var(--night-2);
  clip-path: polygon(0 0, 100% 0, calc(100% - 22px) 100%, 0 100%);
}

.faq-list summary {
  display: flex;
  align-items: center;
  gap: 18px;
  padding: 22px 24px;
  font-size: 1.125rem;
  font-weight: 700;
  line-height: 1.5;
  list-style: none;
  cursor: pointer;
}

.faq-list summary::-webkit-details-marker {
  display: none;
}

.faq-list summary:focus-visible {
  outline-offset: -3px;
}

/* 금색 표시: 기울어진 막대. 닫힌 줄은 흐리게, 열린 줄은 금색 그라데이션 */
.faq-list summary::before {
  content: "";
  flex: none;
  width: 5px;
  height: 20px;
  background: var(--gold);
  opacity: 0.35;
  transform: skewX(-14deg);
}

.faq-list summary:hover::before {
  opacity: 0.8;
}

/* 오른쪽 끝 표시: 닫힘 +, 열림 −(세로 선을 뺀다) */
.faq-list summary::after {
  content: "";
  flex: none;
  width: 14px;
  height: 14px;
  margin-left: auto;
  background:
    linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat,
    linear-gradient(var(--gold), var(--gold)) center / 2px 100% no-repeat;
}

/* 열린 줄: 오른쪽 끝이 비스듬한 판 안에 표시가 들어오도록 오른쪽 여백을 늘린다 */
.faq-list details[open] summary {
  padding-right: 46px;
}

.faq-list details[open] summary::before {
  background: linear-gradient(180deg, var(--gold-hi), var(--gold));
  opacity: 1;
}

.faq-list details[open] summary::after {
  background: linear-gradient(var(--gold), var(--gold)) center / 100% 2px no-repeat;
}

/* 답: 질문 글자와 왼쪽 선을 맞춘다(여백 24 + 표시 5 + 간격 18 = 47) */
.faq-list details p {
  max-width: 36em;
  padding: 0 60px 30px 47px;
  color: var(--soft);
}

/* ---------------------------------------------------------------------
   설치
   --------------------------------------------------------------------- */
.cta-inner {
  display: grid;
  grid-template-columns: minmax(0, 7fr) minmax(0, 5fr);
  gap: 32px 56px;
  align-items: center;
}

/* 설치 섹션: 히어로와 같은 황동 면 + 틈(.stage-bg)으로 처음과 끝을 묶는다.
   위쪽 경계는 --band-skew(2.5°)와 같은 기울기로 깎는다: tan(2.5°) × 폭 = 4.37vw */
.cta {
  position: relative;
  isolation: isolate;
  clip-path: polygon(0 4.37vw, 100% 0, 100% 100%, 0 100%);
  background:
    linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.3)),
    linear-gradient(to right, var(--brass) 50%, var(--night) 50%);
}

.cta h2 {
  font-size: clamp(2.25rem, 5vw, 4rem);
}

.cta p {
  max-width: 22em;
  margin-top: 16px;
  color: var(--soft);
}

.cta .btn {
  margin-top: 32px;
}

.cta-logo {
  justify-self: end;
  width: clamp(160px, 24vw, 300px);
}

/* ---------------------------------------------------------------------
   맺음말
   --------------------------------------------------------------------- */
.site-footer {
  padding-block: 56px 48px;
  border-top: 1px solid var(--line);
  background: var(--night-deep);
}

.foot-top {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 20px 32px;
}

.foot-tag {
  color: var(--mute);
  font-size: 0.9375rem;
  font-weight: 500;
}

.foot-links {
  display: flex;
  flex-wrap: wrap;
  gap: 8px 28px;
  color: var(--mute);
  font-size: 0.9375rem;
}

.foot-links a {
  padding: 6px 0;
  text-decoration: none;
}

.foot-links a:hover {
  color: var(--chalk);
}

.legal {
  max-width: 70ch;
  margin-top: 28px;
  color: var(--mute);
  font-size: 0.8125rem;
  line-height: 1.7;
}

.legal + .legal {
  margin-top: 12px;
}

/* ---------------------------------------------------------------------
   좁은 화면
   --------------------------------------------------------------------- */
@media (max-width: 1000px) {
  .split-head,
  .faq,
  .cta-inner {
    grid-template-columns: 1fr;
  }

  .cta-logo {
    justify-self: start;
    width: 160px;
  }

  /* 첫 화면: 글 → 탭 → 화면이 한 칸으로 쌓이고, 화면은 틀 밖으로 나가지 않는다 */
  .hero-grid {
    grid-template-columns: minmax(0, 1fr);
    gap: 32px;
  }

  .hero-title {
    font-size: clamp(2.75rem, 9vw, 4.25rem);
  }

  .live {
    margin-right: 0;
  }

  /* 이 폭 이하에서는 설명 문단이 틈이 지나는 자리까지 내려오므로 틈을 숨기고, 황동 한 색에 아래로 살짝 어두워지는 그림자만 얹은 배경으로 대신한다(아래까지 색이 채워진다) */
  .stage-bg {
    display: none;
  }

  .hero {
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.45)),
      var(--brass);
  }

  .cta {
    background:
      linear-gradient(180deg, rgb(0 0 0 / 0.15), rgb(0 0 0 / 0.45)),
      var(--brass);
  }
}

@media (max-width: 860px) {
  .nav {
    display: none;
  }

  .bar .btn {
    margin-inline-start: auto;
  }
}

@media (max-width: 560px) {
  .step {
    grid-template-columns: 40px minmax(0, 1fr);
    padding-left: 14px;
  }

  .faq-list summary {
    gap: 14px;
    padding: 18px 16px;
    font-size: 1.0625rem;
  }

  .faq-list details[open] summary {
    padding-right: 34px;
  }

  .faq-list details p {
    padding: 0 34px 24px 35px;
  }

  .faq-list details[open]::before {
    clip-path: polygon(0 0, 100% 0, calc(100% - 14px) 100%, 0 100%);
  }

  .step-no {
    font-size: 2.25rem;
  }

  .live-tabs .ctl-tab {
    padding: 0 20px;
    font-size: 0.9375rem;
  }

  .live-phase {
    gap: 7px;
    font-size: 0.8125rem;
  }

  .live-seg {
    margin-inline: 8px;
  }

  .addr code {
    font-size: 0.8125rem;
  }

  .brand-word {
    font-size: 1.25rem;
  }

  .hero-actions {
    flex-direction: column;
    align-items: stretch;
  }

  .hero-actions .btn {
    min-height: 52px;
  }

  .hero-actions .text-link {
    align-self: flex-start;
  }

  .foot-top {
    align-items: flex-start;
  }
}

/* ---------------------------------------------------------------------
   모션을 줄인 환경: 스크롤과 전환 효과를 끈다 (첫 화면의 장면 전환은 스크립트가 아예 걸지 않음)
   --------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html {
    scroll-behavior: auto;
  }

  .hl,
  .pic {
    transition: none;
  }

  /* 첫 화면: LIVE 점은 깜빡이지 않고, 장면은 자동으로 넘어가지 않으니 멈춤 버튼도 필요 없다 */
  .live[data-state] .live-chip i {
    animation: none;
  }

  .live-play {
    display: none;
  }
}

/* ---------------------------------------------------------------------
   스크롤 등장 효과 (설계서 2026-11-11-scroll-motion-design.md)
   스크립트가 <html class="sx-on"> 을 붙이고 대상에 .sx 표시를 달았을 때만 숨김 상태가 걸린다.
   대상이 화면에 들어오면 스크립트가 .sx-in 을 한 번 붙이고, 그러면 아래 전환이 끝 상태로 간다.
   모션 줄이기, 인쇄, 스크립트 없음에서는 이 블록이 걸리지 않아 처음부터 모두 보인다.
   1 셔터(띠와 판이 위에서 아래로 펼쳐짐), 2 자막판(제목이 닦이고 이름표가 미끄러짐)
   --------------------------------------------------------------------- */

@media screen and (prefers-reduced-motion: no-preference) {
  :root {
    --sx-ease: cubic-bezier(0.65, 0, 0.25, 1);
  }

  /* 1. 셔터: 기운 띠가 위쪽 경계에서 아래로 펼쳐지고 금빛 선이 윗변을 한 번 지나간다 */
  html.sx-on .band.sx-in::before {
    clip-path: inset(0 0 0 0);
    transition: clip-path 0.95s var(--sx-ease);
  }

  html.sx-on .band.sx-sec:not(.sx-in)::before {
    clip-path: inset(0 0 100% 0);
  }

  html.sx-on .band::after {
    content: "";
    position: absolute;
    top: 0;
    left: 0;
    z-index: -1;
    width: 100%;
    height: 3px;
    background: linear-gradient(90deg, transparent, var(--gold-hi), transparent) no-repeat;
    background-size: 30% 100%;
    background-position: -40% 0;
    transform: skewY(calc(-1 * var(--band-skew)));
    transform-origin: 0 0;
    opacity: 0;
    pointer-events: none;
  }

  html.sx-on .band.sx-in::after {
    animation: sx-line 1.2s var(--sx-ease) 0.05s both;
  }

  /* 연결 방법의 황동 판(큰 화면 뒤, 넓은 화면)과 설치 구역도 위에서 아래로 */
  html.sx-on .cta.sx-in {
    transition: clip-path 0.95s var(--sx-ease);
  }

  html.sx-on .cta.sx-sec:not(.sx-in) {
    clip-path: polygon(0 4.37vw, 100% 0, 100% 0, 0 4.37vw);
  }

  /* 구역 안 글은 띠가 펼쳐지는 동안 기다렸다가 위에서 살짝 내려오며 나타난다 */
  html.sx-on .sx-sec.sx-in > .wrap > *,
  html.sx-on #how.sx-in .how > *,
  html.sx-on .sx-game.sx-in {
    transition: opacity 0.6s ease 0.3s, transform 0.85s var(--sx-ease) 0.3s;
  }

  html.sx-on .sx-sec:not(.sx-in) > .wrap > :not(.how),
  html.sx-on #how:not(.sx-in) .how > *,
  html.sx-on .sx-game:not(.sx-in) {
    opacity: 0;
    transform: translateY(-18px);
  }

  /* 2. 자막판: 제목은 왼쪽에서 오른쪽으로 닦이고, 금색 이름표는 옆에서 미끄러져 들어온다.
        지원 게임은 롤이 왼쪽에서, 발로란트가 오른쪽에서(거울 배치와 같게) */
  html.sx-on .sx-h2.sx-in {
    clip-path: inset(-8px -8px -8px -8px);
    transition: clip-path 0.85s var(--sx-ease) 0.15s, transform 0.85s var(--sx-ease) 0.15s;
  }

  html.sx-on .sx-h2:not(.sx-in) {
    clip-path: inset(-8px 100% -8px -8px);
    transform: translateX(-26px);
  }

  html.sx-on .sx-tab.sx-in {
    transition: transform 0.75s var(--sx-ease), opacity 0.5s ease;
  }

  html.sx-on .game-lol .sx-tab:not(.sx-in),
  html.sx-on .plate:nth-child(1) .sx-tab:not(.sx-in) {
    opacity: 0;
    transform: translateX(-60px);
  }

  html.sx-on .game-val .sx-tab:not(.sx-in),
  html.sx-on .plate:nth-child(2) .sx-tab:not(.sx-in) {
    opacity: 0;
    transform: translateX(60px);
  }

  @media (min-width: 1001px) {
    html.sx-on #how.sx-in .how::before {
      transition: clip-path 0.95s var(--sx-ease) 0.1s;
    }

    html.sx-on #how.sx-sec:not(.sx-in) .how::before {
      clip-path: polygon(72px 0, 100% 0, 100% 0, 0 0);
    }
  }

  @keyframes sx-line {
    0% {
      background-position: -40% 0;
      opacity: 1;
    }

    98% {
      background-position: 140% 0;
      opacity: 1;
    }

    100% {
      background-position: 140% 0;
      opacity: 0;
    }
  }
}