/* 북광주동물약국: 조제실 라벨과 처방 기록지를 옮긴 구조.
   짙은 청록을 기본으로, 바탕은 살짝 따뜻한 흰색. 모바일 우선. */
:root {
  color-scheme: light;
  --ink: #142a2e;
  --muted: #4c5f63;
  --pine: #0c3b42;
  --pine-deep: #082c32;
  --teal: #0a6467;
  --teal-soft: #e2efed;
  --paper: #fdfcf9;
  --mist: #f3f1ec;
  --rule: #d5dad6;
  --on-pine: #f6f4ee;
  --on-pine-muted: #bcd0cd;
  --open: #146b43;
  --closed: #9b3a26;
  --stock-bg: #e0f0e6; --stock-fg: #11592f;
  --order-bg: #fbedd2; --order-fg: #6e4600;
  --rx-bg: #f8e1dc; --rx-fg: #8a2b1b;
  --vet-bg: #e6e3f4; --vet-fg: #3f3577;
  --display: "Noto Serif KR", "Nanum Myeongjo", serif;
  --body: "IBM Plex Sans KR", "Apple SD Gothic Neo", "Malgun Gothic", sans-serif;
  --mono: "IBM Plex Mono", Consolas, monospace;
  --wrap: 1120px;
}
*, *::before, *::after { box-sizing: border-box; }
html { scroll-behavior: smooth; scroll-padding-top: 120px; -webkit-text-size-adjust: 100%; }
body {
  margin: 0;
  background: var(--paper);
  color: var(--ink);
  font-family: var(--body);
  font-size: 17px;
  line-height: 1.7;
  word-break: keep-all;
  overflow-wrap: break-word;
  padding-bottom: 200px; /* 떠 있는 문의 버튼 3개가 바닥글을 가리지 않게 */
}
a { color: inherit; }
img { max-width: 100%; height: auto; }
:focus-visible { outline: 3px solid var(--teal); outline-offset: 3px; }
h1, h2, h3, h4, p, ul, ol, dl, dd, figure { margin: 0; padding: 0; }
ul, ol { list-style: none; }
h1, h2 { font-family: var(--display); font-weight: 700; text-wrap: balance; letter-spacing: -0.01em; }
h1 { font-size: clamp(32px, 5vw, 52px); line-height: 1.25; }
h2 { font-size: clamp(24px, 3vw, 34px); line-height: 1.35; }
h3 { font-size: 18px; line-height: 1.45; font-weight: 600; }
.mono { font-family: var(--mono); font-weight: 600; }
.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; }
.skip { position: absolute; left: 16px; top: -60px; z-index: 50; background: var(--pine); color: var(--on-pine); padding: 10px 16px; border-radius: 4px; }
.skip:focus { top: 8px; }

.inner {
  width: 100%;
  max-width: calc(var(--wrap) + 64px);
  margin-inline: auto;
  padding-left: max(16px, env(safe-area-inset-left, 0px));
  padding-right: max(16px, env(safe-area-inset-right, 0px));
}
@media (min-width: 720px) {
  .inner { padding-left: max(32px, env(safe-area-inset-left, 0px)); padding-right: max(32px, env(safe-area-inset-right, 0px)); }
}
.narrow { max-width: calc(760px + 64px); }
.band > .inner { padding-block: clamp(48px, 7vw, 88px); }
.band-tight > .inner { padding-block: clamp(28px, 4vw, 48px); }
.tint { background: var(--mist); }
.eyebrow { font-size: 15px; font-weight: 600; color: var(--teal); letter-spacing: 0.04em; }
.section-head { display: grid; gap: 8px; max-width: 680px; margin-bottom: clamp(24px, 3.5vw, 40px); }
.lead { color: var(--muted); }
.small { font-size: 14px; color: var(--muted); margin-top: 12px; }
/* 약국 한눈에 보기 (메인 첫 화면 아래) */
.facts { background: var(--mist); border-bottom: 1px solid var(--rule); }
.facts-inner { display: grid; gap: 20px 56px; padding-block: clamp(28px, 4vw, 44px); }
.facts-text { display: grid; gap: 10px; align-content: start; }
.facts-text h2 { font-size: clamp(22px, 2.6vw, 28px); margin-bottom: 4px; }
.facts-text p { color: var(--muted); }
.facts-list > div { grid-template-columns: 100px minmax(0, 1fr); }
.facts-list dt { white-space: nowrap; }
.nowrap { white-space: nowrap; }
.facts-list dd { overflow-wrap: anywhere; }
.facts-list a { color: var(--teal); }
.facts-text .facts-date { font-size: 14px; }
.facts-line { display: block; text-wrap: balance; }
@media (min-width: 860px) { .facts-two { grid-template-columns: 1fr 1fr; } }
.text-link { display: inline-flex; align-items: center; min-height: 44px; margin-top: 12px; color: var(--teal); font-weight: 600; }

