/* ==========================================================================
   COMPONENTS.CSS - 컴포넌트 스타일 (UI 요소, 버튼, 카드, 폼 등)
   2025-10-05: global.css에서 컴포넌트 관련 CSS 분리
   ========================================================================== */

/* ==========================================================================
   검색 컴포넌트 (Search Component) - 장식 스타일만 포함
   ========================================================================== */
.search {
    width: 100%;
    overflow: hidden;
    position: relative;
    border-radius: 40px;
    border: 2px solid #008dd5;
}

.search input[type=text] {
    display: block;
    width: 100%;
    height: 73px;
    line-height: 73px;
    border: none;
    outline: none;
    padding-left: 180px;
    font-size: var(--font-body);
    font-weight: 400;
    letter-spacing: -0.05em;
}

.search button {
    display: block;
    position: absolute;
    right: 0px;
    top: 0;
    width: 100px;
    height: 73px;
    border: none;
    color: #333;
    font-size: var(--font-h2);
    background: none;
}

.xi-search {
    font-size: var(--font-display);
}

.img_logo_se {
    position: absolute;
    left: 15px;
    height: 73px;
    display: flex;
    align-items: center;
}

.search input::placeholder {
    color: #8a949e;
    font-size: var(--font-body);
    opacity: 1;
}

.search input::-webkit-input-placeholder {
    color: #8a949e;
}

.search input::-moz-placeholder {
    color: #8a949e;
    opacity: 1;
}

.search input:-ms-input-placeholder {
    color: #8a949e;
}

.search input::-ms-input-placeholder {
    color: #8a949e;
}


/* ==========================================================================
   헤더 유틸리티 컴포넌트 (Header Utility Components)
   ========================================================================== */

/* 토글 버튼 */
.btn-toggle {
    background: none;
    border: 0;
    cursor: pointer;
    font-size: var(--font-small);
    color: #000;
    padding: 5px 10px;
    display: flex;
    align-items: center;
}

/* 토글 레이어 */
.toggle-layer {
    display: none;
    position: absolute;
    top: 100%;
    right: 0;
    background: #fff;
    border: 1px solid #ddd;
    min-width: 160px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-top: 5px;
    z-index: 1000;
}

.toggle-layer.active {
    display: block;
}

.toggle-layer ul {
    list-style: none;
    margin: 0;
    padding: 0;
}

.toggle-layer li {
    border-bottom: 1px solid #f1f1f1;
}

.toggle-layer li:last-child {
    border-bottom: none;
}

.toggle-layer a,
.toggle-layer button.btn-size {
    display: block;
    width: 100%;
    padding: 8px 12px;
    text-align: left;
    background: none;
    border: none;
    cursor: pointer;
    font-size: var(--font-small);
    color: #333;
}

.toggle-layer a:hover,
.toggle-layer button.btn-size:hover {
    background: #f8f8f8;
    color: #0073e6;
}

.toggle-layer li.active > button.btn-size {
    font-weight: bold;
    color: #0073e6;
}

/* 줌 컨트롤 */
.zoom-control {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px;
    justify-content: center;
}

.zoom-control button {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    border: 1px solid #ccc;
    background: #fff;
    cursor: pointer;
    font-size: var(--font-small);
    font-weight: bold;
    line-height: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.2s ease;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.zoom-control button:active {
    transform: scale(0.95);
    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.2);
}

#zoom-reset {
    width: auto;
    padding: 5px 12px;
    border-radius: 6px;
    font-size: var(--font-small);
    font-weight: normal;
    background: #f5f5f5;
}

#zoom-level {
    min-width: 55px;
    text-align: center;
    font-weight: bold;
    font-size: var(--font-small);
}


/* ==========================================================================
   퀵박스 컴포넌트 (Quick Box Components)
   ========================================================================== */
