/* ============================================================
   DIRECTRIX TENDER — Design Tokens & Base Components
   v1.0 · 2026-07 · 확정 시스템: 8c 잉크 CTA + 상태 전용 컬러
   이 파일을 그대로 로드하고, 아래 변수/클래스 외의 색·그림자를
   임의로 추가하지 마세요. (특히: 블루 없음, 뉴모피즘 없음)
   ============================================================ */

:root {
  /* ---------- Color: 기본 ---------- */
  --ink:        #191914;  /* 텍스트 · 완료 · 주 버튼 · 트랙 라인 */
  --paper:      #F2F1EA;  /* 페이지 배경 (플랫. 그라디언트 금지) */
  --surface:    #FBFAF6;  /* 카드 · 밴드 배경 */
  --line:       #E7E5DA;  /* 카드 보더 · 행 구분선 */
  --line-strong:#D5D3C6;  /* 섹션 구분 · 스파인 */
  --muted:      #55564B;  /* 보조 텍스트 */
  --faint:      #75766A;  /* 레이블 · 메타 */
  --ghost:      #A8A79B;  /* 비활성 텍스트 */

  /* ---------- Color: 상태 (색이 보이면 무조건 상태) ---------- */
  --green:      #57843B;  /* 진행 중 · 긍정 (텍스트용, 4.5:1) */
  --green-bg:   rgba(130,190,75,.16);
  --green-bar:  #82BE4B;  /* 진행 바 fill 전용 */
  --amber:      #A66A2E;  /* 승인 대기 · 위험 · 모의 모드 · ◆ */
  --amber-bg:   rgba(166,106,46,.14);
  --red:        #B0503F;  /* 실패 · 파괴적 행동 전용 */
  --red-bg:     rgba(176,80,63,.12);
  --stone:      #DCDACD;  /* 대기 · 비활성 · 샘플 */

  /* ⛔ 블루는 이 시스템에 존재하지 않습니다. 사용 금지. */

  /* ---------- Type ---------- */
  --font-body: "Pretendard Variable", Pretendard, system-ui, sans-serif;
  --font-mono: "IBM Plex Mono", ui-monospace, monospace; /* 코드·날짜·페이지참조·레이블만 */
  --font-dot:  "Doto", monospace;                        /* 랜딩 브랜드 락업·큰 숫자만. 앱 내부 금지 */

  --text-body: 14.5px;   /* 본문 최소값. line-height 1.7 */
  --text-sm:   13px;
  --text-label:10.5px;   /* mono, letter-spacing 0.14em~0.2em, uppercase */

  /* ---------- Radius / Shadow ---------- */
  --r-card: 16px;
  --r-chip: 99px;
  --r-node: 12px;
  --shadow-card:  0 4px 18px rgba(25,25,20,.05);   /* 카드 기본 */
  --shadow-float: 0 14px 40px rgba(25,25,20,.10);  /* 현재 단계 컨테이너 등 승격 요소만 */
  /* ⛔ inset 그림자, 글로우, 엠보스(뉴모피즘) 금지 */

  /* ---------- Spacing ---------- */
  --sp-1: 4px; --sp-2: 8px; --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-8: 32px; --sp-10: 40px;
}

/* ============ Base ============ */
body {
  margin: 0;
  background: var(--paper);      /* 플랫. radial/linear-gradient 금지 */
  color: var(--ink);
  font-family: var(--font-body);
  font-size: var(--text-body);
  line-height: 1.7;
}
a { color: var(--ink); text-decoration: underline; text-underline-offset: 3px; }
a:hover { color: var(--muted); }

/* ============ Buttons — 3단 위계 (전부 플랫) ============ */
/* 1. 주 행동 (탐색·전진·CTA): 잉크 솔리드 */
.btn-primary {
  display: inline-flex; align-items: center; gap: 8px;
  background: var(--ink); color: var(--surface);
  border: none; border-radius: var(--r-chip);
  padding: 12px 24px; font-size: 13.5px; font-weight: 700;
  cursor: pointer;
  /* ⛔ box-shadow 글로우 금지. hover는 opacity만 */
}
.btn-primary:hover { opacity: .85; }

/* 2. 보조·가역 행동 (재실행·반려·취소): 아웃라인 */
.btn-secondary {
  display: inline-flex; align-items: center; gap: 8px;
  background: transparent; color: #43443A;
  border: 1px solid #C9C7B9; border-radius: var(--r-chip);
  padding: 12px 24px; font-size: 13.5px; font-weight: 600;
  cursor: pointer;
}
.btn-secondary:hover { border-color: var(--ink); color: var(--ink); }

