@charset "utf-8";

/* Reset(box-sizing/html/body/input·select·textarea·button/label/ol·ul/img/hr/table/caption·legend/address 등)
 * + Link 기본값은 theme.css로 이동함(사이트마다 다를 이유 없는 순수 리셋이라 3사이트 공용으로 통합) —
 * basic.css는 이제 실제 디자인 값이 들어가는 폼/버튼/뱃지 컴포넌트만 담당 */

/* jQuery UI 데이트피커 — 사이트 상속 font-size 때문에 위젯 내부 em 단위 패딩/여백이
 * 의도보다 작게 계산되는 문제 방지. 위젯 자체 색상/레이아웃은 jquery-ui.min.css가 담당,
 * 여기서는 기준 font-size만 되돌려서 라이브러리 기본 모습대로 나오게 함 */
#ui-datepicker-div {
    font-size: 16px;
}

/* ============================================
 * Utility — 간격만 유지 (flex/grid/items/justify는 개발자도구에서 클래스가 너무 늘어져서 제거, 각 시맨틱 클래스에 직접 작성)
 * ============================================ */

/* space-y — 자식 요소 사이에만 위쪽 여백(첫 요소는 안 붙음), Tailwind와 동일 원리 */
.space-y-1 > * + * { margin-top: 4px; }
.space-y-2 > * + * { margin-top: 8px; }
.space-y-4 > * + * { margin-top: 16px; }
.space-y-6 > * + * { margin-top: 24px; }

/* space-x — 자식 요소 사이에만 왼쪽 여백(첫 요소는 안 붙음) */
.space-x-1 > * + * { margin-left: 4px; }
.space-x-2 > * + * { margin-left: 8px; }
.space-x-4 > * + * { margin-left: 16px; }
.space-x-6 > * + * { margin-left: 24px; }

/* Hidden (접근성 — 화면엔 안 보이고 스크린리더는 읽음) */
.hidden, .hide {
    overflow: hidden;
    position: absolute;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
}

/* ============================================
 * Skip Menu
 * ============================================ */
.skip-menu {
    position: relative;
    z-index: 9999;
}

.skip-menu a {
    display: block;
    height: 1px;
    width: 1px;
    margin-bottom: -1px;
    overflow: hidden;
    font-size: 13px;
    color: var(--color-white);
    font-weight: 300;
    letter-spacing: -1px;
    background: #545e72;
    white-space: nowrap;
    text-align: center;
    text-decoration: none;
    max-width: 2560px;
}

.skip-menu a:focus, .skip-menu a:active {
    height: auto;
    width: 100%;
    padding: 5px;
    margin-bottom: 10px;
    position: absolute;
    left: 0;
    top: 0;
}

/* ============================================
 * Form - 인풋 / 라디오 / 체크박스
 * ============================================ */
input[type="text"], input[type="password"] {
    padding: 0 15px;
    font-size: 15px;
    height: var(--control-h-md);
    line-height: calc(var(--control-h-md) - 2px);
    background: var(--color-white);
    border: 1px solid var(--color-gray500);
    border-radius: 0;
    vertical-align: middle;
    box-shadow: none;
    color: var(--color-text-body);
}

input[type="text"]:hover, input[type="password"]:hover {
    border-color: var(--color-gray700);
}

input[type="text"]:focus, input[type="password"]:focus {
    border-color: var(--color-primary);
    outline: none;
}

input[type="text"]::placeholder, input[type="password"]::placeholder {
    color: var(--color-text-muted);
}

.input_type--lg {
    height: var(--control-h-lg) !important;
    line-height: calc(var(--control-h-lg) - 2px) !important;
}

.input_type--xl {
    height: var(--control-h-xl) !important;
    line-height: calc(var(--control-h-xl) - 2px) !important;
}

label.label_type1 {
    vertical-align: middle;
    color: var(--color-text-body);
    font-size: 15px;
    padding: 2px 0 2px 0px;
    display: inline-block;
    line-height: 21px;
    position: relative;
}

label.lab_wid1 {
    min-width: 192px;
    padding-bottom: 8px;
}

label.rid_lab {
    vertical-align: middle;
    color: var(--color-text-body);
    font-size: 15px;
    padding: 0 0 0 32px;
    position: relative;
    margin-right: 5px;
    line-height: 28px;
}

input[type="radio"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    border: 1px solid var(--color-border-base);
    border-radius: 50%;
    background: var(--color-white);
    vertical-align: middle;
    cursor: pointer;
}

input[type="radio"]:hover {
    background: var(--color-gray50);
}