/* 2025-10-07: 패딩을 디자인 시스템 변수로 변경 */
.qucik_box {
    width: calc(100% / 2 - 15px);
    box-sizing: border-box;
    height: 325px;
    border-radius: 25px;
    padding: var(--spacing-lg);
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

/* 2025-10-07: h3 타이틀 스타일 (CSS 변수 사용) */
.qucik_box h3 {
    margin-bottom: var(--spacing-md);
    font-size: var(--font-h3);
    font-weight: var(--weight-h3);
    color: #fff;
    line-height: 1.3;
}

.qucik_box p {
    font-size: var(--font-small);
    line-height: 145%;
    color: rgba(255, 255, 255, 0.8);
}

/* 2025-10-07: 퀵박스 버튼 텍스트 크기 16px로 설정 */
.item_qu1, .item_qu2, .item_qu3, .item_qu4 {
    font-size: var(--font-small);
}

/* 2025-10-07: 이미지 배경을 CSS gradient로 변환 */
.green_box_color {
    background: linear-gradient(135deg, #3eb8a8, #1a7a7a);
    color: #fff;
}

.blue_box_color {
    background: linear-gradient(135deg, #3e95b8, #1a5a7a);
    color: #fff;
}


/* ==========================================================================
   비주얼존 컨트롤 (Visual Zone Controls)
   ========================================================================== */
.vis_zone .area {
    position: relative;
    padding-bottom: 19px;
}

.vis_zone .roll {
    height: 325px;
    border: 2px solid #ddd;
    box-sizing: border-box;
    border-radius: 25px;
    overflow: hidden;
}

.vis_zone .cont {
    position: absolute;
    bottom: 0;
    left: 50%;
    transform: translateX(-50%);
    background: #fff;
    box-shadow: 2px 2px 5px 0px #0000004f;
    border-radius: 30px;
    padding: 10px 15px;
    z-index: 2;
    display: flex;
    gap: 7px;
    font-size: var(--font-small);
    font-weight: 700;
    align-items: center;
}

.vis_zone .cont .current {
    color: #294579;
}

.vis_zone .cont button {
    border: 0;
    background: none;
}


/* ==========================================================================
   링크박스 버튼 (Link Box Buttons)
   ========================================================================== */
.link_box {
    display: flex;
    gap: 15px;
    flex-direction: column;
    font-size: var(--font-small);
}

.link_box .btn_cus {
    display: flex;
    align-items: center;
    width: 100%;
    height: 53px;
    line-height: 47px;
    border-radius: 50px;
    border: 2px solid #ddd;
    padding-left: 18px;
    color: #fff;
    gap: 15px;
    background: url(../images/arrow.png) no-repeat 90% 50%;
}


/* ==========================================================================
   보드 아이템 컴포넌트 (Board Item Components)
   ========================================================================== */
.board-item .board-content {
    width: 100%;
}

.board-item .board-content ul li {
    border-bottom: 1px solid #DBDBDB;
    padding: 20px 0;
}

.board-item .board-content ul li a {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
}

/* 2025-10-07: 제목 영역 - 날짜 공간 확보하고 말줄임표 처리 */
.board-item .board-content ul li a .sub_txt {
    order: 2;
    display: block;
    flex: 1;
    min-width: 0;
    font-size: var(--font-small);
    line-height: 150%;
    letter-spacing: -1px;
    color: #333333;
    position: relative;
}

.board-item .board-content ul li a .sub_txt strong {
    font-weight: 400;
    display: block;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 2025-10-09: 요약 텍스트 2줄 제한 */
.board-item .board-content ul li a .sub_txt p {
    font-size: var(--font-small);
    color: #666;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    line-height: 1.5;
}

/* 2025-10-05: 호버 시 font-weight 변경 제거, 색상만 변경 */
.board-item .board-content ul li a:hover strong,
.board-item .board-content ul li a:focus strong {
    color: #1e3e83;
}

/* 2025-10-07: 날짜 영역 - 고정 너비로 여러 줄 방지 */
.board-item .board-content ul li a .date {
    order: 1;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    flex-shrink: 0;
    width: 120px;
    gap: 10px;
}

.board-item .board-content ul li.board-state {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 120px;
    padding: 20px;
    font-size: var(--font-small);
    color: #666;
    background: #f5f7fb;
    border-radius: 12px;
    list-style: none;
    width: 100%;
    text-align: center;
}

.board-item .board-content ul li a .date span {
    width: 100%;
    font-weight: 900;
    font-size: var(--font-h1);
    color: #333;
    order: 1;
    text-align: center;
    position: relative;
}

.board-item .board-content ul li a .date span::after {
    position: absolute;
    top: 0;
    right: 14px;
    width: 20px;
    height: 20px;
    content: "N";
    display: flex;
    align-items: center;
    justify-content: center;
    color: #fff;
    background: red;
    border-radius: 100%;
    font-size: var(--font-small);
}

.board-item .board-content ul li.down_noti a .date span::after {
    display: none;
}

.board-item .board-content ul li a .date em {
    font-weight: 400;
    font-size: var(--font-small);
    line-height: 10px;
    color: #84898f;
    order: 2;
}

/* 탭 영역 */
.tab_zone {
    font-weight: 500;
    gap: 10px;
    display: flex;
    align-items: center;
}

.tab_zone button {
    border: 0;
    background: none;
    font-size: var(--font-small);
    border-bottom: 5px solid #fff;
    color: #333;
    text-align: center;
    padding: 15px;
    position: relative;
}

.tab_zone button:last-of-type::after {
    display: none;
}

.tab_zone button::after {
    position: absolute;
    right: 0;
    content: "/";
    font-size: var(--font-small);
    color: #ddd;
    margin-right: -10px;
}

.tab_zone button.active {
    color: #1d335b;
    border-color: #1d335b;
}

.tap_up {
    border-bottom: 1px solid #dddddd;
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.small_cot_noti {
    padding: 28px;
    padding-top: 8px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    border-radius: 25px;
}

.no_titx {
    font-size: var(--font-body);
    color: #333;
    font-weight: 500;
}

/* 접힌 공지 */
.down_noti p {
    display: none;
}

.board-item .board-content ul li.down_noti {
    border: 0;
    padding: 0;
    padding-top: 10px;
}

.board-item .board-content ul li.down_noti a {
    flex-direction: row-reverse;
}

.board-item .board-content ul li.down_noti .date {
    flex-wrap: nowrap !important;
    flex-direction: row-reverse;
    gap: 0;
    align-items: center;
    position: relative;
}

.board-item .board-content ul li.down_noti .date span {
    font-size: var(--font-small) !important;
    font-weight: 400;
    width: auto;
    color: #666;
}

/* .board-item .board-content ul li.down_noti .date span::before {
    content: "-";
    font-size: var(--font-small);
    font-weight: 400;
    color: #666;
} */

.board-item .board-content ul li.down_noti a .date em {
    font-size: var(--font-small);
    display: inline-block;
    line-height: normal;
    color: #666;
}


/* ==========================================================================
   도서 & 배너 박스 (Books & Banner Boxes)
   ========================================================================== */
.up_books {
    display: flex;
    text-align: center;
    position: relative;
    padding-top: 26px;
}

.up_books::after {
    position: absolute;
    top: 0;
    background: #dce4ea;
    height: 2px;
    width: 100%;
    content: "";
    border-radius: 25px;
    overflow: hidden;
    height: 292px;
    z-index: -1;
}

.up_books .book_list {
    width: 50%;
    text-align: center;
}

.img_book {
    margin: 0 auto;
}

.book_list a {
    display: inline-block;
}

.book_list p {
    font-size: var(--font-small);
    line-height: 145%;
    color: #1e2124;
    padding: 10px 0;
}

.book_list p span {
    color: #13366e;
}

.book_list .bok1.img_book {
    background: url(../images/item_book1.jpg) no-repeat center;
    background-size: cover;
    width: 200px;
    height: 265px;
}

.book_list .bok2.img_book {
    background: url(../images/item_book2.jpg) no-repeat center;
    background-size: cover;
    width: 200px;
    height: 265px;
}

.down_books {
    width: 100%;
}

.down_books a {
    display: block;
    text-align: center;
    font-size: var(--font-small);
    padding: 15px 0;
    border-radius: 15px;
    background: #13366e;
    color: #fff;
}

.down_books a:hover {
    background: #3366cc;
}

.small_cot.small_cot_book {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.gar_1_box {
    background: url(../images/gar_1.jpg) no-repeat center;
}

.gar_2_box {
    background: url(../images/gar_2.jpg) no-repeat center;
}

.reverse .box {
    background: url(../images/banner_zone.png) no-repeat center;
    background-size: cover;
    height: 325px;
    width: 100%;
}


/* ==========================================================================
   푸터 링크 컴포넌트 (Footer Link Components)
   ========================================================================== */
.footer_up {
    display: flex;
    align-items: center;
    justify-content: space-between;
}

.foot_sub_link {
    padding: 15px 0;
    border-bottom: 1px solid #becad6;
    text-align: right;
}

.foot_sub_link ul {
    display: flex;
    gap: 25px;
    justify-content: flex-end;
}

.foot_sub_link ul li {
    font-size: var(--font-small);
}

.foot_sub_link ul li a {
    color: #000;
    font-weight: 500;
}

.foot_sub_link ul li a.active {
    color: #2c497c;
}

.foot_link_box {
    display: flex;
    gap: 28px;
}

.foot_link_box a {
    padding: 15px;
    text-align: left;
    font-size: var(--font-small);
    box-sizing: border-box;
    border: 1px solid #000;
    width: 270px;
    color: #000;
    background: url(../images/link_box.png) no-repeat 95% 50%;
}


/* ==========================================================================
   보드 검색 폼 (Board Search Form)
   ========================================================================== */
.board_search {
    border: none;
    box-sizing: border-box;
    background: #f7f8f9;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 13px;
    font-size: var(--font-small);
    padding: 28px 0;
    margin: 42px 0;
    box-shadow: none;
}

select {
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    background: #fff url('../images/icons_diff.png') no-repeat right 16px center;
    background-size: 12px;
}

.board_search_txt {
    border: 1px solid #ddd;
    background: #fff;
    box-sizing: border-box;
    height: 45px;
    width: 100%;
}

.board_search select {
    width: 150px;
    border: 1px solid #ddd;
    color: #000;
    height: 45px;
    padding: 0 10px;
}

.board_search_sumit {
    border: 1px solid #ddd;
    background: #1d335b;
    box-sizing: border-box;
    height: 45px;
    color: #fff;
    width: 90px;
}


/* ==========================================================================
   보드 리스트 & 페이징 (Board Lists & Pagination)
   ========================================================================== */
.borad_zone {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: #333;
    padding-bottom: 21px;
    border-bottom: 2px solid #000;
}

.borad_zone span {
    font-weight: 400;
    font-size: var(--font-small);
    position: relative;
    padding-left: 30px;
}

.borad_zone span::after {
    position: absolute;
    width: 19px;
    height: 12px;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    content: "";
    background: url(../images/pointer_zeo2.png) no-repeat center;
}

.borad_zone strong {
    font-weight: 400;
    font-size: var(--font-small);
}

.borad_zone b {
    font-weight: 400;
    color: #1d335b;
    font-size: var(--font-small);
}

.borad_list {
    display: flex;
    color: var(--text-primary);
    padding: var(--spacing-xl);
    justify-content: space-between;
    border-bottom: 1px solid var(--border-light);
}

.no_list_board {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
}

.no_list_board h3 {
    font-weight: var(--weight-semibold);
    margin-bottom: var(--spacing-lg);
}

.no_list_board ul {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-md);
}

.no_list_board ul li {
    display: flex;
    align-items: center;
    font-size: var(--font-small);
}

.no_list_board ul li span {
    color: var(--text-secondary);
    padding-left: 25px;
    display: inline-block;
    position: relative;
    width: 115px;
}

.no_list_board ul li span::after {
    position: absolute;
    left: 0;
    content: "";
    height: 13px;
    width: 2px;
    background: var(--accent-navy);
    top: 50%;
    transform: translateY(-50%);
}

.no_list_board ul li p {
    font-weight: var(--weight-medium);
}

.no_list_board_btn {
    width: 152px;
    height: 53px;
    background: #13366e;
    color: #fff;
    display: flex;
    align-items: center;
    gap: 15px;
    justify-content: center;
    border-radius: 10px;
    font-size: var(--font-body);
}

.no_list_board_img img {
    max-height: 330px;
    height: 100%;
}

.paging {
    margin: 30px 0 150px 0;
}

.paging ul {
    display: flex;
    gap: 10px;
    justify-content: center;
    align-items: center;
}

.paging ul li {
    width: 35px;
    height: 35px;
    box-sizing: border-box;
    border: 1px solid #ddd;
    color: #333;
    display: flex;
    align-items: center;
    justify-content: center;
}

.paging ul li.active {
    background: #13366e;
    color: #fff;
}

.paging ul li.none_ac {
    border: 0;
}


/* ==========================================================================
   토스트 알림 (Toast Notification)
   ========================================================================== */
#toast {
    position: fixed;
    left: 50%;
    bottom: 28px;
    transform: translateX(-50%);
    background: rgba(0, 0, 0, .86);
    color: #fff;
    padding: 10px 14px;
    border-radius: 10px;
    font-size: var(--font-small);
    line-height: 1;
    opacity: 0;
    pointer-events: none;
    transition: opacity .22s ease, transform .22s ease;
    z-index: 1000000;
}

#toast.show {
    opacity: 1;
    transform: translateX(-50%) translateY(-4px);
}


/* ==========================================================================
   논문 리스트 카드 (Paper List Cards)
   ========================================================================== */
.paper-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    gap: 0;
}

.paper-item {
    border-bottom: 1px solid #e9ecef;
    border-radius: 0;
    padding: var(--spacing-xl) var(--spacing-xl) var(--spacing-xl) var(--spacing-lg);
    background: #fff;
    display: grid;
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
        ". badge ."
        "number title download"
        ". details .";
    gap: var(--spacing-md) var(--spacing-lg);
    align-items: start;
    /* 2025-10-22: 배경 채우기 효과를 위한 설정 */
    position: relative;
    overflow: hidden;
}

/* 2025-10-22: 파스텔톤 배경이 부드럽게 채워지는 효과 (opacity + width) */
/* 2025-10-22: 디자인 시스템 변수 사용 */
.paper-item::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 0;
    height: 100%;
    background: linear-gradient(90deg, var(--bg-pastel-blue-start) 0%, var(--bg-pastel-blue-end) 100%);
    opacity: 0;
    transition: width 0.4s ease, opacity 0.4s ease;
    z-index: 0;
}

.paper-item:hover::before {
    width: 100%;
    opacity: 1;
}

/* 2025-10-22: 컨텐츠가 배경 위에 표시되도록 z-index 설정 */
.paper-item > * {
    position: relative;
    z-index: 1;
}

.paper-badge-row {
    grid-area: badge;
    text-align: left;
}

.paper-number-cell {
    grid-area: number;
    display: flex;
    align-items: center;
}

/* 2025-10-21: paper-title과 같은 크기로 조정 (h2 → h3), 색상 #075985로 변경 */
.paper-number {
    font-size: var(--font-h3);
    font-weight: var(--weight-bold);
    color: var(--text-badge-blue);
    line-height: var(--line-h3);
}

.paper-title-cell {
    grid-area: title;
    display: flex;
    align-items: center;
}

.paper-download-cell {
    grid-area: download;
    display: flex;
    align-items: flex-start;
    padding-top: 4px;
}

.paper-details {
    grid-area: details;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-sm);
}

