/* =========================================================================
   page-trust-wire.css — Trust Center 전용 컴포넌트 (2026-09-01)
   레이아웃 시스템(pfw-*)은 page-proof-wire.css 공유, 카드(pf3-*)는 page-proof.css.
   여기는 Trust에만 있는 것: 컴플라이언스 매트릭스 · 감사 카드 · 콘솔 목업 · 문서 카드.
   토큰은 .pfw(--pfw-*)를 그대로 사용한다.
   ========================================================================= */

/* ── 히어로 하단 여백 복원 ─────────────────────────────────────────────
   공유 pfw-hero는 Proof의 로고 마퀴 붙임용으로 padding-bottom:0.
   Trust는 마퀴가 없으므로 상단과 대칭(clamp 64~104)으로 복원. */
.tw .pfw-hero { padding-bottom: clamp(64px, 7vw, 104px); }
@media (max-width: 768px) { .tw .pfw-hero { padding-bottom: 56px; } }

/* ── 컴플라이언스 매트릭스 ────────────────────────────────────────────
   데스크톱: 기능(고정) + 4 프레임워크 컬럼의 행 카드 리스트.
   모바일: 기능 헤더 아래 프레임워크 셀이 세로 스택(셀 안 라벨 표시). */
.tw-matrix {
  background: #fff; border: 1px solid var(--pfw-rule); border-radius: 14px; overflow: hidden;
}
.tw-mhead {
  display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 16px;
  padding: 14px 24px; background: var(--pfw-soft, #F7F8FB);
  border-bottom: 1px solid var(--pfw-rule);
}
.tw-mhead span {
  font-family: var(--pfw-mono); font-size: 11px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pfw-muted);
}
html[lang^="ko"] .tw-mhead span:first-child { font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: .02em; }
.tw-mrow {
  display: grid; grid-template-columns: 1.35fr repeat(4, 1fr); gap: 16px;
  padding: 20px 24px; align-items: start;
}
.tw-mrow + .tw-mrow { border-top: 1px solid var(--pfw-rule); }
.tw-mrow:hover { background: color-mix(in srgb, var(--pfw-blue) 3%, #fff); }
.tw-mcap { font-size: 14.5px; font-weight: 700; letter-spacing: -.01em; color: var(--pfw-ink); line-height: 1.45; padding-right: 8px; }
.tw-mcell { display: flex; flex-direction: column; gap: 4px; min-width: 0; }
.tw-mfw { display: none; } /* 데스크톱은 헤더행이 프레임워크를 말해줌 */
.tw-mref { font-family: var(--pfw-mono); font-size: 11px; font-weight: 600; color: var(--pfw-blue-d); line-height: 1.5; }
.tw-mdesc { font-size: 12.5px; line-height: 1.55; color: var(--pfw-muted); }
.tw-disclaimer {
  font-size: 12.5px; line-height: 1.65; color: var(--pfw-muted);
  margin: 14px auto 0; max-width: 88ch; text-align: center;
}

/* ── 감사 로그 5카드 — 벤토(위 3 + 아래 넓은 2, stat 강조) + 아이콘 ── */
.tw-audit { display: grid; grid-template-columns: repeat(6, minmax(0, 1fr)); gap: 12px; }
.tw-acard {
  grid-column: span 2;
  background: #fff; border: 1px solid var(--pfw-rule); border-radius: 14px;
  padding: 24px 26px; transition: border-color .15s ease;
}
.tw-acard:nth-child(4), .tw-acard:nth-child(5) { grid-column: span 3; }
.tw-acard:hover { border-color: var(--color-primary-soft, #9CC1FF); }
.tw-acard-hd { display: flex; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.tw-aicon {
  display: inline-flex; align-items: center; justify-content: center;
  width: 38px; height: 38px; border-radius: 10px; flex: none;
  background: var(--color-accent-green-tint, #E0EEFF); color: var(--pfw-blue-d);
}
.tw-acard-t { font-size: 15.5px; font-weight: 700; letter-spacing: -.01em; color: var(--pfw-ink); }
.tw-acard-b { font-size: 13.5px; line-height: 1.65; color: var(--color-text, #3a3d5e); margin: 8px 0 0; }
/* 수치 카드 — 좌 게이지 링(94% 채움) + 우 텍스트 2컬럼 */
.tw-acard--stat {
  background: var(--color-accent-green-tint, #E0EEFF); border-color: var(--color-primary-soft, #9CC1FF);
  display: grid; grid-template-columns: auto minmax(0, 1fr); gap: 22px; align-items: center;
}
.tw-aring { position: relative; width: 96px; height: 96px; flex: none; }
.tw-aring-track { stroke: rgba(26, 111, 255, .16); }
.tw-aring-val { stroke: var(--pfw-blue); }
.tw-aring-n {
  position: absolute; inset: 0; display: flex; align-items: center; justify-content: center;
  font-family: var(--pfw-mono); font-size: 21px; font-weight: 700; letter-spacing: -.02em;
  color: var(--pfw-blue-d); font-variant-numeric: tabular-nums;
}
.tw-astat-main { min-width: 0; }
.tw-astat-kicker {
  display: block; font-family: var(--pfw-mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pfw-blue-d); margin-bottom: 6px;
}
html[lang^="ko"] .tw-astat-kicker { font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: .02em; }
/* 링 채움 애니메이션 — 로드 시 한 번, reduced-motion 존중 */
@media (prefers-reduced-motion: no-preference) {
  .tw-aring-val { animation: twRingFill 1.1s cubic-bezier(.33, 1, .68, 1) both; }
  @keyframes twRingFill { from { stroke-dasharray: 0 263.9; } }
}

/* ── 관리자 콘솔 목업 ── */
.tw-console {
  max-width: 860px; margin: 0 auto;
  background: #fff; border: 1px solid var(--pfw-rule); border-radius: 14px; overflow: hidden;
  box-shadow: 0 18px 44px -28px rgba(15, 17, 48, .25);
}
.tw-cbar {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 18px; background: var(--color-bg-dark, #0F1130);
}
.tw-cdots { display: inline-flex; gap: 6px; }
.tw-cdots i { width: 9px; height: 9px; border-radius: 50%; background: rgba(255, 255, 255, .22); }
.tw-ctitle { font-family: var(--pfw-mono); font-size: 12px; color: rgba(255, 255, 255, .85); }
.tw-cstatus {
  margin-left: auto; display: inline-flex; align-items: center; gap: 7px;
  font-family: var(--pfw-mono); font-size: 11px; font-weight: 600; color: #7FE0C3;
}
.tw-cpulse { width: 7px; height: 7px; border-radius: 50%; background: #2BC194; }
@media (prefers-reduced-motion: no-preference) {
  .tw-cpulse { animation: twPulse 2s ease-in-out infinite; }
  @keyframes twPulse { 0%, 100% { opacity: 1; } 50% { opacity: .35; } }
}
.tw-ctabs { display: flex; gap: 4px; padding: 10px 14px 0; border-bottom: 1px solid var(--pfw-rule); overflow-x: auto; scrollbar-width: none; }
.tw-ctabs::-webkit-scrollbar { display: none; }
.tw-ctab {
  font-size: 12.5px; font-weight: 600; color: var(--pfw-muted); white-space: nowrap;
  padding: 8px 13px 10px; border-bottom: 2px solid transparent;
}
.tw-ctab.is-active { color: var(--pfw-blue-d); border-bottom-color: var(--pfw-blue); }
.tw-ctable { padding: 6px 18px 4px; }
.tw-crow {
  display: grid; grid-template-columns: 92px minmax(0, 1fr) 96px; gap: 14px;
  padding: 11px 4px; border-bottom: 1px solid var(--pfw-soft, #F0F2F7);
  align-items: center;
}
.tw-crow--head { border-bottom: 1px solid var(--pfw-rule); }
.tw-crow--head span {
  font-family: var(--pfw-mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .06em; color: var(--pfw-muted);
}
html[lang^="ko"] .tw-crow--head span { font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: .02em; }
.tw-ctime { font-family: var(--pfw-mono); font-size: 12px; color: var(--pfw-muted); font-variant-numeric: tabular-nums; }
.tw-cevent { font-family: var(--pfw-mono); font-size: 12.5px; color: var(--pfw-ink); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.tw-cstate {
  justify-self: start; font-size: 11px; font-weight: 700;
  padding: 3px 10px; border-radius: 999px;
}
.tw-cstate--success { background: #D6EDE3; color: #0C6152; }
.tw-cstate--warning { background: #F5E9D2; color: #8A5E0E; }
.tw-cstate--error   { background: #F8E2DC; color: #A8442F; }
.tw-cfoot {
  padding: 12px 18px; border-top: 1px solid var(--pfw-rule);
  font-family: var(--pfw-mono); font-size: 11.5px; color: var(--pfw-muted);
  background: var(--pfw-soft, #F7F8FB);
}

/* ── 문서 요청 2카드 ── */
.tw-docs { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 12px; max-width: 1040px; margin: 0 auto; }
.tw-doc {
  background: #fff; border: 1px solid var(--pfw-rule); border-radius: 14px;
  padding: 26px 28px; display: flex; flex-direction: column; align-items: flex-start;
  transition: border-color .15s ease;
}
.tw-doc:hover { border-color: var(--color-primary-soft, #9CC1FF); }
.tw-doc-tag {
  font-family: var(--pfw-mono); font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .05em; color: var(--pfw-blue-d);
  background: var(--color-accent-green-tint, #E0EEFF); padding: 4px 11px; border-radius: 999px;
}
html[lang^="ko"] .tw-doc-tag { font-family: var(--font-sans, 'Manrope', sans-serif); letter-spacing: .02em; }
.tw-doc-t { font-size: 17px; font-weight: 700; letter-spacing: -.01em; color: var(--pfw-ink); margin-top: 14px; }
.tw-doc-b { font-size: 14px; line-height: 1.65; color: var(--color-text, #3a3d5e); margin: 10px 0 0; }
.pfw .tw-doc-btn { margin-top: 22px; }

/* ── 반응형 ── */
@media (max-width: 1024px) {
  .tw-audit { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .tw-acard, .tw-acard:nth-child(4), .tw-acard:nth-child(5) { grid-column: span 1; }
  .tw-acard:nth-child(5) { grid-column: span 2; }
}
@media (max-width: 900px) {
  /* 매트릭스: 기능 헤더 + 셀 세로 스택(프레임워크 라벨 노출) */
  .tw-mhead { display: none; }
  .tw-mrow { grid-template-columns: 1fr; gap: 12px; padding: 18px; }
  .tw-mcap { padding: 0 0 4px; border-bottom: 1px dashed var(--pfw-rule); }
  .tw-mfw {
    display: block; font-family: var(--pfw-mono); font-size: 10px; font-weight: 700;
    text-transform: uppercase; letter-spacing: .08em; color: var(--pfw-muted);
  }
}
@media (max-width: 768px) {
  .tw-audit { grid-template-columns: 1fr; }
  .tw-acard, .tw-acard:nth-child(4), .tw-acard:nth-child(5) { grid-column: span 1; }
  .tw-acard--stat { grid-template-columns: 1fr; justify-items: start; gap: 16px; }
  .tw-docs { grid-template-columns: 1fr; }
  .tw-crow { grid-template-columns: 74px minmax(0, 1fr) auto; gap: 10px; }
  .tw-ctime { font-size: 11px; }
  .tw-cevent { font-size: 11.5px; }
}