/* 함께할개 디자인 시스템 v5 — 흰 배경 · 중립색 · 장밋빛 강조 (docs/DESIGN_SYSTEM.md, docs/MOBILE_UI_DOMAIN_INTEGRATION.md) */
:root {
  /* 색상 — 흰 배경 · 중립색 · 장밋빛 강조(2026-10-04 모바일 UI 지시서). 대비는 흰 배경 기준 실측값 */
  --white: #ffffff;
  --bg-soft: #f7f8fa;      /* 보조 영역: 검색·입력·작은 구분 영역 */
  --text: #23262f;         /* 본문 15.11:1 */
  --muted: #626773;        /* 보조 글자 5.66:1(보조 배경 위 5.33:1) */
  --line: #e9ebef;         /* 얇은 경계 */
  --input-line: #8a919c;   /* 입력칸 경계(비텍스트 3:1 이상) */
  --primary: #c9405b;      /* 브랜드·주요 행동. 흰 글자 4.81:1 */
  --primary-strong: #ad3348;
  --deco: #f16d73;         /* 작은 장식에만. 흰 글자를 올리지 않는다 */
  --select-bg: #fff1f4;    /* 선택된 필터·메뉴 배경 */
  --select-fg: #ad3348;    /* 선택 배경 위 글자 5.72:1 */
  --select-line: #f7c6cd;  /* 선택 영역 보조 경계 */
  --mint-bg: #edf7f4; --mint: #20634f;   /* 답변 있음 */
  --info-bg: #eff5ff; --info: #315fac;   /* 안내 */
  --photo-bg: #f3f4f7;     /* 사진 자리 */
  /* 상태(문구·아이콘과 함께 사용) */
  --ok: #2f6b3a;      --ok-bg: #edf6ef;
  --cond: #8a5a12;    --cond-bg: #fbf1e1;
  --no: #a23b3b;      --no-bg: #fbecec;
  --unknown: #5d636d; --unknown-bg: #f1f2f5;
  --focus: #315fac;
  /* 형태 */
  --r-btn: 10px;
  --r-input: 12px;
  --r-chip: 999px;
  --r-card: 14px;
  --r-photo: 12px;
  --r-sheet: 20px;
  --shadow-float: 0 6px 24px rgba(36, 41, 51, .12);
  --font: "Pretendard", "Pretendard Variable", -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Sans KR", "Malgun Gothic", "Segoe UI", sans-serif;
  --header-h: 60px;
  --nav-h: 64px;
  --safe-b: env(safe-area-inset-bottom, 0px);
  --page: 1160px;
  --read: 720px;
  --gutter: 16px;
  /* 간격 8/12/16/24/32 */
  --s1: 8px; --s2: 12px; --s3: 16px; --s4: 24px; --s5: 32px;
}

