/* Path: T2Editor/css/t2-foundation.css */ /* ═══════════════════════════════════════════════════════════════════════════ * T2Editor Foundation — Precision Rail (horizontal only) * /law 704 §1-22 · 705 §1-13 · 706 · 707 A-L · 708 · 709 · 710 · 711 * * 토큰 · 리듬 · signature 원형과 제품 전체의 최소 시각 계약을 정의한다. * 일반 컴포넌트 기본값은 t2-visual-system.css(t2.product), 기능별 레이아웃과 * 의미는 t2.plugin, 제품 정체성 자체가 깨지는 최소 불변식만 t2.contract가 맡는다. * * ── 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(의미색) + 아이콘 * ═══════════════════════════════════════════════════════════════════════════ */ /* 책임 순서: token 값의 정본 content 발행된 본문의 모양 — 편집 화면과 발행 화면이 함께 쓰는 규칙 legacy 과거 구현 module 공통 기능 모듈 product 공통 제품 기본값 plugin 기능별 레이아웃·의미(해설 702) contract 툴바/액션/모달 외곽/포커스 같은 제품 불변식만 최종 보증 contract에 기능별 클래스나 워크플로를 넣지 않는다. 기능별 디자인을 다시 중앙이 삼키면 702의 독립성 원칙과 동일한 충돌을 재현한다. content 는 token 바로 위, 가장 낮은 자리다. 그 시트(css/content/, plugin//.content.css)는 발행된 페이지에서 레이어 없이 실리는 것이 본업이고, 편집 화면에는 @layer t2.content 로 감싸여 함께 실린다 (config/t2_content_styles.php). 왜 가장 낮은가: 편집 화면의 모양은 이미 core.css 와 각 플러그인 시트가 정하고 있다. 발행 시트를 그 위에 올리면 같은 선택자를 든 곳마다 편집 화면이 조용히 달라진다 — 발행본은 하드코딩된 색·치수를 쓰고 편집 화면은 토큰을 쓰기 때문이다. 아래에 두면 편집 화면은 오늘 그대로이고, 발행 시트는 아무도 말하지 않은 것만 채운다. 두 화면의 남은 차이는 CSS 계약 검사(C7)가 목록으로 보여 준다 — 사라진 것이 아니라 보이게 된 것이다. */ @layer t2.token, t2.content, t2.legacy, t2.module, t2.product, t2.plugin, t2.contract; @layer t2.token { /* ── 1. Canonical — law 705. 변경 불가 ──────────────────────────────────── */ :root { --t2-product: #356FC0; --t2-dsc: #FF6600; } /* 705 §7·§8: #FF6600 은 계보 표식의 정본이고 면·레일에 그대로 쓴다. 글자로 쓸 때는 밝은 표면 위에서 2.53~2.94:1 까지 내려가므로, 705 §8 이 허용한 "밝은 환경의 어두운 동반색"을 별도 토큰으로 둔다. 제품색이 --t2-product / --t2-product-ink 로 이미 쓰는 것과 같은 방식이다. 704 §15 에 따라 Light 와 Dark 를 각각 매핑한다. */ :root { --t2-dsc-ink: #B34700; } html[data-t2editor-theme="dark"], html[data-theme="dark"] { --t2-product: #7FA8FF; } /* ── 2. Derived — 디자인 시스템 위임 범위 ───────────────────────────────── */ :root { color-scheme: light; /* developer/t2-design-system.md → Product color 가 규정한 이름이 정본이다. 내부에서 오래 쓰인 -ink/-tone/-select 는 같은 값을 가리키는 별칭으로만 남긴다(값을 두 벌로 적지 않는다). */ --t2-product-strong: #295EA8; --t2-product-soft: rgba(53,111,192,.10); --t2-product-selection: rgba(53,111,192,.16); --t2-product-ink: var(--t2-product-strong); --t2-product-tone: var(--t2-product-soft); --t2-product-select: var(--t2-product-selection); --t2-product-wash: rgba(53,111,192,.07); --t2-product-rgb: 53,111,192; /* 제품색을 통째로 칠한 면 위의 글자. -ink 는 종이 위의 제품색 글자이고 이것은 그 반대다. 밝은 테마의 제품색은 어두우므로 흰 글자를 얹는다. */ --t2-on-product: #FFFFFF; /* 역할 기반 neutral material. developer/t2-design-system.md의 정본 매핑. */ --t2-base: #F2F3F5; --t2-workspace: #F7F8F9; --t2-surface: #FFFFFF; --t2-inset: #ECEEF1; --t2-floating: #FFFFFF; --t2-line: #D4D7DC; --t2-line-strong: #BFC5CF; /* toolbar는 하나의 instrument rail이다(704 §16) — idle/active를 개별 tile의 넓은 면으로 "말하지" 않는다. 그 금지는 지금도 그대로다: 아래 tile-active 는 tile 과 같은 면이고, 상태는 하단 rail 이 계속 혼자 말한다. ── 면 자체는 제품이 고른 얼굴이다 ──────────────────────────────────── 11.0 부터 도구는 중성 그레이 면 위에 선다. 면이 있어야 "만질 수 있는 것"이 한눈에 읽히기 때문이고, §16 이 금지한 것은 면이 아니라 면으로 상태를 말하는 일이다. 값은 관리자 'T2Editor 디자인'이 --t2-design-* 으로 심으며, 끄면 아래 폴백(transparent)으로 돌아가 면 없는 rail 이 된다. 폴백이 transparent 인 것은 그것이 기본값이어서가 아니라, 값이 심기지 않은 화면(설정을 읽지 못한 순간)에서 §16 쪽으로 안전하게 무너지기 위해서다. */ --t2-tool-tile: var(--t2-design-tile-light, transparent); --t2-tool-tile-hover: var(--t2-design-tile-hover-light, var(--t2-product-wash)); --t2-tool-tile-active: var(--t2-tool-tile); --t2-tool-ink: var(--t2-design-ink-light, var(--t2-ink-muted)); /* 크롬 밴드(툴바·서브툴바·하단 바)와 캔버스(작성 영역)의 면. 두 이름은 --t2-workspace/--t2-surface 를 대신 쓰는 것이 아니라, 편집기 셸에서만 관리자 값이 끼어들 자리를 연다 — 모달과 관리 화면은 그대로 원형을 쓴다. */ --t2-chrome-fill: var(--t2-design-chrome-light, var(--t2-workspace)); --t2-canvas-fill: var(--t2-design-canvas-light, var(--t2-surface)); /* 토글 모듈(js/utils/toggle.css)의 면. 켜짐만이 의미를 나르는 색이고 꺼짐은 중성 구조색이다 — 두 상태를 모두 의미색으로 칠하면 무엇이 켜진 것인지 면만 보고는 알 수 없다. 썸은 두 테마 모두 흰색으로 고정한다: 트랙 위에서 위치가 곧 상태이므로 썸까지 테마를 타면 단서가 흐려진다. */ --t2-toggle-on: var(--t2-design-toggle-on-light, var(--t2-product)); --t2-toggle-off: var(--t2-design-toggle-off-light, var(--t2-line-strong)); --t2-toggle-thumb: #FFFFFF; --t2-ink: #17191C; --t2-ink-muted: #62676F; --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); /* ── 형상 — 역할 사다리 {0,1,2,3,6,8,12,16,999} ──────────────────────── 예전 사다리는 {0,2,4} 였고 tile 은 0 이었다. 그 결과가 UI 스펙 대조에서 드러났다 — 도구는 잘린 네모였고, 셸·모달·시트가 전부 같은 각을 써서 "무엇을 감싸는 표면인지"가 형상으로 구분되지 않았다. 사다리는 크기가 아니라 역할로 오른다. 한 단계는 그 표면이 무엇을 감싸는가에 대응하고, 같은 역할이면 화면이 달라도 같은 단계를 쓴다. 0 밴드. 셸이 잘라 주므로 자기 각을 갖지 않는다(툴바·하단 바) 1 선·손잡이 — 두께가 곧 반지름인 것 2 자국 — 눈금·틱처럼 각이 있다는 사실만 알리는 것 3 표식 — 배지·진행 막대·자리 표시줄 6 조작부 — 도구 타일·버튼·입력칸·로고 lockup 8 섬 — 서브툴바·팝업 메뉴·토스트·드롭존·검색창처럼 밴드 위에 뜨는 것 7 조작부의 안쪽 — 미리보기 칸·Hex 입력·복사/적용처럼 팝오버 안에서 자기 테두리를 갖는 조각(스펙 05 의 .cp-* 조작부) 12 표면 — 편집기 셸과 모달 본체 14 떠 있는 판 — 화면 어디에나 서고 그림자로 떠 있는 카드(색 팝오버) 16 시트 — 화면 끝에 붙어 위 두 모서리만 둥근 것 999 원형/알약 — 토글 트랙·환경 스위치·핸들·색 칩 조작부(6)가 섬(8)보다 작은 것은 섬이 조작부를 담기 때문이다. 담는 것이 담기는 것보다 각이 크지 않으면 안쪽 모서리가 바깥으로 삐져나온다. 바깥 각 안에 1px 테두리를 두고 맞물리는 면은 한 단계 작다 — 14px 카드의 발치 밴드는 13px 이다(스펙 04 의 .bm-footer-bar). 그 계산을 생략하면 밴드의 각이 카드 밖으로 삐져나오거나, 각을 아예 지워 상자처럼 보이게 된다. */ --t2-radius-structural: 0px; --t2-radius-edge: 3px; --t2-radius-field: 6px; --t2-radius-control: 6px; --t2-radius-tile: 6px; --t2-radius-brand: 6px; --t2-radius-inner: 7px; --t2-radius-island: 8px; --t2-radius-overlay: 8px; --t2-radius-shell: 12px; --t2-radius-modal: 12px; --t2-radius-popover: 14px; --t2-radius-sheet: 16px; --t2-radius-pill: 999px; /* 실제 원형/토글 track만 */ /* 리듬 — 4px 기준 사다리. 콘텐츠 흐름 안의 간격은 여기서 고른다 (해설 708 A). 기하 수치(--t2-hit/--t2-face)는 이 사다리와 별개다. 공식 크롬과 공식 모달의 기하는 아래 비례 사다리가 소유한다(해설 710 A-5). */ --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 ──────────────────────────────────── */ --t2-inset-shell: var(--t2-s5); --t2-inset-section: var(--t2-s4); --t2-inset-island: var(--t2-s3); --t2-inset-control: var(--t2-s2); --t2-inset-chip: var(--t2-s1); --t2-gap-tight: var(--t2-s1); --t2-gap-related: var(--t2-s2); --t2-gap-group: var(--t2-s4); --t2-gap-section: var(--t2-s6); --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); --t2-sticky-top: 0px; --t2-rail-w: 2px; --t2-rail-inset: 7px; --t2-chamfer: 9px; --t2-tick: 6px; --t2-hit: 44px; --t2-face: 30px; --t2-motion-fast: 110ms cubic-bezier(.2,.75,.2,1); --t2-motion: 130ms cubic-bezier(.2,.75,.2,1); /* 스펙이 쓰는 하나뿐인 스프링. 집는 동작(색 칩·미리보기·버튼의 scale)이 끝값을 살짝 넘었다가 돌아온다 — 손에 잡힌다는 신호다. transform 에만 쓴다. 곡선과 "곡선+시간"을 따로 둔다. 시간이 든 토큰을 transition 의 세 번째 자리에 쓰면 그 시간이 지연으로 읽혀 동작이 늦게 시작한다. */ --t2-ease-spring: cubic-bezier(.34, 1.56, .64, 1); --t2-motion-spring: 160ms var(--t2-ease-spring); --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); --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-strong: #A3BEFF; --t2-product-soft: rgba(127,168,255,.14); --t2-product-selection: rgba(127,168,255,.20); --t2-product-ink: var(--t2-product-strong); --t2-product-tone: var(--t2-product-soft); --t2-product-select: var(--t2-product-selection); --t2-product-wash: rgba(127,168,255,.11); --t2-product-rgb: 127,168,255; /* 어두운 테마의 제품색은 밝은 파랑이다. 그 위에 흰 글자를 얹으면 2.2:1 로 읽히지 않는다 — 잉크를 뒤집어 8.9:1 을 만든다. */ --t2-on-product: #12151A; --t2-base: #1B1D20; --t2-workspace: #202327; --t2-surface: #24272B; --t2-inset: #2A2E33; --t2-floating: #30343A; --t2-line: #3A3F46; --t2-line-strong: #525962; /* --t2-tool-tile-active 는 :root 에서 --t2-tool-tile 을 가리키므로 여기서 다시 적지 않는다. 두 선언은 같은 요소(html)에 놓이고 var() 는 그 요소의 계산값을 쓴다 — 다크에서도 active 는 다크 타일과 같은 면이 된다. */ --t2-tool-tile: var(--t2-design-tile-dark, transparent); --t2-tool-tile-hover: var(--t2-design-tile-hover-dark, var(--t2-product-wash)); --t2-tool-ink: var(--t2-design-ink-dark, var(--t2-ink-muted)); --t2-chrome-fill: var(--t2-design-chrome-dark, var(--t2-workspace)); --t2-canvas-fill: var(--t2-design-canvas-dark, var(--t2-surface)); --t2-toggle-on: var(--t2-design-toggle-on-dark, var(--t2-product)); --t2-toggle-off: var(--t2-design-toggle-off-dark, var(--t2-line-strong)); --t2-ink: #F2F4F6; --t2-ink-muted: #A7ADB5; --t2-ink-faint: #7F8791; --t2-dsc-ink: #FF9A4D; /* 어두운 테마의 알림 아이콘은 자기 옅은 면 위에 앉는다. 제품색 그대로면 그 면 위에서 4.37:1 로 떨어져 AA(4.5)에 미치지 못한다 — 재서 확인했다. 한 단계 밝은 쪽으로 올린다. */ --t2-info: var(--t2-product-strong); --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); } /* ── 비례 격자 — 해설 710 ──────────────────────────────────────────────── 크롬과 모달의 치수는 픽셀이 아니라 비례 단위 u 로 적는다. 가로가 u 를 정하고 세로의 남거나 모자란 양은 콘텐츠가 흡수한다(710 A-4·B-13). u 의 원점은 둘이다. :root 의 u 는 뷰포트가 소유하고 문서에 직접 붙는 모달이 쓴다. 편집기 크롬은 .t2-editor-container 가 자기 폭에서 다시 정한다 (데스크톱·태블릿 15 : 10, 스마트폰 6 : 10 — 710 A-2·A-3). 파생 토큰을 :root 에만 적으면 안 된다. custom property 의 var() 는 선언된 자리에서 치환되므로, :root 에 적힌 1/8u 는 편집기가 u 를 다시 정해도 여전히 뷰포트의 u 를 가리킨다. 그래서 두 원점이 같은 규칙에서 자기 파생값을 함께 선언한다 — 한 벌의 정의를 두 곳에 거는 것이지 값을 두 벌로 적는 것이 아니다. 요소는 자기 컨테이너가 될 수 없어 100cqi 를 컨테이너 자신에게 쓸 수 없으므로, 자식에서 선언하고 거기서부터 크롬 전체로 상속시킨다. 710 A-6: 최소 히트 영역은 간격이 아니라 기하 수치이므로 격자보다 우선한다. 격자가 정한 면이 44px 아래로 내려가면 조작 상자는 44px 로 서고 보이는 면만 격자를 지킨다. 밴드 높이는 그 상자에서 나온다(710 B-3·B-9). ── 세로 예산이 10u 로 닫힌다 ────────────────────────────────────────── 11.1 이전의 툴바 밴드는 1u 였다. 그러면 툴바 1 + 본문 7¾ + 하단 바 1 = 9¾ 로, 710 이 적어 둔 "상단 크롬 1¼ + 본문 7¾ + 하단 바 1 = 10" 과 1/4u 어긋난다. 재 보면 실제로 그랬다(1280px 폭에서 830.67px, 10u = 852). 어긋난 쪽은 툴바다. 툴바 인셋 3/16u + 도구 7/8u + 인셋 3/16u = 1¼u 본문 7¾u 하단 인셋 1/4u + 요소 1/2u + 인셋 1/4u = 1u 두 밴드의 인셋이 다른 것은 위계가 다르기 때문이다 — 위는 문서를 고치는 도구라 면이 크고 서로 붙지 않아야 하며, 아래는 상태와 환경 스위치라 면이 작고 프레임에서 더 물러선다. 도구 사이 간격이 밴드의 인셋과 같은 값인 것은 두 밴드 모두에서 유지된다: 첫 요소의 바깥과 요소 사이가 한 리듬으로 읽힌다. */ :root { --t2-u: calc(100vw / 15); } /* cqi 를 모르는 엔진에서는 이 줄을 아예 걸지 않는다. custom property 는 파싱 단계에서 값을 검사하지 않으므로, 지원하지 않는 엔진에서도 --t2-u 에는 `calc(100cqi / 15)` 라는 토큰열이 그대로 들어앉는다. 그리고 그것을 실제 속성에서 쓰는 순간(그리고 그것에서 파생된 --t2-u2·u4· u8·chrome-*·status-* 를 쓰는 모든 순간) 전부 무효가 된다 — 크롬의 여백과 기하가 한꺼번에 0 이 되어 도구·라벨·닫기가 서로 붙고 화면 끝에 밀린다. @supports 로 감싸면 그런 엔진은 :root 의 뷰포트 u 를 그대로 물려받는다. 비례는 컨테이너가 아니라 뷰포트에서 나오지만, 값은 살아 있다. */ @supports (width: 1cqi) { .t2-editor-container > * { --t2-u: calc(100cqi / 15); } } :root, .t2-editor-container > * { --t2-u8: calc(var(--t2-u) / 8); --t2-u316:calc(var(--t2-u) * 3 / 16); --t2-u4: calc(var(--t2-u) / 4); --t2-u38: calc(var(--t2-u) * 3 / 8); --t2-u2: calc(var(--t2-u) / 2); --t2-u34: calc(var(--t2-u) * 3 / 4); --t2-u78: calc(var(--t2-u) * 7 / 8); --t2-chrome-inset: var(--t2-u316); --t2-chrome-face: var(--t2-u78); --t2-chrome-hit: max(var(--t2-u78), var(--t2-hit)); --t2-chrome-band: calc(var(--t2-chrome-hit) + 2 * var(--t2-chrome-inset)); /* 도구 사이의 가로 리듬. 기본은 밴드의 인셋과 같은 3/16u 이고, 관리자가 고정 px 을 고르면 그 값이 들어온다. 세로 인셋은 --t2-chrome-inset 으로 남는다 — 밴드 높이(1¼u)는 격자가 소유하는 값이라 운영자 취향으로 흔들지 않는다. */ --t2-toolbar-gap: var(--t2-design-toolbar-gap, var(--t2-chrome-inset)); /* 하단 바의 요소는 1/2u 다(710 C-2·C-3). 툴바의 7/8u 와 다른 것은 위계가 다르기 때문이다. 밴드는 1u 이고 인셋 1/4u 가 그 차이를 흡수한다. 히트 영역이 1/2u 보다 커지면 인셋이 1/8u 까지 줄고, 그래도 모자라면 밴드가 자란다 — 최소 히트 영역이 격자를 이긴다(710 A-6). */ --t2-status-inset: var(--t2-u4); --t2-status-face: var(--t2-u2); /* 하단 바에서 "작은 것" 의 치수. 스펙은 글자 수(.text-count)와 자동저장 스위치(.switch)에 같은 0.22U 를 쓴다 — 읽는 값과 켜고 끄는 값이 같은 눈금에 선다는 뜻이다. 1/4u 로 반올림하면 그 둘이 조작부(1/2u)와 구분되지 않는다. */ --t2-status-mark: calc(var(--t2-u) * 0.22); --t2-status-hit: max(var(--t2-u2), var(--t2-hit)); --t2-status-band: calc(var(--t2-status-face) + 2 * var(--t2-status-inset)); --t2-status-pad: max(var(--t2-u8), calc((var(--t2-status-band) - var(--t2-status-hit)) / 2)); } /* 710 A-3: 스마트폰의 기준 비례는 가로 10 : 세로 16 이다. 모달이 뷰포트에 직접 붙으므로 u 도 뷰포트에서 나온다. 편집기 크롬은 자기 폭에서 다시 정한다. ── 왜 6 이 아니라 10 인가 ──────────────────────────────────────────── UI 스펙 02(모바일 에디터)가 적는 단위는 "화면 너비 280~420px 반응형 뷰포트 (1U = 34px)" 이고, 그 데모 기기는 340px 폭이다 — 340 / 34 = 10. 즉 폰의 가로는 6u 가 아니라 10u 다. 6 으로 두면 393px 폰에서 1u = 65.5px 이 되어, 스펙이 32px+ 로 적은 도구가 57px 타일이 되고 툴바 밴드가 81.5px 으로 선다. 재 보니 도구 폭 합이 497px 으로 클라이언트 폭 391px 을 넘겨 도구 둘이 잘렸다. 10 으로 두면 1u = 39.3px, 도구는 히트 영역 바닥인 44px, 밴드 58.7px, 도구 폭 합 391px 으로 정확히 들어간다(잘림 0). 스펙의 34px 은 340px 기기에서 이 식이 내는 값 그대로다. */ @media (max-width: 760px) { :root { --t2-u: calc(100vw / 10); } /* 편집기도 같은 기준 비례를 쓴다. 여기서 15 를 유지하면 한 화면 안에서 크롬은 모달과 다른 단위로 서게 되고, 좁은 폭에서 크롬만 눌린다(710 B-12). 위와 같은 이유로 cqi 를 아는 엔진에서만 건다. */ @supports (width: 1cqi) { .t2-editor-container > * { --t2-u: calc(100cqi / 10); } } } /* ── 3. 하위 호환 별칭 ─────────────────────────────────────────────────── */ :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; --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; /* action 계열은 색면이 아니라 결정적 액션의 잉크/rail 계약이다(705, 709). */ --t2-plugin-action: transparent; --t2-plugin-action-hover: var(--t2-product-wash); --t2-plugin-on-action: var(--t2-product-ink); --t2-plugin-dsc: var(--t2-dsc); --t2-plugin-dsc-ink: var(--t2-dsc-ink); --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); /* 스크림. 라이트에서 .56 은 흰 페이지 위에서 rgb(120,122,124) 로 합성되어, 그 위에 서는 흰 글자(모달 바깥 닫기 ✕)가 3.48:1 밖에 나오지 않았다. 다크가 이미 쓰는 .66 으로 맞추면 rgb(96,97,99) 가 되어 6.4:1 이 된다 — 두 테마의 스크림 명도를 같은 값으로 두는 편이 아래 표면과의 분리도 분명해진다. */ --md-overlay: rgba(14,17,21,.66); --md-el1: none; --md-el2: none; --md-el4: var(--t2-shadow-overlay); --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 원형 ────────────────────────────────────────────────── */ [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; } [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); } [data-t2-surface="critical"] { clip-path: polygon(var(--t2-chamfer) 0, 100% 0, 100% 100%, 0 100%, 0 var(--t2-chamfer)); border-radius: 0; } [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; } [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); } } [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-muted); } [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-muted); } [data-t2-type="title"] { letter-spacing: var(--t2-track-title); font-weight: 600; } [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: var(--t2-s4); } [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); } [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; --t2-motion-spring: .01ms; } } } /* @layer t2.product */ /* t2.contract — 기능을 디자인하지 않는다. 제품 문법의 최소 불변식만 지킨다. */ @layer t2.contract { /* 704 §16: toolbar는 하나의 instrument rail. 이 계약이 지키는 것은 "상태를 면으로 말하지 않는다"이지 "각을 갖지 않는다"가 아니었다. 11.1 이전에는 radius 를 구조값(0)으로 못박아 두 금지를 하나로 묶었고, 그 결과 도구는 잘린 네모가 되어 무엇이 눌리는 것인지 형상으로 읽히지 않았다. 이제 도구는 조작부 단계(--t2-radius-tile)를 쓴다. 각은 "만질 수 있는 것"을 말하고, 상태는 여전히 하단 rail 하나가 말한다 — active 가 tile 과 같은 면을 쓰는 이유는 그대로다. 면 자체는 --t2-tool-tile 이 소유하고 관리자가 정한다. pill(999px)로는 올라가지 않는다: 알약은 하단 바의 환경 스위치 몫이고, 두 밴드가 같은 형상을 쓰면 위계가 사라진다. */ .t2-toolbar :is(.t2-btn, .t2-toolbar-group-btn) { border-radius: var(--t2-radius-tile); background-color: var(--t2-tool-tile); box-shadow: none; } .t2-toolbar :is(.t2-btn, .t2-toolbar-group-btn):hover:not(:disabled) { background-color: var(--t2-tool-tile-hover); } .t2-toolbar :is(.t2-btn.active, .t2-toolbar-group-btn.active, .t2-btn[aria-pressed="true"]) { background-color: var(--t2-tool-tile-active); } /* 704·708: modal 자체가 이미 작업 경계다. 기능 CSS는 내부 레이아웃을 소유해도 외곽 재료/반경을 별도의 시각 언어로 갈라놓지 않는다. */ .t2-modal-surface:not(.t2-modal-surface-fullscreen) { color: var(--t2-ink); background-color: var(--t2-floating); border-color: var(--t2-line); box-shadow: var(--t2-shadow-modal); } @media (min-width: 761px) { .t2-modal-surface:not(.t2-modal-surface-fullscreen) { border-radius: var(--t2-radius-modal); } } /* 시트는 화면 끝에 붙는 표면이므로 표면(12)이 아니라 시트(16) 단계를 쓴다 — 아래 두 모서리는 화면 끝에 닿으므로 각을 갖지 않는다(해설 711 A-2). */ @media (max-width: 760px) { .t2-modal-overlay-adaptive > .t2-modal-surface:not(.t2-modal-surface-fullscreen) { border-radius: var(--t2-radius-sheet) var(--t2-radius-sheet) 0 0; } } /* 결정적 액션은 자기 면을 갖는다 — UI 스펙 04 의 .bm-footer-btn.confirm 과 스펙 05 의 .cp-apply-btn 이 둘 다 accent 를 통째로 칠하고 잉크를 뒤집는다. 그 앞 판본은 반대였다: 색면을 지우고 ink + 하단 rail 만 남겼고, 그래서 모달 발치의 "확인"이 본문 글자와 구분되지 않았다. 취소는 중립 면으로 물러선다. */ :where(.t2-modal-surface, .t2-plugin-surface-shell, .t2-plugin-surface-dialog, .t2-plugin-surface-modal, [data-t2-plugin-surface], .t2-link-preview, .t2-color-picker-container) :is(.t2-btn-primary, .t2-btn[data-action="insert"], .t2-btn[data-action="upload"], .t2-btn[data-action="apply"], .t2-btn[data-action="save"], .t2-btn[data-action="confirm"]) { color: var(--t2-on-product); background-color: var(--t2-product); background-image: none; border-color: var(--t2-product); box-shadow: none; font-weight: 600; } :where(.t2-modal-surface, .t2-plugin-surface-shell, .t2-plugin-surface-dialog, .t2-plugin-surface-modal, [data-t2-plugin-surface], .t2-link-preview, .t2-color-picker-container) :is(.t2-btn-primary, .t2-btn[data-action="insert"], .t2-btn[data-action="upload"], .t2-btn[data-action="apply"], .t2-btn[data-action="save"], .t2-btn[data-action="confirm"]):hover:not(:disabled) { color: var(--t2-on-product); background-color: var(--t2-product-strong); border-color: var(--t2-product-strong); } :where(.t2-modal-surface, .t2-plugin-surface-shell, .t2-plugin-surface-dialog, .t2-plugin-surface-modal, [data-t2-plugin-surface], .t2-link-preview) :is(.t2-btn-danger, .t2-btn[data-action="delete"], .t2-btn[data-action="remove"]) { color: var(--t2-danger); background-color: transparent; background-image: linear-gradient(var(--t2-danger), var(--t2-danger)); background-repeat: no-repeat; background-position: center bottom; background-size: calc(100% - (2 * var(--t2-rail-inset))) var(--t2-rail-w); border-color: transparent; box-shadow: none; font-weight: 600; } :where(.t2-modal-surface, .t2-plugin-surface-shell, .t2-plugin-surface-dialog, .t2-plugin-surface-modal, [data-t2-plugin-surface], .t2-link-preview) :is(.t2-btn-danger, .t2-btn[data-action="delete"], .t2-btn[data-action="remove"]):hover:not(:disabled) { color: var(--t2-danger); background-color: var(--t2-danger-soft); } /* product baseline의 ::after rail과 contract rail이 중첩되면 같은 상태 단서가 두 줄로 보인다. contract가 최종 rail 하나만 소유한다(707 state signal budget). */ :where(.t2-modal-surface, .t2-plugin-surface-shell, .t2-plugin-surface-dialog, .t2-plugin-surface-modal, [data-t2-plugin-surface], .t2-link-preview, .t2-color-picker-container) :is(.t2-btn-primary, .t2-btn[data-action="insert"], .t2-btn[data-action="upload"], .t2-btn[data-action="apply"], .t2-btn[data-action="save"], .t2-btn[data-action="confirm"])::after, :where(.t2-modal-surface, .t2-plugin-surface-shell, .t2-plugin-surface-dialog, .t2-plugin-surface-modal, [data-t2-plugin-surface], .t2-link-preview) :is(.t2-btn-danger, .t2-btn[data-action="delete"], .t2-btn[data-action="remove"])::after { content: none; } /* 취소는 위험·주요 실행보다 앞서지 않지만 면 자체를 잃지도 않는다 — UI 스펙 04 의 .bm-footer-btn.cancel 은 중성 면(chrome-700)에 옅은 잉크다. 발치의 두 버튼이 면 하나와 글자 하나로 갈리면 "둘 중 하나만 버튼" 으로 읽힌다. 면은 둘 다 갖고, 무게가 제품색과 중성으로 갈린다. 닫기(✕ 계열)는 다르다. 그것은 발치의 선택지가 아니라 표면의 출구이므로 면을 갖지 않는다 — 스펙의 .m-close-btn 과 .t2-outside-modal-close 도 글자 하나다. */ :where(.t2-modal-surface, .t2-plugin-surface-modal, .t2-link-preview) .t2-btn[data-action="cancel"] { color: var(--t2-ink-muted); background-color: var(--t2-inset); box-shadow: none; } :where(.t2-modal-surface, .t2-plugin-surface-modal, .t2-link-preview) .t2-btn[data-action="cancel"]:hover:not(:disabled) { color: var(--t2-ink); background-color: var(--t2-line); } :where(.t2-modal-surface, .t2-plugin-surface-modal, .t2-link-preview) :is(.t2-btn[data-action="close"], button[data-action="close"], .t2-meme-close-btn) { color: var(--t2-ink-muted); background-color: transparent; box-shadow: none; } :where(.t2-modal-surface, .t2-plugin-surface-modal, .t2-link-preview) :is(.t2-btn[data-action="close"], button[data-action="close"], .t2-meme-close-btn):hover:not(:disabled) { color: var(--t2-ink); background-color: var(--t2-product-wash); } /* 707: 번역 메뉴 선택 상태는 rail + ink/weight로 충분하다. legacy check glyph를 함께 남기면 하나의 상태에 단서가 세 겹이 된다. */ .t2-translate-menu-item.t2-active::before { content: none; } /* 706·707: 브라우저/플러그인별 focus glow를 하나의 비이동 outline로 수렴한다. */ :where(.t2-modal-surface, .t2-plugin-surface-shell, .t2-plugin-surface-dialog, .t2-plugin-surface-modal, [data-t2-plugin-surface], .t2-link-preview, .t2-color-picker-container, .t2-dropdown-layer) :is(button, input, select, textarea, [role="slider"]):focus-visible { outline: 1px solid var(--t2-product); outline-offset: 2px; box-shadow: none; } /* 밖 배치 컨트롤 섬의 자리 예약 — 최소 불변식이므로 여기 있다. 섬은 블록 경계 밖에 떠 있고, 그 자리를 블록 여백으로 확보하지 않으면 이웃 문단 글자와 옆 블록의 섬 위에 겹친다. 예약치(--t2-block-island-reserve)는 css/t2-visual-system.css 가 섬의 실제 높이에서 유도한다. t2.product 에 두었을 때는 플러그인 CSS 의 블록 루트 margin 하나에 통째로 졌다 — t2.plugin 이 t2.product 뒤에 오기 때문이다. 재 보니 .t2-table-wrapper 의 24px 이 이겨 섬이 앞 문단을 22px, .t2-code-block 의 8px 이 이겨 27.2px 덮고 있었다. 규칙이 있어도 닿지 않으면 없는 것과 같다. 배치를 inside 로 바꿔 회피하지 않는다. inside 는 콘텐츠 픽셀을 덮으므로 발행 결과 예견 가능성을 해치고, 그건 블록에 배경을 칠하는 것과 같은 손실이다. data-t2-content-block-outside 는 모듈이 실제 슬롯 배치를 보고 부여한다. :has() 에 의존하지 않고, 밖 슬롯이 없는 블록은 여백이 늘지 않는다. */ /* 한 변이 두 줄을 쓰는 블록이 있다. 좁은 화면에서 편집 섬과 파괴 섬이 한 줄에 서지 못하면 플러그인이 시작 레일을 한 줄 위로 올리는데(plugin/table/table.css, max-width:640px), 예약이 한 줄뿐이면 올라간 섬이 앞 문단과 sticky 툴바 위에 그대로 앉는다 — 390px 실측에서 문단을 21px, 툴바를 20px 덮었다. 줄 수는 배치를 아는 쪽(플러그인)이 신호로 말하고, 예약치는 계속 여기가 소유한다. 커스텀 속성은 레이어를 타지 않으므로 t2.plugin 에서 t2.contract 의 이 규칙에 값을 넘길 수 있다 — data-t2-content-block-outside 와 같은 어법이다. */ .t2-editor .t2-content-block[data-t2-content-block-outside~="top"] { margin-top: calc(var(--t2-block-island-reserve) * var(--t2-block-island-rows-top, 1)); } .t2-editor .t2-content-block[data-t2-content-block-outside~="bottom"] { margin-bottom: calc(var(--t2-block-island-reserve) * var(--t2-block-island-rows-bottom, 1)); } /* 블록이 맞붙으면 두 섬이 같은 띠를 나눠 쓰게 되어 서로 겹친다. 인접 형제 margin 은 상쇄되므로 그때만 두 배로 벌려 두 섬이 각자의 띠를 갖게 한다. */ .t2-editor .t2-content-block[data-t2-content-block-outside~="bottom"]:not([data-t2-content-block-flow="side"]) + .t2-content-block[data-t2-content-block-outside~="top"]:not([data-t2-content-block-flow="side"]) { margin-top: calc(2 * var(--t2-block-island-reserve)); } /* 나란히 선 두 블록의 섬은 같은 띠를 나눠 쓰지 않는다 — 가로로 떨어져 있다. 그런데도 위 규칙이 걸리면 뒤 블록만 한 띠만큼 내려앉아 줄이 어긋난다. 실측(1440, 밈 세 장): 첫 장 y=349, 둘째 장만 y=413 이었다. */ /* ── 호스트 침입 최후 바닥(#90·#88) ────────────────────────────────────── 에디터는 호스트 게시판 문서 안의 위젯이다. 호스트 리셋이 계층 밖 (unlayered)으로 들어오면 계층화된 일반 선언은 캐스케이드 규정상 전부 지고, important 의 계층 역전(계층화 important > 무계층 important)만이 남는 방어다. 그래서 이 바닥은 불변식 중에서도 "깨지면 조작이 망가지는" 것만, 지금 값 그대로를 important 로 재보증한다 — 건강한 설치에서는 겉모습이 하나도 변하지 않고, 침입이 있을 때만 차이가 난다. 히트 바닥: 해설 708 H-3 의 44px(--t2-hit). 호스트가 padding 을 0 으로 뭉개거나 min-height:auto 를 강제해도 도구 타일과 다이얼로그 버튼이 사라지지 않게 한다(#90 실측 파괴 벡터). 확대 바닥: Android Text Autosizer(text-size-adjust)와 iOS 입력 포커스 자동 줌(computed font-size < 16px 일 때 페이지 줌인, blur 후 복귀 없음). 표면 목록은 js/utils/form-controls.css 의 복제본이다 — 원본 목록이 바뀌면 함께 바꾼다(tests/js/host-invasion-floor.test.mjs 가 갈라짐을 잡는다). */ .t2-btn, .t2-toolbar .t2-toolbar-group-btn { min-width: var(--t2-hit)!important; min-height: var(--t2-hit)!important; } :where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay, [data-t2-modal-companion], .t2-color-picker-container, .t2-dropdown-layer, [data-t2-plugin-surface], [data-t2-plugin-block], .t2-plugin-surface-modal, .t2c-react-picker, .t2c-ctx-menu, .t2-link-preview, .t2-file-editor-modal, .t2-meme-modal, .t2-clipurl-panel) { -webkit-text-size-adjust: 100%!important; text-size-adjust: 100%!important; } @media (max-width: 767px), (pointer: coarse) { :where(.t2-editor-container, .t2-plugin-modal-overlay, .t2-modal-overlay, [data-t2-modal-companion], .t2-color-picker-container, .t2-dropdown-layer, [data-t2-plugin-surface], [data-t2-plugin-block], .t2-plugin-surface-modal, .t2c-react-picker, .t2c-ctx-menu, .t2-link-preview, .t2-file-editor-modal, .t2-meme-modal, .t2-clipurl-panel) :where(input:not([type]), input[type="text"], input[type="search"], input[type="email"], input[type="url"], input[type="tel"], input[type="number"], input[type="password"], select, textarea) { font-size: max(16px, 1em)!important; } } } /* @layer t2.contract */