/* common_expand_btn.css — 표 아래 '펼치기' 버튼 (.mk-expand-btn)
   ────────────────────────────────────────────────────────────────
   표가 작은 창(대개 5~7줄) 안에서 스크롤하는 대신, 이 버튼으로 불러온
   날짜를 통째로 펴 봅니다. 예전의 '스크롤 ON/OFF' 스위치를 대신하는
   부품입니다 — 스위치는 켜기 전에는 아래에 더 있는지조차 보이지 않았고,
   창 안 스크롤이 페이지 스크롤과 싸웠습니다.

   쓰는 법
     <button type="button" class="mk-expand-btn" aria-expanded="false">
       <span class="mk-expand-label">최근 1개월 보기</span>
       <span class="material-symbols-outlined mk-expand-icon">expand_more</span>
     </button>
   펼친 상태에서는 버튼에 is-expanded 를 붙이고 라벨을 '접기'로 바꿉니다
   (화살표는 여기 규칙이 뒤집습니다).

   ※ 이 파일은 '버튼의 생김새'만 맡습니다. 무엇이 얼마나 펴지는지(창 높이
     해제 · 머리글 붙박이 해제)는 표마다 달라 각 페이지 스타일시트의
     .is-expanded 규칙이 갖습니다.

   ※ 2026-08-05: 같은 값의 규칙이 페이지마다 복사되고 있어(나라사랑 ·
     전자신문 · 입출고 상세 · 지고재고 · 3공장 재고종합) 여기 한 벌로
     모으기 시작했습니다. 새로 붙이는 페이지는 이 클래스를 씁니다.
   ──────────────────────────────────────────────────────────────── */
.mk-expand-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 5px;

    width: 100%;
    height: 30px;
    margin-top: 8px;

    border: 1px solid #e5e5ea;
    border-radius: 10px;
    background: #f1f3f6;
    font-family: inherit;
    font-size: 12px;
    font-weight: 700;
    color: #48484a;
    letter-spacing: -0.2px;
    cursor: pointer;
    outline: none;
    transition: background 0.18s, color 0.18s, border-color 0.18s;
}

.mk-expand-btn:hover { background: #e8f4fd; border-color: #cfe2f8; color: #007aff; }

.mk-expand-btn:focus-visible {
    border-color: #007aff;
    box-shadow: 0 0 0 3px rgba(0, 122, 255, 0.12);
}

.mk-expand-icon {
    font-size: 18px;
    line-height: 1;
    transition: transform 0.2s ease;
}

/* 펼친 상태 — 화살표가 위를 봅니다 */
.mk-expand-btn.is-expanded .mk-expand-icon { transform: rotate(180deg); }