/* =========================================================
   🛒 장터 — 기존 누리 토큰(색·폰트·둥근 카드·그림자)만 사용
   새 디자인 시스템을 만들지 않고, 있는 규칙을 그대로 씁니다.
   ========================================================= */

/* ---- 첫 화면: 세 갈래 ---- */
.mk-gate { display: grid; grid-template-columns: repeat(auto-fit, minmax(240px, 1fr)); gap: 14px; margin-bottom: 26px; }
.mk-gate-card {
  display: flex; flex-direction: column; gap: 7px; padding: 22px 20px;
  border: 1.5px solid var(--border, #e5e5e5); border-radius: 16px;
  background: var(--surface); text-decoration: none; color: inherit;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .04);
}
.mk-gate-card:hover { border-color: var(--brand); transform: translateY(-2px); }
.mk-gate-ico { font-size: 34px; line-height: 1; }
.mk-gate-ico img { width: 34px; height: 34px; }
.mk-gate-name { font-size: 1.2rem; font-weight: 700; color: var(--heading); }
.mk-gate-desc { font-size: 15px; color: var(--text-muted); }
.mk-gate-go { margin-top: 4px; font-size: 14px; font-weight: 700; color: var(--brand); }
.mk-gate-soon { opacity: .82; border-style: dashed; }
.mk-gate-soon:hover { border-color: var(--border, #ccc); transform: none; }

/* ---- 생물 분양 준비중 ---- */
.mk-life { max-width: 640px; }
.mk-life-lead { font-size: 1.35rem; font-weight: 700; color: var(--heading); margin: 0 0 14px; }
.mk-life p { font-size: 1.0625rem; line-height: 1.85; margin: 0 0 14px; }
.mk-life-note {
  padding: 13px 16px; border-radius: 12px; font-size: 15.5px;
  background: var(--surface-2); border: 1px solid var(--border, #e5e5e5);
}
.mk-life-actions { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

/* ---- 목록 도구줄 ---- */
.mk-toolbar { display: flex; align-items: center; justify-content: space-between; gap: 12px; flex-wrap: wrap; margin-bottom: 14px; }
.mk-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.mk-toolbar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }

/* ---- 검색·필터 ---- */
.mk-filters {
  padding: 14px 16px; margin-bottom: 18px;
  border: 1.5px solid var(--border, #e5e5e5); border-radius: 14px; background: var(--surface-2);
}
.mk-search-row { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-search-row input {
  flex: 1 1 200px; min-width: 0; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit;
  font-family: inherit; font-size: 16px;
}
.mk-fgroup { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 8px; }
.mk-flabel { flex: 0 0 76px; font-size: 13.5px; font-weight: 700; color: var(--text-muted); }
.mk-fchips { display: flex; gap: 5px; flex-wrap: wrap; }
.mk-fchips .chip { font-size: 13.5px; padding: 5px 11px; }

/* ==========================================================
   🛒 누리 장터 — 목록 화면
   ----------------------------------------------------------
   들어오자마자 '무엇이 올라와 있는지' 가 보여야 합니다.
   그래서 위쪽은 탭·검색·글쓰기만 두고, 필터는 한 줄로 접었어요.
   ⚠️ 누리의 기존 값을 그대로 씁니다 — 초록 포인트(--brand),
      둥근 모서리 14px, 카드 테두리 1.5px, 여백 12~14px.
      장터만 갑자기 쇼핑몰처럼 보이면 안 되니까요.
   ========================================================== */

/* ---- 종류 탭 (용품 거래 / 무료 나눔 / 생물 분양) ---- */
.mk-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.mk-tab {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 9px 17px; border-radius: 999px;
  font-size: 0.9375rem; font-weight: 700; text-decoration: none;
  color: var(--text-muted); background: var(--surface);
  border: 1.5px solid var(--line);
}
.mk-tab:hover { border-color: var(--brand); color: var(--brand); }
/* ⚠️ 브랜드색 위 글자색은 테마마다 달라요 (--on-brand).
   2호기의 브랜드는 밝은 산호색이라 흰 글씨가 안 읽힙니다 (대비 2.52). */
.mk-tab.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
.mk-tab.active:hover { color: var(--on-brand, #fff); }
/* 준비 중 — 흐릿하게 지우지는 않습니다. 준비하고 있다는 건 보여야 해요 */
.mk-tab-soon { border-style: dashed; }
.mk-tab-soon .soon-mini { font-size: 11px; }
.mk-tab .emo { width: 1.05em; height: 1.05em; }

/* ---- 검색 + 글쓰기 ---- */
.mk-hero { display: flex; gap: 10px; align-items: center; margin-bottom: 14px; }
.mk-search { position: relative; flex: 1 1 auto; display: flex; align-items: center; min-width: 0; }
.mk-search-ico {
  position: absolute; left: 16px; font-size: 17px; pointer-events: none; line-height: 1;
}
.mk-search-ico .emo { width: 17px; height: 17px; }
.mk-search input {
  flex: 1 1 auto; min-width: 0;
  padding: 14px 108px 14px 44px;
  font-family: inherit; font-size: 1rem; color: var(--text);
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 999px;
}
.mk-search input:focus { outline: none; border-color: var(--brand); }
.mk-search-btn { position: absolute; right: 5px; padding: 9px 20px; }
.mk-write-btn { flex: none; padding: 13px 20px; white-space: nowrap; }

/* ---- 필터 한 줄 ---- */
.mk-filterbar { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.mk-sels { display: flex; gap: 8px; flex-wrap: wrap; flex: 1 1 auto; }
.mk-sel {
  font-family: inherit; font-size: 0.875rem; font-weight: 600; color: var(--text);
  padding: 8px 12px; border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer; max-width: 100%;
}
.mk-sel:focus { outline: none; border-color: var(--brand); }
.mk-region { cursor: text; min-width: 132px; }
/* 정렬은 오른쪽 끝으로 */
.mk-filterbar > .mk-sel[data-f="sort"] { margin-left: auto; }
/* 넓은 화면에서는 '필터' 단추와 시트 바닥이 필요 없어요 */
.mk-filter-btn, .mk-sheet-foot { display: none; }

/* ---- 걸어 둔 필터 칩 ---- */
.mk-chips { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.mk-chip {
  display: inline-flex; align-items: center; gap: 5px;
  font-family: inherit; font-size: 13px; font-weight: 700;
  padding: 5px 11px; border-radius: 999px; cursor: pointer;
  color: var(--brand); background: var(--chip-bg); border: 1px solid var(--brand);
}
.mk-chip:hover { filter: brightness(.96); }
.mk-chip-reset { color: var(--text-muted); background: none; border-color: var(--line); }
.mk-chip-reset:hover { color: var(--heading); border-color: var(--text-muted); }

/* ---- 목록 카드 ----
   넓은 화면에서는 사진이 큼직한 세로 카드로 3~4열,
   좁은 화면에서는 2열로 놓습니다. */
.mk-count { font-size: 14px; font-weight: 700; color: var(--text-muted); margin: 0 0 12px; }
.mk-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(216px, 1fr)); gap: 14px; }
.mk-card {
  display: flex; flex-direction: column; overflow: hidden;
  border: 1.5px solid var(--line); border-radius: 14px;
  background: var(--surface); text-decoration: none; color: inherit;
  transition: border-color .16s ease, transform .16s ease;
}
.mk-card:hover { border-color: var(--brand); transform: translateY(-2px); }
/* 거래가 끝난 글 — 살짝 물러나되 읽을 수는 있게 */
.mk-card-done { opacity: .6; }
.mk-card-done:hover { opacity: .85; }
.mk-thumb {
  position: relative; display: block; width: 100%; aspect-ratio: 4 / 3;
  overflow: hidden; background: var(--surface-2);
}
.mk-thumb > img { width: 100%; height: 100%; object-fit: cover; display: block; }
/* 사진이 없는 글 — 큼직한 빈 회색 상자 대신 로고와 한 줄 */
.mk-noimg {
  position: absolute; inset: 0; display: flex; flex-direction: column;
  align-items: center; justify-content: center; gap: 6px;
  background: var(--surface-2); color: var(--text-muted); font-size: 12.5px;
}
.mk-noimg > img { width: 34px; height: 34px; opacity: .38; }
/* 상태 알약은 사진 위 왼쪽 아래에 */
.mk-thumb .mk-status { position: absolute; left: 8px; bottom: 8px; }
.mk-card-body { display: flex; flex-direction: column; gap: 3px; padding: 11px 12px 13px; min-width: 0; }
.mk-badges { display: flex; gap: 4px; flex-wrap: wrap; margin-bottom: 2px; }
/* 제목이 길어도 두 줄까지만 — 카드 키가 들쭉날쭉하지 않게 */
.mk-name {
  font-size: 15px; font-weight: 700; color: var(--heading); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical;
  overflow: hidden; word-break: break-word;
}
.mk-price { font-size: 17px; font-weight: 800; color: var(--heading); margin-top: 2px; }
.mk-price-free { color: var(--brand); }
.mk-meta { font-size: 12.5px; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mk-meta-sub { font-size: 12px; }

/* ---- 아래 도구 ---- */
.mk-bottom { display: flex; justify-content: center; margin-top: 18px; }

/* ---- 좁은 화면 ---- */
@media (max-width: 720px) {
  /* 검색칸이 화면 폭을 거의 다 차지하고, 글쓰기는 아래로 */
  .mk-hero { flex-direction: column; align-items: stretch; }
  .mk-write-btn { width: 100%; }
  .mk-search input { padding-right: 92px; font-size: 0.9375rem; }

  /* 필터는 늘어놓지 않고 '필터' 단추 하나로 접습니다 */
  .mk-filter-btn {
    display: inline-flex; align-items: center; gap: 5px;
    font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--text);
    padding: 8px 14px; border: 1.5px solid var(--line); border-radius: 999px;
    background: var(--surface); cursor: pointer;
  }
  .mk-filter-btn.on { border-color: var(--brand); color: var(--brand); background: var(--chip-bg); }
  .mk-filter-n {
    display: inline-grid; place-items: center; min-width: 18px; height: 18px; padding: 0 5px;
    font-size: 11px; border-radius: 999px; background: var(--brand); color: var(--on-brand, #fff);
  }
  .mk-sels {
    display: none; flex-direction: column; gap: 8px;
    flex: 1 1 100%; order: 3; width: 100%;
    margin-top: 4px; padding: 14px; border-radius: 14px;
    background: var(--surface); border: 1.5px solid var(--line);
  }
  .mk-sels.open { display: flex; }
  .mk-sels .mk-sel { width: 100%; border-radius: 12px; padding: 11px 13px; }
  .mk-sheet-foot { display: flex; gap: 8px; margin-top: 2px; }
  .mk-sheet-foot .btn { flex: 1 1 0; }
  .mk-filterbar > .mk-sel[data-f="sort"] { margin-left: auto; }

  /* 카드는 두 줄로 */
  .mk-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  .mk-name { font-size: 14px; }
  .mk-price { font-size: 15.5px; }
  .mk-tab { padding: 8px 13px; font-size: 0.875rem; }
}
/* 📱 아주 좁은 화면(≤380px) — 두 줄을 버리고 '가로 카드' 한 줄로.
   ---------------------------------------------------------
   ⚠️ 예전에는 여기서도 두 줄을 유지하고 글씨만 줄였습니다. 재보니
      320px 에서 카드 폭이 134px, 제목이 13px 까지 내려갔어요.
      물건 이름이 "코코피트 대용량 남은 것 나눔합니다…" 처럼 길면
      두 줄 안에 아무것도 안 들어옵니다. 글씨를 더 줄이는 건 답이
      아니에요 — 읽으라고 있는 글씨니까요.
   ⚠️ 그래서 사진을 왼쪽에 세우고 이름·가격을 오른쪽에 폅니다.
      제목이 쓸 수 있는 폭이 134px → 190px 이 되고, 글씨는 오히려
      15px 로 되돌아갑니다.
   ⚠️ 마크업은 그대로입니다 (a > .mk-thumb + .mk-card-body).
      방향만 바꾸는 것이라 JS 는 손대지 않았어요. */
@media (max-width: 380px) {
  .mk-grid { grid-template-columns: 1fr; gap: 8px; }
  .mk-card { flex-direction: row; align-items: stretch; }
  /* 사진은 왼쪽에 정사각으로 — 세로로 길면 카드가 쓸데없이 커집니다 */
  .mk-thumb { width: 104px; flex: 0 0 104px; aspect-ratio: 1 / 1; }
  .mk-card-body { flex: 1 1 auto; justify-content: center; padding: 10px 12px; }
  /* 좁아서 줄인 글씨를 되돌립니다 */
  .mk-name { font-size: 15px; }
  .mk-price { font-size: 16px; }
  .mk-noimg { font-size: 11px; gap: 3px; }
  .mk-noimg > img { width: 26px; height: 26px; }
}

/* 좁은 화면에서 제목 칸이 화면의 3분의 1을 먹고 있었어요.
   물건을 보러 온 사람에게 제목이 그만큼 중요하지는 않습니다. */
@media (max-width: 720px) {
  body[data-page="market"] .page-hero { padding: 18px 0 10px; }
  body[data-page="market"] .page-hero h1 { font-size: 1.5rem; }
  body[data-page="market"] .page-hero p { font-size: 0.875rem; line-height: 1.6; }
  body[data-page="market"] .section { padding-top: 8px; }
}
@media (prefers-reduced-motion: reduce) {
  .mk-card { transition: none; }
  .mk-card:hover { transform: none; }
}

/* 상태 알약 */
.mk-status { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.mk-status-open { background: var(--chip-bg); color: var(--brand); }
.mk-status-reserved { background: #fef3c7; color: #92400e; }
.mk-status-done { background: var(--surface-2); color: var(--text-muted); }
.mk-free { font-size: 11.5px; font-weight: 800; padding: 3px 9px; border-radius: 999px; background: #dcfce7; color: #166534; }
.mk-cat { font-size: 11.5px; padding: 3px 9px; border-radius: 999px; background: var(--surface-2); color: var(--text-muted); }

/* ---- 안전거래 안내 ---- */
/* 안전 안내는 목록 아래에 작게. 화면 위를 큰 경고문으로 채우면
   물건을 보러 온 사람에게 겁만 주게 됩니다. */
.mk-safety {
  margin: 30px 0 8px; padding: 13px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.mk-safety-head { font-size: 0.875rem; font-weight: 700; color: var(--heading); margin-bottom: 6px; }
.mk-safety ul { margin: 0 0 8px; padding-left: 18px; }
.mk-safety li { font-size: 13.5px; line-height: 1.75; color: var(--text-muted); }
.mk-safety-note { margin: 0; font-size: 13.5px; color: var(--text-muted); line-height: 1.7; }

/* ---- 글쓰기 ---- */
.mk-write .req { color: #dc2626; }
.mk-opt { font-size: 13px; color: var(--text-muted); font-weight: 400; }
.mk-hint { margin: 5px 0 0; font-size: 13px; color: var(--text-muted); }
.mk-kind-pick { display: flex; gap: 7px; align-items: center; flex-wrap: wrap; }
.mk-kind-note { font-size: 13px; color: var(--text-muted); }
.mk-price-input { display: flex; align-items: center; gap: 6px; }
.mk-price-input input { flex: 1; min-width: 0; }
.mk-price-won { font-weight: 700; color: var(--text-muted); }
.mk-free-big { margin: 6px 0 0; font-size: 1.15rem; font-weight: 800; color: #166534; }
.mk-write input[type="text"], .mk-write select, .mk-write textarea {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit;
  font-family: inherit; font-size: 16px;
}
.mk-write textarea { resize: vertical; }
.mk-photos { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.mk-photo { position: relative; width: 92px; height: 92px; border-radius: 10px; overflow: hidden; }
.mk-photo img { width: 100%; height: 100%; object-fit: cover; }
.mk-photo-del {
  position: absolute; top: 3px; right: 3px; width: 22px; height: 22px; border: none;
  border-radius: 50%; background: rgba(0, 0, 0, .6); color: #fff; cursor: pointer; line-height: 1;
}
.mk-photo-main {
  position: absolute; bottom: 0; left: 0; right: 0; text-align: center;
  font-size: 11px; font-weight: 700; background: rgba(0, 0, 0, .55); color: #fff;
}
.mk-write-safety {
  margin: 16px 0 4px; padding: 12px 15px; border-radius: 11px; font-size: 14.5px; line-height: 1.7;
  background: rgba(230, 180, 34, .12); border: 1px solid rgba(230, 180, 34, .4);
}

/* ---- 상세 ---- */
.mk-detail { max-width: 780px; }
.mk-done-banner {
  padding: 11px 15px; border-radius: 11px; margin-bottom: 16px; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted);
}
.mk-detail-photos { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
.mk-detail-photos img { width: 100%; height: auto; border-radius: 14px; display: block; }
.mk-detail-price { font-size: 1.2rem; color: var(--brand); }
.mk-detail-actions { display: flex; gap: 8px; flex-wrap: wrap; margin: 20px 0 0; }
.mk-owner-bar {
  display: flex; gap: 7px; align-items: center; flex-wrap: wrap;
  margin-top: 12px; padding: 11px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--border, #e5e5e5);
}
.mk-owner-label { font-size: 13px; font-weight: 700; color: var(--text-muted); }
.mk-report-flag { color: #b91c1c; }
.mk-back { margin-top: 18px; }
.mk-report-box {
  margin-top: 14px; padding: 16px 18px; border-radius: 14px;
  border: 2px solid #ef4444; background: rgba(239, 68, 68, .06);
}
.mk-report-box h3 { margin: 0 0 4px; }
.mk-report-box select, .mk-report-box textarea {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit;
  font-family: inherit; font-size: 16px;
}
.mk-report-done { margin: 0; font-weight: 700; color: #166534; }

/* ---- 좁은 화면: 글쓰기 화면만 ----
   ⚠️ 목록(.mk-grid/.mk-thumb) 규칙은 여기서 빼야 합니다.
      새 카드는 위쪽 720px 블록이 맡는데, 여기 있던 옛 규칙이
      뒤에 있다는 이유만으로 이겨서 다시 1열·80px 썸네일로
      되돌려 놓고 있었어요. */
@media (max-width: 640px) {
  .mk-write .write-row { flex-direction: column; }
}

/* =========================================================
   🐾 내 생물 — 기존 누리 토큰만 사용 (사진이 주인공, UI는 담백하게)
   ========================================================= */
.pet-count { color: var(--brand); font-weight: 800; }
.pet-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 12px; }
.pet-card {
  position: relative; display: flex; gap: 12px; padding: 12px;
  border: 1.5px solid var(--border, #e7e7e7); border-radius: 14px;
  background: var(--surface); cursor: pointer;
}
.pet-card:hover, .pet-card:focus-visible { border-color: var(--brand); transform: translateY(-2px); outline: none; }
.pet-photo {
  flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 34px; background: var(--surface-2);
}
.pet-photo img { width: 100%; height: 100%; object-fit: cover; }
.pet-photo-none img { width: 34px; height: 34px; }
.pet-card-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.pet-card-name {
  font-size: 17px; font-weight: 700; color: var(--heading);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.pet-card-species { font-size: 14px; color: var(--text); }
.pet-card-group { font-size: 13px; color: var(--text-muted); display: flex; align-items: center; gap: 4px; }
.pet-card-group img { width: 16px; height: 16px; }
.pet-card-since { font-size: 12.5px; color: var(--brand); font-weight: 700; }
.pet-card-intro {
  font-size: 13px; color: var(--text-muted); margin-top: 3px;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.pet-card-tools { position: absolute; top: 8px; right: 8px; display: flex; gap: 4px; opacity: 0; transition: opacity .15s; }
.pet-card:hover .pet-card-tools, .pet-card:focus-within .pet-card-tools { opacity: 1; }

/* 상세 */
.pet-detail { max-width: 560px; }
.pet-detail-photo { border-radius: 14px; overflow: hidden; margin-bottom: 14px; }
.pet-detail-photo img { width: 100%; height: auto; display: block; }
.pet-detail-intro {
  margin: 14px 0 0; padding: 12px 15px; border-radius: 11px; font-size: 15.5px;
  background: var(--surface-2); border: 1px solid var(--border, #e5e5e5);
}

/* 등록·수정 폼 */
.pet-form { max-width: 520px; }
.pet-form h4 { margin: 0 0 12px; font-size: 1.05rem; }
.pet-form .req { color: #dc2626; }
.pet-form .field { margin-bottom: 11px; }
.pet-form input[type="text"], .pet-form input[type="date"], .pet-form select {
  width: 100%; padding: 9px 12px; border-radius: 10px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit;
  font-family: inherit; font-size: 16px;
}
.pet-form-row { display: flex; gap: 10px; }
.pet-form-row .field { flex: 1; min-width: 0; }
.pet-photo-pick { display: flex; align-items: center; gap: 12px; }
.pet-photo-prev {
  flex: none; width: 84px; height: 84px; border-radius: 12px; overflow: hidden;
  display: flex; align-items: center; justify-content: center;
  font-size: 32px; background: var(--surface-2); border: 1.5px solid var(--border, #ddd);
}
.pet-photo-prev img { width: 100%; height: 100%; object-fit: cover; }
.pet-photo-btns { display: flex; flex-direction: column; gap: 6px; }

/* 홈의 작은 '내 친구들' 줄 */
.myfriends-strip { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.myfriend {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 7px 12px 7px 7px; border-radius: 999px;
  border: 1.5px solid var(--border, #e7e7e7); background: var(--surface-2);
  text-decoration: none; color: inherit; font-size: 14.5px;
}
.myfriend:hover { border-color: var(--brand); }
.myfriend-pic {
  flex: none; width: 30px; height: 30px; border-radius: 50%; overflow: hidden;
  display: flex; align-items: center; justify-content: center; font-size: 17px; background: var(--surface);
}
.myfriend-pic img { width: 100%; height: 100%; object-fit: cover; }
.myfriend-name { font-weight: 700; }
.myfriend-sp { color: var(--text-muted); font-size: 13px; }

/* 모바일 — 1열, 글자 잘림 방지, 도구 버튼 항상 보이게(터치라 hover 없음) */
@media (max-width: 640px) {
  .pet-cards { grid-template-columns: 1fr; }
  .pet-card-tools { opacity: 1; position: static; margin-top: 8px; }
  .pet-card { flex-wrap: wrap; }
  .pet-card-name { white-space: normal; }
  .pet-photo { width: 72px; height: 72px; font-size: 28px; }
  .pet-form-row { flex-direction: column; gap: 0; }
}

/* =========================================================
   정렬 + 🔥 화제글 (글 목록)
   ========================================================= */
.list-toolbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 14px;
}
.sort-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.sort-chips .chip { font-size: 14px; padding: 6px 13px; }
.hot-toggle {
  border: 1.5px solid var(--border, #ddd); background: var(--surface);
  color: var(--text-muted); font-family: inherit; font-size: 13.5px; font-weight: 700;
  padding: 6px 13px; border-radius: 999px; cursor: pointer; white-space: nowrap;
}
.hot-toggle:hover { color: var(--heading); border-color: var(--brand); }

/* 목록(왼쪽) + 화제글(오른쪽) */
.list-layout { display: grid; grid-template-columns: minmax(0, 1fr) 300px; gap: 22px; align-items: start; }
.list-layout.hot-off { grid-template-columns: minmax(0, 1fr); }
.list-layout.hot-off .hot-side { display: none; }

.hot-card {
  position: sticky; top: 84px;
  border: 1.5px solid var(--border, #e7e7e7); border-radius: 16px;
  background: var(--surface); padding: 15px 16px;
}
.hot-head { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; margin-bottom: 10px; }
.hot-head h3 { margin: 0; font-size: 1.05rem; }
.hot-note { font-size: 12.5px; color: var(--text-muted); }
.hot-empty { margin: 0; font-size: 14px; color: var(--text-muted); line-height: 1.7; }
.hot-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 4px; }
.hot-item a {
  display: flex; gap: 10px; align-items: flex-start;
  padding: 8px 9px; border-radius: 10px; text-decoration: none; color: inherit;
}
.hot-item a:hover { background: var(--surface-2); }
.hot-rank {
  flex: none; width: 22px; height: 22px; border-radius: 7px;
  display: flex; align-items: center; justify-content: center;
  font-size: 12.5px; font-weight: 800;
  background: var(--surface-2); color: var(--text-muted);
}
.hot-rank-1 { background: #fde68a; color: #78500a; }
.hot-rank-2 { background: #e5e7eb; color: #4b5563; }
.hot-rank-3 { background: #fed7aa; color: #9a3412; }
.hot-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.hot-title {
  font-size: 14.5px; font-weight: 700; line-height: 1.4;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.hot-meta { font-size: 12px; color: var(--text-muted); }

/* 좁은 화면 — 화제글을 목록 아래로 (가로 스크롤 없이) */
@media (max-width: 900px) {
  .list-layout { grid-template-columns: minmax(0, 1fr); }
  .hot-card { position: static; }
  .hot-side { margin-top: 8px; }
}

/* ==========================================================
   🏆 생물박사 — 초록빛 / 🕊️ 잔혹한 천사 — 흰빛
   ----------------------------------------------------------
   '누리의 전설' 과 똑같은 방식입니다. 닉네임 글자 자체에
   그 칭호의 빛깔이 흐르고, 천천히 일렁여요. 색만 다릅니다.

   ⚠️ 금색과 마찬가지로, 색 하나를 두 테마에 그대로 쓰면 안 됩니다.
        · 밝은 화면에 밝은 초록 → 흰 바탕과 대비가 안 나서 안 읽힘
        · 어두운 화면에 짙은 초록 → 배경에 묻혀서 안 읽힘
      그래서 테마마다 다른 값을 씁니다.
        밝은 화면 → 짙은 색 (읽히게)
        어두운 화면 → 밝은 색 (빛나게)

   ⚠️ 흰빛은 특히 조심해야 해요. 밝은 화면에서 진짜 흰색을 쓰면
      글자가 통째로 사라집니다. 그래서 밝은 화면에서는
      '흰빛이 도는 은회색' 으로 씁니다 — 눈에는 희끄무레하게
      보이면서 글씨는 또렷하게 읽혀요.
   ========================================================== */
:root {
  /* 🏆 생물박사 — 밝은 화면용(짙은 초록) */
  --bio-1: #14532d;
  --bio-2: #2a8049;
  --bio-3: #1d6b39;
  /* 🕊️ 잔혹한 천사 — 밝은 화면용(흰빛 도는 은회색) */
  --eva-1: #4a5268;
  --eva-2: #6f788e;
  --eva-3: #626c85;
}
:root:not([data-theme="light"]) {
  --bio-1: #4ade80;   /* 어두운 화면용(밝은 초록) */
  --bio-2: #d9ffe8;
  --bio-3: #6ee7a0;
  --eva-1: #ffffff;   /* 어두운 화면용(진짜 흰빛) */
  --eva-2: #eef3ff;
  --eva-3: #dbe4f7;
}
@media (prefers-color-scheme: light) {
  :root:not([data-theme="dark"]):not([data-theme="unit02"]) {
    --bio-1: #14532d; --bio-2: #2a8049; --bio-3: #1d6b39;
    --eva-1: #4a5268; --eva-2: #6f788e; --eva-3: #626c85;
  }
}
[data-theme="dark"], [data-theme="unit02"] {
  --bio-1: #4ade80; --bio-2: #d9ffe8; --bio-3: #6ee7a0;
  --eva-1: #ffffff; --eva-2: #eef3ff; --eva-3: #dbe4f7;
}
[data-theme="light"] {
  --bio-1: #14532d; --bio-2: #2a8049; --bio-3: #1d6b39;
  --eva-1: #4a5268; --eva-2: #6f788e; --eva-3: #626c85;
}

/* 🏆 생물박사 — 초록빛이 돕니다 */
.author-bio {
  background: linear-gradient(100deg,
    var(--bio-1) 0%, var(--bio-3) 24%, var(--bio-2) 38%,
    var(--bio-3) 52%, var(--bio-1) 72%, var(--bio-3) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: legend-flow 6.5s linear infinite;   /* 전설과 같은 흐름, 아주 조금 느리게 */
  font-weight: 800;
}
/* 🕊️ 잔혹한 천사 — 흰빛이 돕니다.
   천사답게 흐름이 가장 느려요. 서두르지 않는 빛입니다. */
.author-eva {
  background: linear-gradient(100deg,
    var(--eva-1) 0%, var(--eva-3) 24%, var(--eva-2) 38%,
    var(--eva-3) 52%, var(--eva-1) 72%, var(--eva-3) 100%);
  background-size: 260% 100%;
  -webkit-background-clip: text; background-clip: text;
  -webkit-text-fill-color: transparent; color: transparent;
  animation: legend-flow 8s linear infinite;
  font-weight: 800;
}

/* 어두운 화면에서만 은은한 빛무리 (밝은 화면에서는 번져 보여서 안 넣어요) */
:root:not([data-theme="light"]) .author-bio {
  filter: drop-shadow(0 0 6px rgba(74, 222, 128, .42));
}
:root:not([data-theme="light"]) .author-eva {
  filter: drop-shadow(0 0 7px rgba(226, 238, 255, .55));
}

/* 움직임이 불편한 분들을 위해 — 일렁임만 멈추고 빛깔은 남깁니다 */
@media (prefers-reduced-motion: reduce) {
  .author-bio, .author-eva { animation: none; }
}

/* ==========================================================
   🛡️ 글 본문 안의 그림 이모지 크기 지키기
   ----------------------------------------------------------
   무슨 일이 있었나요?

   글에 🌱 을 쓰면 emoji.js 가 <img class="emo"> 그림으로 바꿉니다.
   그런데 본문 사진 규칙(.detail-content img)이 이 그림까지
   '올린 사진'으로 보고 width:auto · display:block 을 씌웠어요.
   SVG 는 원래 크기가 없어서 width:auto 를 만나면 칸을 꽉 채웁니다.
   그래서 새싹 하나가 440px 로 커져 본문을 덮어버렸어요.
   (가입인사 양식이 '🌱 누리 가입인사' 로 시작해 특히 눈에 띄었습니다)

   위쪽 사진 규칙에 :not(.emo) 를 붙여 고쳤고, 여기서 한 번 더
   못을 박아 둡니다. 앞으로 본문 칸에 무슨 규칙이 추가돼도
   이모지는 글자 크기를 지켜요.

   ⚠️ 본문 칸에만 걸리게 했습니다. 아이콘을 큼직하게 놓는 자리
      (허브 썸네일·메뉴·분류 카드 등)까지 건드리면 그쪽이 작아져요.
   ========================================================== */
.detail-content .emo,
.editor-body .emo,
.sd-intro .emo,
.dex-detail .emo {
  width: 1em; height: 1em;
  max-width: none; max-height: none;
  display: inline-block; vertical-align: -0.15em;
  margin: 0; border-radius: 0; cursor: inherit;
  object-fit: contain;
}

/* ==========================================================
   ✍️ 작성자 — 글쓴이가 자기 글에 남긴 댓글
   ----------------------------------------------------------
   "이 사람이 글쓴이구나" 를 바로 알 수 있게 해줍니다.
   질문 글에서 특히 요긴해요 — 답이 여러 개 달렸을 때
   글쓴이가 덧붙인 말이 어느 것인지 금방 찾을 수 있거든요.

   ⚠️ 칭호처럼 보이면 안 됩니다.
      칭호는 '색이 꽉 찬 알약'(갈색·파랑·노랑·초록…)이에요.
      이건 '속이 빈 테두리 칩' 으로 둡니다. 나란히 놓아도
      한눈에 다른 종류라는 게 보여요.
   ========================================================== */
.cmt-op {
  display: inline-block; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 2px 7px; border-radius: 999px; white-space: nowrap;
  color: var(--brand);
  background: transparent;
  border: 1px solid var(--brand);
}
/* 어두운 화면에서는 테두리만 있으면 너무 희미해서 아주 옅은 바탕을 깝니다 */
:root:not([data-theme="light"]) .cmt-op {
  background: rgba(34, 197, 94, .10);
}

/* ==========================================================
   🙋 가이드 투어
   ----------------------------------------------------------
   화면을 어둡게 덮고, 눌러야 할 자리만 밝혀서 알려줍니다.

   '어둡게 덮기' 와 '구멍 뚫기' 를 따로 만들지 않았어요.
   네모 하나에 아주 큰 그림자(box-shadow 0 0 0 9999px)를 주면
   그 네모 바깥이 전부 어두워집니다 — 네모 자리만 원래 화면이 보이고요.
   덕분에 요소가 하나로 끝나고, 어느 브라우저에서나 똑같이 나옵니다.
   ========================================================== */
.tour-root { position: fixed; inset: 0; z-index: 9000; display: none; }
.tour-root.on { display: block; }
/* ⚠️ 여기서 본문 스크롤을 잠그면 안 됩니다.
   안내가 화면 아래쪽 자리(분류 카드·화제글)로 내려가야 하는데,
   잠가 두면 그 자리로 내려가질 못해서 말풍선만 화면 밖에 덩그러니 남아요.
   딴 곳을 실수로 누르는 건 .tour-block 이 이미 막아 줍니다. */
body.tour-open { overscroll-behavior: contain; }

/* 안내 중에 딴 곳을 실수로 누르지 않게 막아 둡니다 */
.tour-block { position: absolute; inset: 0; }

/* 밝혀 주는 자리 */
.tour-hole {
  position: fixed; border-radius: 14px; pointer-events: none;
  box-shadow: 0 0 0 9999px rgba(8, 14, 12, .68);
  transition: top .32s cubic-bezier(.4, 0, .2, 1), left .32s cubic-bezier(.4, 0, .2, 1),
              width .32s cubic-bezier(.4, 0, .2, 1), height .32s cubic-bezier(.4, 0, .2, 1);
}
/* 그 둘레에서 톡톡 번지는 테두리 — "여기예요" 하고 부르는 느낌 */
.tour-ring {
  position: fixed; border-radius: 14px; pointer-events: none;
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 0 rgba(34, 197, 94, .55);
  animation: tour-pulse 1.8s ease-out infinite;
  transition: inherit;
}
@keyframes tour-pulse {
  0%   { box-shadow: 0 0 0 0 rgba(34, 197, 94, .55); }
  70%  { box-shadow: 0 0 0 14px rgba(34, 197, 94, 0); }
  100% { box-shadow: 0 0 0 0 rgba(34, 197, 94, 0); }
}

/* 움직이는 손가락 — 자리에서 자리로 스윽 옮겨가며 콕콕 누르는 시늉을 합니다 */
.tour-hand {
  position: fixed; z-index: 2; pointer-events: none;
  font-size: 30px; line-height: 1;
  filter: drop-shadow(0 3px 6px rgba(0, 0, 0, .45));
  transition: left .5s cubic-bezier(.34, 1.2, .5, 1), top .5s cubic-bezier(.34, 1.2, .5, 1);
  animation: tour-tap 1.3s ease-in-out infinite;
}
.tour-hand .emo, .tour-hand img { width: 30px; height: 30px; }
@keyframes tour-tap {
  0%, 100% { transform: translate(0, 0); }
  45%      { transform: translate(0, -9px); }
}

/* 말풍선 */
.tour-tip {
  position: fixed; z-index: 3;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 16px;
  padding: 14px 16px 12px;
  box-shadow: 0 18px 48px rgba(0, 0, 0, .35);
}
.tour-tip-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 6px; }
.tour-step {
  font-size: 0.6875rem; font-weight: 800; letter-spacing: .04em;
  color: var(--brand); background: var(--chip-bg);
  padding: 3px 9px; border-radius: 999px;
}
.tour-x {
  border: none; background: none; cursor: pointer;
  font-size: 1.25rem; line-height: 1; color: var(--text-muted); padding: 2px 4px;
}
.tour-x:hover { color: var(--heading); }
.tour-tip h3 { font-size: 1rem; color: var(--heading); margin: 0 0 6px; }
.tour-tip p { font-size: 0.875rem; line-height: 1.65; color: var(--text); margin: 0 0 12px; }
.tour-dim { color: var(--text-muted); font-size: 0.8125rem; }

/* 말풍선 꼬리 — 밝힌 자리를 가리킵니다 */
.tour-tip::before {
  content: ""; position: absolute; left: 50%; transform: translateX(-50%);
  border: 9px solid transparent;
  top: -18px; border-bottom-color: var(--surface);
}
.tour-tip.tour-tip-up::before { top: auto; bottom: -18px; border-bottom-color: transparent; border-top-color: var(--surface); }

.tour-nav { display: flex; gap: 8px; align-items: center; }
.tour-btn {
  border-radius: 999px; font-weight: 700; font-size: 0.8125rem;
  padding: 8px 14px; cursor: pointer; border: 1px solid var(--line);
  background: var(--surface); color: var(--text);
}
.tour-btn:hover { border-color: var(--brand); color: var(--brand); }
.tour-btn:disabled { opacity: .35; cursor: default; }
.tour-btn:disabled:hover { border-color: var(--line); color: var(--text); }
.tour-go { margin-left: auto; background: var(--brand); border-color: var(--brand); color: #fff; }
.tour-go:hover { filter: brightness(1.06); color: #fff; }
#tourEnd { font-weight: 600; color: var(--text-muted); border-color: transparent; }

/* ---------- '가이드가 필요해요!' 단추 ---------- */
.tour-start-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  margin-top: 12px; padding: 10px 12px;
  text-align: left; cursor: pointer;
  background: var(--chip-bg); color: var(--text);
  border: 1px dashed var(--brand); border-radius: 12px;
}
.tour-start-btn:hover { background: var(--surface); border-style: solid; }
.tour-start-ico { font-size: 1.25rem; line-height: 1; flex: 0 0 auto; }
.tour-start-ico .emo, .tour-start-ico img { width: 1.25rem; height: 1.25rem; }
.tour-start-txt { display: block; line-height: 1.4; }
.tour-start-txt b { display: block; font-size: 0.875rem; color: var(--heading); }
.tour-start-txt small { font-size: 0.75rem; color: var(--text-muted); }

/* 아직 한 번도 안 본 분에게만 — 3번 살짝 흔들리고 멈춥니다 */
.tour-nudge { animation: tour-nudge 1.1s ease-in-out 3; }
@keyframes tour-nudge {
  0%, 100%    { transform: translateX(0); }
  20%, 60%    { transform: translateX(-3px); }
  40%, 80%    { transform: translateX(3px); }
}

/* 좁은 화면 */
@media (max-width: 600px) {
  .tour-tip { padding: 12px 13px 10px; }
  .tour-tip h3 { font-size: 0.9375rem; }
  .tour-tip p { font-size: 0.8125rem; }
  .tour-btn { padding: 7px 11px; font-size: 0.75rem; }
  .tour-hand { font-size: 26px; }
}

/* 움직임이 불편한 분들을 위해 — 흔들림과 튀어오름을 멈춥니다.
   자리를 밝히는 것과 설명은 그대로예요 (그게 이 기능의 핵심이니까요) */
@media (prefers-reduced-motion: reduce) {
  .tour-hole, .tour-ring, .tour-hand { transition: none; }
  .tour-ring, .tour-hand, .tour-nudge { animation: none; }
}

/* ===== 🌏 전체 공지 — 옅은 붉은빛 =====
   모든 소동물 게시판에 함께 나타나는 글이에요.
   그 게시판 글들 사이에 섞이면 "우리 게시판 글인가?" 하고 헷갈려서,
   한눈에 다르게 보이도록 붉은빛을 돌게 했습니다.

   ⚠️ '옅은' 붉은색입니다. 새빨간 경고색은 쓰지 않았어요 —
      공지는 알려주는 글이지 겁주는 글이 아니니까요.
      그래서 장미빛(#f87171)에 아주 옅은 바탕을 깔았습니다.
   ⚠️ 붉은빛은 전체 공지 전용입니다. 관리자가 고르는 빛깔
      (금·파랑·초록)에는 없어요 — 아무 데나 쓰이면 뜻이 사라집니다. */
.post-item.glow-red {
  position: relative; overflow: hidden;
  border: 2px solid #f87171; border-radius: 12px;
  background: linear-gradient(180deg, rgba(248, 113, 113, .10), var(--surface));
  margin-bottom: 4px;
}
.post-item.glow-red .pmain,
.post-item.glow-red .pright { position: relative; z-index: 1; }
/* 빛이 스윽 훑고 지나갑니다 (이벤트·당첨자 발표와 같은 움직임) */
.post-item.glow-red::after {
  content: ""; position: absolute; top: -60%; left: 0; width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(254, 205, 205, .85), transparent);
  transform: translateX(-160%) rotate(8deg); pointer-events: none; z-index: 0;
  animation: eventSweep 7s ease-in-out infinite;
}
/* 어두운 화면에서는 옅은 붉은빛이 배경에 묻혀요. 조금만 더 진하게 */
:root:not([data-theme="light"]) .post-item.glow-red {
  background: linear-gradient(180deg, rgba(248, 113, 113, .16), var(--surface));
}
@media (prefers-reduced-motion: reduce) {
  .post-item.glow-red::after { animation: none; }
}

/* ⚠️ 글을 열었을 때는 붉은빛을 넣지 않습니다.
   붉은빛은 '목록에서 눈에 띄라고' 있는 것이에요.
   글에 들어가면 이미 그 글만 보고 있으니 강조할 이유가 없고,
   본문 전체가 붉게 물들면 오히려 읽기 불편합니다.
   (.article.glow-red 규칙을 일부러 두지 않았어요) */

/* ===== 👑 누리의 전설 — 프로필 사진에도 황금빛 =====
   이름도 금빛, 칭호도 금빛, 이제 사진 둘레도 금빛입니다.
   공개 칭호를 전부 모아야 얻는 칭호라 이 정도는 티가 나야죠.

   ⚠️ 테두리를 흐르는 그라디언트로 만들 수는 없었어요.
      .ua 는 사진을 동그랗게 자르려고 overflow:hidden 이라,
      안쪽에 넣은 고리가 잘려 나갑니다.
      대신 box-shadow 는 잘리지 않아서, 금빛 고리가 옅어졌다
      짙어졌다 하도록 했습니다 — '빛이 돈다' 는 느낌은 같아요. */
.ua-legend {
  box-shadow: 0 0 0 2px #f0c94a, 0 0 10px rgba(240, 201, 74, .6);
  animation: legend-ring 2.8s ease-in-out infinite;
}
@keyframes legend-ring {
  0%, 100% { box-shadow: 0 0 0 2px #c08d1f, 0 0 6px rgba(240, 201, 74, .40); }
  50%      { box-shadow: 0 0 0 2px #fff0bf, 0 0 16px rgba(255, 213, 100, .85); }
}
/* 프로필의 큰 사진은 원래 회색 테두리가 있어요. 금빛에 밀리지 않게 걷어냅니다 */
.pf-avatar.ua-legend { border-color: transparent; }

@media (prefers-reduced-motion: reduce) {
  .ua-legend { animation: none; box-shadow: 0 0 0 2px #e0b53a, 0 0 10px rgba(240, 201, 74, .6); }
}

/* 목록 위 오른쪽 단추들 (공지 숨기기 · 화제글 숨기기) */
.toolbar-btns { display: flex; gap: 6px; flex-wrap: wrap; }
/* 접어둔 상태 — 눌려 있다는 게 보이게 */
.hot-toggle.on {
  color: var(--brand); border-color: var(--brand);
  background: var(--chip-bg);
}

/* ⏫ 끌어올림 — '누리의 연대기'(게시글 3,000개) 칭호의 능력.
   운영진 고정('📌 고정')과 헷갈리지 않게 색을 나눴어요.
   고정은 노랑(운영진의 것), 끌어올림은 하늘빛(회원의 것)입니다. */
.evt-chip-boost {
  /* 어두운 끝(#3b82f6)에서 글씨 대비가 4.36 이라 살짝 모자랐어요 */
  background: linear-gradient(135deg, #a9d2fd, #60a5fa);
  color: #04204a; box-shadow: 0 1px 6px rgba(59, 130, 246, .35);
}
.boost-btn { color: #1d4ed8; border-color: #93c5fd; }
.boost-btn:disabled { opacity: .55; cursor: default; }

/* 🐾 동물별 펼치기 단추 (허브) — 헤더 메뉴의 '동물별' 과 같은 생김새 */
.hub-filter-toggle {
  display: inline-flex; align-items: center; gap: 6px;
  margin-bottom: 14px; padding: 8px 16px;
  font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  color: var(--text); background: var(--surface);
  border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
}
.hub-filter-toggle:hover { border-color: var(--brand); color: var(--brand); }
.hub-filter-toggle.on { border-color: var(--brand); color: var(--brand); background: var(--chip-bg); }
/* 펼쳐지면 화살표가 위를 봅니다 */
.hub-filter-toggle .navmenu-caret { transition: transform .18s ease; }
.hub-filter-toggle.on .navmenu-caret { transform: rotate(180deg); }
.hub-filter-toggle .emo { width: 1.1em; height: 1.1em; }
@media (prefers-reduced-motion: reduce) { .hub-filter-toggle .navmenu-caret { transition: none; } }

/* ==========================================================
   🎯 관심 분류 · 홈 개인화 카드
   ----------------------------------------------------------
   누리의 기존 값을 그대로 씁니다 (초록 포인트·둥근 14px·1.5px 테두리).
   홈에 카드가 하나 더 붙는 것뿐이라, 눈에 띄되 시끄럽지 않게 뒀어요.
   ========================================================== */
.mi-card {
  margin: 18px 0 4px; padding: 16px 18px;
  background: var(--surface); border: 1.5px solid var(--line); border-radius: 14px;
}
.mi-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.mi-head h2 { margin: 0; font-size: 1.0625rem; color: var(--heading); font-weight: 800; }
.mi-head h2 b { color: var(--brand); }
.mi-edit, .mi-seen, .mi-close {
  font-family: inherit; font-size: 13px; font-weight: 700; cursor: pointer;
  color: var(--text-muted); background: none; border: 1px solid var(--line);
  padding: 5px 11px; border-radius: 999px;
}
.mi-edit:hover, .mi-seen:hover { color: var(--brand); border-color: var(--brand); }
.mi-close { border: none; font-size: 1.25rem; line-height: 1; padding: 2px 6px; }

/* 분류 한 줄 — 누르면 그 게시판으로 */
.mi-rows { display: grid; gap: 6px; margin-top: 12px; }
.mi-row {
  display: flex; align-items: center; gap: 9px;
  padding: 10px 12px; border-radius: 11px; text-decoration: none;
  background: var(--chip-bg); color: inherit;
}
.mi-row:hover { background: var(--surface-2); }
.mi-row-ico { font-size: 19px; line-height: 1; flex: none; }
.mi-row-ico .emo { width: 19px; height: 19px; }
.mi-row-name { font-weight: 700; color: var(--heading); font-size: 0.9375rem; }
.mi-row-n { margin-left: auto; font-weight: 800; color: var(--brand); font-size: 0.9375rem; }
.mi-row-sub { font-size: 12.5px; color: var(--text-muted); flex: 0 0 auto; }
.mi-foot { display: flex; gap: 8px; margin-top: 12px; }
.mi-quiet { margin: 10px 0 0; font-size: 0.9375rem; line-height: 1.7; color: var(--text-muted); }

/* 고르는 화면 */
.mi-picker {
  margin: 18px 0 4px; padding: 16px 18px;
  background: var(--surface); border: 1.5px solid var(--brand); border-radius: 14px;
}
.mi-pick-lead { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.7; color: var(--text); }
.mi-pick-chips { display: flex; gap: 6px; flex-wrap: wrap; }
.mi-pick-foot { display: flex; gap: 8px; margin-top: 14px; }

@media (max-width: 600px) {
  .mi-card, .mi-picker { padding: 14px; }
  .mi-head h2 { font-size: 1rem; }
  /* 좁은 화면에서는 갈래 설명이 줄을 밀어내서 숨깁니다 */
  .mi-row-sub { display: none; }
}

/* 🐾 내 생물 태그 칩 — 글 목록·글 안에서 */
.evt-chip-pet {
  background: var(--chip-bg); color: var(--brand);
  border: 1px solid var(--brand); text-decoration: none;
}
.evt-chip-pet:hover { filter: brightness(.96); }

/* 🐾 이 아이와 관련해 쓴 글 (프로필 · 생물 상세 안) */
.pet-posts:empty { display: none; }
.pet-posts { margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line); }
.pet-posts-head { margin: 0 0 10px; font-size: 0.9375rem; color: var(--heading); }
.pet-posts-list { display: grid; gap: 6px; }
.pet-post {
  display: flex; flex-direction: column; gap: 2px;
  padding: 9px 12px; border-radius: 10px; text-decoration: none;
  background: var(--chip-bg); color: inherit;
}
.pet-post:hover { background: var(--surface-2); }
.pet-post-title { font-size: 0.9375rem; font-weight: 700; color: var(--heading); }
.pet-post-meta { font-size: 12.5px; color: var(--text-muted); }

/* 🐾 서랍 안의 '동물별' 펼치기 단추 — 다른 서랍 줄과 같은 생김새로,
   오른쪽 끝에 화살표만 붙였습니다. */
.drawer-toggle {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  width: 100%; font-family: inherit; text-align: left; cursor: pointer;
  background: none; border: none;
}
.drawer-toggle.on { color: var(--brand); background: var(--chip-bg); }
.drawer-toggle .navmenu-caret { transition: transform .18s ease; font-size: .8em; opacity: .7; }
.drawer-toggle.on .navmenu-caret { transform: rotate(180deg); }
/* 펼쳐진 분류 목록 — 한 칸 들여써서 '이 단추에 딸린 것' 임을 보여줍니다 */
.drawer-sub { display: flex; flex-direction: column; padding-left: 10px; }
.drawer-sub .drawer-link { font-size: 0.90625rem; padding: 11px 14px; }
/* 🧭 서랍 안 줄 이름표 — 머리띠의 1차 메뉴와 같은 묶음입니다.
   ⚠️ 누를 수 있게 만들지 마세요. 접힐 수 있는 것처럼 보이면
      눌러 보고 아무 일도 안 일어나는 순간 고장으로 읽힙니다.
   ⚠️ 첫 줄 위에는 여백을 주지 않습니다(:first-child) — 펼치자마자
      빈 칸이 뜨면 덜 만들어진 것처럼 보여요. */
.drawer-sub-head {
  padding: 12px 14px 4px;
  font-size: 0.71875rem; font-weight: 700;
  color: var(--text-muted); letter-spacing: .04em;
  /* 📌 스크롤해도 줄 이름표는 위에 남습니다.
     ---------------------------------------------------------
     ⚠️⚠️ 폰에서 '둘러보기' 를 펴면 목록이 **한 화면을 넘습니다**(360px 기준
        약 815px). 머리띠와 같은 지도를 서랍에도 넣어 달라고 하셔서 줄이
        아홉에서 열다섯으로 늘었거든요. 줄을 도로 줄이면 그 요청이 깨지고,
        접는 칸을 한 겹 더 만들면 게시판까지 세 번을 눌러야 합니다.
     → 그래서 길이는 그대로 두고 **길을 잃지 않게** 했습니다. 스크롤 중에도
        지금 보는 줄이 '정보' 인지 '업체 & 판매' 인지가 늘 위에 붙어 있어요.
     ⚠️ 바탕색을 꼭 칠해야 합니다 — 투명하면 아래 링크가 이름표를 뚫고
        지나가 겹쳐 보입니다. 서랍 바탕과 같은 --surface 를 씁니다.
     ⚠️ 스크롤 상자는 #drawer 입니다(.drawer-nav 가 아니라). top: 0 은
        서랍 맨 위를 뜻해요. */
  position: sticky; top: 0; z-index: 2;
  background: var(--surface);
}
.drawer-sub-head:first-child { padding-top: 4px; }
/* 🚪 이름표를 **눌러서 가는 줄**로.
   ---------------------------------------------------------
   ⚠️⚠️ 예전에는 그냥 글자였습니다. 그래서 서랍에서 「소라게 커뮤니티」 를
      눌러도 아무 일이 안 일어났어요 — 바로 아래 「커뮤니티 게시판」 을
      다시 찾아 눌러야 했습니다. 머리띠(PC)에서는 그 이름을 누르면 바로
      가는데 서랍만 안 갔습니다. 같은 이름이 자리에 따라 다르게 굴면
      "아까는 됐는데" 가 됩니다.
   ⚠️ 줄을 **새로 늘리지 않았습니다.** 이미 있던 이름표가 링크가 된 것뿐이라
      서랍 길이는 그대로예요.
   ⚠️ 누를 수 있으면 누를 수 있게 보여야 합니다 — 끝의 「›」 와 손끝 자리가
      그 신호입니다. 색·글자 크기는 그대로 둬서 '이름표' 라는 성격은
      유지합니다(메뉴 줄로 승격시키면 아래 줄들과 구분이 사라져요). */
.drawer-sub-go {
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
  /* 손끝이 닿을 자리 — 아래 여백을 4px → 10px 로만 넓힙니다 */
  padding-bottom: 10px;
  cursor: pointer;
}
.drawer-sub-go .dsh-go { font-size: 0.875rem; opacity: .55; font-weight: 800; }
.drawer-sub-go:hover { color: var(--brand); }
.drawer-sub-go:hover .dsh-go { opacity: 1; }
.drawer-sub-go:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; border-radius: 8px; }
@media (prefers-reduced-motion: reduce) { .drawer-toggle .navmenu-caret { transition: none; } }

/* ☰ 서랍 — 갈래 나누기
   ⚠️ '내 누리' 는 로그인한 분에게만 뜹니다 (main.js 가 hidden 을 풀어요). */
.drawer-mine[hidden], .drawer-out[hidden] { display: none; }
.drawer-mine, .drawer-out { display: flex; flex-direction: column; }
/* 단추인데 링크처럼 보이는 줄 (화면 설정·로그아웃) */
.drawer-actish, .drawer-logout {
  display: block; width: 100%; text-align: left;
  font-family: inherit; background: none; border: none; cursor: pointer;
}
.drawer-logout { color: var(--text-muted); }
.drawer-logout:hover { color: #dc2626; background: var(--chip-bg); }

/* 🕒 최근 본 글 */
.recent-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }
.recent-head h3 { margin: 0; }
.recent-clear { position: static; font-size: 12.5px; padding: 4px 10px; border-radius: 999px; }
.recent-note { margin: 4px 0 10px; font-size: 12.5px; color: var(--text-muted); }
.recent-when { margin-left: auto; font-size: 12.5px; color: var(--text-muted); flex: 0 0 auto; }

/* ==========================================================
   ⚠️ 놀랄 수 있는 사진 가리기
   ----------------------------------------------------------
   사체·쉘 이탈·상처 사진은 다음 사람을 살리는 정보지만,
   준비 없이 마주치면 힘든 분들이 있어요.
   글은 그대로 두고 사진만 한 겹 덮어, 볼지 말지 고를 기회를 드립니다.
   ========================================================== */
/* 목록의 작은 미리보기 — 누르는 것 없이 흐리게만 (제목은 그대로 읽혀요) */
.pthumb.sens-thumb img,
.pthumb.sens-thumb video { filter: blur(7px); transform: scale(1.1); }
.pthumb.sens-thumb { position: relative; overflow: hidden; }
.pthumb.sens-thumb::after {
  content: "⚠️"; position: absolute; inset: 0;
  display: grid; place-items: center; font-size: 18px;
  background: rgba(0, 0, 0, .18);
}

/* 글 안의 사진 — 덮개를 씌웁니다 */
.detail-content { position: relative; }
.detail-content.sens-blur img:not(.emo),
.detail-content.sens-blur video { filter: blur(22px); }
.sens-cover {
  position: absolute; inset: 0; display: grid; place-items: center;
  padding: 16px; border-radius: 12px;
  background: rgba(20, 24, 22, .55);
  /* 덮개는 사진 위에만 — 글씨는 뒤에서 그대로 읽혀요 */
  backdrop-filter: blur(2px);
}
.sens-box {
  max-width: 320px; text-align: center;
  padding: 20px 22px; border-radius: 14px;
  background: var(--surface); border: 1.5px solid var(--line);
  box-shadow: 0 10px 30px rgba(0, 0, 0, .35);
}
.sens-ico { font-size: 30px; line-height: 1; margin-bottom: 8px; }
.sens-ico .emo { width: 30px; height: 30px; }
.sens-title { margin: 0 0 4px; font-size: 1rem; font-weight: 800; color: var(--heading); }
.sens-note {
  margin: 0 0 8px; font-size: 0.875rem; font-weight: 700; color: var(--brand);
}
.sens-sub { margin: 0 0 14px; font-size: 0.8125rem; line-height: 1.6; color: var(--text-muted); }

/* 글쓰기의 주의 표시 칸 */
.warn-row { margin: 4px 0 14px; }
.warn-check {
  display: flex; align-items: flex-start; gap: 9px; cursor: pointer;
  padding: 11px 13px; border-radius: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.warn-check:hover { border-color: var(--brand); }
.warn-check input { margin-top: 2px; width: 17px; height: 17px; flex: none; }
.warn-check b { display: block; font-size: 0.90625rem; color: var(--heading); }
.warn-check small { display: block; margin-top: 3px; font-size: 12.5px; line-height: 1.6; color: var(--text-muted); }
.warn-note {
  width: 100%; margin-top: 8px; padding: 10px 12px;
  font-family: inherit; font-size: 0.875rem; color: var(--text);
  background: var(--surface); border: 1px solid var(--line); border-radius: 10px;
}
.warn-note:focus { outline: none; border-color: var(--brand); }

/* 목록·글 안의 ⚠️ 주의 칩 — 겁주지 않게 차분한 호박색 */
.evt-chip-warn {
  background: #fde68a; color: #6b4a12;
  box-shadow: 0 1px 4px rgba(180, 130, 20, .28);
}
:root:not([data-theme="light"]) .evt-chip-warn { background: #f5d78e; color: #4a3208; }

@media (prefers-reduced-motion: reduce) { .pthumb.sens-thumb img { transform: none; } }

/* =========================================================
   🔍 통합 검색 결과 화면
   ---------------------------------------------------------
   검색 결과와 '추천'을 확실히 갈라 놓는 것이 이 화면의 핵심입니다.
   추천을 검색 결과로 오해하면, 없는 정보를 있다고 잘못 배우게 돼요.
   ========================================================= */
.sr-head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 10px; margin-bottom: 14px; }
.sr-title { font-size: 1.25rem; margin: 0; color: var(--heading); }
.sr-total { font-size: 0.9375rem; color: var(--text-muted); }
.sr-total b { color: var(--brand); font-size: 1.0625rem; }
.sr-flag {
  font-size: 0.75rem; font-weight: 700; color: var(--brand);
  background: var(--chip-bg); padding: 3px 10px; border-radius: 999px;
}
.recent-title { font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); }

/* 검색어 색칠 — 배경만 옅게, 글자색은 그대로 두어 어느 테마에서도 읽힙니다 */
mark.sr-hit {
  background: var(--chip-bg); color: var(--brand);
  padding: 0 2px; border-radius: 4px; font-weight: 800;
}

/* 분류 탭 — 모바일에서는 가로로 밀어 봅니다 */
.sr-tabs {
  display: flex; gap: 8px; margin-bottom: 18px; padding-bottom: 4px;
  overflow-x: auto; -webkit-overflow-scrolling: touch; scrollbar-width: none;
}
.sr-tabs::-webkit-scrollbar { display: none; }
.sr-tab {
  flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 0.875rem; font-weight: 700;
  transition: border-color .15s, background .15s, color .15s;
}
.sr-tab:hover { border-color: var(--brand-soft); }
.sr-tab.active { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
.sr-tab-n { font-size: 0.75rem; font-weight: 800; opacity: .85; }

/* 혹시 이것을 찾으시나요? */
.sr-ask {
  border: 1px solid var(--brand-soft); background: var(--chip-bg);
  border-radius: 14px; padding: 14px 16px; margin-bottom: 16px;
}
.sr-ask-head { margin: 0 0 10px; font-size: 0.9375rem; font-weight: 800; color: var(--heading); }
.sr-ask-list { display: flex; flex-wrap: wrap; gap: 8px; }
.sr-ask-btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 7px 14px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--brand-soft);
  color: var(--brand); font-weight: 800; font-size: 0.9375rem;
}
.sr-ask-btn:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }

/* 오타로 찾아 준 결과라는 알림 */
.sr-fuzzy {
  margin: 0 0 16px; padding: 10px 14px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--line);
  font-size: 0.875rem; color: var(--text-muted);
}
.sr-fuzzy b { color: var(--heading); }

.si-meta { font-size: 0.75rem; color: var(--text-muted); }
.si-warn { background: rgba(214, 132, 26, .14); color: #8a5a10; }
.sr-none { padding: 34px 16px; }
.sr-none .btn { margin-top: 14px; }

/* 추천 — 검색 결과와 눈에 띄게 갈라 둡니다 */
.sr-rec { margin-top: 34px; }
.sr-rec-line { height: 1px; background: var(--line); margin-bottom: 24px; }
.sr-rec-head { font-size: 1rem; color: var(--heading); margin: 0 0 10px; }
.sr-rec-note { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 12px; }
.sr-goto-row { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 26px; }
.sr-goto {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-radius: 14px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--heading); font-weight: 700; font-size: 0.9375rem;
}
.sr-goto:hover { border-color: var(--brand); color: var(--brand); }

@media (prefers-color-scheme: dark) {
  .si-warn { color: #f0c070; }
}
:root[data-theme="dark"] .si-warn { color: #f0c070; }

/* 🔎 검색창 자동완성 목록 */
.sug-box {
  position: absolute; left: 0; right: 0; top: calc(100% + 6px); z-index: 60;
  background: var(--surface); border: 1px solid var(--line); border-radius: 14px;
  box-shadow: var(--shadow-md, 0 10px 30px rgba(0,0,0,.12));
  padding: 6px; max-height: min(60vh, 380px); overflow-y: auto;
}
.sug-box[hidden] { display: none; }
.sug-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px;
  color: var(--text); font-size: 0.9375rem; text-decoration: none;
}
.sug-row.on, .sug-row:hover { background: var(--chip-bg); color: var(--brand); }
.sug-ico { flex: 0 0 auto; font-size: 0.9375rem; }
.sug-label { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   🛠️ 관리 — 대시보드 · 감사 로그 · 제재 기록 · 검색 분석
   ========================================================= */
.dash-todos { display: flex; flex-wrap: wrap; gap: 10px; margin-bottom: 20px; }
.dash-todo {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 15px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--brand-soft);
  color: var(--heading); font-weight: 700; font-size: 0.9375rem;
}
.dash-todo b { color: var(--brand); }
a.dash-todo:hover { background: var(--brand); border-color: var(--brand); color: var(--on-brand, #fff); }
a.dash-todo:hover b { color: var(--on-brand, #fff); }
.dash-clear { color: var(--text-muted); font-size: 0.9375rem; margin: 0 0 20px; }

.dash-grid {
  display: grid; gap: 12px; margin-bottom: 16px;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
}
.dash-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: 16px; padding: 16px; text-align: center;
}
.dash-ico { font-size: 1.375rem; }
.dash-n { font-size: 1.625rem; font-weight: 800; color: var(--heading); line-height: 1.2; margin-top: 4px; }
.dash-label { font-size: 0.8125rem; font-weight: 700; color: var(--text-muted); margin-top: 2px; }
.dash-sub { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; opacity: .85; }
.dash-grid-sm .dash-n { font-size: 1.25rem; }

.dash-block { margin-top: 26px; }
.dash-block h3 { font-size: 1rem; color: var(--heading); margin: 0 0 6px; }
.dash-note { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 12px; }

.dash-zero { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 6px; }
.dash-zero li {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 13px; border-radius: 12px; background: var(--surface-2);
}
.dash-zero a { font-weight: 700; color: var(--heading); }
.dash-zero a:hover { color: var(--brand); }
.dash-zero span { font-size: 0.75rem; color: var(--text-muted); flex: 0 0 auto; }

.dash-log { list-style: none; padding: 0; margin: 0; display: flex; flex-direction: column; gap: 4px; }
.dash-log li {
  display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
  padding: 9px 13px; border-radius: 12px; background: var(--surface-2); font-size: 0.875rem;
}
.dash-log b { color: var(--heading); }
.dash-log time { margin-left: auto; font-size: 0.75rem; color: var(--text-muted); }
.dash-act, .adm-act {
  background: var(--chip-bg); color: var(--brand);
  padding: 2px 9px; border-radius: 999px; font-size: 0.75rem; font-weight: 800;
}
.dash-tgt, .adm-tgt { color: var(--text-muted); font-size: 0.8125rem; }

.adm-sub { font-size: 0.9375rem; color: var(--heading); margin: 26px 0 4px; }
.adm-when { white-space: nowrap; font-size: 0.8125rem; color: var(--text-muted); }
.adm-role { font-size: 0.6875rem; color: var(--text-muted); }
.adm-detail { font-size: 0.8125rem; color: var(--text-muted); }
.adm-audit td { vertical-align: top; }
.adm-pager { display: flex; align-items: center; justify-content: center; gap: 14px; margin-top: 16px; font-size: 0.875rem; color: var(--text-muted); }

/* 제재 종류 — 무거운 것일수록 짙게 */
.sanc-kind { padding: 2px 10px; border-radius: 999px; font-size: 0.75rem; font-weight: 800; white-space: nowrap; }
.sanc-warn { background: rgba(214,132,26,.16); color: #8a5a10; }
.sanc-mute_comment, .sanc-mute_post { background: rgba(214,132,26,.22); color: #7a4e0c; }
.sanc-suspend { background: rgba(190,58,58,.16); color: #9d2b2b; }
.sanc-ban { background: rgba(150,28,28,.2); color: #7d1d1d; }
.sanc-done { opacity: .6; }
.sanc-lifted { font-size: 0.8125rem; color: var(--text-muted); }

.alias-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 12px 0 16px; }
.alias-form input {
  flex: 1 1 180px; min-width: 0; padding: 9px 13px; border-radius: 10px;
  border: 1px solid var(--line); background: var(--surface); color: var(--text); font-size: 0.9375rem;
}
.alias-form input:focus { outline: none; border-color: var(--brand); }

@media (prefers-color-scheme: dark) {
  .sanc-warn { color: #f0c070; }
  .sanc-mute_comment, .sanc-mute_post { color: #f0b458; }
  .sanc-suspend { color: #ff9b9b; }
  .sanc-ban { color: #ffb3b3; }
}
:root[data-theme="dark"] .sanc-warn { color: #f0c070; }
:root[data-theme="dark"] .sanc-mute_comment,
:root[data-theme="dark"] .sanc-mute_post { color: #f0b458; }
:root[data-theme="dark"] .sanc-suspend { color: #ff9b9b; }
:root[data-theme="dark"] .sanc-ban { color: #ffb3b3; }

@media (max-width: 640px) {
  .dash-grid { grid-template-columns: repeat(2, 1fr); }
  .dash-log time { margin-left: 0; width: 100%; }
}
.sr-capped { font-size: 0.8125rem; color: var(--text-muted); margin: 0 0 14px; }

/* =========================================================
   📱 모바일 손질 — 여백과 메뉴 줄바꿈
   ---------------------------------------------------------
   · 글자가 화면 가장자리에 붙지 않게 여백을 조금 더 줍니다.
   · 위쪽 메뉴(홈·동물별·정보…)는 옆으로 길게 밀지 않고
     두세 줄로 접어서 한눈에 다 보이게 합니다.
     항목이 9개라 폰에서는 924px 이 되어 네 개밖에 안 보였어요.
   ========================================================= */
@media (max-width: 720px) {
  .container { padding: 0 22px; }

  /* 메뉴 줄 — 옆으로 밀지 말고 접기 */
  .category-bar > .container { padding: 0 12px; }
  .cat-bar-inner {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    row-gap: 0; column-gap: 2px;
    padding: 2px 0;
  }
  .cat-bar-inner a,
  .cat-bar-inner > button {
    padding: 9px 11px;
    font-size: 0.875rem;
    border-bottom-width: 2px;
  }
  /* '업체와의 만남' 을 오른쪽 끝으로 밀던 규칙 — 접을 때는 방해가 됩니다 */
  .cat-bar-inner a.cat-shops { margin-left: 0; }

  /* 홈 큰 문구 — 폰에서는 가운데로 모읍니다 */
  .hero-inner { padding-top: 30px; }
  .hero h1, .hero .lead { text-align: center; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .hero-cta { justify-content: center; }
}

@media (max-width: 400px) {
  .cat-bar-inner a,
  .cat-bar-inner > button { padding: 8px 9px; font-size: 0.84375rem; }
}

/* 인트로는 화면 아무 곳이나 눌러서 건너뛸 수 있어요 */
.intro { cursor: pointer; -webkit-tap-highlight-color: transparent; }
.intro-hint { pointer-events: none; }

/* 📱 '동물별' 패널 — 폰에서는 긴 이름이 칸을 넘지 않게 접습니다.
   ('식물 & 비바/테라리움' 이 163px 칸에서 213px 로 삐져나왔어요)
   '준비 중' 칩은 flex:none 이라 통째로 유지됩니다. */
@media (max-width: 720px) {
  .species-panel-grid .navmenu-item,
  .species-panel-grid .cat-soon-link { white-space: normal; align-items: flex-start; }
  .species-panel-grid .cat-soon-link .soon-mini { margin-top: 1px; }
}

/* 📱 이용 안내 탭 — 폰에서는 옆으로 밀지 말고 접습니다.
   항목이 11개라 1364px 이 되어, 폰에서는 서너 개밖에 안 보였어요.
   가로로 미는 줄은 "뒤에 더 있다" 는 걸 알아채기 어렵습니다. */
@media (max-width: 720px) {
  #infoTabs {
    flex-wrap: wrap;
    overflow-x: visible;
    justify-content: center;
    padding-bottom: 0;
    row-gap: 8px;
  }
  #infoTabs .chip { font-size: 0.84375rem; padding: 7px 12px; }
}

/* =========================================================
   🙋 '가이드 여기 있어요' 쪽지 (첫 방문에만)
   ---------------------------------------------------------
   ⚠️ 오른쪽 아래는 '위로' 단추(.to-top)가 쓰고 있어서
      왼쪽 아래에 둡니다. 폰에서는 그 단추 자리를 비워 둬요.
   ========================================================= */
.guide-tip {
  position: fixed; left: 20px; bottom: 20px; z-index: 878;
  display: flex; gap: 12px; align-items: flex-start;
  width: 320px; max-width: calc(100vw - 40px);
  padding: 16px 18px 16px 16px;
  background: var(--surface); border: 1px solid var(--brand-soft);
  border-radius: 18px; box-shadow: 0 12px 34px rgba(0,0,0,.16);
  opacity: 0; transform: translateY(14px);
  transition: opacity .26s ease, transform .26s ease;
}
.guide-tip.on { opacity: 1; transform: translateY(0); }
.guide-tip-ico { font-size: 1.75rem; line-height: 1; flex: 0 0 auto; }
.guide-tip-body { min-width: 0; }
.guide-tip-title { margin: 0; font-size: 1rem; font-weight: 800; color: var(--heading); }
.guide-tip-desc { margin: 4px 0 12px; font-size: 0.875rem; line-height: 1.5; color: var(--text-muted); }
.guide-tip-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.guide-tip-go {
  padding: 8px 16px; border-radius: 999px; border: none; cursor: pointer;
  background: var(--brand); color: var(--on-brand, #fff);
  font-family: inherit; font-size: 0.875rem; font-weight: 800;
}
.guide-tip-go:hover { filter: brightness(1.06); }
.guide-tip-later {
  padding: 8px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: none; color: var(--text-muted);
  font-family: inherit; font-size: 0.875rem; font-weight: 700;
}
.guide-tip-later:hover { color: var(--heading); background: var(--surface-2); }
.guide-tip-x {
  position: absolute; top: 8px; right: 10px;
  width: 26px; height: 26px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.125rem; line-height: 1; border-radius: 50%;
}
.guide-tip-x:hover { background: var(--surface-2); color: var(--heading); }

@media (max-width: 720px) {
  .guide-tip {
    left: 12px; right: 66px;          /* 오른쪽은 '위로' 단추 자리로 비워 둡니다 */
    bottom: 14px; width: auto; max-width: none;
    padding: 14px 16px 14px 14px; border-radius: 16px;
  }
  .guide-tip-ico { font-size: 1.5rem; }
  .guide-tip-title { font-size: 0.9375rem; }
  .guide-tip-desc { font-size: 0.84375rem; margin-bottom: 10px; }
}

/* 움직임을 줄여달라고 하신 분께는 스르륵 없이 바로 */
@media (prefers-reduced-motion: reduce) {
  .guide-tip { transition: none; }
}

/* 📥 문의함 — 처리 상태가 한눈에 보이게 */
.inbox-head { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.inbox-badge {
  font-size: 0.6875rem; font-weight: 800; padding: 2px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
}
.inbox-badge-new { background: var(--chip-bg); color: var(--brand); }
.inbox-btn { margin-left: auto; }
.inbox-done { opacity: .62; }
.inbox-done:hover { opacity: 1; }
@media (max-width: 560px) {
  .inbox-btn { margin-left: 0; }
}

/* 햄버거에서 특정 칸으로 데려다줬을 때, 여기라고 잠깐 알려 줍니다 */
.jump-here {
  animation: jump-here-glow 1.6s ease-out 1;
  border-radius: 18px;
}
@keyframes jump-here-glow {
  0%   { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 45%, transparent); }
  35%  { box-shadow: 0 0 0 8px color-mix(in srgb, var(--brand) 22%, transparent); }
  100% { box-shadow: 0 0 0 0 transparent; }
}
@media (prefers-reduced-motion: reduce) {
  .jump-here { animation: none; outline: 2px solid var(--brand-soft); outline-offset: 4px; }
}

/* =========================================================
   ✨ 관리자가 지정한 빛깔 — 어두운 화면에서도 확실히 돌게
   ---------------------------------------------------------
   붉은빛(전체 공지)에만 어두운 테마 보정이 있었어요.
   금·파랑·초록은 옅어서 어두운 배경에 묻혔습니다.
   같은 눈에 띔을 갖도록 맞춥니다.
   ⚠️ 목록에서만입니다. 글에 들어가면 이미 그 글만 보고 있으니
      본문 전체를 물들일 이유가 없어요.
   ========================================================= */
:root:not([data-theme="light"]) .post-item.glow-gold {
  background: linear-gradient(180deg, rgba(255, 215, 100, .20), var(--surface));
  border-color: #f0c33c;
}
:root:not([data-theme="light"]) .post-item.glow-blue {
  background: linear-gradient(180deg, rgba(59, 130, 246, .20), var(--surface));
  border-color: #5b9bff;
}
:root:not([data-theme="light"]) .post-item.glow-green {
  background: linear-gradient(180deg, rgba(34, 197, 94, .20), var(--surface));
  border-color: #3ddc7a;
}

/* 빛이 훑고 지나갈 때 테두리도 함께 숨 쉬게 — '빛이 돈다'는 느낌 */
@keyframes glowBreathe {
  0%, 100% { box-shadow: 0 0 0 0 transparent; }
  20%      { box-shadow: 0 0 14px 1px var(--glow-hue); }
  55%      { box-shadow: 0 0 0 0 transparent; }
}
.post-item.glow-gold  { --glow-hue: rgba(230, 180, 34, .55); animation: glowBreathe 7s ease-in-out infinite; }
.post-item.glow-blue  { --glow-hue: rgba(59, 130, 246, .50); animation: glowBreathe 7s ease-in-out infinite; }
.post-item.glow-green { --glow-hue: rgba(34, 197, 94, .50);  animation: glowBreathe 7s ease-in-out infinite; }
.post-item.glow-red   { --glow-hue: rgba(248, 113, 113, .50); animation: glowBreathe 7s ease-in-out infinite; }

@media (prefers-reduced-motion: reduce) {
  .post-item.glow-gold, .post-item.glow-blue,
  .post-item.glow-green, .post-item.glow-red { animation: none; }
}

/* =========================================================
   📜 커뮤니티 이용 규칙
   ---------------------------------------------------------
   관리자가 직접 쓴 글이라, 목록처럼 딱딱하게 자르지 않고
   편지처럼 읽히도록 문단 사이를 넉넉히 둡니다.
   ========================================================= */
.rule-intro p, .rule-item p, .rule-outro p {
  margin: 0 0 12px; line-height: 1.85; color: var(--text); font-size: 0.96875rem;
}
.rule-intro p:last-child, .rule-item p:last-child, .rule-outro p:last-child { margin-bottom: 0; }
.rule-intro { border-left: 3px solid var(--brand-soft); padding-left: 16px; }

.rule-item h3 {
  display: flex; align-items: flex-start; gap: 10px;
  font-size: 1.0625rem; line-height: 1.5; color: var(--heading); margin: 0 0 14px;
}
.rule-no {
  flex: 0 0 auto; width: 28px; height: 28px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--brand); color: var(--on-brand, #fff);
  font-size: 0.875rem; font-weight: 800;
}
.rule-item .info-list { margin: 10px 0 14px; }

.rule-outro {
  border-top: 1px dashed var(--line); padding-top: 18px;
  color: var(--text-muted);
}
.rule-sign { margin-top: 12px !important; text-align: right; color: var(--text-muted); }
.rule-sign b { color: var(--brand); }

@media (max-width: 560px) {
  .rule-item h3 { font-size: 1rem; }
  .rule-intro { padding-left: 12px; }
}

/* =========================================================
   🌏 전체 공지 — 루비빛으로 반짝이게
   ---------------------------------------------------------
   옅은 붉은빛으로 두었더니 목록에서 거의 티가 나지 않았어요.
   운영진 뱃지에 쓰는 것과 같은 '루비' 로 맞춥니다.
   테두리 둘레로 루비빛이 천천히 밝아졌다 잦아들고,
   그 위로 빛이 한 번씩 스윽 훑고 지나갑니다.

   ⚠️ 글을 열었을 때는 넣지 않습니다. 목록에서 눈에 띄라고 있는 것이고,
      본문 전체가 붉게 물들면 오히려 읽기 불편해요.
   ========================================================= */
.post-item.glow-red {
  border: 2px solid #d81e50;
  background: linear-gradient(180deg, rgba(225, 29, 72, .13), var(--surface));
  animation: rubyRowAura 3s ease-in-out infinite;
}
:root:not([data-theme="light"]) .post-item.glow-red {
  border-color: #f43f5e;
  background: linear-gradient(180deg, rgba(244, 63, 94, .20), var(--surface));
}

@keyframes rubyRowAura {
  0%, 100% { box-shadow: 0 1px 5px rgba(136, 19, 55, .30), 0 0 6px rgba(225, 29, 72, .28); }
  50%      { box-shadow: 0 1px 8px rgba(136, 19, 55, .48), 0 0 20px 2px rgba(244, 63, 94, .62); }
}

/* 훑고 지나가는 빛도 루비빛으로 */
.post-item.glow-red::after {
  background: linear-gradient(90deg, transparent, rgba(255, 190, 205, .95), transparent);
}

@media (prefers-reduced-motion: reduce) {
  .post-item.glow-red { animation: none; box-shadow: 0 0 12px rgba(244, 63, 94, .45); }
}

/* 허브 도구줄의 글쓰기 단추 — 정렬 칩과 화제글 단추 사이 */
.list-toolbar .hub-write { margin-left: auto; margin-right: 8px; flex: 0 0 auto; }
@media (max-width: 560px) {
  .list-toolbar .hub-write { margin-left: 0; margin-right: 0; }
}

/* =========================================================
   ✨ 허브 목록에도 같은 빛깔
   ---------------------------------------------------------
   ⚠️ 빛깔 규칙이 게시판 목록(.post-item)에만 있었습니다.
      허브는 .hub-item 이라는 다른 틀로 그려서, 똑같은 전체 공지인데도
      여기서는 아무 빛도 돌지 않았어요.
      '어디서 보든 같은 글은 같아 보여야' 합니다.
   ========================================================= */
.hub-item.glow-red,
.hub-item.glow-gold,
.hub-item.glow-blue,
.hub-item.glow-green {
  position: relative; overflow: hidden; border-width: 2px;
}
/* 글자·사진이 빛에 묻히지 않게 위로 */
.hub-item[class*="glow-"] > .hub-thumb,
.hub-item[class*="glow-"] > .hub-body { position: relative; z-index: 1; }

/* 훑고 지나가는 빛 (게시판 목록과 같은 움직임) */
.hub-item[class*="glow-"]::after {
  content: ""; position: absolute; top: -60%; left: 0; width: 50%; height: 220%;
  transform: translateX(-160%) rotate(8deg); pointer-events: none; z-index: 0;
  animation: eventSweep 7s ease-in-out infinite;
}

/* 🌏 전체 공지 — 루비 */
.hub-item.glow-red {
  border-color: #d81e50;
  background: linear-gradient(180deg, rgba(225, 29, 72, .13), var(--surface));
  animation: rubyRowAura 3s ease-in-out infinite;
}
.hub-item.glow-red::after { background: linear-gradient(90deg, transparent, rgba(255, 190, 205, .95), transparent); }
:root:not([data-theme="light"]) .hub-item.glow-red {
  border-color: #f43f5e;
  background: linear-gradient(180deg, rgba(244, 63, 94, .20), var(--surface));
}

/* 관리자가 고른 빛깔 */
.hub-item.glow-gold {
  border-color: #e6b422;
  background: linear-gradient(180deg, rgba(255, 215, 100, .14), var(--surface));
  --glow-hue: rgba(230, 180, 34, .55); animation: glowBreathe 7s ease-in-out infinite;
}
.hub-item.glow-gold::after { background: linear-gradient(90deg, transparent, rgba(255, 241, 186, .92), transparent); }
.hub-item.glow-blue {
  border-color: #3b82f6;
  background: linear-gradient(180deg, rgba(59, 130, 246, .12), var(--surface));
  --glow-hue: rgba(59, 130, 246, .50); animation: glowBreathe 7s ease-in-out infinite;
}
.hub-item.glow-blue::after { background: linear-gradient(90deg, transparent, rgba(147, 197, 253, .85), transparent); }
.hub-item.glow-green {
  border-color: #22c55e;
  background: linear-gradient(180deg, rgba(34, 197, 94, .12), var(--surface));
  --glow-hue: rgba(34, 197, 94, .50); animation: glowBreathe 7s ease-in-out infinite;
}
.hub-item.glow-green::after { background: linear-gradient(90deg, transparent, rgba(134, 239, 172, .9), transparent); }

:root:not([data-theme="light"]) .hub-item.glow-gold  { background: linear-gradient(180deg, rgba(255, 215, 100, .20), var(--surface)); border-color: #f0c33c; }
:root:not([data-theme="light"]) .hub-item.glow-blue  { background: linear-gradient(180deg, rgba(59, 130, 246, .20), var(--surface)); border-color: #5b9bff; }
:root:not([data-theme="light"]) .hub-item.glow-green { background: linear-gradient(180deg, rgba(34, 197, 94, .20), var(--surface)); border-color: #3ddc7a; }

@media (prefers-reduced-motion: reduce) {
  .hub-item[class*="glow-"] { animation: none; }
  .hub-item[class*="glow-"]::after { animation: none; }
  .hub-item.glow-red { box-shadow: 0 0 12px rgba(244, 63, 94, .45); }
}

/* =========================================================
   🚨 신고 창
   ---------------------------------------------------------
   무섭게 보이지 않게 — 붉은 경고색으로 도배하지 않습니다.
   "처벌하겠다" 가 아니라 "한 번 봐 주세요" 니까요.
   ========================================================= */
.rp-back {
  position: fixed; inset: 0; z-index: 950;
  background: rgba(0, 0, 0, .45);
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
}
.rp-modal {
  position: relative; width: 100%; max-width: 420px;
  max-height: min(86vh, 700px); overflow-y: auto;
  background: var(--surface); border-radius: 20px;
  padding: 24px 22px 20px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, .3);
}
.rp-x {
  position: absolute; top: 12px; right: 14px;
  width: 30px; height: 30px; border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-size: 1.375rem; line-height: 1; border-radius: 50%;
}
.rp-x:hover { background: var(--surface-2); color: var(--heading); }
.rp-title { margin: 0 0 6px; font-size: 1.0625rem; color: var(--heading); }
.rp-target {
  margin: 0 0 12px; padding: 8px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 0.84375rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.rp-lead { margin: 0 0 14px; font-size: 0.875rem; line-height: 1.6; color: var(--text-muted); }
.rp-done { margin: 12px 0 4px; font-size: 0.9375rem; line-height: 1.7; color: var(--text); text-align: center; }

.rp-reasons { display: flex; flex-direction: column; gap: 2px; margin-bottom: 12px; }
.rp-reason {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border-radius: 10px; cursor: pointer;
  font-size: 0.90625rem; color: var(--text);
}
.rp-reason:hover { background: var(--surface-2); }
.rp-reason input { accent-color: var(--brand); flex: none; }
.rp-reason:has(input:checked) { background: var(--chip-bg); color: var(--brand); font-weight: 700; }

.rp-detail {
  width: 100%; min-height: 76px; resize: vertical;
  padding: 10px 12px; border-radius: 10px; margin-bottom: 12px;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-family: inherit; font-size: 0.90625rem; line-height: 1.6;
}
.rp-detail:focus { outline: none; border-color: var(--brand); }
.rp-detail[hidden] { display: none; }

.rp-note {
  margin: 0 0 16px; padding: 10px 12px; border-radius: 10px;
  background: var(--surface-2); font-size: 0.78125rem; line-height: 1.6; color: var(--text-muted);
}
.rp-acts { display: flex; gap: 8px; justify-content: flex-end; }

/* 신고 단추 — 조용하게 */
.report-btn {
  border: none; background: none; cursor: pointer;
  color: var(--text-muted); font-family: inherit; font-size: 0.78125rem;
  padding: 4px 8px; border-radius: 8px; opacity: .7;
}
.report-btn:hover { opacity: 1; color: #c2410c; background: var(--surface-2); }

@media (max-width: 480px) {
  .rp-modal { padding: 20px 18px 16px; border-radius: 18px; }
  .rp-acts { flex-direction: column-reverse; }
  .rp-acts .btn { width: 100%; }
}

/* ☰ 서랍 안의 설정 항목 — 팝업보다 조금 촘촘하게 */
.drawer-settings { padding-left: 6px; }
.drawer-settings .set-sec { padding: 10px 8px 4px; }
.drawer-settings .set-label { font-size: 0.75rem; margin-bottom: 6px; }
.drawer-settings .set-chips { gap: 6px; }
.drawer-settings .set-chip { font-size: 0.84375rem; padding: 7px 10px; }
.drawer-settings .set-note { font-size: 0.71875rem; margin-top: 6px; }
.drawer-settings .set-links { border-top: 1px solid var(--line); margin-top: 6px; padding-top: 10px; }
.drawer-settings .set-links a { display: block; padding: 8px 6px; font-size: 0.90625rem; color: var(--text); }
.drawer-settings .set-links a:hover { color: var(--brand); }

/* =========================================================
   🚨 신고 센터 (관리 탭)
   ========================================================= */
.adm-report tbody tr { cursor: pointer; }
.adm-report tbody tr:hover { background: var(--surface-2); }
.rp-label { max-width: 240px; }
.rp-count {
  display: inline-block; margin-left: 6px; padding: 1px 8px; border-radius: 999px;
  background: rgba(225, 29, 72, .14); color: #9d2b2b;
  font-size: 0.6875rem; font-weight: 800;
}
.rp-reason { font-size: 0.84375rem; }
.rp-detail-txt { font-size: 0.75rem; color: var(--text-muted); margin-top: 2px; }
.rp-status {
  display: inline-block; padding: 2px 9px; border-radius: 999px;
  font-size: 0.71875rem; font-weight: 800; white-space: nowrap;
}
.rp-new       { background: rgba(225, 29, 72, .16); color: #9d2b2b; }
.rp-reviewing { background: rgba(214, 132, 26, .16); color: #8a5a10; }
.rp-done      { background: var(--chip-bg); color: var(--brand); }
.rp-rejected  { background: var(--surface-2); color: var(--text-muted); }
.rp-acted { font-size: 0.6875rem; color: var(--text-muted); margin-top: 2px; }
.rp-hint { font-size: 0.8125rem; color: var(--text-muted); margin-top: 10px; }

.rp-panel {
  margin-top: 20px; padding: 18px; border-radius: 16px;
  background: var(--surface-2); border: 1px solid var(--line);
}
.rp-panel h4 { margin: 0 0 14px; font-size: 1rem; color: var(--heading); }
.rp-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.rp-k { font-size: 0.71875rem; font-weight: 800; color: var(--text-muted); margin-top: 10px; }
.rp-k:first-child { margin-top: 0; }
.rp-v { font-size: 0.875rem; color: var(--text); line-height: 1.6; }
.rp-snap-body {
  margin-top: 6px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface); font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6;
}
.rp-sec { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.rp-hist { list-style: none; padding: 0; margin: 6px 0 0; display: flex; flex-direction: column; gap: 4px; }
.rp-hist li { font-size: 0.8125rem; color: var(--text-muted); padding: 5px 10px; background: var(--surface); border-radius: 8px; }

.rp-actions { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin-top: 8px; }
.rp-actions select, .rp-note-in {
  padding: 8px 11px; border-radius: 9px; border: 1px solid var(--line);
  background: var(--surface); color: var(--text); font-family: inherit; font-size: 0.875rem;
}
.rp-note-in { flex: 1 1 180px; min-width: 0; }
.rp-actions select:focus, .rp-note-in:focus { outline: none; border-color: var(--brand); }
.rp-days { display: inline-flex; align-items: center; gap: 6px; font-size: 0.8125rem; color: var(--text-muted); }
.rp-warn {
  margin-top: 12px; padding: 12px 14px; border-radius: 12px;
  background: rgba(225, 29, 72, .10); border: 1px solid rgba(225, 29, 72, .3);
  font-size: 0.84375rem; line-height: 1.7; color: var(--text);
}
.rp-warn .rp-note-in { margin-top: 8px; width: 100%; }

@media (prefers-color-scheme: dark) {
  .rp-count, .rp-new { color: #ffb3b3; }
  .rp-reviewing { color: #f0c070; }
}
:root[data-theme="dark"] .rp-count,
:root[data-theme="dark"] .rp-new { color: #ffb3b3; }
:root[data-theme="dark"] .rp-reviewing { color: #f0c070; }

@media (max-width: 640px) {
  .rp-grid { grid-template-columns: 1fr; gap: 10px; }
  .rp-actions { flex-direction: column; align-items: stretch; }
  .rp-actions select, .rp-note-in, .rp-actions .btn { width: 100%; }
}

/* ✏️ 내 프로필 — 사진·닉네임 고치기 단추
   메뉴에 있던 것을 여기로 옮겼습니다. 고치는 일은 고치는 화면에서. */
.pf-edit { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; }
.pf-edit-btn {
  border: 1px solid var(--line); background: var(--surface); cursor: pointer;
  color: var(--text-muted); font-family: inherit; font-size: 0.8125rem;
  padding: 6px 12px; border-radius: 999px;
  transition: border-color .15s, color .15s;
}
.pf-edit-btn:hover { border-color: var(--brand); color: var(--brand); }
.pf-edit-btn:disabled { opacity: .6; cursor: default; }

/* 프로필 메뉴의 '내 프로필' 에 붙는 작은 설명 */
.profile-item small { display: block; font-size: 0.6875rem; color: var(--text-muted); font-weight: 400; margin-top: 1px; }

@media (max-width: 480px) {
  .pf-edit-btn { font-size: 0.78125rem; padding: 6px 10px; }
}

/* =========================================================
   🔎 검색 갈래 칩 — 걸리는 게 없는 갈래
   ---------------------------------------------------------
   ⚠️ 0이라고 칩을 감추지 않습니다. 감추면 '그런 갈래가 없다' 로
      보여서, 아직 비어 있을 뿐이라는 걸 알 수가 없어요.
      대신 흐리게 두어 '여기는 지금 비었다' 를 알립니다.
   ⚠️ 흐리게 해도 눌리기는 합니다 — 눌러서 확인할 수 있어야 해요.
      그래서 opacity 를 너무 낮추지 않았습니다(글자 대비 유지).
   ========================================================= */
.sr-tab.sr-tab-empty { opacity: .55; }
.sr-tab.sr-tab-empty:hover,
.sr-tab.sr-tab-empty:focus-visible { opacity: 1; }
.sr-tab.sr-tab-empty.active { opacity: 1; }
.sr-tab.sr-tab-empty .sr-tab-n { opacity: .8; }

/* =========================================================
   📧 이메일 인증 안내 창
   ---------------------------------------------------------
   ⚠️ 색은 전부 토큰(var)으로만 씁니다. 값을 직접 적으면
      어두운 화면에서 글자가 배경에 묻혀요.
   ⚠️ 움직임을 끄고 쓰시는 분께는 스르륵 뜨는 효과를 빼 드립니다.
   ========================================================= */
.verify-nudge-back {
  position: fixed; inset: 0; z-index: 9000;
  display: flex; align-items: center; justify-content: center;
  padding: 20px;
  background: rgba(15, 23, 42, .55);
  backdrop-filter: blur(2px);
  animation: vnFade .18s ease-out;
}
body.vn-open { overflow: hidden; }

.verify-nudge {
  position: relative;
  width: min(440px, 100%);
  max-height: calc(100vh - 40px);
  overflow-y: auto;
  background: var(--surface);
  color: var(--text);
  border: 1px solid var(--border);
  border-radius: 18px;
  padding: 30px 26px 22px;
  text-align: center;
  box-shadow: 0 18px 50px rgba(0, 0, 0, .28);
  animation: vnPop .2s ease-out;
}
.verify-nudge .vn-x {
  position: absolute; top: 10px; right: 12px;
  width: 34px; height: 34px; border-radius: 50%;
  border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: 1rem; line-height: 1;
}
.verify-nudge .vn-x:hover { background: var(--surface-2); color: var(--text); }
.verify-nudge .vn-ico { font-size: 2.6rem; line-height: 1; margin-bottom: 8px; }
.verify-nudge h2 { margin: 0 0 8px; font-size: 1.22rem; }
.verify-nudge .vn-lead { margin: 0 0 12px; font-size: 1.02rem; }
.verify-nudge .vn-sub {
  margin: 0 0 18px; font-size: .9rem; line-height: 1.65;
  color: var(--text-muted);
}
.verify-nudge .vn-form { display: flex; gap: 8px; flex-wrap: wrap; }
.verify-nudge .vn-form input {
  flex: 1 1 190px; min-width: 0;
  padding: 11px 13px; border-radius: 10px;
  border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text);
  font-size: .95rem;
}
.verify-nudge .vn-form input:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
.verify-nudge .vn-form .btn { flex: 0 0 auto; }
.verify-nudge .vn-msg { min-height: 1.2em; margin: 12px 0 0; font-size: .88rem; }
.verify-nudge .vn-msg.vn-ok  { color: var(--brand); }
/* ⚠️ 오류 빨강은 어두운 화면에서 잘 안 보여서 따로 잡습니다 */
.verify-nudge .vn-msg.vn-err { color: #dc2626; }
:root:not([data-theme="light"]) .verify-nudge .vn-msg.vn-err { color: #f87171; }
/* 📬 메일을 보낸 뒤 — 창을 닫지 않고 무엇을 해야 하는지 보여줍니다 */
.verify-nudge .vn-msg.vn-done { margin-top: 6px; font-size: 1rem; line-height: 1.45; }
.verify-nudge .vn-msg.vn-done .vn-done-sub {
  display: block; margin-top: 6px;
  color: var(--text); font-size: .88rem; line-height: 1.5;
}
.verify-nudge .vn-again { margin-top: 12px; }
.verify-nudge .vn-later {
  margin-top: 14px; border: 0; background: transparent; cursor: pointer;
  color: var(--text-muted); font-size: .85rem; text-decoration: underline;
}
.verify-nudge .vn-later:hover { color: var(--text); }

@keyframes vnFade { from { opacity: 0; } to { opacity: 1; } }
@keyframes vnPop  { from { opacity: 0; transform: translateY(10px) scale(.98); }
                    to   { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) {
  .verify-nudge-back, .verify-nudge { animation: none; }
}
/* 좁은 화면에서는 단추를 한 줄 아래로 — 옆으로 삐져나가지 않게 */
@media (max-width: 420px) {
  .verify-nudge { padding: 26px 18px 18px; }
  .verify-nudge .vn-form .btn { flex: 1 1 100%; }
}

/* =========================================================
   🐾 새 보금자리
   ---------------------------------------------------------
   ⚠️ 색은 전부 토큰(var)으로. 어두운 화면에서 묻히지 않게요.
   ⚠️ 쇼핑몰처럼 보이지 않게 일부러 담백하게 뒀습니다.
      가격을 크게 키우거나 '지금 구매' 같은 급한 색을 쓰지 않아요.
   ========================================================= */
.rh-closed {
  max-width: 520px; margin: 40px auto; padding: 44px 26px;
  text-align: center; background: var(--surface);
  border: 1px solid var(--border); border-radius: 18px;
}
.rh-closed-ico { font-size: 3.2rem; line-height: 1; }
.rh-closed h2 { margin: 14px 0 10px; font-size: 1.45rem; }
.rh-badge {
  display: inline-block; margin: 0 0 18px; padding: 5px 16px;
  border-radius: 999px; font-size: .86rem; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted);
  border: 1px solid var(--border);
}
.rh-closed-lead { margin: 0; line-height: 1.85; color: var(--text-muted); }

.rh-beta {
  display: inline-block; margin-left: 8px; padding: 3px 10px;
  border-radius: 999px; font-size: .76rem; font-weight: 700;
  background: rgba(234, 179, 8, .16); color: #a16207;
  border: 1px solid rgba(234, 179, 8, .4);
}
:root:not([data-theme="light"]) .rh-beta { color: #fde047; }

.rh-tabs { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 16px; }
.rh-toolbar { display: flex; justify-content: flex-end; margin-bottom: 14px; }

.rh-list { display: grid; gap: 12px; }
.rh-card {
  display: flex; gap: 14px; padding: 14px;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; text-decoration: none; color: var(--text);
}
.rh-card:hover { border-color: var(--brand); }
.rh-card-photo {
  flex: 0 0 92px; width: 92px; height: 92px; border-radius: 10px;
  overflow: hidden; background: var(--surface-2);
  display: flex; align-items: center; justify-content: center;
}
.rh-card-photo img { width: 100%; height: 100%; object-fit: cover; }
.rh-noimg { font-size: 1.8rem; opacity: .5; }
.rh-card-body { flex: 1 1 auto; min-width: 0; }
.rh-card-body h3 { margin: 0 0 4px; font-size: 1.05rem; }
.rh-card-body h3 small { font-weight: 400; color: var(--text-muted); font-size: .82rem; }
.rh-sci { font-size: .82rem; color: var(--text-muted); font-style: italic; margin-bottom: 6px; }
.rh-meta { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; margin-bottom: 6px; }
.rh-chip {
  padding: 2px 9px; border-radius: 999px; font-size: .74rem; font-weight: 700;
  background: var(--surface-2); color: var(--text-muted); border: 1px solid var(--border);
}
.rh-chip-ok { background: rgba(34, 197, 94, .14); color: #15803d; border-color: rgba(34, 197, 94, .4); }
:root:not([data-theme="light"]) .rh-chip-ok { color: #4ade80; }
.rh-chip-done { background: var(--surface-2); }
.rh-chip-hide { background: rgba(220, 38, 38, .12); color: #b91c1c; border-color: rgba(220, 38, 38, .35); }
:root:not([data-theme="light"]) .rh-chip-hide { color: #f87171; }
.rh-chip-turn { background: rgba(59, 130, 246, .16); color: #1d4ed8; border-color: rgba(59, 130, 246, .4); }
:root:not([data-theme="light"]) .rh-chip-turn { color: #93c5fd; }
.rh-price { font-weight: 700; font-size: .9rem; }
.rh-region { font-size: .8rem; color: var(--text-muted); }
.rh-queue-line { font-size: .82rem; color: var(--text-muted); }
.rh-mine { margin-left: 6px; font-weight: 700; color: var(--brand); }
.rh-due { margin-top: 4px; font-size: .8rem; color: var(--text-muted); }

.rh-panel {
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px; padding: 22px;
}
.rh-panel h2 { margin: 0 0 8px; font-size: 1.2rem; }
.rh-panel-lead { margin: 0 0 18px; color: var(--text-muted); line-height: 1.75; font-size: .92rem; }
.rh-state { padding: 10px 14px; border-radius: 10px; background: var(--surface-2); font-size: .9rem; }
.rh-note { color: var(--text-muted); font-size: .85rem; }

.rh-proof {
  margin: 16px 0; padding: 14px 16px; border-radius: 12px;
  background: var(--surface-2); border: 1px dashed var(--border);
}
.rh-proof p { margin: 8px 0 0; font-size: .84rem; color: var(--text-muted); line-height: 1.7; }
.rh-proof-code {
  margin: 8px 0 0; font-size: 1.5rem; font-weight: 800; letter-spacing: .08em;
  color: var(--brand);
}

.rh-form { display: grid; gap: 14px; margin-top: 16px; }
.rh-form label { display: grid; gap: 5px; font-size: .88rem; font-weight: 700; }
.rh-form input, .rh-form textarea {
  padding: 10px 12px; border-radius: 9px; font-weight: 400;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  font-size: .93rem; font-family: inherit; width: 100%; box-sizing: border-box;
}
.rh-form input:focus-visible, .rh-form textarea:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 1px;
}
.rh-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
@media (max-width: 560px) { .rh-row { grid-template-columns: 1fr; } }
.rh-check { display: flex !important; align-items: center; gap: 8px; }
.rh-check input { width: auto; }
.rh-req { color: #dc2626; }
:root:not([data-theme="light"]) .rh-req { color: #f87171; }
.rh-help { font-weight: 400; font-size: .78rem; color: var(--text-muted); margin: 0; }
.rh-warn {
  margin: 0; padding: 11px 14px; border-radius: 10px; font-size: .84rem; line-height: 1.7;
  background: rgba(234, 179, 8, .12); border: 1px solid rgba(234, 179, 8, .35);
}
.rh-photos { display: grid; gap: 7px; font-size: .88rem; }
.rh-thumbs { display: flex; gap: 8px; flex-wrap: wrap; }
.rh-thumb { position: relative; width: 74px; height: 74px; border-radius: 8px; overflow: hidden; }
.rh-thumb img { width: 100%; height: 100%; object-fit: cover; }
.rh-thumb button {
  position: absolute; top: 2px; right: 2px; width: 20px; height: 20px;
  border: 0; border-radius: 50%; cursor: pointer;
  background: rgba(0, 0, 0, .6); color: #fff; font-size: .7rem; line-height: 1;
}
.rh-msg { min-height: 1.2em; margin: 0; font-size: .86rem; }
.rh-msg.rh-ok { color: var(--brand); }
.rh-msg.rh-err { color: #dc2626; }
:root:not([data-theme="light"]) .rh-msg.rh-err { color: #f87171; }

/* =========================================================
   🏠 홈 다듬기 — 제목·부제만 크게, 나머지는 한 단계씩 작게
   ---------------------------------------------------------
   왜 고쳤나:
     「이렇게 이용해요」 머리글이 부제와 똑같은 21.96px 이었습니다.
     크기가 같으면 무엇이 중요한지 눈이 판단하지 못해요.
     제목 → 부제 → 나머지 로 층을 만들어 줍니다.

   ⚠️ 글꼴은 건드리지 않았습니다 (센세 지시). 크기와 여백만 손봤어요.
   ⚠️ 제목(.hero h1)과 부제(.hero .lead)는 그대로 둡니다.
   ========================================================= */

/* 🌿 제목과 부제 사이 구분선 */
.hero-div {
  display: flex; align-items: center; gap: 14px;
  margin: 18px 0 0; max-width: 580px;
}
.hero-div::before, .hero-div::after {
  content: ""; flex: 1 1 auto; height: 1px; background: var(--border);
}
.hero-div span { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }

/* --- 시범 운영 배너 --- */
.demo-banner-inner p { font-size: .8rem; }
.demo-banner-btn { font-size: .78rem; padding: 7px 14px; }

/* --- 검색칸 --- */
.hero-search { margin-top: 22px; }
.hero-search-label { font-size: .95rem; }
.hero-search-box input { font-size: .95rem; }
.hero-search-btn { font-size: .88rem; }
.hero-search-hint { font-size: .78rem; }

/* --- 숫자 세 개 --- */
/* ⚠️ 넓은 화면(900px 이상)에는 이미 vh 기준 clamp 규칙이 위에 있습니다.
      여기서 그냥 고정값을 쓰면 '나중에 온 규칙' 이라 그걸 이겨 버려서,
      줄이려던 글씨가 오히려 커집니다 (실제로 17.3 → 20.8 로 커졌었어요).
      그래서 같은 clamp 방식으로, 값만 한 단계씩 낮춰 씁니다. */
.hero-stats { margin-top: 26px; gap: 26px; }
.hero-stats .num { font-size: clamp(.95rem, 2vh, 1.25rem); }
.hero-stats .lbl { font-size: clamp(.62rem, 1.15vh, .72rem); }

/* --- 이렇게 이용해요 --- */
.how-card-head { font-size: 1rem !important; }
.how-card-note { font-size: .8rem; }
.how-steps li { font-size: .84rem; line-height: 1.65; }
.how-card { max-width: 340px; }

/* =========================================================
   🧭 바로 가는 길
   ---------------------------------------------------------
   ⚠️ 다섯 칸이 한 줄에 안 들어가면 가로로 밀리는 게 아니라
      줄이 나뉘게 했습니다. 가로 스크롤은 있는 줄도 모르고 지나쳐요.
   ========================================================= */
/* ⚠️ 바로가기를 '이렇게 이용해요' 앞에 두었더니, 넓은 화면에서는
      격자가 자동으로 밀려 안내 카드가 오른쪽 위 자리를 잃었습니다.
      그래서 세 덩이의 자리를 손으로 지정합니다. */
@media (min-width: 900px) {
  .hero-inner > div:first-of-type { grid-column: 1; grid-row: 1; }
  .hero-inner .how-card { grid-column: 2; grid-row: 1; }
  .hero-inner .hero-quick { grid-column: 1 / -1; grid-row: 2; }
}

.hero-quick {
  margin-top: 26px;
  display: grid; grid-template-columns: repeat(5, 1fr); gap: 6px;
  padding: 12px 8px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 16px;
  box-shadow: 0 4px 18px rgba(0, 0, 0, .05);
}
.hero-quick a {
  display: flex; flex-direction: column; align-items: center; gap: 7px;
  padding: 10px 4px; border-radius: 11px;
  text-decoration: none; color: var(--text);
  font-size: .8rem; font-weight: 700; text-align: center;
  line-height: 1.3;
}
.hero-quick a:hover { background: var(--surface-2); color: var(--brand); }
.hero-quick a:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.hero-quick .hq-ico { font-size: 1.45rem; line-height: 1; }
.hero-quick .hq-lbl { word-break: keep-all; }

/* =========================================================
   📱 모바일 — 같은 원칙으로 한 단계 더
   ---------------------------------------------------------
   ⚠️ 좁은 화면일수록 제목만 크고 나머지는 확실히 작아야
      한 눈에 무슨 사이트인지 읽힙니다.
   ⚠️ 다섯 칸을 3+2 로 접습니다. 한 줄에 다섯은 글자가 깨져요.
   ========================================================= */
@media (max-width: 720px) {
  .hero .lead { font-size: 1.02rem; margin-top: 14px; }
  .hero-div { margin-top: 14px; }
  .hero-search { margin-top: 18px; }
  .hero-search-label { font-size: .88rem; }
  .hero-search-box input { font-size: .9rem; }
  .hero-search-hint { font-size: .72rem; }
  .hero-stats { margin-top: 20px; gap: 18px; }
  /* ⚠️ 부제보다 크면 층이 뒤집힙니다. 숫자 세 개는 곁들이는 정보라
     부제(약 16px)보다 확실히 작아야 해요. */
  .hero-stats .num { font-size: .95rem; }
  .hero-stats .lbl { font-size: .68rem; }
  .how-card-head { font-size: .94rem !important; }
  .how-steps li { font-size: .8rem; }
  .demo-banner-inner p { font-size: .76rem; }

  /* 🧭 다섯 칸을 한 줄로 —  ⚠️ 3+2 로 접었더니 둘째 줄이 휑했습니다.
     글자를 줄이면 좁은 화면에서도 한 줄에 들어갑니다. */
  .hero-quick {
    grid-template-columns: repeat(5, 1fr);
    margin-top: 18px; padding: 10px 2px; gap: 0;
  }
  .hero-quick a { font-size: .62rem; padding: 8px 1px; gap: 5px; }
  .hero-quick .hq-ico { font-size: 1.25rem; }

  /* 📱 좁은 화면에서는 가운데로 모읍니다.
     ⚠️ 왼쪽 정렬이면 오른쪽에 빈 공간이 남아 글이 한쪽으로 쏠려 보여요. */
  .hero-inner { text-align: center; }
  .hero-div { margin-left: auto; margin-right: auto; }
  .hero .lead { margin-left: auto; margin-right: auto; }
  .how-card { text-align: left; margin-left: auto; margin-right: auto; }

  /* ⚠️ 히어로 검색칸은 좁은 화면에서 감춥니다.
     맨 위 머리줄에 이미 검색칸이 있어서, 한 화면에 검색칸이 둘이 됩니다.
     둘이면 어느 쪽이 진짜인지 헷갈리고 첫 화면만 길어져요.
     (넓은 화면에서는 그대로 둡니다 — 자리가 넉넉하니까요) */
  .hero-search { display: none; }

  /* ⚠️ 숫자 세 개(카테고리·100%·24/7)도 감춥니다.
     읽고 나서 할 수 있는 일이 없는 장식이라, 좁은 화면에서는
     '바로 가는 길' 이 그 자리를 쓰는 편이 낫습니다. */
  .hero-stats { display: none; }
}
@media (max-width: 400px) {
  .hero-quick a { font-size: .69rem; }
  .hero-quick .hq-ico { font-size: 1.2rem; }
}

/* =========================================================
   🖥️ 넓은 화면 — 첫 화면 안에 '바로 가는 길' 까지 담기
   ---------------------------------------------------------
   왜 고쳤나:
     1280×800 에서 바로가기 칸이 887px 자리에 있었습니다.
     화면이 800px 이니 스크롤을 내려야만 보였어요.
     가장 크게 자리를 먹던 건 부제였습니다 — 24.4px 로 다섯 줄,
     그것만 210px 였어요.

   ⚠️ 이 블록은 파일 맨 뒤에 있어서 위쪽 @media (min-width:900px)
      규칙을 덮어씁니다. 위쪽을 고치지 않고 여기서 덮는 이유는,
      위쪽 값이 '화제글이 큰 카드였던 시절' 의 사정을 담고 있어서
      그대로 두는 편이 나중에 읽기 쉽기 때문입니다.
   ⚠️ 전부 vh 기준입니다. 세로가 짧은 노트북에서는 알아서 더 줄어요.
   ========================================================= */
@media (min-width: 900px) {
  /* 부제 — 대폭 축소 (24.4px → 약 15px) */
  .hero .lead {
    font-size: clamp(.9rem, 1.9vh, 1.08rem) !important;
    line-height: 1.62 !important;
    margin-top: clamp(8px, 1.2vh, 14px);
    margin-bottom: clamp(8px, 1.2vh, 14px) !important;
    max-width: 520px;
  }
  .hero-div { margin-top: clamp(8px, 1.3vh, 15px); }

  /* 검색칸 — 위아래 여백만 조입니다 (글씨는 이미 줄였어요) */
  .hero-search { margin-top: clamp(10px, 1.6vh, 18px); }
  .hero-search-hint { margin-top: 6px; }

  /* 히어로 전체 여백 */
  .hero-inner {
    padding-top: clamp(14px, 2.4vh, 34px) !important;
    padding-bottom: clamp(12px, 2vh, 26px) !important;
  }

  /* '이렇게 이용해요' — 위로 붙이고 납작하게.
     ⚠️ 위쪽 정렬(start)로 바꿔야 제목 높이에 맞춰 올라옵니다.
        기본값이면 칸 높이만큼 가운데로 내려와요. */
  .hero-inner .how-card {
    align-self: start;
    padding: clamp(12px, 1.8vh, 18px) clamp(14px, 1.4vw, 20px) !important;
    max-width: 320px;
  }
  .how-card-head { font-size: .92rem !important; margin-bottom: 8px; }
  .how-card-note { font-size: .75rem; padding: 7px 10px; }
  .how-steps { margin-top: 8px; }
  .how-steps li { font-size: .78rem; line-height: 1.55; margin-bottom: 6px; }

  /* 바로 가는 길 — 위로 끌어올립니다 */
  .hero-inner .hero-quick {
    margin-top: clamp(4px, 0.8vh, 12px);
    padding: clamp(8px, 1.2vh, 12px) 8px;
  }
  .hero-quick a { padding: clamp(6px, 0.9vh, 10px) 4px; gap: 5px; font-size: .78rem; }
  .hero-quick .hq-ico { font-size: clamp(1.15rem, 2vh, 1.4rem); }
}

/* =========================================================
   🖥️ 세로가 짧은 화면 (노트북 등) — 조금 더 조입니다
   ---------------------------------------------------------
   ⚠️ 1280×700 에서 바로가기 칸이 11px 모자라 잘렸습니다.
      큰 화면까지 같이 줄이면 위쪽이 휑해지므로,
      세로가 짧을 때만 따로 조입니다.
   ========================================================= */
@media (min-width: 900px) and (max-height: 760px) {
  .hero-inner {
    padding-top: clamp(10px, 1.6vh, 20px) !important;
    padding-bottom: clamp(8px, 1.2vh, 16px) !important;
  }
  .hero h1 { margin-bottom: 6px; }
  .hero-div { margin-top: 8px; }
  .hero .lead { margin-top: 8px; margin-bottom: 8px !important; }
  .hero-search { margin-top: 10px; }
  .hero-search-hint { margin-top: 4px; font-size: .72rem; }
  .hero-search-label { margin-bottom: 4px; }
  .hero-inner .hero-quick { margin-top: 4px; padding: 7px 8px; }
  .hero-quick a { padding: 6px 4px; gap: 4px; font-size: .74rem; }
  .hero-quick .hq-ico { font-size: 1.1rem; }
  .how-steps li { margin-bottom: 4px; }
}

/* 아주 낮은 화면 (세로 700px 이하)
   ⚠️ 1100×680 에서 여유가 3px 밖에 없었습니다. 브라우저 도구모음이
      조금만 두꺼워도 바로 잘려요. 한 번 더 조입니다. */
@media (min-width: 900px) and (max-height: 700px) {
  .hero-inner { padding-top: 8px !important; padding-bottom: 6px !important; }
  .hero h1 { font-size: clamp(1.6rem, 4.2vh, 2.2rem); margin-bottom: 4px; }
  .hero-div { margin-top: 6px; }
  .hero .lead { margin-top: 6px; margin-bottom: 6px !important; line-height: 1.55 !important; }
  .hero-search { margin-top: 8px; }
  .hero-search-label { font-size: .85rem; }
  .hero-inner .hero-quick { margin-top: 3px; padding: 6px 8px; }
  .hero-quick a { padding: 5px 4px; font-size: .7rem; }
  .hero-quick .hq-ico { font-size: 1rem; }
  .hero-inner .how-card { padding: 10px 14px !important; }
}

/* =========================================================
   📱 모바일 머리줄 — 세 개만 남깁니다
   ---------------------------------------------------------
   ⚠️ 아홉 개가 두 줄로 늘어져서, 무엇을 눌러야 할지
      한눈에 안 들어왔습니다. 고를 게 많으면 아무것도 못 고릅니다.
   ⚠️ 감춘 것들은 사라지는 게 아니에요 —
        · 첫 화면의 「바로 가는 길」 다섯 칸
        · ☰ 서랍
      두 곳에 그대로 있습니다. 갈 길을 먼저 마련하고 감췄어요.
   ⚠️ 홈은 로고를 누르면 갑니다 (로고는 늘 홈 링크입니다).
   ========================================================= */
@media (max-width: 720px) {
  .cat-wide { display: none !important; }
}

/* =========================================================
   ✂️ 뜻이 끊기는 자리에서만 줄바꿈
   ---------------------------------------------------------
   ⚠️ 예전 br 은 PC 전용이라 좁은 화면에서 전부 풀렸고,
      "…등각류까지. 작은 / 생명들만을 위한 포털 사이트." 처럼
      문장 한가운데서 끊겼습니다.
   ⚠️ keep-all 은 낱말 중간에서 자르지 말라는 뜻입니다.
      이게 없으면 br 을 넣어도 긴 줄이 또 아무 데서나 잘려요.
   ========================================================= */
.br-sense { display: inline; }
.hero .lead { word-break: keep-all; overflow-wrap: break-word; }

/* =========================================================
   📢 시범 운영 배너 — 안쪽 위아래 여백
   ---------------------------------------------------------
   ⚠️ 이 칸에는 class 가 둘 붙어 있습니다: "container demo-banner-inner".
      .container 의 `padding: 0 22px` 가 뒤에 정의돼 있어서
      .demo-banner-inner 의 `padding: 12px 20px` 를 이기고 있었어요.
      그래서 위아래 여백이 0 이 되어, 글은 테두리 위에
      단추는 테두리 아래에 딱 붙어 있었습니다.
   ⚠️ 두 class 를 같이 겨냥해 확실히 이기게 씁니다.
      (한쪽만 쓰면 또 순서 싸움이 납니다)
   ========================================================= */
.demo-banner .container.demo-banner-inner {
  padding-top: 14px;
  padding-bottom: 14px;
}
@media (max-width: 720px) {
  /* 좁은 화면에서는 글과 단추가 위아래로 쌓이므로 더 넉넉히 */
  .demo-banner .container.demo-banner-inner {
    padding-top: 16px;
    padding-bottom: 18px;
    gap: 12px;
  }
}

/* =========================================================
   📱 모바일 머리줄 — 세 개만 남았으니 큼직하게
   ---------------------------------------------------------
   ⚠️ 모바일 한정입니다. 넓은 화면은 아홉 개가 한 줄에 들어가야 해서
      키우면 줄이 넘칩니다.
   ⚠️ 「동물별」만 17.5px 이고 「정보·커뮤니티」는 13.5px 이었습니다.
      같은 줄의 같은 위계인데 크기가 다르면 눈이 헷갈려요. 맞춥니다.
   ⚠️ 손가락으로 누르는 곳이라 높이를 44px 이상으로 둡니다.
      (그보다 작으면 옆 것이 눌립니다)
   ========================================================= */
@media (max-width: 720px) {
  .cat-bar-inner > a,
  .cat-bar-inner .navmenu-trigger {
    /* ⚠️ 예전에 20px 까지 키웠습니다. 세 개뿐이라 시원해 보이긴 했는데,
          머리줄만 58px 을 먹어 화면이 시작부터 꽉 찬 느낌이었어요.
          17px 로 낮췄고, 2026-09-12 에 **15px 로 한 번 더** 내렸습니다.
       ⚠️⚠️ 왜 또 내렸나 — 이건 **길잡이지 읽을 글이 아닙니다.** 그런데
          글 본문(.detail-content)이 14px 인데 이게 17px 이라, 읽으라고
          있는 글보다 메뉴가 더 컸어요. 그게 화면 전체를 '다 크다' 로
          보이게 만든 까닭 중 하나입니다.
       ⚠️ 누르는 높이(44px)는 **그대로** 둡니다. 글자만 줄이고 손가락
          자리는 지킵니다 — 작아진 만큼 눌러야 할 곳까지 작아지면
          고친 게 아니라 망가뜨린 것입니다. */
    font-size: 0.9375rem !important;
    font-weight: 700;
    padding: 10px 13px !important;
    min-height: 44px;
    display: inline-flex; align-items: center;
  }
  /* 세 개뿐이라 가운데로 모으고 사이를 벌립니다 */
  .cat-bar-inner {
    justify-content: center;
    gap: 6px !important;
  }
}
/* 아주 좁은 화면에서는 한 단계만 낮춥니다 (줄바꿈 방지) */
@media (max-width: 380px) {
  .cat-bar-inner > a,
  .cat-bar-inner .navmenu-trigger {
    font-size: 0.84375rem !important;
    padding: 10px 9px !important;
  }
}

/* =========================================================
   🖥️ 첫 화면에 화제글·새 글 머리까지 보이게
   ---------------------------------------------------------
   ⚠️ 검색칸 아래가 66px 이나 비어 있었습니다. 범인은 격자의
      '세로' 간격이었어요 — gap 을 하나로 적어 두면 가로용으로
      잡은 넉넉한 값이 세로에도 그대로 먹습니다.
      가로는 두 칸(글 / 이용안내)을 벌려야 하니 넓어야 하지만,
      세로는 그럴 이유가 없어요. 그래서 row-gap 만 따로 줄입니다.
   ⚠️ 스크롤을 내리지 않아도 아래에 뭔가 더 있다는 걸 보여주려는
      것이라, 화제글 머리글이 살짝 걸치는 정도면 충분합니다.
      다 보이게 하려고 위를 더 조이면 제목이 초라해져요.
   ========================================================= */
@media (min-width: 900px) {
  .hero-inner {
    row-gap: 8px !important;
    padding-top: clamp(10px, 1.6vh, 22px) !important;
    padding-bottom: 6px !important;
  }
  .hero-search { margin-bottom: 8px; }
  .hero-feeds { padding-top: 4px; }
}

/* =========================================================
   ✍️ 목록 미리보기의 닉네임 — 묻히지 않게
   ---------------------------------------------------------
   ⚠️ 일반 회원 닉네임이 옆의 분류·게시판·날짜·조회수와
      글자 크기(15px)·굵기(400)·색까지 전부 똑같았습니다.
      "누가 쓴 글인가" 는 목록에서 가장 자주 찾는 정보인데,
      나머지 부스러기 정보와 구분이 안 됐어요.

   ⚠️ 과하게 키우지 않습니다. 제목(19px)보다 커지면
      제목과 다투게 되고, 목록이 시끄러워집니다.
      한 칸만 올리고(15 -> 15.5px) 굵기와 색으로 구분합니다.
      크기보다 굵기·색이 훨씬 조용하게 눈에 띕니다.

   ⚠️ 관리자·전설 등 특수 닉네임(author-admin 등)은 건드리지 않습니다.
      그쪽은 이미 자기 색과 굵기를 갖고 있어서,
      여기서 색을 덮으면 그 표시가 지워집니다.
   ========================================================= */
/* 크기는 모두에게 — 같은 줄에서 이름 크기가 갈리면 더 어수선합니다.
   ⚠️ 처음에 15.5px 로 잡았다가 다시 키웠습니다. 옆의 메타가 15px 라
      0.5px 차이는 눈에 전혀 안 띄었어요. '과하지 않게' 를 너무 좁게
      잡으면 고친 티가 안 나서 안 고친 것과 같습니다.
   ⚠️ 제목이 19px 이라 그보다는 작게 둡니다 — 제목과 다투면 안 되니까요. */
/* ⚠️ 2026-09-02 17px → 14px 로 내렸습니다.
      17px 로 둔 근거가 "제목이 19px 이라 그보다 작다" 였는데, 그 19px 은
      글 '상세' 제목이고 **목록 한 줄의 제목은 15.5px** 입니다.
      그래서 목록에서는 닉네임(17)이 제목(15.5)보다 커서, 훑을 때 눈이
      제목이 아니라 글쓴이로 갔습니다. 옆 메타(13)보다는 크게 두어
      '누가 썼는지' 는 여전히 살립니다. (PC · 모바일 공통 문제였습니다) */
.pmeta .author-link { font-size: 14px; }

/* ⚠️ 굵기와 색은 '특수 표시가 없는' 닉네임에만 줍니다.
      관리자(author-admin)나 전설(author-legend)은 글자 색을 투명으로 두고
      배경 그라데이션을 글자 모양으로 오려내서 빛깔을 냅니다.
      여기서 color 를 덮으면 그 빛깔이 통째로 지워져요.
      (color: inherit 로도 지워집니다 — 반드시 :not 으로 비켜가야 합니다) */
.pmeta .author-link:not(.author-admin):not(.author-legend):not(.author-bio):not(.author-eva) {
  font-weight: 700;
  color: var(--text);
}
.pmeta .author-link:not(.author-admin):not(.author-legend):not(.author-bio):not(.author-eva):hover {
  color: var(--brand);
}

/* =========================================================
   🎬 동영상 미리보기 안전망
   ---------------------------------------------------------
   동영상 첫 장면 미리보기는 원래 되고 있습니다. 다만 브라우저에 따라
   (특히 아이폰 사파리) preload="metadata" 로 첫 장면을 안 그려 줄 때가
   있고, 그러면 까만 네모만 남습니다.

   ⚠️ 그때 "아무것도 없는 칸" 으로 보이지 않도록 뒤에 필름 기호를 깔아 둡니다.
      첫 장면이 그려지면 동영상이 그 위를 덮으니 보이지 않아요.
   ⚠️ ::before 는 video 뒤(z-index 0)에 둡니다. 앞에 두면
      정상적으로 그려진 첫 장면까지 가려 버립니다.
   ========================================================= */
.thumb-video::before {
  content: "🎬";
  position: absolute; inset: 0; z-index: 0;
  display: flex; align-items: center; justify-content: center;
  font-size: 1.4rem;
  background: var(--surface-2);
}
.thumb-video video { position: relative; z-index: 1; }
/* 재생 표시는 맨 위 */
.thumb-video .thumb-play { z-index: 2; }

/* =========================================================
   📋 글 목록 — 한 화면에 더 많이 보이게
   ---------------------------------------------------------
   ⚠️ 한 칸이 97px 이라 1280x800 화면에 글이 두 개밖에 안 들어갔습니다.
      목록은 '무엇이 있는지 훑는 곳' 인데 훑을 수가 없었어요.
   ⚠️ 자리를 먹던 건 두 가지였습니다 — 위아래 여백 16px 와
      76x60 짜리 사진 미리보기. 미리보기는 작은 표시로 바꿨고,
      여백은 줄였습니다.
   ⚠️ 제목은 조금만 줄입니다(19 -> 17px). 목록에서 가장 먼저
      읽는 글자라, 여기까지 작게 하면 훑기가 오히려 어려워집니다.
   ========================================================= */
.post-item {
  padding-top: 9px;
  padding-bottom: 9px;
}
/* ⚠️ 제목 크기는 건드리지 않습니다 — 요청은 '칸 세로폭' 이었어요 */
.post-item .ptitle { line-height: 1.4; }
.post-item .pmeta { margin-top: 3px; }

/* 미리보기 칸 — 사진 대신 작은 표시 */
.post-item .pthumb {
  width: 42px; height: 42px;
  min-width: 42px;
  border-radius: 10px;
  display: flex; align-items: center; justify-content: center;
}
.post-item .pthumb .ff-emoji { font-size: 1.15rem; line-height: 1; }
.post-item .pthumb .ff-emoji img { width: 1.15em; height: 1.15em; }

/* 💬 댓글 수 칸
   ⚠️ 여기 height: 60px 가 못 박혀 있어서, 다른 걸 아무리 줄여도
      칸 높이가 60 밑으로 안 내려갔습니다. 진짜 범인이었어요.
      썸네일과 같은 42px 로 맞춥니다. */
/* (댓글 상자 규칙은 위에서 함께 걷어냈습니다) */

/* 오른쪽 묶음도 여백을 조금만 */
.post-item .pright { gap: 8px; }

/* 메타 줄 — 줄 높이가 27px 였습니다. 글자는 15px 인데 여백이 남았어요 */
.post-item .pmeta { line-height: 1.35; }



/* =========================================================
   📱 모바일 목록 — 칸 높이를 고르게
   ---------------------------------------------------------
   ⚠️ 좁은 화면에서는 긴 제목이 접혀서, 어떤 칸은 66px 이고
      어떤 칸은 90px 이었습니다. 더 길면 세 줄, 네 줄까지 늘어나요.
      두 줄까지만 보이고 넘치면 … 로 줄입니다.
   ⚠️ 한 줄로 자르지는 않았습니다. 제목을 못 읽으면 목록을
      훑는 의미 자체가 없어지니까요. 두 줄은 남겨 둡니다.
   ========================================================= */
@media (max-width: 720px) {
  .post-item .ptitle {
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
  }
  .post-item .pmeta {
    font-size: 13.5px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
}

/* =========================================================
   📋 글 한 칸 — 제목 두 줄 + 오른쪽 사진 · 댓글 칸
   ---------------------------------------------------------
   센세가 보내주신 카페 화면 모양입니다.
     ┌──────────────────────────────────────────────┐
     │ [말머리] 제목은 두 줄까지        ┌────┐ ┌────┐│
     │ 닉네임 · 시각 · 조회 19          │사진│ │ 3  ││
     │                                  │ +3 │ │댓글││
     │                                  └────┘ └────┘│
     └──────────────────────────────────────────────┘

   ⚠️ 게시판·허브·업체가 모두 이 규칙을 씁니다.
      칸을 만드는 함수도 postRowHtml 하나로 합쳤어요.
   ⚠️ 제목은 딱 두 줄에서 자릅니다. 줄 수를 안 정하면 긴 제목 하나 때문에
      칸 높이가 들쭉날쭉해져서 목록이 어지러워집니다.
   ⚠️ 사진이 없으면 사진 칸을 만들지 않습니다(빈 상자 금지).
      댓글 칸은 늘 있습니다 — 자리가 고정돼야 눈이 세로로 훑어져요.
   ========================================================= */
/* ⚠️ 목록이 한 줄짜리 표로 바뀌었습니다 (05-post-list.css 가 격자를 잡아요).
      여기서 예전처럼 display:flex 로 덮으면 격자가 통째로 무너져서
      조회수가 두 줄로 깨지고 제목이 안 잘립니다. 세로 여백만 손봅니다. */
.post-item {
  padding: 9px 14px;
  min-height: 0;
}

/* 왼쪽 — 제목과 메타 */
.post-item .pmain {
  flex: 1 1 auto;
  min-width: 0;
  display: block;
}
/* ⚠️ 한 줄 목록이라 두 줄 자르기(-webkit-line-clamp)를 쓰지 않습니다.
      그대로 두면 제목이 두 줄로 늘어나 칸 높이가 들쭉날쭉해져요. */
.post-item .ptitle { font-size: 15.5px; line-height: 1.45; }
.post-item .pt-text { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.post-item .pmeta {
  margin-top: 5px;
  font-size: 13px;
  line-height: 1.4;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 5px;
  white-space: nowrap;
}
.post-item .pmeta .pm-sep { opacity: .45; }
.post-item .pmeta .pm-n { font-variant-numeric: tabular-nums; }

/* 오른쪽 — 사진 칸과 댓글 칸 */
.post-item .pright {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  gap: 8px;
}
.post-item .pthumb {
  position: relative;
  width: 62px;
  height: 62px;
  border-radius: 10px;
  overflow: hidden;
  background: var(--surface-2, #0000000d);
  display: block;
}
.post-item .pthumb img {
  width: 100%; height: 100%;
  object-fit: cover;
  display: block;
}
/* 사진이 여러 장이면 몇 장인지 */
.post-item .pthumb-badge {
  position: absolute; top: 3px; right: 3px;
  min-width: 20px; padding: 1px 5px;
  border-radius: 999px;
  background: rgba(0, 0, 0, .62);
  color: #fff; font-size: 11px; line-height: 1.5;
  text-align: center;
}
/* 동영상 표시 — 사진 위에 얹거나, 사진이 없으면 빈 칸 가운데에 */
.post-item .pthumb-play {
  position: absolute; inset: 0;
  display: grid; place-items: center;
  color: #fff; font-size: 20px;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
  pointer-events: none;
}
.post-item .pthumb-vid { background: var(--surface-3, #00000018); }
.post-item .pthumb-vid .pthumb-play { color: var(--text-muted, #6b6b6b); text-shadow: none; }

/* 댓글 칸 — 늘 같은 자리, 같은 크기 */
/* ⚠️ 댓글 수는 이제 제목 옆의 붉은 [n] 입니다 (05-post-list.css).
      예전의 네모 상자 규칙(54x62 · 배경 · grid)이 남아 있으면 그 크기
      때문에 한 줄 목록의 칸 높이가 62px 로 밀려 올라갑니다. 지웠어요. */


/* 📎 첨부 표시(제목 옆 작은 그림)는 이제 쓰지 않습니다 —
   오른쪽 사진 칸이 그 일을 대신하니까요. */
.pi-att { display: none; }

/* 📱 좁은 화면 — 사진·댓글 칸을 조금 줄이고 여백을 조입니다.
   ⚠️ 닉네임이 길면 조회 수가 밀려 잘리므로 닉네임만 …로 줄입니다. */
@media (max-width: 720px) {
  .post-item {
    gap: 10px;
    padding: 10px 12px;
  }
  .post-item .ptitle { font-size: 14.5px; line-height: 1.4; }
  /* ⚠️ 감기지 않게 못박습니다. 감기면 그 칸만 한 줄 더 높아져서
     목록 높이가 들쭉날쭉해져요 (실제로 111px 과 89px 이 섞였습니다). */
  .post-item .pmeta {
    font-size: 12px; margin-top: 4px;
    flex-wrap: nowrap; overflow: hidden;
  }
  .post-item .pmeta .author-link {
    min-width: 0; max-width: 46vw;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .post-item .pthumb { width: 54px; height: 54px; }
  /* 댓글 수는 제목 옆 붉은 [n] 이라 상자 크기 규칙이 필요 없습니다 */
}

/* 🛒 용품 종류 아래의 보기 줄 — "예: 리빙박스, 햄스터장, …"
   ⚠️ 종류가 13가지라 이름만으로는 어디에 넣을지 헷갈립니다.
      고른 종류에 무엇이 들어가는지 바로 아래에서 알려줍니다. */
.mw-cat-hint {
  margin: 6px 2px 0;
  font-size: 12.5px;
  line-height: 1.5;
  color: var(--text-muted, #6b6b6b);
}

/* 💬 '가이드가 필요해요!' 단추 위 말풍선
   ---------------------------------------------------------
   ⚠️ 처음에는 단추 위에 '띄워' 놨는데, 그러면 위쪽 글을 덮습니다.
      실제로 이용 안내 3번 줄이 가려졌어요.
      그래서 제 자리를 차지하게 두었습니다 — 자리를 차지하면
      아무것도 가리지 않고, 아래 단추를 자연스레 가리킵니다.
   ⚠️ 단추가 흔들리기만 해서는 무슨 단추인지 안 보입니다.
      글자로 말을 걸어야 눌러 볼 마음이 들어요. */
.tour-hint {
  position: relative;
  display: inline-block;
  margin: 14px 0 10px 10px;
  padding: 7px 12px;
  border-radius: 999px;
  background: var(--accent); color: var(--on-accent, #2a1400);
  font-size: 0.78125rem; font-weight: 800; line-height: 1.25;
  animation: tour-hint-bob 2.4s ease-in-out infinite;
}
/* 꼬리 — 아래쪽(단추 쪽)을 향합니다 */
.tour-hint::after {
  content: ""; position: absolute; left: 16px; bottom: -4px;
  width: 12px; height: 12px; transform: rotate(45deg);
  background: var(--accent); border-radius: 2px;
}
@keyframes tour-hint-bob {
  0%, 100% { transform: translateY(0); }
  50%      { transform: translateY(-3px); }
}
/* 말풍선 바로 아래 단추는 위 여백을 없앱니다 (말풍선이 이미 띄워 줘요) */
.tour-hint + .tour-start-btn { margin-top: 0; }

/* 📱 좁은 화면 — 글이 길면 줄바꿈을 허용합니다 */
@media (max-width: 420px) {
  .tour-hint { font-size: 0.75rem; max-width: calc(100% - 20px); }
}
/* 움직임을 줄여 달라고 한 분에게는 흔들지 않습니다 */
@media (prefers-reduced-motion: reduce) {
  .tour-hint { animation: none; }
}

/* 🦶 바닥글 로고가 모서리에 붙던 것
   ---------------------------------------------------------
   ⚠️ .footer-inner 는 container 이기도 합니다. 좁은 화면에서
      .container { padding: 0 22px } 가 뒤에 나오면서
      .footer-inner 의 위아래 여백(52px/30px)을 통째로 지웠어요.
      그래서 누리 로고가 바닥글 맨 위 모서리에 여백 0 으로 걸렸습니다.
      (PC 는 52px 로 멀쩡했습니다 — 좁은 화면에서만 생기던 일이에요)
   ⚠️ 좌우는 22px 그대로 두고 위아래만 되살립니다.
      한 단계 더 구체적인 선택자라 뒤에 오는 .container 규칙에 안 집니다. */
@media (max-width: 720px) {
  .site-footer .footer-inner { padding: 40px 22px 26px; }
  /* 로고와 아래 글 사이도 조금 띄웁니다 */
  .site-footer .footer-inner .brand { margin-bottom: 16px; }
}

/* =========================================================
   ↩️ 돌아가기 단추 — PC·폰 어디서나 같은 자리
   ---------------------------------------------------------
   ⚠️ 오른쪽 아래는 '맨 위로'(.to-top)가 쓰던 자리입니다.
      돌아가기는 늘 떠 있고 맨 위로는 많이 내려야 나오니,
      돌아가기를 아래에 두고 맨 위로를 그 위로 올립니다.
   ⚠️ 폰에서는 글자를 빼고 화살표만 둡니다.
      좁은 화면에서 글까지 있으면 본문을 가려요.
   ========================================================= */
.go-back {
  position: fixed; right: 18px; bottom: 18px; z-index: 879;
  display: inline-flex; align-items: center; gap: 7px;
  height: 44px; padding: 0 16px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--heading);
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  line-height: 1; cursor: pointer;
  box-shadow: var(--shadow-md);
}
.go-back:hover { background: var(--chip-bg); }
.go-back .gb-ico { font-size: 1.0625rem; line-height: 1; }

/* '맨 위로' 를 돌아가기 위로 올립니다 (겹침 방지) */
.to-top { bottom: 72px; }

/* 📱 폰 — 화살표만 둥근 단추로 */
@media (max-width: 720px) {
  .go-back {
    width: 44px; padding: 0;
    justify-content: center;
    border-radius: 50%;
  }
  .go-back .gb-txt { display: none; }
}

/* 🙋 첫 방문 쪽지(왼쪽 아래)와 겹치지 않게
   ⚠️ 좁은 화면에서 쪽지가 화면 폭을 거의 다 써서 돌아가기 단추를
      덮었습니다. 쪽지 쪽을 좁혀 자리를 비웁니다 —
      돌아가기를 옮기면 화면마다 자리가 달라져 오히려 못 찾아요. */
@media (max-width: 480px) {
  .guide-tip { max-width: calc(100vw - 96px); }
}

/* =========================================================
   🏆 칭호 축하 — "칭호를 얻었습니다!"
   ---------------------------------------------------------
   ⚠️ 직접 딴 칭호든 운영진이 준 칭호든 똑같이 이 화면이 뜹니다.
      받은 사람이 자기 칭호를 덜한 것처럼 느끼면 안 되니까요.
   ⚠️ 움직임을 줄여 달라고 한 분에게는 빛살과 반짝임을 멈춥니다.
   ========================================================= */
.tu-backdrop {
  position: fixed; inset: 0; z-index: 4000;
  display: grid; place-items: center;
  padding: 20px;
  background: rgba(10, 12, 9, .62);
  backdrop-filter: blur(3px);
  opacity: 0;
  transition: opacity .26s ease;
}
.tu-backdrop.on { opacity: 1; }

.tu-panel {
  position: relative;
  width: min(380px, 100%);
  padding: 26px 22px 20px;
  border-radius: 20px;
  background: var(--surface, #fff);
  color: var(--text, #222);
  text-align: center;
  overflow: hidden;
  box-shadow: 0 24px 60px -20px rgba(0, 0, 0, .55);
  transform: scale(.9) translateY(8px);
  transition: transform .32s cubic-bezier(.2, 1.3, .4, 1);
}
.tu-backdrop.on .tu-panel { transform: scale(1) translateY(0); }

/* 뒤에서 도는 빛살 */
.tu-rays {
  position: absolute; left: 50%; top: 96px;
  width: 520px; height: 520px; margin: -260px 0 0 -260px;
  background: conic-gradient(from 0deg,
    rgba(255, 200, 90, .22) 0deg, transparent 18deg,
    rgba(255, 200, 90, .22) 36deg, transparent 54deg,
    rgba(255, 200, 90, .22) 72deg, transparent 90deg,
    rgba(255, 200, 90, .22) 108deg, transparent 126deg,
    rgba(255, 200, 90, .22) 144deg, transparent 162deg,
    rgba(255, 200, 90, .22) 180deg, transparent 198deg,
    rgba(255, 200, 90, .22) 216deg, transparent 234deg,
    rgba(255, 200, 90, .22) 252deg, transparent 270deg,
    rgba(255, 200, 90, .22) 288deg, transparent 306deg,
    rgba(255, 200, 90, .22) 324deg, transparent 342deg);
  animation: tu-spin 14s linear infinite;
  pointer-events: none;
}
@keyframes tu-spin { to { transform: rotate(360deg); } }

/* 딱지에서 사방으로 튀는 반짝임 */
.tu-spark { position: absolute; left: 50%; top: 118px; pointer-events: none; }
.tu-spark i {
  position: absolute; left: 0; top: 0;
  width: 7px; height: 7px; margin: -3px 0 0 -3px;
  border-radius: 50%;
  background: var(--accent, #f5b942);
  opacity: 0;
  animation: tu-pop 1.1s ease-out forwards;
}
.tu-spark i:nth-child(1) { --tx:  74px; --ty: -14px; animation-delay: .26s; }
.tu-spark i:nth-child(2) { --tx:  54px; --ty:  46px; animation-delay: .30s; }
.tu-spark i:nth-child(3) { --tx:   0px; --ty:  70px; animation-delay: .34s; }
.tu-spark i:nth-child(4) { --tx: -54px; --ty:  46px; animation-delay: .30s; }
.tu-spark i:nth-child(5) { --tx: -74px; --ty: -14px; animation-delay: .26s; }
.tu-spark i:nth-child(6) { --tx: -44px; --ty: -58px; animation-delay: .22s; }
.tu-spark i:nth-child(7) { --tx:   0px; --ty: -76px; animation-delay: .20s; }
.tu-spark i:nth-child(8) { --tx:  44px; --ty: -58px; animation-delay: .22s; }
@keyframes tu-pop {
  0%   { opacity: 0; transform: translate(0, 0) scale(.4); }
  35%  { opacity: 1; }
  100% { opacity: 0; transform: translate(var(--tx), var(--ty)) scale(1); }
}

.tu-kicker {
  position: relative;
  margin: 0; font-size: .75rem; font-weight: 800; letter-spacing: .1em;
  color: var(--text-muted, #7a7a7a);
}
.tu-got {
  position: relative;
  margin: 4px 0 0; font-size: 1.25rem; font-weight: 800;
  color: var(--heading, #1c1c1c);
}
.tu-badge-wrap { position: relative; margin: 16px 0 12px; }
/* 딱지가 톡 튀어나옵니다 */
.tu-badge {
  display: inline-block;
  font-size: 1.125rem !important;
  padding: 7px 16px !important;
  animation: tu-badge-in .5s cubic-bezier(.2, 1.5, .4, 1) .18s both;
}
@keyframes tu-badge-in {
  0%   { opacity: 0; transform: scale(.5) rotate(-7deg); }
  100% { opacity: 1; transform: scale(1) rotate(0); }
}
.tu-desc {
  position: relative;
  margin: 0; font-size: .875rem; color: var(--text, #333);
}
.tu-hint {
  position: relative;
  margin: 10px 0 16px; font-size: .78125rem; color: var(--text-muted, #7a7a7a);
}
.tu-ok { position: relative; min-width: 130px; }

/* 숨은 업적·최종 칭호는 금빛으로 한 번 더 */
.tu-gold { box-shadow: 0 24px 60px -18px rgba(180, 130, 20, .6), 0 0 0 2px rgba(240, 190, 90, .5) inset; }
.tu-gold .tu-rays { animation-duration: 9s; }

/* 📱 좁은 화면 */
@media (max-width: 420px) {
  .tu-panel { padding: 22px 16px 18px; }
  .tu-got { font-size: 1.125rem; }
  .tu-badge { font-size: 1rem !important; }
}

/* 움직임을 줄여 달라고 한 분에게는 조용히 */
@media (prefers-reduced-motion: reduce) {
  .tu-rays, .tu-spark i, .tu-badge { animation: none; }
  .tu-spark { display: none; }
  .tu-panel { transition: none; transform: none; }
  .tu-badge { opacity: 1; }
}

/* 🧭 허브(사육 정보·커뮤니티 첫 화면)의 글 목록
   ---------------------------------------------------------
   ⚠️ 허브는 .hub-list 라는 자기 칸에 글을 담는데, 그 칸이 글 사이를
      8px 씩 벌려 놓습니다. 게시판과 나란히 놓으면 허브만 헐렁해 보여요.
      글 목록일 때만 붙이고 얇은 줄로 나눕니다.
      (같은 .hub-list 를 쓰는 '동물 고르기' 칸은 벌어져 있어야 하므로
       id 로 글 목록만 집습니다) */
#hubList { gap: 0; }
#hubList .post-item { border-bottom: 1px solid var(--line, #e7e7e7); }
#hubList .post-item:last-child { border-bottom: 0; }

/* 🎬 홈 화제글·새 글의 동영상 표시
   ---------------------------------------------------------
   ⚠️ 동영상 파일은 받지 않습니다. 첫 장면을 보여주려다 재 보니
      32px 짜리 칸 하나에 1.2MB 가 나갔어요
      (moov 가 파일 끝에 있어서 브라우저가 앞부분 3초를 통째로 받습니다).
      그래서 분류 그림 위에 필름 표시만 얹습니다. */
.ff-vid {
  position: relative;
  display: block;
  width: 100%;
  height: 100%;
  overflow: hidden;
}
/* 분류 그림이 칸을 꽉 채우도록 (동영상 글의 바탕이 됩니다) */
.ff-vid > .ff-emoji,
.ff-vid > .hc-emoji {
  width: 100%;
  height: 100%;
  display: grid;
  place-items: center;
}
.ff-vid-mark {
  position: absolute;
  right: 3px;
  bottom: 2px;
  font-size: 11px;
  line-height: 1;
  text-shadow: 0 1px 3px #000a;
}
/* ⚠️ emoji.js 가 🎬 를 <img class="emo"> 로 바꿔 놓습니다.
   그 그림은 크기가 24px 로 정해져 있어서, 그냥 두면 26px 짜리 칸을
   통째로 덮어 버립니다 (실제로 그랬습니다).
   글자 크기를 따라가도록 못박아 둡니다. */
.ff-vid-mark .emo {
  width: 1em;
  height: 1em;
  display: block;
  filter: drop-shadow(0 1px 2px #000a);
}
/* 큰 카드(화제글 1~3위)에서는 표시도 크게 */
.hc-cover .ff-vid-mark { right: 8px; bottom: 6px; font-size: 20px; }
/* 홈의 아주 납작한 줄(hot-mini)은 칸이 26px 이라 표시도 줄입니다 */
.hot-mini .ff-vid-mark { font-size: 9px; right: 2px; bottom: 1px; }

/* 📱 모바일 머리줄을 균등하게 (작은 생명들 · 정보 · 커뮤니티)
   ---------------------------------------------------------
   ⚠️ 재 보면 세 항목 묶음은 이미 화면 가운데였습니다(양옆 23px 씩).
      그런데 항목마다 폭이 156 / 85 / 117px 로 제각각이라
      눈에는 한쪽으로 쏠려 보입니다.
   ⚠️ 그래서 셋을 똑같은 폭으로 나누고, 각 항목 안에서도
      글자를 가운데에 둡니다. 그러면 어느 기기에서 보든
      가운데선을 기준으로 좌우가 똑같아집니다.
   ⚠️ flex: 0 0 auto (03-header.css) 를 덮어야 하므로
      한 단계 더 구체적인 선택자를 씁니다. */
@media (max-width: 720px) {
  .cat-bar-inner > a,
  .cat-bar-inner > button.navmenu-trigger {
    flex: 1 1 0 !important;
    min-width: 0;
    justify-content: center;
    text-align: center;
    padding-left: 4px !important;
    padding-right: 4px !important;
  }
  /* 글자가 길어 칸을 넘치면 줄이지 말고 조금 작게 (줄바꿈 금지) */
  .cat-bar-inner > a > *,
  .cat-bar-inner > button.navmenu-trigger > * { flex: 0 0 auto; }
}

/* 📱 태블릿 세로(아이패드 768px 등) — 머리줄이 잘리던 것
   ---------------------------------------------------------
   ⚠️ 폰(720px 이하)은 '옆으로 밀지 말고 접기' 로 돼 있는데,
      721~900px 에는 그 규칙이 없었습니다. 그래서 아이패드 세로에서
      아홉 개가 895px 이 되어 오른쪽 180px 이 잘렸어요 —
      업체와의 만남·이벤트·업적이 화면 밖으로 나갔습니다.
      (옆으로 밀 수는 있었지만, 밀 수 있다는 걸 알 방법이 없습니다)
   ⚠️ 900px 까지만 걸었더니 912px 에서 '업적' 이 잘렸습니다.
      아홉 개가 다 들어가려면 943px 이 필요해서 1100px 까지 넓혔어요.
      자리가 넉넉하면 wrap 은 어차피 한 줄로 두므로 손해가 없습니다.
   ⚠️ 폰과 똑같이 접습니다. 두 줄이 되더라도 아홉 개가 다 보이는 편이
      낫습니다. 글자 크기는 태블릿 그대로 둡니다. */
@media (min-width: 721px) and (max-width: 1100px) {
  .cat-bar-inner {
    flex-wrap: wrap;
    justify-content: center;
    overflow-x: visible;
    row-gap: 0;
  }
  /* '업체와의 만남' 을 오른쪽 끝으로 밀던 규칙 — 접을 때는 방해가 됩니다 */
  .cat-bar-inner a.cat-shops { margin-left: 0; }
}

/* 📏 목록 제목을 확실히 두 줄로
   ---------------------------------------------------------
   ⚠️ -webkit-line-clamp 만으로는 부족합니다. 요즘 크롬(148)에서는
      display:-webkit-box 가 flow-root 로 계산돼 버려서 자르기가
      아예 안 먹었어요. 실제로 320px 에서 제목이 세 줄(61px)까지
      늘어나 칸 높이가 110px 이 됐습니다.
   ⚠️ 그래서 '높이' 로도 한 번 더 막습니다. 자르기가 되는 브라우저에서는
      … 가 붙고, 안 되는 브라우저에서도 두 줄에서 잘립니다.
      어느 쪽이든 칸 높이는 같아집니다.
   ⚠️ 한 줄 높이(line-height)를 바꾸면 아래 2em 배수도 같이 맞춰야 합니다. */
.post-item .ptitle {
  max-height: calc(1.42em * 2);
  overflow: hidden;
}
@media (max-width: 720px) {
  .post-item .ptitle { max-height: calc(1.4em * 2); }
}

/* 🔎 검색 분류 탭도 좁은 화면에서는 접습니다
   ---------------------------------------------------------
   ⚠️ 가로로 밀어 보게 돼 있었는데, 320px 에서는 여섯 개 중 두 개만
      보이고 나머지 넷은 화면 밖(667px)이었습니다.
      밀 수는 있지만 밀 수 있다는 걸 알 방법이 없어요.
   ⚠️ 머리줄과 같은 방식으로 맞춥니다 — 옆으로 밀지 말고 접기.
      줄이 늘어나도 여섯 개가 다 보이는 편이 낫습니다. */
@media (max-width: 720px) {
  .sr-tabs {
    flex-wrap: wrap;
    overflow-x: visible;
    row-gap: 6px;
  }
}

/* =========================================================
   🗺️ 업체 지도 · 가까운 순
   ========================================================= */
.shop-map-wrap { margin: 14px 0 18px; }
.shop-map-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 8px;
}
.shop-map-msg { font-size: 0.8125rem; color: var(--text-muted); }
/* ⚠️ 핀을 누르면 주소 카드가 핀 위로 뜹니다. 지도가 낮으면 카드 윗부분이
      잘려 나가요 (지도 칸이 overflow:hidden 이라서요).
      카드가 넉넉히 들어갈 만큼은 높이를 줍니다. */
.shop-map {
  width: 100%; height: 380px;
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden;      /* 지도가 모서리 밖으로 삐져나오지 않게 */
}
.shop-map-note { font-size: 0.8125rem; color: var(--text-muted); margin: 8px 0 0; }

/* 지도 위 말풍선 — 카카오가 만드는 흰 상자 안에 들어갑니다.
   ⚠️ 지도 안쪽은 카카오가 그리는 영역이라 우리 테마 색이 안 먹어요.
      글자색을 어두운 값으로 박아 둡니다 (바탕이 늘 흰색이라서요). */
.shop-pin { padding: 6px 10px; font-size: 0.8125rem; font-weight: 700; color: #1c1c1c; white-space: nowrap; }

/* 📍 거리 뱃지 — 업체 이름 옆 */
.badge-near {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
}

/* 관리자 좌표 입력 */
.sf-geo { display: flex; gap: 6px; flex-wrap: wrap; }
.sf-geo input { flex: 1 1 120px; min-width: 0; }
.sf-geo .btn { flex: 0 0 auto; }

@media (max-width: 700px) {
  .shop-map { height: 320px; }
}

/* 📍 지도 위 업체 핀 — 로고를 얹은 물방울
   ---------------------------------------------------------
   지도에는 입점(협력)하지 않은 업체도 함께 올라옵니다.
   그래서 협력업체를 한눈에 가릴 수 있어야 해요.

   ⚠️ 지도 안쪽은 카카오가 그리는 자리라 우리 테마 색이 안 먹습니다.
      바탕이 늘 밝은 지도라서, 핀 색은 테마와 무관하게 고정합니다.
   ⚠️ 핀에 이름표를 달지 않습니다. 가게가 몇 곳만 모여도 글자가
      서로 겹쳐 아무것도 못 읽게 돼요. 이름과 주소는 눌렀을 때 나옵니다.
   ⚠️ 꼬리 끝이 좌표를 가리킵니다 (yAnchor:1). 그래서 아래쪽 삼각형은
      머리와 같은 색이어야 하나로 이어져 보입니다. */
.mpin { display: block; width: 44px; cursor: pointer; }
.mpin-head {
  position: relative;
  display: flex; align-items: center; justify-content: center;
  width: 44px; height: 44px; border-radius: 50%;
  background: #ffffff; border: 2.5px solid #2f7d5a;
  box-shadow: 0 3px 8px rgba(0, 0, 0, .28);
  transition: transform .12s ease;
}
.mpin-logo {
  width: 34px; height: 34px; border-radius: 50%;
  object-fit: cover; display: block;
}
.mpin-emoji { font-size: 1.25rem; line-height: 1; }
.mpin-tail {
  display: block; width: 0; height: 0; margin: -1px auto 0;
  border-left: 7px solid transparent;
  border-right: 7px solid transparent;
  border-top: 11px solid #2f7d5a;
  filter: drop-shadow(0 2px 2px rgba(0, 0, 0, .25));
}
.mpin:hover .mpin-head { transform: scale(1.08); }
.mpin:focus-visible { outline: none; }
.mpin:focus-visible .mpin-head {
  transform: scale(1.08);
  box-shadow: 0 0 0 3px rgba(47, 125, 90, .5), 0 3px 8px rgba(0, 0, 0, .28);
}

/* ✨ 협력업체 — 금빛 테두리 + 별.
   색만으로 나누지 않습니다. 색을 구별하기 어려우신 분도
   별을 보고 알아보실 수 있어야 해요. */
.mpin-partner .mpin-head { background: #fff9e6; border-color: #c8901a; }
.mpin-partner .mpin-tail { border-top-color: #c8901a; }
.mpin-star {
  position: absolute; right: -5px; top: -5px;
  font-size: 0.8125rem; line-height: 1;
  text-shadow: 0 1px 2px rgba(0, 0, 0, .35);
}

/* 📍 내 위치 표
   ---------------------------------------------------------
   ⚠️ 배율과 상관없이 늘 같은 크기로 보여야 합니다. 지도 위에 그리는
      원은 밀어내면 점보다 작아져서 어디 있는지 알 수 없게 돼요.
   ⚠️ 업체 핀(초록·금빛)과 색이 겹치면 안 됩니다. 파란색으로 두고
      글자까지 적어 둡니다 — 색만으로는 알기 어려우신 분도 있어요. */
.myloc { position: relative; display: flex; flex-direction: column; align-items: center; }
.myloc-dot {
  width: 18px; height: 18px; border-radius: 50%;
  background: #2563eb; border: 3px solid #ffffff;
  box-shadow: 0 0 0 2px rgba(37, 99, 235, .45), 0 2px 6px rgba(0, 0, 0, .35);
}
/* 잔물결 — 여기 있다고 눈이 먼저 가게. 조용히 한 번씩만 퍼집니다. */
.myloc-dot::before {
  content: ""; position: absolute; left: 50%; top: 9px;
  width: 18px; height: 18px; margin: -9px 0 0 -9px;
  border-radius: 50%; background: rgba(37, 99, 235, .35);
  animation: myloc-wave 2.4s ease-out infinite;
}
@keyframes myloc-wave {
  0%   { transform: scale(1);   opacity: .55; }
  70%  { transform: scale(3.2); opacity: 0; }
  100% { transform: scale(3.2); opacity: 0; }
}
.myloc-label {
  margin-top: 4px; padding: 2px 7px; border-radius: 999px;
  background: #2563eb; color: #ffffff;
  font-size: 0.6875rem; font-weight: 800; line-height: 1.5;
  white-space: nowrap; box-shadow: 0 2px 6px rgba(0, 0, 0, .3);
}
@media (prefers-reduced-motion: reduce) {
  .myloc-dot::before { animation: none; opacity: .35; transform: scale(2); }
}

/* 범례 안의 작은 핀 — 누를 수 없고, 자리만 차지하지 않게 */
.mpin-legend { display: inline-block; width: 26px; vertical-align: middle; cursor: default; }
.mpin-legend .mpin-head { width: 26px; height: 26px; border-width: 2px; box-shadow: none; }
.mpin-legend .mpin-emoji { font-size: 0.8125rem; }
.mpin-legend .mpin-tail { border-left-width: 4px; border-right-width: 4px; border-top-width: 6px; filter: none; }
.mpin-legend .mpin-star { font-size: 0.625rem; right: -3px; top: -3px; }

@media (prefers-reduced-motion: reduce) {
  .mpin-head { transition: none; }
  .mpin:hover .mpin-head, .mpin:focus-visible .mpin-head { transform: none; }
}

/* 💬 핀을 누르면 뜨는 주소 카드
   ---------------------------------------------------------
   ⚠️ 여기 담긴 가장 중요한 한 줄은 '상세 주소' 입니다.
      지도에서 가게를 찾는 사람은 결국 어디로 가야 하는지를 알고 싶어요.
   ⚠️ 겉(.mbub-wrap)의 아래 여백이 카드를 핀 위로 밀어 올립니다.
      좌표에는 겉의 바닥이 붙으므로(yAnchor:1), 이 여백만큼 떠오릅니다.
   ⚠️ 카드 색도 테마와 무관하게 고정합니다 — 지도 바탕이 늘 밝아서,
      어두운 테마 색이 들어오면 흰 지도 위 흰 글씨가 됩니다. */
.mbub-wrap { position: relative; padding-bottom: 56px; }
/* 카드 아래 꼬리 — 아래 핀을 가리킵니다.
   ⚠️ 꼬리를 카드(.mbub) 가 아니라 겉(.mbub-wrap) 에 답니다.
      카드에 달면, 카드가 길어졌을 때 넘침 처리를 켜는 순간
      카드 바깥으로 삐져나온 꼬리가 함께 잘려 사라집니다. */
.mbub-wrap::after {
  content: ""; position: absolute; left: 50%; bottom: 48px;
  transform: translateX(-50%); width: 0; height: 0;
  border-left: 8px solid transparent;
  border-right: 8px solid transparent;
  border-top: 8px solid #ffffff;
  filter: drop-shadow(0 1px 0 #c2cbc4);
}
.mbub {
  position: relative;
  width: 244px; max-width: 76vw;
  padding: 12px 14px;
  background: #ffffff; color: #1c1c1c;
  border: 1px solid #c2cbc4; border-radius: 12px;
  box-shadow: 0 8px 24px rgba(0, 0, 0, .24);
  font-size: 0.8125rem; line-height: 1.55; text-align: left;
  /* ⚠️ 마지막 안전장치입니다. 가게 이름이나 주소가 유난히 길면 카드가
        지도보다 커질 수 있는데, 그러면 지도를 아무리 옮겨도 잘립니다.
        그럴 때만 카드 안에서 스크롤이 생깁니다 (보통은 안 생겨요). */
  max-height: 300px; overflow-y: auto;
}
.mbub-x {
  position: absolute; right: 5px; top: 3px;
  width: 26px; height: 26px; padding: 0;
  border: none; background: none; cursor: pointer;
  font-size: 1.125rem; line-height: 1; color: #6b7280;
}
.mbub-x:hover { color: #1c1c1c; }
.mbub-head { display: flex; gap: 9px; align-items: flex-start; padding-right: 22px; margin-bottom: 8px; }
.mbub-ico { flex: 0 0 auto; font-size: 1.375rem; line-height: 1.2; }
.mbub-ico img { width: 36px; height: 36px; border-radius: 8px; object-fit: cover; display: block; }
.mbub-t { display: block; min-width: 0; }
/* ⚠️ 카드 안의 <b> 는 다른 곳에서 테마 '제목 색' 을 물려받습니다.
      어두운 테마에서 그 색은 밝은 연두라, 흰 카드 위 흰 글씨가 돼요
      (실제로 대비 1.19 까지 떨어졌습니다 — 사실상 안 보입니다).
      지도 위 카드는 늘 밝은 바탕이니 글자색을 여기서 못 박습니다. */
.mbub b, .mbub strong { color: #1c1c1c; }
.mbub-nm { display: block; font-size: 0.9375rem; font-weight: 800; word-break: keep-all; }
.mbub-badge {
  display: inline-block; margin-top: 3px;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px;
  background: #fff3d0; color: #7a5300;
}
.mbub-km { display: block; margin-top: 3px; font-size: 0.75rem; font-weight: 700; color: #2f7d5a; }
.mbub-addr { margin: 0 0 4px; font-weight: 700; word-break: keep-all; }
.mbub-noaddr { font-weight: 400; color: #6b7280; }
.mbub-line { margin: 0 0 3px; color: #4b5563; }
.mbub-btns { display: flex; gap: 6px; margin-top: 10px; }
.mbub-go, .mbub-nav {
  flex: 1 1 0; min-width: 0;
  padding: 8px 6px; border-radius: 8px;
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  text-align: center; text-decoration: none; cursor: pointer;
  white-space: nowrap;
}
.mbub-go { background: #2f7d5a; border: 1px solid #2f7d5a; color: #ffffff; }
.mbub-go:hover { background: #26674a; }
.mbub-nav { background: #ffffff; border: 1px solid #c2cbc4; color: #1c1c1c; }
.mbub-nav:hover { border-color: #2f7d5a; color: #2f7d5a; }

@media (max-width: 700px) {
  .mbub { width: 220px; max-height: 240px; }   /* 지도(320px)보다 카드가 커지지 않게 */
}

/* 지도 범례 */
.shop-map-legend {
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--text-muted); margin-top: 8px;
}
.shop-map-legend b { color: var(--text); font-weight: 700; }

/* 📋 지도 아래 '내 주변 업체' */
.near-list { margin-top: 14px; }
.near-title { font-size: 0.9375rem; font-weight: 800; color: var(--heading); margin: 0 0 8px; }
.near-row {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); font-size: 0.875rem; text-align: left; cursor: pointer;
}
.near-row:hover { border-color: var(--brand-soft); }
.near-ico { flex: 0 0 auto; font-size: 1rem; }
.near-nm { flex: 1 1 auto; min-width: 0; font-weight: 700;
           overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.near-km { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); }
.near-star { font-size: 0.75rem; }

/* 지도 칸은 자기 탭 안에서 위쪽 여백이 필요 없어요 */
#pane-map .shop-map-wrap { margin-top: 0; }

/* =========================================================
   🔎 업체 찾기 — 세 칸(목록·소식·지도)이 함께 쓰는 조건
   ========================================================= */
.shop-find { margin-bottom: 14px; }
.shop-search { position: relative; }
.shop-search input {
  width: 100%; padding: 12px 40px 12px 14px;
  border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 0.9375rem;
  background: var(--surface); color: var(--text);
}
.shop-search input:focus { outline: none; border-color: var(--brand); }
.shop-search-x {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  width: 28px; height: 28px; border: none; border-radius: 50%;
  background: var(--chip-bg); color: var(--text-muted);
  font-size: 1rem; line-height: 1; cursor: pointer;
}
.shop-search-x:hover { color: var(--text); }

/* 왜 이 업체들이 나왔는지 — 종 이름으로 찾았을 때 알려줍니다 */
.shop-find-hint {
  font-size: 0.8125rem; color: var(--text-muted);
  margin: 8px 2px 0; line-height: 1.5;
}

.shop-find .filter-group { margin-top: 10px; }

@media (max-width: 700px) {
  /* 폰에서 입력칸을 눌러도 화면이 확대되지 않게 (16px 미만이면 아이폰이 확대합니다) */
  .shop-search input { font-size: 1rem; }
}


/* 🐾 업체 카드 — 취급 생물 정보 */
.shop-matched {
  display: inline-block; margin: 6px 0 0;
  padding: 4px 10px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-strong);
  font-size: 0.8125rem; font-weight: 800;
}
.shop-spcount, .shop-region {
  font-size: 0.8125rem; color: var(--text-muted); margin-top: 5px;
}
.shop-hidden-tag {
  display: inline-block; margin-top: 6px; padding: 3px 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--text-muted);
  font-size: 0.75rem; font-weight: 800;
}

/* 🏷️ 취급 상태 — 색만으로 나누지 않고 글자로도 알려줍니다 */
.sp-state {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 800; line-height: 1;
}
.sp-in      { background: #e6f4ec; color: #1f7a52; }
.sp-soon    { background: #e8eefb; color: #26456e; }
.sp-out     { background: #fdf0e6; color: #a35a17; }
.sp-stopped { background: var(--chip-bg); color: var(--text-muted); }
.sp-ask     { background: var(--chip-bg); color: var(--text-muted); }
:root[data-theme="dark"] .sp-in      { background: #16301f; color: #86e0b2; }
:root[data-theme="dark"] .sp-soon    { background: #1a2436; color: #a8c4f0; }
:root[data-theme="dark"] .sp-out     { background: #33240f; color: #f0bb7f; }

/* 🐾 업체 상세 — 취급 생물 */
.sd-species { margin-top: 22px; padding-top: 18px; border-top: 1px solid var(--line); }
.sd-species-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.sd-species-head h3 { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 0; }
.sd-sp-list { margin-top: 12px; }
.sd-sp-group { margin-bottom: 14px; }
.sd-sp-group h4 { font-size: 0.875rem; font-weight: 800; color: var(--text-muted); margin: 0 0 6px; }
.sd-sp-row {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 5px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sd-sp-nm { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 700; color: var(--text); }
.sd-sp-sci { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); font-style: italic; }
.sd-sp-x {
  flex: 0 0 auto; width: 26px; height: 26px; border: none; border-radius: 50%;
  background: var(--chip-bg); color: var(--text-muted); font-size: 1rem; line-height: 1; cursor: pointer;
}
.sd-sp-x:hover { color: #c0392b; }
.sd-sp-memo { font-size: 0.8125rem; color: var(--text-muted); margin: -2px 0 8px 12px; }
.sd-sp-form { margin-bottom: 14px; padding: 14px; background: var(--chip-bg); border-radius: var(--radius); }

/* ⚠️ 실시간 재고가 아니라는 안내 — 눈에 띄되 겁주지 않게 */
.sd-caution {
  font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6;
  margin: 14px 0 0; padding: 10px 12px;
  background: var(--chip-bg); border-radius: var(--radius-sm);
}
.sd-source { font-size: 0.75rem; color: var(--text-muted); margin: 8px 0 0; }
.sd-owner { margin-top: 16px; padding-top: 14px; border-top: 1px dashed var(--line); }
.sd-claim-q { font-size: 0.9375rem; font-weight: 700; color: var(--text); margin: 0 0 8px; }

/* 📱 폰에서 분류 칩 — 줄바꿈 대신 옆으로 밉니다
   ---------------------------------------------------------
   분류가 9개라 폰에서는 네 줄까지 늘어져 화면의 상당 부분을 먹었습니다
   (재보니 141px). 정작 보려는 업체 목록은 그만큼 아래로 밀려나요.
   옆으로 미는 방식이면 한 줄이면 됩니다.
   ⚠️ 스크롤바는 감추되 손가락으로는 밀 수 있어야 합니다. */
@media (max-width: 700px) {
  .shop-find .filterbar {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    /* 끝에서 잘린 느낌이 나도록 살짝 여백 */
    scroll-padding-inline: 12px;
    /* ⚠️ 이 두 줄이 없으면 '옆으로 밀기' 가 동작하지 않습니다.
          이 칸은 부모(.filter-group)의 flex 칸인데, flex 칸의 기본
          min-width 가 auto 라 내용보다 좁아지기를 거부해요. 그래서
          칸 자체가 화면보다 넓어지고, 안에서 미는 대신 페이지가
          통째로 옆으로 밀립니다 (375px 화면에서 512px 까지 늘어났어요).
          min-width:0 으로 좁아질 수 있게 하고, width:100% 로 화면에
          맞춰 세운 다음, 넘치는 것은 칸 안에서 밀리게 합니다. */
    min-width: 0;
    width: 100%;
  }
  .shop-find .filterbar::-webkit-scrollbar { display: none; }
  .shop-find .filterbar .chip { flex: 0 0 auto; }
  /* 분류 이름이 길어서(설치류·소형 포유류) 한 칩이 너무 넓어지지 않게 */
  .shop-find .filterbar .chip { max-width: 46vw; overflow: hidden; text-overflow: ellipsis; }
}

/* =========================================================
   🏪 업체 등록·수정 폼 — 구역으로 나눈 카드
   기존 .field / .btn / .chip 을 그대로 씁니다.
   ========================================================= */
.sf-top { margin-bottom: 16px; }
.sf-top h3 { font-size: 1.25rem; font-weight: 800; color: var(--heading); margin: 0 0 6px; }
.sf-lead { font-size: 0.9375rem; color: var(--text-muted); margin: 0; }

.sf-card {
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius); padding: 18px; margin-bottom: 14px;
}
.sf-h { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 0 0 14px; }
.sf-req { color: #c0392b; }
.sf-sub { font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }

/* ③ 취급 생물 — 눈에 띄어야 합니다. 숨은 고급 기능이 아니에요. */
.sf-card-key { border-color: var(--brand-soft); box-shadow: 0 0 0 1px var(--brand-soft); }
.sf-key-tag {
  display: inline-block; margin-left: 6px; padding: 3px 8px; border-radius: 999px;
  background: var(--brand-soft); color: var(--brand-strong);
  font-size: 0.6875rem; font-weight: 800; vertical-align: middle;
}
.sf-card-admin { background: var(--chip-bg); }

/* 고르는 칩 */
.sf-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.sf-chip {
  padding: 9px 14px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 0.875rem; font-weight: 700; font-family: inherit;
}
.sf-chip.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.sf-icons { display: flex; flex-wrap: wrap; gap: 6px; }
.sf-ico {
  width: 42px; height: 42px; border-radius: 10px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); font-size: 1.125rem;
}
.sf-ico.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand-soft); }

/* 사진·로고 고르기 */
.sf-pick {
  padding: 14px 18px; border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--chip-bg); color: var(--text-muted);
  font-size: 0.875rem; font-weight: 700; font-family: inherit; cursor: pointer;
}
.sf-pick:hover { border-color: var(--brand); color: var(--brand); }
.sf-pick-sm { padding: 10px 14px; }
.sf-logo-img { max-width: 140px; max-height: 90px; border-radius: 10px; display: block; margin-bottom: 8px; }
.sf-logo-btns { display: flex; gap: 6px; }
.sf-photos { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-start; }
.sf-photo { position: relative; width: 92px; height: 92px; }
.sf-photo img { width: 100%; height: 100%; object-fit: cover; border-radius: 10px; }
.sf-photo-x, .sf-link-x, .sf-sp-x {
  position: absolute; top: -6px; right: -6px;
  width: 24px; height: 24px; border: none; border-radius: 50%;
  background: var(--text); color: var(--surface);
  font-size: 0.875rem; line-height: 1; cursor: pointer;
}
.sf-link-x, .sf-sp-x { position: static; flex: 0 0 auto; background: var(--chip-bg); color: var(--text-muted); }
.sf-link-x:hover, .sf-sp-x:hover { color: #c0392b; }

/* 링크 */
.sf-links { display: flex; flex-direction: column; gap: 8px; align-items: flex-start; }
.sf-link {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.sf-link-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sf-link-body b { font-size: 0.875rem; }
.sf-link-body span { font-size: 0.75rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sf-link-form { display: flex; gap: 6px; flex-wrap: wrap; width: 100%; }
.sf-link-form input { flex: 1 1 200px; min-width: 0; }

/* 취급 생물 담기 */
.sf-sp-add { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.sf-sp-namewrap { position: relative; flex: 1 1 200px; min-width: 0; }
.sf-sp-namewrap input { width: 100%; }
.sf-sp-sug {
  position: absolute; left: 0; right: 0; top: 100%; z-index: 20;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); box-shadow: var(--shadow-md); overflow: hidden;
}
.sf-sug {
  display: block; width: 100%; padding: 9px 12px; border: none; cursor: pointer;
  background: transparent; color: var(--text); text-align: left;
  font-size: 0.875rem; font-family: inherit;
}
.sf-sug:hover { background: var(--chip-bg); }
.sf-sug span { color: var(--text-muted); font-size: 0.75rem; margin-left: 6px; }
.sf-sp-list { margin-top: 12px; display: flex; flex-direction: column; gap: 6px; }
.sf-sp-card {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface);
}
.sf-sp-card .sf-sp-nm { flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 700; }
.sf-sp-card .sf-sp-nm i { display: block; font-size: 0.75rem; font-weight: 500; color: var(--text-muted); }
.sf-sp-meta { flex: 0 0 auto; font-size: 0.8125rem; color: var(--text-muted); }

/* 주소 찾기 */
.sf-geo-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 8px; }
.sf-geo-msg { font-size: 0.8125rem; color: var(--text-muted); }
.sf-geo-msg.ok { color: #1f7a52; font-weight: 700; }
.sf-geo-msg.bad { color: #c0392b; }
.sf-adv { margin-top: 10px; }
.sf-adv summary { font-size: 0.8125rem; color: var(--text-muted); cursor: pointer; }
.sf-geo { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.sf-geo input { flex: 1 1 120px; min-width: 0; }

.sf-count { font-size: 0.75rem; color: var(--text-muted); text-align: right; margin-top: 4px; }
.sf-count.over { color: #c0392b; font-weight: 700; }

/* 취소와 등록은 붙어 보이면 안 됩니다 */
.sf-actions {
  display: flex; justify-content: flex-end; gap: 12px;
  margin-top: 18px; padding-top: 16px; border-top: 1px solid var(--line);
}
.sf-actions .btn { min-width: 110px; }

@media (max-width: 700px) {
  .sf-card { padding: 14px; }
  .sf-actions { gap: 10px; }
  .sf-actions .btn { flex: 1 1 0; min-width: 0; }
  /* 폰에서 입력칸을 눌러도 확대되지 않게 */
  .sf input, .sf textarea, .sf select { font-size: 1rem; }
  .sf-photo { width: 78px; height: 78px; }
}

/* 🔌 취급 ON/OFF 스위치 */
.sp-toggle {
  display: inline-flex; align-items: center; gap: 6px; flex: 0 0 auto;
  padding: 4px 10px 4px 4px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--chip-bg);
  font-size: 0.6875rem; font-weight: 800; color: var(--text-muted);
  font-family: inherit;
}
.sp-toggle-knob {
  width: 16px; height: 16px; border-radius: 50%;
  background: var(--text-muted); transition: background .15s;
}
.sp-toggle.on { background: #e6f4ec; border-color: #1f7a52; color: #1f7a52; }
.sp-toggle.on .sp-toggle-knob { background: #1f7a52; }
.sp-toggle:disabled { opacity: .5; cursor: wait; }
:root[data-theme="dark"] .sp-toggle.on { background: #16301f; border-color: #86e0b2; color: #86e0b2; }
:root[data-theme="dark"] .sp-toggle.on .sp-toggle-knob { background: #86e0b2; }

/* 꺼둔 종은 흐리게 — 지운 게 아니라는 걸 보여줍니다 */
.sd-sp-row.off { opacity: .55; }
.sd-sp-row.off .sd-sp-nm { text-decoration: line-through; }

/* =========================================================
   🔎 통합검색 결과 — 종 기준으로 모은 구역들
   ========================================================= */
#unifiedResults { margin-bottom: 26px; }
.us-head {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; margin-bottom: 14px;
  background: var(--brand-soft); border-radius: var(--radius);
}
.us-head-ico { font-size: 1.5rem; }
.us-head b { font-size: 1.0625rem; font-weight: 800; color: var(--heading); }
.us-head i { font-size: 0.8125rem; color: var(--text-muted); margin-left: 6px; }
.us-head-sub { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

.us-sec { margin-bottom: 20px; }
.us-sec h3 {
  font-size: 0.9375rem; font-weight: 800; color: var(--heading);
  margin: 0 0 8px; padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.us-beta {
  display: inline-block; margin-left: 6px; padding: 2px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--text-muted);
  font-size: 0.625rem; font-weight: 800; vertical-align: middle;
}

.us-dex, .us-post, .us-shop {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none; background: var(--surface);
}
.us-dex:hover, .us-post:hover, .us-shop:hover { border-color: var(--brand-soft); }
.us-dex-ico, .us-shop-ico { font-size: 1.125rem; flex: 0 0 auto; }
.us-dex b { font-size: 0.9375rem; }
.us-dex i { font-size: 0.75rem; color: var(--text-muted); margin-left: 5px; }
.us-dex-sum { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

.us-post { justify-content: space-between; font-size: 0.9375rem; }
.us-post-meta { flex: 0 0 auto; font-size: 0.75rem; color: var(--text-muted); }

.us-shop-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
.us-shop-body b { font-size: 0.9375rem; }
.us-shop-sp { font-size: 0.8125rem; color: var(--brand-strong); font-weight: 700; }
.us-shop-meta { font-size: 0.75rem; color: var(--text-muted); }
.us-km { flex: 0 0 auto; font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); }
.us-partner { font-size: 0.75rem; }

.us-photos { display: flex; gap: 6px; flex-wrap: wrap; }
.us-photos a { width: 88px; height: 88px; }
.us-photos img { width: 100%; height: 100%; object-fit: cover; border-radius: 8px; }

.us-more {
  display: inline-block; margin-top: 4px;
  font-size: 0.8125rem; font-weight: 700; color: var(--brand);
}
.us-note { font-size: 0.75rem; color: var(--text-muted); margin: 8px 0 0; line-height: 1.5; }

@media (max-width: 700px) {
  .us-photos a { width: calc(33.333% - 4px); height: 92px; }
}

/* =========================================================
   📰 작은 생명들의 소식
   기존 카드·칩·버튼을 그대로 씁니다 (뉴스 사이트처럼 보이지 않게).
   ========================================================= */
.news-list { display: flex; flex-direction: column; gap: 10px; }
.news-card {
  display: flex; gap: 12px; align-items: flex-start;
  padding: 12px; border: 1px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: var(--text); text-decoration: none;
}
.news-card:hover { border-color: var(--brand-soft); }
.news-thumb {
  flex: 0 0 auto; width: 92px; height: 72px; border-radius: 10px;
  overflow: hidden; background: var(--chip-bg);
  display: flex; align-items: center; justify-content: center;
}
.news-thumb img { width: 100%; height: 100%; object-fit: cover; }
/* 대표 이미지가 없는 소식도 많습니다 — 깨진 그림 대신 자리를 채웁니다 */
.news-noimg { font-size: 1.5rem; opacity: .6; }

.news-body { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; gap: 4px; }
.news-title {
  font-size: 0.9375rem; font-weight: 800; color: var(--heading); line-height: 1.45;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-sum {
  font-size: 0.8125rem; color: var(--text-muted); line-height: 1.55;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}
.news-tags { display: flex; gap: 4px; flex-wrap: wrap; }
.news-tag {
  font-size: 0.6875rem; font-weight: 700; padding: 2px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
}
.news-src { font-size: 0.75rem; color: var(--text-muted); }
.news-more { display: inline-block; margin-top: 12px; font-weight: 700; color: var(--brand); }
.news-foot { font-size: 0.8125rem; color: var(--text-muted); margin-top: 20px; line-height: 1.6; }
#newsMore { margin-top: 14px; width: 100%; }

/* 소식 하나 보기 */
.news-detail { max-width: 720px; }
.news-d-tags { display: flex; gap: 5px; flex-wrap: wrap; margin-bottom: 10px; }
.news-d-title { font-size: 1.5rem; font-weight: 800; color: var(--heading); line-height: 1.4; margin: 0 0 10px; }
.news-d-sum { font-size: 1rem; color: var(--text); line-height: 1.7; margin: 0 0 16px; }
.news-d-hero { width: 100%; border-radius: var(--radius); margin-bottom: 18px; }
.news-d-sec { margin-bottom: 20px; }
.news-d-sec h2 { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 0 0 8px; }
.news-d-sec p { font-size: 0.9375rem; line-height: 1.8; color: var(--text); margin: 0; }
.news-d-sp { display: flex; gap: 6px; flex-wrap: wrap; }

/* 출처는 눈에 띄어야 합니다 — 누리가 취재한 것처럼 보이면 안 돼요 */
.news-d-src {
  margin-top: 24px; padding: 16px;
  background: var(--chip-bg); border-radius: var(--radius);
}
.news-d-src h2 { font-size: 0.9375rem; font-weight: 800; color: var(--heading); margin: 0 0 8px; }
.news-d-src p { font-size: 0.875rem; color: var(--text); margin: 0 0 12px; line-height: 1.6; }
.news-d-src span { font-size: 0.8125rem; color: var(--text-muted); }
.news-d-note { font-size: 0.75rem; color: var(--text-muted); margin: 12px 0 0 !important; line-height: 1.6; }

.news-cmt { margin-top: 26px; padding-top: 20px; border-top: 1px solid var(--line); }
.news-cmt h2 { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 0 0 6px; }
.news-cmt h2 span { color: var(--brand); }

@media (max-width: 700px) {
  .news-thumb { width: 74px; height: 60px; }
  .news-title { font-size: 0.875rem; }
  .news-sum { -webkit-line-clamp: 2; }
  .news-d-title { font-size: 1.25rem; }
}

/* 📰 소식이 아직 없을 때 (관리자에게만 보이는 자리) */
.news-empty {
  text-align: center; padding: 28px 20px;
  border: 1px dashed var(--line); border-radius: var(--radius);
  background: var(--chip-bg);
}
.news-empty-ico { font-size: 2rem; margin-bottom: 8px; }
.news-empty p { margin: 0 0 8px; font-size: 0.9375rem; color: var(--text); }
.news-empty-sub { font-size: 0.875rem !important; color: var(--text-muted) !important; line-height: 1.6; }
.news-empty .btn { margin-top: 6px; }
.news-empty-note { font-size: 0.75rem !important; color: var(--text-muted) !important; margin-top: 12px !important; }

.news-foot-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; margin-top: 12px; }
.news-foot-row .news-more { margin-top: 0; }

/* =========================================================
   📅 업체 일정 달력
   ---------------------------------------------------------
   ⚠️ 달력은 크게 씁니다. 칸이 작으면 행사 제목이 점처럼 줄어들어
      "뭔가 있긴 한데 뭔지는 모르는" 화면이 됩니다.
   ⚠️ 6주(42칸) 고정 높이입니다. 달마다 5주·6주로 높이가 바뀌면
      달을 넘길 때마다 아래 내용이 들썩여요.
   ========================================================= */
.cal-bar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; flex-wrap: wrap; margin-bottom: 12px;
}
.cal-move { display: flex; align-items: center; gap: 8px; }
.cal-title {
  font-size: 1.25rem; font-weight: 800; color: var(--heading);
  margin: 0; min-width: 8.5em; text-align: center;
}
.cal-arrow {
  width: 34px; height: 34px; padding: 0; border-radius: 50%;
  border: 1px solid var(--line); background: var(--surface);
  color: var(--text); font-size: 1.25rem; line-height: 1; cursor: pointer;
}
.cal-arrow:hover { border-color: var(--brand); color: var(--brand); }

.cal-wrap {
  border: 1px solid var(--line); border-radius: var(--radius);
  overflow: hidden; background: var(--surface);
}
.cal-head, .cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-head { background: var(--surface-2); border-bottom: 1px solid var(--line); }
.cal-dow {
  padding: 8px 0; text-align: center;
  font-size: 0.8125rem; font-weight: 800; color: var(--text-muted);
}
.cal-dow.sun { color: #d64545; }
.cal-dow.sat { color: #3b7dd8; }

.cal-cell {
  min-height: 108px; padding: 6px;
  border-right: 1px solid var(--line); border-bottom: 1px solid var(--line);
  display: flex; flex-direction: column; gap: 4px; min-width: 0;
}
.cal-cell:nth-child(7n) { border-right: none; }
.cal-grid > .cal-cell:nth-last-child(-n+7) { border-bottom: none; }
/* 이번 달이 아닌 날 — 지우지 않고 흐리게만. 앞뒤 맥락이 보여야 해요 */
.cal-out { background: var(--surface-2); }
.cal-out .cal-num { opacity: .45; }
.cal-today { background: var(--chip-bg); }
.cal-num { font-size: 0.8125rem; font-weight: 800; color: var(--text); }
.cal-num.sun { color: #d64545; }
.cal-num.sat { color: #3b7dd8; }
.cal-today .cal-num {
  display: inline-flex; align-items: center; justify-content: center;
  width: 22px; height: 22px; border-radius: 50%;
  background: var(--brand); color: #fff;
}
.cal-evs { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.cal-ev {
  display: block; width: 100%; padding: 3px 6px;
  border: none; border-radius: 5px; cursor: pointer;
  background: var(--brand-soft, #cfe8dc); color: #17361f;
  font-family: inherit; font-size: 0.75rem; font-weight: 700; text-align: left;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.cal-ev:hover { background: var(--brand); color: #fff; }
/* 여러 날에 걸친 행사는 왼쪽에 띠를 둡니다 */
.cal-ev-span { border-left: 3px solid var(--brand); border-radius: 3px 5px 5px 3px; }
.cal-ev-cont { opacity: .6; margin-right: 2px; }
.cal-more {
  align-self: flex-start; padding: 2px 6px; border: none; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-family: inherit; font-size: 0.6875rem; font-weight: 800; cursor: pointer;
}

/* 달력 아래 줄글 목록 — 휴대폰에서는 사실상 이쪽을 봅니다 */
.cal-list { margin-top: 18px; }
.cal-list-title {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  font-size: 1rem; font-weight: 800; color: var(--heading); margin: 0 0 10px;
}
.cal-row {
  display: flex; gap: 12px; width: 100%; text-align: left;
  padding: 12px 14px; margin-bottom: 8px; cursor: pointer;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius-sm); color: var(--text);
}
.cal-row:hover { border-color: var(--brand); }
.cal-row-day {
  flex: 0 0 auto; font-size: 0.8125rem; font-weight: 800; color: var(--brand);
  min-width: 6.5em;
}
.cal-row-body { flex: 1 1 auto; min-width: 0; }
.cal-row-body b { display: block; font-size: 0.9375rem; font-weight: 800; color: var(--heading); }
.cal-row-meta { display: block; font-size: 0.8125rem; color: var(--text-muted); margin-top: 2px; }

/* 일정 자세히 보기 / 올리기 */
.ev-panel { max-width: 620px; }
.ev-poster { width: 100%; border-radius: var(--radius); margin-bottom: 14px; display: block; }
.ev-title { font-size: 1.375rem; font-weight: 800; color: var(--heading); margin: 0 0 14px; }
.ev-desc { font-size: 0.9375rem; line-height: 1.75; color: var(--text); margin: 14px 0; }
.ev-sec { margin-top: 18px; }
.ev-sec h3 { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 0 0 8px; }
.ev-chips { display: flex; flex-wrap: wrap; gap: 6px; }
.ev-btns { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 20px; }

.ef-two { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.ef-add { display: flex; gap: 6px; }
.ef-add input { flex: 1 1 auto; min-width: 0; }
.ef-chips { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.ef-chip {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 6px 4px 10px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-size: 0.8125rem; font-weight: 700;
}
.ef-chip button {
  border: none; background: none; cursor: pointer; padding: 0 2px;
  color: inherit; font-size: 0.9375rem; line-height: 1; opacity: .7;
}
.ef-chip button:hover { opacity: 1; }
.ef-msg { font-size: 0.875rem; color: var(--text-muted); margin: 10px 0 0; }
.ef-msg.bad { color: #d64545; font-weight: 700; }
.field-opt { font-size: 0.75rem; font-weight: 400; color: var(--text-muted); }

@media (max-width: 700px) {
  /* 휴대폰에서는 칸을 낮추고, 자세한 건 아래 줄글 목록에 맡깁니다 */
  .cal-cell { min-height: 74px; padding: 4px 3px; }
  .cal-ev { font-size: 0.6875rem; padding: 2px 4px; }
  .cal-title { font-size: 1.0625rem; min-width: 7em; }
  .ef-two { grid-template-columns: 1fr; }
  .cal-row { flex-direction: column; gap: 4px; }
  .cal-row-day { min-width: 0; }
}

/* =========================================================
   🎪 이벤트 달력 (hub.html?zone=event)
   ---------------------------------------------------------
   업체 일정 달력과 같은 조각(.cal-*)을 그대로 씁니다.
   여기는 그것을 감싸는 자리와 '상시 이벤트' 칸만 정합니다.
   ========================================================= */
.evc-wrap { margin: 4px 0 22px; }
.evc-none { font-size: 0.875rem; color: var(--text-muted); margin: 12px 0 0; }

/* 🔁 상시 이벤트 — 달력에 자리가 없는 것들.
   ⚠️ 기간이 없다고 안 보여주면 상시 모집·상시 할인이 통째로 묻힙니다. */
.evc-always {
  padding: 14px 16px; margin-bottom: 12px;
  background: var(--surface-2); border: 1px solid var(--line);
  border-radius: var(--radius-sm);
}
.evc-always-title {
  display: flex; align-items: center; gap: 8px;
  font-size: 0.9375rem; font-weight: 800; color: var(--heading); margin: 0;
}
.evc-n {
  min-width: 18px; padding: 1px 7px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-size: 0.6875rem; font-weight: 800; line-height: 1.6;
}
.evc-always-sub { font-size: 0.8125rem; color: var(--text-muted); margin: 4px 0 10px; }
.evc-always-list { display: flex; flex-direction: column; gap: 6px; }
.evc-always-row {
  display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap;
  padding: 9px 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  color: var(--text); text-decoration: none;
}
.evc-always-row:hover { border-color: var(--brand); }
.evc-always-row b { font-size: 0.9375rem; font-weight: 800; color: var(--heading); }
.evc-always-row span { font-size: 0.8125rem; color: var(--text-muted); }

/* 지금 하고 있는 이벤트 */
.evc-now {
  display: inline-block; margin-left: 6px; vertical-align: middle;
  padding: 2px 7px; border-radius: 999px;
  background: var(--brand); color: #fff;
  font-size: 0.6875rem; font-weight: 800; line-height: 1.6;
}

/* 이벤트 달력의 줄은 <a> 라 밑줄이 생기지 않게 */
.cal-list a.cal-row { text-decoration: none; }

/* 🙋 관리 화면 — 입점 신청 카드 */
.adm-app {
  padding: 14px 16px; margin-bottom: 10px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.adm-app-head { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.adm-app-head b { font-size: 1rem; font-weight: 800; color: var(--heading); }
.adm-app-desc { font-size: 0.875rem; color: var(--text); margin: 8px 0 0; }
.adm-app-facts {
  display: flex; flex-wrap: wrap; gap: 6px 14px; margin-top: 8px;
  font-size: 0.8125rem; color: var(--text-muted);
}
.adm-app-facts a { color: var(--brand); }
.adm-app-memo {
  margin: 10px 0 0; padding: 8px 10px; border-radius: var(--radius-sm);
  background: var(--surface-2); font-size: 0.8125rem; color: var(--text);
}
.adm-app-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }

/* 🙋 업체 화면 — 내가 넣어둔 신청 */
.apply-mine { margin: 0 0 14px; }
.apply-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 14px; margin-bottom: 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.875rem; text-align: left;
}
.apply-row b { color: var(--heading); font-weight: 800; }
.apply-tag {
  padding: 2px 9px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-size: 0.6875rem; font-weight: 800;
}
.apply-public .apply-tag { background: var(--brand); color: #fff; }
.apply-rejected .apply-tag { background: #f6d7d7; color: #8a2020; }
.apply-say { flex: 1 1 200px; min-width: 0; color: var(--text-muted); font-size: 0.8125rem; }

/* =========================================================
   🤝 협력업체 BETA — 관리자 상태판
   ---------------------------------------------------------
   ⚠️ 이 무늬는 관리 화면에서만 씁니다. 일반 화면에는 협력업체
      BETA 와 관련된 어떤 자리도 두지 않습니다.
   ========================================================= */
.pb-state, .pb-feats, .pb-sp {
  padding: 12px 14px; margin-bottom: 14px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pb-row {
  display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap;
  padding: 4px 0; font-size: 0.875rem; color: var(--text);
}
.pb-row b { color: var(--heading); font-weight: 800; min-width: 9em; }
.pb-on, .pb-off {
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 800; line-height: 1.6;
}
.pb-on { background: var(--brand); color: #fff; }
.pb-off { background: var(--chip-bg); color: var(--text-muted); }
.pb-h { font-size: 1rem; font-weight: 800; color: var(--heading); margin: 22px 0 6px; }
.pb-h5 { font-size: 0.9375rem; font-weight: 800; color: var(--heading); margin: 16px 0 6px; }
.pb-pick { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-bottom: 12px; }
.pb-set { display: flex; flex-direction: column; gap: 10px; max-width: 520px; }
.pb-open {
  margin-top: 22px; padding: 12px 14px; border-radius: var(--radius-sm);
  background: var(--chip-bg); color: var(--text); font-size: 0.875rem;
}

.pb-stats { padding: 14px; border: 1px solid var(--line); border-radius: var(--radius-sm); }
.pb-stats-head { display: flex; gap: 10px; align-items: baseline; flex-wrap: wrap; margin-bottom: 12px; }
.pb-stats-head b { font-size: 1rem; color: var(--heading); }
/* 숫자 카드 — 휴대폰에서도 두 칸씩 들어가게 (사장님은 폰으로 보십니다) */
.pb-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.pb-card {
  padding: 14px; text-align: center;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.pb-card-n { display: block; font-size: 1.5rem; font-weight: 800; color: var(--heading); }
.pb-card-l { display: block; margin-top: 4px; font-size: 0.8125rem; color: var(--text-muted); }

@media (max-width: 700px) {
  .pb-cards { grid-template-columns: repeat(2, 1fr); }
  .pb-row b { min-width: 0; }
  .pb-pick { flex-direction: column; align-items: stretch; }
}

/* =========================================================
   🤝 협력업체 기능 — 혜택 목록
   ---------------------------------------------------------
   ⚠️ 관리 화면 전용입니다. 일반 화면에는 협력업체 BETA 와 관련된
      어떤 자리도 두지 않습니다.
   ========================================================= */
.pf-summary {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(110px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.pf-s-card {
  padding: 14px 10px; text-align: center; border-radius: var(--radius-sm);
  background: var(--surface-2); border: 1px solid var(--line);
}
.pf-s-card b { display: block; font-size: 1.625rem; font-weight: 800; color: var(--heading); }
.pf-s-card span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--text-muted); }
/* 상태별 색 — 왼쪽 띠로만 구별합니다. 카드 전체를 칠하면 숫자가 안 읽혀요 */
.pf-s-card.pf-done  { border-left: 4px solid #2f7d5a; }
.pf-s-card.pf-part  { border-left: 4px solid #c8901a; }
.pf-s-card.pf-frame { border-left: 4px solid #6b7280; }
.pf-s-card.pf-none  { border-left: 4px solid #b04a4a; }

.pf-list { display: flex; flex-direction: column; gap: 8px; }
.pf-item {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius-sm);
  overflow: hidden;
}
.pf-sum {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; cursor: pointer; list-style: none;
}
.pf-sum::-webkit-details-marker { display: none; }
.pf-sum::after { content: "▾"; margin-left: auto; color: var(--text-muted); font-size: 0.75rem; }
.pf-item[open] > .pf-sum::after { content: "▴"; }
.pf-item[open] > .pf-sum { border-bottom: 1px solid var(--line); }
.pf-name { font-size: 0.9375rem; font-weight: 800; color: var(--heading); }
.pf-badge {
  padding: 2px 9px; border-radius: 999px;
  font-size: 0.6875rem; font-weight: 800; line-height: 1.7;
}
/* 글자 대비를 4.5 넘게 잡았습니다 — 상태는 한눈에 읽혀야 하는 값이에요 */
.pf-badge.pf-done  { background: #d6ecdf; color: #14532d; }
.pf-badge.pf-part  { background: #fbeccc; color: #6b4708; }
.pf-badge.pf-frame { background: #e5e7eb; color: #374151; }
.pf-badge.pf-none  { background: #f6d7d7; color: #7f1d1d; }
.pf-on {
  padding: 2px 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--text-muted);
  font-size: 0.6875rem; font-weight: 800; line-height: 1.7;
}
.pf-on.is-on { background: var(--brand); color: #fff; }

.pf-body { padding: 14px; }
.pf-benefit { margin: 0 0 12px; font-size: 0.9375rem; line-height: 1.7; color: var(--text); }
.pf-facts { display: grid; grid-template-columns: 9em 1fr; gap: 6px 12px; margin: 0; }
.pf-facts dt { font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); }
.pf-facts dd { margin: 0; font-size: 0.875rem; color: var(--text); line-height: 1.6; }
.pf-facts code {
  padding: 1px 5px; border-radius: 4px;
  background: var(--surface-2); font-size: 0.8125rem;
}
.pf-miss { color: #b04a4a; font-weight: 800; }

@media (max-width: 700px) {
  .pf-summary { grid-template-columns: repeat(2, 1fr); }
  .pf-facts { grid-template-columns: 1fr; gap: 2px; }
  .pf-facts dt { margin-top: 8px; }
}

/* ==========================================================
   🏪 내 업체 관리 (shop-mine.js)
   ⚠️ 새 색·새 모서리를 만들지 않습니다. 이미 쓰던 토큰과
      .field / .btn / .empty-state 를 그대로 씁니다 —
      여기만 다르게 생기면 다른 사이트처럼 보입니다.
   ⚠️ 사장님은 가게에서 휴대폰으로 고치십니다. 폭이 좁아지면
      한 줄짜리들이 세로로 쌓이게 해 두었어요.
   ========================================================== */
.ms-wrap { max-width: 760px; }

/* ---- 맨 위: 가게 이름 ---- */
.ms-head {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding-bottom: 14px; margin-bottom: 14px; border-bottom: 1px solid var(--line);
}
.ms-head-t { flex: 1 1 200px; min-width: 0; }
.ms-head-t h2 { margin: 0; font-size: 1.35rem; color: var(--heading); }
.ms-note { margin: 4px 0 0; font-size: 0.8125rem; color: var(--text-muted); }
.ms-hidden {
  margin-left: 6px; padding: 2px 8px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted);
  font-size: 0.75rem; vertical-align: middle;
}
.ms-pick, .ms-all {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin-bottom: 12px; font-size: 0.9375rem;
}
.ms-pick select {
  padding: 7px 10px; border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: inherit; max-width: 100%;
}

/* ---- 완성도 ---- */
.ms-done {
  padding: 14px 16px; margin-bottom: 16px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius);
}
.ms-done-top { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; }
.ms-done-n { font-size: 1.25rem; }
/* 대비를 재서 고른 색입니다 (옅은 표면 위 4.5:1 이상) */
.ms-good { color: #1f7a45; }
.ms-mid  { color: #8a5a00; }
.ms-low  { color: #a33a2a; }
.ms-bar {
  height: 10px; margin: 8px 0 10px; border-radius: 999px;
  background: rgba(0, 0, 0, .10); overflow: hidden;
}
.ms-bar-in { display: block; height: 100%; border-radius: 999px; background: currentColor; }
.ms-miss { margin: 0; font-size: 0.8125rem; color: var(--text-muted); line-height: 2; }
.ms-miss-i {
  display: inline-block; margin: 0 4px 0 0; padding: 2px 8px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 999px;
  color: var(--text);
}
.ms-all-done { color: var(--chip-text); }

/* ---- 바로가기 ---- */
.ms-gos {
  display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr));
  gap: 10px; margin-bottom: 18px;
}
.ms-go {
  display: flex; align-items: center; gap: 10px; text-align: left;
  padding: 12px 14px; font-family: inherit; font-size: 0.9375rem;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--radius); cursor: pointer;
}
.ms-go:hover:not(:disabled) { border-color: var(--brand); }
.ms-go-ico { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.ms-go-t { display: flex; flex-direction: column; min-width: 0; }
.ms-go-t b { color: var(--heading); }
.ms-go-t i { font-style: normal; font-size: 0.8125rem; color: var(--text-muted); }
/* 잠긴 문 — 없는 척하지 않고, 잠겼다는 것만 보여줍니다 */
.ms-locked { opacity: .55; cursor: default; }

/* ---- 접히는 카드 ---- */
.ms-card {
  margin-bottom: 12px; background: var(--surface);
  border: 1px solid var(--line); border-radius: var(--radius); overflow: hidden;
}
.ms-card > summary {
  display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 13px 16px; cursor: pointer; list-style: none;
}
.ms-card > summary::-webkit-details-marker { display: none; }
.ms-card > summary::after { content: "▾"; color: var(--text-muted); transition: transform .18s ease; }
.ms-card[open] > summary::after { transform: rotate(180deg); }
.ms-card > summary b { color: var(--heading); }
.ms-sum { font-size: 0.8125rem; color: var(--text-muted); margin-left: auto; }
.ms-card-in { padding: 14px 16px 16px; border-top: 1px solid var(--line); }
.ms-acts { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 12px; }
@media (prefers-reduced-motion: reduce) { .ms-card > summary::after { transition: none; } }

/* ---- 🐾 취급 생물 빠른 관리 ---- */
.ms-spbar { display: flex; gap: 8px; margin-bottom: 12px; flex-wrap: wrap; }
.ms-spbar input {
  flex: 1 1 200px; min-width: 0; padding: 9px 12px;
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text); font-family: inherit;
}
.ms-splist { display: flex; flex-direction: column; gap: 6px; }
.ms-sp {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ms-sp.off { opacity: .5; }
.ms-sp-n { flex: 1 1 auto; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sp-n i { font-style: italic; font-size: 0.8125rem; color: var(--text-muted); margin-left: 6px; }
.ms-sp-st {
  flex: 0 0 auto; padding: 5px 8px; font-family: inherit; font-size: 0.8125rem;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
}
.ms-sp-on {
  flex: 0 0 auto; padding: 5px 10px; font-family: inherit; font-size: 0.75rem;
  background: var(--surface); color: var(--text-muted);
  border: 1.5px solid var(--line); border-radius: 999px; cursor: pointer;
}
.ms-sp-on.on { background: var(--chip-bg); color: var(--chip-text); border-color: var(--chip-text); }
.ms-sp-x {
  flex: 0 0 auto; width: 26px; height: 26px; line-height: 1;
  background: none; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; border-radius: 50%;
}
.ms-sp-x:hover { background: rgba(0, 0, 0, .07); color: #a33a2a; }

/* ---- 🕒 요일별 영업시간 ---- */
.ms-hours { display: flex; flex-direction: column; gap: 6px; margin-top: 4px; }
.ms-hrow {
  display: flex; align-items: center; gap: 8px;
  padding: 6px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.ms-hday { flex: 0 0 24px; text-align: center; color: var(--heading); }
.ms-hrow input[type="time"] {
  flex: 1 1 90px; min-width: 0; padding: 6px 8px; font-family: inherit;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
}
.ms-hrow input[type="time"]:disabled { opacity: .4; }
.ms-hwave { color: var(--text-muted); }
.ms-hoff {
  flex: 0 0 auto; display: flex; align-items: center; gap: 4px;
  font-size: 0.8125rem; color: var(--text-muted);
}

/* ---- 🚧 임시휴무 ---- */
.ms-cls { list-style: none; margin: 0 0 14px; padding: 0; display: flex; flex-direction: column; gap: 6px; }
.ms-cl {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  padding: 8px 10px; background: var(--surface-2);
  border: 1px solid var(--line); border-radius: var(--radius-sm); font-size: 0.875rem;
}
.ms-cl.off { opacity: .5; }
.ms-cl-none { color: var(--text-muted); font-size: 0.875rem; }
.ms-cl-k { padding: 2px 8px; border-radius: 999px; font-size: 0.75rem; }
/* 대비를 재고 고른 세 가지 — 어두운 글씨 + 옅은 바탕 */
.ms-cl-closed  { background: #fbe0dc; color: #8c2f20; }
.ms-cl-short   { background: #fdefd2; color: #7a5200; }
.ms-cl-special { background: #dcecfb; color: #1c4e80; }
.ms-cl-d { color: var(--text); }
.ms-cl-n { color: var(--text-muted); }
.ms-cl-past { color: var(--text-muted); font-size: 0.75rem; }
.ms-cl-x {
  margin-left: auto; width: 26px; height: 26px; line-height: 1;
  background: none; border: none; color: var(--text-muted);
  font-size: 1.1rem; cursor: pointer; border-radius: 50%;
}
.ms-cl-x:hover { background: rgba(0, 0, 0, .07); color: #a33a2a; }
.ms-cl2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.ms-clform { padding-top: 12px; border-top: 1px dashed var(--line); }

/* 🕒 손님 화면 — 지금 영업 중인지와 임시휴무 안내 */
.sd-open {
  display: inline-flex; align-items: center; gap: 6px;
  margin-left: 8px; padding: 2px 10px; border-radius: 999px; font-size: 0.8125rem;
  vertical-align: middle;
}
.sd-open-open   { background: #dff2e5; color: #1f6b40; }
.sd-open-closed { background: var(--surface-2); color: var(--text-muted); }
.sd-closures { margin: 10px 0 0; padding: 0; list-style: none; display: flex; flex-direction: column; gap: 6px; }
.sd-closures li {
  padding: 8px 12px; border-radius: var(--radius-sm); font-size: 0.875rem;
  background: #fdefd2; color: #7a5200;
}

/* 📱 휴대폰 — 사장님은 가게에서 한 손으로 고치십니다 */
@media (max-width: 700px) {
  .ms-gos { grid-template-columns: 1fr; }
  .ms-cl2 { grid-template-columns: 1fr; }
  .ms-head-t h2 { font-size: 1.15rem; }
  /* 취급 생물 한 줄이 좁아지면 이름 아래로 단추들을 내립니다 */
  .ms-sp { flex-wrap: wrap; }
  .ms-sp-n { flex: 1 1 100%; }
  .ms-sp-st { flex: 1 1 auto; }
  /* 영업시간도 마찬가지 — 요일·시각·휴무가 한 줄에 다 안 들어갑니다 */
  .ms-hrow { flex-wrap: wrap; }
  .ms-hday { flex: 0 0 100%; text-align: left; }
  .ms-hrow input[type="time"] { flex: 1 1 40%; }
}

/* 🌙 어두운 화면 — 옅은 바탕 위 어두운 글씨를 그대로 두면 눈이 아픕니다.
   ⚠️ 토큰으로 못 쓰는 색(휴무 갈래 세 가지)만 여기서 다시 정합니다. */
:root[data-theme="dark"] .ms-bar { background: rgba(255, 255, 255, .14); }
:root[data-theme="dark"] .ms-good { color: #6cd39a; }
:root[data-theme="dark"] .ms-mid  { color: #e0b25c; }
:root[data-theme="dark"] .ms-low  { color: #f0917f; }
:root[data-theme="dark"] .ms-sp-x:hover,
:root[data-theme="dark"] .ms-cl-x:hover { background: rgba(255, 255, 255, .10); color: #f0917f; }
:root[data-theme="dark"] .ms-cl-closed  { background: #431f19; color: #f5b1a4; }
:root[data-theme="dark"] .ms-cl-short   { background: #3a2f16; color: #f0cd82; }
:root[data-theme="dark"] .ms-cl-special { background: #1b2f45; color: #a6cdf2; }
:root[data-theme="dark"] .sd-open-open { background: #1d3d2c; color: #8fdcae; }
:root[data-theme="dark"] .sd-closures li { background: #3a2f16; color: #f0cd82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms-bar { background: rgba(255, 255, 255, .14); }
  :root:not([data-theme="light"]) .ms-good { color: #6cd39a; }
  :root:not([data-theme="light"]) .ms-mid  { color: #e0b25c; }
  :root:not([data-theme="light"]) .ms-low  { color: #f0917f; }
  :root:not([data-theme="light"]) .ms-sp-x:hover,
  :root:not([data-theme="light"]) .ms-cl-x:hover { background: rgba(255, 255, 255, .10); color: #f0917f; }
  :root:not([data-theme="light"]) .ms-cl-closed  { background: #431f19; color: #f5b1a4; }
  :root:not([data-theme="light"]) .ms-cl-short   { background: #3a2f16; color: #f0cd82; }
  :root:not([data-theme="light"]) .ms-cl-special { background: #1b2f45; color: #a6cdf2; }
  :root:not([data-theme="light"]) .sd-open-open { background: #1d3d2c; color: #8fdcae; }
  :root:not([data-theme="light"]) .sd-closures li { background: #3a2f16; color: #f0cd82; }
}

/* ==========================================================
   📢 사이트 공지 배너 · 📣 협력업체 프로모션 (banners.js)
   ⚠️ 둘이 절대 같아 보이면 안 됩니다.
      · 공지 = 초록 테두리 (누리가 하는 말)
      · 광고 = 회색 바탕 + '광고 · 협력업체' 딱지
      섞이면 손님은 운영 공지까지 광고로 의심하게 됩니다.
   ⚠️ 화면을 덮지 않습니다. 목록 위 한 칸으로만 서요.
   ========================================================== */
#siteBanners { display: flex; flex-direction: column; gap: 10px; margin-bottom: 18px; }
#siteBanners:empty { display: none; }

.nb {
  position: relative;
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; border-radius: var(--radius);
  font-size: 0.9375rem; text-decoration: none;
}
.nb-img { width: 56px; height: 56px; object-fit: cover; border-radius: var(--radius-sm); flex: 0 0 auto; }
.nb-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1 1 auto; }
.nb-t b { color: var(--heading); }
.nb-t span { font-size: 0.8125rem; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* ---- 📢 운영 공지 ---- */
.nb-notice {
  background: var(--chip-bg); border: 1.5px solid var(--chip-text); color: var(--text);
}
a.nb-notice:hover { filter: brightness(0.97); }
.nb-go { color: var(--chip-text); font-size: 1.1rem; flex: 0 0 auto; }

/* ---- 📣 협력업체 광고 ---- */
.nb-promo {
  flex-direction: column; align-items: stretch; gap: 8px;
  background: var(--surface-2); border: 1px solid var(--line);
  padding-right: 44px;                 /* 닫기 단추 자리 */
}
/* 딱지 — 지우지 마세요. 광고를 광고라고 안 적으면 속임수가 됩니다. */
.nb-ad {
  align-self: flex-start;
  padding: 2px 9px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  color: var(--text-muted); font-size: 0.6875rem; letter-spacing: .02em;
}
.nb-preview {
  align-self: flex-start; padding: 2px 9px; border-radius: 999px;
  background: #fdefd2; color: #7a5200; font-size: 0.6875rem;
}
.nb-promo-in {
  display: flex; align-items: center; gap: 12px;
  text-decoration: none; color: var(--text); min-width: 0;
}
.nb-logo {
  width: 44px; height: 44px; flex: 0 0 auto;
  display: grid; place-items: center; border-radius: var(--radius-sm);
  background: var(--surface); border: 1px solid var(--line); font-size: 1.4rem;
}
.nb-logo img { width: 100%; height: 100%; object-fit: cover; border-radius: var(--radius-sm); }
.nb-x {
  position: absolute; top: 10px; right: 10px;
  width: 28px; height: 28px; line-height: 1;
  background: none; border: none; color: var(--text-muted);
  font-size: 1.15rem; cursor: pointer; border-radius: 50%;
}
.nb-x:hover { background: rgba(0, 0, 0, .07); color: var(--text); }

@media (max-width: 700px) {
  /* 📱 휴대폰에서는 더 얇게 — 화면을 가리지 않게 */
  .nb { padding: 10px 12px; gap: 10px; }
  .nb-img { width: 44px; height: 44px; }
  .nb-promo { padding-right: 40px; }
}

/* ==========================================================
   🔔 알림 설정 · 🙈 숨긴 회원 (info.html?topic=account)
   ========================================================== */
.notif-list, .block-list { list-style: none; margin: 10px 0 0; padding: 0; }
.notif-row, .block-row {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; margin-bottom: 6px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
}
.notif-row label { display: flex; align-items: center; gap: 8px; flex: 1 1 auto; cursor: pointer; }
.notif-soon {
  padding: 2px 8px; border-radius: 999px; font-size: 0.6875rem;
  background: var(--surface); border: 1px solid var(--line); color: var(--text-muted);
}
.block-row span { flex: 1 1 auto; }

/* 🙈 내가 숨긴 분의 댓글 — 줄은 남기고 내용만 접습니다 */
.cmt-blocked { color: var(--text-muted); font-size: 0.875rem; }

/* ==========================================================
   📢 관리자 — 공지 예약 · 광고 관리
   ========================================================== */
.bn-form { display: grid; gap: 10px; margin-bottom: 18px; }
.bn-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
.bn-state {
  padding: 2px 9px; border-radius: 999px; font-size: 0.75rem;
}
.bn-live    { background: #dff2e5; color: #1f6b40; }   /* 지금 보이는 중 */
.bn-wait    { background: #dcecfb; color: #1c4e80; }   /* 예약 — 아직 이르다 */
.bn-done    { background: var(--surface-2); color: var(--text-muted); }
.bn-draft   { background: #fdefd2; color: #7a5200; }
.bn-hidden  { background: var(--surface-2); color: var(--text-muted); }
/* 검색 0건 → 바로 할 일 */
.zero-do { display: flex; gap: 6px; flex-wrap: wrap; }
.zero-do a, .zero-do button {
  padding: 3px 9px; font-family: inherit; font-size: 0.75rem;
  background: var(--surface); color: var(--text);
  border: 1px solid var(--line); border-radius: 999px;
  cursor: pointer; text-decoration: none;
}
.zero-do a:hover, .zero-do button:hover { border-color: var(--brand); color: var(--brand); }

@media (max-width: 700px) { .bn-2 { grid-template-columns: 1fr; } }

/* 🌙 어두운 화면 */
:root[data-theme="dark"] .nb-preview { background: #3a2f16; color: #f0cd82; }
:root[data-theme="dark"] .nb-x:hover { background: rgba(255, 255, 255, .10); }
:root[data-theme="dark"] .bn-live   { background: #1d3d2c; color: #8fdcae; }
:root[data-theme="dark"] .bn-wait   { background: #1b2f45; color: #a6cdf2; }
:root[data-theme="dark"] .bn-draft  { background: #3a2f16; color: #f0cd82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .nb-preview { background: #3a2f16; color: #f0cd82; }
  :root:not([data-theme="light"]) .nb-x:hover { background: rgba(255, 255, 255, .10); }
  :root:not([data-theme="light"]) .bn-live   { background: #1d3d2c; color: #8fdcae; }
  :root:not([data-theme="light"]) .bn-wait   { background: #1b2f45; color: #a6cdf2; }
  :root:not([data-theme="light"]) .bn-draft  { background: #3a2f16; color: #f0cd82; }
}

/* 📢 업데이트 노트 (assets/data/updates.json) */
.upd h3 { display: flex; align-items: baseline; gap: 10px; flex-wrap: wrap; }
.upd-date { font-size: 0.8125rem; color: var(--text-muted); font-weight: 400; }
.upd-lead { font-size: 1rem; color: var(--heading); }
.upd-sub { margin: 16px 0 6px; font-size: 0.9375rem; color: var(--heading); }

/* ⚠️ 로고가 손님에게 안 보일 때 사장님께 알리는 줄 */
.ms-logo-warn {
  margin: 0 0 14px; padding: 10px 14px; border-radius: var(--radius-sm);
  background: #fdefd2; color: #7a5200; font-size: 0.875rem; line-height: 1.6;
}
:root[data-theme="dark"] .ms-logo-warn { background: #3a2f16; color: #f0cd82; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .ms-logo-warn { background: #3a2f16; color: #f0cd82; }
}

/* 🐾 업체 수정 폼의 취급 생물 목록 — 분류로 묶어 보여줍니다
   ⚠️ 수십 종을 한 줄로 늘어놓으면 읽을 수가 없어요. */
.sf-sp-count { margin: 12px 0 4px; font-size: 0.8125rem; color: var(--text-muted); }
.sf-sp-count b { color: var(--heading); }
.sf-sp-group { margin-bottom: 10px; }
.sf-sp-group h5 {
  margin: 8px 0 4px; font-size: 0.8125rem; color: var(--text-muted);
  display: flex; align-items: center; gap: 6px;
}
.sf-sp-group h5 span {
  padding: 0 6px; border-radius: 999px;
  background: var(--surface-2); color: var(--text-muted); font-size: 0.6875rem;
}
/* 목록에서 바로 바꾸는 상태 고르개 */
.sf-sp-st {
  flex: 0 0 auto; padding: 4px 8px; font-family: inherit; font-size: 0.8125rem;
  background: var(--surface); color: var(--text);
  border: 1.5px solid var(--line); border-radius: var(--radius-sm);
}
@media (max-width: 700px) {
  /* 좁은 화면에서는 이름 아래로 상태·지우기를 내립니다 */
  .sf-sp-card { flex-wrap: wrap; }
  .sf-sp-card .sf-sp-nm { flex: 1 1 100%; }
  .sf-sp-st { flex: 1 1 auto; }
}

/* ==========================================================
   👆 손가락으로 누르는 기기에서만 터치 영역 넓히기
   ----------------------------------------------------------
   ⚠️ @media (pointer: coarse) 안에만 둡니다. 마우스로 쓰는 PC 는
      한 픽셀도 안 바뀝니다 — 아이콘을 키우는 게 아니라 '누르는 자리'
      만 넓히는 것이라 보이는 모습도 그대로예요.
   ⚠️ 재보니 이랬습니다:
        · 글쓰기 서식 단추(.ed-fmt)  38×40  → 폭이 2px 모자랐어요
        · 머리줄 아이콘(.icon-btn)   30×30  → 한참 작습니다
        · 생물 태그 지우기(×)        26×26
      권장 최소는 44px 입니다. 작은 단추는 옆 단추를 잘못 누르게 돼요.
   ========================================================== */
@media (pointer: coarse) {
  /* ✍️ 글쓰기 서식 단추 — 아이콘 크기는 그대로, 칸만 넓힙니다 */
  .ed-fmt {
    min-width: 44px;
    min-height: 44px;
  }
  /* 단추끼리 너무 붙어 있으면 옆것을 누릅니다 */
  .ed-toolbar { gap: 6px; }

  /* 🔔 머리줄 아이콘 (설정·앱·알림)
     ⚠️ 아이콘을 키우면 머리줄이 무너집니다. 그래서 보이지 않는
        가장자리를 덧대어 누르는 자리만 넓혔어요 — 자리는 그대로 두고
        손가락만 더 잘 닿게 합니다. */
  .icon-btn { position: relative; }
  .icon-btn::after {
    content: ""; position: absolute; inset: -7px; border-radius: inherit;
  }

  /* 🐾 생물 태그 지우기 × — 같은 방식 */
  .species-close { position: relative; }
  .species-close::after {
    content: ""; position: absolute; inset: -9px; border-radius: 50%;
  }

  /* 👤 프로필 단추도 34px 이라 조금 모자랍니다 */
  .profile-trigger { position: relative; }
  .profile-trigger::after {
    content: ""; position: absolute; inset: -5px; border-radius: inherit;
  }
}

/* ☎️ 🗺 🌐 병원 상세의 바로 하기 단추 */
.hd-acts { display: flex; gap: 8px; flex-wrap: wrap; margin: 4px 0 14px; }
.hd-acts .btn { flex: 1 1 auto; min-width: 120px; text-align: center; }
@media (max-width: 380px) { .hd-acts .btn { min-width: 100%; } }

/* ==========================================================
   ↔️ 옆으로 더 있다는 표시 (가로로 미는 칸)
   ----------------------------------------------------------
   ⚠️ 칩 줄이 옆으로 밀리는 건 아는 사람만 압니다. 화면 끝에서 딱
      잘려 보이면 '여기까지가 전부' 로 읽혀요.
   ⚠️ 자바스크립트 없이 합니다. 배경 두 장을 겹치는데
        · local  로 붙인 것은 내용과 '같이' 움직이고
        · scroll 로 붙인 것은 칸에 '붙박이' 입니다.
      끝까지 밀면 local 배경이 그림자를 덮어 가려서, 더 갈 곳이
      없을 때 표시가 저절로 사라집니다. 상태를 세는 코드가 없어요.
   ⚠️ 손가락으로 미는 기기에서만 켭니다 — 마우스는 스크롤바가 보여요.
   ⚠️ 실제 스크롤은 그대로입니다. 보이는 것만 더합니다.
   ========================================================== */
/* ⚠️ .hub-boards .filterbar 는 여기서 뺐습니다 — 게시판 목록이 세로로
      바뀌어 옆으로 밀 일이 없어졌어요. 가로 '더 있어요' 그림자를 그대로
      두면 세로 목록 양옆에 이유 없는 그늘이 집니다. */
@media (pointer: coarse) {
  .shop-find .filterbar,
  .cat-bar-inner {
    background-image:
      /* ① 왼쪽·오른쪽 '가림막' — 내용과 함께 움직입니다(local) */
      linear-gradient(to right, var(--bg) 40%, rgba(0, 0, 0, 0)),
      linear-gradient(to left,  var(--bg) 40%, rgba(0, 0, 0, 0)),
      /* ② 그 아래 깔리는 '더 있어요' 그림자 — 칸에 붙박이(scroll) */
      radial-gradient(farthest-side at 0 50%,   rgba(0, 0, 0, .16), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(0, 0, 0, .16), rgba(0, 0, 0, 0));
    background-position: left center, right center, left center, right center;
    background-size: 26px 100%, 26px 100%, 13px 100%, 13px 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
  }
}
/* 🌙 어두운 화면에서는 그림자를 밝은 쪽으로 뒤집습니다 (검정 위 검정은 안 보여요).
   ⚠️ 반드시 (pointer: coarse) 안에 두어야 합니다. 밖에 두었더니 PC
      어두운 화면에서도 배경이 깔렸는데, 거기서는 위쪽 규칙이 안 걸려
      background-size 가 없어서 칸 전체가 물들 뻔했습니다. */
@media (pointer: coarse) {
  :root[data-theme="dark"] .shop-find .filterbar,
  :root[data-theme="dark"] .cat-bar-inner {
    background-image:
      linear-gradient(to right, var(--bg) 40%, rgba(0, 0, 0, 0)),
      linear-gradient(to left,  var(--bg) 40%, rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 0 50%,   rgba(255, 255, 255, .20), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, .20), rgba(0, 0, 0, 0));
  }
}
@media (pointer: coarse) and (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .shop-find .filterbar,
  :root:not([data-theme="light"]) .cat-bar-inner {
    background-image:
      linear-gradient(to right, var(--bg) 40%, rgba(0, 0, 0, 0)),
      linear-gradient(to left,  var(--bg) 40%, rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 0 50%,   rgba(255, 255, 255, .20), rgba(0, 0, 0, 0)),
      radial-gradient(farthest-side at 100% 50%, rgba(255, 255, 255, .20), rgba(0, 0, 0, 0));
  }
}

/* ==========================================================
   🧭 누리 가이드 (guide.html)
   ⚠️ 새 색·새 모서리를 만들지 않습니다. 쓰던 토큰과 .chip/.empty-state
      를 그대로 씁니다 — 여기만 다르게 생기면 남의 사이트 같아요.
   ========================================================== */
.gd-find { position: relative; max-width: 520px; margin: 0 0 8px; }
.gd-find input {
  width: 100%; padding: 12px 40px 12px 16px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.9375rem;
}
.gd-find input:focus { outline: none; border-color: var(--brand); }
.gd-find .shop-search-x { position: absolute; right: 8px; top: 50%; transform: translateY(-50%); }
.gd-count { margin: 0 0 14px; font-size: 0.875rem; color: var(--text-muted); }

.gd-jump { display: flex; gap: 8px; flex-wrap: wrap; margin-bottom: 24px; }

/* 📂 분야는 접어 둡니다 — 서른여섯 개를 한 번에 펼치면 눈 둘 데가 없어요 */
.gd-sec {
  margin-bottom: 10px; scroll-margin-top: 90px;
  border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); overflow: hidden;
}
.gd-h {
  display: flex; align-items: center; gap: 12px;
  padding: 14px 16px; cursor: pointer; list-style: none;
  font-size: 1rem; color: var(--heading);
}
.gd-h::-webkit-details-marker { display: none; }
.gd-h::after {
  content: "▾"; margin-left: auto; color: var(--text-muted);
  transition: transform .18s ease; flex: 0 0 auto;
}
.gd-sec[open] > .gd-h::after { transform: rotate(180deg); }
.gd-sec[open] > .gd-h { border-bottom: 1px solid var(--line); }
.gd-h:hover { background: var(--surface-2); }
.gd-h-ico { font-size: 1.4rem; line-height: 1; flex: 0 0 auto; }
.gd-h-t { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.gd-h-t b { color: var(--heading); }
.gd-h-t i { font-style: normal; font-size: 0.8125rem; color: var(--text-muted); }
/* 몇 가지가 들어 있는지 — 접힌 채로도 알 수 있게 */
.gd-n {
  flex: 0 0 auto; min-width: 22px; padding: 1px 8px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-size: 0.75rem; text-align: center;
}
.gd-sec .gd-grid { padding: 14px 16px 16px; }
/* ⚠️ 접혔을 때 반드시 감춥니다.
      <details> 는 브라우저가 알아서 접어 주는데, 안쪽 칸에
      display:grid 를 주면 그 처리를 덮어써서 접혀 보이기만 하고
      자리는 그대로 차지합니다 (재보니 닫힌 칸이 660px 였어요).
      그러면 접는 뜻이 없죠 — 화면만 길어집니다. */
.gd-sec:not([open]) > .gd-grid { display: none; }
@media (prefers-reduced-motion: reduce) { .gd-h::after { transition: none; } }
.gd-who, .gd-who-sm {
  padding: 2px 9px; border-radius: 999px; font-style: normal;
  background: var(--surface-2); color: var(--text-muted); font-size: 0.6875rem;
}
.gd-grid {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 10px;
}
.gd-card {
  display: flex; align-items: flex-start; gap: 12px;
  padding: 14px 16px; border: 1.5px solid var(--line); border-radius: var(--radius);
  background: var(--surface); color: inherit; text-decoration: none;
  transition: border-color .15s ease, box-shadow .15s ease;
}
.gd-card:hover { border-color: var(--brand); box-shadow: var(--shadow-sm); }
.gd-ico { font-size: 1.5rem; line-height: 1.2; flex: 0 0 auto; }
.gd-t { display: flex; flex-direction: column; gap: 3px; min-width: 0; }
.gd-t b { color: var(--heading); font-size: 0.9375rem; }
.gd-t > span { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; }

@media (max-width: 700px) {
  .gd-grid { grid-template-columns: 1fr; }
  .gd-sec { margin-bottom: 24px; }
}
@media (prefers-reduced-motion: reduce) { .gd-card { transition: none; } }

/* 🧭 홈 — 안내 단추 아래의 '상세 가이드' 길
   ⚠️ 안내 단추보다 조용하게. 둘이 똑같이 생기면 또 헷갈립니다. */
.tour-guide-link {
  display: block; margin-top: 10px; padding: 10px 12px;
  border: 1px dashed var(--line); border-radius: var(--radius-sm);
  color: var(--text-muted); text-decoration: none;
  font-size: 0.8125rem; text-align: center; line-height: 1.5;
}
.tour-guide-link b { color: var(--heading); }
.tour-guide-link:hover { border-color: var(--brand); color: var(--text); }

/* 🧭 안내가 끝난 뒤 — "더 궁금하세요?" */
.tour-more {
  position: fixed; left: 50%; bottom: 24px; transform: translateX(-50%);
  z-index: 940; width: min(420px, calc(100vw - 32px));
  padding: 18px 20px; border-radius: var(--radius);
  background: var(--surface); border: 1.5px solid var(--brand);
  box-shadow: var(--shadow-lg); text-align: center;
}
.tour-more-t { margin: 0 0 4px; font-size: 1rem; color: var(--heading); }
.tour-more-s { margin: 0 0 14px; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; }
.tour-more-btns { display: flex; gap: 8px; flex-wrap: wrap; justify-content: center; }
.tour-more-btns .tour-btn { flex: 1 1 auto; min-width: 130px; text-align: center; text-decoration: none; }
@media (max-width: 420px) { .tour-more-btns .tour-btn { min-width: 100%; } }

/* 🔐 비밀번호 찾기 — 두 걸음 안내
   ---------------------------------------------------------
   ⚠️ 인증을 안 한 분께는 '재설정 링크' 가 아니라 '인증 메일' 이 갑니다.
      그걸 모르고 있으면 메일을 받고도 "재설정 링크가 아니네" 하고
      그냥 닫아 버려요. 그래서 누르기 '전에' 두 걸음이라는 걸 알립니다.
   ⚠️ 개척자 칭호를 함께 걸어 둡니다 — 옛 회원께 인증할 이유가 됩니다. */
.fg-steps {
  margin: 0 0 18px;
  padding: 14px 16px;
  background: var(--chip-bg);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.fg-steps-head {
  margin: 0 0 8px;
  font-size: 0.9375rem;
  color: var(--heading);
}
.fg-steps-list {
  margin: 0;
  padding-left: 1.25em;
  display: grid;
  gap: 5px;
  font-size: 0.875rem;
  color: var(--text);
}
.fg-steps-list li::marker { color: var(--brand); font-weight: 700; }
.fg-bonus {
  display: inline-block;
  margin-left: 2px;
  color: var(--accent-text, var(--accent));
  font-weight: 700;
}
.fg-steps-foot {
  margin: 9px 0 0;
  font-size: 0.8125rem;
  color: var(--text-muted);
}

/* 🆘 계정 복구 요청 (관리 화면)
   ⚠️ '적어 낸 값' 이 본인 것이라는 증명이 아니라는 걸 화면에서 계속
      상기시킵니다. 표만 보면 그 값을 그대로 믿고 붙이기 쉬워요. */
.rec-warn {
  margin: 12px 0 14px;
  padding: 12px 14px;
  background: var(--warn-soft, #fdf1e3);
  border: 1px solid var(--warn-line, #f0d6b4);
  border-left: 3px solid var(--accent);
  border-radius: 0 10px 10px 0;
  font-size: 0.875rem;
  line-height: 1.65;
}
.rec-typed { font-family: ui-monospace, monospace; font-size: 0.8125rem; word-break: break-all; }
.rec-ok  { color: var(--brand); font-weight: 700; }
.rec-no  { color: var(--text-muted); }
.rec-gone { font-size: 0.75rem; color: var(--text-muted); }
.rec-note { font-size: 0.75rem; color: var(--text-muted); }

/* 🚨 제1종 전투배치 안내 띠
   ⚠️ 너무 무섭게 만들지 않습니다. 회원 잘못이 아니고 읽기는 그대로 되니까요.
      상황을 알리되 겁주지 않는 선으로 맞췄습니다. */
.alert-banner {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px clamp(14px, 4vw, 26px);
  background: var(--warn-soft, #fdf1e3);
  border-bottom: 2px solid var(--accent);
  color: var(--ink-2, var(--text));
  font-size: 0.875rem;
  line-height: 1.5;
}
.alert-banner .ab-ico { flex: 0 0 auto; font-size: 1.05rem; }
.alert-banner .ab-text b { color: var(--heading); }
.alert-banner .ab-sub { color: var(--text-muted); }
@media (max-width: 560px) {
  .alert-banner { font-size: 0.8125rem; align-items: flex-start; }
  .alert-banner .ab-sub { display: block; }
}

/* 🔐 관리자 보안 화면 */
.sec-card {
  padding: 16px 18px;
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: 12px;
}
.sec-row {
  display: flex; justify-content: space-between; align-items: center;
  padding: 7px 0; border-bottom: 1px solid var(--line);
  font-size: 0.9375rem;
}
.sec-row:last-of-type { border-bottom: 0; }
.sec-label { color: var(--text-muted); }
.sec-on  { color: var(--brand); font-weight: 700; }
.sec-off { color: var(--accent-text, var(--accent)); font-weight: 700; }
.sec-alert-on { color: #c0392b; font-weight: 700; }
.sec-setup { margin-top: 14px; padding-top: 14px; border-top: 1px solid var(--line); }
/* 인증앱에 넣을 키 — 옮겨 적기 쉽게 띄웁니다 */
.sec-secret {
  font-family: ui-monospace, monospace;
  font-size: 1.0625rem; letter-spacing: .12em; word-break: break-all;
  padding: 10px 12px; margin: 8px 0;
  background: var(--chip-bg); border: 1px dashed var(--brand);
  border-radius: 8px;
}
/* 복구코드 — 한 번만 보이는 값이라 눈에 잘 띄게 */
.sec-codes {
  font-family: ui-monospace, monospace;
  font-size: 0.9375rem; line-height: 1.9; letter-spacing: .06em;
  padding: 12px 14px; margin: 8px 0;
  background: var(--code-bg, var(--chip-bg));
  border: 1px solid var(--line); border-radius: 10px;
  overflow-x: auto;
}
.sec-msg { margin: 8px 0 0; font-size: 0.875rem; }

/* ==========================================================
   🔑 비밀번호 찾기 안내 상자 — 의미 단위로 읽히게
   ----------------------------------------------------------
   ⚠️ 전역 .form-msg 는 건드리지 않습니다. 그 규칙은 가입·로그인·
      재설정 등 여러 화면이 함께 쓰고 있어서, 여기서 손대면
      엉뚱한 곳의 모양까지 바뀝니다.
      .fgm 이 붙었을 때만 적용되는 규칙만 더합니다.
   ⚠️ 좁은 화면에서 세 갈래 설명이 한 문단으로 이어지면 거의 못 읽어요.
      갈래마다 줄을 나누고, '누구인지' 를 굵게 먼저 보여줍니다.
   ========================================================== */
.form-msg.fgm { line-height: 1.5; }
.form-msg.fgm .fgm-head {
  margin: 0 0 8px;
  font-weight: 700;
}
.form-msg.fgm .fgm-case {
  display: block;
  margin-top: 6px;
  padding-left: 10px;
  border-left: 3px solid currentColor;
  font-weight: 500;
}
.form-msg.fgm .fgm-who {
  display: block;
  font-weight: 700;
}
.form-msg.fgm .fgm-what {
  display: block;
  /* ⚠️ 좁은 화면에서 이 줄이 가장 길어집니다. 조금 작게 두어
        한 줄에 담기는 글자 수를 늘립니다. */
  font-size: 0.94em;
  opacity: 0.92;
}
/* 넓은 화면에서는 갈래를 한 줄로 붙여도 읽기 좋습니다 */
@media (min-width: 560px) {
  .form-msg.fgm .fgm-who { display: inline; }
  .form-msg.fgm .fgm-what { display: inline; }
  .form-msg.fgm .fgm-who::after { content: " — "; font-weight: 400; }
}

/* ==========================================================
   🆘 계정 복구 마무리 화면 (recovery.html)
   ========================================================== */
.rcv-steps {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin: 0 0 14px;
  padding: 12px;
  border-radius: 12px;
  background: var(--chip-bg);
}
.rcv-step { display: flex; align-items: center; gap: 8px; font-weight: 600; }
.rcv-step.done { opacity: 0.7; text-decoration: line-through; }
.rcv-mark { flex: none; }
.rcv-block {
  margin-top: 18px;
  padding-top: 16px;
  border-top: 1px solid var(--line);
}
.rcv-h { margin: 0 0 10px; font-size: 1.02rem; }
.rcv-note { margin: 0 0 10px; font-size: 0.9rem; color: var(--text-muted); line-height: 1.5; }
/* 끝난 칸은 흐리게 두고 손대지 못하게 합니다 */
.rcv-block.rcv-done { opacity: 0.45; pointer-events: none; }

/* 🔑 임시 비밀번호를 딱 한 번 보여주는 상자 (관리 화면) */
.rec-issued {
  margin: 0 0 16px;
  padding: 14px 16px;
  border: 2px solid var(--brand);
  border-radius: 14px;
  background: var(--chip-bg);
}
.rec-issued h4 { margin: 0 0 8px; }
.rec-issued-warn { margin: 8px 0; font-size: 0.9rem; line-height: 1.55; }
.rec-issued-list { margin: 8px 0 12px; padding-left: 20px; font-size: 0.88rem; line-height: 1.6; }

/* =========================================================
   📱 업체 페이지 모바일 배치 — '작은 PC 화면' 이 아니라 폰 화면으로
   ---------------------------------------------------------
   지난번에는 글씨와 여백만 줄였습니다. 그래도 답답했던 까닭은
   크기가 아니라 '배치' 였어요. PC 의 배치를 그대로 두고 축소만 하면
   요소 밀도는 그대로라, 화면이 길어진 이유가 '내용이 많아서' 가
   아니라 'UI 가 커서' 로 느껴집니다.

   그래서 이번에는 모바일에서 컴포넌트가 제 폭에 맞게 모양을 바꿉니다.
     ① 필터 칩 — 3~4줄로 쌓지 않고 한 줄로 옆으로 밉니다
     ② 업체 카드 — 이름 / 짧은 정보 / 소개 / 태그 / 행동 순으로 정리
     ③ 업체 탭 — 여러 줄 pill 대신 한 줄 가로 탭

   ⚠️ 전부 max-width: 700px 안입니다. PC 는 한 줄도 안 바뀝니다.
   ⚠️ transform: scale() · zoom · body 일괄 축소 · !important 쓰지 않습니다.
   ========================================================= */
@media (max-width: 700px) {

  /* ---------------------------------------------------------
     ① 필터 — 모바일에서는 접어 두고 '필터' 단추로 엽니다
     ---------------------------------------------------------
     소동물 9개 + 역할 4개 + 키워드 십 몇 개가 늘 펼쳐져 있어서,
     업체를 보러 온 사람이 필터부터 스크롤해야 했습니다.
     ⚠️ 옆으로 미는 방식(가로 스크롤)도 써 봤지만, 종류가 많을 때는
        무엇이 있는지 한눈에 안 보여 오히려 답답합니다. 접는 쪽이 맞아요.
     ⚠️ 필터 자체를 없애는 게 아닙니다. 자리만 옮깁니다 —
        같은 DOM 조각을 아래 시트로 옮겨 담으므로 기능·값·검색 로직은
        하나도 안 바뀝니다. */
  .shop-find .filter-group,
  .shop-pane > .filter-group { display: none; }

  /* 도구줄을 켜는 규칙은 파일 끝에 있습니다 (기본값보다 뒤에 와야 이깁니다) */

  /* ② 업체 탭 — 여러 줄 pill 대신 '지금 칸' 단추 하나로
     ---------------------------------------------------------
     다섯 개가 큰 pill 로 깔리면 두세 줄이 됩니다. 지금 보고 있는
     칸만 보여주고, 나머지는 눌렀을 때 목록으로 폅니다.
     ⚠️ 기능은 하나도 안 없앴습니다. 같은 .shop-tab 을 대신 눌러 줍니다. */
  .shop-tabs { display: none; }

  /* ---------------------------------------------------------
     ③ 업체 카드 — 정보 우선순위대로 세로로 정리
     ---------------------------------------------------------
     PC 는 [아이콘][본문][단추] 가로 3단입니다. 폰에서 그대로 두면
     본문 칸이 236px 밖에 안 남아 소개문이 다섯 줄로 늘어졌어요.
     폰에서는 아이콘과 이름을 한 줄로 세우고, 본문이 카드 폭을
     통째로 쓰게 합니다. */
  /* ⚠️ 가로 3단(아이콘·본문·단추)을 그대로 두면 본문 칸이 241px 밖에
        안 남습니다(375px 기준). 그 폭에서는 무슨 짓을 해도 소개문이
        토막 납니다. 그래서 아이콘을 왼쪽에 띄우고(float), 이름 줄만
        그 옆에 서게 한 뒤, 소개문부터는 카드 폭을 통째로 씁니다.
        → 본문 폭 241px → 303px (26% 넓어짐)
     ⚠️ absolute 로 얹지 않았습니다. 글이 길어지면 카드가 따라 늘어야 해요. */
  .list-card {
    display: block;
    padding: 14px 14px 12px;
  }
  .list-card .lc-ico {
    float: left;
    margin: 0 11px 2px 0;
  }
  .list-card .lc-body { min-width: 0; }
  /* 단추 줄은 아이콘 아래로 확실히 내려갑니다 */
  .list-card .lc-right { clear: both; min-width: 0; }

  /* 업체명 — 가장 중요합니다. 한 줄을 지키고, 밀리는 건 태그 쪽입니다.
     ⚠️ 이름 자체를 줄이지 않습니다. 이름이 이 카드의 정체예요. */
  .list-card .lc-body h3 {
    display: block;
    font-size: var(--m-h3, 1.125rem);   /* 공통 '카드 제목' 단계로 맞춥니다 */
    line-height: 1.35;
    margin: 0 0 5px;
    word-break: keep-all;          /* 한글은 어절 단위로 */
    overflow-wrap: anywhere;       /* 아주 긴 영문 상호만 예외 */
  }
  /* ✨ 협력 업체 딱지 — 인라인으로 둡니다.
     ⚠️ display:block 으로 제 줄을 만들려다 실패했습니다. 블록 상자는
        왼쪽에 띄운 아이콘을 피하지 않고 그 위에 겹쳐요(줄 상자만 피합니다).
        딱지가 아이콘을 덮어 버렸습니다. 인라인이 맞습니다. */
  .list-card .lc-body h3 .badge-partner {
    display: inline-block; margin: 0 5px 4px 0; vertical-align: middle;
  }

  /* 역할 태그는 이름 다음 줄로 자연스럽게 내려갑니다 */
  .list-card .lc-body h3 .badge-spec,
  .list-card .lc-body h3 .badge-near {
    display: inline-block;
    margin: 4px 4px 0 0;
    vertical-align: middle;
  }

  /* 짧은 핵심 정보(지역·취급 종수)는 한 줄로 묶어 자리를 아낍니다 */
  .list-card .shop-region,
  .list-card .shop-matched,
  .list-card .shop-spcount {
    display: inline-block;
    margin-right: 10px;
    font-size: 0.8125rem;
    line-height: 1.5;
  }

  /* 소개문 — 목록에서는 세 줄까지만. 나머지는 '소개 보기' 에서 봅니다.
     ⚠️ 글을 지우거나 자르는 게 아닙니다. 보여주는 줄 수만 줄여요.
     ⚠️ -webkit-line-clamp 는 Chrome 148 에서 display 계산이 어긋나
        먹지 않는 경우가 있어, max-height 를 함께 둡니다. */
  .list-card .addr {
    font-size: clamp(0.875rem, 3.7vw, 0.9375rem);
    line-height: 1.6;
    margin-top: 4px;
    word-break: keep-all;
    overflow-wrap: break-word;
    display: -webkit-box;
    -webkit-line-clamp: 3;
    -webkit-box-orient: vertical;
    overflow: hidden;
    max-height: calc(1.6em * 3);
  }

  /* 키워드 태그 — 두 줄까지만. 그 아래는 소개에서 봅니다. */
  .list-card .lc-tags {
    gap: 5px; margin-top: 8px;
    max-height: calc(1.9em * 2);
    overflow: hidden;
  }

  /* 행동 단추 — 카드 폭을 통째로 쓰되, 둘이면 나란히 */
  .list-card .lc-right.lc-links {
    display: flex; flex-wrap: wrap; gap: 6px;
    margin-top: 10px; padding-top: 10px;
    border-top: 1px solid var(--line);
  }
  .list-card .lc-links .btn,
  .list-card .lc-links .btn-sm {
    flex: 1 1 auto;
    /* 좌우를 먼저 줄이고 글씨는 지킵니다 (센세 지시).
       누르는 높이 44px 는 그대로예요. */
    padding: 10px 12px; min-height: 44px;
    font-size: 0.875rem;
    white-space: nowrap;
  }
  .list-card .shop-adm-btns { display: flex; gap: 6px; width: 100%; }
  .list-card .shop-adm-btns .cmt-adm { flex: 1 1 auto; min-height: 40px; }

  /* ---------------------------------------------------------
     ④ 바깥 여백 — 글이 들어갈 폭을 조금 더 벌어 줍니다
     ---------------------------------------------------------
     375px 에서 페이지 좌우 22px + 카드 좌우 22px 이 겹쳐,
     정작 글이 쓸 수 있는 폭이 236px 뿐이었습니다. */
  .shop-pane .post-list { gap: 10px; }
}

/* =========================================================
   📱 업체 페이지 — 모바일 도구줄 · 필터 시트
   ---------------------------------------------------------
   구조:  검색창 → [지금 칸 ▾] [필터 N] → 걸린 조건 칩 → 업체 목록
   ⚠️ PC 에서는 이 요소들이 통째로 없습니다(아래 기본값이 display:none).
      켜지는 건 모바일 미디어쿼리 안에서만이에요.
   ⚠️ 새 UI 라이브러리를 들이지 않았습니다. 기존 .chip / .btn 을 그대로 씁니다.
   ========================================================= */
.shop-mtools { display: none; gap: 8px; margin: 0 0 10px; }
.shop-mchips { display: none; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }

.shop-mbtn {
  flex: 1 1 0; min-width: 0; min-height: 44px;   /* 손가락으로 누르기 좋은 높이 */
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 10px 12px; border-radius: 999px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.9375rem; font-weight: 700;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  cursor: pointer;
}
.shop-mbtn:hover { border-color: var(--brand); }
/* 조건이 걸려 있으면 눈에 띄게 — 내가 무엇을 걸어 뒀는지 잊지 않게 */
.shop-mbtn.on { border-color: var(--brand); background: var(--chip-bg); color: var(--brand-strong, var(--brand)); }
.shop-mbtn .mb-n {
  display: inline-grid; place-items: center; min-width: 20px; height: 20px; padding: 0 5px;
  border-radius: 999px; background: var(--brand); color: var(--on-brand, #fff);
  font-size: 0.75rem; font-weight: 800;
}

/* 걸린 조건 칩 — 몇 개 안 되니 그냥 접힙니다(가로 스크롤 안 씁니다) */
.shop-mchip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 6px 10px; border-radius: 999px;
  background: var(--chip-bg); color: var(--brand-strong, var(--brand));
  border: 1px solid var(--brand-soft);
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  cursor: pointer;
}
.shop-mchip .x { font-size: 1rem; line-height: 1; opacity: .75; }
.shop-mchip:hover .x { opacity: 1; }

/* ---------- 아래에서 올라오는 시트 ---------- */
.shop-sheet[hidden] { display: none; }
.shop-sheet {
  position: fixed; inset: 0; z-index: 1200;
  display: flex; flex-direction: column; justify-content: flex-end;
}
.shop-sheet-bg { position: absolute; inset: 0; background: rgba(0,0,0,.45); border: 0; }
.shop-sheet-box {
  position: relative;
  background: var(--surface); color: var(--text);
  border-radius: 18px 18px 0 0;
  box-shadow: var(--shadow-lg);
  max-height: 86vh; display: flex; flex-direction: column;
  animation: shop-sheet-up .18s ease-out both;
}
@keyframes shop-sheet-up { from { transform: translateY(14px); opacity: .6; } to { transform: none; opacity: 1; } }
@media (prefers-reduced-motion: reduce) { .shop-sheet-box { animation: none; } }

.shop-sheet-head {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 16px 10px; border-bottom: 1px solid var(--line);
}
.shop-sheet-head h3 { margin: 0; font-size: 1.0625rem; color: var(--heading); }
.shop-sheet-x {
  border: 0; background: transparent; color: var(--text-muted);
  font-size: 1.5rem; line-height: 1; cursor: pointer;
  min-width: 44px; min-height: 44px;      /* 누르는 자리는 넉넉히 */
}
.shop-sheet-body { padding: 14px 16px 4px; overflow-y: auto; -webkit-overflow-scrolling: touch; }
/* 시트 안에서는 필터 묶음이 다시 보여야 합니다 (위에서 감춰 뒀으니 되살립니다) */
.shop-sheet-body .filter-group {
  display: block !important;              /* 감춤 규칙을 이 안에서만 되돌립니다 */
  margin-bottom: 16px;
}
.shop-sheet-body .filter-label { display: block; margin-bottom: 7px; font-size: 0.8125rem; }
.shop-sheet-body .filterbar {
  flex-wrap: wrap;                        /* 시트 안은 넓으니 그냥 접힙니다 */
  gap: 7px; margin-bottom: 0;
}
.shop-sheet-body .chip { font-size: 0.875rem; padding: 9px 13px; }

.shop-sheet-foot {
  display: flex; gap: 8px; padding: 12px 16px;
  padding-bottom: calc(12px + env(safe-area-inset-bottom, 0px));   /* 아이폰 아래턱 */
  border-top: 1px solid var(--line);
}
.shop-sheet-foot .btn { flex: 1 1 auto; min-height: 46px; font-size: 0.9375rem; }
.shop-sheet-foot .btn.wide { flex: 2 1 auto; }

/* 시트를 열면 뒤가 안 움직이게 */
body.sheet-open { overflow: hidden; }

/* ---------- 탭 고르기 목록 (시트 안) ---------- */
.shop-tabpick { display: grid; gap: 6px; padding: 12px 16px 4px; }
.shop-tabpick button {
  display: flex; align-items: center; gap: 8px;
  min-height: 48px; padding: 10px 14px; border-radius: 12px;
  border: 1.5px solid var(--line); background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.9375rem; font-weight: 700; text-align: left;
  cursor: pointer;
}
.shop-tabpick button.active { border-color: var(--brand); background: var(--chip-bg); color: var(--brand-strong, var(--brand)); }

/* 📱 도구줄·조건칩 켜기
   ⚠️ 위쪽 기본값(.shop-mtools { display:none })보다 '뒤' 에 있어야 이깁니다.
      처음엔 앞쪽 미디어쿼리에 적었는데, 파일 끝의 기본값이 나중에 읽혀
      그대로 감춰져 있었습니다.
   ⚠️ :not([hidden]) 으로 감쌉니다. 그냥 display:flex 로 두면 JS 가
      hidden 을 걸어도 계속 보입니다 (조건칩은 걸린 게 없으면 숨겨야 해요). */
@media (max-width: 700px) {
  .shop-mtools:not([hidden]) { display: flex; }
  .shop-mchips:not([hidden]) { display: flex; }
}

/* =========================================================
   📱 모바일 글씨 위계 — 누리 공통
   =========================================================
   왜 필요했나
   ---------------------------------------------------------
   누리의 PC 글씨 체계는 일부러 넉넉합니다 (본문 18px · 줄간격 1.8).
   넓은 화면에서는 시원하고 누리답습니다. 그런데 그 체계가 폰까지
   그대로 내려오면서, 375px 에서 이렇게 됐어요.

       섹션 설명 20px  >  히어로 리드 16.3px      ← 위계가 뒤집힘
       본문 18 / 분류카드 설명 16.5 / 칩 14.5     ← 셋이 몰려 있어
                                                   "다 비슷하게 크다"
       섹션 제목 30px · 히어로 제목 34px           ← 혼자 튀고
                                                   그 사이 단계가 비어 있음

   그래서 '전부 줄이기' 가 아니라 '단계를 벌리는' 작업입니다.

   모바일 단계 (375px 기준)
   ---------------------------------------------------------
       22~24  페이지 메인 제목   --m-h1
       19     섹션 제목         --m-h2
       17     카드 제목         --m-h3
       16     목록 행 제목       --m-h4
       15     본문              --m-body     ← 기준
       14     보조 설명         --m-sub
       13     메타             --m-meta
       12     태그 · 배지       --m-tag
       15     버튼 글씨         --m-btn

   ⚠️ 본문을 16px 아래로 내리지 않았습니다. 읽는 글이니까요.
      대신 '보조'(14)와 '메타'(13)를 확실히 떼어 놓아, 무엇이 본문이고
      무엇이 곁다리인지 눈으로 바로 갈리게 했습니다.
   ⚠️ 줄간격도 함께 내립니다(1.8 → 1.65). 폰에서 1.8 은 글자보다
      빈칸이 더 많아 보여서, 글이 '떠 있는' 느낌을 줍니다.
   ⚠️ 검색·입력칸은 16px 아래로 내리지 않습니다 — iOS 는 그보다 작은
      입력칸에 초점이 가면 화면을 제멋대로 확대합니다.
   ⚠️ 전부 max-width: 700px 안입니다. PC 는 한 줄도 안 바뀝니다.
   ⚠️ 이 블록이 08-market.css 끝에 있는 까닭은 이 파일이 마지막으로
      읽히기 때문입니다. 06·07 의 PC 값을 확실히 덮으려면 뒤에 와야 해요.
      (파일을 새로 만들면 모든 HTML 의 로딩 순서를 건드리게 됩니다)
   ========================================================= */
@media (max-width: 700px) {
  :root {
    /* 2026-09-02 한 단계 더 조였습니다.
       처음 잡은 값(26/20/18/17/16/14/13)은 단계는 갈렸지만 전체가
       여전히 큰 편이라, 폰에서 한 화면에 들어오는 글이 너무 적었어요.
       네이버 카페처럼 '한 화면에서 여러 글을 훑을 수 있는' 밀도를
       목표로 각 단계를 1~2px 씩 내리고 줄간격을 좁혔습니다. */
    --m-h1: clamp(1.375rem, 5.6vw, 1.5rem);  /* 22 ~ 24 */
    --m-h2: 1.1875rem;                        /* 19 */
    --m-h3: 1.0625rem;                        /* 17 */
    --m-h4: 1rem;                             /* 16 */
    --m-body: 0.9375rem;                      /* 15 */
    --m-sub: 0.875rem;                        /* 14 */
    --m-meta: 0.8125rem;                      /* 13 */
    --m-tag: 0.75rem;                         /* 12 */
    --m-btn: 0.9375rem;                       /* 15 */
    --m-lh-body: 1.55;
    --m-lh-tight: 1.4;
    --m-lh-head: 1.3;
  }

  /* ---------- 기준 ---------- */
  body { font-size: var(--m-body); line-height: var(--m-lh-body); }

  /* ---------- ① 페이지 메인 제목 ---------- */
  .hero h1,
  .page-hero h1,
  .article-title,
  .write-title { font-size: var(--m-h1); line-height: var(--m-lh-head); }
  .hero .lead,
  .page-hero p { font-size: var(--m-sub); line-height: var(--m-lh-body); }

  /* ---------- ② 섹션 제목 ---------- */
  .section-head h2,
  .band h2,
  .info-block h3,
  .how-card-head,
  .cmt-title,
  .preview-panel .pv-head h3 { font-size: var(--m-h2); line-height: var(--m-lh-head); }
  .section-head p { font-size: var(--m-sub); line-height: var(--m-lh-body); }

  /* ---------- ③ 카드 제목 ---------- */
  .cat-card h3,
  .card h3,
  .list-card .lc-body h3,
  .quick-card .qc-title,
  .rh-card-body h3 { font-size: var(--m-h3); line-height: var(--m-lh-head); }

  /* ---------- ④ 목록 행 제목 ---------- */
  .post-item .ptitle,
  .search-item .si-title,
  .mk-name,
  .board-trigger,
  .animal-tab .at-label { font-size: var(--m-h4); line-height: var(--m-lh-tight); }
  .board-item { font-size: var(--m-body); }

  /* ---------- ⑤ 본문 ----------
     ⚠️ 카드 안의 짧은 소개글(.cat-card p / .card p)은 본문이 아니라
        '보조' 로 내렸습니다. 본문(16)으로 두니 카드 제목(18)과 2px 밖에
        차이가 안 나서, 제목인지 설명인지 눈으로 안 갈렸어요. */
  .info-lead,
  .info-list li,
  .info-steps li,
  .faq summary,
  .how-steps li,
  .cmt-text,
  .editor-body { font-size: var(--m-body); line-height: var(--m-lh-body); }
  /* 글 본문만은 조금 더 큽니다 — 여기는 '읽으러 온' 곳이니까요 */
  .detail-para, .detail-text { font-size: 1.0625rem; line-height: 1.78; }

  /* ---------- ⑥ 보조 설명 ---------- */
  .cat-card p,
  .card p,
  .cat-card .count,
  .card .meta,
  .article-author,
  .sf-lead,
  .field-help,
  .info-note,
  .shop-find-hint { font-size: var(--m-sub); line-height: var(--m-lh-body); }

  /* ---------- ⑦ 메타 · 태그 ---------- */
  .post-item .pmeta,
  .search-item .si-snippet,
  .article-sub,
  .cmt-head strong,
  .pv-meta,
  .pv-title,
  .filter-label,
  .brand-sub { font-size: var(--m-meta); line-height: var(--m-lh-tight); }
  .chip { font-size: var(--m-meta); }
  .tag, .badge-spec, .badge-partner, .badge-open,
  .mk-status, .mk-free, .mk-cat { font-size: var(--m-tag); }

  /* ---------- ⑧ 버튼 ----------
     ⚠️ 누르는 높이(44px)는 그대로 두고 글씨와 좌우 여백만 줄입니다.
        시각적으로만 가볍게 만들고, 손가락에는 그대로예요. */
  .btn { font-size: var(--m-btn); padding: 10px 15px; min-height: 44px; }
  .btn-sm { font-size: var(--m-sub); padding: 8px 12px; min-height: 38px; }
  /* 보조 버튼은 한 단계 더 물러나게 — 주/보조가 눈으로 갈리도록 */
  .btn-ghost { font-weight: 400; }

  /* ---------- ⑨ 입력칸 ----------
     ⚠️ 16px 아래로 내리지 않습니다 (iOS 자동 확대 방지). */
  input, textarea, select,
  .search-page-form input { font-size: 1rem; }
  .field label { font-size: var(--m-sub); }

  /* ---------- ⑩ 줄바꿈 ----------
     한글은 어절 단위로 끊고, 아주 긴 영문·주소만 예외로 쪼갭니다.
     ⚠️ break-all 은 쓰지 않습니다 — 한글이 글자 단위로 찢어집니다. */
  .page-hero p, .hero .lead, .section-head p,
  .cat-card p, .card p, .info-lead,
  .post-item .ptitle, .search-item .si-title,
  .band p { word-break: keep-all; overflow-wrap: break-word; }
  /* 주소·링크처럼 띄어쓰기 없는 긴 값만 어디서든 쪼갭니다 */
  .si-url, .sf-link-body span, .addr-raw { overflow-wrap: anywhere; }

  /* ---------- ⑪ 간격 ----------
     글씨가 작아진 만큼 사이도 좁혀야 '같은 밀도' 로 보입니다.
     따로 안 줄이면 이번엔 빈칸만 남아 허전해져요. */
  .section { padding-top: 18px; padding-bottom: 18px; }
  .section-head { margin-bottom: 12px; }
  .section-head p { margin-top: 4px; }
  .card-grid, .cat-grid { gap: 10px; }
  .card, .cat-card { padding: 14px; }
  .post-item { padding-top: 10px; padding-bottom: 10px; }
}

/* ---------------------------------------------------------
   📱 머리 부분 밀도 — 내용이 더 빨리 시작되게
   ---------------------------------------------------------
   375px 에서 머리줄이 110px(헤더 60 + 단계바 49)이었습니다.
   812px 화면의 13.5% 를 메뉴가 먼저 먹고 시작하는 셈이에요.
   ⚠️ 기능·구성은 하나도 안 바꿉니다. 햄버거·검색·로그인·설정 그대로예요.
      높이와 사이 간격만 조금씩 줄입니다.
   ⚠️ 누르는 자리는 지킵니다 — 아이콘 단추 36px, 메뉴 항목 42px.
--------------------------------------------------------- */
@media (max-width: 700px) {
  /* ⚠️ padding 을 통째로 쓰면 안 됩니다. .nav 에는 .container 도 붙어 있어서
        좌우 22px 여백이 함께 사라집니다. 그 여백이 설정 단추 안 드롭다운이
        살짝 삐져나온 6px 을 받아 주고 있었어요. 없애자 화면이 6px 넘쳤습니다
        (375 → 381). 위아래만 따로 지정합니다. */
  .nav { min-height: 54px; padding-top: 6px; padding-bottom: 6px; gap: 8px; }
  .header-right { gap: 6px; }
  /* ⚠️ .icon-btn 크기는 건드리지 않습니다.
        '누르기 좋게' 36px 로 키웠다가 머리줄이 화면(375)을 6px 넘겼습니다.
        설정 단추 안에 숨은 드롭다운이 원래 몇 px 삐져나와 있는데,
        단추가 커지자 그게 화면 밖으로 밀려났어요. 배포본은 30px 입니다. */
  .brand { gap: 8px; }
  .brand-title { font-size: 0.9375rem; }

  /* 2차 메뉴(작은 생명들·정보·커뮤니티) */
  .cat-bar-inner > a,
  .cat-bar-inner .navmenu-trigger {
    /* ⚠️ **본문(14px)보다 크지 않게** 맞춥니다. 처음에 14.5 로 뒀더니
          mobile-text-test 의 계급 검사가 잡았어요 — 0.5px 이라도
          '길잡이가 읽는 글보다 크다' 는 규칙을 어긴 건 맞습니다. */
    font-size: 0.875rem !important;      /* 위 블록(15)에서 한 단계 더 — 14 */
    padding: 9px 12px !important;
    min-height: 42px;
  }
}

/* ---------------------------------------------------------
   📱 가로 넘침 막기 — 화제글·새 글 칸
   ---------------------------------------------------------
   375px 화면에서 문서가 439px 까지 늘어나 페이지가 옆으로 밀렸습니다
   (배포본에서도 그랬습니다 — 이번에 찾았어요).

   까닭: .feed-grid 는 폰에서 한 칸(1fr)인데, 그 안의 글 한 줄
   [썸네일][제목][메타] 이 줄어들기를 거부합니다. 격자 칸의 기본
   최소 너비가 '내용 너비(min-content)' 라서, 칸이 내용만큼 부풀어요.

   고치는 법은 정해져 있습니다 — 칸이 0 까지 줄어들 수 있다고 알려 주고
   (minmax(0,1fr)), 안쪽 상자에도 min-width:0 을 줍니다.
   그래야 넘치는 글자가 칸을 밀지 않고 칸 안에서 줄어듭니다.
--------------------------------------------------------- */
@media (max-width: 820px) {
  .feed-grid { grid-template-columns: minmax(0, 1fr); }
  .feed-col, .feed-list, .feed-item, .ff-body { min-width: 0; }
  /* 제목은 칸을 넘기지 말고 말줄임으로 */
  .ff-title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
}

/* =========================================================
   📱 모바일 정보 밀도 — 한 화면에 더 많은 '진짜 내용'
   ---------------------------------------------------------
   글씨 단계는 위에서 잡았고, 여기서는 '자리' 를 줄입니다.
   글씨만 줄이면 빈칸만 남아서 오히려 허전해져요.

   목표는 카페 앱 같은 목록 밀도입니다 —
       [글 제목 (최대 두 줄)]
       글쓴이 · 날짜 · 조회        [댓글 수]
   이 한 덩어리가 한 화면에 여러 개 들어오는 것.

   ⚠️ 누르는 자리는 줄이지 않았습니다. 글 한 줄은 통째로 누를 수
      있고(.pi-link 가 카드를 덮습니다), 단추는 44px 을 지킵니다.
      '보이는 크기' 와 '눌리는 크기' 는 같을 필요가 없어요.
   ⚠️ 굵기로는 위계를 못 만듭니다. 누리 글꼴(Jua)에는 굵기가 400
      하나뿐이라, 사이트가 이미 굵기를 400 으로 고정해 두었어요
      (06-pages.css). 그래서 위계는 크기와 색으로만 만듭니다.
   ========================================================= */
@media (max-width: 700px) {

  /* ---------- 글 목록 한 줄 ---------- */
  .post-item { gap: 10px; padding: 11px 4px; }
  .post-item .ptitle {
    line-height: 1.35;
    /* 한글 제목이 '섭씨 27~' 처럼 뜻 없이 갈라지지 않게 */
    word-break: keep-all; overflow-wrap: break-word;
  }
  .post-item .pmeta { margin-top: 4px; line-height: 1.35; }
  /* 썸네일·댓글 상자도 한 뼘 줄입니다 (76×60 은 폰에서 큽니다) */
  .post-item .pthumb { width: 58px; height: 46px; }
  .post-item .pthumb .emo { width: 24px; height: 24px; }
  .post-item .pthumb-emoji { font-size: 1.375rem; }
  .post-item .pright { gap: 8px; }
  /* 댓글 수는 제목 옆 붉은 [n] 이라 상자 크기 규칙이 필요 없습니다 */

  /* ---------- 페이지 머리(hero) ----------
     '사육 정보 / 어떤 생물의 정보를 찾으시나요?' 가 200px 을 쓰고
     있었습니다. 폰에서 머리글은 포스터가 아니라 이정표면 됩니다. */
  .page-hero { padding: 20px 0 16px; }
  .breadcrumb { margin-bottom: 8px; font-size: var(--m-meta); }
  .page-hero p { margin-top: 6px; }
  .cat-hero-inner { gap: 12px; }

  /* ---------- 칩 · 필터 ---------- */
  .chip { padding: 7px 11px; }
  .filterbar { gap: 6px; margin-bottom: 12px; }
  .filter-group { margin-bottom: 2px; }
  .sort-chips { gap: 5px; }
  .sort-chips .chip { font-size: var(--m-meta); padding: 6px 10px; }

  /* ---------- 게시판 고르기 · 글쓰기 줄 ----------
     ⚠️ 기능은 하나도 안 없앴습니다. 크기만 낮춥니다.
        '화제글 보기' 처럼 곁다리인 것은 시각 비중을 한 단계 더 낮춰요. */
  .board-trigger { padding: 8px 13px; min-height: 40px; }
  .board-item { padding: 9px 12px; }

  /* ---------- 카드 ---------- */
  .card, .cat-card { padding: 13px; }
  .card-grid, .cat-grid { gap: 9px; }
  .list-card { padding: 12px 12px 11px; }
  .lc-tags { gap: 5px; }

  /* ---------- 구역 사이 ----------
     PC 용 40~60px 여백이 폰까지 내려와 있던 곳을 줄입니다. */
  .section { padding-top: 16px; padding-bottom: 16px; }
  .section-head { margin-bottom: 10px; }
  .band { padding: 20px 16px; margin-top: 20px; }
  .post-list { margin-top: 6px; }
}

/* ---------------------------------------------------------
   📱 분류 칩이 화면의 5분의 1을 먹던 문제
   ---------------------------------------------------------
   390px 에서 .hub-filter 하나가 170px 이었습니다. 정보를 보러 온
   사람이 필터부터 네 줄 넘겨야 했어요.

   ⚠️ 앞에서 .chip 을 13px 로 내렸는데 안 먹었습니다.
      .hub-filter .chip (0,2,0) 이 그냥 .chip (0,1,0) 보다 강해서,
      제 규칙이 뒤에 있어도 집니다. 같은 세기로 맞춰 줍니다.
   ⚠️ 누르는 높이는 32px 를 지킵니다. 칩은 줄줄이 붙어 있는 게 아니라
      사이가 벌어져 있어서, 이 정도면 손가락으로 충분히 눌립니다.
--------------------------------------------------------- */
@media (max-width: 700px) {
  .hub-filter .chip,
  .filterbar .chip { font-size: var(--m-meta); padding: 7px 10px; }
  .hub-filter { gap: 5px; }

  /* 글 한 줄을 조금 더 조입니다 (88px → 80px 안팎) */
  .post-item { padding: 10px 4px; }
  .post-item .ptitle { line-height: 1.3; }
}

/* ---------------------------------------------------------
   📱 정렬 — 칩 셋을 늘어놓지 않고 단추 하나로 접기
   ---------------------------------------------------------
   폰에서 '최신순 / 유익해요순 / 조회순' 이 늘 펼쳐져 있어서
   도구줄이 세 줄을 먹었습니다. 한 줄에 우겨넣는 대신,
   누가 봐도 정렬인 단추(↕ 지금정렬 ▾) 하나로 접고 눌러서 폅니다.

   ⚠️ PC 는 그대로입니다 — 접는 단추는 여기(모바일)에서만 보이고,
      칩은 늘 펼쳐져 있습니다.
   ⚠️ 기능을 옮기거나 없애지 않았습니다. 칩은 그 자리에 그대로 있고
      보이고 안 보이고만 바뀝니다.
--------------------------------------------------------- */
.sort-toggle { display: none; }          /* PC 에서는 없는 셈 */

@media (max-width: 700px) {
  .sort-toggle {
    display: inline-flex; align-items: center; gap: 6px;
    padding: 7px 12px; min-height: 36px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); color: var(--text);
    font-family: inherit; font-size: var(--m-meta); font-weight: 600;
    white-space: nowrap; cursor: pointer;
  }
  .sort-toggle:hover { border-color: var(--brand); }
  .sort-toggle-ico { color: var(--brand); }
  .sort-toggle-caret { font-size: 0.625rem; opacity: .7; transition: transform .15s; }
  .list-toolbar.sort-open .sort-toggle { border-color: var(--brand); background: var(--chip-bg); color: var(--brand-strong, var(--brand)); }
  .list-toolbar.sort-open .sort-toggle-caret { transform: rotate(180deg); }

  /* 칩은 접어 두고, 열었을 때만 폅니다 */
  .list-toolbar .sort-chips { display: none; }
  .list-toolbar.sort-open .sort-chips { display: flex; flex-basis: 100%; margin-top: 6px; }
}

/* ---------------------------------------------------------
   📱 업체 도구줄 — '누르면 뭐가 나오는지' 보이게
   ---------------------------------------------------------
   예전에는 '🤝 업체 목록 ▾' 였습니다. 세모 하나로는 그게 지금 보는
   칸의 이름인지, 누르면 뭔가 나온다는 뜻인지 알 수 없었어요.
   위에 작은 글씨로 무엇을 고르는 자리인지 적고, 아래에 지금 값을 둡니다.

       보는 곳 고르기            조건 고르기
       🤝 업체 목록  ▾           ⚙️ 필터 ②  ▾

   ⚠️ 기능은 그대로입니다. 글자와 배치만 바뀝니다.
--------------------------------------------------------- */
@media (max-width: 700px) {
  .shop-mbtn-pick {
    flex-direction: column; align-items: flex-start; justify-content: center;
    gap: 1px; padding: 6px 12px; min-height: 48px;
  }
  .shop-mbtn-pick .mb-cap {
    font-size: 0.6875rem; font-weight: 400; color: var(--text-muted);
    line-height: 1.2; letter-spacing: 0;
  }
  .shop-mbtn-pick .mb-now {
    display: inline-flex; align-items: center; gap: 5px;
    font-size: var(--m-sub); line-height: 1.25;
    min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  .shop-mbtn-pick .mb-caret { font-size: 0.625rem; opacity: .65; }
  /* 조건이 걸리면 작은 글씨도 함께 초록으로 — 한눈에 알아채게 */
  .shop-mbtn.on .mb-cap { color: var(--brand); }
}

/* =========================================================
   📱 글쓴이 이름 · 칭호 배지 — 곁다리는 곁다리 크기로
   =========================================================
   390px 실측 (고치기 전)

       글 제목   16px
       닉네임    17px   ← 제목보다 크다
       메타줄    13px
       역할배지  12px

   닉네임이 제목보다 커서, 목록을 훑을 때 눈이 '누가 썼나' 로 먼저 갑니다.
   정작 고르는 기준은 제목인데요.

   ⚠️ 이 17px 는 예전에 일부러 키운 값입니다 — 그때는 제목이 19px 이라
      17px 이 '제목보다 작은' 크기였어요. 이번에 제목을 16px 로 내리면서
      그 전제가 깨졌는데 이 줄만 남아 뒤집혔습니다.
      (08-market.css 의 `.pmeta .author-link { font-size: 17px }`)
   ⚠️ PC 는 그대로 둡니다. 넓은 화면에서는 제목이 19px 이라 17px 이
      여전히 제목보다 작고, 원래 의도대로 동작합니다.
   ⚠️ 글쓴이 이름을 아예 흐리게 만들지는 않았습니다. 누가 썼는지는
      여전히 중요해요. 크기만 메타 줄에 맞추고, 색으로 살립니다.
   ========================================================= */
@media (max-width: 700px) {
  /* 글쓴이 이름 — 목록·댓글·화제글 어디서든 메타 줄의 한 조각입니다 */
  .pmeta .author-link,
  .cmt-head .author-link,
  .ff-meta .author-link,
  .si-meta .author-link { font-size: var(--m-meta); font-weight: 600; }

  /* 칭호 · 역할 · 레벨 배지 — 이름 옆에 붙는 곁다리 */
  .role-badge,
  .title-badge,
  .level-badge {
    font-size: 0.6875rem;      /* 11px */
    padding: 2px 6px;
    margin-left: 3px;
    letter-spacing: 0;
  }
  /* 배지가 반짝이는 효과는 폰에서 특히 시끄럽습니다 — 목록에서만 끕니다 */
  .post-item .role-badge::after { display: none; }
}

/* =========================================================
   📱 모바일 글씨 — 한 단계 더, 그리고 곁다리는 확실히 작게
   =========================================================
   앞서 두 번 내렸는데도 아직 크다는 지적을 받았습니다. 다시 재보니
   문제는 '평균 크기' 가 아니라 **곁다리가 본문급이라는 것** 이었어요.

       닉네임 13 · 메타 13 · 본문 15 · 목록 제목 16
       → 넷이 3px 안에 몰려 있어 전부 같은 무게로 보입니다.

   이번에는 단계 사이를 벌립니다. 특히 닉네임·칭호·배지는
   '읽는 글' 이 아니라 '표시' 라서, 본문보다 확실히 작아야 합니다.

       21~23  페이지 대제목
       18     섹션 제목
       16     카드 제목
       15     목록 행 제목
       14     본문            ← 기준
       13     보조 설명
       11.5   메타 (날짜·조회)
       11     닉네임 · 칭호 · 배지   ← 곁다리
       14     버튼

   ⚠️ 입력칸만은 16px 을 지킵니다 (iOS 자동 확대 방지). 이건 취향이
      아니라 브라우저 동작이라 못 내립니다.
   ⚠️ 본문 14px 는 한글 가독성의 실질 하한입니다. 더 내리지 않았습니다.
   ⚠️ 누르는 자리는 그대로입니다 — 글 한 줄은 통째로 눌리고, 단추 44px.
   ========================================================= */
@media (max-width: 700px) {
  :root {
    --m-h1: clamp(1.3125rem, 5.2vw, 1.4375rem);  /* 21 ~ 23 */
    --m-h2: 1.125rem;                             /* 18 */
    --m-h3: 1rem;                                 /* 16 */
    --m-h4: 0.9375rem;                            /* 15 */
    --m-body: 0.875rem;                           /* 14 */
    --m-sub: 0.8125rem;                           /* 13 */
    --m-meta: 0.71875rem;                         /* 11.5 */
    --m-tag: 0.6875rem;                           /* 11 */
    --m-btn: 0.875rem;                            /* 14 */
    --m-lh-body: 1.5;
    --m-lh-tight: 1.35;
    --m-lh-head: 1.28;
  }

  /* 닉네임 · 칭호 · 배지 — 본문(14)보다 세 단계 아래(11)로 확실히 내립니다.
     ⚠️ 여기가 이번 작업의 핵심입니다. 크기가 같으면 색만 다른 같은 무게로
        보여서, 목록을 훑을 때 눈이 제목이 아니라 닉네임으로 갑니다. */
  .pmeta .author-link,
  .cmt-head .author-link,
  .ff-meta .author-link,
  .si-meta .author-link,
  .author-link { font-size: var(--m-tag); font-weight: 600; }
  .role-badge,
  .title-badge,
  .level-badge,
  .badge-partner,
  .badge-spec,
  .badge-open {
    font-size: 0.625rem;        /* 10 — 표시일 뿐입니다 */
    padding: 2px 5px;
    margin-left: 3px;
    letter-spacing: 0;
    line-height: 1.35;
  }
  /* 목록에서 배지가 반짝이는 효과는 끕니다 (작아진 만큼 더 시끄러워요) */
  .post-item .role-badge::after,
  .post-item .title-badge::after { display: none; }

  /* 날짜·조회 같은 메타는 11.5 로 */
  .post-item .pmeta,
  .si-snippet,
  .ff-meta,
  .cmt-head { font-size: var(--m-meta); }

  /* 글 한 줄이 더 짧아졌으니 자리도 한 뼘 더 */
  .post-item { padding: 9px 4px; }
  .post-item .pthumb { width: 52px; height: 42px; }
  /* 댓글 수는 제목 옆 붉은 [n] 이라 상자 크기 규칙이 필요 없습니다 */
}

/* ---------------------------------------------------------
   🕰️ 비밀번호 찾기 — 옛 회원 안내 상자
   ---------------------------------------------------------
   예전에는 걸음 상자 맨 아래 작은 글씨 한 줄이었습니다. 그런데
   비밀번호를 잊은 옛 회원은 로그인을 못 하니, 사이트 어디에서도
   '이메일 인증하세요' 안내를 볼 수가 없어요 — 그 안내 창은 로그인한
   사람에게만 뜨니까요. 이 화면이 그분들의 유일한 접점이라 따로 세웁니다.
   ⚠️ 겁주는 빨강이 아니라 누리의 포인트색(주황)으로 둡니다.
      잘못한 게 아니라 '그때는 그랬다' 는 사정이니까요.
--------------------------------------------------------- */
.fg-legacy {
  margin: 14px 0 4px;
  padding: 14px 16px;
  border: 1px solid var(--accent-soft, var(--accent));
  border-left: 4px solid var(--accent);
  border-radius: 12px;
  background: color-mix(in srgb, var(--accent) 8%, transparent);
}
/* color-mix 를 모르는 브라우저를 위한 대비 */
@supports not (background: color-mix(in srgb, red 8%, transparent)) {
  .fg-legacy { background: var(--surface-2); }
}
.fg-legacy-head {
  margin: 0 0 8px;
  font-size: 1rem;
  color: var(--accent-text, var(--heading));
}
.fg-legacy-body {
  margin: 0 0 7px;
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text);
  word-break: keep-all;
  overflow-wrap: break-word;
}
.fg-legacy-tip {
  margin: 10px 0 0;
  padding-top: 10px;
  border-top: 1px dashed var(--line);
  font-size: 0.9375rem;
  line-height: 1.62;
  color: var(--text);
  word-break: keep-all;
}

@media (max-width: 700px) {
  .fg-legacy { padding: 12px 13px; margin: 12px 0 4px; }
  .fg-legacy-head { font-size: var(--m-h4); }
  .fg-legacy-body,
  .fg-legacy-tip { font-size: var(--m-sub); line-height: 1.55; }
}

/* =========================================================
   📅 홈 — 이번 달 누리 일정
   ---------------------------------------------------------
   업체 행사(shop_events)와 이벤트 글을 홈에서만 합쳐 보여줍니다.
   ⚠️ 월간 격자를 쓰지 않습니다. 홈에서 알고 싶은 건 '지금 뭐 하고
      있나 · 곧 뭐가 있나' 뿐이라, 목록이 훨씬 빨리 읽혀요.
   ⚠️ 색을 남발하지 않습니다. 종류는 작은 아이콘과 글자로만 갈라요.
   ========================================================= */
/* ⚠️⚠️ 여기가 달력이 **반쪽만 보이던** 자리입니다.
      이 규칙은 옛 '다가오는 일정 두 칸(.hc-col)' 배치용이었습니다. 그런데
      #homeCal 안에 지금 들어오는 것은 요일 줄(.mc-dow) · 날짜 판(.mc-grid) ·
      범례(.mc-legend) 셋이라, 이 두 칸 격자에 걸려 **요일 줄과 날짜 판이
      좌우로 갈라졌습니다.** 왼쪽이 통째로 비어 보인 까닭이에요.
   ⚠️ .hc-col 을 만드는 코드는 이제 없습니다(옛 흔적). 그래도 규칙만
      지우지 않고 :has() 로 좁혀 둡니다 — 되살릴 때 쓸 수 있게요. */
.home-cal { display: block; }
.home-cal:has(.hc-col) { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
.home-cal .hc-col { min-width: 0; }
.home-cal .hc-h {
  margin: 0 0 8px; font-size: 0.9375rem; color: var(--text-muted);
  letter-spacing: .01em;
}
.home-cal .hc-item {
  display: flex; align-items: center; gap: 10px;
  padding: 9px 12px; margin-bottom: 6px;
  border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); text-decoration: none;
  transition: background .12s, border-color .12s;
}
.home-cal .hc-item:hover { background: var(--chip-bg); border-color: var(--brand); }
/* ⚠️ emoji.js 가 이모지를 <img class="emo"> 로 바꿉니다. 크기를 안
      정해 주면 원본대로 커져서 한 줄이 85px 까지 부풀었어요. */
.home-cal .hc-ico {
  flex: 0 0 auto; width: 20px; height: 20px;
  display: grid; place-items: center; font-size: 1.125rem; line-height: 1;
}
.home-cal .hc-ico img,
.home-cal .hc-ico .emo { width: 18px; height: 18px; object-fit: contain; }
/* ⚠️ 패딩을 0 으로 못 박습니다. 어디선가 span 에 위아래 10px 씩
      들어와 한 줄이 85px 까지 부풀었어요 (본문만 65px). */
.home-cal .hc-body {
  min-width: 0; display: flex; flex-direction: column; gap: 2px;
  padding: 0; margin: 0;
}
.home-cal .hc-title {
  font-size: 0.9375rem; color: var(--heading);
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
}
.home-cal .hc-sub { font-size: 0.75rem; color: var(--text-muted); }
.home-cal .hc-none,
.home-cal .hc-empty { font-size: 0.875rem; color: var(--text-muted); margin: 4px 0; }
.home-cal .hc-empty a { color: var(--brand); text-decoration: none; }
.home-cal .hc-empty a:hover { text-decoration: underline; }

/* 📱 좁은 화면 — 진행 중 / 예정을 세로로 쌓습니다.
   ⚠️ 390px 에 두 칸을 나란히 두면 제목이 서너 글자만 남아요. */
@media (max-width: 700px) {
  .home-cal:has(.hc-col) { grid-template-columns: 1fr; gap: 14px; }
  .home-cal .hc-item { padding: 8px 10px; }
  .home-cal .hc-title { font-size: var(--m-body, 0.875rem); }
  .home-cal .hc-sub { font-size: var(--m-meta, 0.71875rem); }
}

/* =========================================================
   🔠 목록 한 줄의 글씨 위계
   ---------------------------------------------------------
   한 줄에 여섯 가지가 들어갑니다 —
     게시판 · [말머리] · 분류칩 · 제목 · [댓글수] · 닉네임 칭호 · 날짜 · 조회
   전부 같은 크기면 눈이 어디를 봐야 할지 모릅니다. **읽을 것은 제목
   하나**이고 나머지는 '곁들이' 예요. 그래서 제목만 남기고 나머지를
   한 단계씩 낮춥니다.
   ⚠️ 12px 밑으로는 내리지 않습니다. 곁들이라도 못 읽으면 없는 것과 같아요.
   ⚠️ 굵기로 위계를 주지 않습니다 — Jua 는 굵기가 하나뿐이라
      font-weight 를 올려도 화면에서는 아무 차이가 없어요 (가짜 굵게도 껐습니다).
      그래서 크기와 색으로만 가릅니다.
   ========================================================= */
/* 제목 — 이 줄의 주인공. 그대로 둡니다 */
.post-item .pt-text { font-size: 15px; }

/* 게시판 이름 (오늘의 누리 …) — 곁들이 */
.post-item .pboard { font-size: 12px; opacity: .82; }

/* 말머리 [오늘의 누리] · 분류칩 🦀 갑각류 — 제목 앞의 꼬리표 */
.post-item .ptitle .ptag,
.post-item .ptitle .ptag-btn { font-size: 12px; }
.post-item .ptitle .evt-chip,
.post-item .ptitle .pgroup {
  font-size: 11px; padding: 1px 6px; vertical-align: middle;
}
.post-item .ptitle .evt-chip .emo,
.post-item .ptitle .pgroup .emo { width: 12px; height: 12px; }

/* 글쓴이 이름 · 칭호 — 누가 썼는지는 제목 다음입니다 */
.post-item .pwho { font-size: 12px; }
.post-item .pwho .author-link { font-size: 12px; }
.post-item .pwho .title-badge,
.post-item .pwho .role-badge { font-size: 10px; padding: 1px 5px; }

/* 날짜 · 조회수 — 가장 곁들이 */
.post-item .pwhen,
.post-item .pviews { font-size: 11.5px; opacity: .8; }

/* 📱 좁은 화면 — 한 단계 더 */
@media (max-width: 700px) {
  .post-item .pt-text { font-size: var(--m-body, 14px); }
  .post-item .pboard { font-size: 11px; }
  .post-item .ptitle .ptag,
  .post-item .ptitle .ptag-btn { font-size: 11px; }
  .post-item .pwho,
  .post-item .pwho .author-link { font-size: 11.5px; }
  .post-item .pwhen,
  .post-item .pviews { font-size: 11px; }
}

/* =========================================================
   🟢 지금 무엇으로 정렬돼 있는가 · ☑ 공지 숨기기
   ---------------------------------------------------------
   ⚠️ 고른 것과 안 고른 것의 차이가 옅으면, 목록이 왜 이 순서인지
      모른 채 보게 됩니다. 고른 하나만 누리 초록으로 확실히 칠해요.
   ⚠️ 색만으로 가르지 않습니다 — 테두리와 굵기(테두리 색)도 함께
      바뀝니다. 색을 못 가리는 분에게도 구분이 되어야 해요.
   ⚠️ 정렬 동작 자체는 손대지 않았습니다. 보이는 것만 또렷하게.
   ========================================================= */
.sort-chips .chip.active,
#sortChips .chip.active {
  background: var(--brand);
  border-color: var(--brand);
  color: #fff;
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 26%, transparent);
}
.sort-chips .chip:not(.active),
#sortChips .chip:not(.active) { opacity: .74; }
.sort-chips .chip:not(.active):hover,
#sortChips .chip:not(.active):hover { opacity: 1; }

/* 정렬 토글(좁은 화면)에도 지금 기준을 초록으로 */
.sort-toggle.on,
.list-toolbar.sort-open .sort-toggle { color: var(--brand); border-color: var(--brand); }

/* ☑ 공지 숨기기 — 켜면 초록, 끄면 수수하게 */
#noticeToggle.on {
  background: var(--brand); border-color: var(--brand); color: #fff;
}

/* 🔔 게시판 새 글 알림 스위치 — 즐겨찾기(⭐) 와 같은 생김새로 맞춥니다.
   ⚠️ 켜짐/꺼짐이 한눈에 보여야 합니다. 종 모양(🔔/🔕)과 색을 함께
      바꿔요 — 색만으로 가르면 색을 못 가리는 분이 알 수 없습니다. */
.sub-btn {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 11px; border: 1px solid var(--line); border-radius: 999px;
  background: none; color: var(--text-muted);
  font-size: 0.8125rem; cursor: pointer; white-space: nowrap;
  transition: color .12s, border-color .12s, background .12s;
}
.sub-btn:hover { color: var(--heading); border-color: var(--brand); }
.sub-btn.on { color: #fff; background: var(--brand); border-color: var(--brand); }
@media (max-width: 700px) {
  .sub-btn { padding: 5px 9px; font-size: var(--m-sub, 0.8125rem); }
  .sub-btn .sub-text { display: none; }   /* 좁으면 종만 — 자리가 없어요 */
}

/* =========================================================
   📐 보기 크기 — 작게 · 중간 · 크게
   ---------------------------------------------------------
   ⚠️ 정렬(무슨 순서로)과 다릅니다. 이건 '한 줄을 얼마나 크게 볼까' 예요.
      한 화면에 많이 보고 싶은 분과, 글씨가 커야 편한 분이 서로 다릅니다.
   ⚠️ 크기만 바꿉니다 — 한 줄 표의 다섯 칸 구조는 그대로예요.
      구조까지 바뀌면 '다른 화면' 이 되어 눈이 다시 익혀야 합니다.
   ⚠️ 작게에서도 12px 밑으로는 내리지 않습니다. 못 읽으면 없는 것과 같아요.
   ========================================================= */
/* 🧱 보기 방식 고르개 — 한 줄 · 2단
   ⚠️ 옆의 A·A·A(크기)와 **같은 알약 모양**을 씁니다. 나란히 선 두
      고르개가 서로 다르게 생기면 "이 둘이 같은 종류" 라는 게 안 읽혀요.
   ⚠️ 글자 단추라 폭을 고정하지 않습니다(한 줄/2단은 글자 수가 달라요). */
.view-pick {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border: 1px solid var(--line); border-radius: 999px;
}
.view-pick button {
  border: 0; background: none; cursor: pointer;
  padding: 0 10px; height: 28px; border-radius: 999px;
  display: inline-flex; align-items: center; justify-content: center;
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  color: var(--text-muted); white-space: nowrap;
}
.view-pick button:hover { color: var(--heading); }
.view-pick button.on { background: var(--brand); color: #fff; }

.size-pick {
  display: inline-flex; align-items: center; gap: 2px;
  padding: 2px; border: 1px solid var(--line); border-radius: 999px;
}
/* 📐 A · A · A — 같은 글자를 세 크기로
   ⚠️⚠️ 지나온 길: ▪ ▪▪ ▪▪▪ (개수는 크기가 아님) → 小 中 大 (읽어야 알고,
      세 글자의 생김새가 서로 달라 크기 차이가 안 읽힘) → **같은 글자 하나**.
      비교할 것이 크기 하나뿐이면 읽을 게 없습니다.
   ⚠️ 크기 차이를 크게 벌립니다 — 11px · 14px · 18px. 한 단씩 살짝
      다르면 "다르게 그려진 것" 인지 "그냥 글꼴" 인지 알 수 없어요.
   ⚠️ 셋 다 같은 폭(width: 32px)에 **바닥을 맞춰** 세웁니다. 글자 크기
      고르개는 어느 기기에서나 A 들이 같은 밑줄에 서 있어요 — 가운데
      정렬하면 작은 A 가 공중에 떠 큰 A 와 다른 줄에 보입니다.
   ⚠️ letter-spacing 을 지웠습니다. 점을 붙여 놓으려고 -1px 을 줬던 건데,
      그대로 두면 글자가 오른쪽으로 밀려 가운데가 안 맞습니다.
   ⚠️ 높이는 가장 큰 大 에 맞춥니다. 안 그러면 大 를 누를 때만 줄이
      1~2px 흔들려요. */
.size-pick button {
  border: 0; background: none; cursor: pointer;
  /* ⚠️ 폭을 **고정**합니다(min-width 가 아니라 width).
     min-width 로 두었더니 大 만 글자가 커서 3px 더 넓어졌고,
     알약 안 셀이 하나만 부풀어 어긋나 보였습니다. */
  /* ⚠️ 바닥 맞춤(flex-end) + 아래 여백 5px — 세 A 가 한 밑줄에 섭니다 */
  padding: 2px 0 5px; border-radius: 999px;
  width: 32px; height: 28px;
  display: inline-flex; align-items: flex-end; justify-content: center;
  color: var(--text-muted); font-weight: 800; line-height: 1;
  transition: background .12s, color .12s;
}
.size-pick button[data-size="sm"] { font-size: 0.6875rem; }
.size-pick button[data-size="md"] { font-size: 0.875rem; }
.size-pick button[data-size="lg"] { font-size: 1.125rem; }
.size-pick button:hover { color: var(--heading); }
/* 지금 고른 것 — 정렬 칩과 같은 누리 초록으로 맞춥니다 */
.size-pick button.on { background: var(--brand); color: #fff; }

/* ---------- 작게 ---------- */
.post-list.size-sm .post-item { padding: 5px 6px; gap: 8px; }
.post-list.size-sm .pt-text { font-size: 13.5px; }
.post-list.size-sm .pboard,
.post-list.size-sm .pwho,
.post-list.size-sm .pwho .author-link { font-size: 12px; }
.post-list.size-sm .pwhen,
.post-list.size-sm .pviews { font-size: 12px; }
.post-list.size-sm .pwho .title-badge,
.post-list.size-sm .pwho .role-badge { font-size: 10px; padding: 0 4px; }

/* ---------- 중간 (기본값 — 위쪽 규칙 그대로) ---------- */

/* ---------- 크게 ---------- */
.post-list.size-lg .post-item { padding: 13px 8px; gap: 14px; }
.post-list.size-lg .pt-text { font-size: 17px; }
.post-list.size-lg .pboard,
.post-list.size-lg .pwho,
.post-list.size-lg .pwho .author-link { font-size: 13.5px; }
.post-list.size-lg .pwhen,
.post-list.size-lg .pviews { font-size: 13px; }
.post-list.size-lg .pwho .title-badge,
.post-list.size-lg .pwho .role-badge { font-size: 11px; padding: 2px 6px; }
.post-list.size-lg .pcomments { font-size: 0.9375rem; }

@media (max-width: 700px) {
  /* 좁은 화면에서는 글자만 조금 — 여백까지 키우면 한 화면에 두 줄만 남아요 */
  .post-list.size-sm .pt-text { font-size: 13px; }
  .post-list.size-lg .pt-text { font-size: 15.5px; }
  .post-list.size-lg .post-item { padding: 12px 6px; }
  /* ⚠️ 폰에서도 세 글자 크기 차이는 지킵니다 — 그게 이 단추의 뜻이에요.
     좌우 여백만 줄입니다. 높이는 손가락이 누를 수 있게 그대로 둡니다. */
  .size-pick button { width: 29px; }
}

/* =========================================================
   🏠 홈 정리 — "무엇을 눌러야 할지 모르겠다" 를 고치려고
   ---------------------------------------------------------
   문제였던 것: 1280×900 에서 화제글이 y=771 이었습니다. 첫 화면에
   설명만 가득하고 실제 누리 콘텐츠는 스크롤해야 나왔어요.
   범인은 셋이었습니다 — 주황색 문의 배너(66px) · 여섯 줄 소개문 ·
   오른쪽 '이렇게 이용해요' 카드(452px).
   ⚠️ 여기서 하는 일은 '작게 만들기' 가 아니라 '순서 바꾸기' 입니다.
      글자를 줄여 첫 화면에 화제글·새 글이 들어오게 하는 것.
   ⚠️ 새 디자인 체계를 만들지 않았습니다. 색·글꼴·둥근 모서리는
      기존 토큰 그대로예요.
   ⚠️ PC(1280) 기준으로 짰습니다. 모바일은 별도 작업 예정 —
      다만 여기서 깨지지 않게 900px 이하 규칙을 함께 뒀습니다.
   ========================================================= */

/* ---- 첫 화면: 한 칸으로 ----
   ⚠️ 오른쪽 안내 카드가 없어졌으니 두 칸 격자를 유지할 이유가 없습니다.
      두 칸으로 두면 왼쪽 글이 화면 절반에 갇혀 줄이 더 늘어나요. */
.hero-inner.hero-slim {
  grid-template-columns: minmax(0, 1fr);
  gap: 0;
  padding-top: 38px; padding-bottom: 22px;
}
.hero-slim .hero-say { max-width: 780px; }
/* 제목을 조금 줄입니다 — 60px 짜리 제목 하나가 화제글을 한 칸씩 밀어냅니다 */
.hero-slim h1 { font-size: clamp(1.875rem, 3.7vw, 2.75rem); line-height: 1.16; }
.hero-slim .lead {
  margin-top: 11px; margin-bottom: 0;
  font-size: 1.0625rem; line-height: 1.6; max-width: 640px;
}
.hero-slim .hero-search { margin-top: 20px; }
.hero-slim .hero-search-label { font-size: 0.9375rem; }

/* ---- 바로가기: 큰 카드 → 작은 아이콘 한 줄 ----
   ⚠️ 세로 카드(아이콘 위·글자 아래)였을 때 이 줄만 96px 였습니다.
      가로 알약으로 눕히면 42px 이에요. 그 차이가 화제글을 첫 화면으로
      끌어올립니다.
   ⚠️ 가로 스크롤을 만들지 않습니다 — 좁아지면 줄이 나뉩니다. */
.hero-quick.hq-row {
  margin-top: 18px;
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px;
}
.hero-quick.hq-row a {
  flex-direction: row; align-items: center; gap: 7px;
  padding: 8px 15px; font-size: 0.8125rem;
  border: 1px solid transparent;
}
.hero-quick.hq-row a:hover { border-color: var(--brand); }
.hero-quick.hq-row .hq-ico { font-size: 1.05rem; }
.hero-quick.hq-row .hq-ico img,
.hero-quick.hq-row .hq-ico .emo { width: 17px; height: 17px; object-fit: contain; }

/* ---- 📰 소식 | 📅 일정 두 칸 ---- */
.home-row { padding: 6px 0 26px; }
.home-row-inner {
  display: grid; grid-template-columns: 1fr 1fr; gap: 30px; align-items: start;
}
.home-row-col { min-width: 0; }
/* ⚠️ 소식이 없어 감춰졌으면 일정이 두 칸을 다 씁니다.
      [hidden] 은 display:none 이라 격자에서 빠지는데, 그러면 일정이
      왼쪽 칸만 쓰고 오른쪽이 텅 빕니다. 인접 형제(+) 규칙이라
      두 칸의 순서를 바꾸면 이 규칙이 죽습니다. */
#homeNews[hidden] + .home-row-cal { grid-column: 1 / -1; }

.hr-head { display: flex; align-items: baseline; gap: 10px; margin: 0 0 11px; }
.hr-head h2 { margin: 0; font-size: 1.125rem; color: var(--heading); }
.hr-more {
  margin-left: auto; flex: 0 0 auto;
  font-size: 0.78125rem; color: var(--brand); text-decoration: none;
}
.hr-more:hover { text-decoration: underline; }

/* 소식 칸 머리 — news.js 가 .sec-head 를 그립니다.
   ⚠️ 홈에서는 부제(소동물·이색동물과 관련된 국내외 뉴스와 이슈)를
      감춥니다. 제목만으로 충분하고, 이번 작업이 줄이려던 바로 그
      '설명 한 줄' 이에요. news.html 에서는 그대로 보입니다. */
#homeNews .sec-head { margin: 0 0 11px; }
#homeNews .sec-head h2 { margin: 0; font-size: 1.125rem; color: var(--heading); }
#homeNews .sec-sub { display: none; }
#homeNews .news-foot-row {
  margin-top: 9px; display: flex; align-items: center; gap: 10px;
}
#homeNews .news-more { font-size: 0.78125rem; color: var(--brand); text-decoration: none; }
#homeNews .news-more:hover { text-decoration: underline; }

/* ---- 맨 아래 '모든 걸 모아둔 칸' — 녹색 띠 ----
   ⚠️ 분류 링크는 검색 로봇이 홈에서 분류로 갈 유일한 길입니다.
      작게 두지만 숨기지는 않습니다 (display:none 금지).
   ⚠️ 홈 맨 아래에 있던 큰 카드 셋(동물병원·전문업체·이벤트)을 뺐습니다.
      길이 사라진 게 아니에요 — 머리띠 '정보 > 동물병원 찾기',
      '업체 & 판매 > 업체와의 만남', '이벤트' 가 같은 곳으로 갑니다.
      맨 아래는 달력과 이 띠, 둘이면 충분합니다. */
.home-foot-band {
  background: linear-gradient(180deg,
    color-mix(in srgb, var(--brand) 8%, var(--surface)),
    color-mix(in srgb, var(--brand) 13%, var(--surface)));
  border-top: 1px solid color-mix(in srgb, var(--brand) 22%, transparent);
  padding: 6px 0 4px;
}
.home-foot {
  padding-top: 4px; padding-bottom: 22px;
  display: flex; align-items: center; gap: 16px; flex-wrap: wrap;
  margin-top: 4px;
}
.home-foot .hf-row {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  min-width: 0; padding-top: 16px;
}
.home-foot .hf-lbl {
  flex: 0 0 auto; font-size: 0.8125rem; font-weight: 700; color: var(--brand-strong);
}
.home-foot .cat-quick { display: flex; flex-wrap: wrap; gap: 5px; }
.home-foot .cat-quick a {
  font-size: 0.8125rem; color: var(--text); text-decoration: none;
  padding: 6px 13px; border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent);
  border-radius: 999px; background: var(--surface); white-space: nowrap;
}
.home-foot .cat-quick a:hover { color: var(--brand); border-color: var(--brand); }
.home-foot .cat-quick a img,
.home-foot .cat-quick a .emo { width: 14px; height: 14px; object-fit: contain; vertical-align: -2px; }

.home-foot .hf-side {
  margin-left: auto; display: flex; align-items: center; gap: 14px;
  flex-wrap: wrap; padding-top: 16px;
}
.home-foot .hf-say {
  font-size: 0.78125rem; color: var(--text-muted); text-decoration: none;
  white-space: nowrap;
}
.home-foot .hf-say:hover { color: var(--brand); }

/* 안내(투어) 단추 — 예전엔 카드 안의 큰 단추였습니다.
   ⚠️ 여기서는 조용한 링크처럼 보이게 합니다. 홈에서 가장 눈에 띄는
      것이 '가이드' 이면 안 되니까요. 기능은 그대로예요. */
.home-foot .hf-tour { display: flex; align-items: center; gap: 14px; flex-wrap: wrap; }
.home-foot .hf-tour .tour-start-btn {
  margin: 0; padding: 0; width: auto;
  background: none; border: 0; box-shadow: none;
  font-size: 0.78125rem; color: var(--text-muted); cursor: pointer;
  display: inline-flex; align-items: center; gap: 5px;
  animation: none;
}
.home-foot .hf-tour .tour-start-btn:hover { color: var(--brand); }
.home-foot .hf-tour .tour-start-ico { font-size: 0.9rem; }
.home-foot .hf-tour .tour-start-txt { display: inline; font-weight: 400; }
.home-foot .hf-tour .tour-start-txt b { font-weight: 700; }
/* ⚠️ 작은 설명줄은 감춥니다 — 한 줄짜리 링크에 두 줄이 들어가면
      다시 '글씨 많은 홈' 이 됩니다. */
.home-foot .hf-tour .tour-start-txt small { display: none; }
.home-foot .hf-tour .tour-guide-link {
  margin: 0; padding: 0; border: 0; background: none;
  font-size: 0.78125rem; color: var(--text-muted); text-decoration: none;
  white-space: nowrap;
}
.home-foot .hf-tour .tour-guide-link:hover { color: var(--brand); }
.home-foot .hf-tour .tour-guide-link b { font-weight: 700; }

/* ---- 좁은 화면 — 이번엔 재설계하지 않습니다. 깨지지만 않게. ---- */
@media (max-width: 900px) {
  .home-row-inner { grid-template-columns: 1fr; gap: 20px; }
  .hero-inner.hero-slim { padding-top: 22px; padding-bottom: 16px; }
  .home-foot { gap: 10px; }
  .home-foot .hf-side { margin-left: 0; padding-top: 6px; }
}
@media (max-width: 700px) {
  .hero-quick.hq-row { gap: 5px; }
  .hero-quick.hq-row a { padding: 7px 11px; font-size: 0.75rem; }
  .hero-slim .lead { font-size: 0.96875rem; }
}

/* ⚠️ 바로가기 줄은 내용만큼만 넓힙니다. 화면 끝까지 늘리면 오른쪽
      절반이 빈 판이 되어 '여기 뭐가 빠졌나?' 싶어 보였어요. */
.hero-quick.hq-row { width: fit-content; max-width: 100%; }

/* ---- 홈의 소식 카드만 납작하게 ----
   ⚠️ news.html 의 카드는 그대로 둡니다. 거기서는 소식이 주인공이라
      요약·태그·그림이 다 필요해요. 홈에서는 '무슨 일이 있었나' 만
      알면 되고, 옆 칸의 일정과 키가 맞아야 합니다.
   ⚠️ 카드 하나가 100px 이면 세 개에 300px 입니다. 그만큼 홈이 길어지고,
      이번 작업이 줄이려던 바로 그 길이예요. */
#homeNews .news-list { gap: 6px; }
#homeNews .news-card { padding: 8px 10px; gap: 10px; align-items: center; }
#homeNews .news-thumb { width: 54px; height: 42px; border-radius: 8px; }
#homeNews .news-noimg { font-size: 1.1rem; }
#homeNews .news-body { gap: 2px; }
#homeNews .news-title { font-size: 0.875rem; -webkit-line-clamp: 1; }
/* 요약과 태그는 홈에서 감춥니다 — 제목과 출처만으로 충분합니다 */
#homeNews .news-sum,
#homeNews .news-tags { display: none; }
#homeNews .news-src { font-size: 0.71875rem; }

/* =========================================================
   🏠 홈 2차 — 정보 구조는 그대로, 위계만 다시
   ---------------------------------------------------------
   1차에서 '설명을 줄이고 실제 글을 위로' 는 됐는데, 줄이기만 하다 보니
   모든 칸의 밀도가 똑같아졌습니다 — 표처럼 납작하고, 눈이 꽂히는 데가
   없고, 포털이 아니라 관리 화면처럼 보였어요.
   ⚠️ 그렇다고 긴 소개문·STEP 안내·숫자 통계를 되살리는 게 아닙니다.
      되살리면 1차에서 고친 문제가 그대로 돌아옵니다.
      여기서 하는 일은 **글을 늘리는 게 아니라 크기·여백·색의 차이를
      만드는 것** 입니다.
   ⚠️ 새 디자인 체계를 만들지 않았습니다. 색·글꼴·둥근 모서리는
      기존 토큰 그대로예요.
   ========================================================= */

/* ---- 첫 화면: 그림이 보이게, 키를 세우게 ----
   ⚠️ .hero 는 홈에만 있습니다 (index.html 하나). 다른 화면에 번지지 않아요.
   ⚠️ 그림이 흐리면(opacity .5) 배경이 아니라 얼룩처럼 보입니다.
      또렷하게 올리는 대신, 글자가 놓이는 왼쪽만 막을 진하게 덮어
      읽기를 지킵니다. 색을 밝히는 게 아니라 '가리는 정도' 를 나눠요. */
.hero::before { opacity: .82; background-position: center 42%; }
.hero::after {
  background:
    /* 왼쪽(글자 자리) — 진하게. 오른쪽 — 그림이 그대로 보이게 */
    linear-gradient(100deg,
      var(--bg) 0%,
      color-mix(in srgb, var(--bg) 92%, transparent) 30%,
      color-mix(in srgb, var(--bg) 62%, transparent) 55%,
      color-mix(in srgb, var(--bg) 18%, transparent) 82%,
      transparent 100%),
    /* 아래쪽 — 다음 칸(화제글)으로 자연스럽게 이어지게.
       ⚠️ 이 한 겹이 없으면 hero 와 본문 사이에 칼로 자른 듯한 선이 생깁니다. */
    linear-gradient(180deg,
      transparent 55%,
      color-mix(in srgb, var(--bg) 55%, transparent) 84%,
      var(--bg) 100%);
}
/* 그림을 진하게 올린 만큼 어두운 테마에서는 조금 눌러 줍니다 */
[data-theme="dark"] .hero::before,
[data-theme="unit02"] .hero::before { opacity: .55; }

.hero-inner.hero-slim { padding-top: 74px; padding-bottom: 62px; }
/* 제목을 다시 크게 — 첫인상은 여기서 납니다 */
.hero-slim h1 { font-size: clamp(2.25rem, 4.6vw, 3.5rem); line-height: 1.14; }
.hero-slim .lead {
  margin-top: 14px; font-size: 1.1875rem; line-height: 1.55; max-width: 640px;
}
.hero-slim .hero-search { margin-top: 30px; }
.hero-slim .hero-search-label {
  font-size: 1rem; color: var(--heading);
}

/* 검색창을 크게 — '검색이 이 화면의 할 일' 이라고 몸집으로 말합니다 */
.hero-slim .hero-search-box {
  box-shadow: 0 10px 30px rgba(0, 0, 0, .10);
  border-width: 2px;
}
.hero-slim .hero-search-box input { font-size: 1.0625rem; padding-top: 15px; padding-bottom: 15px; }
.hero-slim .hero-search-ico { font-size: 1.2rem; }
.hero-slim .hero-search-btn { font-size: 1rem; padding-left: 26px; padding-right: 26px; }

/* ---- 핵심 진입점 넷 ----
   ⚠️ 판(배경 상자)을 없앱니다. 판 안에 알약을 넣으니 두 겹이 되어
      '무엇이 눌리는 것인지' 가 흐려졌어요. 이제 알약 자체가 단추입니다. */
.hero-quick.hq-row {
  margin-top: 22px; padding: 0; gap: 9px;
  background: none; border: 0; box-shadow: none;
}
.hero-quick.hq-row a {
  gap: 9px; padding: 13px 22px; font-size: 0.9375rem; font-weight: 700;
  background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: 0 2px 10px rgba(0, 0, 0, .06);
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hero-quick.hq-row a:hover {
  transform: translateY(-2px);
  border-color: var(--brand);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .12);
  background: var(--surface);
}
.hero-quick.hq-row .hq-ico { font-size: 1.3rem; }
.hero-quick.hq-row .hq-ico img,
.hero-quick.hq-row .hq-ico .emo { width: 21px; height: 21px; }

/* ---- 🔥 화제글 · 🆕 새 글 — 표가 아니라 '글' 로 보이게 ----
   ⚠️ 두 칸 구조·한 줄 형태는 그대로입니다. 바꾼 건 셋뿐이에요:
        제목을 키우고(0.84 → 0.9375rem) 진한 색으로,
        곁정보(닉네임·시각·댓글)는 더 옅게,
        누를 수 있다는 걸 손이 알게(hover 에 테두리·그림자).
   ⚠️ Jua 는 굵기가 하나뿐이라 font-weight 로는 위계가 안 생깁니다.
      크기와 색으로만 가릅니다 (07-titles.css 에도 같은 말이 있어요). */
.hero-feeds { padding-top: 34px; padding-bottom: 40px; }
.hero-feeds .feed-head { margin-bottom: 14px; }
.hero-feeds .hot-mini { gap: 7px; }
.hero-feeds .hot-mini .feed-item {
  padding: 10px 13px; gap: 11px; border-radius: 12px;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.hero-feeds .hot-mini .feed-item:hover {
  background: var(--surface);
  border-color: var(--brand);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .09);
  transform: translateY(-1px);
}
.hero-feeds .hot-mini .feed-item:active { transform: translateY(0); box-shadow: none; }
.hero-feeds .hot-mini .ff-thumb { width: 36px; height: 36px; border-radius: 8px; }
.hero-feeds .hot-mini .ff-emoji { font-size: 1.15rem; }
.hero-feeds .hot-mini .ff-emoji .emo { width: 20px; height: 20px; }
.hero-feeds .hot-mini .ff-rank { width: 22px; height: 22px; font-size: 0.78125rem; }
.hero-feeds .hot-mini .ff-title { font-size: 0.9375rem; color: var(--heading); }
.hero-feeds .hot-mini .ff-meta { font-size: 0.6875rem; opacity: .78; }

/* ---- 구역 나누기 ----
   ⚠️ 여백만으로는 '다른 이야기' 라는 게 안 읽혔습니다. 소식·일정 칸을
      옅은 판 위에 올려 화제글과 바닥 색을 다르게 합니다. */
.home-row {
  padding-top: 30px; padding-bottom: 34px;
  background: var(--surface-2, color-mix(in srgb, var(--surface) 60%, transparent));
  border-top: 1px solid var(--line);
  border-bottom: 1px solid var(--line);
}
.home-row-inner { gap: 34px; }
.hr-head, #homeNews .sec-head { margin-bottom: 14px; }
.hr-head h2, #homeNews .sec-head h2 { font-size: 1.25rem; }

/* ---- 크게 고르는 자리 (푸터 바로 위) ---- */
.home-picks { padding-top: 34px; padding-bottom: 12px; }
.home-picks-inner {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
.hp-card {
  display: flex; align-items: center; justify-content: center; gap: 12px;
  padding: 24px 18px; min-width: 0;
  border: 1px solid var(--border); border-radius: 16px;
  background: var(--surface); color: var(--heading); text-decoration: none;
  font-size: 1.0625rem; font-weight: 700;
  transition: transform .12s ease, box-shadow .12s ease, border-color .12s ease;
}
.hp-card:hover {
  transform: translateY(-2px); border-color: var(--brand);
  box-shadow: 0 10px 24px rgba(0, 0, 0, .11);
}
.hp-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hp-ico { font-size: 1.7rem; line-height: 1; flex: 0 0 auto; }
.hp-ico img, .hp-ico .emo { width: 27px; height: 27px; object-fit: contain; }
.hp-name { word-break: keep-all; }

/* ---- 좁은 화면 — 이번에도 재설계는 안 합니다. 깨지지만 않게. ---- */
@media (max-width: 900px) {
  .hero-inner.hero-slim { padding-top: 34px; padding-bottom: 26px; }
  .home-picks-inner { grid-template-columns: 1fr; gap: 10px; }
  .hp-card { padding: 16px; font-size: 0.96875rem; }
  .home-row { padding-top: 22px; padding-bottom: 24px; }
  .home-row-inner { gap: 22px; }
}
@media (max-width: 700px) {
  .hero-quick.hq-row a { padding: 10px 15px; font-size: 0.84375rem; }
  .hero-quick.hq-row .hq-ico { font-size: 1.1rem; }
  .hero-slim .lead { font-size: 1rem; }
}

/* ⚠️ 그림을 또렷하게 올린 만큼, 글자가 놓이는 자리는 따로 지켜야 합니다.
      막(gradient)만으로는 나뭇잎·물결 같은 무늬 위에서 글자 획이 끊겨
      보였어요. 글 덩어리 뒤에만 한 겹 더 깔고, 큰 제목에는 옅은 그림자를
      둡니다 — 색을 바꾸는 게 아니라 바탕을 정리하는 것입니다. */
.hero-slim .hero-say {
  position: relative;
}
.hero-slim .hero-say::before {
  content: ""; position: absolute; z-index: -1;
  inset: -28px -40px -22px -40px;
  border-radius: 28px;
  background: radial-gradient(120% 120% at 12% 40%,
    color-mix(in srgb, var(--bg) 88%, transparent) 0%,
    color-mix(in srgb, var(--bg) 70%, transparent) 52%,
    transparent 100%);
}
.hero-slim h1 { text-shadow: 0 2px 14px color-mix(in srgb, var(--bg) 70%, transparent); }
.hero-slim .lead { color: var(--text); }

/* =========================================================
   🧭 PC 한 줄 머리띠
   ---------------------------------------------------------
   예전 PC 머리띠는 두 층이었습니다 — 위층 로고·검색·로그인,
   아래층 메뉴 아홉 개. 층이 둘이라 두껍고, 아홉 개가 모두 같은
   크기라 무엇이 1차 메뉴인지 안 보였어요.
   ⚠️ 모바일 머리띠(.category-bar)는 손대지 않았습니다. 좁은 화면
      규칙이 .cat-bar-inner 에 여러 파일로 흩어져 걸려 있어서요.
      PC 는 #mainNav, 모바일은 .category-bar — 서로 반대편을 감춥니다.
   ⚠️ 1차 메뉴에 아이콘을 붙이지 않습니다. 글자로 읽혀야 해요.
   ========================================================= */
.mainnav { display: none; }                 /* 기본은 감춤 — PC 에서만 켭니다 */

@media (min-width: 901px) {
  /* 아래층을 접습니다 — 이제 한 줄이에요 */
  .category-bar { display: none; }

  .mainnav {
    display: flex; align-items: stretch; gap: 2px;
    margin-left: 26px; min-width: 0; flex: 1 1 auto;
  }
  .mainnav .mn-item { position: relative; display: flex; }

  /* 1차 메뉴 — 글자 중심. 고른 것만 초록 + 밑줄 */
  /* ⚠️ height 는 03-header.css 의 .nav 높이(84px)와 **같아야** 합니다.
        어긋나면 켜진 메뉴의 밑줄이 머리띠 바닥에 안 붙어요. */
  .mainnav .mn-link {
    display: inline-flex; align-items: center; gap: 4px;
    padding: 0 15px; height: 84px;
    /* ⚠️ 눈썹줄(.mn-scope)을 얹을 바탕입니다. .mn-pop 은 .mn-item 기준으로
       떠 있으니 여기에 relative 를 줘도 펼친 칸은 안 움직입니다. */
    position: relative;
    border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 1.0625rem; font-weight: 700;
    color: var(--text); white-space: nowrap;
    border-bottom: 3px solid transparent;
    transition: color .15s, border-color .15s;
  }
  .mainnav .mn-link:hover { color: var(--heading); }
  .mainnav .mn-link.active { color: var(--brand); border-bottom-color: var(--brand); }
  .mainnav .mn-link:focus-visible { outline: 2px solid var(--brand); outline-offset: -3px; }
  .mainnav .navmenu-caret { font-size: 0.625rem; opacity: .6; }

  /* =======================================================
     🐾 1차 메뉴의 눈썹줄 — 「소라게」 정보
     -------------------------------------------------------
     ⚠️⚠️ **절대 위치입니다.** 메뉴 폭을 1px 도 바꾸지 않으려고요.
        낱말 옆에 나란히 붙이면 「정보」 가 「소라게 정보」 로 45px
        넓어지고, 동물을 바꿀 때마다 여섯 메뉴가 통째로 움직입니다.
        길 찾기는 "그 메뉴가 늘 그 자리에 있다" 로 되는 일이에요.
     ⚠️ 낱말은 제자리에 그대로 둡니다(세로 가운데). 눈썹줄만 그 위에
        얹혀요 — 그래서 눈썹줄이 없는 「동물 찾기」 와도 낱말 높이가
        어긋나지 않습니다.
     ⚠️ pointer-events: none — 눈썹줄을 눌러도 메뉴가 눌려야 합니다.
     ⚠️ 길면 잘라 냅니다(크레스티드 게코). 넘치면 옆 메뉴를 덮어요.
     ======================================================= */
  /* ⚠️⚠️ **글자가 아니라 ::before 입니다.** 머리띠 메뉴를 「커뮤니티」 라는
     글자로 찾는 자리가 여럿이라(E2E 의 :text-is 와 이름표 비교), 눈썹줄을
     글자 노드로 넣으면 그 자리들이 「소라게커뮤니티」 를 읽습니다 —
     실제로 네 판이 깨졌습니다. ::before 의 content 는 글자 노드가 아니라
     textContent 에 안 섞여요. 뜻은 aria-label 이 따로 말합니다.
     ⚠️ 낱말의 15px 안쪽 여백까지 빌려 씁니다(left·right 1px). 메뉴 사이에는
        양쪽 여백 30px 이 비어 있어서, 눈썹줄이 그 자리를 조금 써도 옆 메뉴
        글자를 안 덮습니다 — 그만큼 긴 이름이 덜 잘려요.
     ⚠️ 그래도 넘치면 잘라 냅니다. 옆 메뉴를 덮어 두 이름이 겹치는 것보다는
        잘린 이름이 낫습니다. */
  .mainnav .mn-link[data-scope]::before {
    content: attr(data-scope);
    position: absolute; left: 1px; right: 1px; top: 21px;
    text-align: center;
    font-size: 0.6875rem; font-weight: 800; letter-spacing: -0.02em;
    line-height: 1; color: var(--brand);
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
    pointer-events: none;
  }
  /* ⚠️ 긴 이름은 한 단 작게. 가장 좁은 「정보」 에 「화이트트리프로그」 가
     들어가면 11px 로는 한 글자가 잘립니다 — 이름 절반을 잘라 보여 주는
     것보다 작게라도 온전히 보이는 편이 낫습니다.
     ⚠️ 길이 기준은 JS 가 붙입니다(data-scope-long) — CSS 로는 글자 수를
        셀 수 없어요. */
  .mainnav .mn-link[data-scope-long]::before {
    font-size: 0.59375rem; letter-spacing: -0.03em;
  }
  /* ⚠️ 켜진 메뉴는 낱말이 이미 초록입니다. 눈썹줄까지 같은 초록이면 두 줄이
     한 덩어리로 뭉개져 읽혀요 — 한 단 연하게 둡니다. */
  .mainnav .mn-link.active[data-scope]::before { opacity: .78; }
  /* 🔎 시험용 — 잘렸는지 재려면 잘라 내기를 잠깐 풀어야 합니다.
     ⚠️ ::before 는 scrollWidth 를 못 잽니다. 그래서 이 표를 붙여 「안
        자르면 얼마나 넓어지나」 를 재고 견줍니다(animal-scope E2E).
        평소에는 아무 데도 안 붙습니다. */
  .mainnav .mn-link[data-scope].mn-scope-probe::before {
    right: auto; width: max-content; overflow: visible;
  }

  /* 펼친 칸 — '반만 가리기'.
     ⚠️ 트리거와 붙여 놓습니다(top: 100%). 사이에 틈이 있으면 마우스가
        지나가는 길에 닫혀서 항목을 누를 수가 없어요. */
  .mainnav .mn-pop {
    display: none; position: absolute; top: 100%; left: 0; z-index: 300;
    min-width: 186px; padding: 7px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 0 0 14px 14px; border-top: 0;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  }
  .mainnav .mn-item.open .mn-pop { display: block; }
  /* 작은 생명들은 아홉 개라 두 줄로 */
  .mainnav .mn-pop-wide {
    display: none; grid-template-columns: 1fr 1fr; gap: 2px; min-width: 340px;
  }
  .mainnav .mn-item.open .mn-pop-wide { display: grid; }

  .mainnav .mn-pop-item {
    display: block; width: 100%; text-align: left;
    padding: 10px 13px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.9375rem; font-weight: 600;
    color: var(--text); text-decoration: none; border-radius: 9px;
    white-space: nowrap;
  }
  .mainnav .mn-pop-item:hover { background: var(--chip-bg); color: var(--brand); }
  .mainnav .mn-pop-item.on { color: var(--brand); }
  .mainnav .mn-pop-item .soon-mini { font-size: 0.6875rem; opacity: .7; margin-left: 4px; }

  /* 오른쪽 도구는 그대로 오른쪽 끝 */
  .header-top .nav .header-right { margin-left: 12px; }
  /* ⚠️ 아주 넓지 않은 노트북(901~1180px)에서는 글자를 조금 좁힙니다.
        일곱 개가 로그인 단추를 밀어내면 안 돼요. */
}
@media (min-width: 901px) and (max-width: 1180px) {
  .mainnav { margin-left: 14px; }
  .mainnav .mn-link { padding: 0 10px; font-size: 0.9375rem; }
}

/* ⚠️ 접힘 방지. flex 는 기본이 shrink:1 이라, 자리가 조금만 빠듯해지면
      '로그인' 이 '로그 / 인' 으로, 브랜드가 두 줄로 접혔습니다.
      실제로는 폭이 남아 있었는데도요 (1113 / 1160).
      줄어들 수 있는 건 가운데 메뉴 하나면 됩니다. */
@media (min-width: 901px) {
  .header-top .nav > .brand,
  .header-top .nav > .header-right { flex: 0 0 auto; }
  .header-top .nav .brand-text,
  .header-top .nav .brand-title,
  .header-top .nav .brand-sub { white-space: nowrap; }
  .header-top .nav #authArea { white-space: nowrap; }
  .header-top .nav #authArea a,
  .header-top .nav #authArea button { white-space: nowrap; }
  .mainnav { flex: 0 1 auto; }
}

/* =========================================================
   🏠 홈 3차 — 균등한 바둑판을 깨고 위계를 만든다
   ---------------------------------------------------------
   문제였던 것: 화제글·새 글·소식·일정이 모두 비슷한 크기로 2×2 였고,
   넷 다 세로 목록이라 모양까지 같았습니다. 그래서 무엇부터 봐야
   할지 알 수 없고, 포털이 아니라 대시보드처럼 보였어요.
   이제 크기와 모양으로 순서를 말합니다:
       새 글(큰 왼쪽) > 화제글(사진) > 일정(달력) > 소식(가로 카드)
   ⚠️ 기능을 뺀 게 아닙니다. 넷 다 그대로 있고 크기만 달라요.
   ⚠️ 모양도 일부러 다르게 합니다. 크기만 다르고 모양이 같으면
      여전히 같은 표 네 개로 읽힙니다.
   ========================================================= */

.home-main { padding-top: 34px; padding-bottom: 30px; }
/* 왼쪽이 오른쪽의 1.55배 — 새 글이 주인공임을 자리로 말합니다 */
.home-main-inner {
  display: grid; grid-template-columns: minmax(0, 1.55fr) minmax(320px, 1fr);
  gap: 32px; align-items: start;
}
.home-main-inner .hm-big { min-width: 0; }
.home-main-inner .hm-side { min-width: 0; display: grid; gap: 24px; }
.hm-box { min-width: 0; }

/* 칸 제목 — 새 글이 가장 크고, 옆 칸들은 한 단계 작게 */
.home-main .feed-head,
.home-cal-wide .feed-head { margin: 0 0 13px; align-items: baseline; }
.home-main .hm-big .feed-head h2 { font-size: 1.5rem; }
.home-main .hm-side .feed-head h2 { font-size: 1.125rem; }
.home-main .hm-side .feed-note { font-size: 0.75rem; }
.hm-more {
  margin-left: auto; flex: 0 0 auto;
  font-size: 0.8125rem; color: var(--brand); text-decoration: none; font-weight: 700;
}
.hm-more:hover { text-decoration: underline; }

/* ---- 🆕 새 글 — 제목이 주인공 ---- */
.fresh-big { display: flex; flex-direction: column; gap: 8px; }
.fresh-big .fb-row {
  display: flex; align-items: center; gap: 13px;
  padding: 13px 15px; border-radius: 13px;
  background: var(--surface); border: 1px solid var(--line);
  text-decoration: none; color: inherit;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.fresh-big .fb-row:hover {
  border-color: var(--brand); transform: translateY(-1px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, .09);
}
.fresh-big .fb-row:active { transform: translateY(0); box-shadow: none; }
.fresh-big .fb-thumb {
  flex: 0 0 auto; width: 46px; height: 46px; border-radius: 10px; overflow: hidden;
  background: var(--chip-bg); display: grid; place-items: center;
}
.fresh-big .fb-thumb img { width: 100%; height: 100%; object-fit: cover; }
.fresh-big .fb-emoji { font-size: 1.3rem; }
.fresh-big .fb-emoji img, .fresh-big .fb-emoji .emo { width: 22px; height: 22px; object-fit: contain; }
.fresh-big .fb-body { min-width: 0; flex: 1 1 auto; display: flex; flex-direction: column; gap: 4px; }
/* ⚠️ 제목이 홈에서 가장 큰 본문 글자입니다. 여기가 작아지면 새 글이
      가장 중요한 칸으로 안 보여요. */
.fresh-big .fb-title {
  font-size: 1.0625rem; color: var(--heading); line-height: 1.35;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.fresh-big .fb-meta {
  display: flex; align-items: center; gap: 5px; flex-wrap: wrap;
  font-size: 0.75rem; color: var(--text-muted);
}
.fresh-big .fb-dot { opacity: .45; }
.fresh-big .fb-cmt { color: var(--danger, #d05a5a); }

/* ---- 🔥 화제글 — 대표 하나는 사진으로 ---- */
.hot-vis { display: flex; flex-direction: column; gap: 9px; }
.hot-vis .hv-lead {
  display: block; position: relative; border-radius: 14px; overflow: hidden;
  border: 1px solid var(--line); background: var(--surface);
  text-decoration: none; color: inherit;
}
.hot-vis .hv-lead:hover { border-color: var(--brand); }
.hot-vis .hv-cover {
  /* ⚠️ 16/9 → 3/2 입니다. 16:9 는 **영상** 비율이라 사진 미리보기에는
     원래 안 맞았어요. 누리에 올라오는 사진은 세로가 많아서(누리툰
     434×1024), 16:9 틀에서는 그림이 82px 폭까지 쪼그라들었습니다.
     3:2 는 사진의 표준 비율이라 가로 사진도 자연스럽고, 세로 그림은
     97px 로 18% 더 보입니다. 카드는 196 → 231px, 35px 만 커져요.
     ⚠️ 비율은 **고정값**입니다. 사진이 있든 없든 같아야 합니다 — 글에
        따라 카드 높이가 달라지면 아래 일정·소식까지 밀립니다. */
  aspect-ratio: 3 / 2; background: var(--chip-bg);
  display: grid; place-items: center;
}
.hot-vis .hv-cover img { width: 100%; height: 100%; object-fit: cover; display: block; }
.hot-vis .hv-emoji { font-size: 2.6rem; opacity: .8; }
.hot-vis .hv-emoji img, .hot-vis .hv-emoji .emo { width: 46px; height: 46px; object-fit: contain; }
/* 제목은 사진 위에 얹습니다 — 사진만 크고 제목이 아래로 밀리면
   무슨 글인지 읽는 데 눈이 두 번 움직여요. */
.hot-vis .hv-cap {
  position: absolute; left: 0; right: 0; bottom: 0;
  display: flex; align-items: flex-end; gap: 7px; padding: 22px 13px 11px;
  background: linear-gradient(180deg, transparent, rgba(0, 0, 0, .78));
}
/* ⚠️ 색을 적어 둡니다. 1~3위는 메달(이모지)이라 색이 없어도 되지만,
      4위부터는 '4위' 라는 **글자**가 들어갑니다. 어두운 그라데이션 위라
      색을 안 주면 링크 기본색이 깔려 안 읽혀요. */
.hot-vis .hv-rank {
  flex: 0 0 auto; line-height: 1.2;
  font-size: 0.875rem; font-weight: 800; color: #fff;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.hot-vis .hv-title {
  font-size: 0.9375rem; color: #fff; line-height: 1.35;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
  text-shadow: 0 1px 6px rgba(0, 0, 0, .6);
}
.hot-vis .hv-list { display: flex; flex-direction: column; gap: 2px; }
.hot-vis .hv-row {
  display: flex; align-items: center; gap: 9px;
  padding: 7px 9px; border-radius: 9px;
  text-decoration: none; color: inherit; font-size: 0.84375rem;
}
.hot-vis .hv-row:hover, .hot-vis .hv-row.on { background: var(--chip-bg); }
.hot-vis .hv-n {
  flex: 0 0 auto; width: 18px; height: 18px; border-radius: 50%;
  display: grid; place-items: center; font-size: 0.6875rem;
  background: var(--chip-bg); color: var(--text-muted);
}
.hot-vis .hv-row.on .hv-n { background: var(--brand); color: #fff; }
.hot-vis .hv-t {
  flex: 1 1 auto; min-width: 0; color: var(--text);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.hot-vis .hv-row.on .hv-t { color: var(--heading); }
.hot-vis .hv-c { flex: 0 0 auto; font-size: 0.6875rem; color: var(--text-muted); }

/* ---- 📅 작은 월간 달력 ----
   ⚠️ 전체 달력 화면처럼 크게 만들지 않습니다. 홈에서 알고 싶은 건
      이번 달에 뭐가 있나 뿐이에요. */
/* ⚠️ .home-cal-wide 를 함께 적어야 합니다. 이 규칙이 .home-main 안에만
      있어서, 일정을 전체 폭으로 빼낸 뒤 '‹ 2026년 9월 ›' 이 세로로
      쌓여 버렸어요. 자리를 옮길 때 딸려 오지 않는 규칙입니다. */
.home-main .mc-nav,
.home-cal-wide .mc-nav { margin-left: auto; display: flex; align-items: center; gap: 3px; }
.mc-arrow {
  width: 24px; height: 24px; border: 1px solid var(--border); border-radius: 7px;
  background: var(--surface); color: var(--text-muted); cursor: pointer;
  font-size: 0.875rem; line-height: 1; display: grid; place-items: center;
}
.mc-arrow:hover { border-color: var(--brand); color: var(--brand); }
.mc-title { font-size: 0.8125rem; color: var(--text-muted); min-width: 84px; text-align: center; }

.home-cal { position: relative; }
.mc-dow, .mc-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.mc-dow { margin-bottom: 3px; }
.mc-dow span {
  text-align: center; font-size: 0.6875rem; color: var(--text-muted); padding: 3px 0;
}
.mc-dow .sun { color: #d06a6a; }
.mc-dow .sat { color: #6a8ad0; }
.mc-grid { gap: 2px; }
.mc-cell {
  position: relative; min-height: 38px; padding: 4px 0 3px;
  border: 1px solid transparent; border-radius: 8px;
  background: none; cursor: default;
  display: flex; flex-direction: column; align-items: center; gap: 3px;
  font-family: inherit;
}
.mc-cell.has { cursor: pointer; }
.mc-cell.has:hover { background: var(--chip-bg); border-color: var(--border); }
.mc-cell.has:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.mc-cell.out { opacity: .32; }
.mc-cell.today { background: var(--chip-bg); border-color: var(--brand); }
.mc-n { font-size: 0.78125rem; color: var(--text); line-height: 1; }
.mc-n.sun { color: #d06a6a; }
.mc-n.sat { color: #6a8ad0; }
.mc-cell.today .mc-n { color: var(--brand); }
.mc-dots { display: flex; gap: 2px; min-height: 5px; }
/* ⚠️ 색은 둘만. 넷을 다 다른 색으로 하면 점이 알록달록해서
      아무 뜻도 안 남습니다. */
.mc-dot { width: 5px; height: 5px; border-radius: 50%; display: inline-block; }
.mc-event { background: var(--accent, #e0973a); }
.mc-shop { background: var(--brand); }
.mc-legend {
  display: flex; gap: 12px; justify-content: flex-end;
  margin-top: 7px; font-size: 0.6875rem; color: var(--text-muted);
}
.mc-legend span { display: inline-flex; align-items: center; gap: 4px; }

/* 날짜 쪽지 — 얹거나 누르면 그 날 일정 목록 */
.mc-pop {
  position: absolute; z-index: 30; min-width: 172px; max-width: 240px;
  padding: 7px; border: 1px solid var(--border); border-radius: 11px;
  background: var(--surface); box-shadow: 0 10px 26px rgba(0, 0, 0, .18);
}
.mcp-day { font-size: 0.71875rem; color: var(--text-muted); padding: 2px 7px 5px; }
.mcp-row {
  display: flex; align-items: center; gap: 7px; padding: 6px 7px;
  border-radius: 8px; text-decoration: none; color: var(--text); font-size: 0.8125rem;
}
.mcp-row:hover { background: var(--chip-bg); color: var(--brand); }
.mcp-ico { flex: 0 0 auto; font-size: 0.9rem; }
.mcp-ico img, .mcp-ico .emo { width: 15px; height: 15px; object-fit: contain; }
.mcp-t { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* =========================================================
   📅 이번 달 누리 일정 — **전체 폭**
   ---------------------------------------------------------
   ⚠️ 오른쪽 곁칸에 있을 때는 폭이 320px 이라 날짜 칸이 잘았습니다.
      이제 가로 전체를 쓰니 한 칸을 크게 잡아 '남은 자리' 를 채웁니다.
   ⚠️ 높이를 vh 로 잡지 않습니다. 달이 5주냐 6주냐에 따라 줄 수가 달라져서,
      화면 높이에 맞추면 달마다 칸 크기가 달라져요.
   ========================================================= */
.home-calrow { padding-top: 10px; padding-bottom: 38px; }
.home-cal-wide .feed-head h2 { font-size: 1.375rem; }
.home-cal-wide .home-cal {
  border: 1px solid var(--line); border-radius: 16px;
  padding: 16px 18px 14px; background: var(--surface);
}
.home-cal-wide .mc-dow span { font-size: 0.875rem; padding-bottom: 6px; }
.home-cal-wide .mc-grid { gap: 5px; }
/* 날짜 한 칸 — 넓어진 만큼 크게. 위에 숫자, 아래 점. */
.home-cal-wide .mc-cell {
  min-height: 74px; align-content: start; padding: 8px 0 0;
  border-radius: 10px;
}
.home-cal-wide .mc-n { font-size: 0.9375rem; }
.home-cal-wide .mc-dots { margin-top: 6px; }
.home-cal-wide .mc-dot { width: 7px; height: 7px; }
.home-cal-wide .mc-legend { margin-top: 12px; font-size: 0.8125rem; }
.home-cal-wide .mc-title { font-size: 0.9375rem; min-width: 96px; }
.home-cal-wide .mc-arrow { width: 30px; height: 30px; }

@media (max-width: 760px) {
  .home-cal-wide .home-cal { padding: 11px 10px 10px; }
  .home-cal-wide .mc-cell { min-height: 46px; padding-top: 5px; }
  .home-cal-wide .mc-n { font-size: 0.8125rem; }
  .home-cal-wide .mc-grid { gap: 2px; }
  .home-cal-wide .feed-head h2 { font-size: 1.125rem; }
}

/* ---- 📰 소식 — 전체 폭 가로 카드 (홈에서는 뺐고, news.html 이 씁니다) ---- */
.home-news-row {
  padding-top: 28px; padding-bottom: 30px;
  background: var(--surface-2, color-mix(in srgb, var(--surface) 60%, transparent));
  border-top: 1px solid var(--line); border-bottom: 1px solid var(--line);
}
#homeNews .sec-head {
  display: flex; align-items: baseline; gap: 12px; margin: 0 0 13px;
}
#homeNews .sec-head h2 { margin: 0; font-size: 1.25rem; color: var(--heading); }
#homeNews .sec-head .news-more { margin-left: auto; }
#homeNews .news-row {
  display: grid; grid-template-columns: repeat(3, 1fr); gap: 14px;
}
/* 가로 카드 — 그림 위, 제목 아래. 요약은 홈에서 감춥니다. */
#homeNews .news-row .news-card {
  flex-direction: column; align-items: stretch; gap: 0; padding: 0; overflow: hidden;
  transition: border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
#homeNews .news-row .news-card:hover {
  border-color: var(--brand); transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(0, 0, 0, .1);
}
#homeNews .news-row .news-thumb {
  width: 100%; height: auto; aspect-ratio: 16 / 9; border-radius: 0;
}
#homeNews .news-row .news-noimg { font-size: 1.6rem; }
#homeNews .news-row .news-body { padding: 11px 13px 13px; gap: 5px; }
#homeNews .news-row .news-title { font-size: 0.9375rem; -webkit-line-clamp: 2; }
#homeNews .news-row .news-sum,
#homeNews .news-row .news-tags { display: none; }
#homeNews .news-row .news-src { font-size: 0.71875rem; }

/* ---- 좁은 화면 — 재설계는 안 합니다. 세로로 쌓이게만. ---- */
@media (max-width: 980px) {
  .home-main-inner { grid-template-columns: 1fr; gap: 26px; }
  .home-main .hm-big .feed-head h2 { font-size: 1.3125rem; }
  #homeNews .news-row { grid-template-columns: 1fr; }
  .home-main { padding-top: 22px; padding-bottom: 22px; }
}

/* ⚠️ 사진 없는 대표 화제글 — 아이콘이 작으면 큰 칸이 텅 빈 것처럼
      보입니다(실제로 그랬어요). 자리를 채우도록 키우고, 바탕에 옅은
      결을 줘서 "사진이 없는 글" 로 읽히게 합니다. */
.hot-vis .hv-cover:has(.hv-emoji) {
  background:
    radial-gradient(120% 120% at 50% 30%, var(--surface-2, var(--chip-bg)), var(--chip-bg));
}
.hot-vis .hv-emoji { font-size: 4.2rem; opacity: .55; }
.hot-vis .hv-emoji img, .hot-vis .hv-emoji .emo { width: 74px; height: 74px; }

/* ⚠️ 홈 소식 카드를 '그림 위 · 제목 아래' 로 했더니, 대표 그림이 없는
      소식(많습니다)에서 16:9 빈 상자만 세 개 남았습니다 — 헛돌아요.
      그래서 가로 줄(작은 그림 왼쪽 · 제목 오른쪽)로 되돌립니다.
      세 칸으로 나란히 두는 것만 유지해요 — 그것만으로도 옆 칸들과
      모양이 충분히 다릅니다.
   ⚠️ news.html 의 카드는 그대로입니다. */
#homeNews .news-row .news-card {
  flex-direction: row; align-items: center; gap: 11px; padding: 11px 12px;
}
#homeNews .news-row .news-thumb {
  flex: 0 0 auto; width: 52px; height: 52px; aspect-ratio: auto; border-radius: 9px;
}
#homeNews .news-row .news-noimg { font-size: 1.2rem; }
#homeNews .news-row .news-body { padding: 0; gap: 3px; }
#homeNews .news-row .news-title { font-size: 0.875rem; -webkit-line-clamp: 2; }

/* 트리거가 <a> 도 되므로 밑줄을 지웁니다 (고른 것 표시는 아래 초록 선입니다) */
@media (min-width: 901px) {
  .mainnav a.mn-link { text-decoration: none; }
}

/* ⚠️ 대표 사진이 16:9 를 무시하고 세로로 길게 늘어났습니다 (425×756).
      까닭: .hv-cover 가 display:grid 인데 그 안의 <img> 가 세로로 긴
      원본(576×1024)이면, 격자 줄이 '내용 높이' 로 잡혀서 aspect-ratio 를
      이깁니다. 실제로 옆 칸이 새 글 칸보다 두 배 넘게 길어졌어요
      (1300px 대 574px) — 위계가 거꾸로 보였습니다.
      그래서 그림을 자리에서 띄웁니다. 이제 높이를 정하는 건 비율뿐이고,
      그림은 그 안을 채우기만 합니다. 이모지 대체 표시는 그대로 가운데. */
.hot-vis .hv-cover { position: relative; overflow: hidden; }
/* 🖼 표지 = 흐린 바탕 + 온전한 그림
   ---------------------------------------------------------
   ⚠️⚠️ 예전에는 한 장을 16:9 로 **잘라서**(cover) 넣었습니다. 그런데
      누리에 올라오는 사진은 세로로 긴 것이 많아요 — 누리툰이 434×1024,
      576×1024 입니다. 16:9 로 자르면 세로의 **5분의 1만** 남습니다.
      만화는 첫 칸 한 토막, 사진은 몸통 한 줄만 보여서 무슨 그림인지
      알 수가 없었어요. 「위쪽을 남기기(object-position: top)」 를 붙여
      봤지만 **잘리는 양 자체는 그대로**였습니다.
   ⚠️ 그래서 자르지 않고 **통째로** 보여 줍니다(contain). 남는 자리는 같은
      사진을 크게 흐려 깔아 메워요 — 검은 띠 대신 그림의 색이 이어져서
      세로든 가로든 한 칸처럼 보입니다.
   ⚠️ 틀(16:9)은 그대로입니다. 비율을 건드리면 사진 없는 글에 얹었을 때
      카드 높이가 달라져 아래 칸들이 밀립니다 — 그 문제로 이미 한 번
      고생한 자리예요.
   ⚠️ 바탕은 조금 키워서(scale) 깝니다. blur 는 가장자리를 투명하게
      번지게 해서, 딱 맞게 깔면 테두리에 흐릿한 띠가 생깁니다. */
.hot-vis .hv-cover .hv-bg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: cover; object-position: center;
  filter: blur(18px) saturate(1.25) brightness(.72);
  transform: scale(1.18);
  pointer-events: none;
}
.hot-vis .hv-cover .hv-fg {
  position: absolute; inset: 0; width: 100%; height: 100%;
  object-fit: contain; object-position: center;
}
/* ⚠️ 흐리기를 못 받는 브라우저에서도 글자가 읽혀야 합니다 — 아래쪽
   그라데이션(.hv-cap)이 이미 깔리지만, 바탕이 밝은 사진일 때를 위해
   아주 옅은 어둠을 한 겹 더 둡니다. */
.hot-vis .hv-cover::after {
  content: ""; position: absolute; inset: 0;
  background: rgba(0, 0, 0, .12); pointer-events: none;
}
@media (prefers-reduced-motion: reduce) {
  .hot-vis .hv-cover .hv-bg { transform: none; }
}

/* =========================================================
   🔧 홈 미세조정 — 잘림 · 비율 · 높이
   ========================================================= */

/* ① 머리띠 잘림.
   ⚠️ 메뉴 내용이 613px 인데 자리가 599px 이라 '더보기' 가 14px 잘렸습니다.
      까닭은 .mainnav 가 flex: 0 1 auto 라 자리가 모자라면 **줄어들어서**
      내용이 넘친 것입니다. 글자를 줄이지 않고 두 가지로 풉니다:
        · 메뉴를 줄어들지 않게 (flex: 0 0 auto)
        · 칸 사이 여백을 조금 좁게 (13 → 10px, 왼쪽 여백 26 → 18px)
      7칸 × 6px + 8px = 50px 이 남아, 오른쪽 계정·아이콘 자리를 건드리지
      않고도 들어갑니다.
   ⚠️ 글자를 줄이거나(…) 메뉴를 더보기로 옮기지 않았습니다 — 여백만으로
      들어가는데 굳이 기능을 한 겹 더 숨길 이유가 없어요. */
@media (min-width: 901px) {
  .mainnav { flex: 0 0 auto; margin-left: 18px; }
  .mainnav .mn-link { padding: 0 10px; white-space: nowrap; }
  .mainnav .mn-item { white-space: nowrap; }
  /* 오른쪽 계정·아이콘은 어떤 경우에도 찌그러지지 않게 */
  .header-top .nav > .header-right { flex: 0 0 auto; min-width: 0; }
}

/* ② 새 글 : 화제글 = 60.8 : 39.2 → 약 58.7 : 41.3
   ⚠️ 화제글 폭은 거의 그대로 두고(427 → 약 447) 새 글만 좁힙니다.
      새 글이 너무 넓어 한 줄이 휑했어요. */
/* ⚠️ 반드시 넓은 화면으로 한정합니다. 미디어 쿼리 없이 적었더니
      위쪽의 '@media (max-width: 980px) → 1fr' 규칙을 **뒤에서 덮어서**,
      390px 에서도 두 칸 격자가 되고 오른쪽이 minmax(320px,…) 를 차지해
      새 글 칸이 28px 로 찌부러졌습니다 (390px 실측에서 잡았습니다). */
@media (min-width: 981px) {
  .home-main-inner { grid-template-columns: minmax(0, 1.42fr) minmax(320px, 1fr); gap: 28px; }
}

/* ③ 새 글 카드 높이 76px → 약 62px (-18%)
   ⚠️ 제목 크기는 그대로입니다. 위계(제목 > 작성자·시간)를 지키려고
      줄인 건 여백과 섬네일뿐이에요. */
.fresh-big { gap: 7px; }
.fresh-big .fb-row { padding: 9px 13px; gap: 11px; }
.fresh-big .fb-thumb { width: 40px; height: 40px; border-radius: 9px; }
.fresh-big .fb-emoji img, .fresh-big .fb-emoji .emo { width: 19px; height: 19px; }
.fresh-big .fb-body { gap: 2px; }

/* ④ 검색 아래 바로가기 단추 높이 48px → 약 43px (-10%) */
@media (min-width: 901px) {
  .hero-quick.hq-row a { padding: 11px 20px; }
}
/* 목표까지 한 걸음 더 — 카드 76 → 62px (-18%), 단추 48 → 43px (-10%) */
.fresh-big .fb-row { padding: 7px 13px; }
.fresh-big .fb-thumb { width: 38px; height: 38px; }
@media (min-width: 901px) {
  .hero-quick.hq-row a { padding: 10px 20px; }
}

/* =========================================================
   🧭 PC 머리띠 — 1차 넷 + 오른쪽 더보기
   ---------------------------------------------------------
   ⚠️ 1차가 일곱일 때는 같은 크기로 늘어서서 '무엇이 큰 갈래인가' 가
      안 보였습니다. 넷으로 줄이니 칸 사이를 넉넉히 줄 수 있어요.
   ⚠️ 모바일(.category-bar)은 손대지 않습니다.
   ========================================================= */
@media (min-width: 901px) {
  /* 넷뿐이라 여백을 되돌립니다 (잘림 걱정이 없어졌어요) */
  .mainnav { margin-left: 26px; gap: 4px; }
  .mainnav .mn-link { padding: 0 14px; white-space: nowrap; }

  /* '더보기' 는 오른쪽 무리의 맨 앞 — 1차 넷과 섞이지 않게 */
  .mainnav-more { display: flex; margin-left: 0; margin-right: 2px; }
  .mainnav-more .mn-link { padding: 0 11px; font-size: 0.875rem; }
  .mainnav-more .mn-pop { left: auto; right: 0; border-radius: 0 0 14px 14px; }

  /* ---- 2단: 왼쪽 분류 · 오른쪽 대표 동물 ----
     ⚠️ 둘이 **같은 칸 안**에 있습니다. 마우스가 1단에서 2단으로 건너가도
        칸을 벗어나지 않아 닫히지 않아요.
     ⚠️ 과하게 큰 mega-menu 가 되지 않게 폭을 묶어 둡니다. */
  .mainnav .mn-pop-two {
    display: none; grid-template-columns: 200px 190px; gap: 6px;
    min-width: 0; padding: 8px;
  }
  .mainnav .mn-item.open .mn-pop-two { display: grid; }
  .mainnav .mn-pop-two .mp-col { min-width: 0; }
  .mainnav .mn-pop-two .mp-species {
    border-left: 1px solid var(--line); padding-left: 7px;
  }

  .mainnav .mp-g {
    display: block; width: 100%; text-align: left;
    padding: 8px 11px; border: 0; background: none; cursor: pointer;
    font-family: inherit; font-size: 0.875rem; font-weight: 600;
    color: var(--text); text-decoration: none; border-radius: 9px;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  /* 🖱️ 마우스를 얹은 칸(hover) — **초록이 아닙니다.**
     ---------------------------------------------------------
     ⚠️⚠️ 예전에는 이것도 `color: var(--brand)` 초록이었습니다. 그런데
        아래 `.mp-g.cur`(지금 고른 갈래)도 같은 초록이라, 목록에 초록이
        **둘** 떴어요. 센세가 "내가 지금 뭘 고른 건지 모르겠다" 고 하신
        화면이 이것입니다 — 전체 누리를 보고 있는데도 설치류가 초록이라
        설치류를 고른 것처럼 보였습니다.
     ⚠️ 셋은 뜻이 다르니 생김새도 셋 다 달라야 합니다 —
        **hover = 옅은 바탕 / 펼침 = ▸ 표시 / 지금 보는 동물 = 초록(`.cur`)**. */
  /* ⚠️⚠️ 여기에 `.mp-g.on`(펼쳐 둔 갈래)을 **다시 넣지 마세요.**
     펼침은 색이 아니라 아래 ▸ 표시로만 알립니다. 펼쳤다는 이유로
     바탕이 칠해지면, 마우스를 얹은 칸(hover)과 구별이 안 돼
     「내가 지금 무엇을 고른 거지」가 다시 헷갈립니다. */
  .mainnav .mp-g:hover { background: var(--surface-2); color: var(--text); }
  /* ▸ — '이 칸의 종을 오른쪽에 펼쳐 두었다' 는 뜻.
     ⚠️ 색으로만 가르지 않습니다. 색을 못 가리는 분에게도 보이게요. */
  .mainnav .mp-g.on::after {
    content: "▸"; float: right; opacity: .55; font-size: 0.8125rem;
  }
  .mainnav .mp-g .soon-mini { font-size: 0.6875rem; opacity: .7; margin-left: 4px; }

  .mainnav .mp-s-head {
    font-size: 0.71875rem; color: var(--text-muted);
    padding: 4px 10px 6px; white-space: nowrap;
  }
  .mainnav .mp-s .mn-pop-item { font-size: 0.84375rem; padding: 7px 10px; }
  .mainnav .mp-s-all {
    display: block; margin-top: 4px; padding: 7px 10px;
    font-size: 0.75rem; color: var(--brand); text-decoration: none;
    white-space: nowrap;
  }
  .mainnav .mp-s-all:hover { text-decoration: underline; }
  .mainnav .mp-s-hint {
    padding: 12px 10px; font-size: 0.75rem; color: var(--text-muted);
    line-height: 1.5; word-break: keep-all;
  }
}

/* ⚠️ 로그인하면 오른쪽이 확 넓어집니다 — 닉네임 + 칭호 + 알림 종.
      '짭짤고소버터오징어 · 관리자' 로 재 보니 오른쪽 무리가 339 → 573px 이
      됐어요. 1차 메뉴를 넷으로 줄여서 지금은 12px 여유로 들어가지만,
      닉네임이 더 길면 메뉴를 밀어냅니다.
      그래서 머리띠 안에서만 닉네임 폭을 묶어 둡니다 (프로필 카드 안의
      닉네임은 그대로 다 보입니다 — 거기서는 이름이 주인공이니까요).
   ⚠️ 메뉴 글자는 줄이지 않습니다. 줄이는 건 사람 이름 한 곳뿐이에요. */
@media (min-width: 901px) {
  .header-top .nav .profile-trigger .profile-name {
    max-width: 160px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }
  /* 그래도 모자라면 메뉴가 먼저 좁아집니다 — 겹치는 것보다 낫습니다 */
  .mainnav { min-width: 0; }
}

/* ⚠️ '찾기' 를 '찾기 & 판매' 로 바꾸니 40px 이 늘어, 로그인 상태에서
      오른쪽 끝(언어 선택 KR)이 화면 밖으로 밀렸습니다.
      글자를 줄이지 않고 칸 사이 여백만 조입니다 — 넷뿐이라 조여도
      빽빽해 보이지 않아요. */
@media (min-width: 901px) {
  .mainnav { margin-left: 18px; gap: 2px; }
  .mainnav .mn-link { padding: 0 11px; }
  .mainnav-more .mn-link { padding: 0 9px; }
  .header-right { gap: 9px; }
}

/* ⚠️ 로그인 상태에서 오른쪽 무리가 572px 이 되면서, 본문 폭(1160)에
      가둔 머리띠 줄을 44px 넘겼습니다 — 언어 선택(KR)이 화면 밖으로
      나가고 가로 스크롤이 생겼어요.
      머리띠는 화면 끝까지 펼쳐진 띠라, 그 안의 줄만 조금 넓힙니다.
      (예전 두 층이던 시절에도 메뉴줄은 1320px 이었습니다 — 같은 까닭)
   ⚠️ 본문은 그대로 1160 입니다. 로고가 본문보다 50px 쯤 왼쪽에 서지만,
      글자를 줄이거나 메뉴를 감추는 것보다 낫습니다. */
@media (min-width: 901px) {
  .header-top > .container.nav { max-width: 1260px; }
}

/* =========================================================
   🐾 지금 동물 스위처 — 머리띠 · 커뮤니티 화면
   ---------------------------------------------------------
   ⚠️ 늘 보입니다. '지금 무엇을 보고 있나' 를 모르면, 커뮤니티에서 왜
      갑각류 글이 나오는지 알 수가 없어요.
   ========================================================= */
@media (min-width: 901px) {
  .an-switch { position: relative; display: flex; flex: 0 0 auto; }
  .an-trigger {
    display: inline-flex; align-items: center; gap: 6px;
    height: 34px; padding: 0 11px;
    border: 1px solid var(--line); border-radius: 999px;
    background: var(--surface); cursor: pointer;
    font-family: inherit; font-size: 0.8125rem; font-weight: 700;
    color: var(--text); white-space: nowrap;
  }
  .an-trigger:hover { border-color: var(--brand); color: var(--brand); }
  .an-trigger:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
  .an-now-lbl { font-size: 0.6875rem; color: var(--text-muted); font-weight: 600; }
  .an-trigger .an-nm { max-width: 96px; overflow: hidden; text-overflow: ellipsis; }
  .an-switch .an-pop { left: auto; right: 0; min-width: 194px; }
}

/* 목록 한 줄 — 머리띠와 커뮤니티 화면이 같은 모양을 씁니다 */
.an-item {
  display: flex; align-items: center; gap: 8px;
  padding: 8px 11px; border-radius: 9px;
  text-decoration: none; color: var(--text);
  font-size: 0.875rem; font-weight: 600; white-space: nowrap;
}
.an-item:hover { background: var(--chip-bg); color: var(--brand); }
.an-item.on { color: var(--brand); }
.an-ico { flex: 0 0 auto; font-size: 1rem; line-height: 1; }
.an-ico img, .an-ico .emo { width: 17px; height: 17px; object-fit: contain; }
.an-nm { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.an-sep {
  padding: 8px 11px 4px; font-size: 0.6875rem;
  color: var(--text-muted); font-weight: 700;
}
.an-more {
  display: block; width: 100%; margin-top: 4px; padding: 8px 11px;
  border: 0; border-top: 1px solid var(--line); background: none; cursor: pointer;
  font-family: inherit; font-size: 0.78125rem; color: var(--brand);
  text-align: left;
}
.an-more:hover { background: var(--chip-bg); }

/* ---- 커뮤니티 화면 안의 작은 스위처 ----
   ⚠️ 머리띠까지 올라가지 않고 그 자리에서 동물을 바꾸려고 둡니다.
      같은 칸(커뮤니티)에 머문 채 동물만 갈아타요. */
.an-inline { position: relative; display: inline-flex; vertical-align: middle; }
.an-inline .an-trigger { height: 30px; font-size: 0.78125rem; }
.an-inline .an-pop {
  display: none; position: absolute; top: calc(100% + 4px); left: 0; z-index: 300;
  min-width: 186px; padding: 7px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
}
.an-inline.open .an-pop { display: block; }
.an-inline .an-more { font-size: 0.75rem; }
/* 커뮤니티 제목 + 그 옆 스위처 */
.ph-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.ph-title h1 { margin: 0; }

/* =========================================================
   🐾 큰 제목 옆의 「지금 동물」 알약 (2026-09-18 다시 잡음)
   ---------------------------------------------------------
   ⚠️⚠️ 센세가 두 번 "못생겼다" 고 하신 자리입니다. 두 번째 까닭은
      **한 알약이 두 덩어리로 보인 것**이었어요:
        · ▾ 를 24px 동그라미에 넣고 왼쪽에 실선을 그어 갈라 뒀는데,
          그 실선이 사진 위에서는 안 보입니다. 그래서 「소라게」 알약
          옆에 **정체를 알 수 없는 작은 동그라미**가 하나 떠 있는
          모습이 됐습니다(스크린샷의 그 모습).
        · 바탕을 78% 만 채워 둬서 밝은 사진 위에서는 글자까지 흐려
          보였습니다. 읽히는 것이 첫째인데 거기서 양보했어요.
   ⚠️ 그래서 **하나의 단단한 알약**으로 다시 잡았습니다 —
        · 바탕을 94% 까지 채웁니다(사진 위에서도 글자가 또렷하게).
          흐리기는 남겨 둡니다 — 남은 6% 가 사진 색을 아주 옅게 받아
          화면에 얹힌 느낌이 살아요. 완전히 불투명하면 오려 붙인
          네모가 됩니다.
        · ▾ 는 동그라미도 칸막이도 없이 글자 옆에 작게 둡니다.
          「눌러서 바꾼다」 는 알약 전체가 말합니다 — 그림 하나로
          다시 말하려다 오히려 정체 불명이 됐습니다.
        · 동물을 골랐으면 **앞에 초록 점** 하나. 「지금 이것」 을
          색이 아닌 모양으로도 말해야 하고(색맹), 점은 폭을 거의
          안 먹습니다.
   ⚠️ 머리띠 알약(.an-switch)은 그대로 둡니다 — 거긴 기능 메뉴 줄이라
      작아야 맞아요. 여기만 이 자리 전용입니다.
   ========================================================= */
.ph-title .an-inline .an-trigger {
  height: 36px; padding: 0 13px; gap: 7px;
  border-radius: 999px;
  font-size: 0.875rem; font-weight: 700; letter-spacing: -0.01em;
  /* 사진 위에서도 또렷하게 — 거의 다 채우고 흐리기만 남깁니다 */
  background: color-mix(in srgb, var(--surface) 94%, transparent);
  border: 1px solid color-mix(in srgb, var(--text) 13%, transparent);
  -webkit-backdrop-filter: blur(8px) saturate(1.1);
  backdrop-filter: blur(8px) saturate(1.1);
  box-shadow: 0 1px 2px rgba(0, 0, 0, .05), 0 6px 18px rgba(0, 0, 0, .13);
  transition: background .14s, border-color .14s, box-shadow .14s, transform .14s;
}
.ph-title .an-inline .an-trigger .an-nm { max-width: 13ch; }
/* ▾ — 알약과 한 몸입니다. 칸막이도 동그라미도 없습니다. */
.ph-title .an-inline .an-trigger .navmenu-caret {
  width: auto; height: auto; margin: 0; padding: 0;
  border: 0; border-radius: 0; box-sizing: border-box;
  font-size: 0.5625rem; opacity: .45;
  transform: translateY(1px);
  transition: opacity .14s, transform .14s;
}
.ph-title .an-inline.open .an-trigger .navmenu-caret {
  transform: translateY(1px) rotate(180deg); opacity: .8;
}
.ph-title .an-inline .an-trigger:hover {
  background: var(--surface);
  border-color: color-mix(in srgb, var(--brand) 45%, transparent);
  box-shadow: 0 2px 4px rgba(0, 0, 0, .06), 0 10px 24px rgba(0, 0, 0, .17);
  transform: translateY(-1px);
}
.ph-title .an-inline .an-trigger:hover .navmenu-caret { opacity: .8; }
/* 🟩 동물을 골랐을 때 — 초록 점 + 옅은 초록 바탕.
   ⚠️ 점은 ::before 로 답니다. 글자를 더 넣으면 제목 옆이 길어져요. */
.ph-title .an-inline .an-trigger.on {
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  border-color: color-mix(in srgb, var(--brand) 38%, transparent);
  color: var(--brand-strong);
}
.ph-title .an-inline .an-trigger.on::before {
  content: ""; flex: 0 0 auto;
  width: 6px; height: 6px; border-radius: 999px;
  background: var(--brand);
}
.ph-title .an-inline .an-trigger.on:hover {
  background: color-mix(in srgb, var(--brand) 16%, var(--surface));
  border-color: var(--brand);
}
/* ⚠️ 펼친 칸도 이 자리에서는 조금 넓게 — 종 이름이 두 줄로 접히면
   고르기가 어렵습니다(크레스티드 게코). */
.ph-title .an-inline .an-pop { min-width: 212px; }

@media (max-width: 700px) {
  /* ⚠️ 폰에서는 제목이 두 줄이 되기 쉬워서 한 단 줄입니다. 그래도
     손가락이 닿아야 하니 32px 아래로는 안 내립니다. */
  .ph-title .an-inline .an-trigger {
    height: 33px; padding: 0 11px; gap: 6px; font-size: 0.8125rem;
  }
  .ph-title .an-inline .an-trigger.on::before { width: 5px; height: 5px; }
}

/* ⚠️ 머리띠 스위처의 펼침 칸이 접히지 않고 줄 안에 그대로 펼쳐져 있었습니다.
      까닭: .mn-pop 규칙을 전부 `.mainnav .mn-pop` 로 걸어 뒀는데, 스위처는
      .mainnav 안이 아니라 .header-right 의 자식이라 그 규칙이 안 닿았어요.
      (그 탓에 가로 넘침까지 생겼습니다)
      스위처에도 같은 규칙을 줍니다. */
@media (min-width: 901px) {
  .an-switch .mn-pop {
    display: none; position: absolute; top: 100%; right: 0; left: auto; z-index: 300;
    min-width: 194px; padding: 7px;
    background: var(--surface); border: 1px solid var(--border);
    border-radius: 0 0 14px 14px; border-top: 0;
    box-shadow: 0 14px 34px rgba(0, 0, 0, .16);
  }
  .an-switch.open .mn-pop { display: block; }
}
/* 좁은 화면에서는 스위처를 감춥니다 — 모바일 머리띠는 이번에 손대지 않아요.
   ⚠️ 상태(nuri:animal)는 모바일에서도 그대로 살아 있습니다. 화면에서
      바꾸는 자리만 커뮤니티 화면 안(.an-inline)에 있어요. */
@media (max-width: 900px) {
  .an-switch { display: none; }
}

/* 🐾 '내 동물 찾기' 에서 지금 고른 것 표시
   ⚠️ 색으로만 가르지 않습니다 — 1단은 왼쪽 세로 막대, 2단은 체크표까지. */
@media (min-width: 901px) {
  /* ⚠️⚠️ `:hover`·`.on` 보다 **뒤에** 있어야 합니다. 지금 고른 갈래에
        마우스를 얹었을 때 초록이 회색에 덮이면 안 돼요. 같은 굵기의
        선택자라 순서가 곧 우선순위입니다. */
  .mainnav .mp-g.cur,
  .mainnav .mp-g.cur:hover,
  .mainnav .mp-g.cur.on {
    background: var(--chip-bg); color: var(--brand);
    box-shadow: inset 3px 0 0 var(--brand);
  }
  .mainnav .mp-s .mn-pop-item.sel {
    background: var(--chip-bg); color: var(--brand); font-weight: 800;
    display: flex; align-items: center; justify-content: space-between; gap: 8px;
  }
  .mainnav .mp-chk { flex: 0 0 auto; font-size: 0.8125rem; }
}

/* 🐾 업체 화면 — 지금 동물 기준 안내 칩 */
.shop-animal-chip {
  display: inline-flex; align-items: center; gap: 8px;
  margin: 2px 0 10px; padding: 6px 10px 6px 8px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); font-size: 0.8125rem; color: var(--text);
}
.shop-animal-chip .sac-ico { font-size: 1rem; line-height: 1; }
.shop-animal-chip .sac-ico img, .shop-animal-chip .sac-ico .emo {
  width: 17px; height: 17px; object-fit: contain;
}
.shop-animal-chip .sac-txt b { color: var(--brand); }
.shop-animal-chip .sac-all {
  border: 0; background: none; cursor: pointer; padding: 2px 4px;
  font-family: inherit; font-size: 0.78125rem; font-weight: 700; color: var(--text-muted);
  text-decoration: underline;
}
.shop-animal-chip .sac-all:hover { color: var(--brand); }

/* ⚠️ 커뮤니티 화면의 동물 스위처가 글 목록 밑으로 깔렸습니다.
      z-index 가 낮아서가 아니라, .page-hero 에 isolation: isolate 가 있어
      **쌓임 맥락**이 만들어지기 때문이에요 — 그 안에서 아무리 올려도
      맥락 밖(뒤에 오는 .section)을 이길 수 없습니다.
      그래서 펼쳐져 있는 동안 히어로 자체를 한 겹 올립니다.
   ⚠️ 머리띠(.site-header)는 z-index 100 이라 그보다 낮게 둡니다 —
      머리띠까지 덮으면 안 돼요. */
.page-hero.an-open { position: relative; z-index: 60; }

/* 🐚 화면 안 동물 스위처 — 갈래 줄과 그 아래 종 줄
   ⚠️ 종 줄은 들여씁니다. 갈래와 종이 같은 자리에 있으면 '갑각류' 와
      '소라게' 가 같은 급으로 읽혀요. */
.an-inline .an-item.an-g { font-weight: 700; }
.an-inline .an-item.an-sp { padding-left: 30px; font-size: 0.8125rem; font-weight: 600; }
.an-inline .an-item.an-sp .an-ico { display: none; }
.an-chk { margin-left: auto; flex: 0 0 auto; font-size: 0.8125rem; color: var(--brand); }
/* '이 분류 전체 글' — 종으로 좁혔을 때 돌아갈 길 */
.sp-all-link {
  display: inline-block; margin-left: 10px;
  font-size: 0.78125rem; color: var(--brand); text-decoration: none; white-space: nowrap;
}
.sp-all-link:hover { text-decoration: underline; }

/* 🐚 종 일괄 이동 (관리자) */
.spm-grid { display: grid; grid-template-columns: 1fr auto 1fr; gap: 16px; align-items: start; margin: 14px 0; }
.spm-col { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.spm-col label { font-size: 0.75rem; color: var(--text-muted); margin-top: 6px; }
.spm-col select { width: 100%; }
.spm-h { font-weight: 800; color: var(--heading); }
.spm-arrow { align-self: center; font-size: 1.4rem; color: var(--text-muted); }
.spm-acts { display: flex; gap: 10px; flex-wrap: wrap; margin-top: 6px; }
.spm-msg { margin-top: 10px; font-size: 0.875rem; color: var(--text); }
.spm-msg.bad { color: var(--danger, #d05a5a); }
@media (max-width: 700px) {
  .spm-grid { grid-template-columns: 1fr; }
  .spm-arrow { transform: rotate(90deg); }
}

/* ⚠️ 갈래 8 + 각 대표 종 3 = 32줄이라 펼친 칸이 화면을 넘어갔습니다.
      아래쪽 항목은 눌러 볼 수조차 없었어요. 높이를 묶고 그 안에서
      굴러가게 합니다. */
.an-inline .an-pop { max-height: min(62vh, 460px); overflow-y: auto; overscroll-behavior: contain; }

/* =========================================================
   🐾 '지금 동물' = '내 동물 찾기' — 하나로 합친 칸
   ---------------------------------------------------------
   예전에는 머리띠 오른쪽에 '현재: 소라게 ▾' 가 따로 있었습니다. 왼쪽
   '내 동물 찾기' 와 하는 일이 같은데 자리만 둘이라, 어디서 바꿔야 하는지
   헷갈렸어요. 이제 1차 메뉴 하나가 '지금 무엇을 보고 있나' 이자
   '바꾸는 자리' 입니다.
   ========================================================= */
@media (min-width: 901px) {
  /* 이름표에 아이콘 + 이름이 들어갑니다 */
  #animalSwitch > .mn-link { gap: 6px; }
  #animalSwitch > .mn-link .an-ico { font-size: 1.05rem; line-height: 1; }
  #animalSwitch > .mn-link .an-ico img,
  #animalSwitch > .mn-link .an-ico .emo { width: 18px; height: 18px; object-fit: contain; }
  #animalSwitch > .mn-link .an-nm { max-width: 108px; overflow: hidden; text-overflow: ellipsis; }

  /* 왼쪽 칸 위쪽의 빠른 고르기 — 전체 · 최근 · 내 동물 */
  #animalSwitch .mp-groups .an-item {
    padding: 8px 11px; border-radius: 9px; font-size: 0.875rem; font-weight: 600;
  }
  #animalSwitch .mp-groups .an-sep {
    padding: 9px 11px 4px; font-size: 0.6875rem; color: var(--text-muted); font-weight: 700;
  }
  /* '동물 찾기' 앞에 선을 그어 '빠른 고르기' 와 갈라 둡니다 */
  #animalSwitch .mp-groups .an-sep.an-find {
    border-top: 1px solid var(--line); margin-top: 5px; padding-top: 9px;
  }
  /* 펼친 칸이 길어질 수 있어 굴러가게 — 최근·내 동물이 쌓이면 넘칩니다 */
  #animalSwitch .mp-col.mp-groups { max-height: min(66vh, 480px); overflow-y: auto; overscroll-behavior: contain; }
}

/* =========================================================
   🔎 머리띠 오른쪽 — 비어 있던 자리를 검색으로
   ---------------------------------------------------------
   1900px 에서 재 보니 메뉴 끝과 오른쪽 끝 사이가 275px 비어 있었습니다.
   까닭 둘:
     ① .header-right 에 margin-left: 12px 를 준 탓에 'auto' 가 죽어
        오른쪽 끝으로 밀리지 않았습니다.
     ② 밀어 놓아도 그만큼이 그냥 빈 칸이었어요.
   빈 자리를 장식으로 채우지 않고, 어차피 가장 많이 쓰는 것을 꺼내 둡니다 —
   🔍 를 한 번 눌러야 나오던 검색칸이에요.
   ========================================================= */
@media (min-width: 901px) {
  /* ⚠️ auto 를 되돌립니다. 이게 있어야 오른쪽 무리가 끝에 붙습니다. */
  .header-top .nav > .header-right { margin-left: auto; }
}

/* ⚠️ 기본값은 '안 보임' 입니다. form 은 그냥 두면 block 이라 폰에서도
      불쑥 나옵니다. 밑에서 has-find 가 붙을 때만 켜져요. */
.hdr-find { display: none; }


/* 자리가 남을 때만 펼쳐 둡니다.
   ⚠️ 화면 너비로 가르지 않습니다. 줄은 max-width: 1260px 라 1280px 에서나
      1900px 에서나 쓸 수 있는 자리가 똑같아요. 대신 자리를 잡아먹는 것은
      **로그인 상태**입니다 — 닉네임 + [관리자] 딱지가 붙으면 오른쪽 무리가
      270px → 530px 로 늘어납니다. 그래서 화면 크기가 아니라 '남은 자리' 를
      재서 켭니다(main.js 검색칸맞춤). 안 켜지면 🔍 단추가 그대로 대신해요. */
.site-header.has-find .hdr-find {
  display: flex; align-items: center; gap: 7px;
  /* ⚠️ 줄어들 수 있게 둡니다. 남은 자리가 300px 이 안 되면 그만큼만
        차지하고, 160px 밑으로는 안 줄어듭니다(그 밑은 못 읽어요). */
  flex: 0 1 auto; width: 300px; min-width: 160px;
  height: 36px; padding: 0 12px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface);
  transition: border-color .12s ease, box-shadow .12s ease;
}
.site-header.has-find .hdr-find:focus-within {
  border-color: var(--brand); box-shadow: 0 0 0 3px var(--chip-bg);
}
.hdr-find .hdr-find-ico { flex: 0 0 auto; font-size: 0.9rem; opacity: .7; line-height: 1; }
.hdr-find .hdr-find-ico img, .hdr-find .hdr-find-ico .emo { width: 15px; height: 15px; object-fit: contain; }
.hdr-find input {
  flex: 1 1 auto; min-width: 0;
  border: 0; background: none; outline: none;
  font-family: inherit; font-size: 0.84375rem; color: var(--text);
}
.hdr-find input::placeholder { color: var(--text-muted); }

@media (min-width: 901px) {
  /* ⚠️ 오른쪽 무리만 줄어들 수 있게. 안 그러면 검색칸이 못 줄고 넘칩니다. */
  .header-top .nav > .header-right { min-width: 0; }
  /* 펼친 칸이 있으면 🔍 단추는 같은 길이라 감춥니다 */
  .site-header.has-find #searchBtn { display: none; }
}

@media (min-width: 901px) {
  /* ⚠️ 메뉴와 검색칸이 5px 만 떨어져 붙어 보였습니다. 검색칸은 자기 자리를
        끝까지 차지하려 들거든요. 메뉴 오른쪽에 못 넘어올 선을 그어 두면
        검색칸이 그만큼 알아서 줄어듭니다. */
  .site-header.has-find #mainNav { margin-right: 26px; }
}

/* =========================================================
   🐚 게시판이 '종' 이 되었습니다 — 지금 보고 있는 동물을 크게 말하기
   ---------------------------------------------------------
   갈래(갑각류·파충류)는 이제 고를 때 한 번 거치는 서랍이고, 글이 쌓이는
   곳은 종(소라게·크레스티드 게코)입니다.
   ⚠️ 예전에는 소라게 게시판을 보고 있어도 제목이 '🦀 갑각류 커뮤니티' 라,
      지금 어디에 있는지 화면 어디에도 안 적혀 있었어요.
   ⚠️ 색만으로 가르지 않습니다 — 아이콘·글자·읽어 줄 말이 함께 갑니다.
   ========================================================= */

/* ① 빵부스러기 끝 — '홈 / 갑각류 / 소라게' 의 마지막 칸.
      ⚠️ 지금 있는 자리라 링크가 아닙니다. 링크처럼 보이면 눌러 보고
         아무 일도 안 일어나 헷갈려요. 그래서 색을 빼고 글자만 세웁니다.
      ⚠️ 제목 위에 갈래를 또 적어 봤는데, 빵부스러기와 같은 말이 두 번이고
         사진 배경 위라 회색 글씨가 잘 안 보였습니다. 여기 한 곳에만 둡니다. */
.breadcrumb .crumb-here { color: inherit; opacity: .95; font-weight: 700; }

/* ⚠️ 머리띠 이름표를 '지금 동물' 알약으로 꾸미던 규칙을 지웠습니다.
   머리띠 첫 칸은 이제 이름이 안 바뀌는 기능 메뉴('동물 찾기')예요 —
   상태가 아니라 기능이라 다른 메뉴와 같은 모양이어야 합니다.
   지금 무엇을 보고 있는지는 화면 위쪽 스위처(.an-inline)가 말합니다. */

/* ③ 화면 안 스위처도 골랐으면 채워 둡니다 */
.an-trigger.on {
  background: var(--chip-bg);
  border-color: color-mix(in srgb, var(--brand) 34%, transparent);
  color: var(--brand-strong);
}
.an-trigger.on:hover { background: color-mix(in srgb, var(--brand) 16%, var(--chip-bg)); }

/* ④ 펼친 칸 — 갈래는 머리글, 종이 실제로 가는 줄 */
.an-ghead {
  /* ⚠️ baseline 이 아니라 center 입니다 — 안에 단추가 들어오면서
     baseline 로는 「전체」 가 위로 떠 보였습니다. */
  display: flex; align-items: center; gap: 8px;
  padding: 7px 11px 3px;
  /* ⚠️ 서랍끼리 붙어 있으면 앞 서랍의 마지막 줄과 다음 서랍의 첫 줄이 한
        덩어리로 읽힙니다. 갑각류의 '🪲 등각류' 바로 밑에 곤충의 '🪲 사슴벌레'
        가 오면 벌레 셋이 줄지어 선 것처럼 보였어요. 서랍 사이에 선을 긋습니다. */
  margin-top: 6px; border-top: 1px solid var(--line);
}
/* 첫 서랍 위에는 선을 긋지 않습니다 — 바로 위가 '동물 고르기' 머리글이에요 */
.an-sep + .an-ghead { margin-top: 0; border-top: 0; }
/* 📂 갈래 여는 단추 — 머리글이 아니라 누르는 줄입니다.
   ⚠️ 「전체」 링크와 **따로** 둡니다. 하나로 묶으면 갈래를 펴려고
      눌렀을 뿐인데 화면이 옮겨 가 버려요.
   ⚠️ 손가락이 누를 수 있게 높이를 줍니다 — 예전 머리글은 그냥
      글자라 막 눌러도 되는 높이가 아니었습니다. */
.an-ghead .an-gtog {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 5px;
  border: 0; background: none; cursor: pointer;
  padding: 4px 4px 4px 0; margin: 0; font-family: inherit;
  text-align: left;
}
.an-ghead .an-gtog:hover .an-gnm { color: var(--text); }
/* ▾ — 펼치면 도립니다. 색만으로 가르지 않아요. */
.an-ghead .an-gcar {
  flex: 0 0 auto; font-size: 0.625rem; color: var(--text-muted);
  transition: transform .12s;
}
.an-ghead .an-gtog[aria-expanded="true"] .an-gcar { transform: rotate(180deg); }
/* 종이 없는 갈래는 못 누릅니다 — 눌러도 빈 칸이 열려요 */
.an-ghead .an-gtog-off { cursor: default; }
.an-ghead .an-gtog-off .an-gcar { display: none; }
.an-ghead .an-gnm {
  flex: 1 1 auto; min-width: 0;
  font-size: 0.6875rem; font-weight: 700; color: var(--text-muted);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
/* '전체' — 갈래 전체 글로 가는 길. 없애면 아직 종을 안 단 글을 찾을
   길이 사라져 "글이 없어졌다" 가 됩니다. */
.an-ghead .an-gall {
  flex: 0 0 auto;
  font-size: 0.6875rem; font-weight: 700; color: var(--text-muted);
  text-decoration: none; padding: 1px 6px; border-radius: 6px;
}
.an-ghead .an-gall:hover { background: var(--chip-bg); color: var(--brand); }
.an-ghead.on .an-gnm, .an-ghead.on .an-gall { color: var(--brand); }

/* 종 줄 — 이제 이게 게시판입니다. 서랍(갈래) 밑에 한 칸 들여 둡니다. */
.an-inline .an-item.an-sp { padding-left: 22px; font-size: 0.84375rem; font-weight: 600; }
.an-inline .an-item.an-sp .an-ico { display: inline-flex; }

/* 🗂 종 일괄 이동 — 게시판 고르개와 '무엇이 들어 있나' 내역 */
.spm-board { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; max-width: 320px; }
.spm-board label { font-size: 0.75rem; color: var(--text-muted); }
.spm-board select { width: 100%; }
/* ⚠️ 숫자 하나만 보고 수백 개를 옮기면 무엇이 움직이는지 모른 채 누릅니다 */
.spm-breakdown {
  list-style: none; margin: 10px 0 0; padding: 8px 10px;
  border: 1px solid var(--line); border-radius: 10px; background: var(--surface-2);
  max-width: 320px;
}
.spm-breakdown li {
  display: flex; justify-content: space-between; gap: 10px;
  padding: 3px 0; font-size: 0.8125rem; color: var(--text-muted);
}
.spm-breakdown li b { color: var(--text); }

/* '갑각류 전체 글 →' — 사진 띠 위에서는 진한 초록이 거의 안 보였습니다.
   ⚠️ 이 길이 안 보이면, 종으로 좁힌 뒤 갈래 전체 글로 돌아갈 방법이
      화면에서 사라집니다. 사진 위에서는 흰 글씨 + 옅은 알약으로 세웁니다. */
.page-hero.has-photo .sp-all-link {
  color: #fff;
  background: rgba(0, 0, 0, .34);
  padding: 3px 10px; border-radius: 999px;
  backdrop-filter: blur(2px);
}
.page-hero.has-photo .sp-all-link:hover { background: rgba(0, 0, 0, .48); text-decoration: none; }

/* =========================================================
   🐚 분류 화면의 종 게시판 줄
   ---------------------------------------------------------
   갈래(갑각류)는 이제 고를 때 한 번 거치는 **서랍**입니다. 서랍을 열면
   그 안의 칸(소라게·크랩·코코넛 크랩)이 보여야 해요.
   ⚠️ 위 탭(정보글·커뮤니티·이벤트)은 그대로 둡니다 — 그건 '갈래 전체' 로
      가는 길이라, 아직 꼬리표가 없는 글을 찾을 때 필요합니다.
   ========================================================= */
.sp-boards { margin-top: 14px; }
.sp-boards-h {
  font-size: 0.75rem; font-weight: 700; color: var(--text-muted);
  margin-bottom: 8px;
}
.sp-boards-row { display: flex; gap: 10px; flex-wrap: wrap; }
.sp-board {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 15px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  text-decoration: none; font-size: 0.875rem; white-space: nowrap;
  transition: border-color .12s ease, background .12s ease, color .12s ease;
}
.sp-board:hover {
  border-color: var(--brand); background: var(--chip-bg); color: var(--brand-strong);
}
.sp-board .sp-board-ico { flex: 0 0 auto; font-size: 1.05rem; line-height: 1; }
.sp-board .sp-board-ico img, .sp-board .sp-board-ico .emo {
  width: 19px; height: 19px; object-fit: contain;
}
@media (max-width: 640px) {
  /* 폰에서는 줄이 넘치기보다 옆으로 굴러가는 편이 낫습니다 */
  .sp-boards-row {
    flex-wrap: nowrap; overflow-x: auto; overscroll-behavior-x: contain;
    padding-bottom: 4px; scrollbar-width: none;
  }
  .sp-boards-row::-webkit-scrollbar { display: none; }
}

/* 종 게시판 줄 앞의 그림 — 소라게(🐚)와 크랩(🦀)을 갈래 아이콘 하나로는
   가릴 수 없었습니다. 게시판이 종 단위가 된 지금은 그림이 먼저 읽혀요. */
.mn-pop-item .mp-ico {
  display: inline-flex; align-items: center; justify-content: center;
  width: 18px; margin-right: 6px; font-size: 0.95rem; line-height: 1;
  vertical-align: -2px;
}
.mn-pop-item .mp-ico img, .mn-pop-item .mp-ico .emo {
  width: 16px; height: 16px; object-fit: contain;
}

/* =========================================================
   🐾 화면 안 동물 스위처가 놓이는 자리들
   ---------------------------------------------------------
   커뮤니티·정보(허브)·업체·일정 — 넷이 같은 스위처(.an-inline)를 씁니다.
   ⚠️ 스위처 자체의 모양은 위쪽 .an-inline 규칙 하나뿐입니다. 여기서는
      '어디에 놓이는가' 만 정합니다.
   ========================================================= */

/* 📅 홈 일정 칸 — 달력 위에 스위처 + 지금 무슨 기준인지 한 줄 */
.mc-animal {
  display: flex; align-items: center; gap: 8px; flex-wrap: wrap;
  margin: 2px 0 8px;
}
.mc-animal .mc-note { font-size: 0.75rem; color: var(--text-muted); }
/* ⚠️ 홈 일정 칸은 좁습니다. 펼친 칸을 왼쪽에 붙여 화면 밖으로 안 나가게. */
.mc-animal .an-inline .an-pop { left: 0; right: auto; }

/* 🤝 업체·📚 허브 — 제목 옆.
   ⚠️ 히어로에 사진이 깔린 화면(분류 사진 띠)에서도 읽혀야 합니다.
      .an-trigger 는 흰 알약이라 사진 위에서도 그대로 보입니다. */
.page-hero .ph-title { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.page-hero .ph-title h1 { margin: 0; }

/* =========================================================
   🐾 종에는 그림을 달지 않습니다
   ---------------------------------------------------------
   한 번 달아 봤는데 맞는 그림이 거의 없었습니다 — 등각류를 🪲(딱정벌레),
   코코넛 크랩을 🥥(코코넛), 지네를 🐛(애벌레) 로 두는 식이었어요.
   그림이 이름과 다른 말을 하면 없는 것보다 나쁩니다.
   아이콘은 **갈래에만** 둡니다(categories.js). 그건 분류를 가리키는
   그림이라 뜻이 어긋나지 않아요.
   ⚠️ 그래서 그림 자리가 빈 채로 남습니다. 빈 자리를 그대로 두면 이름이
      한 칸 밀려 줄이 안 맞아요 — 비어 있으면 자리를 아예 없앱니다.
   ========================================================= */
.an-ico:empty { display: none; }
.mn-pop-item .mp-ico:empty { display: none; }
.sp-board-ico:empty { display: none; }

/* ⚠️ '먼저 내 동물을 골라 두세요' 말풍선 규칙을 지웠습니다.
   머리띠가 기능 전용이 되면서 그 말풍선이 붙을 자리가 없어졌어요 —
   지금 무엇을 보고 있는지는 화면 위쪽 스위처가, 처음 오신 분 안내는
   홈 첫 화면의 동물 선택 띠가 맡습니다. */

/* 사진도 그림도 없는 글 — 빈 상자를 남기지 않습니다.
   ⚠️ 분류 아이콘을 없애면서 '사진 없는 글' 의 대신 그림이 사라졌습니다.
      그대로 두면 새 글 줄마다 빈 초록 상자가, 화제글 대표 자리에는
      16:9 짜리 빈 사각형이 남았어요(실제로 그랬습니다). */
.fresh-big .fb-row.no-thumb { padding-left: 17px; }      /* 제목이 왼쪽에서 시작 */

/* 🖼 화제글 대표 표지 — **틀은 절대 안 바뀝니다. 안에 든 것만 갈립니다.**
   ⚠️ 여기가 버그가 나던 자리입니다. 제목에 얹으면 표지가 그 글로 바뀌는데,
      사진 없는 글에 얹으면 칸이 접혀서(높이 0) 화제글 카드가 줄었다 늘었다
      하고, 아래 일정·소식까지 밀렸습니다.
   ⚠️ 그래서 접는 규칙을 없앴습니다. .hv-cover 의 aspect-ratio(3/2)는
      위쪽에 한 번만 적혀 있고, 어떤 글에 얹어도 그대로입니다.
   ⚠️ 사진이 없을 때는 자리를 지키는 안내를 넣습니다(.hv-none).
      display:none · DOM 제거 · 높이 0 — 어느 것도 쓰지 않습니다. */
.hot-vis .hv-cover:has(.hv-none) {
  background:
    radial-gradient(120% 120% at 50% 30%, var(--surface-2, var(--chip-bg)), var(--chip-bg));
}
.hot-vis .hv-none {
  font-size: 0.8125rem; color: var(--text-muted);
  /* 아래쪽 제목 띠에 가리지 않게 살짝 위로 */
  transform: translateY(-12px);
}

/* =========================================================
   🐾 홈 첫 화면 — 관심 동물 고르기 (#pickZone)
   ---------------------------------------------------------
   처음 오신 분이 홈만 보고도 "여기서는 내 동물을 먼저 고르고, 그 다음
   정보·커뮤니티·업체·일정을 본다" 를 알 수 있어야 합니다. 그래서 첫
   화면의 주인공을 통합검색에서 이 칸으로 옮겼습니다.

   ⚠️ 여덟 갈래를 4×2 격자로 깔면 대시보드처럼 보입니다. 이름 길이에 따라
      칸 폭이 달라지는 **흐름 배치**(flex-wrap)로 둬서 읽는 순서가 생기게
      했어요. 격자로 되돌리기 전에 이 줄을 읽어 주세요.
   ⚠️ 이 칸이 홈 전체를 덮지 않습니다. 아래 새 글·화제글·일정이 그대로
      보여야, 자기 동물을 못 찾은 분도 누리를 계속 볼 이유가 남습니다.
   ========================================================= */
/* ⚠️ 여백을 조여 뒀습니다. 넉넉하게 뒀더니 첫 화면이 565px 이 되어
      새 글·화제글이 화면 밖으로 밀렸어요(시험이 잡았습니다). 홈은 동물
      고르기 화면 하나로 끝나서는 안 됩니다 — 자기 동물을 못 찾은 분도
      아래 글을 보고 누리를 계속 볼 이유가 남아야 해요. */
.pickzone { margin: 0; max-width: none; }

.pz-head { margin-bottom: 4px; }
.pz-q {
  margin: 0; font-family: var(--font);
  font-size: clamp(1.25rem, 2.4vw, 1.625rem); color: var(--brand-strong);
  line-height: 1.3;
}
.pz-sub { margin: 5px 0 0; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.5; }

/* 🚪 '선택하지 않고 전체 누리 보기 →'.
   ⚠️ 눈에 띄되 주인공은 아닙니다. 이 줄이 단추처럼 커지면 "고르지 말고
      넘어가라" 로 읽혀요. 반대로 없애면 이 칸이 관문이 됩니다.
   ⚠️ '전체 누리' 는 정식 모드입니다 — 흐릿하게·경고처럼 꾸미지 마세요. */
.pz-skip-row { margin: 11px 0 0; }
.pz-skip {
  border: 0; background: none; padding: 4px 0; cursor: pointer;
  font-family: inherit; font-size: 0.875rem; font-weight: 600;
  color: var(--text-muted); text-decoration: underline;
  text-underline-offset: 3px;
}
.pz-skip:hover { color: var(--brand); }

/* 🚪 접힌 줄 — 둘러보는 중. 다시 여는 길을 늘 남겨 둡니다. */
.pz-slim { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.pz-slim-say { font-size: 0.9375rem; color: var(--text-muted); }
.pz-slim-go {
  padding: 8px 16px; border: 1.5px solid var(--brand); border-radius: 999px;
  background: var(--surface); cursor: pointer;
  font-family: inherit; font-size: 0.875rem; font-weight: 700; color: var(--brand);
}
.pz-slim-go:hover { background: var(--chip-bg); }

/* ---- 갈래 칸 — **글자만**. 아이콘도 사진도 쓰지 않습니다 ----
   ⚠️⚠️ 그림을 다시 넣기 전에 읽어 주세요.
      예전에는 갈래마다 사진(hero.photos)이나 선 아이콘을 얹었습니다.
      그런데 '갑각류' 칸에 소라게 사진이 걸리면 읽는 사람에게 그 칸은
      **소라게 칸**으로 보입니다 — 갈래는 그 안 전체를 뜻하는 서랍인데요.
      🦀 갑각류 처럼 이모지를 붙이는 것도 같은 문제입니다. 어떤 그림을
      골라도 안의 한 종을 대표하게 되고, 나머지는 '여기 없는 것' 처럼
      읽혀요. 그래서 **글자 · 여백 · 크기 · 얹음** 으로만 구분합니다.
   ⚠️ 칸마다 테두리를 주지 않습니다. 상자가 여덟 개 늘어선 것처럼 보이면
      대시보드가 돼요. 얹으면 그때 옅은 바탕과 밑줄이 생겨 "누를 수 있다"
      를 말합니다.
   ⚠️ 격자(grid)가 아니라 **흐름 배치**입니다. 이름 길이가 제각각이라
      ('어류' 와 '설치류·소형 포유류') 격자에 넣으면 짧은 이름 주위에
      빈 자리가 크게 남아 칸이 아니라 표처럼 보입니다. */
.pz-groups {
  display: flex; flex-wrap: wrap; gap: 4px 2px;
  margin: 0 -14px;                          /* 첫 글자가 왼쪽 줄에 맞게 */
}
.pz-g {
  padding: 9px 14px;
  border: 0; border-radius: 10px;
  background: none; cursor: pointer;
  font-family: inherit; font-size: 1.0625rem; font-weight: 700;
  color: var(--brand-strong); white-space: nowrap;
  border-bottom: 2px solid transparent;
  transition: background .12s ease, color .12s ease, border-color .12s ease;
}
.pz-g:hover {
  background: rgba(255, 255, 255, .8);
  color: var(--brand); border-bottom-color: var(--brand);
}
.pz-g:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ---- 종 칸 (2단) ---- */
.pz-species { display: flex; flex-wrap: wrap; gap: 9px; }
.pz-s {
  padding: 11px 20px;
  border: 1.5px solid var(--line); border-radius: 999px;
  background: var(--surface); cursor: pointer;
  font-family: inherit; font-size: 0.9375rem; color: var(--text);
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.pz-s:hover { border-color: var(--brand); background: var(--chip-bg); transform: translateY(-1px); }
.pz-s:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* ← 돌아가는 길 — 늘 있어야 합니다 */
.pz-back, .pz-whole {
  border: 0; background: none; cursor: pointer; padding: 0;
  font-family: inherit; font-size: 0.8125rem; color: var(--brand);
  text-decoration: none;
}
.pz-back { display: inline-block; margin-bottom: 7px; }
.pz-back:hover, .pz-whole:hover { text-decoration: underline; }

/* ---- 고른 뒤 ---- */
.pz-head-on { margin-bottom: 13px; }
.pz-now-lbl { margin: 0; font-size: 0.75rem; font-weight: 700; color: var(--text-muted); }
.pz-now {
  margin: 2px 0 0; font-family: var(--font);
  font-size: clamp(1.5rem, 3.2vw, 2rem); color: var(--brand-strong); line-height: 1.2;
}
.pz-go { display: flex; flex-wrap: wrap; gap: 9px; }
.pz-go-a {
  padding: 11px 19px;
  border: 1.5px solid color-mix(in srgb, var(--brand) 34%, transparent);
  border-radius: 999px; background: var(--chip-bg);
  text-decoration: none; font-size: 0.9375rem; color: var(--brand-strong);
  transition: background .12s ease, transform .12s ease;
}
.pz-go-a:hover {
  background: color-mix(in srgb, var(--brand) 16%, var(--chip-bg)); transform: translateY(-1px);
}

/* ---- 이름으로 바로 찾기 (보조) ----
   ⚠️ 아래 통합검색과 **역할이 다릅니다.** 여기는 '어떤 동물을 볼지 정하기',
      아래는 '누리 안 글 찾기'. 그래서 모양도 일부러 다르게 뒀습니다 —
      작고 테두리만 있는 칸입니다. */
.pz-find { position: relative; flex: 1 1 260px; min-width: 0; max-width: 320px; }
.pz-find-lbl {
  display: block; margin-bottom: 4px;
  font-size: 0.71875rem; font-weight: 700; color: var(--text-muted);
}
.pz-find-box { display: flex; }
.pz-find-box input {
  flex: 1 1 auto; min-width: 0;
  height: 38px; padding: 0 13px;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.875rem; outline: none;
}
.pz-find-box input:focus { border-color: var(--brand); box-shadow: 0 0 0 3px var(--chip-bg); }
.pz-find-out {
  position: absolute; z-index: 40; left: 0; right: 0; top: calc(100% + 4px);
  padding: 6px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); box-shadow: 0 12px 28px rgba(0, 0, 0, .13);
}
.pz-hit {
  display: flex; align-items: baseline; gap: 8px; width: 100%;
  padding: 8px 10px; border: 0; border-radius: 9px;
  background: none; cursor: pointer; text-align: left; font-family: inherit;
}
.pz-hit:hover { background: var(--chip-bg); }
.pz-hit-nm { font-size: 0.875rem; color: var(--text); }
.pz-hit-in { font-size: 0.71875rem; color: var(--text-muted); }
/* '비슷한 이름' 처럼 추측으로 찾은 것은 그렇다고 적어 둡니다 —
   정확히 맞은 것과 섞이면 엉뚱한 것을 자기가 찾던 것으로 오해합니다 */
.pz-hit-why {
  margin-left: auto; font-size: 0.6875rem; color: var(--brand);
  background: var(--chip-bg); padding: 1px 7px; border-radius: 999px;
}
.pz-find-no { margin: 6px 8px; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.5; }

/* ---- 없는 동물 · 문의 ----
   ⚠️ 문의 시스템을 새로 만들지 않습니다. 이미 있는 info.html?topic=contact
      으로 갑니다(홈 맨 아래 '의견 보내기' 와 같은 곳). */
.pz-none { margin: 0; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6; }
.pz-none a { color: var(--brand); text-decoration: none; }
.pz-none a:hover { text-decoration: underline; }
.pz-none-or { margin: 0 6px; opacity: .6; }

/* 자리가 바뀔 때 살짝 — 페이지가 넘어간 게 아니라 이 칸이 바뀌었다는 표시 */
.pz-in { animation: pz-fade .18s ease both; }
@keyframes pz-fade {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
  .pz-in { animation: none; }
  .pz-s:hover, .pz-go-a:hover { transform: none; }
}

/* ---- 통합검색을 한 단계 아래로 ----
   ⚠️ 없애지 않았습니다. 크기와 자리만 낮춰 동물 고르기와 갈라 뒀어요. */
.hero-search-sub { margin-top: 0; max-width: 520px; }
.hero-search-sub .hero-search-label {
  font-size: 0.75rem; color: var(--text-muted); margin-bottom: 4px;
}
/* ⚠️ 크기도 한 단계 낮춥니다. 자리만 아래로 내리고 크기가 같으면 둘 다
      주인공처럼 보여서, 무엇을 먼저 해야 하는지 여전히 안 읽힙니다. */
.hero-search-sub .hero-search-box {
  border-width: 1.5px; padding: 3px 4px 3px 12px;
  box-shadow: 0 2px 10px rgba(0, 0, 0, .05);
}
.hero-search-sub .hero-search-box input { font-size: 0.9375rem; padding: 7px 2px; }
.hero-search-sub .hero-search-ico { font-size: 16px; }
.hero-search-sub .hero-search-ico img, .hero-search-sub .hero-search-ico .emo { width: 16px; height: 16px; }
.hero-search-sub .hero-search-btn { padding: 8px 16px; font-size: 0.875rem; }


@media (max-width: 640px) {
  .pickzone { margin-bottom: 18px; }
  .pz-g { padding: 10px 14px; }
  .pz-s { padding: 10px 16px; font-size: 0.875rem; }
  .pz-go-a { padding: 10px 15px; font-size: 0.875rem; }
  .pz-find { max-width: none; }
}

/* 이름 찾기 + '없나요' 를 한 줄로 — 위아래로 쌓으면 첫 화면이 그만큼 길어져
   새 글·화제글이 밀립니다. 좁으면 자연스럽게 두 줄이 됩니다. */
/* ⚠️ 아래 .pz-foot / .pz-find* 는 **지금 홈에서 안 씁니다.**
      홈의 '동물 이름으로 바로 찾기' 칸을 뺐어요 — 바로 위에 통합검색이
      있어서 검색칸이 연달아 둘이면 역할이 헷갈렸습니다.
   ⚠️ 규칙은 지우지 않고 남겨 둡니다. 따로 '동물 찾기' 화면을 만들 때
      nuriAnimal.찾기() 와 함께 그대로 쓸 수 있어요. */
.pz-foot {
  display: flex; align-items: flex-end; gap: 20px; flex-wrap: wrap;
  margin-top: 10px;
}
.pz-foot .pz-none { flex: 0 1 auto; padding-bottom: 8px; }
/* 종 고르기·고른 뒤 모습에서는 아래 한 줄만 있어서 위 여백이 필요합니다 */
.pz-species ~ .pz-none, .pz-go ~ .pz-none { margin-top: 12px; }

/* =========================================================
   🐾 관심 동물 선택 띠 (#pickBand) — 홈의 주인공
   ---------------------------------------------------------
   참고 화면(공공데이터포털)의 '분야 선택 띠' 자리를, 누리에서는 관심 동물
   선택이 맡습니다. 가로 전체를 쓰는 한 덩어리라 "여기가 핵심 기능" 이라는
   것이 한눈에 읽혀요.
   ⚠️ 가져온 것은 **정보 구조**뿐입니다 — 강한 가로형 띠, 아이콘 + 짧은
      이름, 위에서 아래로 흐르는 위계.
   ⚠️ 가져오지 않은 것: 관공서 파란색, 딱딱함, 촘촘한 박스. 누리 색
      (초록·크림)으로, 모서리는 둥글게, 글씨는 넉넉하게 뒀습니다.
   ⚠️ 화면 전체를 덮지 않습니다. 아래 새 글·화제글이 첫 화면에 함께
      보여야 해요 — 자기 동물을 못 찾은 분도 누리를 계속 볼 이유가
      남아야 하니까요(시험이 이걸 잽니다).
   ========================================================= */
/* ⚠️ 아래 .pickband(홈의 초록 선택 띠)는 **이제 안 씁니다.** 고르는 칸을
      Hero 안으로 합쳤어요 — 첫 화면에 주인공이 둘로 보였기 때문입니다.
      되살리지 마세요. 규칙만 남겨 둡니다(다른 .pz-* 규칙과 함께 읽히게). */
.pickband {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 6%, var(--surface)) 0%,
      color-mix(in srgb, var(--brand) 13%, var(--surface)) 100%);
  border-top: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  border-bottom: 1px solid color-mix(in srgb, var(--brand) 18%, transparent);
  /* ⚠️ 사진이 들어가 칸이 커졌습니다. 여백을 조여 첫인상 영역이 새 글·
        화제글을 화면 밖으로 밀어내지 않게 했어요(시험이 이걸 잽니다). */
  padding: 11px 0 10px;
  margin-bottom: 4px;
}
/* 고른 뒤에는 '지금 이 동물을 보고 있다' 는 상태라 조금 더 진하게 */
.pickband.on {
  background:
    linear-gradient(180deg,
      color-mix(in srgb, var(--brand) 10%, var(--surface)) 0%,
      color-mix(in srgb, var(--brand) 18%, var(--surface)) 100%);
}

/* ---- 고른 뒤 — 큰 카드 넷이 아니라 정돈된 한 줄 ---- */
.pz-on {
  display: flex; align-items: center; gap: 22px; flex-wrap: wrap;
}
.pz-on-who { flex: 0 0 auto; }
.pz-go { display: flex; flex-wrap: wrap; gap: 8px; }
.pz-go-a {
  padding: 10px 22px;
  border: 1.5px solid color-mix(in srgb, var(--brand) 32%, transparent);
  border-radius: 999px; background: var(--surface);
  text-decoration: none; font-size: 0.9375rem; color: var(--brand-strong);
  transition: background .12s ease, transform .12s ease, border-color .12s ease;
}
.pz-go-a:hover {
  background: var(--chip-bg); border-color: var(--brand); transform: translateY(-1px);
}

/* 좁아지면 여덟 칸이 접힙니다 — 가로 스크롤로 숨기지 않습니다 */
@media (max-width: 1100px) { .pz-groups { grid-template-columns: repeat(4, minmax(0, 1fr)); } }
/* ⚠️ 폰에서는 **세 칸**입니다. 두 칸으로 두면 여덟 개가 네 줄이 되어 띠가
      735px 이 됐어요 — 첫 화면이 통째로 고르는 화면이 되고 새 글이 960px
      아래로 밀립니다(실제로 재 봤습니다). 사진도 함께 줄입니다.
   ⚠️ 가로 스크롤로 숨기지 않습니다. 접혀서 다 보이는 편이 낫습니다. */
@media (max-width: 700px) {
  /* 폰 — 글자 메뉴라 줄바꿈만 하면 됩니다. 칸 수를 세지 않아요.
     ⚠️ 손가락으로 누르는 자리라 세로 여백을 줄이지 않습니다(44px 확보). */
  .pickband { padding: 16px 0 14px; }
  .pz-groups { margin: 0 -10px; gap: 2px 0; }
  .pz-g { padding: 12px 10px; font-size: 0.9375rem; }
}

/* =========================================================
   🏷 어느 동물 글인가 — 글자 딱지 (새 글 · 화제글)
   ---------------------------------------------------------
   ⚠️ 새 글·화제글은 관심 동물과 상관없이 **늘 누리 전체**입니다. 그래서
      줄마다 '무슨 동물 글인지' 를 작게 답니다. 이게 없으면 섞인 목록이
      그냥 뒤죽박죽으로 읽혀요.
   ⚠️ 이모지를 쓰지 않습니다 — 맞는 그림이 없는 동물이 훨씬 많아요.
   ⚠️ 제목보다 작고 옅게. 딱지가 눈에 먼저 들어오면 목록이 아니라
      분류표처럼 보입니다.
   ========================================================= */
.fresh-big .fb-an,
.hot-vis .hv-an {
  flex: 0 0 auto;
  font-size: 0.6875rem; font-weight: 700; line-height: 1.6;
  color: var(--brand-strong);
  background: var(--chip-bg);
  border-radius: 999px; padding: 1px 8px;
  white-space: nowrap;
}

/* ---- 🔥 화제글 줄 — 썸네일 + 제목 + 딱지 ----
   ⚠️ 썸네일 틀은 **사진이 있든 없든 같은 크기**입니다. 없다고 틀을 지우면
      줄 높이가 제각각이 되고, 얹을 때마다 목록이 들썩입니다. */
.hot-vis .hv-row { align-items: center; gap: 8px; padding: 6px 8px; }
.hot-vis .hv-th {
  /* ⚠️⚠️ 예전에는 16/9 였습니다 — 폰에서 **44×25px** 이었어요. 세로로 긴
     누리툰을 그 납작한 칸에 맞춰 자르면 남는 게 거의 없어서, 사진이 있는
     글인지조차 안 보였습니다.
     ⚠️ 네모(1/1)로 바꿉니다. 같은 폭이어도 높이가 25 → 44 로 늘어 보이는
        양이 배 가까이 됩니다. 줄 높이는 아이콘·글자가 이미 정하고 있어서
        목록이 들썩이지 않아요(실측: 줄 37px 그대로). */
  flex: 0 0 auto; width: 44px; aspect-ratio: 1 / 1;
  border-radius: 8px; overflow: hidden;
  background: var(--chip-bg);
  display: block;
}
/* ⚠️ 작은 칸이라 여기서는 자릅니다(cover). 통째로 보여 주면 44px 안에서
   너무 작아져 무슨 그림인지 더 안 보여요 — 큰 표지와 규칙이 다른 까닭입니다.
   ⚠️ 자를 때는 위쪽을 남깁니다. 만화·사진 모두 위에 주인공이 옵니다. */
.hot-vis .hv-th img {
  width: 100%; height: 100%; object-fit: cover; object-position: top center; display: block;
}
/* 사진이 없는 글 — 자리를 지키는 옅은 무늬. 지우지 마세요. */
.hot-vis .hv-th-no {
  display: block; width: 100%; height: 100%;
  background:
    radial-gradient(120% 120% at 50% 30%, var(--surface-2, var(--chip-bg)), var(--chip-bg));
}
.hot-vis .hv-b {
  flex: 1 1 auto; min-width: 0;
  display: flex; align-items: center; gap: 7px;
}
.hot-vis .hv-t { flex: 0 1 auto; }

@media (max-width: 760px) {
  .hot-vis .hv-th { width: 44px; }
  .hot-vis .hv-an { display: none; }   /* 좁은 화면에서는 제목이 먼저입니다 */
}

/* 🐾 허브 안내 줄의 '…만 보기 →' / '관심 동물 선택하기 →'
   ⚠️ 안내문 안의 링크입니다. 단추처럼 키우지 않습니다 — 허브는 '누리
      전체' 를 보는 화면이고, 좁혀 보기는 권하는 것일 뿐 막는 게 아니에요. */
.hub-lead-go {
  color: var(--brand); font-weight: 700; text-decoration: none;
  white-space: nowrap;
}
.hub-lead-go:hover { text-decoration: underline; }

/* =========================================================
   🐾 Hero — "누리를 어떤 동물 기준으로 쓸지 고르는 자리"
   ---------------------------------------------------------
   ⚠️ 사이트 소개 Hero 가 아닙니다. 예전에는 '작은 생명들의 큰 세상 + 큰
      검색' 이 Hero 였고, 동물 고르기가 그 아래 초록 띠로 따로 있었어요.
      첫 화면에 주인공이 둘로 보였습니다 — 그래서 하나로 합쳤습니다.
   ⚠️ 슬로건(.hero-brand)은 **작은 한 줄**입니다. 다시 키우지 마세요.
      키우는 순간 '소개 Hero' 로 돌아가고 고르는 칸이 곁들이가 됩니다.
   ⚠️ 배경 그림은 .hero 가 깔아 줍니다(04-components.css). 여기서는 글자와
      선택 칸이 묻히지 않게 그림을 조금 더 눌러 줍니다 — 선택 칸이 배경에
      묻히면 "누를 수 있는 것" 으로 안 읽혀요.
   ========================================================= */
.hero-pick { isolation: isolate; }
.hero-pick::before { opacity: .4; }          /* 배경 그림을 조금 더 눌러 줍니다 */
/* 🐾 동물을 고른 뒤에는 배경을 조금 더 눌러 이름이 또렷하게.
   ⚠️ .on 은 pages/home-pick.js 가 #pickBand 에 붙입니다. 예전에는 그
      id 가 초록 띠(.pickband)였고 지금은 Hero 예요 — 그래서 규칙을
      여기로 옮겼습니다. 안 옮기면 .on 이 아무 데도 안 걸립니다. */
.hero-pick.on::before { opacity: .3; }
.hero-pick .hero-inner {
  position: relative; z-index: 1;
  display: block;                            /* 옛 hero-inner 는 flex 였습니다 */
  /* ⚠️ 여백을 넉넉히 둡니다 — 이 칸이 화면의 중심이에요.
     ⚠️⚠️ **!important 가 필요합니다.** 마음대로 붙인 게 아니에요 —
        위쪽(이 파일 2314줄 근처)에 옛 히어로용 규칙이 있습니다:
          @media (min-width: 900px) { .hero-inner {
            padding-top: clamp(10px, 1.6vh, 22px) !important; ... } }
        그건 '브랜드+검색' 히어로를 납작하게 눌러 아래 화제글이 첫 화면에
        걸치게 하려고 넣은 것입니다. 지금 Hero 는 **주인공**이라 반대예요.
        !important 없이는 저 규칙이 이겨서 14px 로 눌립니다(실제로 그랬고,
        높이가 244px 이 되어 "첫인상이 안 난다" 로 걸렸습니다).
     ⚠️ .hero-pick 에만 겁니다. 다른 화면 히어로는 옛 규칙 그대로예요.
     ⚠️ 더 키우지는 마세요. 반대쪽 못도 있습니다 — 이 칸이 커지면 새 글이
        첫 화면 밖으로 밀립니다(features.spec 이 양쪽을 다 잽니다). */
  /* ⚠️ 패널(.pickzone)이 제 여백을 갖고 있으니 Hero 여백은 얇게 둡니다.
        둘 다 넉넉히 주면 여백이 두 겹이 되고, 첫 화면이 그만큼 길어져
        새 글이 화면 밖으로 밀립니다(800px 높이에서 590 > 576 으로 실제로
        걸렸습니다). 지금 글이 556 근처예요. */
  /* ⚠️ 컨텍스트 바가 커진 만큼 여기서 되돌립니다. 패널(.pickzone)이 제
        여백(18px)을 갖고 있어서, 이 값이 얇아도 숨은 충분합니다.
        재지 않고 늘리면 새 글이 첫 화면 밖으로 밀립니다. */
  padding-top: 12px !important; padding-bottom: 12px !important;
  text-align: center;
}

/* 🌱 브랜드 한 줄 — 작게. 주인공이 아닙니다. */
.hero-brand {
  margin: 0 0 12px;
  font-family: var(--font-cute); font-weight: 400;
  font-size: 1.0625rem; letter-spacing: .03em;
  color: var(--text-muted);
}
.hero-brand .accent { color: var(--brand); }

/* ---- 고르는 칸 — Hero 안, **하나의 패널** ----
   ⚠️⚠️ 여기가 안 보이던 자리입니다. 배경 사진 위에 글자와 알약만 얹어
      뒀더니, 알약이 흰색 60% 투명 + 테두리 없음이라 사진 무늬에 묻혀
      **누를 수 있는 것으로 안 읽혔습니다.** 사진이 문제가 아니라 선택 칸에
      바탕이 없던 게 문제였어요.
   ⚠️ 그래서 선택 영역 전체를 **한 장의 패널**로 앉힙니다. 이렇게 하면
      두 가지가 한꺼번에 해결됩니다 —
        · 사진과 분리되어 "여기가 고르는 자리" 로 또렷해집니다
        · 칸 여덟 개가 각각 카드가 되지 않습니다(패널이 하나니까요).
      '카드 여덟 개처럼 박스박스하게 만들지 말라' 는 규칙을 지키면서
      보이게 하는 방법이 이것입니다.
   ⚠️ 패널이 생겼으니 Hero 자체 위아래 여백은 줄였습니다(40 → 26).
      안 줄이면 첫 화면이 그만큼 길어져 새 글이 화면 밖으로 밀립니다
      (features.spec 이 '글' 자리를 못 박고 있어요 — 여유가 10px 뿐이었습니다).
   ⚠️ 글자에 걸어 둔 그림자(text-shadow)를 뺐습니다. 패널이 이미 대비를
      만들어 줘서, 그림자까지 있으면 글자가 뭉개져 보입니다. */
.hero-pick .pickzone {
  max-width: 880px; margin: 0 auto;
  padding: 18px 28px 16px;
  border-radius: 24px;
  background: color-mix(in srgb, var(--surface) 93%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 20%, transparent);
  box-shadow:
    0 12px 36px rgba(0, 0, 0, .11),
    0 2px 6px rgba(0, 0, 0, .05);
  backdrop-filter: blur(4px);
}
.hero-pick .pz-head { margin-bottom: 12px; }
/* ⚠️ 이게 화면에서 **가장 큰 메시지**입니다. 아래 통합검색 글자를 이보다
      크게 만들면 위계가 뒤집힙니다. */
.hero-pick .pz-q {
  font-size: clamp(1.5rem, 3.3vw, 2.25rem);
  color: var(--brand-strong); line-height: 1.28;
}
.hero-pick .pz-sub { font-size: 1rem; color: var(--text); }

/* 여덟 갈래 — '메뉴판 한 줄'. 카드 여덟 개가 아닙니다.
   ⚠️ 칸마다 테두리를 주지 마세요 — 상자가 여덟 개 늘어선 것처럼 보입니다.
      옅은 바탕(알약)까지만 줍니다. 배경 그림 위라서 그 정도는 있어야
      글자가 묻히지 않아요. */
.hero-pick .pz-groups { justify-content: center; margin: 0; gap: 8px; }
/* ⚠️ **투명하게 두지 마세요.** 예전에는 surface 60% 투명이었고, 그래서
      사진 무늬가 그대로 비쳐 글자가 떠 있는 것처럼 보였습니다.
   ⚠️ 테두리는 아주 옅게만 줍니다. 진하게 주면 알약 여덟 개가 각각
      '상자' 로 보여요 — 보이게 하려고 상자를 만들면 안 됩니다.
      또렷함은 **불투명한 바탕 + 얕은 그림자**가 만듭니다. */
.hero-pick .pz-g {
  font-size: 1.0625rem; font-weight: 700; padding: 12px 18px;
  background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--brand) 16%, transparent);
  border-radius: 999px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, .06);
  transition: background .12s ease, color .12s ease,
              border-color .12s ease, box-shadow .12s ease, transform .12s ease;
}
.hero-pick .pz-g:hover {
  background: var(--chip-bg); color: var(--brand);
  border-color: var(--brand);
  transform: translateY(-2px);
  box-shadow: 0 6px 16px color-mix(in srgb, var(--brand) 28%, transparent);
}
.hero-pick .pz-g:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }

/* 종 칸 · 빠른 진입 · 접힌 줄 — 가운데로.
   ⚠️ 종 알약도 갈래와 같은 규칙입니다(불투명 바탕). 패널 위라서 이미
      또렷하지만, 나중에 패널을 없애도 묻히지 않게 함께 적어 둡니다. */
.hero-pick .pz-species, .hero-pick .pz-go { justify-content: center; }
.hero-pick .pz-s { background: var(--surface); font-weight: 700; }
/* 고른 뒤 — **세로로 쌓아** 가운데. 이름이 가장 큽니다.
   ⚠️ .pz-on 은 원래 가로 한 줄(이름 왼쪽 · 빠른 진입 오른쪽)이었습니다.
      아래 초록 띠에 있을 때는 그게 맞았어요(폭이 남아서). Hero 가운데
      정렬에서 그대로 두면 이름과 단추가 좌우로 갈라져, 무엇이 주인공인지
      안 보입니다. */
.hero-pick .pz-on {
  flex-direction: column; align-items: center; gap: 14px;
  justify-content: center; text-align: center;
}
.hero-pick .pz-on-who { display: block; }
.hero-pick .pz-slim { justify-content: center; }
.hero-pick .pz-back { display: inline-block; }
.hero-pick .pz-skip-row { margin-top: 14px; }
.hero-pick .pz-none { margin-top: 10px; }

/* 고른 뒤 — 동물 이름이 주인공 */
.hero-pick .pz-now-lbl { font-size: 0.8125rem; }
.hero-pick .pz-now {
  font-size: clamp(1.75rem, 3.6vw, 2.5rem);
  text-shadow: 0 2px 14px color-mix(in srgb, var(--bg) 80%, transparent);
}

@media (max-width: 700px) {
  .hero-pick .hero-inner { padding-top: 14px !important; padding-bottom: 16px !important; }
  /* 폰 — 패널 여백을 줄이고 화면 폭을 꽉 씁니다 */
  .hero-pick .pickzone { padding: 16px 14px 14px; border-radius: 18px; }
  .hero-brand { font-size: 0.9375rem; margin-bottom: 11px; }
  .hero-pick .pz-q { font-size: 1.375rem; }
  .hero-pick .pz-sub { font-size: 0.9375rem; }
  .hero-pick .pz-g { font-size: 0.9375rem; padding: 11px 14px; }
  .hero-pick .pickzone { max-width: none; }
}

/* =========================================================
   🔍 통합검색 — Hero 아래 별도 영역
   ---------------------------------------------------------
   ⚠️ 크게 두지만 Hero 보다 **한 단계 아래**로 보여야 합니다. 홈에서 먼저
      정하는 것은 '무엇을 기준으로 볼지' 이고, 검색은 그 다음이에요.
   ⚠️ class 이름(hero-search*)은 그대로 둡니다 — 자동완성(suggest.js)의
      CSS 가 그 이름을 보고 있습니다. 자리만 옮긴 것이지 새로 만든 게
      아니에요(id 도 heroSearchForm · heroSearchInput 그대로).
   ========================================================= */
.home-search { padding-top: 26px; padding-bottom: 6px; }
.home-search .hero-search { margin: 0 auto; max-width: 680px; }
.home-search .hero-search-label {
  display: block; text-align: center;
  margin-bottom: 9px; font-size: 1rem; font-weight: 700; color: var(--text);
}
.home-search .hero-search-box { border-radius: 999px; }
.home-search .hero-search-box input {
  font-size: 1.0625rem; padding-top: 16px; padding-bottom: 16px;
}
.home-search .hero-search-ico { font-size: 1.3rem; }
.home-search .hero-search-btn {
  font-size: 1.0625rem; font-weight: 700;
  padding-left: 32px; padding-right: 32px;
}
@media (max-width: 700px) {
  .home-search { padding-top: 18px; }
  .home-search .hero-search-label { font-size: 0.9375rem; margin-bottom: 6px; }
  .home-search .hero-search-box input { font-size: 1rem; padding-top: 13px; padding-bottom: 13px; }
  .home-search .hero-search-btn { font-size: 0.9375rem; padding-left: 18px; padding-right: 18px; }
}

/* =========================================================
   🧭 전역 컨텍스트 바 — 지금 어떤 모드로 보고 있나
   ---------------------------------------------------------
   누리를 쓰는 방식이 둘입니다.
     · 전체 누리 모드      — 모든 동물을 함께 봅니다
     · 특정 동물 중심 모드 — 정보·커뮤니티·업체·일정이 그 동물 기준
   ⚠️ 둘 다 **정식 모드**입니다. 전체 모드를 흐릿하게·경고처럼 꾸미지
      마세요 — 그러면 전체로 보는 분이 늘 미완성 화면을 보는 기분이 됩니다.
   ⚠️ **상태 표시 역할만** 합니다. 존재감을 크게 만들지 마세요. 머리띠 바로
      아래라 조금만 두꺼워도 첫 화면을 그만큼 밀어냅니다.
   ⚠️ 머리띠 안에 있어서 함께 붙어 다닙니다(sticky) — 어느 화면에서든
      "지금 소라게 기준" 을 늘 볼 수 있어야 하니까요.
   ========================================================= */
.ctx-bar {
  border-top: 1px solid color-mix(in srgb, var(--brand) 12%, transparent);
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
/* 동물 중심 모드일 때만 조금 진하게 — 상태가 바뀐 것을 눈으로 알게 */
.ctx-bar.on {
  background: color-mix(in srgb, var(--brand) 11%, var(--surface));
  border-top-color: color-mix(in srgb, var(--brand) 26%, transparent);
}
.ctx-inner {
  display: flex; align-items: center; gap: 10px;
  /* ⚠️ 지금 동물 알약(50px)이 들어갈 만큼만입니다. 넉넉히 두면 상태 줄이
        아니라 배너가 되고, 머리띠에 붙어 다니는 자리라 그만큼 화면을
        내내 먹습니다. 그리고 그 아래 새 글이 첫 화면 밖으로 밀립니다
        (800px 높이에서 여유가 8px 뿐이었어요). */
  min-height: 52px;
  padding: 2px 0;
}
.ctx-lbl {
  flex: 0 0 auto;
  font-size: 0.8125rem; font-weight: 700; color: var(--text-muted);
  letter-spacing: .02em;
}
.ctx-now {
  flex: 0 0 auto;
  font-size: 1.0625rem; font-weight: 700; color: var(--text);
  white-space: nowrap;
}

/* =========================================================
   🌿 지금 보고 있는 동물 — 황금빛 ㄱ자 모서리
   ---------------------------------------------------------
   ⚠️⚠️ 여기에 **흐르는 빛을 넣지 마세요.**
      한 번 '누리의 전설' 칭호 효과를 초록으로 바꿔 넣어 봤습니다
      (legend-flow + twinkle + sheen). 잘 보이기는 했지만 **너무 튀어서**
      되돌렸어요 — 이 줄은 머리띠에 붙어 다니며 **늘 화면에 있는
      상태 표시**입니다. 칭호는 잠깐 눈에 담는 자랑거리라 반짝여도
      되지만, 늘 있는 것이 반짝이면 글을 읽는 동안 계속 시선을 끌어요.
      ㄱ자 모서리는 **움직이지 않는** 황금 선입니다 — 그래서 괜찮아요.
   ⚠️ 예전에는 둥근 알약(border-radius: 999px + 바탕색)이었고, 이 주석에
      "알약 모양과 크기는 그대로 둡니다" 라고 적혀 있었습니다.
      센세가 그 모양을 무르고 모서리 표시로 바꿔 달라고 하셨어요.
      모양은 바뀜지만 **크기와 자리는 그대로**입니다(19px · 높이 50px).
   ⚠️ 모서리는 왼쪽 위 · 오른쪽 아래 **둘뿐**입니다. 넷을 다 그리면
      그냥 네모난 테두리가 돼서 감싸는 느낌이 사라집니다.
   ⚠️ 동물을 골랐을 때(.on)만 글자가 초록이고 모서리가 진한 황금입니다.
      '전체 누리' 도 정식 모드라 모서리를 없애지 않고 조용한 황금
      (--gold-dim)으로만 둡니다 — 흐릿하게·경고처럼 꾸미지 않습니다.
   ========================================================= */
.ctx-now {
  position: relative;
  padding: 8px 18px;
  border: 0; border-radius: 0; background: none;
}
/* ㄱ · ┘ — 왼쪽 위와 오른쪽 아래.
   ⚠️ 글자가 아니라 **테두리 두 변**입니다. ㄱ 같은 글자를 넣으면
      글꼴마다 모양과 두께가 달라지고, 화면을 읽어 주는 기계가 그걸
      동물 이름과 함께 읽어 버립니다.
   ⚠️ pointer-events 를 끕니다 — 이 줄 오른쪽 끝의 '다른 동물 보기' 를
      모서리가 가로채면 눌려도 안 눈려요. */
.ctx-now::before,
.ctx-now::after {
  content: ""; position: absolute;
  width: 13px; height: 13px;
  /* ⚠️ 단색이 먼저 — border-image 를 못 받는 브라우저도
        모서리를 보게 됩니다(광택만 없어요). 순서를 바꾸지 마세요. */
  border: 2px solid var(--gold);
  /* ✨ 광택 — 한 면 안에서 밝은 데와 짙은 데가 갈려야 금입니다.
     ⚠️ 끝의 `1` 은 border-image-slice 입니다. 빼면 아무것도 안 그려져요. */
  border-image: var(--gold-sheen) 1;
  pointer-events: none;
}
.ctx-now::before { top: 0;    left: 0;  border-right: 0; border-bottom: 0; }
.ctx-now::after  { bottom: 0; right: 0; border-left: 0;  border-top: 0;    }
/* 전체 누리 — **같은 금을 조용히.**
   ⚠️ 예전에는 여기에 --gold-dim 이라는 따로 고른 색을 썼습니다.
      그러면 모드를 옮길 때마다 금빛 자체가 바뀜어 둘이 다른 장식처럼
      보였어요. 금은 하나고, 조용한 것과 또렛한 것의 차이일 뿐입니다. */
.ctx-now::before,
.ctx-now::after { opacity: .5; }
.ctx-now.on {
  font-size: 1.1875rem;
  color: var(--brand-strong);
}
.ctx-now.on::before,
.ctx-now.on::after { opacity: 1; }
/* '동물 중심으로 보기 →' / '다른 동물 보기 →' — 고르는 칸의 단추입니다.
   ⚠️ 모양만 링크처럼 두고, 안에 든 고르는 칸은 animal-switch.js 것을
      그대로 씁니다. 고르는 화면을 새로 만들지 않았어요. */
/* 끝의 두 길 — 「다른 동물 보기」 와 「전체 누리 보기」.
   ⚠️ 둘을 한 묶음으로 둡니다. 따로 두면 좁은 화면에서 하나만
      아래로 떨어져 줄이 두 줄이 됩니다. */
.ctx-acts { margin-left: auto; display: inline-flex; align-items: center; gap: 10px; flex: 0 0 auto; }
.ctx-pick { margin-left: 0; }
/* 🌏 전체 누리로 나가는 길.
   ⚠️ 「해제」·「되돌리기」 처럼 꾸미지 않습니다 — 전체 누리도
      정식 모드예요. 그래서 예상 색이 아니라 조용한 글자입니다.
   ⚠️ 눈에 띄게 만들지 마세요. 늘 화면에 있는 줄이라 밝으면
      글을 읽는 동안 계속 시선을 끌어요. */
.ctx-all {
  flex: 0 0 auto; white-space: nowrap;
  font-size: 0.8125rem; font-weight: 700; color: var(--text-muted);
  text-decoration: none; padding: 5px 9px; border-radius: 999px;
  /* 👆 눌리는 자리를 44px 로 넓힙니다 — **줄 높이는 그대로.**
     ⚠️⚠️ min-height: 40px 로 줄러 봤다가 되돌렸습니다. 그러면 바가
        49 → 55px 로 두께지고, 이 바는 머리띠에 붙어 다니기 때문에
        그 6px 가 내내 화면을 먹습니다(첫 콘텐스가 그만큼 밀림).
     → 보이는 알약은 그대로 두고, 눈에 안 보이는 넋이로 눌릴 자리만
        키우는 지금 방식이 맞습니다. 높이에 안 끼어들어요.
     ⚠️ 옆의 「다른 동물 보기」 와 서로 곹치지 않게 아래에서
        gap 을 키우지 않았습니다 — 넋은 알약 폭 안에만 펼칩니다. */
  position: relative;
}
.ctx-all::after {
  content: ""; position: absolute;
  left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
}
.ctx-all:hover { background: var(--surface-2); color: var(--text); }
.ctx-pick .an-trigger {
  border: 0; background: none; padding: 6px 2px;
  font-size: 0.8125rem; font-weight: 700; color: var(--brand);
  box-shadow: none;
}
.ctx-pick .an-trigger:hover { text-decoration: underline; text-underline-offset: 3px; }
.ctx-pick .an-trigger .an-ico { display: none; }   /* 아이콘 안 씁니다 */
/* 펼친 칸은 오른쪽 끝에 맞춥니다 — 왼쪽으로 열면 화면 밖으로 나갑니다 */
.ctx-pick .an-pop { left: auto; right: 0; }

@media (max-width: 760px) {
  /* 폰 — **한 줄**로 둡니다.
     ⚠️ 두 줄로 쌓으면 붙어 다니는 머리띠가 세 줄이 되어, 좁은 화면을
        내내 먹습니다. 이름이 길어도(크레스티드 게코) 한 줄이어야 해요.
     ⚠️ 좌우 여백을 여기서 직접 줍니다. 폰에서는 .container 의 padding 이
        0 이라, 안 주면 '현재 보기' 가 화면 왼쪽 끝에 붙고 '다른 동물
        보기 →' 가 오른쪽 끝에 붙습니다(실제로 그랬습니다). */
  /* ⚠️ 폰에서도 알약과 빛은 그대로 둡니다 — 이게 '지금 무엇을 보고
        있나' 를 말하는 자리라, 좁다고 맨 글자로 되돌리면 안 보입니다.
        대신 글자와 여백만 줄여 한 줄을 지킵니다. */
  .ctx-inner {
    min-height: 44px; gap: 7px;
    /* ⚠️⚠️ 22px 입니다. 폰에서 햄버거·검색창 등 다른 모든 줄이 x=22 에서
       시작하는데 여기만 14px 이었어요. 예전에는 알약이라 안쪽 여백이 알약
       자기 것으로 보여 티가 안 났는데, ㄱ자 모서리로 바꾸니 **금색 선만**
       혼자 8px 왼쪽으로 튀어나와 화면 끝에 붙은 것처럼 보였습니다.
       ⚠️ 모서리는 이 줄의 가장 왼쪽 것입니다 — 이 값이 곧 페이지 여백선이에요. */
    padding-left: 22px; padding-right: 22px;
  }
  .ctx-lbl { font-size: 0.6875rem; }
  /* ⚠️ 안쪽 여백을 좁힙니다. 폰은 글자가 작아서(15~16px) 여백을 그대로 두면
     모서리 둘 사이가 멀어져 **감싸는 게 아니라 따로 떠 있는 표시**로 보여요.
     PC 는 글자가 19px 이라 같은 여백이어도 둘이 한 덩어리로 읽힙니다. */
  .ctx-now { font-size: 0.9375rem; padding: 5px 10px; }
  .ctx-now.on { font-size: 1rem; }
  /* ⚠️ 모서리도 같이 줄입니다. 큰 모서리를 그대로 두면 짧은
     이름(새우)에서 위아래 모서리가 거의 맞닿아 네모난이 돼 버려요. */
  .ctx-now::before, .ctx-now::after { width: 10px; height: 10px; }
  .ctx-pick .an-trigger { font-size: 0.75rem; padding: 4px 0; }
  /* ⚠️ 폰에서도 한 줄입니다. 두 길이 다 들어가게 사이를 줄입니다. */
  .ctx-acts { gap: 6px; }
  .ctx-all { font-size: 0.75rem; padding: 4px 7px; }
  /* 아주 좁으면 이름표를 접습니다 — 모드 이름과 바꾸는 길이 먼저입니다 */
  @media (max-width: 400px) { .ctx-lbl { display: none; } }
}


/* =========================================================
   🛡 관리 화면 정리 — 탭 줄 · 운영 바로가기 · 내린 것
   ---------------------------------------------------------
   ⚠️ 관리 탭이 스물넷입니다. 한 줄에 늘어놓으면 찾는 데만 시간이 걸려서
      갈래별로 줄을 나눴어요(콘텐츠 · 동물 · 업체 · 회원 · 운영).
      줄 이름은 admin.js 의 TAB_GROUPS 하나에서만 정합니다.
   ⚠️ 관리 화면을 예쁘게 만드는 것이 목적이 아닙니다. **찾을 수 있게**
      하는 것이 목적이에요 — 색을 늘리기 전에 이 줄을 읽어 주세요.
   ========================================================= */
.adm-tabrow {
  /* ⚠️ **flex: 1 0 100% 가 꼭 필요합니다.** #adminTabs 는 .filterbar 라서
        이미 display:flex 예요 — 그래서 이 줄들이 flex 아이템이 되어
        좌우로 나란히 붙었습니다(실제로 '콘텐츠' 줄과 '동물·도감' 줄이
        한 줄에 놓였어요). 갈래별로 줄을 나누는 것이 목적이니 한 줄을
        통째로 차지해야 합니다. */
  flex: 1 0 100%;
  display: flex; flex-wrap: wrap; align-items: center; gap: 6px;
  padding: 5px 0;
}
.adm-tabrow + .adm-tabrow {
  border-top: 1px dashed color-mix(in srgb, var(--line) 80%, transparent);
}
.adm-tabrow-lbl {
  flex: 0 0 auto; min-width: 92px;
  font-size: 0.6875rem; font-weight: 700; color: var(--text-muted);
  letter-spacing: .02em;
}
/* 🔔 탭에 붙는 숫자 — 눌러야 할 것이 있다는 표시.
   ⚠️ 0 이면 admin.js 가 아예 안 그립니다. '0' 이 붙어 있으면 눌러야 하는
      것처럼 보여서 관리자가 빈 탭을 계속 확인하게 됩니다. */
.tab-badge {
  display: inline-grid; place-items: center;
  min-width: 18px; height: 18px; margin-left: 6px; padding: 0 5px;
  border-radius: 999px; background: var(--danger, #d05a5a); color: #fff;
  font-size: 0.6875rem; font-weight: 700; line-height: 1;
}
.chip.active .tab-badge { background: #fff; color: var(--brand-strong); }

/* ---- 🧭 운영 바로가기 ---- */
.hub-sec { margin-top: 22px; }
.hub-sec > h4 {
  margin: 0 0 9px; font-size: 1rem; color: var(--heading);
  padding-bottom: 6px; border-bottom: 1px solid var(--line);
}
.hub-grid {
  display: grid; gap: 8px;
  grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
}
.hub-card {
  display: flex; flex-direction: column; gap: 3px;
  text-align: left; padding: 11px 13px;
  border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); cursor: pointer;
  font-family: inherit; color: inherit; text-decoration: none;
  transition: border-color .12s ease, background .12s ease, transform .12s ease;
}
.hub-card:hover {
  border-color: var(--brand); background: var(--chip-bg);
  transform: translateY(-1px);
}
.hub-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.hub-t { font-size: 0.9375rem; font-weight: 700; color: var(--heading); }
.hub-ext { font-size: 0.75rem; color: var(--brand); }
.hub-d { font-size: 0.8125rem; color: var(--text-muted); line-height: 1.45; }
.hub-note {
  margin: 9px 0 0; font-size: 0.8125rem; color: var(--text-muted); line-height: 1.6;
}
.hub-todo { margin: 9px 0 0; padding-left: 18px; }
.hub-todo li { font-size: 0.875rem; line-height: 1.7; color: var(--text); }
.hub-todo code {
  font-size: 0.8125rem; padding: 1px 5px; border-radius: 5px;
  background: var(--chip-bg); color: var(--brand-strong);
}

/* ---- 📝 글 관리 찾기 줄 ---- */
.adm-find {
  display: flex; flex-wrap: wrap; gap: 7px; align-items: center;
  margin: 12px 0 4px; padding: 11px 12px;
  border: 1px solid var(--line); border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 4%, var(--surface));
}
.adm-find input[type="search"], .adm-find input[type="text"] {
  flex: 1 1 170px; min-width: 0;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 0.875rem; background: var(--surface); color: var(--text);
}
.adm-find select {
  padding: 8px 9px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 0.875rem; background: var(--surface); color: var(--text);
}
.adm-find-n { font-size: 0.8125rem; color: var(--text-muted); margin-left: auto; }

@media (max-width: 760px) {
  /* ⚠️ 관리 화면은 폰에서 '보고 급한 것만 처리' 하는 자리입니다. 표를
        억지로 접지 않고 가로로 밀어 봅니다(.adm-table-wrap 이 이미
        overflow-x: auto) — 접으면 어느 줄이 어느 글인지 알 수 없어요. */
  .adm-tabrow-lbl { min-width: 0; width: 100%; }
  .hub-grid { grid-template-columns: 1fr; }
  .adm-find { flex-direction: column; align-items: stretch; }
  .adm-find-n { margin-left: 0; }
}

/* ==========================================================
   🌱 입문 여정 (start.html) · 홈 초보 카드 · 도움이 됐어요 · 프로필 장식
   ----------------------------------------------------------
   ⚠️ 새 색·새 모서리를 만들지 않습니다. 쓰던 토큰(--brand, --line,
      --chip-bg, --surface, --text-muted)과 .btn / .chip / .empty-state
      를 그대로 씁니다.
   ⚠️ 카드로 도배하지 않습니다. 여정 단계는 '접히는 줄' 이고, 카드처럼
      떠 있는 것은 진행도·다음 추천·질문 셋뿐이에요.
   ========================================================== */

/* ---- 진행도 ---- */
.jr-wrap { max-width: 780px; }
.jr-prog {
  display: flex; align-items: center; gap: 14px; flex-wrap: wrap;
  padding: 14px 16px; margin-bottom: 14px;
  border: 1px solid var(--line); border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.jr-bar { display: flex; gap: 5px; flex: 1 1 220px; min-width: 160px; }
.jr-cell {
  flex: 1 1 0; height: 11px; border-radius: 4px;
  background: var(--chip-bg); border: 1px solid var(--line);
  transition: background .18s ease;
}
.jr-cell.on { background: var(--brand); border-color: var(--brand); }
.jr-prog-n { font-size: 0.9375rem; color: var(--text-muted); white-space: nowrap; }
.jr-prog-n b { color: var(--brand-strong); font-size: 1.0625rem; }

/* ---- 다음 추천 — "어디부터 누르지" 를 없앱니다 ---- */
.jr-next {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-bottom: 16px; font-size: 0.9375rem;
}
.jr-next-lbl {
  padding: 3px 9px; border-radius: 999px;
  background: var(--chip-bg); color: var(--brand-strong);
  font-size: 0.8125rem;
}
.jr-next-go {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 1rem; color: var(--brand-strong);
  font-weight: 600; text-align: left;
}
.jr-next-go:hover { text-decoration: underline; }

/* ---- 완료 알림 (새로고침해도 남는 조용한 줄) ---- */
.jr-clear {
  display: block; margin-bottom: 16px; padding: 13px 16px;
  border: 1px solid var(--brand-soft, var(--line)); border-radius: 13px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface));
}
.jr-clear b { display: block; color: var(--heading); font-size: 1.0625rem; }
.jr-clear span { display: block; margin-top: 5px; font-size: 0.9375rem; color: var(--text-muted); }

/* ---- 단계 목록 ---- */
.jr-steps { border: 1px solid var(--line); border-radius: 13px; overflow: hidden; background: var(--surface); }
.jr-step + .jr-step { border-top: 1px solid var(--line); }
.jr-step-head {
  display: flex; align-items: center; gap: 12px; width: 100%;
  padding: 14px 16px; border: 0; background: none; cursor: pointer;
  font-family: inherit; text-align: left; color: var(--text);
}
.jr-step-head:hover { background: var(--surface-2); }
.jr-mark {
  flex: 0 0 auto; width: 25px; height: 25px; border-radius: 50%;
  display: grid; place-items: center;
  border: 1px solid var(--line); background: var(--surface-2);
  color: var(--brand-strong); font-size: 0.875rem;
}
.jr-step.done .jr-mark { background: var(--brand); border-color: var(--brand); color: #fff; }
.jr-step-t { flex: 1 1 auto; min-width: 0; }
.jr-step-t b { display: block; font-size: 1.0625rem; color: var(--heading); }
.jr-step-lead { display: block; margin-top: 2px; font-size: 0.875rem; color: var(--text-muted); }
.jr-caret { flex: 0 0 auto; color: var(--text-muted); font-size: 0.8125rem; }
.jr-step.open { background: color-mix(in srgb, var(--brand) 3%, var(--surface)); }

.jr-step-body { padding: 2px 16px 16px 53px; }
.jr-block + .jr-block { margin-top: 12px; }
.jr-block h4 { margin: 0 0 3px; font-size: 0.9375rem; color: var(--brand-strong); }
.jr-block p { margin: 0; font-size: 1rem; line-height: 1.7; color: var(--text); }
.jr-block p b { color: var(--heading); }

.jr-more { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 14px; }
.jr-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 14px; }
.jr-done-say { font-size: 0.9375rem; color: var(--brand-strong); }
.jr-note { font-size: 0.875rem; color: var(--text-muted); }

/* ---- 그래도 모르겠을 때 ---- */
.jr-ask {
  margin-top: 18px; padding: 16px;
  border: 1px dashed var(--line); border-radius: 13px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.jr-ask-say { margin: 0; font-size: 1.0625rem; color: var(--heading); }
.jr-interest {
  margin-top: 14px; padding: 12px 14px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface-2);
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap; font-size: 0.9375rem;
}

/* ---- 완료 축하 (한 번만) ---- */
.jr-cheer {
  position: fixed; inset: 0; z-index: 2400;
  display: grid; place-items: center; padding: 20px;
  background: rgba(0, 0, 0, .42);
  animation: jrFade .18s ease;
}
.jr-cheer-box {
  width: 100%; max-width: 400px; padding: 22px;
  border-radius: 16px; background: var(--surface); border: 1px solid var(--line);
  box-shadow: 0 18px 44px rgba(0, 0, 0, .22); text-align: center;
  animation: jrPop .22s ease;
}
.jr-cheer-box > b { display: block; font-size: 1.1875rem; color: var(--heading); }
.jr-cheer-box > p { margin: 7px 0 0; font-size: 0.9375rem; color: var(--text-muted); }
.jr-gain { list-style: none; margin: 15px 0 0; padding: 0; text-align: left; }
.jr-gain li {
  display: flex; align-items: center; gap: 9px;
  padding: 9px 11px; margin-top: 7px; font-size: 0.9375rem;
  border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
}
.jr-gain-ico { font-size: 1.25rem; }
.jr-gain b { color: var(--brand-strong); }
.jr-cheer-act { display: flex; gap: 8px; justify-content: center; margin-top: 16px; }
@keyframes jrFade { from { opacity: 0 } to { opacity: 1 } }
@keyframes jrPop { from { opacity: 0; transform: translateY(9px) scale(.97) } to { opacity: 1; transform: none } }

/* ⚠️ 움직임을 줄이라고 설정한 분에게는 애니메이션을 끕니다 */
@media (prefers-reduced-motion: reduce) {
  .jr-cheer, .jr-cheer-box { animation: none; }
  .jr-cell { transition: none; }
}

@media (max-width: 760px) {
  /* ⚠️ 진행도가 잘리지 않게 — 폰에서는 막대와 숫자를 위아래로 */
  .jr-prog { flex-direction: column; align-items: stretch; gap: 9px; }
  .jr-bar { flex-basis: auto; min-width: 0; }
  .jr-prog-n { white-space: normal; }
  /* ⚠️ 들여쓰기(53px)를 그대로 두면 폰에서 본문이 반 토막 납니다 */
  .jr-step-body { padding-left: 16px; }
  .jr-more .btn, .jr-ask .btn { flex: 1 1 100%; text-align: center; }
}

/* ---- 🌱 홈 초보 진입 줄 (#homeStart)
   ⚠️ **얇은 줄 하나**입니다. 카드로 키우지 마세요 — Hero 보다 무거워지면
      홈의 순서가 뒤집히고 아래 새 글이 첫 화면에서 밀려납니다.
      높이는 대략 한 줄(48~54px) 안에서 유지합니다. */
#homeStart { margin-top: 14px; }
.hs-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 11px 15px;
  border: 1px solid var(--line); border-radius: 12px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  font-size: 0.9375rem; color: var(--text);
}
.hs-row.hs-done { background: var(--surface-2); }
.hs-t { color: var(--text); }
.hs-t b { color: var(--brand-strong); }
.hs-sub { color: var(--text-muted); font-size: 0.875rem; }
.hs-bar { display: inline-flex; gap: 3px; }
.hs-bar i {
  width: 15px; height: 8px; border-radius: 3px;
  background: var(--chip-bg); border: 1px solid var(--line);
}
.hs-bar i.on { background: var(--brand); border-color: var(--brand); }
.hs-n { font-size: 0.875rem; color: var(--text-muted); }
.hs-go {
  margin-left: auto; white-space: nowrap;
  color: var(--brand-strong); font-weight: 600; text-decoration: none;
}
.hs-go:hover { text-decoration: underline; }

@media (max-width: 760px) {
  /* ⚠️ 단추가 화면 밖으로 나가지 않게 — 좁으면 아래로 내려 줍니다 */
  .hs-go { margin-left: 0; }
  .hs-sub { flex: 1 1 100%; }
}

/* ---- 🙋 초보 질문 도우미 (ask.html)
   ⚠️ 새 폼 부품을 만들지 않았습니다 — .btn / .chip / 기존 input 모양을
      그대로 씁니다.
   ⚠️ 안 채운 칸을 붉게 칠하지 않습니다. 모든 칸이 비워 둘 수 있는 칸이라,
      경고색은 "잘못했습니다" 로 읽힙니다. */
.ak-wrap { max-width: 760px; }
.ak-who { margin: 0 0 16px; font-size: 0.9375rem; color: var(--text-muted); }
.ak-who b { color: var(--brand-strong); }
.ak-step + .ak-step { margin-top: 22px; }
.ak-h { margin: 0 0 10px; font-size: 1.125rem; color: var(--heading); }
.ak-opt { font-size: 0.875rem; color: var(--text-muted); font-family: var(--font-body, inherit); }
.ak-none { margin: 0; padding: 18px 0; font-size: 0.9375rem; color: var(--text-muted); }

.ak-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 9px; }
.ak-kind {
  display: block; text-align: left; cursor: pointer;
  padding: 12px 14px; border: 1px solid var(--line); border-radius: 11px;
  background: var(--surface); font-family: inherit; color: var(--text);
}
.ak-kind:hover { border-color: var(--brand-soft); background: var(--chip-bg); }
.ak-kind b { display: block; font-size: 1rem; color: var(--heading); }
.ak-kind span { display: block; margin-top: 2px; font-size: 0.8125rem; color: var(--text-muted); }
.ak-kind.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }

.ak-nums { display: flex; gap: 14px; flex-wrap: wrap; }
.ak-num { flex: 1 1 230px; min-width: 0; }
.ak-num > label { display: block; margin-bottom: 5px; font-size: 0.9375rem; color: var(--text); }
.ak-num-in { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ak-num-in input[type="text"] {
  width: 84px; padding: 9px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--text);
}
.ak-unit { font-size: 0.9375rem; color: var(--text-muted); }
.ak-dunno {
  display: inline-flex; align-items: center; gap: 5px;
  font-size: 0.875rem; color: var(--text-muted); cursor: pointer;
}
.ak-hint { margin: 9px 0 0; font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

.ak-asks { margin-top: 14px; }
.ak-ask + .ak-ask { margin-top: 12px; }
.ak-ask label { display: block; margin-bottom: 5px; font-size: 0.9375rem; color: var(--text); }
.ak-ask textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  padding: 10px 12px; border: 1px solid var(--line); border-radius: 9px;
  font-family: inherit; font-size: 1rem; line-height: 1.6;
  background: var(--surface); color: var(--text);
}

/* 미리보기 — 무엇이 올라갈지 그 자리에서 보이게 */
.ak-prev {
  padding: 14px 16px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface-2);
}
.ak-prev-t { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.ak-prev-t b { color: var(--heading); font-size: 1.0625rem; }
.ak-prev-b {
  margin: 11px 0 0; padding: 0; background: none; border: 0;
  font-family: inherit; font-size: 0.9375rem; line-height: 1.7; color: var(--text);
  /* ⚠️ 한글 본문에 word-break: break-all 을 쓰지 않습니다 */
  white-space: pre-wrap; overflow-wrap: break-word;
}
.ak-gate {
  margin: 13px 0 0; padding: 11px 14px;
  border: 1px solid var(--line); border-radius: 10px;
  background: color-mix(in srgb, var(--brand) 6%, var(--surface));
  font-size: 0.9375rem; line-height: 1.6;
}
.ak-act { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; margin-top: 15px; }

@media (max-width: 760px) {
  /* ⚠️ 질문 칸이 화면을 넘지 않게 — 한 줄에 하나씩 */
  .ak-kinds { grid-template-columns: 1fr; }
  .ak-nums { flex-direction: column; gap: 12px; }
  .ak-act .btn { flex: 1 1 100%; }
}

/* ---- 🙌 도움이 됐어요 (글 화면의 답변)
   ⚠️ 좋아요와 **모양도** 달라야 합니다. 같은 하트/같은 자리에 두면 두 개가
      같은 것으로 읽혀요 — 좋아요는 글 아래, 이것은 답변 아래입니다. */
.hp-btn {
  display: inline-flex; align-items: center; gap: 5px;
  margin-top: 7px; padding: 5px 11px; cursor: pointer;
  border: 1px solid var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  font-family: inherit; font-size: 0.8125rem;
}
.hp-btn:hover { border-color: var(--brand-soft); background: var(--chip-bg); color: var(--brand-strong); }
.hp-btn.on {
  border-color: var(--brand); background: var(--brand); color: #fff;
}
.hp-btn:disabled { opacity: .55; cursor: default; }
/* 받은 표시 — 모든 분에게 보입니다(나중에 검색해 온 분이 어느 답이
   실제로 도움됐는지 알 수 있게). 단추가 아니라 라벨이에요. */
.hp-tag {
  display: inline-block; margin-top: 7px; padding: 3px 10px;
  border-radius: 999px; background: var(--chip-bg);
  color: var(--brand-strong); font-size: 0.8125rem;
}

/* ==========================================================
   🎀 프로필 장식 · 대표 흔적
   ----------------------------------------------------------
   ⚠️⚠️ **프로필 사진을 대신하지 않습니다.** 사진은 그대로 있고, 장식은
      그 위/뒤의 겹입니다. 장식이 사진을 덮으면 사진을 걸어 둔 분이
      장식을 못 씁니다.
   ⚠️ 지금 그림은 CSS 로 그린 자리표시(placeholder)예요. 나중에 진짜
      그림이 오면 이 규칙의 background 만 바꾸면 됩니다 — 구조를
      다시 만들지 마세요.
   ⚠️ 장식이 없으면 .pf-avatar-orn 이 안 붙어서, 예전과 완전히 같은
      모양으로 그려집니다.
   ========================================================== */
.pf-avatar { position: relative; }
.pf-avatar-ini { width: 100%; height: 100%; display: grid; place-items: center; border-radius: 50%; }
/* 장식이 있을 때만 테두리를 넘어갈 수 있게 풀어 줍니다 */
.pf-avatar-orn { overflow: visible; }
.pf-avatar-orn > img { width: 100%; height: 100%; object-fit: cover; border-radius: 50%; }
.pf-orn { position: absolute; pointer-events: none; }

/* 뒤에 깔리는 것 · 테 · 위에 얹는 것 — 겹치는 순서를 z-index 로 고정 */
.pf-orn-background { inset: -8px; border-radius: 50%; z-index: 0; }
.pf-orn-frame      { inset: -5px; border-radius: 50%; z-index: 2; }
.pf-orn-ornament   { right: -5px; bottom: -3px; width: 26px; height: 26px; z-index: 3; }
/* ⚠️ 사진이 62px 로 줄어드는 좁은 화면에서는 장식도 함께 줄입니다 —
      안 줄이면 장식이 사진의 절반을 덮습니다(.pf-avatar 참고). */
@media (max-width: 760px) {
  .pf-orn-ornament { width: 22px; height: 22px; }
  .pf-orn-background { inset: -6px; }
}
.pf-avatar-orn > img, .pf-avatar-ini { position: relative; z-index: 1; }

/* 🐚 소라게 첫 걸음 — 작은 소라 (자리표시) */
.orn-shell {
  background: radial-gradient(circle at 34% 32%, #ffe9c9 0%, #e8a765 46%, #b6743a 100%);
  border-radius: 58% 42% 50% 50% / 55% 50% 50% 45%;
  box-shadow: 0 1px 4px rgba(0, 0, 0, .22);
}
/* 🐚 개척자 시즌 — 금빛 소라 (자리표시). 2026 시즌에만 나갔습니다 */
.orn-shell-gold {
  background: radial-gradient(circle at 34% 30%, #fff6d8 0%, #f0c65c 44%, #b78a1e 100%);
  border-radius: 58% 42% 50% 50% / 55% 50% 50% 45%;
  box-shadow: 0 1px 5px rgba(183, 138, 30, .5);
}
/* 🌿 초보 길잡이 테 (자리표시) */
.orn-frame-green {
  border: 2px solid var(--brand);
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 26%, transparent);
}

/* ---- 🌿 대표 흔적 — 프로필 상단 한 줄
   ⚠️ 칭호와 다릅니다. 칭호는 살아 있는 개수를 따르고(글을 지우면 잠시
      사라짐), 흔적은 **한 번 남으면 영구**입니다. 그래서 같은 줄에
      섞어 두지 않고 따로 둡니다. */
.pf-traces { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; margin-top: 8px; }
.pf-trace {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 3px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface-2);
  font-size: 0.8125rem; color: var(--text);
}
.pf-trace-ico { font-size: 0.9375rem; }
.pf-trace.season { border-color: #d9b64e; background: color-mix(in srgb, #d9b64e 12%, var(--surface)); }
.pf-trace-more { font-size: 0.8125rem; color: var(--text-muted); }

/* ---- 🎀 프로필 꾸미기 (decorate.html)
   ⚠️ 미리보기는 실제 프로필과 **같은 부품**(.pf-avatar / .pf-orn / .pf-trace)
      을 씁니다 — 미리보기 전용 모양을 따로 만들면 두 모습이 어긋납니다. */
.dc-wrap { max-width: 760px; }
.dc-prev {
  display: flex; align-items: center; gap: 18px; flex-wrap: wrap;
  padding: 18px; margin-bottom: 20px;
  border: 1px solid var(--line); border-radius: 14px;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.dc-prev-n { font-size: 1.25rem; font-weight: 800; color: var(--heading); }
.dc-prev-none { margin-top: 6px; font-size: 0.875rem; color: var(--text-muted); }

.dc-slot + .dc-slot { margin-top: 22px; }
.dc-slot-h { margin: 0 0 3px; font-size: 1.0625rem; color: var(--heading); }
.dc-slot-n { font-size: 0.875rem; color: var(--text-muted); }
.dc-slot-say { margin: 0 0 11px; font-size: 0.875rem; color: var(--text-muted); line-height: 1.6; }

.dc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); gap: 9px; }
.dc-item {
  display: grid; justify-items: center; gap: 6px; cursor: pointer;
  padding: 13px 10px; border: 1px solid var(--line); border-radius: 12px;
  background: var(--surface); font-family: inherit; color: var(--text);
}
.dc-item:hover:not(:disabled) { border-color: var(--brand-soft); background: var(--chip-bg); }
.dc-item.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.dc-item b { font-size: 0.875rem; color: var(--heading); font-weight: 600; text-align: center; }
/* ⚠️ 잠긴 것도 **보여줍니다** — 감추면 모으는 재미가 없어요.
      다만 누를 수는 없고, 어떻게 얻는지 적어 둡니다. */
.dc-item.locked { opacity: .62; cursor: default; }
.dc-art {
  width: 42px; height: 42px; border-radius: 50%;
  background: var(--surface-2); border: 1px solid var(--line);
}
.dc-art-none {
  display: grid; place-items: center;
  color: var(--text-muted); font-size: 0.9375rem;
}
.dc-season { font-size: 0.6875rem; color: #a2801f; }
.dc-how { font-size: 0.6875rem; color: var(--text-muted); text-align: center; line-height: 1.4; }

.dc-traces { display: flex; gap: 7px; flex-wrap: wrap; }
.dc-trace { cursor: pointer; font-family: inherit; }
.dc-trace.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface)); color: var(--brand-strong); }
.dc-act { display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 13px; }
.dc-foot { margin-top: 24px; font-size: 0.9375rem; color: var(--text-muted); }
.dc-foot b { color: var(--brand-strong); }

/* 프로필의 '꾸미기' 는 링크(a)라 단추 모양을 맞춰 줍니다 */
a.pf-edit-btn { display: inline-block; text-decoration: none; }

@media (max-width: 760px) {
  .dc-grid { grid-template-columns: repeat(auto-fill, minmax(112px, 1fr)); }
  /* ⚠️ 미리보기가 잘리지 않게 */
  .dc-prev { gap: 13px; }
}

/* 아직 내용을 안 채운 단계 — '아직 없다' 를 조용히 알려 줍니다.
   ⚠️ 경고색을 쓰지 않습니다. 고장이 아니라 '준비 중' 이니까요. */
.jr-empty { margin: 0; font-size: 0.9375rem; color: var(--text-muted); line-height: 1.7; }

/* ==========================================================
   ✏️ 관리자 콘텐츠 편집 — 입문 여정 · 성장 콘텐츠
   ----------------------------------------------------------
   ⚠️ 새 색·새 부품을 만들지 않습니다. 관리 화면이 쓰던 .btn / .chip /
      .cmt-adm / .adm-dim 을 그대로 씁니다.
   ⚠️ '쓰는 사람 수' 는 눈에 띄어야 합니다 — 그걸 못 보고 숨기면
      이미 그 단계를 마친 분들의 화면이 조용히 바뀝니다.
   ========================================================== */
.cc-row {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 12px 14px; margin-top: 8px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
}
.cc-row-main { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; flex: 1 1 auto; min-width: 0; }
.cc-row-main b { color: var(--heading); font-size: 1.0625rem; }
.cc-chip {
  padding: 2px 9px; border-radius: 999px; font-size: 0.75rem;
  background: var(--chip-bg); color: var(--brand-strong); border: 1px solid var(--line);
}
.cc-chip.on { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
.cc-chip.off { background: var(--surface-2); color: var(--text-muted); }
/* ⚠️ 경고색입니다 — 이 숫자를 못 보고 숨기면 남의 기록이 조용히 사라져요 */
.cc-usage { font-size: 0.8125rem; color: #a2801f; }
.cc-usage b { color: #8a6d16; }

.cc-edit { margin: 4px 0 14px; }
.cc-box { padding: 15px; border: 1px solid var(--brand-soft); border-radius: 12px; background: var(--surface-2); }
.cc-top { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.cc-top-act, .cc-step-act {
  display: flex; align-items: center; gap: 11px; flex-wrap: wrap; margin-top: 12px;
}
.cc-inline { display: inline-flex; align-items: center; gap: 5px; font-size: 0.875rem; color: var(--text); }
.cc-lbl { display: block; margin: 11px 0 4px; font-size: 0.8125rem; color: var(--text-muted); }
.cc-lbl input, .cc-lbl select { margin-top: 4px; }

.cc-box input[type="text"], .cc-box input[type="number"], .cc-box textarea, .cc-box select,
.cc-item input[type="text"], .cc-item input[type="number"], .cc-item textarea, .cc-item select {
  width: 100%; box-sizing: border-box;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 0.9375rem; background: var(--surface); color: var(--text);
}
.cc-box textarea, .cc-item textarea { resize: vertical; line-height: 1.6; }
/* 내부 열쇠 — 보여는 주되 고치지 못합니다 */
.cc-ro { background: var(--surface-2) !important; color: var(--text-muted) !important; cursor: not-allowed; }
.cc-num { width: 74px !important; }

.cc-steps { margin-top: 16px; }
.cc-step {
  padding: 13px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
}
.cc-step-head { display: flex; align-items: center; gap: 9px; flex-wrap: wrap; }
.cc-step-head b { color: var(--heading); }
.cc-order {
  flex: none; width: 22px; height: 22px; border-radius: 50%;
  display: grid; place-items: center;
  background: var(--chip-bg); color: var(--brand-strong); font-size: 0.75rem; font-weight: 700;
}
.cc-blocks { margin-top: 4px; }
.cc-block {
  padding: 10px; margin-top: 7px;
  border: 1px dashed var(--line); border-radius: 9px; background: var(--surface-2);
}
.cc-block textarea { margin-top: 6px; }
.cc-block .cmt-adm { margin-top: 6px; }

.cc-subtabs { margin: 12px 0; }
.cc-item {
  padding: 13px; margin-top: 10px;
  border: 1px solid var(--line); border-radius: 11px; background: var(--surface);
}
.cc-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin-top: 8px; }
.cc-foot { margin-top: 14px; font-size: 0.9375rem; }

@media (max-width: 760px) {
  /* ⚠️ 관리 화면도 폰에서 열립니다 — 두 칸을 한 칸으로 */
  .cc-top, .cc-grid2 { grid-template-columns: 1fr; }
  .cc-num { width: 100% !important; }
}

/* 🖼 진짜 그림을 넣은 장식 — 관리자가 '성장 콘텐츠' 에서 주소를 넣으면
   CSS 자리표시 대신 이 겹이 그려집니다.
   ⚠️ 자리표시(.orn-*)와 **같은 크기·같은 자리**여야 합니다. 안 그러면
      그림을 넣는 순간 프로필마다 장식 위치가 흔들려요. */
.pf-orn-img {
  background-size: contain;
  background-position: center;
  background-repeat: no-repeat;
}

/* ==========================================================
   ✏️ 현장 편집 — 콘텐츠가 보이는 그 화면에서 고치기
   ----------------------------------------------------------
   ⚠️ 회원 화면을 가리지 않습니다. 편집 모드를 켜야 나타나고, 끄면
      회원이 보는 모습 그대로 돌아옵니다 — 그걸 봐야 잘 고쳤는지 압니다.
   ⚠️ 관리자용이라는 것이 한눈에 보여야 합니다(점선 테 + 다른 바탕).
      회원 콘텐츠와 같은 모양이면 무엇이 편집칸인지 헷갈려요.
   ========================================================== */
.ie-toggle {
  margin-left: 10px; padding: 5px 12px; cursor: pointer;
  border: 1px dashed var(--line); border-radius: 999px;
  background: var(--surface); color: var(--text-muted);
  font-family: inherit; font-size: 0.8125rem; white-space: nowrap;
}
.ie-toggle:hover { border-color: var(--brand); color: var(--brand-strong); }
.ie-toggle.on {
  border-style: solid; border-color: var(--brand);
  background: var(--brand); color: #fff;
}

.ie-box {
  margin: 10px 0; padding: 13px 15px;
  border: 1px dashed var(--brand-soft); border-radius: 11px;
  background: color-mix(in srgb, var(--brand) 5%, var(--surface));
}
.ie-head { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 4px; }
.ie-head b { color: var(--brand-strong); font-size: 0.9375rem; }
/* ⚠️ 쓰는 사람 수는 눈에 띄어야 합니다 — 못 보고 숨기면 남의 기록이
      조용히 화면에서 사라집니다. */
.ie-usage { font-size: 0.8125rem; color: #a2801f; }
.ie-dim { font-size: 0.8125rem; color: var(--text-muted); font-weight: 400; }

.ie-fields { display: grid; grid-template-columns: 1fr 1fr; gap: 9px; }
.ie-lbl {
  display: block; grid-column: span 2;
  font-size: 0.8125rem; color: var(--text-muted);
}
.ie-lbl.ie-short { grid-column: span 1; }
.ie-lbl input[type="text"], .ie-lbl input[type="number"], .ie-lbl textarea, .ie-lbl select {
  display: block; width: 100%; box-sizing: border-box; margin-top: 4px;
  padding: 8px 11px; border: 1px solid var(--line); border-radius: 8px;
  font-family: inherit; font-size: 0.9375rem; background: var(--surface); color: var(--text);
}
.ie-lbl textarea { resize: vertical; line-height: 1.6; }
/* 내부 열쇠 — 보여는 주되 고치지 못합니다 */
.ie-ro { background: var(--surface-2) !important; color: var(--text-muted) !important; cursor: not-allowed; }
.ie-inline {
  display: inline-flex; align-items: center; gap: 6px; grid-column: span 1;
  font-size: 0.875rem; color: var(--text);
}
.ie-act { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 11px; }
.ie-plain {
  border: 0; background: none; padding: 0; cursor: pointer;
  font-family: inherit; font-size: 0.8125rem; color: var(--text-muted); text-decoration: underline;
}
.ie-plain:hover { color: var(--brand-strong); }
.ie-msg { font-size: 0.8125rem; color: var(--brand-strong); }
.ie-msg.bad { color: #b3392f; }

/* 편집 모드일 때 — 고칠 수 있는 덩어리에 옅은 테를 둘러 어디가 편집
   대상인지 보이게 합니다 */
.ie-on .ie-target { outline: 1px dashed var(--brand-soft); outline-offset: 5px; border-radius: 8px; }

@media (max-width: 760px) {
  .ie-fields { grid-template-columns: 1fr; }
  .ie-lbl, .ie-lbl.ie-short, .ie-inline { grid-column: span 1; }
}
.ie-list { margin-top: 14px; }

/* + 새로 만들기 - 접힌 단추와 펼친 폼
   ---------------------------------------------------------
   ⚠️⚠️ 점선 테두리로 그립니다. 채워진 단추로 만들면 회원용 단추와
      구분이 안 되고, 관리자가 편집 모드를 켜 둔 채 회원 화면을 볼 때
      "이게 회원에게도 보이나?" 를 헷갈립니다. 점선 = 관리자 전용.
   ⚠️ 만들기 폼은 고치기 상자와 같은 모양(.ie-box)을 씁니다. 화면마다
      다르게 생기면 어디가 저장인지 매번 찾아야 해요. */
.ie-new { margin-top: 12px; }
.ie-new-btn {
  width: 100%; padding: 11px 14px;
  border: 1px dashed var(--brand-soft); border-radius: 10px;
  background: transparent; color: var(--brand-strong);
  font: inherit; font-size: 0.9375rem; font-weight: 600;
  cursor: pointer; text-align: center;
}
.ie-new-btn:hover { border-color: var(--brand); background: var(--surface-2); }
.ie-new-btn.on { border-style: solid; background: var(--surface-2); }
.ie-new-box { border-style: dashed; }
.ie-new-say {
  margin: 0 0 4px; font-size: 0.8125rem; line-height: 1.6;
  color: var(--text-muted);
}

/* 순서 한 칸 옮기기 - 숫자 칸 대신 */
.ie-move {
  display: flex; align-items: center; gap: 6px; flex-wrap: wrap;
  margin-top: 8px; padding-top: 8px; border-top: 1px solid var(--line-soft, #eee);
}
.ie-move button[disabled] { opacity: 0.35; cursor: default; }

/* 새 단계 자리 - 단계 목록 바로 밑 */
.jr-new { margin-top: 10px; }

/* ==========================================================
   📱 초보 성장·현장 편집 화면의 모바일 손가락 크기
   ----------------------------------------------------------
   ⚠️⚠️ 폰에서 실제로 재 보고 고친 것들입니다. PC 에서는 마우스라 12px
      단추도 눌리지만, 폰에서는 손가락이 그만큼 정확하지 않아요.
        ↩︎ 기본값으로   19px  → 못 누름
        다음 추천        20px  → 초보에게 가장 중요한 단추인데 못 누름
        ✏️ 편집 토글     32px
        흔적 칩          27px
   ⚠️ **PC 는 건드리지 않습니다.** 여기 규칙은 전부 폰 폭에서만 돕니다.
   ⚠️ 글자 크기를 키워서 늘리지 않았습니다 — 높이(min-height)와 여백만
      키웠어요. 글자를 키우면 줄이 접혀서 오히려 지저분해집니다.
   ========================================================== */
@media (max-width: 760px) {
  /* ✏️ 현장 편집 — 관리자도 폰에서 고칠 때가 있습니다 */
  .ie-toggle {
    min-height: 44px; padding: 10px 15px; margin-left: 0; margin-top: 8px;
  }
  .ie-plain {
    min-height: 44px; padding: 0 12px;
    display: inline-flex; align-items: center;
  }
  .ie-act { gap: 8px; }
  .ie-act .btn { min-height: 44px; }
  /* 만들기·순서 단추도 손가락 크기로 */
  .ie-new-btn { min-height: 48px; }
  .ie-move { gap: 4px; }
  .ie-move .ie-plain { min-height: 44px; padding: 0 10px; }
  .ie-lbl input[type="text"], .ie-lbl input[type="number"],
  .ie-lbl select, .ie-lbl textarea { min-height: 44px; }
  /* 제목 옆이 아니라 아래로 — 큰 h1 옆에 붙으면 줄이 어그러집니다 */
  .ph-title { align-items: flex-start; }

  /* 🌱 입문 여정 */
  .jr-next {
    /* 다음 추천은 초보가 가장 먼저 누르는 곳입니다 — 줄 전체를 누르게 */
    gap: 8px;
  }
  .jr-next-go { min-height: 44px; display: inline-flex; align-items: center; }
  .jr-more .btn, .jr-act .btn { min-height: 44px; }
  .jr-step-head { min-height: 56px; }

  /* 🎀 꾸미기 — 흔적 칩도 누르는 것입니다 */
  .dc-trace { min-height: 40px; padding: 8px 13px; }
  .dc-act .btn { min-height: 44px; }

  /* 🌱 홈 초보 줄 · 🙌 도움이 됐어요 */
  .hs-go { min-height: 44px; display: inline-flex; align-items: center; }
  .hp-btn { min-height: 40px; padding: 8px 14px; }

  /* 🙋 질문 도우미 */
  .ak-kind { min-height: 60px; }
  .ak-dunno { min-height: 40px; }
  .ak-num-in input[type="text"] { min-height: 44px; }
}

@media (max-width: 760px) {
  /* 🛠 관리 탭 칩 — 폰에서 30px 이라 옆 탭이 눌리곤 했습니다.
     ⚠️ **관리 화면 안에서만** 키웁니다(#adminTabs). .chip 은 사이트
        곳곳에서 쓰는 부품이라 통째로 키우면 PC 디자인까지 바뀝니다. */
  #adminTabs .chip { min-height: 40px; display: inline-flex; align-items: center; }
}

/* ==========================================================
   📱 모바일 첫 화면 — 위계를 다시 세웁니다 (390px 기준)
   ----------------------------------------------------------
   모바일은 PC 를 작게 만드는 일이 아닙니다. 기능은 그대로 두고
   **무엇을 먼저 보여줄지**를 다시 정하는 일이에요.

   390×844 에서 재 보니 이랬습니다.
     머리띠      149px 이 늘 붙어 있음 (58 + 현재보기 45 + 분류바 45)
                 = 화면의 18% 가 항상 사라짐
     Hero        371px
     홈 검색     **아예 안 보임** (아래 ⚠️ 참고)
     새 글 첫 줄  y=608 — 머리띠에 눌려 겨우 한 줄

   그래서 셋을 손봤습니다.
     ① 머리띠는 **맨 윗줄만** 붙어 있게 (현재 보기·분류바는 함께 흘러감)
     ② Hero 를 압축하되 **질문 글자는 키움** (위계는 글자 크기로)
     ③ 홈 검색을 되살림

   ⚠️⚠️ 전부 이 미디어 쿼리 안에서만 합니다 — **PC 는 한 픽셀도
      안 바뀝니다.** 기능을 지우지 않았고, 접거나 줄이거나 아래로
      옮기기만 했습니다.
   ========================================================== */
@media (max-width: 760px) {

  /* ---- ① 머리띠: 맨 윗줄만 따라옵니다 ----
     ⚠️ 세 층이 통째로 sticky 라 149px 을 늘 먹고 있었습니다. 스크롤을
        내려도 '현재 보기' 와 분류바가 계속 붙어 있을 이유는 없어요 —
        지금 어디인지는 처음 볼 때 알면 됩니다.
     ⚠️ 기능을 지운 게 아닙니다. 둘 다 그 자리에 그대로 있고, 위로
        올리면 다시 보입니다.
     ⚠️ .site-header 를 static 으로 바꾸면 그 안의 .header-top 이
        스스로 붙을 수 있게 됩니다(부모가 스크롤 컨테이너가 아니라서). */
  .site-header { position: static; }
  .site-header .header-top {
    position: sticky; top: 0; z-index: 100;
    background: var(--header-bg); backdrop-filter: blur(10px);
    border-bottom: 1px solid var(--line);
  }

  /* ---- ② 현재 보기 줄 — 상태는 분명히, 배너처럼 크지 않게 ---- */
  .ctx-inner { padding-top: 7px; padding-bottom: 7px; }
  .ctx-lbl { font-size: 0.75rem; }

  /* ---- ③ Hero 압축 + 위계 ----
     ⚠️ 줄이기만 하지 않았습니다. **질문을 키웠어요**(22 → 27px).
        모바일에서 위계는 여백이 아니라 글자 크기로 말해야 합니다 —
        여백으로 위계를 만들면 화면만 길어지고 순서는 안 보입니다.
     ⚠️ 선택자를 `.hero-pick .pz-q` 로 씁니다. 위쪽 700px 규칙이 같은
        모양이라, `.pz-q` 만 쓰면 특정도에서 져서 조용히 안 먹습니다
        (실제로 처음에 그렇게 썼다가 22px 그대로였어요). */
  /* 슬로건은 폰에서 감춥니다 — 머리띠 로고 옆에 이미 같은 말이 있어요.
     ⚠️ 기능이 아니라 **중복된 글자**입니다. 넓은 화면에서는 그대로 둡니다. */
  .hero-pick .hero-brand { display: none; }
  .hero-pick .pz-q { font-size: 1.6875rem; line-height: 1.25; }      /* 27px */
  .hero-pick .pz-sub { font-size: 0.875rem; line-height: 1.5; margin-top: 6px; }
  .hero-pick .pickzone { padding: 14px 13px 12px; }
  .pz-groups { gap: 7px; margin-top: 12px; }
  .hero-pick .pz-g { min-height: 44px; padding: 10px 12px; }
  .pz-skip, #pzSkip { min-height: 44px; }
  /* 고른 뒤 빠른 진입 넷 — 390px 에서 한 줄에 넷은 글자가 껴 보입니다.
     ⚠️ 기능을 지우지 않고 **2×2 로 접습니다**(§8). */
  .pz-go { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .pz-go-a { min-height: 44px; display: flex; align-items: center; justify-content: center; }
  /* ---- ④ 홈 검색을 되살립니다 ----
     ⚠️⚠️ 여기 `.hero-search { display:none }` 규칙이 있었습니다. 까닭은
        "머리띠에 이미 검색칸이 있어서 둘이 된다" 였는데, 그 뒤 개편에서
        **머리띠의 늘 펼친 검색칸을 없앴습니다**(🔍 단추만 남음).
        그래서 이 규칙이 이제 **하나뿐인 검색칸**을 지우고 있었어요 —
        모바일에서 홈 검색이 통째로 안 보였습니다.
     ⚠️ 규칙을 지우지 않고 `.hero 안의` 것만 감추도록 좁혔습니다.
        나중에 Hero 안에 검색을 다시 넣더라도 그때 의도가 살아 있게요. */
  .home-search .hero-search { display: block; }
  .home-search { padding-top: 10px; padding-bottom: 10px; }
  .home-search .hero-search-label { font-size: 0.9375rem; margin-bottom: 7px; }
  .home-search .hero-search-box { gap: 6px; }
  .home-search .hero-search-btn { padding: 10px 14px; white-space: nowrap; }
  #heroSearchInput { min-height: 44px; font-size: 1rem; }

  /* ---- ⑤ 섹션 여백 — PC 간격을 그대로 쓰지 않습니다 ---- */
  .home-main, .home-calrow, .home-search { padding-top: 14px; padding-bottom: 14px; }
  .home-main .feed-head, .home-calrow .feed-head { margin-bottom: 8px; }
}

/* ==========================================================
   📱 목록 행 — 제목을 두 줄까지 흐르게 (§21)
   ----------------------------------------------------------
   390px 에서 재 보니 제목이 이렇게 잘렸습니다.
     "[초보 질문 · 온습도] 소라게 온도 · 습도 — 온습도계로 ]"
   제목 글자가 `white-space: nowrap` 이라 한 줄에서 **글자 중간이 잘려**
   나갔어요. 말줄임표도 없이 사라져서 무슨 글인지 알 수가 없었습니다.
   그래서 글자를 두 줄까지 흐르게 했습니다.

   ⚠️⚠️⚠️ **여기서 overflow 를 건드리지 마세요.**
      .ptitle 은 ≤720px 에서 `display:-webkit-box` + `-webkit-line-clamp:2`
      로 두 줄 자르기를 합니다(위 2442줄께). 그런데
      **-webkit-line-clamp 는 overflow:hidden 일 때만 동작합니다.**

      처음에 여기서 `.ptitle { overflow: visible }` 로 덮었습니다.
      그랬더니 상자는 두 줄 높이 그대로인데 자르기만 풀려서, **세 줄째
      글자가 상자 밖으로 흘러나와 아랫줄(글쓴이·날짜)을 덮었습니다.**
      센세가 폰에서 찍어 보내 주신 그 화면이 이것이었어요.
        · 375px 세 줄 제목 → 상자 39px, 글자 93px
          → 17px 삐져나와 글쓴이 줄을 11px 덮음

      고쳐야 했던 것은 `white-space` 하나뿐이었습니다. 자르기는 이미
      제대로 돌고 있었어요 — overflow 는 손대지 않습니다.

   ⚠️ 한글 제목에 word-break: break-all 을 쓰지 않았습니다 — 낱말이
      아무 데서나 끊기면 읽기가 더 힘들어져요. overflow-wrap 만 씁니다
      (띄어쓰기 없는 긴 주소 같은 것만 끊기게).
   ========================================================== */
@media (max-width: 700px) {
  .post-item .pt-text {
    /* ⚠️ 여기에도 line-clamp 를 달지 않습니다. 글자가 블록이 되면서
          뒤에 붙는 **댓글 수 [2] 가 다음 줄로 떨어집니다**(재 봤어요).
          자르기는 부모(.ptitle)가 이미 합니다. */
    white-space: normal;
    overflow-wrap: break-word;
    line-height: 1.4;
  }
  /* 게시판 이름은 제목보다 뒤로 물러납니다 — 제목이 먼저 읽혀야 해요 */
  .post-item .pboard { font-size: 0.75rem; opacity: .8; }
  /* 줄 사이를 조금 띄워 두 줄 제목이 답답하지 않게 */
  .post-item { row-gap: 6px; padding-top: 12px; padding-bottom: 12px; }
}

@media (max-width: 760px) {
  /* 🌱 홈 초보 줄 — 폰에서는 한두 줄로 (§10)
     ⚠️ 390px 에서 세 줄(132px)을 먹고 있었습니다. 그만큼 새 글이 아래로
        밀려요. 설명 한 줄은 **폰에서만** 감춥니다 — 제목과 단추만 있어도
        무엇을 하는 줄인지 알 수 있고, 들어가면 그 안에 다 적혀 있어요.
     ⚠️ 기능을 지운 게 아닙니다. 링크도 진행도도 그대로입니다. */
  #homeStart .hs-sub { display: none; }
  #homeStart .hs-row { padding: 10px 13px; gap: 8px; }
  #homeStart .hs-t { flex: 1 1 100%; }
}

@media (max-width: 760px) {
  /* 🌱 입문 여정 — 「핵심 내용 확인 완료」는 그 단계의 주된 행동입니다.
     ⚠️ 136px 짜리 단추가 왼쪽에 붙어 있으면 부차적인 것처럼 보여요.
        가로를 꽉 채워 '여기를 누르면 된다' 가 분명하게 (§27). */
  .jr-act { flex-direction: column; align-items: stretch; }
  .jr-act .btn { width: 100%; }
  .jr-act .jr-note, .jr-act .jr-done-say { text-align: center; }
  /* 단계 본문 여백도 조금 줄입니다 — 폰에서는 글이 화면을 더 써야 해요 */
  .jr-step-body { padding-bottom: 14px; }
}

/* =========================================================
   📱 모바일 글씨 — 곁다리를 줄여 계급을 세웁니다 (2026-09-12)
   ---------------------------------------------------------
   센세 말씀: "모바일 글씨가 전체적으로 크다. 줄이는 기능이 있긴 하지만
   보통 사람들은 처음 들어온 것으로 판단하잖아."
   맞는 말씀입니다. 크기 고르개(작게·중간·크게)는 **이미 불편을 느낀
   사람만** 씁니다. 처음 열었을 때가 곧 그 사람이 보는 누리예요.

   그래서 '전부 몇 px 줄이기' 를 하지 않았습니다. 재 보니 문제는
   크기가 아니라 **계급이 뒤집힌 것**이었어요.

     390px 에서 실측 (고치기 전)
       글 본문 .detail-content ......... 14px   ← 읽으라고 있는 글
       바닥글 링크 .footer-col a ....... 16px   ← 읽을 일 없는 링크 모음
       바닥글 소제목 h4 ................ 17px
       홈 새 글 제목 .fb-title ......... 17px
       같은 성격의 게시판 목록 제목 .... 14px   ← 홈만 3px 더 큼

   읽는 글보다 바닥글이 크면, 화면 전체가 '다 크다' 로 보입니다.
   눈이 쉴 곳이 없어서요.

   원칙 — **중요한 것은 그대로, 곁다리만 줄입니다.**
     그대로 둔 것   동물 이름 · 섹션 제목 · 글 제목 · **글 본문**
     줄인 것        바닥글 · 머리띠 보조 링크 · 서랍 로그인 ·
                    홈 새 글 제목(목록과 같은 단계로)

   ⚠️⚠️ **글 본문(.detail-content)은 한 픽셀도 안 건드렸습니다.**
      읽으라고 있는 글이니까요. 여기를 줄이면 '작아서 편한' 게 아니라
      그냥 못 읽는 사이트가 됩니다.
   ⚠️ 입력칸도 안 건드립니다 — iOS 는 16px 아래 입력칸에 초점이 가면
      화면을 제멋대로 확대합니다(위 모바일 단계 주석 참고).
   ⚠️ 전부 max-width: 700px 안입니다. PC 는 한 줄도 안 바뀝니다.
   ⚠️ 파일 맨 끝에 둡니다 — 08-market.css 가 마지막으로 읽히고, 그 안에서도
      뒤에 와야 앞의 모바일 단계 값을 확실히 덮습니다.
   ========================================================= */
@media (max-width: 700px) {

  /* ---------- ① 바닥글 — 가장 크던 곳 ----------
     링크 열일곱 개가 16px 로 서 있었습니다. 바닥글은 '찾으러 온 사람'
     만 보는 자리라, 본문보다 작아도 아무도 아쉽지 않아요.
     ⚠️ 13px 아래로는 안 내립니다. 눌러야 하는 링크라 너무 작으면
        손가락이 빗나갑니다(높이는 아래에서 따로 지킵니다). */
  .site-footer .footer-col a { font-size: 0.8125rem; line-height: 1.9; }
  .site-footer .footer-col h4 { font-size: 0.84375rem; }
  .site-footer .footer-about { font-size: 0.78125rem; line-height: 1.6; }
  .site-footer .footer-about b { font-size: inherit; }
  /* ⚠️ 글자는 줄었지만 **누를 자리는 그대로** 둡니다. 링크 사이 간격을
        줄간격(1.9)으로 벌려 손가락이 빗나가지 않게 했어요. */

  /* ---------- ② 머리띠 분류바 ----------
     ⚠️⚠️ 여기 적지 않습니다. 그 규칙은 **이미 `!important` 로** 위에
        (2280·5220줄께) 못 박혀 있어서, 여기서 아무리 적어도 안 먹습니다.
        처음에 여기 적었다가 "고쳤는데 안 바뀐다" 로 한참 헤맸어요.
        `!important` 를 하나 더 얹는 대신 **원래 값을 내렸습니다**
        (17 → 15, 16 → 14.5, 380px 에서 16 → 14).
        같은 값이 두 군데 있으면 다음 사람이 반드시 한쪽만 고칩니다. */

  /* ---------- ③ 서랍 로그인 — 혼자 튀던 값 ----------
     17.5px 로 이 화면에서 가장 큰 링크였습니다. 옆의 서랍 메뉴가
     15px 인데 로그인만 더 컸어요. */
  .drawer .drawer-auth .auth-link { font-size: 0.9375rem; }

  /* ---------- ④ 홈 새 글 제목 — 게시판 목록과 같은 단계로 ----------
     ⚠️⚠️ 같은 '글 제목' 인데 홈은 17px, 게시판은 14px 였습니다.
        한 사이트에서 같은 것이 자리마다 다른 크기면, 크기가 뜻을
        잃습니다. 홈을 15px 로 내려 **그 줄에서는 여전히 가장 큰**
        글자이되, 목록과 같은 단계에 서게 했습니다. */
  .fb-title,
  /* ⚠️ `.fresh-big .fb-title`(클래스 둘)이 17px 로 이기고 있어서, 이쪽도
        같은 굵기로 맞춰 적습니다. !important 는 쓰지 않았어요 —
        굵기로 이길 수 있으면 그게 낫습니다. */
  .fresh-big .fb-title { font-size: 0.9375rem; line-height: 1.45; }

  /* ---------- ⑤ 살짝만 다듬는 것 ----------
     ⚠️ 이 셋은 **계급의 기둥**이라 크게 건드리지 않습니다. 여기까지
        줄이면 '작아서 편한' 게 아니라 밋밋해져요. */
  .pz-on-who .pz-now { font-size: 1.625rem; }   /* 28 → 26 */
  .feed-head h2,
  /* ⚠️ 홈의 큰 칸은 `.home-main .hm-big .feed-head h2` 로 21px 이었습니다.
        같은 '섹션 제목' 인데 자리마다 21·18 로 갈려 있었어요. 18 로 모읍니다. */
  .home-main .hm-big .feed-head h2 { font-size: 1.125rem; }   /* 21·18 → 18 */
  .article-title { font-size: 1.25rem; }         /* 21 → 20 */

  /* ---------- ⑥ 손가락 크기는 지킵니다 ----------
     ⚠️⚠️ 글자를 줄인다고 **누를 자리까지 줄이면 안 됩니다.** 글씨가
        작아진 만큼 링크가 촘촘해져서, 옆의 것을 누르게 돼요.
        바닥글 링크는 줄간격으로, 머리띠는 높이로 지킵니다. */
  .category-bar .cat-bar-inner > a,
  .category-bar .cat-bar-inner > button.navmenu-trigger {
    min-height: 40px; display: inline-flex; align-items: center;
  }
}

/* =========================================================
   ✅ 질문 해결 — 띠 · 대표 답변 · 목록 딱지 (2026-09-13)
   ---------------------------------------------------------
   누리에서 가장 끊겨 있던 자리를 잇습니다.
     초보가 묻고 → 누군가 답하고 → **풀렸는지가 아무 데도 안 남았어요.**

   ⚠️⚠️ **미해결을 붉게 말하지 않습니다.** 아직 답을 못 받은 사람에게
      "미해결" 이라고 크게 적으면 알려 주는 게 아니라 상처예요.
      풀렸을 때만 초록으로 말하고, 안 풀렸을 때는 글쓴이에게만 조용히
      "풀렸나요?" 하고 묻습니다.
   ⚠️ '도움이 됐어요' 와 색을 나눕니다. 둘은 다른 일이에요 —
        🙌 도움이 됐어요   여럿에게 줄 수 있는 고맙다는 표시
        ✅ 대표 답변       하나만 · 이걸로 풀렸다는 표시
   ========================================================= */

/* 글 머리 — 풀렸을 때만 */
.q-solved {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 9px 13px;
  background: var(--chip-bg); border: 1px solid var(--brand-soft);
  border-radius: 10px;
}
.q-solved b { color: var(--brand-strong); font-size: 0.9375rem; }
.q-solved span { font-size: 0.84375rem; color: var(--text-muted); }

/* 글쓴이에게만 — 조용히 묻는 줄 */
.q-ask-solved {
  display: flex; align-items: center; gap: 9px; flex-wrap: wrap;
  margin: 0 0 10px; padding: 8px 12px;
  border: 1px dashed var(--line); border-radius: 10px;
  font-size: 0.84375rem; color: var(--text-muted);
}

/* 답변 아래 두 단추 */
.hp-row { display: flex; align-items: center; gap: 7px; flex-wrap: wrap; }
.hp-pick {
  padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--line); background: var(--surface);
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  color: var(--text-muted); cursor: pointer;
}
.hp-pick:hover { border-color: var(--brand); color: var(--brand-strong); }
.hp-pick.on {
  background: var(--chip-bg); border-color: var(--brand);
  color: var(--brand-strong);
}
/* 모든 분이 보는 대표 답변 표시 */
.hp-solved {
  display: inline-block; margin-right: 6px;
  padding: 3px 9px; border-radius: 999px;
  background: var(--chip-bg); border: 1px solid var(--brand);
  font-size: 0.8125rem; font-weight: 800; color: var(--brand-strong);
}

/* 목록 딱지 — 제목 앞에 작게 */
.post-item .p-solved {
  display: inline-block; padding: 1px 6px; margin-right: 2px;
  border-radius: 5px; background: var(--chip-bg);
  border: 1px solid var(--brand-soft);
  font-size: 0.75rem; font-weight: 800; color: var(--brand-strong);
  vertical-align: middle;
}

@media (max-width: 700px) {
  /* ⚠️ 손가락 크기를 지킵니다 — 글자만 작아지고 누를 자리가 좁아지면
        옆의 '도움이 됐어요' 를 누르게 됩니다. */
  .hp-pick { min-height: 40px; padding: 6px 12px; }
  .q-solved, .q-ask-solved { padding: 9px 11px; }
  .q-ask-solved .cmt-adm, .q-solved .cmt-adm { min-height: 40px; }
  .post-item .p-solved { font-size: 0.6875rem; }
}

/* 🌏 「전체 누리」 — 특정 동물에 매이지 않는 공통 글 (2026-09-16)
   =========================================================
   「무환수 사육이란 무엇인가?」 처럼 소라게·새우·등각류에 다 해당하는
   정보글입니다. 소라게 목록에도 함께 뜨기 때문에, **소라게 전용 글처럼**
   보이면 안 됩니다 — 전체 누리 글의 숫자를 자기 동물에 그대로 적용하면
   위험할 수 있어요.
   ⚠️ 해결 딱지(.p-solved)와 나란히 섭니다. 같은 크기·같은 모서리로
      맞췄어요 — 딱지마다 생김새가 다르면 목록이 시끄러워집니다.
   ⚠️ 초록을 쓰지 않습니다. 초록은 「지금 보고 있는 동물」 의 색이라,
      정반대 뜻인 이 딱지에 쓰면 뜻이 뒤집혀요. 중립색을 씁니다. */
.post-item .p-allnuri,
.post-item .p-animal {
  display: inline-block; padding: 1px 6px; margin-right: 2px;
  border-radius: 5px; background: var(--surface-2);
  border: 1px solid var(--line);
  font-size: 0.75rem; font-weight: 800; color: var(--text-muted);
  vertical-align: middle; white-space: nowrap;
}
/* 🐾 어느 동물 글인가 — 여러 동물을 섮어 보여 주는 목록에서만.
   ⚠️ 전체 누리 딱지와 같은 모양이되 테두리를 점선으로 가릅니다 —
      「전체 누리」 는 동물 이름이 아니라 다른 종류의 말이에요.
      같은 생김새면 「전체 누리」 라는 동물이 있는 줄 압니다. */
.post-item .p-allnuri { border-style: dashed; background: transparent; }
/* 글 상세 — 게시판 이름 옆에 「어느 동물 이야기인가」 */
.article-scope {
  display: inline-block; margin-left: 6px; padding: 4px 12px;
  border-radius: 999px; background: var(--surface-2);
  font-size: 0.75rem; font-weight: 800; color: var(--text-muted);
}
/* ⚠️ 전체 누리만 테두리를 한 겹 더 줍니다. 특정 동물 이름과 **다른 종류의
      말**이라, 같은 생김새면 「전체 누리」 라는 동물이 있는 줄 압니다. */
.article-scope.scope-all {
  background: transparent; border: 1px dashed var(--line); color: var(--text);
}
@media (max-width: 700px) {
  .post-item .p-allnuri, .post-item .p-animal { font-size: 0.6875rem; }
  .article-scope { padding: 3px 9px; font-size: 0.6875rem; }
}

/* 🌱 가입인사 문지기 — 쓰기 전에 알려 주는 띠 (2026-09-13)
   ---------------------------------------------------------
   ⚠️⚠️ 예전에는 저장을 누르는 순간에야 alert 로 알렸습니다. 다 쓴 글을
      등록하려는데 그때 막히면, 급해서 온 초보는 그 자리에서 나갑니다.
      정책은 그대로 두고 **알리는 시점만** 앞으로 당겼어요.
   ⚠️ 붉은 경고로 만들지 않았습니다. 잘못한 게 아니라 아직 안 한 것이라,
      겁주는 색이 아니라 안내하는 색을 씁니다. */
.greet-gate {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin: 0 0 12px; padding: 11px 14px;
  background: var(--chip-bg); border: 1px solid var(--brand-soft);
  border-radius: 10px;
}
.greet-gate[hidden] { display: none; }
.greet-gate b { color: var(--brand-strong); font-size: 0.9375rem; }
.greet-gate span { font-size: 0.84375rem; color: var(--text-muted); line-height: 1.6; }
.greet-gate .btn { margin-left: auto; }
@media (max-width: 700px) {
  .greet-gate { padding: 10px 12px; gap: 8px; }
  /* 폰에서는 단추가 오른쪽 끝으로 밀리면 누르기 어려워요 */
  .greet-gate .btn { margin-left: 0; width: 100%; min-height: 44px; }
}

/* ☀️ 오늘 이 동물에서 할 만한 것 — 초보 줄 아래 얇은 한 줄 (§14·§15)
   ---------------------------------------------------------
   ⚠️⚠️ **대시보드가 아닙니다.** 큰 카드 여덟 개를 홈에 붙이면 모바일
      첫 화면이 다시 망가집니다. 칩 한두 개짜리 줄이에요.
   ⚠️ 0 인 항목은 아예 안 그립니다 — "답변 기다림 0" 은 알려 주는 게
      아니라 빈칸을 채우는 것입니다. 할 일이 없으면 줄도 없습니다. */
.hs-today {
  display: flex; align-items: center; gap: 7px; flex-wrap: wrap;
  margin-top: 7px;
}
.hs-chip {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 4px 10px; border-radius: 999px;
  background: var(--surface); border: 1px solid var(--line);
  font-size: 0.8125rem; color: var(--text); text-decoration: none;
}
.hs-chip b { color: var(--brand-strong); font-weight: 800; }
.hs-chip:hover { border-color: var(--brand); }
@media (max-width: 700px) {
  /* 손가락으로 누르는 곳이라 높이를 지킵니다 */
  .hs-chip { min-height: 36px; padding: 6px 11px; font-size: 0.78125rem; }
  .hs-today { gap: 6px; margin-top: 8px; }
}

/* =========================================================
   🧭 검색 범위 띠 — 「지금 어디서 찾는 중인가」 와 나가는 길
   ---------------------------------------------------------
   ⚠️⚠️ 예전에는 소라게 안에서 찾다가 **전체로 나갈 길이 없었습니다.**
      제목은 「소라게에서 검색한 결과」 라고 적혀 있는데, 범위를 푸는
      단추가 어디에도 없어서 주소를 손으로 고치는 수밖에 없었어요.
   ⚠️ 검색어는 그대로 들고 넘어갑니다 — 범위만 바꾸는데 검색어까지
      잃으면 처음부터 다시 쳐야 합니다.
   ⚠️ 전체 누리에서 찾는 중일 때는 아예 안 그립니다. 그게 기본이라,
      화면마다 「전체」 를 되풀이하면 정작 좁혀 본 분의 표시가 묻혀요.
   ========================================================= */
.search-scope-bar {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  margin-top: 10px;
}
.search-scope-bar .ssb-now {
  font-size: 0.8125rem; font-weight: 700; color: var(--brand-strong, var(--brand));
  background: var(--chip-bg); padding: 5px 11px; border-radius: 999px;
}
.search-scope-bar .ssb-all {
  font-size: 0.8125rem; font-weight: 700; color: var(--text-muted);
  /* 손끝이 닿을 자리 — 보이는 크기는 그대로 두고 넷만 깝니다 */
  position: relative; padding: 5px 2px;
}
.search-scope-bar .ssb-all::after {
  content: ""; position: absolute;
  left: -6px; right: -6px; top: 50%; height: 44px; transform: translateY(-50%);
}
.search-scope-bar .ssb-all:hover { color: var(--brand); }
.search-scope-bar .ssb-all:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 6px; }

/* 넓은 화면에서는 줄 썸네일을 조금 키웁니다 — 자리가 넉넉하니까요 */
@media (min-width: 761px) {
  .hot-vis .hv-th { width: 52px; }
}

/* =========================================================
   💬 고른 동물의 최근 이야기 — "소라게 이야기"
   ---------------------------------------------------------
   ⚠️⚠️ 동물을 고르면 링크 넷만 보였습니다. 고르고 나서도 실제 글이 한
      줄도 안 보여서, 거기에 무엇이 있는지 알려면 한 번 더 눌러 들어가야
      했어요. 고른 보람이 링크뿐이면 고를 까닭이 없습니다.
   ⚠️ **짧은 목록 셋**입니다. 이 칸이 커지면 아래 「누리 전체의 새
      이야기」 가 첫 화면에서 밀려나요 — 홈의 순서가 뒤집힙니다.
   ⚠️ 새 디자인 체계를 만들지 않았습니다. 색·모서리·글꼴은 누리가 이미
      쓰는 값(--surface · --line · --radius)을 그대로 씁니다.
   ========================================================= */
.as-box {
  margin-top: 14px; padding: 14px 16px 12px;
  background: var(--surface); border: 1px solid var(--line);
  border-radius: var(--radius, 14px);
}
.as-head {
  display: flex; align-items: baseline; justify-content: space-between;
  gap: 10px; flex-wrap: wrap; margin-bottom: 8px;
}
.as-title { font-size: 1.0625rem; color: var(--heading); margin: 0; }
.as-more { font-size: 0.8125rem; font-weight: 700; color: var(--brand); white-space: nowrap; }
.as-list { display: flex; flex-direction: column; }
.as-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 9px 2px; border-top: 1px solid var(--line);
  color: var(--text); text-decoration: none;
}
.as-row:first-child { border-top: 0; }
.as-row:hover .as-t { color: var(--brand); }
/* ⚠️ 제목은 한 줄로 자릅니다. 두 줄이 되면 칸이 들쭉날쭉해져서, 짧은
   목록이라는 성격이 사라져요. */
.as-t {
  flex: 1 1 auto; min-width: 0; font-size: 0.9375rem; font-weight: 600;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.as-meta { flex: 0 0 auto; display: flex; align-items: center; gap: 7px; font-size: 0.75rem; color: var(--text-muted); }
.as-b { background: var(--chip-bg); padding: 2px 7px; border-radius: 999px; white-space: nowrap; }
.as-hint { font-size: 0.875rem; color: var(--text-muted); margin: 6px 0 0; }
.as-acts { margin: 10px 0 0; }
.as-ask {
  display: inline-block; font-size: 0.84375rem; font-weight: 700;
  color: var(--brand); background: var(--chip-bg);
  padding: 7px 14px; border-radius: 999px;
}
.as-ask:hover { background: var(--brand); color: #fff; }
.as-retry {
  border: 0; background: var(--chip-bg); color: var(--brand);
  font-family: inherit; font-size: 0.8125rem; font-weight: 700;
  padding: 4px 10px; border-radius: 999px; cursor: pointer;
}
@media (max-width: 480px) {
  /* ⚠️ 좁은 화면에서는 게시판 딱지를 뺍니다 — 제목이 먼저입니다.
     댓글 수는 남깁니다(그게 「읽을 만한가」 를 말해요). */
  .as-b { display: none; }
  .as-head { gap: 4px; }
}

/* 🔗 여러 동물이 함께 쓰는 게시판으로 가는 짧은 줄 (홈 전체 피드 머리 아래)
   ⚠️ 새 게시판을 만든 게 아니라 이미 있는 곳(사육자의 이야기 · 사육동물
      자유 게시판 · 오늘의 누리)으로 가는 길입니다.
   ⚠️ 단추처럼 키우지 않습니다 — 주인공은 아래 글 목록이에요. */
.hm-quick {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin: -2px 0 10px;
}
.hm-quick a {
  font-size: 0.78125rem; font-weight: 700; color: var(--text-muted);
  background: var(--chip-bg); padding: 5px 11px; border-radius: 999px;
  white-space: nowrap;
}
.hm-quick a:hover { color: var(--brand); }

/* ==========================================================
   🌏 글쓰기 — 「이 글은 어느 동물 이야기인가요?」 두 칸
   ----------------------------------------------------------
   ⚠️⚠️ 예전에는 칸 하나에 모든 분류와 모든 종을 통째로 늘어놓았습니다.
      스무 줄이 넘는 목록이 열려 "보기가 너무 안 좋다" 는 말을 들었어요.
      이제 분류를 고르면 옆칸이 그 분류의 종으로 갈립니다.
   ⚠️ 좁은 화면에서는 아래로 쌓습니다 — 둘을 나란히 두면 각각 반 폭이
      되어 「크레스티드 게코」 같은 이름이 잘립니다.
   ⚠️ 종 칸은 hidden 으로 감춥니다(있을 때만 뜸). flex 안의 [hidden] 은
      display:flex 에 덮여 다시 보일 수 있어 못 박아 둡니다.
   ========================================================== */
.scope-row {
  display: flex;
  gap: 8px;
  align-items: center;
  flex-wrap: wrap;
}
.scope-row > select { flex: 1 1 210px; min-width: 0; }
.scope-row > select[hidden] { display: none; }
@media (max-width: 560px) {
  .scope-row { flex-direction: column; align-items: stretch; }
  .scope-row > select { flex: 1 1 auto; width: 100%; }
}

/* ==========================================================
   🌱 입문 여정 — 서식 · 정보글 고르개 · 「처음이라면」 줄
   ----------------------------------------------------------
   ⚠️ 단계 본문에 구분선·목록·링크가 들어갈 수 있게 되면서(start.js 의
      서식()), 그 모양을 여기서 받습니다. 새 디자인이 아니라 이미 쓰는
      색·간격을 그대로 씁니다.
   ========================================================== */
.jr-block ul { margin: 6px 0 6px 18px; padding: 0; }
.jr-block li { margin: 3px 0; line-height: 1.6; }
.jr-block hr {
  border: 0;
  border-top: 1px solid var(--line, #d8ded6);
  margin: 10px 0;
}
.jr-block p + p { margin-top: 6px; }
.jr-block a { text-decoration: underline; }

/* 🔗 정보글 링크 고르개 (관리자에게만 보입니다) */
.jr-pick { margin: 8px 0 0; }
.jr-pick-list {
  margin-top: 6px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 240px;
  overflow-y: auto;
}
/* ⚠️ hidden 이 flex 에 덮이지 않게 못 박습니다 */
.jr-pick-list[hidden] { display: none; }
.jr-pick-item {
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--line, #d8ded6);
  border-radius: 8px;
  background: var(--card, #fff);
  cursor: pointer;
  font-size: 13px;
  line-height: 1.4;
}
.jr-pick-item:hover { border-color: var(--brand, #7aa874); }
.jr-pick-say { font-size: 13px; opacity: .75; margin: 4px 0; }

/* 🌱 정보글 목록 맨 위 「처음이라면 여기부터」 — 서버가 심습니다.
   ⚠️ 화면 스크립트가 목록을 다시 그리면서 지웁니다. 눈에 보이는 시간이
      짧으니 튀지 않게 수수하게 둡니다. 꼭 있어야 하는 쪽은 검색로봇이에요. */
.first-here { margin: 0 0 10px; font-size: 14px; }
.first-here a { text-decoration: underline; }

/* 🤖 서버가 미리 그려 두는 여정 본문 — 스크립트가 곧 덮습니다 */
.st-step h2 { font-size: 18px; margin: 14px 0 6px; }
.st-step h3 { font-size: 15px; margin: 10px 0 4px; }

/* ==========================================================
   ✏️ 임시저장 여러 개 — 고르는 목록
   ----------------------------------------------------------
   ⚠️ 글쓰기 화면 맨 위라 자리를 적게 먹어야 합니다. 처음에는 접혀 있고,
      「다른 임시저장 N개」 를 눌러야 펼쳐집니다.
   ========================================================== */
.dr-list {
  margin-top: 8px;
  /* ⚠️ 감싸는 .draft-resume 가 가로 flex 입니다. 그냥 두면 목록이
        머리글 **옆에** 좁게 끼어요(실제로 그랬습니다). 한 줄을 통째로
        쓰도록 100% 로 못 박아 아래로 내립니다. */
  flex: 1 0 100%;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 220px;
  overflow-y: auto;
}
/* ⚠️ flex 가 hidden 을 덮지 않게 못 박습니다 */
.dr-list[hidden] { display: none; }
.dr-item { display: flex; align-items: stretch; gap: 4px; }
.dr-pick {
  flex: 1 1 auto;
  min-width: 0;
  text-align: left;
  padding: 7px 10px;
  border: 1px solid var(--line, #d8ded6);
  border-radius: 8px;
  background: var(--card, #fff);
  cursor: pointer;
  display: flex;
  align-items: baseline;
  gap: 8px;
}
.dr-pick:hover { border-color: var(--brand, #7aa874); }
.dr-pick-t {
  flex: 1 1 auto;
  min-width: 0;
  font-size: 13px;
  /* 제목이 길어도 한 줄로 — 목록이 들쭉날쭉하면 고르기 어려워요 */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.dr-pick-m { flex: 0 0 auto; font-size: 12px; opacity: .7; }
.dr-del {
  flex: 0 0 auto;
  width: 34px;
  border: 1px solid var(--line, #d8ded6);
  border-radius: 8px;
  background: var(--card, #fff);
  cursor: pointer;
  opacity: .7;
}
.dr-del:hover { opacity: 1; border-color: #c66; color: #c66; }

/* ==========================================================
   🦀 캐릭터 프로필 고르기 (꾸미기 화면 안)
   ----------------------------------------------------------
   ⚠️ 새 색을 만들지 않고 누리가 이미 쓰는 변수를 그대로 씁니다.
   ⚠️ 360px 에서 가로로 넘치지 않게, 고르는 줄은 **감싸 내려갑니다**
      (가로 스크롤을 쓰면 뒤쪽 항목이 있는 줄 모르고 지나갑니다).
   ========================================================== */
.cp-wrap { margin-top: 14px; }
.cp-say { font-size: 13px; opacity: .85; margin: 4px 0 10px; line-height: 1.6; }
.cp-say-sm { font-size: 12px; opacity: .7; align-self: center; }
.cp-h { font-size: 15px; margin: 14px 0 6px; }

/* 미리보기 */
.cp-prev { display: flex; gap: 14px; flex-wrap: wrap; align-items: center; }
.cp-prev-big {
  width: 168px; height: 168px;
  border-radius: 16px;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  border: 1px solid var(--line, #d8ded6);
}
.cp-prev-big img { width: 100%; height: 100%; object-fit: contain; }
.cp-prev-small { display: flex; gap: 10px; align-items: flex-end; flex-wrap: wrap; }
.cp-dot {
  border-radius: 50%;
  overflow: hidden;
  display: flex;
  flex: 0 0 auto;
  border: 1px solid var(--line, #d8ded6);
}
.cp-dot img { width: 100%; height: 100%; object-fit: cover; }

/* 고르는 줄 */
.cp-sec { margin-top: 12px; }
.cp-row { display: flex; gap: 8px; flex-wrap: wrap; }
.cp-item {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  padding: 8px 10px;
  min-width: 76px;
  border: 2px solid var(--line, #d8ded6);
  border-radius: 12px;
  background: var(--card, #fff);
  cursor: pointer;
  font: inherit;
}
.cp-item:hover { border-color: var(--brand, #7aa874); }
/* ⚠️ 고른 것은 **색 말고도** 테두리 굵기와 ✓ 로 표시합니다 — 색만으로
   가르면 색을 못 가리는 분에게는 아무 표시가 없습니다. */
.cp-item.on { border-color: var(--brand, #7aa874); box-shadow: inset 0 0 0 1px var(--brand, #7aa874); }
.cp-item:focus-visible { outline: 3px solid var(--brand, #7aa874); outline-offset: 2px; }
.cp-item.locked { opacity: .5; cursor: not-allowed; }
.cp-item-n { font-size: 12px; line-height: 1.3; text-align: center; }
.cp-chk {
  position: absolute; top: -7px; right: -7px;
  width: 20px; height: 20px; border-radius: 50%;
  background: var(--brand, #7aa874); color: #fff;
  font-size: 12px; line-height: 20px; text-align: center;
}
.cp-lock { position: absolute; top: -6px; left: -6px; font-size: 13px; }
.cp-thumb { width: 44px; height: 44px; display: flex; }
.cp-thumb img { width: 100%; height: 100%; object-fit: contain; }
.cp-sw { width: 34px; height: 34px; border-radius: 9px; border: 1px solid var(--line, #d8ded6); }
.cp-sw-bg { width: 44px; }
.cp-ani { font-size: 13px; padding: 6px 2px; }

/* 적용 줄 */
.cp-act { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-top: 14px; }
.cp-msg { font-size: 13px; opacity: .9; }
.cp-msg.bad { color: #c0392b; opacity: 1; }

@media (max-width: 420px) {
  .cp-prev-big { width: 132px; height: 132px; }
  .cp-item { min-width: 68px; padding: 7px 8px; }
}

/* ==========================================================
   🐾 「○○가 궁금하신가요?」 — 동물별 정보 화면 위 안내
   ----------------------------------------------------------
   ⚠️ 기존 정보글 목록을 아래로 많이 밀면 안 됩니다. 한 줄 + 단추 둘,
      그 이상 키우지 마세요.
   ⚠️ 좁은 화면에서는 단추가 아래로 내려갑니다(가로 넘침 금지).
   ========================================================== */
.animal-intro[hidden] { display: none; }
.ai-box {
  display: flex;
  gap: 10px 14px;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  padding: 10px 14px;
  margin-bottom: 10px;
  border: 1px solid var(--line, #d8ded6);
  border-radius: 12px;
  background: var(--card, #fff);
}
.ai-say { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.ai-say b { font-size: 15px; }
.ai-say span { font-size: 13px; opacity: .85; line-height: 1.5; }
.ai-btns { display: flex; gap: 8px; flex-wrap: wrap; }

@media (max-width: 480px) {
  /* ⚠️⚠️ 좁은 화면에서는 **설명 줄을 숨깁니다.** 재 보니 안내가 134px 이라
     정보글 목록이 그만큼 아래로 밀렸어요 — 이 칸은 '가는 길' 이지 읽을
     거리가 아닙니다. 굵은 물음과 단추만 남깁니다.
     ⚠️ 지우는 게 아니라 좁을 때만 접는 것이고, 단추 글자에 이미 어디로
        가는지 적혀 있어서 뜻은 그대로 전해집니다. */
  .ai-box { align-items: stretch; padding: 9px 12px; gap: 8px; }
  .ai-say span { display: none; }
  .ai-say b { font-size: 14px; }
  .ai-btns { width: 100%; }
  .ai-btns .btn { flex: 1 1 auto; text-align: center; }
}

/* 🧭 도감 상세 아래 '다음에 갈 곳' */
.dex-next { margin-top: 14px; display: flex; flex-direction: column; gap: 8px; }
.dex-next-row {
  display: flex; gap: 10px; align-items: center; flex-wrap: wrap;
  padding: 8px 12px;
  border: 1px solid var(--line, #d8ded6);
  border-radius: 10px;
}
.dex-next-row[hidden] { display: none; }
.dex-next-t { font-size: 13px; font-weight: 600; flex: 1 1 auto; min-width: 0; }
@media (max-width: 480px) {
  .dex-next-row { align-items: stretch; }
  .dex-next-row .btn { width: 100%; text-align: center; }
}

/* ==========================================================
   📎 사진 넣개 (관리 화면 — 공지·배너·광고)
   ----------------------------------------------------------
   ⚠️ 누르는 자리라는 걸 **보이게** 합니다. 점선 테두리는 "여기에 넣으세요"
      를 말하는 가장 흔한 신호예요.
   ⚠️ 끌어다 놓는 중(.over)과 올리는 중(.busy)을 다르게 보여 줍니다.
      아무 반응이 없으면 눌린 건지 아닌지를 몰라요.
   ========================================================== */
.imgdrop {
  position: relative; display: block; width: 100%;
  min-height: 92px; padding: 14px;
  border: 2px dashed var(--line); border-radius: 12px;
  background: var(--surface); cursor: pointer;
  transition: border-color .12s, background .12s;
}
.imgdrop:hover,
.imgdrop:focus-visible { border-color: var(--brand); background: var(--chip-bg); }
.imgdrop.over { border-color: var(--brand); background: var(--chip-bg); }
.imgdrop.busy { opacity: .6; pointer-events: none; }
.imgdrop-say { display: flex; flex-direction: column; gap: 4px; align-items: center; justify-content: center;
               min-height: 64px; text-align: center; color: var(--text-muted); }
.imgdrop-say b { color: var(--heading); font-size: 0.9375rem; }
.imgdrop-say small { font-size: 0.75rem; }
/* 사진이 들어오면 안내 글은 비키고 미리보기가 섭니다 */
.imgdrop.has .imgdrop-say { display: none; }
.imgdrop-prev { position: relative; display: flex; align-items: center; justify-content: center; }
.imgdrop-prev img { max-width: 100%; max-height: 180px; border-radius: 8px; display: block; }
.imgdrop-x {
  position: absolute; top: -6px; right: -6px;
  width: 28px; height: 28px; border-radius: 999px; cursor: pointer;
  border: 1px solid var(--line); background: var(--surface); color: var(--text);
  font-size: 0.875rem; line-height: 1;
}
.imgdrop-x:hover { background: var(--chip-bg); color: var(--heading); }
.imgdrop-msg { margin: 6px 0 0; font-size: 0.8125rem; color: var(--text-muted); }
.imgdrop-msg.bad { color: #ef4444; }
/* 주소 직접 넣기 — 접어 둡니다 (쓰는 분이 드물어요) */
.imgdrop-url { margin-top: 8px; }
.imgdrop-url summary { cursor: pointer; font-size: 0.8125rem; color: var(--text-muted); }
.imgdrop-url summary:hover { color: var(--heading); }
.imgdrop-url input { width: 100%; margin-top: 6px; }

/* 👆 손가락으로 쓰는 기기 — 누르는 자리를 넉넉히 */
@media (pointer: coarse) {
  .imgdrop { min-height: 108px; }
  .imgdrop-x { width: 36px; height: 36px; }
}