/* 02-auth.css — 로그인 / 회원가입 오버레이
원본 index.html 581~658줄. 파일 순서 = 캐스케이드 순서이므로 이름 앞 번호를 바꾸지 말 것. */
/* ============================================================
⭐ 로그인 · 회원가입 (슬랙 언어로 다시 씀)
⚠️ **여기가 로그인 화면 모양의 유일한 자리다.** 예전에는 기본형 위에
오로라 + 유리카드 스타일과 그 애니메이션 끄기가 겹겹이 얹혀 있었고,
같은 규칙이 세 파일에 흩어져 있어 무엇이 최종값인지 알 수 없었다. 전부 여기로 모았다.
⭐ 지키는 것 두 가지
① **포털 본화면과 같은 언어** — 색은 토큰에서, 경계는 1px 선, 그림자는 옅게.
로그인만 다른 세계처럼 보이지 않게 한다.
② **비싼 효과를 쓰지 않는다** — `backdrop-filter` · 큰 `blur()` · 훑고 지나가는 빛 없음.
그것들은 **글자를 한 자 칠 때마다** 다시 계산돼 화면이 버벅인다.
============================================================ */
.auth-overlay{
position:fixed; inset:0; z-index:9999;
/* 단색 대신 천천히 흐르는 그라디언트 — 토큰 색만 쓰고 새 색은 만들지 않는다.
transform·blur 없이 background-position 만 움직이므로 입력창과는 겹치지 않아
타이핑 중 다시 계산될 일이 없다(위 원칙 ② 참고). */
background:linear-gradient(135deg, var(--primary) 0%, var(--primary-light) 45%, var(--sk-bg2) 100%);
background-size:220% 220%;
animation:authBgMove 24s ease-in-out infinite;
display:none; align-items:center; justify-content:center; gap:56px;
padding:40px; overflow:auto;
}
.auth-overlay.show, .auth-overlay[style*="flex"]{ display:flex; }
@keyframes authBgMove{
0%,100%{ background-position:0% 30%; }
50%{ background-position:100% 70%; }
}
@media (prefers-reduced-motion: reduce){
.auth-overlay{ animation:none; }
}
/* ---------- 왼쪽 — 무엇을 하는 곳인지 ---------- */
.auth-hero{ max-width:380px; flex:none; color:var(--text); }
/* 레일 맨 위의 `JS` 상자와 같은 것이다. 같은 토큰을 쓴다. */
.auth-hero .mark{
width:52px; height:52px; border-radius:var(--sk-r); display:grid; place-items:center;
margin-bottom:22px; background:var(--rail-bg); color:#fff;
font-size:var(--fs-7); font-weight:800; letter-spacing:.02em;
}
.auth-hero h2{
font-size:30px; font-weight:800; line-height:1.3; margin:0 0 14px;
letter-spacing:-.4px; color:var(--text);
}
.auth-hero p{ font-size:var(--fs-5); line-height:1.8; margin:0; color:var(--muted); }
.auth-hero .hero-chips{ display:flex; gap:var(--sp-2); margin-top:24px; flex-wrap:wrap; }
.auth-hero .hero-chips span{
font-size:var(--fs-2); font-weight:700; padding:5px 11px; border-radius:999px;
color:var(--primary); background:var(--primary-light);
border-width:1px; border-style:solid; border-color:var(--line-soft);
}
/* ⭐ 알약을 서로 다른 색으로.
색은 01-tokens.css 의 갈래 색(--cat-*)에서만 고른다. 새 색을 만들지 않는다.
바탕을 카드색으로 두고 글자와 테두리만 갈라 다섯이 나란히 있어도 서로 안 잡아먹는다. */
.auth-hero .hero-chips span[data-c]{ background:var(--card); }
.auth-hero .hero-chips span[data-c="1"]{ color:var(--cat-1); border-color:var(--cat-1); }
.auth-hero .hero-chips span[data-c="2"]{ color:var(--cat-2); border-color:var(--cat-2); }
.auth-hero .hero-chips span[data-c="3"]{ color:var(--cat-3); border-color:var(--cat-3); }
.auth-hero .hero-chips span[data-c="4"]{ color:var(--cat-4); border-color:var(--cat-4); }
.auth-hero .hero-chips span[data-c="5"]{ color:var(--cat-5); border-color:var(--cat-5); }
/* ---------- 오른쪽 — 입력 카드 ---------- */
.auth-card{
flex:none; width:404px; max-width:100%; background:var(--card);
border-width:1px; border-style:solid; border-color:var(--line);
border-radius:var(--sk-r); box-shadow:0 6px 20px rgba(22,34,60,.08);
padding:30px 30px 26px;
}
.auth-brand{ font-size:var(--fs-7); font-weight:800; text-align:center; color:var(--text); letter-spacing:-.3px; }
.auth-sub{ font-size:var(--fs-2); color:var(--muted); text-align:center; margin:6px 0 20px; line-height:1.6; }
.auth-tabs{
display:flex; gap:var(--sp-2); background:var(--sk-bg2); border-radius:var(--sk-r-sm);
padding:4px; margin-bottom:6px;
}
.auth-tab{
flex:1; border-width:0; background:transparent; padding:9px 0; border-radius:var(--sk-r-sm);
font-size:var(--fs-4); font-weight:700; color:var(--muted); cursor:pointer; font-family:inherit;
}
.auth-tab.active{ background:var(--card); color:var(--primary); box-shadow:0 1px 3px rgba(22,34,60,.10); }
.auth-form label{ display:block; font-size:var(--fs-2); font-weight:700; color:var(--muted); margin:14px 0 5px; }
.auth-form input[type=text], .auth-form input[type=email], .auth-form input[type=password]{
width:100%; box-sizing:border-box; height:42px; padding:10px 12px;
border-width:1px; border-style:solid; border-color:var(--line);
border-radius:var(--sk-r-sm); background:var(--card); color:var(--text);
font-size:var(--fs-4); font-family:inherit;
}
.auth-form input:focus{
outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(76,100,166,.15);
}
.auth-row{ display:flex; gap:var(--sp-4); }
.auth-row > div{ flex:1; min-width:0; }
.auth-submit{
width:100%; margin-top:18px; height:44px; border-width:0; border-radius:var(--sk-r-sm);
background:var(--primary); color:#fff; font-size:var(--fs-5); font-weight:800;
cursor:pointer; font-family:inherit;
}
.auth-submit:hover:not(:disabled){ background:var(--sk-shell-2); }
.auth-submit:disabled{ opacity:.55; cursor:default; }
/* ⭐ 212차(C-083) — TOTP 단계의 [뒤로] 버튼. 확인 버튼(가득 찬 색)과 갈라 보이게 테두리만 준다. */
.auth-submit.secondary{
margin-top:8px; background:transparent; color:var(--muted);
border-width:1px; border-style:solid; border-color:var(--line);
}
.auth-submit.secondary:hover:not(:disabled){ background:var(--sk-bg2); color:var(--text); }
.auth-msg{ margin-top:12px; font-size:var(--fs-3); min-height:17px; text-align:center; line-height:1.55; }
.auth-msg.err{ color:var(--negative); }
.auth-msg.ok{ color:var(--positive); }
.auth-rules{ margin-top:7px; display:flex; gap:var(--sp-5); font-size:var(--fs-1); color:var(--muted); }
.auth-rules span::before{ content:'\25CB '; }
.auth-rules span.hit{ color:var(--positive); font-weight:700; }
.auth-rules span.hit::before{ content:'\25CF '; }
.auth-note{
margin-top:16px; padding:11px 13px; border-radius:var(--sk-r-sm);
background:var(--primary-light); color:var(--primary);
border-width:1px; border-style:solid; border-color:var(--line-soft);
font-size:var(--fs-2); line-height:1.65;
}
/* ⭐ 212차(C-083) — 외부 접속 2차 인증(TOTP) 단계. 로그인/가입 카드와 같은 폭·같은 언어를 쓴다. */
.auth-totp-head{ font-size:var(--fs-3); color:var(--text); font-weight:700; line-height:1.6; margin-bottom:2px; text-align:center; }
.auth-totp-qr{ display:flex; justify-content:center; margin:10px 0; }
/* ⭐ 212차 후속 — 고정 172px 로 줄여 그렸더니 모듈 하나가 화면에서 몇 픽셀 안 돼 카메라가
QR 자체를 못 찾았다. ⚠️ `width:auto`(자연 크기)로 바꿔 봤다가 더 나쁜 사고를 냈다 —
`.auth-totp-qr` 가 `display:flex` 라 SVG 가 flex 자식일 때 `auto` 폭이 내용 크기로
안 잡히고 거의 0(2px)으로 찌부러졌다(실제 브라우저로 재서 잡았다). **고정 픽셀 값**으로
명시한다 — 원본(js/00-qrcode.js 의 cell=8) 자체를 이미 크게 그리므로 줄어들 일이 없다. */
.auth-totp-qr svg{ width:280px; height:280px; border-radius:var(--sk-r-sm); border:1px solid var(--line); }
.auth-totp-secret{
margin-top:10px; padding:12px; border-radius:var(--sk-r-sm); text-align:center;
background:var(--sk-bg2); border-width:1px; border-style:solid; border-color:var(--line);
font-family:ui-monospace,SFMono-Regular,Menlo,Consolas,monospace;
font-size:var(--fs-5); font-weight:800; letter-spacing:2px; color:var(--text); word-break:break-all;
}
#authTotpForm #totpCode{ text-align:center; letter-spacing:6px; font-size:var(--fs-6); font-weight:800; }
/* 화면이 좁으면 왼쪽 설명을 접고 카드만 남긴다 */
@media (max-width:900px){
.auth-overlay{ gap:0; padding:24px; }
.auth-hero{ display:none; }
}
.user-wrap{ position:relative; display:inline-block; }
.user-chip{ display:inline-flex; align-items:center; gap:var(--sp-3); padding:0 13px; height:38px; border-radius:var(--radius-md);
border:1px solid var(--border); background:#fff; cursor:pointer; font-family:inherit; font-size:var(--fs-3); font-weight:700; color:#1f2328; }
.user-chip .u-badge{ font-size:10px; font-weight:800; padding:2px 6px; border-radius:var(--radius-sm);
background:var(--surface2); color:var(--muted); }
.user-chip .u-badge.admin{ background:#fee2e2; color:#b91c1c; }
.user-menu{ position:absolute; right:0; top:calc(100% + 6px); min-width:200px; background:#fff;
border:1px solid var(--border); border-radius:var(--radius-md); box-shadow:0 10px 30px rgba(0,0,0,.13);
padding:6px; display:none; z-index:300; }
.user-menu.open{ display:block; }
.user-menu button{ display:block; width:100%; text-align:left; border:0; background:transparent; padding:9px 11px;
border-radius:var(--radius-md); font-size:var(--fs-3); font-family:inherit; cursor:pointer; color:#1f2328; }
.user-menu button:hover{ background:var(--surface2); }
.user-menu .um-head{ padding:8px 11px 9px; font-size:var(--fs-1); color:var(--muted); line-height:1.5; }
.user-menu .sep{ height:1px; background:var(--border); margin:5px 0; }
/* 여기 있던 .adm-modal / .adm-box / .adm-head / .adm-title / .adm-body 는
환경설정 창(.set-modal, 이 파일 맨 뒤)으로 옮겨 갔다. 쓰는 곳이 없어 지웠다.
아래 .adm-sec · .adm-table · .adm-b · .adm-tag · .adm-x 는 그 창 안에서 계속 쓴다. */
.adm-x{ border:0; background:var(--surface2); width:28px; height:28px; border-radius:var(--radius-md); cursor:pointer;
font-size:var(--fs-5); line-height:1; color:var(--muted); font-family:inherit; }
.adm-sec{ font-size:var(--fs-2); font-weight:800; color:var(--muted); margin:18px 0 8px; }
.adm-sec:first-child{ margin-top:0; }
.adm-table{ width:100%; border-collapse:collapse; font-size:var(--fs-3); }
.adm-table th{ text-align:left; font-weight:700; color:var(--muted); font-size:var(--fs-1);
padding:7px 8px; border-bottom:1px solid var(--border); white-space:nowrap; }
.adm-table td{ padding:8px; border-bottom:1px solid var(--border-soft); vertical-align:middle; }
.adm-table tr.pending td{ background:#fffbeb; }
.adm-table tr.suspended td{ opacity:.55; }
.adm-b{ border:1px solid var(--border); background:#fff; border-radius:var(--radius-md); padding:4px 9px; font-size:var(--fs-1);
font-weight:700; cursor:pointer; font-family:inherit; margin-right:4px; color:#1f2328; }
.adm-b:hover{ background:var(--surface2); }
.adm-b.pri{ background:var(--primary); border-color:var(--primary); color:#fff; }
.adm-b.dan{ background:#fff; border-color:#fecaca; color:#dc2626; }
.adm-tag{ font-size:var(--fs-1); font-weight:800; padding:2px 6px; border-radius:var(--radius-sm); background:var(--surface2); color:var(--muted); }
.adm-tag.admin{ background:#fee2e2; color:#b91c1c; }
.adm-tag.pending{ background:#fef3c7; color:#92400e; }
.adm-tag.suspended{ background:#e5e7eb; color:#4b5563; }
.adm-empty{ padding:22px; text-align:center; color:var(--muted); font-size:var(--fs-3); }
/* ===== 118차 · 창섭 V1.7-1 — 환경설정의 [승인자 지정] (슈퍼 관리자 전용) =====
되돌리려면 이 블록만 지운다. 환경설정 창은 셸 소유라 규칙도 여기 둔다.
⚠️ 테두리는 롱핸드로 쓴다 — 축약형 안의 미정의 var() 가 선언 전체를 죽인 사고가 있었다. */
.adm-note{ font-size:var(--fs-2); color:var(--muted); line-height:1.6; margin:0 0 10px; }
.adm-note.warn{ color:#92400e; background:#fef3c7; padding:8px 10px;
border-radius:var(--radius-md); font-weight:700; }
.apv-list{ display:flex; flex-wrap:wrap; gap:5px; align-items:center; }
.apv-chip{ display:inline-flex; align-items:center; gap:5px;
background:var(--surface2); border-radius:999px; padding:3px 4px 3px 10px;
font-size:var(--fs-2); font-weight:700; color:var(--text); }
.apv-chip .apv-org{ font-weight:500; color:var(--muted); font-size:var(--fs-1); }
.apv-x{ border:0; background:none; cursor:pointer; color:var(--muted);
font-size:var(--fs-3); line-height:1; padding:0 5px; font-family:inherit; }
.apv-x:hover{ color:#dc2626; }
.apv-none{ color:#92400e; font-size:var(--fs-2); font-weight:700; }
.adm-table tr.apv-warn td{ background:#fffbeb; }
.apv-add{ font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--text);
border-width:1px; border-style:solid; border-color:var(--border);
border-radius:var(--radius-sm); padding:3px 5px; background:#fff; max-width:170px; }
/* ===== 회원가입의 사업부 · 팀 드롭다운 =====
자유 입력 칸 하나가 고르는 칸 두 개로 바뀌었다.
⚠️ 값은 06-overrides.css 가 입력칸에 다시 씌운 것(높이 44 · 큰 모서리 · 반투명 흰 면)에 맞췄다.
그 파일이 뒤에 오지만 select 를 건드리지 않으므로 여기서 최종값을 그대로 적는다.
되돌리려면 이 블록만 지운다. */
/* 위 입력칸과 같은 모양으로 맞췄다. 예전 유리 스타일을 걷어내면서 여기만 남으면 어긋난다. */
.auth-form select{
width:100%; box-sizing:border-box; height:42px; padding:10px 12px;
border-width:1px; border-style:solid; border-color:var(--line);
border-radius:var(--sk-r-sm);
font-size:var(--fs-4); font-family:inherit; background:var(--card); color:var(--text);
cursor:pointer;
}
.auth-form select:focus{ outline:none; border-color:var(--primary); box-shadow:0 0 0 3px rgba(76,100,166,.15); }
/* 고른 결과를 한 줄로 되짚어 준다 — 가입 뒤에는 본인이 못 바꾸므로 내기 전에 확인시킨다 */
.auth-form .auth-org-view{
box-sizing:border-box; height:42px; padding:10px 12px;
border-width:1px; border-style:solid; border-color:var(--line);
border-radius:var(--sk-r-sm);
background:var(--sk-bg2); color:var(--muted); font-size:var(--fs-4); font-weight:700;
white-space:nowrap; overflow:hidden; text-overflow:ellipsis;
}
/* 계정 관리 표에서 소속을 바꾸는 칸 (관리자 전용) */
.adm-org{ display:flex; gap:var(--sp-1); align-items:center; flex-wrap:wrap; }
.adm-org select{
font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--text);
border-width:1px; border-style:solid; border-color:var(--border); border-radius:var(--radius-sm);
padding:2px 4px; background:#fff; max-width:104px;
}
.adm-org .adm-org-ro{ font-size:var(--fs-2); color:var(--muted); }
/* 계정 관리 표에서 직급을 바꾸는 칸 (관리자 전용) */
.adm-rank{ display:flex; align-items:center; }
.adm-rank select{
font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--text);
border-width:1px; border-style:solid; border-color:var(--border); border-radius:var(--radius-sm);
padding:2px 4px; background:#fff; max-width:74px;
}
.adm-rank-ro{ font-size:var(--fs-2); color:var(--muted); }
/* ⭐ 계정 관리 표의 연락처 칸 */
.adm-ph{ display:inline-flex; align-items:center; }
.adm-ph input{
font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--text);
border-width:1px; border-style:solid; border-color:var(--border); border-radius:var(--radius-sm);
padding:2px 5px; background:#fff; width:104px;
}
.adm-ph-ro{ font-size:var(--fs-2); color:var(--muted); }
/* ⭐ 185차(C-066) — 「화면 이름」 탭의 레일·패널 이름 입력칸(.adm-ph input 과 같은 모양) */
.lbl-in{
font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--text);
border-width:1px; border-style:solid; border-color:var(--border); border-radius:var(--radius-sm);
padding:2px 5px; background:#fff; width:160px;
}
.lbl-in:disabled{ background:var(--bg); color:var(--muted); }
/* ⭐ 186차(C-067) — 「화면 보임」 탭의 추가/예외 사람 목록 위 작은 이름표 */
.vis-sub{ font-size:var(--fs-2); color:var(--muted); font-weight:700; margin:4px 0 2px; }
.vis-sub:first-child{ margin-top:0; }
/* ⭐ 고르는 창을 여는 자리와 고른 사람 한 줄 */
.adm-pick{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:6px; }
.adm-pick-out{ font-size:var(--fs-2); font-weight:700; color:var(--muted); }
/* ⭐ 인사 구조 트리 창.
환경설정 창 위에 뜨므로 그보다 높은 자리에 둔다. 크기를 못박아 사람이 늘어도 창은 그대로다. */
.opk-back{
position:fixed; inset:0; z-index:1200; display:flex; align-items:center; justify-content:center;
background:rgba(0,0,0,.34);
}
.opk-win{
width:460px; max-width:94vw; height:520px; max-height:86vh; display:flex; flex-direction:column;
background:var(--card); border-radius:var(--radius-lg); box-shadow:var(--shadow-md); overflow:hidden;
}
.opk-head{
display:flex; align-items:center; gap:var(--sp-4); padding:13px 16px;
border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--border);
}
.opk-title{ font-size:var(--fs-5); font-weight:800; flex:1; min-width:0; }
.opk-x{
border-width:0; background:transparent; color:var(--muted); cursor:pointer;
font-size:var(--fs-6); line-height:1; padding:2px 6px; border-radius:var(--radius-sm);
}
.opk-x:hover{ background:var(--surface2); color:var(--text); }
.opk-body{ flex:1; min-height:0; overflow:auto; padding:10px 12px; }
/* 층마다 왼쪽으로 한 칸씩 들어간다 */
.opk-node.lv1{ margin-left:10px; }
.opk-node.lv2{ margin-left:10px; }
.opk-h{
display:flex; align-items:center; gap:var(--sp-2); width:100%; text-align:left;
font-family:inherit; font-size:var(--fs-3); font-weight:700; color:var(--text);
background:transparent; border-width:0; border-radius:var(--radius-sm); padding:5px 7px; cursor:pointer;
}
.opk-h:hover{ background:var(--row-hover); }
.opk-co{ cursor:default; font-weight:800; font-size:var(--fs-5); }
.opk-co:hover{ background:transparent; }
.opk-n{ flex:1; min-width:0; }
.opk-c{ font-size:var(--fs-1); font-weight:700; color:var(--muted); }
.opk-ar{ color:var(--muted); font-size:var(--fs-1); }
.opk-node:not(.open) > .opk-h > .opk-ar{ display:inline-block; transform:rotate(-90deg); }
.opk-p{
display:flex; align-items:baseline; gap:var(--sp-3); width:100%; text-align:left;
font-family:inherit; font-size:var(--fs-2); color:var(--text); cursor:pointer;
background:transparent; border-width:0; border-radius:var(--radius-sm); padding:5px 7px 5px 24px;
}
.opk-p:hover{ background:var(--primary-light); }
.opk-pn{ font-weight:700; }
.opk-pm{ flex:1; min-width:0; color:var(--muted); font-size:var(--fs-1); overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }
.opk-pp{ color:var(--muted); font-size:var(--fs-1); white-space:nowrap; }
/* ⭐ 159차 · 창섭 C-042 ② — 여러 명을 한 번에 고르는 모드.
사람 줄이 체크 상자가 되고 맨 아래에 「고른 수 + [추가]」 줄이 붙어 따라다닌다.
한 명만 고르는 자리(계정 관리)는 지금 모양 그대로다. */
.opk-p.multi{ cursor:pointer; }
.opk-p input[type=checkbox]{
margin:0; width:14px; height:14px; flex:0 0 14px; accent-color:var(--primary); cursor:pointer;
}
.opk-foot{
position:sticky; bottom:0; display:flex; align-items:center; gap:var(--sp-3);
background:var(--card); margin-top:8px; padding:9px 2px 2px;
border-top-width:1px; border-top-style:solid; border-top-color:var(--border);
}
.opk-selc{ flex:1; min-width:0; font-size:var(--fs-2); font-weight:700; color:var(--muted); }
/* ⭐ 159차 · 창섭 C-042 ③ — 계정 일괄등록(CSV) */
.adm-csv{ display:flex; align-items:center; gap:var(--sp-3); flex-wrap:wrap; margin-bottom:6px; }
.adm-csv input[type=file]{ font-family:inherit; font-size:var(--fs-2); max-width:260px; }
.adm-csv-head{
font-family:monospace; font-size:var(--fs-1); color:var(--muted);
background:var(--surface2); border-radius:var(--radius-sm); padding:3px 7px;
}
.adm-csv-res{ margin-top:8px; }
.adm-csv-res .ok{ color:var(--positive); font-weight:700; }
.adm-csv-res .bad{ color:var(--negative); font-weight:700; }
.adm-csv-pw{ font-family:monospace; font-weight:700; }
/* ⭐ 계정 관리 표에서 관리 등급을 고르는 칸 (슈퍼 관리자에게만 보인다) */
.adm-role{ display:inline-flex; align-items:center; margin-right:var(--sp-1); }
.adm-role select{
font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--text);
border-width:1px; border-style:solid; border-color:var(--border); border-radius:var(--radius-sm);
padding:2px 4px; background:#fff; max-width:96px;
}
/* ⭐ 계정 목록을 사업부 → 팀 → (메일사업본부·기술팀일 때만) 하위팀 순으로 접는다(C-077 · 198차) */
.adm-grp{ margin-bottom:10px; }
.adm-grp-h{
display:flex; align-items:center; gap:var(--sp-2); width:100%; cursor:pointer;
font-family:inherit; font-size:var(--fs-2); font-weight:800; color:var(--text); text-align:left;
background:var(--surface2); border-width:1px; border-style:solid; border-color:var(--border);
border-radius:var(--radius-md); padding:6px 10px;
}
.adm-grp-h:hover{ background:var(--row-hover); }
.adm-grp-t{ flex:1; min-width:0; }
.adm-grp-n{ font-weight:700; color:var(--muted); font-size:var(--fs-1); }
.adm-grp-ar{ color:var(--muted); font-size:var(--fs-1); }
.adm-grp.fold .adm-grp-ar{ display:inline-block; transform:rotate(-90deg); }
.adm-grp-b{ padding-top:6px; }
/* 팀(2단) · 하위팀(3단)은 한 단씩 들여써 사업부 밑에 속한 것임을 보여준다. 머리글 크기도 살짝 낮춘다. */
.adm-grp-l2{ margin-left:14px; }
.adm-grp-l3{ margin-left:28px; }
.adm-grp-l2 > .adm-grp-h, .adm-grp-l3 > .adm-grp-h{ font-size:var(--fs-1); background:transparent; border-color:var(--border-soft); }
/* ⭐ 목록 줄을 누르면 상세 모달이 뜬다(C-077) */
.adm-row-click{ cursor:pointer; }
.adm-row-click:hover td{ background:var(--row-hover); }
/* ⭐ 계정 상세 모달 — 인사 구조 트리 창과 같은 얼개(.opk-*)를 쓰고, 너비만 넓힌다. */
.adm-detail-win{ width:520px; }
.adm-detail{ display:flex; flex-direction:column; gap:2px; }
.adm-drow{ display:flex; align-items:center; gap:var(--sp-3); padding:7px 2px; border-bottom:1px solid var(--border-soft); flex-wrap:wrap; }
.adm-drow:last-child{ border-bottom:none; }
.adm-dlabel{ width:88px; flex:none; font-size:var(--fs-1); font-weight:700; color:var(--muted); }
.adm-dacts{ display:flex; align-items:center; gap:var(--sp-2); flex-wrap:wrap; margin-top:4px; }
/* ⭐ 승인자를 한 번에 여러 명 고르는 칸 */
.apv-add[multiple]{
font-family:inherit; font-size:var(--fs-1); font-weight:700; color:var(--text);
border-width:1px; border-style:solid; border-color:var(--border); border-radius:var(--radius-sm);
padding:2px 4px; background:#fff; min-width:170px; max-width:220px; display:block;
}
.apv-addb{ margin-top:var(--sp-1); }
.apv-hint{ font-size:var(--fs-1); color:var(--muted); margin-top:2px; }
/* 본인 소속은 읽기 전용이라는 것을 한 줄로 알려 준다 */
.user-menu .um-head .um-org-note{ color:var(--muted); opacity:.85; }
/* ===== 환경설정 플로팅 창 (Slack 방식) =====
⭐ 고정 크기다. 화면이 커져도 늘어나지 않고, 넘치는 것은 오른쪽 본문 안에서만 굴러간다.
화면이 작을 때만 잘리지 않도록 위아래 24px 을 남기는 상한을 둔다.
되돌리려면 이 블록만 지운다. */
.set-modal{ position:fixed; inset:0; background:rgba(15,18,24,.45); display:none;
align-items:center; justify-content:center; z-index:520; padding:24px; }
/* ⭐ 159차 · 창섭 C-042 ① — 창이 너무 작아 30% 키웠다.
가로 940 → 1222 · 세로 620 → 806 (둘 다 1.3배라 비율은 그대로다).
⚠️ 화면이 낮으면 아래 `max-height` 가 먼저 잘라 준다 — FHD(1080) 에서도 창이 밖으로 안 나간다.
왼쪽 목록도 같은 배로 키워야 좌우 비율이 유지된다(212 → 276). */
.set-box{
width:1222px; height:806px; max-width:100%; max-height:calc(100vh - 48px);
background:#fff; border-radius:var(--radius-lg); box-shadow:0 22px 60px rgba(0,0,0,.22);
display:flex; overflow:hidden;
}
/* 왼쪽 — 항목 목록. 포털 패널과 같은 밝은 회색을 쓴다(DESIGN.md 3-4절) */
.set-side{
width:276px; flex:0 0 276px; background:var(--sk-side); color:var(--sk-side-tx);
padding:16px 10px; overflow-y:auto;
border-right-width:1px; border-right-style:solid; border-right-color:var(--sk-side-line);
}
.set-brand{ font-size:var(--fs-6); font-weight:800; padding:2px 10px 12px; }
.set-grp{ font-size:var(--fs-1); font-weight:800; color:var(--muted); padding:12px 10px 5px; }
.set-t{
display:block; width:100%; text-align:left; border:0; background:transparent;
padding:7px 10px; border-radius:var(--radius-sm); cursor:pointer;
font-family:inherit; font-size:var(--fs-3); font-weight:500; color:var(--sk-side-tx);
}
.set-t:hover{ background:var(--sk-side-hover); }
.set-t.active{ background:var(--sk-pick); color:#fff; font-weight:700; }
/* 오른쪽 — 제목 줄은 고정, 본문만 굴러간다 */
.set-main{ flex:1; min-width:0; display:flex; flex-direction:column; }
.set-head{
display:flex; align-items:center; gap:var(--sp-4); padding:17px 20px;
border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--border);
}
.set-title{ font-size:var(--fs-6); font-weight:800; flex:1; }
.set-body{ flex:1; min-height:0; overflow:auto; padding:18px 20px; }
.set-body .auth-form{ max-width:360px; }
/* 읽기 전용 항목 한 줄 */
.set-row{ display:flex; gap:var(--sp-4); align-items:baseline; padding:7px 0;
border-bottom-width:1px; border-bottom-style:solid; border-bottom-color:var(--line-soft); }
.set-row:last-child{ border-bottom-width:0; }
.set-k{ width:120px; flex:0 0 120px; font-size:var(--fs-2); font-weight:700; color:var(--muted); }
.set-v{ flex:1; min-width:0; font-size:var(--fs-3); color:var(--text); word-break:break-all; }
.set-note{ display:block; font-size:var(--fs-1); color:var(--muted); font-weight:500; margin-top:2px; }
/* 로그 레일의 .log- 와 이름이 겹쳐 헷갈리므로 로그인(lgn) 쪽으로 바꿨다. */
.lgn-ok{ color:var(--positive); font-weight:700; }
.lgn-bad{ color:var(--negative); font-weight:700; }