/* ============================================================
   disclosures.css  —  공시 및 공고 / IR자료실 전용 스타일
   1920px 기준 / 360px 모바일 반응형 완벽 대응
   ============================================================ */

/* ===== 전체 컨텐츠 래퍼 ===== */
.ds-content {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: var(--section-padding-y) var(--section-padding-x);
    gap: clamp(60px, 5.2vw, 100px);
    width: 100%;
    box-sizing: border-box;
    background: #FFFFFF;
}

/* ===== 내부 프레임 (1680px) ===== */
.ds-inner {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 0;
    gap: 40px;
    width: 100%;
    max-width: 1680px;
}

/* ===== 카테고리 필터 탭 바 ===== */
.ds-filter-bar {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    gap: 8px;
    width: 100%;
    height: auto;
    min-height: 48px;
    flex-shrink: 0;
}

.ds-filter-btn {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: 9px 20px;
    height: 48px;
    background: transparent;
    border: 1px solid #D3D3D3;
    border-radius: 100px;
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 20px;
    line-height: 120%;
    color: #4E4E4E;
    transition: all 0.2s ease;
    white-space: nowrap;
}

.ds-filter-btn:hover {
    border-color: #A7A7A7;
    color: #1B1B1B;
}

.ds-filter-btn.active {
    background: #F27100;
    border-color: #F27100;
    color: #FFFFFF;
}

.ds-filter-btn[data-filter="annual"],
.ds-filter-btn[data-filter="shareholder"] {
    width: 110px;
    height: 48px;
}

.ds-filter-btn[data-filter="etc"] {
    width: 75px;
    height: 48px;
}

/* ===== IR 자료실 전용 필터 버튼 크기 ===== */
[data-page="ir"] .ds-filter-btn[data-filter="all"] {
    width: 75px;
    height: 48px;
}

[data-page="ir"] .ds-filter-btn[data-filter="ir-book"] {
    width: 76px;
    height: 48px;
}

[data-page="ir"] .ds-filter-btn[data-filter="ir-letter"] {
    width: 93px;
    height: 48px;
}

/* ===== 테이블 영역 ===== */
.ds-table {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    width: 100%;
}

.ds-board-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    width: 100%;
    background: #FFFFFF;
    border-bottom: 1px solid #D3D3D3;
}

/* ===== 헤더 행 ===== */
.ds-header {
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: 0;
    width: 100%;
    flex-shrink: 0;
}

.ds-header-cell {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: clamp(16px, 1.67vw, 32px) clamp(12px, 1.25vw, 24px);
    background: #F8F9FB;
    border-top: 1px solid #363636;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(18px, 1.25vw, 24px);
    line-height: 150%;
    color: #363636;
    flex-shrink: 0;
}

.ds-header-cell.ds-cell-title {
    flex: 1;
    justify-content: flex-start;
}

/* 번호 열 너비 (120px) */
.ds-header-cell.ds-cell-no,
.ds-cell.ds-cell-no {
    width: 120px;
    justify-content: center;
    flex-shrink: 0;
}

/* 제출인/등록일자/첨부파일 열 공통 너비 */
.ds-header-cell.ds-cell-submitter,
.ds-header-cell.ds-cell-date,
.ds-header-cell.ds-cell-attachment {
    width: clamp(140px, 14.58vw, 280px);
    justify-content: center;
}

/* ===== 리스트 영역 ===== */
.ds-list {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    padding: 0;
    width: 100%;
}

/* ===== 개별 행 ===== */
.ds-row {
    display: flex;
    flex-direction: row;
    align-items: stretch;
    padding: 0;
    width: 100%;
    flex-shrink: 0;
}



/* ===== 셀 공통 ===== */
.ds-cell {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    align-items: center;
    padding: clamp(16px, 1.77vw, 34px) clamp(12px, 1.25vw, 24px);
    background: #FFFFFF;
    border-top: 1px solid #D3D3D3;
    flex-shrink: 0;
    transition: background 0.15s;
}



/* 제목 셀 */
.ds-cell.ds-cell-title {
    flex: 1;
    gap: 8px;
    overflow: hidden;
    cursor: pointer;
    align-items: center;
}

.ds-cell.ds-cell-title:hover .ds-title-text {
    color: #F27100;
}

.ds-cell.ds-cell-title:hover .ds-icon-open img {
    filter: brightness(0) saturate(100%) invert(47%) sepia(89%) saturate(2089%) hue-rotate(10deg) brightness(97%) contrast(101%);
}

.ds-title-text {
    font-family: 'Pretendard', sans-serif;
    font-weight: 500;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 160%;
    color: #1B1B1B;
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: normal;
    overflow-wrap: break-word;
    transition: color 0.15s;
}

/* 일반 셀 (번호, 제출인, 날짜 등) */
.ds-cell.ds-cell-no,
.ds-cell.ds-cell-submitter,
.ds-cell.ds-cell-date {
    justify-content: center;
    font-family: 'Pretendard', sans-serif;
    font-weight: 400;
    font-size: clamp(16px, 1.04vw, 20px);
    line-height: 160%;
    color: #4E4E4E;
}

