/* ============================================================
   ts.bil.co.kr 포스팅 사이트 스타일
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Noto+Sans+KR:wght@400;500;600;700;800&display=swap');

:root {
  --bg:       #09090b;
  --bg2:      #141417;
  --card:     #18181b;
  --border:   rgba(255,255,255,.07);
  --primary:  #f97316;
  --accent:   #ec4899;
  --text:     #f4f4f5;
  --muted:    #71717a;
  --radius:   16px;
}

* { margin:0; padding:0; box-sizing:border-box; }
html { scroll-behavior:smooth; }
body { font-family:'Noto Sans KR',sans-serif; background:var(--bg); color:var(--text); line-height:1.7; }
a { color:inherit; text-decoration:none; }

/* ── 헤더 ── */
header {
  position:sticky; top:0; z-index:50;
  background:rgba(9,9,11,.9); backdrop-filter:blur(20px);
  border-bottom:1px solid var(--border);
}
.header-inner {
  max-width:1100px; margin:0 auto; padding:0 1.5rem;
  height:60px; display:flex; align-items:center; justify-content:space-between;
}
.site-logo {
  font-size:1.15rem; font-weight:800;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  -webkit-background-clip:text; background-clip:text;
  -webkit-text-fill-color:transparent;
}
.header-nav { display:flex; gap:1.5rem; font-size:.875rem; color:var(--muted); }
.header-nav a:hover { color:var(--text); }

/* ── 히어로 배너 ── */
.hero {
  background:linear-gradient(135deg,#1a0a00,#0a001a);
  padding:3rem 1.5rem 2.5rem;
  text-align:center; border-bottom:1px solid var(--border);
}
.hero-badge {
  display:inline-flex; align-items:center; gap:.4rem;
  background:rgba(249,115,22,.1); border:1px solid rgba(249,115,22,.3);
  color:var(--primary); padding:.3rem 1rem; border-radius:99px;
  font-size:.8rem; font-weight:700; margin-bottom:1.25rem;
}
.hero h1 {
  font-size:2.2rem; font-weight:900; line-height:1.2;
  margin-bottom:.75rem;
}
.hero h1 span { color:var(--primary); }
.hero p { color:var(--muted); font-size:1rem; max-width:500px; margin:0 auto; }

/* ── 섹션 ── */
.section { max-width:1100px; margin:0 auto; padding:2.5rem 1.5rem; }
.section-title {
  font-size:1.35rem; font-weight:800; margin-bottom:1.5rem;
  display:flex; align-items:center; gap:.5rem;
}
.section-title::before {
  content:''; width:4px; height:1.4em; border-radius:2px;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  display:block;
}

/* ── 상품 카드 그리드 ── */
.post-grid {
  display:grid;
  grid-template-columns:repeat(auto-fill,minmax(280px,1fr));
  gap:1.25rem;
}

.post-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
  transition:.3s cubic-bezier(.4,0,.2,1);
  position:relative;
}
.post-card:hover {
  border-color:rgba(249,115,22,.4);
  transform:translateY(-6px);
  box-shadow:0 20px 40px rgba(249,115,22,.1);
}

.post-card-thumb {
  width:100%; aspect-ratio:1; object-fit:cover;
  background:var(--bg2); transition:.4s;
}
.post-card:hover .post-card-thumb { transform:scale(1.04); }
.post-card-thumb-wrap { overflow:hidden; }

.post-card-body { padding:1.1rem; }

