@charset "utf-8";

/*
 * 비급여 진료비 안내 게시판 IST-nopayment 전용 스타일 (규칙 skin/board/nopayment/nopayment.lib.php)
 * 게시판 공통 배치(분류 칩 · 검색 · 보기 · 글쓰기 등)는 /css/ist/board.css, M3 토큰 · 컴포넌트는 /css/ist/m3.css
 * 표 : 머리 surface-container + label-large, 몸통 body-medium, 선 outline-variant, 첫 열(대분류) title-small (배경은 머리만)
 *      목록 표(.ist-board-table)와 달리 작은 화면에서도 표 그대로 (칸 최소 너비, 넘치면 표만 가로 스크롤)
 * 관리자 상자 · 미리보기 : Outlined 카드(바탕 #fafafa, 요청 값) / surface-container-low 카드 (Figma 미제공 배치)
 */

/* 고시적용일 · 검색 */
.ist-np__head {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
    margin-bottom: 16px;
}

.ist-np__date {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
    color: var(--m3-on-surface-variant);
}

.ist-np__date .m3-icon { font-size: 20px; }
.ist-np__date strong { font-weight: 500; color: var(--m3-on-surface); }
.ist-board-view__head .ist-np__date { margin-top: 12px; }

.ist-np__search {
    width: 320px;
    max-width: 100%;
    margin-left: auto;
}

.ist-np__result {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--m3-on-surface-variant);
}

/* 관리자 : 바탕 #fafafa (요청 값, M3 토큰 아님 · 편차), 떠 있는 라벨 바탕도 같은 색 */
.ist-np__admin {
    --m3-field-bg: #fafafa;
    display: flex;
    flex-direction: column;
    gap: 16px;
    margin-bottom: 24px;
    padding: 24px;
}

