/* =============================================================
   common.css — Base styles shared by every page
   Style: simple/minimal (black-and-white based), like a clean fashion store
   Accent color: purple → used only where it's truly needed, e.g. buttons, badges, active states!
   ※ Since this file is shared, try not to touch it;
     change each page's own design in home.css / category.css ...

   -------------------------------------------------------------
   📱→💻 HOW RESPONSIVE WORKS IN THIS FILE
   This is "mobile-first": the plain rules are the PHONE design, and each
   section keeps its OWN wider-screen tweaks right below it, inside:
       @media (min-width: 768px)  → 📱 TABLET  and up
       @media (min-width: 1024px) → 💻 DESKTOP and up
       @media (min-width: 1600px) → 🖥️ very wide monitors
   So to change how ONE part looks on a big screen, edit the @media block
   that sits directly under that part — you won't affect anything else.
   ============================================================= */

@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/static/pretendard.css");

/* =============================================================
   🎨 THEME TOKENS  ← THE MAIN "SETTINGS" SPOT
   -------------------------------------------------------------
   The values below are reused all over the site. Change one here and it
   updates everywhere at once. This is the first place to customize.
   ✏️ CHANGE ME: --purple is the accent color (buttons, prices, badges, logo).
      Try replacing #6b4eff with your own color, e.g. #ff5a5f (red) or #10b981 (green).
   🔤 TEXT SIZES: the --fs-* tokens below control the overall lettering sizes.
   ============================================================= */
:root {
  /* ---- Accent color (purple) — used only occasionally, for emphasis ---- */
  --purple:      #142cb4;   /* ← main accent color: change this first */
  --purple-dark: #0f3d99;   /* darker shade, used on button hover */
  --purple-soft: #7fb3ff;
  --purple-050:  #eef6ff;   /* very light background for purple hover */
  --purple-100:  #dbeafe;

  /* ---- The base is black/white/gray — the heart of minimalism ---- */
  --bg:      #ffffff;
  --text:    #111111;   /* nearly black */
  --muted:   #8e8e8e;   /* gray (secondary text) */
  --line:    #ededed;   /* thin border line */
  --surface: #f5f5f5;   /* thumbnail/tile background (light gray) */

  /* ---- 🔤 Text sizes — change the site-wide lettering sizes here ---- */
  /* (These set the PHONE sizes. A few parts get bigger on tablet/desktop —
     those tweaks live in the @media blocks next to each part.) */
  --fs-logo:  21px;   /* header logo (the shop name) */
  --fs-title: 19px;   /* section headings (e.g. "Popular Products") */
  --fs-name:  14px;   /* product name in the list cards */
  --fs-price: 15px;   /* price in lists / ranking */
  --fs-btn:   17px;   /* button text */
  --fs-detail-name:  24px;   /* product name on the detail page */
  --fs-detail-price: 26px;   /* price on the detail page */

  /* ---- Corner roundness (bigger = more rounded) ---- */
  --r-lg: 10px;
  --r-md: 6px;
  --r-sm: 4px;
  --r-pill: 999px;      /* fully round (pills/badges) */

  /* ---- Shadows are barely used → instead, separate things with thin lines (--line) ---- */
  --shadow:      0 1px 3px rgba(0, 0, 0, .06);
  --shadow-soft: 0 1px 2px rgba(0, 0, 0, .04);
  --shadow-btn:  none;

  /* ---- Max width of the screen container ---- */
  /* Starts phone-sized; the .app section below widens it on bigger screens. */
  --app-w: 480px;
}

/* =============================================================
   BASE RESET  (rarely needs changing)
   ============================================================= */
* , *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  font-family: "Pretendard", -apple-system, "Apple SD Gothic Neo", sans-serif;
  color: var(--text);
  background: var(--bg); /* same white as the content area → no separate background shows on the sides */
  -webkit-font-smoothing: antialiased;
  overflow-x: hidden;
}
a { color: inherit; }
img { max-width: 100%; }

