:root {
  --olive: #2b2f21;
  --olive-2: #3a3e2f;
  --olive-line: #55594a;
  --gold: #9c6b1a;
  --gold-soft: #fbf1dc;
  --gold-line: #d8b46a;
  --cream: #f5ecd6;
  --bg: #f6f6f3;
  --surface: #ffffff;
  --text: #1f201b;
  --muted: #74766c;
  --line: #e7e6e0;
  --chip: #f0f0ec;
  --red: #c8412f;
  --shadow: 0 2px 10px rgba(30, 32, 22, .08);
  --tab-bg: rgba(232, 242, 240, .82);
  /* 헤더·히어로: 파스텔 핑크 */
  --pink: #f9dbe5;
  --pink-2: #fff2f6;
  --pink-line: #efbfd0;
  --pink-ink: #6e2a46;
  --pink-soft-ink: #a35d79;
  --rose: #d45d8a;
  --rose-ink: #ffffff;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #151612; --surface: #202219; --text: #f1f0ea; --muted: #a3a497; --line: #34362c;
    --chip: #2c2e25; --gold: #e0b062; --gold-soft: #3a311d; --cream: #3a331f; --tab-bg: rgba(40, 44, 34, .85);
    --pink: #3b2531; --pink-2: #4a2f3d; --pink-line: #6a4256; --pink-ink: #fbe3ec; --pink-soft-ink: #d9a5ba; --rose: #e07aa1;
  }
}
:root[data-theme="dark"] {
  --bg: #151612; --surface: #202219; --text: #f1f0ea; --muted: #a3a497; --line: #34362c;
  --chip: #2c2e25; --gold: #e0b062; --gold-soft: #3a311d; --cream: #3a331f; --tab-bg: rgba(40, 44, 34, .85);
  --pink: #3b2531; --pink-2: #4a2f3d; --pink-line: #6a4256; --pink-ink: #fbe3ec; --pink-soft-ink: #d9a5ba; --rose: #e07aa1;
}

* { box-sizing: border-box; -webkit-tap-highlight-color: transparent; }
html, body { margin: 0; height: 100%; }
/* 화면 자체는 고정: 휴대폰에서 끌면 머리 띠·탭바까지 통째로 출렁이던 것(문서 바운스)을 막는다 (소방관 앱과 같음).
   스크롤은 각 화면(홈·목록·커뮤니티 등) 안에서만 일어나고, 당겨서 새로고침은 ptr.js 가 화면 안에서 따로 그린다. */
html { overflow: hidden; overscroll-behavior: none; }
body { position: fixed; inset: 0; overflow: hidden; overscroll-behavior: none; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif;
  background: var(--bg); color: var(--text); letter-spacing: -.01em;
}
button, select, input { font: inherit; color: inherit; }
button { cursor: pointer; border: 0; background: none; padding: 0; }
/* 앱 아이콘용 svg 기본값. 구글 지도 안의 svg는 건드리지 않도록 앱 영역으로 한정한다 */
:where(.top, .list-view, .chips, .fab, .carousel, .tabbar, .sheet, .btl) svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }

/* 앱은 창 전체를 채운다 (지도가 가장자리까지). 글·목록은 넓은 화면에서 가운데 640px 폭으로 */
.app { --wide: max(0px, calc((100% - 640px) / 2)); position: relative; height: 100vh; height: 100dvh; background: var(--bg); display: flex; flex-direction: column; overflow: hidden; }

