@charset "utf-8";

/* divContents */
#divContents {
    background: #ffffff;
    flex: 1;
}
/* a 태그: hover 시 링크 가능함을 표시 */
.fileUpload a[href] {
    cursor: pointer;
}
.fileUpload a[href]:hover {
    color: #1a399e;
    text-decoration: underline;
    text-underline-offset: 2px;
}

/* subTop */
#divContents .subTop {
    display: flex;
    justify-content: space-between;
    align-items: end;
    gap: 5px;
    border-bottom: 2px solid #000000;
    margin-top: 15px;
    padding-bottom: 10px;
}
/* subTit */
#divContents .subTit {
    color: #000;
    font-size: 22px;
    font-weight: 700;
}
/* subLocation */
#divContents .subLocation {
    display: flex;
    align-items: center;
}
#divContents .subLocation img {
    display: block;
}
#divContents .subLocation li {
    margin-left: 19px;
    padding-left: 23px;
    color: #404040;
    font-size: 14px;
    background: url(../image/arrow.png) no-repeat left top 4px;
    background-size: 5px auto;
}
#divContents .subLocation li.first-child {
    background: none;
    margin: 0;
    padding: 0;
}
#divContents .subLocation li.first-child a {
    display: block;
    width:12px;
    height:12px;
    background: url("data:image/svg+xml, %3Csvg id='Layer_1' xmlns='http://www.w3.org/2000/svg' width='12' height='12.01' viewBox='0 0 12 12.01'%3E%3Cdefs%3E%3Cstyle%3E .cls-1 %7B fill: %23242424; %7D %3C/style%3E%3C/defs%3E%3Cpath class='cls-1' d='M6.69.27c-.39-.36-.99-.36-1.37,0L.47,3.85c-.3.28-.47.68-.47,1.09v5.57c0,.83.67,1.5,1.5,1.5h1.5c.83,0,1.5-.67,1.5-1.5v-2.5c0-.28.22-.5.5-.5h2c.28,0,.5.22.5.5v2.5c0,.83.67,1.5,1.5,1.5h1.5c.83,0,1.5-.67,1.5-1.5v-5.57c0-.41-.17-.81-.47-1.09L6.69.27Z'/%3E%3C/svg%3E") no-repeat;
    text-indent: -9999px;
}

@media screen and (max-width: 1160px) {
    #divContents .subTop {
        margin-top: 35px;
    }
}
@media screen and (max-width: 767px) {
    #divContents .subTop {
        margin-top: 20px;
        padding-bottom: 5px;
        flex-direction: column;
        align-items: flex-start;
    }
    #divContents .subTit {
        font-size: 18px;
    }
    #divContents .subLocation li {
        margin-left: 10px;
        padding-left: 14px;
        font-size:13px;
    }
}

