/* Board Components Styles - Extracted from sub-layout.css */
/* Search Area */
 .board-search-area {
	 background-color: #f9f9f9;
	 border: 1px solid #eee;
	 border-radius: 8px;
	 padding: 20px 20px 20px 30px;
	 margin-bottom: 65px;
}
 .board-search-area .search-row {
	 display: flex;
	 align-items: center;
	 margin-bottom: 15px;
}
 .board-search-area .search-row:last-child {
	 margin-bottom: 0;
}
 .board-search-area .search-row .search-label {
	 width: 90px;
	 font-weight: 600;
	 color: #252525;
	 font-size: 18px;
	 line-height: 190%;
	 position: relative;
}
 .board-search-area .search-row .search-label::after {
	 content: '';
	 position: absolute;
	 right: 0;
	 top: 50%;
	 transform: translateY(-50%);
	 width: 1px;
	 height: 16px;
	 background-color: #000;
}
 .board-search-area .search-row .search-input-group {
	 display: flex;
	 align-items: center;
	 flex-wrap: wrap;
	 gap: 10px;
	 padding-left: 20px;
}
 .board-search-area .search-row .search-input-group .checkbox-label {
	 display: flex;
	 align-items: center;
	 gap: 11px;
	 cursor: pointer;
	 color: #252525;
	 font-size: 17px;
	 font-style: normal;
	 font-weight: 500;
	 line-height: 160%;
	 margin-right: 9px;
}
 .board-search-area .search-row .search-input-group .checkbox-label input[type="checkbox"], .board-search-area .search-row .search-input-group .checkbox-label input[type="radio"] {
	 cursor: pointer;
	 accent-color: #005770;
}
 .board-search-area .search-row .search-input-group .date-picker-group {
	 display: flex;
	 align-items: center;
	 gap: 11px;
}
 .board-search-area .search-row .search-input-group .date-picker-group .date-input-wrap {
	 position: relative;
	 width: 190px;
	 height: 45px;
	 border: 1px solid #ccc;
	 border-radius: 6px;
	 background-color: #fff;
	 display: flex;
	 align-items: center;
	 padding: 0 35px 0 10px;
	 box-sizing: border-box;
	 background: #fff url('/images/calendar.png') no-repeat right 10px center;
	 background-size: 16px;
}
 .board-search-area .search-row .search-input-group .date-picker-group .date-input-wrap .input-date {
	 position: absolute;
	 top: 0;
	 left: 0;
	 width: 100%;
	 height: 100%;
	 border: none;
	 background: transparent;
	 color: transparent;
	 z-index: 2;
	 cursor: pointer;
	 opacity: 0;
	 padding: 0;
	/* Hide native calendar icon but keep clickable area */
}
 .board-search-area .search-row .search-input-group .date-picker-group .date-input-wrap .input-date::-webkit-calendar-picker-indicator {
	 opacity: 0;
	 cursor: pointer;
}
 .board-search-area .search-row .search-input-group .date-picker-group .date-input-wrap .date-display {
	 font-size: 17px;
	 color: #999;
	/* Placeholder default, active color handled by JS/Class */
	 font-style: normal;
	 font-weight: 400;
	 line-height: 160%;
	 z-index: 1;
	 width: 100%;
	 pointer-events: none;
	/* Ensure clicks pass through */
}
 .board-search-area .search-row .search-input-group .btn-group-period {
	 display: flex;
	 gap: 11px;
}
 .board-search-area .search-row .search-input-group .btn-group-period button {
	 padding: 0 15px;
	 height: 45px;
	 border: 1px solid #005770;
	 background-color: #fff;
	 cursor: pointer;
	 color: #005770;
	 font-size: 17px;
	 font-style: normal;
	 font-weight: 500;
	 line-height: 160%;
	 border-radius: 6px;
}
 .board-search-area .search-row .search-input-group .btn-group-period button:hover,
