/* 재직자 훈련 신청관리 — v0.1 디자인 */

:root{
  --paper:#F4F6F5;
  --surface:#FFFFFF;
  --surface-alt:#E7EEEA;
  --line:#D6E0DA;
  --ink:#182420;
  --ink-muted:#5C6D65;
  --accent:#276749;
  --accent-soft:#DFF0E5;
  --gold:#96650F;
  --gold-soft:#F5E9D2;
  --good:#276749;
  --good-soft:#DFF0E5;
  --risk:#A6362A;
  --risk-soft:#F6E1DD;
  --info:#2B5F8A;
  --info-soft:#DCEAF5;
  --peach:#B15A2E;
  --peach-soft:#F7E2D3;
  --tan:#8A6D3B;
  --tan-soft:#EFE6D2;
  --shadow: 0 1px 2px rgba(24,36,32,0.06);
  --shadow-md: 0 4px 16px rgba(24,36,32,0.08);
  --radius: 10px;
  --radius-sm: 7px;
}
@media (prefers-color-scheme: dark){
  :root{
    --paper:#111714;
    --surface:#171F1B;
    --surface-alt:#1D2721;
    --line:#2A362F;
    --ink:#E6EDE9;
    --ink-muted:#98A69E;
    --accent:#6FBF97;
    --accent-soft:#1C332A;
    --gold:#D8AE66;
    --gold-soft:#392D18;
    --good:#6FBF97;
    --good-soft:#1C332A;
    --risk:#E29284;
    --risk-soft:#3A2320;
    --info:#8FBFE8;
    --info-soft:#1E2F3D;
    --peach:#E3A377;
    --peach-soft:#3A2A1B;
    --tan:#D6C08A;
    --tan-soft:#332C1B;
    --shadow: 0 1px 2px rgba(0,0,0,0.4);
    --shadow-md: 0 8px 24px rgba(0,0,0,0.35);
  }
}

*{box-sizing:border-box;}
[hidden]{display:none !important;}
body{
  margin:0;
  background:var(--paper);
  color:var(--ink);
  font-family:'IBM Plex Sans KR','Apple SD Gothic Neo','Malgun Gothic',sans-serif;
  font-size:15px;
  line-height:1.6;
  -webkit-font-smoothing:antialiased;
  /* 한글은 기본적으로 글자와 글자 사이 아무 데서나 줄바꿈될 수 있어서
     "문구" 같은 한 단어가 "문 / 구"처럼 중간에 잘리는 경우가 있습니다.
     단어(공백 기준) 단위로만 줄바꿈되게 강제해서 이런 어색한 줄바꿈을
     막습니다 — 사이트 전체에 항상 적용됩니다. */
  word-break:keep-all;
}
a{color:var(--accent); text-decoration:none;}
.mono{font-family:'IBM Plex Mono','SFMono-Regular',Consolas,monospace; font-size:13px;}
.small{font-size:11.5px; color:var(--ink-muted); font-weight:400;}

/* ---------- 상단 내비게이션 ---------- */
.topbar{
  background:var(--surface);
  border-bottom:1px solid var(--line);
  padding:0 24px;
  height:60px;
  display:flex;
  align-items:center;
  gap:28px;
  flex-wrap:wrap;
}
.topbar .brand{
  font-weight:700; font-size:15.5px; letter-spacing:-0.01em; white-space:nowrap;
  display:flex; align-items:center; gap:8px;
}
.brand-mark{
  display:inline-flex; align-items:center; justify-content:center;
  width:26px; height:26px; background:var(--accent); color:#fff; border-radius:7px;
  font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:700;
}
.topbar nav{display:flex; gap:4px; flex-wrap:wrap;}
.topbar nav a{
  color:var(--ink-muted); font-weight:600; font-size:13.5px;
  padding:8px 12px; border-radius:var(--radius-sm);
  transition:background .12s ease, color .12s ease;
}
.topbar nav a:hover{background:var(--surface-alt); color:var(--ink);}
.topbar nav a.active{color:var(--accent); background:var(--accent-soft);}
.userbox{
  font-size:13px; color:var(--ink-muted);
  display:flex; align-items:center; gap:10px; margin-left:auto;
}
.userbox a{color:var(--ink-muted); font-weight:600;}
.userbox a:hover{color:var(--accent);}

