:root{
  --bg:#ffffff;
  --fg:#0b0b0c;
  --muted:#6a6a6f;
  --line:rgba(10,10,12,.12);
  --soft:rgba(10,10,12,.06);
  --card:#ffffff;
  --radius:18px;
  --radius2:24px;
  --shadow: 0 12px 30px rgba(0,0,0,.06);
  --max: 1120px;
  --pad: clamp(16px, 4vw, 28px);
  --focus: 2px solid #0b0b0c;
  --mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
  --sans: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo","Noto Sans KR", Segoe UI, Roboto, Helvetica, Arial, sans-serif;
}

*{ box-sizing:border-box; }
html,body{ height:100%; }
body{
  margin:0;
  font-family:var(--sans);
  color:var(--fg);
  background:var(--bg);
  letter-spacing:-.2px;
}

a{ color:inherit; text-decoration:none; }
a:hover{ text-decoration:none !important; }
/* (2) Hover reactions (no underline) */
@media (hover:hover) and (pointer:fine){
  /* 상단 네비 링크: 색/배경 반응 */
  .navLinks a{
    padding: 8px 10px;
    border-radius: 999px;
    border: 1px solid var(--line);
    background: rgba(255,255,255,.06);
    transition: transform .10s ease, background .16s ease, border-color .16s ease;
  }
  .navLinks a:hover{
    background: rgba(34,197,94,.14);
    border-color: rgba(34,197,94,.35);
    transform: translateY(-1px);
  }

  /* 카드(컬렉션/픽/가이드/식물 정보 박스 등): 살짝 떠오르며 배경톤 변화 */
  .toolCard:hover,
  .card:hover{
    background: rgba(34,197,94,.10);
    transform: translateY(-2px);
  }
}

@media (prefers-reduced-motion: reduce){
  .navLinks a, .toolCard, .card{ transition: none !important; }
  .navLinks a:hover, .toolCard:hover, .card:hover{ transform: none !important; }
}
img{ max-width:100%; display:block; }

.container{
  width:min(var(--max), 100%);
  margin:0 auto;
  padding-left: calc(var(--pad) + env(safe-area-inset-left));
  padding-right: calc(var(--pad) + env(safe-area-inset-right));
}

.skip{
  position:absolute; left:-9999px; top:auto; width:1px; height:1px; overflow:hidden;
}
.skip:focus{
  left:12px; top:12px; width:auto; height:auto;
  padding:10px 12px; background:var(--fg); color:var(--bg);
  border-radius:12px; z-index:9999; outline:none;
}

/* ===== Header ===== */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.88);
  backdrop-filter: blur(10px);
  border-bottom:1px solid var(--line);
}
.header{
  display:flex; align-items:center; justify-content:space-between;
  padding:14px 0;
  gap:14px;
}
.brand{
  display:flex; align-items:baseline; gap:10px;
  min-width: 220px;
}
.brand .logo{
  font-weight:750;
  letter-spacing:-.6px;
  font-size:18px;
  text-transform:uppercase;
}
.brand .tag{
  font-size:12px;
  color:var(--muted);
}
.nav{ display:flex; align-items:center; gap:18px; }
.nav a{
  font-size:13px;
  padding:10px 10px;
  border-radius:12px;
}
.nav a[aria-current="page"]{
  background:var(--soft);
  text-decoration:none;
}
.nav a:hover{ background:var(--soft); text-decoration:none; }

.actions{ display:flex; align-items:center; gap:10px; }

