:root {
  --navy-900: #16223a;
  --blue-900: #12395e;
  --blue-800: #1c4a7a;
  --blue-700: #275f9c;
  --blue-600: #3573b8;
  --blue-500: #4d8ad0;
  --blue-100: #dbe6f4;
  --blue-50:  #eef3fa;
  --beige-100: #f2e9d8;
  --beige-200: #e8dcc2;
}

* { box-sizing: border-box; }
body {
  margin: 0;
  padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
  font-family: -apple-system, "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  background: #d5d9df;  /* 카드 뒤 바탕. 10/20 사용자 요청으로 #e6e8eb보다 한 단계 어둡게 */
  color: #1f2430;
}
header {
  background-color: var(--navy-900);
  background-image: repeating-linear-gradient(
    135deg,
    rgba(255,255,255,0.045) 0px,
    rgba(255,255,255,0.045) 1px,
    transparent 1px,
    transparent 13px
  );
  color: white;
  height: 64px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  position: sticky;
  top: 0;
  z-index: 11;
}
header h1 { margin: 0; font-size: 1.2rem; line-height: 1.35; }
header .subtitle { font-size: 0.8rem; font-weight: 400; opacity: 0.85; }

.header-actions {
  position: absolute;
  right: calc(26px + env(safe-area-inset-right, 0px));
  display: flex;
  align-items: center;
  gap: 8px;
}

.text-size-btn {
  padding: 6px 10px;
  background: rgba(255,255,255,0.15);
  color: white;
  border: 1px solid rgba(255,255,255,0.4);
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}


.search-row { margin-bottom: 10px; }
.search-input {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
}

.controls {
  padding: 12px 16px;
  background: var(--beige-100);
  border-bottom: 1px solid var(--beige-200);
  position: sticky;
  top: 64px;
  z-index: 10;
}
.tab-sub { font-size: 0.68rem; font-weight: 400; opacity: 0.8; }

.quick-actions {
  display: flex;
  gap: 6px;
  margin-bottom: 10px;
}
.quick-btn {
  min-width: 0;
  padding: 10px 4px;
  border-radius: 8px;
  font-size: 0.82rem;
  font-weight: 700;
  cursor: pointer;
  line-height: 1.3;
}

