/* ===== 디자인 토큰 (고정값) ===== */
:root {
  --bg: #FAF9F7;
  --card: #FFFFFF;
  --text: #1F1D1B;
  --text-2: #5F5852;
  --text-3: #8A837C;
  --line: #E8E4DE;
  --accent: #2E6FD9;
  --accent-bg: #EAF1FC;
  --accent-text: #1B4C96;
  --ok: #2E9E6B;
  --holiday: #D14343;   /* 일요일 · 공휴일 날짜 (M6). 토요일은 --accent */
  /* 영수증에서 "여기 좀 봐주세요" 하고 짚는 색. 빨강은 공휴일에 쓰고 있어 따로 둔다. */
  --check: #C9891F;        /* 목록에서 짚는 색 */
  --check-text: #A8721A;   /* 상세 화면 글자 */
  --check-bg: #FBF3E2;     /* 짚는 자리 배경 */

  /* 글자 크기: 모든 크기에 --font-scale 을 곱한다. 보통 1 · 크게 1.15 · 아주 크게 1.3 (app.js 가 바꾼다) */
  --font-scale: 1;
  --fs-greeting: calc(22px * var(--font-scale));  /* 인사말 · 화면 제목 */
  --fs-body: calc(16px * var(--font-scale));      /* 일정·할 일·메모 본문 */
  --fs-meta: calc(14px * var(--font-scale));      /* 시각 · 날짜 · 섹션 라벨 */
  --fs-small: calc(13px * var(--font-scale));     /* 메모 시각 · 기억 날짜 */
  --fs-tab: calc(12px * var(--font-scale));       /* 탭바 라벨 */
  --fs-weekday: calc(12px * var(--font-scale));   /* 달력 요일 줄 */
  --fs-calnum: calc(15px * var(--font-scale));    /* 달력 날짜 숫자 */
  /* 동그라미·체크 칸처럼 모양이 있는 것은 1.15배까지만 키워 달력이 화면 절반을 넘지 않게 한다 */
  --shape-scale: min(var(--font-scale), 1.15);
}

/* ===== 기본 ===== */
*,
*::before,
*::after {
  box-sizing: border-box;
}

[hidden] {
  display: none !important;
}

html {
  background: var(--bg);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
}

body {
  margin: 0 auto;
  max-width: 480px;
  min-height: 100dvh;
  background: var(--bg);
  color: var(--text);
  font-family: -apple-system, "Noto Sans KR", "Malgun Gothic", sans-serif;
  font-weight: 400;
  -webkit-tap-highlight-color: transparent;
}

h1 {
  margin: 0;
  font-size: inherit;
  font-weight: 500;
}

button {
  margin: 0;
  padding: 0;
  border: none;
  background: none;
  font: inherit;
  color: inherit;
  cursor: pointer;
}

.ti {
  line-height: 1;
}

/* ===== 공통 레이아웃 ===== */
.screen {
  padding: 0 18px calc(80px + env(safe-area-inset-bottom));
}

/* ===== 탭바 ===== */
.tabbar {
  position: fixed;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%);
  width: 100%;
  max-width: 480px;
  height: calc(62px + env(safe-area-inset-bottom));
  padding-bottom: env(safe-area-inset-bottom);
  display: flex;
  background: var(--card);
  border-top: 0.5px solid var(--line);
  z-index: 10;   /* 밀어서 지우기 줄(z-index 1)이 긴 목록에서 탭바 위로 비치지 않게 (M6) */
}

.tab {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  color: var(--text-3);
}

.tab .ti {
  font-size: 22px;
}

.tab-label {
  font-size: var(--fs-tab);
  line-height: 1.2;
  white-space: nowrap;
}

.tab.is-active {
  color: var(--accent);
}

/* ===== 화면 1 — 말하기 ===== */
.screen-speak {
  display: flex;
  flex-direction: column;
  min-height: 100dvh;
}

.topbar {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.topbar-date {
  flex: 1;                 /* 날짜가 남는 자리를 차지해 아이콘들이 오른쪽에 모이게 (M16) */
  font-size: var(--fs-meta);
  color: var(--text-2);
}

/* 음표 — 아무것도 안 틀고 있어도 노래 목록을 열 수 있게 (M16) */
#speak-music { margin-right: 4px; }

.topbar-icon {
  font-size: 20px;
  color: var(--text-3);
}

.greeting {
  margin-top: 10px;
  font-size: var(--fs-greeting);
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
}

.sub {
  margin-top: 4px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--text-2);
}

.mic-area {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.mic-btn {
  width: 132px;
  height: 132px;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background-color 0.15s;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  touch-action: manipulation;
}

.mic-btn .ti {
  font-size: 52px;
  pointer-events: none;
}

/* 마이크 상태: 듣는 중 / 처리 중 / 미지원 */
.mic-btn.is-listening {
  background: var(--ok);
}

.mic-btn.is-processing,
.mic-btn.is-disabled {
  background: var(--text-3);
}

.mic-btn.is-disabled {
  cursor: default;
}

.mic-hint {
  margin-top: 16px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--text-3);
  text-align: center;
}

.heard-card {
  background: var(--accent-bg);
  border-radius: 12px;
  padding: 12px 14px;
}

.heard-label {
  font-size: var(--fs-small);
  color: var(--accent-text);
}

.heard-text {
  margin-top: 4px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--accent-text);
}

.reply {
  margin-top: 12px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
}

.reply .ti {
  font-size: calc(18px * var(--shape-scale));
  line-height: calc(var(--fs-meta) * 1.5);
  color: var(--ok);
}

.reply-text {
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-2);
}

/* ===== 화면 2, 3 공통 헤더 ===== */
.header {
  min-height: 48px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.header-title {
  font-size: var(--fs-greeting);
  line-height: 1.3;
  font-weight: 500;
  color: var(--text);
}

.header-date {
  font-size: var(--fs-meta);
  color: var(--text-2);
}

.header-icon {
  font-size: 20px;
  color: var(--text-3);
}

.section-label {
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-2);
}

/* ===== 화면 2 — 하루 ===== */
.timeline {
  margin-top: 14px;
}

.tl-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line);
}

.tl-row:last-child {
  border-bottom: none;
}

.tl-time {
  flex-shrink: 0;
  width: calc(46px * var(--font-scale));
  font-size: var(--fs-meta);
  color: var(--text-3);
}

.tl-title {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}

.tl-note {
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-2);
}

.section-label-todo {
  margin: 20px 0 8px;
}

.todo-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
}

.todo-row .ti {
  font-size: calc(20px * var(--shape-scale));
  color: var(--text-3);
}

.todo-text {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}

.todo-row.is-done .ti {
  color: var(--ok);
}

.todo-row.is-done .todo-text {
  color: var(--text-3);
  text-decoration: line-through;
}

/* ===== 화면 3 — 기억 ===== */
.section-label-memory {
  margin: 18px 0 8px;
}

.memory-row {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 10px 0;
}

.memory-dot {
  flex-shrink: 0;
  width: 6px;
  height: 6px;
  margin-top: calc(var(--fs-body) * 0.75 - 3px);
  border-radius: 50%;
  background: var(--accent);
}

.memory-text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}

.memory-date {
  margin-top: 3px;
  font-size: var(--fs-small);
  color: var(--text-3);
}

/* 기억 더 보기 (M7 A-8) */
.memory-more {
  display: block;
  margin-top: 4px;
  padding: 8px 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-2);
  touch-action: manipulation;
}

.memory-more:disabled {
  color: var(--text-3);
  cursor: default;
}

.section-label-notes {
  margin: 22px 0 8px;
}

.notes {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.note-card {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: 12px;
  padding: 14px;
}

.note-text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}

.note-at {
  margin-top: 6px;
  font-size: var(--fs-small);
  color: var(--text-3);
}

/* ===== M3: 빈 상태 · 준비 중 · 할 일 누르기 ===== */
.empty-state {
  padding: 40px 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-3);
  text-align: center;
}

.section-label-badge {
  margin-left: 6px;
  font-size: var(--fs-small);
  color: var(--text-3);
}

.todo-row.is-toggle {
  cursor: pointer;
  user-select: none;
  -webkit-user-select: none;
}

/* 설정 아이콘: M4 B-2 부터 보인다 (누르면 설정 화면). 누르기 쉽게 44px 칸을 준다. */
.topbar-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
}

.topbar-icon .ti {
  font-size: 22px;
}