input[type="radio"]:checked {
    border-color: var(--color-gray300);
    background-color: var(--color-white);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24'%3E%3Ccircle cx='12' cy='12' r='7' fill='%231F594D'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

input[type="radio"]:disabled {
    border-color: transparent;
    background: var(--color-gray200);
    cursor: not-allowed;
}

input[type="checkbox"] {
    appearance: none;
    -webkit-appearance: none;
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    margin: 0 4px 0 0;
    border: 1px solid var(--color-border-base);
    border-radius: 4px;
    background: var(--color-white);
    vertical-align: middle;
    cursor: pointer;
}

input[type="checkbox"]:hover {
    background: var(--color-gray50);
}

input[type="checkbox"]:checked {
    border-color: var(--color-primary);
    background-color: var(--color-primary);
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' viewBox='0 0 24 24' fill='none'%3E%3Cpath d='M6 12.3333L10.8421 17L17.3333 7' stroke='white' stroke-width='1.8' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: center;
}

input[type="checkbox"]:disabled {
    border-color: transparent;
    background: var(--color-gray200);
    cursor: not-allowed;
}

input:disabled {
    background: var(--color-gray100);
}

/* ============================================
 * 정보 입력표 (회원가입 / 회원정보수정 등) — 라벨 셀 + 입력 셀 + 행 구분선
 * 마크업: <dl class="input_group"> > <div> > <dt>(+ .essential 필수) + <dd>
 * 기준값: 라벨셀 폭 180 / 라벨·입력 간격 25 / 행 구분선 1px / 입력 폭 500·높이 56
 * .form_section(주소행) / .consent_personal_info(약관) / .btn_box(제출)까지 한 세트
 * ============================================ */
.members_box {
    max-width: 925px;
    margin: 0 auto;
}

/* 정보입력표 그룹 (회원유형 / 계정 / 개인정보 — 그룹 간 여백) */
.form-fieldgroup {
    min-width: 0;
    margin: 0;
    padding: 0;
    border: 0;
}

.form-fieldgroup + .form-fieldgroup {
    margin-top: 45px;
}

.input_group {
    margin: 0;
    border-top: 1px solid var(--color-gray300);
}

.input_group > div {
    display: flex;
    align-items: stretch;
    min-height: 93px;
    border-bottom: 1px solid var(--color-gray300);
}

.input_group > div > dt {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 180px;
    margin: 0;
    padding: 10px 20px;
    background: var(--color-bg-form-label);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
}

.input_group > div > dt.essential::before {
    content: "*";
    margin-right: 2px;
    color: var(--color-form-required);
}

.input_group > div > dd {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    justify-content: center;
    gap: 8px;
    margin: 0;
    padding: 15px 20px 15px 25px;
}

.input_group > div > dd > span {
    font-size: 16px;
    line-height: 27px;
    color: var(--color-text-body);
}

/* 입력표 안 텍스트류 인풋 — w500 h56 (전역 input[type=text]의 48 → lg로 상향) */
.input_group > div > dd input[type="text"],
.input_group > div > dd input[type="password"],
.input_group > div > dd input[type="tel"],
.input_group > div > dd input[type="email"] {
    width: 500px;
    max-width: 100%;
    height: var(--control-h-lg);
    line-height: calc(var(--control-h-lg) - 2px);
}

/* tel / email 은 전역 규칙이 없어 테두리·여백을 여기서 직접 지정 */
.input_group > div > dd input[type="tel"],
.input_group > div > dd input[type="email"] {
    padding: 0 15px;
    background: var(--color-white);
    border: 1px solid var(--color-gray500);
    border-radius: 0;
    font-size: 15px;
    color: var(--color-text-body);
}

.input_group > div > dd input[type="tel"]:hover,
.input_group > div > dd input[type="email"]:hover {
    border-color: var(--color-gray700);
}

.input_group > div > dd input[type="tel"]:focus,
.input_group > div > dd input[type="email"]:focus {
    border-color: var(--color-primary);
    outline: none;
}

.input_group > div > dd input[type="tel"]::placeholder,
.input_group > div > dd input[type="email"]::placeholder {
    color: var(--color-text-muted);
}

/* 수신동의 등 인풋 아래 체크박스 한 줄 (<p class="input_check">) */
.input_group .input_check {
    display: flex;
    align-items: center;
    gap: 6px;
    margin: 0;
}

/* 회원유형 등 라디오 가로 배치 */
.input_group .input_radio_group {
    display: flex;
    flex-wrap: wrap;
    gap: 25px;
}

.input_group .input_radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

/* JS 로 감추는 행 (회원유형=일반회원일 때 학번 행) */
.input_group > div[hidden] {
    display: none;
}

/* ── 주소 행 (.input_group 밖의 .form_section > .form_row) — 입력표 행과 동일 톤 ── */
.form_section .form_row {
    display: flex;
    align-items: stretch;
    min-height: 93px;
    border-bottom: 1px solid var(--color-gray300);
}

.form_section .form_label {
    flex-shrink: 0;
    display: flex;
    align-items: center;
    width: 180px;
    padding: 10px 20px;
    background: var(--color-bg-form-label);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
}

.form_section .form_block {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 10px;
    padding: 15px 20px 15px 25px;
}

.form_section .input_group2 {
    display: flex;
    align-items: center;
    gap: 10px;
    max-width: 500px;
}

.form_section .input_group2 .common_input {
    flex: 1;
    min-width: 0;
    height: var(--control-h-lg);
    padding: 0 15px;
    background: var(--color-white);
    border: 1px solid var(--color-gray500);
    color: var(--color-text-body);
}

.form_section .address_full_row {
    display: flex;
    flex-direction: column;
    gap: 10px;
    max-width: 500px;
}

.form_section .address_full_row .common_input {
    width: 500px;
    max-width: 100%;
    height: var(--control-h-lg);
    padding: 0 15px;
    background: var(--color-white);
    border: 1px solid var(--color-gray500);
    color: var(--color-text-body);
}

.form_section input[readonly] {
    background: var(--color-gray100);
}

.form_section .btn_search {
    flex-shrink: 0;
    width: 120px;
    height: var(--control-h-lg);
    background: var(--color-white);
    border: 1px solid var(--color-gray300);
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    color: var(--color-text-title1);
    cursor: pointer;
}

.form_section .btn_search:hover {
    background: var(--color-gray50);
}

/* ── 제출 버튼 (.btn_box > .btn_md_black) — primary w520 ── */
.btn_box {
    display: flex;
    justify-content: center;
    margin-top: 40px;
}

.btn_box .btn_md_black {
    width: 520px;
    max-width: 100%;
    height: var(--control-h-xl);
    background: var(--color-primary);
    border: none;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    color: var(--color-white);
    cursor: pointer;
}

.btn_box .btn_md_black:hover {
    background: var(--color-primary-hover);
}

.btn_box .btn_md_black:active {
    background: var(--color-primary-pressed);
}

/* ── 약관 / 개인정보 동의 (.consent_personal_info) ── */
.consent_personal_info {
    margin-top: 40px;
}

.consent_personal_info .inner h4 {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-title1);
}