/* 상단 띠 */
.topbar { background: var(--pine-deep); color: var(--on-pine); font-size: 14px; }
.topbar-inner { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 18px; min-height: 40px; }
.topbar-addr { color: var(--on-pine-muted); }
.topbar-actions { display: flex; gap: 16px; margin-left: auto; }
.topbar-actions a { display: inline-flex; align-items: center; min-height: 40px; text-decoration: none; color: var(--on-pine); }
.status { display: inline-flex; align-items: center; gap: 8px; font-weight: 600; }
.dot { width: 9px; height: 9px; border-radius: 50%; background: currentColor; flex: none; }
.topbar .status.is-open { color: #ffd21f; }
.topbar .status.is-closed { color: #f3b7a8; }

/* 머리글 */
.site-header { position: sticky; top: 0; z-index: 20; background: var(--paper); border-bottom: 1px solid var(--rule); }
.header-inner { display: flex; align-items: center; justify-content: space-between; gap: 20px; min-height: 64px; position: relative; }
.brand { display: flex; align-items: center; gap: 10px; min-height: 44px; text-decoration: none; font-weight: 700; font-size: 18px; white-space: nowrap; }
.site-nav { display: none; }
.site-nav ul { display: flex; gap: 6px; }
.site-nav a { display: inline-flex; align-items: center; min-height: 44px; padding-inline: 12px; text-decoration: none; font-size: 15px; font-weight: 500; color: var(--muted); border-radius: 4px; }
.site-nav a:hover { color: var(--teal); }
.site-nav a[aria-current="page"] { color: var(--pine); background: var(--teal-soft); font-weight: 600; }
.menu summary {
  display: flex; align-items: center; min-height: 44px; padding-inline: 16px;
  border: 1px solid var(--rule); border-radius: 4px; font-size: 15px; font-weight: 600; cursor: pointer; list-style: none;
}
.menu summary::-webkit-details-marker { display: none; }
.menu[open] summary { background: var(--pine); border-color: var(--pine); color: var(--on-pine); }
.menu-panel {
  position: absolute; top: 100%; left: 0; right: 0;
  max-height: calc(100vh - 120px); overflow-y: auto;
  background: var(--paper); border-top: 1px solid var(--rule); border-bottom: 2px solid var(--ink);
  padding-left: max(16px, env(safe-area-inset-left, 0px)); padding-right: max(16px, env(safe-area-inset-right, 0px));
}
.menu-panel a { display: flex; align-items: center; min-height: 52px; border-bottom: 1px solid var(--rule); font-weight: 500; text-decoration: none; }
.menu-panel li:last-child a { border-bottom: 0; }
.menu-panel a[aria-current="page"] { color: var(--teal); font-weight: 700; }
@media (min-width: 960px) { .site-nav { display: block; } .menu { display: none; } }

/* 경로 표시 */
.crumbs-wrap { padding-top: 16px; }
.crumbs ol { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; font-size: 14px; line-height: 1.4; color: var(--muted); }
.crumbs li { display: inline-flex; align-items: center; min-height: 32px; }
.crumbs li + li::before { content: "›"; margin-right: 4px; }
.crumbs a { display: inline-flex; align-items: center; }

/* 버튼 */
.btn {
  display: inline-flex; align-items: center; justify-content: center; min-height: 48px; padding: 10px 20px;
  border-radius: 4px; font: inherit; font-weight: 600; text-decoration: none; border: 1px solid transparent; cursor: pointer;
}
.btn-primary { background: var(--on-pine); color: var(--pine-deep); }
.btn-solid { background: var(--pine); color: var(--on-pine); }
.btn-solid:hover { background: var(--pine-deep); }
.btn-line { border-color: var(--pine); color: var(--pine); background: transparent; }
.btn-line:hover { background: var(--mist); }

/* 첫 화면 */
.hero {
  position: relative; overflow: hidden; isolation: isolate;
  background: var(--pine-deep); color: var(--on-pine);
}
.hero-inner { position: relative; z-index: 1; display: grid; gap: 36px; padding-block: clamp(56px, 8vw, 112px); }
.hero-copy { display: grid; gap: 18px; align-content: center; min-width: 0; }
.hero-kicker { font-size: 15px; font-weight: 600; color: var(--on-pine-muted); }
.hero-sub { font-size: clamp(18px, 2.2vw, 21px); font-weight: 600; }
/* 부제는 '·' 기준으로 문장마다 줄을 나눠, 폭에 따라 한 단어만 다음 줄로 내려가지 않게 한다 */
.hero-sub-line { display: block; text-wrap: balance; }
.hero-lead { color: var(--on-pine-muted); max-width: 34em; }
.search { display: flex; gap: 8px; margin-top: 6px; }
.search input {
  flex: 1 1 auto; min-width: 0; min-height: 52px; padding: 10px 14px; font: inherit; font-size: 16px;
  border: 0; border-radius: 4px; background: #ffffff; color: var(--ink);
}
.chips { display: flex; flex-wrap: wrap; gap: 8px; }
.chips a {
  display: inline-flex; align-items: center; min-height: 40px; padding-inline: 14px; border-radius: 999px;
  border: 1px solid var(--on-pine-muted); color: var(--on-pine); text-decoration: none; font-size: 15px;
}
.chips a:hover { background: rgba(255, 255, 255, .1); border-color: var(--on-pine); }
.rx-label {
  background: var(--paper); color: var(--ink); border-radius: 4px; padding: 22px; align-self: center; min-width: 0;
  box-shadow: 0 18px 40px rgba(4, 24, 28, 0.35);
}
.rx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 12px; padding-bottom: 12px; border-bottom: 2px solid var(--ink); }
.rx-title { font-weight: 700; font-size: 18px; }
.rx-rows > div { display: grid; grid-template-columns: 56px minmax(0, 1fr); gap: 12px; padding-block: 10px; border-bottom: 1px solid var(--rule); font-size: 15px; }
.rx-rows dt { color: var(--muted); }
.rx-rows dd { font-weight: 500; font-variant-numeric: tabular-nums; min-width: 0; }
.rx-rows a { text-decoration: none; }
.rx-status { padding-top: 14px; font-size: 15px; }
.rx-status.is-open, .status.is-open { color: var(--open); }
.rx-status.is-closed, .status.is-closed { color: var(--closed); }
/* 영업 상태 카드: 상태는 색 알약, 시간은 굵은 글씨 (2026-11-13 가독성 개선) */
.rx-status { gap: 10px; padding-top: 16px; font-size: 17px; font-weight: 700; color: var(--ink); }
.rx-status .status-pill { display: inline-block; padding: 3px 12px; border-radius: 999px; color: #fff; font-size: 15px; font-weight: 700; line-height: 1.5; white-space: nowrap; background: var(--open); }
.rx-status.is-closed .status-pill { background: var(--closed); }
.rx-status.is-open, .rx-status.is-closed { color: var(--ink); }
@media (min-width: 900px) { .hero-inner { grid-template-columns: minmax(0, 1.45fr) minmax(300px, 1fr); gap: 56px; } }

/* 알림 */
.events { background: var(--order-bg); color: var(--order-fg); }
.events .inner { padding-block: 12px; display: grid; gap: 6px; }
.event-date { font-family: var(--mono); font-size: 14px; }

/* 소개 요약 */
.intro { display: grid; gap: 28px; align-items: start; }
.intro-body { display: grid; gap: 14px; min-width: 0; max-width: 40em; }
.intro-sign { font-weight: 600; color: var(--teal); }
@media (min-width: 760px) { .intro { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; } .intro-no-photo { grid-template-columns: minmax(0, 1fr); } }

/* 사진 자리 */
.photo-slot {
  aspect-ratio: 4 / 3; width: 100%; max-width: 100%; display: grid; place-items: center; text-align: center;
  background: var(--mist); border: 1px dashed var(--rule); color: var(--muted); font-size: 15px; padding: 16px; border-radius: 4px;
}
.intro .photo-slot, .pharmacist .photo-slot { aspect-ratio: 4 / 5; max-width: 240px; }
.photo { width: 100%; border-radius: 4px; object-fit: cover; }
.photo-grid { display: grid; gap: 16px; }
@media (min-width: 640px) { .photo-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } .photo-grid-3 { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
/* 세로 사진과 빈 칸이 한 줄에 있어도 위쪽을 맞추고, 사진은 칸 너비에 맞춘다 */
.photo-grid { align-items: start; }
.photo-grid > * { min-width: 0; }

/* 오는 길 사진: 휴대폰은 세로로 쌓고, 컴퓨터는 한 줄에 높이를 맞춘다(사진 2가 먼저) */
.route-photos { display: grid; gap: 16px; }
.route-photos .photo { display: block; height: auto; }
@media (min-width: 640px) {
  .route-photos { display: flex; gap: 16px; align-items: flex-start; }
  .route-item { flex: var(--ar) 1 0; min-width: 0; }
  .route-item-2 { order: -1; }
}

/* 증상·분류 */
.symptoms, .cat-grid { display: grid; gap: 10px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 220px), 1fr)); }
.symptoms a, .cat-grid a {
  display: grid; gap: 4px; min-height: 64px; padding: 16px 18px; background: var(--paper); border: 1px solid var(--rule);
  border-radius: 4px; text-decoration: none; align-content: center;
}
.symptoms a:hover, .cat-grid a:hover { border-color: var(--teal); }
.cat-name { font-weight: 600; font-size: 17px; }
.cat-subs { font-size: 15px; color: var(--ink); line-height: 1.5; }
.section-head-tight { margin-bottom: clamp(18px, 2.4vw, 26px); }
/* 메인 '취급 동물의약품 분류' 카드: 같은 줄 높이 맞춤, 소분류 태그, 아래 구분선과 품목 수 */
.group-grid { gap: 16px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 280px), 1fr)); }
.group-grid > li { display: flex; }
.group-grid .group-card {
  flex: 1; display: flex; flex-direction: column; gap: 14px; min-height: 0;
  padding: 22px 22px 18px; background: #ffffff; border: 1px solid #e2e6e3; border-radius: 8px;
  box-shadow: 0 1px 2px rgba(8, 44, 50, .05), 0 6px 16px -8px rgba(8, 44, 50, .14);
}
.gc-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; }
.group-card .cat-name { font-size: 19px; font-weight: 700; color: var(--ink); line-height: 1.4; }
.gc-arrow {
  flex: none; width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center;
  background: var(--teal-soft); color: var(--teal); font-size: 15px; font-weight: 700;
  transition: transform .3s ease, background-color .3s ease, color .3s ease;
}
.gc-tags { display: flex; flex-wrap: wrap; gap: 6px; }
.gc-tag { font-size: 14px; line-height: 1.4; padding: 5px 11px; border-radius: 999px; background: var(--mist); color: var(--ink); }
.gc-foot {
  margin-top: auto; padding-top: 12px; border-top: 1px solid #eceeeb;
  display: flex; align-items: center; gap: 8px; font-size: 14px; font-weight: 500; color: var(--muted);
}
.gc-foot::before { content: ""; width: 7px; height: 7px; border-radius: 50%; background: #b7c1be; flex: none; }
.gc-foot.has { color: var(--teal); font-weight: 600; }
.gc-foot.has::before { background: var(--teal); }

/* 증상으로 찾기 칩 (2026-11-13: 별도 구역 대신 분류 구역 위에 한 줄) */
.symptom-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 18px; }
.symptom-label { font-size: 15px; font-weight: 700; color: var(--pine); }
.symptom-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.symptom-chips a {
  display: inline-flex; align-items: center; min-height: 40px; padding-inline: 14px; border-radius: 999px;
  background: #ffffff; border: 1px solid #d8dfdc; color: var(--ink); font-size: 15px; font-weight: 500; text-decoration: none;
  transition: background-color .2s ease, border-color .2s ease, color .2s ease;
}
.symptom-chips a:hover, .symptom-chips a:focus-visible { background: var(--teal-soft); border-color: var(--teal); color: var(--pine); }

