@charset "utf-8";
/* TOURMUCH // Maker : H.J Jeon // E-Mail : jinia21@naver.com // Site : tourmuch.com */

html::-webkit-scrollbar {width: 8px;}
html::-webkit-scrollbar-thumb {background-color: var(--color-point); border-radius: 10px;}

html, body {
    word-break: keep-all;

    --width-xs: 1024px;
    --width-sm: 1240px;
    --width-md: 1440px;
    --width-lg: 1720px;
    --width-full: 1920px;

    --padding-basic: 1rem;
    --padding-lg: 2rem;
}

img { max-width: 100%; object-fit: cover; }

#wrapper {
    --header-height: 60px;

    min-height: 100vh;
    padding-top: calc(var(--header-height) * 2);
    background-color: var(--color-background);
}

.width-xs { width: var(--width-xs); margin: 0 auto; }
.width-sm { width: var(--width-sm); margin: 0 auto; }
.width-md { width: var(--width-md); margin: 0 auto; }
.width-lg { width: var(--width-lg); margin: 0 auto; }

.max-width-xs { max-width: var(--width-xs); margin: 0 auto; }
.max-width-sm { max-width: var(--width-sm); margin: 0 auto; }
.max-width-md { max-width: var(--width-md); margin: 0 auto; }
.max-width-lg { max-width: var(--width-lg); margin: 0 auto; }

.dark-overlay {
    visibility: hidden;
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    background-color: rgba(var(--color-black-rgb),0.5);
    backdrop-filter: blur(5px);
    z-index: 1000;
    opacity: 0;
    transition: opacity 0.25s ease-in-out, visibility 0.25s;
    content: '';
}

.dark-overlay.open {
    visibility: visible;
    opacity: 1;
}

.side-border-line {
    position: relative;
}

.side-border-line:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(var(--color-black-rgb),0.05);
    border-radius: inherit;
    content: '';
}

.like-select {
    --like-select-size: 10px;
    position: relative;
}

.like-select dt .like-select-btn {
    gap: 1rem;
    padding: var(--like-select-size);
    border-radius: 5px;
}

.like-select dt .like-select-btn .ico i {
    transition: .3s;
}

.like-select dd {
    display: none;
    position: absolute;
    top: 100%;
    left: 0;
    width: var(--dd-width);
    min-width: 100%;
    background-color: var(--color-bg-gray);
    border-radius: 0 0 5px 5px;
    box-shadow: 10px 15px 20px -5px rgba(var(--color-black-rgb),0.08);
    z-index: 1100;
}

.like-select dd ul li:not(:first-child) {
    border-top: 1px solid var(--color-line-basic);
}

.like-select dd ul li .basic-link {
    width: 100%;
    padding: var(--like-select-size);
    text-align: left;
}

.toggle-layer {
    visibility: hidden;
    opacity: 0;
    transform: translateY(20px);
    transition: .3s ease;
}

.toggle-layer.on {
    visibility: visible;
    opacity: 1;
    transform: translateY(0);
    pointer-events: auto;
}

.toggle-layer.open {
    visibility: visible;
    opacity: 1;
    transform: translateY(0px);
}

.m-icon-only {
    padding: 0.25rem 0.75rem;
}

.m-icon-only span {
    font-size: 1.25rem;
}

.m-icon-only em {
    display: none;
}

@media screen and (min-width: 767px) {
    .m-icon-only {
        padding: 10px;
    }

    .m-icon-only span {
        font-size: clamp(0.875rem, 2vw, 1rem);
    }

    .m-icon-only em {
        display: block;
    }
}

@media screen and (min-width: 1023px) {
}

@media screen and (min-width: 1239px) {
    html, body {
        --padding-basic: 1.5rem;
    }

    #wrapper {
        --header-height: 80px;
    }
}

@media screen and (min-width: 1439px) {
    #wrapper {
        padding-top: var(--header-height);
    }
}


/* 상단 헤더 */
#header {
    position: fixed;
    top: 0;
    left: 0;
    display: flex;
    flex-direction: column;
    width: 100%;
    border-bottom: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    z-index: 1000;
}

#header h1 {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding-inline: var(--padding-basic);
}

#header h1 .tit-img img {
    height: 36px;
}

#header h1 .site-map-btn {
    width: 24px;
    height: 24px;
    position: relative;
    border: none;
    background: transparent;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
}

#header h1 .site-map-btn span,
#header h1 .site-map-btn span::before,
#header h1 .site-map-btn span::after {
    display: block;
    content: '';
    width: 100%;
    height: 2px;
    background-color: var(--color-basic);
    border-radius: 2px;
    transition: all 0.3s ease;
    position: absolute;
}

#header h1 .site-map-btn span::before {
    transform: translateY(-7px);
}

#header h1 .site-map-btn span::after {
    transform: translateY(7px);
}

#header h1 .site-map-btn.active span {
    background-color: transparent;
}

#header h1 .site-map-btn.active span::before {
    transform: translateY(0) rotate(45deg);
    background-color: var(--color-red);
}

#header h1 .site-map-btn.active span::after {
    transform: translateY(0) rotate(-45deg);
    background-color: var(--color-red);
}

#header .gnb {
    padding-inline: var(--padding-basic);
    border-top: 1px solid var(--color-line-light);
}

#header .gnb .gnb-1ul .gnb-1li {
    width: auto;
}

#header .gnb .gnb-1ul .gnb-1li .gnb-1a {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    height: var(--header-height);
    font-size: clamp(1rem, 3vw, 1.063rem);
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
    transition: .2s ease-in;
}

#header .gnb .gnb-1ul .gnb-1li .gnb-1a:before {
    position: absolute;
    bottom: 0;
    left: 49.5%;
    right: 49.5%;
    height: 5px;
    background-color: rgba(var(--color-yellow-rgb),0);
    border-radius: 5px 5px 0 0;
    content: '';
}

#header .gnb .gnb-1ul .gnb-1li.selected .gnb-1a {
    color: var(--color-basic);
    font-weight: var(--font-weight-semibold);
}

#header .gnb .gnb-1ul .gnb-1li.selected .gnb-1a:before {
    left: -0.5rem;
    right: -0.5rem;
    background-color: rgba(var(--color-yellow-rgb),1);
}

#header .header-side {
    position: absolute;
    top: 0;
    right: 60px;
    display: flex;
    justify-content: flex-end;
    align-items: center;
    gap: 1rem;
    height: var(--header-height);
}

@media screen and (min-width: 767px) {
}

@media screen and (min-width: 1239px) {
    #header .gnb .gnb-1ul .gnb-1li .gnb-1a:hover {
        color: var(--color-basic);
    }
}

@media screen and (min-width: 1439px) {
    #header {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        padding-right: var(--padding-basic);
    }

    #header h1 {
        flex-shrink: 0;
        width: var(--side-width);
        border-right: 1px solid var(--color-line-basic);
    }

    #header .gnb {
        flex-grow: 1;
    }

    #header .header-side {
        flex-shrink: 0;
        position: relative;
        top: auto;
        right: auto;
        width: 320px;
    }
}

@media screen and (min-width: 1639px) {
    #header .header-side {
        width: 400px;
    }
}


/* 상단 헤더 // 헤더 검색 */
#header .header-search {
    flex-grow: 1;
}

#header .header-search .inner-view {
    display: none;
    flex-grow: 1;
    background-color: var(--color-background);
    border-radius: 5px;
}

#header .header-search .inner-view .like-select {
    flex-shrink: 0;
}

#header .header-search .inner-view .search-input {
    flex-grow: 1;
}

#header .header-search .inner-view .search-btn {
    flex-shrink: 0;
    padding: 10px 16px;
}

#header .header-search .search-onoff-btn {
    flex-shrink: 0;
    width: 40px;
    height: 40px;
    font-size: 1.25rem;
    color: var(--color-gray);
}

#header .header-search.h-search-open {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: var(--header-height);
    padding: 0 var(--padding-basic);
    background-color: var(--color-box-basic);
    z-index: 1100;
}

#header .header-search.h-search-open .inner-view {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

@media screen and (min-width: 767px) {
    #header .header-search .inner-view {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    #header .header-search .search-onoff-btn {
        display: none;
    }
}

@media screen and (min-width: 1239px) {
}



/* 상단 헤더 // 마이페이지 요약 */
#header .header-mybox {
    flex-shrink: 0;
    font-size: 0;
}

#header .header-mybox .my-btn {
    position: relative;
}

#header .header-mybox .my-btn .profile-img {
    overflow: hidden;
    position: relative;
    display: block;
    background-color: rgba(var(--color-basic-rgb),0.03);
    font-size: 0;
    border-radius: 50%;
}

#header .header-mybox .my-btn .profile-img img {
    width: 40px;
    height: 40px;
}

#header .header-mybox .my-btn .alarm-ico {
    display: none;
    position: absolute;
    bottom: -5px;
    right: -5px;
    width: 20px;
    height: 20px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 0.625rem;
    border-radius: 50%;
}

#header .header-mybox .my-btn .alarm-ico.on {
    display: flex;
}

#header .header-mybox .mybox-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 60vh;
    padding: 0 var(--padding-basic) var(--padding-basic);
    background-color: var(--color-box-basic);
    font-size: clamp(0.875rem, 3vw, 1rem);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -5px 15px -8px rgba(var(--color-black-rgb),0.1);
    z-index: 1100;
}

#header .header-mybox .mybox-area .user-info {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 1rem;
    padding-block: var(--padding-lg);
    border-bottom: 1px solid var(--color-line-basic);
}

#header .header-mybox .mybox-area .user-info .profile-pic {
    flex-shrink: 0;
    position: relative;
}

#header .header-mybox .mybox-area .user-info .profile-pic figure {
    position: relative;
    overflow: hidden;
    border-radius: 50%;
    font-size: 0;
}

#header .header-mybox .mybox-area .user-info .profile-pic figure img {
    width: 80px;
    height: 80px;
}

#header .header-mybox .mybox-area .user-info .profile-pic .edit-link-btn {
    position: absolute;
    bottom: 0;
    right: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 30px;
    height: 30px;
    background-color: rgba(var(--color-point-rgb),0.7);
    color: var(--color-white);
    border-radius: 50%;
}

#header .header-mybox .mybox-area .user-info .info-inner {
    flex-grow: 1;
    width: 200px;
}

#header .header-mybox .mybox-area .user-info .info-inner h3 {
    display: flex;
    flex-direction: column;
    margin-bottom: 0.5rem;
    font-size: clamp(1rem, 3vw, 1.125rem);
}

#header .header-mybox .mybox-area .user-info .info-inner h3 small {
    font-weight: var(--font-weight-regular);
    color: var(--color-gray);
}

#header .header-mybox .mybox-area .user-info .info-inner h3 em {
    max-width: calc(100% - 1rem);
}

#header .header-mybox .mybox-area .mybox-content {
    position: relative;
}

#header .header-mybox .mybox-area .mybox-content h3 {
    position: sticky;
    top: 0;
    left: 0;
    padding-block: 1.5rem 1rem;
    background-color: var(--color-box-basic);
    font-weight: var(--font-weight-medium);
    z-index: 1;
}

#header .header-mybox .mybox-area .mybox-content h3 .all-del-btn {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
}

#header .header-mybox .mybox-area .mybox-content .mybox-list {
    overflow: hidden;
    background-color: rgba(var(--color-basic-rgb),0.03);
    border-radius: 0.5rem;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list ul li {
    position: relative;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list ul li:not(:first-child) {
    border-top: 1px dotted var(--color-line-basic);
}

#header .header-mybox .mybox-area .mybox-content .mybox-list .con {
    display: flex;
    flex-direction: column;
    padding: 1rem;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list .con .tit {
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list .con .txt {
    color: var(--color-gray);
    font-size: 0.875rem;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list .con .date {
    margin-top: 5px;
    color: var(--color-gray-light);
    font-size: 0.75rem;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list .del-btn {
    position: absolute;
    top: 1rem;
    right: 0.5rem;
    padding-inline: 0.5rem;
    color: var(--color-gray);
}

/* §15.35 — 헤더 알림 패널 전용 추가분. legacy/기존 포트엔 없던 새 클래스라 여기서 실제 규칙을
   직접 정의한다(§15.33/15.34가 잡아낸 "CSS 없는 가짜 클래스" 재발 방지). */
#header .header-mybox .mybox-area .mybox-content .mybox-list li:not(.is-unread) .con {
    opacity: .55;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list li.is-unread .con .tit {
    position: relative;
    padding-left: .75rem;
}

#header .header-mybox .mybox-area .mybox-content .mybox-list li.is-unread .con .tit::before {
    content: '';
    position: absolute;
    left: 0;
    top: .45em;
    width: 6px;
    height: 6px;
    background-color: var(--color-red);
    border-radius: 50%;
}

#header .header-mybox .mybox-area .mybox-content h3 .all-del-btn:disabled {
    opacity: .4;
    cursor: not-allowed;
}

#header .header-mybox .mybox-area .mybox-footer {
    margin-top: .75rem;
}

@media screen and (min-width: 767px) {
}

@media screen and (min-width: 1023px) {
    #header .header-mybox .mybox-area {
        bottom: auto;
        left: auto;
        right: 1rem;
        top: calc(var(--header-height) + 0.5rem);
        width: 375px;
        box-shadow: 0 5px 15px rgba(var(--color-black-rgb),0.16);
        border-radius: 1rem;
    }
}

@media screen and (min-width: 1239px) {
}



/* 공통 */
#container {
    position: relative;
    min-height: calc(100vh - var(--header-height) * 2);
}

.dashboard {
    position: relative;
}

.basic-box {
    position: relative;
    background-color: var(--color-box-basic);
}

.width-col-2 .basic-box:not(:first-child) {
    margin-top: 1rem;
}

.basic-padding {
    padding: var(--padding-basic);
}

.small-padding {
    padding: calc(var(--padding-basic) / 2);
}

/* 
    261013 추가 
    basic box 안에 slot을 쓰지 않을 경우:
    card props가 false이면 slot이 나오지 않지만 card를 true로 두고
    slot을 쓰기 싫을때 적용.
*/
.basic-box.no-slot > aside {display: none !important;}


/* 등록/수정 폼 하단 버튼 줄(저장+취소 등) — 앱 전체 폼 34곳에서 동일하게 반복되던
   style="margin-top:16px; display:flex; gap:8px;" 인라인을 하나로 통일(2026-08-14 스타일 일원화 감사). */
.form-actions {
    margin-top: 16px;
    display: flex;
    justify-content: flex-end;
    gap: 8px;
    /* 2026-10-07 — 승인/반려/보류 등 버튼이 여럿인 화면(전자결재 상세)에서 좁은 폭에 가로로 넘치지 않게 줄바꿈 허용
       (버튼이 적은 기존 폼은 한 줄에 다 들어가 영향 없음). */
    flex-wrap: wrap;
    position: sticky;
    bottom: 0;
    left: 0;
    background: var(--color-basic-reverse);
    padding: var(--padding-basic);
    box-shadow: 0 -20px 20px -20px rgba(var(--color-black-rgb), 0.1);
    border-top: 1px solid var(--color-line-basic);
    border-bottom: 1px solid var(--color-line-basic);
}

.form-actions > *:first-child {
    margin-right: auto;
}

/* 2026-10-07 사용자 슬라이드 피드백 #2(승인 화면 버튼 정렬) — 하단 액션바 왼쪽에 버튼을 둘 이상 두는 화면
   (전자결재 상세: 목록으로 + 인쇄용 보기)용 묶음. .form-actions는 첫 자식만 margin-right:auto로 왼쪽에 붙이므로,
   그 첫 자식으로 이 래퍼를 두면 나머지(문서 처리 버튼들)는 전부 오른쪽 정렬된다. */
.form-actions-start {
    display: flex;
    gap: 8px;
}

/* 2026-10-07 사용자 슬라이드 피드백 #3 — 입금확인/세금계산서가 붙은 입금일정 회차는 삭제 버튼이 비활성(disabled)으로
   렌더링되는데(cost-fields.blade.php), 기본 버튼 스타일로는 눌리는 버튼과 구분이 안 돼 흐리게 보이게 한다. */
.write-tbl button:disabled {
    opacity: 0.35;
    cursor: not-allowed;
}

