/* =====================================================================
 *  키오런 연습하기 2 — 교육 셸 스타일
 *  키오스크 화면 자체는 NIA 배리어프리 디자인 시스템 CSS(bfk/)가 담당하고,
 *  이 파일은 바깥 교육 레이어(상단바·미션바·스케일 래퍼·인트로)만 꾸민다.
 * =================================================================== */

/* play.html(연습하기 1)과 동일한 팔레트: 화이트 메인 + 잉크 텍스트 + 포인트 블루 */
:root {
  --kl-bg: #2b2b2b;              /* 키오스크 주변 무대(블랙) */
  --kl-panel: #1c1c1c;           /* 미션바(블랙) */
  --kl-ink: #1a1a1a;
  --kl-muted: #5b5b5b;
  --kl-line: #e3e3e3;
  --kl-hi: #ffd400;
  --kl-brand: #5B94F5;           /* v1 --primary-strong */
  --kl-grad: linear-gradient(135deg, #A8C8FF 0%, #7AABFF 30%, #5B94F5 60%, #7EC8FF 100%);
}

html, body {
  margin: 0; height: 100%;
  font-family: "Pretendard", "Apple SD Gothic Neo", "Malgun Gothic", system-ui, sans-serif;
  background: var(--kl-bg) !important;
  user-select: none; -webkit-user-select: none; overscroll-behavior: none;
  word-break: keep-all; overflow: hidden;
}

/* bfk css의 body/height 간섭과 무관하게 항상 화면에 꽉 차도록 고정 */
#kl-app { position: fixed; inset: 0; display: flex; flex-direction: column; }
#kl-stage { min-height: 0; }

/* ----- 상단바 (화이트) ----- */
#kl-top { flex: 0 0 auto; }
.kl-topbar {
  display: flex; align-items: center; gap: 10px;
  background: #fff; color: var(--kl-ink); padding: 10px 14px;
  border-bottom: 1px solid var(--kl-line);
}
.kl-topbar .brand { font-size: 20px; font-weight: 900; }
.kl-topbar .badge { font-size: 13px; font-weight: 800; color: var(--kl-muted); background: #f1f3f7; padding: 4px 10px; border-radius: 999px; }
.kl-topbar .spacer { flex: 1; }
.kl-topbar button {
  border: 1px solid var(--kl-line); background: #fff; color: var(--kl-ink);
  font-size: 15px; font-weight: 700; padding: 8px 12px; border-radius: 9px;
  cursor: pointer; min-height: 40px; font-family: inherit;
}
.kl-topbar button:active { transform: scale(.96); background: #f1f3f7; }
.kl-topbar button.off { opacity: .45; text-decoration: line-through; }

/* ----- 키오스크 스테이지(스케일 래퍼) ----- */
#kl-stage { flex: 1 1 auto; position: relative; overflow: hidden; }
#kl-scale {
  position: absolute; transform-origin: top left;
  width: 1080px; height: 1920px;
  border-radius: 6px; overflow: hidden;
  box-shadow: 0 24px 60px rgba(0,0,0,.5);
}
/* bfk css의 container-wrap 여백 보정 */
#kl-scale .container-wrap { margin: 0; }

/* ----- 키오런 브랜딩 (원본 디자인 시스템 로고 → 키오런 로고) ----- */
#kl-scale .header__logo {
  background: url("logo.svg") no-repeat left center / contain;
  width: 405px; height: 46px;
}
.lower-screen #kl-scale .container::before {
  background-image: url("logo.svg");
  background-size: auto 66px;
}

