/* ==========================================================================
   알짜소프트 그룹웨어 — 공통 스타일 (크로스브라우징 대응)

   지원 범위
     크롬 / 엣지 / 웨일 / 파이어폭스 / 사파리   → 모든 기능
     인터넷 익스플로러 11, 엣지의 IE 모드        → 색·글자·표는 정상,
                                                  둥근 모서리 등 일부 장식만 생략

   작성 원칙
     1) 색은 항상 두 줄로 적는다.
          background-color: #ffffff;          ← 옛 브라우저가 읽는 줄
          background-color: var(--surface);   ← 요즘 브라우저가 읽는 줄
        옛 브라우저는 var() 를 이해하지 못해 두 번째 줄을 통째로 무시한다.
        그래서 첫 줄의 값이 살아남는다. 순서를 절대 바꾸지 말 것.

     2) flex 는 -ms- 접두어를 함께 적는다. IE11 은 옛 문법만 안다.

     3) gap 대신 margin 으로 간격을 준다. IE11 에는 gap 이 없다.
   ========================================================================== */

:root {
    color-scheme: light dark;

    --bg:          #f5f6f7;
    --surface:     #ffffff;
    --thead:       #fafafa;
    --row-hover:   #fafafa;
    /* 브랜드색 — 네이버 그린.
       --green      : 바탕으로 깔 때 (버튼·칩·막대)
       --green-deep : 글자·테두리. 흰 바탕에서 읽히도록 한 단계 어둡게 둔다.
       --green-soft : 아주 옅은 바탕 */
    --green:       #03c75a;
    --green-hover: #02b351;
    --green-deep:  #018a3e;
    --green-soft:  #e8f8ef;
    --on-green:    #ffffff;

    /* 파랑은 이제 브랜드색이 아니라 상태색이다.
       결재 대기 · 휴가 · 토요일 · 안내 문구에만 쓴다. */
    --blue:        #3182f6;
    --blue-hover:  #1b64da;
    --blue-soft:   #ebf3fe;
    --on-blue:     #ffffff;
    --text:        #222222;
    --text-sub:    #666666;
    --text-mute:   #999999;
    --line:        #e5e5e5;
    --line-soft:   #f5f6f7;
    --red:         #f04452;
    --red-soft:    #fdeced;
    --red-line:    #f5d3d6;
    --focus:       rgba(3, 199, 90, 0.18);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) {
        --bg:          #1a1a1a;
        --surface:     #242424;
        --thead:       #2b2b2b;
        --row-hover:   #2b2b2b;
        --green:       #03c75a;
        --green-hover: #04dd66;
        --green-deep:  #35d47e;
        --green-soft:  #12301f;
        --on-green:    #ffffff;
        --blue:        #5596f7;
        --blue-hover:  #7cadf9;
        --blue-soft:   #1c2c45;
        --on-blue:     #ffffff;
        --text:        #eaeaea;
        --text-sub:    #b0b0b0;
        --text-mute:   #888888;
        --line:        #3a3a3a;
        --line-soft:   #2b2b2b;
        --red:         #ff6b73;
        --red-soft:    #33222a;
        --red-line:    #4d2f36;
        --focus:       rgba(3, 199, 90, 0.26);
    }
}

/* ==========================================================================
   기본
   ========================================================================== */

* { box-sizing: border-box; }

html, body {
    margin: 0;
    padding: 0;
    min-height: 100%;
    background-color: #f5f6f7;
    background-color: var(--bg);
    color: #222222;
    color: var(--text);
}

body {
    font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo",
                 "Malgun Gothic", "맑은 고딕", "Nanum Gothic", "나눔고딕",
                 Dotum, "돋움", Arial, sans-serif;
    font-size: 14px;
    line-height: 1.6;
    -webkit-font-smoothing: antialiased;
}

a { color: inherit; text-decoration: none; }

img, svg { border: 0; vertical-align: middle; }

input, textarea, select, button { font-family: inherit; }

/* ==========================================================================
   전체 틀
   ========================================================================== */

.app {
    display: -ms-flexbox;
    display: flex;
    min-height: 100vh;
    -ms-flex-align: stretch;
    align-items: stretch;
}

.main {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    min-width: 0;
    width: 100%;
    padding: 34px 40px 60px;
}

.page-title {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin: 0 0 24px;
    color: #222222;
    color: var(--text);
}

.page-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin-bottom: 24px;
}

.page-head .page-title { margin: 0; }

.page-head .right {
    margin-left: auto;
    display: -ms-flexbox;
    display: flex;
}

.page-head .right > * { margin-left: 8px; }

.section-title {
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    margin: 0 0 14px;
    color: #222222;
    color: var(--text);
}

/* ==========================================================================
   사이드바
   ========================================================================== */

.side {
    width: 232px;
    -ms-flex: 0 0 232px;
    flex: 0 0 232px;
    background-color: #ffffff;
    background-color: var(--surface);
    border-right: 1px solid #e5e5e5;
    border-right: 1px solid var(--line);
    padding: 20px 14px 40px;
}

.side-logo {
    padding: 4px 10px 18px;
    font-size: 17px;
    font-weight: 700;
    letter-spacing: -0.3px;
    color: #222222;
    color: var(--text);
}