/* 외주지급 승인 화면의 반려 사유 입력(승인/반려 버튼과 같은 .form-actions 줄 안) — 예전 인라인
   style="width:220px"를 대체. .doc-action-row(align-items:center)에서 입력칸이 버튼보다 2px 낮게 그려져
   기준선이 어긋나 보이므로 줄 높이에 맞춰 늘린다. */
.decision-reason-input {
    width: 220px;
    align-self: stretch;
}

/* 세금계산서 상세의 발행일 입력(발행처리 버튼과 같은 .form-actions 줄 안, 2026-10-08 슬라이드 #1) — 예전 인라인
   style="width:130px"를 대체. 위 .decision-reason-input과 같은 이유로 줄 높이에 맞춰 늘린다. */
.decision-date-input {
    width: 150px;
    align-self: stretch;
}

/* 읽기전용 상세 시트(.input-write-form.view-ver > .input-form-box) — 프로젝트 뷰·외주지급 상세·세금계산서 상세가
   똑같은 인라인 style="--input-dt-width: 150px; border: 1px solid var(--color-line-basic);"를 복붙하고 있어
   (rule of three, 2026-10-08 슬라이드 #1) 하나로 통일. dt 폭 변수를 이 박스가 정하고 하위 dl이 상속한다. */
.detail-sheet {
    --input-dt-width: 150px;
    border: 1px solid var(--color-line-basic);
}

.form-actions.is-centered {
    text-align: center;
    justify-content: center;
}

/* 목록 표 안의 개별 삭제 폼(표 셀 안에서 줄바꿈되지 않도록) — 앱 전체 21곳에서 동일하게 반복되던
   style="display:inline" 인라인을 하나로 통일(2026-08-14 스타일 일원화 감사). */
.inline-form {
    display: inline;
}

/* 통계 대시보드형 화면(재무 등) 공통 — 섹션/통계 카드에서 반복되던 인라인 style을 클래스로
   추출(2026-08-14 스타일 일원화 감사). */
.dashboard-section {
    margin-bottom: 32px;
}

.dashboard-section-title {
    font-size: 15px;
    margin-bottom: 8px;
}

.stat-card-row {
    display: flex;
    gap: 16px;
    margin-bottom: 16px;
    flex-wrap: wrap;
}

.stat-card {
    padding: 12px 16px;
}

.stat-card-label {
    font-size: 12px;
    color: var(--color-gray);
}

.stat-card-value {
    font-size: 20px;
    font-weight: bold;
}

/* 2026-08-19 다크모드 버그 수정 — #888/#c62828 하드코딩이 html.theme-dark 변수를 안 타서
   다크모드에서 라이트 그대로 남아 있었다. */
.stat-card.is-danger {
    border-color: var(--color-red);
}

.stat-card-label.is-danger,
.stat-card-value.is-danger {
    color: var(--color-red);
}

/* 대시보드 월 이동 화살표의 "더 이동 불가" 비활성 상태 — finance/project 대시보드 2곳에서
   동일하게 반복되던 style="opacity:.3; pointer-events:none;" 인라인을 통일
   (2026-08-14 스타일 일원화 감사 2차). */
.arrow-button.is-disabled {
    opacity: .3;
    pointer-events: none;
}

/* 상세화면 안에서 다음 항목/구획을 시각적으로 구분하는 점선 구분선 — project/show.blade.php
   한 파일에서만 8회 반복되던 style="margin-top:16px; border-top:1px dashed #ddd; padding-top:12px;"
   인라인을 통일(2026-08-14 스타일 일원화 감사 2차). 2026-08-19: #ddd 하드코딩이 다크모드 변수를
   안 타던 것을 var(--color-line-basic)로 수정. */
.detail-section {
    margin-top: 16px;
    border-top: 1px dashed var(--color-line-basic);
    padding-top: 12px;
}

/* 상세보기 화면 최상단 구획(제목+상태 헤더 바로 아래) 테두리 — commute 신청서 상세 3종에서 동일하게
   반복되던 style="border-top:2px solid #333; border-bottom:1px solid #ddd; padding:16px 0;" 인라인을
   통일(2026-08-14 스타일 일원화 감사 2차). approval/show·project/show·mail/show 3곳은 이 클래스가
   있는데도 각자 같은 인라인을 또 복붙해 쓰고 있어 다크모드에서 깨졌다 — 그 3곳도 이 클래스로
   교체(2026-08-19 다크모드 버그 수정, #333/#ddd → 변수). */
.request-detail-article {
    border-top: 2px solid var(--color-basic);
    border-bottom: 1px solid var(--color-line-basic);
    padding: 16px 0;
}

/* 폼 필드 아래/옆에 붙는 보조 설명(caption) — .stat-card-label과 시각적으로 동일(font-size:12px,
   color:#888)하지만 문맥이 통계 카드가 아니라 폼 필드라 이름을 분리했다. admin/boards/form.blade.php의
   반복 인라인 style을 통일(2026-08-14 스타일 일원화 감사). 2026-08-19: 다크모드 변수로 교체. */
.field-caption {
    display: block;
    font-size: 12px;
    color: var(--color-gray);
}

/* 상세보기 헤더 안의 제목(h1)/상태 배지/보조 메타 라인 — approval·project·mail show 3곳에 복붙되던
   style="font-size:20px; margin:0 0 8px;" / "font-size:13px; font-weight:normal; color:#888;" /
   "font-size:13px; color:#888; margin-bottom:16px;" 인라인을 통일(2026-08-19 다크모드 버그 수정 겸
   인라인 제거). */
.doc-header-title {
    font-size: 20px;
    margin: 0 0 8px;
}

.doc-header-status {
    font-size: 13px;
    font-weight: normal;
    color: var(--color-gray);
}

.doc-meta {
    font-size: 13px;
    color: var(--color-gray);
    margin-bottom: 16px;
}

.doc-section {
    margin-bottom: 16px;
}

.doc-mono {
    font-family: monospace;
}

/* 전자결재 문서 상세(approval/show.blade.php)·외주지급 상세의 결재 실행 폼 한 줄 배치 —
   style="display:flex; gap:6px; align-items:center;" 인라인을 통일(2026-08-19 인라인 제거).
   2026-10-07 — 같은 줄에 있던 .doc-actions 래퍼는 하단 공용 액션바(.form-actions)로 합쳐지며 없어졌다. */
.doc-action-row {
    display: flex;
    gap: 6px;
    align-items: center;
}

/* 전자결재 문서 상세의 의견(댓글) 영역 — 반복되던 인라인 style 6곳을 통일(2026-08-19 인라인 제거
   겸 #888/#eee/#999 다크모드 버그 수정). */
.doc-comments {
    margin-top: 24px;
}

.doc-comments-title {
    font-size: 16px;
}

.doc-comment-form {
    margin: 12px 0;
}

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

.doc-comment-item {
    border-bottom: 1px solid var(--color-line-basic);
    padding: 10px 0;
}

.doc-comment-meta {
    font-size: 13px;
    color: var(--color-gray);
}

.doc-comment-empty {
    color: var(--color-gray);
    padding: 10px 0;
}

/* 메일 보기(mail/show.blade.php) 본문 + 이전/다음 글 탐색 줄 — style="padding:16px 0;
   white-space:pre-wrap;" / "margin-top:16px; border-top:1px solid #eee; padding-top:12px;"
   인라인을 통일(2026-08-19 인라인 제거 겸 #eee 다크모드 버그 수정). */
.doc-mail-content {
    padding: 16px 0;
    white-space: pre-wrap;
}

.doc-nav-row {
    margin-top: 16px;
    border-top: 1px solid var(--color-line-basic);
    padding-top: 12px;
}

/* 설정(admin) 목록 화면 상단 요약 정보 박스 — login-history/trash/site-visits/annual-leaves 4곳에서
   반복되던 style="margin-bottom:12px;"(또는 16px) 인라인을 통일(2026-08-19 인라인 제거). */
.list-summary-box {
    margin-bottom: 12px;
}

/* 방문통계(admin/site-visits) 2열 통계 레이아웃 + 시간대별 막대그래프 —
   반복 inline style(flex 레이아웃 3곳, background:#2e7d32 하드코딩)을 통일
   (2026-08-19 인라인 제거 겸 다크모드 버그 수정). 막대 너비는 행마다 다른 계산값이라 계속 인라인. */
.stat-columns {
    display: flex;
    gap: 24px;
    flex-wrap: wrap;
}

.stat-column {
    flex: 1;
    /* 300px 폭 실측으로 발견한 것과 동일한 함정(§52.13 hr/index.blade.php의 flex:1;min-width:280px)
       — 고정 280px는 그 자체로 300px 미만 폭에서 넘친다. min()으로 컨테이너 폭을 넘지 않게 캡. */
    min-width: min(280px, 100%);
}

.visit-bar {
    background: var(--color-green);
    height: 10px;
}

/* 폼 다음에 이어지는 소제목(h2.section-subtitle) 위 여백을 더 크게 — annual-leaves/show.blade.php
   2곳에서 반복되던 style="margin-top:24px;" 인라인을 통일(2026-08-19 인라인 제거). */
.section-subtitle.mt-lg {
    margin-top: 24px;
}

/* 대시보드가 아닌 일반 관리자 화면의 소제목(h2/h3) — job-grades/annual-leaves 등에서 반복되던
   font-size:16px; margin:18px 0 8px; 인라인을 통일(2026-08-14 스타일 일원화 감사). 상단 여백만
   다른 경우 style="margin-top:Npx"로 개별 오버라이드. */
.section-subtitle {
    font-size: 16px;
    margin: 18px 0 8px;
}

h2.tit-h2 em.tit {
    font-family: var(--font-point);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
}

h2.tit-h2 em.tit small {
    font-weight: var(--font-weight-medium);
    color: var(--color-point);
}

h3.tit-h3 {
    padding: var(--padding-basic);
    border-bottom: 1px solid var(--color-line-basic);
    font-size: clamp(0.875rem, 3vw, 1rem);
    font-weight: var(--font-weight-regular);
}

h3.tit-h3.flex,
h3.tit-h3.flex-start,
h3.tit-h3.flex-between {
    padding: 1rem var(--padding-basic);
}

h3.tit-h3 em.tit {
    font-size: clamp(1.125rem, 3vw, 1.375rem);
    font-weight: var(--font-weight-semibold);
}

h4.tit-h4 {
    margin-bottom: 0.5rem;
    font-size: clamp(1rem, 3vw, 1.125rem);
    font-weight: var(--font-weight-semibold);
    letter-spacing: -.5pt;
}

.comment {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
}

/* 전자결재 구조화 문서 // 상세 파셜(detail-*.blade.php) 공용 카드 —
   detail-*.blade.php 10개 파일이 각자 border:1px solid #eee 를 복붙하던 것을 대체(감사 펀치리스트 4번). */
.approval-detail-card {
    border: 1px solid var(--color-line-basic);
    border-radius: 6px;
    padding: 12px;
    margin-bottom: 12px;
}

/* 전자결재 // 결재라인 상태 카드(components/approval-line-status.blade.php) —
   approval/show.blade.php + contract/show.blade.php(2곳) + project/show.blade.php(2곳)에 복붙되어
   있던 동일한 인라인 스타일을 공용 컴포넌트 하나로 묶으면서 함께 옮긴다(감사 펀치리스트 3번). */
.approval-step-list {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.approval-step-card {
    border: 1px solid var(--color-line-basic);
    border-radius: 6px;
    padding: 8px 12px;
    min-width: 120px;
    text-align: center;
}

.approval-step-card.is-assist {
    background-color: var(--color-line-light);
    border-style: dashed;
}

.approval-step-card.is-current {
    background-color: rgba(var(--color-point-rgb), 0.08);
    border-color: var(--color-point);
}

.approval-status-approved  { color: var(--color-green) !important; }
.approval-status-rejected  { color: var(--color-red) !important; }
.approval-status-held      { color: var(--color-teal) !important; }
.approval-status-delegated { color: var(--state-purple) !important; }
.approval-status-pending   { color: var(--color-gray) !important; }

/* 프로젝트 자체 상태(project/index.blade.php 목록) — 2026-08-25 채팅 지시("프로젝트 등록/리스트
   개선 통합" Architecture 결정문 Task 2). .approval-status-*(위)는 결재절차 진행상태(승인/반려/대기/
   전결/위임)를 나타내는 축이고, 프로젝트 자체 상태(임시저장/진행중/승인완료/반려/취소됨,
   Project::effectiveStatus())는 별개 축이라 재사용하지 않는다 — 이유: (a) 값 어휘가 겹치지 않는다
   (approved/rejected는 겹치지만 held/delegated/pending은 프로젝트엔 없고, draft/canceled는 결재절차엔
   없다), (b) 두 축을 같은 클래스 이름으로 묶으면 나중에 결재절차 색상 팔레트를 바꿀 때 프로젝트 상태
   색상까지 의도치 않게 함께 바뀐다. draft(임시저장)=빨강/in_progress(진행중)=파랑은 --color-red/
   --color-blue가 라이트·다크 겸용 확인됨(theme-basic.css :root/html.theme-dark 양쪽 정의 대조) —
   .btns-red/.btns-blue와 동일한 fill+--color-white(다크에서 어두운 잉크로 뒤집히는 "채워진 배지 위
   글자색" 토큰) 패턴을 그대로 재사용한다. approved(승인완료)=검정은 --color-black을 배경(fill)으로
   쓰지 않는다 — basic-setting.css에 라이트/다크 겸용 아닌 단일 정의(#000)뿐이라 다크에서 순검정
   덩어리가 된다(결정문 지시). 대신 --color-basic(잉크, 겸용) 테두리+텍스트 + --color-bg-gray(면,
   겸용) 배경의 border+연한배경 조합으로 다크 대비를 확보한다. rejected/canceled는 이 3색 스킴 밖이라
   기존처럼 무채색이되, 레이아웃(패딩/둥근모서리)만 같은 배지 구조로 통일한다
   (resources/views/components/project-status-badge.blade.php). */
.project-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
}
.project-status-draft       { border-color: var(--color-red); background-color: var(--color-red); color: var(--color-white) !important; }
.project-status-in_progress { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white) !important; }
.project-status-approved    { border-color: var(--color-basic); background-color: var(--color-bg-gray); color: var(--color-basic) !important; }
.project-status-plain       { border-color: var(--color-line-basic); background-color: transparent; color: var(--color-gray) !important; }

/* 전자결재 문서 자체 상태(approval/index.blade.php 목록) — 2026-08-26 채팅 지시("전자결재 리스트
   메뉴 전면 개편") "상태값을 뒤로 보내고 임시저장(빨강)/진행 중(파랑)/완료(검정)". .project-status-*(위)와
   값 어휘·색상 규칙이 우연히 완전히 같지만(둘 다 draft/in_progress/approved 3색 + 나머지 무채색) 재사용
   하지 않는다 — .approval-status-*(결재절차 진행상태)를 프로젝트 상태와 분리한 것과 동일한 이유로,
   "전자결재 문서 상태"와 "프로젝트 상태"도 값 어휘가 우연히 겹치는 별개 축이라 한 클래스로 묶으면 한쪽
   팔레트를 바꿀 때 다른 쪽도 의도치 않게 바뀐다. 색상값 자체는 .project-status-*와 동일하게 복사한다. */
.approval-doc-status-badge {
    display: inline-block;
    padding: 2px 10px;
    border-radius: 4px;
    font-size: var(--font-size-xs);
    line-height: 1.6;
    border: 1px solid transparent;
    white-space: nowrap;
}
.approval-doc-status-draft       { border-color: var(--color-red); background-color: var(--color-red); color: var(--color-white) !important; }
.approval-doc-status-in_progress { border-color: var(--color-blue); background-color: var(--color-blue); color: var(--color-white) !important; }
.approval-doc-status-approved    { border-color: var(--color-basic); background-color: var(--color-bg-gray); color: var(--color-basic) !important; }
.approval-doc-status-plain       { border-color: var(--color-line-basic); background-color: transparent; color: var(--color-gray) !important; }

/* 전자결재 // 문서종류 선택 화면(approval/structured/chooser.blade.php) — 인라인 style로 나열만 되어
   있던 <ul><li> 목록을 카드형 타일 그리드로 대체(감사 펀치리스트 1번). 이 앱에 아직 "선택형 카드 그리드"
   컴포넌트가 없어 basic-box의 플랫 카드 정체성(그림자/라운드 없음)을 그대로 잇는 타일을 새로 만든다. */
