/* tools-page.css — 도구 목록 두 화면(/tools/ 실습 도구 · /ai-tools/ AI도구) 공용 스타일 (2026-09-20)
   portal.css 는 전 페이지 공유라 건드리지 않는다. 본체는 /js/tools-page.js 하나. */
/* 카드 아이콘 (2026-09-16 대표님 지시 "아이콘을 넣어야 구분이 쉽겠다") */
.tcard .ticon{display:inline-flex;align-items:center;justify-content:center;width:38px;height:38px;
  border-radius:11px;background:var(--wash);font-size:1.25rem;line-height:1;margin-bottom:6px;font-style:normal}
a.tcard:hover .ticon{background:#fff}
/* 종류 배지 — 🎛️ 강사 진단 / 🤖 AI 실습. 두 종류가 섞이는 과정 묶음 화면에서만 단다(2026-09-20 화면 분리). */
.tcard .tkind{display:inline-block;align-self:flex-start;margin-top:8px;padding:2px 9px;border-radius:99px;
  font-size:.7rem;font-weight:800;font-style:normal;white-space:nowrap}
.tcard .tkind.staff{background:#fef3c7;color:#9A5A00}
.tcard .tlock{display:inline-block;align-self:flex-start;margin-top:8px;padding:2px 9px;border-radius:6px;background:var(--warnbg);color:var(--warn);font-size:.7rem;font-weight:800;font-style:normal;white-space:nowrap}
.tcard .tkind.ai{background:#E8EFFF;color:#075985}
.tcard .tno{display:inline-block;margin-right:4px;color:var(--navy);font-style:normal}
/* 직무 칩 + 검색 */
.jobbar{display:flex;flex-wrap:wrap;gap:6px;margin:12px 0 10px}
.jobbar button{display:inline-flex;align-items:center;gap:5px;min-height:36px;padding:6px 12px;border-radius:99px;
  border:1.5px solid var(--line);background:#fff;font:inherit;font-size:.86rem;font-weight:700;color:var(--ink);cursor:pointer}
.jobbar button em{font-style:normal;font-size:.72rem;font-weight:800;color:var(--soft)}
.jobbar button.on{background:var(--navy);border-color:var(--navy);color:#fff}
.jobbar button.on em{color:#cbd5e1}
.jobbar button.pack{border-style:dashed}
/* 폰에서는 칩 10개가 다섯 줄이 된다 — 한 줄 가로 밀기로(칩 줄만 밀리고 페이지는 가로 스크롤 없음) */
@media(max-width:640px){
  .jobbar{flex-wrap:nowrap;overflow-x:auto;scrollbar-width:none;-webkit-overflow-scrolling:touch;
    margin-left:-2px;padding:2px 2px 6px;mask-image:linear-gradient(90deg,#000 88%,transparent)}
  .jobbar::-webkit-scrollbar{display:none}
  .jobbar button{flex:0 0 auto;white-space:nowrap}
}
.toolsearch{width:100%;min-height:44px;padding:10px 14px;border:1.5px solid var(--line);border-radius:12px;
  font:inherit;font-size:.95rem;background:#fff;margin-bottom:6px;box-sizing:border-box}
.toolsearch:focus{outline:none;border-color:var(--navy)}
/* 직무 제목 · 영업 단계 소제목 */
.jobsec{margin-top:22px}
.jobsec>h2{display:flex;align-items:center;gap:8px;font-size:1.08rem;margin:0 0 4px}
.jobsec>h2 em{font-style:normal;font-size:.76rem;font-weight:700;color:var(--soft)}
.subgrp{display:flex;align-items:center;gap:7px;margin:14px 0 9px;font-size:.86rem;font-weight:800;
  color:var(--navy);letter-spacing:-.01em}
.subgrp i{font-style:normal;font-size:1rem}
.subgrp em{font-style:normal;font-weight:700;font-size:.74rem;color:var(--soft)}
.subgrp::after{content:"";flex:1;height:1px;background:var(--line);margin-left:6px}
/* 과정 묶음 안내 띠 */
.packbox{border:1.5px dashed var(--navy);border-radius:14px;padding:12px 14px;margin:6px 0 4px;background:#F4F6FA}
.packbox b{display:block;font-size:1rem}
.packbox p{margin:4px 0 8px;font-size:.86rem;color:var(--soft)}
.packbox .pbtns{display:flex;gap:6px;flex-wrap:wrap}
.packbox button{min-height:34px;padding:5px 12px;border-radius:99px;border:1.5px solid var(--line);background:#fff;font:inherit;font-size:.82rem;font-weight:700;cursor:pointer}
.nomatch{padding:30px 10px;text-align:center;color:var(--soft)}
/* [여는 교육방] 띠 — AI 도구는 교육방 코드가 있어야 열린다. 로그인한 사람의 방을 카드에 붙인다(2026-09-20). */
.roombar{display:flex;align-items:center;flex-wrap:wrap;gap:8px 10px;margin:10px 0 2px;padding:10px 14px;border-radius:12px;
  background:var(--wash);border:1.5px solid var(--line);font-size:.88rem;font-weight:700;color:var(--ink);transition:box-shadow .2s,border-color .2s}
.roombar label{white-space:nowrap}
.roombar span{font-weight:600;color:var(--soft)}
.roombar select{flex:1 1 220px;min-width:0;max-width:100%;min-height:38px;padding:6px 10px;border-radius:10px;border:1.5px solid var(--line);
  background:#fff;font:inherit;font-size:.88rem;font-weight:700;color:var(--ink)}
.roombar button,.roombar a{min-height:36px;display:inline-flex;align-items:center;padding:6px 14px;border-radius:99px;border:0;
  background:var(--navy);color:#fff;font:inherit;font-size:.84rem;font-weight:800;text-decoration:none;cursor:pointer}
.roombar.warn{background:#fffbeb;border-color:#fcd34d}
.roombar.flash{border-color:#9A5A00;box-shadow:0 0 0 4px rgba(245,158,11,.25)}
/* 일정 임박 카드 — 오늘~3일 뒤 교육일인 내 세션이 있는 진단 도구(2026-09-27 대표님 지시 "카드 배경을 밝은 노란색으로") */
.tcard.soon,a.tcard.soon:hover{background:#fef9c3;border-color:#facc15}
a.tcard.soon:hover .ticon{background:#fff}
.tcard .tsoon{background:#fde047;color:#713f12;font-weight:800}
.ticon .ni{width:21px;height:21px;color:var(--link)}
h2 .ni,h3 .ni,.jobsec .ni,.packbox .ni{width:1em;height:1em;vertical-align:-.13em;color:var(--link)}
.chips .ni,button .ni{width:1em;height:1em;vertical-align:-.13em}
/* 전체 보기 카드 — 왼쪽 아이콘, 오른쪽 이름과 「나만 봅니다」(사업 관리 카드와 같은 모양, 대표님 2026-11-02 「아이콘 다 넣어줘」) */
.tv-all .toolcat .tcard{display:grid;grid-template-columns:32px minmax(0,1fr);column-gap:12px;align-items:center;align-content:center}
.tv-all .toolcat .tcard .ticon{grid-row:1 / span 2;display:inline-flex;width:32px;height:32px;margin:0}
.tv-all .toolcat .tcard .ticon svg{width:17px;height:17px}
.tv-all .toolcat .tcard b,.tv-all .toolcat .tcard small{grid-column:2}