/* 휴대폰: 분류 카드는 2열, 이름과 제품 수만 (소분류 태그·성분 수는 목록 페이지에서) */
@media (max-width: 559px) {
  .group-grid { grid-template-columns: 1fr 1fr; gap: 10px; }
  .group-grid .group-card { gap: 10px; padding: 16px 14px 14px; }
  .group-card .cat-name { font-size: 16px; }
  .gc-arrow { width: 26px; height: 26px; font-size: 13px; }
  .gc-tags, .gc-ing { display: none; }
  .gc-foot { padding-top: 10px; font-size: 13px; }
  .symptom-row { margin-bottom: 14px; }
  .symptom-chips a { min-height: 38px; padding-inline: 12px; font-size: 14px; }
}
.cat-count { font-size: 14px; color: var(--muted); font-weight: 500; font-family: var(--body); }

/* 가이드 카드 */
/* 보호자 가이드 (2026-11-13): 한 줄에 한 편인 목록 + 메인의 추천 1편 */
.guide-list { background: #ffffff; border: 1px solid #e2e6e3; border-radius: 8px; overflow: hidden; }
.guide-list > li + li { border-top: 1px solid #eceeeb; }
.guide-row { display: flex; align-items: center; gap: 14px; min-height: 60px; padding: 16px 18px; color: inherit; text-decoration: none; transition: background-color .2s ease; }
.gr-text { display: grid; gap: 3px; flex: 1; min-width: 0; }
.gr-tag { justify-self: start; font-size: 13px; font-weight: 600; color: var(--teal); }
.gr-title { font-size: 17px; font-weight: 600; line-height: 1.45; }
.gr-desc { font-size: 15px; color: var(--muted); line-height: 1.55; }
.gr-arrow { flex: none; font-size: 22px; line-height: 1; color: var(--teal); transition: transform .2s ease; }
.guide-row:hover, .guide-row:focus-visible { background: var(--teal-soft); }
.guide-row:hover .gr-title { color: var(--pine); }
.guide-row:hover .gr-arrow { transform: translateX(3px); }

.guide-feature-wrap { display: grid; gap: 16px; align-items: start; }
@media (min-width: 860px) { .guide-feature-wrap { grid-template-columns: minmax(0, 1fr) minmax(0, 1.15fr); gap: 20px; } }
.guide-feature {
  display: grid; gap: 10px; align-content: start; padding: 26px 26px 22px;
  background: #ffffff; border: 2px solid var(--teal); border-radius: 8px; color: inherit; text-decoration: none;
  box-shadow: 0 1px 2px rgba(8, 44, 50, .05), 0 6px 16px -8px rgba(8, 44, 50, .14);
  transition: transform .3s ease, box-shadow .3s ease;
}
.gf-badge { justify-self: start; padding: 4px 11px; border-radius: 999px; background: var(--teal-soft); color: var(--pine); font-size: 13px; font-weight: 700; }
.gf-topic { font-size: 14px; font-weight: 600; color: var(--teal); }
.gf-title { font-family: var(--display); font-weight: 700; font-size: clamp(21px, 2.4vw, 25px); line-height: 1.4; }
.gf-desc { color: var(--muted); }
.gf-more { margin-top: 4px; color: var(--teal); font-weight: 700; }
@media (hover: hover) {
  .guide-feature:hover { transform: translateY(-3px); box-shadow: 0 2px 4px rgba(8, 44, 50, .05), 0 18px 32px -14px rgba(10, 100, 103, .32); }
}

/* 보호자 가이드 페이지: 주제별 묶음 */
.guide-topics { display: grid; gap: clamp(28px, 4vw, 40px); }
.gt-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 12px; }
.gt-head h2 { font-size: clamp(21px, 2.4vw, 25px); }
.gt-head p { color: var(--muted); font-size: 15px; }

/* 이용 안내 */
.notice-list { display: grid; gap: 0 48px; border-top: 2px solid var(--ink); }
.notice-list li { padding-block: 18px; border-bottom: 1px solid var(--rule); display: grid; gap: 4px; }
.notice-list p { color: var(--muted); font-size: 16px; }
@media (min-width: 760px) { .notice-list { grid-template-columns: 1fr 1fr; } }

/* 자주 묻는 질문 */
.faq { border-top: 2px solid var(--ink); }
.faq-compact { margin-top: 32px; max-width: 820px; }
.faq details { border-bottom: 1px solid var(--rule); }
.faq summary { cursor: pointer; padding-block: 16px; min-height: 44px; font-weight: 600; list-style: none; display: flex; justify-content: space-between; gap: 16px; }
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "+"; font-family: var(--mono); color: var(--teal); font-size: 20px; line-height: 1.4; flex: none; }
.faq details[open] summary::after { content: "−"; }
.faq details p { padding-bottom: 18px; color: var(--muted); max-width: 42em; }

