:root {
    --main: #7b1e1e;
    --dark: #1f1715;
    --bg: #f7f1ea;
    --card: #fffaf5;
    --line: #eadfd5;
    --muted: #7b706a
}

* {
    box-sizing: border-box
}

html,
body {
    margin: 0;
    min-height: 100%;
    font-family: -apple-system, BlinkMacSystemFont, 'Apple SD Gothic Neo', 'Noto Sans KR', 'Malgun Gothic', sans-serif;
    background: var(--bg);
    color: var(--dark)
}

.app {
    max-width: 560px;
    margin: 0 auto;
    padding: 18px 18px 40px
}

.hero {
    background: linear-gradient(135deg, #7b1e1e, #2b1713);
    color: #fff;
    border-radius: 28px;
    padding: 28px 22px;
    margin-bottom: 14px;
    box-shadow: 0 16px 35px rgba(70, 30, 20, .18)
}

.hero.admin {
    background: linear-gradient(135deg, #3f302a, #111)
}

.brand {
    font-size: 15px;
    opacity: .85;
    margin-bottom: 8px;
    letter-spacing: .1em
}

h1 {
    margin: 0;
    font-size: 32px;
    line-height: 1.2
}

h2 {
    margin: 0 0 14px;
    font-size: 20px
}

p {
    margin: 10px 0 0;
    opacity: .85
}

.tabs {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
    margin-bottom: 14px
}

.tab {
    margin: 0;
    padding: 13px 8px;
    font-size: 15px;
    border-radius: 16px;
    background: #eadfd5;
    color: #4a3029
}

.tab.active {
    background: var(--main);
    color: #fff
}

.card {
    background: var(--card);
    border: 1px solid var(--line);
    border-radius: 24px;
    padding: 20px;
    margin-bottom: 16px;
    box-shadow: 0 10px 25px rgba(80, 50, 30, .08)
}

.hidden {
    display: none
}

.notice {
    font-size: 14px;
    color: var(--muted);
    margin-bottom: 10px
}

label {
    display: block;
    font-weight: 800;
    margin: 14px 0 7px;
    font-size: 15px
}

input,
select,
textarea {
    width: 100%;
    border: 1px solid #ddd0c5;
    background: #fff;
    border-radius: 16px;
    padding: 16px;
    font-size: 18px;
    outline: none
}

textarea {
    min-height: 92px;
    resize: vertical
}

.grid2 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 12px
}

button {
    width: 100%;
    border: 0;
    border-radius: 18px;
    padding: 17px 18px;
    font-size: 19px;
    font-weight: 900;
    margin-top: 14px;
    cursor: pointer
}

.primary {
    background: var(--main);
    color: #fff
}

.secondary {
    background: #efe3d6;
    color: #4a3029
}

.result {
    margin-top: 14px;
    padding: 12px;
    border-radius: 14px;
    font-weight: 800;
    display: none;
    line-height: 1.5
}

.result.show {
    display: block;
    background: #fff0d8
}

.balance-box {
    display: none;
    margin-top: 14px;
    padding: 14px;
    background: #fff8e8;
    border: 1px solid #ead8af;
    border-radius: 16px;
    line-height: 1.7;
    font-weight: 800
}

.balance-box.show {
    display: block
}

.item {
    border: 1px solid var(--line);
    background: #fff;
    border-radius: 18px;
    padding: 15px;
    margin-top: 12px
}

.item-title {
    font-size: 18px;
    font-weight: 900;
    margin-bottom: 7px
}

.item-meta {
    color: var(--muted);
    line-height: 1.65;
    font-size: 14px
}

.badge {
    display: inline-block;
    padding: 5px 10px;
    border-radius: 999px;
    font-weight: 900;
    font-size: 13px
}

.badge.wait {
    background: #fff1bd;
    color: #694800
}

.badge.ok {
    background: #dff5df;
    color: #17611e
}

.badge.no {
    background: #ffe0e0;
    color: #8b1a1a
}

.admin-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 10px
}

.admin-actions button {
    font-size: 16px;
    padding: 13px
}

.reject {
    background: #3d3330;
    color: #fff
}

.footer-link {
    text-align: center;
    margin-top: 12px
}