.icon-btn{
  appearance:none;
  border:1px solid var(--line);
  background:var(--bg);
  padding:10px 12px;
  border-radius:14px;
  cursor:pointer;
  font-size:13px;
  display:flex; align-items:center; gap:10px;
}
.icon-btn:hover{ background:#fafafa; }
.icon-btn:focus{ outline:var(--focus); outline-offset:2px; }

.badge{
  display:inline-flex; align-items:center; justify-content:center;
  min-width:20px; height:20px;
  padding:0 6px;
  border-radius:999px;
  background:var(--fg);
  color:var(--bg);
  font-size:12px;
  line-height:1;
}

.mobile-toggle{ display:none; }

@media (max-width: 860px){
  .brand{ min-width:auto; }
  .nav{ display:none; }
  .mobile-toggle{ display:inline-flex; }
  body.nav-open .nav-drawer{
    transform: translateY(0);
    opacity:1;
    pointer-events:auto;
  }
}

.nav-drawer{ display:none; }
@media (max-width: 860px){
  .nav-drawer{
    display:block;
    position:fixed;
    inset:58px 0 auto 0;
    background:rgba(255,255,255,.96);
    border-bottom:1px solid var(--line);
    backdrop-filter: blur(10px);
    transform: translateY(-10px);
    opacity:0;
    pointer-events:none;
    transition: transform .2s ease, opacity .2s ease;
    z-index:60;
  }
  .nav-drawer .container{
    padding:14px var(--pad) 18px;
    display:grid;
    gap:8px;
  }
  .nav-drawer a{
    padding:12px 12px;
    border-radius:14px;
    border:1px solid var(--line);
    background:var(--bg);
    font-size:14px;
    text-decoration:none;
  }
}

/* ===== Layout ===== */
main{ padding: 26px 0 54px; }
.section{ padding: 30px 0; }
.section.tight{ padding: 16px 0; }

.hero{ padding: 36px 0 22px; }

.kicker{
  font-family: var(--mono);
  font-size:12px;
  color:var(--muted);
  text-transform:uppercase;
  letter-spacing:.8px;
}
.h1{
  font-size: clamp(30px, 5vw, 54px);
  line-height: 1.05;
  margin: 10px 0 14px;
  letter-spacing: -1.2px;
}
.lede{
  color:var(--muted);
  font-size:16px;
  line-height:1.7;
  max-width: 66ch;
}

.grid{ display:grid; gap:16px; }
.grid.cols-2{ grid-template-columns: repeat(2, minmax(0,1fr)); }
.grid.cols-3{ grid-template-columns: repeat(3, minmax(0,1fr)); }
.grid.cols-4{ grid-template-columns: repeat(4, minmax(0,1fr)); }
@media (max-width: 980px){
  .grid.cols-4{ grid-template-columns: repeat(2, minmax(0,1fr)); }
}
@media (max-width: 680px){
  .grid.cols-2, .grid.cols-3, .grid.cols-4{ grid-template-columns: 1fr; }
}

/* ===== Card ===== */
.card{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  background: var(--card);
  box-shadow: none;
  overflow:hidden;
  transition: box-shadow .2s ease, transform .2s ease;
}
.card.pad{ padding:18px; }
.card:hover{ box-shadow: var(--shadow); }

/* ===== Media / Thumb ===== */
.media{
  position:relative;
  overflow:hidden;
  background:#fafafa;
  border-bottom:1px solid var(--line);
  padding:14px;
  display:flex;
  align-items:center;
  justify-content:center;
  min-height: 160px;
}
.media svg{ width: 84px; height: 84px; opacity:.9; }
.media img{
  width:100%;
  height:100%;
  display:block;
  object-fit: cover;
  object-position: center;
  border-radius: 16px;
}

.media-hero{ min-height: 320px; }
@media (max-width: 680px){
  .media-hero{ min-height: 220px; }
}

/* 홈/스토어 공통 썸네일 프레임 */
.media-thumb{
  aspect-ratio: 4 / 3;
  width: 100%;
  overflow: hidden;
  padding: 14px;
  background: #fafafa;
  border-radius: 18px;
}
.media-thumb img{
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
  border-radius: 14px;
}

/* ===== Product Meta (shop 등) ===== */
.pmeta{
  padding: 16px 18px 18px;
  display:grid;
  gap:12px;
}
.pmeta .name{
  font-size:15px;
  font-weight:650;
  letter-spacing:-.4px;
  line-height: 1.25;
}
.pmeta .row{
  display:flex;
  align-items:baseline;
  justify-content:space-between;
  gap:12px;
  margin-top: 2px;
}
.price{
  font-family: var(--mono);
  font-size:13px;
  white-space: nowrap;
}
.pill{
  font-size:12px;
  padding:6px 10px;
  border:1px solid var(--line);
  border-radius:999px;
  color:var(--muted);
}

/* ===== Buttons ===== */
.btn{
  appearance:none;
  border:1px solid var(--fg);
  background: var(--fg);
  color: var(--bg);
  padding: 12px 14px;
  border-radius: 16px;
  cursor:pointer;
  font-size:14px;
  font-weight:600;
  letter-spacing:-.2px;
}
.btn:hover{ opacity:.92; }
.btn:focus{ outline:var(--focus); outline-offset:2px; }

.btn.ghost{
  background: var(--bg);
  color: var(--fg);
  border:1px solid var(--line);
}
.btn.ghost:hover{ background:#fafafa; }
.btn.wide{ width:100%; }

/* 카드 안 텍스트 margin 기본 정리 */
.card h1, .card h2, .card h3, .card h4, .card p{ margin:0; }

/* 홈 추천 카드(렌더링용 .card-body) */
.card-body{
  padding: 16px 18px 18px;
  display: grid;
  gap: 10px;
}
.card-body .row{
  display:flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
}
.card-body h3{
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.4px;
  line-height: 1.25;
}
.card-body strong{
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
}
.card-body p{
  color: var(--muted);
  line-height: 1.7;
}

/* 스토어 상품 카드: 설명 길이와 무관하게 버튼 하단 정렬 */
body[data-page="shop"] #productGrid .card{
  display: flex;
  flex-direction: column;
  height: 100%;
}
body[data-page="shop"] #productGrid .card-link{
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
}
body[data-page="shop"] #productGrid .shop-card-body{
  padding: 16px 18px 18px;
  display: grid;
  grid-template-rows: minmax(calc(1.25em * 2), auto) auto 1fr;
  gap: 10px;
}
body[data-page="shop"] #productGrid .shop-name{
  margin: 0;
  font-size: 15px;
  font-weight: 650;
  letter-spacing: -.4px;
  line-height: 1.25;
  min-height: calc(1.25em * 2);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