.course-switch select{font-size:12.5px; font-weight:600; padding:7px 10px; min-width:auto; border-color:var(--line); background:var(--surface-alt);}
.course-pill{background:var(--surface-alt); color:var(--ink); padding:5px 12px; border-radius:99px; font-weight:600; font-size:12.5px;}

/* ---------- 본문 레이아웃 ---------- */
.wrap{max-width:1180px; margin:0 auto; padding:32px 24px 64px;}
.wrap.narrow{max-width:640px;}
h1{font-size:21px; margin:0 0 6px; letter-spacing:-0.01em;}
/* max-width:78ch를 걸어뒀던 예전 버전은 옆에 여백이 많이 남는데도 설명
   문단이 억지로 두 줄로 줄바꿈되는 문제가 있었다(사이트 전체에서 반복 —
   .wrap이 이미 1180px로 폭을 제한하므로 문단에 별도 최대 줄길이를 또
   걸 필요가 없다). 컨테이너 폭을 그대로 쓰게 제거함. */
.subtitle{color:var(--ink-muted); margin:0 0 24px; font-size:13.5px;}
.section-title{font-size:14.5px; margin:32px 0 12px; font-weight:700; color:var(--ink);}

/* ---------- 통계 카드 ---------- */
.stats{display:grid; grid-template-columns:repeat(auto-fit,minmax(150px,1fr)); gap:12px; margin-bottom:28px;}
.stat{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 18px; box-shadow:var(--shadow);}
.stat .n{font-family:'IBM Plex Mono',monospace; font-size:26px; font-weight:600; color:var(--accent);}
.stat .l{font-size:12.5px; color:var(--ink-muted); margin-top:4px;}
.stat.risk .n{color:var(--risk);}
.stat.gold .n{color:var(--gold);}

/* ---------- 대시보드 단계별 현황(가로 막대) ---------- */
/* 표로 숫자만 나열하면 눈에 잘 안 띈다는 피드백에 따라, 단계별 완료/진행
   비율을 막대로 바로 보여줍니다. AX 파이프라인 12단계(전체 평균 진행률
   산정 기준)와 AX훈련(별도 추가 활동, 평균에 미포함)을 구획을 나눠 절대
   섞이지 않게 표시합니다. */
.stage-funnel-block{
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow); padding:18px 20px; margin-bottom:20px;
}
.stage-funnel-heading{margin:0 0 10px; display:flex; align-items:center; gap:8px; font-weight:600;}
.stage-funnel-row{display:flex; align-items:center; gap:12px; margin-bottom:9px;}
.stage-funnel-row:last-child{margin-bottom:0;}
.stage-funnel-label{width:150px; flex-shrink:0; font-size:12.5px; font-weight:600; color:var(--ink);}
.stage-funnel-bar{
  flex:1; height:20px; background:var(--surface-alt); border-radius:99px;
  overflow:hidden; display:flex; min-width:80px;
}
.stage-funnel-bar .seg{height:100%; transition:width .2s ease;}
.stage-funnel-bar .seg.done{background:var(--good);}
.stage-funnel-bar .seg.progress{background:var(--gold);}
.stage-funnel-count{width:150px; flex-shrink:0; text-align:right; white-space:nowrap;}
.stage-funnel-count .pill{padding:2px 8px; font-size:10.5px;}
@media (max-width: 640px){
  .stage-funnel-label{width:100px; font-size:11.5px;}
  .stage-funnel-count{width:auto;}
}

/* ---------- 표 ---------- */
.tbl-wrap{overflow-x:auto; border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); box-shadow:var(--shadow);}
table{border-collapse:collapse; width:100%; font-size:13.5px;}
th,td{padding:11px 14px; text-align:left; border-bottom:1px solid var(--line); vertical-align:middle;}
.nowrap{white-space:nowrap;}
thead th{background:var(--surface-alt); font-size:11.5px; color:var(--ink-muted); text-transform:uppercase; letter-spacing:0.04em; font-weight:600;}
tbody tr:last-child td{border-bottom:none;}