/* =============================================================
   APP CONTAINER  (.app = the whole phone-sized screen)
   Mobile first — on wide screens it becomes a single centered column,
   then fills the full width on desktop.
   ============================================================= */
.app {
  position: relative;
  width: 100%;
  max-width: var(--app-w);
  margin-inline: auto;
  min-height: 100dvh;
  background: var(--bg);
  display: flex;
  flex-direction: column;
}

/* 📱→💻 RESPONSIVE (app container width) */
@media (min-width: 768px) {   /* 📱 TABLET  */ :root { --app-w: 720px; } }
@media (min-width: 1024px) {  /* 💻 DESKTOP */ :root { --app-w: 100%;  } } /* remove the centered-column limit to fill the width */

/* =============================================================
   HEADER  (top bar: menu · logo · bell · cart, and the search box)
   ============================================================= */
.app-header {
  position: sticky;
  top: 0;
  z-index: 30;
  background: var(--bg);
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--line);
}
.app-header .bar { display: flex; align-items: center; gap: 12px; }
.app-header .logo {
  font-size: var(--fs-logo);
  font-weight: 800;
  text-decoration: none;
  letter-spacing: -.04em;   /* the logo uses the accent color (purple) + tight spacing → looks like a brand */
  color: var(--purple);
}
.app-header .actions {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 6px;
}
.icon-btn {
  position: relative;
  width: 42px;
  height: 42px;
  border: 0;
  background: none;
  border-radius: 12px;
  color: var(--text);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}
.icon-btn:hover { background: var(--surface); }
.icon-btn svg { width: 24px; height: 24px; }

/* Red notification dot */
#bellBtn .dot {
  position: absolute;
  top: 9px; right: 10px;
  width: 8px; height: 8px;
  background: #ff4d6d;
  border-radius: 50%;
  border: 2px solid #fff;
}
/* Cart number badge */
.cart-badge {
  position: absolute;
  top: 5px; right: 4px;
  min-width: 18px; height: 18px;
  padding: 0 5px;
  background: var(--purple);
  color: #fff;
  font-size: 11px;
  font-weight: 800;
  border-radius: var(--r-pill);
  display: flex;
  align-items: center;
  justify-content: center;
  border: 2px solid #fff;
}

/* Search box — light gray background + squared corners */
.searchbar {
  margin-top: 12px;
  display: flex;
  align-items: center;
  gap: 10px;
  background: var(--surface);
  border-radius: var(--r-md);
  padding: 0 14px;
  height: 44px;
}
.searchbar svg { width: 20px; height: 20px; color: var(--muted); flex: 0 0 auto; }
.searchbar input {
  flex: 1;
  border: 0;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text);
}
.searchbar input::placeholder { color: var(--muted); }

/* Notification panel */
.notif-panel {
  position: absolute;
  right: 16px;
  top: 62px;
  width: 250px;
  background: #fff;
  border-radius: var(--r-md);
  box-shadow: var(--shadow);
  border: 1px solid var(--line);
  padding: 8px;
  opacity: 0;
  transform: translateY(-8px);
  pointer-events: none;
  transition: .18s ease;
  z-index: 40;
}
.notif-panel.open { opacity: 1; transform: translateY(0); pointer-events: auto; }
.notif-panel .notif-title { font-weight: 800; font-size: 14px; padding: 8px 10px; }
.notif-panel ul { list-style: none; margin: 0; padding: 0; }
.notif-panel li {
  display: flex; align-items: center; gap: 10px;
  padding: 11px 10px; border-radius: 10px;
  font-size: 14px; line-height: 1.35;
}
.notif-panel li:hover { background: var(--surface); }

/* 📱→💻 RESPONSIVE (header) — make the search bar taller as it widens */
@media (min-width: 768px) {   /* 📱 TABLET  */
  .searchbar { height: 52px; margin-top: 14px; }
  .searchbar input { font-size: 16px; }
}
@media (min-width: 1024px) {  /* 💻 DESKTOP */
  .searchbar { height: 58px; }
}