body[data-page="shop"] #productGrid .shop-price{
  margin: 0;
  font-family: var(--mono);
  font-size: 13px;
  white-space: nowrap;
}
body[data-page="shop"] #productGrid .shop-desc{
  margin: 0;
  color: var(--muted);
  line-height: 1.7;
  min-height: calc(1.7em * 3);
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
  overflow: hidden;
}

/* 홈/스토어 카드 하단 버튼(상자와 거리 + 크기 줄이기) */
body[data-page="home"] #homeFeatured .card > .btn,
body[data-page="shop"] #productGrid .card > .btn{
  display:block;
  margin: 12px 16px 16px;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 14px;
  text-align:center;
}
@media (max-width: 520px){
  body[data-page="home"] #homeFeatured .card > .btn,
  body[data-page="shop"] #productGrid .card > .btn{
    margin: 10px 14px 14px;
    padding: 9px 11px;
    font-size: 13px;
  }
  body[data-page="shop"] #productGrid .card > .btn{
    margin: 0 14px 14px;
  }
}
body[data-page="shop"] #productGrid .card > .btn{
  margin: 0 16px 16px;
}
@media (max-width: 520px){
  body[data-page="shop"] #productGrid .card > .btn{
    margin: 0 14px 14px;
  }
}

/* ===== Forms ===== */
.toolbar{
  display:flex; gap:10px; flex-wrap:wrap;
  align-items:center; justify-content:space-between;
  margin: 14px 0 18px;
}
.filters{ display:flex; gap:10px; flex-wrap:wrap; align-items:center; }
.field{ display:grid; gap:6px; min-width: 160px; }

label{ font-size:12px; color:var(--muted); }