/* 3. 3차·인라인 행동: 텍스트 링크 */
.btn-text {
  background: none; border: none; padding: 0;
  font-size: 13px; font-weight: 700; color: var(--ink);
  text-decoration: underline; text-underline-offset: 3px; cursor: pointer;
}

/* 다크 배경(잉크 카드) 위에서만: 반전 버튼 */
.btn-on-dark-primary { background: var(--surface); color: var(--ink); }
.btn-on-dark-secondary { background: transparent; color: var(--surface); border: 1px solid rgba(251,250,246,.4); }

/* ============ Cards ============ */
.card {
  background: var(--surface);
  border: 1px solid var(--line);
  border-radius: var(--r-card);
  box-shadow: var(--shadow-card);
}
/* 현재 단계 컨테이너(승격): 보더 2px 잉크 + 부유 그림자 */
.card-active {
  border: 2px solid var(--ink);
  box-shadow: var(--shadow-float);
}

/* ============ Status chips ============ */
.chip { display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 10px; border-radius: var(--r-chip);
  font-size: 11.5px; font-weight: 700; }
.chip-approval { color: var(--amber); background: var(--amber-bg); }  /* ◆N 승인 대기 */
.chip-progress { color: var(--green); background: var(--green-bg); }  /* 진행 중 */
.chip-fail     { color: var(--red);   background: var(--red-bg); }    /* 실패 */
.chip-idle     { color: var(--muted); background: var(--stone); }     /* 대기·샘플 */
.chip-risk     { color: var(--amber); background: var(--amber-bg); }  /* 위험도 상 · 독소 N */

/* ============ 공정 세그먼트 바 (도트 아님) ============ */
.seg { display: flex; align-items: center; gap: 3px; }
.seg > i { flex: 1; height: 6px; border-radius: 3px; display: block; }
.seg .done    { background: var(--ink); }
.seg .running { background: var(--green-bar); }
.seg .idle    { background: var(--stone); }
.seg .gate    { flex: none; color: var(--amber); font-style: normal;
                font-size: 12px; line-height: 1; }  /* 내용: ◆ */

/* ============ 전역 배너 (모의 모드 등 — 페이지당 1회) ============ */
.banner-mock {
  display: flex; align-items: center; gap: 12px;
  background: var(--amber-bg);
  border-bottom: 1px solid rgba(166,106,46,.25);
  padding: 8px 40px; font-size: 12.5px; color: var(--amber);
}

/* ============ 지금 할 일 (승격 카드 — 잉크 솔리드) ============ */
.now-card {
  background: var(--ink); color: var(--surface);
  border-radius: 18px; padding: 24px 28px;
  display: flex; align-items: center; gap: 24px;
}
.now-card .desc { color: #B0B1A3; font-size: 13.5px; line-height: 1.6; }

/* ============ 라벨 (mono) ============ */
.label {
  font-family: var(--font-mono);
  font-size: var(--text-label); font-weight: 600;
  letter-spacing: .16em; color: var(--faint);
  text-transform: uppercase;
}

/* ============ 파일 드롭존 (브라우저 기본 인풋 노출 금지) ============ */
.dropzone {
  border: 2px dashed #C9C7B9; border-radius: 14px;
  background: #F7F6F0; padding: 34px 20px; text-align: center;
}

/* ============ 테이블 ============ */
.table-head {
  font-family: var(--font-mono); font-size: var(--text-label);
  letter-spacing: .14em; color: var(--faint);
  border-bottom: 2px solid var(--ink);   /* 헤더 아래 잉크 2px */
}
.table-row { border-bottom: 1px solid var(--line); }
.table-row.action-needed { background: rgba(166,106,46,.05); } /* 행동 필요 행 틴트 */
.table-row.sample { background: #F0EFE8; opacity: .85; }        /* 샘플 분리 */
.num { font-family: var(--font-mono); text-align: right; }      /* 숫자·날짜 우측 정렬 */

/* ============ Focus (글로우 아님 — 2px 잉크 아웃라인) ============ */
:focus-visible { outline: 2px solid var(--ink); outline-offset: 2px; box-shadow: none; }

/* ============ 인용 블록 (근거 원문) ============ */
.quote {
  border-left: 3px solid var(--ink);
  background: var(--paper);
  border-radius: 0 10px 10px 0;
  padding: 14px 18px;
}
.quote .ref { font-family: var(--font-mono); font-size: 11px; color: var(--faint); }