.post-card-tags { display:flex; gap:.4rem; flex-wrap:wrap; margin-bottom:.6rem; }
.tag {
  padding:.15rem .55rem; border-radius:99px;
  font-size:.72rem; font-weight:700;
}
.tag-hot    { background:rgba(239,68,68,.15); color:#f87171; }
.tag-deal   { background:rgba(249,115,22,.15);color:var(--primary); }
.tag-free   { background:rgba(16,185,129,.15);color:#34d399; }
.tag-soldout{ background:rgba(100,116,139,.15);color:#94a3b8; }

.post-card-name {
  font-size:.9rem; font-weight:700; margin-bottom:.6rem;
  display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;
  overflow:hidden; line-height:1.4;
}

.post-card-price {
  font-size:1.3rem; font-weight:900; color:var(--primary);
}
.post-card-original {
  font-size:.8rem; color:var(--muted); text-decoration:line-through; margin-left:.3rem;
}
.post-card-discount {
  font-size:.8rem; font-weight:800; color:#ef4444;
  background:rgba(239,68,68,.1); padding:.1rem .4rem; border-radius:4px;
  margin-left:.2rem;
}

.post-card-meta {
  display:flex; align-items:center; gap:.75rem;
  font-size:.78rem; color:var(--muted); margin-top:.6rem;
}

.post-card-btn {
  display:block; width:100%; margin-top:1rem;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; text-align:center; padding:.65rem;
  border-radius:10px; font-weight:700; font-size:.88rem;
  transition:.2s; border:none; cursor:pointer;
}
.post-card-btn:hover { opacity:.9; transform:translateY(-1px); }
.post-card-btn.soldout { background:var(--bg2); color:var(--muted); cursor:not-allowed; }

/* ── 배지 ── */
.rank-badge {
  position:absolute; top:.75rem; left:.75rem;
  background:rgba(249,115,22,.9); color:#fff;
  font-size:.72rem; font-weight:800; padding:.25rem .6rem;
  border-radius:6px;
}

/* ── 빈 상태 ── */
.empty-state {
  text-align:center; padding:5rem 1.5rem; color:var(--muted);
}
.empty-icon { font-size:4rem; margin-bottom:1rem; }

/* ── 상세 페이지 ── */
.detail-wrap { max-width:800px; margin:0 auto; padding:2rem 1.5rem; }
.detail-back {
  display:inline-flex; align-items:center; gap:.4rem;
  color:var(--muted); font-size:.875rem; margin-bottom:1.5rem;
}
.detail-back:hover { color:var(--text); }

.detail-card {
  background:var(--card); border:1px solid var(--border);
  border-radius:var(--radius); overflow:hidden;
}

.detail-thumb { width:100%; max-height:500px; object-fit:contain; background:var(--bg2); }

.detail-body { padding:2rem; }
.detail-tags { display:flex; gap:.5rem; flex-wrap:wrap; margin-bottom:1rem; }
.detail-name { font-size:1.5rem; font-weight:800; line-height:1.3; margin-bottom:1rem; }
.detail-price-box {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:12px; padding:1.25rem 1.5rem; margin-bottom:1.5rem;
}
.detail-price { font-size:2rem; font-weight:900; color:var(--primary); }
.detail-original { font-size:.95rem; color:var(--muted); text-decoration:line-through; }
.detail-discount { font-size:1.1rem; font-weight:800; color:#ef4444; }

.detail-info-grid {
  display:grid; grid-template-columns:1fr 1fr; gap:.75rem; margin-bottom:1.5rem;
}
.detail-info-item {
  background:var(--bg2); border:1px solid var(--border);
  border-radius:10px; padding:.875rem 1rem;
}
.detail-info-label { font-size:.72rem; color:var(--muted); text-transform:uppercase;
                     letter-spacing:.05em; font-weight:700; margin-bottom:.3rem; }
.detail-info-value { font-size:1.05rem; font-weight:700; }

.detail-content { color:var(--muted); font-size:.9rem; line-height:1.8; margin-bottom:1.5rem; white-space:pre-wrap; }

.detail-cta {
  display:flex; align-items:center; justify-content:space-between;
  background:linear-gradient(135deg,rgba(249,115,22,.1),rgba(236,72,153,.1));
  border:1px solid rgba(249,115,22,.2); border-radius:12px; padding:1.25rem 1.5rem;
}
.detail-cta-text { font-size:.85rem; color:var(--muted); }
.detail-cta-btn {
  display:inline-flex; align-items:center; gap:.5rem;
  background:linear-gradient(135deg,var(--primary),var(--accent));
  color:#fff; padding:.75rem 2rem; border-radius:10px;
  font-weight:800; font-size:1rem; text-decoration:none;
  transition:.2s; white-space:nowrap;
}
.detail-cta-btn:hover { transform:scale(1.03); box-shadow:0 8px 20px rgba(249,115,22,.3); }

/* ── 공유 알림 ── */
.share-notice {
  background:rgba(16,185,129,.05); border:1px solid rgba(16,185,129,.2);
  border-radius:8px; padding:.875rem 1rem; font-size:.82rem; color:#34d399;
  margin-top:1rem; line-height:1.6;
}

/* ── 푸터 ── */
footer {
  border-top:1px solid var(--border); background:var(--bg2);
  padding:2rem 1.5rem; text-align:center;
  color:var(--muted); font-size:.82rem; margin-top:3rem;
}

/* ── 반응형 ── */
@media(max-width:600px){
  .hero h1 { font-size:1.5rem; }
  .detail-info-grid { grid-template-columns:1fr; }
  .detail-cta { flex-direction:column; gap:1rem; }
}