input, select, textarea{
  width:100%;
  padding: 12px 12px;
  border-radius: 14px;
  border:1px solid var(--line);
  background: var(--bg);
  color: var(--fg);
  font-size:14px;
}
textarea{ min-height: 120px; resize: vertical; }
input:focus, select:focus, textarea:focus{ outline:var(--focus); outline-offset:2px; }

/* ===== Misc ===== */
.hr{
  border:none;
  border-top:1px solid var(--line);
  margin: 22px 0;
}

.footer{
  border-top:1px solid var(--line);
  padding: 28px 0;
  color: var(--muted);
  font-size: 13px;
}
.footer .cols{
  display:grid;
  grid-template-columns: 2fr 1fr 1fr;
  gap: 16px;
}
@media (max-width: 820px){
  .footer .cols{ grid-template-columns: 1fr; }
}

.small{ font-size:12px; color: var(--muted); }

.kv{
  display:grid;
  grid-template-columns: 1fr auto;
  gap:10px;
  align-items:center;
}
.kv strong{ color:var(--fg); }

.table{
  width:100%;
  border-collapse: collapse;
}
.table th, .table td{
  border-bottom:1px solid var(--line);
  padding: 12px 0;
  text-align:left;
  font-size:14px;
}
.table th{
  color: var(--muted);
  font-weight:600;
  font-size:12px;
  text-transform:uppercase;
  letter-spacing:.8px;
  font-family:var(--mono);
}
.table td:last-child, .table th:last-child{ text-align:right; }

.row2{
  display:grid;
  grid-template-columns: 1.2fr .8fr;
  gap: 18px;
}
@media (max-width: 980px){ .row2{ grid-template-columns: 1fr; } }

.toast{
  position: fixed;
  left: 50%;
  bottom: 18px;
  transform: translateX(-50%);
  background: var(--fg);
  color: var(--bg);
  padding: 10px 12px;
  border-radius: 14px;
  font-size: 13px;
  opacity: 0;
  pointer-events:none;
  transition: opacity .18s ease, transform .18s ease;
  z-index: 999;
  max-width: min(520px, 92vw);
  text-align:center;
}
.toast.show{
  opacity: 1;
  transform: translateX(-50%) translateY(-6px);
}

.notice{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  padding: 14px 16px;
  background: #fafafa;
  color: var(--muted);
  line-height: 1.6;
}

.breadcrumb{
  display:flex; flex-wrap:wrap; gap:8px;
  font-size: 12px;
  color: var(--muted);
  font-family: var(--mono);
}
.breadcrumb a{ text-decoration:none; }
.breadcrumb a:hover{ text-decoration:none !important; background: rgba(34,197,94,.10); border-radius: 10px; padding:2px 6px; }

.kpi{
  font-family: var(--mono);
  font-size: 12px;
  color: var(--muted);
  border:1px solid var(--line);
  border-radius:999px;
  padding: 6px 10px;
}

.mono{ font-family: var(--mono); }

/* ===== Home: HERO 배경 이미지 ===== */
body[data-page="home"] .home-hero{
  background-image:
    linear-gradient(rgba(255,255,255,.88), rgba(255,255,255,.88)),
    url("./assets/img/hero/plant-bg.jpg");
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  padding-top: 18px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--line);
}
@media (max-width: 520px){
  body[data-page="home"] .home-hero{
    background-image:
      linear-gradient(rgba(255,255,255,.92), rgba(255,255,255,.92)),
      url("./assets/img/hero/plant-bg.jpg");
  }
}

/* ===== Cart: 겹침 방지 ===== */
body[data-page="cart"] #cartMount,
body[data-page="cart"] #cartSummaryBox{
  display: grid;
  gap: 12px;
}

/* 앱이 렌더한 버튼들이 absolute/sticky로 떠서 겹치면 강제로 풀기 */
body[data-page="cart"] #cartMount .btn,
body[data-page="cart"] #cartMount a.btn,
body[data-page="cart"] #cartSummaryBox .btn,
body[data-page="cart"] #cartSummaryBox a.btn,
body[data-page="cart"] #cartSummaryBox button.btn{
  position: static !important;
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 14px;
  margin-top: 6px;
}