/* =============================================================
   LEFT-SIDE MENU DRAWER  (slides in when you tap the ☰ menu)
   ============================================================= */
.drawer-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, .4);
  opacity: 0;
  pointer-events: none;
  transition: opacity .22s ease;
  z-index: 50;
}
.drawer-overlay.show { opacity: 1; pointer-events: auto; }
.drawer {
  position: fixed;
  top: 0; left: 0;
  width: 78%;
  max-width: 300px;
  height: 100%;
  background: #fff;
  z-index: 60;
  transform: translateX(-100%);
  transition: transform .25s ease;
  padding: 16px 14px;
  overflow-y: auto;
  box-shadow: 8px 0 30px rgba(0,0,0,.12);
}
.drawer.open { transform: translateX(0); }
.drawer-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 10px;
}
.drawer-logo { font-size: 20px; font-weight: 800; color: var(--purple); letter-spacing: -.04em; }
.drawer-link {
  display: block;
  padding: 13px 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-weight: 700;
  font-size: 16px;
}
.drawer-link:hover { background: var(--surface); }
.drawer-section {
  margin: 14px 12px 6px;
  font-size: 12px;
  font-weight: 700;
  color: var(--muted);
}
.drawer-cat {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px;
  border-radius: var(--r-md);
  text-decoration: none;
  font-size: 15px;
  font-weight: 600;
}
.drawer-cat:hover { background: var(--surface); }

/* 📱→💻 RESPONSIVE (drawer) — a touch wider on desktop */
@media (min-width: 1024px) {  /* 💻 DESKTOP */
  .drawer { max-width: 320px; }
}

/* =============================================================
   MAIN / SHARED SECTION HEADINGS
   .main   = the content area below the header (its side padding grows on big screens)
   .section-head = a section title row (e.g. "Popular Products" + "View all")
   ============================================================= */
.main { flex: 1; padding: 16px 16px 40px; }
.section { margin-top: 26px; }
.section-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  margin-bottom: 14px;
}
.section-head h2 { margin: 0; font-size: var(--fs-title); font-weight: 800; letter-spacing: -.03em; }
.section-head .more { font-size: 13px; color: var(--muted); font-weight: 600; text-decoration: none; }
.section-head .more:hover { color: var(--text); }

/* 📱→💻 RESPONSIVE (main padding + heading size grow with the screen) */
@media (min-width: 768px) {   /* 📱 TABLET  */
  .main { padding: 20px 24px 48px; }
  .section-head h2 { font-size: 21px; }
}
@media (min-width: 1024px) {  /* 💻 DESKTOP */
  .main { padding: 24px 40px 56px; }
}
@media (min-width: 1600px) {  /* 🖥️ very wide */
  .main { padding: 28px 80px 64px; }
}

/* =============================================================
   PRODUCT THUMBNAIL IMAGE — the product photo fills a white tile
   (separated only by a thin line; a clean, photo-focused card with no shadow)
   ============================================================= */
.thumb {
  overflow: hidden;
  background: #fff;
  border: 1px solid var(--line);
}
.thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }

/* =============================================================
   PRODUCT CARD GRID  (shared by home · category)
   ============================================================= */
.product-grid {
  display: grid;
  /* 🔢 NUMBER OF COLUMNS on phones. "repeat(2, 1fr)" = 2 equal columns.
     ✏️ CHANGE ME: use 3 for three-across, 1 for a single column, etc.
     (On tablets/desktops the count is set in the responsive block just below.) */
  grid-template-columns: repeat(2, 1fr);
  /* Spacing between cards: "24px" up-and-down, "14px" left-and-right. */
  gap: 24px 14px;
  margin-top: 18px;
}
.product-card { text-decoration: none; color: inherit; }
.product-card .thumb {
  aspect-ratio: 1 / 1;
  border-radius: var(--r-md);
}
.product-card .body { padding: 10px 2px 0; }
.product-card .name { font-size: var(--fs-name); font-weight: 500; line-height: 1.4; }
.product-card .price { margin-top: 5px; font-size: var(--fs-price); font-weight: 800; color: var(--purple); }