/* strong color */
.col1{color:#f40000 !important} /*red*/
.col2{color:#ff6600 !important} /*orange*/
.col3{color:#ffee00 !important} /*yellow*/
.col4{color:#15ff00 !important} /*green*/
.col5{color:#1343E0 !important} /*blue*/
.col6{color:#ffffff !important} /*withe*/
.col7{color:#000000 !important} /*black*/
.col8{color:#666666 !important} /*gray*/
.col9{color:#333333 !important} /*darkgray*/
.col10{color: #4c2bf4 !important;} /*main Color*/

/* checkbox 공통 (클래스 적용 시에만 사용: input.chkStyle + label) */
.chkStyle {
    appearance: none;
    -webkit-appearance: none;
    width: 18px;
    height: 18px;
    margin: 0;
    border: 2px solid #cbd5e1;
    border-radius: 4px;
    background: #fff;
    vertical-align: middle;
    cursor: pointer;
    flex-shrink: 0;
    transition: border-color 0.2s ease, background-color 0.2s ease, box-shadow 0.2s ease;
}
.chkStyle:hover {
    border-color: #2d48a2;
    background-color: #f8fafc;
}
.chkStyle:checked {
    background-color: #2d48a2;
    border-color: #2d48a2;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 14 11'%3E%3Cpath fill='none' stroke='%23fff' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round' d='M1 6l4 4 8-8'/%3E%3C/svg%3E");
    background-size: 14px 11px;
    background-position: center;
    background-repeat: no-repeat;
}
.chkStyle:focus {
    outline: none;
}
.chkStyle:disabled {
    opacity: 0.5;
    cursor: not-allowed;
}
.chkStyle + label {
    margin-left: 8px;
    vertical-align: middle;
    cursor: pointer;
    font-size: 14px;
    color: #334155;
    line-height: 1.5;
}
.chkWrap {
    display: inline-flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px 12px;
}
.chkWrap .chkItem {
    display: inline-flex;
    align-items: center;
    gap: 6px;
}
.chkWrap .chkStyle + label {
    margin-left: 0;
}

/* contentsW */
.contentsW {
    padding: 25px 0 100px;
}
.contW {
    margin-bottom: 35px;
}
.contentsP {
    overflow: hidden;
    padding-left: 10px;
    padding: 31px;
}
.contentsU {
    overflow: hidden;
    padding-left: 10px;
    padding-left: 31px;
    padding-right: 200px;
    padding-top: 31px;
    padding-bottom: 11px;
}
/* manager */
.manager {
    background-color: #f7f7f7;
    border: 2px solid #ea5754;
    float: left;
    margin-bottom: 5px;
    min-height: 19px;
    padding: 5px;
    width: 820px;
}
.manager select {
    height: 21px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    font-family: '나눔 고딕';
}

/* leftW */
.leftW {
    position: relative;
    float: left;
    display: flex;
    flex-direction: column;
    justify-content: space-between;
    width: 288px;
    border: 1px solid #ccd3e0;
    border-radius: 10px;
    background: #fff;
    box-sizing: border-box;
    overflow: hidden;
}
.leftW .searchW {
    display: flex;
    justify-content: space-between;
    gap: 5px;
    padding: 11px 7px 0 9px;
}
.leftW .searchW .searchGroup {
    width:100%;
    position: relative;
}
.leftW .searchW .searchGroup input {
    width: 100%;
    height: 36px;
    border: 1px solid #304ca7;
    background: #eceefa;
    border-radius: 10px;
    padding: 0 43px 0 13px;
    box-sizing: border-box;
}
.leftW .searchW .searchGroup a {
    position: absolute;
    right: 0;
    width: 38px;
    height: 100%;
    background: #304ca7 url(../image/searchIcon.png) no-repeat center;
    border-radius: 10px;
    text-indent: -9999px;
}
.leftW .searchW select {
    border: 1px solid #ccc;
    font-family: 'NanumGothic';
}
.leftW .searchW .groupSelect {
    padding: 7px 0 0 8px;
}
.leftW .searchW .groupSelect a {
    top: 0px;
    right: 8px;
    position: absolute;
} /* 20140422 추가 */
.leftW .searchW .groupSelect span {
    display: inline-block;
    padding-left: 10px;
    background: url(../image/dotSMenu.gif) no-repeat 0 7px;
}
.leftW .searchW .add {
    width: 38px;
    height: 36px;
    border-radius: 10px;
    text-indent: -9999px;
    background: #e3e7ed url(../image/addIcon.png) no-repeat center;
}
/* sectionList */
.leftW .sectionListW {
    padding: 10px 7px 20px 0;
}
.leftW .sectionListW > div {
    box-sizing: border-box;

    overflow-y: scroll;

    max-height: 450px;
}
.leftW ul.sectionList li {
    display: block;
    color: #000;
}
.leftW ul.sectionList li a {
    display: block;
    font-weight: 500;
    font-size: 14px;
    color: #010101;
    padding: 5px 10px 5px 24px;
    line-height: 1.4;
}
.leftW ul.sectionList li a:hover {
    background: #e50038;
}
.leftW ul.sectionList li a:hover,
.leftW ul.sectionList .leftWover a {
    display: block;
    font-weight: 600;
    color: #fff;
    text-decoration: none;
}
.leftW ul.sectionList .leftWover a {
    background: #e50038 url(../image/checkIcon.png) no-repeat 7px center !important;
}
.leftW ul.sectionList li input {
    vertical-align: middle;
    width: 12px;
    height: 12px;
    margin-bottom: 4px;
}
.leftW ul.sectionList.codeGroupList {
    height: 390px;
} /* 코드관리는 왼쪽 창에서 등록하지 않으므로 사이즈 조정 필요 (20140421) */
/* rightW */
.rightW .contentW {
    margin-bottom: 0;
    flex: 1;
}
.rightW {
    display: flex;
    flex-direction: column;
    float: right;
    width: calc(100% - 288px);
    min-height: 528px;
    padding-left: 30px;
    box-sizing: border-box;
    margin-bottom: 100px;
}
.rightW .contW, .rightW .tableW {
    margin-bottom: 14px;
}
.rightW .btnRW {
    margin-top:0;
}
.PopupW {
    float: left;
    width: 710px;
}
@media screen and (max-width: 1160px) {
    .leftW {
        width:240px;
    }
    .rightW {
        width: calc(100% - 240px);
        padding-left: 15px;
    }
}
@media screen and (max-width: 1024px) {
    .leftW {
        float: none;
        width:100%;
    }
    .leftW .searchW .searchGroup input {
        width:100%;
    }
    .leftW .sectionListW {
        padding-bottom: 10px;
    }
    .leftW .sectionListW > div {
        max-height: 145px;
    }
    .rightW {
        float: none;
        width:100%;
        margin-top: 15px;
        padding-left: 0;
    }
}
/* registerW */
.registerW {
    position: absolute;
    top: 45px;
    right: 0;
    width: 700px;
    min-height: 140px;
    padding: 15px;
    border: 1px solid #ccc;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
    z-index: 999;
}
.registerW .tableStyle01 {
    min-width: 0;
}
.registerW .tableStyle01 th {
    padding: 10px;
    font-size: 14px;
}
.registerW .btnClose {
    position: absolute;
    top: 13px;
    right: 15px;
    text-indent: -9999px;
}
.registerW .btnClose a{
    display: block;
    width: 24px;
    height: 24px;
    background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='24' height='24' fill='none' stroke='%23000' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' class='feather feather-x'%3E%3Cpath d='M18 6 6 18M6 6l12 12'/%3E%3C/svg%3E") no-repeat center / contain;
}
.registerW .btnClose img{
    width:100%;
    height:100%;
    object-fit: contain;
}
@media screen and (max-width: 1300px) {
    .registerW {
        top: 73px;
        right: 10px;
    }
}
/* 모바일 */
.wholeMenu .registerW {
    width: 60%;
    min-width: 270px;
    left: 10px;
    right: auto;
    top: 60px;
    padding: 12px;
}
.wholeMenu .titleStyle1 {
    font-size: 15px;
    margin: 0 0 5px 0;
    padding-left: 10px;
}
.wholeMenu .titleStyle1::before {
    width:4px;
    height:4px;
    top: 6px;
}
.wholeMenu .registerW .tableStyle01 th {
    font-size:13px;
    padding:7px;
}
.wholeMenu .tableStyle01 td {
    height: auto;
    padding:7px;
}
.wholeMenu .tableStyle01 td .inputStyl01 {
    width: 50%;
    min-width: 130px;
    height:25px;
    line-height: 26px;
}
.wholeMenu .btnClose {
    top: 11px;
    right: 10px;
}
.wholeMenu .btnClose a{
    width: 20px;
    height: 20px;
}
.wholeMenu .btnClose img{
    object-fit: contain;
}
.wholeMenu .btnRW li a {
    min-width: 50px;
    line-height: 27px;
    font-size: 13px;
}

/* tabMenu 상단 사용 */
.tabMenu {
    margin-bottom: 28px;
}
.tabMenu ul {
    display: flex;
    gap: 2px;
    justify-content: space-between;
}
.tabMenu ul li{
    width: auto;
}
.tabMenu li a {
    display: inline-block;
    font-weight: 600;
    font-size: 15px;
    text-align: center;
    min-width: 118px;
    height: 45px;
    line-height: 45px;
    border: 1px solid #9c9d9f;
    background: #fff;
    border-radius: 10px;
    box-sizing: border-box;
}
.tabMenu .tabMenuOn a {
    color: #fff;
    background: #304ca7;
}
.tabMenu .tabMenuOff a:hover,
.tabMenu .tabMenuOff a:active {
    color: #000;
}

/* tabMenu 내용에 사용 */
.tabMenu2 {
    height: 27px;
}
.tabMenu2 li {
    float: left;
    height: 26px;
    margin: 0 1px 0 0;
    padding: 0 17px 0 20px;
    overflow: hidden;
}
.tabMenu2 li.tabMen2uOn {
    padding: 0 17px 0 20px;
    color: #fff;
}

.tabMenu2 .tabMenu2On {
    float: left;
    height: 26px;
    border: 1px solid #333;
    border-bottom: none;
    font-weight: bold;
    background: #636363;
    color: #ffffff;
}
.tabMenu2 .tabMenu2On a {
    display: block;
    padding-top: 3px;
    color: #ffffff;
    text-decoration: none;
}
.tabMenu2 .tabMenu2On a:hover {
    color: #ffffff;
    text-decoration: none;
}
.tabMenu2 .tabMenu2On a:active {
    color: #ffffff;
    text-decoration: none;
}

.tabMenu2 .tabMenu2Off {
    float: left;
    height: 26px;
    font-weight: bold;
    border: 1px solid #dddee3;
    border-bottom: none;
    font-weight: bold;
    background: #e8f4f8;
}
.tabMenu2 .tabMenu2Off a {
    display: block;
    padding-top: 3px;
    color: #777;
    text-decoration: none;
    white-space: nowrap;
}
.tabMenu2 .tabMenu2Off a:hover {
    color: #555;
    text-decoration: none;
}
.tabMenu2 .tabMenu2Off a:active {
    color: #555;
    text-decoration: none;
}
@media screen and (max-width: 1024px) {
    .tabMenu {
        margin-bottom: 15px;
    }
    .tabMenu ul {
        gap: 3px;
        justify-content: flex-start;
    }
    .tabMenu li a {
        min-width: 97px;
        height:38px;
        line-height: 38px;
    }
}

/* titleStyle1 */
.titleStyle1 {
    font-weight: 600;
    margin-bottom: 6px;
    font-size: 16px;
    letter-spacing: -0.25px;
    color: #000000;
    line-height: 1.2;
    padding-left: 12px;
    position: relative;
} /* form 위치 변경에 따른 margin 조정(20140417) */
.titleStyle1::before {
    content: '';
    width: 5px;
    height: 5px;
    position: absolute;
    left: 0;
    top: 8px;
    background: #323231;
    border-radius: 50%;
}
.titleStyle2 {
    text-align: center;
    margin: 7px 0px;
    font-size: 13px;
    font-weight: bold;
    color: red;
    text-decoration: underline;
}
.titleStyle3 {
    display: flex;
    gap: 6px 15px;
    flex-wrap: wrap;
    align-items: center;
    margin-bottom: 5px;
}
.titleStyle3 li {
    position: relative;
    padding-left: 11px;
    font-weight: 600;
    font-size: 14px;
    line-height: 1.5;
}
.titleStyle3 li::before {
    content: '';
    position: absolute;
    width: 5px;
    height: 5px;
    background: #323231;
    left: 0;
    top: 50%;
    transform: translateY(-50%);
    border-radius: 50%;
}
.titleStyle3 li.reconfirmItem {
    margin-left: auto;
    padding: 0;
}
.titleStyle3 li.reconfirmItem::before {
    display: none;
}
.titleStyle3 li.reconfirmItem .reconfirmLink {
    display: inline-block;
    background-color: #eb3e68;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    line-height: 1.5;
    vertical-align: middle;
}

.titleStyle3 li.reconfirmItem .normalListLink {
    display: inline-block;
    background-color: #a8b3c8;
    color: #ffffff;
    font-weight: 700;
    font-size: 14px;
    padding: 4px 12px;
    border-radius: 4px;
    text-decoration: none;
    transition: background-color 0.3s ease, box-shadow 0.3s ease;
    line-height: 1.5;
    vertical-align: middle;
}

.titleStyle3 li.reconfirmItem .reconfirmLink:hover {
    background-color: #ff3333;
}

.titleStyle3 li.reconfirmItem .normalListLink:hover {
    background-color: #a8b3c8;
}
.titleStyle3 li.reconfirmItem .reconfirmLink .countNumber {
    color: #ffffff;
    font-weight: 700;
}
.countNumber {
    color: #dc0038;
}
.countNumber1 {
    margin-right: 7px;
    color: red;
    font-weight: bold;
}
.countNumber.link {
    cursor: pointer;
} /* click가능 */

@media screen and (max-width: 1024px) {
    .titleStyle3 {
        gap: 4px 11px;
    }
    .titleStyle3 li {
        font-size: 14px;
    }
}
@media screen and (max-width: 767px) {
    .titleStyle3 {
        padding-bottom: 10px;
    }
    .titleStyle3 li {
        font-size: 13px;
    }
}
/* contentW */
.contentW {
    margin-bottom: 35px;
    padding: 28px 25px 30px;
    background: #fff;
    border-radius: 10px;
    border: 1px solid #e6eaf2;
}

@media screen and (max-width: 1024px) {
    .contentW {
        padding: 15px 10px 20px;
    }
}

/* 상세 공통 (공지사항, 설치정보, 교육 등) */
.detailWrap .detailHeader {
    display: flex;
    justify-content: space-between;
    align-items: end;
    margin-bottom: 20px;
    padding-bottom: 16px;
    border-bottom: 1px solid #e2e8f0;
}
.detailWrap .detailHeader .detailTitle {
    margin: 0;
    font-size: 25px;
    font-weight: 600;
    color: #1e293b;
    line-height: 1.4;
}
.detailWrap .detailTitle.point {
    color: #1a399e;
}
.detailWrap .detailHeader .detailMeta {
    margin: 0;
    padding: 0;
    border: none;
    font-size: 14px;
    color: #64748b;
}
.detailWrap .detailMeta span {
    margin-right: 20px;
}
.detailWrap .detailMeta strong {
    margin-left: 4px;
    font-weight: 600;
    color: #334155;
}
.detailWrap .detailContent {
    min-height: 120px;
    margin-bottom: 28px;
    font-size: 15px;
    line-height: 1.7;
    color: #334155;
}
.detailWrap .detailContent p {
    margin: 0 0 0.8em 0;
}
.detailWrap .detailContent img {
    max-width: 100%;
    height: auto;
}

/* table 상단 20140416 */
.tableTop {
    margin-bottom: 5px;
}
.tableTop select {
    width: 110px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #d1d1d1;
    border-radius: 5px;
}

/* table */
.tableW {
    margin-bottom: 35px;
    overflow-x: auto;
    overflow-y: hidden;
}
table caption {
    display: none;
}
.tableStyle01 {
    width: 100%;
    min-width: 880px;
    border-top: 1px solid #d1d1d1;
    border-left: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    color: #333;
    table-layout: fixed;
}
.tableStyle01 img {
    vertical-align: middle;
}
.tableStyle01 thead th {
    height: 53px;
    padding: 0 10px;
}
.tableStyle01 th {
    font-weight: 500;
    border-right: 1px solid #c5cad4;
    border-bottom: 1px solid #c5cad4;
    font-size: 15px;
    padding: 8px 10px;
    text-align: center;
    color: #000000;
    background: #dfe3eb;
    box-sizing: border-box;
}
.tableStyle01 th input {
    vertical-align: middle;
}
.tableStyle01 tr:first-of-type a {
    font-weight: 600;
    color: #000;
}
.tableStyle01 td {
    font-weight: 500;
    height: 50px;
    font-size: 15px;
    color: #4d4d4d;
    padding: 8px 10px;
    border-bottom: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    background: #fff;
    box-sizing: border-box;
}
.tableStyle01 td > a {
    color: inherit;
}
.tableStyle01 td > a:hover {
    color: #1a399e;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tableStyle01 td a.file {
    color: #2b75c1;
    font-size: 14px;
    text-decoration: underline;
    text-underline-offset: 2px;
}
.tableStyle01 td input {
    font-size: 14px;
    vertical-align: middle;
}
.tableStyle01 td .inputStyl01 {
    width: 41%;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border: 1px solid #d9d9dc;
    border-radius: 5px;
    background-color: #fff;
    box-sizing: border-box;
}
.tableStyle01 td .inputStyl02 {
    width: 150px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle01 td .inputStyl03 {
    width: 50px;
    height: 36px;
    line-height: 36px;
    padding: 0 5px;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    box-sizing: border-box;
}
.tableStyle01 td.radioStyle01 input {
    margin-right: 5px;
    vertical-align: middle;
}
*:first-child + html .tableStyle01 td.radioStyle01 input {
    margin-right: 2px;
    vertical-align: middle;
}
.tableStyle01 td input[type='checkbox'] {
    accent-color: #2d48a2;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
}
.tableStyle01 select {
    width: 110px;
    height: 36px;
    line-height: 36px;
    border-radius: 5px;
    border: 1px solid #d4d4d4;
    padding: 0 5px;
    box-sizing: border-box;
}
.tableStyle01 td textarea {
    width: 98%;
    height: 60px;
    line-height: 15px;
    padding: 2px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    color: #333;
    background-color: #fff;
}
.tableStyle01 td.chkboxStyle01 input {
    margin-right: 2px;
    vertical-align: middle;
}
.tableStyle01 td.highLight {
    background: #ececec;
    font-weight: bold;
}
.tableStyle01 td.attention {
    background: #8db4e2;
    font-weight: bold;
}
.tableStyle01 .largeStyle01 {
    width: 98%;
    height: 70px;
    line-height: 15px;
    padding: 2px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    color: #333;
    background-color: #fff;
}
.tableStyle01 .largeStyle02 {
    width: 98%;
    height: 180px;
    line-height: 15px;
    padding: 2px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    color: #333;
    background-color: #fff;
}
.tableStyle01 .largeStyle03 {
    width: 98%;
    height: 180px;
    line-height: 15px;
    padding: 2px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    color: #333;
    background-color: #fff;
}
.tableStyle01 td.content {
    padding: 28px 15px 60px;
    height: 220px;
    vertical-align: top;
    box-sizing: border-box;
} /* 공지사항 등의 내용 등의 기본 영역 20140409 hjchoi */
.tableStyle01 li {
    float: left;
    width: 137px;
    height: 22px;
} /* checkbox 나열 (20140522) */

.tableStyle02 {
    width: 100%;
    border-top: 2px solid #636363;
    border-left: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    color: #333;
    font-size: 12px;
}
.tableStyle02 img {
    vertical-align: middle;
}
.tableStyle02 th {
    line-height: 16px;
    padding: 4px 10px;
    border-right: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    font-weight: bold;
    text-align: center;
    background: #ececec;
}
.tableStyle02 th input {
    vertical-align: middle;
}
.tableStyle02 td {
    line-height: 16px;
    padding: 4px 8px;
    border-bottom: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
} /* 테이블 중간에 th가 들어가는 경우를 위해 th와 td의 border color를 맞춘다. (20140425) */
.tableStyle02 td input {
    font-family: '나눔 고딕';
    font-size: 12px;
    vertical-align: middle;
}
.tableStyle02 td .inputStyl01 {
    width: 40%;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle02 td .inputStyl02 {
    width: 150px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle02 td .inputStyl03 {
    width: 50px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle02 td .inputStyl04 {
    width: 213px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle02 td .inputStyl11 {
    width: 537px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle02 td .inputStyl12 {
    width: 105px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle02 td .inputPrice {
    width: 90px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    text-align: right;
} /* 유지보수계약 금액 (20140424) */
.tableStyle02 td.radioStyle01 input {
    margin-right: 5px;
    vertical-align: middle;
}
*:first-child + html .tableStyle02 td.radioStyle01 input {
    margin-right: 2px;
    vertical-align: middle;
}
.tableStyle02 select {
    width: 110px;
    height: 21px;
    line-height: 15px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    font-family: '나눔 고딕';
}
.tableStyle02 td textarea {
    width: 98%;
    height: 60px;
    line-height: 15px;
    padding: 2px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    font-family: '나눔 고딕';
    color: #333;
    background-color: #fff;
}
.tableStyle02 td.chkboxStyle01 input {
    margin-right: 2px;
    vertical-align: middle;
}
.tableStyle02 td.highLight {
    background: #ececec;
    font-weight: bold;
}
.tableStyle02 td.attention {
    background: #8db4e2;
    font-weight: bold;
}
.tableStyle02 .redStar {
    color: #ff0000;
    font-weight: bold;
    font-size: 12px;
    padding-left: 2px;
}
.tableStyle02 .largeStyle01 {
    width: 98%;
    height: 70px;
    line-height: 15px;
    padding: 2px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    font-family: '나눔 고딕';
    color: #333;
    background-color: #fff;
}
.tableStyle02 .largeStyle02 {
    width: 98%;
    height: 180px;
    line-height: 15px;
    padding: 2px;
    border: 1px solid #d1d1d1;
    font-size: 12px;
    font-family: '나눔 고딕';
    color: #333;
    background-color: #fff;
}
.tableStyle02 td.content {
    height: 220px;
    vertical-align: top;
} /* 공지사항 등의 내용 등의 기본 영역 20140409 hjchoi */

.tableStyle03 {
    width: 100%;
    min-width: 880px;
    border-top: 2px solid #0055a2;
    border-bottom: 1px solid #d1d1d1;
    color: #000000;
    table-layout: fixed;
}
.tableStyle03 th {
    font-weight: 500;
    padding: 5px 5px 5px 35px;
    text-align: left;
    border-right: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    font-size: 15px;
    color: #000000;
    background: #f0f2f6;
    box-sizing: border-box;
}
.tableStyle03 th:not(:first-of-type) {
    border-left: 1px solid #d1d1d1;
}
.tableStyle03 th.txtCenter {
    padding: 0 10px;
    text-align: center;
}
.tableStyle03 th select {
    width: 150px;
}
.tableStyle03 td {
    font-weight: 500;
    height: 50px;
    padding: 6px 10px;
    border-bottom: 1px solid #d1d1d1;
    background: #fff;
    box-sizing: border-box;
}
.tableStyle03 td input[type='text'],
.tableStyle03 td input[type='password'] {
    width: 170px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #d4d4d4;
    font-size: 14px;
    border-radius: 5px;
    color: #222222;
    box-sizing: border-box;
    padding: 0 5px;
    background: #fff;
}
.tableStyle03 td input[type='number'] {
    width: 70px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #d4d4d4;
    font-size: 14px;
    border-radius: 5px;
    color: #222222;
    box-sizing: border-box;
    padding: 0 5px;
    background: #fff;
}
.tableStyle03 .tdW {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
}

/* 모달 내부 테이블 스타일 개선 */
#modalPopup .tableStyle03 {
    border-collapse: separate;
    border-spacing: 0;
}

#modalPopup .tableStyle03 th {
    padding: 12px 15px 12px 35px;
}

#modalPopup .tableStyle03 td {
    padding: 12px 15px;
    height: auto;
    min-height: 50px;
}
.tableStyle03 td .inputStyl11 {
    width: 537px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle03 td .inputStyl12 {
    width: 105px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
}
.tableStyle03 td .inputPrice {
    width: 90px;
    line-height: 15px;
    padding: 3px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    text-align: right;
} /* 유지보수계약 금액 (20140424) */
.tableStyle03 td.radioStyle01 input {
    margin: 0 5px 2px 0;
    vertical-align: middle;
    accent-color: #000;
}
*:first-child + html .tableStyle03 td.radioStyle01 input {
    margin-right: 2px;
    vertical-align: middle;
}
.tableStyle03 th input[type='checkbox'], .tableStyle03 td input[type='checkbox'] {
    accent-color: #2d48a2;
    width: 16px;
    height: 16px;
    margin-right: 3px;
    vertical-align: middle;
    margin-bottom: 2px;
}
.tableStyle03 select {
    width: 170px;
    height: 36px;
    line-height: 36px;
    border: 1px solid #d4d4d4;
    font-size: 14px;
    border-radius: 5px;
    color: #222222;
    padding: 0 13px 0 10px;
    box-sizing: border-box;
    appearance: none;
    background: #fff url(../image/selectArrow.png) no-repeat right 13px center;
}
.tableStyle03 td textarea {
    font-weight: 500;
    width: 100%;
    min-height: 220px;
    line-height: 15px;
    padding: 13px 10px;
    border: 1px solid #d4d4d4;
    font-size: 14px;
    color: #333;
    border-radius: 10px;
    background-color: #f3f3f3;
    box-sizing: border-box;
}
.tableStyle03 td.chkboxStyle01 span {
    display: inline-block;
    margin: 10px 10px 0 0;
}
.tableStyle03 td.highLight {
    background: #ececec;
    font-weight: bold;
}
.tableStyle03 td.attention {
    background: #8db4e2;
    font-weight: bold;
}
.tableStyle03 td.content {
    padding: 28px 15px 60px;
    height: 220px;
    vertical-align: top;
    box-sizing: border-box;
}
.tableStyle03 .middle {
    vertical-align: middle;
}

.tableCont {
    border: 2px solid #a8b3c8;
    border-radius: 10px;
    overflow-x: auto;
}
.reconfirmTable {
    border: 2px solid #dc0038;
}

.tableStyle04 {
    width: 100%;
    min-width: 1250px;
    table-layout: fixed;
}
.tableStyle04 thead th {
    line-height: 35px;
    padding: 0 10px;
    text-align: center;
    font-weight: 500;
    color: #666666;
    font-size: 14px;
    border-left: 1px solid #a8b3c8;
    border-bottom: 1px solid #a8b3c8;
}
.tableStyle04 thead th:first-child {
    border-left: none;
}
.tableStyle04 tbody tr {
    background: #fff;
    border-top: 1px solid #d3d9e3;
}
.tableStyle04 tbody tr:not(.bgRed):hover {
    background: #f5f7fa !important;
}
.tableStyle04 tbody tr.bgRed:hover {
    background: #ffc4c4 !important;
}
.tableStyle04 tbody tr.bgOrange:hover {
    background: #ffe5b4 !important;
}

/* 입력 폼 테이블(tableW)에서의 tableStyle04 보정 */
.tableW .tableStyle04 {
    min-width: 0;
    border-top: 1px solid #cbd5e1;
    border-bottom: 1px solid #cbd5e1;
    border-radius: 12px;
    overflow: hidden;
    border-collapse: separate;
    border-spacing: 0;
}
.tableW .tableStyle04 tbody th {
    padding: 8px 12px;
    text-align: left;
    font-weight: 600;
    font-size: 14px;
    color: #0f172a;
    background: #f8fafc;
    border-right: 1px solid #e2e8f0;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    box-sizing: border-box;
    white-space: nowrap;
}
.tableW .tableStyle04 tbody td {
    padding: 8px 12px;
    font-size: 14px;
    color: #0f172a;
    line-height: 1.5;
    text-align: left;
    background: #ffffff;
    border-bottom: 1px solid #e2e8f0;
    vertical-align: middle;
    box-sizing: border-box;
    word-break: break-word;
}
.tableW .tableStyle04 tbody tr:last-child th,
.tableW .tableStyle04 tbody tr:last-child td {
    border-bottom: none;
}
.tableW .tableStyle04 tbody td .wp100 {
    width: 100%;
    box-sizing: border-box;
}

/* tableStyle04 폼 내부 입력 컴포넌트 톤 정렬 */
.tableW .tableStyle04 input[type='text'],
.tableW .tableStyle04 input[type='password'],
.tableW .tableStyle04 input[type='email'],
.tableW .tableStyle04 input[type='tel'],
.tableW .tableStyle04 input[type='number'],
.tableW .tableStyle04 select {
    min-height: 34px;
    padding: 7px 10px;
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}
.tableW .tableStyle04 input:focus,
.tableW .tableStyle04 select:focus,
.tableW .tableStyle04 textarea:focus {
    outline: none;
    border-color: #1a399e;
}

/* select2(직원관리 select)도 같은 톤으로 */
.tableW .tableStyle04 .select2-container {
    width: 100% !important;
}
.tableW .tableStyle04 .select2-container--default .select2-selection--single {
    height: auto;
    min-height: 34px;
    padding: 4px 10px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
}
.tableW .tableStyle04 .select2-container--default .select2-selection--single:hover,
.tableW .tableStyle04 .select2-container--default.select2-container--focus .select2-selection--single,
.tableW .tableStyle04 .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #1a399e;
}
.tableW .tableStyle04 .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0;
    padding-right: 28px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
}
.tableW .tableStyle04 .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}

/* 목록 테이블 스타일 - tableCont2 (트렌디) */
.tableCont2 {
    background: #fff;
    border-radius: 16px;
    border: 1px solid #cbd5e1;
    padding: 3px;
}
.tableCont2 table {
    width: 100%;
    min-width: 600px;
    table-layout: fixed;
    border-collapse: collapse;
    font-size: 14px;
    color: #334155;
}
.tableCont2 table thead th {
    padding: 16px 20px;
    text-align: center;
    font-weight: 600;
    color: #475569;
    font-size: 15px;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    background: transparent;
    border-bottom: 1px solid #e2e8f0;
}
.tableCont2 table tbody tr {
    background: #fff;
}
.tableCont2 table tbody tr:hover {
    background: #f8fafc !important;
}
.tableCont2 table tbody tr:hover td:first-child {
    border-left: 3px solid #1a399e;
}
.tableCont2 table tbody tr.bgRed:hover {
    background: #fff5f5 !important;
}
.tableCont2 table tbody tr.bgRed:hover td:first-child {
    border-left-color: #ef4444;
}
.tableCont2 table tbody tr.bgBlue:hover {
    background: #cfe4f8 !important;
}
.tableCont2 table tbody tr.bgBlue:hover td:first-child {
    border-left-color: #1a399e;
}
.tableCont2 table tbody tr.bgOrange:hover {
    background: #f8e5b4 !important;
}

.tableCont2 table tbody tr.bgOrange:hover td:first-child {
    border-left-color: #ff6600;
}
.tableCont2 table td {
    padding: 15px 20px;
    vertical-align: middle;
    line-height: 1.5;
    border-bottom: 1px solid #f1f5f9;
    border-left: 3px solid transparent;
    text-align: center;
}
.tableCont2 table td:first-child {
    border-left: 3px solid transparent;
}
.tableCont2 table tbody tr:last-child td {
    border-bottom: none;
}
.tableCont2 table td.txtLeft {
    text-align: left;
}
.tableCont2 table td.txtLeft.point a {
    font-weight: 800;
    color: #1a399e;
}
.tableCont2 table tbody tr td.txtCenter {
    text-align: center;
}
.tableCont2 table td a {
    text-decoration: none;
    font-weight: 700;
    transition: color 0.2s ease, text-decoration 0.2s ease;
}
.tableCont2 table td a:hover {
    color: #1a399e;
    text-decoration: underline;
    text-underline-offset: 3px;
}
.tableCont2 table td a:focus-visible {
    outline: 2px solid #1a399e;
    outline-offset: 2px;
    border-radius: 2px;
}

/* 첨부파일 영역 공통 (목록/상세 공통) */
.attachFileArea {
    margin-top: 16px;
    padding: 14px 14px 12px;
    border: 1px solid #e2e8f0;
    border-radius: 12px;
    background: #f8fafc;
}
.attachFileTit {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    font-weight: 600;
    color: #475569;
    margin: 0 0 10px 0;
}
.attachFileTit .attachFileIco {
    width: 18px;
    height: 18px;
    object-fit: contain;
    flex-shrink: 0;
}
.attachFileList {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-wrap: wrap;
    gap: 8px 10px;
    align-items: center;
}
.attachFileList li {
    margin: 0;
    max-width: 100%;
}
.attachFileLink {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-size: 14px;
    color: #1a399e;
    text-decoration: none;
    padding: 8px 12px;
    background: #fff;
    border: 1px solid #e2e8f0;
    border-radius: 8px;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    max-width: 100%;
}
.attachFileLink:hover {
    background: #f0f4fc;
    border-color: #1a399e;
    color: #152a7a;
    text-decoration: none;
}
.attachFileLink .attachFileIco {
    width: 16px;
    height: 16px;
    object-fit: contain;
    flex-shrink: 0;
    opacity: 0.85;
}
.attachFileLink:hover .attachFileIco {
    opacity: 1;
}
/* 새 탭에서 바로 열리는(inline 미리보기) 첨부파일 링크 힌트 */
.attachFileLink--inline::after {
    content: "";
    display: inline-block;
    width: 11px;
    height: 11px;
    flex-shrink: 0;
    margin-left: 2px;
    background-color: currentColor;
    opacity: 0.65;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center center;
    -webkit-mask-size: contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center center;
    mask-size: contain;
}
.attachFileLink--inline:hover::after {
    opacity: 1;
}
.attachFileLink--inline .attachFileName {
    text-decoration: underline;
    text-decoration-style: dotted;
    text-underline-offset: 2px;
}
.attachFileName {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* 그룹관리 좌우 영역 컨텐츠 */
/* contL */
.contL {
    float: left;
    border-top: 1px solid #636363;
    margin-bottom: 15px;
}
.contL ul.depName {
    width: 220px;
    height: 250px;
    padding: 5px 10px;
    border: 1px solid #d1d1d1;
    overflow: auto;
}
.contL ul.depName li {
    line-height: 22px;
}
.contL ul.depName li input {
    vertical-align: middle;
}
/* contR */
.contR {
    float: right;
    width: 420px;
    margin-bottom: 15px;
}
.contR ul.gubun {
    width: 420px;
    height: 220px;
    padding: 5px 10px;
    border-top: 1px solid #636363;
    border-left: 1px solid #d1d1d1;
    border-right: 1px solid #d1d1d1;
    border-bottom: 1px solid #d1d1d1;
    overflow: auto;
}
.contR ul.gubun li {
    line-height: 22px;
}
.contR ul.gubun li input {
    vertical-align: middle;
}

/* 게시판 검색 */
#divContentSearch {
    display: flex;
    justify-content: center;
    margin-bottom: 16px;
    padding: 16px 10px;
    background: #f0f2f6;
}
#divContentSearch input {
    font-size: 14px;
}
#divContentSearch select {
    width: 100px;
    height: 36px;
    font-size: 14px;
    color: #222222;
    border: 1px solid #d4d4d4;
    border-radius: 5px;
    padding-left: 5px;
    box-sizing: border-box;
}
#divContentSearch .input01 {
    width: 250px;
    height: 36px;
    padding: 0 10px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    border-radius: 5px;
    box-sizing: border-box;
}
#divContentSearch .searchBtn {
    display: inline-block;
    min-width: 60px;
    padding: 0 10px;
    border: 0;
    background: #3a4159;
    color: #fff;
    font-size: 14px;
    line-height: 35px;
    border-radius: 5px;
}

#divContentSearch2 {
    clear: both;
    margin-bottom: 7px;
    padding: 10px;
    background: #f7f7f7;
    text-align: left;
}
#divContentSearch2 select {
    border: 1px solid #d1d1d1;
}
#divContentSearch2 .input01 {
    width: 100px;
    padding: 2px;
    border: 1px solid #d4d4d4;
    background-color: #fff;
    line-height: 15px;
}
#divContentSearch2 .searchBtn {
    display: inline-block;
    height: 23px;
    padding: 0 20px;
    border: 0;
    background: #4b4d5a;
    color: #fff;
    font-weight: bold;
    font-size: 13px;
    line-height: 23px;
    vertical-align: bottom;
}
@media screen and (max-width: 767px) {
    #divContentSearch {
        padding: 16px 5px;
    }
    #divContentSearch select {
        width:60px;
        height:34px;
    }
    #divContentSearch .input01 {
        width:170px;
        height:34px;
    }
    #divContentSearch .searchBtn {
        min-width: 53px;
        line-height: 33px;
    }
}
@media screen and (max-width: 360px) {
    #divContentSearch select {
        width:55px;
    }
    #divContentSearch .input01 {
        width:150px;
    }
    #divContentSearch .searchBtn {
        min-width: 48px;
    }
}