.approval-quick-links {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
}

.approval-type-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(160px, 1fr));
    gap: 8px;
}

.approval-type-tile {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 12px 14px;
    border: 1px solid var(--color-line-basic);
    border-radius: 6px;
    text-align: center;
    color: var(--color-basic);
    font-size: clamp(0.8125rem, 3vw, 0.9375rem);
    transition: .2s;
}

.approval-type-tile:hover {
    border-color: var(--color-point);
    color: var(--color-point);
    background-color: rgba(var(--color-point-rgb), 0.06);
}

/* 검색형 콤보박스(project/partials/info-fields.blade.php의 클라이언트 선택) — 거래처가 많아질 걸
   대비해 일반 <select> 대신 타이핑 필터링이 되는 드롭다운을 새로 만든다(2026-08-12 채팅 지시).
   basic-box와 같은 플랫 카드 정체성(그림자/큰 라운드 없음)을 그대로 잇는다. */
.searchable-select {
    position: relative;
}

/* 2026-08-26 채팅 지시("거래처 검색 기능에서 거래처가 스크롤 생기면서 숨어버리는 ui버그") — 원래
   position:absolute + 부모 기준 top/left/right였는데, 부모 조상 중 하나가 overflow:hidden이면
   드롭다운이 그 경계에서 잘리고(예: project/form.blade.php의 #projectInfo.overflow-hidden),
   position:sticky인 다른 영역(#project-form-tabs, z-index:200)에도 쌓임 순서가 밀렸다.
   position:fixed로 바꿔 어떤 조상의 overflow/스택 컨텍스트에도 갇히지 않게 하고, 위치(top/left/width)는
   각 initSearchableSelect() 구현이 열릴 때·스크롤/리사이즈마다 입력창 기준 getBoundingClientRect()로
   인라인 스타일로 직접 계산해 넣는다(아래 4곳 전부 동일하게 적용:
   project/partials/info-fields.blade.php, project/partials/cost-fields.blade.php,
   components/approval-overtime-participants.blade.php, finance/tax-bills/form.blade.php). */
.searchable-select-list {
    display: none;
    position: fixed;
    z-index: 300;
    max-height: 260px;
    overflow-y: auto;
    margin: 0;
    padding: 4px 0;
    list-style: none;
    background-color: var(--color-box-basic);
    border: 1px solid var(--color-line-basic);
    border-radius: 6px;
}

.searchable-select-list li {
    padding: 8px 12px;
    cursor: pointer;
    font-size: clamp(0.8125rem, 3vw, 0.9375rem);
}

.searchable-select-list li:hover {
    background-color: var(--color-background);
}

.searchable-select-list li.searchable-select-empty {
    cursor: default;
    color: var(--color-gray);
}

.searchable-select-list li.searchable-select-empty:hover {
    background-color: transparent;
}

.search-keyword {
    background-color: rgba(var(--color-yellow-rgb),0.4);
    color: var(--color-red);
    font-weight: var(--font-weight-semibold);
}

.copyright {
    padding: 1rem 2rem;
    margin-top: 0.5rem;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray-light);
    text-align: center;
}

.in-border-top {
    border-top: 1px solid var(--color-line-basic);
}

.in-border-bottom {
    border-bottom: 1px solid var(--color-line-basic);
}

.in-border-left {
    border-left: 1px solid var(--color-line-basic);
}

.in-border-right {
    border-right: 1px solid var(--color-line-basic);
}

.progress-rate {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.progress-rate .progress-bar {
    flex-shrink: 0;
    position: relative;
    width: 70px;
    height: 10px;
    background-color: var(--color-background);
    box-shadow: inset 1px 2px 3px rgba(var(--color-black-rgb),0.04);
    border-radius: 10px;
}

.progress-rate .progress-bar:after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: var(--percent-num);
    background-color: var(--color-blue);
    border-radius: 10px;
    content: '';
}

.progress-rate.complete .progress-bar:after {
    background-color: var(--color-green);
}

.pc-only {
    display: none;
}

@media screen and (min-width: 1023px) {
    .width-col-2 {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
        gap: 0.5rem;
    }

    .width-col-2 .basic-box {
        width: calc(50% - 0.25rem);
    }

    .width-col-2 .basic-box:not(:first-child) {
        margin-top: 0rem;
    }
}

@media screen and (min-width: 1239px) {
    #container {
        padding-left: var(--side-width);
    }
}

@media screen and (min-width: 1439px) {
    #container {
        min-height: calc(100vh - var(--header-height));
    }

    .m-only {
        display: none;
    }

    .pc-only {
        display: block;
    }
}

/* 서브페이지 콘텐츠 폭 캡 — 예전엔 이 규칙이 @media (min-width:1921px) 안에 갇혀 있어 초광폭 모니터가
   아니면 전혀 적용되지 않았다(1920px 이하 화면 전부가 대상 밖). 그래서 상단 타이틀(.top-location)은
   내용이 짧아 시각적으로 좁아 보이는데 실제 콘텐츠(표/폼)는 사이드바를 뺀 나머지 폭 전체로 꽉 차
   보이는 불일치가 실사용 해상도 대부분에서 상시로 보였다. 게이트를 없애 항상 적용한다 — 캡 값(1640px)은
   그대로 두어 표/그리드가 좁아지는 폭은 늘리지 않는다(뷰포트가 1640px+사이드바 폭보다 좁으면 어차피
   no-op이라 일반 데스크톱 이하에서는 기존과 동일하게 보인다). */
/* 좌우 여백은 여기 .dashboard 한 곳에서만 준다 — 각 서브페이지가 각자 콘텐츠 div에 패딩을 넣게
   하면(그런 관례가 없다) 화면마다 여백이 들쭉날쭉해진다. 실측 결과 서브페이지 콘텐츠 div는 패딩이
   0이었고 .top-location만 자기 패딩(24px)이 있어서, 제목은 안쪽에 들어가 보이고 그 아래 표/폼은
   사이드바 바로 옆까지 꽉 차 보이는 불일치가 있었다 — 이제 .dashboard가 좌우 여백을 주므로
   .top-location의 좌우 패딩은 지운다(안 지우면 제목만 이중으로 더 들어가 보인다). */
.dashboard {
    /* 2026-09-09 — 아래 .basic-box/.input-write-form 등 컴포넌트가 각자 자기 padding을 이미 갖고
       있어(이번 배치의 여러 이중패딩 수정과 동일 원칙), 이 레벨의 padding은 캡드 컨테이너
       구조(아래 max-width 규칙)와 함께 폐지한다. 좌우 여백은 .top-location이 다시 맡는다. */
    /* padding: 2rem var(--padding-lg) 0; */
}

/* 2026-08-11 코디네이터 채팅 지시("모달 스크롤이 이상해") — 이 캡이 :not(.groupware-modal) 없이
   .dashboard > aside 전부를 잡다 보니, .dashboard 바로 아래 놓인 groupware-modal(예: clients/show.blade.php
   의 담당자 추가 모달)까지 전체화면 오버레이가 아니라 1640px 폭의 가운데 정렬 박스로 눌려버렸다 —
   실제로는 오버레이가 뷰포트 우측 끝까지 안 닿아 스크롤바가 화면 가운데쯤(진짜 오른쪽 끝이 아닌 곳)에
   떠 보이는 버그였다. 모달은 이 폭 제한과 무관해야 하므로 제외한다.
   2026-08-14 채팅 지시("max-width가 form 쪽에는 안걸려있는거같은데") — 글쓰기 폼 25곳이 @section('content')
   최상위 요소로 form 태그를 바로 쓰는데(예: property 하위 form.blade.php들), 이 셀렉터가 div/aside/section/article만
   잡고 form은 빠뜨려서 폭 제한 없이 화면 끝까지 늘어나고 있었다. form도 추가한다. */
.dashboard > div:not(.groupware-modal),
.dashboard > aside:not(.groupware-modal),
.dashboard > section:not(.groupware-modal),
.dashboard > article:not(.groupware-modal),
.dashboard > form:not(.groupware-modal) {
    /* 2026-09-09 — 위 .dashboard padding 폐지와 짝. max-width: 1640px;는 그대로 두면 위 이유 결정문
       실측 사례에서 폭 제한 이유가 됐던 문제(캡드 컨테이너 + 사이드바 줄어든 만큼 여백만 넓어지는 것)
       였는데, 컴포넌트 자체 padding 체계로 옮기면서 더는 캡이 필요 없어졌다. */
    max-width: 100%;
    margin: 0 auto;
}



/* 사이드 영역 */
.side-box {
    position: fixed;
    top: calc(var(--header-height) * 2);
    left: 0;
    bottom: 0;
    width: var(--side-width);
    border-right: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    font-size: 0.875rem;
    transition: .2s ease;
    transform: translate(-100%);
    z-index: 900;
}

.side-on .side-box {
    transform: translateX(0);
}

.side-box .inner {
    max-height: 100%;
}

.side-box .side-padding {
    padding: 1rem;
}

.side-box .top-line {
    border-top: 1px solid var(--color-line-basic);
}