/* 📱→💻 RESPONSIVE (product grid) */
@media (min-width: 768px) {   /* 📱 TABLET and up */
  /* Automatically fit as many ~200px columns as the row allows */
  .product-grid { grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 30px 18px; }
}

/* =============================================================
   BUTTONS
   ✏️ CHANGE ME: button height/size lives in ".btn"; the main button
      color is the purple accent set in ".btn-primary".
   ============================================================= */
.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  height: 54px;               /* ← button height */
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-btn);   /* ← button text size */
  font-weight: 800;
  cursor: pointer;
  text-decoration: none;
  transition: transform .12s ease, background .12s ease;
}
.btn:active { transform: scale(.99); }
/* Primary button: accent color (purple) — the most prominent "action" spot on screen */
.btn-primary { background: var(--purple); color: #fff; flex: 1; }
.btn-primary:hover { background: var(--purple-dark); }
/* Secondary button (wishlist, etc.): just a thin outline */
.btn-ghost {
  background: #fff;
  color: var(--text);
  border: 1px solid var(--line);
  flex: 0 0 auto;
  width: 54px;
}
.btn-ghost:hover { background: var(--surface); }
.btn-ghost svg { width: 24px; height: 24px; }
.btn-block { width: 100%; }
/* Black button — alternate emphasis (add the class when needed) */
.btn-dark { background: var(--text); color: #fff; }
.btn-dark:hover { background: #333; }

/* =============================================================
   QUANTITY STEPPER BUTTONS  (shared by detail · cart)
   ★ inline-flex + fit-content so it only takes up as much space as its content (the buttons)
     → the bar doesn't stretch out long in the cart.
   ============================================================= */
.stepper {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  width: fit-content;
  background: #fff;
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  padding: 3px;
}
.stepper button {
  width: 32px; height: 32px;
  border: 0;
  background: #fff;
  border-radius: var(--r-sm);
  font-size: 18px;
  font-weight: 700;
  color: var(--text);
  cursor: pointer;
}
.stepper button:hover { background: var(--surface); }
.stepper .num { min-width: 28px; text-align: center; font-weight: 800; }

/* =============================================================
   EMPTY-STATE MESSAGE / BACK BUTTON
   ============================================================= */
.empty { text-align: center; color: var(--muted); padding: 60px 20px; }
.empty .e { font-size: 46px; }
.empty p { margin: 12px 0 0; font-size: 15px; }

.back-btn {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  background: none;
  border: 0;
  color: var(--text);
  font-family: inherit;
  font-size: 15px;
  font-weight: 700;
  cursor: pointer;
  padding: 4px 0;
  text-decoration: none;
}
.back-btn svg { width: 22px; height: 22px; }

/* =============================================================
   BOTTOM FIXED BAR  (e.g. the add-to-cart button on the detail page)
   Centered to match the container width (--app-w)
   ============================================================= */
.bottom-bar {
  position: fixed;
  left: 50%;
  transform: translateX(-50%);
  bottom: 0;
  width: 100%;
  max-width: var(--app-w);
  display: flex;
  gap: 12px;
  padding: 14px 16px calc(14px + env(safe-area-inset-bottom));
  background: rgba(255,255,255,.94);
  backdrop-filter: blur(8px);
  border-top: 1px solid var(--line);
  z-index: 20;
}

/* =============================================================
   TOAST MESSAGE  (the little popup like "Added to cart")
   ============================================================= */
.toast {
  position: fixed;
  left: 50%;
  bottom: 92px;
  transform: translate(-50%, 20px);
  background: #111111;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  padding: 12px 20px;
  border-radius: var(--r-pill);
  box-shadow: 0 10px 30px rgba(0,0,0,.3);
  opacity: 0;
  pointer-events: none;
  transition: .25s ease;
  z-index: 100;
  white-space: nowrap;
}
.toast.show { opacity: 1; transform: translate(-50%, 0); }