/* 기본 스타일 */
body, html {
    margin: 0;
    padding: 0;
    height: 100%;
    font-family: Arial, sans-serif;
    display: flex;
    flex-direction: column;
    width: 100%;
    overflow-x: hidden; /* ✅ 가로 스크롤 방지 */
    overflow-y: auto;
}

/* 헤더 스타일 */
header {
    background-color: #333;
    color: white;
    padding: 10px 20px;
    width: 100%;
}

/* 헤더 내부 컨테이너 */
.header-container {
    display: flex;
    justify-content: space-between; /* ✅ 왼쪽, 가운데, 오른쪽 정렬 */
    align-items: center;
    max-width: 1200px;
    margin: 0 auto;
    max-height:46px;
}
* 왼쪽 로고 (이미지 + 사이트 이름) */
.logo {
    display: flex;
    align-items: center;
    display: inline-block;
}

.logo-img {
    height: 40px; /* ✅ 로고 이미지 크기 */
    margin-right: 10px; /* ✅ 사이트 이름과 간격 */
    display: inline-block; /* ✅ inline 요소로 인한 간격 문제 해결 */
}

.site-name {
    font-size: 24px;
    font-weight: bold;
    line-height: 1;
    display: inline-block;
    vertical-align: top;
    margin-top: 10px;
}

/* 가운데 메뉴 */
.menu ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.menu ul li {
    margin: 0 15px;
}

.menu ul li a {
    color: white;
    text-decoration: none;
}

/* 오른쪽 계정 관리 */
.account ul {
    list-style: none;
    padding: 0;
    margin: 0;
    display: flex;
}

.account ul li {
    margin-left: 15px;
}

.account ul li a {
    color: white;
    text-decoration: none;
}

/* 콘텐츠 영역 (플렉스 설정) */
main {
    flex: 1;
    padding: 20px;
    text-align: center;
    max-width: 1800px;
    margin: 0 auto;
    width: 100%;
    overflow-x: hidden;
}

/* 4개 컬럼을 가로로 배치 */
.container {
    display: flex;
    gap: 5px;
    justify-content: center;
}
.board-container {
   width: 100%;
   display: flex;
   justify-content: space-between; /* ✅ 왼쪽, 가운데, 오른쪽 정렬 */
   align-items: center;
   max-width: 1200px;
   margin: 0 auto;
   max-height:50px;
}
.board-desc {
    height: 50px;
    width:100%;
    border-bottom: solid 1px #ddd;
}
.board-title {
    width: 49%;
    display:inline-block;
    text-align:left;
}
.board-title span {
    font-size:24px;
}
.board-details {
    width: 50%;
    display: inline-block;
    text-align:left
}

/* ✅ 각 컬럼의 너비를 다르게 설정 */
.column:nth-child(1) { width: 130px; }
.column:nth-child(2) { width: 960px; }
.column:nth-child(3) { width: 320px; }
.column:nth-child(4) { width: 130px; }
/* 개별 컬럼 스타일 */
.column {
    background-color: white; /*#f4f4f4 */
    padding: 5px;
    text-align: center;
    border-radius: 5px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* ✅ 합쳐진 컬럼 내부 레이아웃 (1:1 나눔) */
.inner-container {
    display: flex;
    gap: 4px;
    width: 100%;
}

.inner-column {
    flex: 1; /* ✅ 내부 컬럼을 50%씩 자동 배분 */
    background-color: white; /* #ddd*/
    padding: 10px;
    text-align: center;
    border-radius: 4px;
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.1);
}

/* ✅ 반응형 (태블릿 & 모바일 대응) */
@media (max-width: 1200px) {
    .container {
        flex-wrap: wrap;
    }

    .column-1, .column-4 {
        width: 20%; /* ✅ 태블릿에서는 양쪽 컬럼을 20%로 변경 */
    }

    .column-merged {
        width: 60%; /* ✅ 가운데 컬럼은 60% 유지 */
    }

    .inner-container {
        flex-wrap: wrap; /* ✅ 내부 컬럼도 반응형 적용 */
    }

    .inner-column {
        width: 100%; /* ✅ 태블릿에서는 내부 컬럼이 한 줄씩 표시 */
    }
}

