/* ===== 자료실 페이지 ===== */

/* ── 히어로 배경 ── */
.page-sub .archive-hero {
    background-image: url("/test/img/sub/intro-hero-bg.webp");
}

@media (max-width: 768px) {
    .page-sub .archive-hero {
        background-image: url("/test/img/sub/intro-hero-bg-m.webp");
    }
}

/* .page-sub .archive-hero::after {
    content: "";
    position: absolute;
    inset: 0;
    background: rgba(13, 19, 45, 0.45);
    pointer-events: none;
} */

/* ── 본문 영역 ── */
.archive-content {
    position: relative;
    z-index: 1;
    background: #fff;
    padding: clamp(60px, 7vw, 120px) clamp(20px, 4vw, 60px);
}

.archive-content .inner-content {
    max-width: 1280px;
    margin: 0 auto;
    display: flex;
    flex-direction: column;
    gap: 100px;
}

/* ── 섹션 공통 ── */
.arc-section {
    display: flex;
    flex-direction: column;
    gap: 40px;
}

.arc-heading {
    font-size: 23px;
    font-weight: 500;
    color: #444;
    margin: 0;
    letter-spacing: -0.02em;
}

/* ═══════════════════════════════════
   캘린더
═══════════════════════════════════ */
.arc-cal {
    display: flex;
    flex-direction: column;
    gap: 20px;
}

.arc-cal__header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 4px 0;
}

.arc-cal__month {
    display: flex;
    align-items: baseline;
    gap: 8px;
    font-size: 28px;
    color: #252525;
    line-height: 1.25;
}

.arc-cal__month-year {
    font-weight: 300;
}

.arc-cal__month-name {
    font-weight: 700;
}

.arc-cal__nav {
    display: flex;
    gap: 10px;
}

.arc-cal__nav-btn {
    width: 24px;
    height: 24px;
    background: #fff;
    border: none;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 14px;
    color: #252525;
    border-radius: 4px;
    transition: background 0.2s;
    text-decoration: none;
    padding: 0;
}

.arc-cal__nav-btn:hover {
    background: #f0f0f0;
}

.arc-cal__grid {
    display: flex;
    flex-direction: column;
    gap: 8px;
}

.arc-cal__daynames {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    overflow: hidden;
}

.arc-cal__dayname {
    text-align: center;
    font-size: 13px;
    color: rgba(37, 37, 37, 0.5);
    padding: 4px 0;
}

.arc-cal__weeks {
    display: flex;
    flex-direction: column;
    height: 500px;
}

.arc-cal__week {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    flex: 1;
    min-height: 0;
    overflow: hidden;
}

.arc-cal__cell {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: 2px;
    overflow: hidden;
    min-width: 0;
}

.arc-cal__date {
    width: 26px;
    height: 26px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 13px;
    color: #252525;
    border-radius: 9999px;
    flex-shrink: 0;
    align-self: center;
}

.arc-cal__date--other {
    opacity: 0.4;
}

.arc-cal__date--today {
    background: #293340;
    color: #fff;
}

.arc-cal__event {
    display: flex;
    align-items: center;
    padding: 0 5px;
    border-radius: 2px;
    font-size: 13px;
    color: #293340;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    width: 100%;
    box-sizing: border-box;
    line-height: 1.6;
    min-height: 20px;
}

