.view-option__modify-btn.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    font-family: Pretendard, sans-serif !important;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 21px;
    letter-spacing: -0.2px;
    color: var(--color-text-subtle);

    /*border: 1px solid #CFD1D6;*/
    /*background: #FFFFFF;*/
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}


.view-option__modify-btn.view-btn::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;

    mask-image: url("../../img/svg/ic_cmm_modify_pencil.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_modify_pencil.svg");

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mask-position: center;
    -webkit-mask-position: center;

    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--color-icon);

}


.view-option__del-btn.view-btn {
    display: inline-flex;
    align-items: center;
    gap: 4px;

    font-family: Pretendard, sans-serif;
    font-weight: 500;
    font-size: 0.875rem;
    line-height: 21px;
    letter-spacing: -0.2px;
    /*color: #D85C5C; !* 삭제 버튼은 빨간색 계열 *!*/

    /*border: 1px solid #E0E2E7;*/
    /*background: #FFFFFF;*/
    border-radius: 4px;
    padding: 2px 8px;
    cursor: pointer;
    white-space: nowrap;
}

.view-option__del-btn.view-btn::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;
    margin-right: 4px;

    /* 삭제 아이콘 적용 */
    mask-image: url("../../img/svg/ic_cmm_close.svg"); /* 실제 삭제 아이콘 파일명 */
    -webkit-mask-image: url("../../img/svg/ic_cmm_close.svg");

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;

    mask-position: center;
    -webkit-mask-position: center;

    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--color-icon);

}


.cmm_help_txt {
    font-family: Pretendard, sans-serif;
    font-weight: 400; /* Regular */
    font-style: normal;
    font-size: 13px;
    line-height: 160%; /* 1.6 */
    letter-spacing: -0.2px;
    vertical-align: middle;
}

.search_form-area {
    display: flex;
    align-items: center;
    gap: 8px;
    width: 332px;
    height: 47px;
    padding-right: 6px;
    padding-left: 6px;
    transform: rotate(0deg);
    opacity: 1;
    font-family: Pretendard, sans-serif;
}

.search_form-area > input {
    height: auto;
    padding: 8px 16px;
    background-color: var(--color-input-surface);
    outline: 1px solid var(--color-input-border);
    border-radius: 6px;
    color: var(--color-input-text);
    font-size: 0.875rem;
    line-height: 150%;
    border: none;
    letter-spacing: -0.2px;
}

.search_form-area > input::placeholder {
    color: var(--color-input-text-placeholder)
}

.add-recipient-group-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 4px;
    width: 69px;         /* 버튼 폭 고정 */
    padding: 6px 12px;
    border: 1px solid var(--color-border);
    border-radius: 4px;
    background: var(--color-bg-default);
    color: var(--color-text);
    font-family: Pretendard, sans-serif;
    font-size: 14px;
    font-weight: 500;
    line-height: 150%;
    text-decoration: none;
    cursor: pointer;
    white-space: nowrap; /* ✅ 줄바꿈 방지 */
}

