/* 배치와 부품. 색·글꼴·둥글기·테두리·배경은 모두 테마 파일(adult.css, pokemon.css, block.css)의 CSS 변수로만 정한다.
   기준 화면: 1180×820(아이패드 프로 11 가로) 한 화면에 스크롤 없이. 지원하는 가장 작은 화면은 1000×700:
   그 이상에서는 달력·할 일·오늘 일정 카드가 fit.js가 잰 만큼만 그리고 숨긴 것은 `+N개 더`/`+N`으로 보인다.
   900px 미만은 한 줄로 쌓고 페이지가 스크롤한다. */

@font-face { font-family: "Pretendard"; font-weight: 400; font-display: swap; src: local("Pretendard Regular"), url("../fonts/Pretendard-Regular.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 600; font-display: swap; src: local("Pretendard SemiBold"), url("../fonts/Pretendard-SemiBold.otf") format("opentype"); }
@font-face { font-family: "Pretendard"; font-weight: 700; font-display: swap; src: local("Pretendard Bold"), url("../fonts/Pretendard-Bold.otf") format("opentype"); }

:root {
  --edge: 16px;
  --gap: 14px;
  --pad: 16px;
  --topbar-h: 48px;
  --touch: 44px;
  --bottom-h: 150px; /* 포켓몬 두 줄과 다가오는 날 네 줄이 잘리지 않는 높이 */
  --sa-t: env(safe-area-inset-top, 0px);
  --sa-r: env(safe-area-inset-right, 0px);
  --sa-b: env(safe-area-inset-bottom, 0px);
  --sa-l: env(safe-area-inset-left, 0px);
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }

html, body { margin: 0; min-height: 100%; }
body {
  font-family: var(--font);
  color: var(--text);
  background-color: var(--sky-2);
  background-image:
    radial-gradient(circle at 82% 30%, var(--sky-glow) 0%, transparent 42%),
    linear-gradient(180deg, var(--sky-1) 0%, var(--sky-2) 48%, var(--sky-3) 100%);
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  -webkit-tap-highlight-color: transparent;
  font-variant-numeric: tabular-nums;
  line-height: 1.35;
}
h1, h2, h3, p, ul, ol { margin: 0; padding: 0; }
ul, ol { list-style: none; }
button, input { font: inherit; color: inherit; }
button { cursor: pointer; }

.sr {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.muted { color: var(--sub); font-size: 15px; }
.loading { color: var(--on-sky); padding: 40px; font-size: 20px; }

/* ---------- 카드(반투명, 흐림이 안 되면 단색) ---------- */
.card {
  background: var(--card-solid);
  border: var(--card-border-w) solid var(--card-border);
  border-radius: var(--radius);
  box-shadow: var(--card-shadow);
  padding: var(--pad);
  min-width: 0;
  min-height: 0;
}
@supports ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card {
    background: var(--card);
    -webkit-backdrop-filter: blur(var(--card-blur)) saturate(1.3);
    backdrop-filter: blur(var(--card-blur)) saturate(1.3);
  }
}
.card-head { display: flex; align-items: center; gap: 10px; margin-bottom: 6px; }
.card-title { font-size: 18px; font-weight: 700; display: flex; align-items: center; gap: 8px; margin-bottom: 8px; }
.kid-bar { display: inline-block; width: 5px; height: 1.05em; border-radius: 3px; background: var(--c, var(--accent)); flex: none; }
.kid-bar.is-accent { background: var(--wait); }

/* ---------- 화면 틀: 상단 탭과 테마 버튼 ---------- */
.app { position: relative; min-height: 100vh; min-height: 100dvh; }
.topbar {
  position: absolute; z-index: 5;
  top: calc(var(--edge) + var(--sa-t)); right: calc(var(--edge) + var(--sa-r));
  display: flex; gap: 10px; align-items: center;
}
.tabs, .theme-switch { display: flex; gap: 8px; }
.tab {
  min-height: var(--touch); min-width: var(--touch);
  display: inline-flex; align-items: center; justify-content: center;
  padding: 0 18px;
  border: 0; border-radius: var(--radius-btn);
  background: var(--btn); color: var(--btn-text);
  box-shadow: var(--btn-shadow);
  font-size: 17px; font-weight: 600; text-decoration: none; white-space: nowrap;
}
.tab[aria-current="page"], .tab[aria-pressed="true"] { background: var(--btn-on); color: var(--btn-on-text); box-shadow: var(--btn-shadow), inset 0 0 0 2px var(--btn-on-ring); }
/* 테마: 붙어 있는 세 칸(어른 · 포켓몬 · 마인크래프트) */
.theme-switch { gap: 0; margin-left: 4px; border-radius: var(--radius-btn); box-shadow: var(--btn-shadow); }
.theme-switch .tab { padding: 0 13px; font-size: 16px; border-radius: 0; box-shadow: none; }
.theme-switch .tab + .tab { border-left: 1px solid var(--line); }
.theme-switch .tab:first-child { border-radius: var(--radius-btn) 0 0 var(--radius-btn); }
.theme-switch .tab:last-child { border-radius: 0 var(--radius-btn) var(--radius-btn) 0; }
.theme-switch .tab[aria-pressed="true"] { box-shadow: inset 0 0 0 2px var(--btn-on-ring); }

.conn {
  position: fixed; z-index: 30; top: calc(10px + var(--sa-t)); left: 50%;
  transform: translateX(-50%);
  background: var(--alert-bg); color: var(--alert-text);
  border-radius: 999px; padding: 6px 14px; font-size: 14px; font-weight: 700;
  box-shadow: var(--btn-shadow);
}
.toast {
  position: fixed; z-index: 60; left: 50%; bottom: calc(24px + var(--sa-b));
  transform: translateX(-50%);
  background: var(--toast-bg); color: var(--toast-text);
  border-radius: 999px; padding: 12px 22px; font-size: 17px; font-weight: 600;
  max-width: calc(100vw - 32px); text-align: center;
}

/* ---------- 대시보드 배치 ---------- */
.dash {
  height: 100vh; height: 100dvh;
  padding: calc(var(--edge) + var(--sa-t)) calc(var(--edge) + var(--sa-r)) calc(var(--edge) + var(--sa-b)) calc(var(--edge) + var(--sa-l));
  display: grid; gap: 12px var(--gap);
  grid-template-columns: minmax(0, 1.12fr) minmax(0, 1fr);
  /* 할 일 카드는 달력 줄과 일정 줄의 위쪽을 함께 쓰고, 포켓몬·다가오는 날 줄은 높이를 고정한다 */
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 0.3fr) var(--bottom-h);
  grid-template-areas:
    "when   weather"
    "cal    tasks"
    "agenda tasks"
    "agenda bottom";
}
.dash-when { grid-area: when; }
.weather { grid-area: weather; margin-top: calc(var(--topbar-h) + 6px); }
.cal { grid-area: cal; }
.tasks { grid-area: tasks; }
.agenda { grid-area: agenda; }
.dash-bottom { grid-area: bottom; display: grid; gap: var(--gap); grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); min-height: 0; }
.dash-bottom .card { padding: 12px 16px; }

