/* 대학일자리플러스센터 CRM — 목업(consultant.html) 디자인을 그대로 옮긴 스타일.
   짙은 남색 상단바 + 인디고 강조(#4361ee), 옅은 회색 바탕, 작은 글씨·높은 밀도.
   컨설턴트가 하루 종일 보는 업무 화면이라 장식보다 밀도와 대비를 우선한다. */
/* hidden 속성은 UA 스타일시트의 display:none 으로 동작하는데, 클래스 선택자가
   그걸 이긴다. .account__logout{display:flex} 같은 규칙 하나면 숨김이 조용히
   무시된다. 여기서 한 번 못 박아 모든 hidden 이 실제로 숨겨지게 한다. */
[hidden]{ display:none !important; }

:root{
  --ink:#1a1a2e; --ink-2:#555; --ink-3:#888; --ink-4:#999;
  --page:#f0f2f5; --surface:#fff; --surface-2:#f7f8fb; --surface-3:#fbfbfe;
  --line:#e4e4ec; --line-2:#e8e8f0; --line-3:#f1f1f6; --line-strong:#d8d8e3;
  --accent:#4361ee; --accent-dark:#3651d4; --accent-soft:#eef1ff; --accent-hover:#f7f9ff;
  --danger:#e94560; --danger-soft:#ffe3e9;
  --green:#2a9d5c; --orange:#f4a261; --amber-soft:#fff3bf; --amber-ink:#997404;
  --excel:#217346; --excel-soft:#eaf4ee; /* 엑셀 고유색 — 내보내기가 어디로 가는지 색으로 알린다 */
  /* 그림자는 세 단계만 쓴다 — 놓인 면(sm) · 카드(md) · 눌리는 것(raise) */
  --shadow-sm:0 1px 2px rgba(20,20,40,.06);
  --shadow:0 1px 3px rgba(20,20,40,.08), 0 1px 1px rgba(20,20,40,.04);
  --shadow-raise:0 1px 0 rgba(255,255,255,.18) inset, 0 2px 5px rgba(20,20,40,.16), 0 1px 1px rgba(20,20,40,.1);
  --field:#fafafa;
  --radius:10px; --radius-sm:9px;
}
*{ margin:0; padding:0; box-sizing:border-box; }
body{
  font-family:-apple-system,BlinkMacSystemFont,"Apple SD Gothic Neo","Malgun Gothic",sans-serif;
  background:var(--page); color:var(--ink); font-size:15.5px; line-height:1.6;
}
button{ cursor:pointer; font-family:inherit; }
input,select,textarea{ font-family:inherit; }
:focus-visible{ outline:2px solid var(--accent); outline-offset:1px; }
svg{ display:block; }
.is-hidden{ display:none !important; }
.visually-hidden{ position:absolute; width:1px; height:1px; margin:-1px; overflow:hidden; clip:rect(0 0 0 0); white-space:nowrap; border:0; }
a{ color:var(--accent); }