.board-search-area .search-row .search-input-group .btn-group-period button.active {
	 background-color: #005770;
	 color: #fff;
}

 .board-search-area .search-row .select-search {
	 height: 45px;
	 width: 124px;
	 padding: 0 10px;
	 padding-right: 25px;
	 border: 1px solid #ccc;
	 border-radius: 6px;
	 min-width: 100px;
	 color: #474747;
	 font-size: 17px;
	 font-style: normal;
	 font-weight: 500;
	 line-height: 160%;
	 appearance: none;
	 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23333' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
	 background-repeat: no-repeat;
	 background-position: right 12px center;
	 background-size: 10px 6px;
	 cursor: pointer;
}
 .board-search-area .search-row .input-search {
	 height: 45px;
	 padding: 0 10px;
	 border: 1px solid #ccc;
	 border-radius: 6px;
	 width: 300px;
	 color: #474747;
	 font-size: 17px;
	 font-style: normal;
	 font-weight: 500;
	 line-height: 160%;
	 width: 376px;
}
 .board-search-area .search-row .btn-search {
	 height: 45px;
	 width: 94px;
	 background-color: #005770;
	 color: #fff;
	 border: none;
	 border-radius: 6px;
	 font-weight: 500;
	 cursor: pointer;
	 font-size: 17px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 gap: 5px;
}
 .board-search-area .search-row .btn-search::after {
	 content: '';
	 background-image: url(/images/search-btn.png);
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 display: inline-block;
	 width: 24px;
	 height: 24px;
}
 .board-search-area .search-row .btn-search:hover {
	 background-color: #002c38;
}
 .board-search-area .search-row .btn-refresh {
	 height: 45px;
	 width: 94px;
	 background-color: #fff;
	 color: #005770;
	 border: none;
	 border-radius: 6px;
	 font-weight: 500;
	 cursor: pointer;
	 font-size: 17px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 gap: 5px;
	 border: 1px solid #005770;
}
 .board-search-area .search-row .btn-refresh::after {
	 content: '';
	 background-image: url(/images/reset.png);
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 display: inline-block;
	 width: 22px;
	 height: 22px;
}
 .board-search-area .search-row .btn-refresh:hover {
	 background-color: #005770;
	 color: #fff;
}
 .board-search-area .search-row .btn-refresh:hover::after {
	 background-image: url(/images/reset-w.png);
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 display: inline-block;
	 width: 22px;
	 height: 22px;
}
/* Board Info */
 .board-info {
	 display: flex;
	 justify-content: flex-start;
	 gap: 15px;
	 margin-bottom: 10px;
	 font-size: 15px;
	 color: #474747;
	 font-weight: 500;
}
 .board-info strong {
	 color: #005770;
	 font-weight: 600;
}
/* Board List Table */
 .board-list-wrapper {
	 width: 100%;
	 margin-bottom: 40px;
}
 .board-list {
	 width: 100%;
	 border-collapse: collapse;
	 border-top: 2px solid #005770;
}
 .board-list th, .board-list td {
	 vertical-align: middle;
	 text-align: center;
	 border-bottom: 1px solid #bec5c9;
	 font-size: 17px;
	 color: #252525;
	 height: 60px;
	 font-weight: 400;
}
 .board-list th {
	 color: #474747;
	 background-color: #f8fbfb;
	 font-weight: 700;
}
 .board-list td.td-title {
	 text-align: left;
	 padding-left: 20px;
}
 .board-list td.td-title a {
	 text-decoration: none;
	 color: #252525;
}
 .board-list td.td-title a:hover {
	 text-decoration: underline;
}
 .board-list td .file-icon {
 	display: inline-block;
	width: 20px;
	height: 20px;
	vertical-align: middle;
	background-size: contain;  /* 또는 contain 혹은 cover */
    background-repeat: no-repeat;
}

.board-list .file-icon[data-extension="pdf"] {
    background-image: url('/images/p-file.png');
}
		
.file-icon[data-extension="xlsx"],
.board-list .file-icon[data-extension="xls"] {
    background-image: url('/images/x-file.png');
}
		
.file-icon[data-extension="docx"],
.board-list .file-icon[data-extension="doc"] {
    background-image: url('/images/w-file.png');
}
		
.file-icon[data-extension="jpg"],
.file-icon[data-extension="jpeg"],
.file-icon[data-extension="png"],
.board-list .file-icon[data-extension="gif"] {
    background-image: url('/images/j-file.png');
}
		
