/* ── 글로벌 설정 ── */
* { box-sizing: border-box; margin: 0; padding: 0; }

:root {
  --primary: #1a3a6b;
  --primary-light: #2a5298;
  --accent: #c8a951;
  --silver: #dedede;
  --bg: #f3f3f3;
  --white: #ffffff;
  --text: #222;
  --text-muted: #666;
  --border: #ddd;
  --sidebar-width: 180px;
}

body {
  font-family: 'Malgun Gothic', '맑은 고딕', sans-serif;
  background: var(--bg);
  color: var(--text);
  font-size: 14px;
}

/* ── 레이아웃 핵심 ── */
.wrap {
  max-width: 1160px;
  margin: 0 auto;
  padding: 5px;
  display: grid;
  grid-template-columns: var(--sidebar-width) 1fr;
  gap: 16px;
}

/* 1. 헤더: 하단 라운드 제거 및 마진 제거 */
header {
  grid-column: 1 / -1;
  background: var(--primary);
  color: #fff;
  padding: 0 20px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 75px;
  border-radius: 8px 8px 0 0; /* 아래쪽은 각지게 */
  margin-bottom: -16px; /* 중요: grid의 gap(16px)을 마이너스 마진으로 상쇄 */
  position: relative;
  z-index: 10;
}

/* 2. 이미지 컨테이너: 여백 제로 설정 */
.header-banner-container {
  grid-column: 1 / -1;
  line-height: 0;      /* 이미지 하단 미세 틈 제거 */
  overflow: hidden;
  border-radius: 0 0 8px 8px; /* 위는 각지게, 아래만 라운드 */
  border: 1px solid var(--border);
  border-top: none;    /* 헤더와 겹치는 선 제거 */
}

/* 3. 이미지 태그: 블록화 */
.header-banner-container img {
  width: 100%;
  display: block;      /* 인라인 여백 제거 필수 */
  margin: 0;
  padding: 0;
}

.site-title {
  font-size: 21px;
  font-weight: 700;
  letter-spacing: -0.5px;
  color: var(--silver);
  margin-left: 10px; /* 이미지와의 간격 */
}

.header-nav { display: flex; gap: 20px; margin-left: auto; }
.header-nav a {
  color: rgba(230, 215, 215, 0.85);
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
}
.header-nav a:hover { color: var(--accent); }

.hamburger {
  display: none;
  flex-direction: column;
  gap: 5px;
  cursor: pointer;
  background: none;
  border: none;
  padding: 4px;
}
.hamburger span {
  width: 22px; height: 2px;
  background: #fff;
  display: block;
  border-radius: 2px;
}

