/* genffice-studio 목업 — Tailwind CDN 위에 얹는 컴포넌트 유틸.
   참고용목업(genver-studio)의 셸 문법을 이어받고, 3층 설계(지식·능력·근거정책)를
   화면에 세우기 위한 컴포넌트를 새로 추가했다. */

/* ===================== 셸 ===================== */
.nav-item {
  display: flex;
  align-items: center;
  gap: .7rem;
  width: 100%;
  padding: .5rem .75rem;
  border-radius: .6rem;
  font-size: .875rem;
  font-weight: 500;
  color: rgb(71 85 105);
  transition: background-color .15s, color .15s;
}
.dark .nav-item { color: rgb(148 163 184); }
.nav-item:hover { background: rgb(241 245 249); color: rgb(15 23 42); }
.dark .nav-item:hover { background: rgb(30 41 59); color: #fff; }
.nav-item svg { width: 18px; height: 18px; flex: none; }
.nav-item.active { background: rgb(224 231 255); color: rgb(67 56 202); font-weight: 600; }
.dark .nav-item.active { background: rgba(79,70,229,.18); color: rgb(165 180 252); }

.nav-badge {
  margin-left: auto;
  font-size: 11px;
  background: rgb(226 232 240);
  color: rgb(71 85 105);
  border-radius: 999px;
  padding: 1px 8px;
  font-weight: 600;
}
.dark .nav-badge { background: rgb(51 65 85); color: rgb(203 213 225); }
.nav-item.active .nav-badge { background: rgb(165 180 252); color: rgb(49 46 129); }

.card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.25rem;
}
.dark .card { background: rgb(15 23 42); border-color: rgb(30 41 59); }

.card-tight { padding: 0; overflow: hidden; }

.stat-card {
  background: #fff;
  border: 1px solid rgb(226 232 240);
  border-radius: 1rem;
  padding: 1.1rem 1.25rem;
}
.dark .stat-card { background: rgb(15 23 42); border-color: rgb(30 41 59); }
.stat-icon { display: grid; place-items: center; width: 40px; height: 40px; border-radius: .7rem; }
.stat-icon svg { width: 20px; height: 20px; }

.section-title { font-size: 13px; font-weight: 700; text-transform: uppercase; letter-spacing: .06em; color: rgb(148 163 184); }

