/* =========================================================
   PLAY ON 소개 랜딩 — 로컬 검토용 스타일
   색/간격은 아래 :root 토큰만 바꾸면 전체가 따라갑니다.
   ⚠ 이 파일은 소개 랜딩 전용입니다. 게임 화면 테마(games 하위 public, 루트 public)와 무관하며
     기존 테마 구조(config/theme.json)를 사용하거나 덮어쓰지 않습니다.
     (주석 안에 별+슬래시 조합을 쓰지 말 것 — 주석이 조기 종료되어 :root 토큰이 깨집니다.)
   ========================================================= */
:root {
  /* PLAY ON 소개 브랜드 */
  --ink:#102420;          /* 기본 글자/버튼 */
  --paper:#fbfcf8;        /* 바탕 */
  --alt:#f0f3ec;          /* 교차 섹션 바탕 */
  --accent:#d6f56a;       /* 포인트(라임) */
  --accent-deep:#83a923;  /* 포인트 진한 톤 */
  --line:#dfe5db;         /* 구분선 */
  --sub:#58665e;          /* 보조 글자 */

  /* 고객 행사 테마 예시(가상) — 소개 브랜드와 분리해 둡니다 */
  --ev-bg:#0b2234;
  --ev-ink:#f4f8fa;
  --ev-mint:#b3eedf;
  --ev-sub:#b9cbd4;
  --ev-card:#143044;
  --ev-edge:#42606d;

  /* 상태 배지 */
  --ok-bg:#e4f6e8; --ok-ink:#1d6b32;
  --wait-bg:#f3f0e4; --wait-ink:#7a6a22;
  --ext-bg:#e9eef5; --ext-ink:#355077;

  --wrap:1120px;
  --r:10px;
  --head-h:69px;   /* 고정 헤더 실측 높이 — 앵커 이동 보정에 사용 */
}

* { box-sizing:border-box; }
html { -webkit-text-size-adjust:100%; scroll-behavior:smooth; }
body {
  margin:0; background:var(--paper); color:var(--ink);
  font-family:"Apple SD Gothic Neo","Malgun Gothic",system-ui,-apple-system,sans-serif;
  font-size:16px; line-height:1.7; -webkit-font-smoothing:antialiased;
  overflow-x:hidden; /* 모바일 가로 스크롤 차단 */
}
img { max-width:100%; }
h1,h2,h3 { margin:0; letter-spacing:-.02em; line-height:1.28; font-weight:700; }
p { margin:0; }
ul,ol { margin:0; padding:0; list-style:none; }
a { color:inherit; text-decoration:none; }
code { background:var(--alt); padding:.12em .45em; border-radius:4px; font-size:.92em; }

.wrap { max-width:var(--wrap); margin:0 auto; padding:0 24px; }
.only-wide { display:inline; }

