/* 액자 — 캔버스 하나를 화면에 앉히는 것이 전부다.
 *
 * HUD·쪽지·단추는 전부 캔버스가 그린다(src/ui.js, 2026-09-27 「UI 는 엔진 렌더링으로」).
 * 여기 남은 것: 글꼴 등록(캔버스도 이 @font-face 를 쓴다), 판 크기, 넓은 화면의 기둥, 안전 영역 프로브, 시험 배지.
 * 껍데기 색은 CSS 가 아니라 window.__SKIN(ui.js 토큰)으로 갈아 끼운다.
 */
* { box-sizing: border-box; }


/* 메뉴 글씨 — 저작권 걱정 없는 귀여운 둥근 글꼴(Fredoka, SIL OFL).
 * 우리가 파일을 안고 간다 — 구글 폰트 주소를 부르면 크레이지게임스 iframe 이나
 * 광고 차단기 뒤에서 글꼴이 안 내려와 화면이 제각각이 된다.
 * 한글은 이 글꼴에 없으니 뒤의 시스템 글꼴이 받는다(라틴만 갈아 끼운다). */
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("art/font/fredoka-latin.woff2") format("woff2");
  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC,
    U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
}
@font-face {
  font-family: 'Fredoka'; font-style: normal; font-weight: 300 700; font-display: swap;
  src: url("art/font/fredoka-latin-ext.woff2") format("woff2");
  unicode-range: U+0100-024F, U+0259, U+1E00-1EFF, U+2020, U+20A0-20AB, U+20AD-20CF,
    U+2113, U+2C60-2C7F, U+A720-A7FF;
}

/* 한글은 주아(배달의민족 주아, SIL OFL). **이 게임에 나오는 글자만** 깎아 담았다
 * (tools/subset-kr.py — 2.1MB 원본을 그대로 실으면 토스 번들이 무거워진다).
 * 새 한글 문구를 넣으면 빌드가 「빠진 글자」를 일러 준다. */
@font-face {
  font-family: 'Jua'; font-style: normal; font-weight: 400; font-display: swap;
  src: url("art/font/jua-kr.woff2") format("woff2");
}

html, body {
  margin: 0; padding: 0; height: 100%;
  background: #87d5fc;
  font: 15px/1.4 'Fredoka', 'Jua', -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", system-ui, sans-serif;
  -webkit-user-select: none; user-select: none;
  -webkit-tap-highlight-color: transparent;
  overscroll-behavior: none;
}
#app { position: fixed; inset: 0; }

/* ── 넓은 화면(PC·크레이지게임스) ───────────────────────
 * 가로가 넓어지면 세로 판을 **가운데 기둥**으로 세운다.
 * 그냥 늘렸더니 판은 화면 한가운데 조그맣게 뜨고 위 띠만 끝에서 끝까지 늘어났다
 * (2026-09-16 1280×720 확인). 양옆은 어둡게 둔다 — 포털 화면이 원래 어둡다. */
@media (min-aspect-ratio: 3/4) {
  /* 양옆은 **이 판의 배경 그림을 선명하게** 거울로 이어 붙인다(2026-10-01 사장님 「흐린 배경부터 선명한 배경으로」, docs/LANDSCAPE.md).
   * [그림][거울][  판 기둥  ][거울][그림]… — 기둥과 거울, 거울과 바깥 그림이 같은 가장자리끼리 만나 이음매가 없다.
   * 그림 주소는 게임이 지금 판의 것을 --pb-bg 로 적는다(game.js backdrop). 오기 전엔 낮 그림.
   * 예전엔 고정 그림(bg-day)을 흐리게(blur 34px) 깔았다 — 동네와 안 맞고 흐릿했다. 단색은 기둥 경계가 칼처럼 그어졌다(2026-09-16) */
  html {
    --pb-col: min(100vw, calc(100vh * 0.5625));
    /* 양옆은 살짝 어둡게(검정 28% = 아래 거울의 brightness .72) — 선명하되 **판(벽)이 어디까지인지** 보여야 벽 튕기기를 겨눈다 */
    background: linear-gradient(rgba(0,0,0,0.28), rgba(0,0,0,0.28)), var(--pb-bg, url("art/bg-day.jpg")) center top / var(--pb-col) 100vh repeat-x, #0d1a29;
  }
  body { background: transparent; }
  /* 거울 두 장은 html 의 가짜 요소 — body::after 는 시험 계정 띠가 쓴다 */
  html::before, html::after {
    content: ""; position: fixed; top: 0; height: 100vh; width: calc(var(--pb-col) + 2px); z-index: -1;   /* +2px — 바깥 그림과 반올림 틈(1px 줄)을 덮는다 */
    background: var(--pb-bg, url("art/bg-day.jpg")) center / 100% 100% no-repeat;
    transform: scaleX(-1);
    filter: brightness(0.72);
  }
  html::before { right: calc(50% + var(--pb-col) / 2); }
  html::after { left: calc(50% + var(--pb-col) / 2); }
  #app {
    left: 50%; right: auto; transform: translateX(-50%);
    width: var(--pb-col);
  }
}