/*페이징*/
.paging {
    text-align: center;
    margin-top: 35px;
}
.paging a {
    font-weight: 600;
    display: inline-block;
    margin: 0 9px;
    vertical-align: middle;
    text-decoration: none;
    color: #57647d;
    font-weight: bold;
}
.paging a:hover {
    color: #dc0038;
}
.paging strong {
    display: inline-block;
    font-weight: 600;
    padding: 0 9px;
    margin: 0 9px;
    vertical-align: middle;
    color: #fff;
    background: #000;
    line-height: 24px;
    border-radius: 5px;
}
.paging .fir {
    width: 11px;
    height: 11px;
    margin: 0 34px 0 0;
    background: url(../image/btnFirst.png) no-repeat 0 0;
    text-indent: -999999px;
}
.paging .prev {
    width: 6px;
    height: 10px;
    margin: 0 25px 0 0;
    background: url(../image/btnPrev.png) no-repeat 0 0;
    text-indent: -999999px;
}
.paging .next {
    width: 6px;
    height: 10px;
    margin: 0 0 0 25px;
    background: url(../image/btnNext.png) no-repeat right 0;
    text-indent: -999999px;
}
.paging .end {
    width: 11px;
    height: 11px;
    margin: 0 0 0 34px;
    background: url(../image/btnEnd.png) no-repeat 0 0;
    text-indent: -999999px;
}

@media screen and (max-width: 767px) {
    .paging {
        margin-top: 30px;
    }
    .paging strong {
        margin: 0 7px;
        padding: 0 7px;
        line-height: 21px;
    }
    .paging a {
        margin: 0 7px;
    }
    .paging .fir,
    .paging .prev {
        margin-right: 10px;
    }
    .paging .next,
    .paging .end {
        margin-left: 10px;
    }
}

/* button */
.buttonW {
    margin-top: 29px;
    text-align: center;
    position: relative;
} /* 하단 중앙 */
.buttonW ul {
    display: flex;
    justify-content: center;
    column-gap: 10px;
}
.buttonW li a {
    min-width: 100px;
    display: inline-block;
    line-height: 40px;
    font-weight: 500;
    color: #797979;
    font-size: 15px;
    padding: 0 10px;
    box-sizing: border-box;
    background: #eeeeee;
    border-radius: 10px;
    white-space: nowrap;
    border: 1px solid #8c8c8c;
    transition: all 0.2s;
}
.buttonW li:first-child a {
    background: #1a399e;
    color: #fff;
}
.buttonW li:first-child a:hover {
    background: #152d7d;
}
.buttonW li:nth-child(2) a:hover {
    background: #e0e0e0;
}

/* 서브페이지 하단 버튼 */
/* .btnW {
    margin-top: 29px;
    text-align: center;
    position: relative;
}  */

.btnW {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 12px;
    margin-top: 28px;
    text-align: center;
    align-items: center;
}


/* 하단 중앙 */
.btnW ul {
    flex: 1;
    display: flex;
    justify-content: center;
    column-gap: 10px;
}

.btnW li a, .btnW li input {
    min-width: 110px;
    display: inline-block;
    height: 44px;
    line-height: 44px;
    font-weight: 500;
    color: #fff;
    font-size: 16px;
    padding: 0 10px;
    box-sizing: border-box;
    background-color: #1c3aa3;
    border-radius: 10px;
    white-space: nowrap;
    border: 1px solid #8c8c8c;
    transition: all 0.2s;
    cursor: pointer;
}
.btnW li .modify {
    background-color: #4970b1;
}
.btnW li .delete {
    background-color: #30415b;
}
.btnW li .list {
    background-color: #fff;
    color: #595959;
}
.btnW li .save {
    background-color: #242424;
    color: #fff;
}

.btnRW {
    margin-top: 10px;
    text-align: right;
} /* 오른쪽 */
.btnRW ul {
    display: flex;
    justify-content: flex-end;
    gap: 6px;
}
.btnRW li a {
    display: inline-block;
    min-width: 75px;
    font-weight: 600;
    color: #fff;
    font-size: 14px;
    text-align: center;
    padding: 0 10px;
    line-height: 33px;
    background: #515060;
    border-radius: 6px;
    box-sizing: border-box;
}
.btnRW li a.del {
    border: 1px solid #cbcbcb;
    background: #fff;
    color: #878787;
}

.btnS {
    font-size: 11px;
    vertical-align: top;
} /* 테이블 내 작은 버튼 */
.btnS a {
    display: inline-block;
    color: #fff;
    padding: 1px 7px 3px 7px;
    border: 1px solid #666;
    background: #888;
}
.btnS a:hover {
    display: inline-block;
    color: #f5f5f5;
    padding: 1px 7px 3px 7px;
    border: 1px solid #999;
    background: #999;
    text-decoration: none;
}

.btnS2 {
    font-size: 11px;
    vertical-align: top;
} /* 테이블 내 작은 버튼 */
.btnS2 a {
    display: inline-block;
    color: #fff;
    padding: 1px 17px 3px 17px;
    border: 1px solid #5875a1;
    background: #4381ce;
}
.btnS2 a:hover {
    display: inline-block;
    color: #fff;
    padding: 1px 17px 3px 17px;
    border: 1px solid #5875a1;
    background: #5875a1;
}

.btnWR {
    position: absolute;
    top: 0;
    right: 0;
} /* 가운데 정열 옆 오른쪽 버튼 20130820 */
.btnWR li {
    float: left;
    margin-right: 0;
    margin-left: 5px;
}
.btnWR li a {
    display: inline-block;
    color: #fff;
    padding: 6px 30px 10px 30px;
    background: #989070;
}
.btnWR li a:hover {
    display: inline-block;
    color: #fff;
    padding: 6px 30px 10px 30px;
    background: #5f5b4a;
    text-decoration: none;
}

@media screen and (max-width: 767px) {
    /* 데스크톱은 a/input 을 같은 규칙으로 묶어 두었으므로 축소도 같이 걸어야
       목록(a) 만 작아지고 수정(input) 은 그대로 남는 어긋남이 생기지 않는다. */
    .btnW li a,
    .btnW li input {
        height: 35px;
        line-height: 35px;
        min-width: 70px;
        font-size: 14px;
    }
}

/* float */
.fr {
    float: right;
}
.fl {
    float: left;
}

/* 간격조정 */
.marT20 {
    margin-top: 20px;
}
.marR10 {
    margin-right: 10px;
}
*:first-child + html .marR10 {
    margin-right: 5px;
} /* radio간격 위한 핵*/

/* 텍스트정렬 */
.txtCenter {
    text-align: center !important;
}
.txtLeft {
    text-align: left !important;
}
.txtRight {
    text-align: right !important;
}

/* 별표 */
.redStar {
    color: #ff0000;
    font-weight: bold;
    font-size: 12px;
    padding-left: 2px;
}

/* input width 조정 */
.width50 {
    width: 50px !important;
}
.width80 {
    width: 80px !important;
}
.width125 {
    display: inline-block;
    width: 125px !important;
}
.width130 {
    width: 130px !important;
}
.width145 {
    width: 145px !important;
}
.width165 {
    width: 165px !important;
}
.width170 {
    width: 170px !important;
}
.width200 {
    width: 200px !important;
}
.width250 {
    width: 250px !important;
}
.width530 {
    width: 530px !important;
}
.widthFull {
    width: 100% !important;
}
/* 목록 검색감추기, 보이기 */
.ifFormArea {
    margin-bottom: 8px;
}

/*space*/
.spbtm20 {
    margin-bottom: 20px;
}

/* 통계 엑셀영역 추가 2014-04-17 kypark */
.excel {
    float: right;
    margin-bottom: 2px;
}
.excel span {
    margin-left: 15px;
}
.excel a.excelBtn {
    vertical-align: middle;
    margin-left: 3px;
    padding-left: 10px;
    display: inline-block;
}

/* 작성 화면 공통 스타일 (write) */
.writeWrap {
    margin-top: 8px;
}
.writeCard {
    position: relative;
    background: #fff;
    border: 1px solid #e6eaf2;
    border-radius: 14px;
    padding: 25px 20px;
}
.writeManageSeq {
    position: absolute;
    top: 0;
    left: -1px;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    gap: 10px;
    padding: 8px 18px;
    font-size: 16px;
    font-weight: 600;
    color: #0f2a6b;
    background: #fff;
    border: 1px solid #e6eaf2;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    line-height: 1.4;
    letter-spacing: -0.02em;
}
/* 카드 안쪽으로 내려간 오른쪽 세로선 하단 50%만 가림 (왼쪽은 카드 모서리와 맞춤 → 유지) */
.writeManageSeq::after {
    content: '';
    position: absolute;
    right: -1px;
    bottom: 0;
    width: 2px;
    height: 50%;
    background: #fff;
    pointer-events: none;
}
.writeManageSeq--right {
    left: auto;
    right: -1px;
    border-radius: 10px 10px 0 0;
}
.writeManageSeqLabel {
    color: #64748b;
    font-weight: 500;
    font-size: 15px;
}
.writeManageSeqValue {
    font-size: 17px;
    font-variant-numeric: tabular-nums;
    letter-spacing: 0.04em;
    color: #1a399e;
}

