/* ===== 상단 헤더 ===== */
.site-header {
  position: sticky; top: 0; z-index: 20;
  background: var(--color-bg);
  border-bottom: 0.75px solid var(--color-border);
  padding: var(--space-3) var(--space-4);
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
}
.site-header .brand { font-family: var(--font-heading); font-size: var(--font-size-h2); color: var(--color-text); }
.site-header .brand small { display: block; font-family: var(--font-body-light); font-size: var(--font-size-caption); color: var(--color-text-muted); font-weight: 400; }
.site-header nav { display: flex; align-items: center; gap: var(--space-3); font-size: var(--font-size-caption); }
.site-header nav .role-chip { background: var(--color-primary-soft); color: var(--color-primary); border-radius: 999px; padding: 2px 10px; }

.page-wrap { max-width: 1080px; margin: 0 auto; padding: var(--space-4); }

/* ===== 플래시 메시지 ===== */
.flash { background: var(--color-primary-soft); color: var(--color-primary-dark); border-radius: var(--radius-base); padding: var(--space-3); margin-bottom: var(--space-4); font-size: var(--font-size-caption); }

/* ===== 로그인 화면 ===== */
.login-wrap { min-height: 80vh; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.login-card { width: 100%; max-width: 360px; }
.login-card h1 { text-align: center; margin-bottom: var(--space-1); }
.login-card p.caption { text-align: center; margin-bottom: var(--space-4); }
.form-field { margin-bottom: var(--space-3); }
.form-field label { display: block; font-size: var(--font-size-caption); color: var(--color-text-muted); margin-bottom: var(--space-1); }
.form-field input, .form-field select, .form-field textarea {
  width: 100%; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 0.75px solid var(--color-border); border-radius: var(--radius-base); background: var(--color-bg); color: var(--color-text);
}
.form-field textarea { min-height: 80px; }
.form-field.form-field--summary textarea { min-height: 40px; }  /* 업무 흐름 및 요약 설명: 기본 대비 50% 축소 */
.login-card button.btn-primary { width: 100%; }
.login-brand { display: flex; justify-content: center; margin-top: var(--space-4); }
.login-brand img { width: 80%; height: auto; display: block; }

/* ===== 대시보드 요약 ===== */
.summary-row { display: grid; grid-template-columns: repeat(2, 1fr); gap: var(--space-3); margin-bottom: var(--space-5); }
@media (min-width: 640px) { .summary-row { grid-template-columns: repeat(3, 1fr); } }
@media (min-width: 1024px) { .summary-row { grid-template-columns: repeat(6, 1fr); } }
.summary-card { background: var(--color-surface); border-radius: var(--radius-base); padding: var(--space-3); }
.summary-card .num { font-family: var(--font-heading); font-size: var(--font-size-display); color: var(--color-primary); }
.summary-card .label { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.summary-icon {
  width: 32px; height: 32px; border-radius: 50%; background: var(--color-primary-soft);
  color: var(--color-primary); display: flex; align-items: center; justify-content: center;
  margin-bottom: var(--space-2);
}
.summary-icon svg { width: 18px; height: 18px; }

.toolbar { display: flex; justify-content: space-between; align-items: center; margin-bottom: var(--space-4); flex-wrap: wrap; gap: var(--space-2); }

/* ===== 대시보드 통합검색 ===== */
.search-row { display: flex; gap: var(--space-2); margin-bottom: var(--space-3); }
.search-row input[type="search"] {
  flex: 1; min-height: 44px; padding: var(--space-2) var(--space-3);
  border: 0.75px solid var(--color-border); border-radius: var(--radius-base);
  background: var(--color-bg); color: var(--color-text); font: inherit;
}

/* ===== 업무흐름 트리 ===== */
.tree-area { margin-bottom: var(--space-2); }
.tree-node-area { margin-bottom: var(--space-3); }
.tree-node-area > summary { font-family: var(--font-heading); font-size: var(--font-size-h2); color: var(--color-text); padding: var(--space-2) 0; cursor: pointer; }
.tree-node-task { margin-left: var(--space-4); margin-bottom: var(--space-2); }
.tree-node-task > summary { font-weight: 700; color: var(--color-primary-dark); padding: var(--space-1) 0; cursor: pointer; font-size: var(--font-size-base); }
.tree-leaf {
  margin-left: var(--space-4); margin-bottom: var(--space-2);
  background: var(--color-bg); border: 0.75px solid var(--color-border); border-radius: var(--radius-base);
  padding: var(--space-3);
}
.tree-leaf .leaf-main { display: flex; flex-direction: column; gap: 2px; }
.tree-leaf .leaf-title-row { display: flex; justify-content: space-between; align-items: flex-start; gap: var(--space-2); flex-wrap: wrap; }
.tree-leaf .leaf-title { font-weight: 700; }
.tree-leaf .leaf-meta { font-size: var(--font-size-caption); color: var(--color-text-muted); }
.leaf-links { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 4px; }
.link-chip {
  display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-caption);
  border-radius: 999px; padding: 2px 10px; white-space: nowrap; cursor: default;
}
.link-chip--in { background: var(--color-primary-soft); color: var(--color-primary-dark); }
.link-chip--out { background: var(--color-surface); color: var(--color-text-muted); border: 0.75px solid var(--color-border); }
.tree-leaf .leaf-actions { display: flex; gap: var(--space-2); align-items: center; }
.tree-leaf .leaf-actions form { display: inline; }
.btn-sm { padding: var(--space-1) var(--space-3); min-height: 32px; font-size: var(--font-size-caption); border-radius: var(--radius-sm); }
.btn-danger { background: var(--color-danger); color: #fff; border: none; }

/* ===== 인터뷰 입력 폼 ===== */
.form-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); }
@media (min-width: 768px) { .form-grid.cols-2 { grid-template-columns: 1fr 1fr; } }
/* 인터뷰 등록/수정 화면 상단 기본정보 그리드: 입력창을 좁혀 한 줄에 4개씩 배치, 상하 스크롤 축소 */
@media (min-width: 768px) {
  .basic-info-grid { grid-template-columns: repeat(4, 1fr) !important; }
}
.basic-info-grid .form-field input,
.basic-info-grid .form-field select {
  width: 100%;
}
/* 담당 업무영역(대분류)·주요 업무(중분류)는 4열 압축 이전의 폭(2열 그리드 기준 한 칸)을 유지 */
@media (min-width: 768px) {
  .basic-info-grid .form-field.field-span-2 { grid-column: span 2; }
}
.form-section-title { font-family: var(--font-heading); font-size: var(--font-size-h2); margin: var(--space-5) 0 var(--space-2); border-left: 4px solid var(--color-primary); padding-left: var(--space-2); }
.repeat-row { display: grid; grid-template-columns: 1fr; gap: var(--space-2); border: 0.75px solid var(--color-border); border-radius: var(--radius-base); padding: var(--space-3); margin-bottom: var(--space-2); background: var(--color-surface); }
@media (min-width: 1024px) { .repeat-row.link-row { grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); } }
.repeat-row input, .repeat-row select { min-height: 40px; }

