@charset "utf-8";

/* Adaptive overrides for unified responsive design */

:root {
  --color-bg: #ffffff;
  --color-text: #111111;
  --color-muted: #666666;
  --color-border: #e5e7ea;
  --color-accent: #111111; /* Block Shop-inspired minimal accent */
  --color-accent-2: #3a8afd; /* keep existing blue for continuity */

  --font-base: system-ui, -apple-system, Segoe UI, Roboto, "Malgun Gothic", sans-serif;
}

html { scroll-behavior: smooth; }
body { font-family: var(--font-base); color: var(--color-text); background: var(--color-bg);
  font-size: clamp(14px, 1.6vw, 16px); line-height: 1.5; }

/* Remove fixed widths and min-widths to enable responsiveness */
#hd, #wrapper, #ft { min-width: 0; }
#hd_pop, #hd_wrapper, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr { width: 100%; max-width: 1200px; margin: 0 auto; padding: 0 16px; }

/* Top bar and header */
#tnb { border-bottom: 1px solid var(--color-border); }
#hd_wrapper { height: auto; padding: 16px 0; }
#logo { padding: 0; }

.hd_sch_wr { width: auto; margin-left: 24px; padding: 0; max-width: 480px; }
#hd_sch { border-radius: 12px; }
#hd_sch #sch_stx, #hd_sch #sch_str { width: calc(100% - 60px); height: 40px; }
#hd_sch #sch_submit { width: 60px; height: 40px; }

.hd_login { top: 16px; }
.hd_login a { color: var(--color-text); }

/* Navigation */
#gnb { background: var(--color-bg); border-bottom: 1px solid var(--color-border); }
#gnb #gnb_1dul { border-bottom: none; display: flex; flex-wrap: wrap; align-items: center; gap: 4px; }
.gnb_1dli { line-height: 48px; }
.gnb_1da { padding: 0 12px; }
#gnb_all { width: 100%; }

/* Product list grids: modern responsive layout */
.sct_10, .sct_20, .sct_30 { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 16px; }
.sct_10 .sct_li, .sct_20 .sct_li, .sct_30 .sct_li { width: auto !important; margin: 0 !important; }
.sct_30 .sct_li { height: auto !important; padding: 0 !important; }
.sct_30 .sct_img { position: relative; }

.sct_40 .sct_img { float: none; margin: 0 0 12px; }
.sct_40 .sct_cost { position: static; font-size: 1.1em; }
.sct_40 .sct_ct_wrap { display: grid; grid-template-columns: 1fr auto; align-items: start; gap: 8px; }

/* Item cards visuals (inspired by Block Shop) */
.sct img { display: block; width: 100%; height: auto; border-radius: 6px; }
.sct_10 .sct_img a, .sct_20 .sct_a, .sct_30 .sct_a { display: block; color: inherit; }
.sct_10 .sct_cart, .sct_40 .sct_cart { border-radius: 6px; transition: opacity 180ms ease; }
.sct_10 .sct_img:hover .sct_cart { opacity: 1; }

.sct_10 .sct_txt, .sct_20 .sct_txt, .sct_30 .sct_txt { font-size: 1em; margin-top: 8px; border: 0; }
.sct_10 .sct_basic { color: var(--color-muted); }
.sct_10 .sct_cost, .sct_20 .sct_cost, .sct_30 .sct_cost { font-weight: 600; font-size: 1.05em; }
.sct_dict { color: #999; }

/* Layout containers */
#container { width: 100%; max-width: 1200px; margin: 20px auto; padding: 0 16px; float: none; }
#aside { width: 260px; }

/* Footer */
#ft_copy { width: 100%; max-width: 1200px; padding: 20px 16px; }

/* Buttons and touch targets */
button, .btn_submit, .btn_frmline { min-height: 44px; padding: 0 14px; border-radius: 6px; }

/* Typography */
h1 { font-size: clamp(22px, 3vw, 28px); }
h2 { font-size: clamp(18px, 2.2vw, 22px); }
h3 { font-size: clamp(16px, 2vw, 20px); }

/* Breakpoints */
@media (max-width: 1024px) {
  .sct_10, .sct_20, .sct_30 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}

@media (max-width: 768px) {
  #tnb .inner, #hd_wrapper { padding: 0 12px; }
  .hd_sch_wr { max-width: none; margin-left: 12px; }
  .hd_login { position: static; display: flex; justify-content: flex-end; margin-top: 8px; }
  #gnb #gnb_1dul { overflow-x: auto; white-space: nowrap; }
  .sct_10, .sct_20, .sct_30 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 480px) {
  #hd_pop, #tnb .inner, #gnb .gnb_wrap, #container_wr, #ft_wr { padding: 0 12px; }
  .sct_10, .sct_20, .sct_30 { grid-template-columns: 1fr; }
  #aside { display: none; }
  #hd_sch #sch_stx, #hd_sch #sch_str { height: 36px; }
  #hd_sch #sch_submit { height: 36px; }
}

/* Subtle transitions */
a, button { transition: color 180ms ease, background-color 180ms ease, opacity 180ms ease; }