/* =====================================
   Remove underline inside buttons
   ===================================== */

/* a 자체가 버튼인 경우 */
a.btn,
a.btn:hover,
a.btn:focus,
a.btn:active{
  text-decoration: none;
}

/* 버튼 안에 a가 들어있는 경우 */
.btn a,
.btn a:hover,
.btn a:focus,
.btn a:active{
  text-decoration: none;
  color: inherit;       /* 버튼 글자색 그대로 */
}


/* Card */
.card{
  border:1px solid var(--border);
  background:var(--bg);
  border-radius: var(--radius);
  box-shadow: var(--shadow);
}

/* Button */
.btn{
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--fg);
  padding:10px 12px;
  border-radius:12px;
  cursor:pointer;
  display:inline-flex;
  align-items:center;
  gap:10px;
  font-size:14px;
  white-space:nowrap;
}
.btn:hover{ background:var(--soft); }
.btn.primary{
  border-color:transparent;
  background:var(--accent);
  color:white;
}
.btn.primary:hover{ filter:brightness(.96); }

/* Pills / Tags */
.pill, .tag{
  display:inline-flex;
  align-items:center;
  padding:7px 11px;
  border:1px solid var(--border);
  background:var(--bg);
  border-radius:999px;
  text-decoration:none;
  color:var(--muted);
  font-size:13px;
}
.pill:hover, .tag:hover{ background:var(--soft); color:var(--fg); }

/* Badge */
.badge{
  width:42px; height:42px; border-radius:14px;
  background:linear-gradient(135deg, rgba(37,99,235,.18), rgba(14,165,233,.18));
  border:1px solid var(--border);
  display:grid; place-items:center;
  font-size:18px;
}

/* Sidebar */
.sidebar{
  padding:16px;
  position:sticky;
  top:88px;
}
.widget{
  width:100%;
  padding:14px;
  border-radius:14px;
  border:1px solid var(--border);
  background:var(--soft);
}
.widget + .widget{ margin-top: 12px; }
.widget h4{ margin:0 0 10px; font-size:14px; letter-spacing:.2px; }

/* Search */
.search{ display:flex; gap:10px; }
.search input{
  flex:1;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--bg);
  color:var(--fg);
  outline:none;
}
.search input:focus{
  border-color:rgba(37,99,235,.5);
  box-shadow:0 0 0 4px rgba(37,99,235,.12);
}

/* Home feed list */
.posts{
  display:grid;
  gap:12px;
}
.post-card{
  border:1px solid var(--border);
  background: var(--bg);
  border-radius: 14px;
  padding: 14px;
  display:flex;
  gap:12px;
  align-items:flex-start;
  text-decoration:none;
}
.post-card:hover{ background:var(--soft); }

.thumb{
  width:108px; height:78px;
  border-radius: 12px;
  border:1px solid var(--border);
  background:linear-gradient(135deg, rgba(37,99,235,.12), rgba(14,165,233,.12));
  flex:0 0 auto;
  display:grid; place-items:center;
  color:var(--muted);
  font-size:12px;
}
.post-card > div{ min-width:0; } /* 긴 제목 줄바꿈 안정화 */

.ptitle{ font-weight:780; letter-spacing:-.2px; }
.pexcerpt{ color:var(--muted); font-size:14px; margin-top:6px; }
.pmeta{
  display:flex; gap:10px; flex-wrap:wrap;
  color:var(--muted);
  font-size:12px;
  margin-top:6px;
}

/* Popular list (sidebar) */
.pop-item{
  display:block;
  width:100%;
  border-radius:12px;
}

/* Ad placeholder */
.ad{
  height:250px;
  display:grid; place-items:center;
  color:var(--muted);
  border:1px dashed var(--border);
  border-radius:14px;
  background:linear-gradient(180deg, rgba(0,0,0,.02), transparent);
}
[data-theme="dark"] .ad{ background:linear-gradient(180deg, rgba(255,255,255,.04), transparent); }

/* Toast */
.toast{
  position:fixed; left:50%; bottom:18px; transform:translateX(-50%);
  background:rgba(2,6,23,.90);
  color:white;
  padding:10px 12px;
  border-radius:999px;
  font-size:14px;
  display:none;
  box-shadow:0 12px 28px rgba(0,0,0,.25);
  z-index:999;
  max-width: calc(100vw - 24px);
}
[data-theme="dark"] .toast{
  background:rgba(231,238,252,.12);
  color:var(--fg);
  border:1px solid var(--border);
}