/* RESET */
*{margin:0;padding:0;box-sizing:border-box;}
body{
  font-family:'Noto Sans KR', sans-serif;
  background:#f5f6f8;
  color:#0f172a;
}

:root{
  --primary:#1e3a8a;
  --primary-light:#2563eb;
  --border:#d4d8dd;
  --muted:#6b7280;
}

/********************************************************
  
  HEADER (검색창 삭제 + 로그인/회원가입 삭제)
  
********************************************************/
.header{
  background:white;
  border-bottom:1px solid var(--border);
  padding:14px 0;
  position:sticky;top:0;z-index:300;
}
.header-inner{
  max-width:1280px;
  margin:0 auto;
  padding:0 20px;
  display:flex;
  align-items:center;
  justify-content:space-between;
}

/* LOGO */
.logo-area{
  display:flex;align-items:center;gap:8px;
  white-space:nowrap;
}
.logo-mark{
  width:32px;height:32px;background:var(--primary);
  border-radius:4px;color:white;font-weight:700;
  display:flex;align-items:center;justify-content:center;
}
.logo-text{font-size:19px;font-weight:800;}
.logo-text span{color:var(--primary-light);}

/* NAV MENU (Desktop) */
.nav-links{
  display:flex;gap:22px;
  white-space:nowrap;
}
.nav-links a{
  text-decoration:none;
  padding-bottom:5px;
  color:#475569;
}
.nav-links a.active{
  color:var(--primary-light);
  border-bottom:2px solid var(--primary-light);
  font-weight:700;
}

/********************************************************
  
  MOBILE NAV (햄버거 + 사이드 슬라이드 메뉴)
  
********************************************************/
.hamburger{
  display:none;
  flex-direction:column;
  gap:5px;
  cursor:pointer;
}
.hamburger span{
  width:22px;height:3px;background:#333;border-radius:2px;
}

/* 슬라이드 메뉴 */
.mobile-menu{
  position:fixed;left:-260px;top:0;
  width:260px;height:100%;
  background:white;
  border-right:1px solid var(--border);
  padding:20px;
  transition:0.3s;
  z-index:500;
}
.mobile-menu.open{left:0;}

.mobile-menu a{
  display:block;
  padding:12px 2px;
  color:#475569;
  text-decoration:none;
  font-size:16px;
  border-bottom:1px solid #eee;
}
.mobile-menu a.active{
  color:var(--primary-light);
  font-weight:700;
}

/* 어두운 배경 */
.menu-backdrop{
  position:fixed;top:0;left:0;
  width:100%;height:100%;
  background:rgba(0,0,0,0.3);
  display:none;
  z-index:400;
}
.menu-backdrop.show{display:block;}

@media(max-width:960px){
  .nav-links{display:none;}
  .hamburger{display:flex;}
}

/********************************************************
  
  HERO
  
********************************************************/
.hero{
  width:100%;
  height:230px;
  background:url("https://newsimg.sedaily.com/2024/07/28/2DBX09C2D3_1.jpg") center/cover no-repeat;
  position:relative;
}
.hero::before{
  content:"";
  position:absolute;left:0;top:0;width:100%;height:100%;
  background:rgba(0,0,0,0.3);
}
.hero-inner{
  position:absolute;
  top:50%;left:50%;
  transform:translate(-50%,-50%);
  color:white;text-align:center;
}
.hero-title{
  font-size:36px;font-weight:800;
}

/********************************************************
  
  광고
  
********************************************************/
.ad-box{max-width:1280px;margin:0 auto;padding:20px;}

/********************************************************
  
  MAIN (검색조건 + 리스트)
  
********************************************************/
.main{
  max-width:1280px;margin:0 auto;
  padding:20px;
  display:grid;
  grid-template-columns:1fr 3fr;
  gap:20px;
}
@media(max-width:960px){
  .main{grid-template-columns:1fr;}
}

/********************************************************
  
  LEFT : 검색조건 + 검색창 + 쿠팡 배너
  
********************************************************/
.left-column{display:flex;flex-direction:column;gap:20px;}

.left-box{
  background:white;border:1px solid var(--border);
  padding:16px;border-radius:4px;
}
.left-box h3{
  font-size:16px;font-weight:700;margin-bottom:16px;
}

/* 검색조건 2열 */
.filter-grid{
  display:grid;grid-template-columns:1fr 1fr;gap:14px 20px;
}
@media(max-width:640px){
  .filter-grid{grid-template-columns:1fr;}
}

/* 검색조건 입력 */
.filter-item label{
  display:block;font-size:14px;color:#334155;margin-bottom:6px;
}
.filter-item input,
.filter-item select{
  width:100%;padding:8px 10px;font-size:14px;
  border:1px solid var(--border);border-radius:4px;
}

/* 검색창 (이제 여기로 이동) */
.search-under{
  margin-top:18px;
}
.search-under input{
  width:100%;padding:10px 12px;
  border:1px solid var(--border);
  border-radius:4px;font-size:14px;
}
.board-item a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;
    text-decoration: none;
    color: inherit;
    padding: 18px 0;
}