.footer-link a {
    color: #7b1e1e;
    font-weight: 900;
    text-decoration: none
}

@media(max-width:420px) {
    .app {
        padding: 14px
    }

    h1 {
        font-size: 28px
    }

    .grid2 {
        grid-template-columns: 1fr
    }

    input,
    select,
    textarea {
        font-size: 17px
    }
}

.primary,
.secondary {
    transition: transform .12s ease, opacity .12s ease;
}

.primary:active,
.secondary:active {
    transform: scale(.97);
}

.primary:disabled,
.secondary:disabled {
    opacity: .65;
    cursor: wait;
}
/* ==================================================
   직원용 연월차·미휴무 화면 개선
   기존 기능 및 HTML 구조는 변경하지 않습니다.
================================================== */

:root {
    --main: #2f5f9e;
    --main-dark: #1f3f70;
    --main-soft: #edf4fc;

    --dark: #172033;
    --bg: #f3f6fa;
    --card: #ffffff;
    --line: #dce3eb;
    --muted: #6f7785;
}


/* 전체 배경 */
html,
body {
    background:
        radial-gradient(
            circle at top left,
            rgba(47, 95, 158, 0.08),
            transparent 34%
        ),
        linear-gradient(
            180deg,
            #f7f9fc 0%,
            #edf1f6 100%
        );

    color: var(--dark);
}


/* PC에서는 관리자 화면처럼 넓게 */
.app {
    width: min(
        1180px,
        calc(100% - 40px)
    );

    max-width: none;

    margin: 0 auto;

    padding:
        28px 0
        70px;
}


/* 상단 헤더 */
.hero {
    position: relative;
    overflow: hidden;

    padding:
        34px 38px;

    margin-bottom: 18px;

    border-radius: 28px;

    background:
        linear-gradient(
            125deg,
            #356cae 0%,
            #29588f 50%,
            #1d3d68 100%
        );

    box-shadow:
        0 20px 44px
        rgba(31, 63, 112, 0.21);
}

.hero::before {
    content: "";

    position: absolute;

    width: 320px;
    height: 320px;

    top: -135px;
    right: -55px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.08);
}

.hero::after {
    content: "";

    position: absolute;

    width: 220px;
    height: 220px;

    right: 210px;
    bottom: -145px;

    border-radius: 50%;

    background:
        rgba(255, 255, 255, 0.05);
}

.hero > * {
    position: relative;
    z-index: 1;
}

.brand {
    color: #dcecff;
    opacity: 1;

    font-weight: 800;
}

h1 {
    font-size:
        clamp(
            31px,
            4vw,
            44px
        );

    letter-spacing: -0.04em;
}

.hero p {
    max-width: 650px;

    font-size: 15px;
    line-height: 1.7;
}


/* 메뉴 5개를 PC에서 한 줄로 */
.tabs {
    grid-template-columns:
        repeat(
            5,
            minmax(130px, 1fr)
        );

    gap: 8px;

    padding: 9px;

    margin-bottom: 18px;

    border:
        1px solid
        rgba(218, 225, 234, 0.95);

    border-radius: 20px;

    background:
        rgba(255, 255, 255, 0.92);

    box-shadow:
        0 8px 24px
        rgba(31, 45, 70, 0.07);
}

.tab {
    min-height: 50px;

    margin: 0;

    padding:
        11px 12px;

    color: #596474;

    border:
        1px solid transparent;

    border-radius: 13px;

    background: transparent;

    font-size: 15px;

    transition:
        transform 0.15s ease,
        background 0.15s ease,
        color 0.15s ease,
        box-shadow 0.15s ease;
}

.tab:hover {
    color: var(--main);

    background:
        var(--main-soft);
}

.tab.active {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--main),
            var(--main-dark)
        );

    box-shadow:
        0 7px 18px
        rgba(47, 95, 158, 0.24);
}


/* 입력 카드 */
.card {
    width: 100%;

    padding:
        28px 30px;

    margin-bottom: 18px;

    border:
        1px solid
        var(--line);

    border-radius: 24px;

    background:
        var(--card);

    box-shadow:
        0 12px 32px
        rgba(24, 39, 75, 0.08);
}





