/* application.html 전용 — DESIGN.md 뉴트럴 베이스 + 라벤더 액센트 (이 페이지에서만 로드) */

/* ── 뉴트럴 톤 레이어: 흰 hero → 회색 지면 → 흰 카드 (브랜드색은 액센트로만) ── */
.page-layout {
    background: #f1f2f5;
}

/* ── Hero: 순백 + 진한 글자 (스텝 아이콘만 라벤더 액센트) ── */
.page-header {
    background: #ffffff;
    color: #1e293b;
    padding: 64px 0 52px 0;
}

.page-header h1 {
    color: #1e293b;
}

.page-header p {
    color: #64748b;
}

/* 프로세스 스텝 (인라인 흰색 → 뉴트럴/라벤더 액센트) */
.page-header .step-icon {
    background: #ece4f2 !important;
    color: #5b4a7d !important;
    box-shadow: none !important;
}

.page-header .step-title {
    color: #5b4a7d !important;
}

.page-header .step-desc {
    color: #1e293b !important;
}

.page-header .step-detail {
    color: #64748b !important;
}

.page-header .process-arrow {
    color: #c7c0d6 !important;
}

/* ── 리스트 헤더 타이틀/카운트 ── */
.app-list-title {
    color: #1e293b;
}

#totalCount {
    color: #5b4a7d !important;
}

/* ── 버튼: 채도 높은 solid/그라데이션 → 톤다운 라벤더 (콘텐츠 영역 한정) ── */
.page-layout .btn-primary {
    background: #efeaf7 !important;
    color: #5b4a7d !important;
    border: none !important;
    box-shadow: none !important;
    border-radius: 12px;
    transition: background 0.15s ease;
}

.page-layout .btn-primary:hover {
    background: #e5ddf3 !important;
    transform: none !important;
    box-shadow: none !important;
}

.page-layout .btn-outline {
    background: transparent !important;
    color: #5b4a7d !important;
    border: 1px solid #e0dbec !important;
    box-shadow: none !important;
    border-radius: 12px;
}

.page-layout .btn-outline:hover {
    background: #f1edf8 !important;
    color: #5b4a7d !important;
}

/* ── 사이드바: 각진 모서리 → 둥근 흰 카드 + 은은한 그림자 ── */
.sidebar-nav {
    border-radius: 16px;
    box-shadow: 0 2px 20px rgba(25, 28, 29, 0.05);
}

/* ── 바깥 컨테이너(제목·카운트·버튼·테이블 감싸는 패널): 둥근 흰 패널, 그림자는 안쪽 테이블에만 ── */
.main-content {
    border-radius: 16px;
    box-shadow: none;
    border-left: none;
}

/* ── 안쪽 신청 현황 테이블: 둥근 흰 카드 + 은은한 그림자로 패널 위에 살짝 떠 보이게 ── */
.applications-table {
    background: #ffffff;
    border: none;
    border-radius: 14px;
    box-shadow: 0 2px 16px rgba(25, 28, 29, 0.06);
    overflow: hidden;
}

/* table-wrapper가 스크롤 컨테이너라 내용이 각지게 잘림 → 여기에도 radius */
.applications-table .table-wrapper {
    border-radius: 14px;
    overflow: hidden;
}

@media (max-width: 768px) {
    .applications-table .table-wrapper {
        overflow-x: auto;
    }
}

/* NO 컬럼 제거 후 정렬: 제목·작성자 좌측, 상태·작성일 가운데 */
.applications-table th,
.applications-table td {
    text-align: left;
}

.applications-table th:nth-child(3),
.applications-table td:nth-child(3),
.applications-table th:nth-child(4),
.applications-table td:nth-child(4) {
    text-align: center;
}

.applications-table thead {
    background: #f4f5f8;
}

.applications-table th {
    color: #64748b;
}

.applications-table td {
    color: #334155;
    border-top: 1px solid #eef0f3;
}

.applications-table tbody tr {
    transition: background 0.15s ease;
}

.applications-table tbody tr:hover {
    background: #faf9fc;
}

/* ── 상태 배지: 채도 높은 의미색 → 톤다운(테두리 제거) ── */
.status-approved {
    background: #eaf5ee;
    color: #2f855a;
    border: none;
}

.status-rejected {
    background: #f9edea;
    color: #a53b22;
    border: none;
}

.status-reviewing {
    background: #ece4f2;
    color: #5b4a7d;
    border: none;
}

