의 자식을 감추는 것은
* UA 스타일시트인데, UA origin 은 author origin 에 진다 — 패널에 display:flex 를
* 무조건 주면 그 UA 규칙을 뚫어, 엔진에 따라 닫힌 채로 팝오버가 떠 있는다.
* (감춤 수단이 엔진마다 다른 것도 이유다: 근래 엔진은 content-visibility 로,
* 예전 엔진은 slot 의 display 로 감춘다 — 어느 쪽에 기대도 한쪽이 깨진다.)
* 그래서 닫힘은 display:none 으로 명시하고, 상자는 [open] 에서만 세운다. */
.axe-session-head__new > .axe-session-head__new-panel {
display: none;
}
.axe-session-head__new[open] > .axe-session-head__new-panel {
position: absolute;
z-index: var(--z-overlay, 400);
top: calc(100% + var(--space-1));
right: 0;
width: 240px;
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-elevated);
box-shadow: var(--shadow-lg);
}
.axe-session-list {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
margin: 0;
padding: 0;
list-style: none;
}
/* --compact = 레일용 한 줄 행. 32px 는 컨텍스트 레일의 위치 링크
* (.axe-workspace-context__link)와 같은 리듬이라, 세션 목록이 그 위아래 어디에
* 서도 같은 눈금 위에 앉는다. 기본 44px 두 줄은 작업면 목록이 계속 쓴다 —
* 거기서는 메타를 접을 이유가 없다. 한 줄 행은 __meta 를 아예 내지 않고
* (숨기는 것이 아니라 만들지 않는다) 메타를 __link 의 title 로 옮긴다.
*
* 이 32px 은 modifier 의 기본값이고, 컨텍스트 레일 __body 안에 서면 좌측 내비의
* 30px 리듬으로 다시 눌린다(아래 "레일 안 컴팩트 목록" 블록) — 셸 안에서는
* 좌우 두 기둥이 같은 눈금을 쓰는 것이 먼저다.
*
* justify-content 를 여기서 **다시 세우는 이유**: base 규칙(.axe-session-item__link)
* 은 세로 flex 라 `justify-content: center` 가 두 줄(__name·__meta)을 44px 상자
* 한가운데에 세우는 세로 정렬이다. 이 규칙이 축을 row 로 뒤집는 순간 그 **같은
* 선언이 수평 축으로 옮겨 붙는다** — 컴팩트 행의 자식은 __dot 과 __name 뿐이라
* (메타를 아예 내지 않는다) 남는 폭이 좌우로 균등 분배되고, 이름 묶음이 행
* 가운데로 밀려 목록이 가운데 정렬로 보인다(운영자 실측 지적, 0.38.3).
*
* 규칙 하나: **축을 뒤집는 쪽이 그 축의 정렬 책임도 진다.** base 의 center 는
* 지우지 않는다 — 작업면의 기본(두 줄) 행이 실제로 그 세로 중앙 정렬을 쓴다.
* 0.38.1 이 세운 레일 스코프 규칙(.axe-workspace-context__body …)은 높이·패딩만
* 다시 잡고 justify-content 를 건드리지 않으므로 이 한 줄이 그 자리까지 덮는다. */
.axe-session-list--compact .axe-session-item__link {
min-height: 32px;
flex-direction: row;
justify-content: flex-start;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
}
.axe-session-item {
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-1);
border-radius: var(--radius-md);
}
/* status 도트 — 빈 원이 기본값이고(완료·미지정), 채운 원이 "지금 돌고 있다"다.
* 8px 상자에 1.5px 테두리라 두 상태가 16px 도 안 되는 자리에서 갈린다.
*
* 도트는 **색으로만** 말하므로 aria-hidden 이고, 같은 상태를 행의 __link 가
* 글로도 들어야 한다(aria-label="… — 진행 중"). 색만 있는 표현은 색각 이상에서
* 사라지고, SR 에는 처음부터 존재하지 않는다.
*
* inline-block 을 명시하는 이유: 이 도트는 목록 행(flex/grid 자식)뿐 아니라 상세
* 페이지의 상태 한 줄( 안의 글 흐름)에도 선다. 거기서는 이 기본값
* inline 이라 width/height 가 통째로 무시돼 도트가 사라진다. flex·grid 문맥에서는
* 자식이 어차피 블록화되므로 이 선언이 아무것도 바꾸지 않는다 — 즉 한 줄로 두
* 자리를 다 얻는다(.axe-status-light__dot 과 같은 처방). vertical-align 은 인라인
* 문맥에서만 쓰이며, 글줄 한가운데 앉혀 baseline 에 매달리지 않게 한다. */
.axe-session-item__dot {
flex: 0 0 auto;
display: inline-block;
width: 8px;
height: 8px;
border: 1.5px solid var(--text-muted);
border-radius: var(--radius-full);
background: transparent;
vertical-align: middle;
}
.axe-session-item__dot--active {
border-color: var(--success);
background: var(--success);
}
/* 완료 = 기본값과 같은 빈 원. 명시 클래스를 두는 이유는 소비자가 상태를 따져
* 붙였다는 사실이 마크업에 남아야 하기 때문이다(누락과 구분되지 않으면 나중에
* 매핑이 틀려도 아무도 모른다). */
.axe-session-item__dot--done {
border-color: var(--text-muted);
background: transparent;
}
.axe-session-item__dot--archived {
border-color: var(--text-muted);
background: var(--text-muted);
}
/* 현재 세션 = 배경 tint 하나. 레일의 entity/계정 팝업 행(.axe-workspace-picker__item
* [aria-current])과 같은 표현이며, 그 자리와 같은 재료를 받는다(셸 안에서
* --bg-subtle == --workspace-selected). */
.axe-session-item--active,
.axe-session-item__link[aria-current] {
background: var(--bg-subtle);
}
.axe-session-item__link {
min-width: 0;
min-height: 44px;
flex: 1 1 auto;
display: flex;
flex-direction: column;
justify-content: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-3);
border: 0;
border-radius: inherit;
background: transparent;
color: var(--text-secondary);
font: inherit;
text-align: left;
text-decoration: none;
cursor: pointer;
}
.axe-session-item__link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* 도트가 붙은 기본(두 줄) 행 — 세로 flex 로는 도트가 이름 **위** 딴 줄에 선다.
* 마크업 계약(__dot 이 __link 의 첫 자식)은 두 조판이 같아야 하므로 손대지 않고,
* 조판만 grid 로 바꿔 첫 줄에 도트·이름을, 둘째 줄 전폭에 메타를 앉힌다.
*
* --compact 를 :not() 으로 잘라내 두 규칙이 **애초에 같은 요소에 걸리지 않게**
* 한다 — 특정도나 선언 순서로 다투게 두면 나중에 한쪽을 옮기는 순간 조용히
* 뒤집힌다(한 줄 행은 이미 자기 규칙이 row flex 로 세운다).
*
* :has() 미지원 구형 브라우저는 기존 동작(도트가 딴 줄)으로 남는다 — 읽히기는
* 하므로 점진 향상으로 수용한다. */
.axe-session-list:not(.axe-session-list--compact)
.axe-session-item__link:has(> .axe-session-item__dot) {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
column-gap: var(--space-2);
row-gap: var(--space-1);
align-items: center;
}
.axe-session-list:not(.axe-session-list--compact)
.axe-session-item__link:has(> .axe-session-item__dot)
> .axe-session-item__meta {
grid-column: 1 / -1;
}
/* 이름은 한 줄로 자른다 — 레일에서 두 줄로 흐르면 목록의 리듬이 무너지고,
* 전문은 어차피 세션 페이지 헤더에 있다. */
.axe-session-item__name {
min-width: 0;
overflow: hidden;
color: var(--text-primary);
font-size: var(--text-sm);
line-height: 1.4;
white-space: nowrap;
text-overflow: ellipsis;
}
/* 메타도 한 줄. 안에 배지가 들어와도 같은 줄에 서도록 flex 이며, 넘치는 만큼은
* 잘린다(항목마다 말줄임 위치를 다르게 협상하지 않는다). */
.axe-session-item__meta {
min-width: 0;
display: flex;
align-items: center;
gap: var(--space-2);
overflow: hidden;
color: var(--text-tertiary);
font-size: var(--text-xs);
line-height: 1.4;
white-space: nowrap;
}
.axe-session-item__actions {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding-inline-end: var(--space-2);
}
/* 한 줄 행의 액션은 28px 리듬에 맞춘다. 규약 4 대로 버튼 재료는 소비자가
* 조립하는데, 손에 잡히는 것(.axe-workspace-bar__icon-button)이 44×44 라 32px
* 행에 그대로 들어오면 행 높이가 버튼에 끌려 올라간다.
*
* 캡은 **높이에만** 건다. 실제 행 액션은 아이콘이 아니라 글자인 경우가 많고
* ("이름"·"복사"·"복사됨") 폭을 28px 로 못 박으면 그 라벨이 잘리기 때문이다.
* 대신 폭은 auto 로 되돌리고 28px 바닥만 깐다 — 아이콘 재료는 그 바닥에 걸려
* 28px 정사각(머리 버튼과 같은 상자)이 되고, 글자 재료는 제 폭대로 선다.
*
* width/flex 를 굳이 auto 로 되돌려 적는 이유: 아이콘 재료가 width:44px 와
* flex:0 0 44px 를 들고 있어 가만두면 44px 폭이 남는데, __actions 는 opacity 로만
* 숨으므로 그 폭은 **항상** 자리를 차지해 모든 세션 이름을 그만큼 일찍 자른다.
* 이 규칙이 이긴다 — (0,2,1) 대 (0,1,0) 이고 이 파일에는 @layer 도 !important 도
* 없다(값이 명시냐 auto 냐가 아니라 특정도가 정한다).
*
* 액션 자리를 **두 모양**으로 적는 이유: 계약이 액션도 허용해
* (이름변경 폼도 머리의 생성 폼과 같은 JS-0 수단을 쓴다) 직계 :is(a, button) 만
* 잡으면 그 summary 가 44px 로 남는다. 그렇다고 자손 전체로 넓히면 반대편으로
* 넘어간다 — 그 가 여는 패널 **안의** 제출 버튼(.axe-btn)까지 28px 로
* 짓눌러 폼을 깨뜨린다. 그래서 계약이 허용하는 두 자리(직계 액션, 직계
* 의 summary)만 이름으로 집는다. */
.axe-session-list--compact .axe-session-item__actions > :is(a, button),
.axe-session-list--compact .axe-session-item__actions > details > summary {
width: auto;
min-width: 28px;
height: 28px;
min-height: 28px;
flex: 0 0 auto;
padding-block: 0;
}
/* details 컨테이너도 행 리듬에 세운다 — 머리의 __new 와 같은 상자(inline-flex)라
* summary 하나만 담긴 28px 로 서고, 패널은 그 위에 띄운다. */
.axe-session-list--compact .axe-session-item__actions > details {
display: inline-flex;
}
/* 끝난 행의 이름은 물러난다 — 압축 목록(레일) 한정, 이름만 55% (0.38.9).
*
* 레일의 세션 목록은 "지금 무엇이 돌고 있나" 를 먼저 말해야 하는데, 완료·보관 행이
* 진행 중 행과 **같은 밝기**로 서면 그 질문의 답이 목록 전체에 흩어진다. 도트가
* 이미 상태를 지지만 8px 원 하나는 행 스캔에서 이름보다 늦게 읽힌다 — 눈이 먼저
* 잡는 것은 글자 덩어리다. 그래서 **글자 쪽에서** 한 단계 물러나게 한다.
*
* 물러나는 것은 **이름뿐이고 점은 불변**이다. 상태의 정본은 도트와 aria-label 이고
* (규약 5), 흐림은 그 위에 얹는 보조 신호다 — 순서를 뒤집어 흐림이 상태를 지게
* 하면 그 순간 상태가 다시 "색·명도로만 말하는 표현" 이 되어 규약 5 가 세운 짝이
* 무너진다. 도트를 같이 흐리지 않는 것도 같은 이유다: 정본은 밝기를 잃지 않는다.
*
* 55% 인 이유(운영자 승인 픽스처 B): 레일 resting 이름은 이미 --text-secondary
* (= --workspace-muted)로 눕혀 있어, 여기서 더 낮추면 읽히는 대비가 아니라 "사라진
* 행" 이 된다. 55% 는 진행 중 행과 나란히 놓았을 때 **한 눈에 갈리되 이름은 그대로
* 읽히는** 자리다. 흐림은 대비를 낮추므로 **완료·보관에만** 건다 — 진행 중 행이
* 이 규칙에 걸리지 않는 것이 이 처방의 안전판이다.
*
* **압축 목록 한정**인 이유: 기본(두 줄) 행은 __meta 가 서고 그 안의 가시 배지가
* 상태를 이미 글로 진다(규약 5). 거기서 이름을 또 흐리면 같은 말을 두 번 하면서
* 대비만 잃는다. 흐림은 **배지가 설 자리가 없는 조판의 대타**다.
*
* `:has(> …)` 로 도트를 직계 자식으로 요구하는 것은 계약 그대로다(규약 5 — 도트는
* __link 의 첫 자식). :has() 미지원 브라우저는 흐림 없이 남는다 — 상태는 도트와
* aria-label 이 이미 지고 있으므로 잃는 것이 없는 점진 향상이다.
*
* 특정도: (0,4,0) — --compact + __link + :has() 인자(그 안에서 가장 특정한 것
* (0,1,0)) + __name. 아래 복귀 규칙들은 이 값을 넘기거나(hover·focus·현재 행)
* 같은 값에 뒤 순서로 이긴다(reduced-motion·forced-colors). */
.axe-session-list--compact
.axe-session-item__link:has(
> :is(.axe-session-item__dot--done, .axe-session-item__dot--archived)
)
.axe-session-item__name {
opacity: 0.55;
transition: opacity var(--duration-fast) var(--ease-out);
}
/* 손·키보드·현재 위치에서는 원래 밝기로 돌아온다. 흐림은 "덜 중요하다" 는 말이지
* "지금 만지고 있는 것도 덜 중요하다" 는 말이 아니다 — 상호작용 중인 행이 물러난
* 채로 있으면 그 행이 응답하지 않는 것처럼 읽힌다.
*
* `[aria-current]` 와 `--active` 를 **둘 다** 집는 이유는 계약이 두 표기를 다
* 허용하기 때문이다(규약 2 — 시각만 바꾸는 --active 를 붙인 소비자도 같은 그림을
* 받아야 한다). 위 레일 색 규칙(0.38.4)이 같은 두 갈래를 집는 것과 같은 처방이다.
* 완료된 세션을 **열어 둔** 상태가 실재하므로(끝난 세션도 읽는다) 이 복귀는 이론이
* 아니라 매일 걸리는 갈래다.
*
* hover 는 여기 없다 — 포인터가 있는 환경에서만 성립하므로 아래
* `@media (hover: hover) and (pointer: fine)` 블록 안에 선다. 터치에서 hover 는
* 오지 않거나 탭 후 남아, 여기 두면 만진 행이 흐림에서 영구히 빠져나온다. */
.axe-session-list--compact
:is(
.axe-session-item--active > .axe-session-item__link,
.axe-session-item__link:is(:focus-visible, [aria-current])
):has(> :is(.axe-session-item__dot--done, .axe-session-item__dot--archived))
.axe-session-item__name {
opacity: 1;
}
/* 레일 안 컴팩트 목록은 좌측 내비(.axe-workspace-rail__link)의 행 리듬을 그대로
* 잇는다 — 같은 인셋(8px) · 행높이(30px) · radius(8px) · 행간(1px) · resting
* 색(muted 로 눕고 hover·현재 행에서만 밝아진다). 두 레일은 같은 셸의 좌우
* 기둥이라, 한쪽만 다른 눈금을 쓰면 그 차이가 곧 소음이다.
*
* __body 의 16px 패딩을 목록만 -8px 되물려 hover pill 이 좌측 __nav 와 같은 8px
* 인셋에 선다. 되무는 것이 목록뿐이라 머리(.axe-session-head)의 제목은 __body
* 패딩 자리에 그대로 남고, 행의 8px 안쪽 패딩이 제목과 이름의 x 를 다시 맞춘다
* (둘 다 레일 가장자리에서 16px) — pill 만 더 나오고 글줄은 어긋나지 않는다.
* 좌측이 pill 을 세우는 그림과 같다.
*
* 스코프가 **두 벌**인 이유(0.38.4): 이 정렬은 "좌측 레일과 물리적으로 같은 셸에
* 섰을 때" 의 계약인데, 슬롯 ⓪ 이 계약상 두 자리에 설 수 있어 그 자리도 둘이다.
* · `.axe-workspace-context …` = 패널 **안** 어디서나 (첫-자식 갈래. gate 처럼
* `__body` 래퍼 없이 평평하게 선 세션 목록이 여기서 걸린다 — 0.38.3 까지는
* `__body` 스코프뿐이라 이 갈래가 32px·radius-md·상시 밝은 이름으로 남아
* 좌측과 눈금이 갈렸다.)
* · `.axe-workspace-context__body …` = 패널 **밖**에서 이 클래스를 래퍼로 빌려
* 쓴 앞-형제 갈래 (blueprint 가 그 자리다 — 패널 밖이라 위 선택자에 안 걸린다).
* 두 선택자는 같은 선언을 들고 특정도도 같아, 겹쳐 걸리는 소비자(cortex·index)는
* 결과가 바뀌지 않는다. 레일 **밖**(작업면 목록·팝오버)은 여전히 32px 기본값이다.
*
* 좌측 토큰(--workspace-nav-row-h · --workspace-nav-row-gap)을 직접 읽는 것은
* 의도된 결합이다 — 좌측 리듬이 움직이면 이 목록이 따라간다. 폴백을 병기해 그
* 토큰이 없는 문맥(셸 밖에서 __body 클래스만 빌려 쓰는 경우)에서도 값이 성립한다. */
.axe-workspace-context .axe-session-list--compact,
.axe-workspace-context__body .axe-session-list--compact {
margin-inline: calc(var(--space-2) - var(--space-4));
gap: var(--workspace-nav-row-gap, 1px);
}
.axe-workspace-context .axe-session-list--compact .axe-session-item,
.axe-workspace-context__body .axe-session-list--compact .axe-session-item {
border-radius: 8px;
}
.axe-workspace-context .axe-session-list--compact .axe-session-item__link,
.axe-workspace-context__body .axe-session-list--compact .axe-session-item__link {
min-height: var(--workspace-nav-row-h, 30px);
padding: 3px var(--space-2);
}
/* 이름은 제 색을 들지 않고 링크의 색을 받는다 — 링크가 resting 에서
* --text-secondary(셸 안에서 = --workspace-muted)라 목록이 좌측처럼 조용히 눕고,
* hover 규칙이 링크를 --text-primary 로 올리면 이름도 같이 올라온다(inherit 은
* 그때그때 부모의 계산값이라 상태 전환을 그대로 따른다). */
.axe-workspace-context .axe-session-list--compact .axe-session-item__name,
.axe-workspace-context__body .axe-session-list--compact .axe-session-item__name {
color: inherit;
}
/* 현재 행은 좌측의 [aria-current="page"] 와 같이 tint **와** 밝은 글자를 함께
* 받는다. 기존 규칙(.axe-session-item__link[aria-current])은 background 만 올리는데,
* 위에서 __name 이 제 색을 놓았으므로 여기서 색까지 세우지 않으면 현재 행이
* 이웃과 같은 muted 로 주저앉는다 — 좌측에서 현재 행이 유일하게 밝은 행인 것과
* 정반대가 된다. --active() 갈래도 함께 집는 이유: 계약이 두 표기를 다
* 허용하고, 시각만 바꾸는 --active 를 붙인 소비자도 같은 그림을 받아야 한다. */
.axe-workspace-context
.axe-session-list--compact
.axe-session-item--active
> .axe-session-item__link,
.axe-workspace-context
.axe-session-list--compact
.axe-session-item__link[aria-current],
.axe-workspace-context__body
.axe-session-list--compact
.axe-session-item--active
> .axe-session-item__link,
.axe-workspace-context__body
.axe-session-list--compact
.axe-session-item__link[aria-current] {
color: var(--text-primary);
}
/* 액션은 마우스가 있는 환경에서만 숨는다. 숨기는 수단이 opacity 인 이유는 자리를
* 미리 잡아 두기 위함이다 — display 로 접으면 hover 마다 이름 폭이 널뛴다.
* 포인터가 없는 환경(터치·키보드 전용)에서는 hover 가 오지 않으므로 항상 보인다. */
@media (hover: hover) and (pointer: fine) {
.axe-session-item__actions {
opacity: 0;
transition: opacity var(--duration-fast) var(--ease-out);
}
.axe-session-item:hover .axe-session-item__actions,
.axe-session-item:focus-within .axe-session-item__actions {
opacity: 1;
}
.axe-session-item__link:not([aria-current]):hover {
background: var(--bg-subtle);
color: var(--text-primary);
text-decoration: none;
}
/* 완료·보관 행의 흐림도 hover 에서 걷힌다(0.38.9). 위 규칙이 링크를
* --text-primary 로 올리는데 이름만 55% 로 남으면, 만지고 있는 행 하나가 색은
* 밝고 글자는 물러난 어중간한 상태로 선다. 이 블록 안에 두는 이유는 hover 가
* 포인터 환경의 신호이기 때문이다 — 터치에서는 탭 뒤 hover 가 눌어붙어, 밖에
* 두면 한 번 만진 행이 흐림에서 영구히 빠진다.
*
* 특정도 (0,5,0) — 흐림 규칙(0,4,0)을 값으로 이긴다(미디어 질의는 특정도를
* 더하지 않으므로 순서에 기대지 않는다). */
.axe-session-list--compact
.axe-session-item__link:hover:has(
> :is(.axe-session-item__dot--done, .axe-session-item__dot--archived)
)
.axe-session-item__name {
opacity: 1;
}
/* 머리 아이콘은 액션과 달리 항상 보인다 — 숨을 것이 없으므로 hover 는 재료만
* 올린다(열린 의 눌린 상태와 같은 tint). 비활성에는 걸지 않는다:
* 누를 수 없는 것이 hover 에 반응하면 그것이 곧 거짓 affordance 다
* (.axe-btn 계열과 같은 :not(:disabled) 가드 + aria-disabled 표기까지). */
.axe-session-head__button:hover:not(:disabled):not([aria-disabled="true"]) {
color: var(--text-primary);
background: var(--bg-subtle);
}
}
.axe-session-post {
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-3);
padding: var(--space-4);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-elevated);
}
/* 머리는 감싼다 — origin 라벨이 "claude-code@어떤-호스트" 처럼 길어질 수 있고,
* 그때 시각을 밀어내는 것보다 줄을 하나 더 쓰는 편이 읽힌다. */
.axe-session-post__head {
min-width: 0;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.axe-session-post__author {
min-width: 0;
overflow-wrap: anywhere;
color: var(--text-primary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.axe-session-post__origin {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
/* 시각은 머리 오른쪽 끝. margin auto 라 origin 이 없어도 자리가 흔들리지 않는다. */
.axe-session-post__time {
flex: 0 0 auto;
margin-inline-start: auto;
color: var(--text-tertiary);
font-size: var(--text-xs);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* 본문은 조판을 스스로 정하지 않는다 — 마크다운이면 .axe-prose 를 함께 붙이고,
* 여기서는 붙여넣은 전사(轉寫)가 카드를 가로로 밀어내지 않게만 막는다. */
.axe-session-post__body {
min-width: 0;
color: var(--text-primary);
font-size: var(--text-sm);
line-height: var(--leading-body);
overflow-wrap: anywhere;
}
/* 마크다운 렌더러가 없는 소비자용 — 원문을 이스케이프해 그대로 세운다. pre-wrap
* 이라 개행이 살고, 카드를 가로로 밀어내지 않는 일은 위의 __body 가 이미 한다.
* 태그는 를 권장한다 — 복사할 때 개행이 그대로 따라간다. */
.axe-session-post__body--plain {
white-space: pre-wrap;
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1.6;
}
@media (hover: hover) and (pointer: fine) {
.axe-workspace-bar__routes a:not([aria-current="page"]):hover,
.axe-workspace-bar__icon-button:hover,
.axe-workspace-disclosure > summary:hover,
.axe-workspace-entity > summary:hover,
.axe-workspace-rail__group-label:is(a, button):hover,
.axe-workspace-rail__link:is(a, button):not([aria-current="page"]):hover,
.axe-workspace-rail__nav
.axe-sidebar__item:not(.axe-sidebar__item--active)
> .axe-sidebar__link:hover,
.axe-workspace-rail__nav .axe-sidebar__group-header:hover,
.axe-workspace-search:hover,
.axe-workspace-entity:is(a, button):hover,
.axe-workspace-identity:is(a, button, summary):hover,
.axe-workspace-picker__item:not([aria-current]):hover,
.axe-workspace-picker__close:hover,
.axe-prompt-card__copy:not([aria-disabled="true"]):hover,
.axe-workspace-context__link:hover {
color: var(--workspace-text);
background: var(--workspace-selected);
text-decoration: none;
}
}
/* 팝업은 접힌 폭의 표면이지만 계약은 폭을 가리지 않는다 — 넓은 화면에서 열리면
* 화면 가운데에 선다(아래 붙임은 엄지 거리 때문이지 규칙이 아니다). */
@media (min-width: 640px) {
.axe-workspace-picker-dialog {
align-items: center;
}
}
/* AppShell geometry --------------------------------------------------- */
@media (min-width: 1024px) {
.axe-app-shell.axe-workspace-shell[data-shell="docs"] .axe-app-shell__main {
grid-template-columns: var(--workspace-rail-w) minmax(0, 1fr);
}
.axe-workspace-shell .axe-app-shell__sidebar {
top: 0;
height: 100vh;
height: 100dvh;
max-height: 100vh;
max-height: 100dvh;
margin-top: calc(-1 * var(--workspace-topbar-h));
z-index: calc(var(--z-sticky, 100) + 1);
overflow-y: hidden;
}
.axe-workspace-bar {
grid-template-columns: var(--workspace-rail-w) minmax(0, 1fr) auto;
border-bottom: 0;
}
.axe-workspace-bar__left {
padding-inline: var(--space-4);
background: var(--workspace-rail);
border-right: 1px solid var(--workspace-border);
}
.axe-workspace-bar__center,
.axe-workspace-bar__right {
background: var(--workspace-canvas);
border-bottom: 1px solid var(--workspace-border);
}
.axe-workspace-bar__right {
padding-inline: var(--space-4);
}
.axe-workspace-bar__routes {
display: flex;
}
.axe-workspace-bar__mobile-brand,
.axe-workspace-disclosure--navigation,
.axe-workspace-bar__right > .axe-workspace-search {
display: none;
}
/*
* 접기 (opt-in) ------------------------------------------------------
* 상태는 셸 루트의 boolean 속성 `data-rail-collapsed` 하나다 — 있으면 접힘,
* 없으면 펼침. `="false"` 같은 값으로 끄지 못한다(속성 존재가 곧 상태다).
* 속성이 없는 셸은 아래 어느 selector 와도 매칭되지 않으므로 종전 기하가
* 바이트 단위로 유지된다. 토글 버튼을 렌더하지 않는 표면은 이 속성을 쓸
* 일이 없다 = 접히지 않는 표면(계약상 opt-in 의 뜻).
*
* 접힘은 데스크톱에서만 의미가 있다. ≤1023px 에서는 레일이 이미 서랍의
* 것이라 이 블록 밖에는 대응 규칙을 두지 않는다 — 속성이 남아 있어도 무해.
*
* 토글 인스턴스는 둘이고 상태마다 정확히 하나만 보인다. 펼침 = 레일 brand 행의
* 것(레일과 함께 사라진다), 접힘 = bar 좌측 칸의 것(그때야 그 자리가 비어 눌린다).
*/
.axe-workspace-rail__brand .axe-workspace-rail-toggle {
display: inline-flex;
}
.axe-workspace-shell[data-rail-collapsed] .axe-workspace-bar .axe-workspace-rail-toggle {
display: inline-flex;
}
.axe-app-shell.axe-workspace-shell[data-rail-collapsed] .axe-app-shell__sidebar {
display: none;
}
/* 사이드바 트랙을 뺀 대응 규칙 — 펼침 규칙과 1:1. */
.axe-app-shell.axe-workspace-shell[data-rail-collapsed][data-shell="docs"] .axe-app-shell__main,
.axe-app-shell.axe-workspace-shell[data-rail-collapsed][data-shell="dashboard"] .axe-app-shell__main {
grid-template-columns: minmax(0, 1fr);
}
/* context rail 은 3번 트랙을 명시로 잡고 있다 — 첫 트랙이 사라졌으니 함께
* 당겨야 한다. 안 당기면 없는 트랙이 암묵 생성돼 본문 오른쪽에 빈 칸이 남는다. */
.axe-app-shell.axe-workspace-shell[data-rail-collapsed] .axe-app-shell__toc {
grid-column: 2;
}
.axe-workspace-shell[data-rail-collapsed] .axe-workspace-bar {
grid-template-columns: auto minmax(0, 1fr) auto;
}
/* 좌측 zone 은 레일의 머리였다 — 레일이 없으면 그 색도 없다. canvas 로
* 돌리고 아래 경계선을 이어 bar 가 한 줄로 읽히게 한다(1024–1439 구간의
* 우측 zone 처리와 같은 원리). */
.axe-workspace-shell[data-rail-collapsed] .axe-workspace-bar__left {
background: var(--workspace-canvas);
border-right: 0;
border-bottom: 1px solid var(--workspace-border);
}
}
@media (min-width: 1440px) {
.axe-app-shell.axe-workspace-shell[data-shell="docs"] .axe-app-shell__main {
grid-template-columns:
var(--workspace-rail-w)
minmax(0, 1fr)
var(--workspace-context-w);
}
.axe-workspace-bar {
grid-template-columns:
var(--workspace-rail-w)
minmax(0, 1fr)
var(--workspace-context-w);
}
.axe-workspace-bar__right {
background: var(--workspace-rail);
border-bottom: 0;
border-left: 1px solid var(--workspace-border);
}
.axe-workspace-disclosure--context {
display: none;
}
/*
* 2-zone (context rail 없음) — bar 는 반드시 __main 과 같은 zone 수를 가져야
* 한다. 위 .axe-workspace-bar 규칙은 무조건 3-zone(rail|1fr|rail)로 넓히지만,
* data-has-toc="false" 인 셸의 __main 은 layout.css 의 (0,5,0) 규칙이 잡아
* 2-zone(rail|1fr)로 남는다. 그 불일치가 우측 상단에 아래가 비어 있는
* rail 색 블록을 만든다 (cortex 2-zone 채택에서 발견, D-ui-9 phase-3).
*
* 셸이 이미 노출하는 같은 신호(data-has-toc, AppShell.tsx 가 내보내고
* maud/jinja 소비자가 그대로 쓰는 계약)로 키잉 — 새 클래스명 없음.
* 결과는 1024–1439 구간 처리와 동일: 우측 zone 은 내용폭(auto)이고
* canvas 위에 얹혀 bar 하단 경계선을 잇는다.
*
* 3-zone DOM 은 data-has-toc="true" 라 이 두 selector 와 매칭 불가 —
* design.axelabs.ai · gate 기하는 원리적으로 무변화.
*/
.axe-workspace-shell[data-has-toc="false"] .axe-workspace-bar {
grid-template-columns: var(--workspace-rail-w) minmax(0, 1fr) auto;
}
.axe-workspace-shell[data-has-toc="false"] .axe-workspace-bar__right {
background: var(--workspace-canvas);
border-bottom: 1px solid var(--workspace-border);
border-left: 0;
}
/* 접힘 3-zone — 좌측 트랙만 빠지고 context rail 은 남는다. */
.axe-app-shell.axe-workspace-shell[data-rail-collapsed][data-shell="docs"] .axe-app-shell__main {
grid-template-columns: minmax(0, 1fr) var(--workspace-context-w);
}
.axe-workspace-shell[data-rail-collapsed] .axe-workspace-bar {
grid-template-columns: auto minmax(0, 1fr) var(--workspace-context-w);
}
/* 2-zone 셸(context rail 없음)은 접히면 1-zone 이 된다 — 펼침 상태에서
* layout.css 의 (0,5,0) 규칙이 하던 몫을 접힘 쪽에서도 같은 신호로 잡는다. */
.axe-app-shell.axe-workspace-shell[data-rail-collapsed][data-shell="docs"][data-has-toc="false"] .axe-app-shell__main {
grid-template-columns: minmax(0, 1fr);
}
.axe-workspace-shell[data-rail-collapsed][data-has-toc="false"] .axe-workspace-bar {
grid-template-columns: auto minmax(0, 1fr) auto;
}
}
@media screen and (min-width: 1024px) and (max-width: 1439.98px) {
.axe-workspace-shell .axe-app-shell__toc {
display: none;
}
}
@media (max-width: 1023.98px) {
.axe-app-shell.axe-workspace-shell[data-shell="docs"] .axe-app-shell__main {
grid-template-columns: minmax(0, 1fr);
}
.axe-workspace-shell :is(.axe-app-shell__sidebar, .axe-app-shell__toc) {
display: none;
}
.axe-workspace-shell .axe-app-shell__subnav {
display: block;
background: var(--workspace-rail);
border-color: var(--workspace-border);
}
.axe-workspace-shell .axe-app-shell__subnav-summary {
color: var(--workspace-text);
background: var(--workspace-rail);
}
.axe-workspace-shell .axe-app-shell__subnav-panel {
max-height: calc(100dvh - var(--workspace-topbar-h) - var(--app-shell-subnav-h));
overflow-y: auto;
background: var(--workspace-rail);
border-color: var(--workspace-border);
}
}
/* 손가락에는 눈금보다 손끝이 먼저다 — 포인터가 굵으면 셸의 조밀한 행들이 모두
* 44px 로 열린다. 세션 행도 같이 열어야 좌우 두 기둥이 터치에서도 같은 높이로
* 선다(좌측 .axe-workspace-rail__link 가 여기서 30px → 44px 로 가는데 우측만
* 30px 로 남으면, 정렬해 둔 리듬이 정작 손으로 만지는 자리에서 도로 갈린다).
*
* **이 블록은 자기가 여는 행들의 규칙보다 뒤에 있어야 한다.** 여기 선택자는
* 원 규칙과 특정도가 같고(미디어 질의는 특정도를 더하지 않는다) 순서로만 이긴다
* — 좌측 __link 가 이미 그렇게 서 있고 세션 행도 같은 방식으로 얹는다. 블록을
* 위로 옮기면 두 리듬이 조용히 원래 높이로 돌아간다. */
@media (pointer: coarse) {
.axe-workspace-bar__routes a,
.axe-workspace-rail__group-label,
.axe-workspace-rail__link,
.axe-workspace-rail__nav :is(.axe-sidebar__group-header, .axe-sidebar__link),
.axe-workspace-search,
.axe-workspace-entity:is(a, button),
.axe-workspace-entity > summary,
.axe-workspace-context__link,
.axe-workspace-context .axe-session-list--compact .axe-session-item__link,
.axe-workspace-context__body .axe-session-list--compact .axe-session-item__link {
min-height: 44px;
}
}
@media (prefers-reduced-motion: reduce) {
.axe-workspace-entity:is(a, button),
.axe-workspace-entity:is(a, button) > svg,
.axe-workspace-entity:is(a, button)::after,
.axe-workspace-entity > summary,
.axe-workspace-entity > summary > svg,
.axe-workspace-entity > summary::after,
.axe-workspace-identity,
.axe-workspace-identity--entity > svg,
.axe-workspace-identity-menu > summary::after,
.axe-workspace-identity-menu__panel,
.axe-workspace-bar__routes a,
.axe-workspace-rail__group-label,
.axe-workspace-rail__link,
.axe-workspace-rail__nav :is(.axe-sidebar__group-header, .axe-sidebar__link),
.axe-workspace-search {
transition: none;
}
/* 완료·보관 행 이름의 흐림은 **남고 전환만 사라진다**(0.38.9) — reduced-motion
* 은 움직임을 줄이라는 요청이지 상태 표현을 지우라는 요청이 아니다. 선택자를
* 그대로 반복하는 이유는 특정도다: 흐림 규칙이 (0,4,0) 이라 위 목록의
* (0,1,0) 짜리 이름들 옆에 얹으면 transition 이 지워지지 않는다. 같은 값에
* 이 블록이 뒤에 있어 순서로 이긴다. */
.axe-session-list--compact
.axe-session-item__link:has(
> :is(.axe-session-item__dot--done, .axe-session-item__dot--archived)
)
.axe-session-item__name {
transition: none;
}
details.axe-workspace-identity-menu > .axe-workspace-identity-menu__panel {
animation: none;
}
}
@media (forced-colors: active) {
.axe-workspace-bar__routes a[aria-current="page"],
.axe-workspace-rail__link[aria-current="page"],
.axe-workspace-rail__nav .axe-sidebar__item--active > .axe-sidebar__link {
outline: 1px solid CanvasText;
outline-offset: -1px;
}
.axe-workspace-context__tab[aria-current="page"],
.axe-workspace-context__tab[aria-selected="true"],
.axe-workspace-context__tab[data-state="active"] {
border-bottom: 2px solid CanvasText;
}
/* status 도트 — 강제색 모드는 author 색을 시스템 색으로 갈아끼우므로, 두면
* --active(초록 채움)와 --done(빈 원)이 같은 색으로 수렴해 구분이 사라진다.
* 여기서 지켜야 할 것은 색이 아니라 **채움 대 빈 원**이라는 형태 대비다:
* 진행 중은 본문색으로 채우고, 완료는 바탕색으로 비워 테두리만 남기며,
* 보관은 흐린 색으로 채워 셋이 서로 갈린다.
*
* 시스템 키워드로 적는 것만으로는 부족하다 — 기본값 forced-color-adjust: auto
* 에서는 UA 가 **이미 시스템 색인 선언까지** 다시 매핑하므로, 채움과 테두리가
* 같은 쌍으로 뭉개져 방금 만든 형태 대비가 도로 사라질 수 있다. none 으로
* 이 요소만 재치환에서 빼 위 값들을 적은 대로 쓴다.
*
* 보통 none 은 사용자가 거부한 색을 되살릴 위험 때문에 함부로 쓰지 않지만,
* 여기서는 지키는 값 자체가 시스템 키워드(CanvasText·GrayText·Canvas)라
* 사용자의 팔레트를 그대로 따른다 — 브랜드 색은 한 방울도 돌아오지 않는다. */
.axe-session-item__dot {
forced-color-adjust: none;
}
.axe-session-item__dot--active {
border-color: CanvasText;
background: CanvasText;
}
.axe-session-item__dot--done {
border-color: GrayText;
background: Canvas;
}
.axe-session-item__dot--archived {
border-color: GrayText;
background: GrayText;
}
/* 완료·보관 행 이름의 흐림은 **걸지 않는다**(0.38.9). 강제색 모드에는 명도 축이
* 없다 — 사용자가 고른 두세 가지 시스템 색만 남으므로, opacity 로 낮춘 글자는
* "한 단계 물러난 글자" 가 아니라 바탕에 섞여 **사라지는 글자**가 된다(그 팔레트가
* 흔히 검정 바탕에 흰 글자라 55% 는 회색이 아니라 소실이다). 여기서 상태를 지는
* 것은 이 모드가 형태 대비로 다시 세운 위 도트들과 __link 의 aria-label 이고,
* 흐림은 애초에 그 위에 얹은 보조 신호이므로 빼도 잃는 정보가 없다.
*
* 선택자를 그대로 반복해 같은 (0,4,0) 으로 맞추고 뒤 순서로 이긴다 — forced-colors
* 는 author 의 색만 갈아끼울 뿐 opacity 는 건드리지 않으므로, 여기서 되돌리지
* 않으면 흐림이 그대로 살아 남는다. */
.axe-session-list--compact
.axe-session-item__link:has(
> :is(.axe-session-item__dot--done, .axe-session-item__dot--archived)
)
.axe-session-item__name {
opacity: 1;
}
}
/* source: styles/indicators.css */
/* ============================================================
* Indicators (Phase 4) — Skeleton / Spinner / Avatar / Progress
*
* 본 파일은 components.css 에 통합되기 전 Phase 4 격리 CSS.
* 소비자는 globals.css 또는 showcase page 에서 직접 import.
*
* 모든 애니메이션 prefers-reduced-motion: reduce 존중.
* CSS-only — JS 의존 0. 성능 budget < 1KB gz / 컴포넌트.
* ============================================================ */
/* ---------- sr-only (a11y 유틸; Spinner 가 의존) ---------- */
.axe-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* ============================================================
* Skeleton — content placeholder.
* shimmer = ::after overlay 의 transform sweep — compositor-only
* (background-position 애니메이션은 paint-bound → transform 으로 통일).
* variant: text(line) / circle / rect(default).
* ============================================================ */
.axe-skeleton {
display: block;
position: relative;
overflow: hidden; /* radius clip — sweep 가 모서리 밖으로 안 새게. */
background: var(--bg-subtle);
border-radius: var(--radius-md);
}
.axe-skeleton::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
color-mix(in oklch, var(--text-primary) 6%, transparent),
transparent
);
animation: axe-shimmer 1.4s var(--ease-in-out, ease-in-out) infinite;
}
.axe-skeleton--text {
height: 1em;
border-radius: var(--radius-sm);
/* text line 은 1em 기본; 사용자가 height 로 덮어쓰면 그게 우선. */
}
.axe-skeleton--circle {
border-radius: 9999px;
aspect-ratio: 1 / 1;
}
.axe-skeleton--rect {
/* rect 기본; 사용자가 width/height 명시. */
}
/* 공유 shimmer keyframes — dashboard.css (MetricCard/PipelineTable skel) 와
* data-display.css (DataTable skel) 도 본 keyframes 를 사용.
* components.css import 순서상 indicators 가 가장 먼저 로드됨. */
@keyframes axe-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* ============================================================
* Spinner — indeterminate.
* svg + circle stroke-dasharray rotation.
* prefers-reduced-motion 시 dot 만 깜박임.
* ============================================================ */
.axe-spinner {
display: inline-flex;
align-items: center;
gap: var(--space-2);
vertical-align: middle;
color: var(--accent);
line-height: 1;
}
.axe-spinner__svg {
display: block;
animation: axe-spinner-rotate 0.9s linear infinite;
}
.axe-spinner__track {
stroke: color-mix(in oklch, currentColor 18%, transparent);
}
.axe-spinner__head {
stroke: currentColor;
/* circumference = 2 * PI * 10 ≈ 62.83. 1/4 가시 (15.7), 3/4 갭. */
stroke-dasharray: 15.7 62.83;
transform-origin: center;
}
/* reduced-motion 대체: dot pulse */
.axe-spinner__dot {
display: none;
width: 0.5em;
height: 0.5em;
border-radius: 9999px;
background: currentColor;
}
.axe-spinner__label {
font-size: var(--text-sm);
color: var(--text-secondary);
}
@keyframes axe-spinner-rotate {
to { transform: rotate(360deg); }
}
@keyframes axe-spinner-pulse {
0%, 100% { opacity: 0.35; }
50% { opacity: 1; }
}
@media (prefers-reduced-motion: reduce) {
.axe-spinner__svg { display: none; }
.axe-spinner__dot {
display: inline-block;
animation: axe-spinner-pulse 1.4s ease-in-out infinite;
}
}
/* ============================================================
* Avatar — Radix Avatar 위 styling.
* size sm 24 / md 32 / lg 48. fallback initials 자동 layout.
* ============================================================ */
.axe-avatar {
display: inline-flex;
align-items: center;
justify-content: center;
overflow: hidden;
border-radius: 9999px;
background: var(--bg-subtle);
color: var(--text-secondary);
font-family: var(--font-display, inherit);
font-weight: var(--weight-medium);
user-select: none;
vertical-align: middle;
flex-shrink: 0;
}
.axe-avatar--sm { width: 24px; height: 24px; font-size: 10px; }
.axe-avatar--md { width: 32px; height: 32px; font-size: 12px; }
.axe-avatar--lg { width: 48px; height: 48px; font-size: 18px; }
.axe-avatar__image {
width: 100%;
height: 100%;
object-fit: cover;
border-radius: inherit;
}
.axe-avatar__fallback {
display: inline-flex;
align-items: center;
justify-content: center;
width: 100%;
height: 100%;
text-transform: uppercase;
letter-spacing: 0.02em;
color: var(--text-secondary);
background: var(--bg-subtle);
}
/* ============================================================
* Progress — Radix Progress 위 styling.
* determinate: transform translateX 로 indicator 이동.
* indeterminate: sweep keyframes.
* variant: default(accent) / success / danger.
* ============================================================ */
.axe-progress {
position: relative;
overflow: hidden;
width: 100%;
height: 6px;
background: var(--bg-subtle);
border-radius: 9999px;
/* Radix 가 max/value 를 aria 로 설정 — 추가 처리 불필요. */
/* iOS Safari 의 transform overflow bug 방어. */
transform: translateZ(0);
}
.axe-progress__indicator {
width: 100%;
height: 100%;
background: var(--accent);
border-radius: inherit;
transition: transform var(--duration-base, 200ms) var(--ease-out, ease-out);
}
.axe-progress--success .axe-progress__indicator { background: var(--success); }
.axe-progress--danger .axe-progress__indicator { background: var(--danger); }
/* Indeterminate — indicator 를 1/3 폭의 sweep 으로 변환. */
.axe-progress--indeterminate .axe-progress__indicator {
width: 33%;
transform: translateX(-100%);
animation: axe-progress-sweep 1.4s ease-in-out infinite;
transition: none;
}
@keyframes axe-progress-sweep {
0% { transform: translateX(-100%); }
50% { transform: translateX(150%); }
100% { transform: translateX(300%); }
}
@media (prefers-reduced-motion: reduce) {
.axe-skeleton::after {
content: none;
}
.axe-progress__indicator {
transition: none;
}
.axe-progress--indeterminate .axe-progress__indicator {
animation: none;
width: 100%;
transform: translateX(0);
opacity: 0.6;
}
}
/* source: styles/dashboard.css */
/* ============================================================
* Dashboard primitives (Phase 7)
* StatusLight · MetricCard · PipelineTable
*
* 본 파일은 components.css 통합 전 Phase 7 격리 CSS. 소비자는
* globals.css 또는 showcase page 에서 직접 import.
*
* 원칙
* · token-only — Tailwind 0, hard-coded color 0.
* · CSS-only animation (pulse / hover transition).
* · prefers-reduced-motion: reduce 시 모든 motion 정지/완화.
* · light/dark 자동 — CSS var 만 사용.
* ============================================================ */
/* ============================================================
* StatusLight — 색 dot (+ optional label / timestamp).
*
* variant canonical: ok | warning | danger | muted | running
* ok → --success
* warning → --warning
* danger → --danger
* muted → --text-muted (회색)
* running → --info (파란 계열, pulse 권장)
*
* size sm 8 / md 10 / lg 12 (px). baseline 정렬은 inline-flex.
* ============================================================ */
.axe-status-light {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-sm);
line-height: 1;
vertical-align: middle;
}
.axe-status-light__dot {
flex-shrink: 0;
display: inline-block;
border-radius: var(--radius-full);
background: currentColor; /* color 는 variant 가 결정 */
/* dot 자체에는 color 못 줌 → variant 가 .axe-status-light 의 color 를 세팅,
dot 의 background: currentColor 로 상속. */
}
/* size — dot 만 영향, label 은 부모 font 추종. */
.axe-status-light--size-sm .axe-status-light__dot { width: 8px; height: 8px; }
.axe-status-light--size-md .axe-status-light__dot { width: 10px; height: 10px; }
.axe-status-light--size-lg .axe-status-light__dot { width: 12px; height: 12px; }
/* variant — currentColor 만 바꿈 (dot 은 currentColor 상속, label/timestamp 는
별도 색 가짐). light/dark 모두 token 으로 자동 적응. */
.axe-status-light--ok { color: var(--success); }
.axe-status-light--warning { color: var(--warning); }
.axe-status-light--danger { color: var(--danger); }
.axe-status-light--muted { color: var(--text-muted); }
.axe-status-light--running { color: var(--info); }
/* label / timestamp 는 currentColor 무시하고 본 token 사용 — dot 만 컬러풀. */
.axe-status-light__label {
color: var(--text-primary);
font-weight: var(--weight-medium);
}
.axe-status-light__timestamp {
color: var(--text-muted);
font-variant-numeric: tabular-nums;
font-size: var(--text-xs);
}
/* Pulse — dot 만 깜박임. label 영향 X.
transform 대신 opacity + box-shadow ring 으로 — GPU 합성, layout 영향 0. */
.axe-status-light--pulse .axe-status-light__dot {
animation: axe-status-light-pulse 1.6s ease-in-out infinite;
box-shadow: 0 0 0 0 currentColor;
}
@keyframes axe-status-light-pulse {
0% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 50%, transparent); }
70% { box-shadow: 0 0 0 6px color-mix(in oklch, currentColor 0%, transparent); }
100% { box-shadow: 0 0 0 0 color-mix(in oklch, currentColor 0%, transparent); }
}
@media (prefers-reduced-motion: reduce) {
.axe-status-light--pulse .axe-status-light__dot {
animation: none;
box-shadow: none;
}
}
/* ============================================================
* MetricCard — KPI tile.
* layout: vertical stack (label → value → meta → sparkline).
* 숫자 정렬: tabular-nums on value/delta/sparkline.
* ============================================================ */
.axe-metric-card {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-4);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-sm);
/* sparkline 의 currentColor 상속용 base color. */
color: var(--text-primary);
}
.axe-metric-card__head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.axe-metric-card__label {
font-size: var(--text-xs);
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: 0.06em;
font-weight: var(--weight-medium);
}
.axe-metric-card__icon {
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-tertiary);
flex-shrink: 0;
}
.axe-metric-card__value {
font-family: var(--font-display, inherit);
font-size: var(--text-3xl);
font-weight: var(--weight-semibold);
line-height: 1.1;
color: var(--text-primary);
font-variant-numeric: tabular-nums;
/* 긴 값 줄바꿈 방지 — overflow ellipsis */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
.axe-metric-card__meta {
display: flex;
align-items: center;
flex-wrap: wrap;
gap: var(--space-2) var(--space-3);
font-size: var(--text-sm);
}
.axe-metric-card__delta {
display: inline-flex;
align-items: baseline;
gap: var(--space-1);
font-variant-numeric: tabular-nums;
font-weight: var(--weight-medium);
}
.axe-metric-card__delta--up { color: var(--success); }
.axe-metric-card__delta--down { color: var(--danger); }
.axe-metric-card__delta--flat { color: var(--text-muted); }
.axe-metric-card__delta-arrow {
font-size: 0.85em;
line-height: 1;
}
.axe-metric-card__delta-label {
color: var(--text-muted);
font-weight: var(--weight-regular);
}
.axe-metric-card__helper {
color: var(--text-muted);
font-size: var(--text-xs);
}
.axe-metric-card__sparkline {
display: block;
width: 100%;
height: 24px;
margin-top: var(--space-1);
color: var(--accent);
opacity: 0.85;
overflow: visible;
}
/* Loading skeleton — .axe-skeleton 클래스는 안 가져오되, shimmer keyframes 는
indicators.css 의 axe-shimmer 공유 (transform sweep — compositor-only). */
.axe-metric-card--loading {
pointer-events: none;
}
.axe-metric-card__skel {
position: relative;
overflow: hidden; /* radius clip */
background: var(--bg-subtle);
border-radius: var(--radius-sm);
}
.axe-metric-card__skel::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
color-mix(in oklch, var(--text-primary) 6%, transparent),
transparent
);
animation: axe-shimmer 1.4s var(--ease-in-out, ease-in-out) infinite;
}
.axe-metric-card__skel--label { width: 40%; height: 10px; }
.axe-metric-card__skel--value { width: 70%; height: 28px; border-radius: var(--radius-md); }
.axe-metric-card__skel--helper { width: 55%; height: 10px; }
@media (prefers-reduced-motion: reduce) {
.axe-metric-card__skel::after {
content: none;
}
}
/* ============================================================
* PipelineTable — operator status table.
* wrap > scroll > table. 모바일 → 가로 스크롤.
* row hover: bg 미세 시프트. clickable row 는 cursor + focus ring.
* ============================================================ */
.axe-pipeline-table {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden; /* radius clip */
}
.axe-pipeline-table__scroll {
width: 100%;
overflow-x: auto;
/* iOS momentum */
-webkit-overflow-scrolling: touch;
}
.axe-pipeline-table__table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
/* 모바일에서 너무 좁아지면 가로 스크롤이 의미 있도록 min-width 잡음.
기본 600px — column.width 합산이 더 크면 자동으로 더 넓어짐. */
min-width: 600px;
}
.axe-pipeline-table__thead {
background: var(--bg-subtle);
}
.axe-pipeline-table__th {
text-align: left;
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-subtle);
white-space: nowrap;
}
.axe-pipeline-table__th--right { text-align: right; }
.axe-pipeline-table__th--center { text-align: center; }
.axe-pipeline-table__th--status {
width: 32px;
padding-right: 0;
}
.axe-pipeline-table__tr {
border-bottom: 1px solid var(--border-subtle);
transition: background-color var(--duration-fast, 120ms) var(--ease-out, ease-out);
}
.axe-pipeline-table__tr:last-child {
border-bottom: 0;
}
.axe-pipeline-table__tr:hover {
background: color-mix(in oklch, var(--accent) 4%, transparent);
}
.axe-pipeline-table__tr--clickable {
cursor: pointer;
}
.axe-pipeline-table__tr--clickable:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.axe-pipeline-table__td {
padding: var(--space-3) var(--space-4);
color: var(--text-primary);
/* numeric 정렬 — 좌측 텍스트는 자연스레 무시. */
font-variant-numeric: tabular-nums;
vertical-align: middle;
}
.axe-pipeline-table__td--right { text-align: right; }
.axe-pipeline-table__td--center { text-align: center; }
.axe-pipeline-table__td--status {
width: 32px;
padding-right: 0;
text-align: center;
}
/* empty state */
.axe-pipeline-table__tr--empty:hover { background: transparent; }
.axe-pipeline-table__empty {
padding: var(--space-5) var(--space-4);
text-align: center;
color: var(--text-muted);
font-size: var(--text-sm);
}
/* skeleton rows */
.axe-pipeline-table__tr--skeleton:hover { background: transparent; }
/* shimmer = indicators.css 의 axe-shimmer keyframes 공유 (transform sweep). */
.axe-pipeline-table__skel {
display: inline-block;
position: relative;
overflow: hidden; /* radius clip */
background: var(--bg-subtle);
border-radius: var(--radius-sm);
}
.axe-pipeline-table__skel::after {
content: "";
position: absolute;
inset: 0;
transform: translateX(-100%);
background: linear-gradient(
90deg,
transparent,
color-mix(in oklch, var(--text-primary) 6%, transparent),
transparent
);
animation: axe-shimmer 1.4s var(--ease-in-out, ease-in-out) infinite;
}
.axe-pipeline-table__skel--dot {
width: 8px;
height: 8px;
border-radius: var(--radius-full);
}
.axe-pipeline-table__skel--bar {
width: 70%;
height: 12px;
}
@media (prefers-reduced-motion: reduce) {
.axe-pipeline-table__tr {
transition: none;
}
.axe-pipeline-table__skel::after {
content: none;
}
}
/* 모바일 viewport (≤480px) — padding 줄이고 font 더 작게.
그래도 가로 스크롤이 우선 — table min-width 가 살아있음. */
@media (max-width: 480px) {
.axe-pipeline-table__th,
.axe-pipeline-table__td {
padding: var(--space-2) var(--space-3);
}
.axe-pipeline-table__table {
font-size: var(--text-xs);
}
}
/* axe-shimmer keyframes — indicators.css 와 동일 정의 (cortex 등 선택적 번들이
* indicators 없이 본 파일만 포함해도 동작. 동명 중복 정의는 무해 — 후승). */
@keyframes axe-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* source: styles/mobile.css */
/* ============================================================
* @axe/ui — Mobile polish + PWA (Phase 5)
*
* Cortex 의 globals.css (mobile section) + mysrt 의 static/style.css
* (sticky blur header + tnum toggle) 를 SSOT 로 흡수.
*
* 소비자는 components.css 만 import 해도 본 파일이 자동 포함됨
* (components.css 가 @import "./mobile.css" 함).
*
* 디자인 원칙:
* - 모든 폰트 사이즈는 CSS var 또는 16px (iOS zoom prevention) 사용
* - safe-area-inset 은 padding 으로만 노출 — layout shift 0
* - tap highlight / user-select 는 .axe-* utility 가 아닌 *전역* 적용
* (소비자가 매번 클래스 달 필요 없게)
* - 핸드폰만 영향 받는 규칙은 @media (max-width / pointer:coarse) 안에
* ============================================================ */
/* ────────────────────────────────────────────────────────────
* Global mobile polish — 전역 적용 (Cortex 흡수)
* ──────────────────────────────────────────────────────────── */
/* iOS Safari 의 자동 zoom 방지 — input/textarea/select 가 16px 미만이면 focus 시 zoom.
* 데스크탑은 .axe-input 의 var(--text-sm) 유지를 위해 모바일 only. */
@media (max-width: 767.98px) {
input,
textarea,
select {
font-size: 16px;
}
}
/* 페이지 전체 pull-to-refresh 차단 — 우리 usePullToRefresh 와 충돌 방지.
* 개별 .axe-scroll-container 에서 overscroll-behavior: contain 재정의 가능. */
html {
overscroll-behavior-y: contain;
}
/* 모바일 tap highlight 제거 — iOS/Android 의 회색 박스 안 보이게. */
* {
-webkit-tap-highlight-color: transparent;
}
/* App-like UI 요소는 텍스트 선택 차단 (실수 방지). */
button,
nav,
header,
footer,
[role="button"],
[role="tab"],
[role="menuitem"] {
-webkit-user-select: none;
user-select: none;
}
/* 본문/입력 영역은 선택 가능 — 위 규칙 override. */
main,
textarea,
input,
[contenteditable="true"],
[role="log"],
article,
.axe-prose,
.axe-message__body {
-webkit-user-select: text;
user-select: text;
}
/* iOS momentum scroll — 컨테이너 ref 용 utility. */
.axe-scroll-container {
-webkit-overflow-scrolling: touch;
overscroll-behavior: contain;
}
/* ────────────────────────────────────────────────────────────
* Safe-area utility classes
* env(safe-area-inset-*) 는 iOS notch / Dynamic Island / Android gesture bar
* 영역을 피하기 위한 OS 제공 값. CSS var 로 노출해 .axe-* 가 자유롭게 참조.
*
* iOS 에서는
* 가 root layout 에 있어야 env() 가 0 이 아닌 값을 반환.
* ──────────────────────────────────────────────────────────── */
:root {
--axe-safe-top: env(safe-area-inset-top, 0px);
--axe-safe-bottom: env(safe-area-inset-bottom, 0px);
--axe-safe-left: env(safe-area-inset-left, 0px);
--axe-safe-right: env(safe-area-inset-right, 0px);
}
.axe-safe-area {
padding-top: var(--axe-safe-top);
padding-bottom: var(--axe-safe-bottom);
padding-left: var(--axe-safe-left);
padding-right: var(--axe-safe-right);
}
.axe-safe-area-top { padding-top: var(--axe-safe-top); }
.axe-safe-area-bottom { padding-bottom: var(--axe-safe-bottom); }
.axe-safe-area-x {
padding-left: var(--axe-safe-left);
padding-right: var(--axe-safe-right);
}
/* ────────────────────────────────────────────────────────────
* Sticky blur header — mysrt 패턴 SSOT 화.
*
* 페이지 최상단에 fixed-style 헤더 → 스크롤 시 blur + saturate 로 깊이감.
* .axe-topnav 가 이미 같은 패턴인데, 본 utility 는 *non-nav* 영역 (예:
* chat thread 상단의 conversation title bar, IC report toolbar) 용.
*
* 소비:
*
* ──────────────────────────────────────────────────────────── */
.axe-sticky-blur {
position: sticky;
top: 0;
z-index: var(--z-sticky, 50);
background: color-mix(in oklch, var(--bg-base) 82%, transparent);
backdrop-filter: saturate(180%) blur(14px);
-webkit-backdrop-filter: saturate(180%) blur(14px);
border-bottom: 1px solid var(--border-subtle);
}
/* ────────────────────────────────────────────────────────────
* Tabular numbers utility — mysrt 의 tnum toggle 흡수.
*
* 재무 숫자 (portfolio KPI, IC report 의 valuation/IRR 컬럼,
* payslip 의 금액 컬럼) 는 fixed-width 숫자가 정렬 정확도에 필수.
* 본 utility 를 셀/컬럼에 달면 monospace 숫자 폭 적용 — 다른 폰트는 그대로.
*
* 쓰임:
* - Portfolio KPI dashboard 의 금액/지분율
* - IC report 의 valuation 표, IRR 컬럼
* - Payslip / payroll 의 amount 컬럼
* - Countdown / poll count 같은 변화하는 숫자
*
* .axe-table 에는 이미 font-variant-numeric: tabular-nums 가 있음.
* 본 utility 는 *임의의 요소* 에 같은 효과를 주기 위함.
* ──────────────────────────────────────────────────────────── */
.axe-tabular-nums {
font-variant-numeric: tabular-nums;
font-feature-settings: "tnum" 1;
}
/* ────────────────────────────────────────────────────────────
* PWA standalone display — iOS "홈 화면에 추가" / Android PWA 설치 후.
*
* standalone 모드에서는 브라우저 chrome 이 없어서 safe-area 가 더 중요.
* body 전역에 적용 — 모든 페이지 자동 보호.
* ──────────────────────────────────────────────────────────── */
@media (display-mode: standalone) {
body {
padding-top: var(--axe-safe-top);
padding-bottom: var(--axe-safe-bottom);
padding-left: var(--axe-safe-left);
padding-right: var(--axe-safe-right);
}
}
/* ────────────────────────────────────────────────────────────
* Pull-to-refresh indicator slot — usePullToRefresh 의 시각 보조 utility.
*
* hook 은 logic 만 제공하지만, 가장 흔한 indicator (당김 progress 막대 +
* refreshing spinner) 의 시각 어휘는 SSOT 에 두는 게 합리적.
* 소비자는 식.
* ──────────────────────────────────────────────────────────── */
.axe-ptr-indicator {
display: flex;
align-items: center;
justify-content: center;
overflow: hidden;
color: var(--text-tertiary);
font-size: var(--text-xs);
/* height transition 없음 (의도적) — usePullToRefresh 가 매 프레임 height 를
직접 구동하므로 transition 이 겹치면 이중 애니메이션 + layout jank.
release 시 collapse 애니메이션도 hook 책임 (height 는 layout 속성이라
transform 대체 불가 — 아래 콘텐츠를 밀어내야 함). */
}
/* source: styles/agent.css */
/* ============================================================
* Phase 8 — Agent composites (AgentExecutor / StreamingTable
* / MultiModalChatInput / attach chip / etc.)
*
* 본 파일은 components.css 가 import 하지 않음 (Phase 8 owner 가
* 명시적 opt-in). 새 컴포넌트가 통합 stable 되면 components.css 에
* @import "./agent.css"; 한 줄 추가 예정.
* ============================================================ */
/* ---------- AgentExecutor ---------- */
.axe-agent-executor {
display: flex;
flex-direction: column;
height: 100%;
min-height: 0;
background: var(--bg-base);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
}
.axe-agent-executor__scroll {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: var(--space-4) var(--space-5);
display: flex;
flex-direction: column;
gap: var(--space-2);
scroll-behavior: smooth;
}
@media (prefers-reduced-motion: reduce) {
.axe-agent-executor__scroll {
scroll-behavior: auto;
}
}
.axe-agent-executor__empty {
padding: var(--space-8) var(--space-4);
text-align: center;
color: var(--text-muted);
font-size: var(--text-sm);
}
.axe-agent-executor__user-content {
white-space: pre-wrap;
word-break: break-word;
color: var(--text-primary);
}
.axe-agent-executor__tools {
display: flex;
flex-direction: column;
gap: var(--space-2);
margin-top: var(--space-2);
}
.axe-agent-executor__tools--free {
margin: var(--space-2) 0 0;
}
.axe-agent-executor__attachments {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-2);
}
.axe-agent-executor__streaming-hint {
display: flex;
align-items: center;
gap: var(--space-3);
padding: var(--space-2) var(--space-3);
margin-top: var(--space-2);
border-radius: var(--radius-md);
background: var(--bg-subtle);
color: var(--text-tertiary);
font-size: var(--text-xs);
}
.axe-agent-executor__input {
flex: 0 0 auto;
padding: var(--space-3) var(--space-4) var(--space-4);
border-top: 1px solid var(--border-subtle);
background: var(--bg-base);
}
/* ---------- MultiModalChatInput — extends .axe-chat-input ---------- */
.axe-chat-input--dragover {
border-color: var(--accent);
box-shadow: var(--ring);
}
.axe-chat-input--disabled {
opacity: 0.6;
pointer-events: none;
}
.axe-chat-input__drop-overlay {
position: absolute;
inset: 0;
display: flex;
align-items: center;
justify-content: center;
pointer-events: none;
background: color-mix(in oklch, var(--accent) 8%, transparent);
color: var(--accent);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
border-radius: var(--radius-lg);
}
/* drop overlay 위치 잡으려면 chat-input 이 position:relative 필요 — Phase 8 에서만 적용. */
.axe-agent-executor .axe-chat-input,
.axe-chat-input:has(.axe-chat-input__drop-overlay) {
position: relative;
}
.axe-attach-file-input {
display: none;
}
.axe-attach-button {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: var(--space-1) var(--space-2);
background: transparent;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-xs);
font-family: inherit;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.axe-attach-button:hover:not(:disabled) {
background: var(--bg-subtle);
color: var(--text-primary);
border-color: var(--border-default);
}
.axe-attach-button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
/* ---------- attach chip ---------- */
.axe-attach-list {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.axe-attach-chip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-1) var(--space-2);
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
font-size: var(--text-xs);
color: var(--text-secondary);
max-width: 240px;
overflow: hidden;
}
.axe-attach-chip__thumb {
width: 24px;
height: 24px;
border-radius: var(--radius-sm);
object-fit: cover;
flex-shrink: 0;
}
.axe-attach-chip__icon {
width: 24px;
height: 24px;
display: inline-flex;
align-items: center;
justify-content: center;
background: var(--bg-elevated);
border-radius: var(--radius-sm);
color: var(--text-tertiary);
flex-shrink: 0;
font-size: var(--text-sm);
}
.axe-attach-chip__name {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--text-primary);
min-width: 0;
}
.axe-attach-chip__size {
color: var(--text-tertiary);
font-variant-numeric: tabular-nums;
white-space: nowrap;
flex-shrink: 0;
}
.axe-attach-chip__remove {
display: inline-flex;
align-items: center;
justify-content: center;
width: 18px;
height: 18px;
background: transparent;
border: 0;
border-radius: var(--radius-full);
color: var(--text-tertiary);
cursor: pointer;
font-size: var(--text-base);
line-height: 1;
padding: 0;
flex-shrink: 0;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.axe-attach-chip__remove:hover {
background: var(--bg-elevated);
color: var(--text-primary);
}
/* compact = AgentExecutor 의 사용자 메시지 안에 표시되는 mini chip */
.axe-attach-chip--compact {
padding: 2px var(--space-2);
max-width: 200px;
}
.axe-attach-chip--compact .axe-attach-chip__thumb,
.axe-attach-chip--compact .axe-attach-chip__icon {
width: 18px;
height: 18px;
}
/* ---------- StreamingTable ---------- */
.axe-streaming-table {
width: 100%;
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
overflow: hidden;
}
.axe-streaming-table__progress {
height: 2px;
background: var(--bg-subtle);
overflow: hidden; /* scaleX 된 bar 가 track 밖으로 안 새게 clip. */
}
/* width 대신 transform scaleX — 연속 갱신되는 요소라 layout 안 건드리고
* compositor 에서만 처리. 진행률은 --axe-progress (0..1) 로 주입. */
.axe-streaming-table__progress-bar {
height: 100%;
width: 100%;
background: var(--accent);
transform-origin: left;
transform: scaleX(var(--axe-progress, 1)); /* 기본 1: 구 마크업(inline width:%)은 width 가 그대로 보이도록 (CSS-only 소비자 하위호환) */
transition: transform var(--duration-base, 200ms) var(--ease-out);
}
.axe-streaming-table__scroll {
width: 100%;
overflow-x: auto;
-webkit-overflow-scrolling: touch;
}
.axe-streaming-table__table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
min-width: 480px;
}
.axe-streaming-table__thead {
background: var(--bg-subtle);
}
.axe-streaming-table__th {
text-align: left;
padding: var(--space-3) var(--space-4);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-secondary);
text-transform: uppercase;
letter-spacing: 0.04em;
border-bottom: 1px solid var(--border-subtle);
white-space: nowrap;
}
.axe-streaming-table__th--right { text-align: right; }
.axe-streaming-table__th--center { text-align: center; }
.axe-streaming-table__tr {
border-bottom: 1px solid var(--border-subtle);
}
.axe-streaming-table__tr:last-child {
border-bottom: 0;
}
.axe-streaming-table__td {
padding: var(--space-3) var(--space-4);
color: var(--text-primary);
font-variant-numeric: tabular-nums;
vertical-align: middle;
}
.axe-streaming-table__td--right { text-align: right; }
.axe-streaming-table__td--center { text-align: center; }
.axe-streaming-table__tr--empty:hover,
.axe-streaming-table__tr--pending:hover {
background: transparent;
}
.axe-streaming-table__empty {
text-align: center;
color: var(--text-muted);
padding: var(--space-5) var(--space-4);
}
.axe-streaming-table__pending {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--text-tertiary);
font-size: var(--text-xs);
}
/* row fade-in */
.axe-streaming-table__tr--in {
animation: axe-stream-row-in 220ms var(--ease-out, ease-out) both;
}
@keyframes axe-stream-row-in {
from {
opacity: 0;
transform: translateY(-4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@media (prefers-reduced-motion: reduce) {
.axe-streaming-table__tr--in {
animation: none;
}
.axe-streaming-table__progress-bar {
transition: none;
}
}
/* source: styles/data-display.css */
/* ============================================================
* Data display (Phase 14 Wave 5)
* DataTable · Pagination · Chart (recharts wrap) · DescriptionList (.axe-kv)
*
* 본 파일은 core-data Consumer Kit 프로파일에 포함된다 (export-axe-ui.mjs 의
* CORE_DATA_SOURCES). cortex 처럼 core-data 로 소비하는 서비스가 쓰는 데이터
* 표시 primitive 는 data-views.css 가 아니라 여기 둔다 — 그쪽은 프로파일 밖이라
* 투영에서 통째로 빠진다.
*
* Phase 7 dashboard.css 와 별도 — Pipeline 은 운영자 status row,
* DataTable 은 일반 데이터 + 정렬/페이징. 스타일 분리해서 tree-shake
* 가능, showcase page 에서 본 파일만 import.
*
* 원칙
* · token-only — Tailwind 0, hard-coded color 0.
* · CSS-only animation (hover transition, skeleton shimmer).
* · prefers-reduced-motion: reduce 시 모든 motion 정지/완화.
* · light/dark 자동 — CSS var 만 사용.
* ============================================================ */
/* ============================================================
* DataTable — sortable, paginatable generic data table.
* wrap > scroll > table. PipelineTable 과 마크업 유사하지만
* sortable header 가
* 래퍼는 display: contents 라 박스를 만들지 않고 grid 참여만 넘긴다.
* ============================================================ */
.axe-kv {
display: grid;
grid-template-columns: var(--axe-kv-key-w, 8.75rem) minmax(0, 1fr);
gap: var(--space-2) var(--space-4);
margin: 0;
font-size: var(--text-sm);
}
.axe-kv--compact {
gap: var(--space-1) var(--space-3);
}
.axe-kv__row {
display: contents;
}
.axe-kv__key {
margin: 0;
color: var(--text-muted);
font-weight: var(--weight-regular);
overflow-wrap: anywhere; /* 끊을 곳 없는 긴 키가 고정 폭 열을 넘지 않게 (value 와 동일) */
}
.axe-kv__value {
margin: 0;
color: var(--text-primary);
overflow-wrap: anywhere;
}
/* 좁은 폭 — 한 열 stack. 행 사이만 벌려 key·value 짝이 붙어 보이게 한다
(평면 마크업은 dd+dt 인접, 래핑 마크업은 row+row 인접으로 각각 잡는다). */
@media (max-width: 30rem) {
.axe-kv {
grid-template-columns: minmax(0, 1fr);
row-gap: var(--space-1);
}
.axe-kv__value + .axe-kv__key,
.axe-kv__row + .axe-kv__row .axe-kv__key {
margin-top: var(--space-2);
}
}
/* axe-shimmer keyframes — indicators.css 와 동일 정의 (cortex 등 선택적 번들이
* indicators 없이 본 파일만 포함해도 동작. 동명 중복 정의는 무해 — 후승). */
@keyframes axe-shimmer {
from { transform: translateX(-100%); }
to { transform: translateX(100%); }
}
/* source: styles/menus.css */
/* ============================================================
* @axe/ui — Menus group (AlertDialog · Accordion · DropdownMenu)
*
* Phase 14 Wave 5. 세 컴포넌트 모두 Radix 위 thin wrapper.
*
* - AlertDialog : Dialog 와 비주얼 90% 동일 (overlay + 카드). 차이는
* close X 없음 + footer 의 Cancel/Action 강조 + destructive variant.
* - Accordion : chevron rotate 0deg→90deg + smooth height collapse
* (Radix --radix-accordion-content-height 변수).
* - DropdownMenu: 메뉴 표면 + item highlighted state + danger variant +
* separator + checkbox/radio indicator + Kbd shortcut + sub-menu.
*
* 공통: prefers-reduced-motion 시 모든 트랜지션/애니메이션 off.
* owner 컴포넌트의 components.css 는 건드리지 않음 — 본 파일은
* 독립 import (소비자가 명시 import 하거나 추후 owner 가 통합).
* ============================================================ */
/* ────────────────────────────────────────────────────────────
* AlertDialog
* - Dialog 의 overlay/content 키프레임을 재사용하지 않고 자체 정의
* (소비자가 menus.css 만 import 해도 작동해야 하므로).
* - size: sm 440 default / md 560 / lg 720. full/xl 없음 — confirm 모달은 작게.
* ──────────────────────────────────────────────────────────── */
.axe-alert-dialog__overlay {
position: fixed;
inset: 0;
background: var(--bg-overlay);
backdrop-filter: blur(2px);
z-index: var(--z-modal); /* Sheet (var(--z-overlay)=1000) 보다 위 */
animation: axe-alert-dialog-overlay-in 160ms ease-out;
}
.axe-alert-dialog__overlay[data-state="closed"] {
animation: axe-alert-dialog-overlay-out 120ms ease-in forwards;
}
.axe-alert-dialog__content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100vw - 2 * var(--space-4));
max-height: calc(100dvh - 2 * var(--space-4));
overflow: auto;
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); /* 대형 overlay 표면 = 16px (radius mapping) */
box-shadow: var(--shadow-lg);
padding: var(--space-6);
z-index: calc(var(--z-modal) + 1);
animation: axe-alert-dialog-content-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.axe-alert-dialog__content[data-state="closed"] {
animation: axe-alert-dialog-content-out 140ms ease-in forwards;
}
.axe-alert-dialog__content:focus { outline: none; }
.axe-alert-dialog__content--sm { max-width: 440px; }
.axe-alert-dialog__content--md { max-width: 560px; }
.axe-alert-dialog__content--lg { max-width: 720px; }
/* Header — close X 없음 → padding-right 0 (Dialog 와 다른 점). */
.axe-alert-dialog__header {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-4);
}
.axe-alert-dialog__title {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
line-height: 1.3;
color: var(--text-primary);
margin: 0;
}
.axe-alert-dialog__description {
font-size: var(--text-sm);
line-height: 1.55;
color: var(--text-secondary);
margin: 0;
}
.axe-alert-dialog__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
/* Cancel/Action 은 .axe-btn 위에 얹는 미세 보정만 — 강제 우정렬 + 최소 폭. */
.axe-alert-dialog__cancel,
.axe-alert-dialog__action {
min-width: 80px;
justify-content: center;
}
@keyframes axe-alert-dialog-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes axe-alert-dialog-overlay-out {
to { opacity: 0; }
}
@keyframes axe-alert-dialog-content-in {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes axe-alert-dialog-content-out {
to { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
}
/* ────────────────────────────────────────────────────────────
* Accordion
* - item 사이 border-bottom (마지막 item 은 제거).
* - trigger = 전폭 버튼, chevron 우측, hover bg-subtle.
* - content = height transition (closed: 0 → open: var(--radix-accordion-content-height)).
* ──────────────────────────────────────────────────────────── */
.axe-accordion__item {
border-bottom: 1px solid var(--border-subtle);
}
.axe-accordion__item:last-child {
border-bottom: 0;
}
.axe-accordion__header {
margin: 0;
display: flex;
}
.axe-accordion__trigger {
flex: 1;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
padding: var(--space-3) var(--space-1);
background: transparent;
border: 0;
cursor: pointer;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: 1.4;
text-align: left;
border-radius: var(--radius-sm);
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.axe-accordion__trigger:hover {
background: var(--bg-subtle);
}
.axe-accordion__trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.axe-accordion__trigger-label {
flex: 1;
min-width: 0;
}
.axe-accordion__chevron {
flex: 0 0 auto;
color: var(--text-tertiary);
transition: transform 180ms var(--ease-out);
}
.axe-accordion__trigger[data-state="open"] .axe-accordion__chevron {
transform: rotate(90deg);
color: var(--text-primary);
}
.axe-accordion__content {
overflow: hidden;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--text-secondary);
}
.axe-accordion__content[data-state="open"] {
animation: axe-accordion-down 200ms var(--ease-out);
}
.axe-accordion__content[data-state="closed"] {
animation: axe-accordion-up 160ms ease-in forwards;
}
.axe-accordion__content-inner {
padding: 0 var(--space-1) var(--space-4);
}
@keyframes axe-accordion-down {
from { height: 0; opacity: 0; }
to { height: var(--radix-accordion-content-height); opacity: 1; }
}
@keyframes axe-accordion-up {
from { height: var(--radix-accordion-content-height); opacity: 1; }
to { height: 0; opacity: 0; }
}
/* ────────────────────────────────────────────────────────────
* Collapsible
* - 단일 disclosure 영역 (Accordion 의 stack 없이 한 영역만 접기/펴기).
* - trigger = 전폭 버튼 (children 직접 전달 시), chevron 우측, hover bg-subtle.
* - content = height transition (closed: 0 → open: var(--radix-collapsible-content-height)).
* ──────────────────────────────────────────────────────────── */
.axe-collapsible__trigger {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
width: 100%;
padding: var(--space-3) var(--space-1);
background: transparent;
border: 0;
cursor: pointer;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: 1.4;
text-align: left;
border-radius: var(--radius-sm);
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.axe-collapsible__trigger:hover {
background: var(--bg-subtle);
}
.axe-collapsible__trigger:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.axe-collapsible__trigger-label {
flex: 1;
min-width: 0;
}
.axe-collapsible__chevron {
flex: 0 0 auto;
color: var(--text-tertiary);
transition: transform 180ms var(--ease-out);
}
.axe-collapsible__trigger[data-state="open"] .axe-collapsible__chevron {
transform: rotate(90deg);
color: var(--text-primary);
}
.axe-collapsible__content {
overflow: hidden;
font-size: var(--text-sm);
line-height: 1.55;
color: var(--text-secondary);
}
.axe-collapsible__content[data-state="open"] {
animation: axe-collapsible-down 200ms var(--ease-out);
}
.axe-collapsible__content[data-state="closed"] {
animation: axe-collapsible-up 160ms ease-in forwards;
}
.axe-collapsible__content-inner {
padding: 0 var(--space-1) var(--space-4);
}
@keyframes axe-collapsible-down {
from { height: 0; opacity: 0; }
to { height: var(--radix-collapsible-content-height); opacity: 1; }
}
@keyframes axe-collapsible-up {
from { height: var(--radix-collapsible-content-height); opacity: 1; }
to { height: 0; opacity: 0; }
}
/* ────────────────────────────────────────────────────────────
* DropdownMenu
* - Popover 와 표면은 비슷 (elevated bg + border + shadow) 이나
* item highlighted 상태 (Radix data-highlighted) 가 메뉴 특유.
* - Item: 좌측 indicator/icon · 가운데 label · 우측 shortcut.
* - danger variant 는 텍스트 + highlighted bg 가 danger 톤.
* - separator: 1px var(--border-subtle).
* - sub-menu: SubContent 도 같은 표면 스타일 + 살짝 더 가벼운 그림자.
* ──────────────────────────────────────────────────────────── */
.axe-dropdown-menu__content {
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
box-shadow: var(--shadow-lg);
padding: var(--space-1);
min-width: 200px;
max-width: min(90vw, 320px);
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: 1.4;
z-index: var(--z-overlay);
outline: none;
transform-origin: var(--radix-dropdown-menu-content-transform-origin);
}
.axe-dropdown-menu__content[data-state="open"] {
animation: axe-dropdown-menu-in 160ms var(--ease-out);
}
.axe-dropdown-menu__content[data-state="closed"] {
animation: axe-dropdown-menu-out 120ms ease-in forwards;
}
.axe-dropdown-menu__sub-content {
box-shadow: var(--shadow-md);
}
.axe-dropdown-menu__label {
padding: var(--space-2) var(--space-3) var(--space-1);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-tertiary);
letter-spacing: 0.04em;
text-transform: uppercase;
}
.axe-dropdown-menu__item {
position: relative;
display: flex;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
padding-left: var(--space-3);
border-radius: var(--radius-sm);
cursor: pointer;
color: var(--text-primary);
user-select: none;
outline: none;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.axe-dropdown-menu__item[data-highlighted] {
background: var(--bg-subtle);
color: var(--text-primary);
}
.axe-dropdown-menu__item[data-disabled] {
color: var(--text-muted);
cursor: not-allowed;
pointer-events: none;
}
/* checkbox/radio item — indicator 좌측 고정 폭 확보 (체크 안 됐을 때도 정렬 유지). */
.axe-dropdown-menu__item--checkbox,
.axe-dropdown-menu__item--radio {
padding-left: var(--space-2);
}
.axe-dropdown-menu__item-indicator {
flex: 0 0 16px;
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--accent);
}
.axe-dropdown-menu__item-icon {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
color: var(--text-tertiary);
}
.axe-dropdown-menu__item-label {
flex: 1;
min-width: 0;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
}
/* danger variant — 글자 색을 danger 로, highlighted 시 danger-soft 배경. */
.axe-dropdown-menu__item--danger {
color: var(--danger);
}
.axe-dropdown-menu__item--danger .axe-dropdown-menu__item-icon {
color: var(--danger);
}
.axe-dropdown-menu__item--danger[data-highlighted] {
background: color-mix(in oklch, var(--danger) 12%, transparent);
color: var(--danger);
}
/* sub-trigger chevron — 우측 ▶. */
.axe-dropdown-menu__sub-chevron {
flex: 0 0 auto;
color: var(--text-tertiary);
margin-left: auto;
}
.axe-dropdown-menu__item--sub-trigger[data-state="open"] {
background: var(--bg-subtle);
}
.axe-dropdown-menu__separator {
/* Radix Separator 는 지만 rail-selectors 계약 픽스처와 CSS-only 소비자
* (layer·gate)는
로 찍는다 — UA 의 hr inset 테두리를 리셋하지 않으면
* 1px 배경선 위에 기본 테두리가 겹쳐 다크에서 밝고 두꺼운 줄이 된다. */
border: 0;
height: 1px;
background: var(--border-subtle);
margin: var(--space-1) calc(-1 * var(--space-1));
}
/* Shortcut — Kbd 슬롯, 우측 정렬 + 작은 폰트. Kbd 자체 스타일은 그대로. */
.axe-dropdown-menu__shortcut {
margin-left: auto;
padding-left: var(--space-3);
font-size: var(--text-xs);
color: var(--text-tertiary);
display: inline-flex;
}
.axe-dropdown-menu__arrow {
fill: var(--bg-elevated);
filter: drop-shadow(0 1px 0 var(--border-subtle));
}
@keyframes axe-dropdown-menu-in {
from { opacity: 0; transform: scale(0.96); }
to { opacity: 1; transform: scale(1); }
}
@keyframes axe-dropdown-menu-out {
from { opacity: 1; transform: scale(1); }
to { opacity: 0; transform: scale(0.96); }
}
/* ────────────────────────────────────────────────────────────
* Reduced motion
* ──────────────────────────────────────────────────────────── */
@media (prefers-reduced-motion: reduce) {
.axe-alert-dialog__overlay,
.axe-alert-dialog__overlay[data-state="closed"],
.axe-alert-dialog__content,
.axe-alert-dialog__content[data-state="closed"],
.axe-accordion__content,
.axe-accordion__content[data-state="open"],
.axe-accordion__content[data-state="closed"],
.axe-accordion__chevron,
.axe-collapsible__content,
.axe-collapsible__content[data-state="open"],
.axe-collapsible__content[data-state="closed"],
.axe-collapsible__chevron,
.axe-dropdown-menu__content,
.axe-dropdown-menu__content[data-state="closed"] {
animation: none !important;
transition: none !important;
}
}
/* source: styles/feedback.css */
/* ============================================================
* Phase 14 Wave 5 — Feedback group (EmptyState · ErrorBoundary · StatusBanner)
*
* 본 파일은 core-data Consumer Kit 프로파일에 포함된다 (export-axe-ui.mjs 의
* CORE_DATA_SOURCES). 상태 피드백 프리미티브는 여기에 둔다 — core-data 로
* 소비하는 서비스(cortex 등)가 쓰는 표면이 프로파일 밖으로 새지 않게 한다.
*
* - 본 파일은 components.css 가 import 하지 않음 (owner 가 통합).
* showcase 와 통합 전 까지는 page 가 직접 side-effect import.
* - 표면은 transparent 또는 elevated. semantic 색은 icon/border 만.
* - reduced-motion 존중, dark/light CSS var 자동.
* ============================================================ */
/* ────────────────────────────────────────────────────────────
* EmptyState
* - center-aligned column. background: transparent → Card 안/밖 모두 자연.
* - icon → title → description → actions 순서.
* - size 가 padding + icon box + 폰트 크기 비례.
* - tone 이 icon 색 + (subtle) border accent 결정.
* ──────────────────────────────────────────────────────────── */
.axe-empty-state {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
text-align: center;
gap: var(--space-3);
padding: var(--space-7) var(--space-5);
background: transparent;
border: 1px dashed var(--border-subtle);
border-radius: var(--radius-lg);
color: var(--text-primary);
}
.axe-empty-state__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 48px;
height: 48px;
border-radius: var(--radius-full);
background: var(--bg-subtle);
color: var(--text-tertiary);
font-size: 24px;
line-height: 1;
}
.axe-empty-state__title {
font-family: var(--font-display, var(--font-sans));
font-size: var(--text-lg);
font-weight: 600;
color: var(--text-primary);
line-height: 1.3;
}
.axe-empty-state__description {
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
max-width: 48ch;
}
.axe-empty-state__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-2);
}
/* ── size variants ── */
.axe-empty-state--size-sm {
padding: var(--space-5) var(--space-4);
gap: var(--space-2);
}
.axe-empty-state--size-sm .axe-empty-state__icon {
width: 36px;
height: 36px;
font-size: 18px;
}
.axe-empty-state--size-sm .axe-empty-state__title {
font-size: var(--text-base);
}
.axe-empty-state--size-sm .axe-empty-state__description {
font-size: var(--text-xs);
}
.axe-empty-state--size-lg {
padding: var(--space-8) var(--space-6);
gap: var(--space-4);
}
.axe-empty-state--size-lg .axe-empty-state__icon {
width: 64px;
height: 64px;
font-size: 32px;
}
.axe-empty-state--size-lg .axe-empty-state__title {
font-size: var(--text-xl);
}
/* ── tone variants — icon tint + border accent (subtle) ── */
.axe-empty-state--tone-success {
border-color: color-mix(in srgb, var(--success) 35%, var(--border-subtle));
}
.axe-empty-state--tone-success .axe-empty-state__icon {
background: var(--success-soft);
color: var(--success);
}
.axe-empty-state--tone-warning {
border-color: color-mix(in srgb, var(--warning) 35%, var(--border-subtle));
}
.axe-empty-state--tone-warning .axe-empty-state__icon {
background: var(--warning-soft);
color: var(--warning);
}
.axe-empty-state--tone-danger {
border-color: color-mix(in srgb, var(--danger) 35%, var(--border-subtle));
}
.axe-empty-state--tone-danger .axe-empty-state__icon {
background: var(--danger-soft);
color: var(--danger);
}
/* ────────────────────────────────────────────────────────────
* ErrorBoundary — default fallback 의 wrapper.
* - Callout(variant="danger") 가 본체. 여기서는 spacing + 액션 row 만.
* - custom fallback 을 쓰면 caller 책임.
* ──────────────────────────────────────────────────────────── */
.axe-error-boundary {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.axe-error-boundary__detail {
margin: 0;
font-size: var(--text-sm);
color: var(--text-secondary);
line-height: 1.5;
}
.axe-error-boundary__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
margin-top: var(--space-2);
}
/* ============================================================
* StatusBanner — inline dynamic state announcement
* ============================================================ */
.axe-status-banner {
display: flex;
align-items: flex-start;
gap: var(--space-3);
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-left-width: 4px;
font-size: var(--text-sm);
color: var(--text-primary);
/* output 기본 inline 을 block 으로. */
width: 100%;
box-sizing: border-box;
animation: axe-status-banner-in var(--duration-base) var(--ease-out);
}
@keyframes axe-status-banner-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.axe-status-banner { animation: none; }
}
.axe-status-banner__icon {
flex-shrink: 0;
width: 20px;
height: 20px;
display: inline-flex;
align-items: center;
justify-content: center;
font-size: var(--text-sm);
line-height: 1;
}
.axe-status-banner__body {
flex: 1;
min-width: 0;
display: flex;
flex-direction: column;
gap: 2px;
}
.axe-status-banner__title {
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.axe-status-banner__description {
color: var(--text-secondary);
font-size: var(--text-sm);
}
.axe-status-banner__dismiss {
appearance: none;
background: transparent;
border: 0;
color: var(--text-tertiary);
cursor: pointer;
font-size: var(--text-sm);
padding: 2px 6px;
border-radius: var(--radius-sm);
align-self: flex-start;
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.axe-status-banner__dismiss:hover {
color: var(--text-primary);
background: var(--bg-base);
}
.axe-status-banner__dismiss:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* variants — left accent + soft bg */
.axe-status-banner--saved,
.axe-status-banner--success {
border-left-color: var(--success);
background: var(--success-soft);
}
.axe-status-banner--saved .axe-status-banner__icon,
.axe-status-banner--success .axe-status-banner__icon { color: var(--success); }
.axe-status-banner--splitting,
.axe-status-banner--warning {
border-left-color: var(--warning);
background: var(--warning-soft);
}
.axe-status-banner--splitting .axe-status-banner__icon,
.axe-status-banner--warning .axe-status-banner__icon { color: var(--warning); }
.axe-status-banner--splitting .axe-status-banner__icon {
animation: axe-status-spin 1.2s linear infinite;
}
@media (prefers-reduced-motion: reduce) {
.axe-status-banner--splitting .axe-status-banner__icon { animation: none; }
}
.axe-status-banner--blocked,
.axe-status-banner--error {
border-left-color: var(--danger);
background: var(--danger-soft);
}
.axe-status-banner--blocked .axe-status-banner__icon,
.axe-status-banner--error .axe-status-banner__icon { color: var(--danger); }
.axe-status-banner--info {
border-left-color: var(--accent);
background: var(--accent-soft);
}
.axe-status-banner--info .axe-status-banner__icon { color: var(--accent); }
@keyframes axe-status-spin {
to { transform: rotate(360deg); }
}
/* source: styles/data-views.css */
/* ============================================================
* @axe/ui — Data Views (Phase 14 Wave 6 — Cortex 흡수)
*
* Owns: .axe-tree__*, .axe-timeline__*, .axe-master-detail__*
* 토큰: --bg-*, --text-*, --border-*, --accent*, --space-*, --radius-*,
* --shadow-*, --duration-*, --ease-*, --font-* (모두 src/lib/tokens).
* 다크/라이트 자동 — CSS var 만 참조.
*
* 본 파일은 격리 — components.css 에 통합 전 단계. 소비자는 globals 또는
* showcase page 에서 직접 import.
* ============================================================ */
/* ============================================================
* Tree — 재귀 트리. 자체 구현 (Radix 비의존).
* role="tree" + role="treeitem" + aria-expanded/level/selected 직접 그림.
* ============================================================ */
.axe-tree {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
font-size: var(--text-sm);
color: var(--text-primary);
outline: none;
}
.axe-tree__item {
list-style: none;
position: relative;
/* item 자체가 focus 받음 (tabIndex roving). */
outline: none;
}
.axe-tree__item:focus-visible > .axe-tree__row {
outline: 2px solid var(--accent);
outline-offset: -2px;
border-radius: var(--radius-sm);
}
.axe-tree__row {
display: flex;
align-items: center;
gap: var(--space-1);
width: 100%;
padding: var(--space-1) var(--space-2);
border-radius: var(--radius-sm);
color: var(--text-secondary);
cursor: pointer;
user-select: none;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out);
}
.axe-tree__row:hover {
background: var(--bg-subtle);
color: var(--text-primary);
}
.axe-tree__item--selected > .axe-tree__row {
background: var(--accent-soft);
color: var(--text-primary);
font-weight: var(--weight-semibold, 600);
}
.axe-tree__item--disabled > .axe-tree__row {
opacity: 0.5;
cursor: not-allowed;
}
.axe-tree__chevron {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1.1rem;
height: 1.1rem;
flex: 0 0 auto;
appearance: none;
background: transparent;
border: 0;
padding: 0;
color: var(--text-muted);
cursor: pointer;
border-radius: var(--radius-sm);
}
.axe-tree__chevron:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
.axe-tree__chevron--leaf {
cursor: default;
/* leaf 도 1.1rem 자리 확보 → 정렬 일관성 */
}
.axe-tree__icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 1rem;
height: 1rem;
flex: 0 0 auto;
color: var(--text-tertiary);
}
.axe-tree__item--selected > .axe-tree__row .axe-tree__icon {
color: var(--accent);
}
.axe-tree__label {
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-family: inherit;
line-height: 1.4;
}
.axe-tree__group {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
}
/* ============================================================
* Timeline — date-grouped activity feed.
* 좌측 dot (12px) + 수직 line (rail) CSS only.
* sticky date header (overflow container 안에서 작동).
* ============================================================ */
.axe-timeline {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-5);
color: var(--text-primary);
font-size: var(--text-sm);
}
.axe-timeline__group {
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.axe-timeline__date-header {
display: block;
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: var(--weight-semibold, 600);
text-transform: uppercase;
letter-spacing: 0.05em;
color: var(--text-muted);
padding: var(--space-2) 0;
margin: 0;
background: color-mix(in oklch, var(--bg-base) 90%, transparent);
backdrop-filter: saturate(140%) blur(8px);
-webkit-backdrop-filter: saturate(140%) blur(8px);
border-bottom: 1px solid var(--border-subtle);
}
.axe-timeline--sticky .axe-timeline__date-header {
position: sticky;
top: 0;
z-index: 1;
}
.axe-timeline__items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: 0;
}
.axe-timeline__item {
list-style: none;
display: flex;
align-items: stretch;
gap: var(--space-3);
padding: var(--space-2) 0;
position: relative;
}
.axe-timeline__rail {
position: relative;
display: flex;
flex-direction: column;
align-items: center;
width: 12px;
flex: 0 0 12px;
}
/* 수직 line — rail 가운데를 위→아래로 관통. 마지막 item 은 line 짧게. */
.axe-timeline__rail::before {
content: "";
position: absolute;
top: 0;
bottom: 0;
left: 50%;
width: 1px;
background: var(--border-subtle);
transform: translateX(-50%);
}
.axe-timeline__item:first-child .axe-timeline__rail::before {
top: 8px;
}
.axe-timeline__item:last-child .axe-timeline__rail::before {
bottom: calc(100% - 14px);
}
.axe-timeline__dot {
position: relative;
z-index: 1;
margin-top: 6px;
width: 10px;
height: 10px;
border-radius: 9999px;
background: var(--bg-base);
border: 2px solid var(--text-muted);
display: inline-flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
flex: 0 0 10px;
}
/* variant dots — 토큰 only (Tailwind hex fallback 제거; SSOT 원칙) */
.axe-timeline__item--success .axe-timeline__dot { border-color: var(--success); color: var(--success); }
.axe-timeline__item--warning .axe-timeline__dot { border-color: var(--warning); color: var(--warning); }
.axe-timeline__item--danger .axe-timeline__dot { border-color: var(--danger); color: var(--danger); }
.axe-timeline__item--info .axe-timeline__dot { border-color: var(--info); color: var(--info); }
.axe-timeline__body {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
padding-bottom: var(--space-2);
}
.axe-timeline__title-row {
display: flex;
align-items: baseline;
gap: var(--space-2);
flex-wrap: wrap;
}
.axe-timeline__title {
font-weight: var(--weight-medium, 500);
color: var(--text-primary);
font-size: var(--text-sm);
line-height: 1.4;
}
.axe-timeline__time {
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-muted);
font-variant-numeric: tabular-nums;
}
.axe-timeline__time--solo {
display: block;
margin-bottom: var(--space-1);
}
.axe-timeline__content {
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.5;
}
/* compact — icon 없는 dense variant. */
.axe-timeline--compact { gap: var(--space-3); }
.axe-timeline--compact .axe-timeline__item { padding: var(--space-1) 0; }
.axe-timeline--compact .axe-timeline__body { padding-bottom: var(--space-1); }
.axe-timeline--compact .axe-timeline__dot {
width: 6px;
height: 6px;
border-width: 1.5px;
margin-top: 8px;
}
/* load more / empty / loading */
.axe-timeline__loadmore { list-style: none; display: flex; justify-content: center; padding: var(--space-3) 0; }
.axe-timeline__loadmore-btn {
appearance: none;
background: transparent;
border: 1px solid var(--border-subtle);
color: var(--text-secondary);
font: inherit;
font-size: var(--text-xs);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out), color var(--duration-fast) var(--ease-out);
}
.axe-timeline__loadmore-btn:hover { background: var(--bg-subtle); color: var(--text-primary); }
.axe-timeline__loadmore-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 1px; }
.axe-timeline__loading { color: var(--text-muted); font-size: var(--text-xs); }
.axe-timeline__empty {
list-style: none;
text-align: center;
color: var(--text-muted);
font-size: var(--text-sm);
padding: var(--space-8) 0;
}
/* ============================================================
* MasterDetailLayout — responsive 2-column.
* desktop: flex row. mobile (matchMedia 결과): 한 컬럼만.
* isMobile 은 컴포넌트가 JS 로 측정 → .axe-master-detail--mobile class 부여.
* ============================================================ */
.axe-master-detail {
display: flex;
flex-direction: row;
align-items: stretch;
gap: var(--space-4);
width: 100%;
min-height: 0;
}
.axe-master-detail__master {
width: var(--axe-md-master-width, 320px);
flex: 0 0 var(--axe-md-master-width, 320px);
min-width: 0;
display: flex;
flex-direction: column;
overflow: auto;
}
.axe-master-detail__detail {
flex: 1 1 auto;
min-width: 0;
display: flex;
flex-direction: column;
overflow: auto;
}
/* mobile = JS 측정 후 부여되는 modifier */
.axe-master-detail--mobile {
flex-direction: column;
gap: 0;
}
.axe-master-detail--mobile .axe-master-detail__master,
.axe-master-detail--mobile .axe-master-detail__detail {
width: 100%;
flex: 1 1 auto;
}
.axe-master-detail__master--hidden,
.axe-master-detail__detail--hidden {
display: none;
}
.axe-master-detail__back {
display: inline-flex;
align-items: center;
gap: var(--space-2);
appearance: none;
background: transparent;
border: 0;
font: inherit;
font-size: var(--text-sm);
color: var(--text-secondary);
padding: var(--space-2) var(--space-2);
margin-bottom: var(--space-2);
cursor: pointer;
border-radius: var(--radius-sm);
align-self: flex-start;
transition: color var(--duration-fast) var(--ease-out), background var(--duration-fast) var(--ease-out);
}
.axe-master-detail__back:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
.axe-master-detail__back:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.axe-master-detail__back-arrow {
font-size: var(--text-base);
line-height: 1;
}
.axe-master-detail__empty {
display: flex;
align-items: center;
justify-content: center;
color: var(--text-muted);
font-size: var(--text-sm);
padding: var(--space-8);
flex: 1 1 auto;
}
/* ============================================================
* prefers-reduced-motion — 모든 transition/animation 비활성화
* ============================================================ */
@media (prefers-reduced-motion: reduce) {
.axe-tree__row,
.axe-tree__chevron,
.axe-timeline__loadmore-btn,
.axe-master-detail__back {
transition: none !important;
animation: none !important;
}
}
/* source: styles/chat-ext.css */
/* ============================================================
* @axe/ui — Phase 14 Wave 6 — Chat extensions + Cortex 흡수
*
* Owns:
* .axe-message-with-sources__* (MessageWithSources)
* .axe-typing-indicator__* (TypingIndicator)
* .axe-responsive-tabs__* (ResponsiveTabs)
*
* 토큰: --bg-*, --text-*, --border-*, --accent*, --space-*, --radius-*,
* --duration-*, --ease-*, --success/--warning/--danger (-soft).
* 다크/라이트 자동 — CSS var 만 참조.
*
* 페이지 격리: showcase 페이지 (app/ui/v2/chat-ext) 에서 직접 import.
* components.css 통합은 Wave 안정화 후.
* ============================================================ */
/* ============================================================
* MessageWithSources — MessageBubble 확장
* ============================================================ */
.axe-message-with-sources .axe-message__content {
display: flex;
flex-direction: column;
gap: var(--space-3);
}
.axe-message-with-sources__head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-3);
}
.axe-message-with-sources__body-text {
flex: 1;
min-width: 0;
white-space: pre-wrap;
word-break: break-word;
}
.axe-message-with-sources__head-actions {
display: flex;
align-items: center;
gap: var(--space-2);
flex-shrink: 0;
}
.axe-message-with-sources__confidence {
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
padding: 2px 6px;
border-radius: var(--radius-sm);
letter-spacing: var(--tracking-wide);
}
.axe-message-with-sources__confidence--low {
background: var(--danger-soft);
color: var(--danger);
}
.axe-message-with-sources__confidence--med {
background: var(--warning-soft);
color: var(--warning);
}
.axe-message-with-sources__confidence--high {
background: var(--success-soft);
color: var(--success);
}
.axe-message-with-sources__copy {
appearance: none;
background: transparent;
border: 0;
color: var(--text-tertiary);
font-family: inherit;
font-size: var(--text-xs);
cursor: pointer;
padding: 2px 6px;
border-radius: var(--radius-sm);
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.axe-message-with-sources__copy:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
.axe-message-with-sources__copy:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* sources
*/
.axe-message-with-sources__sources {
border-top: 1px solid var(--border-subtle);
padding-top: var(--space-3);
}
.axe-message-with-sources__sources-summary {
font-size: var(--text-xs);
color: var(--text-tertiary);
cursor: pointer;
user-select: none;
list-style: none;
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px 0;
}
.axe-message-with-sources__sources-summary::-webkit-details-marker {
display: none;
}
.axe-message-with-sources__sources-summary::before {
content: "▸";
color: var(--text-muted);
font-size: 0.7em;
transition: transform var(--duration-fast) var(--ease-out);
display: inline-block;
}
.axe-message-with-sources__sources[open] .axe-message-with-sources__sources-summary::before {
transform: rotate(90deg);
}
.axe-message-with-sources__sources-summary:hover {
color: var(--text-secondary);
}
.axe-message-with-sources__sources-list {
margin: var(--space-2) 0 0 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.axe-message-with-sources__source {
display: grid;
grid-template-columns: auto 1fr auto;
gap: var(--space-2);
align-items: baseline;
font-size: var(--text-xs);
padding: var(--space-2);
background: var(--bg-subtle);
border-radius: var(--radius-sm);
border: 1px solid var(--border-subtle);
}
.axe-message-with-sources__source-type {
grid-column: 1;
font-family: var(--font-mono);
font-size: 0.7rem;
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
color: var(--text-muted);
background: var(--bg-base);
padding: 1px 5px;
border-radius: var(--radius-xs);
}
.axe-message-with-sources__source-title {
grid-column: 2;
color: var(--text-primary);
font-weight: var(--weight-medium);
text-decoration: none;
}
a.axe-message-with-sources__source-title:hover {
color: var(--accent);
text-decoration: underline;
}
.axe-message-with-sources__source-snippet {
grid-column: 1 / -1;
color: var(--text-tertiary);
font-style: italic;
white-space: pre-wrap;
}
.axe-message-with-sources__source-conf {
grid-column: 3;
font-family: var(--font-mono);
font-size: 0.7rem;
padding: 1px 5px;
border-radius: var(--radius-xs);
}
.axe-message-with-sources__source-conf--low { background: var(--danger-soft); color: var(--danger); }
.axe-message-with-sources__source-conf--med { background: var(--warning-soft); color: var(--warning); }
.axe-message-with-sources__source-conf--high { background: var(--success-soft); color: var(--success); }
/* footer / tokens metabar */
.axe-message-with-sources__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-top: var(--space-2);
border-top: 1px dashed var(--border-subtle);
flex-wrap: wrap;
}
.axe-message-with-sources__tokens {
display: flex;
gap: var(--space-3);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.axe-message-with-sources__token {
display: inline-flex;
align-items: baseline;
gap: 4px;
}
.axe-message-with-sources__token-label {
color: var(--text-muted);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
font-size: 0.7rem;
}
.axe-message-with-sources__token-val {
color: var(--text-secondary);
font-weight: var(--weight-medium);
}
/* ============================================================
* TypingIndicator — 3-dot wave
* ============================================================ */
.axe-typing-indicator {
display: inline-flex;
align-items: center;
gap: 4px;
padding: var(--space-2) var(--space-3);
}
.axe-typing-indicator--sm { --axe-typing-dot: 5px; gap: 3px; padding: var(--space-1) var(--space-2); }
.axe-typing-indicator--md { --axe-typing-dot: 7px; gap: 4px; }
.axe-typing-indicator--lg { --axe-typing-dot: 10px; gap: 5px; padding: var(--space-3) var(--space-4); }
.axe-typing-indicator__dot {
display: inline-block;
width: var(--axe-typing-dot, 7px);
height: var(--axe-typing-dot, 7px);
border-radius: var(--radius-full);
background: var(--text-tertiary);
opacity: 0.4;
animation: axe-typing-wave 1.2s ease-in-out infinite;
}
@keyframes axe-typing-wave {
0%, 60%, 100% {
opacity: 0.3;
transform: translateY(0);
}
30% {
opacity: 1;
transform: translateY(-3px);
}
}
@media (prefers-reduced-motion: reduce) {
.axe-typing-indicator__dot {
animation: none;
opacity: 0.5;
}
}
/* ============================================================
* ResponsiveTabs — desktop pills + mobile bottom-nav
* ============================================================ */
.axe-responsive-tabs {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* ---------- Desktop pills ---------- */
.axe-responsive-tabs__pills {
display: flex;
flex-wrap: wrap;
gap: var(--space-1);
padding: 4px;
background: var(--bg-subtle);
border-radius: var(--radius-lg);
border: 1px solid var(--border-subtle);
width: fit-content;
max-width: 100%;
}
.axe-responsive-tabs__pill {
appearance: none;
background: transparent;
border: 0;
color: var(--text-secondary);
font-family: inherit;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
padding: 6px 14px;
border-radius: var(--radius-md);
cursor: pointer;
display: inline-flex;
align-items: center;
gap: var(--space-2);
white-space: nowrap;
transition: color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.axe-responsive-tabs__pill:hover {
color: var(--text-primary);
}
.axe-responsive-tabs__pill:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 1px;
}
.axe-responsive-tabs__pill[data-state="active"] {
background: var(--bg-base);
color: var(--text-primary);
box-shadow: 0 1px 2px rgb(0 0 0 / 0.06), 0 0 0 1px var(--border-default);
}
.axe-responsive-tabs__pill[data-disabled] {
opacity: 0.4;
cursor: not-allowed;
}
.axe-responsive-tabs__pill-icon {
display: inline-flex;
align-items: center;
font-size: 1.1em;
}
.axe-responsive-tabs__badge {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 18px;
height: 18px;
padding: 0 5px;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--accent-fg);
font-family: var(--font-mono);
font-size: 0.7rem;
font-weight: var(--weight-semibold);
line-height: 1;
}
.axe-responsive-tabs__content {
flex: 1;
min-height: 0;
}
/* ---------- Mobile bottom-nav ---------- */
.axe-responsive-tabs--mobile {
position: relative;
/* 컨텐츠가 bottom-nav 뒤로 숨지 않게. */
}
.axe-responsive-tabs--mobile .axe-responsive-tabs__content {
/* 56px nav + safe-area. */
padding-bottom: calc(56px + var(--axe-safe-bottom, 0px) + var(--space-3));
}
.axe-responsive-tabs__bottom-nav {
display: flex;
align-items: stretch;
justify-content: space-around;
background: var(--bg-base);
border-top: 1px solid var(--border-subtle);
z-index: 50;
}
.axe-responsive-tabs__bottom-nav--fixed {
position: fixed;
bottom: 0;
left: 0;
right: 0;
}
.axe-responsive-tabs__bottom-btn {
flex: 1;
appearance: none;
background: transparent;
border: 0;
color: var(--text-tertiary);
font-family: inherit;
font-size: 0.7rem;
cursor: pointer;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 2px;
padding: var(--space-2) var(--space-1);
min-height: 56px;
position: relative;
transition: color var(--duration-fast) var(--ease-out);
}
.axe-responsive-tabs__bottom-btn:hover {
color: var(--text-secondary);
}
.axe-responsive-tabs__bottom-btn:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
.axe-responsive-tabs__bottom-btn--active {
color: var(--accent);
}
.axe-responsive-tabs__bottom-btn:disabled {
opacity: 0.4;
cursor: not-allowed;
}
.axe-responsive-tabs__bottom-icon {
display: inline-flex;
align-items: center;
justify-content: center;
font-size: 1.25rem;
line-height: 1;
}
.axe-responsive-tabs__bottom-label {
font-size: 0.7rem;
line-height: 1.1;
text-align: center;
}
.axe-responsive-tabs__bottom-btn .axe-responsive-tabs__badge {
position: absolute;
top: 6px;
right: calc(50% - 18px);
transform: translateX(50%);
}
/* source: styles/composites.css */
/* ============================================================
* AXE Labs — composites (Phase 14 Wave 6)
*
* inline 반복 패턴 + Blueprint splitter 흡수:
* - Code (inline 토큰)
* - Section (anchor + scroll-margin)
* - Hero
* - Footer
* - Splitter (2-pane resizable + a11y)
* - Callout accent modifiers (left-bar / both / none / icon)
*
* 본 파일은 별도 — 메인 components.css 는 통합자가 직접 @import 추가.
* ============================================================ */
/* ------- Code (inline) -------
* Kbd 와 자매. 의 블록 + copy 버튼과 의미 분리.
* 기존 .axe-code-inline 정의가 components.css 에 있으면 거기가 우선 —
* 본 파일은 variant/size modifier 만 추가.
*/
.axe-code-inline {
/* 기존 정의가 components.css 에 없을 때를 위한 baseline */
font-family: var(--font-mono);
font-size: 0.9em;
padding: 0.1em 0.35em;
border-radius: var(--radius-sm);
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
color: var(--text-primary);
white-space: nowrap;
}
.axe-code-inline--muted {
color: var(--text-secondary);
background: var(--bg-base);
border-color: var(--border-subtle);
}
.axe-code-inline--accent {
color: var(--accent);
background: color-mix(in oklch, var(--accent) 10%, transparent);
border-color: color-mix(in oklch, var(--accent) 30%, transparent);
}
.axe-code-inline--size-sm {
font-size: 0.8em;
padding: 0.05em 0.3em;
}
/* ------- Section ------- */
.axe-section {
scroll-margin-top: 5rem;
display: flex;
flex-direction: column;
gap: var(--space-5);
min-width: 0;
max-width: 100%;
}
.axe-section--center {
text-align: center;
align-items: center;
}
.axe-section__header {
display: flex;
flex-direction: column;
gap: var(--space-2);
min-width: 0;
max-width: 100%;
}
.axe-section--center .axe-section__header {
align-items: center;
}
.axe-section__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest); /* 12px uppercase 는 0.08em 이 표준대 */
text-transform: uppercase;
font-weight: var(--weight-medium);
color: var(--text-tertiary);
}
/* eyebrow 앞 브랜드 점 — AXE wine을 작은 identity signal로만 사용. */
.axe-section__eyebrow::before,
.axe-hero__eyebrow::before {
content: "";
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: var(--border-strong);
flex-shrink: 0;
}
.axe-hero__eyebrow::before {
background: var(--brand-claret);
}
.axe-section__title {
font-family: var(--font-display);
font-size: var(--text-2xl);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-heading);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin: 0;
}
.axe-section__subtitle {
font-size: var(--text-sm);
line-height: var(--leading-body);
color: var(--text-secondary); /* tertiary → secondary: 다크 모드 AA 확보 */
margin: 0;
max-width: 56ch;
}
.axe-section--center .axe-section__subtitle {
margin-inline: auto;
}
/* 캔버스 보조 고지 한 줄 — 목록/본문 **아래**에 붙는 사실 고지("최근 50건만
* 표시" 류). `__subtitle` 과 자매이되 자리가 반대다: 부제는 헤더 안에서 섹션을
* 예고하고, 이것은 본문 뒤에서 방금 보여준 것의 범위를 밝힌다. 그래서 서체 축
* (text-sm · leading-body · 56ch 측정)은 부제와 같고 색만 한 단 낮춘다
* (secondary → muted) — 예고는 읽히라고 있지만 고지는 본문을 다 읽은 뒤 눈에
* 들어오면 된다.
*
* 세로 리듬은 `__header` 의 내부 gap 과 같은 축(`--space-2`)이다 — 고지는 자기
* 위 블록에 붙어 있어야 그 블록에 대한 말로 읽힌다. `.axe-section` 의 직계 자식으로
* 서면 그 자리를 flex `gap: var(--space-5)` 가 이미 소유하므로 **gap 을 상쇄해**
* 같은 8px 로 붙인다(`--space-2` − `--space-5` = −16px, flex 는 음수 margin 을
* 존중한다). margin 을 0 으로 눕히면 gap 만 남아 24px 이 되어, 고지가 본문에서
* 떨어져 나와 다음 섹션 것처럼 읽힌다 — 두 갈래(래퍼 안 · 직계 자식)가 같은
* 부착 간격을 내야 자리가 하나다. */
.axe-section__note {
font-size: var(--text-sm);
line-height: var(--leading-body);
color: var(--text-muted);
margin: var(--space-2) 0 0;
max-width: 56ch;
}
.axe-section > .axe-section__note:not(:first-child) {
margin-block-start: calc(var(--space-2) - var(--space-5));
}
.axe-section--center .axe-section__note {
margin-inline: auto;
}
.axe-section__body {
display: block;
min-width: 0;
max-width: 100%;
}
/* ------- Hero ------- */
.axe-hero {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-7);
padding: var(--space-7) 0;
align-items: center;
}
.axe-hero--with-image {
grid-template-columns: 1fr;
}
@media (min-width: 768px) {
.axe-hero--with-image {
grid-template-columns: 1.1fr 1fr;
}
}
.axe-hero--center {
text-align: center;
}
.axe-hero--center .axe-hero__content {
align-items: center;
margin-inline: auto;
}
.axe-hero__content {
display: flex;
flex-direction: column;
gap: var(--space-4);
max-width: 42rem;
}
.axe-hero__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-size: var(--text-xs);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
font-weight: var(--weight-medium);
color: var(--text-tertiary);
}
.axe-hero__title {
font-family: var(--font-display);
line-height: var(--leading-tight);
letter-spacing: var(--tracking-heading);
font-weight: var(--weight-semibold);
color: var(--text-primary);
margin: 0;
}
.axe-hero--size-md .axe-hero__title { font-size: var(--text-3xl); }
.axe-hero--size-lg .axe-hero__title { font-size: var(--text-4xl); }
.axe-hero--size-xl .axe-hero__title { font-size: var(--text-5xl); }
/* display 티어 — 랜딩/마케팅 hero 전용 (32~80px fluid). 기존 md/lg/xl 불변. */
.axe-hero--size-display .axe-hero__title {
font-size: var(--text-display-md);
line-height: var(--leading-display);
letter-spacing: var(--tracking-display);
}
.axe-hero--size-display .axe-hero__content {
max-width: 52rem;
}
.axe-hero--size-display .axe-hero__subtitle {
font-size: var(--text-xl);
max-width: 40rem;
}
/* 브랜드 hero — 라이트/다크 공통 wine 워시 + display 페이스(Clash).
* 배경은 radial wash 1장 (paint 1회, 스크롤 비용 0). */
.axe-hero--brand {
position: relative;
}
.axe-hero--brand::before {
content: "";
position: absolute;
inset: calc(-1 * var(--space-7)) calc(-1 * var(--space-6));
background:
radial-gradient(
90% 65% at 50% -10%,
color-mix(in srgb, var(--brand-claret) 10%, transparent),
transparent 70%
);
pointer-events: none;
}
/* 좁은 폭 — 우측 -32px bleed 가 body 가로 스크롤 +16px 을 만들던 원인
* (2026-06-10 모바일 감사). 글로우는 좌우 bleed 없이 충분. */
@media (max-width: 767px) {
.axe-hero--brand::before {
inset: calc(-1 * var(--space-7)) 0;
}
}
.axe-hero--brand .axe-hero__content {
position: relative;
}
.axe-hero--brand .axe-hero__title {
font-family: var(--font-clash); /* Latin=Clash, 한글=Pretendard 폴백 (의도) */
}
/* hero 타이틀 안 키워드 강조 — 1개 규칙 (이탤릭 아님, 브랜드 색) */
.axe-hero--brand .axe-hero__title em {
font-style: normal;
color: var(--brand-claret);
}
.axe-hero__subtitle {
font-size: var(--text-lg);
line-height: var(--leading-body);
color: var(--text-secondary);
margin: 0;
max-width: 36rem;
}
.axe-hero--center .axe-hero__subtitle {
margin-inline: auto;
}
.axe-hero__badges {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.axe-hero--center .axe-hero__badges {
justify-content: center;
}
.axe-hero__actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-3);
margin-top: var(--space-2);
}
.axe-hero--center .axe-hero__actions {
justify-content: center;
}
.axe-hero__image {
display: flex;
align-items: center;
justify-content: center;
min-width: 0;
}
/* ------- Footer ------- */
.axe-footer {
display: flex;
flex-direction: column;
gap: var(--space-5);
padding: var(--space-7) 0 var(--space-5);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-size: var(--text-sm);
}
.axe-footer__top {
display: grid;
grid-template-columns: 1fr;
gap: var(--space-5);
}
@media (min-width: 768px) {
.axe-footer__top {
grid-template-columns: minmax(160px, 1fr) 3fr;
}
}
.axe-footer__logo {
display: flex;
align-items: flex-start;
}
.axe-footer__columns {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
gap: var(--space-5);
}
.axe-footer__column {
display: flex;
flex-direction: column;
gap: var(--space-2);
}
.axe-footer__column-title {
font-size: var(--text-xs);
letter-spacing: 0.05em;
text-transform: uppercase;
color: var(--text-secondary);
font-weight: var(--weight-medium);
}
.axe-footer__column-items {
list-style: none;
margin: 0;
padding: 0;
display: flex;
flex-direction: column;
gap: var(--space-1);
}
.axe-footer__link {
color: var(--text-tertiary);
text-decoration: none;
transition: color var(--duration-fast) var(--ease-out);
}
.axe-footer__link:hover {
color: var(--text-primary);
}
.axe-footer__bottom {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: var(--space-3);
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
.axe-footer__bottom-left {
flex: 1;
min-width: 0;
}
.axe-footer__social {
display: flex;
align-items: center;
gap: var(--space-3);
}
.axe-footer__social-link {
color: var(--text-tertiary);
text-decoration: none;
display: inline-flex;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
border-radius: var(--radius-md);
transition:
color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.axe-footer__social-link:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
/* ------- Splitter ------- */
.axe-splitter {
display: flex;
width: 100%;
height: 100%;
min-height: 0;
min-width: 0;
}
.axe-splitter--horizontal {
flex-direction: row;
}
.axe-splitter--vertical {
flex-direction: column;
}
.axe-splitter__pane {
min-width: 0;
min-height: 0;
overflow: auto;
}
.axe-splitter__pane--second {
flex: 1 1 auto;
}
.axe-splitter__handle {
flex-shrink: 0;
background: transparent;
position: relative;
display: flex;
align-items: center;
justify-content: center;
transition: background var(--duration-fast) var(--ease-out);
touch-action: none;
}
/* visual 은 6px 유지, hit-area 는 ::before 로 24px 확장 (WCAG 2.5.5 target size).
* 결과적으로 마우스/터치 클릭 영역이 늘어나 모바일 사용성 보장. */
.axe-splitter--horizontal > .axe-splitter__handle {
width: 6px;
cursor: col-resize;
}
.axe-splitter--vertical > .axe-splitter__handle {
height: 6px;
cursor: row-resize;
}
.axe-splitter__handle::before {
content: "";
position: absolute;
inset: -10px; /* 6 + 2*10 = 26px hit-area */
}
.axe-splitter__handle:hover,
.axe-splitter__handle:focus-visible {
background: color-mix(in oklch, var(--accent) 25%, transparent);
outline: none;
}
.axe-splitter__handle:focus-visible {
background: color-mix(in oklch, var(--accent) 40%, transparent);
}
.axe-splitter__handle-bar {
background: var(--border-subtle);
border-radius: 2px;
transition: background var(--duration-fast) var(--ease-out);
}
.axe-splitter--horizontal .axe-splitter__handle-bar {
width: 2px;
height: 36px;
}
.axe-splitter--vertical .axe-splitter__handle-bar {
height: 2px;
width: 36px;
}
.axe-splitter__handle:hover .axe-splitter__handle-bar,
.axe-splitter__handle:focus-visible .axe-splitter__handle-bar {
background: var(--accent);
}
@media (prefers-reduced-motion: reduce) {
.axe-splitter__handle,
.axe-splitter__handle-bar {
transition: none;
}
}
/* ------- Callout accent modifiers (확장) -------
* 기본 .axe-callout-- 의 컬러 트림은 components.css 에서 정의됨.
* 본 파일은 그 위에 얹는 "accent 방식" 만 추가.
*/
.axe-callout--accent-icon {
/* default — 기존 동작. 추가 스타일 없음. */
}
.axe-callout--accent-left-bar,
.axe-callout--accent-both {
border-left-width: 4px;
}
.axe-callout--accent-none {
/* 색 트림 제거 — 배경/텍스트만 살림. */
border-color: var(--border-subtle);
}
.axe-callout--accent-none.axe-callout--info,
.axe-callout--accent-none.axe-callout--success,
.axe-callout--accent-none.axe-callout--warning,
.axe-callout--accent-none.axe-callout--danger {
border-color: var(--border-subtle);
}
/* ------- Reveal (진입 모션 vocabulary) -------
* CSS-only — maud/jinja 도 class + style="--reveal-i: N" 만으로 동일 모션.
* scroll-driven (animation-timeline: view()) 지원 브라우저는 스크롤 진입 시,
* 미지원은 로드 시 1회 재생. JS 0.
* reduced-motion 은 reset.css 전역 클램프가 자동 무효화. */
@keyframes axe-reveal-up {
from {
opacity: 0;
transform: translateY(12px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
.axe-reveal {
animation: axe-reveal-up var(--duration-slower) var(--ease-out) both;
animation-delay: calc(var(--reveal-i, 0) * 60ms); /* stagger: --reveal-i 부여 */
}
@supports (animation-timeline: view()) {
@media (prefers-reduced-motion: no-preference) {
.axe-reveal {
animation-timeline: view();
animation-range: entry 0% entry 40%;
animation-delay: 0s; /* scroll-driven 에선 stagger 대신 진입 위치가 타이밍 */
animation-duration: auto;
}
}
}
/* progress-기반 timeline 은 reset.css 의 duration 클램프가 안 먹는다
* (시간이 아니라 스크롤 진행도) — reduced-motion 은 명시적으로 끔. */
@media (prefers-reduced-motion: reduce) {
.axe-reveal {
animation: none;
}
}
/* ------- content-visibility 유틸 -------
* 긴 단일 페이지의 below-fold 섹션 lazy-layout.
* ⚠ 사용 제한 (2026-06-10 리뷰): ① #anchor 타깃 섹션에 쓰지 말 것 —
* intrinsic-size 추정 오차 + smooth scroll 이 결합하면 anchor 착지가 어긋남.
* ② position:fixed 자손 (CommandPalette·비포털 오버레이) 이 있는 섹션 금지 —
* containment 가 fixed 의 containing block 이 되어 클리핑됨. */
.axe-cv-auto {
content-visibility: auto;
contain-intrinsic-size: auto 720px;
}
/* source: styles/document.css */
/* ============================================================
* @axe/ui — Document / print templates (Phase 17, D-ui-3 Phase 2)
*
* AXE 발신 문서 (IC Memo · LP letter 등) 를 가로(landscape)·세로(portrait)
* 모두 지원하는 CSS-class HTML 템플릿. "Tailwind 0" — 100% `.axe-doc*`
* 클래스 + CSS var → React 없이 Python(jinja)/Rust(maud) 가 동일 markup 재사용.
*
* Owns: .axe-doc-stage, .axe-doc, .axe-doc__* (masthead/title/meta/section/
* kpi/callout/table/signoff/footer), 인쇄 유틸 (.axe-doc__pagebreak 등),
* 표 variants (.axe-doc__table--financial/--compact/--keep/--compare,
* .axe-doc__row--*, 셀 유틸 .axe-doc__ctr/__neg/__pos/__fn/__cellbar),
* 데이터 비주얼 (.axe-doc-viz*, .axe-doc-diagram* — Phase 18 Track B).
*
* 설계 원칙:
* 1. 테마 독립 — 문서는 light/dark 와 무관하게 동일 (흰 종이·먹 잉크).
* `.axe-doc` 가 자체 `--doc-*` 팔레트를 깔아 전역 테마 토큰을 덮음.
* accent 는 흰 종이용 `--brand-claret-print` 추종 (rebrand 시 별도 교체).
* 2. 스코프 @page — named page (`page:` property) 로만 size/margin 지정 →
* `.axe-doc` 없는 일반 페이지 인쇄에는 영향 0 (전역 bare @page 금지).
* 3. pt 단위 본문 — 인쇄 충실도. 화면에서도 mm 종이 위 pt 글자로 동일 비율.
* 4. 화면 미리보기 = 회색 backdrop 위 mm 폭 종이 + 그림자. @media print 에서
* backdrop/그림자 제거하고 @page margin 이 여백을 인계.
*
* 토큰: --font-sans, --font-display, --brand-claret-print, --space-*, --radius-*
* (src/lib/tokens). 색은 --doc-* 로 재정의 (테마 무관 고정).
* 렌더: 브라우저 "인쇄→PDF" (named @page size 인식) + md-to-pdf 파이프라인
* (Puppeteer landscape 옵션을 orientation 에 맞춰 셋 — 렌더 측 책임).
* ============================================================ */
/* ------------------------------------------------------------
* Named @page — 스코프됨 (page: property 로 선택, 전역 미적용)
* A4 = 210 × 297 mm. 여백: 세로 22/20, 가로 16/22 (mm, T/B · L/R).
* ------------------------------------------------------------ */
@page axe-doc-portrait {
size: A4 portrait;
margin: 22mm 20mm;
}
@page axe-doc-landscape {
size: A4 landscape;
margin: 16mm 22mm;
}
/* ------------------------------------------------------------
* Stage — 화면 전용 회색 backdrop (showcase/preview 환경).
* 종이를 가운데 띄우고 스크롤. 인쇄 시 사라짐.
* ------------------------------------------------------------ */
.axe-doc-stage {
display: flex;
flex-direction: column;
align-items: center;
gap: var(--space-6);
padding: var(--space-7) var(--space-5);
background: var(--gray-3, #efefee);
min-height: 100%;
}
/* ------------------------------------------------------------
* Document palette — printed paper and Gate's document-adjacent previews share
* one theme-independent palette. Gate keeps its application chrome theme while
* iframe/stamp/print surfaces can resolve the same paper tokens outside .axe-doc.
* ------------------------------------------------------------ */
.axe-doc,
.axe-pattern-gate-app {
--doc-paper: #ffffff;
--doc-ink: #16130f; /* 본문 — 따뜻한 먹색 */
}
/* ------------------------------------------------------------
* .axe-doc — 종이 (root).
* ------------------------------------------------------------ */
.axe-doc {
color-scheme: light;
--doc-ink-2: #423a2b; /* 보조 텍스트 */
--doc-muted: #756a52; /* 라벨 · 캡션 */
--doc-rule: #ddd6c5; /* 헤어라인 */
--doc-rule-strong: #b1a78f; /* 강조 구분선 */
--doc-band: #f6f3ec; /* 옅은 띠 배경 (meta/kpi) */
--doc-accent: var(--brand-claret-print, #821f3b); /* 흰 종이용 AXE 와인 시그니처 */
--doc-accent-ink: #6b1830;
--doc-accent-soft: rgb(130 31 59 / 0.06);
/* 인쇄/화면 공통 본문 타이포 — pt 기준 */
font-family: var(--font-sans);
font-size: 10.5pt;
line-height: 1.55;
color: var(--doc-ink);
background: var(--doc-paper);
text-align: left;
word-break: keep-all;
overflow-wrap: break-word;
/* 화면 종이 geometry (세로 기본) — mm 폭 + 그림자 */
box-sizing: border-box;
width: 210mm;
min-height: 297mm;
padding: 22mm 20mm;
margin-inline: auto;
box-shadow: 0 6px 28px rgb(31 26 19 / 0.18);
/* 기본 페이지 = 세로 (landscape modifier 가 override) */
page: axe-doc-portrait;
}
/* 가로 modifier — 화면 geometry + named page 교체 */
.axe-doc--landscape {
width: 297mm;
min-height: 210mm;
padding: 16mm 22mm;
page: axe-doc-landscape;
}
/* 세로 modifier (명시) — 기본과 동일하나 markup 가독성용 */
.axe-doc--portrait {
width: 210mm;
min-height: 297mm;
padding: 22mm 20mm;
page: axe-doc-portrait;
}
/* ------------------------------------------------------------
* Masthead / letterhead — 상단 브랜드 밴드
* ------------------------------------------------------------ */
.axe-doc__masthead {
display: flex;
align-items: flex-end;
justify-content: space-between;
gap: var(--space-4);
padding-bottom: 8pt;
border-bottom: 1.5pt solid var(--doc-accent);
margin-bottom: 16pt;
}
.axe-doc__wordmark {
/* 브랜드 워드마크 = Clash Display (display 페이스). 클래스에 직접 박는다 —
* 문서별 인라인 style(var(--font-clash)) 은 layer 뷰어의 opaque sandbox iframe
* 에서 적용되지 않아(클래스 규칙만 먹음) Pretendard 로 폴백했었다. */
font-family: var(--font-brand, var(--font-clash));
font-size: 13pt;
/* 두께·트래킹은 .axe-topnav__brand(앱 nav 워드마크) 와 동일 톤 — medium + 살짝
* 타이트. 과거 700 + 0.14em(넓은 letterhead 트래킹)은 nav 워드마크와 안 맞았음. */
font-weight: var(--weight-medium);
letter-spacing: -0.01em;
/* 워드마크는 작성된 케이스 그대로 렌더 (예: "AXE·Corporation").
* 과거 letterhead 전체 대문자화는 mixed-case 브랜드명을 강제 변형했음. */
text-transform: none;
/* 워드마크 = AXE 와인(버건디) 시그니처 — 마스트헤드 보더·confidential 과 동일 강조색. */
color: var(--doc-accent);
line-height: 1;
}
.axe-doc__wordmark-accent {
color: var(--doc-accent);
}
.axe-doc__doctype {
font-size: 8pt;
font-weight: 600;
letter-spacing: 0.16em;
text-transform: uppercase;
color: var(--doc-muted);
text-align: right;
}
/* Confidential 태그 — masthead 우측 또는 단독 */
.axe-doc__confidential {
font-size: 7.5pt;
font-weight: 700;
letter-spacing: 0.18em;
text-transform: uppercase;
color: var(--doc-accent);
}
/* ------------------------------------------------------------
* Title block
* ------------------------------------------------------------ */
.axe-doc__title {
font-family: var(--font-display);
font-size: 22pt;
font-weight: 700;
line-height: 1.15;
letter-spacing: -0.015em;
color: var(--doc-ink);
margin: 0 0 4pt;
}
.axe-doc__subtitle {
font-size: 12pt;
font-weight: 400;
line-height: 1.35;
color: var(--doc-ink-2);
margin: 0 0 14pt;
}
/* Meta grid — Date / Author / Recipient 등 라벨·값 쌍 */
.axe-doc__meta {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 5pt 18pt;
padding: 9pt 12pt;
background: var(--doc-band);
border: 0.75pt solid var(--doc-rule);
border-radius: var(--radius-sm);
margin-bottom: 16pt;
}
.axe-doc__meta--3col {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.axe-doc__meta-item {
display: flex;
flex-direction: column;
gap: 1pt;
}
.axe-doc__meta-label {
font-size: 7pt;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--doc-muted);
}
.axe-doc__meta-value {
font-size: 9.5pt;
color: var(--doc-ink);
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------
* Section
* ------------------------------------------------------------ */
.axe-doc__section {
margin-top: 16pt;
}
.axe-doc__section-title {
font-family: var(--font-display);
font-size: 12.5pt;
font-weight: 700;
letter-spacing: -0.01em;
color: var(--doc-ink);
padding-bottom: 3pt;
margin: 0 0 8pt;
border-bottom: 0.75pt solid var(--doc-rule-strong);
break-after: avoid;
}
.axe-doc__section-title--accent {
color: var(--doc-accent);
border-bottom-color: var(--doc-accent);
}
/* 번호 매기는 섹션 (CSS counter) — .axe-doc__body 에 .axe-doc__body--numbered */
.axe-doc__body--numbered {
counter-reset: axe-doc-sec;
}
.axe-doc__body--numbered .axe-doc__section-title::before {
counter-increment: axe-doc-sec;
content: counter(axe-doc-sec) ". ";
color: var(--doc-accent);
}
/* ------------------------------------------------------------
* Body prose — h/p/list/quote/link (jinja 본문이 그대로 흘리는 태그)
* ------------------------------------------------------------ */
.axe-doc__body {
font-size: 10.5pt;
line-height: 1.55;
color: var(--doc-ink);
}
.axe-doc__body > :first-child {
margin-top: 0;
}
.axe-doc__body h2 {
font-family: var(--font-display);
font-size: 12.5pt;
font-weight: 700;
margin: 16pt 0 7pt;
break-after: avoid;
}
.axe-doc__body h3 {
font-size: 11pt;
font-weight: 700;
color: var(--doc-ink);
margin: 12pt 0 5pt;
break-after: avoid;
}
.axe-doc__body h4 {
font-size: 10pt;
font-weight: 700;
color: var(--doc-ink-2);
letter-spacing: 0.01em;
margin: 10pt 0 4pt;
break-after: avoid;
}
.axe-doc__body p {
margin: 0 0 7pt;
}
.axe-doc__body ul,
.axe-doc__body ol {
margin: 0 0 7pt;
padding-left: 16pt;
}
.axe-doc__body li {
margin-bottom: 2.5pt;
}
.axe-doc__body li::marker {
color: var(--doc-muted);
}
/* 본문·콜아웃 링크 — AXE 와인색 + 분명한(은은) 밑줄로 "링크임"을 명확히.
* 과거 0.06 알파 보더는 사실상 안 보여 링크 식별 불가였음(시퍼런 파랑은 지양). */
.axe-doc__body a,
.axe-doc__callout-body a {
color: var(--doc-accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.16em;
text-decoration-color: rgb(130 31 59 / 0.5);
text-decoration-skip-ink: auto;
}
.axe-doc__body a:hover,
.axe-doc__callout-body a:hover {
color: var(--doc-accent-ink);
text-decoration-color: var(--doc-accent);
}
.axe-doc__body strong {
font-weight: 700;
color: var(--doc-ink);
}
.axe-doc__body blockquote {
margin: 8pt 0;
padding: 4pt 0 4pt 12pt;
border-left: 2pt solid var(--doc-rule-strong);
color: var(--doc-ink-2);
font-style: italic;
}
.axe-doc__body code {
font-family: var(--font-mono);
font-size: 9pt;
background: var(--doc-band);
padding: 0.5pt 3pt;
border-radius: var(--radius-xs);
}
.axe-doc__rule {
border: none;
border-top: 0.75pt solid var(--doc-rule);
margin: 12pt 0;
}
/* ------------------------------------------------------------
* KPI tiles — Pre/Post money, IRR, ownership 등 수치 강조
* ------------------------------------------------------------ */
.axe-doc__kpis {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(110pt, 1fr));
gap: 8pt;
margin: 12pt 0;
}
.axe-doc__kpi {
padding: 8pt 10pt;
background: var(--doc-band);
border: 0.75pt solid var(--doc-rule);
border-radius: var(--radius-sm);
break-inside: avoid;
}
.axe-doc__kpi-label {
font-size: 7pt;
font-weight: 700;
letter-spacing: 0.1em;
text-transform: uppercase;
color: var(--doc-muted);
margin-bottom: 3pt;
}
.axe-doc__kpi-value {
font-size: 15pt;
font-weight: 700;
line-height: 1.05;
color: var(--doc-ink);
font-variant-numeric: tabular-nums;
}
.axe-doc__kpi-sub {
font-size: 8pt;
color: var(--doc-muted);
margin-top: 2pt;
}
.axe-doc__kpi--accent {
border-color: var(--doc-accent);
}
.axe-doc__kpi--accent .axe-doc__kpi-value {
color: var(--doc-accent);
}
/* ------------------------------------------------------------
* Callout / Recommendation box — Go / Conditional / Pass
* ------------------------------------------------------------ */
.axe-doc__callout {
display: flex;
flex-direction: column;
gap: 3pt;
padding: 9pt 12pt 9pt 14pt;
background: var(--doc-accent-soft);
border-left: 3pt solid var(--doc-accent);
border-radius: 0 var(--radius-sm) var(--radius-sm) 0;
margin: 12pt 0;
break-inside: avoid;
}
.axe-doc__callout-label {
font-size: 7.5pt;
font-weight: 700;
letter-spacing: 0.12em;
text-transform: uppercase;
color: var(--doc-accent);
}
.axe-doc__callout-title {
font-size: 12pt;
font-weight: 700;
color: var(--doc-ink);
}
.axe-doc__callout-body {
font-size: 9.5pt;
color: var(--doc-ink-2);
}
/* 의미 variant — 인쇄 시 배경 보장 (print-color-adjust 아래) */
.axe-doc__callout--go {
background: #e9f6ec;
border-left-color: #2b7a3f;
}
.axe-doc__callout--go .axe-doc__callout-label {
color: #2b7a3f;
}
.axe-doc__callout--conditional {
background: #fbf0e0;
border-left-color: #b8651a;
}
.axe-doc__callout--conditional .axe-doc__callout-label {
color: #b8651a;
}
.axe-doc__callout--pass {
background: #fbe7e2;
border-left-color: #c4321f;
}
.axe-doc__callout--pass .axe-doc__callout-label {
color: #c4321f;
}
/* ------------------------------------------------------------
* Table — formal
* ------------------------------------------------------------ */
.axe-doc__table {
width: 100%;
border-collapse: collapse;
font-size: 9pt;
margin: 10pt 0;
font-variant-numeric: tabular-nums;
}
.axe-doc__table caption {
caption-side: top;
text-align: left;
font-size: 8pt;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--doc-muted);
margin-bottom: 4pt;
}
.axe-doc__table th {
text-align: left;
font-weight: 700;
color: var(--doc-ink);
padding: 5pt 8pt;
border-bottom: 1pt solid var(--doc-rule-strong);
vertical-align: bottom;
}
.axe-doc__table td {
padding: 5pt 8pt;
border-bottom: 0.5pt solid var(--doc-rule);
color: var(--doc-ink-2);
vertical-align: top;
}
.axe-doc__table tr {
break-inside: avoid;
}
.axe-doc__table--zebra tbody tr:nth-child(even) {
background: var(--doc-band);
}
.axe-doc__table .axe-doc__num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ------------------------------------------------------------
* Signature / sign-off block
* ------------------------------------------------------------ */
.axe-doc__signoff {
margin-top: 24pt;
display: flex;
flex-wrap: wrap;
gap: 24pt;
break-inside: avoid;
}
.axe-doc__sign {
min-width: 150pt;
}
.axe-doc__sign-line {
border-top: 0.75pt solid var(--doc-ink);
padding-top: 4pt;
margin-top: 28pt;
}
.axe-doc__sign-name {
font-size: 10pt;
font-weight: 700;
color: var(--doc-ink);
}
.axe-doc__sign-title {
font-size: 8.5pt;
color: var(--doc-muted);
}
/* ------------------------------------------------------------
* Footer — top hairline + confidential · page indicator
* ------------------------------------------------------------ */
.axe-doc__footer {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
margin-top: 22pt;
padding-top: 6pt;
border-top: 0.75pt solid var(--doc-rule);
font-size: 7.5pt;
color: var(--doc-muted);
}
.axe-doc__footer-page::after {
/* 화면에서는 정적, 인쇄 시 @page counter 가 별도 처리 */
content: attr(data-page);
}
/* ------------------------------------------------------------
* Layout helpers — 가로 문서 2-단, 페이지 나눔
* ------------------------------------------------------------ */
.axe-doc__cols {
column-count: 2;
column-gap: 20pt;
column-rule: 0.5pt solid var(--doc-rule);
}
.axe-doc__cols-3 {
column-count: 3;
column-gap: 16pt;
}
.axe-doc__pagebreak {
break-after: page;
}
.axe-doc__pagebreak-before {
break-before: page;
}
.axe-doc__nobreak {
break-inside: avoid;
}
.axe-doc__spacer {
height: 12pt;
}
/* ------------------------------------------------------------
* Print — backdrop/그림자 제거, @page margin 인계, 색 강제
* ------------------------------------------------------------ */
@media print {
html,
body {
background: #ffffff !important;
}
/* showcase chrome 숨김 */
.axe-doc-toolbar,
[data-print-hide] {
display: none !important;
}
.axe-doc-stage {
display: block;
padding: 0;
background: none;
min-height: 0;
gap: 0;
}
.axe-doc {
/* 종이 시뮬레이션 해제 — @page 가 size/margin 인계 */
width: auto;
min-height: 0;
margin: 0;
padding: 0;
box-shadow: none;
border-radius: 0;
}
/* 밴드/배경/보더 색을 인쇄에 강제 (회색조 변환 방지) */
.axe-doc,
.axe-doc * {
-webkit-print-color-adjust: exact;
print-color-adjust: exact;
}
/* 한 문서 = 한 orientation. 인쇄될 종이만 표시. */
.axe-doc + .axe-doc {
break-before: page;
}
}
/* ============================================================
* Phase 18 — Document data visuals (Track B)
*
* Resolved-spec 경계: 렌더러(React doc-viz 컴포넌트 · jinja _viz 매크로)는
* 산술만 한다 — 선형 보간, 누적합, grid 곱셈. 축 tick 배열 · yMax · 표시
* 문자열("₩60억", "15.8%")은 전부 호출자 책임 (ic-memo 의 기존 "str 표시값"
* 규약의 연장). 함수 prop 금지.
*
* SVG geometry 계약: viewBox `0 0 482 H`(portrait 본문폭 170mm≈482pt,
* 1 user unit ≡ 1pt) · 반폭 2-up 은 `0 0 231 H` · plot 마진
* {l:36, r:8, t:8(valueLabels 시 16), b:18} · 좌표 소수 2자리 고정
* (toFixed(2) / '%.2f'|format) · 색은 attribute 금지 — CSS 클래스/currentColor.
* 기하 변경 = TS(doc-viz) · jinja(_viz) · golden(__fixtures__) 3점 동시 commit
* (검증: scripts/doc-viz-parity/{gen-golden.mts,check_jinja.py}).
*
* 화면 대시보드 차트는 chart/Chart.tsx(recharts) — 본 섹션은 인쇄 문서 전용.
* `.axe-doc` 내부 반응형 무대상 (by design — mm 고정 종이).
* ============================================================ */
/* ------------------------------------------------------------
* 신규 토큰 — 기존 .axe-doc 블록(상단) 무수정 원칙에 따라 append
* 블록으로 추가 (cascade 가 동일 selector 의 변수 선언을 병합).
* 카테고리 6색 = 휘도 분산 (실측 L* 29~63, 인접 시리즈 최소 ΔL*≈7,
* donut wrap 6↔1≈4.6) — 색 단독으로 흑백 복사 생존 불가. 그래서
* 2-series bar 는 valueLabels 병기, donut 은 범례 표시값 병기가 규약
* (데모가 그 패턴). viz-1 은 --doc-accent(브랜드) 추종이라 rebrand 시
* 사다리가 조용히 움직임 — 완전한 ≥12 사다리 재설계는
* B-ui-doc-viz-grayscale-ladder. (어드버서리얼 리뷰 2026-06-10)
* ------------------------------------------------------------ */
.axe-doc {
--doc-positive: #2b7a3f; /* callout --go 와 동일 (의미색 재사용) */
--doc-negative: #c4321f; /* callout --pass 와 동일 */
--doc-viz-1: var(--doc-accent); /* 1순위 = 브랜드 claret 추종 */
--doc-viz-2: #31597f; /* 진청 */
--doc-viz-3: #8a7f63; /* 모래 */
--doc-viz-4: #c2913a; /* 황토 */
--doc-viz-5: #4a7a55; /* 회록 */
--doc-viz-6: #594a6b; /* 회보라 */
}
/* ------------------------------------------------------------
* 표 variants
* ------------------------------------------------------------ */
/* 재무표 — 첫 열 외 우정렬. :not() 형이라 jinja 루프에서 셀 클래스 불요. */
.axe-doc__table--financial th:not(:first-child),
.axe-doc__table--financial td:not(:first-child) {
text-align: right;
font-variant-numeric: tabular-nums lining-nums;
}
.axe-doc__table--compact {
font-size: 8pt;
}
.axe-doc__table--compact th,
.axe-doc__table--compact td {
padding: 3pt 6pt;
}
/* 인쇄 페이지마다 thead 반복 — 기본 동작이지만 명시 (긴 표 분할 대비) */
.axe-doc__table thead {
display: table-header-group;
}
/* 짧은 표 opt-in — 표 전체를 한 페이지에 응집 */
.axe-doc__table--keep {
break-inside: avoid;
}
/* 행 역할 — 회계 괘선 관례: 합계 = 위 단선 + 아래 이중선 */
.axe-doc__row--group th,
.axe-doc__row--group td {
font-size: 7.5pt;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--doc-muted);
background: var(--doc-band);
border-bottom-color: var(--doc-rule-strong);
}
.axe-doc__row--group {
break-after: avoid; /* 그룹 헤더가 페이지 끝에 고아로 남지 않게 */
}
.axe-doc__row--subtotal td,
.axe-doc__row--subtotal th {
font-weight: 600;
color: var(--doc-ink);
border-top: 0.75pt solid var(--doc-rule-strong);
}
.axe-doc__row--total td,
.axe-doc__row--total th {
font-weight: 700;
color: var(--doc-ink);
border-top: 1pt solid var(--doc-ink);
border-bottom: 2.25pt double var(--doc-ink);
}
.axe-doc__row--subtotal,
.axe-doc__row--total {
break-before: avoid; /* Chromium best-effort — 실패해도 데이터 무손실 */
}
.axe-doc__row--indent td:first-child,
.axe-doc__row--indent th:first-child {
padding-left: 18pt;
}
.axe-doc__row--indent-2 td:first-child,
.axe-doc__row--indent-2 th:first-child {
padding-left: 30pt;
}
/* 그룹+소계 응집 (opt-in) — cap table 의 다중 tbody 단위 페이지 나눔 */
tbody.axe-doc__rowgroup {
break-inside: avoid;
}
/* 셀 유틸 */
.axe-doc__ctr {
text-align: center;
}
/* 음수 — 괄호 (1,234) 는 표시 문자열 책임. 색+괄호 = 흑백 복사 이중 부호. */
.axe-doc__neg {
color: var(--doc-negative);
}
.axe-doc__pos {
color: var(--doc-positive);
}
.axe-doc__fn {
font-size: 0.7em;
vertical-align: super;
color: var(--doc-accent-ink);
}
/* 지분 미니바 — inline 은 `--w` 데이터만 주입, 기존 print-color-adjust
* (.axe-doc * exact) 가 gradient 인쇄를 보장. */
.axe-doc__cellbar {
display: inline-block;
vertical-align: -1pt;
width: 36pt;
height: 5pt;
margin-right: 4pt;
background: linear-gradient(
to right,
var(--doc-accent) var(--w, 0%),
var(--doc-band) var(--w, 0%)
);
border: 0.5pt solid var(--doc-rule);
border-radius: 1pt;
}
/* 비교표 — 열 사이 수직 헤어라인 + 제안 열 하이라이트 */
.axe-doc__table--compare th:not(:first-child) {
text-align: center;
}
.axe-doc__table--compare td:not(:first-child),
.axe-doc__table--compare th:not(:first-child) {
border-left: 0.5pt solid var(--doc-rule);
}
.axe-doc__table--compare th:first-child,
.axe-doc__table--compare td:first-child {
color: var(--doc-muted);
width: 24%;
}
/* colgroup 하이라이트 — col 은 배경만 가능 (보더 불가, CSS 2.1 제약) */
col.axe-doc__col--hl {
background: var(--doc-accent-soft);
}
.axe-doc__table--compare thead th.axe-doc__th--hl {
border-bottom: 1.5pt solid var(--doc-accent);
color: var(--doc-accent-ink);
}
/* 표 단위 — caption 우측 float. 각주는 표 *밖* 형제 ul (__tnotes).
* tfoot 금지: Chromium 인쇄에서 매 페이지 반복 — 합계/각주가 중복 출력됨. */
.axe-doc__table caption .axe-doc__table-unit {
float: right;
font-weight: 400;
letter-spacing: 0;
text-transform: none;
}
.axe-doc__tnotes {
margin: -6pt 0 10pt;
padding: 0;
list-style: none;
font-size: 7.5pt;
color: var(--doc-muted);
}
.axe-doc__tnotes li {
margin-bottom: 1pt;
}
/* sr 유틸 — document.css 로컬 정의. jinja axe_css 채널 = tokens+document.css
* 인라인 계약이라 indicators.css 의 .axe-sr-only 를 못 쓴다 (부재 검증됨). */
.axe-doc__sr {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
/* ------------------------------------------------------------
* .axe-doc-viz — 서버 SVG 차트 (bar / line / donut)
* 색 = series/key 클래스의 currentColor 단일 채널.
* ------------------------------------------------------------ */
.axe-doc-viz {
margin: 10pt 0;
break-inside: avoid; /* figure = 원자 단위 (차트 H 200u ≈ 70mm — 항상 1페이지 내) */
}
.axe-doc-viz--wide {
column-span: all; /* landscape 2-col 탈출 */
}
.axe-doc__figrow {
display: flex;
gap: 12pt; /* 2-up — 각 child flex:1, 반폭 viewBox 231 사용 */
}
.axe-doc__figrow > * {
flex: 1;
min-width: 0;
}
.axe-doc-viz__caption {
font-size: 8pt;
font-weight: 700;
letter-spacing: 0.08em;
text-transform: uppercase;
color: var(--doc-muted);
margin-bottom: 4pt;
}
.axe-doc-viz__svg {
display: block;
width: 100%;
height: auto;
}
.axe-doc-viz__grid line {
stroke: var(--doc-rule);
stroke-width: 0.5px;
shape-rendering: crispEdges;
}
.axe-doc-viz__axis line {
stroke: var(--doc-rule-strong);
stroke-width: 0.75px;
shape-rendering: crispEdges;
}
.axe-doc-viz__tick,
.axe-doc-viz__xlabel {
fill: var(--doc-muted);
font-size: 7px;
font-family: var(--font-sans);
font-variant-numeric: tabular-nums;
}
.axe-doc-viz__value {
fill: var(--doc-ink-2);
font-size: 7px;
font-variant-numeric: tabular-nums;
}
/* 카테고리 색 — series(SVG)·key(범례) 공용 currentColor 채널 */
.axe-doc-viz__series--1, .axe-doc-viz__key--1 { color: var(--doc-viz-1); }
.axe-doc-viz__series--2, .axe-doc-viz__key--2 { color: var(--doc-viz-2); }
.axe-doc-viz__series--3, .axe-doc-viz__key--3 { color: var(--doc-viz-3); }
.axe-doc-viz__series--4, .axe-doc-viz__key--4 { color: var(--doc-viz-4); }
.axe-doc-viz__series--5, .axe-doc-viz__key--5 { color: var(--doc-viz-5); }
.axe-doc-viz__series--6, .axe-doc-viz__key--6 { color: var(--doc-viz-6); }
.axe-doc-viz--bar .axe-doc-viz__series rect {
fill: currentColor;
shape-rendering: crispEdges;
}
.axe-doc-viz--line .axe-doc-viz__series polyline {
fill: none;
stroke: currentColor;
stroke-width: 1.6px;
stroke-linejoin: round;
stroke-linecap: round;
}
/* 예측/2nd 시리즈 — dashed = 흑백 복사 redundant encoding */
.axe-doc-viz--line .axe-doc-viz__series--dashed polyline {
stroke-dasharray: 4 2.5;
}
.axe-doc-viz--line .axe-doc-viz__series circle {
fill: var(--doc-paper);
stroke: currentColor;
stroke-width: 1.2px;
}
/* donut — pathLength=100 기법: 슬라이스 = stroke-dasharray 백분율 산술만
* (π·trig·rotate 전부 불요 — jinja 패리티 면적 최소화). */
.axe-doc-viz--donut .axe-doc-viz__slice {
fill: none;
stroke: currentColor;
stroke-width: 26px;
}
.axe-doc-viz__donut-value {
fill: var(--doc-ink);
font-size: 15px;
font-weight: 700;
text-anchor: middle;
font-variant-numeric: tabular-nums;
}
.axe-doc-viz__donut-label {
fill: var(--doc-muted);
font-size: 7px;
text-anchor: middle;
letter-spacing: 0.1em;
text-transform: uppercase;
}
/* 범례 = SVG 밖 HTML ul — 스크린리더 · 한글 줄바꿈 · 타이포 일관 */
.axe-doc-viz__legend {
list-style: none;
display: flex;
flex-wrap: wrap;
gap: 4pt 12pt;
margin: 4pt 0 0;
padding: 0;
font-size: 7.5pt;
color: var(--doc-ink-2);
}
.axe-doc-viz__key::before {
content: "";
display: inline-block;
width: 7pt;
height: 7pt;
margin-right: 3pt;
vertical-align: -0.5pt;
background: currentColor;
border-radius: 1pt;
}
/* ------------------------------------------------------------
* .axe-doc-diagram — 투자 구조 다이어그램 (grid 배치, 수동 레이아웃)
* 노드 kind = 색 아닌 테두리 *형태* 구분 (흑백 복사 의미 보존).
* 신주/구주 = accent/파선 이중 부호.
* ------------------------------------------------------------ */
.axe-doc-diagram__node rect {
fill: var(--doc-paper);
stroke: var(--doc-rule-strong);
stroke-width: 0.9px;
}
.axe-doc-diagram__node--fund rect {
fill: var(--doc-band);
stroke: var(--doc-accent);
stroke-width: 1.2px;
}
.axe-doc-diagram__node--spc rect {
stroke-dasharray: 3 2;
}
.axe-doc-diagram__node--person rect {
rx: 22px;
}
.axe-doc-diagram__node--target rect {
stroke: var(--doc-ink);
stroke-width: 1.4px;
}
.axe-doc-diagram__node-label {
fill: var(--doc-ink);
font-size: 8.5px;
font-weight: 700;
text-anchor: middle;
}
.axe-doc-diagram__node-sub {
fill: var(--doc-muted);
font-size: 7px;
text-anchor: middle;
}
.axe-doc-diagram__edge path {
fill: none;
stroke: currentColor;
stroke-width: 1px;
}
.axe-doc-diagram__edge {
color: var(--doc-ink-2); /* equity 기본 */
}
.axe-doc-diagram__edge--new {
color: var(--doc-accent); /* 신주 = accent 실선 */
}
.axe-doc-diagram__edge--old path {
stroke-dasharray: 3.5 2.5; /* 구주 = 파선 */
}
.axe-doc-diagram__edge--flow {
color: var(--doc-muted);
}
.axe-doc-diagram__edge--flow path {
stroke-dasharray: 1.5 2.5; /* 출자/자금 = 점선 */
}
/* 화살촉 — marker 내용은 참조 엣지의 color 를 상속받지 못함 (context-fill
* 미지원). marker 자체에 edge 클래스를 부여하고 본 규칙이 fill 을 채움.
* specificity (0,2,1) — 위 `.axe-doc-diagram__edge path` 의 fill:none 을 이김. */
.axe-doc-diagram__edge path.axe-doc-diagram__edge-arrow {
fill: currentColor;
stroke: none;
}
/* 엣지 라벨 halo — 선 위 가독, 인쇄 안전 (paint-order 는 PDF 변환 시 보존) */
.axe-doc-diagram__edge-label,
.axe-doc-diagram__edge-sub {
fill: currentColor;
font-size: 7px;
paint-order: stroke;
stroke: var(--doc-paper);
stroke-width: 2.5px;
}
/* ------------------------------------------------------------
* Print — sr 표는 인쇄물에서 제외 (HTML 소비자 전용 fallback)
* ------------------------------------------------------------ */
@media print {
.axe-doc__sr {
display: none;
}
}
/* ============================================================
계약서 variant — .axe-doc--contract (2026-06)
메모·서한의 chrome(masthead·meta 밴드·accent 색)을 걷어내고 법률문서 톤으로:
가운데 제목 + 당사자 식별 + 번호 조항(장 가운데/조 굵게/항·호) + 서명·날인 + 페이지번호.
.axe-doc 의 A4 종이·토큰·본문 prose·표 는 그대로 재활용 (양식 다 빼고 "문서").
============================================================ */
.axe-doc--contract { position: relative; padding-bottom: 24mm; }
.axe-doc--contract .axe-doc__masthead { display: none; }
.axe-doc--contract .axe-doc__title {
text-align: center; letter-spacing: 0.36em; font-size: 16pt; font-weight: 700;
color: var(--doc-ink); margin: 4mm 0 1.5mm; border: 0;
}
.axe-doc--contract .axe-doc__subtitle { text-align: center; color: var(--doc-muted); margin: 0 0 2mm; }
.axe-doc--contract .axe-doc__contract-rule { border: 0; border-top: 0.6pt solid var(--doc-rule-strong); margin: 4mm 0 5mm; }
.axe-doc--contract .axe-doc__parties { margin: 0 0 4mm; }
.axe-doc--contract .axe-doc__party { font-size: 10.5pt; line-height: 1.55; margin: 1.5mm 0; }
.axe-doc--contract .axe-doc__party-role { font-weight: 800; color: var(--doc-ink); }
/* 장 — 가운데, 액센트/괘선/카운터 제거 */
.axe-doc--contract .axe-doc__section-title,
.axe-doc--contract .axe-doc__section-title--accent {
text-align: center; border: 0; background: none; color: var(--doc-ink);
font-size: 12pt; font-weight: 800; letter-spacing: 0.04em; margin: 9mm 0 3.5mm; padding: 0;
}
.axe-doc--contract .axe-doc__section-title::before { content: none; }
/* 조 + 본문 */
.axe-doc--contract .axe-doc__body { font-size: 11pt; line-height: 1.7; color: var(--doc-ink); }
.axe-doc--contract .axe-doc__body h3 { font-size: 11pt; font-weight: 800; color: var(--doc-ink); margin: 5mm 0 1.5mm; }
.axe-doc--contract .axe-doc__body p { text-align: justify; margin: 1.5mm 0; }
.axe-doc--contract .axe-doc__body ol { padding-left: 8mm; }
.axe-doc--contract .axe-doc__body li { text-align: justify; margin: 1.2mm 0; }
/* 표 — 단순 검은색 1px 테두리(상하좌우 풀 그리드) + table-layout:fixed.
컬럼 너비(%)는 표 내용을 LLM 이 판단해 로 주입한다
(가변 콘텐츠를 가독성 좋게 정렬 — 주소·설명 넓게, 숫자·코드 좁게). */
.axe-doc--contract .axe-doc__table { table-layout: fixed; }
.axe-doc--contract .axe-doc__table th,
.axe-doc--contract .axe-doc__table td { border: 1px solid #1a1a1a; background: none; padding: 4pt 6pt;
vertical-align: top; word-break: keep-all; overflow-wrap: break-word; }
.axe-doc--contract .axe-doc__table thead th { font-weight: 700; }
.axe-doc--contract .axe-doc__table caption { text-align: left; }
/* 서명·날인 — 통상 계약서식: 당사자별 세로 블록(회사명·주소·법인등록번호·대표이사명 (인)) */
.axe-doc--contract .axe-doc__signoff { display: block; border: 0; padding: 0; margin: 10mm 0 0; }
.axe-doc--contract .axe-doc__sign-intro { font-size: 10.5pt; margin: 0 0 4mm; }
.axe-doc--contract .axe-doc__sign { font-size: 10pt; line-height: 1.65; margin: 7mm 0; }
.axe-doc--contract .axe-doc__sign .role { font-weight: 800; }
.axe-doc--contract .axe-doc__sign .seal { float: right; color: var(--doc-muted); }
.axe-doc--contract .axe-doc__sign .addr { color: var(--doc-ink-2); }
/* 페이지번호 */
.axe-doc--contract .axe-doc__pagenum {
position: absolute; left: 0; right: 0; bottom: 9mm; text-align: center;
font-size: 9pt; color: var(--doc-muted); letter-spacing: 0.12em;
}
@media print { .axe-doc--contract .axe-doc__pagenum { display: none; } }
/* source: styles/code-theme.css */
/* ============================================================
* AXE Labs — shiki code theme (css-variables)
*
* ServerCodeBlock 이 shiki `css-variables` 테마로 토큰을 렌더하고,
* 본 파일이 --shiki-* 변수를 디자인 토큰에 매핑한다.
* 값이 전부 var() 참조라 light/dark 블록의 *선언은 동일*하지만,
* tokens/colors.css 의 스코핑 컨벤션(명시적 dark 블록 + OS 다크 미디어쿼리
* fallback)을 그대로 미러링해 cascade 우선순위를 일치시킨다.
*
* ⚠ 본 파일은 어디서도 자동 import 되지 않는다 — 앱 세션이 globals 에 wiring.
*
* 팔레트 (해석값):
* light: keyword=clear blue · string=phthalo green · function=info ·
* comment=text-muted(italic) · constant=scarf orange ·
* punctuation=text-tertiary · fg=text-primary · bg=transparent
* dark : keyword=clear blue · string=phthalo green · function=info ·
* comment=text-muted · constant=warning · punctuation=text-tertiary
* ============================================================ */
/* -------- LIGHT (default) -------- */
:root,
[data-theme="light"],
.light {
--shiki-foreground: var(--text-primary);
--shiki-background: transparent;
--shiki-token-keyword: var(--accent);
--shiki-token-string: var(--success);
--shiki-token-string-expression: var(--success);
--shiki-token-comment: var(--text-muted);
--shiki-token-constant: var(--warning);
--shiki-token-function: var(--info);
--shiki-token-parameter: var(--text-secondary);
--shiki-token-punctuation: var(--text-tertiary);
--shiki-token-link: var(--info);
}
/* -------- DARK (explicit) -------- */
/* 선언은 light 와 동일 — 밑단 토큰이 모드에 따라 명도만 조정된다. */
[data-theme="dark"],
.dark {
--shiki-foreground: var(--text-primary);
--shiki-background: transparent;
--shiki-token-keyword: var(--accent);
--shiki-token-string: var(--success);
--shiki-token-string-expression: var(--success);
--shiki-token-comment: var(--text-muted);
--shiki-token-constant: var(--warning);
--shiki-token-function: var(--info);
--shiki-token-parameter: var(--text-secondary);
--shiki-token-punctuation: var(--text-tertiary);
--shiki-token-link: var(--info);
}
/* -------- DARK (OS preference fallback) -------- */
/* colors.css 의 :root:not([data-theme="light"]):not(.light) 패턴 미러. */
@media (prefers-color-scheme: dark) {
:root:not([data-theme="light"]):not(.light) {
--shiki-foreground: var(--text-primary);
--shiki-background: transparent;
--shiki-token-keyword: var(--accent);
--shiki-token-string: var(--success);
--shiki-token-string-expression: var(--success);
--shiki-token-comment: var(--text-muted);
--shiki-token-constant: var(--warning);
--shiki-token-function: var(--info);
--shiki-token-parameter: var(--text-secondary);
--shiki-token-punctuation: var(--text-tertiary);
--shiki-token-link: var(--info);
}
}
/* shiki 가 emit 하는 .line span 을 block 으로 — 줄 단위 배경/하이라이트 가능.
* ServerCodeBlock 은 줄 사이 "\n" 텍스트 노드를 넣지 않으므로 이중 줄간격 없음. */
.axe-codeblock pre code .line {
display: block;
}
/* comment italic — 토큰 색이 inline style(color:var(--shiki-token-comment))로
* 나오므로 attribute substring 으로 타겟. (light 가이드의 italic 을 dark 에도
* 동일 적용 — 관례상 양 모드 italic 이 일관적.) */
.axe-codeblock pre code span[style*="--shiki-token-comment"] {
font-style: italic;
}
/* 빈 줄 보존 — ServerCodeBlock 은 줄 사이 \n 텍스트 노드를 생략하므로
* 빈 .line 이 zero-height 로 붕괴하는 것을 방지. */
.axe-codeblock pre code .line:empty::after {
content: "\00a0";
}
/* source: styles/tones.css */
/* ============================================================
* AXE Labs — surface tones (taste-skill 학습 / D-ui-11)
*
* 톤 = 스코프드 레이어. `.axe-tone-*` 래퍼의 subtree 안에서만 디스플레이 페이스 ·
* radius 스케일 · 숫자 표기를 재조합한다. **구조층은 불변** — gray ramp · bg/text ·
* 보더 · 상태색(success/warning/danger/info) · 대비 AA · 그림자는 톤이 건드리지 않아
* 다테넌트 대비/의미 보장이 유지된다. 브랜드 리컬러(theme-manifest --brand/accent/cta)와
* **직교**하므로 어떤 브랜드 accent 위에서도 동일 톤이 작동한다.
*
* .axe-tone-signature 브랜드 기본 — Pretendard · radius 기본.
* axelabs.ai · blueprint · design.
* .axe-tone-editorial 문서 · 격식 — display=Clash(opt-in, 미로딩 시 Pretendard 폴백) ·
* crisp radius. gate · layer · IC 메모.
* .axe-tone-console 데이터 · 터미널 — display=mono(Sarasa) · tight radius · tabular-nums.
* index · matrix 대시보드.
*
* ── 중첩 안전(nesting) ── 각 톤은 tone-controlled 값 **전부를 재선언(complete reset)** 한다.
* 그래서 톤 안에 다른 톤을 중첩해도 안쪽 톤이 바깥 값을 상속하지 않는다. descendant 요소
* 셀렉터는 쓰지 않는다 — 상속 커스텀 프로퍼티 + inherit 되는 실제 속성(font-variant-numeric)
* 만 써서, 바깥 톤의 규칙이 중첩 래퍼 *내부* 콘텐츠로 새는 것을 원천 차단(Codex lane-2 리뷰).
*
* 본문 텍스트는 톤 무관 --font-sans(Pretendard) 유지 — 가독성 우선(디스플레이 자리만 교체).
* radius 값은 shape 전용(대비·상태 의미와 무관)이라 스코프 내 remap이 안전하다.
* radius 기본(6/10/16)은 tokens/spacing.css 스케일의 재선언(reset baseline)이다.
* ============================================================ */
.axe-tone-signature {
--font-display: var(--font-sans);
--radius-md: 6px;
--radius-lg: 10px;
--radius-xl: 16px;
font-variant-numeric: normal;
}
.axe-tone-editorial {
--font-display: var(--font-brand); /* Clash Display(opt-in) → 미로딩 시 --font-sans 폴백 */
--radius-md: 4px; /* crisp — 문서/print 느낌 */
--radius-lg: 8px;
--radius-xl: 12px;
font-variant-numeric: normal;
}
.axe-tone-console {
--font-display: var(--font-mono); /* Sarasa Fixed K */
--radius-md: 4px; /* tight — 기술/터미널 느낌 */
--radius-lg: 5px;
--radius-xl: 6px;
font-variant-numeric: tabular-nums; /* 숫자 정렬(표·지표) */
}
/* source: styles/page-patterns.css */
/* ============================================================
* AXE Landing / Authentication page patterns
*
* Stable renderer-neutral contract. React, maud, jinja, and static HTML
* consumers use the same .axe-pattern-* classes from the Consumer Kit.
* ============================================================ */
.axe-pattern-landing,
.axe-pattern-auth {
--font-brand: var(--font-sans);
--font-clash: var(--font-sans);
font-family: var(--font-sans);
}
/* Shared pattern details ------------------------------------------------ */
.axe-pattern-skip-link {
position: fixed;
top: var(--space-2);
left: var(--space-2);
z-index: calc(var(--z-overlay) + 10);
transform: translateY(calc(-100% - var(--space-5)));
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-md);
background: var(--cta);
color: var(--cta-fg);
font-size: var(--text-sm);
text-decoration: none;
transition: transform var(--duration-fast) var(--ease-out);
}
.axe-pattern-skip-link:focus {
transform: translateY(0);
}
/* Landing pattern ------------------------------------------------------- */
.axe-pattern-landing {
min-width: 0;
min-height: 100vh;
background: var(--bg-base);
color: var(--text-primary);
}
.axe-pattern-landing__nav {
min-height: 64px;
padding-inline:
max(
clamp(var(--space-4), 4vw, var(--space-8)),
calc((100% - 76rem) / 2)
);
}
/* 0.25.1 — 랜딩 바의 워드마크는 제품 이름이다. workspace rail brand
* (.axe-workspace-entity) 와 같은 식자(sans · bold · −0.01em)와 같은 색(본문색)으로
* 맞춘다: 색은 상태에 쓰고 이름에는 쓰지 않는다는 0.25 크롬 규칙을, 로그인 전 화면도
* 따르게 하는 것이다. 종전 claret 틴트 + semibold 는 공개 랜딩과 로그인 후 workspace 의
* 같은 "Design" 이 서로 다른 글자로 보이게 했다. */
.axe-pattern-landing__nav .axe-logo {
font-family: var(--font-sans);
font-weight: var(--weight-bold);
color: var(--text-primary);
}
.axe-pattern-landing__nav-actions {
display: flex;
align-items: center;
gap: var(--space-2);
}
.axe-pattern-landing__nav > .axe-pattern-landing__nav-actions {
margin-left: auto;
}
.axe-pattern-container {
width: min(calc(100% - clamp(2.5rem, 7vw, 6rem)), 76rem);
margin-inline: auto;
}
.axe-pattern-landing__hero {
min-height: min(760px, calc(100vh - 64px));
min-height: min(760px, calc(100dvh - 64px));
grid-template-columns: minmax(0, 1fr);
gap: clamp(var(--space-7), 6vw, var(--space-10));
padding-block: clamp(4.75rem, 10vw, 8rem);
}
.axe-pattern-landing__hero .axe-hero__content {
max-width: 42rem;
}
.axe-pattern-landing__hero .axe-hero__title {
max-width: 13ch;
font-family: var(--font-sans);
font-size: clamp(2.8rem, 5.1vw, 4.65rem);
font-weight: var(--weight-medium);
line-height: 1.04;
letter-spacing: -0.045em;
text-wrap: balance;
}
.axe-pattern-landing__hero .axe-hero__title em {
color: var(--brand-claret);
font-style: normal;
}
.axe-pattern-landing__hero .axe-hero__subtitle {
max-width: 38rem;
font-size: clamp(var(--text-base), 1.2vw, var(--text-xl));
line-height: 1.72;
}
.axe-pattern-landing__hero .axe-hero__actions a {
gap: var(--space-2);
}
.axe-pattern-landing__eyebrow {
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--text-tertiary);
}
.axe-pattern-ops {
width: min(100%, 34rem);
min-width: 0;
border: 1px solid var(--border-default);
border-radius: 1.25rem;
overflow: hidden;
background: var(--bg-elevated);
box-shadow: var(--shadow-xl);
}
.axe-pattern-ops__header {
min-height: 68px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-subtle);
}
.axe-pattern-ops__header > div {
min-width: 0;
}
.axe-pattern-ops__overline,
.axe-pattern-ops__section-label {
display: block;
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
line-height: 1.3;
letter-spacing: 0.04em;
text-transform: uppercase;
}
.axe-pattern-ops__header strong {
display: block;
margin-top: 3px;
color: var(--text-primary);
font-size: var(--text-sm);
}
.axe-pattern-ops__live-status {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: var(--space-2);
color: var(--success);
font-size: var(--text-xs);
}
.axe-pattern-ops__live-status > span {
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--success);
box-shadow: 0 0 0 4px var(--success-soft);
}
.axe-pattern-ops__prompt {
display: grid;
grid-template-columns: 32px minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-4) var(--space-5);
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-subtle);
}
.axe-pattern-ops__agent-mark {
width: 32px;
height: 32px;
display: grid;
place-items: center;
border: 1px solid color-mix(in srgb, var(--accent) 32%, var(--border-subtle));
border-radius: var(--radius-md);
background: var(--accent-soft);
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.axe-pattern-ops__prompt p {
margin: 0;
color: var(--text-primary);
font-size: var(--text-sm);
line-height: 1.6;
}
.axe-pattern-ops__body {
display: grid;
grid-template-columns: minmax(0, 1.05fr) minmax(0, 0.95fr);
min-width: 0;
}
.axe-pattern-ops__plan,
.axe-pattern-ops__snapshot {
min-width: 0;
padding: var(--space-5);
}
.axe-pattern-ops__plan {
border-right: 1px solid var(--border-subtle);
}
.axe-pattern-ops__plan ol {
list-style: none;
margin: var(--space-4) 0 0;
padding: 0;
}
.axe-pattern-ops__plan li {
position: relative;
min-width: 0;
display: grid;
grid-template-columns: 26px minmax(0, 1fr);
gap: var(--space-3);
padding-bottom: var(--space-4);
}
.axe-pattern-ops__plan li:not(:last-child)::after {
content: "";
position: absolute;
top: 27px;
bottom: 2px;
left: 12px;
width: 1px;
background: var(--border-default);
}
.axe-pattern-ops__plan li > span {
width: 26px;
height: 26px;
z-index: 1;
display: grid;
place-items: center;
border: 1px solid var(--border-default);
border-radius: var(--radius-full);
background: var(--bg-elevated);
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: 10px;
}
.axe-pattern-ops__plan li[data-state="done"] > span {
border-color: color-mix(in srgb, var(--success) 36%, var(--border-default));
background: var(--success-soft);
color: var(--success);
}
.axe-pattern-ops__plan li[data-state="active"] > span {
border-color: color-mix(in srgb, var(--accent) 38%, var(--border-default));
background: var(--accent-soft);
color: var(--accent);
}
.axe-pattern-ops__plan strong {
display: block;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.axe-pattern-ops__plan strong {
color: var(--text-primary);
font-size: var(--text-xs);
}
.axe-pattern-ops__plan small {
display: block;
margin-top: 3px;
color: var(--text-tertiary);
font-size: var(--text-xs);
line-height: 1.4;
}
.axe-pattern-ops__attention {
margin-top: var(--space-4);
padding: var(--space-3);
border: 1px solid color-mix(in srgb, var(--warning) 32%, var(--border-subtle));
border-radius: var(--radius-md);
background: color-mix(in srgb, var(--warning-soft) 58%, var(--bg-elevated));
}
.axe-pattern-ops__attention > div {
display: flex;
justify-content: space-between;
gap: var(--space-2);
}
.axe-pattern-ops__attention span,
.axe-pattern-ops__attention strong {
display: block;
font-size: var(--text-xs);
}
.axe-pattern-ops__attention span {
color: var(--text-secondary);
}
.axe-pattern-ops__attention strong {
color: var(--text-primary);
}
.axe-pattern-ops__attention .axe-badge {
margin-top: var(--space-3);
}
.axe-pattern-ops__attention p {
margin: var(--space-2) 0 0;
color: var(--text-secondary);
font-size: var(--text-xs);
line-height: 1.45;
}
.axe-pattern-ops__snapshot-row {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding-block: var(--space-3);
border-bottom: 1px solid var(--border-subtle);
font-size: var(--text-xs);
}
.axe-pattern-ops__snapshot-row span {
color: var(--text-tertiary);
}
.axe-pattern-ops__snapshot-row strong {
color: var(--text-primary);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-pattern-ops__footer {
min-height: 44px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding-inline: var(--space-5);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-pattern-landing__trust {
min-height: 76px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-6);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-size: var(--text-xs);
}
.axe-pattern-landing__trust > span {
font-family: var(--font-mono);
}
.axe-pattern-landing__trust ul {
list-style: none;
margin: 0;
padding: 0;
display: flex;
align-items: center;
gap: clamp(var(--space-4), 4vw, var(--space-8));
}
.axe-pattern-landing__trust li {
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
}
.axe-pattern-landing__loop,
.axe-pattern-landing__systems,
.axe-pattern-landing__cta {
scroll-margin-top: 72px;
padding-block: clamp(5rem, 9vw, 8rem);
}
.axe-pattern-landing__loop {
border-block: 1px solid var(--border-subtle);
background: var(--bg-subtle);
}
.axe-pattern-landing__section-header {
max-width: 48rem;
}
.axe-pattern-landing__section-header > span,
.axe-pattern-landing__cta-inner > div > span {
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.axe-pattern-landing__section-header h2,
.axe-pattern-landing__governance-inner h2,
.axe-pattern-landing__cta-inner h2 {
margin: var(--space-3) 0 0;
color: var(--text-primary);
font-size: clamp(2rem, 4vw, 3.55rem);
font-weight: var(--weight-medium);
line-height: 1.08;
letter-spacing: -0.04em;
text-wrap: balance;
}
.axe-pattern-landing__section-header p,
.axe-pattern-landing__governance-inner p {
max-width: 42rem;
margin: var(--space-4) 0 0;
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.7;
}
.axe-pattern-landing__loop-grid {
list-style: none;
margin: clamp(var(--space-7), 6vw, var(--space-10)) 0 0;
padding: 0;
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
border-top: 1px solid var(--border-default);
}
.axe-pattern-landing__loop-grid li {
position: relative;
min-width: 0;
padding: var(--space-5) var(--space-5) 0 0;
}
.axe-pattern-landing__loop-grid li:not(:last-child) {
border-right: 1px solid var(--border-subtle);
}
.axe-pattern-landing__loop-grid li:not(:first-child) {
padding-left: var(--space-5);
}
.axe-pattern-landing__loop-grid li > span {
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-pattern-landing__loop-grid strong {
display: block;
margin-top: var(--space-5);
color: var(--text-primary);
font-size: var(--text-xl);
font-weight: var(--weight-semibold);
}
.axe-pattern-landing__loop-grid p {
margin: var(--space-3) 0 0;
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.65;
}
.axe-pattern-landing__domain-grid {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--space-4);
margin-top: clamp(var(--space-7), 6vw, var(--space-10));
}
.axe-pattern-landing__domain-card {
min-width: 0;
min-height: 20rem;
display: flex;
flex-direction: column;
padding: clamp(var(--space-5), 3vw, var(--space-7));
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl);
background: var(--bg-elevated);
box-shadow: var(--shadow-xs);
}
.axe-pattern-landing__domain-topline {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
color: var(--accent);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.06em;
}
.axe-pattern-landing__domain-card h3 {
margin: auto 0 0;
padding-top: var(--space-8);
color: var(--text-primary);
font-size: clamp(var(--text-xl), 2vw, var(--text-2xl));
font-weight: var(--weight-medium);
line-height: 1.2;
letter-spacing: -0.025em;
}
.axe-pattern-landing__domain-card p {
margin: var(--space-3) 0 0;
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.65;
}
.axe-pattern-landing__domain-metric {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-6);
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-pattern-landing__domain-metric > span {
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--accent);
}
.axe-pattern-landing__domain-metric[data-state="success"] {
color: var(--success);
}
.axe-pattern-landing__domain-metric[data-state="success"] > span {
background: var(--success);
}
.axe-pattern-landing__governance {
scroll-margin-top: 72px;
padding: clamp(4.5rem, 8vw, 7rem) clamp(1.25rem, 5vw, 4rem);
}
.axe-pattern-landing__governance-inner {
width: min(100%, 76rem);
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1.1fr) minmax(18rem, 0.9fr);
align-items: end;
gap: clamp(var(--space-8), 8vw, 8rem);
padding: clamp(var(--space-6), 5vw, var(--space-10));
border-radius: 1.5rem;
background: var(--gray-12);
color: var(--gray-1);
}
.axe-pattern-landing__governance-kicker {
color: var(--gray-8);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.axe-pattern-landing__governance-inner h2 {
color: var(--gray-1);
}
.axe-pattern-landing__governance-inner p {
color: var(--gray-8);
}
.axe-pattern-landing__governance-list {
margin: 0;
}
.axe-pattern-landing__governance-list > div {
display: grid;
grid-template-columns: 5.5rem minmax(0, 1fr);
gap: var(--space-4);
padding-block: var(--space-4);
border-bottom: 1px solid color-mix(in srgb, var(--gray-1) 18%, transparent);
}
.axe-pattern-landing__governance-list dt {
color: var(--gray-8);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-pattern-landing__governance-list dd {
margin: 0;
color: var(--gray-1);
font-size: var(--text-sm);
}
.axe-pattern-landing__cta {
padding-top: clamp(3rem, 6vw, 5rem);
}
.axe-pattern-landing__cta-inner {
min-height: 14rem;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-8);
padding-block: var(--space-7);
border-top: 1px solid var(--border-default);
}
.axe-pattern-landing__cta-inner h2 {
max-width: 18ch;
font-size: clamp(1.8rem, 3.4vw, 3rem);
}
.axe-pattern-landing__cta-inner .axe-btn a,
.axe-pattern-landing__cta-inner .axe-btn {
gap: var(--space-2);
}
.axe-pattern-landing__footer {
width: min(calc(100% - clamp(2.5rem, 7vw, 6rem)), 76rem);
min-height: 84px;
margin-inline: auto;
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--space-5);
border-top: 1px solid var(--border-subtle);
color: var(--text-tertiary);
font-size: var(--text-xs);
}
.axe-pattern-landing__footer .axe-logo {
font-family: var(--font-sans);
}
.axe-pattern-landing__footer > span {
font-family: var(--font-mono);
}
.axe-pattern-landing__footer nav {
justify-self: end;
display: flex;
gap: var(--space-5);
}
.axe-pattern-landing__footer nav a {
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--text-secondary);
text-decoration: none;
}
.axe-pattern-landing__footer nav a:hover {
color: var(--text-primary);
}
.axe-pattern-landing__footer nav a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Authentication pattern ----------------------------------------------- */
.axe-pattern-auth {
min-height: 100vh;
min-height: 100dvh;
display: grid;
grid-template-columns: minmax(20rem, 1fr) minmax(28rem, 1fr);
background: var(--bg-base);
color: var(--text-primary);
}
.axe-pattern-auth.axe-pattern-auth--centered {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.axe-pattern-auth__topbar {
min-height: 64px;
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
padding-inline: max(var(--space-5), calc((100% - 76rem) / 2));
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-base);
}
.axe-pattern-auth__topbar .axe-logo {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
}
.axe-pattern-auth__topbar a:last-child {
min-height: 44px;
display: inline-flex;
align-items: center;
color: var(--text-secondary);
font-size: var(--text-sm);
text-decoration: none;
}
.axe-pattern-auth__topbar a:last-child:hover {
color: var(--text-primary);
}
.axe-pattern-auth__topbar a:last-child:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.axe-pattern-auth--centered .axe-pattern-auth__stage {
min-height: 0;
justify-content: flex-start;
background: var(--bg-subtle);
}
.axe-pattern-auth--centered .axe-pattern-auth__card {
width: min(100%, 28rem);
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
}
.axe-pattern-auth--centered .axe-pattern-auth__card-header {
margin: 0 0 var(--space-6);
text-align: center;
}
.axe-pattern-auth--centered .axe-pattern-auth__card-header h1 {
font-size: 1.5rem;
line-height: 1.3;
letter-spacing: -0.025em;
}
.axe-pattern-auth--centered .axe-pattern-auth__card-header p {
max-width: 34rem;
margin-inline: auto;
}
.axe-pattern-auth--centered .axe-pattern-auth__support {
width: min(100%, 28rem);
}
.axe-pattern-auth__context {
min-width: 0;
min-height: 43rem;
display: flex;
flex-direction: column;
padding: clamp(2rem, 5vw, 5rem);
border-right: 1px solid var(--border-subtle);
background: var(--bg-subtle);
}
.axe-pattern-auth__context-top {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-4);
}
.axe-pattern-auth__context-top .axe-logo,
.axe-pattern-auth__card-brand .axe-logo {
font-family: var(--font-sans);
font-weight: var(--weight-semibold);
}
.axe-pattern-auth__context-top > span,
.axe-pattern-auth__card-brand > span {
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-pattern-auth__context-copy {
max-width: 36rem;
margin-block: auto;
padding-block: var(--space-9);
}
.axe-pattern-auth__context-kicker {
color: var(--brand-claret);
font-family: var(--font-mono);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: 0.08em;
}
.axe-pattern-auth__context-title {
margin: var(--space-4) 0 0;
color: var(--text-primary);
font-size: clamp(2.35rem, 4.7vw, 4.25rem);
font-weight: var(--weight-medium);
line-height: 1.05;
letter-spacing: -0.045em;
text-wrap: balance;
}
.axe-pattern-auth__context-copy > p:last-child {
max-width: 34rem;
margin: var(--space-5) 0 0;
color: var(--text-secondary);
font-size: var(--text-base);
line-height: 1.72;
}
.axe-pattern-auth__trust-list {
list-style: none;
margin: 0;
padding: 0;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
border-top: 1px solid var(--border-default);
}
.axe-pattern-auth__trust-list li {
min-width: 0;
padding: var(--space-4) var(--space-4) 0 0;
color: var(--text-tertiary);
font-size: var(--text-xs);
line-height: 1.55;
}
.axe-pattern-auth__trust-list li:not(:last-child) {
border-right: 1px solid var(--border-subtle);
}
.axe-pattern-auth__trust-list li:not(:first-child) {
padding-left: var(--space-4);
}
.axe-pattern-auth__trust-list svg,
.axe-pattern-auth__trust-index {
display: block;
margin-bottom: var(--space-3);
color: var(--accent);
}
.axe-pattern-auth__trust-index {
font-family: var(--font-mono);
}
.axe-pattern-auth__trust-list strong {
display: block;
margin-bottom: 3px;
color: var(--text-primary);
font-size: var(--text-xs);
}
.axe-pattern-auth__context-foot {
display: flex;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-7);
color: var(--success);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-pattern-auth__context-foot > span {
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--success);
}
.axe-pattern-auth__stage {
min-width: 0;
min-height: 43rem;
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: clamp(var(--space-6), 5vw, var(--space-10));
background: var(--bg-base);
}
.axe-pattern-auth__card {
width: min(100%, 27rem);
padding: clamp(var(--space-6), 4vw, var(--space-8));
border: 1px solid var(--border-default);
border-radius: 1.25rem;
background: var(--bg-elevated);
box-shadow: var(--shadow-lg);
}
.axe-pattern-auth__card-brand {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
}
.axe-pattern-auth__card-header {
margin-block: var(--space-7) var(--space-6);
}
.axe-pattern-auth__card-header h1 {
margin: 0;
color: var(--text-primary);
font-size: clamp(1.9rem, 4vw, 2.5rem);
font-weight: var(--weight-medium);
line-height: 1.1;
letter-spacing: -0.035em;
}
.axe-pattern-auth__card-header p {
margin: var(--space-3) 0 0;
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.65;
}
.axe-pattern-auth__provider,
.axe-pattern-auth__email-action {
width: 100%;
}
.axe-pattern-auth__provider {
justify-content: center;
}
.axe-pattern-auth__divider {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--space-3);
margin-block: var(--space-5);
color: var(--text-tertiary);
font-size: var(--text-xs);
}
.axe-pattern-auth__divider::before,
.axe-pattern-auth__divider::after {
content: "";
height: 1px;
background: var(--border-subtle);
}
.axe-pattern-auth__form {
display: flex;
flex-direction: column;
gap: var(--space-4);
border-radius: var(--radius-md);
}
.axe-pattern-auth__form:focus {
outline: 2px solid var(--accent);
outline-offset: 4px;
}
.axe-pattern-auth__card .axe-status-banner {
margin-top: var(--space-5);
}
.axe-pattern-auth__privacy {
margin: var(--space-5) 0 0;
color: var(--text-tertiary);
font-size: var(--text-xs);
line-height: 1.6;
text-align: center;
}
.axe-pattern-auth__privacy a,
.axe-pattern-auth__support a {
color: var(--text-secondary);
text-underline-offset: 3px;
}
.axe-pattern-auth__privacy a:hover,
.axe-pattern-auth__support a:hover {
color: var(--text-primary);
}
.axe-pattern-auth__privacy a:focus-visible,
.axe-pattern-auth__support a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.axe-pattern-auth__support {
width: min(100%, 27rem);
display: flex;
justify-content: center;
gap: var(--space-2);
margin-top: var(--space-5);
color: var(--text-tertiary);
font-size: var(--text-xs);
}
@media (min-width: 900px) {
.axe-pattern-landing__hero {
grid-template-columns: minmax(0, 1.03fr) minmax(25rem, 0.97fr);
}
}
@media (max-width: 1023.98px) {
.axe-pattern-auth {
grid-template-columns: minmax(17rem, 0.8fr) minmax(27rem, 1.2fr);
}
.axe-pattern-auth__trust-list {
grid-template-columns: minmax(0, 1fr);
}
.axe-pattern-auth__trust-list li {
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: var(--space-3);
padding: var(--space-3) 0;
border-right: 0 !important;
border-bottom: 1px solid var(--border-subtle);
}
.axe-pattern-auth__trust-list li:not(:first-child) {
padding-left: 0;
}
.axe-pattern-auth__trust-list svg,
.axe-pattern-auth__trust-index {
margin: 0;
}
.axe-pattern-landing__domain-grid {
grid-template-columns: minmax(0, 1fr);
}
.axe-pattern-landing__domain-card {
min-height: 15rem;
}
}
@media (max-width: 899.98px) {
.axe-pattern-ops {
width: 100%;
}
.axe-pattern-landing__loop-grid {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.axe-pattern-landing__loop-grid li:nth-child(2) {
border-right: 0;
}
.axe-pattern-landing__loop-grid li:nth-child(n + 3) {
border-top: 1px solid var(--border-subtle);
}
.axe-pattern-landing__governance-inner {
grid-template-columns: minmax(0, 1fr);
align-items: start;
}
.axe-pattern-landing__cta-inner {
align-items: flex-start;
flex-direction: column;
}
.axe-pattern-landing__footer {
grid-template-columns: minmax(0, 1fr) auto;
}
.axe-pattern-landing__footer > span {
display: none;
}
}
@media (max-width: 799.98px) {
.axe-pattern-auth {
min-height: 100vh;
min-height: 100dvh;
display: block;
}
.axe-pattern-auth__context {
min-height: auto;
display: block;
padding: var(--space-5) clamp(var(--space-5), 6vw, var(--space-7));
border-right: 0;
border-bottom: 1px solid var(--border-subtle);
}
.axe-pattern-auth__context-top > span {
display: none;
}
.axe-pattern-auth__context-copy {
margin: var(--space-7) 0 0;
padding: 0;
}
.axe-pattern-auth__context-title {
max-width: 18ch;
font-size: clamp(1.75rem, 8vw, 2.5rem);
}
.axe-pattern-auth__context-copy > p:last-child {
margin-top: var(--space-3);
font-size: var(--text-sm);
}
.axe-pattern-auth__trust-list,
.axe-pattern-auth__context-foot {
display: none;
}
.axe-pattern-auth__stage {
min-height: auto;
padding: clamp(var(--space-7), 8vw, var(--space-10)) clamp(var(--space-5), 6vw, var(--space-7));
}
.axe-pattern-auth__card {
border-radius: var(--radius-lg);
}
}
@media (max-width: 767.98px) {
.axe-pattern-landing__nav {
min-height: 56px;
padding-inline: var(--space-3);
}
.axe-pattern-landing__nav-actions {
width: 100%;
align-items: stretch;
flex-direction: column;
}
.axe-pattern-landing__nav-actions .axe-btn {
width: 100%;
min-height: 44px;
}
.axe-pattern-landing__nav > .axe-pattern-landing__nav-actions {
width: auto;
grid-column: 3;
justify-self: end;
flex-direction: row;
}
.axe-pattern-landing__nav > .axe-pattern-landing__nav-actions .axe-btn {
width: auto;
}
.axe-pattern-container,
.axe-pattern-landing__footer {
width: min(calc(100% - 2.5rem), 76rem);
}
.axe-pattern-landing__hero {
min-height: auto;
padding-block: clamp(3.75rem, 15vw, 6rem);
}
.axe-pattern-landing__hero .axe-hero__title {
font-size: clamp(2.35rem, 11vw, 3.45rem);
}
.axe-pattern-landing__hero .axe-hero__subtitle {
font-size: var(--text-base);
}
.axe-pattern-ops__body {
grid-template-columns: minmax(0, 1fr);
}
.axe-pattern-ops__plan {
border-right: 0;
border-bottom: 1px solid var(--border-subtle);
}
.axe-pattern-landing__trust {
min-height: 96px;
align-items: flex-start;
flex-direction: column;
justify-content: center;
gap: var(--space-3);
}
.axe-pattern-landing__trust ul {
width: 100%;
justify-content: space-between;
gap: var(--space-2);
}
.axe-pattern-landing__trust li {
font-size: var(--text-xs);
}
.axe-pattern-landing__loop-grid {
grid-template-columns: minmax(0, 1fr);
}
.axe-pattern-landing__loop-grid li,
.axe-pattern-landing__loop-grid li:not(:first-child) {
padding: var(--space-5) 0;
border-top: 1px solid var(--border-subtle);
border-right: 0;
}
.axe-pattern-landing__loop-grid li:first-child {
border-top: 0;
}
.axe-pattern-landing__loop-grid strong {
margin-top: var(--space-3);
}
.axe-pattern-landing__governance {
padding-inline: var(--space-3);
}
.axe-pattern-landing__governance-inner {
border-radius: var(--radius-xl);
}
.axe-pattern-landing__governance-list > div {
grid-template-columns: minmax(0, 1fr);
gap: var(--space-2);
}
.axe-pattern-landing__cta-inner .axe-btn {
width: 100%;
}
.axe-pattern-landing__footer nav {
gap: var(--space-3);
}
}
@media (max-width: 479.98px) {
.axe-pattern-landing__hero .axe-hero__actions {
align-items: stretch;
flex-direction: column;
}
.axe-pattern-landing__hero .axe-hero__actions .axe-btn {
width: 100%;
}
.axe-pattern-ops__header,
.axe-pattern-ops__footer {
align-items: flex-start;
flex-direction: column;
justify-content: center;
}
.axe-pattern-ops__footer {
padding-block: var(--space-3);
}
.axe-pattern-landing__trust ul {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.axe-pattern-landing__footer {
min-height: 112px;
align-items: start;
grid-template-columns: minmax(0, 1fr);
padding-block: var(--space-5);
}
.axe-pattern-landing__footer nav {
justify-self: start;
}
.axe-pattern-auth__stage {
padding-inline: var(--space-4);
}
.axe-pattern-auth__topbar {
min-height: 56px;
padding-inline: var(--space-4);
}
.axe-pattern-auth__context {
padding: var(--space-4);
}
.axe-pattern-auth__context-copy {
margin-top: var(--space-4);
}
.axe-pattern-auth__context-title {
margin-top: var(--space-2);
font-size: 1.5rem;
}
.axe-pattern-auth__context-copy > p:last-child {
display: none;
}
.axe-pattern-auth__card {
padding: var(--space-5);
border-inline: 0;
border-radius: 0;
box-shadow: none;
}
.axe-pattern-auth__support {
align-items: center;
flex-direction: column;
}
}
@media (prefers-reduced-motion: reduce) {
.axe-pattern-skip-link,
.axe-pattern-landing *,
.axe-pattern-auth * {
scroll-behavior: auto !important;
animation-duration: 0.01ms !important;
animation-iteration-count: 1 !important;
transition-duration: 0.01ms !important;
}
}
@media (forced-colors: active) {
.axe-pattern-ops__live-status > span,
.axe-pattern-landing__domain-metric > span,
.axe-pattern-auth__context-foot > span {
border: 1px solid currentColor;
}
.axe-pattern-ops,
.axe-pattern-landing__domain-card,
.axe-pattern-auth__card,
.axe-pattern-landing__governance-inner {
border: 1px solid CanvasText;
}
}
/* source: styles/gate-app-patterns.css */
/*
* Gate application pattern
* --------------------------------------------------------------------------
* Canonical visual contract for Gate's authenticated application, workflow,
* document, signer, and legacy single-card surfaces.
*
* Gate owns policy, data, routes, and copy. design.axelabs.ai owns every
* selector below and ships it through the full Consumer Kit bundle. The root
* class keeps Gate's compact server-rendered vocabulary from leaking into
* other @axe/ui consumers.
*/
.axe-pattern-gate-app {
margin: 0;
background: var(--bg-base);
color: var(--text-primary);
font-family: var(
--font-sans,
"Pretendard Variable",
Pretendard,
-apple-system,
"Apple SD Gothic Neo",
"Malgun Gothic",
sans-serif
);
font-size: var(--text-base);
line-height: var(--leading-body);
-webkit-font-smoothing: antialiased;
}
/* 클래스 없는 `` 의 바닥값 — Gate 의 서버렌더 표면에는 어휘를 안 받은 앵커가
* 많고, 이 세 규칙이 그것들에 색·hover 밑줄·포커스 링을 준다.
*
* **명시 재료는 여기서 빠진다.** `:not()` 목록이 그 명단이다: `.axe-btn` 과
* `.axe-link`(0.38.7 신설) 는 자기 시각을 스스로 싣는 재료라, 이 포괄 규칙이
* 같이 잡으면 재료와 바닥값이 같은 앵커를 두고 겹친다. `:where()` 가 특정도를
* 0 으로 눕혀 두어 지금은 재료가 **나중에 오기 때문에** 이기지만, 그 승리는
* 번들 파일 순서에 달린 것이지 규칙이 말한 것이 아니다 — 명단에서 빼면 애초에
* 겹치지 않는다. **새 앵커 재료를 킷에 들이면 이 명단에 같이 올릴 것.** */
.axe-pattern-gate-app :where(main, nav.top) :where(a:not(.axe-btn, .axe-link)) {
color: var(--accent);
text-decoration: none;
}
.axe-pattern-gate-app :where(main, nav.top) :where(a:not(.axe-btn, .axe-link):hover) {
text-decoration: underline;
text-underline-offset: 3px;
}
.axe-pattern-gate-app :where(main, nav.top) :where(a:not(.axe-btn, .axe-link):focus-visible) {
border-radius: 2px;
outline: 2px solid var(--accent);
outline-offset: 2px;
}
/* Application chrome --------------------------------------------------- */
.axe-pattern-gate-app nav.top {
position: sticky;
z-index: var(--z-sticky);
top: 0;
display: flex;
height: 56px;
align-items: center;
gap: var(--space-5);
padding: 0 var(--space-5);
border-bottom: 1px solid var(--border-subtle);
background: var(--bg-elevated);
color: var(--text-primary);
}
.axe-pattern-gate-app nav.top .brand {
display: flex;
flex: none;
align-items: center;
gap: var(--space-2);
color: var(--text-primary);
font-size: var(--text-lg);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-heading);
}
.axe-pattern-gate-app nav.top .brand:hover {
text-decoration: none;
}
.axe-pattern-gate-app nav.top .brand .mark {
display: inline-flex;
width: 26px;
height: 26px;
flex: none;
align-items: center;
justify-content: center;
border-radius: var(--radius-md);
background: var(--accent);
color: var(--accent-fg);
font-size: 13px;
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app .nav-menu {
display: flex;
min-width: 0;
flex: 1;
align-items: center;
gap: var(--space-1);
}
.axe-pattern-gate-app .nav-menu-scroll {
display: flex;
min-width: 0;
align-items: center;
gap: var(--space-1);
overflow-x: auto;
}
.axe-pattern-gate-app .nav-menu a {
padding: 6px var(--space-3);
border-radius: var(--radius-md);
color: var(--text-secondary);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
white-space: nowrap;
}
.axe-pattern-gate-app .nav-menu a:hover {
background: var(--bg-subtle);
color: var(--text-primary);
text-decoration: none;
}
.axe-pattern-gate-app .nav-menu a.active {
background: var(--accent-soft);
color: var(--accent);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app nav.top .right {
display: flex;
flex: none;
align-items: center;
gap: var(--space-3);
font-size: var(--text-sm);
}
.axe-pattern-gate-app .userchip {
display: inline-flex;
align-items: center;
gap: var(--space-2);
padding: 4px 12px 4px 5px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-full);
background: var(--bg-subtle);
color: var(--text-secondary);
font-size: var(--text-xs);
}
.axe-pattern-gate-app .userchip .avatar {
display: inline-flex;
width: 22px;
height: 22px;
flex: none;
align-items: center;
justify-content: center;
border-radius: var(--radius-full);
background: var(--accent);
color: var(--accent-fg);
font-size: 11px;
font-weight: var(--weight-bold);
text-transform: uppercase;
}
.axe-pattern-gate-app nav.top form {
margin: 0;
}
/* Page frame ----------------------------------------------------------- */
.axe-pattern-gate-app .container {
max-width: 1040px;
margin: 0 auto;
padding: var(--space-6) var(--space-5) var(--space-8);
}
.axe-pattern-gate-app .container.narrow {
max-width: 880px;
}
.axe-pattern-gate-app .pagehead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--space-4);
flex-wrap: wrap;
}
.axe-pattern-gate-app .pagehead > .axe-btn {
flex: none;
}
.axe-pattern-gate-app :where(h1) {
margin: 0 0 var(--space-2);
font-size: var(--text-2xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-heading);
line-height: var(--leading-heading);
}
.axe-pattern-gate-app :where(h2) {
display: flex;
align-items: center;
gap: var(--space-3);
margin: var(--space-6) 0 var(--space-3);
color: var(--text-tertiary);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-widest);
text-transform: uppercase;
}
.axe-pattern-gate-app :where(h2)::after {
width: auto;
height: 1px;
flex: 1;
background: var(--border-subtle);
content: "";
}
.axe-pattern-gate-app :where(h3) {
margin: 0 0 var(--space-2);
font-size: var(--text-base);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app p.sub {
margin: 0 0 var(--space-5);
color: var(--text-secondary);
font-size: var(--text-sm);
}
.axe-pattern-gate-app .meta {
color: var(--text-secondary);
font-size: var(--text-xs);
}
.axe-pattern-gate-app code.mono {
padding: 1px 5px;
border-radius: var(--radius-sm);
background: var(--bg-subtle);
font-family: var(--font-mono);
font-size: 12px;
word-break: break-all;
}
.axe-pattern-gate-app .footer {
display: flex;
gap: var(--space-2);
margin-top: var(--space-8);
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
color: var(--text-muted);
font-size: var(--text-xs);
}
/* Cards, metrics, actions --------------------------------------------- */
.axe-pattern-gate-app .card {
margin-bottom: var(--space-4);
padding: var(--space-5);
/* The shell content column is `display:flex`, so a card is a flex item and shrinks by
default. Combined with the overflow below (setting one axis forces the other to `auto`),
a tall card collapsed to ~50px and clipped its own content — the 결재 처리 card rendered
its 승인/반려/보류 buttons past the end of the document, unreachable by scrolling.
Cards must keep their content height; only horizontal overflow may scroll. */
flex-shrink: 0;
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
box-shadow: var(--shadow-sm);
}
.axe-pattern-gate-app .gate-spaced-card {
margin-top: var(--space-4);
}
.axe-pattern-gate-app .gate-workflow-progress {
padding: 14px 22px 10px;
}
.axe-pattern-gate-app .grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
gap: var(--space-3);
}
.axe-pattern-gate-app .stat {
position: relative;
display: flex;
padding: var(--space-4) var(--space-5);
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
box-shadow: var(--shadow-sm);
flex-direction: column;
}
.axe-pattern-gate-app .stat::before {
position: absolute;
top: 0;
bottom: 0;
left: 0;
width: 3px;
background: var(--accent);
content: "";
}
.axe-pattern-gate-app .stat dt,
.axe-pattern-gate-app .stat dd {
margin: 0;
}
.axe-pattern-gate-app .stat .n {
order: -1;
font-size: var(--text-3xl);
font-weight: var(--weight-bold);
line-height: 1.15;
}
.axe-pattern-gate-app .stat .l {
margin-top: 4px;
color: var(--text-secondary);
font-size: var(--text-xs);
}
.axe-pattern-gate-app .gate-dashboard-status {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
flex: none;
margin: var(--space-3) 0 0;
overflow: hidden;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-subtle);
}
.axe-pattern-gate-app .gate-dashboard-status > div {
display: flex;
min-width: 0;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
padding: 10px var(--space-4);
}
.axe-pattern-gate-app .gate-dashboard-status > div + div {
border-left: 1px solid var(--border-subtle);
}
.axe-pattern-gate-app .gate-dashboard-status dt,
.axe-pattern-gate-app .gate-dashboard-status dd {
margin: 0;
}
.axe-pattern-gate-app .gate-dashboard-status dt {
color: var(--text-secondary);
font-size: var(--text-xs);
}
.axe-pattern-gate-app .gate-dashboard-status dd {
color: var(--text-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
white-space: nowrap;
}
.axe-pattern-gate-app .actions,
.axe-pattern-gate-app .actbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-top: var(--space-3);
}
.axe-pattern-gate-app .actions {
margin-bottom: var(--space-3);
}
/* 문서를 끝까지 읽은 결재자가 맨 위로 스크롤백하지 않고 결재할 수 있도록 뷰포트 하단에
붙는다. 자연 위치는 콘텐츠 맨 끝이라 바닥까지 스크롤하면 sticky 가 풀려 제자리에 앉고,
셸 콘텐츠의 하단 padding 이 마지막 카드와의 여백을 준다. `flex-shrink: 0` 은 .card 와
같은 이유 — 셸 콘텐츠 열이 flex 라 눌려 사라지면 결재 수단 자체가 사라진다. */
.axe-pattern-gate-app .gate-actbar-sticky {
position: sticky;
z-index: var(--z-sticky);
bottom: 0;
display: flex;
flex-wrap: wrap;
flex-shrink: 0;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-top: var(--space-6);
padding: var(--space-3) var(--space-4);
border: 1px solid var(--border-default);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
box-shadow: var(--shadow-lg);
}
.axe-pattern-gate-app .gate-actbar-sticky__label {
color: var(--text-secondary);
font-size: var(--text-sm);
}
.axe-pattern-gate-app .gate-actbar-sticky__actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.axe-pattern-gate-app .gate-primary-actions {
margin-top: var(--space-5);
}
.axe-pattern-gate-app .gate-onboarding {
margin-top: var(--space-4);
}
.axe-pattern-gate-app .gate-onboarding .grid {
margin-top: var(--space-3);
}
.axe-pattern-gate-app .gate-onboarding .stat p {
margin: var(--space-2) 0 var(--space-3);
}
/* Page sub-navigation --------------------------------------------------
* The rail owns global movement; this strip owns the sections *inside* one
* work area. Splitting them keeps a single truthful "you are here" marker.
* The strip scrolls horizontally instead of hiding or wrapping items, so a
* narrow viewport never removes a destination from reach.
*/
.axe-pattern-gate-app .gate-subnav {
display: flex;
gap: var(--space-1);
margin: 0 0 var(--space-4);
overflow-x: auto;
border-bottom: 1px solid var(--border-subtle);
scrollbar-width: thin;
}
.axe-pattern-gate-app .gate-subnav a {
min-height: 40px;
display: inline-flex;
flex: 0 0 auto;
align-items: center;
padding-inline: var(--space-3);
border-bottom: 2px solid transparent;
color: var(--text-secondary);
font-size: var(--text-sm);
text-decoration: none;
white-space: nowrap;
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
.axe-pattern-gate-app .gate-subnav a:hover {
color: var(--text-primary);
}
/* `aria-current` is the state itself, so the style cannot drift from the
announced state the way a parallel class can. */
.axe-pattern-gate-app .gate-subnav a[aria-current="page"] {
border-bottom-color: var(--accent);
color: var(--text-primary);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app .gate-subnav a:focus-visible {
outline: 2px solid var(--accent);
outline-offset: -2px;
}
/* Rail AI chat ---------------------------------------------------------
* `.gate-ai-chat` 는 executor 와 **같은 요소**에 붙는다
* (`class="axe-agent-executor gate-ai-chat"`) — 래퍼가 아니다. 아래 자식 규칙이
* `>` 로 executor 의 직계 슬롯을 잡기 때문에 이 배치가 계약의 일부다.
*
* `.axe-agent-executor` 는 `height: 100%` + `__scroll { flex: 1 1 auto;
* min-height: 0; overflow-y: auto }` 로 **부모가 확정 높이를 준다**는 전제로 설계된
* 컴포넌트인데, 컨텍스트 rail 에는 그 확정 높이를 주는 고리가 없었다.
* `.axe-workspace-context` 는 `min-height: 100%` 라 내용이 길면 그대로 자라고, 탭 패널
* `__body` 의 높이도 auto 로 해소된다 — `__scroll` 이 스크롤을 시작하지 못한 채 내용만큼
* 자라 입력창을 rail 밖으로 밀어낸다.
*
* 0.23.3 은 이걸 `.gate-ai-chat` 에 절대 크기(`min(52vh, 30rem)`)를 줘서 막았지만, rail 이
* 짧아지면 그 크기가 남은 공간보다 커져 같은 증상이 돌아온다 — 실측(2026-08-04, gate
* headless Chrome) 1366x768 · 1280x800 · 1024x768 세 뷰포트에서 입력창 bottom 이 rail
* bottom 을 각각 53 · 36 · 53px 초과했다. 그래서 절대 크기를 버리고 **남은 높이를 채우는**
* flex 사슬로 바꾼다: rail 을 확정 높이로 고정하고, 채팅이 그 잔여를 받고, 컴포저는
* 불가침(`flex: 0 0 auto`)으로 둔다. 같은 실측에서 1440x1080 · 1440x900 · 1366x768 ·
* 1280x800 · 1024x768 다섯 뷰포트 모두 30턴을 쌓아도 입력창이 rail 안에 남는다.
*
* **1024x640 은 CSS 로 해결 불가**(같은 실측의 유일한 미해결). rail 441px 인데 고정
* 크롬(헤더 105 + 탭 45 + 푸터 48) + 요약 60 + 고지 86 + 컴포저 151 = 495px 라 채팅 영역이
* 0 이어도 54px 모자란다. 남은 수단은 배분이 아니라 제품 결정(rail 채팅 접기 또는 헤더
* 축소)이므로, 이 파일에서 더 짜낼 것이 없다는 사실로 남긴다.
*
* ## 0.33.1 — 사슬을 **슬롯 ③(`__dock`)으로 재앵커**
*
* 0.33.0 이 `ContextPanel@1` 3슬롯을 도입하면서 채팅이 탭 패널
* (`__body[data-gate-panel="ai"]`)에서 도크로 옮겨 갔는데, **확정 높이를 주던 고리는 옛
* 선택자에 남아 있었다.** 신설 `__dock` 은 `flex: 0 0 auto` 라 자식에게 높이를 확정해
* 주지 못하고, 그러면 `__scroll` 이 스크롤을 시작하지 못한 채 내용만큼 자란다 — 위 0.23.3
* 결함의 재발이되 규모가 다르다. 실측(2026-08-09, 헤드리스 Chrome 1440x900, 30턴):
*
* | 상태 | 컴포저 bottom − rail bottom | `__scroll` 스크롤 |
* |-------------------------------|-----------------------------|-------------------|
* | 0.32.0 탭 패널 (대조군) | **−164px** (안쪽) | 5634/248 → yes |
* | 0.33.0 + 도크 (재앵커 전) | **+5385px** (밖으로) | 5634/5634 → no |
*
* 그래서 사슬의 중간 고리를 `__dock` + 그 안의 이동 노드로 옮긴다. `[data-axe-dock-root]`
* 는 계약이 이름을 정한 셀렉터(`x-dom.dock.rootAttribute`)라 킷이 스타일할 수 있다 —
* 소비자가 그 노드에 자기 클래스를 만들면 그것이 디자인 SoT 위반이 된다.
*
* 스코프: 아래 `.axe-workspace-context*` 는 공용 클래스지만 전부 `.axe-pattern-gate-app`
* 루트 안이다 — 그 루트를 쓰지 않는 소비자(design · cortex · blueprint)의 계산 스타일
* 변화는 0. 그리고 오늘 도크를 서빙하는 소비자는 gate 하나뿐이다(`dock: served`).
*/
.axe-pattern-gate-app .axe-workspace-context {
height: 100%;
min-height: 0;
}
/* 슬롯 ③ 이 **남은 높이를 받는다.** 기본 규칙의 `flex: 0 0 auto` 는 "접힌 입력 한 줄" 을
전제한 값이라, transcript 가 사는 도크에서는 높이를 확정해 주지 못한다. */
.axe-pattern-gate-app .axe-workspace-context__dock {
min-height: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
/* 도크는 폭 전환·소프트 내비게이션을 넘어 **노드째 이동**하므로 호스트와 내용 사이에 이
노드가 하나 더 있다. 사슬이 여기서 끊기면 아래 `.gate-ai-chat` 의 `flex: 1 1 auto` 가
무의미해진다. */
.axe-pattern-gate-app .axe-workspace-context__dock > [data-axe-dock-root] {
min-height: 0;
display: flex;
flex: 1 1 auto;
flex-direction: column;
}
.axe-pattern-gate-app .gate-ai-chat {
height: auto;
min-height: 0;
flex: 1 1 auto;
}
.axe-pattern-gate-app .gate-ai-chat > .axe-agent-executor__scroll {
min-height: 0;
flex: 1 1 auto;
}
/* 칩 줄은 남은 높이를 놓고 transcript 와 경쟁하지 않는다 — 한 줄(2.25rem)까지 눌리고 그
아래로는 자기 안에서 스크롤한다. 이게 없으면 flex item 의 auto min-size 가 내용 높이라
칩이 늘수록 컴포저가 다시 밀려난다. */
.axe-pattern-gate-app .gate-ai-chat > .axe-agent-executor__tools {
min-height: 2.25rem;
flex: 0 1 auto;
overflow-y: auto;
}
.axe-pattern-gate-app .gate-ai-chat > .axe-agent-executor__input {
flex: 0 0 auto;
}
/* Product compositions -------------------------------------------------
* These classes own arrangement only. Controls, tables, timelines, empty
* states, and banners keep their canonical .axe-* primitive styling.
*/
.axe-pattern-gate-app .gate-resource-toolbar {
display: grid;
grid-template-columns: minmax(15rem, 1fr) auto auto auto;
align-items: end;
gap: var(--space-3);
margin-bottom: var(--space-4);
}
.axe-pattern-gate-app .gate-resource-toolbar > form[role="search"] {
min-width: 0;
}
.axe-pattern-gate-app .gate-resource-toolbar > [role="group"] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
}
.axe-pattern-gate-app .gate-resource-toolbar > output {
align-self: center;
color: var(--text-secondary);
font-size: var(--text-xs);
white-space: nowrap;
}
.axe-pattern-gate-app .gate-resource-toolbar > .actions {
justify-content: flex-end;
margin: 0;
}
.axe-pattern-gate-app .gate-detail-layout {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(15rem, 18rem);
align-items: start;
gap: var(--space-5);
}
.axe-pattern-gate-app .gate-detail-layout > :where(article, aside) {
min-width: 0;
}
.axe-pattern-gate-app .gate-detail-layout > aside {
position: sticky;
top: calc(var(--app-shell-topbar-h, 56px) + var(--space-5));
}
.axe-pattern-gate-app .gate-detail-layout > aside .kv {
grid-template-columns: 90px minmax(0, 1fr);
}
.axe-pattern-gate-app .gate-detail-layout > aside .kv dd {
overflow-wrap: anywhere;
}
.axe-pattern-gate-app .gate-form-layout {
display: grid;
gap: var(--space-5);
}
.axe-pattern-gate-app .gate-form-layout > fieldset {
min-width: 0;
margin: 0;
padding: var(--space-5);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
}
.axe-pattern-gate-app .gate-form-layout > fieldset > legend {
padding: 0 var(--space-2);
color: var(--text-primary);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app .gate-form-layout > fieldset > div {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--space-4);
}
.axe-pattern-gate-app .gate-copy-field {
display: grid;
gap: var(--space-2);
}
.axe-pattern-gate-app .gate-copy-field > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--space-2);
}
.axe-pattern-gate-app .gate-copy-field > p {
margin: 0;
color: var(--text-secondary);
font-size: var(--text-xs);
}
.axe-pattern-gate-app .gate-secret-reveal {
padding: var(--space-4);
border: 1px solid var(--warning);
border-radius: var(--radius-lg);
background: var(--warning-soft);
}
.axe-pattern-gate-app .gate-secret-reveal > summary {
color: var(--text-primary);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app .gate-secret-reveal[open] > summary {
margin-bottom: var(--space-3);
}
.axe-pattern-gate-app .gate-secret-reveal > p {
margin: 0 0 var(--space-3);
color: var(--text-secondary);
font-size: var(--text-sm);
}
.axe-pattern-gate-app .gate-task-shell {
min-height: calc(100vh - var(--app-shell-topbar-h, 56px));
min-height: calc(100dvh - var(--app-shell-topbar-h, 56px));
background: var(--bg-base);
}
.axe-pattern-gate-app .gate-task-shell__body {
width: min(100%, 68rem);
margin: 0 auto;
padding: var(--space-6) var(--space-5) calc(var(--space-8) + 76px);
}
.axe-pattern-gate-app .gate-task-shell__footer {
position: sticky;
z-index: var(--z-sticky);
bottom: 0;
border-top: 1px solid var(--border-subtle);
background: var(--bg-elevated);
box-shadow: var(--shadow-sm);
}
.axe-pattern-gate-app .gate-task-shell__footer > div {
display: flex;
width: min(100%, 68rem);
min-height: 64px;
align-items: center;
justify-content: flex-end;
gap: var(--space-2);
margin: 0 auto;
padding: var(--space-2) var(--space-5);
}
/* Dense tables, filters, dropdowns ------------------------------------ */
.axe-pattern-gate-app :where(table:not([class*="axe-"])) {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
}
.axe-pattern-gate-app :where(table:not([class*="axe-"])) :where(th, td) {
padding: 9px 12px;
border-bottom: 1px solid var(--border-subtle);
text-align: left;
vertical-align: middle;
}
.axe-pattern-gate-app :where(table:not([class*="axe-"])) :where(thead th) {
color: var(--text-tertiary);
font-size: 11px;
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
}
.axe-pattern-gate-app :where(table:not([class*="axe-"])) :where(tbody tr:last-child td) {
border-bottom: 0;
}
.axe-pattern-gate-app :where(table:not([class*="axe-"])) :where(tbody tr.is-interactive:hover) {
background: var(--bg-subtle);
}
.axe-pattern-gate-app .empty {
padding: var(--space-5) var(--space-2);
color: var(--text-secondary);
font-size: var(--text-sm);
text-align: center;
}
.axe-pattern-gate-app .empty::before {
display: block;
margin-bottom: 4px;
color: var(--text-muted);
content: "○";
font-size: 18px;
}
.axe-pattern-gate-app .tagbar {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0 0 var(--space-4);
}
.axe-pattern-gate-app .chip {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 4px 11px;
border-radius: var(--radius-full);
background: var(--bg-subtle);
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: 1.5;
text-decoration: none;
}
.axe-pattern-gate-app .chip:hover {
background: var(--info-soft);
color: var(--info);
}
.axe-pattern-gate-app .chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.axe-pattern-gate-app .chip.active {
background: var(--accent);
color: var(--accent-fg);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app .chip .cnt {
color: var(--text-muted);
font-size: var(--text-xs);
}
.axe-pattern-gate-app .chip.active .cnt {
color: inherit;
}
.axe-pattern-gate-app .chip.sm {
padding: 2px 9px;
font-size: var(--text-xs);
}
.axe-pattern-gate-app .tagcell {
display: flex;
flex-wrap: wrap;
gap: 4px;
}
.axe-pattern-gate-app .barlabel {
margin-right: 2px;
color: var(--text-muted);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app .navdrop {
position: relative;
display: inline-block;
flex: none;
}
.axe-pattern-gate-app .navdrop > summary {
padding: 6px 10px;
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-sm);
list-style: none;
}
.axe-pattern-gate-app .navdrop > summary::-webkit-details-marker {
display: none;
}
.axe-pattern-gate-app .navdrop > summary:hover {
background: var(--bg-subtle);
color: var(--text-primary);
}
.axe-pattern-gate-app .navdrop[open] > summary {
color: var(--text-primary);
}
.axe-pattern-gate-app .navdrop-menu {
position: absolute;
z-index: var(--z-overlay);
top: 100%;
left: 0;
display: flex;
min-width: 160px;
flex-direction: column;
margin-top: 4px;
padding: 4px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-elevated);
box-shadow: var(--shadow-md);
}
.axe-pattern-gate-app .navdrop-menu a {
padding: 7px 10px;
border-radius: var(--radius-sm);
color: var(--text-secondary);
font-size: var(--text-sm);
text-decoration: none;
white-space: nowrap;
}
.axe-pattern-gate-app .navdrop-menu a:hover {
background: var(--info-soft);
color: var(--info);
}
/* State badges and workflow ------------------------------------------- */
.axe-pattern-gate-app .badge {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 2px 10px;
border-radius: var(--radius-full);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
line-height: 1.6;
white-space: nowrap;
}
.axe-pattern-gate-app .badge::before {
width: 6px;
height: 6px;
border-radius: var(--radius-full);
background: currentColor;
content: "";
opacity: 0.7;
}
.axe-pattern-gate-app .badge.draft,
.axe-pattern-gate-app .badge.withdrawn,
.axe-pattern-gate-app .badge.pending {
background: var(--bg-subtle);
color: var(--text-secondary);
}
.axe-pattern-gate-app .badge.submitted,
.axe-pattern-gate-app .badge.in_review {
background: var(--info-soft);
color: var(--info);
}
.axe-pattern-gate-app .badge.approved,
.axe-pattern-gate-app .badge.done,
.axe-pattern-gate-app .badge.ok {
background: var(--success-soft);
color: var(--success);
}
.axe-pattern-gate-app .badge.rejected,
.axe-pattern-gate-app .badge.bad {
background: var(--danger-soft);
color: var(--danger);
}
.axe-pattern-gate-app .badge.held {
background: var(--warning-soft);
color: var(--warning);
}
.axe-pattern-gate-app .badge.executing {
background: var(--accent-soft);
color: var(--accent);
}
.axe-pattern-gate-app .steps {
display: flex;
align-items: flex-start;
margin: var(--space-4) 0 var(--space-1);
}
.axe-pattern-gate-app .step {
position: relative;
min-width: 0;
flex: 1;
text-align: center;
}
.axe-pattern-gate-app .step .dot {
position: relative;
z-index: 2;
display: flex;
width: 26px;
height: 26px;
align-items: center;
justify-content: center;
margin: 0 auto;
border: 2px solid var(--border-subtle);
border-radius: var(--radius-full);
background: var(--bg-elevated);
color: var(--text-muted);
font-size: 12px;
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app .step .lbl {
margin-top: 6px;
color: var(--text-secondary);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
}
.axe-pattern-gate-app .step:not(:first-child)::before {
position: absolute;
z-index: 1;
top: 13px;
right: calc(50% + 13px);
left: calc(-50% + 13px);
height: 2px;
background: var(--border-subtle);
content: "";
}
.axe-pattern-gate-app .step.done .dot {
border-color: var(--success);
background: var(--success);
color: var(--text-inverse);
}
.axe-pattern-gate-app .step.done .lbl {
color: var(--success);
}
.axe-pattern-gate-app .step.done:not(:first-child)::before,
.axe-pattern-gate-app .step.current:not(:first-child)::before {
background: var(--success);
}
.axe-pattern-gate-app .step.current .dot {
border-color: var(--accent);
background: var(--accent);
box-shadow: 0 0 0 5px var(--accent-soft);
color: var(--accent-fg);
}
.axe-pattern-gate-app .step.current .lbl {
color: var(--accent);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app .step.halted .dot {
border-color: var(--danger);
background: var(--danger);
color: var(--text-inverse);
}
.axe-pattern-gate-app .step.halted .lbl {
color: var(--danger);
}
/* Alerts and forms ----------------------------------------------------- */
.axe-pattern-gate-app .notice,
.axe-pattern-gate-app .alert {
padding: var(--space-3) var(--space-4);
border: 1px solid transparent;
border-radius: var(--radius-lg);
font-size: var(--text-sm);
}
.axe-pattern-gate-app .notice {
border-color: var(--danger);
background: var(--danger-soft);
color: var(--danger);
}
.axe-pattern-gate-app .notice > :first-child,
.axe-pattern-gate-app .alert > :first-child {
margin-top: 0;
}
.axe-pattern-gate-app .notice > :last-child,
.axe-pattern-gate-app .alert > :last-child {
margin-bottom: 0;
}
.axe-pattern-gate-app .alert {
margin-bottom: var(--space-3);
}
.axe-pattern-gate-app .gate-feedback {
margin-top: var(--space-3);
}
.axe-pattern-gate-app .alert.info {
border-color: var(--info);
background: var(--info-soft);
color: var(--info);
}
.axe-pattern-gate-app .alert.success {
border-color: var(--success);
background: var(--success-soft);
color: var(--success);
}
.axe-pattern-gate-app .alert.warn {
border-color: var(--warning);
background: var(--warning-soft);
color: var(--warning);
}
.axe-pattern-gate-app form.inline {
margin: 0;
}
.axe-pattern-gate-app :where(label:not([class*="axe-"])) {
display: block;
margin: var(--space-4) 0 6px;
color: var(--text-primary);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app :where(label:not([class*="axe-"])[data-req])::after {
color: var(--danger);
content: " *";
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app :where(label.check-row[data-req])::after {
content: none;
}
.axe-pattern-gate-app :where(label.check-row[data-req]) > span::after {
color: var(--danger);
content: " *";
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app :where(
input[type="text"]:not([class*="axe-"]),
input[type="search"]:not([class*="axe-"]),
input[type="email"]:not([class*="axe-"]),
input[type="password"]:not([class*="axe-"]),
input[type="number"]:not([class*="axe-"]),
input[type="url"]:not([class*="axe-"]),
input[type="date"]:not([class*="axe-"]),
select:not([class*="axe-"]),
textarea:not([class*="axe-"])
) {
width: 100%;
padding: 9px 12px;
border: 1px solid var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-elevated);
color: var(--text-primary);
font-family: inherit;
font-size: var(--text-sm);
}
.axe-pattern-gate-app :where(
input:not([class*="axe-"]),
select:not([class*="axe-"]),
textarea:not([class*="axe-"])
):focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
outline: none;
}
.axe-pattern-gate-app :where(
input[type="checkbox"]:not([class*="axe-"]),
input[type="file"]:not([class*="axe-"])
):focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.axe-pattern-gate-app :where(textarea:not([class*="axe-"])) {
resize: vertical;
}
.axe-pattern-gate-app :where(textarea.code) {
min-height: 380px;
background: var(--bg-elevated);
font-family: var(--font-mono);
font-size: 12.5px;
line-height: 1.6;
}
.axe-pattern-gate-app :where(input[type="file"]:not([class*="axe-"])) {
width: 100%;
padding: 10px;
border: 1.5px dashed var(--border-default);
border-radius: var(--radius-md);
background: var(--bg-subtle);
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-xs);
}
.axe-pattern-gate-app :where(input[type="file"]:not([class*="axe-"])):hover {
border-color: var(--accent);
background: var(--accent-soft);
}
.axe-pattern-gate-app :where(input[type="file"]:not([class*="axe-"])):focus-visible {
border-color: var(--accent);
box-shadow: 0 0 0 3px var(--accent-soft);
outline: none;
}
.axe-pattern-gate-app :where(input[type="checkbox"]:not([class*="axe-"])) {
width: 16px;
height: 16px;
accent-color: var(--accent);
}
.axe-pattern-gate-app .hint {
margin-top: 5px;
color: var(--text-secondary);
font-size: var(--text-xs);
}
.axe-pattern-gate-app .comment-row textarea {
min-height: 56px;
}
.axe-pattern-gate-app .check-row {
display: flex;
align-items: flex-start;
gap: 9px;
margin-top: var(--space-3);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--weight-regular);
}
.axe-pattern-gate-app .check-row input {
flex: none;
margin-top: 2px;
}
.axe-pattern-gate-app .kv {
display: grid;
grid-template-columns: 130px 1fr;
gap: 7px 16px;
margin: 0 0 var(--space-3);
font-size: var(--text-sm);
}
.axe-pattern-gate-app .kv dt {
color: var(--text-secondary);
}
.axe-pattern-gate-app .kv dd {
margin: 0;
word-break: break-word;
}
/* Document, signature, history ---------------------------------------- */
.axe-pattern-gate-app .axe-doc-stage {
border-radius: var(--radius-lg);
}
.axe-pattern-gate-app .axe-doc h1 {
margin: 0 0 14pt;
font-size: 16pt;
letter-spacing: 0.06em;
text-align: center;
}
.axe-pattern-gate-app .axe-doc h2 {
display: block;
margin: 12pt 0 5pt;
color: var(--doc-ink);
font-size: 11.5pt;
font-weight: var(--weight-bold);
letter-spacing: normal;
line-height: normal;
text-transform: none;
}
.axe-pattern-gate-app .axe-doc h2::after {
content: none;
}
.axe-pattern-gate-app .axe-doc h3 {
margin: 12pt 0 5pt;
color: var(--doc-ink);
font-size: 11pt;
font-weight: var(--weight-bold);
line-height: normal;
}
.axe-pattern-gate-app .axe-doc table {
width: 100%;
margin: 6pt 0;
border: 1px solid var(--doc-rule);
border-collapse: collapse;
font-size: 9.5pt;
}
.axe-pattern-gate-app .axe-doc th {
width: 32%;
padding: 5pt 7pt;
border-bottom: 1px solid var(--doc-rule);
background: var(--doc-band);
color: var(--doc-ink-2);
font-size: 9.5pt;
font-weight: var(--weight-semibold);
letter-spacing: normal;
text-align: left;
text-transform: none;
}
.axe-pattern-gate-app .axe-doc td {
padding: 5pt 7pt;
border-bottom: 1px solid var(--doc-rule);
}
.axe-pattern-gate-app .axe-doc tbody tr:hover {
background: transparent;
}
.axe-pattern-gate-app .axe-doc ol {
padding-left: 16pt;
}
.axe-pattern-gate-app .axe-doc li {
margin-bottom: 2.5pt;
}
.axe-pattern-gate-app .axe-doc p {
margin: 5pt 0;
}
.axe-pattern-gate-app .docbody {
margin: var(--space-2) 0 var(--space-1);
padding: var(--space-6);
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
font-size: var(--text-sm);
line-height: var(--leading-relaxed);
}
.axe-pattern-gate-app .docbody img {
max-width: 100%;
}
.axe-pattern-gate-app .sig-section {
margin-top: 18pt;
padding-top: 10pt;
border-top: 1.5px solid var(--doc-rule-strong);
}
.axe-pattern-gate-app .sig-section .sig-title {
margin-bottom: 6pt;
font-size: 11.5pt;
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app .sig-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12pt;
padding: 8pt 2pt;
border-bottom: 1px dashed var(--doc-rule);
}
.axe-pattern-gate-app .sig-row:last-child {
border-bottom: 0;
}
.axe-pattern-gate-app .sig-who .sig-name {
font-size: 11pt;
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app .sig-who .sig-sub {
margin-top: 2pt;
color: var(--doc-muted);
font-size: 8.5pt;
}
.axe-pattern-gate-app .sig-mark {
position: relative;
min-width: 150px;
color: var(--doc-muted);
font-size: 10pt;
text-align: right;
}
.axe-pattern-gate-app .sig-mark .in {
letter-spacing: 0.2em;
}
.axe-pattern-gate-app .sig-mark img.stamp {
position: absolute;
top: 50%;
right: 6px;
height: 62px;
opacity: 0.93;
mix-blend-mode: multiply;
pointer-events: none;
transform: translateY(-54%) rotate(-3deg);
}
.axe-pattern-gate-app .sig-mark .signed-label {
display: inline-block;
padding: 1px 8px;
border: 1.5px solid var(--doc-accent);
border-radius: 4px;
color: var(--doc-accent);
font-size: 8.5pt;
font-weight: var(--weight-bold);
transform: rotate(-2deg);
}
.axe-pattern-gate-app .events {
margin: 0;
padding: 0;
list-style: none;
}
.axe-pattern-gate-app .events li {
position: relative;
padding: 0 0 14px 22px;
font-size: var(--text-xs);
}
.axe-pattern-gate-app .events li::before {
position: absolute;
top: 6px;
left: 5px;
width: 7px;
height: 7px;
border-radius: var(--radius-full);
background: var(--accent);
content: "";
}
.axe-pattern-gate-app .events li::after {
position: absolute;
top: 15px;
bottom: -2px;
left: 8px;
width: 1.5px;
background: var(--border-subtle);
content: "";
}
.axe-pattern-gate-app .events li:last-child::after {
display: none;
}
.axe-pattern-gate-app .events .t {
color: var(--text-secondary);
}
.axe-pattern-gate-app .gate-document-hash {
margin-top: var(--space-3);
}
.axe-pattern-gate-app .gate-section-note {
margin: 0 0 var(--space-4);
}
.axe-pattern-gate-app .gate-file-header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-3);
margin-bottom: var(--space-3);
flex-wrap: wrap;
}
.axe-pattern-gate-app .gate-file-name {
font-weight: var(--weight-medium);
}
.axe-pattern-gate-app .gate-file-actions {
display: flex;
flex-wrap: wrap;
gap: var(--space-2);
}
.axe-pattern-gate-app .gate-pdf-frame {
width: 100%;
height: min(780px, 72vh);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--doc-paper);
}
.axe-pattern-gate-app .gate-extract {
margin-top: var(--space-4);
}
.axe-pattern-gate-app .gate-extract > summary {
padding: 6px 0;
cursor: pointer;
font-weight: var(--weight-medium);
}
.axe-pattern-gate-app .gate-extract-doc {
margin-top: var(--space-2);
padding: var(--space-5) var(--space-6);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--doc-paper);
color: var(--doc-ink);
}
.axe-pattern-gate-app .gate-action-note {
margin-left: var(--space-2);
}
/* Transitional single-card and signer surfaces ----------------------- */
.axe-pattern-gate-app .landing {
max-width: 560px;
margin: 9vh auto 0;
padding: 0 20px;
text-align: center;
}
.axe-pattern-gate-app .landing .logo {
color: var(--accent);
font-size: var(--text-4xl);
font-weight: var(--weight-bold);
letter-spacing: var(--tracking-heading);
}
.axe-pattern-gate-app .landing h1 {
margin-top: var(--space-4);
}
.axe-pattern-gate-app .landing .card {
width: 100%;
max-width: 520px;
margin: var(--space-3) auto 0;
text-align: left;
}
.axe-pattern-gate-app .landing.gate-legal {
max-width: 760px;
}
.axe-pattern-gate-app .landing .gate-card--narrow {
max-width: 420px;
}
.axe-pattern-gate-app .landing .gate-card--wide {
max-width: 720px;
line-height: var(--leading-relaxed);
}
.axe-pattern-gate-app .landing .notice {
text-align: left;
}
.axe-pattern-gate-app .landing .actions {
justify-content: center;
}
.axe-pattern-gate-app .gate-status-message,
.axe-pattern-gate-app .gate-status-meta {
margin: 0;
}
.axe-pattern-gate-app .gate-status-message + .gate-status-meta {
margin-top: 6px;
}
.axe-pattern-gate-app .gate-portal-login,
.axe-pattern-gate-app .gate-inline-action {
margin-top: var(--space-3);
}
.axe-pattern-gate-app .gate-portal-login + .hint {
margin-top: var(--space-2);
}
.axe-pattern-gate-app .gate-nav-context {
color: var(--text-tertiary);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.axe-pattern-gate-app .seal-hero {
margin-bottom: var(--space-4);
padding: var(--space-6) var(--space-4) var(--space-5);
border: 1px solid;
border-radius: var(--radius-lg);
text-align: center;
}
.axe-pattern-gate-app .seal-hero.ok {
border-color: var(--success);
background: var(--success-soft);
color: var(--success);
}
.axe-pattern-gate-app .seal-hero.bad {
border-color: var(--danger);
background: var(--danger-soft);
color: var(--danger);
}
.axe-pattern-gate-app .seal-hero .ic {
font-size: 38px;
line-height: 1;
}
.axe-pattern-gate-app .seal-hero .t {
margin-top: var(--space-2);
font-size: var(--text-xl);
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app .seal-hero .d {
margin-top: 4px;
font-size: var(--text-xs);
opacity: 0.9;
}
.axe-pattern-gate-app .signer-line {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--space-2);
margin-bottom: var(--space-4);
color: var(--text-secondary);
font-size: var(--text-sm);
}
.axe-pattern-gate-app details.fold {
margin-bottom: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
}
.axe-pattern-gate-app details.fold > summary {
padding: var(--space-3) var(--space-4);
color: var(--text-secondary);
cursor: pointer;
font-size: var(--text-sm);
font-weight: var(--weight-medium);
list-style: none;
}
.axe-pattern-gate-app details.fold > summary::-webkit-details-marker {
display: none;
}
.axe-pattern-gate-app details.fold > summary::before {
color: var(--text-tertiary);
content: "▸ ";
}
.axe-pattern-gate-app details.fold[open] > summary::before {
content: "▾ ";
}
.axe-pattern-gate-app details.fold > .fold-body {
padding: 0 var(--space-4) var(--space-4);
}
.axe-pattern-gate-app .stamp-preview {
max-height: 110px;
padding: 6px;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--doc-paper);
}
.axe-pattern-gate-app .stamp-preview--compact {
max-height: 44px;
padding: 0;
vertical-align: middle;
}
.axe-pattern-gate-app .diff {
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
background: var(--bg-elevated);
font-family: var(--font-mono);
font-size: 12px;
line-height: 1.65;
}
.axe-pattern-gate-app .diff .dline {
padding: 0 12px;
white-space: pre-wrap;
word-break: break-all;
}
.axe-pattern-gate-app .diff .dadd {
background: var(--success-soft);
}
.axe-pattern-gate-app .diff .dadd::before {
color: var(--success);
content: "+ ";
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app .diff .ddel {
background: var(--danger-soft);
}
.axe-pattern-gate-app .diff .ddel::before {
color: var(--danger);
content: "- ";
font-weight: var(--weight-bold);
}
.axe-pattern-gate-app .diff .dctx::before {
content: " ";
}
.axe-pattern-gate-app .diff .dhunk {
padding: 2px 12px;
background: var(--bg-subtle);
color: var(--text-tertiary);
font-size: 11px;
}
.axe-pattern-gate-app .sr-only {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
/* Responsive and print ------------------------------------------------ */
@media (max-width: 920px) {
.axe-pattern-gate-app .gate-detail-layout {
grid-template-columns: minmax(0, 1fr);
}
.axe-pattern-gate-app .gate-detail-layout > aside {
position: static;
}
.axe-pattern-gate-app .axe-doc {
width: 100%;
min-height: auto;
padding: 7mm 6mm;
}
.axe-pattern-gate-app .axe-doc-stage {
padding: var(--space-3);
}
}
@media (max-width: 720px) {
.axe-pattern-gate-app .gate-resource-toolbar {
grid-template-columns: minmax(0, 1fr);
align-items: stretch;
}
.axe-pattern-gate-app .gate-resource-toolbar > output {
justify-self: start;
}
.axe-pattern-gate-app .gate-resource-toolbar > .actions {
justify-content: stretch;
}
.axe-pattern-gate-app .gate-resource-toolbar > .actions > * {
flex: 1 1 auto;
}
.axe-pattern-gate-app .gate-form-layout > fieldset {
padding: var(--space-4);
}
.axe-pattern-gate-app .gate-form-layout > fieldset > div,
.axe-pattern-gate-app .gate-copy-field > div {
grid-template-columns: minmax(0, 1fr);
}
.axe-pattern-gate-app .gate-task-shell__body {
padding: var(--space-4) var(--space-3) calc(var(--space-7) + 76px);
}
.axe-pattern-gate-app .gate-task-shell__footer > div {
padding-inline: var(--space-3);
}
.axe-pattern-gate-app .container {
padding: var(--space-4) var(--space-3) var(--space-7);
}
.axe-pattern-gate-app .gate-dashboard-status {
grid-template-columns: minmax(0, 1fr);
}
.axe-pattern-gate-app .gate-dashboard-status > div + div {
border-top: 1px solid var(--border-subtle);
border-left: 0;
}
.axe-pattern-gate-app nav.top {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
height: auto;
min-height: 52px;
gap: var(--space-2) var(--space-3);
padding: var(--space-2) var(--space-3);
}
.axe-pattern-gate-app nav.top .brand {
grid-row: 1;
grid-column: 1;
}
.axe-pattern-gate-app nav.top .right {
grid-row: 1;
grid-column: 3;
justify-self: end;
}
.axe-pattern-gate-app nav.top .nav-menu {
width: 100%;
grid-row: 2;
grid-column: 1 / -1;
}
.axe-pattern-gate-app nav.top .nav-menu:empty {
display: none;
}
.axe-pattern-gate-app .navdrop-menu {
right: 0;
left: auto;
max-width: calc(100vw - (2 * var(--space-3)));
}
.axe-pattern-gate-app .userchip .email-text {
display: none;
}
.axe-pattern-gate-app .kv {
grid-template-columns: 110px 1fr;
}
.axe-pattern-gate-app :where(table:not([class*="axe-"])) :where(th, td) {
padding: 8px;
}
.axe-pattern-gate-app .diff {
font-size: 11px;
}
.axe-pattern-gate-app .gate-action-note {
width: 100%;
margin-left: 0;
}
.axe-pattern-gate-app .gate-pdf-frame {
height: 58vh;
min-height: 360px;
}
.axe-pattern-gate-app table.reflow thead {
position: absolute;
width: 1px;
height: 1px;
margin: -1px;
padding: 0;
overflow: hidden;
border: 0;
clip: rect(0 0 0 0);
white-space: nowrap;
}
.axe-pattern-gate-app table.reflow tr {
display: block;
margin-bottom: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.axe-pattern-gate-app table.reflow td {
display: flex;
justify-content: space-between;
gap: var(--space-3);
padding: 6px 0;
border: 0;
}
.axe-pattern-gate-app table.reflow td::before {
color: var(--text-tertiary);
content: attr(data-label);
font-weight: var(--weight-semibold);
}
}
@media (pointer: coarse) {
.axe-pattern-gate-app .nav-menu a,
.axe-pattern-gate-app .navdrop > summary,
.axe-pattern-gate-app .chip,
.axe-pattern-gate-app .axe-btn {
min-height: 44px;
}
.axe-pattern-gate-app .nav-menu a,
.axe-pattern-gate-app .navdrop > summary {
display: inline-flex;
align-items: center;
}
}
@media (forced-colors: active) {
.axe-pattern-gate-app :where(
input:not([class*="axe-"]),
select:not([class*="axe-"]),
textarea:not([class*="axe-"])
):focus-visible,
.axe-pattern-gate-app :where(input[type="file"]:not([class*="axe-"])):focus-visible {
outline: 2px solid Highlight;
outline-offset: 2px;
}
}
@media print {
.axe-pattern-gate-app nav.top,
.axe-pattern-gate-app .actions,
.axe-pattern-gate-app .actbar,
.axe-pattern-gate-app .gate-actbar-sticky,
.axe-pattern-gate-app .gate-subnav,
.axe-pattern-gate-app .gate-ai-chat,
.axe-pattern-gate-app form,
.axe-pattern-gate-app .footer,
.axe-pattern-gate-app .gate-task-shell__footer,
.axe-pattern-gate-app .notice,
.axe-pattern-gate-app details.fold,
.axe-pattern-gate-app .axe-btn {
display: none !important;
}
.axe-pattern-gate-app {
background: var(--doc-paper);
color: var(--doc-ink);
color-scheme: light;
}
.axe-pattern-gate-app .container {
max-width: 100%;
padding: 0;
}
.axe-pattern-gate-app .card,
.axe-pattern-gate-app .docbody {
padding: 0;
border: 0;
background: var(--doc-paper);
color: var(--doc-ink);
box-shadow: none;
}
.axe-pattern-gate-app .axe-doc-stage {
padding: 0;
background: var(--doc-paper);
}
.axe-pattern-gate-app .axe-doc {
width: auto;
min-height: auto;
box-shadow: none;
}
}
/* source: styles/components.css */
/* ============================================================
* AXE Labs — component styles
*
* 모든 컴포넌트는 .axe- prefix. Tailwind 의존 0.
* CSS 변수로만 컬러·폰트·간격 참조 → light/dark 자동 전환.
*
* 그룹별 CSS 는 별도 파일 → 본 파일에서 @import.
* 소비자는 components.css 만 import 해도 전 그룹 다 로드.
* ============================================================ */
/* v2 component groups (Phase 1-14) — 그룹별 격리 + 한 곳 통합 */
/* Toast / Popover / Tooltip */
/* Select / Checkbox / Radio / Switch / FormField / Label */
/* Tabs / Sidebar / Breadcrumb / Sheet */
/* Stable 280 / bounded canvas / 280 application chrome */
/* Skeleton / Spinner / Avatar / Progress */
/* StatusLight / MetricCard / PipelineTable */
/* safe-area / tap highlight / .axe-tabular-nums / .axe-sticky-blur */
/* AgentExecutor / StreamingTable / MultiModalChatInput */
/* Phase 14 — gap fill */
/* DataTable / Pagination / Chart */
/* AlertDialog / Accordion / DropdownMenu */
/* EmptyState / ErrorBoundary */
/* Tree / Timeline / MasterDetailLayout */
/* MessageWithSources / TypingIndicator / StatusBanner / ResponsiveTabs */
/* Code / Section / Hero / Footer / Splitter / Callout left-bar modifier */
/* Phase 17 (D-ui-3 Phase 2) — 문서/인쇄 템플릿 */
/* .axe-doc IC Memo · LP letter (가로/세로, A4 @page, @media print) */
/* shiki ServerCodeBlock 팔레트 (--shiki-* → 디자인 토큰) */
/* Surface tones — Signature / Editorial / Console 스코프드 레이어 */
/* Landing / Authentication framework-neutral page patterns */
/* Gate authenticated/workflow/signing page pattern */
/* NOTE: tailwind-bridge.css 는 *opt-in* — 소비자가 Tailwind 쓸 때만 명시 import. */
/* ------- Logo ------- */
.axe-logo {
display: inline-flex;
align-items: center;
gap: var(--space-2);
font-family: var(--font-brand, var(--font-clash));
font-weight: var(--weight-medium);
letter-spacing: -0.01em;
color: var(--brand-claret);
text-decoration: none;
font-size: var(--text-lg);
line-height: 1;
white-space: nowrap;
}
.axe-logo--sm {
font-size: var(--text-base);
}
.axe-logo--lg {
font-size: var(--text-2xl);
}
/* ------- TopNav -------
* v0.5 canonical markup — items 가 nav 직계 3-슬롯 (React = maud = jinja 공통):
*
* 종전(v0.4)에는 items 가 __left 내부였음 — nav 직계 3-슬롯으로 평탄화.
* 데스크톱 시각은 margin-left 보정으로 동일.
* 모바일(≤767.98px, v0.6)에서는 같은 __items/__right 요소를 CSS 로 좌·우
* 슬라이드 드로어로 재배치하고 ☰/⋯ 버튼이 토글한다 (아래 @media 블록 참조). */
.axe-topnav {
position: sticky;
top: 0;
z-index: var(--z-sticky);
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-5);
padding: var(--space-3) var(--space-5);
/* blur 커널 20px → 12px + 불투명도 92→95%: sticky 스크롤 경로에서 매 프레임
* 재필터되는 비용을 줄임 (저사양 GPU 스크롤 jank 원인). 95% 불투명이라
* 시각 차이는 거의 없음. */
background: color-mix(in oklch, var(--bg-base) 95%, transparent);
backdrop-filter: saturate(140%) blur(12px);
-webkit-backdrop-filter: saturate(140%) blur(12px);
border-bottom: 1px solid var(--border-subtle);
/* 모바일 nav 가 참조 — 768px 미만에서 navbar 바로 아래에 fixed 로 펼침. */
--axe-topnav-height: 56px;
/* 바 높이를 토큰에 고정한다. 드로어(.axe-topnav__items/__right)·scrim·sub-nav
* 가 모두 top:var(--axe-topnav-height) 로 anchor 하는데, 바의 자연 높이(컨텐츠
* +패딩)가 토큰보다 작으면 그 차이가 바 아래·드로어 위 사이 여백으로 보인다
* (모바일 ≈52px<56px → ~4px 띠, 2026-06-17 운영자 보고). min-height 로 바를
* 정확히 토큰 높이로 맞춰 anchor 와 flush 하게 한다 (align-items:center 가
* 컨텐츠 수직 중앙정렬 유지 — 데스크톱 바는 이미 ≈56px 라 시각 변화 없음). */
min-height: var(--axe-topnav-height);
}
/* 로고 전용 슬롯 — 종전 flex:1 1 auto + overflow:hidden + gap space-6 삭제.
* items 가 nav 직계로 빠지면서 left 는 더 이상 늘어나지 않는다. */
.axe-topnav__left {
display: flex;
align-items: center;
min-width: 0;
flex: 0 0 auto;
}
.axe-topnav__items {
display: flex;
align-items: center;
gap: var(--space-1);
/* nav 직계 가변 슬롯 — right (테마 토글 등) 절대 가리지 않음 */
flex: 1 1 0;
min-width: 0;
/* nav gap 24px(space-5) + 8px(space-2) = 32px — 종전 __left 내부 gap
* space-6(32px) 보존 (데스크톱 시각 변화 0). */
margin-left: var(--space-2);
/* Tab focus 시 fade 영역 밖에 착지 */
scroll-padding-inline: var(--space-6);
/* items 많으면 가로 스크롤 */
overflow-x: auto;
scrollbar-width: none; /* Firefox */
-ms-overflow-style: none; /* IE/old Edge */
}
.axe-topnav__items::-webkit-scrollbar {
display: none; /* Chrome/Safari */
}
/* fade gradient = "더 있다" 시각 힌트 — 실제 가려진 쪽에만.
* data-fade 는 TopNavItems(client) 가 scroll/resize 마다 토글.
* 무조건 mask 를 걸면 오버플로우 없는 데스크톱에서 마지막 항목
* 끝 글자가 깎인다 (2026-06-10 회귀 — 재발 금지). */
.axe-topnav__items[data-fade="right"] {
mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(to right, black calc(100% - 24px), transparent 100%);
}
.axe-topnav__items[data-fade="left"] {
mask-image: linear-gradient(to left, black calc(100% - 24px), transparent 100%);
-webkit-mask-image: linear-gradient(to left, black calc(100% - 24px), transparent 100%);
}
.axe-topnav__items[data-fade="both"] {
mask-image: linear-gradient(
to right,
transparent 0,
black 24px,
black calc(100% - 24px),
transparent 100%
);
-webkit-mask-image: linear-gradient(
to right,
transparent 0,
black 24px,
black calc(100% - 24px),
transparent 100%
);
}
.axe-topnav__item {
padding: var(--space-1) var(--space-3);
border-radius: var(--radius-md);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-regular);
letter-spacing: 0.005em;
color: var(--text-secondary);
white-space: nowrap;
transition:
color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.axe-topnav__item:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
/* 키보드 포커스 링 — brand · hamburger/kebab · drawer-close 와 동일한 어휘.
* border 가 없는 텍스트 링크라 menu-trigger 의 box-shadow 링이 아니라 outline 을 쓴다.
* border-radius 는 지정하지 않는다 — 이 요소는 이미 --radius-md 를 갖고 있어 outline 이
* 그 곡률을 따른다. */
.axe-topnav__item:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.axe-topnav__item[aria-current="page"],
.axe-topnav__item--active {
color: var(--text-primary);
font-weight: var(--weight-medium);
}
.axe-topnav__right {
display: flex;
align-items: center;
gap: var(--space-3);
flex: 0 0 auto; /* 우선순위 — 절대 줄지 않음 */
margin-left: var(--space-4);
}
/* ------- TopNav menu (NavMenu) -------
* entity-selector + user-menu 통일 드롭다운. trigger(pill) + popover(absolute).
* 같은 클래스로 두 용도가 픽셀 단위로 동일하게 보이게 한다. JS(NavMenu.tsx)는
* open 토글 + click-outside + ↑↓/Esc 만; 표시는 100% CSS. */
.axe-topnav__menu {
position: relative;
display: inline-flex;
flex: 0 0 auto;
}
.axe-topnav__menu-trigger {
display: inline-flex;
align-items: center;
gap: var(--space-2);
max-width: 220px;
padding: var(--space-1) var(--space-3);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-base);
color: var(--text-secondary);
font-family: var(--font-display);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
line-height: 1.4;
white-space: nowrap;
cursor: pointer;
transition:
color var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.axe-topnav__menu-trigger:hover {
color: var(--text-primary);
border-color: var(--accent);
background: var(--bg-subtle);
}
.axe-topnav__menu-trigger[data-state="open"] {
color: var(--text-primary);
border-color: var(--accent);
}
.axe-topnav__menu-trigger:focus-visible {
outline: none;
border-color: var(--accent);
box-shadow: var(--ring);
}
.axe-topnav__menu-trigger[data-accent] {
border-color: var(--accent);
color: var(--text-primary);
}
.axe-topnav__menu-trigger-label {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.axe-topnav__menu-chevron {
flex: 0 0 auto;
color: var(--text-muted);
transition: transform var(--duration-base) var(--ease-out);
}
.axe-topnav__menu-trigger[data-state="open"] .axe-topnav__menu-chevron {
transform: rotate(180deg);
}
.axe-topnav__menu-popover {
position: absolute;
top: calc(100% + var(--space-2));
/* 자동폭: trigger 폭 이상에서 시작해 내용에 맞춰 늘되 320px 상한. 종전 고정
* min-width 200px 가 짧은 메뉴(계정 전환 등)에서 과하게 넓었음 (운영자 2026-06-17). */
min-width: 100%;
width: max-content;
max-width: 320px;
padding: var(--space-1);
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
box-shadow: var(--shadow-lg);
overflow: hidden;
z-index: var(--z-overlay);
animation: axe-topnav-menu-in var(--duration-fast) var(--ease-out);
}
.axe-topnav__menu-popover[data-align="right"] { right: 0; }
.axe-topnav__menu-popover[data-align="left"] { left: 0; }
.axe-topnav__menu-item {
display: flex;
align-items: center;
gap: var(--space-3);
width: 100%;
padding: var(--space-2) var(--space-3);
border: none;
border-radius: var(--radius-md);
background: transparent;
color: var(--text-secondary);
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: 1.4;
text-align: left;
text-decoration: none;
cursor: pointer;
transition:
color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out);
}
.axe-topnav__menu-item:hover,
.axe-topnav__menu-item:focus-visible {
outline: none;
background: var(--bg-subtle);
color: var(--text-primary);
}
.axe-topnav__menu-item--active {
color: var(--text-primary);
font-weight: var(--weight-medium);
background: var(--accent-soft);
}
.axe-topnav__menu-item-label {
flex: 1 1 auto;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.axe-topnav__menu-item-meta {
flex: 0 0 auto;
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: 0.04em;
text-transform: uppercase;
color: var(--text-muted);
}
.axe-topnav__menu-empty {
padding: var(--space-3);
font-size: var(--text-sm);
color: var(--text-muted);
text-align: center;
}
.axe-topnav__menu-header {
margin-bottom: var(--space-1);
padding-bottom: var(--space-1);
border-bottom: 1px solid var(--border-subtle);
}
.axe-topnav__menu-header-label {
display: block;
padding: var(--space-1) var(--space-3);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
color: var(--text-primary);
white-space: nowrap;
}
.axe-topnav__menu-footer {
margin-top: var(--space-1);
padding-top: var(--space-1);
border-top: 1px solid var(--border-subtle);
}
.axe-topnav__menu-item--danger {
color: var(--danger);
}
.axe-topnav__menu-item--danger:hover,
.axe-topnav__menu-item--danger:focus-visible {
background: var(--danger-soft);
color: var(--danger);
}
@keyframes axe-topnav-menu-in {
from { opacity: 0; transform: translateY(-4px); }
to { opacity: 1; transform: translateY(0); }
}
@media (prefers-reduced-motion: reduce) {
.axe-topnav__menu-popover { animation: none; }
.axe-topnav__menu-chevron { transition: none; }
}
/* ------- TopNav brand (home/brand 링크) -------
* Logo 와 별개로 .axe-topnav__brand 만 붙여도 brand 식자(Clash) 로 렌더 가능.
* Latin=Clash Display, 한글=Pretendard 폴백 (의도). */
.axe-topnav__brand {
font-family: var(--font-brand, var(--font-clash));
font-weight: var(--weight-medium);
letter-spacing: -0.01em;
color: var(--brand-claret);
text-decoration: none;
white-space: nowrap;
}
.axe-topnav__brand:hover {
color: color-mix(in srgb, var(--brand-claret) 82%, var(--text-primary));
}
.axe-topnav__brand:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
border-radius: var(--radius-sm);
}
/* ------- Hamburger · Kebab 버튼 (모바일 전용 — 데스크톱 display:none) -------
* v0.6: 모바일 2-드로어. 햄버거(좌)=items 드로어, kebab(우)=right 슬롯 드로어.
*
* 0.25.1 (운영자 2026-08-06): v0.10.1 의 **원형 아웃라인 칩**(36px · radius-full ·
* border-subtle + bg-subtle)을 폐기한다. 0.24–0.25 에서 workspace 크롬이 정착시킨
* 아이콘 버튼 어휘 — 보더·배경 없는 상자, radius 8, 색만으로 쉬는 상태를 말하고
* hover 에서만 selected 배경이 서는 것(.axe-workspace-bar__icon-button ·
* .axe-workspace-identity · .axe-workspace-entity 가 이미 그렇다) — 과 이 두 버튼만
* 어긋나 있었다. 같은 제품의 공개 랜딩 바와 로그인 후 workspace 바가 한 화면 차이로
* 다른 시대의 크롬을 그리던 것이 실제 증상이다.
*
* 치수는 rail 칩과 같은 규칙을 따른다: 정밀 포인터에서 28px 상자 + ::before(inset −8px)
* 로 44px 실효 hit target, 터치(pointer: coarse)에서는 상자 자체가 44px 로 자란다.
* 드로어 열림 지속 강조는 여전히 없다 (2026-06-18 '활성화 고착' 차단 존중 —
* data-open bg 미부여). */
.axe-topnav__hamburger,
.axe-topnav__kebab {
display: none;
position: relative;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
padding: 0;
border: 1px solid transparent;
border-radius: 8px;
color: var(--text-secondary);
background: transparent;
cursor: pointer;
transition:
color var(--duration-fast) var(--ease-out),
background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out);
}
/* 44px 실효 hit target — 시각 28px 상자 밖으로 tap 영역 확장(레이아웃 불변). */
.axe-topnav__hamburger::before,
.axe-topnav__kebab::before {
content: "";
position: absolute;
inset: -8px;
}
/* hover = 실제 포인터만(모바일 터치 sticky :hover 차단, 2026-06-18). selected 배경. */
@media (hover: hover) {
.axe-topnav__hamburger:hover,
.axe-topnav__kebab:hover {
color: var(--text-primary);
background: var(--bg-subtle);
}
}
/* 터치는 상자 자체가 44px — rail 칩(.axe-workspace-identity 등)과 같은 규칙. */
@media (pointer: coarse) {
.axe-topnav__hamburger,
.axe-topnav__kebab {
width: 44px;
height: 44px;
}
}
.axe-topnav__hamburger:focus-visible,
.axe-topnav__kebab:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.axe-topnav__kebab-icon {
flex: 0 0 auto;
}
/* scrim — 양 드로어 공통 반투명 배경. nav 의 형제. 데스크톱 display:none. */
.axe-mobile-scrim {
display: none;
}
.axe-topnav__drawer-close {
display: none;
}
/* 햄버거 line — open 시 X 로 변형. transform 만 애니메이션 → GPU. */
.axe-hamburger-line {
transform-origin: center;
transition:
transform var(--duration-base) var(--ease-out),
opacity var(--duration-fast) var(--ease-out);
}
.axe-topnav__hamburger-icon[data-open="true"] .axe-hamburger-line--top {
transform: translateY(6px) rotate(45deg);
}
.axe-topnav__hamburger-icon[data-open="true"] .axe-hamburger-line--mid {
opacity: 0;
transform: scaleX(0);
}
.axe-topnav__hamburger-icon[data-open="true"] .axe-hamburger-line--bot {
transform: translateY(-6px) rotate(-45deg);
}
/* ------- 모바일 2-드로어 (≤767.98px) — v0.6 새 기본 (2026-06-17) -------
* 단일 행 바 = [☰ 햄버거(좌)] [브랜드] [⋯ kebab(우, plain 36px)]. 인라인 items 와
* 인라인 right 슬롯은 같은 요소를 CSS 로 고정 슬라이드 드로어로 재배치(중복
* 렌더 없음). data-open="true" = 열림. 종전 2행 grid + .axe-mobile-nav 풀스크린
* 오버레이 + .axe-topnav--drawer opt-in 은 폐지.
*
* 데스크톱(≥768px) inline 규칙은 이 @media 밖에 그대로 — 드로어 규칙은 모바일
* 한정. 브레이크포인트 768px = docs.axelabs.ai (Nextra md) 와 동일. */
@media (max-width: 767.98px) {
.axe-topnav {
/* 단일 행 3-칼럼: [☰ 좌][브랜드 가운데][⋯ 우]. brand 를 뷰포트 가운데 고정
* (drawer 는 position:fixed 라 grid flow 에서 빠짐 → 3 in-flow 항목만 칼럼 차지). */
display: grid;
grid-template-columns: 1fr auto 1fr;
align-items: center;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
/* 드로어 top = 단일 행 높이. (종전 92px 2행 폐지.) */
--axe-topnav-height: 56px;
/* ⚠️ backdrop-filter 는 position:fixed 자손의 containing block 을 만든다
* (spec). 드로어(.axe-topnav__items/.axe-topnav__right) 가 nav 의 자식
* 이므로, blur 를 켜두면 fixed 드로어가 viewport 가 아닌 56px nav 박스에
* 갇혀 height 가 붕괴한다. 모바일에선 blur 제거 + 불투명 배경으로 같은
* 시각을 유지하면서 containment trap 을 푼다. */
background: var(--bg-base);
backdrop-filter: none;
-webkit-backdrop-filter: none;
}
.axe-topnav__hamburger {
display: inline-flex;
grid-column: 1;
justify-self: start;
}
.axe-topnav__kebab {
display: inline-flex;
grid-column: 3;
justify-self: end;
}
.axe-topnav__drawer-close {
display: inline-flex;
align-items: center;
justify-content: center;
align-self: flex-end;
width: 36px;
height: 36px;
margin-bottom: var(--space-1);
border-radius: var(--radius-md);
color: var(--text-primary);
background: transparent;
}
.axe-topnav__drawer-close:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (hover: hover) {
.axe-topnav__drawer-close:hover {
background: var(--bg-subtle);
}
}
/* 브랜드 슬롯 — 가운데 칼럼 = 뷰포트 중앙. */
.axe-topnav__left {
grid-column: 2;
justify-self: center;
margin-left: 0;
}
/* 좌 드로어 = nav items. 좌측 고정, translateX(-100%)→0 슬라이드. */
.axe-topnav__items {
position: fixed;
top: var(--axe-topnav-height);
left: 0;
bottom: 0;
width: min(280px, 80vw);
margin: 0;
padding: var(--space-3);
flex-direction: column;
align-items: stretch;
gap: var(--space-1);
overflow-y: auto;
overflow-x: hidden; /* 세로 리스트 — 가로 fade 미적용 */
overscroll-behavior: contain;
background: var(--bg-base);
border-right: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg);
z-index: var(--z-overlay);
/* translate3d 로 GPU layer 강제 → 60fps (docs.axelabs.ai 패턴). */
transform: translate3d(-100%, 0, 0);
/* 닫힘 시 슬라이드아웃 완료 후 visibility:hidden → 키보드 tab·스크린리더에서
* 제거 (transform 만으론 오프스크린 항목이 포커스·AT 에 남는 회귀). */
visibility: hidden;
transition:
transform var(--duration-base) var(--ease-out),
visibility 0s linear var(--duration-base);
/* 세로 드로어엔 가로 오버플로우 없음 → data-fade mask 미적용. 안전상 명시 해제. */
mask-image: none;
-webkit-mask-image: none;
}
.axe-topnav__items[data-open="true"] {
transform: translate3d(0, 0, 0);
visibility: visible;
transition: transform var(--duration-base) var(--ease-out);
}
/* 모바일 항목 = 세로 리스트. 탭타깃은 패딩(space-3 space-4 ≈ 44px 행)이 확보.
* font-size 는 text-sm — 우 드로어(entity·계정 리스트 = text-sm)와 동일 스케일로
* 통일 (종전 text-base 는 좌 드로어만 16px 라 우 드로어 14.4px 대비 떠 보였다,
* 2026-06-17 운영자 보고). 드로어 타입 스케일: 헤더 text-xs / 항목 text-sm. */
.axe-topnav__item {
display: block;
padding: var(--space-3) var(--space-4);
border-radius: var(--radius-md);
font-size: var(--text-sm);
white-space: normal;
}
/* 우 드로어 = right 슬롯(entity+user NavMenu). 우측 고정, translateX(100%)→0. */
.axe-topnav__right {
position: fixed;
top: var(--axe-topnav-height);
right: 0;
bottom: 0;
width: min(300px, 85vw);
margin: 0;
padding: var(--space-4);
flex-direction: column;
align-items: stretch;
gap: var(--space-3);
overflow-y: auto;
overscroll-behavior: contain;
background: var(--bg-base);
border-left: 1px solid var(--border-subtle);
box-shadow: var(--shadow-lg);
z-index: var(--z-overlay);
transform: translate3d(100%, 0, 0);
visibility: hidden;
transition:
transform var(--duration-base) var(--ease-out),
visibility 0s linear var(--duration-base);
}
.axe-topnav__right[data-open="true"] {
transform: translate3d(0, 0, 0);
visibility: visible;
transition: transform var(--duration-base) var(--ease-out);
}
/* 우 드로어 안 NavMenu — 폭 채우고 trigger 도 full-width. popover 는
* 드로어 스크롤 내 표시 (z-index 동일, 드로어보다 위 stacking). */
.axe-topnav__right .axe-topnav__menu {
display: flex;
width: 100%;
}
.axe-topnav__right .axe-topnav__menu-trigger {
width: 100%;
max-width: none;
justify-content: space-between;
}
.axe-topnav__right .axe-topnav__menu-popover {
/* 드로어 안에서는 absolute float 대신 inline 펼침 — 스크롤 컨테이너
* 클리핑·viewport 초과 점프 방지. */
position: static;
max-width: none;
box-shadow: none;
animation: none;
margin-top: var(--space-1);
}
/* scrim — 양 드로어 공통. 바 아래(top) 전체 덮음. 패널보다 한 단계 아래. */
.axe-mobile-scrim {
display: block;
position: fixed;
inset: 0;
/* scrim 은 nav 형제라 .axe-topnav 의 --axe-topnav-height 를 상속 못 함 → fallback 필수 */
top: var(--axe-topnav-height, 56px);
background: var(--bg-overlay);
opacity: 0;
pointer-events: none;
transition: opacity var(--duration-base) var(--ease-out);
z-index: calc(var(--z-overlay) - 1);
}
.axe-mobile-scrim[data-open="true"] {
opacity: 1;
pointer-events: auto;
}
}
@media (max-width: 767.98px) and (prefers-reduced-motion: reduce) {
.axe-topnav__items,
.axe-topnav__right,
.axe-mobile-scrim,
.axe-hamburger-line,
.axe-topnav__kebab {
transition: none;
}
}
/* ------- Interactive affordance (공유 유틸리티) -------
* 자체 hover/press 어휘가 없는 클릭 요소 — 내비 행, 표 링크, 카드, 아이콘 버튼 —
* 에 다는 단일 공용 클래스. Blueprint 가 로컬 globals.css 에서 운용하던 규칙을
* SSOT 로 승격(0.20.0). 근본 원인이던 "컴포넌트마다 inline style 로 그려서
* :hover/:focus-visible/:active 를 표현 못 함" 을 한 클래스로 끝낸다.
* 어휘는 .axe-topnav__item 미러 — 보더·그림자 없이 밀도 유지, active 는
* accent-soft 배경으로 hover 의 gray 와 구분한다.
* 자체 시각 어휘를 가진 primitive(.axe-btn·.axe-seg__btn 등)에는 겹쳐 쓰지 않는다.
* 아래 Button 규칙보다 앞에 두어 dual-class 시 컴포넌트 어휘가 이긴다. */
.axe-interactive {
border-radius: var(--radius-md);
color: var(--text-secondary);
cursor: pointer;
transition:
color var(--duration-fast) var(--ease-out),
background-color var(--duration-fast) var(--ease-out);
}
@media (hover: hover) and (pointer: fine) {
.axe-interactive:hover {
color: var(--text-primary);
background-color: var(--bg-subtle);
}
}
/* 키보드 포커스 표식 — :focus-visible 만이라 마우스 클릭에는 안 뜬다. 톤은 accent
* 50% 아웃라인: 밀도 높은 행에서 2px --ring 이 "중복 테두리"로 보이던 회귀를 피한
* 값이다. 포커스 모달리티를 더 좁히려는 소비자(예 Blueprint 의 html[data-kbnav])는
* 자기 층에서 더 높은 명시도로 재정의한다 — 라이브러리 기본은 링을 준다. */
.axe-interactive:focus-visible {
outline: 1.5px solid color-mix(in srgb, var(--accent) 50%, transparent);
outline-offset: 2px;
}
.axe-interactive:active {
transform: scale(0.97);
}
.axe-interactive[aria-current="page"],
.axe-interactive[aria-selected="true"],
.axe-interactive[data-active="true"],
.axe-interactive--active {
color: var(--accent);
font-weight: var(--weight-medium);
background-color: var(--accent-soft);
}
.axe-interactive[aria-current="page"]:hover,
.axe-interactive[aria-selected="true"]:hover,
.axe-interactive[data-active="true"]:hover,
.axe-interactive--active:hover {
color: var(--accent);
background-color: var(--accent-soft);
}
@media (prefers-reduced-motion: reduce) {
.axe-interactive:active {
transform: none;
}
}
/* ------- Inline link (공유 재료) -------
* 산문 **밖**에서도 쓰는 인라인 링크 한 겹. `.axe-prose a` 는 자손 셀렉터라
* `.axe-prose` 안에서만 서고, 캔버스에 그냥 놓인 (되돌아가기 · 각주 · 고지
* 안 링크)에는 아무 어휘도 없었다 — 그래서 소비자 넷이 클래스 없는 를
* 그대로 두었다. 이 클래스가 그 자리를 갖는다: 색 축은 `.axe-prose a` 와 같은
* accent 이고(같은 제품의 링크가 자리에 따라 다른 색이면 그것은 두 제품이다)
* 밑줄은 링크임을 색에만 의존하지 않고 알리는 어포던스라 항상 켜 둔다.
*
* `:visited` 를 따로 물들이지 않는다 — UI 표면의 링크는 문서 열람 이력이 아니라
* 현재 상태를 가리키는 이동 수단이고, 방문색이 붙으면 같은 자리의 두 사용자가
* 다른 색을 본다.
*
* 포커스는 outline 이다. `--ring` 은 box-shadow 토큰이라 (a) 여러 줄로 감기는
* 인라인 조각마다 halo 가 그려져 이웃 줄의 글자를 덮고 (b) forced-colors 에서
* 그림자가 그려지지 않아 표식이 통째로 사라진다. 값은 킷의 기존 인라인 링크
* 포커스(page-patterns 의 auth 각주 링크)와 같은 2px accent + 2px offset 이다. */
.axe-link {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 0.15em;
text-decoration-skip-ink: auto;
border-radius: var(--radius-sm);
transition: color var(--duration-fast) var(--ease-out);
}
.axe-link:visited {
color: var(--accent);
}
@media (hover: hover) and (pointer: fine) {
.axe-link:hover {
color: var(--accent-hover);
}
}
.axe-link:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
@media (forced-colors: active) {
/* 강제색 모드는 author 색을 시스템 팔레트로 갈아끼운다. 링크는 전용 시스템
* 색(LinkText)이 있으므로 그것을 명시해 본문(CanvasText)과 갈린 채로 남긴다. */
.axe-link {
color: LinkText;
}
.axe-link:focus-visible {
outline-color: LinkText;
}
}
/* ------- Button ------- */
.axe-btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--space-2);
padding: 0 var(--space-4);
height: 36px;
border-radius: var(--radius-md);
font-family: var(--font-sans);
font-size: var(--text-sm);
font-weight: var(--weight-medium);
letter-spacing: 0;
line-height: 1;
cursor: pointer;
transition:
background var(--duration-fast) var(--ease-out),
border-color var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-fast) var(--ease-out);
white-space: nowrap;
user-select: none;
border: 1px solid transparent;
}
.axe-btn:disabled,
.axe-btn[aria-disabled="true"] {
opacity: 0.45;
cursor: not-allowed;
}
.axe-btn:active:not(:disabled) {
transform: scale(0.98);
}
.axe-btn--sm {
height: 28px;
padding: 0 var(--space-3);
font-size: var(--text-xs);
}
.axe-btn--lg {
height: 44px;
padding: 0 var(--space-5);
font-size: var(--text-base);
}
.axe-btn--primary {
background: var(--cta);
color: var(--cta-fg);
font-weight: var(--weight-semibold);
}
/* lift/hover surface는 실제 hover 가능한 fine pointer에서만. touch tap 뒤 :hover가
* sticky하게 남아 버튼이 떠 보이는 것을 막고, touch는 :active press feedback만 쓴다. */
@media (hover: hover) and (pointer: fine) {
.axe-btn--primary:hover:not(:disabled) {
background: var(--cta-hover);
transform: translateY(-1px);
box-shadow: var(--shadow-sm);
}
}
.axe-btn--primary:active:not(:disabled) {
transform: scale(0.98); /* hover lift 보다 우선 — 누름 피드백 */
box-shadow: none;
}
.axe-btn--secondary {
background: var(--bg-elevated);
border-color: var(--border-control, var(--border-strong));
color: var(--text-primary);
}
.axe-btn--secondary:hover:not(:disabled) {
border-color: var(--border-control-hover, var(--border-control));
background: var(--bg-subtle);
}
.axe-btn--ghost {
background: transparent;
color: var(--text-secondary);
}
.axe-btn--ghost:hover:not(:disabled) {
background: var(--bg-subtle);
color: var(--text-primary);
}
.axe-btn--danger {
background: var(--danger);
color: #fff;
}
.axe-btn--danger:hover:not(:disabled) {
filter: brightness(0.95);
}
/* loading 상태 (Button loading prop) — spinner 가 children 앞에 렌더됨 */
.axe-btn--loading {
pointer-events: none;
}
.axe-btn__icon {
display: inline-flex;
align-items: center;
flex-shrink: 0;
}
/* ------- Seg (segmented control) -------
* VariantSwitcher · DocSeg 등이 inline style 로 2번 재발명하던 패턴의 SSOT.
* React + CSS-only (maud/jinja) 양쪽에서 동일 markup:
*
*
*
*
*/
.axe-seg {
display: inline-flex;
gap: 2px;
padding: 2px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.axe-seg__btn {
appearance: none;
display: inline-flex;
align-items: center;
padding: 0 var(--space-3);
height: 28px;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--text-secondary);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
/* spring snap — transform/색만 변경 (compositor-safe) */
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-base) var(--ease-spring);
}
.axe-seg__btn:hover:not([aria-pressed="true"]) {
color: var(--text-primary);
}
.axe-seg__btn:active {
transform: scale(0.96);
}
.axe-seg__btn[aria-pressed="true"],
.axe-seg__btn--active {
background: var(--bg-elevated);
color: var(--text-primary);
font-weight: var(--weight-semibold);
border-color: var(--border-subtle);
box-shadow: var(--shadow-xs);
}
.axe-seg--sm .axe-seg__btn {
height: 24px;
padding: 0 var(--space-2);
}
/* ------- ToggleGroup (axe-toggle-group__*) -------
* Seg 와 같은 시각 family(pill 묶음)이나 의미가 다르다: Seg = 단일 필수 선택
* (항상 1개 pressed), ToggleGroup = 다중 토글 또는 해제 가능한 단일 (0~N개
* pressed) — 정렬/서식 툴바·필터 칩. React + CSS-only
* (maud/jinja) 양쪽 동일 markup:
*
*
*
*
*/
.axe-toggle-group {
display: inline-flex;
gap: 2px;
padding: 2px;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
}
.axe-toggle-group__btn {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 0 var(--space-3);
height: 28px;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--text-secondary);
background: transparent;
border: 1px solid transparent;
border-radius: var(--radius-sm);
cursor: pointer;
white-space: nowrap;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-base) var(--ease-spring);
}
.axe-toggle-group__btn:hover:not([aria-pressed="true"]):not(:disabled) {
color: var(--text-primary);
}
.axe-toggle-group__btn:active:not(:disabled) {
transform: scale(0.96);
}
.axe-toggle-group__btn[aria-pressed="true"] {
background: var(--bg-elevated);
color: var(--text-primary);
font-weight: var(--weight-semibold);
border-color: var(--border-subtle);
box-shadow: var(--shadow-xs);
}
.axe-toggle-group__btn:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.axe-toggle-group--sm .axe-toggle-group__btn {
height: 24px;
min-width: 24px;
padding: 0 var(--space-2);
}
/* ------- Toggle (axe-toggle) — standalone 단일 두-상태 누름 -------
* .axe-toggle-group__btn 의 standalone 변형 — 묶음 컨테이너가 없으니
* 자체 border/bg 를 들고 다닌다. pressed = aria-pressed="true". 동일 motion.
* */
.axe-toggle {
appearance: none;
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 28px;
padding: 0 var(--space-3);
height: 28px;
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
color: var(--text-secondary);
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
cursor: pointer;
white-space: nowrap;
transition:
background var(--duration-fast) var(--ease-out),
color var(--duration-fast) var(--ease-out),
transform var(--duration-base) var(--ease-spring);
}
.axe-toggle:hover:not([aria-pressed="true"]):not(:disabled) {
color: var(--text-primary);
}
.axe-toggle:active:not(:disabled) {
transform: scale(0.96);
}
.axe-toggle[aria-pressed="true"] {
background: var(--bg-elevated);
color: var(--text-primary);
font-weight: var(--weight-semibold);
border-color: var(--border-default);
box-shadow: var(--shadow-xs);
}
.axe-toggle:disabled {
opacity: 0.5;
cursor: not-allowed;
}
.axe-toggle--sm {
height: 24px;
min-width: 24px;
padding: 0 var(--space-2);
}
/* ------- Skip link (AppShell 첫 child) -------
* 평소 화면 밖 — 키보드 포커스 시에만 표시. */
.axe-skip-link {
position: fixed;
top: var(--space-3);
left: var(--space-3);
z-index: calc(var(--z-toast) + 1);
padding: var(--space-2) var(--space-4);
border-radius: var(--radius-md);
background: var(--cta);
color: var(--cta-fg);
font-size: var(--text-sm);
font-weight: var(--weight-semibold);
/* The shadow belongs to the focused state, not the parked one. Parked, this
* link sits above the viewport — but a shadow is drawn outside the box, so
* --shadow-lg's blur bled back down and left a grey smudge in the top-left
* corner of every @axe/ui surface (measured 2026-08-06 on index). */
transform: translateY(calc(-100% - var(--space-5)));
transition: transform var(--duration-base) var(--ease-out);
}
.axe-skip-link:focus-visible {
box-shadow: var(--shadow-lg);
transform: translateY(0);
}
/* ------- Input ------- */
.axe-input {
display: inline-flex;
align-items: center;
width: 100%;
height: 36px;
padding: 0 var(--space-3);
border-radius: var(--radius-md);
border: 1px solid var(--border-control, var(--border-strong));
background: var(--bg-elevated);
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-sm);
line-height: 1.4;
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.axe-input::placeholder {
color: var(--text-muted);
}
.axe-input:hover {
border-color: var(--border-control-hover, var(--border-control));
}
.axe-input:focus {
outline: none;
border-color: var(--accent);
box-shadow: var(--ring);
}
.axe-input--lg {
height: 44px;
font-size: var(--text-base);
}
.axe-input--textarea {
height: auto;
min-height: 80px;
padding: var(--space-3);
line-height: var(--leading-body);
resize: vertical;
}
/* ------- Card ------- */
.axe-card {
background: var(--bg-elevated);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-lg);
padding: var(--space-5);
box-shadow: var(--shadow-xs);
transition:
border-color var(--duration-base) var(--ease-out),
box-shadow var(--duration-base) var(--ease-out),
transform var(--duration-base) var(--ease-out);
}
.axe-card--interactive {
cursor: pointer;
}
/* hover = lift (이전의 full-accent 보더 스냅 대체 — transform/shadow 만
* 변경이라 compositor-only, 레이아웃 무영향) */
.axe-card--interactive:hover {
border-color: var(--border-strong);
transform: translateY(-2px);
box-shadow: var(--shadow-md);
}
.axe-card__title {
font-family: var(--font-display);
font-size: var(--text-lg);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-heading);
line-height: var(--leading-heading);
color: var(--text-primary);
margin-bottom: var(--space-2);
}
.axe-card__body {
color: var(--text-secondary);
font-size: var(--text-sm);
line-height: var(--leading-body);
}
/* ------- Callout ------- */
.axe-callout {
display: flex;
gap: var(--space-3);
padding: var(--space-4) var(--space-4);
border-radius: var(--radius-md);
border: 1px solid;
font-size: var(--text-sm);
line-height: var(--leading-body);
}
.axe-callout__icon {
flex-shrink: 0;
font-size: var(--text-base);
line-height: var(--leading-body);
}
.axe-callout__content {
flex: 1;
min-width: 0;
}
.axe-callout__title {
font-weight: var(--weight-semibold);
margin-bottom: var(--space-1);
}
.axe-callout--info {
background: var(--info-soft);
border-color: var(--info);
color: var(--text-primary);
}
.axe-callout--info .axe-callout__icon {
color: var(--info);
}
.axe-callout--success {
background: var(--success-soft);
border-color: var(--success);
color: var(--text-primary);
}
.axe-callout--success .axe-callout__icon {
color: var(--success);
}
.axe-callout--warning {
background: var(--warning-soft);
border-color: var(--warning);
color: var(--text-primary);
}
.axe-callout--warning .axe-callout__icon {
color: var(--warning);
}
.axe-callout--danger {
background: var(--danger-soft);
border-color: var(--danger);
color: var(--text-primary);
}
.axe-callout--danger .axe-callout__icon {
color: var(--danger);
}
.axe-callout--note {
background: var(--bg-subtle);
border-color: var(--border-subtle);
color: var(--text-secondary);
}
.axe-callout--note .axe-callout__icon {
color: var(--text-tertiary);
}
/* ------- Badge ------- */
.axe-badge {
display: inline-flex;
align-items: center;
gap: var(--space-1);
padding: 2px var(--space-2);
border-radius: var(--radius-full);
font-family: var(--font-sans);
font-size: var(--text-xs);
font-weight: var(--weight-medium);
letter-spacing: var(--tracking-wide);
line-height: 1.4;
background: var(--bg-subtle);
color: var(--text-secondary);
border: 1px solid var(--border-subtle);
}
.axe-badge--accent {
background: var(--accent-soft);
color: var(--accent);
border-color: transparent;
}
.axe-badge--success {
background: var(--success-soft);
color: var(--success);
border-color: transparent;
}
.axe-badge--warning {
background: var(--warning-soft);
color: var(--warning);
border-color: transparent;
}
.axe-badge--danger {
background: var(--danger-soft);
color: var(--danger);
border-color: transparent;
}
.axe-badge--info {
background: var(--info-soft);
color: var(--info);
border-color: transparent;
}
/* ------- CodeBlock ------- */
.axe-codeblock {
position: relative;
min-width: 0;
max-width: 100%;
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
}
.axe-codeblock__header {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-3);
background: color-mix(in oklch, var(--bg-subtle) 80%, var(--bg-base));
border-bottom: 1px solid var(--border-subtle);
font-family: var(--font-mono);
font-size: var(--text-xs);
color: var(--text-tertiary);
}
.axe-codeblock__lang {
text-transform: lowercase;
letter-spacing: 0.04em;
}
.axe-codeblock__copy {
font-family: var(--font-sans);
font-size: var(--text-xs);
color: var(--text-tertiary);
padding: 2px var(--space-2);
border-radius: var(--radius-sm);
transition: color var(--duration-fast) var(--ease-out);
}
.axe-codeblock__copy:hover {
color: var(--text-primary);
background: var(--bg-base);
}
.axe-codeblock__pre {
margin: 0;
padding: var(--space-4);
overflow-x: auto;
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: var(--leading-code);
color: var(--text-primary);
/* 한글·ASCII 박스 정렬 핵심:
* 1) Sarasa Term K / D2Coding 이 한글을 정확히 2× 너비로 렌더
* 2) keep-all 해제 — 코드는 그대로 보여줌 */
word-break: normal;
white-space: pre;
tab-size: 4;
font-variant-ligatures: contextual;
font-feature-settings: "calt" 1;
}
.axe-codeblock__pre code {
font-family: inherit;
font-size: inherit;
}
/* 인라인 code */
.axe-code-inline,
:not(pre) > code {
font-family: var(--font-mono);
font-size: 0.88em;
padding: 0.125em 0.4em;
border-radius: var(--radius-sm);
background: var(--bg-subtle);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
word-break: break-all;
}
/* ------- Table ------- */
.axe-table-wrap {
min-width: 0;
max-width: 100%;
overflow-x: auto;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-elevated);
}
.axe-table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
line-height: var(--leading-normal);
font-variant-numeric: tabular-nums;
}
.axe-table thead th {
text-align: left;
font-weight: var(--weight-semibold);
color: var(--text-secondary);
padding: var(--space-3) var(--space-4);
background: var(--bg-subtle);
border-bottom: 1px solid var(--border-subtle);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.axe-table tbody td {
padding: var(--space-3) var(--space-4);
border-bottom: 1px solid var(--border-subtle);
color: var(--text-primary);
vertical-align: top;
}
.axe-table tbody tr:last-child td {
border-bottom: 0;
}
.axe-table tbody tr:hover td {
background: var(--bg-subtle);
}
/* ------- Prose (마크다운 본문 래퍼) -------
* 단일 클래스로 임의 마크다운 트리에 prose 스타일 부여.
* docs.axelabs.ai 처럼 정보 밀도 높은 페이지에 .axe-prose 한 줄로. */
.axe-prose {
max-width: var(--prose-max);
color: var(--text-primary);
font-size: var(--text-base);
line-height: var(--leading-body);
}
.axe-prose > * + * {
margin-top: var(--space-4);
}
.axe-prose > h1 + *,
.axe-prose > h2 + *,
.axe-prose > h3 + * {
margin-top: var(--space-3);
}
.axe-prose > * + h2 {
margin-top: var(--space-7);
}
.axe-prose > * + h3 {
margin-top: var(--space-6);
}
.axe-prose h1,
.axe-prose h2,
.axe-prose h3,
.axe-prose h4,
.axe-prose h5,
.axe-prose h6 {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
letter-spacing: var(--tracking-heading);
color: var(--text-primary);
}
.axe-prose h1 {
font-size: var(--text-4xl);
line-height: var(--leading-tight);
}
.axe-prose h2 {
font-size: var(--text-2xl);
line-height: var(--leading-tight);
padding-bottom: var(--space-2);
border-bottom: 1px solid var(--border-subtle);
}
.axe-prose h3 {
font-size: var(--text-xl);
line-height: var(--leading-heading);
}
.axe-prose h4 {
font-size: var(--text-lg);
line-height: var(--leading-heading);
}
.axe-prose h5,
.axe-prose h6 {
font-size: var(--text-base);
line-height: var(--leading-heading);
}
.axe-prose p {
font-size: var(--text-base);
line-height: var(--leading-body);
letter-spacing: 0;
color: var(--text-primary);
}
.axe-prose a {
color: var(--accent);
text-decoration: underline;
text-decoration-thickness: 1px;
text-underline-offset: 3px;
transition: color var(--duration-fast) var(--ease-out);
}
.axe-prose a:hover {
color: var(--accent-hover);
}
.axe-prose ul,
.axe-prose ol {
padding-left: var(--space-5);
line-height: var(--leading-body);
}
.axe-prose ul {
list-style: disc;
}
.axe-prose ol {
list-style: decimal;
}
.axe-prose li::marker {
color: var(--text-tertiary);
}
.axe-prose li + li {
margin-top: var(--space-1);
}
.axe-prose li p {
margin-top: 0;
}
.axe-prose li > ul,
.axe-prose li > ol {
margin-top: var(--space-1);
}
.axe-prose blockquote {
border-left: 3px solid var(--border-strong);
padding: var(--space-2) var(--space-4);
color: var(--text-secondary);
font-style: italic;
}
.axe-prose hr {
border: 0;
height: 1px;
background: var(--border-subtle);
margin: var(--space-6) 0;
}
.axe-prose strong {
font-weight: var(--weight-semibold);
color: var(--text-primary);
}
.axe-prose img {
border-radius: var(--radius-md);
border: 1px solid var(--border-subtle);
}
/* prose 안의 표·코드블록은 위에서 정의한 클래스 스타일을 그대로 받도록
* 동일 셀렉터 사용 */
.axe-prose table {
width: 100%;
border-collapse: collapse;
font-size: var(--text-sm);
line-height: var(--leading-normal);
font-variant-numeric: tabular-nums;
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
overflow: hidden;
}
.axe-prose table thead th {
text-align: left;
font-weight: var(--weight-semibold);
color: var(--text-secondary);
padding: var(--space-2) var(--space-3);
background: var(--bg-subtle);
border-bottom: 1px solid var(--border-subtle);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-wide);
}
.axe-prose table tbody td {
padding: var(--space-2) var(--space-3);
border-bottom: 1px solid var(--border-subtle);
vertical-align: top;
}
.axe-prose table tbody tr:last-child td {
border-bottom: 0;
}
.axe-prose pre {
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
padding: var(--space-4);
overflow-x: auto;
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: var(--leading-code);
word-break: normal;
white-space: pre;
tab-size: 4;
}
.axe-prose pre code {
background: transparent;
border: 0;
padding: 0;
font-size: inherit;
}
/* ------- Chat — AI-first ------- */
.axe-chat-input {
display: flex;
flex-direction: column;
gap: var(--space-2);
padding: var(--space-3);
border: 1px solid var(--border-control, var(--border-strong));
border-radius: var(--radius-lg);
background: var(--bg-elevated);
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.axe-chat-input:focus-within {
border-color: var(--accent);
box-shadow: var(--ring);
}
.axe-chat-input__textarea {
width: 100%;
border: 0;
background: transparent;
resize: none;
outline: none;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-base);
line-height: var(--leading-body);
min-height: 1.5em;
max-height: 12em;
}
.axe-chat-input__textarea::placeholder {
color: var(--text-muted);
}
.axe-chat-input__toolbar {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
}
.axe-chat-input__hint {
font-size: var(--text-xs);
color: var(--text-tertiary);
font-family: var(--font-mono);
}
/* MessageBubble */
.axe-message {
display: flex;
gap: var(--space-3);
padding: var(--space-4) 0;
}
.axe-message__avatar {
flex-shrink: 0;
width: 28px;
height: 28px;
border-radius: var(--radius-full);
/* gray-9 = Radix scale 의 "solid bg" tier. avatar 같은 UI 마크용. */
background: var(--gray-9);
color: var(--bg-base);
display: flex;
align-items: center;
justify-content: center;
font-family: var(--font-display);
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
}
.axe-message--user .axe-message__avatar {
background: var(--accent);
color: var(--accent-fg);
}
.axe-message__body {
flex: 1;
min-width: 0;
color: var(--text-primary);
font-size: var(--text-base);
line-height: var(--leading-body);
}
.axe-message__role {
font-size: var(--text-xs);
font-weight: var(--weight-semibold);
color: var(--text-secondary);
letter-spacing: var(--tracking-wide);
text-transform: uppercase;
margin-bottom: var(--space-1);
}
.axe-message__content > * + * {
margin-top: var(--space-3);
}
/* StreamingMarkdown — pulse cursor */
.axe-stream-cursor {
display: inline-block;
width: 0.5em;
height: 1em;
background: var(--accent);
margin-left: 2px;
vertical-align: text-bottom;
animation: axe-blink 1s steps(2, end) infinite;
}
@keyframes axe-blink {
0%, 50% {
opacity: 1;
}
50.01%, 100% {
opacity: 0;
}
}
/* ToolCallCard */
.axe-toolcall {
border: 1px solid var(--border-subtle);
border-radius: var(--radius-md);
background: var(--bg-subtle);
font-family: var(--font-mono);
font-size: var(--text-sm);
line-height: var(--leading-code);
overflow: hidden;
}
.axe-toolcall__header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--space-2);
padding: var(--space-2) var(--space-3);
cursor: pointer;
user-select: none;
background: color-mix(in oklch, var(--bg-subtle) 80%, var(--bg-base));
border-bottom: 1px solid transparent;
transition: background var(--duration-fast) var(--ease-out);
}
.axe-toolcall__header:hover {
background: color-mix(in oklch, var(--bg-subtle) 60%, var(--bg-base));
}
.axe-toolcall[data-open="true"] .axe-toolcall__header {
border-bottom-color: var(--border-subtle);
}
.axe-toolcall__name {
display: flex;
align-items: center;
gap: var(--space-2);
color: var(--accent);
font-weight: var(--weight-semibold);
}
.axe-toolcall__status {
color: var(--text-tertiary);
font-size: var(--text-xs);
}
.axe-toolcall__chevron {
color: var(--text-tertiary);
transition: transform var(--duration-fast) var(--ease-out);
}
.axe-toolcall[data-open="true"] .axe-toolcall__chevron {
transform: rotate(90deg);
}
.axe-toolcall__body {
padding: var(--space-3);
color: var(--text-primary);
white-space: pre-wrap;
word-break: normal;
overflow-x: auto;
}
/* CommandPalette (⌘K) */
.axe-cmdk-backdrop {
position: fixed;
inset: 0;
z-index: var(--z-overlay);
background: var(--bg-overlay);
display: flex;
align-items: flex-start;
justify-content: center;
padding-top: 12vh;
}
.axe-cmdk {
width: min(560px, 92vw);
max-height: calc(100dvh - 2 * var(--space-4));
display: flex;
flex-direction: column;
background: var(--bg-elevated);
border: 1px solid var(--border-default);
border-radius: var(--radius-xl); /* 큰 floating surface = 16px (radius 위계) */
box-shadow: var(--shadow-xl);
overflow: hidden;
}
.axe-cmdk__search-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
border-bottom: 1px solid var(--border-subtle);
transition:
border-color var(--duration-fast) var(--ease-out),
box-shadow var(--duration-fast) var(--ease-out);
}
.axe-cmdk__search-row:focus-within {
border-bottom-color: var(--accent);
box-shadow: inset 0 -1px 0 var(--accent);
}
.axe-cmdk__input {
width: 100%;
padding: var(--space-4);
border: 0;
outline: none;
background: transparent;
color: var(--text-primary);
font-family: var(--font-sans);
font-size: var(--text-base);
}
.axe-cmdk__input::placeholder {
color: var(--text-muted);
}
.axe-cmdk__close {
min-width: 38px;
min-height: 30px;
margin-right: var(--space-3);
padding: 0 var(--space-2);
border: 1px solid var(--border-default);
border-radius: var(--radius-sm);
background: var(--bg-subtle);
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-cmdk__close:hover {
border-color: var(--border-strong);
color: var(--text-primary);
}
.axe-cmdk__list {
min-height: 0;
max-height: min(400px, calc(100dvh - 8rem));
overflow-y: auto;
padding: var(--space-2);
}
.axe-cmdk__group {
margin-bottom: var(--space-2);
}
.axe-cmdk__group-label {
font-family: var(--font-display);
font-size: var(--text-xs);
text-transform: uppercase;
letter-spacing: var(--tracking-widest);
color: var(--text-tertiary);
padding: var(--space-2) var(--space-3);
}
.axe-cmdk__item {
display: flex;
align-items: center;
justify-content: space-between;
padding: var(--space-2) var(--space-3);
border-radius: var(--radius-sm);
color: var(--text-primary);
font-size: var(--text-sm);
cursor: pointer;
transition: background var(--duration-fast) var(--ease-out);
}
.axe-cmdk__item[aria-selected="true"],
.axe-cmdk__item:hover {
background: var(--bg-subtle);
}
.axe-cmdk__item-meta {
color: var(--text-tertiary);
font-family: var(--font-mono);
font-size: var(--text-xs);
}
.axe-cmdk__empty {
padding: var(--space-6);
text-align: center;
color: var(--text-muted);
font-size: var(--text-sm);
}
/* kbd 키 표기 */
.axe-kbd {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 1.5em;
padding: 0 0.4em;
border-radius: var(--radius-sm);
background: var(--bg-subtle);
border: 1px solid var(--border-subtle);
border-bottom-width: 2px;
color: var(--text-secondary);
font-family: var(--font-mono);
font-size: 0.85em;
line-height: 1.6;
}
/* ============================================================
* Dialog (Modal) — Radix Dialog 위 styling
*
* size variant: sm 440 / md 560 / lg 720 / xl 960 / full 100vw
* data-state="open|closed" 으로 Radix 가 트랜지션 트리거.
* prefers-reduced-motion 존중.
* ============================================================ */
/* Sheet 와 같은 불변식: overlay 층(--z-overlay) > sticky chrome 층(--z-sticky),
* overlay 와 content 는 동률이고 순서는 portal DOM 이 정한다. raw 50/51 이던
* 값이 sticky topbar·rail 아래로 렌더되던 원인 — 근거 주석은
* styles/layout.css 의 .axe-sheet__overlay 위. */
.axe-dialog__overlay {
position: fixed;
inset: 0;
background: var(--bg-overlay);
backdrop-filter: blur(2px);
z-index: var(--z-overlay);
animation: axe-dialog-overlay-in 160ms ease-out;
}
.axe-dialog__overlay[data-state="closed"] {
animation: axe-dialog-overlay-out 120ms ease-in forwards;
}
.axe-dialog__content {
position: fixed;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
width: calc(100vw - 2 * var(--space-4));
max-height: calc(100vh - 2 * var(--space-4));
max-height: calc(100dvh - 2 * var(--space-4));
overflow: auto;
background: var(--bg-elevated);
color: var(--text-primary);
border: 1px solid var(--border-subtle);
border-radius: var(--radius-xl); /* 큰 floating surface = 16px (radius 위계) */
box-shadow: var(--shadow-xl);
padding: var(--space-6);
z-index: var(--z-overlay); /* 위 불변식 — overlay 와 동률, portal 순서로 위 */
animation: axe-dialog-content-in 180ms cubic-bezier(0.16, 1, 0.3, 1);
}
.axe-dialog__content[data-state="closed"] {
animation: axe-dialog-content-out 140ms ease-in forwards;
}
.axe-dialog__content:focus { outline: none; }
.axe-dialog__content--sm { max-width: 440px; }
.axe-dialog__content--md { max-width: 560px; }
.axe-dialog__content--lg { max-width: 720px; }
.axe-dialog__content--xl { max-width: 960px; }
.axe-dialog__content--full {
width: 100vw;
max-width: 100vw;
height: 100vh;
height: 100dvh;
max-height: 100dvh;
top: 0;
left: 0;
transform: none;
border-radius: 0;
}
.axe-dialog__header {
display: flex;
flex-direction: column;
gap: var(--space-1);
margin-bottom: var(--space-4);
padding-right: var(--space-8); /* close X 자리 */
}
.axe-dialog__title {
font-family: var(--font-display);
font-weight: var(--weight-semibold);
font-size: var(--text-lg);
line-height: 1.3;
color: var(--text-primary);
margin: 0;
}
.axe-dialog__description {
font-size: var(--text-sm);
line-height: 1.5;
color: var(--text-secondary);
margin: 0;
}
.axe-dialog__footer {
display: flex;
justify-content: flex-end;
gap: var(--space-2);
margin-top: var(--space-6);
padding-top: var(--space-4);
border-top: 1px solid var(--border-subtle);
}
@keyframes axe-dialog-overlay-in {
from { opacity: 0; }
to { opacity: 1; }
}
@keyframes axe-dialog-overlay-out {
to { opacity: 0; }
}
@keyframes axe-dialog-content-in {
from { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
to { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}
@keyframes axe-dialog-content-out {
to { opacity: 0; transform: translate(-50%, -48%) scale(0.96); }
}
@media (prefers-reduced-motion: reduce) {
.axe-dialog__overlay,
.axe-dialog__content,
.axe-dialog__overlay[data-state="closed"],
.axe-dialog__content[data-state="closed"] {
animation: none;
}
}
/* @axe/ui generated compatibility profile: legacy-light.
* Unsupported browsers degrade to one canonical light mode, even when
* a dark class/data attribute or dark OS preference is present. */
@supports not (color: light-dark(#000, #fff)) {
:root,
[data-theme="dark"],
.dark,
[data-theme="light"],
.light,
:root:not([data-theme="light"]):not(.light) {
color-scheme: light;
--brand-claret: #821f3b;
--palette-green: #00523f;
--palette-blue: #104a70;
--palette-orange: #9b562e;
--gray-1: #f7f7f6;
--gray-2: #f3f3f2;
--gray-3: #efefee;
--gray-4: #e9e9e8;
--gray-5: #e4e4e2;
--gray-6: #dcdcd9;
--gray-7: #d5d5d2;
--gray-8: #b8b8b4;
--gray-9: #8a8a86;
--gray-10: #686865;
--gray-11: #4b4b48;
--gray-12: #20201e;
--bg-elevated: #ffffff;
--bg-overlay: rgb(32 32 30 / 0.55);
--border-subtle: rgb(32 32 30 / 0.12);
--border-default: rgb(32 32 30 / 0.17);
--border-strong: rgb(32 32 30 / 0.29);
--border-control: rgb(32 32 30 / 0.48);
--border-control-hover: #8a8a86;
--accent-hover: #0c3c5b;
--accent-fg: #ffffff;
--accent-soft: rgb(16 74 112 / 0.10);
--danger: #c4321f;
--success-soft: #e5f1ed;
--warning-soft: #f4e9e1;
--danger-soft: #fbe7e2;
--info-soft: #e7f0f5;
--shadow-xs: 0 1px 2px rgb(32 32 30 / 0.05);
--shadow-sm: 0 1px 2px rgb(32 32 30 / 0.05), 0 2px 6px -1px rgb(32 32 30 / 0.05);
--shadow-md: 0 2px 4px rgb(32 32 30 / 0.04), 0 8px 20px -6px rgb(32 32 30 / 0.10);
--shadow-lg: 0 4px 8px rgb(32 32 30 / 0.05), 0 20px 48px -12px rgb(32 32 30 / 0.16);
--shadow-xl: 0 8px 16px rgb(32 32 30 / 0.06), 0 32px 80px -16px rgb(32 32 30 / 0.22);
}
}