/* ===================== 폼 ===================== */
.form-label { display: block; font-size: 13px; font-weight: 600; color: rgb(51 65 85); margin-bottom: .4rem; }
.dark .form-label { color: rgb(203 213 225); }
.form-input {
  width: 100%;
  border: 1px solid rgb(226 232 240);
  background: rgb(248 250 252);
  border-radius: .6rem;
  padding: .55rem .75rem;
  font-size: 14px;
  color: rgb(30 41 59);
  outline: none;
  transition: border-color .15s, box-shadow .15s;
}
.form-input:focus { border-color: rgb(99 102 241); box-shadow: 0 0 0 3px rgba(99,102,241,.15); }
.dark .form-input { background: rgb(2 6 23); border-color: rgb(51 65 85); color: rgb(226 232 240); }

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: .4rem;
  border-radius: .6rem; font-size: 14px; font-weight: 600; padding: .55rem .9rem;
  transition: all .15s; border: 1px solid transparent;
}
.btn svg { width: 16px; height: 16px; }
.btn-primary { background: rgb(79 70 229); color: #fff; box-shadow: 0 8px 20px -8px rgba(79,70,229,.6); }
.btn-primary:hover { background: rgb(67 56 202); }
.btn-ghost { border-color: rgb(226 232 240); color: rgb(51 65 85); background: #fff; }
.btn-ghost:hover { background: rgb(248 250 252); }
.dark .btn-ghost { border-color: rgb(51 65 85); color: rgb(203 213 225); background: transparent; }
.dark .btn-ghost:hover { background: rgb(30 41 59); }
.btn-sm { font-size: 12.5px; padding: .35rem .7rem; border-radius: .5rem; }
.btn:disabled, .btn-blocked { opacity: .45; cursor: not-allowed; filter: grayscale(.35); }

.filter-tab { font-size: 13px; font-weight: 600; color: rgb(100 116 139); padding: .4rem .8rem; border-radius: .5rem; transition: all .15s; }
.filter-tab:hover { color: rgb(30 41 59); }
.dark .filter-tab { color: rgb(148 163 184); }
.filter-active { background: rgb(224 231 255); color: rgb(67 56 202) !important; }
.dark .filter-active { background: rgba(79,70,229,.2); color: rgb(165 180 252) !important; }

/* ===================== 배지 ===================== */
.badge {
  display: inline-flex; align-items: center; gap: .25rem;
  font-size: 11px; font-weight: 700; border-radius: 999px; padding: 2px 9px;
  white-space: nowrap;
}
.badge-admin { background: rgb(224 242 254); color: rgb(2 132 199); }
.dark .badge-admin { background: rgba(56,189,248,.15); color: rgb(125 211 252); }
.badge-expert { background: rgb(237 233 254); color: rgb(109 40 217); }
.dark .badge-expert { background: rgba(139,92,246,.2); color: rgb(196 181 253); }
.badge-cs { background: rgb(254 226 226); color: rgb(185 28 28); }
.dark .badge-cs { background: rgba(239,68,68,.18); color: rgb(252 165 165); }
.badge-ops { background: rgb(209 250 229); color: rgb(4 120 87); }
.dark .badge-ops { background: rgba(16,185,129,.16); color: rgb(110 231 183); }
.badge-neutral { background: rgb(241 245 249); color: rgb(71 85 105); }
.dark .badge-neutral { background: rgb(30 41 59); color: rgb(148 163 184); }
.badge-amber { background: rgb(254 243 199); color: rgb(180 83 9); }
.dark .badge-amber { background: rgba(245,158,11,.18); color: rgb(252 211 77); }

/* ===================== 3층 설계 스택 ===================== */
/* AI상담에이전트_설계검토서 §4.1 — ③근거정책 / ②능력 / ①지식 */
.layer {
  border: 1px solid rgb(226 232 240);
  border-radius: .85rem;
  padding: .85rem 1rem;
  background: #fff;
  position: relative;
}
.dark .layer { background: rgb(15 23 42); border-color: rgb(30 41 59); }
.layer-3 { border-left: 3px solid rgb(244 63 94); }
.layer-2 { border-left: 3px solid rgb(79 70 229); }
.layer-1 { border-left: 3px solid rgb(13 148 136); }
.layer-num {
  display: inline-grid; place-items: center;
  width: 20px; height: 20px; border-radius: 999px;
  font-size: 11px; font-weight: 800; color: #fff; flex: none;
}
.layer-3 .layer-num { background: rgb(244 63 94); }
.layer-2 .layer-num { background: rgb(79 70 229); }
.layer-1 .layer-num { background: rgb(13 148 136); }

/* 층 사이 주입 화살표 */
.inject-arrow {
  display: grid; place-items: center;
  color: rgb(203 213 225);
  height: 18px;
}
.dark .inject-arrow { color: rgb(51 65 85); }
.inject-arrow svg { width: 16px; height: 16px; }

/* ===================== 도구 칩 ===================== */
.chip {
  display: inline-flex; align-items: center; gap: .3rem;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11.5px; font-weight: 600;
  border-radius: .4rem; padding: 2px 7px;
  background: rgb(241 245 249); color: rgb(51 65 85);
  border: 1px solid rgb(226 232 240);
}
.dark .chip { background: rgb(30 41 59); color: rgb(203 213 225); border-color: rgb(51 65 85); }
.chip-app { background: rgb(238 242 255); color: rgb(67 56 202); border-color: rgb(199 210 254); }
.dark .chip-app { background: rgba(79,70,229,.16); color: rgb(165 180 252); border-color: rgba(79,70,229,.3); }
.chip-general { background: rgb(240 253 250); color: rgb(15 118 110); border-color: rgb(153 246 228); }
.dark .chip-general { background: rgba(13,148,136,.14); color: rgb(94 234 212); border-color: rgba(13,148,136,.3); }
.chip-new { animation: chipin .35s ease-out; }
@keyframes chipin { from { opacity: 0; transform: translateY(-3px) scale(.94); } to { opacity: 1; transform: none; } }

/* ===================== 선택 카드 (역량 · APP · 지식팩) ===================== */
.pick {
  position: relative;
  display: flex; gap: .7rem; align-items: flex-start;
  width: 100%; text-align: left;
  border: 1px solid rgb(226 232 240);
  background: #fff; border-radius: .8rem;
  padding: .75rem .85rem;
  transition: all .15s;
}
.dark .pick { background: rgb(15 23 42); border-color: rgb(30 41 59); }
.pick:hover { border-color: rgb(165 180 252); }
.pick-on { border-color: rgb(79 70 229); background: rgb(238 242 255); }
.dark .pick-on { border-color: rgb(79 70 229); background: rgba(79,70,229,.1); }
.pick-locked { opacity: .95; background: rgb(248 250 252); cursor: default; }
.dark .pick-locked { background: rgba(30,41,59,.5); }
.pick-blocked { opacity: .5; cursor: not-allowed; }
.pick-blocked:hover { border-color: rgb(226 232 240); }

.pick-box {
  display: grid; place-items: center; flex: none;
  width: 18px; height: 18px; margin-top: 1px;
  border-radius: .3rem;
  border: 1.5px solid rgb(203 213 225);
  color: transparent;
}
.dark .pick-box { border-color: rgb(71 85 105); }
.pick-box svg { width: 12px; height: 12px; }
.pick-on .pick-box { background: rgb(79 70 229); border-color: rgb(79 70 229); color: #fff; }
.pick-locked .pick-box { background: rgb(148 163 184); border-color: rgb(148 163 184); color: #fff; }

/* ===================== 위저드 ===================== */
.wiz {
  display: flex; align-items: center; gap: .5rem;
  font-size: 13px; font-weight: 600; color: rgb(148 163 184);
  padding: .45rem .8rem; border-radius: .6rem;
  transition: all .15s; white-space: nowrap;
}
.wiz:hover { color: rgb(71 85 105); }
.wiz-num {
  display: grid; place-items: center; flex: none;
  width: 22px; height: 22px; border-radius: 999px;
  font-size: 11.5px; font-weight: 800;
  background: rgb(241 245 249); color: rgb(100 116 139);
}
.dark .wiz-num { background: rgb(30 41 59); color: rgb(148 163 184); }
.wiz-on { background: rgb(224 231 255); color: rgb(67 56 202); }
.dark .wiz-on { background: rgba(79,70,229,.18); color: rgb(165 180 252); }
.wiz-on .wiz-num { background: rgb(79 70 229); color: #fff; }
.wiz-done .wiz-num { background: rgb(13 148 136); color: #fff; }
.wiz-line { flex: 1; height: 1px; background: rgb(226 232 240); min-width: 8px; }
.dark .wiz-line { background: rgb(30 41 59); }

/* ===================== 신호등 (주입 검증 · 파견 게이트) ===================== */
.light { width: 9px; height: 9px; border-radius: 999px; display: inline-block; flex: none; }
.light-green { background: rgb(16 185 129); box-shadow: 0 0 0 3px rgba(16,185,129,.18); }
.light-amber { background: rgb(245 158 11); box-shadow: 0 0 0 3px rgba(245,158,11,.18); }
.light-red   { background: rgb(244 63 94);  box-shadow: 0 0 0 3px rgba(244,63,94,.18); }
.light-off   { background: rgb(203 213 225); }
.dark .light-off { background: rgb(51 65 85); }
.light-pulse { animation: lightpulse 1.6s ease-in-out infinite; }
@keyframes lightpulse { 0%,100% { opacity: 1; } 50% { opacity: .35; } }

.verdict { display: inline-flex; align-items: center; gap: .4rem; font-size: 12px; font-weight: 700; border-radius: 999px; padding: 3px 10px; }
.verdict-go    { background: rgb(209 250 229); color: rgb(4 120 87); }
.dark .verdict-go    { background: rgba(16,185,129,.15); color: rgb(110 231 183); }
.verdict-hold  { background: rgb(254 243 199); color: rgb(180 83 9); }
.dark .verdict-hold  { background: rgba(245,158,11,.15); color: rgb(252 211 77); }
.verdict-block { background: rgb(255 228 230); color: rgb(190 18 60); }
.dark .verdict-block { background: rgba(244,63,94,.15); color: rgb(253 164 175); }

.check-row { display: flex; align-items: center; gap: .6rem; padding: .5rem .7rem; border-radius: .6rem; }
.check-row:hover { background: rgb(248 250 252); }
.dark .check-row:hover { background: rgba(30,41,59,.5); }

.gate-mini { display: inline-flex; align-items: center; gap: 3px; }
.gate-mini .light { width: 7px; height: 7px; box-shadow: none; }

/* ===================== 표 ===================== */
.tbl { width: 100%; font-size: 13.5px; border-collapse: collapse; }
.tbl th {
  text-align: left; font-size: 11.5px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: rgb(148 163 184);
  padding: .6rem .9rem; border-bottom: 1px solid rgb(226 232 240);
  white-space: nowrap;
}
.dark .tbl th { border-color: rgb(30 41 59); }
.tbl td { padding: .7rem .9rem; border-bottom: 1px solid rgb(241 245 249); vertical-align: middle; }
.dark .tbl td { border-color: rgba(30,41,59,.7); }
.tbl tr:last-child td { border-bottom: 0; }
.tbl tbody tr:hover { background: rgb(248 250 252); }
.dark .tbl tbody tr:hover { background: rgba(30,41,59,.4); }

/* ===================== 코드 블록 ===================== */
.code {
  border-radius: .7rem;
  background: rgb(15 23 42);
  color: rgb(226 232 240);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12px; line-height: 1.65;
  padding: .9rem 1rem;
  overflow-x: auto;
  white-space: pre;
}
.dark .code { background: rgb(2 6 23); border: 1px solid rgb(30 41 59); }
.code .k { color: rgb(165 180 252); }
.code .s { color: rgb(110 231 183); }
.code .c { color: rgb(100 116 139); }
.code .n { color: rgb(252 211 77); }

/* ===================== 진행 바 ===================== */
.bar { height: 6px; border-radius: 999px; background: rgb(241 245 249); overflow: hidden; }
.dark .bar { background: rgb(30 41 59); }
.bar > i { display: block; height: 100%; border-radius: 999px; background: rgb(79 70 229); transition: width .4s ease; }

/* ===================== 4단 레이아웃 미니 도식 ===================== */
/* 제품기획컨셉 §APP — "세로 4단 layout의 표준 구조" */
.mini4 { display: grid; grid-template-columns: 22% 26% 26% 26%; gap: 3px; height: 54px; }
.mini4 > div {
  border-radius: .3rem; font-size: 9.5px; font-weight: 700;
  display: grid; place-items: center; text-align: center; line-height: 1.2;
  background: rgb(241 245 249); color: rgb(100 116 139); padding: 2px;
}
.dark .mini4 > div { background: rgb(30 41 59); color: rgb(148 163 184); }
.mini4 > div.hl { background: rgb(224 231 255); color: rgb(67 56 202); }
.dark .mini4 > div.hl { background: rgba(79,70,229,.22); color: rgb(165 180 252); }

/* ===================== 토스트 ===================== */
#toast {
  position: fixed; left: 50%; bottom: 1.75rem; transform: translate(-50%, 1.5rem);
  z-index: 60; opacity: 0; pointer-events: none;
  transition: opacity .2s, transform .2s;
  background: rgb(15 23 42); color: #fff;
  font-size: 13.5px; font-weight: 600;
  border-radius: .7rem; padding: .6rem 1.1rem;
  box-shadow: 0 20px 40px -12px rgba(0,0,0,.5);
  display: flex; align-items: center; gap: .5rem;
}
#toast.on { opacity: 1; transform: translate(-50%, 0); }
#toast svg { width: 16px; height: 16px; color: rgb(110 231 183); }

/* ===================== 서랍 (APP 상세) ===================== */
#drawer-wrap { position: fixed; inset: 0; z-index: 50; display: none; }
#drawer-wrap.on { display: block; }
#drawer-bg { position: absolute; inset: 0; background: rgba(15,23,42,.45); backdrop-filter: blur(2px); }
#drawer {
  position: absolute; top: 0; right: 0; bottom: 0;
  width: min(560px, 100%);
  background: rgb(248 250 252);
  border-left: 1px solid rgb(226 232 240);
  overflow-y: auto;
  transform: translateX(100%);
  transition: transform .22s ease-out;
}
.dark #drawer { background: rgb(2 6 23); border-color: rgb(30 41 59); }
#drawer-wrap.on #drawer { transform: none; }

/* ===================== 스크롤바 ===================== */
::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: rgb(203 213 225); border-radius: 999px; border: 3px solid transparent; background-clip: content-box; }
.dark ::-webkit-scrollbar-thumb { background: rgb(51 65 85); background-clip: content-box; }