/* ============================================================================
   제네시스 GV90 · COLORS OF GV90 — iPad Air (M2) 11" 공통 스타일
   ----------------------------------------------------------------------------
   기준 기기 : iPad Air (M2) 11인치 가로 거치
   디자인 캔버스 : 2360 × 1640 (물리 픽셀, 비율 1.44:1)

   ▸ .stage 안의 모든 수치는 2360×1640 아트보드의 px 과 1:1 입니다.
   ▸ 실제 화면이 몇 px 이든 gv90.js 가 배율을 맞춰 꽉 채웁니다.
   ▸ 페이지마다 다른 값(카드 크기 · 간격 · 위치)은 각 index.html 의
     :root 변수로 넘깁니다. 이 파일은 손대지 않아도 됩니다.
   ============================================================================ */

@font-face {
  font-family: 'GenesisSansProHead';
  src: url('font/GenesisSansProHead-Lt.woff2') format('woff2');
  font-weight: 100 900;
  font-style: normal;
  font-display: swap;
}

:root {
  --stage-w: 2360;
  --stage-h: 1640;

  /* 기본값 — index.html 에서 덮어씁니다 */
  --title-top: 250px;
  --title-size: 70px;
  --subtitle-top: 340px;
  --subtitle-size: 36px;
  --grid-top: 560px;
  --cols: 4;
  --card-w: 520px;
  --card-h: 292px;
  --col-gap: 40px;
  --row-gap: 36px;
  --label-size: 31px;
  --section-gap: 60px;        /* b2: 그룹 사이 간격 */
  --caption-size: 26px;       /* b2: 그룹 소제목 */
  --scrim-strength: 0.45;     /* 썸네일 위 검정막 (0 = 없음 ~ 1 = 진함) */
  --accent: #F25C05;
}

*, *::before, *::after {
  box-sizing: border-box;
  -webkit-tap-highlight-color: transparent;
  -webkit-touch-callout: none;
  user-select: none;
  -webkit-user-select: none;
  font-family: 'GenesisSansProHead', -apple-system, "Noto Sans KR", sans-serif;
  font-synthesis: none;
  -webkit-font-smoothing: antialiased;
}

html, body {
  margin: 0; padding: 0;
  width: 100%; height: 100%;
  background: #000;
  color: #fff;
  overflow: hidden;
  cursor: pointer;
  /* iOS 고무줄 스크롤 · 확대 차단 — 스크롤이 전혀 없는 고정 화면 */
  overscroll-behavior: none;
  touch-action: none;
  position: fixed;
  inset: 0;
}

#viewport {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #000;
  overflow: hidden;
  touch-action: none;
}

.stage {
  position: relative;
  width: calc(var(--stage-w) * 1px);
  height: calc(var(--stage-h) * 1px);
  flex: 0 0 auto;
  background: #000;
  transform-origin: center center;
}

/* --- 타이틀 ---------------------------------------------------------------- */
.title {
  position: absolute; top: var(--title-top); left: 0; width: 100%;
  text-align: center;
  font-size: var(--title-size); font-weight: 300; letter-spacing: 0;
  color: #fff; line-height: 1.33;
}
.subtitle {
  position: absolute; top: var(--subtitle-top); left: 0; width: 100%;
  text-align: center;
  font-size: var(--subtitle-size); font-weight: 300; letter-spacing: 0;
  color: #d6d6d6; line-height: 1.444;
}

/* --- 섹션 · 그리드 ---------------------------------------------------------
   .sections 는 --grid-top 에서 시작. 섹션이 둘이면 --section-gap 만큼 띄움.
   그리드는 flex-wrap 이라 마지막 줄 카드가 모자라도 가운데 정렬됩니다.     */
.sections {
  position: absolute; top: var(--grid-top); left: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center;
  gap: var(--section-gap);
}
.section { display: flex; flex-direction: column; align-items: center; }
.caption {
  width: calc(var(--cols) * var(--card-w) + (var(--cols) - 1) * var(--col-gap));
  margin-bottom: 28px;
  padding-top: 26px;
  border-top: 1px solid rgba(255,255,255,.22);
  text-align: left;
  font-size: var(--caption-size); font-weight: 300; letter-spacing: 2px;
  color: #9a9a9a;
}
.caption:empty { display: none; }
.grid {
  width: calc(var(--cols) * var(--card-w) + (var(--cols) - 1) * var(--col-gap));
  display: flex; flex-wrap: wrap; justify-content: center;
  column-gap: var(--col-gap); row-gap: var(--row-gap);
}

