:root{
  --bg:#f6f6f2; --paper:#fdfdfb; --ink:#161815; --ink2:#4d524b; --mute:#8b9088;
  --line:#e2e3dc; --line2:#d0d2c9;
  --green:#62b34a; --green-d:#2f7a2b; --green-dd:#1d4f1d; --green-t:#eef6ea;
  --amber:oklch(0.72 0.12 75); --red:oklch(0.58 0.16 28);
  --sans:'Pretendard Variable',Pretendard,-apple-system,sans-serif;
  --serif:'Instrument Serif',serif; --mono:'JetBrains Mono',ui-monospace,monospace;
}
*{box-sizing:border-box;margin:0;padding:0}
html,body,#root{height:100%}
/* font-synthesis:none — 브라우저가 임의로 기울임을 합성하지 못하게 막는다.
   (Instrument Serif 는 정체만 로드하므로 기울임 요청 시 임의 합성이 일어난다) */
body{font-family:var(--sans);background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;font-size:14px;letter-spacing:-0.01em;font-synthesis:none}
/* 기울임 전면 금지 — em/i/cite 등 브라우저 기본 italic 을 모두 끈다.
   위계는 굵기·색·크기로만 준다. */
em,i,cite,dfn,var,address{font-style:normal}
button{font:inherit;color:inherit;background:none;border:0;cursor:pointer}
input,textarea{font:inherit;color:inherit}
.mono{font-family:var(--mono);letter-spacing:0}
.muted{color:var(--mute)}
.eyebrow{font-family:var(--mono);font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute)}
.dot{display:inline-block;width:6px;height:6px;border-radius:50%;background:var(--green);margin-right:6px;box-shadow:0 0 0 3px rgba(98,179,74,.18)}
.link{color:var(--ink2);text-decoration:underline;text-underline-offset:3px;text-decoration-color:var(--line2)}
.link:hover{color:var(--ink)}

