/* 연산왕 플레이 호스트 — 게임 iframe 을 담는 껍데기. 토큰은 assets/css/c2m_ds.css.
   게임 자체의 스타일은 iframe 안에 갇혀 있어 여기서 건드릴 수 없고, 건드리지 않는다. */

body.king-play {
  margin: 0;
  background: var(--c-bg-king);
  background-attachment: fixed;
  min-height: 100vh;
}

.kp-main {
  width: var(--page-w);
  max-width: calc(100% - 40px);
  margin: 0 auto;
  padding: var(--sp-6) 0 var(--sp-12);
  box-sizing: border-box;
}

/* ── 상단 바 ─────────────────────────────────────────────────── */
.kp-bar {
  display: flex;
  align-items: center;
  gap: var(--sp-4);
  margin-bottom: var(--sp-5);
}
.kp-back {
  flex: none;
  padding: var(--sp-2) var(--sp-4);
  border-radius: var(--r-pill);
  background: rgba(255,255,255,.7);
  color: var(--c-gray);
  text-decoration: none;
  font-family: 'Pretendard-Medium', sans-serif;
  font-size: 14px; line-height: 20px;
}
.kp-back:hover { background: #fff; color: var(--c-text); }

.kp-meta {
  display: flex; align-items: baseline; gap: var(--sp-2);
  font-family: 'Pretendard-Regular', sans-serif;
  font-size: 14px; color: var(--c-gray);
}
.kp-meta strong {
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 18px; color: var(--fx-brand);
}


/* ── 게임 무대 ────────────────────────────────────────────────
   게임은 폭 420px 모바일 프레임이다. 늘리지 않고 가운데 세운다 — 게임 쪽 CSS 가
   768px 이상에서 이미 모서리 48px + 그림자를 줘 폰 목업처럼 보이게 만들어 두었다.
   높이는 게임의 min-height:850px 에 맞춘다(그보다 낮으면 내부 스크롤이 생긴다). */
.kp-stage {
  display: flex;
  justify-content: center;
}
.kp-frame {
  width: 100%;
  max-width: 460px;      /* 420px 프레임 + 좌우 여백(게임의 .stage padding) */
  height: 920px;
  border: 0;
  border-radius: var(--r-hero);
  background: transparent;
  display: block;
}

@media (max-width: 860px) {
  .kp-main { padding-top: var(--sp-4); }
  .kp-bar { flex-wrap: wrap; gap: var(--sp-2); }
  /* 모바일에서는 게임이 화면을 꽉 쓴다 — 게임 자체가 모바일 우선으로 만들어져 있다. */
  .kp-frame { max-width: 100%; height: 100dvh; border-radius: 0; }
}

/* ── 게임 시작 전 안내(비로그인 · 스태프) ─────────────────────────
   게임 바로 위, **게임과 같은 폭**으로 세운다. 상단 바 구석의 작은 링크는 "게임 시작"을
   누르기 직전의 학생 눈에 안 들어온다 — 그리고 그 순간을 놓치면 되돌릴 수 없다.
   비로그인은 플레이 토큰을 못 받으므로 그 판 점수는 저장할 방법이 아예 없다.
   플레이 자체는 막지 않는다(연산왕은 전원 개방). 덮개나 모달이 아니라 띠인 이유다.

   #kp_guest(비로그인)와 #kp_staff(원장·선생님, king_play.php)가 이 클래스 하나를 같이 쓴다 —
   둘은 상호 배타적이라(로그인 여부가 갈라놓는다) 동시에 안 뜨고, 새 패널 관용구를 만들
   이유도 없다. 스태프 쪽은 CTA(.kp-guest__cta)가 없다 — 되돌릴 방법이 없는 상태라 버튼을
   두면 거짓이 된다. */
.kp-guest {
  width: 100%;
  max-width: 460px;              /* .kp-frame 과 같은 폭 — 게임의 일부처럼 읽힌다 */
  margin: 0 auto var(--sp-4);
  padding: var(--sp-4) var(--sp-5);
  box-sizing: border-box;
  border-radius: var(--r-3, 16px);
  background: rgba(255, 255, 255, .92);
  box-shadow: 0 6px 20px rgba(0, 0, 0, .10);
  text-align: center;
}
.kp-guest__lead {
  margin: 0 0 var(--sp-1);
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 16px;
  color: var(--c-text);
}
.kp-guest__lead strong { color: #d3483e; }   /* 무엇을 잃는지가 핵심이라 거기만 강조한다 */
.kp-guest__sub {
  margin: 0 0 var(--sp-3);
  font-size: 14px;
  line-height: 1.5;
  color: #5b6660;
  word-break: keep-all;          /* 한글을 단어 중간에서 끊지 않는다 */
}
.kp-guest__cta {
  display: inline-block;
  padding: var(--sp-2) var(--sp-6);
  border-radius: var(--r-pill);
  background: var(--fx-brand);
  color: #fff;
  text-decoration: none;
  font-family: 'Pretendard-Bold', sans-serif;
  font-size: 15px;
}
.kp-guest__cta:hover { background: #00827b; color: #fff; }
.kp-guest__cta:focus-visible { outline: 3px solid #1a73e8; outline-offset: 2px; }

@media (max-width: 860px) {
  .kp-guest { max-width: 100%; }
}