@charset "utf-8";

:root {
	/* === 브랜드 컬러 === */
	--board-secondary: #64748b;
	
	/* === 시맨틱 컬러 === */
	--board-success: #64a644;
	--board-warning: #fc6e51;
	--board-danger: #ed5565;
	--board-info: #1cb6ed;
	--board-dark: #434a54;
	--board-light: #aab2bd;
	
	/* === 확장 색상 팔레트 === */
	--board-pink: #ec87c0;
	--board-purple: #ac92ec;
	--board-yellow: #ffce54;
	--board-green: #a0d468;
	--board-mint: #48cfad;
	--board-lightblue: #4fc1e9;
	--board-blue: #5d9cec;
	
	/* === 확장 색상 별칭 (중복 제거) === */
	--board-red: var(--board-danger);    /* #ed5565와 동일 */
	--board-orange: var(--board-warning); /* #fc6e51와 동일 */
	
	/* === 그레이 스케일 === */
	--board-white: #ffffff;
	--board-gray-50: #fafafa;
	--board-gray-100: #f5f5f5;
	--board-gray-200: #eeeeee;
	--board-gray-300: #e0e0e0;
	--board-gray-400: #bdbdbd;
	--board-gray-500: #9e9e9e;
	--board-gray-600: #757575;
	--board-gray-700: #616161;
	--board-gray-800: #424242;
	--board-gray-900: #212121;
	--board-black: #000000;
	
	/* === 투명도 컬러 === */
	--board-overlay-100: rgba(15, 23, 42, 0.8);
	--board-overlay-200: rgba(15, 23, 42, 0.4);
	
	/* === 스페이싱 & 보더 === */
	--board-radius: 8px;
	--board-radius-sm: 4px;
	--board-radius-lg: 12px;
}

/* ========================================
   다크모드 색상 시스템
======================================== */
:root.darkMode {

	/* === 다크모드 그레이 스케일 반전 === */
	--board-white: #212121;
	--board-gray-50: #333;
	--board-gray-100: #444;
	--board-gray-200: #333;
	--board-gray-300: #444;
	--board-gray-400: #bdbdbd;
	--board-gray-500: #e0e0e0;
	--board-gray-600: #eeeeee;
	--board-gray-700: #f5f5f5;
	--board-gray-800: #fafafa;
	--board-gray-900: #ffffff;
	--board-black: #ffffff;
	
	/* === 다크모드 투명도 컬러 === */
	--board-overlay-100: rgba(0, 0, 0, 0.9);
	--board-overlay-200: rgba(0, 0, 0, 0.6);
}

/* --------------------------------------------------------
게시판 목록 스타일 - UXC LIST
----------------------------------------------------------*/
.boardListWrap {position:relative;}


/* 게시물 목록 */
[data-board="uxc_list"] {display:flex; flex-direction:column; border-top:3px solid var(--board-gray-200);}
[data-board="uxc_list"] .cardBox {display:flex; justify-content:space-between; align-items:center; position:relative; width:100%; padding:16px 0; border-bottom:1px solid var(--board-gray-200); gap:20px; text-decoration:none; color:inherit;}