.consent_personal_info .inner dl {
    margin: 0;
    max-height: 200px;
    padding: 20px;
    overflow-y: auto;
    background: var(--color-gray50);
    border: 1px solid var(--color-border-base);
}

.consent_personal_info .inner dl dt {
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: 22px;
    color: var(--color-text-body);
    white-space: pre-line;
}

.consent_personal_info .inner dl dd {
    display: none;
}

.consent_group {
    margin-top: 14px;
}

.consent_group.right {
    text-align: right;
}

.consent_group .input_check,
.consent_box .input_radio {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    margin: 0;
}

.consent_group .info_text {
    margin: 0 0 10px;
    font-size: 14px;
    font-weight: var(--font-weight-regular);
    line-height: 22px;
    color: var(--color-text-body);
}

.consent_box {
    display: flex;
    gap: 24px;
    margin-top: 10px;
}

/* ── 반응형 ── */
@media screen and (max-width: 768px) {
    .form-fieldgroup + .form-fieldgroup {
        margin-top: 28px;
    }

    .input_group > div,
    .form_section .form_row {
        flex-direction: column;
        align-items: stretch;
        min-height: 0;
        padding: 16px 0;
    }

    .input_group > div > dt,
    .form_section .form_label {
        width: 100%;
        padding: 0 0 8px;
        background: transparent;
    }

    .input_group > div > dd,
    .form_section .form_block {
        padding: 0;
    }

    .input_group > div > dd input[type="text"],
    .input_group > div > dd input[type="password"],
    .input_group > div > dd input[type="tel"],
    .input_group > div > dd input[type="email"],
    .form_section .address_full_row .common_input {
        width: 100%;
    }

    .btn_box .btn_md_black {
        width: 100%;
    }
}

/* ============================================
 * 회원가입 약관동의 스텝 (sub/join.html 1단계 — 동의 후 정보입력 노출)
 * ============================================ */
.join-step[hidden] {
    display: none;
}

.join-guide {
    margin: 0 0 40px;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
    text-align: center;
}

.terms-agree-all {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 67px;
    padding: 0 25px;
    background: var(--color-gray100);
    border: 1px solid var(--color-gray300);
}

.terms-block {
    margin-top: 45px;
}

.terms-block > h3 {
    margin: 0 0 15px;
    font-size: 24px;
    font-weight: var(--font-weight-semibold);
    line-height: 36px;
    color: var(--color-text-title1);
}

.terms-box {
    height: 320px;
    padding: 30px;
    overflow-y: auto;
    background: var(--color-white);
    border: 1px solid var(--color-gray300);
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-body);
}

.terms-box__title {
    margin: 0 0 12px;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
}

