/* =========================================================
   sections.css — 섹션 부품
   각 섹션은 독립 부품이다. 페이지는 부품을 나열하기만 한다.
   → 멀티페이지 ↔ 원페이지 전환이 "나열 순서 바꾸기"로 끝난다.
   (Docs/페이지구성안.md §2)
   ========================================================= */

/* =========================================================
   공통 — 헤더 / 언어 전환
   ========================================================= */
/* 피그마 Desktop-1에는 내비게이션이 없다(로고만). 멀티페이지라 메뉴가 필요한데,
   우측에 두면 히어로의 기울어진 폰 이미지와 겹쳐 글씨가 묻힌다(1차 렌더에서 확인).
   → 로고 옆 왼쪽에 모아 배치하고 우측 절반은 폰 이미지에 그대로 양보한다. */
.site-header {
  position: absolute; inset-block-start: 0; inset-inline: 0;
  z-index: 20;
  display: flex; align-items: center; justify-content: flex-start;
  gap: clamp(18px, 3.4vw, 48px);
  padding: clamp(16px, 2.4vw, 34px) var(--gutter);
  width: 100%; max-width: var(--page-max);
  margin-inline: auto;
}
.site-header__logo img { width: clamp(150px, 17vw, 253px); }

.site-nav { display: flex; align-items: center; gap: clamp(14px, 1.7vw, 26px); }
.site-nav a {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  color: rgba(255, 255, 255, 0.82);
  padding-block: 6px;
  border-bottom: 2px solid transparent;
  transition: color 0.18s, border-color 0.18s;
}
.site-nav a:hover,
.site-nav a[aria-current='page'] { color: #fff; border-bottom-color: var(--deco); }

.lang-switch { display: flex; align-items: center; gap: 2px; }
.lang-switch button {
  font-family: var(--font-body); font-weight: 700; font-size: 13px;
  letter-spacing: 0.06em;
  color: rgba(255, 255, 255, 0.65);
  padding: 5px 9px; border-radius: 999px;
  transition: color 0.18s, background 0.18s;
}
.lang-switch button[aria-pressed='true'] { color: var(--navy); background: var(--deco); }
.lang-switch button:hover { color: #fff; }
.lang-switch button[aria-pressed='true']:hover { color: var(--navy); }
.lang-switch span { color: rgba(255, 255, 255, 0.3); font-size: 12px; }

/* =========================================================
   섹션 1 — 히어로
   피그마: 1440×528, 배경 #003867 + 도트 패턴
   ========================================================= */
.hero {
  position: relative;
  background-color: var(--navy);
  background-image: url('../img/ui/bg-pattern.webp');
  background-size: cover;
  background-position: center;
  overflow: hidden;
  isolation: isolate;
}
/* 피그마 좌표: 헤드라인 y200, 캐릭터 y353~480, 히어로 끝 528
   → 콘텐츠 덩어리가 히어로 하단에 붙고 위쪽에 큰 여백이 생기는 배치다 */
.hero__inner {
  position: relative;
  min-height: clamp(440px, 36.7vw, 528px);
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 0.92fr);
  align-items: end;
  gap: 20px;
  padding-block: clamp(104px, 12vw, 152px) clamp(22px, 3.3vw, 48px);
}
.hero__copy { position: relative; z-index: 2; max-width: 640px; }

.hero__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(28px, 3.35vw, 43px);
  line-height: 1.32;
  color: var(--white);
  white-space: pre-line;      /* 데이터의 줄바꿈(\n)을 그대로 살린다 */
  text-wrap: balance;
}
.hero__characters {
  width: clamp(210px, 20.3vw, 292px);
  margin-block-start: clamp(20px, 2.6vw, 34px);
}