.paper-meta {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 10px;
    color: var(--text-secondary);
    font-size: var(--font-small);
}

/* 2025-10-21: 색상을 디자인 시스템 변수로 교체 */
.paper-badge {
    align-self: flex-start;
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 5px 12px;
    border-radius: 9999px;
    font-size: var(--font-small);
    font-weight: var(--weight-bold);
    letter-spacing: .01em;
    background: #f0f9ff;
    color: var(--text-badge-blue);
    border: 1px solid #bae6fd;
}

.paper-title {
    font-size: var(--font-h3);
    font-weight: var(--weight-h1);
    color: var(--text-primary);
    text-decoration: none;
    line-height: var(--line-h3);
}

.paper-title:hover {
    text-decoration: underline;
    text-underline-offset: 8px;
}

/* 2025-10-21: paper-title 크기 감소에 맞춰 margin-top 조정 (35px → 24px) */
.paper-info {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 6px 14px;
    margin-top: var(--spacing-lg);
    color: var(--text-secondary);
    font-size: var(--font-body);
}

.paper-info > span + span {
    position: relative;
    padding-left: 14px;
}

.paper-info > span + span::before {
    content: "·";
    position: absolute;
    left: 0;
    top: 0;
    color: #94a3b8;
}

.paper-info > span strong {
    font-weight: 700;
    margin-right: 6px;
    color: #334155;
}

