@charset "utf-8";

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


/* 게시물 목록 */
[data-board="uxc_list"] {display:flex; flex-direction:column; gap:12px;}
[data-board="uxc_list"] .cardBox {display:flex; justify-content:space-between; align-items:center; position:relative; width:100%; padding:16px 20px; border:1px solid var(--border-main); border-radius:12px; background:var(--bg-main); box-shadow:0 2px 8px rgba(0, 0, 0, 0.05); gap:20px; text-decoration:none; color:inherit; transition:all 0.2s ease; opacity:0; transform:translateX(-20px); animation:slideInLeft 0.5s ease forwards;}
[data-board="uxc_list"] .cardBox:nth-child(1) {animation-delay:0.1s;}
[data-board="uxc_list"] .cardBox:nth-child(2) {animation-delay:0.15s;}
[data-board="uxc_list"] .cardBox:nth-child(3) {animation-delay:0.2s;}
[data-board="uxc_list"] .cardBox:nth-child(4) {animation-delay:0.25s;}
[data-board="uxc_list"] .cardBox:nth-child(5) {animation-delay:0.3s;}
[data-board="uxc_list"] .cardBox:nth-child(6) {animation-delay:0.35s;}
[data-board="uxc_list"] .cardBox:nth-child(7) {animation-delay:0.4s;}
[data-board="uxc_list"] .cardBox:nth-child(8) {animation-delay:0.45s;}
[data-board="uxc_list"] .cardBox:nth-child(9) {animation-delay:0.5s;}
[data-board="uxc_list"] .cardBox:nth-child(10) {animation-delay:0.55s;}
[data-board="uxc_list"] .cardBox:nth-child(11) {animation-delay:0.6s;}
[data-board="uxc_list"] .cardBox:nth-child(12) {animation-delay:0.65s;}
[data-board="uxc_list"] .cardBox:nth-child(13) {animation-delay:0.7s;}
[data-board="uxc_list"] .cardBox:nth-child(14) {animation-delay:0.75s;}
[data-board="uxc_list"] .cardBox:nth-child(15) {animation-delay:0.8s;}
[data-board="uxc_list"] .cardBox:nth-child(n+16) {animation-delay:0.85s;}
[data-board="uxc_list"] .cardBox:hover {transform:translateY(-2px) translateX(4px); box-shadow:0 8px 24px rgba(0, 0, 0, 0.1); border-color:var(--prime-color);}
[data-board="uxc_list"] .cardBox.active {border-color:var(--prime-color); box-shadow:0 0 0 3px rgba(125, 56, 206, 0.1);}
/* 공지사항 스타일 제거 - 일반 카드와 동일하게 처리 */
[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 .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(--gray-300); transition:transform 0.2s ease;}
[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;}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .title {display:flex; align-items:center; gap:8px; font-size:14px; font-weight:600; color:var(--text-primary); line-height:1.4; transition:color 0.2s ease;}
[data-board="uxc_list"] .cardBox:hover .titleBox .contentInfo .title {color:var(--prime-color);}
[data-board="uxc_list"] .cardBox .titleBox .contentInfo .title .bo_current {padding:2px 8px; border-radius:12px; background:var(--prime-color); color:var(--bg-main); font-size:11px; font-weight:500; transform:scale(0.9); transition:transform 0.2s ease;}
[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(--success-color); color:var(--bg-main); font-size:10px; font-weight:600; transform:scale(0.9); transition:transform 0.2s ease;}
[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(--text-quaternary); 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; transition:transform 0.2s ease;}
[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 .infoBox .labelBox {padding:4px 12px; border:1px solid var(--border-sub); border-radius:16px; background:var(--bg-sub); color:var(--text-secondary); font-size:12px; font-weight:500; white-space:nowrap; transition:all 0.2s ease;}
[data-board="uxc_list"] .cardBox:hover .infoBox .labelBox {border-color:var(--prime-color); color:var(--prime-color);}
[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(--text-quaternary); font-size:16px; transition:color 0.2s ease;}
[data-board="uxc_list"] .cardBox:hover .infoBox .info dl dt {color:var(--prime-color);}
[data-board="uxc_list"] .cardBox .infoBox .info dl dd {color:var(--text-tertiary); font-size:13px; margin:0; transition:color 0.2s ease;}
[data-board="uxc_list"] .cardBox:hover .infoBox .info dl dd {color:var(--text-primary);}
[data-board="uxc_list"] .cardBox .infoBox .info dl dd.color-pr {color:var(--prime-color); font-weight:600;}
/* 빈 목록 */
[data-board="uxc_list"] .cardBox.empty {justify-content:center; color:var(--text-quaternary); 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 {margin-top:32px; text-align:center;}
.listFooter .pagination {display:inline-flex; gap:8px; align-items:center;}

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


/* --------------------------------------------------------
반응형 디자인
----------------------------------------------------------*/
@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 {flex-direction:column; gap:16px; align-items:stretch; text-align:center;}
    .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:8px;}
    [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 14px;}
    [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;}
}