:root {
  --navy: #203A5A;
  --navy-deep: #172D46;
  --cream: #F7F8F4;
  --cream-soft: #FBFCFA;
  --mint: #54C6B7;
  --mint-deep: #2C9F91;
  --gold: #FF8B38;
  --white: #ffffff;
  --text: #27384B;
  --muted: #6E7884;
  --line: #e9e4d8;
  --max-width: 1280px;
  --radius-lg: 20px;
  --radius-md: 14px;
  --shadow: 0 14px 40px rgba(25, 56, 48, .08);
}

* { box-sizing: border-box; }

html { scroll-behavior: smooth; }

body {
  margin: 0;
  font-family: Pretendard, "Noto Sans KR", "Apple SD Gothic Neo", Arial, sans-serif;
  color: var(--text);
  background: #fffdf8;
  line-height: 1.5;
}

a { color: inherit; text-decoration: none; }
button, input { font: inherit; }

.container {
  width: min(calc(100% - 48px), var(--max-width));
  margin-inline: auto;
}

.section { padding: 96px 0; }
.section-soft { background: var(--cream-soft); }

.section-heading {
  max-width: 760px;
  margin: 0 auto 46px;
  text-align: center;
}

.section-heading > span,
.eyebrow {
  color: var(--mint-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.section-heading h2 {
  margin: 12px 0;
  color: var(--navy);
  font-size: clamp(28px, 3vw, 40px);
  letter-spacing: -.03em;
}

.section-heading p {
  margin: 0;
  color: var(--muted);
}

.top-notice {
  padding: 9px 16px;
  background: var(--navy-deep);
  color: var(--white);
  text-align: center;
  font-size: 13px;
}

.site-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background: rgba(255, 255, 255, .96);
  border-bottom: 1px solid #eee9de;
  backdrop-filter: blur(10px);
}

.header-inner {
  width: min(calc(100% - 48px), var(--max-width));
  min-height: 76px;
  margin-inline: auto;
  display: flex;
  align-items: center;
  gap: 30px;
}

.logo-wrap {
  display: flex;
  align-items: center;
  gap: 11px;
  margin-right: auto;
}

.logo-mark {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: var(--navy);
  color: var(--mint);
  font-weight: 900;
  font-size: 13px;
}

.logo-text strong {
  display: block;
  color: var(--navy);
  font-size: 18px;
}

.logo-text small {
  display: block;
  margin-top: 2px;
  color: #77817d;
  font-size: 9px;
  letter-spacing: .1em;
}

.main-nav {
  display: flex;
  gap: 24px;
  font-size: 14px;
  font-weight: 700;
}

.main-nav a:hover { color: var(--mint-deep); }

.header-cta {
  padding: 10px 17px;
  border: 1px solid var(--navy);
  border-radius: 999px;
  font-size: 13px;
  font-weight: 700;
}

.hero {
  background:
    radial-gradient(circle at 75% 25%, rgba(169, 216, 199, .42), transparent 28%),
    linear-gradient(110deg, #f9f2e1 0%, #f7f4e9 55%, #edf5f0 100%);
}

.hero-inner {
  width: min(calc(100% - 48px), var(--max-width));
  min-height: 590px;
  margin-inline: auto;
  padding: 70px 0;
  display: grid;
  grid-template-columns: .9fr 1.1fr;
  gap: 48px;
  align-items: center;
}

.hero h1 {
  margin: 18px 0 22px;
  color: var(--navy);
  font-size: clamp(40px, 4.6vw, 66px);
  line-height: 1.12;
  letter-spacing: -.045em;
}

.hero p {
  max-width: 540px;
  margin: 0;
  color: var(--muted);
  font-size: 18px;
  line-height: 1.75;
}

.hero-actions {
  display: flex;
  gap: 12px;
  margin-top: 34px;
}

.hero-trust {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 24px;
}

.hero-trust span {
  padding: 6px 10px;
  border: 1px solid rgba(24, 58, 50, .14);
  border-radius: 999px;
  color: var(--navy);
  font-size: 12px;
  font-weight: 700;
}

.hero-placeholder {
  min-height: 430px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  padding: 30px;
  border: 1px dashed rgba(24, 58, 50, .25);
  border-radius: 28px;
  background: rgba(255, 255, 255, .55);
  text-align: center;
}

.hero-placeholder span {
  color: var(--mint-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
}

.hero-placeholder strong {
  color: var(--navy);
  font-size: 24px;
}

.hero-placeholder small { color: var(--muted); }

.btn {
  min-height: 48px;
  padding: 0 22px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  border-radius: 10px;
  cursor: pointer;
  font-size: 14px;
  font-weight: 800;
}

.btn-primary { background: var(--navy); color: var(--white); }
.btn-secondary { background: var(--white); color: var(--navy); border: 1px solid #dcd7cc; }
.btn-light { background: var(--white); color: var(--navy); }
.btn-outline-light { color: var(--white); border: 1px solid rgba(255,255,255,.4); background: transparent; }

.needs-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.need-card {
  min-height: 190px;
  padding: 28px 24px;
  border: 1px solid #ebe2cd;
  border-radius: var(--radius-lg);
  background: var(--cream);
  transition: transform .2s ease, box-shadow .2s ease, border-color .2s ease;
}

.need-card:hover,
.need-card.is-active {
  transform: translateY(-4px);
  border-color: rgba(57, 114, 96, .35);
  box-shadow: var(--shadow);
}

.need-no {
  color: var(--mint-deep);
  font-size: 12px;
  font-weight: 900;
}

.need-card h3 {
  margin: 30px 0 7px;
  color: var(--navy);
  font-size: 20px;
}

.need-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
}

.product-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 22px;
}

.product-card {
  display: flex;
  flex-direction: column;
  overflow: hidden;
  border: 1px solid var(--line);
  border-radius: var(--radius-lg);
  background: var(--white);
  transition: transform .2s ease, box-shadow .2s ease;
}

.product-card:hover {
  transform: translateY(-5px);
  box-shadow: var(--shadow);
}

.product-image-wrap {
  position: relative;
  aspect-ratio: 1 / 1;
  display: grid;
  place-items: center;
  overflow: hidden;
  padding: 24px;
  background: #faf8f2;
}

.product-image-wrap img {
  width: 100%;
  height: 100%;
  object-fit: contain;
}

.image-fallback {
  display: none;
  color: #909994;
  font-size: 13px;
}

.product-image-wrap.image-error .image-fallback { display: block; }

.stock-badge {
  position: absolute;
  top: 14px;
  right: 14px;
  z-index: 2;
  padding: 6px 10px;
  border-radius: 999px;
  background: #67716d;
  color: var(--white);
  font-size: 11px;
  font-weight: 800;
}

.product-card-body {
  flex: 1;
  display: flex;
  flex-direction: column;
  padding: 22px;
}

.product-tags {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  margin-bottom: 12px;
}

.product-tag {
  padding: 5px 9px;
  border-radius: 999px;
  background: #edf5f1;
  color: var(--mint-deep);
  font-size: 11px;
  font-weight: 800;
}

.product-tag-category {
  background: #f4ecda;
  color: #7b6331;
}

.product-brand {
  margin: 0 0 6px;
  color: #8c9590;
  font-size: 12px;
}

.product-name {
  min-height: 52px;
  margin: 0;
  color: var(--navy);
  font-size: 17px;
  line-height: 1.45;
}

.product-weight {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: 13px;
}

.product-price {
  display: block;
  margin: auto 0 18px;
  padding-top: 16px;
  color: var(--navy);
  font-size: 19px;
}

.product-buy-btn {
  min-height: 44px;
  width: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 9px;
  background: var(--navy);
  color: var(--white);
  font-size: 14px;
  font-weight: 800;
}

.is-soldout { opacity: .72; }

.section-action {
  margin-top: 34px;
  text-align: center;
}

.curation-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 16px;
}

.curation-card {
  min-height: 155px;
  padding: 24px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--white);
  text-align: left;
  cursor: pointer;
  transition: .2s ease;
}

