/* ============================================================
   Dentium 互评考核系统 — 목업(peer-review.html:7-329) CSS 그대로 이식.
   디자인 토큰/규칙은 변경하지 않으며, 반응형 규칙은 파일 하단에 추가.
   ============================================================ */
*{box-sizing:border-box;margin:0;padding:0}
:root{
  --olive-900:#3a4a00;
  --olive-800:#4a5e00;
  --olive-700:#6b8500;
  --olive-600:#8aaa00;
  --olive-400:#b8d400;
  --lime-500:#c5dc1e;
  --lime-400:#d4e84a;
  --cream-50:#f8fae8;
  --cream-100:#f0f4cc;
  --cream-200:#e4ecaa;
  --line:#cdd980;
  --line-soft:#dce880;
  --ink-900:#222800;
  --ink-700:#3a4200;
  --ink-500:#6a7200;
  --ink-400:#8a9200;
  --white:#ffffff;
  --gA:#3d8b3f;
  --gB:#7fa93b;
  --gC:#c9a227;
  --gD:#d68437;
  --gE:#c04a4a;
  --accent-red:#a63535;
  --shadow-sm:0 1px 3px rgba(60,70,0,.06);
  --shadow-md:0 4px 14px rgba(60,70,0,.08);
  --shadow-lg:0 8px 28px rgba(60,70,0,.12);
}
body{
  font-family:"Pingfang SC","Microsoft Yahei","Malgun Gothic","Segoe UI",sans-serif;
  background:#f0f0f0;
  color:var(--ink-900);
  font-size:13.5px;
  line-height:1.55;
  letter-spacing:.01em;
}
header{
  background:#ffffff;
  color:var(--ink-900);
  padding:10px 24px;
  display:flex;
  justify-content:space-between;
  align-items:center;
  flex-wrap:wrap;
  gap:12px;
  box-shadow:0 2px 6px rgba(0,0,0,.10);
  position:sticky;
  top:0;
  z-index:100;
  border-bottom:2px solid var(--olive-400);
}
.brand{
  font-size:18px;
  font-weight:700;
  color:var(--olive-800);
  letter-spacing:.5px;
}
.brand span{
  color:var(--olive-600);
  font-weight:600;
}
nav{display:flex;gap:4px;flex-wrap:wrap}
nav button{
  background:#f4f4f4;
  color:var(--ink-700);
  border:1px solid #ddd;
  padding:6px 16px;
  border-radius:4px;
  cursor:pointer;
  font-size:13px;
  font-weight:500;
  transition:all .18s ease;
}
nav button:hover{
  background:#e8e8e8;
  color:var(--ink-900);
  border-color:#bbb;
}
nav button.active{
  background:var(--olive-700);
  color:#fff;
  font-weight:700;
  border-color:var(--olive-700);
  box-shadow:0 2px 6px rgba(60,90,40,.25);
}
.user-info{
  font-size:13px;
  color:var(--ink-700);
  display:flex;
  align-items:center;
  gap:14px;
}
.user-info button{
  background:#f4f4f4;
  border:1px solid #ddd;
  color:var(--ink-700);
  cursor:pointer;
  font-size:12px;
  padding:5px 12px;
  border-radius:4px;
  transition:all .18s ease;
}
.user-info button:hover{background:#e8e8e8}
main{padding:24px 28px;max-width:1440px;margin:0 auto}
h2{
  font-size:18px;
  font-weight:700;
  color:var(--olive-900);
  padding-left:12px;
  margin-bottom:16px;
  border-left:4px solid var(--olive-600);
  letter-spacing:-.01em;
}
h3{
  font-size:15px;
  font-weight:700;
  color:var(--olive-800);
  margin-bottom:12px;
  letter-spacing:-.005em;
}
.card{
  background:var(--white);
  border:1px solid #ddd;
  border-radius:6px;
  padding:20px;
  margin-bottom:16px;
  box-shadow:0 1px 4px rgba(0,0,0,.06);
}
table{
  width:100%;
  border-collapse:collapse;
  font-size:13px;
  background:#fff;
  border-radius:4px;
  overflow:hidden;
}
th,td{
  border:1px solid #d0d0d0;
  padding:8px 10px;
  text-align:center;
  vertical-align:middle;
}
th{
  background:var(--olive-800);
  color:#fff;
  font-weight:600;
  font-size:12.5px;
  letter-spacing:.02em;
}
tr:nth-child(even) td{background:#f8f8f8}
tr:hover td{background:#f4f8cc;transition:background .12s ease}
.name-cell{font-weight:700;color:var(--ink-900)!important;}
select,input[type=text],input[type=password],input[type=number]{
  padding:6px 9px;
  border:1px solid #ccc;
  border-radius:4px;
  font-size:13px;
  background:#fff;
  color:var(--ink-900);
  font-family:inherit;
  transition:border-color .15s ease,box-shadow .15s ease;
}
select:focus,input:focus{
  outline:none;
  border-color:var(--olive-600);
  box-shadow:0 0 0 3px rgba(60,90,40,.12);
}
.btn{
  background:var(--olive-700);
  color:#fff;
  border:none;
  padding:8px 20px;
  border-radius:4px;
  font-weight:600;
  cursor:pointer;
  font-size:13px;
  letter-spacing:.02em;
  box-shadow:0 2px 6px rgba(60,90,40,.20);
  transition:all .18s ease;
}
.btn:hover{
  transform:translateY(-1px);
  box-shadow:0 4px 14px rgba(116,138,46,.35);
}
.btn:active{transform:translateY(0)}
.btn-sec{
  background:var(--cream-200);
  color:var(--olive-800);
  box-shadow:none;
}
.btn-sec:hover{
  background:var(--line);
  box-shadow:0 2px 6px rgba(45,52,20,.08);
}
.btn-del{
  background:var(--gE);
  color:#fff;
  padding:5px 11px;
  box-shadow:0 2px 6px rgba(192,74,74,.25);
  font-size:12px;
}
.grade{
  display:inline-block;
  min-width:26px;
  padding:3px 9px;
  border-radius:12px;
  color:#fff;
  font-weight:700;
  font-size:12px;
  letter-spacing:.03em;
  box-shadow:0 1px 3px rgba(0,0,0,.1);
}
.gA{background:var(--gA)}
.gB{background:var(--gB)}
.gC{background:var(--gC)}
.gD{background:var(--gD)}
.gE{background:var(--gE)}
.hint{
  font-size:12.5px;
  color:var(--ink-500);
  margin-bottom:14px;
  padding:10px 14px;
  background:var(--cream-100);
  border-left:3px solid var(--olive-400);
  border-radius:0 6px 6px 0;
}
.login-box{
  max-width:400px;
  margin:70px auto;
  background:#fff;
  padding:38px 40px;
  border-radius:16px;
  box-shadow:var(--shadow-lg);
  border:1px solid var(--line-soft);
}
.login-box h1{
  color:var(--olive-800);
  margin-bottom:8px;
  font-size:22px;
  font-weight:700;
  letter-spacing:-.01em;
}
.login-box label{
  display:block;
  margin:14px 0 5px;
  font-size:12px;
  color:var(--ink-500);
  font-weight:500;
  letter-spacing:.02em;
}
.login-box input,.login-box select{
  width:100%;
  padding:10px 12px;
  font-size:14px;
}
.login-box .btn{
  width:100%;
  margin-top:20px;
  padding:12px;
  font-size:14px;
}
.err{
  color:var(--accent-red);
  font-size:12px;
  margin-top:10px;
  padding:8px 10px;
  background:#fff0f0;
  border-radius:4px;
}
.small{
  font-size:12px;
  color:var(--ink-500);
}
.num{width:58px;text-align:center}
.history{
  font-size:11px;
  color:var(--ink-500);
  text-align:left;
  margin-top:5px;
  padding:4px 6px;
  background:var(--cream-50);
  border-radius:4px;
}
textarea{
  width:100%;
  font-family:inherit;
  font-size:13px;
  padding:8px 10px;
  border:1px solid var(--line);
  border-radius:6px;
  min-height:38px;
  background:#fff;
  resize:vertical;
  transition:border-color .15s ease;
}
textarea:focus{
  outline:none;
  border-color:var(--olive-600);
  box-shadow:0 0 0 3px rgba(116,138,46,.12);
}
.row{display:flex;gap:12px;align-items:center;margin-bottom:10px;flex-wrap:wrap}
/* 1차 평가 특별 스타일 */
tr.row-final td{background:linear-gradient(135deg,#fdf1e0,#faead0)!important;font-weight:600}
tr.row-total td{
  background:linear-gradient(135deg,var(--olive-800),var(--olive-700))!important;
  color:#fff;
  font-weight:700;
}
tr.row-total td b{color:#fff}
.cell-cat{
  background:var(--cream-100)!important;
  color:var(--olive-800);
  font-weight:700;
  letter-spacing:.02em;
}
.cell-weight{
  background:var(--olive-700)!important;
  color:#fff;
  font-weight:700;
}

/* ============================================================
   반응형 규칙 (모바일/태블릿). 디자인 토큰/기본 규칙은 위와 동일하게 유지.
   ============================================================ */

/* 인원×항목 비교 매트릭스(peer/S1/S2/S3/report/HR 표)는 reflow 대신
   가로 스크롤을 허용해 "여러 사람을 나란히 비교"하는 본래 기능을 보존한다. */
.table-scroll{
  overflow-x:auto;
  -webkit-overflow-scrolling:touch;
  border-radius:4px;
}
.table-scroll table{min-width:640px}

.lang-switch{display:flex;gap:4px;align-items:center}
.lang-switch button{
  background:none;border:1px solid #ddd;color:var(--ink-500);
  font-size:11px;padding:3px 8px;border-radius:4px;cursor:pointer;
}
.lang-switch button.active{background:var(--olive-700);color:#fff;border-color:var(--olive-700);font-weight:700}

.progress-cards{display:none}

@media (max-width:1024px){
  main{padding:16px 14px}
  header{padding:8px 14px}
  nav button{padding:6px 12px}
}

@media (max-width:640px){
  body{font-size:13px}
  header{flex-direction:column;align-items:stretch;gap:8px}
  .brand{font-size:16px;text-align:center}
  nav{justify-content:center}
  .user-info{justify-content:center;flex-wrap:wrap;text-align:center}
  main{padding:12px 10px}
  .card{padding:14px}
  .login-box{margin:32px auto;padding:26px 22px;max-width:92vw}
  .btn,nav button{min-height:36px}
  .table-scroll table{font-size:12px}
  .table-scroll th,.table-scroll td{padding:6px 7px}

  /* 진행률 그룹 요약표: rowspan이 없는 단순 표라 카드로 reflow 가능 */
  table.simple-reflow thead{display:none}
  table.simple-reflow, table.simple-reflow tbody, table.simple-reflow tr, table.simple-reflow td{display:block;width:100%}
  table.simple-reflow tr{border:1px solid #ddd;border-radius:6px;margin-bottom:10px;padding:8px;background:#fff}
  table.simple-reflow td{border:none;text-align:left;padding:4px 2px}
  table.simple-reflow td[data-label]::before{
    content:attr(data-label);
    display:inline-block;min-width:80px;font-weight:600;color:var(--olive-800);font-size:11px;
  }
}