.terms-box__body {
    margin: 0;
    white-space: pre-line;
}

.terms-agree {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 20px;
    min-height: 67px;
    margin-top: 15px;
    padding: 0 25px;
    background: var(--color-gray50);
    border: 1px solid var(--color-gray300);
}

.terms-agree-all__label,
.terms-agree__label {
    margin: 0;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
}

.terms-actions {
    display: flex;
    justify-content: center;
    gap: 27px;
    margin-top: 45px;
}

.terms-actions .btn {
    width: 520px;
    max-width: 100%;
}

@media screen and (max-width: 768px) {
    .terms-agree-all,
    .terms-agree {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
        padding: 16px;
    }

    .terms-block > h3 {
        font-size: 20px;
    }

    .terms-box {
        height: 240px;
        padding: 20px;
    }

    .terms-actions {
        flex-direction: column;
        gap: 12px;
    }
}

/* ============================================
 * 세로 스택 폼 (마이페이지 등 — 라벨 위 / 입력 아래, 단일 컬럼 520)
 * 마크업: <div class="form-stack"> > .form-stack__row > (라벨 + 입력)
 * ============================================ */
.form-stack {
    max-width: 520px;
    margin: 0 auto;
}

.form-stack__guide {
    margin: 0 0 40px;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
    text-align: center;
}

.form-stack__row {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 5px;
}

.form-stack__row + .form-stack__row {
    margin-top: 25px;
}

.form-stack__label {
    font-size: 16px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
}

.form-stack__row input[type="text"],
.form-stack__row input[type="password"],
.form-stack__row input[type="tel"],
.form-stack__row input[type="email"] {
    width: 100%;
    height: var(--control-h-xl);
    padding: 0 18px;
    font-size: 16px;
    line-height: calc(var(--control-h-xl) - 2px);
}

/* type=tel / email 은 전역 규칙이 없어 테두리·여백 직접 지정 */
.form-stack__row input[type="tel"],
.form-stack__row input[type="email"] {
    background: var(--color-white);
    border: 1px solid var(--color-gray500);
    border-radius: 0;
    color: var(--color-text-body);
}

.form-stack__row input[type="tel"]:hover,
.form-stack__row input[type="email"]:hover {
    border-color: var(--color-gray700);
}

.form-stack__row input[type="tel"]:focus,
.form-stack__row input[type="email"]:focus {
    border-color: var(--color-primary);
    outline: none;
}

.form-stack__row input[type="tel"]::placeholder,
.form-stack__row input[type="email"]::placeholder {
    color: var(--color-text-muted);
}

.form-stack__row input[readonly] {
    background: var(--color-gray100);
}

/* 읽기전용 값 (아이디 / 이름) — 비활성 인풋 룩 */
.form-stack__readonly {
    display: flex;
    align-items: center;
    width: 100%;
    height: var(--control-h-xl);
    padding: 0 18px;
    background: var(--color-gray200);
    border: 1px solid var(--color-gray500);
    font-size: 16px;
    color: var(--color-text-body);
}

/* 수신동의 체크박스 한 줄 */
.form-stack__row .input_check {
    display: flex;
    align-items: center;
    gap: 8px;
    margin: 7px 0 0;
}

/* 주소 묶음 */
.form-stack__address {
    display: flex;
    flex-direction: column;
    gap: 12px;
    width: 100%;
}

.form-stack__address-zip {
    display: flex;
    gap: 10px;
}

.form-stack__zip-btn {
    flex-shrink: 0;
    width: 109px;
    padding: 0;
}

.form-stack__address-zip input[type="text"] {
    flex: 1;
    min-width: 0;
}

/* 제출 */
.form-stack__actions {
    margin-top: 40px;
}

.form-stack__submit {
    width: 100%;
}

@media screen and (max-width: 768px) {
    .form-stack__address-zip {
        flex-wrap: wrap;
    }

    .form-stack__zip-btn {
        width: 100%;
    }
}

/* ============================================
 * 문서 섹션 (소개/안내 페이지 — 제목 + 리드문 + 불릿 목록)
 * <div class="doc-section"> > h3.doc-section__title + (p.doc-section__lead) + ul.doc-section__list > li
 * ============================================ */
.doc-section + .doc-section {
    margin-top: 40px;
}

.doc-section__title {
    display: flex;
    align-items: center;
    margin: 0 0 5px;
    font-size: 22px;
    font-weight: var(--font-weight-bold);
    line-height: 33px;
    color: var(--color-text-title2);
}

.doc-section__lead {
    margin: 0;
    padding-left: 30px;
    font-size: 18px;
    font-weight: var(--font-weight-medium);
    line-height: 27px;
    color: var(--color-text-title1);
}

.doc-section__title + .doc-section__list {
    margin-top: 8px;
}