/* 리포트류 화면(예: AX 진단 결과 리포트) 공통 규칙 — 값 위주의 표는 기본
   가운데 정렬로 통일합니다. 여러 줄 문단·불릿 목록이 들어가는 칸만
   .report-text로 좌측 정렬 예외를 둡니다(계속 이 표기 유지할 것). */
.report-table td{text-align:center;}
.report-table td.report-text{text-align:left;}
tbody tr:hover td{background:var(--accent-soft);}
.current-row td{background:var(--accent-soft);}

/* ---------- 입력 요소 ---------- */
select, input[type=number], input[type=text], input[type=email], input[type=password], textarea{
  font-size:13.5px; padding:9px 11px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font-family:inherit;
  transition:border-color .12s ease, box-shadow .12s ease;
}
select:focus, input:focus, textarea:focus{outline:none; border-color:var(--accent); box-shadow:0 0 0 3px var(--accent-soft);}
select{min-width:100px; cursor:pointer;}
textarea{width:100%; resize:vertical;}
.toolbar{display:flex; align-items:center; gap:8px; margin-bottom:18px; flex-wrap:wrap;}
.toolbar label{font-weight:600; font-size:13px; color:var(--ink-muted); margin-right:4px;}

button, .btn{
  background:var(--accent); color:#fff; border:none; border-radius:var(--radius-sm);
  padding:9px 18px; font-size:13.5px; font-weight:700; cursor:pointer; font-family:inherit;
  white-space:nowrap; flex-shrink:0;
  transition:transform .08s ease, opacity .12s ease;
}
button:hover{opacity:0.9;}
button:active{transform:translateY(1px);}
.btn.secondary{background:var(--surface); color:var(--ink); border:1px solid var(--line);}
.btn.small{padding:6px 12px; font-size:12.5px;}
.btn.tab{background:var(--surface); color:var(--ink-muted); border:1px solid var(--line); font-weight:600;}
.btn.tab.active{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}
/* 신청자 관리처럼 열이 많은 표에서 좌우 스크롤이 생기지 않도록 글자 크기와
   여백을 조금 줄이는 용도입니다(.tbl-wrap에 같이 붙여서 씁니다). */
.tbl-compact table{font-size:11px;}
.tbl-compact th, .tbl-compact td{padding:6px 7px;}
.tbl-compact .row-actions{gap:5px;}
.tbl-compact .row-actions form{gap:4px;}
.tbl-compact .row-actions input[type=text]{width:70px; font-size:10.5px; padding:4px 6px;}
.tbl-compact .btn.small{padding:4px 7px; font-size:10.5px;}
.tbl-compact .pill{padding:2px 7px; font-size:10px;}

.row-actions{display:flex; flex-direction:column; align-items:flex-start; gap:8px;}
.row-actions form{display:flex; gap:6px; align-items:center;}
.row-actions input[type=text]{width:112px; padding:6px 8px; font-size:12px; flex-shrink:0;}

/* ---------- 배지 / 필 ---------- */
.pill{display:inline-block; padding:3px 10px; border-radius:99px; font-size:11.5px; font-weight:700; letter-spacing:0.01em;}
.pill.good{background:var(--good-soft); color:var(--good);}
.pill.risk{background:var(--risk-soft); color:var(--risk);}
.pill.warn{background:var(--gold-soft); color:var(--gold);}
.pill.neutral{background:var(--surface-alt); color:var(--ink-muted);}
.pill.info{background:var(--info-soft); color:var(--info);}
.pill.peach{background:var(--peach-soft); color:var(--peach);}
.pill.tan{background:var(--tan-soft); color:var(--tan);}

.notice{background:var(--gold-soft); border-left:3px solid var(--gold); padding:12px 16px; border-radius:0 var(--radius-sm) var(--radius-sm) 0; font-size:13px; margin-bottom:20px;}

