@import './variables.css';

*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
a{color:inherit;text-decoration:none}
ul,ol{list-style:none}
button{font:inherit;cursor:pointer;border:none;background:none}
img{max-width:100%;display:block}

html{font-size:16px;scroll-behavior:smooth;-webkit-font-smoothing:antialiased}
body{font-family:var(--font);background:var(--bg);color:var(--text-1);line-height:1.65;min-height:100vh}

/* ── 헤더 ─────────────────────────── */
.site-header{
  position:sticky;top:0;z-index:300;
  background:rgba(247,246,242,.95);
  backdrop-filter:blur(16px);-webkit-backdrop-filter:blur(16px);
  border-bottom:1px solid var(--border);
}
.site-header__inner{
  max-width:var(--max-w);margin:0 auto;padding:0 var(--s5);
  height:60px;display:flex;align-items:center;gap:var(--s4);
}
.site-logo{display:flex;align-items:center;gap:8px;white-space:nowrap}
.site-logo__badge{
  width:30px;height:30px;border-radius:9px;
  background:var(--brand);color:#fff;
  display:flex;align-items:center;justify-content:center;
  font-weight:700;font-size:.75rem;letter-spacing:.02em;flex-shrink:0;
}
.site-logo__text{font-family:var(--font-ser);font-size:1.15rem;font-weight:700;color:var(--brand)}
.site-logo__text em{font-style:normal;color:var(--text-2)}

.nav-search{flex:1;max-width:320px;position:relative}
.nav-search__icon{position:absolute;left:11px;top:50%;transform:translateY(-50%);color:var(--text-4);font-size:14px;pointer-events:none}
.nav-search input{
  width:100%;padding:7px 12px 7px 33px;
  border:1.5px solid var(--border);border-radius:var(--rx);
  background:var(--bg-card);font-size:.84rem;color:var(--text-1);
  outline:none;transition:border-color .15s,box-shadow .15s;
}
.nav-search input:focus{border-color:var(--brand);box-shadow:0 0 0 3px var(--brand-soft)}
.nav-search input::placeholder{color:var(--text-4)}

.site-nav{display:flex;gap:var(--s2);margin-left:auto}
.site-nav a{
  font-size:.83rem;font-weight:500;color:var(--text-3);
  padding:5px 10px;border-radius:var(--r1);
  transition:color .15s,background .15s;
}
.site-nav a:hover{color:var(--brand);background:var(--brand-soft)}
.site-nav a.active{color:var(--brand);font-weight:700}
@media(max-width:780px){.site-nav{display:none}}

/* ── 히어로 ──────────────────────── */
.hero{padding:var(--s7) 0 var(--s6);border-bottom:1px solid var(--border);margin-bottom:var(--s6)}
.hero__tag{
  display:inline-flex;align-items:center;gap:6px;
  font-size:.7rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;
  color:var(--brand);background:var(--brand-soft);
  padding:4px 12px;border-radius:var(--rx);border:1px solid var(--brand-dim);
  margin-bottom:var(--s4);
}
.hero__title{
  font-family:var(--font-ser);
  font-size:clamp(2rem,5vw,3.2rem);
  font-weight:700;line-height:1.12;letter-spacing:-.04em;
  color:var(--text-1);margin-bottom:var(--s5);
}
.hero__title mark{background:none;color:var(--brand);border-bottom:3px solid var(--brand-dim);padding-bottom:1px}
.hero__row{display:flex;gap:var(--s3);max-width:600px}
.search-input-lg{
  flex:1;padding:13px var(--s4);font-size:1rem;
  border:2px solid var(--border-md);border-radius:var(--r3);
  background:var(--bg-card);color:var(--text-1);
  outline:none;transition:border-color .15s,box-shadow .15s;box-shadow:var(--sh1);
}
.search-input-lg:focus{border-color:var(--brand);box-shadow:0 0 0 4px var(--brand-soft),var(--sh1)}
.search-input-lg::placeholder{color:var(--text-4)}
.hero__meta{margin-top:var(--s3);font-size:.78rem;color:var(--text-4);display:flex;align-items:center;gap:var(--s2);flex-wrap:wrap}
.hero__dot{width:3px;height:3px;border-radius:50%;background:var(--border-md)}