.doc-section__lead + .doc-section__list {
    margin-top: 5px;
}

.doc-section__list + .doc-section__lead {
    margin-top: 16px;
}

.doc-section__list {
    margin: 0;
    padding-left: 64px;
}

.doc-section__list li {
    display: list-item;
    list-style: disc;
    font-size: 16px;
    line-height: 24px;
    color: var(--color-text-body);
}

.doc-section__list li + li {
    margin-top: 5px;
}

@media screen and (max-width: 768px) {
    .doc-section__lead {
        padding-left: 16px;
    }

    .doc-section__list {
        padding-left: 36px;
    }
}

/* ============================================
 * Donation Intro (안내 페이지 — 폭 1004 래퍼. 섹션 본문은 공용 .doc-section, 법령 조항은 아래 clause 사용)
 * ============================================ */
.donation-intro {
    max-width: 1200px;
    margin: 0 auto;
}

/* 법령 조항 목록 — dt(조문 제목) + dd(항) 반복. 불릿 제목 아래에서는 lead 와 같은 30px 들여쓰기 */
.doc-section__title + .donation-intro-section-clause {
    margin-top: 12px;
    padding-left: 30px;
}

.donation-intro-section-clause {
    font-size: 16px;
    font-weight: var(--font-weight-regular);
    line-height: 1.6;
    color: var(--color-text-body);
}

.donation-intro-section-clause dt {
    margin-top: 20px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-title1);
}

.donation-intro-section-clause dt:first-of-type {
    margin-top: 0;
}

.donation-intro-section-clause dd {
    margin-top: 6px;
    padding-left: 16px;
}

/* 조문 안의 호 목록 — 전역 list-style 리셋 때문에 마커는 ::before로 직접 그린다 */
.donation-intro-section-clause-items {
    margin-top: 4px;
    padding-left: 12px;
}

.donation-intro-section-clause-items li {
    position: relative;
    margin-top: 4px;
    padding-left: 14px;
}

.donation-intro-section-clause-items li::before {
    content: '-';
    position: absolute;
    left: 0;
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .doc-section__title + .donation-intro-section-clause {
        padding-left: 16px;
    }
}

@media (max-width: 1024px) {
    .donation-intro {
        max-width: none;
    }
}

/* ============================================
 * Form - 셀렉트박스 (WidgetSelectBox 컴포넌트, select-box.js가 구조 생성 — 스타일은 여기부터 직접 작성)
 * ============================================ */
.select-box-wrap {
    display: inline-block;
    position: relative;
    min-width: 120px;
    height: var(--control-h-xl);
}

.select-box-wrap--xs {
    width: 180px;
}

.select-box-wrap--sm {
    width: 200px;
}

.select-box-wrap--md {
    width: 300px;
}

.select-box-wrap--lg {
    width: 400px;
}

.select-box-wrap.expand {
    display: block;
    width: 100%;
}

/* 네이티브 select — 위젯 버튼 아래 시각적으로만 숨김(값/onchange는 유지, select-box.js가 동기화) */
.select-box-native {
    position: absolute;
    width: 1px;
    height: 1px;
    padding: 0;
    margin: -1px;
    overflow: hidden;
    white-space: nowrap;
    border: 0;
    opacity: 0;
}

.select-box {
    display: flex;
    align-items: center;
    width: 100%;
    height: 100%;
    box-sizing: border-box;
    gap: 10px;
    padding: 0 15px;
    background: var(--color-bg-base);
    border: 1px solid var(--color-border-base);
    font-family: inherit;
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-black);
    cursor: pointer;
}

.select-box .icon-down {
    margin-left: auto;
    transition: transform .2s ease;
}

.select-box-wrap.open .select-box .icon-down {
    transform: rotate(180deg);
}

.select-box-label--placeholder {
    color: var(--color-gray400);
}

.select-box.is-disabled {
    background: var(--color-gray100);
    color: var(--color-gray400);
    cursor: not-allowed;
}

.select-box-panel {
    display: none;
    flex-direction: column;
    min-width: 100%;
    max-height: 320px;
    overflow-y: auto;
    margin: 0;
    padding: 0;
    list-style: none;
    background: var(--color-bg-base);
    border: none;
    filter: drop-shadow(0 4px 2px rgba(0, 0, 0, 0.25));
    z-index: 900;  /* 헤더(z-index:1000)보다 항상 낮게 — 스크롤 등으로 겹쳐도 헤더가 위 */
}

.select-box-option {
    display: block;
    width: 100%;
    padding: 14px 15px;
    background: var(--color-bg-base);
    border: none;
    text-align: left;
    font-family: inherit;
    font-weight: var(--font-weight-medium);
    font-size: 18px;
    line-height: 27px;
    color: var(--color-black);
    cursor: pointer;
}

.select-box-option:hover {
    background: var(--color-gray100);
}

