/* =========================================================
   QUANTUM — CLIENT  ·  T3_Lobby 듀얼 스크린 시뮬레이션
   메인 스크린 1920×1080 (가로) + 터치 패널 1080×1920 (세로)
   1:1 픽셀, 데스크톱 뷰포트에 transform: scale 로 맞춤
   ========================================================= */

/* === 디자인 토큰 ============================================ */
:root {
  /* 배경 / 표면 */
  --c-void: #04060a;
  --c-bg:   #0a0d13;
  --c-bg-2: #10151e;
  --c-card:    #161c26;
  --c-card-2:  #1d2530;
  --c-card-3:  #242d3a;
  --c-line:    #2a3441;
  --c-line-2:  #3a4757;

  /* 텍스트 */
  --c-fg:   #e8ecf3;
  --c-fg-2: #b8c1d0;
  --c-fg-3: #7a8497;
  --c-fg-4: #525c6e;
  --c-fg-5: #323a48;

  /* Q 브랜드 / 시멘틱 */
  --c-q:        #CEFF00;  /* 라임 — 핵심 액션 (Quantum 시그니처) */
  --c-q-2:      #a6d400;
  --c-q-soft:   rgba(206,255,0,.14);
  --c-q-line:   rgba(206,255,0,.45);

  --c-cyan:     #36C4FF;  /* 정보 / 보조 액션 (Quantum 시그니처) */
  --c-cyan-soft: rgba(54,196,255,.14);

  --c-amber:    #ffb547;  /* 경고 / 주목 */
  --c-amber-soft: rgba(255,181,71,.14);

  --c-red:      #ff5b6e;
  --c-red-soft: rgba(255,91,110,.14);

  --c-purple:   #b79bff;  /* 트레이닝 계열 */
  --c-purple-soft: rgba(183,155,255,.14);

  --c-jr:       #ffd96a;  /* 주니어 톤 (밝게) */
  --c-jr-soft:  rgba(255,217,106,.16);

  /* 간격 */
  --s1: 4px;  --s2: 8px;  --s3: 12px; --s4: 16px;
  --s5: 24px; --s6: 32px; --s7: 48px; --s8: 64px;
  --s9: 96px; --s10:128px;

  /* 모서리 */
  --r-s: 6px; --r-m: 10px; --r-l: 14px; --r-xl: 20px; --r-2xl: 28px;

  /* 그림자 */
  --sh-1: 0 2px 12px rgba(0,0,0,.35);
  --sh-2: 0 12px 40px rgba(0,0,0,.5);
  --sh-q: 0 0 36px rgba(206,255,0,.22);

  /* 타이포 */
  --ff-ko: 'Pretendard Variable','Pretendard',system-ui,-apple-system,'Segoe UI','Apple SD Gothic Neo',sans-serif;
  --ff-en: 'Inter','Pretendard Variable',system-ui,sans-serif;
  --ff-mono: 'JetBrains Mono','D2Coding','SF Mono',monospace;
}

/* === 베이스 ============================================== */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html, body { width: 100%; height: 100%; }
body {
  background: var(--c-void);
  color: var(--c-fg);
  font-family: var(--ff-ko);
  font-size: 18px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  overflow: hidden;
  user-select: none;
}
button { font: inherit; color: inherit; background: none; border: 0; cursor: pointer; }
input  { font: inherit; color: inherit; background: none; border: 0; outline: 0; }

/* === 뷰포트 / 캔버스 (3080×1920 → 화면 중앙에 transform 스케일) ===
   grid + place-items 는 cell 크기가 컨테이너보다 크면 좌상단 정렬로 폴백되어
   캔버스가 오른쪽으로 밀려나는 문제가 있어 absolute + translate 방식 사용.
*/
.viewport {
  position: fixed; inset: 0;
  background:
    radial-gradient(900px 600px at 18% 22%, rgba(54,196,255,.045), transparent 55%),
    radial-gradient(900px 600px at 82% 78%, rgba(206,255,0,.045), transparent 55%),
    var(--c-void);
  overflow: hidden;
}
.canvas {
  position: absolute;
  top: 50%; left: 50%;
  width: 3080px; height: 1920px;
  display: grid;
  grid-template-columns: 1920px 1080px;
  grid-template-rows: 1920px;
  align-items: center;
  column-gap: 80px;
  transform-origin: center center;
  /* JS fitViewport() 가 transform: translate(-50%,-50%) scale(s) 적용 */
  transform: translate(-50%, -50%) scale(1);
}

/* === 디바이스 라벨 ======================================== */
.dev {
  position: relative;
  border-radius: var(--r-2xl);
  overflow: hidden;
  background: var(--c-bg);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--c-line);
}
.dev::before {
  content: attr(data-label);
  position: absolute;
  top: -44px; left: 4px;
  color: var(--c-fg-4);
  font-family: var(--ff-en);
  font-size: 16px;
  letter-spacing: .22em;
  font-weight: 500;
  pointer-events: none;
}
.dev::after {
  content: attr(data-spec);
  position: absolute;
  top: -44px; right: 4px;
  color: var(--c-fg-5);
  font-family: var(--ff-en);
  font-size: 14px;
  letter-spacing: .18em;
  pointer-events: none;
}

/* === 메인 스크린 (1920×1080) — 세로 가운데 정렬 ============== */
.main {
  width: 1920px; height: 1080px;
  align-self: center;
  display: flex; flex-direction: column;
}

/* === 터치 패널 (1080×1920) — 세로 풀 높이 ==================== */
.touch {
  width: 1080px; height: 1920px;
  display: flex; flex-direction: column;
}

/* === 씬 호스트 / 씬 컨테이너 =================================== */
.scene-host { flex: 1; position: relative; min-height: 0; }
.scene {
  position: absolute;
  inset: 0;
  display: none;
  flex-direction: column;
}
.scene.is-on { display: flex; }

/* === Placeholder (개발 중 표시) =============================== */
.placeholder {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: var(--c-fg-5);
  font-family: var(--ff-en);
  font-size: 28px;
  letter-spacing: .2em;
  text-transform: uppercase;
  background:
    repeating-linear-gradient(45deg,
      transparent 0, transparent 14px,
      rgba(255,255,255,.012) 14px, rgba(255,255,255,.012) 28px);
}

/* === 공통 토픽 바 / 풋 바 패턴 ============================== */

/* 메인 스크린 상단 — 매장 톤 (시계, 매장명, 시그널) */
.m-top {
  height: 64px;
  padding: 0 var(--s6);
  display: flex; align-items: center; gap: var(--s5);
  color: var(--c-fg-3);
  font-family: var(--ff-en);
  font-size: 14px;
  letter-spacing: .15em;
  border-bottom: 1px solid var(--c-line);
  background: linear-gradient(180deg, rgba(255,255,255,.02), transparent);
}
/* 상단 공통 — 우측 액션 클러스터 (전원 / 관리자 / 시계) */
.top-spacer { flex: 1; }
.top-actions { display: flex; align-items: center; gap: var(--s3); }
.top-icon {
  display: grid; place-items: center;
  color: var(--c-fg-3);
  border-radius: var(--r-m);
  transition: background .15s, color .15s, transform .12s;
}
.top-icon svg { display: block; }
.top-icon:hover { color: var(--c-fg); background: var(--c-card); }
.top-icon:active { transform: translateY(1px); }
.top-icon--power:hover { color: var(--c-red); background: var(--c-red-soft); }

/* 터치 패널 상단 — 뒤로 + 우측 액션 클러스터 */
.t-top {
  height: 88px;
  padding: 0 var(--s5);
  display: flex;
  align-items: center;
  gap: var(--s4);
  border-bottom: 1px solid var(--c-line);
  background: var(--c-bg);
}
.t-top .t-back {
  width: 56px; height: 56px;
  display: grid; place-items: center;
  border-radius: var(--r-m);
  background: var(--c-card);
  color: var(--c-fg-2);
  font-size: 24px;
  transition: background .15s;
}
.t-top .t-back:hover { background: var(--c-card-2); color: var(--c-fg); }
.t-top .t-back.is-hidden { visibility: hidden; }

/* 상단 아이콘 / 시계 — 표면별 크기 */
.m-top .top-icon { width: 40px; height: 40px; }
.m-top .top-icon svg { width: 22px; height: 22px; }
.m-top .clock { margin-left: var(--s2); font-size: 20px; color: var(--c-fg-2); }
.t-top .top-icon { width: 56px; height: 56px; }
.t-top .top-icon svg { width: 30px; height: 30px; }
.t-top .clock { margin-left: var(--s2); font-size: 28px; color: var(--c-fg-2); }

/* 터치 패널 하단 — primary CTA */
.t-foot {
  padding: var(--s5);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  display: flex; gap: var(--s3);
}
.t-foot .btn { flex: 1; }

/* === 버튼 ============================================ */
.btn {
  height: 72px;
  padding: 0 var(--s6);
  display: inline-flex; align-items: center; justify-content: center; gap: var(--s2);
  border-radius: var(--r-m);
  font-weight: 600;
  font-size: 22px;
  letter-spacing: -.01em;
  transition: transform .12s, background .15s, color .15s, box-shadow .15s;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }
.btn--ghost  { background: var(--c-card); color: var(--c-fg-2); box-shadow: inset 0 0 0 1px var(--c-line); }
.btn--ghost:hover { background: var(--c-card-2); color: var(--c-fg); }
.btn--q      { background: var(--c-q); color: #0a1400; box-shadow: var(--sh-q); }
.btn--q:hover { background: var(--c-q-2); }
.btn--cyan   { background: var(--c-cyan); color: #001620; }
.btn--danger { background: var(--c-red); color: #2a0006; box-shadow: 0 0 28px rgba(255,91,110,.3); }
.btn--danger:hover { background: #ff7585; }
.btn--ghost.is-disabled,
.btn--q.is-disabled { opacity: .35; pointer-events: none; }

/* === Kicker / Label / Divider ================================ */
.kicker {
  font-family: var(--ff-en);
  font-size: 13px;
  letter-spacing: .25em;
  color: var(--c-fg-3);
  text-transform: uppercase;
}
.kicker b { color: var(--c-q); font-weight: 700; }

.h-rule {
  height: 1px;
  background: var(--c-line);
  border: 0;
}

/* === 시계 (메인 top) ========================================= */
.clock { font-family: var(--ff-en); letter-spacing: .08em; font-variant-numeric: tabular-nums; }

/* =========================================================
   SCENE: TITLE
   ========================================================= */

/* --- 메인 ------------------------------------------------- */
.m-title {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  padding: var(--s8) var(--s9);
  background:
    radial-gradient(1200px 700px at 50% 28%, rgba(206,255,0,.06), transparent 60%),
    radial-gradient(900px 600px at 80% 80%, rgba(54,196,255,.04), transparent 60%);
}
.m-title-stack {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s4);
  text-align: center;
}
.m-title-stack .m-title-word { align-items: center; }
.m-title-kicker {
  font-family: var(--ff-en);
  font-size: 20px;
  letter-spacing: .35em;
  color: var(--c-fg-3);
  font-weight: 500;
}
.m-title-word {
  display: flex; flex-direction: column;
  font-family: var(--ff-en);
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .88;
  text-shadow: 0 0 80px rgba(206,255,0,.18);
}
.m-title-q { font-size: 196px; color: var(--c-fg); }
.m-title-a { font-size: 196px; color: var(--c-q); }
.m-title-a i { font-style: normal; color: var(--c-q); }
.m-title-sub {
  font-size: 32px;
  color: var(--c-fg-2);
  letter-spacing: -.02em;
  font-weight: 500;
  margin-top: var(--s2);
}
.m-title-foot {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s4);
  padding-top: var(--s5);
  border-top: 1px solid var(--c-line);
}
.m-title-foot-cell {
  display: flex; flex-direction: column; gap: var(--s2);
}
.m-title-foot-cell b {
  font-size: 22px;
  color: var(--c-fg);
  font-weight: 600;
  display: inline-flex; align-items: center; gap: var(--s2);
}

/* --- 터치 ------------------------------------------------- */
.t-title {
  position: absolute; inset: 0;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: var(--s5);
  background:
    radial-gradient(800px 600px at 50% 60%, rgba(206,255,0,.07), transparent 60%);
  color: var(--c-fg);
  cursor: pointer;
}
.t-title:hover .t-title-ico { transform: translateX(8px); }
.t-title-ico {
  width: 200px; height: 200px;
  color: var(--c-q);
  transition: transform .3s;
}
.t-title-ico svg { width: 100%; height: 100%; }
.t-title-text {
  font-size: 64px;
  font-weight: 700;
  letter-spacing: -.02em;
}
.t-title-sub {
  font-family: var(--ff-en);
  font-size: 22px;
  letter-spacing: .35em;
  color: var(--c-fg-3);
  font-weight: 500;
}

/* =========================================================
   MODE — 벤토 로비 (Figma 1719 스크린 4열 / 1750 콘솔 2열)
   카드 탭 = 모드 진입. 컬럼 내 flex-grow(style="flex:h")로 높이 비중 재현.
   ========================================================= */
.mb-host { position: absolute; inset: 0; }
.mb-grid {
  height: 100%;
  display: flex;
  gap: 20px;
  padding: 48px;
  background: var(--c-void);
}
.mb-col { flex: 1; display: flex; flex-direction: column; gap: 20px; min-height: 0; }
.mb-card {
  position: relative;
  overflow: hidden;
  min-height: 0;
  padding: 30px;
  border-radius: var(--r-l);
  /* 참조이미지2 톤 — 비히어로 카드는 파란끼 없는 중성 다크(그린 뉴트럴) */
  background: #1b211e;
  box-shadow: inset 0 0 0 1px rgba(210,235,190,.07);
  text-align: left;
  display: flex; flex-direction: column;
  transition: background .15s, box-shadow .15s, transform .12s;
}
.mb-card:hover { background: #232a26; box-shadow: inset 0 0 0 1px rgba(210,235,190,.14); }
.mb-card:active { transform: scale(.995); }
.mb-head { position: relative; z-index: 1; }
.mb-title { font-family: var(--ff-en); font-weight: 800; font-size: 30px; letter-spacing: -.01em; color: var(--c-fg); }
.mb-group { font-family: var(--ff-en); font-weight: 600; font-size: 19px; letter-spacing: .12em; color: var(--c-fg-4); margin-top: 6px; }
.mb-body {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 8px; text-align: center;
}
.mb-pre  { font-family: var(--ff-en); font-size: 18px; letter-spacing: .02em; color: var(--c-fg-3); }
.mb-sub  { font-size: 18px; color: var(--c-fg-3); }
.mb-big  { font-family: var(--ff-en); font-weight: 800; font-size: 68px; line-height: 1; letter-spacing: -.02em; color: var(--c-fg); }
.mb-big.is-accent { color: var(--c-q); }
.mb-bigtext { font-family: var(--ff-en); font-weight: 800; font-size: 44px; letter-spacing: -.01em; color: var(--c-fg-3); }
.mb-delta { font-family: var(--ff-en); font-size: 18px; font-weight: 700; color: var(--c-q); }
.mb-note  { font-size: 18px; color: var(--c-q); }
.mb-desc  { font-size: 18px; color: var(--c-fg-3); line-height: 1.5; max-width: 340px; }
.mb-gfx {
  position: absolute; left: 0; right: 0; bottom: 0;
  width: 100%; height: 66%;
  object-fit: cover; object-position: center bottom;
  opacity: .4; pointer-events: none; z-index: 0;
}

/* === MODE 벤토 · 참조이미지2(네온 라임 · 다크 틸그린) 스타일 =========
   히어로 카드 = 다크 틸그린 표면 + 라임 상단 엣지 + 하단 라임 글로우 +
   그린 '문양'(스트릭/링/파티클) 발광 오버레이. 텍스트 내용은 그대로. */
.mb-card.is-hero {
  background:
    radial-gradient(132% 80% at 50% 130%, rgba(206,255,0,.30), rgba(206,255,0,0) 62%),
    linear-gradient(180deg, #063231 0%, #04211f 100%);
  box-shadow:
    inset 0 3px 0 0 var(--c-q-line),
    inset 0 0 0 1px rgba(206,255,0,.12);
}
.mb-card.is-hero:hover {
  background:
    radial-gradient(132% 84% at 50% 130%, rgba(206,255,0,.42), rgba(206,255,0,0) 62%),
    linear-gradient(180deg, #073b39 0%, #052b28 100%);
  box-shadow:
    inset 0 3px 0 0 var(--c-q),
    inset 0 0 0 1px rgba(206,255,0,.24),
    var(--sh-q);
}
/* 그린 문양 — 카드 전체를 채우고 screen 블렌드로 어두운 표면 위에서 발광 */
.mb-card.is-hero .mb-gfx {
  inset: 0;
  width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  opacity: .6;
  mix-blend-mode: screen;
}
/* 문양이 강한 히어로에선 설명/서브 텍스트를 밝게 (가독성 확보) */
.mb-card.is-hero .mb-desc { color: var(--c-fg-2); }
.mb-card.is-hero .mb-bigtext { color: var(--c-fg); }

/* mode 씬은 벤토가 전체를 채움 → 빈 터치 푸터 숨김 */
.t-foot:empty { display: none; }

/* 씬 헤드 공용 타이틀 (멀티·트레이닝·AI·이벤트·admin·스트로크 등 여러 씬 헤드가 사용) */
.t-mode-title {
  font-size: 38px;
  font-weight: 700;
  letter-spacing: -.02em;
  color: var(--c-fg);
}

/* =========================================================
   SCENE: LOGIN  (메인=6슬롯 보드, 터치=슬롯 리스트 + 방식 탭)
   ========================================================= */

/* --- 메인 (6슬롯 보드) ---------------------------------------- */
.m-login {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s7) var(--s8);
  gap: var(--s5);
}
.m-login-head { display: flex; align-items: flex-end; justify-content: space-between; }
.m-login-head .kicker b { color: var(--c-q); }
.m-login-head-title { font-size: 56px; font-weight: 700; letter-spacing: -.02em; }
.m-login-head-tone { font-family: var(--ff-en); font-size: 22px; color: var(--c-fg-3); letter-spacing: .15em; }

.m-login-board {
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s3);
}
.m-login-card {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
  position: relative;
  overflow: hidden;
}
.m-login-card-no {
  font-family: var(--ff-en);
  font-size: 16px;
  letter-spacing: .2em;
  color: var(--c-fg-4);
  font-weight: 700;
}
.m-login-card-body {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--s2);
}
.m-login-card.is-empty .m-login-card-body { align-items: center; justify-content: center; color: var(--c-fg-5); font-family: var(--ff-en); font-size: 14px; letter-spacing: .18em; }
.m-login-card.is-on { box-shadow: inset 0 0 0 1px var(--c-q-line); background: linear-gradient(180deg, var(--c-q-soft), transparent), var(--c-card); }
.m-login-card-name { font-size: 26px; font-weight: 700; letter-spacing: -.01em; }
.m-login-card-meta { display: flex; gap: var(--s2); flex-wrap: wrap; }
.m-login-card-meta .chip {
  font-family: var(--ff-en); font-size: 12px; letter-spacing: .15em;
  padding: 3px 8px; border-radius: var(--r-s);
  background: var(--c-card-3); color: var(--c-fg-2);
}

.m-login-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s4);
  border-top: 1px solid var(--c-line);
}
.m-login-foot-tip { color: var(--c-fg-3); font-size: 18px; }
.m-login-foot-mode { font-size: 20px; color: var(--c-fg-2); }
.m-login-foot-mode b { color: var(--tone, var(--c-q)); font-weight: 700; }

/* --- 터치 (슬롯 리스트 + 방식 탭) ----------------------------- */
.t-login-head { padding: var(--s5) var(--s5) var(--s3); }
.t-login-title { font-size: 32px; font-weight: 700; letter-spacing: -.02em; }
.t-login-cap { color: var(--c-fg-3); font-size: 18px; font-weight: 400; margin-left: var(--s2); }

.t-slot-list {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  overflow-y: auto;
}
.t-slot-card {
  background: var(--c-card);
  border-radius: var(--r-m);
  padding: var(--s4);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-align: left;
}
.t-slot-card:hover { background: var(--c-card-2); }
.t-slot-card.is-on { box-shadow: inset 0 0 0 2px var(--c-q-line); background: linear-gradient(180deg, var(--c-q-soft), transparent), var(--c-card); }
.t-slot-card-top { display: flex; justify-content: space-between; align-items: center; }
.t-slot-card-no { font-family: var(--ff-en); font-size: 14px; letter-spacing: .2em; color: var(--c-fg-3); font-weight: 700; }
.t-slot-card-st { font-family: var(--ff-en); font-size: 12px; letter-spacing: .2em; color: var(--c-fg-4); }
.t-slot-card.is-on .t-slot-card-st { color: var(--c-q); }
.t-slot-card-name { font-size: 28px; font-weight: 700; letter-spacing: -.01em; min-height: 36px; }
.t-slot-card-empty { color: var(--c-fg-5); font-size: 20px; font-weight: 500; }
.t-slot-card-meta { display: flex; gap: var(--s2); margin-top: var(--s2); }
.t-slot-card-meta .chip {
  font-family: var(--ff-en); font-size: 11px; letter-spacing: .15em;
  padding: 2px 6px; border-radius: var(--r-s);
  background: var(--c-card-3); color: var(--c-fg-2);
}

