/* 친구알바 (79alba.com/test) - theme/basic/style.css */
:root{
  --fa-brand:#2d6bff;
  --fa-brand2:#00b7ff;
  --fa-ink:#101828;
  --fa-text:#344054;
  --fa-muted:#667085;
  --fa-border:#e7eaf0;
  --fa-bg:#f6f8fc;
  --fa-card:#ffffff;
  --fa-shadow:0 10px 30px rgba(16,24,40,.08);
  --fa-radius:16px;
}

*{box-sizing:border-box}
html,body{height:100%}
body{color:var(--fa-text)}
img{max-width:100%;height:auto}
a{color:inherit}

/* 기본 레이아웃 안전장치(가로 스크롤 방지) */
#wrapper,#container_wr,#container{max-width:100%}
#container{overflow-x:hidden}

/* 상단(기존 basic 테마) 일부 보완 */
#hd{background:#fff}
#hd_wrapper{display:flex;align-items:center;gap:16px;flex-wrap:wrap}
#logo .alba-brand{display:inline-flex;align-items:baseline;gap:4px;font-size:22px;letter-spacing:-.5px}
#logo .alba-brand b{color:var(--fa-brand);font-weight:900}
#logo .alba-brand em{font-style:normal;color:var(--fa-ink);font-weight:800}

.hd_sch_wr{flex:1;min-width:260px}
#hd_sch{border:1px solid var(--fa-border);border-radius:999px;padding:6px 12px;background:#fff}
#sch_stx{border:0;outline:0;width:calc(100% - 40px)}
#sch_submit{border:0;background:transparent}

#gnb{border-top:1px solid var(--fa-border);border-bottom:1px solid var(--fa-border);background:#fff}
#gnb .gnb_wrap{max-width:1200px;margin:0 auto;padding:0 16px}

/* 홈 메인 */
.alba-home{max-width:1200px;margin:0 auto;padding:22px 16px 60px}

