/* 🖼️ 업체·병원 썸네일 (.lc-ico)
   ----------------------------------------------------------
   ⚠️ 예전에는 이 규칙이 전부 `.list-card .lc-ico` 로 묶여 있었습니다.
      그래서 목록 카드 밖 — 업체 소개창(.sd-head)과 내 업체 화면
      (.ms-head) — 에서는 크기가 아예 없었어요. 로고를 넣어 둔 업체는
      소개창에서 그림이 0×0 으로 찌그러져 아무것도 안 보였습니다.
      (목록에서는 멀쩡히 보여서 더 헷갈렸습니다.)
   ⚠️ 그래서 기본 규칙을 묶음 밖으로 꺼냅니다. 목록 카드는 아래
      `.list-card .lc-ico` 가 그대로 이어받아 예전과 똑같아요.
   ⚠️ object-fit: contain 이라 세로로 긴 로고도 잘리지 않고 들어갑니다. */
.lc-ico {
  width: 56px; height: 56px; border-radius: 14px;
  display: grid; place-items: center; font-size: 1.75rem;
  background: var(--chip-bg); flex-shrink: 0; overflow: hidden;
}
/* 로고를 넣은 곳은 바탕 상자 없이 그림만.
   ⚠️ display 를 grid 에서 block 으로 바꿉니다. grid + place-items:center
      안에서는 그림의 height:100% 가 '칸 높이' 로 안 풀려요 (가운데
      맞춤이라 늘어나지 않으니, 100% 를 잴 기준이 없어 제 원래 높이로
      돌아갑니다). 실제로 64px 칸 안에서 그림이 288px 로 삐져나와
      로고 가운데 토막만 보였습니다.
      block 은 높이가 64px 로 확정돼 있어 100% 가 그대로 64px 입니다. */
.lc-ico.lc-ico-img { background: none; padding: 0; box-shadow: none; display: block; }
.lc-ico-img img { width: 100%; height: 100%; object-fit: contain; display: block; }

/* 소개창·내 업체 화면은 머리글이라 조금 크게 */
.sd-head .lc-ico, .ms-head .lc-ico {
  width: 64px; height: 64px; font-size: 2rem;
}

/* ---------- 병원/업체 리스트 ---------- */
.list-card {
  background: var(--surface); border: 1px solid var(--line); border-radius: var(--radius); padding: 20px 22px;
  display: flex; gap: 18px; align-items: center; transition: box-shadow .15s, border-color .15s;
}
.list-card:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-soft); }

/* 🖱️ 카드 본문을 눌러도 소개가 열립니다 (소개가 있는 업체만).
   ⚠️ 누를 수 있으면 누를 수 있게 보여야 합니다. 손 모양 커서와
      살짝 밝아지는 바탕이 없으면, 되는 줄도 모르고 아무도 안 눌러요.
   ⚠️ 키보드로 옮겨왔을 때의 테두리(focus-visible)를 지우지 않습니다 —
      마우스 없이 쓰는 분은 그 테두리가 유일한 표시입니다. */
.list-card .lc-body[data-cardopen] { cursor: pointer; border-radius: var(--radius-sm); }
.list-card.lc-clickable:hover .lc-body[data-cardopen] { color: inherit; }
.list-card .lc-body[data-cardopen]:focus-visible {
  outline: 2px solid var(--brand); outline-offset: 4px;
}
/* 카드 전체가 살짝 떠오르게 — 어디를 눌러도 되는 칸이라는 신호 */
.list-card.lc-clickable:hover { border-color: var(--brand); }
.list-card .lc-ico {
  width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 1.75rem;
  background: var(--chip-bg); flex-shrink: 0;
}
/* 로고 아이콘: 배경 박스 없이 로고만 (뒤 사각형 제거)
   ⚠️ 여기도 display:block 입니다. grid 로 두면 위와 같은 이유로
      로고가 칸(56px)을 못 채우고 28px 로 쪼그라들었어요. */
.list-card .lc-ico.lc-ico-img,
.list-card.partner .lc-ico.lc-ico-img {
  background: none; padding: 0; box-shadow: none; display: block;
}
.list-card .lc-ico-img img { width: 100%; height: 100%; object-fit: contain; display: block; }
.list-card .lc-body { flex: 1; }
.list-card h3 { font-size: 1.0625rem; color: var(--heading); display: flex; align-items: center; gap: 8px; }
.list-card .addr { font-size: 0.875rem; color: var(--text-muted); margin-top: 3px; }
.list-card .lc-tags { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.list-card h3 { flex-wrap: wrap; }
.list-card .lc-right { text-align: right; flex-shrink: 0; }
.lc-links { display: flex; flex-direction: column; gap: 8px; align-items: stretch; }

/* 🔗 '링크 더 보기' — 두 개만 내놓고 나머지는 접어둡니다.
   ---------------------------------------------------------
   ⚠️ <summary> 는 기본이 list-item 이라 앞에 삼각형이 붙습니다.
      단추처럼 보이게 하려면 그 표식을 지우고 display 를 바꿔야 해요.
      (사파리는 ::-webkit-details-marker 를 따로 지워야 합니다.) */
.link-more { display: block; }
.link-more-sum {
  display: flex; align-items: center; justify-content: center; gap: 6px;
  cursor: pointer; list-style: none;
}
.link-more-sum::-webkit-details-marker { display: none; }
.link-more-sum::after { content: "▾"; font-size: 0.6875rem; line-height: 1; }
.link-more[open] > .link-more-sum::after { content: "▴"; }
.link-more-n {
  min-width: 18px; padding: 1px 6px; border-radius: 999px;
  background: var(--chip-bg); color: var(--chip-text);
  font-size: 0.6875rem; font-weight: 800; line-height: 1.6;
}
.link-more-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }

/* 소개창 안에서는 링크가 가로로 늘어섭니다.
   ⚠️ 접힌 칸이 한 줄을 통째로 차지해야, 펼쳤을 때 아래로 자연스럽게
      깔립니다. 안 그러면 좁은 칸 안에서 링크가 세로로 쌓여요. */
.sd-links .link-more { flex: 1 1 100%; }
.sd-links .link-more-sum { width: -moz-fit-content; width: fit-content; }
.sd-links .link-more-list { flex-direction: row; flex-wrap: wrap; }
.badge-open { font-size: 0.75rem; font-weight: 700; color: var(--brand); background: var(--chip-bg); padding: 4px 10px; border-radius: 999px; }
.badge-spec { font-size: 0.75rem; font-weight: 700; color: var(--accent); background: var(--surface-2); padding: 4px 10px; border-radius: 999px; }