.select-box-option.active {
    font-weight: var(--font-weight-semibold);
    color: var(--color-primary);
}

.select-box-option.disabled {
    color: var(--color-gray400);
    cursor: not-allowed;
}

/* ============================================
 * Button (공용 버튼 — 목록/글쓰기 등, type × size 조합)
 * ============================================ */
.btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    -webkit-appearance: none;
    appearance: none;
    padding: 0 18px;
    font-family: var(--font-base);
    font-weight: var(--font-weight-regular);
    text-align: center;
    text-decoration: none;
    border: none;
    border-radius: 0;
    cursor: pointer;
}

.btn--medium {
    height: 48px;
    font-size: 16px;
}

.btn--large {
    height: 56px;
    font-size: 18px;
}

.btn--xlarge {
    height: 63px;
    font-size: 18px;
}

.btn--default {
    background: var(--color-primary);
    color: var(--color-white);
}

.btn--default:hover {
    background: var(--color-primary-hover);
}

.btn--default:active {
    background: var(--color-primary-pressed);
}

.btn--secondary {
    background: var(--color-secondary);
    color: var(--color-white);
}

.btn--secondary:hover {
    background: var(--color-secondary-hover);
}

.btn--secondary:active {
    background: var(--color-secondary-pressed);
}

.btn--tertiary {
    background: var(--color-tertiary);
    color: var(--color-black);
    border: 1px solid var(--color-gray300);
}

.btn--tertiary:hover {
    background: var(--color-tertiary-hover);
}

.btn--tertiary:active {
    background: var(--color-tertiary-pressed);
    color: var(--color-white);
}

/* 목록/돌아가기 성격 버튼 — 최소 폭 통일(토큰). 버튼 크기(medium/large/xlarge)별 3단계, 반응형에선 풀폭 */
.btn--list {
    min-width: var(--btn-list-min-width-md, 180px);
    align-self: flex-start;   /* flex 컨테이너 안에서 가로로 늘어나지 않게 (min-width만 유지) */
}

.btn--large.btn--list {
    min-width: var(--btn-list-min-width-lg, 180px);
}

.btn--xlarge.btn--list {
    min-width: var(--btn-list-min-width-xl, 200px);
}

@media screen and (max-width: 768px) {
    .btn--list {
        align-self: stretch;
        width: 100%;
    }
}

/* ============================================
 * Search Bar (검색 입력 — 게시판 목록 검색 등)
 * ============================================ */
.search-bar {
    display: flex;
    align-items: center;
    gap: 20px;
    min-width: 242px;
    width: 350px;
    height: var(--control-h-xl);
    padding: 0 15px;
    background: var(--color-white);
    border: 1px solid var(--color-border-base);
}

.search-bar input {
    flex: 1 0 0;
    min-width: 0;
    padding: 0;
    border: none;
    outline: none;
    background: transparent;
    font-family: var(--font-base);
    font-size: 18px;
    color: var(--color-black);
}

.search-bar input::placeholder {
    color: var(--color-gray600);
}

.search-bar .icon-search {
    flex-shrink: 0;
    color: var(--color-black);
    cursor: pointer;
}

/* selectbox + searchbar 한 줄 배치 — 공용 (클래스명은 board_search_form이지만 board 모듈 전용 아님)
   참조처: _modules/board/views/*, _modules/lecture/views/edu|lecture/*, _modules/poll_bak/views/list,
   _modules/edu_bak/views/edu/*, _modules/pblcase/views/pblcase/group, _modules/site/views/rules_list */
.board_search_form {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 12px;
    box-sizing: border-box;
    text-align: center;
}

@media print {
    .board_search_form {
        display: none;
    }
}

/* ============================================
 * Search Toolbar (보기 전환 + 검색 그룹)
 * ============================================ */
.search-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 24px;
    margin: 0 0 30px;
}

.search-toolbar .board_search_form {
    display: flex;
    align-items: center;
    gap: 12px;
    width: auto;
    max-width: none;
    margin: 0;
    padding: 0;
    background: transparent;
    border: 0;
    border-radius: 0;
    text-align: left;
    overflow: visible;
}

.search-toolbar .select-box-wrap {
    flex: 0 0 auto;
    width: 180px;
    height: 58px;
}

.search-toolbar .select-box {
    height: 58px;
    min-height: 58px;
}

.search-toolbar .search-bar {
    width: 350px;
    height: 58px;
}

.search-toolbar .search-bar input {
    height: 100%;
    padding: 0;
}

.search-toolbar .icon-search {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    padding: 0;
    border: 0;
    background: transparent;
}

.search-toolbar .icon-search img {
    display: block;
    width: 32px;
    height: 32px;
}

.search-toolbar .toggle-view-btn img {
    display: block;
    width: 24px;
    height: 24px;
}

