/* ==========================================================================
   수면코칭 신청서 — 공통 스타일 (public/style.css)

   신청자 화면(index / apply / done)과 관리자 화면(admin)이 함께 쓴다.
   페이지마다 다른 배치는 각 페이지의 css 에 두고, 여기에는
   1) 디자인 토큰(색·글꼴·둥글기)  2) 기본 타이포그래피
   3) 버튼 · 입력칸 · 카드 · 스테퍼 · 칩 · 토글 · 서랍 · 모달 · 배지 · 진행막대
   4) 반응형 도우미(768px 기준)
   만 둔다. 화면별 전용 규칙은 넣지 않는다.
   ========================================================================== */

/* ---------- 1. 디자인 토큰 ---------- */
:root {
  /* 색 */
  --bg: #FFFDFB;            /* 바탕 (따뜻한 크림) */
  --card: #FFFFFF;          /* 카드 */
  --ink: #462D29;           /* 본문 글자 */
  --muted: #8A7066;         /* 보조 글자 */
  --line: #EDDFD7;          /* 선 · 테두리 */
  --accent: #C18D71;        /* 살구 — 진행 · 기본 버튼 */
  --accent-deep: #9C6D54;   /* 살구 진한 — hover · 강조 글자 */
  --accent-soft: #F7ECE5;   /* 살구 연한 — 배경 · 포커스 링 */
  --sage: #5A876E;          /* 세이지 — 완료 */
  --sage-deep: #437C59;
  --sage-soft: #EEF7F2;
  --night: #5B6690;         /* 밤 — 밤잠 · 밤중깸 */
  --night-soft: #E4E7F2;
  --danger: #D9534F;        /* 오류 · 삭제 */
  --danger-soft: #FBE5E0;
  --warn: #B7791F;          /* 살펴볼 것 (호박색) */
  --warn-soft: #FBF1DF;
  --heading: #381711;       /* 제목 글자 */
  --line-2: #E7D9D2;        /* 카드 · 빈 단추 테두리 */
  --sunk: #FDFBF8;          /* 살짝 들어간 바탕 (안내 상자 · 표) */
  --sunk-2: #F1ECE6;        /* 흐린 칩 · 숫자 바탕 */
  --input-bg: #FFFEFC;
  --input-line: #DFD4CF;
  --placeholder: #B9ADA6;
  --disabled-bg: #F6F1EA;
  --on-fill: #FFFFFF;       /* 채운 단추(살구 · 세이지 · 밤) 위 글자 */
  --primary: #5A322C;       /* 짙은 갈색 기본 단추 (연구소 홈페이지) */
  --primary-hover: #47261F;
  --primary-ink: #FFFFFF;
  --primary-shadow: 0 10px 24px rgba(90, 50, 44, .16);
  --soft-bg: #F7EEE8; --soft-ink: #5A322C; --soft-line: #F0E1D8; --soft-hover: #F1E3DA;
  --ghost-hover: #F7ECE5; --ghost-hover-line: #E8C4AE;
  --topbar-bg: rgba(255, 255, 255, .97); --topbar-line: #F5EDE8;
  --backdrop: rgba(59, 50, 46, .45);
  --toast-bg: #462D29; --toast-ink: #FFFFFF;
  --progress-bg: #F1E7E1;
  --thumb-del: rgba(59, 50, 46, .75);
  --done-bg: #FAFCF8;       /* 마친 할 일 카드 */
  --missing-bg: #FFF8F6;    /* 빠진 필수 항목 줄 */
  --on-fill-soft: rgba(255, 255, 255, .25);  /* 채운 단추 안의 숫자 바탕 */
  /* 하루 일과표 항목 색 (시간표 · 요약 타일 · 그래프) — 선 · 글자 · 바탕 */
  --tone-wake: #E39A74;   --tone-wake-ink: #C9744B;   --tone-wake-bg: rgba(193, 141, 113, .14);
  --tone-feed: #8DB5A2;   --tone-feed-ink: #5E8A74;   --tone-feed-bg: rgba(141, 181, 162, .18);
  --tone-nap: #C9744B;    --tone-nap-ink: #C9744B;    --tone-nap-bg: rgba(201, 116, 75, .12);
  --tone-night: #5B6690;  --tone-night-ink: #5B6690;  --tone-night-bg: rgba(91, 102, 144, .12);
  --tone-waking: #D97A6C; --tone-waking-ink: #C4604F; --tone-waking-bg: rgba(217, 122, 108, .12);
  /* 깨시 컨디션 (좋음 · 보통 · 피곤해함 · 심한 짜증 — server/src/engine/day-terms.js WAKE_CONDITIONS 의 code) */
  --cond-good: var(--sage-deep);  --cond-good-bg: var(--sage-soft);
  --cond-okay: var(--muted);      --cond-okay-bg: var(--sunk-2);
  --cond-tired: var(--warn);      --cond-tired-bg: var(--warn-soft);
  --cond-fussy: var(--danger);    --cond-fussy-bg: var(--danger-soft);
  /* 그래프 */
  --chart-axis: #8A7B74; --chart-ink: #3B322E; --chart-grid: #EADFD4; --chart-bg: #F5EFE8;

  /* 글꼴 */
  --font-head: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', sans-serif;
  --font-body: 'Pretendard Variable', Pretendard, 'Apple SD Gothic Neo', 'Malgun Gothic', system-ui, sans-serif;

  /* 둥글기 · 크기 */
  --radius-card: 22px;
  --radius-card-sm: 16px;
  --radius-input: 12px;
  --radius-pill: 999px;
  --input-h: 50px;
  --btn-h: 50px;
  --touch: 44px;            /* 터치 대상 최소 크기 */

  /* 그림자 · 전환 */
  --shadow-card: 0 18px 50px rgba(91, 61, 46, 0.08);
  --shadow-pop: 0 14px 40px rgba(59, 50, 46, 0.16);
  --shadow-sticky: 0 8px 12px -10px rgba(59, 50, 46, 0.18);
  --ease: 0.2s ease;

  /* 배치 */
  --bp: 768px;
  --drawer-w: 240px;
  --drawer-w-collapsed: 64px;
}

