/** * xsDesignSystem Master Bundle (v2.0.0) * Generated by scripts/build_bundle.js * Governance: W3C 3-Tier Tokens · WCAG 3.0 APCA Lc >= 75 · Zero-AI ($I_{ai} == 0.0$) */ /* --- File: tokens.css --- */ /** * xsDesignSystem — Token Substrate Spec (v2.0.0 — Unified W3C 3-Tier Architecture) * Absorbed from: /visual-authoring, /hci-design-system, /visual-judgement-rubric, /cognitive-content-director, /physical-publication-modular-widgets * Strict Invariants: Spot Color <= 3.0%, APCA Lc 75+ (WCAG AAA 12:1), 8pt Grid, True Neutral Surfaces */ @import './tokens-publication.css'; @import './tokens-harmonies.css'; @import './themes.css'; :root { /* ========================================================================== TIER 1: PRIMITIVE TOKENS (글로벌 원형 팔레트 및 기저 수치) ========================================================================== */ --xs-primitive-slate-50: #F8FAFC; --xs-primitive-slate-100: #F1F5F9; --xs-primitive-slate-200: #E2E8F0; --xs-primitive-slate-300: #CBD5E1; --xs-primitive-slate-400: #94A3B8; --xs-primitive-slate-500: #64748B; --xs-primitive-slate-700: #334155; --xs-primitive-slate-800: #1E293B; --xs-primitive-slate-900: #0F172A; --xs-primitive-slate-950: #020617; --xs-primitive-zinc-900: #18181B; --xs-primitive-zinc-950: #09090B; --xs-primitive-navy-900: #1E3A8A; --xs-primitive-navy-800: #1E40AF; --xs-primitive-navy-50: #EEF2FF; --xs-primitive-navy-200: #C7D2FE; --xs-primitive-sage-700: #15803D; --xs-primitive-sage-800: #166534; --xs-primitive-sage-50: #F0FDF4; --xs-primitive-sage-200: #BBF7D0; --xs-primitive-red-600: #DC2626; --xs-primitive-red-700: #B91C1C; --xs-primitive-red-50: #FEF2F2; --xs-primitive-red-200: #FECACA; --xs-primitive-amber-600: #D97706; --xs-primitive-amber-50: #FFFBEB; --xs-primitive-amber-200: #FDE68A; /* ========================================================================== TIER 2: SEMANTIC TOKENS (목적·의미론적 추상화 — 3% Spot & APCA Lc 75+) ========================================================================== */ /* [Light Mode Paper & Crisp Ink] */ --xs-bg-canvas: #F8F9FA; /* 웜 미색 캔버스 */ --xs-bg-surface: #FFFFFF; /* 1단계 서피스 (ΔL = 3%) */ --xs-bg-subtle: var(--xs-primitive-slate-100);/* 2단계 보조 서피스 */ --xs-bg-hover: var(--xs-primitive-slate-200);/* 3단계 인터랙션 호버 */ --xs-bg-active: var(--xs-primitive-slate-300); --xs-border-hairline: #F0F0F0; --xs-border-subtle: var(--xs-primitive-slate-200); --xs-border-strong: var(--xs-primitive-slate-300); --xs-border-focus: var(--xs-primitive-navy-900); --xs-text-ink: var(--xs-primitive-slate-900);/* 15:1 WCAG AAA 본문 */ --xs-text-body: var(--xs-primitive-slate-700);/* 7:1 보조 본문 */ --xs-text-muted: var(--xs-primitive-slate-500);/* 4.5:1 메타데이터 */ --xs-text-soft: var(--xs-primitive-slate-400);/* 3:1 비활성 */ --xs-text-inverse: #FFFFFF; /* Double-Ring APCA Focus-Visible (Light Mode) */ --xs-focus-ring-outer: var(--xs-primitive-navy-900); /* #1E3A8A (APCA Lc 85+) */ --xs-focus-ring-inner: #FFFFFF; --xs-focus-ring-offset: 2px; --xs-focus-ring-width: 2px; /* [Dark Mode Neutral Zinc & Matte Fog (ΔL >= 3% True Neutral)] */ --xs-dark-bg-canvas: #0E0E10; --xs-dark-bg-surface: #16161A; /* Step 1 Surface */ --xs-dark-bg-elevated:#1F1F24; /* Step 2 Surface */ --xs-dark-border: #2E2E35; --xs-dark-text-ink: #F4F4F6; --xs-dark-text-muted: #8E8E98; /* Spot Color Economy (<= 3.0% Visual Area Strict Rule) */ --xs-accent-navy: var(--xs-primitive-navy-900); /* 주행동 닻 (2%) */ --xs-accent-navy-hover: var(--xs-primitive-navy-800); --xs-accent-navy-light: var(--xs-primitive-navy-50); --xs-accent-navy-border:var(--xs-primitive-navy-200); --xs-accent-sage: var(--xs-primitive-sage-700); /* 잠재명시지/성공/찬성 (1%) */ --xs-accent-sage-hover: var(--xs-primitive-sage-800); --xs-accent-sage-light: var(--xs-primitive-sage-50); --xs-accent-sage-border:var(--xs-primitive-sage-200); --xs-accent-vermilion:var(--xs-primitive-red-600); /* RPD단서/경고/반대 (0.5%) */ --xs-accent-vermilion-hover: var(--xs-primitive-red-700); --xs-accent-vermilion-light: var(--xs-primitive-red-50); --xs-accent-vermilion-border:var(--xs-primitive-red-200); --xs-accent-amber: var(--xs-primitive-amber-600);/* Stratum S3 */ --xs-accent-amber-light: var(--xs-primitive-amber-50); --xs-accent-amber-border:var(--xs-primitive-amber-200); --xs-accent-black: var(--xs-primitive-slate-900);/* 소버린 관문 캡슐 */ --xs-accent-black-hover: var(--xs-primitive-slate-800); /* macOS 4-Semantic Feedback */ --xs-status-critical: #FF453A; --xs-status-warning: #FF9F0A; --xs-status-success: #30D158; --xs-status-info: #0A84FF; /* ========================================================================== TIER 3: COMPONENT & BIOMECHANICAL TOKENS (생체역학 및 컴포넌트 규격) ========================================================================== */ /* 8pt Rhythm Grid & Spacing Scale (HCI Gestalt) */ --xs-space-0: 0px; --xs-space-1: 4px; /* 0.5 unit */ --xs-space-2: 8px; /* 1.0 unit (gap-sm) */ --xs-space-3: 12px; /* 1.5 unit */ --xs-space-4: 16px; /* 2.0 unit (gap-md) */ --xs-space-5: 20px; --xs-space-6: 24px; /* 3.0 unit (gap-lg) */ --xs-space-8: 32px; /* 4.0 unit (gap-xl) */ --xs-space-10: 40px; --xs-space-12: 48px; /* 6.0 unit */ --xs-space-16: 64px; /* 8.0 unit */ /* Curvature Hierarchy (Affordance Standard: Static <= 2px vs Interactive 6~8px) */ --xs-radius-static: 2px; /* 정적 카드/패널 */ --xs-radius-xs: 4px; --xs-radius-sm: 6px; --xs-radius-md: 8px; /* 버튼 및 인터랙티브 컨트롤 */ --xs-radius-lg: 12px; /* 모달 컨테이너 */ --xs-radius-xl: 16px; --xs-radius-pill: 9999px; /* 캡슐 알약 버튼 */ /* Stroke Hierarchy Ratio (Ratio >= 2.0) */ --xs-stroke-grid: 0.5px; /* 도트/그리드 헤어라인 */ --xs-stroke-border: 1.0px; /* 구조 구획선 */ --xs-stroke-orbit: 2.5px; /* 인과 궤도선 (Ratio = 2.5 >= 2.0) */ /* ========================================================================== Responsive Breakpoints & Container Query Anchors ========================================================================== */ --xs-bp-sm: 640px; /* 모바일 뷰포트 */ --xs-bp-md: 768px; /* 태블릿 세로 */ --xs-bp-lg: 1024px; /* 태블릿 가로 / 소형 랩톱 */ --xs-bp-xl: 1280px; /* 데스크톱 표준 */ --xs-bp-2xl: 1536px; /* 대형 와이드 스크린 */ /* Fitts's Law Touch Targets (Per Environment) */ --xs-touch-target: 44px; /* 기본 터치 타겟 */ --xs-touch-target-mobile: 48px; /* 모바일 터치 타겟 (엄지손가락 인체공학) */ --xs-touch-target-tablet: 44px; /* 태블릿 터치 타겟 */ --xs-touch-target-desktop: 40px; /* 마우스 데스크톱 */ --xs-touch-action: manipulation; /* 300ms 더블탭 줌 딜레이 제거 */ --xs-overscroll-behavior: contain; /* 부모 스크롤 체이닝 방어 */ /* Hardware Safe-Area Insets (iOS Dynamic Island & Home Indicator) */ --xs-safe-top: env(safe-area-inset-top, 0px); --xs-safe-bottom: env(safe-area-inset-bottom, 0px); --xs-safe-left: env(safe-area-inset-left, 0px); --xs-safe-right: env(safe-area-inset-right, 0px); --xs-padding-safe-bottom: max(var(--xs-space-4), var(--xs-safe-bottom)); /* Dynamic Viewport Units (Mobile Browser Address Bar Defense) */ --xs-vh-dynamic: 100dvh; /* 가변 주소창 적응형 높이 */ --xs-vh-small: 100svh; /* 주소창 확장 시 최소 높이 */ --xs-vh-large: 100lvh; /* 주소창 축소 시 최대 높이 */ /* Dynamic Fluid Spacing & Padding */ --xs-padding-container: clamp(16px, 3vw, 40px); /* 컨테이너 유동 여백 */ --xs-gap-grid: clamp(12px, 2vw, 24px); /* 그리드 유동 간격 */ /* Viewport Dynamic CPL (Characters Per Line) */ --xs-cpl-mobile: 24ch; /* 18~32자 (모바일 빠른 수직 도약) */ --xs-cpl-slide: 38ch; /* 28~48자 (슬라이드 3초 직관 파악) */ --xs-cpl-desktop: 60ch; /* 40~75자 (데스크톱 지속 독서) */ /* ========================================================================== Relative Typography System (Root-relative rem · Modular Scale · Unitless lh) ========================================================================== */ --xs-font-sans: -apple-system, BlinkMacSystemFont, "Pretendard Variable", "Pretendard", -apple-system, sans-serif; --xs-font-mono: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "JetBrains Mono", monospace; --xs-font-serif: "Iowan Old Style", "Apple Garamond", "Baskerville", "Times New Roman", "Nanum Myeongjo", serif; /* Modular Type Scale Ratio (Minor Third = 1.200 / Perfect Fourth = 1.333) */ --xs-type-scale-ratio: 1.200; /* Relative Font Sizes (Root: 1rem = 16px) */ --xs-font-size-micro: 0.5625rem; /* 9px (실물 인쇄 각주 / 초미세 레이블) */ --xs-font-size-badge: 0.625rem; /* 10px (배지, 태그) */ --xs-font-size-caption: 0.6875rem; /* 11px (캡션, 보조 메타데이터) */ --xs-font-size-body-sm: 0.75rem; /* 12px (작은 본문, 툴팁, 폼 힌트) */ --xs-font-size-body: 0.8125rem; /* 13px (기본 시스템 본문) */ --xs-font-size-title: 0.875rem; /* 14px (서브헤딩, 카드 타이틀) */ --xs-font-size-h3: 0.9375rem; /* 15px (3차 표제) */ --xs-font-size-h2: 1rem; /* 16px (2차 표제 / 기준 1.0rem) */ --xs-font-size-h1: 1.25rem; /* 20px (1차 섹션 표제) */ --xs-font-size-display: 1.75rem; /* 28px (대형 디스플레이 표제) */ --xs-font-size-hero: 2.25rem; /* 36px (히어로 닻 표제) */ /* Relative Fluid Typography Clamps (Mobile -> Desktop Fluid Scaling) */ --xs-font-size-hero-fluid: clamp(1.75rem, 3.5vw + 1rem, 2.75rem); --xs-font-size-display-fluid: clamp(1.4rem, 2.5vw + 0.9rem, 2.0rem); --xs-font-size-h1-fluid: clamp(1.15rem, 1.5vw + 0.8rem, 1.45rem); --xs-font-size-h2-fluid: clamp(0.95rem, 0.8vw + 0.75rem, 1.15rem); --xs-font-size-body-fluid: clamp(0.8125rem, 0.35vw + 0.725rem, 0.875rem); /* Optimal Reading Characters Per Line (Rayner 1998 Saccade Research) */ --xs-cpl-min: 45ch; /* 최소 가독 폭 */ --xs-cpl-optimal: clamp(45ch, 65ch, 75ch); /* 최적 가독 폭 (65자 기준) */ --xs-cpl-max: 75ch; /* 최대 가독 한계선 */ --xs-measure-reading: 65ch; /* 1장면 표준 가독 폭 (45~75자 중심) */ /* Data Density Control Tokens (Compact Mode) */ --xs-density-compact: 0.75; /* 조밀 데이터 밀도 스케일 계수 */ --xs-density-pad-y: 6px; /* 조밀 테이블/리스트 수직 패딩 */ --xs-density-pad-x: 10px; /* 조밀 테이블/리스트 수평 패딩 */ --xs-density-gap: 6px; /* 조밀 액션/칩 간격 */ /* Relative Line Heights (Unitless Ratio for Optical Harmony) */ --xs-line-height-hero: 1.15; /* 초대형 표제 줄높이 */ --xs-line-height-display: 1.25; /* 디스플레이 표제 */ --xs-line-height-heading: 1.35; /* 일반 표제 */ --xs-line-height-title: 1.4; /* 서브헤딩 */ --xs-line-height-body: 1.6; /* 본문 표준 (WCAG AAA 가독성) */ --xs-line-height-tight: 1.25; /* 컴팩트 컨트롤 */ --xs-line-height-loose: 1.75; /* 출판 서술문 */ /* Relative Letter Spacings (em-based Optical Kerning) */ --xs-letter-spacing-tight: -0.025em; /* 대형 표제 응축 */ --xs-letter-spacing-heading: -0.018em; /* 일반 표제 */ --xs-letter-spacing-body: -0.010em; /* 한글/영문 본문 미세 자간 */ --xs-letter-spacing-normal: 0em; /* 고정폭 모노스페이스 */ --xs-letter-spacing-wide: 0.025em; /* 올캡스 배지 및 미세 레이블 */ /* Relative Spacing Scale (rem-based) */ --xs-space-0: 0rem; --xs-space-1: 0.25rem; /* 4px */ --xs-space-2: 0.5rem; /* 8px (기본 1 그리드 유닛) */ --xs-space-3: 0.75rem; /* 12px */ --xs-space-4: 1.0rem; /* 16px */ --xs-space-5: 1.25rem; /* 20px */ --xs-space-6: 1.5rem; /* 24px */ --xs-space-8: 2.0rem; /* 32px */ --xs-space-10: 2.5rem; /* 40px */ --xs-space-12: 3.0rem; /* 48px */ --xs-space-16: 4.0rem; /* 64px */ /* Elevation (No Neon, Matte Shadows) */ --xs-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --xs-shadow-card: 0 4px 12px -2px rgba(0, 0, 0, 0.05), 0 2px 4px -2px rgba(0, 0, 0, 0.02); --xs-shadow-spotlight: 0 20px 40px -10px rgba(15, 23, 42, 0.15); } /* Backward compatibility aliases */ :root { --bg-canvas: var(--xs-bg-canvas); --bg-surface: var(--xs-bg-surface); --bg-subtle: var(--xs-bg-subtle); --border-subtle: var(--xs-border-subtle); --border-strong: var(--xs-border-strong); --text-ink: var(--xs-text-ink); --text-body: var(--xs-text-body); --text-muted: var(--xs-text-muted); --text-soft: var(--xs-text-soft); --accent-navy: var(--xs-accent-navy); --accent-navy-hover: var(--xs-accent-navy-hover); --accent-navy-light: var(--xs-accent-navy-light); --accent-sage: var(--xs-accent-sage); --accent-sage-light: var(--xs-accent-sage-light); --accent-vermilion: var(--xs-accent-vermilion); --accent-vermilion-light: var(--xs-accent-vermilion-light); --accent-black: var(--xs-accent-black); --accent-black-hover: var(--xs-accent-black-hover); --space-1: var(--xs-space-1); --space-2: var(--xs-space-2); --space-3: var(--xs-space-3); --space-4: var(--xs-space-4); --space-6: var(--xs-space-6); --space-8: var(--xs-space-8); --space-12: var(--xs-space-12); --radius-sm: var(--xs-radius-sm); --radius-md: var(--xs-radius-md); --radius-lg: var(--xs-radius-lg); --radius-pill: var(--xs-radius-pill); --shadow-subtle: var(--xs-shadow-subtle); --shadow-card: var(--xs-shadow-card); --shadow-spotlight: var(--xs-shadow-spotlight); } /* ========================================================================== DARK MODE OVERRIDES & HARMONY (Data-theme & System Prefers) Strict Invariant: True Neutral Surfaces (ΔL >= 3%), APCA Lc 75+, Eye Comfort ========================================================================== */ [data-theme="dark"], [xs-env="dark"], .dark { --xs-bg-canvas: var(--xs-dark-bg-canvas, #0E0E10); --xs-bg-surface: var(--xs-dark-bg-surface, #16161A); --xs-bg-subtle: var(--xs-dark-bg-elevated, #1F1F24); --xs-bg-hover: #27272E; --xs-bg-active: #32323B; --xs-border-hairline: #1E1E24; --xs-border-subtle: var(--xs-dark-border, #2E2E35); --xs-border-strong: #3F3F4A; --xs-border-focus: #60A5FA; --xs-text-ink: var(--xs-dark-text-ink, #F4F4F6); --xs-text-body: #C4C4CC; --xs-text-muted: var(--xs-dark-text-muted, #8E8E98); --xs-text-soft: #63636E; --xs-text-inverse: #0F172A; /* Dark Mode Spot Color Accents (Desaturated for Dark APCA & Glare Defense) */ --xs-accent-navy: #60A5FA; /* 108:1 APCA High-Contrast Blue */ --xs-accent-navy-hover: #93C5FD; --xs-accent-navy-light: rgba(59, 130, 246, 0.15); /* 은은한 네이비 배경 */ --xs-accent-navy-border:rgba(96, 165, 250, 0.35); --xs-accent-sage: #4ADE80; /* 다크모드 고명도 세이지 */ --xs-accent-sage-hover: #86EFAC; --xs-accent-sage-light: rgba(34, 197, 94, 0.15); --xs-accent-sage-border:rgba(74, 222, 128, 0.35); --xs-accent-vermilion:#F87171; /* 다크모드 고명도 버밀리온 */ --xs-accent-vermilion-hover: #FCA5A5; --xs-accent-vermilion-light: rgba(239, 68, 68, 0.15); --xs-accent-vermilion-border:rgba(248, 113, 113, 0.35); --xs-accent-amber: #FBBF24; --xs-accent-amber-light: rgba(245, 158, 11, 0.15); --xs-accent-amber-border:rgba(251, 191, 36, 0.35); --xs-accent-black: #F4F4F6; --xs-accent-black-hover: #E2E8F0; /* Focus Visible (Dark APCA Ring) */ --xs-focus-ring-outer: #60A5FA; --xs-focus-ring-inner: #0E0E10; /* Elevation (Deep Matte Shadows) */ --xs-shadow-subtle: 0 1px 3px rgba(0, 0, 0, 0.3), 0 1px 2px rgba(0, 0, 0, 0.2); --xs-shadow-card: 0 4px 12px -2px rgba(0, 0, 0, 0.4), 0 2px 4px -2px rgba(0, 0, 0, 0.2); --xs-shadow-spotlight: 0 20px 40px -10px rgba(0, 0, 0, 0.6); /* Aliases sync */ --bg-canvas: var(--xs-bg-canvas); --bg-surface: var(--xs-bg-surface); --bg-subtle: var(--xs-bg-subtle); --border-subtle: var(--xs-border-subtle); --border-strong: var(--xs-border-strong); --text-ink: var(--xs-text-ink); --text-body: var(--xs-text-body); --text-muted: var(--xs-text-muted); --text-soft: var(--xs-text-soft); --accent-navy: var(--xs-accent-navy); --accent-navy-hover: var(--xs-accent-navy-hover); --accent-navy-light: var(--xs-accent-navy-light); --accent-sage: var(--xs-accent-sage); --accent-sage-light: var(--xs-accent-sage-light); --accent-vermilion: var(--xs-accent-vermilion); --accent-vermilion-light: var(--xs-accent-vermilion-light); /* Widget & Publication Dark Mode Sync */ --xs-widget-bg: var(--xs-bg-surface); --xs-widget-border: var(--xs-border-subtle); --xs-widget-header-bg: var(--xs-bg-subtle); --xs-pub-surface-page: var(--xs-bg-surface); --xs-pub-border-rule: var(--xs-border-subtle); --xs-pub-text-body: var(--xs-text-body); --xs-pub-text-annotation: var(--xs-text-muted); } /* System Auto Dark Mode (When not explicitly forced to light) */ @media (prefers-color-scheme: dark) { :root:not([data-theme="light"]):not([xs-env="light"]) { --xs-bg-canvas: var(--xs-dark-bg-canvas, #0E0E10); --xs-bg-surface: var(--xs-dark-bg-surface, #16161A); --xs-bg-subtle: var(--xs-dark-bg-elevated, #1F1F24); --xs-bg-hover: #27272E; --xs-bg-active: #32323B; --xs-border-hairline: #1E1E24; --xs-border-subtle: var(--xs-dark-border, #2E2E35); --xs-border-strong: #3F3F4A; --xs-border-focus: #60A5FA; --xs-text-ink: var(--xs-dark-text-ink, #F4F4F6); --xs-text-body: #C4C4CC; --xs-text-muted: var(--xs-dark-text-muted, #8E8E98); --xs-text-soft: #63636E; --xs-text-inverse: #0F172A; --xs-accent-navy: #60A5FA; --xs-accent-navy-hover: #93C5FD; --xs-accent-navy-light: rgba(59, 130, 246, 0.15); --xs-accent-navy-border:rgba(96, 165, 250, 0.35); --xs-accent-sage: #4ADE80; --xs-accent-sage-hover: #86EFAC; --xs-accent-sage-light: rgba(34, 197, 94, 0.15); --xs-accent-sage-border:rgba(74, 222, 128, 0.35); --xs-accent-vermilion:#F87171; --xs-accent-vermilion-hover: #FCA5A5; --xs-accent-vermilion-light: rgba(239, 68, 68, 0.15); --xs-accent-vermilion-border:rgba(248, 113, 113, 0.35); --xs-accent-amber: #FBBF24; --xs-accent-amber-light: rgba(245, 158, 11, 0.15); --xs-accent-amber-border:rgba(251, 191, 36, 0.35); --xs-focus-ring-outer: #60A5FA; --xs-focus-ring-inner: #0E0E10; --bg-canvas: var(--xs-bg-canvas); --bg-surface: var(--xs-bg-surface); --bg-subtle: var(--xs-bg-subtle); --border-subtle: var(--xs-border-subtle); --border-strong: var(--xs-border-strong); --text-ink: var(--xs-text-ink); --text-body: var(--xs-text-body); --text-muted: var(--xs-text-muted); --text-soft: var(--xs-text-soft); /* Widget & Publication Dark Mode Sync */ --xs-widget-bg: var(--xs-bg-surface); --xs-widget-border: var(--xs-border-subtle); --xs-widget-header-bg: var(--xs-bg-subtle); --xs-pub-surface-page: var(--xs-bg-surface); --xs-pub-border-rule: var(--xs-border-subtle); --xs-pub-text-body: var(--xs-text-body); --xs-pub-text-annotation: var(--xs-text-muted); } } /* --- File: tokens-publication.css --- */ /** * xsDesignSystem — Physical Publication & Print Color Substrate Spec (v2.0.0) * W3C 3-Tier Publication Tokens: Paper Substrates, Print Inks (CMYK/Spot), Editorial Geometries, and @media print Invariants */ :root { /* ========================================================================== TIER 1: PUBLICATION PRIMITIVE TOKENS (물리적 지업 기질 및 잉크 원형) ========================================================================== */ /* [Paper Substrates / 지업 기질] */ --xs-pub-substrate-munken-pure: #F7F4EE; /* 몬켄 퓨어 / 아이보리 웜 미색 (Munken Pure 120g/150g) */ --xs-pub-substrate-munken-lynx: #FBF9F5; /* 몬켄 링스 / 내추럴 화이트 미색 (Munken Lynx) */ --xs-pub-substrate-woodfree-warm: #FAF8F2; /* 미색 모조지 / 서적 본문지 (Uncoated Woodfree 80g/100g) */ --xs-pub-substrate-woodfree-white: #FFFFFF; /* 백상지 / 순백 비도공지 (Pure White Woodfree) */ --xs-pub-substrate-kraft-light: #E4D8C8; /* 천연 크라프트지 연한 톤 (Unbleached Kraft Paper) */ --xs-pub-substrate-kraft-raw: #CCA888; /* 내추럴 하드보드 / 소포지 (Raw Board Stock) */ --xs-pub-substrate-hanji-warm: #F4EFE6; /* 전통 닥종이 / 한지 결 톤 (Korean Mulberry Hanji) */ --xs-pub-substrate-bookcloth-sand: #EBE5DA; /* 양장본 능포 / 리넨 샌드 톤 (Linen Bookcloth) */ --xs-pub-substrate-bookcloth-charcoal:#2B2927; /* 양장본 흑포 / 차콜 패브릭 (Charcoal Cloth) */ /* [Print Inks & Pigments / 인쇄 잉크 및 피그먼트 (CMYK & Spot Mapping)] */ --xs-pub-ink-rich-black: #090B0E; /* 4도 중첩 리치 블랙 (C60 M40 Y40 K100, 깊은 먹) */ --xs-pub-ink-pure-black: #121314; /* 1도 단색 퓨어 블랙 (K100, 활자 전용 순수 먹) */ --xs-pub-ink-warm-black: #1C1917; /* 웜 블랙 / 유성 잉크 톤 (Warm Carbon Black) */ --xs-pub-ink-indigo: #182B49; /* 군청 잉크 / 만년필 블루블랙 (C90 M70 Y30 K45) */ --xs-pub-ink-vermilion-seal: #C9381F; /* 낙관 주홍 / 인주 스팟 (C0 M85 Y90 K0) */ --xs-pub-ink-verdigris: #26594B; /* 송록 / 청록 잉크 (C80 M20 Y60 K35) */ --xs-pub-ink-raw-umber: #7A4B2A; /* 석간주 / 생황토 (C25 M60 Y85 K20) */ --xs-pub-ink-halftone-gray: #71717A; /* 하프톤 50% 스크린 (K50 Tint) */ --xs-pub-ink-ghost-grid: #E4E4E7; /* 10% 베이스라인 방안 괘선 (K10 Guide Line) */ /* ========================================================================== TIER 2: PUBLICATION SEMANTIC TOKENS (출판 목적 및 조판 시맨틱 계층) ========================================================================== */ /* Editorial Surfaces */ --xs-pub-surface-page: var(--xs-pub-substrate-munken-pure); --xs-pub-surface-card: #FFFFFF; --xs-pub-surface-plate: var(--xs-pub-substrate-woodfree-warm); --xs-pub-surface-inset: var(--xs-pub-substrate-hanji-warm); --xs-pub-border-rule: #DCD7CD; --xs-pub-border-heavy: var(--xs-pub-ink-rich-black); --xs-pub-border-guide: var(--xs-pub-ink-ghost-grid); /* Editorial Typography Colors */ --xs-pub-text-title: var(--xs-pub-ink-rich-black); --xs-pub-text-body: var(--xs-pub-ink-pure-black); --xs-pub-text-annotation: var(--xs-pub-ink-warm-black); --xs-pub-text-running-head: var(--xs-pub-ink-halftone-gray); --xs-pub-text-seal: var(--xs-pub-ink-vermilion-seal); /* Physical Print Geometry & Metrics (ISO / Korean Standard Formats) */ --xs-pub-format-crown-octavo-w: 152mm; /* 신국판 (152 × 225 mm) */ --xs-pub-format-crown-octavo-h: 225mm; --xs-pub-format-a5-w: 148mm; /* 국판 A5 (148 × 210 mm) */ --xs-pub-format-a5-h: 210mm; --xs-pub-format-b5-w: 182mm; /* 사륙배판 B5 (182 × 257 mm) */ --xs-pub-format-b5-h: 257mm; --xs-pub-format-a4-w: 210mm; /* 국배판 A4 (210 × 297 mm) */ --xs-pub-format-a4-h: 297mm; /* Print Margins & Bleed Invariants */ --xs-pub-bleed: 3mm; /* 3mm 도련 여백 */ --xs-pub-margin-inner: 22mm; /* 안쪽 여백 (제본/스파인 여유 공간) */ --xs-pub-margin-outer: 18mm; /* 바깥쪽 여백 */ --xs-pub-margin-top: 20mm; /* 상단 여백 (두목) */ --xs-pub-margin-bottom: 24mm; /* 하단 여백 (지각/판심) */ --xs-pub-spine-unit: 0.055mm;/* 평량 80g 기준 페이지당 두께 팩터 */ /* Leading & Baseline Typographic Grid */ --xs-pub-baseline-unit: 8px; /* 8pt 인쇄 베이스라인 리듬 */ --xs-pub-leading-tight: 1.35; /* 표제/캡션 행간 */ --xs-pub-leading-body: 1.65; /* 본문 황금 행간 (CJK 가독 최적) */ --xs-pub-leading-relaxed: 1.85; /* 주석/해설 행간 */ --xs-pub-cjk-tracking: -0.03em;/* 한글 전각/반각 자간 긴밀화 */ /* ========================================================================== TIER 3: COMPONENT / WIDGET TOKENS (모듈형 위젯 전용 토큰) ========================================================================== */ --xs-widget-bg: #FFFFFF; --xs-widget-border: #E2E8F0; --xs-widget-radius: 4px; /* 인쇄 지면의 절제된 엣지 (Zero-AI) */ --xs-widget-shadow: 0 1px 3px rgba(0, 0, 0, 0.04), 0 1px 2px rgba(0, 0, 0, 0.02); --xs-widget-header-bg: #F8FAFC; --xs-widget-accent-stripe: var(--xs-pub-ink-indigo); --xs-widget-colophon-seal-size: 48px; --xs-widget-swatch-size: 32px; } /* ========================================================================== PRINT MEDIA CONTRACT (@media print & @page Invariants) ========================================================================== */ @media print { @page { margin: 20mm 18mm 24mm 22mm; size: auto; } body { background: #FFFFFF !important; color: var(--xs-pub-ink-pure-black) !important; font-size: 10pt !important; line-height: var(--xs-pub-leading-body) !important; -webkit-print-color-adjust: exact !important; print-color-adjust: exact !important; } .xs-no-print, .carbon-skip-link, .xs-screen-only { display: none !important; } .xs-widget { break-inside: avoid; box-shadow: none !important; border: 1px solid var(--xs-pub-border-rule) !important; page-break-inside: avoid; } .xs-widget-colophon { page-break-before: always; } } /* --- File: tokens-harmonies.css --- */ /** * xsDesignSystem — 12 Curated Modular Color Harmonies & W3C Token Bridge (v2.1.0) * * - Coupled 1:1 with W3C 3-Tier Design Tokens (Primitive -> Semantic -> Component & Material) * - Apply via `data-xs-harmony=""` on `:root`, `body`, `.xs-system`, or `.xs-shell` * - Strict Invariants: APCA Lc >= 75 (WCAG AAA 12:1+), Spot Color <= 3.0%, Zero Neon Slop ($I_{ai} == 0.0$) */ :root { /* ========================================================================== 1. SWISS MINIMAL (스위스 모더니즘 코발트) ========================================================================== */ --xs-harmony-swiss-bg-canvas: #F8FAFC; --xs-harmony-swiss-bg-surface: #FFFFFF; --xs-harmony-swiss-bg-subtle: #EEF2F6; --xs-harmony-swiss-text-ink: #0F172A; --xs-harmony-swiss-text-body: #1E293B; --xs-harmony-swiss-text-muted: #64748B; --xs-harmony-swiss-border: #E2E8F0; --xs-harmony-swiss-border-strong: #CBD5E1; --xs-harmony-swiss-spot-primary: #2563EB; --xs-harmony-swiss-spot-subtle: #EFF6FF; /* ========================================================================== 2. BRAUN FUNCTIONALIST (브라운 디터 람스 기능주의) ========================================================================== */ --xs-harmony-braun-bg-canvas: #F4F4F6; --xs-harmony-braun-bg-surface: #FFFFFF; --xs-harmony-braun-bg-subtle: #E8E8ED; --xs-harmony-braun-text-ink: #1D1D1F; --xs-harmony-braun-text-body: #2C2C2E; --xs-harmony-braun-text-muted: #6E6E73; --xs-harmony-braun-border: #D2D2D7; --xs-harmony-braun-border-strong: #AEAEB2; --xs-harmony-braun-spot-primary: #EA580C; --xs-harmony-braun-spot-subtle: #FFF7ED; /* ========================================================================== 3. BAUHAUS PRIMARY STRUCTURE (바우하우스 구조주의) ========================================================================== */ --xs-harmony-bauhaus-bg-canvas: #FAF8F5; --xs-harmony-bauhaus-bg-surface: #FFFFFF; --xs-harmony-bauhaus-bg-subtle: #F0ECE3; --xs-harmony-bauhaus-text-ink: #18181B; --xs-harmony-bauhaus-text-body: #27272A; --xs-harmony-bauhaus-text-muted: #71717A; --xs-harmony-bauhaus-border: #E4E4E7; --xs-harmony-bauhaus-border-strong:#D4D4D8; --xs-harmony-bauhaus-spot-primary: #DC2626; --xs-harmony-bauhaus-spot-second: #1E3A8A; /* ========================================================================== 4. HAEGYUNG ATMOSPHERIC HANJI (해경 전통 닥종이 & 청록) ========================================================================== */ --xs-harmony-haegyung-bg-canvas: #F9F6F0; --xs-harmony-haegyung-bg-surface: #FFFEFC; --xs-harmony-haegyung-bg-subtle: #EFECE4; --xs-harmony-haegyung-text-ink: #18181B; --xs-harmony-haegyung-text-body: #292524; --xs-harmony-haegyung-text-muted: #786B5E; --xs-harmony-haegyung-border: #E2DDD5; --xs-harmony-haegyung-border-strong:#CFC8BC; --xs-harmony-haegyung-spot-primary:#134E5E; --xs-harmony-haegyung-spot-seal: #B43D17; /* ========================================================================== 5. EDITORIAL CLASSIC INDIGO (클래식 도서 출판 몬켄지 & 만년필 인디고) ========================================================================== */ --xs-harmony-editorial-bg-canvas: #F7F4EE; --xs-harmony-editorial-bg-surface: #FFFFFF; --xs-harmony-editorial-bg-subtle: #ECE7DF; --xs-harmony-editorial-text-ink: #090B0E; --xs-harmony-editorial-text-body: #1C1917; --xs-harmony-editorial-text-muted: #71717A; --xs-harmony-editorial-border: #DCD7CD; --xs-harmony-editorial-border-strong:#C7C0B3; --xs-harmony-editorial-spot-primary:#182B49; --xs-harmony-editorial-spot-seal: #C9381F; /* ========================================================================== 6. KYOTO MOSS & HINOKI (교토 이끼 정원과 편백나무 자연색) ========================================================================== */ --xs-harmony-kyoto-bg-canvas: #F4F3EE; --xs-harmony-kyoto-bg-surface: #FCFBF8; --xs-harmony-kyoto-bg-subtle: #E7E5DC; --xs-harmony-kyoto-text-ink: #141A16; --xs-harmony-kyoto-text-body: #232B25; --xs-harmony-kyoto-text-muted: #5C665E; --xs-harmony-kyoto-border: #D8D6CC; --xs-harmony-kyoto-border-strong: #BFC0B4; --xs-harmony-kyoto-spot-primary: #1E4D2B; --xs-harmony-kyoto-spot-subtle: #ECFDF3; /* ========================================================================== 7. NORDIC BIRCH & FJORD (노르딕 자작나무 리넨과 피오르 블루) ========================================================================== */ --xs-harmony-nordic-bg-canvas: #F6F5F2; --xs-harmony-nordic-bg-surface: #FFFFFF; --xs-harmony-nordic-bg-subtle: #EAE8E3; --xs-harmony-nordic-text-ink: #181B20; --xs-harmony-nordic-text-body: #2B303A; --xs-harmony-nordic-text-muted: #646B78; --xs-harmony-nordic-border: #DDDAD3; --xs-harmony-nordic-border-strong: #C5C1B8; --xs-harmony-nordic-spot-primary: #1E3F5A; --xs-harmony-nordic-spot-subtle: #F0F7FF; /* ========================================================================== 8. SAHARA TRAVERTINE & TERRACOTTA (지중해 석회암과 테라코타 토기) ========================================================================== */ --xs-harmony-terracotta-bg-canvas: #F7F2EB; --xs-harmony-terracotta-bg-surface:#FFFDF9; --xs-harmony-terracotta-bg-subtle: #EDE5DA; --xs-harmony-terracotta-text-ink: #1C1512; --xs-harmony-terracotta-text-body: #332722; --xs-harmony-terracotta-text-muted: #786459; --xs-harmony-terracotta-border: #E2D7C8; --xs-harmony-terracotta-border-strong:#CCBCAF; --xs-harmony-terracotta-spot-primary:#B83B1B; --xs-harmony-terracotta-spot-subtle:#FEF2F2; /* ========================================================================== 9. GORYEO CELADON & PORCELAIN (고려 비색 청자와 백자 유약) ========================================================================== */ --xs-harmony-celadon-bg-canvas: #F1F5F3; --xs-harmony-celadon-bg-surface: #FAFCFB; --xs-harmony-celadon-bg-subtle: #E3ECE8; --xs-harmony-celadon-text-ink: #111917; --xs-harmony-celadon-text-body: #202E2A; --xs-harmony-celadon-text-muted: #596E68; --xs-harmony-celadon-border: #D3E0DA; --xs-harmony-celadon-border-strong:#B8CCC3; --xs-harmony-celadon-spot-primary: #115E59; --xs-harmony-celadon-spot-subtle: #F0FDFA; /* ========================================================================== 10. ALPINE GLACIER DAYLIGHT (알프스 빙하 자연광과 보로실리케이트 유리) ========================================================================== */ --xs-harmony-glacier-bg-canvas: #F0F6FA; --xs-harmony-glacier-bg-surface: #FFFFFF; --xs-harmony-glacier-bg-subtle: #E1EDF5; --xs-harmony-glacier-text-ink: #0C1524; --xs-harmony-glacier-text-body: #1E2D40; --xs-harmony-glacier-text-muted: #5B708B; --xs-harmony-glacier-border: #D4E2EE; --xs-harmony-glacier-border-strong:#B8CFE2; --xs-harmony-glacier-spot-primary: #1D4ED8; --xs-harmony-glacier-spot-subtle: #EFF6FF; /* ========================================================================== 11. TECHNICAL DARK SLATE (정밀 엔지니어링 흑연 다크) ========================================================================== */ --xs-harmony-techdark-bg-canvas: #0B0F17; --xs-harmony-techdark-bg-surface: #111827; --xs-harmony-techdark-bg-subtle: #080B11; --xs-harmony-techdark-text-ink: #F8FAFC; --xs-harmony-techdark-text-body: #E2E8F0; --xs-harmony-techdark-text-muted: #94A3B8; --xs-harmony-techdark-border: #1F2937; --xs-harmony-techdark-border-strong:#374151; --xs-harmony-techdark-spot-primary:#38BDF8; --xs-harmony-techdark-spot-subtle: #082F49; /* ========================================================================== 12. OBSIDIAN VOLCANIC & AMBER (흑요석 현무암과 웜 앰버 다크) ========================================================================== */ --xs-harmony-obsidian-bg-canvas: #0E0D0B; --xs-harmony-obsidian-bg-surface: #171512; --xs-harmony-obsidian-bg-subtle: #090807; --xs-harmony-obsidian-text-ink: #F5F2EB; --xs-harmony-obsidian-text-body: #E6E1D6; --xs-harmony-obsidian-text-muted: #A39B8B; --xs-harmony-obsidian-border: #292520; --xs-harmony-obsidian-border-strong:#3D372F; --xs-harmony-obsidian-spot-primary:#F59E0B; --xs-harmony-obsidian-spot-subtle: #291D06; } /* ========================================================================== MODULAR W3C SEMANTIC TOKEN BRIDGE ([data-xs-harmony="..."]) Applying `data-xs-harmony` to any scope (:root, body, .xs-system, .xs-shell) automatically rebinds Semantic & Component tokens + Glass tints. ========================================================================== */ [data-xs-harmony="swiss"] { --xs-bg-canvas: var(--xs-harmony-swiss-bg-canvas); --xs-bg-surface: var(--xs-harmony-swiss-bg-surface); --xs-bg-subtle: var(--xs-harmony-swiss-bg-subtle); --xs-text-ink: var(--xs-harmony-swiss-text-ink); --xs-text-body: var(--xs-harmony-swiss-text-body); --xs-text-muted: var(--xs-harmony-swiss-text-muted); --xs-border-subtle: var(--xs-harmony-swiss-border); --xs-border-strong: var(--xs-harmony-swiss-border-strong); --xs-accent-navy: var(--xs-harmony-swiss-spot-primary); --xs-accent-navy-light: rgba(37, 99, 235, 0.10); --xs-glass-regular-bg: rgba(248, 250, 252, 0.78); --xs-glass-thick-bg: rgba(255, 255, 255, 0.90); } [data-xs-harmony="braun"] { --xs-bg-canvas: var(--xs-harmony-braun-bg-canvas); --xs-bg-surface: var(--xs-harmony-braun-bg-surface); --xs-bg-subtle: var(--xs-harmony-braun-bg-subtle); --xs-text-ink: var(--xs-harmony-braun-text-ink); --xs-text-body: var(--xs-harmony-braun-text-body); --xs-text-muted: var(--xs-harmony-braun-text-muted); --xs-border-subtle: var(--xs-harmony-braun-border); --xs-border-strong: var(--xs-harmony-braun-border-strong); --xs-accent-navy: var(--xs-harmony-braun-spot-primary); --xs-accent-navy-light: rgba(234, 88, 12, 0.12); --xs-glass-regular-bg: rgba(244, 244, 246, 0.80); --xs-glass-thick-bg: rgba(255, 255, 255, 0.92); } [data-xs-harmony="bauhaus"] { --xs-bg-canvas: var(--xs-harmony-bauhaus-bg-canvas); --xs-bg-surface: var(--xs-harmony-bauhaus-bg-surface); --xs-bg-subtle: var(--xs-harmony-bauhaus-bg-subtle); --xs-text-ink: var(--xs-harmony-bauhaus-text-ink); --xs-text-body: var(--xs-harmony-bauhaus-text-body); --xs-text-muted: var(--xs-harmony-bauhaus-text-muted); --xs-border-subtle: var(--xs-harmony-bauhaus-border); --xs-border-strong: var(--xs-harmony-bauhaus-border-strong); --xs-accent-navy: var(--xs-harmony-bauhaus-spot-primary); --xs-accent-navy-light: rgba(220, 38, 38, 0.10); --xs-glass-regular-bg: rgba(250, 248, 245, 0.80); --xs-glass-thick-bg: rgba(255, 255, 255, 0.92); } [data-xs-harmony="haegyung"] { --xs-bg-canvas: var(--xs-harmony-haegyung-bg-canvas); --xs-bg-surface: var(--xs-harmony-haegyung-bg-surface); --xs-bg-subtle: var(--xs-harmony-haegyung-bg-subtle); --xs-text-ink: var(--xs-harmony-haegyung-text-ink); --xs-text-body: var(--xs-harmony-haegyung-text-body); --xs-text-muted: var(--xs-harmony-haegyung-text-muted); --xs-border-subtle: var(--xs-harmony-haegyung-border); --xs-border-strong: var(--xs-harmony-haegyung-border-strong); --xs-accent-navy: var(--xs-harmony-haegyung-spot-primary); --xs-accent-navy-light: rgba(19, 78, 94, 0.11); --xs-glass-regular-bg: rgba(249, 246, 240, 0.80); --xs-glass-thick-bg: rgba(255, 254, 252, 0.92); } [data-xs-harmony="editorial"] { --xs-bg-canvas: var(--xs-harmony-editorial-bg-canvas); --xs-bg-surface: var(--xs-harmony-editorial-bg-surface); --xs-bg-subtle: var(--xs-harmony-editorial-bg-subtle); --xs-text-ink: var(--xs-harmony-editorial-text-ink); --xs-text-body: var(--xs-harmony-editorial-text-body); --xs-text-muted: var(--xs-harmony-editorial-text-muted); --xs-border-subtle: var(--xs-harmony-editorial-border); --xs-border-strong: var(--xs-harmony-editorial-border-strong); --xs-accent-navy: var(--xs-harmony-editorial-spot-primary); --xs-accent-navy-light: rgba(24, 43, 73, 0.10); --xs-glass-regular-bg: rgba(247, 244, 238, 0.82); --xs-glass-thick-bg: rgba(255, 255, 255, 0.92); } [data-xs-harmony="kyoto"] { --xs-bg-canvas: var(--xs-harmony-kyoto-bg-canvas); --xs-bg-surface: var(--xs-harmony-kyoto-bg-surface); --xs-bg-subtle: var(--xs-harmony-kyoto-bg-subtle); --xs-text-ink: var(--xs-harmony-kyoto-text-ink); --xs-text-body: var(--xs-harmony-kyoto-text-body); --xs-text-muted: var(--xs-harmony-kyoto-text-muted); --xs-border-subtle: var(--xs-harmony-kyoto-border); --xs-border-strong: var(--xs-harmony-kyoto-border-strong); --xs-accent-navy: var(--xs-harmony-kyoto-spot-primary); --xs-accent-navy-light: rgba(30, 77, 43, 0.11); --xs-glass-regular-bg: rgba(244, 243, 238, 0.80); --xs-glass-thick-bg: rgba(252, 251, 248, 0.92); } [data-xs-harmony="nordic"] { --xs-bg-canvas: var(--xs-harmony-nordic-bg-canvas); --xs-bg-surface: var(--xs-harmony-nordic-bg-surface); --xs-bg-subtle: var(--xs-harmony-nordic-bg-subtle); --xs-text-ink: var(--xs-harmony-nordic-text-ink); --xs-text-body: var(--xs-harmony-nordic-text-body); --xs-text-muted: var(--xs-harmony-nordic-text-muted); --xs-border-subtle: var(--xs-harmony-nordic-border); --xs-border-strong: var(--xs-harmony-nordic-border-strong); --xs-accent-navy: var(--xs-harmony-nordic-spot-primary); --xs-accent-navy-light: rgba(30, 63, 90, 0.11); --xs-glass-regular-bg: rgba(246, 245, 242, 0.80); --xs-glass-thick-bg: rgba(255, 255, 255, 0.92); } [data-xs-harmony="terracotta"] { --xs-bg-canvas: var(--xs-harmony-terracotta-bg-canvas); --xs-bg-surface: var(--xs-harmony-terracotta-bg-surface); --xs-bg-subtle: var(--xs-harmony-terracotta-bg-subtle); --xs-text-ink: var(--xs-harmony-terracotta-text-ink); --xs-text-body: var(--xs-harmony-terracotta-text-body); --xs-text-muted: var(--xs-harmony-terracotta-text-muted); --xs-border-subtle: var(--xs-harmony-terracotta-border); --xs-border-strong: var(--xs-harmony-terracotta-border-strong); --xs-accent-navy: var(--xs-harmony-terracotta-spot-primary); --xs-accent-navy-light: rgba(184, 59, 27, 0.11); --xs-glass-regular-bg: rgba(247, 242, 235, 0.80); --xs-glass-thick-bg: rgba(255, 253, 249, 0.92); } [data-xs-harmony="celadon"] { --xs-bg-canvas: var(--xs-harmony-celadon-bg-canvas); --xs-bg-surface: var(--xs-harmony-celadon-bg-surface); --xs-bg-subtle: var(--xs-harmony-celadon-bg-subtle); --xs-text-ink: var(--xs-harmony-celadon-text-ink); --xs-text-body: var(--xs-harmony-celadon-text-body); --xs-text-muted: var(--xs-harmony-celadon-text-muted); --xs-border-subtle: var(--xs-harmony-celadon-border); --xs-border-strong: var(--xs-harmony-celadon-border-strong); --xs-accent-navy: var(--xs-harmony-celadon-spot-primary); --xs-accent-navy-light: rgba(17, 94, 89, 0.11); --xs-glass-regular-bg: rgba(241, 245, 243, 0.80); --xs-glass-thick-bg: rgba(250, 252, 251, 0.92); } [data-xs-harmony="glacier"] { --xs-bg-canvas: var(--xs-harmony-glacier-bg-canvas); --xs-bg-surface: var(--xs-harmony-glacier-bg-surface); --xs-bg-subtle: var(--xs-harmony-glacier-bg-subtle); --xs-text-ink: var(--xs-harmony-glacier-text-ink); --xs-text-body: var(--xs-harmony-glacier-text-body); --xs-text-muted: var(--xs-harmony-glacier-text-muted); --xs-border-subtle: var(--xs-harmony-glacier-border); --xs-border-strong: var(--xs-harmony-glacier-border-strong); --xs-accent-navy: var(--xs-harmony-glacier-spot-primary); --xs-accent-navy-light: rgba(29, 78, 216, 0.11); --xs-glass-regular-bg: rgba(240, 246, 250, 0.78); --xs-glass-thick-bg: rgba(255, 255, 255, 0.90); } [data-xs-harmony="techdark"] { --xs-bg-canvas: var(--xs-harmony-techdark-bg-canvas); --xs-bg-surface: var(--xs-harmony-techdark-bg-surface); --xs-bg-subtle: var(--xs-harmony-techdark-bg-subtle); --xs-text-ink: var(--xs-harmony-techdark-text-ink); --xs-text-body: var(--xs-harmony-techdark-text-body); --xs-text-muted: var(--xs-harmony-techdark-text-muted); --xs-border-subtle: var(--xs-harmony-techdark-border); --xs-border-strong: var(--xs-harmony-techdark-border-strong); --xs-accent-navy: var(--xs-harmony-techdark-spot-primary); --xs-accent-navy-light: rgba(56, 189, 248, 0.14); --xs-glass-regular-bg: rgba(17, 24, 39, 0.78); --xs-glass-thick-bg: rgba(17, 24, 39, 0.90); --xs-glass-chrome-bg: linear-gradient(180deg, rgba(31, 41, 55, 0.86) 0%, rgba(17, 24, 39, 0.78) 100%); --xs-tactile-button-surface: linear-gradient(180deg, #1F2937 0%, #111827 100%); } [data-xs-harmony="obsidian"] { --xs-bg-canvas: var(--xs-harmony-obsidian-bg-canvas); --xs-bg-surface: var(--xs-harmony-obsidian-bg-surface); --xs-bg-subtle: var(--xs-harmony-obsidian-bg-subtle); --xs-text-ink: var(--xs-harmony-obsidian-text-ink); --xs-text-body: var(--xs-harmony-obsidian-text-body); --xs-text-muted: var(--xs-harmony-obsidian-text-muted); --xs-border-subtle: var(--xs-harmony-obsidian-border); --xs-border-strong: var(--xs-harmony-obsidian-border-strong); --xs-accent-navy: var(--xs-harmony-obsidian-spot-primary); --xs-accent-navy-light: rgba(245, 158, 11, 0.15); --xs-glass-regular-bg: rgba(23, 21, 18, 0.80); --xs-glass-thick-bg: rgba(23, 21, 18, 0.92); --xs-glass-chrome-bg: linear-gradient(180deg, rgba(41, 37, 32, 0.86) 0%, rgba(23, 21, 18, 0.78) 100%); --xs-tactile-button-surface: linear-gradient(180deg, #292520 0%, #171512 100%); } /* ========================================================================== MODULAR CROSS-COLOR SPOT ACCENT OVERRIDES ([data-xs-spot="..."]) Decouples primary action/spot accent from base canvas harmony while enforcing Spot Color Economy (<= 3.0%) and Dark-Polarity Perceptual Salience (ΔE00 >= 20). ========================================================================== */ [data-xs-spot="navy"] { --xs-accent-navy: #1E3A8A; --xs-accent-navy-light: rgba(30, 58, 138, 0.10); } [data-xs-spot="cobalt"] { --xs-accent-navy: #2563EB; --xs-accent-navy-light: rgba(37, 99, 235, 0.10); } [data-xs-spot="signal-orange"] { --xs-accent-navy: #EA580C; --xs-accent-navy-light: rgba(234, 88, 12, 0.12); } [data-xs-spot="vermilion"] { --xs-accent-navy: #DC2626; --xs-accent-navy-light: rgba(220, 38, 38, 0.10); } [data-xs-spot="petrol-teal"] { --xs-accent-navy: #134E5E; --xs-accent-navy-light: rgba(19, 78, 94, 0.11); } [data-xs-spot="celadon-jade"] { --xs-accent-navy: #115E59; --xs-accent-navy-light: rgba(17, 94, 89, 0.11); } [data-xs-spot="moss-green"] { --xs-accent-navy: #1E4D2B; --xs-accent-navy-light: rgba(30, 77, 43, 0.11); } [data-xs-spot="terracotta"] { --xs-accent-navy: #B83B1B; --xs-accent-navy-light: rgba(184, 59, 27, 0.11); } [data-xs-spot="amber-gold"] { --xs-accent-navy: #B45309; --xs-accent-navy-light: rgba(180, 83, 9, 0.12); } /* Dark-Polarity Spot Auto-Adaptation (ensures ΔE00 >= 20 against dark surfaces) */ [data-xs-harmony="techdark"][data-xs-spot="navy"], [data-xs-harmony="obsidian"][data-xs-spot="navy"] { --xs-accent-navy: #38BDF8; --xs-accent-navy-light: rgba(56, 189, 248, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="cobalt"], [data-xs-harmony="obsidian"][data-xs-spot="cobalt"] { --xs-accent-navy: #60A5FA; --xs-accent-navy-light: rgba(96, 165, 250, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="signal-orange"], [data-xs-harmony="obsidian"][data-xs-spot="signal-orange"] { --xs-accent-navy: #FB923C; --xs-accent-navy-light: rgba(251, 146, 60, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="vermilion"], [data-xs-harmony="obsidian"][data-xs-spot="vermilion"] { --xs-accent-navy: #F87171; --xs-accent-navy-light: rgba(248, 113, 113, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="petrol-teal"], [data-xs-harmony="obsidian"][data-xs-spot="petrol-teal"] { --xs-accent-navy: #2DD4BF; --xs-accent-navy-light: rgba(45, 212, 191, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="celadon-jade"], [data-xs-harmony="obsidian"][data-xs-spot="celadon-jade"] { --xs-accent-navy: #34D399; --xs-accent-navy-light: rgba(52, 211, 153, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="moss-green"], [data-xs-harmony="obsidian"][data-xs-spot="moss-green"] { --xs-accent-navy: #4ADE80; --xs-accent-navy-light: rgba(74, 222, 128, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="terracotta"], [data-xs-harmony="obsidian"][data-xs-spot="terracotta"] { --xs-accent-navy: #FB7185; --xs-accent-navy-light: rgba(251, 113, 133, 0.15); } [data-xs-harmony="techdark"][data-xs-spot="amber-gold"], [data-xs-harmony="obsidian"][data-xs-spot="amber-gold"] { --xs-accent-navy: #F59E0B; --xs-accent-navy-light: rgba(245, 158, 11, 0.15); } /* --- File: themes.css --- */ /** * xsDesignSystem — Chat Workspace Theme Set * Reference direction: calm desktop workspace with a persistent rail, * generous stage, and a docked conversation surface. * No product branding or copied UI strings. Existing themes remain untouched. */ :root[data-xs-theme="chat-workspace"], :root[data-xs-theme="chat-workspace-paper"], .xs-chat-workspace[data-xs-theme="chat-workspace"], .xs-chat-workspace[data-xs-theme="chat-workspace-paper"] { --xs-chat-canvas: #f7f7f8; --xs-chat-rail: #f1f1f2; --xs-chat-stage: #ffffff; --xs-chat-dock: #fbfbfc; --xs-chat-border: #e5e5e7; --xs-chat-border-strong: #d5d5d8; --xs-chat-ink: #202123; --xs-chat-body: #4a4b50; --xs-chat-muted: #74757b; --xs-chat-soft: #9b9ca2; --xs-chat-accent: #2f6feb; --xs-chat-accent-ink: #174ea6; --xs-chat-accent-soft: #eaf1ff; --xs-chat-danger: #b42318; --xs-chat-composer: #ffffff; --xs-chat-shadow-dock: 0 8px 24px rgba(32, 33, 35, 0.06); --xs-chat-radius-panel: 18px; --xs-chat-radius-control: 10px; --xs-chat-rail-width: 56px; --xs-chat-dock-width: min(38vw, 520px); } :root[data-xs-theme="chat-workspace-graphite"], .xs-chat-workspace[data-xs-theme="chat-workspace-graphite"] { --xs-chat-canvas: #202123; --xs-chat-rail: #18191a; --xs-chat-stage: #252627; --xs-chat-dock: #202123; --xs-chat-border: #3a3b3e; --xs-chat-border-strong: #505156; --xs-chat-ink: #f2f2f3; --xs-chat-body: #d0d0d3; --xs-chat-muted: #a1a2a7; --xs-chat-soft: #77787d; --xs-chat-accent: #8ab4f8; --xs-chat-accent-ink: #c7dcff; --xs-chat-accent-soft: #293b5c; --xs-chat-danger: #ffb4ab; --xs-chat-composer: #2c2d2f; --xs-chat-shadow-dock: 0 8px 24px rgba(0, 0, 0, 0.24); } :root[data-xs-theme="chat-workspace-charcoal"], :root[data-theme="chatgpt-dark"], .xs-chat-workspace[data-xs-theme="chat-workspace-charcoal"] { --xs-chat-canvas: #17181c; --xs-chat-rail: #141416; --xs-chat-explorer: #1a1b1e; --xs-chat-stage: #212124; --xs-chat-surface-elevated: #2a2b30; --xs-chat-dock: #17181c; --xs-chat-border: #2a2b30; --xs-chat-border-subtle: #333438; --xs-chat-border-strong: #44454b; --xs-chat-ink: #f1f5f9; --xs-chat-body: #d1d5db; --xs-chat-muted: #9ca3af; --xs-chat-soft: #6b7280; --xs-chat-accent: #38bdf8; --xs-chat-accent-ink: #e0f2fe; --xs-chat-accent-soft: rgba(56, 189, 248, 0.15); --xs-chat-accent-amber: #f59e0b; --xs-chat-accent-emerald: #22c55e; --xs-chat-accent-purple: #c084fc; --xs-chat-danger: #ef4444; --xs-chat-composer: #2a2b30; --xs-chat-shadow-dock: 0 8px 24px rgba(0, 0, 0, 0.4); --xs-chat-radius-panel: 12px; --xs-chat-radius-control: 6px; --xs-chat-rail-width: 54px; --xs-chat-explorer-width: 240px; --xs-chat-dock-width: min(38vw, 520px); } /* Keep the family opt-in. The existing xsDesignSystem canvas remains the default. */ [data-xs-theme^="chat-workspace"], [data-xs-theme="standard-canvas"], [data-xs-theme="app-shell"], [data-xs-theme="editorial-publication"], [data-xs-theme="haegyung-hdls"] { color-scheme: light; } [data-xs-theme="chat-workspace-graphite"], [data-xs-theme="chat-workspace-charcoal"], [data-theme="chatgpt-dark"], [data-xs-harmony="techdark"], [data-xs-harmony="obsidian"] { color-scheme: dark; } /* ========================================================================== ORTHOGONAL THEME × COLOR HARMONY BRIDGE ([data-xs-theme][data-xs-harmony]) Allows any Structural Theme (chat-workspace-*, app-shell, editorial-publication, haegyung-hdls) to combine modularly with any of the 12 Color Harmonies and 9 Cross-Color Spot Accents without hardcoded hex collisions. ========================================================================== */ :root[data-xs-theme][data-xs-harmony], [data-xs-theme][data-xs-harmony], [data-xs-harmony] .xs-chat-workspace, .xs-chat-workspace[data-xs-harmony] { --xs-chat-canvas: var(--xs-bg-canvas); --xs-chat-rail: var(--xs-bg-subtle); --xs-chat-explorer: var(--xs-bg-subtle); --xs-chat-stage: var(--xs-bg-surface); --xs-chat-surface-elevated: var(--xs-bg-surface); --xs-chat-dock: var(--xs-bg-canvas); --xs-chat-border: var(--xs-border-subtle); --xs-chat-border-subtle: var(--xs-border-subtle); --xs-chat-border-strong: var(--xs-border-strong); --xs-chat-ink: var(--xs-text-ink); --xs-chat-body: var(--xs-text-body); --xs-chat-muted: var(--xs-text-muted); --xs-chat-accent: var(--xs-accent-navy); --xs-chat-accent-ink: var(--xs-accent-navy); --xs-chat-accent-soft: var(--xs-accent-navy-light, rgba(37, 99, 235, 0.12)); --xs-chat-composer: var(--xs-bg-surface); } /* --- File: components.css --- */ /** * xsDesignSystem — Component Library (v1.0.0) * Swiss Minimal & Zero-AI Governance Compliant * 12 Core Atomic & Molecular Components */ /* ========================================================================== 0. Base Layout & Reset ========================================================================== */ .xs-body, body.xs-theme { background-color: var(--xs-bg-canvas); color: var(--xs-text-ink); font-family: var(--xs-font-sans); margin: 0; padding: 0; -webkit-font-smoothing: antialiased; line-height: var(--xs-line-height-body); } .xs-container { max-width: 1360px; margin: 0 auto; padding: var(--xs-space-8) var(--xs-space-5); } /* Grid System */ .xs-grid { display: grid; grid-template-columns: repeat(12, 1fr); gap: var(--xs-space-6); margin-bottom: var(--xs-space-8); } .xs-col-12 { grid-column: span 12; } .xs-col-8 { grid-column: span 8; } .xs-col-6 { grid-column: span 6; } .xs-col-4 { grid-column: span 4; } .xs-col-3 { grid-column: span 3; } @media (max-width: 1024px) { .xs-col-8, .xs-col-6, .xs-col-4, .xs-col-3 { grid-column: span 12; } } /* Header Banner */ .xs-header { margin-bottom: var(--xs-space-8); border-bottom: 1px solid var(--xs-border-subtle); padding-bottom: var(--xs-space-5); } .xs-header-title { font-size: var(--xs-font-size-display); font-weight: var(--xs-font-weight-display); letter-spacing: var(--xs-letter-spacing-display); color: var(--xs-text-ink); margin-bottom: var(--xs-space-2); display: flex; align-items: center; gap: var(--xs-space-3); flex-wrap: wrap; } .xs-header-subtitle { font-size: var(--xs-font-size-title); color: var(--xs-text-muted); } /* Card Container */ .xs-card { background: var(--xs-bg-surface); border: 1px solid var(--xs-border-subtle); border-radius: var(--xs-radius-lg); padding: var(--xs-space-6); box-shadow: var(--xs-shadow-card); transition: transform var(--xs-transition-base), box-shadow var(--xs-transition-base); } .xs-card-title { font-size: var(--xs-font-size-title); font-weight: var(--xs-font-weight-title); letter-spacing: var(--xs-letter-spacing-title); color: var(--xs-text-ink); margin-bottom: var(--xs-space-4); display: flex; align-items: center; justify-content: space-between; } /* ========================================================================== 1. Badges, Pills & Currency Tokens ========================================================================== */ .xs-token-pill { font-size: var(--xs-font-size-badge); font-weight: var(--xs-font-weight-badge); font-family: var(--xs-font-mono); padding: 2px 8px; background: var(--xs-bg-subtle); color: var(--xs-text-muted); border-radius: var(--xs-radius-xs); border: 1px solid var(--xs-border-hairline); display: inline-flex; align-items: center; gap: 4px; } .xs-badge { font-size: var(--xs-font-size-caption); font-weight: 700; padding: 3px 8px; border-radius: var(--xs-radius-xs); display: inline-flex; align-items: center; gap: 4px; } .xs-badge-navy { color: var(--xs-accent-navy); background: var(--xs-accent-navy-light); border: 1px solid var(--xs-accent-navy-border); } .xs-badge-sage { color: var(--xs-accent-sage); background: var(--xs-accent-sage-light); border: 1px solid var(--xs-accent-sage-border); } .xs-badge-vermilion { color: var(--xs-accent-vermilion); background: var(--xs-accent-vermilion-light); border: 1px solid var(--xs-accent-vermilion-border); } .xs-badge-amber { color: var(--xs-accent-amber); background: var(--xs-accent-amber-light); border: 1px solid var(--xs-accent-amber-border); } /* Pure Korean Currency Token (GAP = 0) */ .xs-currency-pill { font-size: var(--xs-font-size-body); font-weight: 700; color: var(--xs-text-ink); background: var(--xs-bg-subtle); border: 1px solid var(--xs-border-subtle); padding: 4px 10px; border-radius: var(--xs-radius-sm); display: inline-flex; align-items: center; gap: 6px; } .xs-currency-pill strong { color: var(--xs-accent-navy); font-weight: 800; } /* ========================================================================== 2. Hero Anchor Card Component ========================================================================== */ .xs-hero-anchor { background: var(--xs-bg-surface); border: 1px solid var(--xs-border-subtle); border-radius: var(--xs-radius-md); padding: var(--xs-space-4) var(--xs-space-5); display: flex; justify-content: space-between; align-items: center; gap: var(--xs-space-4); box-shadow: var(--xs-shadow-subtle); } .xs-anchor-info { display: flex; flex-direction: column; gap: var(--xs-space-1); } .xs-anchor-tag-row { display: flex; align-items: center; gap: var(--xs-space-2); flex-wrap: wrap; } .xs-anchor-dday { font-size: var(--xs-font-size-caption); font-weight: 700; color: var(--xs-accent-vermilion); } .xs-anchor-title { font-size: var(--xs-font-size-h3); font-weight: 700; color: var(--xs-text-ink); letter-spacing: var(--xs-letter-spacing-heading, -0.018em); } .xs-anchor-subtext { font-size: var(--xs-font-size-body-sm); color: var(--xs-text-muted); line-height: var(--xs-line-height-body, 1.6); } /* ========================================================================== 3. 50:50 Deliberation Box (Cognitive Decision Split) ========================================================================== */ .xs-deliberation-box { border: 1px solid var(--xs-border-subtle); border-radius: var(--xs-radius-md); padding: var(--xs-space-4); background: var(--xs-bg-subtle); display: flex; flex-direction: column; gap: var(--xs-space-3); } .xs-delib-header { display: flex; justify-content: space-between; align-items: center; font-size: var(--xs-font-size-body-sm); font-weight: 600; color: var(--xs-text-ink); } .xs-delib-split { display: grid; grid-template-columns: 1fr 1fr; gap: var(--xs-space-3); } @media (max-width: 640px) { .xs-delib-split { grid-template-columns: 1fr; } } .xs-delib-side { background: var(--xs-bg-surface); border-radius: var(--xs-radius-sm); padding: var(--xs-space-3); border: 1px solid var(--xs-border-subtle); font-size: var(--xs-font-size-caption); line-height: 1.5; } .xs-delib-side.for, .xs-delib-side.xs-for { border-top: 3px solid var(--xs-accent-sage); } .xs-delib-side.against, .xs-delib-side.xs-against { border-top: 3px solid var(--xs-accent-vermilion); } .xs-delib-side-title { font-weight: 700; margin-bottom: var(--xs-space-1); } .xs-delib-side.for .xs-delib-side-title, .xs-delib-side.xs-for .xs-delib-side-title { color: var(--xs-accent-sage); } .xs-delib-side.against .xs-delib-side-title, .xs-delib-side.xs-against .xs-delib-side-title { color: var(--xs-accent-vermilion); } /* ========================================================================== 4. 3-Stratum Knowledge Chips (지식 3층 온톨로지) ========================================================================== */ .xs-stratum-group { display: flex; gap: var(--xs-space-2); flex-wrap: wrap; } .xs-stratum-chip { display: inline-flex; align-items: center; gap: 6px; background: var(--xs-bg-surface); border: 1px solid var(--xs-border-subtle); border-radius: var(--xs-radius-sm); padding: 6px 10px; font-size: var(--xs-font-size-caption); color: var(--xs-text-body); font-weight: 500; } .xs-stratum-chip .dot { width: 6px; height: 6px; border-radius: 50%; display: inline-block; } .xs-stratum-chip.s1 .dot, .xs-stratum-chip.xs-s1 .dot { background: var(--xs-accent-sage); } .xs-stratum-chip.s2 .dot, .xs-stratum-chip.xs-s2 .dot { background: var(--xs-accent-navy); } .xs-stratum-chip.s3 .dot, .xs-stratum-chip.xs-s3 .dot { background: var(--xs-accent-amber); } /* ========================================================================== 5. Buttons & Interactive Controls ========================================================================== */ .xs-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 12px; font-weight: 600; border-radius: var(--xs-radius-sm); border: 1px solid transparent; cursor: pointer; transition: all var(--xs-transition-fast); text-decoration: none; font-family: inherit; } .xs-btn-primary, .btn-focus, .xs-btn-focus { background: var(--xs-accent-navy); color: var(--xs-text-inverse); border: none; display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 12px; font-weight: 600; border-radius: var(--xs-radius-sm); cursor: pointer; transition: all var(--xs-transition-fast); font-family: inherit; } .xs-btn-primary:hover, .btn-focus:hover, .xs-btn-focus:hover { background: var(--xs-accent-navy-hover); } .xs-btn-secondary { background: var(--xs-bg-surface); color: var(--xs-text-body); border: 1px solid var(--xs-border-strong); } .xs-btn-secondary:hover { background: var(--xs-bg-subtle); color: var(--xs-text-ink); } .xs-btn-danger { background: var(--xs-accent-vermilion); color: var(--xs-text-inverse); } .xs-btn-danger:hover { background: var(--xs-accent-vermilion-hover); } .xs-btn-ghost { background: transparent; color: var(--xs-text-muted); border-color: transparent; } .xs-btn-ghost:hover { background: var(--xs-bg-subtle); color: var(--xs-text-ink); } /* Sovereign Book Gate Pill */ .xs-btn-pill, .book-btn { background-color: var(--xs-accent-black); color: var(--xs-text-inverse); border: none; border-radius: var(--xs-radius-pill); padding: 12px 28px; font-size: 13px; font-weight: 600; cursor: pointer; display: inline-flex; align-items: center; gap: 8px; transition: background-color var(--xs-transition-fast); } .xs-btn-pill:hover, .book-btn:hover { background-color: var(--xs-accent-black-hover); } /* Form Controls & HDLS / CDS Aliases */ .xs-input, .xs-select, .xs-textarea, .cds-input, .cds-select, .cds-textarea, .hg-textarea { font-family: inherit; font-size: var(--xs-font-size-body); color: var(--xs-text-ink); background: var(--xs-bg-surface); border: 1px solid var(--xs-border-subtle); border-radius: var(--xs-radius-sm); padding: 8px 12px; outline: none; transition: border-color var(--xs-transition-fast), box-shadow var(--xs-transition-fast); width: 100%; box-sizing: border-box; } .xs-input:focus, .xs-select:focus, .xs-textarea:focus, .cds-input:focus, .cds-select:focus, .cds-textarea:focus, .hg-textarea:focus { border-color: var(--xs-accent-navy); box-shadow: 0 0 0 2px var(--xs-accent-navy-light); } .cds-input-group { display: flex; flex-direction: column; gap: var(--xs-space-1); } .cds-label { font-size: var(--xs-font-size-caption); font-weight: 700; color: var(--xs-text-muted); letter-spacing: var(--xs-letter-spacing-wide); } /* HDLS Question Switcher Atom */ .hg-atom-switcher { background: var(--xs-bg-subtle); border: 1px solid var(--xs-border-subtle); border-left: 3px solid var(--xs-accent-navy); border-radius: var(--xs-radius-sm); padding: var(--xs-space-3) var(--xs-space-4); display: flex; flex-direction: column; gap: var(--xs-space-2); } .hg-atom-switcher__asis { font-size: var(--xs-font-size-caption); color: var(--xs-text-muted); text-decoration: line-through; transition: opacity 0.12s ease; } .hg-atom-switcher__tobe { font-size: var(--xs-font-size-body); font-weight: 700; color: var(--xs-text-ink); transition: opacity 0.12s ease; } .hg-atom-switcher__btn { align-self: flex-start; display: inline-flex; align-items: center; gap: 6px; padding: 4px 10px; font-size: var(--xs-font-size-caption); font-weight: 600; color: var(--xs-accent-navy); background: var(--xs-accent-navy-light); border: 1px solid var(--xs-accent-navy-border); border-radius: var(--xs-radius-xs); cursor: pointer; transition: all var(--xs-transition-fast); } .hg-atom-switcher__btn:hover { background: var(--xs-accent-navy); color: var(--xs-text-inverse); } /* CDS Button Compatibility */ .cds-btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; padding: 8px 16px; font-size: 12px; font-weight: 600; border-radius: var(--xs-radius-sm); border: 1px solid var(--xs-border-subtle); background: var(--xs-bg-surface); color: var(--xs-text-ink); cursor: pointer; transition: all var(--xs-transition-fast); } .cds-btn--primary { background: var(--xs-accent-navy); color: var(--xs-text-inverse); border-color: var(--xs-accent-navy); } .cds-btn--primary:hover { background: var(--xs-accent-navy-hover); } .cds-btn--secondary { background: var(--xs-bg-subtle); color: var(--xs-text-ink); border-color: var(--xs-border-strong); } .cds-btn--secondary:hover { background: var(--xs-bg-hover); } .cds-btn--ghost { background: transparent; color: var(--xs-text-body); border-color: transparent; } .cds-btn--ghost:hover { background: var(--xs-bg-subtle); color: var(--xs-text-ink); } .cds-btn--danger { background: var(--xs-accent-vermilion); color: var(--xs-text-inverse); border-color: var(--xs-accent-vermilion); } .cds-btn--danger:hover { background: var(--xs-accent-vermilion-hover); } /* ========================================================================== 6. Data Table & Verification Ledger ========================================================================== */ .xs-table, .carbon-data-table { width: 100%; border-collapse: collapse; font-size: var(--xs-font-size-body); text-align: left; } .xs-table th, .carbon-data-table th { padding: 10px 14px; background: var(--xs-bg-subtle); color: var(--xs-text-muted); font-weight: 600; font-size: var(--xs-font-size-caption); border-bottom: 1px solid var(--xs-border-subtle); } .xs-table td, .carbon-data-table td { padding: 12px 14px; border-bottom: 1px solid var(--xs-border-subtle); color: var(--xs-text-ink); } .xs-table tr:last-child td, .carbon-data-table tr:last-child td { border-bottom: none; } .xs-table tr:hover td, .carbon-data-table tr:hover td { background: var(--xs-bg-subtle); } /* ========================================================================== 7. Backward Compatibility Mapping Classes (vibenotes_* compatibility) ========================================================================== */ .hero-anchor-component { composes: xs-hero-anchor; } .anchor-info { composes: xs-anchor-info; } .anchor-tag-row { composes: xs-anchor-tag-row; } .anchor-badge { composes: xs-badge xs-badge-amber; } .anchor-dday { composes: xs-anchor-dday; } .anchor-title { composes: xs-anchor-title; } .anchor-subtext { composes: xs-anchor-subtext; } .deliberation-box { composes: xs-deliberation-box; } .delib-header { composes: xs-delib-header; } .delib-split { composes: xs-delib-split; } .delib-side { composes: xs-delib-side; } .delib-side-title { composes: xs-delib-side-title; } .stratum-group { composes: xs-stratum-group; } .stratum-chip { composes: xs-stratum-chip; } .currency-pill { composes: xs-currency-pill; } .token-pill { composes: xs-token-pill; } /* ========================================================================== 8. Biomechanical 44x44px Touch Target Hit-Slop Extension (WCAG 2.5.8 AAA) ========================================================================== */ @media (pointer: coarse) { .carbon-btn-icon-compact, .carbon-tag button, .carbon-modal-close, .carbon-overflow-menu-btn, .carbon-accordion-header, .xs-btn-compact, .xs-badge-clickable { position: relative; min-width: 24px; min-height: 24px; } .carbon-btn-icon-compact::before, .carbon-tag button::before, .carbon-modal-close::before, .carbon-overflow-menu-btn::before, .xs-btn-compact::before, .xs-badge-clickable::before { content: ''; position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%); min-width: 44px; min-height: 44px; z-index: 1; } } /* ========================================================================== 9. Multi-Environment Responsive & Container Query Adaptations (v2.0.0) ========================================================================== */ /* 9.1 Container Query Definitions */ .xs-container, .xs-card, .hero-anchor-component, .deliberation-box { container-type: inline-size; } /* 9.2 Hero Anchor Responsive Adaptation */ @media (max-width: 640px) { .hero-anchor-component, .xs-hero-anchor { flex-direction: column; align-items: stretch; padding: var(--xs-space-4); gap: var(--xs-space-3); } .anchor-actions, .xs-anchor-actions { display: flex; flex-direction: column; width: 100%; gap: var(--xs-space-2); } .anchor-actions .carbon-btn, .xs-anchor-actions .carbon-btn { width: 100%; min-height: var(--xs-touch-target-mobile, 48px); justify-content: center; } } @container (max-width: 520px) { .hero-anchor-component { flex-direction: column; align-items: stretch; } .anchor-actions { flex-direction: column; width: 100%; } .anchor-actions .carbon-btn { width: 100%; } } /* 9.3 Deliberation Box Responsive Adaptation */ @media (max-width: 640px) { .deliberation-box, .xs-deliberation-box { grid-template-columns: 1fr !important; gap: var(--xs-space-3); } } @container (max-width: 500px) { .deliberation-box { grid-template-columns: 1fr !important; } } /* 9.4 Mobile Responsive Tabs Horizontal Carousel */ @media (max-width: 768px) { .carbon-tab-list, .xs-tab-list, .ds-nav { display: flex; overflow-x: auto; -webkit-overflow-scrolling: touch; flex-wrap: nowrap; scrollbar-width: none; padding-bottom: 4px; } .carbon-tab-list::-webkit-scrollbar, .ds-nav::-webkit-scrollbar { display: none; } .carbon-tab-btn, .ds-nav a { flex-shrink: 0; white-space: nowrap; } } /* 9.5 Responsive Data Tables with Touch Scroller */ .carbon-table-container, .xs-table-container { width: 100%; overflow-x: auto; -webkit-overflow-scrolling: touch; border-radius: var(--xs-radius-md); border: 1px solid var(--xs-border-subtle); background: var(--xs-bg-surface); } @media (max-width: 640px) { .carbon-table th, .carbon-table td, .xs-table th, .xs-table td { padding: var(--xs-space-3) var(--xs-space-3); font-size: 12px; white-space: nowrap; } } /* 9.6 Mobile Bottom Sheet Modal Style */ @media (max-width: 640px) { .carbon-modal-container { align-items: flex-end !important; padding: 0 !important; } .carbon-modal-box { width: 100% !important; max-width: 100% !important; border-radius: 16px 16px 0 0 !important; padding: 20px !important; max-height: 85vh !important; overflow-y: auto !important; animation: xsSlideUp 0.25s cubic-bezier(0, 0, 0.2, 1) !important; } } @keyframes xsSlideUp { from { transform: translateY(100%); } to { transform: translateY(0); } } /* ========================================================================== 10. CVD (Color Vision Deficiency) Dual-Encoding Invariant (REQ-02) Enforces shape/icon/border dual-encoding so information is never conveyed by color alone. ========================================================================== */ .xs-dual-encoded { display: inline-flex; align-items: center; gap: var(--xs-space-1); } .xs-cue-marker { display: inline-block; width: 8px; height: 8px; border-radius: 50%; margin-right: var(--xs-space-1); } .xs-cue-marker.rpd-danger { background-color: var(--xs-accent-vermilion); border-radius: 0; /* 네모 마커: 위험/경고 */ transform: rotate(45deg); /* 다이아몬드 기호 */ } .xs-cue-marker.tacit-knowledge { background-color: var(--xs-accent-sage); border-radius: 50%; /* 동그라미 마커: 지식/성공 */ } .xs-cue-marker.attention-warning { background-color: var(--xs-accent-amber); width: 0; height: 0; border-left: 5px solid transparent; border-right: 5px solid transparent; border-bottom: 9px solid var(--xs-accent-amber); /* 삼각 마커: 주의 */ background: transparent; } /* ========================================================================== 11. Windows High-Contrast Mode & Reduced Motion Defense (REQ-03) ========================================================================== */ @media (forced-colors: active) { .xs-book-btn, .xs-card, .xs-deliberation-box, .xs-deliberation-pane, .xs-stratum-chip, .xs-hero-anchor, .xs-currency-pill, .carbon-btn, .carbon-modal-box { forced-color-adjust: none; outline: 1.5px solid CanvasText !important; border: 1px solid CanvasText !important; } .xs-text-ink, .xs-text-body, .xs-text-muted { color: CanvasText !important; } } @media (prefers-reduced-motion: reduce) { *, ::before, ::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== 12. Hardware Safe-Area & Dynamic Viewport Defense (REQ-01) ========================================================================== */ .xs-safe-container { padding-top: var(--xs-safe-top); padding-bottom: var(--xs-padding-safe-bottom); padding-left: var(--xs-safe-left); padding-right: var(--xs-safe-right); box-sizing: border-box; } .xs-vh-screen { min-height: 100vh; min-height: var(--xs-vh-dynamic); } .xs-wrap-safe { word-break: keep-all; overflow-wrap: anywhere; min-width: 0; } /* ========================================================================== 13. Physical Publication & Browser Print Pipeline (REQ-05) ========================================================================== */ @media print { body, .xs-body, body.xs-theme { background: #FFFFFF !important; color: #000000 !important; font-size: 10pt !important; line-height: 1.5 !important; } .carbon-skip-link, .xs-no-print, nav, .ds-nav, .carbon-tab-list, button, .xs-book-btn, .carbon-btn { display: none !important; } .xs-deliberation-box, .xs-card, .xs-hero-anchor, .xs-publication-widget, table, .carbon-table-container { break-inside: avoid !important; page-break-inside: avoid !important; box-shadow: none !important; border: 1px solid #D0D0D0 !important; background: #FFFFFF !important; } @page { margin: 15mm 20mm; } } /* ========================================================================== 14. 1-Scene 1-Primary-Verb Action Bar & Reading Density Utilities (REQ-06) ========================================================================== */ .xs-scene-header { display: flex; align-items: center; justify-content: space-between; gap: var(--xs-space-4); padding-bottom: var(--xs-space-4); margin-bottom: var(--xs-space-6); border-bottom: 1px solid var(--xs-border-subtle); flex-wrap: wrap; } .xs-primary-verb { display: inline-flex; align-items: center; justify-content: center; gap: var(--xs-space-2); min-height: var(--xs-touch-target-desktop, 40px); padding: 8px 18px; background: var(--xs-accent-navy); color: var(--xs-text-inverse); font-size: var(--xs-font-size-body); font-weight: 700; border-radius: var(--xs-radius-sm); border: 1px solid transparent; cursor: pointer; text-decoration: none; transition: background-color 120ms ease; } .xs-primary-verb:hover { background: var(--xs-accent-navy-hover); } .xs-secondary-actions { display: inline-flex; align-items: center; gap: var(--xs-space-2); flex-wrap: wrap; } .xs-measure-reading { max-width: var(--xs-measure-reading, 65ch); min-width: min(100%, var(--xs-cpl-min, 45ch)); line-height: var(--xs-line-height-body, 1.6); word-break: keep-all; overflow-wrap: anywhere; } .xs-density-compact { --xs-space-3: 0.5rem; --xs-space-4: 0.625rem; --xs-space-6: 1rem; font-size: var(--xs-font-size-body-sm, 0.75rem); line-height: var(--xs-line-height-tight, 1.25); } .xs-density-compact th, .xs-density-compact td, .xs-table.xs-density-compact th, .xs-table.xs-density-compact td { padding: var(--xs-density-pad-y, 6px) var(--xs-density-pad-x, 10px); font-size: var(--xs-font-size-body-sm, 0.75rem); } /* ========================================================================== 15. Keyboard Accessibility & Status Feedback UX (REQ-07) ========================================================================== */ .carbon-skip-link, .xs-skip-link { position: fixed; top: -9999px; left: 16px; background: var(--xs-primitive-slate-900, #0F172A); color: #FFFFFF; padding: 8px 16px; font-size: 13px; font-weight: 700; border-radius: var(--xs-radius-xs, 4px); text-decoration: none; z-index: 9999; border: 2px solid #FFFFFF; box-shadow: var(--xs-shadow-card); } .carbon-skip-link:focus, .carbon-skip-link:focus-visible, .xs-skip-link:focus, .xs-skip-link:focus-visible { top: 16px; outline: var(--xs-focus-ring-width, 2px) solid var(--xs-focus-ring-outer, #1E3A8A); outline-offset: var(--xs-focus-ring-offset, 2px); } .xs-kbd, kbd.xs-kbd { display: inline-flex; align-items: center; justify-content: center; min-width: 1.5em; padding: 1px 6px; font-family: var(--xs-font-mono); font-size: var(--xs-font-size-badge, 0.625rem); font-weight: 600; line-height: 1.4; color: var(--xs-text-body); background: var(--xs-bg-subtle); border: 1px solid var(--xs-border-strong); border-bottom-width: 2px; border-radius: var(--xs-radius-xs, 4px); white-space: nowrap; } .xs-status-toast, [role="status"].xs-status-toast, [role="status"]:not(.carbon-sr-only):not(.carbon-visually-hidden) { display: flex; align-items: center; justify-content: space-between; gap: var(--xs-space-3); padding: var(--xs-space-3) var(--xs-space-4); background: var(--xs-bg-surface); color: var(--xs-text-ink); border: 1px solid var(--xs-border-subtle); border-left: 3px solid var(--xs-accent-navy); border-radius: var(--xs-radius-sm); box-shadow: var(--xs-shadow-card); font-size: var(--xs-font-size-body-sm); line-height: 1.5; } .xs-status-toast[data-tone="success"], [role="status"][data-tone="success"] { border-left-color: var(--xs-accent-sage); } .xs-status-toast[data-tone="warning"], [role="status"][data-tone="warning"] { border-left-color: var(--xs-accent-amber); } .xs-status-toast[data-tone="danger"], .xs-status-toast[data-tone="critical"], [role="status"][data-tone="danger"], [role="status"][data-tone="critical"] { border-left-color: var(--xs-accent-vermilion); } /* --- File: chat-workspace.css --- */ /** * Chat Workspace structural components * Geometry: persistent rail -> readable stage -> docked conversation. */ .xs-chat-workspace { --xs-chat-content-max: 72ch; min-height: 100dvh; display: grid; grid-template-columns: var(--xs-chat-rail-width) minmax(0, 1fr) var(--xs-chat-dock-width); background: var(--xs-chat-canvas); color: var(--xs-chat-ink); font-family: var(--xs-font-sans); overflow: hidden; } .xs-chat-workspace__rail { min-width: 0; display: flex; flex-direction: column; align-items: center; gap: var(--xs-space-2); padding: var(--xs-space-3) var(--xs-space-1); background: var(--xs-chat-rail); border-right: 1px solid var(--xs-chat-border); } .xs-chat-workspace__rail-group { display: grid; gap: var(--xs-space-2); justify-items: center; } .xs-chat-workspace__rail-spacer { flex: 1; } .xs-chat-workspace__rail-button, .xs-chat-workspace__icon-button { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border: 1px solid transparent; border-radius: var(--xs-chat-radius-control); background: transparent; color: var(--xs-chat-muted); cursor: pointer; transition: background-color 160ms ease, color 160ms ease, border-color 160ms ease; } .xs-chat-workspace__rail-button:hover, .xs-chat-workspace__rail-button[aria-current="page"], .xs-chat-workspace__icon-button:hover { background: var(--xs-chat-stage); border-color: var(--xs-chat-border); color: var(--xs-chat-ink); } .xs-chat-workspace__rail-button:focus-visible, .xs-chat-workspace__icon-button:focus-visible, .xs-chat-workspace__composer-button:focus-visible, .xs-chat-workspace__send:focus-visible { outline: 2px solid var(--xs-chat-accent); outline-offset: 2px; } .xs-chat-workspace__stage { min-width: 0; min-height: 100dvh; overflow: auto; background: var(--xs-chat-stage); } .xs-chat-workspace__stage-inner { width: min(100%, 960px); min-height: 100%; margin: 0 auto; padding: clamp(32px, 6vw, 88px) clamp(24px, 5vw, 72px); } .xs-chat-workspace__stage-header { display: flex; align-items: center; justify-content: space-between; gap: var(--xs-space-4); margin-bottom: clamp(48px, 9vw, 120px); } .xs-chat-workspace__eyebrow { margin: 0 0 var(--xs-space-2); color: var(--xs-chat-muted); font-size: var(--xs-font-size-caption); font-weight: 700; letter-spacing: var(--xs-letter-spacing-wide); text-transform: uppercase; } .xs-chat-workspace__title { max-width: var(--xs-chat-content-max); margin: 0; color: var(--xs-chat-ink); font-size: clamp(1.75rem, 4vw, 3.5rem); line-height: 1.08; letter-spacing: -0.04em; } .xs-chat-workspace__body { max-width: var(--xs-chat-content-max); color: var(--xs-chat-body); font-size: var(--xs-font-size-body-fluid); line-height: var(--xs-line-height-body); } .xs-chat-workspace__dock { min-width: 0; display: flex; flex-direction: column; background: var(--xs-chat-dock); border-left: 1px solid var(--xs-chat-border); box-shadow: var(--xs-chat-shadow-dock); } .xs-chat-workspace__dock-header { min-height: 64px; display: flex; align-items: center; justify-content: space-between; gap: var(--xs-space-3); padding: 0 var(--xs-space-4); border-bottom: 1px solid var(--xs-chat-border); } .xs-chat-workspace__dock-title { margin: 0; color: var(--xs-chat-ink); font-size: var(--xs-font-size-title); font-weight: 700; } .xs-chat-workspace__dock-body { flex: 1; overflow: auto; padding: var(--xs-space-5); } .xs-chat-workspace__dock-empty { min-height: 100%; display: grid; place-items: center; color: var(--xs-chat-muted); text-align: center; } .xs-chat-workspace__composer { display: grid; grid-template-columns: auto minmax(0, 1fr) auto; align-items: end; gap: var(--xs-space-2); margin: var(--xs-space-4); padding: var(--xs-space-2); background: var(--xs-chat-composer); border: 1px solid var(--xs-chat-border-strong); border-radius: var(--xs-chat-radius-panel); } .xs-chat-workspace__composer-input { width: 100%; min-height: 44px; max-height: 160px; resize: vertical; border: 0; background: transparent; color: var(--xs-chat-ink); font: inherit; line-height: 1.45; padding: 10px 4px; } .xs-chat-workspace__composer-input::placeholder { color: var(--xs-chat-soft); } .xs-chat-workspace__composer-input:focus { outline: none; } .xs-chat-workspace__composer-button, .xs-chat-workspace__send { min-width: 44px; min-height: 44px; display: inline-grid; place-items: center; border: 0; border-radius: 12px; background: transparent; color: var(--xs-chat-muted); cursor: pointer; } .xs-chat-workspace__send { background: var(--xs-chat-ink); color: var(--xs-chat-stage); } /* ========================================================================== 3-Column Architecture: Rail (54px) -> Explorer (240px) -> Fluid Stage ========================================================================== */ .xs-chat-workspace--3col { grid-template-columns: var(--xs-chat-rail-width, 54px) var(--xs-chat-explorer-width, 240px) minmax(0, 1fr); } .xs-chat-workspace__explorer { min-width: 0; display: flex; flex-direction: column; background: var(--xs-chat-explorer, #1a1b1e); border-right: 1px solid var(--xs-chat-border, #2a2b30); overflow-y: auto; } .xs-chat-workspace__explorer-header { padding: var(--xs-space-3) var(--xs-space-4); font-size: 11px; font-weight: 700; color: var(--xs-chat-muted, #9ca3af); text-transform: uppercase; letter-spacing: var(--xs-letter-spacing-wide, 0.05em); border-bottom: 1px solid var(--xs-chat-border, #2a2b30); } .xs-chat-workspace__stream-list { display: flex; flex-direction: column; gap: 2px; padding: var(--xs-space-2); } .xs-chat-workspace__stream-item { display: flex; justify-content: space-between; align-items: center; padding: 8px 12px; border-radius: var(--xs-chat-radius-control, 6px); color: var(--xs-chat-body, #d1d5db); font-size: 12.5px; font-weight: 500; text-decoration: none; min-height: 44px; min-width: 44px; transition: background-color 140ms ease, color 140ms ease; } .xs-chat-workspace__stream-item:hover, .xs-chat-workspace__stream-item[aria-current="page"] { background: var(--xs-chat-surface-elevated, #2a2b30); color: var(--xs-chat-ink, #f1f5f9); } /* ========================================================================== Sovereign Book Navigation & Action Header ========================================================================== */ .xs-sovereign-book-nav { position: sticky; top: 0; z-index: 30; display: flex; align-items: center; justify-content: space-between; gap: var(--xs-space-3); padding: 10px var(--xs-space-4); background: var(--xs-chat-stage, #212124); border-bottom: 1px solid var(--xs-chat-border, #2a2b30); backdrop-filter: blur(8px); } .xs-sovereign-badge { display: inline-flex; align-items: center; padding: 2px 6px; background: var(--xs-chat-accent-amber, #f59e0b); color: #000000; font-size: 10px; font-weight: 800; border-radius: 3px; letter-spacing: 0.02em; } .xs-nav-tab-group { display: inline-flex; align-items: center; gap: 4px; background: var(--xs-chat-canvas, #17181c); padding: 3px; border-radius: 8px; border: 1px solid var(--xs-chat-border, #2a2b30); } .xs-nav-tab { display: inline-flex; align-items: center; gap: 6px; padding: 6px 12px; border-radius: 6px; font-size: 12.5px; font-weight: 600; color: var(--xs-chat-muted, #9ca3af); text-decoration: none; min-height: 44px; min-width: 44px; transition: all 120ms ease; } .xs-nav-tab:hover, .xs-nav-tab[aria-current="page"], .xs-nav-tab.active { background: var(--xs-chat-surface-elevated, #2a2b30); color: var(--xs-chat-ink, #f1f5f9); } .xs-nav-badge { font-size: 10px; font-weight: 700; padding: 1px 6px; border-radius: 9999px; background: rgba(56, 189, 248, 0.2); color: var(--xs-chat-accent, #38bdf8); } /* ========================================================================== 6-Channel External Signal Metric Cards ========================================================================== */ .xs-channel-metric-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(140px, 1fr)); gap: var(--xs-space-3); } .xs-channel-metric-card { display: flex; flex-direction: column; justify-content: space-between; padding: 14px; background: var(--xs-chat-stage, #212124); border: 1px solid var(--xs-chat-border, #2a2b30); border-radius: var(--xs-chat-radius-control, 6px); min-height: 110px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.15); } .xs-channel-metric-card__header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; } .xs-channel-metric-card__icon { font-size: 16px; } .xs-channel-metric-card__category { font-size: 10px; font-weight: 700; color: var(--xs-chat-muted, #9ca3af); text-transform: uppercase; } .xs-channel-metric-card__name { font-size: 11.5px; font-weight: 600; color: var(--xs-chat-body, #d1d5db); } .xs-channel-metric-card__count { font-size: 26px; font-weight: 900; color: var(--xs-chat-ink, #f1f5f9); line-height: 1.1; margin: 4px 0; } .xs-channel-metric-card__desc { font-size: 10.5px; color: var(--xs-chat-soft, #6b7280); } /* ========================================================================== Apple Silicon UMA Memory Budget & Local Model Cards ========================================================================== */ .xs-uma-memory-budget { background: var(--xs-chat-stage, #212124); border: 1px solid var(--xs-chat-border, #2a2b30); border-radius: var(--xs-chat-radius-panel, 12px); padding: 20px; box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2); } .xs-uma-memory-budget__bar { width: 100%; height: 12px; background: var(--xs-chat-surface-elevated, #2a2b30); border-radius: 6px; overflow: hidden; display: flex; } .xs-uma-memory-budget__fill { height: 100%; background: var(--xs-chat-accent, #38bdf8); transition: width 300ms ease; } .xs-local-model-card { display: flex; flex-direction: column; justify-content: space-between; gap: 14px; padding: 18px; background: var(--xs-chat-stage, #212124); border: 1px solid var(--xs-chat-border, #2a2b30); border-radius: var(--xs-chat-radius-panel, 12px); box-shadow: 0 2px 8px rgba(0, 0, 0, 0.15); } @media (max-width: 1100px) { .xs-chat-workspace { grid-template-columns: var(--xs-chat-rail-width) minmax(0, 1fr); } .xs-chat-workspace--3col { grid-template-columns: var(--xs-chat-rail-width) minmax(0, 1fr); } .xs-chat-workspace__explorer { display: none; } .xs-chat-workspace__dock { position: fixed; z-index: 10; inset: auto var(--xs-space-4) var(--xs-space-4) calc(var(--xs-chat-rail-width) + var(--xs-space-4)); max-height: min(70dvh, 640px); border: 1px solid var(--xs-chat-border); border-radius: var(--xs-chat-radius-panel); } } @media (max-width: 640px) { .xs-chat-workspace { grid-template-columns: 1fr; } .xs-chat-workspace--3col { grid-template-columns: 1fr; } .xs-chat-workspace__rail { position: fixed; z-index: 20; inset: auto var(--xs-space-3) var(--xs-space-3); flex-direction: row; justify-content: space-between; padding: var(--xs-space-1); border: 1px solid var(--xs-chat-border); border-radius: var(--xs-chat-radius-panel); box-shadow: var(--xs-chat-shadow-dock); } .xs-chat-workspace__rail-group { display: flex; } .xs-chat-workspace__rail-spacer { display: none; } .xs-chat-workspace__stage-inner { padding-bottom: 112px; } .xs-chat-workspace__dock { inset: auto var(--xs-space-3) 72px; } } @media (prefers-reduced-motion: reduce) { .xs-chat-workspace__rail-button, .xs-chat-workspace__icon-button, .xs-chat-workspace__stream-item, .xs-nav-tab { transition: none; } } @media (forced-colors: active) { .xs-chat-workspace__rail-button, .xs-chat-workspace__icon-button, .xs-chat-workspace__composer-button, .xs-chat-workspace__send, .xs-nav-tab, .xs-chat-workspace__stream-item { border: 1px solid ButtonText; } } /* ========================================================================== XS Core 4-Region AppShell Contract (Grounded in ChatGPT.app Benchmark) Regions: [data-xs-region="nav"] -> [data-xs-region="main"] -> [data-xs-region="aux"] Sub-regions: .xs-reading (48rem), .xs-wide (56rem), .xs-composer (autogrow) ========================================================================== */ .xs-system .xs-shell, .xs-shell { --xs-shell-nav-size: 15rem; --xs-shell-aux-size: 20rem; --xs-shell-nav-track: 0px; --xs-shell-aux-track: 0px; --xs-shell-backdrop: rgba(9, 9, 11, 0.55); position: relative; isolation: isolate; display: grid; grid-template-columns: var(--xs-shell-nav-track) minmax(0, 1fr) var(--xs-shell-aux-track); block-size: min(56rem, 100dvh); min-inline-size: 0; min-block-size: 0; padding: var(--xs-safe-top, 0px) var(--xs-safe-right, 0px) var(--xs-safe-bottom, 0px) var(--xs-safe-left, 0px); overflow: hidden; background: var(--xs-bg-canvas, #F8FAFC); color: var(--xs-text-ink, #0F172A); border: 1px solid var(--xs-border-subtle, #E2E8F0); border-radius: var(--xs-radius-md, 8px); } .xs-shell[data-xs-mode="wide"][data-xs-nav="open"] { --xs-shell-nav-track: var(--xs-shell-nav-size); } .xs-shell[data-xs-mode="wide"][data-xs-aux="open"] { --xs-shell-aux-track: var(--xs-shell-aux-size); } .xs-shell > [data-xs-region] { min-inline-size: 0; min-block-size: 0; } .xs-shell > [data-xs-region="nav"], .xs-shell > [data-xs-region="aux"] { grid-row: 1; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; padding: var(--xs-space-4, 16px); background: var(--xs-bg-surface, #FFFFFF); } .xs-shell > [data-xs-region="nav"] { grid-column: 1; border-inline-end: 1px solid var(--xs-border-subtle, #E2E8F0); background: var(--xs-bg-subtle, #F1F5F9); } .xs-shell > [data-xs-region="aux"] { grid-column: 3; border-inline-start: 1px solid var(--xs-border-subtle, #E2E8F0); } .xs-shell > [data-xs-region="main"] { grid-column: 2; grid-row: 1; display: flex; flex-direction: column; container-name: xs-main; container-type: inline-size; background: var(--xs-bg-surface, #FFFFFF); } .xs-shell .xs-sidebar-link { display: flex; align-items: center; min-block-size: var(--xs-touch-target, 44px); padding: var(--xs-space-2, 8px) var(--xs-space-3, 12px); border-inline-start: 2px solid transparent; color: var(--xs-text-ink, #0F172A); text-decoration: none; border-radius: 0 var(--xs-radius-xs, 4px) var(--xs-radius-xs, 4px) 0; } .xs-shell .xs-sidebar-link:hover { background: var(--xs-bg-surface, #FFFFFF); } .xs-shell .xs-sidebar-link[aria-current="page"] { border-inline-start-color: var(--xs-accent-navy, #1E3A8A); background: var(--xs-bg-surface, #FFFFFF); font-weight: 700; } .xs-shell > [data-xs-region="main"] > header { flex: 0 0 auto; display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: var(--xs-space-2, 8px); min-block-size: 3.25rem; max-block-size: 35%; overflow: auto; padding: var(--xs-space-2, 8px) var(--xs-space-4, 16px); border-block-end: 1px solid var(--xs-border-subtle, #E2E8F0); background: var(--xs-bg-surface, #FFFFFF); } .xs-shell-scroll { flex: 1 1 0; min-inline-size: 0; min-block-size: 0; overflow: auto; overscroll-behavior: contain; scrollbar-gutter: stable; scroll-padding-block: var(--xs-space-5, 20px); } .xs-shell :is(.xs-reading, .xs-wide) { inline-size: 100%; margin-inline: auto; padding: var(--xs-space-6, 24px); min-inline-size: 0; overflow-wrap: anywhere; } .xs-shell .xs-reading { max-inline-size: 48rem; } .xs-shell .xs-wide { max-inline-size: 56rem; } .xs-shell .xs-composer { flex: 0 0 auto; min-inline-size: 0; max-block-size: 45%; overflow: auto; padding: var(--xs-space-3, 12px) var(--xs-space-4, 16px); border-block-start: 1px solid var(--xs-border-subtle, #E2E8F0); background: var(--xs-bg-surface, #FFFFFF); } .xs-shell .xs-composer textarea[data-xs-autogrow] { width: 100%; min-block-size: 3rem; resize: none; overflow-y: auto; padding: 10px 12px; border: 1px solid var(--xs-border-strong, #CBD5E1); border-radius: var(--xs-radius-sm, 6px); background: var(--xs-bg-canvas, #F8FAFC); color: var(--xs-text-ink, #0F172A); font-family: inherit; font-size: 0.875rem; } .xs-shell .xs-composer-content { max-inline-size: 48rem; margin-inline: auto; padding-inline: var(--xs-space-6, 24px); min-inline-size: 0; } .xs-shell > [data-xs-layout-backdrop] { position: absolute; inset: 0; z-index: 2; background: var(--xs-shell-backdrop); } .xs-shell[data-xs-mode="narrow"] { grid-template-columns: minmax(0, 1fr); } .xs-shell[data-xs-mode="narrow"] > [data-xs-region="main"] { grid-column: 1; } .xs-shell[data-xs-mode="narrow"] > :is([data-xs-region="nav"], [data-xs-region="aux"]) { position: absolute; inset-block: 0; inline-size: min(var(--xs-shell-aux-size), calc(100% - 3rem)); max-inline-size: calc(100% - 3rem); z-index: 3; } .xs-shell[data-xs-mode="narrow"] > [data-xs-region="nav"] { inset-inline-start: 0; inline-size: min(var(--xs-shell-nav-size), calc(100% - 3rem)); } .xs-shell[data-xs-mode="narrow"] > [data-xs-region="aux"] { inset-inline-end: 0; } .xs-shell [hidden] { display: none !important; } @container xs-main (max-width: 40rem) { .xs-shell :is(.xs-reading, .xs-wide) { padding: var(--xs-space-4, 16px); } .xs-shell .xs-composer-content { padding-inline: 0; } } /* ========================================================================== APP-GRADE MICRO-RESPONSIVE CONTINUUM & INSET SHEET ARCHITECTURE (.xs-shell--app) 6 Spatial Tiers: - Tier 1 (>=1440px): Rail(52px) + Nav(256px) + Inset Main + Aux(360px) - Tier 2 (1180..1439px): Rail(52px) + Nav(216px) + Inset Main + Aux(300px) - Tier 3 (960..1179px): Rail(52px) + Auto-Compact Nav + Inset Main + Aux(280px) - Tier 4 (768..959px): Rail(52px) + Inset Main + Slide-over Glass Aux Sheet - Tier 5 (480..767px): Bottom App Dock + Full Main + Bottom Sheet Aux - Tier 6 (<480px / Short <520px): Ultra-Compact Micro-Chrome ========================================================================== */ .xs-shell--app { --xs-app-ease: cubic-bezier(0.22, 1, 0.36, 1); --xs-shell-rail-size: 52px; --xs-shell-nav-size: clamp(208px, 17vw, 256px); --xs-shell-aux-size: clamp(280px, 24vw, 360px); --xs-app-inset-gap: 6px; --xs-app-sheet-radius: 10px; --xs-app-header-h: 44px; background: var(--xs-bg-subtle, #EEF2F6); border: 1px solid var(--xs-border-subtle, #E2E8F0); border-radius: 12px; box-shadow: 0 12px 32px -8px rgba(15, 23, 42, 0.12), 0 1px 3px rgba(15, 23, 42, 0.06); grid-template-columns: var(--xs-shell-rail-size) var(--xs-shell-nav-track) minmax(0, 1fr) var(--xs-shell-aux-track); transition: grid-template-columns 220ms var(--xs-app-ease), background-color 180ms ease; user-select: none; -webkit-user-select: none; } [data-theme="dark"] .xs-shell--app { background: #09090B; border-color: #27272A; box-shadow: 0 16px 40px -8px rgba(0, 0, 0, 0.65), 0 0 0 1px rgba(255, 255, 255, 0.06); } /* 0. Persistent App Icon Rail (52px Desktop / Bottom Bar Mobile) */ .xs-shell--app > [data-xs-region="rail"] { grid-column: 1; grid-row: 1; display: flex; flex-direction: column; align-items: center; justify-content: space-between; padding: 10px 6px; background: transparent; z-index: 5; } .xs-app-rail-group { display: flex; flex-direction: column; align-items: center; gap: 6px; width: 100%; } .xs-app-rail-btn { width: 36px; height: 36px; border-radius: 8px; border: 1px solid transparent; background: transparent; color: var(--xs-text-muted, #64748B); display: inline-flex; align-items: center; justify-content: center; font-size: 14px; font-weight: 700; cursor: pointer; transition: background-color 140ms ease, color 140ms ease, transform 100ms ease, box-shadow 140ms ease; position: relative; } .xs-app-rail-btn:hover { background: var(--xs-bg-surface, #FFFFFF); color: var(--xs-text-ink, #0F172A); box-shadow: 0 1px 2px rgba(0, 0, 0, 0.06); } .xs-app-rail-btn:active { transform: scale(0.95); } .xs-app-rail-btn.is-active, .xs-app-rail-btn[aria-current="page"] { background: var(--xs-bg-surface, #FFFFFF); color: var(--xs-accent-navy, #1E3A8A); border-color: var(--xs-border-subtle, #E2E8F0); box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08); } .xs-app-rail-btn.is-active::before, .xs-app-rail-btn[aria-current="page"]::before { content: ""; position: absolute; left: -6px; top: 9px; bottom: 9px; width: 3px; border-radius: 0 3px 3px 0; background: var(--xs-accent-navy, #1E3A8A); } /* 1. App Navigation Sidebar (Flush on Canvas) */ .xs-shell--app > [data-xs-region="nav"] { grid-column: 2; grid-row: 1; background: transparent; border-inline-end: none; padding: 10px 8px 10px 2px; display: flex; flex-direction: column; gap: 8px; position: relative; } /* 2. Inset Main Stage Card (Floating Sheet on Canvas) */ .xs-shell--app > [data-xs-region="main"] { grid-column: 3; grid-row: 1; margin: var(--xs-app-inset-gap) var(--xs-app-inset-gap) var(--xs-app-inset-gap) 0; border-radius: var(--xs-app-sheet-radius); border: 1px solid var(--xs-border-subtle, #E2E8F0); background: var(--xs-bg-surface, #FFFFFF); box-shadow: 0 1px 3px rgba(15, 23, 42, 0.05); overflow: hidden; position: relative; user-select: text; -webkit-user-select: text; } .xs-shell--app[data-xs-aux="open"][data-xs-mode="wide"] > [data-xs-region="main"] { margin-inline-end: 0; border-top-right-radius: 0; border-bottom-right-radius: 0; border-inline-end: none; } /* Translucent App Header Bar */ .xs-shell--app > [data-xs-region="main"] > header { min-block-size: var(--xs-app-header-h); max-block-size: var(--xs-app-header-h); padding: 0 12px; background: color-mix(in srgb, var(--xs-bg-surface, #FFFFFF) 86%, transparent); backdrop-filter: blur(14px) saturate(140%); -webkit-backdrop-filter: blur(14px) saturate(140%); border-block-end: 1px solid var(--xs-border-subtle, #E2E8F0); position: sticky; top: 0; z-index: 10; user-select: none; } /* Compact Native-Feel Chrome Pill Buttons */ .xs-app-chrome-btn { display: inline-flex; align-items: center; gap: 6px; height: 28px; padding: 0 9px; border-radius: 6px; border: 1px solid var(--xs-border-subtle, #E2E8F0); background: var(--xs-bg-surface, #FFFFFF); color: var(--xs-text-body, #334155); font-size: 12px; font-weight: 600; letter-spacing: -0.01em; cursor: pointer; transition: background-color 120ms ease, border-color 120ms ease, color 120ms ease, transform 80ms ease; } .xs-app-chrome-btn:hover { background: var(--xs-bg-subtle, #F1F5F9); color: var(--xs-text-ink, #0F172A); border-color: var(--xs-border-strong, #CBD5E1); } .xs-app-chrome-btn:active { transform: scale(0.97); } .xs-app-chrome-btn[aria-expanded="true"], .xs-app-chrome-btn.is-active { background: var(--xs-accent-navy-light, rgba(30, 58, 138, 0.1)); color: var(--xs-accent-navy, #1E3A8A); border-color: var(--xs-accent-navy-border, rgba(30, 58, 138, 0.3)); } .xs-app-kbd { font-family: var(--xs-font-mono); font-size: 10px; font-weight: 600; padding: 1px 4px; border-radius: 3px; background: var(--xs-bg-subtle, #F1F5F9); color: var(--xs-text-muted, #64748B); border: 1px solid var(--xs-border-subtle, #E2E8F0); line-height: 1.2; } /* 3. Floating Capsule App Composer */ .xs-shell--app .xs-composer { border-block-start: none; background: linear-gradient(to top, var(--xs-bg-surface, #FFFFFF) 70%, transparent); padding: 8px 16px 14px; } .xs-app-composer-capsule { max-inline-size: 48rem; margin-inline: auto; background: var(--xs-bg-canvas, #F8FAFC); border: 1px solid var(--xs-border-strong, #CBD5E1); border-radius: 14px; padding: 8px 10px; box-shadow: 0 4px 16px -4px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04); transition: border-color 150ms ease, box-shadow 150ms ease, background-color 150ms ease; display: flex; flex-direction: column; gap: 6px; } .xs-app-composer-capsule:focus-within { background: var(--xs-bg-surface, #FFFFFF); border-color: var(--xs-accent-navy, #1E3A8A); box-shadow: 0 8px 24px -6px rgba(30, 58, 138, 0.16), 0 0 0 2px var(--xs-accent-navy-light, rgba(30, 58, 138, 0.15)); } .xs-app-composer-capsule textarea[data-xs-autogrow] { border: none !important; background: transparent !important; padding: 4px 6px !important; min-block-size: 28px !important; font-size: 13.5px !important; line-height: 1.5 !important; outline: none !important; box-shadow: none !important; } .xs-app-composer-Toolbar { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding-top: 4px; border-top: 1px solid var(--xs-border-hairline, rgba(148, 163, 184, 0.18)); user-select: none; } /* 4. Inset Auxiliary Inspector Panel */ .xs-shell--app > [data-xs-region="aux"] { grid-column: 4; grid-row: 1; margin: var(--xs-app-inset-gap) var(--xs-app-inset-gap) var(--xs-app-inset-gap) 0; border-radius: 0 var(--xs-app-sheet-radius) var(--xs-app-sheet-radius) 0; border: 1px solid var(--xs-border-subtle, #E2E8F0); border-inline-start: 1px solid var(--xs-border-subtle, #E2E8F0); background: var(--xs-bg-surface, #FFFFFF); padding: 0; display: flex; flex-direction: column; overflow: hidden; position: relative; user-select: text; } /* Interactive Drag Splitter Handle (AXSplitter) */ .xs-app-splitter { position: absolute; top: 0; bottom: 0; width: 8px; cursor: col-resize; z-index: 15; display: flex; align-items: center; justify-content: center; touch-action: none; } .xs-app-splitter--nav { right: -4px; } .xs-app-splitter--aux { left: -4px; } .xs-app-splitter::after { content: ""; width: 2px; height: 36px; border-radius: 2px; background: transparent; transition: background-color 140ms ease, height 140ms ease; } .xs-app-splitter:hover::after, .xs-app-splitter.is-dragging::after { background: var(--xs-accent-navy, #3B82F6); height: 64px; } /* ========================================================================== 6-STAGE CONTAINER & VIEWPORT MICRO-OPTIMIZATION RULES ========================================================================== */ /* Container Query Stage A: Medium Main Stage (<= 720px / 45rem) */ @container xs-main (max-width: 45rem) { .xs-shell :is(.xs-reading, .xs-wide) { padding: 18px 20px; } .xs-shell .xs-composer { padding: 8px 12px 12px; } } /* Container Query Stage B: Compact Main Stage (<= 520px / 32.5rem) */ @container xs-main (max-width: 32.5rem) { .xs-shell :is(.xs-reading, .xs-wide) { padding: 14px 14px; } .xs-app-kbd { display: none; } .xs-shell > [data-xs-region="main"] > header { padding: 0 8px; } } /* Tier 1 (studio >= 1320px): Full 4-Column Studio */ .xs-shell--app[data-xs-tier="studio"] { --xs-shell-nav-size: 248px; --xs-shell-aux-size: 340px; } /* Tier 2 (compact-studio 1120px..1319px): Fluid Compact Studio */ .xs-shell--app[data-xs-tier="compact-studio"] { --xs-shell-nav-size: 204px; --xs-shell-aux-size: 296px; } /* Tier 3 (split 960px..1119px): Laptop Split-Screen (Compact Nav + Coexisting Aux) */ .xs-shell--app[data-xs-tier="split"] { --xs-shell-nav-size: 184px; --xs-shell-aux-size: 268px; } /* Tier 4: Narrow / Tablet Mode (< 960px Shell): Rail + Full Inset Main + Glass Slide-Over Sheet */ .xs-shell--app[data-xs-mode="narrow"] { grid-template-columns: var(--xs-shell-rail-size) minmax(0, 1fr); } .xs-shell--app[data-xs-mode="narrow"] > [data-xs-region="main"] { grid-column: 2; margin: var(--xs-app-inset-gap) var(--xs-app-inset-gap) var(--xs-app-inset-gap) 0; border-radius: var(--xs-app-sheet-radius); border-inline-end: 1px solid var(--xs-border-subtle, #E2E8F0); } .xs-shell--app[data-xs-mode="narrow"] > [data-xs-region="nav"] { inset-block: var(--xs-app-inset-gap); inset-inline-start: var(--xs-shell-rail-size); background: var(--xs-bg-surface, #FFFFFF); border: 1px solid var(--xs-border-strong, #CBD5E1); border-radius: var(--xs-app-sheet-radius); box-shadow: 0 20px 40px -12px rgba(0, 0, 0, 0.35); padding: 12px; } .xs-shell--app[data-xs-mode="narrow"] > [data-xs-region="aux"] { inset-block: var(--xs-app-inset-gap); inset-inline-end: var(--xs-app-inset-gap); margin: 0; border-radius: var(--xs-app-sheet-radius); border: 1px solid var(--xs-border-strong, #CBD5E1); box-shadow: -12px 0 36px -8px rgba(0, 0, 0, 0.3); } /* Tier 5 & 6: Mobile / Micro App Mode (data-xs-tier="mobile" | "micro" or <= 679px): Bottom Floating Glass Tab Bar */ .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) { --xs-app-inset-gap: 0px; --xs-app-sheet-radius: 0px; grid-template-columns: minmax(0, 1fr); grid-template-rows: minmax(0, 1fr) 54px; border-radius: 16px; } .xs-shell--app[data-xs-tier="micro"] { --xs-app-header-h: 38px; grid-template-rows: minmax(0, 1fr) 48px; } .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) > [data-xs-region="rail"] { grid-column: 1; grid-row: 2; flex-direction: row; justify-content: space-around; padding: 4px 12px; background: color-mix(in srgb, var(--xs-bg-surface, #FFFFFF) 90%, transparent); backdrop-filter: blur(16px); -webkit-backdrop-filter: blur(16px); border-top: 1px solid var(--xs-border-subtle, #E2E8F0); } .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) .xs-app-rail-group { flex-direction: row; justify-content: space-around; width: auto; gap: 14px; } .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) .xs-app-rail-btn.is-active::before, .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) .xs-app-rail-btn[aria-current="page"]::before { left: 8px; right: 8px; top: auto; bottom: -4px; width: auto; height: 3px; border-radius: 3px 3px 0 0; } .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) > [data-xs-region="main"] { grid-column: 1; grid-row: 1; margin: 0; border: none; border-radius: 0; } .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) > [data-xs-region="nav"] { inset-inline-start: 8px; inset-block: 8px 62px; } .xs-shell--app:is([data-xs-tier="mobile"], [data-xs-tier="micro"]) > [data-xs-region="aux"] { inset-inline: 8px; inset-block: auto 62px; inline-size: calc(100% - 16px); max-inline-size: calc(100% - 16px); max-block-size: 72%; border-radius: 14px; } /* Pointer Coarse Ergonomics (Touch Devices) */ @media (pointer: coarse) { .xs-app-chrome-btn { height: 38px; padding: 0 12px; } .xs-app-rail-btn { width: 44px; height: 44px; } } /* ========================================================================== APPLE HIG MATERIALS, GLASSMORPHISM & PHYSICAL TACTILITY ENGINE Grounded in Apple Human Interface Guidelines (macOS / iPadOS / visionOS): - 5 Translucent Material Grades: UltraThin, Thin, Regular, Thick, Chrome - Concentric Curvature Invariant: R_inner = max(0, R_outer - inset_gap) - Overhead Studio Specular Rim Lighting (1px top catchlight + contact occlusion) - SVG Fractal-Noise Micro-Grain Texture (Bead-Blasted Titanium, Frosted Glass, Glazed Ceramic, 120g/m² Cotton Paper) with APCA Lc >= 75 & Spot <= 3.0% ========================================================================== */ :root { /* ========================================================================== PROCEDURAL NATURAL & ORGANIC GRAPHICAL TEXTURES (0 Network Requests) - Anisotropic SVG feTurbulence + feDiffuseLighting surface relief ========================================================================== */ /* 1. Fine Mineral / Studio Grain */ --xs-tactile-grain-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 160 160' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.88' numOctaves='3' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.038'/%3E%3C/svg%3E"); /* 2. Mulberry Hanji (전통 닥종이 한지 — 긴 식물성 섬유결 + 확산광 부조) */ --xs-tex-hanji-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 240 240' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='h'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.035 0.16' numOctaves='4' seed='7' stitchTiles='stitch' result='noise'/%3E%3CfeDiffuseLighting in='noise' lighting-color='%23ffffff' surfaceScale='1.4'%3E%3CfeDistantLight azimuth='135' elevation='52'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23h)' opacity='0.065'/%3E%3C/svg%3E"); /* 3. Woven Natural Linen (천연 리넨 직조 — 날실·씨실 교차 직물 질감) */ --xs-tex-linen-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 120 120' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='l'%3E%3CfeTurbulence type='turbulence' baseFrequency='0.55 0.55' numOctaves='2' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23l)' opacity='0.035'/%3E%3C/svg%3E"); /* 4. Hinoki & Ash Timber Grain (편백·애쉬 원목 — 이방성 나뭇결) */ --xs-tex-timber-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 320 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='w'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.012 0.24' numOctaves='4' seed='12' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23w)' opacity='0.055'/%3E%3C/svg%3E"); /* 5. Honed Travertine & Basalt Stone (트래버틴 석회암·현무암 — 퇴적 기공 부조) */ --xs-tex-travertine-svg: url("data:image/svg+xml,%3Csvg viewBox='0 0 220 220' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='s'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.08 0.035' numOctaves='4' seed='3' stitchTiles='stitch' result='stone'/%3E%3CfeDiffuseLighting in='stone' lighting-color='%23ffffff' surfaceScale='1.6'%3E%3CfeDistantLight azimuth='125' elevation='46'/%3E%3C/feDiffuseLighting%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23s)' opacity='0.06'/%3E%3C/svg%3E"); /* ========================================================================== INCIDENT LIGHT & DIRECTIONAL SHADOW PHYSICS (빛의 입사각·색온도·그림자) ========================================================================== */ --xs-light-x: 20%; --xs-light-y: 12%; --xs-cast-x: 0px; --xs-cast-y: 10px; --xs-light-glow: rgba(255, 252, 245, 0.72); --xs-light-ambient: rgba(255, 255, 255, 0.35); --xs-shadow-penumbra: rgba(15, 23, 42, 0.09); /* Apple HIG Specular Rim & Elevation Tokens (Light Mode) */ --xs-specular-rim-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.88); --xs-specular-rim-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.45); --xs-tactile-bevel-shadow: calc(var(--xs-cast-x) * 0.25) calc(var(--xs-cast-y) * 0.25) 3px rgba(15, 23, 42, 0.05), var(--xs-cast-x) var(--xs-cast-y) 24px -6px var(--xs-shadow-penumbra), inset 0 1px 0 0 rgba(255, 255, 255, 0.92), inset 0 -1px 0 0 rgba(15, 23, 42, 0.04); --xs-tactile-recessed-well: inset 0 1.5px 3px rgba(15, 23, 42, 0.09), inset 0 0 0 1px rgba(15, 23, 42, 0.06), 0 1px 0 rgba(255, 255, 255, 0.8); --xs-tactile-button-surface: linear-gradient(180deg, #FFFFFF 0%, #F8FAFC 100%); --xs-tactile-button-shadow: 0 1px 2px rgba(15, 23, 42, 0.08), 0 0 0 1px rgba(15, 23, 42, 0.09), inset 0 1px 0 0 rgba(255, 255, 255, 0.95); --xs-tactile-keycap-shadow: 0 1.5px 0 0 #CBD5E1, 0 2px 3px rgba(15, 23, 42, 0.12), inset 0 1px 0 0 #FFFFFF; /* Apple HIG 5-Grade Translucent Glass Surfaces (Light) */ --xs-glass-ultrathin-bg: rgba(255, 255, 255, 0.52); --xs-glass-thin-bg: rgba(255, 255, 255, 0.68); --xs-glass-regular-bg: rgba(248, 250, 252, 0.78); --xs-glass-thick-bg: rgba(255, 255, 255, 0.90); --xs-glass-chrome-bg: linear-gradient(180deg, rgba(255, 255, 255, 0.86) 0%, rgba(241, 245, 249, 0.78) 100%); } [data-theme="dark"] { --xs-specular-rim-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.16); --xs-specular-rim-ring: inset 0 0 0 1px rgba(255, 255, 255, 0.08); --xs-tactile-bevel-shadow: 0 2px 4px rgba(0, 0, 0, 0.4), 0 14px 32px -8px rgba(0, 0, 0, 0.65), inset 0 1px 0 0 rgba(255, 255, 255, 0.12), inset 0 -1px 0 0 rgba(0, 0, 0, 0.5); --xs-tactile-recessed-well: inset 0 2px 4px rgba(0, 0, 0, 0.55), inset 0 0 0 1px rgba(0, 0, 0, 0.45), 0 1px 0 rgba(255, 255, 255, 0.06); --xs-tactile-button-surface: linear-gradient(180deg, #27272A 0%, #1C1C1F 100%); --xs-tactile-button-shadow: 0 1px 3px rgba(0, 0, 0, 0.5), 0 0 0 1px rgba(255, 255, 255, 0.1), inset 0 1px 0 0 rgba(255, 255, 255, 0.15); --xs-tactile-keycap-shadow: 0 1.5px 0 0 #09090B, 0 2px 4px rgba(0, 0, 0, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.14); /* Apple HIG 5-Grade Translucent Glass Surfaces (Dark) */ --xs-glass-ultrathin-bg: rgba(24, 24, 27, 0.48); --xs-glass-thin-bg: rgba(24, 24, 27, 0.64); --xs-glass-regular-bg: rgba(24, 24, 27, 0.76); --xs-glass-thick-bg: rgba(24, 24, 27, 0.88); --xs-glass-chrome-bg: linear-gradient(180deg, rgba(39, 39, 42, 0.84) 0%, rgba(24, 24, 27, 0.76) 100%); } /* 1. Apple HIG 5-Grade Glassmorphism Utility Classes */ .xs-glass-ultrathin { background: var(--xs-glass-ultrathin-bg); backdrop-filter: blur(10px) saturate(160%); -webkit-backdrop-filter: blur(10px) saturate(160%); box-shadow: var(--xs-specular-rim-top), var(--xs-specular-rim-ring); } .xs-glass-thin { background: var(--xs-glass-thin-bg); backdrop-filter: blur(16px) saturate(175%); -webkit-backdrop-filter: blur(16px) saturate(175%); box-shadow: var(--xs-specular-rim-top), var(--xs-specular-rim-ring), 0 4px 16px -4px rgba(15, 23, 42, 0.08); } .xs-glass-regular { background: var(--xs-glass-regular-bg); backdrop-filter: blur(24px) saturate(185%); -webkit-backdrop-filter: blur(24px) saturate(185%); box-shadow: var(--xs-specular-rim-top), var(--xs-specular-rim-ring), 0 8px 28px -6px rgba(15, 23, 42, 0.12); } .xs-glass-thick { background: var(--xs-glass-thick-bg); backdrop-filter: blur(36px) saturate(195%); -webkit-backdrop-filter: blur(36px) saturate(195%); box-shadow: var(--xs-specular-rim-top), var(--xs-specular-rim-ring), 0 16px 40px -8px rgba(15, 23, 42, 0.18); } .xs-glass-chrome { background: var(--xs-glass-chrome-bg); backdrop-filter: blur(20px) saturate(180%) contrast(103%); -webkit-backdrop-filter: blur(20px) saturate(180%) contrast(103%); box-shadow: var(--xs-specular-rim-top); } /* 2. Physical Tactility Upgrade for .xs-shell--app */ .xs-shell--app { --xs-app-outer-radius: 16px; --xs-app-inset-gap: 6px; /* Concentric Curvature Law: R_inner = 16px - 6px = 10px */ --xs-app-sheet-radius: 10px; border-radius: var(--xs-app-outer-radius); background-image: var(--xs-tactile-grain-svg), linear-gradient(180deg, rgba(255, 255, 255, 0.55) 0%, rgba(226, 232, 240, 0.35) 100%); box-shadow: 0 20px 48px -12px rgba(15, 23, 42, 0.16), 0 2px 6px -1px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 rgba(255, 255, 255, 0.85), inset 0 0 0 1px rgba(15, 23, 42, 0.06); } [data-theme="dark"] .xs-shell--app { background-image: var(--xs-tactile-grain-svg), linear-gradient(180deg, rgba(39, 39, 42, 0.45) 0%, rgba(9, 9, 11, 0.85) 100%); box-shadow: 0 24px 56px -12px rgba(0, 0, 0, 0.75), 0 4px 12px rgba(0, 0, 0, 0.5), inset 0 1px 0 0 rgba(255, 255, 255, 0.14), inset 0 0 0 1px rgba(255, 255, 255, 0.06); } /* 3. 4 Curated Physical Material Presets on .xs-shell--app[data-xs-material="..."] */ /* Preset A: Frosted Glass (visionOS / macOS Translucent Depth) */ .xs-shell--app[data-xs-material="glass"] { background-color: rgba(226, 232, 240, 0.55); background-image: var(--xs-tactile-grain-svg), radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.75) 0%, transparent 55%), radial-gradient(circle at 85% 88%, rgba(203, 213, 225, 0.5) 0%, transparent 60%); backdrop-filter: blur(28px) saturate(180%); -webkit-backdrop-filter: blur(28px) saturate(180%); } .xs-shell--app[data-xs-material="glass"] > [data-xs-region="main"], .xs-shell--app[data-xs-material="glass"] > [data-xs-region="aux"] { background: var(--xs-glass-regular-bg); backdrop-filter: blur(24px) saturate(180%); -webkit-backdrop-filter: blur(24px) saturate(180%); box-shadow: var(--xs-tactile-bevel-shadow); } [data-theme="dark"] .xs-shell--app[data-xs-material="glass"] { background-color: rgba(15, 17, 23, 0.72); background-image: var(--xs-tactile-grain-svg), radial-gradient(circle at 18% 12%, rgba(255, 255, 255, 0.08) 0%, transparent 55%), radial-gradient(circle at 85% 88%, rgba(30, 58, 138, 0.12) 0%, transparent 60%); } /* Preset B: Bead-Blasted Titanium (Apple Pro Hardware Chassis) */ .xs-shell--app[data-xs-material="titanium"] { background-color: #E4E6EB; background-image: var(--xs-tactile-grain-svg), linear-gradient(135deg, rgba(255, 255, 255, 0.7) 0%, rgba(203, 213, 225, 0.25) 50%, rgba(148, 163, 184, 0.2) 100%); border-color: #CBD5E1; } .xs-shell--app[data-xs-material="titanium"] > [data-xs-region="main"], .xs-shell--app[data-xs-material="titanium"] > [data-xs-region="aux"] { background-color: #F8FAFC; background-image: var(--xs-tactile-grain-svg); box-shadow: 0 2px 6px rgba(15, 23, 42, 0.08), inset 0 1px 0 0 #FFFFFF, inset 0 0 0 1px rgba(15, 23, 42, 0.05); } [data-theme="dark"] .xs-shell--app[data-xs-material="titanium"] { background-color: #18181B; background-image: var(--xs-tactile-grain-svg), linear-gradient(135deg, rgba(63, 63, 70, 0.45) 0%, rgba(24, 24, 27, 0.8) 55%, rgba(9, 9, 11, 0.95) 100%); border-color: #3F3F46; } [data-theme="dark"] .xs-shell--app[data-xs-material="titanium"] > [data-xs-region="main"], [data-theme="dark"] .xs-shell--app[data-xs-material="titanium"] > [data-xs-region="aux"] { background-color: #121215; background-image: var(--xs-tactile-grain-svg); } /* Preset C: Glazed Studio Ceramic (Warm Alabaster & Matte Stone) */ .xs-shell--app[data-xs-material="ceramic"] { background-color: #EFECE6; background-image: var(--xs-tactile-grain-svg), linear-gradient(180deg, rgba(255, 255, 255, 0.65) 0%, rgba(231, 227, 218, 0.5) 100%); border-color: #DCD7CD; } .xs-shell--app[data-xs-material="ceramic"] > [data-xs-region="main"], .xs-shell--app[data-xs-material="ceramic"] > [data-xs-region="aux"] { background-color: #FCFBF9; box-shadow: 0 2px 8px rgba(28, 25, 23, 0.06), inset 0 1px 0 0 #FFFFFF; } [data-theme="dark"] .xs-shell--app[data-xs-material="ceramic"] { background-color: #171614; border-color: #292724; } [data-theme="dark"] .xs-shell--app[data-xs-material="ceramic"] > [data-xs-region="main"], [data-theme="dark"] .xs-shell--app[data-xs-material="ceramic"] > [data-xs-region="aux"] { background-color: #1F1E1B; } /* Preset D: Archival Cotton Paper & Mulberry Hanji (전통 닥종이 한지 / 120g/m² 코튼지) */ .xs-shell--app:is([data-xs-material="paper"], [data-xs-material="hanji"]) { background-color: var(--xs-bg-subtle, #EAE5DC); background-image: var(--xs-tex-hanji-svg), radial-gradient(circle at var(--xs-light-x) var(--xs-light-y), var(--xs-light-glow) 0%, transparent 65%); border-color: var(--xs-border-subtle, #D6D1C7); } .xs-shell--app:is([data-xs-material="paper"], [data-xs-material="hanji"]) > [data-xs-region="main"], .xs-shell--app:is([data-xs-material="paper"], [data-xs-material="hanji"]) > [data-xs-region="aux"] { background-color: var(--xs-bg-surface, #FAF7F2); background-image: var(--xs-tex-hanji-svg), radial-gradient(circle at var(--xs-light-x) var(--xs-light-y), rgba(255, 255, 255, 0.55) 0%, transparent 70%); box-shadow: var(--xs-tactile-bevel-shadow); } [data-theme="dark"] .xs-shell--app:is([data-xs-material="paper"], [data-xs-material="hanji"]) { background-color: #141311; border-color: #262420; } [data-theme="dark"] .xs-shell--app:is([data-xs-material="paper"], [data-xs-material="hanji"]) > [data-xs-region="main"], [data-theme="dark"] .xs-shell--app:is([data-xs-material="paper"], [data-xs-material="hanji"]) > [data-xs-region="aux"] { background-color: #1C1A17; background-image: var(--xs-tex-hanji-svg); } /* Preset E: Woven Natural Linen (천연 리넨 직조 패브릭 — 날실·씨실 교차 결) */ .xs-shell--app[data-xs-material="linen"] { background-color: var(--xs-bg-subtle, #EAE7E0); background-image: var(--xs-tex-linen-svg), repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.018) 0px, rgba(15, 23, 42, 0.018) 1px, transparent 1px, transparent 3px), repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.018) 0px, rgba(15, 23, 42, 0.018) 1px, transparent 1px, transparent 3px), radial-gradient(circle at var(--xs-light-x) var(--xs-light-y), var(--xs-light-glow) 0%, transparent 65%); } .xs-shell--app[data-xs-material="linen"] > [data-xs-region="main"], .xs-shell--app[data-xs-material="linen"] > [data-xs-region="aux"] { background-color: var(--xs-bg-surface, #FDFCFB); background-image: var(--xs-tex-linen-svg), repeating-linear-gradient(0deg, rgba(15, 23, 42, 0.01) 0px, rgba(15, 23, 42, 0.01) 1px, transparent 1px, transparent 4px), repeating-linear-gradient(90deg, rgba(15, 23, 42, 0.01) 0px, rgba(15, 23, 42, 0.01) 1px, transparent 1px, transparent 4px); box-shadow: var(--xs-tactile-bevel-shadow); } /* Preset F: Hinoki & Ash Timber Grain (편백·애쉬 원목 — 이방성 나뭇결 + 온기 있는 반사광) */ .xs-shell--app[data-xs-material="timber"] { background-color: var(--xs-bg-subtle, #E8E4DA); background-image: var(--xs-tex-timber-svg), linear-gradient(108deg, rgba(255, 250, 240, 0.55) 0%, rgba(214, 204, 186, 0.25) 52%, rgba(255, 252, 245, 0.45) 100%), radial-gradient(circle at var(--xs-light-x) var(--xs-light-y), var(--xs-light-glow) 0%, transparent 65%); } .xs-shell--app[data-xs-material="timber"] > [data-xs-region="main"], .xs-shell--app[data-xs-material="timber"] > [data-xs-region="aux"] { background-color: var(--xs-bg-surface, #FCFBF7); background-image: var(--xs-tex-timber-svg), radial-gradient(circle at var(--xs-light-x) var(--xs-light-y), rgba(255, 253, 248, 0.65) 0%, transparent 72%); box-shadow: var(--xs-tactile-bevel-shadow); } /* Preset G: Honed Travertine Stone & Clay (트래버틴 석회암·현무암 — 다공성 자연석 부조) */ .xs-shell--app[data-xs-material="travertine"] { background-color: var(--xs-bg-subtle, #EBE4DA); background-image: var(--xs-tex-travertine-svg), radial-gradient(circle at var(--xs-light-x) var(--xs-light-y), var(--xs-light-glow) 0%, transparent 62%); } .xs-shell--app[data-xs-material="travertine"] > [data-xs-region="main"], .xs-shell--app[data-xs-material="travertine"] > [data-xs-region="aux"] { background-color: var(--xs-bg-surface, #FFFDF9); background-image: var(--xs-tex-travertine-svg); box-shadow: var(--xs-tactile-bevel-shadow); } /* ========================================================================== INCIDENT LIGHT ATMOSPHERE PRESETS ([data-xs-light="morning|daylight|golden|moonlight"]) Controls light color temperature (Kelvin), grazing angle, and cast shadow vector ========================================================================== */ [data-xs-light="morning"] { --xs-light-x: 16%; --xs-light-y: 14%; --xs-cast-x: 5px; --xs-cast-y: 10px; --xs-light-glow: rgba(255, 249, 235, 0.82); --xs-shadow-penumbra: rgba(28, 25, 23, 0.09); } [data-xs-light="daylight"] { --xs-light-x: 50%; --xs-light-y: 6%; --xs-cast-x: 0px; --xs-cast-y: 12px; --xs-light-glow: rgba(255, 255, 255, 0.85); --xs-shadow-penumbra: rgba(15, 23, 42, 0.08); } [data-xs-light="golden"] { --xs-light-x: 82%; --xs-light-y: 18%; --xs-cast-x: -7px; --xs-cast-y: 12px; --xs-light-glow: rgba(254, 240, 210, 0.78); --xs-shadow-penumbra: rgba(67, 20, 7, 0.11); } [data-xs-light="moonlight"] { --xs-light-x: 28%; --xs-light-y: 10%; --xs-cast-x: 4px; --xs-cast-y: 12px; --xs-light-glow: rgba(224, 242, 254, 0.25); --xs-shadow-penumbra: rgba(2, 6, 23, 0.28); } /* 4. Tactile Objecthood on Inner Stage, Header, Buttons, Keycaps & Composer */ .xs-shell--app > [data-xs-region="main"], .xs-shell--app > [data-xs-region="aux"] { box-shadow: var(--xs-tactile-bevel-shadow); } .xs-shell--app > [data-xs-region="main"] > header { background: var(--xs-glass-chrome-bg); backdrop-filter: blur(20px) saturate(180%); -webkit-backdrop-filter: blur(20px) saturate(180%); box-shadow: var(--xs-specular-rim-top), 0 1px 2px rgba(15, 23, 42, 0.03); } /* Tactile Hardware Push Buttons */ .xs-app-chrome-btn { background: var(--xs-tactile-button-surface); border: none; box-shadow: var(--xs-tactile-button-shadow); transition: transform 90ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 120ms ease, background 120ms ease, color 120ms ease; } .xs-app-chrome-btn:hover { box-shadow: 0 2px 4px rgba(15, 23, 42, 0.1), 0 0 0 1px var(--xs-border-strong, #94A3B8), inset 0 1px 0 0 rgba(255, 255, 255, 1); } .xs-app-chrome-btn:active { transform: translateY(1px) scale(0.985); box-shadow: var(--xs-tactile-recessed-well); } .xs-app-chrome-btn[aria-expanded="true"], .xs-app-chrome-btn.is-active { background: linear-gradient(180deg, var(--xs-accent-navy, #1E3A8A) 0%, #172E6E 100%); color: #FFFFFF; box-shadow: 0 1px 3px rgba(30, 58, 138, 0.35), 0 0 0 1px rgba(30, 58, 138, 0.6), inset 0 1px 0 0 rgba(255, 255, 255, 0.28); } .xs-app-chrome-btn.is-active .xs-app-kbd, .xs-app-chrome-btn[aria-expanded="true"] .xs-app-kbd { background: rgba(255, 255, 255, 0.16); color: #FFFFFF; border-color: rgba(255, 255, 255, 0.25); box-shadow: none; } /* Machined Mechanical Keycaps (.xs-app-kbd) */ .xs-app-kbd { border-radius: 4px; padding: 1px 5px; box-shadow: var(--xs-tactile-keycap-shadow); transform: translateY(-0.5px); } /* Recessed Milled Segmented Control Well (.xs-tactile-well) */ .xs-tactile-well { display: inline-flex; align-items: center; gap: 4px; padding: 3px; border-radius: 8px; background: color-mix(in srgb, var(--xs-bg-subtle, #E2E8F0) 85%, rgba(15, 23, 42, 0.06)); box-shadow: var(--xs-tactile-recessed-well); } /* Floating Glass & Specular Command Capsule (.xs-app-composer-capsule) */ .xs-app-composer-capsule { background: var(--xs-glass-thick-bg); backdrop-filter: blur(24px) saturate(185%); -webkit-backdrop-filter: blur(24px) saturate(185%); border: 1px solid color-mix(in srgb, var(--xs-border-strong, #CBD5E1) 80%, rgba(255, 255, 255, 0.5)); box-shadow: 0 8px 24px -6px rgba(15, 23, 42, 0.1), 0 2px 6px -1px rgba(15, 23, 42, 0.05), var(--xs-specular-rim-top); } /* Milled Physical Grip Pill on Splitters */ .xs-app-splitter::after { width: 4px; height: 36px; border-radius: 4px; background: color-mix(in srgb, var(--xs-border-strong, #94A3B8) 55%, transparent); box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.6), 0 0 0 0.5px rgba(15, 23, 42, 0.08); } /* Physical Material Swatch Cards for Documentation Showcase */ .xs-material-swatch-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; margin-bottom: 20px; } .xs-material-card { position: relative; border-radius: 12px; padding: 16px; overflow: hidden; border: 1px solid var(--xs-border-subtle, #E2E8F0); box-shadow: var(--xs-tactile-bevel-shadow); background-image: var(--xs-tactile-grain-svg); transition: transform 160ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 160ms ease; cursor: pointer; text-align: left; } .xs-material-card:hover { transform: translateY(-2px); } .xs-material-card.is-selected { outline: 2px solid var(--xs-accent-navy, #1E3A8A); outline-offset: 2px; } /* ========================================================================== Phase 1 & 2 Scientific Perceptual Auto-Compensation Rules (/find-research-clues) 1. High-Relief Texture Stroke Grade Compensation (Legge et al., 1990): Counteracts 2.8~3.2 cpd spatial-frequency masking on Hanji & Travertine without layout shift (CLS = 0). 2. Dark-Mode Astigmatic Halation Clamp: Caps specular rim intensity at 0.16 on Obsidian & TechDark surfaces. 3. 256px Tile-Cached Procedural Texture Surface: Bounds SVG GPU rasterization to O(Tile) instead of O(Viewport). ========================================================================== */ .xs-shell[data-xs-texture="hanji"] .xs-message-prose, .xs-shell[data-xs-texture="travertine"] .xs-message-prose, [data-xs-texture="hanji"] .xs-shell .xs-message-prose, [data-xs-texture="travertine"] .xs-shell .xs-message-prose { --xs-texture-grade-wght: 435; font-variation-settings: "wght" var(--xs-texture-grade-wght, 435); -webkit-font-smoothing: antialiased; } [data-xs-harmony="techdark"] .xs-shell, [data-xs-harmony="obsidian"] .xs-shell, .xs-shell[data-xs-harmony="techdark"], .xs-shell[data-xs-harmony="obsidian"] { --xs-light-intensity: 0.16; --xs-specular-rim-top: inset 0 1px 0 0 rgba(255, 255, 255, 0.14); } .xs-shell[data-xs-texture]::before, .xs-material-card { background-size: 256px 256px; background-repeat: repeat; } /* ========================================================================== 5-Module Orthogonal Staging Management System (연출 모듈 통합 관리 시스템) Bindings for: - Module 1: [data-xs-craft] & [data-xs-curvature] - Module 2: [data-xs-harmony] (Tokens & Harmonies) - Module 3: [data-xs-topology] & [data-xs-density] - Module 4: [data-xs-light] & Optical Vectors - Module 5: [data-xs-voice] & [data-xs-spring] ========================================================================== */ /* Module 1A: Surface Craft Archetypes */ [data-xs-craft="liquid-glass"] { --xs-craft-blur: 24px; --xs-craft-saturate: 185%; } [data-xs-craft="tactile-craft"] { --xs-craft-blur: 12px; --xs-craft-saturate: 140%; } [data-xs-craft="editorial-press"] { --xs-craft-blur: 0px; --xs-craft-saturate: 100%; --xs-specular-rim-top: inset 0 1px 0 0 transparent; } [data-xs-craft="zero-chrome"] { --xs-craft-blur: 6px; --xs-craft-saturate: 105%; --xs-border-subtle: transparent; } /* Module 1B: Concentric Curvature Profiles (|R_outer - d_pad - R_inner| <= 1px) */ [data-xs-curvature="concentric-app"] { --xs-concentric-outer: 16px; --xs-concentric-pad: 6px; --xs-concentric-inner: 10px; } [data-xs-curvature="editorial-soft"] { --xs-concentric-outer: 8px; --xs-concentric-pad: 4px; --xs-concentric-inner: 4px; } [data-xs-curvature="swiss-sharp"] { --xs-concentric-outer: 0px; --xs-concentric-pad: 4px; --xs-concentric-inner: 0px; } /* Module 3: Workspace Topology Presets */ [data-xs-topology="focus-zen"] { --xs-reading-measure: 48rem; } [data-xs-topology="deliberation-5050"] { --xs-reading-measure: 44rem; } [data-xs-density="compact"] { --xs-density-scale: 0.85; } [data-xs-density="comfortable"] { --xs-density-scale: 1; } [data-xs-density="spacious"] { --xs-density-scale: 1.2; } /* Module 5A: Typography Voice */ [data-xs-voice="neo-grotesque"] .xs-message-prose, .xs-shell[data-xs-voice="neo-grotesque"] { font-family: var(--xs-font-sans, "Pretendard Variable", "Inter", system-ui, sans-serif); } [data-xs-voice="editorial-serif"] .xs-message-prose, .xs-shell[data-xs-voice="editorial-serif"] .xs-message-prose { font-family: Georgia, "Noto Serif KR", "AppleMyungjo", serif; } [data-xs-voice="technical-mono"] .xs-message-prose, .xs-shell[data-xs-voice="technical-mono"] .xs-message-prose { font-family: var(--xs-font-mono, "JetBrains Mono", monospace); font-size: 0.92em; } /* Module 5B: Spring Motion Profiles */ [data-xs-spring="critically-damped"] { --xs-ease-spring: cubic-bezier(0.22, 1, 0.36, 1); --xs-duration-spring: 240ms; } [data-xs-spring="snappy"] { --xs-ease-spring: cubic-bezier(0.16, 1, 0.3, 1); --xs-duration-spring: 160ms; } [data-xs-spring="reduced-motion"] { --xs-ease-spring: linear; --xs-duration-spring: 0.01ms; } /* Staging Director Console UI (.xs-director-deck) */ .xs-director-deck { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 14px; padding: 18px; border-radius: var(--xs-concentric-outer, 16px); background: var(--xs-surface-primary, #FFFFFF); border: 1px solid var(--xs-border-subtle, #E2E8F0); box-shadow: var(--xs-tactile-bevel-shadow); } .xs-director-module-card { display: flex; flex-direction: column; gap: 8px; padding: 14px; border-radius: var(--xs-concentric-inner, 10px); background: var(--xs-bg-canvas, #F8FAFC); border: 1px solid var(--xs-border-subtle, #E2E8F0); } .xs-director-module-header { display: flex; align-items: center; justify-content: space-between; font-size: 0.78rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--xs-text-secondary, #475569); } .xs-director-telemetry-bar { display: flex; flex-wrap: wrap; gap: 10px; padding: 12px 16px; border-radius: var(--xs-concentric-inner, 10px); background: var(--xs-bg-subtle, #F1F5F9); border: 1px solid var(--xs-border-subtle, #E2E8F0); font-family: var(--xs-font-mono, monospace); font-size: 0.78rem; } /* ========================================================================== Multi-Layer Optical & Material Compositing Stack Engine (다중 레이어 적층 합성) Z0 (Base Substrate) -> Z1 (Primary Grain) -> Z2 (Secondary Cross-Weave) -> Z3 (Translucent Glaze/Blur) -> Z4 (Incident Caustic Light) -> Z5 (Specular Rim Bevel) -> Z10 (Protected Deterministic Text Foreground) ========================================================================== */ .xs-layer-stack-stage { --xs-layer-1-opacity: 0.16; --xs-layer-1-blend: multiply; --xs-layer-1-scale: 256px; --xs-layer-2-opacity: 0.08; --xs-layer-2-blend: soft-light; --xs-layer-2-scale: 128px; --xs-layer-3-opacity: 0.74; --xs-layer-3-blend: normal; --xs-layer-4-opacity: 0.22; --xs-layer-4-blend: overlay; --xs-layer-5-opacity: 0.85; --xs-layer-5-blend: screen; --xs-stack-blur: 18px; --xs-stack-font-wght: 435; position: relative; border-radius: var(--xs-concentric-outer, 16px); background: var(--xs-bg-canvas, #F4F8F6); border: 1px solid var(--xs-border-subtle, #CBD5E1); overflow: hidden; min-height: 290px; padding: 24px; transition: transform 360ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 360ms ease; transform-style: preserve-3d; } .xs-optical-layer { position: absolute; inset: 0; pointer-events: none; border-radius: inherit; transition: opacity 180ms ease, transform 420ms cubic-bezier(0.22, 1, 0.36, 1), box-shadow 420ms ease; } /* Z1: Primary Deep Grain Layer */ .xs-optical-layer[data-layer-slot="1"] { z-index: 1; opacity: var(--xs-layer-1-opacity, 0.16); mix-blend-mode: var(--xs-layer-1-blend, multiply); background-size: var(--xs-layer-1-scale, 256px) var(--xs-layer-1-scale, 256px); background-repeat: repeat; } /* Z2: Secondary Cross-Weave / Micro-Grain Layer */ .xs-optical-layer[data-layer-slot="2"] { z-index: 2; opacity: var(--xs-layer-2-opacity, 0.08); mix-blend-mode: var(--xs-layer-2-blend, soft-light); background-size: var(--xs-layer-2-scale, 128px) var(--xs-layer-2-scale, 128px); background-repeat: repeat; } /* Z3: Translucent Glaze / Liquid Glass Refraction Film */ .xs-optical-layer[data-layer-slot="3"] { z-index: 3; opacity: var(--xs-layer-3-opacity, 0.74); mix-blend-mode: var(--xs-layer-3-blend, normal); background: color-mix(in srgb, var(--xs-surface-primary, #FFFFFF) 78%, transparent); backdrop-filter: blur(var(--xs-stack-blur, 18px)) saturate(175%); -webkit-backdrop-filter: blur(var(--xs-stack-blur, 18px)) saturate(175%); } /* Z4: Incident Caustic Light & Atmospheric Gradient */ .xs-optical-layer[data-layer-slot="4"] { z-index: 4; opacity: var(--xs-layer-4-opacity, 0.22); mix-blend-mode: var(--xs-layer-4-blend, overlay); background: radial-gradient( circle at var(--xs-light-x, 28%) var(--xs-light-y, 16%), rgba(255, 252, 240, 0.92) 0%, rgba(255, 255, 255, 0.25) 42%, transparent 78% ); } /* Z5: 1px Concentric Specular Rim & Inner Bevel */ .xs-optical-layer[data-layer-slot="5"] { z-index: 5; opacity: var(--xs-layer-5-opacity, 0.85); mix-blend-mode: var(--xs-layer-5-blend, screen); box-shadow: inset 0 1.5px 0 0 rgba(255, 255, 255, 0.85), inset 0 -1px 0 0 rgba(15, 23, 42, 0.08), inset 1px 0 0 0 rgba(255, 255, 255, 0.35), inset -1px 0 0 0 rgba(255, 255, 255, 0.35); } /* Z10: Deterministic Native Typography Foreground (Never muddied by background layers) */ .xs-layer-foreground-content { position: relative; z-index: 10; font-variation-settings: "wght" var(--xs-stack-font-wght, 435); } /* Exploded Isometric 3D Inspection Mode ([data-xs-stack-exploded="true"]) */ .xs-layer-stack-stage[data-xs-stack-exploded="true"] { overflow: visible; margin: 44px auto; transform: perspective(1100px) rotateX(42deg) rotateZ(-18deg) scale(0.88); box-shadow: -18px 28px 38px rgba(15, 23, 42, 0.18); } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-optical-layer { border: 1.5px dashed rgba(37, 99, 235, 0.55); box-shadow: -8px 12px 20px rgba(15, 23, 42, 0.10); } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-optical-layer[data-layer-slot="1"] { transform: translate3d(0, -14px, 18px); } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-optical-layer[data-layer-slot="2"] { transform: translate3d(0, -28px, 36px); } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-optical-layer[data-layer-slot="3"] { transform: translate3d(0, -42px, 54px); } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-optical-layer[data-layer-slot="4"] { transform: translate3d(0, -56px, 72px); } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-optical-layer[data-layer-slot="5"] { transform: translate3d(0, -70px, 90px); } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-layer-foreground-content { transform: translate3d(0, -86px, 110px); background: color-mix(in srgb, var(--xs-surface-primary, #FFFFFF) 88%, transparent); padding: 16px; border-radius: 10px; border: 1.5px solid var(--xs-color-accent, #0051FF); box-shadow: -10px 16px 26px rgba(15, 23, 42, 0.14); } .xs-layer-badge-tag { display: none; position: absolute; top: 8px; right: 10px; padding: 2px 7px; border-radius: 4px; background: rgba(15, 23, 42, 0.82); color: #F8FAFC; font-family: var(--xs-font-mono, monospace); font-size: 10px; font-weight: 700; } .xs-layer-stack-stage[data-xs-stack-exploded="true"] .xs-layer-badge-tag { display: inline-block; } /* --- File: publication-widgets.css --- */ /** * xsDesignSystem — Modular Widget & Publication Component System (v2.0.0) * Zero-AI Invariants: No ungrounded bento grids, no neon glows, pure typography & spatial grid. * APCA Lc >= 75 Compliance & WCAG 2.2 AAA Double-Ring Focus. */ /* ========================================================================== 1. BASE MODULAR WIDGET CONTAINER & SLOTS ========================================================================== */ .xs-widget-container { display: grid; grid-template-columns: repeat(auto-fill, minmax(320px, 1fr)); gap: 24px; width: 100%; margin: 24px 0; } .xs-widget-container--duo { grid-template-columns: repeat(auto-fit, minmax(340px, 1fr)); } .xs-widget { display: flex; flex-direction: column; background-color: var(--xs-widget-bg, var(--xs-bg-surface, #FFFFFF)); border: 1px solid var(--xs-widget-border, var(--xs-border-subtle, #E2E8F0)); border-radius: var(--xs-widget-radius, var(--xs-radius-sm, 6px)); box-shadow: var(--xs-widget-shadow, var(--xs-shadow-subtle, 0 1px 3px rgba(0,0,0,0.04))); overflow: hidden; transition: border-color 0.15s ease, box-shadow 0.15s ease; position: relative; font-family: inherit; } .xs-widget:focus-within { border-color: var(--xs-border-strong); } .xs-widget:focus-visible { outline: var(--xs-focus-ring-width, 2px) solid var(--xs-focus-ring-outer, #1E3A8A); outline-offset: var(--xs-focus-ring-offset, 2px); } /* Header & Meta */ .xs-widget__header { display: flex; align-items: center; justify-content: space-between; padding: 12px 16px; background-color: var(--xs-widget-header-bg, var(--xs-bg-subtle, #F8FAFC)); border-bottom: 1px solid var(--xs-widget-border, var(--xs-border-subtle, #E2E8F0)); gap: 12px; } .xs-widget__header-lead { display: flex; align-items: center; gap: 8px; } .xs-widget__category { font-size: 11px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--xs-text-muted, #64748B); } .xs-widget__title { margin: 0; font-size: 14px; font-weight: 600; color: var(--xs-text-ink, #0F172A); line-height: 1.4; } .xs-widget__badge { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: 2px; background-color: var(--xs-bg-subtle, #F1F5F9); color: var(--xs-text-body, #334155); border: 1px solid var(--xs-border-subtle, #CBD5E1); } .xs-widget__badge--seal { background-color: var(--xs-accent-vermilion-light, #FEF2F2); color: var(--xs-accent-vermilion, #C9381F); border-color: var(--xs-accent-vermilion-border, #FECACA); } .xs-widget__badge--indigo { background-color: var(--xs-accent-navy-light, #EEF2FF); color: var(--xs-accent-navy, #182B49); border-color: var(--xs-accent-navy-border, #C7D2FE); } /* Body & Slots */ .xs-widget__body { padding: 16px; flex: 1 1 auto; color: var(--xs-text-body, #334155); font-size: 13px; line-height: 1.6; } .xs-widget__slot { margin-top: 12px; } /* Footer & Actions */ .xs-widget__footer { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; background-color: var(--xs-bg-subtle, #FAFBFD); border-top: 1px solid var(--xs-border-subtle, #F0F0F0); font-size: 12px; color: var(--xs-text-muted, #64748B); gap: 8px; } .xs-widget__actions { display: flex; align-items: center; gap: 8px; } .xs-widget__btn { display: inline-flex; align-items: center; justify-content: center; min-height: 32px; padding: 4px 12px; font-size: 12px; font-weight: 600; border-radius: var(--xs-radius-xs, 4px); border: 1px solid var(--xs-border-subtle, #CBD5E1); background-color: var(--xs-bg-surface, #FFFFFF); color: var(--xs-text-ink, #0F172A); text-decoration: none; cursor: pointer; transition: all 0.12s ease; } .xs-widget__btn:hover { background-color: var(--xs-bg-subtle, #F1F5F9); border-color: var(--xs-border-strong, #94A3B8); color: var(--xs-text-ink, #0F172A); } .xs-widget__btn:focus-visible { outline: 2px solid var(--xs-focus-ring-outer, #1E3A8A); outline-offset: 1px; } .xs-widget__btn--primary { background-color: var(--xs-accent-navy, #1E3A8A); color: #FFFFFF; border-color: var(--xs-accent-navy, #1E3A8A); } .xs-widget__btn--primary:hover { background-color: var(--xs-accent-navy-hover, #1E293B); color: #FFFFFF; } /* ========================================================================== 2. SPECIALIZED PUBLICATION WIDGET: BOOK COLOPHON (판권지 위젯) ========================================================================== */ .xs-widget--colophon { background-color: var(--xs-bg-surface, #F7F4EE); border: 1px solid var(--xs-border-subtle, #DCD7CD); font-family: -apple-system, BlinkMacSystemFont, "Apple SD Gothic Neo", "Noto Serif KR", serif; } .xs-widget--colophon .xs-widget__header { background-color: transparent; border-bottom: 2px solid var(--xs-border-strong, #090B0E); padding: 16px 20px 12px; } .xs-widget--colophon .xs-widget__body { padding: 20px; } .xs-colophon-grid { display: grid; grid-template-columns: 80px 1fr; row-gap: 8px; column-gap: 12px; font-size: 13px; line-height: 1.6; color: var(--xs-text-body, #121314); } .xs-colophon-grid dt { font-weight: 600; color: var(--xs-text-muted, #1C1917); letter-spacing: -0.01em; } .xs-colophon-grid dd { margin: 0; color: var(--xs-text-ink, #121314); } .xs-colophon-seal { width: var(--xs-widget-colophon-seal-size, 48px); height: var(--xs-widget-colophon-seal-size, 48px); border: 2px solid var(--xs-accent-vermilion, #C9381F); border-radius: 4px; display: flex; align-items: center; justify-content: center; font-family: serif; font-weight: 900; font-size: 13px; color: var(--xs-accent-vermilion, #C9381F); letter-spacing: 1px; line-height: 1.1; text-align: center; padding: 2px; box-shadow: inset 0 0 4px rgba(201, 56, 31, 0.15); background: var(--xs-accent-vermilion-light, rgba(201, 56, 31, 0.03)); } .xs-colophon-footer { display: flex; align-items: flex-end; justify-content: space-between; margin-top: 20px; padding-top: 16px; border-top: 1px dashed var(--xs-border-subtle, #DCD7CD); } .xs-colophon-isbn { font-family: "SF Mono", Menlo, Consolas, monospace; font-size: 12px; letter-spacing: 0.04em; color: var(--xs-text-muted, #1C1917); } /* ========================================================================== 3. SPECIALIZED PUBLICATION WIDGET: PALETTE & SUBSTRATE MATRIX (지업·잉크 스와치 위젯) ========================================================================== */ .xs-widget--palette .xs-palette-matrix { display: grid; grid-template-columns: repeat(auto-fill, minmax(130px, 1fr)); gap: 12px; } .xs-swatch-item { display: flex; flex-direction: column; padding: 8px; border: 1px solid var(--xs-border-subtle, #E2E8F0); border-radius: 4px; background: var(--xs-bg-surface, #FFFFFF); cursor: pointer; transition: transform 0.12s ease, border-color 0.12s ease; position: relative; } .xs-swatch-item:hover { border-color: var(--xs-border-strong); transform: translateY(-1px); } .xs-swatch-item:focus-visible { outline: 2px solid var(--xs-focus-ring-outer, #1E3A8A); outline-offset: 1px; } .xs-swatch-preview { height: 44px; border-radius: 2px; border: 1px solid var(--xs-border-subtle); margin-bottom: 8px; position: relative; display: flex; align-items: center; justify-content: center; } .xs-swatch-name { font-size: 12px; font-weight: 600; color: var(--xs-text-ink, #0F172A); margin-bottom: 2px; } .xs-swatch-spec { font-size: 11px; font-family: "SF Mono", Menlo, Consolas, monospace; color: var(--xs-text-muted, #64748B); } /* ========================================================================== 4. SPECIALIZED PUBLICATION WIDGET: EDITORIAL GRID & IMPOSITION (조판·판형 위젯) ========================================================================== */ .xs-widget--editorial-grid .xs-grid-stage { background-color: var(--xs-bg-subtle, #F1F5F9); border: 1px solid var(--xs-border-subtle, #CBD5E1); border-radius: 4px; padding: 16px; display: flex; align-items: center; justify-content: center; min-height: 220px; } .xs-page-geometry { width: 160px; height: 220px; background-color: var(--xs-pub-substrate-munken-pure, #F7F4EE); border: 1px solid #94A3B8; position: relative; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.1); padding: 14px 12px 16px 16px; /* Inner margin emulated */ display: flex; flex-direction: column; } .xs-page-bleed-guide { position: absolute; top: -4px; left: -4px; right: -4px; bottom: -4px; border: 1px dashed #DC2626; pointer-events: none; } .xs-page-text-area { flex: 1; border: 1px solid rgba(24, 43, 73, 0.25); background-color: rgba(255, 255, 255, 0.6); padding: 8px; display: flex; flex-direction: column; gap: 4px; } .xs-page-text-line { height: 3px; background-color: var(--xs-pub-ink-rich-black, #090B0E); opacity: 0.25; border-radius: 1px; } .xs-page-text-line--title { height: 6px; width: 70%; opacity: 0.8; background-color: var(--xs-pub-ink-rich-black, #090B0E); } .xs-geometry-meta { display: grid; grid-template-columns: repeat(2, 1fr); gap: 8px; margin-top: 12px; font-size: 12px; } .xs-geometry-meta-item { padding: 6px 10px; background: var(--xs-bg-subtle, #F1F5F9); border-radius: 3px; display: flex; justify-content: space-between; } /* ========================================================================== 5. SPECIALIZED WIDGET: 50:50 DELIBERATION (모듈형 심의 위젯) ========================================================================== */ .xs-widget--deliberation .xs-deliberation-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; margin-top: 12px; } @media (max-width: 640px) { .xs-widget--deliberation .xs-deliberation-split { grid-template-columns: 1fr; } } .xs-deliberation-pane { padding: 12px; border-radius: 4px; border: 1px solid var(--xs-border-subtle, #E2E8F0); background: #FFFFFF; } .xs-deliberation-pane--thesis { border-left: 3px solid var(--xs-primitive-sage-700, #15803D); background: #F0FDF4; } .xs-deliberation-pane--antithesis { border-left: 3px solid var(--xs-primitive-red-600, #DC2626); background: #FEF2F2; } .xs-deliberation-pane-title { font-size: 12px; font-weight: 700; margin-bottom: 6px; display: flex; align-items: center; gap: 6px; } .xs-deliberation-pane--thesis .xs-deliberation-pane-title { color: var(--xs-primitive-sage-800, #166534); } .xs-deliberation-pane--antithesis .xs-deliberation-pane-title { color: var(--xs-primitive-red-700, #B91C1C); } /* ========================================================================== 6. SPECIALIZED WIDGET: 3-STRATUM KNOWLEDGE (3층 지식 위젯) ========================================================================== */ .xs-widget--stratum .xs-stratum-list { display: flex; flex-direction: column; gap: 8px; } .xs-stratum-row { display: flex; align-items: center; justify-content: space-between; padding: 8px 12px; border: 1px solid var(--xs-border-subtle, #E2E8F0); border-radius: 4px; background-color: #FFFFFF; font-size: 13px; } .xs-stratum-row--s1 { border-left: 3px solid var(--xs-primitive-navy-900); } .xs-stratum-row--s2 { border-left: 3px solid var(--xs-primitive-sage-700); } .xs-stratum-row--s3 { border-left: 3px solid var(--xs-primitive-amber-600); } .xs-stratum-row__label { font-weight: 600; color: var(--xs-text-ink, #0F172A); display: flex; align-items: center; gap: 8px; } .xs-stratum-row__type { font-size: 11px; font-family: monospace; padding: 1px 6px; border-radius: 2px; background: var(--xs-bg-subtle, #F1F5F9); color: var(--xs-text-muted, #64748B); } /* --- File: image-staging-engine.css --- */ /** * xsDesignSystems — 3-Layer Hybrid Visual Staging Styles * Zero-AI Invariant: Zero Contextless Neon Glow, Spot Color <= 3%, 1:1 Light/Dark Parity. */ .xs-hybrid-stage { position: relative; overflow: hidden; box-sizing: border-box; font-family: var(--xs-font-sans, -apple-system, BlinkMacSystemFont, "Pretendard", sans-serif); transition: background-color 0.2s ease, border-color 0.2s ease; } .xs-hybrid-layer { box-sizing: border-box; } .xs-layer-scene { pointer-events: none; user-select: none; } .xs-layer-vectors { pointer-events: none; user-select: none; } .xs-layer-typography { position: relative; pointer-events: auto; } /* 5 Kinetic Archetype Geometry Hooks */ .xs-hybrid-stage[data-archetype="kinetic-pivot"] .xs-layer-vectors svg { transform-origin: center center; } .xs-hybrid-stage[data-archetype="gravitational-stream"] .xs-layer-vectors svg path { stroke-dasharray: 6 3; } .xs-hybrid-stage[data-archetype="scale-caliper"] .xs-layer-vectors line { stroke-width: 1px; } .xs-hybrid-stage[data-archetype="precision-docking"] .xs-layer-vectors rect { rx: 2px; } .xs-hybrid-stage[data-archetype="hydraulic-engine"] .xs-layer-vectors path { stroke-linejoin: round; } /* Zero-AI Compliance: No uncontextual glowing box shadows */ .xs-hybrid-stage:focus-visible { outline: 2px solid var(--xs-brand-primary, #2563EB); outline-offset: 2px; } /* Fluid responsive typography within hybrid stage */ .xs-hybrid-stage h2 { font-size: clamp(1.25rem, 2.5vw, 1.875rem); letter-spacing: -0.02em; } .xs-hybrid-stage p { font-size: clamp(0.875rem, 1.2vw, 1rem); line-height: 1.6; } @media (max-width: 768px) { .xs-hybrid-stage { padding: 16px; min-height: 380px; } .xs-hybrid-metrics { grid-template-columns: 1fr; } } /* --- File: carbon-structural.css --- */ /** * Carbon Design System — Structural & Unstyled Component Baseline (v1.0.0) * Pure Neutral / Wireframe / Headless UI Modules * No Colors, No Theming, No Decorative Effects */ /* ========================================================================== 0. Baseline Reset, Focus Management & Accessibility Utilities (WAI-ARIA) ========================================================================== */ .carbon-root, .carbon-root * { box-sizing: border-box; margin: 0; padding: 0; font-family: inherit; } /* Accessible Focus-Visible (Double-Ring APCA Lc 75+ & High-Contrast Compliant) */ :focus { outline: none; } /* Strict Input Modality Isolation: Completely suppress outline during mouse/pointer interaction */ :focus:not(:focus-visible), .carbon-root :focus:not(:focus-visible) { outline: none !important; box-shadow: none !important; } :focus-visible, .carbon-root button:focus-visible, .carbon-root input:focus-visible, .carbon-root select:focus-visible, .carbon-root textarea:focus-visible, .carbon-root a:focus-visible, .carbon-root [tabindex]:focus-visible, .carbon-root [role="button"]:focus-visible, .carbon-root [role="tab"]:focus-visible, .carbon-root [role="treeitem"]:focus-visible, .carbon-root [role="menuitem"]:focus-visible, .carbon-root [role="option"]:focus-visible { outline: var(--xs-focus-ring-width, 2px) solid var(--xs-focus-ring-outer, #1E3A8A) !important; outline-offset: var(--xs-focus-ring-offset, 2px) !important; box-shadow: 0 0 0 var(--xs-focus-ring-offset, 2px) var(--xs-focus-ring-inner, #FFFFFF) !important; transition: outline-offset 0.1s ease, box-shadow 0.1s ease; } /* Windows High Contrast / Forced Colors Mode */ @media (forced-colors: active) { :focus-visible, .carbon-root button:focus-visible, .carbon-root input:focus-visible, .carbon-root select:focus-visible, .carbon-root textarea:focus-visible, .carbon-root a:focus-visible, .carbon-root [tabindex]:focus-visible, .carbon-root [role="button"]:focus-visible, .carbon-root [role="tab"]:focus-visible, .carbon-root [role="treeitem"]:focus-visible, .carbon-root [role="menuitem"]:focus-visible, .carbon-root [role="option"]:focus-visible { outline: 3px solid Highlight !important; outline-offset: 3px !important; box-shadow: none !important; } } /* Screen Reader Only (Visually Hidden, Accessible to Assistive Tech) */ .carbon-sr-only, .carbon-visually-hidden { position: absolute !important; width: 1px !important; height: 1px !important; padding: 0 !important; margin: -1px !important; overflow: hidden !important; clip: rect(0, 0, 0, 0) !important; white-space: nowrap !important; border: 0 !important; } /* Skip Navigation Link */ .carbon-skip-link { position: absolute; top: -9999px; left: 16px; background: #0F172A; color: #FFFFFF; padding: 8px 16px; font-size: 13px; font-weight: 700; text-decoration: none; z-index: 9999; border: 2px solid #FFFFFF; } .carbon-skip-link:focus, .carbon-skip-link:focus-visible { top: 16px; } /* Reduced Motion Support */ @media (prefers-reduced-motion: reduce) { * { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; scroll-behavior: auto !important; } } /* ========================================================================== A. Navigation Components ========================================================================== */ /* 1. Header / UI Shell */ .carbon-header { display: flex; align-items: center; justify-content: space-between; height: 48px; border-bottom: 1px solid #71717A; background: #FFFFFF; padding: 0 16px; position: relative; z-index: 100; } .carbon-header-left, .carbon-header-right { display: flex; align-items: center; gap: 12px; } .carbon-header-title { font-weight: 700; font-size: 14px; } .carbon-header-nav { display: flex; list-style: none; gap: 8px; } .carbon-header-nav-item a { display: block; padding: 8px 12px; text-decoration: none; color: inherit; font-size: 13px; border: 1px solid transparent; } .carbon-header-nav-item a:hover { border-color: #A1A1AA; } /* 2. Side Navigation / Tree View */ .carbon-sidenav { width: 240px; border-right: 1px solid #71717A; background: #FAFAFA; display: flex; flex-direction: column; } .carbon-sidenav-list { list-style: none; padding: 8px 0; } .carbon-sidenav-item a, .carbon-sidenav-item button { display: flex; align-items: center; justify-content: space-between; width: 100%; padding: 10px 16px; font-size: 13px; text-align: left; background: none; border: none; border-left: 3px solid transparent; cursor: pointer; color: inherit; } .carbon-sidenav-item.is-active a, .carbon-sidenav-item.is-active button { font-weight: 700; border-left-color: #18181B; background: #F4F4F5; } /* Tree View */ .carbon-treeview { list-style: none; font-size: 13px; } .carbon-treeview-node { padding-left: 16px; } .carbon-treeview-label { display: flex; align-items: center; gap: 6px; padding: 6px 8px; cursor: pointer; border: 1px solid transparent; } .carbon-treeview-label:hover { border-color: #D4D4D8; } /* 3. Breadcrumb */ .carbon-breadcrumb { display: flex; align-items: center; list-style: none; gap: 6px; font-size: 12px; } .carbon-breadcrumb-item:not(:last-child)::after { content: "/"; margin-left: 6px; color: #A1A1AA; } .carbon-breadcrumb-item a { color: inherit; text-decoration: underline; } .carbon-breadcrumb-item.is-current { font-weight: 700; text-decoration: none; } /* 4. Pagination */ .carbon-pagination { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px; border-top: 1px solid #E4E4E7; font-size: 12px; } .carbon-pagination-controls { display: flex; align-items: center; gap: 8px; } /* 5. Tabs */ .carbon-tabs { display: flex; flex-direction: column; } .carbon-tab-list { display: flex; list-style: none; border-bottom: 1px solid var(--xs-border-subtle, #D4D4D8); gap: 2px; } .carbon-tab-btn, .carbon-tab { padding: 10px 18px; font-size: 13px; font-weight: 500; background: var(--xs-bg-surface, transparent); border: 1px solid var(--xs-border-subtle, transparent); border-bottom: 2px solid transparent; border-radius: var(--xs-radius-xs, 4px) var(--xs-radius-xs, 4px) 0 0; cursor: pointer; color: var(--xs-text-muted, inherit); transition: all 0.12s ease; } .carbon-tab-btn:hover, .carbon-tab:hover { background: var(--xs-bg-subtle, #F4F4F5); color: var(--xs-text-ink, inherit); } .carbon-tab-btn[aria-selected="true"], .carbon-tab-btn.is-active, .carbon-tab[aria-selected="true"], .carbon-tab.active, .carbon-tab.is-active { font-weight: 700; color: var(--xs-accent-navy, #18181B); background: var(--xs-accent-navy-light, #EEF2FF); border-color: var(--xs-accent-navy-border, #C7D2FE); border-bottom-color: var(--xs-accent-navy, #18181B); } .carbon-tab-panel { padding: 16px 0; display: none; } .carbon-tab-panel.is-active { display: block; } /* 6. Content Switcher */ .carbon-content-switcher { display: inline-flex; border: 1px solid #71717A; } .carbon-content-switcher-btn { padding: 8px 16px; font-size: 12px; font-weight: 500; background: #FFFFFF; border: none; border-right: 1px solid #71717A; cursor: pointer; color: inherit; } .carbon-content-switcher-btn:last-child { border-right: none; } .carbon-content-switcher-btn[aria-selected="true"], .carbon-content-switcher-btn.is-active { background: #18181B; color: #FFFFFF; font-weight: 700; } /* ========================================================================== B. Inputs & Form Controls ========================================================================== */ .carbon-form-group { display: flex; flex-direction: column; gap: 4px; margin-bottom: 16px; } .carbon-label { font-size: 12px; font-weight: 600; color: inherit; } .carbon-helper-text { font-size: 11px; color: #71717A; } .carbon-error-text { font-size: 11px; font-weight: 600; color: #000000; display: none; } .has-error .carbon-error-text { display: block; } /* Text Input & Text Area */ .carbon-text-input, .carbon-textarea, .carbon-select-input { width: 100%; padding: 8px 12px; font-size: 13px; border: 1px solid #71717A; background: #FFFFFF; color: inherit; outline: none; } .carbon-text-input:focus, .carbon-textarea:focus, .carbon-select-input:focus { border-width: 2px; outline: 1px solid #000000; } .carbon-textarea { min-height: 80px; resize: vertical; } /* Number Input */ .carbon-number-input-wrap { display: inline-flex; border: 1px solid #71717A; } .carbon-number-input { border: none; padding: 8px 12px; width: 100px; outline: none; font-size: 13px; } .carbon-number-steppers { display: flex; flex-direction: column; border-left: 1px solid #71717A; } .carbon-stepper-btn { background: #FAFAFA; border: none; border-bottom: 1px solid #E4E4E7; padding: 2px 8px; cursor: pointer; font-size: 10px; } .carbon-stepper-btn:last-child { border-bottom: none; } /* Checkbox & Radio */ .carbon-checkbox-label, .carbon-radio-label { display: inline-flex; align-items: center; gap: 8px; font-size: 13px; cursor: pointer; } .carbon-checkbox-input, .carbon-radio-input { width: 16px; height: 16px; border: 1px solid #71717A; cursor: pointer; } /* Toggle / Switch */ .carbon-toggle-label { display: inline-flex; align-items: center; gap: 10px; font-size: 13px; cursor: pointer; } .carbon-toggle-track { width: 36px; height: 20px; background: #E4E4E7; border: 1px solid #71717A; border-radius: 10px; position: relative; transition: all 150ms ease; } .carbon-toggle-thumb { width: 14px; height: 14px; background: #18181B; border-radius: 50%; position: absolute; top: 2px; left: 2px; transition: all 150ms ease; } .carbon-toggle-input:checked + .carbon-toggle-track { background: #18181B; } .carbon-toggle-input:checked + .carbon-toggle-track .carbon-toggle-thumb { background: #FFFFFF; transform: translateX(16px); } .carbon-toggle-input { display: none; } /* Slider */ .carbon-slider-wrap { display: flex; align-items: center; gap: 12px; width: 100%; } .carbon-slider-input { flex: 1; cursor: pointer; } .carbon-slider-val { font-size: 12px; font-family: monospace; width: 36px; } /* File Uploader */ .carbon-file-uploader-dropzone { border: 2px dashed #71717A; padding: 24px; text-align: center; background: #FAFAFA; cursor: pointer; } .carbon-file-list { list-style: none; margin-top: 8px; display: flex; flex-direction: column; gap: 4px; } .carbon-file-item { display: flex; justify-content: space-between; align-items: center; padding: 6px 12px; background: #FFFFFF; border: 1px solid #E4E4E7; font-size: 12px; } /* Search */ .carbon-search-wrap { position: relative; display: flex; align-items: center; } .carbon-search-input { width: 100%; padding: 8px 32px 8px 12px; border: 1px solid #71717A; font-size: 13px; outline: none; } /* ========================================================================== C. Buttons & Action Components ========================================================================== */ .carbon-btn { display: inline-flex; align-items: center; justify-content: center; gap: 8px; padding: 10px 16px; font-size: 13px; font-weight: 600; border: 1px solid var(--xs-border-subtle, #18181B); border-radius: var(--xs-radius-xs, 4px); background: var(--xs-bg-surface, #18181B); color: var(--xs-text-ink, #FFFFFF); cursor: pointer; text-decoration: none; transition: all 0.12s ease; } .carbon-btn:hover { background: var(--xs-bg-subtle, #27272E); border-color: var(--xs-border-strong, #71717A); } .carbon-btn-secondary, .carbon-btn--secondary { background: var(--xs-bg-surface, #FFFFFF); color: var(--xs-text-ink, #18181B); border: 1px solid var(--xs-border-strong, #18181B); } .carbon-btn-tertiary, .carbon-btn--tertiary { background: transparent; color: var(--xs-text-ink, #18181B); border: 1px solid var(--xs-border-subtle, #71717A); } .carbon-btn-ghost, .carbon-btn--ghost { background: transparent; color: var(--xs-text-body, #18181B); border: 1px solid transparent; } .carbon-btn-ghost:hover, .carbon-btn--ghost:hover { background: var(--xs-bg-surface, rgba(255,255,255,0.08)); border-color: var(--xs-border-subtle, #D4D4D8); color: var(--xs-text-ink, #18181B); } .carbon-btn.active, .carbon-btn.is-active, .carbon-btn-ghost.active, .carbon-btn--ghost.active { background: var(--xs-accent-navy, #1E3A8A); color: #FFFFFF; border-color: var(--xs-accent-navy, #1E3A8A); } .carbon-btn-danger, .carbon-btn--danger { background: var(--xs-accent-vermilion, #DC2626); color: #FFFFFF; border: 1px solid var(--xs-accent-vermilion, #DC2626); } .carbon-btn-set { display: flex; gap: 1px; border: 1px solid #18181B; } .carbon-btn-set .carbon-btn { border: none; flex: 1; } /* Overflow Menu */ .carbon-overflow-menu-wrap { position: relative; display: inline-block; } .carbon-overflow-menu-btn { background: none; border: 1px solid transparent; padding: 4px 8px; font-size: 16px; cursor: pointer; } .carbon-overflow-menu-btn:hover { border-color: #71717A; } .carbon-overflow-menu-dropdown { position: absolute; top: 100%; right: 0; background: #FFFFFF; border: 1px solid #71717A; min-width: 140px; list-style: none; z-index: 200; display: none; } .carbon-overflow-menu-dropdown.is-open { display: block; } .carbon-overflow-menu-item a, .carbon-overflow-menu-item button { display: block; width: 100%; padding: 8px 12px; font-size: 12px; text-align: left; background: none; border: none; cursor: pointer; color: inherit; text-decoration: none; } .carbon-overflow-menu-item:hover { background: #F4F4F5; } /* Link */ .carbon-link { font-size: 13px; color: inherit; text-decoration: underline; cursor: pointer; } /* ========================================================================== D. Data Display & Content Structure ========================================================================== */ /* Data Table */ .carbon-table-container { width: 100%; border: 1px solid #71717A; overflow-x: auto; } .carbon-table { width: 100%; border-collapse: collapse; font-size: 13px; text-align: left; } .carbon-table th { background: #F4F4F5; padding: 10px 14px; font-weight: 700; border-bottom: 1px solid #71717A; border-right: 1px solid #E4E4E7; } .carbon-table td { padding: 10px 14px; border-bottom: 1px solid #E4E4E7; border-right: 1px solid #E4E4E7; } .carbon-table tr:hover td { background: #FAFAFA; } /* Structured List */ .carbon-structured-list { width: 100%; border-collapse: collapse; font-size: 13px; } .carbon-structured-list th { padding: 8px 12px; font-weight: 700; border-bottom: 2px solid #18181B; text-align: left; } .carbon-structured-list td { padding: 8px 12px; border-bottom: 1px solid #E4E4E7; } /* Accordion */ .carbon-accordion { border-top: 1px solid #71717A; list-style: none; } .carbon-accordion-item { border-bottom: 1px solid #71717A; } .carbon-accordion-header { width: 100%; padding: 12px 16px; background: none; border: none; font-size: 13px; font-weight: 700; display: flex; justify-content: space-between; align-items: center; cursor: pointer; text-align: left; } .carbon-accordion-content { padding: 0 16px 12px; font-size: 13px; display: none; } .carbon-accordion-item.is-open .carbon-accordion-content { display: block; } /* Tile */ .carbon-tile { border: 1px solid #71717A; background: #FFFFFF; padding: 16px; display: flex; flex-direction: column; gap: 8px; } .carbon-tile.is-clickable { cursor: pointer; } .carbon-tile.is-clickable:hover { border-width: 2px; } /* Code Snippet */ .carbon-code-snippet { border: 1px solid #71717A; background: #F4F4F5; padding: 12px 16px; font-family: monospace; font-size: 12px; position: relative; overflow-x: auto; } .carbon-code-snippet-inline { border: 1px solid #A1A1AA; background: #F4F4F5; padding: 2px 6px; font-family: monospace; font-size: 11px; } /* Tag / Badge */ .carbon-tag { display: inline-flex; align-items: center; gap: 4px; padding: 2px 8px; font-size: 11px; font-weight: 600; border-radius: var(--xs-radius-xs, 4px); border: 1px solid var(--xs-border-subtle, #18181B); background: var(--xs-bg-subtle, #FFFFFF); color: var(--xs-text-ink, #18181B); } /* ========================================================================== E. Feedback & Status Components ========================================================================== */ /* Notification (Inline / Toast) */ .carbon-notification { border: 1px solid #18181B; border-left: 6px solid #18181B; padding: 12px 16px; background: #FAFAFA; display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; font-size: 13px; margin-bottom: 12px; } .carbon-notification-title { font-weight: 700; margin-bottom: 2px; } .carbon-notification-close { background: none; border: none; cursor: pointer; font-size: 14px; } /* Progress Bar */ .carbon-progress-bar-wrap { width: 100%; display: flex; flex-direction: column; gap: 4px; } .carbon-progress-bar-track { width: 100%; height: 8px; border: 1px solid #71717A; background: #E4E4E7; } .carbon-progress-bar-fill { height: 100%; background: #18181B; width: 0%; } /* Progress Indicator (Step Wizard) */ .carbon-progress-indicator { display: flex; list-style: none; border-bottom: 1px solid #71717A; } .carbon-progress-step { flex: 1; padding: 10px 12px; border-right: 1px solid #E4E4E7; font-size: 12px; display: flex; align-items: center; gap: 6px; } .carbon-progress-step.is-current { font-weight: 700; border-bottom: 3px solid #18181B; } /* Skeleton Loaders */ .carbon-skeleton-text { height: 14px; background: #E4E4E7; margin-bottom: 6px; } .carbon-skeleton-btn { height: 36px; width: 100px; background: #E4E4E7; } /* ========================================================================== F. Overlays & Dialogs ========================================================================== */ /* Modal */ .carbon-modal-backdrop { position: fixed; top: 0; left: 0; width: 100vw; height: 100vh; background: rgba(0, 0, 0, 0.4); display: flex; align-items: center; justify-content: center; z-index: 1000; display: none; } .carbon-modal-backdrop.is-open { display: flex; } .carbon-modal { background: #FFFFFF; border: 1px solid #18181B; width: 100%; max-width: 520px; box-shadow: 0 4px 20px rgba(0,0,0,0.2); } .carbon-modal-header { padding: 16px 20px; border-bottom: 1px solid #E4E4E7; display: flex; justify-content: space-between; align-items: center; } .carbon-modal-title { font-size: 16px; font-weight: 700; } .carbon-modal-body { padding: 20px; font-size: 13px; line-height: 1.5; } .carbon-modal-footer { padding: 12px 20px; border-top: 1px solid #E4E4E7; display: flex; justify-content: flex-end; gap: 8px; } /* Tooltip */ .carbon-tooltip-wrap { position: relative; display: inline-block; } .carbon-tooltip-bubble { position: absolute; bottom: 100%; left: 50%; transform: translateX(-50%); margin-bottom: 6px; padding: 4px 8px; background: #18181B; color: #FFFFFF; font-size: 11px; border: 1px solid #000000; white-space: nowrap; display: none; z-index: 500; } .carbon-tooltip-wrap:hover .carbon-tooltip-bubble { display: block; } /* --- File: staging-decorator.css --- */ /** * xsDesignSystem — Kinetic Staging Decorator (v2.0.0) * Modular Coupling: Carbon Achromatic Components + 5 Geometric Staging Archetypes * (Rotation / Gravity / Caliper / Docking / Kinetic Engine) * Zero-AI Invariants: Spot Color <= 3%, APCA Lc >= 75, High-Precision Mechanical Geometry */ /* ========================================================================== 1. Staging Base Stage & Canvas ========================================================================== */ .xs-stage-container { position: relative; background: var(--xs-bg-surface, #FFFFFF); border: 1px solid var(--xs-border-strong, #CBD5E1); padding: 24px; margin-bottom: 24px; overflow: hidden; transition: border-color var(--xs-transition-fast, 120ms ease); } .xs-stage-container:focus-within { border-color: var(--xs-border-focus, #1E293B); } .xs-stage-header { display: flex; justify-content: space-between; align-items: center; padding-bottom: 12px; margin-bottom: 16px; border-bottom: 1px solid var(--xs-border-subtle, #E2E8F0); } .xs-stage-title { font-family: var(--xs-font-mono, monospace); font-size: 12px; font-weight: 700; letter-spacing: 0.08em; text-transform: uppercase; color: var(--xs-text-secondary, #475569); display: flex; align-items: center; gap: 8px; } .xs-stage-badge { font-family: var(--xs-font-mono, monospace); font-size: 11px; padding: 2px 6px; background: var(--xs-bg-subtle, #F1F5F9); border: 1px solid var(--xs-border-subtle, #CBD5E1); color: var(--xs-text-primary, #0F172A); font-weight: 600; } .xs-stage-badge[data-status="active"] { background: var(--xs-primitive-navy-900, #1E3A8A); color: #FFFFFF; border-color: var(--xs-primitive-navy-900, #1E3A8A); } /* ========================================================================== 2. Archetype 1: Caliper Precision Stage (캘리퍼스 정밀 측정 무대) ========================================================================== */ [xs-stage="caliper"], .xs-stage-caliper { position: relative; border: 1px solid var(--xs-border-strong, #94A3B8); background: var(--xs-bg-surface, #FFFFFF); padding: 28px 20px 20px 20px; } [xs-stage="caliper"]::before, .xs-stage-caliper::before { content: ""; position: absolute; top: 0; left: 0; right: 0; height: 12px; background: repeating-linear-gradient( 90deg, var(--xs-border-strong, #94A3B8) 0, var(--xs-border-strong, #94A3B8) 1px, transparent 1px, transparent 8px ), repeating-linear-gradient( 90deg, var(--xs-text-primary, #0F172A) 0, var(--xs-text-primary, #0F172A) 1px, transparent 1px, transparent 40px ); border-bottom: 1px solid var(--xs-border-subtle, #CBD5E1); opacity: 0.85; } [xs-stage="caliper"]::after, .xs-stage-caliper::after { content: "VERNIER 0.01mm · ISO 2768-m"; position: absolute; top: 14px; right: 8px; font-family: var(--xs-font-mono, monospace); font-size: 9px; letter-spacing: 0.05em; color: var(--xs-text-muted, #64748B); } /* Caliper Jaw Reticle Indicator on focus / hover */ [xs-stage="caliper"]:hover, [xs-stage="caliper"]:focus-within { box-shadow: inset 0 0 0 1px var(--xs-primitive-navy-900, #1E3A8A); } /* ========================================================================== 3. Archetype 2: Kinetic Engine / Manifold Stage (동역학 엔진 & 매니폴드 무대) ========================================================================== */ [xs-stage="engine"], .xs-stage-engine { position: relative; border: 1px solid var(--xs-border-strong, #475569); background: var(--xs-bg-surface, #FFFFFF); padding: 24px; } .xs-stage-engine-manifold { display: grid; grid-template-columns: 1fr auto 1fr; align-items: center; gap: 16px; } .xs-stage-pulse-line { height: 2px; background: repeating-linear-gradient( 90deg, var(--xs-border-strong, #94A3B8) 0, var(--xs-border-strong, #94A3B8) 6px, transparent 6px, transparent 12px ); position: relative; } .xs-stage-pulse-line::after { content: ""; position: absolute; width: 6px; height: 6px; top: -2px; left: 0; background: var(--xs-primitive-navy-900, #1E3A8A); border-radius: 50%; animation: xsPulseTravel 2.4s linear infinite; } @keyframes xsPulseTravel { 0% { left: 0%; opacity: 0.2; } 50% { opacity: 1; } 100% { left: calc(100% - 6px); opacity: 0.2; } } /* ========================================================================== 4. Archetype 3: Docking & Interlock Stage (도킹 & 기계적 결합 무대) ========================================================================== */ [xs-stage="dock"], .xs-stage-dock { position: relative; border: 1px dashed var(--xs-border-strong, #64748B); background: var(--xs-bg-canvas, #F8FAFC); padding: 20px; transition: background-color var(--xs-transition-fast, 120ms ease), border-color var(--xs-transition-fast, 120ms ease); } [xs-stage="dock"]::before { content: "DOCK PIN ⌖"; position: absolute; top: -10px; left: 16px; background: var(--xs-bg-surface, #FFFFFF); padding: 0 6px; font-family: var(--xs-font-mono, monospace); font-size: 10px; font-weight: 700; color: var(--xs-text-secondary, #334155); border: 1px solid var(--xs-border-subtle, #CBD5E1); } .xs-stage-dock[data-docked="true"], [xs-stage="dock"].is-docked { border-style: solid; border-color: var(--xs-primitive-navy-900, #1E3A8A); background: #FFFFFF; } /* ========================================================================== 5. Archetype 4: Gravitational Vector Stage (중력 벡터 & 감쇠 무대) ========================================================================== */ [xs-stage="gravity"], .xs-stage-gravity { position: relative; border-bottom: 3px solid var(--xs-border-strong, #1E293B); background: var(--xs-bg-surface, #FFFFFF); padding: 20px; } .xs-gravity-vector-line { position: absolute; right: 12px; top: 12px; bottom: 12px; width: 1px; background: repeating-linear-gradient( 180deg, var(--xs-border-subtle, #CBD5E1) 0, var(--xs-border-subtle, #CBD5E1) 4px, transparent 4px, transparent 8px ); } .xs-gravity-vector-line::after { content: "▼ 9.806m/s²"; position: absolute; bottom: 0; right: 4px; font-family: var(--xs-font-mono, monospace); font-size: 9px; color: var(--xs-text-muted, #64748B); white-space: nowrap; } /* ========================================================================== 6. Archetype 5: Rotary Dial Stage (회전 극좌표 무대) ========================================================================== */ [xs-stage="rotary"], .xs-stage-rotary { position: relative; background: var(--xs-bg-surface, #FFFFFF); border: 1px solid var(--xs-border-strong, #94A3B8); padding: 24px; text-align: center; } .xs-rotary-dial-rim { display: inline-flex; align-items: center; justify-content: center; width: 160px; height: 160px; border-radius: 50%; border: 2px dashed var(--xs-border-strong, #64748B); position: relative; margin: 12px auto; cursor: grab; user-select: none; } .xs-rotary-dial-needle { position: absolute; top: 50%; left: 50%; width: 50%; height: 2px; background: var(--xs-primitive-navy-900, #1E3A8A); transform-origin: 0% 50%; transform: rotate(0deg); pointer-events: none; } .xs-rotary-dial-needle::after { content: ""; position: absolute; right: 0; top: -3px; width: 8px; height: 8px; background: var(--xs-primitive-navy-900, #1E3A8A); border-radius: 50%; } /* ========================================================================== 7. Live Staging Controller Bar (실시간 연출 스위처 바) ========================================================================== */ .xs-stage-control-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; padding: 12px 16px; background: var(--xs-bg-subtle, #F1F5F9); border: 1px solid var(--xs-border-strong, #CBD5E1); margin-bottom: 20px; } .xs-stage-control-label { font-family: var(--xs-font-mono, monospace); font-size: 11px; font-weight: 700; color: var(--xs-text-secondary, #334155); text-transform: uppercase; margin-right: 8px; } .xs-stage-btn { font-family: var(--xs-font-mono, monospace); font-size: 11px; padding: 5px 10px; background: var(--xs-bg-surface, #FFFFFF); border: 1px solid var(--xs-border-strong, #94A3B8); color: var(--xs-text-primary, #0F172A); cursor: pointer; border-radius: 0; transition: all var(--xs-transition-fast, 120ms ease); } .xs-stage-btn:hover { background: var(--xs-primitive-slate-200, #E2E8F0); } .xs-stage-btn.is-active, .xs-stage-btn[aria-pressed="true"] { background: var(--xs-primitive-navy-900, #1E3A8A); color: #FFFFFF; border-color: var(--xs-primitive-navy-900, #1E3A8A); } /* --- File: visual-modifiers.css --- */ /** * xsDesignSystem — Visual Staging Modifiers (v2.0.0) * Attribute-Driven Visual Staging Modules * Modifies component properties dynamically: * - xs-density="compact | normal | relaxed" * - xs-elevation="flat | raised | floating | sunken" * - xs-kinetic="idle | pulse | flow | rotate | detent" * - xs-precision="0.1mm | 0.01mm | 0.001mm" * - xs-accent="navy | sage | vermilion | amber | mono" * - xs-tension="rigid | damped | elastic" * - xs-blueprint="true | false" * Zero-AI Invariants: Spot Color <= 3%, APCA Lc >= 75, High-Precision Mechanical Aesthetics */ /* ========================================================================== 1. Density Modifiers (밀도 속성 연출) ========================================================================== */ [xs-density="compact"], .xs-density-compact { padding: 8px 12px !important; font-size: 12px !important; gap: 6px !important; } [xs-density="compact"] .carbon-btn, [xs-density="compact"] .carbon-text-input, [xs-density="compact"] .carbon-select { padding: 4px 8px !important; font-size: 11px !important; min-height: 28px !important; } [xs-density="compact"] .carbon-data-table th, [xs-density="compact"] .carbon-data-table td { padding: 6px 10px !important; font-size: 11px !important; } [xs-density="relaxed"], .xs-density-relaxed { padding: 32px 40px !important; font-size: 15px !important; gap: 20px !important; } [xs-density="relaxed"] .carbon-btn, [xs-density="relaxed"] .carbon-text-input { padding: 12px 20px !important; font-size: 14px !important; min-height: 48px !important; } /* ========================================================================== 2. Elevation & Machined Inset Modifiers (공간 고도 및 가공 홈 연출) ========================================================================== */ [xs-elevation="flat"], .xs-elevation-flat { box-shadow: none !important; border-style: solid !important; } [xs-elevation="raised"], .xs-elevation-raised { box-shadow: 0 1px 3px rgba(15, 23, 42, 0.08), 0 1px 2px rgba(15, 23, 42, 0.04) !important; transform: translateY(-1px); transition: transform 140ms ease, box-shadow 140ms ease; } [xs-elevation="floating"], .xs-elevation-floating { box-shadow: 0 10px 15px -3px rgba(15, 23, 42, 0.1), 0 4px 6px -4px rgba(15, 23, 42, 0.05) !important; transform: translateY(-3px); transition: transform 180ms ease, box-shadow 180ms ease; } [xs-elevation="sunken"], .xs-elevation-sunken { background-color: var(--xs-bg-subtle, #F1F5F9) !important; box-shadow: inset 0 2px 4px rgba(15, 23, 42, 0.08), inset 0 1px 2px rgba(15, 23, 42, 0.06) !important; border-color: var(--xs-border-strong, #CBD5E1) !important; } /* ========================================================================== 3. Kinetic & Pulse Modifiers (키네틱 위상 및 동역학 연출) ========================================================================== */ [xs-kinetic="pulse"], .xs-kinetic-pulse { animation: xsKineticBreathing 3s ease-in-out infinite alternate; } @keyframes xsKineticBreathing { 0% { border-color: var(--xs-border-subtle, #CBD5E1); } 100% { border-color: var(--xs-primitive-navy-900, #1E3A8A); } } [xs-kinetic="flow"], .xs-kinetic-flow { position: relative; overflow: hidden; } [xs-kinetic="flow"]::after { content: ""; position: absolute; top: 0; left: -100%; width: 100%; height: 2px; background: linear-gradient(90deg, transparent, var(--xs-primitive-navy-900, #1E3A8A), transparent); animation: xsKineticFlowStream 2s linear infinite; } @keyframes xsKineticFlowStream { 0% { left: -100%; } 100% { left: 100%; } } [xs-kinetic="detent"], .xs-kinetic-detent { transition: transform 80ms cubic-bezier(0.175, 0.885, 0.32, 1.275); } [xs-kinetic="detent"]:active { transform: scale(0.985); } /* ========================================================================== 4. Precision Calibration Modifiers (공학 정밀도 캘리브레이션 연출) ========================================================================== */ [xs-precision="0.1mm"] { border-left: 3px solid var(--xs-primitive-slate-700, #334155); } [xs-precision="0.01mm"], .xs-precision-vernier { position: relative; border-left: 4px solid var(--xs-primitive-navy-900, #1E3A8A); } [xs-precision="0.01mm"]::before { content: "±0.01mm ISO 2768-m"; position: absolute; top: -9px; right: 12px; font-family: var(--xs-font-mono, monospace); font-size: 9px; background: var(--xs-bg-surface, #FFFFFF); padding: 0 4px; color: var(--xs-text-secondary, #475569); border: 1px solid var(--xs-border-subtle, #CBD5E1); } [xs-precision="0.001mm"], .xs-precision-micro { position: relative; border: 1px solid var(--xs-primitive-navy-900, #1E3A8A); background-image: radial-gradient(var(--xs-border-subtle, #CBD5E1) 1px, transparent 1px); background-size: 8px 8px; } [xs-precision="0.001mm"]::before { content: "⌖ SUB-PIXEL 0.001mm CALIBRATED"; position: absolute; bottom: -9px; left: 12px; font-family: var(--xs-font-mono, monospace); font-size: 9px; background: var(--xs-primitive-navy-900, #1E3A8A); color: #FFFFFF; padding: 1px 6px; font-weight: 700; } /* ========================================================================== 5. Spot Color Accent Modifiers (3% 스팟 컬러 경제학 테마 연출) ========================================================================== */ [xs-accent="navy"] { --xs-spot-color: var(--xs-primitive-navy-900, #1E3A8A); border-color: var(--xs-primitive-navy-900, #1E3A8A) !important; } [xs-accent="sage"] { --xs-spot-color: var(--xs-primitive-sage-700, #15803D); border-color: var(--xs-primitive-sage-700, #15803D) !important; } [xs-accent="vermilion"] { --xs-spot-color: var(--xs-primitive-red-600, #DC2626); border-color: var(--xs-primitive-red-600, #DC2626) !important; } [xs-accent="amber"] { --xs-spot-color: var(--xs-primitive-amber-600, #D97706); border-color: var(--xs-primitive-amber-600, #D97706) !important; } [xs-accent="mono"] { --xs-spot-color: var(--xs-primitive-slate-900, #0F172A); border-color: var(--xs-primitive-slate-900, #0F172A) !important; } /* ========================================================================== 6. Interaction Tension Modifiers (생체역학적 텐션 반응 연출) ========================================================================== */ [xs-tension="rigid"] * { transition-duration: 0ms !important; } [xs-tension="damped"] * { transition: all 240ms cubic-bezier(0.2, 0.8, 0.2, 1); } [xs-tension="elastic"] * { transition: all 380ms cubic-bezier(0.34, 1.56, 0.64, 1); } /* ========================================================================== 7. Engineering Blueprint Mode (설계도면 청사진 연출) ========================================================================== */ [xs-blueprint="true"], .xs-blueprint-mode { position: relative; background-color: var(--xs-bg-canvas, #F8FAFC) !important; background-image: linear-gradient(var(--xs-border-subtle, #E2E8F0) 1px, transparent 1px), linear-gradient(90deg, var(--xs-border-subtle, #E2E8F0) 1px, transparent 1px) !important; background-size: 16px 16px !important; border: 1px solid var(--xs-border-strong, #64748B) !important; } /* Blueprint Corner Marks */ [xs-blueprint="true"]::before { content: "⌜"; position: absolute; top: 2px; left: 4px; font-family: monospace; font-size: 14px; color: var(--xs-text-muted, #64748B); pointer-events: none; } [xs-blueprint="true"]::after { content: "⌟"; position: absolute; bottom: 2px; right: 4px; font-family: monospace; font-size: 14px; color: var(--xs-text-muted, #64748B); pointer-events: none; } /* ========================================================================== 8. Live Parameter Studio Inspector Panel ========================================================================== */ .xs-visual-studio-panel { background: var(--xs-bg-surface, #FFFFFF); border: 2px solid var(--xs-primitive-slate-900, #0F172A); padding: 20px; margin-bottom: 24px; } .xs-studio-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 16px; margin-top: 16px; } .xs-studio-control { display: flex; flex-direction: column; gap: 6px; } .xs-studio-control label { font-family: var(--xs-font-mono, monospace); font-size: 11px; font-weight: 700; text-transform: uppercase; color: var(--xs-text-secondary, #334155); } .xs-studio-select { padding: 6px 8px; font-family: var(--xs-font-mono, monospace); font-size: 12px; border: 1px solid var(--xs-border-strong, #94A3B8); background: var(--xs-bg-surface, #FFFFFF); color: var(--xs-text-primary, #0F172A); } /* --- File: adaptive-wrap.css --- */ /** * xsDesignSystem — Adaptive Semantic Wrapping & Multi-Environment Engine (v2.0.0) * * Invariant Standards: * - W3C 3-Tier Token Architecture & HCI APCA Invariant (APCA Lc >= 75 / AAA 12:1) * - Zero-AI Visual Invariant (I_ai == 0.0) * - Typography HCI Invariant: Characters Per Line (CPL) constraints per environment * - Korean Semantic No-Break Grammar: Orphan particles, determiners, and unit binding */ /* ========================================================================== 1. Semantic Wrapping Primitives & Classes ========================================================================== */ /* Keep Korean phrases together while breaking gracefully at word boundaries */ .xs-wrap-semantic, [xs-wrap="semantic"] { word-break: keep-all; overflow-wrap: break-word; text-wrap: pretty; line-break: strict; font-optical-sizing: auto; font-variation-settings: 'opsz' auto; } /* Balanced headline / title wrapping for optimal optical weight distribution */ .xs-wrap-balance, [xs-wrap="balance"] { text-wrap: balance; word-break: keep-all; overflow-wrap: break-word; } /* Pretty body wrapping — eliminates single-word orphan lines (widows) */ .xs-wrap-pretty, [xs-wrap="pretty"] { text-wrap: pretty; word-break: keep-all; overflow-wrap: break-word; } /* Strict inline no-break */ .xs-no-break, [xs-wrap="nowrap"] { white-space: nowrap !important; display: inline-block; } /* Atomic unit / particle binding */ .xs-unit-bundle, .xs-semantic-particle { white-space: nowrap; display: inline; } /* ========================================================================== 2. Characters Per Line (CPL) Typography Constraints ========================================================================== */ /* Mobile CPL: 18 - 32 characters for high-speed vertical saccadic flow */ .xs-cpl-mobile, [xs-cpl="mobile"] { max-width: 32ch; line-height: var(--xs-line-height-mobile, 1.45); } /* Slide / Presentation CPL: 28 - 48 characters for rapid 3-second glanceability */ .xs-cpl-slide, [xs-cpl="slide"] { max-width: 48ch; line-height: var(--xs-line-height-slide, 1.35); letter-spacing: -0.015em; } /* Desktop Body CPL: 45 - 75 characters for comfortable sustained reading */ .xs-cpl-desktop, [xs-cpl="desktop"] { max-width: 75ch; line-height: var(--xs-line-height-desktop, 1.6); } /* Compact Micro-Copy CPL: 16 - 24 characters for cards, badges, alerts */ .xs-cpl-compact, [xs-cpl="compact"] { max-width: 24ch; line-height: 1.3; } /* ========================================================================== 3. Multi-Environment Adaptation Profiles (xs-env) ========================================================================== */ /* 3.1 Mobile Environment Profile */ [xs-env="mobile"], .xs-env-mobile { --xs-container-max-w: 100%; --xs-content-padding: var(--cds-spacing-04, 16px); --xs-touch-target-min: 48px; --xs-grid-columns: 1; font-size: 14px; } [xs-env="mobile"] .carbon-btn, [xs-env="mobile"] .carbon-input, [xs-env="mobile"] .carbon-select, [xs-env="mobile"] [role="button"], .xs-env-mobile .carbon-btn, .xs-env-mobile .carbon-input { min-height: var(--xs-touch-target-min, 48px); padding: var(--cds-spacing-03, 12px) var(--cds-spacing-04, 16px); width: 100%; box-sizing: border-box; } [xs-env="mobile"] .carbon-table-container, .xs-env-mobile .carbon-table-container { overflow-x: auto; -webkit-overflow-scrolling: touch; } /* 3.2 Tablet Environment Profile */ [xs-env="tablet"], .xs-env-tablet { --xs-container-max-w: 768px; --xs-content-padding: var(--cds-spacing-05, 24px); --xs-touch-target-min: 44px; --xs-grid-columns: 2; font-size: 15px; } /* 3.3 Desktop Environment Profile */ [xs-env="desktop"], .xs-env-desktop { --xs-container-max-w: 1280px; --xs-content-padding: var(--cds-spacing-06, 32px); --xs-touch-target-min: 40px; --xs-grid-columns: 3; font-size: 16px; } /* 3.4 16:9 Presentation Slide Environment Profile */ [xs-env="slide"], .xs-env-slide { aspect-ratio: 16 / 9; width: 100%; max-width: 1920px; padding: var(--cds-spacing-07, 48px); background: var(--cds-background, #ffffff); color: var(--cds-text-primary, #161616); font-size: 20px; overflow: hidden; box-sizing: border-box; display: flex; flex-direction: column; justify-content: space-between; } [xs-env="slide"] h1, [xs-env="slide"] .slide-title { font-size: 2.5rem; font-weight: 700; letter-spacing: -0.02em; text-wrap: balance; margin-bottom: var(--cds-spacing-04, 16px); } [xs-env="slide"] h2, [xs-env="slide"] .slide-subtitle { font-size: 1.5rem; font-weight: 500; color: var(--cds-text-secondary, #525252); margin-bottom: var(--cds-spacing-05, 24px); } [xs-env="slide"] p, [xs-env="slide"] .slide-body { font-size: 1.125rem; line-height: 1.5; max-width: 48ch; word-break: keep-all; } /* 3.5 Print Environment Profile */ @media print { [xs-env="print"], body { background: #ffffff !important; color: #000000 !important; font-size: 11pt !important; line-height: 1.4 !important; } .carbon-btn, .carbon-pagination, .staging-rotary-dial, [role="toolbar"], nav, .carbon-skip-link { display: none !important; } .carbon-card, .carbon-tile, .carbon-data-table { border: 1pt solid #161616 !important; box-shadow: none !important; page-break-inside: avoid; break-inside: avoid; } } [xs-env="print"], .xs-env-print { background: #ffffff !important; color: #000000 !important; border: 1px solid #e0e0e0; padding: 24px; } /* 3.6 Embed / Widget / Dock Profile */ [xs-env="embed"], .xs-env-embed { background: transparent; padding: var(--cds-spacing-03, 12px); font-size: 13px; border: 1px solid var(--cds-border-subtle, #e0e0e0); border-radius: 0; max-width: 100%; } [xs-env="embed"] .carbon-header { height: 36px; padding: 0 8px; } /* ========================================================================== 4. High Contrast & Reduced Motion Overrides ========================================================================== */ /* APCA Lc 90+ High-Contrast Enforcement */ [xs-contrast="high"], .xs-contrast-high { --cds-background: #ffffff !important; --cds-text-primary: #000000 !important; --cds-text-secondary: #262626 !important; --cds-border-strong: #000000 !important; --cds-border-subtle: #000000 !important; --cds-interactive: #000000 !important; } [xs-contrast="high"] .carbon-btn-primary, .xs-contrast-high .carbon-btn-primary { background: #000000 !important; color: #ffffff !important; border: 2px solid #000000 !important; } [xs-contrast="high"] .carbon-btn-secondary, .xs-contrast-high .carbon-btn-secondary { background: #ffffff !important; color: #000000 !important; border: 2px solid #000000 !important; font-weight: 700; } /* Motion-Reduction Accessibility */ @media (prefers-reduced-motion: reduce) { *, *::before, *::after { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } } [xs-motion="reduce"], .xs-motion-reduce * { animation-duration: 0.001ms !important; animation-iteration-count: 1 !important; transition-duration: 0.001ms !important; } /* ========================================================================== 5. 3-Tier Semantic Wrapping & /visual-authoring Action Folding System (v2.5) - Tier 1: Lexical & Morphological Atomic Chunks (.xs-sem-chunk, .xs-sem-capsule) - Tier 2: Syntactic Clause Cadence Wrapping (.xs-sem-clause, .xs-sem-wbr) - Tier 3: /visual-authoring 4-Stage Semantic Action Chain (1x4 -> 2x2 -> 4x1) ========================================================================== */ /* Tier 1: Atomic Lexical & Metric Capsule (Never splits number + unit or arrow pair) */ .xs-sem-chunk, .xs-sem-capsule { white-space: nowrap; display: inline; } .xs-sem-capsule--badge { display: inline-flex; align-items: center; gap: 4px; padding: 1px 7px; border-radius: 5px; background: var(--xs-bg-subtle, #F1F5F9); border: 1px solid var(--xs-border-subtle, #E2E8F0); font-family: var(--xs-font-mono, monospace); font-size: 0.85em; font-weight: 600; white-space: nowrap; vertical-align: baseline; } /* Visual debug highlight mode for inspecting semantic chunks & clause boundaries */ [data-xs-wrap-inspect="true"] .xs-sem-chunk { background: rgba(37, 99, 235, 0.10); border-bottom: 1.5px solid rgba(37, 99, 235, 0.55); border-radius: 3px; padding: 0 2px; } /* Tier 2: Syntactic Clause Cadence Wrapper */ .xs-sem-clause-flow { word-break: keep-all; overflow-wrap: break-word; line-break: strict; } .xs-sem-clause { display: inline; white-space: nowrap; } /* On narrow mobile screens (< 420px), allow internal word-break inside long clauses while keeping NBSP chunks intact */ @media (max-width: 480px) { .xs-sem-clause { white-space: normal; word-break: keep-all; } } [data-xs-wrap-inspect="true"] .xs-sem-clause { box-shadow: inset 0 -2px 0 rgba(16, 185, 129, 0.45); margin-right: 2px; } [data-xs-wrap-inspect="true"] .xs-sem-clause::after { content: "↵"; font-size: 0.7em; color: #059669; margin-left: 2px; opacity: 0.75; } /* Tier 3: /visual-authoring 4-Stage Semantic Action Chain Wrapper Eliminates 3+1 orphan wrapping by enforcing 1x4 (>=720cqi) -> 2x2 (480~719cqi) -> 4x1 (<480cqi) */ .xs-sem-stage-container { container-type: inline-size; container-name: xs-sem-stage; width: 100%; } .xs-sem-action-chain { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; align-items: stretch; width: 100%; } /* Medium Container (480px ~ 719px): Symmetric 2x2 Paired Folding (Never 3+1 orphan!) */ @container xs-sem-stage (max-width: 719px) { .xs-sem-action-chain { grid-template-columns: repeat(2, minmax(0, 1fr)); } } /* Narrow Container (< 480px): 4x1 Vertical Causal Spine */ @container xs-sem-stage (max-width: 479px) { .xs-sem-action-chain { grid-template-columns: minmax(0, 1fr); } .xs-sem-action-node__arrow { transform: rotate(90deg); } } .xs-sem-action-node { position: relative; display: flex; flex-direction: column; justify-content: space-between; gap: 8px; padding: 14px; border-radius: var(--xs-concentric-inner, 10px); background: var(--xs-surface-primary, #FFFFFF); border: 1px solid var(--xs-border-subtle, #E2E8F0); box-shadow: var(--xs-tactile-bevel-shadow, 0 1px 2px rgba(15, 23, 42, 0.04)); transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1), border-color 180ms ease; } .xs-sem-action-node[data-stage-role="judgment"], .xs-sem-action-node[data-stage-role="verification"] { border-color: color-mix(in srgb, var(--xs-color-accent, #0051FF) 35%, var(--xs-border-subtle, #E2E8F0)); } .xs-sem-action-node__cue { display: inline-flex; align-items: center; justify-content: space-between; gap: 8px; font-size: 0.76rem; font-weight: 700; letter-spacing: 0.03em; text-transform: uppercase; color: var(--xs-text-secondary, #475569); } .xs-sem-action-node__arrow { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--xs-bg-subtle, #F1F5F9); color: var(--xs-color-accent, #0051FF); font-weight: 800; font-size: 0.8rem; transition: transform 180ms ease; } /* /visual-authoring Label-Masked Read Mode (5-Second Visual Cue Test) Blurs explanatory prose while keeping visual cues, icons, arrows, and state geometry crisp */ [data-xs-masked-read="true"] .xs-sem-masked-prose { filter: blur(5px); opacity: 0.32; user-select: none; transition: filter 180ms ease, opacity 180ms ease; } .xs-sem-masked-prose { transition: filter 180ms ease, opacity 180ms ease; }