/* ─────────────────────────────────────────────────────────────
   미들턴 인지·근력 건강교실 — 화면별 추가 스타일 (screens.css)
   program.css의 토큰·클래스를 그대로 사용하며, id/스크립트는 건드리지 않는다.
   body.page-* 스코프로 화면을 구분해 기존 컴포넌트에 부작용이 없도록 한다.
──────────────────────────────────────────────────────────── */

/* ── 공통: 하단 안내문 마감 + 포커스 이동 시 시각적 안정 ── */
.footer-disclaimer,
.footer-inline { letter-spacing: .01em; }
.footer-disclaimer {
  padding: 10px 16px calc(10px + env(safe-area-inset-bottom, 0px));
}
:focus-visible { outline-offset: 3px; }
#stage, .onboarding-stage, .chat-panel { scroll-margin-top: 12px; }
@media (prefers-reduced-motion: no-preference) {
  html { scroll-behavior: smooth; }
}

/* ─────────────────────────────────────────────────────────────
   index.html — 대상자 선택 홈
──────────────────────────────────────────────────────────── */
body.page-index header.program-top.hero-header {
  background: linear-gradient(135deg, var(--c-card), var(--c-paper-deep));
  border: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft);
  border-radius: 20px;
  padding: 18px 20px;
  box-shadow: var(--shadow-card);
}
body.page-index .hero-greeting {
  font-family: var(--font-serif); color: var(--c-persimmon);
  font-size: 1.05rem; margin: 4px 0 0;
}

body.page-index .recent-card {
  background: var(--c-ok-bg); border: 1.5px solid var(--c-pine);
  border-radius: 16px; padding: 14px 16px 4px; margin-bottom: 16px;
}
body.page-index .recent-label {
  font-family: var(--font-serif); font-weight: 700; color: var(--c-pine-deep);
  margin: 0 0 8px; font-size: 1.05rem;
}
body.page-index .recent-card #recentBtn .btn-choice { margin-bottom: 12px; }