.add-recipient-group-btn::before {
    content: '';
    display: inline-block;
    width: 12px;
    height: 12px;

    /* 아이콘(mask) */
    mask-image: url("../../img/svg/ic_cmm_plus.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_plus.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;

    /* 아이콘 색상 */
    background-color: var(--color-icon-primary); /* 필요시 변경 */
}

/* 옵션: hover/active 포커스 */
.add-recipient-group-btn:hover {
    border-color: var(--color-button-border-secondary);
}
.add-recipient-group-btn:active {
    transform: translateY(0);
}
.add-recipient-group-btn:focus-visible {
    //outline: 2px solid #5C74D8;
    //outline-offset: 2px;
}


.input_modify_list input[type="text"] {
    font-family: Pretendard, sans-serif;
    font-weight: 400;          /* Regular */
    font-style: normal;
    font-size: 14px;
    line-height: 140%;         /* 1.4 */
    letter-spacing: -0.2px;
    color: var(--color-text);               /* 필요 시 색상 지정 */
    /* 높이와 패딩은 디자인에 맞춰 추가 */
    height: 28px;              /* 예: 피그마 input 높이에 맞춤 */
    padding: 2px 6px;
    box-sizing: border-box;
}
/* 리스트 아이템: 아이콘(::before) + 텍스트(a) + 액션(.absolute_right) */
.view-option__right-rcpnt-relative {
    display: flex;
    align-items: center;
    gap: 8px;

    /* width: 364px;  필요 시 유지 */
    min-height: 42px;
    padding: 8px 16px;
    border-radius: 4px;
    box-sizing: border-box;

    flex-wrap: nowrap;
}

/* 아이콘: 20x20 고정 + 중앙 */
.view-option__right-rcpnt-relative::before {
    content: '';
    flex: 0 0 20px;               /* ✅ 폭 고정 */
    width: 20px;
    height: 20px;
    align-self: center;           /* ✅ 안전하게 중앙 */

    mask-image: url("../../img/svg/ic_cmm_person-line.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_person-line.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: var(--color-icon);
}

/* 이름 텍스트: 2줄까지 */
.view-option__right-rcpnt-relative > a {
    flex: 1 1 auto;
    min-width: 0;                 /* ✅ flex 수축 허용 */
    display: -webkit-box;
    -webkit-box-orient: vertical;
    -webkit-line-clamp: 2;        /* 2줄 */
    overflow: hidden;
    white-space: normal;

    line-height: 18px;
    max-height: 40px;             /* 2줄 × 20px */
    text-decoration: none;
    color: inherit;

    text-overflow: ellipsis;

}

/* 오른쪽 버튼은 flex로 오른쪽 끝 */
.view-option__right-rcpnt-relative .absolute_right {
    margin-left: auto;            /* ✅ 오른쪽으로 밀기 */
    display: inline-flex;
    align-items: center;
    gap: 8px;
    white-space: nowrap;
}

.move_list_container.type5.other ul li {
    padding: 0px 5px 0 9px;
}

:root {
    --nav-btn-size: 32px;
    --nav-icon-size: 12px;
    --nav-icon-color: var(--color-icon);
}

.btn_top_first,
.btn_top,
.btn_bot,
.btn_bot_last {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: var(--nav-btn-size) !important;
    height: var(--nav-btn-size) !important;
    text-decoration: none;
    background: none !important; /* 기존 배경이미지 제거 */
}

.btn_top_first::before,
.btn_top::before,
.btn_bot::before,
.btn_bot_last::before {
    content: '';
    display: inline-block;
    width: var(--nav-icon-size);
    height: var(--nav-icon-size);

    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;

    background-color: var(--nav-icon-color);
}

/* 개별 아이콘 경로 연결 */
.btn_top_first::before {
    mask-image: url("../../img/svg/ic_cmm_triangle_top-line.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_triangle_top-line.svg");
}
.btn_top::before {
    mask-image: url("../../img/svg/ic_cmm_triangle_top.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_triangle_top.svg");
}
.btn_bot::before {
    mask-image: url("../../img/svg/ic_cmm_triangle_down.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_triangle_down.svg");
}
.btn_bot_last::before {
    mask-image: url("../../img/svg/ic_cmm_triangle_down-line.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_triangle_down-line.svg");
}

/* 기본 탭 */
#repRecipientGroupLayer_reportRecipientUserArea .subtab {
    display: flex;
    height: auto;
}

#repRecipientGroupLayer_reportRecipientUserArea .subtab li {
    padding: 12px 8px;
}

#repRecipientGroupLayer_reportRecipientUserArea .subtab li a {
    all: unset;
    color: var(--color-text-subtle);
    font-weight: 600;
    border: none;
    background-color: var(--color-bg-default);
}

#repRecipientGroupLayer_reportRecipientUserArea .subtab li.tab_active {
    position: relative;
}

#repRecipientGroupLayer_reportRecipientUserArea .subtab li.tab_active::after {
    content: '';
    position: absolute;
    bottom: 0;
    right: 0;
    width: 100%;
    border-bottom: 2px solid var(--color-border-primary);
}

/* 활성 탭 */
#repRecipientGroupLayer_reportRecipientUserArea .subtab li.tab_active a {
    color: var(--color-text-primary);
    background-color: var(--color-bg-default);
}

.rep-post-btn {
    display: inline-block;
    flex-shrink: 0;
    min-width: 80px;
    padding: 9px 0;
    width : 80px;
    border: none;
    border-radius: 8px;
    font-family: Pretendard, sans-serif;
    font-weight: 600;
    font-size: 1rem;
    line-height: 16px;
    letter-spacing: 0;
    text-align: center;
}

.rep-post-btn.save {
    border: 1px solid var(--color-button-border-primary-outline);
    color: var(--color-text-inverse);
    background-color: var(--color-button-bg-primary-fill);
}

.rep-post-btn.cancel,
.rep-post-btn.close
{
    border: 1px solid var(--color-button-border-secondary);
    color: var(--color-text);
    background-color: var(--color-button-bg-secondary-fill);
}

.rep-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 49px;
    padding: 4px 0;
    border-radius: 4px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--color-border);
    opacity: 1;
    background-color: var(--color-bg-default);
    font-family: Pretendard, sans-serif;
    font-size: 0.875rem;
    font-weight: 500;
    text-align: center;
    cursor: pointer;
}