/* 숨김 상태는 반드시 유지 */
#applyTab.hidden,
.card.hidden {
    display: none;
}


/* 한 줄 전체를 사용하는 항목 */
#applyTab > .grid2,
#applyTab > button,
#applyTab > .balance-box,
#applyTab > .result,
#applyTab > textarea,
#applyTab > label[for="reason"] {
    grid-column:
        1 / -1;
}


/*
 * HTML의 label에 for가 없으므로
 * 신청 카드의 주요 하단 요소를 전체폭으로 맞춥니다.
 */
#applyTab .grid2 {
    width: 100%;
}

#applyTab textarea {
    width: 100%;
}


/* 제목이 있는 다른 카드의 최대 폭 */
/* 모든 탭 카드의 좌우 폭을
   상단 헤더·탭과 동일하게 사용 */
#applyTab,
#registerTab,
#pinResetTab,
#historyTab,
#compTab {
    width: 100%;
    max-width: none;
    margin-left: 0;
    margin-right: 0;
}


/* 연월차 신청 화면: PC에서 가로 2열 */
#applyTab {
    display: grid;

    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );

    column-gap: 24px;
    row-gap: 0;

    align-items: start;
}


/* 숨김 탭이 열려 보이지 않도록 유지 */
#applyTab.hidden {
    display: none;
}


/* 날짜 시작일·종료일 영역 */
#applyTab > .grid2 {
    grid-column: 1 / -1;
}


/* 잔여 연월차 확인 버튼 */
#applyTab > .secondary {
    grid-column: 1 / -1;
}


/* 잔여 연월차 결과 */
#applyTab > .balance-box {
    grid-column: 1 / -1;
}


/* 사유 입력창 */
#applyTab > textarea {
    grid-column: 1 / -1;
}


/* 신청하기 버튼 */
#applyTab > .primary {
    grid-column: 1 / -1;
}


/* 신청 결과 */
#applyTab > .result {
    grid-column: 1 / -1;
}


/* 입력창 */
input,
select,
textarea {
    min-height: 52px;

    padding:
        14px 16px;

    border:
        1px solid
        #d7dfe8;

    border-radius: 14px;

    background:
        #fbfcfd;

    color:
        var(--dark);

    font-size: 17px;

    transition:
        border-color 0.15s ease,
        box-shadow 0.15s ease,
        background 0.15s ease;
}

input:hover,
select:hover,
textarea:hover {
    border-color:
        #bbc7d5;

    background: #ffffff;
}

input:focus,
select:focus,
textarea:focus {
    border-color:
        var(--main);

    background: #ffffff;

    box-shadow:
        0 0 0 3px
        rgba(47, 95, 158, 0.12);
}


/* 항목명 */
label {
    color: #263448;

    font-size: 14px;
    font-weight: 900;
}


/* 버튼 */
button {
    min-height: 52px;

    margin-top: 14px;

    border-radius: 14px;

    font-size: 17px;

    transition:
        transform 0.14s ease,
        box-shadow 0.14s ease,
        filter 0.14s ease;
}

button:hover {
    transform:
        translateY(-1px);
}

.primary {
    color: #ffffff;

    background:
        linear-gradient(
            135deg,
            var(--main),
            var(--main-dark)
        );

    box-shadow:
        0 8px 18px
        rgba(47, 95, 158, 0.20);
}

.secondary {
    color: #32465f;

    border:
        1px solid
        #d8e1eb;

    background:
        #edf3f9;
}

.secondary:hover {
    background:
        #e2edf8;
}


/* 결과 및 잔여일수 영역 */
.result.show {
    color: #334155;

    border:
        1px solid
        #d9e3ee;

    background:
        #f4f8fc;
}

.balance-box {
    color: #24466f;

    border:
        1px solid
        #cddff1;

    background:
        #edf6ff;
}


/* 신청 및 사용 내역 */
.item {
    padding: 17px;

    border:
        1px solid
        var(--line);

    border-radius: 16px;

    background: #ffffff;

    box-shadow:
        0 5px 14px
        rgba(24, 39, 75, 0.05);
}


/* 관리자 링크 */
.footer-link {
    margin-top: 20px;
}