.m3b .ist-np__admin { background: #fafafa; } /* .m3b .m3-card 바탕(surface)보다 앞서게 */

.ist-np__admin-forms {
    display: flex;
    flex-wrap: wrap;
    gap: 16px 24px;
}

.ist-np__admin-forms form {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.ist-np__admin-date .m3-field { width: 200px; }
.ist-np__admin-upload { flex: 1 1 360px; }
.ist-np__admin-upload .ist-board-file { flex: 1 1 auto; min-width: 0; }

.ist-np__admin-info {
    margin: 0;
    padding: 0 0 0 18px;
    color: var(--m3-on-surface-variant);
}

.ist-np__admin-actions {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
}

/* 미리보기 */
.ist-np__preview {
    margin-bottom: 24px;
    padding: 24px;
    border: 2px solid var(--m3-primary-text);
    background: var(--m3-surface-container-low);
}

.ist-np__preview h2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px;
    margin: 0 0 16px;
    color: var(--m3-on-surface);
}

.ist-np__preview-badge {
    padding: 4px 12px;
    border-radius: var(--m3-corner-small);
    background: var(--m3-error-container);
    color: var(--m3-on-error-container);
}

.ist-np__preview-info {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin: 0 0 24px;
}

.ist-np__preview-info > div { display: flex; gap: 16px; }

.ist-np__preview-info dt {
    display: flex;
    flex: 0 0 104px;
    align-items: center;
    gap: 4px;
    font-weight: 500;
    color: var(--m3-on-surface);
}

.ist-np__preview-info dd { margin: 0; color: var(--m3-on-surface); word-break: keep-all; }
.ist-np__preview-info .is-warn dt,
.ist-np__preview-info .is-warn dd { color: var(--m3-error); }
.ist-np__preview-info .m3-icon { font-size: 18px; }
.ist-np__note { display: block; color: var(--m3-on-surface-variant); }

.ist-np__preview-actions {
    display: flex;
    justify-content: flex-end;
    gap: 8px;
}

.ist-np__preview-actions form { margin: 0; }

/* 표 */
.ist-np__wrap { margin-bottom: 16px; }

.ist-np__scroll {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    border-top: 1px solid var(--m3-outline-variant);
}

.ist-np__scroll:focus-visible {
    outline: 3px solid var(--m3-primary-text);
    outline-offset: 2px;
}

.ist-np__table {
    width: 100%;
    border-collapse: collapse;
}

.ist-np__table th,
.ist-np__table td {
    min-width: 5em;
    padding: 12px 16px;
    border-bottom: 1px solid var(--m3-outline-variant);
    border-left: 1px solid var(--m3-outline-variant);
    font-size: 14px;
    line-height: 20px;
    letter-spacing: 0.25px;
    text-align: center;
    vertical-align: middle;
    word-break: keep-all;
    overflow-wrap: break-word;
    color: var(--m3-on-surface);
}

/* 첫 열만 왼쪽 선 없음 (대분류를 합친 줄은 명칭 칸이 첫 칸이 아니다) */
.ist-np__table thead th:first-child,
.ist-np__table .ist-np__chk,
.ist-np__table .ist-np__cate:first-child { border-left: 0; }

/* 머리 : label/large on-surface-variant, surface-container */
.ist-np__table thead th {
    height: 56px;
    background: var(--m3-surface-container);
    font-weight: 500;
    letter-spacing: 0.1px;
    color: var(--m3-on-surface-variant);
}

/* 첫 열(대분류) : title/small, 배경 없음 (배경은 머리만) */
.ist-np__table .ist-np__cate {
    font-weight: 500;
    letter-spacing: 0.1px;
}

.ist-np__table .ist-np__th--long,
.ist-np__table .ist-np__td--long { min-width: 12em; }
.ist-np__table .ist-np__td--long { text-align: left; }
.ist-np__table .ist-np__td--money { white-space: nowrap; }

.ist-np__table .ist-np__chk { width: 56px; min-width: 0; padding: 0 8px; }
.ist-np__table .ist-np__manage { width: 56px; min-width: 0; padding: 0 4px; }

.ist-np__table .ist-np__empty {
    padding: 64px 16px;
    font-size: 16px;
    line-height: 24px;
    color: var(--m3-on-surface-variant);
}

.ist-np__hint {
    display: none;
    align-items: center;
    justify-content: flex-end;
    gap: 4px;
    margin: 0 0 8px;
    color: var(--m3-on-surface-variant);
}

.ist-np__hint .m3-icon { font-size: 18px; }
.ist-np__wrap.is-overflow .ist-np__hint { display: flex; }

/* 순서 바꾸기 (np=sort) : 손잡이(아이콘 버튼)를 끌어 옮김, 끄는 줄은 secondary-container */
.ist-np__sortbar {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: space-between;
    gap: 16px 24px;
    margin-bottom: 24px;
    padding: 16px 24px;
    border-color: var(--m3-primary-text);
}

.ist-np__sortbar-text { display: flex; flex-direction: column; gap: 4px; }
.ist-np__sortbar-text p { margin: 0; color: var(--m3-on-surface-variant); }
.ist-np__sortbar-text .m3-icon { font-size: 18px; vertical-align: -4px; }
.ist-np__sortbar-actions { display: flex; gap: 8px; }

.ist-np__table .ist-np__handle-th,
.ist-np__table .ist-np__handle-td { width: 56px; min-width: 0; padding: 0 4px; border-left: 0; }
.ist-np__handle { cursor: grab; touch-action: none; }
.ist-np__table tr.is-dragging td,
.ist-np__table tr.is-dragging th { background: var(--m3-secondary-container); }
.ist-np__table tr.is-dragging .ist-np__handle { cursor: grabbing; }

/* 보기 */
.ist-np__view { margin-bottom: 24px; padding: 8px 24px; }

.ist-np__view-list { margin: 0; }

.ist-np__view-list > div {
    display: flex;
    gap: 16px;
    padding: 16px 0;
    border-bottom: 1px solid var(--m3-outline-variant);
}

.ist-np__view-list > div:last-child { border-bottom: 0; }
.ist-np__view-list dt { flex: 0 0 30%; color: var(--m3-on-surface-variant); }
.ist-np__view-list dd { flex: 1 1 auto; min-width: 0; margin: 0; color: var(--m3-on-surface); word-break: keep-all; overflow-wrap: break-word; }

/* 글쓰기 */
.ist-np__write-grid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 24px 16px;
}

.ist-np__write-full { grid-column: 1 / -1; }
.m3b textarea.m3-field__input.ist-np__textarea { min-height: 96px; }

@media (max-width: 599px) {
    .ist-np__search { width: 100%; }
    .ist-np__table th,
    .ist-np__table td { padding: 8px 10px; font-size: 12px; }
    .ist-np__admin,
    .ist-np__preview { padding: 16px; }
    .ist-np__admin-forms form { flex-wrap: wrap; width: 100%; }
    .ist-np__admin-date .m3-field { flex: 1 1 auto; width: auto; }
    .ist-np__preview-info > div { flex-direction: column; gap: 2px; }
    .ist-np__preview-info dt { flex-basis: auto; }
    .ist-np__view-list > div { flex-direction: column; gap: 4px; }
    .ist-np__write-grid { grid-template-columns: minmax(0, 1fr); }
}