.rep-add-btn.bold {
    font-weight: 700;
}



.input_modify_list li.active a.btn_cancel, .input_modify_list li.active a.btn_save {
    display: inline-block;
    margin: 0 12px 0 0px;
}

.input_modify_list li a.btn_save {
    display: none;
    width: 19px;
    height: 20px;
    background-image: url("../../img/btn.png");
    background-repeat: no-repeat;
    background-position: 3px -4146px;
    border-width: 0;
    text-indent: -9999px;
}


.input_modify_list li a.btn_cancel {
    display: none;
    width: 12px;    /* 원하는 크기 */
    height: 24px;   /* 원하는 크기 */

    /* SVG 마스크 적용 */
    mask-image: url("../../img/svg/ic_cmm_close.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_close.svg");
    mask-repeat: no-repeat;
    -webkit-mask-repeat: no-repeat;
    mask-position: center;
    -webkit-mask-position: center;
    mask-size: contain;
    -webkit-mask-size: contain;
    background-color: var(--color-icon);
    border: none;
    text-indent: -9999px; /* 텍스트 숨기기 */
    cursor: pointer;
}


[id^="repRecipientGroupLayer_rcpRcvGrpIdx_"] {
    height: 42px;
}


[id^="repRecipientGroupLayer_rcpRcvGrpIdx_"] input[type="text"] {
    display: inline-block;
    width: 100%;
    max-width: 180px; /* 너비 조정 가능 */
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;

    /* optional: 스타일 정리 */
    height: 30px;
    border: none;
    background: transparent;
    font-size: 14px;
    padding: 0 6px;
}
.input_modify_list li.selected {
    background-color: var(--color-bg-primary-subtler);
}

.move_list li.selected {
    background-color: var(--color-bg-primary-subtler);
}

.move_list_container.type5 .move_list li a {
    display: block;                /* ✅ inline 요소가 block처럼 동작 */
    overflow: hidden;              /* ✅ 넘친 부분 숨김 */
    text-overflow: ellipsis;      /* ✅ ... 표시 */
    white-space: nowrap;          /* ✅ 줄바꿈 없음 */
    min-width: 0;                  /* ✅ flex item일 경우 필요 */

    /* 기존 유지 */
    position: relative;
    padding: 6px 0 6px 10px;
    line-height: 20px;
}

.ui-dialog .ui-widget-content {
    /*all: unset; !* 전사 CSS 전부 제거 *!*/


    padding: 0;
    margin: 0;
    border-style: none;
    border-width: 0;
}

.ui-dialog .ui-dialog-titlebar {
    all: unset; /* ← 전사 CSS 완전 제거 */
    height: 33px ;
    padding: 8px 0 0 16px ;
    margin: 0 ;
    background-color: var(--color-bg-default) ;
    color: black;
    font-size: 0.815rem ;
    font-weight: 500 ;
    border-style: solid ;
    border-color: var(--color-border-inverse) ;
    border-width: 1px 1px 0 1px
}

.ui-dialog .ui-dialog-title {
    all: unset;

/*    margin: 13px;*/
/*    font-size: 0.875rem;*/
/*    font-weight: 600;*/
/*    line-height: 1.4;*/
/*}*/
    font-family: 'Pretendard', sans-serif;
    font-weight: 600;                /* SemiBold 대응 */
    font-style: normal;              /* Figma 기준 SemiBold는 실제로는 font-weight 600 */
    font-size: 16px;
    line-height: 140%;               /* 또는 line-height: 1.4; */
    letter-spacing: 0;
    padding : 10px;
    margin: 16px 12px 12px;
}
.ui-dialog .ui-dialog-titlebar-close {
    position: absolute;
    top: 4%;
    right: 8px;                /* 👉 오른쪽 여백 (조정 가능) */
    transform: translateY(-50%);
    margin: 0;
    padding: 0;
    width: 20px;
    height: 20px;
    background: none;
    border: none;
    cursor: pointer;
}
.ui-dialog .ui-dialog-titlebar-close::before {
    content: '';
    display: block;
    width: 17px;
    height: 16px;
    mask-image: url("../../img/svg/ic_cmm_close.svg");
    -webkit-mask-image: url("../../img/svg/ic_cmm_close.svg");
    mask-repeat: no-repeat;
    mask-position: center;
    mask-size: contain;
    background-color: var(--color-icon); /* ✅ 검은색 */
    transform: scale(0.8); /* 80% 축소 */
    transform-origin: center;
}
.ui-dialog .ui-widget-header .ui-icon {
    all: unset;   /* 전사 CSS 전부 제거 */

    display: block;
    width: 13px;
    height: 13px;
}