/* ---------- 핵심기업 파이프라인 매트릭스(기업 x 단계) ---------- */
/* 기업이 많아져도 한눈에 훑어볼 수 있도록, 기본은 상태 배지만 보이는 표이고
   칸을 누르면(<details>) 그 자리에서 팝오버로 편집 폼이 펼쳐집니다(페이지 이동
   도, 자바스크립트도 필요 없음 — <details>/<summary>는 브라우저 기본 기능). */
.stage-matrix th, .stage-matrix td{text-align:center; white-space:nowrap;}
.stage-matrix .company-col{text-align:left; min-width:140px;}
/* AX훈련 2단계는 전체 진행률에 안 들어가는 별도 활동이라, 배경을 살짝
   다르게 주고 왼쪽에 굵은 경계선을 그어 12단계 파이프라인과 한눈에
   구분되게 합니다. */
.stage-matrix .stage-group-extra{background:var(--surface-alt);}
.stage-matrix th.stage-group-extra{color:var(--ink-muted); font-weight:600;}
.stage-matrix .stage-group-extra-first{border-left:2px solid var(--line);}
.stage-matrix td{position:relative; padding:6px 8px;}
.stage-matrix summary{cursor:pointer; list-style:none; display:inline-block;}
.stage-matrix summary::-webkit-details-marker{display:none;}
.stage-matrix summary:hover .pill{filter:brightness(1.15);}
.stage-matrix details[open] summary{opacity:0.6;}
/* 표를 좌우로 스크롤해도 기업명 칸은 화면에 그대로 붙어 있도록 고정합니다
   (기업이 많아지고 단계 칸이 오른쪽으로 길어질수록 어느 기업 행인지
   놓치기 쉬워서 사용자 피드백으로 추가). */
.stage-matrix .company-col{
  position:sticky; left:40px; z-index:2;
  background:var(--surface); box-shadow:2px 0 0 var(--line);
}
.stage-matrix thead .company-col{z-index:3;}
/* 연번 칸도 기업명 칸과 함께 고정해야, 가로로 스크롤한 상태에서도 몇 번째
   행인지 바로 알아볼 수 있습니다 — 두 고정열이 겹치지 않도록 기업명 칸의
   left를 이 칸 폭(40px)만큼 밀어뒀습니다. */
.stage-matrix .sticky-col-num{
  position:sticky; left:0; z-index:2;
  width:40px; background:var(--surface);
}
.stage-matrix thead .sticky-col-num{z-index:3;}
.stage-matrix .stage-memo{
  display:block; max-width:110px; margin-top:2px;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap;
}

/* ---------- 색이 붙는 드롭다운(구분/분류/운영담당자/PBL전문가) ---------- */
/* 값을 고르면 .pill과 같은 색 배지로 보이는, 구글 시트 드롭다운과 비슷한
   선택 상자입니다. 새 항목도 그 자리에서 추가할 수 있습니다. */
.chip-select{position:relative; display:inline-block;}
.chip-btn{cursor:pointer; border:none; min-width:56px; text-align:center;}
.chip-btn:hover{filter:brightness(1.1);}
.chip-panel{
  width:200px; max-height:260px; overflow-y:auto; z-index:60;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius-sm);
  box-shadow:var(--shadow-md); padding:8px; text-align:left; white-space:normal;
}
.chip-options{display:flex; flex-wrap:wrap; gap:6px; margin-bottom:8px;}
.chip-option{cursor:pointer; border:none;}
.chip-option:hover{filter:brightness(1.1);}
.chip-add{display:flex; gap:6px; border-top:1px solid var(--line); padding-top:8px;}
.chip-add-input{
  flex:1; min-width:0; font-size:12px; padding:5px 7px;
  border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--paper); color:var(--ink);
}
/* 팝오버는 칸에 붙이지 않고 화면 정중앙에 고정합니다 — 표가
   overflow-x:auto인 스크롤 컨테이너 안에 있어서, 칸 바로 아래에 붙이면
   표의 스크롤 경계에 잘려 내용을 보려면 표 자체를 스크롤해야 하는 문제가
   있었습니다(사용자 피드백으로 확인). 화면 중앙 고정이면 이 문제가 아예
   생기지 않고, 입력 필드도 훨씬 넉넉하게 쓸 수 있습니다. */