/* Buttons */
.btn-primary{display:inline-flex;align-items:center;justify-content:center;gap:10px;height:44px;padding:0 20px;background:var(--ink);color:#fff;border-radius:2px;font-weight:600;transition:background .2s}
.btn-primary:hover{background:var(--green-dd)}
.btn-primary:disabled{opacity:.6;cursor:default}
.btn-primary .arrow{transition:transform .2s}
.btn-primary:hover .arrow{transform:translateX(3px)}
.btn-primary.wide{width:100%;height:52px;font-size:15px}
.btn-line{height:44px;padding:0 18px;border:1px solid var(--line2);border-radius:2px;font-weight:500;background:var(--paper)}
.btn-line:hover{border-color:var(--ink)}
.btn-ghost{display:inline-flex;align-items:center;gap:8px;height:38px;padding:0 14px;border:1px solid var(--line2);border-radius:2px;font-weight:500;background:var(--paper);white-space:nowrap}
.btn-ghost:hover{border-color:var(--ink)}
/* btn-danger — 되돌릴 수 없는 동작 전용. '모든 기기에서 로그아웃' 처럼 한 번 누르면
   지금 하던 작업이 끊기는 버튼에만 쓴다. 테두리와 글자만 붉게 두어 화면에서
   유일하게 눈에 걸리지만, 기본 버튼처럼 채우지는 않는다(오조작 유도 방지). */
.btn-danger{height:44px;padding:0 20px;border:1px solid var(--red);border-radius:2px;font-weight:600;color:var(--red);background:var(--paper);transition:background .2s,color .2s}
.btn-danger:hover{background:var(--red);color:#fff}
.btn-danger:disabled{opacity:.55;cursor:default;background:var(--paper);color:var(--red)}
.pdf-badge{font-family:var(--mono);font-size:10px;font-weight:500;background:var(--red);color:#fff;padding:2px 5px;border-radius:2px;margin-right:6px;letter-spacing:0}

/* ───── Login ───── */
/* 로그인 배경은 완전 흰색. 기존의 64px 가로줄 그라디언트 오버레이는
   배경을 흰색으로 바꾸면 줄무늬만 남으므로 함께 제거했다. */
.login{min-height:100%;display:flex;flex-direction:column;background:#fff;position:relative;overflow:hidden}
.login-grid{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;padding:64px 24px 32px;position:relative}
.login-left{display:flex;flex-direction:column;align-items:center;text-align:center}
.login-left img{height:46px!important;margin-bottom:36px}
.login-title{display:flex;flex-direction:column;align-items:center;line-height:.92;font-weight:700}
.t-k{font-size:clamp(48px,7vw,88px);letter-spacing:-0.045em}
.t-ir{font-size:clamp(48px,7vw,88px);letter-spacing:-0.045em;color:var(--ink)}
/* IR 도 Platform 과 같은 산세리프(Pretendard)로 통일한다.
   세리프를 쓰지 않으므로 굵기·자간만 맞추고, 색으로만 강조를 남긴다. */
.t-ir em{font-style:normal;font-weight:700;color:var(--green);letter-spacing:-0.045em;padding-right:.06em;font-size:1em}
.login-lede{margin-top:22px;color:var(--ink2);font-size:15px}
.login-form{width:100%;max-width:380px;margin-top:48px;display:flex;flex-direction:column;gap:14px}
.form-head{display:flex;align-items:center;gap:12px;margin-bottom:4px}
.form-head::after{content:'';flex:1;height:1px;background:var(--line)}
.field{display:block;position:relative}
.field-label{display:block;font-size:12px;font-weight:600;color:var(--ink2);margin-bottom:6px}
.field input{width:100%;height:50px;padding:0 16px;border:1px solid var(--line2);background:var(--bg);border-radius:2px;font-size:15px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.field input::placeholder{color:#b3b7af}
.field input:focus{border-color:var(--green-d);background:#fff;box-shadow:0 0 0 3px rgba(98,179,74,.14)}
/* 읽기 전용 값 상자 — 입력칸과 같은 크기·규격이되 테두리를 죽여 '고칠 수 없음'을
   형태로 보여준다. 시각은 타임테이블이 정하므로 여기서는 보기만 한다. */
.ro-span{display:flex;align-items:center;height:50px;padding:0 16px;border:1px solid var(--line);background:var(--paper);border-radius:2px;font-size:15px;color:var(--ink)}
/* 아직 정해지지 않은 값. 회색으로 낮춰 '비어 있음'이 아니라 '미정'으로 읽히게 한다.
   --mute(#8b9088) 는 종이 배경에서 3.2:1 이라 작은 글씨 기준(4.5:1)에 미달해
   '시간 미정'이 흐릿하게 사라졌다. #6a6f67 로 올려 종이 5.05:1 / 페이지 4.75:1
   을 확보한다 — 두 배경 어디에 놓여도 읽힌다. */
.ro-span.tbd,.tbd{color:#6a6f67}
.tbd{font-style:normal}
.form-err{min-height:16px;font-size:12px;color:var(--red)}
/* 로그인 화면 상단 안내(세션 만료 등).
   오류(.form-err, 빨강)와 구분되는 '상태 설명' 이므로 경고색 계열의 조용한
   블록으로 둔다. 빨간 오류로 칠하면 사용자가 '내가 뭘 잘못했다'로 읽는다. */
.form-notice{display:flex;align-items:flex-start;gap:9px;padding:10px 13px;
  background:oklch(0.97 0.035 85);border-left:3px solid oklch(0.72 0.12 75);
  border-radius:2px;font-size:12.5px;line-height:1.5;color:oklch(0.36 0.04 75);
  margin:-2px 0 2px}
.form-notice-ico{flex:none;width:14px;height:14px;margin-top:2px;border-radius:50%;
  background:oklch(0.72 0.12 75);position:relative}
.form-notice-ico::after{content:'!';position:absolute;inset:0;display:flex;
  align-items:center;justify-content:center;font-size:10px;font-weight:700;
  color:#fff;line-height:1}
/* '로그인 유지' 체크 한 줄. 기본 체크박스는 브라우저마다 크기가 달라
   폼 안에서 혼자 튀므로 크기를 고정하고, 설명은 오른쪽에 작게 붙인다. */
.check-row{display:flex;align-items:flex-start;gap:9px;cursor:pointer;user-select:none;margin:-2px 0 2px}
.check-row input[type=checkbox]{width:16px;height:16px;margin:1px 0 0;accent-color:var(--green-d);cursor:pointer;flex:none}
.check-row input[type=checkbox]:disabled{cursor:default}
.check-txt{display:flex;flex-direction:column;gap:2px;font-size:12.5px;font-weight:600;color:var(--ink2);line-height:1.35}
.check-txt em{font-size:11.5px;font-weight:400;color:var(--mute);letter-spacing:-0.01em}
.form-foot{text-align:center;font-size:12px;color:var(--mute);margin-top:6px}
/* ── 연결 실패 안내 (Connection.tsx) ──
   로그인 화면과 같은 골격을 쓰되, 입력칸 대신 안내 카드를 놓는다.
   '세션이 날아갔다'로 오해되지 않도록 문구·배지로 성격을 분명히 한다. */
.conn-box{width:100%;max-width:380px;margin-top:44px;display:flex;flex-direction:column;gap:14px;text-align:left}
.conn-badge{align-self:flex-start;font-size:11px;font-weight:600;letter-spacing:.02em;padding:4px 9px;border-radius:2px;background:oklch(0.96 0.04 85);color:oklch(0.45 0.1 75)}
.conn-msg{margin:0;font-size:14px;line-height:1.6;color:var(--ink);font-weight:500}
.conn-tips{margin:0;padding-left:18px;display:flex;flex-direction:column;gap:6px;font-size:12.5px;line-height:1.6;color:var(--ink2)}
.conn-note{margin:0;font-size:12px;line-height:1.55;color:var(--mute)}

.login-footer{display:flex;justify-content:space-between;gap:16px;padding:20px 32px;border-top:1px solid var(--line);font-size:12px;color:var(--mute);position:relative;background:#fff}

/* ───── Topbar ───── */
.app{min-height:100%;display:flex;flex-direction:column}
.topbar{height:60px;flex:none;display:flex;align-items:center;gap:16px;padding:0 28px;border-bottom:1px solid var(--line);background:var(--paper);position:sticky;top:0;z-index:5}
.brand{display:flex;align-items:baseline;gap:8px}
.brand-name{font-weight:700;font-size:16px;letter-spacing:-0.03em}
/* 상단바의 IR Platform 도 KingoSpring 과 동일한 산세리프·굵기·크기로 맞춘다. */
.brand-tag{font-style:normal;font-weight:700;font-size:16px;letter-spacing:-0.03em;color:var(--green-d)}
.crumb{display:flex;gap:12px;color:var(--ink2);font-size:13px}
.crumb span{color:var(--line2)}
.topbar-right{margin-left:auto;display:flex;align-items:center;gap:20px;font-size:13px}
.secure{font-family:var(--mono);font-size:11px;color:var(--mute);display:flex;align-items:center}
.who{font-weight:600}

/* ───── Programs ───── */
.programs{max-width:1240px;width:100%;margin:0 auto;padding:72px 32px 96px}
.programs-head{margin-bottom:48px}
.display{font-size:clamp(36px,4.4vw,56px);line-height:1.08;letter-spacing:-0.045em;font-weight:700;margin:14px 0 14px}
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(340px,1fr));gap:20px}
/* 카드 뼈대.
   카드 전체가 '입장하기' 버튼이면서, 그 아래에 '제출 서류' 버튼이 하나 더 있어야 한다.
   <button> 안에 <button> 을 넣으면 잘못된 HTML 이라 브라우저가 안쪽 버튼을 밖으로
   밀어낸다(실제로 크롬은 DOM 을 재구성한다). 그래서 .card 는 상자(div)로 두고
   몸통(.card-main)과 서류 줄(.card-docs)을 **형제**로 놓는다. 테두리·그림자·호버
   들뜸은 상자가 담당하므로 카드 하나로 보이는 인상은 그대로다. */
.card{text-align:left;background:var(--paper);border:1px solid var(--line);border-radius:2px;display:flex;flex-direction:column;min-height:400px;position:relative;transition:border-color .25s,transform .25s,box-shadow .25s;overflow:hidden}
.card:not(.is-closed):hover{border-color:var(--ink);transform:translateY(-3px);box-shadow:0 18px 40px -24px rgba(22,24,21,.35)}
.card.is-closed{cursor:default;opacity:.62}
/* 이 위원이 그 프로그램의 발표기업을 **전부** 제출한 카드.
   마감(.is-closed)과 구분한다 — 마감은 '더 이상 못 한다', 완료는 '내가 다 했다'.
   초록 테두리와 완료 배지로 성취를 표시하되, 카드는 계속 눌러서 읽기 전용으로
   다시 들어갈 수 있다(그래서 opacity 를 낮추지 않는다). */
.card.is-done{border-color:var(--green)}
.card.is-done:hover{border-color:var(--green-d)}
.card.is-done .card-cta{color:var(--green-d)}
/* 완료 배지 — 카드 상단 우측, 상태 pill 옆. */
.pill-done{color:var(--green-dd);background:var(--green-t);border-color:var(--green);gap:5px}
.pill-done i{width:5px;height:5px;border-radius:50%;background:var(--green-d)}
.card.status-live .pill-done{color:#fff;background:rgba(255,255,255,.16);border-color:rgba(255,255,255,.55)}
.card.status-live .pill-done i{background:var(--green)}
/* 몸통. 예전 .card 의 안쪽 여백·간격을 그대로 옮겼다. */
.card-main{display:flex;flex-direction:column;gap:22px;flex:1;width:100%;padding:26px 26px 22px;text-align:left}
.card-main:disabled{cursor:default}
.card.status-live{background:var(--green-dd);color:#fff;border-color:var(--green-dd)}
.card.status-live .card-sub,.card.status-live dt{color:rgba(255,255,255,.6)}
/* 진한 초록 카드 위에서 '시간 미정'(--mute)은 배경에 묻힌다. 카드의 보조 텍스트와
   같은 흰색 60% 로 올려, 미정이라는 사실은 읽히되 값처럼 강조되지는 않게 한다. */
.card.status-live .tbd{color:rgba(255,255,255,.62)}
.card.status-live .card-meta{border-color:rgba(255,255,255,.18)}
.card.status-live .bar{background:rgba(255,255,255,.18)}
.card.status-live .bar i{background:var(--green)}
.card.status-live:hover{border-color:var(--green)}
.card-top{display:flex;justify-content:space-between;align-items:flex-start;gap:10px}
/* 카드 우측 상단 배지 묶음 — '평가 완료' 와 상태 pill 이 나란히 선다.
   좁은 카드에서 두 배지가 붙어 보이지 않도록 간격을 두고, 넘치면 줄바꿈한다. */
.card-pills{display:flex;align-items:center;gap:6px;flex-wrap:wrap;justify-content:flex-end}
.card-no{font-family:var(--serif);font-style:normal;font-size:44px;line-height:.8}
.pill{font-size:11px;font-weight:600;padding:5px 10px;border-radius:999px;border:1px solid currentColor;display:inline-flex;align-items:center}
.pill-live{color:#fff;border-color:rgba(255,255,255,.4)}
.pill-upcoming{color:var(--green-d)}
.pill-closed{color:var(--mute)}
.card-body{flex:1}
.card-sub{font-size:12px;color:var(--mute);margin-bottom:8px}
.card-title{font-size:26px;line-height:1.18;letter-spacing:-0.035em;font-weight:700;text-wrap:balance}
.card-meta{display:grid;grid-template-columns:1fr 1.3fr;gap:16px;padding-top:18px;border-top:1px solid var(--line)}
.card-meta dt{font-size:11px;color:var(--mute);margin-bottom:5px}
.card-meta dd{font-size:13px;line-height:1.5}
.card-foot{display:flex;align-items:flex-end;gap:20px}
.progress{flex:1}
.progress-label{display:flex;justify-content:space-between;font-size:11px;margin-bottom:7px;opacity:.75}
.bar{height:3px;background:var(--line);overflow:hidden}
.bar i{display:block;height:100%;background:var(--green-d);transition:width .5s}
.card-cta{font-weight:600;font-size:13px;white-space:nowrap}

/* ───── 카드 하단 '제출 서류' 줄 ─────
   위원이 프로그램마다 내야 하는 서류 6종의 진행 상황을 카드에서 바로 보여주고,
   누르면 업로드 드로어가 열린다. '입장하기' 와 경쟁하지 않도록 카드 몸통보다
   낮은 무게(작은 글씨 + 얇은 막대)로 두되, 아직 안 낸 서류가 있으면 눈에 띄어야
   하므로 숫자를 mono 로 고정 폭으로 보여 준다. */
.card-docs{display:grid;grid-template-columns:1fr auto;align-items:center;gap:6px 10px;width:100%;padding:12px 26px 14px;border-top:1px solid var(--line);text-align:left;font-size:12px;color:var(--ink2);transition:background .15s}
.card-docs:hover{background:var(--bg)}
.card-docs.complete{color:var(--green-d)}
.cd-label{display:flex;align-items:center;gap:8px;font-weight:600}
/* 6칸을 다 채웠을 때만 붙는 작은 배지. 진행 중에는 아무것도 붙이지 않는다 —
   '3/6 제출 완료' 처럼 읽히면 안 된다. */
.cd-done{font-style:normal;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--green-t);color:var(--green-dd)}
.cd-count{font-size:11px;color:var(--mute)}
.cd-bar{grid-column:1/-1;height:2px;background:var(--line);overflow:hidden}
.cd-bar i{display:block;height:100%;background:var(--green-d);transition:width .45s}
/* 진한 초록 카드 위에서는 기본 선·글자색이 묻힌다. */
.card.status-live .card-docs{border-color:rgba(255,255,255,.18);color:rgba(255,255,255,.86)}
.card.status-live .card-docs:hover{background:rgba(255,255,255,.07)}
.card.status-live .card-docs.complete{color:#fff}
.card.status-live .cd-done{background:rgba(255,255,255,.14);color:#fff}
.card.status-live .cd-count{color:rgba(255,255,255,.55)}
.card.status-live .cd-bar{background:rgba(255,255,255,.18)}
.card.status-live .cd-bar i{background:var(--green)}
/* 마감 카드에는 서류 줄 자체를 그리지 않지만, 만약 그려지더라도 눌리지 않게 둔다. */
.cards-closed .card-docs{display:none}
/* 마감된 프로그램 접기 — 위 카드 그리드와 같은 폭을 쓰는 한 줄짜리 띠.
   마감분은 기본으로 접혀 있어, 새 프로그램이 지난 프로그램에 밀리지 않는다. */
.cards-toggle{display:flex;align-items:center;justify-content:space-between;gap:16px;width:100%;margin-top:32px;padding:15px 18px;border:1px solid var(--line);border-radius:2px;background:var(--paper);font-size:13px;color:var(--ink2);transition:border-color .2s,background .2s}
.cards-toggle:hover{border-color:var(--line2);background:var(--bg)}
.cards-toggle .mono{color:var(--mute);margin-left:2px}
.cards-toggle-act{display:inline-flex;align-items:center;gap:8px;font-weight:600;color:var(--ink)}
.cards-toggle .caret{width:6px;height:6px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(45deg);transition:transform .22s cubic-bezier(.4,0,.2,1);margin-top:-3px}
.cards-toggle.open .caret{transform:rotate(-135deg);margin-top:1px}
.cards-toggle+.cards{margin-top:16px}
/* 접힌 목록의 카드는 한 단계 죽여, 지금 할 일이 아니라는 것을 색으로도 알린다. */
.cards-closed .card{opacity:.72;min-height:0}
.cards-closed .card:hover{opacity:1}
.cards-closed .card-no{font-size:30px}
.cards-closed .card-title{font-size:20px}
@media (prefers-reduced-motion:reduce){.cards-toggle .caret{transition:none}}

/* ───── Evaluate ───── */
/* 3분할: 기업 리스트 | 평가표 | IR 자료(상시 표시, 너비 조절 가능)
   `flex:1` 은 flex-basis:0% 라서 flexbox 가 height 를 무시하고 콘텐츠 높이로
   늘려 버린다(평가표가 수천 px → IR 패널이 화면 밖으로 밀림). flex-basis:auto 로
   두고 height/max-height 를 뷰포트에 고정해야 패널이 화면 안에 머문다. */
.evaluate{flex:1 1 auto;display:grid;grid-template-columns:320px minmax(0,1fr);grid-template-rows:minmax(0,1fr);min-height:0;height:calc(100vh - 60px);max-height:calc(100vh - 60px)}
.evaluate.has-pdf{grid-template-columns:320px minmax(0,1fr) var(--pdfw,460px)}
.list{border-right:1px solid var(--line);background:var(--paper);display:flex;flex-direction:column;min-height:0}
.list-head{padding:26px 24px 20px;border-bottom:1px solid var(--line)}
.list-title{font-size:20px;letter-spacing:-0.035em;margin:8px 0 18px;line-height:1.25}
.list-items{list-style:none;overflow:auto;flex:1}
.item{width:100%;display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;text-align:left;padding:16px 24px;border-bottom:1px solid var(--line);position:relative;transition:background .15s}
.item:hover{background:var(--bg)}
.item.active{background:var(--bg)}
.item.active::before{content:'';position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--green)}
.item-order{font-size:12px;color:var(--mute)}
.item.active .item-order{color:var(--green-d)}
.item-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.item-name{font-weight:600;font-size:15px}
.item-sub{font-size:12px;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.item-right{display:flex;flex-direction:column;align-items:flex-end;gap:4px}
.st{font-size:11px;font-weight:600;padding:2px 7px;border-radius:2px}
.st-todo{color:var(--mute);background:var(--bg);border:1px solid var(--line)}
.item.active .st-todo{background:var(--paper)}
.st-draft{color:oklch(0.5 0.1 75);background:oklch(0.95 0.04 85)}
.st-done{color:#fff;background:var(--green-d)}
.item-score{font-size:12px;color:var(--ink2)}
/* ───── 기업 목록 안의 쉬는시간 · 점심시간 ─────
   목록이 기업만 나열되던 때는 11:00 발표 다음 줄이 곧바로 13:20 이어도, 그 사이에
   점심이 있었다는 사실이 화면에 없었다. 위원 입장에서는 시간이 왜 건너뛰는지 알 수
   없고, 자기 진행이 밀린 건지 아닌지도 판단할 수 없다.
   타임테이블 슬롯을 그대로 섞어 그리되, 누를 수 있는 기업 줄과 헷갈리지 않도록
   점선 테두리 + 낮춘 배경 + 번호 없는 레이아웃으로 '사이 시간'임을 형태로 보여준다. */
.item-gap{display:grid;grid-template-columns:28px 1fr auto;gap:12px;align-items:center;padding:11px 24px;background:var(--bg);border-top:1px dashed var(--line2);border-bottom:1px dashed var(--line2)}
/* 연속으로 붙는 경우(쉬는시간 다음 점심시간) 선이 두 줄로 겹치지 않게 한다. */
.item-gap+.item-gap{border-top:0}
/* 기업 줄의 번호 자리. 숫자 대신 짧은 가로선을 두어 이름이 같은 x 에서 시작한다. */
.gap-ic{display:block;width:12px;height:1px;background:var(--line2)}
.gap-main{display:flex;flex-direction:column;gap:2px;min-width:0}
.gap-name{font-size:13px;font-weight:600;color:var(--ink2)}
.gap-sub{font-size:12px;color:var(--mute)}
.gap-min{font-size:11px;color:var(--mute)}
/* 점심은 하루의 경계라 쉬는시간과 톤을 살짝 다르게 준다(따뜻한 회색). */
.gap-lunch{background:oklch(0.97 0.015 85);border-color:oklch(0.91 0.02 85)}
.gap-lunch .gap-name{color:oklch(0.45 0.07 75)}
/* 오리엔테이션은 표(co-orient)와 같은 초록 계열 — 같은 사건이 화면마다
   다른 색이면 위원이 다른 항목으로 오해한다. */
.gap-orient{background:oklch(0.97 0.02 150);border-color:oklch(0.91 0.03 150)}
.gap-orient .gap-name{color:oklch(0.42 0.09 150)}

.sheet{display:flex;flex-direction:column;min-height:0;overflow:hidden}
.sheet-inner{flex:1;overflow:auto;padding:40px 56px 40px}
.sheet-inner>*{max-width:880px}
.co-head{display:flex;justify-content:space-between;align-items:flex-start;gap:24px}
.co-name{font-size:48px;letter-spacing:-0.05em;line-height:1.05;margin:10px 0 10px;font-weight:700}
.co-line{font-size:16px;color:var(--ink2)}
.co-facts{display:grid;grid-template-columns:repeat(4,1fr);margin:30px 0 8px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.co-facts>div{padding:14px 16px 14px 0}
.co-facts>div+div{padding-left:16px;border-left:1px solid var(--line)}
.co-facts dt{font-size:11px;color:var(--mute);margin-bottom:4px}
.co-facts dd{font-size:15px;font-weight:600}
.locked-note{display:flex;align-items:center;gap:10px;margin-top:20px;padding:14px 16px;background:var(--green-t);color:var(--green-dd);font-size:13px;font-weight:500}
.locked-note .mono{margin-left:auto;font-size:11px}
.lock-ic{width:20px;height:20px;border-radius:50%;background:var(--green-d);color:#fff;display:grid;place-items:center;font-size:11px}

/* ── 프로그램 전체 완료 안내 (평가 화면 상단) ──
   기업 단위 잠금 문구(.locked-note)와 역할이 다르다. 이쪽은 "이 프로그램은 이미
   끝났다"를 화면 맨 위에서 먼저 알려 주는 배너이고, .locked-note 는 지금 보고 있는
   기업 한 곳의 제출 시각을 보여 준다. 한 화면에 둘이 같이 뜨는 게 정상이다.
   좌측 목록(.list)과 평가표(.sheet) 사이에서 평가표 쪽 흐름을 끊지 않도록 폭을
   꽉 채우되 위아래 여백으로만 구분한다. */
.ro-banner{display:flex;align-items:flex-start;gap:12px;padding:15px 17px;
  background:var(--green-t);border-left:3px solid var(--green-d);border-radius:2px;
  margin-bottom:26px}
.ro-ic{flex:none;width:22px;height:22px;margin-top:1px;border-radius:50%;
  background:var(--green-d);color:#fff;display:grid;place-items:center;
  font-size:12px;font-weight:700}
.ro-txt{display:flex;flex-direction:column;gap:3px;min-width:0}
.ro-txt b{font-size:13.5px;font-weight:700;color:var(--green-dd);letter-spacing:-0.02em}
.ro-txt span{font-size:12.5px;line-height:1.55;color:var(--ink2)}
.ro-count{flex:none;margin-left:auto;font-size:11.5px;font-weight:600;
  color:var(--green-dd);white-space:nowrap;padding-top:2px}

.block{margin-top:40px}
.block-head{display:flex;justify-content:space-between;align-items:baseline;margin-bottom:12px}
.block h3,.q h3{font-size:15px;font-weight:700;letter-spacing:-0.02em}
.block-head .muted{font-size:12px}
.crit{border-top:1px solid var(--line)}
.crit-row{border-bottom:1px solid var(--line);transition:background .2s}
.crit-row.miss{background:oklch(0.97 0.02 28)}
.crit-row.miss .crit-input input{border-color:var(--red)}
.crit-i{font-size:11px;color:var(--mute)}
.crit-name{font-weight:600;font-size:15px;display:flex;align-items:baseline;gap:8px}
.crit-en{font-family:var(--serif);font-style:normal;font-weight:400;color:var(--mute);font-size:15px}
.crit-desc{font-size:12.5px;color:var(--mute);margin-top:3px;line-height:1.5}
.crit-bar{height:3px;background:var(--line)}
.crit-bar i{display:block;height:100%;background:var(--green);transition:width .3s}
.crit-input{display:flex;align-items:center;gap:8px;justify-content:flex-end}
.crit-input input{width:58px;height:42px;text-align:center;border:1px solid var(--line2);background:var(--paper);border-radius:2px;font-family:var(--mono);font-size:17px;font-weight:500;outline:none}
.crit-input input:focus{border-color:var(--green-d);box-shadow:0 0 0 3px rgba(98,179,74,.14)}
.crit-input input:disabled{background:var(--bg);color:var(--ink2)}
.crit-max{font-size:12px;color:var(--mute);width:34px}
.crit-total{display:flex;justify-content:space-between;align-items:baseline;padding:18px 0 0}
.crit-total>span:first-child{font-weight:700}
.total-num b{font-size:40px;font-weight:500;letter-spacing:-0.04em}
.total-num .muted{font-size:14px}

.block.two{display:grid;grid-template-columns:1.4fr 1fr;gap:24px}
.q{padding:4px 0}
.q h3{margin-bottom:12px}
.seg{display:flex;border:1px solid var(--line2);border-radius:2px;background:var(--paper)}
.q.miss .seg{border-color:var(--red)}
.seg button{flex:1;height:46px;font-weight:500;color:var(--ink2);transition:background .15s,color .15s}
.seg button+button{border-left:1px solid var(--line2)}
.seg button:hover:not(:disabled){background:var(--bg)}
.seg button.on{background:var(--ink);color:#fff}
.seg button:disabled{cursor:default}
.comment{width:100%;min-height:150px;resize:vertical;padding:16px;border:1px solid var(--line2);background:var(--paper);border-radius:2px;font-size:14px;line-height:1.7;outline:none}
.comment:focus{border-color:var(--green-d);box-shadow:0 0 0 3px rgba(98,179,74,.14)}
.comment:disabled{background:var(--bg)}

.actionbar{flex:none;display:flex;align-items:center;justify-content:space-between;padding:14px 56px;border-top:1px solid var(--line);background:var(--paper)}
.actions{display:flex;gap:8px}
.save-state{font-size:12px}

/* Modal */
.modal-bg{position:fixed;inset:0;background:rgba(22,24,21,.42);display:grid;place-items:center;z-index:20;animation:fade .2s}
.modal{width:420px;background:var(--paper);padding:30px;border-radius:2px;animation:rise .25s}
.modal-title{font-size:30px;letter-spacing:-0.04em;margin:8px 0 22px}
.modal-sum{display:grid;grid-template-columns:repeat(3,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:16px}
.modal-sum>div{padding:12px 0;display:flex;flex-direction:column;gap:4px}
.modal-sum>div+div{padding-left:14px;border-left:1px solid var(--line)}
.modal-sum span{font-size:11px;color:var(--mute)}
.modal-sum b{font-size:20px}
.modal-sum small{font-size:12px;color:var(--mute);font-weight:400}
.modal .muted{font-size:13px}
.modal-actions{display:flex;justify-content:flex-end;gap:8px;margin-top:24px}

/* ── 평가 완료 안내 (모든 기업 제출 직후) ──
   이 모달은 '알림'이지 '질문'이 아니다. 선택지가 하나뿐이므로 표(table)를 채우고
   확인 버튼 하나만 둔다. 배경을 눌러도 닫히지 않게 Modal 에 no-op 을 넘긴다 —
   실수로 닫으면 위원은 끝났다는 사실을 놓치고 목록으로 돌아가게 된다. */
.done-modal{width:460px;text-align:center;padding:36px 34px 26px}
.done-mark{display:grid;place-items:center;margin:0 auto 18px}
.done-ring{stroke:var(--green);stroke-width:2.5;stroke-linecap:round;
  stroke-dasharray:151;stroke-dashoffset:151;animation:done-ring .55s .05s ease-out forwards}
.done-check{stroke:var(--green-d);stroke-width:3.5;stroke-linecap:round;stroke-linejoin:round;
  stroke-dasharray:35;stroke-dashoffset:35;animation:done-check .4s .45s ease-out forwards}
@keyframes done-ring{to{stroke-dashoffset:0}}
@keyframes done-check{to{stroke-dashoffset:0}}
.done-modal .eyebrow{justify-content:center}
.done-title{font-size:28px;letter-spacing:-0.04em;line-height:1.2;margin:10px 0 14px;text-wrap:balance}
.done-lede{margin:0 0 22px;font-size:13.5px;line-height:1.75;color:var(--ink2)}
.done-lede b{font-weight:700;color:var(--ink)}
.done-sum{display:grid;grid-template-columns:1fr 1fr;border-top:1px solid var(--line);
  border-bottom:1px solid var(--line);margin-bottom:4px;text-align:left}
.done-sum>div{padding:14px 0;display:flex;flex-direction:column;gap:3px}
.done-sum>div+div{padding-left:18px;border-left:1px solid var(--line)}
.done-sum dt{font-size:11px;color:var(--mute)}
.done-sum dd{font-size:19px;font-weight:700;letter-spacing:-0.02em}
.done-sum dd .mono{font-size:19px}
.done-acts{justify-content:stretch;margin-top:22px}
.done-acts .btn-primary{width:100%;justify-content:center}
.done-foot{font-size:11.5px;margin:12px 0 0;text-align:center}
/* 모션을 줄이도록 설정한 사용자에게는 애니메이션 없이 완성 상태로 보여 준다
   (dashoffset 을 0 으로 두지 않으면 체크가 영원히 안 보인다). */
@media (prefers-reduced-motion:reduce){
  .done-ring,.done-check{animation:none;stroke-dashoffset:0}
}
.pdf{width:min(860px,92vw);height:86vh;background:var(--paper);display:flex;flex-direction:column;animation:rise .25s}
.pdf-top{display:flex;align-items:center;gap:16px;padding:14px 18px;border-bottom:1px solid var(--line);font-size:13px;font-weight:500}
.pdf-top .muted{font-size:12px;font-weight:400}
.pdf-top .link{margin-left:auto}
.pdf-page{flex:1;margin:24px;background:repeating-linear-gradient(135deg,var(--bg) 0 10px,#efefea 10px 20px);display:grid;place-items:center;position:relative;font-size:12px;color:var(--mute)}
.watermark{position:absolute;bottom:18px;right:20px;font-family:var(--mono);font-size:11px;color:var(--line2)}

.toast{position:fixed;left:50%;bottom:90px;transform:translate(-50%,12px);background:var(--ink);color:#fff;padding:12px 18px;font-size:13px;border-radius:2px;opacity:0;pointer-events:none;transition:all .25s;z-index:30}
.toast.show{opacity:1;transform:translate(-50%,0)}


/* criteria rows with notes */
.crit-row{display:block;padding:16px 0 14px}
.crit-top{display:grid;grid-template-columns:32px 1fr 120px 108px;gap:16px;align-items:center}
.crit-note{margin:10px 0 0 48px;position:relative}
.crit-note textarea{width:100%;min-height:38px;resize:none;overflow:hidden;padding:9px 12px;border:1px dashed var(--line2);background:transparent;border-radius:2px;font-size:13px;line-height:1.55;outline:none;transition:border-color .2s,background .2s}
.crit-note textarea:focus{border-style:solid;border-color:var(--green-d);background:#fff}
.crit-note textarea:not(:placeholder-shown){border-style:solid;background:var(--paper)}
.crit-note textarea:disabled{background:transparent;border-color:var(--line)}
.crit-note textarea::placeholder{color:#b3b7af}
.note-count{position:absolute;right:10px;bottom:-16px;font-size:10px;color:var(--mute)}
.demo-hint{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:center;margin-top:8px;font-size:12px;color:var(--ink2)}
.demo-hint button{padding:4px 8px;border:1px solid var(--line);border-radius:2px;background:var(--bg)}
.demo-hint button:hover{border-color:var(--ink)}
.demo-hint .mono{font-size:11px;color:var(--mute)}
.login-logo{height:46px;width:auto;margin-bottom:36px}
/* 불러오기 실패 — '데이터 없음'(.empty)과 **다르게** 보여야 한다.
   같은 회색 점선 상자를 쓰면 연결 문제가 "자료가 없다"로 읽힌다. */
.load-fail{max-width:520px;margin:48px auto;padding:28px 24px;text-align:center;border:1px solid var(--line2);background:var(--paper)}
.load-fail-msg{margin:0 0 18px;font-size:14px;line-height:1.6;color:var(--ink);font-weight:500}
.load-fail-acts{display:flex;align-items:center;justify-content:center;gap:16px;flex-wrap:wrap}

.empty{padding:48px;text-align:center;color:var(--mute);border:1px dashed var(--line2)}
.evaluate-empty{padding:80px;text-align:center;color:var(--mute)}

/* admin shell */
.topbar.is-admin{background:var(--ink);color:#fff;border-color:var(--ink)}
.topbar.is-admin .brand-tag{color:var(--green)}
.topbar.is-admin .link{color:rgba(255,255,255,.7)}
.topbar.is-admin .crumb{color:rgba(255,255,255,.75)}
.topbar.is-admin .crumb span{color:rgba(255,255,255,.3)}
.admin-chip{font-family:var(--mono);font-size:10px;letter-spacing:.08em;padding:3px 6px;background:var(--green);color:var(--ink);border-radius:2px;align-self:center}
.adm{flex:1;display:grid;grid-template-columns:248px 1fr;min-height:calc(100vh - 60px)}
.adm-nav{border-right:1px solid var(--line);background:var(--paper);padding:28px 16px;display:flex;flex-direction:column;gap:4px;position:sticky;top:60px;height:calc(100vh - 60px);overflow:auto}
.adm-nav>.eyebrow{padding:0 10px 10px}
.adm-nav>button{display:flex;justify-content:space-between;align-items:center;padding:10px;border-radius:2px;font-weight:600;text-align:left}
.adm-nav>button .mono{font-size:11px;color:var(--mute);font-weight:400}
.adm-nav-right{display:flex;align-items:center;gap:6px}
.adm-caret{width:6px;height:6px;border-right:1.5px solid var(--mute);border-bottom:1.5px solid var(--mute);transform:rotate(-45deg);transition:transform .22s cubic-bezier(.4,0,.2,1),border-color .22s;flex:none;margin-top:-2px}
.adm-nav>button[aria-expanded="true"] .adm-caret{transform:rotate(45deg);border-color:var(--ink2)}
.adm-nav>button:hover{background:var(--bg)}
.adm-nav>button.on{background:var(--bg);box-shadow:inset 3px 0 0 var(--green)}
/* 하위 목록 아코디언: 내용 높이를 몰라도 0fr→1fr 로 보간된다(max-height 매직넘버 불필요).
   바깥(.adm-sub-wrap)은 행 높이만, 안쪽(.adm-sub-inner)은 넘치는 내용을 잘라낸다. */
.adm-sub-wrap{display:grid;grid-template-rows:0fr;transition:grid-template-rows .24s cubic-bezier(.4,0,.2,1),opacity .18s ease}
.adm-sub-wrap.open{grid-template-rows:1fr}
.adm-sub-inner{min-height:0;overflow:hidden;opacity:0;transition:opacity .18s ease}
.adm-sub-wrap.open .adm-sub-inner{opacity:1}
.adm-sub{display:flex;flex-direction:column;margin:4px 0 8px 10px;padding-left:10px;border-left:1px solid var(--line)}
@media (prefers-reduced-motion:reduce){
  .adm-sub-wrap,.adm-sub-inner,.adm-caret{transition:none}
}
.adm-sub button{text-align:left;padding:7px 8px;font-size:13px;color:var(--ink2);display:flex;gap:8px;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.adm-sub button:hover{color:var(--ink)}
.adm-sub button.on{color:var(--ink);font-weight:600}
.sdot{flex:none;width:6px;height:6px;border-radius:50%;background:var(--line2)}
.sdot.s-live{background:var(--green)}.sdot.s-upcoming{background:var(--amber)}
.adm-nav-foot{margin-top:auto;padding:10px;font-size:12px}
.adm-main{min-width:0}
.adm-page{max-width:1180px;padding:40px 48px 80px}
.adm-head{display:flex;justify-content:space-between;align-items:flex-end;gap:24px;margin-bottom:28px}
.adm-title{font-size:36px;letter-spacing:-0.045em;line-height:1.15;margin:10px 0 6px}
.adm-head .muted{font-size:13px}
.adm-toolbar{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.search{flex:1;max-width:380px;height:40px;padding:0 14px;border:1px solid var(--line2);background:var(--paper);border-radius:2px;outline:none}
.search:focus{border-color:var(--green-d)}
.back{font-size:13px;color:var(--mute);margin-bottom:18px}
.back:hover{color:var(--ink)}

.tbl{border-top:1px solid var(--ink);background:var(--paper)}
.tr{display:grid;gap:14px;align-items:center;padding:14px 16px;border-bottom:1px solid var(--line);text-align:left;width:100%;font-size:13.5px}
.tr>span{min-width:0}
.tr b{font-weight:600;display:block}
.tr small{display:block;font-size:12px;color:var(--mute);margin-top:2px}
.tr.th{font-size:11px;color:var(--mute);font-weight:500;padding-top:10px;padding-bottom:10px;background:var(--bg)}
.tr.clickable{cursor:pointer;transition:background .15s}
.tr.clickable:hover,.tr.opened{background:var(--bg)}
.sm{font-size:12.5px}
.ctr{text-align:center;justify-self:center}
.empty-row{display:block;text-align:center;color:var(--mute);padding:32px}
.ev-cols{grid-template-columns:1.1fr 1.4fr 1fr 1.5fr 1fr 1.4fr 96px}
.pg-cols{grid-template-columns:80px 2fr 1.2fr 50px 50px 64px 1.2fr 56px}
.co-cols{grid-template-columns:96px 56px 1.4fr 1.15fr 1fr 1fr 1.3fr 96px}
/* ── 끌어서 순서 변경 ──
   손잡이는 pointer 이벤트로 직접 구현한다(네이티브 HTML5 DnD 는 터치에서 동작하지 않는다).
   touch-action:none 이 없으면 모바일에서 스크롤이 먼저 먹어 pointermove 가 오지 않는다. */
.grip{flex:none;display:flex;align-items:center;justify-content:center;width:18px;height:26px;margin-right:-2px;color:var(--line2);font-size:15px;line-height:1;cursor:grab;touch-action:none;user-select:none;-webkit-user-select:none;border-radius:2px;transition:color .15s,background .15s}
.grip:hover{color:var(--ink2);background:var(--bg)}
.grip:active{cursor:grabbing;color:var(--green-dd);background:var(--green-t)}
/* 끌고 있는 줄 — DOM 순서는 그대로 두고 transform 으로만 따라오게 한다.
   (순서를 실제로 바꾸면 처음 재어 둔 좌표가 무효가 되어 삽입 위치가 흔들린다) */
.tr.dragging{position:relative;z-index:20;background:var(--paper);box-shadow:0 6px 20px rgba(0,0,0,.16);opacity:.96;user-select:none}
.tr.dragging .grip{cursor:grabbing;color:var(--green-dd)}
/* 삽입될 자리를 알려주는 선 */
.drop-line{height:2px;background:var(--green);margin:-1px 0;position:relative;z-index:21}
.drop-line::before{content:'';position:absolute;left:0;top:-2px;width:6px;height:6px;border-radius:50%;background:var(--green)}
/* 툴바 우측 버튼 2개(타임테이블 설정 / + 기업 추가)를 한 덩어리로 묶는다 */
.tb-actions{display:flex;align-items:center;gap:8px}
.tb-actions .btn-line{height:38px;padding:0 14px;font-size:12.5px}
/* 쉬는시간 줄 — 기업 줄과 **같은 co-cols 그리드**를 쓴다(열이 정확히 맞는다).
   이동/삭제 버튼도 같은 자리에 있어 관리자가 두 종류를 같은 문법으로 다룰 수 있다.
   색만 바꿔 '기업이 아닌 줄'임을 알린다. */
.tr.co-break{background:oklch(0.975 0.022 85)}
.tr.co-break .brk-mark{color:oklch(0.62 0.09 70)}
.tr.co-break .order-cell .mono{color:oklch(0.55 0.09 70);font-weight:600}
.brk-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.brk-label b{font-weight:600;color:oklch(0.45 0.1 70);font-size:13px}
.brk-label small{display:block;font-size:12px;color:oklch(0.55 0.08 70);margin-top:1px}
/* 쉬는시간 줄은 자식이 4개뿐이라(순서·시간·라벨·삭제) 그리드 7열에 그대로 붙이면
   삭제 버튼이 4번째 열(분야)에 놓인다. 마지막 열로 고정해 기업 줄의 '삭제'와 세로로 맞춘다. */
.tr.co-break .row-actions{grid-column:8;justify-self:end}
/* 점심시간 줄 — 쉬는시간과 같은 문법이되 색을 달리해 구분한다.
   오전/오후가 갈리는 지점이라 표에서 한눈에 보여야 한다. */
.tr.co-lunch{background:oklch(0.972 0.028 240)}
.tr.co-lunch .lnc-mark{color:oklch(0.55 0.1 245)}
.tr.co-lunch .order-cell .mono{color:oklch(0.48 0.1 245);font-weight:600}
.lnc-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.lnc-label b{font-weight:600;color:oklch(0.42 0.11 245);font-size:13px}
.lnc-label small{display:block;font-size:12px;color:oklch(0.5 0.09 245);margin-top:1px}
.tr.co-lunch .row-actions{grid-column:8;justify-self:end}
/* 자정을 넘긴 시각 표시(+1) */
.nd{font-style:normal;font-size:9.5px;font-weight:700;color:var(--green-dd);background:var(--green-t);padding:1px 3px;margin-left:4px;border-radius:2px;vertical-align:1px;letter-spacing:0}
/* 표 아래 타임테이블 요약 */
.tt-summary{display:flex;align-items:baseline;gap:10px;flex-wrap:wrap;margin-top:10px;padding:10px 16px;background:var(--green-t);border-left:3px solid var(--green-d);font-size:13px}
.tt-summary .mono{font-weight:600;color:var(--green-dd)}
/* ── 타임테이블 설정 드로어 ── */
/* 기업 한 칸 합계 (발표 + 질의 + 로테이션). 숫자를 고치는 즉시 갱신된다. */
.tt-sum{display:flex;align-items:baseline;justify-content:space-between;gap:12px;padding:10px 14px;margin-bottom:12px;border:1px solid var(--line);background:var(--bg);font-size:12.5px}
.tt-sum.on{background:var(--green-t);border-color:var(--green-d)}
.tt-sum .mono{font-size:12.5px;color:var(--ink2)}
.tt-sum.on .mono{color:var(--green-dd);font-weight:600}
.tt-sum b{font-weight:700}
.tt-help{line-height:1.65}
.tt-help b{font-weight:600;color:var(--ink)}
.tt-preview{border:1px solid var(--line);background:var(--bg);border-radius:2px;overflow:hidden}
.tt-preview-head{display:flex;justify-content:space-between;align-items:baseline;gap:10px;padding:11px 14px;background:var(--paper);border-bottom:1px solid var(--line);font-size:12.5px}
.tt-preview-head .mono{font-size:11.5px;color:var(--green-dd);font-weight:600}
.tt-preview-list{max-height:220px;overflow:auto}
.tt-row{display:flex;align-items:center;gap:12px;padding:7px 14px;font-size:12.5px;border-bottom:1px solid var(--line)}
.tt-row:last-child{border-bottom:0}
.tt-row .mono{flex:none;min-width:96px;font-size:11.5px;color:var(--ink2)}
.tt-row.brk{background:oklch(0.96 0.04 85);color:oklch(0.42 0.09 70);font-size:12px}
.tt-row.brk .mono{color:oklch(0.42 0.09 70)}
.tt-row.lnc{background:oklch(0.955 0.035 240);color:oklch(0.4 0.1 245);font-size:12px}
.tt-row.lnc .mono{color:oklch(0.4 0.1 245)}
.tt-preview-foot{padding:9px 14px;border-top:1px solid var(--line);background:var(--paper)}
.form-error{padding:10px 14px;background:oklch(0.96 0.03 28);color:var(--red);font-size:12.5px;border-left:3px solid var(--red)}
.id-cell{display:flex;align-items:center;gap:6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.id-type{flex:none;font-family:var(--sans);font-size:10px;font-weight:600;padding:2px 5px;border-radius:2px}
.id-type.em{background:var(--green-t);color:var(--green-dd)}
.id-type.ph{background:oklch(0.95 0.04 85);color:oklch(0.5 0.1 75)}
.pw-cell{display:flex;align-items:center;gap:8px}
.chips{display:flex;flex-wrap:wrap;gap:4px}
.chips i{font-style:normal;font-size:11px;padding:2px 7px;background:var(--bg);border:1px solid var(--line);border-radius:2px;white-space:nowrap;max-width:150px;overflow:hidden;text-overflow:ellipsis}
.row-actions{display:flex;gap:4px;justify-content:flex-end}
.tiny{font-size:11.5px;padding:4px 8px;border:1px solid var(--line2);border-radius:2px;background:var(--paper);white-space:nowrap}
.tiny:hover{border-color:var(--ink)}
.tiny.danger{color:var(--red)}
.tiny.danger:hover{border-color:var(--red)}
.danger-link{color:var(--red)!important}
.pill.on-light.pill-live{color:var(--green-dd);border-color:var(--green)}
.pct{display:flex;align-items:center;gap:10px}
.pct .bar{flex:1}
.go{font-size:12px;font-weight:600;color:var(--ink2);white-space:nowrap}

.status-switch{display:flex;flex-direction:column;gap:6px}
.seg.small button{height:36px;padding:0 14px;font-size:13px}
.tabs{display:flex;gap:28px;border-bottom:1px solid var(--line);margin-bottom:28px}
.tabs button{padding:12px 0;font-weight:600;color:var(--mute);position:relative;display:flex;gap:6px;align-items:center;white-space:nowrap}
.tabs button .mono{font-size:11px;font-weight:400}
.tabs button.on{color:var(--ink)}
.tabs button.on::after{content:'';position:absolute;left:0;right:0;bottom:-1px;height:2px;background:var(--ink)}
.tab-toolbar{display:flex;justify-content:space-between;align-items:center;gap:16px;margin-bottom:14px;font-size:13px}

/* 평균 집계 방식 선택 — 평가 현황 맨 위.
   라벨·세그먼트·설명을 한 줄에 두되, 좁은 화면에서는 설명이 다음 줄로 내려간다.
   (.btn-group 은 헤더 상태 그룹과 같은 규격을 그대로 쓴다) */
.avg-switch{display:flex;align-items:center;gap:12px;flex-wrap:wrap;padding:0 0 14px;margin-bottom:2px}
.avg-switch .tool-lbl{font-size:12px;font-weight:600;line-height:1;color:var(--ink2);white-space:nowrap}
.avg-note{font-size:12px;line-height:1.5;color:var(--ink2);flex:1;min-width:220px}
@media (max-width:720px){
  .avg-switch{gap:8px}
  .avg-note{flex-basis:100%;min-width:0}
}

.kpis{display:grid;grid-template-columns:repeat(4,1fr);border-top:1px solid var(--ink);border-bottom:1px solid var(--line);margin-bottom:28px;background:var(--paper)}
.kpis>div{padding:18px 20px;display:flex;flex-direction:column;gap:6px}
.kpis>div+div{border-left:1px solid var(--line)}
.kpis span{font-size:11px;color:var(--mute)}
.kpis b{font-size:28px;letter-spacing:-0.03em;font-weight:600}
.kpis small{font-size:13px;color:var(--mute);font-weight:400}
.matrix .rank{font-size:15px;color:var(--green-d)}
.matrix .avg{font-weight:600;font-size:15px}
.detail-row{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:12px;padding:16px;background:var(--bg);border-bottom:1px solid var(--line)}
.det-card{background:var(--paper);border:1px solid var(--line);padding:16px;font-size:12.5px}
.det-card.dim{display:flex;justify-content:space-between;opacity:.6}
.det-top{display:flex;justify-content:space-between;margin-bottom:10px}
.det-card ul{list-style:none;display:flex;flex-direction:column;gap:6px}
.det-card li{display:grid;grid-template-columns:1fr auto;gap:2px 8px}
.det-card li em{grid-column:1/-1;font-style:normal;color:var(--ink2);background:var(--bg);padding:6px 8px;font-size:12px;line-height:1.5}
.det-tags{display:flex;gap:6px;margin-top:12px}
.det-tags i{font-style:normal;font-size:11px;padding:2px 7px;border:1px solid var(--line2)}
.det-comment{margin-top:10px;color:var(--ink2);line-height:1.6}

.form-card{max-width:680px;display:flex;flex-direction:column;gap:16px}
.form-actions{display:flex;justify-content:space-between;align-items:center;margin-top:12px;padding-top:20px;border-top:1px solid var(--line)}
.form-actions.sticky{position:sticky;bottom:0;background:var(--bg);padding-bottom:16px}
.form-actions .link:disabled{opacity:.4;cursor:default}
.grid2{display:grid;grid-template-columns:1fr 1fr;gap:12px}
.grid3{display:grid;grid-template-columns:1.4fr 1fr 1fr;gap:12px}
/* 드롭다운도 입력칸과 **같은 회색 박스**로 맞춘다. 브라우저 기본 화살표는
   운영체제마다 모양·위치가 달라 잘 눈에 띄지 않으므로, 오른쪽에 화살표를 직접
   그려 넣는다(박스를 눌러 고른다는 것이 한눈에 보이도록).
   `is-empty` = 아직 고르지 않은 상태 → 안내 문구를 연한 글씨로 남긴다. */
.field select{width:100%;height:50px;padding:0 34px 0 12px;border:1px solid var(--line2);background-color:var(--bg);border-radius:2px;font:inherit;font-size:15px;appearance:none;-webkit-appearance:none;cursor:pointer;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'%3E%3Cpath d='M1 1l4 4 4-4' fill='none' stroke='%236b7069' stroke-width='1.5' stroke-linecap='round' stroke-linejoin='round'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 12px center;background-size:10px 6px}
.field select:focus{border-color:var(--green-d);background-color:#fff;box-shadow:0 0 0 3px rgba(98,179,74,.14);outline:none}
.field select:disabled{color:var(--mute);cursor:default;opacity:.6}
.field select.is-empty{color:#b3b7af}
/* 사용할 수 없는 입력칸은 '회색으로 죽인다' — 점심시간이 '없음'일 때 분 칸이
   멀쩡한 숫자를 보여주면 지금 계산에 쓰이는 값처럼 오해된다. */
.field input:disabled{background:var(--paper);color:var(--mute);cursor:default;border-color:var(--line)}
.adm .field input,.drawer .field input,.drawer .field select{height:44px;font-size:14px}

.order-cell{display:flex;align-items:center;gap:8px}
.file{display:inline-flex;align-items:center;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}

.crit-edit{background:var(--paper);border-top:1px solid var(--ink)}
.ce-row{display:grid;grid-template-columns:56px 1fr 1fr 2.2fr 72px 52px;gap:10px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--line)}
.ce-head{font-size:11px;color:var(--mute);background:var(--bg)}
.ce-row input{height:38px;padding:0 10px;border:1px solid var(--line);background:var(--bg);border-radius:2px;outline:none;width:100%;font-size:13.5px}
.ce-row input:focus{border-color:var(--green-d);background:#fff}
.ce-row .serif-in{font-family:var(--serif);font-style:normal;font-size:15px}
.ce-row input.ctr{text-align:center;font-size:15px}
.add-row{width:100%;padding:14px;text-align:left;padding-left:82px;color:var(--green-d);font-weight:600;border-bottom:1px solid var(--line)}
.add-row:hover{background:var(--green-t)}
.ce-total{display:flex;align-items:baseline;gap:14px;padding:18px 16px;justify-content:flex-end}
.ce-total>span:first-child{font-weight:700}
.ce-total b{font-size:32px;font-weight:500}
.ce-total b small{font-size:13px;color:var(--mute)}
.ce-total b.ok{color:var(--green-d)}.ce-total b.off{color:oklch(0.55 0.12 60)}
.warn{padding:12px 16px;background:oklch(0.96 0.04 85);color:oklch(0.42 0.09 70);font-size:13px;margin-bottom:16px}

/* ───── 평가위원 배정 탭 (검색 → 배정됨 → 배정 가능) ─────
   예전에는 배정된 사람과 후보가 3열 카드에 섞여 있었다. 위원이 14명만 되어도
   "이 프로그램에 누가 들어왔나" 를 체크 표시로 하나하나 따라가야 했고, 제출 서류를
   내려받으려면 카드 안에서 길을 찾아야 했다. 이제는 **배정된 사람이 위**, 후보가
   아래, 검색이 맨 위다. 목록은 카드가 아니라 한 줄씩 — 이름·서류 상태·평가 진행을
   같은 x 위치에서 비교할 수 있어야 세어진다. */

/* 검색. 위원 계정 화면의 것과 같은 인상(회색 상자 + 왼쪽 아이콘)으로 둔다 —
   같은 앱에서 검색창이 두 가지 모양이면 어느 쪽이 진짜인지 헷갈린다. */
.ev-search{position:relative;display:flex;align-items:center;margin-bottom:18px}
.ev-search input{width:100%;height:44px;padding:0 40px 0 38px;border:1px solid var(--line2);background:var(--bg);border-radius:2px;font-size:14px;outline:none;transition:border-color .2s,background .2s,box-shadow .2s}
.ev-search input::placeholder{color:#b3b7af}
.ev-search input:focus{border-color:var(--green-d);background:#fff;box-shadow:0 0 0 3px rgba(98,179,74,.14)}
/* 돋보기 — CSS 로 그린다(아이콘 폰트를 쓰지 않는 이 앱의 규칙). */
.es-ic{position:absolute;left:14px;width:11px;height:11px;border:1.5px solid var(--mute);border-radius:50%;pointer-events:none}
.es-ic::after{content:"";position:absolute;left:9px;top:8px;width:5px;height:1.5px;background:var(--mute);transform:rotate(45deg);transform-origin:left center}
.es-clear{position:absolute;right:10px;width:22px;height:22px;display:grid;place-items:center;border-radius:50%;color:var(--mute);font-size:11px}
.es-clear:hover{background:var(--line);color:var(--ink)}

/* 구역 라벨. 두 목록의 경계를 만드는 유일한 장치라 위 여백을 넉넉히 준다. */
.ev-sect{display:flex;align-items:center;gap:10px;margin:26px 0 10px}
.ev-sect:first-of-type{margin-top:0}
.ev-sect-label{display:flex;align-items:baseline;gap:8px;font-size:12px;font-weight:700;letter-spacing:.02em;color:var(--ink2);text-transform:none}
.ev-sect-label b{font-size:13px;font-weight:600;color:var(--ink)}
.ev-empty{padding:26px 18px;text-align:center;color:var(--mute);font-size:13px;border:1px dashed var(--line2)}

/* 배정된 위원 — 세로 목록. */
.ev-assigned{display:flex;flex-direction:column;border-top:1px solid var(--line)}
/* 서류 버튼을 걷어내 열이 4개 → 3개가 됐다(이름 / 평가 수 / 해제). */
.ev-row{display:grid;grid-template-columns:minmax(0,1fr) auto auto;align-items:center;gap:14px;padding:13px 14px;border-bottom:1px solid var(--line);background:var(--paper);transition:background .15s}
.ev-row:hover{background:var(--bg)}
/* 아직 저장하지 않은 배정(초안). 예전 카드의 점선과 같은 뜻이지만, 목록에서는
   왼쪽 세로 막대로 바꿔 행 높이를 흔들지 않는다. */
.ev-row.pending{background:var(--green-t);box-shadow:inset 3px 0 0 var(--green-d)}
.ev-main{min-width:0}
.ev-name{display:flex;align-items:center;gap:7px;font-size:14px}
.ev-name b{font-weight:600}
.ev-new{font-style:normal;font-size:10px;font-weight:600;padding:2px 7px;border-radius:999px;background:var(--green-d);color:#fff;white-space:nowrap}
.ev-sub{display:block;margin-top:2px;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.ev-id{color:var(--mute)}
/* ───── 보류: 평가위원 제출 서류 UI ─────
   서류 수집 기능 자체를 접으면서 화면에서 걷어냈다. 서버 라우트·테이블·
   EvalDocsDrawer 는 그대로 남겨 두었으므로, 다시 켤 때 이 CSS 도 그대로 쓴다.
   (지금은 어떤 마크업도 이 클래스들을 쓰지 않는다.) */
.ev-docs{display:flex;align-items:center;gap:9px;padding:6px 9px;border:1px solid var(--line2);border-radius:2px;background:var(--paper);font-size:11.5px;color:var(--ink2);white-space:nowrap;transition:border-color .15s,background .15s}
.ev-docs:hover{border-color:var(--ink2);background:var(--bg)}
.ev-docs.complete{border-color:var(--green);color:var(--green-dd);background:var(--green-t)}
.ev-docs-count{font-size:11px}
.ev-dots{display:flex;gap:3px}
.ev-dots i{width:6px;height:6px;border-radius:50%;background:var(--line2);font-style:normal}
.ev-dots i.on{background:var(--green-d)}
.ev-docs .caret{width:6px;height:6px;border-right:1.5px solid currentColor;border-bottom:1.5px solid currentColor;transform:rotate(45deg);margin-top:-3px;transition:transform .2s}
.ev-docs .caret.up{transform:rotate(-135deg);margin-top:2px}
/* 평가 제출 수. 서류 수와 나란히 두면 "서류는 냈는데 평가는 안 했다" 가 한눈에 보인다. */
.ev-eval{font-size:11.5px;color:var(--mute);min-width:38px;text-align:right}

/* 펼친 서류 목록 — 행 안쪽에서 오른쪽으로 들여 쓴다. */
.ev-doc-list{grid-column:1/-1;display:flex;flex-direction:column;margin-top:8px;border-top:1px dashed var(--line2)}
.ev-doc-row{display:grid;grid-template-columns:78px minmax(0,1fr) auto;align-items:center;gap:12px;padding:9px 0;border-bottom:1px dashed var(--line)}
.ev-doc-row:last-child{border-bottom:0}
.edk{font-size:11.5px;font-weight:600;color:var(--ink2)}
.ev-doc-row.done .edk{color:var(--ink)}
.edn{font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eds{color:var(--mute)}
.eda{display:flex;gap:6px;flex:none}

/* 배정 가능 목록. 배정된 목록보다 한 단계 낮춰, 지금 화면의 주인공이 위쪽임을 알린다. */

/* 배정 가능 후보 카드(3열 그리드). 후보는 '아직 안 들어온 사람'만 모인 목록이라
   세로 한 줄씩 쌓으면 위원이 늘수록 화면 아래로 끝없이 내려간다. 3열이면 두세 줄에
   끝나고, 카드 아무 데나 눌러도 배정되므로 조준할 필요도 없다.
   .assign (auto-fill minmax(280px)) 위에 얹혀 화면 폭에 따라 2~3열로 접힌다. */
.ev-cand-card{justify-content:space-between}
.ev-cand-card .a-main b{font-size:14px;font-weight:600}
.ev-cand-card .a-main small{font-size:11.5px}
/* 후보 카드는 '누르면 배정된다'는 신호가 필요하다 — 왼쪽 체크박스 자리를 대신하는
   표식. 호버하면 초록으로 바뀌어 실제 저장은 '평가위원 확정'에서 일어난다는
   점선(pending) 규칙과 헷갈리지 않게 한다. */
.a-add{flex:none;font-size:11.5px;font-weight:600;color:var(--mute);white-space:nowrap;transition:color .15s}
.ev-cand-card:hover .a-add{color:var(--green-d)}

@media (max-width:640px){
  /* 좁은 화면에서는 서류 요약과 평가 수가 이름을 밀어낸다. 서류만 남기고 접는다. */
  .ev-row{grid-template-columns:minmax(0,1fr) auto;row-gap:8px}
  .ev-eval{display:none}
  .ev-doc-list{grid-column:1/-1}
}

.assign{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:10px}
.assign-card{display:flex;align-items:center;gap:14px;padding:16px;background:var(--paper);border:1px solid var(--line);text-align:left;border-radius:2px;transition:border-color .15s}
.assign-card:hover{border-color:var(--ink2)}
.assign-card.on{border-color:var(--green-d);box-shadow:inset 0 0 0 1px var(--green-d)}
.check{flex:none;width:20px;height:20px;border:1px solid var(--line2);display:grid;place-items:center;font-style:normal;font-size:12px;color:#fff;border-radius:2px}
.assign-card.on .check{background:var(--green-d);border-color:var(--green-d)}
.a-main{flex:1;min-width:0}
.a-main b{display:block}
.a-main small{display:block;font-size:12px;color:var(--mute);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.a-prog{font-size:12px;color:var(--green-d)}
/* 확정 전(아직 저장 안 됨) 카드. 체크는 즉시 되지만 서버엔 아직 안 들어갔다는 걸
   점선 테두리로 구분한다 — 실수로 '저장됐다' 고 오해하지 않도록. */
.assign-card.pending{border-style:dashed}
.assign-card.pending.on{border-color:var(--green-d)}
/* 배정 확정 바. 위원 수를 한 번에 저장하므로 항상 보이게 두고,
   변경이 없을 때만 버튼을 비활성으로 둔다. */
/* ───── 보안 설정 (관리자) ─────
   세 덩어리(비밀번호 / 잠긴 계정 / 보유기간)를 카드로 나눈다. 한 화면에 모든
   설정이 붙어 있으면 어디까지가 한 주제인지 읽히지 않는다. */
.sec-card{background:var(--paper);border:1px solid var(--line);padding:22px 24px;margin-bottom:16px;border-radius:2px}
.sec-card>header{margin-bottom:16px}
.sec-card>header h3{font-size:16px;font-weight:600;letter-spacing:-0.02em;margin-bottom:6px}
.sec-card>header p{font-size:12.5px;line-height:1.6;max-width:62ch}
.sec-card .sec-acts{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin-top:4px}
.sec-card .sec-note{font-size:12px;line-height:1.6;max-width:62ch}
.sec-card .form-err{color:var(--red);font-size:12.5px;margin:2px 0 8px}
.sec-card .grid2{margin-top:4px}
.pw-form{display:flex;flex-direction:column;gap:12px}
.sec-empty{padding:18px 0;color:var(--mute);font-size:13px}

/* 잠긴 계정 — 한 줄에 아이디·횟수·남은 시간, 오른쪽에 해제 버튼. */
.lock-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.lock-list li{display:flex;align-items:center;justify-content:space-between;gap:14px;padding:11px 2px;border-bottom:1px solid var(--line)}
.lk-main{display:flex;flex-direction:column;gap:3px;min-width:0}
.lk-main b{font-size:13.5px;font-weight:600;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.lk-main .mono{font-size:11.5px}

/* 보유기간 — 숫자 입력 + 저장 + 지금 파기. */
.ret-row{display:flex;align-items:flex-end;gap:10px;flex-wrap:wrap;margin-bottom:12px}
.ret-row .field{width:150px}
.ret-row .btn-line{height:44px}
@media (max-width:640px){
  .sec-card{padding:18px 16px}
  .ret-row .field{width:100%}
  .ret-row .btn-line{flex:1}
}

.assign-confirm{margin-top:20px;padding-top:16px;gap:12px;flex-wrap:wrap;position:sticky;bottom:0;z-index:6;background:var(--bg);box-shadow:0 -1px 0 var(--line)}
.ac-sum{font-size:13px;color:var(--ink2)}
.ac-sum b{font-size:15px;font-weight:600;color:var(--ink)}
.ac-btns{display:flex;align-items:center;gap:18px}
.assign-confirm .btn-primary{height:38px;padding:0 18px;font-size:13.5px}

.drawer{position:fixed;top:0;right:0;bottom:0;width:min(520px,100vw);background:var(--paper);display:flex;flex-direction:column;animation:slide .28s cubic-bezier(.22,.61,.36,1)}
@keyframes slide{from{transform:translateX(30px);opacity:0}to{transform:none;opacity:1}}
/* 닫힘 — 열 때의 역방향. Drawer.tsx 의 DRAWER_EXIT_MS(220ms) 와 길이를 맞춘다.
   `forwards` 로 마지막 프레임(투명·오른쪽)을 유지한 뒤 부모가 언마운트한다.
   이게 없으면 닫는 순간 패널이 그 자리에서 '툭' 사라져 여닫이가 비대칭으로 느껴진다. */
.drawer.is-closing{animation:drawer-out .22s cubic-bezier(.4,0,1,1) forwards}
@keyframes drawer-out{from{transform:none;opacity:1}to{transform:translateX(34px);opacity:0}}
.modal-bg.is-closing{animation:modal-bg-out .22s ease forwards}
@keyframes modal-bg-out{from{opacity:1}to{opacity:0}}
@media (prefers-reduced-motion:reduce){
  .drawer,.drawer.is-closing,.modal-bg.is-closing{animation-duration:.01ms}
}
.modal-bg:has(.drawer){place-items:stretch}
.drawer-head{display:flex;justify-content:space-between;align-items:flex-start;padding:28px 28px 20px;border-bottom:1px solid var(--line)}
.drawer-head h3{font-size:24px;letter-spacing:-0.035em;margin-top:6px}
.drawer-body{flex:1;overflow:auto;padding:24px 28px;display:flex;flex-direction:column;gap:14px}
.drawer-foot{display:flex;justify-content:flex-end;gap:8px;padding:16px 28px;border-top:1px solid var(--line)}
.sect-label{font-size:12px;font-weight:700;margin-top:10px;padding-top:16px;border-top:1px solid var(--line)}
.cred{display:flex;background:var(--green-t);padding:14px 16px}
.cred>div{display:flex;flex-direction:column;gap:4px}
.cred span{font-size:11px;color:var(--green-dd)}
.cred b{font-size:15px;color:var(--green-dd);font-weight:500}
.pw-row{display:flex;gap:8px}
.pw-row input{flex:1}
.invite{border:1px solid var(--line);background:var(--bg)}
.invite-head{display:flex;justify-content:space-between;align-items:center;padding:8px 12px;border-bottom:1px solid var(--line)}
.invite pre{font-family:var(--sans);font-size:12.5px;line-height:1.7;padding:12px;white-space:pre-wrap;color:var(--ink2)}
.tpl-list{display:flex;flex-direction:column;gap:6px}
.tpl{display:flex;align-items:center;gap:12px;padding:12px 14px;border:1px solid var(--line);text-align:left;border-radius:2px}
.tpl b{display:block;font-size:13.5px}
.tpl small{font-size:12px;color:var(--mute)}
.tpl.on{border-color:var(--green-d);background:var(--green-t)}
.radio{flex:none;width:16px;height:16px;border-radius:50%;border:1px solid var(--line2)}
.tpl.on .radio{border:5px solid var(--green-d)}
.upload{display:flex;align-items:center;justify-content:center;min-height:64px;border:1px dashed var(--line2);cursor:pointer;font-size:13px;background:var(--bg)}
.upload:hover{border-color:var(--green-d)}
.upload input{display:none}

/* 관리자 기업 폼 — 제출 서류 3종 업로드 */
.doc-upload-list{display:flex;flex-direction:column;gap:10px}
.doc-upload{border:1px solid var(--line);background:var(--paper);padding:10px 12px 12px;border-radius:2px}
.doc-upload-head{display:flex;align-items:center;justify-content:space-between;gap:8px;margin-bottom:8px}
.doc-upload-head b{font-size:12.5px;font-weight:600;letter-spacing:-0.01em}
.doc-upload .upload{min-height:52px;background:#fff}
.doc-upload-state{font-family:var(--mono);font-size:9.5px;letter-spacing:0.02em;color:var(--mute);
  border:1px solid var(--line);padding:2px 6px;border-radius:2px}
.doc-upload-state.on{color:var(--green-dd);border-color:var(--green-d);background:var(--green-t)}
.doc-upload-file{display:block;max-width:100%;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;font-size:12.5px}

/* 관리자 기업 목록 — 서류 3종 등록 상태 요약 */
.doc-dots{display:flex;flex-wrap:wrap;gap:3px}
.doc-dot{font-size:9.5px;line-height:1.5;padding:1px 5px;border-radius:2px;white-space:nowrap;
  color:var(--mute);border:1px dashed var(--line);background:transparent}
.doc-dot.on{color:var(--green-dd);border-style:solid;border-color:var(--green-d);background:var(--green-t)}
/* 미제출 서류 — '빠진 것' 이므로 초록(.on)의 반대편에 둔다. 붉은 테두리에
   배경은 옅게: 여러 개가 늘어서도 화면이 시끄러워지지 않을 만큼만. */
.doc-dot.warn{color:var(--red);border-style:solid;border-color:oklch(0.78 0.09 28);background:oklch(0.97 0.02 28)}

/* ── 미제출 현황 탭 ──
   두 표(기업 / 위원)를 세로로 쌓는다. 열 수가 달라 별도 grid 를 쓴다.
   '빠진 서류' 열은 폭이 들쭉날쭉하므로 1fr 로 남는 자리를 모두 준다. */
.miss-wrap{display:flex;flex-direction:column;gap:6px}
.miss-h{display:flex;align-items:baseline;gap:8px;font-size:14px;font-weight:600;
  letter-spacing:-0.01em;margin:22px 0 10px}
.miss-h:first-of-type{margin-top:4px}
.miss-h .mono{font-size:12px;font-weight:400;color:var(--mute)}
.miss-cols-co{grid-template-columns:1.3fr 1.4fr 1fr 2fr}
.miss-cols-ev{grid-template-columns:1.3fr 1.6fr 2.6fr}
.miss-all{margin:0;align-items:center;white-space:nowrap}
.miss-all .check-txt{font-weight:500;color:var(--ink2)}
.ok-txt{color:var(--green-dd)}
.miss-wrap .tab-toolbar{list-style:none}
.miss-wrap .tab-toolbar .tool{display:flex;align-items:center;gap:12px}
@media (max-width:720px){
  .miss-cols-co{grid-template-columns:1fr;row-gap:4px}
  .miss-cols-ev{grid-template-columns:1fr;row-gap:4px}
  .miss-wrap .tab-toolbar{flex-direction:column;align-items:flex-start;gap:10px}
}

.drawer-head>div{flex:1;min-width:0}
.drawer-head h3,.tr.th span,.seg button,.adm-nav-foot,.tabs button,.tiny{white-space:nowrap}
.tr .mono.sm{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.id-cell .id-txt{overflow:hidden;text-overflow:ellipsis;min-width:0}
.adm-head>div:first-child{flex:1;min-width:0}
.adm-head .status-switch{flex:none}
.adm-title{line-height:1.2;text-wrap:balance;margin-bottom:10px}
.ev-cols{grid-template-columns:1fr 1.6fr 1fr 1.7fr 1.1fr 1.3fr 96px}
.t-k,.t-ir,.form-head .eyebrow,.brand,.brand-name,.brand-tag,.secure,.who,.crumb,.progress-label span,.block-head .muted,.save-state,.st,.pill,.card-cta{white-space:nowrap}
.form-head .eyebrow,.brand,.topbar-right,.secure,.who,.block-head .muted,.save-state{flex:none}
.crumb{min-width:0;overflow:hidden;text-overflow:ellipsis}
.login-title{gap:.06em}
.fade-in{animation:fade .35s ease}
@keyframes fade{from{opacity:0}to{opacity:1}}
@keyframes rise{from{opacity:0;transform:translateY(10px)}to{opacity:1;transform:none}}

@media (max-width:860px){
  .evaluate{grid-template-columns:1fr;height:auto}
  /* 좁은 화면에서는 3분할이 성립하지 않는다 — IR 패널을 아래로 내리고
     너비 조절 막대는 숨긴다(끌어도 의미가 없음). 높이를 고정해 스크롤이
     평가표 안에서만 일어나도록 둔다. */
  .evaluate.has-pdf{grid-template-columns:1fr;height:auto}
  .pdf-panel{border-left:0;border-top:1px solid var(--line);height:62vh;min-height:340px}
  .pdf-resizer{display:none}
  .list{max-height:300px}
  .sheet-inner{padding:28px 20px}
  .actionbar{padding:12px 20px}
  .co-facts{grid-template-columns:1fr 1fr}
  .crit-top{grid-template-columns:24px 1fr 100px}.crit-note{margin-left:40px}.adm{grid-template-columns:1fr}.adm-nav{display:none}.adm-page{padding:24px 16px}
  .crit-bar{display:none}
  .block.two{grid-template-columns:1fr}
  .secure{display:none}
}

/* ── IR 원문 PDF 실물 열람 ── */
.pdf{width:min(1020px,94vw);height:90vh}
.pdf-stage{flex:1;position:relative;background:#e9e9e4;overflow:hidden}
.pdf-frame{width:100%;height:100%;border:0;display:block;background:#fff}
.pdf-sheet{position:absolute;inset:0;display:grid;place-items:center;font-size:12px;color:var(--mute);text-align:center;padding:24px;line-height:1.8}
.pdf-sheet b{display:block;font-size:14px;color:var(--ink2);margin-bottom:6px}
.pdf-wm{position:absolute;inset:0;pointer-events:none;display:grid;place-items:center;overflow:hidden;z-index:2}
.pdf-wm span{font-family:var(--mono);font-size:15px;letter-spacing:.18em;color:rgba(22,24,21,.09);transform:rotate(-24deg);white-space:nowrap;text-transform:uppercase}
.pdf-wm i{font-style:normal;position:absolute;font-family:var(--mono);font-size:10px;letter-spacing:.1em;color:rgba(22,24,21,.10);white-space:nowrap}
.pdf-note{margin-left:auto;display:flex;align-items:center;gap:10px;font-size:11px;color:var(--mute)}
.pdf-note .dot{width:5px;height:5px;border-radius:50%;background:var(--green);display:inline-block}
.pdf-loadpad{display:flex;align-items:center;gap:8px}
.spin{width:11px;height:11px;border:1.5px solid var(--line2);border-top-color:var(--green);border-radius:50%;animation:spin .7s linear infinite;display:inline-block}
@keyframes spin{to{transform:rotate(360deg)}}

/* ── IR 자료 상시 표시 패널 (3분할 우측) ──────────────────────────
   평가위원이 기업을 고르면 자료가 곧바로 옆에 떠 있어야 한다.
   모달로 띄우면 평가표와 번갈아 열어야 해서 대조가 불가능했다. */
/* 패널 안쪽의 보조 탭 — 좁은 폭에서도 서류를 바로 바꿀 수 있게 한다. */
.pdf-panel-tabs{flex:none;display:flex;gap:4px;padding:8px 10px 0;background:var(--paper)}
.pdf-tab{flex:1;min-width:0;padding:6px 4px;border:1px solid transparent;border-radius:2px;
  font-size:11.5px;font-weight:500;color:var(--mute);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pdf-tab:hover:not(:disabled){color:var(--ink)}
.pdf-tab.on{color:var(--ink);border-color:var(--line2);background:#fff;font-weight:600}
.pdf-tab:disabled{opacity:.35;cursor:not-allowed}

.pdf-panel{display:flex;flex-direction:column;min-width:0;min-height:0;position:relative;border-left:1px solid var(--line);background:#e9e9e4}
.pdf-panel-head{flex:none;display:flex;align-items:center;gap:9px;padding:10px 13px;border-bottom:1px solid var(--line);background:var(--paper);font-size:12.5px;font-weight:500}
.pdf-panel-head .pdf-name{min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.pdf-panel-head .pdf-tool{margin-left:auto;flex:none;font-size:11px;color:var(--mute);white-space:nowrap}
.pdf-panel-body{flex:1;position:relative;min-height:0;overflow:hidden}
/* Chrome 내장 PDF 뷰어(iframe)는 자기 스크롤바를 직접 그린다.
 * 외부 CSS 로는 그 스크롤바를 꾸밀 수도 없고 없앨 수도 없다
 * (::-webkit-scrollbar 는 플러그인 내부에 적용되지 않는다).
 * 그래서 iframe 을 스크롤바 폭만큼 오른쪽으로 더 넓게 잡고,
 * 부모(.pdf-panel-body)의 overflow:hidden 으로 그 부분을 잘라낸다.
 * 뷰어의 스크롤바는 iframe 의 오른쪽 끝에 그려지므로 함께 잘려 나간다.
 * 페이지는 #view=FitH 라 폭이 늘어난 만큼만 다시 맞춰져 내용 손실은 없다. */
.pdf-panel-body .pdf-frame{width:calc(100% + 18px);height:100%}
/* ── 경계선 리사이저 ──
 * 예전에는 hover 시 초록 1px 선만 그어져서 "조절할 수 있다"는 사실이 전혀 보이지 않았다.
 * 1px 은 고해상도 화면에서 사실상 보이지 않으므로 **2px + 후광**으로 올렸다.
 * 단순히 굵게만 하면 답답해지므로(테두리처럼 보임),
 *   1) 선 자체는 2px 로 또렷하게
 *   2) 뒤에 8px 짜리 아주 옅은 초록 띠(후광)를 깔아 시선을 끌고
 *   3) 하단 ◀ ▶ 는 흰 알약 배경 위에 얹어 PDF 위에서도 읽히게
 * 하는 3단 구성이다. 평소에는 모두 opacity 0 이라 화면을 어지럽히지 않는다. */
.pdf-resizer{position:absolute;left:-7px;top:0;bottom:0;width:14px;z-index:6;cursor:col-resize;background:transparent;border:0;padding:0}
/* 2) 후광 띠 — 선 뒤에 깔리는 옅은 초록. 대비를 올리되 선을 두껍게 만들지 않는다. */
.pdf-resizer::before{content:'';position:absolute;left:3px;top:0;bottom:0;width:8px;
  background:transparent;transition:background .15s}
/* 1) 선 — 1px → 2px. 양 끝을 둥글게 해서 "테두리"가 아니라 "손잡이"로 읽히게 한다. */
.pdf-resizer::after{content:'';position:absolute;left:6px;top:0;bottom:0;width:2px;
  border-radius:2px;background:transparent;transition:background .15s}
.pdf-resizer:hover::before,.pdf-resizer:focus-visible::before,
body.resizing .pdf-resizer::before{background:rgba(98,179,74,.16)}
.pdf-resizer:hover::after,.pdf-resizer:focus-visible::after,
body.resizing .pdf-resizer::after{background:var(--green);
  box-shadow:0 0 0 1px rgba(98,179,74,.22)}
.pdf-resizer:focus-visible{outline:none}
/* 하단 좌우 세모 — "좌우로 움직일 수 있다"는 표시. 두 세모가 서로 바깥을 가리킨다.
 * 흰 알약 배경을 깔아야 PDF(회색·사진) 위에서도 초록 세모가 묻히지 않는다. */
.pdf-resizer-grip{position:absolute;left:50%;bottom:28px;transform:translateX(-50%);
  width:34px;height:16px;border-radius:99px;background:rgba(255,255,255,.94);
  box-shadow:0 1px 5px rgba(22,24,21,.22);
  opacity:0;pointer-events:none;transition:opacity .15s}
.pdf-resizer:hover .pdf-resizer-grip,.pdf-resizer:focus-visible .pdf-resizer-grip,
body.resizing .pdf-resizer-grip{opacity:1}
.pdf-resizer-grip::before,.pdf-resizer-grip::after{content:'';position:absolute;top:50%;
  margin-top:-5px;width:0;height:0;
  border-top:5px solid transparent;border-bottom:5px solid transparent}
/* ◀ 왼쪽 세모 */
.pdf-resizer-grip::before{left:6px;border-right:6px solid var(--green)}
/* ▶ 오른쪽 세모 */
.pdf-resizer-grip::after{right:6px;border-left:6px solid var(--green)}
body.resizing{cursor:col-resize;user-select:none}

/* ── 내보내기 / 감사 로그 ── */
/* 헤더 우측 액션(.adm-tools): '내보내기' 와 '상태' 가 같은 골격을 쓴다.
   예전에는 내보내기(.exp-bar)가 11px 대문자 라벨 + 28px 버튼이고
   상태(.status-switch)는 12px 굵은 라벨 + 36px 세그먼트라, 두 그룹의
   라벨 크기·버튼 높이·테두리 처리가 모두 달라 기준선이 어긋났다.
   규격을 하나로 고정해 어떤 조합에서도 같은 높이로 정렬된다. */
.adm-tools{display:flex;align-items:flex-end;gap:20px;flex-wrap:wrap;flex:none}
.tool{display:flex;flex-direction:column;gap:6px;min-width:0}
.tool-lbl{font-size:12px;font-weight:600;line-height:1;color:var(--ink2)}
/* 세그먼트: 테두리 1겹 + 버튼 사이 구분선. 높이 34px 고정. */
.btn-group{display:flex;border:1px solid var(--line2);border-radius:2px;background:var(--paper);overflow:hidden}
.btn-group button{height:34px;padding:0 13px;font-size:13px;font-weight:500;color:var(--ink2);background:var(--paper);white-space:nowrap;transition:background .15s,color .15s,border-color .15s}
.btn-group button+button{border-left:1px solid var(--line2)}
.btn-group button:hover:not(:disabled){background:var(--bg);color:var(--ink)}
.btn-group button.on{background:var(--ink);color:#fff}
/* 내보내기 3종은 **평상시 모두 같은 무게**다.
   예전에는 '상세 Excel' 만 초록으로 채워 두어, 나머지 두 개가 못 쓰는 버튼처럼
   보였다. 셋 다 같은 형식으로 두고, 손을 올렸을 때만 초록으로 짙어진다.
   (.exp 를 따로 둔 이유 — 상태 전환 그룹의 .on 은 '현재 선택된 값'이라는
    뜻이 있어 호버 색과 섞이면 어느 쪽이 선택인지 읽히지 않는다) */
.btn-group.exp button:hover:not(:disabled),
.btn-group.exp button:focus-visible{background:var(--green-dd);color:#fff}
.btn-group.exp button:focus-visible{outline:none;box-shadow:inset 0 0 0 2px var(--green-d)}
.btn-group button:disabled{opacity:.55;cursor:default}

/* 감사 로그 탭 등에서 쓰는 옛 소형 버튼 (내보내기 외 다른 곳 호환용) */
.exp-bar{display:flex;align-items:center;gap:8px;flex-wrap:wrap}
.exp-bar .lbl{font-size:11px;letter-spacing:.08em;text-transform:uppercase;color:var(--mute);margin-right:2px}
.btn-mini{display:inline-flex;align-items:center;gap:5px;padding:6px 10px;border:1px solid var(--line2);border-radius:2px;font-size:12px;font-weight:500;background:var(--paper);white-space:nowrap}
.btn-mini:hover{border-color:var(--ink2)}
.btn-mini.solid{background:var(--green-dd);border-color:var(--green-dd);color:#fff}
.btn-mini.solid:hover{background:var(--green-d)}
/* 삭제는 되돌릴 수 없으므로 색으로 경고한다. 다만 빨강을 크게 쓰면 화면이
   시끄러워지므로 테두리·글자에만 준다(채우지 않는다). */
.btn-mini.danger{color:oklch(0.48 0.16 27);border-color:oklch(0.72 0.1 27)}
.btn-mini.danger:hover{background:oklch(0.97 0.02 27);border-color:oklch(0.55 0.15 27)}
.btn-mini:disabled{opacity:.55;cursor:default}

/* ───── 제출 서류 드로어 (평가위원) ─────
   서류 6종을 세로로 한 줄씩. 위원이 '무엇이 남았는지' 를 한눈에 세려면 목록이
   격자보다 낫다 — 격자는 6칸이 흩어져 보여 빠진 칸을 찾기 어렵다. */
.eed-intro{margin:0 0 4px;font-size:13px;line-height:1.6;color:var(--ink2)}
.eed-progress{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.eed-progress>.mono{font-size:12px;color:var(--mute);white-space:nowrap}
.eed-progress .bar{flex:1}
.eed-list{display:flex;flex-direction:column;border-top:1px solid var(--line)}
.eed-row{display:flex;align-items:center;gap:14px;padding:14px 0;border-bottom:1px solid var(--line)}
.eed-main{flex:1;min-width:0}
.eed-name{display:flex;align-items:center;gap:7px;font-size:13.5px;font-weight:600}
/* 제출 완료 표시. 글자가 아니라 점 하나로 둬서, 이름 길이가 달라도 정렬이 흔들리지 않는다. */
.eed-ok{width:5px;height:5px;border-radius:50%;background:var(--green-d);font-style:normal;flex:none}
.eed-file{display:block;margin-top:3px;font-size:11.5px;color:var(--ink2);overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.eed-when{color:var(--mute)}
.eed-hint{display:block;margin-top:3px;font-size:12px;color:var(--mute);line-height:1.45}
.eed-acts{display:flex;align-items:center;gap:6px;flex:none}
/* 파일 선택창은 하나만 두고 종류를 기억해 쓴다. 화면에는 보이지 않아야 한다. */
.eed-input{position:absolute;width:1px;height:1px;opacity:0;pointer-events:none}
.eed-note{margin:4px 0 0;font-size:12px;line-height:1.6;color:var(--mute)}

.audit-list{display:flex;flex-direction:column;border:1px solid var(--line);background:var(--paper)}
.audit-row{display:grid;grid-template-columns:150px 130px 1fr 150px;gap:14px;padding:11px 14px;border-bottom:1px solid var(--line);font-size:12.5px;align-items:baseline}
.audit-row:last-child{border-bottom:0}
.audit-row.head{background:var(--bg);font-size:10.5px;letter-spacing:.09em;text-transform:uppercase;color:var(--mute);font-weight:500}
.audit-row .who b{font-weight:600}
.audit-row .who small{display:block;color:var(--mute);font-size:10.5px;margin-top:1px}
.audit-row .act{font-family:var(--mono);font-size:11px;color:var(--green-dd);background:var(--green-t);padding:2px 6px;border-radius:2px;justify-self:start;white-space:nowrap}
.audit-row .tdet{color:var(--ink2);overflow:hidden;text-overflow:ellipsis}
.audit-row .when{font-family:var(--mono);font-size:11px;color:var(--mute);text-align:right}

/* ── 재설정 링크 안내 ── */
.reset-box{margin-top:14px;border:1px solid var(--green);background:var(--green-t);padding:14px;border-radius:2px}
.reset-box .eyebrow{color:var(--green-dd);margin-bottom:8px}
.reset-url{font-family:var(--mono);font-size:11px;word-break:break-all;background:var(--paper);border:1px solid var(--line2);padding:9px;line-height:1.6;margin-bottom:9px}
.reset-row{display:flex;align-items:center;gap:8px;justify-content:space-between}

/* ── 모바일 관리자 내비게이션 ── */
.adm-mobile-bar{display:none}
.mnav-scrim{display:none}

@media (max-width:860px){
  .adm{display:block}
  .adm-nav{display:none}
  .adm-mobile-bar{display:flex;align-items:center;gap:8px;position:sticky;top:56px;z-index:30;background:var(--paper);border-bottom:1px solid var(--line);padding:9px 12px;overflow-x:auto;-webkit-overflow-scrolling:touch;scrollbar-width:none}
  .adm-mobile-bar::-webkit-scrollbar{display:none}
  .adm-mobile-bar button{flex:0 0 auto;padding:6px 11px;border:1px solid var(--line2);border-radius:2px;font-size:12.5px;font-weight:500;background:var(--paper);white-space:nowrap;display:flex;align-items:center;gap:6px}
  .adm-mobile-bar button.on{background:var(--green-dd);border-color:var(--green-dd);color:#fff}
  .adm-mobile-bar button .mono{font-size:10px;opacity:.75}
  .adm-mobile-bar .sep{flex:0 0 auto;width:1px;height:18px;background:var(--line2);margin:0 2px}
  .pdf{width:100vw;height:100vh;max-height:100vh}
  .pdf-top{padding:11px 13px;gap:9px;flex-wrap:wrap}
  .pdf-top .pdf-note{order:3;width:100%;margin-left:0}
  .audit-row{grid-template-columns:1fr;gap:4px;padding:11px 12px}
  .audit-row.head{display:none}
  .audit-row .when{text-align:left}
  .exp-bar{width:100%}
  /* 모바일에서는 헤더 우측 액션이 제목 아래로 내려온다.
     .adm-head 는 flex 한 줄이라 width:100% 만 주면 제목(flex:1)과 합쳐져
     컨테이너를 넘친다(390px 실측: 8px 초과). wrap 을 켜서 다음 줄로 보낸다. */
  .adm-head{flex-wrap:wrap;align-items:flex-start}
  .adm-tools{width:100%;gap:12px}
  /* 좁은 화면에서는 두 그룹이 한 줄에 못 들어가므로 위아래로 쌓인다.
     이때 그룹마다 폭이 내용만큼으로 줄어들어 들쭉날쭉해 보이므로,
     각 그룹을 한 줄 전체로 늘려 두 줄의 폭을 일치시킨다. */
  .tool{width:100%}
  .btn-group{flex:1;width:100%}
  .btn-group button{flex:1;padding:0 10px}
}

/* ── 계층형 평가지표: 대항목 > 세부항목 ───────────────────────────── */
.crit-group{border-bottom:1px solid var(--line2)}
.crit-group:first-child{border-top:1px solid var(--ink)}
.crit-group-head{display:grid;grid-template-columns:36px 1fr 120px 104px;gap:14px;align-items:center;padding:16px 0 14px;background:var(--bg)}
.crit-group-head.miss{background:oklch(0.97 0.02 28)}
.crit-group-i{font-size:14px;font-weight:600;color:var(--green-d)}
.crit-group-txt h4{font-size:15.5px;font-weight:700;letter-spacing:-0.02em}
.crit-group-txt p{font-size:12px;color:var(--mute);margin-top:3px;line-height:1.5}
.crit-group-bar{height:4px;background:var(--line2)}
.crit-group-bar i{display:block;height:100%;background:var(--green-d);transition:width .3s}
.crit-group-score{text-align:right;font-size:13px;color:var(--mute)}
.crit-group-score b{font-size:19px;font-weight:500;color:var(--ink)}
.crit-group .crit-row{padding-left:20px;border-bottom:1px solid var(--line)}
.crit-group .crit-row:last-child{border-bottom:none}
.crit-group .crit-i{color:var(--mute)}

/* 관리자 지표 편집기 */
.ce-head-bar{display:flex;align-items:baseline;gap:12px;padding:12px 16px;border-bottom:1px solid var(--line2);background:var(--bg);font-size:12px;font-weight:600}
.ce-head-bar .muted{font-weight:400}
.ce-group{border-bottom:1px solid var(--line2)}
.ce-group-head{display:grid;grid-template-columns:34px 1.3fr 1.6fr 62px 118px;gap:10px;align-items:center;padding:12px 16px;background:var(--bg)}
.ce-group-no{font-size:14px;font-weight:600;color:var(--green-d)}
.ce-group-head input{height:36px;padding:0 10px;border:1px solid var(--line2);background:var(--paper);border-radius:2px;outline:none;font-size:13.5px;width:100%}
.ce-group-head input.ce-parent-name{font-weight:700;font-size:14.5px}
.ce-group-head input:focus{border-color:var(--green-d);background:#fff}
.ce-group-sum{text-align:right;font-size:15px;font-weight:500}
.ce-group-sum small{font-size:11px;color:var(--mute);margin-left:2px}
.ce-group-tools,.ce-child-tools{display:flex;gap:4px;justify-content:flex-end}
.ce-group-tools button,.ce-child-tools button{width:28px;height:28px;border:1px solid var(--line2);background:var(--paper);border-radius:2px;font-size:12px;color:var(--ink2)}
.ce-group-tools button:hover,.ce-child-tools button:hover{background:var(--green-t);border-color:var(--green-d);color:var(--green-dd)}
.ce-group-tools button.danger,.ce-child-tools button.danger{width:auto;padding:0 8px;color:oklch(0.5 0.15 28)}
.ce-group-tools button.danger:hover,.ce-child-tools button.danger:hover{background:oklch(0.96 0.03 28);border-color:oklch(0.6 0.15 28);color:oklch(0.45 0.16 28)}
.ce-child{display:grid;grid-template-columns:34px 1.3fr 1.6fr 62px 118px;gap:10px;align-items:center;padding:8px 16px;border-top:1px solid var(--line)}
.ce-child-no{font-size:11px;color:var(--mute);padding-left:6px}
.ce-child input{height:34px;padding:0 10px;border:1px solid var(--line);background:var(--bg);border-radius:2px;outline:none;font-size:13px;width:100%}
.ce-child input:focus{border-color:var(--green-d);background:#fff}
.ce-child input.ce-child-max{text-align:center;font-size:14px}
.ce-add-child{width:100%;padding:9px 16px 9px 60px;text-align:left;font-size:12px;color:var(--green-d);font-weight:600;border-top:1px solid var(--line)}
.ce-add-child:hover{background:var(--green-t)}

/* 감사 로그 상세 카드의 계층 표시 */
.det-group{display:block !important;padding:6px 0;border-bottom:1px dashed var(--line)}
.det-group:last-child{border-bottom:none}
.det-group-name{display:flex;align-items:baseline;gap:6px;font-weight:700;font-size:12.5px}
.det-no{color:var(--green-d);font-size:11px}
.det-sub{display:flex;align-items:baseline;gap:6px;padding:3px 0 3px 18px;font-size:11.5px;color:var(--ink2)}
.det-sub i{font-style:normal;color:var(--mute);font-size:10.5px;min-width:20px}
.det-sub em{font-style:normal;margin-left:auto;color:var(--ink)}
.det-sub small{display:block;flex-basis:100%;color:var(--mute);font-size:10.5px;padding-left:26px}

@media (max-width:860px){
  .crit-group-head{grid-template-columns:26px 1fr 68px;gap:8px}
  .crit-group-bar{display:none}
  .crit-group .crit-row{padding-left:10px}
  .ce-group-head,.ce-child{grid-template-columns:22px 1fr 54px;gap:6px;padding:10px}
  .ce-group-tools,.ce-child-tools{grid-column:2 / -1;justify-content:flex-start}
  .ce-group-head input.ce-parent-desc,.ce-child input:nth-of-type(2){grid-column:2 / -1}
  .ce-add-child{padding-left:16px}
}

/* ─────────── 스크롤바 ─────────── */
/* 평상시에는 완전히 투명하고, 스크롤하는 동안에만 초록색 반투명 thumb 이 부드럽게
 * 떠올랐다가 사라진다. 위아래 화살표(세모)는 없다.
 *
 * ── 두 종류로 나뉜다 ──
 *   1) 평가표(.sheet-inner) · 기업목록(.list-items)
 *      네이티브 thumb 은 **항상 투명**하게 두고, client/scrollbar.ts 가 얹는
 *      오버레이(.ks-sb)가 thumb 을 그린다.
 *      이렇게 하는 이유: `::-webkit-scrollbar-thumb` 의 background-color 에는
 *      transition 도 animation 도 먹지 않는다(실측 — 클래스를 붙인 첫 프레임에
 *      이미 최종 색). 네이티브로는 "서서히"가 원리적으로 불가능하다.
 *   2) 그 밖의 컨테이너(드로어·관리자 사이드바 등)
 *      기존처럼 스크롤 중에만 `.is-scrolling` 으로 색을 준다.
 *      (이쪽은 페이드가 없어도 무방하다)
 *
 * 화살표 제거는 ::-webkit-scrollbar-button 으로만 가능한데, Chrome 은
 * scrollbar-width / scrollbar-color 가 하나라도 지정되면 ::-webkit-scrollbar
 * 규칙을 통째로 무시하고 기본 스크롤바(화살표 포함)로 돌아간다.
 * 그래서 표준 속성은 WebKit 선택자를 모르는 브라우저(Firefox)에서만 적용한다. */

/* ── Chrome / Edge / Safari ── */
/* 폭은 5px — 10px 은 평가표 글자를 가릴 만큼 두꺼워서 절반으로 줄였다.
 * scrollbar.ts 의 WIDTH 와 반드시 같아야 한다(오버레이 thumb 폭). */
::-webkit-scrollbar{width:5px;height:5px;background:transparent}
::-webkit-scrollbar-track,
::-webkit-scrollbar-track-piece{background:transparent;border:0}
::-webkit-scrollbar-corner{background:transparent}
/* 화살표(위/아래 세모)·트랙 버튼 제거 */
::-webkit-scrollbar-button{display:none;width:0;height:0;background:transparent}
/* 폭이 5px 이므로 테두리를 1px 만 준다(3px 이면 보이는 부분이 사라진다). */
::-webkit-scrollbar-thumb{background-color:transparent;border:1px solid transparent;
  border-radius:99px;background-clip:padding-box}
/* 2) 그 밖의 컨테이너 — 스크롤 중에만 */
.is-scrolling::-webkit-scrollbar-thumb{background-color:rgba(98,179,74,.45)}
.is-scrolling::-webkit-scrollbar-thumb:hover{background-color:rgba(98,179,74,.72)}
/* 1) 추적 대상 — 네이티브는 항상 투명(초록은 오버레이가 그린다) */
.sheet-inner::-webkit-scrollbar-thumb,
.list-items::-webkit-scrollbar-thumb{background-color:transparent}

/* 오버레이 thumb — scrollbar.ts 가 위치·크기를 계산해 넣는다.
 * 페이드는 여기 transition 이 담당한다(네이티브 스크롤바는 transition 이 안 먹으므로).
 * 사라질 때는 살짝 늦게(260ms), 나타날 때는 조금 빠르게(160ms) 해서
 * "떠오르는" 느낌을 주되 손에 붙는 속도를 유지한다.
 * 폭 5px — 네이티브 거터(::-webkit-scrollbar)와 같은 값이어야 어긋나지 않는다. */
.ks-sb{position:fixed;width:5px;opacity:0;pointer-events:none;z-index:12;
  transition:opacity 260ms ease;will-change:opacity}
.ks-sb.on{opacity:1;transition-duration:160ms}
.ks-sb-thumb{width:5px;border-radius:99px;background:rgba(98,179,74,.45);
  pointer-events:none;transition:background-color .15s}
.ks-sb.on .ks-sb-thumb{pointer-events:auto}
.ks-sb-thumb:hover{background:rgba(98,179,74,.72)}

/* ── Firefox (WebKit 스크롤바 선택자를 지원하지 않는 브라우저) ── */
@supports not selector(::-webkit-scrollbar){
  *{scrollbar-width:thin;scrollbar-color:transparent transparent}
  .is-scrolling{scrollbar-color:rgba(98,179,74,.45) transparent}
  /* 추적 대상도 거터만 확보하고 색은 오버레이가 그린다 */
  .sheet-inner,.list-items{scrollbar-color:transparent transparent}
}

/* ───── 임시 비밀번호 · 비밀번호 변경 ─────
   로그인 직후 안내(모달)와 목록 화면 배너가 같은 시각 언어를 쓴다:
   초록 방패 = '안전', 그리고 결정은 항상 사용자에게 맡긴다. */
.pw-modal{width:440px;text-align:center;padding:34px 32px 26px}
.pw-modal.pw-form-modal{width:480px;text-align:left;padding:28px 30px 24px}
.pw-title{font-size:26px;line-height:1.24;letter-spacing:-0.04em;margin:10px 0 12px;text-wrap:balance}
.pw-title.sm{font-size:22px;margin:6px 0 16px}
.pw-lede{margin:0 0 22px;font-size:13.5px;line-height:1.78;color:var(--ink2)}
.pw-lede b{font-weight:700;color:var(--ink)}
/* 방패 아이콘 — 모달 상단에 한 번만. 초록 원 안에 테두리만 있는 선화라
   '경고'가 아니라 '안내'로 읽힌다. */
.pw-shield{display:grid;place-items:center;width:64px;height:64px;margin:0 auto 16px;
  border-radius:50%;background:var(--green-t);color:var(--green-d)}
.pw-acts{display:flex;flex-direction:column;gap:9px;margin:0 0 4px}
.pw-foot{margin:14px 0 0;font-size:11.5px;line-height:1.6;text-align:center}
/* 폼 상단 — 제목과 '나중에' 링크를 양끝으로 */
.pw-head{display:flex;align-items:flex-start;justify-content:space-between;gap:16px;margin-bottom:18px}
.pw-form-modal .field{margin-bottom:16px}
/* 입력칸 + 보기/가리기 버튼을 한 줄에. input 은 .field input 규칙을 그대로 받는다. */
.pw-input-row{display:flex;align-items:center;gap:8px}
.pw-input-row input{flex:1}
.pw-input-row .tiny{height:34px;padding:0 12px}
/* 규칙 체크리스트 — 통과는 초록 체크, 미통과는 회색 점.
   빨간 X 를 쓰지 않는 이유: 입력 도중에는 대부분 아직 통과 전이라 화면이
   온통 오류처럼 보인다. '아직'과 '틀렸다'를 구분한다. */
.pw-rules{list-style:none;margin:2px 0 14px;padding:12px 14px;background:var(--bg);
  border:1px solid var(--line);border-radius:2px;display:grid;gap:6px;
  grid-template-columns:repeat(auto-fit,minmax(190px,1fr))}
.pw-rules li{display:flex;align-items:flex-start;gap:7px;font-size:12px;line-height:1.45;color:var(--mute)}
.pw-rules li.ok{color:var(--green-d)}
.pw-rules li.bad{color:var(--ink2)}
.pw-rule-ico{flex:none;width:13px;text-align:center;font-weight:700}
.pw-warn{font-size:12px;color:var(--red);margin:-6px 0 10px}
/* 목록 화면에 남는 안내 배너 */
.pw-banner{display:flex;align-items:center;gap:14px;margin:0 0 26px;padding:14px 16px;
  border:1px solid var(--green);border-left-width:3px;border-radius:2px;background:var(--green-t)}
.pw-banner-ico{flex:none;color:var(--green-d);display:grid;place-items:center}
.pw-banner-txt{display:flex;flex-direction:column;gap:2px;min-width:0;flex:1}
.pw-banner-txt b{font-size:13px;color:var(--green-dd)}
.pw-banner-txt span{font-size:12px;color:var(--ink2);line-height:1.5}
.pw-banner-btn{flex:none;height:36px;padding:0 15px;font-size:13px;background:var(--paper)}
/* 임시 비밀번호 발급 결과(관리자) */
.tmp-modal{width:460px;text-align:left}
.tmp-cred{margin:0 0 16px;border-top:1px solid var(--ink);border-bottom:1px solid var(--line)}
.tmp-cred>div{display:flex;align-items:baseline;justify-content:space-between;gap:16px;padding:11px 0}
.tmp-cred>div+div{border-top:1px solid var(--line)}
.tmp-cred span{font-size:11px;color:var(--mute)}
.tmp-cred b{font-size:14px;font-weight:600;text-align:right;word-break:break-all}
.tmp-pw{font-size:20px!important;letter-spacing:.06em;color:var(--green-dd)}
.tmp-note{padding:11px 13px;background:var(--bg);border-left:3px solid var(--line2);
  font-size:12px;line-height:1.65;color:var(--ink2)}
.tmp-note b{color:var(--ink)}
/* 하단 두 버튼 — '닫기' 가 납작하게 눌려 두 줄로 감기지 않도록 최소 폭을 준다. */
.tmp-acts{justify-content:flex-end}
.tmp-acts .btn-line,.tmp-acts .btn-primary{white-space:nowrap;flex:none}
.tmp-acts .btn-line{min-width:76px}

/* ───── 프로그램 카드 가로 레일 (3장 이상) ─────
   한 줄을 유지하고 좌우로 넘긴다. 2행으로 접히면 카드 높이(≈400px) 때문에
   두 번째 줄이 첫 화면에서 통째로 사라지기 때문이다. */
/* ── 확인 모달 (window.confirm 대체) ──
   샌드박스 iframe 에서는 브라우저 confirm 이 조용히 false 를 돌려주기 때문에
   인앱 모달로 대신한다. 본문은 문단/목록이 섞이므로 여백만 맞춰 준다. */
.cf-modal{width:440px}
.cf-body{line-height:1.72}
.cf-body b{color:var(--ink)}
.cf-list{margin:12px 0 0;padding-left:0;list-style:none;display:grid;gap:6px}
.cf-list li{position:relative;padding-left:14px;font-size:12.5px;color:var(--ink2)}
.cf-list li::before{content:'';position:absolute;left:0;top:.62em;width:4px;height:4px;
  border-radius:50%;background:var(--mute)}
.cf-danger{background:var(--red,#b4342a);border-color:var(--red,#b4342a)}

.rail{margin:0}
.rail-head{display:flex;align-items:center;justify-content:space-between;gap:16px;margin-bottom:14px}
.rail-label{font-size:12px;font-weight:600;color:var(--ink2)}
.rail-label .mono{color:var(--mute);margin-left:4px}
.rail-nav{display:flex;gap:6px}
.rail-btn{display:grid;place-items:center;width:34px;height:34px;border:1px solid var(--line2);
  border-radius:2px;background:var(--paper);color:var(--ink);
  transition:border-color .18s,color .18s,opacity .18s}
.rail-btn:hover:not(:disabled){border-color:var(--ink)}
.rail-btn:disabled{opacity:.32;cursor:default}
.rail-btn:focus-visible{outline:2px solid var(--green-d);outline-offset:2px}
/* 스크롤 트랙. 스냅으로 한 장씩 딱 맞춰 멈춘다.
   `overscroll-behavior-x:contain` 이 없으면 끝에서 페이지 자체가 튕긴다. */
/* ── 왜 `scroll-snap-type: mandatory` 를 뺐나 ──
   드래그는 `scrollLeft` 를 직접 대입해 움직인다. mandatory 스냅이 걸려 있으면
   브라우저가 **매 프레임** 스냅 지점으로 되돌리려 들어서 손가락을 따라오지 못하고
   카드가 덜컥덜컥 튄다(특히 빠르게 끌 때). 그래서 스냅은 끄고, 화살표/드래그
   정착은 JS 가 부드럽게 처리한다. `proximity` 조차 쓰지 않는다 — 정착 지점은
   카드 폭으로 우리가 이미 정확히 계산한다. */
.rail-track{display:flex;gap:20px;overflow-x:auto;overflow-y:hidden;
  overscroll-behavior-x:contain;
  padding-bottom:4px;scrollbar-width:none;-ms-overflow-style:none;
  touch-action:pan-y;cursor:grab;
  /* 스크롤 컨테이너에 자체 합성 레이어를 준다 — 그림자/테두리가 많은 카드가
     스크롤마다 다시 그려지면 프레임이 떨어진다. */
  will-change:scroll-position}
.rail-track::-webkit-scrollbar{display:none}
.rail-track.is-dragging{cursor:grabbing;user-select:none}
/* 드래그 중에는 카드가 눌린 것처럼 보이지 않게 호버 들뜸을 끈다. */
.rail-track.is-dragging .card:not(.is-closed):hover{transform:none;box-shadow:none;border-color:var(--line)}
.rail-track.is-dragging .card-main{pointer-events:none}
.carousel-item{flex:0 0 340px;max-width:340px;display:flex}
.carousel-item>.card{flex:1;width:100%}
/* ── 스크롤/드래그 중 호버 효과 정지 ──
   `.card` 의 hover 는 `translateY(-3px)` + 큰 box-shadow 를 켠다. 카드가 마우스
   아래를 지나가는 동안 이 효과가 켜졌다 꺼졌다 하면 매 프레임 리페인트가
   발생한다(status-live 처럼 어두운 배경일수록 체감이 크다). 스크롤이 움직이는
   동안만 꺼 두고, 멈추면 원래대로 돌려놓는다. */
.rail-track.is-scrolling .card:not(.is-closed):hover,
.rail-track.is-dragging .card:not(.is-closed):hover{transform:none;box-shadow:none}
/* 스크롤 중에는 카드 내부의 transition 도 의미가 없다 — 끄면 합성이 단순해진다. */
.rail-track.is-scrolling .card,
.rail-track.is-dragging .card{transition:none}
/* 양 끝에서는 여백을 없애 첫 카드가 화면 끝에 딱 붙는다. */
.rail-track.at-start{padding-left:0}
.rail-hint{display:flex;align-items:center;gap:6px;margin:12px 0 0;font-size:11.5px}
.rail-hint-kbd{display:inline-grid;place-items:center;width:18px;height:18px;margin-left:2px;
  border:1px solid var(--line2);border-radius:2px;background:var(--paper);
  font-size:10px;color:var(--ink2)}
@media (max-width:760px){
  /* 좁은 화면에서는 카드가 뷰포트 폭을 거의 다 쓴다 — 340px 고정이면
     다음 카드가 살짝만 보여 '넘길 수 있다'가 전달되지 않는다. */
  .carousel-item{flex:0 0 82vw;max-width:82vw}
  .rail-hint{display:none}
  .pw-banner{flex-wrap:wrap}
  .pw-banner-btn{width:100%}
  .pw-rules{grid-template-columns:1fr}
}
@media (prefers-reduced-motion:reduce){
  .rail-track{scroll-behavior:auto}
  .rail-btn{transition:none}
}

/* ═══════════════════════════════════════════════════════════════════════
   반응형 안전망 — 창모드(좁은 폭)에서 글자가 칸을 넘거나 찌그러지지 않게

   ── 왜 이런 일이 생기나 ──
   표는 `grid-template-columns: 1fr 1.6fr …` 로 열을 나눈다. `fr` 은 **남는**
   공간을 나누는 단위라, 공간이 모자라면 칸이 **0px 까지** 줄어든다. 실측:
   900px 창에서 이름 칸이 33px, 480px 창에서는 8px 까지 눌려 `t@t.co` 같은
   값이 칸 밖으로 삐져나왔다. `.kpis` 의 4열 고정도 같은 이유로 "평가 진행률"
   (52px 필요)이 34px 에 갇혔다.

   ── 처방 ──
   ① 각 열에 **최소 폭**을 준다(`minmax(128px, 1.1fr)`). 이제 아무리 좁아도
      글자가 들어갈 자리는 남는다.
   ② 그래도 표 전체가 안 들어가면 **표 안에서만** 가로 스크롤한다. 페이지
      자체가 옆으로 밀리면 헤더·버튼까지 함께 사라져 더 불편하다.
   ③ KPI·카드 그리드는 폭에 맞춰 자동으로 줄을 바꾼다.
   ④ 모달은 화면보다 넓어지지 않는다.

   이 블록은 파일 **맨 끝**에 있어 위쪽의 기존 규칙을 덮어쓴다. 같은 선택자가
   여러 번 나오는 파일이라, 중간을 고치는 대신 마지막에 한 번에 정리했다.
   ═══════════════════════════════════════════════════════════════════════ */

/* ── ① 데이터 표: 열마다 최소 폭 보장 ──
   비율(fr)은 그대로 두어 넓은 화면에서는 기존 배치가 유지된다. */
.ev-cols{grid-template-columns:
  minmax(128px,1.1fr) minmax(150px,1.4fr) minmax(112px,1fr) minmax(168px,1.5fr)
  minmax(104px,1fr) minmax(150px,1.4fr) 96px}
.pg-cols{grid-template-columns:
  minmax(72px,80px) minmax(180px,2fr) minmax(120px,1.2fr) 50px 50px 64px
  minmax(120px,1.2fr) 56px}
.co-cols{grid-template-columns:
  minmax(88px,96px) 56px minmax(150px,1.4fr) minmax(130px,1.15fr) minmax(112px,1fr)
  minmax(112px,1fr) minmax(140px,1.3fr) 96px}
.miss-cols-co{grid-template-columns:minmax(140px,1.3fr) minmax(150px,1.4fr) minmax(110px,1fr) minmax(180px,2fr)}
.miss-cols-ev{grid-template-columns:minmax(140px,1.3fr) minmax(170px,1.6fr) minmax(220px,2.6fr)}

/* ── ② 표가 안 들어가면 표 안에서만 가로 스크롤 ──
   `.tr` 에 min-width 를 주면 스크롤 컨테이너(.tbl) 안에서만 넘친다. */
.tbl{overflow-x:auto;-webkit-overflow-scrolling:touch}
.tr.ev-cols{min-width:1020px}
.tr.pg-cols{min-width:900px}
.tr.co-cols{min-width:940px}
.tr.miss-cols-co{min-width:720px}
.tr.miss-cols-ev{min-width:620px}
/* 표 안의 값이 칸을 넘지 않게 — 아주 긴 주소/이름도 줄바꿈된다. */
.tr>span{min-width:0;overflow-wrap:anywhere}
/* 스크롤바는 전역 체계(5px · 스크롤 중에만 초록)를 그대로 쓴다.
   여기서 두께를 다시 지정하면 ::-webkit-scrollbar 전체 규칙과 어긋나
   표 아래에만 굵은 회색 막대가 남는다. 넘칠 수 있다는 사실은 아래
   흐림 처리와 안내 문구가 알려 준다. */

/* ── ②-b 넘칠 때만: 오른쪽 흐림 + 안내 한 줄 ──
   표를 최소 폭으로 지키면 좁은 창에서는 오른쪽 열이 화면 밖으로 나간다.
   스크롤바를 숨겨 두었으므로 그냥 두면 "정보가 잘려 사라진" 것처럼 보인다.
   그래서 넘치는 동안에만 오른쪽 끝을 종이색으로 흐리게 덮고,
   표 아래에 한 줄 안내를 붙인다. 다 보이면 흐림은 사라진다.

   `.tbl` 안이 아니라 바깥(.tbl-box)에 겹치는 이유:
   `.tbl` 은 가로 스크롤 컨테이너라, 그 안에 두면 흐림이 내용과 함께
   옆으로 밀려가 오른쪽 끝에 머물지 않는다. */
.tbl-wrap{position:relative;min-width:0}
.tbl-box{position:relative;min-width:0}

.tbl-wrap.can-scroll .tbl-box::after{
  content:'';position:absolute;top:0;right:0;bottom:0;width:56px;
  pointer-events:none;background:var(--paper);opacity:1;
  transition:opacity .2s ease;
  -webkit-mask-image:linear-gradient(to right,transparent,#000 62%);
  mask-image:linear-gradient(to right,transparent,#000 62%);
}
/* 오른쪽 끝까지 넘겼으면 더 볼 것이 없으므로 흐림을 걷는다. */
.tbl-wrap.can-scroll.at-end .tbl-box::after{opacity:0}

/* 왼쪽도 같은 원리 — 되돌아갈 내용이 남아 있을 때만. */
.tbl-wrap.can-scroll .tbl-box::before{
  content:'';position:absolute;top:0;left:0;bottom:0;width:40px;z-index:1;
  pointer-events:none;background:var(--paper);opacity:0;
  transition:opacity .2s ease;
  -webkit-mask-image:linear-gradient(to left,transparent,#000 62%);
  mask-image:linear-gradient(to left,transparent,#000 62%);
}
.tbl-wrap.can-scroll:not(.at-start) .tbl-box::before{opacity:1}

.tbl-hint{
  display:flex;align-items:center;gap:6px;margin-top:9px;
  font-size:11.5px;color:var(--mute);letter-spacing:-.01em;
}
.tbl-hint-ico{
  display:inline-flex;align-items:center;justify-content:center;
  width:16px;height:16px;flex:none;border-radius:50%;
  background:var(--green-t);color:var(--green-d);
  font-size:10px;line-height:1;
}

/* ── ③ KPI: 4열 고정 → 폭에 맞춰 자동 개행 ──
   좁아지면 2열 → 1열로 내려가고, 세로 구분선은 첫 칸에서 지운다. */
.kpis{grid-template-columns:repeat(auto-fit,minmax(150px,1fr))}
@media (max-width:640px){
  .kpis{grid-template-columns:1fr 1fr}
  .kpis>div{padding:14px}
  .kpis b{font-size:24px}
}

/* ── ④ 모달이 화면보다 넓어지지 않게 ──
   420~480px 고정폭이라 400px 창에서는 좌우가 잘려 나갔다. */
.modal{width:min(420px,calc(100vw - 32px))}
.done-modal{width:min(460px,calc(100vw - 32px))}
.pw-modal{width:min(440px,calc(100vw - 32px))}
.pw-modal.pw-form-modal{width:min(480px,calc(100vw - 32px))}
.tmp-modal{width:min(460px,calc(100vw - 32px))}
.cf-modal{width:min(440px,calc(100vw - 32px))}

/* ── ⑤ 카드·배정 그리드: 340px 고정 최소폭이 화면을 뚫지 않게 ──
   `minmax(340px,1fr)` 은 뷰포트가 340px 보다 좁으면 그대로 넘친다.
   `min(340px,100%)` 로 두면 좁은 화면에서는 100% 까지 줄어든다. */
.cards{grid-template-columns:repeat(auto-fill,minmax(min(340px,100%),1fr))}
.assign{grid-template-columns:repeat(auto-fill,minmax(min(280px,100%),1fr))}
.detail-row{grid-template-columns:repeat(auto-fill,minmax(min(260px,100%),1fr))}

/* ── ⑥ 관리자 레이아웃이 사이드바 때문에 밀리지 않게 ──
   `1fr` 은 내용이 넓으면 그만큼 늘어난다 → `minmax(0,1fr)` 로 고정. */
.adm{grid-template-columns:248px minmax(0,1fr)}
/* 중간 폭(창모드)에서 본문 여백이 과하게 넓어 표를 더 좁히고 있었다. */
@media (max-width:1200px){.adm-page{padding:32px 28px 64px}}
@media (max-width:860px){.adm-page{padding:24px 16px 64px}}

/* ── ⑦ 폼 2·3분할은 좁아지면 한 줄로 ── */
@media (max-width:560px){
  .grid2,.grid3{grid-template-columns:1fr}
  .crit-top{grid-template-columns:24px minmax(0,1fr)}
  .crit-group-head{grid-template-columns:26px minmax(0,1fr) 68px}
}

/* ── ⑦-b 탭 바: 좁으면 탭 안에서만 가로 스크롤 ──
   탭 7개의 `white-space:nowrap` 폭 합이 480px 창보다 넓어 페이지 전체가
   옆으로 밀렸다(본문이 627px). 탭 줄만 넘기게 하고 페이지는 그대로 둔다. */
.tabs{overflow-x:auto;overflow-y:hidden;-webkit-overflow-scrolling:touch;
  scrollbar-width:none;-ms-overflow-style:none}
.tabs::-webkit-scrollbar{display:none}
@media (max-width:760px){.tabs{gap:18px}}

/* ── ⑦-c 상세 헤더: 제목이 버튼 그룹에 밀리지 않게 ──
   .adm-head 는 flex 한 줄이고 우측 .adm-tools(내보내기 3버튼 + 상태 3버튼)가
   flex:none 이라 폭을 먼저 가져간다. 남는 폭이 200px 남짓이면
   제목이 `overflow-wrap:anywhere` 때문에 '여성특 / 화 AC 프 / 로그램' 처럼
   어절 중간에서 쪼개지고, 그 아래 장소 줄까지 눌린다(900px 실측).
   제목을 억지로 쪼개는 대신, 폭이 모자라면 액션 줄을 아래로 내린다. */
@media (max-width:1100px){
  .adm-head{flex-wrap:wrap;align-items:flex-start}
  .adm-tools{width:100%}
}
/* 제목은 어절 단위로 끊는다 — 한글은 anywhere 없이도 정상적으로 줄바꿈된다.
   anywhere 는 영문·숫자로만 된 긴 제목을 위한 최후 수단으로 남긴다. */
.adm-title{overflow-wrap:break-word;word-break:keep-all}

/* ── ⑨ 주소검색(카카오 우편번호 임베드) ──
   우편번호 위젯은 iframe 이라 **높이를 명시**해야 보인다. 부모가 flex/height:auto
   면 iframe 이 0px 로 접혀 흰 칸만 남는다. */
.addr-modal{width:min(560px,calc(100vw - 32px))}
.addr-hint{margin-bottom:14px}
.addr-frame{position:relative;height:min(460px,60vh);border:1px solid var(--line2);
  background:var(--paper);border-radius:2px;overflow:hidden}
.addr-frame iframe{width:100% !important;height:100% !important;border:0;display:block}
.addr-row{display:flex;gap:8px;align-items:stretch}
.addr-row input{flex:1;min-width:0}
.addr-btn{height:50px;white-space:nowrap;flex:none}
/* 클릭하면 검색이 열리는 칸 — 읽기 전용이지만 눌러야 한다는 걸 커서로 알린다. */
.addr-pick{cursor:pointer;background:var(--bg)}
.addr-pick:hover{border-color:var(--green-d)}
.addr-detail{margin-top:8px}
.addr-manual{align-self:flex-start;font-size:11.5px;color:var(--mute);
  text-decoration:underline;text-underline-offset:3px;margin-top:6px}
.addr-manual:hover{color:var(--ink)}
.addr-fallback .field{margin-top:10px}

/* ── ⑩ 오리엔테이션 줄 — 점심(파랑)·쉬는시간(주황)과 구분되는 초록 계열 ── */
.tr.co-orient{background:oklch(0.972 0.03 150)}
.tr.co-orient .ori-mark{color:oklch(0.5 0.1 150)}
.tr.co-orient .order-cell .mono{color:oklch(0.45 0.1 150);font-weight:600}
.ori-label{display:flex;flex-direction:column;gap:2px;min-width:0}
.ori-label b{font-weight:600;color:oklch(0.4 0.11 150);font-size:13px}
.ori-label small{display:block;font-size:12px;color:oklch(0.48 0.09 150);margin-top:1px}
.tr.co-orient .row-actions{grid-column:8;justify-self:end}
.tt-row.ori{background:oklch(0.955 0.035 150);color:oklch(0.38 0.1 150);font-size:12px}
.tt-row.ori .mono{color:oklch(0.38 0.1 150)}

/* ── ⑧ 긴 제목이 컨테이너를 밀지 않게 ──
   한글은 어절 단위로 끊기지만, 영문·숫자가 섞인 긴 제목은 못 끊어 넘친다. */
.card-title,.item-name,.adm-title,.list-title,.pw-title{overflow-wrap:anywhere}

/* ══════════════════════════════════════════════════════════════════
   ⑪ 평가 화면 — 모바일(≤860px) 재구성
   ──────────────────────────────────────────────────────────────────
   [겹침의 진짜 원인]
   기존 860px 블록은 `grid-template-columns:1fr` 만 바꾸고
   base 규칙의 `grid-template-rows:minmax(0,1fr)` 을 **남겨 두었다.**
   그러면 `.list` 와 `.sheet` 가 둘 다 "정의된 1행"에 자동 배치되어
   **서로 위에 겹친다.** 스크린샷에서 기업명 위로 목록의 날짜 줄이
   찍혀 있던 것이 정확히 이 증상이다. → 좁은 화면에서는 그리드를 해제한다.

   [구성]
   · 발표기업 목록  → 화면 밖 드로어(햄버거)
   · IR 자료        → 하단에서 올라오는 시트(버튼으로 열고 닫음)
   · 하단 고정 바   → 발표기업 / IR 자료 두 버튼
   ══════════════════════════════════════════════════════════════════ */
/* 경계 1260px 의 근거는 Evaluate.tsx 의 COMPACT_MAX 주석 참고 —
   목록 320 + 평가표 640 + 자료 300 = 1260 이 3분할의 물리적 하한이다.
   861~1260px(창모드·태블릿)에서 3분할을 계속 시도하면 평가표 제목 칸이
   14px 까지 눌려 "사/업/성/평/가"처럼 글자가 세로로 서고 점수칸이 뭉개진다. */
@media (max-width:1260px){
  /* ── 1) 그리드 해제: 겹침 제거 ── */
  .evaluate,
  .evaluate.has-pdf,
  .evaluate.is-narrow{display:block;height:auto;max-height:none;min-height:0}
  .sheet{overflow:visible;min-height:0}
  .sheet-inner{
    overflow:visible;
    height:auto;
    /* 하단 고정 바에 마지막 항목이 가리지 않도록 자리를 비워 둔다. */
    padding:24px 18px calc(76px + env(safe-area-inset-bottom));
  }
  /* 태블릿(1000px대)까지 컴팩트가 되었으므로 본문 최대폭은 데스크톱과 같이 둔다.
     한 줄이 1100px 넘게 늘어나면 눈이 줄을 놓친다. (좁은 화면에서는 880px 이
     어차피 화면보다 넓어 아무 제약도 하지 않는다.) */
  .sheet-inner>*{max-width:880px}

  /* ── 2) 발표기업 목록 → 오프캔버스 드로어 ── */
  .list.as-drawer{
    position:fixed;top:60px;bottom:0;left:0;z-index:40;width:min(340px,86vw);
    max-height:none;height:auto;border-right:1px solid var(--line);
    transform:translateX(-102%);transition:transform .22s ease;
    will-change:transform;
  }
  .list.as-drawer.is-open{transform:none;box-shadow:0 14px 44px rgba(22,24,21,.3)}
  /* 드로어 안에서 목록이 남은 높이를 끝까지 쓴다. */
  .list.as-drawer .list-items{flex:1;min-height:0;overflow:auto;-webkit-overflow-scrolling:touch}
  .list.as-drawer .list-head{padding:18px 18px 14px}
  .list.as-drawer .list-title{font-size:17px;margin:6px 0 14px}

  .ev-scrim{
    position:fixed;inset:60px 0 0;z-index:39;background:rgba(22,24,21,.4);
    opacity:0;pointer-events:none;transition:opacity .2s;
  }
  .ev-scrim.on{opacity:1;pointer-events:auto}

  .ev-drawer-bar{
    display:flex;align-items:center;justify-content:space-between;gap:12px;
    flex:none;padding:12px 16px;border-bottom:1px solid var(--line);background:var(--paper);
  }
  .ev-x{
    width:30px;height:30px;flex:none;display:grid;place-items:center;
    border:1px solid var(--line2);border-radius:2px;background:var(--paper);
    font-size:14px;line-height:1;color:var(--ink2);
  }
  .ev-x:active{background:var(--bg)}

  /* ── 3) 제목이 넘치지 않게 ── */
  /* 48px 고정은 360px 폭에서 한 줄을 다 먹고 옆 칸을 밀어낸다. */
  .co-name{font-size:30px;line-height:1.14;letter-spacing:-0.04em;margin:8px 0}
  .co-head{gap:0}
  .co-line{font-size:14px;overflow-wrap:anywhere}
  .co-facts{margin:20px 0 8px}
  /* 목록 줄의 시간·분야는 한 줄로 말줄임 (두 줄로 접히면 목록이 지저분해진다). */
  .item-sub{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
  .item{padding:14px 16px}

  /* ── 4) IR 자료 → 하단에서 올라오는 시트 ── */
  /* 예전에는 62vh 로 페이지에 그대로 붙어 있어, 자료를 열면 평가표가
     화면 밖으로 밀려 조작이 불가능했다. 이제 화면 위에 띄우고 닫을 수 있다. */
  .pdf-panel{
    position:fixed;left:0;right:0;top:auto;
    bottom:calc(58px + env(safe-area-inset-bottom));
    z-index:45;height:min(68vh,600px);
    border-left:0;border-top:1px solid var(--line);
    box-shadow:0 -10px 34px rgba(22,24,21,.24);
    animation:ev-sheet-up .22s ease;
  }
  @keyframes ev-sheet-up{from{transform:translateY(18px);opacity:.6}to{transform:none;opacity:1}}
  .pdf-panel-head{padding:8px 12px}
  .pdf-panel-tabs{padding:6px 8px 0}
  .pdf-close{
    flex:none;width:28px;height:28px;display:grid;place-items:center;
    border:1px solid var(--line2);border-radius:2px;background:var(--paper);
    font-size:13px;line-height:1;color:var(--ink2);
  }
  .pdf-close:active{background:var(--bg)}

  /* ── 5) 하단 고정 바 ── */
  /* 위원이 현장에서 반복하는 동작(기업 바꾸기·자료 열고 닫기)을 엄지 닿는 곳에 둔다. */
  .ev-bottombar{
    position:fixed;left:0;right:0;bottom:0;z-index:50;
    display:flex;gap:8px;
    padding:8px 12px calc(8px + env(safe-area-inset-bottom));
    background:var(--paper);border-top:1px solid var(--line);
  }
  .ev-bb{
    flex:1;min-width:0;display:flex;align-items:center;justify-content:center;gap:7px;
    padding:11px 10px;border:1px solid var(--line2);border-radius:2px;
    background:var(--paper);font-size:13px;font-weight:600;color:var(--ink);
  }
  .ev-bb:active{background:var(--bg)}
  .ev-bb.on{background:var(--green-dd);border-color:var(--green-dd);color:#fff}
  .ev-bb:disabled{opacity:.42}
  .ev-bb-ico{font-size:14px;line-height:1;flex:none}
  .ev-bb-txt{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
  .ev-bb-num{font-size:11px;opacity:.8;flex:none}
  .ev-bb.on .ev-bb-num{opacity:.95}
}

/* 아주 좁은 화면(≤400px)에서는 제목·사실 항목을 한 단계 더 줄인다. */
/* ══════════════════════════════════════════════════════════════════
   ⑫ 좁은 화면의 평가 행 — 점수 입력칸이 화면 밖으로 밀리던 문제
   ──────────────────────────────────────────────────────────────────
   `.crit-top` 은 자식이 넷(번호 / 제목 / 진행막대 / 입력칸)이다.
   860px 이하에서 진행막대를 숨기면 자식이 셋이 되는데, 560px 이하 규칙이
   열을 **둘**로 줄여 놓아서 입력칸이 둘째 줄의 24px 칸에 갇혔다.
   그 칸 안에서 입력칸이 오른쪽 정렬되느라 x=-28px 까지 밀려나
   **화면 왼쪽 밖으로 잘려 나갔다** — 모바일에서 점수를 넣을 수 없었다.

   해결: 입력칸을 둘째 줄 전체 폭에 배치하고 오른쪽 정렬한다.
   (`grid-column:1/-1` 이면 열 개수와 무관하게 한 줄을 다 쓴다.
    나중에 열을 몇 개로 바꾸든 다시 깨지지 않는다.)
   ══════════════════════════════════════════════════════════════════ */
@media (max-width:560px){
  .crit-top{grid-template-columns:24px minmax(0,1fr);row-gap:10px}
  /* 번호·제목이 첫 줄, 점수 입력이 둘째 줄 — 열 배치를 명시해 자동 배치에 맡기지 않는다. */
  .crit-i{grid-column:1;grid-row:1;align-self:start;padding-top:2px}
  .crit-txt{grid-column:2;grid-row:1}
  .crit-input{grid-column:1/-1;grid-row:2;justify-content:flex-end}
  /* 둘째 줄로 내려왔으니 입력칸을 조금 키워도 본문을 밀지 않는다. */
  .crit-input input{width:64px;height:44px;font-size:18px}
  .crit-note{margin-left:0}
}

/* 하단 고정 바가 '임시저장 / 최종 제출'을 덮지 않게 —
   .actionbar 는 문서의 마지막 요소라, 페이지 끝까지 내리면 고정 바 밑으로
   들어가 버튼이 가려진다. 그만큼 아래 여백을 확보한다. */
@media (max-width:1260px){
  .actionbar{padding:12px 18px calc(12px + 58px + env(safe-area-inset-bottom))}
  .actionbar .actions{flex:1;min-width:0}
  .actionbar .actions .btn{flex:1;min-width:0}
}

@media (max-width:400px){
  .co-name{font-size:26px}
  .sheet-inner{padding-left:14px;padding-right:14px}
  .ev-bb{font-size:12px;padding:10px 6px;gap:5px}
  .ev-bb-num{display:none}
}