/* 접수번호 탭과 같은 줄(카드 상단), 오른쪽: 요청일·재요청일·완료일 */
.writeManageDatesStrip {
    position: absolute;
    top: 0;
    right: -1px;
    transform: translateY(-50%);
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    justify-content: flex-end;
    gap: 8px 18px;
    max-width: calc(100% - 12px);
    padding: 8px 16px;
    background: #fff;
    border: 1px solid #e6eaf2;
    border-bottom: none;
    border-radius: 10px 10px 0 0;
    line-height: 1.35;
    letter-spacing: -0.02em;
    z-index: 2;
    box-sizing: border-box;
}
/* 카드 안쪽으로 내려간 왼쪽 세로선 하단 50%만 가림 (오른쪽은 카드 모서리와 맞춤 → 유지) */
.writeManageDatesStrip::before {
    content: '';
    position: absolute;
    left: -1px;
    bottom: 0;
    width: 2px;
    height: 50%;
    background: #fff;
    pointer-events: none;
}
.writeManageDatePair {
    display: inline-flex;
    align-items: baseline;
    gap: 6px;
    white-space: nowrap;
}
.writeManageDatePair + .writeManageDatePair {
    border-left: 1px solid #e4e9f0;
    padding-left: 18px;
    margin-left: 2px;
}
.writeManageDatePair__l {
    color: #64748b;
    font-weight: 600;
    font-size: 12px;
}
.writeManageDatePair__v {
    font-size: 14px;
    font-weight: 600;
    font-variant-numeric: tabular-nums;
    color: #0f172a;
}

@media screen and (max-width: 640px) {
    .writeManageDatesStrip {
        flex-direction: column;
        align-items: flex-end;
        gap: 4px 10px;
        max-width: min(56%, calc(100% - 120px));
        padding: 6px 12px;
    }
    .writeManageDatePair + .writeManageDatePair {
        border-left: none;
        padding-left: 0;
        margin-left: 0;
    }
    .writeManageDatePair__l {
        font-size: 11px;
    }
    .writeManageDatePair__v {
        font-size: 13px;
    }
}

.writeHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 10px;
    margin-bottom: 15px;
    border-bottom: 1px solid #eef2f6;
}
.writeTitle {
    font-size: 20px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.3px;
    margin-bottom: 6px;
    line-height: 1.4;
}
.writeTitle .libLink {
    display: inline-block;
    margin-left: 8px;
    vertical-align: middle;
    line-height: 0;
}
.writeTitle .libLink img {
    display: block;
    width: 20px;
    height: 20px;
    object-fit: contain;
}
.writeTitle .libLink:hover img {
    opacity: 0.85;
}
.writeDesc {
    font-size: 14px;
    color: #475467;
    line-height: 1.6;
}
.writeMeta {
    flex-shrink: 0;
    align-self: center;
}

/* 기관정보 링크: 요청자정보와 동일한 버튼 스타일 */
.writeMeta span {
    height: auto;
    padding: 0;
    border: none;
    background: transparent;
}
.writeMeta span {
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 25px;
    font-weight: 500;
    color: #1a399e;
    text-decoration: none;
    background: #ffffff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    white-space: nowrap;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

.writeGrid {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 20px 24px;
}
.writeField {
    display: flex;
    flex-direction: column;
}
.writeField--w10 {
    max-width: 10px;
}
.writeRow > .writeField--w10 {
    flex: 0;
    align-self: flex-end; /* 라벨+입력 필드의 입력 하단 기준 */
    height: 44px; /* .writeControl 높이와 동일 */
    display: flex;
    align-items: center; /* 세로 가운데 */
    justify-content: center;
    line-height: 1;
}
.writeField--w150 {
    max-width: 150px;
}
.writeField--w120 {
    max-width: 120px;
}
.writeField--w270 {
    max-width: 270px;
}
.writeField label {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 600;
    color: #1d2939;
    margin-bottom: 10px;
    line-height: 1.5;
}
.writeRequiredDot,
.writeDot {
    width: 6px;
    height: 6px;
    border-radius: 50%;
    background: #e11d48;
    display: inline-block;
    flex-shrink: 0;
    margin: 0 2px;
}
.writeFieldLegend > label .writeDot,
.writeFieldFullLine > label .writeDot {
    width: 5px;
    height: 5px;
}
.writeFieldErrorMessage {
    display: block;
    margin-top: 6px;
    font-size: 13px;
    color: #dc2626;
    line-height: 1.4;
}
.writeFieldError .writeControl,
.writeFieldError .select2-container--default .select2-selection--single {
    border-color: #dc2626;
}
.writeFieldError .writeControl:focus,
.writeFieldError .select2-container--default.select2-container--focus .select2-selection--single,
.writeFieldError .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #dc2626;
}
/* writeWrap 내 Select2 에러 시 빨간 테두리 (기본 스타일보다 우선) */
.writeWrap .writeFieldError .select2-container--default .select2-selection--single {
    border-color: #dc2626 !important;
}
.writeWrap .writeFieldError .select2-container--default.select2-container--focus .select2-selection--single,
.writeWrap .writeFieldError .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #dc2626 !important;
}
.writeWrap .writeFieldError .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #dc2626 transparent transparent transparent;
}
.writeWrap .writeFieldError .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #dc2626 transparent;
}
.writeErrorSummary {
    margin-bottom: 20px;
    padding: 12px 16px;
    background: #fef2f2;
    border: 1px solid #fecaca;
    border-radius: 10px;
}
.writeErrorSummary p {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #b91c1c;
    line-height: 1.5;
}
.writeControl {
    width: 100%;
    height: 44px;
    border-radius: 10px;
    border: 1px solid #94a3b8;
    background: #fff;
    padding: 0 14px;
    font-size: 14px;
    color: #101828;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
    line-height: 1.5;
}
.writeControl::placeholder {
    color: #98a2b3;
    font-size: 14px;
}
.writeControl:focus {
    outline: none;
    border-color: #1a399e;
}
.writeControl[disabled],
.writeControl[readonly] {
    background-color: #f2f4f7;
    cursor: not-allowed;
}
select.writeControl {
    padding-right: 38px;
    background-image: linear-gradient(45deg, transparent 50%, #667085 50%),
        linear-gradient(135deg, #667085 50%, transparent 50%);
    background-position: calc(100% - 20px) 50%, calc(100% - 14px) 50%;
    background-size: 6px 6px, 6px 6px;
    background-repeat: no-repeat;
    -webkit-appearance: none;
    appearance: none;
    cursor: pointer;
}

/* writeForm 내 Select2를 writeControl과 동일하게 */
.writeWrap .select2-container {
    width: 100% !important;
}
.writeFieldLegend > .select2-container {
    width: 100% !important;
}
.writeWrap .select2-container--default .select2-selection--single {
    height: 44px;
    border-radius: 10px;
    border: 1px solid #94a3b8;
    background: #fff;
    box-sizing: border-box;
    transition: border-color 0.15s ease, box-shadow 0.15s ease, background-color 0.15s ease;
}
.writeWrap .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 44px;
    padding-left: 14px;
    padding-right: 38px;
    font-size: 14px;
    color: #101828;
}
.writeWrap .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #98a2b3;
}
.writeWrap .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 44px;
    right: 10px;
    width: 28px;
}
.writeWrap .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #667085 transparent transparent transparent;
    border-width: 6px 5px 0 5px;
    margin-top: -3px;
}
.writeWrap .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    border-color: transparent transparent #667085 transparent;
    border-width: 0 5px 6px 5px;
    margin-top: -3px;
}
.writeWrap .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 44px;
    line-height: 42px;
    margin-right: 38px;
    font-size: 22px;
    color: #98a2b3;
}
.writeWrap .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #dc0038;
}
.writeWrap .select2-container--default.select2-container--focus .select2-selection--single,
.writeWrap .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #1a399e;
}
/* writeWrap 내 Select2 disabled */
.writeWrap .select2-container--default.select2-container--disabled .select2-selection--single {
    background-color: #f2f4f7;
    color: #696c71;
    cursor: not-allowed;
}
.writeWrap .select2-container--default.select2-container--disabled .select2-selection--single .select2-selection__arrow b {
    display: none;
}

.writeWrap .select2-dropdown {
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    overflow: hidden;
}
.writeWrap .select2-search--dropdown {
    padding: 10px;
    border-bottom: 1px solid #eef2f6;
    background: #fff;
}
.writeWrap .select2-search--dropdown .select2-search__field {
    height: 42px;
    padding: 0 14px;
    border: 1px solid #d0d5dd;
    border-radius: 10px;
    font-size: 14px;
    box-sizing: border-box;
}
.writeWrap .select2-search--dropdown .select2-search__field:focus {
    outline: none;
    border-color: #1a399e;
}
.writeWrap .select2-results__option {
    font-size: 14px;
}

/* writeControlWrap--double: Select2 높이 40px, 내부 요소 맞춤 */
.writeWrap .writeControlWrap--double .select2-container--default .select2-selection--single {
    height: 40px !important;
}
.writeWrap .writeControlWrap--double .select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 40px !important;
    padding-left: 14px;
    padding-right: 38px;
}
.writeWrap .writeControlWrap--double .select2-container--default .select2-selection--single .select2-selection__arrow {
    height: 40px !important;
}
.writeWrap .writeControlWrap--double .select2-container--default .select2-selection--single .select2-selection__arrow b {
    margin-top: -2px;
}
.writeWrap .writeControlWrap--double .select2-container--default.select2-container--open .select2-selection--single .select2-selection__arrow b {
    margin-top: -2px;
}
.writeWrap .writeControlWrap--double .select2-container--default .select2-selection--single .select2-selection__clear {
    height: 40px !important;
    line-height: 38px !important;
    margin-right: 38px;
}


textarea.writeControl {
    height: auto;
    padding: 12px 14px;
    resize: vertical;
    line-height: 1.7;
    font-family: inherit;
}
.writeHint {
    margin-top: 8px;
    font-size: 13px;
    color: #475467;
    line-height: 1.6;
}