.curation-card:hover,
.curation-card.is-active {
  border-color: var(--mint);
  box-shadow: var(--shadow);
}

.curation-card strong {
  display: block;
  margin-bottom: 10px;
  color: var(--navy);
  font-size: 20px;
}

.curation-card span {
  color: var(--muted);
  font-size: 13px;
}

.diet-note {
  max-width: 760px;
  margin: 28px auto 0;
  color: var(--muted);
  text-align: center;
  font-size: 13px;
}

.pet-type-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 22px;
}

.pet-type-card {
  min-height: 380px;
  display: grid;
  grid-template-columns: 1fr .9fr;
  gap: 24px;
  align-items: center;
  padding: 38px;
  border-radius: 24px;
  background: var(--cream-soft);
  overflow: hidden;
}

.pet-type-card h2 {
  margin: 14px 0;
  color: var(--navy);
  font-size: 30px;
  line-height: 1.3;
}

.pet-type-card p {
  color: var(--muted);
  line-height: 1.7;
}

.pet-visual {
  min-height: 270px;
  display: grid;
  place-items: center;
  border-radius: 18px;
  color: rgba(24, 58, 50, .55);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .12em;
}

.dog-visual { background: linear-gradient(145deg, #f2ead6, #e7f1eb); }
.cat-visual { background: linear-gradient(145deg, #edf3ef, #f1eadb); }

.trust-section { background: var(--cream); }

.trust-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 18px;
}

.trust-card {
  min-height: 210px;
  padding: 28px;
  border: 1px solid #e8e0cf;
  border-radius: var(--radius-lg);
  background: var(--white);
}

.trust-card > span {
  width: 42px;
  height: 42px;
  display: grid;
  place-items: center;
  border-radius: 50%;
  background: #edf5f1;
  color: var(--mint-deep);
  font-size: 12px;
  font-weight: 900;
}

.trust-card h3 {
  margin: 24px 0 10px;
  color: var(--navy);
  font-size: 20px;
}

.trust-card p {
  margin: 0;
  color: var(--muted);
  font-size: 14px;
  line-height: 1.7;
}

.brand-story {
  display: grid;
  grid-template-columns: 1.05fr .95fr;
  gap: 60px;
  align-items: center;
}

.brand-story-visual {
  min-height: 420px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 10px;
  border-radius: 24px;
  background: linear-gradient(135deg, var(--cream), #eaf3ee);
  color: var(--navy);
}

.brand-story-visual span {
  color: var(--mint-deep);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .14em;
}

.brand-story-copy h2 {
  margin: 14px 0 24px;
  color: var(--navy);
  font-size: 38px;
  line-height: 1.3;
  letter-spacing: -.03em;
}

.brand-story-copy p {
  color: var(--muted);
  font-size: 16px;
  line-height: 1.85;
}

.all-products-section { background: #fff; }

.product-toolbar {
  margin-bottom: 28px;
  padding: 20px;
  border: 1px solid var(--line);
  border-radius: var(--radius-md);
  background: var(--cream-soft);
}

.search-row {
  display: flex;
  gap: 10px;
}

.search-row input {
  min-height: 48px;
  flex: 1;
  padding: 0 16px;
  border: 1px solid #ddd8ce;
  border-radius: 10px;
  background: var(--white);
  outline: none;
}

.search-row input:focus { border-color: var(--mint-deep); }

.filter-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 14px;
}

.filter-chip {
  min-height: 38px;
  padding: 0 13px;
  border: 1px solid #ddd8ce;
  border-radius: 999px;
  background: var(--white);
  color: var(--text);
  cursor: pointer;
  font-size: 13px;
  font-weight: 700;
}

.filter-chip.is-active {
  background: var(--navy);
  color: var(--white);
  border-color: var(--navy);
}

.health-filter-row { padding-top:12px; border-top:1px solid #ebe7df; }
.filter-label { display:inline-flex; min-height:38px; align-items:center; padding-right:4px; color:var(--navy); font-size:13px; font-weight:800; }
.product-attributes { margin:12px 0 2px; border:1px solid #e2e8e5; border-radius:10px; background:#f8faf9; }
.product-attributes summary { padding:9px 11px; cursor:pointer; color:var(--mint-deep); font-size:12px; font-weight:800; }
.product-attributes dl { margin:0; padding:0 11px 10px; }
.product-attributes dl div { display:grid; grid-template-columns:70px 1fr; gap:8px; padding-top:7px; border-top:1px solid #e7ecea; font-size:12px; line-height:1.45; }
.product-attributes dt { color:#687873; font-weight:700; }
.product-attributes dd { margin:0; color:var(--text); }

.stock-toggle {
  min-height: 38px;
  display: inline-flex;
  align-items: center;
  gap: 7px;
  padding: 0 12px;
  border-radius: 999px;
  background: #edf5f1;
  color: var(--mint-deep);
  font-size: 13px;
  font-weight: 700;
}

.result-meta {
  margin-top: 14px;
  color: var(--muted);
  font-size: 13px;
}

.empty-state {
  grid-column: 1 / -1;
  min-height: 180px;
  display: grid;
  place-items: center;
  align-content: center;
  gap: 6px;
  border: 1px dashed #ddd7ca;
  border-radius: var(--radius-lg);
  background: #fbfaf6;
  color: var(--muted);
  text-align: center;
}

.footer-cta {
  padding: 90px 24px;
  background: var(--navy);
  color: var(--white);
}

.footer-cta-inner {
  max-width: 860px;
  margin: auto;
  text-align: center;
}

.footer-cta-inner > span {
  color: var(--mint);
  font-size: 12px;
  font-weight: 800;
  letter-spacing: .15em;
}

.footer-cta h2 {
  margin: 16px 0;
  font-size: 38px;
  line-height: 1.3;
}

.footer-cta p { color: rgba(255,255,255,.72); }

.footer-cta-actions {
  margin-top: 30px;
  display: flex;
  justify-content: center;
  gap: 10px;
}

.site-footer {
  padding: 38px 0;
  background: #102721;
  color: rgba(255,255,255,.82);
}

.footer-inner {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 40px;
}

.footer-inner strong {
  color: var(--white);
  font-size: 18px;
}

.footer-inner p {
  margin: 6px 0 0;
  color: rgba(255,255,255,.6);
  font-size: 13px;
}

.footer-disclaimer {
  flex: 1;
  max-width: 760px;
  margin: 0 0 0 auto !important;
  text-align: right;
  line-height: 1.75;
  word-break: keep-all;
  overflow-wrap: break-word;
}

@media (max-width: 1000px) {
  .main-nav { display: none; }
  .hero-inner { grid-template-columns: 1fr; }
  .hero-copy { text-align: center; }
  .hero p { margin-inline: auto; }
  .hero-actions, .hero-trust { justify-content: center; }
  .needs-grid { grid-template-columns: repeat(2, 1fr); }
  .product-grid { grid-template-columns: repeat(2, 1fr); }
  .curation-grid { grid-template-columns: repeat(2, 1fr); }
  .trust-grid { grid-template-columns: repeat(2, 1fr); }
  .pet-type-grid { grid-template-columns: 1fr; }
  .brand-story { grid-template-columns: 1fr; }
}

@media (max-width: 620px) {
  .container,
  .header-inner,
  .hero-inner {
    width: min(calc(100% - 32px), var(--max-width));
  }

  .section { padding: 64px 0; }
  .header-inner { min-height: 64px; }
  .header-cta { display: none; }
  .logo-text small { display: none; }

  .hero-inner {
    min-height: auto;
    padding: 48px 0 58px;
  }

  .hero h1 { font-size: 36px; }
  .hero p { font-size: 16px; }

  .hero-actions {
    flex-direction: column;
  }

  .hero-actions .btn { width: 100%; }
  .hero-placeholder { min-height: 300px; }

  .needs-grid { gap: 10px; }
  .need-card { min-height: 150px; padding: 20px 16px; }
  .need-card h3 { margin-top: 18px; font-size: 17px; }

  .product-grid { gap: 10px; }
  .product-card-body { padding: 15px; }
  .product-name { font-size: 15px; min-height: 44px; }
  .product-price { font-size: 17px; }

  .curation-card { min-height: 125px; padding: 17px; }
  .curation-card strong { font-size: 17px; }

  .pet-type-card {
    grid-template-columns: 1fr;
    padding: 26px;
  }

  .pet-type-card h2 { font-size: 26px; }
  .trust-grid { gap: 10px; }
  .trust-card { padding: 20px; }

  .brand-story-copy h2 { font-size: 30px; }
  .brand-story-visual { min-height: 300px; }

  .search-row {
    flex-direction: column;
  }

  .footer-cta h2 { font-size: 30px; }
  .footer-cta-actions { flex-direction: column; }
  .footer-inner { flex-direction: column; align-items: flex-start; }
  .footer-disclaimer { max-width: none; margin: 0 !important; text-align: left; }
}


/* --- Brand visual v2 --- */
.main-logo-image {
  display: block;
  width: auto;
  height: 48px;
  max-width: 230px;
  object-fit: contain;
}

.logo-fallback {
  display: none;
}

.logo-wrap:has(.main-logo-image[style*="display: none"]) .logo-fallback {
  display: block;
}

.hero {
  background:
    radial-gradient(circle at 78% 26%, rgba(84, 198, 183, .20), transparent 31%),
    linear-gradient(110deg, #F7F8F4 0%, #FFFFFF 58%, #EEF8F6 100%);
}

.hero-photo-card {
  position: relative;
  overflow: hidden;
  min-height: 430px;
  border-radius: 28px;
  background: #fff;
  box-shadow: 0 22px 60px rgba(32, 58, 90, .12);
}

.hero-photo-card img {
  width: 100%;
  height: 430px;
  display: block;
  object-fit: cover;
  object-position: center;
}

.hero-photo-caption {
  position: absolute;
  left: 24px;
  right: 24px;
  bottom: 22px;
  padding: 17px 19px;
  border-radius: 16px;
  background: rgba(255,255,255,.90);
  backdrop-filter: blur(8px);
}

.hero-photo-caption span {
  display: block;
  margin-bottom: 5px;
  color: var(--mint-deep);
  font-size: 10px;
  font-weight: 900;
  letter-spacing: .14em;
}

.hero-photo-caption strong {
  color: var(--navy);
  font-size: 16px;
  line-height: 1.45;
}

.brand-story-image {
  overflow: hidden;
  min-height: 0;
  background: #fff;
  box-shadow: 0 18px 50px rgba(32, 58, 90, .09);
}

.brand-story-image img {
  width: 100%;
  height: auto;
  display: block;
  object-fit: cover;
}

.need-card {
  background: #F7F8F4;
}

.product-tag {
  background: rgba(84, 198, 183, .13);
  color: #257E73;
}

.product-tag-category {
  background: rgba(32, 58, 90, .08);
  color: #203A5A;
}

.btn-primary,
.product-buy-btn {
  background: #203A5A;
}

.btn-primary:hover,
.product-buy-btn:hover {
  background: #172D46;
}

@media (max-width: 620px) {
  .main-logo-image {
    height: 40px;
    max-width: 190px;
  }

  .hero-photo-card,
  .hero-photo-card img {
    min-height: 310px;
    height: 310px;
  }

  .hero-photo-caption {
    left: 14px;
    right: 14px;
    bottom: 14px;
  }
}


/* --- deploy candidate v7: missing image fallback --- */
.image-fallback {
  display: none;
  width: 100%;
  min-height: 160px;
  padding: 22px;
  place-items: center;
  align-content: center;
  gap: 7px;
  border: 1px dashed rgba(32, 58, 90, .18);
  border-radius: 14px;
  background:
    radial-gradient(circle at 70% 25%, rgba(84,198,183,.12), transparent 30%),
    #F7F8F4;
  text-align: center;
}

.product-image-wrap.image-error .image-fallback {
  display: grid;
}

.image-fallback strong {
  color: #203A5A;
  font-size: 14px;
}

.image-fallback span {
  color: #7A848E;
  font-size: 11px;
  line-height: 1.5;
}


/* --- v26 hero readability refinement --- */
@media (min-width: 981px) {
  .hero-inner {
    grid-template-columns: 0.96fr 1.04fr;
    gap: 54px;
  }

  .hero h1 {
    font-size: clamp(44px, 3.55vw, 56px);
    line-height: 1.16;
    letter-spacing: -0.04em;
  }

  .hero h1 > span {
    display: block;
  }

  .hero-line-final {
    white-space: nowrap;
  }

  .hero p {
    max-width: 520px;
    font-size: 17px;
    line-height: 1.72;
  }
}

/* The source hero photo contains a small baked-in phrase at the top-left.
   Crop that area non-destructively instead of rendering blurry image text. */
.hero-photo-card {
  isolation: isolate;
}

.hero-photo-card img {
  transform: scale(1.13);
  transform-origin: center 58%;
  object-position: center 58%;
}

.hero-photo-caption {
  background: rgba(255,255,255,.96);
  backdrop-filter: none;
  -webkit-backdrop-filter: none;
  box-shadow: 0 8px 24px rgba(32,58,90,.08);
}

.hero-photo-caption strong {
  display: block;
  font-size: 15px;
  line-height: 1.4;
  letter-spacing: -0.02em;
}

@media (max-width: 980px) {
  .hero h1 > span { display: block; }
  .hero-line-final { white-space: normal; }
}


/* =========================================================
   v27 — Global spacing / layout density refinement
   Goal: tighter PC rhythm while preserving mobile readability.
   ========================================================= */

@media (min-width: 1001px) {
  /* Global section rhythm */
  .section {
    padding: 78px 0;
  }

  .section-heading {
    margin-bottom: 34px;
  }

  .section-heading h2 {
    margin: 10px 0 8px;
  }

  /* Header balance */
  .header-inner {
    min-height: 72px;
    gap: 26px;
  }

  .main-nav {
    gap: 24px;
  }

  /* Hero: reduce excess vertical footprint */
  .hero-inner {
    min-height: 650px;
    padding: 54px 0 62px;
  }

  .hero-actions {
    margin-top: 28px;
    gap: 12px;
  }

  .hero-trust {
    margin-top: 20px;
    gap: 8px;
  }

  .hero-trust span {
    min-height: 30px;
    padding: 6px 12px;
  }

  /* Shop by need: denser cards */
  .need-card {
    min-height: 160px;
    padding: 22px;
  }

  .need-card h3 {
    margin: 22px 0 6px;
  }

  /* Curated categories */
  .curation-card {
    min-height: 132px;
    padding: 22px;
  }

  .curation-card strong {
    margin-bottom: 8px;
  }

  .diet-note {
    margin-top: 22px;
  }

  /* Dog / cat area */
  .pet-type-card {
    min-height: 330px;
    gap: 20px;
    padding: 30px;
  }

  .pet-visual {
    min-height: 230px;
  }

  .pet-type-card h2 {
    margin: 10px 0 10px;
    font-size: 28px;
  }

  /* Trust area */
  .trust-card {
    min-height: 175px;
    padding: 24px;
  }

  .trust-card h3 {
    margin: 18px 0 8px;
  }

  /* Brand story */
  .brand-story {
    gap: 42px;
  }

  .brand-story-visual {
    min-height: 360px;
  }

  .brand-story-copy h2 {
    margin-bottom: 18px;
  }

  .brand-story-copy p {
    line-height: 1.75;
  }

  /* Product sections */
  .section-action {
    margin-top: 28px;
  }

  .product-toolbar {
    margin-bottom: 22px;
  }

  /* Keep BEST at 3 columns for a balanced 6-item block */
  #best .product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: 18px;
  }

  /* Full catalog: 4 columns to reduce page length */
  #all-products .product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 18px;
  }

  #all-products .product-image-wrap {
    padding: 20px;
  }

  /* Closing CTA */
  .footer-cta {
    padding: 68px 24px;
  }

  .footer-cta h2 {
    margin: 14px 0 12px;
  }

  .footer-cta-actions {
    margin-top: 24px;
  }
}

/* Intermediate desktop/tablet keeps cards comfortable */
@media (min-width: 621px) and (max-width: 1000px) {
  .section {
    padding: 72px 0;
  }

  .section-heading {
    margin-bottom: 36px;
  }

  .hero-inner {
    padding-top: 52px;
    padding-bottom: 58px;
  }

  .need-card {
    min-height: 165px;
    padding: 22px 20px;
  }

  .trust-card {
    min-height: 180px;
    padding: 22px;
  }

  .pet-type-card {
    min-height: 330px;
    padding: 30px;
  }

  .brand-story {
    gap: 36px;
  }

  .brand-story-visual {
    min-height: 340px;
  }
}

/* Mobile: slightly tighter headings only; preserve existing touch spacing */
@media (max-width: 620px) {
  .section-heading {
    margin-bottom: 30px;
  }

  .section-heading h2 {
    margin: 9px 0 7px;
  }

  .footer-cta {
    padding: 58px 20px;
  }
}


/* =========================================================
   v28 — ALL PRODUCTS desktop 4-column hard fix
   ========================================================= */

/* Large desktop: force ALL PRODUCTS to 4 columns.
   ID + class selector and !important intentionally override
   prior generic .product-grid media rules. */
@media (min-width: 1100px) {
  #all-products-grid.product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }

  #all-products-grid .product-card {
    min-width: 0;
  }

  #all-products-grid .product-name {
    font-size: 15px;
    line-height: 1.45;
  }

  #all-products-grid .product-card-body {
    padding: 17px;
  }
}

/* Medium PC / landscape tablet */
@media (min-width: 821px) and (max-width: 1099px) {
  #all-products-grid.product-grid {
    grid-template-columns: repeat(3, minmax(0, 1fr)) !important;
  }
}

/* Tablet */
@media (min-width: 621px) and (max-width: 820px) {
  #all-products-grid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}

/* Mobile */
@media (max-width: 620px) {
  #all-products-grid.product-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  }
}


/* =========================================================
   v29 — Combined hero transition + image text cleanup + 4-col
   ========================================================= */

/* 1) Reduce the visual gap between HERO and SHOP BY NEED */
@media (min-width: 1001px) {
  .hero-inner {
    padding-bottom: 34px !important;
  }

  #shop-by-need.section {
    padding-top: 58px !important;
  }
}

/* Keep a clean but tighter transition on tablet/mobile */
@media (min-width: 621px) and (max-width: 1000px) {
  .hero-inner {
    padding-bottom: 40px !important;
  }

  #shop-by-need.section {
    padding-top: 52px !important;
  }
}

@media (max-width: 620px) {
  .hero-inner {
    padding-bottom: 32px !important;
  }

  #shop-by-need.section {
    padding-top: 44px !important;
  }
}