body[data-page="cart"] #cartMount p{
  margin: 0;
  line-height: 1.7;
}

/* 하단 "쇼핑 계속하기" 버튼도 동일 톤 */
body[data-page="cart"] .section.tight{
  margin-top: 8px;
}
body[data-page="cart"] .section.tight > .btn{
  display: inline-flex;
  width: 100%;
  justify-content: center;
  padding: 10px 12px;
  font-size: 13px;
  border-radius: 14px;
}

/* 어떤 경우에도 하단 버튼/요소가 본문을 가리지 않게 */
body[data-page="cart"] main#content{
  padding-bottom: 120px;
}

/* ===== Landing: sticky 유지 + 내부 스크롤 ===== */
.sticky-steps{
  border:1px solid var(--line);
  border-radius: var(--radius2);
  overflow:hidden;
}
.sticky-steps .wrap{
  display:grid;
  grid-template-columns: 1fr 1fr;
  min-height: 520px; /* 기본값(다른 페이지 영향) */
}
@media (max-width: 880px){
  .sticky-steps .wrap{ grid-template-columns: 1fr; }
}

.sticky-steps .left{
  padding: 18px;
  border-right:1px solid var(--line);
}
@media (max-width: 880px){
  .sticky-steps .left{ border-right:none; border-bottom:1px solid var(--line); }
}

.sticky-steps .right{
  padding: 18px;
  background:#fcfcfc;
  display:flex;
  flex-direction:column;
  justify-content:center;
  align-items:flex-start;
  gap:10px;
}

.step{
  padding: 14px 14px;
  border-radius: 16px;
  border:1px solid var(--line);
  background: var(--bg);
  cursor: default;
}
.step + .step{ margin-top: 10px; }
.step .t{ font-weight:700; letter-spacing:-.4px; }
.step .d{ margin-top:6px; color: var(--muted); font-size:13px; line-height:1.6; }
.step.active{
  border-color: rgba(11,11,12,.35);
  background: #fafafa;
}

/* 랜딩 페이지에서만: 박스 높이를 화면에 맞추고, 오른쪽을 내부 스크롤로 */
body[data-page="landing"] .sticky-steps .wrap{
  min-height: auto !important;
  height: calc(100vh - 170px) !important; /* 필요 시 150~210 사이로 조절 */
}

/* grid 내부 overflow 정상 동작을 위한 필수 */
body[data-page="landing"] .sticky-steps .left,
body[data-page="landing"] .sticky-steps .right{
  min-height: 0;
  padding: 14px !important;
}

body[data-page="landing"] .sticky-steps .right{
  overflow: auto;
  -webkit-overflow-scrolling: touch;
  justify-content: flex-start;
  align-items: stretch;
}
/* =========================
   HERO 여백 복구 (Home + Landing)
   ========================= */
   body[data-page="home"] .hero-wrap,
   body[data-page="landing"] .hero-wrap{
     padding: 26px 0 8px;
   }
   
   /* 히어로 섹션 자체도 위아래 숨이 좀 더 필요하면 */
   body[data-page="home"] .home-hero.section,
   body[data-page="landing"] .section.hero-section{
     padding-top: 30px;
     padding-bottom: 22px;
   }
   
   /* 모바일에서는 살짝만 줄이기 */
   @media (max-width: 520px){
     body[data-page="home"] .hero-wrap,
     body[data-page="landing"] .hero-wrap{
       padding: 20px 0 6px;
     }
   }
   body[data-page="home"] .home-hero{
    background-image:
      linear-gradient(rgba(255,255,255,.55), rgba(255,255,255,.55)),
      url("../img/hero/plant-bg.jpg"); /* ✅ CSS 위치 기준: ../img */
    background-size: cover;
    background-position: center;
    background-repeat: no-repeat;
    padding-top: 18px;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--line);
  }