/* ---------- 2. 리셋 · 기본 타이포그래피 ---------- */
*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }   /* display 를 지정한 요소에도 hidden 속성이 이기게 */
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--ink);
  font-family: var(--font-body);
  font-size: 15px;
  line-height: 1.6;
  -webkit-font-smoothing: antialiased;
  word-break: keep-all;
}
h1, h2, h3, h4 {
  font-family: var(--font-head);
  font-weight: 400;
  line-height: 1.35;
  margin: 0 0 8px;
  color: var(--ink);
}
h1 { font-size: 26px; }
h2 { font-size: 21px; }
h3 { font-size: 17px; }
p { margin: 0 0 12px; }
a { color: var(--accent-deep); text-decoration: none; }
a:hover { text-decoration: underline; }
small, .small { font-size: 13px; }
.muted { color: var(--muted); }
.accent { color: var(--accent-deep); }
.sage { color: var(--sage-deep); }
.night { color: var(--night); }
.danger { color: var(--danger); }
.center { text-align: center; }
.head { font-family: var(--font-head); }
strong, b { font-weight: 600; }
img { max-width: 100%; display: block; }
button, input, select, textarea { font: inherit; color: inherit; }
button { cursor: pointer; }
svg.icon { width: 1.2em; height: 1.2em; flex: none; vertical-align: -0.25em; }
:focus-visible { outline: 3px solid var(--accent-soft); outline-offset: 2px; }
.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;
}