/* ── 상단 바 ── */
.top{ background:var(--ink); color:#fff; }
.top__inner{ padding:13px 20px; display:flex; align-items:center; gap:16px; flex-wrap:wrap; }
.top__title{ font-size:17.2px; font-weight:600; }
.top__sub{ font-size:13.2px; color:#9a9ab5; }
.top__right{ margin-left:auto; display:flex; align-items:center; gap:6px; flex-wrap:wrap; }
.chip{ background:#2e2e48; color:#aaa; border:none; padding:7px 14px; border-radius:6px; font-size:14.4px; font-weight:500; text-decoration:none; display:inline-block; }
.chip:hover{ background:#3a3a58; color:#fff; }
.chip--on{ background:var(--accent); color:#fff; }
.badge{ font-size:12.6px; background:var(--danger); padding:2px 8px; border-radius:10px; color:#fff; font-weight:600; }

.wrap{ max-width:1240px; margin:0 auto; padding:20px; }
.narrow{ max-width:560px; }

/* ── 조각 ── */
.card{ background:var(--surface); border-radius:var(--radius); box-shadow:var(--shadow); }
.card__head{ padding:14px 18px; border-bottom:1px solid var(--line-2); display:flex; align-items:center; gap:10px; flex-wrap:wrap; }
.card__title{ font-size:17.2px; font-weight:700; }
.card__body{ padding:18px; }
.muted{ color:var(--ink-2); font-size:14.4px; }
.tiny{ font-size:13.2px; color:var(--ink-3); }

.button{ padding:11px 16px; background:var(--accent); color:#fff; border:none; border-radius:var(--radius);
  font-size:15.5px; font-weight:700; display:inline-flex; align-items:center; justify-content:center; gap:6px;
  box-shadow:var(--shadow-raise); }
.button:hover:not(:disabled){ background:var(--accent-dark); box-shadow:0 1px 0 rgba(255,255,255,.2) inset, 0 4px 10px rgba(20,20,40,.2); transform:translateY(-1px); }
.button:active:not(:disabled){ transform:translateY(0); box-shadow:0 1px 2px rgba(20,20,40,.18); }
.button:disabled{ background:#b9c4f5; cursor:not-allowed; }
/* 테두리형 단추는 색을 채우지 않고 흐리게만 — 눌리는 상태로 오해되지 않게 */
.button--ghost:disabled, .button--quiet:disabled, .button--danger:disabled, .button--excel:disabled{ background:#fff; box-shadow:none; opacity:.45; }
.button--ghost{ background:#fff; box-shadow:var(--shadow); border:1.5px solid var(--accent); color:var(--accent); }
.button--ghost:hover:not(:disabled){ background:var(--accent-soft); }
.button--quiet{ background:#fff; box-shadow:var(--shadow); border:1.5px solid var(--line-strong); color:var(--ink-2); }
.button--quiet:hover:not(:disabled){ background:var(--surface-2); color:var(--ink); }
.button--danger{ background:#fff; box-shadow:var(--shadow); border:1.5px solid #f3b6c0; color:var(--danger); }
.button--danger:hover:not(:disabled){ background:var(--danger-soft); }
/* 엑셀로 나가는 단추 — 흰 바탕에 엑셀 초록. 초록 아이콘이 바탕에 묻히지 않는다 */
.button--excel{ background:#fff; box-shadow:var(--shadow); border:1.5px solid var(--excel); color:var(--excel); }
.button--excel:hover:not(:disabled){ background:var(--excel-soft); }
.button__icon{ flex:0 0 auto; }
.button--block{ width:100%; }
.button--lg{ padding:13px; font-size:17.2px; }

label.field{ display:block; margin-bottom:14px; }
.field__label{ display:block; font-size:13.8px; font-weight:600; color:var(--ink-2); margin-bottom:5px; }
/* 꼭 채워야 하는 칸은 이름 오른쪽에 빨간 별 */
.req{ color:var(--danger); font-weight:700; margin-left:3px; }
.input, select.input, textarea.input{ width:100%; padding:11px 12px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  font-size:15.5px; background:var(--field); color:var(--ink); }
.input:focus{ outline:none; border-color:var(--accent); background:#fff; }
textarea.input{ resize:vertical; line-height:1.7; }
.row{ display:flex; gap:10px; flex-wrap:wrap; }
.row > *{ flex:1 1 170px; min-width:0; }
.check{ display:flex; gap:7px; align-items:center; font-size:14.4px; color:var(--ink-2); }
.check input{ width:15px; height:15px; accent-color:var(--accent); }

/* 태그 — 목업의 참여자구분 색 그대로 */
.tag{ display:inline-block; font-size:12.6px; padding:2px 8px; border-radius:var(--radius-sm); background:#eee; color:#555; margin-right:3px; }
.tag--재학생{ background:#dbe9ff; color:#1d5fbf; }
.tag--졸업생{ background:#e6dbff; color:#6a3fc2; }
.tag--지역청년{ background:#ffe9d6; color:#c2661d; }
.tag--군인{ background:#dff2df; color:#2a7a2a; }
.tag--kw{ background:#f1f3f5; color:#495057; }
.tag--new{ background:var(--danger-soft); color:#d6336c; font-weight:700; }
.tag--jaem{ background:var(--amber-soft); color:var(--amber-ink); }

.note{ background:var(--accent-soft); border-radius:var(--radius-sm); padding:10px 13px; font-size:14.4px; color:#3651d4; }
.note--warn{ background:#fff8e6; color:var(--amber-ink); }
.note--danger{ background:var(--danger-soft); color:#c2334c; font-weight:600; }
.error{ color:var(--danger); font-size:13.8px; font-weight:600; min-height:18px; }

/* ── 표 ── */
.table-wrap{ overflow-x:auto; }
table{ border-collapse:collapse; width:100%; font-size:14.4px; }
th{ background:var(--surface-2); text-align:left; padding:10px 12px; font-size:13.8px; color:#666;
  border-bottom:1px solid var(--line-2); white-space:nowrap; position:sticky; top:0; z-index:1; }
td{ padding:10px 12px; border-bottom:1px solid var(--line-3); white-space:nowrap; vertical-align:middle; }
tbody tr:hover{ background:var(--accent-hover); cursor:pointer; box-shadow:inset 3px 0 0 var(--accent); }
tbody tr.is-selected{ background:var(--accent-soft); }
input[type=checkbox]{ width:15px; height:15px; accent-color:var(--accent); }
td.num,th.num{ text-align:right; font-variant-numeric:tabular-nums; }
.cell-strong{ font-weight:700; }
.cell-clip{ display:block; max-width:30ch; overflow:hidden; text-overflow:ellipsis; white-space:nowrap; }

/* ── 집계 카드 — 왼쪽에 색 띠 ── */
.stats{ display:flex; gap:12px; margin-bottom:14px; flex-wrap:wrap; }
.stat{ background:var(--surface); border-radius:var(--radius); padding:13px 18px 14px; min-width:150px; flex:1 1 150px;
  box-shadow:var(--shadow); border:1px solid var(--line); }
.stat__label{ font-size:13.2px; color:var(--ink-3); margin-bottom:5px; }
.stat__value{ font-size:23.0px; font-weight:800; font-variant-numeric:tabular-nums; }

/* ── 상세 서랍 — 목업처럼 오른쪽에서 나온다 ── */
dialog.sheet{ margin:0 0 0 auto; width:600px; max-width:94vw; height:100vh; max-height:100vh;
  border:none; border-radius:0; padding:0; background:var(--surface); box-shadow:-8px 0 30px rgba(0,0,0,.18); }
dialog.sheet::backdrop{ background:rgba(20,20,40,.35); }
.sheet__head{ display:flex; align-items:center; gap:10px; padding:16px 22px; border-bottom:1px solid #eee;
  position:sticky; top:0; background:var(--surface); z-index:2; }
.sheet__head .card__title{ font-size:18.4px; }
.sheet__body{ padding:18px 22px 30px; overflow-y:auto; }
.sheet__foot{ display:flex; gap:8px; justify-content:flex-end; padding:13px 22px; border-top:1px solid #eee;
  position:sticky; bottom:0; background:var(--surface); }
.sheet__foot > *{ flex:0 0 auto; min-width:110px; }

/* ── 진행 단계 ── */
.steps{ list-style:none; display:grid; gap:8px; }
.step{ display:flex; gap:10px; align-items:flex-start; font-size:14.4px; color:var(--ink-4); }
.step__mark{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; border:2px solid #ddd;
  display:flex; align-items:center; justify-content:center; font-size:12.6px; font-weight:700; }
.step--doing{ color:var(--ink); font-weight:700; }
.step--doing .step__mark{ border-color:var(--accent); border-top-color:transparent; animation:spin .8s linear infinite; }
.step--done{ color:var(--ink); }
.step--done .step__mark{ background:var(--accent); border-color:var(--accent); color:#fff; }
@keyframes spin{ to{ transform:rotate(360deg); } }
@media (prefers-reduced-motion: reduce){ .step--doing .step__mark{ animation:none; } }

.foot{ max-width:1240px; margin:0 auto; padding:16px 20px 40px; color:var(--ink-4); font-size:13.2px; text-align:center; }

/* ── 고르기 단추 묶음 — 드롭다운 대신 한눈에 보이고 한 번에 눌린다 ── */
.pick{ display:flex; flex-wrap:wrap; gap:6px; }
.pick__item{ position:relative; }
.pick__item input{ position:absolute; opacity:0; width:0; height:0; }
.pick__item span{ display:block; padding:9px 14px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm);
  background:var(--field); color:var(--ink-2); font-size:14.9px; font-weight:600; cursor:pointer; white-space:nowrap;
  box-shadow:var(--shadow-sm); }
.pick__item span:hover{ border-color:var(--ink-4); background:#fff; }
.pick__item span:active{ transform:translateY(1px); box-shadow:none; }
.pick__item input:checked + span{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); box-shadow:0 1px 3px rgba(67,97,238,.22); }
.pick__item input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px; }

/* 켜고 끄는 표식 — 체크박스보다 손이 크게 닿는다 */
.toggle{ position:relative; display:inline-block; }
.toggle input{ position:absolute; opacity:0; width:0; height:0; }
.toggle span{ display:inline-flex; align-items:center; gap:7px; padding:9px 14px; border:1.5px solid var(--line-strong);
  border-radius:var(--radius-sm); background:var(--field); color:var(--ink-2); font-size:14.9px; font-weight:600; cursor:pointer;
  box-shadow:var(--shadow-sm); }
.toggle input:not(:disabled) + span:active{ transform:translateY(1px); box-shadow:none; }
.toggle span::before{ content:""; width:15px; height:15px; border-radius:4px; border:1.5px solid var(--ink-4); background:#fff; }
.toggle input:checked + span{ border-color:var(--accent); background:var(--accent-soft); color:var(--accent-dark); }
.toggle input:checked + span::before{ background:var(--accent); border-color:var(--accent);
  background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='none' stroke='white' stroke-width='2.6' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M3 8.5l3.5 3.5L13 5'/%3E%3C/svg%3E"); }
.toggle input:focus-visible + span{ outline:2px solid var(--accent); outline-offset:1px; }

/* ── 키워드 태그 입력 — 목업의 tagbox 그대로 ── */
.tagbox{ display:flex; flex-wrap:wrap; gap:5px; border:1.5px solid var(--line-strong); border-radius:var(--radius-sm); padding:7px 8px; background:var(--field); }
.tagbox:focus-within{ border-color:var(--accent); background:#fff; }
.tagbox input{ border:none; outline:none; flex:1; min-width:110px; font-size:14.4px; padding:3px; background:none; }
.tagchip{ display:inline-flex; align-items:center; gap:5px; background:var(--accent-soft); color:var(--accent-dark);
  font-size:13.8px; padding:3px 8px; border-radius:var(--radius-sm); }
.tagchip button{ background:none; border:none; padding:0; color:#8895c9; font-weight:700; font-size:13.8px; line-height:1; }
.tagchip button:hover{ color:var(--danger); }

/* ── 입력 단계 ── */
.stepbox{ border-top:1px solid #eee; padding-top:16px; margin-top:16px; }
.stepbox:first-of-type{ border-top:0; padding-top:0; margin-top:0; }
.stepbox__head{ display:flex; align-items:center; gap:8px; margin-bottom:12px; }
.stepbox__no{ width:22px; height:22px; flex:0 0 22px; border-radius:50%; background:var(--accent); color:#fff;
  font-size:13.2px; font-weight:700; display:flex; align-items:center; justify-content:center; }
.stepbox__title{ font-size:15.5px; font-weight:700; }
.stepbox__hint{ font-size:13.2px; color:var(--ink-4); margin-left:auto; }

/* ── 못 쓰는 항목과 그 사유 안내 ──────────────────────────────────
   비활성 항목은 왜 못 쓰는지 알려 줘야 한다. 마우스를 올리거나 키보드로 짚으면 뜬다. */
.toggle input:disabled + span{ opacity:.5; cursor:not-allowed; background:#f2f2f5; border-style:dashed; }
.toggle input:disabled + span::before{ background:#eee; border-color:#ccc; }

.hint{ position:relative; display:inline-flex; }
.hint__bubble{
  position:absolute; bottom:calc(100% + 8px); left:50%; transform:translateX(-50%);
  min-width:180px; max-width:260px; padding:9px 11px; border-radius:var(--radius-sm);
  background:var(--ink); color:#fff; font-size:13.8px; font-weight:500; line-height:1.55; text-align:left;
  opacity:0; visibility:hidden; transition:opacity .12s ease; pointer-events:none; z-index:30;
}
.hint__bubble::after{
  content:""; position:absolute; top:100%; left:50%; transform:translateX(-50%);
  border:5px solid transparent; border-top-color:var(--ink);
}
.hint:hover .hint__bubble, .hint:focus-within .hint__bubble{ opacity:1; visibility:visible; }
@media (prefers-reduced-motion: reduce){ .hint__bubble{ transition:none; } }

/* ── 키캡 (shadcn/ui 의 Kbd) ─────────────────────────────────────
   bg-muted · text-muted-foreground · h-5 min-w-5 · rounded-sm · px-1 · text-[0.7rem] · font-medium */
.kbd{
  display:inline-flex; align-items:center; justify-content:center; gap:4px;
  height:20px; min-width:20px; padding:0 4px; border-radius:4px;
  background:var(--surface-2); color:var(--ink-3);
  font-family:inherit; font-size:.7rem; font-weight:500; line-height:1;
  user-select:none; pointer-events:none; white-space:nowrap;
}
.kbd-group{ display:inline-flex; align-items:center; gap:4px; }
/* 짙은 바탕 위(도구 설명)에서는 반대로 뒤집는다 */
.tip .kbd{ background:rgba(255,255,255,.16); color:#e7e9f2; }

/* ── 도구 설명 — 무엇을 하는지와 단축키를 함께 알려 준다 ────────────
   반복 업무라 손이 기억할 때까지는 단축키가 어디 있는지 보여야 한다. */
.tip{
  position:fixed; top:0; left:0; z-index:70; display:flex; align-items:center; gap:8px;
  padding:7px 9px; border-radius:var(--radius-sm); background:var(--ink); color:#fff;
  font-size:13.2px; font-weight:500; line-height:1.4; white-space:nowrap;
  opacity:0; visibility:hidden; transition:opacity .12s ease;
}
.tip.is-on{ opacity:1; visibility:visible; }
.tip--nokeys .kbd-group{ display:none; }
@media (prefers-reduced-motion: reduce){ .tip{ transition:none; } }

/* ── 움직임 ─────────────────────────────────────────────────────
   눌러서 바뀌는 자리는 튀지 않고 이어지게 한다. */
.view{ animation:viewIn .2s ease both; }
@keyframes viewIn{ from{ opacity:0; transform:translateY(6px); } to{ opacity:1; transform:none; } }
/* 높이가 달라지는 묶음은 껑충 뛰지 않고 늘었다 줄었다 한다 */
.morph{ overflow:hidden; transition:height .22s cubic-bezier(.4,0,.2,1); }
/* 자료 탭 세 개의 키를 맞춰 둔다. 탭만 바꿨을 뿐인데 아래 칸이 움직이면 안 된다. */
#srcPanels{ min-height:96px; }
.pick__item span, .toggle span, .src label, .guide__tabs label{ transition:background-color .15s ease, border-color .15s ease, color .15s ease; }
.button{ transition:background-color .14s ease, transform .08s ease; }
.button:active:not(:disabled){ transform:scale(.98); }
tbody tr{ transition:background-color .13s ease; }
.sidenav > button, .sidenav .navlink{ transition:background-color .14s ease, color .14s ease; }
.modal{ animation:fadeIn .16s ease both; }
.modal__box{ animation:popIn .19s cubic-bezier(.3,1.2,.5,1) both; }
@keyframes fadeIn{ from{ opacity:0; } to{ opacity:1; } }
@keyframes popIn{ from{ opacity:0; transform:translateY(10px) scale(.985); } to{ opacity:1; transform:none; } }
@media (prefers-reduced-motion: reduce){
  .view, .modal, .modal__box{ animation:none; }
  .morph, .button, tbody tr, .pick__item span, .toggle span, [data-tip]::after, [data-tip]::before{ transition:none; }
}

/* ── 단축키 도움말 ── */
.keys{ display:grid; gap:7px; }
.keyrow{ display:flex; align-items:center; gap:10px; font-size:14.9px; }
.keyrow .kbd-group{ flex:0 0 auto; min-width:74px; }
.keyrow span{ color:var(--ink-2); }
.keys__group{ margin-top:14px; font-size:13.2px; font-weight:700; color:var(--ink-4); }
.keys__group:first-child{ margin-top:0; }

/* ── 고친 자리 표시 ─────────────────────────────────────────────
   상세를 닫으려 할 때 저장 안 된 내용이 어디에 있는지 색으로 짚어 주고,
   바탕을 눌러 닫으려 하면 그 자리들이 흔들려 "아직 못 나간다"를 알린다. */
.is-changed{ outline:2px solid var(--orange); outline-offset:2px; border-radius:var(--radius-sm); }
#detail-save-button.is-changed, #detail-revert-button.is-changed{ outline-offset:3px; }
#detail-revert-button.is-changed{ border-color:var(--orange); color:var(--amber-ink); }
.is-shaking{ animation:justshake .3s; }
@keyframes justshake{
  25%{ transform:translateX(5px); }
  50%{ transform:translateX(-5px); }
  75%{ transform:translateX(5px); }
  100%{ transform:translateX(0); }
}
@media (prefers-reduced-motion: reduce){ .is-shaking{ animation:none; } }

/* 보낼 대화의 크기 알림 — 시간 초과로 끊기기 전에 미리 알려 준다 */
.size-note{ margin:9px 0 0; padding:8px 11px; border-radius:var(--radius-sm); font-size:14.4px; font-weight:600; line-height:1.5; }
.size-note--ok{ background:var(--accent-soft); color:var(--accent-dark); }
.size-note--warn{ background:#fff8e6; color:var(--amber-ink); }
.size-note--over{ background:var(--danger-soft); color:#c2334c; }