/* 날짜와 시계 */
.dash-when { color: var(--on-sky); text-shadow: var(--on-sky-shadow); padding: 14px 0 0 10px; align-self: start; }
.when-date { font-size: 30px; font-weight: 700; letter-spacing: -0.01em; }
.when-clock { display: flex; align-items: baseline; gap: 12px; line-height: 0.95; margin-top: 4px; }
.when-ap { font-size: 30px; font-weight: 600; }
.when-hm { font-family: var(--font-clock); font-size: 104px; font-weight: var(--weight-clock); letter-spacing: -0.03em; }

/* 날씨 */
.weather { display: flex; align-items: stretch; gap: 14px; padding: 10px 12px; }
.weather.is-empty { align-items: center; justify-content: center; }
.air {
  flex: none; width: 92px; border-radius: 16px; padding: 8px 6px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
  background: var(--air-none); color: var(--air-text);
}
.air[data-air="good"] { background: var(--air-good); }
.air[data-air="normal"] { background: var(--air-normal); }
.air[data-air="bad"] { background: var(--air-bad); }
.air[data-air="worst"] { background: var(--air-worst); }
.air-label { font-size: 13px; font-weight: 600; opacity: 0.92; }
.air-face { font-size: 24px; line-height: 1.1; }
.air-grade { font-size: 20px; }
.wx-now { display: flex; align-items: center; gap: 8px; flex: none; }
.wx-icon { line-height: 1; }
.wx-icon-big { font-size: 40px; }
.wx-temp { font-size: 40px; font-weight: 700; letter-spacing: -0.02em; }
.wx-desc { display: flex; flex-direction: column; font-size: 13px; color: var(--sub); gap: 1px; }
.wx-desc b { font-size: 17px; color: var(--text); }
.wx-hours { display: flex; flex: 1; gap: 0; min-width: 0; }
.wx-hour {
  flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center;
  border-left: 1px solid var(--line); font-size: 13px; gap: 2px;
}
.wx-h { color: var(--sub); font-weight: 600; }
.wx-day { font-size: 10px; font-weight: 700; color: var(--accent); margin-right: 2px; }
.wx-hour .wx-icon { font-size: 22px; }
.wx-t { font-size: 18px; }
.wx-rain { color: var(--sub); font-size: 11px; letter-spacing: -0.02em; white-space: nowrap; max-width: 100%; overflow: hidden; text-overflow: ellipsis; }

