/* ============================================================
   SAYOANG — landing (Claude Design "Sayoang.html" native port).
   Foundation: design tokens + fonts + utilities + keyframes.
   Section styles are mostly inline in page-templates/page-main.php
   (ported from the design); this file holds the shared system.
   ============================================================ */

@import url('https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css');
@import url('https://fonts.googleapis.com/css2?family=Noto+Serif+KR:wght@400;500;600;700&family=Cormorant+Garamond:ital,wght@0,400;0,500;0,600;1,400&display=swap');

body { margin: 0; }   /* loaded only on the main landing template */

.sy-root {
  /* Brand */
  --sy-purple:        #7c4dd4;
  --sy-purple-deep:   #5b32a8;
  --sy-purple-soft:   #b89adf;
  --sy-purple-pale:   #e6daf6;
  --sy-purple-mist:   #f4ecfb;
  --sy-purple-bar:    #6f3fcc;
  /* Warm cream palette */
  --sy-cream:         #faf6ef;
  --sy-cream-deep:    #f3ecdf;
  --sy-ivory:         #fffcf7;
  --sy-paper:         #ffffff;
  --sy-sand:          #e8dcc6;
  /* Ink + accents */
  --sy-ink:           #1f1a1f;
  --sy-ink-soft:      #4a4148;
  --sy-mute:          #8e8389;
  --sy-line:          #e8dfd2;
  --sy-line-soft:     #f0e8da;
  /* Functional */
  --sy-rose:          #c98a9c;
  --sy-sage:          #8aa88a;
  --sy-honey:         #d4a857;
  /* Type */
  --sy-sans:   "Pretendard", "Apple SD Gothic Neo", -apple-system, system-ui, sans-serif;
  --sy-serif:  "Noto Serif KR", "Cormorant Garamond", "Apple SD Gothic Neo", serif;
  --sy-display: "Cormorant Garamond", "Noto Serif KR", serif;

  font-family: var(--sy-sans);
  color: var(--sy-ink);
  background: var(--sy-cream);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
  line-height: 1.6;
}
.sy-root *, .sy-root *::before, .sy-root *::after { box-sizing: border-box; }
.sy-root a { text-decoration: none; color: inherit; }
.sy-root button { font-family: inherit; }
.sy-root img { display: block; max-width: 100%; }

/* ---- Type utilities ---- */
.sy-display { font-family: var(--sy-display); font-style: italic; font-weight: 400; letter-spacing: -0.01em; }
.sy-serif   { font-family: var(--sy-serif); letter-spacing: -0.01em; }
.sy-eyebrow { font-family: var(--sy-display); font-style: italic; font-size: 13px; letter-spacing: 0.08em; color: var(--sy-purple); text-transform: uppercase; }

/* ---- Hover lift ---- */
.sy-lift { transition: transform 0.3s ease, box-shadow 0.3s ease; }
.sy-lift:hover { transform: translateY(-3px); }

/* ---- Hide horizontal scrollbars on card tracks ---- */
.sy-track::-webkit-scrollbar { display: none; }
.sy-track { scrollbar-width: none; }

/* ---- Scroll reveal (JS toggles .is-in) ---- */
.sy-reveal { opacity: 0; transform: translateY(26px); }
.sy-reveal.is-in { animation: sy-reveal-up 0.7s cubic-bezier(0.22,0.61,0.36,1) forwards; }
@media (prefers-reduced-motion: reduce) {
  .sy-reveal { opacity: 1; transform: none; }
}

/* ---- Auto-rolling card tracks: hide the scrollbar (WebKit; Firefox uses the
   inline scrollbar-width:none) so the gentle marquee looks clean ---- */
.sy-root [data-screen-label="Best Sellers"] [style*="overflow-x"]::-webkit-scrollbar,
.sy-root [data-screen-label="BEMYPET"] [style*="overflow-x"]::-webkit-scrollbar { display: none; }

/* ---- Header (full-width: logo · 홈/상품 nav · sales-channel buttons) ---- */
.sy-root .sy-channels a { transition: transform .15s ease, box-shadow .15s ease; }
.sy-root .sy-channels a:hover { transform: translateY(-2px); box-shadow: 0 8px 18px -8px rgba(0,0,0,.35); }
@media (max-width: 880px) {
  .sy-root .sy-header-row { display: flex !important; flex-wrap: wrap; justify-content: space-between; gap: 12px 16px; }
  .sy-root .sy-nav { order: 3; width: 100%; justify-content: center; gap: 40px; }
  .sy-root .sy-channels { gap: 6px; flex-wrap: wrap; justify-content: flex-end; }
  .sy-root .sy-channels a { padding: 8px 11px; font-size: 11px; }
}
@media (max-width: 420px) {
  /* Fit all four sales-channel pills on a single row (the longer
     "비마이펫 스토어" label pushed the row to ~351px > the ~324px available).
     The pill styles are inline, so the overrides need !important to win. */
  .sy-root .sy-channels { gap: 4px !important; }
  .sy-root .sy-channels a { padding: 6px 8px !important; font-size: 10px !important; gap: 4px !important; }
}

