/* Path: T2Editor/css/t2-foundation.css */ /* ═══════════════════════════════════════════════════════════════════════════ * T2Editor Foundation — Precision Rail (horizontal only) * /law 704 §1-22 · 705 §1-13 · 706 · 707 A-K * * 레이어 1/3. 토큰 · 리듬 · signature 원형만 정의한다. * 컴포넌트 외형은 t2-visual-system.css(레이어 3)가 담당한다. * * ── SIGNATURE 결정 ──────────────────────────────────────────────────────── * 상태의 주 단서는 "하단 rail" 하나다. 2px, 양끝에서 7px 물러나 경계에 닿지 * 않는다. 세로 rail은 사용하지 않는다 — 요소 좌우에 컬러 띠를 두면 라벨이 * 밀리거나 컬러 패딩처럼 읽힌다. * 보조 단서는 ink 승격 + weight 하나까지. (law 707 D) * * ── 상태 문법표 ────────────────────────────────────────────────────────── * 툴바 도구 active 하단 rail + ink·weight * 탭 / 세그먼트 active 하단 rail + ink·weight * 서브툴바 chip active 하단 rail + ink * 관리자 내비 현재위치 행 tone + ink·weight, 아이콘 solid * 주요 실행 버튼 라벨 밑 하단 rail + ink·weight * 파괴적 실행 버튼 의미색 하단 rail + 의미색 ink·weight * 선택된 콘텐츠 블록 1px 제품색 hairline + 코너 tick * 포커스 1px outline @2px (레이아웃 이동 0) * 의미 메시지 상단 rail(의미색) + 아이콘 * ═══════════════════════════════════════════════════════════════════════════ */ /* 레이어 순서 선언. 선언되지 않은 레이어는 이 목록 "뒤"에 붙으므로 여기에 빠진 이름이 있으면 그 파일이 제품 크롬을 이겨 버린다. t2.module 을 반드시 포함해야 한다 (js/utils/*.css, js/engine/nsfw-ui.css). */ @layer t2.token, t2.legacy, t2.module, t2.plugin, t2.product; @layer t2.token { /* ── 1. Canonical — law 705. 변경 불가 ──────────────────────────────────── */ :root { --t2-product: #356FC0; --t2-dsc: #FF6600; } html[data-t2editor-theme="dark"], html[data-theme="dark"] { --t2-product: #7FA8FF; } /* ── 2. Derived — 디자인 시스템 위임 범위 ───────────────────────────────── */ :root { color-scheme: light; --t2-product-ink: #2A5A9E; --t2-product-wash: rgba(53,111,192,.07); --t2-product-tone: rgba(53,111,192,.10); --t2-product-select: rgba(53,111,192,.16); --t2-product-rgb: 53,111,192; /* 재료. 단계 명도차를 넓혀 경계선 보상을 불필요하게 만든다. */ --t2-base: #E8EAEF; --t2-workspace: #F3F4F7; --t2-surface: #FFFFFF; --t2-inset: #EDEFF3; --t2-floating: #FFFFFF; --t2-line: #DCDFE6; --t2-line-strong: #BFC5CF; /* 도구 타일 — 툴바 아이콘 버튼의 중성 그레이 휴식 면. 상태의 주 단서는 여전히 하단 rail 이 소유한다(707 D). 타일은 도구를 "만질 수 있는 면"으로 보이게 하는 재료일 뿐, 활성 여부를 명도로 대신 알리지 않는다. workspace(툴바 바탕)보다 한 단계 또렷하게 물러난 값이라 타일 하나하나가 바탕에서 떠오른다. */ --t2-tool-tile: #E7E9EE; --t2-tool-tile-hover: #DBDEE5; --t2-tool-tile-active: #CCD1DA; --t2-ink: #14171B; --t2-ink-muted: #5B616A; --t2-ink-faint: #8B9199; --t2-danger: #B4232D; --t2-danger-soft: rgba(180,35,45,.07); --t2-success: #1D7346; --t2-success-soft: rgba(29,115,70,.07); --t2-warning: #8F5300; --t2-warning-soft: rgba(143,83,0,.08); --t2-info: var(--t2-product); --t2-info-soft: var(--t2-product-wash); /* ── 형상 — law 704 §3·§7·§8·§12 ──────────────────────────────────── §7: "표면의 차이는 하나의 전역 radius 로 통일하지 않는다" §8: "서로 다른 기능이 같은 radius 를 가져야 한다는 뜻으로 해석하지 않는다" §12: radius 는 "필요한 꼭짓점의 날카로움을 완화하거나 상호작용 경계를 설명하기 위한 제한적 수단" 이 개정의 초안은 5단계 중 4단계를 0~2px 로 두어 사실상 전역 near-zero radius 가 되었고 §7 을 위반했다. 관성적으로 둥글게 만드는 것과 전역 단일 radius 는 둘 다 금지 대상이며, "전부 날카롭게" 는 방향만 반대인 같은 위반이다. 날카로움은 그것이 의미를 가질 때만 쓴다: 셸 경계·툴바·표 정렬이 기능이므로 0. 인접 요소와 변이 맞아야 한다. critical surface 위험을 형상으로 알린다. 절삭 모서리. 그 외에는 상호작용 경계를 부드럽게 설명한다. 8/12/16px 을 피한 것은 디자인 시스템의 관성 radius 금지 목록 때문이다. */ --t2-radius-structural: 0px; /* 셸·툴바·표·행 구분 — 정렬이 기능 */ --t2-radius-edge: 2px; /* 예각만 완화 (tick·divider·미세 요소) */ --t2-radius-field: 4px; /* 입력 — hairline 기반이라 약하게 */ --t2-radius-control: 6px; /* 버튼·chip·아이콘 버튼 — 상호작용 경계 */ --t2-radius-tile: 10px; /* 툴바 도구 타일 — 44px 정사각 면의 모서리 완화 */ --t2-radius-brand: 6px; /* 로고 lockup — 고정 자산. 정규화 금지. */ --t2-radius-island: 10px; /* 독립 객체 카드 */ --t2-radius-overlay: 14px; /* 드롭다운·팝오버·토스트 */ --t2-radius-modal: 18px; /* 작업 레이어 */ --t2-radius-pill: 999px; /* 진짜 원형 컨트롤 */ /* 리듬 — 4px 기준 사다리. 이것이 유일한 간격 사다리다 (해설 708 A). 기하 수치(--t2-hit/--t2-face/--t2-orb)는 이 사다리와 별개다. */ --t2-s1:4px; --t2-s2:8px; --t2-s3:12px; --t2-s4:16px; --t2-s5:20px; --t2-s6:24px; --t2-s8:32px; --t2-s10:40px; /* ── 관계 이름 — 해설 708 B·D·E ──────────────────────────────────── 아래는 새 값이 아니라 위 사다리에서 고른 "무엇에 쓰는가" 의 이름이다. 화면마다 값을 다시 고르지 않게 하는 것이 목적이므로, 여기 없는 관계가 필요하면 이름을 늘리기 전에 기존 이름으로 설명되는지 먼저 본다. 인셋 (708 B — 한 단계 안으로 들어가면 정확히 한 단계 줄인다) */ --t2-inset-shell: var(--t2-s5); /* 스크롤 캔버스 · 페이지 여백 */ --t2-inset-section: var(--t2-s4); /* section 표면 */ --t2-inset-island: var(--t2-s3); /* 독립 객체 카드 */ --t2-inset-control: var(--t2-s2); /* 조작부 */ --t2-inset-chip: var(--t2-s1); /* chip · badge */ /* 형제 간격 (708 D — 관계의 거리. 같은 관계에 두 값을 쓰지 않는다) */ --t2-gap-tight: var(--t2-s1); /* 한 컨트롤 안의 조각 (아이콘+라벨) */ --t2-gap-related: var(--t2-s2); /* 같은 그룹의 형제 */ --t2-gap-group: var(--t2-s4); /* 서로 다른 그룹 */ --t2-gap-section: var(--t2-s6); /* 서로 다른 section */ /* 제목의 소속 (708 C-3 — 제목은 아래 내용에 속하므로 lead > trail) */ --t2-lead-title: var(--t2-s6); --t2-trail-title: var(--t2-s3); --t2-lead-subtitle: var(--t2-s5); --t2-trail-subtitle: var(--t2-s2); --t2-trail-locator: var(--t2-s1); /* 위치 표시 → 제목 (708 E-1) */ /* sticky 스택 (708 G) — 오프셋의 소유자는 높이를 정하는 쪽이다. 스크롤 소유자가 이 값을 자기 안쪽 기준으로 다시 선언하고, sticky 표면은 선언된 값만 읽는다. 고정 수치를 표면 쪽에 복제하지 않는다. */ --t2-sticky-top: 0px; /* signature */ --t2-rail-w: 2px; --t2-rail-inset: 7px; --t2-chamfer: 9px; --t2-tick: 6px; --t2-hit: 44px; /* 접근성 타깃 */ --t2-face: 30px; /* 시각면 */ --t2-orb: 28px; /* 하단 바 원형 유틸리티. 문서 도구가 아니라 환경 스위치라 형상으로 구분한다 — 원형은 이 용도에만 허용한다. */ --t2-motion-fast: 110ms cubic-bezier(.2,.75,.2,1); --t2-motion: 130ms cubic-bezier(.2,.75,.2,1); /* 살짝 넘어갔다 돌아오는 거동. 형상을 둥글게 만들지 않고 성격만 부여한다. rail 등장, 토글 썸, 하단 바 원형 버튼, chevron 회전에만 쓴다. */ --t2-motion-spring: 240ms cubic-bezier(.34,1.42,.64,1); --t2-shadow-overlay: 0 1px 2px rgba(16,20,26,.06), 0 10px 28px -6px rgba(16,20,26,.14); --t2-shadow-modal: 0 1px 2px rgba(16,20,26,.08), 0 20px 50px -10px rgba(16,20,26,.20); /* 타이포그래피 — law 704 §14 를 실제 값으로 확정. IBM Plex: 도구 서체 + 진짜 한글 컷(Plex Sans KR) + mono 동반. */ --t2-font-ui: "IBM Plex Sans", "IBM Plex Sans KR", -apple-system, BlinkMacSystemFont, "Segoe UI", "Noto Sans KR", sans-serif; --t2-font-mono: "IBM Plex Mono", ui-monospace, SFMono-Regular, Menlo, monospace; --t2-track-body: -.011em; --t2-track-title: -.025em; --t2-track-label: .13em; } html[data-t2editor-theme="dark"], html[data-theme="dark"] { color-scheme: dark; --t2-product-ink: #A9C4FF; --t2-product-wash: rgba(127,168,255,.11); --t2-product-tone: rgba(127,168,255,.15); --t2-product-select: rgba(127,168,255,.22); --t2-product-rgb: 127,168,255; /* law 705 §4 — 단순 반전이 아닌 별도 매핑 */ --t2-base: #131519; --t2-workspace: #1A1D22; --t2-surface: #21252A; --t2-inset: #191C21; --t2-floating: #282D33; --t2-line: #32373E; --t2-line-strong: #4B535D; /* 도구 타일 — 다크에서는 workspace(#1A1D22)보다 한 단계 밝은 면으로 떠오른다. 단순 반전이 아니라 별도 매핑이다(705 §4). */ --t2-tool-tile: #2A2F37; --t2-tool-tile-hover: #333A43; --t2-tool-tile-active: #3E4650; --t2-ink: #F1F3F6; --t2-ink-muted: #A3AAB4; --t2-ink-faint: #767D87; --t2-danger: #FF8E98; --t2-danger-soft: rgba(255,142,152,.11); --t2-success: #68D096; --t2-success-soft: rgba(104,208,150,.11); --t2-warning: #F0B45E; --t2-warning-soft: rgba(240,180,94,.12); --t2-shadow-overlay: 0 1px 2px rgba(0,0,0,.40), 0 14px 34px -8px rgba(0,0,0,.55); --t2-shadow-modal: 0 1px 2px rgba(0,0,0,.50), 0 26px 60px -12px rgba(0,0,0,.66); } /* ── 3. 하위 호환 별칭 ─────────────────────────────────────────────────── ⚠ --t2-control 은 정의하지 않는다. core.css 가 길이(44px)로, 구 t2-visual-system 이 색(#ECEEF1)으로 써서 어느 쪽을 택해도 한쪽이 invalid at computed-value time 으로 무효화된다. core.css 를 --t2-hit 으로 개명하는 것이 유일한 해법이고 적용했다. */ :root { --t2-editor: var(--t2-product); --t2-editor-strong: var(--t2-product-ink); --t2-editor-soft: var(--t2-product-wash); --t2-editor-rgb: var(--t2-product-rgb); --t2-signature: var(--t2-dsc); --t2-paper: var(--t2-surface); --t2-paper-soft: var(--t2-workspace); --t2-ground: var(--t2-base); --t2-border: var(--t2-line); --t2-ink-soft: var(--t2-ink-muted); --t2-bg-primary: var(--t2-surface); --t2-bg-secondary: var(--t2-workspace); --t2-text-primary: var(--t2-ink); --t2-text-secondary: var(--t2-ink-muted); --t2-radius-s: var(--t2-radius-control); --t2-radius-m: var(--t2-radius-island); --t2-radius-l: var(--t2-radius-modal); --t2-focus: var(--t2-product); --t2-focus-outline: var(--t2-product); --t2-focus-halo: transparent; /* law 707 H — glow 는 기본 문법이 아니다 */ --t2-shadow-float: var(--t2-shadow-overlay); --t2-block-focus: var(--t2-product); --t2-plugin-product: var(--t2-product); --t2-plugin-product-strong: var(--t2-product-ink); --t2-plugin-product-soft: var(--t2-product-wash); --t2-plugin-product-ring: transparent; --t2-plugin-action: var(--t2-product); --t2-plugin-action-hover: var(--t2-product-ink); --t2-plugin-on-action: #FFFFFF; --t2-plugin-dsc: var(--t2-dsc); --t2-plugin-surface: var(--t2-surface); --t2-plugin-surface-muted: var(--t2-workspace); --t2-plugin-surface-raised: var(--t2-floating); --t2-plugin-surface-inset: var(--t2-inset); --t2-plugin-text: var(--t2-ink); --t2-plugin-text-muted: var(--t2-ink-muted); --t2-plugin-text-soft: var(--t2-ink-faint); --t2-plugin-border: var(--t2-line); --t2-plugin-border-strong: var(--t2-line-strong); --t2-plugin-danger: var(--t2-danger); --t2-plugin-success: var(--t2-success); --t2-plugin-warning: var(--t2-warning); --t2-plugin-radius-surface: var(--t2-radius-structural); --t2-plugin-radius-island: var(--t2-radius-island); --t2-plugin-radius-control: var(--t2-radius-control); --t2-plugin-shadow: var(--t2-shadow-modal); --t2-plugin-shadow-soft: var(--t2-shadow-overlay); --md-primary: var(--t2-product); --md-primary-l: var(--t2-product); --md-primary-d: var(--t2-product-ink); --md-primary-rgb: var(--t2-product-rgb); --md-surface: var(--t2-surface); --md-surface-2: var(--t2-workspace); --md-surface-3: var(--t2-inset); --md-bg: var(--t2-base); --md-on-primary: #FFFFFF; --md-on-surface: var(--t2-ink); --md-on-muted: var(--t2-ink-muted); --md-on-faint: var(--t2-ink-faint); --md-border: var(--t2-line); --md-border-l: var(--t2-line); --md-border-s: var(--t2-line-strong); --md-error: var(--t2-danger); --md-error-bg: var(--t2-danger-soft); --md-success: var(--t2-success); --md-success-bg: var(--t2-success-soft); --md-warn: var(--t2-warning); --md-warn-bg: var(--t2-warning-soft); --md-info: var(--t2-info); --md-info-bg: var(--t2-info-soft); --md-danger: var(--t2-danger); --md-danger-bg: var(--t2-danger-soft); --md-overlay: rgba(14,17,21,.56); --md-el1: none; --md-el2: none; /* shadow 는 계층 수단이 아니다 */ --md-el4: var(--t2-shadow-overlay); /* 아래 4개는 이 개정 이전부터 정의가 없어 무효값으로 렌더되고 있던 참조다. admin-form.css / admin-mobile.css 가 참조하는데 어디에도 선언이 없었다. */ --md-on: var(--t2-ink); --md-outline: var(--t2-line); --md-surface-container-low: var(--t2-workspace); --md-warning: var(--t2-warning); --radius: var(--t2-radius-island); --radius-s: var(--t2-radius-control); --radius-l: var(--t2-radius-modal); --transition: var(--t2-motion); } html[data-t2editor-theme="dark"], html[data-theme="dark"] { --md-overlay: rgba(0,0,0,.66); } } /* @layer t2.token */ @layer t2.product { /* ── 4. Signature 원형 ────────────────────────────────────────────────── 하단 rail 하나만 제공한다. left/right rail 유틸리티는 제공하지 않는다. */ [data-t2-rail] { position: relative; } [data-t2-rail]::after { content: ""; position: absolute; pointer-events: none; left: var(--t2-rail-inset); right: var(--t2-rail-inset); height: var(--t2-rail-w); background: var(--t2-rail-color, var(--t2-product)); } [data-t2-rail="bottom"]::after { bottom: 0; } [data-t2-rail="top"]::after { top: 0; } /* 세로 rail — 관리자 설정 표면에 한해 사용한다. ⚠ 남용 주의. 한 요소에 상하단 rail 과 좌우측 rail 을 동시에 쓰지 않는다. ⚠ 에디터 셸·모달·플러그인 표면에서는 쓰지 않는다. 문서 도구의 라벨이 밀리거나 컬러 패딩처럼 읽힌다. 허용 용도: 관리자 내비 현재 위치, 설정 그룹의 소유권 표시. */ [data-t2-rail="start"] { position: relative; } [data-t2-rail="start"]::after { content: ""; position: absolute; pointer-events: none; inset-inline-start: 0; top: var(--t2-rail-inset); bottom: var(--t2-rail-inset); width: var(--t2-rail-w); height: auto; background: var(--t2-rail-color, var(--t2-product)); } [data-t2-rail-tone="danger"] { --t2-rail-color: var(--t2-danger); } [data-t2-rail-tone="warning"] { --t2-rail-color: var(--t2-warning); } [data-t2-rail-tone="success"] { --t2-rail-color: var(--t2-success); } [data-t2-rail-tone="dsc"] { --t2-rail-color: var(--t2-dsc); } /* 보조 signature — 절삭 모서리는 critical surface 전용이다. clip-path 는 border-radius 렌더를 덮으므로 둘을 겹칠 수 없고, 겹칠 이유도 없다. 날카로움이 "이건 위험한 작업 레이어다" 라는 의미를 가질 때만 쓴다 (law 704 §4: 기능이 형상을 얻는다). 일반 modal 은 둥근 모서리를 쓴다. */ [data-t2-surface="critical"] { clip-path: polygon(var(--t2-chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--t2-chamfer)); border-radius: 0; } /* 직접 조작 객체의 코너 tick — 선택된 블록/미디어에만 */ [data-t2-ticks] { position: relative; } [data-t2-ticks]::before, [data-t2-ticks]::after { content: ""; position: absolute; width: var(--t2-tick); height: var(--t2-tick); border-color: var(--t2-product); border-style: solid; pointer-events: none; } [data-t2-ticks]::before { top: -1px; left: -1px; border-width: 2px 0 0 2px; } [data-t2-ticks]::after { bottom: -1px; right: -1px; border-width: 0 2px 2px 0; } /* ── 5. 히트 영역과 시각면 분리 ───────────────────────────────────────── 보이는 면 30px, 터치 타깃 44px. 부모 레이아웃 높이를 늘리지 않는다. */ [data-t2-hit] { position: relative; } [data-t2-hit]::before { content: ""; position: absolute; z-index: 0; inset: calc((var(--t2-face) - var(--t2-hit)) / 2) 0; } @media (pointer: coarse) { [data-t2-hit]::before { inset: calc((var(--t2-face) - var(--t2-hit)) / 2); } } /* ── 6. 타이포그래피 역할 ───────────────────────────────────────────── */ [data-t2-type="meta"], .t2-meta, .t2-shortcut, .t2-version, .t2-num { font-family: var(--t2-font-mono); font-variant-numeric: tabular-nums; font-size: 11px; letter-spacing: 0; color: var(--t2-ink-faint); } [data-t2-type="eyebrow"], .t2-eyebrow { font-family: var(--t2-font-mono); font-size: 10px; font-weight: 500; letter-spacing: var(--t2-track-label); text-transform: uppercase; color: var(--t2-ink-faint); } [data-t2-type="title"] { letter-spacing: var(--t2-track-title); font-weight: 600; } /* ── 7. 중첩 인셋 — 부모보다 한 단계 작게 ──────────────────────────── */ [data-t2-inset="6"] { padding: var(--t2-s6); } [data-t2-inset="6"] > [data-t2-inset="auto"] { padding: var(--t2-s5); } [data-t2-inset="5"] { padding: var(--t2-s5); } [data-t2-inset="5"] > [data-t2-inset="auto"] { padding: 14px; } [data-t2-inset="4"] { padding: var(--t2-s4); } [data-t2-inset="4"] > [data-t2-inset="auto"] { padding: var(--t2-s3); } [data-t2-inset="3"] { padding: var(--t2-s3); } [data-t2-inset="3"] > [data-t2-inset="auto"] { padding: var(--t2-s2); } /* ── 8. 스크롤 소유권 — law 706 ────────────────────────────────────── */ [data-t2-scroll="x"] { overflow-x: auto; overflow-y: hidden; overscroll-behavior-x: contain; } [data-t2-scroll="y"] { overflow-y: auto; overflow-x: hidden; overscroll-behavior-y: contain; } [data-t2-scroll] { scrollbar-width: thin; scrollbar-color: var(--t2-line-strong) transparent; } [data-t2-scroll]::-webkit-scrollbar { width: 10px; height: 10px; } [data-t2-scroll]::-webkit-scrollbar-thumb { background: var(--t2-line-strong); border: 3px solid transparent; background-clip: content-box; } [data-t2-scroll]::-webkit-scrollbar-track { background: transparent; } @media (prefers-reduced-motion: reduce) { :root { --t2-motion: .01ms; --t2-motion-fast: .01ms; } } } /* @layer t2.product */