/* 요리 모드: 위·아래 메뉴 없이 전체 화면, 큰 글씨 */
.page.bare { max-width: 760px; padding: 0; min-height: 100dvh; }
.cook { display: flex; flex-direction: column; min-height: 100dvh; background: var(--bg); }
.cook-head { position: sticky; top: 0; z-index: 2; display: flex; align-items: center; gap: var(--sp-3); padding: 10px var(--space); background: var(--surface); border-block-end: 1px solid var(--line); }
.cook-x { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 50%; font-size: 1.75rem; line-height: 1; color: var(--text); text-decoration: none; background: var(--surface-2); }
.cook-title { flex: 1; min-width: 0; display: grid; }
.cook-title b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cook-title span { font-size: var(--fs-sm); color: var(--brand-text); font-weight: 700; }
.cook-ing-btn { min-height: 36px; padding: 0 14px; border-radius: var(--radius-pill); border: 1px solid var(--line-strong); background: var(--surface); font: inherit; font-weight: 700; font-size: var(--fs-sm); cursor: pointer; }
.cook-ing-btn[aria-expanded="true"] { background: var(--text); color: var(--surface); border-color: var(--text); }
.cook-bar { height: 4px; background: var(--line); }
.cook-bar span { display: block; height: 100%; inline-size: 0; background: var(--brand); transition: inline-size .25s ease; }

.cook-ing { padding: var(--sp-3) var(--space); background: var(--surface); border-block-end: 1px solid var(--line); max-height: 45dvh; overflow-y: auto; }
.cook-ing h3 { margin: var(--sp-2) 0 4px; font-size: var(--fs-sm); color: var(--brand-text); }
.cook-ing ul { list-style: none; margin: 0; padding: 0; }
.cook-ing label { display: flex; align-items: center; gap: var(--sp-3); min-height: 44px; border-block-end: 1px dashed var(--line); font-size: 1.0625rem; cursor: pointer; }
.cook-ing input { width: 22px; height: 22px; accent-color: var(--brand); }
.cook-ing span { flex: 1; }
.cook-ing em { font-style: normal; font-weight: 700; }
.cook-ing input:checked ~ span, .cook-ing input:checked ~ em { color: var(--text-sub); text-decoration: line-through; }

.cook-steps { flex: 1; display: flex; }
.cook-step { flex: 1; padding: var(--sp-6) var(--space) var(--sp-8); overflow-y: auto; }
.cook-no { display: grid; place-items: center; width: 52px; height: 52px; border-radius: 50%; background: var(--brand); color: var(--on-brand); font-weight: 800; font-size: 1.5rem; }
.cook-step h2 { margin: var(--sp-4) 0 0; font-size: 1.5rem; }
.cook-step p { margin: var(--sp-3) 0 0; font-size: 1.375rem; line-height: 1.65; white-space: pre-wrap; }
.cook-step img { display: block; width: 100%; margin-block-start: var(--sp-4); border-radius: var(--radius-card); }
.cook-timer { display: flex; align-items: center; gap: var(--sp-3); flex-wrap: wrap; margin-block-start: var(--sp-5); padding: var(--sp-4); border-radius: var(--radius-card); background: var(--surface); border: 1px solid var(--line); }
.cook-timer-time { flex: 1; font-size: 2.5rem; font-variant-numeric: tabular-nums; letter-spacing: -0.02em; }
.cook-timer.is-running { border-color: var(--brand); }
.cook-timer.is-done { background: var(--brand-soft); border-color: var(--brand); }
.cook-done { text-align: center; }
.cook-done .cook-no { margin-inline: auto; }
.cook-done-actions { display: grid; gap: var(--sp-2); margin-block-start: var(--sp-6); }

.cook-nav { position: sticky; bottom: 0; display: flex; align-items: center; gap: var(--sp-3); padding: 12px var(--space) calc(12px + env(safe-area-inset-bottom)); background: var(--surface); border-block-start: 1px solid var(--line); }
.cook-nav .btn { min-width: 110px; min-height: 52px; font-size: 1.0625rem; }
.cook-nav [data-cook-next] { margin-inline-start: auto; }
.cook-awake { flex: 1; text-align: center; font-size: var(--fs-xs); }