.file-icon[data-extension="zip"],
.board-list .file-icon[data-extension="alz"] {
    background-image: url('/images/z-file.png');
}
		
.file-icon[data-extension="hwp"],
.board-list .file-icon[data-extension="hwpx"] {
    background-image: url('/images/h-file.png');
}
		
.board-list .file-icon[data-extension="txt"] {
    background-image: url('/images/n-file.png');
}


/* Board View Styles (Detail Page) */
 .board-view-head {
	 border-top: 2px solid #005770;
	 border-bottom: 1px solid #bec5c9;
	 padding: 25px 20px;
	 background-color: #fff;
	 margin-bottom: 21px;
}
 .board-view-head .view-title {
	 font-size: 23px;
	 font-weight: 700;
	 color: #252525;
	 margin: 0 0 15px 0;
	 line-height: 1.9;
	 word-wrap: break-word;
	 word-break: break-word;
	 overflow-wrap: break-word;
}
 .board-view-head .view-info {
	 display: flex;
	 align-items: center;
	 font-size: 15px;
	 color: #474747;
	 font-weight: 500;
}
 .board-view-head .view-info .info-item strong {
	 color: #252525;
	 font-weight: 700;
	 margin-left: 5px;
}
 .board-view-head .view-info .bar {
	 content: '';
	 display: inline-block;
	 width: 1px;
	 height: 12px;
	 margin: 0 15px;
}
 .board-view-file {
	 background-color: #f9f9f9;
	 padding: 15px 18px;
	 border-radius: 8px;
}
 .board-view-file .file-download-box {
	 width: 100%;
}
 .board-view-file .n-file-icon {
	 font-weight: 700;
	 color: #252525;
	 margin-bottom: 12px;
	 display: flex;
	 align-items: center;
	 font-size: 15px;
}
 .board-view-file .n-file-icon::before {
	 content: '';
	 background-image: url(/images/down-file.png);
	 margin-right: 5px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 20px;
	 height: 20px;
	 display: block;
}
 .board-view-file .attachment-list {
	 list-style: none;
	 padding: 0;
	 margin: 0;
}
 .board-view-file .attachment-item {
	 display: flex;
	 align-items: center;
	 justify-content: space-between;
	 gap: 10px;
}
 .board-view-file .n-down-file-icon {
	 display: flex;
	 align-items: center;
	 flex: 1;
	 min-width: 0;
	 font-size: 18px;
	 font-weight: 400;
	 color: #252525;
}
 .board-view-file .n-down-file-icon .file-name {
	 margin-right: 8px;
}
 .board-view-file .n-down-file-icon .file-size {
	 color: #666;
	 font-size: 14px;
}
 .board-view-file .download-file-btn-box {
	 flex-shrink: 0;
}
 .board-view-file .download-file {
	 width: 105px;
	 height: 39px;
	 display: flex;
	 align-items: center;
	 justify-content: center;
	 border: 1px solid #005770;
	 border-radius: 6px;
	 color: #005770;
	 font-size: 16px;
	 font-weight: 600;
	 background-color: #fff;
	 cursor: pointer;
	 line-height: 1.6;
	 padding: 0;
}
 .board-view-file .download-file:hover {
	 background-color: #f0f8fa;
}
 .board-view-file .download-file::after {
	 content: '';
	 background-image: url(/images/download.png);
	 margin-left: 5px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 21px;
	 height: 21px;
	 display: block;
}
 .board-view-content {
	 padding: 50px 20px;
	 border-bottom: 1px solid #bec5c9;
	 min-height: 300px;
	 font-size: 19px;
	 font-weight: 500;
	 line-height: 1.9;
	 color: #474747;
}
 .board-view-content p {
	 margin: 0 0 10px 0;
}
 .board-view-nav {
	/* border-top: 1px solid #666;
	 */
	 border-bottom: 1px solid #bec5c9;
}
 .board-view-nav .nav-item {
	 display: flex;
	 align-items: center;
	 border-bottom: 1px solid #bec5c9;
	 padding: 15px 20px;
}
 .board-view-nav .nav-item:last-child {
	 border-bottom: none;
}
 .board-view-nav .nav-item .nav-label {
	 display: flex;
	 align-items: center;
	 font-weight: 700;
	 color: #252525;
	 width: 100px;
	 flex-shrink: 0;
	 font-size: 15px;
}
 .board-view-nav .nav-item .nav-label::before {
	 content: '';
	 display: inline-block;
	 width: 12px;
	 height: 8px;
	 margin-right: 10px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
}
 .board-view-nav .nav-item .nav-label.up::before {
	 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 5L5 1L9 5' stroke='%23333' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
}
 .board-view-nav .nav-item .nav-label.down::before {
	 background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1L5 5L9 1' stroke='%23333' fill='none' stroke-width='1.5'/%3E%3C/svg%3E");
}
 .board-view-nav .nav-item .nav-title {
	 color: #474747;
	 text-decoration: none;
	 font-size: 17px;
	 font-weight: 500;
}
 .board-view-nav .nav-item .nav-title:hover {
	 text-decoration: underline;
}

