/* ============================================================
   Genver Infra — mockup 전용 컴포넌트
   platform.css 의 토큰/프리미티브를 그대로 상속한다.
   여기에는 인프라 6개 서비스에서만 쓰는 조각만 추가한다.
   ============================================================ */

/* 서비스 고유 액센트 — 앱(docs/ppt)과 구분되는 인프라 색 */
:root {
  --svc-drive: #2f7fd0;
  --svc-mail: #c2537a;
  --svc-ojt: #8a4fd0;
  --svc-rag: #0e8f8a;
  --svc-host: #d2603a;
  --svc-key: #5b5bd6;
}

/* ============================================================
   공통 — 2단 패널 (목록 + 상세)
   ============================================================ */
.two { flex: 1; display: flex; min-width: 0; min-height: 0; }
.two-list { width: 348px; flex: none; display: flex; flex-direction: column; min-height: 0; border-right: 1px solid var(--border-1); background: var(--bg-panel); }
.two-main { flex: 1; display: flex; flex-direction: column; min-width: 0; min-height: 0; background: var(--bg-app); }
.two-body { flex: 1; min-height: 0; overflow-y: auto; }

.inspect { width: 300px; flex: none; border-left: 1px solid var(--border-1); background: var(--bg-sidebar); display: flex; flex-direction: column; min-height: 0; }
.inspect-body { flex: 1; min-height: 0; overflow-y: auto; padding: 12px; }

/* 라벨 + 값 정의 목록 */
.dl { display: grid; grid-template-columns: 82px 1fr; gap: 6px 10px; font-size: var(--fs-11); align-items: baseline; }
.dl dt { color: var(--text-3); font-weight: 600; }
.dl dd { margin: 0; color: var(--text-1); min-width: 0; overflow-wrap: anywhere; }

.sec-ttl {
  font-size: var(--fs-11); font-weight: 700; color: var(--text-3); letter-spacing: .3px;
  margin: 0 0 8px; display: flex; align-items: center; gap: 6px;
}
.sec-ttl .spacer { flex: 1; }

/* 상태 점 — 서비스/배포/VPS 공통 */
.sd {
  width: 7px; height: 7px; border-radius: 50%; flex: none; display: inline-block;
  background: var(--border-3);
}
.sd[data-s="up"] { background: var(--success); }
.sd[data-s="warn"] { background: var(--warning); }
.sd[data-s="down"] { background: var(--danger); }
.sd[data-s="busy"] { background: var(--info); animation: pulse 1.4s ease-in-out infinite; }

/* 사람이 직접 쓴 비용은 AI와 구분해 무채색으로 둔다 */
.bar.mute i { background: var(--text-3); }

/* 저장한 뷰(주간 리포트 · ROI)의 서술형 요약 목록 */
.repsum { margin: 0; padding: 0 0 0 16px; display: flex; flex-direction: column; gap: 7px; }
.repsum li { font-size: var(--fs-12); color: var(--text-2); line-height: 1.75; }
.repsum li b { color: var(--text-1); font-weight: 650; }
.repsum li .btn { margin-left: 6px; vertical-align: middle; }

/* ============================================================
   인프라 개요 — 서비스 카드
   ============================================================ */