/* ---------- 협력 업체 강조 (골드 테두리 + 가끔 카드 전체를 스윽 휩쓰는 빛) ---------- */
.list-card.partner {
  position: relative; overflow: hidden;
  border: 2px solid #e6b422;
  background: linear-gradient(180deg, rgba(255,215,100,.12), var(--surface));
}
/* 카드 전체를 대각선으로 휩쓰는 골드 빛 — 약 7초에 한 번만 지나감 */
.list-card.partner::after {
  content: ""; position: absolute; top: -60%; left: 0; width: 50%; height: 220%;
  background: linear-gradient(90deg, transparent, rgba(255,241,186,.92), transparent);
  transform: translateX(-160%) rotate(8deg); pointer-events: none;
  animation: partnerSweep 7s ease-in-out infinite;
}
.list-card.partner .lc-ico { background: linear-gradient(135deg, #ffd966, #e6b422); }
.badge-partner {
  position: relative; z-index: 1;
  font-size: 0.75rem; font-weight: 800; color: #5a4300;
  background: linear-gradient(135deg, #ffe08a, #e6b422);
  padding: 4px 11px; border-radius: 999px; letter-spacing: .02em;
  box-shadow: 0 1px 6px rgba(230,180,34,.45);
}
/* 앞 18%(약 1.3초)에만 스윽 지나가고 나머지 시간은 화면 밖에서 대기 → 정신 사납지 않게 */
@keyframes partnerSweep {
  0% { transform: translateX(-160%) rotate(8deg); }
  18% { transform: translateX(340%) rotate(8deg); }
  100% { transform: translateX(340%) rotate(8deg); }
}
@media (prefers-reduced-motion: reduce) {
  .list-card.partner::after { animation: none; }
}

/* ---------- 통합 검색 ---------- */
.search-page-form { display: flex; gap: 10px; margin-top: 16px; }
.search-page-form input {
  flex: 1; padding: 13px 18px; border: 1px solid var(--line); border-radius: 999px;
  font-family: inherit; font-size: 1rem; background: var(--surface); color: var(--text);
}
.search-page-form input:focus { outline: none; border-color: var(--brand); }
.chips-label { font-size: 0.8125rem; font-weight: 800; color: var(--text-muted); margin-right: 4px; align-self: center; }
.search-summary { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 22px; }
.search-count { font-size: 0.9375rem; color: var(--text-muted); margin-bottom: 16px; }
.search-count b { color: var(--brand); }
.search-group { margin-bottom: 28px; }
.search-group-title { font-size: 1rem; color: var(--heading); margin-bottom: 12px; display: flex; align-items: center; gap: 8px; }
.search-group-title span { font-size: 0.8125rem; color: var(--brand); font-weight: 800; }
.search-list { display: flex; flex-direction: column; gap: 8px; }
.search-item {
  display: flex; gap: 14px; align-items: flex-start; padding: 14px 16px;
  background: var(--surface); border: 1px solid var(--line); border-radius: 12px; transition: box-shadow .15s, border-color .15s;
}
.search-item:hover { box-shadow: var(--shadow-sm); border-color: var(--brand-soft); }
.search-item .si-ico { font-size: 1.5rem; flex-shrink: 0; }
.search-item .si-body { min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.search-item .si-section { font-size: 0.75rem; font-weight: 700; color: var(--text-muted); display: flex; align-items: center; gap: 6px; }
.search-item .si-where { background: var(--chip-bg); color: var(--brand); padding: 1px 8px; border-radius: 999px; font-size: 0.6875rem; }
.search-item .si-title { font-size: 1rem; font-weight: 700; color: var(--heading); }
.search-item .si-snippet { font-size: 0.84375rem; color: var(--text-muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.search-more { margin-top: 10px; }
.search-suggest { margin-top: 8px; }
.search-suggest-head { font-size: 0.9375rem; font-weight: 800; color: var(--heading); margin-bottom: 14px; }
.search-tip { font-size: 0.875rem; color: var(--text-muted); text-align: center; }

/* ---------- 안내 페이지 (info) ---------- */
.info-block { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-bottom: 16px; }
.info-block h3 { font-size: 1.0625rem; color: var(--heading); margin-bottom: 14px; }
.info-lead { font-size: 0.9375rem; color: var(--text); line-height: 1.7; }
/* 동그란 번호(①②③)를 직접 그리므로 브라우저 기본 번호(1. 2. 3.)는 끕니다 —
   안 끄면 "1. ①" 처럼 두 번 나와요. */
.info-steps { display: flex; flex-direction: column; gap: 12px; counter-reset: s; list-style: none; }
.info-steps li { font-size: 0.9375rem; color: var(--text); line-height: 1.6; padding-left: 34px; position: relative; }
.info-steps li::before {
  counter-increment: s; content: counter(s); position: absolute; left: 0; top: 0;
  width: 24px; height: 24px; border-radius: 50%; background: var(--brand); color: #fff;
  font-size: 0.8125rem; font-weight: 800; display: grid; place-items: center;
}
.info-list { display: flex; flex-direction: column; gap: 10px; }
.info-list li { font-size: 0.9375rem; color: var(--text); line-height: 1.6; }
.info-list b, .info-steps b { color: var(--heading); }

/* FAQ 아코디언 */
.faq { display: flex; flex-direction: column; gap: 10px; }
.faq details { background: var(--surface); border: 1px solid var(--line); border-radius: 12px; overflow: hidden; }
.faq summary {
  cursor: pointer; padding: 16px 20px; font-size: 0.9375rem; font-weight: 700; color: var(--heading);
  list-style: none; position: relative; padding-right: 44px;
}
.faq summary::-webkit-details-marker { display: none; }
.faq summary::after { content: "＋"; position: absolute; right: 18px; top: 15px; color: var(--brand); font-weight: 800; }
.faq details[open] summary::after { content: "－"; }
.faq details[open] summary { border-bottom: 1px solid var(--line); }
.faq p { padding: 14px 20px 18px; font-size: 0.90625rem; color: var(--text); line-height: 1.7; }

/* 안내 폼 */
.info-form { background: var(--surface); border: 1px solid var(--line); border-radius: 14px; padding: 22px 24px; margin-top: 8px; }
.info-form .btn { margin-top: 4px; }
.info-success { padding: 20px; text-align: center; font-size: 0.9375rem; font-weight: 700; color: var(--brand); }
.info-success span { display: block; margin-top: 6px; font-size: 0.8125rem; font-weight: 500; color: var(--text-muted); }

/* 관리자 접수함 */
.admin-inbox { border: 2px solid var(--brand-soft); }
.inbox-item { border-top: 1px solid var(--line); padding: 12px 0; }
.inbox-item:first-of-type { border-top: none; }
.inbox-head { display: flex; justify-content: space-between; font-size: 0.875rem; margin-bottom: 6px; }
.inbox-head span { color: var(--text-muted); font-size: 0.8125rem; }
.inbox-row { font-size: 0.875rem; color: var(--text); line-height: 1.6; }
.inbox-row span { color: var(--text-muted); font-weight: 700; margin-right: 6px; }

/* ---------- 푸터 ---------- */
/* 푸터 위에 큰 여백 — 스크롤해야 보이도록 (여백은 추후 활용 예정) */
/* ⚠️ 예전에는 clamp(240px, 46vh, 460px) 이었습니다.
      내용이 짧은 화면(저장한 글·검색 결과 없음)에서는
      본문과 푸터 사이가 373px — 폰 화면의 46% 가 통째로 빈칸이라
      "덜 불러졌나?" "제작 중인가?" 싶게 보였어요.
      숨 돌릴 여백은 남기되, 포개지 수준으로 줄입니다. */
.site-footer { background: #16281d; color: #cfe0d5; margin-top: clamp(56px, 8vh, 96px); }
/* 바탕이 어느 테마에서나 어두운 초록이라, 글자색도 밝은 쪽으로 고정합니다.
   (라이트 테마에서 진한 초록 글씨가 얹혀 거의 안 보였어요 — 대비 1.77) */
.site-footer b, .site-footer strong { color: #eaf5ee; }
.site-footer a { color: #a8dcbe; }
.site-footer a:hover { color: #d7f0e2; }
.footer-inner { display: grid; grid-template-columns: 1.4fr 1fr 1fr 1fr; gap: 32px; padding: 52px 0 30px; }
.footer-inner .brand { color: #fff; margin-bottom: 12px; }
.footer-col h4 { color: #fff; font-size: 0.9375rem; margin-bottom: 14px; }
.footer-col a { display: block; font-size: 0.875rem; padding: 5px 0; color: #cfe0d5; }
.footer-col a:hover { color: #fff; }
.footer-about { font-size: 0.875rem; line-height: 1.7; color: #a9c4b4; max-width: 300px; }
.footer-bottom { border-top: 1px solid rgba(255,255,255,.12); padding: 20px 0; text-align: center; font-size: 0.8125rem; color: #8fae9d; }

/* ---------- 반응형 ---------- */
@media (max-width: 900px) {
  .hero-inner { grid-template-columns: 1fr; }
  .hero-art { margin: 0 auto; }
  .cat-grid { grid-template-columns: repeat(2, 1fr); }
  .card-grid { grid-template-columns: repeat(2, 1fr); }
  .footer-inner { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 640px) {
  /* 헤더 상단: 좁으면 줄바꿈 허용 */
  .nav { height: auto; min-height: 60px; padding: 8px 0; flex-wrap: wrap; gap: 10px; }
  .header-right { gap: 8px; }
  .brand-title { font-size: 1rem; }
  .auth-link { font-size: 0.875rem; }
  .icon-btn { width: 34px; height: 34px; }
  /* 👆 손끝이 닿을 자리를 44px 로 넓힙니다 — **보이는 크기는 그대로.**
     ⚠️ 실측에서 폰(390px)의 ⚙️ 는 30×30 이었습니다. 손가락 끝은 그보다
        넓어서, 옆을 짚으면 안 눌리거나 옆 단추가 눌립니다.
     ⚠️ width/height 를 키우지 않는 까닭: 머리띠 한 줄에 단추가 여럿이라
        진짜로 키우면 줄이 넘치거나 줄바꿈이 생겨요. 눈에 안 보이는
        넷(::after)만 깔아 누를 자리를 넓힙니다 — 컨텍스트 바의
        「전체 누리 보기」 에 이미 쓰고 있는 방법입니다. */
  .icon-btn { position: relative; }
  .icon-btn::after {
    content: ""; position: absolute;
    /* ⚠️⚠️ **세로로만** 넓힙니다. 처음에 44×44 정사각형으로 깔았더니,
       머리띠에 나란히 선 단추들의 넷이 **서로를 덮어** ⚙️ 한가운데를
       눌러도 옆 단추가 잡혔습니다(elementFromPoint 로 확인). 가로로 붙어
       있는 것들은 가로를 넓히면 안 돼요 — 제 폭만 씁니다. */
    left: 0; right: 0; top: 50%; height: 44px;
    transform: translateY(-50%);
  }
  /* 동물 고르개 알약도 같은 까닭으로 (실측 30px 높이) */
  .an-inline .an-trigger { position: relative; }
  .an-inline .an-trigger::after {
    content: ""; position: absolute;
    left: 0; right: 0; top: 50%; height: 44px; transform: translateY(-50%);
  }
  .cat-bar-inner a.cat-shops { margin-left: 0; }  /* 스크롤 바에서 자연스럽게 이어지도록 */
  .cat-grid, .card-grid, .steps { grid-template-columns: 1fr; }
  .steps .step-card:not(:last-child)::after { content: "↓"; right: 50%; top: auto; bottom: -14px; transform: translateX(50%); }
  .footer-inner { grid-template-columns: 1fr; }
  .band { padding: 32px 22px; }
  /* 🏪 업체·병원 카드 — 좁은 화면에서는 단추를 아랫줄로 내립니다.
     ---------------------------------------------------------
     ⚠️ 예전에는 flex-wrap 만 걸어 두었습니다. 그런데 한 줄에
        [아이콘][본문][소개 보기·링크 보기] 셋이 다 들어가려 하고,
        한글은 글자 어디서나 줄이 바뀌기 때문에 본문이 줄바꿈 대신
        폭 100px 짜리 기둥으로 찌부러졌어요. "프랜쥬는 / 2017년 /
        오픈한 / 포항 지역" 처럼 두세 글자씩 끊겨 나왔습니다.
     ⚠️ 고치는 열쇠는 두 가지입니다.
        ① 본문에 '아이콘 뺀 나머지 전부' 를 주어 한 줄을 채우게 하고
        ② 단추 칸(.lc-right)을 100% 로 만들어 아랫줄로 내립니다.
        min-width:0 도 함께 둡니다 — flex 칸은 기본이 min-width:auto 라
        내용보다 좁아지길 거부해서, 긴 이름 하나가 칸을 밀어냅니다. */
  .list-card {
    flex-wrap: wrap;
    gap: 12px;
    padding: 16px 16px 14px;
    align-items: flex-start;
  }
  .list-card .lc-ico { width: 48px; height: 48px; font-size: 1.5rem; }
  /* 48px 아이콘 + 12px 사이 = 60px 를 뺀 나머지 전부 */
  .list-card .lc-body { flex: 1 1 calc(100% - 60px); min-width: 0; }
  .list-card .lc-right { flex: 1 1 100%; min-width: 0; text-align: left; }
  /* 단추는 아랫줄에서 나란히 (세로로 쌓으면 카드가 또 길어집니다) */
  .lc-links { flex-direction: row; flex-wrap: wrap; gap: 8px; }
  .lc-links > * { flex: 1 1 auto; }
  .hero-stats { flex-wrap: wrap; gap: 20px; }
  .br-pc { display: none; }   /* 모바일에선 강제 줄바꿈 해제 → 자연스럽게 흐름 */
}

/* =========================================================
   글꼴 마무리 — 본문은 고운돋움(가벼움), 제목·브랜드는 Jua(귀여움)
   · Jua 는 획이 굵고 붙어 있어 본문에 쓰면 '들·랄·릴' 같은 글자가
     한 덩어리로 뭉쳐 보여요. 그래서 본문만 고운돋움으로 바꿨습니다.
   · Jua 를 남긴 곳에도 자간을 살짝 벌려 뭉침을 덜어냈어요.
   파일 끝에 두어 기본값을 덮어씀
   ========================================================= */
body {
  font-size: 1.125rem;
  font-weight: 400;      /* Jua 는 400 하나뿐 — 다른 값은 가짜 굵게가 됨 */
  letter-spacing: .03em; /* 글자 사이를 벌려 획이 붙어 보이지 않게 */
  line-height: 1.8;      /* 줄 간격도 넉넉히 */
  word-spacing: .02em;
}
/* 사이트 전체 굵기를 400 으로 고정 — Jua 에 없는 굵기를 요청하지 않도록 */
body, p, li, td, th, span, div, a, button, input, textarea, select, label,
h1, h2, h3, h4, h5, h6, b, strong, small { font-weight: 400; }
/* 굵게 표시하던 곳은 굵기 대신 '색'으로 강조 (Jua 는 굵은 서체가 없어서) */
b, strong { color: var(--heading); }
/* 가짜 굵게 금지 — 폰트에 없는 굵기를 브라우저가 억지로 만들지 않게 합니다.
   이게 '들·랄·릴' 같은 글자가 뭉쳐 보이던 진짜 원인이었어요. */
* { font-synthesis-weight: none; -webkit-font-synthesis: none; font-synthesis: none; }
/* Jua(굵기 400 하나뿐)를 쓰는 곳은 굵기를 400 으로 고정 */
.brand-title, .intro-title, .intro-sub, .intro-hint,
.hero h1, .section-head h2, .how-card-head, .cat-card h3,
.feed-head h2 { font-weight: 400 !important; }
/* ---------- 제목은 전부 귀여운 Jua ----------
   본문은 읽기 편한 Gothic A1, 제목·브랜드는 Jua 로 누리다움을 유지해요.
   (전에는 홈 제목만 Jua 라서 분류·커뮤니티 페이지 제목이 밋밋했습니다) */
h1, h2, h3, h4, h5,
.brand-title, .intro-title, .intro-sub, .intro-hint,
.page-hero h1, .hero h1, .section-head h2, .how-card-head, .cat-card h3,
.feed-head h2, .at-label, .article-title, .cmt-title, .info-block h3,
.footer-col h4, .band h2, .adm-table th {
  font-family: var(--font-cute);
  font-weight: 400;          /* Jua 는 굵기가 400 하나뿐 — 가짜 굵게 방지 */
  letter-spacing: .03em;     /* 자간을 벌려 획이 뭉치지 않게 */
  line-height: 1.42;
}
/* 큰 제목일수록 자간을 조금 더 — 글자가 클수록 뭉쳐 보이기 쉬워요 */
.page-hero h1, .hero h1, .section-head h2 { letter-spacing: .045em; }
/* 제목 안의 굵은 글씨도 Jua 를 그대로 (가짜 굵게 금지) */
h1 b, h2 b, h3 b, .page-hero h1 b { font-weight: 400; }

/* 상단 메뉴·탭·서랍도 Jua — 사이트를 둘러볼 때 계속 보이는 부분이라
   여기가 밋밋하면 누리다움이 확 죽어요. */
.cat-bar-inner a, .drawer-link, .drawer-label,
.animal-tab .at-label, .brand-sub, .board-trigger, .board-item {
  font-family: var(--font-cute);
  font-weight: 400 !important;
  letter-spacing: .02em;
}
.brand-title { font-size: 1.4375rem; }
.brand-sub { font-size: 0.875rem; }
.nav-links a, .cat-bar-inner a, .cat-bar-inner .species-trigger { font-size: 1.09375rem; }
.btn { font-size: 1.09375rem; }
.btn-sm { font-size: 1rem; }
.auth-link { font-size: 1.09375rem; }
.hero h1 { font-size: clamp(2.125rem, 5.4vw, 3.625rem); }
.hero .lead { font-size: 1.4375rem; }
.section-head h2 { font-size: clamp(1.875rem, 4vw, 2.625rem); }
.section-head p { font-size: 1.25rem; }
.cat-card .ico { font-size: 3.125rem; }
.cat-card h3 { font-size: 1.375rem; }
.cat-card p { font-size: 1.03125rem; }
.cat-card .count { font-size: 0.9375rem; }
.card h3 { font-size: 1.25rem; }
.card p { font-size: 1.03125rem; }
.card .meta { font-size: 0.9375rem; }
.animal-tab .at-label { font-size: 1.1875rem; }
.quick-card .qc-title { font-size: 1.25rem; }
.how-card-head { font-size: 1.3125rem; }
.how-steps li { font-size: 1.0625rem; }
.page-hero h1 { font-size: clamp(2rem, 5vw, 3rem); }
.page-hero p { font-size: 1.21875rem; }
.chip { font-size: 1.03125rem; }
.board-trigger { font-size: 1.125rem; }
.board-item { font-size: 1.09375rem; }
.post-item .ptitle { font-size: 1.1875rem; }
.post-item .pmeta { font-size: 0.9375rem; }
.post-item .pcomments strong { font-size: 1.25rem; }
.article-title { font-size: clamp(1.75rem, 4vw, 2.375rem); }
.article-author { font-size: 1.125rem; }
.article-sub { font-size: 0.9375rem; }
.detail-para, .detail-text { font-size: 1.21875rem; line-height: 1.95; }
.editor-body { font-size: 1.1875rem; }
.write-title { font-size: 1.6875rem; }
.cmt-title { font-size: 1.1875rem; }
.cmt-head strong { font-size: 1.03125rem; }
.cmt-text { font-size: 1.03125rem; }
.pv-title { font-size: 1.03125rem; }
.pv-meta { font-size: 0.875rem; }
.preview-panel .pv-head h3 { font-size: 1.1875rem; }
.search-item .si-title { font-size: 1.1875rem; }
.search-item .si-snippet { font-size: 0.9375rem; }
.search-page-form input { font-size: 1.125rem; }
.info-block h3 { font-size: 1.3125rem; }
.info-lead, .info-list li { font-size: 1.125rem; }
.info-steps li { font-size: 1.125rem; }
.faq summary { font-size: 1.125rem; }
.faq p { font-size: 1.0625rem; }
.field label { font-size: 1.03125rem; }
.field input, .field textarea, .field select { font-size: 1.09375rem; }
.list-card h3 { font-size: 1.25rem; }
.list-card .addr { font-size: 1.03125rem; }
.badge-spec, .badge-partner, .badge-open { font-size: 0.8125rem; }
.footer-col h4 { font-size: 1.0625rem; }
.footer-col a { font-size: 1rem; }
.footer-about { font-size: 1rem; }
.demo-banner p { font-size: 1.03125rem; }
.empty-state { font-size: 1.0625rem; }
.modal h3 { font-size: 1.4375rem; }

/* ===== 역할 뱃지 (작성자 이름 옆) ===== */
.role-badge {
  display: inline-block; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px; margin-left: 4px;
  letter-spacing: .2px; white-space: nowrap;
}
/* ===== 역할 뱃지 광택 =====
   모든 역할이 '자기 색'으로 빛이 스윽 지나갑니다.
   관리자는 검은색이니 광택도 검은빛(더 짙은 그림자가 훑고 지나가는 느낌)이에요. */
.role-badge { position: relative; overflow: hidden; }
.role-badge::after {
  content: ""; position: absolute; inset: 0;
  transform: translateX(-120%);
  animation: badgeShine 4s ease-in-out infinite;
  pointer-events: none;
}
@keyframes badgeShine {
  0%, 62% { transform: translateX(-120%); }
  82%, 100% { transform: translateX(120%); }
}
/* 역할마다 시작 시점을 조금씩 어긋나게 — 여러 개가 나란히 있을 때 더 자연스러워요 */
.role-manager::after    { animation-delay: .3s; }
.role-submanager::after { animation-delay: .6s; }
.role-staff::after      { animation-delay: .9s; }
.role-partner::after    { animation-delay: 1.2s; }

/* 👑 관리자 — 검정. 광택도 '검은빛'이 훑고 지나갑니다 */
.role-admin {
  background: linear-gradient(135deg, #232b3a, #39445c 52%, #232b3a);
  color: #f3f5f9;
  border: 1px solid rgba(255, 255, 255, .22);
  box-shadow: 0 2px 8px rgba(0, 0, 0, .38);
}
.role-admin::after {
  background: linear-gradient(105deg,
    transparent 30%, rgba(0, 0, 0, .18) 42%,
    rgba(0, 0, 0, .72) 50%,
    rgba(0, 0, 0, .18) 58%, transparent 70%);
}

/* 관리자 오라 - '잔혹한 천사' 가 흰빛이라면 이쪽은 검은빛입니다.
   순수한 검정만 쓰면 어두운 테마에서 안 보여서,
   아주 옅은 보랏빛을 섞은 검정으로 테두리를 함께 둡니다. */
/* 관리자 — 같은 방식의 검은 연기 */
@media (prefers-reduced-motion: reduce) {
  .role-admin {
    animation: none;
    box-shadow: 0 0 0 2px rgba(0, 0, 0, .7), 0 0 12px rgba(30, 22, 52, .8);
  }
}

/* ==========================================================
   🔴 운영진 — 루비 3단계
   ----------------------------------------------------------
   같은 붉은 계열이지만 짙기로 위아래를 나눕니다.
     · 운영자    짙은 루비   (가장 진함)
     · 부운영자  보통 빨강
     · 스텝      옅은 빨강   (가장 옅음)
   색이 같은 갈래라 "저 사람들은 다 운영진이구나" 가 한눈에 보이고,
   짙기가 달라 누가 위인지도 함께 보입니다.

   셋 모두 루비빛이 은은하게 돕니다 (누리의 전설이 금빛으로 도는 것처럼).
   ⚠️ 짙기마다 글씨 색을 따로 잡았어요. 짙은 바탕엔 밝은 글씨,
      옅은 바탕엔 진한 글씨 — 안 그러면 옅은 빨강 위 흰 글씨가 안 읽힙니다.
   ⚠️ 전체 공지도 붉은빛이지만 그건 '글 줄 전체' 에 도는 빛이고
      이건 이름 옆 작은 알약이라 헷갈리지 않아요.
   ========================================================== */

/* 루비빛이 은은하게 도는 숨결 — 셋이 함께 씁니다 */
@keyframes ruby-aura {
  0%, 100% { box-shadow: 0 1px 4px rgba(136, 19, 55, .35), 0 0 5px rgba(225, 29, 72, .30); }
  50%      { box-shadow: 0 1px 6px rgba(136, 19, 55, .55), 0 0 15px rgba(244, 63, 94, .70); }
}
.role-manager, .role-submanager, .role-staff {
  animation: ruby-aura 3s ease-in-out infinite;
}

/* 운영자 — 짙은 루비 (대비 11.6) */
.role-manager {
  background: linear-gradient(135deg, #8c1228, #5c0a18 55%, #7a1024);
  color: #ffe4e6;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .35);
}
.role-manager::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 190, 200, .35) 42%,
    rgba(255, 225, 232, .92) 50%, rgba(255, 190, 200, .35) 58%, transparent 70%);
}

/* 부운영자 — 보통 빨강 (대비 5.9) */
.role-submanager {
  background: linear-gradient(135deg, #c92438, #b91c2c 60%, #bf2033);
  color: #fff1f2;
  text-shadow: 0 1px 0 rgba(0, 0, 0, .28);
}
.role-submanager::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 205, 212, .38) 42%,
    rgba(255, 235, 240, .95) 50%, rgba(255, 205, 212, .38) 58%, transparent 70%);
}

/* 스텝 — 옅은 빨강 (대비 8.2 · 바탕이 밝아 글씨를 진하게) */
.role-staff {
  background: linear-gradient(135deg, #fecdd3, #fca5a5 55%, #f89b9b);
  color: #4c0519;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .40);
}
.role-staff::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 235, 238, .5) 42%,
    rgba(255, 250, 251, .98) 50%, rgba(255, 235, 238, .5) 58%, transparent 70%);
}

/* 협력업체 — 황금.
   이제 '누리의 전설' 처럼 금이 흐르고 금빛이 은은하게 돕니다.
   운영진이 루비로 묶였으니, 협력업체는 금으로 확실히 갈라져요. */
@keyframes gold-aura {
  0%, 100% { box-shadow: 0 1px 5px rgba(201, 151, 31, .45), 0 0 5px rgba(240, 201, 74, .35); }
  50%      { box-shadow: 0 1px 7px rgba(201, 151, 31, .65), 0 0 16px rgba(255, 213, 100, .80); }
}
.role-partner {
  background: linear-gradient(100deg,
    #c9971f 0%, #f0c14b 18%, #fdf0c0 30%, #f0c14b 42%,
    #c9971f 58%, #f0c14b 74%, #fdf0c0 86%, #c9971f 100%);
  background-size: 300% 100%;
  color: #4a3200;
  text-shadow: 0 1px 0 rgba(255, 255, 255, .45);
  animation: legend-flow 6s linear infinite, gold-aura 3s ease-in-out infinite;
}
.role-partner::after {
  background: linear-gradient(105deg, transparent 30%, rgba(255, 245, 205, .5) 42%,
    rgba(255, 253, 235, .98) 50%, rgba(255, 245, 205, .5) 58%, transparent 70%);
}

/* 등급 뱃지에는 광택을 넣지 않아요 (일반 회원까지 반짝이면 산만해져요) */
.level-badge::after { content: none; }

/* 움직임을 줄여달라고 설정한 분에게는 광택과 숨결을 멈춥니다 (색은 그대로) */
@media (prefers-reduced-motion: reduce) {
  .role-badge::after { animation: none; opacity: .18; transform: none; }
  .role-manager, .role-submanager, .role-staff, .role-partner { animation: none; }
}

/* 운영자 + 협력업체 겸직 → 루비/황금 반반 단일 뱃지 (예: 소라게 사장님) */
.role-combo-mp {
  background: linear-gradient(90deg, #5c0a18 0 50%, #e6b422 50% 100%);
  color: #fff; text-shadow: 0 1px 2px rgba(0, 0, 0, .5);
  box-shadow: 0 1px 4px rgba(120, 80, 30, .4);
}

/* 운영진 관리 — 역할 체크박스 / 목록 행 */
.role-checks { display: flex; flex-wrap: wrap; gap: .5rem .9rem; padding: .2rem 0; }
.role-check { display: inline-flex; align-items: center; gap: .35rem; font-size: 1rem; cursor: pointer; }
.role-check input { width: 18px; height: 18px; }
.staff-row:hover { background: rgba(0, 0, 0, .04); }

/* ===== 에디터 확장: 스티커 · 표 · 동영상 · 투표 ===== */
.sticker-pad {
  display: flex; flex-wrap: wrap; gap: 4px;
  padding: 10px; margin: 6px 0 10px;
  border: 1.5px solid var(--border, #ddd); border-radius: 12px; background: var(--surface-2);
  max-height: 190px; overflow-y: auto;
}
.sticker {
  font-size: 1.5rem; line-height: 1; padding: 6px 7px; border: none; border-radius: 9px;
  background: transparent; cursor: pointer;
}
.sticker:hover { background: rgba(0, 0, 0, .08); transform: scale(1.15); }
.sticker-in { font-size: 1.875rem; line-height: 1.2; }

/* 본문 속 표 · 유튜브 */
.editor-body table, .detail-content table, .post-table {
  border-collapse: collapse; width: 100%; margin: 12px 0; font-size: 1rem;
}
.editor-body th, .editor-body td, .detail-content th, .detail-content td {
  border: 1px solid var(--border, #ccc); padding: 8px 10px; text-align: left;
}
.editor-body th, .detail-content th { background: var(--surface-2); font-weight: 700; }
.editor-body iframe, .detail-content iframe {
  max-width: 100%; aspect-ratio: 16 / 9; height: auto; width: 560px; border: 0; border-radius: 12px; margin: 10px 0;
}

/* 투표 만들기 (글쓰기) */
.poll-builder {
  border: 2px dashed var(--brand); border-radius: 12px;
  padding: 14px 16px; margin: 6px 0 12px; background: var(--surface-2);
}
.poll-builder-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.poll-builder input[type="text"] {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit; font-size: 1rem; font-family: inherit;
}
.poll-opt-row { display: flex; gap: 6px; margin-bottom: 6px; }
.poll-note { font-size: 0.84375rem; color: var(--text-muted); margin: 10px 0 0; }

/* 투표 보기 (글 상세) */
.poll-box {
  border: 2px solid var(--brand); border-radius: 14px;
  padding: 16px 18px; margin: 18px 0; background: var(--surface-2);
}
.poll-q { font-size: 1.1875rem; font-weight: 700; margin-bottom: 12px; }
.poll-list { display: flex; flex-direction: column; gap: 8px; }
.poll-choice {
  position: relative; overflow: hidden; display: flex; align-items: center; justify-content: space-between;
  gap: 10px; width: 100%; text-align: left; cursor: pointer;
  padding: 11px 14px; border-radius: 10px; font-size: 1rem; font-family: inherit;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit;
}
.poll-choice:hover:not(:disabled) { border-color: var(--brand); }
.poll-choice:disabled { opacity: .7; cursor: default; }
.poll-choice.mine { border-color: var(--brand); border-width: 2px; font-weight: 700; }
.poll-bar {
  position: absolute; left: 0; top: 0; bottom: 0; z-index: 0;
  background: rgba(31, 138, 84, .18); transition: width .4s ease;
}
.poll-label, .poll-pct { position: relative; z-index: 1; }
.poll-pct { font-size: 0.875rem; color: var(--text-muted); white-space: nowrap; }
.poll-foot { margin-top: 10px; font-size: 0.84375rem; color: var(--text-muted); }

/* ===== 관리 탭 (admin.html) ===== */
.admin-link { font-weight: 800; color: #b91c1c !important; }
.admin-panel { background: var(--surface); border: 1.5px solid var(--border, #ddd); border-radius: 14px; padding: 18px 20px; }
.admin-panel h3 { margin: 0 0 6px; }
.adm-count { color: var(--brand); font-weight: 800; }
.adm-table-wrap { overflow-x: auto; margin-top: 14px; }
.adm-table { width: 100%; border-collapse: collapse; font-size: 0.9375rem; white-space: nowrap; }
.adm-table th, .adm-table td {
  padding: 9px 10px; text-align: left; vertical-align: middle;
  border-bottom: 1px solid var(--line);
  /* 등급 칸에 선택 상자가 없는 줄(관리자)만 조금 낮아 보여서 최소 키를 맞춥니다.
     td 의 height 는 '최소'처럼 동작해서, 내용이 크면 알아서 늘어나요. */
  height: 31px;
}
.adm-table th { font-size: 0.84375rem; color: var(--text-muted); font-weight: 700; }
/* 어두운 테마에서는 검은색을 얹어봐야 티가 안 나요 */
.adm-table tr:hover td { background: var(--chip-bg); }
.adm-email { color: var(--text-muted); font-size: 0.875rem; }
/* 관리 칸의 버튼들.
   예전에는 flex-wrap: wrap 이라 칸이 조금만 좁아도 버튼이 아래로 내려갔어요.
   그 바람에 버튼이 2개인 줄만 키가 커져서 표가 들쭉날쭉했습니다.
   표 자체가 좌우로 스크롤되니(.adm-table-wrap), 버튼은 한 줄로 둡니다. */
/* ⚠️ 이 칸은 <td> 입니다. display:flex 를 걸면 표 셀에서 빠져나가서
   그 줄만 높이·기준선이 어긋나 표가 통째로 틀어져 보였어요.
   셀은 셀로 두고, 안의 버튼만 한 줄로 늘어놓습니다. */
.adm-actions { white-space: nowrap; }
.adm-actions > * { vertical-align: middle; margin-right: 6px; }
.adm-actions > :last-child { margin-right: 0; }
.adm-banned td { opacity: .55; background: rgba(239, 68, 68, .08); }
.adm-shield {
  font-size: 0.8125rem; font-weight: 700; color: #b91c1c;
  display: inline-flex; align-items: center; gap: 4px; height: 26px;
}
/* 어두운 바탕에서는 진한 빨강이 거의 안 보여서 밝은 쪽으로 */
:root[data-theme="dark"] .adm-shield,
:root[data-theme="unit02"] .adm-shield { color: #ff9b8a; }
.adm-search { display: flex; gap: 8px; margin: 12px 0; flex-wrap: wrap; }
.adm-search input {
  flex: 1; min-width: 200px; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit; font-size: 1rem;
}
.adm-level { padding: 5px 8px; border-radius: 8px; border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit; font-size: 0.875rem; }

/* 관리자 가입 코드 (접힘) */
.admin-code-box { margin: 6px 0 10px; font-size: 0.875rem; }
.admin-code-box summary { cursor: pointer; color: var(--text-muted); }
.admin-code-box input {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit; font-size: 1rem;
}

/* ===== 개인정보 동의 (회원가입) ===== */
.consent-box {
  border: 1.5px solid var(--border, #ccc); border-radius: 10px;
  padding: 12px 14px; margin: 4px 0 14px; background: var(--surface-2);
}
.consent-row { display: flex; align-items: flex-start; gap: 8px; cursor: pointer; font-size: 1rem; }
.consent-row input { width: 18px; height: 18px; margin-top: 2px; flex: none; }
.consent-note { margin: 8px 0 0; font-size: 0.84375rem; line-height: 1.6; color: var(--text-muted); }

/* ===== 회원 탈퇴 (위험 구역) ===== */
.danger-zone { border: 2px solid #ef4444; border-radius: 12px; padding: 16px 18px; background: rgba(239, 68, 68, .06); }
.danger-zone h3 { color: #b91c1c; }
.danger-zone input[type="password"] {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface); color: inherit; font-size: 1rem;
}
.btn-danger { background: #dc2626; color: #fff; border: none; }
.btn-danger:hover { background: #b91c1c; }
.btn-danger:disabled { opacity: .6; }

/* ===== 관리자: 업체 입점 관리 폼 ===== */
.shop-form {
  border: 2px dashed var(--brand); border-radius: 14px;
  padding: 18px 20px; margin-bottom: 18px; background: var(--surface);
}
.shop-form h3 { margin: 0 0 12px; }
.shop-form .field { margin-bottom: 10px; }
.shop-form input[type="text"], .shop-form textarea {
  width: 100%; padding: 9px 11px; border-radius: 9px;
  border: 1.5px solid var(--border, #ccc); background: var(--surface-2); color: inherit;
  font-family: inherit; font-size: 1rem;
}
.shop-form textarea { min-height: 68px; resize: vertical; }
.shop-adm-btns { display: flex; gap: 6px; margin-top: 8px; }

/* ===== 등급(레벨) 뱃지 — 일반 회원 (1등급=최고 … 6등급=신입) ===== */
.level-badge {
  display: inline-block; vertical-align: middle;
  font-size: 0.6875rem; font-weight: 800; line-height: 1;
  padding: 3px 7px; border-radius: 999px; margin-left: 4px; white-space: nowrap;
}

/* 📰 소식 관리 — 기존 .adm-table 에 얹는 것들 */
.adm-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }
.adm-head h2 { font-size: 1.125rem; font-weight: 800; color: var(--heading); margin: 0; }
.adm-sub { font-size: 0.875rem; color: var(--text-muted); margin: 6px 0 0; line-height: 1.6; }
.adm-dim { font-size: 0.8125rem; color: var(--text-muted); }
.adm-acts { display: flex; gap: 6px; }
.adm-state {
  display: inline-block; padding: 3px 9px; border-radius: 999px;
  font-size: 0.75rem; font-weight: 800;
  background: var(--chip-bg); color: var(--text-muted);
}
.adm-public { background: #e6f4ec; color: #1f7a52; }
.adm-draft  { background: #fdf0e6; color: #a35a17; }
:root[data-theme="dark"] .adm-public { background: #16301f; color: #86e0b2; }
:root[data-theme="dark"] .adm-draft  { background: #33240f; color: #f0bb7f; }

/* 🏪 "어떤 업체와 연결할까요?" — 기존 모달을 그대로 씁니다 */
.shop-pick { max-width: 460px; }
.shop-pick h3 { font-size: 1.0625rem; font-weight: 800; color: var(--heading); margin: 0 0 8px; }
.shop-pick-list { max-height: 320px; overflow-y: auto; margin: 10px 0; }
.shop-pick-row {
  display: flex; align-items: center; justify-content: space-between; gap: 10px;
  width: 100%; padding: 12px 14px; margin-bottom: 6px; cursor: pointer;
  border: 1px solid var(--line); border-radius: var(--radius-sm);
  background: var(--surface); color: var(--text);
  font-family: inherit; font-size: 0.9375rem; text-align: left;
}
.shop-pick-row:hover { border-color: var(--brand); }
.shop-pick-nm { font-weight: 700; }
/* 이미 맡은 분이 있으면 눈에 띄게 — 모르고 빼앗으면 안 되니까요 */
.shop-pick-warn {
  flex: 0 0 auto; font-size: 0.75rem; font-weight: 700;
  padding: 3px 8px; border-radius: 999px;
  background: #fdf0e6; color: #a35a17;
}
:root[data-theme="dark"] .shop-pick-warn { background: #33240f; color: #f0bb7f; }

/* 칭호 표에서 맡고 있는 업체 */
.adm-t-shop { font-size: 0.75rem; color: var(--text-muted); margin-top: 4px; }

/* 🏪 업체 관리자 칭호 — 지정으로만 받는 칭호라 차분한 색으로 */
.title-shopadmin { background: #2f4858; color: #e6eef4; border-color: #5b7b91; }

/* ✏️ 고치기 전 ↔ 지금 나란히 보기 */
.edit-see { max-width: 620px; max-height: 78vh; overflow-y: auto; position: relative; }
.edit-see h3 { font-size: 1.0625rem; font-weight: 800; color: var(--heading); margin: 0 0 14px; }
.edit-now, .edit-old {
  padding: 14px; border-radius: var(--radius); margin-bottom: 10px;
  border: 1px solid var(--line);
}
.edit-now { background: var(--surface); border-color: var(--brand-soft); }
/* 고치기 전은 한눈에 구분되게 살짝 눌러 둡니다 */
.edit-old { background: var(--chip-bg); }
.edit-see h4 {
  font-size: 0.8125rem; font-weight: 800; color: var(--text-muted);
  margin: 0 0 6px; display: flex; justify-content: space-between; gap: 8px; flex-wrap: wrap;
}
.edit-see h4 span { font-weight: 500; }
.edit-see b { display: block; font-size: 0.9375rem; color: var(--heading); margin-bottom: 6px; }
.edit-see p { font-size: 0.875rem; line-height: 1.7; color: var(--text); margin: 0; }

/* =========================================================
   🏪🏥 업체 관계자 · 병원 관계자 뱃지
   ---------------------------------------------------------
   운영진(붉은 계열)과 색을 나눕니다. 하는 일이 다르니까요 —
   운영진은 누리 전체를 돌보고, 관계자는 맡은 한 곳만 돌봅니다.
   ⚠️ 루비 오라(운영진 표시)는 주지 않습니다. 그 빛은 '운영진' 이라는
      뜻이라, 같이 반짝이면 두 자리가 헷갈립니다.
   ⚠️ 글자 대비는 두 뱃지 모두 밝은 바탕에 진한 글씨로 잡았습니다.
   ========================================================= */
.role-shopstaff {
  background: linear-gradient(135deg, #cfe8dc, #a7d7c0 55%, #93cdb2);
  color: #10361f;                      /* 대비 8.9 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .40);
}
.role-hospstaff {
  background: linear-gradient(135deg, #cfe0f7, #a9c8ef 55%, #94bbe9);
  color: #10294c;                      /* 대비 8.6 */
  text-shadow: 0 1px 0 rgba(255, 255, 255, .40);
}

/* 관리 화면 — 직책 안내 목록 */
.adm-roles-help {
  margin: 0 0 16px; padding: 12px 16px 12px 32px;
  background: var(--surface-2); border: 1px solid var(--line); border-radius: var(--radius-sm);
  font-size: 0.875rem; color: var(--text); line-height: 1.9;
}
.adm-roles-help b { color: var(--heading); font-weight: 800; }

/* 📋 허브 게시판 — 소동물을 안 골라도 게시판별로 봅니다.
   단추 하나로 접어 두고, 누르면 그 아래로 쭉 늘어섭니다. */
.hub-boards { margin: 0 0 18px; }
.hub-boards .hub-filter-toggle { margin-bottom: 0; }
/* 펼쳐졌을 때만 단추와 목록 사이를 띄웁니다 */
.hub-boards .filterbar:not([hidden]) { margin-top: 10px; }
/* 📋 게시판 고르기 — 가로·세로로 꽉 채운 격자.
   ---------------------------------------------------------
   ⚠️ 세 번 고쳤습니다. 어디로 가도 잃는 게 있었어요 —
        가로 한 줄  → 좁은 화면에서 뒤쪽 게시판이 밀려 안 보였습니다
        세로 한 줄  → 아홉 개면 목록이 화면 밖으로 밀려났습니다
      그래서 '한 줄' 을 버리고 격자로 채웁니다. 폭이 남으면 옆으로,
      모자라면 아래로 접혀서 차지하는 자리가 가장 작아집니다.
   ⚠️ auto-fill 이라 게시판이 몇 개든 알아서 칸을 나눕니다.
      개수를 손으로 적어 두면 게시판을 더하는 날 어긋나요. */
.hub-boards .filterbar {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(150px, 1fr));
  gap: 4px; align-items: stretch;
  flex-wrap: initial; overflow: visible;
}
/* 칩 하나 — 이름은 왼쪽, 개수는 오른쪽 끝.
   ⚠️ .chip 이 inline 계열이면 margin-left:auto 가 안 먹습니다.
      칩 자체를 flex 로 만들어야 '오른쪽 끝' 이 생겨요.
   ⚠️ 이름이 길면 줄이 늘어나 칸 높이가 들쭉날쭉해집니다. 말줄임으로. */
.hub-boards .filterbar .chip {
  display: flex; align-items: center; gap: 6px;
  width: 100%; min-width: 0; justify-content: flex-start;
  border-radius: 10px; text-align: left;
  padding: 6px 10px; white-space: nowrap;
}
.hub-boards .filterbar .chip > :first-child {
  min-width: 0; overflow: hidden; text-overflow: ellipsis;
}
.hub-boards .filterbar .hub-b-n { margin-left: auto; flex: 0 0 auto; }
/* 게시판을 골라 둔 상태 — 접혀 있어도 '거르는 중' 인 걸 알 수 있게 */
.hub-filter-toggle.picked { border-color: var(--brand); color: var(--brand); }
.hub-b-n {
  display: inline-block; min-width: 16px; margin-left: 5px;
  padding: 0 5px; border-radius: 999px;
  background: rgba(0, 0, 0, .10); color: inherit;
  font-size: 0.6875rem; font-weight: 800; line-height: 1.7;
}
/* 고른 칩 안에서는 바탕이 진해서, 숫자 배경을 밝은 쪽으로 뒤집습니다 */
.chip.active .hub-b-n { background: rgba(255, 255, 255, .28); }
@media (max-width: 700px) {
  /* 📱 휴대폰에서도 격자 — 두 칸씩 들어갑니다.
     ⚠️ 세로 한 줄로 두면 게시판 아홉 개가 화면을 다 먹고 정작 글
        목록은 스크롤을 한참 내려야 나왔습니다.
     ⚠️ 옆으로 밀게 두는 것도 안 됩니다 — 뒤쪽 게시판이 있는 줄도
        모르고 지나치니까요. 두 칸씩 접는 게 가장 작습니다. */
  .hub-boards .filterbar {
    grid-template-columns: repeat(auto-fill, minmax(128px, 1fr));
    gap: 3px; padding-bottom: 2px;
  }
  .hub-boards .chip { padding: 6px 9px; }
}

/* ==========================================================
   📱 좁은 화면 글씨·여백 다듬기 — 업체 페이지에서 드러난 문제
   ----------------------------------------------------------
   무엇이 문제였나 (375px 실측)
     · 본문 기준이 18px 인 채로 모바일까지 그대로 왔습니다.
       PC 에서는 시원한데, 375px 에서는 카드 소개문이 다섯 줄로
       늘어지고 업체명 줄이 세 줄로 갈라졌어요.
     · 줄 간격이 1.8 이라 글자보다 빈칸이 더 많아 보였습니다.
     · 칩·탭이 42~44px 씩 차지해 필터만 네 줄이 됐습니다.

   ⚠️ 여기 있는 것은 전부 좁은 화면 전용입니다. PC(641px 이상)는
      한 줄도 바뀌지 않습니다.
   ⚠️ 모든 글씨를 일괄로 줄이지 않았습니다. 실제로 눌려 보이던
      것만 골랐어요 — 히어로, 목록 카드 속살, 칩, 업체 탭.
   ⚠️ transform: scale() 로 억지로 줄이지 않았습니다. 그러면
      글자가 흐려지고 누르는 자리도 어긋납니다.
   ========================================================== */
@media (max-width: 640px) {
  /* ① 페이지 머리말 — 장터에만 있던 처리를 다른 페이지에도 맞춥니다.
        (장터만 작고 업체는 크던 것이 오히려 이상했어요) */
  .page-hero h1 { font-size: clamp(1.5rem, 6.4vw, 1.875rem); }
  .page-hero p { font-size: 0.9375rem; line-height: 1.6; margin-top: 8px; }

  /* ② 목록 카드(업체·병원) 속살
        ⚠️ .lc-body 가 body 의 18px/1.8 을 그대로 물려받고 있었습니다.
           여기만 되돌려도 카드 높이가 눈에 띄게 줄어듭니다. */
  .list-card { padding: 13px 13px 12px; gap: 10px; }
  .list-card .lc-body { font-size: 1rem; line-height: 1.55; }
  .list-card .lc-body h3 {
    font-size: 1.0625rem; line-height: 1.4; gap: 6px;
    /* 업체명과 역할 태그가 같은 줄에 있다가 자연스럽게 넘어가게 */
    display: flex; flex-wrap: wrap; align-items: center;
  }
  .list-card .addr {
    font-size: 0.875rem; line-height: 1.65;
    /* 한글은 낱말 단위로 끊고, 아주 긴 영문·주소만 예외로 쪼갭니다 */
    word-break: keep-all; overflow-wrap: break-word;
  }
  .list-card .lc-tags { gap: 5px; line-height: 1.4; margin-top: 6px; }
  .list-card .shop-region,
  .list-card .shop-matched,
  .list-card .shop-spcount { font-size: 0.8125rem; line-height: 1.5; }
  /* 카드 안 단추 — 글자가 두 줄로 갈라지지 않게 글씨부터 줄입니다 */
  .list-card .lc-links .btn,
  .list-card .lc-links .btn-sm { font-size: 0.875rem; padding: 8px 12px; min-height: 38px; }
  .list-card .shop-adm-btns .cmt-adm { font-size: 0.8125rem; padding: 6px 10px; }
  .badge-spec, .badge-partner, .badge-open { font-size: 0.75rem; padding: 3px 8px; }
  /* ③ 입점 안내 띠 — 여기도 18px/1.8 을 그대로 물려받아,
        두 문장이 162px 를 차지하고 있었습니다. */
  .band { padding: 24px 18px; }
  .band h2 { font-size: 1.25rem; line-height: 1.4; }
  .band p { font-size: 0.9375rem; line-height: 1.65; }
  .band .btn { font-size: 0.9375rem; padding: 9px 16px; min-height: 40px; }

  /* 칩·업체 탭은 07-titles.css 의 모바일 규칙에서 함께 손봤습니다
     (그 파일이 나중에 읽혀서, 여기 적으면 덮입니다) */

}