.side-logo b { color: #03c75a; color: var(--green); font-weight: 700; }
.side-logo span { color: #999999; color: var(--text-mute); font-weight: 500; }

.side-user {
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 12px 14px;
    margin-bottom: 8px;
    background-color: #ffffff;
    background-color: var(--surface);
}

.side-user .dept { font-size: 12px; color: #999999; color: var(--text-mute); }

.side-user .name {
    font-size: 14px;
    font-weight: 700;
    margin-top: 1px;
    letter-spacing: -0.2px;
    color: #222222;
    color: var(--text);
}

.side-util {
    padding: 10px 14px 16px;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
    margin-bottom: 8px;
}

.side-util a { color: #999999; color: var(--text-mute); }
.side-util a:hover { color: #666666; color: var(--text-sub); }
.side-util .sep { margin: 0 8px; color: #e5e5e5; color: var(--line); }

.side-group {
    font-size: 11.5px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
    padding: 16px 12px 6px;
}

.side-menu { list-style: none; margin: 0; padding: 0; }

.side-menu a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 9px 12px;
    border-radius: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #666666;
    color: var(--text-sub);
    letter-spacing: -0.2px;
}

.side-menu a:hover {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

.side-menu a.on {
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
    font-weight: 700;
}

.side-menu svg {
    width: 18px;
    height: 18px;
    -ms-flex: 0 0 18px;
    flex: 0 0 18px;
    margin-right: 10px;
}

/* ==========================================================================
   카드
   ========================================================================== */

.card {
    background-color: #ffffff;
    background-color: var(--surface);
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 8px;
    padding: 24px 26px;
}

.card + .card { margin-top: 16px; }
.card-flat { padding: 0; overflow: hidden; }

.grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 0 -8px;
}

.grid > .card {
    -ms-flex: 1 1 340px;
    flex: 1 1 340px;
    margin: 0 8px 16px;
}

.notice-banner {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    background-color: #ebf3fe;
    background-color: var(--blue-soft);
    border-radius: 8px;
    padding: 18px 22px;
    margin-bottom: 20px;
}

.notice-banner .txt { min-width: 0; }

.notice-banner .tt {
    font-weight: 700;
    letter-spacing: -0.2px;
    color: #222222;
    color: var(--text);
}

.notice-banner .ds {
    color: #666666;
    color: var(--text-sub);
    font-size: 13px;
    margin-top: 2px;
}

.notice-banner .btn {
    margin-left: auto;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

/* ==========================================================================
   버튼
   ========================================================================== */

.btn {
    display: inline-block;
    vertical-align: middle;
    text-align: center;
    padding: 10px 18px;
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.2px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    background-color: #ffffff;
    background-color: var(--surface);
    color: #666666;
    color: var(--text-sub);
    border-radius: 6px;
    cursor: pointer;
    line-height: 1.4;
}

.btn:hover {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

.btn-primary {
    background-color: #03c75a;
    background-color: var(--green);
    border-color: #03c75a;
    border-color: var(--green);
    color: #ffffff;
    color: var(--on-green);
}

.btn-primary:hover {
    background-color: #02b351;
    background-color: var(--green-hover);
    border-color: #02b351;
    border-color: var(--green-hover);
}

.btn-danger {
    color: #f04452;
    color: var(--red);
    border-color: #f5d3d6;
    border-color: var(--red-line);
    background-color: #ffffff;
    background-color: var(--surface);
}

.btn-danger:hover {
    background-color: #fdeced;
    background-color: var(--red-soft);
}

.btn-sm { padding: 7px 13px; font-size: 13px; }

.chip-row { margin-bottom: 18px; }

.chip {
    display: inline-block;
    padding: 7px 15px;
    margin: 0 6px 6px 0;
    border-radius: 999px;
    background-color: #ffffff;
    background-color: var(--surface);
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    color: var(--text-sub);
    cursor: pointer;
}

.chip:hover {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

.chip.on {
    background-color: #03c75a;
    background-color: var(--green);
    border-color: #03c75a;
    border-color: var(--green);
    color: #ffffff;
    color: var(--on-green);
}

/* ==========================================================================
   표
   ========================================================================== */

.table {
    width: 100%;
    border-collapse: collapse;
    font-size: 14px;
    background-color: #ffffff;
    background-color: var(--surface);
}

.table thead th {
    background-color: #fafafa;
    background-color: var(--thead);
    color: #999999;
    color: var(--text-mute);
    font-weight: 600;
    font-size: 13px;
    padding: 13px 12px;
    border-bottom: 1px solid #e5e5e5;
    border-bottom: 1px solid var(--line);
    white-space: nowrap;
}

.table tbody td {
    padding: 15px 12px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
    text-align: center;
    color: #666666;
    color: var(--text-sub);
}

.table tbody td.left { text-align: left; }

.table tbody td.strong {
    color: #222222;
    color: var(--text);
    font-weight: 500;
}

.table tbody tr:last-child td { border-bottom: none; }

.table tbody tr:hover {
    background-color: #fafafa;
    background-color: var(--row-hover);
}

.table .empty {
    padding: 64px 0;
    color: #999999;
    color: var(--text-mute);
}

.tag {
    display: inline-block;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
    padding: 2px 8px;
    border-radius: 4px;
    margin-right: 8px;
}

/* ==========================================================================
   목록
   ========================================================================== */

.list { list-style: none; margin: 0; padding: 0; }

.list li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
    color: #666666;
    color: var(--text-sub);
}

.list li:last-child { border-bottom: none; }

.list li a {
    font-weight: 500;
    letter-spacing: -0.2px;
    color: #222222;
    color: var(--text);
}

.list li a:hover { color: #03c75a; color: var(--green); }

.list li .date {
    margin-left: auto;
    padding-left: 12px;
    color: #999999;
    color: var(--text-mute);
    font-size: 13px;
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.list .none {
    color: #999999;
    color: var(--text-mute);
    -ms-flex-pack: center;
    justify-content: center;
    padding: 40px 0;
}

/* ==========================================================================
   입력
   ========================================================================== */

.field { margin-bottom: 18px; }

.field label {
    display: block;
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    color: var(--text-sub);
    margin-bottom: 7px;
}

.input, .textarea {
    width: 100%;
    padding: 12px 14px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    font-size: 14px;
    background-color: #ffffff;
    background-color: var(--surface);
    color: #222222;
    color: var(--text);
}

.input:focus, .textarea:focus {
    outline: none;
    border-color: #018a3e;
    border-color: var(--green-deep);
    box-shadow: 0 0 0 3px rgba(3, 199, 90, 0.16);
    box-shadow: 0 0 0 3px var(--focus);
}

.textarea { min-height: 320px; resize: vertical; line-height: 1.75; }

.check {
    display: inline-block;
    font-size: 14px;
    color: #666666;
    color: var(--text-sub);
    cursor: pointer;
}

.check input {
    width: 16px;
    height: 16px;
    margin-right: 7px;
    vertical-align: -3px;
    cursor: pointer;
}

.search { text-align: center; padding: 22px 0 4px; }

.search .input {
    display: inline-block;
    width: 280px;
    vertical-align: middle;
    margin-right: 6px;
}

/* ==========================================================================
   글 상세
   ========================================================================== */

.post-head {
    border-bottom: 1px solid #e5e5e5;
    border-bottom: 1px solid var(--line);
    padding-bottom: 18px;
}

.post-head h2 {
    margin: 0 0 8px;
    font-size: 20px;
    font-weight: 700;
    letter-spacing: -0.4px;
    color: #222222;
    color: var(--text);
}

.post-meta {
    font-size: 13px;
    color: #999999;
    color: var(--text-mute);
}

.post-meta span { margin-right: 16px; }

.post-body {
    padding: 26px 0;
    min-height: 240px;
    white-space: pre-wrap;
    line-height: 1.85;
    color: #666666;
    color: var(--text-sub);
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.post-foot {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding-top: 18px;
}

.post-foot .right {
    margin-left: auto;
    display: -ms-flexbox;
    display: flex;
}

.post-foot .right > * { margin-left: 8px; }

/* ==========================================================================
   알림
   ========================================================================== */

.alert {
    padding: 13px 16px;
    border-radius: 6px;
    margin-bottom: 18px;
    font-size: 13.5px;
    font-weight: 500;
}

.alert-info {
    background-color: #ebf3fe;
    background-color: var(--blue-soft);
    color: #1b64da;
    color: var(--blue);
}

.alert-error {
    background-color: #fdeced;
    background-color: var(--red-soft);
    color: #f04452;
    color: var(--red);
}

/* ==========================================================================
   페이지 이동
   ========================================================================== */

.paging { text-align: center; margin-top: 24px; }

.paging a, .paging strong {
    display: inline-block;
    min-width: 36px;
    padding: 8px 10px;
    margin: 0 3px;
    border-radius: 6px;
    font-size: 13.5px;
    font-weight: 600;
    color: #666666;
    color: var(--text-sub);
    background-color: #ffffff;
    background-color: var(--surface);
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
}

.paging a:hover {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

.paging strong {
    background-color: #03c75a;
    background-color: var(--green);
    border-color: #03c75a;
    border-color: var(--green);
    color: #ffffff;
    color: var(--on-green);
}

/* ==========================================================================
   로그인
   ========================================================================== */

.login-wrap {
    min-height: 100vh;
    padding: 60px 20px;
    text-align: center;
    background-color: #f5f6f7;
    background-color: var(--bg);
}

.login-box {
    display: inline-block;
    text-align: left;
    width: 100%;
    max-width: 380px;
    background-color: #ffffff;
    background-color: var(--surface);
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 10px;
    padding: 40px 34px;
}

.login-box h1 {
    font-size: 24px;
    font-weight: 700;
    letter-spacing: -0.5px;
    margin: 0 0 6px;
    color: #222222;
    color: var(--text);
}

.login-box h1 b { color: #03c75a; color: var(--green); }

.login-box .sub {
    font-size: 14px;
    color: #999999;
    color: var(--text-mute);
    margin: 0 0 28px;
}

.login-box .btn {
    display: block;
    width: 100%;
    padding: 14px;
    font-size: 15px;
    margin-top: 4px;
}

.login-hint {
    margin: 22px 0 0;
    padding: 14px;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    border-radius: 6px;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
    line-height: 1.7;
}

/* ==========================================================================
   좁은 화면
   ========================================================================== */

@media (max-width: 900px) {
    .app { display: block; }

    .side {
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        border-bottom: 1px solid var(--line);
        padding-bottom: 16px;
    }

    .side-menu li { display: inline-block; }
    .side-group { padding: 12px 12px 4px; }
    .main { padding: 24px 18px 48px; }
    .table thead { display: none; }
    .table tbody td { text-align: left; }
}

/* ==========================================================================
   인터넷 익스플로러 11 / 엣지 IE 모드 전용 보정
   아래 선택자는 IE 만 인식한다. 요즘 브라우저는 통째로 무시한다.
   ========================================================================== */

@media all and (-ms-high-contrast: none), (-ms-high-contrast: active) {

    /* IE 는 flex 컨테이너의 min-height 를 제대로 처리하지 못한다 */
    .app { display: block; }

    .side {
        float: left;
        width: 232px;
        min-height: 100vh;
    }

    .main {
        margin-left: 232px;
        width: auto;
        display: block;
    }

    /* IE 는 flex:1 1 340px 의 기준 폭을 무시해 카드가 찌그러진다 */
    .grid > .card { width: 46%; float: left; }
    .grid:after { content: ""; display: block; clear: both; }

    .page-head:after, .post-foot:after { content: ""; display: block; clear: both; }
    .page-head .right, .post-foot .right { float: right; }

    .list li { display: block; }
    .list li .date { float: right; }
    .list li:after { content: ""; display: block; clear: both; }

    .side-menu svg { float: left; }
    .side-menu a:after { content: ""; display: block; clear: both; }
}

/* ==========================================================================
   관리자 화면 (직원 등록·수정 / 권한 관리)
   ========================================================================== */

.form-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -8px;
}

.form-row > .field {
    -ms-flex: 1 1 240px;
    flex: 1 1 240px;
    margin: 0 8px 18px;
}

select.input {
    height: 45px;
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath fill='none' stroke='%238b95a1' stroke-width='2' d='M1 1l5 5 5-5'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 14px center;
    padding-right: 36px;
}

.role-box {
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    padding: 14px 16px;
}

.role-box .check { margin-right: 22px; }

.help {
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
    margin: 8px 0 0;
    line-height: 1.65;
}

.tag-gray {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #999999;
    color: var(--text-mute);
}

.perm-table thead th {
    border-left: 1px solid #e5e5e5;
    border-left: 1px solid var(--line);
    text-align: center;
}

.perm-table thead th:first-child { border-left: none; }
.perm-table tbody td { padding: 11px 12px; }
.perm-table tbody input { width: 17px; height: 17px; cursor: pointer; }
.perm-table .group-name { color: #999999; color: var(--text-mute); font-weight: 600; }
.perm-table .muted { color: #999999; color: var(--text-mute); }

.table td .btn { margin: 0 2px; }

/* ==========================================================================
   설치 일정 — 목록 / 등록 / 통계
   ========================================================================== */

.page-desc {
    font-size: 13.5px;
    color: #999999;
    color: var(--text-mute);
    margin: -14px 0 22px;
}

.card-head {
    padding: 20px 24px 14px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.card-head .tt { font-weight: 700; color: #222222; color: var(--text); }

.card-head .ds {
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
    margin-top: 2px;
}

/* ---------------------------------------------------------------- 검색 줄 */
.search-card { padding: 16px 20px; margin-bottom: 16px; }

.search-form {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 -4px;
}

.search-form > * { margin: 4px; }
.search-form .input { -ms-flex: 1 1 180px; flex: 1 1 180px; width: auto; }
.search-form select.input { -ms-flex: 0 0 170px; flex: 0 0 170px; }
.search-form .month-input { -ms-flex: 0 0 190px; flex: 0 0 190px; }

.inline-label {
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    color: var(--text-sub);
    margin-right: 4px;
}

/* ---------------------------------------------------------------- 목록 표 */
.table-scroll { width: 100%; overflow-x: auto; }
.sched-table { min-width: 1080px; }
.table td.muted { color: #999999; color: var(--text-mute); }
.table td.small { font-size: 12.5px; }

.table td .sub {
    display: block;
    font-size: 11.5px;
    font-weight: 400;
    color: #999999;
    color: var(--text-mute);
    margin-top: 2px;
}

.badge {
    display: inline-block;
    padding: 3px 11px;
    border-radius: 999px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    font-size: 12px;
    font-weight: 700;
    background-color: #ffffff;
    background-color: var(--surface);
}

.badge-empty {
    color: #999999;
    color: var(--text-mute);
    border-color: #e5e5e5;
    border-color: var(--line);
    font-weight: 500;
}

.color-dot {
    display: inline-block;
    width: 12px;
    height: 12px;
    border-radius: 50%;
    vertical-align: -2px;
    margin-right: 6px;
}

/* ---------------------------------------------------------------- 프리셋 */
.preset-card { margin-bottom: 16px; padding: 20px 24px; }

.preset-head { margin-bottom: 14px; }
.preset-head .tt { font-weight: 700; }

.preset-head .ds {
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
    margin-top: 2px;
    line-height: 1.6;
}

.preset-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.preset-slot {
    -ms-flex: 1 1 200px;
    flex: 1 1 200px;
    margin: 5px;
    padding: 12px 14px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
}

.preset-slot:after { content: ""; display: block; clear: both; }
.preset-slot.on { border-color: #03c75a; border-color: var(--green); }

.preset-name {
    float: left;
    font-weight: 600;
    font-size: 13.5px;
    color: #222222;
    color: var(--text);
}

.preset-name:hover { color: #03c75a; color: var(--green); }

.preset-default {
    float: left;
    margin-left: 7px;
    font-size: 11px;
    font-weight: 700;
    padding: 1px 7px;
    border-radius: 4px;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
}

.preset-save {
    float: right;
    font-size: 12px;
    padding: 3px 10px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 4px;
    background-color: #ffffff;
    background-color: var(--surface);
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
}

.preset-save:hover {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #666666;
    color: var(--text-sub);
}

.form-row > .field.wide { -ms-flex: 1 1 380px; flex: 1 1 380px; }
.textarea-sm { min-height: 130px; }
.delete-row { margin-top: 18px; padding-top: 18px; border-top: 1px solid #f5f6f7; }

/* ---------------------------------------------------------------- 요약 카드 */
.kpi-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -8px 16px;
}

.kpi {
    -ms-flex: 1 1 200px;
    flex: 1 1 200px;
    margin: 0 8px 16px;
    padding: 20px 22px;
}

.kpi-label { font-size: 13px; color: #999999; color: var(--text-mute); font-weight: 600; }

.kpi-value {
    font-size: 34px;
    font-weight: 700;
    letter-spacing: -1px;
    margin: 4px 0 8px;
    color: #222222;
    color: var(--text);
}

.kpi-diff {
    display: inline-block;
    font-size: 12px;
    font-weight: 600;
    padding: 3px 10px;
    border-radius: 4px;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #999999;
    color: var(--text-mute);
}

.kpi-diff.up   { background-color: #e8f8ef; background-color: var(--green-soft); color: #03c75a; color: var(--green); }
.kpi-diff.down { background-color: #fdeced; background-color: var(--red-soft);  color: #f04452; color: var(--red); }

/* ---------------------------------------------------------------- 분포 막대 */
.bar-list { list-style: none; margin: 0; padding: 0; }

.bar-list li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 9px 0;
}

.bar-name { -ms-flex: 0 0 90px; flex: 0 0 90px; font-size: 13px; color: #666666; color: var(--text-sub); }

.bar-track {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    height: 8px;
    border-radius: 999px;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    margin: 0 12px;
    overflow: hidden;
    display: block;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: #03c75a;
    background-color: var(--green);
    min-width: 2px;
}

.bar-value {
    -ms-flex: 0 0 44px;
    flex: 0 0 44px;
    text-align: right;
    font-size: 13px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.bar-list .none {
    display: block;
    text-align: center;
    padding: 30px 0;
    color: #999999;
    color: var(--text-mute);
}

/* ---------------------------------------------------------------- 차트 */
.chart-card { margin-top: 16px; }

.chart-head { margin-bottom: 14px; }
.chart-head:after { content: ""; display: block; clear: both; }
.chart-head .section-title { float: left; margin: 0; }

.chart-hint {
    float: right;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
}

.chip-box {
    padding: 14px 16px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 8px;
    margin-bottom: 18px;
}

.chip-sm { padding: 5px 12px; font-size: 12.5px; }

.chart-wrap {
    position: relative;
    padding: 6px 0 30px 46px;
}

.chart-svg { display: block; width: 100%; height: 260px; }

.chart-grid line {
    stroke: #e5e5e5;
    stroke: var(--line);
    stroke-width: 1;
}

.chart-line {
    stroke: #03c75a;
    stroke: var(--green);
    stroke-width: 2;
    stroke-linejoin: round;
    stroke-linecap: round;
    vector-effect: non-scaling-stroke;
}

.chart-dots circle { fill: #03c75a; fill: var(--green); }

.chart-yaxis, .chart-xaxis { position: absolute; }

.chart-yaxis {
    left: 0;
    top: 6px;
    width: 40px;
    height: 260px;
}

.chart-yaxis span {
    position: absolute;
    right: 6px;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

.chart-xaxis {
    left: 46px;
    right: 0;
    bottom: 6px;
    height: 18px;
}

.chart-xaxis span {
    position: absolute;
    -webkit-transform: translateX(-50%);
    transform: translateX(-50%);
    font-size: 11.5px;
    white-space: nowrap;
    color: #999999;
    color: var(--text-mute);
}

.chart-empty {
    padding: 70px 0;
    text-align: center;
    color: #999999;
    color: var(--text-mute);
}

@media (max-width: 900px) {
    .chart-head .section-title, .chart-hint { float: none; display: block; }
    .chart-hint { margin-top: 4px; }
    .sched-table { min-width: 900px; }
}

/* ==========================================================================
   첨부파일
   ========================================================================== */

.file-input { padding: 10px 12px; cursor: pointer; }

.file-picked, .file-list, .file-edit-list {
    list-style: none;
    margin: 10px 0 0;
    padding: 0;
}

.file-picked li, .file-edit-list li {
    padding: 9px 12px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    margin-bottom: 6px;
    font-size: 13px;
}

.file-picked li:after, .file-edit-list li:after { content: ""; display: block; clear: both; }

.file-name {
    color: #222222;
    color: var(--text);
    word-break: break-all;
}

.file-size {
    float: right;
    margin-left: 10px;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
}

.file-edit-list .check { display: inline; }
.file-edit-list .file-open { float: right; font-size: 12px; color: #03c75a; color: var(--green); }
.file-edit-list .file-open:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 글 안의 그림 */
.post-images { padding: 22px 0 4px; }

.post-images figure {
    margin: 0 0 18px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

.post-images img {
    display: block;
    width: 100%;
    height: auto;
    max-height: 720px;
    object-fit: contain;
    background-color: #ffffff;
    background-color: var(--surface);
}

.post-images figcaption {
    padding: 9px 14px;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
    background-color: #ffffff;
    background-color: var(--surface);
    border-top: 1px solid #f5f6f7;
    border-top: 1px solid var(--line-soft);
}

.post-images figcaption:after { content: ""; display: block; clear: both; }
.post-images figcaption a { float: right; color: #03c75a; color: var(--green); font-weight: 600; }
.post-images figcaption a:hover { text-decoration: underline; }

/* ---------------------------------------------------------------- 파일 목록 */
.post-files {
    margin-top: 20px;
    padding: 16px 18px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 8px;
}

.files-title {
    font-size: 13px;
    font-weight: 700;
    color: #666666;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.file-list li {
    padding: 7px 0;
    font-size: 13.5px;
    color: #999999;
    color: var(--text-mute);
}

.file-list li:after { content: ""; display: block; clear: both; }
.file-list svg { float: left; margin: 3px 8px 0 0; }

.file-list a {
    color: #222222;
    color: var(--text);
    font-weight: 500;
    word-break: break-all;
}

.file-list a:hover { color: #03c75a; color: var(--green); text-decoration: underline; }

/* ---------------------------------------------------------------- 목록의 클립 */
.clip {
    display: inline-block;
    margin-left: 6px;
    vertical-align: -2px;
    color: #999999;
    color: var(--text-mute);
}

/* ==========================================================================
   모바일 대응
   좁은 화면에서 좌측 메뉴를 접고, 입력란과 버튼을 손가락 크기에 맞춘다.
   ========================================================================== */

/* 넓은 화면에서는 상단 막대를 감춘다 */
.mobile-bar { display: none; }

@media (max-width: 768px) {

    /* ---------------------------------------------------------- 상단 막대 */
    .mobile-bar {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 50;
        height: 56px;
        padding: 0 12px;
        background-color: #ffffff;
        background-color: var(--surface);
        border-bottom: 1px solid #e5e5e5;
        border-bottom: 1px solid var(--line);
    }

    .mobile-toggle {
        width: 40px;
        height: 40px;
        border: none;
        background: none;
        color: #666666;
        color: var(--text-sub);
        cursor: pointer;
        padding: 0;
    }

    .mobile-title {
        margin-left: 6px;
        font-size: 16px;
        font-weight: 700;
        letter-spacing: -0.3px;
        color: #222222;
        color: var(--text);
    }

    .mobile-title b { color: #03c75a; color: var(--green); }

    .mobile-user {
        margin-left: auto;
        font-size: 13px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    /* ---------------------------------------------------------- 메뉴 접기 */
    .app { display: block; }

    .side {
        display: none;
        width: 100%;
        border-right: none;
        border-bottom: 1px solid #e5e5e5;
        border-bottom: 1px solid var(--line);
        padding: 14px 12px 20px;
    }

    .side.open { display: block; }
    .side-logo { display: none; }          /* 상단 막대에 이미 있다 */
    .side-menu li { display: block; }

    .side-menu a {
        padding: 13px 12px;
        font-size: 15px;
    }

    /* ---------------------------------------------------------- 본문 */
    .main { padding: 20px 16px 40px; }
    .page-title { font-size: 20px; margin-bottom: 18px; }
    .page-desc { margin: -12px 0 18px; font-size: 13px; }
    .card { padding: 18px 16px; border-radius: 8px; }

    .page-head { display: block; }
    .page-head .right { margin: 12px 0 0; display: block; }
    .page-head .right > * { display: block; width: 100%; margin: 0; }

    /* ---------------------------------------------------------- 입력 */
    .form-row { display: block; margin: 0; }
    .form-row > .field, .form-row > .field.wide { display: block; width: auto; margin: 0 0 16px; }

    .field label { font-size: 14px; margin-bottom: 8px; }

    /* 글자 크기를 16px 로 두면 아이폰에서 입력할 때 화면이 확대되지 않는다 */
    .input, .textarea, select.input {
        font-size: 16px;
        padding: 13px 14px;
        min-height: 50px;
        border-radius: 6px;
    }

    select.input { height: 50px; background-position: right 12px center; }
    .textarea { min-height: 140px; }
    .textarea-sm { min-height: 110px; }
    .check input { width: 20px; height: 20px; }
    .check { font-size: 15px; }
    .help { font-size: 12.5px; }

    .btn {
        min-height: 48px;
        font-size: 15px;
        padding: 12px 18px;
    }

    /* ---------------------------------------------------------- 프리셋 */
    .preset-card { padding: 16px; }
    .preset-grid { display: block; margin: 0; }
    .preset-slot { display: block; margin: 0 0 8px; padding: 14px; }
    .preset-name { font-size: 15px; }
    .preset-save { padding: 6px 14px; font-size: 13px; }

    /* ---------------------------------------------------------- 화면 아래 고정 버튼 */
    .sticky-actions {
        position: fixed;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 40;
        display: -ms-flexbox;
        display: flex;
        margin: 0;
        padding: 10px 14px calc(10px + env(safe-area-inset-bottom));
        background-color: #ffffff;
        background-color: var(--surface);
        border-top: 1px solid #e5e5e5;
        border-top: 1px solid var(--line);
    }

    .sticky-actions .btn { -ms-flex: 1 1 0; flex: 1 1 0; }
    .sticky-actions .right { margin: 0 0 0 8px; -ms-flex: 2 1 0; flex: 2 1 0; display: block; }
    .sticky-actions .right > * { display: block; width: 100%; }

    /* 고정 버튼에 내용이 가리지 않도록 아래 여백을 준다 */
    .main:has(.sticky-actions) { padding-bottom: 96px; }

    /* ---------------------------------------------------------- 검색 줄 */
    .search-form { display: block; margin: 0; }
    .search-form > * { display: block; width: 100%; margin: 0 0 8px; }
    .search-form select.input, .search-form .input, .search-form .month-input { width: 100%; }
    .inline-label { display: block; margin-bottom: 6px; }

    /* ---------------------------------------------------------- 요약 카드 */
    .kpi-row { display: block; margin: 0; }
    .kpi { display: block; margin: 0 0 10px; padding: 16px 18px; }
    .kpi-value { font-size: 28px; }

    .grid { display: block; margin: 0; }
    .grid > .card { display: block; margin: 0 0 14px; }
}

/* :has 를 모르는 옛 브라우저용 대비 */
@media (max-width: 768px) {
    .app .main { padding-bottom: 96px; }
}

/* ==========================================================================
   일정 상세 창
   목록 오른쪽에서 밀려 나오고, 좁은 화면에서는 전체를 덮는다.
   ========================================================================== */

.panel-dim {
    display: none;
    position: fixed;
    left: 0; right: 0; top: 0; bottom: 0;
    background: rgba(0, 0, 0, 0.35);
    z-index: 60;
}

.panel-dim.on { display: block; }

.panel-box {
    position: fixed;
    top: 0;
    right: 0;
    bottom: 0;
    width: 460px;
    max-width: 92%;
    z-index: 61;
    background-color: #ffffff;
    background-color: var(--surface);
    border-left: 1px solid #e5e5e5;
    border-left: 1px solid var(--line);
    overflow-y: auto;
    -webkit-transform: translateX(100%);
    transform: translateX(100%);
    -webkit-transition: transform .18s ease;
    transition: transform .18s ease;
    visibility: hidden;
}

.panel-box.open {
    -webkit-transform: translateX(0);
    transform: translateX(0);
    visibility: visible;
}

.panel-loading {
    padding: 60px 0;
    text-align: center;
    color: #999999;
    color: var(--text-mute);
}

/* ---------------------------------------------------------------- 내용 */
.detail-head {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 2;
    padding: 22px 56px 16px 24px;
    background-color: #ffffff;
    background-color: var(--surface);
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.detail-title {
    font-size: 19px;
    font-weight: 700;
    letter-spacing: -0.4px;
    line-height: 1.4;
    color: #222222;
    color: var(--text);
}

.detail-title .slash { color: #999999; color: var(--text-mute); font-weight: 400; }

.detail-sub {
    margin-top: 3px;
    font-size: 13px;
    color: #999999;
    color: var(--text-mute);
}

.detail-close {
    position: absolute;
    top: 18px;
    right: 16px;
    width: 34px;
    height: 34px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 50%;
    background-color: #ffffff;
    background-color: var(--surface);
    color: #999999;
    color: var(--text-mute);
    font-size: 20px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
}

.detail-close:hover { background-color: #f5f6f7; background-color: var(--line-soft); }

.detail-body { padding: 14px 24px 40px; }

/* ---------------------------------------------------------------- 항목 줄 */
.dl-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 7px 0;
}

.dl-key {
    -ms-flex: 0 0 92px;
    flex: 0 0 92px;
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    color: var(--text-sub);
}

.dl-val { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }

.dl-val.plain {
    font-size: 14px;
    color: #222222;
    color: var(--text);
    word-break: break-all;
}

.dl-val.plain a { color: #03c75a; color: var(--green); }

.dl-note {
    display: block;
    margin-top: 3px;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

.input-sm {
    padding: 8px 11px;
    font-size: 13.5px;
    min-height: 0;
    border-radius: 6px;
}

select.input-sm { height: 38px; background-position: right 10px center; }

.quick-form {
    padding: 4px 0 14px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.quick-actions { margin-top: 12px; }
.quick-actions .btn { margin-right: 6px; }

/* ---------------------------------------------------------------- 긴 글 */
.detail-section { margin-top: 22px; }

.detail-label {
    font-size: 13px;
    font-weight: 700;
    color: #666666;
    color: var(--text-sub);
    margin-bottom: 8px;
}

.detail-text {
    padding: 13px 15px;
    border-radius: 6px;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    font-size: 13.5px;
    line-height: 1.75;
    white-space: pre-wrap;
    word-break: break-all;
    color: #666666;
    color: var(--text-sub);
}

/* ---------------------------------------------------------------- 수정 내역 */
.log-list { list-style: none; margin: 0; padding: 0; }

.log-list li {
    padding: 11px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.log-list li:last-child { border-bottom: none; }
.log-top:after { content: ""; display: block; clear: both; }

.log-who {
    float: left;
    font-size: 13px;
    font-weight: 600;
    color: #222222;
    color: var(--text);
}

.log-when {
    float: right;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
}

.log-body {
    margin-top: 5px;
    font-size: 13px;
    line-height: 1.7;
    color: #666666;
    color: var(--text-sub);
    word-break: break-all;
}

.log-field {
    display: inline-block;
    padding: 1px 8px;
    margin-right: 6px;
    border-radius: 4px;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
    font-size: 12px;
    font-weight: 700;
}

.log-old { color: #999999; color: var(--text-mute); text-decoration: line-through; }
.log-arrow { margin: 0 5px; color: #999999; color: var(--text-mute); }
.log-new { font-weight: 600; color: #222222; color: var(--text); }

.log-none {
    text-align: center;
    padding: 26px 0;
    color: #999999;
    color: var(--text-mute);
    font-size: 13px;
}

/* ---------------------------------------------------------------- 전체 화면 상세 */
.detail-card { padding: 0; overflow: hidden; }
.detail-card .detail-head { position: static; }
.detail-card .detail-close { display: none; }

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 768px) {
    .panel-box { width: 100%; max-width: 100%; border-left: none; }
    .detail-head { padding: 18px 52px 14px 18px; }
    .detail-body { padding: 12px 18px 40px; }
    .dl-row { display: block; padding: 9px 0; }
    .dl-key { margin-bottom: 5px; }
    .input-sm { font-size: 16px; padding: 11px 13px; }
    select.input-sm { height: 46px; }
    .quick-actions .btn { display: block; width: 100%; margin: 0 0 8px; }
}

/* ==========================================================================
   일정 상세 창 — 두 칸 배치 개편
   앞쪽에 정의된 값을 덮어쓰므로 반드시 파일 뒤쪽에 있어야 한다.
   ========================================================================== */

.panel-box { width: 860px; max-width: 96%; }

.detail-cols {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -10px;
}

.detail-col {
    -ms-flex: 1 1 300px;
    flex: 1 1 300px;
    min-width: 0;
    margin: 0 10px 16px;
}

.col-label {
    font-size: 12px;
    font-weight: 700;
    color: #999999;
    color: var(--text-mute);
    padding-bottom: 8px;
    margin-bottom: 10px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.quick-form { padding: 0; margin: 0; border-bottom: none; }
.dl-row.tight { padding: 5px 0; }

.detail-text {
    min-height: 104px;
    max-height: 190px;
    overflow-y: auto;
}

.detail-text.empty {
    color: #999999;
    color: var(--text-mute);
    font-style: normal;
}

/* ---------------------------------------------------------------- 수정 내역 접기 */
.log-block {
    margin-top: 6px;
    border-top: 1px solid #f5f6f7;
    border-top: 1px solid var(--line-soft);
    padding-top: 12px;
}

.log-toggle {
    display: block;
    width: 100%;
    text-align: left;
    padding: 10px 12px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
    cursor: pointer;
    font-size: 13px;
    font-weight: 700;
    color: #666666;
    color: var(--text-sub);
}

.log-toggle:hover { background-color: #f5f6f7; background-color: var(--line-soft); }

.log-count {
    display: inline-block;
    margin-left: 7px;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    font-size: 11.5px;
    font-weight: 700;
    color: #999999;
    color: var(--text-mute);
}

.log-caret {
    float: right;
    font-size: 11px;
    color: #999999;
    color: var(--text-mute);
}

/* 기본은 감춰 두고, 눌렀을 때만 펼친다 */
.log-block .log-list { display: none; margin-top: 4px; }
.log-block.open .log-list { display: block; }

.log-block.open .log-toggle {
    border-bottom-left-radius: 0;
    border-bottom-right-radius: 0;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

.log-block.open .log-caret {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
    display: inline-block;
}

.log-block .log-list {
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-top: none;
    border-radius: 0 0 6px 6px;
    padding: 4px 14px;
    max-height: 280px;
    overflow-y: auto;
    margin-top: 0;
}

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 860px) {
    .panel-box { width: 100%; max-width: 100%; border-left: none; }
    .detail-cols { display: block; margin: 0; }
    .detail-col { display: block; margin: 0 0 18px; }
    .detail-text { min-height: 0; max-height: none; }
}

/* ==========================================================================
   일정 통계 — 선과 간격 정리
   앞쪽 값을 덮어쓰므로 파일 뒤쪽에 있어야 한다.
   ========================================================================== */

/* ---------------------------------------------------------------- 간격 통일 */
.stats-page .card { padding: 20px 22px; }
.kpi-row { margin: 0 -7px 14px; }
.kpi { margin: 0 7px 14px; padding: 16px 18px; }
.grid { margin: 0 -7px; }
.grid > .card { margin: 0 7px 14px; }
.chart-card { margin-top: 0; margin-bottom: 14px; }
.search-card { padding: 14px 18px; margin-bottom: 14px; }

/* ---------------------------------------------------------------- 요약 카드 */
.kpi-label { font-size: 12.5px; }

.kpi-value {
    font-size: 30px;
    margin: 2px 0 7px;
    line-height: 1.1;
}

.kpi-diff { padding: 2px 9px; font-size: 11.5px; }

/* ---------------------------------------------------------------- 제목 줄 */
.sec-head { margin-bottom: 14px; }
.sec-head:after { content: ""; display: block; clear: both; }

.sec-head .section-title {
    float: left;
    margin: 0;
    font-size: 15.5px;
}

.sec-hint {
    float: right;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
    line-height: 24px;
}

.chart-head { margin-bottom: 12px; }
.chart-head .section-title { font-size: 15.5px; }
.chart-hint { line-height: 24px; }

/* ---------------------------------------------------------------- 분포 막대 */
.bar-list li {
    padding: 7px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.bar-list li:last-child { border-bottom: none; }

.bar-name {
    -ms-flex: 0 0 78px;
    flex: 0 0 78px;
    font-size: 13px;
    font-weight: 500;
}

.bar-track {
    height: 6px;
    margin: 0 10px;
}

.bar-pct {
    -ms-flex: 0 0 42px;
    flex: 0 0 42px;
    text-align: right;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
}

.bar-value {
    -ms-flex: 0 0 38px;
    flex: 0 0 38px;
    font-size: 13.5px;
}

/* ---------------------------------------------------------------- 항목 고르는 줄 */
.chip-box {
    border: none;
    border-radius: 6px;
    padding: 10px 12px 4px;
    margin-bottom: 14px;
    background-color: #fafafa;
    background-color: var(--thead);
}

.chip-sm { padding: 5px 13px; font-size: 12.5px; margin: 0 5px 6px 0; }

/* ---------------------------------------------------------------- 차트 */
.chart-wrap { padding: 4px 0 26px 42px; }
.chart-svg { height: 220px; }
.chart-yaxis { height: 220px; top: 4px; width: 36px; }
.chart-yaxis span { right: 8px; font-size: 11px; }
.chart-xaxis { left: 42px; bottom: 4px; }
.chart-xaxis span { font-size: 11px; }

.chart-grid line {
    stroke: #eceef1;
    stroke: var(--line-soft);
    stroke-width: 1;
    shape-rendering: crispEdges;
}

/* 맨 아래 기준선만 진하게 */
.chart-grid line:first-child {
    stroke: #d7dbe0;
    stroke: var(--line);
}

.chart-line { stroke-width: 2.5; }
.chart-dots circle { r: 3.5; }
.chart-empty { padding: 50px 0; font-size: 13px; }

@media (max-width: 768px) {
    .sec-head .section-title, .sec-hint { float: none; display: block; }
    .sec-hint { margin-top: 2px; line-height: 1.5; }
    .bar-name { -ms-flex: 0 0 64px; flex: 0 0 64px; font-size: 12.5px; }
    .bar-pct { display: none; }
}

/* ==========================================================================
   요약 카드 줄 맞춤

   .card + .card { margin-top } 규칙은 세로로 쌓인 카드용인데,
   가로로 나열된 요약 카드에도 걸려 두 번째부터 아래로 밀렸다.
   그 규칙보다 구체적인 선택자로 다시 눌러 준다.
   ========================================================================== */

.kpi-row {
    -ms-flex-align: stretch;
    align-items: stretch;
}

.kpi-row .card,
.kpi-row .card + .card {
    margin: 0 7px 14px;
}

/* 가로로 놓인 분포 카드도 같은 이유로 눌러 둔다 */
.grid > .card,
.grid > .card + .card {
    margin: 0 7px 14px;
}

/* 요약 카드 안쪽도 위아래 기준을 맞춘다 */
.kpi {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.kpi-diff {
    -ms-flex-item-align: start;
    align-self: flex-start;
    margin-top: auto;
}

@media (max-width: 768px) {
    .kpi-row .card,
    .kpi-row .card + .card,
    .grid > .card,
    .grid > .card + .card {
        margin: 0 0 10px;
    }
}

/* ==========================================================================
   정산 관리 — VAN 통계
   ========================================================================== */

.tilde { margin: 0 4px; color: #999999; color: var(--text-mute); }
.check.ml { margin-left: 14px; margin-right: 6px; }
.search-form .date-input { -ms-flex: 0 0 160px; flex: 0 0 160px; }

.van-table { min-width: 1280px; }
.van-table .col-no    { width: 56px; }
.van-table .col-fran  { width: 130px; }
.van-table .col-name  { width: 190px; }
.van-table .col-memo  { width: 170px; }
.van-table .col-biz   { width: 130px; }
.van-table .col-sales { width: 90px; }
.van-table .col-sum   { width: 80px; }
.van-table thead th   { min-width: 78px; }

.van-table tbody td { padding: 10px 10px; }
.van-table .num { text-align: right; font-variant-numeric: tabular-nums; }
.van-table .num.zero { color: #c3c9d0; }

.van-table .num.sum {
    font-weight: 700;
    color: #222222;
    color: var(--text);
    background-color: #fafafa;
    background-color: var(--thead);
}

/* 머리글 아래 검색 칸 */
.filter-row td {
    padding: 6px 6px;
    background-color: #fafafa;
    background-color: var(--thead);
    border-bottom: 1px solid #e5e5e5;
    border-bottom: 1px solid var(--line);
}

.input-xs {
    width: 100%;
    padding: 5px 8px;
    font-size: 12.5px;
    min-height: 0;
    border-radius: 4px;
}

select.input-xs { height: 30px; background-position: right 7px center; padding-right: 22px; }

/* 맨 아래 합계 줄 */
.total-row td {
    background-color: #fffbe6;
    border-top: 2px solid #e5e5e5;
    border-top: 2px solid var(--line);
    font-weight: 700;
    color: #222222;
    padding: 11px 10px;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .total-row td { background-color: #2c2a1f; color: #eaeaea; }
    html:not([data-theme="light"]) .van-table .num.zero { color: #6a6a6a; }
}

/* ---------------------------------------------------------------- 엑셀 올리기 창 */
.upload-box {
    position: fixed;
    left: 50%;
    top: 50%;
    width: 520px;
    max-width: 94%;
    max-height: 88vh;
    overflow-y: auto;
    z-index: 61;
    padding: 22px 24px 20px;
    border-radius: 8px;
    background-color: #ffffff;
    background-color: var(--surface);
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    -webkit-transform: translate(-50%, -50%) scale(0.97);
    transform: translate(-50%, -50%) scale(0.97);
    visibility: hidden;
    opacity: 0;
    -webkit-transition: opacity .14s ease;
    transition: opacity .14s ease;
}

.upload-box.open {
    visibility: visible;
    opacity: 1;
    -webkit-transform: translate(-50%, -50%) scale(1);
    transform: translate(-50%, -50%) scale(1);
}

.upload-head {
    position: relative;
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 18px;
    color: #222222;
    color: var(--text);
}

.upload-head .detail-close { top: -4px; right: 0; }

.upload-guide {
    padding: 14px 16px;
    border-radius: 6px;
    background-color: #fafafa;
    background-color: var(--thead);
    font-size: 12.5px;
    color: #666666;
    color: var(--text-sub);
    line-height: 1.7;
}

.guide-title { font-weight: 700; margin-bottom: 6px; }
.upload-guide p { margin: 0 0 10px; }
.upload-guide ul { margin: 10px 0 0; padding-left: 18px; }
.upload-guide li { margin-bottom: 3px; }

.guide-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 11.5px;
    background-color: #ffffff;
    background-color: var(--surface);
}

.guide-table th, .guide-table td {
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    padding: 5px 7px;
    text-align: center;
    white-space: nowrap;
}

.guide-table th { font-weight: 700; background-color: #f5f6f7; background-color: var(--line-soft); }

/* ---------------------------------------------------------------- 준비 중 안내 */
.ready-box { padding: 40px 10px; text-align: center; }

.ready-title {
    font-size: 17px;
    font-weight: 700;
    margin-bottom: 12px;
    color: #222222;
    color: var(--text);
}

.ready-text {
    font-size: 13.5px;
    line-height: 1.9;
    color: #999999;
    color: var(--text-mute);
    margin: 0 0 16px;
}

@media (max-width: 768px) {
    .search-form .date-input { -ms-flex: none; flex: none; width: 100%; }
    .tilde { display: none; }
    .check.ml { margin-left: 0; display: block; margin-bottom: 10px; }
    .upload-box { padding: 18px 16px; }
    .van-table { min-width: 1100px; }
}

/* ==========================================================================
   상품 게시판 — 사진판 목록
   ========================================================================== */

.gallery {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -7px;
}

.gal-item {
    -ms-flex: 1 1 232px;
    flex: 1 1 232px;
    max-width: 320px;
    margin: 0 7px 14px;
    display: block;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    background-color: var(--surface);
}

.gal-item:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
    text-decoration: none;
}

.gal-thumb {
    display: block;
    position: relative;
    width: 100%;
    padding-top: 72%;          /* 가로:세로 비율을 일정하게 맞춘다 */
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    overflow: hidden;
}

.gal-thumb img {
    position: absolute;
    left: 0;
    top: 0;
    width: 100%;
    height: 100%;
    object-fit: cover;
}

.gal-noimg {
    position: absolute;
    left: 0;
    top: 50%;
    width: 100%;
    margin-top: -9px;
    text-align: center;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
}

.gal-body { display: block; padding: 13px 15px 15px; }

.gal-cat {
    display: inline-block;
    margin-bottom: 6px;
    padding: 2px 8px;
    border-radius: 4px;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
    font-size: 11.5px;
    font-weight: 700;
}

.gal-title {
    display: block;
    font-size: 14.5px;
    font-weight: 600;
    letter-spacing: -0.2px;
    line-height: 1.45;
    color: #222222;
    color: var(--text);
    /* 두 줄까지만 보여 카드 높이를 맞춘다 */
    max-height: 42px;
    overflow: hidden;
}

.gal-meta {
    display: block;
    margin-top: 8px;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
}

.gal-meta span + span:before { content: " · "; }

.post-head .tag { margin-bottom: 8px; }

@media (max-width: 768px) {
    .gallery { margin: 0 -5px; }
    .gal-item { -ms-flex: 1 1 150px; flex: 1 1 150px; max-width: none; margin: 0 5px 10px; }
    .gal-body { padding: 10px 12px 12px; }
    .gal-title { font-size: 13.5px; max-height: 39px; }
}

/* ==========================================================================
   VAN 통계 — 엑셀 올리기 고급 설정
   ========================================================================== */

.adv-toggle {
    display: block;
    width: 100%;
    text-align: left;
    margin-top: 14px;
    padding: 9px 12px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
    font-size: 12.5px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
}

.adv-toggle:hover { background-color: #f5f6f7; background-color: var(--line-soft); }
.adv-caret { float: right; font-size: 10px; }

.adv-box { display: none; padding: 14px 2px 0; }
.adv-box.open { display: block; }
.adv-box .field { margin-bottom: 12px; }
.adv-box .input { padding: 9px 11px; font-size: 13px; min-height: 0; }

.upload-box .form-row { margin: 0 -6px; }
.upload-box .form-row > .field { -ms-flex: 1 1 130px; flex: 1 1 130px; margin: 0 6px 14px; }

/* 표 숫자를 오른쪽 정렬한 상태에서 자릿수가 맞아 보이도록 */
.van-table .num { font-variant-numeric: tabular-nums; letter-spacing: -0.2px; }
.total-row .num { font-variant-numeric: tabular-nums; }

/* 엑셀 올리기 진단 문구처럼 긴 안내가 들어올 때 */
.alert {
    line-height: 1.75;
    word-break: break-all;
    white-space: pre-wrap;
}

/* 코드 관리 — 순서 입력칸 */
.sort-input {
    width: 80px;
    text-align: center;
    margin: 0 auto;
}

.table td .sort-input { display: inline-block; }

/* VAN 통계 — 월 이동 버튼 */
.btn-nav {
    padding: 10px 12px;
    min-width: 38px;
    font-weight: 700;
    color: #999999;
    color: var(--text-mute);
}

.search-form .month-input { -ms-flex: 0 0 180px; flex: 0 0 180px; }

@media (max-width: 768px) {
    .btn-nav { display: inline-block; width: auto; min-width: 56px; margin-right: 6px; }
    .search-form .month-input { display: inline-block; width: auto; -ms-flex: none; flex: none; }
}

/* ==========================================================================
   VAN 통계 — 칸 머리글 정렬
   ========================================================================== */

.sort-link {
    display: block;
    color: #999999;
    color: var(--text-mute);
    white-space: nowrap;
}

.sort-link:hover { color: #03c75a; color: var(--green); text-decoration: none; }

.sort-mark {
    display: inline-block;
    margin-left: 3px;
    font-size: 9px;
    vertical-align: 1px;
    color: #018a3e;
    color: var(--green-deep);
}

/* 정렬 중인 칸을 알아보기 쉽게 */
.van-table thead th:has(.sort-mark) {
    background-color: #e8f8ef;
    background-color: var(--green-soft);
}

.van-table thead th:has(.sort-mark) .sort-link {
    color: #018a3e;
    color: var(--green-deep);
    font-weight: 700;
}

/* ==========================================================================
   거래처 창 — 용지 발송
   ========================================================================== */

.paper-block {
    margin-top: 24px;
    padding-top: 20px;
    border-top: 1px solid #e5e5e5;
    border-top: 1px solid var(--line);
}

.paper-sum {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -4px 12px;
}

.paper-cell {
    -ms-flex: 1 1 100px;
    flex: 1 1 100px;
    margin: 0 4px 8px;
    padding: 11px 12px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: center;
    background-color: #ffffff;
    background-color: var(--surface);
}

.paper-cell .pk {
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
    font-weight: 600;
}

.paper-cell .pv {
    font-size: 18px;
    font-weight: 700;
    letter-spacing: -0.4px;
    margin-top: 3px;
    color: #222222;
    color: var(--text);
}

/* 보낼 차례가 있으면 눈에 띄게 */
.paper-cell.due {
    border-color: #3182f6;
    border-color: var(--blue);
    background-color: #ebf3fe;
    background-color: var(--blue-soft);
}

.paper-cell.due .pk,
.paper-cell.due .pv { color: #3182f6; color: var(--blue); }

.paper-note {
    font-size: 12.5px;
    line-height: 1.7;
    margin: 0 0 14px;
    padding: 10px 13px;
    border-radius: 6px;
    background-color: #ebf3fe;
    background-color: var(--blue-soft);
    color: #1b64da;
    color: var(--blue);
}

.paper-note.muted {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #999999;
    color: var(--text-mute);
}

.paper-btn { width: 100%; padding: 11px; }

/* ---------------------------------------------------------------- 발송 이력 */
.ship-list { list-style: none; margin: 0; padding: 0; }

.ship-list li {
    padding: 11px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.ship-list li:last-child { border-bottom: none; }
.ship-top:after { content: ""; display: block; clear: both; }

.ship-date {
    float: left;
    font-size: 13.5px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.ship-box {
    float: left;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 4px;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
    font-size: 11.5px;
    font-weight: 700;
    line-height: 18px;
}

.ship-del {
    float: right;
    border: none;
    background: none;
    padding: 0;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
}

.ship-del:hover { color: #f04452; color: var(--red); text-decoration: underline; }

.ship-body {
    margin-top: 5px;
    font-size: 12.5px;
    color: #666666;
    color: var(--text-sub);
    word-break: break-all;
}

.ship-at { margin-left: 8px; color: #999999; color: var(--text-mute); }

.ship-memo {
    margin-top: 5px;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
    word-break: break-all;
}

.ship-none {
    text-align: center;
    padding: 26px 0;
    color: #999999;
    color: var(--text-mute);
    font-size: 13px;
}

/* ==========================================================================
   용지 발송 — 무상지급 / 박스 종류
   ========================================================================== */

.free-badge {
    display: inline-block;
    margin-left: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
    font-size: 11.5px;
    font-weight: 700;
    vertical-align: 3px;
}

.free-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    padding: 11px 13px;
    margin-bottom: 12px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
}

.free-text {
    -ms-flex: 1 1 180px;
    flex: 1 1 180px;
    font-size: 12.5px;
    line-height: 1.6;
    color: #666666;
    color: var(--text-sub);
    padding-right: 10px;
}

.free-text.muted { color: #999999; color: var(--text-mute); }
.free-row .btn { -ms-flex: 0 0 auto; flex: 0 0 auto; white-space: nowrap; }

/* 박스 종류 · 수량이 한 줄에 들어가도록 */
.paper-block .form-row > .field { -ms-flex: 1 1 110px; flex: 1 1 110px; }

.ship-box { white-space: nowrap; }

@media (max-width: 768px) {
    .free-row { display: block; }
    .free-text { display: block; padding: 0 0 10px; }
    .free-row .btn { display: block; width: 100%; }
}

/* ==========================================================================
   용지 발송 — 요약 칸 (박스 수량 표시)
   ========================================================================== */

/* 글자가 들어가는 칸은 폭을 더 준다 */
.paper-cell.paper-wide {
    -ms-flex: 1 1 160px;
    flex: 1 1 160px;
}

.paper-cell .pv.small {
    font-size: 13.5px;
    font-weight: 700;
    line-height: 1.5;
    letter-spacing: -0.2px;
}

.paper-cell .pv.small.muted {
    font-weight: 500;
    color: #999999;
    color: var(--text-mute);
}

.paper-cell .pv .dot {
    margin: 0 4px;
    font-weight: 500;
    color: #999999;
    color: var(--text-mute);
}

/* 롤 수를 작게 덧붙인다 */
.paper-cell .pd {
    margin-top: 3px;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

.paper-cell.due .pv .dot,
.paper-cell.due .pd { color: #3182f6; color: var(--blue); }

/* ==========================================================================
   거래처 정보 — 한 줄 배치
   ========================================================================== */

.client-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: end;
    align-items: flex-end;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -5px;
}

.client-row > .field {
    -ms-flex: 1 1 140px;
    flex: 1 1 140px;
    margin: 0 5px 12px;
}

/* 버튼 칸은 글자 길이만큼만 차지한다 */
.client-row > .field-btn {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
}

.client-row .btn { white-space: nowrap; }

@media (max-width: 768px) {
    .client-row { display: block; margin: 0; }
    .client-row > .field { display: block; margin: 0 0 12px; }
    .client-row .btn { width: 100%; }
}

/* ==========================================================================
   여러 선을 겹쳐 그리는 차트
   ========================================================================== */

.chart-legend {
    margin-bottom: 10px;
    line-height: 2;
}

.legend-item {
    display: inline-block;
    margin-right: 16px;
    font-size: 12.5px;
    color: #666666;
    color: var(--text-sub);
    white-space: nowrap;
}

.legend-dot {
    display: inline-block;
    width: 9px;
    height: 9px;
    border-radius: 50%;
    margin-right: 5px;
    vertical-align: 0;
}

.legend-item b {
    margin-left: 5px;
    color: #222222;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

/* 선이 여러 개면 조금 가늘게 그려야 겹칠 때 알아보기 쉽다 */
.chart-legend + .chart-svg .chart-line { stroke-width: 2; }

.chip-help { margin: -8px 0 14px; }

/* 백분율 칸이 소수 한 자리까지 들어가도록 */
.bar-pct { -ms-flex: 0 0 52px; flex: 0 0 52px; }

/* ==========================================================================
   VAN사별 건수 — 세 칸씩 늘어놓기
   ========================================================================== */

.van-grid {
    list-style: none;
    margin: 0 -8px;
    padding: 0;
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.van-grid > li {
    -ms-flex: 1 1 30%;
    flex: 1 1 30%;
    max-width: 33.33%;
    margin: 0 0 16px;
    padding: 0 8px;
}

.vg-top:after { content: ""; display: block; clear: both; }

.vg-name {
    float: left;
    font-size: 13px;
    font-weight: 600;
    color: #666666;
    color: var(--text-sub);
}

.vg-value {
    float: right;
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
    font-variant-numeric: tabular-nums;
}

.vg-bottom {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-top: 7px;
}

.vg-bar {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    display: block;
    height: 6px;
    border-radius: 999px;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    overflow: hidden;
}

.vg-fill {
    display: block;
    height: 100%;
    border-radius: 999px;
    background-color: #03c75a;
    background-color: var(--green);
    min-width: 2px;
}

/* 막대와 백분율 사이를 넉넉히 띄운다 */
.vg-pct {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin-left: 14px;
    min-width: 46px;
    text-align: right;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
    font-variant-numeric: tabular-nums;
}

.vg-none {
    -ms-flex: 1 1 100%;
    flex: 1 1 100%;
    max-width: 100%;
    text-align: center;
    padding: 34px 0;
    color: #999999;
    color: var(--text-mute);
}

/* 분포 막대 전반의 숫자 간격도 함께 넓힌다 */
.bar-track { margin: 0 14px; }
.bar-pct { margin-right: 10px; }

@media (max-width: 1100px) {
    .van-grid > li { -ms-flex: 1 1 46%; flex: 1 1 46%; max-width: 50%; }
}

@media (max-width: 700px) {
    .van-grid { margin: 0; }
    .van-grid > li { -ms-flex: 1 1 100%; flex: 1 1 100%; max-width: 100%; padding: 0; }
}


/* ==========================================================================
   설치 일정 목록 — 좁은 화면에서 표를 카드로 바꾼다

   넓은 화면에서는 지금 그대로 표로 보이고,
   900px 이하에서만 한 줄이 카드 한 장이 된다.
   가로 스크롤 없이 한눈에 읽으라고 만든 규칙이다.

   이 블록은 style.css 의 맨 끝에 붙여야 한다.
   같은 굵기의 규칙은 나중에 적힌 쪽이 이기기 때문이다.
   ========================================================================== */

@media (max-width: 900px) {

    /* 가로 스크롤을 없앤다. 위쪽에 있던 min-width 를 덮어쓴다. */
    .table-scroll { overflow-x: visible; }
    .sched-table  { min-width: 0; width: 100%; }

    .sched-table thead { display: none; }

    /* 한 줄 = 카드 한 장 */
    .sched-table tbody tr {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        border: 1px solid #e5e5e5;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        background-color: #ffffff;
        background-color: var(--surface);
    }

    /* 카드에서는 마우스를 올려도 색이 변하지 않게 둔다 */
    .sched-table tbody tr:hover {
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .sched-table tbody tr:last-child td { border-bottom: none; }

    /* 항목 한 줄: 왼쪽에 이름표, 오른쪽에 값 */
    .sched-table tbody td {
        display: block;
        position: relative;
        padding: 5px 0 5px 88px;
        border-bottom: none;
        text-align: right;
        min-height: 24px;
        white-space: normal;
        word-break: break-all;
    }

    .sched-table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 5px;
        width: 82px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    /* 상호는 카드의 제목처럼 맨 위에 크게 놓는다 */
    .sched-table tbody td.cell-shop {
        -ms-flex-order: -1;
        order: -1;
        padding: 0 0 10px;
        margin-bottom: 8px;
        text-align: left;
        font-size: 16px;
        border-bottom: 1px solid #f5f6f7;
        border-bottom: 1px solid var(--line-soft);
    }
    .sched-table tbody td.cell-shop::before { content: none; }
    .sched-table tbody td.cell-shop .sub { margin-top: 3px; }

    /* 방문시간은 왼쪽 정렬 지정이 걸려 있어 따로 되돌린다 */
    .sched-table tbody td.left { text-align: right; }
    .sched-table tbody td.cell-shop.left { text-align: left; }

    /* 목록이 비었을 때 */
    .sched-table tbody td.empty {
        padding: 40px 0;
        text-align: center;
    }
    .sched-table tbody td.empty::before { content: none; }
}

/* ==========================================================================
   설치 일정 목록 — 날짜 이동 칸
   ========================================================================== */

.search-form .date-input { -ms-flex: 0 0 180px; flex: 0 0 180px; }

@media (max-width: 768px) {
    .search-form .date-input {
        display: inline-block;
        width: auto;
        -ms-flex: none;
        flex: none;
    }
}


/* ==========================================================================
   VAN 통계 — 월별 흐름 그래프의 눈금 숫자를 오른쪽으로 옮긴다

   chart-y-right 는 여러 선을 겹쳐 그리는 multi 차트에만 붙어 있다.
   일정 통계의 차트는 지금처럼 왼쪽에 그대로 둔다.
   ========================================================================== */

/* 눈금 자리를 넉넉히 잡는다. 결제 건수는 자릿수가 길어 42px 로는 모자란다. */
.chart-y-right { padding-left: 0; padding-right: 66px; }

.chart-y-right .chart-yaxis {
    left: auto;
    right: 0;
    width: 64px;
}

/* 숫자를 오른쪽에 맞춘다. 왼쪽에 맞추면 자릿수가 길 때 그래프 밖으로 밀려난다. */
.chart-y-right .chart-yaxis span {
    left: auto;
    right: 6px;
    text-align: right;
    white-space: nowrap;
}

.chart-y-right .chart-xaxis { left: 0; right: 66px; }


/* ==========================================================================
   VAN DB — 목록을 한 화면 안에서 굴린다

   거래처가 1500곳이 넘어 페이지 자체가 길어지면
   맨 아래 합계 줄을 보려고 끝까지 내려가야 한다.
   표가 들어 있는 상자에만 스크롤을 주고,
   머리글과 합계 줄은 제자리에 붙여 둔다.
   ========================================================================== */

.van-scroll {
    max-height: calc(100vh - 330px);
    min-height: 320px;
    overflow: auto;
}

/* 머리글 첫 줄 */
.van-table thead tr:first-child th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;
    height: 44px;
    box-sizing: border-box;
    background-color: #fafafa;
    background-color: var(--thead);
}

/* 머리글 아래 검색 칸.
   위 칸 높이(44px)만큼 내려서 붙인다. */
.van-table thead tr.filter-row td {
    position: -webkit-sticky;
    position: sticky;
    top: 44px;
    z-index: 3;
    background-color: #fafafa;
    background-color: var(--thead);
}

/* 맨 아래 합계 줄.
   border-collapse 를 쓰면 붙어 있는 칸의 테두리가 사라지므로
   테두리 대신 안쪽 그림자로 선을 그린다. */
.van-table tfoot td.num,
.van-table tfoot td {
    position: -webkit-sticky;
    position: sticky;
    bottom: 0;
    z-index: 4;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #222222;
    color: var(--text);
    -webkit-box-shadow: inset 0 2px 0 #03c75a;
    box-shadow: inset 0 2px 0 #03c75a;
    box-shadow: inset 0 2px 0 var(--green);
}

/* 합계 숫자는 다른 값과 구분되게 파란색으로 */
.van-table tfoot td.num.sum {
    color: #018a3e;
    color: var(--green-deep);
    font-size: 15px;
}

/* '합계' 글자 */
.van-table tfoot td.left {
    letter-spacing: 0.3px;
    color: #666666;
    color: var(--text-sub);
}

/* 화면이 짧을 때는 표 높이를 조금 더 확보한다 */
@media (max-height: 760px) {
    .van-scroll { max-height: calc(100vh - 260px); }
}


/* ==========================================================================
   결재문서
   ========================================================================== */

/* ---------------------------------------------------------------- 문서함 탭 */
.chip-badge {
    display: inline-block;
    min-width: 18px;
    margin-left: 6px;
    padding: 1px 6px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 700;
    line-height: 16px;
    text-align: center;
    background-color: #f04452;
    background-color: var(--red);
    color: #ffffff;
}

.appr-types .chip { margin-bottom: 6px; }

/* ---------------------------------------------------------------- 진행 상태 */
.appr-badge { font-size: 12px; font-weight: 600; }

.appr-badge.st-PENDING {
    color: #3182f6;
    color: var(--blue);
    border-color: #3182f6;
    border-color: var(--blue);
}

.appr-badge.st-APPROVED {
    color: #12b886;
    border-color: #12b886;
}

.appr-badge.st-REJECTED {
    color: #f04452;
    color: var(--red);
    border-color: #f04452;
    border-color: var(--red);
}

.appr-badge.st-CANCELED {
    color: #999999;
    color: var(--text-mute);
    border-color: #e5e5e5;
    border-color: var(--line);
}

/* ---------------------------------------------------------------- 결재란 */
.appr-sign-card { padding: 18px 20px; }

.appr-sign {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.sign-box {
    width: 108px;
    padding: 10px 8px;
    margin-right: 10px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    text-align: center;
    background-color: #ffffff;
    background-color: var(--surface);
}

.sign-box .sign-role {
    font-size: 11.5px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
}

.sign-box .sign-name {
    margin-top: 4px;
    font-size: 15px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.sign-box .sign-date {
    margin-top: 2px;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

/* 결재가 끝난 칸은 결과에 따라 테두리 색을 바꾼다 */
.sign-box.sign-APPROVED { border-color: #12b886; }
.sign-box.sign-REJECTED { border-color: #f04452; border-color: var(--red); }

.sign-arrow {
    margin-right: 10px;
    font-size: 18px;
    color: #999999;
    color: var(--text-mute);
}

.sign-status { margin-left: 4px; }

.appr-refs {
    margin-top: 14px;
    padding-top: 12px;
    border-top: 1px solid #f5f6f7;
    border-top: 1px solid var(--line-soft);
    font-size: 13px;
    color: #666666;
    color: var(--text-sub);
}

.appr-refs span {
    color: #222222;
    color: var(--text);
    font-weight: 500;
}

/* ---------------------------------------------------------------- 문서 본문 */
.appr-title {
    margin: 0 0 16px;
    font-size: 20px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.appr-info { margin-bottom: 18px; }

.appr-info th {
    width: 110px;
    padding: 11px 12px;
    text-align: left;
    font-size: 13px;
    font-weight: 600;
    background-color: #fafafa;
    background-color: var(--thead);
    color: #999999;
    color: var(--text-mute);
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.appr-info td {
    padding: 11px 12px;
    text-align: left;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.appr-content {
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.75;
    font-size: 14.5px;
    color: #666666;
    color: var(--text-sub);
}

/* ---------------------------------------------------------------- 좁은 화면 */
@media (max-width: 900px) {

    .table-scroll { overflow-x: visible; }
    .appr-table { min-width: 0; width: 100%; }
    .appr-table thead { display: none; }

    .appr-table tbody tr {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        border: 1px solid #e5e5e5;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .appr-table tbody tr:hover {
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .appr-table tbody td {
        display: block;
        position: relative;
        padding: 5px 0 5px 88px;
        border-bottom: none;
        text-align: right;
        min-height: 24px;
        white-space: normal;
        word-break: break-all;
    }

    .appr-table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 5px;
        width: 82px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    .appr-table tbody td.cell-shop {
        -ms-flex-order: -1;
        order: -1;
        padding: 0 0 10px;
        margin-bottom: 8px;
        text-align: left;
        font-size: 16px;
        border-bottom: 1px solid #f5f6f7;
        border-bottom: 1px solid var(--line-soft);
    }
    .appr-table tbody td.cell-shop::before { content: none; }

    .appr-table tbody td.left { text-align: right; }
    .appr-table tbody td.cell-shop.left { text-align: left; }

    .appr-table tbody td.empty { padding: 40px 0; text-align: center; }
    .appr-table tbody td.empty::before { content: none; }

    .sign-box { width: 96px; }
    .appr-info th { width: 88px; font-size: 12.5px; }
}


/* ==========================================================================
   결재선 고르기 — 라디오 · 체크 목록
   ========================================================================== */

.pick-list {
    list-style: none;
    margin: 0 0 8px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    overflow: hidden;
}

.pick-list li + li {
    border-top: 1px solid #f5f6f7;
    border-top: 1px solid var(--line-soft);
}

.pick {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 11px 14px;
    cursor: pointer;
}

.pick input { margin-right: 10px; }

.pick-name {
    font-weight: 600;
    color: #222222;
    color: var(--text);
}

.pick-sub {
    margin-left: 8px;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
}

/* 늘 들어가는 참조인은 고를 수 없으므로 체크 모양만 그린다 */
.pick-fixed .pick { cursor: default; }

.pick-check {
    display: inline-block;
    width: 16px;
    margin-right: 10px;
    text-align: center;
    color: #018a3e;
    color: var(--green-deep);
    font-weight: 700;
}

.pick-tag {
    margin-left: auto;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
}

.pick-none {
    padding: 18px 14px;
    font-size: 13px;
    color: #999999;
    color: var(--text-mute);
}

/* ==========================================================================
   메뉴 관리
   ========================================================================== */

.menu-table .menu-move { white-space: nowrap; }
.menu-table .menu-move .btn { margin: 0 1px; padding: 5px 8px; min-width: 30px; }

.menu-table .menu-name-input { width: 100%; }

/* 묶음 제목 줄은 배경을 옅게 깔아 구분한다 */
.menu-group-row td {
    background-color: #fafafa;
    background-color: var(--thead);
}

.menu-mark {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #999999;
    color: var(--text-mute);
    vertical-align: middle;
}

@media (max-width: 768px) {
    .menu-table .menu-move .btn { min-width: 26px; padding: 4px 6px; }
}


/* ==========================================================================
   코드 관리 — 결재선 설정
   ========================================================================== */

.appr-set { margin-bottom: 20px; }

.appr-set-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 8px;
}

.appr-set-title {
    font-size: 14px;
    font-weight: 600;
    color: #222222;
    color: var(--text);
}

.appr-set-code {
    margin-left: 8px;
    padding: 2px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #999999;
    color: var(--text-mute);
}

/* 고를 사람이 많을 때를 대비해 높이를 제한하고 안에서 굴린다 */
.appr-set .pick-list {
    max-height: 260px;
    overflow-y: auto;
}


/* ==========================================================================
   검색 줄 — 날짜 이동 묶음과 단추 묶음

   좁은 화면에서 칸이 하나씩 세로로 쌓이면 간격이 어긋나 보인다.
   '< 날짜 >' 를 한 줄, 단추를 한 줄로 묶어 폭을 고르게 나눈다.
   ========================================================================== */

.month-nav,
.search-actions {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.month-nav > *,
.search-actions > * { margin-right: 6px; }

.month-nav > *:last-child,
.search-actions > *:last-child { margin-right: 0; }

.month-nav .month-input,
.month-nav .date-input {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    width: 180px;
    margin-right: 6px;
}

@media (max-width: 768px) {

    /* 두 묶음은 각각 한 줄을 차지한다 */
    .search-form > .month-nav,
    .search-form > .search-actions {
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        margin: 0 0 8px;
    }

    /* 화살표는 좁게, 날짜 칸이 남는 폭을 모두 차지한다 */
    .month-nav .btn-nav {
        -ms-flex: 0 0 48px;
        flex: 0 0 48px;
        width: auto;
        min-width: 0;
        margin: 0 6px 0 0;
        padding-left: 0;
        padding-right: 0;
    }

    .month-nav .btn-nav:last-child { margin: 0 0 0 6px; }

    .month-nav .input,
    .month-nav .month-input,
    .month-nav .date-input {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        width: auto;
        margin: 0;
    }

    /* 단추는 남는 폭을 고르게 나눠 갖는다 */
    .search-actions > * {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        width: auto;
        margin: 0 0 0 6px;
        padding-left: 0;
        padding-right: 0;
        text-align: center;
    }

    .search-actions > *:first-child { margin-left: 0; }
}

/* 본문을 바꿔 끼우는 동안 살짝 흐려 둔다. 바뀌는 중이라는 것만 알리면 된다. */
.main.swapping { opacity: 0.55; }


/* ==========================================================================
   휴가
   ========================================================================== */

/* 휴가신청서 위쪽에 붙는 남은 일수 띠 */
.leave-box {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    padding: 12px 16px;
    margin-bottom: 16px;
    border-radius: 6px;
    background-color: #ebf3fe;
    background-color: var(--blue-soft);
    font-size: 13px;
    color: #666666;
    color: var(--text-sub);
}

.leave-year {
    font-weight: 700;
    margin-right: 14px;
    color: #222222;
    color: var(--text);
}

.leave-item { margin-right: 16px; }
.leave-item b { margin-left: 5px; font-size: 15px; }

.leave-item.remain b {
    color: #3182f6;
    color: var(--blue);
}

/* 휴가 관리 표 */
.leave-table .input-xs { width: 100%; }
.leave-table td.over { color: #f04452; color: var(--red); }

.rule-table th, .rule-table td { padding: 10px 12px; }

@media (max-width: 900px) {
    .leave-table { min-width: 0; }
    .leave-box { display: block; }
    .leave-item { display: inline-block; margin: 2px 14px 2px 0; }
}


/* ==========================================================================
   휴가 관리 — 단추 줄 간격

   .post-foot 는 위쪽에만 여백이 있어 아래 카드와 딱 붙는다.
   표와 규칙 카드 사이에 놓이는 이 줄만 아래 여백을 맞춰 준다.
   ========================================================================== */

.leave-foot { padding-top: 16px; padding-bottom: 2px; margin-bottom: 16px; }


/* ==========================================================================
   홈 달력

   누가 휴가이고 누가 설치를 나가는지 한 칸에 모아 본다.
   ========================================================================== */

.cal-card { padding: 18px 20px 20px; }

.cal-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
}

.cal-head .section-title { margin: 0; }

.cal-nav { margin-left: auto; white-space: nowrap; }
.cal-nav .btn { margin-left: 4px; }

.cal-legend { margin-bottom: 12px; }

.cal-tag {
    display: inline-block;
    margin-right: 10px;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 600;
}

.cal-tag.leave,
.cal-item.leave {
    background-color: #ebf3fe;
    background-color: var(--blue-soft);
    color: #3182f6;
    color: var(--blue);
}

.cal-tag.install,
.cal-item.install {
    background-color: #e9f9f2;
    color: #0a9c6c;
}

/* 좁은 화면에서는 달력을 옆으로 굴려 본다. 칸을 더 줄이면 이름이 안 보인다. */
.cal-scroll { width: 100%; overflow-x: auto; }

.cal {
    width: 100%;
    min-width: 700px;
    border-collapse: collapse;
    table-layout: fixed;
}

.cal th {
    padding: 8px 6px;
    font-size: 12.5px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
    border-bottom: 1px solid #e5e5e5;
    border-bottom: 1px solid var(--line);
}

.cal th.sun { color: #f04452; color: var(--red); }
.cal th.sat { color: #3182f6; color: var(--blue); }

.cal td {
    height: 104px;
    vertical-align: top;
    padding: 6px;
    border: 1px solid #f5f6f7;
    border: 1px solid var(--line-soft);
}

.cal td.weekend {
    background-color: #fafafa;
    background-color: var(--thead);
}

/* 지난달·다음달 날짜는 흐리게 둔다 */
.cal td.out { opacity: 0.4; }

.cal td.today {
    box-shadow: inset 0 0 0 2px #03c75a;
    box-shadow: inset 0 0 0 2px var(--green);
}

.cal-date {
    font-size: 12.5px;
    font-weight: 600;
    margin-bottom: 5px;
    color: #666666;
    color: var(--text-sub);
}

.cal td.today .cal-date {
    color: #018a3e;
    color: var(--green-deep);
}

.cal-items { line-height: 1.4; }

.cal-item {
    display: block;
    margin-bottom: 3px;
    padding: 3px 7px;
    border-radius: 4px;
    font-size: 11.5px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.cal-item b { font-weight: 700; }
.cal-item span { margin-left: 4px; opacity: 0.85; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .cal-tag.install,
html:not([data-theme="light"]) .cal-item.install { background-color: #16302a; color: #37d39b; }
}

@media (max-width: 768px) {
    .cal-card { padding: 16px 14px 18px; }
    .cal-head { display: block; }
    .cal-nav { display: block; margin: 10px 0 0; }
    .cal-nav .btn { margin: 0 6px 0 0; }
    .cal td { height: 88px; }
}


/* ==========================================================================
   코드 관리 — 단추 줄 간격과 이름 입력칸
   ========================================================================== */

/* .post-foot 은 위쪽에만 여백이 있어 아래 카드와 붙는다.
   표와 다음 카드 사이에 놓이는 이 줄만 아래 여백을 맞춘다. */
.code-foot { padding-top: 16px; padding-bottom: 2px; margin-bottom: 16px; }

.code-name-input { width: 100%; }


/* ==========================================================================
   코드 관리 — 색 고르는 칸
   ========================================================================== */

.color-input {
    width: 46px;
    height: 32px;
    padding: 2px;
    cursor: pointer;
}


/* ==========================================================================
   홈 달력 — 읽기 쉽게 다시

   한 칸에 일정이 열 줄씩 늘어서면 아무것도 읽히지 않는다.
   사람 단위로 묶어 '이름 3건' 한 줄로 줄이고,
   넘치는 것은 '외 N' 으로 접는다. 자세한 내용은 칸 설명으로 본다.
   ========================================================================== */

.cal-hint {
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

.cal-tag.duty,
.cal-duty {
    background-color: #fff1e8;
    color: #e8590c;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .cal-tag.duty,
html:not([data-theme="light"]) .cal-duty { background-color: #3a2415; color: #ff922b; }
}

.cal-top {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 5px;
}

.cal-top .cal-date { margin: 0; }

.cal-item { cursor: default; }
.cal-item span { margin-left: 4px; opacity: 0.85; }

.cal-more {
    display: block;
    margin-top: 2px;
    font-size: 11px;
    color: #999999;
    color: var(--text-mute);
}

.cal td { height: 116px; }

@media (max-width: 768px) {
    .cal td { height: 116px; }
}


/* ==========================================================================
   홈 — 결재 현황
   ========================================================================== */

.sec-more {
    margin-left: auto;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
}

.sec-more:hover { color: #03c75a; color: var(--green); }

.appr-sum { list-style: none; margin: 0; padding: 0; }

.appr-sum li + li {
    border-top: 1px solid #f5f6f7;
    border-top: 1px solid var(--line-soft);
}

.appr-sum a {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 2px;
    color: #666666;
    color: var(--text-sub);
}

.appr-sum a:hover .nm { color: #03c75a; color: var(--green); }

.appr-sum .nm { font-size: 14px; }

.appr-sum .ct {
    margin-left: auto;
    min-width: 30px;
    padding: 2px 10px;
    border-radius: 999px;
    text-align: center;
    font-size: 13px;
    font-weight: 700;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #999999;
    color: var(--text-mute);
}

/* 내 손이 필요한 건 눈에 띄게 */
.appr-sum .ct.hot {
    background-color: #f04452;
    background-color: var(--red);
    color: #ffffff;
}

.appr-sum .ct.warm {
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
}


/* ==========================================================================
   홈 달력 — 당직 줄과 누르는 칸
   ========================================================================== */

/* 당직은 날짜 아래 한 줄을 통째로 쓴다.
   이름 옆에 번호까지 한 줄로 밀어 넣으면 칸이 좁아 잘린다. */
.cal-duty {
    display: block;
    margin: 0 0 5px;
    padding: 3px 6px;
    border-radius: 4px;
    font-size: 11px;
    line-height: 1.45;
    background-color: #fff1e8;
    color: #e8590c;
}

.cal-duty-tag {
    font-size: 10px;
    font-weight: 700;
    opacity: 0.8;
    margin-right: 3px;
}

.cal-duty b { font-weight: 700; }

.cal-duty i {
    display: block;
    font-style: normal;
    font-size: 10.5px;
    opacity: 0.9;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .cal-duty { background-color: #3a2415; color: #ff922b; }
}

/* 칸을 누르면 그날 내용이 열린다 */
.cal tbody td { cursor: pointer; }
.cal tbody td:hover { background-color: #fafafa; background-color: var(--thead); }
.cal tbody td.out:hover { background-color: transparent; }

.cal td { height: 132px; }


/* ==========================================================================
   하루치 옆창
   ========================================================================== */

.day-duty {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 20px;
    padding: 11px 14px;
    border-radius: 6px;
    background-color: #fff1e8;
    color: #e8590c;
    font-size: 13.5px;
}

.day-duty b { margin-right: 8px; font-weight: 700; }

.day-duty-tag {
    margin-right: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: #e8590c;
    color: #ffffff;
    font-size: 11px;
    font-weight: 700;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .day-duty { background-color: #3a2415; color: #ff922b; }
    html:not([data-theme="light"]) .day-duty-tag { background-color: #ff922b; color: #1a1a1a; }
}

.day-sec { margin-bottom: 20px; }

.day-list { list-style: none; margin: 0; padding: 0; }

.day-list li {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 9px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.day-list li:last-child { border-bottom: none; }

.day-list .dot {
    -ms-flex: 0 0 8px;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 10px;
    border-radius: 50%;
}

.day-list .dot.leave   { background-color: #3182f6; background-color: var(--blue); }
.day-list .dot.install { background-color: #0a9c6c; }

.day-item { -ms-flex: 1 1 auto; flex: 1 1 auto; min-width: 0; }

.day-item b {
    display: block;
    font-weight: 600;
    color: #222222;
    color: var(--text);
    word-break: break-all;
}

.day-sub {
    margin-top: 2px;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
}

.day-list .btn { margin-left: 10px; -ms-flex: 0 0 auto; flex: 0 0 auto; }

.day-none {
    padding: 40px 0;
    text-align: center;
    color: #999999;
    color: var(--text-mute);
    font-size: 13.5px;
}

.day-foot {
    margin-top: 18px;
    padding-top: 14px;
    border-top: 1px solid #f5f6f7;
    border-top: 1px solid var(--line-soft);
}

/* 당직 지정 칸의 물결표 */
.tilde {
    margin: 0 8px;
    color: #999999;
    color: var(--text-mute);
}


/* ==========================================================================
   카드 머리글 — 제목과 오른쪽 링크

   .sec-head 는 띄움(float) 으로 짜여 있어 margin-left:auto 가 듣지 않는다.
   오른쪽 링크도 sec-hint 처럼 오른쪽으로 띄운다.
   ========================================================================== */

.sec-more {
    float: right;
    margin-left: 12px;
    line-height: 1.6;
}


/* ==========================================================================
   나란히 놓인 카드는 높이를 맞춘다

   글이 적은 쪽이 짧게 끝나면 두 칸의 아래가 어긋나 보인다.
   줄 안에서 가장 높은 카드에 맞춰 늘린다.
   ========================================================================== */

.grid {
    -ms-flex-align: stretch;
    align-items: stretch;
}

.grid > .card { display: block; }


/* ==========================================================================
   하루치 옆창 — 일정 상세 창과 같은 결로
   ========================================================================== */

.day-panel .detail-body { padding-top: 18px; }

.day-count {
    display: inline-block;
    min-width: 20px;
    margin-left: 6px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #666666;
    color: var(--text-sub);
}


/* ==========================================================================
   로고 — 누르면 홈으로
   ========================================================================== */

.side-logo, .mobile-title { display: block; }
.side-logo:hover b, .mobile-title:hover b { opacity: 0.85; }


/* ==========================================================================
   일정 상세 — 주소
   ========================================================================== */



/* ==========================================================================
   부서 관리
   ========================================================================== */

.dept-table .dept-name-input { width: 100%; }
.dept-table tr.off td { opacity: 0.5; }

.dept-indent {
    color: #999999;
    color: var(--text-mute);
    margin-right: 2px;
}

.chip-badge.grey {
    background-color: #999999;
    background-color: var(--text-mute);
}


/* ==========================================================================
   조직도

   맨 위에 회사를 두고 그 아래로 팀을 편다.
   팀 상자 안에 소속 인원을 함께 적어 한눈에 보이게 한다.
   ========================================================================== */

.org-card { padding: 20px 22px 24px; }

.org { text-align: center; }

.org-root { display: inline-block; }

.org-box {
    display: inline-block;
    min-width: 132px;
    padding: 11px 18px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
    text-align: center;
}

.org-box:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
}

.org-box .nm {
    display: block;
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.org-box .ct {
    display: block;
    margin-top: 2px;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

/* 회사 상자는 조금 더 도드라지게 */
.org-box.root {
    background-color: #03c75a;
    background-color: var(--green);
    border-color: #03c75a;
    border-color: var(--green);
}

.org-box.root .nm,
.org-box.root .ct { color: #ffffff; }

/* 회사와 팀을 잇는 세로선 */
.org-line {
    width: 1px;
    height: 22px;
    margin: 0 auto;
    background-color: #e5e5e5;
    background-color: var(--line);
}

.org-teams {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-pack: center;
    justify-content: center;
    -ms-flex-align: start;
    align-items: flex-start;
    margin: 0 -8px;
}

.org-team {
    -ms-flex: 0 1 216px;
    flex: 0 1 216px;
    margin: 0 8px 16px;
    position: relative;
    padding-top: 14px;
}

/* 팀마다 위로 뻗는 짧은 선 */
.org-team:before {
    content: "";
    position: absolute;
    top: 0;
    left: 50%;
    width: 1px;
    height: 14px;
    background-color: #e5e5e5;
    background-color: var(--line);
}

.org-team .org-box { display: block; width: 100%; }

.org-members {
    list-style: none;
    margin: 8px 0 0;
    padding: 10px 12px;
    border: 1px solid #f5f6f7;
    border: 1px solid var(--line-soft);
    border-radius: 6px;
    text-align: left;
    background-color: #fafafa;
    background-color: var(--thead);
}

.org-members li {
    padding: 4px 0;
    font-size: 13px;
    color: #666666;
    color: var(--text-sub);
}

.org-members .who {
    font-weight: 600;
    color: #222222;
    color: var(--text);
}

.org-members .pos {
    margin-left: 6px;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

.org-empty {
    margin-top: 8px;
    padding: 14px 0;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
}

@media (max-width: 768px) {
    .org-team { -ms-flex: 0 1 100%; flex: 0 1 100%; }
    .org-card { padding: 16px 14px 18px; }
}


/* ==========================================================================
   쪽 옮기기 — 앞뒤 화살표와 줄임표
   ========================================================================== */

.paging .pg-edge {
    min-width: 32px;
    font-weight: 600;
}

.paging .pg-gap {
    display: inline-block;
    padding: 0 4px;
    color: #999999;
    color: var(--text-mute);
}

.paging .pg-info {
    display: inline-block;
    margin-left: 10px;
    font-size: 12.5px;
    color: #999999;
    color: var(--text-mute);
}


/* ==========================================================================
   일정 상세 — 기본 정보의 주소 줄
   ========================================================================== */

/* 주소는 길어질 수 있으므로 한 줄에 가두지 않는다 */
.dl-row.addr-row { -ms-flex-align: start; align-items: flex-start; }
.dl-row.addr-row .dl-val { white-space: normal; word-break: break-all; line-height: 1.5; }

.addr-map {
    margin-left: 6px;
    font-size: 11.5px;
    white-space: nowrap;
    color: #018a3e;
    color: var(--green-deep);
}

.addr-map:hover { text-decoration: underline; }


/* ==========================================================================
   하루치 옆창 — 담당자별 묶음
   ========================================================================== */

.day-group { margin-bottom: 16px; }
.day-group:last-child { margin-bottom: 0; }

.day-group-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 6px 0;
}

.day-group-head b {
    font-size: 14px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.day-group-head .cnt {
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    background-color: #e9f9f2;
    color: #0a9c6c;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .day-group-head .cnt { background-color: #16302a; color: #37d39b; }
}

/* 묶음 안쪽은 한 칸 들여 쓴다 */
.day-group .day-list { padding-left: 18px; }


/* ==========================================================================
   업무 지시 현황
   ========================================================================== */

.wo-head { margin-bottom: 14px; }
.wo-head .badge { margin-right: 6px; }

.wo-badge { font-size: 12px; font-weight: 600; }
.wo-badge.sm { font-size: 11px; padding: 1px 8px; }

/* 접수 — 아직 손대지 않은 것 */
.wo-badge.st-OPEN {
    color: #3182f6;
    color: var(--blue);
    border-color: #3182f6;
    border-color: var(--blue);
}

/* 진행중 */
.wo-badge.st-DOING {
    background-color: #fff1e8;
    border-color: #e8590c;
    color: #e8590c;
}

/* 완료 */
.wo-badge.st-DONE {
    background-color: #e9f9f2;
    border-color: #0a9c6c;
    color: #0a9c6c;
}

/* 보류 */
.wo-badge.st-HOLD {
    color: #999999;
    color: var(--text-mute);
    border-color: #e5e5e5;
    border-color: var(--line);
}

/* 마감이 지난 건 */
.wo-badge.over,
.wo-table td.over,
.appr-info td.over {
    color: #f04452;
    color: var(--red);
    border-color: #f04452;
    border-color: var(--red);
}

.wo-table .sub.over {
    color: #f04452;
    color: var(--red);
    font-weight: 600;
}

/* ---------------------------------------------------------------- 처리 기록 */
.wo-log { list-style: none; margin: 0; padding: 0; }

.wo-log li {
    padding: 14px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.wo-log li:last-child { border-bottom: none; }

.wo-log li.none {
    padding: 34px 0;
    text-align: center;
    color: #999999;
    color: var(--text-mute);
    font-size: 13.5px;
}

.wo-log-top {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.wo-log-top b {
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.wo-log-top .badge { margin-left: 8px; }

.wo-log-top .at {
    margin-left: auto;
    font-size: 12px;
    color: #999999;
    color: var(--text-mute);
}

.wo-log-body {
    margin-top: 6px;
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.7;
    font-size: 14px;
    color: #666666;
    color: var(--text-sub);
}

@media (max-width: 900px) {
    .wo-table { min-width: 0; }
}

/* 좁은 화면에서는 업무 지시 목록도 카드로 바꾼다 */
@media (max-width: 900px) {

    .wo-table { min-width: 0; width: 100%; }
    .wo-table thead { display: none; }

    .wo-table tbody tr {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        border: 1px solid #e5e5e5;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .wo-table tbody tr:hover {
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .wo-table tbody td {
        display: block;
        position: relative;
        padding: 5px 0 5px 88px;
        border-bottom: none;
        text-align: right;
        min-height: 24px;
        white-space: normal;
        word-break: break-all;
    }

    .wo-table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 5px;
        width: 82px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    .wo-table tbody td.cell-shop {
        -ms-flex-order: -1;
        order: -1;
        padding: 0 0 10px;
        margin-bottom: 8px;
        text-align: left;
        font-size: 16px;
        border-bottom: 1px solid #f5f6f7;
        border-bottom: 1px solid var(--line-soft);
    }
    .wo-table tbody td.cell-shop::before { content: none; }

    .wo-table tbody td.left { text-align: right; }
    .wo-table tbody td.cell-shop.left { text-align: left; }

    .wo-table tbody td.empty { padding: 40px 0; text-align: center; }
    .wo-table tbody td.empty::before { content: none; }
}


/* ==========================================================================
   업무 지시 — 받는 곳 고르기
   ========================================================================== */

/* 부서 한 줄, 직원 한 줄.
   칸 안에서 굴리지 않고 자리가 모자라면 아래로 넘긴다.
   스무 명 남짓이라 한눈에 다 보이는 편이 고르기 쉽다. */
.target-block { margin-bottom: 16px; }
.target-block:last-child { margin-bottom: 0; }

.target-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -3px;
}

.pick-chip {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 3px 6px;
    padding: 7px 13px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: #ffffff;
    background-color: var(--surface);
    font-size: 13.5px;
    cursor: pointer;
}

.pick-chip:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
}

.pick-chip input { margin-right: 7px; }

.pick-chip span {
    font-weight: 600;
    color: #222222;
    color: var(--text);
}

.pick-chip i {
    font-style: normal;
    margin-left: 6px;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

/* 고른 것은 한눈에 보이게 */
.pick-chip:has(input:checked) {
    border-color: #018a3e;
    border-color: var(--green-deep);
    background-color: #e8f8ef;
    background-color: var(--green-soft);
}

.target-grid .pick-none {
    padding: 8px 3px;
    font-size: 13px;
    color: #999999;
    color: var(--text-mute);
}

/* 상세 화면에 늘어놓는 받는 곳 */
.tg {
    display: inline-block;
    margin: 2px 5px 2px 0;
    padding: 2px 10px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 600;
}

.tg.dept {
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
}

.tg.emp {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #666666;
    color: var(--text-sub);
}

/* 처리 기록에 딸린 파일 */
.wo-log-files {
    list-style: none;
    margin: 8px 0 0;
    padding: 0;
}

.wo-log-files li { padding: 2px 0; font-size: 13px; }

.wo-log-files a {
    color: #018a3e;
    color: var(--green-deep);
}

.wo-log-files a:hover { text-decoration: underline; }

/* 조직도 최상위 상자에 적는 이름 */
.org-box.root .ct { font-size: 12.5px; font-weight: 600; }


/* ==========================================================================
   코드 관리 — 색을 눌러서 고른다

   팔레트를 여는 대신 미리 정해 둔 색을 늘어놓는다.
   고를 수 있는 색이 제한되면 화면 전체의 색이 제멋대로 흐트러지지 않는다.
   ========================================================================== */

.swatch-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 0 -2px;
}

.swatch-row.text { margin-top: 6px; }

.swatch { margin: 0 2px 4px; cursor: pointer; }

/* 진짜 동그라미는 감추고 색칠한 네모만 보여 준다 */
.swatch input {
    position: absolute;
    opacity: 0;
    width: 0;
    height: 0;
}

.swatch span {
    display: block;
    width: 22px;
    height: 22px;
    border-radius: 4px;
    border: 2px solid transparent;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.08) inset;
}

.swatch.text span {
    width: auto;
    min-width: 30px;
    padding: 0 7px;
    font-size: 12px;
    font-weight: 700;
    line-height: 22px;
    text-align: center;
}

/* 고른 색에는 테두리를 둘러 표시한다 */
.swatch input:checked + span {
    border-color: #222222;
    border-color: var(--text);
}


/* ==========================================================================
   코드 관리 — 색판으로 고르기

   늘어놓는 방식은 고를 수 있는 색이 열두 가지뿐이었다.
   글쓰기 화면에서 쓰는 색판을 그대로 가져와 단추 하나로 접어 둔다.
   펼친 색판(.ed-pal · .ed-dot)은 글쓰기 쪽 것을 같이 쓴다.

   배지를 하나 띄워 두어, 고른 색이 실제로 어떻게 보이는지
   저장하기 전에 바로 알 수 있게 한다.
   ========================================================================== */

/*
   간격은 왼쪽 여백으로만 준다.
   오른쪽 여백을 쓰면 마지막 단추 뒤에 빈 자리가 남아 끝이 들쭉날쭉해진다.
   (IE11 에는 gap 이 없어 여백으로 대신한다)
*/
.cpick {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/*
   목록 표 안에서는 오른쪽 끝에 맞춰 세운다.

   항목마다 이름 길이가 달라 왼쪽에 붙여 두면 단추 자리가 줄마다 어긋난다.
   오른쪽에 맞추면 단추 두 개가 어느 줄에서나 같은 자리에 선다.
   아래 "항목 추가" 쪽은 입력칸들과 함께 왼쪽에 서야 하므로 그대로 둔다.
*/
.table .cpick {
    -ms-flex-pack: end;
    justify-content: flex-end;
}

/* 미리보기 배지. 이름이 길어도 칸을 밀어내지 않게 줄여 둔다. */
.cpick .cpick-prev {
    max-width: 92px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.cpick-one {
    position: relative;
    display: inline-block;
    margin-left: 8px;
}

.cpick-btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 36px;
    height: 32px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 4px;
    background-color: #ffffff;
    background-color: var(--surface);
    cursor: pointer;
}

.cpick-btn:hover {
    border-color: #03c75a;
    border-color: var(--green);
}

.cpick-ch {
    font-size: 11px;
    line-height: 13px;
    color: #666666;
    color: var(--text-sub);
}

/* 지금 고른 색을 알려 주는 띠.
   흰색을 골랐을 때 흰 바탕에 묻히지 않게 테두리를 얇게 두른다. */
.cpick-bar {
    display: block;
    width: 20px;
    height: 4px;
    margin-top: 2px;
    border-radius: 2px;
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18) inset;
}

/*
   색판이 든 카드는 넘치는 것을 자르지 않는다.

   .card 는 모서리를 둥글게 자르려고 overflow 를 숨겨 두었는데,
   그대로 두면 아래로 펼친 색판이 카드 끝에서 잘려 반만 보인다.
   색판을 쓰는 카드에만 이 표를 붙인다.
*/
.card-pal { overflow: visible; }

/* 색판이 표 오른쪽 끝에서 잘리지 않게 오른쪽에 붙여 편다 */
.cpick-one .ed-pal {
    left: auto;
    right: 0;
    top: 36px;
}

/*
   좁은 화면.

   칸이 좁아 그대로 두면 배지와 단추 둘이 제각각 줄을 넘어
   어떤 줄은 두 줄, 어떤 줄은 세 줄이 된다.

   그래서 배지 바로 뒤에 높이 없는 빈 칸을 하나 끼워
   줄을 일부러 한 번만 끊는다.
   배지는 윗줄, 단추 둘은 아랫줄에 나란히 선다.
   차례(order)로 자리를 잡아 주어야 빈 칸이 맨 뒤로 밀리지 않는다.
*/
@media (max-width: 900px) {

    .table .cpick .cpick-prev {
        -ms-flex-order: 0;
        order: 0;
        margin-bottom: 6px;
    }

    .table .cpick::after {
        content: "";
        -ms-flex: 0 0 100%;
        flex: 0 0 100%;
        height: 0;
        -ms-flex-order: 1;
        order: 1;
    }

    .table .cpick .cpick-one {
        -ms-flex-order: 2;
        order: 2;
    }
}


/* ==========================================================================
   설치 일정 — 좁은 화면

   세로로 길어지지 않게 검색 칸과 목록 카드를 촘촘히 놓는다.
   ========================================================================== */

/* 넓은 화면에서는 예전처럼 한 줄에 늘어선다 */
.search-trio {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.search-trio > * { margin-right: 6px; }
.search-trio > *:last-child { margin-right: 0; }
.search-trio > input[type="text"] { min-width: 200px; }

@media (max-width: 900px) {

    /* 엑셀 단추는 감춘다. 파일을 다루기에 화면이 너무 좁다. */
    .sched-excel { display: none; }

    /* 검색 칸 셋을 한 줄에 나눠 담는다 */
    .search-form > .search-trio {
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        margin: 0 0 8px;
    }

    .search-trio > * {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-width: 0;
        width: auto;
        margin: 0 0 0 6px;
        padding-left: 8px;
        padding-right: 8px;
        font-size: 13px;
    }

    .search-trio > *:first-child { margin-left: 0; -ms-flex: 1.4 1 0; flex: 1.4 1 0; }

    /* ------------------------------------------------------------------
       목록 카드를 세 줄로 접는다.
         1줄  상호 (지역·주소 포함) + 설치/AS
         2줄  날짜 · 방문시간 · 담당자
         3줄  연락처 · VAN · 장비
       ------------------------------------------------------------------ */
    .sched-table tbody tr {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 1fr 1fr;
        gap: 8px 6px;
        padding: 12px 14px;
    }

    .sched-table tbody td {
        padding: 0;
        min-height: 0;
        text-align: left;
        border-bottom: none;
    }

    /* 이름표를 값 위에 작게 올린다. 칸이 좁아 옆에 두면 값이 밀린다. */
    .sched-table tbody td::before {
        position: static;
        display: block;
        width: auto;
        margin-bottom: 1px;
        font-size: 10.5px;
        font-weight: 600;
    }

    .sched-table tbody td.cell-shop {
        grid-column: 1 / 3;
        grid-row: 1;
        padding: 0;
        margin: 0;
        border-bottom: none;
        font-size: 15px;
    }

    .sched-table tbody td.cell-type {
        grid-column: 3;
        grid-row: 1;
        text-align: right;
    }
    .sched-table tbody td.cell-type::before { content: none; }

    .sched-table tbody td.cell-date    { grid-column: 1; grid-row: 2; }
    .sched-table tbody td.cell-time    { grid-column: 2; grid-row: 2; }
    .sched-table tbody td.cell-manager { grid-column: 3; grid-row: 2; }

    .sched-table tbody td.cell-phone   { grid-column: 1; grid-row: 3; }
    .sched-table tbody td.cell-van     { grid-column: 2; grid-row: 3; }
    .sched-table tbody td.cell-device  { grid-column: 3; grid-row: 3; }

    /* 지역은 상호 아래 작은 글씨로 들어가므로 따로 두지 않는다 */
    .sched-table tbody td.cell-region { display: none; }

    .sched-table tbody td.empty {
        grid-column: 1 / 4;
        padding: 36px 0;
        text-align: center;
    }
}

/* 상호 아래에 붙는 지역과 주소. 넓은 화면에서는 감춘다. */
.shop-where { display: none; }

@media (max-width: 900px) {
    .shop-where {
        display: block;
        margin-top: 3px;
        font-size: 11.5px;
        font-weight: 400;
        line-height: 1.45;
        color: #999999;
        color: var(--text-mute);
        white-space: normal;
        word-break: break-all;
    }
}


/* ==========================================================================
   설치 일정 좁은 화면 — 앞선 규칙에 밀린 것들을 바로잡는다

   같은 굵기의 규칙이 여러 개면 더 자세히 짚은 쪽이 이긴다.
   위에서 짧게 적은 규칙들이 예전 규칙에 밀리고 있어 다시 적는다.
   ========================================================================== */

@media (max-width: 900px) {

    /* 엑셀 단추.
       .page-head .right > * 쪽이 더 자세히 짚어서 display:block 이 이겼다. */
    .page-head .right .sched-excel { display: none; }

    /* 검색칸.
       .search-trio > input[type="text"] 의 min-width 200px 가 남아 있어
       세 칸이 상자 밖으로 삐져나갔다. */
    .search-trio > input[type="text"] { min-width: 0; }

    .search-trio > * {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-width: 0;
        max-width: 100%;
    }

    /* 방문시간 칸.
       카드 규칙의 .sched-table tbody td.left 가 오른쪽 정렬로 잡고 있었다. */
    .sched-table tbody td.left,
    .sched-table tbody td.cell-shop.left,
    .sched-table tbody td.cell-time { text-align: left; }

    /* 값이 길면 칸 안에서 접는다 */
    .sched-table tbody td {
        word-break: break-all;
        line-height: 1.45;
    }

    .sched-table tbody td.cell-shop { line-height: 1.35; }

    /* 배지는 오른쪽 위에 */
    .sched-table tbody td.cell-type {
        text-align: right;
        -ms-flex-item-align: start;
        align-self: start;
    }

    .sched-table tbody td.cell-type .badge { font-size: 11.5px; }

    /* 값이 비어 '미정' 으로만 찬 칸은 연하게 */
    .sched-table tbody td.muted { color: #999999; color: var(--text-mute); }
}


/* ==========================================================================
   설치 일정 — 휴대폰 화면 정리
   ========================================================================== */

@media (max-width: 900px) {

    /* 검색칸 셋을 한 줄에 우겨넣으면 상호 칸이 사라진다.
       고르는 칸은 안에 든 글자 길이만큼 자리를 붙들고 놓지 않기 때문이다.
       상호는 한 줄을 다 쓰고, 고르는 칸 둘이 아래 한 줄을 나눠 갖는다. */
    .search-form > .search-trio {
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 0 8px;
    }

    .search-trio > input[type="text"] {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        min-width: 0;
        margin: 0 0 6px;
    }

    .search-trio > select {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        min-width: 0;
        width: 0;            /* 안에 든 글자에 붙들리지 않게 한다 */
        margin: 0 0 0 6px;
    }

    .search-trio > select:first-of-type { margin-left: 0; }
}


/* ==========================================================================
   일정 상세 창 — 휴대폰에서 두 칸으로

   한 줄에 한 항목씩 쌓으면 화면이 끝없이 길어진다.
   이름표를 값 위에 올리고 두 항목씩 나란히 놓는다.
   주소만 길어질 수 있어 한 줄을 다 쓴다.
   ========================================================================== */

@media (max-width: 768px) {

    .info-col {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 14px;
    }

    .info-col .col-label { grid-column: 1 / 3; }

    .info-col .dl-row,
    .info-col .dl-row.tight {
        display: block;
        padding: 7px 0;
        border-bottom: 1px solid #f5f6f7;
        border-bottom: 1px solid var(--line-soft);
    }

    .info-col .dl-key {
        margin-bottom: 2px;
        font-size: 11.5px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    .info-col .dl-val.plain { font-size: 14px; }

    /* 주소는 길어지므로 한 줄을 다 쓴다 */
    .info-col .dl-row.addr-row { grid-column: 1 / 3; }

    /* 접수사항 · 특이사항 상자가 화면 절반을 차지하지 않게 한다 */
    .detail-text {
        min-height: 0;
        max-height: 140px;
    }

    .detail-cols + .detail-cols .detail-col { margin-bottom: 14px; }

    /* 창 머리글이 내용에 파묻히지 않게 위에 고정한다 */
    .detail-head {
        position: -webkit-sticky;
        position: sticky;
        top: 0;
        z-index: 2;
        background-color: #ffffff;
        background-color: var(--surface);
    }
}


/* ==========================================================================
   좁은 화면 마무리 — 빈 공간 줄이기
   ========================================================================== */

@media (max-width: 900px) {

    /* 엑셀 단추는 감춘다. VAN DB · CMS 통계도 같다. */
    .page-head .right.excel-actions,
    .page-head .right .excel-actions { display: none; }

    /* 고르는 칸 둘이 한 줄을 반씩 나눠 갖게 한다 */
    .search-form > .search-trio { width: 100%; }

    /* 요약 상자는 두 칸씩 놓는다.
       한 줄에 하나씩 쌓으면 숫자 넉 장을 보려고 한참 내려야 한다. */
    .kpi-row {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        margin: 0 -4px 12px;
    }

    .kpi-row .card,
    .kpi-row .card + .card,
    .kpi {
        -ms-flex: 1 1 calc(50% - 8px);
        flex: 1 1 calc(50% - 8px);
        display: block;
        width: auto;
        min-width: 0;
        margin: 0 4px 8px;
        padding: 13px 14px;
    }

    .kpi-label { font-size: 12px; }
    .kpi-value { font-size: 22px; margin-top: 2px; }
    .kpi-diff { font-size: 11px; padding: 2px 8px; }
}

@media (max-width: 768px) {

    /* 상세 창 위쪽 '바로 수정' 칸도 두 줄로 접는다 */
    .edit-col {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 12px;
    }

    .edit-col .col-label,
    .edit-col .quick-actions,
    .edit-col .quick-note { grid-column: 1 / 3; }

    .edit-col .dl-row {
        display: block;
        padding: 6px 0;
        border-bottom: none;
    }

    .edit-col .dl-key {
        margin-bottom: 3px;
        font-size: 11.5px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    .edit-col .input-sm {
        width: 100%;
        font-size: 15px;
        padding: 9px 10px;
    }

    .edit-col select.input-sm { height: 40px; }

    .edit-col .quick-actions { margin-top: 10px; }
}


/* ==========================================================================
   검색 줄 — 고르는 칸이 폭을 다 쓰게

   .search-form select.input 에 170px 고정이 걸려 있어
   앞서 적은 규칙이 밀렸다. 한 단계 더 짚어서 덮어쓴다.
   ========================================================================== */

@media (max-width: 900px) {

    .search-form .search-trio { width: 100%; }

    /*
       고르기 칸은 바꿔 그린 모양(.bsel)일 때도 있고
       원래 모양(select)일 때도 있다.

       바꿔 그리는 일은 넓은 화면에서만 하는데,
       창을 넓게 열어 두었다가 좁히면 바꿔 그린 채로 남는다.
       그때 select 만 짚어 둔 규칙은 비껴가 칸이 좁은 채로 남아 있었다.
       둘 다 같이 짚는다.
    */
    .search-form .search-trio > select.input,
    .search-form .search-trio > .bsel {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
        max-width: none;
    }

    .search-form .search-trio > .bsel { display: block; }
    .search-form .search-trio > .bsel .bsel-btn { width: 100%; }

    .search-form .search-trio > input.input {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        width: 100%;
        min-width: 0;
    }
}


/* ==========================================================================
   상세 창 '바로 수정' — 칸 높이 맞추기

   날짜 칸과 고르는 칸은 기본 높이가 서로 달라 나란히 두면 어긋나 보인다.
   높이를 같은 값으로 못 박는다.
   ========================================================================== */

@media (max-width: 768px) {
    .edit-col .input-sm,
    .edit-col input.input-sm,
    .edit-col select.input-sm {
        height: 42px;
        box-sizing: border-box;
        padding: 9px 10px;
        line-height: 1.2;
    }
}


/* ==========================================================================
   일정 추가 — 프리셋 접기
   ========================================================================== */

.preset-head { position: relative; }

.preset-fold {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 12px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
}

.preset-fold:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
    color: #018a3e;
    color: var(--green-deep);
}

.preset-card.folded .preset-grid { display: none; }
.preset-card.folded .preset-head .ds { display: none; }
.preset-card.folded { padding-bottom: 14px; }


/* ==========================================================================
   왼쪽 메뉴 접기

   표가 넓은 화면에서 가로 폭이 아쉬울 때 쓴다.
   접으면 아이콘만 남기고, 마우스를 올리면 이름이 잠깐 펼쳐진다.
   ========================================================================== */

.side-top {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: start;
    align-items: flex-start;
}

.side-top .side-logo { -ms-flex: 1 1 auto; flex: 1 1 auto; }

.side-fold {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    margin: 2px 0 0;
    padding: 4px;
    border: none;
    background: transparent;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
    border-radius: 4px;
}

.side-fold:hover {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
    color: #018a3e;
    color: var(--green-deep);
}

body.side-folded .side {
    width: 62px;
    -ms-flex: 0 0 62px;
    flex: 0 0 62px;
    padding-left: 8px;
    padding-right: 8px;
    overflow: hidden;
}

body.side-folded .side-logo span,
body.side-folded .side-user,
body.side-folded .side-util,
body.side-folded .side-group,
body.side-folded .side-menu a span { display: none; }

body.side-folded .side-logo {
    padding: 4px 0 14px;
    text-align: center;
    font-size: 15px;
}

body.side-folded .side-menu a {
    -ms-flex-pack: center;
    justify-content: center;
    padding-left: 0;
    padding-right: 0;
}

/* 접기 단추는 방향을 뒤집어 '펼치기' 로 보이게 한다 */
body.side-folded .side-fold svg {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
}

body.side-folded .side-top { -ms-flex-pack: center; justify-content: center; }

/* 좁은 화면에서는 원래 쓰던 여닫기가 있으므로 이 단추를 감춘다 */
@media (max-width: 900px) {
    .side-fold { display: none; }
    body.side-folded .side {
        width: auto;
        -ms-flex: none;
        flex: none;
        padding-left: 14px;
        padding-right: 14px;
    }
    body.side-folded .side-logo span,
    body.side-folded .side-user,
    body.side-folded .side-util,
    body.side-folded .side-group,
    body.side-folded .side-menu a span { display: block; }
    body.side-folded .side-menu a { -ms-flex-pack: start; justify-content: flex-start; }
}


/* ==========================================================================
   가로 막대 목록 — 이름 칸을 더 넓게

   'ASP및유지보수' 처럼 긴 이름이 접히거나 잘리고 있었다.
   이름이 먼저고 막대는 남는 자리를 쓰면 된다.
   ========================================================================== */

.bar-list .bar-name {
    -ms-flex: 0 0 auto;
    flex: 0 0 auto;
    max-width: 62%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bar-list .bar-track {
    -ms-flex: 1 1 30px;
    flex: 1 1 30px;
    min-width: 30px;
}

@media (max-width: 768px) {
    .bar-list .bar-name { max-width: 58%; }
    .bar-list .bar-track { margin: 0 8px; }
}


/* ==========================================================================
   조직도 / 연락처 — 좁은 화면에서는 카드로

   사번부터 이메일까지 아홉 칸을 옆으로 굴려 보는 것은 불편하다.
   이름을 크게 올리고 연락처만 아래 붙이는 카드로 바꾼다.
   ========================================================================== */

/* 이름 옆 직급·직책은 넓은 화면에서는 따로 칸이 있으므로 감춘다 */
.emp-title { display: none; }

@media (max-width: 900px) {

    .emp-table { min-width: 0; width: 100%; }
    .emp-table thead { display: none; }

    .emp-table tbody tr {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 6px 10px;
        border: 1px solid #e5e5e5;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 10px;
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .emp-table tbody tr:hover {
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .emp-table tbody td {
        display: block;
        padding: 0;
        border-bottom: none;
        text-align: left;
        min-height: 0;
        word-break: break-all;
    }

    .emp-table tbody td::before { content: none; }

    /* 이름 — 첫 줄 왼쪽. 직급·직책을 옆에 작게 붙인다. */
    .emp-table tbody td.cell-name {
        grid-column: 1;
        grid-row: 1;
        font-size: 16px;
    }

    .emp-table .emp-title {
        display: inline;
        margin-left: 6px;
        font-size: 12px;
        font-weight: 400;
        color: #999999;
        color: var(--text-mute);
    }

    /* 상태 표시는 첫 줄 오른쪽 */
    .emp-table tbody td.cell-status {
        grid-column: 2;
        grid-row: 1;
        text-align: right;
    }

    /* 부서 — 이름 아래 */
    .emp-table tbody td.cell-dept {
        grid-column: 1 / 3;
        grid-row: 2;
        color: #666666;
        color: var(--text-sub);
    }

    /* 연락처 묶음 */
    .emp-table tbody td.cell-mobile,
    .emp-table tbody td.cell-email {
        grid-column: 1 / 3;
        font-size: 13px;
        color: #666666;
        color: var(--text-sub);
    }

    .emp-table tbody td.cell-mobile { grid-row: 3; }
    .emp-table tbody td.cell-email  { grid-row: 4; }

    /* 관리 단추는 맨 아래 한 줄 */
    .emp-table tbody td.cell-act {
        grid-column: 1 / 3;
        margin-top: 4px;
    }

    /* 카드에서는 보여 줄 만큼만 남긴다 */
    .emp-table tbody td.cell-no,
    .emp-table tbody td.cell-pos,
    .emp-table tbody td.cell-duty,
    .emp-table tbody td.cell-ext { display: none; }

    .emp-table tbody td.empty {
        grid-column: 1 / 3;
        padding: 36px 0;
        text-align: center;
    }
}


/* ==========================================================================
   왼쪽 메뉴를 접었을 때 — 글자 대신 화살표만

   좁아진 폭에 글자를 밀어 넣으면 잘려 보인다.
   로고를 통째로 감추고 펼치는 단추만 가운데 둔다.
   ========================================================================== */

body.side-folded .side-logo { display: none; }

body.side-folded .side-top {
    -ms-flex-pack: center;
    justify-content: center;
    margin-bottom: 14px;
}

body.side-folded .side-fold {
    margin: 0;
    padding: 8px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
}

@media (max-width: 900px) {
    body.side-folded .side-logo { display: block; }
    body.side-folded .side-top {
        -ms-flex-pack: justify;
        justify-content: space-between;
        margin-bottom: 0;
    }
}


/* ==========================================================================
   결재선 — 한 줄에 늘어놓기

   한 사람씩 세로로 쌓으면 인원이 늘수록 화면이 끝없이 길어진다.
   업무 지시의 받는 곳과 같은 모양으로 맞춘다.
   ========================================================================== */

.pick-chip.fixed {
    cursor: default;
    border-color: #018a3e;
    border-color: var(--green-deep);
    background-color: #e8f8ef;
    background-color: var(--green-soft);
}

.pick-chip .pick-check {
    margin-right: 6px;
    font-weight: 700;
    color: #018a3e;
    color: var(--green-deep);
}

.pick-chip .pick-tag {
    margin-left: 7px;
    padding: 1px 7px;
    border-radius: 999px;
    font-size: 10.5px;
    font-weight: 700;
    background-color: #03c75a;
    background-color: var(--green);
    color: #ffffff;
}

/* 동그라미·네모 칸이 글자와 같은 줄 가운데에 놓이게 한다 */
.pick-chip input {
    margin: 0 7px 0 0;
    vertical-align: middle;
}

.pick-chip span,
.pick-chip i,
.pick-chip b { line-height: 1.2; }


/* ==========================================================================
   결재 양식 관리
   ========================================================================== */

.form-card { margin-bottom: 14px; }

.form-text {
    width: 100%;
    font-family: inherit;
    font-size: 13.5px;
    line-height: 1.7;
    white-space: pre;
    overflow-x: auto;
}


/* ==========================================================================
   휴가 잔여 띠 — 숫자 크기 맞추기

   연도만 띠의 기본 글자 크기를 그대로 써서 옆 숫자보다 작아 보였다.
   같은 크기로 맞춘다.
   ========================================================================== */

.leave-box .leave-year {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}

.leave-box .leave-item b {
    font-size: 15px;
    font-weight: 700;
    line-height: 1.2;
}


/* ==========================================================================
   결재문서 작성 — 문서 종류 칸 높이 줄이기

   칩 한 줄만 있어도 상자가 필요 이상으로 높았다.
   칩 아래 여백과 상자 안쪽 여백을 함께 줄인다.
   ========================================================================== */

.appr-types {
    margin-bottom: -6px;
    line-height: 1;
}

.appr-types .chip {
    margin: 0 6px 6px 0;
    padding: 7px 14px;
    font-size: 13px;
}

/* 이 상자는 고르는 칸 하나뿐이라 아래 여백을 줄여도 답답하지 않다 */
.card .sec-head + .appr-types { margin-top: 2px; }


/* ==========================================================================
   설치 일정 — 날짜 미정 목록

   날짜별로 넘겨 보는 목록에 섞여 있으면 어느 날을 보든 맨 위에 붙어
   그날 실제로 나가야 할 일정을 가린다. 그래서 따로 떼어 놓는다.
   ========================================================================== */

.undated-card { margin-bottom: 14px; }

.undated-card .card-head { position: relative; padding-right: 92px; }

.undated-count {
    display: inline-block;
    margin-left: 6px;
    padding: 1px 9px;
    border-radius: 999px;
    font-size: 12px;
    font-weight: 700;
    background-color: #fff1e8;
    color: #e8590c;
    vertical-align: middle;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .undated-count { background-color: #3a2415; color: #ff922b; }
}

.undated-fold {
    position: absolute;
    top: 16px;
    right: 18px;
    padding: 5px 14px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
}

.undated-fold:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
    color: #018a3e;
    color: var(--green-deep);
}

.undated-card.folded .undated-body { display: none; }
.undated-card.folded .card-head .ds { display: none; }

/*
   접으면 안내 줄이 사라져 머리줄이 한 줄만 남는다.

   펼쳤을 때는 위쪽 여백이 아래보다 넓어야 제목이 맨 위에 붙어 보이는데,
   한 줄만 남으면 그 차이 때문에 글자가 위로 치우친다.
   접었을 때만 위아래 여백을 같게 두고 단추도 한가운데에 놓는다.
*/
.undated-card.folded { padding-bottom: 0; }

/*
   여백으로 가운데를 맞추면 값이 조금만 어긋나도 글자가 위아래로 치우친다.
   한 줄짜리 띠로 두고 높이를 정한 뒤 그 안에서 가운데를 맞춘다.
*/
.undated-card.folded .card-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: 52px;
    padding-top: 0;
    padding-bottom: 0;
    border-bottom: none;
}

.undated-card.folded .card-head .tt {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.undated-card.folded .undated-fold {
    top: 50%;
    margin-top: 0;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media (max-width: 900px) {
    .undated-card.folded .card-head { min-height: 46px; }
}

@media (max-width: 900px) {
    .undated-card .card-head { padding-right: 78px; }
    .undated-fold { top: 14px; right: 14px; padding: 4px 11px; }
}


/* ==========================================================================
   차트 — 값 보기

   점이 3px 라 정확히 올려야만 값이 보였다.
   눈에 안 보이는 넓은 자리를 겹쳐 두어 그 언저리만 가도 값이 뜨게 한다.
   ========================================================================== */

.chart-hit {
    fill: transparent;
    stroke: none;
    cursor: pointer;
}

/* 값을 보는 중인 점은 조금 키워 어디를 짚었는지 알려 준다 */
.chart-dots g:hover circle:first-child { r: 5; }


/* ==========================================================================
   결재문서 작성 — 문서 종류와 내용 사이 여백
   ========================================================================== */

.appr-form { display: block; margin-top: 14px; }
.appr-form > .card:first-child { margin-top: 0; }


/* ==========================================================================
   겹쳐 그리는 차트 — 눈금이 선과 맞도록

   선 이름 줄(범례)이 그림 위에 놓이는데, 눈금은 바깥 상자 맨 위를 기준으로
   붙어 있어 범례 높이만큼 위로 밀렸다. 그림과 눈금을 한 상자에 함께 넣어
   같은 자리를 기준으로 삼게 한다.
   ========================================================================== */

.chart-multi { position: relative; }

.chart-plot {
    position: relative;
    padding: 4px 66px 26px 0;
}

.chart-plot .chart-svg { display: block; width: 100%; height: 220px; }

/* 눈금은 오른쪽에 둔다. 자릿수가 길어 왼쪽에 두면 그림이 밀린다. */
.chart-plot .chart-yaxis {
    left: auto;
    right: 0;
    top: 4px;
    width: 64px;
    height: 220px;
}

.chart-plot .chart-yaxis span {
    left: auto;
    right: 6px;
    text-align: right;
    white-space: nowrap;
}

.chart-plot .chart-xaxis {
    left: 0;
    right: 66px;
    bottom: 4px;
}

@media (max-width: 768px) {
    .chart-plot { padding-right: 56px; }
    .chart-plot .chart-yaxis { width: 54px; }
    .chart-plot .chart-xaxis { right: 56px; }
}


/* ==========================================================================
   홈 — 당직자 지정 접기
   ========================================================================== */

.duty-card .sec-head { position: relative; padding-right: 86px; }

.duty-fold {
    position: absolute;
    top: -2px;
    right: 0;
    padding: 5px 14px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: transparent;
    font-size: 12px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
}

.duty-fold:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
    color: #018a3e;
    color: var(--green-deep);
}

/* 평소에는 접어 두고, 펼쳤을 때만 보여 준다 */
.duty-card .duty-body { display: none; }
.duty-card.open .duty-body { display: block; }


/* ==========================================================================
   어두운 화면 — 손으로 켜고 끄기

   위쪽 규칙들은 기기 설정을 따른다.
   아래는 화면 오른쪽 위 단추로 직접 고른 경우에 쓴다.
   기기가 어둡게 되어 있어도 '밝게' 를 고르면 밝은 화면이 유지된다.
   ========================================================================== */

    html[data-theme="dark"] {
        --bg:          #1a1a1a;
        --surface:     #242424;
        --thead:       #2b2b2b;
        --row-hover:   #2b2b2b;
        --green:       #03c75a;
        --green-hover: #04dd66;
        --green-deep:  #35d47e;
        --green-soft:  #12301f;
        --on-green:    #ffffff;
        --blue:        #5596f7;
        --blue-hover:  #7cadf9;
        --blue-soft:   #1c2c45;
        --on-blue:     #ffffff;
        --text:        #eaeaea;
        --text-sub:    #b0b0b0;
        --text-mute:   #888888;
        --line:        #3a3a3a;
        --line-soft:   #2b2b2b;
        --red:         #ff6b73;
        --red-soft:    #33222a;
        --red-line:    #4d2f36;
        --focus:       rgba(3, 199, 90, 0.26);
    }


    html[data-theme="dark"] .total-row td { background-color: #2c2a1f; color: #eaeaea; }
    html[data-theme="dark"] .van-table .num.zero { color: #6a6a6a; }


    html[data-theme="dark"] .cal-tag.install,
html[data-theme="dark"] .cal-item.install { background-color: #16302a; color: #37d39b; }


    html[data-theme="dark"] .cal-tag.duty,
html[data-theme="dark"] .cal-duty { background-color: #3a2415; color: #ff922b; }


    html[data-theme="dark"] .cal-duty { background-color: #3a2415; color: #ff922b; }


    html[data-theme="dark"] .day-duty { background-color: #3a2415; color: #ff922b; }
    html[data-theme="dark"] .day-duty-tag { background-color: #ff922b; color: #1a1a1a; }


    html[data-theme="dark"] .day-group-head .cnt { background-color: #16302a; color: #37d39b; }


    html[data-theme="dark"] .undated-count { background-color: #3a2415; color: #ff922b; }


/* ==========================================================================
   화면 밝기 단추
   ========================================================================== */

.side-user { position: relative; padding-right: 40px; }

.theme-btn {
    position: absolute;
    top: 50%;
    right: 10px;
    margin-top: -15px;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: transparent;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
    line-height: 1;
}

.theme-btn:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
    color: #018a3e;
    color: var(--green-deep);
}

.theme-btn svg { display: block; margin: 0 auto; }

/* 지금 어느 쪽인지에 따라 그림 하나만 보여 준다 */
.theme-btn .ico-moon { display: block; }
.theme-btn .ico-sun  { display: none; }

html[data-theme="dark"] .theme-btn .ico-moon { display: none; }
html[data-theme="dark"] .theme-btn .ico-sun  { display: block; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .theme-btn .ico-moon { display: none; }
    html:not([data-theme="light"]) .theme-btn .ico-sun  { display: block; }
}

html[data-theme="light"] .theme-btn .ico-moon { display: block; }
html[data-theme="light"] .theme-btn .ico-sun  { display: none; }

/* 메뉴를 접었을 때는 이름 칸이 사라지므로 단추도 함께 숨는다 */
body.side-folded .theme-btn { display: none; }


/* ==========================================================================
   조직도 — 이름 가운데 맞추기
   ========================================================================== */

.org-members { text-align: center; }
.org-members li { text-align: center; }


/* ==========================================================================
   배지 모양 고르기 칸

   브라우저 기본 고르기 칸은 펼쳤을 때 안쪽을 꾸밀 수 없어서
   단추와 목록으로 바꿔 그린다. 원래 칸은 감춰 두고 값만 그대로 옮긴다.
   ========================================================================== */

.bsel { position: relative; display: inline-block; vertical-align: middle; }

/*
   원래 고르기 칸.

   눈에만 안 보이게 하고 크기는 그대로 둔다.
   display:none 으로 감추면 '반드시 골라야 하는 칸' 을 비워 둔 채 저장할 때
   브라우저가 그 칸으로 데려가지 못해 아무 말 없이 멈춰 버린다.
   자리를 그대로 두면 안내 말풍선도 제자리에 뜬다.
*/
select.bsel-hidden {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    margin: 0;
    padding: 0;
    border: none;
    opacity: 0;
    pointer-events: none;
}

.bsel-btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    width: 100%;
    height: 38px;
    padding: 0 30px 0 10px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
    text-align: left;
    cursor: pointer;
    position: relative;
}

.bsel-btn:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
}

/* 오른쪽 꺾쇠 */
.bsel-btn:after {
    content: "";
    position: absolute;
    top: 50%;
    right: 12px;
    margin-top: -2px;
    width: 6px;
    height: 6px;
    border-right: 1.5px solid #999999;
    border-bottom: 1.5px solid #999999;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}

.bsel-tag {
    display: inline-block;
    max-width: 100%;
    padding: 3px 11px;
    border-radius: 999px;
    font-size: 12.5px;
    font-weight: 600;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* 색이 정해지지 않은 항목은 글자만 */
.bsel-tag.plain {
    padding: 0;
    font-weight: 400;
    font-size: 13.5px;
    color: #666666;
    color: var(--text-sub);
}

/* ---------------------------------------------------------------- 펼친 목록 */
/*
   항목을 한 줄에 하나씩 세우면 길게 늘어져 굴려야 한다.
   자리가 되는 만큼 옆으로 펴고, 넉 줄까지만 벌린다.
   그보다 넓히면 눈이 좌우로 너무 멀리 움직인다.
*/
.bsel-menu {
    display: none;
    position: absolute;
    top: calc(100% + 6px);
    left: 0;
    z-index: 40;
    padding: 6px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 8px;
    background-color: #ffffff;
    background-color: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
    max-height: 340px;
    overflow-y: auto;

    /* 굴림 막대도 화면 색에 맞춘다 */
    scrollbar-width: thin;
    scrollbar-color: #d6d6d6 transparent;
}

.bsel.open .bsel-menu {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

/* 넉 줄 = 항목 폭 104px + 사이 여백 */
.bsel-menu {
    width: -webkit-max-content;
    width: max-content;
    max-width: 452px;
    min-width: 100%;
}

.bsel-row {
    -ms-flex: 0 1 auto;
    flex: 0 1 auto;
    min-width: 104px;
    max-width: 100%;
    padding: 6px 8px;
    border: none;
    border-radius: 6px;
    background: transparent;
    text-align: center;
    cursor: pointer;
    white-space: nowrap;
}

/* ---------------------------------------------------------------- 굴림 막대 */
.bsel-menu::-webkit-scrollbar { width: 8px; }

.bsel-menu::-webkit-scrollbar-track {
    background: transparent;
}

.bsel-menu::-webkit-scrollbar-thumb {
    border-radius: 999px;
    background-color: #d6d6d6;
    border: 2px solid transparent;
    background-clip: padding-box;
}

.bsel-menu::-webkit-scrollbar-thumb:hover { background-color: #bbbbbb; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .bsel-menu {
        scrollbar-color: #464646 transparent;
    }
    html:not([data-theme="light"]) .bsel-menu::-webkit-scrollbar-thumb {
        background-color: #464646;
    }
}

html[data-theme="dark"] .bsel-menu { scrollbar-color: #464646 transparent; }
html[data-theme="dark"] .bsel-menu::-webkit-scrollbar-thumb { background-color: #464646; }

/* 자리가 좁으면 줄 수를 줄인다 */
@media (max-width: 1400px) { .bsel-menu { max-width: 344px; } }
@media (max-width: 1100px) { .bsel-menu { max-width: 236px; } }

/* 목록이 화면 오른쪽 밖으로 나가면 반대쪽에 붙인다 */
.bsel-menu.to-left { left: auto; right: 0; }

.bsel-row:hover {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

/* 작은 칸에서는 단추도 낮게 */
.input-sm + .bsel-menu,
.bsel .bsel-btn.sm { height: 38px; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .bsel-menu {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

html[data-theme="dark"] .bsel-menu { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }


/* ==========================================================================
   일정 상세 '바로 수정' — 칸 높이 통일

   날짜 칸과 고르는 칸은 브라우저가 매기는 기본 높이가 서로 다르다.
   좁은 화면뿐 아니라 넓은 화면에서도 같은 값으로 못 박는다.
   ========================================================================== */

.quick-form input.input-sm,
.quick-form select.input-sm {
    height: 38px;
    min-height: 38px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    font-size: 13.5px;
}

.quick-form input.input-sm {
    line-height: 36px;
    padding-left: 11px;
    padding-right: 11px;
}

.quick-form input[type="date"].input-sm {
    -webkit-appearance: none;
    appearance: none;
}

@media (max-width: 768px) {
    .quick-form input.input-sm,
    .quick-form select.input-sm {
        height: 42px;
        min-height: 42px;
        font-size: 15px;
    }
    .quick-form input.input-sm { line-height: 40px; }
}


/* ==========================================================================
   배지 고르기 칸 — 옆 칸과 같은 크기로

   단추가 글자 길이만큼만 줄어들어 옆 칸들과 어긋나 보였다.
   원래 고르기 칸이 있던 자리를 그대로 물려받게 한다.
   ========================================================================== */

.bsel { display: block; width: 100%; position: relative; }

/* 상세 창의 두 칸짜리 줄 */
.dl-val .bsel { width: 100%; }

/* 일정 추가·수정 화면 */
.field .bsel { width: 100%; }

/* 검색 줄 — 원래 고르기 칸이 쓰던 폭을 그대로 쓴다 */
.search-form .bsel {
    -ms-flex: 0 0 170px;
    flex: 0 0 170px;
}

@media (max-width: 900px) {
    .search-form .search-trio > .bsel {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        width: 0;
        min-width: 0;
    }
}

/* 고르지 않은 항목도 배지와 같은 높이를 차지하게 한다.
   그래야 줄마다 글자 자리가 위아래로 흔들리지 않는다. */
.bsel-tag.plain {
    padding: 3px 4px;
    line-height: 1.35;
}


/* ==========================================================================
   배지 고르기 칸 — 모든 화면에 맞추기

   화면마다 원래 고르기 칸에 걸려 있던 크기를 그대로 물려받게 한다.
   ========================================================================== */

/* 글자가 긴 항목은 칸을 늘려 잘리지 않게 한다 */
.bsel-menu { max-width: 560px; }
@media (max-width: 1400px) { .bsel-menu { max-width: 420px; } }
@media (max-width: 1100px) { .bsel-menu { max-width: 280px; } }

/* 줄 안에 놓이는 칸들 */
.form-row .field .bsel,
.dl-val .bsel,
.quick-form .bsel { width: 100%; }

/* 표 안에 들어가는 작은 칸 */
td .bsel { min-width: 120px; }
td .bsel-btn { height: 34px; }

/* 고를 것이 없을 때 */
.bsel-menu:empty { display: none; }

/* 늘 잠겨 있는 칸은 바꿔 그리지 않는다 */
select[disabled] + .bsel,
.bsel-btn[disabled] { opacity: 0.6; cursor: default; }


/* ==========================================================================
   배지 고르기 칸 — 옆 칸과 높이 맞추기

   .input 은 위아래 12px 씩 여백을 두어 43px 쯤 된다.
   작은 칸(.input-sm)은 38px 이다. 단추도 같은 값으로 맞춘다.
   ========================================================================== */

.bsel-btn {
    height: 43px;
    min-height: 43px;
    padding: 0 32px 0 13px;
    border-radius: 6px;
}

.bsel-sm .bsel-btn {
    height: 38px;
    min-height: 38px;
    padding: 0 30px 0 11px;
    border-radius: 6px;
}

/* 상세 창의 바로 수정 칸도 같은 기준을 쓴다 */
.quick-form .bsel-btn { height: 38px; min-height: 38px; }

@media (max-width: 768px) {
    .bsel-btn { height: 46px; min-height: 46px; }
    .bsel-sm .bsel-btn,
    .quick-form .bsel-btn { height: 42px; min-height: 42px; }
}


/* ==========================================================================
   밝기를 손으로 골랐을 때 — 브라우저가 그리는 부분까지

   체크 상자와 굴림 막대는 브라우저가 직접 그린다.
   color-scheme 을 알려 주지 않으면 기기 설정을 그대로 따라가서
   밝게 골라도 어두운 색으로 남는다.
   ========================================================================== */

html[data-theme="light"] { color-scheme: light; }
html[data-theme="dark"]  { color-scheme: dark; }


/* ==========================================================================
   차트 값 말풍선

   점에 마우스를 올리면 그 자리의 값을 모아 보여 준다.
   화면 어디에서든 잘리지 않게 본문 맨 바깥에 붙여 두고 자리만 옮긴다.
   ========================================================================== */

.chart-tip {
    display: none;
    position: fixed;
    z-index: 200;
    min-width: 132px;
    max-width: 280px;
    padding: 10px 13px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
    box-shadow: 0 6px 20px rgba(0, 0, 0, 0.14);
    font-size: 13px;
    line-height: 1.5;
    pointer-events: none;
}

.chart-tip.on { display: block; }

.chart-tip .tip-head {
    margin-bottom: 6px;
    font-size: 12.5px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.chart-tip .tip-row {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 2px 0;
    white-space: nowrap;
}

.chart-tip .tip-dot {
    -ms-flex: 0 0 8px;
    flex: 0 0 8px;
    width: 8px;
    height: 8px;
    margin-right: 7px;
    border-radius: 50%;
}

.chart-tip .tip-name {
    margin-right: 10px;
    color: #666666;
    color: var(--text-sub);
}

.chart-tip b {
    margin-left: auto;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

/* 짚은 자리를 알려 주는 세로선 */
.chart-guide {
    display: none;
    position: fixed;
    z-index: 190;
    width: 1px;
    background-color: #bbbbbb;
    pointer-events: none;
}

.chart-guide.on { display: block; }

/* 마우스가 닿은 점은 조금 키운다 */
.chart-dots g:hover circle:first-child { r: 5.5; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .chart-tip {
        box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5);
    }
    html:not([data-theme="light"]) .chart-guide { background-color: #5a5a5a; }
}

html[data-theme="dark"] .chart-tip { box-shadow: 0 6px 20px rgba(0, 0, 0, 0.5); }
html[data-theme="dark"] .chart-guide { background-color: #5a5a5a; }

/* 손가락으로 쓰는 화면에서는 말풍선을 띄우지 않는다 */
@media (hover: none) {
    .chart-tip, .chart-guide { display: none !important; }
}


/* ==========================================================================
   확인 창

   브라우저가 띄우는 물음창은 위에 주소가 붙어 보기 좋지 않다.
   화면 안에 직접 그려 같은 결로 맞춘다.
   ========================================================================== */

.ask-box {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 210;
    width: 400px;
    max-width: 92%;
    padding: 24px 24px 18px;
    border-radius: 8px;
    background-color: #ffffff;
    background-color: var(--surface);
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.2);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}

.ask-box.open { display: block; }

/* 옆에서 열리는 창(z-index 61) 위에서도 물어볼 수 있어야 한다 */
.panel-dim.ask { z-index: 205; }

/* 알리기만 하는 창에서는 취소 단추를 감춘다 */
.ask-foot .ask-no[hidden] { display: none; }

.ask-title {
    margin-bottom: 8px;
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.ask-text {
    font-size: 14px;
    line-height: 1.6;
    color: #666666;
    color: var(--text-sub);
    white-space: pre-line;
}

.ask-foot {
    margin-top: 22px;
    text-align: right;
}

.ask-foot .btn { margin-left: 8px; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .ask-box {
        box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6);
    }
}

html[data-theme="dark"] .ask-box { box-shadow: 0 12px 40px rgba(0, 0, 0, 0.6); }


/* ==========================================================================
   가로 막대 목록 — 이름 칸 폭 맞추기

   항목마다 이름 길이가 달라 막대 시작 자리가 들쭉날쭉했다.
   열두 글자쯤 들어가는 폭으로 못 박아 막대가 같은 자리에서 시작하게 한다.
   ========================================================================== */

.bar-list .bar-name {
    -ms-flex: 0 0 156px;
    flex: 0 0 156px;
    width: 156px;
    max-width: 156px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 768px) {
    .bar-list .bar-name {
        -ms-flex: 0 0 116px;
        flex: 0 0 116px;
        width: 116px;
        max-width: 116px;
    }
}


/* ==========================================================================
   업무 지시 — 안내 띠 여백

   처리 현황 상자 바로 아래에 붙어 한 덩어리처럼 보였다.
   위쪽에 한 칸 띄워 따로 읽히게 한다.
   ========================================================================== */

.wo-notice { margin-top: 16px; }


/* ==========================================================================
   공지 팝업

   홈에 들어오면 한 번은 눈에 들어와야 하지만,
   매번 같은 글이 막아서면 금세 성가시다.
   그래서 '오늘 하루 보지 않기' 를 함께 둔다.
   ========================================================================== */

.pop-dim {
    display: none;
    position: fixed;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
    z-index: 150;
    background-color: rgba(0, 0, 0, 0.45);
}

.pop-dim.on { display: block; }

.pop-box {
    display: none;
    position: fixed;
    left: 50%;
    top: 50%;
    z-index: 160;
    width: 520px;
    max-width: 92%;
    max-height: 80vh;
    border-radius: 8px;
    background-color: #ffffff;
    background-color: var(--surface);
    box-shadow: 0 16px 48px rgba(0, 0, 0, 0.24);
    -webkit-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
    overflow: hidden;
}

.pop-box.open {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
}

.pop-head {
    position: relative;
    padding: 18px 48px 14px 22px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.pop-tag {
    display: inline-block;
    margin-right: 8px;
    padding: 2px 9px;
    border-radius: 999px;
    font-size: 11.5px;
    font-weight: 700;
    background-color: #e8f8ef;
    background-color: var(--green-soft);
    color: #018a3e;
    color: var(--green-deep);
    vertical-align: middle;
}

.pop-title {
    font-size: 16px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
    vertical-align: middle;
}

.pop-head .detail-close { top: 14px; right: 14px; }

.pop-body {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
    padding: 18px 22px;
    overflow-y: auto;
    font-size: 14px;
    line-height: 1.75;
    color: #666666;
    color: var(--text-sub);
    word-break: break-all;
}

.pop-body img { max-width: 100%; height: auto; }

.pop-foot {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding: 13px 22px;
    border-top: 1px solid #f5f6f7;
    border-top: 1px solid var(--line-soft);
}

.pop-foot .check { font-size: 13px; margin: 0; }
.pop-foot .right { margin-left: auto; }
.pop-foot .right .btn { margin-left: 6px; }

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .pop-box {
        box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7);
    }
}

html[data-theme="dark"] .pop-box { box-shadow: 0 16px 48px rgba(0, 0, 0, 0.7); }

@media (max-width: 768px) {
    .pop-box { width: 94%; max-height: 86vh; }
    .pop-foot { -ms-flex-wrap: wrap; flex-wrap: wrap; }
    .pop-foot .right { margin: 8px 0 0; width: 100%; text-align: right; }
}


/* ==========================================================================
   공지 작성 — 팝업 기간 칸
   ========================================================================== */

.popup-range { display: none; margin-top: 10px; }
.popup-range.open { display: block; }


/* ==========================================================================
   VAN DB — 합계 줄과 걸러내기 칸

   합계 글자는 네 칸을 묶어 쓰므로 그 가운데에 놓는다.
   걸러내기 칸은 고르는 칸만 단추로 바뀌면서 높이가 달라져 있었다.
   ========================================================================== */

.van-table tfoot td { text-align: center; }
.van-table tfoot td.num { text-align: right; }

/* 프랜차이즈 · 거래처명 · 사업자번호 칸을 같은 높이로 */
.van-table .filter-row .input-xs,
.van-table .filter-row input.input-xs,
.van-table .filter-row select.input-xs {
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 28px;
}

/* 고르는 칸이 단추로 바뀐 경우도 같은 높이로 맞춘다 */
.van-table .filter-row .bsel,
.van-table .filter-row .bsel-btn {
    height: 30px;
    min-height: 30px;
}

.van-table .filter-row .bsel-btn {
    padding: 0 26px 0 8px;
    border-radius: 4px;
}

.van-table .filter-row .bsel-tag.plain {
    padding: 0;
    font-size: 12.5px;
}

.van-table .filter-row .bsel-btn:after { right: 9px; }


/* ==========================================================================
   거래처 관리 — 목록

   VAN 실적과 CMS 를 한 줄에 함께 보여 준다.
   세 화면을 오가며 번호를 옮겨 적지 않게 하려는 것이다.
   ========================================================================== */

.client-table { min-width: 1420px; }

.client-table thead tr.resizable th { position: relative; }

/* 지금 출금 중인 CMS 는 눈에 띄게 */
.cell-cms .cms-on {
    font-weight: 600;
    color: #0a9c6c;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .cell-cms .cms-on { color: #37d39b; }
}

html[data-theme="dark"] .cell-cms .cms-on { color: #37d39b; }

/* 칸마다 거르는 줄 */
.client-table .filter-row td { padding: 6px 8px; }

.client-table .filter-row .input-xs,
.client-table .filter-row input.input-xs {
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    padding-top: 0;
    padding-bottom: 0;
    line-height: 28px;
}

/* 폐업한 곳은 흐리게 두어 영업중인 곳과 구분한다 */
.client-table tbody tr:has(.cell-status .badge-empty) .cell-shop a,
.client-table tbody tr:has(.cell-status .badge-empty) .cell-addr { opacity: 0.6; }

/* 옆창 제목 옆 폐업 표시 */
.detail-title .cl-closed {
    margin-left: 8px;
    font-size: 12px;
    vertical-align: middle;
}

@media (max-width: 900px) {

    .client-table { min-width: 0; }
    .client-table .filter-row { display: none; }

    /* 카드에서는 VAN·CMS 를 상호 바로 아래 붙여 먼저 읽히게 한다 */
    .client-table tbody td.cell-van,
    .client-table tbody td.cell-cms { font-size: 12.5px; }
}


/* ==========================================================================
   거래처 관리 — 칸 머리 누르기 · 가운데 맞추기
   ========================================================================== */

.client-table { min-width: 1240px; }

/* 누를 수 있는 칸 머리 */
.client-table thead tr.sortable th > a {
    display: block;
    color: #999999;
    color: var(--text-mute);
    white-space: nowrap;
}

.client-table thead tr.sortable th > a:hover {
    color: #018a3e;
    color: var(--green-deep);
}

/* 차례 화살표. 지금 기준이 되는 칸에만 나온다. */
.client-table .so {
    display: inline-block;
    width: 0;
    height: 0;
    margin-left: 5px;
    vertical-align: middle;
    border-left: 4px solid transparent;
    border-right: 4px solid transparent;
}

.client-table .so.up {
    border-bottom: 5px solid #03c75a;
    border-bottom: 5px solid var(--green);
}

.client-table .so.down {
    border-top: 5px solid #03c75a;
    border-top: 5px solid var(--green);
}

/* VAN 실적과 CMS 는 가운데에 둔다 */
.client-table td.cell-van,
.client-table td.cell-cms { text-align: center; }

/* VAN DB 쪽만 오른쪽 여백을 조금 둔다 */
.van-table thead th { padding-right: 10px; }

@media (max-width: 900px) {
    .client-table thead tr.sortable th > a { display: inline-block; }
}


/* ==========================================================================
   목록 칸 너비 — 고정

   예전에는 칸 사이를 잡고 끌어 넓힐 수 있게 해 두었는데
   쓸 때마다 손이 걸려 오히려 불편했다.
   이제 손잡이를 없애고 표에 적어 둔 너비를 그대로 쓴다.
   ========================================================================== */

.client-table th,
.van-table th { position: static; }


/* ==========================================================================
   조직도 — 입사일 칸 (좁은 화면)
   ========================================================================== */

@media (max-width: 900px) {
    .emp-table tbody td.cell-hire {
        grid-column: 1 / 3;
        grid-row: 5;
        font-size: 12.5px;
        color: #999999;
        color: var(--text-mute);
    }

    .emp-table tbody td.cell-hire::before {
        content: "입사 ";
        color: #999999;
        color: var(--text-mute);
    }

    .emp-table tbody td.cell-act { grid-row: 6; }
}


/* ==========================================================================
   거래처 관리 — 검색 줄 안의 상태 칩
   ========================================================================== */

.search-actions .inline-chips {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    margin: 0 0 0 10px;
    padding-left: 10px;
    border-left: 1px solid #e5e5e5;
    border-left: 1px solid var(--line);
}

.search-actions .inline-chips .chip { margin: 0 4px 0 0; }
.search-actions .inline-chips .chip:last-child { margin-right: 0; }

@media (max-width: 900px) {
    .search-actions .inline-chips {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        width: 100%;
        margin: 8px 0 0;
        padding: 8px 0 0;
        border-left: none;
        border-top: 1px solid #e5e5e5;
        border-top: 1px solid var(--line);
    }
}


/* ==========================================================================
   거래처 상세 — 두 칸 배치 · 고치기 · 메모 기록
   ========================================================================== */

/* VAN 실적과 CMS 를 나란히 놓는다 */
.detail-cols.two-up {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    margin: 18px -9px 0;
}

.detail-cols.two-up > .detail-col {
    -ms-flex: 1 1 280px;
    flex: 1 1 280px;
    min-width: 0;
    margin: 0 9px 14px;
}

/* 메모 칸은 접을 수 있다. 접은 상태는 다음에 열 때도 그대로 둔다. */
.memo-block.folded .memo-inner { display: none; }

.memo-block .sec-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    padding-bottom: 8px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.memo-block .sec-head .section-title { margin: 0; font-size: 13px; }
.memo-block .memo-fold { margin-left: auto; }

/* 메모 적는 칸 */
.memo-form { margin: 14px 0 6px; }

.memo-form textarea.input-sm {
    width: 100%;
    height: auto;
    min-height: 68px;
    box-sizing: border-box;
    line-height: 1.55;
    resize: vertical;
}

.memo-form .quick-actions { margin-top: 8px; text-align: right; }
.memo-form .quick-actions .btn { margin-right: 0; }

/* ---------------------------------------------------------------- 메모 기록 */
.memo-list { list-style: none; margin: 0; padding: 0; }

.memo-list li {
    padding: 11px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.memo-list li:last-child { border-bottom: none; }

.memo-top {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 3px;
}

.memo-top b {
    font-size: 13px;
    font-weight: 700;
    color: #222222;
    color: var(--text);
}

.memo-top .at {
    margin-left: auto;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}

.memo-body {
    white-space: pre-wrap;
    word-break: break-all;
    line-height: 1.65;
    font-size: 13.5px;
    color: #666666;
    color: var(--text-sub);
}


/* ==========================================================================
   거래처 목록 — 프랜차이즈 칸
   ========================================================================== */

.client-table { min-width: 1370px; }

.client-table .filter-row select.input-xs {
    height: 30px;
    min-height: 30px;
    padding: 0 6px;
    font-size: 12px;
}


/* ==========================================================================
   거래처 상세 창 — 기본 정보·고치는 칸을 두 줄로

   항목이 열 개가 넘는데 한 줄에 하나씩 쌓으니 창이 끝없이 길어졌다.
   넓은 화면에서는 두 항목씩 나란히 둔다.
   좁은 화면은 앞서 잡아 둔 규칙(768px)이 이미 두 칸으로 접는다.
   ========================================================================== */

@media (min-width: 769px) {

    .client-panel .info-col,
    .client-panel .edit-col {
        display: -ms-grid;
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 0 20px;
    }

    /* 칸 이름표와 단추 줄은 한 줄을 다 쓴다 */
    .client-panel .info-col .col-label,
    .client-panel .edit-col .col-label,
    .client-panel .edit-col .quick-actions,
    .client-panel .edit-col .quick-note { grid-column: 1 / 3; }

    /* 주소와 메모는 길어지므로 한 줄을 다 쓴다 */
    .client-panel .info-col .dl-row.addr-row,
    .client-panel .edit-col .dl-row.wide { grid-column: 1 / 3; }

    /* 이름표를 값 위에 올려 두 칸에 들어가게 한다 */
    .client-panel .info-col .dl-row,
    .client-panel .info-col .dl-row.tight {
        display: block;
        padding: 7px 0;
        border-bottom: 1px solid #f5f6f7;
        border-bottom: 1px solid var(--line-soft);
    }

    .client-panel .info-col .dl-key {
        -ms-flex: none;
        flex: none;
        margin-bottom: 2px;
        font-size: 11.5px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    .client-panel .info-col .dl-val.plain { font-size: 14px; }

    .client-panel .edit-col .dl-row,
    .client-panel .edit-col .dl-row.tight {
        display: block;
        padding: 6px 0;
        border-bottom: none;
    }

    .client-panel .edit-col .dl-key {
        -ms-flex: none;
        flex: none;
        margin-bottom: 3px;
        font-size: 11.5px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    .client-panel .info-col .input-sm,
    .client-panel .edit-col .input-sm { width: 100%; box-sizing: border-box; }

    /* 저장 단추 줄. 안내 글은 왼쪽, 단추는 오른쪽. */
    .client-panel .info-col .quick-actions {
        grid-column: 1 / 3;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 14px;
    }

    .client-panel .info-col .quick-note {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        font-size: 11.5px;
        color: #999999;
        color: var(--text-mute);
    }

    .client-panel .info-col .quick-actions .btn { margin-right: 0; }
    .client-panel .edit-col textarea.input-sm { height: auto; min-height: 66px; }
}

/* 좁은 화면에서도 메모 칸은 한 줄을 다 쓴다 */
@media (max-width: 768px) {
    .client-panel .info-col .input-sm { width: 100%; box-sizing: border-box; }

    .client-panel .info-col .quick-actions {
        grid-column: 1 / 3;
        display: -ms-flexbox;
        display: flex;
        -ms-flex-align: center;
        align-items: center;
        margin-top: 14px;
    }

    .client-panel .info-col .quick-note {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        font-size: 11.5px;
        color: #999999;
        color: var(--text-mute);
    }

    .client-panel .info-col .quick-actions .btn { margin-right: 0; }
}



/* ==========================================================================
   67차 — 거래처 관리 다듬기
   ========================================================================== */

/* ------------------------------------------------ 옆창 스크롤 자리 잡아 두기

   메모를 접었다 펴면 창 높이가 바뀌면서 스크롤 막대가 생겼다 없어졌다 한다.
   그때마다 안쪽 폭이 달라져 글자가 좌우로 흔들린다.
   막대 자리를 늘 비워 두면 흔들리지 않는다.
   ------------------------------------------------------------------------ */
.panel-box {
    overflow-y: scroll;
    scrollbar-gutter: stable;
}


/* ------------------------------------------------ 상세 창 고치는 칸 높이 맞추기

   글자 칸은 안쪽 여백으로, 고르기 칸은 제 높이로 크기가 정해져
   나란히 두면 한 칸만 낮아 보였다. 같은 값으로 못 박는다.
   ------------------------------------------------------------------------ */
.client-panel .info-col input.input-sm,
.client-panel .info-col select.input-sm {
    height: 38px;
    box-sizing: border-box;
    line-height: 1.2;
}

/* 고르기 칸을 바꿔 그린 단추도 같은 높이로 */
.client-panel .info-col .bsel { display: block; width: 100%; }
.client-panel .info-col .bsel-btn { height: 38px; }

/* 주소는 두 칸을 위아래로 쌓는다 */
.client-panel .info-col .addr-edit input.input-sm { margin-bottom: 6px; }
.client-panel .info-col .addr-edit input.input-sm:last-of-type { margin-bottom: 0; }
.client-panel .info-col .addr-edit .addr-map { display: inline-block; margin-top: 6px; }


/* ------------------------------------------------ 거르는 줄의 고르기 칸

   표 안 거르는 줄은 칸이 낮아 기본 단추(38px)를 넣으면 줄이 불룩해진다.
   input-xs 와 같은 30px 로 맞춘다.
   ------------------------------------------------------------------------ */
.bsel-xs .bsel-btn {
    height: 30px;
    padding: 0 22px 0 8px;
    font-size: 12.5px;
    border-radius: 4px;
}

.bsel-xs .bsel-btn:after { right: 8px; }
.bsel-xs .bsel-tag { font-size: 12.5px; }


/* ------------------------------------------------ 거래처 목록

   VAN DB 와 같이 박스 안에서만 구르게 한다.
   화면 전체가 길어지지 않아 검색 줄이 늘 보인다.
   ------------------------------------------------------------------------ */
.client-scroll {
    max-height: calc(100vh - 330px);
    min-height: 320px;
    overflow: auto;
}

/* 머리글은 구르는 동안에도 붙어 있게 한다 */
.client-table thead tr.sortable th {
    position: -webkit-sticky;
    position: sticky;
    top: 0;
    z-index: 3;
    height: 44px;
    box-sizing: border-box;
    background-color: #fafafa;
    background-color: var(--thead);
}

.client-table thead tr.filter-row td {
    position: -webkit-sticky;
    position: sticky;
    top: 44px;
    z-index: 3;
    background-color: #fafafa;
    background-color: var(--thead);
}

/* 칸 이름과 값은 가운데에 둔다. 거래처명만 왼쪽에 둔다. */
.client-table thead th,
.client-table tbody td { text-align: center; }

/*
   차례 화살표가 글자를 옆으로 밀지 않게 한다.

   화살표를 글자 뒤에 그대로 붙이면 지금 기준이 된 칸만
   글자가 왼쪽으로 밀려 혼자 어긋나 보인다.
   화살표는 칸 오른쪽 끝에 따로 띄우고
   양쪽에 같은 여백을 두어 글자는 늘 한가운데에 둔다.
*/
.client-table thead tr.sortable th > a {
    position: relative;
    display: block;
    padding: 0 14px;
    text-align: center;
}

.client-table thead tr.sortable th > a .so {
    position: absolute;
    top: 50%;
    right: 2px;
    margin: -2px 0 0;
}

/*
   칸 이름은 빠짐없이 가운데에 둔다.
   값만 거래처명 칸에서 왼쪽에 둔다.
   상호는 길이가 제각각이라 왼쪽에 붙어 있어야 눈으로 훑기 좋다.
*/
.client-table tbody td.left { text-align: left; }

.client-table thead th.left { text-align: center; }

.client-table thead tr.sortable th.left > a {
    padding: 0 14px;
    text-align: center;
}

@media (max-width: 900px) {
    /* 좁은 화면에서는 카드로 바뀌므로 붙여 두지 않는다 */
    .client-scroll { max-height: none; min-height: 0; overflow: visible; }

    /*
       표에 걸어 둔 최소 폭을 푼다.

       넓은 화면에서 칸이 눌리지 않게 1370px 을 못 박아 두었는데,
       그 값이 좁은 화면까지 따라와 카드가 화면 밖으로 1370px 만큼 늘어나 있었다.
       이름표는 왼쪽에 붙어 보이고 값은 오른쪽 끝에 밀려 화면 밖에 있었다.
    */
    .client-table { min-width: 0; width: 100%; }

    .client-table thead tr.sortable th,
    .client-table thead tr.filter-row td { position: static; }

    .client-table thead tr.sortable th > a {
        display: inline-block;
        padding: 0;
    }

    .client-table thead tr.sortable th > a .so {
        position: static;
        margin: 0 0 0 5px;
    }

    .client-table tbody td { text-align: left; }
}


/* ==========================================================================
   71차 — 좁은 화면에서 목록을 카드로 · 상세 창 바로 수정
   ========================================================================== */

/* ------------------------------------------------ 거르는 줄의 '전체' 가운데로 */
.client-table .filter-row .bsel-btn,
.van-table .filter-row .bsel-btn {
    -ms-flex-pack: center;
    justify-content: center;
    padding: 0 20px;
}

/*
   거르는 줄의 고르기 칸 높이.

   바꿔 그린 칸은 inline-block 이라 글줄 높이만큼 아래에 여백이 더 붙는다.
   단추만 30px 로 맞춰도 감싼 자리가 그만큼 더 커져 옆 칸보다 높아 보인다.
   감싼 자리까지 같이 못 박고 줄에서 떼어 낸다.
*/
.client-table .filter-row .bsel {
    display: block;
    width: 100%;
    height: 30px;
    min-height: 30px;
    vertical-align: top;
}

.client-table .filter-row .bsel-btn {
    height: 30px;
    min-height: 30px;
    box-sizing: border-box;
    border-radius: 4px;
}

.client-table .filter-row .bsel-tag.plain {
    padding: 0;
    font-size: 12.5px;
}

.client-table .filter-row .bsel-btn:after { right: 9px; }


/* ------------------------------------------------ 상세 창 '기본 정보' 머리줄

   옆창에서는 읽기만 한다.
   고치려면 전체 수정을 눌러 따로 열어야 한다.
   ------------------------------------------------------------------------ */
.client-panel .sec-head.info-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    margin-bottom: 10px;
    padding-bottom: 8px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.client-panel .sec-head.info-head .section-title {
    margin: 0;
    font-size: 13px;
}

.client-panel .sec-head.info-head .edit-open { margin-left: auto; }

/* 머리줄을 따로 두었으니 안쪽 이름표 자리는 비워 둔다 */
.client-panel .info-col > .col-label { display: none; }


/* ==========================================================================
   좁은 화면 — 거래처 관리 목록을 카드로
   ========================================================================== */

@media (max-width: 900px) {

    /* 위쪽 단추 줄 정리.
       엑셀 단추는 감추고, 남는 단추는 폭을 고르게 나눠 갖는다. */
    .client-list-head .excel-actions,
    .van-head .excel-actions { display: none; }

    .client-list-head .right,
    .van-head .right {
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        margin-top: 10px;
        gap: 8px;
    }

    .client-list-head .right > .btn,
    .van-head .right > .btn {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        text-align: center;
    }

    /* 검색 줄: 한 줄에 하나씩, 폭을 다 쓴다 */
    .search-card .search-form .search-trio,
    .search-card .search-form .search-actions {
        width: 100%;
        margin: 0 0 8px;
    }

    .search-card .search-form .search-actions {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-wrap: wrap;
        flex-wrap: wrap;
        gap: 8px;
    }

    .search-card .search-form .search-actions > .btn {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        text-align: center;
    }

    .search-card .search-form .inline-chips {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
        display: -ms-flexbox;
        display: flex;
        gap: 6px;
    }

    .search-card .search-form .inline-chips > .chip {
        -ms-flex: 1 1 0;
        flex: 1 1 0;
        text-align: center;
    }

    /* ---------------------------------------- 표를 카드로 */
    .client-table thead { display: none; }

    .client-table,
    .client-table tbody,
    .client-table tbody td { display: block; }

    /* 상호를 카드 맨 위로 올리려면 줄을 세로 상자로 둔다.
       표에서는 프랜차이즈가 앞 칸이라 그대로 두면 이름 위에 붙는다. */
    .client-table tbody tr {
        display: -ms-flexbox;
        display: flex;
        -ms-flex-direction: column;
        flex-direction: column;
        border: 1px solid #e5e5e5;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .client-table tbody tr:hover {
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .client-table tbody td {
        position: relative;
        padding: 5px 0 5px 92px;
        border-bottom: none;
        text-align: right;
        min-height: 24px;
        white-space: normal;
        word-break: break-all;
    }

    .client-table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 5px;
        width: 86px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    /* 거래처명은 카드의 제목처럼 맨 위에 크게 */
    .client-table tbody td.cell-shop {
        -ms-flex-order: -1;
        order: -1;
        padding: 0 0 10px;
        margin-bottom: 8px;
        text-align: left;
        font-size: 16px;
        border-bottom: 1px solid #f5f6f7;
        border-bottom: 1px solid var(--line-soft);
    }

    .client-table tbody td.cell-shop::before { content: none; }

    /*
       VAN 실적과 CMS 는 넓은 화면에서 가운데로 맞춰 두었다.
       카드에서는 나머지 값과 같이 오른쪽에 붙여야 줄이 가지런하다.
    */
    .client-table tbody td.cell-van,
    .client-table tbody td.cell-cms { text-align: right; }

    /* 값이 비어 있으면 그 줄은 아예 감춘다 */
    .client-table tbody td:empty,
    .client-table tbody td.no-val { display: none; }

    .client-table tbody td.empty {
        display: block;
        padding: 40px 0;
        text-align: center;
    }
    .client-table tbody td.empty::before { content: none; }
}


/* ==========================================================================
   좁은 화면 — VAN DB 목록을 카드로

   VAN사 칸은 달마다 개수가 달라진다.
   카드에서는 이름표를 붙여 한 줄씩 늘어놓는다.
   ========================================================================== */

@media (max-width: 900px) {

    .van-scroll { max-height: none; min-height: 0; overflow: visible; }

    .van-table { min-width: 0; }
    .van-table thead,
    .van-table tfoot { display: none; }

    .van-table,
    .van-table tbody,
    .van-table tbody tr,
    .van-table tbody td { display: block; }

    .van-table tbody tr {
        border: 1px solid #e5e5e5;
        border: 1px solid var(--line);
        border-radius: 8px;
        padding: 14px 16px;
        margin-bottom: 12px;
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .van-table tbody tr:hover {
        background-color: #ffffff;
        background-color: var(--surface);
    }

    .van-table tbody td {
        position: relative;
        padding: 5px 0 5px 92px;
        border-bottom: none;
        text-align: right;
        min-height: 24px;
        white-space: normal;
        word-break: break-all;
    }

    .van-table tbody td::before {
        content: attr(data-label);
        position: absolute;
        left: 0;
        top: 5px;
        width: 86px;
        text-align: left;
        font-size: 12px;
        font-weight: 600;
        color: #999999;
        color: var(--text-mute);
    }

    /* 순번은 카드에서 쓸모가 없다 */
    .van-table tbody td.cell-no { display: none; }

    .van-table tbody td.cell-shop {
        padding: 0 0 10px;
        margin-bottom: 8px;
        text-align: left;
        font-size: 16px;
        border-bottom: 1px solid #f5f6f7;
        border-bottom: 1px solid var(--line-soft);
    }

    .van-table tbody td.cell-shop::before { content: none; }

    /* 합계는 눈에 띄게 */
    .van-table tbody td.cell-sum { font-weight: 700; }

    /* 건수가 0 인 VAN사는 카드에서 감춘다. 줄만 길어질 뿐이다. */
    .van-table tbody td.cell-van.zero { display: none; }

    .van-table tbody td.empty {
        display: block;
        padding: 40px 0;
        text-align: center;
    }
    .van-table tbody td.empty::before { content: none; }

    /* 월 고르는 줄도 폭을 다 쓰게 */
    .search-card .search-form .month-nav {
        display: -ms-flexbox;
        display: flex;
        width: 100%;
        margin-bottom: 8px;
    }

    .search-card .search-form .month-nav .month-input {
        -ms-flex: 1 1 auto;
        flex: 1 1 auto;
        min-width: 0;
    }

    .search-card .search-form .check.ml {
        display: block;
        width: 100%;
        margin: 0 0 8px;
    }
}


/* ------------------------------------------------ VAN 상세 창 건너가기 단추 */
.detail-title .go-client {
    margin-left: 8px;
    vertical-align: middle;
    font-size: 11.5px;
    font-weight: 600;
    padding: 3px 9px;
    min-height: 0;
    border-radius: 999px;
    white-space: nowrap;
}


/* ==========================================================================
   엑셀 비밀번호 창

   묻는 창과 같은 틀을 쓰고 가운데에 적는 칸만 하나 더 둔다.
   ========================================================================== */

.ask-box .pw-input {
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
}

/* 틀렸을 때만 나오는 줄 */
.ask-warn {
    display: none;
    margin-top: 8px;
    font-size: 12.5px;
    font-weight: 600;
    color: #f04452;
    color: var(--red);
}

.ask-warn.on { display: block; }


/* ==========================================================================
   좁은 화면 — 상자 머리줄 여백 줄이기

   글자 한두 줄을 띄우려고 위아래를 20px 씩 비워 두면
   작은 화면에서는 그만큼 목록이 아래로 밀린다.
   ========================================================================== */

@media (max-width: 900px) {
    .card-head {
        padding-top: 14px;
        padding-bottom: 12px;
    }
}


/* ==========================================================================
   좁은 화면 — 상자 안쪽 여백 바로잡기

   .card 에 18px 을 두고 .card-flat 에서 다시 0 으로 되돌려 두었는데,
   좁은 화면용 .card 규칙이 뒤에 와서 그 0 을 덮고 있었다.
   표를 담은 상자까지 위아래가 벌어져 머리글이 아래로 밀렸다.
   ========================================================================== */

@media (max-width: 900px) {

    .card.card-flat { padding: 0; }

    /*
       검색 줄 사이 간격을 안쪽과 같게 6px 로 맞춘다.
       담당자 · 설치/AS 칸 사이가 6px 인데 줄 사이만 8px 이라 어긋나 보였다.
    */
    .search-card .search-form > .month-nav,
    .search-card .search-form > .search-trio { margin: 0 0 6px; }
}


/* ==========================================================================
   좁은 화면 — 단추 줄 간격도 6px 로

   위 검색 칸들이 6px 로 나뉘어 있는데 단추만 8px 이라 결이 달랐다.
   간격을 줄인 만큼 단추 폭은 저절로 넓어진다.
   ========================================================================== */

@media (max-width: 900px) {
    .search-card .search-form .search-actions { gap: 6px; }

    /* gap 을 못 읽는 브라우저에서도 어긋나지 않게 자리를 비워 둔다 */
    .search-card .search-form .search-actions > .btn { margin: 0; }
}


/* ==========================================================================
   일정 상세 — '바로 수정' 접기

   좁은 화면에서는 접어 두는 것을 기본으로 삼는다.
   펴 두면 정작 보려던 기본 정보가 한참 아래로 밀린다.
   ========================================================================== */

.quick-block .quick-label {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
}

.quick-block .quick-fold {
    margin-left: auto;
    padding: 3px 11px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 999px;
    background-color: transparent;
    font-size: 11.5px;
    font-weight: 600;
    color: #999999;
    color: var(--text-mute);
    cursor: pointer;
}

.quick-block .quick-fold:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
    color: #018a3e;
    color: var(--green-deep);
}

.quick-block.folded .quick-inner { display: none; }

/* 접으면 아래 칸과 너무 붙지 않게 여백만 조금 남긴다 */
.quick-block.folded { padding-bottom: 8px; }

/* 넓은 화면에서는 두 칸으로 나뉘어 나란히 놓이므로 접을 일이 없다 */
@media (min-width: 901px) {
    .quick-block .quick-fold { display: none; }
    .quick-block.folded .quick-inner { display: block; }
}


/* ==========================================================================
   일정 추가 — 기본값 프리셋을 접었을 때

   여백으로 가운데를 맞추면 조금만 어긋나도 글자가 위아래로 치우친다.
   한 줄짜리 띠로 두고 높이를 정한 뒤 그 안에서 가운데를 맞춘다.
   ========================================================================== */

.preset-card.folded {
    padding-top: 0;
    padding-bottom: 0;
}

.preset-card.folded .preset-head {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    min-height: 58px;
    margin-bottom: 0;
}

.preset-card.folded .preset-head .tt {
    -ms-flex: 1 1 auto;
    flex: 1 1 auto;
}

.preset-card.folded .preset-fold {
    top: 50%;
    -webkit-transform: translateY(-50%);
    transform: translateY(-50%);
}

@media (max-width: 900px) {
    .preset-card.folded .preset-head { min-height: 50px; }
}


/* ==========================================================================
   업무 지시 작성 — 마감일 칸

   날짜 한 칸이면 충분한데 한 줄을 다 차지하고 있었다.
   폭을 못 박고 옆에 받는 곳 안내를 나란히 둔다.
   ========================================================================== */

.form-row > .field.field-due {
    -ms-flex: 0 0 200px;
    flex: 0 0 200px;
}

/* 좁은 화면에서는 나란히 둘 자리가 없으니 한 줄을 다 쓴다 */
@media (max-width: 700px) {
    .form-row > .field.field-due {
        -ms-flex: 1 1 100%;
        flex: 1 1 100%;
    }
}


/* ==========================================================================
   거르는 줄의 고르기 칸 — 바꿔 그리기 전에도 같은 모양으로

   화면을 열면 원래 칸이 먼저 그려지고, 잠시 뒤 배지 모양으로 바뀐다.
   그 사이에 글자가 왼쪽에서 가운데로 옮겨 가 화면이 한 번 움찔한다.
   원래 칸도 처음부터 가운데로 두면 바뀌는 순간이 눈에 띄지 않는다.
   ========================================================================== */

.client-table .filter-row select.input-xs,
.van-table .filter-row select.input-xs {
    text-align: center;
    -moz-text-align-last: center;
    text-align-last: center;
}



/* ==========================================================================
   거르는 줄의 고르기 칸 — 바꿔 그리기 전에도 같은 모양

   화면이 뜨면 원래 칸이 먼저 그려지고 잠시 뒤 배지 단추로 바뀐다.
   둘이 조금이라도 달라 보이면 그 찰나가 움찔거림으로 보인다.
   가려 두는 대신 원래 칸을 배지 단추와 같은 모양으로 맞춘다.
   그러면 바뀌는 순간에 눈에 띌 것이 없다.

   맞춰야 하는 것: 글자 크기 · 색 · 좌우 여백 · 오른쪽 꺾쇠.
   ========================================================================== */

.client-table .filter-row select.input-xs,
.van-table .filter-row select.input-xs {
    padding: 0 20px;
    font-size: 13.5px;
    font-weight: 400;
    color: #666666;
    color: var(--text-sub);
    text-align: center;
    -moz-text-align-last: center;
    text-align-last: center;

    /* 배지 단추의 꺾쇠(6px 사각형을 45도 돌린 것)와 굵기·크기를 맞춘다 */
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='none' stroke='%238b95a1' stroke-width='1.5' d='M1 1l3.5 3.5L8 1'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 9px 5px;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .client-table .filter-row select.input-xs,
    html:not([data-theme="light"]) .van-table .filter-row select.input-xs {
        background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='none' stroke='%236b7480' stroke-width='1.5' d='M1 1l3.5 3.5L8 1'/%3E%3C/svg%3E");
    }
}

html[data-theme="dark"] .client-table .filter-row select.input-xs,
html[data-theme="dark"] .van-table .filter-row select.input-xs {
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' width='9' height='5' viewBox='0 0 9 5'%3E%3Cpath fill='none' stroke='%236b7480' stroke-width='1.5' d='M1 1l3.5 3.5L8 1'/%3E%3C/svg%3E");
}


/* ==========================================================================
   거르는 줄 고르기 칸 — 글자가 잘리지 않게

   줄 높이를 28px 로 못 박아 두었더니 글꼴에 따라 한글 윗부분이 잘렸다.
   'ㅔ' 같은 글자는 위로 조금 더 올라간다. 줄 높이는 글꼴에 맡긴다.
   ========================================================================== */

.client-table .filter-row select.input-xs,
.van-table .filter-row select.input-xs { line-height: 26px; }

/*
   잘린 곳은 원래 칸이 아니라 바꿔 그린 배지 쪽이었다.

   .bsel-tag 는 글자가 길면 말줄임하려고 overflow:hidden 이 걸려 있다.
   거기에 줄 높이를 1.35 로 좁혀 두었더니, 한글 글꼴은 글자가
   그 줄 높이보다 위로 더 올라가 윗부분이 잘려 나갔다.
   'ㅔ' 처럼 위로 뻗는 글자에서 먼저 드러난다.

   글꼴마다 올라가는 높이가 달라 딱 맞추기보다 넉넉히 둔다.
*/
.bsel-tag { line-height: 1.6; }
.bsel-tag.plain { line-height: 1.6; }

/* 작은 칸(30px)에서는 여백을 빼고 줄 높이로 가운데를 맞춘다 */
.client-table .filter-row .bsel-tag,
.van-table .filter-row .bsel-tag {
    padding: 0;
    line-height: 26px;
}


/* ==========================================================================
   글 꾸미기

   브라우저가 가진 편집 기능을 그대로 쓴다. 따로 라이브러리를 들이지 않는다.
   단추 줄은 문서 편집기에서 흔히 쓰는 차례로 놓되,
   생김새는 이 화면의 다른 단추들과 같은 결로 맞춘다.
   ========================================================================== */

.editor {
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    background-color: var(--surface);
}

.editor:focus-within {
    border-color: #018a3e;
    border-color: var(--green-deep);
}

.editor-bar {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    -ms-flex-align: center;
    align-items: center;
    gap: 3px;
    padding: 7px 10px;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
    background-color: #fafafa;
    background-color: var(--thead);
}

/* ---------------------------------------------------------------- 고르는 칸 */
.editor-bar select.ed-pick {
    height: 30px;
    padding: 0 24px 0 9px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
    font-size: 12.5px;
    line-height: 26px;
    color: #666666;
    color: var(--text-sub);
    cursor: pointer;
}

.editor-bar select.ed-font { width: 104px; }
.editor-bar select.ed-size { width: 84px; }

.editor-bar select.ed-pick:hover {
    border-color: #018a3e;
    border-color: var(--green-deep);
}

/* ---------------------------------------------------------------- 단추 */
.editor-bar .ed-btn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    font-size: 14px;
    line-height: 1;
    color: #222222;
    color: var(--text);
    cursor: pointer;
}

/* 글자가 들어가는 넓은 단추 */
.editor-bar .ed-btn.ed-w {
    width: auto;
    padding: 0 10px;
    font-size: 12.5px;
    color: #666666;
    color: var(--text-sub);
}

.editor-bar .ed-btn:hover {
    border-color: #e5e5e5;
    border-color: var(--line);
    background-color: #ffffff;
    background-color: var(--surface);
}

.editor-bar .ed-btn:active {
    background-color: #f5f6f7;
    background-color: var(--line-soft);
}

/* 굵게 · 기울임 · 밑줄 · 취소선은 '가' 한 글자로 보여 준다 */
.editor-bar .ed-b { font-weight: 800; }
.editor-bar .ed-i { font-style: italic; }
.editor-bar .ed-u { text-decoration: underline; text-underline-offset: 2px; }
.editor-bar .ed-s { text-decoration: line-through; }

.ed-sep {
    width: 1px;
    height: 18px;
    margin: 0 5px;
    background-color: #e5e5e5;
    background-color: var(--line);
}

/* ---------------------------------------------------------------- 색 고르기

   '가' 아래에 색 띠를 둔다. 지금 고른 색이 무엇인지 눈으로 보인다.
   누르면 자주 쓰는 색이 아래에 펼쳐진다.
   운영체제 색 고르기 창은 화면마다 생김새가 달라 여기서는 쓰지 않는다.
   ---------------------------------------------------------------- */
.editor-bar .ed-color { position: relative; display: inline-block; }

.editor-bar .ed-cbtn {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-direction: column;
    flex-direction: column;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    width: 30px;
    height: 30px;
    padding: 0;
    border: 1px solid transparent;
    border-radius: 6px;
    background-color: transparent;
    cursor: pointer;
}

.editor-bar .ed-cbtn:hover {
    border-color: #e5e5e5;
    border-color: var(--line);
    background-color: #ffffff;
    background-color: var(--surface);
}

.editor-bar .ed-color .ed-ch {
    font-size: 13.5px;
    line-height: 16px;
    color: #222222;
    color: var(--text);
}

.editor-bar .ed-color .ed-bar {
    display: block;
    width: 17px;
    height: 3px;
    margin-top: 1px;
    border-radius: 2px;
    background-color: #f04452;
}

/* 형광펜은 처음 색을 달리 둔다 */
.editor-bar .ed-color .ed-bar.hi { background-color: #fff3bf; }

/* ---------------------------------------------------------------- 펼친 색판 */
.ed-pal {
    display: none;
    position: absolute;
    left: 0;
    top: 34px;
    z-index: 80;
    padding: 8px;
    border: 1px solid #e5e5e5;
    border: 1px solid var(--line);
    border-radius: 6px;
    background-color: #ffffff;
    background-color: var(--surface);
    box-shadow: 0 8px 24px rgba(0, 0, 0, 0.12);
}

.ed-pal.open { display: block; }

.ed-pal-grid {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
    gap: 3px;
    width: 222px;
}

.ed-dot {
    width: 19px;
    height: 19px;
    padding: 0;
    border: 1px solid rgba(0, 0, 0, 0.08);
    border-radius: 4px;
    cursor: pointer;
}

.ed-dot:hover {
    -webkit-transform: scale(1.18);
    transform: scale(1.18);
    border-color: #222222;
    border-color: var(--text);
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .ed-pal {
        box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5);
    }
}

html[data-theme="dark"] .ed-pal { box-shadow: 0 8px 24px rgba(0, 0, 0, 0.5); }


/* ---------------------------------------------------------------- 맞춤 아이콘

   줄 네 개로 그린다. 그림 파일을 따로 두지 않아도 된다.
   ---------------------------------------------------------------- */
.ed-al {
    display: block;
    width: 15px;
    height: 11px;
    background-repeat: no-repeat;
    background-size: 100% 1.5px, 70% 1.5px, 100% 1.5px, 70% 1.5px;
    background-image:
        linear-gradient(#666666, #666666), linear-gradient(#666666, #666666),
        linear-gradient(#666666, #666666), linear-gradient(#666666, #666666);
    background-position: left 0, left 3.2px, left 6.4px, left 9.6px;
}

.ed-al.c { background-position: center 0, center 3.2px, center 6.4px, center 9.6px; }
.ed-al.r { background-position: right 0, right 3.2px, right 6.4px, right 9.6px; }

.ed-al.j {
    background-size: 100% 1.5px;
    background-position: left 0, left 3.2px, left 6.4px, left 9.6px;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .ed-al {
        background-image:
            linear-gradient(#bbbbbb, #bbbbbb), linear-gradient(#bbbbbb, #bbbbbb),
            linear-gradient(#bbbbbb, #bbbbbb), linear-gradient(#bbbbbb, #bbbbbb);
    }
}

html[data-theme="dark"] .ed-al {
    background-image:
        linear-gradient(#bbbbbb, #bbbbbb), linear-gradient(#bbbbbb, #bbbbbb),
        linear-gradient(#bbbbbb, #bbbbbb), linear-gradient(#bbbbbb, #bbbbbb);
}

/* ---------------------------------------------------------------- 적는 자리 */
.editor-body {
    min-height: 320px;
    max-height: 60vh;
    overflow-y: auto;
    padding: 16px 18px;
    font-size: 15px;
    line-height: 1.75;
    color: #222222;
    color: var(--text);
    outline: none;
    word-break: break-all;
}

.editor-body.empty:before {
    content: attr(data-placeholder);
    color: #bbbbbb;
    color: var(--text-mute);
    pointer-events: none;
}

.editor-body ul { list-style: disc; padding-left: 22px; margin: 8px 0; }
.editor-body ol { list-style: decimal; padding-left: 24px; margin: 8px 0; }
.editor-body a { color: #03c75a; color: var(--green); text-decoration: underline; }

.editor-help { margin-top: 8px; }

/* 좁은 화면에서는 단추가 두 줄로 접힌다 */
@media (max-width: 700px) {
    .editor-bar { gap: 2px; padding: 6px 8px; }
    .editor-bar select.ed-font { width: 88px; }
    .editor-bar select.ed-size { width: 72px; }
    .ed-sep { margin: 0 3px; }
}


/* ---------------------------------------------------------------- 꾸민 글 보기 */
/*
   예전에는 글자만 담겨 있어 줄바꿈을 그대로 살리도록(pre-wrap) 두었다.
   이제는 줄바꿈이 <br> 로 들어오므로 그 규칙을 풀어야 한다.
   그대로 두면 한 줄 띄운 자리가 두 줄로 벌어진다.
*/
.post-body.rich,
.pop-body.rich {
    white-space: normal;
    word-break: break-all;
}

.post-body.rich a,
.pop-body.rich a {
    color: #018a3e;
    color: var(--green-deep);
    text-decoration: underline;
}

.post-body.rich ul,
.pop-body.rich ul { list-style: disc; padding-left: 22px; margin: 8px 0; }

.post-body.rich ol,
.pop-body.rich ol { list-style: decimal; padding-left: 24px; margin: 8px 0; }

.post-body.rich li { margin: 2px 0; }

.post-body.rich blockquote,
.pop-body.rich blockquote {
    margin: 10px 0;
    padding: 8px 14px;
    border-left: 3px solid #e5e5e5;
    border-left: 3px solid var(--line);
    color: #666666;
    color: var(--text-sub);
}

.post-body.rich hr {
    margin: 16px 0;
    border: none;
    border-top: 1px solid #e5e5e5;
    border-top: 1px solid var(--line);
}

.post-body.rich h1 { font-size: 22px; font-weight: 700; margin: 18px 0 8px; }
.post-body.rich h2 { font-size: 19px; font-weight: 700; margin: 16px 0 8px; }
.post-body.rich h3 { font-size: 17px; font-weight: 700; margin: 14px 0 6px; }

.post-body.rich pre,
.post-body.rich code {
    font-family: ui-monospace, Menlo, Consolas, monospace;
    font-size: 13.5px;
    background-color: #fafafa;
    background-color: var(--thead);
    border-radius: 4px;
}

.post-body.rich pre { padding: 12px 14px; overflow-x: auto; }
.post-body.rich code { padding: 1px 5px; }


/* 한 줄 적어 받는 창의 입력칸. layout.html 의 askInput 참고. */
.ask-box .in-field {
    width: 100%;
    margin-top: 14px;
    box-sizing: border-box;
}


/* ==========================================================================
   홈 달력 — 달 옮기는 단추

   'margin-left: auto' 로 밀어 두었더니 년월과 멀찍이 떨어져 있었다.
   무엇을 옮기는 단추인지 붙어 있어야 한눈에 들어온다.
   높이도 셋을 같게 맞춘다. 꺾쇠 단추에만 다른 여백이 걸려 있었다.
   ========================================================================== */

.cal-nav {
    margin-left: 10px;
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 4px;
    white-space: nowrap;
}

.cal-nav .btn { margin-left: 0; }

.cal-head .cal-nav .btn,
.cal-head .cal-nav .btn-nav {
    display: -ms-inline-flexbox;
    display: inline-flex;
    -ms-flex-align: center;
    align-items: center;
    -ms-flex-pack: center;
    justify-content: center;
    height: 30px;
    min-height: 30px;
    min-width: 32px;
    padding: 0 11px;
    font-size: 12.5px;
    line-height: 1;
    box-sizing: border-box;
}

.cal-head .cal-nav .btn-nav { font-weight: 700; }


/* ==========================================================================
   하루 창 — 당직이 바뀐 자취
   ========================================================================== */

.duty-log { list-style: none; margin: 0; padding: 0; }

.duty-log li {
    padding: 9px 0;
    border-bottom: 1px solid #f5f6f7;
    border-bottom: 1px solid var(--line-soft);
}

.duty-log li:last-child { border-bottom: none; }

.dl-line {
    display: -ms-flexbox;
    display: flex;
    -ms-flex-align: center;
    align-items: center;
    gap: 7px;
    font-size: 13.5px;
    color: #222222;
    color: var(--text);
}

.dl-from,
.dl-to { font-weight: 600; }

.dl-from.none,
.dl-to.none {
    font-weight: 400;
    color: #999999;
    color: var(--text-mute);
}

.dl-to {
    color: #018a3e;
    color: var(--green-deep);
}

.dl-to.none {
    color: #f04452;
    color: var(--red);
}

.dl-arrow {
    color: #bbbbbb;
    color: var(--text-mute);
}

.dl-who {
    margin-top: 2px;
    font-size: 11.5px;
    color: #999999;
    color: var(--text-mute);
}


/* ==========================================================================
   거래처 상세 창 — CMS 상태 배지

   출금 전 · 출금 중 · 멈춤 셋을 색으로 가른다.
   예전에는 셋 다 같은 모양이라 눈으로 가릴 수 없었다.
   ========================================================================== */

.cms-rows .badge.cms-on {
    color: #0a9c6c;
    border-color: #c3f0dd;
    background-color: #e9f9f2;
}

.cms-rows .badge.cms-soon {
    color: #3182f6;
    color: var(--blue);
    border-color: #cfe2fd;
    background-color: #ebf3fe;
    background-color: var(--blue-soft);
}

.cms-rows .badge.cms-off {
    color: #999999;
    color: var(--text-mute);
    border-color: #e5e5e5;
    border-color: var(--line);
    font-weight: 500;
}

@media (prefers-color-scheme: dark) {
    html:not([data-theme="light"]) .cms-rows .badge.cms-on {
        color: #37d39b;
        border-color: #1d4336;
        background-color: #16302a;
    }
    html:not([data-theme="light"]) .cms-rows .badge.cms-soon {
        border-color: #1e3a5c;
        background-color: #17283c;
    }
}

html[data-theme="dark"] .cms-rows .badge.cms-on {
    color: #37d39b;
    border-color: #1d4336;
    background-color: #16302a;
}

html[data-theme="dark"] .cms-rows .badge.cms-soon {
    border-color: #1e3a5c;
    background-color: #17283c;
}