/* 접근성: 건너뛰기 링크 + 포커스 가시성 */
.skip { position:absolute; left:-9999px; top:0; background:var(--ink); color:#fff; padding:12px 18px; z-index:100; border-radius:0 0 var(--r) 0; }
.skip:focus { left:0; }
a:focus-visible, button:focus-visible, summary:focus-visible {
  outline:3px solid var(--accent-deep); outline-offset:3px; border-radius:4px;
}

/* ───────── 공통 요소 ───────── */
.eyebrow { display:inline-block; font-size:11px; letter-spacing:.16em; font-weight:700; color:var(--accent-deep); }
.caption { font-size:13px; color:var(--sub); max-width:34ch; }
.note { margin-top:20px; font-size:13px; color:var(--sub); }
.lede { font-size:16px; color:var(--sub); line-height:1.9; }
.lede.sm { font-size:15px; }

.btn {
  display:inline-flex; align-items:center; justify-content:center; gap:10px;
  min-height:48px; padding:12px 22px; border-radius:var(--r);
  background:var(--ink); color:#fff; font-size:15px; font-weight:700; border:0;
}
.btn:hover { background:#1c3a33; }
.btn-sm { min-height:40px; padding:8px 16px; font-size:13px; }
.btn-dark { background:var(--accent-deep); }
.btn-dark:hover { background:#6e9020; }
.text-link { display:inline-flex; align-items:center; gap:6px; min-height:44px; font-size:14px; font-weight:700; border-bottom:1.5px solid var(--line); }
.text-link:hover { border-color:var(--ink); }

.tag-virtual {
  display:inline-block; background:var(--accent); color:var(--ink);
  font-size:11px; font-weight:700; padding:2px 8px; border-radius:999px; margin-right:6px;
}
.badge { display:inline-block; font-size:12px; font-weight:700; padding:4px 11px; border-radius:999px; white-space:nowrap; }
.badge-live { background:var(--ok-bg); color:var(--ok-ink); }
.badge-wait { background:var(--wait-bg); color:var(--wait-ink); }
.badge-ext  { background:var(--ext-bg); color:var(--ext-ink); }

/* ───────── 헤더 ───────── */
.site-head { position:sticky; top:0; z-index:50; background:rgba(251,252,248,.93); backdrop-filter:blur(8px); border-bottom:1px solid var(--line); }
.head-inner { display:flex; align-items:center; gap:20px; min-height:68px; }
.logo { display:flex; flex-direction:column; justify-content:center; margin-right:auto; }
.logo-mark { font-size:23px; font-weight:700; letter-spacing:-.05em; line-height:1.05; }
.logo .dot { display:inline-block; width:7px; height:7px; border-radius:50%; background:var(--accent-deep); margin:0 4px 2px; }
.logo small { font-size:10px; color:var(--sub); letter-spacing:.02em; }
.head-nav { display:flex; gap:22px; font-size:14px; }
.head-nav a { padding:8px 0; border-bottom:2px solid transparent; }
.head-nav a:hover { border-color:var(--accent-deep); }

/* ───────── 히어로 ───────── */
.hero { padding:72px 0 64px; border-bottom:1px solid var(--line); }
.hero-grid { display:grid; grid-template-columns:1.05fr .95fr; gap:48px; align-items:center; }
.hero h1 { font-size:clamp(34px,4.6vw,52px); margin:16px 0 20px; }
.hero-cta { display:flex; align-items:center; gap:18px; flex-wrap:wrap; margin-top:28px; }
.hero-note { margin-top:26px; font-size:13px; color:var(--sub); }

/* 가상 행사 목업(큰 화면 + 휴대폰) */
.scene { position:relative; margin:0; padding-bottom:30px; }
.scene-cap { font-size:12px; color:var(--sub); margin-bottom:10px; }
.screen-mock {
  position:relative; border:6px solid #263b3d; border-radius:10px;
  background:var(--ev-bg); color:var(--ev-ink); padding:24px 22px 26px; overflow:hidden;
  box-shadow:0 20px 34px rgba(21,55,40,.14);
}
.screen-mock::before { content:""; position:absolute; width:230px; height:230px; border:34px solid rgba(167,223,209,.13); border-radius:50%; right:-125px; top:-105px; }
.sm-client { font-size:10px; letter-spacing:.2em; }
.sm-event { display:block; font-size:clamp(20px,2.4vw,26px); line-height:1.08; margin-top:18px; }
.sm-sub { display:block; font-size:11px; color:#b1c7d3; margin-top:8px; }
.sm-rule { border:0; height:1px; background:rgba(255,255,255,.16); margin:16px 0 12px; }
.sm-program { display:block; font-size:10px; letter-spacing:.1em; }
.sm-program em { display:block; font-style:normal; font-size:11px; letter-spacing:0; margin-top:3px; color:var(--ev-sub); }
.sm-number { display:block; font-size:clamp(44px,6vw,62px); font-weight:700; letter-spacing:-.04em; line-height:1.18; color:var(--ev-mint); }
.sm-number small { font-size:.27em; margin-left:6px; letter-spacing:0; }
.sm-target { font-size:11px; color:#c5d7df; }
.phone-mock {
  position:absolute; right:-6px; bottom:24px; width:116px;
  padding:20px 10px 14px; border:5px solid #263b3d; border-radius:20px;
  background:#f6faf7; color:#132d35; text-align:center;
  display:flex; flex-direction:column; gap:11px; box-shadow:0 14px 26px rgba(11,34,52,.16);
}
.pm-name { font-size:8px; letter-spacing:.08em; }
.pm-label { font-size:9px; color:var(--sub); }
.pm-num { font-size:22px; line-height:1; white-space:nowrap; }
.pm-num small { font-size:9px; margin-left:2px; }
.pm-stop { background:var(--ev-mint); padding:12px 0; border-radius:6px; font-size:11px; font-weight:700; }
.pm-foot { font-size:8px; color:var(--sub); }
.scene-foot { position:absolute; left:0; bottom:0; font-size:12px; color:var(--sub); }

/* ───────── 브랜드 관계 ───────── */
.band { padding:64px 0; background:var(--alt); border-bottom:1px solid var(--line); }
.band h2 { font-size:clamp(23px,2.8vw,30px); margin:10px 0 32px; }
.brand-chain { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:16px; }
.brand-chain li { position:relative; background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:20px; }
.brand-chain li + li::before {
  content:"→"; position:absolute; left:-14px; top:50%; transform:translateY(-50%);
  color:var(--accent-deep); font-weight:700; font-size:16px;
}
.bc-now { border-color:var(--accent-deep); box-shadow:0 0 0 2px rgba(131,169,35,.16); }
.bc-step { display:block; font-size:11px; letter-spacing:.1em; color:var(--sub); }
.brand-chain strong { display:block; font-size:19px; margin:7px 0 5px; }
.brand-chain small { font-size:12px; color:var(--sub); }

/* ───────── 섹션 공통 ───────── */
/* 앵커(#programs 등)로 이동할 때 고정 헤더에 제목이 가리지 않도록 보정 */
#main, #top, .hero, .band, .section { scroll-margin-top:calc(var(--head-h) + 18px); }
.section { padding:68px 0; border-bottom:1px solid var(--line); }
.section.alt { background:var(--alt); }
.sec-top { display:flex; align-items:flex-end; justify-content:space-between; gap:24px; margin-bottom:34px; flex-wrap:wrap; }
.sec-top h2 { font-size:clamp(23px,2.8vw,31px); margin-top:10px; }

/* 참여 방식 */
.steps { display:grid; grid-template-columns:repeat(4,minmax(0,1fr)); gap:18px; }
.steps li { border-top:2px solid var(--accent-deep); padding-top:16px; }
.st-no { font-size:12px; font-weight:700; color:var(--accent-deep); letter-spacing:.08em; }
.steps strong { display:block; font-size:17px; margin:6px 0 8px; }
.steps p { font-size:13.5px; color:var(--sub); line-height:1.8; }

/* 프로그램 */
.prog-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; }
/* 6개 프로그램 카드 — 아이콘·이름·한 줄 설명. 체험 연결(PLAY ON 체험하기)은 실제 준비된 두 체험에만 */
.prog-card h3 .pc-en { font-size:12px; font-weight:700; color:var(--sub); letter-spacing:.06em; margin-left:6px; }
.art-icon svg { width:68px; height:68px; }
.art-icon .ic-frame { fill:none; stroke:var(--ink); stroke-width:2.6; stroke-linejoin:round; stroke-linecap:round; }
.art-icon .ic-wall { fill:none; stroke:#a6c0b4; stroke-width:2.6; stroke-linecap:round; }
.art-icon .ic-path { fill:none; stroke:var(--accent-deep); stroke-width:3.2; stroke-linecap:round; stroke-linejoin:round; stroke-dasharray:5 4; }
.art-icon .ic-dot, .art-icon .ic-pin { fill:var(--accent); stroke:var(--ink); stroke-width:2; }
.pc-cta { padding-top:6px; }
.pc-modes li { line-height:1.6; }
.prog-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; }
.pc-lead { border-color:var(--accent-deep); box-shadow:0 0 0 2px rgba(131,169,35,.14); }
.pc-top { display:flex; justify-content:space-between; gap:8px; font-size:11px; color:var(--sub); flex-wrap:wrap; }
.art { height:104px; display:flex; align-items:center; justify-content:center; margin:6px 0 4px; }
.art-capsule { gap:10px; }
.art-capsule span { height:50px; width:37px; border-radius:30px; background:linear-gradient(var(--accent) 50%,#fff 50%); transform:rotate(28deg); box-shadow:0 8px 12px rgba(24,51,39,.1); }
.art-capsule span:nth-child(2) { transform:rotate(-24deg) translateY(-7px); background:linear-gradient(#a6c0b4 50%,#fff 50%); }
.art-capsule span:nth-child(3) { transform:rotate(18deg) translateY(7px); }
.art-number { font-size:54px; font-weight:700; letter-spacing:-.06em; gap:9px; }
.art-number span { background:var(--accent); font-size:10px; letter-spacing:.06em; padding:3px 7px; border-radius:4px; }
.prog-card h3 { font-size:19px; margin-bottom:8px; }
.prog-card > p { font-size:14px; color:var(--sub); line-height:1.8; }
.pc-facts { margin:14px 0 0; display:flex; flex-direction:column; gap:7px; }
.pc-facts li { position:relative; padding-left:15px; font-size:13px; color:var(--sub); }
.pc-facts li::before { content:""; position:absolute; left:0; top:9px; width:6px; height:6px; border-radius:50%; background:var(--accent-deep); }
.pc-status { margin-top:auto; padding-top:18px; }
.more-games { margin-top:26px; border:1px solid var(--line); border-radius:var(--r); background:var(--paper); padding:14px 18px; }
.more-games summary { cursor:pointer; font-weight:700; font-size:14px; min-height:44px; display:flex; align-items:center; }
.more-games p { margin-top:10px; font-size:13.5px; color:var(--sub); line-height:1.85; }

/* 행사 구성 타임라인 */
.timeline { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:18px; }
.timeline li { border-top:2px solid var(--accent-deep); padding-top:14px; display:flex; flex-direction:column; gap:6px; }
.tl-when { font-size:12px; color:var(--sub); }
.timeline strong { font-size:17px; }
.timeline small { font-size:13px; color:var(--sub); }

/* 맞춤 브랜딩 */
.custom-grid { display:grid; grid-template-columns:1fr 1fr; gap:44px; align-items:center; }
.custom-grid h2 { font-size:clamp(23px,2.8vw,31px); margin:10px 0 16px; }
.chip-list { display:flex; flex-wrap:wrap; gap:8px; margin-top:20px; }
.chip-list li { background:var(--paper); border:1px solid var(--line); border-radius:999px; padding:7px 14px; font-size:13px; }
.event-mock { margin:0; }
.em-cap { font-size:12px; color:var(--sub); margin-bottom:10px; }
.em-body { background:var(--ev-bg); color:var(--ev-ink); border-radius:12px; padding:28px 24px; overflow:hidden; }
.em-client { font-size:11px; letter-spacing:.18em; }
.em-title { display:block; font-size:clamp(26px,3.4vw,36px); line-height:1.08; margin:14px 0 10px; }
.em-title i { font-style:normal; color:var(--ev-mint); }
.em-sub { font-size:13px; color:var(--ev-sub); }
.em-cards { display:grid; grid-template-columns:1fr 1fr; gap:12px; margin:22px 0 16px; }
.em-card { background:var(--ev-card); border:1px solid var(--ev-edge); border-radius:8px; padding:14px; }
.em-card span { display:block; font-size:9px; letter-spacing:.16em; color:var(--ev-mint); margin-bottom:7px; }
.em-card strong { font-size:14px; line-height:1.4; }
.em-foot { display:block; font-size:10px; color:#c0cdd5; border-top:1px solid rgba(255,255,255,.14); padding-top:12px; }

/* 체험 · 상담 */
.try { border-bottom:0; }
.try-grid { display:grid; grid-template-columns:repeat(3,minmax(0,1fr)); gap:20px; align-items:stretch; }
.try-card { background:var(--paper); border:1px solid var(--line); border-radius:var(--r); padding:22px; display:flex; flex-direction:column; }
.tc-head { display:flex; align-items:center; justify-content:space-between; gap:10px; margin-bottom:10px; flex-wrap:wrap; }
.tc-head h3 { font-size:18px; }
.try-card > p { font-size:14px; color:var(--sub); line-height:1.8; }
.tc-links { display:flex; flex-wrap:wrap; align-items:center; gap:14px; margin-top:16px; }
.tc-meta { margin-top:12px; font-size:12.5px; color:var(--sub); line-height:1.75; }
#card-claw { background:var(--alt); }
.tc-contact { border-color:var(--accent-deep); }

/* 상태 배지 — 프로그램 카드와 체험 카드가 같은 상태를 쓴다 */
.badge[data-state="up"]      { background:var(--ok-bg);   color:var(--ok-ink); }
.badge[data-state="down"]    { background:var(--wait-bg); color:var(--wait-ink); }
.badge[data-state="unknown"] { background:#eef1f4;        color:#5a6b72; }

/* 사용할 수 없는 링크: 마우스·키보드 모두 실행되지 않게 한다.
   (pointer-events 만으로는 Tab+Enter 로 열린다 → href 를 떼고 aria-disabled 를 쓴다) */
.try-card [data-open][aria-disabled="true"] {
  pointer-events:none; cursor:default;
  background:#9aa79f; color:#fff; border-color:transparent;
}
.try-card a.text-link[aria-disabled="true"] { background:transparent; color:var(--sub); border-bottom-color:transparent; }

/* 체험 방법 카드 */
.tc-howto .howto-list { margin-top:4px; display:flex; flex-direction:column; gap:10px; }
.tc-howto .howto-list li { font-size:14px; color:var(--sub); line-height:1.7; }
.tc-howto .howto-list b { color:var(--ink); }
.tc-howto .howto-list i { font-style:normal; color:var(--accent-deep); font-weight:700; }
.tc-howto .howto-run { margin-top:16px; border-top:1px solid var(--line); padding-top:12px; }
.tc-howto .howto-run summary { cursor:pointer; font-size:13.5px; font-weight:700; min-height:40px; display:flex; align-items:center; }
.tc-howto .howto-run p { margin-top:8px; font-size:13px; color:var(--sub); line-height:1.8; }

/* 맞춤 브랜딩 — 교체 항목 번호와 예시 화면 */
.swap-list { margin-top:20px; display:grid; grid-template-columns:1fr 1fr; gap:10px 16px; }
.swap-list li { font-size:14px; color:var(--sub); display:flex; align-items:center; gap:9px; }
.swap-list b { color:var(--accent-deep); font-size:14px; }
.em-logo { display:block; width:150px; height:auto; margin-bottom:14px; }
.em-slot { display:block; font-size:11px; font-weight:700; color:var(--ev-mint); margin:12px 0 5px; }
.em-result { margin:14px 0 16px; padding:14px 16px; background:var(--ev-card); border:1px solid var(--ev-edge); border-radius:8px; }
.em-result-k { display:block; font-size:10px; letter-spacing:.12em; color:var(--ev-sub); }
.em-result-v { display:block; font-size:34px; font-weight:800; letter-spacing:.012em; margin:5px 0 4px; }
.em-result-v small { font-size:14px; font-weight:700; color:var(--ev-sub); margin-left:5px; }
.em-result-g { display:block; font-size:12px; color:var(--ev-sub); }
.sm-logo { display:block; width:132px; height:auto; margin-bottom:12px; }

/* ───────── 푸터 ───────── */
.site-foot { background:var(--ink); color:#eef3ea; padding:34px 0; }
.foot-inner { display:flex; justify-content:space-between; gap:22px; flex-wrap:wrap; align-items:flex-start; }
.foot-logo { font-size:17px; font-weight:700; white-space:nowrap; }
.foot-logo small { font-size:11px; font-weight:400; margin-left:7px; opacity:.75; }
.foot-note { font-size:12.5px; line-height:1.85; color:#c3cfc2; max-width:62ch; }
.foot-note strong { color:var(--accent); }

/* =========================================================
   반응형
   ========================================================= */
@media (max-width:900px) {
  .hero-grid { grid-template-columns:1fr; gap:38px; }
  .steps { grid-template-columns:repeat(2,minmax(0,1fr)); gap:22px; }
  .custom-grid { grid-template-columns:1fr; gap:30px; }
  .try-grid { grid-template-columns:1fr; }
  .prog-grid { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .brand-chain { grid-template-columns:1fr; gap:14px; }
  .brand-chain li + li::before { content:"↓"; left:50%; top:-13px; transform:translateX(-50%); }
  .head-nav { display:none; } /* 좁은 폭에서는 상단 메뉴 숨김 — 본문 순서로 탐색 */
}
@media (max-width:620px) {
  .wrap { padding:0 18px; }
  .only-wide { display:none; }
  .hero { padding:46px 0 44px; }
  .hero h1 { font-size:33px; }
  .section, .band { padding:46px 0; }
  .sec-top { flex-direction:column; align-items:flex-start; gap:10px; margin-bottom:26px; }
  .caption { max-width:none; }
  .steps, .prog-grid, .timeline, .em-cards { grid-template-columns:1fr; }
  .steps { gap:20px; }
  /* 휴대폰 목업을 큰 화면 아래로 내려 겹침 방지 */
  .scene { padding-bottom:0; }
  .phone-mock { position:static; width:132px; margin:-26px 0 0 auto; }
  .scene-foot { position:static; display:block; margin-top:14px; }
  .foot-inner { flex-direction:column; gap:14px; }
}
@media (max-width:380px) {
  :root { --head-h:77px; } /* 최소 폭에서 헤더가 한 줄 더 높아짐 */
  .logo-mark { font-size:20px; }
  .hero h1 { font-size:29px; }
  .btn { width:100%; }
  .tc-links { gap:10px; }
}

@media (prefers-reduced-motion:reduce) {
  html { scroll-behavior:auto; }
}

/* 휴대폰 체험 안내 — LAN 주소 목록 */
.lan-urls { margin-top:10px; display:flex; flex-direction:column; gap:7px; }
.lan-row { font-size:13px; color:var(--sub); }
.lan-row b { color:var(--ink); margin-right:7px; }
.lan-row a { color:var(--accent-deep); font-weight:700; word-break:break-all; border-bottom:1px solid var(--line); }