/* 원인 분석: Jodit 인라인 에디터를 제목(.writeTitle)과 동일한 디자인으로 */
.jodit-container.jodit_inline {
    letter-spacing: -0.3px !important;
    line-height: 1.65 !important;
    min-height: 44px !important;
    padding: 14px !important;
    border-radius: 10px !important;
    border: 1px solid #94a3b8 !important;
    background: #fff !important;
    box-sizing: border-box !important;
    transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
/* 원인 분석 에디터 내부 모든 요소에 line-height 적용 */
.jodit-container.jodit_inline,
.jodit-container.jodit_inline p,
.jodit-container.jodit_inline div,
.jodit-container.jodit_inline span {
    line-height: 1.65 !important;
}

.writeFull {
    grid-column: 1 / -1;
}
.writeRow {
    grid-column: 1 / -1;
    display: flex;
    gap: 0 15px;
}
/* 래퍼: writeRowHighlight 안에 writeRow 여러 개 */
.writeRowHighlight {
    grid-column: 1 / -1;
    padding: 16px;
    border: 1px solid transparent;
    border-radius: 14px;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, #94a3b8 0%, #cbd5e1 50%, #94a3b8 100%) border-box;
    display: flex;
    flex-direction: column;
    gap: 12px;
}
.writeRowHighlight .writeRow {
    grid-column: unset;
}
/* 단일 행 하이라이트 (write.html 등): 같은 요소에 writeRow + writeRowHighlight */
.writeRow.writeRowHighlight {
    padding: 16px;
    border: 2px solid #cbd5e1;
    border-radius: 14px;
    background: #f1f5f9;
}

/* 래퍼: writeRowHighlight2 - 블루 계열 */
.writeRowHighlight2 {
    grid-column: 1 / -1;
    padding: 16px;
    border: 2px solid transparent;
    border-radius: 14px;
    background: linear-gradient(#fff, #fff) padding-box,
                linear-gradient(135deg, #1a399e 0%, #6366f1 25%, #818cf8 50%, #6366f1 75%, #1a399e 100%) border-box;
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.writeRowHighlight2 .writeRow {
    grid-column: unset;
}
/* 단일 행 하이라이트 - 블루 계열 */
.writeRow.writeRowHighlight2 {
    padding: 16px;
    border: 2px solid #304ca7;
    border-radius: 14px;
    background: #eef2ff;
}

.writeRow > * {
    flex: 1 1 0;
    min-width: 0;
}
.writeFieldRow {
    flex-direction: row;
    align-items: center;
    gap: 14px;
}
.writeFieldRow label {
    margin-bottom: 0;
    min-width: 110px;
}
.writeFieldRow .writeControl {
    flex: 1 1 auto;
    width: auto;
}

/* write - 라벨을 테두리에 붙이는(legend) 스타일 */
.writeFieldLegend {
    position: relative;
    padding-top: 8px; /* 라벨이 위로 올라갈 공간 */
}
.writeFieldLegend--center {
    /* 라벨 없는(스위치만 있는) 필드: 세로 가운데 정렬 */
    display: flex;
    align-items: center;
    justify-content: center;
    padding-top: 0;
    min-height: 44px; /* writeControl 높이 기준 */
}
.writeFieldLegend > label {
    position: absolute;
    top: 6px;
    left: 12px;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    z-index: 1;
}
.writeFieldLegend > .writeControl {
    width: 100%;
}
/* 개발담당자 등: 라벨을 select 박스 위에 출력, select 2개 나란히 */
.writeFieldLegend--double {
    position: relative;
    border: 1px solid #94a3b8;
    border-radius: 10px;
    background: #fafbfc;
}
.writeRow:has(.writeFieldLegend--double) > .writeFieldLegend--double {
    align-self: flex-end;
}
.writeFieldLegend--double > label {
    top: -2px;
    left: 12px;
    position: absolute;
    transform: translateY(-50%);
    background: #fff;
    padding: 0 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
    z-index: 1;
}
.writeFieldLegend--double > .writeControlWrap--double {
    width: 100%;
}
/* 도서관 등 input 안쪽 링크+아이콘 래퍼 */
.writeControlWrap {
    position: relative;
    width: 100%;
}
.writeControlWrap--withSwitch {
    /* input 안쪽(오른쪽)에 스위치를 얹기 위한 래퍼 */
    --write-switch-right: 12px;
    --write-switch-width: 110px; /* netliva-switch data-width(100px) + 여백 */
}
.writeControlWrap--withSwitch > .writeControl {
    /* 스위치가 input 내부 오른쪽에 겹치므로, 텍스트가 가려지지 않게 우측 패딩 확보 */
    padding-right: calc(var(--write-switch-width) + var(--write-switch-right) + 8px);
}
.writeControlWrap--withSwitch > .writeControlSwitch {
    position: absolute;
    right: var(--write-switch-right);
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    justify-content: flex-end;
    white-space: nowrap;
    z-index: 2;
}
.writeControlWrap--withLink .writeControl {
    padding-right: 72px;
}
.writeControlWrap--double {
    display: flex;
    gap: 8px;
    align-items: center;
}
.writeControlWrap--double .netliva-switch {
    margin-right: 0;
    flex: 0 0 auto;
}
.writeControlWrap--double .writeControl,
.writeControlWrap--double .select2-container {
    flex: 1 1 0;
    min-width: 0;
}
/* Select2 포함 시: 기관정보 버튼을 화살표 왼쪽에 배치, 화살표 영역 확보 */
.writeControlWrap--withSelect .libDetailLink {
    right: 46px !important;
}
.writeControlWrap--withSelect .select2-container--default .select2-selection--single {
    padding-right: 118px !important;
}
.writeControlWrap .libDetailLink {
    position: absolute;
    right: 10px;
    top: 50%;
    transform: translateY(-50%);
    display: inline-flex;
    align-items: center;
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 500;
    color: #1a399e;
    text-decoration: none;
    background: #eef2ff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    white-space: nowrap;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}
.writeControlWrap .libDetailLink:hover {
    background: #e0e7ff;
    border-color: #a5b4fc;
    color: #0f2a6b;
}
.writeControlWrap .libDetailLink:focus-visible {
    outline: 2px solid #1a399e;
    outline-offset: 2px;
}
.writeFieldLegend > label .writeRequiredDot,
.writeFieldFullLine > label .writeRequiredDot {
    width: 5px;
    height: 5px;
}
/* 요청 내용: 라벨이 한 줄 전체를 차지 */
.writeFieldFullLine > label {
    position: static;
    transform: none;
    display: block;
    width: 100%;
    margin-bottom: 5px;
    padding: 0;
    background: transparent;
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    line-height: 1.2;
}
/* 원인 분석 등: 라벨 행 + 오른쪽 체크박스 */
.writeFieldFullLineLabelRow {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 10px;
}
.writeFieldFullLineLabelRow > label:first-child {
    margin-bottom: 0;
}
.writeFieldFullLineLabelRow .writeCheckLabel {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    font-size: 14px;
    font-weight: 500;
    color: #475467;
    cursor: pointer;
    margin: 0;
}
.writeFieldFullLineLabelRow .writeCheckLabel input[type="checkbox"] {
    accent-color: #1a399e;
    width: 18px;
    height: 18px;
    margin: 0;
    vertical-align: middle;
}
.writeFile {
    display: flex;
    flex-direction: column;
    gap: 8px;
}
/* 첨부파일 섹션: 박스 + 보더 라벨 + 허용형식 + 드롭 영역 */
.writeFileBox {
    position: relative;
    padding: 16px 16px 14px;
    border: 1px solid #dbe1ec;
    border-radius: 14px;
    background: #fff;
}
.writeFileBoxLabel {
    position: absolute;
    top: 0px;
    left: 12px;
    transform: translateY(-50%);
    padding: 0 8px;
    margin: 0;
    font-size: 15px;
    font-weight: 700;
    color: #000000;
    background: #fff;
    line-height: 1.2;
    z-index: 1;
}

/* 유지보수 title ellipsis 표시 20140404 */
/* 퓨쳐 */
.ellipsis1 {
    text-align: left;
    overflow: hidden;
    width: 100%;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.ellipsis2 {
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;
    line-clamp: 2; /* 표준 속성(호환성) */
    overflow: hidden;
    text-overflow: ellipsis;
    word-break: break-word;
}
/* 고객 */
.ellipsis215 {
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    width: 215px;
}

/* 첨부파일 */
input[type='file'].MultiFile-applied {
    font-size: 0;
}
input[type='file'].MultiFile-applied::file-selector-button {
    font-size: 14px;
    padding: 0 11px;
    line-height: 30px;
    background-color: #ededf0;
    color: #6f6f6f;
    border: none;
    border-radius: 15px;
    cursor: pointer;
}
.file_linkwrap .MultiFile-label {
    display: flex;
    margin-top: 5px;
    align-items: center;
    gap: 5px;
}

/* 공지사항 등 multifile 삭제 20140409*/
.file_del {
    display: inline-block;
    background-color: #fff;
    font-size: 13px;
    line-height: 22px;
    padding: 0 5px;
    border-radius: 3px;
    text-align: center;
    border: 1px solid #a5a5a5;
    transition: all 0.1s;
}
.file_del:hover {
    color: #fff;
    background: #30415b;
    text-decoration: none;
}

/* 약관동의 */
.radio {
    vertical-align: middle;
}
* + html body .error {
    position: relative;
    top: 3px;
}
.agree {
    width: 900px;
    margin: auto;
}
.agree .process {
    height: 50px;
    margin: 0 0 20px 0;
    border: 1px solid #d5d5d5;
    background: #f8f8f8;
    overflow: hidden;
}
.agree .process table {
    width: 100%;
    height: 100%;
    border: 0 none;
}
.agree .process table td {
    padding: 0 35px 0 20px;
    background: url(/image/ko/common/processBg.gif) no-repeat 100% 50%;
    border: 0 none;
    font-weight: bold;
    text-align: center;
    white-space: nowrap;
}
.agree .process table td.last {
    padding: 0 20px;
    background: 0;
}
.agree .process table td.on {
    color: #000;
    font-size: 1.6em;
}
.agree .process table th {
    position: absolute;
    width: 1px;
    height: 1px;
    font-size: 0;
    line-height: 0;
    overflow: hidden;
    border: 0px;
    display: none;
    visibility: hidden;
}
.agree .guide {
    margin: 0 0 20px 0;
}
.agree .title {
    background: url(/image/ko/common/joinIcon01.png) no-repeat 0 1px;
    clear: both;
    color: #333;
    font-size: 14px;
    font-weight: bold;
    margin: 30px 0 0 0;
    padding: 0 0 5px 18px;
}
.agree .content {
    background: #f7f7f7;
    border: 1px solid #ccc;
    height: 150px;
    margin: 0 0 5px 0;
    overflow: auto;
    padding: 20px;
}
.agree .agreement {
    margin: 0 0 20px 0;
}
.agree label {
    position: relative;
    width: auto;
    height: auto;
    padding: 0;
    color: #333;
    font-size: 12px;
    line-height: 1.8em;
    overflow: auto;
    visibility: visible;
}
.agree .check {
    line-height: 1em;
}
.agree .checkbox {
    margin-top: 5px;
}
.bgRed {
    background-color: #ffdfdf !important;
}
.bgRed td {
    font-weight: bold;
}
.bgBlue {
    background-color: #e6f3ff !important;
}
.bgBlue td {
    font-weight: bold;
}
.bgOrange {
    background-color: #ffe5b4 !important;
}
.bgOrange td {
    font-weight: bold;
}
.bgGreen {
    background-color: #4bd886;
}
.bgGreen td {
    font-weight: bold;
}

.bg003 td {
    font-weight: bold;
    color: gray;
}
.bg002 td {
    font-weight: bold;
    color: #006eff;
}
.bg001 td {
    font-weight: bold;
    color: #ff000a;
}

.txtBlue {
    color: blue;
    font-size: 11px;
    vertical-align: bottom;
}

/* 레이어팝업 */
#groupPopup {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1000;
}
#individualPopup {
    position: absolute;
    top: 0;
    left: 500px;
    z-index: 1000;
}
.layerPopupW {
    position: absolute;
    top: 20px;
    left: 20px;
    background-color: #b2aea6;
    z-index: 30;
}
.layerPopupW .layerPopup {
    margin: 3px 3px 0;
    background-color: #fff;
}
.layerPopupW .layerPopup h1 {
    padding: 15px 8px 15px 32px;
    background: url(../image/popupTitBg.gif) no-repeat 0 100%;
    border-bottom: 1px solid #dad9d7;
    color: #000;
    font-size: 14px;
    font-weight: 600;
}
.layerPopupW .layerPopup .popupList {
    font-size: 13px;
    margin-bottom: 15px;
    padding: 15px 10px;
    border-bottom: 1px solid #dad9d7;
}
.layerPopupW .layerPopup .popupList li {
    padding: 0 4px;
    font-weight: 600;
}
.layerPopupW .layerPopup .popupList li.selected {
    background-color: #b8946f;
    color: #fff;
}
.layerPopupW .layerPopup .popupList li span {
    vertical-align: middle;
    margin-right: 5px;
}
.layerPopupW .layerPopup .popupList li a {
    vertical-align: middle;
    display: inline-block;
    width: 240px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.layerPopupW .layerPopup .popupList li a:hover {
    text-decoration: none;
}
.layerPopupW .layerPopup .popupList li.selected a {
    color: #fff;
}
.layerPopupW .layerPopup .popContent {
    padding: 0 13px 20px;
    font-size: 13px;
    overflow-y: auto;
}
.layerPopupW .popupClose {
    padding: 7px 8px;
    text-align: right;
    background-color: #b2aea6;
    color: #fff;
}
.layerPopupW .popupClose .close {
    display: inline-block;
    height: 23px;
    margin-left: 15px;
    padding: 0 12px;
    border: 1px solid #696762;
    background-color: #85837d;
    color: #fff;
    line-height: 1.8em;
    vertical-align: middle;
}
.layerPopupW .popupClose .close:hover {
    text-decoration: none;
}

/* 로그인 */
.fricLogin {
    margin: 0 20px;
}
.fricLogin::after {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #e9ecf2;
    z-index: -1;
}
.loginBox {
    display: flex;
    flex-direction: column;
    align-items: center;
    max-width: 530px;
    margin: 150px auto;
    padding: 54px 60px 60px;
    background: #fff;
    border-radius: 30px;
    box-sizing: border-box;
}
.loginBox > p {
    font-size: 30px;
    color: #222222;
    line-height: 1;
    font-family: GmarketSansB, sans-serif;
    margin-bottom: 33px;
}
.loginBox form {
    width: 100%;
}
.loginForm .login {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.loginForm .login ul {
    display: flex;
    flex-direction: column;
    gap: 15px;
}
.loginForm .login input {
    width: 100%;
    height: 56px;
    border: 1px solid #d4d4d4;
    font-size: 15px;
    color: #000;
    border-radius: 10px;
    padding: 0 16px;
    box-sizing: border-box;
}
.loginForm .login input::placeholder {
    color: #000;
    font-size: 15px;
}
.loginForm .login input:focus {
    border: 2px solid #009bfa;
    border-width: 2px;
    outline: none;
}
.loginForm .loginError {
    width: 100%;
    box-sizing: border-box;
    margin: 0;
    padding: 10px 12px;
    background-color: #fee;
    color: #c33;
    border: 1px solid #fcc;
    border-radius: 10px;
    text-align: center;
    font-size: 13px;
    line-height: 1.45;
    letter-spacing: -0.02em;
}
.loginForm .loginBtn {
    display: block;
    width: 100%;
    line-height: 62px;
    background: #1e1847;
    color: #fff;
    text-align: center;
    border-radius: 10px;
    border: none;
    margin-top: 5px;
    font-weight: 600;
    font-size: 16px;
    transition: all 0.2s ease-out;
    cursor: pointer;
}
.loginForm .loginBtn:hover {
    box-shadow: 0 8px 24px rgba(15, 23, 42, 0.12);
}

.loginBox .contact {
    width: 100%;
    font-size: 14px;
    text-align: center;
    line-height: 1.6;
    color: #777777;
    margin-top: 30px;
}
.loginBox .contact .alert {
    color: #e50038;
}
.loginBox .address {
    width: 100%;
    color: #999999;
    font-size: 14px;
    margin-top: 30px;
    padding-top: 33px;
    border-top: 1px solid #d4d4d4;
    text-align: center;
    line-height: 1.6;
}

@media screen and (max-width: 767px) {
    .loginBox {
        margin-top: 80px;
        padding: 35px 15px 30px;
        max-width: 355px;
    }
    .loginBox > p {
        font-size: 25px;
        margin-bottom: 18px;
    }
    .loginForm .login input {
        height: 44px;
        font-size: 14px;
    }
    .loginForm .login input::placeholder {
        font-size: 14px;
    }
    .loginForm .loginBtn {
        line-height: 47px;
        font-size: 14px;
    }
    .loginBox .contact {
        margin-top: 20px;
        line-height: 1.5;
    }
    .loginBox .address {
        margin-top: 15px;
        padding-top: 15px;
        line-height: 1.4;
        font-size: 13px;
    }
}

/* OTP */
.otp > p {
    width: 100%;
    text-align: center;
    border-bottom: 1px dashed #e1e1e1;
    padding-bottom: 38px;
}
.otp h1 {
    font-weight: 600;
    color: #e50038;
    font-size: 18px;
}
.otp .desc {
    margin: 18px 0 40px;
}
.otp .desc p {
    text-align: center;
    font-size: 14px;
    color: #444444;
    line-height: 1.5;
}
.otp .loginForm label {
    display: none;
}
.otp .loginForm .login input {
    text-align: center;
    color: #8e8e8e;
}
.otp .loginForm .login input:focus::placeholder {
    color: transparent;
}
.otp .loginForm .submitBtn {
    background: none;
    color: inherit;
    font: inherit;
    border: none;
}
.otp .address {
    margin-top: 74px;
}

@media screen and (max-width: 767px) {
    .otp > p {
        padding-bottom: 18px;
    }
    .otp .desc {
        margin-bottom: 20px;
    }
    .otp .address {
        margin-top: 15px;
        font-size: 13px;
    }
}

.hide{
    display: none;
}

.ajs-message.ajs-custom {font-size: 1.4em; font-weight: bold; color: #fbfdfe;  background-color: #000000; border-radius: 12px; text-align: center;}
.alertify-notifier.ajs-center.ajs-top .ajs-message.ajs-visible {top: 3rem; padding: 20px 40px;}
.alertify-notifier .ajs-message {width: max-content !important;}

/* Alertify 다이얼로그(.ajs-dialog) 커스텀 디자인 */
.alertify .ajs-dimmer {
    background-color: #0f172a;
    opacity: 0.4;
}
.alertify .ajs-dialog {
    border-radius: 14px;
    border: 1px solid #e2e8f0;
    padding: 0;
    overflow: hidden;
}
.alertify .ajs-header {
    margin: 0;
    padding: 18px 24px;
    background: #f8fafc;
    border-bottom: 1px solid #eef2f6;
    font-size: 17px;
    font-weight: 700;
    color: #111827;
    letter-spacing: -0.02em;
}
.alertify .ajs-body {
    min-height: 52px;
}
.alertify .ajs-body .ajs-content {
    padding: 20px 24px;
    font-size: 15px;
    color: #334155;
    line-height: 1.6;
}
.alertify .ajs-footer {
    margin: 0;
    padding: 14px 24px 20px;
    min-height: auto;
    background: #fff;
    border-top: 1px solid #eef2f6;
    display: flex;
    justify-content: flex-end;
    gap: 10px;
    flex-wrap: wrap;
}
.alertify .ajs-footer .ajs-buttons.ajs-primary,
.alertify .ajs-footer .ajs-buttons.ajs-auxiliary {
    float: none;
    text-align: right;
}
.alertify .ajs-footer .ajs-buttons .ajs-button {
    min-width: 88px;
    min-height: 40px;
    height: 40px;
    padding: 0 18px;
    border-radius: 10px;
    font-size: 15px;
    font-weight: 500;
    border: 1px solid #94a3b8;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease, color 0.2s ease;
    box-sizing: border-box;
}
.alertify .ajs-footer .ajs-buttons.ajs-primary .ajs-button:not(.ajs-cancel),
.alertify .ajs-footer .ajs-buttons.ajs-auxiliary .ajs-button:not(.ajs-cancel) {
    background-color: #1a399e;
    border-color: #1a399e;
    color: #fff;
}
.alertify .ajs-footer .ajs-buttons .ajs-button:not(.ajs-cancel):hover {
    background-color: #0f2a6b;
    border-color: #0f2a6b;
    color: #fff;
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel {
    background-color: #fff;
    color: #475467;
}
.alertify .ajs-footer .ajs-buttons .ajs-button.ajs-cancel:hover {
    background-color: #f1f5f9;
    border-color: #94a3b8;
    color: #334155;
}
.alertify .ajs-commands {
    margin: 12px 0 0 20px;
}
.alertify .ajs-commands button.ajs-close {
    width: 32px;
    height: 32px;
    padding: 0;
    margin: 0;
    border-radius: 8px;
    background-color: transparent;
    opacity: 0.6;
}
.alertify .ajs-commands button.ajs-close:hover {
    background-color: #f1f5f9;
    opacity: 1;
}

/* ui-datepicker 커스텀 스타일 */
#ui-datepicker-div {
    z-index: 101 !important;
    padding: 0 !important;
    border: 1px solid #e2e8f0 !important;
    border-radius: 14px !important;
    background: #fff !important;
    font-size: 14px !important;
    font-family: inherit !important;
    overflow: hidden !important;
    box-sizing: border-box !important;
}
#ui-datepicker-div .ui-datepicker-header {
    position: relative !important;
    padding: 10px 36px 10px 36px !important;
    min-height: 40px !important;
    background: #f8fafc !important;
    border-bottom: 1px solid #eef2f6 !important;
    border-radius: 14px 14px 0 0 !important;
    box-sizing: border-box !important;
}
#ui-datepicker-div .ui-datepicker-title {
    margin: 0 !important;
    padding: 0 !important;
    font-weight: 600 !important;
    color: #111827 !important;
    font-size: 15px !important;
    line-height: 1.4 !important;
    text-align: center !important;
}
#ui-datepicker-div .ui-datepicker-prev,
#ui-datepicker-div .ui-datepicker-next {
    position: absolute !important;
    top: 50% !important;
    margin-top: -14px !important;
    width: 28px !important;
    height: 28px !important;
    padding: 0 !important;
    border: none !important;
    border-radius: 8px !important;
    background: transparent !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
}
#ui-datepicker-div .ui-datepicker-prev {
    left: 6px !important;
}
#ui-datepicker-div .ui-datepicker-next {
    right: 6px !important;
}
#ui-datepicker-div .ui-datepicker-prev:hover,
#ui-datepicker-div .ui-datepicker-next:hover {
    background: #e2e8f0 !important;
}
#ui-datepicker-div .ui-datepicker-prev span,
#ui-datepicker-div .ui-datepicker-next span {
    border-color: #64748b !important;
    margin: 0 !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
#ui-datepicker-div .ui-datepicker-calendar {
    margin: 10px !important;
    border-collapse: separate !important;
    border-spacing: 2px !important;
    width: 93% !important;
    table-layout: fixed !important;
    box-sizing: border-box !important;
}
#ui-datepicker-div .ui-datepicker-calendar th {
    padding: 4px 0 !important;
    font-size: 11px !important;
    font-weight: 600 !important;
    color: #64748b !important;
}
#ui-datepicker-div .ui-datepicker-calendar td {
    padding: 1px !important;
}
#ui-datepicker-div .ui-datepicker-calendar td a,
#ui-datepicker-div .ui-datepicker-calendar td span {
    display: block !important;
    text-align: center !important;
    padding: 5px 2px !important;
    border-radius: 8px !important;
    box-sizing: border-box !important;
    text-decoration: none !important;
    color: #334155 !important;
    font-weight: 500 !important;
    transition: background 0.15s ease, color 0.15s ease !important;
}
#ui-datepicker-div .ui-datepicker-calendar td a:hover {
    background: #eef2ff !important;
    color: #1a399e !important;
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active,
#ui-datepicker-div .ui-datepicker-calendar .ui-state-active:hover {
    background: #1a399e !important;
    color: #fff !important;
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-highlight:not(.ui-state-active) {
    background: #a8b3c8 !important;
    color: #1a399e !important;
}
#ui-datepicker-div .ui-datepicker-calendar .ui-state-disabled span {
    color: #94a3b8 !important;
    opacity: 0.7 !important;
}
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-other-month a,
#ui-datepicker-div .ui-datepicker-calendar .ui-datepicker-other-month span {
    color: #94a3b8 !important;
}
#ui-datepicker-div .ui-datepicker-buttonpane {
    margin: 0 !important;
    padding: 8px 10px 10px !important;
    border-top: 1px solid #eef2f6 !important;
    background: #fff !important;
    border-radius: 0 0 14px 14px !important;
    box-sizing: border-box !important;
}
#ui-datepicker-div .ui-datepicker-buttonpane button {
    padding: 5px 12px !important;
    border-radius: 8px !important;
    font-size: 13px !important;
    font-weight: 500 !important;
    border: 1px solid #94a3b8 !important;
    background: #fff !important;
    color: #475467 !important;
    cursor: pointer !important;
    box-sizing: border-box !important;
    max-width: 100% !important;
}
#ui-datepicker-div .ui-datepicker-buttonpane button:hover {
    background: #f1f5f9 !important;
    border-color: #94a3b8 !important;
}

