/* 우사기 텔레비전 -- approved layout "A · 버터 그림책" (design/player-ui-review/A.html): butter dotted page, cream paper page
   around the player, pink shelf with the watch controls. Fonts are bundled (fonts/, SIL OFL): Jua for headings/buttons,
   Gaegu for the handwritten body. No CDN. Sizes follow the real window (no fixed 850x620). */
@font-face { font-family: 'Jua'; src: url('fonts/Jua-Regular.woff2') format('woff2'); font-weight: 400; font-style: normal; font-display: block; }
@font-face { font-family: 'Gaegu'; src: url('fonts/Gaegu-Bold.woff2') format('woff2'); font-weight: 400 700; font-style: normal; font-display: block; }
:root { --cream: #fff8e6; --butter: #ffe9a6; --butter-d: #f7d36d; --blush: #ffd5dc; --blush-d: #f5a9b8; --ink: #4a3524; --line: #6b4f3a; --muted: #8a6a50; --mint: #dff1d8; --accent: #e77f95; }
html, body { margin: 0; height: 100%; overflow: hidden; color: var(--ink); font: 700 18px/1.3 'Gaegu', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }
/* Native title bars leave different content heights; let the footer shrink inside the actual viewport. */
body { display: flex; flex-direction: column; min-width: 520px; min-height: 0; background: var(--butter) radial-gradient(circle at 12px 12px, rgba(255, 255, 255, .55) 3px, transparent 4px) 0 0 / 34px 34px; }
button, select, input, h1 { font-family: 'Jua', 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif; }

/* top: sticker title + compact episode controls */
#bar { flex: none; position: relative; display: flex; align-items: center; gap: 10px; padding: 6px 14px 2px; }
.brand { display: flex; align-items: center; gap: 6px; flex: none; }
/* the approved idle PNG has a lot of transparent canvas: show just the character (scaled, cropped by the box; the art itself is untouched) */
.mascot-box { position: relative; display: block; width: 38px; height: 52px; overflow: hidden; flex: none; }
#mascot { position: absolute; left: -17px; top: -28px; width: 71px; height: 82px; max-width: none; } /* character ~34x50 px of the 832x960 canvas */
h1 { margin: 0; font-size: 22px; font-weight: 400; padding: 2px 14px 3px; background: var(--blush); border: 1.5px solid var(--line); border-radius: 15px 19px 16px 20px / 18px 14px 20px 16px; transform: rotate(-1.5deg); box-shadow: 2px 2px 0 rgba(107, 79, 58, .35); white-space: nowrap; }
.nav { display: flex; align-items: center; gap: 6px; flex: 1 1 auto; min-width: 0; justify-content: center; }
/* 펫 설정: blue pill in the TV chrome (outside the YouTube frame), pet face follows the theme; not the YouTube gear */
.petbtn { flex: none; order: 3; display: inline-flex; align-items: center; gap: 7px; padding: 3px 14px 4px 6px; font-size: 18px; white-space: nowrap; background: #dcedfc; border: 1.5px solid var(--line); border-radius: 999px; box-shadow: 0 3px 0 rgba(107, 79, 58, .45); }
.petbtn:hover:not(:disabled) { background: #fff; }
.petbtn img { width: 26px; height: 28px; padding: 1px; box-sizing: border-box; object-fit: contain; object-position: center; background: #fff; border: 1.2px solid var(--line); border-radius: 50%; }
#count { color: var(--muted); font: 400 16px 'Jua', sans-serif; white-space: nowrap; min-width: 52px; }

button { font-size: 16px; font-weight: 400; padding: 3px 14px 4px; color: var(--ink); background: var(--butter); border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; box-shadow: 0 2px 0 rgba(107, 79, 58, .35); }
button:hover:not(:disabled) { background: var(--blush); }
button:active:not(:disabled) { transform: translateY(1px); box-shadow: none; }
button:disabled { opacity: .4; cursor: default; }
#prev, #next { padding: 3px 11px 4px; background: #fff; }
select, input[type=text] { font-size: 16px; color: var(--ink); background: #fff; border: 1.5px solid var(--line); border-radius: 999px; padding: 3px 12px 4px; box-shadow: 0 2px 0 rgba(107, 79, 58, .3); }
#catalog { flex: 1 1 140px; min-width: 120px; max-width: 360px; text-overflow: ellipsis; }
:focus-visible { outline: 3px solid var(--blush-d); outline-offset: 2px; }

/* the cream picture-book page around the player; the video rectangle itself is square, unclipped and never covered */
/* The stage RESERVES its minimum (480x270 player + frame + page padding): the shelf can never take it back. */
#stage { flex: 1 0 auto; min-height: 300px; display: flex; margin: 4px 14px; box-sizing: border-box; }
.page { flex: 1 1 auto; min-width: 0; min-height: 292px; display: flex; flex-direction: column; align-items: center; padding: 8px 4px; box-sizing: border-box; position: relative; background: var(--cream); border: 1.5px solid var(--line); border-radius: 26px 30px 27px 31px / 30px 26px 31px 27px; box-shadow: 4px 5px 0 rgba(107, 79, 58, .3); }
.frame { flex: 1 1 auto; min-height: 0; max-width: 100%; display: flex; align-items: center; justify-content: center; padding: 4px; box-sizing: border-box; background: var(--butter); border: 1.5px solid var(--line); border-radius: 14px; box-shadow: 2px 3px 0 rgba(107, 79, 58, .3); }
/* nothing is ever layered over (or clipped around) the iframe (YouTube embed rules) */
#player-wrap { flex: none; position: relative; background: #000; height: 100%; aspect-ratio: 16 / 9; max-width: 100%; min-width: 480px; min-height: 270px; }
#player, #player iframe { position: absolute; inset: 0; width: 100%; height: 100%; border: 0; }

/* bottom: pink shelf with the watch controls */
#panel { flex: 0 1 auto; min-height: 58px; display: flex; flex-direction: column; position: relative; margin: 2px 14px 10px; padding: 6px 118px 6px 18px; box-sizing: border-box; background: var(--blush); border: 1.5px solid var(--line); border-radius: 24px 28px 24px 28px / 28px 24px 28px 24px; box-shadow: 3px 4px 0 rgba(107, 79, 58, .3); }
.shelf-main { display: flex; flex-direction: column; gap: 3px; min-width: 0; min-height: 0; flex: 1 1 auto; }
.toggles { flex: none; }
/* only this secondary region (status, notice, error, address box) shrinks and scrolls; the primary buttons above never do */
.secondary { flex: 1 1 auto; min-height: 0; max-height: 96px; overflow: auto; }
.toggles { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
#startover { font-size: 17px; padding: 5px 20px 6px; background: var(--butter-d); box-shadow: 0 3px 0 rgba(107, 79, 58, .4); }
#resume-btn { font-size: 17px; padding: 5px 18px 6px; background: #fff; box-shadow: 0 3px 0 rgba(107, 79, 58, .4); }
.pill { display: inline-flex; align-items: center; gap: 6px; padding: 3px 14px 4px 8px; background: #fff; border: 1.5px solid var(--line); border-radius: 999px; font: 400 16px 'Jua', sans-serif; cursor: pointer; }
.pill:has(input:checked) { background: var(--mint); }
.pill input { accent-color: var(--accent); width: 16px; height: 16px; margin: 0; }
/* catalog sync status: its own line in the shelf flow (never over the player or the controls); empty = zero height */
#sync-status { flex: none; color: var(--muted); font-size: 16px; line-height: 1.2; }
#notice { min-height: 0; color: #5b6b2a; font-size: 16px; }
#notice:has(#notice-text:empty) { display: none; }
#error { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 10px; border: 1.5px solid var(--line); background: #fff; padding: 3px 12px; border-radius: 14px; margin: 3px 0; }
#error[hidden] { display: none; }
#error strong { font: 400 17px 'Jua', sans-serif; }
#error p { flex: 1 1 100%; margin: 2px 0; font-size: 15px; line-height: 1.2; }
#error p[hidden] { display: none; }
/* the mascot sits on the shelf corner, outside the video rectangle */
.mascot-pic { position: absolute; right: 20px; bottom: 4px; width: 84px; height: 70px; overflow: hidden; pointer-events: none; }
.mascot-pic img { position: absolute; left: -34px; top: -53px; width: 146px; height: 168px; max-width: none; }
.bubble { position: absolute; right: 100px; top: -13px; background: #fff; border: 1.5px solid var(--line); border-radius: 14px; padding: 0 10px 1px; font-size: 16px; transform: rotate(-3deg); pointer-events: none; }
/* narrow TV (min 520): the chrome folds to two rows -- title + 펫 설정, then the episode controls */
@media (max-width: 760px) { #bar { flex-wrap: wrap; row-gap: 4px; } .brand { min-width: 0; } .petbtn { margin-left: auto; order: 2; } .nav { order: 3; flex: 1 1 100%; } }
/* narrow window / short window: drop decoration before functions */
@media (max-width: 680px) { #panel { padding-right: 18px; } .mascot-pic, .bubble { display: none; } }

/* Character themes (characters.js sets the palette variables on <html>; the icons are the character's own bundled art).
   Trimmed icons (themes/<id>.png) are already cropped to the figure, so they just fit their boxes. */
body[data-icon="trimmed"] .mascot-box { width: 46px; height: 52px; }
body[data-icon="trimmed"] #mascot { left: 0; top: 0; width: 100%; height: 100%; object-fit: contain; object-position: center bottom; }
body[data-icon="trimmed"] .mascot-pic img { left: 50%; top: 6px; width: 70px; height: auto; transform: translateX(-50%); }