.ds-cell.ds-cell-submitter,
.ds-cell.ds-cell-date {
    width: clamp(140px, 14.58vw, 280px);
}

/* 첨부파일 셀 */
.ds-cell.ds-cell-attachment {
    width: clamp(140px, 14.58vw, 280px);
    justify-content: center;
    gap: 6px;
}

.ds-btn-download {
    box-sizing: border-box;
    display: flex;
    align-items: center;
    gap: 8px;
    background: #E9E9E9;
    padding: 10px 14px 10px 18px;
    width: 123px;
    height: 49px;
    border-radius: 1000px;
    border: none;
    cursor: pointer;
    transition: background 0.2s;
}

.ds-download-label {
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: 18px;
    line-height: 160%;
    color: #1B1B1B;
    transition: color 0.2s;
}

.ds-icon-download {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 20px;
    height: 20px;
    flex-shrink: 0;
}

.ds-icon-download img {
    width: 100%;
    height: 100%;
    object-fit: contain;
}

/* 새창 아이콘 */
.ds-icon-open {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    flex-shrink: 0;
    align-self: flex-end;
    transition: opacity 0.15s;
}

/* ===== 공고 탭: 제목+날짜 한 묶음, 다운로드 버튼 별도 ===== */
#tab-return .ds-cell.ds-cell-title,
#tab-return .ds-cell.ds-cell-date {
    cursor: pointer;
}

#tab-return .ds-row:hover .ds-title-text {
    color: #F27100;
}

#tab-return .ds-row:hover .ds-cell.ds-cell-date {
    color: #F27100;
}

/* 다운로드 버튼은 row hover 무관, 자체 hover */
#tab-return .ds-cell.ds-cell-attachment {
    cursor: default;
}

.ds-btn-download:hover,
.ds-btn-download:active {
    background: #D3D3D3; /* Hover/Pressed 시 배경색 변경 */
}

.ds-btn-download:hover .ds-download-label {
    color: #1B1B1B;
}

.ds-btn-more {
    box-sizing: border-box;
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
    padding: clamp(12px, 0.83vw, 16px) clamp(16px, 1.25vw, 24px);
    gap: 8px;
    width: clamp(130px, 8.65vw, 166px);
    height: clamp(48px, 3.13vw, 60px);
    background: transparent;
    border: 1px solid #D3D3D3;
    border-radius: clamp(10px, 0.73vw, 14px);
    cursor: pointer;
    font-family: 'Pretendard', sans-serif;
    font-weight: 700;
    font-size: clamp(15px, 0.94vw, 18px);
    line-height: 160%;
    color: #363636;
    transition: all 0.2s ease;
}

.ds-btn-more:hover {
    border-color: #A7A7A7;
    color: #1B1B1B;
    background: #F8F9FB;
}

/* ===== 모바일 메타 (데스크톱 숨김) ===== */
.ds-meta {
    display: none;
}

/* ============================================================
   모바일 및 태블릿 반응형 (≤ 1439px) — 사이트 표준 브레이크포인트
   가로여백은 var로 태블릿 60 / 모바일 16 자동 적용, 카드 스택은 중첩 ≤767에서 처리
   ============================================================ */