.t-login-method {
  padding: var(--s4) var(--s5);
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
  display: flex; flex-direction: column; gap: var(--s3);
}
.t-login-tabs {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--s2);
}
.t-login-tab {
  height: 60px;
  border-radius: var(--r-m);
  background: var(--c-card);
  color: var(--c-fg-2);
  font-size: 18px; font-weight: 600;
  letter-spacing: -.01em;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-login-tab:hover { background: var(--c-card-2); }
.t-login-tab.is-on { background: var(--c-q); color: #0a1400; box-shadow: none; }

/* =========================================================
   MODAL (로그인 팝업 등)
   ========================================================= */
.modal {
  position: fixed; inset: 0;
  background: rgba(0,0,0,.6);
  backdrop-filter: blur(6px);
  display: grid; place-items: center;
  z-index: 100;
}
.modal[hidden] { display: none; }
.modal-card {
  width: 720px;
  background: var(--c-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--c-line);
  overflow: hidden;
}
.modal-head {
  padding: var(--s5) var(--s5);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--c-line);
}
.modal-head .kicker b { color: var(--c-q); }
.modal-x {
  width: 44px; height: 44px;
  display: grid; place-items: center;
  border-radius: var(--r-m);
  color: var(--c-fg-2);
  font-size: 28px;
}
.modal-x:hover { background: var(--c-card-2); color: var(--c-fg); }
.modal-body {
  padding: var(--s6);
  display: flex; flex-direction: column; gap: var(--s4);
}
.modal-body .field {
  display: flex; flex-direction: column; gap: var(--s2);
}
.modal-body .field-label { color: var(--c-fg-3); font-size: 16px; letter-spacing: .05em; }
.modal-body .field-input {
  height: 64px;
  background: var(--c-bg-2);
  border-radius: var(--r-m);
  padding: 0 var(--s4);
  font-size: 24px; font-weight: 500;
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-fg);
}
.modal-body .field-input:focus { box-shadow: inset 0 0 0 2px var(--c-q-line); }
.modal-body .field-input::placeholder { color: var(--c-fg-5); }
.modal-actions { display: flex; gap: var(--s3); margin-top: var(--s3); }
.modal-actions .btn { flex: 1; }
.modal-qr {
  display: grid; place-items: center;
  padding: var(--s5);
  background: var(--c-bg-2); border-radius: var(--r-m);
}
.modal-qr-img {
  width: 240px; height: 240px;
  background: #fff;
  display: grid; place-items: center;
  border-radius: var(--r-s);
  color: #000; font-family: var(--ff-mono); font-size: 14px;
}
.modal-tip { color: var(--c-fg-3); font-size: 18px; text-align: center; line-height: 1.5; }

/* === 종료 확인 모달 ========================================= */
.modal-confirm { width: 540px; }
.modal-confirm-body {
  padding: var(--s8) var(--s6) var(--s6);
  display: flex; flex-direction: column; align-items: center;
  text-align: center; gap: var(--s4);
}
.modal-confirm-ico {
  width: 88px; height: 88px;
  display: grid; place-items: center;
  border-radius: 50%;
  color: var(--c-red);
  background: var(--c-red-soft);
  box-shadow: 0 0 40px rgba(255,91,110,.25);
}
.modal-confirm-ico svg { width: 44px; height: 44px; }
.modal-confirm-tit { font-size: 30px; font-weight: 700; letter-spacing: -.01em; color: var(--c-fg); }
.modal-confirm-sub { font-size: 18px; color: var(--c-fg-3); line-height: 1.5; }
.modal-confirm-actions {
  display: flex; gap: var(--s3);
  padding: var(--s5) var(--s6) var(--s6);
}
.modal-confirm-actions .btn { flex: 1; }

/* =========================================================
   SCENE: STROKE · COURSE  (코스 선택)
   ========================================================= */

/* --- 메인 (선택된 코스 hero + 메타) ----------------------------- */
.m-stroke-course {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s7) var(--s8);
  gap: var(--s5);
}
.m-sc-head { display: flex; justify-content: space-between; align-items: flex-end; }
.m-sc-head .kicker b { color: var(--c-q); }
.m-sc-head-tit { font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
.m-sc-head-mode { font-family: var(--ff-en); font-size: 18px; letter-spacing: .18em; color: var(--c-fg-3); }

.m-sc-body {
  display: grid;
  grid-template-columns: 1fr 700px;
  gap: var(--s7);
  min-height: 0;
}
.m-sc-hero {
  display: flex; flex-direction: column;
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: var(--s6) var(--s7);
  position: relative;
  overflow: hidden;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-sc-hero::before {
  content: '';
  position: absolute; inset: 0;
  background:
    radial-gradient(600px 400px at 20% 30%, var(--tone-soft, var(--c-q-soft)), transparent 60%),
    radial-gradient(800px 500px at 80% 70%, rgba(255,255,255,.02), transparent 60%);
  pointer-events: none;
}
.m-sc-hero-kicker { font-family: var(--ff-en); font-size: 16px; letter-spacing: .25em; color: var(--c-fg-3); position: relative; }
.m-sc-hero-en {
  font-family: var(--ff-en);
  font-size: 168px;
  font-weight: 800;
  line-height: .9;
  letter-spacing: -.04em;
  margin-top: var(--s4);
  color: var(--tone, var(--c-fg));
  position: relative;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.m-sc-hero-ko { font-size: 44px; font-weight: 700; margin-top: var(--s3); letter-spacing: -.02em; position: relative; }
.m-sc-hero-meta {
  display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; position: relative;
}
.m-sc-hero-meta .tag {
  height: 44px; padding: 0 var(--s4);
  display: inline-flex; align-items: center; gap: var(--s2);
  background: rgba(0,0,0,.3);
  border-radius: var(--r-s);
  font-family: var(--ff-en); font-size: 14px; letter-spacing: .18em;
  color: var(--c-fg-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-sc-hero-meta .tag b { color: var(--c-fg); font-weight: 700; letter-spacing: 0; font-family: var(--ff-ko); }

.m-sc-side { display: flex; flex-direction: column; gap: var(--s4); min-height: 0; }
.m-sc-info {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-sc-info-row { display: flex; justify-content: space-between; align-items: center; padding: var(--s2) 0; border-bottom: 1px dashed var(--c-line); }
.m-sc-info-row:last-child { border-bottom: 0; }
.m-sc-info-row span { color: var(--c-fg-3); font-size: 16px; }
.m-sc-info-row b { font-size: 22px; font-weight: 700; color: var(--c-fg); }

.m-sc-holes {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  box-shadow: inset 0 0 0 1px var(--c-line);
  flex: 1;
  display: flex; flex-direction: column; gap: var(--s3);
}
.m-sc-holes-grid {
  display: grid;
  grid-template-columns: repeat(9, 1fr);
  gap: var(--s2);
  flex: 1;
}
.m-sc-hole {
  background: var(--c-bg-2);
  border-radius: var(--r-s);
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  font-family: var(--ff-en);
  color: var(--c-fg-3);
  padding: var(--s2);
  gap: 2px;
}
.m-sc-hole-no { font-size: 12px; letter-spacing: .15em; color: var(--c-fg-5); font-weight: 700; }
.m-sc-hole-par { font-size: 24px; font-weight: 800; color: var(--c-fg); }
.m-sc-hole-dist { font-size: 10px; letter-spacing: .1em; color: var(--c-fg-4); }

.m-sc-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s4);
  border-top: 1px solid var(--c-line);
}
.m-sc-foot-tip { color: var(--c-fg-3); font-size: 18px; }
.m-sc-foot-next b { color: var(--c-q); font-weight: 700; }

/* --- 터치 (필터 + 그리드 + 페이저) ----------------------------- */
.t-sc-head { padding: var(--s5) var(--s5) var(--s2); }

.t-sc-filter {
  padding: 0 var(--s5) var(--s3);
  display: flex; flex-direction: column; gap: var(--s3);
}
.t-sc-cat {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--s2);
}
.t-sc-cat-btn {
  height: 52px;
  background: var(--c-card);
  border-radius: var(--r-m);
  color: var(--c-fg-2);
  font-size: 16px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: flex; align-items: center; justify-content: center; gap: var(--s2);
}
.t-sc-cat-btn:hover { background: var(--c-card-2); }
.t-sc-cat-btn.is-on { background: var(--c-q); color: #0a1400; box-shadow: none; font-weight: 700; }
.t-sc-cat-btn .num { font-family: var(--ff-en); font-size: 13px; color: var(--c-fg-4); letter-spacing: .1em; }
.t-sc-cat-btn.is-on .num { color: rgba(10,20,0,.6); }

.t-sc-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s2);
}
.t-sc-row .seg {
  height: 52px;
  background: var(--c-card);
  border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: grid;
  grid-template-columns: 1fr 1fr;
  padding: 4px;
  gap: 2px;
}
.t-sc-row .seg button {
  border-radius: var(--r-s);
  color: var(--c-fg-3);
  font-size: 16px; font-weight: 600;
  letter-spacing: .05em;
}
.t-sc-row .seg button.is-on { background: var(--c-cyan); color: #001620; font-weight: 700; }
.t-sc-row .meta {
  height: 52px;
  background: var(--c-card);
  border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--ff-en); font-size: 14px;
  letter-spacing: .15em; color: var(--c-fg-3);
}
.t-sc-row .meta b { color: var(--c-fg); font-weight: 700; margin: 0 4px; font-family: var(--ff-ko); }

.t-sc-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
  min-height: 0;
}
.t-sc-card {
  position: relative;
  background: var(--c-card);
  border-radius: var(--r-m);
  padding: var(--s4);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-align: left;
  overflow: hidden;
}
.t-sc-card:hover { background: var(--c-card-2); }
.t-sc-card.is-on {
  box-shadow: inset 0 0 0 2px var(--c-q-line);
  background: linear-gradient(180deg, var(--c-q-soft), transparent), var(--c-card);
}
.t-sc-card-top { display: flex; justify-content: space-between; align-items: center; }
.t-sc-card-rg { font-family: var(--ff-en); font-size: 12px; letter-spacing: .15em; color: var(--c-fg-4); font-weight: 600; }
.t-sc-card-tier { font-family: var(--ff-en); font-size: 11px; letter-spacing: .15em; padding: 3px 8px; border-radius: var(--r-s); background: var(--c-card-3); color: var(--c-fg-3); }
.t-sc-card-tier.is-best { background: var(--c-q-soft); color: var(--c-q); }
.t-sc-card-tier.is-new { background: var(--c-amber-soft); color: var(--c-amber); }
.t-sc-card-en { font-family: var(--ff-en); font-size: 20px; font-weight: 800; letter-spacing: -.02em; color: var(--c-fg); margin-top: auto; }
.t-sc-card-ko { font-size: 16px; color: var(--c-fg-2); font-weight: 500; margin-top: 2px; }
.t-sc-card-bot { display: flex; justify-content: space-between; margin-top: var(--s2); font-family: var(--ff-en); font-size: 12px; letter-spacing: .12em; color: var(--c-fg-3); }
.t-sc-card-bot b { color: var(--c-fg); font-weight: 700; }
.t-sc-card-diff { display: inline-flex; gap: 2px; }
.t-sc-card-diff i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-fg-5); }
.t-sc-card-diff i.on { background: var(--c-amber); }

.t-sc-pager {
  padding: var(--s3) var(--s5);
  display: flex; align-items: center; justify-content: center;
  border-top: 1px solid var(--c-line);
  background: var(--c-bg);
}
.t-sc-pager .pg-cluster {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
}
.t-sc-pager .pg-row { display: flex; align-items: center; gap: var(--s4); }
.t-sc-pager .pg-btn {
  width: 56px; height: 56px;
  background: var(--c-card);
  border-radius: var(--r-m);
  color: var(--c-fg-2);
  font-size: 24px;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-sc-pager .pg-btn:disabled { opacity: .25; }
.t-sc-pager .pg-dots { display: flex; gap: var(--s2); }
.t-sc-pager .pg-dots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-line-2); }
.t-sc-pager .pg-dots i.on { background: var(--c-q); box-shadow: 0 0 12px var(--c-q-soft); }
.t-sc-pager .pg-info { font-family: var(--ff-en); font-size: 14px; letter-spacing: .15em; color: var(--c-fg-3); }
.t-sc-pager .pg-info b { color: var(--c-fg); font-weight: 700; }

/* =========================================================
   SCENE: STROKE · PLAYER  (플레이어 설정)
   ========================================================= */

/* --- 메인 (6슬롯 큰 보드 + 코스 정보) ---------------------------- */
.m-stroke-player {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s7) var(--s8);
  gap: var(--s5);
}
.m-sp-head { display: flex; justify-content: space-between; align-items: flex-end; }
.m-sp-head-tit { font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
.m-sp-head-meta { display: flex; gap: var(--s3); }
.m-sp-head-meta .tag {
  height: 40px; padding: 0 var(--s4);
  display: inline-flex; align-items: center;
  background: var(--c-card);
  border-radius: var(--r-s);
  font-family: var(--ff-en); font-size: 13px; letter-spacing: .15em;
  color: var(--c-fg-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-sp-head-meta .tag b { color: var(--c-q); font-weight: 700; }

.m-sp-board { display: grid; grid-template-columns: repeat(6, 1fr); gap: var(--s3); }
.m-sp-card {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s4);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
  position: relative;
}
.m-sp-card.is-active { box-shadow: inset 0 0 0 2px var(--c-q-line); background: linear-gradient(180deg, var(--c-q-soft), transparent), var(--c-card); }
.m-sp-card.is-empty { opacity: .45; }
.m-sp-card-no { font-family: var(--ff-en); font-size: 14px; letter-spacing: .2em; color: var(--c-fg-4); font-weight: 700; }
.m-sp-card-name { font-size: 24px; font-weight: 700; letter-spacing: -.01em; }
.m-sp-card.is-empty .m-sp-card-name { color: var(--c-fg-5); font-weight: 500; }
.m-sp-card-opt { display: flex; flex-direction: column; gap: var(--s1); }
.m-sp-card-opt-row { display: flex; justify-content: space-between; align-items: center; font-size: 14px; padding: var(--s1) 0; }
.m-sp-card-opt-row span { color: var(--c-fg-3); }
.m-sp-card-opt-row b { color: var(--c-fg); font-weight: 600; }
.m-sp-card-tee { display: inline-flex; align-items: center; gap: 6px; }
.m-sp-card-tee i { width: 10px; height: 10px; border-radius: 50%; }

.m-sp-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s4);
  border-top: 1px solid var(--c-line);
}

/* --- 터치 (슬롯 레일 + 옵션 패널) -------------------------------- */
.t-sp-head { padding: var(--s5) var(--s5) var(--s3); }

