/* ============================================================
   모바일 홈 전용 스타일 — index.php 홈 탭에서만 쓴다.
   예전에는 index.php 안에 <style> 블록으로 흩어져 있었다. 한 파일로 모아
   (1) 요청마다 같은 CSS 를 내려보내지 않고 브라우저 캐시가 듣게 하고
   (2) 색·간격을 style.css 의 :root 변수로 통일했다.
   불러오기 : m_head('', ['css' => ['home']])  — lib/layout.php
   글자 크기는 프론트 14px 상한 정책을 따른다(장식용 아이콘은 예외).
   ============================================================ */

/* ── AI 대화형 검색 진입 바 (히어로 바로 아래 한 줄 · 입력창처럼 보이게) ── */
.home-ai{display:flex;align-items:center;gap:11px;margin:14px 16px 2px;padding:11px 13px;text-decoration:none;
  background:var(--card);border:1px solid var(--pri-tint);border-radius:20px;
  box-shadow:var(--sh-card);transition:transform .12s,box-shadow .12s}
.home-ai:active{transform:scale(.995);box-shadow:0 1px 6px rgba(36,31,34,.06)}
.home-ai .ic{width:34px;height:34px;flex:0 0 auto;border-radius:13px;background:linear-gradient(135deg,var(--pri),#ffb3c9);
  display:flex;align-items:center;justify-content:center}
.home-ai .ic i{font-size:15px;color:#fff}
.home-ai .tx{flex:1;min-width:0}
.home-ai .tx b{display:block;font-size:14px;font-weight:800;color:var(--txt);line-height:1.35}
/* 예시 문구는 몇 초마다 바뀐다 — 바뀌는 동안만 살짝 사라졌다 돌아온다 */
.home-ai .tx em{display:block;font-style:normal;font-size:14px;color:var(--hint);line-height:1.5;margin-top:2px;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;transition:opacity .35s}
.home-ai .tx em.out{opacity:0}
.home-ai .go{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--pri-d);background:var(--pri-light);
  border-radius:11px;padding:6px 10px}

/* ── 빠른 진입 두 칸 (AI 대화 · 품종백과) ──
   위 .home-ai 카드를 둘로 나눠 나란히 놓는다. AI 검색이 꺼져 있으면 .one 으로 한 칸만 넓게. */
.home-duo{display:flex;gap:9px;margin:14px 16px 2px}
.home-duo .home-ai{flex:1 1 0;min-width:0;margin:0;gap:9px;padding:10px 11px;border-radius:18px}
.home-duo .home-ai .ic{width:32px;height:32px;border-radius:12px}
.home-duo .home-ai .tx b{font-size:14px}
.home-duo .home-ai .tx em{font-size:12.5px;margin-top:1px}
/* 품종백과 칸은 아이콘 색만 세이지로 달리해 두 칸을 눈으로 구분한다 */
.home-ai.bd .ic{background:linear-gradient(135deg,var(--sage),#b7dcc6)}

/* ── 콘텐츠 구분 띠 ──
   섹션 제목(.sec) 바로 위에 프레임 폭을 가득 채우는 옅은 띠를 깔아, 이야기가 바뀌는 지점을
   눈으로 알게 한다. 별도 요소를 넣지 않고 섹션 제목 블록의 ::before 로 그린다
   (섹션이 안 그려지면 띠도 같이 사라져 빈 띠가 남지 않는다).
   .sec 은 좌우 16px 패딩을 가지므로 음수 여백으로 패딩을 밀어내 좌우 끝까지 닿게 한다. */
.sec::before{content:'';display:block;height:5px;margin:-26px -16px 20px;background:var(--bg);
  border-top:1px solid rgba(38,28,33,.05);border-bottom:1px solid rgba(38,28,33,.05)}

/* ── 종별 퀵 토글 메뉴 (강아지/고양이별 카테고리·혜택) ── */
.tgm{margin:4px 0 2px}
.tgm-tabs{display:flex;flex-wrap:wrap;justify-content:center;gap:6px;padding:2px 0}
.tgm-tabs::-webkit-scrollbar{display:none}
.tgm-tab{flex:0 0 auto;border:1.5px solid var(--line);background:var(--card);color:var(--sub);border-radius:var(--r-pill,999px);
  padding:7px 13px;font-size:12px;font-weight:700;cursor:pointer;white-space:nowrap;
  transition:background .15s,border-color .15s,color .15s}
.tgm-tab.on{background:var(--pri);border-color:var(--pri);color:#fff;box-shadow:0 5px 14px rgba(211,60,105,.22)}
.tgm-tab:focus-visible{outline:2px solid var(--pri-d);outline-offset:2px}
.tgm-panel{display:none;flex-wrap:wrap;justify-content:center;row-gap:6px;padding:7px 2px 2px;max-width:372px;margin:0 auto}
.tgm-panel.on{display:flex}
.tgm-it{flex:0 0 auto;width:min(62px,16.6%);display:flex;flex-direction:column;align-items:center;gap:4px;
  text-decoration:none;color:var(--txt);padding:1px}
.tgm-it:active .tgm-ic{transform:scale(.94)}
/* 아이콘 타일 — 채움 없이 테두리만. 선은 연한 로즈(#f7dbe6).
   너무 연하면(--pri-tint #f8dbe6) 분홍 배경 위에서 사라지고, 진하면 타일처럼 보인다 — 그 사이 값이다.
   box-sizing:border-box 라 테두리를 넣어도 타일 크기(46px)는 그대로다. */
.tgm-ic{width:46px;height:46px;border-radius:14px;background:transparent;border:1.5px solid #f7dbe6;display:flex;align-items:center;
  justify-content:center;font-size:21px;color:var(--pri-d);transition:transform .12s}
.tgm-ic img{width:26px;height:26px;object-fit:contain}
.tgm-nm{font-size:11px;text-align:center;line-height:1.25;word-break:keep-all}
@media(max-width:360px){
  .tgm-ic{width:42px;height:42px;border-radius:12px;font-size:19px}
  .tgm-ic img{width:24px;height:24px}
  .tgm-nm{font-size:10px}
}
@media(prefers-reduced-motion:reduce){
  .home-ai,.tgm-tab,.tgm-ic{transition:none}
  .home-ai .tx em{transition:none}
}

/* ── 가입 혜택 3칸 · 정기배송 리마인드 · 각종 레일 (lib/home_sections.php)
      예전에는 home_ext_css() 가 요청마다 <style> 로 내려보내던 것.
      좌우 여백은 홈의 다른 블록(.sec/.hero/.card)과 같은 16px 로 맞췄다(예전 14px). ── */
.hx-belt{display:flex;gap:8px;margin:10px 16px 4px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hx-belt::-webkit-scrollbar{display:none}
.hx-mi{flex:1 1 0;min-width:96px;display:flex;flex-direction:column;align-items:center;gap:6px;padding:12px 12px 10px;
  border:1px solid var(--line);border-radius:18px;background:var(--card);text-decoration:none;color:var(--txt);box-shadow:var(--sh-card)}
.hx-mi i{font-size:18px;color:var(--pri);line-height:0}
.hx-mi b{font-size:14px;font-weight:700}
.hx-mi s{display:block;font-size:12px;color:var(--sub);text-decoration:none}
.hx-mi.done{background:#faf7f8;border-color:var(--line);color:var(--hint)}
.hx-mi.done i{color:#c9bcc2}
.hx-mi .dot{position:absolute}
.hx-mi-w{position:relative}
.hx-bdg{position:absolute;top:-5px;right:-4px;background:var(--pri);color:#fff;font-size:10.5px;font-weight:800;border-radius:9px;padding:1px 6px}
.hx-card{margin:12px 16px 4px;padding:16px 17px;border-radius:20px;box-shadow:var(--sh-card);background:linear-gradient(135deg,#fff6f9,var(--card));border:1px solid var(--pri-tint);
  display:flex;align-items:center;gap:13px;text-decoration:none;color:inherit}
.hx-card .ic{flex:0 0 44px;width:44px;height:44px;border-radius:15px;background:var(--pri);color:#fff;display:flex;align-items:center;justify-content:center;font-size:18px}
.hx-card .ic i{line-height:0}
.hx-card b{display:block;font-size:14px;font-weight:800;color:var(--txt)}
.hx-card p{margin:3px 0 0;font-size:14px;color:var(--sub);line-height:1.45}
.hx-card .go{flex:0 0 auto;font-size:14px;font-weight:800;color:var(--pri-d);white-space:nowrap}
.hx-dday{display:inline-block;background:var(--pri);color:#fff;font-size:11.5px;font-weight:800;border-radius:10px;padding:1px 8px;margin-left:5px}
.hx-rail{display:flex;align-items:flex-start;gap:10px;overflow-x:auto;padding:6px 16px 10px;-webkit-overflow-scrolling:touch;scrollbar-width:none}
.hx-rail::-webkit-scrollbar{display:none}
/* 카드는 내용 높이만큼만 — 늘리면 카드 흰 배경이 아래로 길게 깔린다 */
.hx-rail>span{flex:0 0 150px;display:block;align-self:flex-start}
.hx-rail .card{display:block;width:100%}
.hx-rank{position:relative}
.hx-rank .rk{position:absolute;left:8px;top:8px;z-index:2;width:24px;height:24px;border-radius:8px;background:rgba(42,42,51,.82);color:#fff;
  font-size:13px;font-weight:800;display:flex;align-items:center;justify-content:center}
.hx-rank.top .rk{background:var(--pri)}
.hx-brand{flex:0 0 92px;text-align:center;text-decoration:none;color:inherit}
.hx-brand span.b{display:flex;align-items:center;justify-content:center;width:76px;height:76px;margin:0 auto;border-radius:50%;
  background:var(--card);border:1px solid var(--line);overflow:hidden;font-size:20px}
.hx-brand span.b img{width:100%;height:100%;object-fit:contain;padding:8px}
.hx-brand em{display:block;font-style:normal;font-size:13px;color:var(--txt);margin-top:6px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.hx-rv{flex:0 0 250px;border:1px solid var(--line);border-radius:14px;background:var(--card);padding:13px 14px;text-decoration:none;color:inherit}
.hx-rv .st{color:#ffb400;font-size:13px;letter-spacing:1px}
.hx-rv .tx{font-size:14px;color:var(--txt);line-height:1.5;margin-top:6px;display:-webkit-box;-webkit-line-clamp:3;-webkit-box-orient:vertical;overflow:hidden}
.hx-rv .mt{display:flex;align-items:center;gap:6px;margin-top:9px;font-size:12px;color:var(--sub)}
.hx-rv .mt img{width:34px;height:34px;border-radius:8px;object-fit:cover}
.hx-join{display:flex;gap:8px;margin:10px 16px 4px}
.hx-join a{flex:1;padding:13px 8px;border-radius:14px;background:var(--card);border:1px solid var(--pri-tint);text-align:center;text-decoration:none;color:inherit}
.hx-join i{font-size:19px;color:var(--pri);line-height:0}
.hx-join b{display:block;font-size:14px;font-weight:800;margin-top:7px}
.hx-join s{display:block;font-size:12px;color:var(--sub);text-decoration:none;margin-top:2px}
.hx-cta{margin:14px 16px 6px;padding:18px;border-radius:18px;background:linear-gradient(135deg,#e88ba6,#cf6288);color:#fff;text-decoration:none;display:block;text-align:center}
.hx-cta b{display:block;font-size:14px;font-weight:800}
.hx-cta p{margin:5px 0 0;font-size:14px;opacity:.94;line-height:1.45}
.hx-cta span{display:inline-block;margin-top:11px;background:#fff;color:var(--pri-d);font-size:14px;font-weight:800;padding:7px 18px;border-radius:20px}
.hx-why{display:block;margin:0 16px 6px;font-size:14px;color:var(--sub);line-height:1.5}
.hx-why b{color:var(--pri-d)}
/* 메인 CTA 배너(.hero) 바로 아래에 붙는 가입 혜택 3칸 — 두 블록이 한 덩어리로 읽히게 */
.hero + .hx-join{margin-top:6px}

/* ── 정기배송 프로모 배너 ── */
/* 예전에는 이 배너의 모든 스타일이 <a style="..."> 인라인으로 들어가 있었다 */
.sub-promo{position:relative;display:flex;align-items:center;gap:14px;margin:8px 16px 4px;padding:17px 18px;
  border-radius:18px;overflow:hidden;text-decoration:none;color:#fff;
  background:linear-gradient(135deg,#e88ba6,#cf6288);box-shadow:var(--sh-soft)}
.sub-promo::after{content:'';position:absolute;right:-20px;top:-20px;width:96px;height:96px;
  background:rgba(255,255,255,.10);border-radius:50%}
.sub-promo .ic{position:relative;z-index:1;flex:0 0 58px;width:58px;height:58px;border-radius:16px;
  background:rgba(255,255,255,.20);display:flex;align-items:center;justify-content:center}
.sub-promo .tx{position:relative;z-index:1;flex:1;min-width:0}
.sub-promo .tx b{display:block;font-size:14px;font-weight:800;letter-spacing:-.03em}
.sub-promo .tx em{display:block;font-style:normal;font-size:14px;opacity:.94;margin-top:3px;line-height:1.4}
.sub-promo .go{display:inline-block;margin-top:8px;background:#fff;color:var(--pri-d);
  font-size:14px;font-weight:800;padding:6px 15px;border-radius:20px}

/* ── 기획전 레일 ── */
.exh-rail{display:flex;gap:12px;overflow-x:auto;padding:2px 16px 8px;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.exh-rail::-webkit-scrollbar{display:none;width:0;height:0}
.exh-card{flex:0 0 262px;text-decoration:none;color:inherit;border:1px solid var(--pri-tint);border-radius:14px;
  overflow:hidden;background:var(--card);box-shadow:0 2px 10px rgba(192,86,121,.06)}
/* 배너 원본 비율(1000x456)에 맞춘 틀 — 16/8 로 좁히면 cover 가 좌우를 잘라 문구가 날아간다 */
.exh-th{display:block;width:100%;aspect-ratio:1000/456;overflow:hidden;background:#fbe7f0}
.exh-th img{width:100%;height:100%;object-fit:contain}
.exh-th.none{display:flex;align-items:center;justify-content:center;padding:0 10px;text-align:center;
  font-weight:800;color:var(--pri-d);background:linear-gradient(135deg,#fbf3f5,#fff7f1)}
.exh-tx{display:block;padding:10px 12px}
.exh-tt{display:block;font-size:14px;font-weight:800;color:var(--txt);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.exh-sm{display:block;font-size:14px;color:var(--sub);margin-top:2px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

/* ── 빠른배송 안내 줄 (새벽 마감 카운트다운) ── */
.fast-note{display:flex;align-items:center;gap:8px;margin:0 16px 8px;padding:11px 13px;border-radius:12px;
  border:1px solid var(--line);background:linear-gradient(135deg,#fbf3f5,#fff7f1)}
.fast-note .tx{flex:1;font-size:14px;color:var(--txt);font-weight:600}
.fast-note .cd{color:var(--pri-d);font-weight:800}
.fast-note .sub{display:block;font-size:14px;color:var(--sub);font-weight:400;margin-top:1px}

/* ── 홈 베스트·신상품 — 2행 × 여러 열 좌/우 슬라이드(가로 스크롤) ── */
.hslide{display:grid;grid-auto-flow:column;grid-template-rows:repeat(2,auto);grid-auto-columns:43%;
        gap:14px 12px;padding:8px 16px 16px;overflow-x:auto;overscroll-behavior-x:contain;
        scroll-snap-type:x proximity;scroll-padding-left:16px;-webkit-overflow-scrolling:touch;
        scrollbar-width:none;-ms-overflow-style:none}
.hslide::-webkit-scrollbar{display:none;width:0;height:0}
.hslide>.card{scroll-snap-align:start}
@media(max-width:360px){.hslide{grid-auto-columns:47%}}

/* 종별 레일 줄머리 — 🐶 강아지 치리·치구 / 🐱 고양이 치순 */
.pm-splabel{display:flex;align-items:center;gap:5px;margin:10px 16px 2px;font-size:14px;font-weight:700;color:var(--sub)}
.pm-splabel .em{font-size:15px;line-height:1}
.pm-splabel b{color:var(--pri-d);font-weight:800}