.footer-link a {
    color:
        var(--main);

    padding:
        10px 14px;

    border-radius: 12px;

    background:
        rgba(47, 95, 158, 0.07);
}


/* 태블릿 */
@media (max-width: 900px) {
    .app {
        width:
            calc(100% - 28px);
    }

    .tabs {
        grid-template-columns:
            repeat(
                3,
                minmax(0, 1fr)
            );
    }

    #applyTab {
        grid-template-columns: 1fr;
    }

    #applyTab > * {
        grid-column: auto;
    }
}


/* 휴대폰 */
@media (max-width: 580px) {
    .app {
        width:
            calc(100% - 20px);

        padding:
            10px 0
            38px;
    }

    .hero {
        padding:
            25px 21px;

        border-radius:
            21px;
    }

    h1 {
        font-size:
            29px;
    }

    .hero p {
        font-size:
            14px;
    }

    .tabs {
        grid-template-columns:
            repeat(
                2,
                minmax(0, 1fr)
            );

        gap: 7px;

        padding: 7px;

        position: static;
    }

    .tab {
        min-height: 47px;

        font-size: 14px;
    }

    .card {
        padding:
            20px 17px;

        border-radius:
            19px;
    }

    #registerTab,
    #pinResetTab,
    #historyTab,
    #compTab {
        max-width: none;
    }

    input,
    select,
    textarea {
        min-height: 50px;

        padding:
            13px 14px;

        font-size: 16px;
    }

    button {
        min-height: 50px;

        padding:
            13px 14px;

        font-size: 16px;
    }

    .grid2 {
        grid-template-columns: 1fr;
    }

    .admin-actions {
        grid-template-columns: 1fr;
    }
}
#applyTab {
    display: grid;
    grid-template-columns:
        repeat(
            2,
            minmax(0, 1fr)
        );
    gap: 4px 24px;
}

#applyTab .field {
    min-width: 0;
}

#applyTab .field.full {
    grid-column: 1 / -1;
}

#applyTab > .grid2,
#applyTab > button,
#applyTab > .balance-box,
#applyTab > .result {
    grid-column: 1 / -1;
}
@media (max-width: 700px) {
    #applyTab {
        grid-template-columns: 1fr;
    }

    #applyTab .field,
    #applyTab .field.full,
    #applyTab > .grid2,
    #applyTab > button,
    #applyTab > .balance-box,
    #applyTab > .result {
        grid-column: 1;
    }
}
/* 직원용 화면 메뉴 표시 */
.employee-apply-only .tabs {
    display: grid !important;
    grid-template-columns: repeat(4, minmax(0, 1fr));
}

/* 직원용 화면에서 연월차 내역만 숨김 */
.employee-apply-only .tabs .tab:nth-child(4),
.employee-apply-only #historyTab {
    display: none !important;
}

/* JavaScript가 선택한 화면만 표시 */
.employee-apply-only .card.hidden {
    display: none !important;
}

.employee-apply-only #applyTab:not(.hidden),
.employee-apply-only #registerTab:not(.hidden),
.employee-apply-only #pinResetTab:not(.hidden),
.employee-apply-only #compTab:not(.hidden) {
    display: block;
}

/* 연월차 신청 화면은 원래의 PC 2열 구조 유지 */
.employee-apply-only #applyTab:not(.hidden) {
    display: grid;
    margin-top: 0;
}

.employee-apply-only .app {
    padding-bottom: 70px;
}

@media (max-width: 700px) {
    .employee-apply-only .tabs {
        grid-template-columns: 1fr;
    }

    .employee-apply-only #applyTab:not(.hidden) {
        display: block;
    }
}

