/* sub common */
/* ============================================================
조직/로그 공통 레이아웃 — 라이트 테마 기반
============================================================ */
.scroll-box{ overflow-y:auto; }
.flex-ctn{ width:100%; min-height:100%; display:flex; }
.org-list{ width:11rem; max-width:180px; flex:0 0 11rem; min-height:100%; background:var(--c-surface-alt); border-right:1px solid var(--c-border-medium); }
.member-list{ min-width:0; }
.org-list > ul{ position:static; top:0; }
.org-list > ul > li{ color:var(--c-text); cursor:pointer; }
.org-list ul li span:not(.icon){ display:flex; align-items:center; width:100%; padding:0 1rem; font-variation-settings:'wght' var(--fw-medium); font-size:.8125rem; color:var(--c-text-sub); border-bottom:1px solid rgba(0,0,0,.05); height:3rem; transition:background .1s, color .1s; overflow:hidden; white-space:nowrap; }
.org-list ul li span .icon{ display:inline-block; vertical-align:top; width:1.125rem; height:1.0625rem; background:url(../images/icon-org-list-arrow.svg) 50% 50% no-repeat; margin-left:4px; filter:brightness(0) opacity(.3); }
/* depth collapse — CSS Grid 애니메이션 (JS class toggle 방식) */
.org-list .depth2-wrap,
.org-list .depth3-wrap {
display: grid;
grid-template-rows: 0fr;
grid-template-columns: minmax(0, 1fr); /* grid 아이템이 컨테이너 폭을 넘지 않게(가로 잘림 방지) */
overflow: hidden;
transition: grid-template-rows var(--t-slow) ease;
}
.org-list .depth2-wrap.open,
.org-list .depth3-wrap.open {
grid-template-rows: 1fr;
}
.org-list .depth2-wrap > ul,
.org-list .depth3-wrap > ul {
min-height: 0;
min-width: 0; /* grid 아이템 기본 min-width:auto → 0으로. 레벨2 라벨이 줄고 카운트가 보이도록 */
}
/* depth 스타일 (기존 유지) */
.org-list .depth2,
.org-list .depth3 { background:var(--c-surface-alt); }
.org-list ul li .depth2 li > span{ height:2.25rem; padding:0 .875rem 0 1.875rem; font-variation-settings:'wght' var(--fw-regular); font-size:.8125rem; }
.org-list ul li .depth3 li > span{ height:2.125rem; padding:0 .875rem 0 2.75rem; font-variation-settings:'wght' var(--fw-regular); font-size:.75rem; }
.member-list{ width:calc(100% - 11rem); min-height:100%; }
.member-list table{ width:100%; }
.member-list table thead{ position:sticky; top:0; z-index:10; }
.member-list table tr th{ position:relative; height:2.625rem; vertical-align:middle; font-variation-settings:'wght' var(--fw-bold); font-size:.6875rem; color:var(--c-text-secondary); background:var(--c-bg); text-align:left; border-bottom:1px solid var(--c-border-medium); padding:0 1.25rem; letter-spacing:.02em; }
.member-list table tr td{ position:relative; height:3.25rem; vertical-align:middle; font-variation-settings:'wght' var(--fw-regular); font-size:.875rem; color:#333; text-align:left; border-bottom:1px solid #f0f0f0; padding:0 1.25rem; }
.member-list table tr td::after,
.member-list table tr th::after{ display:none; }
/* ── 테이블 행 hover 트랜지션 ── */
.member-list table tbody tr{ transition:background var(--t-base); }
.member-list table tbody tr:hover td{ background:var(--c-primary-bg); }
/* img 미리보기 */
.img-area{ display:none; position:absolute; top:0; left:0; width:100%; height:100%; overflow:hidden; }
.img-area img{ width:100%; max-width:100%; height:100%; object-fit:contain; }
/* img 미리보기 on */
.img-box.on .img-area{ display:block; }
.img-box.on .file > span > *{ opacity:0; }
/* chevron 회전 애니메이션 */
.org-list ul li span .icon {
transition: transform var(--t-slow) ease;
}
.org-list ul li.tree-open > span .icon {
transform: rotate(90deg);
}
/* hover & on */
.org-list ul li span:not(.icon):hover.on,
.org-list ul li span:not(.icon).on{ background:var(--c-primary-light); color:var(--c-primary); box-shadow:inset 3px 0 0 var(--c-primary); font-variation-settings:'wght' var(--fw-semibold); }
.org-list ul li span:not(.icon):hover{ background:#f0f1f3; color:var(--c-primary); }
/* [Fix-5] 전역 input{} 제거 → .input-list .box input 으로 범위 제한 (form-field 오염 방지) */
.input-list .box input::placeholder {color: #D9D9D9;}
.input-list .box input{width: 100%; height: 1.875rem; border:none; border-bottom: 1px solid #c1c1c1; outline:none; padding: 0 0.3125rem; font-variation-settings: 'wght' var(--fw-medium); font-size: 1rem; color: #222;}
/* input focus */
.input-list .box h4{font-variation-settings: 'wght' var(--fw-medium); font-size: 1rem; color: #666;}
.input-list .box.on h4{color: #000 !important;}
.input-list .box.on input{border-bottom-color: #000;}
/* file */
.file.icon span{position: absolute; bottom: 0.3125rem; right: 0.3125rem; width: 3.125rem; height: 3.125rem; background: #424242 url(../images/icon-camera.svg) 50% 50% no-repeat; background-size: 1.25rem; border:0.3125rem solid #fff; border-radius:50%; cursor: pointer;}
/* ============================================================
상태 배지 — 시맨틱 컬러 pill
============================================================ */
/* 상태 표시 = 점(dot) + 시맨틱 텍스트 — 모니터링 서비스 관례(Better Stack·Checkly).
배경 pill은 이미지를 덮는 오버레이(tile-status-badge)에만 유지 */
.status-badge,
.badge {
display: inline-flex; align-items: center; gap: .4rem;
padding: 0; border: none; background: transparent; border-radius: 0;
font-size: .75rem; font-variation-settings: 'wght' var(--fw-semibold);
white-space: nowrap; line-height: 1.4;
color: var(--c-text-secondary);
}
.status-badge::before,
.badge::before {
content: ''; width: 7px; height: 7px; border-radius: 50%;
background: currentColor; flex-shrink: 0;
}
.status-badge.status-ok, .status-badge[data-status="정상"], .status-badge[data-status="active"],
.badge.status-ok, .badge.active { color: var(--c-success); }
.status-badge.status-error, .status-badge[data-status="오류"], .status-badge[data-status="error"],
.badge.status-error, .badge.error { color: var(--c-danger); }
.status-badge.status-warning, .status-badge[data-status="경고"], .status-badge[data-status="warning"],
.badge.status-warning, .badge.warning { color: #a16207; }
.perm-badge {
display: inline-flex; align-items: center;
padding: .2rem .625rem; border-radius: var(--r-pill);
font-size: .6875rem; font-variation-settings: 'wght' var(--fw-semibold);
white-space: nowrap; line-height: 1.4;
background: var(--c-primary-light); color: var(--c-primary); border: 1px solid rgba(234,92,42,.18);
}
/* 프로젝트 목록 공통 */
.common-plist .item{display:flex; align-items: center; justify-content: space-between; padding: 1.25rem 0; border-bottom: 1px solid #E6E6E6; transition: box-shadow var(--t-base), transform var(--t-base);}
.common-plist .item:hover{ background: var(--c-surface-hover); }
.common-plist .item .left{display:flex; align-items: center; position: relative;}
.common-plist .item .left a{position: absolute; top: 0; left: 0; width: 100%; height: 100%;}
.common-plist .item .left figure{display:flex; align-items: center; justify-content: center; width: 50px; height: 50px; border-radius: 0.875rem; border:1px solid var(--c-border); padding: 10px; position:relative;}
.common-plist .item .left figure img{max-width: 100%; height: 100%;}
/* 상태 표시 점 — figure 우상단 */
.common-plist .item .left figure .status-dot {
position: absolute;
top: -3px;
right: -3px;
width: 8px;
height: 8px;
border-radius: 50%;
border: 1.5px solid var(--c-bg);
flex-shrink: 0;
}
.common-plist .item .left figure .status-dot.ok { background: #16a34a; }
.common-plist .item .left figure .status-dot.error { background: #ef4444; }
.common-plist .item .left figure .status-dot.warning{ background: #a16207; }
.common-plist .item .left .project-info{margin-left: 1.25rem;}
.common-plist .item .left .project-info .pTit{display:flex; align-items: center;}
.common-plist .item .left .project-info .pTit h2{font-variation-settings: 'wght' var(--fw-semibold); font-size: 1.375rem; color: var(--c-text);}
.common-plist .item .left .project-info .pTit p{margin-left: 0.625rem; font-variation-settings: 'wght' var(--fw-medium); font-size: 0.8125rem; letter-spacing: 0.05em; color: #666;}
.common-plist .item .left .project-info .update{display:flex; gap:0.5rem; margin-top: 0.3125rem;}
.common-plist .item .left .project-info .update::before{content:"......"; font-variation-settings: 'wght' var(--fw-medium); font-size: 0.75rem; color: #cbcbcb;}
.common-plist .item .left .project-info .update ul{display:flex; align-items: center; gap: 0 0.5rem;}
.common-plist .item .left .project-info .update ul li{font-size: 0.75rem; color: #b7b7b7;}
.common-plist .item .left .project-info .update ul li:nth-of-type(2){font-variation-settings: 'wght' var(--fw-bold);}
.common-plist .item .left .project-info .update ul li:nth-of-type(5){font-variation-settings: 'wght' var(--fw-bold);}
.common-plist .item .left .project-info .update ul li:nth-of-type(8){font-variation-settings: 'wght' var(--fw-bold);}
.common-plist .item .left .project-info .update ul li:nth-of-type(11){font-variation-settings: 'wght' var(--fw-bold);}
.common-plist .item .left .project-info .update ul li:nth-of-type(14){font-variation-settings: 'wght' var(--fw-bold);}
/* 도메인/SSL 만료 긴급도 색상 */
.expiry-urgent { color: #ef4444; font-variation-settings: 'wght' var(--fw-semibold); }
.expiry-warning { color: #a16207; font-variation-settings: 'wght' var(--fw-semibold); }
.expiry-ok { color: var(--c-success); }
.expiry-muted { color: var(--c-text-muted); }
/* 프로젝트 등록 */
.project .content .form-box{display: flex; align-items: flex-start; gap:2.5rem; padding-top: 1.25rem;}
/* TODO width: 20rem; 값 변경 */
.project .content .form-box .img-ctn{width: 20rem;}
.project .content .form-box .img-ctn p{text-align: right; margin-top: 0.3125rem; font-variation-settings: 'wght' var(--fw-medium); font-size: 0.9375rem; color: #9CA4AD;}
.project .content .form-box .img-ctn .img-box{position: relative;}
/* TODO 73, 74, 75 추가*/
.project .content .form-box .img-ctn .img-box.on .img-area{display: flex;}
/* TODO 20241112 align-items: center; 제거 */
.project .content .form-box .img-ctn .img-box .img-area{justify-content: center;}
.project .content .form-box .img-ctn .img-box .img-area img{height: auto; width: auto;}
.project .content .form-box .img-ctn .img-box .file{position: relative; z-index: 1; text-align: center;}
/* TODO padding: 1.8125rem 0;으로 변경 */
.project .content .form-box .img-ctn .img-box .file > span{display: flex; align-items: center; justify-content: center; flex-direction: column; cursor: pointer; padding: 1.8125rem 0;}
.project .content .form-box .img-ctn .img-box .file > span img{width: 20vw; max-width: 6.25rem;}
.project .content .form-box .img-ctn .img-box .file > span span{display: inline-block; font-variation-settings: 'wght' var(--fw-bold); font-size: 1.125rem; color: var(--c-text); margin-top: 0.625rem;}
.project .content .form-box .img-ctn .img-box .file input[type="file"]{display: none;}
.project .content .form-box .input-list{width: calc(100% - 26.5rem); display:flex; align-items: center; flex-wrap:wrap; gap:1.875rem; margin-top: 0.375rem;}
.project .content .form-box .input-list .box{width: 100%;}
.project .content .form-box .input-list .box.w1{width: calc(28% - 0.9375rem);}
.project .content .form-box .input-list .box.w2{width: calc(53% - 1.875rem);}
.project .content .form-box .input-list .box.w3{width: calc(19% - 0.9375rem);}
.project .content .form-box .input-list .box.w4{width: calc(44% - 1.875rem);}
.project .bot-ctn{display:flex; gap:0; margin-top:1.75rem;}
/* [Fix-1] .bot-ctn 직계 자식 scroll-box 규칙 제거 — 실제 직계 자식 scroll-box 없음 */
.project .bot-ctn .member{width:22rem; flex-shrink:0; display:flex; flex-direction:column; padding:1.25rem; box-sizing:border-box; border-right:1px solid var(--c-border-subtle);}
/* ── 2. 담당자 섹션 .top — lk-card-header 스타일과 통일 ── */
.project .bot-ctn .member > .top{
display:flex; align-items:center; justify-content:space-between;
margin-bottom:.875rem;
padding-bottom:.875rem;
border-bottom:1px solid var(--c-border-subtle);
}
.project .bot-ctn .member > .top h3{font-size:.9375rem; font-variation-settings:'wght' var(--fw-bold); color:var(--c-text);}
.project .bot-ctn .member ul{width:100%; padding:0 .25rem;}
.project .bot-ctn .member ul li{display:flex; gap:0 .75rem; align-items:center; margin-bottom:.5rem; justify-content:space-between;}
/* ── 3. 담당자 .border — 세련된 칩 스타일 ── */
.project .bot-ctn .member ul li .border{
display:flex; align-items:center; width:calc(100% - 2.5rem);
border:1px solid #eaedf2; border-radius: var(--r-lg); overflow:hidden;
background:#f8f9fb;
}
/* 부서·이름·직급 span 공통 */
.project .bot-ctn .member ul li .border span{
flex:1;
font-variation-settings:'wght' var(--fw-medium);
font-size:.8125rem;
text-align:center;
line-height:2.375rem;
color:#3d3d3d;
border-right:1px solid #eaedf2;
transition:background var(--t-fast);
}
/* 부서(첫 번째 span) — 약간 강조 */
.project .bot-ctn .member ul li .border span:first-of-type{
color:#555;
font-variation-settings:'wght' var(--fw-semibold);
}
/* 직급(마지막 span) — 포인트 컬러 배지 느낌 */
.project .bot-ctn .member ul li .border span:last-of-type{
border-right:none;
max-width:5rem;
font-size:.75rem;
font-variation-settings:'wght' var(--fw-semibold);
color:var(--c-primary);
background:var(--c-primary-shadow);
}
.project .bot-ctn .member ul li .member-delete{width:1.75rem; height:1.75rem; cursor:pointer; border:none; background:url(../images/icon-name-delete.svg) 50% 50% / 1rem no-repeat; border-radius: var(--r-sm); transition:var(--t-base); flex-shrink:0;}
.project .bot-ctn .member ul li .member-delete:hover{background-color:var(--c-danger-bg);}
.project .bot-ctn .member ul li.member-empty{
display:flex; align-items:center; justify-content:center;
min-height:6rem; padding:1.5rem .875rem;
color:var(--c-text-muted); font-size:.8125rem; text-align:center; line-height:1.6;
}
/* ── 5. 담당자 목록 scroll-box 높이 제한 — flex stretch로 calc 고정값 대체 [Fix-2] ── */
.project .bot-ctn .member .scroll-box{
flex:1;
height:0;
min-height:180px;
overflow-y:auto;
width:100%;
padding-right:.25rem;
}
.project .bot-ctn .org-ctn{flex:1; min-width:0; display:flex; flex-direction:column;}
/* [Fix-2] org-list > ul 고정 calc 높이 제거 — 부모 flex stretch로 대체 */
.project .bot-ctn .org-ctn .org-list > ul{overflow-y:auto; overflow-x:hidden;}
.project .bot-ctn .org-ctn .org-list{ overflow-x:hidden; }
.project .bot-ctn .org-ctn .scroll-box{padding-left:0; min-width:0;}
/* org-ctn 내 search-box: common.css 고정폭(24rem) 해제 */
.org-ctn .search-box form{ width:auto; }
.org-ctn .search-box label{ flex:1; min-width:0; height:2.375rem; }
.org-ctn .search-box input[type="text"]{ height:100%; max-width:none; }
/* ── org-ctn 내 org-list / member-list: 전역(11rem) 오버라이드 ── */
/* 프로젝트 등록·수정·상세에서 org-list-card 클래스가 없으므로 별도 지정 */
.project .bot-ctn .org-ctn .top{
border-bottom:1px solid var(--c-border-subtle);
padding-bottom:.875rem; margin-bottom:0;
/* 전역 .top의 border-bottom:2px solid 오버라이드 */
}
.project .bot-ctn .org-ctn .flex-ctn{ height:100%; }
.project .bot-ctn .org-ctn .org-list{
width:14rem; max-width:14rem; flex-shrink:0;
height:100%; overflow-y:auto; overflow-x:hidden;
}
.project .bot-ctn .org-assign-ctn .member-list{ flex:1; width:auto; min-width:0; height:100%; overflow-y:auto; }
/* 프로젝트 목록 */
.project-list .list{height:calc(100dvh - 13.5rem); overflow-y:auto; padding-right:1rem;}
.project-list .list::-webkit-scrollbar-track{margin:0.625rem 0;}
.project-list .list .item .right ul{display:flex; align-items:center; gap:0 1.25rem;}
.project-list .list .item .right ul li a{display:inline-block; vertical-align:top; font-variation-settings:'wght' var(--fw-medium); font-size:1rem; color:#666; padding:.625rem 0 .625rem 1.25rem; background:url(../images/icon-list-more.svg) -3px 10px no-repeat; transition:0.3s;}
.project-list .list .item .right ul li a:hover{font-variation-settings:'wght' var(--fw-semibold); color:#333;}
/* 프로젝트 목록 — 필터 셀렉트 & 검색 */
.plist-select{
height:2.25rem; padding:0 1.75rem 0 .75rem;
border:1.5px solid var(--c-border); border-radius: var(--r-md);
background:url('../images/icon-select-arrow.svg') calc(100% - .5rem) 50% / auto no-repeat #fff;
font-size:.8125rem; color:var(--c-text); cursor:pointer; outline:none;
appearance:none; -webkit-appearance:none; font-variation-settings:'wght' var(--fw-medium);
transition:border-color var(--t-base);
}
.plist-select:focus{ border-color:var(--c-primary); }
.plist-search-form{ display:flex; align-items:center; gap:.375rem; margin-left:.25rem; }
.plist-search-input{ position:relative; display:flex; align-items:center; }
.plist-search-input input[type="text"]{
width:13rem; height:2.25rem; padding:0 2.25rem 0 .75rem;
border:1.5px solid var(--c-border); border-radius: var(--r-md);
font-size:.8125rem; color:var(--c-text); outline:none; transition:border-color var(--t-base);
border-bottom:1.5px solid var(--c-border); background:var(--c-bg);
}
.plist-search-input input[type="text"]:focus{ border-color:var(--c-primary); }
.plist-search-input input[type="text"]::placeholder{ color:var(--c-text-muted); }
.plist-search-input #searchButton{
position:absolute; right:.375rem; width:1.5rem; height:1.5rem;
border:none; background:url('../images/icon-search.svg') 50% 50% / 14px 14px no-repeat transparent;
cursor:pointer; font-size:0; padding:0; border-radius:4px;
}
/* 조직관리 — 슬라이드오버 패널 전환 후 정리 */
.group .box{display: flex; justify-content: space-between; align-items: center; padding-bottom: 0.625rem;}
.group .tit .flex-box{gap: 0 0.9375rem;}
.group .tit .flex-box .common-btn button{padding: 0 1.25rem;}
/* gap:0 — 단일 자식(org-list-card)이므로 gap 불필요, 구형 scroll-box width 규칙 제거 */
.group .group-content{display:flex; gap:0; width:100%; margin-top:1rem; align-items:flex-start;}
/* 조직관리 모달 */
.modal-group .content{height: auto; max-height: none;}
.modal-group .img-box{position: relative; width: 12.5rem; height: 12.5rem; border-radius:50%; margin: 0 auto;}
.modal-group .img-box .img-area{display: block; width: 100%; height: 100%; border-radius:50%; background: #D9D9D9; overflow: hidden;}
.modal-group .img-box .img-area img{width: 100%; height: 116%; object-fit: cover;}
.modal-group .img-box .file input{display: none;}
/* 인원 등록 모달 폼 — form-grid + panel-actions 패턴 (구 table-box 레이아웃 대체) */
.modal-group .form-grid{margin-top: 1.875rem;}
.modal-group .panel-actions{display:flex; gap:0 0.625rem; justify-content:center; align-items:center; margin-top:1.5rem;}
/* 프로젝트 그룹 관리 (팔레트: 번트오렌지 #ea5c2a / 딥블랙 #1e1e1e / 오프화이트 #fcfaff) */
/* 카드 상단 설명 바 — 인라인 스타일 대체 */
.group-desc-bar{padding:.875rem 1.25rem; border-bottom:1px solid var(--c-border-subtle); font-size:.8125rem; color:var(--c-text-secondary);}
.group-mng .top-bar{display:flex; justify-content:space-between; align-items:center; margin-bottom:1.25rem;}
.group-mng .top-bar p{color:var(--c-text); font-size:0.9375rem;}
.group-mng .add-btn{height:2.5rem; padding:0 1.5rem; border:none; border-radius:0.375rem; background:var(--c-primary); color:#fcfaff; font-size:0.9375rem; font-variation-settings:'wght' var(--fw-semibold); cursor:pointer; transition:0.2s;}
.group-mng .add-btn:hover{background:var(--c-primary-dark);}
.group-table{width:100%; border-collapse:collapse; background:var(--c-bg); border-radius:12px; overflow:hidden; border:1px solid var(--c-border);}
/* 라이트 테마 기반 — 어두운 #1e1e1e 헤더에서 밝은 배경으로 전환 */
.group-table th{font-variation-settings:'wght' var(--fw-semibold); font-size:0.8125rem; color:var(--c-text); background:var(--c-surface-alt); height:2.75rem; vertical-align:middle; text-align:left; padding:0 1rem; letter-spacing:.02em; border-bottom:1px solid var(--c-border);}
.group-table td{height:3rem; border-bottom:1px solid var(--c-border-subtle); padding:0 1rem; vertical-align:middle; color:var(--c-text); font-size:0.9375rem;}
.group-table tbody tr{ transition:background var(--t-base); }
.group-table tbody tr:last-child td{border-bottom:none;}
.group-table tbody tr:hover td{background:var(--c-primary-bg);}
.group-table td.center, .group-table th.center{text-align:center;}
.group-table .row-btn{height:1.875rem; padding:0 0.875rem; margin:0 0.125rem; border-radius: var(--r-sm); border:1.5px solid var(--c-border); background:var(--c-bg); color:var(--c-text); font-size:0.8125rem; font-variation-settings:'wght' var(--fw-semibold); cursor:pointer; transition:var(--t-base);}
.group-table .row-btn:hover{border-color:var(--c-primary); color:var(--c-primary);}
.group-table .row-btn.del:hover{border-color:var(--c-danger); color:var(--c-danger);}
.group-table .empty{text-align:center; color:var(--c-text-muted); padding:3rem 1rem; font-size:0.875rem;}
/* projectGroups: 카드가 뷰포트 하단(푸터 위)까지 채우도록 */
/* [Fix-7] inner 기본 padding-bottom이 min-height 계산에 포함되지 않아 footer 겹침 발생 → padding-bottom:0 으로 제거 */
.inner.group-mng{
min-height:calc(100dvh - var(--topbar-h) - var(--footer-h));
display:flex; flex-direction:column;
padding-bottom:0;
}
.inner.group-mng .page-header{ flex-shrink:0; }
.inner.group-mng .lk-card{ flex:1; min-height:0; margin-bottom:0; }
.group-table td:first-child{ font-variation-settings:'wght' var(--fw-medium); }
/* 그룹 모달 팔레트 오버라이드 */
.modal-group .content h3{color:var(--c-text);}
/* ===== 로그인 ===== */
.login {
width: 100%; height: 100vh;
display: flex;
background: var(--c-bg);
}
/* 좌측 브랜드 패널 */
.login .login-brand {
flex: 1;
background: var(--c-dark);
display: flex;
flex-direction: column;
justify-content: space-between;
padding: 3rem;
position: relative;
overflow: hidden;
}
/* 배경 장식 — CSS 원형 */
.login .login-brand::before {
content: '';
position: absolute;
top: -120px; right: -120px;
width: 480px; height: 480px;
border-radius: 50%;
background: radial-gradient(circle, rgba(234,92,42,.35) 0%, transparent 70%);
pointer-events: none;
}
.login .login-brand::after {
content: '';
position: absolute;
bottom: -80px; left: -80px;
width: 320px; height: 320px;
border-radius: 50%;
background: radial-gradient(circle, rgba(234,92,42,.2) 0%, transparent 70%);
pointer-events: none;
}
.login .login-brand .brand-top img {
height: 28px;
filter: brightness(0) invert(1);
opacity: .85;
}
.login .login-brand .brand-center {
position: relative; z-index: 1;
}
.login .login-brand .brand-center h1 {
font-size: 3rem;
font-variation-settings: 'wght' var(--fw-extrabold);
color: var(--c-bg);
letter-spacing: -0.03em;
line-height: 1.1;
margin-bottom: 1rem;
}
.login .login-brand .brand-center h1 em {
color: var(--c-primary);
font-style: normal;
}
.login .login-brand .brand-center p {
font-size: 1rem;
color: rgba(255,255,255,.55);
line-height: 1.6;
max-width: 22rem;
}
.login .login-brand .brand-bottom {
font-size: 0.8125rem;
color: rgba(255,255,255,.3);
}
/* 우측 폼 패널 */
.login .login-box {
width: 480px;
flex-shrink: 0;
display: flex;
align-items: center;
justify-content: center;
padding: 3rem;
background: var(--c-bg);
}
.login .login-box .inner-box {
width: 100%;
max-width: 22rem;
}
.login .login-box .inner-box .login-tit {
margin-bottom: 2.5rem;
}
.login .login-box .inner-box .login-tit h2 {
font-size: 1.75rem;
font-variation-settings: 'wght' var(--fw-extrabold);
color: var(--c-text);
letter-spacing: -0.03em;
margin-bottom: 0.375rem;
}
.login .login-box .inner-box .login-tit p {
font-size: 0.9375rem;
color: var(--c-text-secondary);
}
.login .login-box .inner-box .input .field {
margin-bottom: 0.875rem;
}
.login .login-box .inner-box .input .field label {
display: block;
font-size: 0.75rem;
font-variation-settings: 'wght' var(--fw-semibold);
color: #3d3d3d;
margin-bottom: 0.375rem;
letter-spacing: .03em;
}
.login .login-box .inner-box .input .field input {
width: 100%;
border: 1.5px solid var(--c-border);
border-radius: var(--r-lg);
height: 3rem;
padding: 0 1rem;
font-size: 0.9375rem;
color: var(--c-text);
outline: none;
transition: border-color var(--t-base), box-shadow var(--t-base);
background: var(--c-bg);
}
.login .login-box .inner-box .input .field input::placeholder { color: var(--c-text-muted); }
.login .login-box .inner-box .input .field input:focus {
border-color: var(--c-primary);
box-shadow: 0 0 0 3px var(--c-primary-ring);
}
/* 검증 에러 상태 — 디자인 토큰에 맞춘 빨간 보더 + 안내문 */
.login .login-box .inner-box .input .field input.is-error {
border-color: #ef4444;
}
.login .login-box .inner-box .input .field input.is-error:focus {
box-shadow: 0 0 0 3px rgba(239,68,68,.15);
}
.login .login-box .inner-box .input .field .error-message {
margin-top: 0.375rem;
font-size: 0.75rem;
font-variation-settings: 'wght' var(--fw-medium);
color: #ef4444;
letter-spacing: .02em;
}
.login .login-box .inner-box .input .field .error-message:empty { display: none; }
.login .login-box .inner-box .login-submit {
margin-top: 1.5rem;
}
.login .login-box .inner-box .login-submit button {
width: 100%;
height: 3rem;
background: var(--c-primary);
color: var(--c-bg);
border: none;
border-radius: var(--r-lg);
font-size: 1rem;
font-variation-settings: 'wght' var(--fw-bold);
cursor: pointer;
transition: background var(--t-base);
letter-spacing: .01em;
}
.login .login-box .inner-box .login-submit button:hover { background: var(--c-primary-dark); }
/* 반응형 */
@media (max-width: 960px) {
.login .login-brand { display: none; }
.login .login-box { width: 100%; }
}
@media (max-width: 480px) {
.login .login-box { padding: 2rem 1.25rem; }
}
/* 마이페이지 */
.mypage .content .data-ctn .form-box{display:flex; gap:0 3.75rem; align-items: center; padding: 0.625rem 0 1.875rem;}
.mypage .content .data-ctn .form-box .img-box{position: relative; width: 12.5rem; height: 12.5rem; border-radius:50%;}
.mypage .content .data-ctn .form-box .img-box .img-area{display: block; width: 100%; height: 100%; border-radius:50%; background: #D9D9D9; overflow: hidden;}
.mypage .content .data-ctn .form-box .img-box .img-area img{width: 100%; height: 116%; object-fit: cover;}
.mypage .content .data-ctn .form-box .img-box .file input{display: none;}
.mypage .content .data-ctn .form-box .input-list{display: flex; gap:30px; flex-wrap:wrap; width: calc(100% - 16.25rem);}
.mypage .content .data-ctn .form-box .input-list .box{width: 14%;}
.mypage .content .data-ctn .form-box .input-list .box.w1{width: calc((100% - 90px) / 4);}
.mypage .content .p-list .list{overflow-y: auto; height: calc(100dvh - 649px); padding-right: 1rem; overflow-x: hidden;}
/* .mypage .content .data-ctn .form-box .input-list .box.w2{width: calc(23% - 2.8125rem);} */
/* .mypage .content .data-ctn .form-box .input-list .box.w3{width: 40%;} */
.mypage .content .info-list{margin-bottom: 20px;}
.mypage .content .info-list .select-list{display:flex; align-items: center; gap:20px}
.mypage .content .p-list .list .list-tit.item{display:flex; align-items: center; justify-content: space-between; padding: 0.625rem !important; border-bottom: 2px solid var(--c-border-medium); cursor: default;}
.mypage .content .p-list .list .list-tit .right{display:flex; gap:0 1.575rem; text-align: right;}
.mypage .content .p-list .list .list-tit .right h4{font-size: 17px; font-variation-settings:'wght' var(--fw-medium)}
.mypage .content .p-list .list .list-tit .right .tooltip{transform: translateY(2px);}
.mypage .content .p-list .list .item{cursor: pointer; padding: 1rem 0.625rem;}
.mypage .content .p-list .list .item.on{background: #fbe9e1; border-left: 5px solid var(--c-primary);}
.mypage .content .p-list .list .item .hidden-input{display: none;}
.mypage .content .p-list .list .item:first-of-type{padding-top: 1.25rem;}
.mypage .content .p-list .list .item .input-list{display:flex; gap:0 1.875rem; align-items: center;}
.mypage .content .p-list .list .item .input-list .box{max-width: 9.375rem;}
.mypage .content .p-list .list .item .input-list .box input{text-align: right;}
.mypage .content .p-list .list .item .input-list .close{ width: 1.875rem; height: 1.875rem; cursor: pointer; cursor: pointer; border:none; background: url("../images/icon-name-delete.svg"); transition: 0.3s;}
.mypage .content .p-list .list .item .input-list .close:hover{filter: brightness(0) saturate(100%) invert(15%) sepia(19%) saturate(1134%) hue-rotate(170deg) brightness(94%) contrast(94%);}
/* 마이페이지 선택 추가 */
/* 마이페이지 모달 */
.modal-style-input{}
.modal-style-input .content{height: auto; max-height: none;}
.modal-style-input .info{width: 100%; max-height: calc(100dvh - 33.625rem); padding-right: 0.25rem; overflow-y: auto;}
.modal-style-input .info table{width: 100%; border-top: 1px solid #ddd; border-left: 1px solid #ddd;}
.modal-style-input .info table tr th{width: 20%; height: 3rem; padding: 0 0.875rem; vertical-align: middle; background: var(--c-dark); color: var(--c-bg); font-variation-settings: 'wght' var(--fw-semibold); font-size: 0.9375rem; text-align: left; border-bottom: 1px solid #2a2a2a; border-right: 1px solid #2a2a2a;}
.modal-style-input .info table tr td{width: 80%; height: 3rem; padding: 0 0.875rem; border-bottom: 1px solid #ddd; border-right: 1px solid #ddd; vertical-align: middle; font-variation-settings: 'wght' var(--fw-medium); text-align: right;}
.modal-style-input .info table tr td input{border:1px solid #ccc; height: 2.125rem;}
.modal-style-input .common-btn{margin-top: 1.25rem;}
.modal-style-input .common-btn button{margin-right: 0;}
.modal-style-input .common-check-box p{font-size: 17px; font-variation-settings:'wght' var(--fw-semibold); margin-right: 4px;}
.modal-style-input .common-check-box span{margin-top: -1px; background: var(--c-bg);}
.modalProjectAll .info table tr th{width: 35%;}
/* 프로젝트 상세 */
.pro-detail .bot-ctn .member ul li .border{width:100%;}
.pro-detail .org-list{width: 12.5rem;}
.pro-detail .member-list{width: calc(100% - 13.75rem);}
/* ── 1. 로그 뷰어 member-list 배경 개선 (card-row 느낌) ── */
.pro-detail .log-ctn .member-list{
background:var(--c-surface);
padding:.5rem .625rem;
}
.pro-detail .log-ctn .member-list table{ border-collapse:separate; border-spacing:0 .25rem; }
.pro-detail .log-ctn .member-list table thead tr th{
background:var(--c-surface);
border-bottom:none;
height:1.75rem;
padding:.25rem 1rem;
font-size:.625rem;
letter-spacing:.07em;
color:var(--c-text-muted);
position:sticky; top:0; z-index:1;
}
.pro-detail .log-ctn .member-list table tbody tr td{
background:var(--c-bg);
border-top:1.5px solid #f0f0f0;
border-bottom:1.5px solid #f0f0f0;
border-left:none; border-right:none;
padding:.75rem 1rem;
transition:background var(--t-fast), box-shadow var(--t-fast);
}
.pro-detail .log-ctn .member-list table tbody tr td:first-child{
border-left:1.5px solid #f0f0f0;
border-radius: var(--r-lg) 0 0 var(--r-lg);
}
.pro-detail .log-ctn .member-list table tbody tr td:last-child{
border-right:1.5px solid #f0f0f0;
border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.pro-detail .log-ctn .member-list table tbody tr:hover td{
background:var(--c-primary-bg);
box-shadow:var(--shadow-hover);
}
/* ── 4. 로그 상세 모달 현대화 ── */
/* .modal-log{opacity: 1; visibility: visible;} */
.modal-log .content{ padding:0; }
.modal-log h3{
padding:1.25rem 1.5rem;
font-size:1rem;
font-variation-settings:'wght' var(--fw-bold);
color:var(--c-text);
border-bottom:1px solid #f0f0f0;
margin:0;
}
.modal-log .info{
max-height:calc(100dvh - 18rem);
overflow-y:auto;
padding:1.25rem 1.5rem;
display:flex;
flex-direction:column;
gap:1rem;
}
.modal-log .info .box{ margin-bottom:0; }
.modal-log .info .box:last-of-type{ margin-bottom:0; }
/* 섹션 제목 — lk-card-section-title 참조 */
.modal-log .info .box h4{
font-variation-settings:'wght' var(--fw-bold);
font-size:.6875rem;
color:#a0a0a0;
letter-spacing:.07em;
text-transform:uppercase;
margin-bottom:.5rem;
}
/* 내용 영역 — 코드 블록 느낌 */
.modal-log .info .box p{
margin-top:0;
min-height:4rem;
max-height:12rem;
overflow-y:auto;
overflow-x:hidden;
background:#f8f9fb;
border:1.5px solid #eaedf2;
border-radius: var(--r-md);
padding:.75rem 1rem;
font-size:.8125rem;
color:#3d3d3d;
font-variation-settings:'wght' 450;
line-height:1.7;
white-space:pre-wrap;
word-break:break-all;
}
/* ============================================================
시스템 설정 — drag-wrap 아이템 인풋 form-field 스타일 통일
============================================================ */
/* drag-ctn(조직 그룹·직급) 내 input — 기본 border-bottom 단독 스타일을 form-field 스타일로 덮어씀 */
.setting .drag-ctn .drag-wrap .item input[type="text"],
.setting .drag-ctn .drag-wrap .item input:not([type]) {
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 0.5rem 0.625rem;
font-size: 0.875rem;
color: var(--c-text);
background: var(--c-bg);
transition: border-color var(--t-base);
height: auto;
max-width: 80px;
text-align: center;
}
.setting .drag-ctn .drag-wrap .item input[type="text"]:focus,
.setting .drag-ctn .drag-wrap .item input:not([type]):focus {
border-color: var(--c-primary);
}
/* ============================================================
시스템 설정 — API 박스 select form-field 스타일 통일
============================================================ */
/* 구식 .setting .api .box .select-box select 를 form-field select 스타일로 덮어씀 */
.setting .api .box .select-box select {
border: 1.5px solid var(--c-border);
border-radius: var(--r-md);
padding: 0.5625rem 2rem 0.5625rem 0.875rem;
font-size: 0.875rem;
font-variation-settings: 'wght' 450;
color: var(--c-text);
background-color: var(--c-bg);
background-image: url('../images/icon-select-arrow.svg');
background-repeat: no-repeat;
background-position: calc(100% - .625rem) 50%;
background-size: auto;
appearance: none;
-webkit-appearance: none;
outline: none;
cursor: pointer;
height: auto;
width: 100%;
transition: border-color var(--t-base);
}
.setting .api .box .select-box select:focus {
border-color: var(--c-primary);
color: var(--c-text);
}
/* ============================================================
시스템 설정 — 조직 단위 설정 레이아웃
============================================================ */
.setting .unit .flex-box .info-unit-wrap{
flex:1; min-width:0;
border:1px solid var(--c-border); border-radius:var(--r-card);
background:var(--c-bg); overflow:hidden;
}
.setting .unit .flex-box .info-unit-wrap .org-tit{
display:flex; align-items:center; gap:.375rem;
padding:.625rem 1rem; border-bottom:1px solid var(--c-border-subtle);
background:var(--c-surface-alt); list-style:none;
font-size:var(--fs-md); color:var(--c-text-secondary);
}
.setting .unit .flex-box .info-unit-wrap .org-tit li+li::before{
content:"›"; margin-right:.375rem; color:var(--c-text-disabled);
}
.setting .unit .flex-box .info-unit-wrap .org-tit li:last-child{
font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text);
}
.setting .unit .flex-box .info-unit-wrap .info{ padding:1rem; background:var(--c-bg); }
.setting .unit .flex-box .info-unit-wrap .info .item{ margin-bottom:1rem; }
.setting .unit .flex-box .info-unit-wrap .info .item h4{
font-size:var(--fs-md); font-variation-settings:'wght' var(--fw-semibold);
color:var(--c-text); margin-bottom:.5rem;
}
.setting .unit .flex-box .info-unit-wrap .info .item h4 span{ color:var(--c-primary); }
.setting .unit .flex-box .info-unit-wrap .info .input-box{ display:flex; gap:.5rem; align-items:center; }
.setting .unit .flex-box .info-unit-wrap .info .input-box input{
flex:1; height:2.25rem; border:1.5px solid var(--c-border); border-radius:var(--r-md);
padding:0 .75rem; font-size:var(--fs-lg); color:var(--c-text); background:var(--c-bg);
transition:border-color var(--t-base), box-shadow var(--t-base); outline:none;
}
.setting .unit .flex-box .info-unit-wrap .info .input-box input:focus{
border-color:var(--c-primary); box-shadow:0 0 0 3px var(--c-primary-ring);
}
.setting .unit .flex-box .info-unit-wrap .info .input-box button{
flex-shrink:0; height:2.25rem; padding:0 1rem;
background:var(--c-primary); color:#fff; border:none; border-radius:var(--r-md);
font-size:var(--fs-md); font-variation-settings:'wght' var(--fw-semibold);
cursor:pointer; transition:background var(--t-base);
}
.setting .unit .flex-box .info-unit-wrap .info .input-box button:hover{ background:var(--c-primary-dark); }
.setting .unit .flex-box .info-unit-wrap .info .item.exp p{
font-size:var(--fs-md); color:var(--c-text-secondary);
padding:.625rem .75rem; background:var(--c-surface);
border-radius:var(--r-md); border:1px solid var(--c-border-subtle);
}
/* ============================================================
시스템 설정 — 빈 상태(준비 중) 컴포넌트
============================================================ */
.lk-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 3.5rem 1rem;
gap: 0.625rem;
text-align: center;
}
.lk-empty-state .empty-icon {
font-size: 2.75rem;
line-height: 1;
color: #d0d0d8;
margin-bottom: 0.375rem;
}
.lk-empty-state .empty-title {
font-size: var(--fs-xl);
font-variation-settings: 'wght' var(--fw-semibold);
color: var(--c-text);
}
.lk-empty-state .empty-desc {
font-size: var(--fs-sm);
color: var(--c-text-muted);
line-height: 1.65;
max-width: 22rem;
}
/* lk-card-section-title — margin-top 유틸리티 (인라인 margin-top 대체) */
.lk-card-section-title.mt { margin-top: 1.5rem; }
/* 세팅 */
.setting-desc{ font-size:var(--fs-md); color:var(--c-text-secondary); margin-bottom:1rem; }
.setting .setting-box{margin-bottom: 50px;}
.setting .setting-box:last-of-type{margin-bottom: 0}
.setting .setting-box .tit h2 span{color: #9CA4AD; font-size: 15px; margin-left: 20px;}
/* TODO 20241206 flex-wrap: wrap 추가 */
.setting .default .input-list{display:flex; gap: 0 20px; margin-top: 20px; flex-wrap: wrap; gap: 1.875rem;}
.setting .default .input-list .box{width: 50%;}
/* TODO 20241206 calc 2 -> 3변경 */
.setting .default .input-list .box.w25{width: calc((50% - 40px) / 3);}
.setting .default .file-uplode{margin-top: 20px;}
.setting .default .file-uplode .box{display:flex; align-items: center; gap:0 20px; margin-bottom: 20px;}
.setting .default .file-uplode .box .preview{display:flex; align-items: center; justify-content: center; min-width: 40px; height: 40px; max-width: 180px; overflow: hidden; border:1px solid #E7E7E7; border-radius:5px; padding: 3px;}
.setting .default .file-uplode .box .preview img{max-height: 100%;}
.setting .default .file-uplode .box .txt{display:flex;}
.setting .default .file-uplode .box .txt h4{font-size: 1rem; font-variation-settings: 'wght' var(--fw-medium); color: #666;}
.setting .default .file-uplode .box .txt p{font-size: 1rem; font-variation-settings: 'wght' var(--fw-medium); color: #9CA4AD; margin-left: 20px;}
.setting .default .file-uplode .box .btn-box{display:flex; align-items: center; margin-left: 10px; gap:0 10px}
.setting .default .file-uplode .box .btn-box .uplode input{display: none;}
.setting .default .file-uplode .box .btn-box .uplode label span{display: flex; align-items: center; font-variation-settings: 'wght' var(--fw-semibold); font-size: 17px; border: none; color: var(--c-text); border: 1px solid var(--c-primary); padding: 0 1.875rem; border-radius: 0.3125rem; height: 2.375rem; cursor: pointer; transition: 0.3s; margin: 0 auto;}
.setting .default .file-uplode .box .btn-box .uplode label:hover span{color: var(--c-bg); background: var(--c-primary);}
.setting .default .file-uplode .box .btn-box .delete button{font-size: 17px;}
.setting .api .content{margin-top: 20px;;}
/* TODO 20241022 margin-bottom 20px 추가 */
.setting .api .box{display:flex; align-items: flex-end; gap: 0 20px; width: 100%; margin-bottom: 20px;}
.setting .api .box .select-box{min-width: 9.375rem;}
/* [Fix-13] 중복 .setting .api .box .select-box select 선언 제거 — 644행 블록이 정규 정의 */
/* TODO 20241205 max-width 값 변경 */
.setting .api .box .input-box{width: 100%; max-width: 300px;}
.setting .api .box .input-box input:focus{border-bottom-color: #000;}
.setting .api .box .chk-result{}
.setting .api .box .chk-result span{display:flex; align-items: center; justify-content: center; color: var(--c-bg); width: 100px; height: 38px; background: #4DCA62; border-radius:5px}
.setting .api .box .chk-result span.fail{background: #FC594F;}
.setting .drag-ctn .drag-wrap{display:flex; align-items: center; flex-wrap:wrap; gap:20px 0; margin-top: 20px; cursor: grab;}
.setting .drag-ctn .drag-wrap .item{display:flex; align-items: center; justify-content: center; width: 16.666666%; border-right: 1px solid var(--c-border-medium);}
.setting .drag-ctn .drag-wrap .item:nth-of-type(6n){border-right: none;}
/* [Fix-14] 아이템 수가 6의 배수가 아닐 때 마지막 아이템 고아 border-right 제거 */
.setting .drag-ctn .drag-wrap .item:last-child{border-right: none;}
.setting .drag-ctn .drag-wrap .item .num{width: 40px; height: 40px; border:1px solid #c1c1c1; border-radius:5px; font-variation-settings: 'wght' var(--fw-bold); font-size: 15px; color: #9CA4AD; text-align: center; line-height: 38px; margin: 0 10px;}
.setting .drag-ctn .drag-wrap .item figure img{transition: 0.3s;}
.setting .drag-ctn .drag-wrap .item:hover figure img{filter: brightness(0) saturate(100%) invert(15%) sepia(19%) saturate(1134%) hue-rotate(170deg) brightness(94%) contrast(94%); }
/* form-field 스타일 통일로 이전 */
.setting .drag-ctn .drag-wrap .item input{max-width: 80px; height: auto; border: 1.5px solid var(--c-border); border-radius: var(--r-md); padding: 0.5rem 0.625rem; text-align: center; font-size: 0.875rem; color: var(--c-text); background: var(--c-bg); transition: border-color var(--t-base);}
.setting .drag-ctn .drag-wrap .item input:focus{border-color: var(--c-primary);}
.setting .drag-ctn .drag-wrap .item .icon-box{display:flex; align-items: center; margin-left: 5px;}
.setting .drag-ctn .drag-wrap .item .icon-box button{display:flex; align-items: center; justify-content: center; width: 30px; height: 40px; cursor: pointer; background: none; border: none; padding: 0;}
.setting .drag-ctn .drag-wrap .item .icon-box button img{transition: 0.3s;}
.setting .drag-ctn .drag-wrap .item .icon-box button:hover img{filter: brightness(0) saturate(100%) invert(15%) sepia(19%) saturate(1134%) hue-rotate(170deg) brightness(94%) contrast(94%);}
.setting .unit{}
/* TODO 20241209 align-items: flex-start; 제거 */
.setting .unit .flex-box{ margin-top:1.25rem; gap:0 1.25rem; }
.setting .unit .flex-box .add-unit-wrap{
width:100%; max-width:28rem; flex-shrink:0;
border:1px solid var(--c-border); border-radius:var(--r-card);
background:var(--c-bg); overflow:hidden;
}
/* [Fix-12] 뷰포트 900px 이하에서 add-unit-wrap 28rem이 flex-box 너비 초과 → 세로 스택 */
@media (max-width:900px) {
.setting .unit .flex-box{ flex-direction:column; }
.setting .unit .flex-box .add-unit-wrap{ max-width:100%; }
}
.setting .unit .flex-box .add-unit-wrap button{ width:2.25rem; height:2.25rem; padding:0; cursor:pointer; background:none; border:none; border-radius:var(--r-sm); display:flex; align-items:center; justify-content:center; transition:background var(--t-base); }
.setting .unit .flex-box .add-unit-wrap button:hover{ background:var(--c-primary-bg); }
.setting .unit .flex-box .add-unit-wrap button:hover img{ filter:brightness(0) saturate(100%) invert(33%) sepia(85%) saturate(700%) hue-rotate(5deg) brightness(95%) contrast(95%); }
.setting .unit .flex-box .add-unit-wrap button img{ transition:filter var(--t-base); }
.setting .unit .flex-box .add-unit-wrap .unit-tit{ padding:.75rem 1rem; border-bottom:1px solid var(--c-border-subtle); background:var(--c-surface-alt); }
.setting .unit .flex-box .add-unit-wrap .unit-tit h4{ display:flex; align-items:center; justify-content:space-between; font-variation-settings:'wght' var(--fw-semibold); font-size:var(--fs-lg); color:var(--c-text); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .hide{ display:none; }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 > .item:last-of-type{ border-bottom:1px solid var(--c-border-subtle); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 > .item:last-of-type .group-name{ border-bottom:none; }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item.on{ background:var(--c-primary-bg); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name{ position:relative; display:flex; align-items:center; gap:0 .75rem; height:2.875rem; font-variation-settings:'wght' var(--fw-medium); font-size:var(--fs-lg); color:var(--c-text); cursor:pointer; border-bottom:1px solid var(--c-border-subtle); padding:0 .75rem; transition:background var(--t-base); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name:hover{ background:var(--c-surface); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item.on .group-name{ color:var(--c-primary); background:var(--c-primary-bg); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name p{ background:url("../images/icon-group-arrow.svg") calc(100% - 2.75rem) 50% / 1.25rem no-repeat; padding-right:4rem; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; flex:1; }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name.down p{ background-image:url("../images/icon-group-arrow02.svg"); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name .drag-icon{ cursor:grab; display:flex; align-items:center; }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name .drag-icon img{ opacity:.4; transition:opacity var(--t-base); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name:hover .drag-icon img{ opacity:.8; }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .item .group-name button{ position:absolute; top:50%; right:.5rem; transform:translateY(-50%); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .depth02 .item .group-name{ padding-left:2rem; font-size:var(--fs-md); }
.setting .unit .flex-box .add-unit-wrap .add-box .depth01 .depth02 .depth03 .item .group-name{ padding-left:3rem; font-size:var(--fs-base); }
.selected-member {
background-color: #fbe9e1;
}
/* .assigned-project-box {
border: 2px solid var(--c-primary);
} */
.assigned-badge {
position: absolute;
top: 10px;
right: 10px;
background-color: var(--c-primary);
color: white;
padding: 5px 10px;
border-radius: 15px;
font-size: 0.8em;
}
figure.assigned-project {
border: 2px solid var(--c-primary) !important;
}
/* .assigned-project-Background {
border: 2px solid var(--c-primary) !important;
} */
/* TODO */
.input-list > .box > div > select {
width: 100%;
height: 1.875rem;
border: none;
border-bottom: 1px solid #c1c1c1;
outline: none;
padding: 0 0.3125rem;
font-variation-settings: 'wght' var(--fw-medium);
font-size: 1rem;
color: #222;
}
/* ============================================================
/* ============================================================
모니터링 타일 그리드 — 밀도 우선 + 이름은 호버 오버레이 (KREAM식 라이트)
============================================================ */
.main .scroll-box .project-list .item .box{ position:relative; border-radius:0.5rem; border:1px solid #ececec; }
/* 기본: 스크린샷 타일만, 타이틀 숨김 */
.main .scroll-box .project-list .item h2{ position:absolute; left:0; right:0; bottom:0; margin:0; z-index:2; opacity:0; transition:opacity 0.18s ease; border-radius:0; background:transparent; color:var(--c-bg); font-variation-settings:'wght' var(--fw-bold); text-align:center; padding:0.75em 0.5em 0.6em; text-shadow:0 1px 4px rgba(0,0,0,0.6); }
/* 호버 시: 하단 스크림 + 이름 노출 */
.main .scroll-box .project-list .item .box::after{ content:''; position:absolute; inset:0; z-index:1; border-radius:inherit; background:linear-gradient(to top, rgba(0,0,0,0.7), transparent 50%); opacity:0; transition:opacity 0.18s ease; pointer-events:none; }
.main .scroll-box .project-list .item:hover h2{ opacity:1; }
.main .scroll-box .project-list .item:hover .box::after{ opacity:1; }
.main .scroll-box .project-list .item:hover .box{ border-color:var(--c-primary); }
/* 모니터링 타일 — 스냅샷 없을 때 클린 플레이스홀더(이니셜) */
.main .scroll-box .project-list .item .box .no-thumb{ position:absolute; inset:0; display:flex; align-items:center; justify-content:center; background:#f3f3f5; }
.main .scroll-box .project-list .item .box .no-thumb span{ font-size:2.4em; font-variation-settings:'wght' var(--fw-extrabold); color:#cfcfd6; letter-spacing:0.02em; }
/* 마이페이지 담당 프로젝트 썸네일 — 커버 없을 때 이니셜 */
.common-plist .item .left figure .no-thumb-sm{ width:100%; height:100%; display:flex; align-items:center; justify-content:center; background:#f3f3f5; border-radius:inherit; }
.common-plist .item .left figure .no-thumb-sm span{ font-size:1.1rem; font-variation-settings:'wght' var(--fw-bold); color:#c0c0c8; }
/* ============================================================
공통 페이지 헤더
— [Fix-8/15/17] common.css .page-header와 충돌 정리.
padding-bottom:1rem + margin-bottom:1.5rem + border-bottom을 sub.css 단일 출처로 통합.
common.css의 .page-header 블록은 삭제 필요(별도 common.css 작업).
============================================================ */
.page-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.5rem; padding-bottom:1rem; border-bottom:2px solid var(--c-border); }
.page-header h2{ font-size:1.25rem; font-variation-settings:'wght' var(--fw-bold); color:var(--c-text); letter-spacing:-0.02em; }
.page-header .page-actions{ display:flex; gap:0.5rem; align-items:center; }
/* ============================================================
공통 카드 컴포넌트
— [Fix-9/22] common.css .lk-card(border/shadow/overflow)와 sub.css(padding) 이중 정의 통합.
box-shadow·overflow:hidden을 sub.css에 명시하여 common.css 로드 순서 무관하게 일관성 보장.
common.css의 .lk-card 블록은 추후 삭제 또는 토큰 전용으로 축소 권장.
============================================================ */
.lk-card{ background:var(--c-bg); border-radius:var(--r-card); border:1px solid var(--c-border); box-shadow:var(--shadow-card); overflow:hidden; padding:1.5rem; margin-bottom:1.5rem; }
.lk-card:last-child{ margin-bottom:0; }
/* [Fix-10] common.css .lk-card-header padding 충돌 — sub.css에서 완전 정의로 통일 */
.lk-card-header{ display:flex; align-items:center; justify-content:space-between; margin-bottom:1.25rem; padding:0 0 0.875rem; border-bottom:1px solid var(--c-border-subtle); }
.lk-card-flush .lk-card-header{ padding:1.25rem 1.5rem 0.875rem; }
.lk-card-header h3{ font-size:0.9375rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text); }
.lk-card-header .card-actions{ display:flex; gap:0.5rem; }
/* margin-bottom: 인라인 스타일(1.25rem)을 클래스로 통일 */
.lk-card-section-title{ font-size:0.75rem; font-variation-settings:'wght' var(--fw-bold); color:var(--c-primary); letter-spacing:.06em; text-transform:uppercase; margin-bottom:1.25rem; padding-left:0.625rem; border-left:3px solid var(--c-primary); line-height:1.2; }
/* ============================================================
공통 폼 그리드
============================================================ */
.form-grid{ display:grid; gap:1rem; }
.form-grid.col2{ grid-template-columns:1fr 1fr; }
.form-grid.col3{ grid-template-columns:1fr 1fr 1fr; }
.form-grid.col4{ grid-template-columns:1fr 1fr 1fr 1fr; }
.form-field{ display:flex; flex-direction:column; gap:0.375rem; }
.form-field label{ font-size:0.75rem; font-variation-settings:'wght' var(--fw-semibold); color:#3d3d3d; letter-spacing:.02em; }
.form-field label em{ color:var(--c-primary); font-style:normal; margin-left:2px; }
.form-field input[type=text],.form-field input[type=url],.form-field input[type=email],.form-field input[type=number],.form-field input[type=date],.form-field input[type=password],.form-field select,.form-field textarea{
width:100%; border:1.5px solid var(--c-border); border-radius: var(--r-md); padding:0.5625rem 0.875rem;
font-size:0.875rem; color:var(--c-text); background:var(--c-bg); outline:none; transition:border-color var(--t-base);
font-family:inherit; font-variation-settings:'wght' 450; height:auto;
}
.form-field input:focus,.form-field select:focus,.form-field textarea:focus{ border-color:var(--c-primary); }
.form-field input::placeholder,.form-field textarea::placeholder{ color:var(--c-text-muted); }
.form-field textarea{ resize:vertical; min-height:80px; }
.form-field .field-hint{ font-size:var(--fs-sm); color:var(--c-text-muted); margin-top:var(--sp-1); }
.form-field.span2{ grid-column:span 2; }
.form-field.span3{ grid-column:span 3; }
.form-field.span4{ grid-column:span 4; }
/* ============================================================
공통 액션 버튼
— [Fix-11] common.css .lk-btn(height:2.375rem, padding:0 1.25rem)과 충돌.
sub.css를 canonical 정의로 유지(height:2.25rem, padding:0 1.125rem).
common.css의 .lk-btn 블록은 삭제 권장.
============================================================ */
.lk-btn{ height:2.25rem; padding:0 1.125rem; border-radius: var(--r-md); font-size:0.875rem; font-variation-settings:'wght' var(--fw-semibold); cursor:pointer; border:1.5px solid var(--c-border); background:var(--c-bg); color:var(--c-text); transition:var(--t-base); white-space:nowrap; display:inline-flex; align-items:center; gap:4px; }
.lk-btn:hover{ border-color:var(--c-primary); color:var(--c-primary); }
.lk-btn.primary{ background:var(--c-primary); color:var(--c-bg); border-color:var(--c-primary); }
.lk-btn.primary:hover{ background:var(--c-primary-dark); border-color:var(--c-primary-dark); }
.lk-btn.danger{ border-color:#fca5a5; color:var(--c-danger); }
.lk-btn.danger:hover{ border-color:var(--c-danger); color:var(--c-danger); }
/* ============================================================
프로젝트 등록 — cover upload
============================================================ */
.cover-upload-area{ display:flex; align-items:center; justify-content:center; flex-direction:column; gap:0.5rem; min-height:9rem; border:2px dashed var(--c-border); border-radius: var(--r-lg); cursor:pointer; transition:border-color var(--t-base), background var(--t-base); background:var(--c-surface-hover); text-align:center; }
.cover-upload-area:hover{ border-color:var(--c-primary); background:var(--c-primary-light); }
.cover-upload-area .upload-icon{ font-size:2rem; line-height:1; color:#d0d0d8; }
.cover-upload-area .upload-text{ font-size:0.8125rem; color:var(--c-text-muted); }
/* 커버 이미지 섹션 레이블 */
.cover-label{ font-size:.75rem; font-variation-settings:'wght' 600; color:#3d3d3d; margin-bottom:.5rem; }
/* 커버 업로드 박스 — img-box 스택 컨텍스트 */
.cover-upload-box{ position:relative; }
.cover-upload-box .img-area{ border-radius:10px; border:1.5px solid #e8e8e8; z-index:2; }
.cover-upload-box .cover-upload-area{ position:relative; z-index:1; }
/* 파일 크기 힌트 */
.file-size-hint{ font-size:.7rem; color:#b0b0b0; margin-top:.5rem; text-align:center; }
/* 커버+필드 레이아웃 그리드 */
/* [Fix-4] 고정 200px → min(200px,30%)로 반응형 대응 */
.cover-form-grid{ display:grid; grid-template-columns:min(200px,30%) 1fr; gap:1.5rem; align-items:start; }
@media (max-width:900px) {
.cover-form-grid{ grid-template-columns:1fr; }
.cover-upload-box{ max-width:200px; }
}
@media (max-width:600px) {
.form-grid.col2{ grid-template-columns:1fr; }
}
/* ============================================================
공통 카드 변형 — flush (padding 제거, 내부 콘텐츠가 카드 끝까지 채움)
============================================================ */
/* [Fix-2] lk-card-flush: flex column으로 내부 bot-ctn이 남은 높이를 차지하도록 */
.lk-card-flush{ padding:0; overflow:hidden; display:flex; flex-direction:column; }
.lk-card-flush > .bot-ctn{ margin-top:0; flex:1; display:flex; min-height:400px; }
/* [Fix-3] .project .bot-ctn(특이도 0,2,0)이 flush 내부 margin-top을 덮어쓰는 문제 해결 */
.project .lk-card-flush .bot-ctn{ margin-top:0; }
/* ============================================================
시스템 설정 — API 행
============================================================ */
.api-form-row{ display:flex; align-items:flex-end; gap:0.75rem; flex-wrap:wrap; padding:1rem; border-bottom:1px solid var(--c-border-subtle); border-radius:var(--r-md); background:var(--c-surface-alt); margin-bottom:0.5rem; }
.api-form-row:last-child{ border-bottom:none; margin-bottom:0; }
.api-form-row:first-child{ }
.api-form-row .form-field{ flex:1; min-width:120px; }
.api-form-row .form-field:first-child{ flex:0 0 180px; max-width:180px; }
.api-form-row .row-actions{ display:flex; gap:0.5rem; flex-shrink:0; padding-bottom:1px; }
.api-status-badge{ display:inline-flex; align-items:center; gap:.4rem; font-size:0.75rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text-secondary); }
.api-status-badge::before{ content:''; width:7px; height:7px; border-radius:50%; background:currentColor; flex-shrink:0; }
.api-status-badge.ok{ color:var(--c-success); }
.api-status-badge.fail{ color:#dc2626; }
/* ============================================================
조직도 페이지 — 전용 레이아웃
============================================================ */
/* group-content: org-list-card 전체 폭 */
/* [Fix-16] 14rem 고정 공제값 → CSS 변수 기반으로 교체, min-height 추가 */
.group .group-content .org-list-card{
flex:1; min-width:0;
height:calc(100dvh - var(--topbar-h) - var(--footer-h) - 7rem);
min-height:400px;
display:flex; flex-direction:column;
margin-bottom:0;
}
/* 검색바 — 카드 상단 풀폭 */
.org-search-bar{
flex-shrink:0; display:flex; align-items:center;
padding:.75rem 1rem; border-bottom:1px solid var(--c-border-medium); background:var(--c-bg);
}
.org-search-bar form{ display:flex; align-items:center; gap:.5rem; width:100%; }
.org-search-bar select{
/* [Fix-1] select/input/button 높이 2.125rem으로 통일 */
flex-shrink:0; height:2.125rem; padding:0 1.625rem 0 .625rem;
border:1.5px solid var(--c-border); border-radius: var(--r-sm);
background:url('../images/icon-select-arrow.svg') calc(100% - .375rem) 50% / auto no-repeat #fff;
font-size:.8125rem; color:var(--c-text-sub); cursor:pointer; outline:none; width:auto;
appearance:none; -webkit-appearance:none; box-sizing:border-box;
}
.org-search-bar select:focus{ border-color:var(--c-primary); }
/* 인풋+버튼 단일 보더 컨테이너 */
.org-search-bar .search-input-wrap{
flex:1; display:flex; align-items:center;
border:1.5px solid var(--c-border); border-radius:var(--r-sm);
overflow:hidden; background:var(--c-bg); transition:border-color var(--t-base);
}
.org-search-bar .search-input-wrap:focus-within{ border-color:var(--c-primary); }
.org-search-bar .search-input-wrap input[type="text"]{
flex:1; height:2.125rem; padding:0 .75rem;
border:none; background:transparent; font-size:.875rem; color:var(--c-text); outline:none;
}
.org-search-bar .search-input-wrap button{
flex-shrink:0; width:2.125rem; height:2.125rem;
border:none; border-left:1px solid var(--c-border);
background:var(--c-surface-alt) url('../images/icon-search.svg') 50%/14px 14px no-repeat;
font-size:0; cursor:pointer; padding:0; transition:background-color var(--t-base);
}
.org-search-bar .search-input-wrap button:hover{ background-color:var(--c-primary-bg); }
/* 조직도 패널(등록/상세 편집) 헤더 라벨 — 전폭 검색바 위에 깔끔히 배치 */
.org-assign-ctn .org-assign-head{ flex-shrink:0; padding:1rem 1.25rem .75rem; }
.org-assign-ctn .org-assign-head h3{ margin:0; font-size:.9375rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text); }
/* 카드 헤더 인라인 사용 토글(콘텐츠 키워드 체크 등) */
.ds-inline-toggle{ display:inline-flex; align-items:center; gap:.4rem; font-size:.8125rem; color:var(--c-text-secondary); cursor:pointer; user-select:none; }
.ds-inline-toggle input{ width:1rem; height:1rem; accent-color:var(--c-primary); cursor:pointer; margin:0; }
/* ════════ 담당자 지정 통합 피커 (선택칩 + 검색 + 멤버 리스트) ════════ */
.ds-assign-card{ display:flex; flex-direction:column; overflow:hidden; }
.ds-assign-head{ display:flex; align-items:center; justify-content:space-between; padding:1.25rem 1.25rem .875rem; }
.ds-assign-head h3{ margin:0; font-size:1rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text); }
.ds-assign-count{ font-size:.8125rem; color:var(--c-primary); font-variation-settings:'wght' var(--fw-semibold); }
/* 선택칩 */
.ds-assign-chips{ display:flex; flex-wrap:wrap; gap:.5rem; padding:0 1.25rem; margin:0; list-style:none; }
.ds-assign-chips:empty{ display:none; }
.ds-chip{ display:inline-flex; align-items:center; gap:.5rem; padding:.3125rem .5rem .3125rem .375rem; background:var(--c-primary-light); border:1px solid rgba(234,92,42,.22); border-radius:var(--r-pill); }
.ds-chip-avatar{ width:1.5rem; height:1.5rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.625rem; font-variation-settings:'wght' var(--fw-bold); flex-shrink:0; }
.ds-chip-name{ font-size:.8125rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text); }
.ds-chip-rank{ font-size:.6875rem; color:var(--c-text-muted); }
.ds-chip-x{ width:1.125rem; height:1.125rem; border:none; border-radius:50%; background:transparent; cursor:pointer; position:relative; flex-shrink:0; padding:0; }
.ds-chip-x::before, .ds-chip-x::after{ content:''; position:absolute; top:50%; left:50%; width:.625rem; height:1.5px; background:var(--c-primary); border-radius:1px; }
.ds-chip-x::before{ transform:translate(-50%,-50%) rotate(45deg); }
.ds-chip-x::after{ transform:translate(-50%,-50%) rotate(-45deg); }
.ds-chip-x:hover{ background:rgba(234,92,42,.15); }
.ds-assign-empty{ padding:.625rem 1.25rem 0; margin:0; color:var(--c-text-muted); font-size:.8125rem; }
/* 검색바(카드 내부) */
.ds-assign-card .ds-assign-search{ margin-top:1rem; }
/* 멤버 리스트 — 반응형 그리드 카드(트리/헤더 없음, 넓으면 여러 열) */
.ds-assign-list{ max-height:26rem; overflow-y:auto; padding:1rem 1.25rem 1.25rem; }
.ds-pick-grid{ display:grid; grid-template-columns:repeat(auto-fill, minmax(20rem, 1fr)); gap:.5rem; }
.ds-pick-item{ display:flex; align-items:center; gap:.75rem; padding:.625rem .75rem; border:1px solid var(--c-border); border-radius:var(--r-lg); background:var(--c-bg); cursor:pointer; transition:border-color var(--t-fast), background var(--t-fast); }
.ds-pick-item:hover{ border-color:var(--c-primary); background:var(--c-primary-bg); }
.ds-pick-item .row-avatar{ width:2.25rem; height:2.25rem; border-radius:50%; display:flex; align-items:center; justify-content:center; font-size:.8125rem; font-variation-settings:'wght' var(--fw-semibold); flex-shrink:0; }
.ds-pick-item .name-info{ display:flex; flex-direction:column; gap:.0625rem; min-width:0; flex:1; }
.ds-pick-item .row-name{ font-size:.875rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-pick-item .row-rank{ font-size:.6875rem; color:var(--c-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.ds-pick-action{ flex-shrink:0; }
.ds-pick-add, .ds-pick-added{ align-items:center; gap:.25rem; padding:.25rem .625rem; border-radius:var(--r-pill); font-size:.6875rem; font-variation-settings:'wght' var(--fw-semibold); white-space:nowrap; }
.ds-pick-add{ display:inline-flex; border:1px solid var(--c-border); color:var(--c-text-secondary); background:var(--c-bg); }
.ds-pick-added{ display:none; border:1px solid rgba(234,92,42,.3); color:var(--c-primary); background:var(--c-primary-light); }
.ds-pick-item:hover .ds-pick-add{ border-color:var(--c-primary); color:var(--c-primary); }
.ds-pick-item.selected-member{ border-color:rgba(234,92,42,.4); background:var(--c-primary-light); }
.ds-pick-item.selected-member .ds-pick-add{ display:none; }
.ds-pick-item.selected-member .ds-pick-added{ display:inline-flex; }
.ds-pick-empty{ grid-column:1/-1; padding:1.5rem; text-align:center; color:var(--c-text-muted); font-size:.875rem; }
/* 스크롤박스 · 플렉스컨테이너 */
/* [Fix-18] overflow:hidden이지만 height:100% 없으면 flex-ctn이 찌그러짐 */
.org-list-card .scroll-box{ flex:1; min-height:0; overflow:hidden; padding-right:0; height:100%; }
.org-list-card .flex-ctn{ height:100%; }
/* org-list 사이드바 — 상단 레이블 */
.org-list-card .org-list{ width:18rem; max-width:18rem; flex:0 0 18rem; height:100%; overflow-y:auto; overflow-x:hidden; }
.org-list-card .org-list::before{
content:'조직 구조'; display:block;
padding:.625rem .875rem .25rem;
font-size:.5625rem; letter-spacing:.1em; text-transform:uppercase;
color:var(--c-text-disabled); font-variation-settings:'wght' var(--fw-bold);
}
/* ══ 조직도 트리 노드 — 프리뷰(15-tree / 24-org-chart) ds-tree-row 스타일 이식 ══ */
/* 노드 행: chevron + 라벨(flex:1) + 인원수 배지 가로 배치 */
.org-list .tree-node > span:not(.icon) {
display: flex;
align-items: center;
gap: .5rem;
width: 100%;
padding: 0 .625rem;
height: 2.5rem;
margin: 0;
border: none;
border-radius: 0;
background: transparent;
box-shadow: none;
box-sizing: border-box;
font-size: var(--fs-md);
font-variation-settings: 'wght' var(--fw-medium);
color: var(--c-text-sub);
transition: background var(--t-base), color var(--t-base);
position: relative;
overflow: hidden;
white-space: nowrap;
}
/* 라벨 — 가변 폭, 말줄임 (전역 span:not(.icon) width:100% 무력화) */
.org-list .tree-node > span:not(.icon) .tree-label {
flex: 1 1 0;
width: auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
line-height: 1;
padding: 0;
border: none;
background: none;
height: auto;
}
/* 인원수 배지 — pill (전역 span:not(.icon) width:100% 무력화) */
.org-list .tree-node > span:not(.icon) .tree-count {
flex: 0 0 auto;
width: auto;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.25rem;
height: 1.25rem;
border: none;
padding: 0 .35rem;
border-radius: var(--r-pill);
background: var(--c-gray-100);
color: var(--c-text-secondary);
font-size: var(--fs-2xs);
font-variation-settings: 'wght' var(--fw-bold);
line-height: 1;
}
/* chevron — 라벨 앞으로 이동(order), 펼침 시 회전 */
.org-list .tree-node > span:not(.icon) .icon {
order: -1;
flex-shrink: 0;
margin-left: 0;
}
/* hover */
.org-list .tree-node > span:not(.icon):hover {
background: var(--c-surface-hover);
color: var(--c-primary);
box-shadow: none;
border: none;
}
/* 선택(클릭) 상태 — 연한 primary + 좌측 primary 바 */
.org-list .tree-node > span:not(.icon).on {
background: var(--c-primary-light);
color: var(--c-primary);
font-variation-settings: 'wght' var(--fw-semibold);
box-shadow: none;
border: none;
}
.org-list .tree-node > span:not(.icon).on::before {
content: '';
position: absolute;
left: 0; top: 0; bottom: 0;
width: 2.5px;
background: var(--c-primary);
border-radius: 0 2px 2px 0;
}
.org-list .tree-node > span:not(.icon).on .tree-count {
background: rgba(234,92,42,.15);
color: var(--c-primary);
}
/* 열린 부모 노드 — 채워진 primary */
.org-list .tree-node.tree-open > span:not(.icon) {
background: var(--c-primary);
color: #fff;
border: none;
font-variation-settings: 'wght' var(--fw-semibold);
}
.org-list .tree-node.tree-open > span:not(.icon)::before { display: none; }
.org-list .tree-node.tree-open > span:not(.icon):hover {
background: var(--c-primary-dark);
color: #fff;
}
.org-list .tree-node.tree-open > span:not(.icon).on {
background: var(--c-primary);
color: #fff;
}
.org-list .tree-node.tree-open > span:not(.icon) .icon {
filter: brightness(0) invert(1) opacity(.9);
}
.org-list .tree-node.tree-open > span:not(.icon) .tree-count {
background: rgba(255,255,255,.25);
color: #fff;
}
/* 라벨 색 — 펼친 노드는 배경이 primary 로 채워지므로 부모의 흰색을 그대로 써야 한다.
상속에 맡길 수 없다: 위쪽 레거시 규칙 두 개가 자식 .tree-label 에도 매치돼 색을 덮는다.
.org-list ul li span:not(.icon) { color:var(--c-text-sub) } → 주황 배경 위 진회색
.org-list ul li span:not(.icon):hover { color:var(--c-primary) } → 배경과 동색(글자 소실)
호버·선택 여부와 무관하게 흰색으로 고정한다(tree-open 계열 배경은 모두 primary 계열). */
.org-list .tree-node.tree-open > span:not(.icon) .tree-label { color: #fff; }
/* ── depth 들여쓰기 (프리뷰: depth2 1.875rem / depth3 3.125rem) ── */
.org-list .depth2 li > span:not(.icon) { padding-left: 1.875rem; }
.org-list .depth3 li > span:not(.icon) { padding-left: 3.125rem; }
/* ── 트리 연결선 (프리뷰: 수직선 full + 마지막 자식 50%, 수평 분기선) ── */
.org-list .depth2 li,
.org-list .depth3 li { position: relative; }
/* 수직 가이드선 — 행 전체 높이 (depth2 X: .875rem) */
.org-list .depth2 li::after {
content: '';
position: absolute;
left: .875rem; top: 0; bottom: 0;
width: 1px;
background: var(--c-border);
pointer-events: none;
}
.org-list .depth2 li:last-child::after { bottom: 50%; }
/* 수평 분기선 (1.875rem padding - .875rem 수직선 = 1rem) */
.org-list .depth2 li::before {
content: '';
position: absolute;
left: .875rem; top: 50%;
width: 1rem; height: 1px;
background: var(--c-border);
pointer-events: none;
}
/* depth3 (수직선 X: 2.125rem) */
.org-list .depth3 li::after {
content: '';
position: absolute;
left: 2.125rem; top: 0; bottom: 0;
width: 1px;
background: var(--c-border);
pointer-events: none;
}
.org-list .depth3 li:last-child::after { bottom: 50%; }
.org-list .depth3 li::before {
content: '';
position: absolute;
left: 2.125rem; top: 50%;
width: 1rem; height: 1px;
background: var(--c-border);
pointer-events: none;
}
/* 최상단 "전체" 루트 노드 — chevron 없는 단일 행 */
.org-list .tree-root > span {
display: flex;
align-items: center;
width: 100%;
padding: 0 .625rem;
height: 2.5rem;
box-sizing: border-box;
font-size: var(--fs-md);
font-variation-settings: 'wght' var(--fw-medium);
color: var(--c-text-sub);
transition: background var(--t-base), color var(--t-base);
overflow: hidden;
white-space: nowrap;
}
.org-list .tree-root > span:hover { background: var(--c-surface-hover); color: var(--c-primary); }
.org-list .tree-root > span.on {
background: var(--c-primary-light);
color: var(--c-primary);
font-variation-settings: 'wght' var(--fw-semibold);
}
/* 멤버 목록 — card-row (border-collapse:separate) */
/* [Fix-20] 전역 .member-list{width:calc(100% - 11rem)}이 org-list-card 내 14rem org-list와 불일치 → 명시적 오버라이드 */
.org-list-card .member-list{ flex:1; min-width:0; width:calc(100% - 18rem); height:100%; overflow-y:auto; padding:.5rem .625rem; background:var(--c-surface); }
.org-list-card .member-list table,
.org-assign-ctn .member-list table{ border-collapse:separate; border-spacing:0 .3rem; }
.org-list-card .member-list table tr th,
.org-assign-ctn .member-list table tr th{
background:#f9fafb; border-bottom:none; height:1.75rem;
padding:.25rem 1rem; font-size:.625rem; letter-spacing:.07em; color:var(--c-text-disabled);
position:sticky; top:0; z-index:1;
}
/* 헤더 th를 바디 td 컬럼과 정렬: td는 first만 좌측·last만 우측 1.5px border이므로
th도 동일하게 first/last에만 투명 border를 줘 중간 컬럼 누적 어긋남을 제거 */
.org-list-card .member-list table tr th:first-child,
.org-assign-ctn .member-list table tr th:first-child{ width:5rem; padding-left:1.125rem; border-left:1.5px solid transparent; }
.org-list-card .member-list table tr th:last-child,
.org-assign-ctn .member-list table tr th:last-child{ border-right:1.5px solid transparent; }
/* [Fix-3] 행 높이 4.25rem → 3.5rem (아바타 2.25rem 대비 비율 개선) */
.org-list-card .member-list table tbody tr td,
.org-assign-ctn .member-list table tbody tr td{
height:3.5rem;
background:var(--c-bg);
border-top:1.5px solid #f0f0f0; border-bottom:1.5px solid #f0f0f0;
border-left:none; border-right:none;
padding:0 1rem;
transition:background var(--t-base), border-color var(--t-fast), box-shadow var(--t-fast);
}
.org-list-card .member-list table tbody tr td:first-child,
.org-assign-ctn .member-list table tbody tr td:first-child{
border-left:1.5px solid #f0f0f0; border-radius: var(--r-lg) 0 0 var(--r-lg);
color:var(--c-text-disabled); font-size:.8125rem; font-variation-settings:'wght' var(--fw-regular);
width:5rem; padding-left:1.125rem;
}
.org-list-card .member-list table tbody tr td:nth-child(2),
.org-assign-ctn .member-list table tbody tr td:nth-child(2){
color:var(--c-text); font-size:.9375rem; font-variation-settings:'wght' var(--fw-semibold);
}
.org-list-card .member-list table tbody tr td:last-child,
.org-assign-ctn .member-list table tbody tr td:last-child{
border-right:1.5px solid #f0f0f0; border-radius:0 var(--r-lg) var(--r-lg) 0;
}
.org-list-card .member-list .name-wrapper,
.org-assign-ctn .member-list .name-wrapper{ display:flex; align-items:center; gap:.75rem; }
/* 이름+직급 세로 배치 래퍼 */
.org-list-card .member-list .name-info,
.org-assign-ctn .member-list .name-info{ display:flex; flex-direction:column; gap:.125rem; min-width:0; }
.org-list-card .member-list .row-name,
.org-assign-ctn .member-list .row-name{
font-size:.9rem; font-variation-settings:'wght' var(--fw-semibold);
color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.org-list-card .member-list .row-rank,
.org-assign-ctn .member-list .row-rank{
font-size:.7rem; font-variation-settings:'wght' var(--fw-regular);
color:var(--c-text-muted); letter-spacing:.01em;
}
/* 아바타 — 그라디언트 배경 */
/* 아바타 8색 팔레트 — 이름 첫 글자 코드포인트 % 8 (blade organizationData·organizationModule.js·projectMember.js 공통) */
.avatar--0{ background:#fff0eb; color:#ea5c2a; }
.avatar--1{ background:#dbeafe; color:#2563eb; }
.avatar--2{ background:#dcfce7; color:#15803d; }
.avatar--3{ background:#f3e8ff; color:#7c3aed; }
.avatar--4{ background:#fef9c3; color:#a16207; }
.avatar--5{ background:#e0f2fe; color:#0369a1; }
.avatar--6{ background:#fce7f3; color:#be185d; }
.avatar--7{ background:#f1f5f9; color:#475569; }
/* 클릭 가능한 멤버 행 — 인라인 style="cursor:pointer" 대체 */
#userTable tbody tr[data-user-id]{ cursor:pointer; }
.org-list-card .member-list .row-avatar,
.org-assign-ctn .member-list .row-avatar{
width:2.25rem; height:2.25rem; border-radius:50%; flex-shrink:0; letter-spacing:0;
font-size:.8125rem; font-variation-settings:'wght' var(--fw-semibold);
display:flex; align-items:center; justify-content:center;
box-shadow: 0 0 0 2px var(--c-bg), 0 0 0 3.5px rgba(234,92,42,.2);
}
/* .avatar--N 팔레트 미지정 시에만 플랫 폴백 (지정 시 팔레트 색이 우선) */
.org-list-card .member-list .row-avatar:not([class*="avatar--"]),
.org-assign-ctn .member-list .row-avatar:not([class*="avatar--"]){
background: var(--c-primary-light);
color: var(--c-primary);
}
/* perm-badge — primary tint pill */
.org-list-card .member-list .perm-badge,
.org-assign-ctn .member-list .perm-badge{
display:inline-flex; align-items:center; padding:.2rem .625rem; border-radius: var(--r-pill);
background: var(--c-primary-light);
color: var(--c-primary);
border: 1px solid rgba(234,92,42,.18);
font-size:.6875rem; font-variation-settings:'wght' var(--fw-semibold); white-space:nowrap;
}
/* 권한 배지 색상 변형(프리뷰: 관리자=오렌지/편집자=블루/뷰어=그레이) */
.org-list-card .member-list .perm-badge.perm-editor{ background:#dbeafe; color:#2563eb; border-color:rgba(37,99,235,.18); }
.org-list-card .member-list .perm-badge.perm-viewer{ background:#f1f5f9; color:#64748b; border-color:rgba(100,116,139,.18); }
/* 부서 칩 — 주부서(is-primary) 강조 + 겸직 연하게, 여러 개면 줄바꿈 */
.org-list-card .member-list td.col-dept{ white-space:normal; }
.dept-chip{ display:inline-flex; align-items:center; margin:.1rem .25rem .1rem 0; padding:.15rem .5rem; border-radius:var(--r-pill); font-size:.75rem; line-height:1.2; font-variation-settings:'wght' var(--fw-medium); background:var(--c-surface-alt); color:var(--c-text-secondary); border:1px solid var(--c-border-subtle); white-space:nowrap; }
.dept-chip.is-primary{ background:var(--c-primary-light); color:var(--c-primary); border-color:transparent; font-variation-settings:'wght' var(--fw-semibold); }
/* 헤더 글자선 정렬: 칩/배지는 내부 좌측 패딩 때문에 글자가 헤더보다 안쪽으로 보이므로, 첫 요소를 패딩만큼 당겨 글자를 헤더 글자와 맞춤 */
.org-list-card .member-list td.col-dept .dept-chip:first-child{ margin-left:-.5rem; }
.org-list-card .member-list tbody td:nth-child(5) .perm-badge{ margin-left:-.625rem; }
.dept-none{ color:var(--c-text-disabled); }
/* 멤버 패널 — 소속 부서(겸직) 칩 + 추가/제거 */
.mc-row dd{ display:block; }
.mc-chips{ display:flex; flex-wrap:wrap; gap:.375rem; }
.mc-chip{ display:inline-flex; align-items:center; gap:.25rem; padding:.2rem .5rem; border-radius:var(--r-pill); font-size:.75rem; background:var(--c-surface-alt); color:var(--c-text-secondary); border:1px solid var(--c-border-subtle); }
.mc-chip.is-primary{ background:var(--c-primary-light); color:var(--c-primary); border-color:transparent; font-variation-settings:'wght' var(--fw-semibold); }
.mc-remove{ border:none; background:none; color:inherit; cursor:pointer; font-size:.9rem; line-height:1; padding:0; opacity:.55; }
.mc-remove:hover{ opacity:1; color:var(--c-danger); }
.mc-add{ display:flex; gap:.375rem; margin-top:.5rem; }
.mc-add-select{ flex:1; min-width:0; font-size:.8125rem; padding:.3rem .5rem; border:1px solid var(--c-border); border-radius:var(--r-md); background:var(--c-bg); }
.mc-add-btn{ flex-shrink:0; font-size:.75rem; padding:.3rem .625rem; border:1px solid var(--c-primary); color:var(--c-primary); background:var(--c-primary-bg); border-radius:var(--r-md); cursor:pointer; white-space:nowrap; }
.mc-add-btn:hover{ background:var(--c-primary); color:#fff; }
/* ── 프로젝트 컨텍스트 멤버 테이블: 멤버(좌, 전폭) / 권한(우, 우측정렬) 리스트 행 ── */
/* 멤버 셀: 남은 폭 전체(아바타+이름+직급) */
.org-assign-ctn .member-list table tbody tr td.om-member-cell,
.org-assign-ctn .member-list table thead tr th:first-child{
width:auto; text-align:left; color:var(--c-text); white-space:normal;
}
/* 권한 셀: 우측 고정 + 우측 정렬 */
.org-assign-ctn .member-list table tbody tr td.om-perm-cell,
.org-assign-ctn .member-list table thead tr th.om-perm-th{
width:8rem; text-align:right; white-space:nowrap;
}
/* ── 서버 로그 빈 상태 ── */
.pro-detail .log-ctn .member-list .ds-log-empty{
display:flex; flex-direction:column; align-items:center; justify-content:center; gap:.375rem;
min-height:14rem; padding:2rem 1rem; text-align:center;
}
.pro-detail .log-ctn .member-list .ds-log-empty .ds-log-empty-icon{ font-size:1.75rem; opacity:.55; }
.pro-detail .log-ctn .member-list .ds-log-empty p{
margin:0; font-size:.875rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text-secondary);
}
.pro-detail .log-ctn .member-list .ds-log-empty small{ font-size:.75rem; color:var(--c-text-muted); }
/* ── 조직도 멤버 테이블 컬럼: #/이름/부서/권한/관리 ── */
.org-list-card .member-list table tbody tr td.col-num{
width:5rem; color:var(--c-text-disabled); font-size:.8125rem; text-align:left;
}
.org-list-card .member-list table tbody tr td.col-dept{
color:var(--c-text-secondary); font-size:.875rem; font-variation-settings:'wght' var(--fw-regular);
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
.org-list-card .member-list table th.col-actions,
.org-list-card .member-list table td.col-actions{ width:6.5rem; text-align:right; }
/* 행별 수정/삭제 아이콘 액션 */
.org-list-card .member-list .row-actions{ display:inline-flex; align-items:center; gap:.375rem; justify-content:flex-end; }
.org-list-card .member-list .row-act-btn{
width:2rem; height:2rem; flex-shrink:0; padding:0; cursor:pointer;
border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-bg);
transition:border-color var(--t-fast), background var(--t-fast), color var(--t-fast);
display:inline-flex; align-items:center; justify-content:center; color:var(--c-text-muted);
}
.org-list-card .member-list .row-act-btn::before{
content:''; width:.9375rem; height:.9375rem; background:currentColor;
}
.org-list-card .member-list .row-act-btn.act-edit::before{
-webkit-mask:var(--ic-pencil) 50%/contain no-repeat; mask:var(--ic-pencil) 50%/contain no-repeat;
}
.org-list-card .member-list .row-act-btn.act-delete::before{
-webkit-mask:var(--ic-trash) 50%/contain no-repeat; mask:var(--ic-trash) 50%/contain no-repeat;
}
.org-list-card .member-list .row-act-btn.act-edit:hover{ border-color:var(--c-primary); color:var(--c-primary); background:var(--c-primary-bg); }
.org-list-card .member-list .row-act-btn.act-delete:hover{ border-color:#fca5a5; color:var(--c-danger); background:var(--c-danger-bg); }
.org-list-card .member-list table tbody tr,
.org-assign-ctn .member-list table tbody tr{ cursor:pointer; transition:background var(--t-base); }
.org-list-card .member-list table tbody tr:hover td,
.org-assign-ctn .member-list table tbody tr:hover td{
background:var(--c-primary-bg); border-color:#e4e4e4; box-shadow:var(--shadow-hover);
}
.org-list-card .member-list table tbody tr.row-active td,
.org-assign-ctn .member-list table tbody tr.row-active td{
background:var(--c-primary-bg); border-color:#f8d0bc; box-shadow:var(--shadow-active);
}
.org-list-card .member-list table tbody tr.row-active td:first-child,
.org-assign-ctn .member-list table tbody tr.row-active td:first-child{
border-left-color:var(--c-primary); border-left-width:2.5px; padding-left:calc(1.125rem - 1px);
}
/* ============================================================
멤버 상세 패널 (group-member) — 인라인 도킹(프리뷰 24-org-chart)
카드 우측에 항상 도킹되는 3번째 컬럼. 슬라이드오버 오버레이 아님.
============================================================ */
.group .group-content{ gap:1rem; }
.group-member{
flex-shrink:0; width:23rem;
height:calc(100dvh - var(--topbar-h) - var(--footer-h) - 7rem);
min-height:400px;
}
.group-member .org-member-card{
height:100%; margin-bottom:0;
display:flex; flex-direction:column;
border-radius:var(--r-lg); border:1px solid var(--c-border-medium);
box-shadow:var(--shadow-card); overflow:hidden;
}
.group-member .member-dl-section{ flex:1; overflow-y:auto; }
/* 백드롭은 인라인 패널에서 미사용(요소 제거됨) */
.panel-backdrop{ display:none !important; }
/* ============================================================
멤버 카드 내부
============================================================ */
/* [Fix-5] 패널 헤더 패딩을 .lk-card 기본 측면(1.5rem)에 맞춰 통일 */
.org-member-card > .lk-card-header{ padding:.875rem 1.5rem; margin-bottom:0; border-bottom:1px solid #f0f0f0; }
.org-member-card .org-profile-section{
display:flex; flex-direction:column; align-items:center; text-align:center;
padding:1.5rem 1.25rem 1.25rem; border-bottom:1px solid #f0f0f0; gap:.5rem;
}
/* org-avatar — 기본 중립(미선택), 멤버 선택 시 JS가 이름 기반 컬러 적용 */
.org-member-card .org-avatar{
width:5rem; height:5rem; border-radius:50%;
overflow:hidden; border:3px solid #f0f0f0;
background: var(--c-surface-alt);
display:flex; align-items:center; justify-content:center;
color: var(--c-text-disabled);
font-variation-settings: 'wght' var(--fw-semibold);
font-size: 1.375rem;
}
.org-member-card .org-avatar img{ width:100%; height:100%; object-fit:cover; }
.org-member-card .org-avatar .org-avatar-initial{
font-size:1.5rem; line-height:1; font-variation-settings:'wght' var(--fw-bold); color:#fff;
}
.org-member-card .org-member-name{ font-size:1.0625rem; font-variation-settings:'wght' var(--fw-bold); color:var(--c-text); margin-top:.25rem; }
/* org-member-role — primary tint pill */
.org-member-card .org-member-role{
display:inline-flex; align-items:center; padding:.2rem .625rem; border-radius: var(--r-pill);
background: var(--c-primary-light);
color: var(--c-primary);
border: 1px solid rgba(234,92,42,.18);
font-size:.75rem; font-variation-settings:'wght' var(--fw-semibold);
}
.org-member-card .member-dl-section{ padding:.625rem 1.25rem; }
.org-member-card .member-dl{ display:flex; flex-direction:column; }
.org-member-card .member-dl .dl-row{
display:flex; align-items:center; gap:1rem; padding:.625rem 0;
border-bottom:1px solid #f5f5f5; min-height:auto; overflow:visible;
border-radius:0; border-left:none; border-right:none; border-top:none;
}
.org-member-card .member-dl .dl-row:last-child{ border-bottom:none; }
.org-member-card .member-dl .dl-row{ gap:.875rem; padding:.875rem 0; }
.org-member-card .member-dl .dl-row dt{
width:3.5rem; flex-shrink:0; font-size:.75rem; font-variation-settings:'wght' var(--fw-medium);
color:var(--c-text-muted); letter-spacing:.01em; text-transform:none;
background:none; height:auto; border-radius:0; display:block;
}
.org-member-card .member-dl .dl-row dd{ flex:1; min-width:0; }
/* 이메일/연락처 등 일반 텍스트 값 */
/* dept-chip은 제외 — 자체 스타일(인라인·패딩·주황색·폰트) 유지. 나머지 텍스트 값만 block 처리 */
.org-member-card .member-dl .dl-row dd span:not(.dept-chip){
font-size:.875rem; color:var(--c-text); font-variation-settings:'wght' var(--fw-medium);
display:block; white-space:nowrap; overflow:hidden; text-overflow:ellipsis; min-height:auto; padding:0;
}
/* 소속/직급 — 프리뷰 select 박스 외형(읽기전용, chevron 포함) */
.org-member-card .member-dl .dl-row.dl-field dd span{
height:2.25rem; padding:0 1.875rem 0 .75rem; line-height:2.25rem;
border:1px solid var(--c-border); border-radius:var(--r-sm); background:var(--c-bg)
url('../images/icon-select-arrow.svg') calc(100% - .5rem) 50% / auto no-repeat;
}
/* 권한 — 실제 select 드롭다운(프리뷰 동일 외형) */
.org-member-card .member-dl .dl-row dd select{
display:block; width:100%; height:2.25rem; box-sizing:border-box;
border:1px solid var(--c-border); border-radius:var(--r-sm); outline:none;
font-size:.875rem; color:var(--c-text); cursor:pointer; padding:0 1.875rem 0 .75rem;
appearance:none; -webkit-appearance:none;
background:var(--c-bg) url('../images/icon-select-arrow.svg') calc(100% - .5rem) 50% / auto no-repeat;
}
.org-member-card .member-dl .dl-row dd select:focus{ border-color:var(--c-primary); }
.org-member-card .member-dl .dl-row dd.on span{ display:none; }
.org-member-card .member-dl .dl-row dd.on select{ display:block; }
/* [Fix-7] 빈 상태 안내 — 아이콘 + 충분한 여백으로 시각적 명확성 향상 */
.org-member-card .org-empty-msg{
display:flex; flex-direction:column; align-items:center;
padding:3rem 1.25rem 2.5rem; color:var(--c-text-disabled); font-size:.8125rem; text-align:center; line-height:1.9;
gap:.75rem;
}
.org-member-card .org-empty-msg::before{
content:'';
display:block; width:3rem; height:3rem;
background:url('../images/icon-org-list-arrow.svg') 50% 50% / 1.5rem no-repeat;
filter:brightness(0) opacity(.15);
border-radius:50%; border:2px dashed #e0e0e0; flex-shrink:0;
}
.org-member-card .panel-actions{ display:flex; justify-content:center; gap:.625rem; padding:1rem 1.25rem; border-top:1px solid #f0f0f0; margin-top:0; }
.org-member-card .panel-actions .lk-btn{ flex:0 1 auto; min-width:10rem; height:2.5rem; justify-content:center; }
/* 삭제 버튼 — 아웃라인 + 휴지통 아이콘(프리뷰) */
.org-member-card .panel-actions .org-btn-delete{
display:inline-flex; align-items:center; justify-content:center; gap:.375rem;
color:var(--c-danger); border:1px solid #fca5a5; background:var(--c-bg);
}
.org-member-card .panel-actions .org-btn-delete:hover{ background:var(--c-danger-bg); border-color:var(--c-danger); }
.org-btn-trash{
width:.875rem; height:.875rem; flex-shrink:0;
-webkit-mask:var(--ic-trash) 50%/contain no-repeat;
mask:var(--ic-trash) 50%/contain no-repeat;
background:currentColor;
}
/* 인라인 휴지통 아이콘(단색 마스크, currentColor 적용) */
:root{
--ic-trash:url("data:image/svg+xml;utf8,");
--ic-pencil:url("data:image/svg+xml;utf8,");
}
/* 패널 닫기(✕) */
.org-member-card .lk-card-header .org-panel-close{
padding:0; width:1.75rem; height:1.75rem; line-height:1; font-size:1rem;
color:var(--c-text-muted); border:none; background:transparent; border-radius:var(--r-sm);
}
.org-member-card .lk-card-header .org-panel-close:hover{ background:var(--c-surface-hover); color:var(--c-text); }
/* ============================================================
마이페이지 — 카드형 레이아웃
============================================================ */
.mypage .mp-profile{ display:block; }
/* 메신저 그리드: 상하 여백 추가 — 아이콘이 카드 구분선에 붙지 않도록 */
.mypage .messenger-grid{ display:flex; flex-wrap:wrap; gap:1rem; align-items:center; padding:.25rem 0 .5rem; }
/* 아이콘 크기·간격 일관성: flex-shrink 고정으로 줄바꿈 시에도 동일한 크기 유지 */
.mypage .messenger-item{ display:flex; flex-direction:column; align-items:center; gap:.375rem; }
.mypage .messenger-item label.msng-icon{ display:flex; align-items:center; justify-content:center; width:3.75rem; height:3.75rem; border-radius:12px; border:2px solid var(--c-border); cursor:pointer; transition:border-color var(--t-base), background var(--t-base); flex-shrink:0; }
/* 로고 이미지 크기 명시 고정 — 비율 왜곡 방지 */
.mypage .messenger-item label.msng-icon img{ width:2rem; height:2rem; object-fit:contain; display:block; flex-shrink:0; }
.mypage .messenger-item .common-check-box input[type="checkbox"]{ display:none; }
.mypage .messenger-item .common-check-box input[type="checkbox"]:checked + label.msng-icon{ border-color:var(--c-primary); background:var(--c-primary-light); }
.mypage .plist-hd{ display:grid; grid-template-columns:1fr 7.5rem 7.5rem 7.5rem 7.5rem 7.5rem 2rem; gap:0 .75rem; padding:.5rem 1rem; background:#f8f8f8; border-radius: var(--r-md); margin-bottom:.25rem; font-size:.6875rem; font-variation-settings:'wght' var(--fw-bold); color:var(--c-text-secondary); letter-spacing:.04em; text-transform:uppercase; }
.mypage .plist-hd span:not(:first-child){ text-align:right; }
.mypage .p-list-card .list{ overflow-y:auto; max-height:calc(100dvh - 34rem); }
.mypage .p-list-card .item{ display:grid; grid-template-columns:1fr 7.5rem 7.5rem 7.5rem 7.5rem 7.5rem 2rem; gap:0 .75rem; align-items:center; padding:.75rem 1rem; border-bottom:1px solid #f0f0f0; cursor:pointer; transition:background .1s; }
.mypage .p-list-card .item:last-child{ border-bottom:none; }
.mypage .p-list-card .item:hover{ background:var(--c-surface-hover); }
.mypage .p-list-card .item.on{ background:var(--c-primary-light); border-left:3px solid var(--c-primary); padding-left:calc(1rem - 3px); }
.mypage .p-list-card .item .hidden-input{ display:none; }
.mypage .p-list-card .site-col{ display:flex; align-items:center; gap:.75rem; min-width:0; }
.mypage .p-list-card .site-thumb{ width:2.25rem; height:2.25rem; border-radius:.625rem; border:1px solid var(--c-border); overflow:hidden; flex-shrink:0; display:flex; align-items:center; justify-content:center; }
.mypage .p-list-card .site-thumb img{ width:100%; height:100%; object-fit:cover; }
.mypage .p-list-card .site-thumb .no-thumb-sm{ width:100%; height:100%; background:#f3f3f5; display:flex; align-items:center; justify-content:center; }
.mypage .p-list-card .site-thumb .no-thumb-sm span{ font-size:.875rem; font-variation-settings:'wght' var(--fw-bold); color:#c0c0c8; }
.mypage .p-list-card .site-name{ font-size:.875rem; font-variation-settings:'wght' var(--fw-semibold); color:var(--c-text); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mypage .p-list-card .site-url{ font-size:.6875rem; color:var(--c-text-muted); white-space:nowrap; overflow:hidden; text-overflow:ellipsis; }
.mypage .p-list-card .item input[type="number"]{ width:100%; text-align:right; border:1.5px solid var(--c-border); border-radius: var(--r-sm); padding:.3125rem .5rem; font-size:.8125rem; color:var(--c-text); outline:none; transition:border-color var(--t-base); background:var(--c-bg); }
.mypage .p-list-card .item input[type="number"]:focus{ border-color:var(--c-primary); }
.mypage .p-list-card .item .del-btn{ width:1.75rem; height:1.75rem; border:none; background:transparent; cursor:pointer; display:flex; align-items:center; justify-content:center; border-radius: var(--r-sm); transition:background var(--t-base); padding:0; margin:0 auto; }
.mypage .p-list-card .item .del-btn:hover{ background:var(--c-danger-bg); }
.mypage .p-list-card .item .del-btn img{ width:.9rem; }
/* ============================================================
프로젝트 상세 — 카드형 레이아웃
============================================================ */
.pro-detail .detail-cover{ display:grid; grid-template-columns:180px 1fr; gap:1.5rem; align-items:start; }
.pro-detail .detail-cover .cover-wrap{ display:flex; flex-direction:column; gap:.5rem; }
.pro-detail .detail-cover .cover-img{ width:180px; height:140px; border-radius:12px; overflow:hidden; border:1.5px solid var(--c-border); background:var(--c-surface-hover); display:flex; align-items:center; justify-content:center; }
.pro-detail .detail-cover .cover-img img{ width:100%; height:100%; object-fit:cover; }
.pro-detail .log-ctn .scroll-box{ height:calc(100dvh - 42rem); min-height:280px; }
.pro-detail .log-ctn .org-list{ width:180px; max-width:180px; }
.pro-detail .log-ctn .member-list{ width:calc(100% - 190px); }
.pro-detail .log-ctn .org-list > ul{ overflow-y:auto; height:calc(100dvh - 42.4rem); }
/* ============================================================
공통 유틸리티 — projectDetail 인라인 스타일 추출
============================================================ */
/* 커버 이미지 하단 파일 크기 힌트 */
.cover-file-hint{ font-size:.7rem; color:#b0b0b0; text-align:center; }
/* 읽기 전용 폼 그리드 오버레이 */
.form-grid-readonly{ pointer-events:none; opacity:.85; }
/* ============================================================
메인 대시보드 — 시각 개선 (v2)
============================================================ */
/* ── 1. 통계 타일 (dash-stat-tile) — 틴티드 아이콘 칩 + 뉴트럴 숫자.
상태 색은 칩이 담당, 경고/다운 값은 존재할 때만 색(is-active) ── */
.dash-stat-tile {
background: var(--c-bg);
border-radius: var(--r-card);
border: 1px solid var(--c-border);
box-shadow: var(--shadow-card);
padding: 1.125rem 1.375rem;
display: flex;
align-items: center;
gap: .875rem;
}
.dash-stat-tile .stat-ic {
width: 2.625rem; height: 2.625rem; border-radius: var(--r-lg);
display: flex; align-items: center; justify-content: center; flex-shrink: 0;
background: var(--c-gray-100); color: var(--c-text-secondary);
}
.dash-stat-tile .stat-ic svg { width: 1.25rem; height: 1.25rem; }
.dash-stat-tile.brand .stat-ic { background: var(--c-primary-light); color: var(--c-primary); }
.dash-stat-tile.ok .stat-ic { background: #e7f6ec; color: var(--c-success); }
.dash-stat-tile.warning .stat-ic { background: #fef3c7; color: #b45309; }
.dash-stat-tile.error .stat-ic { background: var(--c-danger-bg); color: var(--c-danger); }
.dash-stat-tile.uptime .stat-ic { background: #e0f2fe; color: #0369a1; }
.dash-stat-tile .stat-body { display: flex; flex-direction: column; gap: .1rem; min-width: 0; }
.dash-stat-tile .stat-label {
font-size: .6875rem;
font-variation-settings: 'wght' var(--fw-bold);
color: var(--c-text-muted);
letter-spacing: .06em;
text-transform: uppercase;
white-space: nowrap;
}
.dash-stat-tile .stat-value {
font-size: 1.75rem;
font-variation-settings: 'wght' var(--fw-extrabold);
color: var(--c-text);
line-height: 1.15;
letter-spacing: -.03em;
font-variant-numeric: tabular-nums;
}
.dash-stat-tile .stat-sub {
font-size: .71875rem;
color: var(--c-text-muted);
white-space: nowrap;
}
/* 값이 0이 아닐 때의 강조는 JS가 .is-active를 붙여 처리(경고/다운 존재 시에만 색) */
.dash-stat-tile.warning.is-active .stat-value { color: #b45309; }
.dash-stat-tile.error.is-active .stat-value { color: var(--c-danger); }
/* 통계 타일 그리드 래퍼 */
.dash-stat-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(11rem, 1fr));
gap: 1rem;
margin-bottom: 1.5rem;
}
/* ── 2. 모니터링 타일 — 호버 리프트 보강 ── */
.main .scroll-box .project-list .item {
transition: box-shadow var(--t-base), transform var(--t-base);
}
.main .scroll-box .project-list .item:hover {
transform: translateY(-2px);
box-shadow: 0 8px 24px rgba(0,0,0,.1);
}
/* figure — 16:9 비율 커버 이미지 */
.main .scroll-box .project-list .item .box figure {
width: 100%;
aspect-ratio: 16/9;
overflow: hidden;
margin: 0;
display: block;
background: var(--c-surface-alt);
}
.main .scroll-box .project-list .item .box figure img {
width: 100%;
height: 100%;
object-fit: cover;
display: block;
}
/* ── 3. 오버레이 상태 배지 — 타일 우상단 ── */
.main .scroll-box .project-list .item .box .tile-status-badge {
position: absolute;
top: .5rem;
right: .5rem;
z-index: 3;
padding: .2rem .55rem;
border-radius: var(--r-pill);
font-size: .625rem;
font-variation-settings: 'wght' var(--fw-bold);
white-space: nowrap;
pointer-events: none;
backdrop-filter: blur(4px);
-webkit-backdrop-filter: blur(4px);
}
.main .scroll-box .project-list .item .box .tile-status-badge.ok { background: rgba(22,163,74,.85); color: #fff; }
.main .scroll-box .project-list .item .box .tile-status-badge.error { background: rgba(239,68,68,.9); color: #fff; }
.main .scroll-box .project-list .item .box .tile-status-badge.warning { background: rgba(161,98,7,.85); color: #fff; }
/* ── 4. 오류 타일 강조 — .server-error-box 보강 ── */
/* common.css의 border:10px solid를 1px로 재정의(두꺼운 테두리가 인접 타일과 겹치던 것 수정) */
.main .scroll-box .project-list .item .box.server-error-box {
border-width: 1px;
border-color: #fecaca;
box-shadow: 0 0 0 1.5px #fecaca inset;
}
.main .scroll-box .project-list .item .box.server-error-box::before {
content: '';
position: absolute;
top: 0; left: 0; right: 0;
height: 3px;
background: #ef4444;
z-index: 4;
pointer-events: none;
}
/* ── 5. 상태 요약 — 컬러 좌측 보더 인디케이터 ── */
.dash-status-summary {
display: flex;
flex-direction: column;
gap: .375rem;
}
.dash-status-row {
display: flex;
align-items: center;
gap: .75rem;
padding: .625rem 1rem;
border-left: 3px solid transparent;
border-radius: 0 var(--r-md) var(--r-md) 0;
background: var(--c-surface-hover);
font-size: .8125rem;
transition: background var(--t-base);
}
.dash-status-row:hover { background: var(--c-primary-light); }
.dash-status-row.ok { border-left-color: #16a34a; }
.dash-status-row.warning { border-left-color: #a16207; }
.dash-status-row.error { border-left-color: #ef4444; }
.dash-status-row .row-label {
flex: 1;
color: var(--c-text);
font-variation-settings: 'wght' var(--fw-medium);
}
.dash-status-row .row-count {
font-variation-settings: 'wght' var(--fw-bold);
color: var(--c-text);
min-width: 1.5rem;
text-align: right;
}
/* ── 6. 빈 상태 — 프로젝트 없음 ── */
.project-list-empty {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: 4rem 1rem;
gap: .75rem;
text-align: center;
}
.project-list-empty .empty-icon {
font-size: 3rem;
line-height: 1;
color: #d0d0d8;
}
.project-list-empty .empty-title {
font-size: 1rem;
font-variation-settings: 'wght' var(--fw-semibold);
color: var(--c-text-secondary);
}
.project-list-empty .empty-desc {
font-size: .8125rem;
color: var(--c-text-muted);
line-height: 1.65;
max-width: 20rem;
}
/* ── 7. 로딩 스켈레톤 ── */
.project-list-skeleton {
display: grid;
grid-template-columns: repeat(4, 1fr);
gap: 1rem;
}
.project-list-skeleton .sk-tile {
border-radius: var(--r-card);
border: 1px solid var(--c-border);
overflow: hidden;
background: var(--c-bg);
}
.project-list-skeleton .sk-thumb {
width: 100%;
aspect-ratio: 16/9;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: sk-shimmer 1.4s infinite;
}
.project-list-skeleton .sk-title {
height: .875rem;
margin: .75rem .875rem .875rem;
border-radius: 4px;
width: 60%;
background: linear-gradient(90deg, #f0f0f0 25%, #e8e8e8 50%, #f0f0f0 75%);
background-size: 200% 100%;
animation: sk-shimmer 1.4s infinite .1s;
}
@keyframes sk-shimmer {
0% { background-position: 200% 0; }
100% { background-position: -200% 0; }
}
/* ── 8. 타일 그리드 컬럼 — i4/i6/i8/i10 ── */
.project-list.i4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 1rem; }
.project-list.i6 { display: grid; grid-template-columns: repeat(6, 1fr); gap: .875rem; }
.project-list.i8 { display: grid; grid-template-columns: repeat(8, 1fr); gap: .75rem; }
.project-list.i10 { display: grid; grid-template-columns: repeat(10, 1fr); gap: .625rem; }
/* ── 조직도 반응형: 좁은 화면에서 트리→테이블→멤버패널 세로 스택 + 테이블 가로 스크롤 ── */
@media (max-width:900px){
.group .group-content{ flex-direction:column; align-items:stretch; }
.group-member{ width:100%; height:auto; min-height:0; margin-top:1rem; }
.org-list-card .flex-ctn{ flex-direction:column; height:auto; }
.org-list-card .org-list{ width:100%; }
.org-list-card .scroll-box{ height:auto; overflow-x:auto; overflow-y:visible; }
.org-list-card .member-list{ width:100%; }
.org-list-card .member-list table{ min-width:40rem; }
}