.select2-results__options {max-height: 400px !important; /* 기본은 200px 정도 */}

.wp100 {width: 100% !important;}
.wp50 {width: 50% !important;}
.wp75 {width: 75% !important;}
.w100 {width: 100px !important;}
.w200 {width: 200px !important;}

/* Flex */
.flex{display: -webkit-box!important; display: -ms-flexbox!important; display: flex!important;}
.flexJS{-webkit-box-pack: start !important;-ms-flex-pack: start !important;justify-content: flex-start !important;}
.flexJC{-webkit-box-pack: center !important;-ms-flex-pack: center !important;justify-content: center !important;}
.flexJB{-webkit-box-pack: justify !important;-ms-flex-pack: justify !important;justify-content: space-between !important;}
.flexJE{-webkit-box-pack: end !important;-ms-flex-pack: end !important;justify-content: flex-end !important;}
.flexAS{-webkit-box-align: start !important; -ms-flex-align: start !important; align-items: flex-start !important;}
.flexAC{-webkit-box-align: center !important; -ms-flex-align: center !important; align-items: center !important;}
.flexAE{-webkit-box-align: end !important; -ms-flex-align: end !important; align-items: flex-end !important;}
.flexW{-webkit-box-lines: multiple !important;-ms-flex-wrap: wrap !important;flex-wrap: wrap !important;}
.flexNW{-webkit-box-lines: single !important;-ms-flex-wrap: nowrap !important;flex-wrap: nowrap !important;}