/* ---- Footer responsive ---- */
@media (max-width: 880px) {
  .sy-root .sy-foot-top { grid-template-columns: 1fr 1fr !important; gap: 36px 24px !important; }
}
@media (max-width: 520px) {
  /* The single-column stack left huge vertical gaps (footer ~990px tall on a
     360px screen). Tighten the desktop paddings and lay the four link groups
     out 2-up; the logo/brand block spans the full width on top. */
  .sy-root footer { padding: 48px 22px 32px !important; }
  .sy-root .sy-foot-top {
    grid-template-columns: 1fr 1fr !important;
    gap: 26px 18px !important;
    padding-bottom: 32px !important;
  }
  .sy-root .sy-foot-top > :first-child { grid-column: 1 / -1; }
  .sy-root .sy-foot-top h4 { margin-bottom: 14px !important; }
  .sy-root .sy-foot-top ul { gap: 10px !important; }
}

/* ---- Wholesale modal ---- */
.sy-modal { position: fixed; inset: 0; z-index: 1000; display: flex; align-items: center; justify-content: center; padding: 20px; }
.sy-modal[hidden] { display: none; }
.sy-modal__overlay { position: absolute; inset: 0; background: rgba(20,15,30,0.55); }
.sy-modal__card { position: relative; z-index: 1; width: 100%; max-width: 540px; background: #fff; border-radius: 20px; padding: 38px 36px; box-shadow: 0 40px 90px -24px rgba(20,15,30,0.55); max-height: 90vh; overflow-y: auto; }
.sy-modal__x { position: absolute; top: 12px; right: 16px; background: none; border: 0; font-size: 28px; line-height: 1; color: var(--sy-mute); cursor: pointer; }
.sy-modal .sy-wform input:focus, .sy-modal .sy-wform textarea:focus { outline: none; border-color: var(--sy-purple); }
@media (max-width: 520px) {
  .sy-modal__card { padding: 26px 22px; }
  .sy-modal__card div[style*="grid-template-columns:1fr 1fr"] { grid-template-columns: 1fr !important; }
}

/* ---- Products grid (native /products/ page) ---- */
.sy-root .sy-pgrid { display: grid; grid-template-columns: repeat(4, 1fr); gap: clamp(16px, 2vw, 28px); }
.sy-root .sy-pcard { display: flex; flex-direction: column; background: var(--sy-paper); border: 1px solid var(--sy-line-soft); border-radius: 18px; overflow: hidden; }
.sy-root .sy-pcard__img { aspect-ratio: 1 / 1; background: var(--sy-cream); }
.sy-root .sy-pcard__img img { width: 100%; height: 100%; object-fit: cover; }
.sy-root .sy-pcard__body { padding: 18px 18px 22px; }
.sy-root .sy-pcard__cat { font-size: 11px; letter-spacing: 0.04em; color: var(--sy-purple); font-weight: 700; }
.sy-root .sy-pcard__name { margin: 8px 0 0; font-size: 15px; font-weight: 700; line-height: 1.4; color: var(--sy-ink); letter-spacing: -0.02em; }
.sy-root .sy-pcard__price { margin-top: 12px; font-size: 17px; font-weight: 900; color: var(--sy-ink); letter-spacing: -0.02em; }
@media (max-width: 900px) { .sy-root .sy-pgrid { grid-template-columns: repeat(3, 1fr); } }
@media (max-width: 640px) { .sy-root .sy-pgrid { grid-template-columns: repeat(2, 1fr); gap: 14px; } }

/* ---- Mobile responsive: collapse the ported inline-grid layouts ----
   The landing was captured at desktop width with inline grid-template-columns,
   which override stylesheet @media rules — so we re-target the inline styles by
   attribute substring + !important to stack them on small screens. ---- */
@media (max-width: 820px) {
  .sy-root [style*="grid-template-columns: 1.05fr 0.95fr"],
  .sy-root [style*="grid-template-columns: 1.35fr 1fr"],
  .sy-root [style*="grid-template-columns: 0.82fr 1.18fr"],
  .sy-root [style*="grid-template-columns: 1.05fr 1.05fr"],
  .sy-root [style*="grid-template-columns: 1.1fr 1fr"],
  .sy-root [style*="grid-template-columns: 1fr 1fr"],
  .sy-root [style*="grid-template-columns: 1fr 2fr"],
  .sy-root [style*="grid-template-columns: 240px 1fr"],
  .sy-root [style*="grid-template-columns: 120px 1fr"],
  .sy-root [style*="grid-template-columns: minmax(0px, 1.05fr) minmax(0px, 1fr)"] {
    /* minmax(0,1fr) — a bare 1fr keeps an implicit min-content minimum, so a
       fixed-width child (e.g. h2 width:560px + keep-all KR) would force the
       track wider than the viewport and get clipped by the section overflow. */
    grid-template-columns: minmax(0, 1fr) !important;
  }
  /* Ported markup hard-codes desktop pixel widths inline (h2 width:560px,
     text columns width:540px, …). On a narrow column these spill past the
     section's overflow:hidden and crop. Cap every in-flow box to its column.
     Exclude aria-hidden decoration (absolute blur blobs that are meant to be
     oversized and are already clipped) and SVG icons (fixed geometry). */
  .sy-root *:not([aria-hidden="true"]):not(svg):not(svg *) {
    max-width: 100% !important;
  }
  /* Grid items default to min-width:auto, so a fixed-width child (h2 width:700px)
     sets the item's min-content and inflates even a minmax(0,1fr) track past the
     viewport. min-width:0 lets the item — and thus the track — shrink. Scoped to
     grid children only (the horizontal card scrollers use flex, not
     grid-template-columns, so they are untouched). */
  .sy-root [style*="grid-template-columns"] > * { min-width: 0 !important; }
  /* Hero: a wide landscape image cover-crops badly in a tall portrait box on
     mobile. Stack instead — show the FULL image, text below it. */
  .sy-root section[data-screen-label="Hero Slider"] {
    height: auto !important;
    min-height: 0 !important;
    display: flex !important;
    flex-direction: column !important;
  }
  .sy-root section[data-screen-label="Hero Slider"] > img {
    position: relative !important;
    inset: auto !important;
    height: auto !important;
    object-fit: contain !important;
    order: 1;
  }
  .sy-root section[data-screen-label="Hero Slider"] > div {
    position: relative !important;
    height: auto !important;
    order: 2;
    padding: 30px 24px 40px !important;
    justify-content: flex-start !important;
  }
  /* media inside the New Product block must never exceed the column */
  .sy-root .sy-np-grid img,
  .sy-root .sy-np-grid iframe { max-width: 100% !important; height: auto; }
}
@media (max-width: 680px) {
  .sy-root [style*="grid-template-columns: repeat(3, 1fr)"],
  .sy-root [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) !important;
  }
}
@media (max-width: 460px) {
  .sy-root [style*="grid-template-columns: repeat(3, 1fr)"],
  .sy-root [style*="grid-template-columns: repeat(4, 1fr)"] {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

/* ---- Mobile spacing polish: trim heavy desktop section paddings ---- */
@media (max-width: 640px) {
  .sy-root section[data-screen-label="Best Sellers"]    { padding: 72px 0 80px !important; }
  .sy-root section[data-screen-label="New Product"]     { padding: 80px 20px 90px !important; }
  .sy-root section[data-screen-label="Sayoang Friends"] { padding: 84px 18px 96px !important; }
  .sy-root section[data-screen-label="Brand Intro"]     { padding: 80px 22px 90px !important; }
}

/* ---- Keyframes (from the design sections) ---- */
@keyframes sy-reveal-up { from { opacity: 0; transform: translateY(26px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sy-bounce    { 0%,100% { transform: scaleY(1); } 50% { transform: scaleY(0.4) translateY(8px); } }
@keyframes sy-twinkle   { 0%,100% { opacity: 0.3; transform: scale(0.9); } 50% { opacity: 1; transform: scale(1.25); } }
@keyframes sy-slide-fade{ from { opacity: 0; transform: translateY(8px); } to { opacity: 1; transform: translateY(0); } }
@keyframes sy-float     { 0%,100% { transform: translateY(0); } 50% { transform: translateY(-12px); } }
@keyframes sy-spin      { from { transform: rotate(0deg); } to { transform: rotate(360deg); } }
@keyframes sy-pulse     { 0%,100% { opacity: 1; transform: scale(1); } 50% { opacity: 0.6; transform: scale(0.85); } }