/* 헤더 */
.top { background: var(--pink); padding: calc(env(safe-area-inset-top) + 14px) calc(16px + var(--wide)) 14px; color: var(--pink-ink); z-index: 1001; }
.search-row { display: flex; align-items: center; gap: 12px; }
.search { flex: 1; display: flex; align-items: center; gap: 8px; background: var(--pink-2); border: 1px solid var(--pink-line); border-radius: 14px; padding: 0 14px; height: 46px; }
.search svg { color: var(--pink-soft-ink); flex: none; }
.search input { flex: 1; min-width: 0; background: none; border: 0; outline: 0; color: var(--pink-ink); font-size: 16px; }
.search input::placeholder { color: var(--pink-soft-ink); }
.badge { flex: none; width: 50px; height: 50px; border-radius: 50%; padding: 3px; background: linear-gradient(135deg, #f7b6cc, #d45d8a); }
.badge span { display: grid; place-items: center; width: 100%; height: 100%; border-radius: 50%; background: #fff; color: #d45d8a; font-weight: 800; font-size: 14px; letter-spacing: .02em; }
.toggle { margin-top: 12px; display: grid; grid-template-columns: 1fr 1fr; gap: 4px; background: var(--pink-2); border: 1px solid var(--pink-line); border-radius: 14px; padding: 4px; }
.toggle button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 42px; border-radius: 11px; color: var(--pink-soft-ink); font-weight: 700; font-size: 15px; }
.toggle button svg { width: 18px; height: 18px; }
.toggle button.on { background: var(--rose); color: var(--rose-ink); box-shadow: 0 2px 6px rgba(212, 93, 138, .3); }

/* 목록 보기 */
.list-view { flex: 1; overflow-y: auto; padding: 0 var(--wide) 110px; }
.map-view { flex: 1; position: relative; display: none; }
.app[data-view="map"] .list-view { display: none; }
.app[data-view="map"] .map-view { display: block; }

.scope { display: flex; align-items: baseline; gap: 8px; padding: 16px 16px 4px; }
.scope strong { font-size: 16px; }
.scope select { border: 0; background: none; color: var(--muted); font-size: 14px; padding: 2px 0; }
.sec { padding: 14px 0 6px; }
.sec-head { display: flex; justify-content: space-between; align-items: baseline; padding: 0 16px 10px; }
.sec h2 { margin: 0; font-size: 20px; letter-spacing: -.03em; }
.sec h2 em { font-style: normal; color: var(--gold); margin-left: 4px; }
.more { color: var(--gold); font-weight: 700; font-size: 15px; }
.sec-desc { margin: -4px 16px 10px; color: var(--muted); font-size: 13px; }

.hscroll { display: flex; gap: 12px; overflow-x: auto; padding: 2px 16px 6px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.hscroll::-webkit-scrollbar, .chips::-webkit-scrollbar, .carousel::-webkit-scrollbar { display: none; }
.hcard { flex: 0 0 86%; scroll-snap-align: start; display: flex; gap: 12px; align-items: center; background: var(--surface); border: 1px solid var(--line); border-radius: 16px; padding: 12px; text-align: left; box-shadow: var(--shadow); }

.panel { margin: 0 16px; background: var(--surface); border: 1px solid var(--line); border-radius: 18px; box-shadow: var(--shadow); overflow: hidden; }
.row { width: 100%; display: flex; gap: 12px; align-items: center; padding: 12px; text-align: left; border-bottom: 1px solid var(--line); }
.row:last-child { border-bottom: 0; }

.thumb { flex: none; width: 76px; height: 76px; border-radius: 12px; display: grid; place-items: center; color: #fff; }
.thumb svg { width: 32px; height: 32px; stroke-width: 1.6; }
.hcard .thumb { width: 84px; height: 84px; }
.info { min-width: 0; flex: 1; }
.name { font-size: 17px; font-weight: 800; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.name small { font-weight: 500; color: var(--muted); font-size: 13px; margin-left: 4px; }
.perk { margin-top: 4px; color: var(--gold); font-weight: 800; font-size: 16px; }
.sub { margin-top: 3px; color: var(--muted); font-size: 13px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.dday { display: inline-block; background: var(--red); color: #fff; font-size: 11px; font-weight: 800; padding: 2px 6px; border-radius: 5px; margin-right: 4px; vertical-align: 1px; }
.dday.soft { background: var(--gold-soft); color: var(--gold); }

.chips { display: flex; gap: 8px; overflow-x: auto; padding: 0 16px 12px; scrollbar-width: none; }
.chips button { flex: none; height: 38px; padding: 0 16px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-size: 15px; font-weight: 600; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.chips button.on { background: var(--cream); border: 2px solid var(--gold-line); color: var(--gold); font-weight: 800; }
.load { display: block; margin: 12px auto 0; padding: 10px 22px; border-radius: 999px; background: var(--surface); border: 1px solid var(--line); font-weight: 700; color: var(--muted); }
.load[hidden] { display: none; }
.note { margin: 20px 16px 0; font-size: 12px; color: var(--muted); line-height: 1.5; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); }

/* 지도 보기 */
/* 타일에 CSS filter를 걸면 확대·축소 애니메이션 중 타일이 흐려지고 경계에 줄이 생긴다 — 걸지 않는다 */
#map { position: absolute; inset: 0; background: transparent; overflow: hidden; }
.map-view { overflow: hidden; isolation: isolate; }
/* 타일이 오기 전 바다색 */
.map-view { background: #aadaff; }
.chips.over { position: absolute; top: 12px; left: 0; right: 0; z-index: 500; padding-bottom: 6px; }
.chips.over button { box-shadow: 0 2px 8px rgba(0,0,0,.12); }
.fab { position: absolute; z-index: 500; width: 54px; height: 54px; border-radius: 50%; background: var(--surface); box-shadow: 0 3px 12px rgba(0,0,0,.18); display: grid; place-items: center; }
.fab.locate { right: 16px; bottom: 270px; }
.fab svg { width: 24px; height: 24px; }
.carousel { position: absolute; left: 0; right: 0; bottom: 96px; z-index: 500; display: flex; gap: 10px; overflow-x: auto; padding: 0 16px 4px; scroll-snap-type: x mandatory; scrollbar-width: none; }
.mcard { flex: 0 0 82%; scroll-snap-align: center; background: var(--surface); border-radius: 18px; padding: 14px 16px; box-shadow: 0 4px 16px rgba(0,0,0,.14); text-align: left; border: 2px solid transparent; }
.mcard.sel { border-color: var(--gold-line); }
.mcard .top-line { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; }
.mcard .name { font-size: 18px; }
.mcard .perk { font-size: 15px; }
.tagrow { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
.tag { font-size: 13px; padding: 5px 10px; border-radius: 9px; background: var(--chip); color: var(--muted); font-weight: 600; }
.tag.gold { background: var(--gold-soft); color: var(--gold); }
.star { flex: none; color: var(--muted); }
.star.on { color: #e3a52c; }
.star.on svg { fill: currentColor; }

/* 핀: 젖병 모양 */
/* 그림자는 CSS filter 대신 SVG 안의 타원으로 그린다 — filter는 확대·축소 때마다 핀 수백 개를 다시 계산해 끊김을 만든다 */
.btl { position: relative; width: 44px; height: 56px; transition: transform .15s; cursor: pointer; }
.btl:hover { transform: translateY(-2px) rotate(-4deg); }
.btl-body { width: 100%; height: 100%; display: block; }
.btl-shadow { fill: #000; opacity: .22; }
.btl-nipple { fill: #f4c8a2; stroke: #c98c5f; stroke-width: 1.2; }
.btl-ring { fill: #e2588d; stroke: #ad3363; stroke-width: 1.3; }
.btl-ring-line { fill: none; stroke: #ffffff; stroke-opacity: .45; stroke-width: 1.2; stroke-linecap: round; }
.btl-can { fill: #fde8f0; stroke: #ad3363; stroke-width: 1.4; }
.btl-milk { fill: #fff8e6; }
.btl-tick { fill: none; stroke: #e2588d; stroke-width: 1.3; stroke-linecap: round; }
.btl-shine { fill: #fff; opacity: .8; }
.btl-label { position: absolute; left: 13px; top: 22px; width: 18px; height: 15px; border-radius: 5px; background: #fff; box-shadow: 0 0 0 1px rgba(173,51,99,.25); color: #ad3363; font-weight: 900; font-size: 12px; line-height: 15px; text-align: center; letter-spacing: -.05em; }
.btl.many .btl-label { font-size: 10px; left: 11.5px; width: 21px; }
/* 한 곳짜리: 조금 작게, 라벨에 업종 아이콘 */
.btl.one { width: 34px; height: 43px; }
.btl.one .btl-label { left: 10px; top: 17px; width: 14px; height: 11.5px; border-radius: 4px; display: grid; place-items: center; }
.btl.one .btl-label svg { width: 9.5px; height: 9.5px; stroke: var(--c); stroke-width: 2.8; }
/* 제휴 업체: 병목 고리를 올리브·금색으로 */
.btl.mil .btl-ring { fill: #2b2f21; stroke: #d8b46a; }
/* 위치를 도로·동 단위로 근사한 곳: 반투명 */
.btl.approx { opacity: .8; }
.btl.sel { transform: scale(1.25); z-index: 1000; opacity: 1; }
.btl.sel .btl-can { stroke: var(--gold-line); stroke-width: 2.6; }
.leaflet-div-icon { background: none; border: 0; }
.me-dot { width: 18px; height: 18px; border-radius: 50%; background: #2f7cf6; border: 3px solid #fff; box-shadow: 0 0 0 6px rgba(47,124,246,.25); }

/* 하단 탭 */
.tabbar { position: absolute; left: 50%; width: min(456px, calc(100% - 24px)); transform: translateX(-50%); bottom: calc(env(safe-area-inset-bottom) + 10px); z-index: 1002; display: grid; grid-template-columns: repeat(5, 1fr); background: var(--tab-bg); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border: 1px solid rgba(255,255,255,.6); border-radius: 30px; padding: 6px; box-shadow: 0 6px 24px rgba(0,0,0,.12); }
.tabbar button { display: flex; flex-direction: column; align-items: center; gap: 3px; padding: 8px 0 6px; border-radius: 24px; font-size: 12px; font-weight: 600; color: var(--text); }
.tabbar button svg { width: 24px; height: 24px; stroke-width: 1.6; }
.tabbar button.on { background: rgba(160, 205, 210, .45); }

/* 상세 시트 */
.sheet-bg { position: fixed; inset: 0; background: rgba(0,0,0,.35); z-index: 2000; }
.sheet { position: fixed; left: 50%; bottom: 0; transform: translateX(-50%); width: 100%; max-width: 480px; max-height: 82vh; overflow-y: auto; z-index: 2001; background: var(--surface); border-radius: 22px 22px 0 0; padding: 10px 20px calc(env(safe-area-inset-bottom) + 24px); box-shadow: 0 -6px 30px rgba(0,0,0,.2); }
.sheet[hidden], .sheet-bg[hidden] { display: none; }
.grab { width: 40px; height: 5px; border-radius: 3px; background: var(--line); margin: 0 auto 14px; }
.sheet h3 { margin: 0; font-size: 22px; letter-spacing: -.03em; }
.sheet .perk { font-size: 20px; margin-top: 6px; }
.quote { margin: 14px 0 0; padding: 12px 14px; background: var(--bg); border-radius: 12px; font-size: 14px; line-height: 1.6; color: var(--muted); }
.kv { margin-top: 14px; display: grid; gap: 8px; font-size: 14px; }
.kv div { display: flex; gap: 10px; }
.kv b { flex: none; width: 52px; color: var(--muted); font-weight: 600; }
.ev { margin-top: 18px; }
.ev h4 { margin: 0 0 8px; font-size: 15px; }
.ev a { display: block; padding: 10px 0; border-top: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 14px; }
.ev a span { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.actions { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; margin-top: 18px; }
.actions a, .actions button { display: flex; align-items: center; justify-content: center; gap: 6px; height: 46px; border-radius: 12px; background: var(--chip); font-weight: 700; font-size: 14px; color: var(--text); text-decoration: none; }
.actions .primary { background: var(--rose); color: var(--rose-ink); }
.actions.two { grid-template-columns: 1fr 1fr; margin-top: 8px; }

/* 전체 화면 보기 (예비) */
.rv { position: absolute; inset: 0; z-index: 3000; background: #000; display: flex; flex-direction: column; }
.rv-bar { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; background: var(--olive); color: #fff; }
.rv-bar button { color: #fff; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: var(--olive-2); }
.rv-view { flex: 1; }
.rv-msg { position: absolute; left: 16px; right: 16px; top: 45%; text-align: center; color: #fff; font-size: 15px; }
.rv-msg a { color: var(--gold-line); }
.about p { font-size: 14px; line-height: 1.65; color: var(--muted); }
.about b { color: var(--text); }



/* 홈: 베이비페어 일정 + 정부 소식 */
.home-view { flex: 1; overflow-y: auto; padding: 0 var(--wide) 110px; display: none; }
.app[data-view="home"] .home-view { display: block; }
.app[data-view="home"] .list-view { display: none; }
.hero-sec { padding-top: 16px; }
.hero { display: grid; gap: 4px; width: calc(100% - 32px); margin: 0 16px; padding: 18px 18px 16px; border-radius: 18px; text-align: left;
  background: linear-gradient(135deg, var(--pink), var(--pink-2)); border: 1px solid var(--pink-line); color: var(--pink-ink); box-shadow: var(--shadow); }
.hero-k { font-size: 13px; color: var(--pink-soft-ink); font-weight: 600; }
.hero strong { font-size: 30px; letter-spacing: -.03em; color: var(--rose); font-variant-numeric: tabular-nums; }
.hero-sub { font-size: 13px; color: var(--pink-soft-ink); }
.hero-sub b { color: var(--pink-ink); }
.hero-go { margin-top: 6px; font-size: 14px; font-weight: 700; color: var(--rose); }

.fair-list { display: grid; gap: 10px; margin: 0 16px; }
.fair { display: flex; gap: 12px; align-items: center; width: 100%; padding: 12px; text-align: left; background: var(--surface);
  border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow); }
.cal { flex: none; width: 64px; height: 72px; border-radius: 12px; background: var(--cream); border: 1px solid var(--gold-line);
  display: grid; place-items: center; align-content: center; gap: 0; color: var(--gold); font-variant-numeric: tabular-nums; }
.cal .m { font-size: 12px; font-weight: 700; }
.cal .d { font-size: 24px; font-weight: 900; line-height: 1.05; color: var(--text); }
.cal .w { font-size: 11px; color: var(--muted); }
.cal.big { width: 76px; height: 84px; }
.fair .perk { font-size: 14px; }
.dday.live { background: #2f8f5b; color: #fff; }

.news { display: block; padding: 14px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.news:last-child { border-bottom: 0; }
.news-top { display: flex; align-items: center; gap: 8px; }
.news-meta { font-size: 12px; color: var(--muted); }
.news-title { margin-top: 6px; font-size: 15px; font-weight: 800; line-height: 1.4; }
.news-sum { margin-top: 4px; font-size: 13px; color: var(--muted); line-height: 1.5; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
#newsSec .load, #newsMore { margin-top: 10px; }
.fair-list { grid-template-columns: minmax(0, 1fr); }
.fair .info { min-width: 0; }
.fair .perk, .fair .name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 커뮤니티 */
.comm-view { flex: 1; overflow-y: auto; padding: 0 var(--wide) 110px; display: none; }
.app[data-view="comm"] .comm-view { display: block; }
.app[data-view="comm"] .list-view { display: none; }
.app[data-view="comm"] .toggle { display: none; }
.write { height: 34px; padding: 0 14px; border-radius: 999px; background: var(--rose); color: #fff; font-weight: 700; font-size: 14px; }
.write.wide { width: 100%; height: 44px; margin-top: 10px; border-radius: 12px; }
.post { display: block; width: 100%; padding: 14px; text-align: left; border-bottom: 1px solid var(--line); color: var(--text); }
.post:last-child { border-bottom: 0; }
.post.notice { background: var(--gold-soft); }
.post-biz { font-size: 12px; color: var(--gold); font-weight: 700; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-foot { display: flex; justify-content: space-between; gap: 8px; margin-top: 8px; font-size: 12px; color: var(--muted); }
.post-foot span:first-child { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.post-foot span:last-child { flex: none; }
.empty { padding: 28px 16px; text-align: center; color: var(--muted); font-size: 14px; }
.post-body { margin-top: 14px; font-size: 15px; line-height: 1.7; white-space: pre-wrap; word-break: break-word; }
.row.linked { margin-top: 14px; border: 1px solid var(--line); border-radius: 14px; }
.row.linked .info, .write-form .row .info { min-width: 0; }
.cmt { padding: 10px 0; border-top: 1px solid var(--line); font-size: 14px; line-height: 1.55; white-space: pre-wrap; word-break: break-word; }
.cmt .sub { white-space: normal; margin-bottom: 2px; }
.link { color: var(--muted); text-decoration: underline; font-size: 12px; }
.cmt-form { display: flex; gap: 8px; margin-top: 12px; }
.cmt-form input { flex: 1; min-width: 0; height: 44px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font-size: 15px; }
.cmt-form button { flex: none; padding: 0 16px; border-radius: 12px; background: var(--rose); color: #fff; font-weight: 700; }
.write-form { display: grid; gap: 12px; }
.write-form h3 { margin-bottom: 2px; }
.write-form label { display: grid; gap: 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.write-form input, .write-form select, .write-form textarea { width: 100%; padding: 11px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; font-weight: 400; }
.write-form textarea { resize: vertical; line-height: 1.6; }
.write-form .two-col { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.write-form .row.linked { margin-top: 0; }
.write-form .actions { margin-top: 4px; }
.row.linked .perk { font-size: 14px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; white-space: normal; }

/* 베이비페어 행사 사진 칸 */
.fpic { flex: none; width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--cream); border: 1px solid var(--line); }
.fpic img { display: block; width: 100%; height: 100%; object-fit: cover; }
.fpic.none { display: grid; place-items: center; align-content: center; gap: 2px; background: linear-gradient(150deg, #fde8f0, #fbf1dc); border-color: #f1c9d8; color: #ad3363; }
.fpic.none svg { width: 28px; height: 28px; fill: none; stroke: currentColor; stroke-width: 1.7; stroke-linecap: round; stroke-linejoin: round; }
.fpic.none span { font-size: 11px; font-weight: 800; color: #8a3a5a; }
.fpic.big { width: 84px; height: 84px; }
.fair-banner { display: block; width: 100%; max-height: 220px; object-fit: contain; background: var(--bg); border-radius: 14px; margin-bottom: 14px; }
.credit { margin: -8px 0 12px; font-size: 11px; color: var(--muted); text-align: right; }
.credit a { color: inherit; }

/* 홈 머리: 검색·목록/지도 전환은 혜택 탭에만. 홈은 이름만 */
.brand { display: none; flex: 1; margin: 0; font-size: 24px; font-weight: 900; letter-spacing: -.04em; color: var(--pink-ink); }
.brand span { color: var(--rose); margin-left: 2px; }
.app[data-view="home"] .brand { display: block; }
.app[data-view="home"] .search, .app[data-view="home"] .toggle { display: none; }

/* 맨 위 배너 (홈 혜택 뉴스 배너: 사진 + 어두운 바탕, 제목 3줄까지, 넘겨 보기) */
.bn-sec { position: relative; padding: 16px 0 4px; }
.bn-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; }
.bn-track::-webkit-scrollbar { display: none; }
.bn { position: relative; flex: 0 0 100%; scroll-snap-align: center; height: 184px; padding: 0 16px; text-align: left; color: #fff; }
.bn img { position: absolute; inset: 0 16px; width: calc(100% - 32px); height: 100%; object-fit: cover; border-radius: 20px; }
.bn::after { content: ""; position: absolute; inset: 0 16px; border-radius: 20px; background: linear-gradient(180deg, rgba(40, 14, 26, .05) 20%, rgba(40, 14, 26, .78) 100%); }
.bn > span, .bn > strong { position: absolute; left: 34px; right: 34px; z-index: 1; }
.bn-k { top: 16px; left: 34px !important; right: auto !important; padding: 4px 10px; border-radius: 999px; background: rgba(255, 255, 255, .9); color: #a33b67; font-size: 12px; font-weight: 800; }
.bn-t { bottom: 38px; font-size: 20px; line-height: 1.3; letter-spacing: -.03em; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; text-wrap: balance; text-shadow: 0 1px 6px rgba(0, 0, 0, .25); }
.bn-s { bottom: 16px; font-size: 12.5px; opacity: .9; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.bn-page { position: absolute; right: 30px; bottom: 18px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(0, 0, 0, .45); color: #fff; font-size: 11px; font-weight: 700; font-variant-numeric: tabular-nums; pointer-events: none; }
.bn-sec .bn-s { right: 90px; }

/* 임산부 교실·행사 카드 아이콘 칸 */
.fpic.ev { background: linear-gradient(150deg, #efe6fb, #fde8f0); border-color: #dccbf1; color: #7a4fae; }
.fpic.ev span { color: #5e3a8a; font-size: 10px; letter-spacing: -.03em; }
.actions.one { grid-template-columns: 1fr; }

/* 업체 참고 사진 */
.thumb.photo { overflow: hidden; background: var(--chip); }
.thumb.photo img { display: block; width: 100%; height: 100%; object-fit: cover; }
.sheet .credit { margin: 14px 0 0; text-align: left; }

/* ================= 애플 홈페이지 스타일 (2026-10-23) =================
   색: 애플(흰색 #fff · 밝은 회색 #f5f5f7 · 글자 #1d1d1f · 보조 글자 #6e6e73)에 포인트 핑크.
   카키(올리브)는 제휴 업체 핀 고리에만 남긴다. */
:root {
  --bg: #f5f5f7; --surface: #ffffff; --text: #1d1d1f; --muted: #6e6e73; --line: #d2d2d7; --chip: #e8e8ed;
  --gold: #d63a6e; --gold-soft: #fde8ef; --gold-line: #f2a7c0; --cream: #fff0f5; --red: #e3366f;
  --olive: #1d1d1f; --olive-2: #f5f5f7; --olive-line: #d2d2d7;
  --pink: rgba(251, 251, 253, .86); --pink-2: #ffffff; --pink-line: #d2d2d7; --pink-ink: #1d1d1f; --pink-soft-ink: #6e6e73;
  --rose: #e3366f; --rose-ink: #ffffff; --tab-bg: rgba(251, 251, 253, .86);
  --tile-light: #f5f5f7; --tile-gap: #ffffff; --tile-sky: linear-gradient(180deg, #d9ecfb 0%, #edf6fd 100%); --sky-ink: #1f6fb5; --tile-mint: linear-gradient(180deg, #d3f5e7 0%, #e8faf2 100%); --tile-lilac: linear-gradient(180deg, #e6defe 0%, #f3effe 100%); --mint-ink: #17876a; --lilac-ink: #6a4fd6; --tile-dark: #000000; --tile-dark-ink: #f5f5f7; --tile-pink: linear-gradient(180deg, #fde3ec 0%, #fbe9ef 100%);
  --shadow: 0 4px 14px rgba(0, 0, 0, .08);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #000000; --surface: #1c1c1e; --text: #f5f5f7; --muted: #a1a1a6; --line: #38383a; --chip: #2c2c2e;
    --gold: #ff6f9c; --gold-soft: #3a1f2a; --gold-line: #7a3a52; --cream: #2a1820;
    --pink: rgba(22, 22, 23, .86); --pink-2: #1c1c1e; --pink-line: #38383a; --pink-ink: #f5f5f7; --pink-soft-ink: #a1a1a6;
    --rose: #ff4f86; --tab-bg: rgba(28, 28, 30, .86); --tile-light: #1c1c1e; --tile-gap: #3a3a3c; --tile-sky: linear-gradient(180deg, #24557e 0%, #1d3a55 100%); --sky-ink: #9fd0ff; --tile-mint: linear-gradient(180deg, #2f6b57 0%, #24453b 100%); --tile-lilac: linear-gradient(180deg, #54449a 0%, #3a3166 100%); --mint-ink: #9cf0d2; --lilac-ink: #d8ccff; --tile-pink: linear-gradient(180deg, #6e3150 0%, #4a2538 100%);
  }
}
:root[data-theme="dark"] {
  --bg: #000000; --surface: #1c1c1e; --text: #f5f5f7; --muted: #a1a1a6; --line: #38383a; --chip: #2c2c2e;
  --gold: #ff6f9c; --gold-soft: #3a1f2a; --gold-line: #7a3a52; --cream: #2a1820;
  --pink: rgba(22, 22, 23, .86); --pink-2: #1c1c1e; --pink-line: #38383a; --pink-ink: #f5f5f7; --pink-soft-ink: #a1a1a6;
  --rose: #ff4f86; --tab-bg: rgba(28, 28, 30, .86); --tile-light: #1c1c1e; --tile-gap: #3a3a3c; --tile-sky: linear-gradient(180deg, #24557e 0%, #1d3a55 100%); --sky-ink: #9fd0ff; --tile-mint: linear-gradient(180deg, #2f6b57 0%, #24453b 100%); --tile-lilac: linear-gradient(180deg, #54449a 0%, #3a3166 100%); --mint-ink: #9cf0d2; --lilac-ink: #d8ccff; --tile-pink: linear-gradient(180deg, #6e3150 0%, #4a2538 100%);
}
body { font-family: -apple-system, BlinkMacSystemFont, "SF Pro Display", "SF Pro Text", "Apple SD Gothic Neo", "Pretendard", "Noto Sans KR", sans-serif; letter-spacing: -.01em; }

/* 머리: 애플 글로벌 내비처럼 얇고 반투명 */
.top { background: var(--pink); backdrop-filter: saturate(180%) blur(20px); -webkit-backdrop-filter: saturate(180%) blur(20px); border-bottom: 1px solid rgba(0,0,0,.06); padding-top: calc(env(safe-area-inset-top) + 8px); padding-bottom: 8px; }
.brand { font-size: 21px; font-weight: 700; color: var(--text); letter-spacing: -.02em; }
.brand span { color: var(--rose); }
.badge { width: 36px; height: 36px; padding: 2px; background: linear-gradient(135deg, #ff8fb3, #e3366f); }
.badge span { background: var(--surface); color: var(--rose); font-size: 12px; }
.search { height: 40px; border-radius: 12px; background: var(--chip); border: 0; }
.search svg { color: var(--muted); }
.search input { color: var(--text); font-size: 16px; }
.search input::placeholder { color: var(--muted); }
.toggle { margin-top: 8px; background: var(--chip); border: 0; border-radius: 10px; padding: 2px; }
.toggle button { height: 34px; border-radius: 8px; font-size: 14px; font-weight: 600; color: var(--text); }
.toggle button.on { background: var(--surface); color: var(--text); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.app[data-view="fairs"] .search, .app[data-view="fairs"] .toggle,
.app[data-view="news"] .search, .app[data-view="news"] .toggle,
.app[data-view="events"] .search, .app[data-view="events"] .toggle { display: none; }
.app[data-view="fairs"] .brand, .app[data-view="news"] .brand, .app[data-view="events"] .brand { display: block; }

/* 애플 스토어 카테고리 알약 */
.chips button { height: 34px; padding: 0 14px; border: 0; background: var(--surface); color: var(--text); font-size: 14px; font-weight: 500; box-shadow: none; }
.chips button.on { background: var(--text); color: var(--bg); border: 0; font-weight: 600; }
.dday { background: var(--rose); }
.tag.gold { background: var(--gold-soft); color: var(--gold); }

/* 홈: 화면 폭 전체 타일, 사이 간격 12px(애플) */
.home-view { background: var(--surface); padding: 0 0 110px; }
.tiles { display: grid; gap: 12px; padding-top: 12px; background: var(--tile-gap, var(--bg)); }   /* 칸 사이 틈 — 바탕(#f5f5f7)이 밝은 칸과 같아 안 보여서 따로 */
.tile { position: relative; display: flex; flex-direction: column; align-items: center; overflow: hidden; min-height: 500px; padding: 48px 0 0; text-align: center; cursor: pointer; }
.tile.light { background: var(--tile-light); color: var(--text); }
.tile.dark { background: var(--tile-dark); color: var(--tile-dark-ink); }
.tile.pink { background: var(--tile-pink); color: var(--text); }
/* 홈에서 분홍(지원금)·민트(베이비페어)·라벤더(임산부 교실)가 이어지도록 서로 다른 색 */
.tile.mint { background: var(--tile-mint); color: var(--text); }
.tile.lilac { background: var(--tile-lilac); color: var(--text); }
.tile.mint .tile-eyebrow { color: var(--mint-ink); }
.tile.lilac .tile-eyebrow { color: var(--lilac-ink); }
.tile.ad { background: #fbfbfd; color: #1d1d1f; }
.tile-copy { position: relative; z-index: 1; padding: 0 max(24px, env(safe-area-inset-left, 0px)); max-width: 680px; }
.tile-eyebrow { margin: 0 0 6px; font-size: 14px; font-weight: 600; color: var(--rose); letter-spacing: 0; }
.tile.ad .tile-eyebrow { color: #86868b; font-weight: 500; }
.tile-h { margin: 0; font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; text-wrap: balance; }
.tile-sub { margin: 6px auto 0; max-width: 30em; font-size: 19px; line-height: 1.32; font-weight: 400; letter-spacing: .012em; text-wrap: balance;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tile-cta { display: flex; justify-content: center; gap: 14px; margin-top: 18px; flex-wrap: wrap; }
.pill { height: 36px; padding: 0 18px; border-radius: 980px; background: var(--rose); color: #fff; font-size: 15px; font-weight: 500; letter-spacing: -.01em; border: 1px solid var(--rose); }
.pill.ghost { background: transparent; color: var(--rose); }
.tile.dark .pill.ghost { color: #ff6f9c; border-color: #ff6f9c; }
.tile.ad .pill { background: #0071e3; border-color: #0071e3; }
.tile.ad .pill.ghost { background: transparent; color: #0066cc; border-color: #0066cc; }
.tile-media { position: relative; width: 100%; margin-top: 28px; flex: 1; min-height: 280px; }
.tile-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.tile-media.fade-dark::before { content: ""; position: absolute; inset: 0; z-index: 1; background: linear-gradient(180deg, #000 0%, rgba(0,0,0,0) 35%); }
@media (min-width: 735px) {
  .tile { min-height: 580px; padding-top: 56px; }
  .tile-h { font-size: 48px; line-height: 1.08; }
  .tile-sub { font-size: 24px; }
  .tile-media { min-height: 340px; }
}
@media (min-width: 1069px) {
  .tile { min-height: 692px; }
  .tile-h { font-size: 56px; line-height: 1.07; letter-spacing: -.005em; }
  .tile-sub { font-size: 28px; line-height: 1.14; }
  .pill { height: 40px; font-size: 17px; padding: 0 22px; }
}

/* 하위 화면 (베이비페어 · 정부 소식 · 임산부 교실): 애플 스토어 화면 */
.sub-view { flex: 1; overflow-y: auto; display: none; background: var(--bg); padding: 0 var(--wide) 110px; }
.app[data-view="fairs"] #fairsView, .app[data-view="news"] #newsView, .app[data-view="events"] #eventsView { display: block; }
.app[data-view="fairs"] .list-view, .app[data-view="news"] .list-view, .app[data-view="events"] .list-view { display: none; }
.sub-top { padding: 12px max(20px, env(safe-area-inset-left, 0px)) 0; }
.back { color: var(--rose); font-size: 17px; font-weight: 400; padding: 6px 0; }
.store-h { margin: 8px 0 18px; padding: 0 max(20px, env(safe-area-inset-left, 0px)); font-size: 32px; line-height: 1.125; font-weight: 600; letter-spacing: .004em; color: var(--muted); text-wrap: balance; }
.store-h b { color: var(--text); font-weight: 600; }
.sub-view .chips { padding: 0 20px 8px; }
.sub-view .panel { margin: 4px 20px 0; border: 0; border-radius: 18px; }
.sub-view .sec-desc { margin: 18px 20px; }
.shelf { padding: 22px 0 6px; }
.shelf-h { margin: 0 0 14px; padding: 0 20px; font-size: 22px; line-height: 1.2; font-weight: 600; color: var(--muted); letter-spacing: .009em; }
.shelf-h b { color: var(--text); font-weight: 600; }
.shelf-row { display: flex; gap: 16px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 4px 20px 26px; scrollbar-width: none; }
.shelf-row::-webkit-scrollbar { display: none; }
.scard { flex: 0 0 min(78vw, 340px); scroll-snap-align: start; display: flex; flex-direction: column; align-items: flex-start; height: 480px; padding: 28px 28px 0; border-radius: 18px; background: var(--surface); box-shadow: 2px 4px 12px rgba(0, 0, 0, .08); text-align: left; overflow: hidden; color: var(--text); transition: transform .3s cubic-bezier(0,0,.5,1), box-shadow .3s; }
.scard:hover { transform: scale(1.01); box-shadow: 2px 4px 16px rgba(0, 0, 0, .16); }
.scard-tag { font-size: 12px; font-weight: 600; color: var(--rose); letter-spacing: 0; }
.scard-h { margin-top: 6px; font-size: 24px; line-height: 1.17; font-weight: 600; letter-spacing: .009em; text-wrap: balance; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.scard-s { margin-top: 8px; font-size: 14px; line-height: 1.43; color: var(--text); }
.scard-p { margin-top: 4px; font-size: 14px; color: var(--muted); }
.scard-media { position: relative; display: block; width: calc(100% + 56px); margin: 22px -28px 0; flex: 1; min-height: 180px; background: var(--bg); }
.scard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.scard-ph { position: absolute; inset: 0; display: grid; place-items: center; background: var(--tile-pink); color: var(--rose); }
.scard-ph svg { width: 56px; height: 56px; fill: none; stroke: currentColor; stroke-width: 1.4; stroke-linecap: round; stroke-linejoin: round; }

/* 하단 탭: 애플식 반투명 흰 막대, 선택은 핑크 */
.tabbar { border-color: rgba(0,0,0,.06); }
.tabbar button { color: var(--muted); }
.tabbar button.on { background: transparent; color: var(--rose); }
.tabbar button.on svg { stroke-width: 2; }
.write, .cmt-form button, .actions .primary { background: var(--rose); }
.tile-h, .tile-sub, .store-h, .shelf-h, .scard-h, .scard-s { word-break: keep-all; overflow-wrap: anywhere; }

/* 정부 소식 카드: 제목 아래 이미지, 그 아래 요약 */
.ncard { height: 470px; padding-bottom: 24px; }
.ncard .scard-h { -webkit-line-clamp: 3; font-size: 21px; line-height: 1.24; }
.ncard-media { position: relative; display: block; width: 100%; aspect-ratio: 4 / 3; max-width: 100%; margin-top: 16px; border-radius: 12px; overflow: hidden; background: var(--bg); flex: none; }
.ncard-media img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ncard-sum { margin-top: 14px; font-size: 14px; line-height: 1.45; color: var(--muted); display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; word-break: keep-all; }

/* 광고 제품 페이지 (애플 제품 페이지 구성) */
.app[data-view="ad"] #adView { display: block; }
.app[data-view="ad"] .list-view { display: none; }
.app[data-view="ad"] .search, .app[data-view="ad"] .toggle { display: none; }
.app[data-view="ad"] .brand { display: block; }
#adView { background: var(--surface); }
.ad-hero { text-align: center; padding: 20px 0 0; }
.ad-h { margin: 0; font-size: 40px; line-height: 1.1; font-weight: 600; letter-spacing: -.003em; word-break: keep-all; }
.ad-sub { margin: 8px 24px 0; font-size: 21px; line-height: 1.38; font-weight: 400; word-break: keep-all; }
.ad-price { margin: 10px 0 0; font-size: 14px; color: var(--muted); }
.ad-video { position: relative; margin: 28px auto 0; overflow: hidden; background: #000; }
.ad-video video { display: block; width: 100%; height: 100%; object-fit: cover; }
.ad-video.tall { width: min(100% - 40px, 420px); aspect-ratio: 9 / 14; border-radius: 28px; }
.ad-video.wide { width: 100%; aspect-ratio: 16 / 10; }
.ad-sec { padding: 72px 0 0; text-align: center; background: var(--surface); }
.ad-sec.dark { background: #000; color: #f5f5f7; padding-bottom: 0; margin-top: 72px; }
.ad-sec-h { margin: 0; padding: 0 24px; font-size: 32px; line-height: 1.125; font-weight: 600; word-break: keep-all; }
.ad-sec-sub { margin: 10px 24px 0; font-size: 17px; line-height: 1.47; color: var(--muted); word-break: keep-all; }
.ad-sec.dark .ad-sec-sub { color: #a1a1a6; }
.ad-feat { padding: 72px 0 8px; text-align: center; }
.ad-feat-row { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 12px; margin: 28px 20px 0; }
.ad-f { display: flex; flex-direction: column; gap: 4px; padding: 22px 10px; border-radius: 18px; background: var(--bg); }
.ad-f-k { font-size: 12px; font-weight: 600; color: var(--rose); }
.ad-f-v { font-size: 24px; font-weight: 600; letter-spacing: -.01em; }
.ad-f-d { font-size: 12px; color: var(--muted); line-height: 1.4; word-break: keep-all; }
.ad-credit { text-align: center; }
.tile-media video { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 735px) { .ad-h { font-size: 56px; } .ad-sub { font-size: 28px; } .ad-sec-h { font-size: 48px; } .ad-sec-sub { font-size: 21px; } }

/* 제품 무대: 애플 제품 영상처럼 제품만 — 천천히 돌고, 떠오르고, 빛이 스친다 */
.pstage { position: relative; display: block; width: 100%; height: 210px; margin-top: 18px; perspective: 700px; overflow: hidden; }
.pstage.big { height: 260px; max-width: 320px; margin: 18px auto 6px; }
.pfloat { position: absolute; inset: 8% 10% 16%; display: grid; place-items: center; transform-style: preserve-3d; animation: pturn 9s ease-in-out infinite alternate, pbob 4.5s ease-in-out infinite; }
.prod-svg, .pimg { width: 100%; height: 100%; object-fit: contain; }
.pimg { mix-blend-mode: multiply; }
.pshadow { position: absolute; left: 22%; right: 22%; bottom: 9%; height: 12px; border-radius: 50%; background: radial-gradient(closest-side, rgba(0,0,0,.22), rgba(0,0,0,0)); animation: pshadow 4.5s ease-in-out infinite; }
.psheen { position: absolute; inset: 0; background: linear-gradient(105deg, transparent 35%, rgba(255,255,255,.55) 48%, transparent 60%); transform: translateX(-120%); animation: psheen 6s ease-in-out infinite 1.2s; pointer-events: none; mix-blend-mode: soft-light; }
.stroller .pw { animation: pwheel 2.4s linear infinite; }
@keyframes pturn { from { transform: rotateY(-16deg) rotateX(3deg); } to { transform: rotateY(16deg) rotateX(-2deg); } }
@keyframes pbob { 0%, 100% { translate: 0 0; } 50% { translate: 0 -7px; } }
@keyframes pshadow { 0%, 100% { transform: scaleX(1); opacity: 1; } 50% { transform: scaleX(.86); opacity: .7; } }
@keyframes psheen { 0%, 55% { transform: translateX(-120%); } 85%, 100% { transform: translateX(120%); } }
@keyframes pwheel { to { transform: rotate(360deg); } }
@media (prefers-reduced-motion: reduce) { .pfloat, .pshadow, .psheen, .stroller .pw { animation: none; } }
.pcard { height: 430px; background: #fff; color: #1d1d1f; }
.pcard .scard-s { color: #1d1d1f; } .pcard .scard-p { color: #6e6e73; }
.tile-stage { display: flex; justify-content: center; gap: 8px; width: 100%; max-width: 560px; margin-top: 18px; padding: 0 12px 24px; }
.tile-stage .pstage { flex: 1; height: 220px; margin: 0; }
.pdetail { text-align: center; }
.pd-h { font-size: 28px !important; font-weight: 600; margin-top: 2px !important; }
.pd-sub { margin: 6px 0 0; font-size: 17px; color: var(--muted); }
.pdetail .ad-feat-row { margin: 14px 0 0; }
.pdetail .ad-f { background: var(--bg); }
.pdetail .tile-cta { margin-top: 16px; }

/* 더보기: iOS 설정 목록 */
.app[data-view="more"] #moreView { display: block; }
.app[data-view="more"] .list-view { display: none; }
.app[data-view="more"] .search, .app[data-view="more"] .toggle { display: none; }
.app[data-view="more"] .brand { display: block; }
.mgroup { padding: 0 20px 22px; }
.mgroup-h { margin: 0 0 8px 16px; font-size: 13px; font-weight: 400; color: var(--muted); }
.mlist { background: var(--surface); border-radius: 12px; overflow: hidden; }
.mrow { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 0 14px; text-align: left; color: var(--text); font-size: 17px; }
.mrow { position: relative; }
.mrow + .mrow::before { content: ""; position: absolute; top: 0; left: 60px; right: 0; border-top: 1px solid var(--line); }
.mico { flex: none; width: 34px; height: 34px; display: grid; place-items: center; }
.mico svg { width: 34px; height: 34px; filter: drop-shadow(0 1px 1.5px rgba(0,0,0,.18)); }
.mico-line { fill: none; stroke: var(--rose); stroke-width: 1.9; stroke-linecap: round; stroke-linejoin: round; }
.mrow { min-height: 54px; }
.mlabel { flex: 1; align-self: stretch; display: flex; align-items: center; min-width: 0; }
.mval { align-self: stretch; display: flex; align-items: center; color: var(--muted); font-size: 16px; }
.mchev { align-self: stretch; display: flex; align-items: center; padding-left: 8px; color: #c4c4c7; font-size: 22px; }

/* 지도 아래 업체 카드: 글자 길이만큼만 넓어지고(최대 화면의 88%), 왼쪽에 업체 사진 */
.carousel { align-items: flex-end; }
.mcard { flex: 0 0 auto; width: max-content; min-width: 220px; max-width: min(88vw, 440px); display: flex; gap: 12px; align-items: center; padding: 12px 14px 12px 12px; }
.mcard .thumb { width: 64px; height: 64px; border-radius: 12px; }
.mcard-body { min-width: 0; flex: 1; }
.mcard .top-line { gap: 6px; }
.mcard .name { font-size: 16px; font-weight: 700; line-height: 1.3; }
.mcard .perk { font-size: 14px; line-height: 1.4; margin-top: 2px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.mcard .tagrow { margin-top: 6px; gap: 4px; }
.mcard .tag { font-size: 11px; padding: 3px 7px; }
.mcard .star svg { width: 18px; height: 18px; }

/* 쇼핑: 경유 적립 */
.store-h2 { margin: 26px 0 12px; padding: 0 20px; font-size: 22px; font-weight: 600; color: var(--muted); word-break: keep-all; }
.store-h2 b { color: var(--text); font-weight: 600; }
.pcardx { margin: 0 20px; padding: 20px; border-radius: 22px; color: #fff; background: linear-gradient(135deg, #ff7aa2 0%, #e3366f 55%, #a3124a 100%); box-shadow: 0 10px 28px rgba(227, 54, 111, .28); }
.pc-top { display: flex; justify-content: space-between; align-items: center; font-size: 14px; font-weight: 600; opacity: .92; }
.pc-link { color: #fff; font-size: 14px; opacity: .9; }
.pc-num { display: block; margin-top: 6px; font-size: 40px; font-weight: 700; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.pc-num small { font-size: 20px; margin-left: 3px; font-weight: 600; }
.pc-sub { font-size: 13px; opacity: .88; }
.pc-btns { display: flex; gap: 10px; margin-top: 16px; }
.pcardx .pill { background: #fff; color: #c2185b; border-color: #fff; }
.pcardx .pill.ghost.light { background: transparent; color: #fff; border-color: rgba(255,255,255,.8); }
.attend { display: flex; align-items: center; gap: 12px; margin: 12px 20px 0; padding: 14px 16px; border-radius: 16px; background: var(--surface); }
.attend > div { flex: 1; min-width: 0; display: grid; gap: 2px; }
.attend b { font-size: 16px; }
.attend span { font-size: 13px; color: var(--muted); word-break: keep-all; }
.attend .pill[disabled] { opacity: .6; }
.sgrid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px 8px; margin: 0 20px; padding: 18px 10px; border-radius: 18px; background: var(--surface); }
.sitem { display: flex; flex-direction: column; align-items: center; gap: 4px; color: var(--text); }
.stile { display: grid; place-items: center; width: 54px; height: 54px; border-radius: 16px; background: var(--c); color: #fff; font-size: 15px; font-weight: 800; letter-spacing: -.04em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), inset 0 -8px 16px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.12); }
.stile.big { width: 72px; height: 72px; border-radius: 20px; font-size: 20px; margin: 4px auto 0; }
.sname { font-size: 12px; font-weight: 600; white-space: nowrap; }
.srate { font-size: 12px; font-weight: 700; color: var(--rose); }
.via-tips { margin: 14px 0 0; padding: 14px 16px 14px 32px; border-radius: 14px; background: var(--bg); text-align: left; font-size: 14px; line-height: 1.55; color: var(--text); }
.via-tips li + li { margin-top: 4px; }
.pill.wide { display: flex; align-items: center; justify-content: center; width: 100%; height: 48px; margin-top: 16px; text-decoration: none; font-size: 17px; }
.hrow { display: flex; align-items: center; gap: 12px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.hrow .stile { width: 40px; height: 40px; border-radius: 12px; font-size: 12px; }
.hrow .info { flex: 1; min-width: 0; }
.hstat { font-size: 13px; color: var(--muted); }
.hrow .pill { height: 32px; font-size: 14px; padding: 0 14px; }
.via-steps { margin: 12px 0 0; padding-left: 22px; display: grid; gap: 12px; }
.via-steps li b { display: block; font-size: 16px; }
.via-steps li span { font-size: 14px; color: var(--muted); }
.stile.img { background: none; overflow: hidden; box-shadow: 0 0 0 .5px rgba(0,0,0,.12), 0 3px 8px rgba(0,0,0,.12); }
.stile.img img { display: block; width: 100%; height: 100%; object-fit: cover; }

/* 아래 탭: iOS 26 리퀴드 글래스처럼 반투명 유리 + 오른쪽 돋보기 버튼 + 누르고 밀면 따라오는 돋보기 렌즈 */
:root { --glass: rgba(255, 255, 255, .14); --glass-line: rgba(255, 255, 255, .6); --glass-hi: rgba(255, 255, 255, .75); --glass-pill: rgba(255, 255, 255, .55); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glass: rgba(44, 44, 48, .16); --glass-line: rgba(255, 255, 255, .14); --glass-hi: rgba(255, 255, 255, .18); --glass-pill: rgba(255, 255, 255, .14); } }
:root[data-theme="dark"] { --glass: rgba(44, 44, 48, .16); --glass-line: rgba(255, 255, 255, .14); --glass-hi: rgba(255, 255, 255, .18); --glass-pill: rgba(255, 255, 255, .14); }
.dock { position: absolute; left: 0; right: 0; bottom: calc(env(safe-area-inset-bottom) + 10px); z-index: 1002; display: flex; justify-content: center; align-items: center; gap: 10px;
  padding: 0 max(12px, env(safe-area-inset-left, 0px)) 0 max(12px, env(safe-area-inset-right, 0px)); pointer-events: none; }
.dock > * { pointer-events: auto; }
.tabbar { background: var(--glass); backdrop-filter: blur(9px) saturate(180%); -webkit-backdrop-filter: blur(9px) saturate(180%);
  border: 1px solid var(--glass-line); box-shadow: inset 0 1px 0 var(--glass-hi), inset 0 -1px 1px rgba(0,0,0,.04), 0 8px 24px rgba(0,0,0,.10); }
.tabbar { position: relative; left: auto; bottom: auto; transform: none; flex: 1; width: auto; max-width: 400px; border-radius: 32px; overflow: hidden; touch-action: none; user-select: none; -webkit-user-select: none; }
.tabbar { overflow: visible; }
.tabbar button { position: relative; z-index: 1; color: var(--text); background: transparent !important; box-shadow: none !important; transition: opacity .15s; }
.tabbar button.on { color: var(--rose); }
.tabbar button.lensed { opacity: 0; }   /* 렌즈 아래 원래 아이콘은 숨기고, 렌즈 안 확대본만 보인다 */
/* 선택 알약 ↔ 유리 렌즈 (한 요소가 모양을 바꾼다) */
.tpill { position: absolute; left: 0; top: 0; z-index: 0; border-radius: 999px; pointer-events: none; will-change: transform, width, height;
  background: var(--pill-bg); box-shadow: inset 0 1px 0 var(--glass-hi); transition: background .25s, box-shadow .25s; }
.tpill.none { opacity: 0; }
.tpill-mag { position: absolute; left: 0; top: 0; display: none; pointer-events: none; }
.tpill-btn { position: absolute; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; font-size: 12px; font-weight: 600; color: var(--text); }
.tpill-btn.on { color: var(--rose); }
.tpill-btn svg { width: 24px; height: 24px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.tpill-btn.on svg { stroke-width: 2; }
.tpill-rim { position: absolute; inset: 0; border-radius: inherit; opacity: 0; transition: opacity .2s; pointer-events: none; }
/* 누른 동안: 맑은 유리 + 가장자리 무지개빛 굴절 + 위쪽 하이라이트 */
.tpill.lens { z-index: 3; overflow: hidden; background: var(--lens-fill);
  backdrop-filter: blur(5px) saturate(180%) brightness(1.08); -webkit-backdrop-filter: blur(5px) saturate(180%) brightness(1.08);
  box-shadow: 0 8px 22px rgba(0,0,0,.16), 0 2px 6px rgba(0,0,0,.08); }
.tpill.lens .tpill-mag { display: block; }
.tpill-warp { position: absolute; inset: 0; border-radius: inherit; overflow: hidden; }
.tpill.lens .tpill-warp { filter: url(#tlensWarp); }

.tpill.lens .tpill-rim { opacity: 1;
  /* 맑은 유리 테두리: 위는 밝게 빛나고 아래로 갈수록 옅어지는 흰 띠 (색 없음) */
  background: linear-gradient(180deg, rgba(255,255,255,.95), rgba(255,255,255,.35) 45%, rgba(255,255,255,.15) 60%, rgba(255,255,255,.7));
  padding: 2px; -webkit-mask: linear-gradient(#000 0 0) content-box, linear-gradient(#000 0 0); -webkit-mask-composite: xor; mask: linear-gradient(#000 0 0) content-box exclude, linear-gradient(#000 0 0); filter: blur(.4px); }
/* 렌즈 안쪽 선(고리)은 두지 않는다 — 테두리 빛만 */
:root { --pill-bg: rgba(0, 0, 0, .07); --lens-fill: rgba(255, 255, 255, .18); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --pill-bg: rgba(255, 255, 255, .14); --lens-fill: rgba(255, 255, 255, .06); } }
:root[data-theme="dark"] { --pill-bg: rgba(255, 255, 255, .14); --lens-fill: rgba(255, 255, 255, .06); }
/* 혜택 타일: 업체 이미지 세 장을 나란히 (가운데를 조금 크게) */
.tile-collage { display: grid; grid-template-columns: 1fr 1.25fr 1fr; align-items: center; gap: 10px; width: 100%; max-width: 720px; margin-top: 28px; padding: 0 16px 36px; }
.tile-collage img { width: 100%; aspect-ratio: 3 / 4; object-fit: cover; border-radius: 18px; box-shadow: 0 10px 28px rgba(0,0,0,.35); }
.tile-collage img:nth-child(2) { aspect-ratio: 3 / 4.4; }

/* 내 위치: 숨 쉬듯 퍼지는 파란 점 + 바라보는 방향 부채꼴 */
.me-dot { position: relative; width: 22px; height: 22px; border-radius: 50%; background: #2f7cf6; border: 3px solid #fff; box-shadow: 0 1px 4px rgba(0,0,0,.35); }
.me-dot::after { content: ""; position: absolute; inset: -3px; border-radius: 50%; background: rgba(47,124,246,.35); animation: mepulse 2s ease-out infinite; z-index: -1; }
.me-dot i { display: none; }
.me-dot.has-head i { display: block; position: absolute; left: 50%; top: 50%; width: 46px; height: 46px; margin: -23px 0 0 -23px; z-index: -2; transform: rotate(var(--h));
  background: conic-gradient(from -30deg, rgba(47,124,246,.45), rgba(47,124,246,0) 60deg, transparent 0); border-radius: 50%; -webkit-mask: radial-gradient(circle, #000 60%, transparent 61%); mask: radial-gradient(circle, #000 60%, transparent 61%); }
@keyframes mepulse { 0% { transform: scale(1); opacity: .9; } 100% { transform: scale(3.2); opacity: 0; } }
@media (prefers-reduced-motion: reduce) { .me-dot::after { animation: none; } }

/* 지도 위 현재 동네 · 정확도 */
.loc-chip { position: absolute; left: 12px; top: 62px; z-index: 600; display: inline-flex; align-items: center; gap: 6px; padding: 7px 12px; border-radius: 999px;
  background: var(--glass); backdrop-filter: blur(18px) saturate(180%); -webkit-backdrop-filter: blur(18px) saturate(180%); border: 1px solid var(--glass-line);
  box-shadow: 0 4px 14px rgba(0,0,0,.12); font-size: 13px; font-weight: 600; color: var(--text); max-width: calc(100% - 90px); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.loc-chip small { color: var(--muted); font-weight: 500; }
.loc-dot { flex: none; width: 9px; height: 9px; border-radius: 50%; background: #2f7cf6; box-shadow: 0 0 0 3px rgba(47,124,246,.25); }
.loc-note { display: inline-flex; align-items: center; gap: 6px; margin-left: auto; font-size: 13px; color: var(--muted); }

/* 지도 '내 위치' 버튼 3단계: 꺼짐(회색) → 켜짐(파란 테두리) → 따라가는 중(파랗게 채움) */
.fab.locate { color: var(--muted); }
.fab.locate.on { color: #2f7cf6; }
.fab.locate.follow { background: #2f7cf6; color: #fff; }
.loc-consent .loc-ico svg { width: 64px; height: 64px; display: block; margin: 4px auto 6px; }
.loc-consent .via-tips b { color: var(--text); }

/* 혜택 타일: 가까운 업체 10곳 사진첩 (양쪽으로 끝없이, 3초마다 한 칸) */
.tile-near { display: inline-flex; align-items: center; gap: 6px; margin: 10px 0 0; font-size: 14px; color: #a1a1a6; }
.hc { position: relative; width: 100%; margin-top: 26px; padding-bottom: 30px; }
.hc-track { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 6px 0 4px; }
.hc-track::-webkit-scrollbar { display: none; }
.hc-slide { position: relative; flex: 0 0 min(62vw, 300px); aspect-ratio: 3 / 4; scroll-snap-align: center; border-radius: 20px; overflow: hidden; box-shadow: 0 12px 30px rgba(0,0,0,.4); }
.hc-slide img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.hc-cap { position: absolute; left: 0; right: 0; bottom: 0; padding: 30px 14px 12px; text-align: left; color: #fff; font-size: 12px; line-height: 1.35;
  background: linear-gradient(180deg, rgba(0,0,0,0), rgba(0,0,0,.72)); }
.hc-cap b { display: block; font-size: 15px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-hint { margin-top: 14px; padding: 8px 14px; border-radius: 999px; background: rgba(255,255,255,.12); color: #f5f5f7; font-size: 13px; }
/* 사진첩 모양: 가운데 한 장이 크고 양옆은 작게 (초안의 3장 구성) */
.hc-track { gap: 0; padding: 14px 0 10px; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; }
.hc-slide { flex: 0 0 min(46vw, 260px); margin: 0 -2px; transform-origin: center center; transition: transform .08s linear, opacity .08s linear; }
.hc-slide .hc-cap { opacity: 0; transition: opacity .2s; }
.hc-slide.mid .hc-cap { opacity: 1; }
/* 왼쪽 위 '응애' 로고 (유리 물방울 + 돋보기) */
.brand { line-height: 0; }
.brand .logo { display: block; height: 36px; width: auto; overflow: visible; }
/* 로고 링 색: 밝은 화면은 진한 샴페인 금속, 어두운 화면은 밝은 진주빛 */
:root { --logo-a: #7a6a4f; --logo-b: #b89f72; --logo-c: #6f7f98; --logo-hi: #ffffff; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --logo-a: #d8c9a8; --logo-b: #f3e9d2; --logo-c: #b9c7dc; --logo-hi: #ffffff; } }
:root[data-theme="dark"] { --logo-a: #d8c9a8; --logo-b: #f3e9d2; --logo-c: #b9c7dc; --logo-hi: #ffffff; }
/* 왼쪽 위: 앱 아이콘 + '응애' (가볍고 깔끔한 서체) */
.logo-lockup { display: inline-flex; align-items: center; gap: 9px; line-height: 1; }
.logo-lockup .app-icon { display: block; border-radius: 22%; box-shadow: 0 1px 3px rgba(0,0,0,.25); }
.logo-word { font-family: -apple-system, "SF Pro Display", "Apple SD Gothic Neo", "Pretendard", sans-serif; font-size: 20px; font-weight: 600; letter-spacing: -.02em; color: var(--text); }
.brand .logo { display: none; }
.brand .logo-lockup span.logo-word { color: var(--text); margin-left: 0; }

/* 머리 오른쪽 위: 줄 세 개 → 더보기 */
.menu-btn { flex: none; width: 36px; height: 36px; display: grid; place-items: center; border-radius: 50%; color: var(--text); }
.menu-btn svg { width: 22px; height: 22px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; }
.menu-btn:active { background: var(--chip); }
.app[data-view="more"] .menu-btn { color: var(--rose); }

/* 산모수첩 */
.app[data-view="note"] #noteView { display: block; }
.app[data-view="note"] .list-view { display: none; }
.app[data-view="note"] .search, .app[data-view="note"] .toggle { display: none; }
.app[data-view="note"] .brand { display: block; }
#noteBody { display: grid; gap: 14px; padding: 0 20px 24px; }
.nb-card { background: var(--surface); border-radius: 18px; padding: 22px 20px; }
.nb-eyebrow { margin: 0 0 4px; font-size: 13px; font-weight: 600; color: var(--rose); }
.nb-h { margin: 0; font-size: 24px; font-weight: 600; letter-spacing: .004em; text-wrap: balance; }
.nb-sub { margin: 6px 0 0; color: var(--muted); font-size: 15px; line-height: 1.45; }
.nb-sub b { color: var(--text); font-weight: 600; }
.nb-big { margin: 2px 0 0; font-size: 56px; line-height: 1.05; font-weight: 600; letter-spacing: -.02em; font-variant-numeric: tabular-nums; }
.nb-big small { font-size: 24px; font-weight: 500; margin: 0 4px 0 2px; color: var(--muted); }
.nb-bar { position: relative; height: 8px; margin-top: 18px; border-radius: 99px; background: var(--chip); overflow: hidden; }
.nb-bar i { position: absolute; inset: 0 auto 0 0; border-radius: 99px; background: linear-gradient(90deg, #ff8fb3, var(--rose)); }
.nb-bar span { position: absolute; top: 0; bottom: 0; width: 2px; background: var(--surface); }
.nb-bar-l { display: grid; grid-template-columns: 35fr 35fr 30fr; margin-top: 6px; font-size: 12px; color: var(--muted); }
.nb-link { margin-top: 14px; color: var(--rose); font-size: 15px; }
.nb-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-bottom: 10px; }
.nb-head h3 { margin: 0; font-size: 19px; font-weight: 600; }
.nb-head span { font-size: 12px; color: var(--muted); }
.nb-steps { list-style: none; margin: 0; padding: 0; }
.nb-step { position: relative; display: grid; grid-template-columns: 18px 1fr auto; gap: 12px; align-items: start; padding: 11px 0; }
.nb-step + .nb-step { border-top: 1px solid var(--line); }
.nb-step b { display: block; font-size: 15px; font-weight: 600; }
.nb-step div span { display: block; margin-top: 2px; font-size: 13px; color: var(--muted); }
.nb-step em { font-style: normal; text-align: right; font-size: 13px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.nb-step em small { display: block; font-weight: 400; font-size: 12px; }
.nb-dot { width: 10px; height: 10px; margin: 5px 0 0 4px; border-radius: 50%; border: 2px solid var(--line); }
.nb-step.now .nb-dot { border-color: var(--rose); background: var(--rose); box-shadow: 0 0 0 4px var(--gold-soft); }
.nb-step.now em { color: var(--rose); }
.nb-step.done { opacity: .5; }
.nb-step.done .nb-dot { border-color: var(--muted); background: var(--muted); }
.nb-btn { height: 40px; padding: 0 18px; border-radius: 99px; background: var(--chip); color: var(--text); font-size: 15px; font-weight: 500; }
.nb-btn.primary { width: 100%; height: 48px; margin-top: 16px; background: var(--rose); color: var(--rose-ink); font-weight: 600; }
.nb-btn.small { height: 32px; padding: 0 14px; font-size: 14px; color: var(--rose); }
.nb-field { display: grid; gap: 6px; margin-top: 14px; font-size: 13px; color: var(--muted); }
.nb-field input, .nb-field textarea { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; box-sizing: border-box; }
.nb-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.nb-or { margin: 12px 0 0; text-align: center; font-size: 13px; color: var(--muted); }
.nb-fine { margin: 12px 0 0; font-size: 12px; color: var(--muted); }
.nb-empty { margin: 4px 0 0; color: var(--muted); font-size: 14px; }
.nb-recs { list-style: none; margin: 0; padding: 0; }
.nb-rec { display: grid; grid-template-columns: 64px 1fr 28px; gap: 10px; align-items: start; padding: 12px 0; }
.nb-rec + .nb-rec { border-top: 1px solid var(--line); }
.nb-rec-d b { display: block; font-size: 15px; font-weight: 600; }
.nb-rec-d span { font-size: 12px; color: var(--muted); }
.nb-rec-b { min-width: 0; }
.nb-rec-b p { margin: 0; font-size: 14px; }
.nb-rec-b p.m { margin-top: 3px; color: var(--muted); white-space: pre-wrap; overflow-wrap: anywhere; }
.nb-x { width: 28px; height: 28px; border-radius: 50%; color: var(--muted); font-size: 18px; }
.nb-perk { cursor: pointer; background: var(--tile-pink); }
.nb-perk h3 { margin: 0; font-size: 21px; font-weight: 600; }

/* 쇼핑: 적립 쇼핑 영역과 '추천 육아용품' 광고 사이 구분선 */
/* 광고 영역은 회색 바탕(애플 스토어처럼) 위에 흰 제품 카드 — 라이트 모드에서도 카드가 떠 보이게 */
#adView { padding-bottom: 0; }
#adPage { margin-top: 28px; padding: 4px 0 120px; background: var(--bg); border-top: 1px solid var(--line); }
#adPage #adMore { margin-top: 26px; }
#adPage .pcard { box-shadow: 0 2px 10px rgba(0, 0, 0, .06); }

/* 산모수첩 › 임신 · 접종·검진 · 성장곡선 */
.nb-tabs { display: grid; grid-template-columns: repeat(3, 1fr); gap: 2px; margin: 0 20px 14px; padding: 2px; border-radius: 10px; background: var(--chip); }
.nb-tabs button { height: 32px; border-radius: 8px; font-size: 14px; font-weight: 500; color: var(--text); }
.nb-tabs button.on { background: var(--surface); box-shadow: 0 1px 4px rgba(0,0,0,.12); font-weight: 600; }
.nb-seg2 { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin-top: 14px; }
.nb-seg2 button { height: 44px; border-radius: 12px; border: 1px solid var(--line); color: var(--text); font-size: 15px; }
.nb-seg2 button.on { border-color: var(--rose); background: var(--gold-soft); color: var(--rose); font-weight: 600; }
.nb-seg2.need button { border-color: var(--rose); }
.nb-baby { display: flex; align-items: center; justify-content: space-between; gap: 12px; padding: 18px 20px; }
.nb-baby .nb-h span { color: var(--muted); font-weight: 500; font-size: 18px; margin-left: 4px; }
.nb-baby .nb-link { margin: 0; }
.nb-hero2 h3 { margin: 0; font-size: 21px; font-weight: 600; }
.nb-bar-l2 { margin-top: 6px; font-size: 12px; color: var(--muted); text-align: right; }
.nb-step[data-shot] { cursor: pointer; }
.nb-step.late .nb-dot { border-color: #ff9f0a; background: #ff9f0a; }
.nb-step.late em { color: #c96a00; }
.nb-step.done em { color: var(--muted); }
.nb-dot.sq { border-radius: 3px; }
.nb-upbtns { display: flex; gap: 8px; margin-top: 14px; }
.nb-upbtns .nb-btn { flex: 1; height: 46px; display: grid; place-items: center; margin: 0; }
.nb-file { cursor: pointer; }
.nb-chips { display: flex; gap: 6px; }
.nb-chips button { height: 30px; padding: 0 12px; border-radius: 99px; background: var(--chip); color: var(--text); font-size: 13px; }
.nb-chips button.on { background: var(--text); color: var(--surface); }
.gsums { display: grid; grid-template-columns: repeat(auto-fit, minmax(90px, 1fr)); gap: 10px; }
.gsum { display: grid; gap: 2px; }
.gsum span { font-size: 12px; color: var(--muted); }
.gsum b { font-size: 24px; font-weight: 600; font-variant-numeric: tabular-nums; }
.gsum b small { font-size: 13px; font-weight: 500; color: var(--muted); margin-left: 2px; }
.gsum em { font-style: normal; font-size: 12px; color: var(--rose); }
.gchart { display: block; width: 100%; height: auto; margin-top: 4px; }
.ggrid line { stroke: var(--line); stroke-width: .6; }
.ggrid text, .gaxis { fill: var(--muted); font-size: 9px; }
.gb1 { fill: var(--rose); opacity: .08; }
.gb2 { fill: var(--rose); opacity: .14; }
.g50 { fill: none; stroke: var(--rose); stroke-width: 1.4; opacity: .7; }
.gp { fill: var(--rose); font-size: 8px; opacity: .8; }
.gline { fill: none; stroke: var(--text); stroke-width: 1.6; }
.gdots circle { fill: var(--surface); stroke: var(--text); stroke-width: 2; }
.nb-thumb { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; cursor: zoom-in; }
.nb-rec .pc { color: var(--rose); font-size: 12px; }
.nb-prev { display: block; width: 100%; max-height: 50vh; object-fit: contain; border-radius: 12px; background: var(--bg); }
.nb-grid3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 8px; }
.nb-grid3 .nb-field span { font-size: 12px; }
.late-t { color: #c96a00; }
.nb-where { display: inline-block !important; margin-top: 5px !important; padding: 2px 8px; border-radius: 6px; background: var(--chip); color: var(--text) !important; font-size: 12px !important; }
.nb-wherebox { display: grid; gap: 3px; margin-top: 14px; padding: 14px; border-radius: 12px; background: var(--bg); text-align: left; }
.nb-wherebox b { font-size: 12px; color: var(--muted); font-weight: 500; }
.nb-wherebox strong { font-size: 17px; font-weight: 600; }
.nb-wherebox span { font-size: 13px; color: var(--muted); line-height: 1.45; }
.nb-findlinks a { color: var(--rose); text-decoration: none; font-size: 14px; }

/* 산모수첩 모바일 가로 넘침 방지 — iOS Safari는 날짜 입력칸이 기본 너비 아래로 줄지 않고, 그리드 칸(min-width:auto)이 내용만큼 늘어난다 */
#noteView { overflow-x: hidden; }
@supports (overflow: clip) { #noteView { overflow-x: clip; } }
#noteBody, #noteBody > *, .nb-card, .nb-field, .nb-grid > *, .nb-grid3 > *, .nb-step > div, .nb-rec > *, .nb-head > *, .gsum { min-width: 0; }
.nb-field input, .nb-field textarea { max-width: 100%; min-width: 0; }
.nb-field input[type="date"] { -webkit-appearance: none; appearance: none; display: block; width: 100%; min-width: 0; text-align: left; line-height: 24px; }
.nb-field input[type="date"]::-webkit-date-and-time-value { text-align: left; }
.nb-step b, .nb-step div span, .nb-rec-b p, .nb-h, .nb-sub { overflow-wrap: anywhere; word-break: keep-all; }
.nb-step em { max-width: 34vw; white-space: normal; }
.nb-grid3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.nb-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
.nb-head { flex-wrap: wrap; }
.nb-chips { flex-wrap: wrap; }
.nb-upbtns .nb-btn { min-width: 0; }
.nb-big { font-size: clamp(40px, 14vw, 56px); }
#sheet { max-width: 100vw; overflow-x: hidden; box-sizing: border-box; }

/* 우리 동네 지원금 */
.app[data-view="support"] #supportView { display: block; }
.app[data-view="support"] .list-view { display: none; }
.app[data-view="support"] .search, .app[data-view="support"] .toggle { display: none; }
.app[data-view="support"] .brand { display: block; }
#supportBody { display: grid; gap: 14px; padding: 0 20px 24px; }
.sup-head { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; }
.sup-head-btns { display: flex; gap: 6px; }
.sup-list { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
.sup-list li { position: relative; padding-left: 14px; font-size: 15px; line-height: 1.45; overflow-wrap: anywhere; word-break: keep-all; }
.sup-list li::before { content: ""; position: absolute; left: 0; top: .62em; width: 6px; height: 6px; border-radius: 50%; background: var(--rose); }
.sup-scope { display: inline-block; margin-right: 6px; padding: 1px 7px; border-radius: 6px; background: var(--chip); color: var(--muted); font-size: 11px; font-weight: 600; vertical-align: 1px; }
.sup-fine { padding: 0 4px; line-height: 1.5; }
.sup-mini { cursor: pointer; }
.sup-mini .nb-head span { font-size: 13px; color: var(--rose); font-weight: 600; }
.reg-pick select { width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; }
.reg-pick .pill.wide { display: flex; align-items: center; justify-content: center; gap: 8px; width: 100%; margin-top: 14px; }
/* 홈 '우리 동네 지원금' 칸: 금액 카드 세 장 */
.tile-sup { display: grid; gap: 10px; width: 100%; max-width: 560px; margin: 26px auto 0; padding: 0 20px 40px; box-sizing: border-box; text-align: left; }
.tile-sup-card { display: grid; gap: 4px; padding: 16px 18px; border-radius: 18px; background: var(--surface); box-shadow: 0 6px 18px rgba(227, 54, 111, .08); }
.tile-sup-card span { font-size: 12px; font-weight: 600; color: var(--rose); }
.tile-sup-card b { font-size: 17px; font-weight: 600; line-height: 1.35; color: var(--text); word-break: keep-all; }

/* 홈 지원금 카드 3장: 가운데 크게, 양옆 작게 (끌어서 넘기기) */
.sup-car { width: 100%; margin-top: 26px; padding-bottom: 40px; }
.sup-track { --cw: min(74vw, 320px); display: flex; gap: 14px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; padding: 10px calc(50% - var(--cw) / 2) 14px; cursor: grab; }
.sup-track::-webkit-scrollbar { display: none; }
.sup-scard { flex: 0 0 var(--cw); height: 440px; scroll-snap-align: center; transition: transform .25s cubic-bezier(.2,.8,.3,1), opacity .25s, box-shadow .25s; transform-origin: center center; }
.sup-scard:hover { transform: none; }
.sup-scard.mid { box-shadow: 0 10px 28px rgba(0, 0, 0, .14); }
.sup-scard .scard-h { font-size: 22px; -webkit-line-clamp: 3; }
.sup-scard .scard-s { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; color: var(--text); }

/* 사는 지역 지도 */
.app[data-view="region"] #regionView { display: block; }
.app[data-view="region"] .list-view { display: none; }
.app[data-view="region"] .search, .app[data-view="region"] .toggle { display: none; }
.app[data-view="region"] .brand { display: block; }
#regionView { padding-bottom: calc(28px + env(safe-area-inset-bottom, 0px)); }
.app[data-view="region"] .dock { display: none; }
#rgSvg { height: max(340px, calc(100dvh - 360px)); }
.app[data-view="region"] .store-h { font-size: 22px; line-height: 1.3; padding-bottom: 8px; }
.rg-crumb { display: flex; align-items: center; gap: 6px; padding: 0 20px 6px; font-size: 14px; color: var(--muted); }
.rg-crumb button { padding: 4px 10px; border-radius: 99px; background: var(--chip); color: var(--text); font-size: 13px; }
.rg-crumb button.on { background: var(--text); color: var(--surface); }
.rg-crumb b { color: var(--rose); font-weight: 600; }
.rg-map { margin: 0 12px; border-radius: 22px; background: var(--surface); overflow: hidden; }
#rgSvg { display: block; width: 100%; touch-action: manipulation; --fs: 30; --k: 1; --lp: 11; }
.rg-sido { fill: var(--chip); stroke: var(--surface); stroke-width: calc(var(--fs) * .07); stroke-linejoin: round; cursor: pointer; transition: fill .2s, opacity .3s; }
.rg-sido:hover { fill: color-mix(in srgb, var(--rose) 18%, var(--chip)); }
.rg-sido.on { fill: var(--rose); }
.rg-sidos.dim .rg-sido { opacity: .35; }
.rg-inset-box { fill: none; stroke: var(--muted); stroke-opacity: .45; stroke-width: calc(var(--k) * 1px); stroke-dasharray: calc(var(--k) * 4px) calc(var(--k) * 3px); }
.rg-inset .rg-sido { vector-effect: non-scaling-stroke; stroke-width: 1px; }
.rg-sidos.dim .rg-sido.cur { opacity: 1; fill: var(--chip); }
.rg-muni { fill: color-mix(in srgb, var(--rose) 10%, var(--surface)); stroke: var(--rose); stroke-opacity: .45; stroke-width: calc(var(--fs) * .04); stroke-linejoin: round; cursor: pointer; transition: fill .2s; }
.rg-muni:hover { fill: color-mix(in srgb, var(--rose) 25%, var(--surface)); }
.rg-muni.on { fill: var(--rose); stroke: var(--surface); }
.rg-lab { font-size: calc(var(--k) * var(--lp) * 1px); font-weight: 600; fill: var(--text); text-anchor: middle; dominant-baseline: middle; paint-order: stroke; stroke: var(--surface); stroke-width: calc(var(--k) * 2.6px); cursor: pointer; }
.rg-lab.sm { font-weight: 500; letter-spacing: -.02em; }
.rg-lab.on { fill: var(--rose-ink); stroke: var(--rose); }
.rg-bottom { display: grid; gap: 10px; padding: 14px 20px 0; }
.rg-field { display: flex; align-items: center; gap: 10px; min-height: 52px; padding: 0 16px; border-radius: 14px; background: var(--surface); text-align: left; color: var(--text); }
.rg-field span { font-size: 13px; font-weight: 600; color: var(--rose); }
.rg-field b { flex: 1; font-size: 16px; font-weight: 600; }
.rg-field em { font-style: normal; font-size: 12px; color: var(--muted); }
.rg-actions { display: grid; grid-template-columns: 1fr; gap: 8px; }
.rg-actions .nb-btn { height: 50px; margin: 0; display: flex; align-items: center; justify-content: center; gap: 6px; }
.rg-actions .nb-btn.primary:disabled { opacity: .4; }
.rg-later { justify-self: center; }
.rg-credit { text-align: center; font-size: 11px; }

/* 시기별 혜택 알림 (산모수첩 '시기별 혜택' 탭 · 머리글 종) */
.nb-tabs { grid-template-columns: repeat(4, 1fr); }
.nb-tabs button { font-size: 13px; white-space: nowrap; }
.bell-btn { position: relative; }
.bell-badge { position: absolute; top: 2px; right: 1px; min-width: 16px; height: 16px; padding: 0 4px; border-radius: 99px; background: var(--rose); color: #fff; font-size: 10px; font-weight: 700; line-height: 16px; text-align: center; }
.pk-alarm h3 { margin: 2px 0 4px; font-size: 20px; }
.pk-btns { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0 6px; }
.pk-btns .nb-btn.on { background: color-mix(in srgb, var(--rose) 14%, var(--surface)); color: var(--rose); }
.pk-list { list-style: none; margin: 0; padding: 0; display: grid; }
.pk-row { display: grid; grid-template-columns: 62px 1fr auto; gap: 10px; align-items: start; padding: 12px 0; border-top: 1px solid var(--line, rgba(0,0,0,.07)); cursor: pointer; }
.pk-row:first-child { border-top: 0; }
.pk-date b { display: block; font-size: 13px; font-weight: 600; }
.pk-date span { font-size: 11px; color: var(--muted); }
.pk-main { min-width: 0; }
.pk-main b { display: block; font-size: 15px; font-weight: 600; line-height: 1.35; }
.pk-main p { margin: 3px 0 0; font-size: 13px; color: var(--muted); line-height: 1.45; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-kind { display: inline-block; margin-bottom: 3px; padding: 1px 7px; border-radius: 99px; font-size: 11px; font-weight: 600; }
.k-nat { background: color-mix(in srgb, #0a84ff 14%, var(--surface)); color: #0a6fd6; }
.k-loc { background: color-mix(in srgb, var(--rose) 14%, var(--surface)); color: var(--rose); }
.k-care { background: color-mix(in srgb, #34c759 16%, var(--surface)); color: #1f9a45; }
.pk-row em { font-style: normal; font-size: 12px; font-weight: 600; color: var(--muted); white-space: nowrap; }
.pk-row.now em { color: var(--rose); }
.pk-row.done { opacity: .5; }
.pk-row.done b { text-decoration: line-through; }
.pk-more { display: block; margin: 8px auto 0; }
.pk-past summary { cursor: pointer; font-weight: 600; padding: 2px 0; }
.pk-past[open] summary { margin-bottom: 6px; }
.nb-baby .nb-link { white-space: nowrap; flex: none; }

/* 아이 탭 (최대 5명 + 뱃속 아기 + 추가) — 옆으로 밀어 보기 */
.kid-tabs { display: flex; gap: 8px; margin: 0 20px 12px; overflow-x: auto; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.kid-tabs::-webkit-scrollbar { display: none; }
.kid-tabs button { flex: none; display: grid; gap: 1px; min-width: 76px; padding: 8px 14px; border-radius: 14px; background: var(--surface); color: var(--text); text-align: left; border: 1.5px solid transparent; }
.kid-tabs button b { font-size: 14px; font-weight: 600; white-space: nowrap; }
.kid-tabs button span { font-size: 11px; color: var(--muted); white-space: nowrap; }
.kid-tabs button.on { border-color: var(--rose); background: color-mix(in srgb, var(--rose) 10%, var(--surface)); }
.kid-tabs button.on b { color: var(--rose); }
.kid-tabs button[data-kid="new"] { background: transparent; border: 1.5px dashed color-mix(in srgb, var(--muted) 50%, transparent); }
.kid-tabs button[data-kid="new"] b { color: var(--rose); }
.kid-del { display: block; margin: 10px auto 0; color: var(--muted); font-size: 13px; }

/* 글쓰기 (전체 화면): 위 취소·게시판 선택·등록 / 제목 / 내용 / 아래 사진·주수·지역 */
html.wv-open, html.wv-open body { overflow: hidden; }
.wv { position: fixed; inset: 0; z-index: 2000; display: flex; flex-direction: column; background: var(--surface); color: var(--text); padding-top: env(safe-area-inset-top, 0px); }
.wv[hidden] { display: none; }
.wv-top { position: relative; display: grid; grid-template-columns: 72px 1fr 72px; align-items: center; height: 54px; padding: 0 max(8px, env(safe-area-inset-left, 0px)) 0 max(8px, env(safe-area-inset-right, 0px)); border-bottom: 1px solid var(--line); }
.wv-cancel, .wv-post { height: 40px; font-size: 16px; color: var(--muted); }
.wv-cancel { justify-self: start; padding: 0 10px; }
.wv-post { justify-self: end; padding: 0 10px; color: var(--rose); font-weight: 600; }
.wv-post:disabled { color: color-mix(in srgb, var(--rose) 35%, var(--surface)); }
.wv-board { justify-self: center; display: inline-flex; align-items: center; gap: 6px; height: 40px; padding: 0 10px; font-size: 17px; font-weight: 600; color: var(--text); }
.wv-board svg { width: 10px; height: 6px; fill: currentColor; transition: transform .2s; }
.wv.picking .wv-board svg { transform: rotate(180deg); }
/* 게시판 휠 선택: 가운데 뜨는 반투명 카드 + 위아래로 굴리는 목록 */
.wv-wheel-bg { position: absolute; inset: 0; z-index: 5; display: grid; place-items: center; background: rgba(0, 0, 0, .28); animation: wvFade .18s ease-out; }
.wv-wheel-bg[hidden] { display: none; }
@keyframes wvFade { from { opacity: 0; } to { opacity: 1; } }
.wv-wheel-card { width: min(290px, 78vw); padding: 14px; border-radius: 28px; background: color-mix(in srgb, var(--surface) 82%, transparent); backdrop-filter: blur(24px) saturate(1.4); -webkit-backdrop-filter: blur(24px) saturate(1.4); box-shadow: 0 20px 50px rgba(0, 0, 0, .22); border: 1px solid color-mix(in srgb, #fff 40%, transparent); animation: wvPop .22s cubic-bezier(.2, .9, .3, 1.2); }
@keyframes wvPop { from { opacity: 0; transform: scale(.92); } to { opacity: 1; transform: none; } }
.wv-wheel { position: relative; height: 200px; }
.wv-wheel-hl { position: absolute; left: 0; right: 0; top: 80px; height: 40px; border-radius: 12px; background: color-mix(in srgb, var(--text) 9%, transparent); pointer-events: none; }
.wv-wheel-list { position: relative; height: 200px; overflow-y: auto; scrollbar-width: none; padding: 80px 0; box-sizing: border-box; outline: none;
  -webkit-mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); mask-image: linear-gradient(180deg, transparent 0, #000 30%, #000 70%, transparent 100%); }
.wv-wheel-list::-webkit-scrollbar { display: none; }
.wv-wheel-it { height: 40px; display: grid; place-items: center; font-size: 17px; color: var(--muted); cursor: pointer; user-select: none; will-change: transform, opacity; }
.wv-wheel-it.on { font-size: 20px; font-weight: 600; color: var(--text); }
.wv-wheel-desc { min-height: 18px; margin: 8px 0 12px; text-align: center; font-size: 13px; color: var(--muted); }
.wv-wheel-ok { width: 100%; height: 50px; border-radius: 25px; background: color-mix(in srgb, var(--text) 10%, transparent); color: var(--text); font-size: 17px; font-weight: 600; }
.wv-wheel-ok:active { background: color-mix(in srgb, var(--text) 18%, transparent); }
.wv-scroll { flex: 1; min-height: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; }
.wv-linked { margin: 12px 16px 0; width: auto; max-width: calc(100% - 32px); box-sizing: border-box; }
.wv-title { display: flex; align-items: center; gap: 14px; padding: 0 20px; height: 62px; border-bottom: 1px solid var(--line); }
.wv-title span { flex: none; font-size: 17px; font-weight: 700; }
.wv-title i { font-style: normal; color: var(--rose); }
.wv-title input { flex: 1; min-width: 0; height: 100%; border: 0; background: transparent; color: var(--text); font: inherit; font-size: 17px; outline: none; }
.wv textarea { display: block; width: 100%; min-height: 46vh; padding: 20px; border: 0; resize: none; background: transparent; color: var(--text); font: inherit; font-size: 16px; line-height: 1.7; outline: none; }
.wv input::placeholder, .wv textarea::placeholder { color: color-mix(in srgb, var(--muted) 75%, transparent); }
.wv-photos { display: flex; gap: 8px; padding: 0 20px; flex-wrap: wrap; }
.wv-photos:empty { display: none; }
.wv-ph { position: relative; width: 76px; height: 76px; border-radius: 12px; overflow: hidden; background: var(--chip); }
.wv-ph img { width: 100%; height: 100%; object-fit: cover; }
.wv-ph button { position: absolute; top: 4px; right: 4px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0, 0, 0, .55); color: #fff; font-size: 15px; line-height: 22px; }
.wv-meta { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; padding: 16px 20px 20px; }
.wv-meta[hidden] { display: none; }
.wv-meta label { display: grid; gap: 6px; font-size: 13px; font-weight: 600; color: var(--muted); }
.wv-meta input, .wv-meta select { width: 100%; height: 42px; padding: 0 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 15px; }
.wv-bar { display: flex; align-items: center; gap: 6px; padding: 8px max(14px, env(safe-area-inset-right, 0px)) calc(8px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-top: 1px solid var(--line); }
.wv-nick { flex: 1; min-width: 0; font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.wv-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; color: var(--text); cursor: pointer; }
.wv-ico:active { background: var(--chip); }
.wv-ico svg { width: 26px; height: 26px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.post-photos { display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px; margin-top: 12px; }
.post-photos img { width: 100%; aspect-ratio: 1; object-fit: cover; border-radius: 12px; }
.post-ph-ico { width: 15px; height: 15px; vertical-align: -2px; fill: none; stroke: var(--muted); stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }

/* 베이비페어 배너: 제목·장소를 한 줄로 맞춰 모든 배너의 글자 영역(사진 위) 높이를 같게 */
.fcard .scard-h, .fcard .scard-s, .fcard .scard-p { display: block; max-width: 100%; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

/* 육아 커뮤니티: 아이 시기 칩 · 글의 시기 태그 · 글쓰기 '아이 시기' 고르기 */
.stage-chips { margin-bottom: 0; }
.stage-chips button small, .wv-stage-chips button small { margin-left: 4px; font-size: 11px; font-weight: 500; opacity: .7; }
.stage-chips button.on { background: var(--rose); color: var(--rose-ink); border-color: var(--rose); }
.tag.stage { margin-left: 6px; background: color-mix(in srgb, var(--rose) 12%, var(--surface)); color: var(--rose); }
.wv-stage { display: grid; gap: 10px; padding: 14px 20px; border-bottom: 1px solid var(--line); }
.wv-stage > span { font-size: 15px; font-weight: 700; }
.wv-stage i { font-style: normal; color: var(--rose); }
.wv-stage-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.wv-stage-chips button { height: 34px; padding: 0 13px; border-radius: 17px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 14px; }
.wv-stage-chips button.on { background: var(--rose); border-color: var(--rose); color: var(--rose-ink); font-weight: 600; }
#wvWeekL[hidden] { display: none; }
.verify-note { margin: 6px 0 0; font-size: 12px; color: var(--muted); line-height: 1.5; }

/* ---------- 혜택 목록: 소방관 혜택 앱과 같은 배너 카드 · 업종 아이콘 탭 (색은 응애 분홍) ---------- */
.anywhere { padding: 12px 0 18px; border-bottom: 10px solid var(--chip); }
.anywhere[hidden] { display: none; }
.anywhere h2 { margin: 0 16px 12px; font-size: 22px; letter-spacing: -.03em; color: var(--text); }
.any-cards { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 4px; scrollbar-width: none; scroll-snap-type: x mandatory; scroll-padding: 0 16px; overscroll-behavior-x: contain; }
.any-cards::-webkit-scrollbar { display: none; }
.any-card { position: relative; flex: 0 0 136px; height: 196px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; scroll-snap-align: start; text-align: left; color: #fff; background: #333; box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.any-card img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.any-card .any-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,0) 30%, rgba(0,0,0,.82)); }
.any-card .any-copy { position: absolute; left: 12px; right: 12px; bottom: 12px; display: flex; flex-direction: column; gap: 2px; }
.any-card .any-small { font-size: 11px; font-weight: 600; line-height: 1.3; color: rgba(255,255,255,.78); }
.any-card .any-big { font-size: 17px; line-height: 1.25; font-weight: 800; letter-spacing: -.03em; color: #fff; }
.any-card .any-big b { display: block; font-size: 15px; font-weight: 800; color: #ffb3cb; }
.any-card .any-pick { font-size: 11.5px; color: rgba(255,255,255,.86); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.any-card .any-go { position: absolute; right: 10px; top: 10px; font-size: 20px; line-height: 1; color: rgba(255,255,255,.85); }
.any-card .any-dday { position: absolute; top: 10px; left: 10px; padding: 3px 9px; border-radius: 999px; background: var(--rose); color: #fff; font-size: 12px; font-weight: 800; }

.cat-tabs { display: flex; gap: 2px; overflow-x: auto; padding: 8px 8px 0; border-bottom: 1px solid var(--line); scrollbar-width: none; }
.cat-tabs::-webkit-scrollbar { display: none; }
.cat-tabs button { flex: none; display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 60px; padding: 0 5px 7px; border-bottom: 3px solid transparent; color: var(--muted); font-size: 13px; font-weight: 600; background: none; }
.cat-tabs button.on { color: var(--text); border-bottom-color: var(--text); font-weight: 800; }
.cat-tabs .ctile { position: relative; width: 40px; height: 40px; display: grid; place-items: center; transition: transform .25s cubic-bezier(.3, 1.4, .5, 1); }
.cat-tabs .art { position: relative; width: 37px; height: 37px; stroke: none; fill: none; }
.cat-tabs .ctile::before { content: ''; position: absolute; inset: 2px; border-radius: 50%; background: radial-gradient(circle, color-mix(in srgb, var(--rose) 22%, transparent), transparent 70%); opacity: 0; transform: scale(.7); transition: opacity .25s, transform .25s; }
.cat-tabs button.on .ctile { transform: scale(1.08); }
.cat-tabs button.on .ctile::before { opacity: 1; transform: scale(1.15); }
.cat-tabs button:active .ctile { transform: scale(.94); }
#allSec .cat-tabs { margin: 0 0 8px; }

.list-view.ap-open > :not(#anyPage) { display: none !important; }
.any-page { padding-bottom: 120px; animation: apIn .28s cubic-bezier(.2, .8, .2, 1); }
.any-page[hidden] { display: none; }
@keyframes apIn { from { opacity: 0; transform: translateX(24px); } to { opacity: 1; transform: none; } }
.ap-hero { position: relative; height: 210px; overflow: hidden; color: #fff; }
.ap-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ap-shade { position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.35), rgba(0,0,0,.05) 35%, rgba(0,0,0,.8)); }
.ap-back { position: absolute; top: 12px; left: 12px; padding: 7px 13px; border-radius: 999px; background: rgba(0,0,0,.35); color: #fff; font-size: 14px; font-weight: 700; backdrop-filter: blur(8px); -webkit-backdrop-filter: blur(8px); }
.ap-copy { position: absolute; left: 18px; right: 18px; bottom: 16px; }
.ap-copy .ap-kicker { display: block; font-size: 12px; font-weight: 600; color: rgba(255,255,255,.78); }
.ap-copy h2 { margin: 2px 0 4px; font-size: 26px; letter-spacing: -.03em; color: #fff; }
.ap-copy p { margin: 0; font-size: 13px; line-height: 1.45; color: rgba(255,255,255,.86); }
.any-page .ap-cats { position: sticky; top: 0; z-index: 6; background: var(--bg); margin-top: 8px; }
.ap-count { padding: 12px 16px 4px; font-size: 13px; color: var(--muted); }
.ap-list { margin: 0 16px; }
.ap-credit { margin: 12px 16px 0; font-size: 11px; color: var(--muted); }

/* 범위 메뉴 (소방관 혜택 앱과 같은 모양): 지역 알약 버튼 → 내 근처 20km · 전국 · 즐겨찾기 · 지역별 */
.list-view > .scope { display: none; }
.filter-row { display: flex; align-items: center; gap: 10px; padding: 4px 16px 12px; }
.region-pill { display: flex; align-items: center; gap: 4px; height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 15px; font-weight: 700; box-shadow: 0 1px 4px rgba(0,0,0,.05); }
.region-pill svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 1.9; }
.region-pill .caret, .rmenu .caret { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
.filter-row .count { color: var(--muted); font-size: 13px; }
.rmenu-bg { position: fixed; inset: 0; z-index: 2500; }
.rmenu-bg[hidden], .rmenu[hidden] { display: none; }
.rmenu { position: fixed; z-index: 2501; min-width: 240px; max-width: calc(100vw - 24px); overflow-y: auto; padding: 8px 0; border-radius: 22px; background: color-mix(in srgb, var(--surface) 92%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 40px rgba(0,0,0,.22); }
.rmenu button, .rmenu summary { width: 100%; display: flex; align-items: center; gap: 4px; padding: 12px 20px; font-size: 17px; text-align: left; color: var(--text); background: none; cursor: pointer; }
.rmenu small { color: var(--muted); font-size: 13px; margin-left: 6px; }
.rmenu .ck { width: 26px; flex: none; font-weight: 800; color: var(--rose); }
.rmenu .msep { height: 1px; background: var(--line); margin: 6px 16px; }
.rmenu summary { list-style: none; justify-content: space-between; font-weight: 700; }
.rmenu summary::-webkit-details-marker { display: none; }
.rmenu details[open] summary .caret { transform: rotate(180deg); }

/* 지역 줄 (소방관 혜택 앱 축제·여행 탭과 같은 모양) */
.ft-region { display: flex; gap: 6px; overflow-x: auto; padding: 4px 16px 12px; scrollbar-width: none; }
.ft-region::-webkit-scrollbar { display: none; }
.ft-region button { flex: none; display: inline-flex; align-items: center; gap: 3px; height: 36px; padding: 0 13px; border-radius: 8px; border: 1px solid var(--line); background: var(--surface); font-size: 15px; font-weight: 500; color: var(--text); }
.ft-region button svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2; }
.ft-region button.on { background: var(--text); color: var(--bg); border-color: var(--text); font-weight: 700; }
#allSec .ft-region { padding: 2px 16px 6px; }
/* 지역 줄 맨 앞: 전국 | 내 근처 20km 를 한 칸에서 */
.ft-region .rseg { flex: none; display: inline-flex; padding: 2px; gap: 2px; border-radius: 10px; border: 1px solid var(--line); background: var(--chip); }
.ft-region .rseg button { height: 32px; border: 0; border-radius: 8px; background: transparent; padding: 0 11px; }
.ft-region .rseg button.on { background: var(--text); color: var(--bg); }
/* 지역 줄 맨 앞 칸: '전국 ▾' 을 누르면 아래로 펼쳐진다 */
.ft-region .rdrop { gap: 4px; }
.ft-region .rdrop .caret { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 2.2; transition: transform .2s; }
.ft-region .rdrop.open .caret { transform: rotate(180deg); }
.scope-drop-bg { position: fixed; inset: 0; z-index: 2500; }
.scope-drop-bg[hidden], .scope-drop[hidden] { display: none; }
.scope-drop { position: fixed; z-index: 2501; min-width: 200px; padding: 6px 0; border-radius: 16px; background: color-mix(in srgb, var(--surface) 94%, transparent); backdrop-filter: blur(20px); -webkit-backdrop-filter: blur(20px); box-shadow: 0 10px 34px rgba(0,0,0,.2); animation: sdIn .16s ease-out; }
@keyframes sdIn { from { opacity: 0; transform: translateY(-6px); } to { opacity: 1; transform: none; } }
.scope-drop button { width: 100%; display: flex; align-items: center; gap: 4px; padding: 12px 18px; font-size: 16px; text-align: left; color: var(--text); background: none; }
.scope-drop small { color: var(--muted); font-size: 13px; margin-left: 6px; }
.scope-drop .ck { width: 24px; flex: none; font-weight: 800; color: var(--rose); }

/* 혜택 목록/지도 전환: 소방관 혜택 앱처럼 밑줄 탭 (선택된 쪽 아래 막대가 미끄러져 옮겨 간다) */
.top .toggle { position: relative; margin-top: 10px; gap: 0; padding: 0; border: 0; border-radius: 0; background: none; box-shadow: none; border-bottom: 1px solid var(--line); }
.top .toggle button { height: 44px; border-radius: 0; background: none; box-shadow: none; color: var(--muted); font-weight: 600; font-size: 15px; transition: color .25s; }
.top .toggle button.on { background: none; box-shadow: none; color: var(--text); font-weight: 800; }
.top .toggle button svg { width: 19px; height: 19px; }
.tg-bar { position: absolute; left: 0; bottom: -1px; width: 50%; height: 3px; border-radius: 2px; background: var(--rose); pointer-events: none; transition: transform .32s cubic-bezier(.3, 1.2, .5, 1); }
.app[data-view="map"] .tg-bar { transform: translateX(100%); }
@media (prefers-reduced-motion: reduce) { .tg-bar { transition: none; } }

/* 축제·여행 페이지 (소방관 혜택 앱 축제·여행 탭과 같은 모양, 색은 응애) */
.app[data-view="trip"] #tripView { display: block; }
.app[data-view="trip"] .list-view { display: none; }
.app[data-view="trip"] .search, .app[data-view="trip"] .toggle { display: none; }
.app[data-view="trip"] .brand { display: block; }
.tile.sky { background: var(--tile-sky); color: var(--text); }
.tile.sky .tile-eyebrow { color: var(--sky-ink); }
.trip-region { padding-top: 4px; }
.ft-filter { display: flex; align-items: center; gap: 6px; padding: 2px 16px 12px; border-bottom: 1px solid var(--line); }
.ft-filter button { height: 32px; padding: 0 12px; border-radius: 16px; border: 1px solid var(--line); background: var(--surface); font-size: 14px; font-weight: 500; color: var(--text); }
.ft-filter button span { margin-left: 3px; font-size: 12px; color: var(--muted); }
.ft-filter button.on { border-color: var(--text); font-weight: 700; background: var(--chip); }
.ft-filter .ft-sort { margin-left: auto; border: 0; background: none; padding: 0 2px; font-size: 13px; color: var(--muted); display: flex; align-items: center; gap: 2px; }
.ft-filter .ft-sort svg { width: 14px; height: 14px; fill: none; stroke: currentColor; stroke-width: 2; }
.ft-feat-h { padding: 14px 16px 6px; font-size: 13px; font-weight: 700; color: var(--muted); }
.ft-feat { display: flex; gap: 10px; overflow-x: auto; padding: 2px 16px 16px; scroll-snap-type: x mandatory; scroll-padding: 0 16px; scrollbar-width: none; border-bottom: 8px solid var(--chip); }
.ft-feat::-webkit-scrollbar { display: none; }
.ft-feat .fest-card { position: relative; flex: 0 0 136px; height: 196px; padding: 0; border: 0; border-radius: 18px; overflow: hidden; scroll-snap-align: start; display: flex; flex-direction: column; background: #1f1f22; color: #fff; text-align: left; box-shadow: 0 8px 18px rgba(0,0,0,.16); }
.fest-card .fc-ph { flex: 1; min-height: 0; display: grid; place-items: center; background: #2a2a2e; }
.fest-card .fc-ph img { width: 100%; height: 100%; object-fit: contain; }
.fest-card .fc-copy { padding: 8px 10px 10px; display: flex; flex-direction: column; gap: 2px; }
.fest-card .fc-top { display: flex; justify-content: space-between; gap: 4px; font-size: 11px; }
.fest-card .fc-area { color: rgba(255,255,255,.75); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fest-card .fc-dday { flex: none; padding: 0 6px; border-radius: 99px; background: var(--rose); color: #fff; font-weight: 800; }
.fest-card .fc-name { font-size: 14px; font-weight: 800; line-height: 1.28; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.fest-card .fc-when { font-size: 11.5px; font-weight: 700; color: #ffb3cb; }
.ft-list { padding: 4px 16px 0; display: grid; }
.fr { display: flex; align-items: center; gap: 12px; width: 100%; padding: 12px 0; border-bottom: 1px solid var(--line); text-align: left; background: none; color: var(--text); }
.fr-ph { position: relative; flex: none; width: 76px; height: 76px; border-radius: 10px; overflow: hidden; background: var(--chip); }
.fr-ph img { width: 100%; height: 100%; object-fit: contain; display: block; }
.fr-tx { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.fr-tx .fr-st { align-self: flex-start; padding: 1px 7px; border-radius: 6px; font-style: normal; font-size: 11px; font-weight: 700; color: #fff; }
.fr-st.now { background: var(--rose); }
.fr-st.soon { background: #0aa5a0; }
.fr-tx b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fr-tx span { font-size: 14px; color: var(--text); opacity: .85; }
.fr-tx small { font-size: 13px; color: var(--muted); }
.fr-go { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--muted); stroke-width: 2; }
.ft-list + .load { margin-top: 12px; }
.trip-empty { margin: 0 20px; padding: 14px 0 6px; font-size: 14px; color: var(--muted); }
.trip-src { margin: 14px 20px 0; font-size: 12px; color: var(--muted); }
#tripView { padding-bottom: 120px; }
.fest-detail .fd-img { width: 100%; max-height: 240px; object-fit: contain; border-radius: 14px; display: block; background: var(--chip); }
.fest-detail .fd-cr { margin: 4px 0 0; font-size: 11px; color: var(--muted); }
.fest-detail h2 { margin: 14px 0 4px; font-size: 21px; letter-spacing: -.02em; }
.fest-detail .fd-when { margin: 0 0 10px; font-size: 14px; font-weight: 700; color: var(--rose); }
.fest-detail .fd-row { margin: 6px 0; font-size: 14px; line-height: 1.5; color: var(--muted); }
.fest-detail .fd-ov { margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--line); }
.fest-detail .fd-ov h4 { margin: 0 0 6px; font-size: 15px; }
.fest-detail .fd-ov p { margin: 0; font-size: 14px; line-height: 1.65; white-space: pre-line; word-break: keep-all; }
.fest-detail .actions a.btn { display: flex; align-items: center; justify-content: center; }

/* 홈 축제·여행 칸: 곧 끝나는 축제 카드 (혜택 칸처럼 좌우로 넘김 · 가운데 크게) — 사진은 자르지 않고 위에, 글은 아래에 */
.hc-festwrap { width: 100%; margin-top: 18px; }
.hc-festwrap .hc-slide.hc-fest { display: flex; flex-direction: column; aspect-ratio: 3 / 4.2; background: #1f1f22; color: #fff; text-align: left; box-shadow: 0 12px 26px rgba(20,60,110,.25); }
.hc-fest .hcf-ph { flex: 1; min-height: 0; display: grid; place-items: center; background: #2a2a2e; }
.hc-fest .hcf-ph img { position: static; width: 100%; height: 100%; object-fit: contain; }
.hc-fest .hcf-cap { display: flex; flex-direction: column; gap: 3px; padding: 10px 12px 12px; }
.hc-fest .hcf-top { display: flex; justify-content: space-between; gap: 6px; font-size: 11.5px; color: rgba(255,255,255,.72); }
.hc-fest .hcf-top span { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hc-fest .hcf-top em { flex: none; font-style: normal; padding: 0 7px; border-radius: 99px; background: var(--rose); color: #fff; font-weight: 800; }
.hc-fest b { font-size: 15px; font-weight: 800; line-height: 1.3; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hc-fest small { font-size: 12px; font-weight: 700; color: #ffb3cb; }
.tile.sky { padding-bottom: 28px; min-height: 0; }
/* 축제 카드는 사진 칸(위)과 글 칸(아래)을 나눈다 — 일반 혜택 카드의 '사진 꽉 채우기' 규칙을 덮어씀 */
.hc-festwrap .hc-slide.hc-fest > .hcf-ph { position: relative; flex: 2 1 0; min-height: 0; width: 100%; }
.hc-festwrap .hc-slide.hc-fest > .hcf-ph > img { position: absolute !important; inset: 0; width: 100%; height: 100%; object-fit: cover !important; }
.hc-festwrap .hc-slide.hc-fest > .hcf-cap { position: relative; flex: 1 1 0; min-height: 0; box-sizing: border-box; background: #1f1f22; justify-content: center; }

/* 사진:글 = 2:1, 사진은 칸을 꽉 채운다 (위아래 빈 공간 없음) — 곧 끝나요 카드 · 축제 목록 사진 */
/* 곧 끝나요 카드: 소방관 혜택 앱과 같은 136×196, 사진:글 = 2:1 (글은 작게) */
.ft-feat .fest-card { flex: 0 0 136px; height: 196px; display: grid; grid-template-rows: 2fr 1fr; }
.ft-feat .fest-card > .fc-copy { overflow: hidden; padding: 5px 9px 6px; gap: 1px; }
.ft-feat .fest-card .fc-top { font-size: 10.5px; }
.ft-feat .fest-card .fc-name { font-size: 12.5px; line-height: 1.22; }
.ft-feat .fest-card .fc-when { font-size: 10.5px; }
/* 홈 축제 카드: 소방관 혜택 앱 홈 축제·여행 배너와 같은 크기 (폭 min(44vw,200px) · 사진 3:4 · 이름 칸은 그 아래) */
.hc-festwrap .hc-slide.hc-fest { display: flex !important; flex-direction: column; flex-basis: min(44vw, 200px); aspect-ratio: auto; height: auto; border-radius: 16px; }
.hc-festwrap .hc-slide.hc-fest > .hcf-ph { flex: none; height: auto; aspect-ratio: 3 / 4; }
.hc-festwrap .hc-slide.hc-fest > .hcf-cap { flex: none; padding: 8px 11px 10px; gap: 2px; }
.hc-festwrap .hc-fest b { font-size: 14px; -webkit-line-clamp: 1; }
.hc-festwrap .hc-fest small, .hc-festwrap .hc-fest .hcf-top { font-size: 11.5px; }
.fest-card .fc-ph { flex: 2 1 0; min-height: 0; position: relative; }
.fest-card .fc-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.fest-card .fc-copy { flex: 1 1 0; min-height: 0; justify-content: center; padding: 6px 10px; }
.fr-ph img { object-fit: cover; }

/* ---------- 시작(로그인) 화면: 위는 사진, 아래는 흰 시트 (카카오·Google·Apple + 필수 동의 두 가지) ---------- */
html.auth-open, html.auth-open body { overflow: hidden; }
.auth-gate { position: fixed; inset: 0; z-index: 5000; display: flex; flex-direction: column; background: #1c1c1e; }
.ag-hero { position: relative; flex: 1; min-height: 0; overflow: hidden; }
.ag-hero img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ag-hero::after { content: ''; position: absolute; inset: 0; background: linear-gradient(180deg, rgba(0,0,0,.28), rgba(0,0,0,0) 34%); }
.ag-brand { position: absolute; z-index: 1; left: max(24px, env(safe-area-inset-left, 0px)); top: calc(env(safe-area-inset-top, 0px) + 28px); display: grid; gap: 4px; color: #fff; }
.ag-brand b { font-size: 34px; font-weight: 800; letter-spacing: -.04em; text-shadow: 0 2px 12px rgba(0,0,0,.25); }
.ag-brand span { font-size: 14px; font-weight: 600; opacity: .95; text-shadow: 0 1px 8px rgba(0,0,0,.3); }
.ag-sheet { position: relative; margin-top: -26px; padding: 22px max(20px, env(safe-area-inset-right, 0px)) calc(18px + env(safe-area-inset-bottom, 0px)) max(20px, env(safe-area-inset-left, 0px)); border-radius: 26px 26px 0 0; background: var(--surface); color: var(--text); display: grid; gap: 10px; box-shadow: 0 -10px 30px rgba(0,0,0,.18); }
.ag-btn { position: relative; display: flex; align-items: center; justify-content: center; height: 54px; border-radius: 14px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; font-weight: 700; }
.ag-btn svg { position: absolute; left: 20px; width: 22px; height: 22px; }
.ag-btn.kakao { background: #FEE500; border-color: #FEE500; color: rgba(0,0,0,.85); }
.ag-btn:active { transform: scale(.985); }
.ag-consents { display: grid; gap: 2px; margin-top: 8px; padding-top: 6px; border-top: 1px solid var(--line); }
.ag-consents.shake { animation: agShake .4s; }
@keyframes agShake { 20%, 60% { transform: translateX(-6px); } 40%, 80% { transform: translateX(6px); } }
.ag-ck { display: flex; align-items: center; gap: 10px; min-height: 44px; font-size: 14px; cursor: pointer; }
.ag-ck input { position: absolute; opacity: 0; pointer-events: none; }
.ag-ck i { flex: none; width: 22px; height: 22px; border-radius: 6px; border: 1.5px solid var(--line); display: grid; place-items: center; }
.ag-ck input:checked + i { background: var(--text); border-color: var(--text); }
.ag-ck input:checked + i::after { content: ''; width: 10px; height: 6px; border: 2.2px solid var(--surface); border-top: 0; border-right: 0; transform: translateY(-1px) rotate(-45deg); }
.ag-ck span { flex: 1; color: var(--muted); }
.ag-ck span b { color: var(--text); font-weight: 700; margin-right: 2px; }
.ag-more { flex: none; width: 32px; height: 32px; font-size: 20px; color: var(--muted); background: none; }
.ag-note { margin: 0; min-height: 16px; font-size: 12px; color: var(--muted); text-align: center; }
.ag-terms { padding: 12px 14px; border-radius: 12px; background: var(--chip); font-size: 13px; line-height: 1.55; }
.ag-terms[hidden] { display: none; }
.ag-terms p { margin: 6px 0 8px; }
.ag-terms button { font-size: 13px; font-weight: 700; color: var(--rose); background: none; }
.ag-hero img { object-position: 50% 52%; }

/* 커뮤니티 공지 띠 */
:root { --notice-bg: #fdeced; --notice-ink: #3a1d22; --notice-tag: #ec6a70; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --notice-bg: #3a1e21; --notice-ink: #fff; --notice-tag: #ee6b71; } }
:root[data-theme="dark"] { --notice-bg: #3a1e21; --notice-ink: #fff; --notice-tag: #ee6b71; }
.post-notice { display: flex; align-items: center; gap: 12px; width: 100%; margin: 0 0 10px; padding: 14px 14px 14px 14px; border: 0; border-radius: 16px; background: var(--notice-bg); color: var(--notice-ink); text-align: left; cursor: pointer; font: inherit; }
.post-notice .pn-tag { flex: none; background: var(--notice-tag); color: #fff; font-size: 13px; font-weight: 800; padding: 4px 10px; border-radius: 8px; letter-spacing: .02em; }
.post-notice .pn-title { flex: 1; min-width: 0; font-size: 15.5px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-notice .pn-go { flex: none; width: 18px; height: 18px; fill: none; stroke: var(--notice-tag); stroke-width: 2.6; stroke-linecap: round; stroke-linejoin: round; }
.post-notice:active { filter: brightness(.96); }

/* 커뮤니티 글 목록 (한 줄 헤더 · 칩+제목 · 본문 한 줄 · 오른쪽 사진) */
.cpost { display: flex; align-items: center; gap: 12px; width: 100%; padding: 14px 16px; border: 0; border-bottom: 1px solid var(--line); background: none; color: var(--text); text-align: left; font: inherit; cursor: pointer; }
.cpost:last-child { border-bottom: 0; }
.cp-main { flex: 1; min-width: 0; }
.cp-head { display: flex; align-items: center; gap: 8px; font-size: 13.5px; min-width: 0; }
.cp-av { flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden; background: var(--pink); display: grid; place-items: center; }
.cp-av svg { width: 30px; height: 30px; }
.cp-who { font-weight: 800; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-when { flex: none; color: var(--muted); }
.cp-stat { flex: none; display: inline-flex; gap: 10px; margin-left: 4px; color: var(--muted); }
.cp-stat > span { display: inline-flex; align-items: center; gap: 3px; }
.cp-stat svg { width: 15px; height: 15px; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linejoin: round; }
.cp-stat .on { color: var(--rose); }
.cp-stat .on svg { fill: currentColor; }
.cp-title { display: flex; align-items: center; gap: 6px; margin-top: 9px; min-width: 0; white-space: nowrap; }
.cp-board, .cp-stage { flex: none; font-size: 12.5px; font-weight: 700; padding: 3px 8px; border-radius: 7px; background: var(--chip); color: var(--muted); }
.cp-stage { background: color-mix(in srgb, var(--rose) 16%, var(--surface)); color: var(--rose); }
.cp-tt { min-width: 0; overflow: hidden; text-overflow: ellipsis; font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.cp-body { margin-top: 6px; font-size: 14.5px; color: var(--text); opacity: .85; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cp-body b { color: var(--gold); font-weight: 700; }
.cp-thumb { position: relative; flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--chip); }
.cp-thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.cp-thumb i { position: absolute; right: 4px; bottom: 4px; min-width: 20px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 11.5px; font-weight: 800; font-style: normal; text-align: center; }
/* 커뮤니티 글 목록: 네모 칸 없이 구분선만 */
#posts.panel { background: none; border: 0; border-radius: 0; margin: 0; overflow: visible; box-shadow: none; }
#posts .post-notice { width: auto; margin: 0 16px 8px; }
#posts .cpost { border-bottom: 1px solid var(--line); }
#posts .post-notice + .cpost, #posts > .cpost:first-child { border-top: 1px solid var(--line); }
#posts .cpost:last-child { border-bottom: 1px solid var(--line); }
#posts .empty { margin: 0 16px; }
/* 홈 사진첩 아래 '📍 내 주변 ○○ 보기' (소방관 혜택 앱과 같은 알약) · 켠 뒤에는 작은 안내 글 */
.hc-near { margin: 10px 0 0; font-size: 13px; color: #a1a1a6; }
.hc-festwrap .hc-hint, .hc-festwrap .hc-near { display: block; margin-left: auto; margin-right: auto; width: fit-content; }
/* 쪽 번호 (소방관 혜택 앱과 같은 모양, 응애 분홍) */
.pager { display: flex; align-items: center; justify-content: center; gap: 4px; margin: 14px 0 6px; }
.pager button { min-width: 36px; height: 36px; padding: 0 6px; border: 0; border-radius: 10px; background: none; font: inherit; font-size: 15px; font-weight: 600; color: var(--muted); cursor: pointer; }
.pager button.on { background: var(--pink); color: var(--pink-ink); font-weight: 800; }
.pager .pg-arrow { font-size: 20px; color: var(--text); }
.pager .pg-arrow:disabled { opacity: .25; cursor: default; }
.pager .pg-gap { min-width: 22px; text-align: center; color: var(--muted); }
/* 축제 페이지 여행 예약 사이트 줄 + 누르면 뜨는 카드 (소방관 혜택 앱과 같은 모양, 응애 분홍) */
.travel-sites { margin: 6px 0 14px; padding-bottom: 16px; border-bottom: 1px solid var(--line); }
.quick-h { margin: 2px 16px 10px; font-size: 15px; font-weight: 800; letter-spacing: -.02em; color: var(--text); }
.quick-row { display: flex; gap: 4px; overflow-x: auto; padding: 4px 12px 2px; scrollbar-width: none; }
.quick-row::-webkit-scrollbar { display: none; }
.quick-it { flex: 0 0 auto; width: 76px; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 2px 0; border: 0; background: none; font: inherit; cursor: pointer; }
.quick-ic { position: relative; display: grid; place-items: center; width: 64px; height: 64px; border-radius: 16px; overflow: hidden; background: var(--chip); box-shadow: 0 1px 4px rgba(0,0,0,.08); }
.quick-ic img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.quick-nm { font-size: 12px; font-weight: 700; letter-spacing: -.02em; white-space: nowrap; color: var(--text); }
.quick-it:active .quick-ic { transform: scale(.94); }
.qpop { position: fixed; inset: 0; z-index: 3600; display: grid; place-items: center; padding: 24px; background: rgba(40, 8, 24, .38); -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); opacity: 0; transition: opacity .2s; }
.qpop.in { opacity: 1; }
.qp-card { position: relative; width: min(100%, 340px); border-radius: 22px; overflow: hidden; background: #fff; color: #1d1d1f; box-shadow: 0 24px 60px rgba(0, 0, 0, .28); transform: translateY(14px) scale(.96); transition: transform .26s cubic-bezier(.2, .8, .2, 1); }
.qpop.in .qp-card { transform: none; }
.qp-copy { display: flex; flex-direction: column; gap: 6px; padding: 26px 24px 20px; color: inherit; text-decoration: none; }
.qp-kick { font-size: 13px; font-weight: 800; color: #d6457a; }
.qp-head { font-size: 25px; line-height: 1.3; font-weight: 800; letter-spacing: -.035em; word-break: keep-all; }
.qp-sub { margin-top: 4px; font-size: 15px; line-height: 1.5; color: #3a3a3c; word-break: keep-all; }
.qp-link { font-size: 14px; color: #8e8e93; }
.qp-ph.brand { display: flex; align-items: center; justify-content: center; aspect-ratio: 16 / 10; background: linear-gradient(160deg, #fff4f7, #fbe3ec); }
.qp-ph.brand img { width: 132px; height: 132px; border-radius: 30px; box-shadow: 0 10px 28px rgba(0, 0, 0, .18); }
/* 여행 예약 사이트 아래 구분선도 곧 끝나요 아래처럼 굵게 */
.travel-sites { border-bottom: 8px solid var(--chip); }
/* 곧 끝나요 제목을 위 구분선 쪽으로 붙인다 (구분선 아래 빈칸 28px → 12px) */
#tripView .travel-sites { margin-bottom: 0; }
#tripView .travel-sites + .ft-feat-h { padding-top: 12px; }
/* 우리 동네 지원금 페이지 — 심플: 흰(어두운) 바탕 · 굵은 제목 · 얇은 선 목록 · 금액만 굵게 (분홍 점·분홍 상자 없음) */
#supportView .sv-title { margin: 6px 20px 4px; font-size: 28px; font-weight: 800; letter-spacing: -.035em; color: var(--text); }
#supportView .sv-lead { margin: 0 20px 18px; font-size: 15px; color: var(--muted); }
#supportView .sv-top { display: flex; align-items: flex-end; justify-content: space-between; gap: 12px; margin: 0 20px; padding: 0 0 18px; border-bottom: 1px solid var(--line); }
#supportView .sv-top p { margin: 0 0 2px; font-size: 13px; color: var(--muted); }
#supportView .sv-top h2 { margin: 0; font-size: 22px; font-weight: 800; letter-spacing: -.03em; }
#supportView .sv-top-btns { display: flex; gap: 14px; }
#supportView .sv-top-btns button { border: 0; background: none; padding: 4px 0; font: inherit; font-size: 14px; font-weight: 600; color: var(--text); cursor: pointer; }
#supportView .nb-perk { margin: 16px 20px 4px; background: var(--surface); border: 1px solid var(--line); box-shadow: none; }
#supportView .nb-perk .nb-eyebrow { color: var(--muted); }
#supportView .nb-perk h3 { color: var(--text); }
#supportView .sv-sec { margin: 0 20px; padding: 22px 0 6px; border-bottom: 1px solid var(--line); }
#supportView .sv-sec:last-of-type { border-bottom: 0; }
#supportView .sv-head { display: flex; align-items: baseline; justify-content: space-between; gap: 10px; margin-bottom: 4px; }
#supportView .sv-head h3 { margin: 0; font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
#supportView .sv-cond { border: 0; background: none; padding: 0; font: inherit; font-size: 13px; color: var(--muted); cursor: pointer; }
#supportView .sv-list { list-style: none; margin: 0; padding: 0; }
#supportView .sv-list li { display: flex; flex-direction: column; gap: 2px; padding: 12px 0; font-size: 15px; line-height: 1.5; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
#supportView .sv-list li + li { border-top: 1px solid var(--line); }
#supportView .sv-list li small { font-size: 12px; color: var(--muted); }
#supportView .sv-list b { font-weight: 800; }
#supportView .sv-top, #supportView .sv-sec { margin-left: 0; margin-right: 0; }
#supportView .nb-perk { margin-left: 0; margin-right: 0; }
/* 시기별 혜택 알림 배너: 흰 바탕 · 굵은 주황 테두리 · 그림자 · 왼쪽 그림 + 굵은 두 줄 */
.pk-banner { display: flex; align-items: center; gap: 14px; width: 100%; margin: 16px 0 6px; padding: 16px 18px; border: 2.5px solid #ff7a45; border-radius: 20px; background: var(--surface); box-shadow: 0 8px 22px rgba(255, 122, 69, .16); color: var(--text); font: inherit; text-align: left; cursor: pointer; }
.pk-banner .pk-art { flex: none; width: 56px; height: 56px; }
.pk-banner .pk-art svg { width: 100%; height: 100%; }
.pk-banner .pk-txt { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.pk-banner .pk-txt b { font-size: 16.5px; font-weight: 800; letter-spacing: -.03em; line-height: 1.35; word-break: keep-all; }
.pk-banner .pk-go { flex: none; font-size: 22px; color: var(--muted); }
.pk-banner:active { transform: scale(.985); }
/* 지원금 분야 카드: 위쪽이 은은한 색 그라데이션인 둥근 카드 (분야마다 색) */
#supportView .sv-sec { --sv-c: 255, 140, 90; margin: 14px 0 0; padding: 18px 18px 6px; border: 1px solid rgba(var(--sv-c), .22); border-bottom: 1px solid rgba(var(--sv-c), .22); border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--sv-c), .16) 0, rgba(var(--sv-c), .05) 90px, var(--surface) 180px); }
#supportView .sv-sec:last-of-type { border-bottom: 1px solid rgba(var(--sv-c), .22); }
#supportView .sv-birth { --sv-c: 255, 128, 90; }
#supportView .sv-care { --sv-c: 52, 190, 150; }
#supportView .sv-school { --sv-c: 70, 140, 255; }
#supportView .sv-house { --sv-c: 150, 110, 240; }
#supportView .sv-move { --sv-c: 240, 180, 40; }
#supportView .sv-farm { --sv-c: 110, 180, 70; }
#supportView .sv-head h3 { display: flex; align-items: center; gap: 8px; }
#supportView .sv-ico { font-size: 22px; line-height: 1; }
#supportView .sv-list li + li { border-top-color: rgba(var(--sv-c), .18); }
#supportView .sv-top { border-bottom: 0; padding-bottom: 6px; }
.pk-banner .pk-txt b { font-size: 15.5px; }
.pk-banner { gap: 12px; padding: 16px 14px 16px 16px; }
.pk-banner .pk-art { width: 50px; height: 50px; }
/* 그림 이미지 (Fluent Emoji 3D) */
.pk-banner .pk-art { width: 56px; height: 56px; object-fit: contain; }
#supportView .sv-ico { width: 30px; height: 30px; object-fit: contain; font-size: 0; }
/* 조건 보기 시트: 그 분야 카드와 같은 그림·색 (위쪽 은은한 그라데이션) */
.svc { --sv-c: 255, 140, 90; margin: 4px -4px 0; padding: 18px 16px 8px; border-radius: 22px; border: 1px solid rgba(var(--sv-c), .22);
  background: linear-gradient(180deg, rgba(var(--sv-c), .18) 0, rgba(var(--sv-c), .06) 110px, var(--surface) 220px); }
.svc.sv-birth { --sv-c: 255, 128, 90; } .svc.sv-care { --sv-c: 52, 190, 150; } .svc.sv-school { --sv-c: 70, 140, 255; }
.svc.sv-house { --sv-c: 150, 110, 240; } .svc.sv-move { --sv-c: 240, 180, 40; } .svc.sv-farm { --sv-c: 110, 180, 70; }
.svc-head { display: flex; align-items: center; gap: 12px; margin-bottom: 14px; }
.svc-head .sv-ico { width: 44px; height: 44px; object-fit: contain; }
.svc-head small { display: block; font-size: 12px; color: var(--muted); }
.svc-head h3 { margin: 2px 0 0; font-size: 20px; font-weight: 800; letter-spacing: -.03em; }
.svc-box { padding: 14px 0; border-top: 1px solid rgba(var(--sv-c), .2); }
.svc-box h4 { margin: 0 0 8px; font-size: 13px; font-weight: 800; color: rgb(var(--sv-c)); }
.svc-box p { margin: 0 0 6px; font-size: 14.5px; line-height: 1.6; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.svc-none { font-size: 14px; color: var(--muted); }
.svc-src-btn { display: flex; align-items: center; gap: 4px; width: 100%; margin-top: 4px; padding: 12px 0; border: 0; border-top: 1px solid rgba(var(--sv-c), .2); background: none; font: inherit; font-size: 14px; font-weight: 700; color: var(--muted); cursor: pointer; }
.svc-src-btn span { transition: transform .2s; }
.svc-src-btn.on span { transform: rotate(180deg); }
.svc-src { list-style: none; margin: 0 0 8px; padding: 0; display: grid; gap: 8px; }
.svc-src a { font-size: 13px; color: var(--text); text-decoration: underline; text-decoration-color: rgba(var(--sv-c), .5); overflow-wrap: anywhere; }
.svc-src[hidden] { display: none; }
.svc-head { margin-bottom: 8px; }
.svc-head .sv-ico { width: 34px; height: 34px; }
.svc-head small { font-size: 13px; font-weight: 600; color: var(--muted); }
/* 달력으로 날짜 고르기 */
.cal-field { display: grid; gap: 6px; }
.cal-btn { display: flex; align-items: center; justify-content: space-between; gap: 10px; width: 100%; min-height: 46px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; background: var(--bg); color: var(--text); font: inherit; font-size: 16px; text-align: left; cursor: pointer; }
.cal-btn.empty span { color: var(--muted); }
.cal-btn svg { flex: none; width: 20px; height: 20px; fill: none; stroke: var(--rose); stroke-width: 1.8; stroke-linecap: round; }
.cal-btn[aria-expanded="true"] { border-color: var(--rose); }
.dpick { margin-top: 4px; padding: 12px 10px 10px; border: 1px solid var(--line); border-radius: 16px; background: var(--surface); }
.dpick[hidden] { display: none; }
.cal-top { display: flex; align-items: center; justify-content: center; gap: 8px; margin-bottom: 8px; color: var(--text); font-size: 16px; }
.cal-top b { font-weight: 800; }
.cal-top select { border: 0; background: none; color: var(--text); font: inherit; font-weight: 800; font-size: 16px; padding: 2px 0; cursor: pointer; }
.cal-top button { width: 36px; height: 36px; border: 0; border-radius: 50%; background: none; color: var(--text); font-size: 22px; cursor: pointer; }
.cal-top button:first-child { margin-right: auto; } .cal-top button:last-child { margin-left: auto; }
.cal-top button:disabled { opacity: .25; cursor: default; }
.cal-wd, .cal-days { display: grid; grid-template-columns: repeat(7, 1fr); text-align: center; }
.cal-wd span { padding: 4px 0; font-size: 12px; color: var(--muted); }
.cal-wd span:first-child { color: #e5484d; }
.cal-days > * { aspect-ratio: 1; min-height: 36px; }
.cal-days button { margin: 2px; border: 0; border-radius: 50%; background: none; color: var(--text); font: inherit; font-size: 15px; cursor: pointer; }
.cal-days button:disabled { color: var(--muted); opacity: .35; cursor: default; }
.cal-days button.today { box-shadow: inset 0 0 0 1.5px var(--rose); }
.cal-days button.on { background: var(--rose); color: #fff; font-weight: 800; }
/* 달력 위 '2026년 10월 ▾' 버튼 + 연·월 휠 창 */
.cal-ym { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; border: 0; border-radius: 10px; background: none; color: var(--text); font: inherit; font-size: 16px; font-weight: 800; cursor: pointer; }
.cal-ym svg { width: 9px; height: 6px; fill: currentColor; opacity: .6; }
.cal-ym:active { background: var(--chip); }
.ym-bg { position: fixed; inset: 0; z-index: 3500; display: grid; place-items: center; background: rgba(0, 0, 0, .32); animation: wvFade .18s ease-out; }
.ym-card { width: min(300px, 82vw); }
.ym-wheels { position: relative; display: grid; grid-template-columns: 1.3fr 1fr; gap: 6px; height: 200px; margin-bottom: 12px; }
.ym-list { height: 200px; touch-action: pan-y; cursor: grab; }
.ym-list:active { cursor: grabbing; }
.ym-bg { z-index: 99999; }
.cal-top .cal-ym { width: auto; height: auto; margin: 0; border-radius: 10px; font-size: 16px; white-space: nowrap; }
.ym-card { background: var(--surface); }
/* 아이정보 입력 탭: 아이 목록 */
.nb-kids .kl-list { list-style: none; margin: 4px 0 12px; padding: 0; }
.kl-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.kl-row:last-child { border-bottom: 0; }
.kl-row b { display: block; font-size: 16px; font-weight: 800; }
.kl-row span { font-size: 13px; color: var(--muted); }
.nb-kids .nb-btn { width: 100%; margin-top: 4px; }
.nb-due-btns { display: flex; gap: 16px; margin-top: 10px; }
.nb-link.danger { color: #e5484d; }
.nb-back-link { display: block; margin: 4px auto 0; }
.nb-due-btns .nb-link.danger { color: #e5484d; }
.due-form[hidden] { display: none; } .nb-due [data-due-open][hidden] { display: none; } .due-form { margin-top: 4px; }
/* 캘린더에 넣기 (안드로이드·컴퓨터): 일정마다 Google 캘린더 한 번에 추가 */
.cal-add-list { list-style: none; margin: 12px 0; padding: 0; max-height: 50vh; overflow-y: auto; }
.cal-add-list li + li { border-top: 1px solid var(--line); }
.cal-add-list a { display: flex; align-items: center; gap: 12px; padding: 12px 2px; color: var(--text); text-decoration: none; }
.cal-add-list b { flex: none; width: 46px; font-size: 14px; }
.cal-add-list span { flex: 1; min-width: 0; font-size: 14.5px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.cal-add-list em { flex: none; font-style: normal; font-size: 13px; font-weight: 800; color: var(--rose); }
.cal-file { display: block; width: 100%; margin-top: 4px; text-align: center; text-decoration: none; }
.kl-btns { flex: none; display: flex; gap: 14px; }
.kl-btns .nb-link.danger { color: #e5484d; }
.kl-row.sure > div span { color: #e5484d; }
.kl-row.sure > div span::after { content: ' · 접종·성장 기록도 함께 지워져요'; }
/* 삭제 글씨는 빨간색 대신 차분한 회색 */
.nb-link.danger, .nb-due-btns .nb-link.danger, .kl-btns .nb-link.danger { color: var(--muted); }
.kl-row.sure > div span { color: var(--text); }
.kl-row.sure .nb-link.danger { color: var(--text); font-weight: 800; }
.cal-wd span:first-child { color: var(--muted); }
/* 삭제 글씨: '시기 지남'과 같은 주황 */
.nb-link.danger, .nb-due-btns .nb-link.danger, .kl-btns .nb-link.danger, .kl-row.sure .nb-link.danger { color: #c96a00; }

/* ---------- 운영자: 방문자 통계 · 회원 관리 · 새 혜택 후보 (admin.js) ---------- */
:root { --adm: #2f6f5e; --adm-soft: #e3efe9; --adm-2: #9cc7b5; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --adm: #7cc3a8; --adm-soft: #24352e; --adm-2: #3f6b5b; } }
:root[data-theme="dark"] { --adm: #7cc3a8; --adm-soft: #24352e; --adm-2: #3f6b5b; }
.adm { padding-bottom: 12px; }
.adm h3 { margin: 6px 0 12px; font-size: 20px; }
.adm-back { font-size: 14px; font-weight: 700; color: var(--adm); padding: 4px 0; }
.adm-stats { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.adm-stat { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border-radius: 14px; background: var(--bg); }
.adm-stat b { font-size: 20px; }
.adm-stat small { font-size: 11px; color: var(--muted); }
.adm-stat.on { box-shadow: inset 0 0 0 2px var(--adm); }
.adm-q { width: 100%; height: 40px; margin: 12px 0 4px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--bg); color: var(--text); font-size: 14px; }
.adm-row { display: flex; align-items: center; gap: 10px; padding: 12px 2px; border-bottom: 1px solid var(--line); cursor: pointer; }
.adm-who { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; cursor: pointer; }
.adm-who b { font-size: 15px; }
.adm-who em { margin-left: 6px; padding: 1px 6px; border-radius: 6px; background: var(--adm); color: var(--surface); font-size: 11px; font-style: normal; }
.adm-who em.vst-m { background: var(--chip); color: var(--muted); font-weight: 600; }
.adm-who small { font-size: 12px; color: var(--muted); }
.adm-chev { color: var(--muted); }
.adm-act { flex: none; height: 32px; padding: 0 12px; border-radius: 10px; background: var(--chip); color: #c96a00; font-size: 13px; font-weight: 700; }
.adm-act.ask { background: #c96a00; color: #fff; }
.adm-act.undo { color: var(--text); }
.adm-empty { padding: 24px 0; text-align: center; color: var(--muted); }
.adm-chips { display: flex; gap: 6px; flex-wrap: wrap; margin: 4px 0 10px; }
.adm-chips button { height: 32px; padding: 0 12px; border-radius: 999px; background: var(--chip); font-size: 13px; font-weight: 600; color: var(--muted); }
.adm-chips button.on { background: var(--adm); color: var(--surface); }
.adm-toast { position: fixed; left: 50%; bottom: calc(96px + env(safe-area-inset-bottom, 0px)); transform: translateX(-50%); z-index: 9999; padding: 10px 16px; border-radius: 999px; background: rgba(30, 32, 26, .9); color: #fff; font-size: 14px; }
.amd h3 { margin-bottom: 2px; }
.amd-sub { margin: 0 0 14px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.amd-stats { display: grid; grid-template-columns: repeat(3, 1fr); padding: 14px 0; border-top: 1px solid var(--line); }
.amd-stats.two { grid-template-columns: repeat(2, 1fr); border-bottom: 1px solid var(--line); }
.amd-stats div { display: flex; flex-direction: column; align-items: center; gap: 6px; }
.amd-stats div + div { border-left: 1px solid var(--line); }
.amd-stats small { font-size: 13px; color: var(--muted); }
.amd-stats b { font-size: 19px; font-weight: 800; }
.amd h4 { margin: 20px 0 8px; font-size: 14px; }
.amd-hours { display: flex; align-items: flex-end; gap: 2px; height: 56px; }
.amd-hours i { flex: 1; min-height: 2px; border-radius: 2px 2px 0 0; background: var(--adm); }
.amd-hlab { display: flex; justify-content: space-between; margin-top: 4px; font-size: 11px; color: var(--muted); }
.amd-bars { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.amd-bars li { display: grid; grid-template-columns: minmax(0, 11em) 1fr auto; align-items: center; gap: 8px; font-size: 13px; }
.amd-bars span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.amd-bars i { height: 8px; border-radius: 4px; background: var(--adm); }
.amd-bars b { font-size: 12px; color: var(--muted); font-weight: 600; }
.amd-recent { list-style: none; margin: 0; padding: 0; }
.amd-recent li { display: flex; justify-content: space-between; gap: 8px; padding: 8px 0; border-bottom: 1px solid var(--line); font-size: 13px; }
.amd-recent li[data-adm-person] { cursor: pointer; }
.amd-recent b { font-weight: 600; color: var(--muted); flex: none; }
.amd-note { margin: 14px 0 0; font-size: 12px; color: var(--muted); }
.vst-split { margin: 10px 0 0; font-size: 13px; color: var(--muted); }
.vst-split b { color: var(--text); }
.vst-days { display: flex; align-items: flex-end; gap: 4px; height: 120px; }
.vst-days span { flex: 1; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; }
.vst-days i { width: 100%; min-height: 2px; border-radius: 3px 3px 0 0; background: var(--adm); display: flex; flex-direction: column; overflow: hidden; }
.vst-days em { display: block; width: 100%; background: var(--adm-2); }
.vst-days b { font-size: 10px; color: var(--muted); font-weight: 600; min-height: 12px; }
.vst-days small { font-size: 10px; color: var(--muted); }
.vst-legend { display: flex; align-items: center; gap: 6px; margin: 6px 0 0; font-size: 11.5px; color: var(--muted); }
.vst-legend em, .vst-legend i { width: 10px; height: 10px; border-radius: 2px; background: var(--adm-2); }
.vst-legend i { background: var(--adm); margin-left: 8px; }
.cnd-count { margin: 0 0 12px; font-size: 14px; }
.cnd-count b { color: var(--adm); }
.cnd-card { padding: 14px; margin-bottom: 12px; border-radius: 16px; background: var(--bg); }
.cnd-card.picked { box-shadow: inset 0 0 0 2px var(--adm); }
.cnd-top { display: flex; align-items: baseline; gap: 8px; }
.cnd-top b { font-size: 16px; }
.cnd-top small, .cnd-addr { font-size: 12px; color: var(--muted); }
.cnd-addr { margin: 2px 0 6px; }
.cnd-perk { margin: 0 0 6px; font-weight: 800; color: var(--adm); }
.cnd-quote { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }
.cnd-ev { display: flex; flex-direction: column; gap: 4px; margin: 6px 0 10px; }
.cnd-ev a { display: flex; justify-content: space-between; gap: 8px; font-size: 13px; color: inherit; text-decoration: underline; text-underline-offset: 2px; }
.cnd-ev a span { flex: none; color: var(--muted); text-decoration: none; }
.cnd-act { display: flex; justify-content: flex-end; align-items: center; gap: 8px; }
.cnd-act button { height: 34px; padding: 0 16px; border-radius: 10px; font-weight: 700; background: var(--surface); border: 1px solid var(--line); }
.cnd-act button.ok { background: var(--adm); color: var(--surface); border: 0; }
.cnd-act button.no { color: #c96a00; }
.cnd-v { margin-right: auto; font-size: 13px; font-weight: 700; color: var(--adm); }
.rep-day { padding: 4px 0 14px; border-bottom: 1px solid var(--line); }
.rep-day h4 { margin: 16px 0 6px; }
.rep-day p { margin: 0 0 6px; font-size: 13px; line-height: 1.6; color: var(--muted); }
.rep-day p b { color: var(--text); }
.rep-k { margin-top: 8px !important; font-weight: 700; color: var(--text) !important; }
.rep-list { margin: 0 0 4px; padding-left: 18px; font-size: 13px; line-height: 1.7; }
.rep-list span { color: var(--muted); }
.rep-list em { font-style: normal; font-size: 11px; padding: 1px 6px; border-radius: 6px; background: var(--adm-soft); color: var(--adm); }
.cnd-card.done { opacity: .6; }
.cnd-why { margin: 0 0 6px; font-size: 13px; line-height: 1.5; color: var(--muted); }

/* ---------- 쇼핑 적립 내역 · 기프티콘 교환 (points.js) ---------- */
.pts h4 { margin: 18px 0 4px; font-size: 14px; }
.pts-sum { display: grid; grid-template-columns: repeat(3, 1fr); padding: 12px 0; border-top: 1px solid var(--line); border-bottom: 1px solid var(--line); }
.pts-sum div { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.pts-sum div + div { border-left: 1px solid var(--line); }
.pts-sum small { font-size: 12px; color: var(--muted); }
.pts-sum b { font-size: 17px; }
.pts-empty { margin: 6px 0; font-size: 13px; color: var(--muted); }
.pts .hstat.canceled { color: var(--muted); }
.pts-form { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: 16px; background: var(--bg); }
.pts-form b { font-size: 16px; }
.pts-form > span { font-size: 13px; color: var(--muted); }
.pts-form label { display: flex; flex-direction: column; gap: 6px; margin-top: 6px; font-size: 13px; font-weight: 600; }
.pts-form input { height: 44px; padding: 0 12px; border-radius: 12px; border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 16px; }
.pts-msg { margin: 0; min-height: 18px; font-size: 13px; color: #c96a00; }
.pts-btns { display: flex; gap: 8px; }
.pts-btns .pill { flex: 1; }
.pt-wait { margin-left: 6px; padding: 1px 7px; border-radius: 6px; background: #c96a00; color: #fff; font-size: 11px; font-style: normal; }
.pt-phone { color: var(--text); font-weight: 700; }
/* 포인트 사용 카드 — 여행 사이트 카드(.qpop)와 같은 모양, 기프티콘 목록은 업체 목록처럼 사진 + 이름 + 분홍 포인트 */
.rw-card { display: flex; flex-direction: column; width: min(100%, 360px); max-height: min(86vh, 720px); }
.rw-card .qp-copy { flex: none; padding-right: 52px; }
.rw-card .qp-head { font-size: 24px; }
.rw-pt { color: #d6457a; font-weight: 800; }
.rw-x { position: absolute; top: 14px; right: 14px; z-index: 2; display: grid; place-items: center; width: 34px; height: 34px; border: 0; border-radius: 50%; background: #f2f2f5; color: #3a3a3c; cursor: pointer; }
.rw-x svg { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
.rw-list { flex: 1 1 auto; min-height: 0; overflow-y: auto; border-top: 1px solid #ececf0; }
.rw-row { display: flex; align-items: center; gap: 14px; width: 100%; padding: 14px 20px; border: 0; border-bottom: 1px solid #ececf0; background: none; font: inherit; color: inherit; text-align: left; cursor: pointer; }
.rw-row:last-child { border-bottom: 0; }
.rw-row:active:not(:disabled) { background: #faf5f7; }
.rw-row:disabled { cursor: default; }
.rw-row:disabled .rw-th, .rw-row:disabled .rw-info { opacity: .5; }
.rw-th, .rw-ph { position: relative; display: grid; place-items: center; overflow: hidden; background: linear-gradient(160deg, #fff4f7, #fbe3ec); color: #d6457a; }
.rw-th { flex: none; width: 72px; height: 72px; border-radius: 16px; }
.rw-th.k-bag, .rw-ph.k-bag { background: linear-gradient(160deg, #f4f8ff, #e2ecfb); color: #4a76c9; }
.rw-th svg { width: 30px; height: 30px; fill: none; stroke: currentColor; stroke-width: 1.6; stroke-linecap: round; stroke-linejoin: round; }
.rw-th img, .rw-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.rw-info { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.rw-nm { font-size: 16px; font-weight: 800; letter-spacing: -.03em; line-height: 1.3; word-break: keep-all; }
.rw-br { font-size: 13px; color: #8e8e93; }
.rw-info .rw-pt { font-size: 16px; }
.rw-go { flex: none; font-size: 13px; font-weight: 700; color: #d6457a; white-space: nowrap; }
.rw-row:disabled .rw-go { color: #8e8e93; font-weight: 600; }
.rw-note { flex: none; margin: 0; padding: 12px 20px 18px; border-top: 1px solid #ececf0; font-size: 12px; line-height: 1.5; color: #8e8e93; word-break: keep-all; }
.rw-ph { flex: none; aspect-ratio: 16 / 10; }
.rw-ph svg { width: 72px; height: 72px; fill: none; stroke: currentColor; stroke-width: 1.3; stroke-linecap: round; stroke-linejoin: round; }
.rw-phone { display: flex; flex-direction: column; gap: 6px; margin-top: 10px; font-size: 13px; font-weight: 700; color: #3a3a3c; }
.rw-phone input { height: 46px; padding: 0 14px; border-radius: 12px; border: 1px solid #dcdce2; background: #fff; color: #1d1d1f; font-size: 16px; }
.rw-phone input:focus { outline: 2px solid #d6457a; outline-offset: -1px; border-color: transparent; }
.rw-btns { display: flex; gap: 8px; margin-top: 2px; }
.rw-btns .pill { flex: 1; height: 44px; }
.rw-card .pts-msg:empty { display: none; }
.rw-th { width: 64px; height: 64px; }
.rw-nm { font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rw-br { font-size: 12px; font-weight: 700; }
.rw-info .rw-pt small { font-size: 12px; font-weight: 600; color: #8e8e93; }
svg.rw-go { width: 18px; height: 18px; fill: none; stroke: #c7c7cc; stroke-width: 2.2; stroke-linecap: round; stroke-linejoin: round; }
/* 적립 내역 카드 */
.rw-sum { display: grid; grid-template-columns: repeat(3, 1fr); margin-top: 10px; padding: 12px 0; border-radius: 14px; background: #faf5f7; }
.rw-sum div { display: flex; flex-direction: column; align-items: center; gap: 3px; }
.rw-sum div + div { border-left: 1px solid #efe3e8; }
.rw-sum small { font-size: 12px; color: #8e8e93; }
.rw-sum b { font-size: 17px; letter-spacing: -.02em; }
.rw-sec { margin: 0; padding: 16px 20px 4px; font-size: 13px; font-weight: 800; color: #8e8e93; }
.rw-h { cursor: default; padding-block: 12px; }
.rw-h .rw-th { width: 52px; height: 52px; border-radius: 14px; }
.rw-h .rw-th svg { width: 24px; height: 24px; }
.rw-st { background: var(--c); color: #fff; }
.rw-st b { font-size: 20px; font-weight: 800; }
.rw-sub { font-size: 12px; color: #8e8e93; }
.rw-amt { flex: none; font-size: 15px; font-weight: 800; color: #d6457a; white-space: nowrap; }
.rw-h.x-requested .rw-amt, .rw-h.x-sent .rw-amt { color: #1d1d1f; }
.rw-h.click .rw-amt { font-size: 12px; font-weight: 600; color: #8e8e93; }
.rw-amt s { font-weight: 600; color: #8e8e93; }
.rw-h.pending .rw-br { color: #c96a00; }
.rw-h.confirmed .rw-br, .rw-h.x-sent .rw-br { color: #2f8a5e; }
.rw-h.canceled .rw-th, .rw-h.x-canceled .rw-th { opacity: .5; }
.rw-empty { margin: 0; padding: 8px 20px 14px; font-size: 13px; color: #8e8e93; }
.rw-sub { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
/* 로그인 창: 이제 필요할 때만 뜨므로 닫기 버튼 */
.ag-close { position: absolute; top: calc(env(safe-area-inset-top, 0px) + 14px); right: 14px; z-index: 3; display: grid; place-items: center; width: 38px; height: 38px; border: 0; border-radius: 50%; background: rgba(0,0,0,.35); color: #fff; cursor: pointer; -webkit-backdrop-filter: blur(6px); backdrop-filter: blur(6px); }
.ag-close svg { width: 18px; height: 18px; fill: none; stroke: currentColor; stroke-width: 2.2; stroke-linecap: round; }
/* 쇼핑 탭 · 많이 찾는 육아용품 (작은 카드, 분류별 가로 줄) */
.pk-shelf { padding: 14px 0 4px; }
.pk-h { margin: 0 0 10px; padding: 0 20px; font-size: 18px; font-weight: 600; letter-spacing: -.01em; color: var(--muted); }
.pk-h b { color: var(--text); font-weight: 700; }
.pk-row { display: flex; gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; padding: 2px 20px 14px; scrollbar-width: none; }
.pk-row::-webkit-scrollbar { display: none; }
.pk-card { flex: 0 0 132px; scroll-snap-align: start; display: flex; flex-direction: column; gap: 3px; color: var(--text); text-decoration: none; }
.pk-ph { position: relative; display: grid; place-items: center; width: 132px; height: 132px; margin-bottom: 6px; border-radius: 16px; overflow: hidden; background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.08); }
.pk-ph img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.pk-ph svg { width: 40px; height: 40px; fill: none; stroke: currentColor; stroke-width: 1.5; stroke-linecap: round; stroke-linejoin: round; }
.pk-ph.k-move { background: linear-gradient(160deg, #f6f1ea, #e9dfd1); color: #8a6e4b; }
.pk-ph.k-daily { background: linear-gradient(160deg, #f1f7ff, #dde9fa); color: #4a76c9; }
.pk-ph.k-carry { background: linear-gradient(160deg, #fff4f7, #fbe3ec); color: #d6457a; }
.pk-ph.k-food { background: linear-gradient(160deg, #fff8ec, #fbe9c8); color: #c47f12; }
.pk-ph:has(img) { background: #fff; }
.pk-nm { font-size: 14px; font-weight: 700; letter-spacing: -.02em; line-height: 1.3; word-break: keep-all; }
.pk-ds { font-size: 12px; line-height: 1.35; color: var(--muted); word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.pk-card:active .pk-ph { transform: scale(.96); }
#adPage .pk-row { border-top: 0; }
/* 홈 쇼핑 배너: 분류 네 칸 (외출 · 생활용품 · 아기띠·옷 · 이유식) */
.tile-picks { display: grid; grid-template-columns: repeat(4, 1fr); gap: 10px; padding: 4px 20px 22px; }
.tp-cat { display: flex; flex-direction: column; align-items: center; gap: 2px; min-width: 0; padding: 0; border: 0; background: none; font: inherit; color: inherit; cursor: pointer; text-align: center; }
.tp-cat .pk-ph { width: 100%; height: auto; aspect-ratio: 1; margin-bottom: 6px; border-radius: 14px; }
.tp-cat .pk-ph svg { width: 30px; height: 30px; }
.tp-cat b { font-size: 13px; font-weight: 700; letter-spacing: -.02em; word-break: keep-all; }
.tp-cat small { font-size: 11px; line-height: 1.3; opacity: .65; word-break: keep-all; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.tp-cat:active .pk-ph { transform: scale(.95); }
.pk-pr { font-size: 13px; font-weight: 800; color: var(--text); }
.pk-rk { position: absolute; left: 6px; bottom: 6px; padding: 2px 6px; border-radius: 6px; background: #346aff; color: #fff; font-size: 10px; font-weight: 800; font-style: normal; }
/* 홈 쇼핑 배너: 혜택 배너 크기의 상품 카드를 옆으로 넘겨 보기 */
.tp-row { display: flex; gap: 12px; width: 100%; margin-top: 22px; padding: 6px 20px 30px; overflow-x: auto; scroll-snap-type: x mandatory; scroll-padding: 0 20px; scrollbar-width: none; overscroll-behavior-x: contain; box-sizing: border-box; }
.tp-row::-webkit-scrollbar { display: none; }
.tp-slide { flex: 0 0 min(52vw, 260px); scroll-snap-align: start; display: flex; flex-direction: column; aspect-ratio: 3 / 4; border-radius: 20px; overflow: hidden; background: #fff; color: #1d1d1f; text-decoration: none; text-align: left; box-shadow: 0 10px 26px rgba(0,0,0,.12); }
.tp-slide .pk-ph { flex: 1; width: 100%; height: auto; min-height: 0; margin: 0; border-radius: 0; box-shadow: none; }
.tp-slide .pk-ph svg { width: 56px; height: 56px; stroke-width: 1.3; }
.tp-slide .pk-rk { left: 10px; bottom: 10px; font-size: 11px; }
.tp-cap { display: flex; flex-direction: column; gap: 2px; padding: 12px 14px 14px; }
.tp-cap small { font-size: 11px; font-weight: 700; color: #d6457a; }
.tp-cap b { font-size: 16px; font-weight: 800; letter-spacing: -.03em; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-cap span { font-size: 12px; color: #6e6e73; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tp-cap em { font-style: normal; font-size: 14px; font-weight: 800; }
.tp-slide:active { transform: scale(.98); }
/* 조건·신청 / 참고: 항목마다 한 줄 (범위 표시 · 굵은 제목 · 내용) */
.svc-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; }
.svc-list li { position: relative; padding: 9px 0 9px 14px; font-size: 14.5px; line-height: 1.6; color: var(--text); word-break: keep-all; overflow-wrap: anywhere; }
.svc-list li + li { border-top: 1px dashed rgba(var(--sv-c), .22); }
.svc-list li::before { content: ''; position: absolute; left: 2px; top: 18px; width: 5px; height: 5px; border-radius: 50%; background: rgb(var(--sv-c)); }
.svc-list b { margin-right: 6px; font-weight: 800; }
.svc-sc { display: inline-block; margin-right: 6px; padding: 0 7px; border-radius: 6px; background: rgba(var(--sv-c), .14); color: rgb(var(--sv-c)); font-size: 11.5px; font-weight: 800; line-height: 20px; vertical-align: 1px; }
/* ===== 산모수첩: 우리 동네 지원금과 같은 모양 (굵은 제목 · 위쪽이 은은한 색 그라데이션인 둥근 카드 · 3D 그림) ===== */
#noteView .nb-title { margin: 6px 20px 4px; font-size: 28px; font-weight: 800; letter-spacing: -.035em; color: var(--text); }
#noteView .nb-lead { margin: 0 20px 16px; font-size: 15px; color: var(--muted); }
#noteBody { --sv-c: 255, 128, 90; }
#noteBody[data-tab="shots"] { --sv-c: 52, 190, 150; }
#noteBody[data-tab="perks"] { --sv-c: 240, 150, 40; }
#noteBody[data-tab="growth"] { --sv-c: 70, 140, 255; }
#noteView .nb-tabs { margin: 0 20px 16px; padding: 3px; border-radius: 14px; }
#noteView .nb-tabs button { height: 36px; border-radius: 11px; font-weight: 600; }
#noteView .nb-tabs button.on { font-weight: 800; color: var(--text); }
#noteBody .nb-card { padding: 18px 18px 16px; border: 1px solid rgba(var(--sv-c), .22); border-radius: 22px;
  background: linear-gradient(180deg, rgba(var(--sv-c), .16) 0, rgba(var(--sv-c), .05) 90px, var(--surface) 180px); box-shadow: none; }
#noteBody .nb-perk, #noteBody .sup-mini { --sv-c: 240, 150, 40; }
#noteBody .nb-head { align-items: center; }
#noteBody .nb-head h3, #noteBody .nb-hero2 h3, #noteBody .pk-alarm h3, #noteBody .nb-perk h3 { font-size: 19px; font-weight: 800; letter-spacing: -.03em; }
#noteBody .nb-head h3 { display: flex; align-items: center; gap: 8px; }
#noteBody .nb-head h3::before { content: ''; flex: none; width: 30px; height: 30px; background: var(--nb-ico, url(data/sv_img/note-calendar.png)) center / contain no-repeat; }
#noteBody[data-tab="preg"] .nb-card { --nb-ico: url(data/sv_img/note-checkup.png); }

#noteBody[data-tab="shots"] .nb-card { --nb-ico: url(data/sv_img/note-shots.png); }
#noteBody[data-tab="perks"] .nb-card { --nb-ico: url(data/sv_img/note-perks.png); }
#noteBody[data-tab="growth"] .nb-card { --nb-ico: url(data/sv_img/note-growth.png); }
#noteBody[data-tab] .nb-kids { --nb-ico: url(data/sv_img/birth.png); }
#noteBody[data-tab] .nb-kids.nb-due { --nb-ico: url(data/sv_img/note-pregnant.png); }
#noteBody[data-tab] .sup-mini { --sv-c: 240, 150, 40; --nb-ico: url(data/sv_img/school.png); }
#noteBody .nb-head > span { color: var(--muted); }
#noteBody .nb-eyebrow { color: rgb(var(--sv-c)); font-weight: 800; }
#noteBody .nb-h { font-weight: 800; letter-spacing: -.03em; }
#noteBody .nb-btn.primary { background: rgb(var(--sv-c)); color: #fff; font-weight: 800; }
#noteBody .nb-btn.small { color: rgb(var(--sv-c)); background: rgba(var(--sv-c), .12); font-weight: 700; }
#noteBody .nb-steps > li + li, #noteBody .pk-list > li + li, #noteBody .nb-recs > li + li, #noteBody .kl-list > li + li { border-top-color: rgba(var(--sv-c), .18); }
#noteBody .nb-link { color: rgb(var(--sv-c)); }
#noteBody .nb-due-btns .nb-link.danger { color: #c96a00; }
#noteBody .kid-tabs { margin: 0; }
#noteBody .kid-tabs button.on { border-color: rgb(var(--sv-c)); background: rgba(var(--sv-c), .1); }
#noteBody .kid-tabs button.on b, #noteBody .kid-tabs button[data-kid="new"] b { color: rgb(var(--sv-c)); }
/* 시기별 혜택: 오른쪽 칸 너비를 고정해 가운데 내용이 줄마다 같은 자리에 오게 */
.pk-row { grid-template-columns: 64px minmax(0, 1fr) 58px; }
.pk-row > em { text-align: right; justify-self: end; white-space: nowrap; }
.pk-tocare { display: flex; align-items: center; gap: 10px; width: 100%; font: inherit; color: var(--text); text-align: left; cursor: pointer; }
.pk-tocare span { flex: 1; display: grid; gap: 2px; }
.pk-tocare b { font-size: 16px; font-weight: 800; letter-spacing: -.02em; }
.pk-tocare small { font-size: 13px; color: var(--muted); }
.pk-tocare i { font-style: normal; font-size: 22px; color: var(--muted); }
#noteBody .pk-tocare { --sv-c: 52, 190, 150; }
/* 검진·접종: 무료·유료 표시와 받는 곳 */
.nb-fee { display: inline-block; margin-right: 6px; padding: 0 6px; border-radius: 5px; background: rgba(52, 190, 150, .16); color: #1f9d76; font-style: normal; font-size: 11px; font-weight: 800; line-height: 18px; vertical-align: 1px; }
.nb-fee.paid { background: rgba(201, 106, 0, .14); color: #c96a00; }
.nb-fee-list { list-style: none; margin: 0; padding: 0; }
.nb-fee-list li { display: grid; gap: 3px; padding: 11px 0; }
.nb-fee-list li + li { border-top: 1px solid rgba(var(--sv-c, 52, 190, 150), .18); }
.nb-fee-list b { font-size: 15px; font-weight: 800; }
.nb-fee-list span { font-size: 13.5px; line-height: 1.5; color: var(--text); word-break: keep-all; }
.nb-fee-list a { font-size: 13px; font-weight: 700; color: rgb(var(--sv-c, 52, 190, 150)); text-decoration: none; }
#noteBody[data-tab] .nb-feeinfo { --nb-ico: url(data/sv_img/note-checkup.png); }
/* 산모수첩 탭: 탭마다 그 내용 카드와 같은 색 (아이정보 산호 · 검진·접종 초록 · 시기별 혜택 주황 · 성장기록 파랑) */
#noteSeg button[data-ntab="preg"] { --tc: 255, 128, 90; }
#noteSeg button[data-ntab="shots"] { --tc: 52, 190, 150; }
#noteSeg button[data-ntab="perks"] { --tc: 240, 150, 40; }
#noteSeg button[data-ntab="growth"] { --tc: 70, 140, 255; }
#noteView #noteSeg button { color: var(--muted); transition: background .2s, color .2s; }
#noteView #noteSeg button.on { background: linear-gradient(180deg, rgba(var(--tc), .34) 0%, rgba(var(--tc), .1) 100%), var(--surface); color: rgb(var(--tc)); font-weight: 800; box-shadow: inset 0 0 0 1px rgba(var(--tc), .55), 0 2px 8px rgba(var(--tc), .18); }
/* 산모수첩에서 여는 창: 그 탭 색으로 (카드처럼 위쪽 그라데이션 · 색 테두리 · 색 버튼) */
.sheet[data-nt] { --sv-c: 255, 128, 90; border: 1px solid rgba(var(--sv-c), .3); border-bottom: 0;
  background: linear-gradient(180deg, rgba(var(--sv-c), .18) 0, rgba(var(--sv-c), .06) 120px, var(--surface) 240px), var(--surface); }
.sheet[data-nt="shots"] { --sv-c: 52, 190, 150; }
.sheet[data-nt="perks"] { --sv-c: 240, 150, 40; }
.sheet[data-nt="growth"] { --sv-c: 70, 140, 255; }
.sheet[data-nt] .grab { background: rgba(var(--sv-c), .5); }
.sheet[data-nt] .sub b { color: var(--text); }
.sheet[data-nt] .nb-wherebox { background: rgba(var(--sv-c), .08); border: 1px solid rgba(var(--sv-c), .25); }
.sheet[data-nt] .nb-wherebox b { color: rgb(var(--sv-c)); font-weight: 800; }
.sheet[data-nt] .nb-findlinks a, .sheet[data-nt] a { color: rgb(var(--sv-c)); }
.sheet[data-nt] .nb-field input, .sheet[data-nt] .nb-field select { border-color: rgba(var(--sv-c), .3); }
.sheet[data-nt] .nb-field input:focus { outline: 2px solid rgba(var(--sv-c), .7); outline-offset: -1px; }
.sheet[data-nt] .actions .primary, .sheet[data-nt] .nb-btn.primary { background: rgb(var(--sv-c)); color: #fff; }
.sheet[data-nt] .actions button:not(.primary) { background: rgba(var(--sv-c), .1); }

/* ---------- 카카오맵 (소방관 혜택 앱과 같은 방식) ---------- */
/* 카카오가 #map 에 까는 'kakaomap' 글자 무늬·하얀 자리표시(white.png)가 축소 순간 보이지 않게 */
#map.overscan { background: #f9f9f9 !important; }
#map img[src$="/white.png"] { opacity: 0 !important; }
/* 오버스캔으로 잘리는 카카오 로고를 보이는 영역(칩 아래 왼쪽)으로 옮긴다 */
#map .kakao-logo { left: calc(var(--vis, 0%) + 14px) !important; top: calc(var(--vis, 0%) + 60px) !important; bottom: auto !important; right: auto !important; }
/* 핀 위 업체 이름 (가까이 확대했을 때만) */
.pin-name { transform: translateY(-50px); padding: 3px 8px; border-radius: 8px; background: rgba(255, 255, 255, .95); border: 1px solid rgba(0, 0, 0, .12); box-shadow: 0 2px 6px rgba(0, 0, 0, .15);
  font-size: 11.5px; font-weight: 700; letter-spacing: -.02em; color: #1d1d1f; white-space: nowrap; max-width: 140px; overflow: hidden; text-overflow: ellipsis; cursor: pointer; pointer-events: auto; }
div:has(> .pin-name) { pointer-events: none; }
.pin-name.sel { background: #ad3363; color: #fff; border-color: #ad3363; }
/* 상세 화면 가게정보: 카카오맵 가게 카드로 (카카오 노랑) */
.place-go { display: flex; width: 100%; text-align: left; align-items: center; gap: 12px; margin: 14px 0 0; padding: 12px 14px; border-radius: 14px; background: #fee500; color: #191919; text-decoration: none; border: 0; font: inherit; cursor: pointer; }
.place-go .pg-k { display: grid; place-items: center; width: 32px; height: 32px; border-radius: 9px; background: #191919; color: #fee500; font-weight: 900; font-size: 16px; }
.place-go span:nth-child(2) { flex: 1; display: flex; flex-direction: column; gap: 1px; }
.place-go b { font-size: 15px; } .place-go small { font-size: 12px; color: #4a4a00; }
.place-go i { font-style: normal; font-size: 22px; }
/* 앱 안 로드뷰 (카카오 지도 SDK) */
.rv { position: fixed; inset: 0; z-index: 3000; background: #000; display: flex; flex-direction: column; }
.rv-bar { display: flex; justify-content: space-between; align-items: center; padding: calc(env(safe-area-inset-top) + 12px) 16px 12px; background: #ad3363; color: #fff; }
.rv-bar button { color: #fff; font-weight: 700; padding: 6px 10px; border-radius: 10px; background: rgba(255,255,255,.18); border: 0; font: inherit; }
.rv-view { flex: 1; }
.rv-msg { position: absolute; left: 16px; right: 16px; top: 45%; text-align: center; color: #fff; font-size: 15px; }
.rv-msg a { color: #ffd1e2; }

/* 당겨서 새로고침 (ptr.js) */
.home-view, .list-view, .comm-view, .sub-view { overscroll-behavior-y: contain; }
.ptr { position: fixed; left: 50%; top: 0; z-index: 1500; width: 38px; height: 38px; margin-top: 6px; border-radius: 50%; display: grid; place-items: center;
  background: var(--surface, #fff); box-shadow: 0 4px 14px rgba(0,0,0,.22); opacity: 0; transform: translate(-50%, -44px); pointer-events: none; color: #ad3363; }
.ptr svg { width: 20px; height: 20px; fill: none; stroke: currentColor; stroke-width: 2.4; stroke-linecap: round; stroke-linejoin: round; }
.ptr.back { transition: transform .25s ease, opacity .25s ease; }
.ptr.ready { background: #ad3363; color: #fff; }
.ptr.spin { opacity: 1 !important; background: #ad3363; color: #fff; transition: transform .2s ease; }
.ptr.spin svg { animation: ptrSpin .7s linear infinite; }
.ptr.spin svg path { d: path("M12 4a8 8 0 1 1-7.4 5"); }
@keyframes ptrSpin { to { transform: rotate(360deg); } }

/* 홈 '우리 동네 지원금' (지역 설정 전): 우리나라 지도 */
.sup-krmap { display: block; position: relative; width: 100%; margin: 6px 0 0; padding: 8px 16px 14px; background: none; border: 0; cursor: pointer; }
.sup-krmap svg { display: block; width: 86%; max-width: 320px; height: auto; margin: 0 auto; }
.sup-krmap path, .sup-krmap circle { fill: #fde8f0; stroke: #e2588d; stroke-width: 1.6; stroke-linejoin: round; transition: fill .2s; }
.sup-krmap:hover path, .sup-krmap:active path { fill: #f9d0e0; }
.sup-krmap span { position: absolute; right: 18px; bottom: 16px; padding: 6px 12px; border-radius: 999px; background: #ad3363; color: #fff; font-size: 13px; font-weight: 700; }
.sup-krmap .kr-box { fill: none; stroke: #f9d0e0; stroke-opacity: .7; stroke-width: 2; stroke-dasharray: 6 5; }
.sup-krmap .kr-lab { fill: #fde8f0; font-size: 22px; font-weight: 700; text-anchor: middle; }

/* 혜택 목록: 정렬 메뉴 줄 · 업체 사이는 구분선만 (상자 없이, 소방관 혜택 앱과 같게) */
.list-bar { display: flex; justify-content: flex-end; align-items: center; margin: 2px 16px 0; }
.sort-btn { display: flex; align-items: center; gap: 2px; padding: 8px 0; color: var(--rose); font-weight: 700; font-size: 15px; }
.sort-btn .caret { width: 16px; height: 16px; fill: none; stroke: currentColor; stroke-width: 2; }
#all.panel.lines { margin: 0 16px; background: none; border: 0; border-radius: 0; box-shadow: none; overflow: visible; }
#all.panel.lines .row { padding: 14px 0; }
.leaflet-tooltip.pin-name { transform: none; margin-top: -42px; }
.leaflet-tooltip.pin-name::before { display: none; }