/* KEAUTY.NET — Design System v1.0 */
/* AIXXALL K-Beauty Platform */

:root {
  /* ═══ Colors ═══ */
  --pk:    #2563eb;
  --pk2:   #1d4ed8;
  --gold:  #f59e0b;
  --accent:#2563eb;
  --accent2:#1e40af;

  --bg:    #fafafa;
  --bg2:   #f4f4f5;
  --card:  #ffffff;
  --tx:    #1a1a2e;
  --tx2:   #666677;
  --tx3:   #9999aa;
  --bd:    #e5e7eb;
  --bd2:   #d1d5db;

  --dark-bg:    #0f0823;
  --dark-card:  #1a1035;
  --dark-bd:    rgba(255,255,255,.08);

  /* ═══ Typography ═══ */
  --font-kr: 'Noto Sans KR', sans-serif;
  --font-en: 'DM Serif Display', serif;

  /* ═══ Spacing ═══ */
  --gap: 12px;
  --radius: 14px;
  --max-w: 1200px;

  /* ═══ Shadows ═══ */
  --shadow-sm: 0 1px 3px rgba(0,0,0,.06);
  --shadow-md: 0 4px 20px rgba(0,0,0,.08);
  --shadow-pk: 0 8px 40px rgba(37,99,235,.15);
}

/* ═══ Reset ═══ */
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0}
html{scroll-behavior:smooth}
body{
  font-family:var(--font-kr);font-size:14px;color:var(--tx);
  background:var(--bg);line-height:1.6;min-height:100vh;
  -webkit-font-smoothing:antialiased;
}
a{color:inherit;text-decoration:none}
img{max-width:100%;display:block}
button{font-family:inherit;cursor:pointer;border:none}
input,select,textarea{font-family:inherit}

/* ═══ Layout ═══ */
.container{max-width:var(--max-w);margin:0 auto;padding:0 20px}

/* ═══ Header ═══ */
#site-header{
  background:var(--card);border-bottom:1px solid var(--bd);
  position:sticky;top:0;z-index:100;
  backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);
  background:rgba(255,255,255,.92);
}
.header-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 20px;
  display:flex;align-items:center;justify-content:space-between;height:56px;
}
.header-logo{
  font-size:22px;font-weight:900;color:var(--tx);
  display:flex;align-items:center;gap:8px;
}
.header-logo span{color:var(--pk)}
.header-nav{display:flex;gap:6px;align-items:center}
.header-nav a{
  font-size:12px;font-weight:600;color:var(--tx2);
  padding:6px 12px;border-radius:8px;transition:all .2s;
}
.header-nav a:hover,.header-nav a.active{background:var(--bg2);color:var(--tx)}
.header-nav a.btn-sm{
  background:var(--pk);color:#fff;padding:6px 14px;border-radius:20px;
  font-weight:700;font-size:11px;
}

/* ═══ Footer ═══ */
#site-footer{
  border-top:1px solid var(--bd);background:var(--card);
  padding:32px 0;margin-top:48px;
}
.footer-inner{
  max-width:var(--max-w);margin:0 auto;padding:0 20px;
  display:grid;grid-template-columns:2fr 1fr 1fr;gap:24px;
}
.footer-col h4{font-size:13px;font-weight:700;margin-bottom:10px}
.footer-col a,.footer-col p{font-size:12px;color:var(--tx3);display:block;margin-bottom:6px}
.footer-bottom{
  max-width:var(--max-w);margin:20px auto 0;padding:16px 20px 0;
  border-top:1px solid var(--bd);text-align:center;
  font-size:11px;color:var(--tx3);
}

/* ═══ Sections ═══ */
.sec-hdr{
  display:flex;align-items:center;justify-content:space-between;
  margin:28px 0 14px;
}
.sec-title{font-size:18px;font-weight:900}
.sec-more{font-size:12px;color:var(--accent);font-weight:600}
.sec-more:hover{text-decoration:underline}

/* ═══ Grids ═══ */
.prod-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.rank-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:var(--gap)}
.rv-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:var(--gap)}
.news-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:var(--gap)}