/* ===== M3b: 밀어서 지우기 · 되돌리기 ===== */
/* 줄 내용을 .swipe-inner 로 감싸 그것만 움직인다. 안쪽 여백은 감싼 쪽으로 옮겨 보이는 모양은 그대로 둔다. */
.is-swipe {
  position: relative;
  overflow: hidden;
}

.tl-row.is-swipe,
.todo-row.is-swipe,
.memory-row.is-swipe,
.note-card.is-swipe,
.rc-row.is-swipe,
.step-row.is-swipe {
  padding: 0;
}

.swipe-inner {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: inherit;
  gap: inherit;
  width: 100%;
  background: var(--bg);
  transition: transform 0.2s;
  touch-action: pan-y;
}

.swipe-inner.is-dragging {
  transition: none;
}

.tl-row.is-swipe > .swipe-inner {
  padding: 10px 0;
}

.todo-row.is-swipe > .swipe-inner {
  padding: 8px 0;
}

/* 기억 줄도 같은 방식으로 (안 그러면 위아래 빈 띠로 삭제 버튼이 비친다, M7 A-8) */
.memory-row.is-swipe > .swipe-inner {
  padding: 10px 0;
}

.note-card.is-swipe > .swipe-inner {
  display: block;
  padding: 14px;
  background: var(--card);
}

/* 재료와 만드는 법도 같은 방식으로 민다. 안쪽 여백만 옮겨 보이는 모양은 그대로다. */
.rc-row.is-swipe > .swipe-inner,
.step-row.is-swipe > .swipe-inner {
  padding: 6px 0;
}

/* 요리 중에는 단계 줄이 커진다 — 그 여백도 안쪽으로 옮긴다 */
.recipe-list.is-cooking .step-row.is-swipe {
  padding: 0;
}

.recipe-list.is-cooking .step-row.is-swipe > .swipe-inner {
  padding: 14px 8px;
}

/* 지금 읽는 단계 색은 안쪽에 칠한다 (안쪽이 바탕색으로 덮기 때문) */
.step-row.is-reading > .swipe-inner {
  background: var(--accent-bg);
}

.swipe-delete {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  width: 72px;
  background: #D14343;
  color: #FFFFFF;
  font-size: var(--fs-body);
  white-space: nowrap;
}

.undo-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  min-height: 48px;
  margin: 4px 0;
  padding: 0 14px;
  border-radius: 12px;
  background: var(--text);
  color: #FFFFFF;
  font-size: var(--fs-body);
}

.undo-button {
  color: #FFFFFF;
  font-size: var(--fs-body);
  text-decoration: underline;
}

/* ===== M3c: 하루 화면 달력 ===== */
/* 헤더: 왼쪽 달 이름(누르면 연·월 고르기), 오른쪽 이전·다음 달 화살표 */
.cal-title {
  text-align: left;
}

.cal-nav {
  display: flex;
  align-items: center;
  gap: 14px;
}

.cal-arrow {
  display: flex;
  color: var(--text-3);
}

.cal-arrow .ti {
  font-size: 18px;
}

/* 요일 줄 */
.cal-weekdays {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  margin-bottom: 4px;
  font-size: var(--fs-weekday);
  line-height: 1.3;
  color: var(--text-3);
  text-align: center;
}

/* 요일 색 (M6): 일요일 빨강, 토요일 파랑 */
.cal-weekdays .is-sun {
  color: var(--holiday);
}

.cal-weekdays .is-sat {
  color: var(--accent);
}

/* 날짜 격자: 6줄 고정, 7칸 균등, 칸 사이 1px */
.cal-grid {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.cal-day {
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 이름을 9px 에서 12px 로 키운 만큼 위아래 여백을 줄여 달력 높이를 지킨다 */
  padding: 3px 0;
  touch-action: manipulation;
}

.cal-num {
  display: flex;
  align-items: center;
  justify-content: center;
  width: calc(30px * var(--shape-scale));
  height: calc(30px * var(--shape-scale));
  border: 1px solid transparent;
  border-radius: 50%;
  font-size: var(--fs-calnum);
  line-height: 1;
  color: var(--text);
  transition: background-color 0.12s;
}

.cal-day.is-other .cal-num {
  color: var(--text-3);
}

/* 날짜 색 (M6): 토요일 파랑, 일요일·공휴일 빨강. 공휴일이 토요일이면 빨강이 이긴다 (뒤에 적힌 규칙) */
.cal-day.is-sat .cal-num {
  color: var(--accent);
}

.cal-day.is-sun .cal-num,
.cal-day.is-holiday .cal-num {
  color: var(--holiday);
}

/* 이번 달이 아닌 날: 평일은 --text-3, 주말·공휴일은 같은 색을 흐리게 */
.cal-day.is-other.is-sat .cal-num,
.cal-day.is-other.is-sun .cal-num,
.cal-day.is-other.is-holiday .cal-num {
  opacity: 0.5;
}

.cal-day.is-today .cal-num {
  border-color: #C9C3BB;
}

/* 선택이 오늘 표시를 이긴다 */
.cal-day.is-selected .cal-num {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

.cal-day.is-other.is-selected .cal-num {
  opacity: 1;
}

/* 일정 점: 자리는 늘 두고 일정이 있을 때만 보인다 (줄 높이가 흔들리지 않게) */
.cal-dot {
  width: 4px;
  height: 4px;
  margin-top: 3px;
  border-radius: 50%;
  background: var(--accent);
  visibility: hidden;
}

.cal-day.has-dot .cal-dot {
  visibility: visible;
}

/* 숫자 아래 자리 (M6): 일정 점(3px 아래) 또는 공휴일 이름(1px 아래). 모든 칸이 같은 높이 */
.cal-sub {
  display: flex;
  flex-direction: column;
  align-items: center;
  height: 15px;
}

/* 공휴일 이름: 두 글자 · 12px 굵기 500 · 날짜와 같은 빨강. 이번 달이 아닌 칸은 숫자처럼 흐리게 */
.cal-holiday {
  margin-top: 1px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: var(--holiday);
  white-space: nowrap;
}

.cal-day.is-other .cal-holiday {
  opacity: 0.5;
}

/* 공휴일 칸의 일정 점: 이름과 겹치지 않게 숫자 오른쪽 위 (동그라미 바깥이라 고른 날에도 보인다) */
.cal-num {
  position: relative;
}

.cal-num .cal-dot {
  position: absolute;
  top: 0;
  right: 0;
  margin-top: 0;
}

/* 연·월 고르기: 달력 자리에 대신 보인다 */
.picker-years {
  display: grid;
  grid-template-columns: repeat(7, 1fr);
  gap: 1px;
}

.picker-months {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1px;
  margin-top: 10px;
  padding-top: 10px;
  border-top: 0.5px solid var(--line);
}

.picker-item {
  display: flex;
  justify-content: center;
  padding: 6px 0;
  touch-action: manipulation;
}

.picker-label {
  display: flex;
  align-items: center;
  justify-content: center;
  height: calc(30px * var(--shape-scale));
  padding: 0 10px;
  border: 1px solid transparent;
  border-radius: 999px;
  font-size: var(--fs-meta);
  white-space: nowrap;
  color: var(--text);
  transition: background-color 0.12s;
}

.picker-item.is-current .picker-label {
  border-color: #C9C3BB;
}

.picker-item.is-selected .picker-label {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

/* ===== M6: 하루 화면 — 달력 고정 + 전체 목록 ===== */
/* 달력은 스크롤해도 위에 남는다. 화면 좌우 여백까지 배경을 채워 아래 목록이 비치지 않게 하고, 아래에 구분선 */
.cal-sticky {
  position: sticky;
  top: 0;
  z-index: 3;
  margin: 0 -18px;
  padding: 0 18px 6px;
  background: var(--bg);
  border-bottom: 0.5px solid var(--line);
}

/* 목록 맨 위: 지난 일정 보기 (작게) */
.past-toggle {
  display: block;
  margin-top: 10px;
  padding: 8px 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-2);
  touch-action: manipulation;
}

.past-toggle:disabled {
  color: var(--text-3);
  cursor: default;
}

.past-empty,
.list-more {
  padding: 8px 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-3);
}

/* 날짜 묶음. 달력에서 날짜를 눌러 이동하면 잠깐 연한 파랑 배경 (움직임 없이 켜고 끈다) */
.day-group {
  margin: 0 -8px;
  padding: 0 8px;
  border-radius: 8px;
}

.day-group.is-flash,
.day-group.is-flash .swipe-inner {
  background: var(--accent-bg);
}

.day-group .date-empty {
  margin-top: 6px;
  margin-bottom: 4px;
}

/* 날짜 줄 */
.date-label {
  margin-top: 16px;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-2);
}