/* 우측 기울어진 폰 목업 뭉치 — 피그마에서는 히어로 우측 상단에 걸쳐 있다 */
/* 폰 이미지는 **화면 오른쪽 끝**에 붙는다.
   ⚠️ 이 요소의 기준은 부모 .hero__inner(=.wrap)인데, .wrap 은 최대 1440px 에서 멈추고
   가운데 정렬된다. 그래서 화면이 1440 을 넘어가는 순간부터 부모의 오른쪽 끝이 화면보다
   안쪽이 되고, 이미지가 부모에 붙어 있으니 오른쪽에 빈 자리가 생긴다
   (실측: 1600px → 80px, 1920px → 240px, 2560px → 560px 벌어짐 · 2026-07-29 Jason).
   부모가 화면보다 좁아진 만큼(= (page-max − 100vw) / 2) 오른쪽으로 물려 빼서 가장자리에 붙인다.
   1440 이하에서는 부모가 곧 화면이라 min() 으로 0 을 유지한다. */
.hero__phones {
  position: absolute;
  inset-block-start: 0;
  inset-inline-end: min(0px, calc((var(--page-max) - 100vw) / 2));
  width: clamp(360px, 45vw, 660px);
  z-index: 1;
  pointer-events: none;
}
.hero__phones img { width: 100%; }

/* =========================================================
   섹션 2 — 3색 가치 카드
   피그마: 480×340 ×3, 좌우 패딩 76, 상단 54
   ========================================================= */
.values { display: grid; grid-template-columns: repeat(3, 1fr); }
.values__card {
  min-height: clamp(250px, 23.6vw, 340px);
  /* 피그마의 좌우 여백은 76px이지만 그 값이면 제목이 두 줄로 깨진다(1차 렌더에서 확인).
     피그마 원안은 제목 텍스트 박스가 카드 경계를 넘어가 있어 한 줄로 보이는 것 —
     카드 안에 가두는 웹에서는 여백을 줄여야 같은 인상이 나온다. */
  padding: clamp(30px, 3.75vw, 54px) clamp(24px, 3.9vw, 56px);
  display: flex; flex-direction: column;
  color: var(--white);
}
.values__card[data-color='pink']   { background: var(--pink); }
.values__card[data-color='orange'] { background: var(--orange); }
.values__card[data-color='cyan']   { background: var(--cyan); }

.values__deco { width: 59px; height: 9px; margin-block-end: clamp(8px, 1vw, 13px); }
.values__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(20px, 2.43vw, 35px);
  line-height: 1.25;
  margin-block-end: clamp(10px, 1.3vw, 18px);
}
.values__desc {
  font-size: clamp(14px, 1.39vw, 20px);
  line-height: 1.45;
  color: #fff;
}

/* =========================================================
   섹션 3 — 컨셉 스크린샷 (게임 캐러셀)
   피그마: #1A1A1A, 제목 49px #727272, 밑줄 578×4 #EDEDED
   ========================================================= */
.concepts {
  background: var(--dark);
  padding-block: clamp(64px, 8.8vw, 127px) clamp(70px, 9vw, 130px);
  text-align: center;
  overflow: hidden;
}
.concepts__title {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 3.4vw, 49px);
  letter-spacing: 0.02em;
  color: var(--muted-title);
}
.concepts__rule {
  width: min(578px, 72%);
  height: 4px;
  background: var(--rule);
  border: 0;
  margin: clamp(16px, 2.2vw, 32px) auto 0;
}
.concepts__lead {
  margin: clamp(18px, 2.2vw, 30px) auto 0;
  max-width: 620px;
  font-size: clamp(13px, 1.1vw, 16px);
  line-height: 1.6;
  color: rgba(255, 255, 255, 0.6);   /* 0.42는 어두운 배경에서 거의 안 읽힘 — 대비 확보 */
}