.stage-backdrop{
  position:fixed; inset:0; z-index:40; background:rgba(0,0,0,0.45);
}
.stage-popover{
  position:fixed; top:50%; left:50%; transform:translate(-50%, -50%);
  z-index:41; width:420px; max-width:92vw; max-height:88vh; overflow-y:auto;
  text-align:left; white-space:normal;
  background:var(--surface); border:1px solid var(--line); border-radius:var(--radius);
  box-shadow:var(--shadow-md); padding:20px;
}
.stage-popover label{display:block; font-size:12.5px; font-weight:600; color:var(--ink-muted); margin:14px 0 5px;}
.stage-popover label:first-child{margin-top:0;}
.stage-popover select, .stage-popover textarea, .stage-popover input[type=file]{
  width:100%; font-size:13.5px; padding:9px 10px; border:1px solid var(--line);
  border-radius:var(--radius-sm); background:var(--paper); color:var(--ink); font-family:inherit;
}
.stage-popover textarea{resize:vertical;}
.stage-popover .stage-file-current{font-size:12px; margin-bottom:6px;}
.stage-popover .actions{margin-top:16px;}
.empty{padding:48px; text-align:center; color:var(--ink-muted); font-size:13.5px; background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);}

/* ---------- 로그인 / 공개 폼 카드 ---------- */
.login-card, .form-card{
  max-width:460px; margin:60px auto; background:var(--surface);
  border:1px solid var(--line); border-radius:var(--radius); padding:36px;
  box-shadow:var(--shadow-md);
}
.login-card h1, .form-card h1{margin-bottom:6px; font-size:19px;}
.login-card .subtitle, .form-card .subtitle{margin-bottom:0;}
.login-card form{margin-top:22px; display:flex; flex-direction:column; gap:14px;}
.login-card label{display:block; margin-bottom:6px; font-size:12.5px; font-weight:600; color:var(--ink-muted);}
.login-card select{width:100%; padding:11px 12px;}
.login-card button{padding:12px;}

/* ---------- 신청/설문 폼 ---------- */
.apply-wrap{max-width:640px; margin:0 auto;}
.public-header{
  max-width:640px; margin:0 auto 20px;
  display:flex; flex-direction:column; align-items:center; gap:12px;
  padding-bottom:18px; border-bottom:1px solid var(--line);
}
.public-header h1{margin:0; font-size:19px; letter-spacing:-0.01em; text-align:center;}
.apply-tabs{display:flex; margin-bottom:22px; border-bottom:2px solid var(--line);}
.apply-tab{
  flex:1; text-align:center; padding:13px 10px;
  border:1px solid var(--line); border-bottom:none; margin-bottom:-2px;
  border-radius:var(--radius-sm) var(--radius-sm) 0 0;
  font-weight:700; font-size:14.5px; color:var(--ink-muted); text-decoration:none;
  background:var(--surface-alt);
}
.apply-tab:not(:first-child){border-left:none;}
.apply-tab.active{
  background:var(--surface); color:var(--accent); border-color:var(--accent);
  border-bottom:2px solid var(--surface);
}
.logo-slot{
  display:flex; align-items:center; justify-content:center;
  font-size:11px; color:var(--ink-muted);
}
.logo-slot img{max-width:100%; max-height:100%; object-fit:contain;}
.logo-skku{height:64px; max-width:270px;}
.field-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:24px 26px; box-shadow:var(--shadow);}
.field-form .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:14px;}
.field-form .field{display:flex; flex-direction:column; gap:5px;}
.field-form .field.full{grid-column:1 / -1;}
.field-form .field.wide{grid-column:span 2;}
/* 라벨 글자 수가 필드마다 달라 2줄로 줄바꿈되는 경우가 있는데, 그때도 같은
   줄에 있는 다른 입력창들과 시작 높이가 어긋나지 않도록 라벨 영역을 2줄
   높이만큼 항상 확보하고, 짧은 라벨은 그 안에서 아래쪽(입력창 바로 위)에
   붙입니다. */