/* ---------- 3-1. 버튼 ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  min-height: var(--btn-h); padding: 0 22px;
  border-radius: var(--radius-pill);
  border: 1.5px solid transparent;
  background: var(--card); color: var(--ink);
  font-size: 15px; font-weight: 600; line-height: 1.2;
  text-decoration: none; white-space: nowrap;
  transition: background var(--ease), color var(--ease), border-color var(--ease), transform var(--ease), box-shadow var(--ease);
  user-select: none;
}
.btn:hover { text-decoration: none; }
.btn:active { transform: translateY(1px); }
.btn:disabled, .btn[aria-disabled="true"] { opacity: 0.45; cursor: not-allowed; transform: none; }
.btn-primary { background: var(--accent); color: var(--on-fill); border-color: var(--accent); }
.btn-primary:hover:not(:disabled) { background: var(--accent-deep); border-color: var(--accent-deep); }
.btn-ghost { background: transparent; color: var(--ink); border-color: var(--line); }
.btn-ghost:hover:not(:disabled) { background: var(--accent-soft); border-color: var(--accent-soft); }
.btn-sage { background: var(--sage); color: var(--on-fill); border-color: var(--sage); }
.btn-sage:hover:not(:disabled) { background: var(--sage-deep); border-color: var(--sage-deep); }
.btn-night { background: var(--night); color: var(--on-fill); border-color: var(--night); }
.btn-night:hover:not(:disabled) { filter: brightness(0.92); }
.btn-danger { background: transparent; color: var(--danger); border-color: var(--danger-soft); }
.btn-danger:hover:not(:disabled) { background: var(--danger-soft); }
.btn-soft { background: var(--accent-soft); color: var(--accent-deep); border-color: var(--accent-soft); }
.btn-soft:hover:not(:disabled) { background: var(--soft-hover); }
.btn-link { background: none; border: 0; color: var(--accent-deep); padding: 0 6px; min-height: var(--touch); font-weight: 500; }
.btn-link:hover { text-decoration: underline; }
.btn-sm { min-height: 36px; padding: 0 14px; font-size: 13px; }
.btn-lg { min-height: 54px; padding: 0 30px; font-size: 16px; }
.btn-block { width: 100%; }
.btn-icon {
  display: inline-flex; align-items: center; justify-content: center;
  width: var(--touch); height: var(--touch); padding: 0;
  border-radius: 12px; border: 1.5px solid transparent; background: transparent; color: var(--ink);
  transition: background var(--ease);
}
.btn-icon:hover { background: var(--accent-soft); }
.btn-icon svg { width: 22px; height: 22px; }

/* ---------- 3-2. 입력칸 ---------- */
.field { display: flex; flex-direction: column; gap: 6px; margin-bottom: 16px; }
.field:last-child { margin-bottom: 0; }
.label { font-weight: 600; font-size: 14px; color: var(--ink); }
.label .req { color: var(--accent-deep); margin-left: 2px; }
.help { font-size: 13px; color: var(--muted); margin: 0; }
.input, .select, .textarea {
  width: 100%; min-height: var(--input-h);
  padding: 0 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-input);
  background: var(--card); color: var(--ink);
  font-size: 16px; /* 16px 미만이면 iOS 가 확대함 */
  transition: border-color var(--ease), box-shadow var(--ease);
  -webkit-appearance: none; appearance: none;
}
.input::placeholder, .textarea::placeholder { color: var(--placeholder); }
.input:focus, .select:focus, .textarea:focus {
  outline: none; border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-soft);
}
.input:disabled, .select:disabled, .textarea:disabled { background: var(--disabled-bg); color: var(--muted); }
.input.is-error, .select.is-error, .textarea.is-error { border-color: var(--danger); }
.textarea { min-height: 120px; padding: 12px 14px; line-height: 1.55; resize: vertical; }
.select {
  padding-right: 40px;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%238A7B74' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center;
}
input[type="date"].input, input[type="time"].input { min-width: 0; }
/* 단위가 붙는 숫자 입력 (예: 3.2 kg) */
.input-unit { position: relative; display: flex; align-items: center; }
.input-unit .input { padding-right: 56px; }
.input-unit .unit { position: absolute; right: 14px; color: var(--muted); font-size: 14px; pointer-events: none; }
/* 슬라이더 */
.slider { width: 100%; height: 6px; border-radius: 3px; background: var(--line); -webkit-appearance: none; appearance: none; margin: 18px 0 10px; }
.slider::-webkit-slider-thumb { -webkit-appearance: none; width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(59,50,46,.2); cursor: pointer; }
.slider::-moz-range-thumb { width: 28px; height: 28px; border-radius: 50%; background: var(--accent); border: 3px solid var(--card); box-shadow: 0 2px 8px rgba(59,50,46,.2); cursor: pointer; }
.slider-value { font-family: var(--font-head); font-size: 34px; color: var(--accent-deep); text-align: center; line-height: 1; }
.slider-value small { font-size: 14px; color: var(--muted); margin-left: 4px; }
/* 체크 한 개 (동의 등) */
.check { display: flex; align-items: flex-start; gap: 10px; min-height: var(--touch); cursor: pointer; padding: 6px 0; }
.check input { width: 22px; height: 22px; margin: 2px 0 0; accent-color: var(--accent); flex: none; cursor: pointer; }
/* 선택 카드 (radio · checkbox 를 큰 버튼처럼) */
.choices { display: flex; flex-direction: column; gap: 10px; }
.choices.is-inline { flex-direction: row; flex-wrap: wrap; }
.choice {
  display: flex; align-items: center; gap: 12px;
  min-height: 52px; padding: 12px 16px;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--card); cursor: pointer; text-align: left;
  font-size: 15px; font-weight: 500; color: var(--ink);
  transition: border-color var(--ease), background var(--ease), box-shadow var(--ease);
}
.choice:hover { border-color: var(--accent); }
.choice.is-on { border-color: var(--accent); background: var(--accent-soft); box-shadow: 0 0 0 1px var(--accent) inset; }
.choice input { position: absolute; opacity: 0; pointer-events: none; }
.choice .mark {
  width: 22px; height: 22px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); display: inline-flex; align-items: center; justify-content: center;
  color: var(--on-fill); transition: background var(--ease), border-color var(--ease);
}
.choice .mark svg { width: 14px; height: 14px; opacity: 0; }
.choice.is-on .mark { background: var(--accent); border-color: var(--accent); }
.choice.is-on .mark svg { opacity: 1; }
.choice.is-box .mark { border-radius: 7px; }
/* 동의 본문 상자 */
.consent-box {
  max-height: 260px; overflow-y: auto;
  padding: 16px; margin-bottom: 14px;
  border: 1.5px solid var(--line); border-radius: var(--radius-input);
  background: var(--sunk); font-size: 14px; line-height: 1.7; white-space: pre-wrap;
}
/* 파일 올리기 */
.file-drop {
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 8px;
  min-height: 140px; padding: 20px;
  border: 2px dashed var(--line); border-radius: var(--radius-card-sm);
  background: var(--sunk); color: var(--muted); cursor: pointer; text-align: center;
  transition: border-color var(--ease), background var(--ease);
}
.file-drop:hover, .file-drop.is-over { border-color: var(--accent); background: var(--accent-soft); color: var(--accent-deep); }
.file-drop input { display: none; }
.file-drop svg { width: 34px; height: 34px; }
.thumbs { display: grid; grid-template-columns: repeat(auto-fill, minmax(110px, 1fr)); gap: 10px; margin-top: 14px; }
.thumb { position: relative; aspect-ratio: 1; border-radius: 12px; overflow: hidden; background: var(--line); }
.thumb img { width: 100%; height: 100%; object-fit: cover; }
.thumb .del {
  position: absolute; top: 6px; right: 6px; width: 30px; height: 30px; padding: 0;
  border: 0; border-radius: 50%; background: var(--thumb-del); color: #fff;
  display: inline-flex; align-items: center; justify-content: center;
}
.thumb .del svg { width: 16px; height: 16px; }
.thumb.is-loading::after {
  content: ""; position: absolute; inset: 0; background: rgba(255,255,255,.55);
}