.t-sp-rail {
  padding: 0 var(--s5);
  display: grid;
  grid-template-columns: repeat(6, 1fr);
  gap: var(--s2);
}
.t-sp-rail-card {
  background: var(--c-card);
  border-radius: var(--r-s);
  padding: var(--s3) var(--s2);
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-sp-rail-card:hover { background: var(--c-card-2); }
.t-sp-rail-card.is-active { background: var(--c-q); color: #0a1400; box-shadow: none; }
.t-sp-rail-card.is-empty { opacity: .4; }
.t-sp-rail-no { font-family: var(--ff-en); font-size: 11px; letter-spacing: .15em; font-weight: 700; color: inherit; opacity: .8; }
.t-sp-rail-name { font-size: 14px; font-weight: 600; letter-spacing: -.02em; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.t-sp-panel {
  flex: 1;
  display: flex; flex-direction: column;
  padding: var(--s4) var(--s5);
  gap: var(--s3);
  min-height: 0;
  overflow-y: auto;
}
.t-sp-panel-head { display: flex; justify-content: space-between; align-items: baseline; }
.t-sp-panel-name { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.t-sp-panel-name b { color: var(--c-q); }
.t-sp-panel-mode {
  display: flex; gap: var(--s1);
  background: var(--c-card);
  border-radius: var(--r-m);
  padding: 4px;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-sp-panel-mode button {
  height: 36px; padding: 0 var(--s3);
  border-radius: var(--r-s);
  font-size: 13px; font-weight: 600;
  color: var(--c-fg-3);
}
.t-sp-panel-mode button.is-on { background: var(--c-cyan); color: #001620; }

.t-sp-opts {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--s2);
}
.t-sp-opt {
  background: var(--c-card);
  border-radius: var(--r-m);
  padding: var(--s3) var(--s4);
  display: grid;
  grid-template-columns: 140px 1fr;
  align-items: center;
  gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-sp-opt-label { font-size: 16px; color: var(--c-fg-2); font-weight: 600; }
.t-sp-opt-segs { display: flex; gap: 4px; }
.t-sp-opt-segs button {
  flex: 1;
  height: 44px;
  border-radius: var(--r-s);
  background: var(--c-bg-2);
  color: var(--c-fg-3);
  font-size: 14px; font-weight: 600;
}
.t-sp-opt-segs button.is-on { background: var(--c-q); color: #0a1400; }
.t-sp-opt-tees { display: flex; gap: var(--s2); }
.t-sp-opt-tees button {
  width: 44px; height: 44px;
  border-radius: 50%;
  display: grid; place-items: center;
  font-size: 11px; font-weight: 700;
  color: rgba(0,0,0,.7);
  box-shadow: inset 0 0 0 2px transparent;
}
.t-sp-opt-tees button.is-on { box-shadow: inset 0 0 0 2px var(--c-fg), 0 0 16px rgba(255,255,255,.2); }
.tee-white { background: #f5f5f5; }
.tee-yellow { background: #ffd96a; }
.tee-blue { background: #36C4FF; }
.tee-red { background: #ff5b6e; color: #fff; }
.tee-black { background: #1a1a1a; color: #fff; }

.t-sp-opt-stepper { display: flex; align-items: center; gap: var(--s2); justify-content: flex-end; }
.t-sp-opt-stepper button {
  width: 40px; height: 40px;
  border-radius: var(--r-s);
  background: var(--c-bg-2);
  color: var(--c-fg-2);
  font-size: 20px;
}
.t-sp-opt-stepper .val {
  min-width: 64px;
  text-align: center;
  font-family: var(--ff-en);
  font-size: 22px; font-weight: 700;
  color: var(--c-fg);
}

/* =========================================================
   메인 상단 PORTAL 복귀 / ADMIN 진입
   ========================================================= */
/* =========================================================
   공통: 모드 hero 헤더 (멀티/트레이닝/AI/이벤트/주니어 공통 톤)
   ========================================================= */
.mode-pad {
  position: absolute; inset: 0;
  display: grid;
  grid-template-rows: auto 1fr auto;
  padding: var(--s7) var(--s8);
  gap: var(--s5);
}
.mode-head { display: flex; justify-content: space-between; align-items: flex-end; }
.mode-head-tit { font-size: 44px; font-weight: 700; letter-spacing: -.02em; }
.mode-head-meta { display: flex; gap: var(--s3); }
.mode-head-meta .tag {
  height: 40px; padding: 0 var(--s4);
  display: inline-flex; align-items: center;
  background: var(--c-card);
  border-radius: var(--r-s);
  font-family: var(--ff-en); font-size: 13px; letter-spacing: .15em;
  color: var(--c-fg-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.mode-head-meta .tag b { color: var(--c-fg); font-weight: 700; }

.mode-foot {
  display: flex; justify-content: space-between; align-items: center;
  padding-top: var(--s4);
  border-top: 1px solid var(--c-line);
}
.mode-foot-tip { color: var(--c-fg-3); font-size: 18px; }
.mode-foot-next b { color: var(--tone, var(--c-q)); font-weight: 700; }

/* 터치 헤더 공통 */
.t-mode-head-2 { padding: var(--s5) var(--s5) var(--s3); }
.t-mode-head-2 .t-mode-title { font-size: 36px; font-weight: 700; letter-spacing: -.02em; }

/* =========================================================
   SCENE: MULTIPLAY  (9홀 한정)
   ========================================================= */
.m-multi-body {
  display: grid;
  grid-template-columns: 1fr 600px;
  gap: var(--s7);
  min-height: 0;
}
.m-multi-rooms {
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s3);
  min-height: 0;
}
.m-multi-room {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
  position: relative;
}
.m-multi-room.is-on { box-shadow: inset 0 0 0 2px var(--c-cyan); }
.m-multi-room.is-full { opacity: .55; }
.m-multi-room-top { display: flex; justify-content: space-between; align-items: flex-start; }
.m-multi-room-code { font-family: var(--ff-en); font-size: 28px; font-weight: 800; letter-spacing: .1em; color: var(--c-cyan); }
.m-multi-room-st {
  font-family: var(--ff-en); font-size: 12px; letter-spacing: .2em;
  padding: 4px 8px; border-radius: var(--r-s);
  background: var(--c-cyan-soft); color: var(--c-cyan);
  font-weight: 700;
}
.m-multi-room.is-full .m-multi-room-st { background: var(--c-red-soft); color: var(--c-red); }
.m-multi-room-name { font-size: 22px; font-weight: 700; }
.m-multi-room-meta { display: flex; flex-direction: column; gap: var(--s1); }
.m-multi-room-meta-row { display: flex; justify-content: space-between; font-size: 16px; color: var(--c-fg-3); }
.m-multi-room-meta-row b { color: var(--c-fg); font-weight: 600; }
.m-multi-room-slots { display: flex; gap: 4px; margin-top: auto; }
.m-multi-room-slots i { flex: 1; height: 8px; border-radius: 2px; background: var(--c-bg-2); }
.m-multi-room-slots i.on { background: var(--c-cyan); }

.m-multi-side { display: flex; flex-direction: column; gap: var(--s4); }
.m-multi-side .m-sc-info b { color: var(--c-cyan); }
.m-multi-quick {
  background: linear-gradient(135deg, var(--c-cyan-soft), transparent), var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s6);
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: flex; flex-direction: column; gap: var(--s3);
}
.m-multi-quick-big {
  font-family: var(--ff-en); font-size: 80px; font-weight: 800;
  color: var(--c-cyan); line-height: .9; letter-spacing: -.03em;
}
.m-multi-quick-cap { color: var(--c-fg-2); font-size: 18px; line-height: 1.5; }

/* 터치 */
.t-multi { display: contents; }
.t-multi-act {
  padding: var(--s3) var(--s5);
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
}
.t-multi-act-btn {
  height: 80px;
  background: var(--c-card);
  border-radius: var(--r-m);
  color: var(--c-fg);
  font-size: 18px; font-weight: 700;
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.t-multi-act-btn:hover { background: var(--c-card-2); }
.t-multi-act-btn.is-primary { background: var(--c-cyan); color: #001620; box-shadow: 0 0 24px var(--c-cyan-soft); }
.t-multi-act-btn .sub { font-family: var(--ff-en); font-size: 11px; letter-spacing: .15em; color: var(--c-fg-4); font-weight: 600; }
.t-multi-act-btn.is-primary .sub { color: rgba(0,22,32,.6); }

.t-multi-list {
  flex: 1;
  display: flex; flex-direction: column; gap: var(--s2);
  padding: var(--s3) var(--s5) var(--s5);
  overflow-y: auto;
}
.t-multi-list-head { font-family: var(--ff-en); font-size: 13px; letter-spacing: .2em; color: var(--c-fg-3); padding: 0 var(--s2); }
.t-multi-row {
  background: var(--c-card);
  border-radius: var(--r-m);
  padding: var(--s4);
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: var(--s4);
  align-items: center;
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-align: left;
}
.t-multi-row:hover { background: var(--c-card-2); }
.t-multi-row.is-full { opacity: .5; }
.t-multi-row.is-on { box-shadow: inset 0 0 0 2px var(--c-cyan); }
.t-multi-row-code { font-family: var(--ff-en); font-size: 22px; font-weight: 800; letter-spacing: .1em; color: var(--c-cyan); }
.t-multi-row-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.t-multi-row-name { font-size: 18px; font-weight: 600; }
.t-multi-row-sub { font-family: var(--ff-en); font-size: 12px; letter-spacing: .12em; color: var(--c-fg-3); }
.t-multi-row-slots { display: flex; gap: 4px; }
.t-multi-row-slots i { width: 8px; height: 8px; border-radius: 50%; background: var(--c-bg-2); }
.t-multi-row-slots i.on { background: var(--c-cyan); }

/* =========================================================
   SCENE: TRAINING  (샷 + 클럽 측정)
   ========================================================= */
.m-training-body {
  display: grid;
  grid-template-columns: 1fr 720px;
  gap: var(--s7);
  min-height: 0;
}
.m-training-hero {
  background: linear-gradient(135deg, var(--c-purple-soft), transparent 60%), var(--c-card);
  border-radius: var(--r-xl);
  padding: var(--s7);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--c-line);
  position: relative;
  overflow: hidden;
}
.m-training-hero-en {
  font-family: var(--ff-en);
  font-size: 196px;
  font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--c-purple);
}
.m-training-hero-ko { font-size: 40px; font-weight: 700; margin-top: var(--s3); }
.m-training-hero-desc { color: var(--c-fg-2); font-size: 22px; margin-top: var(--s4); max-width: 800px; line-height: 1.5; }
.m-training-types {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--s3);
  margin-top: var(--s5);
}
.m-training-type {
  background: rgba(0,0,0,.3);
  border-radius: var(--r-m);
  padding: var(--s3);
  display: flex; flex-direction: column; gap: 4px;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-training-type.is-on { box-shadow: inset 0 0 0 2px var(--c-purple); background: var(--c-purple-soft); }
.m-training-type-en { font-family: var(--ff-en); font-size: 13px; letter-spacing: .2em; color: var(--c-purple); font-weight: 700; }
.m-training-type-ko { font-size: 18px; font-weight: 600; }
.m-training-type-tag { font-family: var(--ff-en); font-size: 11px; color: var(--c-fg-3); letter-spacing: .12em; }

.m-training-side { display: flex; flex-direction: column; gap: var(--s4); }
.m-training-card {
  background: var(--c-card); border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-training-card .row { display: flex; justify-content: space-between; padding: var(--s2) 0; border-bottom: 1px dashed var(--c-line); font-size: 18px; }
.m-training-card .row:last-child { border-bottom: 0; }
.m-training-card .row span { color: var(--c-fg-3); }
.m-training-card .row b { color: var(--c-fg); font-weight: 700; }
.m-training-card .row b.q { color: var(--c-purple); }
.m-training-card-big {
  font-family: var(--ff-en);
  font-size: 64px; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--c-fg);
  text-align: center;
  margin: var(--s2) 0;
}
.m-training-card-big small { font-size: 24px; color: var(--c-fg-3); font-weight: 500; }

/* 터치 */
.t-training { display: contents; }
.t-training-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
}
.t-training-card {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-align: left;
  position: relative;
}
.t-training-card:hover { background: var(--c-card-2); }
.t-training-card.is-on { box-shadow: inset 0 0 0 2px var(--c-purple); background: linear-gradient(180deg, var(--c-purple-soft), transparent), var(--c-card); }
.t-training-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.t-training-card-no { font-family: var(--ff-en); font-size: 14px; letter-spacing: .2em; color: var(--c-fg-4); font-weight: 700; }
.t-training-card.is-on .t-training-card-no { color: var(--c-purple); }
.t-training-card-en { font-family: var(--ff-en); font-size: 14px; letter-spacing: .2em; color: var(--c-fg-3); font-weight: 600; }
.t-training-card-name { font-size: 28px; font-weight: 700; letter-spacing: -.02em; }
.t-training-card-desc { font-size: 14px; color: var(--c-fg-3); font-weight: 500; }
.t-training-card-tag {
  align-self: flex-start;
  font-family: var(--ff-en); font-size: 11px; letter-spacing: .15em;
  padding: 4px 8px; border-radius: var(--r-s);
  background: var(--c-purple-soft); color: var(--c-purple);
  font-weight: 700;
  margin-top: var(--s2);
}
.t-training-card.is-club .t-training-card-tag { background: var(--c-amber-soft); color: var(--c-amber); }

/* =========================================================
   SCENE: AI SWING ANALYSIS
   ========================================================= */
.m-aiswing-body {
  display: grid;
  grid-template-columns: 1fr 700px;
  gap: var(--s7);
  min-height: 0;
}
.m-aiswing-video {
  background: var(--c-card);
  border-radius: var(--r-xl);
  position: relative;
  overflow: hidden;
  display: flex; flex-direction: column;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-aiswing-video-stage {
  flex: 1;
  background:
    radial-gradient(circle at 50% 60%, rgba(255,181,71,.1), transparent 50%),
    repeating-linear-gradient(0deg, transparent 0, transparent 40px, rgba(255,255,255,.025) 40px, rgba(255,255,255,.025) 41px),
    repeating-linear-gradient(90deg, transparent 0, transparent 40px, rgba(255,255,255,.025) 40px, rgba(255,255,255,.025) 41px),
    var(--c-bg);
  display: grid; place-items: center;
  position: relative;
}
.m-aiswing-video-cap {
  font-family: var(--ff-en);
  font-size: 22px;
  letter-spacing: .25em;
  color: var(--c-fg-4);
}
.m-aiswing-video-hud {
  position: absolute; top: var(--s4); left: var(--s4);
  display: flex; gap: var(--s2);
}
.m-aiswing-video-hud .pill {
  height: 36px; padding: 0 var(--s3);
  background: rgba(0,0,0,.6);
  border-radius: var(--r-s);
  display: inline-flex; align-items: center; gap: var(--s2);
  font-family: var(--ff-en); font-size: 12px; letter-spacing: .15em;
  color: var(--c-fg-2);
}
.m-aiswing-video-hud .pill i { width: 6px; height: 6px; border-radius: 50%; background: var(--c-red); animation: blink 1s infinite; }
@keyframes blink { 50% { opacity: .3; } }
.m-aiswing-video-foot {
  padding: var(--s4) var(--s5);
  display: flex; justify-content: space-between; align-items: center;
  border-top: 1px solid var(--c-line);
  font-family: var(--ff-en); font-size: 14px; letter-spacing: .15em; color: var(--c-fg-3);
}
.m-aiswing-video-foot b { color: var(--c-amber); }

.m-aiswing-stats { display: flex; flex-direction: column; gap: var(--s4); }
.m-aiswing-stat {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-aiswing-stat-head { display: flex; justify-content: space-between; align-items: baseline; margin-bottom: var(--s3); }
.m-aiswing-stat-head .kicker b { color: var(--c-amber); }
.m-aiswing-stat-head .tag { font-family: var(--ff-en); font-size: 11px; padding: 3px 6px; border-radius: var(--r-s); background: var(--c-amber-soft); color: var(--c-amber); letter-spacing: .15em; font-weight: 700; }
.m-aiswing-stat-num {
  font-family: var(--ff-en);
  font-size: 96px; font-weight: 800;
  letter-spacing: -.03em;
  color: var(--c-fg);
  line-height: .9;
}
.m-aiswing-stat-num small { font-size: 28px; color: var(--c-fg-3); font-weight: 500; margin-left: var(--s2); }
.m-aiswing-stat-bar { height: 6px; background: var(--c-bg-2); border-radius: 3px; margin-top: var(--s3); overflow: hidden; }
.m-aiswing-stat-bar i { display: block; height: 100%; background: var(--c-amber); border-radius: 3px; }
.m-aiswing-stat-cap { color: var(--c-fg-3); font-size: 14px; margin-top: var(--s2); }

/* 터치 */
.t-aiswing { display: contents; }
.t-aiswing-body { flex: 1; padding: 0 var(--s5) var(--s4); display: flex; flex-direction: column; gap: var(--s3); overflow-y: auto; }
.t-aiswing-row { background: var(--c-card); border-radius: var(--r-m); padding: var(--s4); box-shadow: inset 0 0 0 1px var(--c-line); }
.t-aiswing-row-head { font-family: var(--ff-en); font-size: 13px; letter-spacing: .2em; color: var(--c-fg-3); margin-bottom: var(--s3); }
.t-aiswing-row-segs { display: flex; gap: 4px; }
.t-aiswing-row-segs button {
  flex: 1; height: 56px;
  background: var(--c-bg-2);
  border-radius: var(--r-s);
  color: var(--c-fg-3);
  font-size: 16px; font-weight: 600;
}
.t-aiswing-row-segs button.is-on { background: var(--c-amber); color: #2a1a00; }

.t-aiswing-club-grid { display: grid; grid-template-columns: repeat(5, 1fr); gap: 4px; }
.t-aiswing-club-grid button {
  height: 56px;
  background: var(--c-bg-2);
  border-radius: var(--r-s);
  color: var(--c-fg-2);
  font-family: var(--ff-en);
  font-size: 14px; font-weight: 700;
  letter-spacing: .05em;
}
.t-aiswing-club-grid button.is-on { background: var(--c-amber); color: #2a1a00; }

.t-aiswing-cta { display: grid; grid-template-columns: 1fr 1fr; gap: var(--s2); margin-top: auto; }

/* =========================================================
   SCENE: EVENT
   ========================================================= */
.m-event-body {
  display: grid;
  grid-template-columns: 1fr 700px;
  gap: var(--s7);
  min-height: 0;
}
.m-event-hero {
  background: linear-gradient(135deg, var(--c-red-soft), transparent 60%), var(--c-card);
  border-radius: var(--r-xl);
  padding: var(--s7);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-event-hero-kicker { font-family: var(--ff-en); font-size: 16px; letter-spacing: .25em; color: var(--c-fg-3); }
.m-event-hero-en {
  font-family: var(--ff-en);
  font-size: 156px; font-weight: 800;
  letter-spacing: -.04em;
  line-height: .9;
  color: var(--c-red);
  margin-top: var(--s4);
}
.m-event-hero-ko { font-size: 40px; font-weight: 700; margin-top: var(--s3); }
.m-event-hero-meta { display: flex; gap: var(--s3); margin-top: var(--s5); flex-wrap: wrap; }
.m-event-hero-meta .tag {
  height: 44px; padding: 0 var(--s4);
  display: inline-flex; align-items: center; gap: var(--s2);
  background: rgba(0,0,0,.35);
  border-radius: var(--r-s);
  font-family: var(--ff-en); font-size: 14px; letter-spacing: .15em;
  color: var(--c-fg-2);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-event-hero-meta .tag b { color: var(--c-fg); font-weight: 700; }

.m-event-board { display: flex; flex-direction: column; gap: var(--s3); }
.m-event-board-head { display: flex; justify-content: space-between; align-items: baseline; }
.m-event-board-head .kicker b { color: var(--c-red); }
.m-event-board-list { display: flex; flex-direction: column; gap: var(--s2); flex: 1; }
.m-event-board-row {
  display: grid;
  grid-template-columns: 40px 1fr auto;
  gap: var(--s4);
  align-items: center;
  padding: var(--s3) var(--s4);
  background: var(--c-card);
  border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-event-board-rank { font-family: var(--ff-en); font-size: 20px; font-weight: 800; color: var(--c-fg-3); text-align: center; }
.m-event-board-rank.is-top { color: var(--c-amber); }
.m-event-board-name { font-size: 20px; font-weight: 600; }
.m-event-board-score { font-family: var(--ff-en); font-size: 22px; font-weight: 800; color: var(--c-fg); letter-spacing: .05em; }

/* 터치 */
.t-event { display: contents; }
.t-event-list {
  flex: 1; padding: 0 var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  overflow-y: auto;
}
.t-event-card {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-align: left;
}
.t-event-card:hover { background: var(--c-card-2); }
.t-event-card.is-on { box-shadow: inset 0 0 0 2px var(--c-red); background: linear-gradient(180deg, var(--c-red-soft), transparent), var(--c-card); }
.t-event-card-top { display: flex; justify-content: space-between; align-items: flex-start; }
.t-event-card-type { font-family: var(--ff-en); font-size: 12px; letter-spacing: .25em; color: var(--c-red); font-weight: 700; }
.t-event-card-st { font-family: var(--ff-en); font-size: 11px; letter-spacing: .15em; padding: 3px 8px; border-radius: var(--r-s); background: var(--c-card-3); color: var(--c-fg-2); }
.t-event-card-st.is-live { background: var(--c-red-soft); color: var(--c-red); animation: blink 1.5s infinite; }
.t-event-card-name { font-size: 24px; font-weight: 700; }
.t-event-card-meta { display: flex; gap: var(--s3); font-family: var(--ff-en); font-size: 12px; letter-spacing: .12em; color: var(--c-fg-3); }
.t-event-card-meta b { color: var(--c-fg); font-weight: 700; }

/* =========================================================
   SCENE: JUNIOR  (어린이 톤 — 친근, 큼)
   ========================================================= */
.m-junior {
  position: absolute; inset: 0;
  padding: var(--s7) var(--s8);
  display: grid;
  grid-template-rows: auto 1fr auto;
  gap: var(--s5);
  background:
    radial-gradient(800px 600px at 30% 40%, var(--c-jr-soft), transparent 60%),
    radial-gradient(800px 600px at 80% 70%, rgba(94,200,255,.06), transparent 60%);
}
.m-junior-head { display: flex; justify-content: space-between; align-items: flex-end; }
.m-junior-head-tit { font-size: 56px; font-weight: 800; letter-spacing: -.03em; }
.m-junior-head-tit i { color: var(--c-jr); }
.m-junior-body { display: grid; grid-template-columns: 1fr 760px; gap: var(--s7); min-height: 0; }
.m-junior-hero {
  background: linear-gradient(135deg, var(--c-jr-soft), transparent), var(--c-card);
  border-radius: var(--r-2xl);
  padding: var(--s7);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-junior-hero-en {
  font-family: var(--ff-en);
  font-size: 220px; font-weight: 800;
  color: var(--c-jr);
  letter-spacing: -.04em; line-height: .85;
}
.m-junior-hero-greet { font-size: 36px; font-weight: 700; margin-top: var(--s4); }
.m-junior-hero-sub { font-size: 22px; color: var(--c-fg-2); margin-top: var(--s2); }
.m-junior-mascot {
  margin-top: var(--s5);
  font-size: 96px;
  text-align: right;
  filter: saturate(.9);
}

.m-junior-side { display: flex; flex-direction: column; gap: var(--s4); }
.m-junior-mission {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-junior-mission-head { display: flex; justify-content: space-between; align-items: baseline; }
.m-junior-mission-head .kicker b { color: var(--c-jr); }
.m-junior-mission-list { display: flex; flex-direction: column; gap: var(--s2); }
.m-junior-mission-row {
  display: grid; grid-template-columns: 40px 1fr auto; gap: var(--s3);
  align-items: center;
  padding: var(--s3);
  background: var(--c-bg-2);
  border-radius: var(--r-s);
}
.m-junior-mission-icon { font-size: 28px; text-align: center; }
.m-junior-mission-name { font-size: 18px; font-weight: 600; }
.m-junior-mission-name small { display: block; font-size: 13px; color: var(--c-fg-3); font-weight: 500; margin-top: 2px; }
.m-junior-mission-prog { font-family: var(--ff-en); font-size: 16px; font-weight: 700; color: var(--c-jr); }

/* 터치 */
.t-junior {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(600px 500px at 50% 30%, var(--c-jr-soft), transparent 60%);
}
.t-junior-head { padding: var(--s6) var(--s5) var(--s3); }
.t-junior-head-tit { font-size: 40px; font-weight: 800; letter-spacing: -.02em; }
.t-junior-head-tit i { color: var(--c-jr); }
.t-junior-head-sub { color: var(--c-fg-2); font-size: 18px; margin-top: var(--s1); }

.t-junior-grid {
  flex: 1;
  display: grid;
  grid-template-columns: 1fr 1fr;
  grid-auto-rows: 1fr;
  gap: var(--s3);
  padding: var(--s3) var(--s5);
}
.t-junior-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: var(--s5);
  display: flex; flex-direction: column; justify-content: space-between;
  box-shadow: inset 0 0 0 1px var(--c-line);
  text-align: left;
  position: relative;
  overflow: hidden;
}
.t-junior-card::after {
  content: ''; position: absolute; inset: 0;
  background: radial-gradient(circle at 80% 90%, var(--c-jr-soft), transparent 60%);
  pointer-events: none;
}
.t-junior-card:hover { background: var(--c-card-2); }
.t-junior-card-ico { font-size: 48px; position: relative; }
.t-junior-card-name { font-size: 24px; font-weight: 800; letter-spacing: -.02em; position: relative; }
.t-junior-card-cap { font-size: 14px; color: var(--c-fg-3); font-weight: 500; margin-top: 2px; position: relative; }
.t-junior-card-prog {
  display: flex; align-items: center; gap: var(--s2);
  margin-top: var(--s3);
  position: relative;
}
.t-junior-card-prog-bar { flex: 1; height: 8px; background: var(--c-bg-2); border-radius: 4px; overflow: hidden; }
.t-junior-card-prog-bar i { display: block; height: 100%; background: var(--c-jr); border-radius: 4px; }
.t-junior-card-prog-val { font-family: var(--ff-en); font-size: 12px; font-weight: 700; color: var(--c-jr); letter-spacing: .05em; }

/* =========================================================
   SCENE: ADMIN GATE (비밀번호) + ADMIN MAIN (5탭)
   ========================================================= */
.m-admin-gate {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  padding: var(--s8);
}
.m-admin-gate-card {
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: var(--s8);
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: flex; flex-direction: column; gap: var(--s4);
  max-width: 800px;
  text-align: center;
}
.m-admin-gate-ico { font-size: 80px; color: var(--c-amber); }
.m-admin-gate-tit { font-size: 48px; font-weight: 700; }
.m-admin-gate-sub { font-size: 22px; color: var(--c-fg-2); }
.m-admin-gate-cap { font-family: var(--ff-en); font-size: 14px; letter-spacing: .25em; color: var(--c-fg-3); margin-top: var(--s4); }
.m-admin-gate-dots { display: flex; gap: var(--s3); justify-content: center; }
.m-admin-gate-dots i { width: 28px; height: 28px; border-radius: 50%; background: var(--c-bg-2); box-shadow: inset 0 0 0 2px var(--c-line); }
.m-admin-gate-dots i.on { background: var(--c-amber); box-shadow: 0 0 16px var(--c-amber-soft); }

/* 터치: 키패드 */
.t-admin-gate { position: absolute; inset: 0; padding: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.t-admin-gate-head { padding: var(--s4) var(--s2) var(--s2); }
.t-admin-gate-head-tit { font-size: 32px; font-weight: 700; }
.t-admin-gate-display {
  background: var(--c-card);
  border-radius: var(--r-m);
  padding: var(--s5);
  display: flex; justify-content: center; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-admin-gate-display i { width: 32px; height: 32px; border-radius: 50%; background: var(--c-bg-2); box-shadow: inset 0 0 0 2px var(--c-line); }
.t-admin-gate-display i.on { background: var(--c-amber); }
.t-admin-keypad {
  flex: 1;
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  grid-auto-rows: 1fr;
  gap: var(--s2);
}
.t-admin-keypad button {
  background: var(--c-card);
  border-radius: var(--r-m);
  font-family: var(--ff-en);
  font-size: 36px;
  font-weight: 700;
  color: var(--c-fg);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-admin-keypad button:hover { background: var(--c-card-2); }
.t-admin-keypad button:active { background: var(--c-amber-soft); color: var(--c-amber); }
.t-admin-keypad button.del { background: var(--c-card-2); color: var(--c-red); font-size: 24px; }

/* admin main */
.m-admin-body {
  display: grid;
  grid-template-columns: 1fr 700px;
  gap: var(--s7);
  min-height: 0;
}
.m-admin-tabhero {
  background: var(--c-card);
  border-radius: var(--r-xl);
  padding: var(--s7);
  display: flex; flex-direction: column; gap: var(--s5);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-admin-tabhero-en {
  font-family: var(--ff-en);
  font-size: 168px; font-weight: 800;
  color: var(--c-amber);
  letter-spacing: -.04em; line-height: .9;
}
.m-admin-tabhero-ko { font-size: 36px; font-weight: 700; }
.m-admin-tabhero-desc { color: var(--c-fg-2); font-size: 20px; }
.m-admin-cards { display: flex; flex-direction: column; gap: var(--s4); }
.m-admin-card {
  background: var(--c-card);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.m-admin-card .row { display: flex; justify-content: space-between; padding: var(--s2) 0; border-bottom: 1px dashed var(--c-line); font-size: 18px; }
.m-admin-card .row:last-child { border-bottom: 0; }
.m-admin-card .row span { color: var(--c-fg-3); }
.m-admin-card .row b { color: var(--c-fg); font-weight: 700; }

/* 터치 */
.t-admin { display: contents; }
.t-admin-tabs {
  padding: var(--s3) var(--s5);
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: var(--s1);
}
.t-admin-tab {
  height: 64px;
  background: var(--c-card);
  border-radius: var(--r-m);
  color: var(--c-fg-2);
  font-size: 14px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--c-line);
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
}
.t-admin-tab:hover { background: var(--c-card-2); }
.t-admin-tab.is-on { background: var(--c-amber); color: #2a1a00; }
.t-admin-tab .sub { font-family: var(--ff-en); font-size: 10px; letter-spacing: .15em; opacity: .65; font-weight: 700; }

.t-admin-panel {
  flex: 1; overflow-y: auto;
  padding: 0 var(--s5) var(--s5);
  display: flex; flex-direction: column; gap: var(--s2);
}
.t-admin-opt {
  background: var(--c-card);
  border-radius: var(--r-m);
  padding: var(--s4);
  display: grid;
  grid-template-columns: 160px 1fr;
  align-items: center;
  gap: var(--s3);
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.t-admin-opt-label { font-size: 16px; color: var(--c-fg-2); font-weight: 600; }
.t-admin-opt-segs { display: flex; gap: 4px; }
.t-admin-opt-segs button { flex: 1; height: 44px; border-radius: var(--r-s); background: var(--c-bg-2); color: var(--c-fg-3); font-size: 14px; font-weight: 600; }
.t-admin-opt-segs button.is-on { background: var(--c-amber); color: #2a1a00; }
.t-admin-opt-slider { display: flex; align-items: center; gap: var(--s3); }
.t-admin-opt-slider .bar { flex: 1; height: 6px; background: var(--c-bg-2); border-radius: 3px; overflow: hidden; }
.t-admin-opt-slider .bar i { display: block; height: 100%; background: var(--c-amber); }
.t-admin-opt-slider .val { font-family: var(--ff-en); font-size: 18px; font-weight: 700; min-width: 56px; text-align: right; }
.t-admin-opt-toggle {
  display: inline-flex; align-items: center;
  width: 64px; height: 32px;
  background: var(--c-bg-2);
  border-radius: 16px;
  padding: 4px;
  cursor: pointer;
  justify-self: end;
  transition: background .15s;
}
.t-admin-opt-toggle i { width: 24px; height: 24px; border-radius: 50%; background: var(--c-fg-3); transition: transform .15s; }
.t-admin-opt-toggle.is-on { background: var(--c-amber); }
.t-admin-opt-toggle.is-on i { transform: translateX(32px); background: #2a1a00; }

/* =========================================================
   로그인 패널 공용 스타일 (콘솔 .t-login 오버레이에서 사용)
   ========================================================= */
.hub-pane-name { font-size: 28px; font-weight: 700; letter-spacing: -.01em; }
.hub-pane-cap { color: var(--c-fg-3); font-size: 15px; }
.hub-pane-lead { color: var(--c-q); font-size: 22px; font-weight: 700; letter-spacing: -.01em; }
.hub-pane-tabs {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: var(--s2);
}
.hub-pane-tab {
  height: 52px;
  background: var(--c-card);
  border-radius: var(--r-m);
  color: var(--c-fg-2);
  font-size: 16px; font-weight: 600;
  box-shadow: inset 0 0 0 1px var(--c-line);
}
.hub-pane-tab:hover { background: var(--c-card-2); }
.hub-pane-tab.is-on { background: var(--c-q); color: #0a1400; box-shadow: none; }
.hub-pane-form { display: flex; flex-direction: column; gap: var(--s3); }
.hub-pane-form .field-input { background: var(--c-card); }
.hub-pane-form .btn { margin-top: var(--s2); }

/* 회원 로그인 — 아이디/비번 + QR 통합 (좌우 2단, QR 스캔 시 바로 로그인) */
.hub-member { display: grid; grid-template-columns: 1fr auto 1fr; gap: var(--s5); align-items: stretch; }
.hub-member-form { display: flex; flex-direction: column; gap: var(--s4); justify-content: center; }
.hub-member-or {
  display: flex; flex-direction: column; align-items: center; gap: var(--s3);
  color: var(--c-fg-4); font-family: var(--ff-en); font-size: 14px; letter-spacing: .15em;
}
.hub-member-or::before, .hub-member-or::after { content: ''; flex: 1; width: 1px; background: var(--c-line); }
.hub-member-qr { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: var(--s4); }
.hub-member-qr-img {
  width: 320px; height: 320px;
  background: #fff; color: #000;
  display: grid; place-items: center;
  border-radius: var(--r-m);
  font-family: var(--ff-mono); font-size: 16px; letter-spacing: .1em;
}

/* === 콘솔 로그인 오버레이 (모드 셀렉트 위, 세로) ============== */
.t-login {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center;
  padding: var(--s6);
  background: rgba(4,6,10,.74);
  backdrop-filter: blur(8px);
}
.t-login[hidden] { display: none; }
.t-login-card {
  position: relative;
  width: 100%;
  max-height: 100%;
  background: var(--c-card);
  border-radius: var(--r-xl);
  box-shadow: var(--sh-2), inset 0 0 0 1px var(--c-line);
  display: flex; flex-direction: column;
  overflow: hidden;
}
.t-login-card::before {
  content: ''; position: absolute; top: 0; left: 0; right: 0; height: 4px;
  background: var(--qc-grad);
}
.t-login-head {
  padding: var(--s5);
  display: flex; justify-content: space-between; align-items: center;
  border-bottom: 1px solid var(--c-line);
}
.t-login-tit { font-size: 34px; font-weight: 700; letter-spacing: -.01em; margin-top: 6px; }
.t-login-head .modal-x { width: 56px; height: 56px; font-size: 34px; }
.t-login-pane {
  margin: var(--s5);
  background: var(--c-bg-2);
  border-radius: var(--r-l);
  padding: var(--s5);
  display: flex; flex-direction: column; gap: var(--s4);
  box-shadow: inset 0 0 0 1px var(--c-line);
  flex: 1; min-height: 0; overflow-y: auto;
}
.t-login-pane .hub-pane-tab { height: 64px; font-size: 20px; }
.t-login-pane .field { display: flex; flex-direction: column; gap: var(--s3); }
.t-login-pane .field-label { font-size: 18px; color: var(--c-fg-3); letter-spacing: .03em; }
.t-login-pane .field-input {
  height: 72px; font-size: 26px; font-weight: 500;
  padding: 0 var(--s4);
  background: var(--c-card);
  border-radius: var(--r-m);
  box-shadow: inset 0 0 0 1px var(--c-line);
  color: var(--c-fg);
}
.t-login-pane .field-input:focus { box-shadow: inset 0 0 0 2px var(--c-q-line); }
.t-login-pane .field-input::placeholder { color: var(--c-fg-5); }
.t-login-pane .btn { height: 80px; font-size: 24px; }
.t-login-foot {
  padding: var(--s5);
  border-top: 1px solid var(--c-line);
}
.t-login-foot .btn { width: 100%; height: 80px; font-size: 24px; }

/* === 스크린 딤 (콘솔 로그인 중) ============================= */
.m-login-dim {
  position: absolute; inset: 0; z-index: 60;
  display: grid; place-items: center;
  background: rgba(4,6,10,.64);
  backdrop-filter: blur(3px);
}
.m-login-dim[hidden] { display: none; }
.m-login-dim-hint {
  text-align: center;
  display: flex; flex-direction: column; gap: var(--s4); align-items: center;
}
.m-login-dim-tit { font-size: 52px; font-weight: 800; letter-spacing: -.02em; color: var(--c-fg); }
.m-login-dim-sub { font-size: 22px; color: var(--c-fg-3); }

/* =========================================================
   QUANTUM 톤앤매너 — 신규 팔레트 토큰
   (전역 --c-q 는 유지, 신규 디자인은 --qc-* 사용)
   ========================================================= */
:root {
  --qc-lime: #CEFF00;   /* 시그니처 라임 (206,255,0) */
  --qc-cyan: #36C4FF;   /* 시그니처 시안 (54,196,255) */
  --qc-ink:  #0a0c0a;   /* 어트랙트 배경(블랙 17,17,17 계열) */
  --qc-grad: linear-gradient(90deg, #CEFF00, #36C4FF); /* 라임→시안 시그니처 */
}

/* === 메인 타이틀 = 프로그래머블 어트랙트 배경 ================= */
.m-title.qbrand {
  padding: 0;
  background:
    radial-gradient(1400px 900px at 50% 40%, rgba(206,255,0,.05), transparent 62%),
    radial-gradient(1100px 800px at 78% 84%, rgba(54,196,255,.05), transparent 60%),
    var(--qc-ink);
  overflow: hidden;
}
.qbrand-bg {
  position: absolute; inset: 0;
  width: 100%; height: 100%;
  display: block; z-index: 0;
}
.qbrand-stack {
  position: relative; z-index: 1;
  flex: 1;
  display: flex; flex-direction: column;
  align-items: center; justify-content: center;
  gap: var(--s3);
}
.qbrand-word {
  font-family: var(--ff-en);
  font-weight: 800;
  font-size: 176px;
  letter-spacing: -.03em;
  color: #fff;
  text-shadow: 0 0 90px rgba(255,255,255,.18), 0 0 44px rgba(206,255,0,.10);
}
.qbrand-sub {
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 34px;
  letter-spacing: .5em;
  text-indent: .5em;
  color: var(--c-fg-2);
}
.qbrand-cta {
  position: absolute; z-index: 1;
  left: 50%; bottom: 72px; transform: translateX(-50%);
  background: var(--qc-lime);
  color: #101510;
  font-family: var(--ff-en);
  font-weight: 700;
  font-size: 18px;
  letter-spacing: .01em;
  padding: 13px 28px;
  border-radius: 999px;
  box-shadow: 0 0 44px rgba(206,255,0,.35);
  white-space: nowrap;
}
.qbrand-ver {
  position: absolute; z-index: 1;
  right: 28px; bottom: 24px;
  font-family: var(--ff-mono);
  font-size: 13px;
  letter-spacing: .12em;
  color: var(--c-fg-4);
}

/* === 세로(터치) 타이틀 — 브랜드 어트랙트 ===================== */
.t-title { background: none; }            /* 캔버스가 비치도록 라디얼 제거 */
.t-brand {
  position: absolute; z-index: 2;
  top: 132px; left: 0; right: 0;
  text-align: center; pointer-events: none;
}
.t-brand-word {
  font-family: var(--ff-en); font-weight: 800;
  font-size: 100px; letter-spacing: -.03em; color: #fff;
  text-shadow: 0 0 64px rgba(255,255,255,.18), 0 0 32px rgba(206,255,0,.10);
}
.t-brand-sub {
  font-family: var(--ff-en); font-weight: 700;
  font-size: 24px; letter-spacing: .5em; text-indent: .5em;
  color: var(--c-fg-2); margin-top: 10px;
}

/* =========================================================
   HOME — Adaptive Lobby 컨셉  (Figma: PLAN A 히어로 / PLAN B 대시보드)
   기존 플로우 비파괴 · A/B 스킨 토글로 비교
   ========================================================= */
/* --- 공통 캔버스 --- */
.m-home, .t-home {
  position: absolute; inset: 0;
  background: #111; color: #fff;
  font-family: var(--ff-en); overflow: hidden;
}
.skin-b .m-home { padding: 40px; display: flex; align-items: center; }
.skin-b .t-home { padding: 32px; display: flex; align-items: center; }

/* --- PLAN B · 트레이닝 드릴 4카드 (Figma 첫 프레임 349:1006 / 415:1049) --- */
.b1 { width: 100%; }
.m-home .b1 { display: flex; gap: 20px; height: 820px; }
.t-home .b1 { display: grid; grid-template-columns: 1fr 1fr; gap: 20px; }
.b1-card {
  position: relative; background: #252525; padding: 30px; min-width: 0;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.m-home .b1-card { flex: 1 1 0; height: 100%; }
.t-home .b1-card { height: 800px; }
.b1-title { font-family: var(--ff-en); font-weight: 900; font-size: 32px; line-height: 1; color: #fff; }
.b1-group { font-family: var(--ff-en); font-weight: 900; font-size: 24px; line-height: 1; color: #656565; }
.b1-stat {
  position: relative; flex: 1 1 0; min-height: 0; width: 100%;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 18px; text-align: center;
}
.b1-stat-label { font-family: var(--ff-en); font-weight: 900; font-size: 18px; color: #656565; }
.b1-stat-big   { font-family: var(--ff-en); font-weight: 900; font-size: 72px; line-height: 1; color: #fff; }
.b1-stat-delta { font-family: var(--ff-en); font-weight: 900; font-size: 18px; color: #fff; }
.b1-stat-delta .ac { color: var(--c-q); }
.b1-stat-avg   { font-family: var(--ff-en); font-weight: 900; font-size: 18px; color: #666; }
.b1-empty-text { font-family: var(--ff-ko); font-weight: 800; font-size: 20px; letter-spacing: -1px; color: #656565; }

/* LONGGAME — 막대그래프 */
.b1-bars {
  flex: 0 0 auto; height: 190px; padding-top: 22px; border-top: 1px solid #3a3a3a;
  display: flex; align-items: flex-end; justify-content: center; gap: 26px;
}
.b1-bars i { width: 8px; background: var(--c-q); }

/* SHORTGAME — 원형 게이지 */
.b1-ring { position: absolute; left: 50%; top: 50%; transform: translate(-50%, -50%); width: 280px; height: 280px; pointer-events: none; }
.b1-stat--ring .b1-stat-mid { position: relative; z-index: 1; display: flex; flex-direction: column; align-items: center; gap: 18px; }

/* CLUB TEST — GRADE 실드 */
.b1-stat--shield { gap: 26px; }
.b1-shield {
  position: relative; width: 200px; height: 264px;
  background: linear-gradient(180deg, #36C4FF, #CEFF00);
  clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
  display: flex; flex-direction: column; align-items: center;
}
.b1-shield::before {
  content: ''; position: absolute; inset: 7px; background: #141414;
  clip-path: polygon(0 0, 100% 0, 100% 66%, 50% 100%, 0 66%);
}
.b1-shield-grade {
  position: relative; z-index: 1; margin-top: 16px;
  font-family: var(--ff-en); font-weight: 900; font-style: italic; font-size: 34px; letter-spacing: -2px;
  background: linear-gradient(90deg, #000, #4f4f4f);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.b1-shield-s {
  position: relative; z-index: 1; margin-top: 2px;
  font-family: var(--ff-en); font-weight: 900; font-style: italic; font-size: 140px; line-height: 1; letter-spacing: -8px;
  background: linear-gradient(180deg, #36C4FF, #CEFF00);
  -webkit-background-clip: text; background-clip: text; color: transparent;
}
.b1-shield-cap { color: #fff !important; }

/* --- PLAN A · 히어로 + 카드 스트립 --- */
.homea { position: absolute; inset: 0; overflow: hidden; }
.homea-wave { position: absolute; left: 50%; pointer-events: none; object-fit: cover; opacity: .9; }
.m-home .homea-wave { width: 2019px; height: 1268px; bottom: -300px; transform: translateX(-50%) rotate(-5.78deg); }
.t-home .homea-wave { width: 1501px; height: 844px;  bottom: -40px;  transform: translateX(-50%) rotate(-5.78deg); }
.homea-inner { position: absolute; inset: 0; padding: 60px; display: flex; flex-direction: column; }
.homea-spacer { flex: 1 1 0; min-height: 0; }
.homea-gap { flex: 0 0 20px; }
.t-home .homea-gap { flex-basis: 30px; }

/* 히어로 */
.homea-hero { position: relative; flex: 0 0 420px; width: 100%; overflow: hidden; }
.homea-watermark {
  position: absolute; left: 50%; top: 10px; transform: translateX(-50%);
  font-family: var(--ff-en); font-weight: 900; line-height: 1;
  font-size: 400px; letter-spacing: -20px; color: #fff; opacity: .10; white-space: nowrap;
}
.t-home .homea-watermark { font-size: 210px; letter-spacing: -10.5px; top: 105px; }
.homea-headline {
  position: absolute; left: 50%; top: 178px; transform: translateX(-50%);
  font-family: var(--ff-ko); font-weight: 900; line-height: 1;
  font-size: 64px; letter-spacing: -3.2px; color: #fff; white-space: nowrap;
}
.t-home .homea-headline { font-size: 48px; letter-spacing: -2.4px; top: 186px; }
.homea-cta { position: absolute; left: 50%; top: 323px; transform: translateX(-50%); display: flex; align-items: center; }
.homea-cta-text {
  height: 64px; padding: 0 30px; display: flex; align-items: center;
  background: var(--c-q); color: #000;
  font-family: var(--ff-en); font-weight: 900; font-size: 24px; white-space: nowrap;
}
.homea-cta-arrow {
  width: 64px; height: 64px; display: flex; align-items: center; justify-content: center;
  background: #e6e6e6; color: #000; font-size: 30px; font-weight: 900;
}

/* 드릴 탭 */
.homea-tabs { flex: 0 0 auto; display: flex; gap: 10px; justify-content: center; align-items: center; padding: 10px 0; }
.homea-tab {
  position: relative; width: 180px; height: 60px;
  display: flex; align-items: center; justify-content: center;
  border: 3px solid #363636;
  font-family: var(--ff-en); font-weight: 900; font-size: 20px; color: #fff; white-space: nowrap;
}
.homea-tab-latest {
  position: absolute; top: -9px; left: 50%; transform: translateX(-50%);
  font-size: 16px; font-weight: 900; color: var(--c-q); background: #111; padding: 0 4px;
}

/* 카드 스트립 */
.homea-strip { flex: 0 0 340px; display: flex; gap: 20px; width: 100%; }
.homea-strip--rows { flex: 1 1 auto; flex-direction: column; }
.homea-strip--rows .homea-row { display: flex; gap: 20px; flex: 1 1 0; min-height: 0; }
.homea-card {
  flex: 1 1 0; min-width: 0; height: 100%;
  background: rgba(39,39,39,.9); padding: 30px;
  display: flex; flex-direction: column; gap: 10px; overflow: hidden;
}
.m-home .homea-card { max-width: 340px; }
.homea-card-title { font-family: var(--ff-en); font-weight: 900; font-size: 24px; line-height: 1.1; color: #fff; }
.homea-card-group { font-family: var(--ff-en); font-weight: 900; font-size: 24px; line-height: 1.1; color: #656565; }

/* --- 진입 빌드업 애니메이션 (단계별 펼쳐짐) --- */
@keyframes homeRise { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: none; } }
@keyframes homeWaveIn { from { opacity: 0; } to { opacity: .85; } }
.m-home [data-reveal], .t-home [data-reveal] {
  animation: homeRise .5s cubic-bezier(.2,.7,.2,1) both;
}
.homea-wave { animation: homeWaveIn 1s ease both; }

/* --- 클릭 가능(실제 화면 이동) 인터랙션 --- */
.homea-tab, .homea-cta, .b1-card { cursor: pointer; }
.homea-tab { transition: border-color .15s, color .15s; }
.homea-tab:hover { border-color: var(--c-q); color: var(--c-q); }
.homea-cta { transition: filter .15s; }
.homea-cta:hover { filter: brightness(1.08); }
.b1-card { transition: background .15s; }
.b1-card:hover { background: #2e2e2e; }

/* --- 디테일 보정 --- */
.m-home .homea-wave { bottom: -260px; }                 /* 카드 뒤로 살짝 올림 */
.homea-wave { opacity: .85; }
.homea-tab-latest { line-height: 1; }                   /* LATEST 뱃지 정렬 */

/* =========================================================
   PLAN B · Frame 1791 풀 모드그리드 (로그인 유저 데이터 대시보드)
   각 모드 버튼 위에 다관점 추천 지표를 글랜서블하게 표시
   ========================================================= */
.homeb {
  position: absolute; inset: 0;
  display: flex; flex-direction: column;
  background:
    radial-gradient(1200px 700px at 15% 0%, rgba(54,196,255,.05), transparent 55%),
    radial-gradient(1000px 700px at 95% 100%, rgba(206,255,0,.045), transparent 55%),
    #111;
  font-family: var(--ff-en);
}

/* --- 헤더 바 (← BACK · Q · 유저칩 · 시계) --- */
.homeb-bar {
  flex: 0 0 auto;
  height: 84px;
  display: grid; grid-template-columns: 1fr auto 1fr; align-items: center;
  padding: 0 28px;
}
.homeb.is-touch .homeb-bar { height: 76px; padding: 0 22px; }
.homeb-bar-l { display: flex; align-items: center; }
.homeb-bar-r { display: flex; align-items: center; justify-content: flex-end; gap: 14px; }
.homeb-back {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--ff-en); font-weight: 800; font-size: 18px;
  letter-spacing: .04em; color: #fff;
  transition: color .15s;
}
.homeb-back:hover { color: var(--c-q); }
.homeb-logo {
  display: block; height: 46px; width: auto;
  border-radius: 9px;
  filter: drop-shadow(0 0 22px rgba(206,255,0,.3));
}
.homeb.is-touch .homeb-logo { height: 42px; }
.homeb-clock {
  font-family: var(--ff-en); font-weight: 700; font-size: 18px;
  letter-spacing: .08em; color: #c4ccd6; font-variant-numeric: tabular-nums;
}

/* 데이터 상태 토글 */
.homeb-state {
  display: inline-flex; gap: 3px;
  background: #1b1b1b; border-radius: 9px; padding: 3px;
  box-shadow: inset 0 0 0 1px #2c2c2c;
}
.homeb-state button {
  padding: 7px 13px; border-radius: 6px;
  font-family: var(--ff-ko); font-weight: 700; font-size: 13px;
  color: #8a8a8a; transition: background .15s, color .15s;
}
.homeb-state button.is-on { background: var(--c-q); color: #0a0d13; }

/* 유저 칩 */
.homeb-user {
  display: inline-flex; align-items: center; gap: 9px;
  padding: 7px 14px 7px 10px; border-radius: 999px;
  background: #1b1b1b; box-shadow: inset 0 0 0 1px #2c2c2c;
}
.homeb-user-ava {
  width: 26px; height: 26px; border-radius: 50%;
  display: grid; place-items: center;
  background: #2a2a2a; font-size: 14px;
}
.homeb-user.is-guest .homeb-user-ava { color: var(--c-fg-3); }
.homeb-user-name { font-family: var(--ff-ko); font-weight: 700; font-size: 15px; color: #fff; }
.homeb-user-hcp { font-family: var(--ff-en); font-weight: 700; font-size: 12px; letter-spacing: .04em; color: var(--c-q); }
.homeb-user.is-guest .homeb-user-hcp { color: var(--c-fg-3); }

/* --- 그리드 --- */
.homeb-grid {
  flex: 1 1 0; min-height: 0;
  display: grid; grid-template-columns: repeat(4, 1fr);
  gap: 14px; padding: 6px 28px 28px;
}
.homeb.is-touch .homeb-grid {
  grid-template-columns: 1fr 1fr;
  gap: 14px; padding: 6px 22px 28px;
  overflow-y: auto;
}
.homeb-col { display: flex; flex-direction: column; gap: 14px; min-height: 0; }
.homeb.is-touch .homeb-col { min-height: 0; }

/* --- 카드 --- */
.homeb-card {
  position: relative; overflow: hidden;
  border-radius: 4px;
  background: #242424;
  padding: 22px 24px;
  display: flex; flex-direction: column;
  min-height: 0;
  cursor: pointer;
  box-shadow: inset 0 0 0 1px rgba(255,255,255,.035);
  transition: background .15s, box-shadow .15s, transform .12s, filter .15s;
}
.homeb.is-touch .homeb-card { flex: 0 0 auto; min-height: 150px; padding: 22px; }
.homeb-card:not(.is-accent):hover { background: #2d2d2d; box-shadow: inset 0 0 0 1px rgba(255,255,255,.08); }
.homeb-card.is-accent:hover { filter: brightness(1.07); }
.homeb-card:active { transform: translateY(1px); }
.homeb-card-title { font-family: var(--ff-en); font-weight: 900; font-size: 27px; line-height: 1.04; color: #fff; }
.homeb-card-group { font-family: var(--ff-en); font-weight: 900; font-size: 15px; letter-spacing: .04em; color: #7c7c7c; margin-top: 3px; }
.homeb.is-touch .homeb-card-title { font-size: 23px; }

/* 화살표 어포던스 */
.homeb-arrow {
  position: absolute; right: 16px; bottom: 14px;
  width: 30px; height: 30px; border-radius: 50%;
  display: grid; place-items: center;
  background: rgba(255,255,255,.10); color: #fff;
  font-size: 15px; font-weight: 700;
  transition: background .15s, color .15s, transform .15s;
}
.homeb-card:hover .homeb-arrow { background: var(--c-q); color: #0a0d13; transform: translateX(2px); }

/* 지표 영역 (하단 정렬) */
.homeb-stat { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 4px; }
.homeb-stat-label { font-family: var(--ff-en); font-weight: 800; font-size: 14px; letter-spacing: .02em; color: #9a9a9a; }
.homeb-stat-mid { font-family: var(--ff-ko); font-weight: 700; font-size: 15px; color: #cdd4de; }
.homeb-stat-mid.homeb-accent { color: var(--c-q); }
.homeb-stat-rank { font-family: var(--ff-en); font-weight: 800; font-size: 14px; letter-spacing: .04em; color: var(--c-cyan); }
.homeb-stat-text { font-family: var(--ff-en); font-weight: 900; font-size: 44px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.homeb-stat-big { font-family: var(--ff-en); font-weight: 900; font-size: 62px; line-height: 1; letter-spacing: -.02em; color: #fff; }
.homeb-stat-big.is-accent { color: var(--c-q); }
.homeb-stat-big small { font-family: var(--ff-en); font-weight: 800; font-size: 22px; color: #9a9a9a; margin-left: 5px; letter-spacing: 0; }
.homeb-stat-foot { font-family: var(--ff-en); font-weight: 800; font-size: 14px; color: #cdd4de; }
.homeb-stat-foot .homeb-accent { color: var(--c-q); }
.homeb-stat-note { font-family: var(--ff-ko); font-weight: 600; font-size: 13px; color: #9a9a9a; }
.homeb.is-touch .homeb-stat-big { font-size: 52px; }

/* 빈 상태 (신규 유저) */
.homeb-empty { margin-top: auto; padding-top: 14px; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.homeb-empty-text { font-family: var(--ff-ko); font-weight: 700; font-size: 14px; line-height: 1.45; color: #8c8c8c; max-width: 90%; }
.homeb-cta {
  display: inline-flex; align-items: center; gap: 7px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--c-q); color: #0a0d13;
  font-family: var(--ff-ko); font-weight: 800; font-size: 13px;
}
.homeb-cta i { font-style: normal; font-weight: 900; }
.homeb-card:hover .homeb-cta { box-shadow: 0 0 22px rgba(206,255,0,.4); }

/* --- 액센트 배경 = Figma 실제 export 이미지 (색+그래픽 통째로) --- */
.homeb-card.is-accent {
  background-repeat: no-repeat;
  background-position: center;
  background-size: cover;
}
.homeb-card.is-accent .homeb-card-group { color: rgba(255,255,255,.58); }
.homeb-card.is-accent .homeb-stat-label,
.homeb-card.is-accent .homeb-stat-note  { color: rgba(255,255,255,.82); }
.homeb-card.is-accent .homeb-stat-mid,
.homeb-card.is-accent .homeb-stat-foot  { color: #fff; }

.homeb-card.t-long   { background-image: linear-gradient(180deg, rgba(4,12,24,.02), rgba(4,12,24,.30)), url(assets/figma/longgame-lines.png); }
.homeb-card.t-short  { background-image: linear-gradient(180deg, rgba(4,12,24,.02), rgba(4,12,24,.30)), url(assets/figma/shortgame-orbit.png); }
.homeb-card.t-multi  { background-image: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.24)),     url(assets/figma/multi-vector.png); }
.homeb-card.t-stroke { background-image: linear-gradient(180deg, rgba(0,0,0,.04), rgba(0,0,0,.26)),     url(assets/figma/stroke-wave.png); }
.homeb-card.t-dart   { background-image: linear-gradient(180deg, rgba(24,0,10,.04), rgba(24,0,10,.30)), url(assets/figma/dart-glow.png); }
.homeb-card.t-dart .homeb-stat-big { color: #fff; }

/* AI: 퍼플 베이스 + 하단 파티클 웨이브(웨이브가 이미지 하단에 위치) */
.homeb-card.t-ai {
  background-color: #4a31c6;
  background-image: linear-gradient(180deg, rgba(20,8,52,.08), rgba(20,8,52,.30)), url(assets/figma/ai-wave.png);
  background-repeat: no-repeat, no-repeat;
  background-position: center, center bottom;
  background-size: cover, 115% auto;
}
.homeb-card.t-ai .homeb-stat-text { color: #fff; text-shadow: 0 0 30px rgba(206,255,0,.25); }

/* 진입 빌드업 (homeRise 재사용) — .homeb-card 도 포함 */
.m-home .homeb-card[data-reveal], .t-home .homeb-card[data-reveal] {
  animation: homeRise .5s cubic-bezier(.2,.7,.2,1) both;
}

/* =========================================================
   COURSE TRAINING · Figma CT1(1920×1080) / CT2(1080×1920) — 픽셀 정밀 재현
   토큰: bg #111 · 셀/카드 #1b1b1b·#252525·#363636 · PAR #00ffff · 로고 실사 · 폰트 Pretendard+Poppins
   ========================================================= */
/* CT1(메인)은 Figma 그대로 1080 풀높이 → 메인 상단 시스템바 숨김 */
body.ct-main-full .main .m-top { display: none; }
/* CT2(콘솔) 하단 CTA — 라운드 시작 (Figma 500×82 센터) */
body.ct-main-full .touch .t-foot { padding: 22px 30px 40px; justify-content: center; }
body.ct-main-full .touch .t-foot .btn { flex: 0 0 auto; width: 500px; height: 76px; font-size: 28px; font-weight: 800; }

.ct {
  --ct-num: 'Poppins', 'Inter', var(--ff-en);
  flex: 1; min-height: 0;
  display: flex; flex-direction: column;
  position: relative;
  background: #111;
  color: #fff;
  font-family: var(--ff-ko);
}
.ct [data-reveal] { animation: homeRise .5s cubic-bezier(.2,.7,.2,1) both; }
.ct img { display: block; }

/* --- 공통 헤더 (로고 + 코스명 + 그라디언트 바 + 워터마크) --- */
.ct-head { position: relative; display: flex; align-items: center; flex: 0 0 auto; }
.ct-head-logo { flex: 0 0 auto; position: relative; z-index: 1; display: grid; place-items: center; background: #fff; border-radius: 50%; overflow: hidden; }
.ct-head-logo img { width: 78%; height: 78%; object-fit: contain; }
.ct-head-name { position: relative; z-index: 1; margin-left: 24px; font-weight: 900; color: #fff; white-space: nowrap; }
.ct-head-bar { position: relative; z-index: 1; flex: 1; height: 30px; margin: 0 16px; border-radius: 4px; background: linear-gradient(to left, #36c4ff, #ceff00); }
.ct-head-clock { position: relative; z-index: 1; flex: 0 0 auto; font-family: var(--ct-num); font-weight: 700; color: #fff; text-align: right; }
.ct-head-wm { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 0; font-family: var(--ct-num); font-weight: 700; font-size: 200px; line-height: 1; letter-spacing: -20px; color: #1b1b1b; white-space: nowrap; pointer-events: none; }

/* --- 공통 티마커 --- */
.ct-tees { display: flex; gap: 16px; align-items: center; }
.ct-tee { display: inline-flex; align-items: center; gap: 8px; }
.ct-tee-m { width: 18px; height: 18px; display: grid; place-items: center; font-family: var(--ct-num); font-weight: 700; font-size: 14px; letter-spacing: -.7px; line-height: 1; }
.ct-tee-m--w { background: #ddd; color: #151515; }
.ct-tee-m--r { background: #ff275f; color: #fff; }
.ct-tee b { font-family: var(--ct-num); font-weight: 700; font-size: 16px; letter-spacing: -.8px; color: #d7d7d7; }

/* --- 공통 스코어카드 (Out/In · PAR, 합계 없음) --- */
.ct-sc-top { display: flex; align-items: center; justify-content: space-between; }
.ct-sc-mode { font-weight: 900; font-size: 18px; letter-spacing: -.9px; color: #fff; }
.ct-sc-grid { display: flex; flex-direction: column; gap: 2px; }
.ct-sc-row { display: grid; grid-template-columns: var(--ct-lab, 120px) repeat(9, 1fr); gap: 2px; flex: 1; }
.ct-sc-row > span { display: grid; place-items: center; font-family: var(--ct-num); font-weight: 700; font-size: 20px; letter-spacing: -1px; }
.ct-sc-row.is-hole > span { background: #1b1b1b; color: #acacac; }
.ct-sc-row.is-par  > span { background: #252525; color: #00ffff; }
.ct-sc-lab { font-family: var(--ff-ko) !important; font-weight: 900; }
.ct-sc-row.is-par .ct-sc-lab { font-family: var(--ct-num) !important; font-weight: 800; }

/* --- 공통 별점 --- */
.ct-rates { display: flex; gap: 30px; }
.ct-rates--center { justify-content: center; }
.ct-rate { display: inline-flex; align-items: center; gap: 8px; }
.ct-rate em { font-style: normal; font-family: var(--ff-ko); font-weight: 900; font-size: 16px; letter-spacing: -.8px; color: #999; }
.ct-stars { display: inline-flex; gap: 2px; }
.ct-stars i { width: 16px; height: 16px; background: #ceff00; clip-path: polygon(50% 0,61% 35%,98% 35%,68% 57%,79% 91%,50% 70%,21% 91%,32% 57%,2% 35%,39% 35%); }
.ct-stars i:not(.on) { background: #555; }

/* ============ CT1 · 메인 스크린 (1920×1080) ============ */
.ct--main { padding: 50px 200px 60px; }
.ct--main .ct-head { height: 62px; margin-bottom: 20px; }
.ct--main .ct-head-logo { width: 60px; height: 60px; }
.ct--main .ct-head-name { font-size: 50px; }
.ct--main .ct-head-clock { width: 110px; font-size: 36px; }

.ct1-body { flex: 0 0 auto; height: 574px; margin-bottom: 40px; display: grid; grid-template-columns: 1190px 290px; gap: 40px; }
.ct1-left { display: flex; flex-direction: column; gap: 54px; padding-top: 60px; min-width: 0; }
.ct1-sc { display: grid; grid-template-columns: 460px 710px; gap: 20px; height: 230px; }
.ct-photo { overflow: hidden; background: #1b1b1b; }
.ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.ct1-sc-panel { --ct-lab: 120px; display: flex; flex-direction: column; gap: 10px; }
.ct1-sc-panel .ct-sc-top { height: 27px; }
.ct1-sc-panel .ct-sc-grid { flex: 1; }

.ct1-opts { display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(4, 1fr); gap: 3px; height: 194px; }
.ct-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; background: #1b1b1b; padding: 0 20px; }
.ct-opt span { font-family: var(--ff-ko); font-weight: 500; font-size: 18px; color: #999; }
.ct-opt b { font-family: var(--ff-ko); font-weight: 900; font-size: 18px; color: #fff; }

.ct1-right { display: flex; flex-direction: column; gap: 16px; }
.ct-qr { width: 290px; height: 290px; flex: 0 0 auto; background: #fff; padding: 17px; }
.ct-qr img { width: 100%; height: 100%; }
.ct-qr-cap { font-family: var(--ff-ko); font-weight: 500; font-size: 16px; line-height: 1.42; color: #999; text-align: center; }
.ct-players { display: flex; flex-direction: column; gap: 3px; }
.ct-pl { height: 36px; background: #1b1b1b; }
.ct-pl.is-filled { background: #363636; display: flex; align-items: center; gap: 8px; padding-right: 10px; }
.ct-pl-av { width: 36px; height: 36px; object-fit: cover; flex: 0 0 auto; }
.ct-pl-m, .ct-pl-t { width: 18px; height: 18px; flex: 0 0 auto; display: grid; place-items: center; font-family: var(--ct-num); font-weight: 700; font-size: 14px; letter-spacing: -.7px; }
.ct-pl-m { background: #000; color: #fff; }
.ct-pl-t { background: #ddd; color: #000; }
.ct-pl-name { margin-left: 2px; font-family: var(--ff-ko); font-weight: 900; font-size: 18px; color: #fff; }

.ct1-cards { flex: 0 0 auto; height: 274px; display: grid; grid-template-columns: repeat(3, 1fr); grid-template-rows: repeat(2, 1fr); gap: 8px 7px; }
.ct-c1 { display: flex; align-items: center; gap: 24px; padding: 22px 24px; background: #363636; text-align: left; }
.ct-c1.is-on { background: #d2d2d2; }
.ct-c1.is-empty { background: #252525; }
.ct-c1-logo { width: 76px; height: 76px; flex: 0 0 auto; background: #fff; padding: 3px; display: grid; place-items: center; }
.ct-c1-logo img { width: 100%; height: 100%; object-fit: contain; }
.ct-c1-body { display: flex; flex-direction: column; gap: 16px; min-width: 0; }
.ct-c1-name { font-family: var(--ff-ko); font-weight: 900; font-size: 26px; color: #fff; }
.ct-c1.is-on .ct-c1-name { color: #000; }
.ct-c1.is-on .ct-rate em { color: #363636; }
.ct-c1.is-on .ct-stars i:not(.on) { background: #b3b3b3; }

/* ============ CT2 · 터치 콘솔 (1080×1920) ============ */
.ct--touch { display: flex; flex-direction: column; padding: 8px 30px 0; gap: 16px; overflow: hidden; }
.ct--touch .ct-head { height: 76px; }
.ct--touch .ct-head-logo { width: 76px; height: 76px; }
.ct--touch .ct-head-name { font-size: 48px; }
.ct--touch .ct-head-bar { flex: 1; }

.ct2-sc { flex: 0 0 auto; display: grid; grid-template-columns: 440px 1fr; gap: 20px; height: 230px; }
.ct2-sc-panel { --ct-lab: 100px; display: flex; flex-direction: column; gap: 10px; min-width: 0; }
.ct2-sc-panel .ct-sc-top { justify-content: flex-end; height: 27px; }
.ct2-sc-panel .ct-sc-grid { flex: 1; }

.ct2-opts { flex: 0 0 auto; display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px 6px; }
.ct-holes { display: flex; }
.ct-holes button { flex: 1; height: 48px; font-family: var(--ff-ko); font-weight: 700; font-size: 17px; color: #999; background: #1b1b1b; }
.ct-holes button.is-on { background: #fff; color: #111; }
.ct-topt { display: flex; align-items: center; gap: 8px; height: 48px; min-width: 0; background: #1b1b1b; padding: 0 16px; }
.ct-topt span { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-family: var(--ff-ko); font-weight: 500; font-size: 17px; color: #999; }
.ct-topt b { flex: 0 0 auto; font-family: var(--ff-ko); font-weight: 900; font-size: 17px; color: #fff; white-space: nowrap; }
.ct-topt-ar { flex: 0 0 auto; width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-top: 6px solid #999; }
.ct-topt.is-empty { background: transparent; }

.ct2-search { flex: 0 0 auto; display: flex; justify-content: center; }
.ct2-search-box { width: 560px; height: 48px; display: flex; align-items: center; gap: 10px; background: #1b1b1b; padding: 0 6px 0 20px; }
.ct2-search-box > span { flex: 1; font-family: var(--ff-ko); font-size: 18px; color: #999; }
.ct2-search-ic { width: 24px; height: 24px; color: #999; flex: 0 0 auto; }
.ct2-search-menu { width: 40px; height: 40px; flex: 0 0 auto; display: grid; place-items: center; background: #e6e6e6; color: #111; }
.ct2-search-menu svg { width: 22px; height: 22px; }

.ct2-cards { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; }
.ct-c2 { position: relative; overflow: hidden; display: flex; flex-direction: column; align-items: center; gap: 12px; padding: 0 16px 16px; background: #363636; text-align: center; }
.ct-c2.is-on { box-shadow: inset 0 0 0 3px #ceff00; }
.ct-c2-badge { position: absolute; top: 0; right: 0; z-index: 2; padding: 5px 14px; background: #ceff00; color: #111; font-family: var(--ff-en); font-weight: 800; font-size: 14px; letter-spacing: .03em; }
.ct-c2-logo { width: 76px; height: 76px; flex: 0 0 auto; margin-top: 40px; background: #fff; padding: 3px; display: grid; place-items: center; }
.ct-c2-logo img { width: 100%; height: 100%; object-fit: contain; }
.ct-c2-name { font-family: var(--ff-ko); font-weight: 900; font-size: 24px; color: #fff; }
.ct-c2 .ct-rates { gap: 20px; }
.ct-c2-rec { margin-top: auto; align-self: flex-end; display: inline-flex; align-items: center; gap: 4px; }
.ct-c2-rec b { font-family: var(--ct-num); font-weight: 700; font-size: 16px; color: #fff; margin-right: 4px; }
.ct-rec-av { width: 22px; height: 22px; border-radius: 50%; background: #555 center/cover no-repeat; }
.ct-c2-rec .ct-rec-av:nth-of-type(1) { background-image: url(assets/figma/ct-av-1.png); }
.ct-c2-rec .ct-rec-av:nth-of-type(2) { background-image: url(assets/figma/ct-av-2.png); }
.ct-rec-best { width: 22px; height: 22px; display: grid; place-items: center; background: #264d8f; color: #fff; font-family: var(--ff-ko); font-weight: 700; font-size: 12px; }

.ct2-pager { flex: 0 0 auto; position: relative; display: flex; align-items: center; justify-content: center; gap: 6px; height: 69px; }
.ct2-pg-ic, .ct2-pg-n { width: 48px; height: 48px; display: grid; place-items: center; background: #1b1b1b; color: #999; font-family: var(--ct-num); font-weight: 700; font-size: 18px; }
.ct2-pg-ic { font-size: 22px; }
.ct2-pg-ic:disabled { opacity: .3; }
.ct2-pg-n.is-on { background: #fff; color: #111; }
.ct2-random { position: absolute; right: 0; display: inline-flex; align-items: center; gap: 8px; height: 48px; padding: 0 20px; background: #363636; color: #fff; font-family: var(--ff-ko); font-weight: 700; font-size: 16px; }
.ct2-random svg { width: 18px; height: 18px; }

/* ===== STROKE (스트로크 스크린/콘솔) — CT 레이아웃 재사용, 차이만 override ===== */
.ct--stroke .ct-head-wm { letter-spacing: -16px; }
/* 스크린: QR/플레이어 열 제거 → 단일 컬럼. 설정 요약이 콘솔 상태를 실시간 반영 */
.ct--main.ct--stroke .ct1-body { grid-template-columns: 1fr; }
.ct--main.ct--stroke .ct1-left { gap: 34px; padding-top: 34px; }
.ct--main.ct--stroke .ct1-sc { grid-template-columns: 620px 1fr; height: 264px; }
.ct--main.ct--stroke .ct1-opts { grid-template-columns: repeat(4, 1fr); grid-template-rows: repeat(3, 1fr); height: 214px; }
/* 콘솔: 9/18홀 한 줄 전체 + 18홀 잠금(디폴트 플랜) */
.ct--stroke .ct-holes { grid-column: 1 / -1; }
.ct-hole18 { display: inline-flex; align-items: center; justify-content: center; gap: 6px; }
.ct-hole18 svg { width: 16px; height: 16px; }
.ct-holes button.is-locked { color: #6a6a6a; }

/* =========================================================
   MULTIPLAY (Figma 멀티플레이 스크린/콘솔 + 방 만들기 팝업 + CC변경)
   1인 로그인 기준(멀티 QR·플레이어 리스트 생략) · 9홀 고정
   ========================================================= */
.mp { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; font-family: var(--ff-ko); background: #111; }
.mp, .mp * { box-sizing: border-box; }
.mp img { display: block; }
.mp--main { padding: 46px 120px 50px; }
.mp--touch { padding: 8px 30px 30px; gap: 16px; overflow: hidden; }

/* 워터마크 헤더 */
.mp-head { position: relative; flex: 0 0 auto; display: flex; align-items: center; overflow: hidden; }
.mp--main .mp-head { height: 70px; margin-bottom: 30px; }
.mp--touch .mp-head { height: 76px; }
.mp-head-tit { position: relative; z-index: 1; font-weight: 900; font-size: 44px; white-space: nowrap; }
.mp--main .mp-head-tit { font-size: 50px; }
.mp-head-bar { position: relative; z-index: 1; flex: 1; height: 30px; margin: 0 16px; border-radius: 4px; background: linear-gradient(to left, #36c4ff, #ceff00); }
.mp-head-clock { position: relative; z-index: 1; flex: 0 0 auto; width: 110px; text-align: right; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 36px; }
.mp-head-wm { position: absolute; left: 0; top: 50%; transform: translateY(-50%); z-index: 0; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 190px; line-height: 1; letter-spacing: -14px; color: #1b1b1b; white-space: nowrap; pointer-events: none; }

/* 빈 상태 */
.mp-empty { flex: 1 1 auto; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; min-height: 0; }
.mp-empty-ico { width: 84px; height: 84px; color: #6a6a6a; }
.mp-empty-ico svg { width: 100%; height: 100%; }
.mp-empty-tx { text-align: center; font-size: 22px; font-weight: 600; line-height: 1.5; color: #8a8a8a; }

/* 스크린: 빈 방 슬롯 */
.mp--main .mp-slots { flex: 0 0 auto; height: 180px; display: grid; grid-template-columns: repeat(5, 1fr); gap: 8px; }
.mp-slot { background: #1b1b1b; }

/* 콘솔: 필터/검색 + 방 목록 + 페이저 */
.mp-filter { flex: 0 0 auto; display: flex; gap: 10px; }
.mp-tabs { display: flex; gap: 4px; }
.mp-tabs button { height: 56px; padding: 0 26px; font-family: var(--ff-ko); font-weight: 700; font-size: 18px; color: #999; background: #1b1b1b; }
.mp-tabs button.is-on { background: #e6e6e6; color: #111; }
.mp-search { flex: 1; height: 56px; display: flex; align-items: center; gap: 10px; padding: 0 20px; background: #1b1b1b; color: #999; }
.mp-search span { flex: 1; font-size: 18px; }
.mp-search svg { width: 24px; height: 24px; }
.mp-list { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 8px; }
.mp-row { flex: 1; min-height: 0; background: #1b1b1b; }
.mp-pager { flex: 0 0 auto; }
.mp-foot { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; width: 100%; }

/* 스크린: 방 만들기 미리보기 */
.mp-rs-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 460px 1fr; gap: 44px; }
.mp-rs-course { display: flex; flex-direction: column; gap: 20px; }
.mp-rs-course .ct-photo { height: 260px; overflow: hidden; background: #1b1b1b; }
.mp-rs-course .ct-photo img { width: 100%; height: 100%; object-fit: cover; }
.mp-cc-card { display: flex; align-items: center; gap: 16px; }
.mp-rs-holes { display: flex; align-items: center; gap: 20px; }
.mp-rs-rules { display: flex; flex-direction: column; gap: 14px; min-width: 0; }
.mp-rs-sec { font-size: 20px; font-weight: 700; color: #ccc; }
.mp-rs-opts { grid-template-columns: repeat(2, 1fr) !important; grid-template-rows: none !important; grid-auto-rows: 46px; height: auto !important; }

/* 코스 카드(공용) */
.mp-cc-logo { width: 60px; height: 60px; flex: 0 0 auto; background: #fff; padding: 3px; display: grid; place-items: center; }
.mp-cc-logo img { width: 100%; height: 100%; object-fit: contain; }
.mp-cc-info { display: flex; flex-direction: column; gap: 8px; min-width: 0; }
.mp-cc-info b { font-size: 22px; font-weight: 900; }
.mp-holefix { display: inline-flex; align-items: center; justify-content: center; height: 52px; padding: 0 44px; background: #1b1b1b; color: #999; font-family: var(--ff-ko); font-weight: 700; font-size: 18px; }
.mp-holefix.is-on { background: #fff; color: #111; }

/* 방 만들기 콘솔급 팝업 */
.mp-room-pop { position: absolute; inset: 0; z-index: 75; background: #111; }
.mp-room-pop[hidden] { display: none; }
.mp-rc { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 30px 0; color: #fff; font-family: var(--ff-ko); overflow: hidden; }
.mp-rc, .mp-rc * { box-sizing: border-box; }
.mp-rc-top { flex: 0 0 auto; height: 56px; display: flex; align-items: center; gap: 12px; margin-top: 10px; }
.mp-rc-back { display: inline-flex; align-items: center; gap: 8px; height: 56px; padding: 0 22px; background: #1b1b1b; color: #fff; font-size: 18px; font-weight: 600; }
.mp-rc-back svg { width: 20px; height: 20px; }
.mp-rc-sp { flex: 1; }
.mp-rc-home { width: 56px; height: 56px; flex: 0 0 auto; display: grid; place-items: center; background: #e6e6e6; color: #111; }
.mp-rc-home svg { width: 30px; height: 30px; }
.mp-rc-clock { flex: 0 0 auto; width: 104px; height: 56px; display: grid; place-items: center; background: #e6e6e6; color: #111; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 26px; }
.mp-head--rc { flex: 0 0 auto; height: 68px; margin: 8px 0 14px; }
.mp-rc-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.mp-rc-line { display: flex; align-items: flex-start; gap: 20px; }
.mp-rc-lab { flex: 0 0 120px; padding-top: 14px; font-size: 18px; color: #ccc; }
.mp-rc-field { flex: 1; min-width: 0; }
.mp-rc-input { height: 52px; display: flex; align-items: center; padding: 0 18px; background: #1b1b1b; font-size: 18px; color: #fff; }
.mp-rc-pw { letter-spacing: 4px; }
.mp-rc-hint { margin: 8px 0 10px; font-size: 15px; color: #777; }
.mp-rc-check { display: inline-flex; align-items: center; gap: 10px; font-size: 18px; color: #ccc; }
.mp-rc-check i { position: relative; width: 26px; height: 26px; flex: 0 0 auto; background: #1b1b1b; box-shadow: inset 0 0 0 1px #444; }
.mp-rc-check.is-on i { background: #ceff00; box-shadow: none; }
.mp-rc-check.is-on i::after { content: '✓'; position: absolute; inset: 0; display: grid; place-items: center; color: #111; font-size: 18px; font-weight: 900; }
.mp-rc-sec { margin-top: 8px; font-size: 18px; font-weight: 700; color: #ccc; }
.mp-rc-grid { grid-template-columns: 1fr 1fr !important; gap: 8px !important; }
.mp-rc-cc { display: flex; align-items: center; gap: 16px; height: 84px; padding: 0 20px; background: #1b1b1b; }
.mp-rc-cc .mp-cc-info { flex: 1; }
.mp-cc-change { flex: 0 0 auto; height: 52px; padding: 0 26px; background: #e6e6e6; color: #111; font-size: 18px; font-weight: 700; }
.mp-rc-holerow { display: flex; }
.mp-rc-foot { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.4fr; gap: 16px; padding: 14px 0 16px; }
.mp-rc-foot .btn { height: 88px; font-size: 26px; font-weight: 800; }

/* CC 변경(팝업 내 코스 선택) */
.mp-cc-search { margin-bottom: 12px; }
.mp-cc-cards { margin-bottom: 12px; }
.mp-cc-pager { flex: 0 0 auto; }

/* 방 입장 — 브라우즈 방 리스트 행(생성된 방) */
.mp-list--rooms { overflow-y: auto; }
.mp-lrow { flex: 0 0 auto; display: flex; align-items: center; gap: 18px; min-height: 96px; padding: 0 22px; background: #1b1b1b; text-align: left; color: #fff; }
.mp-lrow-code { flex: 0 0 auto; font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 26px; color: #ceff00; letter-spacing: 1px; }
.mp-lrow-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 6px; }
.mp-lrow-body b { font-size: 22px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-lrow-body span { font-size: 15px; color: #999; }
.mp-lrow-go { flex: 0 0 auto; font-size: 18px; font-weight: 700; color: #ceff00; }

/* 방 입장 — 콘솔(팝업) */
.mp-en { position: absolute; inset: 0; display: flex; flex-direction: column; padding: 8px 30px 0; color: #fff; font-family: var(--ff-ko); overflow: hidden; }
.mp-en, .mp-en * { box-sizing: border-box; }
.mp-en-bar { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; height: 60px; }
.mp-en-code { flex: 0 0 auto; font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 32px; color: #ceff00; letter-spacing: 1px; }
.mp-en-lock { flex: 0 0 auto; width: 22px; height: 22px; color: #bbb; }
.mp-en-lock svg { width: 100%; height: 100%; }
.mp-en-title { min-width: 0; font-size: 24px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-en-sp { flex: 1; }
.mp-en-pw { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 10px; height: 42px; padding: 0 16px; background: #1b1b1b; font-size: 16px; }
.mp-en-pw em { color: #999; font-style: normal; }
.mp-en-pw b { font-family: 'Poppins', var(--ff-en); color: #ceff00; }
.mp-en-sub { flex: 0 0 auto; display: flex; gap: 28px; margin: 4px 0 12px; font-size: 16px; }
.mp-en-sub em { color: #999; font-style: normal; margin-right: 8px; }
.mp-en-sub b { font-weight: 700; }
.mp-en-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 10px; padding-bottom: 8px; }
.mp-en-note { margin-top: 6px; padding: 14px 18px; background: #1b1b1b; color: #999; font-size: 15px; }

/* 플레이어 리스트 — 1인 1행 + 개별 강퇴(방장) */
.mp-plist { display: flex; flex-direction: column; gap: 8px; }
.mp-prow { display: flex; align-items: center; gap: 16px; height: 76px; padding: 0 18px; background: #1b1b1b; }
.mp-prow.is-me { box-shadow: inset 0 0 0 2px #ceff00; }
.mp-prow-av { width: 48px; height: 48px; flex: 0 0 auto; display: grid; place-items: center; border-radius: 50%; background: #333; color: #ceff00; font-weight: 800; font-size: 22px; }
.mp-prow.is-host .mp-prow-av { background: #ceff00; color: #111; }
.mp-prow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.mp-prow-name { font-size: 20px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.mp-prow-name em { color: #ceff00; font-style: normal; font-size: 15px; }
.mp-prow-hcp { font-size: 14px; color: #999; }
.mp-prow-badge { flex: 0 0 auto; height: 34px; padding: 0 16px; display: inline-flex; align-items: center; font-size: 15px; font-weight: 700; color: #999; background: #242424; }
.mp-prow-badge.is-ready { color: #111; background: #ceff00; }
.mp-prow-badge.is-host { color: #111; background: #e6e6e6; }
.mp-prow-kick { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; background: #2a1414; color: #ff6a6a; }
.mp-prow-kick svg { width: 22px; height: 22px; }
.mp-prow-kick:active { background: #ff5a5a; color: #fff; }
.mp-prow-kick-sp { width: 44px; flex: 0 0 auto; }

/* 게임설정 탭 — 참가자 읽기전용 옵션 */
.ct-topt.is-readonly { opacity: .55; }
.ct-topt.is-readonly .ct-topt-ar { display: none; }

/* 하단 탭(플레이어/게임설정) + 라운드 시작 */
.mp-en-tabs { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 8px; }
.mp-en-tab { height: 64px; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: var(--ff-ko); font-weight: 800; font-size: 22px; color: #999; background: #1b1b1b; }
.mp-en-tab.is-on { color: #111; background: #ceff00; }
.mp-en-tab.is-locked { color: #555; background: #161616; }
.mp-en-tab-lock { display: inline-flex; width: 20px; height: 20px; }
.mp-en-tab-lock svg { width: 100%; height: 100%; }
.mp-en-start { flex: 0 0 auto; height: 88px; margin: 12px 0 16px; font-size: 26px; font-weight: 800; }
.mp-en-start.is-wait { display: grid; place-items: center; background: #1b1b1b; color: #666; }

/* 방 입장 — 스크린(메인, 뷰 전용). 1인 로그인이라 QR·로그인 리스트 없음 */
.mp-en-sbar { flex: 0 0 auto; display: flex; align-items: center; gap: 24px; height: 70px; margin-bottom: 24px; font-size: 22px; }
.mp-en-sbar .mp-en-code { font-size: 46px; }
.mp-en-sbar .mp-en-lock { width: 30px; height: 30px; }
.mp-en-sbar .mp-en-title { font-size: 32px; }
.mp-en-tag { flex: 0 0 auto; }
.mp-en-tag em { color: #999; font-style: normal; margin-right: 10px; }
.mp-en-tag b { font-weight: 700; color: #fff; }
.mp-en-sbar .mp-en-tag b { color: #ceff00; }
.mp-en-screen { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 44px; }
.mp-en-scol, .mp-en-gcol { display: flex; flex-direction: column; gap: 16px; min-height: 0; }
.mp-en-scol-h { flex: 0 0 auto; font-size: 22px; font-weight: 700; color: #ccc; }
.mp-en-scol-h b { color: #ceff00; }
.mp-plist--screen { flex: 1 1 auto; min-height: 0; overflow-y: auto; }
.mp-plist--screen .mp-prow { height: 88px; }
.mp-en-gcol .mp-cc-card { flex: 0 0 auto; }
.mp-en-gcol .mp-holefix { margin-left: auto; }


/* =========================================================
   DART (Figma 다트 스크린/콘솔) — 룰 브리핑. 1인 로그인이라 게임타입 선택·
   플레이어 접속창·QR/로그인 리스트 제거, 콘솔은 룰 표시 + 난이도 + 라운드 시작.
   ========================================================= */
.dart { position: absolute; inset: 0; display: flex; flex-direction: column; color: #fff; font-family: var(--ff-ko); background: #111; }
.dart, .dart * { box-sizing: border-box; }
.dart img { display: block; }
.dart--main { padding: 46px 120px 50px; }
.dart--touch { padding: 8px 30px 26px; }
.dart-head { flex: 0 0 auto; }
.dart--main .dart-head { height: 70px; margin-bottom: 34px; }
.dart--main .dart-head .mp-head-tit { font-size: 50px; }
.dart--touch .dart-head { height: 62px; margin-bottom: 14px; }

/* 공통 요소 */
.dart-sec { font-size: 20px; font-weight: 700; color: #ccc; }
.dart--touch .dart-sec { font-size: 18px; }
.dart-tbl { width: 100%; border-collapse: separate; border-spacing: 4px; table-layout: fixed; }
.dart-tbl th, .dart-tbl td { height: 52px; background: #1b1b1b; text-align: center; font-size: 17px; font-weight: 700; color: #eaeaea; }
.dart-tbl th:first-child { color: #8f8f8f; }
.dart-tbl-hl th:first-child, .dart-tbl-hl td { color: #ceff00; font-weight: 800; }
.dart-set { display: grid; grid-template-columns: 1fr 1fr; gap: 0 44px; margin: 2px 0; }
.dart-set-row { display: flex; justify-content: space-between; align-items: center; height: 46px; padding: 0 4px; border-bottom: 1px solid #242424; }
.dart-set-row span { font-size: 16px; color: #a8a8a8; }
.dart-set-row b { font-size: 16px; font-weight: 800; }
.dart-tip { display: flex; align-items: center; gap: 16px; margin-top: 4px; }
.dart-tip-lab { flex: 0 0 auto; font-family: 'Poppins', var(--ff-en); font-style: italic; font-weight: 800; font-size: 26px; color: #36c4ff; border-left: 5px solid #36c4ff; padding-left: 12px; }
.dart-tip-tx { flex: 1; min-width: 0; padding: 13px 20px; background: linear-gradient(90deg, #1f6ae0, #2f8bff); font-size: 16px; font-weight: 600; }

/* 스크린 — 좌 경기장 / 우 룰 (로그인·플레이어 그리드 없음) */
.dart-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 440px minmax(0, 1fr); gap: 56px; }
.dart-venue { display: flex; flex-direction: column; }
.dart-venue-img { height: 300px; background: #1b1b1b; overflow: hidden; }
.dart-venue-img img { width: 100%; height: 100%; object-fit: cover; }
.dart-venue-name { margin-top: 18px; font-size: 26px; font-weight: 800; }
.dart-rules { display: flex; flex-direction: column; gap: 14px; min-width: 0; }

/* 콘솔 — 같은 룰 세로 배치 + 난이도 선택 */
.dart-tbody { flex: 1 1 auto; min-height: 0; overflow-y: auto; display: flex; flex-direction: column; gap: 12px; padding-bottom: 8px; }
.dart-venue-strip { flex: 0 0 auto; display: flex; align-items: center; gap: 14px; height: 80px; padding: 0 16px; background: #1b1b1b; }
.dart-venue-strip img { width: 120px; height: 64px; object-fit: cover; flex: 0 0 auto; }
.dart-venue-strip span { font-size: 20px; font-weight: 800; }
.dart-diffs { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.dart-diff { height: 62px; background: #1b1b1b; color: #999; font-family: var(--ff-ko); font-weight: 700; font-size: 18px; }
.dart-diff.is-on { background: #ceff00; color: #111; }


/* =========================================================
   RANGE · 인게임 연습장 (Figma qr_long/shot/putt) — 프레임 이미지 풀블리드
   LONGGAME/SHORTGAME/PUTTING → 곧바로 인게임. Unity 렌더/카메라라 프레임을 이미지로 표시.
   ========================================================= */
body.range-full .main .m-top { display: none; }
body.range-full .touch .t-top,
body.range-full .touch .t-foot { display: none; }
.range { flex: 1; min-height: 0; position: relative; background: #000; overflow: hidden; }
.range-img { width: 100%; height: 100%; object-fit: cover; display: block; }
.range-back { position: absolute; top: 0; left: 0; width: 320px; height: 92px; background: transparent; cursor: pointer; }

/* =========================================================
   롱게임 인게임 콘솔 (Figma qr_long2) — 인터랙티브 HTML
   스탯 그리드(데이터드리븐)·시각화(이미지+오버레이)·컨트롤·탭
   ========================================================= */
.lc { height: 100%; display: flex; flex-direction: column; gap: 14px; padding: 30px 30px 50px; background: #111; color: #fff; font-family: var(--ff-ko); overflow: hidden; }
.lc, .lc * { box-sizing: border-box; }

/* 상단바 */
.lc-top { flex: 0 0 auto; height: 56px; display: flex; align-items: center; gap: 20px; }
.lc-back { display: inline-flex; align-items: center; gap: 6px; color: #999; font-size: 20px; font-weight: 600; }
.lc-back svg { width: 22px; height: 22px; }
.lc-status { display: inline-flex; align-items: center; gap: 10px; color: #ceff00; font-family: var(--ff-en); font-weight: 700; font-size: 22px; }
.lc-status i { width: 10px; height: 10px; border-radius: 50%; background: #ceff00; box-shadow: 0 0 10px #ceff00; }
.lc-top-r { margin-left: auto; display: inline-flex; align-items: center; gap: 16px; }
.lc-set { color: #999; }
.lc-set svg { width: 28px; height: 28px; }
.lc-clock { font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 30px; color: #fff; }

/* 타이틀 + 워터마크 */
.lc-title { flex: 0 0 auto; position: relative; height: 106px; display: flex; align-items: flex-end; overflow: hidden; }
.lc-title-wm { position: absolute; left: -6px; top: 50%; transform: translateY(-46%); z-index: 0; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 150px; line-height: 1; letter-spacing: -12px; color: #1b1b1b; white-space: nowrap; pointer-events: none; }
.lc-title-main { position: relative; z-index: 1; font-family: var(--ff-en); font-weight: 800; font-size: 66px; letter-spacing: -.01em; color: #fff; line-height: 1; }
.lc-title-main b { color: #ceff00; font-weight: 800; }

/* 스탯 그리드 5×4 */
.lc-statgrid { flex: 0 0 auto; display: grid; grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; gap: 6px; height: 606px; }
.lc-stat { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px; background: #1a1a1a; border: 1px solid #2c2c2c; }
.lc-stat span { color: #999; font-size: 18px; }
.lc-stat b { font-family: 'Poppins', var(--ff-en); font-style: italic; font-weight: 700; font-size: 44px; color: #fff; letter-spacing: -.01em; line-height: 1; }

/* 시각화 */
.lc-viz { flex: 1 1 auto; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.lc-vtools { flex: 0 0 auto; display: flex; gap: 6px; }
.lc-vtool { width: 60px; height: 44px; display: grid; place-items: center; color: #666; background: #1a1a1a; border: 1px solid #2c2c2c; }
.lc-vtool svg { width: 22px; height: 22px; }
.lc-vtool.is-on { color: #fff; }
.lc-vrow { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1fr 1.9fr 1fr; gap: 6px; }
.lc-vrow--2 { grid-template-columns: 1fr 2.9fr; }
.lc-panel { position: relative; overflow: hidden; background: #141414; border: 1px solid #272727; padding: 18px; }

/* 클럽 패스 */
.lc-cp-cols { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 8px; }
.lc-cp-cols > div { display: flex; flex-direction: column; gap: 4px; }
.lc-cp-cols > div:last-child { text-align: right; align-items: flex-end; }
.lc-cp-cols span { color: #999; font-size: 16px; }
.lc-cp-cols b { font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 30px; }
.lc-cp-cols em { font-style: normal; color: #999; font-size: 16px; }
.lc-cp-club { position: absolute; left: 0; right: 0; bottom: -6px; display: grid; place-items: center; }
.lc-cp-club img { width: 46%; object-fit: contain; }
.lc-cp-line { position: absolute; bottom: 40px; left: 50%; width: 8px; height: 110px; transform: translateX(-50%); border-radius: 4px; background: linear-gradient(#36c4ff, #ceff00); z-index: 1; }

/* 볼 플라이트 */
.lc-fl-head { position: absolute; z-index: 2; top: 18px; right: 18px; text-align: right; }
.lc-fl-head span { display: block; color: #999; font-size: 16px; }
.lc-fl-head b { font-size: 24px; font-weight: 800; }
.lc-fl-graph { position: absolute; inset: 0; width: 100%; height: 100%; }
.lc-fl-axis { position: absolute; z-index: 2; right: 34px; top: 26%; display: flex; flex-direction: column; gap: 20px; color: #666; font-family: 'Poppins', var(--ff-en); font-size: 15px; text-align: right; }
.lc-pill { position: absolute; z-index: 2; background: #2b2b2b; padding: 5px 12px; display: flex; flex-direction: column; align-items: center; gap: 1px; }
.lc-pill span { color: #999; font-size: 13px; }
.lc-pill b { font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 22px; }
.lc-pill--h { top: 40%; left: 42%; }
.lc-pill--c { top: 58%; left: 12%; }
.lc-pill--v { bottom: 14px; left: 33%; }

/* 백스핀/스핀 */
.lc-sp-top { position: relative; z-index: 2; display: flex; justify-content: space-between; gap: 8px; }
.lc-sp-top > div { display: flex; flex-direction: column; gap: 4px; }
.lc-sp-top span, .lc-sp-side span { color: #999; font-size: 16px; }
.lc-sp-top b, .lc-sp-side b { font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 26px; }
.lc-sp-side { position: relative; z-index: 2; margin-top: 18px; display: flex; flex-direction: column; gap: 4px; }
.lc-sp-ball { position: absolute; right: -16px; bottom: -16px; width: 150px; height: 150px; }
.lc-sp-ball img { width: 100%; height: 100%; object-fit: contain; }

/* 임팩트 포인트 */
.lc-im-head { position: relative; z-index: 2; color: #999; font-size: 16px; }
.lc-im-body { position: absolute; inset: 44px 8px 46px; display: flex; align-items: center; justify-content: center; }
.lc-im-v { position: absolute; left: 4px; top: 50%; transform: translateY(-50%); display: flex; flex-direction: column; gap: 26px; color: #999; font-size: 16px; }
.lc-im-club { position: relative; width: 74%; }
.lc-im-club img { width: 100%; object-fit: contain; }
.lc-im-dot { position: absolute; top: 44%; left: 50%; width: 22px; height: 22px; transform: translate(-50%,-50%); border-radius: 50%; background: #ceff00; box-shadow: 0 0 14px #ceff00; }
.lc-im-h { position: absolute; left: 0; right: 0; bottom: 12px; display: flex; justify-content: center; gap: 18px; color: #999; font-size: 16px; }

/* 클럽 모션 (사진) */
.lc-motion { padding: 0; }
.lc-motion img { width: 100%; height: 100%; object-fit: cover; }

/* 컨트롤 */
.lc-controls { flex: 0 0 auto; height: 56px; display: flex; gap: 12px; }
.lc-ctl { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 10px; padding: 0 16px; height: 56px; border: 1px solid #3a3a3a; color: #cfcfcf; font-size: 20px; font-weight: 600; background: transparent; white-space: nowrap; }
.lc-ctl svg { width: 24px; height: 24px; color: #999; flex: 0 0 auto; }
.lc-ctl--club { color: #fff; }
.lc-ctl--club svg:last-child { width: 18px; height: 18px; }
.lc-ctl--tee { padding: 0; gap: 0; }
.lc-tee-b { width: 54px; height: 100%; display: grid; place-items: center; color: #ddd; font-size: 26px; }
.lc-tee-b:first-child { border-right: 1px solid #3a3a3a; }
.lc-tee-b:last-child { border-left: 1px solid #3a3a3a; }
.lc-tee-v { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 8px; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 22px; color: #fff; }
.lc-tee-v svg { width: 18px; height: 22px; color: #ceff00; }

/* 탭 */
.lc-tabs { flex: 0 0 auto; height: 82px; display: flex; gap: 6px; }
.lc-tab { flex: 2; display: grid; place-items: center; background: #1a1a1a; border: 1px solid #2c2c2c; color: #999; font-size: 24px; font-weight: 700; }
.lc-tab:nth-child(2) { flex: 1; }
.lc-tab.is-on { background: #ceff00; color: #111; border-color: #ceff00; }

/* 상단 상태 그라디언트 텍스트 + 타이틀 흰색 (Figma 대조 보정) */
.lc-status { background: linear-gradient(90deg,#36c4ff,#ceff00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lc-title-main b { color: #fff; }


/* =========================================================
   토스트(준비 중 반응) + 버튼 눌림 피드백 — 죽은 클릭 방지
   ========================================================= */
.app-toast { position: fixed; left: 50%; bottom: 40px; z-index: 99999; transform: translate(-50%, 12px); padding: 14px 30px; border-radius: 999px; background: rgba(18,22,28,.96); box-shadow: 0 12px 44px rgba(0,0,0,.55), inset 0 0 0 1px rgba(255,255,255,.08); color: #fff; font-family: var(--ff-ko); font-size: 22px; font-weight: 600; letter-spacing: -.01em; opacity: 0; pointer-events: none; transition: opacity .18s ease, transform .18s ease; }
.app-toast.is-on { opacity: 1; transform: translate(-50%, 0); }
[data-stub], .ct2-search-box { cursor: pointer; }
.lc button, .ct--touch button, .ct2-search-box { transition: filter .12s ease, transform .1s ease; }
.lc button:active, .ct--touch button:active, .ct2-search-box:active { filter: brightness(1.25); transform: scale(.98); }

/* =========================================================
   RANGE 확장 — 스크린 컴포지팅(rs-*) + 콘솔 상태/오버레이(lc-*)
   ========================================================= */
/* ---- 스크린 (배경 + HTML 오버레이) ---- */
.rs { position: absolute; inset: 0; overflow: hidden; cursor: pointer; font-family: var(--ff-ko); color: #fff; }
.rs-bg { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rs-tracer { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.rs-panel {
  position: absolute; top: 20px; right: 20px; width: 300px;
  display: flex; flex-direction: column;
  background: rgba(8,8,8,.82); backdrop-filter: blur(2px);
}
.rs-row { display: flex; align-items: center; justify-content: space-between; height: 56px; padding: 0 18px; border-bottom: 3px solid rgba(255,255,255,.08); }
.rs-row span { color: #999; font-size: 17px; }
.rs-row b { font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 19px; color: #fff; }
.rs-row.is-time b { color: #ceff00; }
.rs-row.is-wind b { color: #36c4ff; }
.rs-spec {
  position: absolute; left: 50%; bottom: 50px; transform: translateX(-50%);
  display: flex; background: rgba(8,8,8,.85);
}
.rs-spec-cell { width: 138px; padding: 8px 0 10px; display: flex; flex-direction: column; align-items: center; gap: 4px; border-right: 3px solid rgba(255,255,255,.07); }
.rs-spec-cell:last-child { border-right: 0; }
.rs-spec-cell span { color: #999; font-size: 14px; }
.rs-spec-cell b { font-family: 'Poppins', var(--ff-en); font-style: italic; font-weight: 700; font-size: 26px; color: #fff; }
.rs-badge {
  position: absolute; left: 50%; bottom: 174px; transform: translateX(-50%);
  width: 271px; height: 52px; display: grid; place-items: center;
  font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 26px; letter-spacing: .12em; color: #fff;
  background: linear-gradient(90deg, #7b2ff7, #ff7847);
}
.rs-badge.is-ready { background: linear-gradient(90deg, #1668ff, #36c4ff); }
.rs-notice {
  position: absolute; left: 50%; top: 47%; transform: translate(-50%,-50%);
  padding: 16px 40px; background: #ceff00; color: #111;
  font-size: 22px; font-weight: 800; white-space: nowrap;
  animation: homeRise .4s cubic-bezier(.2,.7,.2,1) both;
}
/* 클럽 측정 중 배너 + 진행 도트 */
.rs-ct-banner {
  position: absolute; top: 26px; left: 50%; transform: translateX(-50%);
  display: inline-flex; align-items: center; gap: 14px;
  padding: 12px 24px; background: rgba(8,8,8,.85);
  font-size: 20px; font-weight: 800; color: #ceff00;
}
.rs-ct-dots { display: inline-flex; gap: 5px; }
.rs-ct-dots i { width: 14px; height: 14px; background: #3a3a3a; }
.rs-ct-dots i.on { background: #ceff00; }
.rs-ct-banner em { font-style: normal; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 17px; color: #fff; }
/* 클럽 측정 시작 팝업 (스크린) — 하단 볼스펙 숨김 상태에서 표시 */
.rs-ct-pop-dim { position: absolute; inset: 0; background: rgba(0,0,0,.55); }
.rs-ct-pop {
  position: absolute; left: 50%; top: 50%; transform: translate(-50%,-52%);
  width: 560px; padding: 40px 44px; background: #161616;
  box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px #2c2c2c;
  cursor: default;
}
.rs-ct-pop-tit { font-size: 34px; font-weight: 900; }
.rs-ct-pop-tit::after { content:''; display: block; width: 120px; height: 8px; margin-top: 12px; background: linear-gradient(90deg,#ceff00,#36c4ff); }
.rs-ct-pop-sub { margin-top: 16px; color: #999; font-size: 17px; line-height: 1.5; }
.rs-ct-pop-rows { margin-top: 22px; display: flex; flex-direction: column; gap: 3px; }
.rs-ct-pop-rows > div { display: flex; justify-content: space-between; align-items: center; height: 54px; padding: 0 20px; background: #1f1f1f; }
.rs-ct-pop-rows span { color: #999; font-size: 18px; }
.rs-ct-pop-rows b { font-size: 19px; font-weight: 800; }
.rs-ct-pop-hint { margin-top: 20px; text-align: center; color: #ceff00; font-size: 16px; font-weight: 700; }

/* ---- 콘솔 상태 배지 ---- */
.lc-status.is-wait { background: linear-gradient(90deg,#ff275f,#ff7847); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lc-status.is-ready { background: linear-gradient(90deg,#1668ff,#36c4ff); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lc-status.is-run { background: linear-gradient(90deg,#36c4ff,#ceff00); -webkit-background-clip: text; background-clip: text; -webkit-text-fill-color: transparent; }
.lc-livebtn { color: #999; }
.lc-livebtn svg { width: 26px; height: 26px; }
.lc-livebtn.is-on { color: #ff275f; }
.lc.is-locked .lc-controls, .lc.is-locked .lc-tabs { opacity: .45; pointer-events: none; }
.lc-statgrid.is-putt { grid-template-columns: repeat(5, 1fr); grid-auto-rows: 1fr; height: 150px; }
.lc-ctl-val { margin-left: 6px; color: #ceff00; font-family: 'Poppins', var(--ff-en); }
.lc-ctl--stop { color: #ff275f; border-color: #66222f; }
.lc-ctl.is-dim { opacity: .4; }
.lc-tab:disabled { opacity: .4; }

/* ---- 스윙모션뷰 (카메라) ---- */
.lc-vrow--cam { grid-template-columns: 1fr 1fr; flex: 1 1 auto; }
.lc-vrow--cam:has(.lc-cam:only-child) { grid-template-columns: 1fr; }
.lc-cam { position: relative; padding: 0; overflow: hidden; background: #000; }
.lc-cam img { width: 100%; height: 100%; object-fit: cover; }
.lc-cam-live { position: absolute; top: 12px; left: 50%; transform: translateX(-50%); z-index: 2; padding: 4px 14px; background: #e01935; color: #fff; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 14px; letter-spacing: .08em; }
.lc-cam-menu { position: absolute; top: 8px; right: 10px; z-index: 2; width: 36px; height: 36px; display: grid; place-items: center; background: rgba(0,0,0,.5); color: #fff; font-size: 20px; cursor: pointer; }
.lc-playbar { flex: 0 0 auto; height: 56px; display: flex; align-items: center; justify-content: center; gap: 10px; background: #141414; border: 1px solid #272727; }
.lc-playbar button { width: 64px; height: 40px; display: grid; place-items: center; background: #1f1f1f; color: #999; font-size: 15px; }
.lc-speed { margin-left: 10px; color: #999; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 16px; }

/* ---- 퍼팅 비쥬얼뷰 ---- */
.lc-vrow--putt { grid-template-columns: 1fr 1.6fr; flex: 1 1 auto; }
.lc-puttdir { position: relative; }
.lc-putt-grid { position: absolute; inset: 40px 10px 10px; width: calc(100% - 20px); height: calc(100% - 50px); }
.lc-putt-nums { position: absolute; right: 16px; top: 20%; display: flex; flex-direction: column; gap: 24%; color: #666; font-family: 'Poppins', var(--ff-en); font-size: 14px; }

/* ---- ANALYZING 오버레이 ---- */
.lc-analyzing { position: absolute; inset: 0; z-index: 30; display: grid; place-items: center; background: rgba(10,10,10,.72); backdrop-filter: blur(7px); }
.lc-anal-band { position: absolute; top: 46%; left: -20%; right: -20%; text-align: center; font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 56px; color: rgba(255,255,255,.07); white-space: nowrap; transform: translateY(-50%); }
.lc-anal-badge { position: relative; padding: 12px 46px; background: linear-gradient(90deg,#36c4ff,#ceff00); color: #05121a; font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 34px; letter-spacing: .04em; }

/* ---- 라이브 카메라 풀스크린 ---- */
.lc-live { position: absolute; inset: 0; z-index: 40; background: #000; }
.lc-live img { width: 100%; height: 100%; object-fit: cover; }
.lc-live .lc-cam-live { top: 22px; }
.lc-live .lc-cam-menu { top: 18px; right: 20px; width: 44px; height: 44px; font-size: 24px; }
.lc-live-toast { position: absolute; top: 38%; left: 50%; transform: translateX(-50%); padding: 14px 34px; background: #ceff00; color: #111; font-size: 20px; font-weight: 800; white-space: nowrap; }
.lc-live-x { position: absolute; bottom: 34px; left: 50%; transform: translateX(-50%); width: 64px; height: 64px; display: grid; place-items: center; background: #1b1b1b; color: #fff; font-size: 30px; box-shadow: inset 0 0 0 1px #333; }

/* ---- 공통 모달 딤 + 연습장 변경 / 클럽측정 팝업 ---- */
.lc-modal-dim { position: absolute; inset: 0; z-index: 50; display: grid; place-items: center; background: rgba(0,0,0,.6); }
.lc-switch { width: 620px; padding: 36px 36px 30px; background: #161616; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px #2c2c2c; display: flex; flex-direction: column; gap: 10px; }
.lc-switch-tit { font-size: 30px; font-weight: 900; margin-bottom: 8px; }
.lc-switch-tit::after { content:''; display: block; width: 100px; height: 7px; margin-top: 10px; background: linear-gradient(90deg,#ceff00,#36c4ff); }
.lc-switch-btn { display: flex; align-items: center; justify-content: space-between; height: 72px; padding: 0 24px; background: #1f1f1f; color: #fff; font-size: 22px; font-weight: 700; box-shadow: inset 0 0 0 1px #2c2c2c; }
.lc-switch-btn b { color: #ceff00; font-family: 'Poppins', var(--ff-en); }
.lc-switch-btn.is-on { box-shadow: inset 0 0 0 2px #ceff00; }
.lc-switch-btn.is-go { justify-content: center; background: #ceff00; color: #111; font-weight: 900; box-shadow: none; }

/* ---- 이전 기록 ---- */
.lc-hist { width: 760px; max-height: 70%; overflow: auto; padding: 36px; background: #161616; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px #2c2c2c; display: flex; flex-direction: column; gap: 8px; }
.lc-hist-tit { font-size: 30px; font-weight: 900; margin-bottom: 10px; }
.lc-hist-row { display: flex; align-items: center; gap: 16px; height: 74px; padding: 0 22px; background: #1f1f1f; color: #fff; box-shadow: inset 0 0 0 1px #2c2c2c; text-align: left; }
.lc-hist-row b { font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 22px; color: #ceff00; width: 64px; }
.lc-hist-row span { font-size: 19px; font-weight: 700; width: 90px; }
.lc-hist-row em { flex: 1; font-style: normal; color: #999; font-size: 16px; }
.lc-hist-row i { font-style: normal; color: #36c4ff; font-size: 16px; font-weight: 700; }

/* ---- 비교하기 ---- */
.lc-cmp { position: absolute; inset: 0; z-index: 50; display: flex; flex-direction: column; gap: 14px; padding: 40px 36px; background: #111; }
.lc-cmp-head { display: flex; align-items: center; gap: 12px; }
.lc-cmp-head img { width: 44px; height: 44px; border-radius: 50%; object-fit: cover; }
.lc-cmp-head span { font-size: 20px; font-weight: 700; }
.lc-cmp-vs { margin-left: auto; font-family: var(--ff-en); font-weight: 800; font-size: 26px; }
.lc-cmp-grid { display: flex; flex-direction: column; gap: 4px; }
.lc-cmp-row { display: grid; grid-template-columns: 1.3fr 1fr 1.6fr 1fr; align-items: center; height: 66px; padding: 0 20px; background: #1a1a1a; border: 1px solid #2c2c2c; }
.lc-cmp-row .lc-cmp-k { color: #999; font-size: 17px; }
.lc-cmp-row b { font-family: 'Poppins', var(--ff-en); font-style: italic; font-weight: 700; font-size: 26px; color: #ceff00; }
.lc-cmp-row b.is-b { color: #36c4ff; text-align: right; }
.lc-cmp-row em { font-style: normal; text-align: center; color: #666; font-family: 'Poppins', var(--ff-en); font-size: 14px; }
.lc-cmp-cams { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.lc-cmp-cams .lc-cam { border: 1px solid #272727; }
.lc-cmp-end { flex: 0 0 auto; height: 82px; background: #ceff00; color: #111; font-size: 26px; font-weight: 900; }

/* 콘솔 뿌리 — 오버레이 absolute 기준 */
.lc { position: relative; }

/* =========================================================
   AI 스윙 분석 콘솔 (Figma page 2:9) — 롱게임 range 씬 내 aiswing 모드
   ========================================================= */
/* 평가 등급 색 */
.rt-perfect { color: #12e29a; }
.rt-good { color: #36c4ff; }
.rt-notbad { color: #c9c9c9; }
.rt-bad { color: #ff275f; }

.lc--ai .ai-top { flex: 1.05 1 0; min-height: 0; display: flex; flex-direction: column; gap: 10px; }
.lc--ai .ai-bottom { flex: 1 1 0; min-height: 0; display: grid; grid-template-columns: 1.35fr 1fr; gap: 12px; }

/* 풋프린트 압력 뷰 */
.ai-foot { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1.5fr 1fr; align-items: center; }
.ai-foot-col { display: flex; flex-direction: column; align-items: center; gap: 2px; color: #999; }
.ai-foot-col b { font-family: 'Poppins', var(--ff-en); font-style: italic; font-weight: 700; font-size: 30px; color: #fff; }
.ai-foot-col em { font-style: normal; font-size: 15px; }
.ai-foot-mid { color: #444; }
.ai-foot-imgs { position: relative; height: 100%; display: flex; align-items: center; justify-content: center; gap: 18px; }
.ai-foot-imgs img { height: 78%; width: auto; object-fit: contain; }
.ai-foot-line { position: absolute; inset: 0; width: 100%; height: 100%; pointer-events: none; }
.ai-foot-bal { display: flex; align-items: center; justify-content: center; gap: 14px; color: #999; font-size: 17px; }
.ai-foot-bal b { font-family: 'Poppins', var(--ff-en); font-weight: 700; color: #fff; }
.ai-foot-bal i { color: #333; }
.ai-foot-toggle { display: flex; justify-content: center; gap: 0; }
.ai-foot-toggle button { width: 150px; height: 44px; background: #1b1b1b; color: #999; font-size: 17px; font-weight: 700; box-shadow: inset 0 0 0 1px #2c2c2c; }
.ai-foot-toggle button.is-on { background: #e6e6e6; color: #111; }

/* 스윙 모션 영상 뷰 */
.ai-motion { position: relative; flex: 1; min-height: 0; background: #000; overflow: hidden; display: grid; place-items: center; }
.ai-motion img { width: 100%; height: 100%; object-fit: contain; }
.ai-motion-tools { position: absolute; top: 10px; right: 10px; display: flex; flex-direction: column; gap: 6px; }
.ai-motion-tools button { width: 40px; height: 40px; background: rgba(0,0,0,.5); color: #fff; font-size: 18px; }
.ai-scrub { display: flex; gap: 3px; }
.ai-scrub-b { flex: 1; min-width: 0; height: 40px; background: #1b1b1b; color: #ccc; font-size: 13px; font-weight: 600; border-bottom: 3px solid currentColor; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; padding: 0 4px; }
.ai-scrub-b.is-on { background: #262626; }

/* 6구간 썸네일 */
.ai-thumbs { display: grid; grid-template-columns: repeat(3, 1fr); grid-auto-rows: 1fr; gap: 6px; min-height: 0; }
.ai-thumb { position: relative; overflow: hidden; background: #000; box-shadow: inset 0 0 0 1px #2c2c2c; }
.ai-thumb img { width: 100%; height: 100%; object-fit: cover; }
.ai-thumb.is-on { box-shadow: inset 0 0 0 3px #ceff00; }
.ai-thumb-rate { position: absolute; left: 0; right: 0; bottom: 24px; height: 26px; display: grid; place-items: center; font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 14px; letter-spacing: .04em; color: #071b14; }
.ai-thumb-rate.rt-perfect { background: #12e29a; }
.ai-thumb-rate.rt-good { background: #36c4ff; color: #04202e; }
.ai-thumb-rate.rt-notbad { background: #c9c9c9; color: #1a1a1a; }
.ai-thumb-rate.rt-bad { background: #ff275f; color: #fff; }
.ai-thumb-name { position: absolute; left: 0; right: 0; bottom: 0; height: 24px; display: grid; place-items: center; background: rgba(0,0,0,.72); color: #fff; font-size: 13px; font-weight: 600; }

/* 선택 구간 분석 결과 */
.ai-result { display: flex; flex-direction: column; background: #141414; box-shadow: inset 0 0 0 1px #272727; padding: 18px; min-height: 0; }
.ai-result-head { display: flex; align-items: center; justify-content: space-between; font-size: 20px; font-weight: 800; color: #fff; padding-bottom: 12px; border-bottom: 1px solid #2a2a2a; }
.ai-result-head b { font-family: 'Poppins', var(--ff-en); font-weight: 800; }
.ai-result-rows { flex: 1; display: flex; flex-direction: column; overflow: hidden; }
.ai-result-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 2px; border-bottom: 1px solid rgba(255,255,255,.05); }
.ai-result-row span { color: #999; font-size: 15px; }
.ai-result-row b { font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 15px; }
.ai-diag-btn { flex: 0 0 auto; margin-top: 12px; height: 52px; background: #ceff00; color: #111; font-size: 19px; font-weight: 900; }

/* 종합 진단 오버레이 */
.ai-diag { width: 820px; max-height: 82%; overflow: auto; background: #141414; box-shadow: 0 30px 80px rgba(0,0,0,.6), inset 0 0 0 1px #2c2c2c; padding: 32px; }
.ai-diag-head { display: flex; align-items: center; gap: 16px; padding-bottom: 18px; border-bottom: 1px solid #2a2a2a; }
.ai-diag-head b { font-family: var(--ff-en); font-weight: 800; font-size: 30px; color: #fff; }
.ai-diag-head span { font-size: 24px; font-weight: 800; }
.ai-diag-body { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; padding: 18px 0; }
.ai-diag-phase { background: #1b1b1b; box-shadow: inset 0 0 0 1px #2c2c2c; padding: 14px 16px; }
.ai-diag-phase-top { display: flex; align-items: center; justify-content: space-between; padding-bottom: 8px; margin-bottom: 8px; border-bottom: 1px solid #2a2a2a; }
.ai-diag-phase-top span { font-size: 18px; font-weight: 700; color: #fff; }
.ai-diag-phase-top b { font-family: 'Poppins', var(--ff-en); font-weight: 800; font-size: 16px; }
.ai-diag-metrics > div { display: flex; align-items: center; justify-content: space-between; padding: 5px 0; }
.ai-diag-metrics span { color: #999; font-size: 14px; }
.ai-diag-metrics i { font-style: normal; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 14px; }
.ai-diag-close { width: 100%; height: 64px; background: #1f1f1f; color: #fff; font-size: 20px; font-weight: 800; box-shadow: inset 0 0 0 1px #333; }


/* =========================================================
   콘솔 종횡비 A/B 토글 — Type A(콘솔 세로) / Type B(콘솔 가로 프레임)
   ========================================================= */
.layout-switch {
  position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200;
  display: flex; align-items: center; gap: 8px;
  padding: 7px 8px 7px 18px; border-radius: 999px;
  background: rgba(16,20,26,.94); box-shadow: 0 10px 30px rgba(0,0,0,.45), inset 0 0 0 1px var(--c-line);
  font-family: var(--ff-en);
}
.layout-switch-title { color: var(--c-fg-3); font-size: 13px; letter-spacing: .16em; }
.layout-switch button {
  padding: 9px 16px; border-radius: 999px; color: var(--c-fg-2); font-size: 14px; font-weight: 600;
  background: transparent; transition: background .15s, color .15s;
}
.layout-switch button:hover { color: var(--c-fg); }
.layout-switch button.is-on { background: var(--c-q); color: #0a1400; }
/* CONSOLE · PLAN 토글을 한 줄에 나란히 (상단 중앙) */
.switch-bar { position: fixed; top: 16px; left: 50%; transform: translateX(-50%); z-index: 200; display: flex; align-items: center; gap: 12px; }
.switch-bar .layout-switch { position: static; transform: none; }
/* 디폴트(무료) 플랜 — 메뉴 항목이 적어 카드가 큼: 타이틀/그룹 살짝 키워 '큰 버튼' 강조 */
.plan-default .mb-title { font-size: 36px; }
.plan-default .mb-group { font-size: 21px; }

/* 콘솔 내부 래퍼 (Type B에서 세로 UI를 통째로 스케일) */
.touch-inner { width: 100%; height: 100%; display: flex; flex-direction: column; min-height: 0; }

/* Type B — 콘솔 가로 프레임(1920×1080), 세로 UI(1080×1920)를 중앙 축소 배치 */
body.layout-b .canvas { width: 3920px; height: 1080px; grid-template-columns: 1920px 1920px; grid-template-rows: 1080px; }
body.layout-b .touch { width: 1920px; height: 1080px; }
body.layout-b .touch-inner {
  position: absolute; top: 50%; left: 50%;
  width: 1080px; height: 1920px;
  transform: translate(-50%, -50%) scale(0.5625);
  transform-origin: center center;
  box-shadow: 0 0 0 1px var(--c-line);
}

/* =========================================================
   플레이어 설정 팝업 (1인 로그인 개선 + 광고칸) · 상단바 아이콘 토글
   ========================================================= */
.top-icon[hidden] { display: none; }
.top-icon--player svg { display: block; }

.p-settings { position: absolute; inset: 0; z-index: 70; background: #101010; }
.p-settings[hidden] { display: none; }
.ps { width: 100%; height: 100%; display: flex; flex-direction: column; gap: 22px; padding: 44px 40px 40px; font-family: var(--ff-ko); color: #fff; overflow: hidden; }
.ps, .ps * { box-sizing: border-box; }

.ps-head { position: relative; flex: 0 0 auto; height: 70px; display: flex; align-items: center; overflow: hidden; }
.ps-wm { position: absolute; left: -4px; top: 50%; transform: translateY(-48%); z-index: 0; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 118px; letter-spacing: -8px; color: #1b1b1b; white-space: nowrap; pointer-events: none; }
.ps-title { position: relative; z-index: 1; font-weight: 900; font-size: 44px; }
.ps-bar { position: relative; z-index: 1; flex: 1; height: 10px; margin: 0 22px; border-radius: 5px; background: linear-gradient(90deg, #ceff00, #36c4ff); }
.ps-x { position: relative; z-index: 1; width: 64px; height: 64px; display: grid; place-items: center; font-size: 38px; color: #999; background: #1b1b1b; box-shadow: inset 0 0 0 1px #2c2c2c; }

.ps-body { flex: 1 1 auto; min-height: 0; display: grid; grid-template-columns: 1fr 340px; gap: 22px; }
.ps-main { display: flex; flex-direction: column; gap: 20px; min-height: 0; overflow-y: auto; }

/* 플레이어 식별 (아이콘·이름·회원구분 + 로그아웃만) */
.ps-id { flex: 0 0 auto; display: flex; align-items: center; gap: 20px; padding: 22px 24px; background: #1a1a1a; box-shadow: inset 0 0 0 1px #2c2c2c; }
.ps-id-av { width: 88px; height: 88px; flex: 0 0 auto; border-radius: 50%; display: grid; place-items: center; background: #0d0d0d; box-shadow: inset 0 0 0 1px #333; font-family: var(--ff-en); font-weight: 800; font-size: 38px; color: #ceff00; }
.ps-id-info { flex: 1; min-width: 0; }
.ps-id-name { font-size: 32px; font-weight: 800; }
.ps-id-tag { display: inline-block; margin-top: 8px; padding: 4px 14px; border-radius: 999px; font-size: 16px; font-weight: 700; background: #242424; color: #aaa; }
.ps-id-tag.is-sub { background: rgba(206,255,0,.16); color: #ceff00; }
.ps-id-logout { flex: 0 0 auto; width: 100px; height: 82px; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; background: #111; box-shadow: inset 0 0 0 1px #2a2a2a; color: #ff275f; font-size: 15px; font-weight: 700; }
.ps-id-logout svg { width: 24px; height: 24px; }

/* 설정 섹션 헤더 (내 설정 / 클럽별 비거리 설정) */
.ps-sec { flex: 0 0 auto; }
.ps-sec-head { display: flex; align-items: center; gap: 16px; margin-bottom: 14px; font-size: 19px; font-weight: 600; color: #8a8a8a; }
.ps-sec-head::after { content: ''; flex: 1; height: 1px; background: #2a2a2a; }

/* 옵션 1열 (드롭다운 스타일 · 클릭 시 값 순환) */
.ps-optgrid { display: grid; grid-template-columns: 1fr; gap: 12px; }
.ps-opt { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 78px; padding: 0 14px 0 22px; background: #141414; box-shadow: inset 0 0 0 1px #2a2a2a; text-align: left; cursor: pointer; transition: filter .12s, box-shadow .12s; }
.ps-opt:hover { box-shadow: inset 0 0 0 1px #3c3c3c; }
.ps-opt:active { filter: brightness(1.25); }
.ps-opt-label { color: #cfcfcf; font-size: 20px; font-weight: 600; white-space: nowrap; }
.ps-opt-val { display: inline-flex; align-items: center; gap: 10px; font-family: var(--ff-en); font-weight: 700; font-size: 18px; color: #ceff00; white-space: nowrap; }
.ps-opt-caret { width: 32px; height: 32px; flex: 0 0 auto; display: grid; place-items: center; font-style: normal; font-size: 14px; color: #9a9a9a; background: #0b0b0b; box-shadow: inset 0 0 0 1px #333; border-radius: 5px; }

/* 클럽별 비거리 스텝퍼 */
.ps-clubs { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ps-club { display: flex; align-items: center; justify-content: space-between; gap: 10px; height: 86px; padding: 0 16px; background: #141414; box-shadow: inset 0 0 0 1px #2a2a2a; }
.ps-club-label { font-family: var(--ff-en); font-weight: 800; font-size: 19px; letter-spacing: .02em; white-space: nowrap; }
.ps-club-step { display: flex; align-items: center; gap: 8px; }
.ps-club-btn { width: 44px; height: 44px; flex: 0 0 auto; display: grid; place-items: center; font-size: 26px; font-weight: 800; color: #ceff00; background: #0b0b0b; box-shadow: inset 0 0 0 1px #333; border-radius: 6px; transition: filter .12s; }
.ps-club-btn:active { filter: brightness(1.3); }
.ps-club-val { min-width: 72px; text-align: center; font-family: 'Poppins', var(--ff-en); font-weight: 700; font-size: 21px; }

/* 로그인 카드 (미로그인 시) */
.ps-login { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 18px; background: #1a1a1a; box-shadow: inset 0 0 0 1px #2c2c2c; padding: 40px; text-align: center; }
.ps-qr { width: 260px; height: 260px; background: #fff; padding: 15px; }
.ps-qr img { width: 100%; height: 100%; }
.ps-login-cap { font-size: 20px; font-weight: 600; line-height: 1.5; }
.ps-login-btns { display: flex; gap: 12px; width: 100%; margin-top: 6px; }
.ps-lbtn { flex: 1; height: 76px; background: #ceff00; color: #111; font-size: 22px; font-weight: 800; }
.ps-lbtn.is-ghost { background: #1f1f1f; color: #fff; box-shadow: inset 0 0 0 1px #333; }

/* 광고칸 — 세로 광고 1개 */
.ps-ads { display: flex; flex-direction: column; min-height: 0; }
.ps-ad { flex: 1; min-height: 0; position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px;
  background: repeating-linear-gradient(45deg, rgba(255,255,255,.015) 0 22px, rgba(255,255,255,.045) 22px 44px), #141414;
  box-shadow: inset 0 0 0 2px #2a2a2a; }
.ps-ad-tag { font-weight: 800; font-size: 24px; color: #8a8a8a; letter-spacing: .12em; }
.ps-ad em { font-style: normal; font-family: var(--ff-en); font-size: 15px; color: #555; }

/* 하단 액션 — 취소 / 저장하고 나가기 */
.ps-foot { flex: 0 0 auto; display: grid; grid-template-columns: 1fr 1.5fr; gap: 16px; }
.ps-btn { height: 94px; font-size: 27px; font-weight: 800; }
.ps-btn--ghost { background: #1b1b1b; color: #fff; box-shadow: inset 0 0 0 1px #333; }
.ps-btn--go { background: #ceff00; color: #111; font-weight: 900; }