/* 캐러셀 — 가운데 1개 강조, 좌우는 이전/다음 (클릭하면 회전) */
.carousel {
  position: relative;
  margin-block-start: clamp(40px, 5.5vw, 78px);
  display: flex; align-items: center; justify-content: center;
  gap: clamp(12px, 7.2vw, 104px);   /* 피그마 폰 간격 104px */
  min-height: clamp(360px, 48.7vw, 701px);
}
.carousel__slot { border: 0; padding: 0; background: none; }
.carousel__slot--side {
  width: clamp(140px, 22.6vw, 325px);
  opacity: 0.34;                     /* 피그마 원안은 0.10 — 아래 주석 참조 */
  transition: opacity 0.25s, transform 0.25s;
  cursor: pointer;
}
/* ⚠️ 피그마 Desktop-1은 좌우 폰을 opacity 0.10으로 두었다. 그림으로는 예쁘지만
   실제 웹에서는 "누를 수 있는 것"으로 보이지 않아 갤러리 기능을 못 한다.
   Jason 지시("밑에 게임들을 직접 눌러볼 수 있고")를 만족시키려고 0.34로 올렸다.
   → 판단 필요 사항으로 Docs/야간작업_검수요청.md에 기록. */
.carousel__slot--side:hover { opacity: 0.62; transform: translateY(-6px); }
.carousel__slot--main {
  width: clamp(200px, 27vw, 390px);
  cursor: pointer;
  transition: transform 0.25s;
}
.carousel__slot--main:hover { transform: translateY(-8px); }

.carousel__nav {
  position: absolute; inset-block-start: 50%;
  transform: translateY(-50%);
  width: clamp(44px, 4vw, 58px); aspect-ratio: 1;
  border-radius: 999px;
  background: rgba(255, 255, 255, 0.12);
  border: 1px solid rgba(255, 255, 255, 0.16);
  color: rgba(255, 255, 255, 0.9);
  display: grid; place-items: center;
  font-size: 26px; line-height: 1;
  transition: background 0.2s, color 0.2s, transform 0.2s;
  z-index: 3;
}
.carousel__nav:hover {
  background: rgba(255, 255, 255, 0.26); color: #fff;
  transform: translateY(-50%) scale(1.06);
}
.carousel__nav--prev { inset-inline-start: clamp(4px, 3vw, 46px); }
.carousel__nav--next { inset-inline-end: clamp(4px, 3vw, 46px); }

.carousel__caption {
  margin-block-start: clamp(22px, 2.6vw, 36px);
  min-height: 74px;
}
.carousel__brand {
  font-family: var(--font-body); font-weight: 700;
  font-size: clamp(11px, 0.9vw, 13px);
  letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.58);
}
.carousel__name {
  font-family: var(--font-display);
  font-size: clamp(19px, 1.9vw, 27px);
  color: #fff; margin-block-start: 6px;
}
.carousel__genre {
  display: inline-block; margin-block-start: 10px;
  font-size: 12px; letter-spacing: 0.08em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
  border: 1px solid rgba(255, 255, 255, 0.2);
  border-radius: 999px; padding: 4px 12px;
}
.concepts__more {
  display: inline-block;
  margin-block-start: clamp(30px, 3.4vw, 48px);
  font-family: var(--font-body); font-weight: 600;
  font-size: clamp(13px, 1.05vw, 15px);
  letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--deco);
  border-bottom: 2px solid rgba(255, 232, 187, 0.35);
  padding-block-end: 5px;
  transition: border-color 0.2s;
}
.concepts__more:hover { border-bottom-color: var(--deco); }

/* =========================================================
   폰 프레임 — 비율은 피그마 목업에서 실측
   외곽 968×1830 / 화면 848×1447 (좌우 베젤 6.2%, 상하 10.5%)
   ⚙️ 화면 영역이 '틀'로 분리돼 있어 나중에 이미지→GIF→실제 게임(iframe)으로
      갈아끼울 때 레이아웃을 다시 짤 필요가 없다. (Docs/페이지구성안.md §3)
   ========================================================= */