.field-form label{
  display:block; min-height:2.6em;
  font-size:12.5px; font-weight:600; color:var(--ink-muted);
}
/* 라벨 안의 <span class="required"> 같은 요소는 라벨 본문과 같은 줄에
   그대로 붙어 있어야 하므로 inline으로 둡니다. */
.field-form label .required, .course-form label .required, .login-card label .required{
  display:inline;
}
/* 라벨에 괄호로 부연설명을 덧붙일 때는(예: "비밀번호 (조건 설명)") 이 설명을
   <small>로 감싸세요 — display:block이라 항상 본문 다음 줄에 따로 떨어지고
   (required 표시처럼 같은 줄에 붙지 않음), 글자도 더 작아서 같은 줄의 다른
   라벨과 전체 높이가 크게 어긋나지 않습니다. min-height가 2줄 분량을 항상
   확보해두므로, <small>이 없는 짧은 라벨도 입력창 시작 위치는 그대로 맞습니다. */
.field-form label small, .course-form label small, .login-card label small{
  display:block; font-size:0.82em; font-weight:500;
}
.field-form input, .field-form select, .field-form textarea{width:100%;}
.field-form .actions{margin-top:18px;}
.required{color:var(--risk);}
/* 라벨 설명이 길어서 <small>로 줄여도 여전히 좁으면, 이 필드에만 붙여서
   칸 너비를 2배로 넓혀주세요(예: 비밀번호 조건처럼 긴 설명이 붙는 경우). */
.course-form .field.wide{grid-column:span 2;}

.score-picker{display:flex; gap:6px;}
.score-picker label{
  flex:1; text-align:center; padding:10px 0; border:1px solid var(--line); border-radius:var(--radius-sm);
  cursor:pointer; font-weight:600; color:var(--ink-muted); font-size:13px;
}
.score-picker input{display:none;}
.score-picker input:checked + label{background:var(--accent-soft); color:var(--accent); border-color:var(--accent);}

/* ---------- 만족도 조사(공개 폼) ---------- */
.survey-section{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:22px 26px; margin-bottom:14px; box-shadow:var(--shadow);}
.survey-section h3{margin:0 0 4px; font-size:15px;}
.survey-section .q-desc{font-size:12.5px; color:var(--ink-muted); margin:0 0 14px;}
.choice-list{display:flex; flex-direction:column; gap:10px;}
.choice-list .choice-row{display:flex; align-items:center; gap:8px; font-size:14px; cursor:pointer;}
.choice-list .choice-row input[type=text]{flex:1; max-width:340px; padding:6px 8px; font-size:13px; cursor:text;}
.survey-section textarea, .survey-section input[type=text].survey-text{width:100%;}

/* ---------- 만족도 조사(결과 조회) ---------- */
.survey-response-card{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:16px 20px; margin-bottom:12px; box-shadow:var(--shadow);}
.survey-response-card .meta{font-size:12px; color:var(--ink-muted); margin-bottom:10px;}
.survey-response-card dl{display:grid; grid-template-columns:repeat(auto-fit,minmax(200px,1fr)); gap:8px 16px; margin:0;}
.survey-response-card dl > div{display:flex; flex-direction:column; gap:2px;}
.survey-response-card dt{font-size:11.5px; color:var(--ink-muted); font-weight:600;}
.survey-response-card dd{margin:0; font-size:13.5px;}
.survey-response-card .opinion{margin:10px 0 0; padding-top:10px; border-top:1px solid var(--line); font-size:13.5px;}