.cell { width: var(--card-w); }
.card {
  position: relative;
  width: var(--card-w); height: var(--card-h);
  border-radius: 14px; overflow: hidden;
  background: #101012;
  transform: scale(1);
  transition: transform .22s cubic-bezier(.25,.46,.45,.94), box-shadow .25s ease;
}
.card img {
  width: 100%; height: 100%; object-fit: cover; object-position: center;
  display: block;
}

/* 스크림 = 이미지와 글자 사이 반투명 검정막. 진하기는 --scrim-strength 하나로 */
.scrim {
  position: absolute; inset: 0; pointer-events: none;
  opacity: var(--scrim-strength);
  background:
    radial-gradient(ellipse 74% 58% at 50% 50%, rgba(0,0,0,.58) 0%, rgba(0,0,0,.18) 100%),
    linear-gradient(180deg, rgba(0,0,0,.22) 0%, rgba(0,0,0,.10) 45%, rgba(0,0,0,.30) 100%);
  transition: opacity .25s ease;
}

.label {
  position: absolute; inset: 0;
  display: flex; align-items: center; justify-content: center;
  padding: 0 24px; text-align: center;
  font-size: var(--label-size); font-weight: 300; letter-spacing: 0;
  color: #fff; line-height: 1.25; pointer-events: none;
  text-shadow: 0 1px 2px rgba(0,0,0,.40), 0 2px 6px rgba(0,0,0,.32), 0 6px 22px rgba(0,0,0,.38);
}

.cell:active .card, .cell.pop .card { animation: pop .3s forwards; }
@keyframes pop { 0%{transform:scale(1)} 50%{transform:scale(1.045)} 100%{transform:scale(1)} }
.cell.on .scrim { opacity: calc(var(--scrim-strength) * 0.55); }
.cell.on .card { box-shadow: 0 0 34px rgba(255,255,255,.18); }

/* --- 전체화면 플레이어 ---------------------------------------------------- */
#player-overlay {
  position: fixed; inset: 0; background: #000; z-index: 9999;
  display: none; align-items: center; justify-content: center;
  opacity: 0; transition: opacity .45s ease;
}
#player-overlay.show { opacity: 1; }
#player { width: 100%; height: 100%; object-fit: contain; background: #000; display: block; }

/* 오른쪽 위 투명 영역을 터치하면 X 버튼이 나타남 */
#close-zone {
  position: fixed; top: 0; right: 0;
  width: 26vw; height: 20vh; min-width: 160px; min-height: 110px;
  z-index: 10000; background: transparent;
}
.close-btn {
  position: fixed; top: 2.6%; right: 2.2%;
  width: 4.6vh; height: 4.6vh; min-width: 44px; min-height: 44px;
  z-index: 10002; display: flex; align-items: center; justify-content: center;
  border-radius: 50%;
  background: rgba(120,78,50,.55); border: 1px solid rgba(255,255,255,.28);
  backdrop-filter: blur(6px); -webkit-backdrop-filter: blur(6px);
  opacity: 0; pointer-events: none; transform: scale(.88);
  transition: opacity .22s ease, transform .22s ease, background .18s ease;
}
.close-btn.show { opacity: 1; pointer-events: auto; transform: scale(1); }
.close-btn.show:active { transform: scale(.9); background: var(--accent); }
.close-btn svg { width: 46%; height: 46%; fill: none; stroke: #fff; stroke-width: 2.4; stroke-linecap: round; }

#notice {
  position: fixed; left: 50%; top: 50%; transform: translate(-50%,-50%);
  z-index: 10001; display: none;
  padding: 24px 34px; border-radius: 12px;
  background: rgba(30,30,30,.92); border: 1px solid #3a3a3a;
  color: #ddd; font-size: 20px; text-align: center; line-height: 1.6;
}
#boot { position: fixed; right: 18px; bottom: 14px; font-size: 13px; color: #444; z-index: 50; }