.date-label.is-today {
  color: var(--accent);
}

#screen-day .timeline {
  margin-top: 4px;
}

#screen-day .tl-row {
  padding: 10px 0;
}

#screen-day .tl-row.is-swipe {
  padding: 0;
}

#screen-day .tl-row.is-swipe > .swipe-inner {
  padding: 10px 0;
}

/* 빈 날 · 앞으로 일정 없음 */
.date-empty {
  margin-top: 16px;
  margin-bottom: 18px;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-3);
}

/* 할 일: 늘 맨 아래 */
.todo-section .section-label-todo {
  margin: 20px 0 8px;
}

.todo-section .todo-row {
  padding: 8px 0;
}

.todo-section .todo-row.is-swipe {
  padding: 0;
}

.todo-section .todo-row.is-swipe > .swipe-inner {
  padding: 8px 0;
}

/* ===== M9: 레시피 (새 색 없음 · 기존 토큰만 씀) ===== */
.section-label-recipe {
  margin: 18px 0 8px;
}

.recipe-cards {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.recipe-card {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: 12px;
  padding: 12px;
  cursor: pointer;
}

.recipe-card.is-swipe {
  padding: 0;
}

.recipe-card.is-swipe > .swipe-inner {
  display: block;
  padding: 12px;
  background: var(--card);
}

.recipe-name {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}

.recipe-sub {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-2);
}

.recipe-often-line {
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-3);
}

/* 하나도 없을 때 */
.recipe-empty {
  padding: 60px 0;
  text-align: center;
}

.recipe-empty-title {
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-3);
}

.recipe-empty-hint {
  margin-top: 8px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-3);
}

/* ===== 반복 일정 ===== */
/* 달력 칸: 날짜 아래 두 글자. 공휴일이 있는 날은 공휴일이 이기므로 이 자리에 오지 않는다. */
.cal-monthly {
  margin-top: 1px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: #2E8B84;
  white-space: nowrap;
}

/* 세금 일정. 공휴일·반복 일정과 글자 크기와 줄 높이를 똑같이 두어 칸 높이가 커지지 않게 한다 */
.cal-tax {
  margin-top: 1px;
  font-size: 12px;
  line-height: 14px;
  font-weight: 500;
  color: #7B5EA7;
  white-space: nowrap;
}

/* ===== 장보기 (M11 C) ===== */
.shop-add {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
}

.shop-input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-body);
  font-family: inherit;
}

.shop-submit {
  flex: none;
  padding: 11px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--card);
  font-size: var(--fs-body);
  font-weight: 600;
}

.shop-label {
  margin-top: 8px;
}

.shop-list {
  padding: 0 16px;
}

.shop-row .swipe-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 0.5px solid var(--line);
  background: var(--bg);
}

.shop-check {
  flex: none;
  width: calc(26px * var(--shape-scale));
  height: calc(26px * var(--shape-scale));
  border: 1.5px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: transparent;
  font-size: calc(14px * var(--shape-scale));
  line-height: 1;
}

.shop-row.is-checked .shop-check {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--card);
}

.shop-row-body {
  flex: 1;
  min-width: 0;
}

.shop-row-name {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-body);
}

.shop-row.is-checked .shop-row-name {
  color: var(--text-3);
  text-decoration: line-through;
}

/* 왜 올라왔는지 적는다. 짐작이라는 것이 드러나야 한다. */
.shop-row-note {
  margin-top: 2px;
  color: var(--text-3);
  font-size: var(--fs-small);
}

.shop-empty,
.shop-foot {
  padding: 14px 16px;
  color: var(--text-3);
  font-size: var(--fs-small);
}

.shop-empty {
  text-align: center;
  font-size: var(--fs-meta);
}

/* ===== 냉장고 (M11 B) ===== */
.fridge-plus {
  margin-left: auto;
  width: calc(36px * var(--shape-scale));
  height: calc(36px * var(--shape-scale));
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--accent);
  font-size: calc(18px * var(--shape-scale));
}

/* 짐작이라는 것을 숨기지 않는다 */
.fridge-guess {
  margin: 0 16px 12px;
  color: var(--text-3);
  font-size: var(--fs-small);
}

.fridge-label {
  margin-top: 8px;
}

.fridge-list {
  padding: 0 16px;
}

.fridge-row .swipe-inner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 0.5px solid var(--line);
  background: var(--bg);
}

.fridge-row.is-picked .swipe-inner {
  background: var(--accent-bg);
}

.fridge-row-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-body);
}

.fridge-row-when {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-small);
}

/* 곧 상할 것 같은 줄만 짚는다. 버리라고 재촉하지는 않는다. */
.fridge-row.is-soon .fridge-row-when {
  color: var(--check-text);
}

.fridge-done {
  flex: none;
  width: calc(30px * var(--shape-scale));
  height: calc(30px * var(--shape-scale));
  border: 1.5px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  color: var(--text-3);
  font-size: calc(15px * var(--shape-scale));
  line-height: 1;
}

.fadd-row {
  display: flex;
  gap: 8px;
  padding: 0 16px 12px;
}

.fadd-input {
  flex: 1;
  min-width: 0;
  padding: 11px 12px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-body);
  font-family: inherit;
}

.fadd-submit {
  flex: none;
  padding: 11px 18px;
  border: 0;
  border-radius: 10px;
  background: var(--accent);
  color: var(--card);
  font-size: var(--fs-body);
  font-weight: 600;
}

/* ===== 영수증 ===== */
.receipt-add {
  display: flex;
  gap: 10px;
  padding: 4px 16px 12px;
}

.receipt-btn {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 16px 8px;
  border: 1px solid var(--line);
  border-radius: 14px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-body);
}

.receipt-btn .ti {
  font-size: calc(24px * var(--shape-scale));
  color: var(--accent);
}

.receipt-btn:active {
  background: var(--accent-bg);
}

.receipt-error {
  margin: 0 16px 10px;
  padding: 10px 12px;
  border-radius: 10px;
  background: var(--accent-bg);
  color: var(--accent-text);
  font-size: var(--fs-meta);
}

.receipt-list {
  padding: 0 16px 16px;
}

/* ----- 이번 달 합계 ----- */
.receipt-sum {
  margin: 0 16px 14px;
  padding: 14px 16px;
  border-radius: 14px;
  background: var(--accent-bg);
}

.receipt-sum-label {
  color: var(--accent-text);
  font-size: var(--fs-meta);
}

.receipt-sum-money {
  margin-top: 2px;
  color: var(--accent-text);
  font-size: var(--fs-greeting);
  font-weight: 700;
}

.receipt-sum-note {
  margin-top: 4px;
  color: var(--check-text);
  font-size: var(--fs-small);
}

/* ----- 목록 한 줄 ----- */
/* 밀어서 지울 수 있게 칸(div)으로 둔다. 안쪽(.swipe-inner)이 실제로 밀린다. */
.receipt-row .swipe-inner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px 2px;
  border-bottom: 0.5px solid var(--line);
  background: var(--bg);
}

.receipt-when {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-meta);
}

.receipt-what {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-body);
}

.receipt-money {
  flex: none;
  font-size: var(--fs-body);
  font-weight: 600;
}

/* 읽는 중인 줄은 맨 위에 둔다. 화면이 스스로 다시 받아 바뀐다. */
.receipt-row.is-reading .receipt-what {
  color: var(--text-3);
}

/* 짚을 것이 있는 줄에만 점을 찍는다. 고치라고 재촉하지 않는다. */
.receipt-flag {
  flex: none;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--check);
  align-self: center;
}

/* ----- 영수증 하나 ----- */
.rc-note {
  margin: 0 16px 14px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--check-bg);
  color: var(--check-text);
  font-size: var(--fs-meta);
  line-height: 1.5;
}

.rc-fields {
  padding: 0 16px;
}

.rc-field {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 0;
  border-bottom: 0.5px solid var(--line);
}

.rc-label {
  flex: none;
  width: 3.5em;
  color: var(--text-2);
  font-size: var(--fs-meta);
}

.rc-input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font-size: var(--fs-body);
  font-family: inherit;
}

/* 비어 있는 칸은 살짝 짚어 둔다 (날짜를 못 읽었을 때) */
.rc-field.is-empty {
  background: var(--check-bg);
  border-radius: 8px;
  padding-left: 8px;
  padding-right: 8px;
}

