/* ===== 메인페이지 전용 디자인 — pettown-main 시안 =====
   2026-09-10. 시안(https://pettown-main.castingn-9233.chatgpt.site)의 화면을 그대로 옮긴 한 겹이다.
   컨텐츠와 기능은 index.php · home_sections.php 가 그리는 그대로 두고 모양만 바꾼다.

   시안의 말투
     · 바탕은 흰색, 글자는 먹색(#15171a). 포인트는 파스텔 여덟 색과 검정 알약.
     · 제목 위에 작은 영문 눈썹(SHOP BY CATEGORY) — 실제 글자는 home_sections.php 가 넣는다.
     · 카테고리는 한 줄 네 칸, 둥근 사각 파스텔 타일.
     · 하단 내비는 바닥에서 떠 있는 검정 알약, 고른 메뉴만 밝은 원.

   싣는 자리: index.php 의 m_head(['css' => ['home','home2']]) — 메인에서만 실린다.
   그래서 이 파일의 규칙은 다른 화면에 닿지 않는다.

   주의 — 굵기(specificity)
     m_head 는 화면별 CSS 를 먼저, ui2.css 를 나중에 싣는다. 같은 굵기로 적으면 ui2 가 이긴다.
     그래서 이 파일은 선택자 앞에 .app 을 붙여 한 단계 굵게 적는다.
     하단 내비(.bnav)는 본문 안 <style> 로 더 뒤에 오므로 body .app 까지 붙였다. */

.app{
  --h-ink:#15171a;      /* 제목·아이콘 먹색 */
  --h-sub:#6f7681;      /* 본문 보조 */
  --h-mute:#9aa1ab;     /* 눈썹·플레이스홀더 */
  --h-field:#f1f2f4;    /* 검색칸·세그먼트 바탕 */
  --h-line:#ececef;     /* 카드 실선 */
}

/* ─────────────────────────────────────────────
   1. 상단 — 로고 줄과 종 토글
   헤더 아이콘은 다른 화면과 같은 연회색 동그란 버튼을 쓴다(ui2.css 규격 그대로).
   글자색만 이 화면의 먹색으로 맞추고, 개수 배지는 원의 어깨에 붙는 분홍 그대로 둔다.
   ───────────────────────────────────────────── */
