/* 유자런 — 화면 스타일
 *
 * 🔴 네트워크 요청 0개 (결정 ⑤). ds/v1 을 링크하지 않고 토큰 값을 여기에 복제한다.
 *    교실 와이파이가 끊기면 런이 통째로 날아가기 때문이다(GAME_RULES R3).
 *    값이 바뀌면 ds/v1 과 함께 고친다 — 이름은 같게 둔다.
 *
 * 규격: yuja-design 스킬 · PLAN §9 · GAME_RULES §7
 *  · 100vh 금지 → 100dvh        · backdrop-filter 금지
 *  · radius 4종 / motion 3종     · 터치 타깃 44px
 *  · 이모지 금지 → 인라인 SVG    · 화면당 primary 1개
 */

:root {
  /* 브랜드 3색 — 역할이 정해진 색 */
  --brand-amber:  #F5C800;   /* 지금 눌러야 할 것 */
  --brand-orange: #F08C1E;   /* 따뜻한 유도·놀이 */
  --brand-leaf:   #4CAA48;   /* 성취·정답·나무 */
  --brand-forest: #142814;
  --ink-deep: #2B2A26;
  --ink:      #37352F;
  --steel:    #6F6E69;
  --cream:    #FAF9F6;

  /* 픽셀 팔레트 — toryong/css/toryong.css 와 같은 이름·같은 값(PLAN §9-6).
     저장소가 갈라져 있어 참조할 수 없으므로 복제한다. */
  --yj-px-soil:      #6B4A2F;
  --yj-px-soil-2:    #7A563A;
  --yj-px-grass:     #4CAA48;
  --yj-px-grass-dk:  #3A8637;
  --yj-px-fence:     #3E2C1C;
  --yj-px-ball:      #F5C800;
  --yj-px-ball-hi:   #FFE873;
  --yj-px-ball-sh:   #D9A800;
  --yj-px-ball-edge: #A67C00;
  --yj-px-eye:       #2A1A0C;
  --yj-px-crown:     #F5C800;
  --yj-px-crown-sh:  #C79E00;

  /* 유자런 전용 — 하늘·도로. 토큰에 없어 여기서 정의한다(하드코딩 HEX 금지 §6) */
  --yjr-sky:     #1D2B38;
  --yjr-sky-far: #16212B;
  --yjr-road:    #3A4A5A;
  --yjr-line:    rgba(255,255,255,.22);
  --yjr-txt:     #F2F4F6;
  --yjr-dim:     #93A1AE;
  --yjr-bad:     #FF6B6B;

  /* 바닥 6단계 (결정 ⑦ · GAME_RULES P1) */
  --yjr-floor-0: #2A2A2A;   /* 검정 */
  --yjr-floor-1: #7D7D78;   /* 시멘트 */
  --yjr-floor-2: #6B4A2F;   /* 흙 */
  --yjr-floor-3: #4CAA48;   /* 잔디 */
  --yjr-floor-4: #C97BB8;   /* 꽃길 */
  --yjr-floor-5: #F08C1E;   /* 유자숲 */

  /* 불변층 */
  --r-sm: 4px; --r-md: 8px; --r-lg: 16px; --r-full: 999px;
  --m-fast: 120ms; --m-mid: 200ms; --m-slow: 320ms;
  --ease: cubic-bezier(.2,.8,.2,1);
  --dock-h: 56px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-t: env(safe-area-inset-top, 0px);

  --font-ui: "Pretendard Variable", Pretendard, "Malgun Gothic",
             "Apple SD Gothic Neo", -apple-system, sans-serif;
}

* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }

body {
  font-family: var(--font-ui);
  background: var(--yjr-sky);
  color: var(--yjr-txt);
  min-height: 100dvh;              /* 🔴 100vh 금지 */
  -webkit-text-size-adjust: 100%;
}

/* ── 게임 화면 ───────────────────────────────────────────────────────
   셸(.yj-shell)을 씌우지 않는다 — __body 의 max-width:720px 가 캔버스를 조인다.
   토큰과 100dvh 만 빌린다(PLAN §9-7). */
