/* ===== 보안게이트 ===== */
.win--security .win-titlebar { background: #1f2a37; color: #fff; border-bottom: none; }
.win--security:not(.is-active) .win-titlebar { background: #4a5563; color: rgba(255,255,255,0.85); }
.win--security .win-ctrl:hover { background: rgba(255,255,255,0.15); }
.win--security .win-ctrl-close:hover { background: #e81123; }

.sg-app { display: flex; height: 100%; background: #f5f7fa; color: #1f2328; font-size: 13px; }
.sg-side { flex: 0 0 200px; display: flex; flex-direction: column; background: #1f2a37; color: #dfe6ee; }
.sg-brand { display: flex; align-items: center; gap: 10px; padding: 14px 14px 10px; }
.sg-brand svg { width: 32px; height: 32px; flex: 0 0 32px; }
.sg-brand-name { font-weight: 700; font-size: 13.5px; }
.sg-brand-sub { font-size: 10.5px; color: #93a3b5; }
.sg-tabs { display: flex; flex-direction: column; padding: 6px 8px; gap: 2px; }
.sg-tab { text-align: left; padding: 8px 10px; border: none; border-radius: 5px; background: transparent; color: #cfd8e3; font: inherit; font-size: 12.5px; }
.sg-tab:hover { background: rgba(255,255,255,0.08); }
.sg-tab.is-active { background: #2f80ed; color: #fff; font-weight: 600; }
.sg-side-note { margin-top: auto; padding: 12px 14px; font-size: 11px; line-height: 1.5; color: #93a3b5; border-top: 1px solid rgba(255,255,255,0.08); }
.sg-main { flex: 1 1 auto; min-width: 0; display: flex; flex-direction: column; }
.sg-filter { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; padding: 10px 14px; background: #fff; border-bottom: 1px solid #e1e5ea; }
.sg-f { display: flex; flex-direction: column; gap: 3px; font-size: 11px; color: #667; }
.sg-f-q { flex: 1 1 160px; }
.sg-input, .sg-select { height: 30px; padding: 0 8px; border: 1px solid #c9ced6; border-radius: 4px; font: inherit; font-size: 12.5px; background: #fff; min-width: 120px; }
.sg-f-q .sg-input { width: 100%; }
.sg-input:focus, .sg-select:focus { outline: none; border-color: #2f80ed; }
.sg-btn { height: 30px; padding: 0 14px; border: 1px solid var(--btn-border); border-radius: 4px; background: var(--btn-bg); color: var(--btn-fg); font: inherit; font-size: 12.5px; }
.sg-btn:hover { background: var(--btn-bg-hover); }
.sg-btn-primary { background: #2f80ed; border-color: #2a72d4; color: #fff; }
.sg-btn-primary:hover { background: #2a72d4; }
.sg-summary { display: flex; align-items: baseline; gap: 10px; padding: 10px 14px 6px; }
.sg-summary-title { font-weight: 700; font-size: 14px; }
.sg-summary-sub { font-size: 11.5px; color: #667; }
.sg-content { flex: 1 1 auto; overflow: auto; padding: 0 14px 14px; }
.sg-table { width: 100%; border-collapse: collapse; background: #fff; border: 1px solid #e1e5ea; }
.sg-table th { position: sticky; top: 0; text-align: left; font-size: 11px; color: #667; padding: 7px 8px; background: #eef2f6; border-bottom: 1px solid #e1e5ea; white-space: nowrap; }
.sg-table td { padding: 6px 8px; border-bottom: 1px solid #eef1f4; vertical-align: middle; white-space: nowrap; }
.sg-table td.num, .sg-table th.num { text-align: right; }
.sg-table tr.is-fail td { background: #fff6f5; }
.sg-mono { font-family: Consolas, "Courier New", monospace; font-size: 12px; }
.sg-note { color: #667; font-size: 12px; white-space: normal; }
.sg-dir { display: inline-block; min-width: 22px; text-align: center; padding: 0 6px; border-radius: 3px; font-size: 11.5px; font-weight: 600; }
.sg-dir-in { background: #dcefe3; color: #1e6b3a; }
.sg-dir-out { background: #e8ebf0; color: #445; }
.sg-empty { padding: 30px; text-align: center; color: #889; background: #fff; border: 1px dashed #d5dae2; }
.sg-denied { height: 100%; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 10px; padding: 24px; text-align: center; background: #f5f7fa; color: #1f2328; }
.sg-denied svg { width: 56px; height: 56px; opacity: 0.6; }
.sg-denied-title { font-size: 16px; font-weight: 700; }
.sg-denied-text { font-size: 12.5px; line-height: 1.6; color: #556; }

/* 창이 좁으면 표 칸이 줄바꿈해서 창 안에 들어오게 한다 (긴 주소는 스크롤) */
@container win (max-width: 900px) {
  .sg-side { flex-basis: 150px; }
  .sg-brand-sub, .sg-side-note { display: none; }
  .sg-table td { white-space: normal; padding: 6px; }
  .sg-table th { padding: 7px 6px; }
  .sg-mono { font-size: 11px; }
}
@container win (max-width: 520px) {
  .sg-app { flex-direction: column; }
  .sg-side { flex: 0 0 auto; }
  .sg-tabs { flex-direction: row; overflow-x: auto; scrollbar-width: none; }
  .sg-tab { flex: 0 0 auto; }
  .sg-main { flex: 1 1 0; min-height: 0; }
  .sg-brand { display: none; }
}