/* 업무 흐름 상세: 순서 핸들(좌) + 본문(우, 세로로 [항목들+차수뱃지/삭제 줄바꿈 영역] +
   [ERP메뉴(접이식)] + [처리내용]) 구조. 항목마다 폭(flex-basis)이 다르므로 grid의
   auto-fit 대신 flexbox 줄바꿈을 쓴다 - 각 항목이 자기 폭만큼만 차지하고 남는 공간이
   있으면 다음 항목이 옆에, 없으면 다음 줄로 내려가므로 라벨이 길거나 폭을 줄인 항목이
   있어도 옆 칸과 겹치지 않는다. 차수뱃지/삭제(취소선) 영역도 이 줄바꿈 영역의 마지막
   항목으로 두어 자동・디지털화 가능성 항목의 우측에 자연스럽게 배치되게 한다. */
.repeat-row.flow-row { display: flex; align-items: stretch; gap: var(--space-2); }
.flow-row-body { display: flex; flex-direction: column; gap: var(--space-1); flex: 1; min-width: 0; }
.flow-fields-wrap { display: flex; flex-wrap: wrap; gap: var(--space-2); align-items: flex-start; }

/* 업무 흐름 상세: 항목명을 입력창 위에 배치(라벨이 길어도 옆 칸과 겹치지 않도록) */
.flow-field { display: flex; flex-direction: column; align-items: stretch; gap: 4px; min-width: 0; flex: 0 0 190px; }
.flow-field label { flex: 0 0 auto; font-size: var(--font-size-caption); color: var(--color-text-muted); white-space: normal; }
.flow-field input, .flow-field select { width: 100%; min-width: 0; }