.phone {
  position: relative;
  width: 100%;
  aspect-ratio: 968 / 1830;
  background: #fff;
  border-radius: 8.4%/4.4%;
  padding: 10.55% 6.2%;
  box-shadow: 0 18px 44px rgba(0, 0, 0, 0.42), 0 2px 5px rgba(0, 0, 0, 0.3);
}
.phone__screen {
  position: relative;
  width: 100%; height: 100%;
  border-radius: 2.2%/1.2%;
  overflow: hidden;
  background: #0d0d0d;
}
.phone__screen img,
.phone__screen iframe {
  width: 100%; height: 100%;
  object-fit: cover;
  border: 0;
  display: block;
}
/* 마우스를 올리면 GIF가 있는 경우에만 교체 재생 */
.phone__screen .is-motion { position: absolute; inset: 0; opacity: 0; transition: opacity 0.2s; }
.carousel__slot:hover .phone__screen .is-motion,
.game-card:hover .phone__screen .is-motion { opacity: 1; }

/* 스피커·홈 인디케이터 — 목업의 디테일을 CSS로 재현 */
.phone::before {
  content: ''; position: absolute;
  inset-block-start: 4.6%; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 22%; height: 0.9%;
  background: #dcdcdc; border-radius: 999px;
}
.phone::after {
  content: ''; position: absolute;
  inset-block-end: 3.4%; inset-inline-start: 50%;
  transform: translateX(-50%);
  width: 28%; height: 0.75%;
  background: #e2e2e2; border-radius: 999px;
}

/* 플레이 가능한 카드에만 표시되는 재생 배지 */
.phone__play {
  position: absolute; inset-block-end: 12%; inset-inline-start: 50%;
  transform: translateX(-50%);
  display: none;
  align-items: center; gap: 7px;
  background: rgba(0, 0, 0, 0.62); color: #fff;
  font-size: 12px; font-weight: 600; letter-spacing: 0.08em;
  padding: 7px 14px; border-radius: 999px;
  backdrop-filter: blur(4px);
}
.phone[data-playable='true'] .phone__play { display: inline-flex; }

/* =========================================================
   섹션 4 — 푸터 (연락)
   피그마: 배경 패턴 재사용, 이메일 Cal Sans 58px, 카피 Cairo 25px #0D709E
   ========================================================= */
.site-footer {
  background-color: var(--navy);
  background-image: url('../img/ui/bg-pattern.webp');
  background-size: cover;
  background-position: center bottom;
  padding-block: clamp(60px, 10vw, 144px);   /* 피그마 푸터 높이 422px에 맞춤 */
  text-align: center;
}
.site-footer__contact {
  display: inline-flex; align-items: center; justify-content: center;
  gap: clamp(14px, 1.9vw, 27px);
  flex-wrap: wrap;
}
.site-footer__icon { width: clamp(64px, 7.9vw, 114px); }
.site-footer__email {
  font-family: var(--font-display);
  font-weight: 400;
  font-size: clamp(26px, 4vw, 58px);
  color: var(--white);
  transition: opacity 0.2s;
}
.site-footer__email:hover { opacity: 0.82; }
.site-footer__copy {
  font-family: var(--font-mono-ish);
  font-size: clamp(14px, 1.74vw, 25px);
  color: var(--copyright);
  margin-block-start: clamp(18px, 2.4vw, 34px);
}

/* =========================================================
   라이트박스 — 카드를 눌렀을 때 크게 보기
   playable이 채워지면 같은 자리에 게임이 실행된다 (구조는 이미 동일)
   ========================================================= */