.side-box h3.side-tit-h3 {
    margin-bottom: 0.5rem;
    font-size: 0.813rem;
    color: rgba(var(--color-point-rgb),0.5);
    font-weight: var(--font-weight-semibold);
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li:not(:first-child) {
    margin-top: 2px;
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li a.sgnb-1a {
    position: relative;
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    height: 32px;
    transition: .2s;
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li a.sgnb-1a:before {
    position: absolute;
    top: 0;
    left: -0.75rem;
    right: -0.75rem;
    bottom: 0;
    background-color: var(--color-background);
    opacity: 0;
    border-radius: 5px;
    content: '';
    transition: .3s;
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li a.sgnb-1a em,
.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li a.sgnb-1a span,
.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li a.sgnb-1a small {
    position: relative;
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li a.sgnb-1a em {
    flex-grow: 1;
    font-size: 0.938rem;
    letter-spacing: -.5pt;
}

/* 2026-08-14 — 게시판 안읽음 NEW 뱃지(count-num과 같은 모양, 신호를 구분하려고 point색 대신 red). */
.badge-new {
    display: inline-block;
    min-width: 17px;
    padding: 1px 5px;
    margin-left: 4px;
    background-color: var(--color-red);
    color: var(--color-white);
    font-size: 0.625rem;
    text-align: center;
    border-radius: 18px;
    line-height: 1.4;
}

.side-box .side-gnb .count-num {
    min-width: 17px;
    padding: 1px 5px;
    background-color: var(--color-point);
    color: var(--color-white);
    font-size: 0.625rem;
    text-align: center;
    border-radius: 18px;
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li a.sgnb-1a .arrow {
    flex-shrink: 0;
    width: 16px;
    color: var(--color-gray-light);
    text-align: center;
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li.select a.sgnb-1a:before,
.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li:hover a.sgnb-1a:before {
    opacity: 1;
}

.side-box .side-gnb ul.sgnb-1ul li.sgnb-1li.select a.sgnb-1a em {
    color: var(--color-point);
    font-weight: var(--font-weight-medium);
}

.side-box .side-gnb ul.sgnb-2ul {
    padding-block: 0.3rem 0.75rem;
}

.side-box .side-gnb ul.sgnb-2ul li.sgnb-2li a.sgnb-2a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    height: 26px;
    padding-right: calc(0.5rem + 16px);
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
}

.side-box .side-gnb ul.sgnb-2ul li.sgnb-2li a.sgnb-2a .count-num {
    background-color: var(--color-background);
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
}

.side-box .side-gnb ul.sgnb-2ul li.sgnb-2li.select a.sgnb-2a {
    color: var(--color-point);
    font-weight: var(--font-weight-medium);
}

.side-box .side-onoff-btn {
    position: absolute;
    bottom: 0;
    left: 100%;
    width: 50px;
    height: 50px;
    border-right: 1px solid var(--color-line-basic);
    border-top: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    font-size: 1.25rem;
    color: var(--color-gray);
    border-radius: 0 5px 0 0;
}

.side-on .side-box .side-onoff-btn em {
    transform: rotate(180deg);
}

@media screen and (min-width: 767px) {
    .side-box .side-padding {
        padding: 1.5rem 1rem;
    }
}

@media screen and (min-width: 1239px) {
    .side-box {
        transform: translateX(0) !important;
    }

    .side-box .side-onoff-btn {
        display: none !important;
    }
}

@media screen and (min-width: 1439px) {
    .side-box {
        top: var(--header-height);
    }
}


/* 사이드 영역 // Notification */
.side-notification .notification-list li:not(:first-child) {
    margin-top: 0.5rem;
}

.side-notification .notification-list li a {
    display: flex;
    flex-direction: column;
}

.side-notification .notification-list li a .date {
    font-size: 90%;
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
}

@media screen and (min-width: 1239px) {
    .side-notification .notification-list li a:hover em {
        color: var(--color-point);
    }
}


/* 사이드 영역 // 메인 사이드 버튼 */
.side-btn-list ul {
    flex-wrap: wrap;
    border-top: 1px solid var(--color-line-basic);
}

.side-btn-list ul li {
    width: 33.3333%;
    border-bottom: 1px solid var(--color-line-basic);
    border-right: 1px solid var(--color-line-basic);
}

.side-btn-list ul li:nth-child(3n) {
    border-right: none;
}

.side-btn-list ul li a {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5rem 0;
    text-align: center;
    color: var(--color-gray);
    font-size: 0.813rem;
    letter-spacing: -.5pt;
    transition: .2s ease-in;
}

.side-btn-list ul li a .ico {
    position: relative;
    width: 40px;
    font-size: 0;
    transition: .2s ease-in;
}

.side-btn-list ul li a.count-num .ico:after {
    position: absolute;
    top: 0;
    right: 0;
    min-width: 16px;
    height: 16px;
    line-height: 16px;
    padding: 0 4px;
    background-color: var(--color-red);
    font-size: 0.688rem;
    color: var(--color-white);
    border-radius: 8px;
    content: attr(data-count-num);
    transform: translateX(30%);
}

@media screen and (min-width: 1239px) {
    .side-btn-list ul:hover li a:not(:hover) {
        filter: grayscale(1);
        opacity: 0.7;
    }

    .side-btn-list ul:hover li a:hover {
        color: var(--color-point);
    }

    .side-btn-list ul:hover li a:hover .ico {
        transform: scale(1.1);
    }
}



/* 사이드 영역 // Today 인원현황 */
.side-today-member .today-member-list {
    gap: 1rem;
}

/* 2026-08-14 — "내 잔여연차" 줄(today-member-list 밖, 사이드바 폭에서 내근 옆에 붙이면 줄바꿈이
   깨져서 별도 줄로 뺐다)도 같은 dt(연한 글씨)/dd(굵은 회색 숫자) 스타일을 쓴다. */
.side-today-member .today-member-list dl,
.side-today-member > dl {
    gap: 0.5rem;
}

.side-today-member .today-member-list dl dt,
.side-today-member > dl dt {
    font-weight: var(--font-weight-regular);
}

.side-today-member .today-member-list dl dd,
.side-today-member > dl dd {
    color: var(--color-gray-light);
    font-weight: var(--font-weight-semibold);
}

.side-today-member .today-member-list .detail-onoff-btn {
    color: var(--color-gray);
}

.side-today-member .today-member-list .detail-onoff-btn em {
    display: block;
    transition: .3s;
}

.side-today-member .today-member-list .detail-onoff-btn.on em {
    transform: rotate(180deg);
}

.side-today-member .today-member-detail {
    padding: 1rem;
    margin-top: 1rem;
    border: 2px solid var(--color-line-light);
    border-radius: 0.5rem;
}

.side-today-member .today-member-detail dl:not(:first-child) {
    padding-top: 1rem;
    margin-top: 1rem;
    border-top: 1px solid var(--color-line-light);
}

.side-today-member .today-member-detail dl dt {
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-semibold);
    color: var(--color-point);
}

.side-today-member .today-member-detail dl dd ul li {
    display: flex;
    justify-content: space-between;
    align-items: center;
    color: var(--color-gray);
}

.side-today-member .today-member-detail dl dd ul li:not(:first-child) {
    margin-top: 3px;
}

.side-today-member .today-member-detail dl dd ul li .num {
    color: var(--color-gray-light);
    font-size: 0.75rem;
}

.side-today-member .today-member-detail dl dd ul li .num b {
    font-weight: var(--font-weight-semibold);
    font-size: 0.875rem;
}


/* 공통 // 상단 로케이션 및 메뉴 영역 */
.top-location {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    /* 2026-09-09 — 위 .dashboard padding 폐지와 짝 — 좌우 여백을 다시 여기서 맡는다. */
    padding: var(--padding-basic) var(--padding-lg);
}

.top-location .loca-state {
    flex-shrink: 0;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0 10px;
    color: var(--color-gray);
    font-size: clamp(0.75rem, 3vw, 0.875rem);
}

.top-location .loca-state .dep {
    font-weight: var(--font-weight-regular);
}

.top-location .loca-state .dep.on {
    font-weight: var(--font-weight-medium);
    color: var(--color-point);
}

.top-location .loca-state span {
    width: 4px;
    height: 4px;
    background-color: rgba(var(--color-basic-rgb),0.3);
    font-size: 0;
    border-radius: 50%;
}

@media screen and (min-width: 767px) {
}

@media screen and (min-width: 1023px) {
    .top-location {
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
    }
}


/* 공통 // 페이지네이션
   이 자리에 있던 `.gw-pagination-*`(이 프로젝트가 자체 발명한 번호 나열형 1 2 3 4 5)은 제거했다.
   참조 사이트의 진짜 페이지네이션 컴포넌트 `.pagenation-area`가 이 파일 아래쪽(#페이지네이션 절)에
   이미 이식돼 있는데 partials/pagination.blade.php가 그걸 안 쓰고 자체 클래스를 쓰고 있었던 것 —
   그래서 페이지네이션만 사이트의 나머지와 톤이 달랐다. 이제 그 파셜이 `.pagenation-area`를 쓴다.
   (스타일 규칙 본체는 아래 "페이지네이션" 절에 있다. 여기에 중복 정의하지 말 것.) */


/* 공통 // 스크롤 탭 메뉴 */
.scroll-tab {
    position: sticky;
    top: calc(var(--header-height) * 2);
    left: 0;
    box-shadow: 0 20px 20px -20px rgba(var(--color-black-rgb),0.1);
    z-index: 200;
}

.basic-tab-list {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}

.basic-tab-list li {
    width: auto;
}

.basic-tab-list .basic-tab-btn {
    position: relative;
    display: block;
    padding: var(--padding-basic);
    color: var(--color-gray);
}

.basic-tab-list .basic-tab-btn:after {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 5px;
    height: 4px;
    background-color: var(--color-point);
    opacity: 0;
    transition: .3s;
    border-radius: 4px 4px 0 0;
    content: '';
}

.basic-tab-list .basic-tab-btn.active {
    font-weight: var(--font-weight-semibold);
    color: var(--color-point);
}

.basic-tab-list .basic-tab-btn.active:after {
    width: 100%;
    opacity: 1;
}

.tab-list-year {
    padding-right: 1.5rem;
}

@media screen and (min-width: 1439px) {
    .scroll-tab {
        top: var(--header-height);
    }
}


/* 공통 // 스크롤 관리 버튼 */
.scroll-btn-area {
    position: sticky;
    bottom: 0;
    left: 0;
    box-shadow: 0 -20px 20px -20px rgba(var(--color-black-rgb),0.1);
    z-index: 100;
}




/* 공통 // 리스트 검색 및 뷰타입 선택 */
.board-search-top {
    position: relative;
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.list-search-area {
    flex-grow: 1;
    flex-wrap: wrap;
    gap: 0.5rem;
    /* .board-search-top의 flex 아이템으로서 기본 min-width:auto라 자기 내용물(특히 .base-search)의
       "선호 너비"만큼은 줄어들지 않던 문제 — 글자 크기를 키우면(안드로이드 디스플레이 확대 설정 등)
       입력창의 브라우저 기본 선호폭 자체가 커져서 300px 폭에서도 넘쳤다(실측: 폰트 140%에서 재현).
       min-width:0으로 강제 축소 허용. */
    min-width: 0;
}

.list-search-area .base-search {
    position: relative;
    display: flex;
    justify-content: space-between;
    align-items: center;
    /* 위 .list-search-area와 동일한 이유 — .base-search 자신도 .list-search-area의 flex 아이템이라
       min-width:0이 없으면 안에 있는 input의 선호폭만큼 자기 자신이 넓어져 부모 폭을 밀어낸다. */
    min-width: 0;
    background-color: var(--color-background);
    border-radius: 5px;
}

.list-search-area .base-search .search-input {
    flex-grow: 1;
}

.list-search-area .base-search .search-btn {
    flex-shrink: 0;
    padding: 0 0.5rem;
    color: var(--color-gray);
}

/* 목록 검색 결과 강조(resources/views/components/highlight.blade.php) — 색상은 사용자 지정값. */
mark {
    background-color: rgba(var(--color-yellow-rgb), 0.4);
    color: var(--color-red);
    font-weight: var(--font-weight-semibold);
}

.list-search-area .detail-search {
    position: relative;
}

.list-search-area .detail-search .detail-onoff-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: 43px;
    height: 41px;
    background-color: var(--color-gray);
    color: var(--color-white);
    font-size: 1.25rem;
    border-radius: 5px;
    text-align: center;
}

.list-search-area .detail-search .detail-onoff-btn em,
.list-search-area .detail-search .detail-onoff-btn .arrow {
    display: none;
}

.detail-search-box {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 60vh;
    padding-bottom: var(--padding-basic);
    background-color: var(--color-box-basic);
    font-size: 0.875rem;
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -5px 15px -8px rgba(var(--color-black-rgb),0.1);
    transition: .3s ease;
    z-index: 100;
}

.detail-search-box h4 {
    position: sticky;
    top: 0;
    left: 0;
    padding: var(--padding-basic) var(--padding-basic) 0;
    background-color: var(--color-box-basic);
    font-size: clamp(1rem, 3vw, 1.125rem);
    font-weight: var(--font-weight-medium);
    z-index: 100;
}

.detail-search-box .dsb-inner {
    padding: var(--padding-basic);
}

.detail-search-box dl:not(:first-of-type) {
    margin-top: 1rem;
}

.detail-search-box dl dt {
    margin-bottom: 0.5rem;
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    color: var(--color-gray);
}

.check-radio-list {
    position: relative;
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
}

.choice-list-type {
    flex-shrink: 0;
    overflow: hidden;
    position: relative;
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-radius: 5px;
}

.choice-list-type:before {
    position: absolute;
    display: block;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(var(--color-basic-rgb),0.1);
    border-radius: inherit;
    transform: translateZ(0);
    perspective: 1px;
    content: '';
}

.choice-list-type .choice-btn {
    position: relative;
    display: flex;
    justify-content: center;
    align-items: center;
    width: 40px;
    height: 40px;
    font-size: 1.125rem;
    color: var(--color-gray-light);
}

.choice-list-type .choice-btn:not(:first-child):after {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background-color: rgba(var(--color-basic-rgb),0.1);
    content: '';
}

.choice-list-type .choice-btn.selected {
    background-color: var(--color-point);
    color: var(--color-white);
}

@media screen and (min-width: 767px) {
    .list-search-area .base-search .search-input {
        width: 300px;
    }

    .list-search-area .detail-search .detail-onoff-btn {
        justify-content: space-between;
        gap: 1rem;
        padding: 0 1rem;
        font-size: 1rem;
    }

    .list-search-area .detail-search .detail-onoff-btn .ico {
        display: none;
    }

    .list-search-area .detail-search .detail-onoff-btn em,
    .list-search-area .detail-search .detail-onoff-btn .arrow {
        display: block;
    }
}

@media screen and (min-width: 1023px) {
    .list-search-area .base-search .search-input {
        width: 350px;
    }

    .list-search-area .base-search .search-btn {
        padding: 0 1rem;
    }


    .detail-search-box {
        position: absolute;
        bottom: auto;
        left: calc(50% - 250px);
        top: calc(100% + 0.5rem);
        width: 500px;
        box-shadow: 0 5px 15px rgba(var(--color-black-rgb),0.16);
        border-radius: 1rem;
    }
}


/* 공통 // 테이블 // 일반형 */
.basic-tbl:not(.no-topline) {
    border-top: 1px solid var(--color-line-basic);
}

.basic-tbl th,
.basic-tbl td {
    padding: 1rem 0.5rem;
    border-bottom: 1px dashed var(--color-line-basic);
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    color: var(--color-gray);
}

.basic-tbl thead th {
    line-height: 1.2;
    background-color: rgba(var(--color-point-rgb),0.05);
    font-weight: var(--font-weight-medium);
    color: var(--color-basic);
}

/* 정의목록형(각 행이 label+value 한 쌍) .basic-tbl에서 왼쪽 라벨 th — commute 신청서 상세 화면
   3곳에서 반복되던 style="text-align:left; background:#f8f8f8;" 인라인을 통일
   (2026-08-14 스타일 일원화 감사). 2026-08-19: #f8f8f8 하드코딩이 html.theme-dark 변수를 안 타서
   이 클래스를 쓰는 14개 화면(전자결재 구조화 문서 8종 + calendar/show + clients/show 등) 전부
   다크모드에서 라벨 칸만 흰색으로 남아 있었다(사용자 실측 제보, approval/33) — var(--color-background)로
   교체. */
.basic-tbl-label {
    text-align: left;
    background: var(--color-background);
}

.basic-tbl tr td a {
    color: var(--color-blue);
    font-weight: 500;
}

.basic-tbl tr td a:hover {
    color: var(--color-blue-hover);
    text-decoration: underline;
}

/* 정의목록형 상세 화면(전자결재 구조화 문서 8종 + commute 신청서 상세 3종)의 라벨 열 고정폭 —
   서로 다른 모듈 11곳에서 동일하게 반복되던 style="width:140px;" 인라인을 통일
   (2026-08-14 스타일 일원화 감사 2차). .basic-tbl-label과 항상 같이 쓰이지만, 이 폭 값을 안 쓰는
   다른 .basic-tbl-label 사용처(예: calendar/clients 상세표)까지 건드리지 않도록 별도 모디파이어로 둠. */
.detail-label-th {
    width: 140px;
}

.basic-tbl thead th button {
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    font-weight: var(--font-weight-medium);
}

.basic-tbl thead th .sort-btn.on {
    font-weight: var(--font-weight-semibold);
}

.basic-tbl thead th .sort-btn .fad {
    --fa-primary-color: var(--color-blue);
}

.basic-tbl tr.tr-bg-red th,
.basic-tbl tr.tr-bg-red td {
    background-color: rgba(var(--color-red-rgb),0.05);
}

.basic-tbl tr.tr-bg-blue th,
.basic-tbl tr.tr-bg-blue td {
    background-color: rgba(var(--color-blue-rgb),0.05);
}

.basic-tbl tr.tr-bg-green th,
.basic-tbl tr.tr-bg-green td {
    background-color: rgba(var(--color-green-rgb),0.05);
}

.basic-tbl tr.color-basic th,
.basic-tbl tr.color-basic td {
    color: var(--color-basic);
}

.basic-tbl tfoot tr:last-child th,
.basic-tbl tfoot tr:last-child td {
    border-bottom: none;
}

.basic-tbl.write-tbl tbody td,
.basic-tbl.write-tbl tfoot td {
    padding: 0.5rem;
}

.basic-tbl.list-tbl tbody tr:hover th,
.basic-tbl.list-tbl tbody tr:hover td {
    background-color: rgba(var(--color-basic-rgb),0.03);
}

.basic-tbl.write-tbl tfoot input[type=text] {
    font-weight: var(--font-weight-semibold);
}

/* 목록 표 "결과 없음" 안내 행 — finance/project/property 등 16곳에서 반복되던
   style="text-align:center; color:#999;" 인라인을 하나로 통일(2026-08-14 스타일 일원화 감사).
   2026-08-14(2차) 버그 수정: `.list-tbl-empty-row`(클래스 1개, 특이도 0,1,0)가 `.basic-tbl td`
   (클래스+요소, 특이도 0,1,1)에 밀려 color가 한 번도 적용된 적이 없었다(항상 --color-gray로
   렌더링됨) — 브라우저 getComputedStyle 실측으로 발견. `td.list-tbl-empty-row`로 특이도를
   맞춰 수정. 2026-08-19: #999 하드코딩을 var(--color-gray)로 교체(다크모드 버그 수정). */
.list-tbl-empty-row,
td.list-tbl-empty-row {
    text-align: center;
    color: var(--color-gray);
}


/* 공통 // 리스트 // 카드형 */
.board-list-card {
    position: relative;
    display: grid;
    grid-template-columns: 1fr;
    gap: 0.5rem;
    padding-inline: var(--padding-basic);
}

.board-list-card .bl-card-con {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 1rem;
    padding: 1rem;
    border: 1px solid var(--color-line-basic);
    transition: .3s;
}

.board-list-card .bl-card-con .num {
    font-size: 90%;
    color: var(--color-gray);
}

.board-list-card .bl-card-con .subject {
    line-height: 1.4;
    font-size: clamp(1rem, 3vw, 1.125rem);
    font-weight: var(--font-weight-medium);
    word-break: break-all;
}

.board-list-card .bl-card-con ul,
.board-list-card .bl-card-con .state {
    padding-top: 1rem;
    border-top: 1px dotted var(--color-line-basic);
    font-size: 0.875rem;
}

.board-list-card .bl-card-con ul li:not(:first-child) {
    margin-top: 0.5rem;
}

.board-list-card .bl-card-con ul dl {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 1rem;
}

.board-list-card .bl-card-con ul dl dt {
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
}

.board-list-card .bl-card-con ul dl dd {
    font-weight: var(--font-weight-medium);
}

.board-list-card .bl-card-con .state {
    text-align: right;
}

@media screen and (min-width: 767px) {
    .board-list-card {
        grid-template-columns: 1fr 1fr;
    }
}

@media screen and (min-width: 1023px) {
    .board-list-card {
        grid-template-columns: 1fr 1fr 1fr;
    }
}

@media screen and (min-width: 1239px) {
    .board-list-card .bl-card-con:hover {
        transform: translateY(-5px);
        border-color: var(--color-gray);
    }
}

@media screen and (min-width: 1639px) {
    .board-list-card {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }
}



/* 공통 // 글쓰기 폼 */
/* [PROJECT.md §15.47] legacy(newgw/views/**)는 글쓰기 폼을 항상
   <section class="basic-box"> ... <div class="basic-padding input-write-form"> 로 감쌌다
   (레퍼런스 114곳 중 113곳이 basic-padding + basic-box 조합).
   Laravel 이식본은 이 두 래퍼를 빠뜨린 채 .input-write-form 을 페이지 배경 위에 바로 얹었고,
   그 결과 input 의 채움색(--color-background #F5F5F8)과 페이지 배경(#wrapper 의 --color-background)이
   완전히 같은 색이 되어 input 이 보이지 않게 됐다(.basic-input 은 border:none, 채움색만으로 구분되는 디자인).
   41개 뷰를 각각 고치는 대신, 컨테이너 클래스 자체에 레퍼런스의 basic-box + basic-padding 결과값을
   그대로 부여한다 — 값이 동일하므로 나중에 뷰를 레퍼런스 마크업으로 되돌려도 렌더 결과는 같다.
   .basic-box 는 레퍼런스에서 radius/shadow 가 없는 평면 카드이므로 여기서도 추가하지 않는다. */
.input-write-form {
    position: relative;
    padding: var(--padding-basic);
    background-color: var(--color-box-basic);
}

/* 이미 흰 배경인 컨테이너(모달) 안에서는 카드 처리를 하지 않는다 —
   레퍼런스도 .groupware-modal-content 안에서는 basic-box/basic-padding 없이 맨 .input-write-form 만 썼다.
   (auth/login.blade.php 의 사용승인신청 · 아이디/비밀번호찾기 모달) */
.groupware-modal .input-write-form {
    padding: 0;
    background-color: transparent;
}

/* 한 페이지에 글쓰기 폼 블록이 여러 개인 경우(contract/show, contract/cancellation-request-form)
   레퍼런스의 <section class="basic-box mt-[1]"> 간격을 재현한다. */
.input-write-form + .input-write-form {
    margin-top: 1rem;
}

.input-write-form .input-form-box:not(:first-of-type) {
    margin-top: 2rem;
    padding-top: 2rem;
    border-top: 1px solid var(--color-line-basic);
}

.input-write-form .input-form-box.not-space {
    margin-top: 0;
    padding-top: 0;
    border-top: none;
}

.input-write-form .input-form-box h3 {
    margin-bottom: 1rem;
    font-family: var(--font-point);
    font-weight: var(--font-weight-medium);
    font-size: clamp(0.875rem, 3vw, 1.125rem);
}

.input-write-form .input-form-box .flex-between h3 {
    margin-bottom: 0;
}

.input-write-form .input-form-box h3 small {
    font-weight: var(--font-weight-medium);
}

.input-write-form .input-form-list {
    padding: var(--padding-basic);
}

.input-write-form .input-form-list dl {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}

.input-write-form .input-form-list dl a {
    color: var(--color-blue);
}

.input-write-form .input-form-list dl a:hover {
    color: var(--color-blue-hover);
    text-decoration: underline;
}

.input-write-form .input-form-list .con:not(:first-child) {
    margin-top: 1rem;
}

.input-write-form .input-form-list.text-size-md .con:not(:first-child) {
    margin-top: 0.5rem;
}

.input-write-form .input-form-list dl dt {
    font-size: 90%;
    font-weight: var(--font-weight-regular);
    color: var(--color-gray);
}

.input-write-form .input-form-list dl dd .input-form:not(:first-child) {
    margin-top: 5px;
}

.input-write-form .input-form-list dl dd .input-form.search-pw .pw-toggle-btn {
    position: absolute;
    top: 50%;
    right: 0;
    padding-inline: 1rem;
    transform: translateY(-50%);
    opacity: 0.5;
}

.input-write-form .input-form-list dl dd .input-form.search-pw .pw-toggle-btn.view {
    opacity: 1;
}

@media screen and (min-width: 767px) {
    .input-write-form.view-ver .input-form-box:not(:first-of-type) {
        padding-top: 0;
        margin-top: 1rem;
        border-top: none;
    }

    .input-form-box .input-form-list.not-padding {
        padding: 0;
    }

    .input-write-form .input-form-list.dl-width dl {
        flex-direction: row;
        justify-content: flex-start;
        align-items: stretch;
    }

    .input-write-form .input-form-list.dl-width dl dt {
        flex-shrink: 0;
        width: var(--input-dt-width);
        padding-top: 12px;
    }

    .input-write-form .input-form-list.dl-width dl dd {
        flex-grow: 1;
    }

    .input-write-form:not(.view-ver) .input-form-list.dl-width dl dd.no-input {
        padding-top: 12px;
    }

    /* finance/outsourcing-payments/show.blade.php 전용 — 위 .dl-width 기본값(align-items:stretch,
       dt padding-top:12px)이 이 화면의 표시전용(읽기전용) 상세 레이아웃과 안 맞아 개별 오버라이드.
       2026-08-14 스타일 일원화 감사 중 뷰에 박혀 있던 <style> 블록을 common.css로 이동. */
    #outsourcing-payment-detail .input-form-list.dl-width dl {
        align-items: center;
    }

    #outsourcing-payment-detail .input-form-list.dl-width dl dt {
        padding-top: 0;
    }

    .input-write-form .input-form-list dl dd .check-radio-list {
        display: flex;
        justify-content: flex-start;
        align-items: center;
    }

    .input-write-form.view-ver .input-form-list .con:not(:first-child) {
        margin-top: 0;
    }

    .input-write-form.view-ver {
        background-color: #fff;
    }

    /* [PROJECT.md §15.47] 위 view-ver 의 어두운 배경(--color-basic #191A1C)은 레퍼런스에서
       "문서 뷰어 매트" 역할이었고, 그 위에 항상 흰 시트가 얹혀 있었다 —
       레퍼런스 마크업: <div class="basic-padding input-write-form view-ver">
                        <article class="input-form-box bg-basic overflow-hidden rounded-sm">
       Laravel 이식본(contract/show, contract/cancellation-request-form)은 .input-form-box.bg-basic
       래퍼를 통째로 빠뜨려서, dd 셀이 투명 → 거의 검은 배경 위에 거의 검은 글자(--color-basic)가
       그대로 찍히고 있었다(라이브 확인: /contracts/33 dd 배경 rgba(0,0,0,0) / 글자 rgb(25,26,28)).
       .input-form-list 에 레퍼런스의 bg-basic + rounded-sm + overflow-hidden 결과를 부여해 흰 시트를 복원한다.
       레퍼런스 마크업에서는 이미 흰 부모 안이라 렌더 결과가 동일하므로 되돌려도 안전하다. */
    .input-write-form.view-ver .input-form-list {
        overflow: hidden;
        border-radius: 0.313rem;
        background-color: var(--color-box-basic);
    }

    .input-write-form.view-ver .input-form-list dl {
        gap: 0;
    }

    .input-write-form.view-ver .input-form-list dl dt,
    .input-write-form.view-ver .input-form-list dl dd {
        padding: 10px;
        border-bottom: 1px solid var(--color-line-basic);
    }

    .input-write-form.view-ver .input-form-list dl dt {
        background-color: var(--color-background);
    }
}

@media screen and (min-width: 1024px) {
    .input-write-form .input-form-list .pc-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 1rem 2rem;
    }

    .input-write-form .input-form-list .pc-grid.md\:row-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .input-write-form .input-form-list .pc-grid.md\:row-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .input-write-form .input-form-list .pc-grid .con {
        margin-top: 0 !important;
    }

    .input-write-form.view-ver .input-form-list .pc-grid {
        gap: 0;
    }
}

@media screen and (min-width: 1239px) {
    .input-write-form .input-form-box:not(:first-of-type) {
        margin-top: 3rem;
        padding-top: 3rem;
    }

    .input-write-form .input-form-list .pc-grid.lg\:row-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .input-write-form .input-form-list .pc-grid.lg\:row-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .input-write-form .input-form-list .pc-grid.lg\:row-5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }

    .input-write-form.view-ver .input-form-list dl dt,
    .input-write-form.view-ver .input-form-list dl dd {
        padding: 1rem;
    }
}

@media screen and (min-width: 1439px) {
    .input-write-form .input-form-list .pc-grid.xl\:row-3 {
        grid-template-columns: 1fr 1fr 1fr;
    }

    .input-write-form .input-form-list .pc-grid.xl\:row-4 {
        grid-template-columns: 1fr 1fr 1fr 1fr;
    }

    .input-write-form .input-form-list .pc-grid.xl\:row-5 {
        grid-template-columns: 1fr 1fr 1fr 1fr 1fr;
    }
}


/* 공통 // 이전글/다음글 */
.prev-next-box {
    position: relative;
    border-top: 1px solid var(--color-line-basic);
}

.prev-next-box .pnc-con:not(:first-child) {
    border-top: 1px solid var(--color-line-basic);
}

.prev-next-box .pnc-con .pnc-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 1.5rem 0;
}