@media (max-width: 600px) {
    .column {
        width: 100%; /* ✅ 모바일에서는 한 줄에 하나씩 */
    }

    .inner-column {
        width: 100%; /* ✅ 모바일에서는 내부 컬럼도 한 줄씩 표시 */
    }
}
.banner0 {
    width: 900px;
    height: 300px;
}
/* 메인배너 */
.banner1 {
    width: 450px;
    height: 150px;
}
/* 우측 배너 */
.banner2 {
    width: 300px;
    height: 200px;
}
/* 가로로 긴 배너 */
.banner3 {
    width: 900px;
    height: 120px;
}
/* 가장 왼쪽 수직 배너 */
.banner4 {
    width: 120px;
    height: 600px;
    float: right;
}
/* 가장 오른쪽 수직 배너 */
.banner5 {
    width: 120px;
    height: 500px;
}
/* 가로형 서브 배너 */
.banner6 {
    width: 450px;
    height: 120px;
    float:left;
}
.schedule {
    width: 100%;
    margin-top: 10px;
    margin-bottom: 10px;
}
.calender {
    width: 100%;
    border-collapse: collapse;
    background-color: white;
}
.calender thead tr{
    height: 30px;
    background-color: #483D8B;
    color:white;
}
.calender th{
    border : solid 1px white;
}
.calender .holiday {
    background-color: #B22222
}
.calender th, .calender td {
    width: 20%;
    padding: 3px;
    text-align: center;
    font-size : 18px;
    font-weight: bold;
}
.calender td {
    border: solid 1px #ddd;
}
.hlong-banner {
    width:100%;
    margin-top:20px;
    flex:1;
}
.login {
    width: 300px;
    height: 200px;
}
.login-container {
    padding:10px;
    flex; 1;
    text-align: center;
    border: solid 1px #A9A9A9;
}
.div-login-id, .div-login-pw, .div-login-btn, .div-login-etc {
    width: 100%;
    margin-bottom: 10px;
}
.id, .pw {
    width: 100%;
    height: 32px;
}
.btn-login {
    width: 100%;
    height : 40px;
    background-color: #483D8B;
    border-radius: 3px;
    color: white;
}
.auto-login {
    float:left;
}
.join, .find-account {
    float:right;
}
.find-account {
    margin-left:10px;
}
.div-search {
    width:100%;
}
.board {
    width: 100%;
    background-color: white;
    margin-bottom: 20px;
    border-radius:3px;
}
.table-board {
    width:100%;
}

.board th {
    height: 26px;
    font-size: 20px;
    border-bottom: solid 1px #ddd;
}
.board td {
    height: 24px;
    font-size: 18px;
}

.board-col1 {
    width: 5%;
}
.board-col2 {
    text-align:left;
}
.board-col3 {
    width: 10%;
}
.board-col4 {
    width: 15%;
}
.board-col5 {
    width: 5%;
}
.board-col6 {
    width: 5%;
}


/* 푸터 (하단 고정) */
footer {
    color:  #33;
    text-align: center;
    padding: 0;
    /*position: relative; */
    /* bottom: 0; */
    height:20px;
    margin: 0;
    width: 100%;
    border-top: solid 1px #eee;
}

.no-bullet {
    list-style: none;
    padding-left: 0; /* 좌측 여백 제거 (필요시) */
}
.tal {
    text-align:left;
}
.tac {
    text-align:center;
}
.tar {
    text-align:right;
}

.reply-item {
    display: flex;
    justify-content: space-between;
    padding: 4px 0;
    border-bottom: 1px solid #eee;
    font-size: 14px;
}

.reply-content {
    text-align: left;
    flex: 1;
    color: #333;
}

.reply-time {
    white-space: nowrap;
    color: #888;
    font-size: 12px;
    margin-left: 10px;
}

/* 공통 버튼 스타일 */
.btn {
  display: inline-block;
  padding: 8px 16px;
  font-size: 14px;
  font-weight: 600;
  border-radius: 4px;
  border: none;
  cursor: pointer;
  color: #fff;
  transition: background-color 0.2s ease;
  text-align: center;
}

/* 비활성화 공통 */
.btn:disabled,
.btn[disabled] {
  opacity: 0.6;
  cursor: not-allowed;
}

/* 에러 버튼 */
.btn-error {
  background-color: #e53935;
}
.btn-error:hover:not(:disabled) {
  background-color: #c62828;
}

/* 경고 버튼 */
.btn-warn {
  background-color: #f9a825;
  color: #212121;
}
.btn-warn:hover:not(:disabled) {
  background-color: #f57f17;
  color: #fff;
}

/* 정보 버튼 */
.btn-info {
  background-color: #1e88e5;
}
.btn-info:hover:not(:disabled) {
  background-color: #1565c0;
}

/* 성공 버튼 */
.btn-success {
  background-color: #43a047;
}
.btn-success:hover:not(:disabled) {
  background-color: #2e7d32;
}

.btn-flat {
  background-color: #fff;
  color: #333;
  border: 1px solid #ccc;
  padding: 8px 16px;
  border-radius: 4px;
  cursor: pointer;
  font-weight: 500;
  transition: background-color 0.2s;
}
.btn-flat:hover {
  background-color: #f5f5f5;
}
.btn-flat:disabled {
  color: #aaa;
  border-color: #ddd;
  cursor: not-allowed;
}

table tr td {
  min-height: 40px;
  height: 40px;
  line-height: 1.4;
  padding: 8px 6px;
  vertical-align: middle;
}

table tbody tr:nth-child(even) {
  background-color: #fafafa;
}

table tbody tr:hover {
  background-color: #e0f7fa;
}

.ellipsis {
  white-space: nowrap;         /* 줄바꿈 방지 */
  overflow: hidden;            /* 넘치는 내용 숨김 */
  text-overflow: ellipsis;     /* 말줄임표 (…) 표시 */
}