/* 밥캠 시험판 화면 — WIREFRAME-001: 5화면 B 놀이 + C 점검·고급.
   B는 밝은 고정 색(목업과 같음). 외부 폰트 0: 기기 글꼴(둥근 느낌은 굵기·크기로). */
:root {
  --cream: #fff4c9; --cream-2: #ffe9a8; --brown: #4a2a12; --brown-soft: #8a6a4e;
  --orange: #ff7b3a; --orange-dark: #c95a22; --star: #f5a300; --white: #fff; --line: #f1dcae;
  --sky: #6fc3e8; --bad: #b3261e;
  --tap: 52px;
}
* { box-sizing: border-box; }
html { color-scheme: light; -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--cream); color: var(--brown);
  font: 18px/1.45 system-ui, -apple-system, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", sans-serif;
  -webkit-tap-highlight-color: transparent; overscroll-behavior: none;
}
[hidden] { display: none !important; }
.defs { position: absolute; width: 0; height: 0; overflow: hidden; }
main { max-width: 560px; margin: 0 auto; min-height: 100dvh; }

.screen {
  min-height: 100dvh; display: flex; flex-direction: column; align-items: center; text-align: center;
  gap: 10px; padding: max(16px, env(safe-area-inset-top)) 16px max(16px, env(safe-area-inset-bottom));
}
.title { font-size: 1.9rem; font-weight: 800; letter-spacing: -0.02em; margin: 8px 0 0; }
.say { font-size: 1.15rem; margin: 0; }
.small { font-size: 0.9rem; color: var(--brown-soft); margin: 0; }
.note { font-size: 0.85rem; color: var(--brown-soft); margin: 4px 0 0; }
.label { font-size: 1.1rem; font-weight: 700; margin: 12px 0 0; align-self: flex-start; text-align: left; }
.status { min-height: 1.4em; margin: 0; font-size: 0.95rem; }
.error { color: var(--bad); text-align: center; padding: 0 16px; margin: 0; }
.error:empty { display: none; }

/* 시작·기록: 위(밥이) · 아래(누를 것). 세로는 한 줄로 이어지고, 가로는 두 칸 */
.hero, .actions { display: flex; flex-direction: column; align-items: center; gap: 10px; width: 100%; }
.actions { flex: 1; }

/* 밥이·별 */
.bapi { display: block; }
.bapi.big { width: min(52vw, 220px); aspect-ratio: 120 / 92; margin: 6px auto; }
.bapi.huge { width: min(56vw, 260px); aspect-ratio: 120 / 92; }
.bapi.mini { width: 52px; aspect-ratio: 120 / 92; flex: none; }
.staricon { width: 1.3em; height: 1.3em; vertical-align: -0.25em; margin-right: 2px; }
.starcount { font-size: 1.5rem; font-weight: 800; margin: 0; white-space: nowrap; }
.starrow { display: flex; flex-wrap: wrap; justify-content: center; gap: 2px; margin: 0; max-width: 100%; }
.starrow .staricon { width: 34px; height: 34px; margin: 0; }
.starrow .more-stars { font-size: 1.4rem; font-weight: 800; align-self: center; margin-left: 4px; }