.prev-next-box .pnc-con .pnc-btn .ico {
    flex-shrink: 0;
    padding: 0 10px;
}

.prev-next-box .pnc-con .pnc-btn em {
    flex-grow: 1;
}

.prev-next-box .go-list-btn {
    display: none;
    width: 100px;
    height: 60px;
    line-height: 60px;
    margin: 0 auto;
    background-color: var(--color-bg-gray);
    text-align: center;
    font-size: 1.25rem;
    border-radius: 30px;
    transition: .3s;
    color: var(--color-gray);
}

@media screen and (min-width: 767px) {
    .prev-next-box {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
        align-items: center;
        border-top: none;
    }

    .prev-next-box .pnc-con {
        width: calc(50% - 120px);
    }

    .prev-next-box .pnc-con:not(:first-child) {
        border-top: none;
    }

    .prev-next-box .pnc-con.pnc-next .pnc-btn em {
        text-align: right;
    }

    .prev-next-box .go-list-btn {
        display: block;
        position: absolute;
        top: 50%;
        left: calc(50% - 50px);
        transform: translateY(-50%);
    }
}

@media screen and (min-width: 1023px) {
    .prev-next-box {
    }

    .prev-next-box .pnc-con .pnc-btn .ico {
        padding: 0 20px;
        font-size: clamp(1rem, 3vw, 1.5rem);
        color: var(--color-gray-deep);
    }

    .prev-next-box .pnc-con .pnc-btn em {
        font-size: clamp(0.875rem, 3vw, 1rem);
        color: var(--color-gray);
    }

    .prev-next-box .pnc-con .pnc-btn:not(.no-page):hover .ico,
    .prev-next-box .pnc-con .pnc-btn:not(.no-page):hover em {
        color: var(--color-basic) !important;
    }

    .prev-next-box .go-list-btn:hover {
        background-color: var(--color-point);
        color: var(--color-white);
    }
}



/* 공통 // 글쓰기 폼 // 결재라인 리스트 */
.approval-list {
    position: relative;
}

.approval-list > ul {
    display: flex;
    gap: 10px;
    padding-left: 0;
}

.approval-list > ul > li {
    width: 150px;
    height: 135px;
    background-color: var(--color-box-basic);
    transition: transform 0.2s ease-out;
}

.approval-list.in-sign > ul > li {
    height: 200px;
}

.approval-list .approval-con {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 100%;
    height: 100%;
    padding: 1rem;
    border: 1px solid var(--color-line-basic);
    border-radius: 5px;
    transition: 0.2s;
}

.approval-list .approval-con.me {
    border-color: var(--color-green);
    box-shadow: 0 2px 10px rgba(var(--color-green-rgb),0.3);
}

.approval-list .is-dragging .approval-con {
    border-color: var(--color-gray);
    box-shadow: 0 15px 15px -10px rgba(var(--color-black-rgb),0.1);
}

.approval-list .approval-con .job-position {
    color: var(--color-gray);
    font-size: 0.875rem;
}

.approval-list .approval-con .name {
    font-size: clamp(1rem, 3vw, 1.25rem);
    font-weight: var(--font-weight-semibold);
}

.approval-list .approval-con .sign {
    font-size: 0;
}

.approval-list .approval-con .sign img {
    max-height: 36px;
}

.approval-list .approval-con .date {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    margin-top: 1rem;
}

.approval-list .approval-con .date .basic-link {
    display: inline-block;
    width: auto;
}

.approval-list .approval-con .action-box,
.approval-list .approval-con .comment-box {
    position: absolute;
    top: 1rem;
    right: 0rem;
}

.approval-list .add-approval {
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    background-color: var(--color-background);
    font-weight: var(--font-weight-regular);
    color: var(--color-gray);
}

.approval-list .add-approval .icon {
    width: 70px;
    height: 70px;
    border-radius: 1px solid var(--color-line-light);
    background-color: var(--color-box-basic);
    border-radius: 50%;
    box-shadow: inset 0 2px 3px rgba(var(--color-black-rgb),0.05);
    font-size: 1.875rem;
}

.approval-save,
.memo-save {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    gap: 0.5rem;
}

.approval-save .basic-input,
.memo-save .basic-input {
    width: 100%;
}

.action-box .action-on-off-btn {
    padding: 0 1rem;
}

.action-box .action-list {
    position: absolute;
    top: 100%;
    right: 0.5rem;
    width: var(--action-width);
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    box-shadow: 0 4px 10px -5px rgba(var(--color-black-rgb),0.12);
    border-radius: 4px;
    transition: .3s;
}

.action-box .action-list ul li:not(:first-child) {
    border-top: 1px solid var(--color-line-basic);
}

.action-box .action-list .basic-link {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    width: 100%;
    padding: 0.5rem;
}

.action-box .action-list .basic-link span.icon {
    flex-shrink: 0;
    width: 20px;
    text-align: center;
}

@media screen and (min-width: 767px) {
    .approval-list > ul {
        flex-wrap: wrap;
    }

    .approval-list > ul > li {
        width: 25%;
        height: 150px;
        padding: 0 0.5rem 0.5rem 0;
    }

    .approval-save,
    .memo-save {
        flex-direction: row;
        justify-content: flex-start;
        align-items: center;
        gap: 1rem;
    }

    .approval-save .basic-input,
    .memo-save .basic-input {
        width: 250px;
    }
}

@media screen and (min-width: 1023px) {
    .approval-list > ul > li {
        width: 20%;
    }
}

@media screen and (min-width: 1239px) {
}

@media screen and (min-width: 1439px) {
    .approval-list > ul > li {
        width: 16.6666%;
    }
}

@media screen and (min-width: 1639px) {
    .approval-list > ul > li {
        width: 12.5%;
    }
}

/* 2026-09-09 — 좁은 화면에서 결재라인 카드 목록이 줄바꿈으로 찌그러지는 대신 가로 스크롤되게 한다. */
@media (max-width: 600px) {
    .approval-list > ul {
        overflow-x: auto;
        padding-bottom: 10px;
    }
    .approval-list .approval-con {
        min-width: 150px;
    }
}



/* 공통 // 글쓰기 폼 // 파일 첨부 */
.drag-file-upload {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    padding: var(--padding-lg);
    border: 2px dashed var(--color-line-basic);
    background-color: var(--color-background);
    color: var(--color-gray);
}

.drag-file-upload figure {
    font-size: 30px;
    color: var(--color-point);
}

.drag-file-upload button {
    padding-inline: 2rem;
    margin-top: 1rem;
}

.drag-file-upload.dragover {
    border-color: var(--color-point);
    background-color: var(--color-background);
}

.add-file-list {
    border: 1px solid var(--color-line-basic);
    border-radius: 0.313rem;
}

.drop-file-tbl {
    width: 100%;
}

.drop-file-tbl th,
.drop-file-tbl td {
    padding: 5px;
}

.drop-file-tbl thead th {
    border-bottom: 1px solid var(--color-line-basic);
}

.drop-file-tbl tbody td {
    border-bottom: 1px solid var(--color-line-light);
}

.drop-file-tbl .left-border {
    border-left: 1px solid var(--color-line-basic);
}


/* 공통 // 글쓰기 폼 // 이미지 업로더 */
.image-upload-area {
    position: relative;
}

.image-preview-box {
    position: relative;
}

.image-preview-box figure {
    overflow: hidden;
    width: var(--image-width);
    height: var(--image-height);
    position: relative;
    cursor: pointer;
    border-radius: var(--image-border);
    font-size: 0;
}

.image-preview-box figure:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(var(--color-black-rgb),0.1);
    border-radius: inherit;
    content: '';
}

.preview-img {
    width: 100%;
    height: 100%;
    object-fit: cover; /* 이미지가 찌그러지지 않고 영역을 꽉 채우도록 설정 */
}

.upload-icon-overlay {
    position: absolute;
    bottom: 0;
    right: 0;
    background: rgba(0, 0, 0, 0.5);
    color: white;
    width: 30px;
    height: 30px;
    line-height: 30px;
    text-align: center;
    border-radius: 50%;
    transform: translate(25%, 25%);
    cursor: pointer;
}



/* 공통 // 캘린더 */
.calendar-box h3.tit-h3 {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
}

.calendar-box h3.tit-h3 .month-choice .arrow-button {
    padding: 8px 0.5rem;
}

.schedule-list ul li .cal-state {
    display: flex;
    justify-content: center;
    align-items: center;
    gap: 5px;
    font-size: 0.875rem;
    color: var(--color-gray);
}

.schedule-list ul li .cal-state .won {
    font-size: 0.625rem;
}

.schedule-list ul li .cal-state.state-orange .won          { color: var(--state-orange); }
.schedule-list ul li .cal-state.state-lightgreen .won      { color: var(--state-lightgreen); }
.schedule-list ul li .cal-state.state-green .won           { color: var(--state-green); }
.schedule-list ul li .cal-state.state-red .won             { color: var(--state-red); }
.schedule-list ul li .cal-state.state-purple .won          { color: var(--state-purple); }

.calendar-tbl th,
.calendar-tbl td {
    padding: 5px;
    text-align: center;
}

.calendar-tbl thead th {
    padding: 10px 5px;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray-light);
    font-size: 0.875rem;
    opacity: 0.5;
}