/* ---------- 과정 관리 ---------- */
.course-form{background:var(--surface); border:1px solid var(--line); border-radius:var(--radius); padding:20px 22px; margin-bottom:24px; box-shadow:var(--shadow);}
.course-form .grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px;}
.course-form .field{display:flex; flex-direction:column; gap:5px;}
.course-form label{
  display:block; min-height:2.6em;
  font-size:12px; font-weight:600; color:var(--ink-muted);
}
.course-form input, .course-form select{width:100%;}
.course-form .actions{margin-top:16px; display:flex; gap:10px;}
.link-box{
  display:flex; align-items:center; gap:10px; flex-wrap:wrap;
  background:var(--surface-alt); border:1px solid var(--line); border-radius:var(--radius-sm);
  padding:10px 14px; margin-top:10px; font-size:12.5px;
}

/* ---------- 엑셀 일괄 업로드 ---------- */
.upload-box{
  display:flex; align-items:center; gap:14px; flex-wrap:wrap;
  background:var(--surface); border:1px dashed var(--line); border-radius:var(--radius);
  padding:14px 18px; margin-bottom:8px; font-size:13px;
}
.upload-box .label{font-weight:600; color:var(--ink-muted); white-space:nowrap;}
.upload-box input[type=file]{font-size:12.5px; max-width:220px;}
.upload-box a{font-weight:600;}

/* ---------- 알림 메시지 ---------- */
.flash-stack{display:flex; flex-direction:column; gap:8px; margin-bottom:20px; position:sticky; top:8px; z-index:50;}
.flash{padding:11px 16px; border-radius:var(--radius-sm); font-size:13.5px; border-left:3px solid var(--line);}
.flash-good{background:var(--good-soft); color:var(--good); border-color:var(--good);}
.flash-risk{background:var(--risk-soft); color:var(--risk); border-color:var(--risk);}
.flash-warn{background:var(--gold-soft); color:var(--gold); border-color:var(--gold);}

::selection{background:var(--accent-soft); color:var(--ink);}

/* 협약기업 관리 — 기업 제출본 칸(다운로드·교체·재요청)은 한 줄로 고정하고 재요청 창 */
.agr-actions{display:flex; align-items:center; gap:12px; white-space:nowrap;}
.agr-actions form{display:inline; margin:0;}
.agr-request-btn:disabled{opacity:.4; cursor:not-allowed;}
.agr-link{cursor:pointer; text-decoration:underline; white-space:nowrap;}
.agr-dialog{width:480px; max-width:92vw; padding:20px 22px; border:1px solid var(--line); border-radius:var(--radius);
  background:var(--surface); color:var(--ink);}
.agr-dialog::backdrop{background:rgba(0,0,0,.45);}
.agr-chips{display:flex; flex-wrap:wrap; gap:6px; margin:6px 0 8px;}
.agr-dialog-actions{display:flex; justify-content:flex-end; gap:8px;}

/* 과정 관리 — 개강안내 자료 자동 생성 입력 영역 */
.orient-head{margin-top:6px; padding-top:12px; border-top:1px dashed var(--line);}
.orient-textarea{width:100%; padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font:inherit; line-height:1.5;}

/* 개강안내 자료 만들기 — 하루마다 입력 카드 */
.day-card{border:1px solid var(--line); border-radius:var(--radius); background:var(--surface); padding:12px 14px; margin-bottom:10px;}
.day-head{display:flex; align-items:center; gap:12px; margin-bottom:8px;}
.day-head .day-no{font-weight:700; min-width:52px; white-space:nowrap;}
.day-head input[type=date]{width:auto;}
.day-head .day-del{margin-left:auto;}
.day-card textarea{width:100%; min-height:110px; padding:9px 10px; border:1px solid var(--line); border-radius:var(--radius-sm);
  background:var(--surface); color:var(--ink); font:inherit; line-height:1.55; resize:vertical;}

/* 처리 결과 메시지 닫기 버튼 */
.flash{position:relative; padding-right:40px; box-shadow:var(--shadow-md);}
.flash-close{position:absolute; right:8px; top:50%; transform:translateY(-50%); background:transparent; color:inherit;
  border:none; font-size:18px; line-height:1; padding:2px 8px; cursor:pointer; opacity:.7;}
.flash-close:hover{opacity:1;}