/* =========================
   HEADER: 모든 페이지에서 좌우 여백 복구
   ========================= */

/* 헤더 내부 래퍼가 container가 아니어도 좌우 패딩을 확보 */
.topbar .header{
  padding-left: calc(var(--pad) + env(safe-area-inset-left));
  padding-right: calc(var(--pad) + env(safe-area-inset-right));
}

/* 모바일에서 더 촘촘하게 하고 싶으면(선택) */
@media (max-width: 520px){
  .topbar .header{
    padding-left: calc(16px + env(safe-area-inset-left));
    padding-right: calc(16px + env(safe-area-inset-right));
  }
}
/* =========================
   HOME HERO 여백 복구(가로+세로)
   ========================= */

/* 1) 홈 히어로 섹션 자체: 위아래 숨 */
body[data-page="home"] .home-hero{
  padding-top: 28px !important;
  padding-bottom: 16px !important;
}

/* 2) 히어로 컨테이너(텍스트 박스): 위아래 + 줄맞춤 */
body[data-page="home"] .hero-wrap{
  padding: 26px 0 8px !important;   /* 세로 여백(예전 값 복구) */
}

/* 3) 혹시라도 어떤 규칙이 container padding을 0으로 덮었을 때 대비(가로 여백 강제) */
body[data-page="home"] .home-hero .container{
  padding-left: calc(var(--pad) + env(safe-area-inset-left)) !important;
  padding-right: calc(var(--pad) + env(safe-area-inset-right)) !important;
}

@media (max-width: 520px){
  body[data-page="home"] .home-hero{
    padding-top: 22px !important;
    padding-bottom: 12px !important;
  }
  body[data-page="home"] .hero-wrap{
    padding: 20px 0 6px !important;
  }
}
     /* =========================================================
   GLOBAL GUTTER + HERO SPACING (공통 규칙)
   - 헤더: 어떤 마크업(include)여도 좌우 여백 유지
   - 히어로: home/landing 포함, hero-wrap/hero-title가 있는 구간은 여백 유지
   ========================================================= */

/* 1) 전역 가터(좌우 여백) 변수: 한 곳에서만 관리 */
:root{
  --gutter: clamp(16px, 4vw, 28px);
}

/* 2) 컨테이너는 항상 동일한 좌우 여백을 갖게(기존 규칙이 있더라도 최종 승리) */
.container{
  padding-left: calc(var(--gutter) + env(safe-area-inset-left)) !important;
  padding-right: calc(var(--gutter) + env(safe-area-inset-right)) !important;
}

/* 3) HEADER: 홈 제외 다른 페이지에서 여백이 0이 되는 케이스를 확실히 차단
      - 헤더가 container로 감싸져 있든 없든 적용되게 topbar 자체에 가터 부여 */
.topbar{
  padding-left: calc(var(--gutter) + env(safe-area-inset-left));
  padding-right: calc(var(--gutter) + env(safe-area-inset-right));
}

/* 만약 topbar 내부가 .container로 이미 감싸져 있다면 "이중 패딩" 방지 */
.topbar .container{
  padding-left: 0 !important;
  padding-right: 0 !important;
}

/* 4) HERO: hero-wrap이 있으면 무조건 여백(홈/기획전 포함 공통) */
.hero-wrap{
  padding: 26px 0 8px !important;
}

/* 홈에서 hero-title 사용 중이니, 타이틀 위아래 기본 숨도 고정 */
.hero-title{
  margin: 10px 0 0 !important;
}

/* 5) HERO 섹션 자체(상하 여백): home-hero 혹은 landing에서 hero-wrap이 있는 섹션에 적용 */
body[data-page="home"] .home-hero,
body[data-page="landing"] .home-hero{
  padding-top: 28px !important;
  padding-bottom: 16px !important;
}

/* landing이 home-hero 클래스를 안 쓴다면, hero-wrap을 포함한 첫 섹션에 적용(안전장치) */
body[data-page="landing"] .section:has(.hero-wrap){
  padding-top: 28px !important;
  padding-bottom: 16px !important;
}