.calendar-tbl tbody td {
    position: relative;
    padding-bottom: 1rem;
    vertical-align: top;
}

.calendar-tbl tbody td.day-disable {
    opacity: 0.3;
}

/* 날짜 클릭 선택 하이라이트. --color-blue-rgb는 theme-basic.css가 라이트/다크 테마별로 값을
   재정의하므로(다크모드 구현) 이 rgba만으로 두 테마 다 자동 대응된다 — 하드코딩 hex(#eef6ff) 배경을
   JS로 인라인 주입하던 이전 방식은 다크모드에서 흰색으로 튀는 버그가 있었다. */
.calendar-tbl tbody td.is-selected {
    background-color: rgba(var(--color-blue-rgb), 0.08);
    border-radius: 5px;
}

.calendar-tbl tbody td.today:before {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(var(--color-yellow-rgb),0.1);
    border-radius: 5px;
    content: '';
}

.calendar-tbl .day-num {
    margin-bottom: 0.5rem;
}

.calendar-tbl tbody td.day-prev .day-num {
    opacity: 0.5;
}

.calendar-tbl .day-holyday {
    color: var(--color-red);
}

.calendar-tbl .day-sat {
    color: var(--color-blue);
}

.calendar-tbl .schedule-count {
    position: relative;
    --cal-state-size: 18px;
}

.calendar-tbl .schedule-count .cal-state {
    display: flex;
    justify-content: center;
    align-items: center;
    min-width: var(--cal-state-size);
    height: var(--cal-state-size);
    padding: 0 0.5rem;
    background-color: var(--color-point);
    color: var(--color-white);
    border-radius: var(--cal-state-size);
    font-size: 0.75rem;
    text-align: center;
}

.calendar-tbl .schedule-count .cal-state.state-orange            { background-color: var(--state-orange); }
.calendar-tbl .schedule-count .cal-state.state-lightgreen        { background-color: var(--state-lightgreen); }
.calendar-tbl .schedule-count .cal-state.state-green             { background-color: var(--state-green); }
.calendar-tbl .schedule-count .cal-state.state-red               { background-color: var(--state-red); }
.calendar-tbl .schedule-count .cal-state.state-purple            { background-color: var(--state-purple); }

.calendar-tbl tbody td.day-disable .schedule-count .cal-state,
.calendar-tbl tbody td.day-prev .schedule-count .cal-state {
    background-color: var(--color-gray-light);
}

.calendar-tbl .detail-s-list {
    display: none;
    position: relative;
    text-align: left;
    font-size: clamp(0.75rem, 3vw, 0.875rem);
    color: var(--color-gray);
}

.calendar-tbl .day-prev .detail-s-list {
    opacity: 0.7;
}

.calendar-tbl .detail-s-list li {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: flex-start;
    gap: 0.5rem;
}

.calendar-tbl .detail-s-list li:not(:first-child) {
    margin-top: 5px;
}

.calendar-tbl .detail-s-list li .cate {
    flex-shrink: 0;
    max-width: 100%;
    padding: 2px 5px;
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    border-radius: 3px;
    overflow-wrap: break-word;
    word-break: break-all;
    transform: translateY(-3px);
}

.calendar-tbl .detail-s-list li .cate.vacation {
    border-color: var(--state-red);
    color: var(--state-red);
}

.calendar-tbl .detail-s-list li .cate.car {
    border-color: var(--color-green);
    color: var(--color-green);
}

.calendar-tbl .detail-s-list li .cate.room {
    border-color: var(--state-orange);
    color: var(--state-orange);
}

.calendar-tbl .detail-s-list li .cate.thing {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

/* 2026-08-13: calendar/index.blade.php는 이미 이전 세션(f20be12/d1ab5f6/eff1c69/7885b3a)에서
   calendar-tbl 기반 전체 달력(.full-calendar/.cal-table-box/.detail-s-list)으로 전환이 끝나 있었다
   — 이번 세션은 그 상태를 재검증하다가 320px 소형 모바일에서 실측한 가로 스크롤 회귀 2건을 찾아
   고친 것. 둘 다 위 `li`에서 비롯됨.
   (1) `.cate` 배지가 flex-shrink:0인 채로 li가 flex-wrap:nowrap이면, 배지 글자수가 긴 날(예:
   "전사공지" 4글자)이 맨 오른쪽(토요일) 칸에 걸리면 배지 자체가 셀 밖으로 밀려나 페이지가
   가로로 넘친다 → li에 flex-wrap:wrap 추가, 자리가 없으면 배지가 자기 줄로 내려가게 한다.
   (2) `em`(제목)은 flex item 기본 min-width:auto라 좁은 셀에서 줄바꿈 없이 셀 밖으로 그대로
   삐져나온다(§35가 `dl.dl-width dd`에 적용한 것과 같은 flex min-width:auto 계열 버그) → em에
   min-width:0 + overflow-wrap/word-break을 줘서 셀 안에서 줄바꿈되게 한다.
   `.calendar-tbl` 자체(대시보드 위젯, .cate 배지 스타일)는 건드리지 않고 이 두 규칙만 스코프. */
.calendar-tbl .detail-s-list li em {
    min-width: 0;
    overflow-wrap: break-word;
    word-break: break-all;
}

/* 2026-08-11: "선택 날짜 일정 리스트"(calendar/index.blade.php)는 처음엔 참조에 대응 화면이 없다고
   보고 .cal-schedule-list라는 자체 표로 만들었었는데, 재확인 결과 실제로는 참조의 .cal-event-list
   (2482행~, .full-calendar 안에서 달력 그리드와 나란히 배치되는 우측 패널)가 정확히 그 자리였다 —
   그래서 마크업을 .cal-event-list ul/li 구조로 바꿨다. 다만 참조의 li 안에는 카테고리 칩이 없고
   제목만 링크로 들어가므로, 우리가 추가로 보여주는 .cate 칩(사내일정/연차 등 구분)에 대한 CSS는
   참조에 없다 — 참조 셀렉터를 건드리지 않고 이 칩 전용 셀렉터만 별도로 추가한다. */
.cal-event-list .cate {
    display: inline-block;
    padding: 2px 5px;
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    border-radius: 3px;
    margin-right: 0.4rem;
}

.cal-event-list .cate.vacation {
    border-color: var(--state-red);
    color: var(--state-red);
}

/* 2026-08-18/19 채팅 지시(공유물 예약 캘린더 뷰 재구성) 작업 중 발견한 기존 버그 — `.cate.car/room/thing`
   (2748~2761행)은 `.calendar-tbl .detail-s-list li .cate`에만 스코프돼 있어 좌측 달력 그리드 안의
   배지에만 적용되고, 이 우측 패널(`.cal-event-list .cate`)은 위 `.vacation`만 정의돼 있었다 — 공유물
   예약을 이 패널에 넣으면(자산관리 3종: 차량/회의실/비품) 무채색 배지로만 렌더됐을 것. 좌측 그리드가
   이미 쓰는 것과 동일한 색상변수를 재사용해 이 패널에도 같은 배지 색을 낸다(새 hex 없음). */
.cal-event-list .cate.car {
    border-color: var(--color-green);
    color: var(--color-green);
}

.cal-event-list .cate.room {
    border-color: var(--state-orange);
    color: var(--state-orange);
}

.cal-event-list .cate.thing {
    border-color: var(--color-blue);
    color: var(--color-blue);
}

.cal-event-list {
    padding: var(--padding-basic);
    border-top: 1px solid var(--color-line-basic);
}

.cal-event-list h4 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 1rem;
    font-size: clamp(1rem, 3vw, 1.25rem);
}

.cal-event-list h4 small {
    padding: 0 0.5rem;
    background-color: var(--color-green);
    color: var(--color-white);
    border-radius: 1rem;
    font-weight: var(--font-weight-regular);
}

.cal-event-list ul {
    position: relative;
}

.cal-event-list ul:before {
    position: absolute;
    top: 0;
    left: 0;
    bottom: 0;
    width: 1px;
    background-color: var(--color-line-basic);
    content: '';
}

.cal-event-list ul li {
    position: relative;
    padding-left: 15px;
}

.cal-event-list ul li:not(:first-child) {
    margin-top: 1rem;
}

.cal-event-list ul li:after {
    position: absolute;
    top: 5px;
    left: -5px;
    width: 10px;
    height: 10px;
    background-color: var(--color-yellow);
    border-radius: 50%;
    content: '';
}

.cal-event-list ul li a {
    font-size: 0.875rem;
    color: var(--color-gray);
    transition: .3s;
}

.cal-event-list ul li a:hover {
    color: var(--color-point);
}

@media screen and (min-width: 767px) {
    .calendar-box h3.tit-h3 {
        flex-direction: row;
        justify-content: space-between;
    }

    .calendar-tbl thead th {
        padding: 20px 5px;
    }

    .calendar-tbl .schedule-count {
        --cal-state-size: 24px;
    }

    .cal-event-list ul li:after {
        top: 7px;
    }
}

@media screen and (min-width: 1023px) {
    .full-calendar {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }

    .full-calendar .cal-table-box {
        flex-grow: 1;
    }

    .full-calendar .cal-event-list {
        flex-shrink: 0;
        width: 30%;
        border-top: none;
    }

    .full-calendar .calendar-tbl thead th {
        opacity: 1;
    }

    .full-calendar .calendar-tbl thead th,
    .full-calendar .calendar-tbl tbody td {
        border-bottom: 1px solid var(--color-line-basic);
        border-right: 1px solid var(--color-line-basic);
    }

    .full-calendar .calendar-tbl tbody tr:last-child td {
        border-bottom: none;
    }

    .full-calendar .calendar-tbl tbody td {
        height: 100px;
    }

    .full-calendar .calendar-tbl .schedule-count {
        display: none;
    }

    .calendar-tbl .detail-s-list {
        display: block;
    }
}

@media screen and (min-width: 1239px) {
    .cal-event-list {
        padding: var(--padding-basic) var(--padding-lg);
    }

    .full-calendar .cal-event-list {
        width: 25%;
    }
}

/* 공유물 예약 Week/Day 시간축 그리드(2026-08-18/19 채팅 지시 — 목록 뷰를 Day/Week/Month 캘린더 뷰로
   재구성). `rsv-` 접두사로 스코프해 위 `.cal-`/`.calendar-` 셀렉터와 겹치지 않게 했다 — 이 블록만
   지우면 캘린더 뷰 도입 이전 상태로 완전히 원복된다(위 규칙은 전부 무수정). 색상은 `.cate.car/room/
   thing`(2748행~)과 동일한 변수를 재사용한다(새 hex 없음). 시간대는 24개 행(00:00~24:00 전체)을
   그대로 CSS로 고정폭(40px/시간) 배치하고, 예약 블록은 ReservationLayoutService가 계산한 top/height/
   left/width%를 인라인 style로 받아 절대배치한다. */
.reservation-timeline {
    border: 1px solid var(--color-line-basic);
    border-radius: 6px;
    overflow-x: auto;
}

.rsv-timeline-head {
    display: flex;
    border-bottom: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
}

.rsv-hour-gutter {
    flex: 0 0 56px;
    width: 56px;
}

.rsv-day-head {
    flex: 1 0 90px;
    padding: 10px 4px;
    text-align: center;
    font-size: 0.875rem;
    font-weight: var(--font-weight-medium, 600);
    border-left: 1px solid var(--color-line-basic);
}

.rsv-day-head.is-today {
    color: var(--color-point);
}

/* 하이브파트너스 실사용 피드백 C12(자산관리#1, 2026-09-16) — Week/Day 시간축 그리드의 주말 구분.
   글자색은 월간 캘린더(.calendar-tbl .day-holyday/.day-sat)와 같은 팔레트를 재사용해 "일요일=빨강,
   토요일=파랑"이라는 앱 전역 관례가 뷰마다 갈라지지 않게 한다. 다만 이 그리드는 세로로 24시간짜리라
   요일 머리글 글자색만으로는 아래쪽에서 주말 여부가 안 보여서, 칸 자체에 아주 옅은 배경을 함께 깐다
   (예약 블록 .rsv-event는 그 위에 z-index로 얹히므로 가려지지 않는다). */
.rsv-day-head.is-sun {
    color: var(--color-red);
}

.rsv-day-head.is-sat {
    color: var(--color-blue);
}

/* .is-today와 겹칠 때는 "오늘"이 이긴다 — 주말인 오늘을 강조 색으로 보여주는 쪽이 사용자가 지금
   어디를 보고 있는지 알기 쉽다(선언 순서로 처리, !important를 쓰지 않는다). */
.rsv-day-head.is-sun.is-today,
.rsv-day-head.is-sat.is-today {
    color: var(--color-point);
}

.rsv-timeline-col.is-sun,
.rsv-timeline-col.is-sat {
    background-color: var(--color-box-basic);
}

.rsv-timeline-body {
    display: flex;
    position: relative;
}

.rsv-timeline-body .rsv-hour-gutter {
    position: sticky;
    left: 0;
    background-color: var(--color-white);
    z-index: 3;
}

.rsv-hour-label {
    height: 40px;
    padding-right: 6px;
    text-align: right;
    font-size: 0.75rem;
    color: var(--color-gray);
    transform: translateY(-0.5em);
}

.rsv-timeline-col {
    position: relative;
    flex: 1 0 90px;
    border-left: 1px solid var(--color-line-basic);
}

.rsv-hour-row {
    display: block;
    height: 40px;
    border-bottom: 1px dashed var(--color-line-basic);
}

.rsv-hour-row:hover {
    background-color: var(--color-box-basic);
}

.rsv-event {
    position: absolute;
    z-index: 2;
    overflow: hidden;
    box-sizing: border-box;
    padding: 3px 6px;
    border: 1px solid var(--color-line-basic);
    border-left: 3px solid var(--color-gray);
    border-radius: 3px;
    background-color: var(--color-white);
    font-size: 0.75rem;
    line-height: 1.35;
}

.rsv-event strong {
    display: block;
}

/* 수정/취소 권한이 있는 예약 블록은 같은 클래스를 단 <a>로 렌더된다(권한이 없으면 <div> 그대로) —
   링크가 돼도 시간축 위 블록의 생김새는 바뀌지 않아야 하므로 기본 링크 색/밑줄만 지운다. */
a.rsv-event {
    display: block;
    color: inherit;
    text-decoration: none;
}

a.rsv-event:hover {
    border-color: var(--color-gray);
    box-shadow: 0 5px 5px -5px rgba(var(--color-black-rgb), 0.1);
}

.rsv-event.car {
    border-left-color: var(--color-green);
}

.rsv-event.car strong {
    color: var(--color-green);
}

.rsv-event.room {
    border-left-color: var(--state-orange);
}

.rsv-event.room strong {
    color: var(--state-orange);
}

.rsv-event.thing {
    border-left-color: var(--color-blue);
}

.rsv-event.thing strong {
    color: var(--color-blue);
}



/* 대시보드 페이지 // 개인 맞춤 메뉴 설정 */
.main-personal-mnu {
    position: relative;
    overflow: visible;
}

.main-personal-mnu .mpm-slide ul li {
    width: 100px;
    box-sizing: border-box;
}

.main-personal-mnu .mpm-slide ul li:not(:first-child) {
    border-left: 1px dotted var(--color-line-basic);
}

.main-personal-mnu .mpm-slide ul li:last-child {
    border-left: none;
    padding: 1rem;
}

.main-personal-mnu .mpm-slide ul li .mpm-btn {
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    gap: 0.5rem;
    height: 90px;
    padding: 0.5rem;
    text-align: center;
    font-size: 0.875rem;
    color: var(--color-gray);
    transition: .3s ease;
}

.main-personal-mnu .mpm-slide ul li .mpm-btn .ico {
    width: 36px;
    font-size: 0;
    transition: .3s ease;
}

.main-personal-mnu .mpm-slide ul li .add-btn {
    display: flex;
    justify-content: center;
    align-items: center;
    width: calc(90px - 2rem);
    height: calc(90px - 2rem);
    background-color: var(--color-background);
    color: var(--color-gray-light);
    border-radius: 50%;
    font-size: 1.5rem;
    transition: .3s ease;
}

.main-personal-mnu .mpm-slide ul li .add-btn .ico {
    transition: .3s ease;
}