/* 이전글/다음글이 없을 때 (span 태그) - hover 밑줄 제거 */
.board-view-nav .nav-item span.nav-title {
    color: #999;
    cursor: default;
}

.board-view-nav .nav-item span.nav-title:hover {
    text-decoration: none;
    cursor: default;
}

 .btn-wrap-center {
	 display: flex;
	 justify-content: center;
	 margin-top: 40px;
}
 .btn-wrap-center .btn-list {
	 display: inline-flex;
	 align-items: center;
	 justify-content: center;
	 width: 89px;
	 height: 45px;
	 background-color: #005770;
	 color: #fff;
	 text-decoration: none;
	 font-size: 17px;
	 font-weight: 500;
	 border-radius: 6px;
}
 .btn-wrap-center .btn-list:hover {
	 background-color: #002c38;
}
/* Responsive */
 @media (max-width: 1300px) {
	/* View Page Responsive */
	 .board-search-area {
		 padding: 20px;
	}
	 .board-search-area .search-row {
		 flex-direction: column;
		 align-items: flex-start;
		 gap: 5px;
		/* Reduced gap between label and inputs */
	}
	 .board-search-area .search-row .search-label {
		 width: 100%;
		 margin-bottom: 5px;
	}
	 .board-search-area .search-row .search-label::after {
		 display: none;
	}
	 .board-search-area .search-row .search-input-group {
		 width: 100%;
		 padding-left: 0;
		 flex-wrap: wrap;
		 gap: 10px;
	}
	 .board-search-area .search-row .search-input-group .checkbox-label {
		 margin-bottom: 5px;
	}
	 .board-search-area .search-row .search-input-group .date-picker-group {
		 width: 100%;
		 flex-wrap: wrap;
		 gap: 10px;
		/* Hide tilde if wrapping? Or keep it? keeping it for now */
	}
	 .board-search-area .search-row .search-input-group .date-picker-group .date-input-wrap {
		 flex: 1;
		 width: auto;
		/* Reset fixed width */
		 min-width: 140px;
	}
	 .board-search-area .search-row .search-input-group .select-search {
		 flex: 1;
		/* Grow to fill space */
		 min-width: 100px;
	}
	 .board-search-area .search-row .search-input-group .input-search {
		 width: 100%;
		 flex: 3;
		/* Give more space than select */
		 min-width: 200px;
	}
	 .board-view-head .view-title {
		 font-size: 22px;
		 word-wrap: break-word;
		 word-break: break-word;
		 overflow-wrap: break-word;
	}
	 .board-view-head .view-info {
		 flex-wrap: wrap;
		 gap: 5px;
	}
	 .board-view-head .view-info .bar {
		 margin: 0 8px;
	}
}
/* Mobile Board List (Card View) */
 @media (max-width: 768px) {
	 .board-list {
		 display: block;
		 border-top: none;
	}
	 .board-list thead {
		 display: none;
	}
	 .board-list tbody {
		 display: block;
	}
	 .board-list tr {
		 display: flex;
		 flex-wrap: wrap;
		 position: relative;
		 align-items: center;
		 gap: 10px 0;
		 border-bottom: 1px solid #e5e5e5;
		 padding: 20px 0;
	}
	 .board-list tr:first-child {
		 border-top: 2px solid #005770;
	}
	 .board-list td {
		 display: block;
		 border: none;
		 height: auto;
		 padding: 0;
		 text-align: left;
		 font-size: 16px;
		 color: #666;
		/* Number - First line left */
		/* Title - First line, after number */
		/* Department - Second line left */
		/* Views - Second line left */
		/* Date - Second line right */
		/* File Icon - Second line right */
	}
	 .board-list td:nth-child(1) {
		 display: inline-block;
		 order: 1;
		 margin-right: 12px;
		 font-size: 16px;
		 color: #666;
		 flex-shrink: 0;
		 width: auto;
	}
	 .board-list td.td-title {
		 order: 1;
		 padding-left: 0;
		 flex: 1 1 auto;
		 min-width: 0;
		 display: inline-block;
		 width: auto;
		 max-width: calc(100% - 60px);
	}
	 .board-list td.td-title a {
		 font-size: 17px;
		 font-weight: 600;
		 color: #252525;
		 line-height: 1.4;
		 display: block;
		 white-space: normal;
		 overflow: visible;
		 text-overflow: clip;
		 word-wrap: break-word;
		 word-break: break-word;
	}
	 .board-list td:nth-child(3) {
		 order: 2;
		 font-size: 16px;
		 color: #666;
		 display: inline-block;
		 flex-shrink: 0;
		 margin-right: 12px;
		 width: auto;
	}
	 .board-list td:nth-child(5) {
		 order: 2;
		 font-size: 16px;
		 color: #666;
		 display: inline-block;
		 flex-shrink: 0;
		 width: auto;
	}
	 .board-list td:nth-child(4) {
		 order: 2;
		 margin-left: auto;
		 font-size: 16px;
		 color: #666;
		 display: inline-block;
		 flex-shrink: 0;
		 margin-right: 12px;
		 width: auto;
	}
	 .board-list td:nth-child(6) {
		 order: 2;
		 display: inline-block;
		 flex-shrink: 0;
		 width: auto;
		 padding: 0 10px;
	}
	 .board-list td:nth-child(6) img {
		 width: 20px;
		 height: 20px;
		 vertical-align: middle;
	}
}
 @media (max-width: 768px) {
	 .board-view-file {
		 padding: 15px;
	}
	 .board-view-file .n-file-icon {
		 margin-bottom: 12px;
	}
	 .board-view-file .attachment-item {
		 flex-direction: column;
		 align-items: flex-start;
		 gap: 12px;
	}
	 .board-view-file .n-down-file-icon {
		 width: 100%;
	}
	 .board-view-file .download-file-btn-box {
		 width: 100%;
		 display: flex;
		 justify-content: flex-end;
	}
	 .board-view-file .download-file {
		 width: auto;
		 min-width: 105px;
	}
}
 @media (max-width: 768px) {
	 .download-file {
		 margin-bottom: 5px;
	}
}
 .attachment-list {
	 display: flex;
	 gap: 5px;
	 flex-direction: column;
}
 .file-name {
	 font-weight: 500;
}
/*첨부파일 아이콘*/
 .file-pdf:before {
	 content: '';
	 background-image: url(/images/p-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .file-jpg:before,
.file-png:before {
	 content: '';
	 background-image: url(/images/j-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .file-default:before {
	 content: '';
	 background-image: url(/images/d-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .file-zip:before {
	 content: '';
	 background-image: url(/images/z-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .file-hwp:before,
.file-hwpx:before {
	 content: '';
	 background-image: url(/images/h-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
.file-doc:before, 
.file-docx:before {
	 content: '';
	 background-image: url(/images/w-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .file-txt:before {
	 content: '';
	 background-image: url(/images/t-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .file-xls:before,
.file-xlsx:before  {
	 content: '';
	 background-image: url(/images/x-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .file-ppt:before {
	 content: '';
	 background-image: url(/images/pw-file.png);
	 margin-right: 8px;
	 background-repeat: no-repeat;
	 background-position: center;
	 background-size: contain;
	 width: 24px;
	 height: 24px;
	 display: block;
	 flex-shrink: 0;
}
 .no-file {
	 color: #999;
	 font-size: 18px;
}




/* ===== 공지사항 및 상단고정글 스타일 ===== */
/* ===== 공지사항 및 상단고정글 스타일 (정렬 수정 버전) ===== */

/* 공지사항 행 배경색 */
.board-list tbody tr.notice-row {
    background-color: #F8FBFB;
}

/* 상단고정 행 배경색 */
/* .board-list tbody tr.top-notice-row {
    background-color: #FFF9F0;
} */

/* 공지사항/상단고정 hover 효과 */
.board-list tbody tr.notice-row:hover {
    background-color: #EBF5F7;
}

/* 제목 칼럼 */
.board-list td.td-title {
    text-align: left;
    padding-left: 20px;
}

/* a 태그를 flex로 */
.board-list td.td-title a {
    display: flex;
    align-items: center;
    gap: 8px;
    text-decoration: none;
    color: #252525;
    width: 370px;
}

/* 배지 */
.notice-badge {
    display: inline-block;
    padding: 3px 10px;
    font-size: 14px;
    font-weight: 600;
    border-radius: 4px;
    flex-shrink: 0;
    line-height: 1.4;
}

.notice-badge {
    background-color: #005770;
    color: #fff;
}

/* .top-notice-badge {
    background-color: #FF6B00;
    color: #fff;
} */

/* 제목 텍스트 기본 스타일 */
.board-list td.td-title .title-text {
    flex: 1;
    min-width: 0;
}

/* ⭐ 제목 전체 말줄임표 적용 */
.board-list tr .title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} 

/* ⭐ 공지글/상단고정만 말줄임표 */
/*
.board-list tr.notice-row .title-text,
.board-list tr.top-notice-row .title-text {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
} 
*/

/* ⭐ 일반 글은 줄바꿈 허용 */
/* .board-list tr:not(.notice-row):not(.top-notice-row) .title-text {
    word-wrap: break-word;
    word-break: keep-all;
    line-height: 1.5;
} */

/* hover */
.board-list td.td-title a:hover {
    color: #005770;
    text-decoration: none;  /* ⭐ 변경 */
}

/* ⭐ 아래 두 줄 추가 */
.board-list td.td-title a:hover .title-text {
    text-decoration: underline;
}

.board-list td.td-title a:hover .notice-badge {
    text-decoration: none !important;
}


/* 번호 칼럼 */
.notice-text {
    color: #005770;
    font-weight: 700;
    font-size: 16px;
}

/* .top-notice-text {
    color: #FF6B00;
    font-weight: 700;
    font-size: 16px;
} */


/* Photo Tabs */
.photo-tabs {
    display: flex;
    gap: 20px;
    margin-bottom: 30px;
    border-bottom: 1px solid #BEC5C9;
    padding-bottom: 1px;

    @media (max-width: 768px) {
        gap: 15px;
        margin-bottom: 20px;
    }

    .photo-tab-btn {
        background: none;
        border: none;
        padding: 0;
        font-size: 20px;
        font-weight: 500;
        color: #666;
        cursor: pointer;
        position: relative;
        padding-bottom: 15px;
        margin-bottom: -1px;
        transition: all 0.2s;
        white-space: nowrap;

        @media (max-width: 768px) {
            font-size: 18px;
            padding-bottom: 12px;
        }

        &::after {
            content: '';
            position: absolute;
            bottom: -1px;
            left: 0;
            width: 0;
            height: 3px;
            background-color: #005770;
            transition: width 0.3s ease;
        }

        &.active {
            color: #005770;
            font-weight: 700;

            &::after {
                width: 100%;
            }
        }

        &:hover {
            color: #005770;
        }
    }
}

.photo-tab-content {
    display: none;

    &.active {
        display: block;
    }
}

/* 모바일 */
@media (max-width: 768px) {
    .notice-badge {
        font-size: 12px;
        padding: 2px 8px;
    }
    
    .board-list td.td-title a {
        gap: 6px;
    }
}


/* Board Thumbnail Table (Photo Board) */
.board-thum-wrapper {
    width: 100%;
    margin-bottom: 40px;
}

.board-thum-table {
    width: 100%;
    border-collapse: collapse;
    border-top: 2px solid #005770;

    tbody tr {
        border-bottom: 1px solid #BEC5C9;
        transition: background-color 0.2s;

        &:hover {
            background-color: #F8FBFB;
        }

        &:last-child {
            border-bottom: 1px solid #BEC5C9;
        }
    }

    .td-image {
        vertical-align: top;
        padding: 20px;
        width: 280px;

        @media (max-width: 768px) {
            width: 100%;
            padding: 15px;
        }

        a {
            display: block;
            text-decoration: none;
        }

        img {
            width: 100%;
            height: 200px;
            object-fit: cover;
            border-radius: 6px;
            background-color: #F5F5F5;
            transition: transform 0.3s ease;

            @media (max-width: 768px) {
                height: 220px;
            }
        }

        &:hover img {
            transform: scale(1.03);
        }
    }

    .td-content {
        vertical-align: top;
        padding: 20px 20px 20px 0;
        text-align: left;

        @media (max-width: 768px) {
            padding: 15px;
        }

        .content-link {
            display: block;
            text-decoration: none;
            color: inherit;
        }
    }

    .thum-title {
        font-size: 20px;
        font-weight: 700;
        color: #252525;
        margin: 0 0 15px 0;
        line-height: 1.5;
        word-break: break-word;

        @media (max-width: 768px) {
            font-size: 18px;
            margin-bottom: 12px;
        }
    }

    .thum-desc {
        font-size: 16px;
        color: #151515;
        line-height: 1.8;
        word-break: break-word;
        margin-bottom: 15px;

        @media (max-width: 768px) {
            font-size: 15px;
            line-height: 1.7;
            margin-bottom: 12px;
        }

        p {
            margin: 0 0 8px 0;

            &:last-child {
                margin-bottom: 0;
            }
        }
    }

    .thum-meta {
        display: flex;
        gap: 20px;
        padding-top: 15px;
        border-top: 1px solid #E5E5E5;
        font-size: 15px;
        color: #666;
        font-weight: 400;

        @media (max-width: 768px) {
            font-size: 14px;
            gap: 15px;
            padding-top: 12px;
        }
    }

    .thum-date,
    .thum-views {
        font-weight: 400;
    }

    tr:hover .thum-title {
        color: #005770;
    }
}

/* Mobile Responsive for Photo Table */
@media (max-width: 768px) {
    .board-thum-table {
        display: block;
        border-top: none;

        tbody {
            display: block;
        }

        tr {
            display: block;
            border-bottom: 1px solid #BEC5C9;
            padding: 0;

            &:first-child {
                border-top: 2px solid #005770;
            }

            &:last-child {
                border-bottom: 1px solid #BEC5C9;
            }
        }

        .td-image,
        .td-content {
            display: block;
            width: 100%;
            padding: 15px;
            border: none;
        }

        .td-image {
            padding-bottom: 0;
        }

        .td-content {
            padding-top: 15px;
        }
    }
}

/* Board View Styles (Detail Page) */
.board-view-head {
    border-top: 2px solid #005770;
    border-bottom: 1px solid #BEC5C9;
    padding: 25px 20px;
    background-color: #fff;
    margin-bottom: 21px;

    .view-title {
        font-size: 23px;
        font-weight: 700;
        color: #252525;
        margin: 0 0 15px 0;
        line-height: 1.9;
        word-wrap: break-word;
        word-break: break-word;
        overflow-wrap: break-word;
    }

    .view-info {
        display: flex;
        align-items: center;
        font-size: 15px;
        color: #474747;
        font-weight: 500;

        .info-item {
            strong {
                color: #252525;
                font-weight: 700;
                margin-left: 5px;
            }
        }

        .bar {
            content: '';
            display: inline-block;
            width: 1px;
            height: 12px;
            margin: 0 15px;
        }
    }
}

.board-view-file {
    background-color: #F9F9F9;
    padding: 15px 18px;
    border-radius: 8px;

    .file-download-box {
        width: 100%;
    }

    .n-file-icon {
        font-weight: 700;
        color: #252525;
        margin-bottom: 12px;
        display: flex;
        align-items: center;
        font-size: 15px;

        &::before {
            content: '';
            background-image: url(/images/down-file.png);
            margin-right: 5px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 20px;
            height: 20px;
            display: block;
        }
    }

    .attachment-list {
        list-style: none;
        padding: 0;
        margin: 0;
    }

    .attachment-item {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 10px;
    }

    .n-down-file-icon {
        display: flex;
        align-items: center;
        flex: 1;
        min-width: 0;
        font-size: 18px;
        font-weight: 400;
        color: #252525;


        .file-name {
            margin-right: 8px;
        }

        .file-size {
            color: #666;
            font-size: 16px;
        }
    }

    .download-file-btn-box {
        flex-shrink: 0;
    }

    .download-file {
        width: 105px;
        height: 39px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #005770;
        border-radius: 6px;
        color: #005770;
        font-size: 16px;
        font-weight: 600;
        background-color: #fff;
        cursor: pointer;
        line-height: 1.6;
        padding: 0;

        &:hover {
            background-color: #f0f8fa;
        }

        &::after {
            content: '';
            background-image: url(/images/download.png);
            margin-left: 5px;
            background-repeat: no-repeat;
            background-position: center;
            background-size: contain;
            width: 21px;
            height: 21px;
            display: block;
        }
    }
}



.board-view-content {
    padding: 50px 20px;
    border-bottom: 1px solid #BEC5C9;
    min-height: 300px;
    font-size: 19px;
    font-weight: 500;
    line-height: 1.9;
    color: #474747;

    p {
        margin: 0 0 10px 0;
    }
}

/* Photo Slider in Detail Page */
.photo-slider-wrapper {
    margin-bottom: 40px;
}

.photo-slider {
    position: relative;
    display: flex;
    align-items: center;
    gap: 20px;
    margin-bottom: 20px;

    @media (max-width: 768px) {
        gap: 10px;
    }
}

.slider-btn {
    width: 50px;
    height: 50px;
    border: 1px solid #005770;
    border-radius: 50%;
    background-color: #fff;
    display: flex;
    align-items: center;
    justify-content: center;
    cursor: pointer;
    padding: 0;
    transition: all 0.2s;
    flex-shrink: 0;
    z-index: 2;

    @media (max-width: 768px) {
        width: 40px;
        height: 40px;
    }

    img {
        width: auto;
        height: 24px;
        object-fit: contain;

        @media (max-width: 768px) {
            height: 20px;
        }
    }

    &:hover {
        background-color: #005770;

        img {
            filter: brightness(0) invert(1);
        }
    }
}

.slider-container {
    flex: 1;
    overflow: hidden;
    position: relative;
    border-radius: 8px;
    background-color: #F5F5F5;
    min-height: 400px;
    display: flex;
    align-items: center;

    @media (max-width: 768px) {
        min-height: 300px;
    }
}

.slider-track {
    display: flex;
    transition: transform 0.5s ease;
    will-change: transform;
    width: 100%;
}

.slider-item {
    flex-shrink: 0;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px;
    box-sizing: border-box;

    @media (max-width: 768px) {
        padding: 15px;
    }

    img {
        width: 100%;
        height: auto;
        display: block;
        object-fit: contain;
        max-height: 600px;
        margin: 0 auto;
        border-radius: 6px;

        @media (max-width: 768px) {
            max-height: 400px;
        }
    }
}

.slider-indicators {
    display: flex;
    justify-content: center;
    gap: 10px;
    flex-wrap: wrap;

    .indicator {
        width: 12px;
        height: 12px;
        border-radius: 50%;
        border: none;
        background-color: #D0D0D0;
        cursor: pointer;
        padding: 0;
        transition: all 0.2s;

        &.active {
            background-color: #005770;
            width: 32px;
            border-radius: 6px;
        }

        &:hover {
            background-color: #005770;
            opacity: 0.7;
        }
    }
}