/* public/style.css — 웰팜 HR 플랫폼 공통 스타일 */
@import url("https://cdn.jsdelivr.net/gh/orioncactus/pretendard@v1.3.9/dist/web/variable/pretendardvariable-dynamic-subset.min.css");
:root{
  --dark:#04342C; --mid:#0F6E56; --mint:#E1F5EE; --mint-soft:#F0FBF6;
  --amber-bg:#FEF3C7; --amber-text:#92400E;
  --red-bg:#FCE8E6; --red-text:#C00000;
  --blue-bg:#EFF6FF; --blue-text:#1E40AF;
  --ink:#111827; --muted:#6B7280; --border:#E4E9E7; --bg:#F6F9F8; --white:#FFFFFF;
}
*{box-sizing:border-box;}
body{
  margin:0; background:var(--bg); color:var(--ink);
  font-family:"Pretendard Variable",Pretendard,-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Segoe UI","Noto Sans KR","Malgun Gothic",sans-serif;
  font-size:14px; line-height:1.5;
  font-feature-settings:"tnum" 1, "cv01" 1; /* 숫자 폭을 고정폭으로 — 표/통계 숫자가 자리마다 깔끔하게 정렬됨 */
  font-variant-numeric: tabular-nums;
  -webkit-font-smoothing:antialiased; text-rendering:optimizeLegibility;
}
a{color:inherit;text-decoration:none;}
/* 큰 숫자(통계 카드, 도넛 중앙 합계 등)는 살짝 더 또렷하게 */
.stat .num, #jdDonut text, .card-title, th{ letter-spacing:-.01em; }

.app-shell{ display:flex; min-height:100vh; }
.sidebar{
  width:200px; flex-shrink:0; background:var(--dark); color:#fff;
  display:flex; flex-direction:column; padding:18px 12px; position:sticky; top:0; height:100vh;
}
.side-brand{ display:flex; align-items:center; gap:8px; padding:0 4px 18px; }
.side-brand .mark{ width:26px; height:26px; border-radius:7px; background:var(--mid);
  display:flex; align-items:center; justify-content:center; font-weight:800; font-size:12px; flex-shrink:0;}