/* 파일업로더 */
.filebox .fileBtn,
.fileUpload .fileBtn {border: 0; clip: rect(0 0 0 0); height: 1px; margin: -1px; overflow: hidden; padding: 0; position: absolute; width: 1px}
.filebox .fileBtn:focus + label,
.fileUpload .fileBtn:focus + label {outline: 2px solid #1a399e; outline-offset: 2px;}

.fileUpload {display: flex; flex-direction: column; gap: 10px; margin: 0;}

/* 헤더: 첨부 개수 / 업로드 제약 안내 / 파일선택 버튼 */
.fileUpload .fileUploadHead {display: flex; align-items: center; gap: 6px 12px; flex-wrap: wrap; margin: 0;}
.fileUpload .fileCount {display: inline-flex; align-items: baseline; gap: 3px; padding: 3px 10px; border-radius: 999px; background: #eef2ff; color: #1a399e; font-size: 12px; font-weight: 700; line-height: 1.5;}
.fileUpload .fileCountValue {font-size: 13px;}
.fileUpload .fileNotice {display: flex; align-items: center; flex-wrap: wrap; gap: 2px 8px; margin-left: auto; font-size: 12px; color: #64748b; line-height: 1.5;}
.fileUpload .fileNoticeItem + .fileNoticeItem::before {content: ''; display: inline-block; width: 1px; height: 10px; margin-right: 8px; background: #cbd5e1; vertical-align: -1px;}
.fileUpload .bunch > label {display: inline-flex; align-items: center; gap: 4px; min-width: 0; border: 1px solid #1a399e; border-radius: 999px; padding: 5px 14px; box-sizing: border-box; background-color: #fff; color: #1a399e; font-size: 13px; font-weight: 600; line-height: 1.3; text-align: center; cursor: pointer; transition: background-color .15s ease, color .15s ease;}
.fileUpload .bunch > label:hover {background-color: #1a399e; color: #fff;}
.fileUpload .bunch > label .fileName {display: none;}
.fileUpload .fileBtnIcon {flex: 0 0 auto;}

/* 드롭존 */
.fileUpload .dropBox {position: relative; min-height: 76px; border: 1.5px dashed #cbd5e1; border-radius: 14px; background: #fafbfd; overflow: hidden; margin: 0; transition: border-color .15s ease, background .15s ease;}
.fileUpload .dropBox:hover {border-color: #1a399e; background: #f5f7ff;}
.fileUpload .dropBox.active, .fileUpload .dropBox.drag_over {border-color: #1a399e; border-style: dashed; background: #eef2ff;}
.fileUpload .dropBox .dropBoxLabel {position: static; display: flex; align-items: center; justify-content: center; gap: 10px; min-height: 76px; padding: 14px 16px; box-sizing: border-box; cursor: pointer;}
.fileUpload .dropBox .dropBoxIcon {display: inline-flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 36px; height: 36px; border-radius: 50%; background: #eef2ff; color: #1a399e;}
.fileUpload .dropBox .placeholder {position: static; left: auto; top: auto; transform: none; font-size: 13px; color: #64748b; letter-spacing: -0.01em; pointer-events: none;}
.fileUpload .dropBox .placeholder b {color: #1a399e; font-weight: 700;}

/* 파일 목록 */
.fileUpload .fileUploadWrap {display: flex; flex-direction: column; gap: 6px; margin: 0; flex-wrap: nowrap;}
.fileUpload--empty .fileUploadWrap {display: none;}
.fileUpload .fileUploadBox {display: flex; align-items: center; column-gap: 8px; padding: 8px 10px 8px 12px; border: 1px solid #e6eaf2; border-radius: 12px; background: #fff; transition: border-color .15s ease, background .15s ease, box-shadow .15s ease;}
.fileUpload .fileUploadBox:hover {border-color: #c7d2fe; background: #fbfcff; box-shadow: 0 1px 3px rgba(26, 57, 158, .07);}
.fileUpload .fileUploadText {display: flex; align-items: center; column-gap: 10px; min-width: 0; flex: 1 1 auto; padding: 0; position: relative;}

/* 확장자 배지 / 이미지 썸네일 */
.fileUpload .fileThumb {position: relative; display: flex; align-items: center; justify-content: center; flex: 0 0 auto; width: 34px; height: 34px; border-radius: 9px; overflow: hidden; background: #eef2ff; color: #1a399e;}
.fileUpload .fileExt {font-size: 10px; font-weight: 800; letter-spacing: -0.02em; line-height: 1;}
.fileUpload .fileThumb img {display: none;}
.fileUpload .fileThumb img[src] {display: block; position: absolute; left: 0; top: 0; width: 100%; height: 100%; object-fit: cover;}
.fileUpload .fileThumb[data-ext="PDF"] {background: #fef2f2; color: #dc2626;}
.fileUpload .fileThumb[data-ext="DOC"], .fileUpload .fileThumb[data-ext="DOCX"], .fileUpload .fileThumb[data-ext="RTF"] {background: #eff6ff; color: #2563eb;}
.fileUpload .fileThumb[data-ext="XLS"], .fileUpload .fileThumb[data-ext="XLSX"], .fileUpload .fileThumb[data-ext="CSV"] {background: #ecfdf5; color: #059669;}
.fileUpload .fileThumb[data-ext="PPT"], .fileUpload .fileThumb[data-ext="PPTX"] {background: #fff7ed; color: #ea580c;}
.fileUpload .fileThumb[data-ext="ZIP"], .fileUpload .fileThumb[data-ext="7Z"], .fileUpload .fileThumb[data-ext="RAR"], .fileUpload .fileThumb[data-ext="ALZ"], .fileUpload .fileThumb[data-ext="EGG"], .fileUpload .fileThumb[data-ext="TAR"], .fileUpload .fileThumb[data-ext="GZ"] {background: #f5f3ff; color: #7c3aed;}
.fileUpload .fileThumb[data-ext="HWP"], .fileUpload .fileThumb[data-ext="HWPX"] {background: #ecfeff; color: #0891b2;}
.fileUpload .fileThumb[data-ext="TXT"], .fileUpload .fileThumb[data-ext="LOG"], .fileUpload .fileThumb[data-ext="FILE"] {background: #f1f5f9; color: #475569;}
.fileUpload .fileThumb[data-ext="JPG"], .fileUpload .fileThumb[data-ext="JPEG"], .fileUpload .fileThumb[data-ext="PNG"], .fileUpload .fileThumb[data-ext="GIF"], .fileUpload .fileThumb[data-ext="BMP"], .fileUpload .fileThumb[data-ext="WEBP"], .fileUpload .fileThumb[data-ext="SVG"] {background: #fdf2f8; color: #db2777;}

/* 파일명 / 크기 / 진행바 */
.fileUpload .fileInfo {display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1 1 auto;}
.fileUpload .fileName {display: block; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 14px; font-weight: 500; line-height: 1.4; color: #1f2937;}
.fileUpload .fileName a {color: #1f2937; text-decoration: none;}
.fileUpload .fileName a:hover {color: #1a399e; text-decoration: underline;}
/* 새 탭에서 바로 열리는(inline 미리보기) 파일명 링크 힌트 */
.fileUpload .fileName a.fileNameLink--inline::after {content: ""; display: inline-block; width: 10px; height: 10px; margin-left: 4px; vertical-align: baseline; background-color: currentColor; opacity: .6; -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center center; -webkit-mask-size: contain; mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000' stroke-width='2.2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M14 4h6v6'/%3E%3Cpath d='M20 4 11 13'/%3E%3Cpath d='M18 14v4a2 2 0 0 1-2 2H6a2 2 0 0 1-2-2V8a2 2 0 0 1 2-2h4'/%3E%3C/svg%3E") no-repeat center center; mask-size: contain;}
.fileUpload .fileName a.fileNameLink--inline:hover::after {opacity: 1;}
.fileUpload .fileSub {display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: #94a3b8; line-height: 1.5;}
.fileUpload .fileBadge {display: inline-block; padding: 1px 6px; border-radius: 999px; font-size: 10.5px; font-weight: 700; line-height: 1.5;}
.fileUpload .fileBadge--new {background: #fff7ed; color: #c2410c;}
.fileUpload .progressBar {position: static; display: block; width: 100%; min-width: 0; height: 3px; margin-top: 4px; border-radius: 999px; background-color: #e8ecf5; overflow: hidden;}
.fileUpload .progressBar i {position: relative; left: auto; top: auto; display: block; width: 0; height: 100%; border-radius: 999px; background-color: #1a399e; transition: width .3s;}

/* 행 버튼(다운로드/삭제) */
.fileUpload .fileUploadBtn {display: flex; align-items: center; column-gap: 2px; margin: 0; flex: 0 0 auto;}
.fileUpload .fileUploadBtn:empty {display: none;}
.fileUpload .fileUploadBtn > li {list-style: none;}
.fileUpload .fileUploadBtn button, .fileUpload .fileUploadBtn a {display: block; width: 28px; height: 28px; padding: 0; border: none; border-radius: 8px; background-color: transparent; background-repeat: no-repeat; background-position: center; background-size: 15px 15px; text-indent: -9999px; white-space: nowrap; overflow: hidden; cursor: pointer; opacity: .5; transition: opacity .15s ease, background-color .15s ease;}
.fileUpload .fileUploadBox:hover .fileUploadBtn button, .fileUpload .fileUploadBox:hover .fileUploadBtn a {opacity: .8;}
.fileUpload .fileUploadBtn button:hover, .fileUpload .fileUploadBtn a:hover {opacity: 1; background-color: #eef2ff;}
.fileUpload .fileUploadBtn .filecloseicon:hover {background-color: #fef2f2;}
.fileUpload .fileUploadBtn .filedownicon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a399e' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M12 3v12'/%3E%3Cpath d='M7 11l5 5 5-5'/%3E%3Cpath d='M4 20h16'/%3E%3C/svg%3E");}
.fileUpload .fileUploadBtn .filecloseicon {background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23dc2626' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M4 7h16'/%3E%3Cpath d='M9.5 7V4h5v3'/%3E%3Cpath d='M6.5 7l1 13h9l1-13'/%3E%3C/svg%3E");}
.fileUpload .fileUploadBtn .filepencilicon {background-image: url(../image/filepencilicon.png);}
.fileUpload .fileUploadBtn .fileediticon {background-image: url(../image/fileediticon.png);}

/* 읽기 전용(드롭존 없음) 목록 */
.fileUpload--readonly {gap: 8px;}
.fileUpload--readonly .fileUploadHead {justify-content: flex-start;}

.writeSection {
    margin-top: 28px;
}
.writeSectionLabel {
    margin: 0 0 12px;
    font-size: 16px;
    font-weight: 700;
    color: #1a399e;
    letter-spacing: -0.02em;
    line-height: 1.35;
}
.writeSection--file .writeFile {
    display: block;
}

.select2-container .select2-selection--multiple{border-radius: 11px; height: auto!important; min-height: 38px;}
.select2-container .select2-selection--multiple .select2-selection__rendered{line-height: 25px!important;}
.select2-container .select2-selection--multiple .select2-selection__choice{background: #373737; border-radius: 6px; padding: 0 24px 0 10px;}
.select2-container .select2-selection--multiple .select2-selection__choice__remove{right: 4px; border: 0; height: 100%; left: auto;}
.select2-container .select2-selection--multiple .select2-selection__choice__remove:hover{background-color: #373737;}
.select2-container .select2-selection--multiple .select2-selection__choice__remove span{display: inline-block; width: 12px; text-indent: -9999px; background: url(../image/list_delete.png) no-repeat center; background-size: 11px;}
.select2-container .select2-selection--multiple .select2-selection__choice__display{color: #fff; font-size: 14px; font-family: PretendardM, sans-serif;}

.writeField--titleBordered{border: 2px solid #1a399e !important;}

.mr5 {margin-right: 5px;}
.mr10 {margin-right: 10px;}

.ml5 {margin-left: 5px;}
.ml10 {margin-left: 10px;}

.mt5 {margin-top: 5px;}
.mt10 {margin-top: 10px;}
.mb5 {margin-bottom: 5px;}

.pd0 {padding: 0 !important;}

/* 정보(조회) 화면 전용: 카드/헤더/그리드 */
.infoWrap {
    margin-top: 8px;
}

/* 탭 (tabWrapper) - 공통 스타일, 아래 카드와 이어짐 */
.tabWrapper {
    /* 탭이 가로폭을 넘으면 페이지 대신 탭바만 가로 스크롤.
       .tabBtn 의 margin-bottom:-1px(본문과 이어지는 이음새)이 overflow 에 잘리지
       않도록 1px 패딩으로 흘려주고 그만큼 바깥 마진에서 되돌린다(실효 -1px). */
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 1px;
    margin-bottom: -2px;
}
.tabWrapper::-webkit-scrollbar {
    display: none;
}

.tabWrapper .tabList li {
    flex: 0 0 auto;
}

.tabWrapper .tabList {
    display: inline-flex;
    align-items: flex-end;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
}

.tabWrapper .tabList li {
    margin: 0;
    padding: 0;
}

.tabWrapper .tabBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 22px;
    font-size: 14px;
    font-weight: 500;
    color: #64748b;
    background: #f8fafc;
    border: 1px solid #cbd5e1;
    border-bottom: none;
    border-top-left-radius: 10px;
    border-top-right-radius: 10px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    margin-right: 4px;
    margin-bottom: -1px;
    box-sizing: border-box;
}

.tabWrapper .tabBtn:hover {
    color: #334155;
    background: #f1f5f9;
    border-color: #cbd5e1;
}

.tabWrapper .tabBtn.active {
    color: #000084;
    background: #fff;
    border-color: #cbd5e1;
    border-bottom: 1px solid #fff;
    font-weight: 600;
    z-index: 1;
    position: relative;
}

.tabWrapper .tabBtn.active:hover {
    color: #000084;
    background: #fff;
}

/* 탭 메뉴형 (tabWrapper2) - 자료실 등 카테고리 탭 */
.tabWrapper2 {
    /* .tabBtn 의 margin-bottom:-2px 만큼 패딩으로 흘리고 마진에서 되돌림(실효 20px) */
    margin-bottom: 18px;
    padding-bottom: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
}
.tabWrapper2::-webkit-scrollbar {
    display: none;
}
.tabWrapper2 .tabList li {
    flex: 0 0 auto;
}
.tabWrapper2 .tabList {
    display: flex;
    align-items: stretch;
    gap: 0;
    list-style: none;
    margin: 0;
    padding: 0;
    border-bottom: 2px solid #e2e8f0;
}
.tabWrapper2 .tabList li {
    margin: 0;
    padding: 0;
}
.tabWrapper2 .tabBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 14px 28px;
    font-size: 15px;
    font-weight: 500;
    color: #64748b;
    background: transparent;
    border: none;
    border-bottom: 3px solid transparent;
    margin-bottom: -2px;
    text-decoration: none;
    transition: color 0.2s ease, background 0.2s ease, border-color 0.2s ease;
    box-sizing: border-box;
}
.tabWrapper2 .tabBtn:hover {
    background: #f8fafc;
}
.tabWrapper2 .tabBtn.active {
    color: #1a399e;
    border-bottom-color: #1a399e;
    font-weight: 600;
}
.tabWrapper2 .tabBtn.active:hover {
    color: #1a399e;
    background: #fff;
}

input:disabled, input[readonly] {
	cursor: not-allowed;
	pointer-events: none;
	user-select: none;
}

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

/* 상세 요약 정보 — 폭 키우기보다 레이어·구분·액센트로 정리 */
.detailInfoSection {
	--detailInfo-accent: #1c3aa3;
	margin: 0 0 28px 0;
	padding: 0;
	background: #fff;
	border: 1px solid #e2e8f0;
	border-left: 3px solid var(--detailInfo-accent);
	border-radius: 12px;
	overflow: hidden;
}

.detailInfoSectionTitle {
	margin: 0;
	padding: 14px 20px 12px;
	font-size: 15px;
	font-weight: 700;
	color: #0f172a;
	letter-spacing: -0.02em;
	line-height: 1.4;
	border-bottom: 1px solid #e8ecf1;
	background: linear-gradient(105deg, rgba(28, 58, 163, 0.06) 0%, rgba(255, 255, 255, 0) 52%);
}

.detailInfoList {
	margin: 0;
	padding: 14px 16px;
	list-style: none;
	background: #f1f5f9;
}

.detailInfoItem {
	display: flex;
	align-items: flex-start;
	gap: 0 18px;
	padding: 7px 14px;
	margin-bottom: 4px;
	border: 1px solid #e2e8f0;
	border-radius: 8px;
	background: #fff;
	font-size: 14px;
	line-height: 1.58;
	transition: border-color 0.15s ease, box-shadow 0.15s ease;
}

.detailInfoItem:last-child {
	margin-bottom: 0;
}

.detailInfoItem:hover {
	border-color: #cbd5e1;
	box-shadow: 0 2px 8px rgba(15, 23, 42, 0.06);
}

.detailInfoItem dt {
	flex: 0 0 24%;
	max-width: 11rem;
	min-width: 6.75rem;
	margin: 0;
	padding: 1px 14px 0 0;
	font-weight: 600;
	font-size: 13px;
	color: #64748b;
	line-height: 1.5;
	letter-spacing: -0.01em;
	border-right: 1px solid #e8ecf1;
	align-self: stretch;
}

.detailInfoItem dd {
	flex: 1;
	min-width: 0;
	margin: 0;
	padding: 0 0 0 2px;
	color: #334155;
	font-size: 14px;
	font-weight: 400;
	line-height: 1.58;
	letter-spacing: -0.01em;
	word-break: keep-all;
	overflow-wrap: break-word;
}

.detailInfoItem dd strong {
	font-weight: 700;
	color: #1a399e;
	line-height: inherit;
}

.detailInfoItem--withMeta dd {
	display: flex;
	justify-content: space-between;
	align-items: flex-start;
	gap: 16px;
}

.detailInfoItem__time {
	flex: 1;
	min-width: 0;
}

.detailInfoItem__rceptStatus {
	flex-shrink: 0;
	text-align: right;
}

.detailInfoSection .tableCont2 {
	margin-bottom: 0;
	padding: 0;
	background: transparent;
	border: none;
	border-radius: 0;
	box-shadow: none;
}

.detailInfoSection .detailInfoTable {
	width: 100%;
	border: none;
}

.detailInfoSection .detailInfoTable th,
.detailInfoSection .detailInfoTable td {
	padding: 11px 10px 11px 0;
	border: none;
	border-bottom: 1px solid #e8ecf1;
	font-size: 14px;
	line-height: 1.55;
	vertical-align: top;
}

.detailInfoSection .detailInfoTable tr:last-child th,
.detailInfoSection .detailInfoTable tr:last-child td {
	border-bottom: none;
}

.detailInfoSection .detailInfoTable th {
	width: 24%;
	max-width: 11rem;
	color: #64748b;
	font-weight: 600;
	font-size: 13px;
	line-height: 1.5;
}

.detailInfoSection .detailInfoTable td {
	color: #334155;
	font-weight: 400;
	word-break: keep-all;
	overflow-wrap: break-word;
}

@media screen and (max-width: 640px) {
	.detailInfoSectionTitle {
		padding: 12px 16px 10px;
		font-size: 15px;
	}

	.detailInfoList {
		padding: 12px 12px 14px;
	}

	.detailInfoItem {
		flex-direction: column;
		align-items: stretch;
		gap: 8px;
		padding: 12px 12px;
		margin-bottom: 6px;
	}

	.detailInfoItem dt {
		flex: none;
		max-width: none;
		min-width: 0;
		padding: 0 0 8px 0;
		border-right: none;
		border-bottom: 1px solid #e8ecf1;
		font-size: 13px;
	}

	.detailInfoItem dd {
		padding-left: 0;
		font-size: 14px;
	}

	.detailInfoItem--withMeta dd {
		flex-direction: column;
		align-items: flex-start;
	}

	.detailInfoItem__rceptStatus {
		text-align: left;
	}
}

.infoCard {
    position: relative;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 14px;
    padding: 28px 24px;
}

.infoCard + .infoCard {
    margin-top: 14px;
}

.infoCard--radius {
    border-radius: 0 14px 14px 14px !important;
}

.infoHeader {
    display: flex;
    justify-content: space-between;
    align-items: flex-end;
    gap: 16px;
    padding-bottom: 7px;
    margin-bottom: 15px;
    border-bottom: 2px solid #e2e8f0;
}

.infoTitle {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 10px 12px;
    font-size: 22px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.35px;
    line-height: 1.4;
}

/* 공통 분할 레이아웃(목록 + 상세) */
.splitPane {
    display: grid;
    grid-template-columns: 360px minmax(0, 1fr);
    gap: 14px;
    align-items: stretch;
    max-width: 100%;
    overflow-x: hidden;
}

.splitPane__sidebar {
    position: sticky;
    align-self: stretch;
    max-height: calc(100vh - 24px);
    min-height: 0;
    display: flex;
}

.splitPaneListCard {
    padding: 20px 16px;
    height: auto;
    flex: 1 1 auto;
    display: flex;
    flex-direction: column;
    min-height: 0;
}

.splitPaneListCard__head {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10px;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 2px solid #e2e8f0;
    height: 35px;
}

.splitPaneListCard__title {
    font-size: 20px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.2px;
}

.splitPaneListCard__select {
    flex-shrink: 0;
    width: 100%;
    max-width: 100%;
    padding: 6px 28px 6px 10px;
    font-size: 13px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.3;
    background-color: #f8fafc;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 24 24' fill='none' stroke='%23475569' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
}

.splitPaneListCard__select:focus {
    outline: 2px solid #1c3aa3;
    outline-offset: 1px;
}

.splitPaneListCard__head .select2-container {
    width: 100% !important;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single {
    height: 27px;
    padding: 0 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #ffffff;
    display: flex;
    align-items: center;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single:hover,
.splitPaneListCard__head .select2-container--default.select2-container--focus .select2-selection--single,
.splitPaneListCard__head .select2-container--default.select2-container--open .select2-selection--single {
    border-color: #cbd5e1;
    outline: 2px solid #1c3aa3;
    outline-offset: 1px;
    box-shadow: none;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single .select2-selection__rendered {
    padding-left: 0;
    padding-right: 28px;
    line-height: 1.3;
    font-size: 13px;
    font-weight: 400;
    color: #0f172a;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #64748b;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single .select2-selection__arrow {
    width: 20px;
    height: 100%;
    right: 8px;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-left: -4px;
    margin-top: -2px;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single .select2-selection__clear {
    color: #64748b;
    margin-right: 18px;
    font-size: 16px;
    line-height: 1;
}

.splitPaneListCard__head .select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #0f172a;
}

.splitPaneListCard__head .select2-dropdown {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}

.splitPaneListCard__head .select2-search--dropdown {
    padding: 8px;
}

.splitPaneListCard__head .select2-search--dropdown .select2-search__field {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 13px;
}

.splitPaneListCard__head .select2-results__option {
    padding: 7px 10px;
    font-size: 13px;
}

.splitPaneListCard__head .select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #1a399e;
    color: #ffffff;
}

.splitPaneListCard__toolbar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 10px;
}

.splitPaneListCard__search {
    flex: 1 1 auto;
    min-width: 0;
    height: 27px;
    padding: 0 12px;
    font-size: 13px;
    color: #0f172a;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background-color: #ffffff;
}

.splitPaneListCard__search:focus {
    outline: 2px solid #1c3aa3;
    outline-offset: 1px;
}

.splitPaneListCard__writeBtn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    align-self: center;
    padding: 5px 14px;
    font-size: 12px;
    font-weight: 800;
    letter-spacing: -0.02em;
    line-height: 1.2;
    color: #ffffff !important;
    text-decoration: none;
    white-space: nowrap;
    background-color: #1c3aa3;
    border-radius: 8px;
    transition:
        background 0.18s ease,
        border-color 0.18s ease,
        box-shadow 0.18s ease,
        transform 0.06s ease,
        color 0.18s ease;
}

.splitPaneListCard__writeBtn:hover {
    background-color: #2449cc;
}

.splitPaneDetailCard {
    padding: 20px 22px;
    min-height: 820px;
    position: relative;
}

.splitPaneDetailCard .infoHeader {
    align-items: center;
}

.splitPaneDetailCard .infoHeader__right {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 10px;
    flex-shrink: 0;
    margin-left: auto;
}

.splitPaneDetailCard .splitPaneMeta {
    flex-shrink: 0;
    text-align: right;
}

.splitPaneDetailCard .infoHeader__right .infoMeta {
    align-self: flex-end;
}

.splitPaneDetailCard .splitPaneMeta__line {
    margin: 0;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.55;
}

.splitPaneDetailCard .splitPaneMeta__line + .splitPaneMeta__line {
    margin-top: 4px;
}

.splitPaneDetailCard .splitPaneMeta__line span {
    color: #334155;
    font-weight: 600;
}

.splitPane__content {
    min-width: 0;
    overflow-x: hidden;
}

.splitPaneDetailCard .infoHeader__right .btnAdd {
    flex-shrink: 0;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    margin: 0;
    padding: 7px 14px 7px 12px;
    border: 1px solid #c7d2e6;
    border-radius: 9px;
    background: linear-gradient(180deg, #ffffff 0%, #f1f5f9 100%);
    color: #1a399e;
    font-size: 13px;
    font-weight: 700;
    letter-spacing: -0.02em;
    line-height: 1.2;
    cursor: pointer;
    transition: border-color 0.15s ease, background 0.15s ease, color 0.15s ease, box-shadow 0.15s ease, transform 0.1s ease;
}

.splitPaneDetailCard .infoHeader__right .btnAdd::before {
    content: "";
    display: block;
    width: 14px;
    height: 14px;
    flex-shrink: 0;
    background: no-repeat center / contain;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%231a399e' stroke-width='2.25' stroke-linecap='round'%3E%3Cpath d='M12 5v14M5 12h14'/%3E%3C/svg%3E");
    opacity: 0.92;
    transition: opacity 0.15s ease, filter 0.15s ease;
}

.splitPaneDetailCard .infoHeader__right .btnAdd:hover {
    border-color: #1a399e;
    background: #1a399e;
    color: #ffffff;
}

.splitPaneDetailCard .infoHeader__right .btnAdd:hover::before {
    opacity: 1;
    filter: brightness(0) invert(1);
}

.splitPaneDetailCard .infoHeader__right .btnAdd:active {
    transform: translateY(1px);
}

.splitPaneDetailCard .infoHeader__right .btnAdd:focus-visible {
    outline: none;
}

.itemBoard {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0;
    flex: 1;
    min-height: 0;
    overflow: auto;
    border-radius: 12px;
    background: #ffffff;
}

.itemBoard__item {
    border-bottom: 1px solid #e2e8f0;
    background: transparent;
    transition: background 0.15s ease, border-color 0.15s ease, box-shadow 0.15s ease, transform 0.05s ease;
}

.itemBoard__item:last-child {
    border-bottom: none;
}

.itemBoard__item:hover {
    background: #f8fafc;
}

.itemBoard__item.is-active {
    background: linear-gradient(90deg, rgba(26, 57, 158, 0.14) 0%, #eef2ff 12%, #e8edfc 100%);
    border-left: 5px solid #1a399e;
    position: relative;
    z-index: 1;
}

.itemBoard__link {
    display: grid;
    grid-template-columns: minmax(calc(1.75ch + 6px), auto) minmax(0, 1fr);
    grid-template-rows: auto auto;
    column-gap: 8px;
    row-gap: 0;
    align-items: stretch;
    padding: 10px 12px;
    text-decoration: none;
    color: inherit;
}

.itemBoard__num {
    grid-column: 1;
    grid-row: 1 / span 2;
    align-self: stretch;
    box-sizing: border-box;
    width: 100%;
    min-width: calc(1.75ch + 6px);
    margin: 0;
    padding: 2px 6px;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 0.75rem;
    font-weight: 700;
    font-variant-numeric: tabular-nums;
    line-height: 1.25;
    letter-spacing: -0.01em;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #e2e8f0;
    border-radius: 5px;
    user-select: none;
    transition: background 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}

.itemBoard__item:hover .itemBoard__num {
    background: #e8eef4;
}

.itemBoard__item.is-active .itemBoard__num {
    color: #1a399e;
    background: rgba(26, 57, 158, 0.1);
    border-color: rgba(26, 57, 158, 0.22);
}

.itemBoard__title {
    grid-column: 2;
    grid-row: 1;
    font-size: 14px;
    font-weight: 900;
    color: #0f172a;
    letter-spacing: -0.2px;
    line-height: 1.35;
}

.itemBoard__item.is-active .itemBoard__title {
    color: #1a399e;
    font-weight: 900;
}


@media screen and (max-width: 1024px) {
    .splitPane {
        grid-template-columns: 320px minmax(0, 1fr);
    }
}

@media screen and (max-width: 820px) {
    .splitPane {
        grid-template-columns: 1fr;
    }

    .splitPane__sidebar {
        position: static;
    }

    .itemBoard {
        max-height: none;
    }
}

.infoGrid {
    display: grid;
    grid-template-columns: repeat(1, minmax(0, 1fr));
    gap: 0 24px;
    margin-bottom: 20px;
}

.infoGrid__label {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 10px;
    font-size: 18px;
    font-weight: 800;
    color: #0f172a;
    letter-spacing: -0.3px;
    line-height: 1.35;
}

.infoGrid__label::before {
    content: "";
    display: inline-block;
    width: 6px;
    height: 20px;
    border-radius: 3px;
    background: linear-gradient(180deg, #1a399e 0%, #334ca7 100%);
    flex-shrink: 0;
}

.infoBlock {
    grid-column: 1 / -1;
    padding: 4px 20px ;
    border: 1px solid #94a3b8;
    border-radius: 12px;
    background: #f8fafc;
    display: flex;
    flex-direction: column;
    gap: 0;
    margin-top: 5px;
}

.infoRow {
    display: flex;
    gap: 0 30px;
    padding: 7px 0;
    border-bottom: 1px solid #e2e8f0;
}

.infoRow:first-child {
    padding-top: 8px;
}

.infoRow:last-child {
    border-bottom: none;
    padding-bottom: 8px;
}

.infoRow > * {
    flex: 1 1 0;
    min-width: 0;
}

.infoField {
    display: flex;
    flex-direction: row;
    align-items: baseline;
    gap: 0;
    line-height: 23px;
    /* 긴 URL 등이 줄바꿈되지 않아 페이지가 가로로 밀리는 것을 막는다.
       break-word 와 달리 anywhere 는 min-content 계산에도 반영된다. */
    overflow-wrap: anywhere;
}

.infoField--w150 {
    max-width: 200px;
}

.infoField__label {
    flex-shrink: 0;
    min-width: 75px;
    padding-right: 12px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    line-height: 1.6;
    letter-spacing: 0.02em;
}

.infoField__label::after {
    content: ":";
    margin-left: 2px;
    color: #94a3b8;
    font-weight: 500;
}

.infoField__value {
    flex: 1;
    min-width: 0;
    font-size: 15px;
    font-weight: 700;
    color: #0f172a;
    line-height: 1.6;
    word-break: break-word;
    overflow-wrap: anywhere;
    letter-spacing: -0.01em;
}

/* 여러 항목을 네모박스(태그)로 구분해 출력 */
.infoField__value--list {
    display: flex;
    flex-wrap: wrap;
    gap: 8px 6px;
    align-items: center;
}

.infoField__value--list > span {
    display: inline-block;
    padding: 6px 12px;
    font-size: 14px;
    font-weight: 700;
    color: #0f172a;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 6px;
    line-height: 1.4;
}

.infoField__value--list > span:not(:last-child)::after {
    content: none;
}

/* 여러 항목을 | 구분자로만 출력 */
.infoField__value--list2 {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0;
}

.infoField__value--list2 > span:not(:last-child)::after {
    content: " | ";
    margin-left: 0.25em;
    margin-right: 0.25em;
    color: #94a3b8;
    font-weight: 500;
}

/* ========== 기본정보 등록 폼 (write) ========== */
.infoCard--form .infoField__label {
    min-width: 80px;
}

.infoCard--form .infoField--full,
.infoCard--form .infoField--flex1 {
    flex: 1 1 0;
    min-width: 0;
}

.infoCard--form .infoField--full {
    flex: 1 1 100%;
}

.infoInput,
.infoTextarea {
    flex: 1;
    min-width: 0;
    padding: 8px 12px;
    font-size: 14px;
    line-height: 1.5;
    color: #0f172a;
    background: #fff;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    transition: border-color 0.2s ease, box-shadow 0.2s ease;
}

.infoInput:focus,
.infoTextarea:focus {
    outline: none;
    border-color: #1a399e;
}

.infoInput::placeholder,
.infoTextarea::placeholder {
    color: #94a3b8;
}

.infoInput--100 {width: 100px;flex: 0 0 auto;}
.infoInput--150 {width: 150px;flex: 0 0 auto;}
.infoInput--200 {width: 200px;flex: 0 0 auto;}

.select2-container--default .select2-selection--single {
    height: auto;
    min-height: 38px;
    padding: 5px 12px;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    background: #fff;
    display: flex;
    align-items: center;
}
.select2-container--default .select2-selection--single:hover,
.select2-container--default.select2-container--focus .select2-selection--single,
.select2-container--default.select2-container--open .select2-selection--single {
    border-color: #1a399e;
}
.select2-container--default .select2-selection--single .select2-selection__rendered {
    line-height: 1.5;
    padding-left: 0;
    padding-right: 28px;
    font-size: 14px;
    font-weight: 400;
    color: #0f172a;
}

.select2-container--default .select2-selection--single .select2-selection__placeholder {
    color: #94a3b8;
}

.select2-container--default .select2-selection--single .select2-selection__arrow {
    height: auto;
    top: 50%;
    transform: translateY(-50%);
    right: 10px;
    width: 20px;
}
.select2-container--default .select2-selection--single .select2-selection__arrow b {
    border-color: #64748b transparent transparent transparent;
    border-width: 5px 4px 0 4px;
    margin-left: -4px;
}

.select2-container--default .select2-selection--single .select2-selection__clear {
    color: #64748b;
    margin-right: 18px;
    font-size: 16px;
    line-height: 1;
}

.select2-container--default .select2-selection--single .select2-selection__clear:hover {
    color: #0f172a;
}

.select2-dropdown {
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    overflow: hidden;
}

.select2-search--dropdown {
    padding: 8px;
}

.select2-search--dropdown .select2-search__field {
    height: 32px;
    padding: 0 10px;
    border: 1px solid #cbd5e1;
    border-radius: 7px;
    font-size: 13px;
}

.select2-results__option {
    padding: 7px 10px;
    font-size: 14px;
}

.select2-container--default .select2-results__option--highlighted.select2-results__option--selectable {
    background-color: #1a399e;
    color: #ffffff;
}

.addList__btnAdd {
    padding: 6px 14px;
    font-size: 13px;
    font-weight: 600;
    color: #1a399e;
    background: #fff;
    border: 1px solid #c7d2fe;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, border-color 0.2s ease;
}
.addList__btnAdd:hover {
    background: #eef2ff;
    border-color: #1a399e;
}
.addList__row {
    display: flex;
    align-items: center;
    gap: 5px;
    margin-bottom: 5px;
}
.addList__row .addList__name {
    flex: 0 0 200px;
    min-width: 0;
}
.addList__row .addList__url,
.addList__row .addList__etc {
    flex: 1 1 0;
    min-width: 0;
}
.addList__rowActions {
    flex-shrink: 0;
}
.addList__btnDel {
    padding: 6px 12px;
    font-size: 13px;
    font-weight: 600;
    color: #64748b;
    background: #f1f5f9;
    border: 1px solid #cbd5e1;
    border-radius: 8px;
    cursor: pointer;
    transition: background 0.2s ease, color 0.2s ease;
}
.addList__btnDel:hover {
    background: #e2e8f0;
    color: #dc2626;
}

/* 도서관 URL 목록 (이름, URL, 기타) 반복 행 - 디자인 */
.infoField--full {
    flex-direction: column;
    align-items: stretch;
}

.is-resign{
    color: #94a3b8 !important;
}

/* ============================================================
   공통 반응형 보강 (태블릿 1024 / 모바일 767 / 소형 480)
   - 기존 컴포넌트별 미디어쿼리에서 다루지 않는 공통 골격만 처리
   ============================================================ */

/* 모바일에서도 로케이션(home > …)을 제목과 같은 줄 오른쪽 끝에 붙인다.
   (앞의 767 블록이 세로 스택으로 만들어 두 줄을 차지하던 것을 되돌림) */
@media screen and (max-width: 767px) {
    /* 상세 헤더: 제목 옆에 붙던 등록일을 한 줄 내린다 (제목이 길면 눌리므로) */
    .detailWrap .detailHeader {
        flex-direction: column;
        align-items: flex-start;
        gap: 6px;
    }
    .detailWrap .detailHeader .detailTitle {
        font-size: 19px;
    }
    .detailWrap .detailHeader .detailMeta {
        width: 100%;
        text-align: right;
    }
    /* span 의 오른쪽 여백(20px)이 우측 정렬을 밀어내므로 마지막 항목만 해제 */
    .detailWrap .detailHeader .detailMeta span:last-child {
        margin-right: 0;
    }

    #divContents .subTop {
        flex-direction: row;
        align-items: flex-end;
        justify-content: space-between;
        gap: 8px;
    }
    #divContents .subTit {
        flex: 0 1 auto;
        min-width: 0;
        /* 글자 크기 차이(18px vs 13px)로 제목이 3px 위로 떠 보여서 그만큼 내린다.
           (baseline 정렬은 로케이션 첫 항목이 홈 아이콘이라 기준선이 어긋난다) */
        margin-bottom: -3px;
    }
    #divContents .subLocation {
        flex: 0 1 auto;
        min-width: 0;
        justify-content: flex-end;
        flex-wrap: wrap;
        row-gap: 2px;
    }
}

@media screen and (max-width: 1024px) {
    .contentsW {
        padding: 20px 0 60px;
    }

    /* 상세정보 카드 */
    .infoCard {
        padding: 20px 16px;
    }

    /* 작성 폼 */
    .writeCard {
        padding: 20px 16px;
    }
    .writeGrid {
        gap: 16px 16px;
    }

    /* 목록 테이블 (tableCont2) */
    .tableCont2 table {
        font-size: 13px;
    }
    .tableCont2 table thead th {
        padding: 12px 14px;
        font-size: 14px;
    }
    .tableCont2 table td {
        padding: 12px 14px;
    }
}

@media screen and (max-width: 767px) {
    .contentsW {
        padding: 16px 0 50px;
    }

    /* ---- 테이블: 가로 스크롤 컨테이너화 + 밀도 축소 ---- */
    /* tableCont2 는 테이블 외 용도(검색박스/썸네일)로도 쓰이므로 테이블 포함 시에만 적용 */
    .tableCont2:has(> table) {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
    .tableCont2 table thead th {
        padding: 10px;
        font-size: 13px;
        letter-spacing: 0;
    }
    .tableCont2 table td {
        padding: 10px;
    }
    .tableW {
        margin-bottom: 24px;
    }
    .tableStyle01 th,
    .tableStyle01 td,
    .tableStyle03 th,
    .tableStyle03 td,
    .tableStyle04 th,
    .tableStyle04 td {
        font-size: 13px;
        padding: 6px;
    }
    .tableStyle01 thead th,
    .tableStyle01 td {
        height: 44px;
    }

    /* ---- 작성 폼: 입력/셀렉트 높이 축소 (데스크톱 44px → 36px) ----
       select2 는 컨테이너·텍스트 줄높이·화살표 높이를 같이 맞춰야 글자가 안 밀린다 */
    .writeControl {
        height: 36px;
        padding: 0 12px;
    }
    textarea.writeControl {
        height: auto;
    }
    .writeWrap .select2-container--default .select2-selection--single {
        height: 36px;
    }
    .writeWrap .select2-container--default .select2-selection--single .select2-selection__rendered {
        line-height: 36px;
        padding-left: 12px;
        padding-right: 34px;
    }
    .writeWrap .select2-container--default .select2-selection--single .select2-selection__arrow {
        height: 36px;
        right: 8px;
        width: 24px;
    }
    .writeControlWrap--double .writeControl,
    .writeControlWrap--double .select2-container {
        height: auto;
    }

    /* ---- 작성 폼: 1열 스택 ---- */
    .writeCard {
        padding: 16px 12px;
    }
    .writeGrid {
        grid-template-columns: minmax(0, 1fr);
        gap: 14px 0;
    }
    .writeRow {
        flex-direction: column;
        gap: 14px 0;
    }
    .writeControlWrap--double {
        flex-wrap: wrap;
    }

    /* ---- 상세정보: 1열 스택 ---- */
    .infoCard {
        padding: 16px 12px;
    }
    .infoRow {
        flex-direction: column;
        gap: 0;
    }
    .infoField--w150 {
        max-width: none;
    }
    .infoInput--100,
    .infoInput--150,
    .infoInput--200 {
        width: 100%;
        flex: 1 1 auto;
        /* .infoInput 기본에 box-sizing 이 없어 padding 만큼 넘치므로 여기서 보정 */
        box-sizing: border-box;
    }

    /* ---- 탭바: 가로 스크롤은 기본 규칙에 있고 여기서는 밀도만 축소 ---- */
    .tabWrapper .tabBtn,
    .tabWrapper2 .tabBtn {
        padding: 10px 14px;
        white-space: nowrap;
    }

    /* ---- 반복 입력 행(도서관 URL 등): 고정폭 200px + 입력 2개가 nowrap 이라
           좁은 화면에서 부모를 넘친다. 줄바꿈 허용하고 고정폭을 푼다 ---- */
    .addList__row {
        flex-wrap: wrap;
    }
    /* select2 적용 시 원본 select 은 .select2-hidden-accessible 로 숨겨지므로
       건드리면 안 되고, 실제로 보이는 .select2-container 만 늘린다 */
    .addList__row .addList__name:not(.select2-hidden-accessible),
    .addList__row .select2-container {
        flex: 1 1 100%;
        width: 100% !important;
        max-width: none;
    }
    .addList__row .addList__url,
    .addList__row .addList__etc {
        flex: 1 1 140px;
    }
    .addList__rowActions {
        margin-left: auto;
    }

    /* ---- 첨부파일: 안내 영역을 감추고 드롭 영역만 남긴다 ----
       .fileUploadHead 에는 첨부 개수 / 확장자 목록 / 용량·개수 제한 / '파일 선택'
       버튼이 들어 있어 좁은 화면에서 자리를 크게 먹는다.
       '파일 선택' 라벨과 드롭 영역 라벨이 같은 input(for="files")을 가리키므로
       숨겨도 파일 선택 동작에는 영향이 없다. 업로드된 목록(.fileUploadWrap)은 유지. */
    /* 마크업에 유틸 클래스 .flex{display:flex!important} 가 붙어 있어 !important 필요 */
    .fileUpload .fileUploadHead {
        display: none !important;
    }

    /* ---- 하단 버튼 ---- */
    .btnW ul {
        flex-wrap: wrap;
        row-gap: 8px;
    }
}

@media screen and (max-width: 480px) {
    .btnW {
        gap: 8px;
    }
    .btnW ul {
        column-gap: 6px;
    }
    .infoField {
        flex-direction: column;
        align-items: flex-start;
    }
    .infoField__label {
        padding-right: 0;
    }
    .tableCont2 table thead th,
    .tableCont2 table td {
        padding: 8px;
    }
}