/* ==================================================
   2026-08 세련된 직원용 신청 화면
================================================== */
body.employee-apply-only {
    --main: #245b9f;
    --main-dark: #173d70;
    --main-soft: #edf5ff;
    --ink: #15233a;
    --muted: #69778b;
    --line: #dbe4ef;
    background:
        radial-gradient(circle at 12% 0%, rgba(62, 124, 201, .12), transparent 28rem),
        linear-gradient(180deg, #f7faff 0%, #eef3f9 100%);
}

body.employee-apply-only .app {
    width: min(1160px, calc(100% - 48px));
    padding: 30px 0 72px;
}

body.employee-apply-only .hero {
    min-height: 210px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    padding: 38px 44px;
    border: 1px solid rgba(255,255,255,.14);
    border-radius: 30px;
    background:
        radial-gradient(circle at 88% 18%, rgba(255,255,255,.12) 0 92px, transparent 93px),
        radial-gradient(circle at 78% 115%, rgba(255,255,255,.08) 0 125px, transparent 126px),
        linear-gradient(125deg, #3976bd 0%, #25558f 52%, #173965 100%);
    box-shadow: 0 22px 48px rgba(31, 65, 110, .18);
}

body.employee-apply-only .hero::before,
body.employee-apply-only .hero::after { display: none; }

body.employee-apply-only .brand {
    display: inline-flex;
    align-items: center;
    width: fit-content;
    margin-bottom: 12px;
    padding: 6px 11px;
    border: 1px solid rgba(255,255,255,.22);
    border-radius: 999px;
    background: rgba(255,255,255,.1);
    color: #edf6ff;
    font-size: 13px;
    letter-spacing: .04em;
}

body.employee-apply-only h1 {
    font-size: clamp(34px, 4vw, 48px);
    letter-spacing: -.055em;
}

body.employee-apply-only .hero p {
    margin-top: 12px;
    color: rgba(255,255,255,.8);
    font-size: 16px;
}

body.employee-apply-only .tabs {
    position: relative;
    margin: -18px 22px 22px;
    padding: 8px;
    border: 1px solid rgba(214,225,238,.95);
    border-radius: 19px;
    background: rgba(255,255,255,.96);
    box-shadow: 0 14px 34px rgba(30,52,82,.12);
    backdrop-filter: blur(12px);
}

body.employee-apply-only .tab {
    min-height: 54px;
    border-radius: 13px;
    color: #647186;
    font-size: 15px;
    font-weight: 800;
}

body.employee-apply-only .tab.active {
    background: linear-gradient(135deg, #326db2, #214c83);
    box-shadow: 0 8px 18px rgba(37,87,145,.24);
}

body.employee-apply-only .card {
    padding: 34px 38px 38px;
    border: 1px solid #dfe7f0;
    border-radius: 26px;
    background: rgba(255,255,255,.98);
    box-shadow: 0 18px 45px rgba(33,52,79,.08);
}

body.employee-apply-only #applyTab {
    column-gap: 22px;
}

body.employee-apply-only .form-intro,
body.employee-apply-only .section-heading {
    grid-column: 1 / -1;
}

body.employee-apply-only .form-intro {
    display: flex;
    align-items: center;
    gap: 13px;
    margin-bottom: 24px;
    padding: 15px 17px;
    border: 1px solid #d9e7f7;
    border-radius: 16px;
    background: linear-gradient(135deg, #f3f8ff, #f8fbff);
}

body.employee-apply-only .form-intro-icon {
    flex: 0 0 34px;
    width: 34px;
    height: 34px;
    display: grid;
    place-items: center;
    border-radius: 11px;
    background: #dcecff;
    color: #205895;
    font-weight: 900;
}

body.employee-apply-only .form-intro strong,
body.employee-apply-only .form-intro span { display: block; }
body.employee-apply-only .form-intro strong { color: #1c3657; font-size: 15px; }
body.employee-apply-only .form-intro span { margin-top: 3px; color: #738197; font-size: 13px; }

body.employee-apply-only .section-heading {
    display: flex;
    align-items: center;
    gap: 12px;
    margin: 5px 0 4px;
    padding-bottom: 12px;
    border-bottom: 1px solid #edf1f5;
}

body.employee-apply-only .leave-heading { margin-top: 28px; }
body.employee-apply-only .step-number {
    width: 28px;
    height: 28px;
    display: grid;
    place-items: center;
    border-radius: 9px;
    background: #245b9f;
    color: white;
    font-size: 13px;
    font-weight: 900;
}

body.employee-apply-only .section-heading strong,
body.employee-apply-only .section-heading small { display: block; }
body.employee-apply-only .section-heading strong { color: var(--ink); font-size: 16px; }
body.employee-apply-only .section-heading small { margin-top: 2px; color: #8994a5; font-size: 12px; }

body.employee-apply-only label {
    margin: 17px 0 8px;
    color: #2a3a50;
    font-size: 14px;
    font-weight: 800;
}

body.employee-apply-only input,
body.employee-apply-only select,
body.employee-apply-only textarea {
    min-height: 56px;
    border-color: #d8e1eb;
    border-radius: 13px;
    background: #fafcff;
    color: #1c2b40;
    font-size: 16px;
}

body.employee-apply-only input:focus,
body.employee-apply-only select:focus,
body.employee-apply-only textarea:focus {
    border-color: #3976bd;
    box-shadow: 0 0 0 4px rgba(57,118,189,.11);
}

body.employee-apply-only #applyTab > .secondary {
    margin-top: 22px;
    border: 1px solid #cbdced;
    background: #eef5fc;
    color: #244f7f;
}

body.employee-apply-only #applyTab > .primary {
    min-height: 60px;
    margin-top: 26px;
    border-radius: 15px;
    background: linear-gradient(135deg, #3374bd, #1e4b83);
    box-shadow: 0 12px 24px rgba(34,83,139,.22);
    font-size: 18px;
}

body.employee-apply-only .balance-box.show {
    border-color: #cfe0f2;
    background: #f0f7ff;
    color: #234a75;
}

@media (max-width: 800px) {
    body.employee-apply-only .app { width: min(100% - 24px, 680px); padding-top: 12px; }
    body.employee-apply-only .hero { min-height: 178px; padding: 28px 24px 42px; border-radius: 24px; }
    body.employee-apply-only .hero p { font-size: 14px; }
    body.employee-apply-only .tabs { margin: -24px 10px 16px; overflow-x: auto; grid-template-columns: repeat(5, minmax(128px, 1fr)) !important; }
    body.employee-apply-only .card { padding: 24px 18px 28px; border-radius: 21px; }
    body.employee-apply-only #applyTab { grid-template-columns: 1fr; }
    body.employee-apply-only #applyTab > * { grid-column: 1 / -1; }
    body.employee-apply-only .form-intro span { line-height: 1.45; }
}

@media (max-width: 430px) {
    body.employee-apply-only .app { width: calc(100% - 16px); }
    body.employee-apply-only h1 { font-size: 32px; }
    body.employee-apply-only .tabs { margin-left: 5px; margin-right: 5px; }
}

/* ==================================================
   딥그린 + 베이지 컬러 테마
================================================== */
body.employee-apply-only {
    --main: #2f6656;
    --main-dark: #183f35;
    --main-soft: #edf5f1;
    --ink: #1e302b;
    --muted: #73817c;
    --line: #dce5e0;
    background:
        radial-gradient(circle at 12% 0%, rgba(74, 122, 105, .11), transparent 28rem),
        linear-gradient(180deg, #faf9f5 0%, #f1f3ee 100%);
}

body.employee-apply-only .hero {
    border-color: rgba(255,255,255,.13);
    background:
        radial-gradient(circle at 88% 18%, rgba(235,222,190,.13) 0 92px, transparent 93px),
        radial-gradient(circle at 78% 115%, rgba(235,222,190,.09) 0 125px, transparent 126px),
        linear-gradient(125deg, #477d6d 0%, #28594b 52%, #173b32 100%);
    box-shadow: 0 22px 48px rgba(31, 72, 58, .18);
}

body.employee-apply-only .brand {
    border-color: rgba(244,232,203,.26);
    background: rgba(244,232,203,.11);
    color: #fff9eb;
}

body.employee-apply-only .tabs {
    border-color: #dedfd7;
    background: rgba(255,254,250,.97);
    box-shadow: 0 14px 34px rgba(40,66,57,.11);
}

body.employee-apply-only .tab { color: #66736e; }
body.employee-apply-only #compTabButton {
    font-size: 14px;
    line-height: 1.3;
    word-break: keep-all;
}

body.employee-apply-only #accountTabButton,
body.employee-apply-only #compHistoryTabButton {
    font-size: 14px;
    line-height: 1.3;
    word-break: keep-all;
}

/* 기존 nth-child(4) 숨김 규칙보다 우선하여 미휴무 사용내역 탭 표시 */
html body.employee-apply-only #employeeApplyTabs #compHistoryTabButton {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
}

/* 미휴무 사용내역 탭에서는 조회에 필요한 항목만 표시 */
body.employee-apply-only.comp-history-mode #compTab .comp-balance-button,
body.employee-apply-only.comp-history-mode #compTab #compBalanceBox,
body.employee-apply-only.comp-history-mode #compTab .comp-application-only {
    display: none !important;
}

body.employee-apply-only.comp-history-mode #compTab .grid2 {
    grid-template-columns: 1fr;
}

/* 직원등록과 PIN 등록·변경을 하나의 메뉴 화면으로 연결 */
body.employee-apply-only #registerTab:not(.hidden) + #pinResetTab:not(.hidden) {
    margin-top: -2px;
}

body.employee-apply-only #registerTab:not(.hidden) + #pinResetTab:not(.hidden)::before {
    content: "등록한 직원의 PIN을 새로 설정하거나 변경할 수 있습니다.";
    display: block;
    margin: -4px 0 20px;
    padding: 13px 15px;
    border-radius: 13px;
    background: #f2f6f2;
    color: #66766f;
    font-size: 13px;
}

/* 발생내역과 사용내역 분리 표시 */
body.employee-apply-only .history-group {
    margin-top: 22px;
}

body.employee-apply-only .history-group-title {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    margin-bottom: 10px;
    padding: 0 2px 10px;
    border-bottom: 2px solid #dfe9e3;
}

body.employee-apply-only .history-group-title strong {
    color: #244c40;
    font-size: 18px;
}

body.employee-apply-only .history-group-title span {
    color: #7a8882;
    font-size: 13px;
    font-weight: 700;
}

body.employee-apply-only .history-occurrence-item {
    border-left: 4px solid #6d9a88;
    background: #f8fbf8;
}

body.employee-apply-only .history-empty {
    color: #87928d;
    text-align: center;
    font-weight: 700;
}
body.employee-apply-only .tab:hover {
    color: #28594b;
    background: #eef5f1;
}

body.employee-apply-only .tab.active {
    color: #fffdf7;
    background: linear-gradient(135deg, #477c6b, #245044);
    box-shadow: 0 8px 18px rgba(41,91,74,.24);
}

body.employee-apply-only .card {
    border-color: #e2e4dd;
    background: rgba(255,254,250,.98);
    box-shadow: 0 18px 45px rgba(43,65,57,.075);
}

body.employee-apply-only .form-intro {
    border-color: #dbe5dd;
    background: linear-gradient(135deg, #f2f7f3, #fbfaf5);
}

body.employee-apply-only .form-intro-icon {
    background: #dfece5;
    color: #285d4d;
}

body.employee-apply-only .form-intro strong { color: #24493e; }
body.employee-apply-only .form-intro span { color: #78847f; }

body.employee-apply-only .step-number {
    background: linear-gradient(135deg, #477c6b, #28594b);
    color: #fffdf7;
}

body.employee-apply-only input,
body.employee-apply-only select,
body.employee-apply-only textarea {
    border-color: #dce2dc;
    background: #fcfcf8;
    color: #24342f;
}

body.employee-apply-only input:focus,
body.employee-apply-only select:focus,
body.employee-apply-only textarea:focus {
    border-color: #4a7c6c;
    box-shadow: 0 0 0 4px rgba(65,117,99,.11);
}

body.employee-apply-only #applyTab > .secondary {
    border-color: #d4dfd8;
    background: #edf4ef;
    color: #315e50;
}

body.employee-apply-only #applyTab > .secondary:hover { background: #e4efe8; }

body.employee-apply-only #applyTab > .primary,
body.employee-apply-only .primary {
    color: #fffdf7;
    background: linear-gradient(135deg, #477c6b, #214c40);
    box-shadow: 0 12px 24px rgba(38,85,70,.22);
}

body.employee-apply-only .balance-box.show {
    border-color: #d5e2da;
    background: #f0f6f2;
    color: #315b4e;
}