/* ── 가로 액자(docs/LANDSCAPE-FRAMED.md, 2026-10-02) ───────────────────
 * game.js resize 가 화면 꼴을 html[data-layout] 에 적는다(portrait·column·land·rotate). 가로(land)·폰 가로(rotate)는
 * 캔버스를 화면 가득 편다 — 세상 그림·액자·판·HUD 를 캔버스가 다 그린다(render.js landWorld). 양옆 거울은 끈다 */
html[data-layout="land"], html[data-layout="rotate"] { background: #0d1a29; }
html[data-layout="land"] #app, html[data-layout="rotate"] #app { left: 0; right: 0; transform: none; width: auto; }
html[data-layout="land"]::before, html[data-layout="land"]::after, html[data-layout="rotate"]::before, html[data-layout="rotate"]::after { display: none; }
/* 기둥(column — iPad·폴더블 세로, 정사각에 가까운 창)도 캔버스를 화면 가득(2026-10-02 docs/PORTRAIT-WALLS.md) — 판 양옆 여백에
 * 캔버스가 돌 옆벽과 흐리고 어두운 세상 그림을 그린다(render.js sideWalls). CSS 거울은 벽을 그릴 자리가 없어 끈다 */
html[data-layout="column"] { background: #0d1a29; }
html[data-layout="column"] #app { left: 0; right: 0; transform: none; width: auto; }
html[data-layout="column"]::before, html[data-layout="column"]::after { display: none; }
/* 스플래시 한 장(build-cg 의 캔버스 바탕)은 액자 자리(높이 88.9%)에만 */
html[data-layout="land"] #cv { background-color: transparent; background-size: auto 88.9%; background-position: center; }

/* 판이 화면을 다 쓴다 */
#field { position: absolute; inset: 0; }
/* 캔버스가 첫 장을 그리기 전에도 스플래시 하늘색 — 첫 화면은 스플래시다(2026-09-28) */
/* -webkit-touch-callout — iOS 길게 누르기 저장 메뉴(안드로이드는 input.js 의 contextmenu 막기, 2026-10-01) */
#cv { display: block; width: 100%; height: 100%; touch-action: none; -webkit-touch-callout: none; background: #73bdfd; }
/* 안전 영역 프로브 — 캔버스는 env() 를 못 읽는다. game.js resize() 가 이 padding 을 읽어 UI.layout 에 넘긴다 */
#safe {
  position: absolute; left: 0; top: 0; width: 0; height: 0; visibility: hidden; pointer-events: none;
  padding: env(safe-area-inset-top, 0px) env(safe-area-inset-right, 0px) env(safe-area-inset-bottom, 0px) env(safe-area-inset-left, 0px);
  /* 안드로이드 앱(Capacitor SystemBars) — 오래된 WebView 는 env() 가 0 이라 셸이 --safe-area-inset-* 로 시스템 바 높이를 준다(docs/ANDROID-PLAY.md).
   * 변수가 없으면(웹·아이폰) 위 줄의 env() 가 그대로 산다 */
  padding: var(--safe-area-inset-top, env(safe-area-inset-top, 0px)) var(--safe-area-inset-right, env(safe-area-inset-right, 0px))
           var(--safe-area-inset-bottom, env(safe-area-inset-bottom, 0px)) var(--safe-area-inset-left, env(safe-area-inset-left, 0px));
}

/* 시험용 계정임을 알린다 — 평소 기록과 딴 서랍을 쓴다(개발용이라 CSS 로 둔다). 글은 언어 표에서(game.js 가 data-test-label 에) */
body[data-test="1"]::after {
  content: attr(data-test-label);
  position: fixed; left: 0; bottom: calc(env(safe-area-inset-bottom) + 2px);
  z-index: 20; padding: 3px 9px 3px 7px; border-radius: 0 999px 999px 0;
  background: rgba(226,87,76,0.9); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: 0.4px;
  pointer-events: none;
}

/* 스플래시 한 장(build-cg.mjs, 2026-09-28) */
#cv { background: #73bdfd url("art/splash-9x16-v1.jpg") center / 100% auto no-repeat; }
@media (max-aspect-ratio: 10/19) { #cv { background-image: url("art/splash-9x20-v1.jpg"); } }
html { --pb-bg: url("art/splash-9x16-v1.jpg"); }