.status-pending {
    background: #fbf6ec;
    color: #8a6d1f;
    border: none;
}

.status-conditional {
    background: #fbf0e4;
    color: #b45309;
    border: none;
}

/* ── 사이드바 활성 항목: 라벤더 톤 ── */
.sidebar-nav a.active {
    background: #efeaf7;
    color: #5b4a7d;
}

/* ── 페이지네이션 버튼(있으면) 톤다운 ── */
#pagination button {
    border-radius: 8px;
}

/* ── 공지 상세: 공지 배지/구분선 톤다운 ── */
#noticeDetailArticle .notice-badge-inline {
    background: #ece4f2 !important;
    color: #5b4a7d !important;
}

/* ── 모바일: hero STEP을 세로 블록 → 가로 한 줄 컴팩트 스테퍼 (아이콘 + STEP N, 긴 설명 숨김) ── */
@media (max-width: 768px) {
    .page-header .process-steps {
        flex-direction: row;
        flex-wrap: nowrap;
        justify-content: center;
        align-items: flex-start;
        gap: 0;
        width: 100%;
        max-width: 100%;
    }

    .page-header .process-step {
        display: flex;
        flex-direction: column;
        align-items: center;
        text-align: center;
        flex: 1 1 0;
        min-width: 0;
        padding: 0;
    }

    .page-header .step-icon {
        width: 36px;
        height: 36px;
        margin: 0 0 6px 0;
    }

    .page-header .step-icon i {
        font-size: 14px;
    }

    .page-header .step-title {
        font-size: 9px;
        margin: 0;
        letter-spacing: 0;
    }

    /* 긴 제목·설명은 모바일에선 숨김 */
    .page-header .step-desc,
    .page-header .step-detail {
        display: none;
    }

    /* 화살표: 세로 회전 해제 → 아이콘 높이에 맞춰 가로로 */
    .page-header .process-arrow {
        transform: none;
        font-size: 10px;
        margin: 11px 0 0 0;
        flex: 0 0 auto;
    }

    /* hero 하단 패딩 + 콘텐츠 상단 패딩이 겹쳐 hero↔콘텐츠 간격이 넓음 → 둘 다 축소 */
    .page-header {
        padding: 40px 0 26px 0;
    }

    .page-layout {
        padding-top: 16px;
    }

    /* 사이드바(신청 현황/신청서 작성): 상단 내비·본문 버튼과 중복 → 모바일 숨김 */
    .page-layout .sidebar {
        display: none;
    }

    /* 리스트 헤더: 모바일에서 세로로 쌓이던 것 → 제목 오른쪽에 버튼 (제목 축소·버튼 컴팩트) */
    .app-list-header {
        flex-direction: row !important;
        align-items: center !important;
        gap: 10px;
    }

    .app-list-title {
        font-size: 18px !important;
    }

    .app-list-header .btn-primary {
        padding: 10px 14px !important;
        font-size: 13px !important;
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* 공유 style.css가 모바일에서 first-child(옛 NO 컬럼)를 숨김 → NO 제거로 제목이 숨겨짐 → 되살림 */
    .applications-table th:first-child,
    .applications-table td:first-child {
        display: table-cell !important;
    }

    /* 테이블: 작성자 숨기고, fixed 레이아웃으로 제목이 남은 폭 차지 */
    .applications-table th:nth-child(2),
    .applications-table td:nth-child(2) {
        display: none !important;
    }

    .applications-table table {
        table-layout: fixed;
        width: 100%;
    }

    .applications-table th:nth-child(1),
    .applications-table td:nth-child(1) {
        width: auto;
    }

    .applications-table th:nth-child(3),
    .applications-table td:nth-child(3) {
        width: 62px !important;
    }

    .applications-table th:nth-child(4),
    .applications-table td:nth-child(4) {
        width: 82px !important;
    }

    .applications-table th,
    .applications-table td {
        padding: 12px 8px;
    }

    /* 제목 셀: 폰트 축소 + 아이콘은 첫 줄에 맞춰 정렬, 제목만 줄바꿈 */
    .applications-table td:nth-child(1) > div {
        align-items: flex-start !important;
        min-width: 0;
        word-break: break-word;
        font-size: 13px !important;
        line-height: 1.45;
        gap: 6px !important;
    }

    .applications-table td:nth-child(1) > div > i {
        margin-top: 4px;
        flex-shrink: 0;
    }

    .applications-table td:nth-child(4) {
        font-size: 11px;
    }
}