.alba-hero{
  display:grid;
  grid-template-columns: 1.25fr .75fr;
  gap:18px;
  align-items:stretch;
  background: radial-gradient(1200px 600px at 0% 0%, rgba(45,107,255,.14), transparent 60%),
              radial-gradient(900px 500px at 100% 0%, rgba(0,183,255,.12), transparent 55%),
              linear-gradient(180deg,#fff, #fbfcff);
  border:1px solid var(--fa-border);
  border-radius:var(--fa-radius);
  padding:22px;
  box-shadow:var(--fa-shadow);
}
.alba-hero-copy{min-width:0}
.alba-eyebrow{display:inline-flex;align-items:center;gap:8px;font-size:13px;color:var(--fa-muted);font-weight:700}
.alba-hero h2{margin:10px 0 8px;font-size:32px;line-height:1.18;color:var(--fa-ink);letter-spacing:-1px}
.alba-hero p{margin:0 0 14px;color:var(--fa-text)}

.alba-filter{margin:14px 0 14px}
.alba-filter-grid{
  display:grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap:10px;
}
.alba-filter label{display:flex;flex-direction:column;gap:6px;min-width:0}
.alba-filter label span{font-size:12px;color:var(--fa-muted);font-weight:700}
.alba-filter select{
  width:100%;
  border:1px solid var(--fa-border);
  background:#fff;
  border-radius:12px;
  padding:10px 10px;
  height:42px;
  outline:0;
}
.alba-filter button{
  grid-column: 1 / -1;
  height:44px;
  border:0;
  border-radius:12px;
  background:linear-gradient(90deg,var(--fa-brand),var(--fa-brand2));
  color:#fff;
  font-weight:800;
  letter-spacing:-.2px;
  cursor:pointer;
}
.alba-filter-help{margin:8px 0 0;font-size:12px;color:var(--fa-muted)}

.alba-search{
  display:flex;align-items:center;gap:10px;
  border:1px solid var(--fa-border);
  background:#fff;
  border-radius:14px;
  padding:10px 12px;
}
.alba-search i{color:var(--fa-muted);flex:0 0 auto}
.alba-search input{
  flex:1;min-width:0;
  border:0;outline:0;
  padding:8px 4px;
}
.alba-search button{
  flex:0 0 auto;
  border:0;
  border-radius:12px;
  padding:10px 14px;
  background:var(--fa-ink);
  color:#fff;
  font-weight:800;
  cursor:pointer;
}

.alba-keywords{margin-top:10px;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.alba-keywords span{font-size:12px;color:var(--fa-muted);font-weight:800}
.alba-keywords a{font-size:12px;border:1px solid var(--fa-border);background:#fff;border-radius:999px;padding:6px 10px}

.alba-hero-panel{
  border:1px solid var(--fa-border);
  background:rgba(255,255,255,.9);
  border-radius:var(--fa-radius);
  padding:18px;
  box-shadow:0 8px 22px rgba(16,24,40,.06);
}
.alba-hero-panel strong{display:block;font-size:16px;color:var(--fa-ink);margin-bottom:10px}
.alba-hero-panel ul{list-style:none;margin:0 0 12px;padding:0;display:grid;gap:8px}
.alba-hero-panel li{display:flex;gap:8px;align-items:flex-start;color:var(--fa-text)}
.alba-hero-panel li i{color:var(--fa-brand);margin-top:3px}
.alba-hero-panel a{display:inline-flex;align-items:center;gap:6px;color:var(--fa-brand);font-weight:800}

.alba-section{margin-top:22px}
.alba-section-head{display:flex;align-items:flex-end;justify-content:space-between;gap:12px;margin:4px 0 12px}
.alba-section-head span{display:block;font-size:12px;color:var(--fa-muted);font-weight:900;letter-spacing:.6px}
.alba-section-head h2{margin:4px 0 0;font-size:22px;letter-spacing:-.6px;color:var(--fa-ink)}
.alba-section-head a{color:var(--fa-brand);font-weight:800;white-space:nowrap}

.alba-category-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
.alba-category-card{
  display:flex;flex-direction:column;gap:8px;
  padding:16px;
  background:var(--fa-card);
  border:1px solid var(--fa-border);
  border-radius:16px;
  box-shadow:0 10px 22px rgba(16,24,40,.04);
  min-width:0;
}
.alba-card-icon{width:44px;height:44px;border-radius:14px;display:grid;place-items:center;
  background:rgba(45,107,255,.10);color:var(--fa-brand)}
.alba-card-tag{font-size:11px;color:var(--fa-muted);font-weight:800}
.alba-category-card strong{font-size:16px;color:var(--fa-ink)}
.alba-category-card small{color:var(--fa-muted);line-height:1.45}
.alba-category-card em{margin-top:auto;font-style:normal;color:var(--fa-ink);font-weight:800}

.alba-latest-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}

.alba-guide{
  margin-top:22px;
  border-radius:18px;
  border:1px solid var(--fa-border);
  background:linear-gradient(90deg, rgba(45,107,255,.12), rgba(0,183,255,.10));
  padding:18px;
  display:flex;align-items:center;justify-content:space-between;gap:16px;flex-wrap:wrap;
}
.alba-guide h2{margin:6px 0 6px;color:var(--fa-ink);letter-spacing:-.6px}
.alba-guide span{font-size:12px;color:var(--fa-muted);font-weight:900;letter-spacing:.6px}
.alba-guide p{margin:0;color:var(--fa-text)}
.alba-guide a{border-radius:12px;background:var(--fa-ink);color:#fff;padding:12px 14px;font-weight:900;white-space:nowrap}

.alba-trust{margin-top:16px;display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:12px}
.alba-trust>div{border:1px solid var(--fa-border);border-radius:16px;background:#fff;padding:14px;display:flex;flex-direction:column;gap:6px}
.alba-trust i{color:var(--fa-brand);font-size:18px}
.alba-trust strong{color:var(--fa-ink)}
.alba-trust span{color:var(--fa-muted);font-size:13px}

/* 그누보드 최신글(스킨에 따라 달라서 최소한의 안전 스타일) */
.alba-latest-grid .lt,
.alba-latest-grid .latest{min-width:0}

/* 반응형 */
@media (max-width: 1024px){
  .alba-hero{grid-template-columns:1fr;}
  .alba-filter-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .alba-category-grid{grid-template-columns:repeat(2,minmax(0,1fr));}
  .alba-latest-grid{grid-template-columns:1fr;}
  .alba-trust{grid-template-columns:1fr;}
}
@media (max-width: 520px){
  .alba-hero{padding:16px}
  .alba-hero h2{font-size:24px}
  .alba-search{flex-wrap:wrap}
  .alba-search button{width:100%}
}