/* ---------- 3-3. 카드 ---------- */
.card {
  background: var(--card); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 24px;
}
.card-sm { border-radius: var(--radius-card-sm); padding: 16px; }
.card-flat { box-shadow: none; border: 1px solid var(--line); }
.card-soft { background: var(--accent-soft); box-shadow: none; }
.card-sage { background: var(--sage-soft); box-shadow: none; }
.card-night { background: var(--night-soft); box-shadow: none; }
.card-title { font-family: var(--font-head); font-size: 17px; margin: 0 0 12px; display: flex; align-items: center; gap: 8px; }
.divider { border: 0; border-top: 1px solid var(--line); margin: 16px 0; }

/* ---------- 3-4. 스테퍼 (1 → 2 → 3 → 제출) ---------- */
.stepper { display: flex; align-items: center; gap: 6px; width: 100%; }
.step { display: flex; align-items: center; gap: 8px; flex: none; }
.step-dot {
  width: 32px; height: 32px; border-radius: 50%; flex: none;
  display: inline-flex; align-items: center; justify-content: center;
  background: var(--line); color: var(--muted);
  font-family: var(--font-head); font-size: 14px; font-weight: 600;
  transition: background var(--ease), color var(--ease);
}
.step-dot svg { width: 16px; height: 16px; }
.step-name { font-size: 13px; color: var(--muted); white-space: nowrap; }
.step.is-done .step-dot { background: var(--sage); color: var(--on-fill); }
.step.is-done .step-name { color: var(--sage-deep); }
.step.is-current .step-dot { background: var(--accent); color: var(--on-fill); box-shadow: 0 0 0 4px var(--accent-soft); }
.step.is-current .step-name { color: var(--ink); font-weight: 600; }
.step-line { flex: 1; height: 2px; background: var(--line); min-width: 10px; border-radius: 1px; }
.step-line.is-done { background: var(--sage); }
.step-badge {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 2px 10px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-deep); font-size: 12px; font-weight: 600; white-space: nowrap;
}
.step-badge.is-done { background: var(--sage-soft); color: var(--sage-deep); }
.stepper.is-compact .step-name { display: none; }
.stepper.is-compact .step.is-current .step-name { display: inline; }