/* 쿠팡 배너 반응형 */
.banner-box{
  background:white;border:1px solid var(--border);
  padding:16px;border-radius:4px;
  display:flex;justify-content:center;
}
.banner-box img{
  width:100%;height:auto;border-radius:4px;
}

/********************************************************
  
  LIST AREA
  
********************************************************/
.board-wrap{
  background:white;border:1px solid var(--border);
  border-radius:4px;
}

/* CATEGORY */
.category-bar{
  padding:14px 16px;border-bottom:1px solid var(--border);
  display:flex;gap:10px;flex-wrap:wrap;
}
.cat-btn{
  padding:6px 14px;font-size:14px;
  border:1px solid var(--border);background:white;border-radius:4px;
  cursor:pointer;
}
.cat-btn.active{
  background:var(--primary);color:white;border-color:var(--primary);
}

/* LIST */
.board-header{
  padding:14px 16px;border-bottom:1px solid var(--border);
}
.board-header-title{
  font-size:16px;font-weight:700;
}

.board-list{list-style:none;}
.board-item{
  padding:16px;border-bottom:1px solid #e1e5eb;
  display:flex;gap:12px;
}
.board-item:hover{background:#f1f5f9;}

.item-left{flex:1;}
.item-title{
  font-size:15px;font-weight:600;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
}
.item-meta{
  margin-top:6px;color:var(--muted);font-size:13px;
  display:flex;gap:10px;flex-wrap:wrap;
}
.item-right{
  display:flex;flex-direction:column;
  align-items:flex-end;font-size:13px;color:var(--muted);gap:4px;
}

/********************************************************
  
  PAGINATION
  
********************************************************/
.pagination {
    display: flex;
    justify-content: center;
    flex-wrap: wrap;     /* 모바일에서는 자동 줄바꿈 */
    gap: 10px;
    padding: 20px 0;
}

.pagination a,
.pagination span {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 36px;
    height: 36px;
    border: 1px solid #ccc;
    border-radius: 8px;
    font-size: 14px;
    color: #333;
    background: #fff;
    text-decoration: none !important;   /* 밑줄 제거 */
}

.pagination a:hover {
    background: #f1f5f9;
    text-decoration: none !important;   /* hover 시 underline 제거 */
}


.pagination .active {
    background: #2563eb;
    border-color: #2563eb;
    color: #fff;
}

/********************************************************
  
  FOOTER
  
********************************************************/
.footer{
  background:#f1f5f9;color:#475569;
  padding:40px 20px;margin-top:50px;
}
.footer-inner{
  max-width:1280px;margin:0 auto;
  display:grid;grid-template-columns:1fr 1fr;gap:40px;
}
.footer-title{
  font-size:18px;font-weight:700;margin-bottom:10px;color:#0f172a;
}
.footer-inner a{color:var(--primary-light);}
.footer-inner p{font-size:14px;margin:4px 0;}
.footer-notice{
  font-size:12px;color:#64748b;margin-top:10px;line-height:1.5;
}
/* 검색 버튼 */
.search-btn {
  width: 100%;
  margin-top: 14px;
  padding: 12px 0;
  background: var(--primary-light);
  color: white;
  border: none;
  font-size: 15px;
  border-radius: 4px;
  cursor: pointer;
}
.search-btn:hover {
  background: var(--primary);
}

/* 리스트 제목 줄바꿈 허용 + 높이 고정 방지 */
.item-title {
  font-size: 15px;
  font-weight: 600;
  white-space: normal;
  line-height: 1.4;
  word-break: keep-all;
}

/* PC에서 제목 영역이 너무 좁아지는 문제 해결 */
.item-left {
  min-width: 0;
}

/* 모바일에서 리스트 레이아웃 깨짐 방지 */
@media(max-width:640px) {
  .board-item a {
    flex-direction: column;
    align-items: flex-start;
    gap: 8px;
  }
  .item-right {
    flex-direction: row;
    gap: 20px;
  }
}
/* 모바일에서 페이지네이션 넘침 방지 */
.pagination {
    display: flex;
    justify-content: center;
    gap: 10px;
    padding: 20px 0;

    /* ⭐ 핵심 */
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
}

/* 스크롤바 감추기 (선택) */
.pagination::-webkit-scrollbar {
    display: none;
}
#loading-overlay {
  position: fixed;
  inset: 0;
  background: rgba(255,255,255,0.85);
  display: none;
  align-items: center;
  justify-content: center;
  flex-direction: column;
  z-index: 9999;
  backdrop-filter: blur(2px);
}

#loading-overlay .loader {
  width: 48px;
  height: 48px;
  border: 5px solid #cbd5e1;
  border-top-color: #2563eb;
  border-radius: 50%;
  animation: spin 0.8s linear infinite;
  margin-bottom: 16px;
}

#loading-overlay p {
  font-size: 14px;
  color: #1e293b;
  font-weight: 600;
}

@keyframes spin {
  to { transform: rotate(360deg); }
}