.app header.hd{background:#fff;box-shadow:none}
.app .hd-top{padding:14px 16px 10px}
.app .hd-ic .fi{color:var(--h-ink)}
/* 강아지·고양이 토글은 다른 화면과 같은 흰 알약을 쓴다 — 고른 쪽만 분홍 테두리에 분홍 글씨.
   (다크 세그먼트로 덮던 규칙을 걷어내고 lib/layout.php 의 기본 모양을 그대로 살린다) */

/* 상단 탭 줄 — 고른 탭은 다른 화면과 같은 연분홍 알약(ui2.css)을 그대로 쓴다 */
.app .tabs-wrap{box-shadow:none}
.app .tabs a{color:var(--h-sub)}
.app .tabs a .fi{color:var(--h-mute)}

/* ─────────────────────────────────────────────
   2. 검색칸 — 시안 최상단의 회색 둥근 입력칸 (index.php 가 그린다)
   ───────────────────────────────────────────── */
.app .hm-search{display:flex;align-items:center;gap:11px;margin:10px 16px 14px;padding:15px 18px;
  border-radius:16px;background:var(--h-field);color:var(--h-mute);font-size:15px;font-weight:500}
.app .hm-search .fi{font-size:19px;color:var(--h-mute)}
.app .hm-search:active{background:#e9eaed}

/* ─────────────────────────────────────────────
   3. 히어로 — 시안처럼 둥근 카드 한 장으로 가둔다
   배너 자체는 관리자가 올린 이미지라 모양을 정할 수 없다. 바깥 틀에서 잘라 낸다.
   ───────────────────────────────────────────── */
.app .hh-wrap{margin:2px 16px 8px;border-radius:24px;overflow:hidden;background:var(--h-field)}

/* ─────────────────────────────────────────────
   4. 섹션 제목 — 작은 영문 눈썹 + 큰 먹색 제목
   ───────────────────────────────────────────── */
.app .sec{padding:28px 16px 8px}
.app .sec-eb{margin:0 0 5px;font-size:11px;font-weight:800;letter-spacing:.14em;
  color:var(--h-mute);text-transform:uppercase;line-height:1}
.app .sec-hd{margin-bottom:12px}
.app .sec-hd h3{font-size:20px;font-weight:800;color:var(--h-ink);letter-spacing:-.045em;line-height:1.25}
.app .sec-hd h3 .hl{color:var(--h-ink)}
.app .sec-hd h3 .fi{color:var(--h-ink);font-size:18px}
.app .sec-hd a{color:var(--h-mute);font-size:13px;font-weight:700}
.app .sec-tip{margin:-6px 16px 10px;font-size:13.5px;color:var(--h-sub)}

/* ─────────────────────────────────────────────
   5. 카테고리 타일 — 한 줄 네 칸, 둥근 사각 파스텔
   ───────────────────────────────────────────── */
.app .tgm{margin:2px 0 6px}
.app .tgm-tabs{flex-wrap:nowrap;justify-content:flex-start;gap:7px;padding:2px 16px 4px;
  overflow-x:auto;scrollbar-width:none}
.app .tgm-tabs::-webkit-scrollbar{display:none}
.app .tgm-tab{border:0;background:var(--h-field);color:var(--h-sub);font-weight:700;padding:10px 17px;box-shadow:none}
.app .tgm-tab.on{background:var(--h-ink);color:#fff;box-shadow:0 3px 10px rgba(0,0,0,.16)}
.app .tgm-panel{max-width:none;justify-content:flex-start;padding:10px 12px 2px;row-gap:20px}
.app .tgm-it{width:25%;gap:0}
.app .tgm-ic{width:64px;height:64px;border-radius:22px;border:0;box-shadow:none;font-size:27px}
.app .tgm-ic img{width:32px;height:32px}
.app .tgm-nm{margin-top:9px;font-size:12.5px;font-weight:700;color:var(--h-ink)}
/* 파스텔 여덟 색을 돌려 쓴다 — 아이콘은 시안처럼 전부 먹색이라 색이 겹쳐도 헷갈리지 않는다 */
.app .tgm-ic .fi,.app .tgm-ic{color:#22262b}
.app .tgm-panel .tgm-it:nth-child(8n+1) .tgm-ic{background:#ece5f8}
.app .tgm-panel .tgm-it:nth-child(8n+2) .tgm-ic{background:#fbe7d6}
.app .tgm-panel .tgm-it:nth-child(8n+3) .tgm-ic{background:#dceaf4}
.app .tgm-panel .tgm-it:nth-child(8n+4) .tgm-ic{background:#f9dde6}
.app .tgm-panel .tgm-it:nth-child(8n+5) .tgm-ic{background:#deeee2}
.app .tgm-panel .tgm-it:nth-child(8n+6) .tgm-ic{background:#f8efd0}
.app .tgm-panel .tgm-it:nth-child(8n+7) .tgm-ic{background:#e8dff7}
.app .tgm-panel .tgm-it:nth-child(8n+8) .tgm-ic{background:#dfe8f5}
@media(max-width:360px){
  .app .tgm-ic{width:58px;height:58px;border-radius:20px;font-size:25px}
  .app .tgm-nm{font-size:11.5px}
}

/* ─────────────────────────────────────────────
   6. 홈 안의 판·카드 — 실선 한 겹, 그림자 없음
   ───────────────────────────────────────────── */
.app .home-duo .home-ai{background:#fff;border:1px solid var(--h-line);box-shadow:none;border-radius:20px}
.app .home-duo .home-ai .tx b{color:var(--h-ink)}
.app .home-duo .home-ai .tx em{color:var(--h-sub)}
.app .pet-hello{background:var(--h-field);border-color:transparent;border-radius:20px}
.app .pet-hello .t b{color:var(--h-ink)}
.app .pet-hello .go{background:var(--h-ink);color:#fff}

/* 7. 하단 내비 — 이제 전 화면 공통이라 여기서 다루지 않는다.
      검정 알약·밝은 원 규칙은 assets/css/ui2.css 로 옮겼다(2026-09-10). */