/* ---------- 3-5. 칩 · 배지 ---------- */
.chip {
  display: inline-flex; align-items: center; gap: 6px;
  min-height: 30px; padding: 4px 12px; border-radius: var(--radius-pill);
  background: var(--accent-soft); color: var(--accent-deep);
  font-size: 13px; font-weight: 600; line-height: 1.2; white-space: nowrap;
}
.chip svg { width: 14px; height: 14px; }
.chip-sage { background: var(--sage-soft); color: var(--sage-deep); }
.chip-night { background: var(--night-soft); color: var(--night); }
.chip-muted { background: var(--sunk-2); color: var(--muted); }
.chip-danger { background: var(--danger-soft); color: var(--danger); }
.chip-outline { background: transparent; border: 1.5px solid var(--line); color: var(--ink); font-weight: 500; }
.chip.is-btn { cursor: pointer; min-height: 36px; transition: background var(--ease); }
.chip.is-btn:hover { filter: brightness(0.96); }
.chip.is-on { background: var(--accent); color: var(--on-fill); border-color: var(--accent); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.badge {
  display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 6px;
  font-size: 12px; font-weight: 600; background: var(--sunk-2); color: var(--muted);
}
.badge-accent { background: var(--accent-soft); color: var(--accent-deep); }
.badge-sage { background: var(--sage-soft); color: var(--sage-deep); }
.badge-night { background: var(--night-soft); color: var(--night); }
.badge-danger { background: var(--danger-soft); color: var(--danger); }

/* ---------- 3-6. 토글 스위치 ---------- */
.toggle { position: relative; display: inline-flex; align-items: center; gap: 8px; min-height: var(--touch); cursor: pointer; }
.toggle input { position: absolute; opacity: 0; width: 0; height: 0; }
.toggle .track {
  width: 44px; height: 26px; border-radius: 13px; background: var(--line); position: relative; flex: none;
  transition: background var(--ease);
}
.toggle .track::after {
  content: ""; position: absolute; top: 3px; left: 3px; width: 20px; height: 20px; border-radius: 50%;
  background: #fff; box-shadow: 0 1px 4px rgba(0,0,0,.2); transition: transform var(--ease);
}
.toggle input:checked + .track { background: var(--accent); }
.toggle input:checked + .track::after { transform: translateX(18px); }
.toggle input:focus-visible + .track { box-shadow: 0 0 0 3px var(--accent-soft); }

/* ---------- 3-7. 진행 막대 ---------- */
.progress { width: 100%; height: 6px; border-radius: 3px; background: var(--line); overflow: hidden; }
.progress-bar { height: 100%; width: 0; border-radius: 3px; background: var(--accent); transition: width 0.3s ease; }
.progress-bar.is-sage { background: var(--sage); }

/* ---------- 3-8. 슬라이드 서랍 (왼쪽 메뉴 · 묶음 목록) ----------
   접힘 64px ↔ 펼침 240px. `.is-open` 또는 hover 로 펼친다. 768 미만은 화면 밖에
   숨겨 두고 `.is-open` 일 때 겹쳐서 나온다.                                   */
.drawer {
  position: fixed; top: 0; left: 0; bottom: 0; z-index: 30;
  width: var(--drawer-w-collapsed);
  background: var(--card); border-right: 1px solid var(--line);
  display: flex; flex-direction: column;
  overflow: hidden;
  transition: width var(--ease), transform var(--ease);
}
.drawer.is-open, .drawer:hover { width: var(--drawer-w); }
.drawer-head { display: flex; align-items: center; gap: 10px; height: 60px; padding: 0 10px; flex: none; border-bottom: 1px solid var(--line); }
.drawer-body { flex: 1; overflow-y: auto; overflow-x: hidden; padding: 8px 0; }
.drawer-title { padding: 10px 16px 4px; font-size: 12px; color: var(--muted); white-space: nowrap; }
.drawer-item {
  display: flex; align-items: center; gap: 12px;
  width: 100%; min-height: var(--touch); padding: 8px 10px 8px 16px;
  border: 0; background: none; color: var(--ink); text-align: left;
  white-space: nowrap; cursor: pointer; transition: background var(--ease);
}
.drawer-item:hover { background: var(--accent-soft); }
.drawer-item.is-current { background: var(--accent-soft); color: var(--accent-deep); font-weight: 600; }
.drawer-item.is-current .drawer-ico { background: var(--accent); color: var(--on-fill); border-color: var(--accent); }
.drawer-item.is-done .drawer-ico { background: var(--sage); color: var(--on-fill); border-color: var(--sage); }
.drawer-ico {
  width: 30px; height: 30px; flex: none; border-radius: 50%;
  border: 2px solid var(--line); color: var(--muted);
  display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; transition: background var(--ease);
}
.drawer-ico svg { width: 15px; height: 15px; }
.drawer-label { flex: 1; overflow: hidden; text-overflow: ellipsis; opacity: 0; transition: opacity var(--ease); }
.drawer-sub { font-size: 11px; color: var(--sage-deep); opacity: 0; transition: opacity var(--ease); }
.drawer.is-open .drawer-label, .drawer:hover .drawer-label,
.drawer.is-open .drawer-sub, .drawer:hover .drawer-sub,
.drawer.is-open .drawer-title, .drawer:hover .drawer-title { opacity: 1; }
.drawer-title { opacity: 0; transition: opacity var(--ease); }
@media (min-width: 768px) {
  /* 접힌 상태에서는 묶음 제목 줄이 빈칸으로 남지 않게 감춘다 */
  .drawer:not(.is-open):not(:hover) .drawer-title { display: none; }
}
.drawer-backdrop { position: fixed; inset: 0; z-index: 29; background: rgba(59,50,46,.35); display: none; }
@media (max-width: 767.98px) {
  .drawer { width: var(--drawer-w); transform: translateX(-100%); }
  .drawer.is-open { transform: translateX(0); }
  .drawer .drawer-label, .drawer .drawer-sub, .drawer .drawer-title { opacity: 1; }
  .drawer.is-open ~ .drawer-backdrop, .drawer-backdrop.is-open { display: block; }
}

/* ---------- 3-9. 모달 · 토스트 ---------- */
.modal-backdrop {
  position: fixed; inset: 0; z-index: 50;
  background: var(--backdrop);
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.modal {
  width: 100%; max-width: 760px; max-height: 92vh; overflow: auto;
  background: var(--card); border-radius: var(--radius-card); box-shadow: var(--shadow-pop);
  padding: 20px;
}
.modal-head { display: flex; align-items: center; gap: 10px; margin-bottom: 12px; }
.modal-head h3 { flex: 1; margin: 0; }
.toast {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%) translateY(20px);
  z-index: 60; max-width: calc(100% - 32px);
  padding: 12px 18px; border-radius: 14px;
  background: var(--toast-bg); color: var(--toast-ink); font-size: 14px;
  opacity: 0; pointer-events: none; transition: opacity var(--ease), transform var(--ease);
}
.toast.is-show { opacity: 1; transform: translateX(-50%) translateY(0); }
.toast.is-error { background: var(--danger); color: #fff; }
/* 알림 안 단추 하나 (지운 기록 「되돌리기」) — 단추가 있을 때만 누를 수 있다 */
.toast.has-act.is-show { pointer-events: auto; display: flex; align-items: center; gap: 12px; padding: 8px 8px 8px 18px; white-space: nowrap; }
.toast-act {
  flex: none; min-height: 36px; padding: 0 14px; border: 0; border-radius: var(--radius-pill);
  background: rgba(255, 255, 255, .16); color: inherit; font-size: 14px; font-weight: 800; cursor: pointer;
}
.toast-act:hover { background: rgba(255, 255, 255, .26); }

/* ---------- 3-10. 표 (관리자 화면 공용) ---------- */
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: middle; }
.table th { font-weight: 600; color: var(--muted); font-size: 13px; }
.table tr:hover td { background: var(--sunk); }
.table-wrap { overflow-x: auto; }

/* ---------- 3-11. 완료 표시 (세이지 체크 원) ---------- */
.done-circle {
  width: 88px; height: 88px; border-radius: 50%; margin: 0 auto 18px;
  background: var(--sage); color: var(--on-fill);
  display: flex; align-items: center; justify-content: center;
  box-shadow: 0 0 0 10px var(--sage-soft);
  animation: pop 0.35s ease;
}
.done-circle svg { width: 44px; height: 44px; }
.done-circle.is-lg { width: 112px; height: 112px; }
.done-circle.is-lg svg { width: 56px; height: 56px; }
@keyframes pop { from { transform: scale(0.6); opacity: 0; } to { transform: scale(1); opacity: 1; } }
@keyframes fadeUp { from { transform: translateY(8px); opacity: 0; } to { transform: none; opacity: 1; } }
.fade-up { animation: fadeUp 0.25s ease; }

/* ---------- 4. 배치 · 반응형 도우미 ---------- */
.container { width: 100%; max-width: 720px; margin: 0 auto; padding: 0 16px; }
.container-wide { width: 100%; max-width: 1100px; margin: 0 auto; padding: 0 16px; }
.row { display: flex; align-items: center; gap: 10px; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.wrap { flex-wrap: wrap; }
.stack { display: flex; flex-direction: column; gap: 12px; }
.grow { flex: 1; min-width: 0; }
.mt-8 { margin-top: 8px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-8 { margin-bottom: 8px; } .mb-16 { margin-bottom: 16px; } .mb-24 { margin-bottom: 24px; }
.grid-2 { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
.grid-3 { display: grid; grid-template-columns: 1fr; gap: 12px 16px; }
.span-2 { grid-column: 1 / -1; }
.only-desktop { display: none !important; }
@media (min-width: 768px) {
  .grid-2 { grid-template-columns: 1fr 1fr; }
  .grid-3 { grid-template-columns: 1fr 1fr 1fr; }
  .only-desktop { display: initial !important; }
  .only-mobile { display: none !important; }
  h1 { font-size: 30px; }
  h2 { font-size: 23px; }
}
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { transition: none !important; animation: none !important; }
}

/* ==========================================================================
   연구소 홈페이지(class.joohalab.com)와 같은 모양 — 통합 플랫폼으로 옮기며 맞춤
   글꼴 Pretendard · 짙은 갈색 알약 버튼(50px·800) · 캐러멜 강조 · 따뜻한 흰 입력칸(12px) · 모서리 22px 카드
   ========================================================================== */
body { background: var(--bg); word-break: keep-all; }
h1, h2, h3, h4 { font-weight: 800; letter-spacing: -0.035em; color: var(--heading); }
.btn { font-weight: 800; }
.btn-primary { background: var(--primary); color: var(--primary-ink); border-color: var(--primary); box-shadow: var(--primary-shadow); }
.btn-primary:hover:not(:disabled) { background: var(--primary-hover); border-color: var(--primary-hover); }
.btn-ghost { border-color: var(--line-2); }
.btn-ghost:hover:not(:disabled) { background: var(--ghost-hover); border-color: var(--ghost-hover-line); }
.btn-soft { background: var(--soft-bg); color: var(--soft-ink); border-color: var(--soft-line); }
.btn-soft:hover:not(:disabled) { background: var(--soft-hover); }
.card { border: 1px solid var(--line-2); box-shadow: var(--shadow-card); }
.label { font-weight: 800; font-size: 13px; color: var(--ink); }
.input, .select, .textarea { background: var(--input-bg); border-color: var(--input-line); }
.progress { height: 8px; border-radius: 999px; background: var(--progress-bg); }
.progress-bar { border-radius: 999px; background: linear-gradient(90deg, #E8C4AE, #C18D71); }
.progress-bar.is-sage { background: var(--sage); }
.task .task-name, .card-title, .consent-title { font-weight: 800; letter-spacing: -0.02em; }

/* 상단 바: 연구소 로고 */
.topbar { background: var(--topbar-bg); border-bottom: 1px solid var(--topbar-line); box-shadow: none; }
.brand { gap: 12px; }
.brand .lab-logo { height: 40px; width: auto; }
.brand #brandLogo:not([hidden]) + .lab-logo { display: none; }
.brand span { font-size: 13px; font-weight: 700; color: var(--muted); border-left: 1px solid var(--line-2); padding-left: 12px; }
@media (max-width: 480px) { .brand .lab-logo { height: 32px; } .brand span { display: none; } }

/* 로그인·가입: 홈페이지 로그인 화면(MEMBER SPACE)과 같은 틀 */
.lab-header { height: 84px; padding: 0 24px; display: flex; align-items: center; justify-content: space-between; background: #fff; border-bottom: 1px solid #F5EDE8; }
.lab-header img { height: 50px; width: auto; display: block; }
.lab-header .pill { font-size: 12.5px; font-weight: 600; color: #fff; background: #C18D71; border-radius: 50px; padding: 8px 14px; box-shadow: 0 4px 14px rgba(193, 141, 113, .3); }
.lab-header .pill:hover { text-decoration: none; background: #B27D62; }
.lab-hero { background: linear-gradient(120deg, #FFFEFC, #F2E4DC); text-align: center; padding: 52px 20px; position: relative; overflow: hidden; }
.lab-hero::after { content: ''; position: absolute; right: -120px; top: -160px; width: 420px; height: 420px; border-radius: 50%; border: 56px solid rgba(255, 255, 255, .3); }
.lab-hero h1 { font-size: clamp(26px, 4vw, 38px); letter-spacing: -0.05em; font-weight: 700; margin: 0 0 8px; position: relative; }
.lab-hero p { color: #8A7066; margin: 0; position: relative; }
.auth-shell { width: 100%; max-width: 980px; display: grid; grid-template-columns: minmax(0, .9fr) minmax(0, 1fr); background: #fff; border: 1px solid #E7D9D2; border-radius: 28px; box-shadow: 0 26px 70px rgba(56, 23, 17, .11); overflow: hidden; }
.auth-shell > .login-card { max-width: none; border: 0; box-shadow: none; border-radius: 0; }
.auth-side { background: radial-gradient(circle at 110% 110%, rgba(193, 141, 113, .28), transparent 42%), #4A2A24; color: #fff; padding: 48px 38px; display: flex; flex-direction: column; gap: 18px; }
.auth-side .kicker { font-size: 12px; font-weight: 800; letter-spacing: .16em; color: #E8C4AE; }
.auth-side h2 { color: #fff; font-size: clamp(22px, 2.6vw, 29px); line-height: 1.35; margin: 0; }
.auth-side p { color: rgba(255, 255, 255, .72); font-size: 14px; line-height: 1.8; margin: 0; }
.auth-feats { list-style: none; margin: 6px 0 0; padding: 0; display: grid; gap: 10px; }
.auth-feats li { background: rgba(255, 255, 255, .055); border: 1px solid rgba(255, 255, 255, .1); border-radius: 14px; padding: 14px; display: grid; grid-template-columns: 38px 1fr; gap: 12px; align-items: center; }
.auth-feats i { width: 38px; height: 38px; border-radius: 11px; background: rgba(255, 255, 255, .1); display: grid; place-items: center; font-style: normal; }
.auth-feats b { display: block; font-size: 14px; }
.auth-feats span { font-size: 12.5px; color: rgba(255, 255, 255, .62); }
.tabs { background: #F4EEEA !important; border-radius: 12px !important; }
.tab { border-radius: 10px !important; font-weight: 800 !important; }
.tab.is-on { color: #5A322C !important; box-shadow: 0 5px 15px rgba(56, 23, 17, .1) !important; }
.lab-footer { background: #1E1814; color: rgba(255, 255, 255, .6); font-size: 12.5px; padding: 26px 20px; text-align: center; display: grid; gap: 6px; }
.lab-footer b { color: rgba(255, 255, 255, .85); }
.lab-footer a { color: rgba(255, 255, 255, .7); }
@media (max-width: 820px) {
  .auth-shell { grid-template-columns: 1fr; }
  .auth-side { padding: 28px 24px; }
  .auth-feats { display: none; }
  .lab-header { height: 68px; padding: 0 16px; }
  .lab-header img { height: 40px; }
}
.login { min-height: 100vh; }
.login-main { align-items: flex-start !important; padding: 48px 16px 64px !important; }
.login-card .brand-mark .lab-logo { height: 40px; width: auto; }
.login-card .brand-mark #brandLogo:not([hidden]) ~ .lab-logo { display: none; }

/* ==========================================================================
   어두운 모양 — 휴대폰 · 컴퓨터 설정이 어두운 모양이면 (신청서 화면 html.theme-auto 에만)
   색 이름(토큰)만 바꾼다. 화면 규칙은 위 토큰만 쓰므로 여기 한 곳이 어두운 모양의 전부다.
   ========================================================================== */
@media (prefers-color-scheme: dark) {
  html.theme-auto {
    color-scheme: dark;
    --bg: #16110E; --card: #211915; --ink: #F1E6E0; --heading: #FBF2EC; --muted: #B9A69C;
    --line: #3A2E28; --line-2: #3A2E28; --sunk: #1B1411; --sunk-2: #2E241F;
    --input-bg: #1B1411; --input-line: #4A3B33; --placeholder: #807067; --disabled-bg: #2A211C;
    --accent: #D6A184; --accent-deep: #EBC1A6; --accent-soft: #3A2A21;
    --sage: #79AE90; --sage-deep: #A3D3B7; --sage-soft: #1D3127;
    --night: #9CA7DA; --night-soft: #252B42;
    --danger: #F08C84; --danger-soft: #3E2220;
    --warn: #E5B25D; --warn-soft: #3A2D16;
    --on-fill: #1B120E;
    --primary: #EBC9B3; --primary-hover: #F6DAC8; --primary-ink: #2A1712; --primary-shadow: none;
    --soft-bg: #33251E; --soft-ink: #F0CFBA; --soft-line: #4A372D; --soft-hover: #3E2D25;
    --ghost-hover: #2E221C; --ghost-hover-line: #5A443A;
    --topbar-bg: rgba(22, 17, 14, .94); --topbar-line: #2E241F;
    --backdrop: rgba(0, 0, 0, .62);
    --toast-bg: #3B2F29; --toast-ink: #FBF2EC;
    --progress-bg: #2E241F;
    --thumb-del: rgba(0, 0, 0, .7);
    --done-bg: #1C241F; --missing-bg: #2E1B19; --on-fill-soft: rgba(0, 0, 0, .16);
    --tone-wake: #E8A27E;   --tone-wake-ink: #F2B999;   --tone-wake-bg: rgba(232, 162, 126, .16);
    --tone-feed: #8FC3AB;   --tone-feed-ink: #A8D8C1;   --tone-feed-bg: rgba(143, 195, 171, .16);
    --tone-nap: #E0936A;    --tone-nap-ink: #F0AC86;    --tone-nap-bg: rgba(224, 147, 106, .16);
    --tone-night: #9CA7DA;  --tone-night-ink: #B7C0EC;  --tone-night-bg: rgba(156, 167, 218, .18);
    --tone-waking: #EE9486; --tone-waking-ink: #F6AEA3; --tone-waking-bg: rgba(238, 148, 134, .16);
    --chart-axis: #A08F86; --chart-ink: #F1E6E0; --chart-grid: #3A2E28; --chart-bg: #2A211C;
    --shadow-card: 0 18px 50px rgba(0, 0, 0, .35);
    --shadow-pop: 0 14px 40px rgba(0, 0, 0, .5);
    --shadow-sticky: 0 8px 12px -10px rgba(0, 0, 0, .6);
  }
  html.theme-auto .brand .lab-logo { filter: invert(1) hue-rotate(180deg) brightness(1.1); }
}