*, *::before, *::after { box-sizing: border-box; }
[hidden] { display: none !important; }
html { -webkit-text-size-adjust: 100%; }
body {
  margin: 0; background: var(--white); color: var(--text); font-family: var(--font);
  font-size: 16px; line-height: 1.6; word-break: keep-all; overflow-wrap: anywhere;
  padding-bottom: calc(var(--nav-h) + var(--safe-b));
}
body.no-nav { padding-bottom: 0; }
@media (min-width: 960px) { body { padding-bottom: 0; } }
img { max-width: 100%; display: block; }
a { color: inherit; text-decoration-thickness: 1px; text-underline-offset: 3px; }
button { font: inherit; color: inherit; }
:focus-visible { outline: 3px solid var(--focus); outline-offset: 2px; border-radius: 6px; }
h1, h2, h3 { line-height: 1.35; margin: 0 0 var(--s2); font-weight: 700; letter-spacing: -0.01em; }
h1 { font-size: 24px; }
h2 { font-size: 18px; }
h3 { font-size: 16px; font-weight: 600; }
@media (min-width: 960px) { h1 { font-size: 28px; } h2 { font-size: 21px; } }
p { margin: 0 0 var(--s2); }
.sr-only { position: absolute !important; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
.skip { position: absolute; left: 8px; top: -60px; background: var(--primary); color: #fff; padding: 8px 12px; border-radius: 8px; z-index: 100; }
.skip:focus { top: 8px; }
.icon { width: 22px; height: 22px; flex: none; fill: none; stroke: currentColor; stroke-width: 1.8; stroke-linecap: round; stroke-linejoin: round; }
.icon-sm { width: 18px; height: 18px; }
.muted { color: var(--muted); }
.small { font-size: 14px; }
.xsmall { font-size: 13px; }
.center { text-align: center; }
.mt-0 { margin-top: 0 } .mt-1 { margin-top: var(--s1) } .mt-2 { margin-top: var(--s3) } .mt-3 { margin-top: var(--s4) } .mt-4 { margin-top: var(--s5) }
.mb-0 { margin-bottom: 0 } .mb-1 { margin-bottom: var(--s1) } .mb-2 { margin-bottom: var(--s3) }
.row { display: flex; align-items: center; gap: var(--s1); flex-wrap: wrap; }
.row-between { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); }
.grow { flex: 1 1 auto; min-width: 0; }
.stack > * + * { margin-top: var(--s2); }
.list-plain { list-style: none; margin: 0; padding: 0; }

/* 레이아웃 */
.page { max-width: var(--page); margin: 0 auto; padding: 0 var(--gutter); }
.read { max-width: var(--read); }
.with-aside { display: block; }
@media (min-width: 1024px) { .with-aside { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: var(--s5); align-items: start; } .aside-sticky { position: sticky; top: calc(var(--header-h) + 16px); } }
.section { padding: var(--s4) 0; }
.section + .section { border-top: 1px solid var(--line); }
.section-head { display: flex; align-items: center; justify-content: space-between; gap: var(--s2); margin-bottom: var(--s2); }
.section-head h2 { margin: 0; }
.more { display: inline-flex; align-items: center; gap: 2px; min-height: 44px; font-size: 14px; color: var(--select-fg); text-decoration: none; font-weight: 600; white-space: nowrap; }
.env-note { background: var(--bg-soft); color: var(--muted); font-size: 12px; text-align: center; padding: 4px 12px; border-bottom: 1px solid var(--line); }

/* 헤더 */
.header { position: sticky; top: 0; z-index: 40; background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); }
.header-inner { display: flex; align-items: center; gap: var(--s1); height: var(--header-h); }
.brand { display: inline-flex; align-items: center; gap: 10px; text-decoration: none; color: var(--text); font-weight: 700; font-size: 19px; letter-spacing: -0.02em; min-height: 44px; }
.brand img { width: 42px; height: 42px; border-radius: 50%; }
.header-nav { display: none; gap: 4px; margin-left: var(--s4); }
.header-nav a { padding: 8px 12px; border-radius: 10px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; }
.header-nav a:hover { color: var(--text); background: var(--bg-soft); }
.header-nav a[aria-current="page"] { color: var(--select-fg); background: var(--select-bg); font-weight: 700; }
@media (min-width: 960px) { .header-nav { display: flex; } }
.icon-btn { position: relative; display: inline-grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 0; background: transparent; color: var(--text); text-decoration: none; cursor: pointer; }
.icon-btn:hover { background: var(--bg-soft); }
.dot { position: absolute; top: 9px; right: 9px; width: 8px; height: 8px; border-radius: 50%; background: var(--deco); box-shadow: 0 0 0 2px #fff; }

/* 하단 메뉴(모바일 최대 5개: 홈·장소·커뮤니티·물어볼개·전체, CMS 상단·하단 메뉴) — 선택은 색·굵기·위 막대로 하나만 */
.tabbar { position: fixed; z-index: 50; left: 0; right: 0; bottom: 0; background: var(--white); border-top: 1px solid var(--line); padding-bottom: var(--safe-b); }
.tabbar ul { list-style: none; margin: 0 auto; padding: 0; max-width: 600px; display: grid; grid-template-columns: repeat(var(--tabs, 5), minmax(0, 1fr)); }
.tabbar a { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px; min-width: 44px; height: var(--nav-h); text-decoration: none; color: var(--muted); font-size: 12px; font-weight: 600; white-space: nowrap; }
.tabbar a[aria-current="page"] { color: var(--select-fg); font-weight: 800; }
/* 색만으로 구분하지 않도록 선택된 메뉴 위에 막대 표시 */
.tabbar a[aria-current="page"]::before { content: ""; position: absolute; top: 0; left: 28%; right: 28%; height: 3px; border-radius: 0 0 3px 3px; background: var(--select-fg); }
.tabbar a[aria-current="page"] .icon { stroke-width: 2.2; }
@media (min-width: 960px) { .tabbar { display: none; } }
body.no-nav .tabbar { display: none; }

/* 버튼 */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 16px; border-radius: var(--r-btn); border: 1px solid var(--line); background: var(--white); color: var(--text); font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; line-height: 1.2; }
.btn:hover { background: var(--bg-soft); border-color: #d3d7de; }
.btn-primary { background: var(--primary); border-color: var(--primary); color: #fff; }
.btn-primary:hover, .btn-primary:active { background: var(--primary-strong); border-color: var(--primary-strong); }
.btn-soft { background: var(--select-bg); border-color: var(--select-bg); color: var(--select-fg); }
.btn-ghost { background: transparent; border-color: transparent; }
.btn-danger { color: var(--no); }
.btn-lg { min-height: 50px; font-size: 16px; }
.btn-sm { min-height: 36px; padding: 6px 12px; font-size: 14px; }
.btn-block { display: flex; width: 100%; }
.btn[disabled], .btn[aria-disabled="true"] { opacity: .5; cursor: not-allowed; }
.btn-kakao { background: #fee500; border-color: #fee500; color: #191919; }
.btn-kakao:hover { background: #f5dc00; }
.btn-google { background: #fff; border-color: #dadce0; color: #1f1f1f; }
.link { color: var(--select-fg); font-weight: 600; }

/* 입력 */
label, .label { display: block; font-weight: 600; font-size: 15px; margin-bottom: 6px; }
input[type=text], input[type=search], input[type=email], input[type=url], input[type=number], input[type=tel], input[type=date], input[type=datetime-local], input[type=password], select, textarea {
  width: 100%; min-height: 48px; padding: 11px 14px; border: 1px solid var(--input-line); border-radius: var(--r-input); background: var(--white); color: var(--text); font: inherit; font-size: 16px;
}
input:focus, select:focus, textarea:focus { border-color: var(--primary); outline: 3px solid rgba(201,64,91,.18); outline-offset: 0; }
textarea { min-height: 120px; resize: vertical; line-height: 1.6; }
input[type=checkbox], input[type=radio] { width: 20px; height: 20px; accent-color: var(--primary); flex: none; margin: 2px 0 0; }
input[type=file] { font-size: 15px; }
.field { margin-bottom: var(--s3); }
.help { font-size: 13px; color: var(--muted); margin: 6px 0 0; }
.errorlist { list-style: none; margin: 6px 0 0; padding: 0; color: var(--no); font-size: 14px; }
.errorlist li::before { content: "! "; font-weight: 700; }
.field.has-error input, .field.has-error select, .field.has-error textarea { border-color: var(--no); }
.check { display: flex; gap: 10px; align-items: flex-start; min-height: 44px; padding: 10px 0; font-weight: 500; font-size: 15px; margin: 0; cursor: pointer; }
.choice-list { list-style: none; padding: 0; margin: 0; display: grid; gap: var(--s1); }
.choice-list label { display: flex; gap: 10px; align-items: center; min-height: 48px; padding: 10px 14px; border: 1px solid var(--line); border-radius: var(--r-input); font-weight: 500; margin: 0; cursor: pointer; }
.choice-list label:has(input:checked) { border-color: var(--primary); background: var(--select-bg); }
fieldset { border: 0; padding: 0; margin: 0 0 var(--s3); min-width: 0; }
legend { font-weight: 700; font-size: 16px; padding: 0; margin-bottom: var(--s1); }
.pw-wrap { position: relative; }
.pw-wrap input { padding-right: 64px; }
.pw-toggle { position: absolute; right: 4px; top: 4px; height: 40px; padding: 0 12px; border: 0; background: transparent; color: var(--select-fg); font-weight: 600; font-size: 14px; cursor: pointer; border-radius: 10px; }
.form-grid { display: grid; gap: 0 var(--s2); }
@media (min-width: 560px) { .form-grid.two { grid-template-columns: 1fr 1fr; } }
.form-step { padding: var(--s4) 0; border-top: 1px solid var(--line); }
.form-step:first-of-type { border-top: 0; padding-top: var(--s2); }
.form-step > h2 { font-size: 17px; }
.sticky-actions { position: sticky; bottom: 0; z-index: 20; background: var(--white); border-top: 1px solid var(--line); padding: var(--s2) 0 calc(var(--s2) + var(--safe-b)); display: flex; gap: var(--s1); }

/* 검색 */
.search { position: relative; display: flex; align-items: center; }
.search .icon { position: absolute; left: 14px; color: var(--muted); pointer-events: none; }
.search input { min-height: 50px; padding-left: 44px; padding-right: 92px; border-radius: 14px; background: var(--bg-soft); border-color: var(--input-line); }
.search input:focus { background: var(--white); }
.search .btn { position: absolute; right: 4px; min-height: 42px; border-radius: 11px; }

/* 칩·필터 */
.chips { display: flex; gap: var(--s1); overflow-x: auto; padding: 2px 0 4px; scrollbar-width: none; -webkit-overflow-scrolling: touch; }
.chips::-webkit-scrollbar { display: none; }
.chips.wrap { flex-wrap: wrap; overflow: visible; }
.chip { flex: none; display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 7px 14px; border: 1px solid var(--line); border-radius: 999px; background: var(--white); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; white-space: nowrap; cursor: pointer; }
.chip:hover { border-color: #d3d7de; }
.chip.is-on, .chip[aria-pressed="true"] { background: var(--select-bg); border-color: var(--select-line); color: var(--select-fg); }
.chip .count { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 12px; }
.filter-bar { display: flex; flex-wrap: wrap; gap: var(--s1); align-items: center; }
.filter-bar .chips { flex: 1; min-width: 0; }

/* 상태 라벨(동반 조건) */
.tag { display: inline-flex; align-items: center; gap: 4px; padding: 3px 9px; border-radius: 8px; font-size: 13px; font-weight: 600; line-height: 1.4; white-space: nowrap; background: var(--unknown-bg); color: var(--unknown); }
.tag .icon { width: 14px; height: 14px; stroke-width: 2.2; }
.tag-ok, .tag-allowed, .tag-yes { background: var(--ok-bg); color: var(--ok); }
.tag-conditional, .tag-rule { background: var(--cond-bg); color: var(--cond); }
.tag-no { background: var(--no-bg); color: var(--no); }
.tag-unknown { background: var(--unknown-bg); color: var(--unknown); }
.tag-ad { background: #f1f2ef; color: #454b55; font-size: 12px; }
.verified { display: inline-flex; align-items: center; gap: 4px; color: var(--ok); font-size: 13px; font-weight: 600; }
.unverified { display: inline-flex; align-items: center; gap: 4px; color: var(--unknown); font-size: 13px; font-weight: 600; }
.stale { color: var(--cond); font-size: 13px; font-weight: 600; }

/* 장소 카드 */
.place-grid { display: grid; gap: var(--s4) var(--s3); grid-template-columns: 1fr; }
@media (min-width: 600px) { .place-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .place-grid.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.place-card { position: relative; }
.place-card .photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden; background: var(--photo-bg); }
.place-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.place-card .body { padding-top: 10px; }
.place-card h3 { font-size: 17px; margin: 0 0 2px; }
.place-card h3 a { text-decoration: none; }
.place-card h3 a::after { content: ""; position: absolute; inset: 0; z-index: 1; }
.place-card .meta { font-size: 14px; color: var(--muted); }
.place-card.is-closed .photo { opacity: .6; }
.save-btn { position: absolute; z-index: 2; top: 10px; right: 10px; width: 44px; height: 44px; border-radius: 50%; border: 0; background: #fff; color: var(--text); display: grid; place-items: center; box-shadow: 0 1px 6px rgba(0,0,0,.18); cursor: pointer; }
.save-btn[aria-pressed="true"] { color: var(--select-fg); }
.save-btn[aria-pressed="true"] .icon { fill: var(--select-line); }
.placeholder { width: 100%; height: 100%; display: grid; place-items: center; background: var(--photo-bg); color: #b3b9c3; }
.placeholder .icon { width: 36px; height: 36px; stroke-width: 1.4; }
/* 1열 목록형(긴 이름·작은 화면용) */
.place-list .place-card { display: grid; grid-template-columns: 108px minmax(0, 1fr); gap: var(--s2); align-items: start; padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.place-list .place-card .photo { aspect-ratio: 1 / 1; border-radius: 12px; }
.place-list .place-card .body { padding-top: 0; }
.place-list .save-btn { top: auto; right: 0; bottom: 12px; width: 40px; height: 40px; box-shadow: none; border: 1px solid var(--line); }

/* 피드(커뮤니티) */
.feed > li { border-bottom: 1px solid var(--line); }
.feed-item { display: block; padding: var(--s3) 0; text-decoration: none; }
.feed-item.with-photo { display: grid; grid-template-columns: minmax(0, 1fr) 96px; gap: var(--s2); align-items: start; }
.feed-item .thumb { width: 96px; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--photo-bg); }
.feed-item .thumb img { width: 100%; height: 100%; object-fit: cover; }
.feed-item h3 { font-size: 16px; margin: 0 0 4px; }
.feed-item .excerpt { color: #3c424c; font-size: 15px; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; margin: 0 0 6px; }
.feed-item .meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.feed-item .place-ref { display: inline-flex; align-items: center; gap: 3px; color: var(--select-fg); font-weight: 600; }
.memory-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s2); }
@media (min-width: 720px) { .memory-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
@media (min-width: 1024px) { .memory-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.memory { display: block; text-decoration: none; }
.memory .photo { aspect-ratio: 1 / 1; border-radius: var(--r-photo); overflow: hidden; background: var(--photo-bg); }
.memory .photo img { width: 100%; height: 100%; object-fit: cover; }
.memory .cap { font-size: 14px; font-weight: 600; margin-top: 6px; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.memory .who { font-size: 13px; color: var(--muted); }
.memory .textonly { aspect-ratio: 1 / 1; border-radius: var(--r-photo); background: var(--photo-bg); padding: var(--s3); display: flex; align-items: flex-end; font-weight: 600; }

/* 질문 */
.q-item { display: block; padding: var(--s3) 0; text-decoration: none; }
.q-item h3 { font-size: 16px; margin: 6px 0 4px; }
.q-state { display: inline-flex; align-items: center; gap: 4px; font-size: 13px; font-weight: 700; padding: 3px 10px 3px 8px; border-radius: 999px; line-height: 1.4; border: 1px solid transparent; }
.q-state .icon { width: 15px; height: 15px; stroke-width: 2.2; }
.q-wait { background: var(--bg-soft); color: #4f5560; border-color: var(--line); }   /* 답변 기다려요: 중립 + 물음표 */
.q-ans { background: var(--mint-bg); color: var(--mint); }                             /* 답변 있어요 N: 옅은 민트 + 말풍선 */
.q-done { background: var(--white); color: var(--mint); border-color: var(--mint); }  /* 채택 완료: 체크 + 테두리(답변 있음과 구분) */
.answer { padding: var(--s3) 0; border-top: 1px solid var(--line); }
.answer.is-accepted { background: var(--white); border: 1px solid var(--mint); border-radius: var(--r-card); padding: var(--s3); margin: var(--s2) 0; }

/* 상세 */
.gallery { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; gap: var(--s1); margin: 0 calc(var(--gutter) * -1); padding: 0 var(--gutter); scrollbar-width: none; }
.gallery::-webkit-scrollbar { display: none; }
.gallery figure { margin: 0; flex: 0 0 88%; scroll-snap-align: center; aspect-ratio: 4 / 3; border-radius: var(--r-photo); overflow: hidden; background: var(--photo-bg); }
.gallery figure:only-child { flex-basis: 100%; }
.gallery img { width: 100%; height: 100%; object-fit: cover; }
@media (min-width: 760px) { .gallery { margin: 0; padding: 0; } .gallery figure { flex-basis: 60%; } }
.title-block h1 { margin-bottom: 4px; }
.conditions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s1); }
@media (min-width: 600px) { .conditions { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.cond { padding: 10px 12px; border-radius: 12px; background: var(--bg-soft); }
.cond .k { font-size: 13px; color: var(--muted); }
.cond .v { margin-top: 2px; }
.rule-note { padding: 12px 14px; border-radius: 12px; background: var(--photo-bg); font-size: 15px; }
.actions { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s1); }
.actions .btn { flex-direction: column; gap: 4px; min-height: 64px; font-size: 13px; padding: 8px 4px; }
.info-rows { margin: 0; }
.info-rows > div { display: grid; grid-template-columns: 112px minmax(0, 1fr); gap: var(--s2); padding: 12px 0; border-bottom: 1px solid var(--line); }
.info-rows dt { color: var(--muted); font-size: 15px; }
.info-rows dd { margin: 0; }
.prose { font-size: 16px; line-height: 1.75; }
.prose p { margin: 0 0 1em; }
.prose h2 { margin-top: 1.5em; }
.prose img { border-radius: var(--r-photo); }
.notice { padding: 12px 14px; border-radius: 12px; background: var(--bg-soft); font-size: 15px; }
.notice-warn { background: var(--cond-bg); color: #5c3c0b; }
.notice-danger { background: var(--no-bg); color: #6d2626; }
.notice-ok { background: var(--ok-bg); color: #24502c; }
.breadcrumbs { font-size: 13px; color: var(--muted); padding: var(--s2) 0 0; }
.breadcrumbs ol { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 4px; }
.breadcrumbs li + li::before { content: "/"; margin-right: 4px; color: #c4c9d1; }
.breadcrumbs a { text-decoration: none; }
.byline { font-size: 14px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.reactions { display: flex; gap: var(--s1); flex-wrap: wrap; }
.menu-more { position: relative; }
.menu-more summary { list-style: none; cursor: pointer; }
.menu-more summary::-webkit-details-marker { display: none; }
.menu-more .menu { position: absolute; right: 0; z-index: 30; min-width: 160px; background: #fff; border: 1px solid var(--line); border-radius: 12px; box-shadow: var(--shadow-float); padding: 6px; }
.menu-more .menu a, .menu-more .menu button { display: flex; width: 100%; min-height: 44px; align-items: center; padding: 0 12px; border: 0; background: none; text-decoration: none; border-radius: 8px; font-size: 15px; cursor: pointer; text-align: left; }
.menu-more .menu a:hover, .menu-more .menu button:hover { background: var(--bg-soft); }

/* 댓글 */
.comment { padding: var(--s2) 0; border-top: 1px solid var(--line); }
.comment .who { font-weight: 600; font-size: 14px; }
.comment .when { color: var(--muted); font-size: 13px; font-weight: 400; margin-left: 6px; }
.replies { margin-left: var(--s3); padding-left: var(--s2); border-left: 2px solid var(--line); }
.composer { position: sticky; bottom: calc(var(--nav-h) + var(--safe-b)); background: #fff; padding: var(--s2) 0; border-top: 1px solid var(--line); display: flex; gap: var(--s1); align-items: flex-end; z-index: 10; }
.composer textarea { min-height: 48px; height: 48px; }
@media (min-width: 960px) { .composer { bottom: 0; } }

/* 사진 업로드 */
.uploader { border: 1.5px dashed #cfd4dc; border-radius: var(--r-photo); padding: var(--s3); background: var(--bg-soft); }
.uploader-add { display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 56px; border-radius: 12px; background: #fff; border: 1px solid var(--line); font-weight: 600; cursor: pointer; }
.uploader-add input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.thumbs { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); margin-top: var(--s2); }
@media (min-width: 560px) { .thumbs { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.thumb-item { position: relative; aspect-ratio: 1 / 1; border-radius: 12px; overflow: hidden; background: var(--photo-bg); }
.thumb-item img { width: 100%; height: 100%; object-fit: cover; }
.thumb-item .cover-badge { position: absolute; left: 6px; top: 6px; background: var(--primary); color: #fff; font-size: 12px; font-weight: 700; padding: 1px 8px; border-radius: 6px; }
.thumb-item .thumb-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: space-between; padding: 4px; background: linear-gradient(transparent, rgba(0,0,0,.45)); }
.thumb-item .thumb-actions button { width: 36px; height: 36px; border-radius: 50%; border: 0; background: #fff; display: grid; place-items: center; cursor: pointer; }
.progress { height: 8px; border-radius: 999px; background: var(--line); overflow: hidden; }
.progress > span { display: block; height: 100%; width: 0; background: var(--primary); transition: width .2s; }

/* 빈 상태 */
.empty { text-align: center; padding: var(--s5) var(--s3); background: var(--bg-soft); border-radius: var(--r-card); }
.empty .icon { width: 40px; height: 40px; color: #b3b9c3; stroke-width: 1.4; margin: 0 auto var(--s1); }
.empty p { margin: 0 0 var(--s2); color: #3c424c; }
.empty .btn { margin-top: 4px; }

/* 바텀시트 */
dialog.sheet { border: 0; padding: 0; width: 100%; max-width: 560px; margin: auto auto 0; border-radius: var(--r-sheet) var(--r-sheet) 0 0; max-height: 88vh; box-shadow: var(--shadow-float); color: var(--text); }
dialog.sheet::backdrop { background: rgba(20, 24, 32, .4); }
@media (min-width: 720px) { dialog.sheet { margin: auto; border-radius: var(--r-sheet); } }
.sheet-head { display: flex; align-items: center; justify-content: space-between; padding: var(--s3) var(--s3) var(--s1); }
.sheet-head h2 { margin: 0; font-size: 18px; }
.sheet-body { padding: 0 var(--s3) var(--s3); overflow-y: auto; max-height: calc(88vh - 140px); }
.sheet-foot { display: flex; gap: var(--s1); padding: var(--s2) var(--s3) calc(var(--s2) + var(--safe-b)); border-top: 1px solid var(--line); }
.sheet-group { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.sheet-group:last-child { border-bottom: 0; }
.sheet-group h3 { font-size: 15px; margin-bottom: var(--s1); }
.region-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s1); }
.region-grid a, .region-grid button { min-height: 46px; display: grid; place-items: center; border: 1px solid var(--line); border-radius: 12px; background: #fff; font-weight: 600; font-size: 15px; text-decoration: none; cursor: pointer; }

/* 메시지·토스트 */
.messages { list-style: none; margin: var(--s2) 0; padding: 0; }
.messages li { padding: 12px 14px; border-radius: 12px; background: var(--ok-bg); color: #24502c; font-size: 15px; margin-bottom: var(--s1); }
.messages li.error { background: var(--no-bg); color: #6d2626; }
.messages li.warning, .messages li.info { background: var(--cond-bg); color: #5c3c0b; }
.toast { position: fixed; left: 50%; transform: translateX(-50%); bottom: calc(var(--nav-h) + var(--safe-b) + 12px); background: #242933; color: #fff; padding: 10px 16px; border-radius: 12px; font-size: 14px; z-index: 80; box-shadow: var(--shadow-float); }

/* 스켈레톤 */
.skeleton { background: linear-gradient(90deg, #eff1f4 25%, #f8f9fb 37%, #eff1f4 63%); background-size: 400% 100%; animation: sk 1.4s ease infinite; border-radius: 10px; }
@keyframes sk { 0% { background-position: 100% 50%; } 100% { background-position: 0 50%; } }
.media-pending { width: 100%; height: 100%; display: grid; place-items: center; font-size: 13px; color: var(--muted); background: var(--photo-bg); }

/* 페이지 이동 */
.pagination { display: flex; justify-content: center; align-items: center; gap: var(--s1); margin: var(--s4) 0; }

/* 광고 */
.ad { position: relative; margin: var(--s4) 0; text-align: center; }
.ad-label { display: inline-block; font-size: 12px; color: var(--muted); margin-bottom: 4px; }
.ad-link { display: block; max-width: 100%; margin: 0 auto; border-radius: 12px; overflow: hidden; }
.ad-link img { width: 100%; height: auto; }

/* 브랜드·로그인 */
.auth { max-width: 420px; margin: var(--s4) auto var(--s5); }
.auth-brand { display: flex; flex-direction: column; align-items: center; gap: var(--s1); margin-bottom: var(--s4); text-align: center; }
.auth-brand img { width: 72px; height: 72px; border-radius: 50%; }
.divider { display: flex; align-items: center; gap: var(--s2); color: var(--muted); font-size: 13px; margin: var(--s4) 0; }
.divider::before, .divider::after { content: ""; flex: 1; height: 1px; background: var(--line); }
.brand-hero { display: grid; gap: var(--s4); align-items: center; padding: var(--s4) 0; }
.brand-hero img { width: min(320px, 80vw); margin: 0 auto; border-radius: 50%; }
@media (min-width: 840px) { .brand-hero { grid-template-columns: 360px 1fr; } }

/* 표(마이·CMS 공통) */
.table-wrap { position: relative; overflow-x: auto; border: 1px solid var(--line); border-radius: 12px; }
.table { width: 100%; border-collapse: collapse; font-size: 14px; }
.table th, .table td { padding: 10px 12px; border-bottom: 1px solid var(--line); text-align: left; vertical-align: top; }
.table th { font-size: 13px; color: var(--muted); font-weight: 600; background: var(--bg-soft); white-space: nowrap; }

/* 마이 메뉴 */
.menu-list > li > a, .menu-list > li > form > button { display: flex; align-items: center; gap: var(--s2); min-height: 56px; padding: 0 2px; border: 0; border-bottom: 1px solid var(--line); background: none; width: 100%; text-decoration: none; font-size: 16px; cursor: pointer; text-align: left; }
.menu-list .count { margin-left: auto; color: var(--muted); font-size: 14px; }
.profile-head { display: flex; align-items: center; gap: var(--s2); padding: var(--s3) 0; }
.avatar { width: 56px; height: 56px; border-radius: 50%; overflow: hidden; background: var(--photo-bg); flex: none; }
.avatar img { width: 100%; height: 100%; object-fit: cover; }

/* 푸터 */
.footer { margin-top: var(--s5); padding: var(--s4) 0 var(--s5); border-top: 1px solid var(--line); background: var(--bg-soft); font-size: 13px; color: var(--muted); }
.footer nav { display: flex; flex-wrap: wrap; gap: 0 var(--s3); margin-bottom: var(--s1); }
.footer a { text-decoration: none; min-height: 36px; display: inline-flex; align-items: center; }

/* 작성 버튼(문맥별) */
.fab { position: fixed; z-index: 45; right: var(--gutter); bottom: calc(var(--nav-h) + var(--safe-b) + 16px); display: inline-flex; align-items: center; gap: 6px; min-height: 52px; padding: 0 20px; border-radius: 999px; background: var(--primary); color: #fff; font-weight: 700; text-decoration: none; box-shadow: var(--shadow-float); }
.fab:hover { background: var(--select-fg); }
@media (min-width: 960px) { .fab { bottom: 24px; } }

@media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation: none !important; transition: none !important; scroll-behavior: auto !important; } }

/* 장소 목록: 모바일은 1열 목록형, 넓은 화면은 카드 그리드 */
.place-list .body { padding-right: 52px; }
.place-list .save-btn { top: 12px; right: 0; bottom: auto; }
@media (min-width: 720px) {
  .place-list:not(.compact) { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: var(--s4) var(--s3); }
  .place-list:not(.compact) .place-card { display: block; padding: 0; border: 0; }
  .place-list:not(.compact) .place-card .photo { aspect-ratio: 4 / 3; border-radius: var(--r-photo); }
  .place-list:not(.compact) .place-card .body { padding: 10px 0 0; }
  .place-list:not(.compact) .save-btn { top: 10px; right: 10px; width: 44px; height: 44px; border: 0; box-shadow: 0 1px 6px rgba(0,0,0,.18); }
}
@media (min-width: 1024px) { .place-list.wide { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.greeting { padding: var(--s4) 0 var(--s2); }
.greeting h1 { font-size: 24px; margin: 0 0 4px; }
.greeting p { color: var(--muted); margin: 0; }
.quick { display: flex; flex-direction: column; gap: var(--s2); padding: var(--s2) 0 var(--s1); }
.result-bar { display: flex; align-items: center; justify-content: space-between; gap: var(--s1); padding: var(--s2) 0; font-size: 14px; color: var(--muted); }
.result-bar select { width: auto; min-height: 40px; padding: 6px 10px; font-size: 14px; }
.page-head { padding: var(--s4) 0 var(--s2); }
.page-head h1 { margin: 0 0 4px; }
.page-head p { margin: 0; color: var(--muted); }
.tabs { display: flex; gap: var(--s3); border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.tabs::-webkit-scrollbar { display: none; }
.tabs a { flex: none; display: inline-flex; align-items: center; min-height: 46px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.tabs a:hover { color: var(--text); }
.tabs a[aria-current="page"] { color: var(--select-fg); border-bottom-color: var(--primary); font-weight: 700; }
.q-item .meta { font-size: 13px; color: var(--muted); display: flex; flex-wrap: wrap; gap: 4px 10px; align-items: center; }
.q-item .place-ref { display: inline-flex; align-items: center; gap: 3px; color: var(--select-fg); font-weight: 600; }
.auth-page main { max-width: 460px; padding-top: var(--s4); padding-bottom: var(--s5); }
.auth-page main h1 { font-size: 22px; }
.auth-page main form { margin-top: var(--s2); }
.auth-page main form > .btn, .auth-page main form button[type=submit] { width: 100%; min-height: 50px; }
.provider-list { list-style: none; margin: 0; padding: 0; display: grid; gap: var(--s1); }
.map-box { height: 62vh; min-height: 320px; border-radius: var(--r-photo); overflow: hidden; background: var(--bg-soft); border: 1px solid var(--line); }
/* 검색: 돋보기 = 검색 버튼(안내 문구가 잘리지 않게 오른쪽 버튼 없음) */
.search { max-width: 680px; }
.search .search-submit { position: absolute; left: 3px; top: 50%; transform: translateY(-50%); width: 44px; height: 44px; display: grid; place-items: center; border: 0; background: transparent; color: var(--select-fg); border-radius: 12px; cursor: pointer; }
.search .search-submit .icon { position: static; color: currentColor; }
.search:has(.search-submit) input { padding-left: 48px; padding-right: 14px; }
.search input::-webkit-search-cancel-button { cursor: pointer; }
body:has(.fab) main { padding-bottom: 88px; } /* 작성 버튼이 마지막 카드의 저장 버튼을 가리지 않게 */
.map-wrap { position: relative; }
.map-research { position: absolute; z-index: 5; top: 12px; left: 50%; transform: translateX(-50%); box-shadow: var(--shadow-float); }
.place-card.is-selected { background: var(--select-bg); border-radius: 12px; }

/* BEST·인증마크 */
.best-mark { display: block; margin-bottom: 4px; }
.best-state img { flex: none; }
.best-strip { display: grid; grid-auto-flow: column; grid-auto-columns: minmax(240px, 78%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 4px; }
.best-strip > li { scroll-snap-align: start; }
@media (min-width: 768px) { .best-strip { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); overflow: visible; } }

/* 전체 메뉴 */
.menu-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: 6px 0 14px; }
.menu-grid a { display: flex; align-items: center; gap: 8px; min-height: 48px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-btn); color: var(--text); text-decoration: none; background: var(--white); }
.menu-grid a:hover, .menu-grid a:focus-visible { border-color: var(--primary); background: var(--select-bg); }
@media (min-width: 768px) { .menu-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.owner-badge { display: inline-flex; align-items: center; gap: 4px; font-size: .8125rem; color: var(--select-fg); }
.status-marks { flex-wrap: wrap; gap: 8px; }
.status-marks > span { display: inline-flex; align-items: center; gap: 4px; }
.disclosure p + p { margin-top: 4px; }
.tabs-row { display: flex; align-items: flex-end; gap: 8px; border-bottom: 1px solid var(--line); }
.tabs-row .tabs { border-bottom: 0; flex: 1; min-width: 0; -webkit-mask-image: linear-gradient(90deg, #000 85%, transparent); mask-image: linear-gradient(90deg, #000 85%, transparent); }
.tabs-more { flex: none; min-height: 44px; }
.sortbar { margin: 10px 0; }
.chip[aria-current="true"], .menu-grid a[aria-current="page"] { border-color: var(--primary); background: var(--select-bg); color: var(--select-fg); font-weight: 600; }
.avatar-lg { width: 88px; height: 88px; }
.feed-item.is-unread > div:first-child { font-weight: 700; }
.place-card.is-sponsored { outline: 1px dashed var(--input-line); outline-offset: -1px; }

/* 전체메뉴 페이지 */
.menu-group { margin-top: 24px; }
.menu-group h2 { font-size: 15px; margin: 0 0 4px; color: var(--muted); font-weight: 700; scroll-margin-top: calc(var(--header-h) + 12px); }
.menu-list { border-top: 1px solid var(--line); }
.menu-list li { border-bottom: 1px solid var(--line); }
.menu-list a { display: flex; align-items: center; gap: 12px; min-height: 56px; padding: 8px 2px; text-decoration: none; color: var(--text); }
.menu-list a:hover, .menu-list a:focus-visible { background: var(--bg-soft); }
.menu-ico { flex: none; width: 36px; height: 36px; border-radius: 10px; background: var(--bg-soft); color: var(--select-fg); display: inline-flex; align-items: center; justify-content: center; }
.menu-ico .icon { width: 20px; height: 20px; }
.menu-chev { color: #9aa0aa; }
.menu-jump ul { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 14px; }
.menu-jump a { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; font-size: 14px; font-weight: 600; text-decoration: none; color: var(--text); }
.menu-jump a:hover { background: var(--bg-soft); }
.menu-text { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.menu-text strong { font-size: 16px; font-weight: 600; }
.menu-text span { font-size: 13px; color: var(--muted); }
@media (min-width: 960px) { .menu-page { max-width: 960px; } .menu-group .menu-list { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); column-gap: 24px; border-top: 0; } .menu-group .menu-list li:first-child, .menu-group .menu-list li:nth-child(2) { border-top: 1px solid var(--line); } }

/* 손넘김 카드 */
.carousel { position: relative; }
.carousel-track { position: relative; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(236px, 80%); gap: 12px; overflow-x: auto; scroll-snap-type: x mandatory; overscroll-behavior-x: contain; scrollbar-width: none; padding: 2px 0 6px; }
.carousel-track::-webkit-scrollbar { display: none; }
.carousel-slide { scroll-snap-align: start; min-width: 0; }
.carousel-photos .carousel-track { grid-auto-columns: minmax(140px, 44%); }
.carousel-controls { display: flex; align-items: center; justify-content: flex-end; gap: 4px; margin-top: 4px; }
.carousel-controls .icon-btn { width: 44px; height: 44px; border: 1px solid var(--line); border-radius: 50%; background: var(--white); }
.carousel-controls [data-carousel-count] { min-width: 3.5em; text-align: center; color: var(--muted); font-variant-numeric: tabular-nums; }
@media (min-width: 900px) {
  .carousel.grid-on-wide .carousel-track { grid-auto-flow: row; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); grid-auto-columns: auto; overflow: visible; }
  .carousel-photos .carousel-track { grid-auto-columns: minmax(160px, 23%); }
}
.ad-rotate .carousel-track { grid-auto-columns: 100%; gap: 0; }
.ad-controls { justify-content: center; }
.ad-preview { display: flex; align-items: center; justify-content: center; text-align: center; padding: 12px; margin: 16px 0; border: 2px dashed var(--input-line); border-radius: 10px; color: var(--muted); font-size: 13px; background: var(--bg-soft); }

/* 홈 */
.home-sec { margin-top: 28px; padding-top: 4px; }
.home-sec + .home-sec { border-top: 1px solid var(--line); padding-top: 20px; }
.home-sec .section-head h2 { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.h-badge { height: 22px; width: auto; }
/* 홈 빠른 메뉴: 같은 크기 카드 3×2(넓은 화면 6×1), 아이콘 + 짧은 이름. 카드 전체가 하나의 링크 */
.quick-menu { margin-top: 20px; }
.quick-menu ul { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); grid-auto-rows: 1fr; gap: 8px; }
.quick-menu li { display: flex; min-width: 0; }
.quick-menu li a { flex: 1; min-width: 0; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 88px; padding: 12px 4px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); color: var(--text); text-decoration: none; text-align: center; }
.quick-menu li a:hover { background: var(--bg-soft); border-color: #d3d7de; }
.qm-ico { width: 36px; height: 36px; flex: none; border-radius: 12px; display: grid; place-items: center; background: var(--select-bg); color: var(--select-fg); }
.qm-ico .icon { width: 21px; height: 21px; }
.qm-label { font-size: 14px; font-weight: 600; line-height: 1.3; }
.quick-more { text-align: right; margin: 2px 0 0; }
@media (min-width: 900px) { .quick-menu ul { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.right { text-align: right; }
.mr-auto { margin-right: auto; }
.cond-links { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
.cond-links a { display: flex; flex-direction: column; gap: 2px; min-height: 56px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 10px; text-decoration: none; color: var(--text); }
.cond-links span { font-size: 13px; color: var(--muted); }
@media (min-width: 900px) { .cond-links { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.home-help { display: flex; flex-wrap: wrap; gap: 6px 14px; margin: 28px 0 8px; padding-top: 16px; border-top: 1px solid var(--line); }
.home-help a { color: var(--muted); }

.h-sub { font-size: 0.7em; color: var(--muted); font-weight: 600; }
.write-btn { flex: none; }
.feed-item .board-name { margin: 0 0 2px; font-size: 13px; color: var(--select-fg); font-weight: 600; }
.post-list .feed-item h3 { margin-top: 0; }

/* 장소 상세 동작 */
.place-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
.place-actions .btn { min-height: 48px; padding: 8px 6px; }
.place-sub-actions { display: flex; flex-wrap: wrap; gap: 6px 16px; align-items: center; margin-top: 10px; }
.place-sub-actions a, .linklike { display: inline-flex; align-items: center; gap: 4px; min-height: 44px; }
.linklike { background: none; border: 0; padding: 0; color: var(--text); text-decoration: underline; text-underline-offset: 3px; cursor: pointer; }
.edited { color: var(--muted); font-size: 13px; }
.owner-links { display: flex; flex-wrap: wrap; gap: 6px 14px; } .owner-links a { min-height: 44px; display: inline-flex; align-items: center; }


/* ---------- 공통 선택 컴포넌트(2026-10-04 UI·UX 전면 정리) ---------- */
.kicker { font-size: 13px; color: var(--muted); font-weight: 600; margin: 0 0 2px; }
.kicker a { text-decoration: none; }
.kicker a:hover { text-decoration: underline; }
.filter-label { display: block; font-size: 14px; font-weight: 700; margin: 0 0 6px; color: var(--text); }
.filter-label .muted { font-weight: 500; font-size: 13px; }
.filter-panel { display: flex; flex-direction: column; gap: 14px; padding: 14px 0 4px; }
.loc-row { display: flex; gap: 8px; flex-wrap: wrap; }
/* 단일 선택: 밑줄 탭(장소 종류) */
.seg-list { display: flex; flex-wrap: wrap; border-bottom: 1px solid var(--line); }
.seg-list a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 14px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.seg-list a:hover { color: var(--text); }
.seg-list a[aria-current="true"] { color: var(--select-fg); border-bottom-color: var(--primary); font-weight: 700; }
/* 단일 선택: 작은 알약(기간·답변 상태) */
.seg-sm { margin: 10px 0 6px; }
.seg-sm .seg-list { border: 0; gap: 6px; }
.seg-sm .seg-list a { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 999px; margin: 0; font-size: 14px; color: var(--text); }
.seg-sm .seg-list a:hover { background: var(--bg-soft); }
.seg-sm .seg-list a[aria-current="true"] { background: var(--select-bg); border-color: var(--select-line); color: var(--select-fg); font-weight: 700; }
/* 다중 선택: 체크가 붙는 토글(동반 조건) */
.toggle-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.toggle { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: 10px; background: var(--white); color: var(--text); font-size: 14px; font-weight: 600; text-decoration: none; cursor: pointer; }
.toggle:hover { border-color: #d3d7de; background: var(--bg-soft); }
.toggle .toggle-check { display: none; }
.toggle.is-on, .toggle[aria-pressed="true"] { background: var(--select-bg); border-color: var(--select-line); color: var(--select-fg); font-weight: 700; }
.toggle.is-on .toggle-check, .toggle[aria-pressed="true"] .toggle-check { display: inline-block; stroke-width: 2.4; }
.toggle-more { color: var(--muted); border-style: dashed; }
/* 선택 요약 · 결과 수 · 보기 전환 */
.applied { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 4px 12px; padding: 10px 0 6px; margin-top: 10px; border-top: 1px solid var(--line); font-size: 14px; }
.applied-sum strong { font-size: 15px; }
.applied-actions { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 14px; }
.applied-actions .link { min-height: 44px; display: inline-flex; align-items: center; }
.view-switch { display: inline-flex; border: 1px solid var(--line); border-radius: 10px; overflow: hidden; flex: none; }
.view-switch a { display: inline-flex; align-items: center; gap: 4px; min-height: 40px; padding: 0 12px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.view-switch a + a { border-left: 1px solid var(--line); }
.view-switch a:hover { background: var(--bg-soft); }
.view-switch a[aria-current="true"] { background: var(--select-bg); color: var(--select-fg); font-weight: 700; }

/* 커뮤니티: 게시판 선택(범위) · 이번주 인기 · 최신글 */
.board-pick { margin: 12px 0 4px; }
.board-picker { border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); }
.board-picker summary { list-style: none; display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 6px 14px; cursor: pointer; border-radius: var(--r-card); }
.board-picker summary::-webkit-details-marker { display: none; }
.board-picker summary:hover { background: var(--bg-soft); }
.bp-kicker { font-size: 13px; color: var(--muted); flex: none; }
.bp-current { flex: 1; min-width: 0; font-size: 16px; }
.bp-action { display: inline-flex; align-items: center; gap: 2px; flex: none; font-size: 13px; font-weight: 600; color: var(--muted); }
.board-picker[open] .bp-chev { transform: rotate(180deg); }
.board-options { border-top: 1px solid var(--line); padding: 6px; }
.board-options a { display: flex; align-items: center; gap: 10px; min-height: 48px; padding: 6px 10px; border-radius: 10px; text-decoration: none; color: var(--text); font-size: 15px; }
.board-options a:hover { background: var(--bg-soft); }
.board-options a[aria-current="page"] { background: var(--select-bg); color: var(--select-fg); font-weight: 700; }
.bo-ico { width: 32px; height: 32px; flex: none; border-radius: 10px; background: var(--bg-soft); display: grid; place-items: center; color: var(--muted); }
.board-options a[aria-current="page"] .bo-ico { background: var(--white); color: var(--select-fg); }
.bo-name { flex: 1; min-width: 0; }
.bo-all { border-top: 1px solid var(--line); margin-top: 4px; padding-top: 4px; }
.board-tabs { display: none; }
@media (min-width: 900px) {
  .board-picker { display: none; }
  .board-tabs { display: block; border-bottom: 1px solid var(--line); }
  .board-tabs ul { display: flex; flex-wrap: wrap; gap: 0 4px; }
  .board-tabs a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; border-bottom: 2px solid transparent; margin-bottom: -1px; }
  .board-tabs a:hover { color: var(--text); }
  .board-tabs a[aria-current="page"] { color: var(--select-fg); border-bottom-color: var(--primary); font-weight: 700; }
}
.pop-sec, .list-sec { margin-top: 20px; }
.pop-sec .section-head, .list-sec .section-head { margin-bottom: 4px; }
.pop-sec h2, .list-sec h2 { font-size: 17px; }
.rank-list { border: 1px solid var(--line); border-radius: var(--r-card); }
.rank-list li + li { border-top: 1px solid var(--line); }
.rank-list a { display: flex; gap: 10px; align-items: flex-start; min-height: 52px; padding: 12px 14px; text-decoration: none; color: var(--text); }
.rank-list a:hover { background: var(--bg-soft); }
.rank { flex: none; width: 20px; font-weight: 800; color: var(--select-fg); font-variant-numeric: tabular-nums; }
.rank-body { min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.rank-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rank-meta { font-size: 13px; color: var(--muted); }
.feed-item .meta .board-chip { color: var(--text); font-weight: 600; }

/* 물어볼개 */
.q-item { padding: 14px 0; }
.q-item h3 { margin: 0 0 4px; }
.q-item .q-state { margin-top: 8px; }
.q-cat { color: var(--text); font-weight: 600; }
.q-mark { color: var(--select-fg); margin-right: 6px; font-weight: 800; }
.answers-sec { margin-top: 28px; padding-top: 20px; border-top: 8px solid var(--bg-soft); }
.answer-form-sec { margin-top: 28px; padding-top: 20px; border-top: 1px solid var(--line); }
.tabs-wrap { flex-wrap: wrap; column-gap: var(--s3); overflow: visible; } /* 질문 주제: 숨은 가로 스크롤 없이 줄바꿈 */

/* ---------- 태그·일기·방문 인증·카드 지표(2026-10-04 (5)) ---------- */
.tag-list { display: flex; flex-wrap: wrap; gap: 6px 10px; margin: var(--s3) 0 0; }
.tag-link { display: inline-flex; align-items: center; min-height: 36px; padding: 0 4px; color: var(--select-fg); font-weight: 600; font-size: 15px; text-decoration: none; }
.tag-link:hover { text-decoration: underline; }
.tag-suggest { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.applied-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.applied-chips .toggle .icon { width: 14px; height: 14px; }
/* 동반 조건 태그: 항목마다 따로(붙어 보이지 않게) */
.place-card .tags { display: flex; flex-wrap: wrap; gap: 6px; margin: var(--s1) 0 0; padding: 0; list-style: none; }
.place-card .tags .tag { white-space: normal; }
.card-metrics { display: flex; flex-wrap: wrap; align-items: center; gap: 2px 12px; margin: 8px 0 0; font-size: 13px; color: var(--text); }
.card-metrics > span { display: inline-flex; align-items: center; gap: 3px; }
.card-metrics .icon { width: 15px; height: 15px; color: var(--muted); }
.card-verified { margin-top: 4px; }
.badge-verified { display: inline-flex; align-items: center; gap: 3px; padding: 2px 8px 2px 6px; border-radius: 999px; background: var(--mint-bg); color: var(--mint); font-size: 12.5px; font-weight: 700; }
.badge-verified .icon { width: 14px; height: 14px; stroke-width: 2.4; }
/* 질문 강아지 정보·사진 */
.dog-facts { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin: 8px 0 0; padding: 6px 12px; border-radius: 10px; background: var(--bg-soft); font-size: 14px; }
.dog-facts .icon { color: var(--select-fg); }
.dog-mini { color: var(--text); }
.photo-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; margin: var(--s2) 0; }
.photo-grid figure { margin: 0; border-radius: var(--r-photo); overflow: hidden; background: var(--photo-bg); aspect-ratio: 4 / 3; }
.photo-grid figure:only-child { grid-column: 1 / -1; }
.photo-grid img { width: 100%; height: 100%; object-fit: cover; object-position: center 35%; }
.image-manager .im-controls { position: absolute; left: 0; right: 0; bottom: 0; display: flex; align-items: center; justify-content: space-between; gap: 4px; padding: 4px; background: rgba(255,255,255,.92); font-size: 12px; }
.image-manager .im-controls input[type=number] { width: 52px; min-height: 32px; padding: 2px 6px; font-size: 14px; }
.image-manager .im-remove { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-size: 12px; font-weight: 600; }
.image-manager .im-remove input { width: 18px; height: 18px; }
/* 장소 카드(글 본문 아래) */
.place-cards { margin: var(--s3) 0 0; }
.place-cards ul { display: grid; gap: 8px; }
.place-link-card { display: flex; align-items: center; gap: 12px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--text); }
.place-link-card:hover { background: var(--bg-soft); }
.plc-photo { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--photo-bg); }
.plc-photo img { width: 100%; height: 100%; object-fit: cover; }
.plc-photo .placeholder .icon { width: 22px; height: 22px; }
.plc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 1px; }
.place-cards-edit { display: grid; gap: 8px; margin: 8px 0; }
.place-cards-edit li { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--r-card); }
.place-cards-edit .pc-name { flex: 1 1 160px; min-width: 0; }
.place-cards-edit .pc-date { display: flex; align-items: center; gap: 6px; margin: 0; font-weight: 500; }
.place-cards-edit .pc-date input { width: auto; min-height: 40px; padding: 6px 10px; }
/* 장소 상세: 이 장소의 이야기 */
.story-row { border-bottom: 1px solid var(--line); padding-top: 10px; }
.story-row .feed > li, .story-row > ul > li { border-bottom: 0; }
.story-row .feed-item { padding-top: 4px; }
.story-kind { display: inline-flex; align-items: center; gap: 3px; font-size: 12.5px; font-weight: 700; color: var(--muted); }
.story-kind.story-verified { color: var(--mint); }
.place-card > form { display: contents; } /* 로그인 시 저장 버튼 폼이 카드 격자 칸을 차지하지 않게(버튼은 절대 위치) */

/* ---------- 지도·반려생활·모임·페이지 이동(2026-10-04 (6)) ---------- */
.filter-sub { margin-top: 8px; }
.seg-life a { font-size: 14px; }
/* 장소 상세 주소·작은 지도(높이를 미리 확보해 레이아웃 이동을 줄인다) */
.place-location .row .btn { min-height: 40px; }
.detail-map { height: 200px; margin-top: 10px; border-radius: var(--r-card); border: 1px solid var(--line); background: var(--bg-soft); overflow: hidden; display: flex; align-items: center; justify-content: center; padding: 12px; text-align: center; }
.detail-map[data-detail-map] { padding: 0; }
/* 번호형 페이지 이동 */
.pagination { flex-wrap: wrap; gap: 6px; }
.pagination .pg-nums { display: flex; gap: 4px; margin: 0; padding: 0; }
.pagination .pg-num, .pagination .pg-step { display: inline-flex; align-items: center; justify-content: center; gap: 2px; min-width: 44px; min-height: 44px; padding: 0 10px; border-radius: 10px; border: 1px solid var(--line); text-decoration: none; font-size: 15px; color: var(--text); }
.pagination a.pg-num:hover, .pagination a.pg-step:hover { background: var(--bg-soft); }
.pagination .pg-num.is-current { background: var(--select-bg); border-color: var(--select-line); color: var(--select-fg); font-weight: 700; }
.pagination .pg-step.is-disabled { color: #b3b9c3; }
.pagination .pg-gap { display: inline-flex; align-items: center; min-height: 44px; color: var(--muted); }
@media (max-width: 380px) { .pagination .pg-step span { display: none; } }
/* 모임 */
.guild-list { display: grid; gap: 8px; margin-top: 12px; }
.guild-card { display: flex; gap: 12px; padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--text); }
.guild-card:hover { background: var(--bg-soft); }
.gc-photo { flex: none; width: 64px; height: 64px; border-radius: 12px; overflow: hidden; background: var(--photo-bg); display: grid; place-items: center; }
.gc-photo img { width: 100%; height: 100%; object-fit: cover; }
.gc-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.gc-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; font-size: 13px; color: var(--muted); }
.guild-actions { gap: 8px; margin: 8px 0 4px; }
.guild-actions form { display: inline-flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.guild-actions input[type=text] { width: auto; min-width: 0; flex: 1 1 160px; }
.manage-row { padding: 10px 0; border-bottom: 1px solid var(--line); }
.manage-row form { margin-top: 6px; gap: 6px; }
.manage-row select, .manage-row input[type=text] { width: auto; min-height: 40px; }
.guild-badge { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; background: var(--bg-soft); color: var(--text); font-size: 12.5px; font-weight: 600; text-decoration: none; }
.guild-notice-row { border-bottom: 1px solid var(--line); padding-top: 8px; }
.guild-notice-row > ul > li { border-bottom: 0; }
/* 홈: 새로 올라온 이야기 */
.latest-list li + li { border-top: 1px solid var(--line); }
.latest-list a { display: flex; flex-direction: column; gap: 1px; min-height: 48px; padding: 10px 0; text-decoration: none; color: var(--text); }
.latest-list .ll-title { font-weight: 600; display: -webkit-box; -webkit-line-clamp: 1; -webkit-box-orient: vertical; overflow: hidden; }
.latest-list .ll-meta { font-size: 13px; color: var(--muted); }
/* 지도 결과 카드: 카드를 누르면 지도에서 선택(핀 강조), 장소 이름을 누르면 상세로 */


/* ================= 2026-10-04 (7) 모바일 UI·지도 탐색 ================= */
.brand img { width: 36px; height: 36px; }
.brand { font-size: 18px; gap: 8px; }
@media (min-width: 960px) { .brand img { width: 40px; height: 40px; } .header-nav a { white-space: nowrap; } }
.icon-btn[aria-current="page"] { color: var(--select-fg); background: var(--select-bg); }

/* 커뮤니티 보조 메뉴(하단 메뉴와 별개): 밑줄형 */
.subnav { margin: 12px 0 4px; border-bottom: 1px solid var(--line); overflow-x: auto; scrollbar-width: none; }
.subnav ul { display: flex; gap: 4px; }
.subnav a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 12px; text-decoration: none; color: var(--muted); font-weight: 600; font-size: 15px; white-space: nowrap; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.subnav a[aria-current="page"] { color: var(--select-fg); border-bottom-color: var(--primary); font-weight: 700; }
/* 게시판 바로가기: 같은 크기 아이콘 + 짧은 이름 */
.board-shortcuts { margin: 16px 0 4px; }
.board-shortcuts ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px 4px; }
.board-shortcuts a { display: flex; flex-direction: column; align-items: center; gap: 6px; min-height: 76px; padding: 6px 2px; text-decoration: none; color: var(--text); font-size: 13px; font-weight: 600; text-align: center; border-radius: 12px; }
.board-shortcuts a:hover { background: var(--bg-soft); }
.bs-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: var(--bg-soft); color: var(--text); }
.bs-name { line-height: 1.25; }
@media (min-width: 720px) { .board-shortcuts ul { grid-template-columns: repeat(8, minmax(0, 1fr)); } }
/* 게시판 선택(범위)은 칩, 정렬은 글자 토글로 서로 다르게 */
.board-chips ul { display: flex; gap: 6px; overflow-x: auto; padding: 2px 0 8px; scrollbar-width: none; }
.board-chips li { flex: none; }
.board-chips a { white-space: nowrap; flex: none; display: inline-flex; align-items: center; min-height: 36px; padding: 0 12px; border: 1px solid var(--line); border-radius: var(--r-chip); text-decoration: none; color: var(--text); font-size: 14px; font-weight: 600; }
.board-chips a[aria-current="true"] { background: var(--select-bg); border-color: var(--select-line); color: var(--select-fg); }
.my-guild { display: flex; align-items: center; gap: 8px; min-height: 52px; padding: 8px 14px; margin-bottom: 8px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--text); }
.my-guild strong { flex: 1; }
.mg-kicker { font-size: 12px; font-weight: 700; color: var(--select-fg); }
.search-sm { margin-top: 12px; }
.search-sm input { min-height: 44px; }
.sortbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.sort-toggle, .period-pick { display: flex; gap: 2px; }
.sort-toggle a, .period-pick a { display: inline-flex; align-items: center; min-height: 44px; padding: 0 10px; text-decoration: none; color: var(--muted); font-size: 14px; font-weight: 600; }
.sort-toggle a[aria-current="true"], .period-pick a[aria-current="true"] { color: var(--text); font-weight: 800; }
.sort-toggle a[aria-current="true"]::before { content: "✓ "; color: var(--select-fg); }
.period-pick a[aria-current="true"] { text-decoration: underline; text-underline-offset: 6px; text-decoration-thickness: 2px; text-decoration-color: var(--primary); }

/* 반려생활 허브 */
.life-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
.life-grid a { display: flex; flex-direction: column; gap: 6px; min-height: 120px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--text); }
.life-grid a:hover { background: var(--bg-soft); }
.life-grid .lg-ico { display: grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: var(--select-bg); color: var(--select-fg); }
.life-grid strong { font-size: 16px; }
.life-grid .lg-desc { font-size: 13px; color: var(--muted); }
@media (min-width: 720px) { .life-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }

/* 전체메뉴: 내 활동·메뉴 찾기·보조 영역 */
.menu-me { display: flex; align-items: center; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); margin-bottom: 12px; text-decoration: none; color: var(--text); }
.menu-me .grow strong { display: block; }
.menu-filter { margin: 0 0 8px; }
.menu-sub { display: flex; flex-wrap: wrap; gap: 8px 16px; margin-top: 24px; padding-top: 16px; border-top: 1px solid var(--line); font-size: 14px; }
.menu-sub a, .menu-sub button { min-height: 44px; display: inline-flex; align-items: center; }

/* 지도 화면: 모바일은 위 조건 · 지도 · 아래 결과 시트(접힘·중간·펼침), 넓은 화면은 목록 | 지도 */
body.map-page .footer, body.map-page .env-note { display: none; }
body.map-page main.page { max-width: none; padding: 0; }
.map-shell { position: relative; display: flex; flex-direction: column; height: calc(100vh - var(--header-h) - var(--nav-h) - 1px - var(--safe-b)); overflow: hidden; }
@supports (height: 100dvh) { .map-shell { height: calc(100dvh - var(--header-h) - var(--nav-h) - 1px - var(--safe-b)); } } /* 1px: 하단 메뉴 위 경계선 */
.map-top { flex: none; padding: 8px var(--gutter) 6px; background: var(--white); border-bottom: 1px solid var(--line); z-index: 6; }
.map-top-row { display: flex; align-items: center; gap: 6px; }
.map-top-row + .map-top-row { margin-top: 6px; }
.map-chips { overflow-x: auto; scrollbar-width: none; padding-bottom: 2px; }
.map-chips .toggle, .map-chips .chip { flex: none; min-height: 38px; }
.chip-strong { font-weight: 700; }
.map-stage { position: relative; flex: 1 1 auto; min-height: 0; }
.map-shell .map-wrap { position: absolute; left: 0; right: 0; top: 0; bottom: 45%; transition: bottom .2s ease; }
.map-shell[data-sheet="collapsed"] .map-wrap { bottom: 112px; }
.map-shell .map-box { height: 100%; min-height: 0; border: 0; border-radius: 0; }
.map-pill { position: absolute; z-index: 5; top: 10px; left: 50%; transform: translateX(-50%); display: inline-flex; align-items: center; gap: 4px; margin: 0; padding: 6px 12px; border-radius: var(--r-chip); background: var(--white); box-shadow: var(--shadow-float); font-size: 13px; font-weight: 600; white-space: nowrap; }
.map-tools { position: absolute; z-index: 5; left: 10px; top: 10px; display: flex; flex-direction: column; gap: 8px; }
.map-tool { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 12px; border: 1px solid var(--line); background: var(--white); color: var(--text); box-shadow: 0 2px 8px rgba(36,41,51,.12); cursor: pointer; }
.map-sheet { position: absolute; z-index: 7; left: 0; right: 0; bottom: 0; height: 45%; display: flex; flex-direction: column; background: var(--white); border-radius: var(--r-sheet) var(--r-sheet) 0 0; box-shadow: 0 -4px 20px rgba(36,41,51,.12); transition: height .2s ease; }
.map-sheet[data-state="collapsed"] { height: 112px; }
.map-sheet[data-state="full"] { height: calc(100% - 8px); }
.map-sheet-head { flex: none; padding: 0 var(--gutter) 6px; }
.map-sheet-handle { display: block; width: 100%; height: 24px; border: 0; background: transparent; cursor: grab; touch-action: none; position: relative; }
.map-sheet-handle::after { content: ""; position: absolute; left: 50%; top: 9px; width: 40px; height: 5px; margin-left: -20px; border-radius: 3px; background: #c9ced6; }
.map-count { margin: 0; font-size: 15px; font-weight: 700; min-width: 0; }
.map-sheet-btns .btn { min-height: 36px; padding: 4px 8px; font-size: 13px; }
.map-sheet[data-state="collapsed"] [data-sheet-set="collapsed"], .map-sheet[data-state="full"] [data-sheet-set="full"] { display: none; }
.map-sheet-body { flex: 1 1 auto; min-height: 0; overflow-y: auto; overscroll-behavior: contain; padding: 0 var(--gutter) 12px; -webkit-overflow-scrolling: touch; }
.map-alert, .map-group-note { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin-top: 6px; padding: 6px 10px; border-radius: 10px; font-size: 13px; }
.map-alert { background: var(--cond-bg); color: var(--cond); }
.map-group-note { background: var(--select-bg); color: var(--select-fg); }
.map-empty { padding: 8px 0; }
.map-sheet .place-card { grid-template-columns: 72px minmax(0, 1fr); cursor: pointer; }
.map-sheet .place-card .photo { aspect-ratio: 1 / 1; }
.map-sheet .place-card.is-selected { background: var(--select-bg); border-radius: 12px; outline: 2px solid var(--select-line); outline-offset: -2px; }
.map-sheet .save-btn { font-size: 20px; line-height: 1; color: var(--select-fg); }
.map-card h3 a::after { content: none; } /* 카드를 누르면 지도에서 선택, 이름·상세 보기는 상세로 */
.map-card-more { display: inline-flex; width: max-content; min-height: 34px; align-items: center; margin: 4px 10px 0 0; vertical-align: middle; }
.map-cluster { min-width: 44px; height: 44px; padding: 0 10px; border-radius: 999px; border: 2px solid #fff; background: var(--primary); color: #fff; font-weight: 800; font-size: 14px; box-shadow: var(--shadow-float); cursor: pointer; }
.map-same { background: #23262f; }
.type-list a { display: flex; align-items: center; min-height: 48px; padding: 0 12px; border-radius: 10px; text-decoration: none; color: var(--text); font-weight: 600; }
.type-list a[aria-current="true"] { background: var(--select-bg); color: var(--select-fg); }
.type-list a[aria-current="true"]::after { content: "✓"; margin-left: auto; }
.plain-fieldset { border: 0; padding: 0; margin: 0; }
.choice-row { display: flex; flex-wrap: wrap; gap: 6px; }
.choice-pill { min-height: 40px; padding: 0 14px; border: 1px solid var(--line); border-radius: var(--r-chip); background: var(--white); font-size: 14px; font-weight: 600; cursor: pointer; }
.choice-pill[aria-checked="true"] { background: var(--select-bg); border-color: var(--select-line); color: var(--select-fg); }
.choice-pill[aria-checked="true"]::before { content: "✓ "; }
@media (min-width: 960px) {
  .map-shell { height: calc(100vh - var(--header-h)); }
  .map-stage { display: grid; grid-template-columns: 400px minmax(0, 1fr); }
  .map-shell .map-wrap, .map-shell[data-sheet="collapsed"] .map-wrap { position: relative; grid-column: 2; grid-row: 1; inset: auto; height: 100%; }
  .map-sheet, .map-sheet[data-state] { position: static; grid-column: 1; grid-row: 1; height: auto; min-height: 0; border-radius: 0; box-shadow: none; border-right: 1px solid var(--line); }
  .map-sheet-handle, .map-sheet-btns { display: none; }
  .map-sheet-head { padding-top: 10px; }
}
@media (prefers-reduced-motion: reduce) { .map-sheet, .map-shell .map-wrap { transition: none; } }

/* 페이지 전환: 지원 브라우저에서만 짧게, 움직임 줄이기 설정이면 없음 */
@view-transition { navigation: auto; }
::view-transition-old(root), ::view-transition-new(root) { animation-duration: 150ms; }
@media (prefers-reduced-motion: reduce) { ::view-transition-old(root), ::view-transition-new(root) { animation: none; } }

/* 장소 메뉴·주차(2026-10-04 (7) 추가) */
.tag-plain { background: var(--bg-soft); color: var(--text); }
.menu-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .menu-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.menu-card { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; }
.menu-card .photo { aspect-ratio: 4 / 3; background: var(--photo-bg); }
.menu-card .photo img { width: 100%; height: 100%; object-fit: cover; }
.mc-body { padding: 8px 10px 10px; }
.mc-body h3 { margin: 4px 0 2px; font-size: 15px; }
.mc-price { margin: 0; font-weight: 700; font-size: 14px; }
.menu-all { margin-top: 12px; border: 1px solid var(--line); border-radius: var(--r-card); }
.menu-all summary { min-height: 48px; display: flex; align-items: center; padding: 0 14px; cursor: pointer; font-weight: 600; }
.menu-rows li { display: flex; justify-content: space-between; gap: 12px; padding: 10px 14px; border-top: 1px solid var(--line); }
.mr-price { white-space: nowrap; font-weight: 600; }
.d-block { display: block; }
.gallery-sm figure { max-width: 220px; }
.parking-photos { display: flex; gap: 6px; margin-top: 6px; }
.parking-photos img { width: 72px; height: 54px; object-fit: cover; border-radius: 8px; }
.thumb-row { display: flex; flex-wrap: wrap; gap: 8px; }
.thumb-row li { display: flex; flex-direction: column; gap: 2px; width: 96px; }
.thumb-row img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; }
.menu-thumb img { width: 48px; height: 36px; object-fit: cover; border-radius: 6px; display: inline-block; vertical-align: middle; margin-right: 6px; }

/* 공통 썸네일(2026-10-04 (8)): 글·질문 행 80px 정사각, 순위·최신 행 56px. 사진 유무와 상관없이 같은 자리를 예약한다 */
.thumb-img { display: block; width: 100%; height: 100%; object-fit: cover; }
.thumb-img.is-default { background: #fbf6f7; }
.feed-item.with-photo { grid-template-columns: minmax(0, 1fr) 80px; }
.feed-item .thumb { width: 80px; height: 80px; aspect-ratio: auto; }
.q-item.with-thumb { display: grid; grid-template-columns: 72px minmax(0, 1fr); gap: 12px; align-items: start; }
.q-item .thumb { width: 72px; height: 72px; border-radius: 12px; overflow: hidden; background: var(--photo-bg); }
.q-body { min-width: 0; }
.row-thumb { flex: none; width: 56px; height: 56px; border-radius: 10px; overflow: hidden; background: var(--photo-bg); }
.rank-list .rank-body, .latest-list .ll-text { min-width: 0; flex: 1; }
.latest-list a { display: flex; flex-direction: row; gap: 12px; align-items: center; }
.latest-list .ll-text { display: flex; flex-direction: column; gap: 1px; }
.gc-photo .thumb-img { width: 64px; height: 64px; }
@media (max-width: 359px) {
  .feed-item.with-photo { grid-template-columns: minmax(0, 1fr) 64px; }
  .feed-item .thumb { width: 64px; height: 64px; }
  .q-item.with-thumb { grid-template-columns: 56px minmax(0, 1fr); }
  .q-item .thumb, .row-thumb { width: 56px; height: 56px; }
}

/* 장소 상세 정보 묶음·영업 상태(2026-10-05 장소 정보 확장, docs/PLACE_INFORMATION_GUIDE.md) */
.place-hero-fallback { aspect-ratio: 4 / 3; max-height: 320px; border-radius: var(--r-photo); overflow: hidden; background: var(--photo-bg); }
.place-hero-fallback img { width: 100%; height: 100%; object-fit: cover; }
.open-state { display: flex; flex-wrap: wrap; align-items: center; gap: 4px 8px; margin-bottom: 0; }
.btn.is-disabled { color: var(--muted); background: var(--bg-soft); cursor: default; }
.place-tabs { position: sticky; top: var(--header-h); z-index: 20; display: flex; gap: 4px; overflow-x: auto; margin: var(--s2) calc(var(--gutter) * -1) 0; padding: 6px var(--gutter); background: rgba(255,255,255,.97); border-bottom: 1px solid var(--line); scrollbar-width: none; }
.place-tabs::-webkit-scrollbar { display: none; }
.place-tabs a { flex: none; min-height: 40px; display: inline-flex; align-items: center; padding: 6px 12px; border-radius: var(--r-chip); color: var(--muted); font-weight: 600; font-size: 14px; text-decoration: none; }
.place-tabs a:hover, .place-tabs a:focus-visible { background: var(--bg-soft); color: var(--text); }
@media (min-width: 760px) { .place-tabs { margin: var(--s2) 0 0; padding: 6px 0; } }
.place-info .info-block, .place-info .place-location { padding: var(--s2) 0; border-bottom: 1px solid var(--line); }
.place-info .info-block:last-of-type { border-bottom: 0; }
.info-title { font-size: 16px; margin: 0 0 6px; }
.info-src { text-align: right; overflow-wrap: anywhere; }
.info-rows.compact > div { padding: 6px 0; }
.hours-table { width: 100%; border-collapse: collapse; font-size: 14px; }
.hours-table th { width: 2.5em; text-align: left; font-weight: 600; color: var(--muted); padding: 4px 0; vertical-align: top; }
.hours-table td { padding: 4px 0; overflow-wrap: anywhere; }
.hours-table tr.is-today th, .hours-table tr.is-today td { color: var(--text); font-weight: 700; }
.amenity-list { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 6px 12px; }
.amenity-list li { display: flex; align-items: center; justify-content: space-between; gap: 6px; font-size: 14px; min-width: 0; }
.amenity-list .tag { white-space: normal; text-align: right; }
.card-open { font-size: 13px; margin: 2px 0 0; }

/* 영업시간 입력(CMS·점주) */
.hours-grid { display: grid; gap: var(--s1); }
.hours-day { border: 1px solid var(--line); border-radius: var(--r-input); padding: 8px 12px; margin: 0; min-width: 0; }
.hours-day legend { font-weight: 700; padding: 0 4px; }
.hours-day select { max-width: 9em; }
.hours-slots { display: flex; flex-wrap: wrap; gap: 6px 16px; margin-top: 6px; }
.hours-slot { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.hours-slot label { display: inline-flex; align-items: center; gap: 4px; margin: 0; font-weight: 500; }
input.hours-time { width: 4.6em; min-height: 40px; padding: 6px 8px; text-align: center; }
.hours-ex input, .hours-ex select { min-width: 7em; }
.select-sm { min-height: 36px; padding: 4px 8px; font-size: 14px; width: auto; }
@media (min-width: 900px) { .hours-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 가입 동의(약관 전문·수집 항목 안내) */
.consent { border: 1px solid var(--line); border-radius: var(--r-input); padding: 12px 14px; margin: var(--s2) 0 0; min-width: 0; }
.consent legend { font-weight: 700; padding: 0 4px; }
.consent-all { border-bottom: 1px solid var(--line); padding-bottom: 8px; margin-bottom: 4px; }
.consent-item { padding: 6px 0; border-bottom: 1px solid var(--line); }
.consent-item:last-child { border-bottom: 0; }
.consent-item details { margin: 2px 0 0 30px; }
.consent-item summary { cursor: pointer; min-height: 32px; display: flex; align-items: center; gap: 4px; color: var(--muted); }
.consent-text { max-height: 260px; overflow-y: auto; font-size: 13px; line-height: 1.6; background: var(--bg-soft); border-radius: 10px; padding: 10px 12px; margin-top: 6px; overflow-wrap: anywhere; }
.consent-table { font-size: 13px; }
.consent-table td { vertical-align: top; overflow-wrap: anywhere; }
.consent-notes { padding-left: 1.1em; margin: 8px 0 0; line-height: 1.6; }
.consent-sub { margin: 0 0 0 30px; }

/* ---------------------------------------------------------------- 로그인(2026-10-05 재디자인): 흰 배경·넉넉한 여백·보이는 수단만 */
.auth-page main { max-width: 420px; }
.auth-wrap { display: flex; flex-direction: column; align-items: stretch; text-align: center; padding: var(--s4) 0 var(--s5); }
.auth-logo { align-self: center; display: block; width: 88px; height: 88px; border-radius: 50%; overflow: hidden; }
.auth-logo img { width: 88px; height: 88px; display: block; }
.auth-logo:focus-visible { outline: 3px solid var(--focus); outline-offset: 3px; }
.auth-title { font-size: 24px; margin: var(--s2) 0 4px; }
.auth-lead { color: var(--muted); margin: 0 0 var(--s4); }
.auth-methods { display: flex; flex-direction: column; gap: 10px; }
.auth-methods form { margin: 0; }
.auth-btn { position: relative; display: flex; width: 100%; min-height: 52px; justify-content: center; align-items: center; gap: 8px; font-size: 16px; border-radius: 12px; }
.auth-btn-ico { position: absolute; left: 16px; top: 50%; width: 22px; height: 22px; transform: translateY(-50%); display: inline-flex; }
.auth-btn-ico svg { width: 22px; height: 22px; }
.auth-btn[aria-busy="true"] { opacity: .7; cursor: progress; }
.auth-form { text-align: left; margin-top: 0; }
.auth-links { display: flex; justify-content: center; flex-wrap: wrap; gap: 6px 16px; margin: var(--s2) 0 0; }
.auth-note { font-size: 13px; color: var(--muted); text-align: left; margin: var(--s3) 0 0; }
.auth-empty { padding: var(--s3) var(--s2); background: var(--bg-soft); border-radius: var(--r-card); text-align: center; }
.auth-legal { margin: var(--s4) 0 0; font-size: 12px; color: var(--muted); line-height: 1.6; }
.auth-legal a { color: var(--text); text-decoration: underline; }
.auth-page .divider { margin: var(--s3) 0 var(--s2); }

/* ---------------------------------------------------------------- 상단 계정 패널: PC 팝오버 / 모바일 바텀시트 */
.badge { position: absolute; top: 4px; right: 2px; min-width: 18px; height: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 700; line-height: 18px; text-align: center; box-shadow: 0 0 0 2px #fff; }
.hdr-avatar { width: 30px; height: 30px; border-radius: 50%; overflow: hidden; display: block; background: var(--photo-bg); }
.hdr-avatar img { width: 100%; height: 100%; object-fit: cover; }
.account-panel { position: fixed; inset: 0; z-index: 90; }
.account-panel[hidden] { display: none; }
.ap-backdrop { position: absolute; inset: 0; background: transparent; }
.ap-sheet { position: absolute; top: 64px; right: 16px; width: 340px; max-width: calc(100vw - 16px); max-height: min(560px, calc(100vh - 80px)); overflow-y: auto; background: var(--white); border: 1px solid var(--line); border-radius: 16px; box-shadow: var(--shadow-float); outline: none; overscroll-behavior: contain; }
.account-panel.is-sheet .ap-backdrop { background: rgba(23, 26, 33, .32); }
.account-panel.is-sheet .ap-sheet { top: auto; right: 0; left: 0; bottom: 0; width: 100%; max-width: none; max-height: min(82vh, calc(100dvh - 24px)); border-radius: var(--r-sheet) var(--r-sheet) 0 0; border: 0; padding-bottom: var(--safe-b); }
body.ap-lock { overflow: hidden; }
.ap-head { position: sticky; top: 0; z-index: 1; display: flex; align-items: center; gap: 8px; padding: 8px 8px 0 16px; background: var(--white); }
.ap-head-title { margin: 0; font-weight: 700; flex: 1; }
.ap-tabs { display: flex; gap: 4px; flex: 1; }
.ap-tabs button { min-height: 40px; padding: 6px 12px; border: 0; border-radius: var(--r-chip); background: transparent; color: var(--muted); font-weight: 700; font-size: 15px; cursor: pointer; }
.ap-tabs button[aria-selected="true"] { background: var(--select-bg); color: var(--select-fg); }
.ap-count { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 9px; background: var(--primary); color: #fff; font-size: 11px; line-height: 18px; text-align: center; margin-left: 2px; }
.ap-body { padding: 8px 16px 16px; }
.ap-loading, .ap-error { color: var(--muted); font-size: 14px; padding: var(--s2) 0; margin: 0; }
.ap-profile { display: flex; align-items: center; gap: 12px; padding: 8px 0 12px; min-width: 0; }
.ap-avatar { width: 52px; height: 52px; flex: none; border-radius: 50%; overflow: hidden; background: var(--photo-bg); display: grid; place-items: center; color: var(--muted); }
.ap-avatar img { width: 100%; height: 100%; object-fit: cover; }
.ap-who { display: flex; flex-direction: column; min-width: 0; }
.ap-name { font-weight: 700; font-size: 17px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 100%; }
.ap-grade { font-size: 13px; color: var(--muted); }
.ap-dogs { display: flex; flex-wrap: wrap; gap: 8px; padding-bottom: 12px; border-bottom: 1px solid var(--line); }
.ap-dogs li { display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px 4px 4px; border: 1px solid var(--line); border-radius: var(--r-chip); font-size: 14px; max-width: 100%; }
.ap-dog-ph { width: 28px; height: 28px; border-radius: 50%; overflow: hidden; background: var(--photo-bg); display: grid; place-items: center; color: var(--muted); flex: none; }
.ap-dog-ph img { width: 100%; height: 100%; object-fit: cover; }
.ap-dog-name { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 8em; }
.ap-dogs .ap-dog-private { padding-left: 10px; color: var(--muted); }
.ap-nodog { padding-bottom: 12px; border-bottom: 1px solid var(--line); margin: 0; }
.ap-menu li a, .ap-menu li button { display: flex; align-items: center; gap: 12px; width: 100%; min-height: 48px; padding: 4px; border: 0; background: none; color: var(--text); text-decoration: none; font-size: 16px; text-align: left; cursor: pointer; border-radius: 10px; }
.ap-menu li a:hover, .ap-menu li button:hover, .ap-menu li a:focus-visible, .ap-menu li button:focus-visible { background: var(--bg-soft); }
.ap-menu .ap-count { margin-left: auto; }
.ap-logout { margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line); }
.ap-logout button { display: inline-flex; align-items: center; gap: 8px; min-height: 44px; padding: 4px; border: 0; background: none; color: var(--muted); font-size: 15px; cursor: pointer; }
.ap-logout button:hover { color: var(--text); }
.ap-guest-title { font-weight: 700; margin: 8px 0; }
.ap-benefits { list-style: none; padding: 0; margin: 0 0 var(--s2); display: grid; gap: 8px; font-size: 15px; }
.ap-benefits li { display: flex; align-items: center; gap: 8px; }
.ap-wide { display: flex; width: 100%; min-height: 48px; margin-bottom: 8px; }
.ap-notif-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; flex-wrap: wrap; padding: 4px 0 8px; }
.ap-notif-list li a { display: flex; gap: 10px; align-items: flex-start; padding: 10px 4px; border-bottom: 1px solid var(--line); color: var(--text); text-decoration: none; }
.ap-notif-list li a:hover { background: var(--bg-soft); }
.ap-notif-list li a.is-unread .nt-text { font-weight: 700; }
.nt-ico { width: 32px; height: 32px; flex: none; border-radius: 50%; background: var(--bg-soft); color: var(--muted); display: grid; place-items: center; }
.nt-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.nt-text { font-size: 14px; overflow-wrap: anywhere; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.nt-time { font-size: 12px; color: var(--muted); }
.nt-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--primary); flex: none; margin-top: 6px; }
.ap-empty { text-align: center; color: var(--muted); padding: var(--s4) 0; }
.ap-empty .icon { width: 28px; height: 28px; }
@media (max-height: 520px) { .account-panel.is-sheet .ap-sheet { max-height: calc(100dvh - 8px); } }

/* ---------------------------------------------------------------- 프로필 테마(제한된 팔레트, 흰 배경 위 글자 대비 4.5:1 이상) */
.theme-rose { --accent: #c9405b; --accent-bg: #fff1f4; }
.theme-coral { --accent: #b04527; --accent-bg: #fff1ec; }
.theme-mint { --accent: #1f6b55; --accent-bg: #e9f6f1; }
.theme-sky { --accent: #2a5d9c; --accent-bg: #edf4fc; }
.theme-lavender { --accent: #6b4fa0; --accent-bg: #f3effa; }
.theme-sand { --accent: #7a5a1e; --accent-bg: #faf3e6; }

/* ---------------------------------------------------------------- 마이페이지 */
.me-page { max-width: var(--read); margin: 0 auto; }
.me-profile { position: relative; margin-top: var(--s2); }
.me-cover { height: 132px; border-radius: var(--r-card); overflow: hidden; background: var(--accent-bg, var(--bg-soft)); position: relative; }
.me-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.me-cover .cover-paw { position: absolute; right: 16px; bottom: 12px; color: var(--accent, var(--primary)); opacity: .55; width: 40px; height: 40px; }
.me-id { display: flex; align-items: flex-end; gap: 12px; padding: 0 4px; margin-top: -36px; position: relative; min-width: 0; }
.me-avatar { width: 84px; height: 84px; flex: none; border-radius: 50%; overflow: hidden; background: var(--photo-bg); border: 3px solid #fff; display: grid; place-items: center; color: var(--muted); }
.me-avatar img { width: 100%; height: 100%; object-fit: cover; }
.me-who { min-width: 0; padding-bottom: 4px; flex: 1; }
.me-name { font-size: 20px; font-weight: 800; margin: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-meta { font-size: 13px; color: var(--muted); margin: 0; display: flex; flex-wrap: wrap; gap: 4px 8px; }
.me-meta .grade { color: var(--accent, var(--primary)); font-weight: 700; }
.me-bio { margin: 10px 4px 0; font-size: 15px; overflow-wrap: anywhere; }
.me-actions { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 4px 0; }
.me-actions .btn { min-height: 40px; }
.me-actions .btn-accent { background: var(--accent, var(--primary)); border-color: var(--accent, var(--primary)); color: #fff; }
.me-dogs { display: grid; grid-auto-flow: column; grid-auto-columns: 112px; gap: 10px; overflow-x: auto; padding-bottom: 4px; scrollbar-width: none; }
.me-dogs::-webkit-scrollbar { display: none; }
.me-dog a { display: flex; flex-direction: column; gap: 6px; text-decoration: none; color: var(--text); }
.me-dog .ph { width: 112px; height: 112px; border-radius: var(--r-photo); overflow: hidden; background: var(--photo-bg); display: grid; place-items: center; color: var(--muted); }
.me-dog .ph img { width: 100%; height: 100%; object-fit: cover; }
.me-dog .nm { font-weight: 700; font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-dog .sub { font-size: 12px; color: var(--muted); }
.me-dog-add .ph { border: 1px dashed var(--input-line); background: var(--white); }
.me-stats { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.me-stats a { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 12px 4px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--text); min-width: 0; }
.me-stats strong { font-size: 20px; }
.me-stats span { font-size: 12px; color: var(--muted); text-align: center; }
.me-tiles { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; }
.me-tiles a { display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; min-height: 84px; padding: 8px 4px; border: 1px solid var(--line); border-radius: var(--r-card); text-decoration: none; color: var(--text); font-size: 13px; text-align: center; position: relative; }
.me-tiles a:hover, .me-stats a:hover { background: var(--bg-soft); }
.me-tiles .icon { width: 24px; height: 24px; color: var(--accent, var(--primary)); }
.me-tiles .ap-count { position: absolute; top: 6px; right: 6px; }
.me-recent li a { display: flex; justify-content: space-between; gap: 8px; padding: 10px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.me-recent .t { min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.me-recent .s { color: var(--muted); font-size: 13px; flex: none; }
@media (max-width: 359px) { .me-stats, .me-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

/* 프로필 꾸미기 */
.theme-swatches { display: flex; flex-wrap: wrap; gap: 8px; border: 0; padding: 0; margin: 0; }
.theme-swatches label { position: relative; display: inline-flex; align-items: center; gap: 6px; min-height: 44px; padding: 6px 12px 6px 8px; border: 1px solid var(--line); border-radius: var(--r-chip); cursor: pointer; font-size: 14px; }
.theme-swatches input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.theme-swatches .sw { width: 20px; height: 20px; border-radius: 50%; background: var(--accent); }
.theme-swatches label:has(input:checked) { border-color: var(--text); box-shadow: inset 0 0 0 1px var(--text); }
.theme-swatches label:has(input:focus-visible) { outline: 3px solid var(--focus); outline-offset: 2px; }
.customize-preview { border: 1px solid var(--line); border-radius: var(--r-card); padding: 8px; margin-bottom: var(--s3); }
.customize-preview .preview-label { font-size: 12px; color: var(--muted); margin: 0 0 6px 4px; }

/* 장소 필터 두 단계(2026-10-05): 묶음 탭 → 업종 한 줄 → 자주 쓰는 조건 + 필터 */
.group-tabs { display: flex; gap: 4px; margin-top: var(--s1); border-bottom: 1px solid var(--line); }
.group-tabs a { flex: 1; text-align: center; min-height: 44px; display: flex; align-items: center; justify-content: center; font-weight: 700; color: var(--muted); text-decoration: none; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.group-tabs a[aria-current="page"] { color: var(--text); border-bottom-color: var(--text); }
.scroll-x { display: flex; gap: 6px; overflow-x: auto; scrollbar-width: none; -webkit-mask-image: linear-gradient(to right, #000 88%, transparent); mask-image: linear-gradient(to right, #000 88%, transparent); padding-right: 24px; }
.scroll-x::-webkit-scrollbar { display: none; }
.scroll-x.is-end { -webkit-mask-image: none; mask-image: none; }
.cat-row { margin-top: var(--s1); }
.cat-row a { display: inline-flex; align-items: center; min-height: 36px; padding: 6px 12px; border-radius: var(--r-chip); border: 1px solid var(--line); color: var(--text); text-decoration: none; font-size: 14px; white-space: nowrap; }
.cat-row a[aria-current="true"] { background: var(--select-bg); color: var(--select-fg); border-color: var(--select-line); font-weight: 700; }
.quick-row { display: flex; align-items: center; gap: 8px; margin-top: var(--s1); min-width: 0; }
.quick-row .toggle-chips { flex: 1; min-width: 0; flex-wrap: nowrap; }
.quick-row .toggle { white-space: nowrap; }
.filter-btn { flex: none; gap: 4px; }
.filter-btn.is-on { border-color: var(--select-line); color: var(--select-fg); }
.applied-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 var(--s1); align-items: center; }
.chip-x { display: inline-flex; align-items: center; gap: 4px; min-height: 32px; padding: 4px 8px 4px 12px; border-radius: var(--r-chip); background: var(--bg-soft); color: var(--text); text-decoration: none; font-size: 13px; }
.chip-x .icon { width: 14px; height: 14px; color: var(--muted); }

/* 물어볼개 답변 상태 탭(한 방식: 밑줄+굵기) · 카드 제목/요약 2줄 · 장소 상세 요약 */
.state-tabs { display: flex; gap: 4px; border-bottom: 1px solid var(--line); }
.state-tabs a { min-height: 44px; display: inline-flex; align-items: center; padding: 0 12px; color: var(--muted); text-decoration: none; font-weight: 600; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.state-tabs a[aria-current="page"] { color: var(--text); font-weight: 800; border-bottom-color: var(--text); }
.feed-item h3 { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.feed-item .excerpt { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.title-addr { color: var(--muted); overflow-wrap: anywhere; }
.cond-summary { padding: 12px; border: 1px solid var(--line); border-radius: var(--r-card); }
.visit-checks { padding: 10px 12px; background: var(--bg-soft); border-radius: var(--r-card); }
.visit-checks li { display: flex; gap: 6px; align-items: flex-start; padding: 2px 0; }
.desc-more summary { cursor: pointer; color: var(--muted); }
.manage-links h2 { margin-bottom: 4px; }

/* 함께 지킬개 카드 */
.etiquette-cards li { display: flex; gap: 12px; padding: 12px 0; border-bottom: 1px solid var(--line); }
.et-ico { width: 40px; height: 40px; flex: none; border-radius: 12px; background: var(--bg-soft); color: var(--primary); display: grid; place-items: center; }
.et-title { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; }

/* 숫자로 보는 반려생활 — 국가 통계와 사이트 수치를 색으로도 구분 */
.stat-cards { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 8px; }
.stat-card { display: flex; flex-direction: column; gap: 2px; padding: 12px; border-radius: var(--r-card); border: 1px solid var(--line); min-width: 0; }
.stat-card.site { background: var(--bg-soft); border-style: dashed; }
.stat-card strong { font-size: 22px; }
.stat-card strong.pending { font-size: 16px; color: var(--muted); }
.stat-unit { font-size: 13px; font-weight: 600; margin-left: 2px; color: var(--muted); }
.sc-label { font-size: 13px; font-weight: 700; }
.sc-src { font-size: 11px; color: var(--muted); }
.stat-block { padding: 12px 0; border-bottom: 1px solid var(--line); }
.stat-block.site { border: 1px dashed var(--line); border-radius: var(--r-card); padding: 12px; background: var(--bg-soft); }
.stat-big { font-size: 28px; font-weight: 800; }
.stat-pending { color: var(--muted); font-weight: 700; }
.stat-bars { margin: 8px 0; }
.bar-row { display: grid; grid-template-columns: 3.5em 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.bar { height: 12px; border-radius: 6px; background: var(--primary); min-width: 2px; }
.bar-val { color: var(--muted); }

/* 댓글 이모지·스티커 */
.composer-tools { display: flex; gap: 2px; margin-top: 4px; }
.composer-tools .icon-btn { width: 40px; height: 40px; font-size: 20px; }
.tool-panel { margin-top: 6px; padding: 8px; border: 1px solid var(--line); border-radius: var(--r-card); background: var(--white); max-height: 40vh; overflow-y: auto; }
.emoji-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); gap: 4px; }
.emoji-grid button { min-height: 40px; border: 0; background: none; font-size: 22px; border-radius: 8px; cursor: pointer; }
.emoji-grid button:hover { background: var(--bg-soft); }
.sticker-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(76px, 1fr)); gap: 6px; margin-bottom: 6px; }
.sticker-grid button { display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 4px; border: 1px solid var(--line); border-radius: 12px; background: var(--white); font-size: 11px; cursor: pointer; }
.sticker-chosen { display: flex; align-items: center; gap: 8px; margin-top: 6px; }
.c-sticker { display: block; width: 88px; height: 88px; margin-top: 4px; }

/* 가입 마무리 */
.onboarding .auth-title { font-size: 21px; }
.onb-form { text-align: left; }
.promise-card { margin-top: var(--s2); padding: 12px 14px; border-radius: var(--r-card); background: var(--bg-soft); }
.promise-card ol { padding-left: 1.2em; margin: 6px 0; line-height: 1.6; }
.consent-sum > div { display: grid; grid-template-columns: 4.2em 1fr; gap: 6px; font-size: 13px; padding: 4px 0; }
.consent-sum dt { color: var(--muted); font-weight: 700; }
.consent-sum dd { margin: 0; overflow-wrap: anywhere; }
.ok-text { color: var(--ok); }
.err-text { color: var(--no); }

/* 공통 사진 첨부 */
.photo-picker { border: 1px dashed var(--input-line); border-radius: var(--r-card); padding: 10px; }
.photo-picker.is-drag { border-color: var(--primary); background: var(--select-bg); }
.pp-add { position: relative; display: flex; align-items: center; justify-content: center; gap: 8px; min-height: 88px; border-radius: 12px; background: var(--bg-soft); font-weight: 700; cursor: pointer; }
.photo-picker.has-items .pp-add { min-height: 52px; }
.pp-add input { position: absolute; inset: 0; opacity: 0; cursor: pointer; width: 100%; }
.pp-add:focus-within { outline: 3px solid var(--focus); outline-offset: 2px; }
.pp-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 8px; margin-top: 8px; }
.pp-grid:empty { display: none; }
.pp-tile { position: relative; border-radius: 10px; overflow: hidden; background: var(--photo-bg); aspect-ratio: 1; }
.pp-tile img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pp-tile.has-error img { opacity: .35; }
.pp-cover { position: absolute; top: 6px; left: 6px; padding: 2px 8px; border-radius: var(--r-chip); background: var(--text); color: #fff; font-size: 11px; font-weight: 700; }
.pp-err { position: absolute; left: 6px; right: 6px; top: 34%; margin: 0; font-size: 12px; font-weight: 700; color: var(--no); text-align: center; background: rgba(255,255,255,.9); border-radius: 6px; padding: 2px; }
.pp-grid > .pp-err { position: static; grid-column: 1 / -1; }
.pp-actions { position: absolute; left: 0; right: 0; bottom: 0; display: flex; justify-content: flex-end; gap: 2px; padding: 4px; background: linear-gradient(transparent, rgba(0,0,0,.35)); }
.pp-actions button { width: 32px; height: 32px; border: 0; border-radius: 8px; background: rgba(255,255,255,.92); display: grid; place-items: center; cursor: pointer; }
.pp-actions button:disabled { opacity: .45; }
.pp-help { margin-top: 6px; }
@media (hover: none) { .pp-drop { display: none; } }
.uploader:has(.photo-picker) { border: 0; padding: 0; background: none; }
.filter-panel [data-geo-status]:empty { display: none; }

/* 글쓰기 도우미(write.js) */
.chip-row { display: flex; flex-wrap: wrap; gap: 6px; margin: 6px 0 0; padding: 0; }
.chip-row:empty { display: none; }
.chip-row .toggle, .chip-row .chip, .chip-row .chip-x { min-height: 36px; }
.dog-quick { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 8px; padding: 10px; border-radius: 12px; background: var(--bg-soft); }
.dog-quick input, .dog-quick select { flex: 1 1 120px; min-width: 0; }
.dog-quick .help { flex-basis: 100%; }
.date-quick .chip { font-size: 13px; }
.flatpickr-calendar { border-radius: 16px; box-shadow: 0 12px 32px rgba(0,0,0,.14); font-family: inherit; }
.flatpickr-calendar .flatpickr-day.selected, .flatpickr-calendar .flatpickr-day.selected:hover, .flatpickr-calendar .flatpickr-day.selected:focus { background: #C9405B; border-color: #C9405B; color: #fff; }
.flatpickr-calendar .flatpickr-months .flatpickr-month { height: 44px; }
.flatpickr-calendar .flatpickr-current-month { font-size: 16px; padding-top: 8px; height: 40px; }
.flatpickr-calendar .flatpickr-months .flatpickr-prev-month, .flatpickr-calendar .flatpickr-months .flatpickr-next-month { padding: 12px; }
.flatpickr-calendar .flatpickr-day.today { border-color: #C9405B; }
.flatpickr-weekdays .flatpickr-weekday:first-child, .flatpickr-days .dayContainer .flatpickr-day:nth-child(7n+1):not(.flatpickr-disabled):not(.prevMonthDay):not(.nextMonthDay) { color: #d64545; }
.flatpickr-input[readonly] { background: var(--input-bg, #fff); cursor: pointer; }

/* 공공데이터 화면 */
.breed-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 8px; }
.adopt-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 12px; }
.adopt-card { border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; }
.adopt-card img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; display: block; background: var(--photo-bg); }
.adopt-card .body { padding: 10px; display: grid; gap: 2px; }
.source-note { margin-top: 16px; }
.law-item { border-left: 4px solid var(--line); padding: 8px 12px; margin: 10px 0; }
.law-item.kind-law { border-left-color: var(--primary); }
.law-item h3 { margin: 0 0 4px; font-size: 16px; }
.status-board { display: grid; gap: 8px; }
.status-row { display: grid; grid-template-columns: 18px 1fr auto; gap: 10px; align-items: start; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); background: #fff; }
.status-dot { width: 14px; height: 14px; border-radius: 50%; margin-top: 4px; }
.status-dot.green { background: #2e9d5b; } .status-dot.yellow { background: #e6a700; } .status-dot.red { background: #d64545; } .status-dot.gray { background: #b4b9c2; }
.status-row.red { border-color: #f1b5b5; background: #fff6f6; } .status-row.yellow { border-color: #f3dc9b; background: #fffbef; }
.status-sum { display: flex; flex-wrap: wrap; gap: 8px; }

/* 반려생활 허브 */
.hub-tiles { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 768px) { .hub-tiles { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.hub-tile { display: grid; grid-template-columns: 40px 1fr; grid-template-rows: auto auto; column-gap: 10px; align-items: center; padding: 12px; border: 1px solid var(--line); border-radius: 14px; background: #fff; min-height: 72px; text-decoration: none; color: inherit; }
.hub-tile:hover { border-color: var(--primary); }
.hub-tile .ht-ico { grid-row: 1 / 3; width: 40px; height: 40px; border-radius: 12px; display: grid; place-items: center; background: var(--select-bg); color: var(--primary); }
.hub-tile .ht-name { font-weight: 700; font-size: 15px; line-height: 1.3; word-break: keep-all; }
.hub-tile .ht-meta { font-size: 12px; color: var(--muted); line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-tile.is-empty { background: var(--bg-soft); }
.hub-tile.is-empty .ht-ico { background: #eceef2; color: var(--muted); }
.info-tiles { display: grid; grid-template-columns: 1fr; gap: 8px; }
@media (min-width: 600px) { .info-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (min-width: 1000px) { .info-tiles { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.info-tiles a { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: 14px; background: var(--bg-soft); text-decoration: none; color: inherit; }
.info-tiles a:hover { background: var(--select-bg); }
.info-tiles .it-ico { flex: none; width: 40px; height: 40px; border-radius: 50%; display: grid; place-items: center; background: #fff; color: var(--primary); }
.info-tiles strong { display: block; font-size: 15px; }
.info-tiles small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }
.adopt-card .ac-photo { position: relative; aspect-ratio: 4 / 3; background: var(--photo-bg); display: grid; place-items: center; }
.adopt-card .ac-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.adopt-card .ac-nophoto { color: var(--muted); }
.adopt-card .ac-state { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; background: rgba(255,255,255,.92); font-size: 11px; font-weight: 700; color: var(--primary); }
.adopt-card .ac-mark { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.xxsmall { font-size: 11px; }
.empty-card { text-align: center; padding: 28px 16px; border-radius: 16px; background: var(--bg-soft); }
.empty-card .ec-ico { display: inline-grid; place-items: center; width: 56px; height: 56px; border-radius: 50%; background: #fff; color: var(--primary); margin-bottom: 8px; }

.pick-tabs { display: flex; gap: 6px; margin: 4px 0 8px; }
.pick-tabs button { min-height: 40px; padding: 0 16px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 700; cursor: pointer; }
.pick-tabs button[aria-selected="true"] { background: var(--primary); border-color: var(--primary); color: #fff; }

/* 품종 백과 카드·사진 */
.breed-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 700px) { .breed-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
@media (min-width: 1100px) { .breed-cards { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.breed-card { display: block; border-radius: 14px; overflow: hidden; border: 1px solid var(--line); background: #fff; text-decoration: none; color: inherit; height: 100%; }
.breed-card:hover { border-color: var(--primary); }
.bc-photo { position: relative; display: block; aspect-ratio: 4 / 3; background: var(--photo-bg); }
.bc-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.bc-none { position: absolute; inset: 0; display: grid; place-items: center; color: var(--muted); }
.bc-new { position: absolute; top: 6px; left: 6px; padding: 1px 7px; border-radius: 999px; background: var(--primary); color: #fff; font-size: 11px; font-weight: 800; }
.bc-body { display: grid; gap: 1px; padding: 8px 10px 10px; }
.bc-body strong { font-size: 14px; line-height: 1.3; word-break: keep-all; }
.bc-body small { font-size: 11px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.breed-photo { margin: 0 0 12px; }
.breed-photo img { width: 100%; height: auto; max-height: 420px; object-fit: cover; border-radius: 16px; background: var(--photo-bg); }
.breed-photo figcaption { margin-top: 6px; }
.k-updates li { display: flex; gap: 8px; align-items: baseline; padding: 6px 0; border-bottom: 1px solid var(--line); }
.k-updates time { flex: none; font-size: 12px; color: var(--muted); width: 44px; }

/* 글쓰기 간결 배치 */
.write-page .w-block { border: 0; padding: 0; margin: 0 0 18px; }
.write-page .w-label { font-weight: 800; font-size: 16px; margin: 0 0 8px; padding: 0; }
.board-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.board-chip { position: relative; display: inline-flex; }
.board-chip input { position: absolute; opacity: 0; width: 1px; height: 1px; }
.board-chip span { display: inline-flex; align-items: center; min-height: 40px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; cursor: pointer; }
.board-chip input:checked + span { background: var(--primary); border-color: var(--primary); color: #fff; }
.board-chip input:focus-visible + span { outline: 3px solid var(--focus); outline-offset: 2px; }
.small-chips .board-chip span { min-height: 36px; font-size: 13px; font-weight: 500; }
.receipt-card { margin: 0 0 18px; padding: 14px; border-radius: 16px; background: var(--select-bg); border: 1px dashed var(--primary); }
.receipt-card .rc-head { display: flex; gap: 10px; align-items: flex-start; margin-bottom: 8px; }
.receipt-card .rc-ico { flex: none; width: 36px; height: 36px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--primary); }
.receipt-card .rc-pick { cursor: pointer; }
.rc-result { margin-top: 8px; padding: 10px; border-radius: 12px; background: #fff; }
.star-input { display: flex; gap: 2px; }
.star-input .star { width: 40px; height: 40px; border: 0; background: none; font-size: 28px; line-height: 1; color: #d6d9df; cursor: pointer; padding: 0; }
.star-input .star.is-on { color: #f2b01e; }
.w-more { margin: 0 0 18px; border: 1px solid var(--line); border-radius: 14px; }
.w-more > summary { cursor: pointer; padding: 14px; font-weight: 700; list-style: none; }
.w-more > summary::-webkit-details-marker { display: none; }
.w-more > summary::after { content: "＋"; float: right; color: var(--muted); }
.w-more[open] > summary::after { content: "－"; }
.w-more-body { padding: 0 14px 14px; }
.write-page textarea[name=body] { min-height: 160px; }
.ext-menus li { display: flex; gap: 8px; align-items: center; padding: 6px 0; border-bottom: 1px solid var(--line); }
.ext-menus img { width: 48px; height: 48px; object-fit: cover; border-radius: 8px; flex: none; }
.ext-reviews li a { display: flex; gap: 10px; align-items: center; padding: 8px 0; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.ext-reviews img { width: 64px; height: 64px; object-fit: cover; border-radius: 10px; flex: none; }
.ext-reviews span { display: grid; gap: 2px; }
.place-card .photo { position: relative; }
.place-card .photo-src { position: absolute; left: 4px; bottom: 4px; padding: 0 5px; border-radius: 4px; background: rgba(0,0,0,.5); color: #fff; font-size: 10px; }
.kb-related { margin: 12px 0; padding: 12px; border-radius: 14px; background: var(--bg-soft); border-left: 4px solid var(--primary); }
.kb-related ul { margin: 0; }
.kb-related li a { display: grid; gap: 2px; padding: 6px 0; text-decoration: none; color: inherit; border-bottom: 1px solid var(--line); }
.kb-related li:last-child a { border-bottom: 0; }

/* 홈: 추천 장소 작은 카드 · 커뮤니티 베스트 */
.mini-scroll { display: flex; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding: 2px 2px 8px; margin: 0 -2px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.mini-scroll::-webkit-scrollbar { display: none; }
.mini-scroll > li { flex: 0 0 44%; max-width: 220px; scroll-snap-align: start; }
@media (min-width: 768px) { .mini-scroll > li { flex-basis: 23%; } }
.place-mini { display: block; text-decoration: none; color: inherit; }
.pm-photo { position: relative; display: block; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--photo-bg); }
.pm-photo img { width: 100%; height: 100%; object-fit: cover; display: block; }
.pm-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .02em; }
.pm-badge.best { background: #1f2430; color: #ffd76a; }
.pm-badge.rec { background: var(--primary); color: #fff; }
.pm-body { display: grid; gap: 1px; padding: 8px 2px 0; }
.pm-body strong { font-size: 15px; line-height: 1.3; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pm-body small { font-size: 12px; color: var(--muted); }
.pm-status .ok { color: #2e9d5b; font-weight: 700; }
.mini-more a { display: grid; place-items: center; gap: 4px; height: 100%; min-height: 140px; border-radius: 14px; background: var(--bg-soft); text-align: center; font-size: 13px; font-weight: 700; color: var(--primary); text-decoration: none; }
.mini-scroll > li.mini-more { flex-basis: 28%; }
.cond-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.cond-chips a { display: inline-flex; align-items: center; min-height: 38px; padding: 0 14px; border-radius: 999px; border: 1px solid var(--line); background: #fff; font-weight: 600; text-decoration: none; color: inherit; }
.gallery-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 768px) { .gallery-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gallery-grid a { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.gg-photo { position: relative; display: block; aspect-ratio: 1; border-radius: 14px; overflow: hidden; background: var(--photo-bg); }
.gg-photo img { width: 100%; height: 100%; object-fit: cover; }
.gg-rank { position: absolute; top: 6px; left: 6px; width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; background: var(--primary); color: #fff; font-size: 12px; font-weight: 800; }
.gg-cap { font-size: 13px; font-weight: 700; }
.gg-meta { display: flex; gap: 3px; align-items: center; font-size: 12px; color: var(--muted); }
.gallery-cta { display: flex; gap: 12px; align-items: center; padding: 16px; border-radius: 16px; background: var(--select-bg); text-decoration: none; color: inherit; }
.gallery-cta .gc-ico { flex: none; width: 48px; height: 48px; border-radius: 50%; background: #fff; display: grid; place-items: center; color: var(--primary); }
.gallery-cta small { display: block; color: var(--muted); font-size: 12px; margin-top: 2px; }

/* 지도 — 모바일 앱처럼: 사이트 머리글을 숨기고 검색·조건 칩을 지도 위에 띄운다 */
@media (max-width: 959px) {
  body.map-page > .header { display: none; }
  body.map-page .map-shell { height: calc(100vh - var(--nav-h) - 1px - var(--safe-b)); }
  @supports (height: 100dvh) { body.map-page .map-shell { height: calc(100dvh - var(--nav-h) - 1px - var(--safe-b)); } }
  .map-top { position: absolute; left: 0; right: 0; top: 0; padding: calc(8px + env(safe-area-inset-top, 0px)) 10px 4px; background: linear-gradient(rgba(255,255,255,.96), rgba(255,255,255,.85) 70%, rgba(255,255,255,0)); border-bottom: 0; }
  .map-top .map-top-row { overflow-x: auto; scrollbar-width: none; flex-wrap: nowrap; }
  .map-top .map-top-row::-webkit-scrollbar { display: none; }
  .map-top .chip, .map-top .toggle { flex: none; box-shadow: 0 2px 8px rgba(36,41,51,.12); border-color: transparent; background: #fff; min-height: 38px; }
  .map-top .toggle.is-on, .map-top .chip-strong { background: var(--primary); color: #fff; }
  .map-top .grow { display: none; }
  /* 아래 목록: 중간 높이를 넉넉하게(46%), 카드·글자 크게, 손잡이 크게, 접기·펼치기 버튼 보이기 */
  .map-shell .map-wrap { top: 0; bottom: 46%; }
  .map-sheet { height: 46%; border-radius: 20px 20px 0 0; }
  .map-sheet[data-state="collapsed"] { height: 84px; }
  .map-shell[data-sheet="collapsed"] .map-wrap { bottom: 84px; }
  .map-sheet-handle { height: 28px; }
  .map-sheet-handle::after { top: 10px; width: 48px; height: 6px; margin-left: -24px; }
  .map-sheet-btns { display: flex; }
  .map-sheet-btns .btn { min-height: 32px; font-size: 12.5px; }
  .map-count { font-size: 15px; }
  .map-tools { top: 108px; }
  .map-sheet .place-card { grid-template-columns: 92px minmax(0, 1fr); gap: 12px; padding: 12px 4px; border-bottom: 1px solid var(--line); }
  .map-sheet .place-card .photo { border-radius: 12px; }
  .map-sheet .place-card h3 { font-size: 16px; }
  .map-sheet .place-card .meta { font-size: 13px; }
}

/* 서비스 소개 */
.about-hero { text-align: center; padding: 28px 0 8px; }
.about-hero img { border-radius: 50%; }
.about-hero h1 { margin: 10px 0 6px; }
.about-lead { font-size: 16px; color: var(--text); max-width: 560px; margin: 0 auto 14px; }
.center-row { justify-content: center; gap: 8px; }
.about-cards { display: grid; gap: 10px; margin: 20px 0; }
@media (min-width: 720px) { .about-cards { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-cards li { padding: 16px; border-radius: 16px; background: var(--bg-soft); }
.about-cards h2 { font-size: 16px; margin: 8px 0 4px; }
.about-cards p { font-size: 14px; margin: 0; color: var(--muted); }
.ac-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fff; color: var(--primary); }
.about-list { padding-left: 18px; }
.about-list li { margin: 8px 0; }
.about-links { display: grid; gap: 8px; }
@media (min-width: 720px) { .about-links { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.about-links a { display: flex; gap: 10px; align-items: center; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; text-decoration: none; color: inherit; }
.about-links small { display: block; font-size: 12px; color: var(--muted); }
.auth-fallback { margin-top: 18px; border-top: 1px solid var(--line); padding-top: 12px; }
.auth-fallback > summary { cursor: pointer; text-align: center; font-size: 14px; color: var(--muted); list-style: none; padding: 6px 0; }
.auth-fallback > summary::-webkit-details-marker { display: none; }
.auth-fallback > summary strong { color: var(--text); text-decoration: underline; }
.auth-fallback[open] > summary { margin-bottom: 10px; }

/* 글쓰기: 선택한 장소 펼쳐 보기 */
.chosen-place { border: 1px solid var(--line, #eee); border-radius: 12px; padding: 8px 12px; background: var(--surface, #fff); }
.chosen-place summary { cursor: pointer; list-style: none; }
.chosen-place summary::-webkit-details-marker { display: none; }
.chosen-place .cp-body { display: flex; gap: 10px; align-items: flex-start; margin-top: 8px; }
.chosen-place .cp-body img { width: 96px; height: 72px; object-fit: cover; border-radius: 8px; flex: none; }
.draft-bar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.draft-bar > span:first-child { flex: 1 1 200px; }
.disc-fold > summary { cursor: pointer; }

/* 검색: 고친 검색어 안내·추천 업소 */
.search-fix { background: var(--bg-soft); border-radius: 10px; padding: 6px 10px; margin-top: 6px; }
.search-recs { margin: 8px 0 12px; }
.search-recs .section-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.search-recs .h-sm { font-size: 16px; margin: 0; }

/* 구조해주개(2026-10-05 개편): 2열 카드·상세·전화 안내 */
.adopt-head { padding-top: var(--s2); display: grid; gap: 6px; }
.adopt-head h1 { font-size: 24px; }
.text-primary { color: var(--primary); }
.adopt-tools { display: flex; flex-wrap: wrap; gap: 8px; justify-content: space-between; margin: 8px 0 6px; }
.seg { display: inline-flex; border: 1px solid var(--line); border-radius: 999px; overflow: hidden; }
.seg a { padding: 6px 12px; font-size: 13px; color: var(--muted); text-decoration: none; }
.seg a[aria-current="true"] { background: var(--primary); color: #fff; font-weight: 700; }
.adopt-page .adopt-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 720px) { .adopt-page .adopt-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 14px; } }
a.adopt-card { display: flex; flex-direction: column; height: 100%; color: inherit; text-decoration: none; border: 1px solid var(--line); border-radius: var(--r-card); overflow: hidden; background: #fff; }
a.adopt-card:active { transform: scale(.99); }
a.adopt-card .ac-photo { position: relative; aspect-ratio: 1 / 1; background: var(--photo-bg); display: grid; place-items: center; }
a.adopt-card .ac-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }
.ac-badge { position: absolute; top: 8px; left: 8px; padding: 2px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; background: #fff; color: var(--primary); box-shadow: 0 1px 3px rgba(0,0,0,.12); }
.ac-badge.soon { background: var(--primary); color: #fff; }
.ac-body { display: grid; gap: 2px; padding: 8px 10px 10px; }
.ac-title { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-meta, .ac-where { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ac-where { display: flex; align-items: center; gap: 2px; }
.small-grid { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
.adopt-detail .ad-photos { display: grid; gap: 6px; margin: 8px 0 12px; border-radius: var(--r-card); overflow: hidden; background: var(--photo-bg); }
.adopt-detail .ad-photos.two { grid-template-columns: 1fr 1fr; }
.adopt-detail .ad-photos img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; display: block; }
.adopt-detail .ad-photos .ac-nophoto { display: grid; place-items: center; aspect-ratio: 4 / 3; color: var(--muted); }
.ad-head { display: grid; gap: 4px; }
.ad-call { margin: 14px 0; display: grid; gap: 10px; }
.ad-script { background: var(--bg-soft); border-radius: 12px; padding: 12px; }
.ad-info { display: grid; grid-template-columns: 88px 1fr; gap: 6px 10px; margin: 0; font-size: 14px; }
.ad-info dt { color: var(--muted); }
.ad-info dd { margin: 0; word-break: keep-all; }
.adopt-steps { padding-left: 20px; display: grid; gap: 10px; }
.adopt-steps li span { display: block; font-size: 13px; color: var(--muted); }

/* 견종 백과: 사진 없는 카드·백과 첫 화면 가로 띠 */
.bc-none { gap: 4px; align-content: center; background: linear-gradient(135deg, #fdf1f3, #f6f7f9); }
.bc-none small { font-size: 11px; color: var(--muted); }
.breed-card .bc-body strong { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.breed-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 42%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; -webkit-overflow-scrolling: touch; }
@media (min-width: 700px) { .breed-scroll { grid-auto-columns: 22%; } }
@media (min-width: 1100px) { .breed-scroll { grid-auto-columns: 17%; } }
.breed-scroll > li { scroll-snap-align: start; }
.bs-more a { display: grid; place-items: center; align-content: center; gap: 6px; height: 100%; min-height: 160px; border: 1px dashed var(--line); border-radius: 14px; color: var(--primary); text-decoration: none; text-align: center; font-size: 13px; font-weight: 700; }

/* 홈 아래 구조해주개 띠 */
.rescue-scroll { display: grid; grid-auto-flow: column; grid-auto-columns: 38%; gap: 10px; overflow-x: auto; scroll-snap-type: x mandatory; padding-bottom: 6px; }
@media (min-width: 700px) { .rescue-scroll { grid-auto-columns: 20%; } }
.rescue-scroll > li { scroll-snap-align: start; }
.rescue-scroll .ac-photo { position: relative; aspect-ratio: 1 / 1; display: block; background: var(--photo-bg); }
.rescue-scroll .ac-photo img { position: absolute; inset: 0; width: 100%; height: 100%; object-fit: cover; }

/* 깨진 외부 사진 대체·글자형 버튼 */
.img-fallback { position: absolute; inset: 0; display: grid; place-items: center; align-content: center; gap: 4px; color: var(--muted); background: linear-gradient(135deg, #fdf1f3, #f6f7f9); }
.img-fallback small { font-size: 11px; }
.ad-photos .img-fallback { position: static; aspect-ratio: 1 / 1; }
.link-btn { background: none; border: 0; padding: 0 2px; color: var(--select-fg); font-weight: 600; text-decoration: underline; cursor: pointer; font-family: inherit; }

.real-visit { display: flex; gap: 8px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; margin: 6px 0; }

.ext-hero img { width: 100%; aspect-ratio: 4 / 3; object-fit: cover; border-radius: var(--r-card); background: var(--photo-bg); display: block; }
.ext-hero figure { position: relative; margin: 0; }
.ext-hero .img-fallback { position: static; aspect-ratio: 4 / 3; border-radius: var(--r-card); }
/* 장소 목록 빠른 조건: 좁은 화면에서 마지막 칩이 잘려 보이지 않게 줄바꿈(가로 스크롤·흐림 없음) */
.quick-row { align-items: flex-start; }
.quick-row .toggle-chips { flex-wrap: wrap; overflow: visible; -webkit-mask-image: none; mask-image: none; padding-right: 0; row-gap: 8px; }

/* 숫자로 보는 반려생활(2026-10-06 개편) */
.stats-kpis { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; margin: 12px 0 8px; }
@media (min-width: 900px) { .stats-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.kpi { display: grid; gap: 4px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.kpi.site { background: var(--bg-soft); }
.kpi-label { font-size: 13px; color: var(--muted); }
.kpi-value { font-size: 24px; font-weight: 800; line-height: 1.15; word-break: keep-all; }
.kpi-value.pending { font-size: 18px; color: var(--muted); }
.kpi-sub { font-size: 12px; color: var(--muted); }
.kpi-sub .up { color: #1a7f37; } .kpi-sub .down { color: #b42318; }
.stat-card-lg { border: 1px solid var(--line); border-radius: var(--r-card); padding: 16px; margin-top: 14px; }
.stat-grid { display: grid; gap: 16px; }
@media (min-width: 900px) { .stat-grid { grid-template-columns: 3fr 2fr; } }
.stat-bars, .stat-split { margin: 0; }
.bar-row, .region-bars summary { display: grid; grid-template-columns: 64px 1fr auto; gap: 8px; align-items: center; font-size: 13px; padding: 3px 0; }
.bar-track { display: block; height: 12px; background: #f1f2f4; border-radius: 999px; overflow: hidden; }
.bar-track .bar { display: block; height: 100%; background: var(--primary); border-radius: 999px; }
.bar-val { font-variant-numeric: tabular-nums; font-weight: 600; }
.split-bar { display: flex; height: 16px; border-radius: 999px; overflow: hidden; background: #f1f2f4; margin: 6px 0; }
.sp-dog { background: var(--primary); } .sp-cat { background: #f0a6b4; }
.split-legend { display: grid; gap: 4px; font-size: 13px; }
.split-legend .dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; margin-right: 6px; vertical-align: middle; }
.stat-regions { margin-top: 16px; }
.region-bars summary { cursor: pointer; list-style: none; }
.region-bars summary::-webkit-details-marker { display: none; }
.region-bars details[open] summary .bar { background: #a8324a; }
.sub-regions { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 2px 16px; padding: 6px 0 10px 72px; font-size: 12px; }
@media (max-width: 480px) { .sub-regions { grid-template-columns: 1fr; padding-left: 12px; } }
.sub-regions li { display: flex; justify-content: space-between; border-bottom: 1px dashed var(--line); padding: 2px 0; }

/* 인허가 업소(2026-10-06) */
.fac-grid { display: grid; gap: 10px; }
@media (min-width: 900px) { .fac-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.fac-card { border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; display: grid; }
.fac-main { display: grid; grid-template-columns: 40px 1fr 16px; gap: 10px; align-items: center; padding: 12px 12px 8px; color: inherit; text-decoration: none; }
.fac-ico { display: inline-grid; place-items: center; width: 40px; height: 40px; border-radius: 12px; background: #fdf1f3; color: var(--primary); }
.fac-ico.lg { width: 52px; height: 52px; }
.fac-body { display: grid; gap: 2px; min-width: 0; }
.fac-body strong { font-size: 15px; }
.fac-addr { color: var(--text); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fac-tags { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.fac-actions { display: flex; gap: 6px; padding: 0 12px 12px 62px; }
.fd-head { display: flex; gap: 12px; align-items: center; margin: 8px 0 12px; }
.fd-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 8px; }
.fd-near { display: grid; gap: 6px; }
@media (min-width: 720px) { .fd-near { grid-template-columns: 1fr 1fr; } }
.fd-near a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }

/* 함께 지킬개(2026-10-06) */
.et-laws { border: 1px solid #f3c4cd; background: #fff7f8; border-radius: var(--r-card); padding: 12px 14px; margin: 12px 0; }
.et-law-list { display: flex; flex-wrap: wrap; gap: 6px; }
.et-law-list a { display: inline-flex; gap: 4px; align-items: center; padding: 6px 10px; border-radius: 999px; background: #fff; border: 1px solid #f3c4cd; color: var(--text); text-decoration: none; font-size: 13px; }
.et-tabs .pick-tabs { margin: 8px 0 12px; }
.et-grid { display: grid; gap: 10px; }
@media (min-width: 800px) { .et-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
.et-card { display: flex; gap: 12px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; transition: box-shadow .3s; }
.et-card.kind-law { border-color: #f3c4cd; }
.et-card.is-flash { box-shadow: 0 0 0 3px rgba(201, 64, 91, .35); }
.et-text { display: grid; gap: 4px; align-content: start; }
.et-text .tag { justify-self: start; }
/* BEST(2026-10-06) */
.best-hero { display: flex; gap: 14px; align-items: center; padding: 16px; margin: 12px 0; border-radius: var(--r-card); background: linear-gradient(135deg, #fff7f8, #f8fafc); border: 1px solid var(--line); }
.best-hero img { flex: none; }
.best-hero h1 { font-size: 22px; word-break: keep-all; }
.best-empty { padding: 14px; border: 1px dashed #f3c4cd; border-radius: var(--r-card); background: #fffafb; }
.best-empty .row { gap: 6px; flex-wrap: wrap; }
.best-steps { display: grid; gap: 10px; }
@media (min-width: 900px) { .best-steps { grid-template-columns: repeat(3, minmax(0, 1fr)); } }
.best-steps li { display: flex; gap: 10px; padding: 14px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; }
.bs-n { flex: none; width: 28px; height: 28px; border-radius: 50%; background: var(--primary); color: #fff; font-weight: 800; display: grid; place-items: center; }
.best-weights { display: grid; gap: 6px; }
.best-weights li { display: grid; grid-template-columns: 1fr 120px 40px; gap: 8px; align-items: center; font-size: 13px; }
@media (max-width: 480px) { .best-weights li { grid-template-columns: 1fr 70px 36px; } }

/* 지역 허브 안내 카드(2026-10-06) */
.hub-card { margin-top: 10px; padding: 12px 14px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff7f8, #f8fafc); border: 1px solid var(--line); display: grid; gap: 8px; }
.hub-stats { display: flex; flex-wrap: wrap; gap: 6px; }
.hub-chip { display: inline-flex; align-items: center; gap: 4px; padding: 4px 10px; border-radius: 999px; background: #fff; border: 1px solid var(--line); font-size: 12px; color: var(--muted); }
.hub-chip.strong { color: var(--primary); font-weight: 800; border-color: #f3c4cd; }
.hub-intro summary { list-style: none; cursor: pointer; }
.hub-intro summary::-webkit-details-marker { display: none; }
.hub-intro-text { font-size: 13px; color: var(--text); display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.hub-intro[open] .hub-intro-text { -webkit-line-clamp: unset; display: block; }
.hub-more { color: var(--primary); font-weight: 700; }
.hub-intro[open] .hub-more { display: none; }
.hub-sub .chip { font-size: 12px; padding: 4px 10px; }
.hub-card { grid-template-columns: minmax(0, 1fr); min-width: 0; max-width: 100%; }
.hub-card > * { min-width: 0; }

/* 점주 쿠폰(2026-10-06) */
.coupon-list { display: grid; gap: 10px; }
.coupon-card { display: flex; justify-content: space-between; gap: 12px; align-items: center; padding: 14px; border: 1px dashed #f0a6b4; border-radius: var(--r-card); background: #fffafb; }
.coupon-card.is-off { opacity: .6; background: #fafafa; border-color: var(--line); }
.coupon-code .code { font: 800 18px/1 ui-monospace, Menlo, monospace; letter-spacing: 2px; color: var(--primary); background: #fff; border: 1px solid #f3c4cd; padding: 8px 10px; border-radius: 10px; display: inline-block; }
.code-input { text-transform: uppercase; letter-spacing: 2px; font-family: ui-monospace, Menlo, monospace; max-width: 220px; }
.place-coupons { display: grid; gap: 8px; margin-top: 12px; }
.place-coupon { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 12px; border: 1px dashed #f0a6b4; border-radius: 12px; background: #fffafb; }
.owner-news-list { display: grid; gap: 8px; }
.owner-news-list a { display: grid; gap: 2px; padding: 10px 12px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; }

/* 점주 대시보드(2026-10-06) */
.owner-points { display: flex; flex-wrap: wrap; gap: 10px; justify-content: space-between; align-items: center; padding: 14px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff7f8, #f8fafc); border: 1px solid var(--line); margin-bottom: 12px; }
.owner-points > div:first-child { display: grid; gap: 2px; }
.owner-points strong { font-size: 22px; }
.owner-points .row { gap: 6px; flex-wrap: wrap; }
.owner-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-top: 8px; }
@media (min-width: 720px) { .owner-actions { grid-template-columns: repeat(6, minmax(0, 1fr)); } }
.owner-actions a { display: grid; justify-items: center; gap: 4px; padding: 10px 4px; border: 1px solid var(--line); border-radius: 12px; color: inherit; text-decoration: none; font-size: 12px; text-align: center; }
.owner-actions a .icon { color: var(--primary); }

/* 포인트·교환소·초대(2026-10-06) */
.pt-hero { display: grid; gap: 10px; margin-bottom: 12px; }
@media (min-width: 720px) { .pt-hero { grid-template-columns: 1fr 1fr; } }
.pt-balance, .pt-grade { display: grid; gap: 4px; padding: 16px; border-radius: var(--r-card); }
.pt-balance { background: var(--primary); color: #fff; }
.pt-balance strong { font-size: 32px; } .pt-balance small { font-size: 16px; margin-left: 2px; }
.pt-grade { border: 1px solid var(--line); background: #fff; }
.pt-grade strong { font-size: 22px; }
.pt-bar { display: block; height: 8px; background: #f1f2f4; border-radius: 999px; overflow: hidden; }
.pt-bar span { display: block; height: 100%; background: var(--primary); }
.pt-actions { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin-bottom: 8px; }
.pt-actions a { display: grid; justify-items: center; text-align: center; gap: 4px; padding: 12px 6px; border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; }
.pt-actions a .icon { color: var(--primary); } .pt-actions small { display: block; font-size: 11px; color: var(--muted); }
.pt-rules { display: grid; gap: 6px; }
.pt-rules li { display: flex; gap: 8px; align-items: baseline; justify-content: space-between; padding: 8px 0; border-bottom: 1px dashed var(--line); font-size: 14px; }
.pt-rules b { color: var(--primary); white-space: nowrap; }
.pt-history summary { cursor: pointer; } .d-inline { display: inline; }
.pt-entries li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--line); }
.pt-entries li > span:first-child { display: grid; gap: 2px; } .pt-entries small { font-size: 12px; }
.pt-entries b.plus { color: #1a7f37; } .pt-entries b.minus { color: #b42318; }
.pt-mini { display: flex; flex-wrap: wrap; gap: 8px; align-items: baseline; }
.shop-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
@media (min-width: 900px) { .shop-grid { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.shop-card { display: grid; gap: 8px; padding: 10px; border: 1px solid var(--line); border-radius: var(--r-card); background: #fff; align-content: start; }
.shop-card.is-off { opacity: .55; }
.shop-img { display: grid; place-items: center; aspect-ratio: 1 / 1; border-radius: 10px; background: #fdf1f3; color: var(--primary); overflow: hidden; }
.shop-img img { width: 100%; height: 100%; object-fit: cover; }
.shop-body { display: grid; gap: 2px; } .shop-body small { font-size: 12px; }
.shop-cost { color: var(--primary); font-size: 16px; }
.shop-redeem summary { list-style: none; } .shop-redeem summary::-webkit-details-marker { display: none; }
.charge-box { background: var(--bg-soft); border-radius: var(--r-card); padding: 14px; }
.invite-card { display: grid; justify-items: center; gap: 8px; padding: 20px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff7f8, #f8fafc); border: 1px dashed #f0a6b4; margin-bottom: 12px; }
.invite-code { font: 800 30px/1 ui-monospace, Menlo, monospace; letter-spacing: 6px; color: var(--primary); }
.invite-card .row { gap: 6px; }

/* 마이: 강아지 등록 유도 */
.dog-nudge { display: grid; grid-template-columns: 52px 1fr; gap: 12px; align-items: center; padding: 16px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff1f4, #fff9ec); border: 1px solid #f3c4cd; color: inherit; text-decoration: none; }
.dog-nudge .btn { grid-column: 1 / -1; justify-self: start; }
@media (min-width: 600px) { .dog-nudge { grid-template-columns: 52px 1fr auto; } .dog-nudge .btn { grid-column: auto; } }
.dn-ico { width: 52px; height: 52px; border-radius: 16px; background: #fff; color: var(--primary); display: grid; place-items: center; box-shadow: 0 2px 8px rgba(201,64,91,.15); }
.dn-ico .icon { width: 28px; height: 28px; }
.dn-text { display: grid; gap: 4px; } .dn-text small { font-size: 13px; color: var(--muted); line-height: 1.5; } .dn-text b { color: var(--primary); }

/* 처음 온 방문자 안내 띠 */
.welcome-strip { background: linear-gradient(135deg, #fff1f4, #fff9ec); border-bottom: 1px solid #f3c4cd; }
.welcome-strip .ws-in { max-width: 1120px; margin: 0 auto; padding: 10px 16px; display: grid; grid-template-columns: 32px 1fr 28px; gap: 8px 10px; align-items: center; position: relative; }
.welcome-strip .ws-in > p { font-size: 13px; }
.welcome-strip .ws-in > p span { color: var(--muted); }
.welcome-strip .ws-links { grid-column: 2 / 3; display: flex; gap: 6px; flex-wrap: wrap; }
.welcome-strip .ws-ico { color: var(--primary); }
.welcome-strip .ws-close { grid-column: 3; grid-row: 1; }
/* 커뮤니티: 강아지 반응·사진 넘겨보기·이전/다음 글·댓글창(2026-10-06) */
.react-bar { display: flex; flex-wrap: wrap; gap: 6px; text-decoration: none; }
.react-bar form { margin: 0; }
.react-btn { display: inline-flex; align-items: center; gap: 4px; padding: 6px 12px; border-radius: 999px; border: 1px solid #f3d2d9; background: #fff; color: var(--text); font-size: 13px; cursor: pointer; transition: transform .15s, background .15s; }
.react-btn .re { font-size: 16px; line-height: 1; }
.react-btn b { font-weight: 700; color: var(--muted); }
.react-btn.on { background: #fff0f3; border-color: var(--primary); color: var(--primary); }
.react-btn.on b { color: var(--primary); }
.react-btn.pop { animation: react-pop .35s ease; }
@keyframes react-pop { 40% { transform: scale(1.18); } }
@media (max-width: 380px) { .react-btn .rl { display: none; } }
.react-bar.guest .react-btn { cursor: pointer; }
.react-mini { white-space: nowrap; }
.thumb { position: relative; }
.photo-n { position: absolute; right: 4px; bottom: 4px; display: inline-flex; align-items: center; gap: 2px; padding: 1px 6px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 11px; }
.photo-n .icon { width: 12px; height: 12px; }
.post-photo { margin: 0; border-radius: 14px; overflow: hidden; }
.post-gallery { position: relative; }
.pg-track { display: flex; overflow-x: auto; scroll-snap-type: x mandatory; border-radius: 16px; scrollbar-width: none; }
.pg-track::-webkit-scrollbar { display: none; }
.pg-track > li { flex: 0 0 100%; scroll-snap-align: center; }
.pg-track figure { margin: 0; background: #f6f7f9; display: grid; place-items: center; }
.pg-track img { width: 100%; max-height: 70vh; object-fit: contain; display: block; }
.pg-count { position: absolute; top: 10px; right: 10px; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; }
.pg-dots { display: flex; justify-content: center; gap: 5px; margin-top: 8px; }
.pg-dots span { width: 6px; height: 6px; border-radius: 50%; background: #e3c4cb; transition: width .2s; }
.pg-dots span.on { width: 16px; border-radius: 3px; background: var(--primary); }
.post-nav { display: grid; gap: 8px; margin-top: 18px; }
@media (min-width: 720px) { .post-nav { grid-template-columns: 1fr 1fr; } }
.post-nav .pn { display: grid; gap: 2px; padding: 12px 14px; border: 1px solid var(--line); border-radius: 14px; color: inherit; text-decoration: none; background: #fff; }
.post-nav .pn.next { text-align: right; }
.post-nav .pn.next span { justify-content: flex-end; }
.post-nav .pn span { display: inline-flex; align-items: center; gap: 2px; }
.post-more { margin-top: 12px; }
/* 댓글: 부드러운 말풍선·둥근 입력창 */
#comments .comment { background: #fff8fa; border: 1px solid #f7e1e6; border-radius: 4px 16px 16px 16px; padding: 10px 14px; margin: 8px 0; }
#comments .comment .who { font-weight: 700; font-size: 13px; color: #8a3b4c; }
#comments .comment .when { font-weight: 400; color: var(--muted); margin-left: 6px; font-size: 12px; }
#comments .comment .comment { background: #fff; border-radius: 16px; margin-left: 14px; }
.composer { display: flex; gap: 8px; align-items: flex-end; margin-top: 14px; padding: 10px; border-radius: 20px; background: linear-gradient(135deg, #fff5f7, #fffafb); border: 1px solid #f3d2d9; box-shadow: 0 4px 14px rgba(201,64,91,.06); }
.composer .grow { flex: 1; min-width: 0; }
.composer textarea { width: 100%; border: 0; background: transparent; resize: none; font: inherit; padding: 6px 4px; min-height: 40px; outline: none; }
.composer textarea::placeholder { color: #c28b98; }
.composer .btn-primary { border-radius: 999px; padding: 8px 16px; }
.composer-tools { display: flex; gap: 4px; }
.composer-tools .icon-btn { width: 34px; height: 34px; border-radius: 50%; background: #fff; border: 1px solid #f3d2d9; font-size: 16px; }
.composer-tools .icon-btn[aria-expanded="true"] { background: #ffe7ec; border-color: var(--primary); }
.tool-panel { margin-top: 8px; padding: 10px; border-radius: 16px; background: #fff; border: 1px solid #f3d2d9; }
.emoji-grid { display: grid; grid-template-columns: repeat(8, minmax(0, 1fr)); gap: 4px; }
.emoji-grid button { font-size: 22px; line-height: 1; padding: 6px 0; border: 0; background: transparent; border-radius: 10px; cursor: pointer; }
.emoji-grid button:hover, .emoji-grid button:focus-visible { background: #fff0f3; }
.sticker-grid { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; }
.sticker-grid button { display: grid; justify-items: center; gap: 2px; padding: 6px; border: 1px solid transparent; border-radius: 12px; background: #fffafb; font-size: 11px; cursor: pointer; }
.sticker-grid button:hover { border-color: #f3c4cd; }
/* 출석체크 */
.att-hero { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 18px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff1f4, #fff9ec); border: 1px solid #f3c4cd; margin-bottom: 14px; }
.att-hero > div { display: grid; gap: 2px; } .att-hero strong { font-size: 28px; color: var(--primary); }
.att-btn { font-size: 16px; padding: 12px 18px; border-radius: 999px; }
.att-cal { width: 100%; border-collapse: separate; border-spacing: 4px; text-align: center; }
.att-cal caption { font-weight: 800; margin-bottom: 6px; }
.att-cal th { font-size: 12px; color: var(--muted); font-weight: 600; }
.att-cal td { height: 42px; }
.att-cal .d { display: inline-grid; place-items: center; width: 36px; height: 36px; border-radius: 50%; font-size: 13px; }
.att-cal .d.on { background: #ffe3ea; font-size: 18px; }
.att-cal td.today .d { box-shadow: 0 0 0 2px var(--primary); }

.comm-daily { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; margin: 10px 0 4px; }
.cd-card { display: flex; gap: 10px; align-items: center; padding: 12px; border-radius: 16px; background: linear-gradient(135deg, #fff5f7, #fffaf0); border: 1px solid #f6d9df; color: inherit; text-decoration: none; }
.cd-card .cd-emoji { font-size: 24px; }
.cd-card span:last-child { display: grid; } .cd-card small { font-size: 11px; color: var(--muted); }

/* 닉네임 옆 표시 */
.who-line { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; }
.who-line a { color: inherit; font-weight: 700; text-decoration: none; }
.w-fam { padding: 0 6px; border-radius: 999px; background: #fff0f3; color: var(--primary); font-size: 11px; font-weight: 700; }
.w-grade { font-size: 13px; line-height: 1; }
.w-dog { font-size: 11px; color: var(--muted); }
/* 미니홈(2026-10-06) */
.minihome .mh-top { margin-top: 12px; }
.mh-grid { display: grid; gap: 14px; margin-top: 12px; }
@media (min-width: 900px) { .mh-grid { grid-template-columns: 300px 1fr; align-items: start; } }
.mh-side { display: grid; gap: 10px; }
.mh-mood { display: grid; gap: 2px; padding: 10px 12px; border-radius: 14px; background: #fff7f9; border: 1px dashed #f0b9c5; margin: 0; }
.mh-bio { margin: 0; font-size: 14px; }
.mh-visits { display: flex; gap: 12px; font-size: 12px; letter-spacing: .5px; color: var(--muted); margin: 0; }
.mh-visits b { color: var(--primary); }
.mh-box { padding: 14px; border-radius: 16px; border: 1px solid #f1dde2; background: #fff; }
.mh-h { font-size: 14px; margin: 0 0 8px; color: #8a3b4c; }
.mh-dogs li a { display: flex; gap: 8px; align-items: center; padding: 4px 0; color: inherit; text-decoration: none; }
.mh-dogs .ph { width: 40px; height: 40px; border-radius: 50%; overflow: hidden; background: #fff0f3; display: grid; place-items: center; color: var(--primary); flex: none; }
.mh-dogs .ph img { width: 100%; height: 100%; object-fit: cover; }
.mh-dogs small { display: block; font-size: 11px; color: var(--muted); }
.mh-actions { gap: 6px; flex-wrap: wrap; }
.mh-album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 4px; }
.mh-album a { display: block; aspect-ratio: 1 / 1; border-radius: 8px; overflow: hidden; background: #f6f7f9; }
.mh-album img { width: 100%; height: 100%; object-fit: cover; }
.gb-form { display: grid; gap: 6px; margin-bottom: 10px; }
.gb-form textarea { width: 100%; border-radius: 14px; border: 1px solid #f3d2d9; padding: 10px 12px; font: inherit; background: #fffafb; }
.gb-list { display: grid; gap: 8px; }
.gb-item { padding: 10px 12px; border-radius: 4px 14px 14px 14px; background: #fff8fa; border: 1px solid #f7e1e6; }
.gb-item.secret { background: #f8f8fb; }
.family-card { padding: 16px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff5f7, #fffaf0); border: 1px solid #f3c4cd; display: grid; gap: 8px; }
.invite-code.sm { font-size: 18px; letter-spacing: 3px; }
.family-list li { padding: 4px 0; }
.cz-badges { border: 1px solid var(--line); border-radius: 14px; padding: 12px; }
/* 글 영상 */
.post-video { margin: 0; border-radius: 16px; overflow: hidden; background: #111; }
.post-video video { width: 100%; height: auto; max-height: 75vh; display: block; }
.card-video { width: 100%; height: 100%; object-fit: cover; display: block; border-radius: inherit; background: #f6f7f9; }
.video-up summary { cursor: pointer; display: inline-flex; gap: 4px; align-items: center; }

/* 검수 반영(2026-10-06): 댓글 고르기 판·포커스·사진 넘기기 버튼 */
.composer { flex-wrap: wrap; }
.composer .grow { flex: 1 1 200px; }
.composer:focus-within { outline: 3px solid var(--focus, #2563eb); outline-offset: 2px; }
.composer .tool-panel { flex-basis: 100%; }
.emoji-grid { grid-template-columns: repeat(auto-fill, minmax(40px, 1fr)); }
.emoji-grid button { min-height: 40px; }
.sticker-grid { grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); }
.sticker-grid img { height: auto; }
.pg-nav { position: absolute; top: 50%; transform: translateY(-50%); width: 38px; height: 38px; border-radius: 50%; border: 0; background: rgba(255,255,255,.85); box-shadow: 0 2px 6px rgba(0,0,0,.15); display: grid; place-items: center; cursor: pointer; }
.pg-nav.prev { left: 8px; } .pg-nav.next { right: 8px; }
@media (hover: none) { .pg-nav { display: none; } }
/* 저장 버튼 띠가 아래 탭 막대에 가려지지 않게(모바일) */
@media (max-width: 959px) { body:not(.no-nav) .sticky-actions { bottom: calc(var(--nav-h) + var(--safe-b)); } }
/* 포인트 적립 기준: 이름 | 포인트, 하루 상한은 이름 아래 */
.pt-rules li { display: grid; grid-template-columns: 1fr auto; column-gap: 12px; row-gap: 2px; align-items: baseline; }
.pt-rules li > span { grid-column: 1; }
.pt-rules li > b { grid-column: 2; grid-row: 1; text-align: right; }
.pt-rules li > small { grid-column: 1 / -1; grid-row: 2; font-size: 12px; }
.pt-actions a { min-height: 96px; align-content: center; }
.pt-actions strong { font-size: 14px; word-break: keep-all; }
.pt-bar { margin: 4px 0; }

.dog-hello { display: flex; gap: 12px; align-items: center; padding: 14px; border-radius: var(--r-card); background: linear-gradient(135deg, #fff1f4, #fff9ec); border: 1px solid #f3c4cd; margin-bottom: 12px; }
.dog-hello .dn-ico { font-size: 26px; }

/* 추천하개 버튼(2026-10-06) */
.rec-form { margin: 0; display: inline-block; }
.rec-btn { position: relative; display: inline-flex; align-items: center; gap: 6px; padding: 8px 16px; border-radius: 999px; border: 1.5px solid #f0b9c5; background: #fff; color: #8a3b4c; font-size: 14px; font-weight: 700; cursor: pointer; text-decoration: none; overflow: visible; transition: background .2s, border-color .2s, color .2s; }
.rec-btn .rec-paw { font-size: 18px; line-height: 1; filter: grayscale(.6); transition: filter .2s, transform .2s; }
.rec-btn b { min-width: 1ch; }
.rec-btn.on { background: linear-gradient(135deg, #ffe3ea, #fff0e0); border-color: var(--primary); color: var(--primary); }
.rec-btn.on .rec-paw { filter: none; transform: rotate(-12deg); }
.rec-btn.pop { animation: rec-pop .45s cubic-bezier(.2, 1.6, .4, 1); }
@keyframes rec-pop { 0% { transform: scale(1); } 35% { transform: scale(1.18); } 70% { transform: scale(.96); } 100% { transform: scale(1); } }
.paw-fly { position: absolute; left: 22px; top: 50%; font-size: 14px; pointer-events: none; animation: paw-fly .9s ease-out forwards; }
@keyframes paw-fly { 0% { opacity: 1; transform: translate(0, -50%) scale(.6) rotate(0); } 100% { opacity: 0; transform: translate(var(--dx), calc(-50% + var(--dy))) scale(1.1) rotate(var(--rot)); } }
@media (prefers-reduced-motion: reduce) { .rec-btn.pop { animation: none; } }

/* 네이버 외부 평점(함께할개 별점과 다른 모양) */
.naver-stat { padding: 10px 12px; border-radius: 12px; background: #f3fbf5; border: 1px solid #cfe9d6; margin: 6px 0 10px; display: grid; gap: 4px; }
.ns-main { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; font-size: 14px; }
.ns-src { display: inline-grid; place-items: center; width: 18px; height: 18px; border-radius: 4px; background: #03c75a; color: #fff; font-size: 11px; font-weight: 900; }
.ns-main b { color: #0a7d3b; }

/* 강아지 등록 화면 */
.dog-form { display: grid; gap: 12px; }
.dog-card { background: #fff; border: 1px solid var(--line, #eee); border-radius: var(--r-card, 16px); padding: 16px; display: grid; gap: 4px; }
.dog-card .field { margin-bottom: 8px; }
.dog-h { font-size: 15px; margin: 0 0 6px; }
.dog-top { grid-template-columns: 132px 1fr; gap: 16px; align-items: start; }
.dog-photo { display: grid; gap: 6px; justify-items: center; text-align: center; }
.dp-pick { position: relative; display: grid; justify-items: center; gap: 6px; cursor: pointer; }
.dp-circle { width: 112px; height: 112px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: linear-gradient(135deg, #fff1f4, #fff9ec); border: 2px dashed #f0b3c0; }
.dp-circle img { width: 100%; height: 100%; object-fit: cover; }
.dp-empty { font-size: 44px; }
.dp-cam { position: absolute; top: 80px; right: 4px; width: 32px; height: 32px; border-radius: 50%; background: var(--brand, #C9405B); color: #fff; display: grid; place-items: center; font-size: 15px; box-shadow: 0 2px 6px rgba(0,0,0,.15); }
.dp-txt { font-size: 13px; font-weight: 700; color: var(--brand, #C9405B); }
.dp-pick:focus-within .dp-circle { outline: 3px solid rgba(201,64,91,.35); outline-offset: 2px; }
.dog-age-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; align-items: end; }
.age-out { margin: 0 0 14px; padding: 10px 12px; border-radius: 12px; background: #fff5f7; color: #6b3a45; font-size: 14px; }
.age-out b { color: var(--brand, #C9405B); font-size: 16px; }
[data-breed-custom][hidden], [data-age-estimate][hidden] { display: none; }
@media (max-width: 560px) {
  .dog-top { grid-template-columns: 1fr; }
  .dog-age-row { grid-template-columns: 1fr; gap: 0; }
  .age-out { margin-top: 0; }
}

/* 외부(네이버) 장소사진 갤러리: 자체 사진과 다르게 출처 띠를 항상 붙인다 */
.ext-gal { display: flex; gap: 8px; overflow-x: auto; scroll-snap-type: x mandatory; scrollbar-width: none; margin: 0 calc(var(--gutter, 16px) * -1); padding: 0 var(--gutter, 16px); }
.ext-gal::-webkit-scrollbar { display: none; }
.ext-gal li { flex: 0 0 82%; scroll-snap-align: center; }
.ext-gal li:only-child { flex-basis: 100%; }
.ext-gal figure { position: relative; margin: 0; aspect-ratio: 4 / 3; border-radius: var(--r-photo, 14px); overflow: hidden; background: #f3f4f6; }
.ext-gal img { width: 100%; height: 100%; object-fit: cover; display: block; }
.ext-cap { position: absolute; left: 8px; bottom: 8px; display: inline-flex; align-items: center; gap: 5px; max-width: calc(100% - 16px); padding: 4px 9px; border-radius: 999px; background: rgba(0,0,0,.62); color: #fff; font-size: 11.5px; line-height: 1.3; }
.ext-cap a { color: #fff; text-decoration: underline; }
.ext-n { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 3px; background: #03c75a; color: #fff; font-size: 10px; font-weight: 900; }
@media (min-width: 768px) { .ext-gal li { flex-basis: 46%; } }
.ext-menus img { width: 64px; height: 64px; border-radius: 10px; object-fit: cover; }

/* 지도: 고른 장소 이름표·내 위치 점·카드의 '지도에서 보기' */
.map-focus { position: relative; display: inline-flex; align-items: center; gap: 4px; padding: 7px 12px 7px 9px; border-radius: 999px; background: var(--primary, #C9405B); color: #fff; font-weight: 800; font-size: 13.5px; box-shadow: 0 6px 16px rgba(201,64,91,.35); white-space: nowrap; animation: mf-pop .32s cubic-bezier(.2,1.4,.4,1); }
.map-focus::after { content: ""; position: absolute; left: 50%; bottom: -6px; margin-left: -6px; border: 6px solid transparent; border-bottom: 0; border-top-color: var(--primary, #C9405B); }
.map-focus .mf-name { color: #fff; text-decoration: none; max-width: 52vw; overflow: hidden; text-overflow: ellipsis; }
@keyframes mf-pop { from { transform: translateY(8px) scale(.7); opacity: 0; } to { transform: none; opacity: 1; } }
.map-me { position: relative; width: 22px; height: 22px; }
.map-me .mm-dot { position: absolute; inset: 2px; border-radius: 50%; background: #2f80ed; border: 3px solid #fff; animation: mm-pulse 1.8s infinite; }
.map-me .mm-label { position: absolute; top: 24px; left: 50%; transform: translateX(-50%); white-space: nowrap; font-size: 11px; font-weight: 800; color: #1d5fc2; background: #fff; padding: 1px 6px; border-radius: 6px; box-shadow: 0 1px 4px rgba(0,0,0,.15); }
@keyframes mm-pulse { 0% { box-shadow: 0 0 0 0 rgba(47,128,237,.5); } 70% { box-shadow: 0 0 0 14px rgba(47,128,237,0); } 100% { box-shadow: 0 0 0 0 rgba(47,128,237,0); } }
.map-card-spot { margin-top: 4px; vertical-align: middle; display: inline-flex; align-items: center; gap: 4px; min-height: 34px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--select-line, #f0b3c0); background: var(--select-bg, #fff1f4); color: var(--select-fg, #C9405B); font-size: 13px; font-weight: 700; cursor: pointer; }
.map-card-spot::before { content: "📍"; }
@media (prefers-reduced-motion: reduce) { .map-focus, .map-me .mm-dot { animation: none; } }

/* 카드의 네이버 평점(함께할개 인증 평점 ★과 다른 모양) */
.n-rate { display: inline-flex; align-items: center; gap: 4px; font-weight: 700; color: #0a7d3b; }
.n-rate .ns-src { display: inline-grid; place-items: center; width: 15px; height: 15px; border-radius: 3px; background: #03c75a; color: #fff; font-size: 10px; font-weight: 900; }
.pm-body .n-rate { font-size: 12px; margin-top: 1px; }

/* 홈 추천 카드: 별점·리뷰 수(외부 자료, 간단히) */
.pm-rate { display: block; font-size: 12px; font-weight: 700; color: var(--text, #222); margin-top: 1px; }
.pm-star { color: #f5a623; margin-right: 2px; }
.ext-rate { display: inline-flex; align-items: center; gap: 2px; font-weight: 700; color: var(--text, #222); }
/* 화면 낭독용 숨김 글자(position:absolute)가 가로 스크롤 카드 밖에서 페이지 폭을 늘리지 않게(2026-10-06 하단바 깨짐) */
.place-mini, .pm-rate, .ext-rate, .n-rate { position: relative; }
.card-verified .reported, .reported { color: #8a5a00; font-weight: 700; display: inline-flex; align-items: center; gap: 3px; }

/* 애드핏: 광고가 들어오기 전에는 빈 자리·'광고' 글자를 보이지 않는다 */
.ad.ad-wait { margin: 0; min-height: 0; }
.ad.ad-wait .ad-label { display: none; }
.ad[data-adfit] ins { margin: 0 auto; }

/* 프로필 꾸미기: 미리보기에서 바로 사진 바꾸기 */
.cz-cover { touch-action: none; }
.cz-cover.has-photo { cursor: grab; }
.cz-cover.is-dragging { cursor: grabbing; }
.cz-pill { position: absolute; right: 10px; top: 10px; z-index: 2; padding: 6px 12px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 13px; font-weight: 700; cursor: pointer; }
.cz-drag { position: absolute; right: 10px; bottom: 10px; z-index: 2; padding: 3px 9px; border-radius: 999px; background: rgba(255,255,255,.88); color: #333; font-size: 11.5px; font-weight: 700; pointer-events: none; }
.cz-avatar { position: relative; cursor: pointer; overflow: visible; }
.cz-avatar img { border-radius: 50%; }
.cz-cam { position: absolute; right: -2px; bottom: -2px; width: 28px; height: 28px; border-radius: 50%; background: var(--primary, #C9405B); color: #fff; display: grid; place-items: center; font-size: 13px; border: 2px solid #fff; }
.cz-photo-row { display: flex; flex-wrap: wrap; gap: 8px 14px; align-items: center; }
.cz-photo-box .btn { min-height: 40px; }

/* 사진 넘겨보기 버튼·크게 보기 */
.gal-wrap { position: relative; }
.gal-btn { position: absolute; top: 50%; transform: translateY(-50%); z-index: 3; width: 40px; height: 40px; border-radius: 50%; border: 0; background: rgba(255,255,255,.92); color: #222; font-size: 26px; line-height: 1; box-shadow: 0 2px 8px rgba(0,0,0,.18); cursor: pointer; display: none; }
.gal-prev { left: 8px; } .gal-next { right: 8px; }
.gal-btn:disabled { opacity: .35; cursor: default; }
.gal-count { position: absolute; right: 12px; top: 10px; z-index: 3; padding: 2px 9px; border-radius: 999px; background: rgba(0,0,0,.55); color: #fff; font-size: 12px; font-weight: 700; }
@media (hover: hover) and (pointer: fine) { .gal-btn { display: grid; place-items: center; } .gallery img, .ext-gal img { cursor: zoom-in; } }
.lightbox { width: 100vw; height: 100vh; max-width: none; max-height: none; margin: 0; padding: 0; border: 0; background: rgba(0,0,0,.92); }
.lightbox[open] { display: grid; place-items: center; }
.lightbox img { max-width: 92vw; max-height: 86vh; object-fit: contain; }
.lightbox button { position: fixed; border: 0; background: rgba(255,255,255,.15); color: #fff; cursor: pointer; border-radius: 50%; width: 48px; height: 48px; font-size: 30px; line-height: 1; }
.lb-close { top: 14px; right: 14px; } .lb-prev { left: 14px; top: 50%; } .lb-next { right: 14px; top: 50%; }
.lb-count { position: fixed; bottom: 18px; left: 50%; transform: translateX(-50%); color: #fff; font-size: 14px; }

/* 애드핏이 채워진 뒤: 위아래 여백을 줄이고 가운데 정렬, 목록 사이에서 덜 튀게 */
.ad[data-adfit]:not(.ad-wait) { margin: 14px auto; padding: 6px 0 2px; border-top: 1px solid var(--line, #eee); border-bottom: 1px solid var(--line, #eee); }
.ad[data-adfit] .ad-label { display: block; font-size: 11px; margin-bottom: 2px; }

.shop-rules { margin: 10px 0 14px; padding: 12px 14px; border-radius: 14px; background: #fff7f9; border: 1px solid #f3c4cd; }
.shop-rules li { font-size: 14px; padding: 2px 0; }
.shop-rules li.no { color: #555; }

/* 글 아래: 이전·다음 글, 게시판 목록, 인기글(카페 게시판처럼) */
.post-nav2 { margin-top: 18px; border-top: 1px solid var(--line); }
.post-nav2 > a { display: flex; gap: 12px; align-items: center; padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.post-nav2 .pn-k { flex: none; width: 64px; font-size: 13px; color: var(--muted); font-weight: 700; }
.post-nav2 .pn-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-weight: 600; }
.board-mini ul, .board-mini ol { border-top: 2px solid var(--text, #222); }
.board-mini li a { display: flex; gap: 10px; align-items: center; justify-content: space-between; padding: 10px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: var(--text); }
.board-mini .bm-t { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14.5px; }
.board-mini .bm-m { flex: none; font-size: 12px; color: var(--muted); }
.board-mini .bm-c { color: var(--primary, #C9405B); font-weight: 700; font-size: 13px; }
.board-mini li.is-current a { background: var(--select-bg, #fff1f4); font-weight: 700; }
.board-mini .bm-now { display: inline-block; padding: 1px 6px; border-radius: 6px; background: var(--primary, #C9405B); color: #fff; font-size: 11px; vertical-align: 1px; }
.board-mini .bm-rank { flex: none; width: 22px; text-align: center; font-weight: 800; color: var(--primary, #C9405B); }

/* 지도(모바일) 목록 카드: 한 화면에 3~4곳 보이게 낮게 */
@media (max-width: 959px) {
  .map-sheet .place-card.map-card { grid-template-columns: 76px minmax(0, 1fr); gap: 10px; padding: 10px 2px; align-items: center; }
  .map-sheet .map-card .photo { width: 76px; height: 76px; border-radius: 12px; }
  .map-sheet .map-card h3 { font-size: 15.5px; margin: 0 0 2px; padding-right: 76px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-sheet .map-card .meta { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
  .map-sheet .map-card .card-metrics { margin: 2px 0 0; font-size: 12.5px; gap: 8px; }
  .map-sheet .map-card .card-open { font-size: 12px; margin: 2px 0 0; }
  .map-sheet .map-card .card-verified { font-size: 12px; }
  .map-sheet .map-card .map-card-spot { position: absolute; right: 6px; top: 10px; margin: 0; min-height: 30px; padding: 0 10px; font-size: 12px; }
  .map-sheet .map-card .save-btn { top: auto; bottom: 8px; }
  .map-sheet .place-card.map-card { position: relative; }
  .map-top .chip, .map-top .toggle { min-height: 34px; font-size: 13.5px; padding: 0 12px; }
  .map-top .map-top-row + .map-top-row { margin-top: 6px; }
}

/* 꿀팁·레시피: 글쓰기 칸 */
.recipe-block .form-grid.three { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; }
@media (max-width: 480px) { .recipe-block .form-grid.three { grid-template-columns: 1fr 1fr; } .recipe-block .form-grid.three .field:last-child { grid-column: 1 / -1; } }
.r-rows .r-row { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr) 36px; gap: 6px; margin-bottom: 6px; }
.r-steps { padding-left: 22px; margin: 0 0 6px; }
.r-steps .r-row { display: grid; grid-template-columns: minmax(0, 1fr) 36px; gap: 6px; margin-bottom: 8px; }
.r-steps li::marker { font-weight: 800; color: var(--primary, #C9405B); }
.r-danger { margin: 6px 0 0; padding: 8px 10px; border-radius: 10px; background: #fff4e5; color: #8a4b00; font-size: 13px; font-weight: 700; }

/* 꿀팁·레시피: 글 보기(블로그형) */
.recipe-view { margin: 14px 0; display: grid; gap: 14px; }
.recipe-summary { font-size: 16px; color: var(--text); margin: 0; }
.recipe-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.recipe-chips span { padding: 5px 11px; border-radius: 999px; background: var(--bg-soft, #f6f6f6); font-size: 13px; font-weight: 700; }
.recipe-danger { padding: 12px 14px; border-radius: 14px; background: #fff4e5; border: 1px solid #f5c98b; color: #6b3a00; }
.recipe-danger strong { display: block; margin-bottom: 4px; }
.recipe-danger ul { margin: 0; padding-left: 18px; font-size: 14px; }
.recipe-box { padding: 14px 16px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.recipe-box h2 { font-size: 16px; margin: 0 0 8px; }
.recipe-ings li { display: flex; justify-content: space-between; gap: 10px; padding: 7px 0; border-bottom: 1px dashed var(--line); font-size: 14.5px; }
.recipe-ings li:last-child { border-bottom: 0; }
.recipe-ings label { display: flex; gap: 8px; align-items: center; cursor: pointer; }
.recipe-ings .amt { color: var(--muted); flex: none; }
.recipe-steps { list-style: none; margin: 0; padding: 0; counter-reset: rs; display: grid; gap: 14px; }
.recipe-steps li { counter-increment: rs; display: grid; gap: 8px; }
.recipe-steps .rs-text::before { content: counter(rs); display: inline-grid; place-items: center; width: 26px; height: 26px; margin-right: 8px; border-radius: 50%; background: var(--primary, #C9405B); color: #fff; font-weight: 800; font-size: 13px; vertical-align: 1px; }
.recipe-steps .rs-text { font-size: 15px; line-height: 1.6; margin: 0; }
.recipe-steps .rs-photo img { width: 100%; max-height: 420px; object-fit: cover; border-radius: 12px; }
.recipe-tips { background: #f3fbf5; border-color: #cfe9d6; }
.home-recipes .rc-card { display: grid; gap: 4px; text-decoration: none; color: inherit; }
.home-recipes .rc-photo { position: relative; aspect-ratio: 4 / 3; border-radius: 14px; overflow: hidden; background: var(--photo-bg, #f3f3f3); }
.home-recipes .rc-photo img { width: 100%; height: 100%; object-fit: cover; }
.home-recipes .rc-best { position: absolute; left: 8px; top: 8px; padding: 2px 8px; border-radius: 999px; background: var(--primary, #C9405B); color: #fff; font-size: 11px; font-weight: 800; }
.home-recipes .rc-title { font-weight: 800; font-size: 14.5px; line-height: 1.35; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.home-recipes .rc-meta { font-size: 12px; color: var(--muted); }

/* 쇼츠(영상 모아보기): 화면 가득 세로로 한 개씩 */
body.shorts-page { background: #000; }
body.shorts-page .header, body.shorts-page .footer, body.shorts-page .env-note { display: none; }
body.shorts-page main.page { max-width: none; padding: 0; }
.shorts-top { position: fixed; z-index: 20; top: 0; left: 0; right: 0; display: flex; align-items: center; gap: 10px; padding: calc(10px + env(safe-area-inset-top, 0px)) 12px 10px; background: linear-gradient(rgba(0,0,0,.55), rgba(0,0,0,0)); color: #fff; }
.shorts-top a, .shorts-top button { color: #fff; }
.sh-back { display: grid; place-items: center; width: 40px; height: 40px; }
.sh-tabs { display: flex; gap: 14px; margin: 0 auto; font-weight: 800; }
.sh-tabs a { text-decoration: none; opacity: .65; padding: 4px 2px; }
.sh-tabs a[aria-current] { opacity: 1; border-bottom: 2px solid #fff; }
.sh-sound { border: 0; background: rgba(255,255,255,.18); border-radius: 999px; padding: 6px 12px; font-weight: 700; font-size: 13px; cursor: pointer; }
.shorts { height: calc(100dvh - var(--nav-h, 64px) - var(--safe-b, 0px)); overflow-y: auto; scroll-snap-type: y mandatory; scrollbar-width: none; }
.shorts::-webkit-scrollbar { display: none; }
.short { position: relative; height: 100%; scroll-snap-align: start; scroll-snap-stop: always; display: grid; place-items: center; background: #000; }
.short video { width: 100%; height: 100%; object-fit: contain; background: #000; }
.sh-info { position: absolute; left: 14px; right: 80px; bottom: 18px; color: #fff; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sh-board { margin: 0 0 4px; font-size: 12px; opacity: .85; }
.sh-title { display: block; color: #fff; font-weight: 800; font-size: 16px; text-decoration: none; line-height: 1.35; }
.sh-who { margin: 4px 0 0; font-size: 12.5px; opacity: .85; }
.sh-side { position: absolute; right: 10px; bottom: 24px; display: grid; gap: 16px; }
.sh-side a { display: grid; justify-items: center; color: #fff; text-decoration: none; font-size: 24px; text-shadow: 0 1px 4px rgba(0,0,0,.6); }
.sh-side span { font-size: 12px; font-weight: 700; }
.short-end { color: #fff; text-align: center; }
.shorts-empty { padding: 120px 16px; background: #fff; min-height: 100vh; }
@media (min-width: 960px) { .shorts { height: 100vh; } .short video { max-width: 540px; } }

/* 마이페이지: 추천 코드 바로 보기 */
.me-ref { display: grid; gap: 10px; margin-top: 14px; padding: 14px 16px; border-radius: 16px; background: linear-gradient(135deg, #fff1f4, #fff9ec); border: 1px solid #f3c4cd; }
.me-ref .mr-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.me-ref .mr-l { font-size: 13.5px; font-weight: 800; color: #7a3b48; }
.me-ref .mr-btns { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.me-ref .mr-btns .btn { min-height: 40px; justify-content: center; }
.me-ref .mr-more { color: #8a5560; text-decoration: none; }
.me-ref .mr-code { font-size: 20px; letter-spacing: 3px; font-family: ui-monospace, monospace; color: var(--primary, #C9405B); }

.gift-box { width: 100%; margin-top: 6px; padding: 8px 10px; border-radius: 10px; background: #fff7f9; }
.gift-box summary { cursor: pointer; font-weight: 700; font-size: 13.5px; }
.gift-code { margin: 6px 0; font-family: ui-monospace, monospace; font-size: 18px; letter-spacing: 1px; word-break: break-all; }
.post-nav2 .pn-none { display: flex; gap: 12px; align-items: center; padding: 12px 4px; margin: 0; border-bottom: 1px solid var(--line); }
.post-nav2 .pn-list { display: flex; justify-content: flex-end; gap: 6px; margin: 12px 0 0; }
.post-nav2 .pn-none .pn-t { font-weight: 500; font-size: 14px; }
@media (min-width: 960px) { .ad[data-adfit]:not(.ad-wait) { max-width: 728px; margin: 18px auto; border: 0; background: var(--bg-soft, #fafafa); border-radius: 14px; padding: 10px 0; } }

/* 이용가이드: 부드러운 카드형, 읽기 쉬운 글자 */
.sg { max-width: 760px; margin: 0 auto; }
.sg-hero { text-align: center; padding: 22px 0 8px; }
.sg-paw { font-size: 44px; margin: 0; }
.sg-hero h1 { margin: 6px 0; font-size: 26px; }
.sg-lead { color: var(--muted); font-size: 15px; line-height: 1.7; }
.sg-toc { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin: 14px 0 4px; }
.sg-toc a { padding: 7px 13px; border-radius: 999px; background: #fff1f4; color: #a3324a; font-weight: 700; font-size: 13.5px; text-decoration: none; }
.sg-sec { margin: 26px 0; scroll-margin-top: 80px; }
.sg-sec h2 { font-size: 19px; display: flex; align-items: center; gap: 8px; margin: 0 0 10px; }
.sg-sec h2 span { display: inline-grid; place-items: center; width: 34px; height: 34px; border-radius: 12px; background: #fff1f4; font-size: 18px; }
.sg-cards { list-style: none; margin: 0; padding: 0; display: grid; gap: 10px; }
@media (min-width: 720px) { .sg-cards { grid-template-columns: 1fr 1fr; } }
.sg-cards li { padding: 14px 16px; border-radius: 16px; background: #fff; border: 1px solid #f3dbe1; box-shadow: 0 2px 10px rgba(201,64,91,.05); }
.sg-cards strong { display: block; font-size: 15.5px; margin-bottom: 4px; }
.sg-cards p { margin: 0; color: #555; font-size: 14px; line-height: 1.65; }
.sg-go { display: inline-block; margin-top: 8px; color: var(--primary, #C9405B); font-weight: 800; font-size: 13.5px; text-decoration: none; }
.sg-end { text-align: center; color: var(--muted); margin: 30px 0 40px; }
.tour { border: 0; padding: 0; border-radius: 22px; width: min(92vw, 380px); box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.tour::backdrop { background: rgba(30,20,25,.45); }
.tour-in { position: relative; padding: 26px 22px 18px; text-align: center; }
.tour-x { position: absolute; right: 10px; top: 8px; border: 0; background: none; font-size: 26px; color: #999; cursor: pointer; }
.tour-emoji { font-size: 46px; margin: 4px 0 2px; }
.tour h2 { font-size: 19px; margin: 4px 0 8px; }
.tour-slides p { color: #555; font-size: 14.5px; line-height: 1.65; margin: 0; }
.tour-dots { display: flex; justify-content: center; gap: 6px; margin: 16px 0 14px; }
.tour-dots span { width: 7px; height: 7px; border-radius: 50%; background: #f0c9d2; }
.tour-dots span.on { width: 20px; border-radius: 4px; background: var(--primary, #C9405B); }
.tour-actions { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }

/* 검색창: 누를 곳이 분명하게 — 오른쪽에 '검색' 버튼(엔터도 그대로 동작). CSS만으로 바꿔 불러올 때 흔들리지 않게 */
.search:has(.search-submit) input { padding-left: 16px; padding-right: 96px; }
.search .search-submit { left: auto; right: 5px; width: auto; height: 40px; padding: 0 14px 0 11px; display: inline-flex; align-items: center; gap: 4px; background: var(--primary, #C9405B); color: #fff; font-weight: 800; font-size: 14px; border-radius: 11px; }
.search .search-submit::after { content: "검색"; }
.search .search-submit .icon { width: 16px; height: 16px; }
.search .search-submit:active { transform: translateY(-50%) scale(.96); }
.search.search-sm .search-submit { height: 34px; padding: 0 10px; font-size: 13px; }
.me-actions .btn-ghost { border: 1px solid var(--line); }
.cond-chips .cc-n { font-size: 11.5px; font-weight: 700; color: var(--muted); margin-left: 2px; }

/* ── 앱처럼 움직이기(2026-10-06) ───────────────────────────────── */
/* 페이지 이동: 같은 사이트 안에서는 부드럽게 바뀌고(지원 브라우저), 머리글·하단바는 그대로 */
@view-transition { navigation: auto; }
.header { view-transition-name: hk-header; }
.tabbar { view-transition-name: hk-tabbar; }
::view-transition-old(root) { animation: hk-out .16s ease-in both; }
::view-transition-new(root) { animation: hk-in .22s cubic-bezier(.2,.8,.2,1) both; }
@keyframes hk-out { to { opacity: 0; transform: translateY(-6px); } }
@keyframes hk-in { from { opacity: 0; transform: translateY(10px); } }
/* 누르는 느낌: 버튼·카드·하단바가 살짝 눌림(터치 회색 번쩍임 없애기) */
a, button, summary, label { -webkit-tap-highlight-color: transparent; }
.btn, .chip, .toggle, .choice-pill, .tabbar a, .quick-menu a, .cd-card, .place-mini, .rc-card, .map-card-spot, .sg-toc a { transition: transform .12s ease, background-color .15s ease, box-shadow .15s ease; }
.btn:active, .chip:active, .toggle:active, .choice-pill:active, .quick-menu a:active, .cd-card:active, .place-mini:active, .rc-card:active, .map-card-spot:active, .sg-toc a:active { transform: scale(.96); }
.tabbar a:active { transform: scale(.9); }
.place-card:active, .feed-item:active { background: var(--bg-soft, #f7f7f8); }
/* 다음 화면을 불러오는 동안 위쪽에 얇은 진행 막대 */
.hk-progress { position: fixed; z-index: 9999; top: 0; left: 0; height: 3px; width: 0; background: linear-gradient(90deg, var(--primary, #C9405B), #ff9fb3); box-shadow: 0 0 8px rgba(201,64,91,.5); transition: width .4s ease, opacity .3s ease; pointer-events: none; }
.hk-progress.run { width: 72%; transition: width 6s cubic-bezier(.1,.7,.2,1); }
.hk-progress.done { width: 100%; opacity: 0; transition: width .2s ease, opacity .3s ease .15s; }
/* 처음 온 비회원 안내: 위에서 내용을 밀어내지 않고 아래에 떠 있는 카드로(불러올 때 화면이 덜컹이지 않게) */
.welcome-strip { position: fixed; z-index: 60; left: 12px; right: 12px; bottom: calc(var(--nav-h, 64px) + var(--safe-b, 0px) + 12px); border-radius: 18px; box-shadow: 0 12px 34px rgba(60,20,30,.22); border: 1px solid #f3c4cd; animation: ws-up .35s cubic-bezier(.2,.9,.3,1.1) both; }
.welcome-strip .ws-in { padding: 12px 14px; }
@media (min-width: 960px) { .welcome-strip { left: auto; right: 24px; bottom: 24px; max-width: 440px; } }
@keyframes ws-up { from { opacity: 0; transform: translateY(24px); } }
@media (prefers-reduced-motion: reduce) {
  ::view-transition-old(root), ::view-transition-new(root) { animation: none; }
  .welcome-strip { animation: none; }
  .btn:active, .chip:active, .tabbar a:active { transform: none; }
}
.seo-guide ol { padding-left: 20px; display: grid; gap: 6px; } .seo-guide { background: #fffdf7; border-color: #f2e2b8; }

/* 사진 없는 장소: 기본 강아지 그림을 작게(카드를 꽉 채우지 않게) */
.place-card .photo img.is-default, .thumb-img.is-default { object-fit: contain; padding: 14%; background: #fdf6f7; }
.place-list.wide .place-card .photo img.is-default { padding: 22%; }

/* ── 미니홈(싸이월드 느낌: 테두리 상자·TODAY/TOTAL·탭·방명록 스티커) ── */
.minihome { --mh-c: var(--accent, var(--primary, #C9405B)); padding-bottom: 24px; }
.minihome.skin-paws { background-image: radial-gradient(circle at 12px 12px, rgba(201,64,91,.07) 3px, transparent 4px), radial-gradient(circle at 22px 6px, rgba(201,64,91,.07) 2px, transparent 3px); background-size: 34px 34px; }
.minihome.skin-dots { background-image: radial-gradient(rgba(0,0,0,.06) 2px, transparent 2.5px); background-size: 18px 18px; }
.minihome.skin-hearts { background-image: radial-gradient(circle at 30% 40%, rgba(255,120,150,.12) 4px, transparent 5px); background-size: 28px 28px; }
.minihome.skin-stars { background-image: radial-gradient(rgba(255,196,0,.18) 1.6px, transparent 2px), radial-gradient(rgba(120,140,255,.12) 1.2px, transparent 1.6px); background-size: 26px 26px, 17px 17px; background-position: 0 0, 9px 11px; }
.minihome.skin-check { background-image: linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%), linear-gradient(45deg, rgba(0,0,0,.035) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.035) 75%); background-size: 22px 22px; background-position: 0 0, 11px 11px; }
.mh-frame { margin-top: 14px; border: 2px solid color-mix(in srgb, var(--mh-c) 35%, white); border-radius: 22px; background: rgba(255,255,255,.92); padding: 12px; box-shadow: 0 6px 24px rgba(0,0,0,.06); }
.mh-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; padding: 6px 6px 12px; border-bottom: 1px dashed color-mix(in srgb, var(--mh-c) 40%, white); margin-bottom: 12px; }
.mh-count { margin: 0; display: flex; gap: 10px; font-size: 11.5px; font-weight: 800; letter-spacing: .5px; color: #888; }
.mh-count b { color: var(--mh-c); }
.mh-title { flex: 1 1 auto; margin: 0; font-size: 18px; color: var(--mh-c); }
.mh-grid { display: grid; gap: 12px; }
@media (min-width: 860px) { .mh-grid { grid-template-columns: 260px minmax(0, 1fr); align-items: start; } .mh-side { position: sticky; top: 76px; } }
.mh-card { background: #fff; border: 1px solid #eee; border-radius: 16px; padding: 14px; margin-bottom: 12px; }
.mh-h { font-size: 14.5px; margin: 0 0 10px; }
.mh-me { text-align: center; padding-top: 0; overflow: hidden; }
.mh-cover { height: 84px; margin: 0 -14px; background: color-mix(in srgb, var(--mh-c) 18%, white); }
.mh-cover img { width: 100%; height: 100%; object-fit: cover; }
.mh-avatar { display: grid; place-items: center; width: 92px; height: 92px; margin: -46px auto 6px; border-radius: 50%; overflow: hidden; border: 4px solid #fff; background: #f3f3f5; color: #aaa; box-shadow: 0 4px 12px rgba(0,0,0,.08); }
.mh-avatar img { width: 100%; height: 100%; object-fit: cover; }
.mh-name { font-weight: 800; font-size: 16px; margin: 0; }
.mh-grade { display: inline-block; margin: 4px 0 0; padding: 2px 10px; border-radius: 999px; background: color-mix(in srgb, var(--mh-c) 12%, white); color: var(--mh-c); font-size: 12px; font-weight: 800; }
.mh-mood { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; background: #fffbe8; font-size: 13.5px; }
.mh-mood span { display: block; font-size: 11px; color: #a08a3a; font-weight: 700; }
.mh-bio { margin: 8px 0 0; font-size: 13.5px; color: #555; }
.mh-actions { display: flex; justify-content: center; gap: 6px; margin-top: 12px; }
.mh-more { position: relative; } .mh-more summary { list-style: none; } .mh-more summary::-webkit-details-marker { display: none; }
.mh-more-menu { position: absolute; right: 0; top: 40px; z-index: 5; display: grid; gap: 8px; padding: 10px 14px; border-radius: 12px; background: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.12); white-space: nowrap; }
.mh-tabs { display: flex; gap: 4px; padding: 4px; border-radius: 14px; background: color-mix(in srgb, var(--mh-c) 10%, white); margin-bottom: 12px; overflow-x: auto; scrollbar-width: none; }
.mh-tabs a { flex: 1 0 auto; text-align: center; padding: 9px 12px; border-radius: 11px; font-weight: 800; font-size: 14px; color: #666; text-decoration: none; }
.mh-tabs a small { font-size: 11px; color: var(--mh-c); }
.mh-tabs a[aria-current="true"] { background: #fff; color: var(--mh-c); box-shadow: 0 2px 6px rgba(0,0,0,.08); }
.mh-latest li a { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; gap: 8px; align-items: center; padding: 9px 2px; border-bottom: 1px dashed #eee; text-decoration: none; color: inherit; }
.mh-latest li:last-child a { border-bottom: 0; }
.ml-board { font-size: 11px; font-weight: 800; padding: 2px 7px; border-radius: 6px; background: color-mix(in srgb, var(--mh-c) 12%, white); color: var(--mh-c); }
.ml-title { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; }
.ml-date { font-size: 12px; color: #999; }
.mh-album { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 6px; }
.mh-album img { width: 100%; aspect-ratio: 1 / 1; object-fit: cover; border-radius: 10px; }
@media (min-width: 860px) { .mh-album.big { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.gb-mini li { display: flex; align-items: center; gap: 8px; padding: 6px 0; border-bottom: 1px dashed #f0f0f0; }
.gb-form { display: grid; gap: 8px; margin-bottom: 12px; padding: 12px; border-radius: 14px; background: #fff8fa; }
.gb-stickers { border: 0; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px; }
.gb-stickers legend { width: 100%; margin-bottom: 4px; }
.gb-st { position: relative; cursor: pointer; }
.gb-st input { position: absolute; opacity: 0; }
.gb-st img, .gb-none { display: grid; place-items: center; width: 48px; height: 48px; border-radius: 12px; border: 2px solid transparent; background: #fff; font-size: 11px; color: #888; }
.gb-st input:checked + img, .gb-st input:checked + .gb-none { border-color: var(--mh-c); box-shadow: 0 0 0 3px color-mix(in srgb, var(--mh-c) 20%, white); }
.gb-st input:focus-visible + img { outline: 2px solid var(--mh-c); }
.gb-list .gb-item { padding: 12px; border-radius: 14px; border: 1px solid #f1e3e7; margin-bottom: 8px; background: #fff; }
.gb-item.secret { background: #fafafa; }
.gb-head { display: flex; justify-content: space-between; gap: 8px; margin-bottom: 6px; }
.gb-body { display: flex; gap: 10px; align-items: flex-start; }
.gb-sticker { flex: none; border-radius: 12px; }
.theme-swatches.skins label { min-width: 0; }
.skin-pick .sw { background-color: #fff !important; border: 1px solid #e5d0d6; }
.skin-pick.skin-paws .sw, .skin-pick.skin-hearts .sw { background-image: radial-gradient(rgba(201,64,91,.35) 2px, transparent 2.5px); background-size: 7px 7px; }
.skin-pick.skin-dots .sw { background-image: radial-gradient(rgba(0,0,0,.25) 1.5px, transparent 2px); background-size: 6px 6px; }
.skin-pick.skin-stars .sw { background-image: radial-gradient(rgba(255,180,0,.6) 1.5px, transparent 2px); background-size: 7px 7px; }
.skin-pick.skin-check .sw { background-image: linear-gradient(45deg, rgba(0,0,0,.15) 25%, transparent 25%, transparent 75%, rgba(0,0,0,.15) 75%); background-size: 8px 8px; }

/* 저장(하트): 저장됨은 진한 분홍 원 + 흰 꽉 찬 하트, 안 됨은 흰 원 + 빈 하트 — 한눈에 구분(2026-10-06) */
.save-btn .icon { fill: none; transition: transform .2s ease; }
.save-btn[aria-pressed="true"] { background: var(--primary, #C9405B); color: #fff; border-color: var(--primary, #C9405B); }
.save-btn[aria-pressed="true"] .icon { fill: #fff; stroke: #fff; }
.save-btn[aria-pressed="true"] .icon { animation: heart-pop .35s cubic-bezier(.2,1.6,.4,1); }
[data-toggle-form] .btn[aria-pressed="true"] { background: var(--primary, #C9405B); border-color: var(--primary, #C9405B); color: #fff; }
[data-toggle-form] .btn[aria-pressed="true"] .icon { fill: #fff; stroke: #fff; }
.map-sheet .save-btn[aria-pressed="true"] { color: #fff; }
@keyframes heart-pop { 0% { transform: scale(.6); } 60% { transform: scale(1.25); } 100% { transform: scale(1); } }
@media (prefers-reduced-motion: reduce) { .save-btn[aria-pressed="true"] .icon { animation: none; } }

/* 장소 목록 첫 방문 안내 카드(아래에 떠 있음, 내용을 밀어내지 않음) */
.place-tour { position: fixed; z-index: 61; left: 12px; right: 12px; bottom: calc(var(--nav-h, 64px) + var(--safe-b, 0px) + 12px); display: flex; align-items: center; gap: 12px; padding: 12px 12px 12px 16px; border-radius: 14px; background: #2b2b2e; color: #fff; box-shadow: 0 8px 24px rgba(0,0,0,.18); animation: ws-up .25s ease-out both; }
.place-tour ol { flex: 1; margin: 0; }
.place-tour p { margin: 0; font-size: 13.5px; line-height: 1.5; color: #f1f1f1; }
.place-tour b { color: #fff; }
.place-tour .pt-close { flex: none; border: 0; background: transparent; color: #ffb3c1; font-weight: 800; font-size: 14px; padding: 6px 4px; cursor: pointer; }
@media (min-width: 960px) { .place-tour { left: auto; right: 24px; bottom: 24px; max-width: 420px; } }
/* 구조해주개 지역: 한 줄 가로 스크롤 대신 여러 줄로 모두 보이게(PC에서도 넘길 필요 없음) */
.cat-row.region-wrap ul { display: flex; flex-wrap: wrap; gap: 6px; overflow: visible; }
.cat-row.region-wrap li { flex: none; }
/* PC(마우스): 가로로 넘기는 줄에 얇은 스크롤 막대를 보여 '더 있다'는 걸 알게 */
@media (hover: hover) and (pointer: fine) {
  .scroll-x { scrollbar-width: thin; scrollbar-color: #e7c3cb transparent; padding-bottom: 4px; }
  .scroll-x::-webkit-scrollbar { display: block; height: 6px; }
  .scroll-x::-webkit-scrollbar-thumb { background: #e7c3cb; border-radius: 3px; }
}
.map-tool.map-reset { width: auto; min-width: 44px; padding: 0 10px; gap: 3px; display: inline-flex; align-items: center; font-size: 17px; font-weight: 800; }
.map-tool.map-reset span { font-size: 12px; }
.section-head { align-items: baseline; } .section-head .more { min-height: 0; padding: 10px 0; } /* 제목과 전체 보기 글자 기준선을 맞춤 */

/* 장소 목록: 자동 불러오기 스위치·불러오는 중·맨 위로 */
.more-wrap { display: grid; gap: 8px; justify-items: center; }
.more-wrap > p { width: 100%; }
.auto-more-switch { display: inline-flex; align-items: center; gap: 8px; font-size: 13.5px; font-weight: 700; color: #555; cursor: pointer; }
.auto-more-switch input { position: absolute; opacity: 0; }
.ams-track { position: relative; width: 40px; height: 24px; border-radius: 999px; background: #ddd; transition: background .2s; }
.ams-track::after { content: ""; position: absolute; top: 3px; left: 3px; width: 18px; height: 18px; border-radius: 50%; background: #fff; box-shadow: 0 1px 3px rgba(0,0,0,.2); transition: transform .2s; }
.auto-more-switch input:checked + .ams-track { background: var(--primary, #C9405B); }
.auto-more-switch input:checked + .ams-track::after { transform: translateX(16px); }
.auto-more-switch input:focus-visible + .ams-track { outline: 2px solid var(--primary, #C9405B); outline-offset: 2px; }
.more-wrap.is-auto [data-load-more] { opacity: .0; height: 1px; min-height: 0; padding: 0; overflow: hidden; border: 0; }
.auto-loading { display: flex; align-items: center; gap: 8px; margin: 0; font-size: 13.5px; color: var(--muted); }
.spin { width: 16px; height: 16px; border-radius: 50%; border: 2px solid #f0c9d2; border-top-color: var(--primary, #C9405B); animation: spin .8s linear infinite; }
@keyframes spin { to { transform: rotate(360deg); } }
.to-top { position: fixed; z-index: 55; right: 14px; bottom: calc(var(--nav-h, 64px) + var(--safe-b, 0px) + 14px); width: 44px; height: 44px; border-radius: 50%; border: 1px solid var(--line); background: #fff; box-shadow: 0 4px 14px rgba(0,0,0,.15); font-size: 18px; font-weight: 800; color: var(--primary, #C9405B); cursor: pointer; }
@media (min-width: 960px) { .to-top { bottom: 24px; right: 24px; } }

/* 산책 기록 */
.walk-stats { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 6px 0 10px; }
.walk-stats div { padding: 12px 10px; border-radius: 16px; background: #fff7f9; border: 1px solid #f3dbe1; text-align: center; }
.walk-stats span { display: block; font-size: 12px; color: #8a5560; font-weight: 700; }
.walk-stats b { display: block; font-size: 24px; color: var(--primary, #C9405B); }
.walk-stats b small { font-size: 13px; margin-left: 1px; }
.walk-stats em { font-style: normal; font-size: 11.5px; color: #888; }
.walk-week { display: grid; grid-template-columns: repeat(7, 1fr); gap: 4px; margin-bottom: 12px; }
.walk-week li { text-align: center; padding: 6px 0; border-radius: 10px; background: #f6f6f7; font-size: 12px; color: #888; }
.walk-week li b { display: block; font-size: 16px; }
.walk-week li.on { background: #fff1f4; color: var(--primary, #C9405B); }
.walk-week li.today { outline: 2px solid #f0b3c0; }
.walk-timer { text-align: center; padding: 18px 14px; border-radius: 20px; background: linear-gradient(135deg, #fff1f4, #fff9ec); border: 1px solid #f3c4cd; margin-bottom: 14px; }
.walk-timer .wt-time { font-size: 44px; font-weight: 800; letter-spacing: 2px; margin: 0; font-variant-numeric: tabular-nums; }
.walk-timer.on .wt-time { color: var(--primary, #C9405B); }
.walk-timer .wt-dist { margin: 4px 0 12px; font-size: 13px; color: #6b4b52; }
.walk-timer .wt-btns { display: flex; justify-content: center; gap: 8px; }
.walk-form .choice-row { gap: 6px; }
.choice-pill-r { position: relative; }
.choice-pill-r input { position: absolute; opacity: 0; }
.choice-pill-r span { display: inline-flex; min-height: 38px; align-items: center; padding: 0 12px; border-radius: 999px; border: 1px solid var(--line); font-size: 13.5px; cursor: pointer; }
.choice-pill-r input:checked + span { background: var(--select-bg); border-color: var(--select-line); color: var(--select-fg); font-weight: 700; }
.choice-pill-r input:focus-visible + span { outline: 2px solid var(--primary, #C9405B); }
.walk-list li { display: flex; justify-content: space-between; gap: 10px; padding: 10px 2px; border-bottom: 1px solid var(--line); font-size: 14px; }
.area-grid { display: flex; flex-wrap: wrap; gap: 8px; }
.area-grid .chip { cursor: pointer; }
.pick-for { margin: -4px 0 10px; color: #6b4b52; }

.walk-share { display: grid; gap: 8px; text-align: center; padding: 18px 16px; margin-bottom: 14px; border-radius: 20px; background: linear-gradient(135deg, #fff1f4, #fff9ec); border: 1px solid #f3c4cd; animation: ws-up .35s cubic-bezier(.2,.9,.3,1.1) both; }
.walk-share .ws-emoji { font-size: 40px; margin: 0; }
.walk-share p { margin: 0; }
.walk-share .ws-btns { display: flex; justify-content: center; gap: 8px; flex-wrap: wrap; }
.owner-gate { padding: 10px 12px; border-radius: 12px; background: #fff8ec; border: 1px solid #f2deb3; display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.owner-more { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 14px 0; padding: 12px 14px; border-radius: 14px; background: #fff8ec; border: 1px solid #f2deb3; }
.owner-more span { flex: 1 1 auto; font-size: 14px; }

/* 홈 BEST 후보·AD 딱지, 로그인 안내 */
.pm-badge.cand { background: #fff3c4; color: #7a5600; border: 1px solid #f1d27a; }
.pm-badge.ad { background: #eef1f6; color: #4a5568; border: 1px solid #d5dbe5; }
.cand-badge { display: inline-block; padding: 2px 9px; border-radius: 999px; background: #fff3c4; color: #7a5600; font-size: 12px; font-weight: 800; vertical-align: 3px; border: 1px solid #f1d27a; }
.pick-login { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin: -2px 0 10px; padding: 10px 12px; border-radius: 14px; background: #fff7f9; border: 1px solid #f3dbe1; font-size: 13.5px; }

/* 쪽지·마이메뉴 */
.account-panel.notif-only .ap-tabs { display: none; }
.ap-mymenu { margin: 10px 0; padding: 10px; border-radius: 14px; background: #fff7f9; }
.ap-mymenu ul { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin-top: 6px; }
.ap-mymenu a { display: grid; justify-items: center; gap: 4px; padding: 8px 2px; border-radius: 10px; text-decoration: none; color: var(--text); font-size: 11.5px; font-weight: 700; text-align: center; background: #fff; }
.me-mymenu { margin: 14px 0; padding: 12px 14px; border-radius: 16px; border: 1px solid var(--line); background: #fff; }
.me-mymenu ul { display: grid; grid-template-columns: repeat(auto-fill, minmax(72px, 1fr)); gap: 8px; margin-top: 10px; }
.me-mymenu a { display: grid; justify-items: center; gap: 6px; text-decoration: none; color: var(--text); font-size: 12px; font-weight: 700; text-align: center; }
.mm-ico { display: grid; place-items: center; width: 44px; height: 44px; border-radius: 14px; background: #fff1f4; color: var(--primary, #C9405B); }
.my-menu-pick li label { display: flex; align-items: center; gap: 10px; padding: 10px 4px; border-bottom: 1px solid var(--line); cursor: pointer; }
.my-menu-pick small { display: block; color: var(--muted); font-size: 12px; }
.dm-list a { display: flex; align-items: center; gap: 10px; padding: 12px 4px; border-bottom: 1px solid var(--line); text-decoration: none; color: inherit; }
.dm-av { flex: none; width: 44px; height: 44px; border-radius: 50%; overflow: hidden; display: grid; place-items: center; background: #f3f3f5; color: #aaa; }
.dm-av img { width: 100%; height: 100%; object-fit: cover; }
.dm-main { flex: 1; min-width: 0; display: grid; }
.dm-last { font-size: 13px; color: #666; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.dm-side { display: grid; justify-items: end; gap: 4px; }
.dm-new { display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 6px; border-radius: 999px; background: var(--primary, #C9405B); color: #fff; font-size: 11px; font-weight: 800; }
.dm-thread { display: grid; gap: 10px; margin-bottom: 14px; }
.dm-thread li { display: grid; max-width: 80%; }
.dm-thread li.me { justify-self: end; justify-items: end; }
.dm-bubble { margin: 0 0 2px; padding: 10px 13px; border-radius: 16px; background: #f3f3f5; font-size: 14.5px; line-height: 1.55; }
.dm-thread li.me .dm-bubble { background: var(--primary, #C9405B); color: #fff; border-bottom-right-radius: 4px; }
.dm-thread li.them .dm-bubble { border-bottom-left-radius: 4px; }
.dm-form { display: grid; grid-template-columns: 1fr auto; gap: 8px; align-items: end; position: sticky; bottom: calc(var(--nav-h, 64px) + 8px); background: #fff; padding: 8px 0; }

/* 게시판별 모양: 추억=블로그, 나좀보개=갤러리, 방문후기=후기 블로그, 점주소식=업장 모음 */
.blog-list { display: grid; gap: 16px; }
@media (min-width: 860px) { .blog-list { grid-template-columns: 1fr 1fr; } }
.blog-card { display: grid; text-decoration: none; color: inherit; border-radius: 18px; overflow: hidden; background: #fff; border: 1px solid #f0e4e7; box-shadow: 0 4px 16px rgba(0,0,0,.04); }
.bc-photo img { width: 100%; aspect-ratio: 16 / 10; object-fit: cover; display: block; }
.bc-body { padding: 14px 16px 16px; }
.bc-date { margin: 0 0 4px; font-size: 12px; color: #a0717b; font-weight: 700; }
.bc-title { margin: 0 0 6px; font-size: 18px; line-height: 1.35; }
.bc-excerpt { margin: 0 0 8px; color: #555; font-size: 14px; line-height: 1.7; display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden; }
.bc-meta { margin: 0; font-size: 12px; color: #999; }
.gal-board { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 3px; }
@media (min-width: 720px) { .gal-board { grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; } }
@media (min-width: 1100px) { .gal-board { grid-template-columns: repeat(5, minmax(0, 1fr)); } }
.gal-board a { position: relative; display: block; aspect-ratio: 1 / 1; overflow: hidden; background: #f6f0f2; border-radius: 6px; }
.gal-board img { width: 100%; height: 100%; object-fit: cover; transition: transform .25s; }
.gal-board a:hover img { transform: scale(1.04); }
.gb-noimg { display: grid; place-items: center; height: 100%; padding: 8px; text-align: center; font-size: 12px; color: #888; }
.gb-heart { position: absolute; left: 6px; bottom: 6px; padding: 2px 7px; border-radius: 999px; background: rgba(0,0,0,.5); color: #fff; font-size: 11px; font-weight: 700; }
.gb-video { position: absolute; right: 6px; top: 6px; width: 22px; height: 22px; border-radius: 50%; background: rgba(0,0,0,.55); color: #fff; display: grid; place-items: center; font-size: 10px; }
.review-blog li { border-bottom: 1px solid var(--line); }
.rb-card { display: flex; gap: 14px; padding: 14px 2px; text-decoration: none; color: inherit; }
.rb-body { flex: 1; min-width: 0; }
.rb-place { margin: 0 0 4px; font-size: 12.5px; font-weight: 800; color: var(--primary, #C9405B); }
.rb-stars { color: #f5a623; letter-spacing: 1px; margin-left: 4px; }
.rb-title { margin: 0 0 4px; font-size: 16px; }
.rb-excerpt { margin: 0 0 6px; font-size: 13.5px; color: #555; line-height: 1.6; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden; }
.rb-meta { margin: 0; font-size: 12px; color: #999; }
.rb-rec { color: #2e8b57; }
.rb-photo img { width: 96px; height: 96px; object-fit: cover; border-radius: 12px; }
.shop-strip { margin: 10px 0 14px; }
.shop-chip { display: grid; justify-items: center; gap: 4px; width: 112px; padding: 10px 8px; border-radius: 16px; border: 1px solid #f2deb3; background: #fffaf0; text-decoration: none; color: inherit; text-align: center; }
.shop-chip img, .sc-ph { width: 64px; height: 64px; border-radius: 50%; object-fit: cover; display: grid; place-items: center; background: #fff; font-size: 26px; }
.shop-chip b { font-size: 13px; line-height: 1.3; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.shop-chip small { font-size: 11px; color: #9a8350; }
.owner-post { border-bottom: 1px solid var(--line); padding-top: 8px; }
.op-shop { display: inline-block; margin-bottom: 2px; padding: 2px 9px; border-radius: 999px; background: #fff3d6; color: #7a5600; font-size: 12px; font-weight: 800; text-decoration: none; }

.walk-proof { margin: 12px 0 0; padding: 10px 12px; border-radius: 12px; background: #eefaf2; border: 1px solid #cfe9d6; color: #1e6b3a; font-size: 14px; }
.walk-badge { display: inline-block; padding: 1px 7px; border-radius: 999px; background: #eefaf2; color: #1e6b3a; font-size: 11.5px; font-weight: 800; vertical-align: 1px; }

/* 점주 인증 신청 */
.claim-steps { list-style: none; display: flex; gap: 6px; padding: 0; margin: 0 0 12px; }
.claim-steps li { flex: 1; display: flex; align-items: center; gap: 6px; padding: 8px 10px; border-radius: 12px; background: #f6f2f3; color: #999; font-size: 13px; font-weight: 700; }
.claim-steps li b { display: grid; place-items: center; width: 20px; height: 20px; border-radius: 50%; background: #ddd; color: #fff; font-size: 11px; }
.claim-steps li.on { background: #fff1f4; color: var(--primary, #C9405B); }
.claim-steps li.on b, .claim-steps li.done b { background: var(--primary, #C9405B); }
.claim-steps li.done { color: #666; }
.claim-new { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; padding: 12px 14px; border-radius: 14px; background: #fff8ec; border: 1px solid #f2deb3; }
.claim-place { padding: 10px 12px; border-radius: 12px; background: #faf7f8; }
.bno-check { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 10px 12px; border-radius: 12px; border: 1px dashed #e7c9cf; }
.bno-check .ok { color: #1e6b3a; font-weight: 800; }
.bno-check .no { color: #b3261e; font-weight: 700; }

/* 정보 수정 제안: 종류 → 고칠 묶음 → 근거 */
.sg-step { margin: 18px 0; }
.sg-h { display: flex; align-items: center; gap: 8px; font-size: 16px; margin: 0 0 10px; }
.sg-h b { display: grid; place-items: center; width: 22px; height: 22px; border-radius: 50%; background: var(--primary, #C9405B); color: #fff; font-size: 12px; }
.sg-kinds { display: grid; gap: 8px; }
@media (min-width: 640px) { .sg-kinds { grid-template-columns: repeat(3, 1fr); } }
.sg-kind { display: flex; gap: 10px; align-items: flex-start; padding: 14px; border: 1.5px solid var(--line); border-radius: 14px; cursor: pointer; background: #fff; }
.sg-kind input { margin-top: 3px; accent-color: var(--primary, #C9405B); }
.sg-kind span { display: grid; gap: 2px; } .sg-kind small { color: #888; font-size: 12.5px; }
.sg-kind:has(input:checked) { border-color: var(--primary, #C9405B); background: #fff5f7; }
.sg-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.sg-chips .chip[aria-pressed="true"] { background: var(--primary, #C9405B); color: #fff; border-color: var(--primary, #C9405B); }
.sg-group { padding: 12px 14px; margin-top: 10px; border-radius: 14px; background: #faf8f9; border: 1px solid #f0e6e9; }
.sg-group h3 { font-size: 14px; margin: 0 0 6px; }
.sg-row + .sg-row { border-top: 1px dashed #eadde1; padding-top: 8px; }
.sg-now { margin: 6px 0 -2px; font-size: 12.5px; color: #8a6f76; }
.sg-now b { color: #333; }
.sg-more { margin-top: 8px; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.sg-more summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.js-sg [data-sg-closed], .js-sg [data-sg-for][data-sg-off] { display: none; }

/* 직접 다녀오셨나요?: 눌러서 답하는 카드·알약 */
.cr-q { border: 0; padding: 0; margin: 18px 0; }
.cr-q legend, .cr-date label { font-weight: 800; font-size: 16px; margin-bottom: 8px; padding: 0; display: block; }
.cr-cards { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 8px; }
@media (min-width: 640px) { .cr-cards { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
.cr-card, .cr-pill { position: relative; cursor: pointer; }
.cr-card input, .cr-pill input { position: absolute; opacity: 0; pointer-events: none; }
.cr-card { display: grid; justify-items: center; gap: 4px; padding: 14px 8px; border: 1.5px solid var(--line); border-radius: 16px; background: #fff; font-weight: 700; font-size: 14px; text-align: center; transition: border-color .15s, background .15s, transform .1s; }
.cr-card .cr-emo { font-size: 26px; }
.cr-card:active, .cr-pill:active { transform: scale(.97); }
.cr-card:has(input:checked) { border-color: var(--primary, #C9405B); background: #fff3f6; color: var(--primary, #C9405B); }
.cr-card:has(input:focus-visible), .cr-pill:has(input:focus-visible) { outline: 2px solid var(--primary, #C9405B); outline-offset: 2px; }
.cr-pills { display: flex; flex-wrap: wrap; gap: 6px; }
.cr-pill span { display: inline-flex; align-items: center; gap: 6px; min-height: 40px; padding: 0 14px; border: 1.5px solid var(--line); border-radius: 999px; background: #fff; font-size: 14px; font-weight: 600; }
.cr-pill:has(input:checked) span { border-color: var(--primary, #C9405B); background: var(--primary, #C9405B); color: #fff; }
.cr-dog img { width: 24px; height: 24px; border-radius: 50%; object-fit: cover; }
.cr-date input { max-width: 220px; }
.cr-more { margin: 14px 0; padding: 10px 12px; border-radius: 12px; border: 1px solid var(--line); }
.cr-more summary { cursor: pointer; font-weight: 700; font-size: 14px; }
.cr-foot { margin-top: 12px; }
.js-cr [data-cr-cond][data-off], .js-cr [data-cr-size][data-off] { display: none; }

/* 스티커 댓글: 누르면 크게 + 만드는 법 안내 */
.c-sticker-btn { display: inline-block; padding: 0; border: 0; background: none; cursor: zoom-in; border-radius: 12px; transition: transform .12s; }
.c-sticker-btn:hover { transform: scale(1.04); } .c-sticker-btn:active { transform: scale(.96); }
.sticker-view { width: min(340px, calc(100vw - 32px)); border: 0; border-radius: 22px; padding: 22px 18px 16px; text-align: center; box-shadow: 0 20px 60px rgba(0,0,0,.25); }
.sticker-view::backdrop { background: rgba(20,10,14,.45); }
.sticker-view[open] { animation: sv-pop .22s cubic-bezier(.2,.9,.3,1.2) both; }
@keyframes sv-pop { from { transform: scale(.85); opacity: 0; } to { transform: none; opacity: 1; } }
.sticker-view img { width: 220px; height: 220px; object-fit: contain; display: block; margin: 0 auto 6px; }
.sticker-view .sv-name { font-weight: 800; margin: 0 0 6px; }
@media (prefers-reduced-motion: reduce) { .sticker-view[open] { animation: none; } }

/* 홈 업종 묶음 바로가기 */
.home-groups { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 8px; margin: 14px 0 4px; }
.home-groups a { display: grid; gap: 2px; padding: 14px 10px 12px; border-radius: 16px; background: #fff; border: 1px solid #f1e3e6; text-decoration: none; color: inherit; box-shadow: 0 2px 10px rgba(201,64,91,.05); transition: transform .12s, box-shadow .12s; }
.home-groups a:hover { transform: translateY(-1px); box-shadow: 0 6px 18px rgba(201,64,91,.10); }
.home-groups .hg-emo { font-size: 24px; line-height: 1; margin-bottom: 4px; }
.home-groups strong { font-size: 15px; }
.home-groups small { font-size: 11.5px; color: #8b8b8b; line-height: 1.35; }
@media (max-width: 359px) { .home-groups small { display: none; } }
/* 우리 강아지 맞춤 추천 */
.match-sec { background: linear-gradient(180deg, #fff6f8, #fff 70%); border-radius: 20px; padding: 14px 12px 6px; }
.match-brief { display: flex; flex-wrap: wrap; align-items: center; gap: 5px; margin: 0 0 8px; }
.mb-chip { padding: 3px 9px; border-radius: 999px; background: #fff; border: 1px solid #f0cbd3; font-size: 12px; font-weight: 700; color: #a8344c; }
.mb-note { font-size: 11.5px; color: #999; margin-left: 2px; }
.match-ask { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 8px; padding: 10px 12px; border-radius: 14px; background: #fff; border: 1px dashed #efc0ca; font-size: 13.5px; margin: 0 0 10px; }
.pm-why { display: flex; flex-wrap: wrap; gap: 3px; margin: 4px 0 0; }
.pm-why span { font-size: 11px; padding: 1px 6px; border-radius: 6px; background: #fdecef; color: #a8344c; font-weight: 700; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 강아지 성격 태그: 알약 모양 */
#field-traits .choice-list { display: flex; flex-wrap: wrap; gap: 6px; list-style: none; padding: 0; }
#field-traits .choice-list label { display: inline-flex; align-items: center; gap: 6px; min-height: 38px; padding: 0 12px; border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer; font-size: 14px; }
#field-traits .choice-list label:has(input:checked) { border-color: var(--primary, #C9405B); background: #fff3f6; color: var(--primary, #C9405B); font-weight: 700; }
#field-traits .choice-list input { accent-color: var(--primary, #C9405B); }

/* 친구 초대: 지급 조건 진행 */
.ref-mine, .ref-friends { margin: 14px 0; padding: 12px 14px; border-radius: 14px; border: 1px solid #f1e3e6; background: #fffafb; }
.ref-steps li { padding: 4px 0; font-size: 14px; color: #777; }
.ref-steps li.ok { color: #1e6b3a; font-weight: 700; }

/* AI 맞춤 추천 표시 */
.ai-mark { display: inline-flex; align-items: center; padding: 2px 8px; border-radius: 999px; font-size: 12px; font-weight: 900; color: #fff; vertical-align: 3px;
  background: linear-gradient(135deg, #7b5cff, #c9405b); box-shadow: 0 2px 8px rgba(123,92,255,.25); }
.pm-badge.ai { background: linear-gradient(135deg, #7b5cff, #c9405b); color: #fff; }
.mb-note { font-size: 12px; color: #8f7f84; margin: -2px 0 10px; }
.ai-detail { margin: 10px 0 14px; padding: 12px 12px 4px; border-radius: 18px; background: linear-gradient(180deg, #f6f2ff, #fff 75%); border: 1px solid #e8e0ff; }
.ai-detail .section-head h2 { font-size: 15.5px; }
.ai-detail .ai-why { font-size: 12px; color: #6d5bb8; margin: -2px 0 8px; }
.ai-ask { margin: 10px 0; padding: 10px 12px; border-radius: 14px; background: #f6f2ff; border: 1px dashed #d9cdfd; }

/* AI 표시: 흰 바탕 + 은은한 무지개 테두리(심플) — 앞의 보라 그라데이션 규칙을 덮어쓴다 */
:root { --ai-rainbow: linear-gradient(120deg, #ffb8c9, #ffd7a1, #c9efb9, #a8dcff, #d6c2ff); }
.ai-mark { display: inline-flex; align-items: center; padding: 1px 8px; border-radius: 999px; font-size: 11px; font-weight: 800; letter-spacing: .04em; vertical-align: 2px;
  color: #6a5f74; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--ai-rainbow) border-box; box-shadow: none; }
.pm-badge.ai { color: #6a5f74; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--ai-rainbow) border-box; }
.match-sec { background: #fff; border: 1px solid transparent; background: linear-gradient(#fff, #fff) padding-box, var(--ai-rainbow) border-box; }
.ai-card { margin: 12px 0 14px; padding: 14px 14px 10px; border-radius: 18px; border: 1px solid transparent;
  background: linear-gradient(#fff, #fff) padding-box, var(--ai-rainbow) border-box; }
.ai-h { display: flex; align-items: center; gap: 6px; font-size: 15.5px; margin: 0 0 8px; }
.ai-lines { margin: 0; padding-left: 18px; display: grid; gap: 4px; font-size: 14px; line-height: 1.6; color: #333; }
.ai-lines li::marker { color: #c9b8e6; }
.ai-dog { margin: 10px 0 0; padding: 8px 10px; border-radius: 12px; background: #faf8fc; font-size: 13.5px; }
.ai-src { margin: 8px 0 0; font-size: 11.5px; color: #9a93a0; }
.ai-picks { margin-top: 12px; padding-top: 10px; border-top: 1px solid #f1edf4; }
.ai-sub { font-size: 14px; margin: 0 0 6px; }

/* 점주 소식 쓰기 */
.owner-news-block { padding: 14px; border-radius: 16px; background: #fffaf0; border: 1px solid #f2deb3; }
.owner-coupons li { padding: 6px 0; border-bottom: 1px dashed #efe1bf; }

/* 가로 줄 왼쪽·오른쪽 버튼(넘칠 때만 보임) */
.strip-wrap { position: relative; }
.strip-btn { display: none; position: absolute; top: 34%; transform: translateY(-50%); z-index: 2; width: 34px; height: 34px; border-radius: 50%;
  border: 1px solid #eee; background: rgba(255,255,255,.94); color: #444; font-size: 22px; line-height: 1; cursor: pointer;
  box-shadow: 0 2px 10px rgba(0,0,0,.10); align-items: center; justify-content: center; padding: 0 0 3px; transition: opacity .15s; }
.strip-btn.prev { left: -6px; } .strip-btn.next { right: -6px; }
.strip-wrap.has-over .strip-btn { display: inline-flex; }
.strip-btn:disabled { opacity: 0; pointer-events: none; }
.strip-btn:hover { background: #fff; color: var(--primary, #C9405B); }
@media (hover: none) { .strip-btn { width: 30px; height: 30px; font-size: 19px; } }

/* 포인트 적립: 작은 코인 칩이 살짝 떠올랐다 사라짐 */
.messages li.points { display: inline-flex; align-items: center; gap: 6px; font-weight: 800; color: #8a6200; background: #fff8e1; border-color: #f3dfa2; animation: pt-pop .5s cubic-bezier(.2,.9,.3,1.3) both; }
.messages li.points::before { content: "🪙"; display: inline-block; animation: pt-coin 1.2s ease-out .15s both; }
@keyframes pt-pop { from { transform: translateY(6px) scale(.92); opacity: 0; } to { transform: none; opacity: 1; } }
@keyframes pt-coin { 0% { transform: translateY(0) rotateY(0); } 40% { transform: translateY(-5px) rotateY(180deg); } 100% { transform: translateY(0) rotateY(360deg); } }
.pt-float { position: fixed; z-index: 90; pointer-events: none; font-weight: 900; font-size: 14px; color: #b07d00; text-shadow: 0 1px 0 #fff; animation: pt-float 1.4s ease-out forwards; }
@keyframes pt-float { 0% { opacity: 0; transform: translateY(8px); } 20% { opacity: 1; } 100% { opacity: 0; transform: translateY(-28px); } }
@media (prefers-reduced-motion: reduce) { .messages li.points, .messages li.points::before, .pt-float { animation: none; } }
.cr-reward { margin: 4px 0 14px; padding: 10px 12px; border-radius: 12px; background: #fffaf0; border: 1px solid #f3e3b8; font-size: 13.5px; }