@charset "utf-8";

/* =========================================================
   셀팅 아카이빙 — 목록 (카드형)
   ========================================================= */

/* ----- 상단 비주얼 배너 ----- */
.sub_visual { width: 100%; height: 450px; position: relative;
    background-image: url(../images/Visual.png); background-repeat: no-repeat; background-position: center center; background-size: cover; }
.sub_visual .inner { width: 100%; height: 100%; }
.sub_visual .table { display: table; }
.sub_visual .cell { display: table-cell; vertical-align: middle; }
.sub_visual .text_box { text-align: center; color: #2a2a2a; padding: 0 5%; }
.sub_visual .text_box h3 { font-family: "El Messiri", serif; font-size: 34px; font-weight: 600; line-height: 1.2; margin-bottom: 16px; letter-spacing: 0.02em; }
.sub_visual .text_box .add_desc { font-size: 15px; font-weight: 300; line-height: 1.7; color: #5a5a5a; }

/* ----- 본문 래퍼 ----- */
.arc_wrap { padding: 64px 16.66% 100px; box-sizing: border-box; }

/* 제목 (좌측 정렬) */
.arc_title { font-size: 40px; line-height: 1.2; letter-spacing: -0.02em; color: var(--gray-color-1000); margin-bottom: 28px; }

/* ----- 카테고리 필터 탭 ----- */
.arc_tabs { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 44px; }
.arc_tabs a { display: block; padding: 9px 20px; border-radius: 100px; background: #f1f1f2; color: #666;
    font-size: 15px; line-height: 1.2; transition: all .15s; white-space: nowrap; }
.arc_tabs a:hover { background: #e7e1e6; color: var(--primary-color); }
.arc_tabs a.on { background: var(--primary-color); color: #fff; }

/* ----- 카드 그리드 ----- */
.arc_list { display: grid; grid-template-columns: repeat(3, 1fr); gap: 44px 30px; }
.arc_list > li { min-width: 0; }
.arc_list > li.secret { opacity: .45; }

.arc_list .card { display: flex; flex-direction: column; height: 100%; }
.arc_list .thumb { position: relative; width: 100%; aspect-ratio: 4 / 3; border-radius: 8px; overflow: hidden; background: #f3f3f3; }
.arc_list .thumb img { width: 100%; height: 100%; object-fit: cover; display: block; }
.arc_list .thumb .no_image { display: flex; align-items: center; justify-content: center; width: 100%; height: 100%;
    color: #aaa; font-size: 14px; background: rgba(170, 173, 176, .25); }

.arc_list .card_body { padding-top: 16px; }
.arc_list .subject { display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
    font-weight: 600; font-size: 18px; line-height: 1.4; color: var(--gray-color-1000); }
.arc_list .date { display: block; margin-top: 10px; font-size: 14px; font-weight: 300; color: #999; }
.arc_list .card:hover .subject { color: var(--primary-color); }

/* ----- 빈 목록 ----- */
.empty_list { width: 100%; text-align: center; padding: 80px 0; color: #888; font-size: 16px; }

/* ----- 글쓰기 버튼 (관리자) ----- */
.arc_write_box { text-align: right; margin-top: 28px; }
.arc_write { background: #2b2b2b; color: #fff; border: none; border-radius: 6px; padding: 10px 26px; cursor: pointer;
    font-size: 15px; font-weight: 500; }
.arc_write:hover { background: #000; }

/* ----- 페이지네이션 (그누보드 pg_wrap) ----- */
.pagination_box { margin-top: 40px; text-align: center; }
.pagination_box .pg_wrap { display: inline-block; }
.pagination_box .pg { display: inline-flex; align-items: center; justify-content: center; gap: 4px; }
.pagination_box .pg_page,
.pagination_box .pg_current { display: inline-flex; align-items: center; justify-content: center;
    min-width: 40px; height: 40px; padding: 0 6px; border-radius: 50%;
    font-family: 'Inter', sans-serif; font-weight: 400; font-size: 18px; color: #555; text-decoration: none; box-sizing: border-box; }
.pagination_box a.pg_page:hover { color: var(--primary-color); }
.pagination_box .pg_current { background: rgba(100, 24, 60, 0.10); color: var(--primary-color); font-weight: 600; }
.pagination_box .pg_start, .pagination_box .pg_prev,
.pagination_box .pg_next, .pagination_box .pg_end { color: #999; font-size: 16px; }

/* =========================================================
   반응형
   ========================================================= */
@media screen and (max-width:1540px) { .arc_wrap { padding: 64px 12% 100px; } }
@media screen and (max-width:1440px) { .arc_wrap { padding: 64px 8% 100px; } }
@media screen and (max-width:1058px) { .arc_wrap { padding: 56px 6% 90px; } }

@media screen and (max-width:1024px) {
    .sub_visual .text_box h3 { font-size: 28px; }
    .arc_title { font-size: 30px; margin-bottom: 22px; }
    .arc_list { grid-template-columns: repeat(2, 1fr); gap: 36px 24px; }
    .arc_list .subject { font-size: 17px; }
}

@media screen and (max-width:768px) {
    .sub_visual { height: 240px; }
    .sub_visual .text_box h3 { font-size: 24px; margin-bottom: 10px; }
    .sub_visual .text_box .add_desc { font-size: 13px; }
    .arc_wrap { padding: 36px 5% 60px; }
    .arc_title { font-size: 24px; margin-bottom: 18px; }
    .arc_tabs { gap: 6px; margin-bottom: 32px; }
    .arc_tabs a { padding: 7px 14px; font-size: 14px; }
    .arc_list { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .arc_list .subject { font-size: 15px; }
    .pagination_box .pg_page, .pagination_box .pg_current { min-width: 34px; height: 34px; font-size: 16px; }
}