.search-toolbar .toggle-view-btn.is-active img {
    filter: brightness(0) invert(1);
}

@media screen and (max-width: 700px) {
    .board_search_form {
        width: 100%;
        padding: 10px 0;
        margin: 0;
    }

    .search-toolbar {
        align-items: flex-start;
        flex-direction: column;
    }

    .search-toolbar .board_search_form {
        width: 100%;
        align-items: stretch;
        flex-direction: column;
    }

    .search-toolbar .select-box-wrap,
    .search-toolbar .search-bar {
        width: 100%;
        min-width: 0;
    }

    .search-toolbar .select-box-wrap {
        flex-basis: auto;
    }
}

@media screen and (max-width: 420px) {
    .board_search_form {
        flex-direction: column;
        align-items: stretch;
    }

    .board_search_form .select-box-wrap,
    .board_search_form .search-bar {
        width: 100%;
    }
}

/* ============================================
 * Toggle View (카드/리스트 보기 전환)
 * ============================================ */
.toggle-view {
    display: flex;
}

.toggle-view-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 58px;
    height: 58px;
    background: var(--color-white);
    border: 1px solid var(--color-border-base);
    color: var(--color-black);
    cursor: pointer;
}

.toggle-view-btn + .toggle-view-btn {
    margin-left: -1px;
}

.toggle-view-btn.is-active {
    background: var(--color-primary);
    color: var(--color-white);
}

/* ============================================
 * Badge
 * ============================================ */
.badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 95px;
    padding: 6px 5px;
    color: var(--color-white);
    font-family: var(--font-base);
    font-size: var(--font-size-label-md);
    font-weight: var(--font-weight-regular);
    line-height: var(--line-height-label-md);
    text-align: center;
}

.badge-students {
    background-color: var(--color-badge-students);
}

.badge-graduate {
    background-color: var(--color-badge-graduate);
}

.badge-new-students {
    background-color: var(--color-badge-new-students);
}

.badge-news {
    background-color: var(--color-badge-news);
}

.badge-achievements {
    background-color: var(--color-badge-achievements);
}

.badge-events {
    background-color: var(--color-badge-events);
}

/* ============================================
 * Content Box (아이콘+캡션 카드 — 비전/미션/슬로건 등 공용)
 * ============================================ */
.content-box-list {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 40px;
    max-width: 1120px;
    margin: 0 auto;
}

.content-box {
    display: flex;
    flex-direction: column;
    align-items: center;
}

.content-box-icon {
    display: block;
    width: 179px;
    max-width: 100%;
    aspect-ratio: 179 / 199;
    margin-bottom: 35px;
}

.content-box-text {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 14px;
    text-align: center;
}

.content-box-text dt {
    font-family: var(--font-number);
    font-size: var(--font-size-heading-md);
    font-weight: var(--font-weight-bold);
    line-height: var(--line-height-heading-md);
    color: var(--color-text-title2);
}

.content-box-text dd {
    font-size: var(--font-size-body-md);
    font-weight: var(--font-weight-medium);
    line-height: var(--line-height-body-md);
    color: var(--color-text-body);
}

.content-box-text-accent {
    font-family: var(--font-number);
    color: var(--color-text-muted);
}

@media (max-width: 768px) {
    .content-box-list {
        grid-template-columns: 1fr;
        max-width: 354px;
        gap: 48px;
    }
}

/* ============================================
 * Tab (연혁 기간탭 등 — 카테고리 전환용 탭 공용)
 * ============================================ */
.tab-nav {
    padding: 0 136px;
    display: grid;
    grid-template-columns: repeat(var(--tab-count, 4), minmax(200px, 1fr));
    margin-bottom: 80px;
}

.tab-nav:not(:has(.tab-btn)) {
    display: none;
    margin-bottom: 0;
    padding: 0;
}

.tab-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 68px;
    padding: 0 15px;
    border: 1px solid var(--color-border-base);
    border-right: 0;
    background: var(--color-bg-base);
    font-size: var(--font-size-label-lg);
    font-weight: var(--font-weight-regular);
    color: var(--color-black);
    text-align: center;
}

.tab-btn:last-child {
    border-right: 1px solid var(--color-border-base);
}

.tab-btn.is-active {
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-inverse);
    background: var(--color-primary);
}

/* 교육 하위 이동 버튼 — 외부/연결 페이지 이동용이므로 active 상태 없이 우측 화살표만 표시 */
.graduate-education-tabs .tab-btn {
    justify-content: space-between;
    gap: 16px;
    padding: 0 28px;
    font-weight: var(--font-weight-semibold);
    color: var(--color-text-title1);
    text-align: left;
}

.graduate-education-tabs .tab-btn .icon {
    flex-shrink: 0;
    width: 24px;
    height: 24px;
    background-color: var(--color-black);
}