.yjr-play {
  display: flex; flex-direction: column; align-items: center;
  overscroll-behavior: none;       /* 당겨서 새로고침 방지 */
  touch-action: none;
  user-select: none; -webkit-user-select: none;
}
#yjr-stage {
  position: relative; width: 100%; max-width: 520px; flex: 1;
  display: flex; flex-direction: column;
  padding-top: var(--safe-t);
}
#yjr-canvas { position: absolute; inset: 0; width: 100%; height: 100%; display: block; }

/* ── HUD — 어휘 배너 (GAME_RULES §7) ─────────────────────────────
   🔴 좌측 정렬이면 어휘가 구석에 쏠려 파악이 어렵다(실사용 지적).
   문이 출발하는 자리(지평선) **바로 위에 배너처럼** 가운데로 놓는다. */
#yjr-hud {
  position: relative; z-index: 2; pointer-events: none;
  padding: 10px 12px 0; display: flex; flex-direction: column; align-items: center;
}
#yjr-banner {
  width: 100%; max-width: 420px; text-align: center;
  background: rgba(10,17,24,.72); border-radius: var(--r-lg);
  padding: 12px 16px 14px;
}
#yjr-word { font-size: 34px; font-weight: 800; letter-spacing: -.02em; line-height: 1.12; }
#yjr-word .on  { color: var(--brand-amber); }
#yjr-word .off { opacity: .42; }
#yjr-mean { font-size: 16px; line-height: 1.35; opacity: .92; margin-top: 4px; }
#yjr-ex   { font-size: 14px; line-height: 1.35; color: var(--yjr-dim); margin-top: 2px; }
#yjr-syl  { margin-top: 8px; font-size: 14px; color: var(--yjr-dim); }
#yjr-syl b { color: var(--brand-amber); font-size: 21px; margin-left: 6px; }

#yjr-dots { display: flex; gap: 6px; margin: 8px 0 0; justify-content: center; }
#yjr-dots i {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: rgba(255,255,255,.2); display: block;
  transition: transform var(--m-mid) var(--ease), background var(--m-fast) var(--ease);
}
#yjr-dots i.done  { background: var(--brand-leaf); }
#yjr-dots i.miss  { background: var(--yjr-bad); }
#yjr-dots i.now   { background: var(--brand-amber); transform: scale(1.3); }
#yjr-dots i.nogate{ background: transparent; border: 1px dashed rgba(255,255,255,.35); }

/* 카운트·소대는 배너 위 얇은 줄 — 어휘와 다투지 않게 */
.yjr-meta {
  width: 100%; max-width: 420px; display: flex; align-items: center;
  justify-content: space-between; font-size: 12px; color: var(--yjr-dim);
  padding: 0 4px 6px;
}
.yjr-squad { display: flex; gap: 3px; }
.yjr-squad span {
  width: 9px; height: 9px; border-radius: var(--r-full);
  background: var(--yj-px-ball); display: block;
}

/* ── ② 건반 — 문 개수만큼 (오락실 건반식) ────────────────────────
   🔴 셋이 완전히 같아야 한다(P4) — 정답과 상관된 신호를 주지 않는다. */
#yjr-keys {
  position: relative; z-index: 3; width: 100%; max-width: 520px;
  display: grid; gap: 8px; padding: 10px 12px calc(12px + var(--safe-b));
}
.yjr-key {
  min-height: 72px; border: 0; border-radius: var(--r-md);
  background: rgba(255,255,255,.12); color: var(--yjr-txt);
  font: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background var(--m-fast) var(--ease), transform var(--m-fast) var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.yjr-key:active, .yjr-key.on { background: rgba(245,200,0,.30); transform: scale(.97); }
.yjr-key:focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 2px; }
.yjr-key span {
  width: 26px; height: 6px; border-radius: var(--r-full); background: rgba(255,255,255,.45);
}