.rc-save-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 16px 4px;
}

.rc-save {
  padding: 12px 24px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--card);
  font-size: var(--fs-body);
  font-weight: 600;
}

.rc-save:disabled {
  background: var(--text-3);
}

.rc-saved {
  color: var(--ok);
  font-size: var(--fs-meta);
}

.rc-items-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 18px;
  padding-right: 16px;
}

.rc-items-label {
  flex: 1;
  min-width: 0;
}

.rc-edit {
  flex: none;
  padding: 7px 14px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  color: var(--accent-text);
  font-size: var(--fs-meta);
}

.rc-edit.is-on {
  border-color: var(--accent);
  background: var(--accent);
  color: var(--card);
  font-weight: 600;
}

.rc-add {
  display: block;
  width: calc(100% - 32px);
  margin: 10px 16px 4px;
  padding: 12px;
  border: 1px dashed var(--line);
  border-radius: 12px;
  background: transparent;
  color: var(--accent-text);
  font-size: var(--fs-meta);
}

/* ----- 품목 고치는 중 ----- */
.rc-item.is-edit .swipe-inner {
  display: block;
  padding: 8px 8px 10px;
  background: var(--bg);
}

.rc-edit-name {
  display: block;
  width: 100%;
  padding: 8px 10px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-body);
  font-family: inherit;
}

.rc-edit-nums {
  display: flex;
  align-items: center;
  gap: 6px;
  margin-top: 6px;
}

.rc-edit-num {
  width: 100%;
  min-width: 0;
  padding: 7px 8px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: var(--card);
  color: var(--text);
  font-size: var(--fs-meta);
  font-family: inherit;
  text-align: right;
}

.rc-edit-sign {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-small);
}

.rc-items,
.rc-discounts {
  padding: 0 16px 8px;
}

.rc-item {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 9px 8px;
  border-bottom: 0.5px solid var(--line);
}

/* 셈이 안 맞는 줄만 주황 바탕. 나머지는 건드리지 않는다. */
.rc-item.is-check {
  background: var(--check-bg);
  border-radius: 8px;
}

.rc-item-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--fs-body);
}

.rc-item-qty {
  flex: none;
  color: var(--text-3);
  font-size: var(--fs-small);
}

.rc-item-money {
  flex: none;
  font-size: var(--fs-meta);
}

.rc-item.is-discount .rc-item-money {
  color: var(--ok);
}

.rc-items-none {
  padding: 10px 8px;
  color: var(--text-3);
  font-size: var(--fs-meta);
}

/* ===== 네모 틀로 자르기 ===== */
.crop-screen {
  display: flex;
  flex-direction: column;
}

.crop-title {
  font-size: var(--fs-body);
}

/* 사진과 틀은 같은 자리에 겹쳐 놓는다. 틀 좌표는 이 상자 기준이다. */
.crop-stage {
  position: relative;
  margin: 0 auto;
  touch-action: none;   /* 틀을 끄는 동안 화면이 같이 움직이지 않게 */
  background: var(--line);
  overflow: hidden;     /* 틀 밖을 덮는 그림자가 사진 밖으로 번지지 않게 */
}

.crop-canvas {
  display: block;
  width: 100%;
  height: 100%;
}

/* 틀 밖을 어둡게 덮는다. 그림자 하나로 바깥 전체를 덮으므로 덮개 네 장이 필요 없다. */
.crop-frame {
  position: absolute;
  border: 2px solid var(--card);
  box-shadow: 0 0 0 9999px rgba(31, 29, 27, 0.55);
  cursor: move;
}

.crop-grip {
  position: absolute;
  width: 26px;
  height: 26px;
  border: 3px solid var(--card);
  background: rgba(31, 29, 27, 0.25);
}

.crop-grip[data-grip="nw"] { left: -13px; top: -13px; border-right: 0; border-bottom: 0; }
.crop-grip[data-grip="ne"] { right: -13px; top: -13px; border-left: 0; border-bottom: 0; }
.crop-grip[data-grip="sw"] { left: -13px; bottom: -13px; border-right: 0; border-top: 0; }
.crop-grip[data-grip="se"] { right: -13px; bottom: -13px; border-left: 0; border-top: 0; }

.crop-actions {
  display: flex;
  gap: 10px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
}

.crop-all {
  padding: 14px 18px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text-2);
  font-size: var(--fs-body);
}

.crop-send {
  flex: 1;
  padding: 14px 18px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  color: var(--card);
  font-size: var(--fs-body);
  font-weight: 600;
}

.crop-send:disabled {
  background: var(--text-3);
}

/* 루키가 발치를 좌우로 걸어다닌다 (M13).
   ★ 오가기와 방향 뒤집기를 따로 두어야 한다 — 같은 덩어리에 걸면 서로 덮어쓴다.
   사람은 서 있고 루키만 움직인다. 조리대 아래만 오가므로 아무도 가리지 않는다. */
.fam-walk {
  animation: fam-walk 18s ease-in-out infinite;
}

@keyframes fam-walk {
  0%, 100% { transform: translateX(0); }
  50% { transform: translateX(58px); }
}

/* 돌아설 때 몸을 뒤집는다. 오가기와 주기가 같아야 맞발이 된다. */
.fam-facing {
  transform-box: fill-box;
  transform-origin: 50% 50%;
  animation: fam-facing 18s steps(1) infinite;
}

@keyframes fam-facing {
  0%, 49.99% { transform: scaleX(1); }
  50%, 100% { transform: scaleX(-1); }
}

/* 꺼진 줄은 글자를 연하게 — 여섯 줄 중 어느 것이 꺼졌는지 한눈에 보이게 한다 */
.settings-row.is-muted .settings-title,
.settings-row.is-muted .settings-sub {
  color: var(--text-3);
}

/* 세금 일정에 딸린 "매월 보험료" 는 한 단 들여 딸린 것임을 보인다 */
.settings-row.is-sub .settings-text {
  padding-left: 14px;
}

.cal-day.is-other .cal-monthly {
  opacity: 0.45;
}

/* 설정: 이름 + 날짜로 더하기 */
.monthly-add {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}

.monthly-input {
  flex: 1;
  min-width: 0;
  padding: 12px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: var(--fs-body);
  color: var(--text);
}

.monthly-day {
  width: 72px;
  flex-shrink: 0;
  padding: 12px 8px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: var(--fs-body);
  color: var(--text);
  text-align: center;
}

.monthly-submit {
  flex-shrink: 0;
  padding: 12px 16px;
  border-radius: 12px;
  background: var(--accent);
  font-size: var(--fs-meta);
  color: #FFFFFF;
  touch-action: manipulation;
}

.monthly-error {
  margin-top: 6px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--holiday);
}

.monthly-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 10px;
}

.monthly-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
}

.monthly-row.is-swipe {
  padding: 0;
}

.monthly-row.is-swipe > .swipe-inner {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 12px;
  background: var(--card);
}

.monthly-when {
  flex-shrink: 0;
  font-size: var(--fs-meta);
  color: #2E8B84;
}

.monthly-name {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}

/* ===== 주방 화면 (M10) ===== */
/* 그림은 SVG 로 직접 그린다. 외부 이미지를 쓰지 않는다.
   높이는 화면 절반을 넘지 않게 묶는다 (작은 폰에서도 아래 단추와 탭바가 보여야 한다). */
/* 그림 크기는 폭으로 묶는다. 높이를 누르면(max-height) 폭이 안 줄어 가로로 넘친다.
   폭을 화면 높이로 묶으면 viewBox 비율(260:300)대로 높이도 함께 줄어든다. */
/* 가족 장면은 190x240 세로 그림이다. 화면의 3분의 1을 넘지 않게 높이로 묶는다. */
.kitchen-stage {
  position: relative;
  width: min(100%, calc(33vh * 190 / 240));
  margin: 4px auto 0;
}

/* 높이는 viewBox 비율(260:300)이 정한다. max-height 로 누르면 가로가 넘친다. */
.fam-svg,
.kitchen {
  display: block;
  width: 100%;
  height: auto;
}

/* 가족을 끄면 보이는 예전 주방 그림 */
.kitchen[hidden] {
  display: none;
}

/* 세 장면 중 하나만 보인다 */
.fam-svg[hidden] {
  display: none;
}