/* 항목별 폭 조정 */
.flow-field.flow-field--name { flex-basis: 228px; }      /* 세부업무: 기본 대비 20% 확대 */
.flow-field.flow-field--narrow-50 { flex-basis: 95px; }   /* 처리주체·부담당자·주기: 기본 대비 50% 축소 */
.flow-field.flow-field--narrow-80 { flex-basis: 38px; }   /* 횟수: 기본 대비 80% 축소 */
.flow-field.flow-field--duration { flex-basis: 130px; }   /* 1회 소요시간(분): 라벨이 한 줄로 보일 만큼의 폭 */
/* 자동・디지털화 가능성: select 폭을 라벨 텍스트 폭에 맞춘다 - 항목을 stretch 대신
   내용 크기(fit-content)로 두고 라벨은 줄바꿈 없이 한 줄로 고정해, 그 라벨의 자연스러운
   폭이 곧 항목 전체 폭이 되게 한 뒤 select에 width:100%를 줘서 라벨과 폭을 맞춘다. */
.flow-field.flow-field--automation { flex: 0 0 auto; align-items: flex-start; }
.flow-field.flow-field--automation label { white-space: nowrap; }
.flow-field.flow-field--automation select { width: 100%; }

/* 순서 이동 핸들 (드래그하여 단계 순서 변경) */
.drag-handle {
  display: flex; align-items: center; justify-content: center; flex: 0 0 28px;
  cursor: grab; color: var(--color-text-muted); font-size: 16px; line-height: 1;
  user-select: none; touch-action: none; border-radius: var(--radius-sm);
  padding: var(--space-1) 2px;
}
.drag-handle:hover { background: var(--color-primary-soft); color: var(--color-primary); }
.drag-handle:active, .flow-row.dragging .drag-handle { cursor: grabbing; }
.flow-row.dragging { opacity: .4; }
.flow-row.drag-over { outline: 2px dashed var(--color-primary); outline-offset: 2px; }

/* 처리 내용: 장문 입력을 위해 전체 폭으로 배치 */
.flow-field.flow-field--wide {
  flex-basis: 100%; flex-direction: column; align-items: stretch; gap: var(--space-1);
}
.flow-field.flow-field--wide label { white-space: normal; }
.flow-field.flow-field--wide textarea {
  width: 100%; min-height: 55px; padding: var(--space-2) var(--space-3); resize: vertical;
  border: 0.75px solid var(--color-border); border-radius: var(--radius-base);
  background: var(--color-bg); color: var(--color-text); font: inherit;
}

/* ERP메뉴: 처리 내용 바로 위, 같은 전체 폭 칸 안에 두어(같은 .flow-field--wide 컨테이너의
   자식) 위쪽 필드 줄(부담당자 등)의 높이 변동과 무관하게 처리내용과 붙어 있도록 한다.
   기본 접힘 상태의 URL 등록 목록. */
.erp-menu-details { width: 100%; margin: 0; }
.erp-menu-details > summary {
  cursor: pointer; font-size: var(--font-size-caption); color: var(--color-text-muted);
  padding: 2px 0; margin: 0; list-style: none;
}
.erp-menu-details > summary::-webkit-details-marker { display: none; }
.erp-menu-details > summary::before { content: "▸ "; }
.erp-menu-details[open] > summary::before { content: "▾ "; }
.erp-url-rows { display: flex; flex-direction: column; gap: 6px; margin: var(--space-2) 0; }
.erp-url-row { display: flex; gap: 8px; align-items: center; margin: 0; }
.erp-url-row .erp-url-input { flex: 1; min-width: 0; min-height: 40px; }

