/* ===== 보훈 위탁병원 찾기 ===== */
/* 모바일 우선 · 고령자 UX: 큰 글씨, 고대비, 큰 터치 영역 */

:root {
  --c-primary: #0b4da2;
  --c-primary-dark: #083a7c;
  --c-bg: #f6f7f9;
  --c-card: #ffffff;
  --c-text: #111417;
  --c-text-sub: #40474f;
  --c-line: #d4d9e0;
  --c-green: #1a7f37;
  --c-blue: #0b4da2;
  --c-purple: #6f42c1;
  --c-orange: #b54a00;
  --c-red: #b02a37;
  --c-call: #1a7f37;
  --fs-base: 18px;
  --fs-name: 23px;
  --fs-tab: 21px;
}

/* 글자 크게 모드 (JS로 body에 부여) */
body.font-lg {
  --fs-base: 21px;
  --fs-name: 26px;
  --fs-tab: 23px;
}

/* ===== 군마트 스킨: 군용 올리브/카키 (서비스 전환 시 테마 전체 변경) ===== */
body[data-svc="mart"] {
  --c-primary: #4d5323;
  --c-primary-dark: #363b18;
  --skin-tint: #eef0dd;      /* 옅은 올리브(호버·활성 배경) */
  --skin-map: #e0e4cf;       /* 지도 기본 채움 */
  --skin-map-hover: #9aa56e; /* 지도 강조 */
  --skin-map-mini: #e6e8da;
}
/* 지도 채움색은 하드코딩이라 스킨별로 덮어씀 (선택색은 --c-primary라 자동) */
body[data-svc="mart"] .map-sido,
body[data-svc="mart"] .sub-sgg { fill: var(--skin-map); }
body[data-svc="mart"] .map-sido:hover,
body[data-svc="mart"] .map-sido:focus,
body[data-svc="mart"] .map-sido.hl,
body[data-svc="mart"] .sub-sgg:hover,
body[data-svc="mart"] .sub-sgg:focus { fill: var(--skin-map-hover); }
body[data-svc="mart"] .map-area.mini .map-sido { fill: var(--skin-map-mini); }
/* 옅은 파랑 활성/호버 배경들을 올리브 톤으로 */
body[data-svc="mart"] .search-box input:focus { outline-color: #b3bd85; }
body[data-svc="mart"] .suggest-list button:hover,
body[data-svc="mart"] .suggest-list button:focus,
body[data-svc="mart"] .sido-btns button:active,
body[data-svc="mart"] .more-btn:active,
body[data-svc="mart"] .sub-tab:not([aria-selected="true"]):active { background: var(--skin-tint); }

* { box-sizing: border-box; }

html, body {
  margin: 0;
  padding: 0;
  background: var(--c-bg);
  color: var(--c-text);
  font-family: -apple-system, BlinkMacSystemFont, "Malgun Gothic", "맑은 고딕",
    "Apple SD Gothic Neo", "Noto Sans KR", sans-serif;
  font-size: var(--fs-base);
  line-height: 1.55;
  -webkit-text-size-adjust: 100%;
  /* 더블탭 확대가 버튼 탭을 삼키지 않도록 (핀치 확대는 그대로 가능) */
  touch-action: manipulation;
}

/* 데스크톱 전용 커스텀 커서: M16 실루엣 (베트남전 참전용사 상징) */
@media (pointer: fine) {
  body {
    cursor: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='32' height='32' viewBox='0 0 32 32'><g fill='%23434a3a'><rect x='1' y='1' width='13' height='3.4' rx='1' transform='rotate(45 2 2)'/><rect x='10.2' y='9.2' width='9' height='5' rx='1.2' transform='rotate(45 10.2 9.2)'/><rect x='9.4' y='13.6' width='3' height='7' rx='1' transform='rotate(45 9.4 13.6)'/><rect x='15.5' y='14.5' width='4.6' height='9.5' rx='1.4' transform='rotate(45 15.5 14.5)'/><rect x='19.5' y='18.5' width='11' height='4.6' rx='1.6' transform='rotate(45 19.5 18.5)'/><circle cx='14.6' cy='11.2' r='2.5'/></g></svg>") 2 2, auto;
  }
  a, button, [role="button"], select, input, .map-sido { cursor: pointer; }
  input[type="search"], input[type="text"] { cursor: text; }
}

button {
  font-family: inherit;
  font-size: inherit;
  color: inherit;
}

a { color: var(--c-primary); }

.wrap {
  max-width: 760px;
  margin: 0 auto;
  padding: 0 12px 40px;
}

/* ===== 헤더 ===== */
header.site-head {
  background: var(--c-primary);
  color: #fff;
  padding: 14px 12px 12px;
}
.site-head .head-inner {
  max-width: 760px;
  margin: 0 auto;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.site-title {
  font-size: 19px;
  font-weight: 800;
  margin: 0;
  letter-spacing: -0.5px;
  line-height: 1.28;
  word-break: keep-all;   /* 한국어 단어 단위 줄바꿈 (좁은 화면에서 자연스럽게) */
}
body.font-lg .site-title { font-size: 21px; }
.site-title a { color:#fff; text-decoration: none; }
.brand-year {
  display: inline-block;
  font-size: 0.72em;
  background: #fff;
  color: var(--c-primary-dark);
  padding: 1px 7px 0;
  border-radius: 8px;
  vertical-align: 2px;
}
@media (min-width: 700px) {
  .site-title { font-size: 24px; }
  body.font-lg .site-title { font-size: 26px; }
}

/* 헤더 우측 컨트롤 (스킨 버튼 + 글자 토글) */
.head-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: 0 0 auto;
}
.skin-btn {
  min-width: 50px;
  min-height: 44px;
  border: 2px solid #ffffff;
  background: transparent;
  border-radius: 10px;
  font-size: 22px;
  line-height: 1;
}
.skin-btn.on {
  background: #fff;
  box-shadow: 0 0 0 3px rgba(120, 130, 80, 0.55);
}

/* 글자 크기 토글 */
.font-toggle {
  display: flex;
  gap: 6px;
}
.font-toggle button {
  min-width: 52px;
  min-height: 44px;
  border: 2px solid #ffffff;
  background: transparent;
  color: #fff;
  border-radius: 10px;
  font-weight: 700;
  font-size: 17px;
}
.font-toggle button[aria-pressed="true"] {
  background: #fff;
  color: var(--c-primary);
}
.font-toggle .btn-big { font-size: 21px; }

/* ===== 서비스 탭 (최상단: 군마트 / 위탁병원) ===== */
nav.service-tabs {
  display: flex;
  background: var(--c-primary);
  padding: 0 12px;
}
nav.service-tabs .tabs-inner {
  max-width: 760px;
  margin: 0 auto;
  width: 100%;
  display: flex;
  gap: 8px;
}
.service-tab {
  flex: 1;
  min-height: 60px;
  font-size: var(--fs-tab);
  font-weight: 800;
  border: none;
  border-radius: 14px 14px 0 0;
  background: var(--c-primary-dark);
  color: #dbe6f5;
}
.service-tab[aria-selected="true"] {
  background: var(--c-bg);
  color: var(--c-primary-dark);
}

/* ===== 하위 탭 (찾기 / 이용 안내) ===== */
nav.sub-tabs { display: flex; margin: 14px 0 4px; }
nav.sub-tabs .tabs-inner {
  width: 100%;
  display: flex;
  gap: 8px;
}
.sub-tab {
  flex: 1;
  min-height: 52px;
  font-size: 19px;
  font-weight: 700;
  border: 2px solid var(--c-primary);
  border-radius: 12px;
  background: #fff;
  color: var(--c-primary-dark);
}
.sub-tab[aria-selected="true"] {
  background: var(--c-primary);
  color: #fff;
}
body.font-lg .sub-tab { font-size: 21px; }

/* ===== 오늘 날짜 ===== */
.today-line {
  text-align: center;
  font-size: 17px;
  font-weight: 600;
  color: var(--c-text-sub);
  margin: 12px 0 0;
}
body.font-lg .today-line { font-size: 19px; }

/* ===== 모바일 접속 안내 배너 ===== */
.domain-notice {
  background: #fff8e6;
  border: 2px solid #e8c96a;
  border-radius: 14px;
  padding: 14px 16px;
  margin: 12px 0 4px;
}
.domain-notice p { margin: 0 0 6px; font-size: calc(var(--fs-base) - 1px); line-height: 1.55; }
.domain-notice .notice-title { font-weight: 800; font-size: var(--fs-base); color: #7a5310; }
.domain-notice .notice-addr { color: var(--c-primary-dark); word-break: break-all; }
.domain-notice .notice-tip {
  font-size: calc(var(--fs-base) - 2px);
  color: #7a5310;
  background: rgba(255, 255, 255, 0.55);
  border-radius: 10px;
  padding: 8px 10px;
  margin-top: 8px;
}
.notice-actions { display: flex; gap: 8px; margin-top: 10px; }
.notice-actions button {
  flex: 1;
  min-height: 50px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 12px;
  border: 2px solid #e8c96a;
  background: #fff;
  color: #5d4300;
}
#notice-close { border-color: var(--c-line); color: var(--c-text-sub); flex: 0 0 auto; padding: 0 18px; }

/* ===== 안내 문구 ===== */
.intro-line {
  text-align: center;
  font-size: var(--fs-base);
  font-weight: 600;
  color: var(--c-text);
  background: #fff8e6;
  border: 1px solid #f0dfae;
  border-radius: 12px;
  padding: 10px 14px;
  margin: 8px 0 10px;
}

/* ===== 검색 ===== */
.search-box { position: relative; margin: 0 0 10px; }
.search-box input {
  width: 100%;
  min-height: 58px;
  font-size: 20px;
  padding: 8px 52px 8px 16px;
  border: 2px solid var(--c-primary);
  border-radius: 14px;
  background: #fff;
}
body.font-lg .search-box input { font-size: 22px; }
.search-box input:focus { outline: 3px solid #9dbdea; }
.search-box .search-icon {
  position: absolute;
  right: 16px;
  top: 50%;
  transform: translateY(-50%);
  font-size: 24px;
  pointer-events: none;
}
.suggest-list {
  position: absolute;
  z-index: 30;
  left: 0; right: 0;
  top: calc(100% + 4px);
  background: #fff;
  border: 2px solid var(--c-primary);
  border-radius: 12px;
  overflow: hidden;
  box-shadow: 0 6px 18px rgba(0,0,0,.18);
}
.suggest-list button {
  display: block;
  width: 100%;
  text-align: left;
  padding: 13px 16px;
  min-height: 50px;
  border: none;
  border-bottom: 1px solid var(--c-line);
  background: #fff;
  font-size: 19px;
}
.suggest-list button:last-child { border-bottom: none; }
.suggest-list button:hover, .suggest-list button:focus { background: #e8f0fc; }
.suggest-list .sug-type {
  font-size: 15px;
  color: var(--c-text-sub);
  margin-left: 8px;
}

/* ===== 내 주변 병원 버튼 ===== */
.near-btn {
  width: 100%;
  min-height: 56px;
  font-size: 20px;
  font-weight: 700;
  color: #fff;
  background: var(--c-green);
  border: none;
  border-radius: 14px;
  margin-top: 12px;
}
.near-btn:active { background: #14602a; }

/* ===== 지도 ===== */
.map-area {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 8px;
  transition: max-height .35s ease;
  overflow: hidden;
}
.map-area svg {
  display: block;
  width: 100%;
  height: auto;
}
.map-sido {
  fill: #cfe0f5;
  stroke: #fff;
  stroke-width: 1.5;
  transition: fill .15s;
}
.map-sido:hover, .map-sido:focus, .map-sido.hl {
  fill: #6ea3e6;
  outline: none;
}
.map-sido.selected { fill: var(--c-primary); }
.map-label {
  cursor: pointer;
  font-weight: 800;
  fill: #14243c;
}
.map-label .cnt { font-weight: 600; fill: #33445e; }

/* 축소 상태(목록 표시 중) */
.map-area.mini { padding: 4px; }
.map-area.mini svg { max-height: 210px; }
.map-area.mini .map-sido { fill: #e3eaf3; }
.map-area.mini .map-sido.selected { fill: var(--c-primary); }
.map-area.mini .map-label { display: none; }

/* ===== 시·군·구 지도 (시·도 선택 후) ===== */
.map-area.submap { padding: 6px; }
.map-area.submap svg {
  display: block;
  width: 100%;
  height: auto;
  max-height: 340px;
  margin: 0 auto;
}
.sub-sgg {
  fill: #cfe0f5;
  stroke: #fff;
  stroke-width: 1.5;
  transition: fill .15s;
}
.sub-sgg:hover, .sub-sgg:focus { fill: #6ea3e6; outline: none; }
.sub-sgg.selected { fill: var(--c-primary); }
.sub-sgg.empty { fill: #e8eaee; }
.sub-label {
  cursor: pointer;
  font-weight: 700;
  fill: #14243c;
}
.sub-label.empty { fill: #8a919a; pointer-events: none; }

/* ===== 시·도 큰 버튼 목록 ===== */
.sido-btns {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 8px;
  margin-top: 12px;
}
.sido-btns button {
  min-height: 58px;
  font-size: 19px;
  font-weight: 700;
  background: #fff;
  border: 2px solid var(--c-primary);
  color: var(--c-primary-dark);
  border-radius: 12px;
  line-height: 1.25;
}
.sido-btns button small {
  display: block;
  font-size: 15px;
  font-weight: 600;
  color: var(--c-text-sub);
}
.sido-btns button:active { background: #e8f0fc; }

/* ===== 목록 화면 ===== */
.list-head {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin: 14px 0 10px;
}
.back-btn {
  min-height: 52px;
  padding: 0 18px;
  font-size: 19px;
  font-weight: 700;
  background: #fff;
  color: var(--c-primary-dark);
  border: 2px solid var(--c-primary);
  border-radius: 12px;
}
.list-title {
  font-size: 21px;
  font-weight: 800;
  margin: 0;
}
body.font-lg .list-title { font-size: 23px; }

/* 종별 탭 */
.kind-tabs {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 4px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.kind-tabs button {
  flex: 0 0 auto;
  min-height: 54px;
  padding: 0 18px;
  font-size: 19px;
  font-weight: 700;
  border: 2px solid var(--c-primary);
  background: #fff;
  color: var(--c-primary-dark);
  border-radius: 27px;
  white-space: nowrap;
}
.kind-tabs button[aria-selected="true"] {
  background: var(--c-primary);
  color: #fff;
}

/* 시·군·구 / 진료과목 필터 칩 */
.chip-row {
  display: flex;
  gap: 8px;
  overflow-x: auto;
  padding: 2px 0 8px;
  -webkit-overflow-scrolling: touch;
}
.chip-row-label {
  font-size: 16px;
  font-weight: 700;
  color: var(--c-text-sub);
  margin: 4px 0 2px;
}
.chip-row button {
  flex: 0 0 auto;
  min-height: 46px;
  padding: 0 16px;
  font-size: 17px;
  font-weight: 600;
  border: 1.5px solid var(--c-line);
  background: #fff;
  color: var(--c-text);
  border-radius: 23px;
  white-space: nowrap;
}
.chip-row button[aria-pressed="true"] {
  background: var(--c-text);
  border-color: var(--c-text);
  color: #fff;
}

/* ===== 병원 카드 ===== */
.cards { display: flex; flex-direction: column; gap: 14px; margin-top: 6px; }
.card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 16px;
}
.card h3 {
  margin: 0 0 6px;
  font-size: var(--fs-name);
  line-height: 1.3;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}
.badge {
  display: inline-block;
  font-size: 15px;
  font-weight: 800;
  padding: 4px 10px;
  border-radius: 8px;
  color: #fff;
  white-space: nowrap;
}
.badge.b-의원 { background: var(--c-green); }
.badge.b-병원 { background: var(--c-blue); }
.badge.b-종합병원 { background: var(--c-purple); }
.badge.b-요양병원 { background: var(--c-orange); }
.badge.b-상급종합 { background: var(--c-red); }
/* 군마트 영업 상태 뱃지 */
.badge.st-open { background: var(--c-green); }
.badge.st-lunch { background: var(--c-orange); }
.badge.st-closed { background: #6b7280; }
.badge.st-off { background: var(--c-red); }
.badge.st-unknown { background: #b8873b; }
/* 군마트 카드 요소 */
.card .mart-hours {
  margin: 4px 0;
  font-size: calc(var(--fs-base) + 1px);
  font-weight: 700;
  color: var(--c-text);
}
.card .mart-note {
  margin: 4px 0;
  font-size: calc(var(--fs-base) - 1px);
  color: var(--c-text-sub);
  overflow-wrap: anywhere;
}
.card .mart-note.warn {
  background: #fff8e6;
  border: 1px solid #f0dfae;
  border-radius: 10px;
  padding: 8px 10px;
  color: #7a5310;
  font-weight: 600;
}
.card .mart-tip {
  margin: 4px 0 0;
  font-size: calc(var(--fs-base) - 2px);
  color: var(--c-red);
  font-weight: 700;
}
.card .dist {
  font-size: 17px;
  font-weight: 800;
  color: var(--c-green);
}
.card .depts, .card .addr {
  margin: 4px 0;
  color: var(--c-text-sub);
  font-size: calc(var(--fs-base) - 1px);
  overflow-wrap: anywhere;
}
.card .addr { color: var(--c-text); }
.card .homepage { font-size: calc(var(--fs-base) - 1px); word-break: break-all; }

.card-actions {
  display: grid;
  grid-template-columns: 1fr;
  gap: 8px;
  margin-top: 12px;
}
.btn-call {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 60px;
  font-size: 22px;
  font-weight: 800;
  color: #fff !important;
  background: var(--c-call);
  border-radius: 14px;
  text-decoration: none;
}
.btn-call:active { background: #14602a; }
.sub-actions {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 8px;
}
.sub-actions a, .sub-actions button {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 52px;
  font-size: 17px;
  font-weight: 700;
  border-radius: 12px;
  text-decoration: none;
  border: 2px solid var(--c-line);
  background: #fff;
  color: var(--c-text);
  white-space: nowrap;
}
.sub-actions .btn-kakao-map { border-color: #f7c600; background: #fee500; color: #191600; }
.sub-actions .btn-naver { border-color: #03c75a; color: #026b32; }
.sub-actions .btn-share { border-color: #b8873b; color: #7a5310; }
/* 더 보기 */
.more-btn {
  width: 100%;
  min-height: 58px;
  margin-top: 14px;
  font-size: 20px;
  font-weight: 800;
  border: 2px solid var(--c-primary);
  background: #fff;
  color: var(--c-primary-dark);
  border-radius: 14px;
}
.more-btn:active { background: #e8f0fc; }
.empty-msg {
  text-align: center;
  padding: 30px 10px;
  color: var(--c-text-sub);
  font-size: 19px;
}

/* ===== 이용 안내 탭 ===== */
.guide-card {
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
  padding: 18px;
  margin: 14px 0;
}
.guide-card h2 {
  margin: 0 0 10px;
  font-size: 22px;
  color: var(--c-primary-dark);
}
body.font-lg .guide-card h2 { font-size: 24px; }
.guide-card p, .guide-card li { font-size: var(--fs-base); }
.guide-card ul { padding-left: 22px; margin: 8px 0; }
.guide-card .stress { font-weight: 800; color: var(--c-red); }
.guide-steps { list-style: none; padding: 0; margin: 0; counter-reset: st; }
.guide-steps li {
  counter-increment: st;
  display: flex;
  gap: 12px;
  align-items: flex-start;
  padding: 10px 0;
  border-bottom: 1px dashed var(--c-line);
}
.guide-steps li:last-child { border-bottom: none; }
.guide-steps li::before {
  content: counter(st);
  flex: 0 0 auto;
  width: 38px; height: 38px;
  border-radius: 50%;
  background: var(--c-primary);
  color: #fff;
  font-weight: 800;
  font-size: 20px;
  display: flex; align-items: center; justify-content: center;
}
.juris-phones { display: grid; grid-template-columns: 1fr; gap: 10px; }
.juris-phones a {
  display: flex;
  justify-content: space-between;
  align-items: center;
  min-height: 58px;
  padding: 0 18px;
  font-size: 19px;
  font-weight: 700;
  background: var(--c-green);
  color: #fff;
  border-radius: 14px;
  text-decoration: none;
}
.juris-phones a .num { font-size: 21px; }

.guide-card.note-card { background: #f6f7f9; }
.guide-card.note-card p { font-size: 16px; color: var(--c-text-sub); margin: 0; }

/* 자주 묻는 질문 */
.faq-list { margin: 0; }
.faq-list dt {
  font-size: var(--fs-base);
  font-weight: 800;
  color: var(--c-primary-dark);
  padding: 14px 0 6px;
  border-top: 1px solid var(--c-line);
}
.faq-list dt:first-child { border-top: none; padding-top: 4px; }
.faq-list dt::before {
  content: "Q. ";
  color: var(--c-green);
  font-weight: 800;
}
.faq-list dd {
  margin: 0 0 8px;
  font-size: var(--fs-base);
  color: var(--c-text-sub);
  line-height: 1.6;
}

/* 광고 슬롯 (이용 안내 하단 전용) — 광고가 실제 채워졌을 때만 노출 */
/* ===== 푸터 ===== */
footer.site-foot {
  margin-top: 30px;
  padding: 20px 12px 34px;
  border-top: 1px solid var(--c-line);
  text-align: center;
  color: var(--c-text-sub);
  font-size: 15px;
}
.visit-counter { font-size: 15px; margin-top: 6px; }
.visit-counter[hidden] { display: none; }
.region-links { margin: 10px 0 4px; line-height: 2; }
.region-links strong { color: var(--c-text); font-size: 15px; }
.region-links a { margin: 0 5px; font-size: 15px; color: var(--c-text-sub); }
.region-links.seo-pages { margin-top: 2px; font-size: 12px; color: #9aa1a9; line-height: 1.8; }
.region-links.seo-pages a { font-size: 12px; color: #9aa1a9; margin: 0 3px; }

/* ===== 데스크톱 확장 ===== */
@media (min-width: 700px) {
  .sido-btns { grid-template-columns: repeat(6, 1fr); }
  .card-actions { grid-template-columns: 220px 1fr; align-items: stretch; }
  .btn-call { min-height: 56px; }
  .juris-phones { grid-template-columns: 1fr 1fr; }
  .cards { gap: 16px; }
}

/* 접근성: 화면낭독기 전용 텍스트 */
.sr-only {
  position: absolute;
  width: 1px; height: 1px;
  margin: -1px; padding: 0;
  overflow: hidden;
  clip: rect(0 0 0 0);
  border: 0;
}

[hidden] { display: none !important; }

/* ============================================================
   글라스모피즘 레이어 (고령자 가독성 유지: 텍스트 면은 충분히
   불투명하게, 전화·내주변 등 핵심 CTA는 solid 유지)
   ============================================================ */
:root {
  --glass: rgba(255, 255, 255, 0.58);
  --glass-2: rgba(255, 255, 255, 0.80);
  --glass-border: rgba(255, 255, 255, 0.65);
  --glass-blur: saturate(150%) blur(14px);
  --glass-shadow: 0 8px 28px rgba(20, 32, 64, 0.12);
}

/* 배경: 테마색 그라데이션 메시(블러가 비칠 바탕). 스킨색(--c-primary) 반영 */
body {
  background-color: #eaeef5;
  background-image:
    radial-gradient(60vw 55vw at 8% 0%, color-mix(in srgb, var(--c-primary) 26%, transparent), transparent 70%),
    radial-gradient(55vw 55vw at 96% 8%, color-mix(in srgb, var(--c-primary) 18%, transparent), transparent 70%),
    radial-gradient(75vw 55vw at 50% 106%, color-mix(in srgb, var(--c-primary) 20%, transparent), transparent 70%);
  background-attachment: fixed;
  background-repeat: no-repeat;
}
body[data-svc="mart"] { background-color: #edeee2; }

/* 상단 헤더·서비스 탭 바: 반투명 + 블러 */
header.site-head,
nav.service-tabs {
  background: color-mix(in srgb, var(--c-primary) 80%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.service-tab { background: transparent; color: rgba(255, 255, 255, 0.78); }
.service-tab[aria-selected="true"] {
  background: var(--glass-2);
  color: var(--c-primary-dark);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 하위 탭 */
.sub-tab {
  background: var(--glass);
  border-color: var(--glass-border);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.sub-tab[aria-selected="true"] {
  background: color-mix(in srgb, var(--c-primary) 88%, transparent);
  color: #fff;
}

/* 검색창 */
.search-box input {
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.suggest-list {
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.suggest-list button { background: transparent; }

/* 지도 패널 */
.map-area {
  background: var(--glass);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 시·도 버튼 · 종별/영업상태 탭 · 칩 · 뒤로/더보기 */
.sido-btns button,
.kind-tabs button,
.back-btn,
.more-btn {
  background: var(--glass-2);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.kind-tabs button[aria-selected="true"] {
  background: color-mix(in srgb, var(--c-primary) 90%, transparent);
  color: #fff;
}
.chip-row button {
  background: var(--glass);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}
.chip-row button[aria-pressed="true"] {
  background: color-mix(in srgb, var(--c-text) 88%, transparent);
  color: #fff;
}

/* 카드 · 안내 카드: 가독성 위해 더 불투명(0.80) */
.card,
.guide-card {
  background: var(--glass-2);
  border-color: var(--glass-border);
  box-shadow: var(--glass-shadow);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 보조 액션 버튼(길찾기·네이버·공유): 반투명 */
.sub-actions a,
.sub-actions button {
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* 안내 문구·광고 자리도 유리 톤 */
.intro-line {
  background: color-mix(in srgb, #fff4d6 70%, transparent);
  -webkit-backdrop-filter: var(--glass-blur);
  backdrop-filter: var(--glass-blur);
}

/* backdrop-filter 미지원 브라우저: 반투명이 과하지 않도록 더 불투명 처리 */
@supports not ((-webkit-backdrop-filter: blur(1px)) or (backdrop-filter: blur(1px))) {
  .card, .guide-card, .search-box input, .suggest-list,
  .sido-btns button, .kind-tabs button, .back-btn, .more-btn,
  .service-tab[aria-selected="true"] { background: #ffffff; }
  .map-area { background: rgba(255, 255, 255, 0.92); }
}

/* ============================================================
   🪖 카모플라쥬(위장) 스킨 — 헤더 🪖 버튼으로 켜고 끔(저장 유지)
   서비스색(병원 파랑/마트 올리브)을 덮고 전체를 군용 위장색으로.
   맨 끝에 두어 서비스 스킨보다 우선. 카드는 불투명 유지(가독성).
   ============================================================ */
body.skin-camo {
  --c-primary: #4d5a2e;        /* 올리브 드랩 */
  --c-primary-dark: #333d1c;   /* 진한 올리브 */
  --skin-tint: #e3e0c8;
  background-color: #cbc7aa;   /* 카키/탄 바탕 */
  background-image:
    radial-gradient(38vw 30vw at 10% 4%, rgba(77, 90, 46, 0.55), transparent 70%),
    radial-gradient(34vw 30vw at 92% 10%, rgba(92, 74, 42, 0.45), transparent 70%),
    radial-gradient(30vw 26vw at 78% 66%, rgba(125, 124, 78, 0.45), transparent 70%),
    radial-gradient(40vw 30vw at 30% 96%, rgba(51, 61, 28, 0.45), transparent 72%);
}
/* 헤더·서비스 탭: 위장 무늬(얼룩) 텍스처 */
body.skin-camo header.site-head,
body.skin-camo nav.service-tabs {
  background-color: #3f4a24;
  background-image:
    radial-gradient(46px 32px at 12% 30%, #5c6a33 0 60%, transparent 62%),
    radial-gradient(54px 34px at 34% 74%, #333d1c 0 60%, transparent 62%),
    radial-gradient(40px 30px at 58% 24%, #7d7c4e 0 58%, transparent 60%),
    radial-gradient(52px 34px at 82% 62%, #5c4a2a 0 58%, transparent 60%),
    radial-gradient(38px 26px at 96% 22%, #4d5a2e 0 58%, transparent 60%);
  -webkit-backdrop-filter: none;
  backdrop-filter: none;
}
/* 지도 채움색(하드코딩분 덮어씀) */
body.skin-camo .map-sido,
body.skin-camo .sub-sgg { fill: #c3bf9a; }
body.skin-camo .map-sido:hover,
body.skin-camo .map-sido:focus,
body.skin-camo .map-sido.hl,
body.skin-camo .sub-sgg:hover,
body.skin-camo .sub-sgg:focus { fill: #8a935a; }
body.skin-camo .map-area.mini .map-sido { fill: #cfccac; }
body.skin-camo .sub-sgg.empty { fill: #ddd9bf; }
body.skin-camo .map-label,
body.skin-camo .sub-label { fill: #2f3717; }
body.skin-camo .map-label .cnt { fill: #4a532a; }
/* 옅은 파랑 활성/호버 배경 → 카키 톤 */
body.skin-camo .search-box input:focus { outline-color: #9aa06a; }
body.skin-camo .suggest-list button:hover,
body.skin-camo .suggest-list button:focus,
body.skin-camo .sido-btns button:active,
body.skin-camo .more-btn:active,
body.skin-camo .back-btn:active,
body.skin-camo .sub-tab:not([aria-selected="true"]):active { background: var(--skin-tint); }
/* 브랜드 연도 뱃지 */
body.skin-camo .brand-year { color: #333d1c; }


/* ===== 홈 하단 소개(SEO 겸용, 크롤링 가능한 본문) ===== */
.seo-intro {
  margin: 22px 0 6px;
  padding: 16px 18px;
  background: var(--c-card);
  border: 1px solid var(--c-line);
  border-radius: 16px;
}
.seo-intro h2 { margin: 0 0 8px; font-size: 19px; color: var(--c-primary-dark); }
.seo-intro p { margin: 6px 0; font-size: calc(var(--fs-base) - 2px); color: var(--c-text-sub); line-height: 1.6; }

/* 모바일: 고정 배경은 스크롤 성능(CWV)을 떨어뜨려 해제 */
@media (max-width: 700px) {
  body { background-attachment: scroll; }
}

/* 홈의 혜택 안내 블록 — 목록 사이트에 글 콘텐츠로 들어가는 입구 */
.home-guide-list { list-style: none; padding: 0; margin: 12px 0; }
.home-guide-list li { background: #fff; border: 1px solid var(--c-line); border-radius: 12px;
  padding: 14px 16px; margin-bottom: 10px; line-height: 1.6; color: var(--c-text-sub); }
.home-guide-list li a { font-size: 18px; color: var(--c-primary-dark); text-decoration: none; }
.home-guide-list li a:hover, .home-guide-list li a:focus { text-decoration: underline; }