/* ═══ Product Card ═══ */
.prod-card{
  background:var(--card);border:1px solid var(--bd);
  border-radius:var(--radius);padding:16px;
  transition:all .2s;display:block;cursor:pointer;
}
.prod-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.prod-img{font-size:40px;text-align:center;margin-bottom:10px}
.prod-brand{font-size:10px;color:var(--tx3);text-transform:uppercase;font-weight:600;letter-spacing:.05em}
.prod-name{font-size:13px;font-weight:700;margin:4px 0;line-height:1.4}
.prod-price{font-size:14px;font-weight:900;color:var(--accent)}
.prod-rating{font-size:11px;color:var(--gold);margin-top:4px}
.prod-tags{display:flex;gap:3px;flex-wrap:wrap;margin-top:6px}
.prod-tag{font-size:9px;padding:2px 6px;background:var(--bg2);border-radius:4px;color:var(--tx3)}

/* ═══ Ranking Card ═══ */
.rank-card{
  position:relative;background:var(--card);border:1px solid var(--bd);
  border-radius:var(--radius);padding:16px;display:block;
  transition:all .2s;
}
.rank-card:hover{border-color:var(--accent);box-shadow:var(--shadow-md)}
.rank-num{
  position:absolute;top:10px;left:10px;
  width:24px;height:24px;border-radius:50%;
  background:var(--accent);color:#fff;font-size:11px;font-weight:900;
  display:flex;align-items:center;justify-content:center;
}
.rank-card:nth-child(-n+3) .rank-num{background:var(--pk)}
.rank-card:nth-child(1) .rank-num{background:linear-gradient(135deg,var(--gold),#e8a820)}
.rank-img{font-size:36px;text-align:center;margin:4px 0 8px}
.rank-brand{font-size:10px;color:var(--tx3);text-align:center;font-weight:600}
.rank-name{font-size:13px;font-weight:700;text-align:center;margin:4px 0}
.rank-price{font-size:14px;font-weight:900;color:var(--accent);text-align:center}

/* ═══ Review Card ═══ */
.rv-card{
  background:var(--card);border:1px solid var(--bd);
  border-radius:var(--radius);padding:16px;
}
.rv-user{font-size:12px;font-weight:700;margin-bottom:6px;display:flex;align-items:center;gap:8px}
.rv-stars{color:var(--gold);font-size:11px}
.rv-text{font-size:13px;color:var(--tx2);line-height:1.6}
.rv-badge{margin-bottom:8px}

/* ═══ News Item ═══ */
.news-item{
  background:var(--card);border:1px solid var(--bd);
  border-radius:var(--radius);padding:18px;display:block;
  transition:all .2s;
}
.news-item:hover{border-color:var(--accent)}
.news-date{font-size:11px;color:var(--tx3);margin-bottom:6px}
.news-title{font-size:14px;font-weight:700;margin-bottom:6px}
.news-desc{font-size:12px;color:var(--tx2);line-height:1.5}

/* ═══ Buttons ═══ */
.btn-pk,.btn-out,.btn-ghost{
  display:inline-flex;align-items:center;gap:6px;
  padding:10px 20px;border-radius:10px;font-size:13px;font-weight:700;
  transition:all .2s;
}
.btn-pk{background:var(--pk);color:#fff}
.btn-pk:hover{background:var(--pk2)}
.btn-out{background:var(--card);color:var(--pk);border:1.5px solid var(--bd)}
.btn-out:hover{border-color:var(--pk)}
.btn-ghost{background:rgba(255,255,255,.1);color:#fff;border:1px solid rgba(255,255,255,.2)}
.btn-ghost:hover{background:rgba(255,255,255,.2)}

/* ═══ Product Detail ═══ */
.prod-detail{display:grid;grid-template-columns:1fr 1fr;gap:32px;margin-top:24px}
.prod-hero{text-align:center;padding:40px;background:var(--bg2);border-radius:var(--radius)}
.prod-hero .emoji{font-size:80px}
.prod-info h1{font-size:24px;font-weight:900;margin-bottom:6px}
.prod-info .brand{font-size:12px;color:var(--tx3);margin-bottom:12px}
.prod-info .price{font-size:24px;font-weight:900;color:var(--accent);margin-bottom:16px}
.prod-info .desc{font-size:14px;color:var(--tx2);line-height:1.8;margin-bottom:20px}
.prod-meta{display:grid;grid-template-columns:1fr 1fr;gap:12px;margin-top:20px}
.prod-meta div{font-size:12px;color:var(--tx3)}
.prod-meta strong{color:var(--tx);display:block;font-size:11px}

/* ═══ Fortune Section ═══ */
.fortune-banner{
  background:linear-gradient(135deg,#1a0a2e,#2d1250);
  border-radius:var(--radius);padding:28px 32px;margin:28px 0;
  display:grid;grid-template-columns:1fr auto;align-items:center;color:#fff;
}
.fortune-banner h2{font-size:22px;font-weight:900;margin-bottom:6px}
.fortune-banner p{font-size:13px;color:rgba(255,255,255,.65);margin-bottom:16px}

/* ═══ Category Page ═══ */
.cat-header{text-align:center;padding:32px 0 20px}
.cat-header h1{font-size:28px;font-weight:900;margin-bottom:6px}
.cat-header .cat-emoji{font-size:48px;margin-bottom:12px}
.filter-bar{display:flex;gap:8px;margin-bottom:20px;flex-wrap:wrap}
.filter-chip{
  padding:6px 14px;border-radius:20px;font-size:11px;font-weight:600;
  background:var(--card);border:1.5px solid var(--bd);color:var(--tx2);cursor:pointer;
  transition:all .2s;
}
.filter-chip.active{background:var(--accent);color:#fff;border-color:var(--accent)}

/* ═══ Touch of AI Badge ═══ */
.ai-badge{
  display:inline-flex;align-items:center;gap:4px;
  padding:3px 8px;background:linear-gradient(135deg,#2563eb,#3b82f6);
  color:#fff;font-size:9px;font-weight:700;border-radius:6px;
  margin-left:6px;
}

/* ═══ Responsive ═══ */
@media (max-width:1024px){
  #cat-links{grid-template-columns:repeat(4,1fr)!important}
  .prod-grid{grid-template-columns:repeat(3,1fr)}
  .rank-grid{grid-template-columns:repeat(3,1fr)}
}

@media (max-width:768px){
  .container{padding:0 12px}
  /* Header */
  .header-inner{height:auto;flex-wrap:wrap;padding:10px 12px;gap:8px}
  .header-nav{overflow-x:auto;white-space:nowrap;width:100%;-webkit-overflow-scrolling:touch;padding-bottom:4px}
  .header-nav a{flex-shrink:0;font-size:11px;padding:5px 10px}

  /* Hero */
  [style*="grid-template-columns:1fr auto"]{grid-template-columns:1fr!important}
  [style*="width:200px"]{width:100%!important;max-width:200px;margin:0 auto}

  /* Categories */
  #cat-links{grid-template-columns:repeat(3,1fr)!important}

  /* Grids */
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .rank-grid{grid-template-columns:repeat(2,1fr);gap:8px}
  .rv-grid{grid-template-columns:1fr}
  .news-grid{grid-template-columns:1fr}
  .prod-detail{grid-template-columns:1fr}
  .prod-detail .prod-hero{padding:24px}
  .prod-detail .prod-hero .emoji{font-size:56px}
  .prod-info h1{font-size:18px}

  /* Footer */
  .footer-inner{grid-template-columns:1fr;gap:16px}
  .footer-bottom{font-size:10px}

  /* Fortune */
  .fortune-banner{grid-template-columns:1fr;text-align:center;padding:20px}
  .fortune-banner h2{font-size:18px}
  .fortune-banner [style*="font-size:64px"]{font-size:40px!important}

  /* Category header */
  .cat-header{padding:20px 0 12px}
  .cat-header h1{font-size:20px}
  .cat-header .cat-emoji{font-size:36px}

  /* Section */
  .sec-hdr{margin:20px 0 10px}
  .sec-title{font-size:15px}

  /* Shop cards */
  .shop-card{flex-direction:column;text-align:center}
}

@media (max-width:480px){
  .header-nav a{font-size:10px;padding:4px 7px}
  #cat-links{grid-template-columns:repeat(2,1fr)!important}
  .prod-grid{grid-template-columns:repeat(2,1fr);gap:6px}
  .rank-grid{grid-template-columns:1fr 1fr;gap:6px}
  h1[style*="font-size:32px"]{font-size:22px!important}
  .btn-pk,.btn-out{padding:8px 14px;font-size:11px}
}