.paper-actions {
    flex: 0 0 auto;
    display: flex;
    align-items: center;
    gap: 8px;
}


/* ==========================================================================
   버튼 스타일 (Button Styles)
   ========================================================================== */
.btn-primary {
    background: #13366e;
    color: #fff;
    border-color: #13366e;
    padding: 10px 15px;
    font-size: var(--font-small);
    border-radius: 5px;
    display: flex;
    flex-direction: row-reverse;
    align-items: center;
    justify-content: center;
    gap: 15px;
}

.btn-primary img {
    max-width: 25px;
}

.btn-primary:hover {
    background: #1e40af;
    border-color: #1e40af;
}


/* ==========================================================================
   폼 시스템 (Form System)
   ========================================================================== */
.kpha-form-root {
    --brand: #1474cc;
    --brand-weak: #e7f1fb;
    --ink: #202124;
    --muted: #000;
    --line: #e0e3e7;
    --bg: #fff;
    --radius: 14px;
}

.kpha-form-root * {
    box-sizing: border-box;
}

.kpha-form-root .kpha-form-body {
    max-width: 1400px;
    margin: 0 auto;
    padding: 0 0 40px;
}

.kpha-form-root .hero {
    background: linear-gradient(180deg, var(--brand-weak), #fff 60%);
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 20px;
    margin: 0 0 14px;
}

.kpha-form-root .kpha-logo {
    display: flex;
    align-items: center;
    gap: 10px;
    margin-bottom: 6px;
}

.kpha-form-root .kpha-logo .badge {
    width: 36px;
    height: 36px;
    border-radius: 50%;
    background: var(--brand);
    color: #fff;
    display: grid;
    place-items: center;
    font-weight: 700;
}

.kpha-form-root .title {
    font-size: var(--font-body);
    margin: 0 0 2px;
}

.kpha-form-root .subtitle {
    color: var(--muted);
    margin: 0;
    font-size: var(--font-small);
}

.kpha-form-root .meta {
    margin-top: 8px;
    font-size: var(--font-small);
    color: var(--muted);
}

.kpha-form-root .card {
    border: 1px solid var(--line);
    border-radius: var(--radius);
    padding: 50px;
    background: #fff;
    margin: 50px 0;
}

.kpha-form-root .section-title {
    margin: 0 0 30px;
    font-size: var(--font-h2);
    display: flex;
    align-items: center;
    gap: 15px;
    font-weight: 500;
    color: #000;
}

.kpha-form-root .section-title:before {
    content: "";
    display: inline-block;
    width: 19px;
    height: 12px;
    background: url(../images/pointer_zeo2.png) no-repeat center;
}

/* 2025-10-21: 한 단계 작은 섹션 제목 - 아이콘 없음 */
.kpha-form-root .subsection-title {
    margin: 0 0 12px;
    font-size: var(--font-h3);
    font-weight: 600;
    color: #000;
    line-height: 1.4;
}

/* 2025-10-21: 입력 필드 간격 조정 - 박스 제거로 간격 축소 */
.kpha-form-root .grid {
    display: grid;
    gap: var(--spacing-lg);  /* 24px - 박스가 아니므로 간격 축소 */
    grid-template-columns: 1fr;
}

/* 2025-10-21: 박스 안에 박스 구조 제거 - field는 단순 컨테이너로 변경 */
/* 2025-10-21: PC 가로 레이아웃, 모바일 세로 레이아웃 */
.kpha-form-root .field {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

/* PC에서는 가로 레이아웃 */
@media (min-width: 768px) {
    .kpha-form-root .grid .field {
        flex-direction: row;
        align-items: center;
        gap: 16px;
    }
}

.kpha-form-root .field > div {
    position: relative;
}

/* 2025-10-21: Material Icons 추가 및 레이블 스타일링 */
.kpha-form-root .lbl {
    font-size: var(--font-body);
    color: var(--muted);
    display: flex;
    align-items: center;
    gap: 8px;
}

/* PC에서 레이블 고정 너비 */
@media (min-width: 768px) {
    .kpha-form-root .grid .field .lbl {
        min-width: 140px;
        flex-shrink: 0;
    }
}

/* Material Icons 스타일 */
.kpha-form-root .lbl .material-symbols-outlined {
    font-size: 20px;
    color: var(--accent-tertiary, #294579);
}

.kpha-form-root .req {
    color: #d93025;
    margin-left: 2px;
}

.kpha-form-root input[type="text"],
.kpha-form-root input[type="email"],
.kpha-form-root input[type="tel"],
.kpha-form-root textarea,
.kpha-form-root select {
    width: 100%;
    padding: 15px 12px;
    border: 1px solid #ebebeb;
    border-radius: 10px;
    font-size: var(--font-small);
    outline: 0;
    background: #f4f4f6;
    position: relative;
}

/* PC에서 입력창이 나머지 공간 차지 */
@media (min-width: 768px) {
    .kpha-form-root .grid .field input[type="text"],
    .kpha-form-root .grid .field input[type="email"],
    .kpha-form-root .grid .field input[type="tel"],
    .kpha-form-root .grid .field textarea,
    .kpha-form-root .grid .field select {
        flex: 1;
        width: auto;
    }
}

.kpha-form-root textarea {
    min-height: 90px;
    resize: vertical;
}

.kpha-form-root .choices {
    display: flex;
    flex-wrap: wrap;
    gap: 10px;
}

/* 2025-10-21: 기본 border 1px, 선택시 2px, 좌우 여백 8px 추가 */
.kpha-form-root .chip {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    padding: 8px 20px;  /* 좌우 여백 8px 추가 (12px → 20px) */
    border: 1px solid var(--line);  /* 기본 1px */
    border-radius: 999px;
    background: #fff;
    cursor: pointer;
    font-size: var(--font-small);
    color: #000;
}

.kpha-form-root .chip:has(input:checked) {
    border-width: 2px;  /* 선택시 2px */
    border-color: #0a3874;
    color: var(--ink);
}

.kpha-form-root .chip:has(input:focus-visible) {
    outline: 2px solid #0a3874;
    outline-offset: 2px;
}

.kpha-form-root .chip input {
    accent-color: var(--brand);
}

.price {
    font-size: var(--font-small);
}

.kpha-form-root .notice strong {
    margin-bottom: 5px;
    display: block;
}

.kpha-form-root .notice {
    background: #fff;
    border: 1px dashed var(--line);
    padding: 20px;
    border-radius: 12px;
    color: var(--muted);
    font-size: var(--font-small);
    line-height: 155%;
}

/* 2025-10-21: 테이블 외곽 좌우 테두리 제거 - 상하만 유지 */
.kpha-form-root table.price {
    width: 100%;
    border-collapse: collapse;
    border-left: none;
    border-right: none;
    border-top: 2px solid #000;
    border-bottom: 1px solid var(--line);
}

/* 2025-10-21: 세로선 제거 - 가로선만 유지 */
.kpha-form-root table.price th,
.kpha-form-root table.price td {
    border-top: 1px solid var(--line);
    border-bottom: 1px solid var(--line);
    border-left: none;
    border-right: none;
    padding: 10px 12px;
    text-align: center;
    font-weight: 400;
    color: #333;
}

/* 2025-10-21: thead 하단 선으로 필드와 값 구분 (테이블 맨 위만 2px, 나머지 1px) */
.kpha-form-root table.price thead th {
    background: #f8fafc;
    font-weight: 700;
    color: #333;
    border-bottom: 1px solid #000;
}

/* 2025-10-21: 버튼 간격 24px로 확대 */
.kpha-form-root .actions {
    display: flex;
    gap: var(--spacing-lg);  /* 24px */
    flex-wrap: wrap;
    margin-top: 8px;
    justify-content: center;
}

.kpha-form-root .btn {
    appearance: none;
    border: 0;
    border-radius: 10px;
    padding: 15px 20px;
    font-weight: 500;
    cursor: pointer;
    font-size: var(--font-small);
}

.kpha-form-root .btn-primary {
    background: #0a3874;
    color: #fff;
}

/* 2025-10-21: 제출 버튼 hover 효과 */
.kpha-form-root .btn-primary:hover {
    background: #082a5a;
}

.kpha-form-root .btn-ghost {
    background: #fff;
    border: 1px solid var(--line);
    color: var(--ink);
}

/* 2025-10-21: 초기화 버튼 hover 효과 */
.kpha-form-root .btn-ghost:hover {
    border-color: var(--accent-tertiary);
    color: var(--accent-tertiary);
    background: rgba(41, 69, 121, 0.08);
}

.kpha-form-root .footnote {
    font-size: var(--font-small);
    color: var(--muted);
}

/* 2025-10-21: 섹션 간 구분선 - 제목 간격 4xl */
.kpha-form-root .divider {
    height: 1px;
    background: var(--line);
    margin: var(--spacing-4xl) 0;  /* 64px */
}

.kpha-form-root .sr-only {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    clip: rect(0, 0, 0, 0);
    border: 0;
}

.kpha-form-root .actions .btn-print {
    background: none;
    border: 1px solid var(--line);
    color: var(--ink);
}

/* 2025-10-21: 인쇄하기 버튼 hover 효과 추가 */
.kpha-form-root .actions .btn-print:hover {
    border-color: var(--accent-tertiary);
    color: var(--accent-tertiary);
    background: rgba(41, 69, 121, 0.08);
}

.sub_info_form {
    display: flex;
    gap: 15px;
    font-size: var(--font-small);
    flex-direction: column;
    color: #333;
}

.sub_info_form strong {
    color: #1e3e83;
    font-weight: 400;
}


/* ==========================================================================
   결제 UI 컴포넌트 (Payment UI Components)
   ========================================================================== */

/* 2025-10-28: 가짜 결제 팝업 CSS 제거 - 정식 Toss Payments API 사용 */

/* Certificate Button Style */
.kpha-cert .btn {
    height: 40px;
    padding: 0 14px;
    border-radius: 10px;
    border: 0;
    cursor: pointer;
    background: #0a3874;
    color: #fff;
    font-weight: 400;
}

/* Certificate */
.kpha-cert {
    margin: 24px 0;
}

.kpha-cert h3 {
    color: #000;
}

.kpha-cert-card {
    max-width: 720px;
    margin: 0 auto;
    background: #fff;
    border: 1px solid #e5e8eb;
    border-radius: 16px;
    padding: 20px;
    box-shadow: 0 6px 22px rgba(0, 0, 0, .04);
}

.kpha-cert-card header h3 {
    margin: 0 0 4px;
    font-size: var(--font-body);
}

.kpha-cert-card header .muted {
    margin: 0;
    color: #6b7684;
    font-size: var(--font-small);
}

.kpha-cert-card .kv {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 20px 16px;
    margin: 16px 0;
}

.kpha-cert-card .kv dt {
    color: #6b7684;
    font-size: var(--font-small);
}

.kpha-cert-card .kv dd {
    margin: 0;
    font-weight: 500;
    font-size: var(--font-small);
    color: #333;
    margin-top: 8px;
}

.kpha-cert-card footer {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}

.kpha-cert-card footer p {
    margin: 0;
    color: #0a3b7b;
    font-size: var(--font-small);
}

[hidden] {
    display: none !important;
}

.toss-mock-processing[hidden],
.toss-mock-success[hidden] {
    display: none !important;
}


/* ==========================================================================
   서브페이지 컴포넌트 (Subpage Components)
   ========================================================================== */
.subpage2 .borad_list {
    background: #f7f8f9;
    border: 1px solid #ddd;
    flex-direction: row-reverse;
    justify-content: flex-end;
    gap: 50px;
    align-items: center;
}

.subpage2 {
    margin-bottom: 100px;
}

.view_contents {
    padding-top: 50px;
    margin-bottom: var(--spacing-lg);
}

.view_contents h3 {
    color: #000;
    padding-bottom: 30px;
    border-bottom: 3px solid #000;
}

.table_zone {
    overflow-x: auto;
}

.table_zone table {
    min-width: 500px;
    border-collapse: collapse;
}


/* ==========================================================================
   반응형 미디어쿼리 (Responsive Media Queries)
   ========================================================================== */

@media all and (max-width: 1430px) {
    .search input[type="text"]::placeholder {
        font-size: var(--font-small);
    }

    .qucik_box p {
        font-size: var(--font-small);
    }

    .link_box .btn_cus {
        height: 40px;
        line-height: 40px;
    }

    .qucik_box {
        background-repeat: no-repeat;
        background-size: cover;
    }

    .no_titx {
        font-size: var(--font-small);
    }

    .tab_zone button {
        font-size: var(--font-small);
    }

    .small_tit a {
        font-size: var(--font-small);
    }

    .small_cot_noti {
        padding: 15px;
    }

    .board-item .board-content ul li a .sub_txt {
        font-size: var(--font-small);
    }

    .reverse .box img {
        height: 325px;
    }

    .book_list p {
        font-size: var(--font-small);
    }

    .down_books a {
        font-size: var(--font-small);
        padding: 10px;
    }
}

@media all and (max-width: 1024px) {
    .search {
        position: relative;
        width: 100%;
        padding-right: 40px;
        background: #fff;
        border-top: 1px solid #ddd;
        border-bottom: 1px solid #ddd;
        z-index: 10;
        display: none;
    }

    .search input[type=text] {
        display: block;
        width: 100%;
        height: 75px;
        border: none;
        padding-left: 15px;
    }

    .search button {
        width: 40px;
        height: 40px;
        position: absolute;
        right: 0;
        top: 0;
        border: none;
        background: none;
        color: #2c313e;
        font-size: var(--font-body);
        background-color: #75c392;
        color: #ffffff;
    }

    .schOn .search {
        display: block;
    }
}

@media all and (max-width: 860px) {
    .qucik_box p {
        font-size: var(--font-small);
    }

    .qucik_box {
        padding: 15px;
    }

    .tab_zone button {
        font-size: var(--font-small);
    }

    .small_cot_noti {
        padding: 15px;
    }

    .board-item .board-content ul li a .date {
        height: auto;
    }

    .board-item .board-content ul li a .date span::after {
        right: 5px;
    }

    .board-item .board-content ul li a .sub_txt {
        font-size: var(--font-small);
    }

    .board-item .board-content ul li a .date span {
        font-size: var(--font-h1);
    }

    .board-item .board-content ul li.down_noti a .date em,
    .board-item .board-content ul li.down_noti .date span {
        font-size: var(--font-small) !important;
        line-height: 19px;
    }

    .board-item .board-content ul li.down_noti .date span::before {
        height: auto;
        line-height: auto;
        font-size: var(--font-small);
    }

    .qucik_box {
        width: calc(100% / 2 - 8px);
    }
}

@media all and (max-width: 800px) {
    .board_search {
        flex-wrap: wrap;
        padding: 28px 15px;
    }

    .board_search select {
        width: 100%;
    }

    .borad_list {
        padding: var(--spacing-lg);
    }

    .no_list_board h3 {
        font-size: var(--font-small);
        line-height: var(--line-small);
    }

    .no_list_board_img {
        width: 30%;
    }

    .no_list_board_img img {
        width: 100%;
        height: auto;
    }

    .no_list_board ul {
        gap: var(--spacing-sm);
    }

    .no_list_board_btn {
        margin-top: 40px;
        font-size: var(--font-small);
        width: 131px;
        height: 42px;
    }

    .kpha-form-root .card {
        padding: 0;
        border: 0;
        margin: 20px 0;
    }

    .kpha-form-root .section-title:before {
        min-width: 19px;
    }

    /* 2025-10-21: section-title은 항상 h2 크기 유지 */
    .kpha-form-root .section-title {
        gap: 10px;
        margin-bottom: 15px;
    }

    .kpha-form-root .field {
        padding: 10px 12px;
    }

    .kpha-form-root input[type="text"],
    .kpha-form-root input[type="email"],
    .kpha-form-root input[type="tel"],
    .kpha-form-root textarea,
    .kpha-form-root select {
        font-size: var(--font-small);
        padding: 10px 12px;
    }

    /* 2025-10-21: 모바일에서 버튼 세로 배치 및 전체 너비 */
    .kpha-form-root .actions {
        flex-direction: column;
        margin-top: 16px;
        gap: 12px;
    }

    .kpha-form-root .actions .btn {
        width: 100%;
    }

    .kpha-form-root .notice,
    .kpha-form-root .chip {
        font-size: var(--font-small);
    }

    .kpha-form-root table.price th,
    .kpha-form-root table.price td {
        font-size: var(--font-small);
    }

    .footnote {
        line-height: 145%;
    }

    .sub_info_form {
        font-size: var(--font-small);
        line-height: 145%;
    }

    .kpha-cert {
        margin: 20px 15px;
    }

    .kpha-cert-card footer {
        flex-direction: column;
    }

    .toss-mock-sheet {
        position: absolute;
        left: 0;
        right: 0;
        bottom: 0;
        top: auto;
        background: #fff;
        transform: translateY(0);
        border-radius: 20px 20px 0 0;
        box-shadow: 0 -8px 40px rgba(0, 0, 0, .15);
        max-width: 520px;
        margin: 0 auto;
        padding: 12px 16px 16px;
        animation: toss-slide-up .22s ease-out;
    }
}

/* 2025-10-21: 기본이 1열이므로 모바일 오버라이드 불필요 */

@media all and (max-width: 640px) {
    .paper-item {
        padding: var(--spacing-md);
        grid-template-columns: 1fr;
        grid-template-areas:
            "badge"
            "number"
            "title"
            "details"
            "download";
        gap: var(--spacing-sm);
    }

    .paper-badge-row {
        text-align: left;
    }

    .paper-number {
        font-size: var(--font-body);
    }

    .paper-title {
        font-size: var(--font-body);
    }

    .paper-info {
        font-size: var(--font-small);
    }

    .kpha-cert-card .kv {
        grid-template-columns: 1fr;
    }
}

@media all and (max-width: 600px) {
    .link_box .btn_cus {
        background-position: 94% 50%;
    }

    .reverse .box img {
        height: auto;
    }

    .small_tit {
        min-height: 40px;
    }

    .qucik_box {
        width: 100%;
        border-radius: 12px;
        gap: 25px;
        height: auto;
    }

    .up_books {
        flex-direction: column;
    }

    .up_books .book_list {
        width: 100%;
    }

    .up_books::after {
        height: 100%;
    }

    .down_books a {
        margin-top: 15px;
        font-size: var(--font-small);
    }

    .foot_link_box {
        display: flex;
        gap: 28px;
        flex-direction: column;
        width: 100%;
    }

    .foot_link_box a {
        width: 100%;
    }

    .foot_link_box {
        gap: 9px;
    }

    .reverse .box {
        background: none;
    }

    .reverse .qucik_box {
        height: 300px;
    }

    .tab_zone,
    .tap_up {
        flex-direction: column;
    }

    .tab_zone {
        border-radius: 10px;
        border: 0;
    }

    .tab_zone button::after {
        display: none;
    }

    .tab_zone,
    .tab_zone button {
        width: 100%;
        gap: 0;
        box-sizing: border-box;
        border: 1px solid #ddd;
    }

    .tab_zone button.active {
        background: #1d335b;
        color: #fff;
    }

    .no_titx {
        display: none;
    }

    .small_cot_noti {
        border-radius: 12px;
    }

    .small_tit a {
        font-size: var(--font-small);
    }

    .board-item .board-content ul li a .date {
        width: 93px;
    }

    .board-item .board-content ul li a .sub_txt {
        font-size: var(--font-small);
    }

    .board-item .board-content ul li a .sub_txt p {
        font-size: var(--font-small);
    }

    .board-item .board-content ul li a {
        align-items: center;
    }

    .board-item .board-content ul li a .date span {
        font-size: var(--font-h2);
    }

    .book_list p {
        font-size: var(--font-small);
    }
}

@media all and (max-width: 500px) {
    .board_search {
        margin: 25px 0;
    }

    .no_list_board {
        width: 85%;
    }

    .paging {
        margin: 30px 0 50px 0;
    }

    .subpage2 .borad_list {
        flex-direction: column;
    }

    .subpage2 .no_list_board_img {
        width: 90%;
    }

    .subpage2 .paper-title {
        font-size: var(--font-small);
    }

    .paper-info {
        font-size: var(--font-small);
    }

    .paper-info > span {
        display: flex;
        flex-direction: column;
        gap: 10px;
    }
}

/* 2025-10-21: 태블릿(801px~1400px)에서만 적용 - 모바일(800px 이하)은 별도 처리 */
@media (min-width: 801px) and (max-width: 1400px) {
    .kpha-form-root .card {
        padding: 25px;
    }

    .kpha-form-root .lbl {
        font-size: var(--font-small);
    }
}

@media all and (max-width: 1200px) {
    .paper-info {
        flex-direction: column;
        align-items: flex-start;
    }

    .paper-info > span + span {
        padding-left: 0;
    }

    .paper-info span::before {
        display: none;
    }

    .paper-info {
        font-size: var(--font-small);
        margin-top: 15px;
    }
}

@keyframes toss-slide-up {
    from {
        transform: translateY(12px);
        opacity: .9;
    }
    to {
        transform: translateY(0);
        opacity: 1;
    }
}

@media print {
    .kpha-form-root .actions {
        display: none !important;
    }

    .kpha-form-root .kpha-form-body {
        padding-bottom: 0;
    }

    .kpha-form-root a[href]:after {
        content: "";
    }
}


/* ==========================================================================
   버튼 시스템 (Button System) - 2025-10-08
   ========================================================================== */

/* 공통 버튼 스타일 */
.btn-primary,
.btn-secondary,
.btn-danger,
.btn-ghost,
.btn-text {
  border-radius: var(--radius-lg);
  border: 1px solid transparent;
  padding: var(--spacing-sm) var(--spacing-lg);
  font-size: var(--font-small);
  font-weight: var(--weight-body);
  cursor: pointer;
  transition: background 0.2s, color 0.2s, border-color 0.2s;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--spacing-xs);
}

/* 버튼 크기 변형 */
/* 2025-10-09: 패딩 축소 (4px 16px → 4px 8px) */
.btn-sm {
  padding: var(--spacing-xs) var(--spacing-sm);
  font-size: var(--font-small);
}

.btn-lg {
  padding: var(--spacing-md) var(--spacing-xl);
  font-size: var(--font-body);
}

/* Primary 버튼 */
/* 2025-10-09: 테두리 제거 (hover 시 자연스러운 전환) */
.btn-primary {
  background: var(--accent-tertiary);
  color: #fff;
  border: none;
}

.btn-primary:hover {
  background: var(--accent-primary);
  filter: brightness(1.1);
}

/* Secondary 버튼 */
.btn-secondary {
  background: #fff;
  border: 1px solid var(--border-medium);
  color: var(--text-primary);
}

.btn-secondary:hover {
  border-color: var(--accent-tertiary);
  color: var(--accent-tertiary);
}

/* Danger 버튼 */
.btn-danger {
  background: #dc2626;
  color: #fff;
}

.btn-danger:hover {
  background: #b02a1f;
  filter: brightness(0.9);
}

/* Ghost 버튼 */
.btn-ghost {
  background: transparent;
  border: 1px solid var(--border-medium);
  color: var(--text-gray);
}

.btn-ghost:hover {
  border-color: var(--accent-tertiary);
  color: var(--accent-tertiary);
  background: rgba(41, 69, 121, 0.08);
}

/* Text 버튼 */
.btn-text {
  background: transparent;
  border: none;
  color: var(--accent-tertiary);
  padding: 0;
}

.btn-text:hover {
  text-decoration: underline;
}

/* Material Icons in buttons */
.btn-primary .material-icons,
.btn-secondary .material-icons,
.btn-danger .material-icons,
.btn-ghost .material-icons {
  font-size: 18px;
  vertical-align: middle;
}

/* 아이콘 전용 버튼 (텍스트 없는 경우) */
.btn-sm .material-icons:only-child {
  margin: 0;
  font-size: 18px;
}

.btn-sm:has(.material-icons:only-child) {
  padding: var(--spacing-xs);
  min-width: 32px;
  min-height: 32px;
}


/* ==========================================================================
   칩 시스템 (Chip System) - 2025-10-09
   ========================================================================== */

/* 공통 칩 스타일 */
.chip {
  display: inline-flex;
  align-items: center;
  padding: var(--spacing-xs) var(--spacing-md);
  border-radius: 999px;
  font-size: var(--font-small);
  font-weight: var(--weight-h4);
  white-space: nowrap;
}

/* Success 칩 (초록색) */
.chip-success {
  background: #dcfce7;
  color: #166534;
}

/* Danger 칩 (빨간색) */
.chip-danger {
  background: #fee2e2;
  color: #991b1b;
}

/* Warning 칩 (노란색) */
.chip-warning {
  background: #fef3c7;
  color: #92400e;
}

/* Info 칩 (파란색) */
.chip-info {
  background: #dbeafe;
  color: #1e40af;
}

/* Neutral 칩 (회색) */
.chip-neutral {
  background: #f3f4f6;
  color: #374151;
}

/* ========================================
   네비게이션 리스트 공통 스타일
   2025-10-11: 전체 사이트 nav_list bullet 마커 제거
   ======================================== */
.nav_list ul,
.nav_print .action-list {
  list-style: none;
  padding: 0;
  margin: 0;
}

/* ==========================================================================
   사이드바 메뉴 컴포넌트 (Sidebar Menu Component)
   2025-10-14: 서브 페이지 사이드바 네비게이션
   ========================================================================== */

/* 히어로 섹션 하단 여백 */
#hero-container {
    margin-bottom: var(--spacing-xl);
}

/* 히어로 섹션 name_zone 스타일 */
/* 2025-10-21: 카테고리와 제목 사이 간격 8px */
.name_zone {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);  /* 8px */
}