.main-personal-mnu .mpm-slide ul li .add-btn.active .ico {
    transform: rotate(45deg);
    color: var(--color-red);
}

.main-personal-mnu .mpm-choice {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 60vh;
    padding: var(--padding-basic);
    background-color: var(--color-box-basic);
    font-size: clamp(0.875rem, 3vw, 1rem);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -5px 15px -8px rgba(var(--color-black-rgb),0.1);
    z-index: 1100;
}

.main-personal-mnu .mpm-choice ul {
    flex-wrap: wrap;
    align-items: stretch;
}

.main-personal-mnu .mpm-choice ul li {
    width: 25%;
    padding: 2px;
}

.main-personal-mnu .mpm-choice ul li input.mpm-check {
    display: none;
}

.main-personal-mnu .mpm-choice ul li input.mpm-check + label {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-start;
    align-items: center;
    gap: 5px;
    height: 100%;
    line-height: 1.3;
    padding: 0.5rem;
    border: 1px solid rgba(var(--color-yellow-rgb),0);
    text-align: center;
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
    transition: .2s;
    font-size: 0.875rem;
}

.main-personal-mnu .mpm-choice ul li input.mpm-check + label .ico {
    width: 80%;
    max-width: 50px;
    filter: grayscale(1);
    font-size: 0;
    transition: .2s;
}

.main-personal-mnu .mpm-choice ul li input.mpm-check + label .order-number {
    position: absolute;
    top: 3px;
    left: 3px;
    width: 18px;
    height: 18px;
    line-height: 18px;
    background-color: var(--color-yellow);
    text-align: center;
    font-size: 0.75rem;
    color: var(--color-white);
    border-radius: 5px;
}

.main-personal-mnu .mpm-choice ul li input.mpm-check:checked + label {
    border-color: var(--color-yellow);
    color: var(--color-point);
    font-weight: var(--font-weight-medium);
    border-radius: 10px;
}

.main-personal-mnu .mpm-choice ul li input.mpm-check:checked + label .ico {
    filter: grayscale(0);
}

@media screen and (min-width: 767px) {
    .main-personal-mnu .mpm-slide ul li {
        width: 120px;
    }

    .main-personal-mnu .mpm-choice ul li {
        width: 20%;
    }
}

@media screen and (min-width: 1023px) {
    .main-personal-mnu .mpm-choice {
        position: absolute;
        bottom: auto;
        top: 95%;
        left: 2%;
        width: 96%;
        max-height: 80vh;
        padding-bottom: 2rem;
        box-shadow: 0 5px 15px rgba(var(--color-black-rgb),0.16);
        border-radius: 1rem;
    }

    .main-personal-mnu .mpm-choice ul li {
        width: 12.5%;
    }
}

@media screen and (min-width: 1239px) {
    .main-personal-mnu .mpm-slide ul li .mpm-btn:hover {
        color: var(--color-point);
    }

    .main-personal-mnu .mpm-slide ul li .mpm-btn:hover .ico {
        transform: scale(1.2);
    }

    .main-personal-mnu .mpm-slide ul li .add-btn:hover {
        color: var(--color-point);
        font-size: 1.75rem;
    }

    .main-personal-mnu .mpm-slide ul li .add-btn:hover .ico {
        transform: rotate(180deg);
    }

    .main-personal-mnu .mpm-choice ul li:hover input.mpm-check + label {
        color: var(--color-basic);
    }

    .main-personal-mnu .mpm-choice ul li:hover input.mpm-check + label .ico {
        filter: grayscale(0);
    }
}

@media screen and (min-width: 1439px) {
    .main-personal-mnu .mpm-choice {
        left: 1%;
        width: 98%;
    }

    .main-personal-mnu .mpm-choice ul li {
        width: 10%;
    }
}



/* 대시보드 페이지 // My Project & Team Project */
.my-team-project {
    display: flex;
    flex-direction: column;
    background-color: var(--color-point);
}

.my-team-project .basic-box {
    padding: var(--padding-basic);
    background-color: transparent;
    color: var(--color-white);
}

.my-team-project .project-box.team-project,
.my-team-project .project-box.sign-docu {
    border-top: 1px solid rgba(var(--color-black-rgb),0.25);
}

.my-team-project .project-box h3 {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
    font-family: var(--font-point);
    font-weight: var(--font-weight-semibold);
    font-size: clamp(1.25rem, 3vw, 1.5rem);
    opacity: 0.7;
}

.my-team-project .project-box ul {
    align-items: stretch;
}

.my-team-project .project-box ul li .basic-link {
    display: flex;
    flex-direction: column;
    text-align: center;
    color: var(--color-white);
    cursor: default;
}

.my-team-project .project-box ul li .basic-link.in-link {
    cursor: pointer;
}

.my-team-project .project-box ul li .counts {
    font-weight: var(--font-weight-heavy);
    font-size: clamp(1.5rem, 3vw, 2rem);
}

.my-team-project .project-box.my-project ul li {
    width: 25%;
}

.my-team-project .project-box.vacation ul li,
.my-team-project .project-box.team-project ul li,
.my-team-project .project-box.sign-docu ul li {
    width: 33.3333%;
}

.my-team-project .project-btn-box {
    display: flex;
    justify-content: center;
    align-items: stretch;
    border-top: 1px solid rgba(var(--color-black-rgb),0.25);
}

.my-team-project .project-btn-box a {
    flex-grow: 1;
    height: 50px;
    color: rgba(var(--color-white-rgb), 0.5);
    transition: .3s ease;
}

.my-team-project .project-btn-box a:not(:first-child) {
    border-left: 1px solid rgba(var(--color-black-rgb),0.25);
}

.my-team-project .project-btn-box a .ico {
    font-size: 130%;
}

@media screen and (min-width: 767px) {
    .my-team-project {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: stretch;
    }

    .my-team-project .project-box {
        width: 50%;
    }

    .my-team-project .project-box.team-project,
    .my-team-project .project-box.sign-docu {
        border-top: none;
        border-left: 1px solid rgba(var(--color-black-rgb),0.25);
    }

    .my-team-project .project-btn-box {
        width: 100%;
    }
}

@media screen and (min-width: 1239px) {
    .my-team-project .project-box.vacation,
    .my-team-project .project-box.my-project {
        width: 40%;
    }

    .my-team-project .project-box.team-project,
    .my-team-project .project-box.sign-docu {
        width: 40%;
        border-left: none;
    }

    .my-team-project .project-btn-box {
        width: 20%;
        flex-direction: column;
        border-top: none;
        border-left: 1px solid rgba(var(--color-black-rgb),0.25);
    }
    
    .my-team-project .project-btn-box a {
        flex-direction: column;
    }
    
    .my-team-project .project-btn-box a:not(:first-child) {
        border-left: none;
        border-top: 1px solid rgba(var(--color-black-rgb),0.25);
    }

    .my-team-project .project-btn-box a:hover {
        color: var(--color-white);
    }
}

@media screen and (min-width: 1439px) {
    .my-team-project .project-box {
        display: flex;
        justify-content: flex-start;
        align-items: center;
        gap: 2rem;
        padding: 3rem 2rem;
    }

    .my-team-project .project-box h3 {
        flex-shrink: 0;
        flex-direction: column;
        align-items: flex-start;
        padding-left: 2rem;
        margin-bottom: 0;
        gap: 0;
    }

    .my-team-project .project-box ul {
        flex-grow: 1;
    }

    .my-team-project .project-box.vacation,
    .my-team-project .project-box.my-project {
        width: 45%;
    }

    .my-team-project .project-box.sign-docu,
    .my-team-project .project-box.team-project {
        width: 40%;
    }

    .my-team-project .project-btn-box {
        width: 15%;
    }
}



/* 대시보드 페이지 // 달력, 커뮤니티, 내 프로젝트 목록 */
.main-content {
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    margin-top: 0.5rem !important;
}

.main-content .main-item {
    position: relative;
    width: 100%;
    background-color: var(--color-box-basic);
}

.main-latest-box .latest-tab {
    margin-bottom: 1rem;
}

.main-latest-box .latest-tab ul {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 0.5rem 1rem;
}

.main-latest-box .latest-tab .lt-btn {
    color: var(--color-gray-light);
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
}

.main-latest-box .latest-tab .lt-btn em {
    position: relative;
}

.main-latest-box .latest-tab .lt-btn em:before {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 1px;
    height: 5px;
    background-color: rgba(var(--color-point-rgb),0);
    transition: .2s ease-in;
    content: '';
}

.main-latest-box .latest-tab .lt-btn.selected {
    color: var(--color-point);
    font-weight: var(--font-weight-semibold);
}

.main-latest-box .latest-tab .lt-btn.selected em:before {
    width: 100%;
    background-color: rgba(var(--color-point-rgb),0.2);
}

.latest-list li:not(:first-child) {
    margin-top: 10px;
    padding-top: 10px;
    border-top: 1px dotted var(--color-line-basic);
}

.latest-list li a {
    position: relative;
    display: block;
    padding-right: 90px;
    color: var(--color-gray);
    font-size: 0.875rem;
    transition: .2s;
}

.latest-list li a em:before {
    content: 'ㆍ';
}

.latest-list li a .date {
    position: absolute;
    top: 50%;
    right: 0;
    transform: translateY(-50%);
    font-size: 85%;
    color: var(--color-gray-light);
    font-weight: var(--font-weight-regular);
}

@media screen and (min-width: 767px) {
}

@media screen and (min-width: 1239px) {
    .main-content {
        display: grid;
        grid-template-columns: 1fr 1fr;
        grid-template-rows: repeat(3, 1fr);
    }

    .main-content .latest-calendar {
        grid-row: 1 / 4;
        grid-column: 1 / 2;
        height: 100%;
    }

    /* 2026-08-13 채팅 지시("대시보드에 내 프로젝트는 우측으로 빼자") — 달력(좌측 컬럼, 3행 전부 차지)을
       제외한 나머지 4개 .main-item(결재대기/공지사항/최근 게시글/내 프로젝트)은 명시 배치가 없어 기본
       grid-auto-flow가 우측 컬럼 3칸을 먼저 채운 뒤 4번째(내 프로젝트)만 넘쳐서 암시적 4행 "좌측"
       컬럼(달력 아래)에 배치되고 있었다 — 좌측 컬럼이 비대칭으로 길어지는 버그. 우측 컬럼으로 고정한다. */
    .main-content .latest-myproject {
        grid-column: 2 / 3;
    }

    .main-latest-box {
        flex-grow: 1;
    }

    .latest-list li:not(:first-child) {
        margin-top: 1rem;
        padding-top: 1rem;
    }

    .latest-list li a:hover {
        color: var(--color-point);
        font-weight: var(--font-weight-semibold);
    }

    .latest-list li a:hover .date {
        color: var(--color-gray);
    }
}

@media screen and (min-width: 1439px) {
}

@media screen and (min-width: 1639px) {
    .latest-wrap {
        display: flex;
        justify-content: space-between;
        align-items: stretch;
    }

    .latest-wrap .latest-tab {
        flex-grow: 1;
    }

    .latest-wrap .latest-tab ul {
        flex-direction: column;
        align-items: flex-start;
        gap: 1rem;
    }

    .latest-wrap .latest-con {
        flex-shrink: 0;
        width: 80%;
    }
}


/* 조직도 포함 레이아웃, 연차관리 */
.in-side-box,
.annual-leave {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
}

.in-side-box .in-side-con,
.in-side-box .organization-box,
.annual-leave .organization-box {
    flex-shrink: 0;
    width: var(--ob-width);
    border-right: 1px solid var(--color-line-basic);
}

.organization-box .affiliate-choice {
    padding-left: 1.5rem;
    border-bottom: 1px solid var(--color-line-basic);
}

.organization-box .affiliate-choice .basic-select {
    font-weight: var(--font-weight-semibold);
}

.in-side-box .detail-conbox,
.annual-leave .annual-leave-detail {
    flex-grow: 1;
}

@media screen and (min-width: 767px) {
}


/* 조직도 */
.organization-list {
    position: relative;
}

.organization-list ul.folder > li ul {
    padding-left: 1.5rem;
}

.organization-list .active > .folder-header > .basic-link:after,
.organization-list .active > .basic-link:after {
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    border: 1px solid rgba(var(--color-black-rgb),0.08);
    border-radius: inherit;
    content: '';
}

.organization-list ul.folder > li > .folder-header > .basic-link,
.organization-list ul.folder > li > .basic-link {
    gap: 5px;
    --fa-primary-color: var(--color-yellow);
    --fa-primary-opacity: 0.6;
    --fa-secondary-color: var(--color-yellow);
    --fa-secondary-opacity: 1;
}

.organization-list ul.folder > li:not(.active) > .folder-header > .basic-link .fa-folder-open {
    display: none;
}

.organization-list ul.folder > li.active > .folder-header > .basic-link .fa-folder {
    display: none;
}

.organization-list ul.user > li {
    padding-block: 1px;
}

.organization-list ul.user > li > .basic-link {
    gap: 5px;
    --fa-primary-color: var(--color-gray);
    --fa-secondary-color: var(--color-gray);
}

.organization-list .basic-link {
    position: relative;
    display: inline-block;
    padding: 0.5rem;
    border-radius: 5px;
    color: var(--color-gray);
    transition: .2s;
}

.organization-list .basic-link:hover {
    background-color: var(--color-background);
    color: var(--color-basic);
}

.organization-list .open > .basic-link {
    color: var(--color-point);
    font-weight: var(--font-weight-medium);
}

.organization-list .active > .folder-header > .basic-link,
.organization-list .active > .basic-link {
    background-color: var(--color-yellow);
    color: var(--color-white) !important;
    font-weight: var(--font-weight-semibold);
    --fa-primary-color: var(--color-white) !important;
    --fa-secondary-color: var(--color-white) !important;
}

.organization-list .folder-header {
    position: relative;
}

.organization-list .folder-header .gripper {
    color: var(--color-gray-light);
    opacity: 0.5;
}

.organization-list .ui-sortable-placeholder {
    height: 30px !important;
    background: #e0f7fa;
    border: 1px dashed #00bcd4;
    list-style: none;
    visibility: visible !important;
}

.organization-list .ui-sortable-helper {
    opacity: 0.8;
    background: #fff3e0;
}

.organization-list .action-buttons .basic-link {
    width: 24px;
    height: 24px;
    padding: 0;
    border: 1px solid var(--color-line-basic);
    color: var(--color-gray-light);
}

.organization-list .action-buttons .basic-link.add-sub-btn:hover {
    border: 1px solid var(--color-point);
    color: var(--color-point);
}

.organization-list .action-buttons .basic-link.delete-btn:hover {
    border: 1px solid var(--color-red);
    color: var(--color-red);
}


/* 직급/직책 리스트 */
.position-list ul li:not(:first-child) {
    margin-top: 0.5rem;
}

.position-list .position-con {
    position: relative;
    padding: 0.5rem;
    border-radius: 5px;
    border: 1px solid rgba(var(--color-black-rgb),0.08);
    background-color: var(--color-background);
    border-radius: 5px;
    transition: .2s;
}

.position-list .active .position-con {
    background-color: var(--color-yellow);
}

.position-list .active .position-con .rank,
.position-list .active .position-con .basic-link {
    color: var(--color-white) !important;
    font-weight: var(--font-weight-semibold);
}


/* 저장된 결재라인 리스트 */
.approve-group-list ul li {
    display: flex;
    justify-content: space-between;
    align-items: stretch;
    gap: 5px;
}

.approve-group-list ul li:not(:first-child) {
    margin-top: 0.5rem;
}

.approve-group-list .approve-group-btn {
    flex-grow: 1;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: 1rem;
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    border-radius: 5px;
    text-align: left;
    transition: .3s;
}

.approve-group-list .approve-group-btn h5 {
    font-weight: var(--font-weight-medium);
    font-size: 1rem;
}

.approve-group-list .approve-group-btn .approve-group-con {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    align-items: center;
    gap: 5px 1rem;
    color: var(--color-gray);
    font-size: 90%;
}

.approve-group-list .approve-group-btn:hover {
    border-color: var(--color-point);
    box-shadow: 0 3px 10px rgba(var(--color-basic-rgb),0.1);
    transform: translateY(-3px);
}

.approve-group-list .approve-group-btn h5:hover {
    color: var(--color-point);
}