/* 2) Remove the residual baked-in phrase at the top of the hero photo.
   The source image itself contains the text, so we crop farther into the photo.
   This does not alter the original image file. */
.hero-photo-card {
  overflow: hidden !important;
}

.hero-photo-card img {
  width: 100%;
  height: 100%;
  object-fit: cover !important;
  object-position: center 66% !important;
  transform: scale(1.22) !important;
  transform-origin: center 66% !important;
}

/* Preserve animal faces and avoid excess crop on smaller screens */
@media (max-width: 1000px) {
  .hero-photo-card img {
    object-position: center 62% !important;
    transform: scale(1.16) !important;
    transform-origin: center 62% !important;
  }
}

/* 3) Retain the v28 desktop 4-column catalog fix with strongest specificity */
@media (min-width: 1100px) {
  #all-products-grid.product-grid {
    grid-template-columns: repeat(4, minmax(0, 1fr)) !important;
    gap: 18px !important;
  }
}


/* =========================================================
   v30 — Hero image composition + Brand story typography
   ========================================================= */

/* HERO:
   Previous crop removed the baked-in text but left too much empty area above pets.
   Move the actual image upward inside a fixed card instead of over-scaling it. */
.hero-photo-card {
  height: 430px !important;
  min-height: 430px !important;
}