/* 2단 레이아웃 */
.content-with-sidebar {
    display: flex;
    gap: var(--spacing-xl);
}

.sidebar-menu {
    width: 224px;
    flex-shrink: 0;
}

.sidebar-menu-inner {
    position: sticky;
    top: var(--spacing-2xl);
}

.sidebar-menu-title {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    padding-top: 64px;
    padding-left: 0;
    margin-bottom: var(--spacing-md);
}

.sidebar-menu-title .material-symbols-outlined {
    font-size: 32px;
    color: var(--accent-tertiary);
    line-height: 1;
    display: flex;
    align-items: center;
}

.sidebar-menu-title h4 {
    font-size: var(--font-h4);
    font-weight: var(--weight-h4);
    color: var(--text-primary);
    margin: 0;
    line-height: 1.2;
    transform: translateY(2px);
}

.sidebar-menu-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--spacing-xs);
}

.sidebar-menu-link {
    display: inline-block;
    padding-left: var(--spacing-2xl);
    padding-bottom: var(--spacing-xs);
    color: var(--text-primary);
    text-decoration: none;
    font-size: var(--font-body);
    transition: color 0.3s;
    position: relative;
}

.sidebar-menu-link::after {
    content: '';
    position: absolute;
    left: var(--spacing-2xl);
    bottom: 0;
    height: 2px;
    background: var(--accent-tertiary);
    width: 0;
    transition: width 0.3s ease;
}