.lightbox {
  position: fixed; inset: 0; z-index: 90;
  display: none;
  align-items: center; justify-content: center;
  padding: 24px;
  background: rgba(8, 10, 14, 0.86);
  backdrop-filter: blur(6px);
}
.lightbox[open], .lightbox.is-open { display: flex; }
.lightbox__stage { width: min(360px, 78vw); }
.lightbox__close {
  position: absolute; inset-block-start: clamp(14px, 3vw, 28px);
  inset-inline-end: clamp(14px, 3vw, 28px);
  width: 46px; aspect-ratio: 1; border-radius: 999px;
  background: rgba(255, 255, 255, 0.12); color: #fff; font-size: 22px;
}
.lightbox__close:hover { background: rgba(255, 255, 255, 0.24); }
.lightbox__meta { text-align: center; margin-block-start: 18px; color: #fff; }
.lightbox__meta .brand {
  font-size: 12px; letter-spacing: 0.16em; text-transform: uppercase;
  color: rgba(255, 255, 255, 0.5);
}
.lightbox__meta .name { font-family: var(--font-display); font-size: 22px; margin-block-start: 4px; }
.lightbox__meta .desc {
  font-size: 14px; line-height: 1.6; margin-block-start: 10px;
  color: rgba(255, 255, 255, 0.72); max-width: 340px; margin-inline: auto;
}

/* ---------------------------------------------------------
   게임 실행 모달 (.lightbox.is-play)
   컨셉 확대 보기와 달리 실제로 게임이 도는 상태.
   · 폰 목업을 씌우지 않는다 — 게임 화면이 이미 세로 광고 규격이라 프레임이 두 겹이 되고
     테두리·여백만큼 게임이 작아진다 (모바일에서 특히 치명적)
   · 창을 게임 아트보드 비율(--game-ratio)로 잡아 게임이 여백 없이 꽉 찬다
   · 세로 여유에서 가로를 계산한다 — 화면이 짧아도 게임이 잘리거나 눌리지 않는다
   --------------------------------------------------------- */
.lightbox.is-play { padding: 0; }

/* 마크업상 이름 없는 래퍼 (close 버튼 옆의 <div>) */
.lightbox.is-play > div {
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  width: 100%;
  height: 100vh;
  height: 100dvh;               /* 모바일 주소창이 접혔다 펴져도 게임이 잘리지 않게 */
  padding: 62px 16px 16px;      /* 위쪽은 X 버튼 자리 — 게임 위에 버튼이 겹치지 않는다 */
}

.lightbox.is-play .lightbox__stage {
  position: relative;
  /* 세로 여유(화면 - 버튼 자리 - 제목줄)에서 가로를 계산하고, 화면 폭과 최대폭으로 자른다.
     셋 중 가장 작은 값이 이기므로 어느 쪽으로도 넘치지 않는다 */
  width: min(100%, 440px, calc((100vh - 150px) * (var(--game-ratio, 1100 / 1850))));
  width: min(100%, 440px, calc((100dvh - 150px) * (var(--game-ratio, 1100 / 1850))));
  aspect-ratio: var(--game-ratio, 1100 / 1850);
  border-radius: 16px;
  overflow: hidden;
  background: #0d0d0d;
  box-shadow: 0 20px 50px rgba(0, 0, 0, 0.55);
}
.lightbox.is-play .lightbox__stage iframe {
  width: 100%; height: 100%;
  border: 0; display: block;
  opacity: 0; transition: opacity 0.25s;
}
.lightbox.is-play .lightbox__stage.is-loaded iframe { opacity: 1; }

/* 게임 한 편이 1~2MB다 — 뜨는 동안 검은 화면 대신 도는 표시를 보여준다 */
.lightbox.is-play .lightbox__stage::before {
  content: '';
  position: absolute; inset-block-start: 50%; inset-inline-start: 50%;
  width: 34px; height: 34px; margin: -17px 0 0 -17px;
  border: 3px solid rgba(255, 255, 255, 0.22);
  border-block-start-color: #fff;
  border-radius: 50%;
  animation: dxp-spin 0.8s linear infinite;
}
.lightbox.is-play .lightbox__stage.is-loaded::before { display: none; }
@keyframes dxp-spin { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) {
  .lightbox.is-play .lightbox__stage::before { animation: none; }
}

/* 게임이 도는 중에는 제목을 한 줄로 줄여 세로를 게임에 준다 */
.lightbox.is-play .lightbox__meta { margin-block-start: 12px; }
.lightbox.is-play .lightbox__meta .name { font-size: 17px; }

/* X 버튼 — 게임 바깥 위쪽에 둔다. 게임 위에 겹치면 게임 UI(점수·타이머)를 가린다 */
.lightbox.is-play .lightbox__close {
  background: rgba(255, 255, 255, 0.16);
  border: 1px solid rgba(255, 255, 255, 0.22);
}
@media (max-width: 700px) {
  .lightbox.is-play .lightbox__close {
    inset-block-start: 12px; inset-inline-end: 12px;
    width: 42px;
  }
  .lightbox.is-play > div { padding-block-start: 58px; }
}

/* =========================================================
   반응형
   ========================================================= */
@media (max-width: 900px) {
  /* 모바일에서는 메뉴가 숨으므로 로고와 언어 전환을 양끝으로 벌린다
     (좌측에 모으면 로고 위에 겹쳐 보인다 — 390px 렌더에서 확인) */
  .site-header { justify-content: space-between; }

  .hero__inner {
    grid-template-columns: 1fr;
    padding-block: clamp(120px, 26vw, 150px) 0;
    min-height: 0;
  }
  /* 좁은 화면에서도 폰 이미지는 **오른쪽 화면 끝에 붙는다**.
     예전에는 가운데 정렬이라 부모의 좌우 여백(--gutter) 안에 갇혀 오른쪽에 20px 틈이 생겼다
     — 데스크톱은 오른쪽에 붙는데 모바일만 떠 있어 어긋나 보였다 (2026-07-29 Jason).
     오른쪽으로 여백만큼 물려 빼서 가장자리까지 닿게 한다. */
  .hero__phones {
    position: relative;
    width: min(520px, calc(100% + var(--gutter)));
    margin-block: clamp(24px, 6vw, 40px) 0;
    margin-inline: auto calc(var(--gutter) * -1);
    inset: auto;
  }
  .site-nav { display: none; }        /* 모바일에서는 하단 메뉴로 대체 */
  .carousel__slot--side { display: none; }
  .carousel__slot--main { width: min(300px, 68vw); }
  .carousel { gap: 0; min-height: 0; }
}

@media (min-width: 901px) and (max-width: 1180px) {
  .values__card { padding-inline: clamp(22px, 3.6vw, 44px); }
}

/* 모바일 전용 하단 내비 */
.mobile-nav { display: none; }
@media (max-width: 900px) {
  .mobile-nav {
    display: flex; justify-content: center; gap: 20px; flex-wrap: wrap;
    background: var(--dark);
    padding: 18px var(--gutter);
    border-block-start: 1px solid rgba(255, 255, 255, 0.08);
  }
  .mobile-nav a {
    font-size: 13px; font-weight: 600; letter-spacing: 0.06em;
    text-transform: uppercase; color: rgba(255, 255, 255, 0.66);
  }
  .mobile-nav a[aria-current='page'] { color: var(--deco); }
}

/* 라이트박스에서는 게임이 실제로 실행 중이므로 PLAY 배지를 숨긴다
   (배지가 게임 화면을 가리는 것을 실행 캡처에서 확인) */
.lightbox .phone[data-playable='true'] .phone__play { display: none; }

/* 3색 카드: 태블릿에서는 3열을 유지하고, 좁은 화면에서만 1열로 내린다
   (834px 렌더에서 1열이 세로로 늘어지는 것을 확인) */
@media (max-width: 640px) {
  .values { grid-template-columns: 1fr; }
}
@media (min-width: 641px) and (max-width: 900px) {
  .values__card { padding: clamp(22px, 3vw, 34px) clamp(16px, 2.4vw, 26px); }
  .values__title { font-size: clamp(17px, 2.3vw, 22px); }
  .values__desc { font-size: clamp(12px, 1.6vw, 14px); }
}