/* ── 레이아웃 ────────────────────── */
.container{max-width:var(--max-w);margin:0 auto;padding:0 var(--s5)}
.layout{display:grid;grid-template-columns:var(--side-w) 1fr;gap:var(--s6);align-items:start;padding-bottom:var(--s8)}
@media(max-width:780px){.layout{grid-template-columns:1fr}}

/* ── 결과 바 ─────────────────────── */
.result-bar{display:flex;align-items:center;justify-content:space-between;margin-bottom:var(--s4);flex-wrap:wrap;gap:var(--s2)}
.result-count{font-family:var(--font-mono);font-size:.95rem;font-weight:500;color:var(--text-1)}
.result-count__sub{font-family:var(--font);font-size:.78rem;color:var(--text-4);margin-left:3px}

/* ── 제품 그리드 ─────────────────── */
.product-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(250px,1fr));gap:var(--s4)}

/* ── 더보기 버튼 ─────────────────── */
.load-more{display:flex;flex-direction:column;align-items:center;gap:var(--s3);margin-top:var(--s7)}
.btn-more{
  padding:12px var(--s7);
  background:var(--bg-card);
  border:1.5px solid var(--border-md);
  border-radius:var(--rx);
  font-size:.9rem;font-weight:600;color:var(--text-2);
  transition:all .18s;box-shadow:var(--sh1);
}
.btn-more:hover{background:var(--brand);border-color:var(--brand);color:#fff;box-shadow:var(--sh2);transform:translateY(-1px)}
.btn-more:active{transform:translateY(0)}
.btn-more:disabled{opacity:.4;cursor:not-allowed;transform:none}
.load-more__info{font-size:.78rem;color:var(--text-4);font-family:var(--font-mono)}

/* ── 빈 상태 ─────────────────────── */
.empty{grid-column:1/-1;text-align:center;padding:var(--s8) var(--s5)}
.empty__icon{font-size:2.4rem;margin-bottom:var(--s3)}
.empty__title{font-size:1rem;font-weight:700;color:var(--text-2);margin-bottom:var(--s2)}
.empty__sub{font-size:.875rem;color:var(--text-4)}

/* ── 섹션 타이틀 ─────────────────── */
.sec-title{font-size:.67rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-bottom:var(--s3)}

/* ── 로딩/에러 ───────────────────── */
#app-loading{text-align:center;padding:var(--s7);color:var(--text-4);font-size:.875rem}
#app-error{padding:var(--s4);margin-bottom:var(--s4);background:#fff0f0;border:1px solid #fca5a5;border-radius:var(--r3);color:#991b1b;font-size:.875rem}

/* ── 분리선 ──────────────────────── */
.divider{height:1px;background:var(--border);margin:var(--s6) 0}

/* ── 푸터 ────────────────────────── */
.site-footer{border-top:1px solid var(--border);background:var(--bg-subtle);padding:var(--s7) 0;margin-top:var(--s8)}
.site-footer__grid{max-width:var(--max-w);margin:0 auto;padding:0 var(--s5);display:grid;grid-template-columns:1.4fr repeat(3,1fr);gap:var(--s6)}
@media(max-width:640px){.site-footer__grid{grid-template-columns:1fr 1fr}}
.footer-brand__logo{font-family:var(--font-ser);font-size:1.05rem;font-weight:700;color:var(--brand);margin-bottom:var(--s2)}
.footer-brand__desc{font-size:.78rem;color:var(--text-4);line-height:1.65}
.footer-col__title{font-size:.65rem;font-weight:700;letter-spacing:.1em;text-transform:uppercase;color:var(--text-4);margin-bottom:var(--s3)}
.footer-col a{display:block;font-size:.82rem;color:var(--text-3);margin-bottom:8px;transition:color .15s}
.footer-col a:hover{color:var(--brand)}
.site-footer__bottom{max-width:var(--max-w);margin:var(--s5) auto 0;padding:var(--s4) var(--s5) 0;border-top:1px solid var(--border);font-size:.72rem;color:var(--text-4)}

/* ── 스켈레톤 ────────────────────── */
@keyframes shimmer{0%{background-position:-400% 0}100%{background-position:400% 0}}
.skel{background:linear-gradient(90deg,var(--bg-subtle) 25%,var(--border) 50%,var(--bg-subtle) 75%);background-size:400% 100%;animation:shimmer 1.4s infinite;border-radius:var(--r1)}

/* ── 카드 등장 ───────────────────── */
@keyframes fadeUp{from{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}
.product-card{animation:fadeUp .2s ease both}