[data-board="uxc_list"] .cardBox:hover {}
[data-board="uxc_list"] .cardBox.active {border-left:3px solid var(--color-prime); padding-left:10px;}
/* 공지사항 스타일 제거 - 일반 카드와 동일하게 처리 */
[data-board="uxc_list"] .cardBox .titleBox {display:flex; align-items:center; flex:1; gap:12px;}
/* [data-board="uxc_list"] .cardBox .titleBox .checkBox {display:flex; align-items:center; opacity:0; transform:scale(0.8); transition:all 0.2s ease;}
[data-board="uxc_list"] .cardBox:hover .titleBox .checkBox {opacity:1; transform:scale(1);} */
[data-board="uxc_list"] .cardBox .titleBox .checkBox {}
[data-board="uxc_list"] .cardBox .titleBox .checkBox .opt {display:flex; align-items:center;}
[data-board="uxc_list"] .cardBox .titleBox .checkBox input[type="checkbox"] {margin:0;}
[data-board="uxc_list"] .cardBox .titleBox .user {display:flex; justify-content:center; align-items:center; width:32px; min-width:32px; height:32px; overflow:hidden; border-radius:50%; background:var(--board-gray-300);}
[data-board="uxc_list"] .cardBox:hover .titleBox .user {transform:scale(1.1);}
[data-board="uxc_list"] .cardBox .titleBox .user img {width:100%; height:100%; object-fit:cover;}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo {flex:1;display:flex;gap:6px;flex-direction: column;align-items: flex-start;}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .title {display:flex; align-items:center; gap:8px; font-size:18px; font-weight:600; color:var(--board-gray-900); line-height:1.4; width:100%;}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .title a {color:inherit; text-decoration:none; display:block; width:100%;}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .title a strong {display:flex; flex-wrap:wrap; align-items:center; font-size:16px; font-weight:600; gap:2px;}
[data-board="uxc_list"] .cardBox:hover .titleBox .contentInfo .title {color:var(--color-prime);}

[data-board="uxc_list"] .cardBox .titleBox .contentInfo .desc {display:block; color:var(--board-gray-500); word-break: break-all; font-size:14px; font-weight:400; line-height:1.5; overflow:hidden; text-overflow:ellipsis; display:-webkit-box; -webkit-line-clamp:2; -webkit-box-orient:vertical;}

[data-board="uxc_list"] .cardBox .titleBox .contentInfo .title .bo_current {padding:2px 8px; border-radius:12px; background:var(--color-prime); color:var(--board-white); font-size:11px; font-weight:500; transform:scale(0.9);}
[data-board="uxc_list"] .cardBox:hover .titleBox .contentInfo .title .bo_current {transform:scale(1);}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .title .iconBox {padding:2px 6px; border-radius:10px; background:var(--board-success); color:var(--board-white); font-size:10px; font-weight:600; transform:scale(0.9);}
[data-board="uxc_list"] .cardBox:hover .titleBox .contentInfo .title .iconBox {transform:scale(1);}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .add {display:flex; align-items:center; gap:4px; color:var(--board-gray-500); font-size:14px; opacity:0.7; transition:opacity 0.2s ease;}
[data-board="uxc_list"] .cardBox:hover .titleBox .contentInfo .add {opacity:1;}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .add i {font-size:18px;}
[data-board="uxc_list"] .cardBox:hover .titleBox .contentInfo .add i {transform:scale(1.1);}
/* 정보 박스 */
[data-board="uxc_list"] .cardBox .infoBox {display:flex; align-items:center; gap:16px; opacity:0.8; transition:opacity 0.2s ease;}
[data-board="uxc_list"] .cardBox:hover .infoBox {opacity:1;}
[data-board="uxc_list"] .cardBox .labelBox {padding:4px 12px; border:1px solid var(--board-gray-200); border-radius:6px; background:var(--board-gray-50); color:var(--board-gray-600); font-size:12px; font-weight:500; white-space:nowrap;}
[data-board="uxc_list"] .cardBox:hover .labelBox {border-color:var(--color-prime); color:var(--color-prime);}
[data-board="uxc_list"] .cardBox .infoBox .info {display:flex; align-items:center; gap:16px;}
[data-board="uxc_list"] .cardBox .infoBox .info dl {display:flex; align-items:center; gap:4px; margin:0;}
[data-board="uxc_list"] .cardBox .infoBox .info dl dt {color:var(--board-gray-500); font-size:16px; }
[data-board="uxc_list"] .cardBox:hover .infoBox .info dl dt {color:var(--color-prime);}
[data-board="uxc_list"] .cardBox .infoBox .info dl dd {color:var(--board-gray-700); font-size:13px; margin:0; }
[data-board="uxc_list"] .cardBox:hover .infoBox .info dl dd {color:var(--board-gray-900);}
[data-board="uxc_list"] .cardBox .infoBox .info dl dd {font-weight:600;}
/* 빈 목록 */
[data-board="uxc_list"] .cardBox.empty {justify-content:center; color:var(--board-gray-500); font-size:16px; font-weight:500; border-style:dashed; animation:none; opacity:1; transform:none;}