.approve-group-list .approve-group-del-btn {
    flex-shrink: 0;
    width: 30px;
    border: 1px solid var(--color-red);
    background-color: var(--color-box-basic);
    color: var(--color-red);
    border-radius: 5px;
    transition: .3s;
}

.approve-group-list .approve-group-del-btn:hover {
    background-color: var(--color-red);
    color: var(--color-white);
}


/* 결재라인 선택 */
.approve-group-organization .organization-list {
    border: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    border-radius: 5px;
}


/* 메모 리스트/저장 */
.memo-list {
    background-color: var(--color-background);
}

.memo-list dl:not(:first-child) {
    border-top: 1px solid var(--color-line-basic);
}

.memo-list dl dt {
    padding: 0.5rem 1rem;
}

.memo-list dl dt button.on .arrow {
    transform: rotate(180deg);
}

.memo-list dl dd {
    padding: 0 1rem 1rem;
}

.memo-list dl dd .txt {
    overflow-y: auto;
    width: 100%;
    max-height: 150px;
    padding: 10px;
    background-color: var(--color-box-basic);
    color: var(--color-gray);
    border-radius: 5px;
}

.memo-list + .memo-form {
    padding: 1rem;
}



/* 선택 체크 */
.choice-check-area {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    max-height: 60vh;
    padding: var(--padding-basic);
    background-color: var(--color-box-basic);
    font-size: clamp(0.875rem, 3vw, 1rem);
    border-radius: 1rem 1rem 0 0;
    box-shadow: 0 -5px 15px -8px rgba(var(--color-black-rgb),0.1);
    z-index: 100;
}

.choice-check-area ul li {
    border-top: 1px solid var(--color-line-basic);
}

.choice-check-area ul li:hover {
    background-color: rgba(var(--color-basic-rgb),0.02);
}

.choice-check-area ul li .choice-check {
    display: none;
}

.choice-check-area ul li .choice-check + label {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.75rem 0.5rem;
    color: var(--color-gray);
    cursor: pointer;
}

.choice-check-area ul li .choice-check + label span {
    opacity: 0.2;
}

.choice-check-area ul li .choice-check:checked + label {
    color: var(--color-point);
    font-weight: var(--font-weight-semibold);
}

.choice-check-area ul li .choice-check:checked + label span {
    opacity: 1;
}

@media screen and (min-width: 1023px) {
    .choice-check-area {
        position: absolute;
        bottom: auto;
        left: auto;
        top: 100%;
        width: 375px;
        box-shadow: 0 5px 15px rgba(var(--color-black-rgb),0.16);
        border-radius: 1rem;
    }

    .choice-check-area ul li {
        padding: 0.5rem;
    }
}


/* 댓글 리스트 */
.reply-write-box h4 {
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
    color: var(--color-gray);
    font-size: clamp(0.875rem, 3vw, 1rem);
}

.reply-write-box .reply-write-form {
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    align-items: stretch;
    gap: 0.5rem;
}

.reply-list-box .rl-con {
    padding-block: 1rem;
}

.reply-list-box .rl-con:not(:first-child) {
    border-top: 1px dashed var(--color-line-basic);
}

.reply-list-box .rl-con h4 {
    margin-bottom: 0.5rem;
    font-weight: var(--font-weight-medium);
}

.reply-list-box .rl-con h4 .date {
    color: var(--color-gray);
    font-weight: var(--font-weight-regular);
}

@media screen and (min-width: 767px) {
    .reply-box {
        padding: 1rem !important;
    }

    .reply-write-box .reply-write-form {
        flex-direction: row;
        width: 100%;
    }

    .reply-write-box .reply-write-form .basic-textarea {
        flex-grow: 1;
    }

    .reply-write-box .reply-write-form .basic-link {
        flex-shrink: 0;
        width: 100px;
    }

    .reply-list-box {
        margin-top: 1.5rem;
    }
}

@media screen and (min-width: 1023px) {
    .reply-box {
        padding: 1.5rem !important;
    }
}



/* 페이지네이션 */
.pagenation-area {
    padding: 1rem;
}

.pagenation-area .pagenation {
    justify-content: center;
    align-items: center;
    color: var(--color-gray);
}

.pagenation-area .pagenation .arrow-link {
    padding: 10px 1rem;
}

.pagenation-area .pagenation .arrow-link.disable {
    opacity: 0.5;
    cursor: default;
}

.pagenation-area .prev-next {
    display: none;
}

/* 갈 수 없는 쪽(첫 페이지의 이전, 마지막 페이지의 다음페이지)은 위쪽 화살표(.arrow-link.disable)와 같은 농도로 흐리게. */
.pagenation-area .prev-next button:disabled {
    opacity: 0.5;
    cursor: default;
}

@media screen and (min-width: 767px) {
    .pagenation-area:not(.in-modal) {
        padding-bottom: 2rem;
    }

    .pagenation-area:not(.in-modal) .pagenation {
        justify-content: flex-end;
    }

    .pagenation-area:not(.in-modal) .prev-next {
        display: flex;
        justify-content: center;
        align-items: center;
        gap: 0.5rem;
    }
}

@media screen and (min-width: 1239px) {
}


/* 사이트맵 */
.sitemap-box {
    visibility: hidden;
    opacity: 0;

    position: fixed;
    top: var(--header-height);
    left: 0;
    right: 0;
    bottom: 0;
    border-top: 1px solid var(--color-line-basic);
    background-color: var(--color-box-basic);
    backdrop-filter: blur(5px);
    font-size: 1rem;
    transition: .2s ease-in;
    z-index: 2000;
}

.sitemap-box.open {
    visibility: visible;
    opacity: 1;
}

.sitemap-box .sitemap-wrap {
    height: 100%;
}

.sitemap-box .sitemap-con {
    position: relative;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
    padding: var(--padding-basic);
}

.sitemap-box .sitemap-con:not(:first-child) {
    border-top: 0.5rem solid var(--color-background);
}

.sitemap-box .sitemap-con h3 {
    font-size: clamp(1.125rem, 3vw, 1.25rem);
    font-weight: var(--font-weight-semibold);
    font-family: var(--font-point);
    color: var(--color-point);
    letter-spacing: -.5pt;
}

.sitemap-box .sitemap-con .sitemap-list {
    display: flex;
    flex-direction: column;
}

.sitemap-box .sitemap-con .sitemap-list dl dt a {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 0;
    color: var(--color-gray);
}

.sitemap-box .sitemap-con .sitemap-list dl dt a .ico {
    color: var(--color-gray-light);
}

.sitemap-box .sitemap-con .sitemap-list dl dt a.active {
    color: var(--color-basic);
    font-weight: var(--font-weight-medium);
}

.sitemap-box .sitemap-con .sitemap-list dl dt a.active .ico {
    transform: rotate(180deg);
}

.sitemap-box .sitemap-con .sitemap-list dl dd {
    display: none;
    padding: 1rem;
    margin: 0 -1rem;
    background-color: rgba(var(--color-point-rgb),0.05);
    font-size: 0.875rem;
}

.sitemap-box .sitemap-con .sitemap-list dl dd ul li:not(:first-child) {
    margin-top: 7px;
}

.sitemap-box .sitemap-con .sitemap-list dl dd ul li:before {
    content: 'ㆍ ';
}

.sitemap-box .sitemap-con .sitemap-list dl dd ul li a {
    color: var(--color-gray);
}

@media screen and (min-width: 767px) {
    .sitemap-box .sitemap-con .sitemap-list {
        flex-direction: row;
        flex-wrap: wrap;
        justify-content: flex-start;
        align-items: stretch;
        gap: 1rem 1rem;
    }

    .sitemap-box .sitemap-con .sitemap-list dl {
        width: calc(25.4% - 1rem);
    }

    .sitemap-box .sitemap-con .sitemap-list dl dt a {
        color: var(--color-basic);
        font-weight: var(--font-weight-medium);
    }

    .sitemap-box .sitemap-con .sitemap-list dl dt a .ico {
        display: none;
    }

    .sitemap-box .sitemap-con .sitemap-list dl dd {
        display: block;
        padding: 0;
        margin: 0;
        background-color: transparent;
    }

    .sitemap-box .sitemap-con .sitemap-list dl dd ul li:not(:first-child) {
        margin-top: 5px;
    }

    .sitemap-box .sitemap-con .sitemap-list dl dd ul li:before {
        content: '';
    }
}

@media screen and (min-width: 1023px) {
    .sitemap-box .sitemap-con .sitemap-list dl {
        width: calc(20.25% - 1rem);
    }
}

@media screen and (min-width: 1239px) {
    .sitemap-box .sitemap-con .sitemap-list dl:hover dt a {
        color: var(--color-point);
    }

    .sitemap-box .sitemap-con .sitemap-list dl dd ul li a em {
        position: relative;
    }

    .sitemap-box .sitemap-con .sitemap-list dl dd ul li a em:after {
        position: absolute;
        bottom: -3px;
        left: 0;
        width: 1px;
        height: 1px;
        background-color: var(--color-gray);
        opacity: 0;
        content: '';
        transition: .3s;
    }

    .sitemap-box .sitemap-con .sitemap-list dl dd ul li a:hover {
        color: var(--color-basic);
    }

    .sitemap-box .sitemap-con .sitemap-list dl dd ul li a:hover em:after {
        width: 100%;
        opacity: 1;
    }
}

@media screen and (min-width: 1439px) {
    .sitemap-box {
        background-color: rgba(var(--color-box-basic-rgb),0.9);
    }

    .sitemap-box .sitemap-con {
        flex-direction: row;
        justify-content: space-between;
        align-items: stretch;
        gap: 2rem;
        padding: 2.5rem 1rem;
    }

    .sitemap-box .sitemap-con:not(:first-child) {
        border-top: 1px solid rgba(var(--color-black-rgb),0.1);
    }

    .sitemap-box .sitemap-con h3 {
        flex-shrink: 0;
        width: 120px;
        padding-top: 5px;
    }

    .sitemap-box .sitemap-con .sitemap-list {
        flex-grow: 1;
    }
}

@media screen and (min-width: 1639px) {
    .sitemap-box .sitemap-con {
        gap: 4rem;
    }
}








/* ------------------------------------------------------------ */







@media screen and (min-width: 639px) {
}

@media screen and (min-width: 767px) {
}

@media screen and (min-width: 979px) {
}

@media screen and (min-width: 1023px) {
}

@media screen and (min-width: 1239px) {
}

@media screen and (min-width: 1340px) {
}

@media screen and (min-width: 1439px) {
}

@media screen and (min-width: 1640px) {
}

@media screen and (min-width: 1840px) {
}


.detail-search {
    position: relative;
    z-index: 9999;
}

.detail-search-box.toggle-layer {
    position: absolute;
    pointer-events: none;
    z-index: 9999;
}

.detail-search-box.toggle-layer.on {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

#toggleDetailSearch {
    position: absolute !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

/* 태그형 pill(모달로 고른 사람/대상을 배지로 보여주는 목록) — 2026-09-17 트랙A(공유물 예약 체크박스
   재설계) 작업 중 style-guide 스킬의 rule-of-three 위반 발견: 이 인라인 style이 이미
   approval/partials/reference-fields.blade.php, project/partials/reference-fields.blade.php,
   property/reservations/form.blade.php의 참여자 블록 3곳에 토씨까지 동일하게 반복되고 있었고,
   같은 파일에 새로 추가하는 예약 대상 선택 목록(#selected-properties)이 4번째 사용처가 되어
   임계값을 넘었다 — 네 곳 전부 이 클래스로 교체(레이아웃 값 자체는 완전히 동일, 시각적 변경 없음). */
.selected-tag {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 2px 8px;
    margin: 0 6px 6px 0;
    border: 1px solid #ddd;
    border-radius: 999px;
    font-size: 12px;
}

/* 공유물 예약 대상 체크박스 재설계(트랙A, 2026-09-17, hs Plan Research→Debate→Critic→Architecture
   확정) — property/reservations/form.blade.php 등록화면. 기존 <select multiple size="5">에서
   종류(차량/회의실/비품)를 필터로 바꿀 때 숨겨지는 <option>의 selected를 JS가 강제로 풀어, 차량을
   고른 뒤 필터를 "비품"으로 바꾸면 방금 고른 차량이 조용히 풀려버리는 실제 버그(사용자 직접 발견)의
   원인 자체를 없애기 위해 각 대상을 독립된 체크박스로 바꿨다. "종류" select는 이제 순수
   스크롤/하이라이트 UI 설탕이라 .is-highlighted 토글용 시각 효과만 필요(폼 상단 @php 블록 docblock
   참고). */
.property-type-fieldset {
    border: 1px solid var(--color-line-basic);
    border-radius: 4px;
    padding: 12px;
    margin-bottom: 10px;
    transition: border-color .2s, box-shadow .2s;
}
.property-type-fieldset legend {
    padding: 0 6px;
    font-size: var(--font-size-sm);
    font-weight: 600;
}
.property-type-fieldset.is-highlighted {
    border-color: var(--color-blue);
    box-shadow: 0 0 0 1px var(--color-blue);
}
.property-check-label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px 8px 0;
}
.property-qty-group {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    margin: 0 16px 8px 0;
}
.property-qty-input {
    width: 56px;
    text-align: center;
}

#toggleDetailSearch.on {
    visibility: visible !important;
    opacity: 1 !important;
    pointer-events: auto !important;
    z-index: 99999 !important;
}

/* 2026-11-05 고객 요청 #4 — 사진갤러리 목록 썸네일(PROJECT.md §76.2) */
.gallery-thumb {
    aspect-ratio: 4 / 3;
    background: #f2f2f2;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: hidden;
}
.gallery-thumb-img {
    display: block;
    width: 100%;
    height: 100%;
    object-fit: cover;
}
.gallery-thumb-empty {
    color: #bbb;
    font-size: 12px;
}

/* 2026-11-11 연장·휴일근로 양식 4종 작성/상세 화면(resources/views/approval/structured/overtime-work*,
   detail-overtime_work.blade.php). 보이기/숨기기는 hidden 속성만 쓴다(JS 도 인라인 style 을 쓰지 않는다). */
.overtime-work-form {
    --input-dt-width: 160px;
}
.overtime-work-form [hidden] {
    display: none !important;
}
.overtime-work-choice {
    display: flex;
    flex-wrap: wrap;
    gap: 0.4rem 1.2rem;
    margin-bottom: 0.4rem;
}
.overtime-work-preview-empty {
    color: var(--color-gray, #888);
    font-size: 0.875rem;
}
.overtime-work-preview-period {
    margin-bottom: 0.5rem;
}
.overtime-work-preview-tbl {
    max-width: 420px;
    margin-bottom: 0.5rem;
}
.overtime-work-preview-tbl th {
    width: 11rem;
    text-align: left;
}
.overtime-work-messages {
    margin-top: 0.5rem;
    padding-left: 1.5rem;
    list-style: disc;
}
.overtime-work-messages li + li {
    margin-top: 0.25rem;
}
.overtime-work-warning-list {
    list-style: disc;
    padding-left: 1.2rem;
}

/* 2026-11-09 웹메일·주소록 화면(PROJECT.md §77) — 예전 인라인 style 을 클래스로 옮김 */
.webmail-toolbar {
    margin-bottom: 12px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 8px;
    flex-wrap: wrap;
}
.webmail-tabs {
    display: flex;
    gap: 4px;
}
.webmail-notice {
    padding: 24px;
    text-align: center;
}
.webmail-notice-sub {
    margin-top: 8px;
}
.webmail-col-narrow {
    width: 60px;
}
.webmail-col-date,
.webmail-col-actions {
    width: 140px;
}
.webmail-row-unread {
    font-weight: bold;
}
.webmail-pager {
    margin-top: 16px;
}
.webmail-form {
    --input-dt-width: 120px;
}
.legacy-mail-intro {
    margin-bottom: 16px;
}
.legacy-mail-stat {
    display: inline-block;
    margin-bottom: 16px;
}
.legacy-mail-footnote {
    margin-top: 16px;
}

/* 임직원 등록/수정 폼(admin/users/form.blade.php) — 예전 인라인 style 을 옮김(2026-11-09, PROJECT.md §77) */
.admin-user-form {
    --input-dt-width: 130px;
}
.admin-user-form-fill {
    height: 100%;
}