/* ===== 가족 캐릭터 (M12) =====
   ★규칙: 자리 잡기(transform 속성)와 움직이기(CSS 애니메이션)를 절대 한 덩어리에 걸지 않는다.
   바깥 <g transform="translate(...)"> 이 자리를 잡고, 안쪽 <g class="..."> 만 움직인다.
   한 덩어리에 걸면 애니메이션이 시작되는 순간 CSS transform 이 속성을 덮어써서
   네 식구가 전부 왼쪽 위에 겹쳐 쌓인다. */

/* 숨쉬기 — 셋 다 속도를 다르게 해야 기계 같지 않다 */
.fam-p1 { animation: fam-breathe 3.6s ease-in-out infinite alternate; transform-origin: 50% 100%; }
.fam-p2 { animation: fam-breathe 3.6s ease-in-out infinite alternate .7s; transform-origin: 50% 100%; }
.fam-p3 { animation: fam-breathe 2.8s ease-in-out infinite alternate 1.2s; transform-origin: 50% 100%; }
@keyframes fam-breathe { from { transform: scaleY(1); } to { transform: scaleY(1.015); } }

/* 눈 깜빡임 — 각자 다른 때에 */
.fam-e1 { animation: fam-blink 5s steps(1) infinite; transform-origin: center; }
.fam-e2 { animation: fam-blink 6.4s steps(1) infinite .8s; transform-origin: center; }
.fam-e3 { animation: fam-blink 4.2s steps(1) infinite 1.5s; transform-origin: center; }
@keyframes fam-blink { 0%,95%,100% { transform: scaleY(1); } 96%,99% { transform: scaleY(.1); } }

/* 꼬리 흔들기 */
.fam-tail { animation: fam-wag .42s ease-in-out infinite alternate; }
@keyframes fam-wag { from { transform: rotate(-20deg); } to { transform: rotate(24deg); } }

/* 엄마가 냄비를 젓는 팔 (±9도, 1.6초) */
.fam-stir { animation: fam-stir 1.6s ease-in-out infinite; }
@keyframes fam-stir { 0%,100% { transform: rotate(-9deg); } 50% { transform: rotate(9deg); } }

/* 아빠가 써는 팔 (위아래, 0.85초) */
.fam-chop { animation: fam-chop .85s ease-in-out infinite; }
@keyframes fam-chop { 0%,100% { transform: translateY(0); } 50% { transform: translateY(6px); } }

/* 김 두 줄기 */
.fam-steam1 { animation: fam-steam 2.8s ease-out infinite; }
.fam-steam2 { animation: fam-steam 2.8s ease-out infinite 1s; }
@keyframes fam-steam {
  0% { opacity: 0; transform: translate(0, 3px) scale(.8); }
  30% { opacity: .85; }
  100% { opacity: 0; transform: translate(3px, -12px) scale(1.1); }
}

/* 자는 z 두 개 */
.fam-z1 { animation: fam-zz 2.8s ease-out infinite; }
.fam-z2 { animation: fam-zz 2.8s ease-out infinite 1s; }
@keyframes fam-zz {
  0% { opacity: 0; transform: translate(0, 0) scale(.7); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(5px, -14px) scale(1.1); }
}

/* 움직임을 싫어하는 설정이면 그림만 남긴다 */
@media (prefers-reduced-motion: reduce) {
  .fam-svg * { animation: none; }
}

/* 다른 탭에 가 있거나 화면이 꺼지면 멈춘다 (app.js 가 붙인다) */
/* 장면 안의 움직임을 하나도 빠트리지 않게 모두 멈춘다.
   루키 그림의 rk-* 움직임까지 한꺼번에 들어간다. */
.fam-still .fam-svg * { animation-play-state: paused; }

/* ===== 타이머 직접 맞추기 (M10 3-3) ===== */
.timer-set,
.timer-run {
  padding: 24px 16px 32px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* 맞춘 시간. 고정폭이라 숫자가 바뀌어도 자리가 안 흔들린다. */
.timer-big {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 56px;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

/* 빠른 고르기 일곱 개. 좁은 폰에서는 줄을 바꾼다. */
/* 일곱 개를 넣으면 한 줄에는 안 들어간다.
   폭을 네 개만큼으로 묶어 4 + 3 으로 가지런히 내려앉힌다. */
.timer-quicks {
  margin-top: 22px;
  max-width: 236px;
  display: flex;
  flex-wrap: wrap;
  justify-content: center;
  gap: 8px;
}

/* 412px 폰에서 일곱 개가 한 줄에 들게 잡았다 (글자를 키우면 줄이 나뉘어도 된다) */
.timer-quick {
  min-width: 48px;
  min-height: 44px;
  padding: 0 11px;
  border: 0;
  border-radius: 999px;
  background: var(--accent-bg);
  font-size: var(--fs-meta);
  color: var(--accent-text);
}

.timer-quick.is-selected {
  background: var(--accent);
  color: #FFFFFF;
}

/* - / + 로 1분씩 */
.timer-steps {
  margin-top: 18px;
  display: flex;
  gap: 20px;
}

.timer-round {
  width: 44px;
  height: 44px;
  border: 1px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  font-size: 20px;
  line-height: 1;
  color: var(--text);
}

.timer-round:disabled {
  background: var(--bg);
  color: var(--text-3);
}

.timer-start {
  margin-top: 26px;
  width: 100%;
  max-width: 320px;
  min-height: 52px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  font-size: 17px;
  color: #FFFFFF;
}

/* 0분이면 시작할 수 없다 */
.timer-start:disabled {
  background: var(--text-3);
  color: #FFFFFF;
}

/* 도는 중: 지름 200px 원. 남은 만큼만 테두리가 남는다. */
.timer-dial {
  position: relative;
  width: 200px;
  height: 200px;
}

.timer-dial svg {
  width: 200px;
  height: 200px;
  transform: rotate(-90deg);   /* 열두 시부터 줄어든다 */
}

.timer-track,
.timer-arc {
  fill: none;
  stroke-width: 10;
}

.timer-track {
  stroke: #E4DCCC;   /* 주방 그림 타일과 같은 색 */
}

.timer-arc {
  stroke: var(--accent);
  stroke-linecap: round;
}

.timer-dial-text {
  position: absolute;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
}

.timer-left {
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 44px;
  font-weight: 500;
  line-height: 1.1;
  font-variant-numeric: tabular-nums;
  color: var(--text);
}

.timer-total {
  margin-top: 4px;
  font-size: 14px;
  line-height: 1.4;
  color: var(--text-2);
}

.timer-done {
  margin-top: 18px;
  font-size: 17px;
  line-height: 1.4;
  color: var(--accent-text);
}

/* 울리는 동안 뜨는 큰 멈춤 단추 — 젖은 손으로도 누르게 크게 잡았다 */
.timer-hush {
  margin-top: 16px;
  width: 100%;
  max-width: 320px;
  min-height: 64px;
  border: 0;
  border-radius: 12px;
  background: var(--accent);
  font-size: 22px;
  color: #FFFFFF;
}

.timer-keys {
  margin-top: 26px;
  display: flex;
  gap: 12px;
}

.timer-key {
  min-width: 120px;
  min-height: 52px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: 17px;
  color: var(--text);
}

.timer-key:disabled {
  background: var(--bg);
  color: var(--text-3);
}

/* 타이머: 예전에는 주방 그림 안 글자였다. 세 장면 어디서나 보이게 그림 위에 얹는다. */
.kitchen-timer {
  position: absolute;
  left: 50%;
  bottom: 2%;
  transform: translateX(-50%);
  font-family: ui-monospace, "SFMono-Regular", Menlo, monospace;
  font-size: 13px;
  letter-spacing: 1px;
  padding: 2px 8px;
  border-radius: 4px;
  background: #3A3733;
  color: #7FD1A8;
}

/* 누르는 자리: 늘 보이는 노란 테두리 원. 어디를 누를 수 있는지 알려 준다. */
/* 누를 자리 넷: 그림 바로 위 한 줄. 아래 지름길 셋과 짝을 맞춘다. */
.kitchen-spots {
  display: flex;
  justify-content: center;
  gap: 10px;
  margin: 6px 0 2px;
}

.kitchen-spot {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  min-width: 56px;
  padding: 0;
  border: 0;
  background: transparent;
  touch-action: manipulation;
}

/* 늘 보이는 노란 테두리 원. 이름표가 붙어 키가 커진 만큼 조금 줄였다. */
.kitchen-spot-ring {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 40px;
  height: 40px;
  border: 2px solid #E8B54A;
  border-radius: 50%;
  font-size: 19px;
  line-height: 1;
}

.kitchen-spot-label {
  font-size: 12px;
  line-height: 1.2;
  color: var(--text-2);
  white-space: nowrap;
}

.kitchen-spot:active .kitchen-spot-ring {
  background: rgba(232, 181, 74, 0.16);
}

/* 지름길 세 개: 그림이 작아 누르기 어려울 때를 위한 것 */
.kitchen-keys {
  display: flex;
  justify-content: center;
  gap: 28px;
  margin-top: 14px;
}

.kitchen-key {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  touch-action: manipulation;
}

.kitchen-key-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 48px;
  height: 48px;
  border: 0.5px solid var(--line);
  border-radius: 50%;
  background: var(--card);
  font-size: 22px;
  line-height: 1;
}

.kitchen-key:active .kitchen-key-icon {
  background: var(--accent-bg);
}

.kitchen-key-label {
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--text-2);
}