.arc-cal__event--personal  { background: #fee6c9; }
.arc-cal__event--important { background: #ffd9d9; }
.arc-cal__event--fun       { background: #d2f0ff; }

/* dot (모바일 전용, 기본엔 숨김) */
.arc-cal__dots {
    display: none;
}

.arc-cal__dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

.arc-cal__dot--personal  { background: #e8a06a; }
.arc-cal__dot--important { background: #e06060; }
.arc-cal__dot--fun       { background: #5aabcc; }

/* 모바일 상세 패널: 기본 숨김 */
.arc-cal__mobile-detail {
    display: none;
}

/* 구분선 */
.arc-divider {
    width: 100%;
    height: 1px;
    background: #e5e5e5;
    margin: 0;
    border: none;
}

/* ═══════════════════════════════════
   자료실 목록
═══════════════════════════════════ */

/* 검색 바 */
.arc-search-wrap {
    background: #f5f5f5;
    display: flex;
    justify-content: center;
    padding: 24px 20px;
}

.arc-search {
    display: flex;
    width: 100%;
    max-width: 600px;
    position: relative;
}

.arc-search__input {
    flex: 1;
    height: 52px;
    padding: 0 24px;
    border: 1px solid #aeaeae;
    border-right: none;
    border-radius: 4px 0 0 4px;
    font-size: 16px;
    color: #888;
    background: #fff;
    outline: none;
    letter-spacing: -0.02em;
    box-sizing: border-box;
}

.arc-search__input::placeholder {
    color: #888;
}

.arc-search__btn {
    width: 52px;
    height: 52px;
    background: var(--main, #0d132d);
    border: none;
    border-radius: 0 4px 4px 0;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    transition: opacity 0.2s;
}

.arc-search__btn:hover {
    opacity: 0.85;
}

.arc-search__btn svg {
    width: 24px;
    height: 24px;
}

/* 테이블 */
.arc-table {
    width: 100%;
    border-top: 2px solid #293340;
}

.arc-table__head {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #d9d9d9;
    height: 67px;
}

.arc-table__head-cell {
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 17px;
    font-weight: 500;
    color: #293340;
    letter-spacing: -0.02em;
    padding: 0 20px;
}

.arc-table__head-cell--icon { width: 70px; flex-shrink: 0; }
.arc-table__head-cell--cat  { width: 180px; flex-shrink: 0; justify-content: flex-start; }
.arc-table__head-cell--title { flex: 1; min-width: 0; }
.arc-table__head-cell--date  { width: 160px; flex-shrink: 0; }
.arc-table__head-cell--views { width: 100px; flex-shrink: 0; padding-right: 40px; }

/* 목록 행 */
.arc-row {
    display: flex;
    align-items: stretch;
    border-bottom: 1px solid #d9d9d9;
    text-decoration: none;
    color: inherit;
    transition: background 0.15s;
}

.arc-row--pinned {
    background: #f8f8f8;
}

.arc-row:hover {
    background: #f0f3f7;
}

.arc-row__icon {
    width: 70px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 20px 0;
}

.arc-row__pin {
    width: 20px;
    height: 20px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
}

.arc-row__pin svg {
    width: 20px;
    height: 20px;
}

.arc-row__cat {
    width: 180px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    padding: 20px 0 20px 20px;
}

.arc-row__cat-label {
    font-size: 16px;
    font-weight: 500;
    color: var(--gold, #c9a86a);
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arc-row__title {
    flex: 1;
    min-width: 0;
    display: flex;
    align-items: center;
    padding: 20px 0;
}

.arc-row__title-text {
    font-size: 17px;
    font-weight: 500;
    color: #293340;
    letter-spacing: -0.02em;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.arc-row--normal .arc-row__title-text {
    font-weight: 400;
}

.arc-row__date {
    width: 160px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 19px 0 20px;
    font-size: 17px;
    color: #555;
    letter-spacing: -0.02em;
}

.arc-row--normal .arc-row__date {
    color: #888;
}

.arc-row__views {
    width: 100px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 19px 40px 20px 0;
    font-size: 17px;
    color: #555;
    letter-spacing: -0.02em;
}

.arc-row--normal .arc-row__views {
    color: #888;
}

/* 빈 목록 */
.arc-empty {
    padding: 60px 0;
    text-align: center;
    color: #888;
    font-size: 16px;
    border-bottom: 1px solid #d9d9d9;
}

/* 페이지네이션 */
.arc-pagination {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding: 10px 0;
}

.arc-page-btn {
    width: 40px;
    height: 40px;
    border-radius: 5px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 16px;
    font-weight: 600;
    text-decoration: none;
    border: 1.25px solid #dfe3e8;
    background: #fff;
    color: #222;
    transition: background 0.2s, color 0.2s, border-color 0.2s;
    cursor: pointer;
    box-sizing: border-box;
    line-height: 1;
}

.arc-page-btn--active {
    background: #293340;
    border-color: #293340;
    color: #fff;
}

.arc-page-btn--arrow {
    background: rgba(145, 158, 171, 0.5);
    border-color: transparent;
    color: #fff;
}

.arc-page-btn--arrow:hover {
    background: rgba(145, 158, 171, 0.75);
}

.arc-page-btn:not(.arc-page-btn--active):not(.arc-page-btn--arrow):hover {
    background: #f4f6f8;
}

/* ═══════════════════════════════════
   반응형
═══════════════════════════════════ */
@media (max-width: 1024px) {
    .arc-cal__weeks {
        height: 400px;
    }
}

@media (max-width: 768px) {
    .archive-content .inner-content {
        gap: 60px;
    }

    .arc-section {
        gap: 24px;
    }

    .arc-heading {
        font-size: 18px;
    }

    /* 캘린더 */
    .arc-cal__weeks {
        height: auto;
    }

    .arc-cal__week {
        display: grid;
        grid-template-columns: repeat(7, 1fr);
    }

    .arc-cal__cell {
        padding: 3px 2px;
        align-items: center;
    }

    /* 이벤트 있는 셀: 클릭 커서 */
    .arc-cal__cell--has-events {
        cursor: pointer;
    }

    /* 선택 강조 */
    .arc-cal__cell--selected .arc-cal__date {
        background: var(--gold, #c9a86a);
        color: #fff;
    }

    .arc-cal__date {
        width: 26px;
        height: 26px;
        font-size: 12px;
    }

    /* PC 이벤트 pill 숨기기 */
    .arc-cal__event {
        display: none;
    }

    /* 모바일 dot 표시 */
    .arc-cal__dots {
        display: flex;
        justify-content: center;
        gap: 2px;
        flex-wrap: nowrap;
        margin-top: 1px;
        max-width: 100%;
        overflow: hidden;
    }

    /* 모바일 상세 패널 활성화 */
    .arc-cal__mobile-detail {
        display: block;
    }

    .arc-cal__mobile-detail[hidden] {
        display: none;
    }

    .arc-cal__month {
        font-size: 20px;
    }

    /* 모바일 일정 상세 패널 */
    .arc-cal__mobile-detail {
        margin-top: 12px;
        border: 1px solid #e5e5e5;
        border-radius: 8px;
        overflow: hidden;
        background: #fff;
        animation: detailFadeIn 0.2s ease;
    }

    @keyframes detailFadeIn {
        from { opacity: 0; transform: translateY(-6px); }
        to   { opacity: 1; transform: translateY(0); }
    }

    .arc-cal__detail-head {
        display: flex;
        align-items: center;
        justify-content: space-between;
        padding: 12px 16px;
        background: var(--main, #0d132d);
    }

    .arc-cal__detail-date {
        font-size: 14px;
        font-weight: 600;
        color: #fff;
    }

    .arc-cal__detail-close {
        background: none;
        border: none;
        color: rgba(255,255,255,0.7);
        font-size: 20px;
        line-height: 1;
        cursor: pointer;
        padding: 0 0 0 12px;
    }

    .arc-cal__detail-list {
        list-style: none;
        margin: 0;
        padding: 8px 0;
    }

    .arc-cal__detail-item {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 16px;
        border-bottom: 1px solid #f0f0f0;
    }

    .arc-cal__detail-item:last-child {
        border-bottom: none;
    }

    .arc-cal__detail-dot {
        width: 10px;
        height: 10px;
        border-radius: 50%;
        flex-shrink: 0;
    }

    .arc-cal__detail-dot--personal  { background: #e8a06a; }
    .arc-cal__detail-dot--important { background: #e06060; }
    .arc-cal__detail-dot--fun       { background: #5aabcc; }

    .arc-cal__detail-text {
        font-size: 14px;
        color: #333;
        line-height: 1.4;
    }

    /* 테이블 → 카드형 */
    .arc-table__head {
        display: none;
    }

    /* 카드 전체: 가로 wrap */
    .arc-row {
        flex-wrap: wrap;
        align-items: flex-start;
        padding: 14px 16px;
        gap: 0;
        position: relative;
    }

    /* 핀 아이콘: 우상단 고정 */
    .arc-row__icon {
        position: absolute;
        right: 14px;
        top: 14px;
        width: auto;
        height: auto;
        padding: 0;
    }

    /* 구분 태그: 첫 번째 줄 (아이콘 공간 확보) */
    .arc-row__cat {
        flex: 0 0 calc(100% - 32px);
        max-width: calc(100% - 32px);
        width: auto;
        padding: 0 0 6px;
        align-items: center;
        min-height: 0;
    }

    /* 제목: 두 번째 줄 전체 폭 */
    .arc-row__title {
        flex: 0 0 100%;
        width: 100%;
        padding: 0 0 8px;
        align-items: flex-start;
    }

    .arc-row__title-text {
        font-size: 15px;
        white-space: normal;
        overflow: visible;
        text-overflow: unset;
        line-height: 1.55;
    }

    /* 날짜·조회수: 세 번째 줄에 나란히 */
    .arc-row__date {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        justify-content: flex-start;
        font-size: 13px;
        color: #aaa;
    }

    .arc-row__date::after {
        content: "·";
        margin: 0 6px;
        color: #ddd;
    }

    .arc-row__views {
        flex: 0 0 auto;
        width: auto;
        padding: 0;
        justify-content: flex-start;
        font-size: 13px;
        color: #aaa;
    }

    /* 일반 행도 동일 색상 */
    .arc-row--normal .arc-row__date,
    .arc-row--normal .arc-row__views {
        color: #aaa;
    }

    /* 검색 */
    .arc-search-wrap {
        padding: 16px;
    }

    .arc-search__input {
        height: 46px;
        font-size: 14px;
        padding: 0 14px;
    }

    .arc-search__btn {
        width: 46px;
        height: 46px;
    }
}

@media (max-width: 480px) {

    /* 카드 패딩 축소 */
    .arc-row {
        padding: 12px 14px;
    }

    .arc-row__icon {
        right: 12px;
        top: 12px;
    }

    .arc-row__title-text {
        font-size: 14px;
    }

    .arc-row__date,
    .arc-row__views {
        font-size: 12px;
    }
}

/* ═══════════════════════════════════
   상세 페이지
═══════════════════════════════════ */
.arc-view {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 0;
}

/* 헤더 */
.arc-view__head {
    border-top: 2px solid #293340;
    border-bottom: 1px solid #d9d9d9;
    padding: 28px 0 24px;
    display: flex;
    flex-direction: column;
    gap: 12px;
}

.arc-view__cat {
    display: inline-block;
    font-size: 14px;
    font-weight: 500;
    color: var(--gold, #c9a86a);
    letter-spacing: -0.01em;
}

.arc-view__title {
    font-size: clamp(20px, 2.5vw, 26px);
    font-weight: 600;
    color: #293340;
    letter-spacing: -0.03em;
    line-height: 1.4;
    margin: 0;
}

.arc-view__meta {
    display: flex;
    align-items: center;
    gap: 20px;
}

.arc-view__meta-item {
    display: flex;
    align-items: center;
    gap: 5px;
    font-size: 14px;
    color: #aaa;
}

/* 본문 */
.arc-view__body {
    padding: 40px 0 48px;
    border-bottom: 1px solid #d9d9d9;
    font-size: 16px;
    line-height: 1.9;
    color: #444;
    letter-spacing: -0.01em;
    word-break: keep-all;
}

/* 이전/다음 글 */
.arc-view__nav {
    display: flex;
    flex-direction: column;
    border-bottom: 1px solid #d9d9d9;
}

.arc-view__nav-item {
    display: flex;
    align-items: center;
    gap: 20px;
    padding: 14px 0;
    border-top: 1px solid #ececec;
    text-decoration: none;
    color: #444;
    transition: color 0.2s;
}

.arc-view__nav-item:hover {
    color: var(--main, #0d132d);
}

.arc-view__nav-item--empty {
    font-size: 14px;
    color: #bbb;
    cursor: default;
}

.arc-view__nav-label {
    display: flex;
    align-items: center;
    gap: 6px;
    font-size: 13px;
    font-weight: 500;
    color: #888;
    flex-shrink: 0;
    width: 60px;
}

.arc-view__nav-item--next .arc-view__nav-label { color: var(--main, #0d132d); }

.arc-view__nav-title {
    font-size: 15px;
    color: #444;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    flex: 1;
    min-width: 0;
}

.arc-view__nav-item:hover .arc-view__nav-title {
    color: var(--main, #0d132d);
    text-decoration: underline;
}

/* 목록으로 버튼 */
.arc-view__footer {
    display: flex;
    justify-content: center;
    padding: 36px 0 0;
}

.arc-view__back-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 12px 40px;
    background: var(--main, #0d132d);
    color: #fff;
    font-size: 15px;
    font-weight: 500;
    letter-spacing: -0.01em;
    border-radius: 4px;
    text-decoration: none;
    transition: opacity 0.2s;
}

.arc-view__back-btn:hover {
    opacity: 0.85;
}

/* 상세 모바일 */
@media (max-width: 768px) {
    .arc-view__title {
        font-size: 18px;
    }

    .arc-view__body {
        font-size: 15px;
        padding: 28px 0 36px;
    }

    .arc-view__nav-item {
        gap: 12px;
    }

    .arc-view__nav-title {
        font-size: 14px;
    }

    .arc-view__back-btn {
        width: 100%;
    }
}