/* 재직자 훈련 신청관리 — 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;
  --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;
    --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;
}
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;}
.subtitle{color:var(--ink-muted); margin:0 0 24px; font-size:13.5px; max-width:78ch;}
.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);}

/* ---------- 표 ---------- */
.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;}
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;}
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);}
.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);}

.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;}
.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{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{
  display:flex; justify-content:space-between; align-items:center; gap:16px; flex-wrap:wrap;
  padding-bottom:18px; margin-bottom:20px; border-bottom:1px solid var(--line);
}
.public-header h1{margin:0; font-size:19px; letter-spacing:-0.01em;}
.public-logos{display:flex; gap:10px; flex-shrink:0;}
.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;}
.logo-gbsa{height:48px; max-width:180px;}
.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 label{font-size:12.5px; font-weight:600; color:var(--ink-muted);}
.field-form input, .field-form select, .field-form textarea{width:100%;}
.field-form .actions{margin-top:18px;}
.required{color:var(--risk);}

.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{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;}
.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);}