@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: var(--gray-color-1000); padding: 0 5%; }
.sub_visual .text_box .arc_brand_en { font-family: "El Messiri", serif; font-size: 28px; font-weight: 700; line-height: 1; letter-spacing: 0; margin-bottom: 10px; }
.sub_visual .text_box .arc_brand_ko { font-family: 'Pretendard', sans-serif; font-size: 40px; font-weight: 500; line-height: 1.3; letter-spacing: 0; }

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

/* ----- 카테고리 필터 탭 ----- */
.arc_tabs { display: flex; flex-wrap: wrap; justify-content: center; gap: 8px; margin-bottom: 32px; }
.arc_tabs a { display: block; padding: 10px 22px; border-radius: 100px; background: #fff; border: 1px solid #ddd; color: #555;
    font-family: 'Pretendard', sans-serif; font-weight: 500; font-size: 18px; letter-spacing: -1px; line-height: 1.2; transition: all .15s; white-space: nowrap; }
.arc_tabs a:hover { border-color: var(--primary-color); color: var(--primary-color); }
.arc_tabs a.on { background: var(--primary-color); border-color: var(--primary-color); color: #fff; }

/* ----- 안내 문구 ----- */
.arc_desc { background: #FAFAFA; border-radius: 16px; padding: 20px 24px; margin-bottom: 44px; text-align: center; }
.arc_desc p { font-family: 'Pretendard', sans-serif; font-weight: 400; font-size: 26px; letter-spacing: -1px; line-height: 1.4; color: var(--gray-color-1000); }

/* ----- 카드 그리드 ----- */
.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: 48px; text-align: center; }
.pagination_box .pg_wrap { display: inline-block; }
.pagination_box .pg { display: inline-flex; align-items: center; justify-content: center; gap: 10px; }
.pagination_box .pg_page,
.pagination_box .pg_current { display: inline-flex; align-items: center; justify-content: center;
    min-width: 44px; height: 44px; padding: 0 6px; border-radius: 100px;
    font-family: 'Pretendard', sans-serif; font-weight: 300; font-size: 28px; line-height: 1; color: var(--gray-color-1000); text-decoration: none; box-sizing: border-box; }
.pagination_box a.pg_page:hover { color: var(--primary-color); }
.pagination_box .pg_current { background: rgba(244, 210, 226, 0.5); color: var(--primary-color); }
.pagination_box .pg_start, .pagination_box .pg_prev,
.pagination_box .pg_next, .pagination_box .pg_end { color: var(--gray-color-500); font-size: 22px; }

/* =========================================================
   반응형
   ========================================================= */
@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 .arc_brand_en { font-size: 22px; }
    .sub_visual .text_box .arc_brand_ko { font-size: 30px; }
    .arc_desc p { font-size: 20px; }
    .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 .arc_brand_en { font-size: 18px; margin-bottom: 6px; }
    .sub_visual .text_box .arc_brand_ko { font-size: 24px; }
    .arc_wrap { padding: 36px 5% 60px; }
    .arc_tabs { gap: 6px; margin-bottom: 24px; }
    .arc_tabs a { padding: 8px 16px; font-size: 15px; }
    .arc_desc { padding: 16px 14px; margin-bottom: 32px; }
    .arc_desc p { font-size: 15px; }
    .arc_list { grid-template-columns: repeat(2, 1fr); gap: 28px 16px; }
    .arc_list .subject { font-size: 15px; }
    .pagination_box .pg { gap: 4px; }
    .pagination_box .pg_page, .pagination_box .pg_current { min-width: 36px; height: 36px; font-size: 20px; }
    .pagination_box .pg_start, .pagination_box .pg_prev, .pagination_box .pg_next, .pagination_box .pg_end { font-size: 18px; }
}