/* ── 버튼 5종 ───/* ── 버튼 5종 ────────────────────────────────────────────────────── */
.yj-btn {
  font: inherit; border: 0; cursor: pointer; min-height: 44px;
  border-radius: var(--r-md); padding: 0 20px;
  transition: filter var(--m-fast) var(--ease), background var(--m-fast) var(--ease);
}
.yj-btn:active { transform: scale(.97); }
.yj-btn:focus-visible { outline: 2px solid var(--brand-amber); outline-offset: 2px; }
.yj-btn[disabled] { opacity: .4; cursor: not-allowed; }
.yj-btn--primary {
  background: var(--brand-amber); color: var(--ink-deep);   /* 앰버 위엔 잉크만 */
  font-weight: 800; min-height: 52px; border-radius: var(--r-full);
}
.yj-btn--secondary {
  background: rgba(245,200,0,.12); color: var(--brand-amber); font-weight: 700;
}
.yj-btn--ghost { background: transparent; color: var(--yjr-dim); }
.yj-btn--icon {
  width: 44px; height: 44px; min-height: 44px; padding: 0;
  border-radius: var(--r-full); background: rgba(255,255,255,.1);
  color: var(--yjr-txt); display: inline-flex; align-items: center; justify-content: center;
}
.yj-btn:hover { filter: brightness(.96); }

/* 매일학습 복귀 버튼(daily-return.js)은 좌상단에 붙는다 — HUD 어휘와 겹친다.
   버튼은 공용 파일이라 건드리지 않고(가산 전용) 이쪽이 비켜 준다. */
.yjr-has-return #yjr-hud { padding-top: 56px; }
.yjr-has-return #yjr-note-btn { top: calc(56px + var(--safe-t)); }

/* ── 오답노트 토글 (GAME_RULES §4) ─────────────────────────────────
   🔴 아이콘 버튼은 켜짐/꺼짐이 안 읽힌다(실사용 지적) → 스위치로 바꾼다. */
#yjr-note-btn {
  position: absolute; top: calc(10px + var(--safe-t)); right: 12px; z-index: 4;
  pointer-events: auto; display: flex; align-items: center; gap: 7px;
  background: rgba(10,17,24,.72); border: 0; border-radius: var(--r-full);
  padding: 7px 12px 7px 10px; min-height: 44px; cursor: pointer;
  color: var(--yjr-dim); font: inherit; font-size: 12px; font-weight: 700;
}
#yjr-note-btn .yjr-sw { background: rgba(255,255,255,.22); }
#yjr-note-btn.on { color: var(--yjr-txt); }
#yjr-note-btn.on .yjr-sw { background: var(--brand-leaf); }
#yjr-note-btn.on .yjr-sw i { left: 21px; }

/* ── 오답노트 팝업 ───────────────────────────────────────────────── */
#yjr-pop {
  position: fixed; inset: 0; z-index: 20; display: none;
  align-items: center; justify-content: center; padding: 20px;
  background: rgba(0,0,0,.78);          /* backdrop-filter 금지 — 불투명으로 가린다 */
}
#yjr-pop.show { display: flex; }
#yjr-card {
  background: var(--cream); color: var(--ink-deep);
  border-radius: var(--r-lg); padding: 22px 20px; width: 100%; max-width: 340px;
}
#yjr-card h2 { font-size: 20px; margin-bottom: 14px; }
#yjr-q { font-size: 17px; line-height: 1.55; }
#yjr-q .ansbox {
  display: inline-block; background: var(--brand-leaf); color: #fff;
  font-weight: 800; padding: 4px 12px; border-radius: var(--r-md); margin: 6px 0;
}
#yjr-q .pick {
  display: inline-block; background: rgba(0,0,0,.07);
  padding: 3px 10px; border-radius: var(--r-md); font-weight: 700;
}
#yjr-detail { width: 100%; margin-top: 16px; }
#yjr-warn { font-size: 12px; color: var(--steel); text-align: center; margin-top: 6px; }
.yjr-foot {
  display: flex; align-items: center; justify-content: space-between;
  margin-top: 16px; padding-top: 14px; border-top: 1px solid rgba(0,0,0,.1);
}
.yjr-toggle { display: flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; min-height: 44px; }
.yjr-sw {
  width: 40px; height: 22px; border-radius: var(--r-full); background: rgba(0,0,0,.18);
  position: relative; transition: background var(--m-fast) var(--ease);
}
.yjr-sw i {
  position: absolute; top: 3px; left: 3px; width: 16px; height: 16px;
  border-radius: var(--r-full); background: #fff;
  transition: left var(--m-mid) var(--ease);
}
.yjr-toggle.on .yjr-sw { background: var(--brand-leaf); }
.yjr-toggle.on .yjr-sw i { left: 21px; }