.hero-photo-card img {
  position: absolute !important;
  left: 0 !important;
  top: -78px !important;
  width: 100% !important;
  height: 520px !important;
  max-width: none !important;
  object-fit: cover !important;
  object-position: center 58% !important;
  transform: none !important;
}

/* Keep caption safely above card bottom */
.hero-photo-caption {
  z-index: 2;
  left: 24px;
  right: 24px;
  bottom: 20px;
  padding: 16px 18px;
}

/* BRAND STORY:
   Give the copy equal horizontal weight and control the heading line break. */
@media (min-width: 1001px) {
  .brand-story {
    grid-template-columns: 1fr 1fr !important;
    gap: 44px !important;
  }

  .brand-story-copy {
    min-width: 0;
    padding-right: 10px;
  }

  .brand-story-copy h2 {
    max-width: 610px;
    margin: 14px 0 22px;
    font-size: 34px !important;
    line-height: 1.24 !important;
    letter-spacing: -0.035em;
  }

  .brand-story-copy h2 > span {
    display: block;
  }

  .brand-story-copy p {
    max-width: 620px;
    font-size: 16px;
    line-height: 1.78;
  }

  .brand-story-image {
    border-radius: 24px;
  }

  .brand-story-image img {
    width: 100%;
    height: auto;
    display: block;
  }
}