/* ----- 민원발급기: 생년월일 키패드 (표준 버튼 스타일 재사용) ----- */
.kl-pin-display {
  margin: 24px auto 10px; width: 560px; height: 96px;
  display: flex; align-items: center; justify-content: center;
  font-size: 52px; font-weight: 800; letter-spacing: 6px; color: #262626;
  background: #fff; border: 2px solid #3D3D3D; border-radius: 12px;
}
.kl-keypad {
  margin: 18px auto 0; width: 560px;
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.kl-keypad .kl-key {
  width: 100% !important; min-width: 0 !important;
  height: 108px !important; font-size: 40px !important; font-weight: 800;
  display: flex; align-items: center; justify-content: center;
}

/* ----- 하단 미션바 (v1 learn-footer와 동일한 블랙) ----- */
#kl-footer { flex: 0 0 auto; background: var(--kl-panel); color: #fff; padding: 10px 14px; }
.kl-mission { display: flex; align-items: center; gap: 10px; min-height: 48px; font-size: 19px; font-weight: 800; line-height: 1.35; }
.kl-mission .kiki { font-size: 36px; flex: 0 0 auto; cursor: pointer; animation: kl-bob 2.4s ease-in-out infinite; }
.kl-mission b { color: var(--kl-hi); }
.kl-mission .kl-speak { border: 0; background: #333; color: #fff; border-radius: 9px; font-size: 15px; padding: 6px 9px; cursor: pointer; flex: 0 0 auto; font-family: inherit; }
.kl-progress { margin-top: 8px; height: 22px; background: #000; border-radius: 7px; overflow: hidden; position: relative; }
.kl-progress .fill { height: 100%; width: 0; background: linear-gradient(90deg, #ffb300, var(--kl-brand)); transition: width .35s ease; }
.kl-progress .ptext { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-size: 13px; font-weight: 800; }
@keyframes kl-bob { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-5px)} }

/* ----- 토스트 ----- */
.kl-toast {
  position: fixed; left: 50%; bottom: 120px; transform: translateX(-50%) translateY(20px);
  background: rgba(20,22,28,.95); color: #fff; font-size: 19px; font-weight: 800;
  padding: 14px 22px; border-radius: 14px; opacity: 0; pointer-events: none;
  transition: opacity .25s, transform .25s; z-index: 9999; max-width: 86vw; text-align: center;
  box-shadow: 0 10px 30px rgba(0,0,0,.4);
}
.kl-toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* ----- 미션 타겟 강조(초급) ----- */
.kl-target { position: relative; z-index: 5; animation: kl-pulse 1.2s ease-in-out infinite; }
@keyframes kl-pulse {
  0%,100% { box-shadow: 0 0 0 0 rgba(255,212,0,.95), 0 0 0 4px rgba(255,212,0,.9); }
  50%     { box-shadow: 0 0 0 14px rgba(255,212,0,0), 0 0 0 4px rgba(255,212,0,.9); }
}
.kl-hand {
  position: absolute; font-size: 64px; line-height: 1; z-index: 200; pointer-events: none;
  filter: drop-shadow(0 4px 6px rgba(0,0,0,.35));
  animation: kl-point .9s ease-in-out infinite;
}
@keyframes kl-point { 0%,100%{transform:translateY(0)} 50%{transform:translateY(-12px)} }

/* 오답 흔들기 */
.kl-shake { animation: kl-shake .35s; }
@keyframes kl-shake { 0%,100%{transform:translateX(0)} 25%{transform:translateX(-8px)} 75%{transform:translateX(8px)} }

/* ----- 인트로(연습·모드 선택) — v1 intro-hero와 동일한 화이트 톤 ----- */
.kl-intro {
  position: absolute; inset: 0; overflow-y: auto;
  background: linear-gradient(160deg, #ffffff 0%, #eaf3ff 100%);
  color: var(--kl-ink); display: flex; align-items: center; justify-content: center;
  padding: 20px 20px 64px; /* 하단 고정 영역과 겹치지 않게 */
}
.kl-intro-box { width: 100%; max-width: 560px; text-align: center; }
.kl-intro-tag { display: inline-block; font-size: 14px; font-weight: 800; color: var(--kl-muted); background: #fff; border: 1px solid var(--kl-line); border-radius: 999px; padding: 6px 14px; margin-bottom: 12px; letter-spacing: 1px; }
.kl-intro h1 {
  margin: 0 0 6px; font-size: 42px; font-weight: 900; letter-spacing: -1px;
  background: var(--kl-grad);
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
}
.kl-intro .sub { margin: 0 0 22px; font-size: 18px; font-weight: 600; color: var(--kl-ink); line-height: 1.55; }
.kl-intro .sub b { color: var(--kl-brand); }
.kl-modes { display: flex; flex-direction: column; gap: 12px; }
.kl-mode-btn {
  display: flex; align-items: center; gap: 14px; text-align: left;
  border: 1px solid var(--kl-line); border-radius: 16px; padding: 16px 18px; cursor: pointer;
  background: #fff; color: var(--kl-ink); font-family: inherit;
  box-shadow: 0 6px 18px rgba(91,148,245,.14);
}
.kl-mode-btn:active { transform: scale(.98); }
.kl-mode-btn .emoji { font-size: 34px; }
.kl-mode-btn > span:last-child { display: flex; flex-direction: column; }
.kl-mode-btn .t { font-size: 21px; font-weight: 900; }
.kl-mode-btn .d { font-size: 15px; color: #5a6577; margin-top: 2px; line-height: 1.4; }
.kl-intro .kl-links { margin-top: 18px; font-size: 14px; }
.kl-intro .kl-links a { color: var(--kl-muted); }

/* 하단 고정 영역 (이동 링크 + 출처표기) — 시선이 덜 가도록 맨 아래에 작게 */
.kl-intro-bottom {
  position: absolute; left: 0; right: 0; bottom: 8px;
  text-align: center; pointer-events: auto;
}
.kl-intro-bottom .kl-links { margin-top: 0; font-size: 12px; opacity: .55; }
.kl-intro-bottom .kl-credit { margin-top: 4px; font-size: 10px; color: #c6cdd8; }

/* 연습 선택 카탈로그 */
.kl-cards { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.kl-card {
  border: 1px solid var(--kl-line); border-radius: 16px; padding: 18px 10px 14px; cursor: pointer;
  background: #fff; color: var(--kl-ink); font-family: inherit; text-align: center;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  box-shadow: 0 6px 18px rgba(91,148,245,.14);
}
.kl-card:active { transform: scale(.97); border-color: var(--kl-brand); }
.kl-card .emoji { font-size: 40px; line-height: 1.2; }
.kl-card .t { font-size: 17px; font-weight: 900; }
.kl-card .d { font-size: 12.5px; color: var(--kl-muted); line-height: 1.35; }
.kl-card.soon { opacity: .6; cursor: default; box-shadow: none; background: #f7f9fc; }
.kl-card.soon .d { color: #98a1b0; }
@media (max-width: 520px) { .kl-cards { grid-template-columns: repeat(2, 1fr); } }
.kl-intro .kl-credit { margin-top: 18px; font-size: 11px; color: #b0b8c4; line-height: 1.5; }

/* 완료 축하 */
.kl-confetti { position: fixed; inset: 0; pointer-events: none; z-index: 9000; overflow: hidden; }
.kl-confetti span { position: absolute; top: -30px; font-size: 26px; animation: kl-fall linear forwards; }
@keyframes kl-fall { to { transform: translateY(110vh) rotate(720deg); opacity: .6; } }

/* 긴 상품명(세트·아이스 등) — 표준 CSS의 고정 행 높이를 넘지 않게 보정 */
/* 메뉴 화면 사이드 장바구니: 이름칸을 넓히고 한 줄 말줄임 */
#kl-scale .cart:not(.cart--lg) .cart-item { grid-template-columns: 390px 1fr 250px; }
#kl-scale .cart:not(.cart--lg) .cart-item__name {
  display: block; min-width: 0; font-size: 29px; line-height: 50px;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
/* 내역 확인: 최대 두 줄까지 허용하고 행 안에 들어가게 */
#kl-scale .cart--lg .cart-item__info { gap: 4px; min-width: 0; }
#kl-scale .cart--lg .cart-item__name {
  height: auto; max-height: 76px; font-size: 30px; line-height: 1.25;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: keep-all;
}

/* 업셀 모달 버튼 — 표준 CSS의 고정폭(text 190px) 때문에 6자 라벨이 깨져서 보정 */
#kl-scale .modal__button { width: 340px; }
#kl-scale .modal__button .modal__button-text { width: auto; height: auto; white-space: nowrap; }

/* 화면확대 — 표준 CSS에는 동작 정의가 없어 교육용으로 구현 */
.kl-zoom #kl-scale .container { overflow: auto; }
.kl-zoom #kl-scale .container-body { zoom: 1.25; }

/* 좁은 화면(모바일) 보정 */
@media (max-width: 640px) {
  .kl-topbar .brand { font-size: 17px; }
  .kl-mission { font-size: 16px; }
  .kl-intro h1 { font-size: 32px; }
}