.sidebar-menu-link:hover {
    color: var(--accent-tertiary);
}

.sidebar-menu-link:hover::after {
    width: calc(100% - var(--spacing-2xl));
}

.sidebar-menu-link.active {
    color: var(--accent-tertiary);
    font-weight: var(--weight-h4);
}

.sidebar-menu-link.active::after {
    width: calc(100% - var(--spacing-2xl));
}

.main-content {
    flex: 1;
    min-width: 0;
    padding-bottom: var(--spacing-5xl);
}

/* 모바일: 사이드바 완전 제거 */
@media (max-width: 1024px) {
    .sidebar-menu {
        display: none;
    }

    .content-with-sidebar {
        display: block;
    }
}

/* ====== 2025-10-21: 페이징 컴포넌트 ====== */
.pagination-container {
    display: flex;
    flex-direction: column;
    gap: var(--spacing-lg);
    margin-top: var(--spacing-2xl);
    align-items: center;
}

/* 페이지당 게시글 수 선택 */
.pagination-per-page {
    display: flex;
    align-items: center;
    gap: var(--spacing-sm);
    font-size: var(--font-small);
    color: var(--muted);
}

.pagination-per-page select {
    padding: 8px 32px 8px 12px;
    border: 1px solid var(--line);
    border-radius: 8px;
    font-size: var(--font-small);
    background: #fff;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23666' d='M6 8L2 4h8z'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 10px center;
}