/* 방문 */
.visit { display: grid; gap: 36px; }
.visit-col { display: grid; gap: 18px; align-content: start; min-width: 0; }
.visit-col .section-head { margin-bottom: 0; }
.addr { font-weight: 600; }
.cta-actions { display: flex; flex-wrap: wrap; gap: 10px; }
/* 오시는 길: 전화 버튼 아래 지도 버튼 3개를 같은 너비로 한 줄 (2026-11-13) */
.visit-actions { display: grid; gap: 10px; justify-items: start; }
.map-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; width: 100%; max-width: 420px; }
.map-actions .btn { padding-inline: 8px; white-space: nowrap; }
/* 지도 버튼: 각 서비스 대표 색 (네이버 #03C75A, 카카오 #FEE500, 구글 #1A73E8) */
.map-btn { gap: 6px; border: 0; font-weight: 700; transition: filter .2s ease; }
.map-btn:hover, .map-btn:focus-visible { filter: brightness(.93); }
.map-icon { width: 18px; height: 18px; flex: none; }
.map-naver { background: #03C75A; color: #ffffff; }
.map-kakao { background: #FEE500; color: #191919; }
.map-google { background: #1A73E8; color: #ffffff; }

/* 첫 화면 [길찾기]: 누르면 지도 앱 3개 중에서 고르는 작은 창 (2026-11-13) */
.map-picker { position: relative; }
/* 첫 화면 줄들은 등장 애니메이션(transform) 때문에 각자 쌓임 순서를 가진다. 지도 선택 창이 아래 검색창·칩 위로 오도록 버튼 줄을 위로 올린다. */
.hero-cta { position: relative; z-index: 3; }
.map-picker > summary { list-style: none; cursor: pointer; }
.map-picker > summary::-webkit-details-marker { display: none; }
.map-picker[open] > summary { background: rgba(255, 255, 255, .16); border-color: var(--on-pine); }
.map-picker-panel {
  position: absolute; top: calc(100% + 8px); left: 0; z-index: 5; width: 230px;
  display: grid; gap: 10px; padding: 14px;
  background: var(--paper); color: var(--ink); border-radius: 8px;
  box-shadow: 0 16px 36px rgba(4, 24, 28, .35);
}
.map-picker-title { font-size: 14px; font-weight: 700; color: var(--pine); }
.map-actions-stack { grid-template-columns: 1fr; max-width: none; }
.map-actions-stack .btn { justify-content: flex-start; padding-inline: 14px; }
@media (max-width: 559px) {
  .hero-cta .map-picker { flex: 1 1 0; display: flex; }
  .hero-cta .map-picker > summary { flex: 1; padding-inline: 12px; }
  .map-picker-panel { left: auto; right: 0; width: min(260px, calc(100vw - 32px)); }
}
@media (max-width: 759px) {
  .visit-actions { justify-items: stretch; }
  .map-actions { max-width: none; }
}
@media (min-width: 860px) { .visit { grid-template-columns: 1fr 1fr; gap: 56px; } }
.table-wrap { overflow-x: auto; }
.hours, .data { width: 100%; border-collapse: collapse; font-variant-numeric: tabular-nums; }
.hours th, .hours td, .data th, .data td { text-align: left; padding: 12px; border-bottom: 1px solid var(--rule); font-weight: 500; }
.hours th, .hours td { white-space: nowrap; }
.hours thead th, .data thead th { font-size: 14px; color: var(--muted); border-bottom: 2px solid var(--ink); }
.hours td { font-family: var(--mono); }
.hours tbody tr:first-child th, .hours tbody tr:first-child td { border-top: 1px solid var(--rule); }
.hours td.off { font-family: var(--body); color: var(--closed); font-weight: 600; }
.hours tr.today th, .hours tr.today td { background: var(--teal-soft); font-weight: 600; }
.today-tag { margin-left: 8px; font-size: 12px; font-weight: 600; color: var(--teal); }

/* 페이지 머리 */
.page-head > .inner { padding-block: clamp(24px, 4vw, 44px) 8px; display: grid; gap: 12px; }
.byline { font-size: 15px; color: var(--muted); }

/* 분류 탭 */
.cat-tabs { position: sticky; top: 65px; z-index: 15; background: var(--paper); border-bottom: 1px solid var(--rule); }
.cat-tabs ul { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; padding-block: 8px; }
.cat-tabs ul::-webkit-scrollbar { display: none; }
.cat-tabs a {
  display: inline-flex; align-items: center; min-height: 40px; padding-inline: 14px; white-space: nowrap;
  border: 1px solid var(--rule); border-radius: 999px; text-decoration: none; font-size: 15px; font-weight: 500; background: var(--paper);
}
.cat-tabs a:hover { border-color: var(--teal); color: var(--teal); }

/* 필터 */
.filters { display: grid; gap: 12px; grid-template-columns: 1fr 1fr; padding: 16px; background: var(--mist); border-radius: 4px; }
.field { display: grid; gap: 4px; min-width: 0; }
.field-wide { grid-column: 1 / -1; }
.field label { font-size: 14px; font-weight: 600; }
.field input, .field select {
  min-height: 48px; padding: 8px 12px; font: inherit; font-size: 16px; color: var(--ink);
  background: #ffffff; border: 1px solid var(--rule); border-radius: 4px; width: 100%;
}
@media (min-width: 860px) { .filters { grid-template-columns: 2fr repeat(3, 1fr); } .field-wide { grid-column: auto; } }
.result-count { margin-block: 18px 6px; font-weight: 600; }

/* 의약품 카드 */
/* 대분류(cat-super) > 소분류(cat-group) */
.cat-super { padding-top: 32px; scroll-margin-top: 130px; }
.cat-super + .cat-super { margin-top: 16px; border-top: 2px solid var(--ink); }
.super-title { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; font-size: clamp(24px, 2.8vw, 30px); }
.cat-group { padding-top: 20px; }
.group-empty { display: grid; gap: 10px; justify-items: start; margin-top: 14px; padding: 16px 18px; background: var(--mist); border-radius: 4px; }
.group-empty p { color: var(--muted); }
.group-empty .group-empty-subs { color: var(--ink); font-weight: 600; }
.cat-group h3 { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; margin-bottom: 14px; font-size: clamp(19px, 2.2vw, 22px); }
.med-grid { display: grid; gap: 14px; grid-template-columns: repeat(auto-fill, minmax(min(100%, 300px), 1fr)); }
/* 분류 안 가이드 배너: 카드(흰 바탕·테두리)와 구분되게 연한 청록 바탕, 가로로 넓게 */
.guide-banners { display: grid; gap: 10px; margin-bottom: 16px; }
.guide-banner { display: grid; grid-template-columns: auto 1fr; gap: 4px 14px; align-items: baseline; padding: 14px 18px; background: var(--teal-soft); border-left: 4px solid var(--teal); border-radius: 0 4px 4px 0; color: var(--ink); text-decoration: none; min-width: 0; }
.guide-banner-tag { grid-row: span 2; font-size: 14px; font-weight: 600; color: var(--teal); white-space: nowrap; }
.guide-banner strong { font-size: 18px; line-height: 1.45; overflow-wrap: anywhere; }
.guide-banner-sub { grid-column: 2; color: var(--muted); font-size: 15px; line-height: 1.6; }
.guide-banner:hover strong, .guide-banner:focus-visible strong { color: var(--teal); text-decoration: underline; }
@media (max-width: 560px) {
  .guide-banner { grid-template-columns: 1fr; padding: 12px 14px; }
  .guide-banner-tag { grid-row: auto; }
  .guide-banner-sub { grid-column: 1; }
}
.med-card { background: #ffffff; border: 1px solid var(--rule); border-radius: 4px; padding: 18px; display: grid; gap: 10px; align-content: start; min-width: 0; }
.med-title { font-size: 20px; }
.med-title a { text-decoration: none; }
.med-title a:hover { color: var(--teal); text-decoration: underline; }
.med-facts { display: grid; gap: 4px; font-size: 15px; }
.med-facts > div { display: grid; grid-template-columns: 40px minmax(0, 1fr); gap: 8px; }
.med-facts dt { color: var(--muted); }
.med-summary { font-size: 16px; color: var(--muted); }
.med-foot { display: flex; justify-content: space-between; align-items: center; gap: 12px; font-size: 14px; color: var(--muted); }
.more { display: inline-flex; align-items: center; min-height: 44px; margin-left: auto; color: var(--teal); font-weight: 600; font-size: 15px; }
.badges { display: flex; flex-wrap: wrap; gap: 6px; }
.badge { display: inline-flex; align-items: center; min-height: 28px; padding: 2px 9px; border-radius: 3px; font-size: 14px; font-weight: 600; line-height: 1.3; }
.badge-instock { background: var(--stock-bg); color: var(--stock-fg); }
.badge-order { background: var(--order-bg); color: var(--order-fg); }
.badge-soldout, .badge-unknown { background: var(--mist); color: var(--muted); border: 1px solid var(--rule); }
.badge-rx { background: var(--rx-bg); color: var(--rx-fg); }
.badge-vet { background: var(--vet-bg); color: var(--vet-fg); }
.badge-human { background: var(--order-bg); color: var(--order-fg); }
.badge-species { background: var(--teal-soft); color: var(--pine); }
.empty { padding: 24px 0; font-weight: 600; }

/* 문의 상자 */
.cta-box { margin-top: 32px; padding: 22px; border-radius: 4px; background: var(--teal-soft); display: grid; gap: 10px; }
.cta-title { font-weight: 700; font-size: 18px; }

/* 상세 */
.detail { display: grid; gap: 32px; }
.detail-main { display: grid; gap: 30px; min-width: 0; }
.detail-main h2, .guide-body h2 { font-size: 22px; margin-bottom: 10px; }
.detail-side { min-width: 0; }
.detail-side .cta-box { margin-top: 0; }
.updated { margin-top: 12px; font-size: 14px; color: var(--muted); }
@media (min-width: 960px) {
  .detail { grid-template-columns: minmax(0, 1fr) 300px; gap: 48px; }
  .detail-side { position: sticky; top: 90px; align-self: start; }
}
.notice { padding: 14px 16px; border-radius: 4px; background: var(--mist); border-left: 4px solid var(--muted); }
.notice-rx { background: var(--rx-bg); color: var(--rx-fg); border-left-color: var(--rx-fg); }
.notice-vet { background: var(--vet-bg); color: var(--vet-fg); border-left-color: var(--vet-fg); }
.notice-human { background: var(--order-bg); color: var(--order-fg); border-left-color: var(--order-fg); }
.notice-title { font-weight: 700; margin-bottom: 6px; }
.notice-items { display: grid; gap: 6px; }
.notice-items li { padding-left: 14px; position: relative; }
.notice-items li::before { content: ""; position: absolute; left: 0; top: 0.75em; width: 5px; height: 5px; border-radius: 50%; background: currentColor; }
.bullets { display: grid; gap: 6px; }
.bullets li { padding-left: 18px; position: relative; }
.bullets li::before { content: ""; position: absolute; left: 2px; top: 0.75em; width: 6px; height: 6px; border-radius: 50%; background: var(--teal); }
.spec { border-top: 1px solid var(--rule); }
.spec > div { display: grid; grid-template-columns: 76px minmax(0, 1fr); gap: 12px; padding-block: 11px; border-bottom: 1px solid var(--rule); }
.spec dt { color: var(--muted); }
.en { color: var(--muted); font-size: 0.92em; }

/* 가이드 본문 */
.guide-body { display: grid; gap: 30px; }
.guide-body p + p { margin-top: 10px; }
.summary-box { background: var(--teal-soft); border-radius: 4px; padding: 18px 20px; }
.summary-title { font-weight: 700; margin-bottom: 8px; }
.summary-box li { padding-left: 18px; position: relative; }
.summary-box li::before { content: "✓"; position: absolute; left: 0; color: var(--teal); font-weight: 700; }
.steps { display: grid; gap: 14px; }
.steps li { display: grid; grid-template-columns: 32px minmax(0, 1fr); gap: 10px; }
.step-no { font-family: var(--mono); font-weight: 600; color: var(--teal); }
.steps p { color: var(--muted); font-size: 16px; }
.situations > div { padding-block: 12px; border-bottom: 1px solid var(--rule); }
.situations dt { font-weight: 600; }
.situations dd { color: var(--muted); }
.warning { padding: 18px 20px; border-radius: 4px; background: var(--rx-bg); color: var(--rx-fg); }
.warning .bullets li::before { background: var(--rx-fg); }

/* 약사 소개 */
.pharmacist { display: grid; gap: 28px; }
.pharmacist-body { display: grid; gap: 20px; align-content: start; min-width: 0; }
.profile-name { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 12px; }
.profile-role { font-size: 16px; font-weight: 600; color: var(--teal); }
.greeting { display: grid; gap: 10px; max-width: 40em; }
.creed { font-size: 19px; font-weight: 600; line-height: 1.55; }
.profile-group { display: grid; gap: 10px; }
.profile-label { font-size: 15px; font-weight: 700; }
.focus-list { display: flex; flex-wrap: wrap; gap: 8px; }
.focus-list li { background: var(--teal-soft); color: var(--pine); font-size: 15px; font-weight: 600; padding: 5px 12px; border-radius: 3px; }
.history { display: grid; gap: 20px; border-top: 2px solid var(--ink); padding-top: 18px; }
.history > div { display: grid; gap: 8px; align-content: start; }
.history ul { display: grid; gap: 8px; font-size: 16px; }
.history li { display: grid; grid-template-columns: 22px minmax(0, 1fr); gap: 4px; }
.mark { color: var(--teal); font-weight: 700; }
.mark-past { color: var(--muted); }
@media (min-width: 620px) { .history { grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 28px; } }
@media (min-width: 760px) { .pharmacist { grid-template-columns: 240px minmax(0, 1fr); gap: 48px; } .pharmacist-no-photo { grid-template-columns: minmax(0, 1fr); } }

/* 제품명 색인 */
.index-group { padding-block: 12px; }
.index-group h2 { font-size: 22px; border-bottom: 2px solid var(--ink); padding-bottom: 6px; margin-bottom: 6px; }
.index-list li { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 4px 16px; padding-block: 10px; border-bottom: 1px solid var(--rule); }
.index-list span { color: var(--muted); font-size: 15px; }

/* 바닥글 */
.site-footer { background: var(--pine-deep); color: var(--on-pine-muted); font-size: 15px; line-height: 1.7; }
.source-lines { display: grid; gap: 4px; }
.footer-grid { display: grid; gap: 28px; padding-block: 40px 20px; }
.footer-col { display: grid; gap: 8px; align-content: start; min-width: 0; }
.footer-name { color: var(--on-pine); font-weight: 700; font-size: 17px; }
.footer-label { color: var(--on-pine); font-weight: 600; }
.footer-links { display: flex; flex-wrap: wrap; gap: 0 18px; }
.footer-links a, .site-footer a { color: var(--on-pine); }
.footer-links a { display: inline-flex; align-items: center; min-height: 44px; }
.footer-bottom { padding-block: 16px 32px; border-top: 1px solid rgba(188, 208, 205, 0.25); }
@media (min-width: 860px) { .footer-grid { grid-template-columns: 1fr 1.4fr; gap: 56px; } }

/* 떠 있는 문의 버튼: [전화 문의] 아래에 카톡 상담·네이버 톡톡 (2026-11-13) */
.floating-stack {
  position: fixed; z-index: 30;
  right: max(16px, env(safe-area-inset-right, 0px));
  bottom: calc(16px + env(safe-area-inset-bottom, 0px));
  display: flex; flex-direction: column; align-items: stretch; gap: 8px;
}
.floating {
  display: grid; gap: 0; padding: 10px 18px; min-height: 56px; align-content: center;
  background: var(--pine); color: var(--on-pine); border-radius: 999px; text-decoration: none;
  box-shadow: 0 8px 24px rgba(4, 24, 28, 0.3);
}
.floating-main { font-weight: 700; font-size: 16px; line-height: 1.3; }
.floating-status { font-size: 14px; font-weight: 600; color: var(--on-pine); line-height: 1.3; }
.floating:hover { background: var(--pine-deep); }
.float-chat {
  display: flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 0 14px;
  border-radius: 999px; font-size: 14px; font-weight: 700; text-decoration: none; white-space: nowrap;
  box-shadow: 0 6px 18px rgba(4, 24, 28, 0.22); transition: filter .2s ease;
}
.float-chat:hover, .float-chat:focus-visible { filter: brightness(.93); }
.float-kakao { background: #FEE500; color: #191919; }
.float-naver { background: #03C75A; color: #ffffff; }
.chat-icon { width: 18px; height: 18px; flex: none; }

@media (max-width: 759px) {
  .search .btn { padding-inline: 16px; }
  .cta-actions .btn { flex: 1 1 100%; }
}

/* ============================================================
   어두운 띠와 모션 (2026-11-12, dekilab.kr 구성 참고)
   - 첫 화면 물결, 제목 타이핑, 숫자 띠, 어두운 이용 안내 카드
   - 스크롤 등장은 app.js가 화면 밖 요소에만 data-reveal을 붙인다.
     JS가 없거나 '동작 줄이기' 설정이면 모든 내용이 처음부터 보인다.
   ============================================================ */
:root { --mint: #7fd3c6; --ease-out: cubic-bezier(.22, 1, .36, 1); }

/* 첫 화면 물결: 밝은 청록 빛 3겹이 왼쪽 위에서 오른쪽 아래로 천천히 흐른다 */
.hero-waves { position: absolute; inset: 0; z-index: 0; pointer-events: none; }
.hero-waves span {
  position: absolute; top: 0; left: 0; width: 120%; height: 120%; border-radius: 40%; opacity: 0;
  will-change: transform, opacity;
}
.hero-waves span:nth-child(1) { background: radial-gradient(ellipse at center, rgba(40, 150, 144, .55), transparent 60%); animation: wave-a 14s ease-in-out infinite; }
.hero-waves span:nth-child(2) { background: radial-gradient(ellipse at center, rgba(24, 120, 120, .5), transparent 55%); animation: wave-b 18s ease-in-out infinite; }
.hero-waves span:nth-child(3) { background: radial-gradient(ellipse at center, rgba(110, 190, 176, .3), transparent 50%); animation: wave-c 22s ease-in-out infinite; }
@keyframes wave-a { 0% { transform: translate(-55%, -55%); opacity: 0; } 15% { opacity: .7; } 50% { transform: translate(-10%, -10%); opacity: .8; } 85% { opacity: .7; } 100% { transform: translate(30%, 30%); opacity: 0; } }
@keyframes wave-b { 0% { transform: translate(-65%, -45%); opacity: 0; } 15% { opacity: .6; } 50% { transform: translate(-5%, -5%); opacity: .7; } 85% { opacity: .6; } 100% { transform: translate(40%, 40%); opacity: 0; } }
@keyframes wave-c { 0% { transform: translate(-45%, -65%); opacity: 0; } 15% { opacity: .5; } 50% { transform: translate(0%, -15%); opacity: .6; } 85% { opacity: .5; } 100% { transform: translate(50%, 25%); opacity: 0; } }

/* 첫 화면 글자 등장: 한 줄씩 떠오른다.
   2026-11-12: 글자는 처음부터 보이고 위치만 움직인다 (투명도·잘라내기를 쓰지 않는다).
   화면 그리기가 느린 기기에서도 애니메이션 때문에 제목·버튼이 안 보이는 일이 없다. */
@keyframes rise { from { transform: translateY(14px); } to { transform: none; } }
@keyframes slide-in { from { transform: translateX(24px); } to { transform: none; } }
@keyframes caret { 0%, 100% { border-color: var(--mint); } 50% { border-color: transparent; } }
.hero-copy > * { animation: rise .7s var(--ease-out) both; }
.hero-copy > :nth-child(1) { animation-delay: 0s; }
.hero-copy > :nth-child(2) { animation-delay: .08s; }
.hero-copy > :nth-child(3) { animation-delay: .16s; }
.hero-copy > :nth-child(4) { animation-delay: .24s; }
.hero-copy > :nth-child(5) { animation-delay: .32s; }
.hero-copy > :nth-child(6) { animation-delay: .4s; }
.hero h1 {
  justify-self: start; padding-right: 6px; border-right: 3px solid transparent;
  animation: rise .7s var(--ease-out) .08s both, caret 1s step-end .6s 3;
}
.rx-label { animation: slide-in .8s var(--ease-out) .3s both; }

/* 첫 화면 행동 버튼: 전화하기·길찾기를 가장 크게, 검색은 그 아래 작게 */
.hero-cta { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn-lg { min-height: 60px; padding: 10px 26px; font-size: 18px; flex-direction: column; gap: 0; line-height: 1.25; border-radius: 6px; }
.btn-sub { font-size: 13px; font-weight: 500; opacity: .75; }
.btn-ghost { background: rgba(255, 255, 255, .06); color: var(--on-pine); border-color: rgba(246, 244, 238, .45); }
.btn-ghost:hover { background: rgba(255, 255, 255, .12); border-color: var(--on-pine); }
.btn-primary:hover { background: #ffffff; }
.search-sm { max-width: 460px; margin-top: 2px; }
.search-sm input { min-height: 44px; font-size: 15px; background: rgba(255, 255, 255, .94); }
.search-sm .btn { min-height: 44px; padding-inline: 16px; font-size: 15px; }
@media (max-width: 559px) {
  .hero-cta .btn-lg { flex: 1 1 0; padding-inline: 12px; }
}

/* 숫자 띠: 첫 화면 바로 아래, 같은 어두운 바탕 */
.stats { background: var(--pine-deep); color: var(--on-pine); border-top: 1px solid rgba(188, 208, 205, .14); }
.stat-strip { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); padding-block: clamp(32px, 5vw, 56px); text-align: center; }
.stat { display: grid; gap: 6px; align-content: start; padding-inline: 8px; }
.stat-label { line-height: 1.5; }
.stat + .stat { border-left: 1px solid rgba(188, 208, 205, .22); }
.stat-top { color: var(--mint); font-family: var(--display); font-weight: 700; line-height: 1.1; font-variant-numeric: tabular-nums; }
.stat-num { font-size: clamp(40px, 7vw, 64px); }
.stat-unit { font-size: clamp(18px, 3vw, 28px); margin-left: 2px; white-space: nowrap; }
.stat-label { color: var(--on-pine-muted); font-size: clamp(14px, 1.8vw, 17px); font-weight: 600; }

/* 어두운 띠: 이용 안내를 번호 카드로 */
.band.dark { background: var(--pine-deep); color: var(--on-pine); }
.dark .eyebrow, .dark .text-link { color: var(--mint); }
.dark .notice-list { border-top: 0; gap: 16px; counter-reset: notice; }
.dark .notice-list li {
  counter-increment: notice; position: relative; gap: 8px; align-content: start;
  padding: 26px 24px 24px; border: 1px solid rgba(188, 208, 205, .16); border-radius: 4px;
  background: rgba(255, 255, 255, .035);
}
.dark .notice-list li::before {
  content: counter(notice, decimal-leading-zero); font-family: var(--mono); font-weight: 600; font-size: 15px;
  color: var(--mint); display: inline-block; transform-origin: left center; transition: transform .3s ease;
}
.dark .notice-list h3 { color: var(--on-pine); }
.dark .notice-list p { color: var(--on-pine-muted); }

/* 카드 호버: 살짝 떠오르고 청록 그림자 */
.cat-grid a, .symptoms a, .med-card, .dark .notice-list li {
  transition: transform .3s ease, box-shadow .3s ease, border-color .3s ease;
}

/* 스크롤 등장 (app.js가 붙임) */
[data-reveal] {
  opacity: 0; transform: translateY(32px) scale(.98);
  transition: opacity .6s var(--ease-out), transform .6s var(--ease-out), box-shadow .3s ease, border-color .3s ease;
}
[data-reveal].is-in { opacity: 1; transform: none; }

@media (hover: hover) {
  .cat-grid a:hover, .symptoms a:hover, .med-card:hover { transform: translateY(-4px); border-color: var(--teal); box-shadow: 0 18px 36px -18px rgba(10, 100, 103, .45); }
  .group-grid .group-card:hover {
    transform: translateY(-4px); border-color: rgba(10, 100, 103, .35);
    box-shadow: 0 2px 4px rgba(8, 44, 50, .05), 0 18px 32px -14px rgba(10, 100, 103, .32);
  }
  .group-card:hover .gc-arrow { background: var(--teal); color: #ffffff; transform: translateX(3px); }
  .dark .notice-list li:hover { transform: translateY(-4px); border-color: rgba(127, 211, 198, .55); box-shadow: 0 14px 34px rgba(0, 0, 0, .28), 0 0 0 1px rgba(127, 211, 198, .12); }
  .dark .notice-list li:hover::before { transform: scale(1.15); }
}

@media (max-width: 559px) {
  .stat { padding-inline: 4px; }
}

@media (prefers-reduced-motion: reduce) {
  html { scroll-behavior: auto; }
  .hero-waves span { animation: none; opacity: .55; transform: translate(-25%, -25%); }
  .hero-waves span:nth-child(n+2) { display: none; }
  .hero-copy > *, .hero h1, .rx-label { animation: none; }
  [data-reveal] { opacity: 1; transform: none; transition: none; }
  .cat-grid a, .symptoms a, .med-card, .dark .notice-list li, .guide-feature, .guide-row, .gr-arrow { transition: none; }
}