/* ── 왼쪽 사이드바 ── */
.sidebar {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* 로그인 박스 */
.login-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.login-box .logo-label {
  font-size: 11px;
  color: var(--primary);
  font-weight: 700;
  letter-spacing: 1px;
  margin-bottom: 8px;
  text-align: center;
}
.login-box input {
  width: 100%;
  border: 1px solid var(--border);
  border-radius: 4px;
  padding: 6px 8px;
  font-size: 12px;
  margin-bottom: 6px;
}
.login-box .btn-row { display: flex; gap: 4px; }
.btn-login { flex: 1; background: var(--primary); color: #fff; border: none; border-radius: 4px; padding: 6px; font-size: 12px; cursor: pointer; }
.btn-join { flex: 1; border: 1px solid var(--primary); color: var(--primary); background: none; border-radius: 4px; padding: 6px; font-size: 12px; cursor: pointer; }

.login-links {
  display: flex;
  justify-content: center;
  gap: 5px;
  margin-top: 8px;
  font-size: 11px;
  color: #ccc;
}
.login-links a { text-decoration: none; color: var(--text-muted); }

/* 사이드바 메뉴 공통 */
.sidebar-menu {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.sidebar-menu-title {
  background: var(--primary);
  color: #fff;
  padding: 8px 12px;
  font-size: 12px;
  font-weight: 700;
}
.sidebar-menu ul { list-style: none; }
.sidebar-menu ul li a {
  display: block;
  padding: 6px 12px;
  font-size: 13px;
  color: var(--text);
  text-decoration: none;
  border-bottom: 1px solid #f0f0f0;
}
.sidebar-menu ul li a:hover { background: #f7f5f0; color: var(--primary); }
.sidebar-menu select {
  width: calc(100% - 16px);
  margin: 4px 8px;
  padding: 5px 6px;
  font-size: 15px;
  border: 1px solid var(--border);
  border-radius: 4px;
}
.visitor-today { color: #c00; font-weight: 700; }

/* ── 중앙 메인 영역 ── */
.main { min-width: 0; }

/* 4구 배너 */
.banner-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 10px;
  margin-bottom: 16px;
}
.banner-card {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  text-align: center;
  cursor: pointer;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.banner-card:hover { box-shadow: 0 2px 8px rgba(0,0,0,0.1); }
.banner-card .b-icon { font-size: 36px; margin-bottom: 6px; }
.banner-card .b-title { font-size: 15px; font-weight: 700; color: var(--primary); margin-bottom: 4px; }
.banner-card .b-desc { font-size: 12px; color: var(--text-muted); line-height: 1.4; }
.banner-card.accent { border-color: var(--accent); }

/* 게시판 */
.board-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  margin-bottom: 12px;
}
.board-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.board-head {
  background: var(--primary);
  color: #fff;
  padding: 8px 12px;
  display: flex;
  justify-content: space-between;
  align-items: center;
}
.board-head .b-name { font-size: 13px; font-weight: 700; letter-spacing: 1px; }
.board-head .b-more { font-size: 11px; color: rgba(255,255,255,0.7); text-decoration: none; }
.board-list { list-style: none; padding: 4px 0; }
.board-list li {
  display: flex;
  justify-content: space-between;
  padding: 5px 12px;
  border-bottom: 1px solid #f0f0f0;
  font-size: 13px; 
}
.board-list .b-link {
  font-size: 13px; color: var(--text);
  text-decoration: none; flex: 1;
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
}
.board-list .b-link.notice { color: #c00; font-weight: 500; }
.board-list .b-date { font-size: 10px; color: var(--text-muted); margin-left: 8px; }
.board-list .b-tag {
  font-size: 13px; background: #eef2f8; color: var(--primary);
  padding: 1px 5px; border-radius: 3px; margin-right: 6px;
}

/* 하단 섹션 */
.bottom-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 12px;
}
.cal-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.cal-head {
  background: var(--primary); color: #fff;
  padding: 7px 12px; display: flex;
  align-items: center; justify-content: space-between;
  font-size: 13px; font-weight: 700;
}
.cal-head button { background: none; border: none; color: #fff; cursor: pointer; }
.cal-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.cal-table th, .cal-table td { padding: 4px 2px; text-align: center; }
.cal-table .today { background: var(--primary); color: #fff; border-radius: 50%; }
.cal-table .sun { color: #c00; }
.cal-table .sat { color: #00c; }

.info-box {
  background: var(--white);
  border: 1px solid var(--border);
  border-radius: 8px;
  padding: 14px 12px;
  display: flex; flex-direction: column;
  align-items: center; text-align: center; justify-content: center; gap: 6px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}
.info-box .i-icon { font-size: 36px; }
.info-box .i-title { font-size: 16px; font-weight: 700; color: var(--primary); }
.info-box .i-desc { font-size: 12px; color: var(--text-muted); }

.sidebar-close { 
  display: none; 
  background-color: #ededed; 
  border:1px solid #dedede; 
  padding:5px; 
  color: #333;
  border-radius: 5px;
  box-shadow: 2px 2px 2px rgba(0, 0, 0, 0.2);
}

/* ── 햄버거 버튼 통합 설정 ── */
.hamburger-btn {
    /*display: none; */  
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    background: none;
    border: none;
    cursor: pointer;
    padding: 0;
    position: relative;   /* 헤더 내 배치를 위해 relative 사용 */
    z-index: 1001;
    margin-left: auto;    /* 모바일에서 오른쪽 정렬을 위함 */
}

.hamburger-btn span {
    display: block;
    width: 24px;
    height: 2px;
    background: #fff;     /* 선 색상을 흰색으로 변경 (중요!) */
    border-radius: 2px;
    transition: all 0.3s ease-in-out;
    position: absolute;   /* X자 변신 시 축 고정을 위해 absolute */
}

/* 세 줄 간격 맞추기 */
.hamburger-btn span:nth-child(1) { transform: translateY(-8px); }
.hamburger-btn span:nth-child(2) { transform: translateY(0); }
.hamburger-btn span:nth-child(3) { transform: translateY(8px); }

/* ── OPEN 상태 (X자로 변신) ── */
.hamburger-btn.open span:nth-child(1) { transform: translateY(0) rotate(45deg); }
.hamburger-btn.open span:nth-child(2) { opacity: 0; transform: translateX(-10px); }
.hamburger-btn.open span:nth-child(3) { transform: translateY(0) rotate(-45deg); }

/* ── 하단 푸터 ── */
.footer {
    grid-column: 1 / -1;
    background-color: #555;
    color: #eee;
    padding: 20px;
    border-radius: 0 0 8px 8px;
    font-size: 12px;
    line-height: 1.6;
}
.footer-links { margin-bottom: 10px; }
.footer-links a { color: #fff; text-decoration: none; margin-right: 15px; font-weight: bold; }

/* 인사말 (반갑습니다) */
.welcome-text {
    font-size: 14px;
    color: #666;
    margin-bottom: 5px;
    text-align: center;
    padding: 3px 0;
}

/* 사용자 이름 강조 */
.user-name {
    font-size: 15px;
    color: #333;
    font-weight: bold;
    margin-bottom: 10px;
    border-bottom: 2px solid #004680;
    padding-bottom: 3px;
    text-align: center;
}

/* 로그아웃 버튼 스타일 */
.btn-logout {
    width: 100%;
    padding: 5px 0;
    background-color: #555; /* 차분한 그레이 */
    color: #fff;
    border: none;
    border-radius: 4px;
    font-size: 13px;
    font-weight: bold;
    cursor: pointer;
    transition: background-color 0.3s;
}

.btn-logout:hover {
background-color: #333;
}

.post-list .subject {
    display: inline-block;    /* 또는 flex 환경에선 생략 가능 */
    flex: 1;                  /* 남는 공간을 제목이 다 차지하게 함 */
    white-space: nowrap;      /* 줄바꿈 금지 */
    overflow: hidden;         
    text-overflow: ellipsis;  /* 넘치면 말줄임표(...) 표시 */
    vertical-align: middle;   /* 아이콘 등과 높이 맞춤 */
    margin-right: 10px;       /* 날짜와의 간격 확보 */
    
    /* 너비 제한: PC에서는 최대 52글자 정도까지만 확장 */
    max-width: 52ch;
}

.mobile-top-nav {
    display: none;
    width: 100%;             /* 중요: 컨테이너가 화면 너비를 꽉 채워야 합니다 */
    text-align: center;
    gap: 20px;
}

.mobile-top-nav a {
  /* 버튼 형태 만들기 */
  display: inline-block;          /* <a> 태그를 박스 형태로 변환 */
  padding: 6px 12px;              /* 버튼 내부 여백*/
  background-color: #f8f9fa;    /* 버튼 배경색 */
  border: 1px solid #ddd;       /* 버튼 테두리 */
  border-radius: 6px;             /* 둥근 모서리 (원하시면 숫자를 키우세요) */
  background: var(--primary-light);
  
  /* 폰트 및 텍스트 */
  color: #dedede;
  text-decoration: none;
  font-size: 14px;
  font-weight: 500;
  
  /* 부드러운 전환 효과 */
  transition: all 0.2s ease-in-out;
}

/* 마우스를 올렸을 때의 버튼 효과 */
.mobile-top-nav a:hover {
  background-color: #e9ecef;      /* 배경색 약간 어둡게 */
  border-color: #bbb;             /* 테두리 색상 진하게 */
  cursor: pointer;
}

/* ── 반응형 설정 시작 ── */

/* 1. 태블릿 (900px 이하) */
@media (max-width: 900px) {
    .banner-grid, .bottom-grid { 
        grid-template-columns: repeat(2, 1fr); 
    }
}

/* 2. 모바일 통합 설정 (700px 이하) */
@media (max-width: 700px) {
    /* 기본 레이아웃 전환 */
    .wrap { grid-template-columns: 1fr; }
    .header-nav { display: none; } /* 상단 메뉴 숨김 */
    .board-grid { grid-template-columns: 1fr; } /* 게시판 1열 */

    /* 햄버거 버튼 표시 */
    .hamburger-btn { 
        display: flex !important; 
        margin-left: auto; 
    }
    
    .mobile-top-nav {
      display: block;
    }

    /* ── 핵심: 모바일 사이드바 (스크롤 최적화) ── */
    .sidebar {
        display: none; 
        position: fixed; 
        top: 0; 
        left: 0; 
        width: 80%;       /* 화면의 80% 점유 */
        max-width: 300px; 
        height: 100vh;    /* 전체 높이 고정 */
        background: #f3f3f3; 
        z-index: 9999; 
        box-shadow: 5px 0 15px rgba(0,0,0,0.3);

        /* 세로 스크롤 활성화 */
        overflow-y: auto; 
        -webkit-overflow-scrolling: touch; 
        
        display: none;    /* 기본 숨김 */
        flex-direction: column;
        padding: 0 0 40px 0; /* 하단 여유 공간 */
    }

    /* 메뉴 열림 상태 */
    .sidebar.open { 
        display: flex !important; 
    }

    /* 사이드바 내부 박스들 간격 */
    .login-box, .sidebar-menu, .cal-box {
        margin: 0px 10px !important;
        flex-shrink: 0; /* 내용이 많아도 박스 형태 유지 (스크롤 유도) */
    }

    /* 상단 닫기 버튼 (스크롤 시에도 상단 고정) */
    .sidebar-close {
        display: block;
        position: sticky;
        top: 0;
        width: 100%;
        padding: 10px;
        background-color: var(--primary);
        color: #fff;
        border: none;
        font-size: 16px;
        font-weight: bold;
        text-align: center;
        z-index: 10;
        cursor: pointer;
    }

    /* 헤더 이미지 및 여백 조정 */
    header { padding: 0 15px; }
    header img { height: 50px; }

    .wrap {
        padding: 0px;
    }

    .main {
      padding : 0px 3px;
    }

}

/* 3. 소형 스마트폰 (400px 이하) */
@media (max-width: 400px) {
    .board-list .subject {
        max-width: 65%; 
        display: inline-block;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        vertical-align: middle;
    }
    .banner-card .b-icon { font-size: 28px; }
    .banner-card .b-title { font-size: 13px; }
}

/* 4. PC 모드 강제 고정 (701px 이상) */
@media (min-width: 701px) {
    .hamburger-btn { display: none !important; }
    .sidebar { 
        display: flex !important; 
        position: static; 
        width: auto; 
        height: auto; 
        box-shadow: none;
        overflow-y: visible;
    }
    .sidebar-close { display: none !important; }
}