.pagination-per-page select:focus {
    outline: none;
    border-color: var(--accent-tertiary);
}

/* 페이지 네비게이션 */
.pagination-nav {
    display: flex;
    align-items: center;
    gap: 8px;
}

.pagination-btn {
    min-width: 40px;
    height: 40px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid var(--line);
    border-radius: 8px;
    background: #fff;
    color: var(--ink);
    font-size: var(--font-small);
    cursor: pointer;
    transition: all 0.15s ease;
    padding: 0 12px;
}

.pagination-btn:hover:not(:disabled) {
    border-color: var(--accent-tertiary);
    color: var(--accent-tertiary);
    background: rgba(41, 69, 121, 0.05);
}

.pagination-btn:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.pagination-btn.active {
    background: var(--accent-tertiary);
    color: #fff;
    border-color: var(--accent-tertiary);
}

/* 페이지 번호 버튼 */
.pagination-number {
    min-width: 40px;
    width: 40px;
    padding: 0;
}

/* 이전/다음, 맨 처음/끝 버튼 */
.pagination-arrow {
    min-width: 80px;
}

.pagination-first,
.pagination-last {
    min-width: 60px;
}

/* 페이지 정보 텍스트 */
.pagination-info {
    font-size: var(--font-small);
    color: var(--muted);
    text-align: center;
    margin-top: var(--spacing-xs);
}

