/* 1. 테마별 변수 설정 */
:root, [data-bs-theme="light"] {
    --sd-gold: #c5a47e;             /* 포인트 골드 */
    --sd-bg: #ffffff;               /* 전체 배경 */
    --sd-header-bg: #f8f9fa;        /* 테이블 헤더 배경 */
    --sd-text-main: #1a1a1a;        /* 기본 텍스트 */
    --sd-text-muted: #777777;       /* 보조 텍스트 */
    --sd-border: #e2e2e2;           /* 구분선 */
    --sd-row-hover: #f9f9f9;        /* 마우스 호버 배경 */
    /* 라이트 제작 버튼 색 배경 */
    --select-btn-bg: transparent;
    --select-btn-color: #000000;
    --select-btn-border: #000000;
    --select-btn-active-bg: #000000;
    --select-btn-active-color: #ffffff;
}

[data-bs-theme="dark"] {
    --sd-bg: #121212;               /* 다크 배경 */
    --sd-header-bg: #1e1e1e;        /* 다크 헤더 배경 */
    --sd-text-main: #f5f5f5;        /* 다크 기본 텍스트 */
    --sd-text-muted: #aaaaaa;       /* 다크 보조 텍스트 */
    --sd-border: #333333;           /* 다크 구분선 */
    --sd-row-hover: #1c1c1c;        /* 다크 호버 배경 */
    /* 다크 제작 버튼 색 배경 */
    --select-btn-color: #ffffff;
    --select-btn-border: #ffffff;
    --select-btn-active-bg: #ffffff;
    --select-btn-active-color: #000000;
}

/* 제작 버튼 설정 */
.select-btn, .select-btn-active{
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.375rem 0.75rem; /* 부드러운 버튼 패딩 */
    font-size: 1rem;
    font-weight: 400;
    line-height: 1.5;
    text-align: center;
    text-decoration: none !important; /* a 태그 밑줄 제거 */
    vertical-align: middle;
    cursor: pointer;
    user-select: none;
    border-radius: 4px;
    transition: all 0.2s ease-in-out;
}
.select-btn {
    /* 기본 스타일: 화이트 배경 / 블랙 테두리 / 블랙 글자 */
    /*color: #ffffff;*/
    color: var(--select-btn-color);
    /*background-color: #ffffff;*/
    background-color: var(--select-btn-bg);
    /*border: 1px solid #ffffff;*/
    border: 1px solid var(--select-btn-border);

    cursor: pointer;
    border-radius: 4px;

    /* 부드러운 효과를 위한 설정 (0.3초 동안 변화) */
    transition: all 0.3s ease;
}
.select-btn-active {
    /*color: #000000;*/
    color: var(--select-btn-active-color);
    /*background-color: #ffffff;*/
    background-color: var(--select-btn-active-bg);
    /*border: 1px solid #ffffff;*/
    border: 1px solid var(--select-btn-border);
    /*!* 1. 살짝 눌리는 느낌을 주는 크기 조절 (95%로 축소) *!*/
    /*transform: scale(0.95);*/
}
/* 호버 시 스타일: 블랙 배경 / 화이트 글자 */
.select-btn:hover, .select-btn-active:hover{
    /*color: #ffffff;*/
    color: var(--select-btn-color);
    /*background-color: #000000;*/
    background-color: var(--select-btn-bg);
    /*border: 1px solid #ffffff;*/
    border: 1px solid var(--select-btn-border);
}



/* 2. 레이아웃 및 타이포그래피 */
.notice-container {
    max-width: 1100px;
    margin: 60px auto;
    font-family: 'Pretendard', -apple-system, BlinkMacSystemFont, system-ui, Roboto, sans-serif;
}

.notice-header {
    text-align: center;
    margin-bottom: 50px;
}

.notice-title {
    font-size: 2.5rem;
    font-weight: 800;
    color: var(--sd-text-main);
    letter-spacing: -1px;
    text-transform: uppercase;
}

/* 3. 테이블형 리스트 스타일 */
.notice-table {
    border-top: 2px solid var(--sd-text-main); /* 상단 굵은 선 */
}

/* 헤더 및 각 행 공통 설정 */
.table-header, .table-row {
    display: flex !important;;
    align-items: center;
    text-align: center;
    padding: 18px 0;
    border-bottom: 1px solid var(--sd-border);
}

/* 테이블 헤더 (번호, 제목 등) */
.table-header {
    background-color: var(--sd-header-bg);
    font-weight: 700;
    font-size: 0.95rem;
    color: var(--sd-text-main);
}

/* 게시글 행 */
.table-row {
    text-decoration: none !important;
    color: var(--sd-text-main);
    transition: all 0.2s ease-in-out;
}

.table-row:hover {
    background-color: var(--sd-row-hover);
}

/* 컬럼별 너비 설정 */
.num { width: 10%; }
.title {
    width: 55%;
    text-align: left;
    padding-left: 30px;
    font-weight: 500;
    /* 긴 제목 말줄임표 처리 */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.writer { width: 12%; }
.date { width: 13%; color: var(--sd-text-muted); }
.hits { width: 10%; color: var(--sd-text-muted); }

/* 제목 내 포인트 요소 */
.category {
    color: var(--sd-gold);
    font-weight: 700;
    margin-right: 6px;
}

.table-row:hover .title {
    color: var(--sd-gold);
}