.form-actions { display: flex; gap: var(--space-2); margin-top: var(--space-5); }

/* ===== 관리자: 서브 내비게이션 ===== */
.admin-subnav { display: flex; gap: var(--space-2); border-bottom: 0.75px solid var(--color-border); margin-bottom: var(--space-2); }
.admin-subnav a {
  display: inline-block; padding: var(--space-2) var(--space-3); font-size: var(--font-size-caption);
  color: var(--color-text-muted); text-decoration: none; border-bottom: 2px solid transparent;
}
.admin-subnav a.active { color: var(--color-primary); border-bottom-color: var(--color-primary); font-weight: 700; }

/* ===== 관리자: 계정 목록 ===== */
.admin-table-wrap { overflow-x: auto; }

/* ===== 통합업무포털: 프로젝트 카드 ===== */
.project-grid { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin-top: var(--space-4); }
@media (min-width: 640px) { .project-grid { grid-template-columns: repeat(2, 1fr); } }
@media (min-width: 1024px) { .project-grid { grid-template-columns: repeat(3, 1fr); } }
.project-card {
  display: block; background: var(--color-surface); border-radius: var(--radius-base);
  padding: var(--space-4); text-decoration: none; color: inherit;
  border: 0.75px solid var(--color-border); transition: box-shadow .15s ease;
}
a.project-card:hover { box-shadow: 0 2px 10px rgba(0,0,0,.08); }
.project-card--soon { opacity: .6; cursor: default; }
.project-card-title { display: flex; align-items: center; gap: var(--space-2); font-family: var(--font-heading); font-size: var(--font-size-h2); margin-bottom: var(--space-1); }
.project-card-desc { font-size: var(--font-size-caption); color: var(--color-text-muted); }

/* 헤더 브랜드 영역을 대시보드 링크로 사용 */
.brand-link { text-decoration: none; }
.brand-link:hover { text-decoration: none; }
.brand-link .brand { cursor: pointer; }

/* ===== 차수(라운드) 뱃지 / 취소선(삭제 표시) ===== */
.round-badge {
  display: inline-block; font-size: var(--font-size-caption); color: var(--color-primary-dark);
  background: var(--color-primary-soft); border-radius: 999px; padding: 2px 8px; white-space: nowrap;
}
.flow-meta { display: flex; align-items: center; gap: var(--space-2); flex-wrap: wrap; }
.struck-label { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-caption); color: var(--color-danger); cursor: pointer; }
.struck-label input[type="checkbox"] { width: auto; min-height: auto; }
.repeat-row.is-struck { opacity: .6; background: var(--color-bg); }
.repeat-row.is-struck input { text-decoration: line-through; }
.data-table tr.is-struck td { text-decoration: line-through; opacity: .6; }

/* ===== 이슈/다음확인/메모: 삭제 이력(취소선) ===== */
.note-history {
  margin: -6px 0 var(--space-3); padding: var(--space-2) var(--space-3);
  background: var(--color-bg); border: 0.75px solid var(--color-border); border-radius: var(--radius-base);
}
.note-history-line { display: flex; align-items: baseline; gap: 8px; padding: 2px 0; font-size: var(--font-size-caption); }
.note-history .is-struck-text, .is-struck-text { text-decoration: line-through; color: var(--color-text-muted); }
.note-line-list { list-style: none; margin: 0; padding: 0; }
.note-line-list li { display: flex; align-items: baseline; gap: 8px; padding: var(--space-1) 0; border-bottom: 0.75px solid var(--color-border); }
.note-line-list li:last-child { border-bottom: none; }
.note-line-list li.is-struck { text-decoration: line-through; color: var(--color-text-muted); }