/* 모바일 반응형 */
@media (max-width: 800px) {
    .pagination-container {
        gap: var(--spacing-md);
    }

    .pagination-nav {
        gap: 4px;
    }

    .pagination-btn {
        min-width: 36px;
        height: 36px;
        font-size: 13px;
        padding: 0 8px;
    }

    .pagination-number {
        min-width: 36px;
        width: 36px;
    }

    .pagination-arrow {
        min-width: 70px;
    }

    .pagination-first,
    .pagination-last {
        min-width: 50px;
    }

    /* 모바일에서는 맨 처음/끝 버튼 숨김 */
    .pagination-first,
    .pagination-last {
        display: none;
    }

    .pagination-per-page {
        font-size: 13px;
    }

    .pagination-per-page select {
        font-size: 13px;
        padding: 6px 28px 6px 10px;
    }
}

/* ==========================================================================
   히어로 이미지 컴포넌트 (Hero Image Component)
   2025-10-23: Fluent Emoji 등 이미지 지원
   Material Icons처럼 픽셀 단위로 명시적 크기 지정
   ========================================================================== */
.hero-image {
    width: 72px;
    height: 72px;
    object-fit: contain;
}

@media (max-width: 860px) {
    .hero-image {
        width: 40px;
        height: 40px;
    }
}