/* Tablet: avoid forced desktop line break looking cramped */
@media (min-width: 621px) and (max-width: 1000px) {
  .hero-photo-card {
    height: 390px !important;
    min-height: 390px !important;
  }

  .hero-photo-card img {
    top: -58px !important;
    height: 455px !important;
    object-position: center 58% !important;
  }

  .brand-story-copy h2 > span {
    display: inline;
  }

  .brand-story-copy h2 > span + span::before {
    content: " ";
  }
}

/* Mobile */
@media (max-width: 620px) {
  .hero-photo-card {
    height: 310px !important;
    min-height: 310px !important;
  }

  .hero-photo-card img {
    top: -38px !important;
    height: 360px !important;
    object-position: center 60% !important;
  }

  .brand-story-copy h2 > span {
    display: inline;
  }

  .brand-story-copy h2 > span + span::before {
    content: " ";
  }
}


/* =========================================================
   v31 — Real pet imagery + refined brand visual
   ========================================================= */
.pet-visual {
  position: relative;
  overflow: hidden;
  background: #f6f4ee !important;
  color: transparent;
}

.pet-visual img {
  width: 100%;
  height: 100%;
  display: block;
  object-fit: cover;
  object-position: center;
}

@media (min-width: 1001px) {
  .pet-type-card {
    grid-template-columns: 1fr 1fr !important;
    min-height: 320px !important;
    padding: 30px !important;
    gap: 24px !important;
  }

  .pet-visual {
    min-height: 255px !important;
  }

  .pet-type-card h2 {
    font-size: 27px !important;
    line-height: 1.28 !important;
  }

  .brand-story-visual {
    min-height: 360px !important;
    overflow: hidden;
    background: #f7f3ea !important;
  }

  .brand-story-image img {
    width: 100%;
    height: 100%;
    min-height: 360px;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 1000px) {
  .pet-visual img {
    min-height: 230px;
  }

  .brand-story-image img {
    width: 100%;
    height: auto;
    object-fit: cover;
  }
}


/* =========================================================
   v32 — Brand Story visual refinement
   ========================================================= */

@media (min-width: 1001px) {
  .brand-story {
    grid-template-columns: 1.02fr 0.98fr !important;
    gap: 48px !important;
    align-items: center;
  }

  .brand-story-visual {
    min-height: 390px !important;
    border-radius: 28px;
    overflow: hidden;
    background: #f7f3ea !important;
  }

  .brand-story-image,
  .brand-story-image img {
    width: 100%;
    height: 100%;
  }

  .brand-story-image img {
    min-height: 390px;
    object-fit: cover;
    object-position: center;
    display: block;
  }

  .brand-story-copy {
    padding-left: 6px;
  }

  .brand-story-copy h2 {
    max-width: 620px;
    font-size: 34px !important;
    line-height: 1.24 !important;
    margin-bottom: 24px;
  }

  .brand-story-copy p {
    max-width: 620px;
    line-height: 1.78;
  }
}

/* v33 — Approved-member storefront and bank-transfer checkout */
.member-only { display: none !important; }
body.is-member .member-only { display: block !important; }
body.is-member .member-only[hidden] { display: none !important; }
body.is-member .main-nav { display: flex !important; }
body.is-admin-preview::before { content:"관리자 미리보기 · 주문은 회원 로그인 후 가능합니다"; display:block; position:sticky; top:0; z-index:1000; padding:8px 16px; background:#203f69; color:#fff; text-align:center; font-size:13px; font-weight:800; }
.member-actions { display:flex; align-items:center; gap:8px; }
.member-actions .header-cta { border:0; cursor:pointer; font:inherit; }
#shipping-notice-count{display:inline-flex;align-items:center;justify-content:center;min-width:19px;height:19px;margin-left:3px;padding:0 5px;border-radius:999px;background:#d84b3f;color:#fff;font-size:11px;font-weight:800;box-sizing:border-box}
#shipping-notice-count[hidden]{display:none!important}
.shipping-notice{padding:12px 24px;background:#edf7f3;border-bottom:1px solid #d7e8e2}.shipping-notice>div{display:grid;grid-template-columns:auto 1fr auto auto;align-items:center;gap:12px;max-width:1180px;margin:auto}.shipping-notice-icon{display:inline-flex;align-items:center;justify-content:center;width:30px;height:30px;border-radius:50%;background:#276655;color:#fff;font-weight:900}.shipping-notice p{display:flex;gap:10px;align-items:center;margin:0;color:#49665e;font-size:14px}.shipping-notice strong{color:#173c34}.shipping-notice button{border:0;cursor:pointer}.shipping-notice #shipping-notice-open{border-radius:9px;padding:9px 13px;background:#203f69;color:#fff;font-weight:800}.shipping-notice #shipping-notice-close{padding:4px 6px;background:transparent;color:#60716c;font-size:23px;line-height:1}
#login-open[hidden] { display:none !important; }
.membership-gate { padding:44px 24px 14px; }
.membership-gate > div { max-width:1180px; margin:auto; padding:34px 40px; border:1px solid #d9e5e1; border-radius:28px; background:linear-gradient(135deg,#f0f8f5,#fff); box-shadow:0 18px 50px rgba(23,60,52,.08); }
.membership-gate span { color:#47796d; font-size:12px; font-weight:800; letter-spacing:.2em; }
.membership-gate h2 { margin:10px 0 8px; color:#173c34; font-size:30px; }
.membership-gate p { max-width:660px; color:#5e716c; line-height:1.7; }
.membership-gate > div > div { display:flex; gap:10px; margin-top:20px; }
.member-dialog { width:min(92vw,520px); max-height:90vh; overflow:auto; border:0; border-radius:24px; padding:30px; color:#173c34; box-shadow:0 26px 90px rgba(10,38,31,.3); }
.member-dialog::backdrop { background:rgba(8,28,24,.58); backdrop-filter:blur(4px); }
.dialog-close { position:absolute; top:14px; right:18px; border:0; background:none; color:#61716d; font-size:28px; cursor:pointer; }
.auth-tabs { display:grid; grid-template-columns:1fr 1fr; gap:4px; margin:4px 34px 24px 0; padding:4px; border-radius:12px; background:#eef4f2; }
.auth-tabs button { border:0; border-radius:9px; padding:10px; background:transparent; color:#60716c; font-weight:700; cursor:pointer; }
.auth-tabs button.is-active { background:#fff; color:#173c34; box-shadow:0 2px 8px rgba(23,60,52,.1); }
.member-form { display:grid; gap:13px; }
.member-form[hidden] { display:none; }
.member-form h2,.member-form h3 { margin:0; }.member-form > p { margin:0 0 6px; color:#6d7c78; line-height:1.55; }
.member-form label { display:grid; gap:6px; color:#294b43; font-size:14px; font-weight:700; }
.member-form input,.member-form textarea { width:100%; border:1px solid #cbdad5; border-radius:10px; padding:12px 13px; background:#fff; color:#173c34; font:inherit; box-sizing:border-box; }
.member-form .consent-check { display:flex; grid-template-columns:auto 1fr; align-items:flex-start; gap:9px; line-height:1.5; font-weight:500; }.consent-check input{width:17px;margin-top:2px;}
.form-message { color:#276655 !important; font-size:14px; font-weight:700; white-space:pre-line; }
.cart-dialog { width:min(94vw,720px); }.cart-items { display:grid; gap:10px; margin:20px 0; }
.orders-dialog{width:min(94vw,760px)}.orders-dialog h2{margin:0}.orders-help{margin:8px 32px 20px 0;color:#6d7c78;line-height:1.55}.member-orders{display:grid;gap:12px}.member-order-card{border:1px solid #dce6e2;border-radius:16px;padding:16px;background:#fff}.member-order-head,.member-order-summary,.member-order-tracking{display:flex;align-items:center;justify-content:space-between;gap:14px}.member-order-head strong{display:block;font-size:15px}.member-order-head time{display:block;margin-top:5px;color:#75837f;font-size:12px}.member-order-head>span{border-radius:999px;background:#e8f3ef;padding:6px 10px;color:#285f52;font-size:12px;font-weight:800}.member-order-summary{margin-top:14px;padding-top:14px;border-top:1px solid #edf2f0;color:#60716c;font-size:14px}.member-order-summary strong{color:#173c34;font-size:17px}.member-order-items{display:grid;gap:7px;margin-top:12px;padding:12px;border-radius:11px;background:#fafbf9}.member-order-items>div{display:flex;justify-content:space-between;gap:14px;color:#536963;font-size:13px}.member-order-items b{color:#294b43;white-space:nowrap}.member-order-tracking{margin-top:12px;padding:12px;border-radius:11px;background:#f1f6f4;color:#49665e;font-size:13px}.member-order-tracking b{margin-left:5px;color:#173c34}.member-order-tracking a{border-radius:9px;background:#203f69;padding:8px 12px;color:#fff;text-decoration:none;font-weight:800;white-space:nowrap}.member-order-waiting{margin:12px 0 0;padding:11px 12px;border-radius:10px;background:#f6f7f6;color:#71807c;font-size:13px}
.member-order-refund{margin:12px 0 0;padding:11px 12px;border-radius:10px;background:#eef3fb;color:#203f69;font-size:13px;font-weight:800}.member-order-request{display:grid;gap:9px;margin-top:12px;padding:13px;border:1px solid #e4d6b5;border-radius:12px;background:#fffaf0}.member-order-request label{display:grid;gap:6px;color:#59451d;font-size:13px;font-weight:800}.member-order-request textarea{box-sizing:border-box;width:100%;resize:vertical;border:1px solid #d8cba9;border-radius:9px;background:#fff;padding:9px 10px;font:inherit;color:#243d37}.member-order-request>div{display:flex;gap:8px}.member-order-request button{flex:1;border:1px solid #9a7426;border-radius:9px;background:#fff;padding:9px;color:#755719;font-weight:800;cursor:pointer}.member-order-request button:last-child{border-color:#40638b;color:#203f69}.member-order-request button:disabled{opacity:.55;cursor:wait}.member-order-request small{color:#82745a;font-size:12px;line-height:1.45}
.cart-item { display:grid; grid-template-columns:58px 1fr auto; gap:12px; align-items:center; padding:10px; border:1px solid #e0e8e5; border-radius:14px; }.cart-item img{width:58px;height:58px;object-fit:contain;background:#f6f7f5;border-radius:9px}.cart-item strong{display:block;font-size:14px;line-height:1.4}.cart-item span{display:block;margin-top:5px;color:#667a74;font-size:13px}.cart-quantity{display:flex;align-items:center;gap:8px}.cart-quantity button{width:30px;height:30px;border:1px solid #cad9d4;border-radius:8px;background:#fff;font-size:18px}.cart-total{display:flex;justify-content:space-between;border-top:1px solid #dce6e2;padding:16px 2px;font-weight:700}.cart-total strong{font-size:22px}.checkout-form{margin-top:8px;padding-top:18px;border-top:1px solid #dce6e2}.payment-note{padding:12px;border-radius:10px;background:#eff6f3;color:#294b43!important;font-size:13px}.product-buy-btn:disabled{cursor:not-allowed;opacity:.55}
@media(max-width:760px){body.is-member .main-nav{display:none!important}.member-actions{gap:4px}.member-actions .header-cta{padding:8px 7px;font-size:11px}.shipping-notice{padding:11px 14px}.shipping-notice>div{grid-template-columns:auto 1fr auto;gap:9px}.shipping-notice p{display:block;font-size:13px}.shipping-notice p span{display:block;margin-top:2px}.shipping-notice #shipping-notice-open{grid-column:2;width:max-content}.shipping-notice #shipping-notice-close{grid-column:3;grid-row:1}.membership-gate{padding:24px 16px 0}.membership-gate>div{padding:25px 22px}.membership-gate h2{font-size:25px}.membership-gate>div>div{flex-direction:column}.member-dialog{padding:24px 18px}.member-order-head,.member-order-summary,.member-order-tracking{align-items:flex-start;flex-direction:column}.member-order-tracking a{width:100%;box-sizing:border-box;text-align:center}.cart-item{grid-template-columns:48px 1fr}.cart-item img{width:48px;height:48px}.cart-quantity{grid-column:2}}

@media (min-width: 621px) and (max-width: 1000px) {
  .brand-story-visual {
    min-height: 340px !important;
  }

  .brand-story-image img {
    min-height: 340px;
    object-fit: cover;
    object-position: center;
  }
}

@media (max-width: 620px) {
  .brand-story-visual {
    min-height: 280px !important;
  }

  .brand-story-image img {
    min-height: 280px;
    object-fit: cover;
    object-position: center;
  }
}