/* ───────────────────────────────────────────────────────────── DIRECTRIX Tender — Layered Blueprint 파운데이션 (핸드오프 v1, 260715) 정체성: Cobalt × Layered Blueprint × STANDARD 상태: 미점등(unlit). 기본은 무채색, 공개(점등) 시 한 줄로 Cobalt 활성. 원칙: 이 파일은 재질·상태·토큰만 정의한다. 라이브 표면(app.css)은 표면 이행 시 개별 적용. ───────────────────────────────────────────────────────────── */ :root { /* 예약 아이덴티티 — 값 보관용(직접 참조 금지, --td-accent 경유) */ --td-deep: #12172E; /* 블루프린트 나이트 */ --td-cobalt: #606FEE; /* Cobalt — 점등 후에만 노출 */ --td-wash: #E9EBF8; --td-luma: #C4CAF2; /* 크롬 뉴트럴 (핸드오프 §2) */ --td-ink: #26272B; --td-silver-1: #E9EAEC; /* ── UNLIT(기본): 아이덴티티 슬롯을 무채색으로 렌더 ── */ --td-accent: #6B6E78; /* Cobalt 자리의 무채색 대역 */ --td-accent-wash: #EDEEF1; --td-accent-ink: #3A3C44; --td-accent-dark: #B8BAC2; /* 다크 표면 위 포인트 (미점등 밝은 무채색) */ --td-underglow: rgba(120, 124, 140, .10); /* 적층 하단 언더글로우 — 미점등 무채색 */ --td-glow: rgba(120, 124, 140, .28); /* ── 시맨틱 상태 (공통 — 미점등이어도 사용 가능) ── */ --st-ok: #34C77B; --st-info: #5AA0FF; --st-warn: #FF9E42; --st-err: #F0543C; --st-pend: #9DA0A8; } /* ── LIT: 공개 확정 시 하나로 코발트 점등 ── */ :root[data-lit="on"] { --td-accent: var(--td-cobalt); --td-accent-wash: var(--td-wash); --td-accent-ink: var(--td-deep); --td-accent-dark: var(--td-luma); --td-underglow: rgba(96, 111, 238, .10); --td-glow: rgba(96, 111, 238, .55); } /* ── 재질: Layered Blueprint 유리 (핸드오프 §4) ── */ .td-glass { backdrop-filter: blur(18px) saturate(130%); -webkit-backdrop-filter: blur(18px) saturate(130%); background: linear-gradient(160deg, rgba(252, 252, 255, .5), rgba(240, 242, 250, .24)); border: 1px solid rgba(255, 255, 255, .75); border-radius: 16px; box-shadow: 0 16px 36px rgba(35, 40, 80, .16), inset 0 1px 0 rgba(255, 255, 255, .9), inset 0 -20px 44px var(--td-underglow); /* 언더글로우: 점등 전 무채색 → 점등 시 Cobalt */ } /* ── 적층: 시트가 층으로 쌓이는 = 분석 은유(원문→역산→검증) ── */ .td-stack { display: flex; align-items: flex-start; } .td-sheet { position: relative; } .td-sheet + .td-sheet { margin-left: 14px; } .td-sheet:nth-child(3) { margin-left: 28px; } /* ── 상태 레이어 ── */ .td-flag { display: inline-flex; align-items: center; gap: 6px; font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 11px; padding: 3px 10px; border-radius: 99px; } .td-flag.ok { color: var(--st-ok); background: color-mix(in srgb, var(--st-ok) 12%, transparent); } .td-flag.info { color: var(--st-info); background: color-mix(in srgb, var(--st-info) 12%, transparent); } .td-flag.warn { color: var(--st-warn); background: color-mix(in srgb, var(--st-warn) 14%, transparent); } .td-flag.err { color: var(--st-err); background: color-mix(in srgb, var(--st-err) 14%, transparent); } .td-flag.pend { color: var(--st-pend); background: color-mix(in srgb, var(--st-pend) 16%, transparent); } /* ── 프라이머리 CTA: 미점등=무채색 다크 필 / 점등=Cobalt ── */ .td-cta { display: inline-flex; align-items: center; gap: 8px; padding: 11px 22px; border-radius: 99px; border: 0; cursor: pointer; font-weight: 700; font-size: 14px; text-decoration: none; color: #fff; background: var(--td-ink); box-shadow: 0 6px 18px var(--td-glow); transition: background .18s, box-shadow .18s; } :root[data-lit="on"] .td-cta { background: linear-gradient(135deg, var(--td-cobalt), color-mix(in srgb, var(--td-cobalt) 78%, var(--td-deep))); } /* ── 근거 링크: "모든 판단에 원문 근거" 원칙 UI ── */ .td-evidence { display: inline-flex; align-items: center; gap: 5px; font-family: var(--font-mono, "IBM Plex Mono", monospace); font-size: 11.5px; color: var(--td-accent-ink); text-decoration: none; border-bottom: 1px dashed var(--td-accent); padding-bottom: 1px; } .td-evidence::before { content: "§"; opacity: .7; } /* ───────────────────────────────────────────────────────────── Blueprint 크롬 이행 — 무채색(미점등). warm-paper v1.0 토큰을 cool 무채색으로 리맵 + 상태색 → 시맨틱(--st-*). 점등 시 accent 계열만 Cobalt로(별도), 이 리맵은 무채색 유지. ───────────────────────────────────────────────────────────── */ body.blueprint { /* 크롬 뉴트럴 (warm → cool) */ --paper: #EBECEF; --surface: #FAFBFD; --line: #E1E3E8; --line-strong: #CDD0D7; --muted: #565962; --ghost: #A6A9B2; --ink: #26272B; /* 상태 = 시맨틱 (텍스트는 대비 확보용 진한 대역, fill/bg는 핸드오프 휴) */ --green: #1F9A5E; --green-bg: rgba(52,199,123,.15); --green-bar: #34C77B; --amber: #C0741C; --amber-bg: rgba(255,158,66,.16); --red: #CC3D26; --red-bg: rgba(240,84,60,.12); --stone: #DEE0E5; } body.blueprint { background: var(--paper); } /* 페이지 배경에 옅은 블루프린트 그리드(무채색) — 적층 재질의 바탕 */ body.blueprint main { background-image: linear-gradient(rgba(120,124,140,.045) 1px, transparent 1px), linear-gradient(90deg, rgba(120,124,140,.045) 1px, transparent 1px); background-size: 28px 28px; } /* 카드/밴드 표면을 유리 재질로 — 기존 .card·.md·.now-card 위에 살짝 */ body.blueprint .md, body.blueprint .snode details.past .past-body { background: linear-gradient(160deg, rgba(252,252,255,.6), rgba(240,242,250,.30)); border-color: rgba(255,255,255,.7); box-shadow: 0 10px 26px rgba(35,40,80,.10), inset 0 1px 0 rgba(255,255,255,.85), inset 0 -16px 36px var(--td-underglow); backdrop-filter: blur(14px) saturate(125%); -webkit-backdrop-filter: blur(14px) saturate(125%); } /* warm 하드코딩 컴포넌트 보정 (tokens.css/app.css는 불가침 → 여기서 override) */ body.blueprint .dropzone { background: #F1F3F6; border-color: #CDD0D7; } body.blueprint .banner-mock { border-bottom-color: rgba(192,116,28,.28); } body.blueprint .btn.secondary { color: #3A3C44; border-color: #CDD0D7; } body.blueprint .chip, body.blueprint .card { border-color: #D8DBE1; } /* ── 점등 시 프라이머리 CTA = Cobalt (핸드오프 §5) ── 보조(.secondary/.ghost)·파괴(.danger)·다크 표면(.on-dark*)·복구(recover)는 제외 */ :root[data-lit="on"] .btn:not(.secondary):not(.ghost):not(.danger):not(.on-dark):not(.on-dark-secondary) { background: linear-gradient(135deg, var(--td-cobalt), color-mix(in srgb, var(--td-cobalt) 78%, var(--td-deep))); box-shadow: 0 6px 18px var(--td-glow); } :root[data-lit="on"] .next-btn:not(.recover):not(.soft) { background: linear-gradient(135deg, var(--td-cobalt), color-mix(in srgb, var(--td-cobalt) 78%, var(--td-deep))); } :root[data-lit="on"] .now-card { box-shadow: 0 10px 28px var(--td-glow); }