/* Container */
.wrap{
  max-width:var(--maxw);
  margin:0 auto;
  padding:0 22px;
}

/* Topbar */
.topbar{
  position:sticky; top:0; z-index:50;
  background:rgba(255,255,255,.78);
  backdrop-filter:saturate(150%) blur(10px);
  border-bottom:1px solid var(--border);
}
[data-theme="dark"] .topbar{ background:rgba(11,18,32,.78); }

.topbar-inner{
  display:flex; align-items:center; justify-content:space-between;
  height:68px;
  gap:var(--gap-3);
}

.brand{
  display:flex; align-items:center; gap:var(--gap-2);
  text-decoration:none;
}
.logo{
  width:38px;
  height:38px;
  border-radius:3px;

  background-image: url("/logo2.png");
  background-size: contain;      /* 로고 전체 보이게 */
  background-repeat: no-repeat;
  background-position: center;

  background-color: #ffffff;     /* 투명 PNG 대비용 (선택) */
  box-shadow: var(--shadow);
}


.nav{
  display:flex; align-items:center; gap:var(--gap-2);
}

/* ✅ nav link base */
.nav a{
  position:relative;
  text-decoration:none;
  padding:10px 12px;
  border-radius:12px;
  color:var(--muted);
}
.nav a:hover{ background:var(--soft); color:var(--fg); }

/* ✅ nav active */
.nav a.active{
  color:var(--accent);
  background:rgba(29, 78, 216, 0.12);
}
.nav a.active::after{
  /* content:"";
  position:absolute;
  left:12px; right:12px;
  bottom:-6px;
  height:2px;
  border-radius:2px;
  background:var(--accent); */
}

.actions{
  display:flex; align-items:center; gap:var(--gap-2);
}
.mobile-toggle{ display:none; }

.mobile-nav{
  display:none;
  border-top:1px solid var(--border);
  padding:10px 0 14px;
}

/* ✅ mobile nav link base */
.mobile-nav a{
  position:relative;
  display:block;
  padding:10px 12px;
  border-radius:12px;
  text-decoration:none;
  color:var(--muted);
}
.mobile-nav a:hover{ background:var(--soft); color:var(--fg); }

/* ✅ mobile nav active */
.mobile-nav a.active{
  color:var(--accent);
  background:rgba(29, 78, 216, 0.12);
}

.mobile-nav a.active::before{
  content:"";
  position:absolute;
  left:6px;
  top:10px;
  bottom:10px;
  width:3px;
  border-radius:3px;
  background:var(--accent);
}

/* Main grid (content + sidebar) */
.grid{
  display:grid;
  grid-template-columns: 1fr;
  gap: var(--gap-4);
  padding: var(--gap-4) 0 70px;
  align-items:start;
}
@media (min-width: 1060px){
  .grid{
    grid-template-columns: minmax(0,var(--content)) minmax(0,var(--sidebar));
  }
  
}
.grid > *{ min-width:0; } /* 긴 제목 등으로 깨지는 것 방지 */

/* Left column stack (Top topics + Latest fixes) */
.left-col{
  display:grid;
  gap: var(--gap-4);
}

/* Spacing normalization inside cards */
.section{
  padding: 18px 20px;
}
.section h1,.section h2,.section h3,.section p,.section ul,.section ol{ margin:0; }
.section > * + *{ margin-top: 14px; }

.section-head{
  display:flex; align-items:center; justify-content:space-between; gap:var(--gap-2);
}
.section-head + *{ margin-top: 10px; }

/* Footer */
footer{
  border-top:1px solid var(--border);
  color:var(--muted);
  padding:24px 0;
}
.foot{
  display:flex; align-items:center; justify-content:space-between;
  gap:var(--gap-2); flex-wrap:wrap;
  font-size:14px;
}
 
#btnMobile{display:none;}

/* 모바일 */
@media (max-width: 1060px){
  .grid {
    padding:0px;
  }
  .mobile-toggle{ display:inline-flex; }
  .nav{ display:none; }
  #btnMobile{display:block;}
  /* 모바일에서는 underline 굳이 필요 없으니 제거 */
  .nav a.active::after{ display:none; }
  .logoEx{display: none;}
  .wrap{
    padding:0 7px;
  }

  select.card.section{
    width:100%;
    max-width:100%;
    min-width:0;
  }
  .section h1, .section h2, .section h3, .section p, .section ul, .section ol {
      margin: 0;
      font-size: 19px;
  }

  .post-content {
      font-size: 16px;
  }
  .post-content p {
      font-size: 16px;
  }
  .post-content h2 {
      font-size: 19px;
  }
  .post-content ul {
     font-size: 16px;
  }
  .post-fig{
    width: 100%;
    margin: 0;
  }
  .pop-title {
      font-weight: 800;
      font-size: 19px;
      line-height: normal;
  }

/* ===== left-col overflow fix (no-ads) ===== */
.left-col{ width:100%; min-width:0; overflow:hidden; }

#catGrid{ display:grid; gap:12px; }
#catGrid > a.card{ display:block; width:100%; max-width:100%; min-width:0; }
#catGrid a.card > div{ min-width:0; }

.posts article.card > div{ min-width:0; }

/* badges */
.tag, .pill{
  max-width:100%;
  overflow:hidden;
  text-overflow:ellipsis;
  white-space:nowrap;
}

@media (max-width:1060px){
  #catGrid{ grid-template-columns: 1fr !important; }
}
@media (max-width:1060px){
  .posts article.card > div:first-child > .mini{
    display: none;
  }
}