body.page-index .search-row { margin-bottom: 14px; }
body.page-index .choseong-row {
  padding: 10px 0; border-top: 1px solid var(--c-line-soft);
  border-bottom: 1px solid var(--c-line-soft); margin: 6px 0 12px;
}
body.page-index #countLine { margin: 0 0 10px; font-weight: 600; }
body.page-index .resident-grid { gap: 12px; }
@media (hover: hover) {
  body.page-index .resident-grid .btn-choice:hover,
  body.page-index .category-grid .btn-choice:hover { border-color: var(--c-pine); }
}
body.page-index #homeActions h2 { margin-top: 24px; }
body.page-index #homeActions > h2:first-of-type { margin-top: 6px; }
body.page-index .personal-change-entry {
  justify-content: flex-start; text-align: left;
  background: linear-gradient(135deg, #eef8f3, #fff8e9);
  border-color: rgba(49, 94, 81, .42);
}
body.page-index .personal-change-entry > span:last-child {
  display: flex; flex-direction: column; align-items: flex-start; min-width: 0;
}
body.page-index .personal-change-entry strong {
  color: var(--c-pine-deep); font-family: var(--font-serif);
}
body.page-index .personal-change-entry small {
  color: var(--c-ink-soft); font-size: .92rem; line-height: 1.45;
}

/* 원본 편집 일러스트를 쓰는 홈 히어로 */
.editorial-hero {
  position: relative; min-height: 330px; overflow: hidden;
  border: 1px solid rgba(49, 94, 81, .22); border-radius: 24px;
  margin: 0 0 18px; background: #dce7df; box-shadow: var(--shadow-card);
  isolation: isolate;
}
.editorial-hero > img {
  position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover;
  object-position: center; z-index: -2;
}
.editorial-hero::after {
  content: ""; position: absolute; inset: 0; z-index: -1;
  background: linear-gradient(90deg, rgba(248, 243, 233, .98) 0%, rgba(248, 243, 233, .90) 36%, rgba(248, 243, 233, .2) 66%, transparent 100%);
}
.editorial-copy { width: 54%; padding: 34px 30px; }
.editorial-copy h2 { margin: 8px 0 10px; font-size: clamp(1.65rem, 4.3vw, 2.25rem); line-height: 1.35; }
.editorial-copy p { font-size: 1.08rem; line-height: 1.65; }
.eyebrow {
  display: inline-block; color: var(--c-persimmon); font-weight: 800;
  font-size: .92rem; letter-spacing: .07em;
}
.hero-badges { display: flex; flex-wrap: wrap; gap: 7px; margin-top: 18px; }
.hero-badges span {
  background: rgba(255, 253, 248, .88); border: 1px solid rgba(49, 94, 81, .28);
  color: var(--c-pine-deep); border-radius: 999px; padding: 5px 10px;
  font-size: .88rem; font-weight: 700;
}
body.page-index .category-grid .btn-choice {
  position: relative; overflow: hidden; display: flex; color: var(--c-ink);
  text-decoration: none; padding: 10px; border: 1px solid rgba(49, 94, 81, .19);
  border-radius: 18px; box-shadow: var(--shadow-card);
  background: linear-gradient(150deg, #fffdf8, #f2f6f1);
}
body.page-index .category-grid .btn-choice:nth-child(3n+2) {
  background: linear-gradient(150deg, #fffdf8, #faf1df);
}
body.page-index .category-grid .btn-choice:nth-child(3n+1) {
  border-top: 5px solid var(--c-primary-red);
}
body.page-index .category-grid .btn-choice:nth-child(3n+2) {
  border-top: 5px solid var(--c-primary-yellow);
}
body.page-index .category-grid .btn-choice:nth-child(3n) {
  border-top: 5px solid var(--c-primary-blue);
}
body.page-index .category-grid .category-art {
  display: block; width: 100%; aspect-ratio: 1; overflow: hidden;
  border-radius: 14px; background: #fff8ea;
}
body.page-index .category-grid .category-art img {
  display: block; width: 100%; height: 100%; object-fit: cover;
  transition: transform .25s var(--ease-soft);
}
body.page-index .category-grid .btn-choice:hover .category-art img {
  transform: scale(1.025);
}
body.page-index .category-grid .category-label {
  display: block; width: 100%; padding: 5px 5px 3px;
  color: var(--c-pine-deep); font-family: var(--font-serif);
  font-weight: 700; font-size: 1.17rem; text-align: center;
}

/* ─────────────────────────────────────────────────────────────
   companion.html — 말동무 대화
──────────────────────────────────────────────────────────── */
body.page-companion .topic-bar {
  background: var(--c-paper-deep); border: 1px solid var(--c-line-soft);
  border-radius: 14px; padding: 10px 12px; margin-bottom: 12px;
}
body.page-companion .chat-panel {
  flex: 1; min-height: 240px; display: flex; flex-direction: column;
  background: var(--c-card); border: 1px solid var(--c-line-soft);
  border-radius: 18px; box-shadow: var(--shadow-card);
  padding: 16px; margin-bottom: 14px; overflow-y: auto;
}
body.page-companion .chat-panel .chat-log { flex: 1; margin-bottom: 0; }
body.page-companion .input-dock {
  border-top: 1px solid var(--c-line-soft);
  box-shadow: 0 -8px 16px -8px rgba(60, 50, 30, .12);
  padding-top: 10px;
}

/* ─────────────────────────────────────────────────────────────
   forecast.html — TimesFM 개인별 변화보기
──────────────────────────────────────────────────────────── */
body.page-forecast .change-hero {
  display: grid; grid-template-columns: 150px 1fr; gap: 22px; align-items: center;
  padding: 22px; margin-bottom: 16px;
  background: linear-gradient(135deg, #e7f2ec 0%, #fff9eb 70%);
  border: 1px solid var(--c-line-soft); border-radius: 22px;
  box-shadow: var(--shadow-card);
}
body.page-forecast .change-hero-art {
  width: 140px; height: 140px; padding: 16px; color: var(--c-pine);
  background: rgba(255, 253, 248, .82); border-radius: 50%;
}
body.page-forecast .change-hero-art svg { width: 100%; height: 100%; }
body.page-forecast .change-hero h2 { margin: 4px 0; }
body.page-forecast .engine-chip,
body.page-forecast .data-mode {
  display: inline-flex; align-items: center; width: fit-content;
  border: 1px solid rgba(49, 94, 81, .28); border-radius: 999px;
  background: rgba(255,255,255,.7); color: var(--c-pine-deep);
  padding: 5px 10px; font-size: .88rem; font-weight: 750;
}
body.page-forecast .fact-boundary { border-left: 7px solid var(--c-pine); }
body.page-forecast .fact-boundary .btn { margin: 16px 0 4px; }
body.page-forecast .change-card { position: relative; overflow: hidden; }
body.page-forecast .change-card::before {
  content: ""; position: absolute; inset: 0 auto 0 0; width: 7px;
  background: var(--c-pine);
}
body.page-forecast .change-card.watch::before { background: var(--c-persimmon); }
body.page-forecast .change-card-head {
  display: flex; justify-content: space-between; gap: 12px; align-items: flex-start;
}
body.page-forecast .change-card-head h2 { margin: 3px 0; font-size: 1.45rem; }
body.page-forecast .metric-label { color: var(--c-persimmon); font-weight: 800; }
body.page-forecast .measure-summary {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin: 14px 0;
}
body.page-forecast .measure-summary span {
  display: flex; flex-direction: column; padding: 10px;
  background: var(--c-paper); border: 1px solid var(--c-line-soft); border-radius: 12px;
  font-size: .9rem;
}
body.page-forecast .measure-summary strong { font-size: 1.05rem; color: var(--c-pine-deep); }
body.page-forecast .forecast-band {
  padding: 14px; margin: 14px 0; border-radius: 15px;
  background: linear-gradient(90deg, #edf6f2, #fff7e7);
}
body.page-forecast .band-range {
  display: flex; justify-content: space-between; gap: 8px; font-size: .87rem;
}
body.page-forecast .band-range strong { color: var(--c-pine-deep); }
body.page-forecast .band-track {
  height: 12px; margin: 10px 0; overflow: hidden; border-radius: 999px;
  background: linear-gradient(90deg, #b7d8cc, #548875 50%, #e5c784);
}
body.page-forecast .band-track i {
  display: block; width: 3px; height: 18px; margin: -3px auto 0;
  background: var(--c-pine-deep);
}
body.page-forecast details {
  margin-top: 14px; border-top: 1px solid var(--c-line-soft); padding-top: 12px;
}
body.page-forecast summary {
  cursor: pointer; color: var(--c-pine-deep); font-weight: 800;
}
body.page-forecast details h3 { font-size: 1rem; margin: 14px 0 5px; }
body.page-forecast .plain-list,
body.page-forecast .candidate-list { margin: 6px 0; padding-left: 20px; font-size: .9rem; }
body.page-forecast .candidate-list li { margin-bottom: 8px; }
body.page-forecast .candidate-list span { display: block; color: var(--c-ink-soft); }
body.page-forecast .evidence-principle {
  background: linear-gradient(135deg, #fffdf8, #edf6f2);
}
body.page-forecast .footer-disclaimer {
  position: static; margin-top: 4px;
  background: rgba(255, 253, 248, .92);
}
body.page-forecast .shell { padding-bottom: 24px; }

@media (max-width: 560px) {
  body.page-forecast .change-hero { grid-template-columns: 1fr; text-align: center; }
  body.page-forecast .change-hero-art { width: 104px; height: 104px; margin: 0 auto; }
  body.page-forecast .engine-chip { margin: 0 auto; }
  body.page-forecast .measure-summary { grid-template-columns: 1fr; }
  body.page-forecast .band-range { display: grid; grid-template-columns: 1fr; text-align: center; }
  body.page-forecast .change-card-head { align-items: stretch; flex-direction: column; }
}
.companion-intro {
  display: grid; grid-template-columns: minmax(150px, 38%) 1fr; gap: 20px;
  align-items: center; margin: 0 0 16px; padding: 12px;
  background: linear-gradient(135deg, #e7f0eb, #fff7e8);
  border: 1px solid var(--c-line-soft); border-radius: 20px; box-shadow: var(--shadow-card);
}
.companion-intro img {
  width: 100%; height: 190px; object-fit: cover; object-position: 66% center;
  border-radius: 15px;
}
.companion-intro h2 { font-size: 1.55rem; line-height: 1.35; margin: 5px 0; }
.companion-intro p { font-size: 1rem; line-height: 1.55; color: var(--c-ink-soft); }

/* ─────────────────────────────────────────────────────────────
   music.html — 음악 감상 (음반 표지 카드)
──────────────────────────────────────────────────────────── */
body.page-music #songList.song-grid {
  display: grid; grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 12px; margin: 12px 0;
}
body.page-music #songList.song-grid .btn-choice {
  flex-direction: column; text-align: center; justify-content: center;
  gap: 6px; min-height: 126px; margin-bottom: 0; padding: 12px 8px;
}
body.page-music #songList.song-grid .btn-choice .picto { width: 48px; height: 48px; padding: 8px; }
body.page-music #songList.song-grid .btn-choice span:last-child small {
  display: inline-block; margin-top: 6px; padding: 2px 10px;
  background: var(--c-paper-deep); border-radius: 999px;
  color: var(--c-ink-soft); font-size: .82rem; line-height: 1.35;
}
.music-library-heading {
  display: grid;
  grid-template-columns: minmax(0, 1fr) max-content;
  align-items: center;
  gap: 16px;
  width: 100%;
}
.music-library-heading > div { min-width: 0; }
.music-library-heading h2 {
  margin-bottom: 4px;
  word-break: keep-all;
  overflow-wrap: normal;
}
.music-library-heading .top-meta {
  max-width: 58ch;
  word-break: keep-all;
}
.random-play-btn {
  width: auto;
  min-width: 190px;
  margin: 0;
  white-space: nowrap;
}
.random-play-btn[aria-pressed="true"] {
  color: #fff; border-color: var(--c-pine-deep); background: var(--c-pine-deep);
}
@media (max-width: 880px) {
  body.page-music #songList.song-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
@media (max-width: 650px) {
  .music-library-heading {
    grid-template-columns: minmax(0, 1fr);
    align-items: stretch;
  }
  .random-play-btn { width: 100%; }
  body.page-music #songList.song-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}
body.page-music .now-playing { border: 1.5px solid var(--c-pine); background: var(--c-ok-bg); }
body.page-music .now-playing-label {
  display: inline-flex; align-items: center; gap: 8px;
  font-family: var(--font-serif); font-weight: 700; color: var(--c-pine-deep);
  font-size: 1rem; margin: 0 0 6px;
}
body.page-music .now-playing-dot {
  width: 10px; height: 10px; border-radius: 50%; background: var(--c-ink-soft);
}
body.page-music .now-playing[data-state="playing"] .now-playing-dot {
  background: var(--c-primary-green); animation: mcs-pulse 1.6s ease-in-out infinite;
}
body.page-music .now-playing[data-state="loading"] .now-playing-dot {
  background: var(--c-primary-yellow); animation: mcs-pulse 1s ease-in-out infinite;
}
body.page-music .now-playing[data-state="error"] .now-playing-dot {
  background: var(--c-primary-red);
}
body.page-music #songList.song-grid .btn-choice.playing {
  border-color: var(--c-pine-deep); border-width: 3px;
  background: linear-gradient(145deg, #f5fff9, var(--c-ok-bg));
  box-shadow: var(--shadow-inset-top), var(--shadow-card-hover);
}
.music-intro {
  display: flex; align-items: center; gap: 22px; padding: 20px 22px; margin-bottom: 16px;
  border-radius: 20px; color: #fff;
  background: radial-gradient(circle at 12% 30%, rgba(255,255,255,.14), transparent 34%),
    linear-gradient(135deg, #315e51, #173e35);
  box-shadow: var(--shadow-card);
}
.music-intro h2 { color: #fff; margin: 4px 0; font-size: 1.6rem; }
.music-intro p { font-size: 1rem; opacity: .9; }
.music-intro .eyebrow { color: #f5d69a; }
.music-disc {
  width: 116px; height: 116px; flex: none; border-radius: 50%; padding: 27px;
  color: #fff4d6; background:
    radial-gradient(circle, #b78a3c 0 8%, #192b27 9% 18%, #32433e 19% 21%, #192b27 22% 40%, #3c4b47 41% 43%, #192b27 44%);
  box-shadow: inset 0 0 0 2px rgba(255,255,255,.15), 0 12px 24px rgba(0,0,0,.22);
}
.music-disc svg { width: 100%; height: 100%; filter: drop-shadow(0 1px 1px #000); }
.music-disc img { width: 100%; height: 100%; border-radius: 50%; }
@keyframes mcs-pulse { 0%, 100% { opacity: .4; } 50% { opacity: 1; } }

/* 음악 검색 — 음성 입력 + YouTube 공식 음원 연결 */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
body.page-music .music-search-card {
  position: relative; overflow: hidden; margin-bottom: 16px;
  border: 2px solid rgba(40, 120, 200, .25);
  background:
    radial-gradient(circle at 100% 0, rgba(40,120,200,.10), transparent 34%),
    linear-gradient(145deg, #fff, #f7fbff);
}
body.page-music .music-search-card::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg, var(--c-primary-red), var(--c-primary-yellow),
    var(--c-primary-blue), var(--c-primary-green));
}
.music-search-form {
  display: grid; grid-template-columns: minmax(220px, 1fr) auto auto;
  gap: 10px; margin-top: 14px;
}
.music-search-form input {
  min-width: 0; min-height: 62px; padding: 12px 16px;
  border: 2px solid var(--c-line); border-radius: 16px;
  background: #fff; color: var(--c-ink);
  font: 700 1.2rem/1.4 var(--font-sans);
}
.music-search-form input:focus-visible {
  border-color: var(--c-primary-blue); outline: 4px solid rgba(40,120,200,.24);
}
.music-search-form button {
  width: auto; min-height: 62px; margin: 0; white-space: nowrap;
}
.voice-search-btn.listening {
  color: #fff; border-color: var(--c-primary-red);
  background: var(--c-primary-red);
  box-shadow: 0 0 0 5px rgba(217,75,61,.17);
}
.voice-status { min-height: 1.5em; margin: 10px 0 6px; color: var(--c-pine-deep); font-weight: 700; }
.music-suggestions { display: flex; flex-wrap: wrap; gap: 8px; }
.music-suggestions button {
  width: auto; min-height: 44px; margin: 0; padding: 7px 13px;
  border-radius: 999px; font-size: 1rem; box-shadow: none;
}
.music-source-link {
  display: inline-flex; align-items: center; min-height: 44px;
  margin: 4px 0 12px; color: #175bcc; font-weight: 700;
}
@media (max-width: 760px) {
  .music-search-form { grid-template-columns: 1fr 1fr; }
  .music-search-form input { grid-column: 1 / -1; }
}
@media (max-width: 480px) {
  .music-search-form { grid-template-columns: 1fr; }
  .music-search-form input { grid-column: auto; }
}

/* ─────────────────────────────────────────────────────────────
   onboarding.html — 다섯 가지 질문
──────────────────────────────────────────────────────────── */
body.page-onboarding .progress-dots { margin: 6px 0 20px; }
body.page-onboarding .shell { max-width: 1040px; padding-top: 18px; }
body.page-onboarding header.program-top { margin-bottom: 14px; }
body.page-onboarding .onboarding-stage {
  position: relative; overflow: hidden;
  background:
    radial-gradient(circle at 100% 0, rgba(242, 182, 50, .08), transparent 27%),
    linear-gradient(160deg, #fffefb, var(--c-card));
  border: 1px solid rgba(49, 94, 81, .17);
  border-radius: 28px; padding: 26px; box-shadow: 0 1px 2px rgba(58,44,22,.08), 0 18px 48px -22px rgba(23,79,61,.30);
  display: grid; grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 16px; align-content: start;
}
body.page-onboarding .onboarding-stage::before {
  content: ""; position: absolute; inset: 0 0 auto; height: 5px;
  background: linear-gradient(90deg,
    var(--c-primary-red) 0 25%,
    var(--c-primary-yellow) 25% 50%,
    var(--c-primary-blue) 50% 75%,
    var(--c-primary-green) 75% 100%);
}
/* 질문·안내문·결과 요약은 항상 한 줄 전체를 차지하고, 선택지 버튼만 격자에 참여한다 */
body.page-onboarding .onboarding-stage > * { grid-column: 1 / -1; min-width: 0; }
body.page-onboarding .onboarding-stage > .btn-choice {
  position: relative; grid-column: auto; overflow: hidden;
  min-width: 0; min-height: 112px; margin-bottom: 0; padding: 18px 20px;
  align-items: center; gap: 16px;
  background: linear-gradient(145deg, #fff, #fffdf8);
  border: 2px solid #d8d1c6; border-left-width: 7px;
  border-radius: 20px; box-shadow: 0 2px 4px rgba(58,44,22,.07), 0 11px 22px -14px rgba(23,79,61,.25);
  font-size: clamp(1.18rem, 2vw, 1.38rem); line-height: 1.48;
}
body.page-onboarding .onboarding-stage > .btn-choice:nth-of-type(4n+1) { border-left-color: var(--c-primary-red); }
body.page-onboarding .onboarding-stage > .btn-choice:nth-of-type(4n+2) { border-left-color: var(--c-primary-yellow); }
body.page-onboarding .onboarding-stage > .btn-choice:nth-of-type(4n+3) { border-left-color: var(--c-primary-blue); }
body.page-onboarding .onboarding-stage > .btn-choice:nth-of-type(4n) { border-left-color: var(--c-primary-green); }
body.page-onboarding .onboarding-stage > .btn-choice:hover:not(.selected) {
  background: linear-gradient(145deg, #fff, #f1f8f4);
  border-top-color: var(--c-pine); border-right-color: var(--c-pine); border-bottom-color: var(--c-pine);
}
body.page-onboarding .onboarding-stage > .btn-choice.selected {
  border-color: var(--c-pine-deep); border-left-width: 7px;
  background: linear-gradient(145deg, #f5fff9, #e7f5ed);
}
body.page-onboarding .onboarding-stage > .btn-choice .picto {
  width: 70px; height: 70px; padding: 7px;
  background: #f3f8f5; border: 1px solid rgba(49,94,81,.12); border-radius: 18px;
}
body.page-onboarding .onboarding-stage > .btn-choice > span:last-child {
  min-width: 0; word-break: keep-all; overflow-wrap: break-word;
}
body.page-onboarding .onboarding-stage > .btn-choice.selected::after {
  font-size: .92rem; padding: 5px 10px;
}
body.page-onboarding .onboarding-stage > .hero-question {
  margin: 2px 0 8px; color: #211f1b;
  font-size: clamp(1.9rem, 3.4vw, 2.5rem); line-height: 1.38;
}
body.page-onboarding .question-scene {
  display: flex; align-items: center; gap: 16px; padding: 14px 16px;
  border-radius: 19px; background: linear-gradient(135deg, #eaf6f0, #fff7df);
  border: 1px solid rgba(49,94,81,.16);
}
body.page-onboarding .question-scene .scene-icon {
  width: 74px; height: 74px; flex: none; padding: 9px; color: var(--c-pine);
  background: #fff; border-radius: 18px; box-shadow: 0 7px 16px -8px rgba(23,79,61,.34);
}
body.page-onboarding .question-scene svg { width: 100%; height: 100%; }
body.page-onboarding .question-scene img { width: 100%; height: 100%; border-radius: 14px; }
body.page-onboarding .question-scene strong {
  font-family: var(--font-serif); color: var(--c-pine-deep);
  font-size: 1.24rem; line-height: 1.35;
}
body.page-onboarding .question-scene .top-meta {
  display: inline-block; margin-top: 4px; line-height: 1.45;
  overflow-wrap: anywhere;
}
body.page-onboarding .question-scene > span:last-child { min-width: 0; }
body.page-onboarding .onboarding-stage > .notice,
body.page-onboarding .onboarding-stage > .warn { overflow-wrap: anywhere; }
body.page-onboarding .onboarding-stage > .btn-primary {
  width: min(100%, 480px); margin: 8px auto 0;
  border-radius: 18px; min-height: 68px;
}

@media (max-width: 700px) {
  body.page-onboarding .shell { padding-inline: 12px; }
  body.page-onboarding .onboarding-stage {
    grid-template-columns: 1fr; gap: 12px; padding: 18px 14px;
    border-radius: 22px;
  }
  body.page-onboarding .onboarding-stage > .btn-choice {
    min-height: 92px; padding: 14px; gap: 12px;
  }
  body.page-onboarding .onboarding-stage > .btn-choice .picto {
    width: 60px; height: 60px;
  }
  body.page-onboarding .onboarding-stage > .hero-question {
    font-size: clamp(1.65rem, 7vw, 2rem);
  }
  body.page-onboarding .question-scene { padding: 12px; }
  body.page-onboarding .question-scene .scene-icon { width: 62px; height: 62px; }
}

/* ─────────────────────────────────────────────────────────────
   caregiver.html / admin.html — 직원용 화면 공통
──────────────────────────────────────────────────────────── */
body.page-caregiver header.program-top.staff-top,
body.page-admin header.program-top.staff-top {
  align-items: center; gap: 14px; padding: 12px 4px 16px;
}
body.page-caregiver .staff-title,
body.page-admin .staff-title { display: flex; flex-direction: column; gap: 2px; }
body.page-caregiver .staff-kicker,
body.page-admin .staff-kicker {
  font-size: .95rem; letter-spacing: .04em; color: var(--c-ink-soft); margin: 0;
}
body.page-caregiver .staff-card,
body.page-admin .staff-card { padding: 18px; }
body.page-caregiver .staff-card-title,
body.page-admin .staff-card-title {
  border-bottom: 1px solid var(--c-line-soft); padding-bottom: 8px; margin-bottom: 14px;
}

/* caregiver.html 세부 컴포넌트 (기존 인라인 style 대체) */
body.page-caregiver .care-textarea {
  width: 100%; font-size: 1.15rem; padding: 12px; font-family: var(--font-sans);
  border: 2px solid var(--c-line); border-radius: 14px;
  background: var(--c-card); color: var(--c-ink);
}
body.page-caregiver .care-textarea:focus-visible { outline: 4px solid #175bcc; outline-offset: 1px; }
body.page-caregiver .note-result:not(:empty) {
  white-space: pre-wrap; font-size: 1.05rem; background: var(--c-paper-deep);
  border: 1px solid var(--c-line-soft); border-radius: 12px; padding: 14px; margin-top: 10px;
}
body.page-caregiver .rag-search-row { display: flex; gap: 10px; flex-wrap: wrap; }
body.page-caregiver .rag-input {
  flex: 1; min-width: 200px; font-size: 1.1rem; padding: 12px;
  border: 2px solid var(--c-line); border-radius: 14px; min-height: var(--touch-min);
  background: var(--c-card); color: var(--c-ink);
}
body.page-caregiver .rag-select {
  font-size: 1.05rem; padding: 10px 12px; border-radius: 14px;
  border: 2px solid var(--c-line); min-height: var(--touch-min);
  background: var(--c-card); color: var(--c-ink);
}
body.page-caregiver .rag-btn { width: auto; min-width: 96px; margin: 0; }
body.page-caregiver .rag-results { margin-top: 14px; }
.staff-editorial {
  display: grid; grid-template-columns: 42% 1fr; gap: 20px; align-items: center;
  overflow: hidden; margin-bottom: 16px; padding: 12px;
  border: 1px solid var(--c-line-soft); border-radius: 20px;
  background: var(--c-card); box-shadow: var(--shadow-card);
}
.staff-editorial img { width: 100%; height: 190px; object-fit: cover; border-radius: 15px; }
.staff-editorial h2 { margin: 5px 0; font-size: 1.55rem; line-height: 1.35; }
.staff-editorial p { color: var(--c-ink-soft); font-size: 1rem; }

/* admin.html 세부 컴포넌트 */
body.page-admin .audit-scroll { overflow-x: auto; }
body.page-admin table { border-radius: 12px; overflow: hidden; }
body.page-admin table tr:nth-child(even) td { background: var(--c-paper-deep); }
body.page-admin th { background: var(--c-ok-bg); color: var(--c-pine-deep); }
body.page-admin th, body.page-admin td { padding: 12px 10px; }
.admin-intro {
  display: flex; gap: 18px; align-items: center; padding: 18px 20px; margin-bottom: 16px;
  border-radius: 20px; color: #fff; background: linear-gradient(135deg, var(--c-pine), var(--c-pine-deep));
  box-shadow: var(--shadow-card);
}
.admin-intro h2 { color: #fff; font-size: 1.5rem; margin: 4px 0 0; }
.admin-intro .eyebrow { color: #f2d59e; }
.admin-intro-icon {
  width: 72px; height: 72px; flex: none; padding: 10px;
  border-radius: 18px; color: #fff5dd; background: rgba(255,255,255,.12);
}
.admin-intro-icon svg { width: 100%; height: 100%; }
.admin-intro-icon img { width: 100%; height: 100%; border-radius: 14px; }
.kpi-grid { display: grid; grid-template-columns: repeat(2, 1fr); gap: 12px; }
.kpi-tile {
  min-height: 110px; display: flex; flex-direction: column; justify-content: space-between;
  padding: 15px; border-radius: 16px; color: var(--c-pine-deep);
  background: linear-gradient(145deg, var(--c-ok-bg), #fff); border: 1px solid rgba(49,94,81,.18);
}
.kpi-tile span { font-size: .95rem; color: var(--c-ink-soft); }
.kpi-tile strong { font-family: var(--font-serif); font-size: 2rem; }
.kpi-tile small { font-family: var(--font-sans); font-size: .9rem; margin-left: 3px; }
.kpi-tile.alert { background: linear-gradient(145deg, #fae9e2, #fff); color: var(--c-danger-ink); }

/* 활동 그림: 단순 선화를 교육용 그림 카드처럼 보이게 하는 시각 계층 */
body.page-today .motion-figure {
  position: relative; overflow: hidden;
  background: radial-gradient(circle at 50% 42%, #fff 0 24%, #eaf5f0 25% 56%, #f8f3e9 57%);
  border: 2px solid rgba(49,94,81,.18);
}
body.page-today .motion-figure::before,
body.page-today .motion-figure::after {
  content: ""; position: absolute; border-radius: 50%; background: rgba(186,139,58,.12);
}
body.page-today .motion-figure::before { width: 80px; height: 80px; left: 6%; top: 10%; }
body.page-today .motion-figure::after { width: 46px; height: 46px; right: 9%; bottom: 12%; }
body.page-today .motion-figure svg { position: relative; z-index: 1; filter: drop-shadow(0 4px 3px rgba(23,79,61,.14)); }
body.page-today .motion-figure .motion-art {
  position: relative; z-index: 1; box-shadow: 0 8px 22px rgba(23,79,61,.14);
}

@media (max-width: 620px) {
  .editorial-hero { min-height: 430px; display: flex; align-items: flex-end; }
  .editorial-hero > img { height: 58%; top: 0; bottom: auto; object-position: 68% center; }
  .editorial-hero::after {
    background: linear-gradient(0deg, rgba(248,243,233,.99) 0 47%, rgba(248,243,233,.62) 68%, transparent 88%);
  }
  .editorial-copy { width: 100%; padding: 24px 20px; }
  .companion-intro, .staff-editorial { grid-template-columns: 1fr; }
  .companion-intro img, .staff-editorial img { height: 170px; }
  .music-intro { align-items: flex-start; }
  .music-disc { width: 82px; height: 82px; padding: 19px; }
}

@media (prefers-reduced-motion: reduce) { * { animation: none !important; transition: none !important; } }

/* 과정 근거: 고령 사용자도 분야·출처·TimesFM 역할을 한눈에 확인 */
.mcare-utility-links{display:flex;gap:8px;align-items:center}
.evidence-entry{display:flex;align-items:center;gap:12px}
.evidence-entry span:last-child{display:flex;flex-direction:column;gap:2px}
.evidence-entry small{font-size:.78em;color:var(--c-ink-soft)}
.evidence-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px}
.evidence-grid article{border:1px solid var(--c-line);border-radius:18px;padding:18px;background:#fffdfa}
.evidence-grid article>span{display:inline-block;color:var(--c-pine-deep);font-weight:800;margin-bottom:6px}
.evidence-grid h3{margin:0 0 8px;font-size:1.08rem}
.evidence-grid p{margin:0 0 10px;line-height:1.55}
.evidence-grid small{color:var(--c-ink-soft);overflow-wrap:anywhere}
.evidence-flow{display:grid;grid-template-columns:1fr auto 1fr auto 1fr auto 1fr;align-items:center;gap:9px;margin:16px 0}
.evidence-flow span{padding:12px 9px;border-radius:14px;background:var(--c-mint-soft);text-align:center;font-weight:800}
.evidence-flow b{color:var(--c-pine-deep)}
.evidence-rules li{margin:8px 0}
@media (max-width:720px){
  .mcare-utility-links{width:100%;justify-content:flex-end}
  .evidence-grid{grid-template-columns:1fr}
  .evidence-flow{grid-template-columns:1fr}
  .evidence-flow b{transform:rotate(90deg);text-align:center}
}