/* ============================================
 * Responsive
 * ============================================ */
@media screen and (min-width:280px) and (max-width:319px) {
    html { font-size: 55.5%; }
}

@media (max-width: 1024px) {
    .tab-nav {
        grid-template-columns: repeat(2, 1fr);
        /* padding: 0 24px; */
        padding: 0;
    }

    .tab-btn {
        border-right: 0;
        border-bottom: 0;
    }

    .tab-btn:nth-child(2n) {
        border-right: 1px solid var(--color-border-base);
    }

    .tab-btn:nth-child(n+3) {
        border-bottom: 1px solid var(--color-border-base);
    }
}

@media (max-width: 768px) {
    .tab-nav {
        grid-template-columns: 1fr;
    }

    .tab-btn {
        height: 56px;
        padding: 0 8px;
        font-size: 15px;
        border-right: 1px solid var(--color-border-base);
        border-bottom: 0;
    }

    .tab-btn:last-child {
        border-bottom: 1px solid var(--color-border-base);
    }
}

/* ============================================
 * Empty state — Figma 빈 상태 2종. 유형에 따라 다름(크기 기준 아님):
 * - 이미지 형식(empty_img_*) — 이미지 로드 실패 시, 아이콘만(텍스트 없음), 배경 투명
 *   (실제 표시는 common.js의 useEmptyImgBoard()/useEmptyImgCard()가 img onerror로 자동 교체)
 * - 리스트 형식(empty-list) — 게시판/목록 조회 결과가 0건일 때, 아이콘+문구, 배경 투명
 * ============================================ */
/* board/card 둘 다 같은 구조 — img를 클래스 그대로 물려받는 div 하나 + 그 안에 절대중앙배치되는
 * mask 아이콘 span 하나. position:relative만 쓰므로 .greeting-photo 등 페이지별 클래스가
 * display를 뭘 쓰든(block이든 뭐든) 충돌 없이 항상 정중앙에 뜬다 */
.empty-img-board {
    position: relative;
    overflow: hidden;
}

/* card는 .content-item-thumb처럼 크기를 잡아주는 부모 안에서만 쓰이므로,
 * 그 부모를 꽉 채우도록 width/height 100%가 필요함(board는 자기 클래스 자체가 크기를 가지고 있어 불필요) */
.empty-img-card {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
}

/* 빈 상태 아이콘 3종 — <img src="...svg">가 아니라 mask 기반 <span>으로 넣는다.
 * img는 폭 조절이 object-fit/aspect-ratio에 얽매이고 색도 못 바꾸는데,
 * mask + background:currentColor면 폭%만으로 비율 조절되고 색도 CSS에서 그대로 제어됨
 * (site 공용 .icon 아이콘 시스템과 동일한 방식, theme.css의 .icon 참고) */
.empty-img-board-icon,
.empty-img-card-icon {
    display: block;
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: 64%;
    aspect-ratio: 1 / 1;
    background: var(--color-text-muted);
    -webkit-mask: url("/assets/icons/empty-crest.svg") center / contain no-repeat;
    mask: url("/assets/icons/empty-crest.svg") center / contain no-repeat;
}

/* board는 board-image처럼 폭이 넓은 컨텍스트도 있어 너무 커지지 않게 캡 */
.empty-img-board-icon {
    max-width: 400px;
}

.empty-list {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 46px;
    width: 100%;
    padding: 40px 0;
}

.empty-list-icon {
    display: block;
    width: min(64%, 220px);
    aspect-ratio: 1 / 1;
    background: var(--color-text-muted);
    -webkit-mask: url("/assets/icons/empty-crest.svg") center / contain no-repeat;
    mask: url("/assets/icons/empty-crest.svg") center / contain no-repeat;
}

.empty-list-text {
    font-size: 34px;
    line-height: 1.4;
    color: var(--color-text-muted);
    text-align: center;
    word-break: keep-all;
}

/* 구분선 — 섹션 사이 어디서나 <span class="divider"></span> 로 사용 */
.divider {
    display: block;
    width: 100%;
    margin: 60px 0;
    border-top: 1px solid var(--color-border-base);
}

/* 제목 앞 불릿 — 표/문단 제목 어디서나 <span class="bullet"></span> 로 사용.
 * doc-section 제목은 페이지마다 span 을 넣지 않아도 되게 ::before 로 자동 적용 */
.bullet,
.doc-section__title::before {
    display: inline-block;
    flex-shrink: 0;
    box-sizing: border-box;
    width: 20px;
    height: 20px;
    margin-right: 10px;
    border: 4px solid color-mix(in srgb, var(--color-primary) 20%, transparent);
    border-radius: 50%;
    background: var(--color-primary);
    background-clip: content-box;
    vertical-align: middle;
}

.doc-section__title::before {
    content: "";
}