/* 하단 고정 네비게이션 */
.bottom-nav {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 30;
  display: flex;
  background: white;
  border-top: 1px solid #d1d5db;
  box-shadow: 0 -2px 8px rgba(0,0,0,0.08);
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.nav-tab {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 2px;
  padding: 6px 2px 8px;
  border: none;
  background: none;
  color: #4b5563;
  font-size: 0.68rem;
  font-weight: 600;
  line-height: 1.2;
  text-align: center;
  cursor: pointer;
}
.nav-icon { font-size: 1.2rem; }
.nav-tab.active { color: var(--blue-700); }
.nav-tab[data-kind="all"] { color: #b3261e; }
.nav-tab[data-kind="all"].active { color: #b3261e; background: #fff1a8; }

.dept-filter {
  position: relative;
  margin-bottom: 10px;
}
.dept-btn {
  width: 100%;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.9rem;
  background: white;
  color: #1f2430;
  text-align: left;
  cursor: pointer;
}
.dept-panel {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  max-height: 280px;
  overflow-y: auto;
  background: white;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  z-index: 20;
}
.dept-panel-header {
  position: sticky;
  top: 0;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  background: white;
  border-bottom: 1px solid #e5e7eb;
  padding: 6px;
  z-index: 1;
}
.dept-panel-header .dept-option {
  flex: 1;
  margin: 0;
  padding: 8px 6px;
}
.dept-done-btn {
  flex-shrink: 0;
  padding: 8px 14px;
  border: none;
  border-radius: 6px;
  background: var(--blue-700);
  color: white;
  font-size: 0.85rem;
  font-weight: 600;
  cursor: pointer;
}
#dept-options { padding: 6px; }
.dept-option {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px 6px;
  font-size: 0.9rem;
  cursor: pointer;
  border-radius: 6px;
}
.dept-option:hover { background: #f5f6f8; }
.dept-option-all { font-weight: 600; }

.locate-btn {
  width: 100%;
  padding: 12px;
  background: var(--blue-800);
  color: white;
  border: none;
  border-radius: 8px;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
}
.locate-btn:active { opacity: 0.85; }

.region-search-btn {
  background: white;
  color: var(--blue-700);
  border: 1px solid var(--blue-700);
}
.region-search-btn:active { opacity: 0.85; }
.region-search-hint { font-size: 0.68rem; font-weight: 700; }

.near-er-btn {
  background: #fdecea;
  color: #c62828;
  border: 1px solid #c62828;
}
.near-er-btn:active { opacity: 0.85; }
.near-er-big { font-size: 1.2em; }  /* "응급실"만 조금 크게(사용자 요청, 20%) */

.quick-actions .near-er-btn { flex: 3 1 0; }
.quick-actions .near-all-btn { flex: 7 1 0; }
.quick-actions .region-search-btn { flex: 3 1 0; }
.near-all-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  font-size: 1.23rem;
  line-height: 1.2;
  background: #ffd60a;
  color: #111827;
  border: 1px solid #e0b400;
}
.near-all-btn:active { opacity: 0.85; }
.near-all-text { text-align: left; }

.region-search-box[hidden] { display: none; }
.region-search-box {
  display: flex;
  gap: 8px;
  margin-top: 8px;
}
.region-search-box .search-input { flex: 1; margin: 0; }
.region-search-box .modal-btn-primary { flex: none; width: auto; padding: 10px 16px; }

.region-candidates[hidden] { display: none; }
.region-candidates {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-top: 8px;
}
.region-candidate-btn {
  text-align: left;
  padding: 10px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  background: white;
  color: #1f2430;
  font-size: 0.88rem;
  cursor: pointer;
}
.region-candidate-btn:active { background: var(--blue-50); }

.region-active-label[hidden] { display: none; }
.region-active-label {
  display: block;
  margin-top: 8px;
  padding: 8px 10px;
  background: var(--blue-50);
  color: var(--blue-800);
  border-radius: 8px;
  font-size: 0.85rem;
  font-weight: 600;
}

.open-filter[hidden] { display: none; }
.open-filter {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 10px;
  font-size: 0.85rem;
  color: #374151;
}

.open-filter-note {
  color: #dc2626;
  font-size: 0.78rem;
}

.status {
  padding: 16px;
  text-align: center;
  color: #6b7280;
}

.results[hidden] { display: none; }
.results { padding: 12px 16px; display: flex; flex-direction: column; gap: 10px; }

.card {
  background: #eef0f3;  /* 10/20 사용자 요청: 흰색보다 조금 어둡게(바탕 #d5d9df보다는 밝게 유지) */
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.card-top { display: flex; align-items: center; gap: 8px; margin-bottom: 6px; }
.badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 999px;
  font-size: 0.75rem;
  font-weight: 600;
}
.badge.hospital { background: var(--blue-100); color: var(--blue-700); }
.badge.pharmacy { background: #e6f4ea; color: #1e8e3e; }
.dist { font-size: 0.85rem; color: #6b7280; font-weight: 600; margin-left: auto; }

.star-btn {
  font-size: 1.3rem;
  line-height: 1;
  color: #d1d5db;
  cursor: pointer;
  user-select: none;
}
.star-btn.faved { color: #f59e0b; }

.share-btn {
  font-size: 1.1rem;
  line-height: 1;
  cursor: pointer;
  user-select: none;
}

.name { font-size: 1.05rem; font-weight: 700; margin-bottom: 2px; }
.type { font-size: 0.85rem; color: #6b7280; margin-bottom: 4px; }
.addr { font-size: 0.9rem; color: #374151; margin-bottom: 4px; }

.open-status { font-size: 0.85rem; font-weight: 600; margin-bottom: 10px; }
.open-status.open { color: #1e8e3e; }
.open-status.closed { color: #9ca3af; }
.open-status.unknown { color: #9ca3af; font-weight: 400; }
.open-status.soon { color: #c2410c; }
.open-status:has(+ .open-warn) { margin-bottom: 4px; }

.open-warn {
  font-size: 0.8rem;
  font-weight: 600;
  color: #9a3412;
  background: #fff4e5;
  padding: 5px 8px;
  border-radius: 6px;
  margin-bottom: 6px;
}

.place-note {
  font-size: 0.8rem;
  color: #6b7280;
  margin: -4px 0 10px;
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  cursor: pointer;
}
.place-note.expanded { display: block; -webkit-line-clamp: unset; }

.er-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: #c62828;
  background: #fdecea;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.moonlight-status {
  font-size: 0.85rem;
  font-weight: 600;
  color: #4a3b8f;
  background: #ede9fb;
  padding: 6px 8px;
  border-radius: 6px;
  margin-bottom: 10px;
}

.btn-er-call {
  display: block;
  text-align: center;
  margin-top: 8px;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.85rem;
  font-weight: 700;
  background: #c62828;
  color: white;
}

.actions { display: flex; flex-wrap: wrap; gap: 8px; }
.actions a {
  flex: 1;
  min-width: 90px;
  text-align: center;
  padding: 8px;
  border-radius: 8px;
  text-decoration: none;
  font-size: 0.82rem;
  font-weight: 600;
}
.btn-call { background: #fff1a8; color: #111827; font-weight: 700; }
.btn-map { background: #f3f4f6; color: #374151; }
.btn-map-naver { background: #e6f9ea; color: #03a54a; }

.empty { text-align: center; color: #9ca3af; padding: 40px 0; }

.more-btn {
  width: 100%;
  padding: 12px;
  background: white;
  color: var(--blue-700);
  border: 1px solid var(--blue-700);
  border-radius: 10px;
  font-size: 0.95rem;
  font-weight: 700;
  cursor: pointer;
}
.more-btn:disabled { opacity: 0.6; cursor: default; }

.data-meta {
  text-align: center;
  color: #6b7280;
  font-size: 0.75rem;
  padding: 8px 16px 8px;
}
.data-meta.stale {
  color: #c62828;
  background: #fdecea;
  font-weight: 700;
  font-size: 0.85rem;
  margin: 8px 16px;
  border-radius: 8px;
}

.app-footer {
  text-align: center;
  color: #6b7280;
  font-size: 0.72rem;
  line-height: 1.5;
  padding: 0 16px 24px;
}
.app-footer p { margin: 2px 0; }
.app-footer a { color: #4b5563; }

.results-summary {
  font-size: 0.9rem;
  color: #374151;
  padding: 4px 4px 10px;
}
.results-summary b { color: #1e8e3e; }

.myeongjeol-banner {
  font-size: 0.88rem;
  font-weight: 600;
  color: #7c2d12;
  background: #ffedd5;
  border: 1px solid #fdba74;
  padding: 8px 10px;
  border-radius: 8px;
  margin-bottom: 8px;
}
.results-summary .myeongjeol-banner b { color: #c2410c; }

.convenience-notice {
  font-size: 0.88rem;
  color: #1f2937;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  padding: 10px 12px;
  border-radius: 10px;
  margin-bottom: 10px;
  line-height: 1.5;
}
.convenience-title { font-weight: 700; margin-bottom: 4px; }
.results-summary .convenience-notice b { color: #065f46; }
.convenience-btn { display: block; text-align: center; margin-top: 8px; }
.otc-list:empty { display: none; }
.otc-list { margin-top: 8px; background: #fff; border-radius: 8px; padding: 6px 10px; }
.otc-head { font-size: 0.75rem; color: #6b7280; margin-bottom: 4px; }
.otc-item { padding: 6px 0; border-top: 1px solid #e5e7eb; font-size: 0.88rem; }
.otc-item:first-of-type { border-top: 0; }
.otc-item a { color: #065f46; text-decoration: none; }
.otc-addr { font-size: 0.75rem; color: #6b7280; }

.closed-divider {
  font-size: 0.85rem;
  font-weight: 700;
  color: #6b7280;
  text-align: center;
  padding: 10px 0;
  margin: 4px 0 12px;
  border-top: 2px dashed #cbd5e1;
}

.empty-notice {
  font-size: 0.9rem;
  font-weight: 600;
  color: #c62828;
  padding: 12px 4px 4px;
}

html.text-large { font-size: 118%; }
html.text-xlarge { font-size: 138%; }
html.text-large .name, html.text-xlarge .name { font-weight: 800; }

/* 글씨를 키우면 3:3:7 한 줄 버튼이 좁아져 "가까/운/응급실"처럼 끊긴다.
   크게 보기에서는 응급실·특정지역을 윗줄 반반, 내주변 전체검색을 아랫줄 전체로 놓는다. */
.quick-btn { word-break: keep-all; }
html.text-large .quick-actions, html.text-xlarge .quick-actions { flex-wrap: wrap; }
html.text-large .quick-actions .near-er-btn, html.text-xlarge .quick-actions .near-er-btn,
html.text-large .quick-actions .region-search-btn, html.text-xlarge .quick-actions .region-search-btn { flex: 1 1 40%; }
html.text-large .quick-actions .near-all-btn, html.text-xlarge .quick-actions .near-all-btn { flex: 1 1 100%; }
/* 머리글과 하단 탭은 칸이 고정이라 글씨를 키우면 겹치거나 끊긴다("가+"와 제목 겹침, "즐겨찾/기").
   이 둘은 글씨 크기와 상관없이 같은 크기로 둔다(하단 탭은 보통보다 조금만 크게). */
html.text-large header h1, html.text-xlarge header h1 { font-size: 19px; }
html.text-large header .subtitle, html.text-xlarge header .subtitle { font-size: 13px; }
html.text-large .text-size-btn, html.text-xlarge .text-size-btn { font-size: 13px; }
html.text-large .nav-tab, html.text-xlarge .nav-tab { font-size: 12px; word-break: keep-all; }
html.text-large .nav-icon, html.text-xlarge .nav-icon { font-size: 20px; }
html.text-large .tab-sub, html.text-xlarge .tab-sub { font-size: 11px; }
html.text-large .open-filter input[type="checkbox"], html.text-xlarge .open-filter input[type="checkbox"] {
  width: 1.15em; height: 1.15em;
}

/* 응급카드(가족 건강정보) */
.emergency-view { padding: 12px 16px; }
.emergency-intro {
  font-size: 0.85rem;
  color: #6b7280;
  background: var(--blue-50);
  padding: 10px 12px;
  border-radius: 8px;
  margin: 0 0 14px;
}
.family-list { display: flex; flex-direction: column; gap: 10px; margin-bottom: 14px; }
.family-card {
  background: white;
  border-radius: 10px;
  padding: 14px;
  box-shadow: 0 1px 2px rgba(0,0,0,0.06);
}
.family-card-name { font-size: 1.1rem; font-weight: 700; margin-bottom: 6px; }
.family-card-row { font-size: 0.9rem; color: #374151; margin-bottom: 6px; }
.family-card-row.allergy-row { background-color: #fee2e2; color: #991b1b; padding: 8px; border-radius: 6px; font-weight: 700; }
.family-card-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.family-card-actions button { flex: 1; min-width: 70px; }

.backup-box {
  background: #f9fafb;
  border: 1px dashed #d1d5db;
  border-radius: 10px;
  padding: 14px;
  margin-top: 18px;
}
.backup-title { font-weight: 700; margin-bottom: 6px; }
.backup-desc { font-size: 0.82rem; color: #6b7280; margin: 0 0 10px; line-height: 1.5; }
.backup-actions { display: flex; gap: 8px; }
.backup-actions button { flex: 1; }

/* 모달 공통 */
.modal-backdrop[hidden] { display: none; }
.modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.5);
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  z-index: 100;
}
.modal {
  background: white;
  border-radius: 12px;
  padding: 20px;
  width: 100%;
  max-width: 420px;
  max-height: 85vh;
  overflow-y: auto;
}
.modal h2 { margin: 0 0 14px; font-size: 1.1rem; }
.form-field {
  display: block;
  font-size: 0.85rem;
  color: #374151;
  margin-bottom: 12px;
}
.form-field input, .form-field select {
  display: block;
  width: 100%;
  margin-top: 4px;
  padding: 10px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 0.95rem;
}
.modal-actions { display: flex; gap: 8px; margin-top: 8px; }
.modal-btn-primary, .modal-btn-secondary {
  flex: 1;
  padding: 10px;
  border-radius: 8px;
  border: none;
  font-size: 0.9rem;
  font-weight: 600;
  cursor: pointer;
}
.modal-btn-primary { background: var(--blue-700); color: white; }
.modal-btn-secondary { background: #f3f4f6; color: #374151; }

.big-card { 
  background-color: #111827 !important; 
  color: #f3f4f6; 
  text-align: center; 
  border: 4px solid #ef4444; 
}
.big-name { font-size: 2.2rem; font-weight: 900; margin-bottom: 24px; color: #ffffff; }
.big-row { font-size: 1.3rem; color: #d1d5db; margin-bottom: 20px; line-height: 1.6; }
.big-row b { font-size: 1.6rem; color: #ffffff; }
.big-card .allergy-row {
  background-color: #7f1d1d;
  color: #fca5a5;
  padding: 16px;
  border-radius: 12px;
  border: 2px solid #ef4444;
}
.big-card .allergy-row b { color: #fca5a5; font-size: 1.8rem; }
.big-card .blood-row b { color: #fca5a5; font-size: 1.8rem; }

.big-call-119 {
  display: block;
  background-color: #ef4444;
  color: white;
  text-decoration: none;
  font-size: 1.6rem;
  font-weight: 800;
  padding: 16px;
  border-radius: 12px;
  margin-bottom: 24px;
}
.big-tel {
  display: inline-block;
  background-color: #3b82f6;
  color: white;
  text-decoration: none;
  padding: 12px 24px;
  border-radius: 8px;
  font-size: 1.6rem;
  font-weight: bold;
  margin-top: 8px;
}
#family-big-close-btn {
  background: #374151;
  color: white;
  font-size: 1.2rem;
  padding: 16px;
}

/* 증상 안내 뷰 */
.symptom-view {
  padding: 12px 16px 80px;
}
.symptom-intro {
  font-size: 0.88rem;
  color: #374151;
  background: var(--blue-50);
  border-left: 4px solid var(--blue-600);
  padding: 10px 12px;
  border-radius: 6px;
  margin-bottom: 14px;
  line-height: 1.4;
}
.symptom-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
}
.symptom-card {
  background: white;
  border-radius: 10px;
  padding: 12px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.08);
  border: 1px solid #e5e7eb;
}
.symptom-card-header {
  font-size: 1rem;
  font-weight: 700;
  color: #111827;
  margin-bottom: 6px;
  display: flex;
  align-items: center;
  gap: 6px;
}
.symptom-list {
  font-size: 0.82rem;
  color: #4b5563;
  margin-bottom: 10px;
  line-height: 1.4;
}
.symptom-dept-badge {
  display: inline-block;
  background: var(--blue-100);
  color: var(--blue-700);
  font-size: 0.8rem;
  font-weight: 700;
  padding: 3px 8px;
  border-radius: 6px;
  margin-bottom: 8px;
}
.symptom-search-btn {
  width: 100%;
  padding: 8px;
  background: var(--blue-700);
  color: white;
  border: none;
  border-radius: 6px;
  font-size: 0.8rem;
  font-weight: 600;
  cursor: pointer;
}
.symptom-search-btn:active {
  opacity: 0.85;
}


/* 자주 찾는 지역 */
.saved-regions[hidden] { display: none; }
.saved-regions {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-top: 8px;
}
.saved-region {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid #f2c94c;
  border-radius: 999px;
  overflow: hidden;
  background: #fff8db;
}
.saved-region-go {
  border: 0;
  background: transparent;
  padding: 7px 10px 7px 12px;
  font-size: 0.9rem;
  font-weight: 700;
  color: #1f2937;
  cursor: pointer;
}
.saved-region-del {
  border: 0;
  border-left: 1px solid #f2c94c;
  background: transparent;
  padding: 0 10px;
  color: #9ca3af;
  cursor: pointer;
}
.region-save-btn {
  margin-left: 6px;
  border: 1px solid #f2c94c;
  background: #fff8db;
  color: #1f2937;
  border-radius: 999px;
  padding: 3px 10px;
  font-size: 0.8rem;
  font-weight: 700;
  cursor: pointer;
}

/* 부모님 링크로 열었을 때 안내 */
.setup-banner[hidden] { display: none; }
.setup-banner {
  margin-top: 8px;
  padding: 10px 12px;
  background: #ecfdf5;
  border: 1px solid #6ee7b7;
  border-radius: 10px;
  font-size: 0.9rem;
  line-height: 1.5;
}
.setup-banner-close {
  display: block;
  margin-top: 6px;
  border: 0;
  background: #065f46;
  color: #fff;
  border-radius: 8px;
  padding: 6px 12px;
  font-weight: 700;
  cursor: pointer;
}
.parent-box .modal-btn-primary { width: 100%; }
.install-banner { background: #eff6ff; border-color: #93c5fd; }
.install-go {
  display: block;
  width: 100%;
  margin-top: 6px;
  border: 0;
  background: #1a73e8;
  color: #fff;
  border-radius: 8px;
  padding: 9px 12px;
  font-weight: 700;
  font-size: 0.95rem;
  cursor: pointer;
}
.install-banner .setup-banner-close { background: #6b7280; }
/* 긴 체크박스 문구(달빛어린이병원만 보기)는 줄을 바꿔도 체크박스 옆에 붙어 있게 한다.
   사파리에서 글씨를 키우면 글자 덩어리가 통째로 다음 줄로 밀려 체크박스와 떨어졌다(10/17 아이폰 화면 시험). */
#moonlight-only-label, #er-only-label, #h24-only-label { flex-wrap: nowrap; align-items: flex-start; }
#moonlight-only-label input, #er-only-label input, #h24-only-label input { flex: none; margin-top: 0.2em; }

/* 반경 밖에서 찾은 가장 가까운 문 연 곳 표시, 문 연 곳이 없을 때 119 안내 */
.far-tag {
  display: inline-block;
  font-size: 0.78rem;
  font-weight: 700;
  color: #1e40af;
  background: #dbeafe;
  border-radius: 6px;
  padding: 2px 8px;
  margin: 2px 0 4px;
}
.call119-notice {
  font-size: 0.85rem;
  color: #7f1d1d;
  background: #fef2f2;
  border: 1px solid #fecaca;
  border-radius: 8px;
  padding: 8px 10px;
  margin-bottom: 8px;
  line-height: 1.5;
}
.call119-notice a { color: #b91c1c; font-weight: 700; white-space: nowrap; }
.results-summary .empty-notice b { color: inherit; }
.results-summary .call119-notice b { color: inherit; }

/* ───────────────────────────────────────────────────────────────
   디자인 정리 (2026-10-20, 사용자 요청: "AI가 만든 티" 줄이고 세련·단순하게)
   - 핵심 색(곤색 머리글, 베이지 검색 영역, 노란 주 버튼·전화)은 유지
   - 이모지 대신 선 아이콘, 색은 상태(영업중·곧 종료·응급)에만
   - 안내 상자는 한 가지 모양(밝은 바탕 + 왼쪽 색 줄)으로 통일
   ─────────────────────────────────────────────────────────────── */
:root {
  --ink: #1f2430;
  --ink-2: #4b5563;
  --ink-3: #6b7280;
  --line: rgba(15, 23, 42, 0.10);
  --ok: #15803d;
  --warn: #b45309;
  --danger: #b91c1c;
  --yellow: #fcd34d;
  --yellow-ink: #3b2f00;
}

/* 선 아이콘 공통 */
.ico, .nav-icon {
  width: 1.15em;
  height: 1.15em;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
  vertical-align: -0.2em;
  flex: none;
}

/* 머리글: 사선 무늬 빼고 단색 */
header { background-image: none; box-shadow: 0 1px 0 rgba(0, 0, 0, 0.2); }
header h1 { letter-spacing: -0.01em; }

/* 상단 버튼 3개: 같은 모양, 주 버튼만 노랑 */
.quick-actions { gap: 8px; }
.quick-btn {
  border-radius: 12px;
  border: 1px solid var(--line);
  background: #fff;
  color: var(--ink);
  font-weight: 700;
  box-shadow: 0 1px 1px rgba(0, 0, 0, 0.03);
}
.near-er-btn { background: #fff; color: var(--danger); border-color: rgba(185, 28, 28, 0.35); }
.region-search-btn { background: #fff; color: var(--blue-800); }
.region-search-hint { color: var(--ink-3); font-weight: 600; }
.near-all-btn { background: var(--yellow); color: var(--yellow-ink); border-color: rgba(0, 0, 0, 0.08); }

/* 검색창·체크박스 줄 */
.search-input { border-radius: 10px; border-color: var(--line); background: #fff; }
.search-input:focus { outline: 2px solid var(--blue-500); outline-offset: 0; border-color: transparent; }
.open-filter-note { color: var(--danger); font-weight: 500; }  /* 휴일 전화 확인 경고는 사용자가 일부러 빨강으로 둔 것 */

/* 카드 */
.card {
  border-radius: 14px;
  border: 1px solid var(--line);
  box-shadow: none;
  padding: 14px 16px;
}
.badge { background: none !important; padding: 0; border-radius: 0; font-size: 0.8rem; }
.badge.hospital { color: var(--blue-700); }
.badge.pharmacy { color: var(--ok); }
.star-btn, .share-btn { color: #9ca3af; font-size: 1.05rem; display: inline-flex; padding: 2px; }
.star-btn.faved { color: #f59e0b; }
.star-btn.faved .ico { fill: currentColor; }
.dist { color: var(--ink-2); font-weight: 600; }
.name { font-size: 1.08rem; letter-spacing: -0.01em; }
.type { color: var(--ink-3); }
.addr { color: var(--ink-2); }
.far-tag { background: none; padding: 0; margin: 0 0 2px; color: var(--blue-700); font-size: 0.8rem; }

/* 영업 상태: 이모지 대신 작은 색 점 */
.open-status { display: flex; align-items: baseline; flex-wrap: wrap; gap: 0 2px; }
.open-status.open, .open-status.soon, .open-status.closed { }
.open-status.open::before, .open-status.soon::before, .open-status.closed::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: currentColor;
  margin-right: 6px;
  align-self: center;
  flex: none;
}
.open-status.open { color: var(--ok); }
.open-status.soon { color: var(--warn); }
.open-status.closed { color: #9ca3af; }
.place-note { color: var(--ink-3); }

/* 카드 안 정보 줄(응급실·달빛·주의): 같은 모양 */
.er-status, .moonlight-status, .open-warn {
  background: rgba(255, 255, 255, 0.7);
  border-left: 3px solid currentColor;
  border-radius: 6px;
  font-weight: 600;
  padding: 6px 10px;
}
.er-status { color: var(--danger); }
.moonlight-status { color: #5b4bb0; }
.open-warn { color: var(--warn); }

/* 카드 버튼: 전화는 노랑(주), 지도는 흰 바탕 테두리 */
.actions a { display: inline-flex; align-items: center; justify-content: center; gap: 6px; border-radius: 10px; }
.actions .btn-call { background: var(--yellow); color: var(--yellow-ink); }
.actions .btn-map { background: #fff; color: var(--ink); border: 1px solid var(--line); }
.btn-er-call {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  background: var(--danger); border-radius: 10px;
}

/* 목록 위 안내: 한 가지 모양으로 통일 */
.empty-notice, .call119-notice, .convenience-notice, .myeongjeol-banner, .setup-banner, .install-banner {
  background: #fff;
  border: 1px solid var(--line);
  border-left: 3px solid var(--ink-3);
  border-radius: 10px;
  color: var(--ink);
  font-size: 0.88rem;
  font-weight: 400;
  line-height: 1.55;
  padding: 10px 12px;
  margin-bottom: 8px;
  text-align: left;
}
.empty-notice { border-left-color: var(--warn); }
.call119-notice { border-left-color: var(--danger); }
.call119-notice a { color: var(--danger); }
.convenience-notice { border-left-color: var(--ok); }
.myeongjeol-banner { border-left-color: var(--warn); }
.install-banner { border-left-color: var(--blue-600); }
.setup-banner { border-left-color: var(--ok); }
.results-summary .empty-notice b, .results-summary .call119-notice b,
.results-summary .convenience-notice b, .results-summary .myeongjeol-banner b { color: inherit; font-weight: 700; }
.convenience-title { font-size: 0.92rem; }
.convenience-btn { border: 1px solid var(--line); background: #fff; color: var(--ink); }
.results-summary { color: var(--ink-2); }
.results-summary > b { color: var(--ok); }
.closed-divider { border-top: 1px solid var(--line); color: var(--ink-3); font-weight: 600; }
.more-btn { border-radius: 12px; border: 1px solid var(--line); background: #fff; color: var(--ink); }

/* 하단 탭: 선 아이콘, 선택된 탭은 곤색 + 위쪽 줄 */
.bottom-nav { box-shadow: none; border-top: 1px solid var(--line); }
.nav-tab { color: var(--ink-3); position: relative; }
.nav-tab[data-kind="all"] { color: var(--ink-3); }
.nav-tab.active, .nav-tab[data-kind="all"].active { color: var(--navy-900); background: none; }
.nav-tab.active::before {
  content: "";
  position: absolute;
  top: 0; left: 22%; right: 22%;
  height: 3px;
  border-radius: 0 0 3px 3px;
  background: var(--navy-900);
}
.nav-icon { font-size: 1.2rem; stroke-width: 1.7; }
.nav-tab.active .nav-icon { stroke-width: 2.1; }
/* 전화번호가 잘리지 않게: 두 버튼이 한 줄에 다 안 들어가면 지도 버튼이 아랫줄로 내려간다(아주 크게 + 360px 폭에서 "02-554-"로 잘렸음) */
.actions a { min-width: max-content; }

/* 증상별 검색: 다른 화면과 같은 카드·안내 모양, 이모지 대신 글자만(2026-10-20) */
.symptom-intro { background: #fff; border: 1px solid var(--line); border-left: 3px solid var(--blue-600); border-radius: 10px; }
.symptom-grid { gap: 8px; }
.symptom-card {
  background: #eef0f3;
  border: 1px solid var(--line);
  border-radius: 14px;
  box-shadow: none;
  display: flex;
  flex-direction: column;
}
.symptom-card-header { font-size: 1rem; letter-spacing: -0.01em; }
.symptom-list { color: var(--ink-3); flex: 1; }
.symptom-dept-badge { background: none; padding: 0; color: var(--blue-700); font-size: 0.85rem; }
.symptom-search-btn {
  background: #fff;
  color: var(--blue-800);
  border: 1px solid var(--line);
  border-radius: 10px;
  font-size: 0.82rem;
  font-weight: 700;
  padding: 9px 6px;
}
/* 증상별 검색: 응급 신호(병원 검색보다 119·응급실이 먼저) — 10/20 GPT 지적 반영 */
.symptom-urgent {
  background: #fff;
  border: 1px solid rgba(185, 28, 28, 0.3);
  border-left: 3px solid var(--danger);
  border-radius: 10px;
  padding: 10px 12px;
  margin-bottom: 10px;
  font-size: 0.88rem;
  color: var(--ink);
}
.symptom-urgent b { color: var(--danger); }
.symptom-urgent ul { margin: 6px 0 8px; padding-left: 18px; line-height: 1.55; }
.symptom-urgent-actions { display: flex; gap: 8px; }
.symptom-urgent-actions .btn-er-call { flex: 1; margin-top: 0; }
.symptom-er-btn {
  flex: 1;
  border: 1px solid rgba(185, 28, 28, 0.35);
  background: #fff;
  color: var(--danger);
  border-radius: 10px;
  font-weight: 700;
  font-size: 0.85rem;
  cursor: pointer;
}
.symptom-card-urgent {
  font-size: 0.78rem;
  font-weight: 600;
  color: var(--danger);
  border-left: 2px solid var(--danger);
  padding-left: 6px;
  margin-bottom: 8px;
  line-height: 1.4;
}