/* ===== 대시보드: 이전 차수 이력 ===== */
.round-history { margin-top: var(--space-1); }
.round-history > summary { cursor: pointer; }
.round-history-item { display: flex; align-items: center; gap: var(--space-2); padding: var(--space-1) 0 var(--space-1) var(--space-3); font-size: var(--font-size-caption); }

/* ===== 관리자: 조직관리 (회사/부서/사원) ===== */
.interviewee-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: var(--space-2) 0; border-bottom: 0.75px solid var(--color-border); }
.org-section { margin-bottom: var(--space-5); }
.org-section h2 { margin-bottom: 0; display: inline; }
.org-section-summary { cursor: pointer; list-style: none; margin-bottom: var(--space-2); }
.org-section-summary::-webkit-details-marker { display: none; }
.org-section-summary::before { content: "▾ "; color: var(--color-text-muted); }
.org-section:not([open]) .org-section-summary::before { content: "▸ "; }
.org-section-body { padding-top: var(--space-1); }
.org-inline-form { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: var(--space-2); }
.org-inline-form input, .org-inline-form select { min-height: 36px; padding: 4px 8px; }
.org-row { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; padding: var(--space-2) 0; border-bottom: 0.75px solid var(--color-border); }

/* ===== 업무흐름 상세: 부담당자(사원 검색 + 검색결과 팝업 + 기타 직접입력) ===== */
.assistant-field { display: flex; flex-direction: column; gap: 4px; flex: 1; min-width: 0; }
.assistant-hint { margin: 0; min-height: 0; }
.assistant-hint:empty { display: none; }
.assistant-field .assistant-search, .assistant-field .assistant-other-input { min-height: 40px; }
.assistant-other-toggle { display: inline-flex; align-items: center; gap: 4px; font-size: var(--font-size-caption); color: var(--color-text-muted); cursor: pointer; }
.assistant-other-toggle input[type="checkbox"] { width: auto; min-height: auto; }

/* ===== 부담당자 검색결과 선택 팝업 ===== */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45); z-index: 100;
  display: flex; align-items: center; justify-content: center; padding: var(--space-4);
}
.modal-box {
  background: var(--color-bg); border-radius: var(--radius-base); max-width: 480px; width: 100%;
  max-height: 80vh; display: flex; flex-direction: column; overflow: hidden;
}
.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: var(--space-3);
  border-bottom: 0.75px solid var(--color-border);
}
.modal-body { padding: var(--space-3); overflow-y: auto; }
.org-picker-list { display: flex; flex-wrap: wrap; gap: 6px; padding: var(--space-1) 0 var(--space-2) var(--space-3); }
.org-picker-person {
  border: 0.75px solid var(--color-border); background: var(--color-surface); border-radius: 999px;
  padding: 4px 12px; font-size: var(--font-size-caption); cursor: pointer;
}
.org-picker-person:hover { background: var(--color-primary-soft); color: var(--color-primary-dark); }

/* ===== 이슈 유형 다중선택 태그 ===== */
.issue-tag-groups { display: grid; grid-template-columns: 1fr; gap: var(--space-3); margin: var(--space-2) 0 var(--space-4); }
@media (min-width: 768px) { .issue-tag-groups { grid-template-columns: repeat(3, 1fr); } }
.issue-tag-group {
  border: 0.75px solid var(--color-border); border-radius: var(--radius-base); padding: var(--space-2) var(--space-3);
  background: var(--color-surface);
}
.issue-tag-group-title { font-weight: 700; font-size: var(--font-size-caption); color: var(--color-primary-dark); margin-bottom: 4px; }
.issue-tag-item { display: flex; align-items: center; gap: 6px; font-size: var(--font-size-caption); padding: 2px 0; cursor: pointer; }
.issue-tag-item input[type="checkbox"] { width: auto; min-height: auto; }
.issue-tag-groups--readonly { display: flex; flex-wrap: wrap; gap: 6px; grid-template-columns: none; margin: -6px 0 var(--space-3); }
.issue-tag-chip {
  display: inline-block; font-size: var(--font-size-caption); color: var(--color-primary-dark);
  background: var(--color-primary-soft); border-radius: 999px; padding: 2px 10px;
}