/* 일정관리 — 구글 캘린더 월간 보기(읽기 전용) */
.cal-nav .cal-title{min-width:110px; text-align:center; white-space:nowrap;}
.cal-head{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); border:1px solid var(--line); border-bottom:none;
  border-radius:var(--radius) var(--radius) 0 0; overflow:hidden; background:var(--surface-alt);}
.cal-wd{padding:8px 0; text-align:center; font-size:12px; font-weight:700; color:var(--ink);}
.cal-body{border:1px solid var(--line); border-radius:0 0 var(--radius) var(--radius); overflow:hidden; background:var(--surface); box-shadow:var(--shadow);}
.cal-week{display:grid; grid-template-columns:repeat(7,minmax(0,1fr)); min-height:108px; border-bottom:1px solid var(--line); position:relative;
  background-image:repeating-linear-gradient(to right, transparent 0, transparent calc(100%/7 - 1px), var(--line) calc(100%/7 - 1px), var(--line) calc(100%/7));}
.cal-week:last-child{border-bottom:none;}
.cal-bg.out{background:var(--paper); opacity:.7;}
.cal-bg.today{background:var(--accent-soft);}
.cal-day{z-index:1; padding:3px 7px 2px; font-size:12px; font-weight:700; color:var(--ink);}
.cal-day.today{color:var(--accent);}
.cal-bg.out + .cal-day{color:var(--ink-muted);}
/* 여러 날·종일 일정: 칸을 가로질러 이어진 막대 */
.cal-bar{z-index:1; margin:1px 4px 2px; padding:1px 8px; font-size:12px; font-weight:700; line-height:1.45; border-radius:5px;
  background:var(--accent); color:#fff; white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-bar.cont-l{margin-left:0; border-top-left-radius:0; border-bottom-left-radius:0;}
.cal-bar.cont-r{margin-right:0; border-top-right-radius:0; border-bottom-right-radius:0;}
.cal-timed{z-index:1; padding:0 4px 3px; min-width:0;}
.cal-ev{font-size:12px; line-height:1.4; padding:1px 6px; margin-bottom:2px; border-radius:4px; color:var(--ink); font-weight:600;
  background:var(--surface-alt); border-left:3px solid var(--info); white-space:nowrap; overflow:hidden; text-overflow:ellipsis;}
.cal-ev .t{font-family:'IBM Plex Mono',monospace; font-size:11px; font-weight:500; color:var(--ink-muted);}
.cal-more{font-size:11px; color:var(--ink-muted); padding-left:6px;}

/* 신청자 관리 — 상태 버튼의 인원 수 */
.btn.tab .tab-count{display:inline-block; min-width:22px; margin-left:4px; padding:0 6px; border-radius:99px; text-align:center;
  background:var(--surface-alt); color:var(--ink); font-family:'IBM Plex Mono',monospace; font-size:11.5px; font-weight:700;}
.btn.tab.active .tab-count{background:var(--accent); color:#fff;}

/* 보안 1단계 - 과정 운영자(operator)의 조회 전용 화면: 쓰기 폼/버튼을 숨긴다(서버에서도 403으로 막음). */
.readonly-page.role-operator form[method="post"], .readonly-page.role-operator .upload-box,
.readonly-page.role-operator button[form], .readonly-page.role-operator [formaction]{display:none !important;}

/* 담당자 계정 - 담당 과정 체크박스 목록 */
.staff-courses{display:flex; flex-wrap:wrap; gap:6px 16px;}
.staff-course-opt{display:inline-flex; align-items:center; gap:6px; font-size:12.5px; font-weight:500; color:var(--ink); min-height:0 !important;}
.staff-course-opt input{width:auto;}
.staff-edit-row td{border-bottom:1px solid var(--line); background:var(--paper);}

/* 상단 로고(성균관대학교) - 배경 투명 PNG, 어두운 화면용은 흰색 */
.brand-logo{height:30px; width:auto; display:block;}

/* 대시보드 - 분류별 소계 행 */
.subtotal-row td{background:var(--surface-alt); font-weight:700; border-top:1px solid var(--line);}