/* 작은 폰: 그림을 더 줄여서 아래 단추와 탭바가 잘리지 않게 */
@media (max-height: 667px) {
  .kitchen-keys {
    margin-top: 10px;
  }
}

/* ===== 재료 고르기 (M10 섹션 2) ===== */
/* 4열. 칸은 52px 정사각형이고 줄 사이는 8px. 칸이 작아 폰 가로를 고르게 나눠 놓는다. */
.fridge-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 8px;
  margin-top: 8px;
}

.fridge-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 3px;
  touch-action: manipulation;
}

.fridge-tile {
  width: 52px;
  height: 52px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background-color: var(--card);
  background-repeat: no-repeat;
  box-sizing: border-box;
}

/* 고른 것: 테두리만 굵어진다. 안쪽 여백으로 크기를 맞춰 칸이 흔들리지 않게 한다. */
.fridge-item.is-picked .fridge-tile {
  border: 2px solid var(--accent);
}

/* 그림 없는 재료: 회색 동그라미에 이름만 */
.fridge-tile.no-image {
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background-color: var(--bg);
  font-size: var(--fs-small);
  line-height: 1.2;
  color: var(--text-2);
  text-align: center;
  word-break: keep-all;
}

.fridge-name {
  font-size: calc(11px * var(--font-scale));
  line-height: 1.3;
  color: var(--text);
  text-align: center;
  word-break: keep-all;
}

.fridge-more {
  display: block;
  width: 100%;
  margin-top: 10px;
  padding: 8px 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-2);
  touch-action: manipulation;
}

/* 고른 재료가 칩으로 쌓인다. 칩을 누르면 뺀다. */
.fridge-chips {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 14px;
}

.fridge-chip {
  padding: 6px 10px;
  border-radius: 14px;
  background: var(--accent-bg);
  font-size: var(--fs-small);
  line-height: 1.3;
  color: var(--accent-text);
  touch-action: manipulation;
}

.fridge-go {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 14px 0;
  border-radius: 12px;
  background: var(--accent);
  font-size: var(--fs-body);
  line-height: 1.3;
  color: #FFFFFF;
  touch-action: manipulation;
}

.fridge-go:disabled {
  background: var(--line);
  color: var(--text-3);
}

/* ===== 골라주기 결과 (M10 섹션 3) ===== */
.cards-wait {
  margin-top: 20px;
  padding: 14px 0;
  font-size: var(--fs-body);
  line-height: 1.45;
  color: var(--text-3);
  text-align: center;
}

.cards-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 8px;
}

.cards-card {
  padding: 12px;
  border: 0.5px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  cursor: pointer;
  touch-action: manipulation;
}

.cards-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
}

.cards-name {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}

.cards-meta {
  flex-shrink: 0;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-3);
}

.cards-have {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-2);
}

.cards-miss {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-3);
}

.cards-why {
  margin-top: 4px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-3);
}

.cards-again {
  display: block;
  width: 100%;
  margin-top: 14px;
  padding: 12px 0;
  border-radius: 12px;
  border: 0.5px solid var(--line);
  background: var(--card);
  font-size: var(--fs-meta);
  line-height: 1.3;
  color: var(--text-2);
  touch-action: manipulation;
}

/* ===== 요리 중 (M10 섹션 3) ===== */
.cooking-count {
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-3);
}

.cooking-stage {
  width: min(100%, calc(30vh * 260 / 170));
  margin: 8px auto 0;
}

.cooking-svg {
  display: block;
  width: 100%;
  height: auto;
  border-radius: 12px;
}

/* 김과 불빛은 읽는 중에만 보인다 */
.cooking-steam,
.cooking-heat.is-on {
  opacity: 0;
}

.cooking-steam {
  opacity: 0;
}

.is-cooking-on .cooking-steam {
  opacity: 1;
  animation: steam 2.4s ease-in-out infinite;
}

.is-cooking-on .cooking-heat {
  fill: #E8B54A;
}

@keyframes steam {
  0% { opacity: 0.25; transform: translateY(2px); }
  50% { opacity: 0.9; transform: translateY(-2px); }
  100% { opacity: 0.25; transform: translateY(2px); }
}

@media (prefers-reduced-motion: reduce) {
  .is-cooking-on .cooking-steam { animation: none; opacity: 0.7; }
}

/* 요리하면서 멀리서 보는 큰 글씨 */
.cooking-short {
  margin-top: 12px;
  font-size: calc(28px * var(--font-scale));
  line-height: 1.3;
  color: var(--text);
  text-align: center;
  word-break: keep-all;
}

.cooking-now {
  margin-top: 12px;
  padding: 12px;
  border-radius: 12px;
  background: var(--accent-bg);
  cursor: pointer;
}

.cooking-now-text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--accent-text);
}

.cooking-now-check {
  margin-top: 6px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--accent-text);
}

.cooking-rest {
  margin-top: 10px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  opacity: 0.5;
}

.cooking-rest-row {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}

.cooking-hint {
  margin-top: 12px;
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-3);
  text-align: center;
}

/* 상세: 뒤로 · 이름 · 읽어주기 */
.recipe-header {
  gap: 8px;
}

.recipe-back {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-left: -10px;
  color: var(--text-3);
}

.recipe-back .ti {
  font-size: 22px;
}

.recipe-title {
  flex: 1;
  min-width: 0;
}

.recipe-speak {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--accent);
}

.recipe-speak .ti {
  font-size: 20px;
}

.recipe-meta {
  font-size: var(--fs-small);
  line-height: 1.4;
  color: var(--text-3);
}

.recipe-meta:empty {
  display: none;
}

/* 재료 줄: 이름 왼쪽, 분량 오른쪽 */
.rc-row {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 10px;
  padding: 6px 0;
  cursor: text;
}

.rc-item {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}

.rc-amount {
  flex-shrink: 0;
  font-size: var(--fs-meta);
  color: var(--text-3);
}

/* 만드는 법: 번호 + 내용 */
.step-row {
  display: flex;
  align-items: baseline;
  gap: 10px;
  padding: 6px 0;
  cursor: text;
}

.step-no {
  flex-shrink: 0;
  width: 16px;
  font-size: var(--fs-meta);
  color: var(--accent);
}

.step-text {
  font-size: var(--fs-body);
  line-height: 1.5;
  color: var(--text);
}

/* 읽어주기 안내 (M9 섹션 3) */
.cook-hint {
  margin-top: 4px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--accent-bg);
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: var(--accent-text);
}

/* 읽어주는 동안에는 단계 영역 전체가 누르는 자리가 된다 (요리 중 손이 젖어도 크게 누를 수 있게) */
.recipe-list.is-cooking {
  cursor: pointer;
}

.recipe-list.is-cooking .step-row {
  padding: 14px 8px;
  margin: 0 -8px;
  border-radius: 12px;
  cursor: pointer;
}

/* 읽어주는 동안에는 고치기 버튼을 감춘다 (잘못 눌러 입력창이 열리지 않게) */
.recipe-detail-cooking .recipe-add {
  display: none;
}

/* 지금 읽는 단계 (M9 섹션 3에서 씀) */
.step-row.is-reading {
  background: var(--accent-bg);
}

/* 손으로 고치기: 누르면 그 줄이 입력창이 된다 */
.rc-edit {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 0;
}

.rc-input {
  flex: 1;
  min-width: 0;
  min-height: 40px;
  padding: 0 10px;
  border: 1px solid var(--line);
  border-radius: 10px;
  background: var(--card);
  font-family: inherit;
  font-size: var(--fs-body);
  color: var(--text);
}