@media (max-width: 520px){
  .hero-wrap{ padding: 20px 0 6px !important; }
  body[data-page="home"] .home-hero,
  body[data-page="landing"] .home-hero{
    padding-top: 22px !important;
    padding-bottom: 12px !important;
  }
}
/* =========================
   HERO Typography System (전 페이지 공통)
   ========================= */

.page-hero{
  padding: 26px 0 10px;          /* 히어로 블록 상하 여백 */
  display: grid;
  gap: 10px;
}

.page-hero .kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .10em;
  color: var(--muted);
  text-transform: uppercase;
}

.page-hero h1{
  margin: 0;
  font-size: clamp(30px, 4.6vw, 50px);  /* 전 페이지 동일 스케일 */
  letter-spacing: -0.04em;
  line-height: 1.06;
  font-weight: 900;
}

.page-hero p{
  margin: 0;
  color: rgba(0,0,0,.62);
  line-height: 1.75;
  max-width: 68ch;
}

/* 조금 더 컴팩트하게 쓰고 싶은 페이지용(선택) */
.page-hero.compact h1{
  font-size: clamp(26px, 4.2vw, 44px);
}
/* =========================
   HERO Typography System (전 페이지 공통)
   ========================= */

   .page-hero{
    padding: 26px 0 10px;          /* 히어로 블록 상하 여백 */
    display: grid;
    gap: 10px;
  }
  
  .page-hero .kicker{
    font-family: var(--mono);
    font-size: 12px;
    letter-spacing: .10em;
    color: var(--muted);
    text-transform: uppercase;
  }
  
  .page-hero h1{
    margin: 0;
    font-size: clamp(30px, 4.6vw, 50px);  /* 전 페이지 동일 스케일 */
    letter-spacing: -0.04em;
    line-height: 1.06;
    font-weight: 900;
  }
  
  .page-hero p{
    margin: 0;
    color: rgba(0,0,0,.62);
    line-height: 1.75;
    max-width: 68ch;
  }
  
  /* 조금 더 컴팩트하게 쓰고 싶은 페이지용(선택) */
  .page-hero.compact h1{
    font-size: clamp(26px, 4.2vw, 44px);
  }
/* =========================
   PAGE TITLE SYSTEM (전 메뉴 공통 제목 통일)
   ========================= */

/* 페이지 상단 제목 블록 */
.page-hero{
  padding: 26px 0 10px;
  display: grid;
  gap: 10px;
}

/* 상단 작은 라벨(선택) */
.page-kicker{
  font-family: var(--mono);
  font-size: 12px;
  letter-spacing: .10em;
  color: var(--muted);
  text-transform: uppercase;
}

/* ✅ 제목(H1) 통일 */
.page-title{
  margin: 0;
  font-size: clamp(30px, 4.6vw, 50px);
  letter-spacing: -0.04em;
  line-height: 1.06;
  font-weight: 900;
}

/* ✅ 설명 문구 통일(선택) */
.page-sub{
  margin: 0;
  color: rgba(0,0,0,.62);
  line-height: 1.75;
  max-width: 68ch;
}

/* 모바일에서 너무 크다고 느껴지면(선택) */
@media (max-width: 520px){
  .page-hero{ padding: 20px 0 8px; }
  .page-title{ font-size: clamp(26px, 7vw, 36px); }
}
  /* 홈 히어로 배경 + 오버레이 투명도 조절 */