/* 애니메이션 키프레임 */
@keyframes slideInLeft {
  0% {opacity:0; transform:translateX(-20px);}
  100% {opacity:1; transform:translateX(0);}
}

/* 로딩 애니메이션 */
[data-board="uxc_list"].loading .cardBox {animation:shimmer 1.5s ease-in-out infinite;}
@keyframes shimmer {
  0% {opacity:0.5; transform:translateX(-10px);}
  50% {opacity:0.8; transform:translateX(5px);}
  100% {opacity:0.5; transform:translateX(-10px);}
}

/* 페이지네이션 */
.listFooter {text-align:center;}
.listFooter .pagination {display:inline-flex; gap:8px; align-items:center;}

/* 추가 버튼 스타일 */
.boardListWrap .admBtn .buttonWrap button.warning {border-color:var(--board-danger); color:var(--board-danger);}
.boardListWrap .admBtn .buttonWrap button.warning:hover {background:var(--board-danger); color:var(--board-white);}
.boardListWrap .admBtn .buttonWrap button.prime {border-color:var(--color-prime); color:var(--color-prime);}
.boardListWrap .admBtn .buttonWrap button.prime:hover {background:var(--color-prime); color:var(--board-white);}


/* --------------------------------------------------------
반응형 디자인
----------------------------------------------------------*/
@media (max-width: 1024px) {
    .boardListWrap {}
    .boardListWrap .admBtn {flex-direction:column; gap:16px; align-items:stretch;}
    .boardListWrap .admBtn .levelWrap {justify-content:center;}
    [data-board="uxc_list"] .cardBox .infoBox .info {gap:12px;}
    [data-board="uxc_list"] .cardBox:hover {transform:translateY(-1px) translateX(2px);}
}
@media (max-width: 768px) {
    .boardListWrap {}
    .boardListWrap .toolBox {}
    .boardListWrap .toolBox .tools {justify-content:center; flex-wrap:wrap;}
    .boardListWrap .catagory ul {justify-content:center;}
    [data-board="uxc_list"] .cardBox {flex-direction:column; align-items:stretch; gap:16px; padding:14px 16px;}
    [data-board="uxc_list"] .cardBox:hover {transform:translateY(-1px);}
    [data-board="uxc_list"] .cardBox .titleBox {gap:0;}
    [data-board="uxc_list"] .cardBox .infoBox {flex-direction:column; gap:12px; align-items:stretch;}
    [data-board="uxc_list"] .cardBox .infoBox .info {gap:8px;}
    #searchPop .modalBox {width:95%; margin:20px;}
    #searchPop .searchForm {flex-direction:column; gap:12px;}
    #searchPop .searchForm select,
    #searchPop .searchForm input {width:100%;}
    #searchPop .buttonWrap {flex-direction:column;}
    #searchPop .buttonWrap button {width:100%;}
}
@media (max-width: 480px) {
    .boardListWrap {}
    .boardListWrap .admBtn {padding:12px;}
    .boardListWrap .toolBox {padding:12px;}
    [data-board="uxc_list"] .cardBox {padding:12px 0;}
    [data-board="uxc_list"] .cardBox .titleBox .contentInfo .title {font-size:14px;}
    [data-board="uxc_list"] .cardBox .infoBox .info {gap:8px; align-items:flex-start;}
    [data-board="uxc_list"] .cardBox .infoBox .info dl {width:100%;}
}

/* 접근성 고려 */
@media (prefers-reduced-motion: reduce) {
  [data-board="uxc_list"] .cardBox {animation:none; opacity:1; transform:none;}
  [data-board="uxc_list"] .cardBox:hover {transform:none; transition:box-shadow 0.2s ease;}
}