.rc-input.is-amount {
  flex: 0 0 36%;
}

/* 밀어서 지운 뒤 뜨는 확인 줄. 이것을 눌러야 서버로 간다. */
.rc-confirm {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  margin-top: 4px;
  padding: 6px 0;
}

.rc-confirm-text {
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-2);
}

.rc-ok {  flex-shrink: 0;
  min-height: 40px;
  padding: 0 12px;
  border: 1px solid var(--accent);
  border-radius: 10px;
  background: var(--accent);
  font-size: var(--fs-meta);
  color: #FFFFFF;
}

.recipe-add {
  display: block;
  margin-top: 4px;
  padding: 8px 0;
  font-size: var(--fs-meta);
  line-height: 1.4;
  color: var(--text-2);
}

/* 메모: 연한 파랑 카드 */
.recipe-note {
  margin-top: 18px;
  padding: 12px 14px;
  border-radius: 12px;
  background: var(--accent-bg);
}

.recipe-note-label {
  font-size: var(--fs-small);
  color: var(--accent-text);
}

.recipe-note-text {
  margin-top: 4px;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--accent-text);
  white-space: pre-wrap;
}

/* ===== M4 B-2: 설정 · 접속 키 입력 (새 색 없음) ===== */
.settings-close {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  margin-right: -10px;
  color: var(--text-3);
}

.settings-close .ti {
  font-size: 22px;
}

.settings-label {
  margin: 18px 0 8px;
}

.settings-card {
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: 12px;
}

.settings-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 14px;
}

.settings-row + .settings-row {
  border-top: 0.5px solid var(--line);
}

.settings-text {
  min-width: 0;
}

.settings-title {
  font-size: var(--fs-body);
  line-height: 1.4;
  color: var(--text);
}

.settings-sub {
  margin-top: 2px;
  font-size: var(--fs-small);
  line-height: 1.45;
  color: var(--text-2);
}

.settings-sub:empty {
  display: none;
}

.settings-btn {
  flex-shrink: 0;
  min-height: 40px;
  padding: 0 16px;
  border: 1px solid var(--line);
  border-radius: 999px;
  background: var(--card);
  font-size: var(--fs-meta);
  color: var(--text);
  white-space: nowrap;
}