/* 달력 */
.cal { display: flex; flex-direction: column; padding-bottom: 10px; }
.cal-title { font-size: 24px; font-weight: 700; letter-spacing: -0.01em; }
.legend { margin-left: auto; display: flex; flex-wrap: wrap; gap: 4px 12px; font-size: 14px; font-weight: 600; color: var(--sub); }
.legend li { display: flex; align-items: center; gap: 5px; }
.dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; background: var(--c, var(--ev-default)); }
.dot-family { background: var(--family); }
.badge-stale {
  font-size: 13px; font-weight: 700; color: var(--alert-text); background: var(--alert-bg);
  border-radius: 999px; padding: 2px 9px;
}
.cal-grid {
  flex: 1; min-height: 0;
  display: grid; grid-template-columns: repeat(7, minmax(0, 1fr));
  grid-template-rows: auto repeat(3, minmax(0, 1fr));
}
.cal-wd { text-align: center; font-size: 15px; font-weight: 600; color: var(--sub); padding: 2px 0 6px; border-bottom: 1px solid var(--line); }
.cal-wd.is-sun { color: var(--sun); }
.cal-wd.is-sat { color: var(--sat); }
.cal-wd.is-now { box-shadow: inset 0 -3px 0 var(--today); }
.cal-day {
  min-width: 0; min-height: 0; overflow: hidden;
  padding: 6px 4px 4px; border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 3px;
}
.cal-day:nth-last-child(-n + 7) { border-bottom: 0; }
.cal-num { font-size: 22px; font-weight: 700; line-height: 1.15; padding-left: 4px; }
.cal-day.is-sun .cal-num { color: var(--sun); }
.cal-day.is-sat .cal-num { color: var(--sat); }
.cal-day.is-past .cal-num { opacity: 0.4; }
.cal-day.is-today { background: var(--today-bg); border-radius: var(--radius-sm); }
.cal-day.is-today .cal-num {
  align-self: flex-start; min-width: 32px; height: 32px; padding: 0 6px; border-radius: 16px;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--today); color: #fff; font-size: 19px;
}
.ev {
  font-size: 13px; font-weight: 600; line-height: 1.5; padding: 0 5px;
  border-left: 4px solid var(--c, var(--ev-default)); border-radius: 4px;
  background: var(--ev-bg);
  background: color-mix(in srgb, var(--c, var(--ev-default)) 16%, transparent);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.ev.is-allday { color: var(--c, var(--text)); }
.ev-more { font-size: 12px; color: var(--sub); padding-left: 5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 오늘·내일 일정 */
.agenda { display: flex; flex-direction: column; }
.ag-cols { flex: 1; min-height: 0; display: grid; grid-template-columns: 1fr 1fr; gap: var(--gap); }
.ag-col { min-width: 0; min-height: 0; overflow: hidden; }
.ag-col + .ag-col { border-left: 1px solid var(--line); padding-left: var(--gap); }
.ag-head { font-size: 15px; font-weight: 600; color: var(--sub); margin-bottom: 8px; }
.ag-head b { font-size: 20px; color: var(--today); margin-right: 4px; }
.ag-col + .ag-col .ag-head b { color: var(--accent); }
.ag-list { display: flex; flex-direction: column; gap: 8px; }
.ag-item { display: flex; align-items: center; gap: 8px; min-width: 0; }
.ag-item.is-past { opacity: 0.45; }
.ag-time { flex: none; width: 48px; font-size: 16px; font-weight: 700; color: var(--accent); display: flex; flex-direction: column; line-height: 1.1; }
.ag-time small { font-size: 11px; color: var(--sub); font-weight: 600; }
.ag-time.is-allday { color: var(--sub); font-size: 14px; }
.ag-bar { flex: none; width: 4px; align-self: stretch; min-height: 22px; border-radius: 2px; background: var(--c, var(--ev-default)); }
.ag-title { font-size: 17px; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ag-more { font-size: 14px; font-weight: 700; color: var(--accent); padding-left: 56px; }
.ag-next { font-size: 14px; color: var(--sub); margin-top: 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 할 일: 위는 두 아이의 넓은 칸(스크롤 없이 KID_MAX줄까지, 넘치면 +N개 더), 아래는 어른·공통 한 사람당 한 줄의 칩 */
.tasks { display: flex; flex-direction: column; padding: 8px var(--pad) 6px; }
.task-cols { flex: 1; min-height: 0; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); gap: var(--gap); }
.task-col { min-width: 0; min-height: 0; display: flex; flex-direction: column; }
.task-col + .task-col { border-left: 1px solid var(--line); padding-left: var(--gap); }
.task-cols .task-head { font-size: 20px; margin-bottom: 2px; }
.task-cols .task-list { overflow: hidden; gap: 0; }
.task-cols .task-title { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
/* 대시보드 줄은 한 줄 높이로: ⏳ 상자가 상태를 말하고, 글자는 화면 읽기 프로그램에만 */
.task-cols .task-note {
  position: absolute; width: 1px; height: 1px; overflow: hidden;
  clip: rect(0 0 0 0); clip-path: inset(50%); white-space: nowrap;
}
.task-head { display: flex; align-items: center; gap: 8px; font-size: 21px; font-weight: 700; color: var(--c, var(--text)); margin-bottom: 6px; }
.task-col .kid-bar { height: 22px; }
.task-count { margin-left: auto; font-size: 16px; font-weight: 600; color: var(--sub); }
.task-list { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: flex; flex-direction: column; gap: 2px; }
.task-empty { padding: 8px 2px; }
.task {
  width: 100%; min-height: 48px; padding: 6px 6px;
  display: flex; align-items: center; gap: 12px; text-align: left;
  border: 0; border-radius: var(--radius-sm); background: transparent;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none;
  touch-action: manipulation;
  transition: background-color 0.15s;
}
.task:active { background: var(--ev-bg); }
.task.is-holding { background: var(--wait-bg); transition: background-color 0.6s; }
.task-box {
  flex: none; width: 26px; height: 26px; border-radius: 7px;
  border: 2.5px solid var(--c, var(--accent));
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 15px; font-weight: 700; line-height: 1;
}
.task[data-status="pending"] .task-box { border-color: var(--wait); background: var(--wait-bg); }
.task[data-status="pending"] .task-box::after { content: "⏳"; font-size: 14px; }
.task[data-status="done"] .task-box { border-color: var(--done); background: var(--done); color: #fff; }
.task[data-status="done"] .task-box::after { content: "✓"; }
.task-body { min-width: 0; display: flex; flex-wrap: wrap; align-items: baseline; gap: 2px 8px; }
.task-title { font-size: 20px; font-weight: 600; overflow-wrap: anywhere; }
.task[data-status="done"] .task-title { color: var(--sub); }
.task-star { font-size: 16px; }
.task-tag { font-size: 12px; font-weight: 700; color: var(--tag); background: var(--tag-bg); border-radius: 999px; padding: 1px 8px; }
.task-note { flex-basis: 100%; font-size: 13px; font-weight: 600; color: var(--wait); }

/* 넘친 아이 줄: 그 아이 페이지로 */
.task-more {
  display: flex; align-items: center; min-height: var(--touch); padding: 0 6px 0 44px;
  font-size: 17px; font-weight: 700; color: var(--accent); text-decoration: none;
}

/* 어른·공통: 얇은 선 아래 작은 제목, 한 사람당 한 줄(이름표 + 칩) */
.others { flex: none; border-top: 1px solid var(--line); margin-top: 2px; padding-top: 2px; }
.others-title { font-size: 13px; font-weight: 700; color: var(--sub); margin-bottom: 1px; line-height: 1.2; }
.owners { display: flex; flex-direction: column; gap: 3px; }
.owner { display: flex; align-items: center; gap: 8px; min-width: 0; }
.owner.is-empty { min-height: 24px; }
.owner-label {
  flex: none; width: 78px; display: flex; align-items: baseline; gap: 5px;
  font-size: 15px; color: var(--c, var(--text)); white-space: nowrap;
}
.owner-label small { font-size: 12px; font-weight: 600; color: var(--sub); }
.owner-none { font-size: 14px; color: var(--faint); }
.chips { flex: 1; min-width: 0; display: flex; flex-wrap: nowrap; gap: 6px; overflow: hidden; }
.chip {
  flex: 0 1 auto; min-width: 64px; max-width: 160px; min-height: var(--touch); padding: 0 12px 0 9px;
  display: inline-flex; align-items: center; gap: 6px;
  border: 1.5px solid var(--line); border-radius: 999px; background: transparent;
  font-size: 15px; font-weight: 600; text-align: left;
  -webkit-user-select: none; user-select: none; -webkit-touch-callout: none; touch-action: manipulation;
}
.chip.is-extra { display: none; }
/* fit.js가 칩 폭을 잴 때만: 숨긴 칩도 보이고 줄어들지 않게 */
.tasks.is-measuring .chip.is-extra { display: inline-flex; }
.tasks.is-measuring .chip { flex-shrink: 0; }
.chip-box {
  flex: none; width: 18px; height: 18px; border-radius: 5px; border: 2px solid var(--c, var(--accent));
  display: inline-flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; line-height: 1;
}
.chip-title { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.chip[data-status="done"] { color: var(--faint); }
.chip[data-status="done"] .chip-box { border-color: var(--done); background: var(--done); color: #fff; opacity: 0.75; }
.chip[data-status="done"] .chip-box::after { content: "✓"; }
.chip:active { background: var(--ev-bg); }
.chip-more { flex: none; min-width: var(--touch); justify-content: center; padding: 0 10px; color: var(--accent); font-weight: 700; }

/* 할 일 창(+N): 그 사람의 할 일 모두. 어른·공통 줄이라 ⏳가 없다 */
.sheet-list { display: flex; flex-direction: column; gap: 2px; max-height: 60vh; overflow-y: auto; }

/* 포켓몬 줄(어른용: 첫 글자 동그라미와 레벨 막대). 아이용 테마는 --sprite-display로 그림을 켠다. */
.partners { display: flex; flex-direction: column; justify-content: space-around; gap: 10px; }
.partner { display: flex; align-items: center; gap: 12px; min-width: 0; }
.avatar {
  flex: none; width: 52px; height: 52px; border-radius: 50%;
  display: inline-flex; align-items: center; justify-content: center; overflow: hidden;
  background: var(--c, var(--accent)); color: #fff; font-size: 24px; font-weight: 700;
}
.avatar-initial { display: var(--initial-display, inline); }
.avatar-sprite { display: var(--sprite-display, none); width: 100%; height: 100%; object-fit: contain; image-rendering: pixelated; }
.partner-body { flex: 1; min-width: 0; }
.partner-head { display: flex; align-items: center; gap: 8px; min-width: 0; }
.partner-name { font-size: 20px; white-space: nowrap; }
.lv { font-size: 14px; font-weight: 700; color: #fff; background: var(--btn-on); border-radius: 7px; padding: 1px 7px; white-space: nowrap; }
.partner-mon { font-size: 13px; color: var(--sub); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bar { height: 9px; border-radius: 5px; background: var(--bar-track); overflow: hidden; margin: 6px 0 4px; }
.bar-fill { display: block; height: 100%; width: var(--pct, 0%); background: var(--c, var(--bar-fill)); border-radius: inherit; transition: width 0.6s ease; }
.partner-note { display: flex; gap: 8px; font-size: 13px; font-weight: 600; color: var(--sub); }
.partner-stars { margin-left: auto; white-space: nowrap; }
.partner-msg { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 다가오는 날 */
.upcoming { display: flex; flex-direction: column; overflow: hidden; }
.up-list { display: flex; flex-direction: column; gap: 3px; overflow: hidden; }
.up-item { display: flex; gap: 10px; font-size: 15px; align-items: baseline; }
.up-dday { flex: none; width: 48px; font-weight: 700; }
.up-name { flex: 1; min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.up-date { color: var(--sub); font-size: 13px; }
/* 높이가 정해진 아래 줄에는 넷까지(반쯤 잘린 줄이 보이지 않게). 좁은 화면은 모두. */
@media (min-width: 900px) { .dash .up-item:nth-child(n + 5) { display: none; } }

/* 그림 자리: 포켓몬 그림이 없으면(404) img.js가 .pic에 is-broken을 붙이고, 깨진 그림 대신 '?'를 보인다 */
.pic { position: relative; display: inline-flex; align-items: center; justify-content: center; flex: none; }
.pic img { width: 100%; height: 100%; object-fit: contain; }
.pic.is-broken img { display: none; }
.pic-ph {
  display: none; width: 100%; height: 100%; align-items: center; justify-content: center;
  border-radius: 50%; background: var(--ev-bg); color: var(--faint); font-size: 40%; font-weight: 700;
}
.pic.is-broken .pic-ph, .pic.is-empty .pic-ph { display: flex; }

/* 아이 페이지: 이름 / 포켓몬(그림·먹이·별·그림 자리) / 오늘 할 일 · 도감 */
.kidpage {
  height: 100vh; height: 100dvh;
  padding: calc(var(--edge) + var(--sa-t)) calc(var(--edge) + var(--sa-r)) calc(var(--edge) + var(--sa-b)) calc(var(--edge) + var(--sa-l));
  display: grid; gap: var(--gap);
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  grid-template-rows: auto minmax(0, 1fr) minmax(0, 1fr);
  grid-template-areas: "name name" "hero hero" "tasks dex";
}
.kp-name {
  grid-area: name; min-height: var(--topbar-h); padding-left: 6px;
  display: flex; align-items: center; gap: 12px;
  font-size: 40px; font-weight: 700; color: var(--on-sky); text-shadow: var(--on-sky-shadow);
}
.kp-name .kid-bar { width: 8px; height: 36px; border-radius: 4px; }
.kp-hero {
  grid-area: hero; min-height: 0;
  display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: center; gap: 28px;
  padding: 16px 24px;
}
.kp-pic { width: 240px; height: 240px; font-size: 140px; }
.kp-pic.is-egg .pic-ph { font-size: 110px; background: var(--today-bg); color: inherit; }
.kp-info { min-width: 0; display: flex; flex-direction: column; gap: 12px; align-items: flex-start; }
.kp-mon { display: flex; align-items: center; gap: 12px; font-size: 30px; min-width: 0; }
.kp-mon-name { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.kp-mon .lv { font-size: 18px; padding: 2px 9px; }
.kp-note { font-size: 18px; color: var(--sub); }
.kp-food { width: min(100%, 420px); }
.kp-bar { height: 16px; border-radius: 8px; margin: 0 0 6px; }
.kp-food-text, .kp-stars { font-size: 20px; color: var(--sub); }
.kp-food-text b, .kp-stars b { color: var(--text); }
.egg-btn {
  min-height: 56px; padding: 0 30px; border: 0; border-radius: var(--radius-btn);
  background: var(--btn-on); color: var(--btn-on-text); box-shadow: var(--btn-shadow);
  font-size: 22px; font-weight: 700;
}
.kp-photo {
  align-self: start; width: 200px; aspect-ratio: 4 / 3;
  border: 3px dashed var(--line); border-radius: var(--radius-sm); background: var(--ev-bg);
}
.kp-tasks .task-col { flex: 1; }
.kp-dex { grid-area: dex; display: flex; flex-direction: column; }
.kp-dex-count { margin-left: auto; font-size: 15px; font-weight: 600; color: var(--sub); }
.dex-grid {
  flex: 1; min-height: 0; overflow-y: auto; align-content: start;
  display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 8px;
}
.dex-slot {
  aspect-ratio: 1; min-width: 0; border-radius: var(--radius-sm); background: var(--ev-bg);
  display: flex; align-items: center; justify-content: center;
}
.dex-slot.is-unknown { color: var(--faint); font-size: 26px; font-weight: 700; }
.dex-pic { width: 88%; height: 88%; font-size: 26px; }

/* ---------- 부모 확인 창 ---------- */
.shade {
  position: fixed; top: 0; right: 0; bottom: 0; left: 0; z-index: 50;
  background: var(--shade); display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  background: var(--modal); color: var(--text); border-radius: var(--radius);
  width: 340px; max-width: 100%; padding: 22px; box-shadow: var(--card-shadow);
  display: flex; flex-direction: column; gap: 14px; outline: none;
}
.modal-title { font-size: 20px; font-weight: 700; text-align: center; overflow-wrap: anywhere; }
.modal-note { font-size: 14px; color: var(--sub); text-align: center; }
.modal-cancel {
  min-height: var(--touch); border: 0; border-radius: var(--radius-btn);
  background: transparent; color: var(--sub); font-size: 17px; font-weight: 600;
}
.pin-dots { display: flex; justify-content: center; gap: 12px; min-height: 18px; }
.pin-dot { width: 16px; height: 16px; border-radius: 50%; border: 2px solid var(--sub); }
.pin-dot.is-on { background: var(--text); border-color: var(--text); }
.pin-pad { display: grid; grid-template-columns: repeat(3, 1fr); gap: 10px; }
.pin-key {
  min-height: 60px; border: 0; border-radius: var(--radius-btn);
  background: var(--key); font-size: 26px; font-weight: 600;
}
.pin-key:active { background: var(--key-on); }
.pin-back { font-size: 16px; }
.pin-ok { background: var(--btn-on); color: var(--btn-on-text); font-size: 18px; }
.pin-ok:disabled { opacity: 0.35; cursor: default; }
.choices { display: flex; flex-direction: column; gap: 10px; }
.choice {
  min-height: 56px; border: 0; border-radius: var(--radius-btn);
  background: var(--key); font-size: 19px; font-weight: 700;
}
.choice:first-child { background: var(--btn-on); color: var(--btn-on-text); }

/* 알 고르기 창 */
.modal.egg-modal { width: 640px; }
.eggs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; }
.egg {
  min-width: 0; min-height: 150px; padding: 12px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  border: 0; border-radius: var(--radius-btn); background: var(--key);
}
.egg:active { background: var(--key-on); }
.egg-pic { width: 88px; height: 88px; font-size: 40px; }
.egg-pic img { image-rendering: pixelated; }
.egg-name { font-size: 19px; overflow-wrap: anywhere; text-align: center; }
.egg-types { font-size: 13px; color: var(--sub); }

/* ---------- 기기 등록 ---------- */
.pair { min-height: 100vh; min-height: 100dvh; display: flex; align-items: center; justify-content: center; padding: 24px 16px; }
.pair-card { width: 460px; max-width: 100%; padding: 28px; display: flex; flex-direction: column; gap: 14px; }
.pair-title { font-size: 28px; font-weight: 700; }
.pair-help { font-size: 16px; color: var(--sub); }
.pair-code { border: 0; margin: 0; padding: 0; display: flex; gap: 8px; justify-content: space-between; }
.pair-digit {
  width: 56px; height: 68px; min-width: 0; flex: 1 1 0; text-align: center;
  font-size: 32px; font-weight: 700;
  border: 2px solid var(--line); border-radius: var(--radius-btn); background: var(--modal);
}
.pair-digit:focus, .pair-name:focus { outline: none; border-color: var(--accent); }
.pair-label { font-size: 15px; font-weight: 600; color: var(--sub); }
.pair-name {
  min-height: 48px; padding: 0 14px; font-size: 18px;
  border: 2px solid var(--line); border-radius: var(--radius-btn); background: var(--modal);
}
.pair-msg { min-height: 1.4em; color: var(--alert-bg); font-weight: 700; }
.pair-go {
  min-height: 52px; border: 0; border-radius: var(--radius-btn);
  background: var(--btn-on); color: var(--btn-on-text); font-size: 19px; font-weight: 700;
}
.pair-go:disabled { opacity: 0.5; }

/* ---------- 좁은 화면: 한 줄로 쌓기 ---------- */
@media (max-width: 899px) {
  .topbar {
    position: static; flex-wrap: wrap; justify-content: center;
    padding: calc(12px + var(--sa-t)) 12px 0;
  }
  .tab { padding: 0 14px; font-size: 16px; }
  .theme-switch .tab { padding: 0 10px; font-size: 15px; }
  .dash, .kidpage {
    height: auto; min-height: 0;
    display: flex; flex-direction: column;
    padding: 12px calc(12px + var(--sa-r)) calc(24px + var(--sa-b)) calc(12px + var(--sa-l));
  }
  .weather { margin-top: 0; flex-wrap: wrap; }
  .wx-hours { flex-basis: 100%; }
  .dash-when { padding: 0 4px; }
  .when-hm { font-size: 72px; }
  .when-date, .when-ap { font-size: 22px; }
  .cal-grid { grid-template-rows: auto repeat(3, minmax(76px, auto)); }
  .cal-num { font-size: 17px; }
  .cal-day.is-today .cal-num { min-width: 26px; height: 26px; font-size: 15px; }
  .ev { font-size: 11px; padding: 0 3px; border-left-width: 3px; }
  .legend { font-size: 12px; }
  .task-list, .task-cols .task-list { overflow: visible; }
  .chips { flex-wrap: wrap; overflow: visible; }
  .chip.is-extra { display: inline-flex; }
  .chip { max-width: 100%; }
  .chip-more { display: none; }
  .owner { align-items: flex-start; }
  .owner-label { padding-top: 12px; }
  .owner.is-empty .owner-label { padding-top: 0; }
  .dash-bottom { display: flex; flex-direction: column; }
  .partners { gap: 14px; }
  .kp-name { font-size: 30px; min-height: 0; }
  .kp-hero { grid-template-columns: auto minmax(0, 1fr); gap: 16px; padding: 14px; }
  .kp-pic { width: 140px; height: 140px; font-size: 80px; }
  .kp-photo { grid-column: 1 / -1; width: 160px; }
  .kp-tasks .task-list { overflow: visible; }
  .dex-grid { overflow: visible; }
}
@media (max-width: 560px) {
  .task-cols, .ag-cols { display: flex; flex-direction: column; }
  .task-col + .task-col, .ag-col + .ag-col { border-left: 0; padding-left: 0; border-top: 1px solid var(--line); padding-top: var(--gap); }
  .legend { margin-left: 0; }
  .card-head { flex-wrap: wrap; }
  .kp-hero { grid-template-columns: minmax(0, 1fr); justify-items: center; }
  .kp-info { align-items: center; text-align: center; }
  .kp-mon { font-size: 24px; }
  .kp-photo { display: none; }
  .eggs { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .dex-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}