@media (max-width: 1439px) {

    .ds-content {
        padding: 40px var(--section-padding-x);
        gap: 30px;
    }

    .ds-inner {
        gap: 30px;
    }

    /* 필터 바 가로 스크롤 가능하게 */
    .ds-filter-bar {
        overflow-x: auto;
        padding-bottom: 4px;
        -webkit-overflow-scrolling: touch;
    }

    .ds-filter-bar::-webkit-scrollbar {
        display: none;
    }

    .ds-filter-btn {
        padding: 8px 16px;
        font-size: 16px;
        font-weight: 700;
        height: 42px;
    }

    .ds-filter-btn[data-filter="annual"],
    .ds-filter-btn[data-filter="shareholder"] {
        width: 88px;
        height: 42px;
    }

    .ds-filter-btn[data-filter="all"],
    .ds-filter-btn[data-filter="etc"] {
        width: 60px;
        height: 42px;
    }

    [data-page="ir"] .ds-filter-btn[data-filter="all"] {
        width: 60px;
        height: 42px;
    }

    [data-page="ir"] .ds-filter-btn[data-filter="ir-book"] {
        width: 61px;
        height: 42px;
    }

    [data-page="ir"] .ds-filter-btn[data-filter="ir-letter"] {
        width: 75px;
        height: 42px;
    }

    /* 테이블 레이아웃 유지 (500px 이상) */
    .ds-header {
        display: flex;
        height: 60px;
    }

    .ds-header-cell {
        height: 60px;
        font-size: 18px;
        padding: 0 12px;
    }

    .ds-header-cell.ds-cell-date,
    .ds-header-cell.ds-cell-attachment {
        width: clamp(140px, 20%, 280px);
        justify-content: center;
    }

    .ds-board-list {
        border-top: 1px solid #000000;
    }

    .ds-row {
        display: flex;
        flex-direction: row;
        height: auto;
        min-height: 80px;
        padding: 0;
        border-bottom: 1px solid #D3D3D3;
        align-items: stretch;
    }

    .ds-cell {
        height: auto;
        min-height: 80px;
        padding: 12px;
        border-top: none;
        background: transparent;
        justify-content: flex-start;
    }

    .ds-cell.ds-cell-title {
        flex: 1;
        width: auto !important;
        min-width: 0;
        align-items: center;
        overflow: hidden;
    }

    .ds-cell.ds-cell-title .ds-icon-open {
        align-self: center; /* 하단 정렬에서 중앙 정렬로 수정 */
        margin-bottom: 0; /* 기존 마진 제거 */
    }

    /* 태블릿: 번호만 숨김, 제출인은 표시(제목 옆, 제목 2줄 처리) */
    .ds-cell.ds-cell-no,
    .ds-header-cell.ds-cell-no {
        display: none;
    }

    .ds-cell.ds-cell-submitter,
    .ds-header-cell.ds-cell-submitter {
        display: flex;
        width: clamp(120px, 16vw, 240px);
    }

    .ds-cell.ds-cell-date {
        display: flex;
        width: clamp(140px, 20%, 280px) !important;
        justify-content: center;
        font-size: 16px;
        color: #4E4E4E;
    }

    .ds-cell.ds-cell-attachment {
        display: flex;
        width: clamp(140px, 20%, 280px) !important;
        justify-content: center;
        font-size: 16px;
        color: #4E4E4E;
    }

    .ds-btn-download {
        padding: 6px 12px 6px 15px;
        width: 111px;
        height: 38px;
    }

    .ds-title-text {
        font-size: 18px;
        font-weight: 500;
        line-height: 150%;
        color: #000000;
        white-space: normal;
        display: -webkit-box;
        -webkit-line-clamp: 2; /* 2줄까지만 표시 */
        -webkit-box-orient: vertical;
        overflow: hidden;
        text-overflow: ellipsis; /* 말줄임 표기 */
        word-break: break-all;
        padding: 16px 0;
    }

    .ds-download-label {
        font-size: 15px; /* 16px에서 15px로 수정하여 줄바꿈 방지 */
        font-weight: 700;
    }

    /* 모바일 전용 메타 정보 숨김 (500px 이상) */
    .ds-meta {
        display: none;
    }

    /* 더보기 버튼 전체 너비 */
    .ds-btn-more {
        width: 100%;
        height: 50px;
        border-radius: 10px;
        font-size: 16px;
        margin-top: 0;
    }

    /* ============================================================
       모바일 카드 레이아웃 (500px 미만)
       ============================================================ */
    @media (max-width: 767px) {
        .ds-header {
            display: none;
        }

        .ds-row {
            flex-direction: column;
            padding: 20px 0;
            align-items: flex-start;
        }

        .ds-cell {
            width: 100% !important;
            padding: 0;
            min-height: unset;
        }

        .ds-cell.ds-cell-date,
        .ds-cell.ds-cell-attachment,
        .ds-cell.ds-cell-submitter {
            display: none;
        }

        /* 새창열기 아이콘 — 모바일 20×20, 내부 이미지 100%로 맞춤 */
        .ds-icon-open {
            width: 20px;
            height: 20px;
        }

        .ds-icon-open img {
            width: 100%;
            height: 100%;
            object-fit: contain;
        }

        .ds-meta {
            display: flex;
            flex-direction: row;
            align-items: center;
            justify-content: space-between;
            gap: 12px;
            width: 100%;
            flex-shrink: 0;
            height: 38px;
        }

        .ds-meta-submitter,
        .ds-meta-date {
            font-family: 'Pretendard';
            font-size: 16px;
            color: #7A7A7A;
            line-height: 1;
        }

        .ds-meta-divider {
            display: none;
        }

        .ds-meta-download {
            box-sizing: border-box;
            display: flex;
            align-items: center;
            gap: 8px;
            width: 111px;
            height: 38px;
            padding: 6px 12px 6px 15px;
            background: #E9E9E9;
            border-radius: 100px;
            font-family: 'Pretendard', sans-serif;
            font-size: 15px; /* 16px에서 15px로 수정 */
            font-weight: 700;
            color: #1B1B1B;
            cursor: pointer;
            white-space: nowrap;
        }

        .ds-meta-download:hover,
        .ds-meta-download:active {
            background: #D3D3D3; /* Hover/Pressed 시 배경색 변경 */
        }

        .ds-meta-download img {
            width: 20px;
            height: 20px;
            flex-shrink: 0;
        }

        /* 검수 0714: 공시 탭만 메타를 좌측 정렬 + divider 표시 (공고 탭은 그대로) */
        #tab-stock .ds-meta {
            justify-content: flex-start;
        }

        #tab-stock .ds-meta-divider {
            display: block;
            width: 1px;
            height: 12px;
            background: #D3D3D3;
        }
    }