.svcgrid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.svccard {
  position: relative; text-align: left; width: 100%;
  background: var(--bg-panel); border: 1px solid var(--border-2);
  border-radius: var(--r-10); padding: 15px 16px 13px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.svccard:hover { border-color: var(--border-3); box-shadow: var(--sh-2); transform: translateY(-1px); }
.svccard .top { display: flex; align-items: center; gap: 9px; margin-bottom: 11px; }
.svccard .sico {
  width: 34px; height: 34px; border-radius: 10px; flex: none;
  display: grid; place-items: center; color: #fff;
}
.svccard .sico svg { width: 17px; height: 17px; }
.svccard h3 { font-size: var(--fs-13); font-weight: 650; margin: 0; letter-spacing: -.1px; }
.svccard .rp { font-size: var(--fs-10); color: var(--text-3); font-family: ui-monospace, Menlo, monospace; }
.svccard p { font-size: var(--fs-12); color: var(--text-2); margin: 0 0 12px; min-height: 34px; line-height: 1.6; }
.svccard .mrows { border-top: 1px solid var(--border-1); padding-top: 9px; display: flex; flex-direction: column; gap: 5px; }
.svccard .mrow { display: flex; align-items: center; gap: 6px; font-size: var(--fs-11); color: var(--text-3); }
.svccard .mrow b { color: var(--text-1); font-weight: 650; font-variant-numeric: tabular-nums; }
.svccard .mrow .spacer { flex: 1; }

/* ============================================================
   genver-drive — 파일 브라우저
   ============================================================ */
.crumbs { display: flex; align-items: center; gap: 4px; font-size: var(--fs-12); min-width: 0; }
.crumbs button { color: var(--text-2); padding: 2px 5px; border-radius: var(--r-4); white-space: nowrap; }
.crumbs button:hover { background: var(--bg-hover); color: var(--text-1); }
.crumbs button.cur { color: var(--text-1); font-weight: 650; }
.crumbs .cs { color: var(--text-3); }

.fgrid { display: grid; grid-template-columns: repeat(auto-fill, minmax(178px, 1fr)); gap: 10px; margin-bottom: 22px; }
.fcard {
  display: flex; align-items: center; gap: 10px; text-align: left; width: 100%;
  border: 1px solid var(--border-2); border-radius: var(--r-8);
  background: var(--bg-panel); padding: 10px 11px;
  transition: border-color .12s, box-shadow .12s;
}
.fcard:hover { border-color: var(--border-3); box-shadow: var(--sh-1); }
.fcard .fico { flex: none; }
.fcard .fb { min-width: 0; }
.fcard b { display: block; font-size: var(--fs-12); font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.fcard small { font-size: var(--fs-10); color: var(--text-3); }

.fico {
  width: 28px; height: 28px; border-radius: var(--r-6);
  display: grid; place-items: center;
  font-size: var(--fs-10); font-weight: 700; color: #fff;
  font-family: ui-monospace, Menlo, monospace; letter-spacing: -.2px;
  background: var(--text-3);
}
.fico.sm { width: 22px; height: 22px; border-radius: var(--r-4); font-size: 8px; }
.fico[data-t="folder"] { background: var(--svc-drive); font-family: inherit; font-size: 13px; }
.fico[data-t="docs"] { background: var(--app-docs); }
.fico[data-t="ppt"] { background: var(--app-ppt); }
.fico[data-t="md"] { background: #4b5563; }
.fico[data-t="csv"] { background: var(--app-sheet); }
.fico[data-t="pdf"] { background: #b3392f; }
.fico[data-t="img"] { background: #8a4fd0; }
.fico[data-t="code"] { background: #16161d; }
.fico[data-t="zip"] { background: #9a5700; }

.tbl tr.frow { cursor: pointer; }
.tbl tr.frow.on { background: var(--accent-subtle); }
.tbl td .fname { display: flex; align-items: center; gap: 9px; min-width: 0; }
.tbl td .fname span.nm { font-weight: 600; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

/* 공간 전환 세그먼트 헤더 */
.space-head { display: flex; align-items: center; gap: 10px; margin-bottom: 14px; flex-wrap: wrap; }

/* 용량 바 */
.quota { padding: 8px 10px; }
.quota .qt { display: flex; align-items: center; justify-content: space-between; font-size: var(--fs-11); color: var(--text-3); margin-bottom: 5px; }
.quota .qt b { color: var(--text-1); font-weight: 650; }

/* ============================================================
   genver-email4agent — 메일함
   ============================================================ */
/* AI 직원 선택 — 아바타 한 줄 */
/* 선택된 계정 표시 줄 — 어느 AI 직원의 사서함을 보고 있는지 */
.acctline {
  display: flex; align-items: center; gap: 6px;
  padding: 6px 11px; border-bottom: 1px solid var(--border-1);
  background: var(--bg-sidebar); font-size: var(--fs-10); color: var(--text-3);
}
.acctline b { color: var(--text-1); font-weight: 650; font-size: var(--fs-11); }
.acctline .ad { font-family: ui-monospace, Menlo, monospace; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.mlist { flex: 1; min-height: 0; overflow-y: auto; padding: 6px; }
.mrow2 {
  display: grid; grid-template-columns: 8px 1fr; gap: 8px;
  width: 100%; text-align: left; padding: 9px 10px;
  border-radius: var(--r-8); border: 1px solid transparent;
  transition: background .12s;
}
.mrow2:hover { background: var(--bg-sidebar); }
.mrow2.on { background: var(--accent-subtle); border-color: var(--accent-border); }
.mrow2 .un { width: 6px; height: 6px; border-radius: 50%; background: var(--accent); margin-top: 6px; }
.mrow2.read .un { background: transparent; }
.mrow2 .mb { min-width: 0; }
.mrow2 .l1 { display: flex; align-items: baseline; gap: 6px; margin-bottom: 2px; }
.mrow2 .l1 .who { font-size: var(--fs-12); font-weight: 650; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow2.read .l1 .who { font-weight: 500; color: var(--text-2); }
.mrow2 .l1 .tm { font-size: var(--fs-10); color: var(--text-3); margin-left: auto; flex: none; }
.mrow2 .sj { font-size: var(--fs-12); color: var(--text-1); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; margin-bottom: 2px; }
.mrow2.read .sj { color: var(--text-2); }
.mrow2 .pv { font-size: var(--fs-11); color: var(--text-3); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mrow2 .tags { display: flex; gap: 4px; margin-top: 5px; flex-wrap: wrap; }

.mread { flex: 1; min-height: 0; overflow-y: auto; padding: 20px 24px 40px; }
.mread-in { max-width: 720px; margin: 0 auto; }
.mread h1 { font-size: var(--fs-17); font-weight: 650; margin: 0 0 10px; letter-spacing: -.2px; line-height: 1.4; }
.mhdr {
  display: flex; align-items: center; gap: 10px; padding: 11px 0;
  border-top: 1px solid var(--border-1); border-bottom: 1px solid var(--border-1); margin-bottom: 16px;
}
.mhdr .mh-b { min-width: 0; flex: 1; }
.mhdr .mh-b b { font-size: var(--fs-12); font-weight: 650; }
.mhdr .mh-b div { font-size: var(--fs-11); color: var(--text-3); }
.mbody { font-size: var(--fs-13); line-height: 1.78; color: #26262c; }
.mbody p { margin: 0 0 12px; }
.mbody ul { margin: 0 0 12px; padding-left: 20px; }
.mbody li { margin: 3px 0; }
.mbody .sig { margin-top: 20px; padding-top: 12px; border-top: 1px solid var(--border-1); font-size: var(--fs-11); color: var(--text-3); line-height: 1.8; }

/* 발신 승인 큐 배너 */
.approve-bar {
  display: flex; align-items: center; gap: 10px;
  border: 1px solid var(--warning-subtle); background: var(--warning-subtle);
  border-radius: var(--r-8); padding: 10px 12px; margin-bottom: 16px;
}
.approve-bar svg { width: 15px; height: 15px; flex: none; color: var(--warning); }
.approve-bar .ab-t { flex: 1; min-width: 0; font-size: var(--fs-12); color: var(--warning); line-height: 1.6; }
.approve-bar .ab-t b { font-weight: 700; }

/* 도달률 (SPF/DKIM/DMARC) */
.deliver { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.deliver .dv { border: 1px solid var(--border-2); border-radius: var(--r-8); padding: 9px 10px; background: var(--bg-panel); }
.deliver .dv .k { font-size: var(--fs-10); font-weight: 700; color: var(--text-3); letter-spacing: .3px; margin-bottom: 4px; }
.deliver .dv .v { font-size: var(--fs-12); font-weight: 650; display: flex; align-items: center; gap: 5px; }

/* ============================================================
   genver-ojt4agent — 규칙
   ============================================================ */
.layer { display: flex; align-items: center; gap: 8px; margin: 22px 0 10px; }
.layer .ln { flex: none; width: 22px; height: 22px; border-radius: var(--r-6); display: grid; place-items: center;
  background: var(--bg-subtle); color: var(--text-2); font-size: var(--fs-11); font-weight: 700; }
.layer h2 { font-size: var(--fs-13); font-weight: 650; margin: 0; letter-spacing: -.1px; }
.layer .desc { font-size: var(--fs-11); color: var(--text-3); }

.rulecard {
  display: grid; grid-template-columns: 1fr auto; gap: 12px; align-items: start;
  width: 100%; text-align: left;
  background: var(--bg-panel); border: 1px solid var(--border-2);
  border-radius: var(--r-10); padding: 12px 14px; margin-bottom: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.rulecard:hover { border-color: var(--border-3); box-shadow: var(--sh-1); }
.rulecard.off { opacity: .55; }
.rulecard .rt { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; flex-wrap: wrap; }
.rulecard .rt b { font-size: var(--fs-12); font-weight: 650; }
.rulecard .rd { font-size: var(--fs-11); color: var(--text-2); line-height: 1.65; margin-bottom: 8px; }
.rulecard .rm { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; font-size: var(--fs-10); color: var(--text-3); }
.rulecard .rr { display: flex; flex-direction: column; align-items: flex-end; gap: 7px; flex: none; }

.mono-box {
  background: var(--bg-subtle); border: 1px solid var(--border-1); border-radius: var(--r-6);
  padding: 9px 11px; font-family: ui-monospace, Menlo, monospace;
  font-size: 11px; line-height: 1.75; color: var(--text-2); white-space: pre-wrap;
}

/* ============================================================
   genver-rag — 색인 파이프라인
   ============================================================ */
.pipe { display: flex; align-items: stretch; gap: 0; }
.pipe .ps { flex: 1; min-width: 0; position: relative; padding: 0 4px; }
.pipe .ps + .ps::before {
  content: ""; position: absolute; left: -5px; top: 15px;
  width: 10px; height: 1px; background: var(--border-2);
}
.pipe .pb {
  border: 1px solid var(--border-2); border-radius: var(--r-8);
  background: var(--bg-panel); padding: 9px 10px; height: 100%;
}
.pipe .ps[data-s="done"] .pb { border-color: var(--accent-border); background: var(--accent-subtle); }
.pipe .ps[data-s="run"] .pb { border-color: var(--warning-subtle); background: var(--warning-subtle); }
.pipe .pn { display: flex; align-items: center; gap: 5px; font-size: var(--fs-11); font-weight: 650; margin-bottom: 3px; }
.pipe .pv { font-size: var(--fs-10); color: var(--text-3); }
.pipe .pe { font-size: var(--fs-10); color: var(--text-3); font-family: ui-monospace, Menlo, monospace; margin-top: 4px; }

.kbcard {
  display: grid; grid-template-columns: 34px 1fr auto; gap: 11px; align-items: start;
  width: 100%; text-align: left;
  background: var(--bg-panel); border: 1px solid var(--border-2);
  border-radius: var(--r-10); padding: 13px 14px; margin-bottom: 8px;
  transition: border-color .12s, box-shadow .12s, transform .12s;
}
.kbcard:hover { border-color: var(--border-3); box-shadow: var(--sh-2); transform: translateY(-1px); }
.kbcard.on { border-color: var(--accent-border); background: var(--accent-subtle); }
.kbcard .kico { width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; color: #fff; background: var(--svc-rag); }
.kbcard .kico svg { width: 16px; height: 16px; }
.kbcard b { font-size: var(--fs-13); font-weight: 650; display: block; margin-bottom: 3px; }
.kbcard .kd { font-size: var(--fs-11); color: var(--text-2); margin-bottom: 7px; line-height: 1.6; }
.kbcard .kd { display: block; }
.kbcard .km { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; font-size: var(--fs-10); color: var(--text-3); }
.kbcard .km > span { white-space: nowrap; }
.kbcard .km b { display: inline; font-size: var(--fs-10); margin: 0; }

/* 검색 테스트 */
.qbox { display: flex; gap: 8px; margin-bottom: 12px; }
.hit {
  border: 1px solid var(--border-2); border-radius: var(--r-8);
  padding: 10px 12px; margin-bottom: 7px; background: var(--bg-panel);
}
.hit .hh { display: flex; align-items: center; gap: 7px; margin-bottom: 5px; }
.hit .hh b { font-size: var(--fs-11); font-weight: 650; }
.hit .hh .sc { margin-left: auto; font-size: var(--fs-10); font-weight: 700; color: var(--accent-text); font-variant-numeric: tabular-nums; }
.hit .ht { font-size: var(--fs-12); color: var(--text-2); line-height: 1.7; }
.hit .ht mark { background: #fff29a; color: var(--text-1); border-radius: 2px; padding: 0 2px; }

/* ============================================================
   genver-WebHosting — 배포
   ============================================================ */
.dep {
  display: grid; grid-template-columns: 36px 1fr 132px 96px 128px 28px;
  gap: 12px; align-items: center;
  width: 100%; text-align: left;
  border: 1px solid var(--border-2); border-radius: var(--r-10);
  background: var(--bg-panel); padding: 12px 14px; margin-bottom: 8px;
  transition: border-color .12s, box-shadow .12s;
}
.dep:hover { border-color: var(--border-3); box-shadow: var(--sh-1); }
.dep .dico { width: 36px; height: 36px; border-radius: 10px; display: grid; place-items: center; color: #fff; font-size: 14px; font-weight: 700; }
.dep .dn { min-width: 0; }
.dep .dn b { display: block; font-size: var(--fs-13); font-weight: 650; margin-bottom: 2px; }
.dep .dn a { font-size: var(--fs-11); color: var(--accent-text); text-decoration: none; }
.dep .dn a:hover { text-decoration: underline; }
.dep .dcol { font-size: var(--fs-11); color: var(--text-3); min-width: 0; }
.dep .dcol b { display: block; color: var(--text-1); font-weight: 600; font-size: var(--fs-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.logbox {
  background: #16161d; color: #d6d6e0; border-radius: var(--r-8);
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 11px; line-height: 1.8; padding: 12px 14px;
  max-height: 240px; overflow-y: auto; white-space: pre-wrap;
}
.logbox .lt { color: #5c6370; }
.logbox .lok { color: #a5d6a7; }
.logbox .lwarn { color: #e6c07b; }
.logbox .lerr { color: #f2777a; }

/* ============================================================
   genver-keymanager — VPS · 키
   ============================================================ */
.restile { border: 1px solid var(--border-2); border-radius: var(--r-10); padding: 12px 14px; background: var(--bg-panel); }
.restile .rk { font-size: var(--fs-11); color: var(--text-3); font-weight: 600; letter-spacing: .2px; }
.restile .rv { font-size: var(--fs-20); font-weight: 700; letter-spacing: -.5px; margin: 3px 0 7px; font-variant-numeric: tabular-nums; }
.restile .rn { font-size: var(--fs-10); color: var(--text-3); margin-top: 5px; }

.svctiles { display: grid; grid-template-columns: repeat(4, 1fr); gap: 8px; }
.svctile {
  display: flex; align-items: center; gap: 8px;
  border: 1px solid var(--border-2); border-radius: var(--r-8);
  padding: 9px 10px; background: var(--bg-panel); font-size: var(--fs-11);
}
.svctile .stn { flex: 1; min-width: 0; }
.svctile .stn b { display: block; font-weight: 650; font-size: var(--fs-11); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.svctile .stn small { color: var(--text-3); font-size: var(--fs-10); font-family: ui-monospace, Menlo, monospace; }

/* 모니터링 이벤트 피드 */
.evt { display: flex; gap: 9px; padding: 8px 2px; border-bottom: 1px solid var(--border-1); font-size: var(--fs-11); }
.evt:last-child { border-bottom: 0; }
.evt .et { color: var(--text-3); font-family: ui-monospace, Menlo, monospace; flex: none; font-size: var(--fs-10); padding-top: 1px; }
.evt .eb { min-width: 0; flex: 1; }
.evt .eb b { font-weight: 650; }
.evt .eb div { color: var(--text-2); margin-top: 1px; line-height: 1.6; }

/* 키 값 마스킹 */
.kv {
  display: inline-flex; align-items: center; gap: 6px;
  font-family: ui-monospace, Menlo, monospace; font-size: var(--fs-11); color: var(--text-2);
  background: var(--bg-subtle); border: 1px solid var(--border-1);
  border-radius: var(--r-4); padding: 1px 6px;
}
.kv button { color: var(--text-3); display: grid; place-items: center; }
.kv button:hover { color: var(--text-1); }
.kv svg { width: 11px; height: 11px; }

/* 만료 임박 표시 */
.exp { font-variant-numeric: tabular-nums; font-weight: 600; }
.exp.soon { color: var(--warning); }
.exp.over { color: var(--danger); }

/* 경고 배너 */
.banner {
  display: flex; align-items: flex-start; gap: 10px;
  border: 1px solid var(--danger-border); background: var(--danger-subtle);
  border-radius: var(--r-8); padding: 11px 13px; margin-bottom: 16px;
}
.banner svg { width: 15px; height: 15px; color: var(--danger); flex: none; margin-top: 1px; }
.banner .bb { flex: 1; min-width: 0; font-size: var(--fs-12); color: var(--text-1); line-height: 1.65; }
.banner .bb b { font-weight: 700; color: var(--danger); }
.banner.info { border-color: var(--accent-border); background: var(--accent-subtle); }
.banner.info svg { color: var(--accent-text); }
.banner.info .bb b { color: var(--accent-text); }

/* ============================================================
   검토 메모 — 목업 안에서 설계 의견을 같이 보여준다
   ============================================================ */
.note {
  border: 1px dashed var(--border-3); border-radius: var(--r-8);
  background: var(--bg-sidebar); padding: 11px 13px; margin-top: 14px;
}
.note .nt { font-size: var(--fs-10); font-weight: 700; color: var(--text-3); letter-spacing: .3px; margin-bottom: 6px; }
.note ul { margin: 0; padding-left: 16px; }
.note li { font-size: var(--fs-11); color: var(--text-2); line-height: 1.8; }
.note li b { color: var(--text-1); font-weight: 650; }

/* ============================================================
   Responsive
   ============================================================ */
@media (max-width: 1320px) {
  .svcgrid { grid-template-columns: repeat(2, 1fr); }
  .svctiles { grid-template-columns: repeat(2, 1fr); }
  .two-list { width: 300px; }
  .inspect { display: none; }
}
@media (max-width: 1080px) {
  .svcgrid { grid-template-columns: 1fr; }
  .deliver { grid-template-columns: repeat(2, 1fr); }
  .pipe { flex-direction: column; gap: 6px; }
  .pipe .ps + .ps::before { display: none; }
  .two-list { display: none; }
}