.settings-btn.is-primary {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

.settings-btn:disabled {
  border-color: var(--line);
  background: var(--bg);
  color: var(--text-3);
  cursor: default;
}

/* 글자 크기 고르기: 각 버튼 글자를 그 크기 느낌으로 보여 준다 (배율과 상관없이 고정) */
.font-choices {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
}

.font-choice {
  min-height: 52px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  color: var(--text);
  white-space: nowrap;
}

.font-choice[data-font="normal"] {
  font-size: 15px;
}

.font-choice[data-font="large"] {
  font-size: 17px;
}

.font-choice[data-font="xlarge"] {
  font-size: 19px;
}

.font-choice.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

/* 알림 횟수 고르기: 설명 아래에 두 버튼을 나란히 (글자가 커져도 한 줄에 넘치지 않게) */
.settings-row-stack {
  flex-direction: column;
  align-items: stretch;
}

.remind-choices {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 8px;
}

.remind-choice {
  min-height: 44px;
  padding: 0 6px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font-size: var(--fs-body);
  color: var(--text);
  white-space: nowrap;
}

.remind-choice.is-selected {
  border-color: var(--accent);
  background: var(--accent);
  color: #FFFFFF;
}

.remind-choice:disabled {
  opacity: 0.6;
  cursor: default;
}

.token-screen {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100dvh;
  padding-bottom: 24px;
}

.token-box {
  width: 100%;
  max-width: 340px;
  text-align: center;
}

.token-face {
  display: block;
  width: 96px;
  height: 96px;
  margin: 0 auto 16px;
  border-radius: 24px;
}

.token-title {
  font-size: var(--fs-greeting);
  line-height: 1.3;
}

.token-sub {
  margin: 8px 0 20px;
  font-size: var(--fs-meta);
  line-height: 1.5;
  color: var(--text-2);
}

.token-input {
  width: 100%;
  min-height: 52px;
  padding: 0 14px;
  border: 1px solid var(--line);
  border-radius: 12px;
  background: var(--card);
  font: inherit;
  font-size: calc(18px * var(--font-scale));
  letter-spacing: 0.08em;
  text-align: center;
  color: var(--text);
}

.token-input:focus {
  border-color: var(--accent);
  outline: none;
}

.token-submit {
  width: 100%;
  min-height: 52px;
  margin-top: 12px;
  border-radius: 12px;
  background: var(--accent);
  font-size: var(--fs-body);
  color: #FFFFFF;
}

.token-submit:disabled {
  background: var(--text-3);
}

.token-error {
  margin-top: 12px;
  font-size: var(--fs-meta);
  line-height: 1.45;
  color: #D14343;
}

/* ===== M5: 루키 캐릭터 (말하기 화면) ===== */
/* 루키 영역은 마이크 영역 위에 겹쳐 올린다(절대 위치). 켜든 끄든 마이크 버튼 자리는 바뀌지 않는다.
   마이크 버튼 윗부분 빈 곳까지만 차지하도록 max-height 로 막아 부제와 겹치지 않게 한다. */
.mic-area {
  position: relative;
  /* 가운데 정렬된 [버튼 132 + 안내 위 여백 16 + 안내 한 줄] 높이의 절반 */
  --mic-group-half: calc((148px + var(--fs-meta) * 1.45) / 2);
}

.rookie-stage {
  --rk-h: 90px;
  position: absolute;
  left: 0;
  right: 0;
  bottom: calc(50% + var(--mic-group-half) + 6px);
  height: 100px;
  max-height: calc(50% - var(--mic-group-half) - 6px);
  overflow: hidden;
  pointer-events: none;
}

@media (max-height: 667px) {
  .rookie-stage {
    --rk-h: 64px;
    height: 70px;
  }
}

/* 걷기: mover 를 [영역 폭 - 루키 폭] 만큼 오가게 하고, 같은 주기로 facing 을 뒤집는다 */
.rookie-track {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(100% - var(--rk-h) * 1.2);
  height: 100%;
}

.rookie-mover {
  width: 100%;
  height: 100%;
  animation: rk-walk 16s linear infinite;
}

.rookie-facing {
  position: absolute;
  left: 0;
  bottom: 0;
  width: calc(var(--rk-h) * 1.2);
  height: var(--rk-h);
  animation: rk-face 16s linear infinite;
}

.rookie-hit {
  display: block;
  width: 100%;
  height: 100%;
  pointer-events: auto;
  touch-action: manipulation;
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
}

.rookie {
  display: block;
  width: 100%;
  height: 100%;
  overflow: visible;
}

/* 자세: 하나만 보인다 */
.rk-pose {
  display: none;
}

.rookie-stage[data-pose="walk"] .rk-pose-walk,
.rookie-stage[data-pose="listen"] .rk-pose-listen,
.rookie-stage[data-pose="happy"] .rk-pose-happy,
.rookie-stage[data-pose="sleep"] .rk-pose-sleep,
.rookie-stage[data-pose="tilt"] .rk-pose-tilt {
  display: inline;
}

/* 걷기 말고 다른 자세면 그 자리에 멈춘다 */
.rookie-stage:not([data-pose="walk"]) .rookie-mover,
.rookie-stage:not([data-pose="walk"]) .rookie-facing {
  animation-play-state: paused;
}

/* 화면이 안 보이거나(다른 앱·다른 탭·설정) 끄면 모두 멈춘다 */
.rookie-stage.is-paused,
.rookie-stage.is-paused * {
  animation-play-state: paused !important;
}

/* 부위 움직임 */
.rk-bob {
  animation: rk-bob 0.5s ease-in-out infinite alternate;
}

.rk-leg-a {
  animation: rk-step 0.5s ease-in-out infinite alternate;
}

.rk-leg-b {
  animation: rk-step 0.5s ease-in-out infinite alternate-reverse;
}

.rk-ear {
  transform-box: fill-box;
  transform-origin: 50% 8%;
  animation: rk-flap 0.5s ease-in-out infinite alternate;
}

.rk-ear-late {
  animation-direction: alternate-reverse;
}

.rk-tail {
  transform-box: fill-box;
  transform-origin: 100% 100%;
  animation: rk-wag 0.45s ease-in-out infinite alternate;
}

.rk-tail-fast {
  transform-box: fill-box;
  transform-origin: 0% 100%;
  animation: rk-wag 0.14s linear infinite alternate;
}

.rk-jump {
  animation: rk-jump 0.6s ease-in-out infinite;
}

.rk-breathe {
  transform-box: fill-box;
  transform-origin: 50% 100%;
  animation: rk-breathe 3.2s ease-in-out infinite;
}

.rk-z {
  opacity: 0;
  animation: rk-z 3.2s ease-in infinite;
}

.rk-z-late {
  animation-delay: 1.6s;
}

.rk-tilt-head {
  transform-box: view-box;
  transform-origin: 60px 60px;
  animation: rk-tilt 0.35s ease-out forwards;
}

@keyframes rk-walk {
  0% { transform: translateX(0); }
  50% { transform: translateX(100%); }
  100% { transform: translateX(0); }
}

@keyframes rk-face {
  0%, 49.9% { transform: scaleX(1); }
  50%, 99.9% { transform: scaleX(-1); }
  100% { transform: scaleX(1); }
}

@keyframes rk-bob {
  from { transform: translateY(0); }
  to { transform: translateY(-2.5px); }
}

@keyframes rk-step {
  from { transform: translateY(0); }
  to { transform: translateY(-3px); }
}

@keyframes rk-flap {
  from { transform: rotate(-7deg); }
  to { transform: rotate(7deg); }
}

@keyframes rk-wag {
  from { transform: rotate(-12deg); }
  to { transform: rotate(12deg); }
}

@keyframes rk-jump {
  0%, 100% { transform: translateY(0); }
  45% { transform: translateY(-8px); }
}

@keyframes rk-breathe {
  0%, 100% { transform: scale(1, 1); }
  50% { transform: scale(1.03, 1.06); }
}

@keyframes rk-z {
  0% { opacity: 0; transform: translate(0, 6px); }
  30% { opacity: 1; }
  100% { opacity: 0; transform: translate(6px, -10px); }
}

@keyframes rk-tilt {
  from { transform: rotate(0); }
  to { transform: rotate(-16deg); }
}

/* 동작 줄이기: 움직임을 모두 끄고 자세만 바꾼다 */
@media (prefers-reduced-motion: reduce) {
  .rookie-stage,
  .rookie-stage * {
    animation: none !important;
  }

  .rookie-mover {
    transform: translateX(50%);
  }

  .rk-tilt-head {
    transform: rotate(-16deg);
  }

  .rk-z {
    opacity: 1;
  }
}


/* ===== 음악 조종판 (M15) =====
   탭바 바로 위에 뜬다. 펼친 모습과 접힌 모습 두 가지.
   동그라미 단추는 --shape-scale 로 키운다 (글자를 키워도 다섯 개가 안 좁아지게). */
.player {
  position: fixed;
  bottom: calc(70px + env(safe-area-inset-bottom));
  left: 50%;
  transform: translateX(-50%);
  width: calc(100% - 24px);
  max-width: 456px;
  z-index: 11;              /* 탭바(10)보다 위 */
  background: var(--card);
  border: 0.5px solid var(--line);
  border-radius: 14px;
}

.player[hidden] { display: none; }

/* 조종판이 떠 있으면 화면 아래를 그만큼 더 비워 준다 (내용이 가리지 않게) */
body.has-player .screen { padding-bottom: calc(240px + env(safe-area-inset-bottom)); }
body.has-player.player-small .screen { padding-bottom: calc(150px + env(safe-area-inset-bottom)); }

/* ---------- 펼친 모습 ---------- */
.player-full { padding: 12px; }
.player-full[hidden] { display: none; }

.player-head {
  display: flex;
  align-items: center;
  gap: 4px;
}

.player-title {
  flex: 1;
  min-width: 0;
  font-size: calc(15px * var(--font-scale));
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.player-icon {
  flex: none;
  width: calc(28px * var(--shape-scale));
  height: calc(28px * var(--shape-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: none;
  color: var(--text-3);
  font-size: calc(16px * var(--shape-scale));
  touch-action: manipulation;
}

.player-icon:active { color: var(--text); }

/* 재생 막대 — 손가락으로 잡기 쉽게 위아래 여백을 넉넉히 둔다 */
.player-seek {
  position: relative;
  height: 22px;
  margin-top: 10px;
  display: flex;
  align-items: center;
  touch-action: none;
}

.player-track {
  width: 100%;
  height: 4px;
  border-radius: 2px;
  background: var(--line);
  overflow: hidden;
}

.player-done {
  height: 100%;
  width: 0;
  border-radius: 2px;
  background: var(--accent);
}

.player-knob {
  position: absolute;
  top: 50%;
  left: 0;
  width: 12px;
  height: 12px;
  margin: -6px 0 0 -6px;
  border-radius: 50%;
  background: var(--accent);
  pointer-events: none;
}

.player-times {
  display: flex;
  justify-content: space-between;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-3);
}

.player-keys {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 10px;
}

.pkey {
  flex: none;
  width: calc(40px * var(--shape-scale));
  height: calc(40px * var(--shape-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: none;
  color: var(--text-2);
  font-size: calc(19px * var(--shape-scale));
  touch-action: manipulation;
}

.pkey:active { background: var(--line); }

.pkey.is-on {
  background: var(--accent-bg);
  color: var(--accent-text);
}

.pkey-main {
  width: calc(56px * var(--shape-scale));
  height: calc(56px * var(--shape-scale));
  background: var(--accent);
  color: #FFFFFF;
  font-size: calc(26px * var(--shape-scale));
}

.pkey-main:active { background: var(--accent-text); }

/* ---------- 접힌 모습 ---------- */
.player-mini {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
}

.player-mini[hidden] { display: none; }

.pmini-play {
  flex: none;
  width: calc(34px * var(--shape-scale));
  height: calc(34px * var(--shape-scale));
  display: flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 50%;
  background: var(--accent);
  color: #FFFFFF;
  font-size: calc(16px * var(--shape-scale));
  touch-action: manipulation;
}

.pmini-play:active { background: var(--accent-text); }

.pmini-text {
  flex: 1;
  min-width: 0;
}

.pmini-title {
  font-size: calc(14px * var(--font-scale));
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.pmini-time {
  font-size: calc(12px * var(--font-scale));
  color: var(--text-3);
}

/* ---------- 노래 목록 (M16) ----------
   조종판 위로 펼쳐진다. 곡이 많아지면 목록 안에서만 구르고, 조종판이 화면을 다 먹지 않게
   높이를 묶어 둔다 (짧은 폰에서도 탭바와 조종판이 가려지지 않게). */
.player-list {
  border-bottom: 0.5px solid var(--line);
  padding: 10px 12px 8px;
}

.player-list[hidden] { display: none; }

.plist-head {
  display: flex;
  align-items: center;
  margin-bottom: 4px;
}

.plist-label {
  flex: 1;
  font-size: calc(13px * var(--font-scale));
  color: var(--text-3);
}

.plist-rows {
  max-height: min(34vh, 240px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}

.plist-row {
  display: block;
  width: 100%;
  text-align: left;
  border: 0;
  background: none;
  padding: 8px 10px;
  border-radius: 10px;
  touch-action: manipulation;
}

.plist-row + .plist-row { margin-top: 2px; }

.plist-row:active { background: var(--line); }

.plist-row.is-now { background: var(--accent-bg); }

.plist-title {
  display: block;
  font-size: calc(15px * var(--font-scale));
  color: var(--text);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.plist-row.is-now .plist-title { color: var(--accent-text); }

.plist-when {
  display: block;
  margin-top: 2px;
  font-size: calc(12px * var(--font-scale));
  color: var(--text-3);
}

.plist-empty {
  padding: 10px;
  font-size: calc(14px * var(--font-scale));
  color: var(--text-3);
}

/* 제목은 이제 눌러서 목록을 여는 단추다 */
.player-title {
  border: 0;
  background: none;
  padding: 0;
  text-align: left;
  touch-action: manipulation;
}

/* [HARU-WEB-POLISH] under the number: a name (holiday, tax, monthly) and, below it, the schedule dot.
   Every cell keeps the same height; the dot shows only on a day with a plan. */
.cal-sub { height: 20px; }
.cal-sub .cal-holiday + .cal-dot, .cal-sub .cal-tax + .cal-dot, .cal-sub .cal-monthly + .cal-dot { margin-top: 1px; }
.date-label .hv-gz { font-family: "Noto Serif KR", "Noto Serif CJK KR", serif; font-weight: 700; }