/* ── 결과 · 일시정지 ─────────────────────────────────────────────── */
.yjr-veil {
  position: absolute; inset: 0; z-index: 6; display: none;
  flex-direction: column; align-items: center; justify-content: center;
  background: var(--yjr-sky-far); padding: 24px; text-align: center; gap: 14px;
}
.yjr-veil.show { display: flex; }
.yjr-veil h2 { font-size: 26px; }
.yjr-big { font-size: 46px; font-weight: 800; color: var(--brand-leaf); }
.yjr-sub { color: var(--yjr-dim); font-size: 15px; line-height: 1.7; }
.yjr-cards { display: flex; flex-wrap: wrap; gap: 6px; justify-content: center; max-width: 380px; }
.yjr-rows {
  display: flex; flex-wrap: wrap; gap: 6px 14px; justify-content: center;
  max-width: 380px; font-size: 15px;
}
.yjr-rows .yjr-row {
  display: flex; align-items: center; gap: 5px; text-decoration: none;
  color: var(--yjr-txt); border-bottom: 1px dashed rgba(255,255,255,.28);
  padding-bottom: 1px;
}
.yjr-rows .yjr-row:hover { color: var(--brand-amber); }
.yjr-rows b.o { color: var(--brand-leaf); }
.yjr-rows b.x { color: var(--yjr-bad); }
.yjr-cards b {
  font-size: 13px; font-weight: 700; padding: 5px 10px;
  background: rgba(255,255,255,.1); border-radius: var(--r-sm);
}

/* 🔴 앱 WebView — app-safe-area.css 가 body 하단에 60px 를 강제한다.
   캔버스가 도크바에 잘리므로 yj-env-app 일 때만 보정한다(PLAN §8-3). */
.yj-env-app .yjr-play { padding-bottom: calc(60px + var(--safe-b)); }

/* 가로 화면 안내 (I9) */
#yjr-rotate { display: none; }
@media (orientation: landscape) and (max-height: 480px) {
  #yjr-rotate {
    display: flex; position: fixed; inset: 0; z-index: 30;
    align-items: center; justify-content: center; text-align: center;
    background: var(--yjr-sky-far); padding: 24px; font-size: 17px;
  }
}

/* 모션 민감 — 연습 모드로 시작한다(PLAN §7-6) */
@media (prefers-reduced-motion: reduce) {
  * { animation-duration: .01ms !important; transition-duration: .01ms !important; }
}

/* ── 로비 ────────────────────────────────────────────────────────── */
.yjr-lobby { background: var(--cream); color: var(--ink); }
.yjr-lobby main { max-width: 520px; margin: 0 auto; padding: 24px 16px calc(var(--dock-h) + 24px + var(--safe-b)); }
.yjr-lobby h1 { font-size: 28px; font-weight: 800; color: var(--ink-deep); }
.yjr-lobby .lead { color: var(--steel); font-size: 17px; margin-top: 6px; line-height: 1.5; }
.yjr-card {
  background: #fff; border-radius: var(--r-lg); padding: 18px 16px; margin-top: 16px;
  box-shadow: 0 1px 3px rgba(0,0,0,.06);
}
.yjr-card h2 { font-size: 15px; color: var(--steel); font-weight: 700; margin-bottom: 10px; }
.yjr-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.yjr-chip {
  font: inherit; font-size: 14px; border: 0; cursor: pointer;
  min-height: 44px; padding: 0 14px; border-radius: var(--r-md);
  background: rgba(0,0,0,.05); color: var(--ink);
  transition: background var(--m-fast) var(--ease);
}
.yjr-chip.on { background: var(--brand-amber); color: var(--ink-deep); font-weight: 700; }
.yjr-start { width: 100%; margin-top: 20px; }