/* 버튼·알약 */
button { font: inherit; color: inherit; cursor: pointer; touch-action: manipulation; }
.btn {
  width: 100%; min-height: 64px; border: 0; border-radius: 20px; background: var(--orange); color: var(--white);
  font-size: 1.6rem; font-weight: 800; box-shadow: 0 4px 0 var(--orange-dark); margin-top: 6px;
}
.btn:active { transform: translateY(3px); box-shadow: 0 1px 0 var(--orange-dark); }
.btn:disabled { opacity: 0.55; }
.btn.ghost { background: var(--white); color: var(--brown); box-shadow: 0 4px 0 var(--line); font-size: 1.2rem; min-height: 52px; }
.pills { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.settings .pills { justify-content: flex-start; align-self: stretch; }
.pill {
  display: inline-flex; align-items: center; min-height: var(--tap); padding: 0 20px; border-radius: 999px;
  background: var(--white); border: 3px solid var(--white); font-size: 1.15rem; font-weight: 700; cursor: pointer;
}
.pill.on { border-color: var(--orange); }
.settings .pill.on { background: var(--orange); color: var(--white); }
.link {
  background: transparent; border: 0; min-height: 44px; padding: 0 10px; color: var(--brown-soft);
  font-size: 0.95rem; text-decoration: underline; text-underline-offset: 3px; position: relative;
}
.parent { display: flex; flex-wrap: wrap; justify-content: center; align-items: center; gap: 2px 6px; }

/* 길게 누르기: 아래 막대가 차오른다 */
.hold { text-decoration: none; border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.hold .ring { position: absolute; left: 0; bottom: 0; height: 4px; width: 100%; background: var(--orange); transform: scaleX(0); transform-origin: left; }
.hold.pressing .ring { transform: scaleX(1); transition: transform 0.8s linear; }

/* 식사 전 점검 (C) */
.check { align-self: stretch; background: var(--white); border-radius: 16px; padding: 12px; display: flex; flex-direction: column; align-items: center; gap: 6px; }
.check-title { font-weight: 800; margin: 0; }
.checkview { position: relative; width: min(62vw, 240px); aspect-ratio: 3 / 4; border-radius: 12px; overflow: hidden; background: #2a2a2a; }
.checkview .preview { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; border-radius: 0; }
.facebox { position: absolute; border: 3px dashed var(--orange); border-radius: 45%; pointer-events: none; }
.facebox.guide { left: 28%; top: 18%; width: 44%; height: 50%; border-color: rgba(255, 255, 255, 0.7); }
.nums { display: grid; grid-template-columns: auto 1fr; gap: 4px 12px; margin: 0; width: 100%; text-align: left; font-variant-numeric: tabular-nums; }
.nums dt { color: var(--brown-soft); white-space: nowrap; }
.nums dd { margin: 0; font-weight: 700; text-align: right; }

/* 먹는 중·멈춤 */
.screen.meal { padding: 0; gap: 0; background: #000; }
.stage { position: relative; flex: 1; width: 100%; display: flex; background: #000; min-height: 50dvh; }
#movie { width: 100%; flex: 1; object-fit: contain; background: #000; max-height: calc(100dvh - 150px); }
.pausecover {
  position: absolute; inset: 0; background: var(--cream); display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 10px; text-align: center; padding: 16px;
}
.band { width: 100%; display: flex; align-items: center; gap: 10px; padding: 8px 14px; background: var(--cream); }
.band .cheer { font-size: 1.4rem; font-weight: 800; }
.band .starcount { margin-left: auto; }
.meal .meta { width: 100%; background: var(--cream-2); padding: 4px 8px; font-size: 0.9rem; gap: 2px 10px; }
.testbox { width: 100%; background: var(--white); padding: 6px; font-size: 0.85rem; }
.credit { width: 100%; margin: 0; padding: 4px 8px; font-size: 0.75rem; color: #c9c2b0; background: #000; }
.credit:empty { display: none; }

/* 카메라 미리보기(구석) */
#camdock { position: fixed; right: 8px; top: max(8px, env(safe-area-inset-top)); z-index: 5; }
.preview { width: 72px; height: 96px; object-fit: cover; border-radius: 10px; transform: scaleX(-1); background: #000; border: 2px solid var(--white); display: block; }
.preview.off { width: 1px; height: 1px; opacity: 0; border: 0; } /* display:none이면 장면 콜백이 멈출 수 있어 숨기지 않고 줄인다 */

/* 기록 */
.card { background: var(--white); border-radius: 14px; padding: 10px 14px; margin: 0; font-size: 1.1rem; font-weight: 700; align-self: stretch; }
.more { align-self: stretch; text-align: left; background: var(--white); border-radius: 14px; padding: 4px 12px; }
.more summary { min-height: 44px; display: flex; align-items: center; font-weight: 700; cursor: pointer; }
.more[open] { padding-bottom: 12px; }
textarea { width: 100%; font: 0.85rem/1.4 ui-monospace, monospace; padding: 8px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); color: inherit; }
.meals { padding-left: 1.2em; font-size: 0.85rem; margin: 4px 0; }

/* 설정 */
.settings { align-items: stretch; text-align: left; }
.settings .title, .settings > .small:first-of-type { text-align: center; }
#advanced label, fieldset label { display: flex; align-items: center; justify-content: space-between; gap: 8px; min-height: 44px; font-size: 0.95rem; }
fieldset label { justify-content: flex-start; }
fieldset { border: 1px solid var(--line); border-radius: 10px; margin: 8px 0 0; }
.num { width: 5.5em; font: inherit; min-height: 40px; padding: 0 6px; border: 1px solid var(--line); border-radius: 8px; background: var(--cream); }
input[type=checkbox] { width: 22px; height: 22px; accent-color: var(--orange); }

/* 가로(플립 펼쳐 눕힘·태블릿) */
@media (orientation: landscape) and (max-height: 560px) {
  main { max-width: none; }
  .screen.start, .screen.log { flex-direction: row; align-items: center; gap: 24px; }
  .screen.start .hero, .screen.log .hero { flex: 1; }
  .screen.start .actions, .screen.log .actions { flex: 1; justify-content: center; }
  .title { font-size: 1.6rem; margin-top: 0; }
  .bapi.big { width: min(24vw, 180px); }
  .bapi.huge { width: min(22vw, 150px); }
  .pausecover { gap: 4px; }
  /* 먹는 중·멈춤: 한 화면 안에(넘쳐서 밀리지 않게). 부모 줄·출처는 영상 위에 작게 */
  .screen.meal { height: 100dvh; min-height: 0; overflow: hidden; position: relative; }
  .stage { min-height: 0; }
  #movie { max-height: 100%; height: 100%; }
  .band { padding: 4px 14px; }
  .band .cheer { font-size: 1.2rem; }
  .meal .meta { position: absolute; left: 0; top: 0; width: auto; max-width: 70%; background: rgba(255, 233, 168, 0.88); border-radius: 0 0 12px 0; }
  .testbox { position: absolute; left: 0; top: 52px; width: auto; border-radius: 0 12px 12px 0; }
  .credit { position: absolute; right: 0; bottom: 64px; width: auto; max-width: 60%; background: rgba(0, 0, 0, 0.55); border-radius: 8px 0 0 8px; }
}
/* 멈춤엔 영상이 안 보이므로 출처 줄도 숨긴다(재생 중엔 늘 보임) */
body[data-screen="paused"] .credit { display: none; }