.side-brand .t1{ font-size:12.5px; font-weight:800; letter-spacing:.02em; }
.side-brand .t2{ font-size:10px; color:#9FE1CB; margin-top:1px; }
.side-nav{ display:flex; flex-direction:column; gap:2px; }
.side-item{
  display:flex; align-items:center; justify-content:space-between; gap:6px;
  padding:9px 10px; border-radius:8px; font-size:12px; color:#D7E9E2; font-weight:600;
}
.side-item:hover{ background:rgba(255,255,255,.06); }
.side-item.active{ background:var(--mid); color:#fff; }
.side-item.disabled{ color:#6E9B8C; cursor:default; }
/* 작성가이드는 위 메뉴들과 성격이 달라 한 칸 띄우고 노란 글씨로 구분 */
.side-item-guide{ margin-top:18px; color:#FFD666; }
.side-item-guide:hover{ background:rgba(255,214,102,.12); color:#FFE08A; }
.side-item-guide.active{ background:rgba(255,214,102,.18); color:#FFE08A; }
.side-item .soon{ font-size:8.5px; background:rgba(255,255,255,.12); color:#9FE1CB; padding:1px 6px; border-radius:20px; font-weight:700;}
.side-foot{ margin-top:auto; font-size:10.5px; color:#7FB7A4; line-height:1.7; padding:0 4px; }
.side-foot .acct{ background:rgba(255,255,255,.08); border-radius:10px; padding:10px; margin-bottom:8px; }
.side-foot .acct .name{ color:#fff; font-weight:700; font-size:12px; }
.pw-input{ width:100%; box-sizing:border-box; border:1px solid rgba(255,255,255,.25); background:rgba(255,255,255,.08);
  color:#fff; border-radius:6px; padding:6px 8px; font-size:11px; margin-bottom:5px; }
.pw-input::placeholder{ color:rgba(255,255,255,.5); }

.main-col{ flex:1; min-width:0; display:flex; flex-direction:column; }

.topbar{
  background:#fff; color:var(--dark); border-bottom:1px solid var(--border); padding:12px 22px;
  display:flex; align-items:center; justify-content:space-between; gap:16px;
  position:sticky; top:0; z-index:20;
}
#pageTitle{ font-weight:800; font-size:14.5px; }
.topbar .right{ display:flex; align-items:center; gap:10px; font-size:12px;}
.pill{ background:var(--mint-soft); color:var(--mid); border:1px solid var(--mint); padding:5px 12px; border-radius:20px; font-weight:700;}
.btn{
  border:none; cursor:pointer; font-family:inherit; font-weight:700; font-size:12.5px;
  padding:8px 14px; border-radius:8px; transition:transform .08s ease, opacity .15s ease;
}
.btn:active{ transform:scale(.97); }
.btn-primary{ background:var(--dark); color:#fff; }
.btn-primary:hover{ background:#0a4a3d; }
.btn-ghost{ background:#fff; color:var(--dark); border:1px solid var(--border); }
.btn-ghost:hover{ background:var(--mint-soft); }
.btn-light{ background:rgba(255,255,255,.15); color:#fff; }
.btn-light:hover{ background:rgba(255,255,255,.25); }
.btn-danger{ background:var(--red-bg); color:var(--red-text); }

.content{ padding:22px 24px 60px; max-width:1200px; margin:0 auto; width:100%; }
.card{
  background:#fff; border:1px solid var(--border); border-radius:14px;
  padding:20px 22px; margin-bottom:18px; box-shadow:0 1px 2px rgba(4,52,44,.03);
}
.card-title{ font-size:14px; font-weight:800; color:var(--dark); margin:0 0 14px; display:flex; align-items:center; gap:8px; flex-wrap:wrap;}
.card-title .actions{ margin-left:auto; display:flex; align-items:center; gap:8px; }

.banner{
  background:var(--amber-bg); color:var(--amber-text); font-size:12px; font-weight:600;
  padding:9px 14px; border-radius:9px; margin-bottom:18px;
}
.toast{
  position:fixed; bottom:22px; left:50%; transform:translateX(-50%) translateY(20px);
  background:var(--dark); color:#fff; padding:10px 18px; border-radius:10px; font-size:12.5px;
  font-weight:600; opacity:0; pointer-events:none; transition:all .25s ease; z-index:100;
  box-shadow:0 8px 24px rgba(0,0,0,.18);
}
.toast.show{ opacity:1; transform:translateX(-50%) translateY(0); }
.toast.error{ background:var(--red-text); }

/* 로그인 */
.login-wrap{ min-height:80vh; display:flex; align-items:center; justify-content:center; }
.login-card{ background:#fff; border:1px solid var(--border); border-radius:16px; padding:36px 32px; width:340px; }
.login-card h1{ font-size:18px; margin:0 0 4px; color:var(--dark);}
.login-card p{ font-size:12px; color:var(--muted); margin:0 0 22px;}
.field{ margin-bottom:14px; }
.field label{ display:block; font-size:11px; color:var(--muted); font-weight:700; margin-bottom:5px;}
.field input, .field select{
  width:100%; border:1px solid var(--border); border-radius:8px; padding:9px 11px;
  font-family:inherit; font-size:13px; color:var(--ink); background:#fbfdfc;
}
.field input:focus, .field select:focus{ outline:none; border-color:var(--mid); background:#fff; }
.err-msg{ color:var(--red-text); font-size:12px; margin:6px 0 0; min-height:16px; }

/* 팀 목록 */
.team-grid{ display:grid; grid-template-columns:repeat(auto-fill,minmax(240px,1fr)); gap:14px; }
.team-card{
  background:#fff; border:1px solid var(--border); border-radius:12px; padding:16px 18px;
  cursor:pointer; transition:box-shadow .15s ease, transform .1s ease;
}
.team-card:hover{ box-shadow:0 4px 14px rgba(4,52,44,.1); transform:translateY(-2px); }
.team-card.pending{ opacity:.45; cursor:default; background:#FAFBFB; border-style:dashed; }
.team-card.pending:hover{ box-shadow:none; transform:none; }

/* 작성가이드 전용 강조 스타일 */
.guide-hero{ background:var(--dark); color:#fff; border-radius:14px; padding:22px 24px; margin-bottom:18px; }
.guide-hero h2{ margin:0 0 6px; font-size:17px; }
.guide-hero p{ margin:0; font-size:12.5px; color:#9FE1CB; }
.guide-sec-title{ background:var(--mid); color:#fff; font-weight:800; font-size:13px;
  padding:9px 14px; border-radius:9px; margin:0 0 12px; display:flex; align-items:center; gap:8px; }
.guide-table td:first-child{ background:var(--dark)!important; color:#fff!important; font-weight:700;
  width:170px; white-space:normal; font-size:12px; vertical-align:middle; }
.guide-table td:last-child{ white-space:normal; font-size:12.5px; background:#fff; }
.guide-table tr:hover td:last-child{ background:var(--mint-soft); }
.guide-key{ color:var(--mid); font-weight:700; }
.team-card .id{ font-family:inherit; font-size:10.5px; color:var(--mid); font-weight:700; }
.team-card h3{ margin:4px 0 6px; font-size:15px; color:var(--dark); }
.team-card p{ margin:0; font-size:11.5px; color:var(--muted); }

/* 조직도 */
.org-team-box{
  background:var(--mid); color:#fff; text-align:center; padding:16px; border-radius:12px;
  font-weight:800; font-size:15px; margin-bottom:16px; line-height:1.6;
}
.org-members{ display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px; }
.org-member{ border:1px solid var(--border); border-radius:12px; overflow:hidden; }
.org-member .hd{ background:var(--dark); color:#fff; padding:12px 14px; font-weight:800; font-size:13px; text-align:center;}
.org-member .hd small{ display:block; font-weight:500; font-size:11px; opacity:.85; margin-top:2px;}
.org-member ul{ list-style:none; margin:0; padding:10px 14px; background:var(--mint-soft); }
.org-member li{ font-size:12px; padding:4px 0; color:var(--dark); display:flex; align-items:center; gap:6px;}
.org-member li input{ flex:1; border:1px solid var(--border); border-radius:6px; padding:4px 6px; font-size:11.5px; background:#fff;}
.org-member li .bullet-del{ border:none; background:none; color:#C4C9C7; cursor:pointer; font-size:14px;}
.org-member li .bullet-del:hover{ color:var(--red-text); }
.org-edit-field{ width:100%; border:1px solid var(--border); border-radius:6px; padding:6px 8px; font-size:12px; font-family:inherit; margin-bottom:6px;}
.add-bullet-btn{ font-size:11px; color:var(--mid); background:none; border:1px dashed var(--mid); border-radius:6px; padding:4px 10px; cursor:pointer; margin:6px 14px 10px;}
.mission-edit{ width:100%; border:1px solid rgba(255,255,255,.4); border-radius:8px; padding:8px 10px; background:rgba(255,255,255,.12); color:#fff; font-size:12.5px; text-align:center; margin-top:6px;}
.mission-edit::placeholder{ color:rgba(255,255,255,.6); }

/* 테이블 공통 */
.table-scroll{
  overflow:auto; border:1px solid var(--border); border-radius:12px;
  max-height:min(64vh, 620px); /* 스크롤이 짧게 끊겨서 가로 스크롤바가 바로 보이도록 */
}
table{ border-collapse:collapse; width:100%; min-width:900px; table-layout:fixed; }
thead th{
  background:var(--dark); color:#9FE1CB; font-size:10.5px; font-weight:800; text-align:left;
  padding:9px 8px; white-space:nowrap; position:sticky; top:0; z-index:6;
}
.col-del{ cursor:pointer; color:#5FA88F; font-weight:900; margin-left:3px; }
.col-del:hover{ color:#FF9B9B; }
.col-move{ cursor:pointer; color:#5FA88F; font-weight:700; font-size:9px; padding:0 1px; }
.col-move:hover{ color:#fff; }
.grp-move{ cursor:pointer; color:#9FE1CB; font-weight:700; font-size:10px; padding:0 2px; }
.grp-move:hover{ color:#fff; }
tbody td{ padding:5px 6px; border-bottom:1px solid var(--border); vertical-align:middle; overflow:hidden; }
tbody td.nowrap-col{ white-space:nowrap; text-overflow:ellipsis; }
tbody tr:hover{ background:var(--mint-soft); }
td input, td select{
  width:100%; border:1px solid transparent; background:transparent; font-family:inherit;
  font-size:12px; padding:6px 6px; border-radius:6px; color:var(--ink); overflow:hidden; text-overflow:ellipsis;
  text-align:inherit;
}
/* 네이티브 화살표를 그대로 사용(브라우저별 커스텀 SVG 깨짐 방지) — 대신 테두리/배경으로만 hover 시 존재감을 줌 */
td select{ cursor:pointer; text-align-last:center; }
/* RACI 표는 셀이 많아 화살표가 모두 보이면 지저분함 → 평소엔 숨기고, 마우스를 올리거나 클릭했을 때만 표시 */
.raci-cell select{ appearance:none; -webkit-appearance:none; -moz-appearance:none; }
/* 네이티브 화살표(appearance:auto)는 select의 콘텐츠 박스를 줄여 R/A/C/I 글자의 중앙정렬을 깨뜨림
   → appearance는 항상 none으로 고정하고, hover/focus 때는 배경 이미지로 얇은 화살표만 겹쳐 그려 정렬에 영향을 주지 않음 */
.raci-cell select:hover, .raci-cell select:focus{
  background-image: linear-gradient(45deg, transparent 50%, currentColor 50%), linear-gradient(135deg, currentColor 50%, transparent 50%);
  background-position: calc(100% - 10px) 55%, calc(100% - 6px) 55%;
  background-size: 4px 4px, 4px 4px;
  background-repeat: no-repeat;
}
td select option{ color:#111 !important; background:#fff !important; font-weight:400; }
td input:hover, td select:hover{ background-color:#fff; border-color:var(--border); }
td input:focus, td select:focus{ outline:none; background-color:#fff; border-color:var(--mid); }
/* RACI 셀 안의 select는 포커스(클릭)해도 R/A/C/I 색상이 유지되어야 함 — 흰색으로 덮이지 않도록 예외 처리 */
.raci-cell input:hover, .raci-cell select:hover,
.raci-cell input:focus, .raci-cell select:focus{ background-color:transparent; border-color:rgba(255,255,255,.5); }
.del-btn{
  border:none; background:transparent; color:#C4C9C7; cursor:pointer; font-size:15px;
  width:26px; height:26px; border-radius:6px; line-height:1;
}
.del-btn:hover{ background:var(--red-bg); color:var(--red-text); }
.add-row-bar{ padding:10px; display:flex; justify-content:center; background:#fbfdfc; }
.add-row-btn{
  display:flex; align-items:center; gap:6px; font-size:12px; font-weight:700; color:var(--mid);
  background:none; border:1.5px dashed var(--mid); border-radius:8px; padding:7px 16px; cursor:pointer;
}
.add-row-btn:hover{ background:var(--mint-soft); }

/* 틀고정: 표 왼쪽 식별 컬럼 고정 (엑셀 틀고정과 동일 개념) */
.sticky-col{ position:sticky; z-index:4; background:#fff; }
thead .sticky-col{ z-index:7; background:var(--dark); }
tbody tr:hover .sticky-col{ background:var(--mint-soft); }

/* RACI 셀 색상 (엑셀 조건부서식과 동일 매핑) */
.raci-cell{ text-align:center; font-weight:700; font-size:12px; }
.raci-R{ background:var(--mint); color:var(--mid); }
.raci-A{ background:var(--dark); color:#FFFFFF; }
.raci-RA{ background:var(--mid); color:#FFFFFF; }
.raci-C{ background:var(--amber-bg); color:var(--amber-text); }
.raci-I{ background:var(--blue-bg); color:var(--blue-text); }
/* RACI select 자체도 배경/글자색 물려받도록 (조건부서식이 select 위에서도 보이게), 가운데 정렬 보장 */
.raci-cell select{ color:inherit; font-weight:700; text-align:center; text-align-last:center; }

/* 비중 상위 5% 강조 (엑셀 규칙과 동일) */
.ratio-hot{ color:var(--red-text)!important; background:var(--red-bg); border-radius:4px; padding:2px 4px; font-weight:800; }

/* 업무 분류 그룹 헤더 (JD 표) */
.group-row td{ background:var(--dark); color:#fff; font-weight:800; font-size:11.5px; padding:6px 10px; border-bottom:none; }

.stat-strip{ display:flex; gap:14px; margin-top:14px; flex-wrap:wrap; }
.stat{ flex:1; min-width:120px; background:var(--mint-soft); border:1px solid var(--mint); border-radius:10px; padding:10px 14px;}
.stat .num{ font-size:18px; font-weight:800; color:var(--dark); font-family:inherit;}
.stat .lbl{ font-size:10px; color:var(--mid); font-weight:700; margin-top:2px;}
.stat.ok{ border-color:var(--mid); }

.readonly-badge{ font-size:10px; background:var(--amber-bg); color:var(--amber-text); padding:3px 9px; border-radius:20px; font-weight:700;}
.editable-badge{ font-size:10px; background:var(--mint); color:var(--mid); padding:3px 9px; border-radius:20px; font-weight:700;}

.loading{ text-align:center; padding:60px 0; color:var(--muted); font-size:13px;}
.breadcrumb{ font-size:12px; color:var(--muted); margin-bottom:10px;}
.breadcrumb a{ color:var(--mid); font-weight:600;}

/* 인쇄 / PDF 저장 */
@media print{
  .topbar, .sidebar, .toast, .add-row-bar, .breadcrumb, .btn, .btn-primary, .btn-ghost, .btn-danger, .btn-light,
  .del-btn, .bullet-del, .add-bullet-btn, #addMemberBtn { display:none !important; }
  body{ background:#fff; }
  .app-shell{ display:block; }
  .main-col{ display:block; }
  .content{ padding:0; max-width:none; }
  .card{ border:none; box-shadow:none; padding:0; margin-bottom:14px; page-break-inside:avoid; }
  .table-scroll{ max-height:none !important; overflow:visible !important; border:none; }
  thead th{ position:static; }
  .sticky-col{ position:static; }
  table{ min-width:0; width:100%; }
  .group-row td{ position:static; }
  select{ appearance:none; -webkit-appearance:none; background-image:none !important; border:none; }
}
.print-btn{ font-size:10.5px; padding:7px 12px; }
.btn-primary, .btn-ghost{ font-size:11.5px; }

/* 대분류 비중 도넛차트 (JD 화면) */
.breakdown{ display:flex; gap:30px; align-items:center; flex-wrap:wrap; margin-top:14px; }
.donut-wrap{ flex-shrink:0; }
.legend{ flex:0 1 auto; min-width:240px; display:flex; flex-direction:column; gap:8px; }
.legend-row{ display:flex; align-items:center; gap:7px; font-size:11.5px; }
.legend-swatch{ width:9px; height:9px; border-radius:2px; flex-shrink:0; }
.legend-name{ flex:0 0 auto; color:var(--ink); white-space:nowrap; }
.legend-val{ flex:0 0 auto; color:var(--dark); font-size:11px; font-weight:700; white-space:nowrap; }
/* 막대바는 도넛과 정보가 중복되어 제거함 */