:root {
    /* 관리자 앱과 같은 디자인 언어입니다.
       따뜻한 오프화이트 바탕, 딥 차콜 본문, 낮은 채도의 시설 구분색. */
    --bg: #f2f0e9;
    --surface: #ffffff;
    --surface-2: #f4f2ec;
    --border: #e2ded5;
    --border-strong: #cfcabe;
    --text: #111827;
    --text-muted: #4b5563;
    --text-faint: #656c78;

    --accent: #1f4e79;
    --accent-hover: #173c5e;
    --accent-tint: #e2e8ee;

    /* 시설 구분색 — 어느 공간인지 알아보게 하는 기능색입니다.
       흰 글씨 대비 5.3:1 이상을 확인했습니다. */
    --accent-exam: #1f4e79;
    --accent-media: #5b3a8c;
    --accent-terrace: #0f6b63;
    --accent-dorm: #8e4b1e;
    --accent-clinic: #96253f;
    --accent-medication: #4a7028;

    --success: #3f6f4a;
    --warning: #8f6220;
    --danger: #9b3838;

    --radius-sm: 8px;
    --radius-md: 10px;
    --radius-lg: 12px;
    --radius-pill: 999px;

    --shadow-sm: 0 1px 1px rgba(17,24,39,.03);
    --shadow-md: 0 1px 2px rgba(17,24,39,.03), 0 8px 28px -12px rgba(17,24,39,.07);
    --shadow-lg: 0 2px 8px rgba(17,24,39,.04), 0 24px 64px -16px rgba(17,24,39,.16);

    --ease: cubic-bezier(.22,.7,.32,1);
  }

  * { margin:0; padding:0; box-sizing:border-box; -webkit-tap-highlight-color:transparent; }

  body {
    background: var(--bg);
    color: var(--text);
    font-family: 'Inter','Noto Sans KR',system-ui,-apple-system,sans-serif;
    font-feature-settings:'cv02','cv03','cv04','tnum';
    line-height: 1.6;
    min-height: 100vh;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 88px 24px 120px;
    -webkit-font-smoothing: antialiased;
  }

  /* ── 헤더 ── */
  header { width:100%; max-width:820px; margin-bottom:52px; text-align:left; }
  .eyebrow {
    display:block; font-size:.625rem; font-weight:600; letter-spacing:.18em;
    color:var(--text-faint); text-transform:uppercase; margin-bottom:14px;
  }
  header h1 { font-size:2.625rem; font-weight:600; color:var(--text); letter-spacing:-0.045em; line-height:1.12; }
  header p { color:var(--text-faint); font-size:.9375rem; margin-top:12px; font-variant-numeric:tabular-nums; }

  /* ── 공간 선택 ── */
  .room-toggle {
    display:grid; grid-template-columns:repeat(6,minmax(0,1fr)); gap:10px;
    width:100%; max-width:820px; margin-bottom:40px;
  }
  /* 층별 태블릿처럼 공간이 적으면 그 수만큼 넓게 나눕니다. 선택자가 더 구체적이라 화면 크기별 규칙보다 우선합니다. */
  .room-toggle[data-count="2"] { grid-template-columns:repeat(2,minmax(0,1fr)); }
  .room-toggle[data-count="3"] { grid-template-columns:repeat(3,minmax(0,1fr)); }
  .room-btn {
    padding:18px 12px 16px; border-radius:var(--radius-lg); border:1px solid var(--border);
    background:var(--surface); cursor:pointer;
    display:flex; flex-direction:column; align-items:center; gap:10px;
    font-family:inherit; transition:all .2s var(--ease);
  }
  .room-btn:hover { border-color:var(--border-strong); box-shadow:var(--shadow-md); transform:translateY(-1px); }
  .room-btn .icon {
    width:36px; height:36px; border-radius:var(--radius-sm);
    display:flex; align-items:center; justify-content:center;
    background:var(--surface-2); color:var(--text-faint);
    transition:all .2s var(--ease); flex-shrink:0;
  }
  .room-btn .icon svg { width:19px; height:19px; }
  .room-btn .label { font-size:.9375rem; font-weight:500; color:var(--text-muted); line-height:1.35; }
  .room-btn .sub { font-size:.75rem; color:var(--text-faint); line-height:1.4; }

  /* 선택 표시는 테두리와 아이콘 색으로만. 카드 전체를 물들이지 않습니다. */
  .room-btn.active { border-color:var(--border-strong); box-shadow:var(--shadow-md); }
  .room-btn.active .label { color:var(--text); font-weight:600; }
  .room-btn.exam.active { border-color:var(--accent-exam); }
  .room-btn.exam.active .icon { background:var(--accent-tint); color:var(--accent-exam); }
  .room-btn.media.active { border-color:var(--accent-media); }
  .room-btn.media.active .icon { background:#eae5f0; color:var(--accent-media); }
  .room-btn.terrace.active { border-color:var(--accent-terrace); }
  .room-btn.terrace.active .icon { background:#e0eceb; color:var(--accent-terrace); }
  .room-btn.dorm.active { border-color:var(--accent-dorm); }
  .room-btn.dorm.active .icon { background:#f0e8e2; color:var(--accent-dorm); }
  .room-btn.clinic.active { border-color:var(--accent-clinic); }
  .room-btn.clinic.active .icon { background:#f1e3e6; color:var(--accent-clinic); }
  .room-btn.medication.active { border-color:var(--accent-medication); }
  .room-btn.medication.active .icon { background:#e7ece3; color:var(--accent-medication); }

  /* ── 카드 ── */
  .card {
    width:100%; max-width:820px;
    background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-lg); padding:48px 44px; display:none;
    box-shadow:var(--shadow-md);
  }
  .card.visible { display:block; animation:fadeUp .24s var(--ease); }
  @keyframes fadeUp { from{opacity:0;transform:translateY(6px);} to{opacity:1;transform:translateY(0);} }

  .card-title {
    font-size:1.5rem; font-weight:600; margin-bottom:40px;
    display:flex; align-items:center; gap:12px; letter-spacing:-0.035em; line-height:1.25;
  }
  .card-title .dot { width:8px; height:8px; border-radius:50%; background:var(--accent-exam); flex-shrink:0; }
  .card.media .card-title .dot { background:var(--accent-media); }
  .card.terrace .card-title .dot { background:var(--accent-terrace); }
  .card.dorm .card-title .dot { background:var(--accent-dorm); }
  .card.clinic .card-title .dot { background:var(--accent-clinic); }
  .card.medication .card-title .dot { background:var(--accent-medication); }

  /* ── 입력 ── */
  .field { margin-bottom:30px; }
  label {
    display:block; font-size:.875rem; color:var(--text-muted);
    margin-bottom:9px; font-weight:500;
  }

  input[type="text"], select {
    width:100%; background:var(--surface); border:1px solid var(--border);
    border-radius:var(--radius-sm); padding:13px 15px; color:var(--text);
    font-size:1rem; font-family:inherit; line-height:1.5;
    outline:none; transition:all .2s var(--ease);
    -webkit-appearance:none; appearance:none;
  }
  input[type="text"]::placeholder { color:var(--text-faint); }
  input[type="text"]:hover, select:hover { border-color:var(--border-strong); }
  input[type="text"]:focus, select:focus { border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-tint); }
  .card.media input[type="text"]:focus, .card.media select:focus { border-color:var(--accent-media); box-shadow:0 0 0 3px #eae5f0; }
  .card.terrace input[type="text"]:focus, .card.terrace select:focus { border-color:var(--accent-terrace); box-shadow:0 0 0 3px #e0eceb; }
  .card.dorm input[type="text"]:focus, .card.dorm select:focus { border-color:var(--accent-dorm); box-shadow:0 0 0 3px #f0e8e2; }
  .card.clinic input[type="text"]:focus, .card.clinic select:focus { border-color:var(--accent-clinic); box-shadow:0 0 0 3px #f1e3e6; }
  .card.medication input[type="text"]:focus, .card.medication select:focus { border-color:var(--accent-medication); box-shadow:0 0 0 3px #e7ece3; }
  select option { background:var(--surface); }

  .ban-tag {
    display:inline-flex; align-items:center; gap:6px;
    padding:5px 11px; border-radius:6px; margin-top:9px;
    background:var(--surface-2); border:1px solid var(--border);
    font-size:.8125rem; font-weight:500; color:var(--text-muted);
  }

  .time-3col { display:grid; grid-template-columns:1fr 1fr 1fr; gap:10px; }

  /* ── 사용 목적 선택 ── */
  .cat-chips { display:flex; flex-wrap:wrap; gap:8px; }
  .cat-chip {
    padding:10px 16px; border-radius:var(--radius-sm); border:1px solid var(--border);
    background:var(--surface); color:var(--text-muted); font-size:.9375rem;
    cursor:pointer; user-select:none; font-family:inherit; font-weight:500;
    appearance:none; text-align:left; transition:all .2s var(--ease);
  }
  .cat-chip:hover { border-color:var(--accent-media); color:var(--accent-media); }
  .cat-chip.selected {
    border-color:var(--accent-media); background:#eae5f0;
    color:var(--accent-media); font-weight:600;
  }
  .cat-divider { border:none; border-top:1px solid var(--border); margin:20px 0; }
  .cat-breadcrumb {
    font-size:.8125rem; color:var(--text-faint); margin-bottom:12px;
    display:flex; align-items:center; gap:6px; flex-wrap:wrap;
  }
  .cat-breadcrumb .bc-item { color:var(--accent-media); font-weight:600; }
  .cat-breadcrumb .bc-sep { color:var(--text-faint); }
  .cat-reset {
    font-size:.8125rem; color:var(--text-faint); cursor:pointer; margin-left:auto;
    border:none; background:transparent; padding:0; font-family:inherit;
    text-decoration:underline; text-underline-offset:2px;
  }
  .cat-reset:hover { color:var(--danger); }
  .site-result {
    margin-top:12px; padding:12px 15px;
    background:#eae5f0; border:1px solid #cec4dd;
    border-radius:var(--radius-sm); font-size:.875rem; color:var(--accent-media); font-weight:500;
    display:none;
  }

  /* ── 제출 버튼 ── */
  .submit-btn {
    width:100%; padding:15px; border-radius:var(--radius-sm); border:1px solid transparent;
    font-size:1rem; font-weight:600; font-family:inherit; color:#fff;
    cursor:pointer; margin-top:8px; transition:all .2s var(--ease);
  }
  .submit-btn.exam { background:var(--accent-exam); }
  .submit-btn.exam:hover { background:var(--accent-hover); }
  .submit-btn.media { background:var(--accent-media); }
  .submit-btn.media:hover { background:#5c4e82; }
  .submit-btn.terrace { background:var(--accent-terrace); }
  .submit-btn.terrace:hover { background:#365f55; }
  .submit-btn.dorm { background:var(--accent-dorm); }
  .submit-btn.dorm:hover { background:#854d2b; }
  .submit-btn.clinic { background:var(--accent-clinic); }
  .submit-btn.clinic:hover { background:#883546; }
  .submit-btn.medication { background:var(--accent-medication); }
  .submit-btn.medication:hover { background:#3f5837; }

  /* 보조 동작(퇴실)은 외곽선 버튼으로 낮춰 주요 동작과 구분합니다. */
  .submit-btn.secondary-dorm {
    background:var(--surface); color:var(--accent-dorm); border-color:var(--border);
  }
  .submit-btn.secondary-dorm:hover { background:#f0e8e2; border-color:var(--accent-dorm); }
  .submit-btn.secondary-clinic {
    background:var(--surface); color:var(--accent-clinic); border-color:var(--border);
  }
  .submit-btn.secondary-clinic:hover { background:#f1e3e6; border-color:var(--accent-clinic); }

  .dorm-actions, .clinic-entry-actions {
    display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; margin-top:8px;
  }
  .dorm-actions .submit-btn, .clinic-entry-actions .submit-btn { margin-top:0; min-width:0; }
  .submit-btn:active { transform:scale(.995); }
  .submit-btn:disabled { opacity:.45; cursor:not-allowed; }
  button:focus-visible, input:focus-visible, select:focus-visible {
    outline:2px solid var(--accent); outline-offset:2px;
  }

  /* ── 양호실 ── */
  .clinic-policy {
    margin-bottom:28px; padding:14px 16px; border:1px solid var(--border);
    border-radius:var(--radius-md); background:var(--surface-2); color:var(--text-muted);
    font-size:.875rem; line-height:1.7;
  }
  .clinic-duration-grid { display:grid; grid-template-columns:repeat(2,minmax(0,1fr)); gap:10px; }
  .clinic-duration-btn {
    padding:15px 10px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--text-muted); font-family:inherit;
    font-size:.9375rem; font-weight:500; cursor:pointer; transition:all .2s var(--ease);
  }
  .clinic-duration-btn:hover { border-color:var(--accent-clinic); color:var(--accent-clinic); }
  .clinic-duration-btn.selected {
    border-color:var(--accent-clinic); background:#f1e3e6;
    color:var(--accent-clinic); font-weight:600;
  }

  /* 침대 배정 대신 현재 이용 인원만 보여줍니다. 값이 늦게 와도 아래 입력칸이 밀리지 않게 높이를 잡아 둡니다. */
  .clinic-live-count {
    min-height:1.5em; margin:-16px 0 28px; padding:0 2px;
    color:var(--text-muted); font-size:.875rem; font-weight:500; font-variant-numeric:tabular-nums;
  }
  .clinic-selection-summary {
    min-height:1.4em; margin-top:8px; color:var(--accent-clinic);
    font-size:.875rem; font-weight:600;
  }

  /* ── 의약품 ── */
  .medication-policy {
    margin-bottom:28px; padding:14px 16px; border:1px solid var(--border);
    border-radius:var(--radius-md); background:var(--surface-2); color:var(--text-muted);
    font-size:.875rem; line-height:1.7;
  }
  .med-group { margin-bottom:24px; }
  .med-group:last-child { margin-bottom:0; }
  .med-group-title {
    font-size:.6875rem; font-weight:600; color:var(--text-faint); letter-spacing:.14em;
    text-transform:uppercase; margin-bottom:12px; display:flex; align-items:center; gap:12px;
  }
  .med-group-title::after { content:''; flex:1; height:1px; background:var(--border); }
  .med-items { display:grid; grid-template-columns:repeat(auto-fill,minmax(158px,1fr)); gap:10px; }
  .med-item {
    padding:14px 16px; border:1px solid var(--border); border-radius:var(--radius-sm);
    background:var(--surface); color:var(--text); font-family:inherit;
    cursor:pointer; text-align:left; min-height:60px;
    display:flex; flex-direction:column; justify-content:center; gap:3px;
    transition:all .2s var(--ease);
  }
  .med-item:hover { border-color:var(--accent-medication); box-shadow:var(--shadow-md); }
  .med-item.selected { border-color:var(--accent-medication); background:#e7ece3; }
  .med-item-name { font-size:.9375rem; font-weight:500; line-height:1.35; }
  .med-item-note { font-size:.75rem; color:var(--text-faint); line-height:1.35; }
  .med-item.selected .med-item-name { color:var(--accent-medication); font-weight:600; }
  .medication-selection {
    min-height:1.4em; margin-top:12px; color:var(--accent-medication);
    font-size:.875rem; font-weight:600;
  }
  .loading-msg { color:var(--text-faint); font-size:.9375rem; padding:12px 0; }

  /* ── 토스트 ── */
  .toast {
    position:fixed; bottom:36px; left:50%;
    transform:translateX(-50%) translateY(100px);
    background:var(--text); color:#fff;
    padding:14px 26px; border-radius:var(--radius-md);
    font-weight:500; font-size:.9375rem;
    transition:transform .32s var(--ease);
    z-index:100; max-width:calc(100vw - 40px); white-space:normal; text-align:center;
    box-shadow:var(--shadow-lg);
  }
  .toast.show { transform:translateX(-50%) translateY(0); }

  .pending-records {
    max-width:900px; margin:0 auto 24px; padding:18px 20px;
    border:1px solid #c48743; border-radius:var(--radius-md);
    background:#fff8eb; color:var(--text);
  }
  .pending-records[hidden] { display:none; }
  .pending-heading h2 { margin:0 0 4px; font-size:1rem; }
  .pending-heading p { margin:0 0 12px; font-size:.875rem; line-height:1.5; color:var(--text-muted); }
  .pending-record {
    border-top:1px solid #e5d6bd; padding:12px 0;
    overflow-wrap:anywhere;
  }
  .pending-record summary { cursor:pointer; font-weight:600; line-height:1.5; }
  .pending-record pre {
    margin:10px 0; padding:12px; border-radius:var(--radius-sm);
    background:#fff; white-space:pre-wrap; font:inherit; font-size:.8125rem;
  }
  .pending-actions { display:flex; gap:8px; flex-wrap:wrap; }
  .pending-actions button {
    padding:8px 12px; border:1px solid #c9bbab; border-radius:var(--radius-sm);
    background:#fff; color:var(--text); font:inherit; cursor:pointer;
  }
  .pending-actions button:hover { border-color:var(--accent); }

  @media (max-width: 720px) {
    .room-toggle { grid-template-columns:repeat(3,minmax(0,1fr)); }
  }
  @media (max-width: 560px) {
    body { padding:32px 16px 64px; }
    header h1 { font-size:1.625rem; }
    .room-toggle { grid-template-columns:repeat(2,minmax(0,1fr)); gap:8px; }
    .room-btn { padding:14px 8px 12px; gap:8px; }
    .room-btn .sub { display:none; }
    .card { padding:28px 20px; }
    .card-title { font-size:1.1875rem; margin-bottom:24px; }
    .med-items { grid-template-columns:repeat(2,minmax(0,1fr)); }
    .dorm-actions, .clinic-entry-actions { grid-template-columns:1fr; }
    .pending-records { padding:16px; }
  }

  @media (prefers-reduced-motion: reduce) {
    *, *::before, *::after {
      animation-duration:.01ms!important;
      animation-iteration-count:1!important;
      transition-duration:.01ms!important;
    }
  }