body[data-page="home"] .home-hero{
  /* ✅ 0.0 = 완전 투명(이미지 진하게), 1.0 = 완전 불투명(하얗게) */
  --hero-overlay: .40;

  background-image:
    linear-gradient(
      rgba(255,255,255,var(--hero-overlay)),
      rgba(255,255,255,var(--hero-overlay))
    ),
    url("/assets/img/hero/plant-bg.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* 홈 히어로 배경 + 오버레이(투명도) */
body[data-page="home"] .home-hero{
  /* 0.0 = 완전 투명(이미지 진하게), 1.0 = 완전 불투명(하얗게) */
  --hero-overlay: .40;

  background-image:
    linear-gradient(
      rgba(255,255,255,var(--hero-overlay)),
      rgba(255,255,255,var(--hero-overlay))
    ),
    url("/assets/img/hero/plant-bg.jpg");

  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
}
/* =========================
   HOVER: 은은한 그린 틴트(밑줄 X)
   ========================= */

/* 브랜드 포인트 컬러(원하면 바꾸세요) */
:root{
  --accent: 34 139 94; /* #228b5e 계열 */
}

/* 밑줄 없애기(기존 a:hover underline 제거) */
@media (hover:hover) and (pointer:fine){
  a:hover{
    text-decoration: none;
  }
}

/* 카드류 공통 트랜지션 */
.card, .home-card{
  transition: transform .18s ease, box-shadow .18s ease, border-color .18s ease, background-color .18s ease;
}

@media (hover:hover) and (pointer:fine){
  /* 카드 호버 시: 옅은 그린 배경 + 보더 강조 */
  .card:hover,
  .home-card:hover{
    background-color: rgba(var(--accent), .06);   /* ✅ 배경색(아주 옅게) */
    border-color: rgba(var(--accent), .28);       /* ✅ 테두리색 */
    box-shadow: 0 14px 34px rgba(0,0,0,.08);
    transform: translateY(-3px);
  }

  /* 카드 안 버튼도 살짝 반응 */
  .card:hover .btn.ghost,
  .home-card:hover .btn.ghost{
    background: rgba(var(--accent), .08);
    border-color: rgba(var(--accent), .22);
  }

  /* 카드 안 썸네일 이미지가 있으면 아주 살짝 줌 */
  .card:hover .media-thumb img,
  .home-card:hover .home-thumb img,
  .card:hover .media img{
    transform: scale(1.03);
  }
}

/* 이미지 줌 트랜지션 */
.media-thumb img,
.home-thumb img,
.media img{
  transition: transform .25s ease;
}

/* 모션 최소화 옵션 */
@media (prefers-reduced-motion: reduce){
  .card, .home-card, .media-thumb img, .home-thumb img, .media img{
    transition: none !important;
  }
  .card:hover, .home-card:hover{ transform: none !important; }
}

/* =========================
   HOME: 카드/썸네일 hover 반응 강화
   - 홈의 DISCOVER 3카드 + 오늘의 추천 셀렉션
   ========================= */
@media (hover:hover) and (pointer:fine){
  /* 박스 배경/보더 변화를 눈에 보이게 강화 */
  body[data-page="home"] .home-card,
  body[data-page="home"] #homeFeatured .card{
    transition: background-color .18s ease, border-color .18s ease, box-shadow .18s ease, transform .18s ease;
  }
  body[data-page="home"] .home-thumb,
  body[data-page="home"] #homeFeatured .media-thumb{
    transition: background-color .18s ease;
  }

  body[data-page="home"] .home-card:hover,
  body[data-page="home"] #homeFeatured .card:hover{
    background: rgba(34,197,94,.12);
    border-color: rgba(34,197,94,.34);
  }

  /* 홈 카드(컬렉션/픽/가이드) */
  body[data-page="home"] .home-card:hover .home-thumb{
    background: rgba(34,197,94,.12);
  }

  /* 홈 추천 상품 카드 */
  body[data-page="home"] #homeFeatured .card:hover .media-thumb{
    background: rgba(34,197,94,.12);
  }

  /* 이미지에 살짝 생동감(크롭 영역 밖으로 안 튀도록 부모는 이미 overflow hidden) */
  body[data-page="home"] .home-card .home-thumb img,
  body[data-page="home"] #homeFeatured .media-thumb img{
    transition: transform .16s ease;
  }
  body[data-page="home"] .home-card:hover .home-thumb img,
  body[data-page="home"] #homeFeatured .card:hover .media-thumb img{
    transform: scale(1.02);
  }
}