이 흡수하게 해서 선택집계 + 눈금선 토글이 항상 오른쪽에
붙게 한다(doc 544 M6 「좌측 요약 · 우측 토글」). margin-left:auto를 둘 다에 주면 남는 공간이
두 auto 마진에 반씩 나뉘어 선택집계가 가운데로 떠 버린다 — 그래서 «미는 쪽»을 하나로 만든다.
.artifact-status-bar로 스코프해 컴포저 쪽 같은 클래스에는 닿지 않는다. */
.artifact-status-bar .artifact-workbook-save-status {
flex: 1 1 auto;
}
/* 눈금선 토글 (doc 544 P0, 목업 8층) — 리본 「보기」 그룹과 같은 명령을 상태바에서도 누른다.
aria-pressed="true" = 눈금선이 보인다(= 문서 모드 OFF). 상태 표현은 버튼 배경이 아니라
안의 스위치(.artifact-status-toggle-switch)가 맡는다 — §11.3. P0 의 «pressed=false 쪽
배경 강조»는 오너 실화면 결함 보고로 폐기됐다(§11.2-(b)): 그 강조색이 hover 와 같은
토큰(--cg-hover)이라 마우스가 올라간 채 클릭하는 순간에는 두 상태가 픽셀 하나도 다르지
않았다. 상태(스위치/--cg-send-bg 쌍)와 hover(--cg-hover)의 토큰을 겹치지 않게 유지하라. */
.artifact-status-gridlines-toggle {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
flex: 0 0 auto;
height: 22px;
padding: 0 6px;
border: none;
border-radius: var(--ds-radius-xs, 6px);
background: transparent;
/* ★--cg-* 토큰에 raw 폴백을 달지 않는다. 색상 부채 래칫(design-system/governance/
anti-drift-static-baseline.json, raw-color 상한 961)은 var() «안»의 리터럴도 그대로 센다 —
이 블록이 처음 착지했을 때 폴백 5개(#6b7280 ×2 · #ececec ×2 · #2f6bff ×1)만으로 상한을
966 으로 넘겨 파이프라인 #5077 을 붉혔다. 토큰은 body 의 .chatgpt-reference-v1 에서
정의되므로(styles.css:14876 근방) 이 패널에서 항상 해석된다 — 폴백은 값이 아니라 부채였다.
이 파일의 다수 관례도 폴백 없는 형태다: var(--cg-muted) 167곳 · var(--cg-hover) 38곳. */
color: var(--cg-muted);
font: inherit;
font-size: var(--ds-text-caption-12);
white-space: nowrap;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.artifact-status-gridlines-toggle .wds-inline-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* 스위치 (doc 544 §11.3 — 목업 sheet-concept-a 의 .tg 그대로): 트랙 + ::after 노브.
켜짐(aria-pressed="true" = 눈금선 보임) = 트랙이 --cg-send-bg 로 차고 노브가 오른쪽으로
이동. 노브 이동은 transform 만 쓴다(레이아웃 속성 애니메이션 금지 관례 — left 를 굴리면
합성기 밖에서 프레임을 만든다). 색 토큰에 raw 폴백을 달지 않는 것은 위 토글 블록과 같은
이유(색상 부채 래칫은 var() «안»의 리터럴도 그대로 센다).
★리본 쪽 눈금선/수식바 토글의 «반전 강조»는 여기서 삭제됐다(§11.2-(b) — hover 와 같은
토큰이라 클릭 순간 시각차 0). 이제 공용 눌림 규칙(.artifact-ribbon-btn[aria-pressed=
"true"] = --cg-send-bg 쌍)을 굵게·틀 고정과 똑같이 탄다 — 별도 규칙 자체가 없다. */
.artifact-status-toggle-switch {
position: relative;
width: 26px;
height: 14px;
flex: 0 0 auto;
border-radius: var(--ds-radius-pill);
background: var(--cg-menu-border, var(--line));
transition: background 120ms ease;
}
.artifact-status-toggle-switch::after {
content: "";
position: absolute;
top: 2px;
left: 2px;
width: 10px;
height: 10px;
/* 10px 정사각 + pill 토큰 = 원. 50% 리터럴은 raw-border-radius 래칫을 +1 시킨다(실측:
이 블록이 처음 착지했을 때 상한 168 → 169 로 게이트가 빨개졌다). */
border-radius: var(--ds-radius-pill);
background: var(--bg);
transition: transform 120ms ease;
}
/* §12 — 켜짐 트랙을 목업 `.tg.on{background:#155eef}` 의 파랑으로. §11.3 이 --cg-send-bg 를
고른 이유(«hover 와 겹치지 않는 짝 토큰»)는 그대로 유효하고, --ad-blue 도 같은 조건을
만족한다: hover(--cg-hover)와 다르고, 다크에서 --wds-blue-400 으로 스스로 밝아지며,
꺼짐 트랙(--cg-menu-border)과도 라이트/다크 양쪽에서 갈린다. 리본 눌림 강조와 «같은 파랑»을
쓰는 것이 요점이다 — 한 화면에서 «켜짐»이 두 가지 색이면 사용자가 규칙을 못 세운다.
★치수(26×14 트랙 / 10px 노브 / translateX(12px))는 §11.3 그대로 둔다: 목업 34×18 은
2000px 캔버스 기준이고 실화면 환산(×0.72)이 24.5×13 이라 이미 목업 값이다. */
.artifact-status-gridlines-toggle[aria-pressed="true"] .artifact-status-toggle-switch {
background: var(--ad-blue);
}
.artifact-status-gridlines-toggle[aria-pressed="true"] .artifact-status-toggle-switch::after {
transform: translateX(12px);
}
.artifact-status-gridlines-toggle:focus-visible {
outline: 2px solid var(--cg-focus-ring);
outline-offset: 1px;
}
.artifact-status-gridlines-toggle:disabled {
cursor: not-allowed;
opacity: 0.45;
}
/* 페이지 업/다운 (doc 558 ⓒ) — 기본은 «없는 것»이다. 데스크톱 상태바에는 이 두 칸이 들어갈
자리도 없고(M6 가 폰에서 컨트롤 5개를 2개로 줄인 것과 같은 이유) 넓은 화면에는 이미 휠과
Univer 자체 스크롤바가 있다. 폰 규칙은 아래 @media (max-width: 520px) 블록이 켠다.
★이 기본 규칙이 그 미디어 블록보다 «앞»에 있어야 한다: 특이도가 같아(클래스 1개) 소스
순서가 이기고, 뒤에 두면 display:none 이 폰 규칙을 덮어써 버튼이 영영 안 보인다 —
아래 「★아래 두 블록은 «기본 규칙 뒤»에 와야 한다」 주석이 같은 함정을 height 로 이미
실측해 두었다.
색 토큰에 raw 폴백을 달지 않는 것은 바로 위 눈금선 토글과 같은 이유다(색상 부채 래칫은
var() «안»의 리터럴도 그대로 센다). --ds-radius-xs 의 길이 폴백만 그 규칙과 동일하게 둔다. */
.artifact-status-page-scroll {
display: none;
align-items: center;
justify-content: center;
flex: 0 0 auto;
border: none;
border-radius: var(--ds-radius-xs, 6px);
background: transparent;
color: var(--cg-muted);
font: inherit;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.artifact-status-page-scroll .wds-inline-icon {
width: 18px;
height: 18px;
flex: 0 0 auto;
}
.artifact-status-page-scroll:focus-visible {
outline: 2px solid var(--cg-focus-ring);
outline-offset: 1px;
}
.artifact-status-page-scroll:disabled {
cursor: not-allowed;
opacity: 0.45;
}
/* 줌 (doc 597 P1-3 · doc 544 §13) — 엑셀 상태줄 맨 오른쪽의 «− / 배율 / +». 슬라이더는 쓰지
않는다: 28px 상태바에 슬라이더를 넣으면 트랙이 6px 로 눌려 조준이 안 되고, 엑셀에서도 실제로
손이 가는 것은 양끝의 −/+ 다.
색 토큰에 raw 폴백을 달지 않는 것은 위 눈금선 토글·페이지 스크롤과 같은 이유다(색상 부채
래칫은 var() «안»의 리터럴도 그대로 센다). --ds-radius-xs 의 «길이» 폴백만 그 관례대로 둔다. */
.artifact-status-zoom {
display: inline-flex;
align-items: center;
gap: 2px;
flex: 0 0 auto;
}
.artifact-status-zoom-btn,
.artifact-status-zoom-level {
display: inline-flex;
align-items: center;
justify-content: center;
flex: 0 0 auto;
height: 22px;
border: none;
border-radius: var(--ds-radius-xs, 6px);
background: transparent;
color: var(--cg-muted);
font: inherit;
font-size: var(--ds-text-caption-12);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.artifact-status-zoom-btn {
width: 22px;
padding: 0;
}
.artifact-status-zoom-btn .wds-inline-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* 배율 라벨은 «10%»~«400%» 사이를 오간다. 폭이 내용 따라 움직이면 −/+ 가 클릭할 때마다
좌우로 흔들려 연타가 빗나간다 — 최대 문자열 기준으로 자리를 미리 잡고 숫자는 등폭으로 쓴다. */
.artifact-status-zoom-level {
min-width: 42px;
padding: 0 4px;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.artifact-status-zoom-btn:focus-visible,
.artifact-status-zoom-level:focus-visible {
outline: 2px solid var(--cg-focus-ring);
outline-offset: 1px;
}
.artifact-status-zoom-btn:disabled,
.artifact-status-zoom-level:disabled {
cursor: not-allowed;
opacity: 0.45;
}
/* R1 (doc 544 §5.4): hover는 반드시 이 안에서. 이 앱이 이미 실측으로 남긴 함정 — 가드 없이 쓴
:hover는 터치에서 «끈적여» 배경이 눌린 채로 남고, 사용자는 그 서식이 적용된 줄 안다. */
@media (hover: hover) {
.artifact-status-gridlines-toggle:hover {
background: var(--cg-hover);
color: var(--cg-text);
}
.artifact-status-gridlines-toggle:disabled:hover {
background: transparent;
color: var(--cg-muted);
}
/* doc 558 ⓒ 도 같은 가드 안에 둔다 — 이 버튼은 «폰 전용»이라 hover 가 걸릴 일이 거의
없지만, 가드를 빼면 hover 를 흉내내는 터치 환경에서 배경이 눌린 채 남는다(R1). */
.artifact-status-page-scroll:hover {
background: var(--cg-hover);
color: var(--cg-text);
}
.artifact-status-page-scroll:disabled:hover {
background: transparent;
color: var(--cg-muted);
}
/* doc 597 P1-3 — 줌도 같은 가드 안에. R1: 가드 없는 :hover 는 터치에서 «끈적여» 배경이
눌린 채 남고, 사용자는 그 배율이 적용된 줄 안다. */
.artifact-status-zoom-btn:hover,
.artifact-status-zoom-level:hover {
background: var(--cg-hover);
color: var(--cg-text);
}
.artifact-status-zoom-btn:disabled:hover,
.artifact-status-zoom-level:disabled:hover {
background: transparent;
color: var(--cg-muted);
}
}
/* ★아래 두 블록은 «기본 규칙 뒤»에 와야 한다. 실측으로 잡힌 회귀(2026-08-27, 390px):
.artifact-status-gridlines-toggle{height:22px} 와 미디어 블록의 height:44px 는 특이도가
같아(클래스 1개) 소스 순서가 이긴다 — 미디어 블록을 이 파일 위쪽(패널 모바일 절)에 두었더니
히트영역이 44×44 가 아니라 44×22 로 렌더됐다. 미디어 쿼리는 특이도를 «올리지 않는다». */
@media (max-width: 900px) {
/* R3 (doc 544 §5.4) — 이 폭부터 패널이 풀스크린 시트라 상태바가 화면 «물리적» 최하단에 붙는다.
홈 인디케이터/제스처 바가 먹는 만큼을 안전영역 변수로 비운다. height를 auto로 푸는 이유:
28px 고정인 채로 padding-bottom을 더하면 내용이 그 패딩 밖으로 밀린다.
★여기에 100dvh를 쓰지 않는다 — 고정 배치에 뷰포트 높이가 필요하면 var(--wizon-vvh, 100dvh)
여야 한다(R2, doc 544 §8-8). 이 규칙은 flex 흐름 안이라 뷰포트 높이 자체가 필요 없다. */
.artifact-status-bar {
height: auto;
min-height: 28px;
padding-bottom: var(--wizon-safe-bottom, 0px);
}
}
/* 폰(≤520px) — doc 544 M6 「2단 축약: 좌측 선택 요약 · 우측 눈금선 토글 1개」.
520은 이 앱이 이미 44곳에서 쓰는 폰 경계다(doc 544 §5.1 — 새 브레이크포인트 발명 금지).
"준비" 라벨만 버린다(장식). 셀 개수·저장 상태·선택 집계는 좌측 요약으로 남고, 우측에는
눈금선 토글 하나뿐이다 — 수식바 토글·줌은 P0에서 «만들지 않았다»(P2 「보기」 탭).
★리본 자체의 칩/가로 스크롤 변환(M1·M2)은 P0 범위가 아니다. 여기서 하지 마라. */
@media (max-width: 520px) {
.artifact-status-bar {
gap: 8px;
padding-left: 8px;
padding-right: 8px;
}
.artifact-status-ready {
display: none;
}
/* R4 — 아이콘 전용이어도 터치 타깃은 44×44 이상. 라벨 텍스트를 숨겨 좁은 폭에서도 다른
요약이 밀려나지 않게 하고, 크기는 히트영역으로 되돌려 준다. */
.artifact-status-gridlines-toggle {
min-width: 44px;
height: 44px;
padding: 0;
}
.artifact-status-gridlines-toggle-text {
display: none;
}
.artifact-status-gridlines-toggle .wds-inline-icon {
width: 18px;
height: 18px;
}
/* doc 558 ⓒ — 폰에서만 나타난다. R4 대로 아이콘 전용이어도 터치 타깃은 44×44 이상.
상태바가 이 폭에서 height:auto + min-height:28px 이므로(위 900px 블록) 44px 버튼이
들어가면 상태바가 그만큼 자란다 — 잘리지 않는다. */
.artifact-status-page-scroll {
display: inline-flex;
min-width: 44px;
height: 44px;
padding: 0;
}
/* 좌측 요약이 폭을 넘길 때 «양보하는 쪽»은 선택 집계 하나다. 셀 개수는 기본 규칙에서
flex:0 0 auto + nowrap 이라 접히지 않으므로, 남는 압력을 여기서 말줄임으로 흡수한다.
min-width:0 이 없으면 flex 아이템은 자기 내용 폭 아래로 안 줄어 말줄임이 영영 안 걸리고,
nowrap 인 채 상태바를 가로로 밀어낸다(실측 2026-08-29: scrollWidth 399 > 375).
★.artifact-status-bar 로 한 겹 올려 쓴다 — 기본 규칙과 특이도가 같으면 소스 순서에
매달리는데, 그 함정은 바로 위 눈금선 토글 height 에서 이미 한 번 났다. */
.artifact-status-bar .artifact-selection-summary {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
}
/* doc 597 P1-3 — 줌은 폰에서 숨긴다. M6 이 하단에 허용한 것은 「좌측 선택 요약 · 우측 눈금선
토글 1개」이고, 44px 히트영역 3개를 더 넣으면 그 문장이 깨진다. M6 이 말한 「보기」 탭 이관은
아직 안 했다(doc 544 §13 「남은 것」) — 폰에는 지금도 줌이 없으므로 이 숨김은 후퇴가 아니라
현상 유지다. ★.artifact-status-bar 로 한 겹 올려 쓴다: 기본 규칙과 특이도가 같으면 소스
순서에 매달리고, 그 함정은 눈금선 토글 height 에서 이미 한 번 났다(위 주석). */
.artifact-status-bar .artifact-status-zoom {
display: none;
}
}
/* P2 「클릭형 셀 출처 배지」 폴백: Univer 벤더 코어에 셀 단위 렌더 훅이 없어(app.js의
cellSourceBarHtml 주석 참고) 캔버스 위 마커 대신 이 하단 바로 대체 — 셀 하나를 선택했을 때만
보이고, hidden 속성이 innerHTML 비움과 함께 토글된다(renderArtifactCellSourceBar). */
.artifact-cell-source-bar {
display: flex;
align-items: center;
gap: var(--ds-space-2);
flex: 0 0 auto;
padding: 6px var(--ds-space-3);
border-top: 1px solid var(--cg-menu-border, var(--line));
background: var(--cg-hover-soft);
color: var(--cg-text, var(--text));
font-size: var(--ds-text-caption-12);
}
.artifact-cell-source-bar[hidden] {
display: none;
}
.artifact-cell-source-label {
overflow: hidden;
color: var(--cg-muted);
text-overflow: ellipsis;
white-space: nowrap;
}
.artifact-cell-source-action {
flex: 0 0 auto;
margin-left: auto;
padding: 3px var(--ds-space-2);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--ds-radius-sm);
background: var(--cg-surface, var(--ds-color-surface));
color: var(--accent, var(--cg-text, var(--text)));
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.artifact-cell-source-action:hover {
background: var(--cg-hover-soft);
}
.artifact-cell-source-action:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 1px;
}
/* P0 후속 「시트 생성 직후 다음작업 카드」: 셀 출처 바(위)와 같은 하단 자리, 상태바(아래) 바로
위. innerHTML 비움과 함께 hidden이 토글된다(renderSheetNextActionCard/clearSheetNextActionCard,
cellSourceBarHtml과 같은 컨벤션). 새 색 토큰 없이 기존 var()만 재사용한다. */
.artifact-next-action-card {
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
flex: 0 0 auto;
padding: var(--ds-space-2) var(--ds-space-3);
border-top: 1px solid var(--cg-menu-border, var(--line));
background: var(--cg-hover-soft);
}
.artifact-next-action-card[hidden] {
display: none;
}
.artifact-next-action-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-2);
}
.artifact-next-action-title {
overflow: hidden;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.artifact-next-action-dismiss {
display: flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
width: 20px;
height: 20px;
padding: 0;
border: none;
border-radius: var(--ds-radius-sm);
background: transparent;
color: var(--cg-muted);
cursor: pointer;
}
.artifact-next-action-dismiss svg {
width: 14px;
height: 14px;
}
.artifact-next-action-dismiss:hover {
background: var(--cg-surface, var(--ds-color-surface));
color: var(--cg-text, var(--text));
}
.artifact-next-action-dismiss:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 1px;
}
.artifact-next-action-items {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-2);
}
.artifact-next-action-item {
flex: 0 0 auto;
padding: 3px var(--ds-space-2);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--ds-radius-sm);
background: var(--cg-surface, var(--ds-color-surface));
color: var(--accent, var(--cg-text, var(--text)));
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
.artifact-next-action-item:hover {
background: var(--cg-hover-soft);
}
.artifact-next-action-item:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 1px;
}
/* 중복 통계바 제거(doc 171 A2 리뷰): Univer 내장 선택통계 위젯(영문 Max/Min/Sum/Count/Average)을
숨겨 우리 한글 상태바 집계(.artifact-selection-summary — 평균·개수·합계)만 남긴다. 둘이 동시에
보이면 "합계가 두 개"로 사용자 혼란이라 병합 전 해소.
⚠ 셀렉터 버전 취약성: 벤더된 Univer UMD(0.25.1)는 클래스를 유틸리티(univer-*, Tailwind류)로
난독 생성해 시맨틱 클래스가 없다. 그래서 안정적 앵커 2겹으로 좁힌다 —
(1) 상태바 루트의 data 속성 [data-range-selector] (선택 범위 통계 바에 Univer가 부여, 실렌더
확인). 시트탭(1fr)·줌(100%)은 이 SECTION의 형제 그리드 칼럼이라 규칙에 안 걸린다.
(2) 그 안에서 통계 블록만 감싸는 래퍼 .univer-max-w-fit — 실렌더에서 #artifactSheetContainer
내 정확히 1개(통계 블록 전용, 시트탭/줌과 클래스 구분).
Univer 버전업으로 이 속성/클래스가 바뀌면 규칙은 '매칭 실패 → 내장 위젯 다시 노출'로 안전하게
fail-visible 된다(레이아웃 파손 아님). 그때 실렌더로 셀렉터만 갱신하면 된다. 통계 블록만
display:none 하고 시트탭·줌·시트 그리드는 건드리지 않는다(실렌더로 형제 visible 확인). */
#artifactSheetContainer [data-range-selector] .univer-max-w-fit {
display: none;
}
/* 중복 줌 제거 (doc 597 P1-3 후속 — GPT 독립 검수 보고, 2026-08-30 재현됨).
바로 위 통계바 규칙의 주석은 「시트탭(1fr)·줌(100%)은 형제 그리드 칼럼이라 규칙에 안 걸린다」고
적어 두었는데, 그때는 **우리 줌이 없어서** 벤더 줌 하나만 있는 것이 옳았다. 우리 상태바에 줌이
생긴 지금 그 문장이 그대로 중복의 원인이 됐다 — 사용자에게 같은 기능이 두 개다.
doc 544 §12 「리본/상태바는 우리가 소유한다」에 따라 우리 것을 남기고 벤더 것을 숨긴다.
⚠ 셀렉터 앵커 2겹 (실렌더로 확인한 0.25.1 구조):
footer > SECTION[data-range-selector] (grid-cols-[1fr,auto,auto,auto])
├ DIV ← 시트탭 (slide-tab-bar / sheet-bar-append-button)
├ DIV ← 통계 블록 자리 (.univer-max-w-fit — 위 규칙이 담당)
└ SECTION ← 줌 (버튼 3개, "100%")
(1) `footer` 로 그리드 «영역»의 동명 요소를 배제하고, (2) 직계 `> section` 으로 좁힌다 —
이 그리드에서 SECTION 은 줌 칼럼 하나뿐이고 시트탭·통계는 DIV 다.
★벤더 DOM 을 «옮기지» 않는다(doc 544 §8-3). 버전업으로 태그/속성이 바뀌면 규칙은
'매칭 실패 → 벤더 줌 다시 노출'로 fail-visible 된다 — 최악이 «줌이 두 개»이지 결코
«시트탭이 사라짐»이 아니다. 그 방향을 지키는 것이 이 셀렉터의 계약이다. */
#artifactSheetContainer footer [data-range-selector] > section {
display: none;
}
/* 시트 탭 바 엑셀식 리스타일 + ◀▶ 네비/≡ 전체 시트 메뉴 (doc 171 A2.1, 사용자 피드백: "하단의 시트
추가하는 부분을 엑셀처럼"). 실렌더로 확인한 Univer(0.25.1) 구조:
grid(=[data-range-selector]) 1열(1fr, flex) 안에 두 형제 DIV —
(a) 시트 추가 버튼 wrapper: [data-u-comp="sheet-bar-append-button"] × 2(+/변환)의 부모
(b) 탭 바 wrapper: [data-u-comp="slide-tab-bar"](role=tablist)의 부모
둘 다 시맨틱 클래스가 없는 Univer 유틸리티 클래스라 앵커는 오직 [data-u-comp] 속성만 신뢰.
버튼/탭 자체는 손대지 않고(클릭 핸들러 유지) 색만 엑셀처럼 덮어쓴다 — 활성 탭은 Univer가 붙이는
유틸리티 클래스(univer-bg-white univer-font-bold univer-text-primary-700 univer-shadow, 파랑)를
흰 배경+초록 텍스트로, 비활성 탭은 연회색 배경으로. 다크모드 변형(dark:!univer-*)은 이 앱에서
Univer 컨테이너에 .dark 클래스를 붙이는 배선이 없어 도달 불가 — 라이트만 다룬다. */
#artifactSheetContainer [data-u-comp="slide-tab-item"] {
background: transparent;
color: var(--cg-muted, #6b7280);
font-weight: 500;
border-radius: 4px 4px 0 0 !important; /* univer-rounded = 전체 라운드; 엑셀은 위쪽만 */
box-shadow: none !important; /* 비활성 탭엔 그림자 없음 */
}
#artifactSheetContainer [data-u-comp="slide-tab-item"]:hover {
background: var(--cg-hover-soft, #f4f4f4);
}
#artifactSheetContainer [data-u-comp="slide-tab-item"][aria-selected="true"] {
background: var(--cg-surface, #fff) !important;
color: var(--success, #12805c);
font-weight: 600; /* doc 160 T4 weight palette caps at 600 — no 700 in this app */
box-shadow: inset 0 0 0 1px var(--cg-menu-border, var(--line)) !important;
}
/* 시트 추가(+)·변환 버튼 — 이미 정사각형에 가까운 Univer 기본 스타일을 24×24 고정 + 우리 hover 톤으로
엑셀 느낌만 더한다. 클릭 커맨드는 Univer 것 그대로(CSS만). */
#artifactSheetContainer [data-u-comp="sheet-bar-append-button"] {
width: 24px !important;
height: 24px !important;
border-radius: 4px !important;
}
#artifactSheetContainer [data-u-comp="sheet-bar-append-button"]:hover {
background: var(--cg-hover-soft, #f4f4f4) !important;
}
/* Univer가 탭 바 오버플로우 시 자체적으로 붙이는 ‹›(아이콘 univerjs-icon-more-icon, 하나는
univer-rotate-180) 네이티브 스크롤 버튼 — 실렌더로 뒤늦게 발견(시트 1~2개일 땐 존재하지 않다가
overflow가 실제로 생겨야 나타남 — data-u-comp="sheet-bar-append-button"을 +/변환 버튼과 공유해
처음엔 놓쳤다). 이미 스크롤 동작 + disabled 판정까지 정확히 구현돼 있지만, "시트 1개=present+
disabled"(doc 171 A2.1 스펙)를 못 만족(개수 부족이면 아예 DOM에 없음). 그래서 항상 present인
우리 ◀▶(.artifact-sheet-tabnav-btn, 아래)를 유지하고 Univer 자체 버튼은 중복 표시되지 않도록
숨긴다 — 우리 버튼과 별개 세트라 켜 두면 화살표가 두 벌 보인다. */
#artifactSheetContainer [data-u-comp="sheet-bar-append-button"]:has(.univerjs-icon-more-icon) {
display: none;
}
/* ◀▶ 네비 + ≡ 전체 시트 메뉴 — Univer가 만들지 않는, 우리가 직접 주입하는 크롬(app.js
mountArtifactSheetTabBarChrome). 시트가 많아 탭 바가 넘칠 때(overflow-hidden이라 넘친 탭은
네이티브 스크롤바 없이 그냥 안 보임 — 실측 확인) 좌우로 스크롤하고, ≡는 전체 시트 목록 팝오버를
연다. flex `order`로 탭 바 앞(엑셀 순서: 네비/≡ → 탭 → +)에 오도록 시각적으로만 재배치 — DOM
이동·커맨드 배선 변경 없음(inline style로 Univer 소유 wrapper 두 개에 order만 부여). */
.artifact-sheet-tabnav {
position: relative;
display: inline-flex;
align-items: center;
gap: 1px;
flex: 0 0 auto;
margin-right: 2px;
}
.artifact-sheet-tabnav-btn {
display: inline-flex;
align-items: center;
justify-content: center;
width: 24px;
height: 24px;
padding: 0;
border: none;
border-radius: 4px;
background: transparent;
color: var(--cg-muted, #6b7280);
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.artifact-sheet-tabnav-btn .wds-inline-icon {
width: 15px;
height: 15px;
}
.artifact-sheet-tabnav-btn:hover:not(:disabled) {
background: var(--cg-hover-soft, #f4f4f4);
color: var(--cg-text, var(--text));
}
.artifact-sheet-tabnav-btn:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 1px;
}
/* ◀▶는 탭 바가 실제로 넘칠 때만 활성 — 시트 1개(넘침 없음)면 여기 걸려 진짜 disabled(장식 아님,
doc 171 A2.1 스펙). ≡는 시트가 하나뿐이어도 항상 활성(목록에 1개라도 뜬다). */
.artifact-sheet-tabnav-btn:disabled {
opacity: 0.35;
cursor: not-allowed;
}
.artifact-sheet-tabnav-menu {
display: flex;
flex-direction: column;
position: absolute;
left: 0;
bottom: calc(100% + 6px);
min-width: 168px;
max-height: 240px;
overflow-y: auto;
padding: 4px;
border-radius: 8px;
background: var(--cg-menu-bg, var(--cg-surface, #fff));
box-shadow: inset 0 0 0 1px var(--cg-menu-border, var(--line)), var(--cg-menu-shadow);
z-index: 20;
}
.artifact-sheet-tabnav-menu[hidden] {
display: none;
}
.artifact-sheet-tabnav-menu-item {
display: flex;
align-items: center;
gap: 6px;
width: 100%;
padding: 6px 8px;
border: none;
border-radius: 4px;
background: transparent;
color: var(--cg-text, var(--text));
font-size: var(--ds-text-caption-13); /* doc 160 T4 bans hand-tuned half-pixel font-size values */
text-align: left;
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
cursor: pointer;
}
.artifact-sheet-tabnav-menu-item:hover {
background: var(--cg-hover-soft, #f4f4f4);
}
.artifact-sheet-tabnav-menu-item.is-active {
color: var(--success, #12805c);
font-weight: 600;
}
.artifact-sheet-tabnav-menu-item .wds-inline-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
/* P0-B: 답변 신뢰 chip 행(하단) + 통일 패널(신뢰도·출처·처리 과정). 배지를 답변 위→아래로 내려
출처와 한 줄에 묶고, chip 탭 시 #trustPanel(파일 패널 크롬)을 연다(doc 161 §7 — 단일 패널).
--conf-accent = vivid 도트, --conf-fg = 어두운 텍스트(WCAG 1.4.3, tint 위 ~6.5:1). */
.trust-chip[data-tier="high"],
.trust-tier-badge[data-tier="high"] {
--conf-accent: var(--success, #12805c);
--conf-fg: #0a5f43;
}
.trust-chip[data-tier="medium"],
.trust-tier-badge[data-tier="medium"] {
--conf-accent: var(--ds-badge-warn-fg, #b45309);
--conf-fg: #8a3f07;
}
.trust-chip[data-tier="low"],
.trust-tier-badge[data-tier="low"] {
--conf-accent: var(--muted, #6b7280);
--conf-fg: #4b5563;
}
/* --- bottom chip row --- */
.trust-chips {
display: flex;
gap: 7px;
margin-top: 12px;
overflow-x: auto;
scroll-snap-type: x proximity;
scrollbar-width: none;
-webkit-overflow-scrolling: touch;
padding-bottom: 2px;
}
.trust-chips::-webkit-scrollbar {
display: none;
}
.trust-chip {
scroll-snap-align: start;
flex: 0 0 auto;
display: inline-flex;
align-items: center;
gap: 4px;
/* Matched to the web source tag (.citation-tag, 20px) so every answer tag is one size family.
Below the 24px WCAG 2.5.8 comfort target, but the source tag it mirrors is itself an
interactive 20px control and the 7px inter-chip gap gives the spacing exception headroom. */
min-height: 20px;
padding: 0 9px;
border-radius: var(--ds-radius-pill, 999px);
/* Unified with the web source tag (.citation-tag, doc 164 §후속): soft-fill pill + soft
border so every answer-footer tag reads as one family. The filled surface (not white)
carries the control boundary; the whole row shares the source-tag surface language. */
border: 1px solid var(--cg-menu-border, var(--line));
background: var(--cg-hover-soft, var(--surface-2));
color: var(--cg-text, #1f2937);
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: 500;
line-height: 1.2;
white-space: nowrap;
cursor: pointer;
transition: background 0.15s ease, border-color 0.15s ease;
}
.trust-chip:hover {
background: var(--cg-hover, var(--surface-2));
border-color: var(--cg-muted, var(--muted));
}
.trust-chip:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent, #2f6bff));
outline-offset: 2px;
}
.trust-chip--confidence {
color: var(--conf-fg);
}
.trust-chip-text {
font-weight: 600;
}
.trust-chip-cnt {
display: inline-grid;
place-items: center;
min-width: 16px;
height: 16px;
padding: 0 5px;
border-radius: var(--ds-radius-pill, 999px);
/* White inset on the soft-fill chip so the count stays legible as a nested badge. */
background: var(--surface, #fff);
color: var(--muted, #475569);
font-size: var(--ds-text-micro-11);
font-weight: 600;
}
.trust-chip-ic {
display: inline-flex;
/* Colored symbol like the source tag's favicon (doc 164 §후속3). Functional-color axes
(styles.css 아트디렉션 v2): Blue = 문서·출처. 처리 과정 overrides to Violet (AI) below. */
color: var(--ad-blue, #155eef);
}
.trust-chip--process .trust-chip-ic {
color: var(--ad-violet, #7c5cff);
}
.trust-chip--verification .trust-chip-ic {
color: var(--ad-green, #12805c);
}
.trust-chip--role-trace .trust-chip-ic {
color: var(--ad-blue, #155eef);
}
/* Specificity must beat the shell default (.chatgpt-reference-v1 .wds-inline-icon = 20px), or the
icon stays 20px and inflates the 20px chip. */
.chatgpt-reference-v1 .trust-chip-ic svg {
width: 13px;
height: 13px;
}
/* doc 164 §후속2: model info as a non-interactive meta badge (doc 161 §7 B2), now clustered with
the elapsed time at the action row's end — muted, borderless, no cursor. Model + duration read
as one "how it was made" group; the trust-chip row above stays all-interactive. */
/* Identical metrics to .answer-elapsed (same size/weight/color) so the model + duration cluster
reads as one uniform meta pair (doc 164 §후속3). */
.answer-model-meta {
display: inline-flex;
align-items: center;
gap: 4px;
color: var(--cg-muted, #8f8f8f);
font-size: var(--ds-text-caption-12);
font-weight: 400;
line-height: 1.2;
white-space: nowrap;
}
.answer-model-meta-ic {
display: inline-flex;
}
.answer-model-meta-ic svg {
width: 13px;
height: 13px;
}
/* --- shared meter (chip + panel tier badge) --- */
.trust-meter {
display: inline-flex;
gap: 3px;
}
.trust-dot {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--line, #d7dbe1);
}
.trust-dot.filled {
background: var(--conf-accent);
}
/* --- unified panel: file-panel chrome + tabs + cards (doc 158 → #trustPanel, doc 161 §7) --- */
/* tabs reuse .chatgpt-route-tabs base; this adds a sticky rail below the header */
.trust-panel-tabs {
position: sticky;
top: 0;
z-index: 1;
padding: 2px 0 10px;
margin-bottom: 4px;
background: var(--surface, #fff);
border-bottom: 1px solid var(--line);
}
.trust-panel-tabs button:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent, #2f6bff));
outline-offset: 2px;
}
.trust-panel-tabs button.is-active {
font-weight: 600;
}
.trust-tab-cnt {
display: inline-grid;
place-items: center;
min-width: 17px;
height: 17px;
margin-left: 4px;
padding: 0 5px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-hover-soft, #eef1f5);
color: var(--muted, #475569);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.trust-panel-body {
display: grid;
gap: 10px;
}
.trust-panel-tier {
padding: 4px 0 2px;
}
.trust-tier-badge {
display: inline-flex;
align-items: center;
gap: 6px;
padding: 3px 9px;
border-radius: var(--ds-radius-pill, 999px);
background: color-mix(in srgb, var(--conf-accent) 12%, transparent);
color: var(--conf-fg);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.trust-why {
display: grid;
gap: 5px;
}
.trust-why-row {
margin: 0;
font-size: var(--ds-text-caption-13);
line-height: 1.55;
color: var(--muted, #4b5563);
}
.trust-why-k {
font-weight: 600;
color: var(--cg-text, #374151);
margin-right: 4px;
}
.process-route-widget {
display: grid;
grid-template-columns: 30px minmax(0, 1fr);
gap: 12px;
align-items: start;
padding: 14px;
border: 1px solid var(--line, #e5e7eb);
border-radius: 12px;
background: var(--surface, #fff);
/* 깊이 2단(아트디렉션 v2): 카드만 띄운다 */
box-shadow: 0 1px 2px rgba(16, 16, 20, 0.05), 0 4px 14px rgba(16, 16, 20, 0.04);
}
.process-route-icon.md-chip {
width: 30px;
height: 30px;
border-radius: 9px;
}
.process-route-icon.md-chip .wds-inline-icon {
width: 16px;
height: 16px;
}
.process-route-copy {
display: grid;
gap: 4px;
min-width: 0;
}
.process-route-copy > small {
color: var(--ad-blue, #155eef);
font-size: var(--ds-text-micro-11);
font-weight: 600;
letter-spacing: 0.04em;
}
.process-route-copy > strong {
color: var(--cg-text, #1f2937);
font-size: var(--ds-text-body-15);
}
.process-route-badges {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 2px;
}
.process-route-badges span {
padding: 3px 6px;
border: 1px solid var(--line, #dfe3e8);
border-radius: var(--ds-radius-xs, 6px);
background: var(--cg-hover-soft, #f7f8fa);
color: var(--muted, #596273);
font-size: var(--ds-text-micro-11);
line-height: 1.2;
}
.process-route-shadow {
margin: 4px 0 0;
padding-top: 7px;
border-top: 1px solid var(--line);
color: var(--muted, #667085);
font-size: var(--ds-text-caption-12);
line-height: 1.45;
}
.process-route-shadow strong {
color: var(--cg-text, #374151);
}
/* 상태 콜아웃: 처리 완료=그린 / 자동 전환=앰버 — 본문 콜아웃과 동일 문법 */
.process-status {
display: flex;
gap: 10px;
margin-top: 12px;
padding: 11px 13px;
border: 1px solid var(--line, #e5e7eb);
border-radius: 12px;
}
.process-status[data-tone="green"] {
border-color: color-mix(in srgb, var(--ad-green) 16%, transparent);
background: var(--ad-green-tint);
}
.process-status[data-tone="amber"] {
border-color: color-mix(in srgb, var(--ad-amber) 22%, transparent);
background: var(--ad-amber-tint);
}
.process-status-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.process-status-copy strong {
font-size: var(--ds-text-caption-13);
line-height: 1.45;
}
.process-status[data-tone="green"] .process-status-copy strong { color: var(--ad-green); }
.process-status[data-tone="amber"] .process-status-copy strong { color: var(--ad-amber); }
.process-status-copy span,
.process-status-copy small {
color: var(--cg-text-soft, var(--muted, #667085));
font-size: var(--ds-text-caption-13);
line-height: 1.5;
}
.process-status-copy small {
color: var(--cg-muted, var(--muted, #667085));
font-size: var(--ds-text-caption-12);
}
/* One-line recap header of the process panel (doc 165) — the gist at a glance. */
.process-summary-head {
margin: 0 0 14px;
padding-bottom: 12px;
border-bottom: 1px solid var(--cg-menu-border, var(--line));
color: var(--cg-text, var(--ink));
font-size: var(--ds-text-caption-13);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.process-sec-label {
margin: 24px 0 10px;
color: var(--cg-muted, var(--muted, #7b8492));
font-size: var(--ds-text-micro-11);
font-weight: 600;
letter-spacing: 0.07em;
text-transform: uppercase;
}
.process-timeline {
display: grid;
gap: 0;
margin: 0;
padding: 0 0 0 2px;
list-style: none;
}
.process-step {
position: relative;
display: grid;
grid-template-columns: 24px minmax(0, 1fr);
gap: 0 10px;
padding-bottom: 18px;
align-items: start;
}
.process-step:last-child {
padding-bottom: 2px;
}
.process-step:not(:last-child)::before {
content: "";
position: absolute;
top: 28px;
bottom: 2px;
left: 11px;
width: 2px;
border-radius: 2px;
background: var(--line, #dfe3e8);
}
/* 상태 도트: 단계 의미색 틴트 원 + 아이콘 (아트디렉션 v2) */
.process-dot {
position: relative;
z-index: 1;
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: 50%;
background: var(--ad-green-tint);
color: var(--ad-green);
}
.process-dot[data-tone] .wds-inline-icon {
/* 특이도 (0,3,0): 전역 .chatgpt-reference-v1 .wds-inline-icon(20px)을 이겨야 틴트 원이 산다 */
width: 13px;
height: 13px;
}
.process-dot[data-tone="blue"] { background: var(--ad-blue-tint); color: var(--ad-blue); }
.process-dot[data-tone="amber"] { background: var(--ad-amber-tint); color: var(--ad-amber); }
.process-dot[data-tone="violet"] { background: var(--ad-violet-tint); color: var(--ad-violet); }
.process-step-copy {
display: grid;
gap: 2px;
min-width: 0;
}
.process-step-row {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
min-height: 24px;
}
.process-step-row strong {
color: var(--cg-text, #1f2937);
font-size: var(--ds-text-body-14);
font-weight: 600;
line-height: 24px;
letter-spacing: -0.01em;
}
.process-step-copy small,
.process-step time {
color: var(--cg-muted, var(--muted, #7b8492));
font-size: var(--ds-text-caption-12);
line-height: 1.5;
}
.process-files {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
/* 모델 단계의 라이선스 칩. 문서 조회 단계의 .process-files와 같은 자리·같은 리듬이라 간격
값을 그대로 따른다(새 spacing 토큰을 만들지 않는다). 색은 기존 아트디렉션 축의 green/amber만
쓰고 중립은 --line/--muted로 — 새 색 토큰을 만들면 형제 선택자가 옛 토큰에 남는 문제가
그대로 재현된다. */
.process-model-governance {
display: flex;
flex-wrap: wrap;
gap: 5px;
margin-top: 6px;
}
.model-gov-chip {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill);
font-size: var(--ds-text-micro-11);
line-height: 1.5;
white-space: nowrap;
color: var(--muted);
}
.model-gov-chip[data-tone="green"] {
border-color: color-mix(in srgb, var(--ad-green) 30%, transparent);
background: var(--ad-green-tint);
color: var(--ad-green);
}
.model-gov-chip[data-tone="amber"] {
border-color: color-mix(in srgb, var(--ad-amber) 34%, transparent);
background: var(--ad-amber-tint);
color: var(--ad-amber);
}
.process-step time {
flex: none;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
/* source cards — mockup anatomy: [n] · type · 관련도{ko} / title / snippet */
.trust-card-list {
display: grid;
gap: 8px;
}
.trust-card {
display: block;
padding: 11px;
border: 1px solid var(--line, #e5e7eb);
border-radius: 11px;
text-decoration: none;
color: inherit;
}
.trust-card:hover {
background: var(--cg-hover-soft, #f7f8fa);
}
.trust-source-location-open {
display: inline-flex;
min-height: 32px;
align-self: flex-start;
align-items: center;
gap: var(--ds-space-1);
margin-top: 2px;
padding: var(--ds-space-1) var(--ds-space-2);
border: 1px solid var(--ds-color-line);
border-radius: var(--ds-radius-pill, 999px);
background: var(--ds-color-surface);
color: var(--ds-color-muted);
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-medium);
cursor: pointer;
}
.trust-source-location-open:hover {
border-color: var(--accent);
color: var(--ink);
}
.trust-source-location-open:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.trust-source-location-open .wds-inline-icon {
width: 14px;
height: 14px;
}
@media (pointer: coarse) {
.trust-source-location-open {
min-height: 44px;
}
}
.trust-empty {
padding: 12px 0;
font-size: var(--ds-text-caption-13);
color: var(--muted, #6b7280);
}
/* Public verification and role-trace summaries intentionally expose aggregates and mapped
labels only. Identifiers, claim text, scope digests, and internal payload paths stay server-side. */
.verification-summary {
display: grid;
gap: 12px;
}
.verification-status {
display: flex;
align-items: center;
gap: 9px;
padding: 12px;
border: 1px solid color-mix(in srgb, var(--ad-green, #12805c) 22%, var(--line, #e5e7eb));
border-radius: 11px;
background: color-mix(in srgb, var(--ad-green-tint, #e8f7f0) 70%, transparent);
color: var(--cg-text, #1f2937);
}
.verification-status[data-status="unsupported"],
.verification-status[data-status="mixed"] {
border-color: color-mix(in srgb, var(--ad-amber, #b45309) 24%, var(--line, #e5e7eb));
background: color-mix(in srgb, var(--ad-amber-tint, #fff4d6) 72%, transparent);
}
.verification-status-icon {
display: inline-flex;
color: var(--ad-green, #12805c);
}
.verification-status[data-status="unsupported"] .verification-status-icon,
.verification-status[data-status="mixed"] .verification-status-icon {
color: var(--ad-amber, #b45309);
}
.verification-status-icon svg {
width: 18px;
height: 18px;
}
.verification-status strong,
.verification-status small {
display: block;
}
.verification-status strong {
font-size: var(--ds-text-body-14);
line-height: 20px;
}
.verification-status small {
margin-top: 2px;
color: var(--cg-muted, #7b8492);
font-size: var(--ds-text-caption-12);
}
.verification-metrics {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 8px;
}
.verification-metrics > div,
.verification-count-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
min-width: 0;
padding: 9px 10px;
border: 1px solid var(--line, #e5e7eb);
border-radius: 9px;
background: var(--cg-hover-soft, #f7f8fa);
}
.verification-metrics span,
.verification-count-row span {
color: var(--cg-muted, #7b8492);
font-size: var(--ds-text-caption-12);
}
.verification-metrics strong,
.verification-count-row strong {
color: var(--cg-text, #1f2937);
font-size: var(--ds-text-body-14);
font-variant-numeric: tabular-nums;
}
.verification-counts {
display: grid;
gap: 6px;
}
.verification-note {
margin: 0;
color: var(--cg-muted, #7b8492);
font-size: var(--ds-text-caption-12);
line-height: 1.5;
}
.role-trace-widget {
display: grid;
gap: 7px;
padding: 11px;
border: 1px solid color-mix(in srgb, var(--ad-blue, #155eef) 20%, var(--line, #e5e7eb));
border-radius: 11px;
background: color-mix(in srgb, var(--ad-blue-tint, #edf4ff) 62%, transparent);
}
.role-trace-widget-head,
.role-trace-checks {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
}
.role-trace-widget-head strong {
color: var(--cg-text, #1f2937);
font-size: var(--ds-text-caption-13);
}
.role-trace-widget-head > span:last-child,
.role-trace-widget p,
.role-trace-checks {
color: var(--cg-muted, #7b8492);
font-size: var(--ds-text-caption-12);
}
.role-trace-widget p {
margin: 0;
line-height: 1.5;
}
.role-trace-checks span {
padding: 3px 7px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-surface, #fff);
}
/* follow-up questions row — action nudges below the answer, distinct from the trust chips */
.followup-chips {
display: flex;
flex-wrap: wrap;
gap: 7px;
margin-top: 8px;
}
.followup-chip {
display: inline-flex;
align-items: center;
min-height: 30px;
padding: 0 12px;
border-radius: var(--ds-radius-pill, 999px);
border: 1px solid var(--line-strong);
background: var(--surface, #fff);
color: var(--cg-text, #1f2937);
font: inherit;
font-size: var(--ds-text-caption-13);
font-weight: 500;
text-align: left;
cursor: pointer;
transition: background 0.15s ease;
}
.followup-chip:hover {
background: var(--cg-hover-soft, #f7f8fa);
}
/* 라벨 + '›' 어포던스 (doc 361 §11, 소유자 요청 2026-08-07). 캐럿은 «고를 수 있다»는
신호이므로 라벨보다 옅게 두고, 호버에서만 또렷해진다. 색·간격은 기존 칩 토큰을
그대로 쓴다 — 새 토큰을 만들면 형제 선택자가 옛 값에 남는다(디자인 트랙 교훈). */
.followup-chip__label {
min-width: 0;
}
.followup-chip__caret {
margin-left: 6px;
opacity: 0.45;
transition: opacity 0.15s ease, transform 0.15s ease;
}
.followup-chip:hover .followup-chip__caret,
.followup-chip:focus-visible .followup-chip__caret {
opacity: 0.9;
transform: translateX(1px);
}
@media (prefers-reduced-motion: reduce) {
.followup-chip__caret {
transition: opacity 0.15s ease;
}
.followup-chip:hover .followup-chip__caret,
.followup-chip:focus-visible .followup-chip__caret {
transform: none;
}
}
.followup-chip:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent, #2f6bff));
outline-offset: 2px;
}
.evidence-card {
border: 1px solid var(--cg-menu-border);
margin-top: 12px;
border-radius: 8px;
background: #f8fbfc;
}
.evidence-card summary {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: 3px;
padding: 11px 12px;
color: var(--cg-text-soft);
font-weight: 600;
}
.evidence-card summary small {
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: 600;
line-height: 1.4;
}
.evidence-meta {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 12px 10px;
}
.evidence-meta span,
.evidence-note {
color: var(--muted);
font-size: var(--ds-text-caption-12);
line-height: 1.45;
}
.source-list {
display: grid;
gap: 8px;
padding: 0 12px 12px;
}
.source-card {
display: grid;
gap: 6px;
padding: 10px;
border: 1px solid var(--line);
border-radius: 8px;
background: #ffffff;
}
.source-card-head {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 10px;
}
.source-card-head strong,
.source-card-head span {
overflow-wrap: anywhere;
font-size: var(--ds-text-caption-12);
line-height: 1.35;
}
.source-card-head span {
color: var(--muted);
white-space: nowrap;
}
.source-snippet {
margin: 0;
color: #334155;
font-size: var(--ds-text-caption-13);
line-height: 1.55;
}
.evidence-note {
margin: 0;
padding: 0 12px 12px;
}
.document-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
margin-top: 4px;
}
.document-actions button {
min-height: 30px;
padding: 0 9px;
border: 1px solid var(--line);
border-radius: 8px;
background: #ffffff;
color: var(--ink);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.document-actions button:hover {
border-color: var(--accent);
background: var(--accent-soft);
}
.run-form label,
.login-card label {
display: grid;
gap: 7px;
color: #425160;
font-size: var(--ds-text-caption-13);
font-weight: 600;
}
.item-list {
display: grid;
gap: 8px;
}
.mini-card,
.app-card {
width: 100%;
border: 1px solid var(--line);
border-radius: 8px;
background: #ffffff;
}
.mini-card {
display: grid;
gap: 5px;
padding: 12px;
}
.mini-card.selected-document {
background: #f0fafc;
box-shadow: inset 3px 0 0 var(--accent);
}
.mini-card strong,
.app-card strong {
display: block;
overflow-wrap: anywhere;
font-size: var(--ds-text-body-14);
line-height: 1.35;
}
.mini-card span,
.app-card small {
display: block;
color: var(--muted);
font-size: var(--ds-text-caption-12);
line-height: 1.45;
overflow-wrap: anywhere;
}
.app-card {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 10px;
align-items: start;
padding: 11px;
color: var(--ink);
text-align: left;
}
.app-card:hover,
.app-card.selected {
border-color: var(--accent);
background: var(--accent-soft);
}
.app-icon {
display: grid;
place-items: center;
width: 32px;
height: 32px;
border-radius: 8px;
background: #111827;
color: #ffffff;
font-size: var(--ds-text-caption-13);
font-weight: 600;
}
.context-list {
display: grid;
gap: 8px;
margin: 0;
}
.context-list div {
display: grid;
grid-template-columns: 82px minmax(0, 1fr);
gap: 8px;
padding: 9px 0;
border-bottom: 1px solid var(--line);
}
.context-list dt {
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.context-list dd {
min-width: 0;
margin: 0;
overflow-wrap: anywhere;
font-size: var(--ds-text-caption-13);
}
.empty-note {
margin: 0;
padding: 12px;
border: 1px dashed var(--line);
border-radius: 8px;
color: var(--muted);
font-size: var(--ds-text-caption-13);
line-height: 1.5;
}
.noise-note {
margin: 6px 0 0;
padding: 0 4px;
color: var(--muted);
font-size: var(--ds-text-micro-11);
line-height: 1.5;
}
/* .login-dialog uses ds-modal Tier 3 tokens (71 §4.2).
* Aligned to ds-modal--sm (560px) per Phase 3.3 user confirm (2026-05-24). */
.login-dialog {
width: min(560px, calc(100vw - 32px));
padding: 0;
border: 1px solid var(--ds-modal-border);
border-radius: var(--ds-modal-radius);
box-shadow: var(--ds-modal-shadow);
background: var(--ds-modal-surface);
outline: none;
}
.login-dialog::backdrop {
background: var(--ds-modal-overlay);
}
.login-card {
display: grid;
gap: var(--ds-space-4);
padding: var(--ds-space-6);
background: var(--ds-modal-surface);
}
.login-card h2 {
margin: 3px 0 0;
font-size: 22px;
}
.subtle {
margin: 8px 0 0;
color: var(--muted);
font-size: var(--ds-text-body-14);
line-height: 1.5;
}
.error-text {
min-height: 18px;
margin: 0;
color: var(--danger);
font-size: var(--ds-text-caption-13);
}
/* Enterprise AI Workspace product refresh */
.app-shell {
grid-template-columns: 308px minmax(0, 1fr);
}.theme-toggle {
width: 100%;
min-height: 40px;
border: 1px solid rgba(226, 232, 240, 0.16);
border-radius: var(--ds-radius-pill, 999px);
background: rgba(255, 255, 255, 0.08);
color: #f8fafc;
font-size: var(--ds-text-caption-12);
font-weight: 600;
transition: background var(--motion), border-color var(--motion), transform var(--motion);
}
.theme-toggle:hover,
.nav-item:hover,
.nav-item.active {
border-color: rgba(34, 211, 238, 0.38);
background: rgba(255, 255, 255, 0.1);
}
.theme-toggle:hover,
.nav-item:hover {
transform: translateY(-1px);
}
.nav-section {
gap: 7px;
}
.nav-item {
display: grid;
gap: 3px;
width: 100%;
min-height: 54px;
padding: 10px 12px;
border: 1px solid transparent;
border-radius: var(--radius-md);
background: transparent;
color: #e2e8f0;
text-align: left;
transition: background var(--motion), border-color var(--motion), transform var(--motion);
}
.nav-item span {
font-size: var(--ds-text-body-14);
font-weight: 600;
line-height: 1.25;
}
.nav-item small {
color: #94a3b8;
font-size: var(--ds-text-micro-11);
line-height: 1.3;
}
select,
input,
textarea {
border-color: var(--line);
border-radius: var(--radius-md);
background: var(--surface);
color: var(--ink);
}
.main-pane {
background: var(--bg);
}
.workspace-hero {
min-height: 96px;
padding: 22px 30px;
background: var(--ds-color-surface);
border-bottom: 1px solid var(--line);
backdrop-filter: blur(18px);
}
.hero-copy {
margin-top: 6px;
color: var(--muted);
font-size: var(--ds-text-body-14);
line-height: 1.45;
}
.status-pill {
min-height: 34px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--accent-soft);
color: var(--accent);
}
.status-pill.soft {
border-color: rgba(6, 182, 212, 0.24);
background: var(--ds-color-cyan-soft);
color: #0891b2;
}
.status-pill.glass {
border-color: var(--line);
background: rgba(255, 255, 255, 0.62);
color: var(--ink-soft);
}
[data-theme="dark"] .status-pill.glass {
background: rgba(255, 255, 255, 0.06);
}
.workbench {
grid-template-columns: minmax(0, 1fr) minmax(340px, 430px);
}
.chat-pane {
background:
linear-gradient(180deg, rgba(6, 182, 212, 0.04), transparent 300px),
var(--bg);
}
.message-list {
gap: 20px;
padding: 36px min(6vw, 72px);
}
.workspace-welcome {
width: min(1120px, 100%);
max-width: none;
grid-template-columns: minmax(0, 1.05fr) minmax(320px, 0.95fr);
align-items: center;
margin: auto;
gap: 22px;
}
.welcome-intro,
.artifact-workspace,
.app-command-grid button {
border: 1px solid var(--line);
border-radius: var(--radius-2xl);
background: var(--ds-color-surface);
box-shadow: var(--shadow-panel);
}
.welcome-intro {
display: grid;
gap: 14px;
padding: clamp(22px, 4vw, 38px);
}
.welcome h2 {
max-width: 760px;
font-size: clamp(30px, 4vw, 48px);
letter-spacing: 0;
}
.artifact-workspace {
display: grid;
gap: 16px;
padding: 20px;
}
.artifact-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.artifact-head h3 {
margin: 3px 0 0;
font-size: 22px;
}
.artifact-head span {
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.artifact-preview-grid {
display: grid;
gap: 10px;
}
.artifact-preview-card {
display: grid;
gap: 5px;
min-height: 72px;
padding: 14px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
}
.artifact-preview-card strong {
font-size: var(--ds-text-body-14);
}
.artifact-preview-card span {
color: var(--muted);
font-size: var(--ds-text-caption-12);
}
.app-command-grid {
grid-column: 1 / -1;
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 12px;
}
.app-command-grid button {
display: grid;
gap: 5px;
min-height: 90px;
padding: 16px;
color: var(--ink);
text-align: left;
transition: border-color var(--motion), transform var(--motion), box-shadow var(--motion);
}
.app-command-grid button:hover,
.prompt-row button:hover,
.mini-card:hover,
.app-card:hover {
transform: translateY(-1px);
box-shadow: var(--shadow);
}
.app-command-grid strong {
font-size: var(--ds-text-body-15);
}
.app-command-grid span {
color: var(--muted);
font-size: var(--ds-text-caption-13);
}
.section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.section-head h3 {
margin: 2px 0 0;
font-size: var(--ds-text-title-18);
line-height: 1.25;
}
.prompt-row button,
.feedback-row button,
.message-label,
.message-body,
.mini-card,
.app-card,
.app-detail-panel,
.app-workflow-panel,
.app-input-fields,
.evidence-card,
.source-card,
.app-result-card,
.empty-note,
.document-actions button,
.app-menu-chip,
.login-dialog,
.login-card {
border-radius: var(--radius-lg);
}
.message {
grid-template-columns: 42px minmax(0, 820px);
}
.message-body {
background: var(--ds-color-surface);
box-shadow: var(--shadow-panel);
}
.message.user .message-body {
background: var(--accent-soft);
}
.message-document-location-row {
display: flex;
margin-top: var(--ds-space-2);
}
.message.user .message-document-location-row {
justify-content: flex-end;
}
.message-document-location-chip {
display: inline-flex;
min-height: 32px;
max-width: min(100%, 420px);
align-items: center;
gap: var(--ds-space-1);
padding: var(--ds-space-1) var(--ds-space-2);
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill, 999px);
background: var(--ds-color-surface);
color: var(--muted);
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-medium);
line-height: 1.35;
cursor: pointer;
}
.message-document-location-chip:hover {
border-color: var(--accent);
color: var(--ink);
}
.message-document-location-chip:focus-visible {
outline: 2px solid var(--accent);
outline-offset: 2px;
}
.message-document-location-chip .wds-inline-icon {
width: 14px;
height: 14px;
flex: 0 0 auto;
}
@media (pointer: coarse) {
.message-document-location-chip {
min-height: 44px;
}
}
/* ── 제목 사다리 (v8, 2026-08-07) ──
★실측으로 잡은 결함: `##`(h4)와 `###`(h5)가 **둘 다 16px** 이라 화면에서 구분이 안 됐고,
본문도 16px 이라 «굵은 문단»으로만 보였다. 마크다운 3단 구조가 화면에서 1단으로
뭉개진 것이 「문서처럼 안 읽힌다」의 가장 큰 원인이다.
연구 근거: 위계 신호 중 **크기가 가장 강하다**. 그래서 굵기·색이 아니라 크기로 세 칸을
벌린다 — 20 / 18 / 16.
★여백도 문서 관례로 바꾼다: 제목은 **위로 넓고 아래로 좁아야** 아래 본문과 한 덩어리로
묶인다(24 / 8). 기존 16/9 는 위아래가 거의 같아 제목이 어느 쪽에 속하는지 모호했다.
★굵기 (v10, 2026-08-07 — 소유자 승인). v8 은 UA 기본 굵기를 그대로 뒀는데, 그 값이
타이포 계약(doc 160: 400·500·600)을 벗어나 있었다. 이제 semibold 토큰으로 내린다.
★정적 CSS 만 읽으면 이 규칙에 굵기 선언이 없어 «본문 400 을 물려받는다»고 읽힌다 —
실측해야 UA 기본값이 이기고 있다는 게 보인다. 라이브 계산값으로 확인할 것.
★유예했던 이유였던 충돌은 실측으로 해소됐다: h5 는 본문과 같은 16px 이라 semibold 로
내리면 `**강조**`(16px·semibold)와 값이 같아지지만, h5 에는 **섹션 번호가 항상
앞에 붙는다**(h3 있는 문서 `1.1.1`, 없는 문서 `1.1` — 두 분기 모두 확인). 인라인
강조에는 번호가 없으므로 화면에서 섞이지 않는다. */
.message-body h3,
.message-body h4,
.message-body h5 {
margin: var(--ds-space-6) 0 var(--ds-space-2);
color: var(--ink);
font-weight: var(--ds-weight-semibold);
line-height: 1.3;
}
.message-body h3 {
font-size: var(--ds-text-title-20);
}
.message-body h4 {
font-size: var(--ds-text-title-18);
}
.message-body h5 {
font-size: var(--ds-text-body-16);
}
/* ── 문단 분리 (v8) ──
★실측: 문단 간격 10px 인데 행 높이는 27.2px — **0.37줄**밖에 안 벌어져 여러 문단이 한
덩어리로 흘렀다. 「문맥·문단이 분류가 안 된다」는 인상의 직접 원인이다.
0.74줄(20px)로 벌린다 — 한 줄을 통째로 비우면 목록·표와의 리듬이 무너지고, 0.5줄 아래면
지금 문제가 그대로 남는다.
★범위를 좁게 잡는다. 전역 `.message-body p` 를 건드리면 사용자 말풍선과 위젯 내부
문단(고지·근거 표기·타일 라벨)까지 벌어진다. **답변의 최상위 문단만** 겨냥한다 —
마크다운 렌더러는 블록을 `.message-body` 의 직계 자식으로 넣는다.
★★특이도를 «일부러 낮게» 잡는다 — (0,2,1). 처음엔
`.chatgpt-reference-v1 .message.assistant .message-body > p`(0,4,1)로 썼다가
`test_table_card_prose_specificity` 에 걸렸다. 그 게이트는 카드가 만드는
(`.md-table-provenance`·`.md-table-tile-label` 등, 0,3,0)가 **모든 산문 규칙을
이겨야** 한다고 요구하는데, 0,4,1 은 그것들을 눌러 버린다. `> p` 라서 실제로는
카드 문단에 닿지 않지만, 게이트는 «닿을 수 있는가»가 아니라 특이도만 보고 보수적으로
막는다 — 그 보수성이 옳다. 여기서 예외를 뚫는 대신 특이도를 낮춘다.
여백을 거는 규칙은 `.message-body p`(0,1,1) 하나뿐이라 (0,2,1)로 충분히 이긴다. */
.assistant .message-body > p {
margin-bottom: var(--ds-space-5);
}
/* ── 섹션 자동 번호 (v9, 2026-08-07) ──
★레퍼런스: Perplexity Research Report(1. / 1.1 / 1.2)·Dovetail(3.3). 번호가 붙는
순간 «대화 답변»이 «문서»로 읽힌다 — 조사한 문서형 AI 답변이 예외 없이 쓰는 장치다.
★렌더러를 안 고친다. 번호는 «표현»이지 «내용»이 아니므로 CSS 카운터로 붙인다 —
모델 출력에 번호를 넣으면 복사·내보내기한 원문이 오염되고, 답변마다 번호가 어긋난다.
★답변마다 1부터 다시 센다(카운터 리셋을 답변 뿌리에 둔다).
★번호는 본문보다 흐리게 — 문서의 «가구»이지 내용이 아니다. */
.assistant .message-body {
counter-reset: md-h3 md-h4 md-h5 md-table;
}
.assistant .message-body h3 {
counter-increment: md-h3;
counter-reset: md-h4 md-h5;
}
.assistant .message-body h4 {
counter-increment: md-h4;
counter-reset: md-h5;
}
.assistant .message-body h5 {
counter-increment: md-h5;
}
.assistant .message-body h3::before,
.assistant .message-body h4::before,
.assistant .message-body h5::before {
color: var(--cg-muted);
font-variant-numeric: tabular-nums;
font-weight: inherit;
}
.assistant .message-body h3::before {
content: counter(md-h3) ".";
}
/* ★`#` 이 하나도 없는 답변에서는 `##` 가 최상위다. 그때 `0.1` 로 찍히면 안 된다 —
실제 답변은 `##` 로 시작하는 경우가 흔하다. `:has()` 로 갈라 준다(이 리포에서 이미
140곳 넘게 쓰는 확립된 패턴). */
.assistant .message-body:has(h3) h4::before {
content: counter(md-h3) "." counter(md-h4);
}
.assistant .message-body:not(:has(h3)) h4::before {
content: counter(md-h4) ".";
}
.assistant .message-body:has(h3) h5::before {
content: counter(md-h3) "." counter(md-h4) "." counter(md-h5);
}
.assistant .message-body:not(:has(h3)):has(h4) h5::before {
content: counter(md-h4) "." counter(md-h5);
}
.assistant .message-body:not(:has(h3)):not(:has(h4)) h5::before {
content: counter(md-h5) ".";
}
.message-body code:not(pre code) {
padding: 2px 5px;
border-radius: var(--ds-radius-xs, 6px);
background: var(--surface-2);
color: var(--ink);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
}
.message-body pre,
.code-block,
.mini-card code {
border-radius: var(--radius-lg);
background: #0b1020;
}
/* Code-block card (doc 164): fenced code renders as a card — header bar (language label + copy
button) over a horizontally scrolling body — matching ChatGPT/Claude. The body stays dark in
both light and dark themes (like GitHub) so one syntax palette serves both; the header is a
lifted tone with a hairline divider. Colors are fixed here (not --cg-* tokens) because a
syntax theme is a self-contained palette on a fixed dark surface. */
.code-card {
/* ★v10 — 표와 같은 이유로 산문 리듬(20)에 맞춘다. 16 이면 이 블록 앞뒤에서만
간격이 좁아져 문서의 세로 리듬이 끊긴다. */
margin: var(--ds-space-5) 0;
border: 1px solid #23262f;
border-radius: 12px;
overflow: hidden;
background: #0d1017;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
}
.code-card-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 8px 6px 14px;
background: #161a22;
border-bottom: 1px solid #23262f;
}
.code-card-lang {
font-size: var(--ds-text-caption-12);
font-weight: 600;
letter-spacing: 0.01em;
color: #b3b9c5;
}
.code-card-copy {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 9px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: #aeb4c0;
font: inherit;
font-size: var(--ds-text-caption-12);
line-height: 1;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, border-color 120ms ease;
}
.code-card-copy:hover {
background: rgba(255, 255, 255, 0.07);
color: #e6e9ef;
}
.code-card-copy:focus-visible {
outline: none;
border-color: var(--cg-focus-ring, #6b8afd);
box-shadow: 0 0 0 2px rgba(107, 138, 253, 0.35);
}
.code-card-copy.is-copied {
color: #6ee7a8;
}
.code-card-copy-icon {
display: inline-flex;
}
.code-card-copy-icon svg,
.code-card-copy-icon .wds-inline-icon {
width: 14px;
height: 14px;
}
.code-card-scroll {
overflow-x: auto;
}
.code-card pre.code-block {
margin: 0;
padding: 12px 14px;
border-radius: 0;
background: transparent;
}
.code-card pre.code-block code {
font-family: inherit;
font-size: var(--ds-text-caption-13);
line-height: 1.6;
color: #dfe3ea;
white-space: pre;
}
@media (prefers-reduced-motion: reduce) {
.code-card-copy {
transition: none;
}
}
/* Long code blocks (>18 lines) start collapsed: a height-capped, bottom-faded preview with a
더보기/접기 toggle (render2 — mobile scroll-bloat guard). Copy still grabs the full source. */
.code-card--collapsible.is-collapsed .code-card-scroll {
max-height: 22rem;
overflow-y: hidden;
position: relative;
}
.code-card--collapsible.is-collapsed .code-card-scroll::after {
content: "";
position: absolute;
left: 0;
right: 0;
bottom: 0;
height: 3.25rem;
pointer-events: none;
background: linear-gradient(180deg, rgba(13, 16, 23, 0), #0d1017);
}
.code-card-toggle {
display: flex;
align-items: center;
justify-content: center;
width: 100%;
padding: 8px;
border: 0;
border-top: 1px solid #23262f;
background: #12151d;
color: #aeb4c0;
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: 600;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.code-card-toggle:hover {
background: rgba(255, 255, 255, 0.05);
color: #e6e9ef;
}
.code-card-toggle:focus-visible {
outline: none;
box-shadow: inset 0 0 0 2px rgba(107, 138, 253, 0.4);
}
@media (prefers-reduced-motion: reduce) {
.code-card-toggle {
transition: none;
}
}
/* highlight.js token palette (atom-one-dark), scoped to the card so it never leaks. */
.code-card .hljs-comment,
.code-card .hljs-quote {
color: #7c828d;
font-style: italic;
}
.code-card .hljs-doctag,
.code-card .hljs-keyword,
.code-card .hljs-formula {
color: #c678dd;
}
.code-card .hljs-section,
.code-card .hljs-name,
.code-card .hljs-selector-tag,
.code-card .hljs-deletion,
.code-card .hljs-subst {
color: #e06c75;
}
.code-card .hljs-literal {
color: #56b6c2;
}
.code-card .hljs-string,
.code-card .hljs-regexp,
.code-card .hljs-addition,
.code-card .hljs-attribute,
.code-card .hljs-meta .hljs-string {
color: #98c379;
}
.code-card .hljs-attr,
.code-card .hljs-variable,
.code-card .hljs-template-variable,
.code-card .hljs-type,
.code-card .hljs-selector-class,
.code-card .hljs-selector-attr,
.code-card .hljs-selector-pseudo,
.code-card .hljs-number {
color: #d19a66;
}
.code-card .hljs-symbol,
.code-card .hljs-bullet,
.code-card .hljs-link,
.code-card .hljs-meta,
.code-card .hljs-selector-id,
.code-card .hljs-title {
color: #61aeee;
}
.code-card .hljs-built_in,
.code-card .hljs-title.class_,
.code-card .hljs-class .hljs-title {
color: #e6c07b;
}
.code-card .hljs-emphasis {
font-style: italic;
}
.code-card .hljs-strong {
font-weight: 600;
}
.code-card .hljs-link {
text-decoration: underline;
}
/* Non-http markdown links (local paths) degrade to an inline code chip; break long paths so
they wrap inside the bubble instead of forcing horizontal overflow. */
.message-body code.md-path {
word-break: break-all;
}
/* Markdown renderer v2 (doc 161 P1): real lists/tables/quotes/callouts from renderMarkdownLite.
Tokens only (--cg-* 와 --wds-* + legacy fallbacks) — no raw colors, no !important. */
.message-body .md-list {
margin: var(--ds-space-2) 0 var(--ds-space-5);
padding-left: 22px;
display: grid;
/* ★v11 — 항목 간격을 스케일로 올린다(5px → 12px). v8 이 산문 여백을 스케일로 접을 때
목록 «안»은 손대지 않아 임의값이 남아 있었다.
★근거는 취향이 아니라 실측이다: 줄바꿈된 항목 «안»의 줄 사이가 7px 인데 항목 «사이»가
5px 이었다 — 항목끼리가 줄끼리보다 «가까워서» 두 줄짜리 항목이 두 개 항목처럼 읽혔다.
항목 경계가 보이려면 항목 사이 > 줄 사이여야 한다.
★8px(--ds-space-2) 도 조건은 넘지만 여유가 1px 뿐이라 폰트·폭·모바일에서 쉽게 뒤집힌다.
문단 간격(20px)보다는 작아야 목록이 «한 묶음»으로 남는다 — 그 사이 값이 12px 이다. */
gap: var(--ds-space-3);
}
.message-body .md-list li {
line-height: 1.62;
}
.message-body .md-list li::marker {
color: var(--cg-muted, var(--muted));
}
.message-body .md-list ul,
.message-body .md-list ol {
/* ★중첩 목록은 부모 항목에 «붙어야» 한다 — 자기 항목 사이(8px)보다 부모와의 거리가
가까워야 종속 관계로 읽힌다. 그래서 위 여백은 한 칸 더 작게 잡는다. */
margin: var(--ds-space-1) 0 0;
padding-left: 18px;
display: grid;
/* ★최상위(12px)보다 좁혀 위계를 준다. 다만 줄 사이(7px)는 넘어야 하므로 8px 이 하한이다. */
gap: var(--ds-space-2);
}
/* ── 답변 속 차트 (차트 표준 규칙 5) ─────────────────────────────────────────────
★카드로 승격하지 않는다. 표를 카드에서 내린 v7 과 같은 판단이며, 차트는 본문의
또 하나의 «형제 블록»이다 — 표의 다른 «뷰»가 아니다(토글하지 않는다).
★모든 값은 토큰이다. 안티드리프트 래칫이 여유 0이라 원시 hex·그림자·반경·크기를
하나도 더 넣을 수 없다. 계열색은 `--ds-chart-slot-*`(두 표면에서 검증 통과). */
.md-chart {
margin: var(--ds-space-5) 0; /* 산문 리듬과 같은 값 — 차트에서만 리듬이 끊기지 않게 */
position: relative;
}
/* ★타입 사다리 — 크기«와» 굵기 둘로 역할을 가른다. 크기만으로 나누면
범례가 부제와 같은 층으로 읽힌다(목업 실측에서 둘 다 14/400 이었다). */
.md-chart-title {
font-size: var(--ds-text-body-16);
font-weight: var(--ds-weight-semibold);
color: var(--ink);
}
.md-chart-subtitle {
font-size: var(--ds-text-body-14);
font-weight: var(--ds-weight-regular);
color: var(--cg-text-soft, var(--muted));
margin-top: var(--ds-space-1);
}
.md-chart-footnote {
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-regular);
color: var(--cg-muted, var(--muted));
margin-top: var(--ds-space-2);
}
.md-chart-area {
margin-top: var(--ds-space-3);
position: relative;
}
.md-chart-area svg {
display: block;
width: 100%;
height: auto;
overflow: visible;
touch-action: none;
}
/* 글자 폭 측정용 — 화면에 나오지 않는다 */
.md-chart-measure {
position: absolute;
visibility: hidden;
width: 0;
height: 0;
}
/* 격자·축 — 1px «실선», 표면에서 한 단계. 점선은 눈에 띄어 데이터와 경쟁하고
«임계값/추정»으로 오독된다. */
.md-chart-grid {
stroke: var(--cg-menu-border, var(--line));
stroke-width: 1;
}
.md-chart-tick {
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-regular);
fill: var(--cg-text-soft, var(--muted));
font-variant-numeric: tabular-nums;
}
/* 값은 이 표면에서 가장 굵다 — 축 라벨보다 위계가 높다 */
.md-chart-value {
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-semibold);
fill: var(--ink);
font-variant-numeric: tabular-nums;
}
.md-chart-line {
fill: none;
stroke-width: 2;
stroke-linejoin: round;
stroke-linecap: round;
}
/* 마커·조각의 «2px 표면 링/간격» — 마크를 가르는 것은 테두리가 아니라 여백이다 */
.md-chart-dot,
.md-chart-slice {
stroke: var(--bg);
stroke-width: 2;
}
.md-chart-cross {
stroke: var(--cg-menu-border, var(--line));
stroke-width: 1;
pointer-events: none;
}
.md-chart-lift {
fill: var(--cg-hover-soft);
pointer-events: none;
}
.md-chart-focus-dot {
pointer-events: none;
}
/* 히트 영역은 «칠해진 픽셀»이 아니라 잡을 수 있는 넓이 */
.md-chart-hit {
fill: transparent;
}
.md-chart-hit:focus-visible,
.md-chart-slice:focus-visible {
outline: 2px solid var(--ink);
outline-offset: -2px;
}
/* ★키 모양이 마크를 비춘다 — 범례와 툴팁이 «같은» 모양을 써야 한 계열에 인코딩이
둘로 갈리지 않는다(Carbon: 범례는 색·모양·크기와 데이터의 연결을 정의한다). */
.md-chart-key {
display: inline-block;
flex: none;
}
.md-chart-key.line {
width: var(--ds-space-3);
height: 2px;
border-radius: var(--ds-radius-2xs);
}
.md-chart-key.rect {
width: var(--ds-space-2);
height: var(--ds-space-2);
border-radius: var(--ds-radius-2xs);
}
.md-chart-legend {
display: flex;
flex-wrap: wrap;
gap: var(--ds-space-2) var(--ds-space-4);
margin-top: var(--ds-space-3);
}
.md-chart-legend-item {
/* ★아래 터치 슬롭(::after)의 기준 상자. 보이는 크기는 이 규칙이 그대로 소유한다. */
position: relative;
display: inline-flex;
align-items: center;
gap: var(--ds-space-2);
font-size: var(--ds-text-caption-13);
font-weight: var(--ds-weight-medium);
color: var(--ink);
background: none;
border: 0;
padding: var(--ds-space-1) var(--ds-space-2);
margin: calc(var(--ds-space-1) * -1) calc(var(--ds-space-2) * -1);
border-radius: var(--ds-radius-xs);
cursor: pointer;
}
/* ★터치에서 `:hover` 는 «다른 곳을 누를 때까지» 붙는다 — 마우스가 없으니 뗄 계기가 없다.
범례는 `aria-pressed` 로 켜짐/꺼짐을 말하는데, 끈적이는 면이 그 신호와 겹쳐 «어느 계열이
켜져 있나»를 거짓으로 읽히게 만든다. 2026-08-08 표 행에서 같은 병을 고쳤다(같은 가드). */
@media (hover: hover) {
.md-chart-legend-item:hover:not([disabled]) {
background: var(--cg-hover-soft);
}
}
.md-chart-legend-item:focus-visible {
outline: 2px solid var(--ink);
outline-offset: 1px;
}
.md-chart-legend-item[disabled] {
cursor: default;
}
/* ★숨김을 «흐림»만으로 표시하면 색약·저대비에서 안 보인다 — 취소선으로 형태도 준다 */
.md-chart-legend-item[aria-pressed="false"] {
color: var(--cg-muted, var(--muted));
}
.md-chart-legend-item[aria-pressed="false"] .md-chart-legend-name {
text-decoration: line-through;
}
.md-chart-legend-item[aria-pressed="false"] .md-chart-key {
opacity: 0.35;
}
/* ★깊이: 차트는 평면이고 떠 있는 것은 툴팁 하나뿐이다. 그림자는 시스템 토큰을 쓴다. */
.md-chart-tip {
position: absolute;
z-index: 5;
min-width: 128px;
pointer-events: none;
/* 반전 칩 — 정의된 잉크/바탕 쌍을 뒤집어 쓴다. 없는 토큰을 지어내면
선언이 통째로 무효가 되어 배경이 투명해진다(뷰토글에서 겪은 결함). */
background: var(--ink);
color: var(--bg);
border-radius: var(--ds-radius-xs);
box-shadow: var(--ds-shadow-md);
padding: var(--ds-space-2) var(--ds-space-3);
font-size: var(--ds-text-caption-12);
opacity: 0;
transform: translateY(2px);
transition: opacity 120ms ease, transform 120ms ease;
}
.md-chart-tip[data-open] {
opacity: 1;
transform: none;
}
/* 툴팁 안에서는 «값»이 앞장서고 이름이 따라온다 — 범례와 반대다.
여기서는 이미 계열을 알고 숫자를 원한다. */
.md-chart-tip-head {
font-weight: var(--ds-weight-semibold);
margin-bottom: var(--ds-space-1);
}
.md-chart-tip-row {
display: flex;
align-items: center;
gap: var(--ds-space-2);
}
.md-chart-tip-row + .md-chart-tip-row {
margin-top: var(--ds-space-1);
}
.md-chart-tip-name {
flex: 1;
opacity: 0.72;
}
.md-chart-tip-value {
font-weight: var(--ds-weight-semibold);
font-variant-numeric: tabular-nums;
}
/* 수화 전·검증 실패 시에는 소스가 그대로 남는다 — 깨진 차트를 그리지 않는다 */
.md-chart[data-chart-pending] .md-chart-source,
.md-chart:not([data-chart-type]) .md-chart-source {
display: block;
}
.md-chart[data-chart-type] .md-chart-source {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.md-chart-tip {
transition: none;
}
}
/* Two-zone card (user request 2026-07-18, ref: 상세내역 report): the wrap is a tinted outer card
holding a header band (toolbar) above a distinct white table block (.md-table-frame). No
overflow clip here — the frame owns its own rounded clip; the wrap just pads the two zones. */
.md-table-wrap {
/* ★v7 — 카드 승격을 되돌린다(사용자 승인, 2026-08-06 목업 B안).
v6는 이 블록을 뉴스 위젯과 같은 «들어올린 카드»로 만들었다(반경 22px·리프트
그림자·여백 24px·흰 면). 한 답변에 표가 둘 이상 나오면 산문 → 카드 → 산문이
반복되며 답변이 «문서»가 아니라 «위젯 나열»로 읽혔다 — 사용자 지적의 원인이다.
★업계 실측(Mobbin 2026-08-06: Claude·ChatGPT·Grok·Perplexity·Mistral Le Chat)에서
답변 속 표를 카드로 승격한 제품은 하나도 없었다. 전부 본문 흐름 안의 평면 표다.
카드는 축·범례가 있어 경계가 필요한 «차트»에만 쓴다(Databricks Genie·Langdock).
★래퍼 자체는 남긴다 — 없애면 안 된다. 이 요소는 고지(risk notice) 마운트 앵커이자
모바일 액션 알약의 위치 기준이고, 제목·종류칩·뷰토글이 여기 안에서 산문 규칙을
이기는 특이도를 얻는다. «카드가 아니게» 만드는 것이지 «없애는» 것이 아니다. */
position: relative;
/* ★v10 — 산문 리듬에 맞춘다. v7 이 여기에 12/16 을 임의로 넣는 바람에 표 앞뒤만
16px 이 되어, 문단·목록·인용이 모두 20px 인 흐름에서 표에서만 리듬이 끊겼다.
★선언값이 아니라 **실제 렌더 간격**으로 잡은 결함이다. 위쪽 12 는 앞 문단의
20 과 상쇄돼 화면에는 20 으로 보이고, 아래쪽 16 만 튄다 — 선언만 읽으면
«12/16 두 곳이 어긋난다»고 오진한다. 위아래 모두 산문과 같은 값으로 통일한다. */
margin: var(--ds-space-5) 0;
}
/* The framed table block — a white surface with its own hairline + radius, sat inside the tinted
card so it reads as a separate object from the header band above it. This is also the
non-scrolling layer that anchors the edge-fade affordance. */
.md-table-frame {
/* ★자기 테두리를 버린다. 카드가 곧 프레임이라 안쪽이 테두리를 유지하면 이중 테두리가
된다 — 그 겹침이 «문서» 느낌의 절반이었다. 엣지 페이드는 여기 그대로 산다. */
position: relative;
overflow: hidden;
background: var(--cg-surface, #fff);
}
/* The inner layer scrolls; the frame stays put so the edge fades can sit fixed at its edges. */
.md-table-scroll {
overflow-x: auto;
scrollbar-width: none;
}
.md-table-scroll::-webkit-scrollbar {
display: none;
}
/* Desktop / mouse pointers can't flick a wide table sideways the way touch can, so show a real,
always-visible horizontal scrollbar under the table there. Touch devices (coarse pointer) keep
the hidden bar + edge fades — the drag gesture is the natural affordance. Styling the WebKit
scrollbar also opts the bar out of macOS overlay auto-hide, so it stays visible while it's needed
(overflow-x:auto still only paints it when the table actually overflows). */
@media (hover: hover) and (pointer: fine) {
.md-table-scroll {
scrollbar-width: thin;
scrollbar-color: var(--cg-scrollbar-thumb) var(--cg-scrollbar-track);
}
.md-table-scroll::-webkit-scrollbar {
display: block;
height: 10px;
}
/* Mirror the app's existing themed scrollbar (see .chatgpt-reference-v1 scrollbar block): the
dark-mode-aware --cg-scrollbar-thumb token + inset thumb, not a hardcoded gray. */
.md-table-scroll::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-scrollbar-thumb);
background-clip: content-box;
}
}
.md-table-scroll:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: -2px;
}
/* Honest "more content" fades (doc 168): JS sets data-fade-left/right only while there is
actually content beyond that edge, so the gradient never lies about scrollability. */
.md-table-frame::before,
.md-table-frame::after {
content: "";
position: absolute;
top: 0;
bottom: 0;
width: 26px;
opacity: 0;
pointer-events: none;
transition: opacity 140ms ease;
z-index: 1;
}
.md-table-frame::before {
left: 0;
background: linear-gradient(90deg, var(--cg-surface, #fff), transparent);
}
.md-table-frame::after {
right: 0;
background: linear-gradient(270deg, var(--cg-surface, #fff), transparent);
}
.md-table-frame[data-fade-left="1"]::before {
opacity: 1;
}
.md-table-frame[data-fade-right="1"]::after {
opacity: 1;
}
.md-table {
width: 100%;
min-width: 340px;
border-collapse: collapse;
font-size: var(--cg-text-label-size, 14px);
}
.md-table th,
.md-table td {
padding: var(--ds-space-2) var(--ds-space-3);
border-bottom: 1px solid var(--cg-menu-border, var(--line));
text-align: left;
vertical-align: top;
line-height: 1.5;
}
/* 3+ columns = a comparison grid: give every column readable breathing room so a narrow
viewport SCROLLS the grid instead of squeezing Korean text into letter ribbons (NN/g:
wordy cells stay legible in at most 2 mobile columns — beyond that, preserve structure). */
.md-table--wide th,
.md-table--wide td {
min-width: 132px;
}
/* ── 타이포 위계 (①, doc 234) ──
★실측: 헤더도 본문도 14px에 굵기는 500/600 두 칸뿐이었다. 100 차이는 눈에 거의 안
보이므로 헤더와 데이터를 가르는 것이 사실상 회색 하나였다 — 「문서 같다」는 인상의 뿌리.
조사 결론이 「글꼴을 바꾸지 말고 굵기로 위계를 세워라」인데 그 채널을 안 쓰고 있었다.
사다리를 세 칸으로 벌린다: 본문 400 < 행 식별자 600 < 열 머리글 700.
★열 머리글은 작아지고 굵어진다 — 데이터 표의 관례이자, 크기·굵기 두 채널을 동시에 쓰는
유일한 방법이다. 작아진 만큼 자간을 열어 판독성을 지킨다(조사: 작은 크기에서 자간 증가).
★모바일 kv 스택은 thead를 display:none으로 숨기므로 이 변경이 닿지 않는다
(`test_table_typographic_hierarchy.py`가 그 전제를 지킨다). */
.md-table thead th {
/* ★v7 — 머리글 행을 연회색 밴드로 세운다(사용자 요청 2026-08-06: 「진짜 표처럼 타이틀·
내용 구분」). 카드를 걷어내며 흰 면이 사라지자 머리글과 본문을 가르는 채널이 글자
색·크기·굵기뿐이 되었다 — 면(background)이 그 셋보다 먼저 읽힌다.
★hex 폴백을 붙이지 않는다. `var(--x, #fff)` 의 폴백도 드리프트 래칫의 raw-color 로
세어지고, 그 카운터는 여유가 0이다. 토큰이 없으면 투명이 되는 편이 낫다 —
폴백이 죽은 토큰을 숨기는 문제도 같이 피한다. */
background: var(--cg-hover-soft);
color: var(--cg-text-soft, var(--muted));
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-bold);
letter-spacing: 0.03em;
white-space: nowrap;
}
.md-table tbody th {
font-weight: var(--ds-weight-semibold);
}
/* ★본문 굵기를 «명시»한다. 상속에 맡기면 사다리의 맨 아래 칸이 어디서 오는지 알 수 없고,
위쪽 산문 규칙이 바뀌면 위계가 조용히 무너진다. */
.md-table tbody td {
font-weight: var(--ds-weight-regular);
}
.md-table tbody tr:last-child th,
.md-table tbody tr:last-child td {
border-bottom: 0;
}
/* Standard alignment (F1 table card redesign, doc 171): a numeric column right-aligns its
header AND its data cells together — header/data alignment mismatch was the main legibility
complaint in the B안 review. Tabular figures keep digit columns from jittering row to row. */
.md-table .is-num {
text-align: right;
font-variant-numeric: tabular-nums;
}
/* Row hover only makes sense in the real grid — the kv mobile stack below repurposes th/td as
block-level label/value pairs, where a row "highlight" would just be visual noise. */
/* ★`@media (hover: hover)` 가 없으면 터치 기기에서 이 배경이 «끈적인다».
iOS 는 탭한 요소에 `:hover` 를 걸고 **다른 곳을 누를 때까지 유지**한다 — 마우스가 없으니
뗄 계기가 없다. 2026-08-08 iPhone 17 실측에서 카드 줄을 탭하면 회색 띠가 남았고, 그
띠에 «검은 사각형»이 뚫려 보였다: 이 규칙은 `tr` 이 아니라 **`th`/`td` 에** 칠하는데
카드 리스트에서 행이 `display: grid` 라 셀 사이 `column-gap` 이 칠해지지 않고 캔버스가
비친다. 원인을 찾기까지 캐럿·고정 열·탭 하이라이트·눌림 클래스·텍스트 선택을 차례로
지웠다 — 전부 아니었고, 답은 «마우스 전용 피드백이 터치에 새어 나온 것»이었다.
★리포는 이 가드를 이미 30곳에서 쓴다. 이 표면만 빠져 있었다. */
@media (hover: hover) {
.md-table tbody tr:hover th,
.md-table tbody tr:hover td {
background: var(--cg-hover-soft, #f7f7f8);
}
}
/* Totals row (F1): the last body row is flagged when its row-header label matches a summary
word (합계/총계/총합/계/소계/Total/Sum) — a heavier top rule + bold weight sets it apart from
the data rows above it without a full background block. */
.md-table .md-table-total-row th,
.md-table .md-table-total-row td {
border-top: 1.5px solid var(--cg-menu-border, #e3e3e3);
/* ★토큰이어야 한다. 원래 `#fcfcfc` 였는데 원시 hex 라 테마를 못 따라갔다 — 다크에서
글자만 밝아지고 면은 흰색에 남아 대비 **1.15:1**, 사실상 안 보였다(2026-08-08 실측.
라이트에서는 18.94:1 이라 아무 신호가 없었다).
★지표 타일 띠·머리글 밴드가 이미 쓰는 «요약 면» 어휘를 그대로 쓴다. 셋 다 같은 성격의
면이라 어휘를 나눌 이유가 없다. */
background: var(--cg-hover-soft);
font-weight: 600;
}
/* Formula-cell indicator (F1, visual only — evaluation lands in F2): a small dot after a cell
whose raw text starts with "=" flags it as a spreadsheet-style formula reference. */
.md-table .md-formula-dot {
display: inline-block;
width: 6px;
height: 6px;
margin-left: var(--ds-space-1);
vertical-align: middle;
border-radius: 50%;
background: #16a34a;
}
/* 2-column key-value table → stacked label/value cards on a phone (doc 168, Codex-TUI record
transform): rows are independent items (no comparison axis), so stacking loses nothing and
reads like the list the narrow screen wants. The generic 2-col header adds no information
once each label sits directly above its value, so it is dropped (CSS-Tricks canonical). */
@media (max-width: 520px) {
.md-table--kv,
.md-table--kv tbody,
.md-table--kv tr,
.md-table--kv th,
.md-table--kv td {
display: block;
}
.md-table--kv thead {
display: none;
}
.md-table--kv tbody tr {
padding: var(--ds-space-2) var(--ds-space-3);
}
.md-table--kv tbody tr + tr {
border-top: 1px solid var(--cg-menu-border, var(--line));
}
.md-table--kv tbody th,
.md-table--kv tbody td {
padding: 0;
border-bottom: 0;
}
.md-table--kv tbody th {
margin-bottom: 2px;
font-size: var(--cg-text-meta-size, 12px);
color: var(--cg-muted, var(--muted));
}
/* The stacked card reads top-to-bottom (label above value) — a right-aligned numeric value
against the card's full width would float away from its label, so realign left here. */
.md-table--kv tbody .is-num {
text-align: left;
}
/* ★kv 스택은 th/td를 block으로 바꾼다. 거기서 sticky는 의미가 없고 배경만 남아
스택 카드의 라벨 줄에 엉뚱한 면이 생긴다. */
.md-table-scroll .md-table--kv th:first-child,
.md-table-scroll .md-table--kv td:first-child {
position: static;
background: transparent;
box-shadow: none;
}
/* ── 3열 이상 표 = 카드 리스트 (B2 — 요약 줄 + 펼침, 소유자 결정 2026-08-08) ──
★2열 표는 위 `md-table--kv` 가 이미 라벨/값 카드로 스택한다. 여기서 다루는 것은 3열
이상, 즉 «비교 축이 있는» 표다. 그래서 통째로 카드로 쪼개지 않는다 — 접힌 상태에서
이름과 대표값이 한 줄로 남아 세로로 정렬되고, 그래서 열 방향 비교가 살아 있다.
★조사 경고를 그대로 받는다: 「카드는 훑기용, 표는 비교용」. 행을 통째로 카드로 쪼개는
B1 안은 5행 표를 화면 4개 높이로 만들면서 「어느 분기가 가장 컸나」를 잃는다 —
좁은 화면에서 «공간을 아껴 읽는다»는 목표와 반대로 간다.
★DOM 은 표 그대로다. 표시만 바꾼다 — 시맨틱·내보내기·수식 치환이 전부 그대로 산다. */
.md-table--wide[data-card-list="1"],
.md-table--wide[data-card-list="1"] tbody,
.md-table--wide[data-card-list="1"] th,
.md-table--wide[data-card-list="1"] td {
display: block;
}
/* ★머리글을 지우지 않고 감춘다. 스크린리더는 여전히 열 이름을 듣고, 각 값 앞에는
아래 `::before` 가 같은 이름을 다시 붙인다. */
.md-table--wide[data-card-list="1"] thead {
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.md-table--wide[data-card-list="1"] tbody tr {
display: grid;
grid-template-columns: 1fr auto;
align-items: baseline;
column-gap: var(--ds-space-3);
padding: var(--ds-space-3) var(--ds-space-1);
/* ★44px 는 스케일 단계가 아니라 터치 표적이다(같은 파일 알약 주석과 같은 상수). */
min-height: var(--md-table-pill-target, 44px);
border-top: 1px solid var(--cg-menu-border, var(--line));
cursor: pointer;
}
.md-table--wide[data-card-list="1"] tbody th,
.md-table--wide[data-card-list="1"] tbody td {
padding: 0;
border: 0;
}
.md-table--wide[data-card-list="1"] tbody tr:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 2px;
}
/* ★탭한 행에 회색 면과 «검은 사각형»이 남았다(2026-08-08 iPhone 17 실측).
추측을 두 번 하고 두 번 틀린 뒤에야 측정으로 좁혔다. 증거 셋:
1. Chrome 에서 같은 DOM·같은 선언으로 재현하니 행 안에 면을 그리는 것은 초록
수식 점 둘뿐이고, 행을 덮는 외부 요소는 **0개**였다 → 레이아웃이 아니다.
2. 시뮬레이터에서 **다른 곳을 탭하자 회색 면과 검은 사각형이 함께 사라졌다**.
행은 펼쳐진 채였다 → 상태가 아니라 «탭에 딸린 일시 표시»다.
3. 리포 전역에 `-webkit-tap-highlight-color` 선언이 하나도 없다 → 이 표면은
Safari 기본 탭 하이라이트를 그대로 쓰고 있었다.
★행이 `display: grid` 라 하이라이트가 칠하는 클라이언트 사각형이 셀별로 쪼개지고,
그 사이에 네모난 조각이 남는다 — 그것이 «검은 사각형»으로 보였다.
★`user-select: none` 을 행 전체에 주지 **않는다**. 그러면 폰에서 숫자 하나를 길게
눌러 복사하는 길이 막히고, 「표 전체를 내보내세요」는 그보다 나쁜 답이다. */
.md-table--wide[data-card-list="1"] tbody tr[data-card-row] {
-webkit-tap-highlight-color: transparent;
/* ★진짜 원인은 **텍스트 선택**이었다. Chrome 에서 같은 행을 선택시켜 재보니 선택
하이라이트가 클라이언트 사각형 **8개**로 쪼개졌다 — 첫 줄에서 이름 칸이
`x 4→609`, 값 칸이 `x 621→753`. 그 사이 그리드 간격이 칠해지지 않고 남아
**캔버스가 비쳐 보이는 검은 조각**이 된다. 회색 띠는 선택 하이라이트 자체다.
탭이 선택을 만드는 이유: 이름 칸은 `1fr` 이라 짧은 글자 뒤로 빈 공간이 넓고,
그 빈 곳을 누르면 Safari 가 선택 제스처로 읽는다.
★그래서 «누르는 상자»는 선택 불가로, «데이터»는 선택 가능으로 나눈다. 행 전체를
막는 쉬운 답은 폰에서 숫자 하나 복사하는 길을 없앤다 — 아래에서 되돌린다. */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
/* ★값과 상세는 다시 고를 수 있게 되돌린다. 카드 리스트를 만든 이유가 좁은 화면에서
값을 «읽게» 하는 것인데, 읽은 값을 가져갈 수 없으면 반쯤만 한 것이다. */
.md-table--wide[data-card-list="1"] tbody [data-card="value"],
.md-table--wide[data-card-list="1"] tbody [data-card="detail"] {
-webkit-user-select: text;
user-select: text;
}
/* 요약 줄 — 이름 왼쪽, 대표값 오른쪽. 접혀 있어도 이 두 칸은 언제나 보인다. */
.md-table--wide[data-card-list="1"] tbody [data-card="key"] {
grid-column: 1;
text-align: left;
font-weight: var(--ds-weight-semibold);
}
.md-table--wide[data-card-list="1"] tbody [data-card="value"] {
grid-column: 2;
text-align: right;
font-variant-numeric: tabular-nums;
}
/* ★펼침 표시는 생성 콘텐츠다. 셀에 텍스트 노드를 넣으면 복사·엑셀·CSV 가 전부
「1,200 ▾」이 된다 — 내보내기는 `textContent` 를 읽고 복사는 raw `outerHTML` 을 싣는다. */
.md-table--wide[data-card-list="1"] tbody tr[data-card-row] [data-card="value"]::after {
content: "▾";
margin-left: var(--ds-space-2);
color: var(--cg-muted);
font-size: var(--cg-text-meta-size);
}
.md-table--wide[data-card-list="1"] tbody tr[data-expanded="1"] [data-card="value"]::after {
content: "▴";
}
/* 상세 — 펼쳤을 때만. 라벨:값 한 줄. */
.md-table--wide[data-card-list="1"] tbody [data-card="detail"] {
grid-column: 1 / -1;
display: flex;
align-items: baseline;
/* ★`space-between` 이면 안 된다(2026-08-08 iOS 시뮬레이터 실측). 셀은 자식이 하나가
아니다 — 수식 평가 셀은 「값 텍스트 + 평가 표시 점」 둘을 담고, flex 는 익명 텍스트
노드까지 아이템으로 세므로 [라벨][값][점] **셋**이 고르게 벌어져 값이 한가운데로
떠 버린다. 라벨만 밀어내면 값과 점은 붙은 채 오른쪽으로 간다. */
justify-content: flex-start;
gap: var(--ds-space-1);
padding-top: var(--ds-space-1);
}
.md-table--wide[data-card-list="1"] tbody [data-card="detail"]::before {
content: attr(data-label);
margin-right: auto;
padding-right: var(--ds-space-3);
color: var(--cg-muted);
font-size: var(--cg-text-meta-size);
}
.md-table--wide[data-card-list="1"] tbody tr:not([data-expanded="1"]) [data-card="detail"] {
display: none;
}
/* ★스택에서 sticky 는 의미가 없고 배경만 남아 이름 줄에 엉뚱한 면이 생긴다
(위 `md-table--kv` 가 같은 이유로 같은 것을 한다). */
/* ★추이 열도 «오른쪽 고정»이다 — 첫 열 고정의 거울상이라 같은 병이 걸린다.
2026-08-08 iPhone 17 실측: 카드를 펼치면 이름 오른쪽에 검은 사각형이 떴다. 스택에서
`position: sticky` 는 붙을 축이 없어 아무 일도 안 하는데 `background`·`box-shadow`·
`z-index: 2` 는 그대로 살아 남의 줄 «위»에 면을 그린다(다크 캔버스라 검정으로 보였다).
★캐럿인 줄 알고 `caret-color` 부터 손댔다가 틀렸다 — 화면만 보고 원인을 지어낸 것이다.
선언을 읽으니 리포 주석이 이 실패 모드를 kv 변형에 대해 이미 적어 두고 있었다. */
/* ★카드 리스트에서는 레일을 그리지 않는다. 레일의 일은 «행과 행을 세로로 잇는 것»인데,
스택에서는 행 사이가 카드 경계로 갈라져 선이 토막난다 — 이으려던 것을 못 잇고
조각만 남는다. 순서는 이미 카드가 위에서 아래로 읽히는 것이 말해 준다.
★`content: none` 으로 끈다. 규칙 자체를 좁은 폭 밖에 두면 넓은 화면과 어긋난다. */
.md-table--wide[data-card-list="1"] th.md-table-timeline::before,
.md-table--wide[data-card-list="1"] td.md-table-timeline::before,
.md-table--wide[data-card-list="1"] th.md-table-timeline::after,
.md-table--wide[data-card-list="1"] td.md-table-timeline::after {
content: none;
}
.md-table--wide[data-card-list="1"] th.md-table-timeline,
.md-table--wide[data-card-list="1"] td.md-table-timeline {
padding-left: 0;
}
.md-table-scroll .md-table--wide[data-card-list="1"] .md-table-sparkline-head,
.md-table-scroll .md-table--wide[data-card-list="1"] .md-table-sparkline-cell,
.md-table-scroll .md-table--wide[data-card-list="1"] th:first-child,
.md-table-scroll .md-table--wide[data-card-list="1"] td:first-child {
position: static;
background: transparent;
box-shadow: none;
/* ★`width` 도 되돌려야 한다. 추이 열은 넓은 화면에서 「내용만큼만」 차지하려고
`width: 1%` 를 쓰는데, 스택에서는 그 선언이 `grid-column: 1 / -1` 을 **이겨**
상세 줄 하나만 좁아진다(2026-08-08 실측: 다른 상세 749px vs 추이 132px).
고정을 되돌릴 때 면·그림자만 챙기고 폭을 빠뜨린 것이 이 결함이었다 — 넓은 화면
전용 선언은 «전부» 되돌려야 한다. */
width: auto;
}
/* ★선도 오른쪽 끝에 앉아야 한다. 넓은 화면에서 선은 좁은 열 «가운데»에 놓이려고
`margin: 0 auto` 를 쓰는데, 상세 줄이 전체 폭이 되자 그 auto 가 216px 로 풀려
선이 허공 한가운데 떴다(2026-08-08 실기기 실측: 셀은 4→753 인데 선은 473→537).
★같은 카드 안에서 다른 상세 값은 전부 오른쪽 끝 정렬이다 — 선만 다른 축에 서면
「이 줄은 다른 종류인가」로 읽힌다. 취향이 아니라 형제와의 일관성 문제다. */
.md-table--wide[data-card-list="1"] tbody [data-card="detail"] .md-table-sparkline {
margin: 0;
}
/* ★알약이 떠 있으므로 마지막 행·근거 표기를 가리지 않도록 카드가 자리를 비운다.
position:relative가 없으면 알약이 카드가 아니라 더 바깥을 기준으로 앉는다. */
.md-table-wrap {
position: relative;
/* ★44px는 «스케일 단계»가 아니라 터치 표적 크기다(애플·구글 권장). 버튼 크기와 카드가
비우는 자리가 한 상수에서 나와야 둘이 어긋나지 않는다 — 따로 적으면 한쪽만 바뀐다. */
--md-table-pill-target: 44px;
padding-bottom: calc(var(--ds-space-6) + var(--md-table-pill-target));
}
.md-table--kv {
min-width: 0;
}
}
/* Table toolbar row (F1 table card redesign, doc 171 B안): a dedicated header row ABOVE the
table body (title block left, icon-only actions right) — a distinct layer from the grid below
it (own white background + hairline divider), replacing the old hover-tinted single-line bar.
Sits in normal flow, not absolutely positioned over the table. */
.md-table-toolbar {
/* ★v7 — 카드 헤더 밴드에서 «표 제목 행»으로 바뀐다. 흐름 안에 머무는 것은 그대로다
(절대 배치로 표 위를 덮지 않는다 — 그 판정은 v6에서 이미 내려졌고 유효하다).
정렬을 flex-start → center 로 바꾼다: 부제가 화면에서 사라져(sr-only) 제목이 한 줄이
되었으므로, 오른쪽 액션과 광학 중심을 맞추는 쪽이 맞다. */
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--ds-space-3);
padding: 0 0 var(--ds-space-2);
background: transparent;
}
.md-table-titles {
/* 부제가 sr-only(position: absolute)라 흐름 밖이다 — 그래서 이 줄은 «제목 + 종류 칩»
한 행이다. 구조는 유지한다: 스크린리더는 여전히 제목 다음에 «N열 × M행»을 듣는다.
★v11 — column → row. 종류 칩이 툴바에서 토글과 액션 아이콘 «사이»에 있어 「표 / 막대 /
추이」가 3분할 세그먼트로 읽혔다(실측: 그 줄에서 색이 채워진 유일한 요소가 «누를 수
없는» 칩이었고, 정작 선택된 「막대」는 흰색이었다). 분류는 메타데이터이므로 제목 옆으로
옮긴다 — 근접성이 «컨트롤이 아니다»를 구조로 말한다. */
display: flex;
flex-direction: row;
align-items: baseline;
gap: var(--ds-space-2);
flex: 1 1 auto;
min-width: 0;
}
.md-table-title {
/* ★v7 — 22px 헤드라인에서 «표 제목»으로 내린다(사용자 요청 2026-08-06).
22px/600은 카드 헤드라인 크기였다. 카드를 걷어낸 지금 그 크기는 본문 h3(20px)보다
커서 표가 여전히 «독립 위젯»으로 읽힌다. 18px/700 은 본문 h3 아래·본문 16px 위에
앉아 «이 표의 이름»으로 읽히는 자리다.
★굵기로는 올릴 수 없다 — 시도했다가 타이포 계약(T4)에 걸렸다. 원시 굵기 700은
**모바일 상단바 WIZON 워드마크 한 곳**에만 허용된 브랜드 예외이고, 래칫이 그 예외가
번지는 것을 막는다(그 게이트는 주석까지 세므로 여기에도 선언 형태로 적지 않는다).
셸도 `--ds-weight-bold`를 600으로 덮으므로 토큰 경로로도 닿지 못한다.
이 표면에서 굵기 사다리는 400/500/600 세 칸이 전부다.
→ 위계는 **크기(18 > 행 식별자 14 > 머리글 12)와 액센트 바**가 나눠 진다. 굵기는
행 식별자와 같은 600이지만 4px 크기 차와 바가 «표의 이름»을 충분히 세운다.
★왼쪽 액센트 바(::before)가 «제목» 신호를 담당한다. 색을 글자에 칠하지 않는 이유 —
매 답변에 채도색이 번지면 링크·강조와 경쟁한다(doc 345 잉크 규율). 바는 면적이
좁아 그 예산 안에 들어가고, `--accent`라 사용자가 고른 강조색·다크모드를 따라간다. */
/* ★flex 로 짜지 않는다. `applyTableCardTitle`(app.js)이 이 노드에 `textContent`를
그대로 대입해 제목을 갱신하므로 자식 요소를 두면 조용히 지워진다. 또 flex 컨테이너의
익명 텍스트 아이템에는 `text-overflow: ellipsis`가 걸리지 않는다.
→ 바는 절대배치 `::before`(DOM이 아니라 CSS라 textContent 대입에도 살아남는다),
본문은 padding-left로 비켜 앉힌다. */
/* ★v12 — `nowrap` + 말줄임을 **두 줄 줄바꿈**으로 바꾼다(2026-08-08).
실측이 원인을 지목했다: 390px 에서 제목 196px 중 **87px(44%)이 잘렸고**, 같은 폭에서
뷰 토글만 숨기니 87px → 7px 로 떨어졌다. 즉 잘림의 주범은 폭이 아니라 «같은 줄을
쓰는 컨트롤»이었다. 토글은 A안에서 사라졌지만, 제목이 한 줄로 고정된 한 더 긴 제목은
같은 자리에서 다시 잘린다 — 구조로 닫는다.
★업계도 제목을 컨트롤과 겨루게 두지 않는다(2026-08-08 실측): Claude 는 표 제목을
산문 H3 18px/600 으로 표 위에 따로 놓고(우리와 같은 값·다른 자리), ChatGPT 는 제목
없이 산문 한 문장이 그 역할을 한다. 어느 쪽도 잘리지 않는다.
★두 줄에서 멈춘다. 무한정 늘면 제목이 문단이 되어 표를 아래로 밀어낸다. */
position: relative;
padding-left: var(--ds-space-3);
overflow: hidden;
white-space: normal;
overflow-wrap: anywhere;
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
font-size: var(--ds-text-title-18);
font-weight: var(--ds-weight-semibold);
letter-spacing: -0.01em;
line-height: 1.3;
color: var(--cg-text, #0d0d0d);
}
.md-table-title::after {
/* 제목 왼쪽 액센트 바. `height: 1em`이라 글자 크기를 따라간다.
★v9 에서 `::before` → `::after` 로 옮겼다. 바는 절대배치라 문서 순서와 무관하게
같은 자리에 그려지고, 비워진 `::before` 를 표 번호가 쓴다(아래). */
content: "";
position: absolute;
left: 0;
top: 50%;
width: 4px;
height: 1em;
transform: translateY(-50%);
border-radius: var(--ds-radius-xs, 6px);
background: var(--accent);
}
/* ── 표 번호 (v9) ──
★학술 표준 확인: 표 제목은 **위**에 둔다(APA·MLA·Chicago 공통). 아래로 내리는 것은
그림 캡션의 관례다. 즉 우리 배치는 이미 표준이므로 «번호»만 더한다.
APA 는 «표 번호 + 제목»을 쓰므로 「표 1. 사대보험 요율」 형태가 된다.
★폴백 제목(설명 없는 "표 N")에는 안 붙인다 — 그건 감춰져 있고, 번호만 남으면 다시
«의미 없는 라벨»이 된다. 번호는 설명이 있을 때만 의미가 있다. */
.assistant .message-body .md-table-wrap {
counter-increment: md-table;
}
.assistant .message-body .md-table-title:not([data-title-fallback])::before {
content: "표 " counter(md-table) ". ";
color: var(--cg-muted);
font-variant-numeric: tabular-nums;
}
/* ── 폴백 제목은 화면에서 감춘다 (v7-2, 실측 기반) ──
★실제 답변 3건이 모두 "표 1" 이었다 — 모델이 표부터 쓰기 시작해 승격할 헤딩이 없다.
그건 «이 표의 이름»이 아니라 기계가 붙인 일련번호다. 카드 시절엔 헤더 안 헤드라인이라
그러려니 했지만, 인라인에서는 액센트 바까지 달려 **의미 없는 라벨이 오히려 강조**된다.
"N열 × M행" 을 화면에서 뺀 것과 정확히 같은 이유다.
★지우지 않고 감춘다: 표가 여럿일 때 스크린리더는 이름으로 구분하고, 아티팩트가 진짜
제목을 주면 `applyTableCardTitle` 이 표식을 걷어내 그대로 드러난다. */
.md-table-title[data-title-fallback] {
position: absolute;
width: 1px;
height: 1px;
padding-left: 0;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
}
.md-table-title[data-title-fallback]::before {
content: none;
}
/* ★제목이 감춰지면 툴바의 아래 여백도 뺀다. 액션 버튼(34px)은 hover 영역이라 자리를
지켜야 하지만, 그 아래 8px 은 «제목과 표를 띄우는» 간격이라 제목이 없으면 근거가 없다.
실측: 폴백일 때 표 위 빈 띠 42px → 34px.
★모바일은 이미 문제가 아니다 — 거기서는 액션이 하단 알약으로 절대배치돼 흐름에서
빠지므로 툴바 높이가 패딩만 남는다. */
.md-table-toolbar:has(.md-table-title[data-title-fallback]) {
padding-bottom: 0;
}
.md-table-subtitle {
/* ★v7 — 화면에서 감춘다(사용자 지적 2026-08-06). "3열 × 6행"은 표의 «판정용 수치»이지
읽는 사람이 쓰는 정보가 아니다 — 원시 데이터를 1차 표면에 올리지 않는다는 원칙과
같은 결이다. 다만 지우지는 않는다: 표의 크기는 스크린리더 사용자에게는 실제로
유용한 사전 정보라(표에 들어가기 전에 규모를 안다) sr-only로 남긴다.
★전역 `.visually-hidden`을 쓰지 않는 이유 둘: 마크업의 클래스를 바꾸면 렌더러 계약
문자열이 깨지고, 그 유틸은 전 선언이 `!important`인데 이 블록(마크다운 렌더러 v2)은
`!important` 금지가 걸려 있다.
★레거시 `margin: -1px` 관용구는 안 쓴다 — `position: absolute`라 이미 흐름 밖이라
불필요하고, 원시 px 여백이라 간격 스케일 게이트에 걸린다. */
position: absolute;
width: 1px;
height: 1px;
overflow: hidden;
clip-path: inset(50%);
white-space: nowrap;
border: 0;
}
.md-table-actions {
display: flex;
align-items: center;
gap: var(--ds-space-2);
flex: 0 0 auto;
}
/* ── 액션 페이드 (v7) ──
★v6의 판정을 뒤집지 않는다. 옛 오버레이가 폐기된 사유는 «표 머리글 셀을 덮었다»는
것이었고 그 판정은 지금도 옳다 — 그래서 액션은 **흐름 안 제목 행에 그대로 둔다**
(절대배치 없음). 바뀌는 것은 «쉴 때의 세기»뿐이다: 한 답변에 표가 셋이면 상주
아이콘이 12개가 되어 산문을 압도한다는 것이 사용자 지적의 일부였다.
★정밀 포인터에서만 건다. 터치에서는 hover가 없어 영영 못 찾는다 — 그쪽은 하단
알약이 늘 보이는 기존 계약을 그대로 쓴다.
★`:focus-within`이 필수다. opacity:0 은 포커스 가능성을 없애지 않으므로, 이게 없으면
키보드 사용자가 «보이지 않는 버튼»에 탭으로 들어간다.
★자리는 늘 차지한다(visibility/display 를 안 쓴다) — 나타날 때 제목이 밀리면 안 된다. */
@media (hover: hover) and (pointer: fine) {
.message-body .md-table-wrap .md-table-actions {
opacity: 0;
transition: opacity 140ms ease;
}
.message-body .md-table-wrap:hover .md-table-actions,
.message-body .md-table-wrap:focus-within .md-table-actions {
opacity: 1;
}
}
@media (prefers-reduced-motion: reduce) {
.message-body .md-table-wrap .md-table-actions {
transition: none;
}
}
/* Icon-only action buttons (no border, no visible chrome at rest) — the file-format icons
themselves distinguish copy/xlsx/csv/sheet, so the button chrome stays out of the way until
hover/focus. */
.md-table-copy {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: var(--cg-text-soft, var(--muted));
font: inherit;
line-height: 1;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.md-table-copy:hover {
background: var(--cg-hover-soft, #f4f4f4);
color: var(--cg-text, var(--text));
}
.md-table-copy:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 1px;
}
.md-table-copy.is-copied {
color: var(--accent, #2f6bff);
}
.md-table-copy-icon {
display: inline-flex;
}
.md-table-copy-icon svg,
.md-table-copy-icon .wds-inline-icon {
width: 18px;
height: 18px;
}
@media (any-pointer: coarse), (max-width: 520px) {
/* ── 차트 범례의 터치 슬롭 (2026-08-08 실기기) ──
★iPhone 17(402×874pt)에서 처음 재 봤다. 탭은 동작하지만 항목이 **67×30px** 이라
WCAG 2.2 SC 2.5.8(24×24)은 넘어도 Apple HIG 의 44pt 는 못 넘는다.
★보이는 크기는 안 건드린다. 30px 을 44px 로 키우면 범례 줄이 데스크톱에서도 두꺼워져
차트의 리듬이 바뀐다 — 이 파일이 이미 쓰는 방법(.citation-tag::after)대로 보이지 않는
슬롭으로 히트 영역만 넓힌다. 폭은 이미 44 를 넘으므로 높이만.
★자기 칸 밖으로 나가지 않는다. 슬롭은 안 보이므로 겹치면 엉뚱한 계열이 꺼진다. */
.md-chart-legend-item::after {
content: "";
position: absolute;
left: 0;
top: 50%;
width: 100%;
height: 44px;
transform: translateY(-50%);
}
/* Safety net: keep the 4 buttons from overflowing the toolbar row at narrow/touch widths. */
/* ── 모바일 액션 알약 (v10-3) ──
★Mobbin의 ChatGPT가 우리와 같은 문제를 푼 방식이다 — 답변 안의 표에서 액션을 헤더가
아니라 하단 알약으로 뺀다. 헤더 오른쪽은 한 손 조작에서 엄지가 닿기 가장 먼 자리다.
★DOM을 옮기지 않는다. 버튼을 복제하면 같은 기능이 둘이 되어 포커스 순서·상태·
data-table-copy 훅이 갈린다. 같은 요소를 CSS로 재배치할 뿐이다. */
.md-table-actions {
position: absolute;
left: 50%;
bottom: var(--ds-space-3);
transform: translateX(-50%);
/* ★`left:50%`인 절대 요소는 «가용 폭»이 컨테이너의 50%로 잘린다. 알약 내용(196px)이
그보다 넓으면 아래 flex-wrap이 발동해 3+1로 접힌다 — 실기기(iPhone 402pt)에서만
드러났고 데스크톱 폭에서는 안 보였다. max-content로 내용 폭을 되찾는다.
max-width는 내용이 더 늘어도 카드를 넘지 않게 하는 상한이다. */
width: max-content;
max-width: calc(100% - var(--ds-space-6));
z-index: 4;
/* ★기존 계약: 320px에서 4버튼이 넘치지 않고 접힌다. 알약이 돼도 유지한다. */
flex-wrap: wrap;
justify-content: center;
gap: var(--ds-space-1);
padding: var(--ds-space-1);
border-radius: var(--wizon-ai-radius-pill, 999px);
background: var(--cg-surface, var(--ds-color-surface));
box-shadow: 0 6px 20px -6px color-mix(in srgb, var(--ds-black) 28%, transparent),
inset 0 0 0 1px var(--cg-menu-border, var(--line));
}
/* ★34px는 엄지로 누르기에 작다(애플·구글 권장 44px). 알약에서만 키운다 —
데스크톱은 마우스라 34px로 충분하고, 헤더가 넓어지면 제목이 밀린다. */
.md-table-copy {
width: var(--md-table-pill-target);
height: var(--md-table-pill-target);
}
}
@media (prefers-reduced-motion: reduce) {
.md-table-copy {
transition: none;
}
.artifact-titlebar-button {
transition: none;
}
}
/* Sheet-window titlebar download buttons (doc 171 A1) — same 34x34 icon-only convention as
.md-table-copy above (F1), kept as its own ruleset (not a shared selector list) because
test_table_action_buttons_are_icon_only_with_tooltips pins ".md-table-copy {" as a standalone
selector string. */
.artifact-titlebar-button {
display: inline-flex;
align-items: center;
justify-content: center;
width: 34px;
height: 34px;
padding: 0;
border: none;
border-radius: 8px;
background: transparent;
color: var(--cg-text-soft, var(--muted));
font: inherit;
line-height: 1;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.artifact-titlebar-button:hover {
background: var(--cg-hover-soft, #f4f4f4);
color: var(--cg-text, var(--text));
}
.artifact-titlebar-button:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 1px;
}
.artifact-titlebar-button.is-copied {
color: var(--accent, #2f6bff);
}
.artifact-titlebar-button:disabled {
cursor: not-allowed;
opacity: 0.5;
}
.artifact-titlebar-button:disabled:hover {
background: transparent;
color: var(--cg-text-soft, var(--muted));
}
.artifact-titlebar-button-icon {
display: inline-flex;
}
.artifact-titlebar-button-icon svg,
.artifact-titlebar-button-icon .wds-inline-icon {
width: 18px;
height: 18px;
}
/* KaTeX math (render2, self-hosted). Inline math inherits answer color; display math centers and
scrolls horizontally if an equation is wider than the bubble. */
.message-body .katex {
font-size: 1.05em;
}
.message-body .md-math-block {
margin: var(--ds-space-4) 0;
padding: 4px 2px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: thin;
}
.message-body .md-math-block .katex-display {
margin: 0;
}
.message-body .md-math-fallback {
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.9em;
}
/* keyboard keys (render2). */
.message-body .md-kbd {
display: inline-block;
padding: 1px 6px;
border: 1px solid var(--cg-menu-border, var(--line));
border-bottom-width: 2px;
border-radius: var(--ds-radius-xs, 6px);
background: var(--cg-hover-soft, var(--surface-2));
color: var(--cg-text, var(--text));
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: 0.85em;
line-height: 1.4;
white-space: nowrap;
}
/* Inline emphasis (render2b): explicit so a cascaded font-style/text-decoration reset can't strip
*italic* / ~~strikethrough~~. Struck text is de-emphasized (muted) like GitHub/Notion. */
.message-body em {
font-style: italic;
}
.message-body del {
text-decoration: line-through;
color: var(--cg-text-soft, var(--muted));
}
/* Thematic break (render2b2): a quiet full-width hairline for "---" section dividers — no default
inset border, tokenized so light/dark both read as a subtle rule. */
.message-body .md-hr {
height: 0;
margin: var(--ds-space-6) 0;
border: 0;
border-top: 1px solid var(--cg-menu-border, var(--line));
}
/* Mermaid diagrams (doc 169). Before hydration (or on load/parse failure) the source shows as
the fallback; once rendered, the SVG shows and a toggle flips between diagram and source. */
.message-body .mermaid-block {
margin: 12px 0 14px;
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: 12px;
overflow: hidden;
background: var(--cg-surface, #fff);
}
.message-body .mermaid-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 10px;
padding: 6px 8px 6px 14px;
background: var(--cg-hover-soft, var(--surface-2));
border-bottom: 1px solid var(--cg-menu-border, var(--line));
}
.message-body .mermaid-label {
font-size: var(--ds-text-caption-12);
font-weight: 600;
color: var(--cg-text-soft, var(--muted));
}
.message-body .mermaid-toggle {
padding: 3px 9px;
border: 1px solid transparent;
border-radius: 7px;
background: transparent;
color: var(--cg-text-soft, var(--muted));
font: inherit;
font-size: var(--ds-text-caption-12);
line-height: 1;
cursor: pointer;
transition: background 120ms ease, color 120ms ease;
}
.message-body .mermaid-toggle:hover {
background: var(--cg-sidebar-active-bg);
color: var(--cg-text, var(--text));
}
.message-body .mermaid-toggle:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent, #2f6bff));
outline-offset: 1px;
}
/* Render area: hidden until the SVG is in; scrolls horizontally if the diagram is wide. */
.message-body .mermaid-render {
display: none;
padding: 16px;
overflow-x: auto;
text-align: center;
}
.message-body .mermaid-render svg {
max-width: 100%;
height: auto;
}
.message-body .mermaid-block.is-rendered .mermaid-render {
display: block;
}
.message-body .mermaid-block.is-rendered.show-source .mermaid-render {
display: none;
}
/* Source is the default/fallback view (pending or error) and the "소스 보기" view. It shows the raw
mermaid code, so it uses the dark code-card palette (readable light-on-dark) rather than the light
diagram surface — this also overrides any global background that would clash. */
.message-body .mermaid-source {
margin: 0;
padding: 12px 14px;
overflow-x: auto;
background: #0d1017;
color: #dfe3ea;
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--ds-text-caption-13);
line-height: 1.55;
white-space: pre;
}
.message-body .mermaid-source code {
color: inherit;
background: none;
}
.message-body .mermaid-block.is-rendered .mermaid-source {
display: none;
}
.message-body .mermaid-block.is-rendered.show-source .mermaid-source {
display: block;
}
@media (prefers-reduced-motion: reduce) {
.message-body .mermaid-toggle {
transition: none;
}
}
/* GFM task list (render2): non-interactive checkbox glyph + label. Read-only — the model states
status. The drops its marker and aligns the box with the first text line. */
.message-body .md-task-item {
list-style: none;
margin-left: -22px;
display: flex;
align-items: flex-start;
gap: 8px;
}
.message-body .md-task-box {
flex: 0 0 auto;
display: inline-flex;
align-items: center;
justify-content: center;
width: 17px;
height: 17px;
margin-top: 3px;
border: 1.5px solid var(--cg-menu-border, var(--line));
border-radius: 5px;
background: var(--cg-surface, #fff);
color: #fff;
}
.message-body .md-task-box[data-checked="true"] {
border-color: var(--accent, #2f6bff);
background: var(--accent, #2f6bff);
}
.message-body .md-task-box svg,
.message-body .md-task-box .wds-inline-icon {
width: 12px;
height: 12px;
}
.message-body .md-task-label {
flex: 1 1 auto;
}
.md-quote {
/* ★v10 — 표와 같은 이유로 산문 리듬(20)에 맞춘다. 16 이면 이 블록 앞뒤에서만
간격이 좁아져 문서의 세로 리듬이 끊긴다. */
margin: var(--ds-space-5) 0;
padding: 2px 0 2px 12px;
border-left: 3px solid var(--cg-menu-border, var(--line));
color: var(--cg-text-soft, var(--muted));
}
.md-callout {
display: grid;
gap: 6px;
margin: var(--ds-space-4) 0;
padding: 10px 12px;
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: 12px;
background: var(--cg-hover-soft, var(--surface-2));
}
.md-callout-head {
display: inline-flex;
align-items: center;
gap: 6px;
margin: 0;
font-size: var(--cg-text-label-size, 14px);
font-weight: 600;
}
.md-callout[data-callout="warning"] .md-callout-head {
color: var(--wizon-ai-danger-text, var(--danger));
}
.message-body .md-callout-head .wds-inline-icon,
.md-callout-head .wds-inline-icon {
width: 16px;
height: 16px;
flex: none;
}
.md-callout-body > p:last-child,
.md-callout-body > .md-list:last-child {
margin-bottom: 0;
}
.md-heading {
display: flex;
align-items: center;
gap: 7px;
}
.message-body .md-heading .wds-inline-icon,
.md-heading .wds-inline-icon {
width: 18px;
height: 18px;
flex: none;
color: var(--cg-text-soft, var(--muted));
}
/* in-place thinking (doc 139 제안 A): 답변 슬롯에 그대로, 최종 답변과 동일 타이포.
회색↔잉크 모노크롬 shimmer(제품 토큰 --cg-*) + dots. 회전 오브/정적 진행칩 폐기. */
.thinking-inline {
display: inline-flex;
align-items: center;
gap: 8px;
font: inherit;
}
.thinking-shimmer {
background: linear-gradient(
90deg,
var(--cg-muted, var(--muted)) 35%,
var(--cg-text, var(--ink)) 50%,
var(--cg-muted, var(--muted)) 65%
);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
animation: thinking-shimmer 1.7s linear infinite;
}
@keyframes thinking-shimmer {
from {
background-position: 210% 0;
}
to {
background-position: -210% 0;
}
}
.thinking-dots {
display: inline-flex;
gap: 4px;
}
.thinking-dots i {
width: 5px;
height: 5px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-text, var(--ink));
animation: thinking-dot 1.1s ease-in-out infinite;
}
.thinking-dots i:nth-child(2) {
animation-delay: 0.15s;
}
.thinking-dots i:nth-child(3) {
animation-delay: 0.3s;
}
@keyframes thinking-dot {
0%,
80%,
100% {
opacity: 0.3;
transform: translateY(0);
}
40% {
opacity: 1;
transform: translateY(-3px);
}
}
@media (prefers-reduced-motion: reduce) {
.thinking-shimmer {
animation: none;
background: none;
-webkit-background-clip: border-box;
background-clip: border-box;
color: var(--cg-muted, var(--muted));
}
.thinking-dots i {
animation: none;
}
}
/* Live progressive status shown until the first answer token (doc 165). Reuses .thinking-shimmer
for the sweep; the label crossfades (out-up / in-up) when the pipeline stage changes. */
.stream-status {
display: flex;
align-items: center;
min-height: 1.6em;
font-size: var(--ds-text-body-15);
}
.stream-status-label {
display: inline-block;
font-weight: 500;
}
.status-swap-exit {
animation: status-swap-out 200ms ease-out forwards;
}
.status-swap-enter {
animation: status-swap-in 200ms ease-out forwards;
}
@keyframes status-swap-out {
to {
opacity: 0;
transform: translateY(-4px);
}
}
@keyframes status-swap-in {
from {
opacity: 0;
transform: translateY(4px);
}
}
@media (prefers-reduced-motion: reduce) {
.status-swap-exit,
.status-swap-enter {
animation-duration: 1ms;
}
}
/* ---- 스트리밍 카드 스켈레톤 (T3, 스켈레톤 선행 트랙) ------------------------------------
오케스트레이션 홀드가 카드 타입으로 확정되는 즉시 상태 라인 대신 마운트되고(app.js
resolveOrchHold), finalize 패치가 실제 카드로 교체한다. 타입별 min-height는 실제 위젯의
대략적 높이를 예약해 교체 시 레이아웃 점프(CLS)를 줄인다. 셸은 위젯과 같은 라운드
(--ds-radius-lg)의 중립 표면, 내부 바/블록은 thinking-shimmer 키프레임을 재사용한
저채도 스윕 — 잉크 모노톤 원칙(카드 본색은 완성본만 쓴다). */
.stream-card-skeleton {
display: flex;
flex-direction: column;
gap: 12px;
margin-top: 4px;
padding: 20px 22px;
border-radius: var(--ds-radius-lg);
border: 1px solid var(--line);
background: var(--cg-surface);
animation: status-swap-in 200ms ease-out both;
}
.stream-card-skeleton .sk-head {
display: flex;
align-items: center;
min-height: 1.6em;
font-size: var(--cg-text-label-size);
}
.stream-card-skeleton .sk-line,
.stream-card-skeleton .sk-block,
.stream-card-skeleton .sk-dot,
.stream-card-skeleton .sk-figure,
.stream-card-skeleton .sk-seg-pill {
display: block;
border-radius: var(--ds-radius-xs);
background: linear-gradient(90deg, var(--cg-hover-soft) 35%, var(--line) 50%, var(--cg-hover-soft) 65%);
background-size: 220% 100%;
animation: thinking-shimmer 1.7s linear infinite;
}
.stream-card-skeleton .sk-line {
height: 12px;
}
.stream-card-skeleton .sk-block {
width: 100%;
}
/* v3: 실위젯 내부 레이아웃 미러 — 헤더(제목/부제 + 우측 큰 수치), 본문 패널(시간대 셀 스트립 /
차트+기간 세그먼트 / 리드+행). 데이터가 앉을 자리만 shimmer, 프레임은 정적. */
.stream-card-skeleton .sk-widget-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.stream-card-skeleton .sk-ident {
display: flex;
flex-direction: column;
gap: 10px;
flex: 1;
min-width: 0;
}
.stream-card-skeleton .sk-title {
height: 18px;
width: 34%;
}
.stream-card-skeleton .sk-subtitle {
width: 52%;
}
.stream-card-skeleton .sk-figure {
width: 112px;
height: 46px;
border-radius: var(--ds-radius-sm);
flex: none;
}
.stream-card-skeleton .sk-panel {
display: flex;
flex-direction: column;
gap: 12px;
padding: 14px 16px;
border-radius: var(--ds-radius-sm);
background: rgba(255, 255, 255, 0.08);
}
.stream-card-skeleton .sk-hourly {
flex-direction: row;
justify-content: space-between;
gap: 10px;
}
.stream-card-skeleton .sk-cell {
display: flex;
flex-direction: column;
align-items: center;
gap: 10px;
flex: 1;
}
.stream-card-skeleton .sk-cell-label {
width: 26px;
height: 10px;
}
.stream-card-skeleton .sk-dot {
width: 26px;
height: 26px;
border-radius: var(--ds-radius-pill);
}
.stream-card-skeleton .sk-cell-value {
width: 20px;
}
.stream-card-skeleton .sk-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.stream-card-skeleton .sk-row-label {
width: 22%;
}
.stream-card-skeleton .sk-row-value {
width: 42%;
}
.stream-card-skeleton .sk-seg {
display: flex;
gap: 8px;
}
.stream-card-skeleton .sk-seg-pill {
flex: 1;
height: 34px;
border-radius: var(--ds-radius-sm);
}
.stream-card-skeleton .sk-news {
background: var(--cg-hover-soft);
}
.stream-card-skeleton .sk-news .sk-row {
justify-content: flex-start;
}
.stream-card-skeleton .sk-thumb {
width: 44px;
height: 44px;
border-radius: var(--ds-radius-sm);
flex: none;
}
.stream-card-skeleton .sk-news .sk-row-value {
width: 64%;
}
/* P2 (docs/53 Phase 2): 여행·비주얼 스켈레톤 — 두 카드 모두 라이트 표면(기본 셸 그대로),
여행=헤더+히어로+day 칩+일정 행, 비주얼=이미지 모자이크 3타일+텍스트 행 미러. */
.stream-card-skeleton[data-card-skeleton="travel"] {
min-height: 360px;
}
.stream-card-skeleton .sk-stops {
background: var(--cg-hover-soft);
}
.stream-card-skeleton .sk-stops .sk-row {
justify-content: flex-start;
}
.stream-card-skeleton[data-card-skeleton="visual"] {
min-height: 300px;
}
.stream-card-skeleton .sk-mosaic {
display: grid;
grid-template-columns: 2fr 1fr 1fr;
gap: 8px;
}
.stream-card-skeleton .sk-tile {
display: block;
height: 150px;
border-radius: var(--ds-radius-xs);
background: linear-gradient(90deg, var(--cg-hover-soft) 35%, var(--line) 50%, var(--cg-hover-soft) 65%);
background-size: 220% 100%;
animation: thinking-shimmer 1.7s linear infinite;
}
/* 타입별 셸 = 실제 위젯의 배경 아이덴티티(사용자 결정 2026-07-22): 스켈레톤이 "그 카드가
오는 중"임을 배경만으로 예고하고, finalize 교체 때 배경이 연속되어 스냅감이 사라진다.
날씨=딥블루(#0d285e, .weather-widget), 금융=잉크 그라디언트(.finance-widget 인라인 surface),
뉴스=라이트 표면(.news-feed). 다크 셸의 바/라벨은 화이트 계열 스윕으로 뒤집는다. */
.stream-card-skeleton[data-card-skeleton="finance"] {
min-height: 300px;
background: #101216; /* 실위젯 잉크 그라디언트의 중간값 — 래칫 예산상 플랫 단색 */
}
.stream-card-skeleton .sk-chart {
height: 160px;
}
.stream-card-skeleton[data-card-skeleton="weather"] {
min-height: 340px;
background: #0d285e;
}
/* 주간 씬: 실위젯의 낮 하늘 그라디언트에 맞춘 밝은 블루 (라이브 실측 대비) */
.stream-card-skeleton[data-card-skeleton="weather"][data-sky="day"] {
background: #4f97e0;
}
/* 다크 셸 공용 보더 — 래칫 예산상 rgba 1회로 통합(개별 선언 2회였던 것을 축약) */
.stream-card-skeleton[data-card-skeleton="weather"],
.stream-card-skeleton[data-card-skeleton="finance"] {
border-color: rgba(255, 255, 255, 0.09);
}
/* 뉴스 스켈레톤 — renderNewsFeed 의 6구획(헤더/레일/히어로/2단/카드그리드/푸터)을 그대로
미러링한다(2026-08-20, newsFeedSkeletonHtml). 열 채움 셀은 전부 태그라 아래 태그
선택자 하나로 채움+스윕을 준다 — 감싸개(div/span)는 shimmer를 받지 않는다.
★스윕은 기존 thinking-shimmer(background-position 애니메이션)와 톤·타이밍은 맞추되
구현은 transform 전용 오버레이로 새로 짠다(웹 성능 규칙: 모션은 transform/opacity만).
기존 thinking-shimmer 자체는 범위 밖이라 손대지 않는다. */
.stream-card-skeleton[data-card-skeleton="news"] {
min-height: 900px;
}
.stream-card-skeleton .sk-news-body {
container-type: inline-size;
display: flex;
flex-direction: column;
gap: 20px;
}
.stream-card-skeleton .sk-news-body > * {
animation: status-swap-in 220ms ease-out both;
}
.stream-card-skeleton .sk-news-body > *:nth-child(1) { animation-delay: 0ms; }
.stream-card-skeleton .sk-news-body > *:nth-child(2) { animation-delay: 90ms; }
.stream-card-skeleton .sk-news-body > *:nth-child(3) { animation-delay: 180ms; }
.stream-card-skeleton .sk-news-body > *:nth-child(4) { animation-delay: 270ms; }
.stream-card-skeleton .sk-news-body > *:nth-child(5) { animation-delay: 360ms; }
.stream-card-skeleton .sk-news-body > *:nth-child(6) { animation-delay: 450ms; }
.stream-card-skeleton .sk-news-body i {
position: relative;
overflow: hidden;
display: block;
border-radius: var(--ds-radius-xs);
background: var(--cg-hover-soft);
}
.stream-card-skeleton .sk-news-body i::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, transparent, var(--line) 45%, transparent 90%);
transform: translateX(-120%);
animation: sk-news-sweep 1.7s linear infinite;
}
@keyframes sk-news-sweep {
to {
transform: translateX(120%);
}
}
.stream-card-skeleton .sk-news-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
.stream-card-skeleton .sk-news-title {
width: 40%;
height: 26px;
}
.stream-card-skeleton .sk-news-chips {
display: flex;
align-items: center;
gap: 6px;
flex: none;
}
.stream-card-skeleton .sk-news-chip {
width: 52px;
height: 20px;
border-radius: var(--ds-radius-xs);
}
.stream-card-skeleton .sk-news-count {
width: 26px;
height: 14px;
}
.stream-card-skeleton .sk-news-rail {
display: flex;
gap: 8px;
overflow: hidden;
}
.stream-card-skeleton .sk-news-tab {
flex: none;
width: 92px;
height: 44px;
border-radius: var(--ds-radius-pill);
}
.stream-card-skeleton .sk-news-tab:nth-child(2) { width: 72px; }
.stream-card-skeleton .sk-news-tab:nth-child(3) { width: 108px; }
.stream-card-skeleton .sk-news-tab:nth-child(4) { width: 84px; }
.stream-card-skeleton .sk-news-tab:nth-child(5) { width: 96px; }
.stream-card-skeleton .sk-news-tab:nth-child(6) { width: 78px; }
.stream-card-skeleton .sk-news-hero {
position: relative;
aspect-ratio: 744 / 452;
border-radius: var(--ds-radius-md);
overflow: hidden;
background: var(--cg-hover-soft);
}
.stream-card-skeleton .sk-news-hero-band {
position: absolute;
inset-inline: 0;
inset-block-end: 0;
display: flex;
flex-direction: column;
gap: 10px;
padding: 16px 18px;
}
.stream-card-skeleton .sk-news-hero-top {
display: flex;
align-items: center;
gap: 10px;
}
.stream-card-skeleton .sk-news-kicker {
width: 64px;
height: 19px;
border-radius: var(--ds-radius-pill);
}
.stream-card-skeleton .sk-news-byline {
width: 100px;
height: 20px;
}
.stream-card-skeleton .sk-news-hero-title {
height: 24px;
}
.stream-card-skeleton .sk-news-hero-title:nth-of-type(1) { width: 88%; }
.stream-card-skeleton .sk-news-hero-title:nth-of-type(2) { width: 58%; }
.stream-card-skeleton .sk-news-hero-excerpt {
height: 19px;
}
/* i 형제 셈은 클래스가 아니라 태그 기준이라, 앞선 두 i.sk-news-hero-title 뒤이므로
3/4번째가 이 두 줄이다 (1/2번째는 제목이 차지한다). */
.stream-card-skeleton .sk-news-hero-excerpt:nth-of-type(3) { width: 96%; }
.stream-card-skeleton .sk-news-hero-excerpt:nth-of-type(4) { width: 52%; }
.stream-card-skeleton .sk-news-second {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
.stream-card-skeleton .sk-news-second-cell {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
column-gap: 12px;
row-gap: 6px;
}
.stream-card-skeleton .sk-news-second-title {
grid-column: 1;
height: 20px;
}
.stream-card-skeleton .sk-news-second-title:nth-of-type(2) { width: 70%; }
.stream-card-skeleton .sk-news-second-excerpt {
grid-column: 1;
height: 19px;
width: 90%;
}
.stream-card-skeleton .sk-news-second-shot {
grid-column: 2;
grid-row: 1 / span 2;
width: 64px;
height: 64px;
flex: none;
}
/* 실측(2026-08-20, 375px): .news-second-foot(출처+시각+북마크 버튼 행)이 34px — 스켈레톤이
이 행을 아예 안 그려서 2단 칸 하나당 실물보다 짧게 예약되고 있었다. */
.stream-card-skeleton .sk-news-second-foot {
grid-column: 1 / -1;
width: 55%;
height: 32px;
}
.stream-card-skeleton .sk-news-section-head {
display: flex;
align-items: center;
justify-content: space-between;
}
.stream-card-skeleton .sk-news-section-title {
width: 96px;
height: 22px;
}
.stream-card-skeleton .sk-news-arrows {
display: flex;
gap: 6px;
}
.stream-card-skeleton .sk-news-arrow {
width: 28px;
height: 28px;
border-radius: var(--ds-radius-sm);
}
.stream-card-skeleton .sk-news-cards {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, minmax(0, auto));
grid-auto-columns: calc((100% - 32px) / 3);
gap: 16px;
overflow: hidden;
}
/* 정본 폭 분기점 래칫(520/521/900/901)의 대상이 아니다 — 폭 기반 앳룰이 아니라 컨테이너
기반이고, 값도 실제 .news-cards 컨테이너 쿼리(styles.css)와 같은 620이다: 사이드 패널이
열려 피드 자체 폭이 줄어드는 경우까지 잡기 위해 뷰포트가 아니라 이 요소 자신의 인라인
크기를 쓴다. */
@container (max-width: 620px) {
.stream-card-skeleton .sk-news-cards {
grid-auto-columns: calc((100% - 16px) / 2);
}
}
/* 실물(styles.css)도 이 폭에서 한 번 더 접는다 — 카드 1열, 2단 1열, 히어로 4:3(744/452보다
같은 폭에 더 큰 키). 스켈레톤이 이 분기점을 안 따라가면 375px에서 정확히 CLS가 남는다
(2026-08-20 실측: 380px 미포함 상태에서 실물 히어로/2단이 예약보다 커짐). */
@container (max-width: 380px) {
.stream-card-skeleton .sk-news-hero {
aspect-ratio: 4 / 3;
}
.stream-card-skeleton .sk-news-second {
grid-template-columns: 1fr;
}
.stream-card-skeleton .sk-news-second-cell {
grid-template-columns: minmax(0, 1fr) auto;
}
.stream-card-skeleton .sk-news-cards {
grid-auto-columns: 100%;
gap: 18px;
}
}
.stream-card-skeleton .sk-news-card {
display: flex;
flex-direction: column;
gap: 8px;
}
.stream-card-skeleton .sk-news-card-shot {
width: 100%;
aspect-ratio: 16 / 10;
border-radius: var(--ds-radius-sm);
}
.stream-card-skeleton .sk-news-card-title {
height: 20px;
}
/* i 형제 셈은 태그 기준이라 sk-news-card-shot(1번째 i)이 먼저다: 제목 두 줄은 2·3번째,
요약 두 줄은 4·5번째. */
.stream-card-skeleton .sk-news-card-title:nth-of-type(3) { width: 65%; }
.stream-card-skeleton .sk-news-card-excerpt {
height: 19px;
}
.stream-card-skeleton .sk-news-card-excerpt:nth-of-type(4) { width: 92%; }
.stream-card-skeleton .sk-news-card-excerpt:nth-of-type(5) { width: 55%; }
/* 실측(2026-08-20, 375px): .news-card-foot(출처+시각+북마크 버튼 행)이 36px — 12px 텍스트
한 줄로만 예약했더니 카드마다 실물보다 24px씩 짧아, 카드가 5장 이상일 때 누적 오차가
전체 스켈레톤 높이 격차의 가장 큰 몫이었다. */
.stream-card-skeleton .sk-news-card-byline {
height: 36px;
width: 50%;
}
.stream-card-skeleton .sk-news-foot {
display: flex;
align-items: center;
gap: 12px;
}
.stream-card-skeleton .sk-news-source-chip {
width: 88px;
height: 32px;
border-radius: var(--ds-radius-pill);
}
.stream-card-skeleton .sk-news-subscribe {
width: 96px;
height: 26px;
border-radius: var(--ds-radius-pill);
margin-inline-start: auto;
}
.stream-card-skeleton .sk-lead {
height: 150px;
}
.stream-card-skeleton[data-card-skeleton="weather"] .sk-line,
.stream-card-skeleton[data-card-skeleton="weather"] .sk-block,
.stream-card-skeleton[data-card-skeleton="weather"] .sk-dot,
.stream-card-skeleton[data-card-skeleton="weather"] .sk-figure,
.stream-card-skeleton[data-card-skeleton="finance"] .sk-line,
.stream-card-skeleton[data-card-skeleton="finance"] .sk-block,
.stream-card-skeleton[data-card-skeleton="finance"] .sk-figure,
.stream-card-skeleton[data-card-skeleton="finance"] .sk-seg-pill {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.1) 35%,
rgba(255, 255, 255, 0.22) 50%,
rgba(255, 255, 255, 0.1) 65%
);
background-size: 220% 100%;
}
/* .thinking-shimmer의 텍스트 그라디언트는 테마 잉크 기반이라 다크 셸에서 안 보인다 — 화이트 스윕으로
재정의. background 축약형은 background-clip까지 리셋하므로 텍스트 클립을 반드시 재선언한다
(빠뜨리면 라벨이 글자 대신 회색 블록으로 칠해진다 — 하니스 실측). */
.stream-card-skeleton[data-card-skeleton="weather"] .sk-label,
.stream-card-skeleton[data-card-skeleton="finance"] .sk-label {
background: linear-gradient(
90deg,
rgba(255, 255, 255, 0.55) 35%,
#ffffff 50%,
rgba(255, 255, 255, 0.55) 65%
);
background-size: 220% 100%;
-webkit-background-clip: text;
background-clip: text;
color: transparent;
}
@media (prefers-reduced-motion: reduce) {
.stream-card-skeleton {
animation-duration: 1ms;
}
.stream-card-skeleton .sk-line,
.stream-card-skeleton .sk-block,
.stream-card-skeleton .sk-dot,
.stream-card-skeleton .sk-figure,
.stream-card-skeleton .sk-seg-pill,
.stream-card-skeleton .sk-tile {
animation: none;
background: var(--cg-hover-soft);
}
.stream-card-skeleton .sk-news-body > * {
animation: none;
}
.stream-card-skeleton .sk-news-body i::after {
animation: none;
background: none;
}
}
/* Step 2a: 완성 응답을 답변 슬롯에서 단어 단위 blur-in으로 재생한다.
라이브 토큰 스트리밍이 아니라 이미 도착한 응답의 in-place 등장 연출이며,
실제 SSE 스트리밍은 별도 백엔드 트랙(Step 2b)에서 소스만 교체한다.
긴 답변(> REVEAL_MAX_WORDS)은 동시 blur 애니메이션 폭주를 피해 블록 페이드. */
.reveal-word {
display: inline-block;
animation: reveal-word-in 0.42s var(--cg-ease-enter, cubic-bezier(0.19, 1, 0.22, 1)) both;
will-change: filter, transform, opacity;
}
@keyframes reveal-word-in {
from {
filter: blur(6px);
opacity: 0;
transform: translateY(4px);
}
to {
filter: blur(0);
opacity: 1;
transform: none;
}
}
.message-body.is-revealing-block {
animation: reveal-word-in 0.5s var(--cg-ease-enter, cubic-bezier(0.19, 1, 0.22, 1)) both;
}
@media (prefers-reduced-motion: reduce) {
.reveal-word,
.message-body.is-revealing-block {
animation: none;
}
}
.composer {
grid-template-columns: minmax(0, 1fr) 96px;
background: linear-gradient(180deg, transparent, var(--bg) 35%);
}
.composer textarea {
border-radius: var(--radius-xl);
background: var(--ds-color-surface);
box-shadow: var(--shadow);
}
.primary-button,
.secondary-button {
border-radius: var(--radius-md);
}
.primary-button {
border-color: var(--accent);
background: var(--ds-button-primary-bg);
}
.context-pane {
background: var(--ds-color-surface);
border-left: 1px solid var(--line);
}
.tabs {
display: flex;
overflow-x: auto;
grid-template-columns: none;
gap: 6px;
padding: 13px;
}
.tab-button {
flex: 0 0 auto;
min-height: 36px;
border-radius: var(--ds-radius-pill, 999px);
padding: 0 12px;
}
.tab-button.active {
border-color: var(--cg-text);
background: var(--accent-soft);
color: var(--accent);
}
.tab-content {
gap: 16px;
padding: 18px;
}
.panel-block h2 {
font-size: 17px;
}
.tool-status-list,
.workflow-timeline,
.knowledge-grid {
display: grid;
gap: 10px;
}
.tool-status-card,
.workflow-step {
display: grid;
grid-template-columns: 28px minmax(0, 1fr);
gap: 10px;
align-items: center;
padding: 12px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
}
.tool-status-card small,
.workflow-step small {
display: block;
margin-top: 3px;
color: var(--muted);
font-size: var(--ds-text-caption-12);
}
.status-dot,
.workflow-step > span {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--accent-soft);
color: var(--accent);
font-size: var(--ds-text-micro-11);
font-weight: 600;
}
.workflow-step.active {
border-color: var(--cg-text);
background: linear-gradient(180deg, var(--surface), var(--accent-soft));
}
.source-list.compact {
padding: 0;
}
[data-theme="dark"] .sidebar .section-label,
[data-theme="dark"] .brand-row span {
color: #94a3b8;
}
[data-theme="dark"] .upload-form .secondary-button,
[data-theme="dark"] .prompt-row button,
[data-theme="dark"] .feedback-row button,
[data-theme="dark"] .document-actions button {
background: var(--surface);
color: var(--ink);
}
[data-theme="dark"] .source-snippet {
color: var(--ds-color-ink-soft);
}
@media (max-width: 1200px) {
.workbench {
grid-template-columns: minmax(0, 1fr);
}
.context-pane {
min-height: 0;
max-height: min(520px, 48vh);
border-top: 1px solid var(--line);
border-left: 0;
}
}
@media (max-width: 900px) {
.app-shell {
grid-template-columns: 1fr;
}
.sidebar {
min-height: auto;
border-right: 0;
}
.nav-section {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.sidebar-section.grow {
max-height: min(260px, 38vh);
}
.topbar {
align-items: flex-start;
flex-direction: column;
padding: 16px;
}
.status-stack {
justify-content: flex-start;
}
.message-list {
padding: 22px 16px;
}
.message {
grid-template-columns: 34px minmax(0, 1fr);
}
.message-label {
width: 32px;
height: 32px;
}
.prompt-row {
grid-template-columns: 1fr;
}
.app-command-grid {
grid-template-columns: 1fr;
}
.composer {
grid-template-columns: 1fr;
padding: 12px 16px 16px;
}
.upload-form {
grid-template-columns: 1fr;
}
}
/* AI Native reference adaptation: light-first product workspace */
.app-shell {
grid-template-columns: 292px minmax(0, 1fr);
}
.sidebar {
background:
linear-gradient(180deg, rgba(255, 255, 255, 0.98), rgba(248, 250, 252, 0.94)),
var(--surface);
color: var(--ink);
border-right: 1px solid var(--line);
box-shadow: 1px 0 0 rgba(255, 255, 255, 0.7);
}
.brand-row strong,
.nav-item span,
.recent-item span {
color: var(--ink);
}
.brand-row span,
.nav-item small,
.recent-item small,
.sidebar .section-label {
color: var(--muted);
}
.theme-toggle {
border-color: var(--line);
background: var(--surface);
color: var(--ink-soft);
box-shadow: var(--ds-shadow-xs);
}
.theme-toggle:hover,
.nav-item:hover,
.nav-item.active {
background: linear-gradient(180deg, #ffffff, #f3f6ff);
}
.nav-item {
color: var(--ink);
}
.recent-item {
color: var(--ink);
}
.recent-item:hover {
background: #f8faff;
}
.sidebar select {
background: #ffffff;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.05);
}
.sidebar .secondary-button {
border-color: var(--line);
background: #111827;
color: #ffffff;
}
[data-theme="dark"] .brand-row strong,
[data-theme="dark"] .nav-item span,
[data-theme="dark"] .recent-item span {
color: #f8fafc;
}
[data-theme="dark"] .theme-toggle {
border-color: rgba(226, 232, 240, 0.16);
background: rgba(255, 255, 255, 0.08);
color: #f8fafc;
}
[data-theme="dark"] .theme-toggle:hover,
[data-theme="dark"] .nav-item:hover,
[data-theme="dark"] .nav-item.active {
border-color: rgba(34, 211, 238, 0.38);
background: rgba(255, 255, 255, 0.1);
}
[data-theme="dark"] .recent-item:hover {
border-color: rgba(255, 255, 255, 0.15);
background: rgba(255, 255, 255, 0.07);
}
[data-theme="dark"] .sidebar .secondary-button {
border-color: rgba(255, 255, 255, 0.16);
background: rgba(255, 255, 255, 0.08);
color: #ffffff;
}
.workspace-hero {
position: sticky;
top: 0;
z-index: 20;
}
.context-pane {
background: rgba(255, 255, 255, 0.84);
backdrop-filter: blur(18px);
}
[data-theme="dark"] .context-pane {
background: rgba(24, 24, 27, 0.86);
}
.context-panel-head {
padding: 4px 2px 2px;
}
.context-panel-head h2 {
margin-top: 3px;
font-size: 19px;
}
/* Calm Portal v1: ChatGPT/Claude-style product surface */
.app-shell {
grid-template-columns: 264px minmax(0, 1fr);
}
.sidebar {
gap: 14px;
padding: 16px;
background: rgba(255, 255, 255, 0.96);
color: var(--ink);
}
.brand-row {
min-height: 42px;
}
.new-chat-button {
display: flex;
align-items: center;
justify-content: center;
min-height: 42px;
padding: 0 12px;
border: 1px solid var(--line);
border-radius: 12px;
background: #111827;
color: #ffffff;
font-weight: 600;
}
.new-chat-button:hover {
background: #020617;
}
.nav-section {
gap: 5px;
}
.nav-item {
min-height: 38px;
padding: 0 12px;
border-radius: var(--ds-radius-sm, 10px);
}
.nav-item span {
font-size: var(--ds-text-body-14);
}
.nav-item small {
display: none;
}
.recent-list {
gap: 3px;
}
.recent-item {
min-height: 38px;
padding: 8px 10px;
}
.theme-toggle {
min-height: 34px;
}
.workspace-hero {
min-height: 76px;
padding: 16px 28px;
background: rgba(255, 255, 255, 0.86);
}
.topbar h1 {
font-size: var(--ds-text-title-18);
}
.hero-copy {
font-size: var(--ds-text-caption-13);
}
.status-stack {
gap: 6px;
}
.status-pill {
min-height: 30px;
font-size: var(--ds-text-micro-11);
}
.workbench {
grid-template-columns: minmax(0, 1fr) minmax(360px, 420px);
}
html[data-portal-tab="home"] .workbench {
grid-template-columns: minmax(0, 1fr);
}
html[data-portal-tab="home"] .context-pane {
display: none;
}
.chat-pane {
background: #ffffff;
}
.message-list {
padding: 36px clamp(22px, 7vw, 96px);
}
.calm-chat-home {
width: min(760px, 100%);
max-width: none;
justify-items: center;
align-self: center;
margin: auto;
gap: 18px;
padding: 24px 8px 18px;
text-align: center;
}
.home-project-pill {
display: inline-flex;
align-items: center;
min-height: 30px;
max-width: min(100%, 620px);
padding: 0 12px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill, 999px);
background: rgba(255, 255, 255, 0.78);
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: 600;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.calm-chat-home h2 {
max-width: 720px;
margin: 0;
font-size: clamp(30px, 4vw, 42px);
font-weight: 600;
line-height: 1.18;
letter-spacing: 0;
word-break: keep-all;
}
.calm-chat-home p {
max-width: 620px;
margin: 0;
color: var(--muted);
font-size: var(--ds-text-body-15);
line-height: 1.7;
word-break: keep-all;
}
.quick-start-grid {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 10px;
width: min(640px, 100%);
margin-top: 8px;
}
.quick-start-grid button {
min-height: 46px;
padding: 10px 14px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-md, 14px);
background: #ffffff;
color: var(--ink);
font-size: var(--ds-text-body-14);
font-weight: 600;
text-align: left;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
transition: border-color var(--motion), box-shadow var(--motion), transform var(--motion);
}
.quick-start-grid button:hover {
box-shadow: 0 10px 24px rgba(15, 23, 42, 0.08);
transform: translateY(-1px);
}
.composer {
width: min(760px, calc(100% - 44px));
margin: 0 auto;
padding: 0 0 28px;
background: transparent;
}
.composer textarea {
min-height: 58px;
border-radius: var(--ds-radius-lg, 18px);
background: #ffffff;
}
.composer .primary-button {
min-height: 58px;
border-radius: var(--ds-radius-lg, 18px);
background: #111827;
}
.context-pane {
background: rgba(255, 255, 255, 0.92);
}
.right-panel-empty {
display: none;
}
[data-theme="dark"] .sidebar {
background: rgba(9, 9, 11, 0.96);
}
[data-theme="dark"] .new-chat-button {
background: #f8fafc;
color: #09090b;
}
[data-theme="dark"] .chat-pane {
background:
radial-gradient(circle at 50% 12%, rgba(129, 140, 248, 0.11), transparent 32%),
var(--bg);
}
[data-theme="dark"] .home-project-pill,
[data-theme="dark"] .quick-start-grid button,
[data-theme="dark"] .composer textarea {
background: rgba(24, 24, 27, 0.88);
}
@media (max-width: 900px) {
.app-shell {
grid-template-columns: 1fr;
}
.sidebar {
min-height: auto;
border-right: 0;
border-bottom: 1px solid var(--line);
}
.nav-section {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.nav-item {
justify-content: start;
text-align: left;
}
.workspace-hero {
display: none;
}
.quick-start-grid {
grid-template-columns: 1fr;
}
.composer {
width: calc(100% - 28px);
grid-template-columns: 1fr;
}
}
.mini-card,
.app-card,
.app-detail-panel,
.app-workflow-panel,
.app-input-fields,
.source-card,
.tool-status-card,
.workflow-step {
border-radius: var(--radius-lg);
background: rgba(255, 255, 255, 0.9);
}
[data-theme="dark"] .mini-card,
[data-theme="dark"] .app-card,
[data-theme="dark"] .app-detail-panel,
[data-theme="dark"] .app-workflow-panel,
[data-theme="dark"] .app-input-fields,
[data-theme="dark"] .source-card,
[data-theme="dark"] .tool-status-card,
[data-theme="dark"] .workflow-step {
background: rgba(24, 24, 27, 0.92);
}
.document-actions button {
border-radius: var(--ds-radius-pill, 999px);
}
.message-body {
border-radius: var(--radius-xl);
}
.message-label {
border-radius: var(--ds-radius-md, 14px);
}
@media (max-width: 900px) {
.app-shell {
grid-template-columns: 1fr;
}
}
/* Artifact Canvas v1 */
html[data-portal-tab="outputs"] .workbench {
grid-template-columns: minmax(420px, 0.95fr) minmax(520px, 0.78fr);
}
.artifact-studio {
display: grid;
grid-template-columns: minmax(220px, 0.72fr) minmax(320px, 1.08fr);
align-items: start;
gap: 14px;
}
.artifact-library,
.artifact-canvas-shell {
display: grid;
gap: 12px;
min-width: 0;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.artifact-library {
padding: 14px;
max-height: 70vh;
overflow: auto;
}
.artifact-canvas-shell {
padding: 16px;
background: rgba(255, 255, 255, 0.92);
}
.empty-artifact-canvas {
min-height: 220px;
align-content: center;
}
.artifact-list-item {
color: var(--ink);
text-align: left;
}
.artifact-path-line {
display: block;
color: var(--muted);
font-size: var(--ds-text-micro-11);
line-height: 1.35;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.artifact-list-item.selected-artifact {
border-color: var(--cg-text);
background: linear-gradient(180deg, var(--cg-surface), var(--cg-hover-soft));
box-shadow: inset 3px 0 0 var(--accent);
}
.artifact-preview-button {
width: 100%;
color: var(--ink);
text-align: left;
}
.artifact-canvas-toolbar {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.artifact-canvas-toolbar h3 {
margin: 3px 0 0;
font-size: var(--ds-text-title-20);
line-height: 1.25;
word-break: keep-all;
}
.artifact-canvas-toolbar p:not(.eyebrow) {
max-width: 100%;
margin: 6px 0 0;
color: var(--muted);
font-size: var(--ds-text-caption-12);
line-height: 1.45;
overflow-wrap: anywhere;
}
.artifact-mode-switch {
display: inline-flex;
flex: 0 0 auto;
gap: 4px;
padding: 4px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill, 999px);
background: var(--surface-2);
}
.artifact-mode-switch button {
min-height: 30px;
padding: 0 10px;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: transparent;
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.artifact-mode-switch button.active {
background: var(--surface);
color: var(--accent);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.08);
}
.artifact-meta-row,
.artifact-action-row {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.artifact-meta-row span {
min-height: 28px;
padding: 6px 9px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill, 999px);
background: var(--surface);
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.artifact-action-row button {
min-height: 34px;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill, 999px);
background: var(--surface);
color: var(--ink);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.artifact-action-row button:hover {
border-color: var(--cg-menu-border);
background: var(--accent-soft);
}
.artifact-action-row .primary-inline {
border-color: transparent;
background: #111827;
color: #ffffff;
}
.artifact-canvas-body {
min-width: 0;
}
.artifact-document-preview,
.artifact-editor {
width: 100%;
min-height: 420px;
max-height: 58vh;
overflow: auto;
border: 1px solid var(--line);
border-radius: var(--radius-xl);
background: var(--surface);
box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.7);
}
.artifact-document-preview {
padding: 18px;
}
.artifact-document-preview p,
.artifact-document-preview h3,
.artifact-document-preview h4,
.artifact-document-preview h5 {
margin: 18px 0 10px;
color: var(--ink);
}
.artifact-editor {
padding: 16px;
color: var(--ink);
font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
font-size: var(--ds-text-caption-13);
line-height: 1.6;
resize: vertical;
}
.artifact-version-rail {
display: grid;
gap: 10px;
padding-top: 2px;
}
.artifact-version-rail > div:first-child {
display: flex;
align-items: baseline;
justify-content: space-between;
gap: 12px;
}
.artifact-version-rail strong {
font-size: var(--ds-text-caption-13);
}
.artifact-version-list {
display: grid;
gap: 8px;
}
.artifact-version-list button {
display: grid;
grid-template-columns: 34px minmax(0, 1fr);
gap: 2px 10px;
align-items: center;
min-height: 54px;
padding: 10px;
border: 1px solid var(--line);
border-radius: var(--radius-lg);
background: var(--surface);
color: var(--ink);
text-align: left;
}
.artifact-version-list button.active {
border-color: var(--cg-text);
background: var(--accent-soft);
}
.artifact-version-list button > span {
grid-row: span 2;
display: grid;
place-items: center;
width: 30px;
height: 30px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--surface-2);
color: var(--accent);
font-size: var(--ds-text-micro-11);
font-weight: 600;
}
.artifact-version-list small {
color: var(--muted);
font-size: var(--ds-text-micro-11);
}
[data-theme="dark"] .artifact-library,
[data-theme="dark"] .artifact-canvas-shell,
[data-theme="dark"] .artifact-document-preview,
[data-theme="dark"] .artifact-editor,
[data-theme="dark"] .artifact-list-item.selected-artifact {
background: rgba(24, 24, 27, 0.9);
}
[data-theme="dark"] .artifact-action-row .primary-inline {
background: #f8fafc;
color: #09090b;
}
@media (max-width: 1200px) {
html[data-portal-tab="outputs"] .workbench {
grid-template-columns: 1fr;
}
.artifact-studio {
grid-template-columns: 1fr;
}
}
@media (max-width: 900px) {
.artifact-canvas-toolbar {
display: grid;
}
.artifact-mode-switch {
width: fit-content;
}
.artifact-document-preview,
.artifact-editor {
min-height: 320px;
}
}
/* Premium Product Detail System v1 */
:root {
--premium-surface: var(--ds-color-surface);
--premium-surface-strong: var(--ds-color-surface-solid);
--premium-border: var(--ds-color-line);
--premium-shadow: var(--ds-shadow-xs);
}
/* 강조 컬러(accent) — 개인 설정. app.js가 문서 루트에 data-accent를 세우면
선택·강조 테두리, 폼 accent-color, --accent-soft 배경, 그라디언트가 이 값을 쓴다
(이전엔 --accent가 정의된 적 없어 fallback #2f6bff로 고정됐다). focus ring은 별도
토큰 --cg-focus-ring을 쓰므로 대상이 아니다. 블랙/그레이는 다크 배경에서 그대로면
테두리가 안 보이므로 라이트·다크를 따로 정의한다. */
:root[data-accent="ink"] {
--accent: #1a1a1a;
--accent-2: #3d3d3d;
--accent-soft: rgba(17, 17, 17, 0.06);
}
:root[data-accent="gray"] {
--accent: #6b7280;
--accent-2: #9ca3af;
--accent-soft: rgba(107, 114, 128, 0.12);
}
:root[data-accent="blue"] {
--accent: #155eef;
--accent-2: #4f83ff;
--accent-soft: rgba(21, 94, 239, 0.10);
}
:root[data-theme="dark"][data-accent="ink"] {
--accent: #d4d4d4;
--accent-2: #a3a3a3;
--accent-soft: rgba(255, 255, 255, 0.10);
}
:root[data-theme="dark"][data-accent="gray"] {
--accent: #9ca3af;
--accent-2: #6b7280;
--accent-soft: rgba(156, 163, 175, 0.15);
}
:root[data-theme="dark"][data-accent="blue"] {
--accent: #4f83ff;
--accent-2: #155eef;
--accent-soft: rgba(79, 131, 255, 0.15);
}
/* 외부 링크 경고(safetyExternalLinkWarning). app.js가 포털 밖으로 나가는 링크에만
data-external을 달면, 링크 라벨 뒤에 작은 외부 이동 아이콘(↗)을 붙여 사용자가
눌러서 나가기 전에 알아채게 한다 — passive 표시라 클릭을 막지 않는다. */
a[data-external="true"]::after {
content: "↗";
display: inline-block;
margin-inline-start: 0.15em;
font-size: 0.85em;
line-height: 1;
vertical-align: baseline;
opacity: 0.7;
}
.premium-product-shell-v1 {
/* 2026-08-01 셸 층 중복 제거. body 에 셸 클래스 6개가 index.html 에서 항상 함께 붙어
있어(토글 없음), 같은 특이도로 같은 속성을 거는 선언은 마지막 것만 이긴다. 여기서
지던 선언은 화면에 한 번도 닿은 적이 없어 지웠다 — 계산 스타일 무변화로 검증. */
line-height: var(--ds-leading-reading);
}
[data-theme="dark"] .premium-product-shell-v1 {
background:
radial-gradient(circle at 52% 8%, rgba(129, 140, 248, 0.12), transparent 28%),
linear-gradient(180deg, #09090b 0%, #111113 100%);
}
.premium-product-shell-v1 .app-shell {
grid-template-columns: 268px minmax(0, 1fr);
}
.premium-product-shell-v1 .sidebar {
padding: 18px 14px;
background: rgba(255, 255, 255, 0.9);
backdrop-filter: blur(22px);
}
.premium-product-shell-v1 .brand-row strong {
font-size: var(--ds-text-title-18);
font-weight: var(--ds-weight-semibold);
}
.premium-product-shell-v1 .section-label,
.premium-product-shell-v1 .eyebrow {
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-semibold);
letter-spacing: 0;
}
.premium-product-shell-v1 .nav-item {
grid-template-columns: 28px minmax(0, 1fr);
align-items: center;
min-height: 40px;
padding: 7px 10px;
border-radius: 12px;
/* --ds-motion-hover 는 정의가 유실돼 이 선언이 통째로 무효였다(2026-08-01).
원문은 `a52b7b910` design-system/tokens/motion/motion.css:5 에서 복원 —
★`all`이 아니라 명시적 속성 목록이다. 옛 --ds-motion-standard 는 값이 같은
--ds-motion-default 로 옮겼다. 토큰으로 되살리지 않은 이유: ds.primitive 의
motion 그룹은 $type:transition 이라 속성 목록을 담을 수 없고, 이 파일 머리말이
--ds-* 재선언을 금지한다. */
transition:
transform var(--ds-motion-default),
border-color var(--ds-motion-default),
box-shadow var(--ds-motion-default),
background var(--ds-motion-default);
}
.premium-product-shell-v1 .nav-icon {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border: 1px solid var(--premium-border);
border-radius: 8px;
background: #ffffff;
color: var(--accent);
font-size: var(--ds-text-micro-11);
font-weight: var(--ds-weight-semibold);
}
.premium-product-shell-v1 .nav-item.active {
box-shadow: inset 3px 0 0 var(--accent);
}
.premium-product-shell-v1 .recent-item,
.premium-product-shell-v1 .new-chat-button,
.premium-product-shell-v1 .theme-toggle {
transition:
transform var(--ds-motion-default),
border-color var(--ds-motion-default),
box-shadow var(--ds-motion-default),
background var(--ds-motion-default);
}
.workspace-identity {
display: flex;
align-items: center;
gap: 14px;
min-width: 0;
}
.workspace-cover {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 42px;
height: 42px;
border-radius: 16px;
color: #ffffff;
font-weight: var(--ds-weight-bold);
}
.premium-product-shell-v1 .workspace-hero {
min-height: 82px;
background: rgba(255, 255, 255, 0.78);
box-shadow: var(--ds-shadow-hairline);
}
.premium-product-shell-v1 .topbar h1 {
font-size: var(--ds-text-title-20);
font-weight: var(--ds-weight-semibold);
line-height: var(--ds-leading-title);
}
.state-indicator {
position: relative;
gap: 7px;
font-weight: var(--ds-weight-semibold);
}
.state-indicator::before {
content: "";
width: 7px;
height: 7px;
border-radius: var(--ds-radius-pill, 999px);
background: currentColor;
box-shadow: 0 0 0 4px color-mix(in srgb, currentColor 14%, transparent);
}
.premium-product-shell-v1 .chat-pane {
background: linear-gradient(180deg, rgba(255, 255, 255, 0.72), rgba(248, 250, 252, 0.98));
}
.premium-product-shell-v1 .calm-chat-home {
animation: fade-in-up 420ms cubic-bezier(0.16, 1, 0.3, 1);
}
.premium-product-shell-v1 .calm-chat-home h2 {
font-size: clamp(34px, 4.4vw, var(--ds-text-display-40));
font-weight: var(--ds-weight-semibold);
line-height: var(--ds-leading-tight);
}
.premium-product-shell-v1 .calm-chat-home p,
.premium-product-shell-v1 .message-body p,
.premium-product-shell-v1 .artifact-document-preview p {
font-size: var(--ds-text-body-15);
line-height: var(--ds-leading-reading);
font-weight: var(--ds-weight-regular);
}
.premium-card,
.premium-product-shell-v1 .mini-card,
.premium-product-shell-v1 .app-card,
.premium-product-shell-v1 .app-detail-panel,
.premium-product-shell-v1 .app-workflow-panel,
.premium-product-shell-v1 .app-input-fields,
.premium-product-shell-v1 .artifact-library,
.premium-product-shell-v1 .artifact-canvas-shell,
.premium-product-shell-v1 .evidence-card,
.premium-product-shell-v1 .source-card {
border-color: var(--premium-border);
background: var(--premium-surface-strong);
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.soft-hover-lift,
.premium-product-shell-v1 .quick-start-grid button,
.premium-product-shell-v1 .mini-card,
.premium-product-shell-v1 .app-card,
.premium-product-shell-v1 .artifact-preview-card,
.premium-product-shell-v1 .artifact-action-row button {
transition:
transform var(--ds-motion-default),
border-color var(--ds-motion-default),
box-shadow var(--ds-motion-default),
background var(--ds-motion-default);
}
.soft-hover-lift:hover,
.premium-product-shell-v1 .quick-start-grid button:hover,
.premium-product-shell-v1 .mini-card:hover,
.premium-product-shell-v1 .app-card:hover,
.premium-product-shell-v1 .artifact-preview-card:hover {
transform: translateY(-2px);
box-shadow: var(--premium-shadow);
}
.result-highlight {
display: inline-flex;
flex-wrap: wrap;
justify-content: center;
gap: 8px;
margin-top: 4px;
}
.result-highlight span {
min-height: 30px;
padding: 6px 10px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-pill, 999px);
background: rgba(255, 255, 255, 0.72);
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-semibold);
}
.app-result-card.result-highlight {
display: grid;
justify-content: stretch;
}
.premium-product-shell-v1 .message {
grid-template-columns: 38px minmax(0, 780px);
}
.premium-product-shell-v1 .message-body {
padding: 16px 18px;
border-color: var(--premium-border);
border-radius: 20px;
box-shadow: 0 1px 2px rgba(15, 23, 42, 0.04);
}
.streaming-cursor {
display: inline-block;
width: 7px;
height: 1.12em;
margin-left: 2px;
border-radius: 2px;
background: var(--cg-text, var(--ink));
vertical-align: -2px;
animation: streaming-cursor 900ms steps(2, jump-none) infinite;
}
.composer-surface {
display: grid;
gap: 8px;
width: min(790px, calc(100% - 44px));
padding: 10px;
border: 1px solid var(--premium-border);
border-radius: 26px;
background: rgba(255, 255, 255, 0.88);
box-shadow: 0 18px 56px rgba(15, 23, 42, 0.14);
backdrop-filter: blur(18px);
}
.composer-toolbar {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 0 4px;
}
.composer-tool-button {
min-height: 28px;
padding: 0 9px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill, 999px);
background: rgba(248, 250, 252, 0.86);
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-semibold);
}
.composer-tool-button:hover {
background: var(--accent-soft);
color: var(--accent);
}
.composer-input-row {
display: grid;
grid-template-columns: minmax(0, 1fr) 92px;
gap: 8px;
align-items: end;
}
.composer-surface textarea {
min-height: 52px;
border: 0;
border-radius: var(--ds-radius-lg, 18px);
background: transparent;
box-shadow: none;
font-size: var(--ds-text-body-15);
line-height: var(--ds-leading-body);
}
.composer-surface textarea:focus {
box-shadow: none;
}
.artifact-live-badge {
display: inline-flex;
align-items: center;
min-height: 20px;
margin-left: 6px;
padding: 0 7px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--ds-color-cyan-soft);
color: #0891b2;
font-size: 10px;
font-weight: var(--ds-weight-bold);
text-transform: none;
}
.premium-product-shell-v1 .artifact-document-preview {
font-size: var(--ds-text-body-15);
line-height: var(--ds-leading-document);
}
@keyframes fade-in-up {
from {
opacity: 0;
transform: translateY(10px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
@keyframes streaming-cursor {
50% {
opacity: 0;
}
}
[data-theme="dark"] .premium-product-shell-v1 .sidebar,
[data-theme="dark"] .composer-surface,
[data-theme="dark"] .result-highlight span {
background: rgba(24, 24, 27, 0.86);
}
[data-theme="dark"] .premium-product-shell-v1 .workspace-hero {
background: rgba(9, 9, 11, 0.72);
}
@media (max-width: 900px) {
.composer-surface {
width: calc(100% - 28px);
}
.composer-input-row {
grid-template-columns: 1fr;
}
}
/* AI Workspace Product Renewal v28 */
:root {
--ds-leading-body: 1.58;
}
/* 20260708-mobile-dialog-tokens: WIZON mobile dialog design tokens. On mobile,
content-panel modals (settings, search, …) go full-screen edge-to-edge like
ChatGPT; small confirmation alerts (delete, share) stay centered. Opt a
into the full-screen treatment with the [data-mobile-fullscreen] attribute — the
rule that consumes these tokens lives at the end of this file
(search "20260708-mobile-dialog-fullscreen-system").
NOTE: --wizon-mobile-breakpoint is the single source of truth for the mobile
breakpoint; CSS cannot use a custom property inside a media-query condition, so the
520px literals in the media queries must be kept in sync with this token. */
:root {
--wizon-mobile-breakpoint: 520px;
--wizon-mobile-dialog-inline-size: 100vw;
/* Track the live visual viewport so full-screen dialogs (search, settings) shrink
with the iOS keyboard and their sticky header stays put — same fix as the shell
(styles.css "20260709-mobile-keyboard-fix"). Falls back to 100dvh pre-JS. */
--wizon-mobile-dialog-block-size: var(--wizon-vvh, 100dvh);
--wizon-mobile-dialog-margin: 0;
--wizon-mobile-dialog-radius: 0;
}
.service-product-v28 .app-shell {
grid-template-columns: 260px minmax(0, 1fr);
}
.service-product-v28 .sidebar {
padding: 18px 14px 16px;
background: rgba(255, 255, 255, 0.96);
border-right: 1px solid rgba(15, 23, 42, 0.08);
box-shadow: none;
}
.service-product-v28 .brand-row {
padding: 0 2px 8px;
}
.service-product-v28 .brand-row strong {
font-size: var(--ds-text-body-16);
font-weight: 600;
line-height: 1.18;
}
.service-product-v28 .new-chat-button {
min-height: 44px;
border: 0;
border-radius: 13px;
background: #0f172a;
box-shadow: 0 10px 28px rgba(15, 23, 42, 0.14);
}
.service-product-v28 .nav-section {
gap: 3px;
}
.service-product-v28 .nav-item {
grid-template-columns: 26px minmax(0, 1fr);
min-height: 38px;
padding: 7px 9px;
border-radius: 11px;
color: var(--ink-soft);
}
.service-product-v28 .nav-item.active {
background: #f6f7ff;
box-shadow: inset 3px 0 0 var(--accent);
}
.service-product-v28 .nav-icon {
width: 22px;
height: 22px;
border-radius: 7px;
background: #ffffff;
}
.service-product-v28 .recent-item {
min-height: 36px;
border-radius: var(--ds-radius-sm, 10px);
}
html[data-portal-tab="home"] .service-product-v28 .workspace-hero {
display: none;
}
.service-product-v28 .chat-pane {
min-height: 100vh;
background: linear-gradient(180deg, #ffffff 0%, #fbfcfd 100%);
}
.service-product-v28 .message-list {
padding: clamp(42px, 9vh, 92px) clamp(22px, 7vw, 104px) 28px;
}
.service-product-v28 .calm-chat-home {
width: min(720px, 100%);
gap: 17px;
padding-top: 0;
}
.service-product-v28 .home-project-pill {
min-height: 32px;
border-color: rgba(15, 23, 42, 0.1);
background: rgba(255, 255, 255, 0.86);
color: #667085;
}
.service-product-v28 .calm-chat-home h2 {
font-size: clamp(34px, 4.2vw, 44px);
font-weight: 600;
line-height: 1.16;
}
.service-product-v28 .quick-start-grid button {
min-height: 48px;
border-radius: 15px;
font-weight: 600;
}
.service-product-v28 .result-highlight span {
color: #667085;
}
.service-product-v28 .composer-surface {
width: min(790px, calc(100% - 48px));
margin-bottom: 22px;
border-radius: var(--ds-radius-2xl, 28px);
background: rgba(255, 255, 255, 0.94);
box-shadow: 0 18px 56px rgba(15, 23, 42, 0.13);
}
.service-product-v28 .composer-toolbar {
align-items: center;
}
.composer-model-pill {
display: inline-flex;
align-items: center;
min-height: 28px;
margin-left: auto;
padding: 0 10px;
border: 1px solid var(--line);
border-radius: var(--ds-radius-pill, 999px);
background: #f8fafc;
color: var(--muted);
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-semibold);
}
.service-product-v28 .composer-surface textarea {
min-height: 54px;
}
.service-product-v28 .composer .primary-button {
min-height: 52px;
border: 0;
border-radius: var(--ds-radius-lg, 18px);
background: #0f172a;
}
.service-product-v28 .context-pane {
background: rgba(255, 255, 255, 0.96);
}
[data-theme="dark"] .service-product-v28 {
background:
radial-gradient(circle at 50% 14%, rgba(129, 140, 248, 0.13), transparent 28%),
linear-gradient(180deg, #09090b 0%, #101014 100%);
}
[data-theme="dark"] .service-product-v28 .sidebar,
[data-theme="dark"] .service-product-v28 .chat-pane,
[data-theme="dark"] .service-product-v28 .composer-surface {
background: rgba(15, 15, 18, 0.96);
}
[data-theme="dark"] .service-product-v28 .nav-item.active {
background: rgba(129, 140, 248, 0.14);
}
[data-theme="dark"] .composer-model-pill {
background: rgba(255, 255, 255, 0.06);
}
@media (max-width: 900px) {
.service-product-v28 .app-shell {
grid-template-columns: 1fr;
}
.service-product-v28 .chat-pane {
min-height: calc(100vh - 280px);
}
.service-product-v28 .message-list {
padding: 38px 18px 24px;
}
.composer-model-pill {
margin-left: 0;
}
.approved-manual-map-form {
grid-template-columns: 1fr;
}
}
/* ====================================================================== *
* .btn — unified button system (71-component-rulebook.md §4.1)
* 5 variants: primary, secondary, ghost, danger, link. No other variants.
* Solid backgrounds are ONLY allowed for primary and danger.
* Phase 3.1.E (2026-05-24): all JS/HTML callsites migrated to .btn.
* Legacy .primary-button / .secondary-button / .primary-inline /
* .composer-tool-button CSS rules below are orphaned and slated for
* removal in Phase 4 lint (test_token_usage_lint.py).
* ====================================================================== */
.btn {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
border: 1px solid transparent;
border-radius: var(--ds-radius-xs);
font: inherit;
font-weight: var(--ds-weight-semibold);
cursor: pointer;
user-select: none;
text-decoration: none;
transition:
background-color var(--ds-motion-fast),
border-color var(--ds-motion-fast),
color var(--ds-motion-fast),
box-shadow var(--ds-motion-fast);
}
.btn:focus-visible {
outline: 2px solid var(--ds-color-accent);
outline-offset: 2px;
}
.btn:disabled,
.btn[aria-disabled="true"] {
opacity: 0.55;
cursor: not-allowed;
}
.btn.btn--sm { min-height: 28px; padding: 0 var(--ds-space-3); font-size: var(--ds-text-caption-13); }
.btn.btn--md { min-height: 36px; padding: 0 var(--ds-space-4); font-size: var(--ds-text-body-14); }
.btn.btn--lg { min-height: 44px; padding: 0 var(--ds-space-5); font-size: var(--ds-text-body-15); }
.btn.btn--primary {
background: var(--ds-button-primary-bg);
color: var(--ds-button-primary-fg);
border-color: var(--ds-button-primary-bg);
}
.btn.btn--primary:hover:not(:disabled) {
background: var(--ds-button-primary-bg-hover);
border-color: var(--ds-button-primary-bg-hover);
}
.btn.btn--secondary {
background: var(--ds-button-secondary-bg);
color: var(--ds-button-secondary-fg);
border-color: var(--ds-button-secondary-border);
}
.btn.btn--secondary:hover:not(:disabled) {
background: var(--ds-button-secondary-bg-hover);
border-color: var(--ds-color-line-strong);
}
.btn.btn--ghost {
background: transparent;
color: var(--ds-button-ghost-fg);
border-color: transparent;
}
.btn.btn--ghost:hover:not(:disabled) {
background: var(--ds-button-ghost-bg-hover);
}
.btn.btn--danger {
background: var(--ds-button-danger-bg);
color: var(--ds-button-danger-fg);
border-color: var(--ds-button-danger-bg);
}
.btn.btn--danger:hover:not(:disabled) {
background: var(--ds-button-danger-bg-hover);
border-color: var(--ds-button-danger-bg-hover);
}
.btn.btn--link {
background: transparent;
color: var(--ds-button-link-fg);
border-color: transparent;
padding-left: 0;
padding-right: 0;
min-height: auto;
}
.btn.btn--link:hover:not(:disabled) {
text-decoration: underline;
}
/* ====================================================================== *
* .ds-input — unified input system (71-component-rulebook.md §4.4)
* Sizes: sm 32px, md 40px (default), lg 48px.
* States: idle / hover / focus / disabled / invalid.
* Error state changes border only — never bg.
* ====================================================================== */
.ds-input {
width: 100%;
border: 1px solid var(--ds-input-border);
border-radius: var(--ds-radius-xs);
background: var(--ds-input-bg);
color: var(--ds-input-fg);
font: inherit;
outline: none;
transition:
border-color var(--ds-motion-fast),
box-shadow var(--ds-motion-fast);
}
.ds-input::placeholder { color: var(--ds-input-placeholder); }
.ds-input.ds-input--sm { min-height: 32px; padding: 0 12px; font-size: var(--ds-text-caption-13); }
.ds-input.ds-input--md { min-height: 40px; padding: 0 14px; font-size: var(--ds-text-body-14); }
.ds-input.ds-input--lg { min-height: 48px; padding: 0 16px; font-size: var(--ds-text-body-15); }
.ds-input:hover:not(:disabled):not([aria-invalid="true"]) {
border-color: var(--ds-input-border-hover);
}
.ds-input:focus,
.ds-input:focus-visible {
border-color: var(--ds-input-border-focus);
box-shadow: 0 0 0 2px var(--ds-input-ring-focus);
}
.ds-input:disabled {
background: var(--ds-input-bg-disabled);
color: var(--ds-input-fg-muted);
cursor: not-allowed;
}
/* Native chevron (Phase 3.6) — replace browser-default arrow with
* a token-driven inline SVG so the visual stays consistent across OS/UA. */
select.ds-input {
appearance: none;
-webkit-appearance: none;
-moz-appearance: none;
background-image: var(--ds-input-chevron);
background-repeat: no-repeat;
background-position: right 12px center;
background-size: 12px;
padding-right: 32px;
}
select.ds-input::-ms-expand { display: none; }
.ds-input[aria-invalid="true"] {
border-color: var(--ds-input-border-invalid);
}
/* Search wrapper: leading icon + optional trailing clear button */
.ds-search {
position: relative;
display: block;
}
.ds-search .ds-input {
padding-left: 36px;
}
.ds-search__icon {
position: absolute;
left: 12px;
top: 50%;
transform: translateY(-50%);
width: 16px;
height: 16px;
color: var(--ds-input-fg-muted);
pointer-events: none;
}
.ds-search__clear {
position: absolute;
right: 8px;
top: 50%;
transform: translateY(-50%);
background: transparent;
border: 0;
cursor: pointer;
padding: 4px 6px;
border-radius: var(--ds-radius-xs);
color: var(--ds-input-fg-muted);
font: inherit;
line-height: 1;
}
.ds-search__clear:hover {
background: var(--ds-color-surface-muted);
color: var(--ds-color-ink);
}
/* ====================================================================== *
* .ds-modal — unified modal system (71-component-rulebook.md §4.2)
* 3-slot anatomy: .ds-modal__header / .ds-modal__body / .ds-modal__footer
* Sizes: sm 560px, md 720px (default), lg 960px.
* Light/dark via Tier 2 swap (no [data-theme="dark"] selectors here).
* Coexists with legacy .login-dialog for incremental migration; new modals
* MUST use .ds-modal*.
* ====================================================================== */
.ds-modal__overlay {
position: fixed;
inset: 0;
z-index: 9999;
display: none;
align-items: center;
justify-content: center;
padding: var(--ds-space-6);
background: var(--ds-modal-overlay);
}
.ds-modal__overlay.is-open { display: flex; }
.ds-modal {
background: var(--ds-modal-surface);
border: 1px solid var(--ds-modal-border);
border-radius: var(--ds-modal-radius);
box-shadow: var(--ds-modal-shadow);
display: flex;
flex-direction: column;
max-height: 90vh;
width: 100%;
}
.ds-modal.ds-modal--sm { max-width: 560px; }
.ds-modal.ds-modal--md { max-width: 720px; }
.ds-modal.ds-modal--lg { max-width: 960px; }
.ds-modal__header {
padding: var(--ds-space-6);
border-bottom: 1px solid var(--ds-modal-border);
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--ds-space-4);
flex-shrink: 0;
}
.ds-modal__body {
padding: var(--ds-space-6);
overflow-y: auto;
flex: 1 1 auto;
}
.ds-modal__footer {
padding: var(--ds-space-6);
border-top: 1px solid var(--ds-modal-border);
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--ds-space-3);
flex-shrink: 0;
}
/* ====================================================================== *
* .ds-chip — segmented + count (71-component-rulebook.md §4.5)
* 2 variants only. Coexists with legacy .tab-button via selector grouping.
* ====================================================================== */
.ds-chip {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
background: var(--ds-chip-bg);
color: var(--ds-chip-fg);
border: 1px solid var(--ds-chip-border);
font: inherit;
font-size: var(--ds-text-body-14);
cursor: pointer;
transition: background var(--ds-motion-fast), color var(--ds-motion-fast), border-color var(--ds-motion-fast);
}
.ds-chip:hover:not([aria-disabled="true"]) {
background: var(--ds-chip-bg-hover);
}
.ds-chip:focus-visible {
outline: 2px solid var(--ds-color-accent);
outline-offset: 2px;
}
.ds-chip[aria-pressed="true"],
.ds-chip.is-active {
background: var(--ds-chip-bg-active);
color: var(--ds-chip-fg-active);
border-color: var(--ds-chip-bg-active);
}
.ds-chip.ds-chip--segmented {
min-height: 32px;
padding: 0 var(--ds-space-3);
border-radius: var(--ds-radius-xs);
}
.ds-chip.ds-chip--count {
min-height: 22px;
padding: 0 var(--ds-space-2);
border-radius: var(--ds-radius-pill);
background: var(--ds-chip-count-bg);
color: var(--ds-chip-count-fg);
border-color: transparent;
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-semibold);
}
/* Security-events panel filter chips (period / category / view). Reuses
* .ds-chip--segmented; this only lays the chips out in a wrapping row. */
.security-filter-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--ds-space-1);
margin: var(--ds-space-2) 0;
}
/* ====================================================================== *
* .ds-badge — status indicator (71-component-rulebook.md §4.6)
* 5 variants: ok, warn, bad, info, neutral. Dot variant: 8px round, fg only.
* ====================================================================== */
.ds-badge {
display: inline-flex;
align-items: center;
gap: var(--ds-space-1);
min-height: 22px;
padding: 2px var(--ds-space-2);
border-radius: var(--ds-radius-pill);
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-medium);
background: var(--ds-badge-neutral-bg);
color: var(--ds-badge-neutral-fg);
}
.ds-badge.ds-badge--ok { background: var(--ds-badge-ok-bg); color: var(--ds-badge-ok-fg); }
.ds-badge.ds-badge--warn { background: var(--ds-badge-warn-bg); color: var(--ds-badge-warn-fg); }
.ds-badge.ds-badge--bad { background: var(--ds-badge-bad-bg); color: var(--ds-badge-bad-fg); }
.ds-badge.ds-badge--info { background: var(--ds-badge-info-bg); color: var(--ds-badge-info-fg); }
.ds-badge.ds-badge--neutral { background: var(--ds-badge-neutral-bg); color: var(--ds-badge-neutral-fg); }
.ds-badge.ds-badge--dot {
width: 8px;
height: 8px;
min-height: 0;
padding: 0;
border-radius: 50%;
background: currentColor;
flex-shrink: 0;
}
.ds-badge.ds-badge--dot.ds-badge--ok { color: var(--ds-badge-ok-fg); }
.ds-badge.ds-badge--dot.ds-badge--warn { color: var(--ds-badge-warn-fg); }
.ds-badge.ds-badge--dot.ds-badge--bad { color: var(--ds-badge-bad-fg); }
.ds-badge.ds-badge--dot.ds-badge--info { color: var(--ds-badge-info-fg); }
.ds-badge.ds-badge--dot.ds-badge--neutral { color: var(--ds-badge-neutral-fg); }
/* ====================================================================== *
* .ds-tile — dashboard/hub stat tile (71-component-rulebook.md §4.7)
* Anatomy: [dot? · number · label]. Same visual weight per row.
* ====================================================================== */
.ds-tile {
background: var(--ds-tile-bg);
border: 1px solid var(--ds-tile-border);
border-radius: var(--ds-tile-radius);
padding: var(--ds-tile-padding);
display: flex;
flex-direction: column;
gap: var(--ds-space-2);
min-height: 84px;
}
.ds-tile__top {
display: flex;
align-items: center;
gap: var(--ds-space-2);
color: var(--ds-tile-label-fg);
font-size: var(--ds-text-micro-11);
text-transform: uppercase;
letter-spacing: 0.04em;
}
.ds-tile__num {
font-size: var(--ds-text-heading-32);
font-weight: var(--ds-weight-semibold);
color: var(--ds-tile-num-fg);
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
line-height: 1;
}
.ds-tile.ds-tile--muted .ds-tile__num { color: var(--ds-color-ink-soft); }
/* ====================================================================== *
* .ds-checkbox — minimal pattern (rulebook §4.8 not yet defined)
* Native .showModal() autofocuses
its first focusable child (e.g. the settings/close X), which painted the browser's default
focus ring even when the dialog was opened by touch. :focus-visible scopes the ring to
keyboard users so touch users see none (doc 143 mobile focus hardening; ref: MDN
:focus-visible). */
.chatgpt-reference-v1 .chatgpt-icon-button:focus:not(:focus-visible) {
outline: none;
}
@media (hover: hover) {
.chatgpt-reference-v1 .chatgpt-icon-button:hover {
background: #ececec;
color: var(--cg-text);
}
}
.chatgpt-reference-v1 .chatgpt-sidebar-group {
display: grid;
gap: 0;
margin-bottom: 16px;
}
.chatgpt-reference-v1 .chatgpt-sidebar-link,
.chatgpt-reference-v1 .new-chat-button.chatgpt-sidebar-link {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto;
align-items: center;
justify-content: start;
column-gap: 12px;
min-height: var(--cg-sidebar-item-height);
width: var(--cg-sidebar-item-width);
max-width: 100%;
padding: 6px 10px;
border: 0;
border-radius: var(--ds-radius-sm, 10px);
background: transparent;
color: var(--cg-text);
box-shadow: none;
font-size: var(--cg-text-label-size, 14px); /* 20260711-typography-contract: 라벨 토큰(모바일 17px 전파) */
font-weight: 400;
line-height: var(--cg-text-label-leading, 1.45); /* 데스크톱 14×1.45≈20px 동등, 모바일 17px에 비례 */
text-align: left;
/* 20260802-sidebar-link-no-underline: 이 규칙은 (프로젝트·드라이브·일정·라이브러리·아카이브·
휴지통)와 (새 채팅·검색)에 함께 걸린다. 리셋이 없으면 앵커만 브라우저 기본 밑줄을 받아
같은 드로어에 두 종류의 행이 생긴다(iPhone 17 시뮬 실촬영, 배포 0583703ab). */
text-decoration: none;
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-sidebar-link > [data-icon] {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
}
.chatgpt-reference-v1 .chatgpt-sidebar-link > span:not([data-icon]) {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-sidebar-shortcut {
justify-self: end;
margin-left: 8px;
color: #8a8a8a;
font-size: var(--ds-text-caption-12);
font-weight: 500;
letter-spacing: 0;
line-height: 16px;
}
.chatgpt-reference-v1 .chatgpt-sidebar-shortcut[hidden] {
display: none;
}
.chatgpt-reference-v1 .chatgpt-sidebar-link.active {
background: #ececec;
}
@media (hover: hover) {
.chatgpt-reference-v1 .chatgpt-sidebar-link:hover {
background: #ececec;
}
}
.chatgpt-reference-v1 .chatgpt-sidebar-link svg,
.chatgpt-reference-v1 .chatgpt-icon-button svg,
.chatgpt-reference-v1 .chatgpt-account-menu svg,
.chatgpt-reference-v1 .chatgpt-more-menu svg,
.chatgpt-reference-v1 .chatgpt-rail-button svg {
width: 18px;
height: 18px;
fill: none;
stroke: currentColor;
stroke-width: var(--wds-icon-stroke, 1.7);
stroke-linecap: round;
stroke-linejoin: round;
}
.chatgpt-reference-v1 .chatgpt-more-menu {
/* 20260704-sidebar-more-popover-chatgpt: Chrome-measured ChatGPT "더 보기" menu opens beside the sidebar (x 250, w 258, h 120). */
position: absolute;
left: 250px;
top: var(--sidebar-more-menu-top, 271px);
z-index: 70;
display: block;
width: 258px;
height: 120px;
padding: 6px 0;
border: 0 solid rgba(0, 0, 0, 0.05);
border-radius: 16px;
background: #ffffff;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
}
.chatgpt-reference-v1 .chatgpt-more-menu[hidden] {
display: none;
}
.chatgpt-reference-v1 .chatgpt-more-menu button {
display: flex;
align-items: center;
gap: 6px;
width: calc(100% - 12px);
height: 36px;
min-height: 36px;
margin: 0 6px;
padding: 6px 10px;
border: 0;
border-radius: var(--ds-radius-sm, 10px);
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
text-align: left;
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-more-menu button:hover {
background: #f4f4f4;
}
.chatgpt-reference-v1 .chatgpt-more-menu button > [data-icon] {
display: inline-grid;
flex: 0 0 20px;
place-items: center;
}
.chatgpt-reference-v1 .chatgpt-more-menu button svg {
width: 20px;
height: 20px;
}
.chatgpt-reference-v1 .chatgpt-account-area,
.chatgpt-reference-v1 .chatgpt-account-menu,
.chatgpt-reference-v1 .chatgpt-rail-account {
--chatgpt-account-area-padding-top: calc(var(--wizon-ai-space-unit) * 2.25);
--chatgpt-account-button-gap: var(--ds-space-2, 8px);
--chatgpt-account-button-pad-y: var(--cg-menu-gutter);
--chatgpt-account-button-pad-right: var(--cg-menu-gutter);
--chatgpt-account-button-pad-left: var(--ds-space-2, 8px);
--chatgpt-account-button-radius: var(--wizon-ai-radius-menu-row);
--chatgpt-account-avatar-size: var(--ds-space-6, 24px);
--chatgpt-account-avatar-bg: var(--wizon-ai-account-avatar-bg);
--chatgpt-account-avatar-fg: var(--wizon-ai-account-avatar-fg);
--chatgpt-account-avatar-font-size: var(--wds-font-size-caption);
--chatgpt-account-text-size: var(--wds-font-size-body-2);
--chatgpt-account-text-line-height: calc(var(--wizon-ai-space-unit) * 5);
--chatgpt-account-caption-size: var(--wds-font-size-caption);
--chatgpt-account-caption-line-height: var(--ds-space-4, 16px);
--chatgpt-account-menu-width: var(--wizon-ai-account-menu-width);
--chatgpt-account-menu-radius: var(--wizon-ai-radius-popover);
--chatgpt-account-menu-gutter: var(--cg-menu-gutter);
--chatgpt-account-menu-row-gap: var(--cg-menu-gutter);
--chatgpt-account-menu-row-height: var(--wizon-ai-menu-row-height);
--chatgpt-account-menu-row-radius: var(--wizon-ai-radius-menu-row);
--chatgpt-account-menu-row-icon-size: var(--wizon-ai-icon-size-md);
--chatgpt-account-menu-row-pad-y: var(--cg-menu-gutter);
--chatgpt-account-menu-row-pad-left: calc(var(--wizon-ai-space-unit) * 2.5);
--chatgpt-account-menu-row-pad-right: var(--ds-space-7, 32px);
--chatgpt-account-menu-row-font-size: var(--wds-font-size-body-2);
--chatgpt-account-menu-row-line-height: calc(var(--wizon-ai-space-unit) * 5);
--chatgpt-account-menu-head-height: var(--wizon-ai-account-menu-head-height);
--chatgpt-account-menu-head-gap: var(--ds-space-2, 8px);
--chatgpt-account-menu-head-margin-bottom: calc(var(--wizon-ai-space-unit) * 2.25);
--chatgpt-account-menu-separator-margin-block: var(--wizon-ai-space-unit);
--chatgpt-account-menu-separator-margin-inline: var(--ds-space-4, 16px);
}
.chatgpt-reference-v1 .chatgpt-account-area {
position: relative;
margin-top: auto;
padding-top: var(--chatgpt-account-area-padding-top);
}
.chatgpt-reference-v1 .chatgpt-account-area::before {
content: "";
position: absolute;
top: 0;
right: 0;
left: 0;
height: 1px;
background: var(--cg-sidebar-border);
}
.chatgpt-reference-v1 .chatgpt-account-button {
display: flex;
align-items: center;
justify-content: flex-start;
gap: var(--chatgpt-account-button-gap);
width: var(--cg-sidebar-account-width);
max-width: 100%;
height: var(--cg-sidebar-account-height);
min-height: var(--cg-sidebar-account-height);
padding: var(--chatgpt-account-button-pad-y) var(--chatgpt-account-button-pad-right) var(--chatgpt-account-button-pad-y) var(--chatgpt-account-button-pad-left);
border: 0;
border-radius: var(--chatgpt-account-button-radius);
background: transparent;
color: var(--cg-text);
text-align: left;
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-account-button:hover,
.chatgpt-reference-v1 .chatgpt-account-button[aria-expanded="true"] {
background: var(--cg-hover);
}
.chatgpt-reference-v1 .chatgpt-account-avatar {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: var(--chatgpt-account-avatar-size);
height: var(--chatgpt-account-avatar-size);
border-radius: var(--wizon-ai-radius-pill);
background: var(--chatgpt-account-avatar-bg);
color: var(--chatgpt-account-avatar-fg);
font-size: var(--chatgpt-account-avatar-font-size);
font-weight: 600;
}
/* 프로필 사진이 있으면 이니셜 대신 이미지가 배지를 채운다. 크기·모양은 배지가
이미 정하므로 여기서 다시 정하지 않고 상속·꽉채움만 지시한다. */
.chatgpt-reference-v1 .chatgpt-account-avatar-image {
width: 100%;
height: 100%;
border-radius: inherit;
object-fit: cover;
}
.chatgpt-reference-v1 .chatgpt-account-copy {
display: grid;
min-width: 0;
gap: 0;
}
.chatgpt-reference-v1 .chatgpt-account-copy strong,
.chatgpt-reference-v1 .chatgpt-account-menu-head strong {
overflow: hidden;
color: var(--cg-text);
font-size: var(--chatgpt-account-text-size);
font-weight: 400;
line-height: var(--chatgpt-account-text-line-height);
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-account-copy small,
.chatgpt-reference-v1 .chatgpt-account-menu-head small {
color: var(--cg-muted);
font-size: var(--chatgpt-account-caption-size);
line-height: var(--chatgpt-account-caption-line-height);
}
.chatgpt-reference-v1 .chatgpt-account-menu {
position: absolute;
left: var(--account-menu-left, 2px);
top: var(--account-menu-top, auto);
bottom: var(--account-menu-bottom, calc(100% - 5px));
z-index: 80;
display: block;
width: var(--chatgpt-account-menu-width);
max-height: var(--account-menu-max-height, min(360px, calc(100vh - 16px)));
padding: var(--chatgpt-account-menu-gutter) 0;
border: 0;
border-radius: var(--chatgpt-account-menu-radius);
background: var(--cg-menu-bg);
box-shadow: var(--cg-menu-shadow);
overflow-y: auto;
overscroll-behavior: contain;
}
.chatgpt-reference-v1 .chatgpt-account-menu[hidden] {
display: none;
}
.chatgpt-reference-v1 .chatgpt-rail-account-menu {
left: var(--account-menu-left, calc(100% + 8px));
top: var(--account-menu-top, auto);
bottom: var(--account-menu-bottom, 8px);
z-index: 120;
transform-origin: left bottom;
}
.chatgpt-reference-v1 .chatgpt-account-menu-head {
display: flex;
align-items: center;
gap: var(--chatgpt-account-menu-head-gap);
width: calc(100% - (var(--chatgpt-account-menu-gutter) * 2));
min-height: var(--chatgpt-account-menu-head-height);
margin: 0 var(--chatgpt-account-menu-gutter) var(--chatgpt-account-menu-head-margin-bottom);
padding: var(--chatgpt-account-menu-row-pad-y) var(--chatgpt-account-menu-row-pad-left);
border: 0;
border-radius: var(--chatgpt-account-menu-row-radius);
background: transparent;
color: var(--cg-text);
font: inherit;
text-align: left;
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-account-menu button {
display: flex;
align-items: center;
gap: var(--chatgpt-account-menu-row-gap);
width: calc(100% - (var(--chatgpt-account-menu-gutter) * 2));
height: var(--chatgpt-account-menu-row-height);
min-height: var(--chatgpt-account-menu-row-height);
margin: 0 var(--chatgpt-account-menu-gutter);
padding: var(--chatgpt-account-menu-row-pad-y) var(--chatgpt-account-menu-row-pad-right) var(--chatgpt-account-menu-row-pad-y) var(--chatgpt-account-menu-row-pad-left);
border: 0;
border-radius: var(--chatgpt-account-menu-row-radius);
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--chatgpt-account-menu-row-font-size);
font-weight: 400;
line-height: var(--chatgpt-account-menu-row-line-height);
text-align: left;
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-account-menu .chatgpt-account-menu-head {
gap: var(--chatgpt-account-menu-head-gap);
height: var(--chatgpt-account-menu-head-height);
min-height: var(--chatgpt-account-menu-head-height);
margin: 0 var(--chatgpt-account-menu-gutter);
padding: var(--chatgpt-account-menu-row-pad-y) var(--chatgpt-account-menu-row-pad-left);
}
.chatgpt-reference-v1 .chatgpt-account-menu button:not(.chatgpt-account-menu-head) [data-icon] {
display: inline-grid;
flex: 0 0 var(--chatgpt-account-menu-row-icon-size);
place-items: center;
width: var(--chatgpt-account-menu-row-icon-size);
height: var(--chatgpt-account-menu-row-icon-size);
}
.chatgpt-reference-v1 .chatgpt-account-menu button:not(.chatgpt-account-menu-head) [data-icon] svg {
width: var(--chatgpt-account-menu-row-icon-size);
height: var(--chatgpt-account-menu-row-icon-size);
}
.chatgpt-reference-v1 .chatgpt-account-menu button:not(.chatgpt-account-menu-head) span:not([data-icon]) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-account-menu button:hover,
.chatgpt-reference-v1 .chatgpt-account-menu-head:hover {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-menu-separator {
height: 1px;
margin: var(--chatgpt-account-menu-separator-margin-block) var(--chatgpt-account-menu-separator-margin-inline);
background: var(--cg-sidebar-border);
}
.chatgpt-reference-v1 .chatgpt-settings-dialog {
width: min(680px, calc(100vw - 32px));
max-width: none;
height: min(600px, calc(100vh - 48px));
padding: 0;
border: 0;
border-radius: 16px;
background: #ffffff;
color: var(--cg-text);
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
}
.chatgpt-reference-v1 .chatgpt-settings-dialog::backdrop {
background: rgba(0, 0, 0, 0.28);
}
.chatgpt-reference-v1 .chatgpt-settings-shell {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
height: 100%;
}
.chatgpt-reference-v1 .chatgpt-settings-head {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
align-items: center;
min-height: 56px;
padding: 0;
border-bottom: 1px solid #ececec;
}
.chatgpt-reference-v1 .chatgpt-settings-head .chatgpt-icon-button {
width: 36px;
height: 36px;
margin-left: 15px;
padding: 0;
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-settings-head h2 {
margin: 0;
padding-left: 16px;
font-size: var(--ds-text-title-18);
line-height: 28px;
font-weight: 400;
}
.chatgpt-reference-v1 .chatgpt-settings-body {
display: grid;
grid-template-columns: 180px minmax(0, 1fr);
min-height: 0;
}
.chatgpt-reference-v1 .chatgpt-settings-tabs {
display: grid;
align-content: start;
gap: 0;
padding: 4px 0;
border-right: 1px solid #ececec;
overflow: auto;
}
.chatgpt-reference-v1 .chatgpt-settings-tabs button {
display: flex;
align-items: center;
gap: 6px;
width: 167px;
min-height: 36px;
margin: 0 6px;
padding: 6px 10px;
border: 0;
border-radius: var(--ds-radius-sm, 10px);
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
line-height: 20px;
font-weight: 400;
text-align: left;
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-settings-tabs button:hover,
.chatgpt-reference-v1 .chatgpt-settings-tabs button.is-active {
background: rgba(0, 0, 0, 0.04);
}
.chatgpt-reference-v1 .chatgpt-settings-tabs button:focus:not(:focus-visible) {
outline: none;
}
.chatgpt-reference-v1 .chatgpt-settings-panel {
display: grid;
align-content: start;
gap: 0;
padding: 0 16px;
overflow: auto;
}
.chatgpt-reference-v1 .chatgpt-settings-panel h3 {
margin: 0;
font-size: var(--ds-text-title-18);
line-height: 28px;
font-weight: 400;
}
.chatgpt-reference-v1 .settings-panel-section {
min-width: 0;
background: inherit;
}
.chatgpt-reference-v1 .settings-section-header {
display: flex;
min-height: 60px;
align-items: flex-start;
padding: 12px 0;
border-bottom: 1px solid rgba(0, 0, 0, 0.10);
}
.chatgpt-reference-v1 .settings-section-title {
min-width: 0;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-title-18);
font-weight: 400;
line-height: 28px;
letter-spacing: 0;
}
.chatgpt-reference-v1 .settings-description {
margin: 0;
color: #6f6f6f;
font-size: var(--ds-text-body-14);
line-height: 1.5;
}
.chatgpt-reference-v1 .settings-section-note {
margin: 15px -16px 0;
padding: 0 12px 0 24px;
color: rgb(93, 93, 93);
font-size: var(--ds-text-body-14);
line-height: 20px;
letter-spacing: 0.01em;
}
.chatgpt-reference-v1 .settings-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: 14px;
min-height: 60px;
border-bottom: 1px solid #f0f0f0;
color: var(--cg-text);
font-size: var(--ds-text-body-14);
line-height: 20px;
}
.chatgpt-reference-v1 .settings-row-stacked {
align-items: flex-start;
padding: 12px 0;
}
.chatgpt-reference-v1 .settings-row-copy {
display: grid;
min-width: 0;
max-width: 310px;
gap: 4px;
}
.chatgpt-reference-v1 .settings-row-label {
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
}
.chatgpt-reference-v1 .settings-row-description {
color: rgb(93, 93, 93);
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
}
.chatgpt-reference-v1 .settings-row-value {
min-width: 0;
max-width: 260px;
overflow: hidden;
color: rgb(93, 93, 93);
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 20px;
letter-spacing: 0;
text-align: right;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .settings-pill,
.chatgpt-reference-v1 .settings-danger-pill,
.chatgpt-reference-v1 .settings-combobox {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 4px;
min-width: 82px;
height: 36px;
padding: 0 12px;
border: 1px solid rgba(0, 0, 0, 0);
border-radius: 8px;
background: #ffffff;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
line-height: 14px;
}
.chatgpt-reference-v1 .settings-choice-control {
position: relative;
display: inline-grid;
justify-items: end;
}
.chatgpt-reference-v1 .settings-combobox:hover,
.chatgpt-reference-v1 .settings-combobox.is-open,
.chatgpt-reference-v1 .settings-pill:hover,
.chatgpt-reference-v1 .settings-danger-pill:hover {
background: rgba(0, 0, 0, 0.04);
}
.chatgpt-reference-v1 .settings-danger-pill {
color: #e02e2a;
}
.chatgpt-reference-v1 .settings-pill-disabled,
.chatgpt-reference-v1 .settings-pill-disabled:hover {
background: transparent;
color: var(--cg-muted, #6f6f6f);
cursor: default;
opacity: 0.72;
}
.chatgpt-reference-v1 .settings-combobox svg {
width: 16px;
height: 16px;
stroke-width: var(--wds-icon-stroke, 1.7);
}
.chatgpt-reference-v1 .settings-choice-popover {
position: absolute;
top: calc(100% + 5px);
right: 0;
z-index: 85;
display: grid;
width: 220px;
padding: 6px;
border: 0;
border-radius: 16px;
background: var(--cg-menu-bg, #ffffff);
color: var(--cg-text, #0d0d0d);
box-shadow: var(--cg-menu-shadow, 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62));
}
.chatgpt-reference-v1 .settings-choice-option {
display: grid;
grid-template-columns: minmax(0, 1fr) 18px;
align-items: center;
width: 208px;
min-height: 36px;
padding: 6px 10px;
border: 0;
border-radius: var(--ds-radius-sm, 10px);
background: transparent;
color: var(--cg-text, #0d0d0d);
font: inherit;
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 20px;
text-align: left;
cursor: pointer;
}
.chatgpt-reference-v1 .settings-choice-option:hover,
.chatgpt-reference-v1 .settings-choice-option:focus-visible,
.chatgpt-reference-v1 .settings-choice-option.is-selected {
background: rgba(0, 0, 0, 0.04);
outline: none;
}
.chatgpt-reference-v1 .settings-choice-option span:first-child {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .settings-choice-option svg {
width: 16px;
height: 16px;
justify-self: end;
stroke-width: var(--wds-icon-stroke, 1.7);
}
html[data-theme="dark"] .chatgpt-reference-v1 .settings-choice-option:hover,
html[data-theme="dark"] .chatgpt-reference-v1 .settings-choice-option:focus-visible,
html[data-theme="dark"] .chatgpt-reference-v1 .settings-choice-option.is-selected {
background: rgba(255, 255, 255, 0.10);
}
.chatgpt-reference-v1 .settings-switch {
position: relative;
width: 32px;
height: 20px;
/* Never let the flex row shrink the track — in the stacked row (wide description text)
on a narrow phone it was squeezed from 32px to ~25px, so toggles looked uneven. */
flex: 0 0 auto;
padding: 2px;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: #3a83f7;
cursor: pointer;
}
.chatgpt-reference-v1 .settings-switch[aria-checked="false"] {
background: rgba(0, 0, 0, 0.16);
}
html[data-theme="dark"] .chatgpt-reference-v1 .settings-switch[aria-checked="false"] {
background: rgba(255, 255, 255, 0.24);
}
.chatgpt-reference-v1 .settings-switch::after {
content: "";
position: absolute;
top: 3px;
right: 3px;
width: 14px;
height: 14px;
border-radius: var(--ds-radius-pill, 999px);
background: #ffffff;
}
.chatgpt-reference-v1 .settings-switch[aria-checked="false"]::after {
right: auto;
left: 3px;
}
@media (max-width: 520px) {
/* Full-screen sizing comes from the shared mobile-dialog rule
([data-mobile-fullscreen], see "20260708-mobile-dialog-fullscreen-system");
only the settings-specific inner layout lives here. */
.chatgpt-reference-v1 .chatgpt-settings-head {
grid-template-columns: 52px minmax(0, 1fr);
}
.chatgpt-reference-v1 .chatgpt-settings-head .chatgpt-icon-button {
margin-left: 9px;
}
.chatgpt-reference-v1 .chatgpt-settings-head h2 {
padding-left: 0;
}
.chatgpt-reference-v1 .chatgpt-settings-body {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: auto minmax(0, 1fr);
}
.chatgpt-reference-v1 .chatgpt-settings-tabs {
display: flex;
gap: 4px;
padding: 6px;
overflow-x: auto;
overflow-y: hidden;
border-right: 0;
border-bottom: 1px solid var(--cg-menu-border, #ececec);
scrollbar-width: none;
}
.chatgpt-reference-v1 .chatgpt-settings-tabs::-webkit-scrollbar {
display: none;
}
.chatgpt-reference-v1 .chatgpt-settings-tabs button {
flex: 0 0 auto;
width: auto;
max-width: 180px;
}
.chatgpt-reference-v1 .chatgpt-settings-panel {
min-width: 0;
padding: 0 16px;
}
.chatgpt-reference-v1 .settings-row-copy {
max-width: 100%;
}
}
.chatgpt-reference-v1 .settings-shortcut-list {
display: flex;
flex-direction: column;
gap: 32px;
margin: 0 -4px 0 -4px;
padding: 16px 0 24px;
}
.chatgpt-reference-v1 .settings-shortcut-group {
display: grid;
gap: 0;
}
.chatgpt-reference-v1 .settings-shortcut-group-title {
margin: 0 0 4px;
padding: 0 12px 0 20px;
color: rgb(93, 93, 93);
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 20px;
letter-spacing: 0.01em;
}
.chatgpt-reference-v1 .settings-shortcut-row {
display: flex;
min-height: 53px;
width: 100%;
align-items: center;
justify-content: space-between;
gap: 8px;
padding: 10px 12px 10px 16px;
border: 0;
border-radius: 0;
background: transparent;
color: var(--cg-text, #0d0d0d);
font: inherit;
cursor: pointer;
text-align: left;
}
.chatgpt-reference-v1 .settings-shortcut-row:hover {
background: rgba(0, 0, 0, 0.04);
border-radius: 8px;
}
.chatgpt-reference-v1 .settings-shortcut-label {
min-width: 0;
overflow: hidden;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-body-16);
font-weight: 400;
line-height: 24px;
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .settings-shortcut-keys {
display: flex;
flex: 0 0 150px;
width: 150px;
height: 36px;
align-items: center;
justify-content: flex-end;
gap: 4px;
color: rgb(93, 93, 93);
}
.chatgpt-reference-v1 .settings-shortcut-keys span {
display: inline-flex;
min-width: 24px;
height: 24px;
align-items: center;
justify-content: center;
padding: 0 6px;
border-radius: var(--ds-radius-pill, 999px);
color: rgb(93, 93, 93);
font-size: var(--ds-text-body-16);
font-weight: 400;
line-height: 24px;
}
.chatgpt-reference-v1 .brand-row {
min-height: 42px;
padding: 0 4px 12px;
gap: 0;
}
.chatgpt-reference-v1 .brand-row strong {
color: var(--cg-text);
font-size: var(--ds-text-body-16);
font-weight: 500;
}
.chatgpt-reference-v1 .sidebar .brand-row span,
.chatgpt-reference-v1 .nav-section .section-label {
display: none;
}
.chatgpt-reference-v1 .sidebar-section {
position: relative;
gap: 2px;
margin: 0;
}
.chatgpt-reference-v1 .sidebar-section.grow {
flex: 0 1 auto;
display: flex;
flex-direction: column;
gap: 0;
min-height: 0;
max-height: calc(100vh - 210px);
}
.chatgpt-reference-v1 .new-chat-button,
.chatgpt-reference-v1 .theme-toggle {
justify-content: flex-start;
min-height: 40px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--cg-text);
box-shadow: none;
font-size: var(--ds-text-body-14);
font-weight: 400;
}
.chatgpt-reference-v1 .new-chat-button:hover,
.chatgpt-reference-v1 .theme-toggle:hover {
background: #ececec;
}
.chatgpt-reference-v1 .nav-item {
grid-template-columns: minmax(0, 1fr);
min-height: 40px;
padding: 0 10px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--cg-text);
}
.chatgpt-reference-v1 .nav-item:hover,
.chatgpt-reference-v1 .nav-item.active {
background: #ececec;
color: var(--cg-text);
}
.chatgpt-reference-v1 .nav-item span:not(.nav-icon),
.chatgpt-reference-v1 .nav-item.active span:not(.nav-icon) {
color: var(--cg-text);
font-size: var(--ds-text-body-14);
font-weight: 400;
}
.chatgpt-reference-v1 .sidebar .nav-icon {
display: none;
}
.chatgpt-reference-v1 .sidebar .section-label {
color: #6f6f6f;
font-size: var(--ds-text-caption-12);
font-weight: 400;
}
.chatgpt-reference-v1 .chatgpt-recent-header {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
min-height: 32px;
/* 20260704-sidebar-recent-header-chatgpt: Chrome-measured ChatGPT recent header uses a 32px row with text starting at x=16. */
padding: 0 2px 0 10px;
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-recent-title {
display: inline-flex;
align-items: center;
justify-content: flex-start;
gap: 2px;
min-width: 0;
height: 32px;
padding: 0;
border: 0;
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
font-weight: 600;
line-height: 20px;
}
.chatgpt-reference-v1 .chatgpt-recent-title svg {
width: 14px;
height: 14px;
color: #8a8a8a;
}
.chatgpt-reference-v1 .chatgpt-recent-header-actions {
display: inline-flex;
align-items: center;
gap: 2px;
opacity: 0;
pointer-events: auto;
transition: opacity 100ms ease;
}
.chatgpt-reference-v1 .chatgpt-recent-header:focus-within .chatgpt-recent-header-actions,
.chatgpt-reference-v1 .chatgpt-recent-header:has([data-recent-header-action="more"][aria-expanded="true"]) .chatgpt-recent-header-actions {
opacity: 1;
pointer-events: auto;
}
/* Reveal-on-hover only on real hover devices. On iOS the section :hover fired on the FIRST
tap of a recent row (the row lives inside .sidebar-section), showing the header ✏️/⋯ and
swallowing that tap — so the conversation only opened on the second tap. Guarded, the
first tap now opens the conversation directly. (:focus-within / aria-expanded above stay
unguarded so keyboard + the open menu still reveal the actions.) */
@media (hover: hover) {
.chatgpt-reference-v1 .sidebar-section:hover .chatgpt-recent-header-actions {
opacity: 1;
pointer-events: auto;
}
}
.chatgpt-reference-v1 .chatgpt-recent-header-action {
display: inline-grid;
place-items: center;
width: calc(var(--wizon-ai-space-unit) * 7);
height: calc(var(--wizon-ai-space-unit) * 7);
border: 0;
border-radius: var(--wizon-ai-radius-control);
background: transparent;
color: var(--cg-muted-2);
}
.chatgpt-reference-v1 .chatgpt-recent-header-action:hover {
background: var(--cg-hover);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-recent-header-action:focus-visible {
outline: 1px solid var(--cg-focus-visible-ring);
outline-offset: -1px;
background: var(--cg-focus-bg);
}
.chatgpt-reference-v1 .chatgpt-recent-header-action svg {
width: 18px;
height: 18px;
}
.chatgpt-reference-v1 .recent-list {
/* 20260705-recent-row-token-contract: keep measured ChatGPT row geometry, but resolve every value through AI shell/WDS tokens. */
--chatgpt-recent-row-height: var(--cg-sidebar-item-height);
--chatgpt-recent-row-inner-height: calc(var(--chatgpt-recent-row-height) - (var(--wizon-ai-space-unit) / 2));
--chatgpt-recent-row-radius: var(--wizon-ai-radius-control);
--chatgpt-recent-row-pad-block: calc(var(--wizon-ai-space-unit) / 4);
--chatgpt-recent-row-pad-right: var(--wizon-ai-space-unit);
--chatgpt-recent-title-pad-left: calc(var(--wizon-ai-space-unit) * 2.5);
--chatgpt-recent-action-size: calc(var(--wizon-ai-space-unit) * 7);
--chatgpt-recent-action-offset: calc(var(--wizon-ai-space-unit) / 2);
--chatgpt-recent-action-fade: var(--ds-space-6, 24px);
--chatgpt-recent-title-pad-right: calc((var(--chatgpt-recent-action-size) * 2) + var(--chatgpt-recent-action-fade) + var(--wizon-ai-space-unit));
--chatgpt-recent-font-size: var(--wds-font-size-body-2);
--chatgpt-recent-line-height: calc(var(--wizon-ai-space-unit) * 5);
--chatgpt-recent-rename-pad-x: calc(var(--wizon-ai-space-unit) * 1.5);
--chatgpt-recent-rename-radius: calc(var(--chatgpt-recent-row-radius) - (var(--wizon-ai-space-unit) / 2));
--chatgpt-recent-select-indent: calc(var(--wizon-ai-space-unit) * 8.5);
display: block;
gap: calc(var(--wizon-ai-space-unit) / 2);
flex: 0 1 auto;
overflow-x: hidden;
overflow-y: auto;
}
body.chatgpt-reference-v1 .citation-impact-queue-entry {
display: grid;
grid-template-columns: 24px minmax(0, 1fr) auto 16px;
align-items: center;
gap: 8px;
width: calc(100% - 8px);
margin: 2px 4px 8px;
padding: 9px 10px;
border: 1px solid color-mix(in srgb, var(--cg-text) 12%, transparent);
border-radius: var(--wizon-ai-radius-control);
background: color-mix(in srgb, var(--ad-amber) 8%, var(--cg-sidebar-bg));
color: var(--cg-text);
text-align: left;
cursor: pointer;
}
body.chatgpt-reference-v1 .citation-impact-queue-entry[hidden] {
display: none;
}
body.chatgpt-reference-v1 .citation-impact-queue-entry:focus-visible {
outline: 2px solid var(--cg-text);
outline-offset: 2px;
}
@media (hover: hover) {
body.chatgpt-reference-v1 .citation-impact-queue-entry:hover {
background: color-mix(in srgb, var(--ad-amber) 13%, var(--cg-sidebar-bg));
}
}
.citation-impact-queue-entry__icon,
.citation-impact-queue-entry__icon svg,
.citation-impact-queue-entry > [data-icon="chevron-right"],
.citation-impact-queue-entry > [data-icon="chevron-right"] svg {
width: 18px;
height: 18px;
}
.citation-impact-queue-entry__copy {
min-width: 0;
display: grid;
gap: 1px;
}
.citation-impact-queue-entry__copy strong,
.citation-impact-queue-entry__copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.citation-impact-queue-entry__copy strong {
font-size: var(--ds-text-caption-13);
line-height: 18px;
}
.citation-impact-queue-entry__copy small {
color: var(--cg-muted);
font-size: var(--ds-text-micro-11);
line-height: 16px;
}
.citation-impact-queue-entry__badge {
display: inline-grid;
min-width: 20px;
height: 20px;
padding: 0 5px;
place-items: center;
border-radius: var(--ds-radius-pill);
background: var(--ad-amber);
color: var(--cg-send-fg);
font-size: var(--ds-text-micro-11);
font-weight: var(--wds-font-weight-semibold);
}
.citation-impact-queue-entry[data-status="error"] {
background: color-mix(in srgb, var(--cg-danger-fg) 8%, var(--cg-sidebar-bg));
}
.chatgpt-reference-v1 .recent-item {
position: relative;
display: block;
width: 100%;
overflow: hidden;
min-height: var(--chatgpt-recent-row-height);
padding: var(--chatgpt-recent-row-pad-block) var(--chatgpt-recent-row-pad-right) var(--chatgpt-recent-row-pad-block) 0;
border: 0;
border-radius: var(--chatgpt-recent-row-radius);
color: var(--cg-text);
font-size: var(--chatgpt-recent-font-size);
}
/* Guard the hover background behind @media (hover: hover): on iOS Safari a :hover rule on
a tappable row makes the FIRST tap a hover-only gesture (the click is swallowed, so the
row highlights but does not open — a second tap is needed). Touch devices must not have
:hover styling on the recent rows (20260709-mobile-recent-hover-firsttap, doc 143). */
@media (hover: hover) {
.chatgpt-reference-v1 .recent-item:hover {
background: var(--cg-hover);
}
}
.chatgpt-reference-v1 .recent-item:has([data-recent-action="more"][aria-expanded="true"]) {
background: var(--cg-sidebar-active-bg);
}
.chatgpt-reference-v1 .recent-primary {
display: grid;
width: 100%;
min-height: var(--chatgpt-recent-row-inner-height);
padding: 0 var(--chatgpt-recent-title-pad-right) 0 var(--chatgpt-recent-title-pad-left);
border-radius: var(--chatgpt-recent-row-radius);
color: var(--cg-text);
font-size: var(--chatgpt-recent-font-size);
font-weight: 400;
line-height: var(--chatgpt-recent-line-height);
/* Removes the 300ms tap delay and the extra hover-tap on touch, so a single tap opens
the chat (iOS double-tap mitigation; recommended alongside the @media hover guards). */
touch-action: manipulation;
}
.chatgpt-reference-v1 .recent-title {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .recent-primary small {
display: none;
}
.chatgpt-reference-v1 .recent-rename-form {
display: grid;
align-items: center;
width: 100%;
min-height: var(--chatgpt-recent-row-inner-height);
padding: 0 calc(var(--wizon-ai-space-unit) * 2);
}
.chatgpt-reference-v1 .recent-rename-input {
width: 100%;
height: var(--chatgpt-recent-action-size);
min-width: 0;
padding: 0 var(--chatgpt-recent-rename-pad-x);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-recent-rename-radius);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
font-size: var(--chatgpt-recent-font-size);
font-weight: 400;
line-height: var(--chatgpt-recent-line-height);
outline: none;
}
.chatgpt-reference-v1 .recent-rename-input:focus,
.chatgpt-reference-v1 .recent-rename-input:focus-visible {
border-color: var(--cg-muted-2);
box-shadow: none;
outline: none;
}
html[data-theme="dark"] .chatgpt-reference-v1 .recent-rename-input {
border-color: var(--cg-menu-border);
background: var(--cg-hover);
color: var(--cg-text);
}
html[data-theme="dark"] .chatgpt-reference-v1 .recent-rename-input:focus,
html[data-theme="dark"] .chatgpt-reference-v1 .recent-rename-input:focus-visible {
border-color: var(--cg-muted-2);
}
.chatgpt-reference-v1 .recent-actions {
display: inline-flex;
position: absolute;
top: 50%;
right: var(--chatgpt-recent-action-offset);
transform: translateY(-50%);
gap: 0;
padding-left: var(--chatgpt-recent-action-fade);
padding-right: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--cg-hover) 0%, transparent), var(--cg-hover) var(--chatgpt-recent-action-fade));
}
.chatgpt-reference-v1 .recent-item:has([data-recent-action="more"][aria-expanded="true"]) .recent-actions {
opacity: 1;
pointer-events: auto;
}
/* Reveal the row actions on focus (tap) or when the row's ⋯ menu is open. The :hover
reveal is gated behind @media (hover: hover) on purpose: on iOS Safari, tapping an
element whose :hover reveals content makes the FIRST tap a hover-only gesture (the
click is swallowed, so the row highlights but does not open — a second tap is needed).
Touch devices therefore must not depend on :hover for this reveal (doc 143 item C fix,
20260709-mobile-recent-hover-firsttap). */
.chatgpt-reference-v1 .recent-item:focus-within .recent-actions {
opacity: 1;
pointer-events: auto;
}
@media (hover: hover) {
.chatgpt-reference-v1 .recent-item:hover .recent-actions {
opacity: 1;
pointer-events: auto;
}
}
.chatgpt-reference-v1 .recent-action {
width: var(--chatgpt-recent-action-size);
height: var(--chatgpt-recent-action-size);
color: var(--cg-muted-2);
}
.chatgpt-reference-v1 .recent-item:focus-within .recent-action,
.chatgpt-reference-v1 .recent-item:has([data-recent-action="more"][aria-expanded="true"]) .recent-action {
pointer-events: auto;
}
@media (hover: hover) {
.chatgpt-reference-v1 .recent-item:hover .recent-action {
pointer-events: auto;
}
}
.chatgpt-reference-v1 .recent-action:hover {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .recent-pin-action.is-pinned {
color: var(--cg-text);
}
.chatgpt-reference-v1 .recent-action svg {
width: 17px;
height: 17px;
}
.chatgpt-reference-v1 .recent-item.is-selecting .recent-primary {
padding-left: var(--chatgpt-recent-select-indent);
}
.chatgpt-reference-v1 .recent-item.is-selected {
background: var(--cg-hover);
}
.chatgpt-reference-v1 .recent-select-control {
position: absolute;
top: 50%;
left: 6px;
z-index: 2;
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
transform: translateY(-50%);
cursor: pointer;
}
.chatgpt-reference-v1 .recent-select-control input {
position: absolute;
inset: 0;
opacity: 0;
z-index: 1;
pointer-events: none;
cursor: pointer;
}
.chatgpt-reference-v1 .recent-select-box {
display: inline-grid;
place-items: center;
width: 17px;
height: 17px;
border: 1.5px solid var(--cg-muted-2);
border-radius: 5px;
background: var(--cg-surface);
color: var(--cg-text);
pointer-events: none;
}
.chatgpt-reference-v1 .recent-select-control.is-focused .recent-select-box,
.chatgpt-reference-v1 .recent-select-control input:focus + .recent-select-box,
.chatgpt-reference-v1 .recent-select-control input:focus-visible + .recent-select-box {
outline: 1px solid var(--cg-focus-visible-ring);
outline-offset: 2px;
box-shadow: 0 0 0 2px var(--cg-focus-bg);
}
.chatgpt-reference-v1 .recent-select-control input:checked + .recent-select-box {
border-color: var(--cg-send-bg);
background: var(--cg-send-bg);
color: var(--cg-send-fg);
}
.chatgpt-reference-v1 .recent-select-box svg {
width: 13px;
height: 13px;
stroke-width: 2.4;
}
.chatgpt-reference-v1 .chatgpt-recent-menu {
--chatgpt-recent-menu-width: calc(var(--wizon-ai-space-unit) * 46.5);
--chatgpt-recent-menu-gutter: var(--cg-menu-gutter);
--chatgpt-recent-menu-radius: var(--wizon-ai-radius-popover);
--chatgpt-recent-menu-row-gap: var(--cg-menu-gutter);
--chatgpt-recent-menu-row-height: var(--wizon-ai-menu-row-height);
--chatgpt-recent-menu-row-radius: var(--wizon-ai-radius-menu-row);
--chatgpt-recent-menu-row-pad-y: var(--cg-menu-gutter);
--chatgpt-recent-menu-row-pad-left: calc(var(--wizon-ai-space-unit) * 2.5);
--chatgpt-recent-menu-row-pad-right: var(--ds-space-7, 32px);
--chatgpt-recent-menu-row-font-size: var(--wds-font-size-body-2);
--chatgpt-recent-menu-row-line-height: calc(var(--wizon-ai-space-unit) * 5);
--chatgpt-recent-menu-icon-size: calc(var(--wizon-ai-space-unit) * 4.5);
--chatgpt-recent-menu-fallback-left: calc(100% - (var(--chatgpt-recent-menu-width) + var(--wizon-ai-space-unit)));
position: absolute;
top: var(--recent-menu-top, var(--cg-sidebar-item-height));
left: var(--recent-menu-left, var(--chatgpt-recent-menu-fallback-left));
right: auto;
z-index: var(--wizon-ai-popover-z, 20);
display: grid;
width: var(--chatgpt-recent-menu-width);
max-height: var(--recent-menu-max-height, min(calc(var(--wizon-ai-space-unit) * 90), calc(100vh - var(--ds-space-6, 24px))));
overflow-y: auto;
padding: var(--chatgpt-recent-menu-gutter) 0;
border: 0;
border-radius: var(--chatgpt-recent-menu-radius);
background: var(--cg-menu-bg);
box-shadow: var(--cg-menu-shadow);
}
.chatgpt-reference-v1 .chatgpt-recent-menu[hidden] {
display: none;
}
.chatgpt-reference-v1 .chatgpt-recent-menu button {
display: flex;
align-items: center;
gap: var(--chatgpt-recent-menu-row-gap);
width: calc(var(--chatgpt-recent-menu-width) - (var(--chatgpt-recent-menu-gutter) * 2));
min-height: var(--chatgpt-recent-menu-row-height);
margin: 0 var(--chatgpt-recent-menu-gutter);
padding: var(--chatgpt-recent-menu-row-pad-y) var(--chatgpt-recent-menu-row-pad-right) var(--chatgpt-recent-menu-row-pad-y) var(--chatgpt-recent-menu-row-pad-left);
border: 0;
border-radius: var(--chatgpt-recent-menu-row-radius);
background: transparent;
color: var(--cg-text);
font-size: var(--chatgpt-recent-menu-row-font-size);
font-weight: 400;
line-height: var(--chatgpt-recent-menu-row-line-height);
text-align: left;
}
.chatgpt-reference-v1 .chatgpt-recent-menu button[hidden] {
display: none;
}
.chatgpt-reference-v1 .chatgpt-recent-menu button:hover:not(:disabled) {
background: var(--cg-hover);
}
.chatgpt-reference-v1 .chatgpt-recent-menu button:disabled {
color: var(--cg-muted-2);
cursor: default;
}
.chatgpt-reference-v1 .chatgpt-recent-menu [data-recent-menu-action^="delete"] {
color: var(--cg-danger-fg);
}
.chatgpt-reference-v1 .chatgpt-recent-menu svg {
width: var(--chatgpt-recent-menu-icon-size);
height: var(--chatgpt-recent-menu-icon-size);
}
.chatgpt-reference-v1 .main-pane,
.chatgpt-reference-v1 .workbench,
.chatgpt-reference-v1 .chat-pane {
background: #ffffff;
}
.chatgpt-reference-v1 .workspace-hero,
.chatgpt-reference-v1 .context-pane {
display: none;
}
.chatgpt-reference-v1 .workbench {
grid-template-columns: minmax(0, 1fr);
}
.chatgpt-reference-v1 .chat-pane {
grid-template-rows: minmax(0, 1fr) auto;
min-height: 100vh;
}
.chatgpt-reference-v1 .message-list {
align-items: stretch;
width: min(768px, calc(100% - 48px));
width: min(calc(var(--cg-chat-max-width) - (var(--cg-thread-gutter) * 2)), calc(100% - (var(--cg-thread-gutter) * 3)));
margin: 0 auto;
padding: 32px 0 24px;
}
.chatgpt-reference-v1 .message {
width: 100%;
}
.chatgpt-reference-v1 .message.assistant .message-body,
.chatgpt-reference-v1 .message.system .message-body {
padding: 10px 0;
color: var(--cg-text);
}
.chatgpt-reference-v1 .message.user .message-body {
max-width: min(620px, 78%);
padding: 10px 16px;
border: 0;
border-radius: var(--ds-radius-xl, 22px);
background: #f4f4f4;
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-empty-home {
display: grid;
gap: 0;
width: 100%;
text-align: center;
}
.chatgpt-reference-v1 .chatgpt-home-title {
display: inline-flex;
align-items: baseline;
justify-content: normal;
justify-self: center;
width: auto;
min-height: 42px;
margin: 0;
color: var(--cg-text);
font-size: 24px;
/* ⓐ 홈 제목이 본문과 같은 굵기(400)라 위계가 없었다. 제목·칩3·컴포저가 함께 있어
요소는 더 많은데 위계는 더 약한 상태였다(2026-08-02 실측). 크기는 24px 유지 —
굵기만으로 초점을 세운다. */
font-weight: var(--wds-font-weight-semibold);
line-height: 28px;
}
.chatgpt-reference-v1 .chatgpt-prompt-shelf {
justify-content: center;
gap: 8px;
margin-top: 0;
}
.chatgpt-reference-v1 .prompt-chip {
min-height: 40px;
padding: 0 15px;
border: 0 solid rgba(0, 0, 0, 0.05);
border-radius: var(--ds-radius-pill, 999px);
background: #ffffff;
color: #3f3f3f;
font-size: var(--ds-text-body-14);
font-weight: 400;
}
.chatgpt-reference-v1 .prompt-chip:hover {
border-color: #d9d9d9;
background: #f7f7f7;
}
.chatgpt-reference-v1 .chatgpt-composer-shell,
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell {
display: grid;
width: min(768px, calc(100% - 48px));
width: min(calc(var(--cg-chat-max-width) - (var(--cg-thread-gutter) * 2)), calc(100% - (var(--cg-thread-gutter) * 3)));
min-height: 52px;
margin: 0 auto 28px;
padding: 5px 8px;
gap: 0;
grid-template-rows: auto auto;
border: 0 solid rgba(0, 0, 0, 0.05);
border-radius: var(--ds-radius-2xl, 28px);
border-radius: calc(var(--cg-composer-radius) + (var(--cg-composer-compact-gutter) / 2));
background: #ffffff;
box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 80px 8px rgba(0, 0, 0, 0.024);
}
.chatgpt-reference-v1 .composer-attachment-lane {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
padding: 0 4px 6px 44px;
}
.chatgpt-reference-v1 .composer-attachment-lane[hidden] {
display: none;
}
.chatgpt-reference-v1 .composer-attachment-status {
min-width: 0;
padding: 2px 8px 5px 44px;
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12);
line-height: 16px;
}
.chatgpt-reference-v1 .composer-attachment-status[hidden] {
display: none;
}
.chatgpt-reference-v1 .composer-attachment-status[data-tone="success"] {
color: var(--ad-green, var(--wds-green-700, #15803d));
}
.chatgpt-reference-v1 .composer-attachment-status[data-tone="error"] {
color: var(--cg-danger-fg, var(--wds-red-700, #b42318));
}
.chatgpt-reference-v1 .composer-attachment-status[data-tone="warning"] {
color: var(--cg-warning-fg);
}
.chatgpt-reference-v1 .composer-chip-removable {
display: grid;
grid-template-columns: 34px minmax(0, 1fr) 26px;
max-width: min(420px, 100%);
align-items: center;
gap: 8px;
min-height: 48px;
padding: 5px 5px 5px 7px;
border: 1px solid #e7e7e7;
border-radius: 13px;
background: #f7f7f7;
color: #2f2f2f;
font: inherit;
font-size: var(--ds-text-caption-13);
line-height: 16px;
cursor: default;
}
.chatgpt-reference-v1 .composer-attachment-file-icon {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
border-radius: 9px;
overflow: hidden;
background: var(--cg-surface);
color: var(--ad-blue, var(--wds-brand-blue, #155eef));
box-shadow: inset 0 0 0 1px var(--cg-menu-border);
}
.chatgpt-reference-v1 .composer-attachment-file-icon svg {
width: 19px;
height: 19px;
}
.chatgpt-reference-v1 .composer-attachment-art {
display: block;
width: 100%;
height: 100%;
object-fit: contain;
user-select: none;
}
.chatgpt-reference-v1 .composer-attachment-copy {
display: grid;
min-width: 0;
gap: 1px;
}
.chatgpt-reference-v1 .composer-attachment-type {
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12);
line-height: 14px;
}
.chatgpt-reference-v1 .composer-chip-label {
overflow: hidden;
min-width: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .composer-chip-remove {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 26px;
height: 26px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: transparent;
color: #6f6f6f;
cursor: pointer;
}
.chatgpt-reference-v1 .composer-chip-remove svg {
width: 14px;
height: 14px;
}
.chatgpt-reference-v1 .composer-chip-removable:hover {
border-color: #d9d9d9;
background: #efefef;
color: var(--cg-text);
}
.chatgpt-reference-v1 .composer-chip-remove:hover {
background: rgba(0, 0, 0, 0.06);
color: var(--cg-text);
}
.chatgpt-reference-v1 .composer-chip-remove:focus-visible {
outline: 1px solid var(--cg-focus-visible-ring, var(--cg-focus-ring, #8b5cf6));
outline-offset: 2px;
}
html[data-theme="dark"] .chatgpt-reference-v1 .composer-chip-removable {
border-color: rgba(255, 255, 255, 0.14);
background: rgba(255, 255, 255, 0.08);
color: var(--cg-text, #ececec);
}
html[data-theme="dark"] .chatgpt-reference-v1 .composer-chip-remove {
color: var(--cg-muted, #b4b4b4);
}
html[data-theme="dark"] .chatgpt-reference-v1 .composer-chip-removable:hover {
border-color: rgba(255, 255, 255, 0.2);
background: rgba(255, 255, 255, 0.12);
color: var(--cg-text, #f4f4f4);
}
html[data-theme="dark"] .chatgpt-reference-v1 .composer-chip-remove:hover {
background: rgba(255, 255, 255, 0.12);
color: var(--cg-text, #f4f4f4);
}
.composer-drop-overlay {
position: fixed;
inset: 0;
z-index: var(--wizon-layer-scrim, 190);
display: grid;
place-items: center;
padding: 32px;
pointer-events: none;
background: color-mix(in srgb, var(--wizon-ai-surface, #fff) 82%, transparent);
backdrop-filter: blur(4px);
}
.composer-drop-overlay[hidden] {
display: none;
}
.composer-drop-overlay-panel {
display: grid;
place-items: center;
width: min(560px, calc(100vw - 48px));
min-height: 240px;
padding: 32px;
border: 2px dashed var(--ad-blue, var(--wds-brand-blue, #155eef));
border-radius: var(--ds-radius-lg, 24px);
background: var(--wizon-ai-surface, #fff);
color: var(--cg-text, #2f2f2f);
box-shadow: var(--ds-shadow-lg, 0 24px 64px rgba(15, 23, 42, 0.16));
text-align: center;
}
.composer-drop-overlay-panel strong {
margin-top: 16px;
font-size: var(--ds-text-title-20, 20px);
line-height: 28px;
}
.composer-drop-overlay-panel > span:last-child {
margin-top: 6px;
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-body-14);
}
.composer-drop-overlay-icon {
display: inline-grid;
place-items: center;
width: 52px;
height: 52px;
border-radius: 16px;
background: var(--ad-blue-tint, color-mix(in srgb, var(--wds-blue-500, #3c8ffd) 11%, #fff));
color: var(--ad-blue, var(--wds-brand-blue, #155eef));
}
.composer-drop-overlay-icon svg {
width: 26px;
height: 26px;
}
@media (max-width: 520px) {
.composer-drop-overlay {
padding: 20px;
}
.composer-drop-overlay-panel {
width: 100%;
min-height: 200px;
padding: 24px;
}
.chatgpt-reference-v1 .composer-chip-removable {
max-width: 100%;
}
}
.chatgpt-reference-v1 .composer-prompt-body {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
grid-template-rows: minmax(42px, auto);
grid-template-areas: "lead input actions";
align-items: center;
gap: 0 8px;
}
.chatgpt-reference-v1 .composer-leading-action {
grid-area: lead;
}
.chatgpt-reference-v1 .composer-textarea-scroll {
grid-area: input;
display: block;
min-width: 0;
max-height: 256px;
overflow-x: hidden;
overflow-y: hidden;
scrollbar-width: thin;
}
.chatgpt-reference-v1 .chatgpt-composer-shell:not(.is-multiline) .composer-prompt-body {
min-height: 42px;
margin-block: 0;
}
.chatgpt-reference-v1 .chatgpt-composer-shell:not(.is-multiline) .composer-textarea-scroll,
.chatgpt-reference-v1 .chatgpt-composer-shell:not(.is-multiline) textarea {
min-height: 26px;
height: 26px;
}
.chatgpt-reference-v1 .chatgpt-composer-shell:not(.is-multiline) .composer-textarea-scroll {
align-self: center;
display: flex;
align-items: center;
}
.chatgpt-reference-v1 .chatgpt-composer-shell:not(.is-multiline) textarea {
align-self: center;
}
.chatgpt-reference-v1 .composer-surface textarea {
display: block;
flex: 0 0 auto;
width: 100%;
min-height: 42px;
max-height: 256px;
box-sizing: border-box;
padding: 0;
color: var(--cg-text);
font-size: var(--ds-text-body-16);
line-height: 26px;
overflow: hidden;
resize: none;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline textarea {
padding: 16px 0 16px;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline,
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell.is-multiline {
min-height: min(300px, calc(var(--composer-visible-input-height, 42px) + 44px));
max-height: 300px;
padding: 9px 8px;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline .composer-prompt-body {
grid-template-rows: minmax(0, auto) 36px;
grid-template-areas:
"input input input"
"lead spacer actions";
align-items: end;
margin: -10px 0 0;
padding: 0 10px;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline .composer-textarea-scroll {
max-height: 256px;
overflow-y: hidden;
}
/* 20260704-composer-empty-placeholder-guard: keep an empty placeholder in the one-line ChatGPT layout even if a stale multiline state is present. */
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty,
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell.is-multiline.is-empty,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown),
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) {
min-height: 52px;
max-height: 52px;
padding: 5px 8px;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty .composer-prompt-body,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto;
grid-template-rows: minmax(42px, auto);
grid-template-areas: "lead input actions";
align-items: center;
min-height: 42px;
padding: 0;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty .composer-textarea-scroll,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty textarea,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) .composer-textarea-scroll,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) textarea {
min-height: 26px !important;
height: 26px !important;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty .composer-textarea-scroll,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) .composer-textarea-scroll {
align-self: center;
display: flex;
align-items: center;
overflow-y: hidden;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty textarea,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) textarea {
align-self: center;
padding: 0;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty .composer-leading-action,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty .composer-action-dock,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) .composer-leading-action,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) .composer-action-dock {
align-self: center;
}
/* 20260704-composer-empty-inline-height-guard: an empty ChatGPT composer must snap back to the one-line optical center even if a stale inline textarea height remains. */
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) {
min-height: 52px;
max-height: 52px;
padding: 5px 8px;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body,
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto;
grid-template-rows: minmax(42px, auto);
grid-template-areas: "lead input actions";
align-items: center;
min-height: 42px;
padding: 0;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-textarea-scroll,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea,
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-textarea-scroll,
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea {
min-height: 26px !important;
height: 26px !important;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-textarea-scroll,
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-textarea-scroll {
align-self: center;
display: flex;
align-items: center;
overflow-y: hidden;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea,
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-leading-action,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-action-dock,
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-leading-action,
.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-action-dock {
align-self: center;
}
body.chatgpt-reference-v1 .composer-textarea-scroll:focus-within {
outline: none;
box-shadow: none;
}
body.chatgpt-reference-v1 .composer-textarea-scroll.is-scrollable textarea {
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
}
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline .composer-leading-action,
.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline .composer-action-dock {
align-self: end;
}
.chatgpt-reference-v1 .composer-surface textarea::placeholder {
color: #8a8a8a;
}
.chatgpt-reference-v1 .composer-icon-button {
display: inline-grid;
place-items: center;
width: 36px;
height: 36px;
min-width: 36px;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: transparent;
color: var(--cg-text);
font-size: 24px;
font-weight: 300;
}
.chatgpt-reference-v1 .composer-icon-button svg,
.chatgpt-reference-v1 .wds-inline-icon {
/* 20260710-icon-size-tokens (아트디렉션 P0-4): 기본 아이콘 크기를 WDS 토큰으로 (md=1.25rem=20px 동일값). */
width: var(--wds-icon-size-md, 20px);
height: var(--wds-icon-size-md, 20px);
fill: none;
stroke: currentColor;
stroke-width: var(--wds-icon-stroke, 1.7);
stroke-linecap: round;
stroke-linejoin: round;
}
/* ===== 아트디렉션 v2 (doc 161, 사용자 승인 목업) =====
기능색 4축: Blue 정보·모델·문서 / Green 완료 / Amber 주의·전환 / Violet AI·요약.
값은 전부 WDS 팔레트 토큰에서 파생(raw hex는 토큰 폴백만) — 장식 금지, 의미 있을 때만.
원시 데이터 격리: 파일명·ms·모델ID는 1차 표면 노출 금지(확장자 칩·초 단위·표시 라벨만). */
:root {
--ad-blue: var(--wds-brand-blue, #155eef);
--ad-green: var(--wds-green-700, #15803d);
--ad-amber: var(--wds-amber-700, #b45309);
--ad-violet: var(--wds-violet-600, #6938ef);
/* 틴트는 현재 서피스와 섞어 만들므로 라이트/다크 모두에서 자동으로 맞는 바닥색이 된다 */
--ad-blue-tint: color-mix(in srgb, var(--wds-blue-500, #3c8ffd) 11%, var(--wizon-ai-surface, #fff));
--ad-green-tint: color-mix(in srgb, var(--wds-green-600, #16a34a) 10%, var(--wizon-ai-surface, #fff));
--ad-amber-tint: color-mix(in srgb, var(--wds-amber-500, #f59e0b) 13%, var(--wizon-ai-surface, #fff));
--ad-violet-tint: color-mix(in srgb, var(--wds-violet-500, #7c5cfc) 11%, var(--wizon-ai-surface, #fff));
}
/* 다크에서는 본색을 밝은 변형으로 (700 계열은 다크 바닥에서 대비 부족) */
html[data-theme="dark"] {
--ad-blue: var(--wds-blue-400, #66aaff);
--ad-green: var(--wds-green-400, #4ade80);
--ad-amber: var(--wds-amber-400, #fbbf24);
--ad-violet: var(--wds-violet-500, #7c5cfc);
}
/* 의미 아이콘 틴트 칩 — 내비/액션 아이콘은 무채색 유지, 색은 "의미" 전용 */
.md-chip {
display: inline-grid;
flex: none;
place-items: center;
width: 24px;
height: 24px;
border-radius: 7px;
}
.md-chip--sm {
width: 20px;
height: 20px;
border-radius: var(--ds-radius-xs, 6px);
}
.md-chip[data-tone] .wds-inline-icon {
width: 14px;
height: 14px;
}
.md-chip--sm[data-tone] .wds-inline-icon {
width: 12px;
height: 12px;
}
.md-chip[data-tone="blue"] { background: var(--ad-blue-tint); color: var(--ad-blue); }
.md-chip[data-tone="green"] { background: var(--ad-green-tint); color: var(--ad-green); }
.md-chip[data-tone="amber"] { background: var(--ad-amber-tint); color: var(--ad-amber); }
.md-chip[data-tone="violet"] { background: var(--ad-violet-tint); color: var(--ad-violet); }
/* 콜아웃 톤 스킨 (기본 형태는 .md-callout 기존 규칙, 여기서 의미색만 입힘) */
.md-callout[data-callout="summary"] {
border-color: color-mix(in srgb, var(--ad-violet) 16%, transparent);
background: var(--ad-violet-tint);
}
.md-callout[data-callout="summary"] .md-callout-head { color: var(--ad-violet); }
.md-callout[data-callout="warning"] {
border-color: color-mix(in srgb, var(--ad-amber) 22%, transparent);
background: var(--ad-amber-tint);
}
.md-callout[data-callout="warning"] .md-callout-head { color: var(--ad-amber); }
.md-callout[data-callout="note"] {
border-color: color-mix(in srgb, var(--ad-blue) 14%, transparent);
background: var(--ad-blue-tint);
}
.md-callout[data-callout="note"] .md-callout-head { color: var(--ad-blue); }
/* 본문 문서 출처 태그의 아이콘: 블루 틴트 사각 (파비콘과 같은 14px 슬롯) */
.citation-tag .citation-tag-doc {
display: inline-grid;
place-items: center;
width: 14px;
height: 14px;
border-radius: 4px;
background: var(--ad-blue-tint);
color: var(--ad-blue);
}
.citation-tag .citation-tag-doc .wds-inline-icon {
width: 10px;
height: 10px;
}
/* 문서 확장자 칩 (처리 과정 탭 · 원시 파일명 격리) */
.source-ext-chip {
display: inline-flex;
align-items: center;
gap: 4px;
padding: 2px 9px;
border: 1px solid color-mix(in srgb, var(--ad-blue) 16%, transparent);
border-radius: var(--ds-radius-pill, 999px);
background: var(--ad-blue-tint);
color: var(--ad-blue);
font: inherit;
font-size: var(--ds-text-micro-11);
font-weight: 600;
letter-spacing: 0.03em;
line-height: 1.5;
cursor: pointer;
transition: border-color var(--wds-duration-fast) ease;
}
.source-ext-chip .wds-inline-icon {
width: 12px;
height: 12px;
flex: none;
}
.source-ext-chip:hover {
border-color: color-mix(in srgb, var(--ad-blue) 38%, transparent);
}
.source-ext-chip:focus-visible {
outline: 2px solid var(--cg-text, #0d0d0d);
outline-offset: 1px;
}
.source-ext-more {
align-self: center;
color: var(--cg-muted, var(--muted));
font-size: var(--ds-text-micro-11);
font-weight: 600;
}
/* 출처 카드 v2 (아트디렉션 §4): 파비콘+사이트명 헤더 / 제목 2줄 / 스니펫 2줄.
번호 배지 → 우측 뮤트 인덱스, 선택 = 블루 링 + "인용됨". 드로어·신뢰 패널 공용. */
.source-card-v2 {
display: flex;
flex-direction: column;
gap: 6px;
padding: 12px 13px;
box-shadow: 0 1px 2px rgba(16, 16, 20, 0.04);
transition: box-shadow var(--wds-duration-fast) ease, background var(--wds-duration-fast) ease;
}
.source-card-v2:hover {
box-shadow: 0 1px 2px rgba(16, 16, 20, 0.05), 0 4px 14px rgba(16, 16, 20, 0.05);
}
.source-card-head-v2 {
display: flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.source-ext-chip--static {
cursor: default;
}
/* 표준 출처 태그 원자 (doc 161 §8): 파비콘 + 이름. 카드 v2 헤더와 뉴스 피드 kicker가 이 한
컴포넌트를 공유 — 답변의 모든 웹 출처 표식이 동일하게 읽힌다. .news-fav가 파비콘 베이스. */
.source-tag {
display: inline-flex;
align-items: center;
gap: 7px;
min-width: 0;
}
.source-tag-fav {
flex: none;
width: 16px;
height: 16px;
border-radius: 4px; /* matches the .news-fav favicon box these tags share */
}
.source-tag-name {
overflow: hidden;
min-width: 0;
color: var(--cg-text-soft, var(--muted));
font-size: var(--ds-text-caption-12);
font-weight: 500;
text-overflow: ellipsis;
white-space: nowrap;
}
.source-card-cited {
display: none;
flex: none;
margin-left: auto;
align-items: center;
gap: 4px;
color: var(--ad-blue);
font-size: var(--ds-text-micro-11);
font-weight: 600;
}
.source-card-cited .wds-inline-icon {
width: 11px;
height: 11px;
}
.source-card-v2.is-selected .source-card-cited {
display: inline-flex;
}
.source-card-v2.is-selected {
border-color: transparent;
box-shadow: 0 0 0 2px var(--ad-blue), 0 4px 14px rgba(16, 16, 20, 0.06);
}
.source-card-v2.is-highlighted {
box-shadow: 0 0 0 2px var(--ad-blue), 0 0 0 6px color-mix(in srgb, var(--ad-blue) 18%, transparent);
transition: box-shadow 220ms ease;
}
.source-card-title-v2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-body-14);
font-weight: 600;
line-height: 1.45;
letter-spacing: -0.01em;
text-wrap: pretty;
}
.source-card-snippet-v2 {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--cg-muted, var(--muted));
font-size: var(--ds-text-caption-12);
line-height: 1.55;
}
.chatgpt-reference-v1 .composer-icon-button:hover {
background: #f4f4f4;
}
.chatgpt-reference-v1 .composer-action-dock {
display: inline-flex;
align-items: center;
justify-content: flex-end;
grid-area: actions;
grid-column: auto;
justify-self: end;
width: auto;
min-height: 38px;
gap: 6px;
flex-wrap: nowrap;
}
.chatgpt-reference-v1 .composer-model-pill {
display: inline-grid;
grid-template-columns: auto 16px;
align-items: center;
column-gap: 3px;
min-height: 32px;
padding: 0 10px;
border: 0;
border-radius: 12px;
background: transparent;
color: #6f6f6f;
font-size: var(--ds-text-caption-13);
font-weight: 400;
line-height: 20px;
cursor: pointer;
}
.chatgpt-reference-v1 .composer-model-pill > span {
display: inline-flex;
align-items: center;
min-height: 20px;
}
.chatgpt-reference-v1 .composer-model-pill:hover,
.chatgpt-reference-v1 .composer-model-pill[aria-expanded="true"] {
background: #f4f4f4;
color: var(--cg-text);
}
.chatgpt-reference-v1 .composer-caret {
justify-content: center;
}
.chatgpt-reference-v1 .composer-caret svg {
width: 16px;
height: 16px;
}
.chatgpt-reference-v1 .composer-send-button,
.chatgpt-reference-v1 #sendButton {
width: 38px;
height: 38px;
min-width: 38px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: #0d0d0d;
color: #ffffff;
font-size: 22px;
font-weight: 500;
}
.chatgpt-reference-v1 .composer-send-button:hover,
.chatgpt-reference-v1 #sendButton:hover {
background: #000000;
}
.chatgpt-reference-v1 #sendButton:disabled {
background: color-mix(in srgb, var(--ds-color-ink) 12%, var(--ds-color-surface));
color: var(--ds-color-muted);
}
.chatgpt-reference-v1 .composer-send-button.composer-primary-disabled,
.chatgpt-reference-v1 #sendButton.composer-primary-disabled {
background: color-mix(in srgb, var(--ds-color-ink) 12%, var(--ds-color-surface));
color: var(--ds-color-muted);
cursor: not-allowed;
}
.chatgpt-reference-v1 .composer-send-button.composer-primary-stop,
.chatgpt-reference-v1 #sendButton.composer-primary-stop {
background: #0d0d0d;
color: #ffffff;
cursor: pointer;
}
.chatgpt-reference-v1 .composer-send-button.composer-primary-stop svg,
.chatgpt-reference-v1 #sendButton.composer-primary-stop svg {
width: 18px;
height: 18px;
}
.chatgpt-reference-v1 .composer-mic-button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
.chatgpt-reference-v1 .composer-mic-button:disabled:hover {
background: transparent;
}
html[data-chat-state="empty"] .chatgpt-reference-v1 .chat-pane {
grid-template-rows: minmax(0, 0.755fr) auto auto auto minmax(0, 1fr);
min-height: 100vh;
padding: 0;
}
html[data-chat-state="empty"] .chatgpt-reference-v1 .message-list {
grid-row: 2;
justify-content: end;
min-height: auto;
overflow: visible;
padding: 0;
margin: 0 auto 14px;
}
html[data-chat-state="empty"] .chatgpt-reference-v1 .chatgpt-composer-shell {
grid-row: 3;
margin: 0 auto;
}
html[data-chat-state="empty"] .chatgpt-reference-v1 .chatgpt-prompt-shelf {
grid-row: 4;
display: flex;
justify-content: center;
gap: 8px;
/* 20260704-empty-action-shelf-chatgpt: ChatGPT keeps the prompt chip shelf on the same 768px layout rail as the composer, then centers the chips inside it. */
width: min(768px, calc(100% - 48px));
margin: 24px auto 0;
}
/* 20260823-loading-chat-state: `loading` means "a thread is addressed and its messages have
not arrived yet". It shares every rule below with `active` on purpose — the frame around a
thread must not move when the messages land, and it must never be the centred new-chat home
the shell used to assert before anything knew which screen this was. Rule: any selector that
keys on [data-chat-state="active"] carries a "loading" sibling, pinned by
tests/test_conversation_reload_flash.py. */
html[data-chat-state="active"] .chatgpt-reference-v1 .chatgpt-prompt-shelf,
html[data-chat-state="loading"] .chatgpt-reference-v1 .chatgpt-prompt-shelf,
.chatgpt-reference-v1 .chatgpt-prompt-shelf[hidden] {
display: none;
}
html[data-chat-state="empty"] .chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell {
box-shadow: 0 12px 34px rgba(0, 0, 0, 0.08), 0 2px 8px rgba(0, 0, 0, 0.04);
}
.chatgpt-reference-v1.is-auth-gate .app-shell {
background: #ffffff;
}
@media (max-width: 900px) {
.chatgpt-reference-v1 .app-shell {
grid-template-columns: 52px minmax(0, 1fr);
}
.chatgpt-reference-v1 .sidebar {
position: fixed;
inset: 0 auto 0 0;
z-index: 70;
display: flex;
width: min(260px, calc(100vw - 52px));
box-shadow: var(--cg-menu-shadow);
}
.chatgpt-reference-v1:not(.sidebar-collapsed) .app-shell {
grid-template-columns: 1fr;
}
.chatgpt-reference-v1.sidebar-collapsed .chatgpt-sidebar-rail {
display: flex;
}
.chatgpt-reference-v1 .message-list,
.chatgpt-reference-v1 .chatgpt-composer-shell,
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell {
width: min(100% - 24px, 768px);
}
.chatgpt-reference-v1 .chatgpt-home-title {
font-size: 24px;
}
.chatgpt-reference-v1 .chatgpt-prompt-shelf {
display: none;
}
.chatgpt-reference-v1 .composer-model-pill {
display: inline-flex;
max-width: 68px;
}
}
/* 20260708-composer-mobile-two-row-v2: the actual two-row reflow lives at the end of this file (search "20260708-composer-mobile-two-row-v2") so it can beat the higher-specificity single-row empty-state rules (styles.css:7071,7120,11772,11823) with matching-specificity + !important + later source order. */
/* WDS AI guideline detail pass: ComposerBar menus, modes, and MessageActions. */
.chatgpt-reference-v1 .chatgpt-composer-shell {
position: relative;
}
.chatgpt-reference-v1 .composer-mode-slot {
display: inline-flex;
min-width: 0;
margin: 0 0 6px;
}
.chatgpt-reference-v1 .composer-mode-slot[hidden] {
display: none;
}
.chatgpt-reference-v1 .composer-action-dock {
grid-area: actions;
}
.chatgpt-reference-v1 .composer-mode-chip {
display: inline-flex;
align-items: center;
gap: 6px;
max-width: 210px;
min-height: 32px;
padding: 0 10px;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: #f4f4f4;
color: var(--cg-text);
font-size: var(--ds-text-body-14);
font-weight: 400;
white-space: nowrap;
cursor: pointer;
}
.chatgpt-reference-v1 .composer-mode-chip span:not(.composer-mode-icon):not(.composer-mode-remove) {
overflow: hidden;
text-overflow: ellipsis;
}
.chatgpt-reference-v1 .composer-mode-icon,
.chatgpt-reference-v1 .composer-mode-remove {
display: inline-grid;
place-items: center;
color: #5f6368;
}
.chatgpt-reference-v1 .composer-popover,
.chatgpt-reference-v1 .reasoning-popover {
position: absolute;
z-index: 60;
top: calc(100% + 8px);
bottom: auto;
display: grid;
min-width: 260px;
padding: 6px;
border: 1px solid #e3e3e3;
border-radius: 16px;
background: #ffffff;
box-shadow: 0 18px 44px rgba(0, 0, 0, 0.14), 0 4px 14px rgba(0, 0, 0, 0.08);
}
.chatgpt-reference-v1 .composer-popover[hidden],
.chatgpt-reference-v1 .reasoning-popover[hidden] {
display: none;
}
.chatgpt-reference-v1 .composer-popover {
left: var(--composer-menu-left, 0);
top: var(--composer-menu-top, calc(100% + 8px));
bottom: var(--composer-menu-bottom, auto);
width: 100%;
max-height: var(--composer-menu-max-height, min(264px, calc(100vh - 190px)));
padding: 6px 0;
border: 0;
overflow-y: auto;
overscroll-behavior: contain;
scrollbar-width: thin;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
}
.chatgpt-reference-v1 .composer-popover::-webkit-scrollbar {
width: 10px;
}
.chatgpt-reference-v1 .reasoning-popover {
left: var(--reasoning-menu-left, auto);
right: var(--reasoning-menu-right, 62px);
top: var(--reasoning-menu-top, calc(100% + 8px));
bottom: var(--reasoning-menu-bottom, auto);
width: 124px;
min-width: 124px;
max-height: var(--reasoning-menu-max-height, min(340px, calc(100vh - 16px)));
padding: 6px 0;
border: 0;
border-radius: 16px;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
}
.chatgpt-reference-v1 .reasoning-model-menu {
right: var(--reasoning-menu-right, -60px);
width: 126px;
min-width: 126px;
}
.chatgpt-reference-v1 .composer-menu-item,
.chatgpt-reference-v1 .reasoning-menu-item {
display: grid;
align-items: center;
min-height: 36px;
border: 0;
border-radius: var(--ds-radius-sm, 10px);
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
text-align: left;
cursor: pointer;
}
.chatgpt-reference-v1 [data-gpt-oss-runtime-restore][hidden] {
display: none;
}
.chatgpt-reference-v1 .composer-menu-item {
grid-template-columns: 28px minmax(0, 1fr) auto;
gap: 10px;
padding: 0 10px;
margin: 0 6px;
}
.chatgpt-reference-v1 .reasoning-menu-item {
display: flex;
justify-content: space-between;
gap: 24px;
width: 112px;
min-height: 36px;
margin: 0 6px;
padding: 6px 10px;
line-height: 20px;
}
.chatgpt-reference-v1 #reasoningModelMenu,
.chatgpt-reference-v1 #reasoningLevelMenu {
width: 190px;
min-width: 190px;
}
.chatgpt-reference-v1 #reasoningModelMenu .reasoning-menu-item,
.chatgpt-reference-v1 #reasoningLevelMenu .reasoning-menu-item {
width: auto;
}
.chatgpt-reference-v1 .reasoning-model-group-title {
margin: 6px 6px 2px;
padding: 0 10px;
color: #8a8a8a;
font-size: var(--ds-text-caption-12);
font-weight: 400;
line-height: 16px;
}
.chatgpt-reference-v1 .reasoning-model-option.is-planned {
cursor: default;
}
.chatgpt-reference-v1 .reasoning-model-option.is-planned > span:first-child {
color: #8a8a8a;
}
.chatgpt-reference-v1 .reasoning-model-badge {
flex: 0 0 auto;
padding: 1px 8px;
border-radius: var(--ds-radius-pill, 999px);
background: #ececec;
color: #5d5d5d;
font-size: var(--ds-text-micro-11);
line-height: 16px;
white-space: nowrap;
}
/* Model labels and status badges vary by runtime state. Size the desktop popover to
its widest row; JS supplies the measured width and clamps it to the viewport. */
.chatgpt-reference-v1 #reasoningModelMenu {
width: var(--reasoning-menu-width, max-content);
min-width: min(220px, calc(100vw - 16px));
max-width: calc(100vw - 16px);
}
.chatgpt-reference-v1 #reasoningModelMenu .reasoning-menu-item {
box-sizing: border-box;
width: auto;
}
.chatgpt-reference-v1 #reasoningMenu {
width: 210px;
min-width: 210px;
}
.chatgpt-reference-v1 #reasoningMenu .reasoning-menu-item {
width: auto;
}
.chatgpt-reference-v1 .reasoning-future-menu {
width: 200px;
padding: 12px;
}
.chatgpt-reference-v1 .reasoning-future-empty {
margin: 0;
font-size: var(--ds-text-body-14);
color: var(--cg-text);
}
.chatgpt-reference-v1 .reasoning-future-hint {
margin: 4px 0 0;
font-size: var(--ds-text-caption-12);
line-height: 1.5;
color: #8a8a8a;
}
.chatgpt-reference-v1 .reasoning-menu-item > span:first-child {
white-space: nowrap;
}
.chatgpt-reference-v1 .composer-menu-copy {
display: flex;
min-width: 0;
align-items: baseline;
gap: 12px;
}
.chatgpt-reference-v1 .composer-menu-copy strong {
color: var(--cg-text);
font-size: var(--ds-text-body-14);
font-weight: 400;
white-space: nowrap;
}
.chatgpt-reference-v1 .composer-menu-copy small {
overflow: hidden;
color: #8a8a8a;
font-size: var(--ds-text-caption-13);
font-weight: 400;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .composer-menu-item:hover,
.chatgpt-reference-v1 .reasoning-menu-item:hover {
background: #f4f4f4;
}
/* 2026-08-01 (doc 345 §5): 「이미지 만들기」 아이콘만 핑크 #e83e9d 였다. 같은 메뉴의 다른
아이콘 6개는 전부 잉크(#3f3f3f)라 하나만 튀었고, doc 221 W-1의 「색은 의미(액션·상태)에만」
에도 어긋난다 — 메뉴 항목의 종류는 의미색이 아니다. ChatGPT도 이 자리 아이콘이 전부
무채색이다. 규칙을 지우면 12655행의 --cg-text-soft 가 그대로 적용돼 형제와 같아진다.
★함께 지운 `color: #4b5563` 은 이미 죽은 선언이었다 — 12655행에 같은 선택자·같은
특이도(0,2,0) 규칙이 뒤에 있어 그쪽이 이긴다(형제 실측이 #3f3f3f인 이유). display 와
place-items 는 12655에 없으므로 여기 남긴다. */
.chatgpt-reference-v1 .composer-menu-icon,
.chatgpt-reference-v1 .composer-menu-chevron,
.chatgpt-reference-v1 .reasoning-check,
.chatgpt-reference-v1 .composer-menu-check {
display: inline-grid;
place-items: center;
}
.chatgpt-reference-v1 .composer-menu-dynamic {
display: grid;
}
.chatgpt-reference-v1 .composer-menu-dynamic[hidden] {
display: none;
}
.chatgpt-reference-v1 .composer-menu-inline-option {
grid-template-columns: 28px minmax(0, 1fr) 20px;
}
.chatgpt-reference-v1 .composer-menu-app-glyph {
width: 20px;
height: 20px;
color: var(--cg-text);
font-size: var(--ds-text-body-15);
line-height: 20px;
}
.chatgpt-reference-v1 .composer-menu-check {
opacity: 0;
}
.chatgpt-reference-v1 .composer-menu-item.is-selected .composer-menu-check {
opacity: 1;
}
.chatgpt-reference-v1 .composer-menu-divider {
height: 1px;
margin: 6px 0;
background: #ececec;
}
.chatgpt-reference-v1 .reasoning-popover .composer-menu-divider {
margin: 4px 0;
}
.chatgpt-reference-v1 .reasoning-menu-title {
width: 112px;
min-height: 36px;
margin: 0 6px;
padding: 8px 10px;
color: rgb(143, 143, 143);
font-size: var(--ds-text-body-14);
line-height: 20px;
font-weight: 400;
}
.chatgpt-reference-v1 .reasoning-model-item {
margin-top: 0;
}
html[data-chat-state="active"] .chatgpt-reference-v1 .composer-popover,
html[data-chat-state="loading"] .chatgpt-reference-v1 .composer-popover {
top: var(--composer-menu-top, auto);
bottom: var(--composer-menu-bottom, calc(100% + 10px));
}
/* The upward flip is for composer-anchored popovers only: with an active chat the
composer sits at the bottom of the viewport, so its menus must open above it.
The sidebar product selector borrows .reasoning-popover purely for the mobile
top-layer sheet machinery, but it is anchored to the sidebar head at the very
top of the page — flipping it put its bottom edge 10px ABOVE the sidebar, i.e.
off-screen ("메뉴가 위로 펼쳐져 안 보임", intermittent because it only happens
once a conversation is open). The desktop guard at
`.chatgpt-product-mode-menu.reasoning-popover` ties this rule on specificity
(0,3,1) and loses on source order, so exclude the selector explicitly here. */
html[data-chat-state="active"] .chatgpt-reference-v1 .reasoning-popover:not(.chatgpt-product-mode-menu),
html[data-chat-state="loading"] .chatgpt-reference-v1 .reasoning-popover:not(.chatgpt-product-mode-menu) {
top: var(--reasoning-menu-top, auto);
bottom: var(--reasoning-menu-bottom, calc(100% + 10px));
}
.chatgpt-reference-v1 .reasoning-menu-item .reasoning-check {
opacity: 0;
}
.chatgpt-reference-v1 .reasoning-menu-item.is-selected .reasoning-check {
opacity: 1;
}
.chatgpt-reference-v1 .message-actions {
display: flex;
align-items: center;
gap: 0;
}
.chatgpt-reference-v1 .message-action-button,
.chatgpt-reference-v1 .feedback-row .message-action-button {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
min-width: 32px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: #4b5563;
cursor: pointer;
}
.chatgpt-reference-v1 .message-action-button:hover {
background: #f4f4f4;
color: var(--cg-text);
}
/* 소리로 듣기 재생 중: 눌린(재생) 상태를 유지 표시 — 같은 버튼이 정지 토글이 된다. */
.chatgpt-reference-v1 .message-action-button.is-speaking {
background: var(--cg-hover, #f4f4f4);
color: var(--cg-text);
}
.chatgpt-reference-v1 .feedback-row.message-actions {
margin-top: 14px;
}
.wds-pattern-fidelity-v2 .context-pane {
background: var(--ds-color-surface-solid);
border-left: 1px solid var(--ds-color-line);
box-shadow: none;
}
.wds-pattern-fidelity-v2 .tabs {
gap: var(--ds-space-2);
padding: var(--ds-space-3);
background: var(--ds-color-surface-solid);
}
.wds-pattern-fidelity-v2 .tab-button {
min-height: 32px;
border-radius: var(--ds-radius-xs);
}
.wds-pattern-fidelity-v2 .panel-block,
.wds-pattern-fidelity-v2 .app-detail-panel,
.wds-pattern-fidelity-v2 .app-workflow-panel,
.wds-pattern-fidelity-v2 .app-input-fields,
.wds-pattern-fidelity-v2 .app-result-card,
.wds-pattern-fidelity-v2 .mini-card,
.wds-pattern-fidelity-v2 .app-card,
.wds-pattern-fidelity-v2 .artifact-studio,
.wds-pattern-fidelity-v2 .artifact-editor {
border-color: var(--ds-card-border);
border-radius: var(--ds-radius-sm);
background: var(--ds-color-surface-solid);
box-shadow: none;
}
.wds-pattern-fidelity-v2 .login-dialog {
width: min(390px, calc(100vw - var(--wds-space-8, 2rem)));
max-width: none;
padding: 0;
border: 0;
background: transparent;
box-shadow: none;
outline: 0;
}
.wds-pattern-fidelity-v2 .login-dialog::backdrop {
background: color-mix(in srgb, var(--wds-color-surface, var(--ds-color-bg)) 86%, transparent);
backdrop-filter: blur(1px);
}
.wds-pattern-fidelity-v2 .login-service-badge .login-service-logo {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: var(--wds-radius-full);
background: var(--wds-color-surface-muted);
color: var(--wds-color-text-muted);
font-size: var(--wds-font-size-caption);
}
.wds-pattern-fidelity-v2 .login-surface ._brand_1p22z_32 {
font-weight: var(--wds-font-weight-regular);
}
.wds-pattern-fidelity-v2 .login-service-name {
display: inline;
width: auto;
height: auto;
border-radius: 0;
background: transparent;
color: inherit;
font-size: inherit;
font-weight: var(--wds-font-weight-medium);
line-height: inherit;
white-space: nowrap;
}
.wds-pattern-fidelity-v2 .login-password-toggle {
display: grid;
place-items: center;
width: var(--wds-control-height-sm);
height: var(--wds-control-height-sm);
border: 0;
border-radius: var(--wds-button-radius);
background: transparent;
color: var(--wds-color-text-muted);
cursor: pointer;
}
.wds-pattern-fidelity-v2 .login-password-toggle:hover {
background: var(--wds-color-surface-hover);
color: var(--wds-color-text);
}
.wds-pattern-fidelity-v2 .login-password-toggle:focus-visible {
outline: 2px solid var(--wds-color-focus-ring);
outline-offset: 2px;
}
.wds-pattern-fidelity-v2 .login-password-icon--eye-off,
.wds-pattern-fidelity-v2 .login-password-toggle[aria-pressed="true"] .login-password-icon--eye {
display: none;
}
.wds-pattern-fidelity-v2 .login-password-toggle[aria-pressed="true"] .login-password-icon--eye-off {
display: block;
}
.wds-pattern-fidelity-v2 .login-field-error {
margin: 0;
}
.wds-pattern-fidelity-v2 .login-field-error:empty {
display: none;
}
.wds-pattern-fidelity-v2 .login-surface ._label_2lf8x_7,
.wds-pattern-fidelity-v2 .login-surface ._root_1ergb_2,
.wds-pattern-fidelity-v2 .login-surface ._label_1ergb_100 {
/* WDS Login art direction: avoid heavy text inside the auth surface. */
font-weight: var(--wds-font-weight-regular);
}
.wds-pattern-fidelity-v2 .login-surface ._field_2lf8x_2 {
display: flex;
flex-direction: column;
gap: var(--wds-space-2);
}
.wds-pattern-fidelity-v2 .login-surface ._label_2lf8x_7 {
display: block;
color: var(--wds-color-text);
font-size: var(--wds-font-size-body-2);
line-height: 1.4;
}
.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100,
.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100:hover,
.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100:focus,
.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100:focus-visible {
width: auto;
min-width: 0;
min-height: 0;
height: auto;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--wds-input-fg);
box-shadow: none;
outline: none;
line-height: normal;
}
.wds-pattern-fidelity-v2 .login-surface ._root_1ergb_2 {
display: inline-flex;
align-items: center;
gap: var(--wds-space-2);
color: var(--wds-color-text-muted);
font-size: var(--wds-font-size-body-2);
line-height: 1.4;
}
.wds-pattern-fidelity-v2 .login-surface ._label_1ergb_100 {
color: var(--wds-color-text-muted);
font-size: var(--wds-font-size-body-2);
line-height: 1.4;
}
.wds-pattern-fidelity-v2 .login-options-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wds-space-3);
min-height: var(--wds-control-height-md);
}
/* Invite-accept mode (portal-invite-accept-screen, app.js enterInviteAcceptMode()):
* hides the username/current-password field rows and the remember-me/forgot-
* password row when a `?invite_token=` deep link swaps the login form into
* "set a password to accept the invite" mode, reusing #passwordChangeFields'
* two fields instead. A bare [hidden] attribute is not enough here -- both
* ._field_2lf8x_2 above and .login-options-row set display:flex with equal or
* higher specificity than the UA [hidden] rule (author origin always beats
* UA origin) -- so this follows the same explicit [hidden]-override
* convention already used elsewhere in this file (e.g. .sidebar[hidden],
* #trustPanel.chatgpt-route-page[hidden]).
*/
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._field_2lf8x_2[hidden] {
display: none;
}
.wds-pattern-fidelity-v2 .login-options-row[hidden] {
display: none;
}
.wds-pattern-fidelity-v2 .login-link-button,
.wds-pattern-fidelity-v2 .login-help-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-height: var(--wds-control-height-md);
padding: 0;
border: 0;
background: transparent;
color: var(--wds-color-primary-text);
font: inherit;
font-size: var(--wds-font-size-body-2);
font-weight: var(--wds-font-weight-regular);
line-height: 1.4;
text-decoration: none;
cursor: pointer;
}
.wds-pattern-fidelity-v2 .login-surface ._button_lt829_2 {
font-weight: var(--wds-font-weight-medium);
}
.wds-pattern-fidelity-v2 .login-help {
margin: 0;
}
.wds-pattern-fidelity-v2 .login-help span {
color: var(--wds-color-primary-text);
font-weight: var(--wds-font-weight-regular);
}
.wds-pattern-fidelity-v2 .login-form-message[data-empty="true"] {
display: none;
}
/* P0-2: #loginError ships with the WDS FormMessage error variant class
* (`_error_tqd1n_40`, see shared/wds/ui-web/styles.css) baked into its
* markup for the common failure case. setLoginFormMessage() in app.js
* toggles `data-variant` for success/info copy (reset mail sent, invite
* accepted) — these two rules reuse the same WDS `*-text` ink tokens the
* shared FormMessage success/info variants use (rather than inventing new
* colors) and win on specificity (class+attribute vs. the single class
* above), so a confirmation no longer reads as a red alert. */
.wds-pattern-fidelity-v2 .login-form-message[data-variant="success"] {
color: var(--wds-color-success-text);
}
.wds-pattern-fidelity-v2 .login-form-message[data-variant="info"] {
color: var(--wds-color-info-text);
}
.wds-pattern-fidelity-v2 .login-button-spinner[hidden] {
display: none !important;
}
/* 20260705-login-ai-token-alignment: login keeps WDS structure, with product styling resolved through current AI shell tokens. */
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-dialog {
--chatgpt-login-backdrop-bg: var(--wizon-ai-login-backdrop-bg);
width: min(390px, calc(100vw - (var(--wizon-ai-thread-gutter, 16px) * 2)));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-dialog::backdrop {
background: var(--chatgpt-login-backdrop-bg);
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface {
--chatgpt-login-surface-padding: var(--wizon-ai-login-surface-padding);
--chatgpt-login-surface-gap: var(--wizon-ai-login-surface-gap);
--chatgpt-login-header-gap: var(--wizon-ai-login-header-gap);
--chatgpt-login-body-gap: var(--wizon-ai-login-body-gap);
--chatgpt-login-actions-gap: var(--wizon-ai-login-actions-gap);
--chatgpt-login-field-gap: var(--wizon-ai-login-field-gap);
--chatgpt-login-surface-border: var(--wizon-ai-login-surface-border);
--chatgpt-login-surface-shadow: var(--wizon-ai-login-surface-shadow);
--chatgpt-login-link-fg: var(--cg-text, var(--wizon-ai-login-link-fg));
--chatgpt-login-link-hover-fg: var(--cg-text, var(--wizon-ai-login-link-hover-fg));
--chatgpt-login-help-label-fg: var(--cg-muted, var(--wizon-ai-login-help-label-fg));
--chatgpt-login-link-font-size: var(--wizon-ai-login-link-font-size);
--chatgpt-login-link-font-weight: var(--wizon-ai-login-link-font-weight);
--chatgpt-login-link-line-height: var(--wizon-ai-login-link-line-height);
--chatgpt-login-link-target-height: var(--wizon-ai-login-link-target-height);
--chatgpt-login-link-row-gap: var(--wizon-ai-login-link-row-gap);
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: var(--chatgpt-login-surface-gap);
width: 100%;
padding: var(--chatgpt-login-surface-padding);
border: 1px solid var(--chatgpt-login-surface-border);
border-radius: var(--wizon-ai-radius-popover, 16px);
background: var(--cg-surface, var(--wizon-ai-surface, #ffffff));
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
box-shadow: var(--chatgpt-login-surface-shadow);
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-service-badge .login-service-logo {
border-radius: var(--wizon-ai-radius-pill, 999px);
background: var(--cg-hover-soft, var(--wizon-ai-hover-soft-bg, #f4f4f4));
color: var(--cg-muted, var(--wizon-ai-text-muted, #6f6f6f));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-service-name {
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._subtitle_1p22z_53,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._root_1ergb_2,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._label_1ergb_100 {
color: var(--cg-muted, var(--wizon-ai-text-muted, #6f6f6f));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._label_2lf8x_7 {
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
}
/* 20260705-login-layout-surface-token-qa: restore the WDS LoginSurface anatomy for the app-local hashed classes. */
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._header_1p22z_24,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-body,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-actions {
display: flex;
flex-direction: column;
min-width: 0;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._header_1p22z_24 {
gap: var(--chatgpt-login-header-gap);
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-service-badge {
display: inline-flex;
align-items: center;
gap: var(--wds-space-2);
min-width: 0;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._subtitle_1p22z_53 {
margin: 0;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-body {
gap: var(--chatgpt-login-body-gap);
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._field_2lf8x_2 {
display: flex;
flex-direction: column;
gap: var(--chatgpt-login-field-gap);
min-width: 0;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._label_2lf8x_7 {
margin: 0;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 {
box-sizing: border-box;
width: 100%;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-actions {
gap: var(--chatgpt-login-actions-gap);
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-form-message {
margin: 0;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._footer_1p22z_65 {
margin: 0;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 {
border-color: var(--cg-menu-border, var(--wizon-ai-popover-border, #e3e3e3));
border-radius: var(--wizon-ai-radius-control, 8px);
background: var(--cg-surface, var(--wizon-ai-surface, #ffffff));
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2:focus-within {
border-color: var(--cg-focus-visible-ring, var(--wizon-ai-focus-visible-ring, rgba(13, 13, 13, 0.16)));
box-shadow: 0 0 0 1px var(--cg-focus-visible-ring, var(--wizon-ai-focus-visible-ring, rgba(13, 13, 13, 0.16)));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._leading_1h2ox_45,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._trailing_1h2ox_46,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-password-toggle {
color: var(--cg-muted, var(--wizon-ai-text-muted, #6f6f6f));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-password-toggle {
border-radius: var(--wizon-ai-radius-control, 8px);
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-password-toggle:hover {
background: var(--cg-hover-soft, var(--wizon-ai-hover-soft-bg, #f4f4f4));
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-password-toggle:focus-visible,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-link-button:focus-visible,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-help-link:focus-visible,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._button_lt829_2:focus-visible {
outline: 1px solid var(--cg-focus-visible-ring, var(--wizon-ai-focus-visible-ring, rgba(13, 13, 13, 0.16)));
outline-offset: 2px;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100:hover,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100:focus,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100:focus-visible {
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
caret-color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._wrap_1h2ox_2 ._input_1h2ox_100::placeholder {
color: var(--cg-input-placeholder, var(--wizon-ai-input-placeholder, #8a8a8a));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._box_1ergb_3 {
border-color: var(--cg-muted-2, var(--wizon-ai-text-muted-2, #8a8a8a));
background: var(--cg-surface, var(--wizon-ai-surface, #ffffff));
color: var(--cg-send-fg, var(--wizon-ai-action-primary-fg, #ffffff));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._input_1ergb_3:checked + ._box_1ergb_3 {
border-color: var(--cg-send-bg, var(--wizon-ai-action-primary-bg, #0d0d0d));
background: var(--cg-send-bg, var(--wizon-ai-action-primary-bg, #0d0d0d));
}
/* 20260705-login-admin-contact-token-link: make the admin contact link share the password-help token contract. */
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-help {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chatgpt-login-link-row-gap);
width: 100%;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-link-button,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-help-link {
color: var(--chatgpt-login-link-fg);
font-size: var(--chatgpt-login-link-font-size);
font-weight: var(--chatgpt-login-link-font-weight);
line-height: var(--chatgpt-login-link-line-height);
min-height: var(--chatgpt-login-link-target-height);
text-decoration: none;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-help-link {
flex: 0 0 auto;
margin-left: auto;
white-space: nowrap;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-help span {
color: var(--chatgpt-login-help-label-fg);
font-size: var(--chatgpt-login-link-font-size);
font-weight: var(--chatgpt-login-link-font-weight);
line-height: var(--chatgpt-login-link-line-height);
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-link-button:hover,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-help-link:hover {
color: var(--chatgpt-login-link-hover-fg);
text-decoration: none;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._button_lt829_2._primary_lt829_48 {
border-radius: var(--wizon-ai-radius-control, 8px);
background: var(--cg-send-bg, var(--wizon-ai-action-primary-bg, #0d0d0d));
color: var(--cg-send-fg, var(--wizon-ai-action-primary-fg, #ffffff));
font-weight: 500;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._button_lt829_2._secondary_lt829_64 {
border-color: var(--cg-menu-border, var(--wizon-ai-popover-border, #e3e3e3));
border-radius: var(--wizon-ai-radius-control, 8px);
background: var(--cg-surface, var(--wizon-ai-surface, #ffffff));
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
font-weight: 500;
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._button_lt829_2._secondary_lt829_64:hover:not(:disabled) {
border-color: var(--cg-menu-border, var(--wizon-ai-popover-border, #e3e3e3));
background: var(--cg-hover-soft, var(--wizon-ai-hover-soft-bg, #f4f4f4));
color: var(--cg-text, var(--wizon-ai-text-primary, #0d0d0d));
}
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._button_lt829_2:disabled,
.chatgpt-reference-v1.wds-pattern-fidelity-v2 .login-surface ._button_lt829_2[aria-disabled="true"] {
background: var(--cg-disabled-bg, var(--wizon-ai-disabled-bg, #d9d9d9));
color: var(--cg-send-fg, var(--wizon-ai-action-primary-fg, #ffffff));
}
.wds-pattern-fidelity-v2.is-auth-gate .app-shell {
background: var(--ds-color-bg);
visibility: hidden;
pointer-events: none;
user-select: none;
}
.wds-pattern-fidelity-v2.is-auth-gate .ai-chat-header,
.wds-pattern-fidelity-v2.is-auth-gate .composer-surface,
.wds-pattern-fidelity-v2.is-auth-gate .calm-chat-home,
.wds-pattern-fidelity-v2.is-auth-gate .context-pane {
filter: none;
}
@media (max-width: 900px) {
.wds-pattern-fidelity-v2 .app-shell {
grid-template-columns: 1fr;
}
.wds-pattern-fidelity-v2 .sidebar {
min-height: auto;
}
.wds-pattern-fidelity-v2 .ai-chat-header,
.wds-pattern-fidelity-v2 .composer-surface {
width: calc(100% - var(--ds-space-5));
}
.wds-pattern-fidelity-v2 .ai-chat-header {
justify-content: flex-start;
margin-top: var(--ds-space-4);
}
.wds-pattern-fidelity-v2 .message-list {
padding: var(--ds-space-5) var(--ds-space-3);
}
.wds-pattern-fidelity-v2 .calm-chat-home {
padding: var(--ds-space-5);
}
.wds-pattern-fidelity-v2 .quick-start-grid {
grid-template-columns: 1fr;
}
.wds-pattern-fidelity-v2 .nav-section {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.wds-pattern-fidelity-v2 .nav-item {
grid-template-columns: 24px minmax(0, 1fr);
justify-content: start;
min-width: 0;
text-align: left;
}
.wds-pattern-fidelity-v2 .nav-item span:not(.nav-icon) {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
}
/* ChatGPT theme parity layer: keep the WIZON shell light/dark colors on one palette. */
.chatgpt-reference-v1 {
/* 2026-08-01 셸 층 중복 제거. body 에 셸 클래스 6개가 index.html 에서 항상 함께 붙어
있어(토글 없음), 같은 특이도로 같은 속성을 거는 선언은 마지막 것만 이긴다. 여기서
지던 선언은 화면에 한 번도 닿은 적이 없어 지웠다 — 계산 스타일 무변화로 검증. */
--cg-chat-max-width: var(--wizon-ai-chat-max-width, 800px);
--cg-chat-gutter: var(--wizon-ai-chat-gutter, 20px);
--cg-thread-gutter: var(--wizon-ai-thread-gutter, 16px);
--cg-composer-gutter: var(--wizon-ai-composer-gutter, 12px);
--cg-composer-compact-gutter: var(--wizon-ai-composer-compact-gutter, 8px);
--cg-composer-radius: var(--wizon-ai-composer-radius, 24px);
--cg-menu-gutter: var(--wizon-ai-menu-gutter, 6px);
--cg-menu-radius: var(--wizon-ai-menu-radius, 12px);
--cg-bg: var(--wizon-ai-canvas, #fcfcfc);
--cg-surface: var(--wizon-ai-surface, #ffffff);
--cg-sidebar-bg: var(--wizon-ai-sidebar-bg, #f9f9f9);
--cg-sidebar-border: var(--wizon-ai-sidebar-border, #ececec);
--cg-sidebar-item-height: var(--wizon-ai-sidebar-row-height, 36px);
--cg-sidebar-item-width: var(--wizon-ai-sidebar-row-width, 248px);
--cg-sidebar-account-width: var(--wizon-ai-account-button-width, 246px);
--cg-sidebar-account-height: var(--wizon-ai-account-button-height, 52px);
--cg-text: var(--wizon-ai-text-primary, #0d0d0d);
--cg-text-soft: var(--wizon-ai-text-secondary, #3f3f3f);
--cg-muted: var(--wizon-ai-text-muted, #6f6f6f);
--cg-muted-2: var(--wizon-ai-text-muted-2, #8a8a8a);
/* 2026-08-01 복원. .chatgpt-library-preview-dialog 의 grid-template-rows 가 참조하는데
정의가 없어 선언이 무효였다(값은 그 자리에 남아 있던 폴백 56px). ★--chatgpt-* 이름이지만
14357행의 --chatgpt-route-gap-* 블록에 두지 않는다 — 그 블록은 .chatgpt-route-page
스코프라 다이얼로그에 닿지 않을 수 있다. 여기(.chatgpt-reference-v1)는 body 레벨이다. */
--chatgpt-header-height: 56px;
--cg-hover: var(--wizon-ai-hover-bg, #ececec);
--cg-hover-soft: var(--wizon-ai-hover-soft-bg, #f4f4f4);
--cg-focus-bg: var(--wizon-ai-focus-bg, #f3f3f3);
--cg-focus-ring: var(--wizon-ai-focus-ring, rgba(13, 13, 13, 0.16));
--cg-focus-visible-ring: var(--wizon-ai-focus-visible-ring, var(--cg-focus-ring));
--cg-scrollbar-thumb: var(--wizon-ai-scrollbar-thumb, #c7c7c7);
--cg-scrollbar-track: var(--wizon-ai-scrollbar-track, transparent);
--cg-sidebar-active-bg: var(--wizon-ai-sidebar-active-bg, rgba(0, 0, 0, 0.05));
--cg-menu-bg: var(--wizon-ai-popover-bg, #ffffff);
--cg-menu-border: var(--wizon-ai-popover-border, #e3e3e3);
--cg-user-bubble-bg: var(--wizon-ai-message-user-bg, #f4f4f4);
--cg-composer-bg: var(--wizon-ai-composer-bg, #ffffff);
--cg-composer-border: var(--wizon-ai-composer-border, rgba(0, 0, 0, 0.05));
--cg-input-placeholder: var(--wizon-ai-input-placeholder, #8a8a8a);
--cg-send-bg: var(--wizon-ai-action-primary-bg, #0d0d0d);
--cg-send-fg: var(--wizon-ai-action-primary-fg, #ffffff);
--cg-disabled-bg: var(--wizon-ai-disabled-bg, #d9d9d9);
--cg-danger-fg: var(--wizon-ai-danger-text, rgb(186, 38, 35));
/* 경고(warning). danger와 같은 층에 둔다 — 이 자리가 비어 있던 탓에 경고 표면이
개인 설정인 --accent(ink/gray/blue)를 빌려 썼고, 파란 accent를 고른 사용자에게는
의료 경고가 파란 막대로 나왔다. 위험도가 취향으로 결정되면 안 된다.
셸 토큰이 테마별 값을 갖는다(라이트 amber-700 / 다크 amber-500) — 한 값으로는
두 테마를 못 덮기 때문이다: amber-700은 라이트 4.57:1인데 다크 3.21:1, amber-500은
다크 7.50:1인데 라이트 1.95:1. 폴백도 토큰이라 색 리터럴이 늘지 않는다. */
--cg-warning-fg: var(--wizon-ai-warning-text, var(--wds-amber-700));
--cg-danger-bg: var(--wizon-ai-danger-bg, #ff002a);
--cg-danger-bg-hover: var(--wizon-ai-danger-bg-hover, #e50026);
/* doc 167 §4.1 (phantom-token cleanup): these two names were consumed by the question-card
family as if they were tokens but never defined — every use silently fell to its literal
fallback (and --cg-surface-secondary had DIFFERENT fallbacks per call site, 0.03 vs 0.05).
Defined here for real: success rides the art-direction green axis (doc 161, dark-aware),
the secondary surface rides the themed hover-soft neutral. */
--cg-success: var(--ad-green, #15803d);
--cg-surface-secondary: var(--cg-hover-soft);
--cg-shadow: var(--wizon-ai-composer-shadow, 0 0 0 1px rgba(0, 0, 0, 0.04), 0 2px 8px rgba(0, 0, 0, 0.04), 0 4px 80px 8px rgba(0, 0, 0, 0.024));
--cg-menu-shadow: var(--wizon-ai-popover-shadow, 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62));
--cg-dialog-shadow: var(--wizon-ai-dialog-shadow, var(--cg-menu-shadow));
/* anti-drift reconcile: --cg-floating-shadow was never defined anywhere, so
every var(--cg-floating-shadow, ) call site always fell through
to its own hardcoded fallback (same phantom-token shape as the
--cg-success cleanup above). 7 call sites, only 4 distinct values —
defined here for real, one token per value, fallback dropped at each
site. */
--cg-shadow-float-lg: 0 18px 48px rgba(15, 15, 15, 0.16);
--cg-shadow-float-xl: 0 24px 72px rgba(0, 0, 0, 0.24);
--cg-shadow-float-md: 0 18px 54px rgba(0, 0, 0, 0.2);
--cg-shadow-float-xs: 0 1px 2px rgba(15, 15, 15, 0.12);
--cg-transition-basic-duration: var(--wizon-ai-transition-basic-duration, 150ms);
--cg-ease-enter: var(--wizon-ai-ease-enter, cubic-bezier(0.19, 1, 0.22, 1));
--cg-ease-exit: var(--wizon-ai-ease-exit, cubic-bezier(0.8, 0, 0.4, 1));
--cg-ease-move: var(--wizon-ai-ease-move, cubic-bezier(0.65, 0, 0.35, 1));
color-scheme: light;
}
body.chatgpt-reference-v1 {
background: var(--cg-bg);
color: var(--cg-text);
font-family: var(--wizon-ai-font-family, -apple-system-body, ui-sans-serif, -apple-system, "system-ui", "Segoe UI", Helvetica, "Apple Color Emoji", Arial, sans-serif, "Segoe UI Emoji", "Segoe UI Symbol");
overflow: hidden;
}
body.chatgpt-reference-v1 button,
body.chatgpt-reference-v1 input,
body.chatgpt-reference-v1 textarea,
body.chatgpt-reference-v1 select {
font-family: inherit;
}
@media (max-width: 900px) {
.chatgpt-reference-v1 {
/* 20260705-mobile-account-bottom-safe: keep the full account row inside short mobile viewports. */
--cg-sidebar-account-height: 44px;
}
.chatgpt-reference-v1 .chatgpt-account-area {
padding-top: 6px;
}
.chatgpt-reference-v1 .chatgpt-account-button {
padding: 5px 6px 5px 8px;
}
}
html[data-theme="dark"] .chatgpt-reference-v1 {
color-scheme: dark;
}
html[data-theme="dark"] body.chatgpt-reference-v1,
html[data-theme="dark"] body.chatgpt-reference-v1.premium-product-shell-v1,
html[data-theme="dark"] body.chatgpt-reference-v1.service-product-v28 {
background: var(--cg-bg);
color: var(--cg-text);
}
.chatgpt-reference-v1 .app-shell,
.chatgpt-reference-v1 .main-pane,
.chatgpt-reference-v1 .workbench,
.chatgpt-reference-v1 .chat-pane,
.chatgpt-reference-v1.is-auth-gate .app-shell {
background: var(--cg-bg);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .app-shell,
body.chatgpt-reference-v1 .main-pane,
body.chatgpt-reference-v1 .workbench,
body.chatgpt-reference-v1 .chat-pane {
height: 100dvh;
min-height: 0;
overflow: hidden;
}
html[data-theme="dark"] body.chatgpt-reference-v1 .app-shell,
html[data-theme="dark"] body.chatgpt-reference-v1 .main-pane,
html[data-theme="dark"] body.chatgpt-reference-v1 .workbench,
html[data-theme="dark"] body.chatgpt-reference-v1 .chat-pane,
html[data-theme="dark"] body.chatgpt-reference-v1.service-product-v28 .chat-pane,
html[data-theme="dark"] body.chatgpt-reference-v1.premium-product-shell-v1 .app-shell {
background: var(--cg-bg);
color: var(--cg-text);
}
.chatgpt-reference-v1 .sidebar,
.chatgpt-reference-v1.sidebar-collapsed .chatgpt-sidebar-rail {
background: var(--cg-sidebar-bg);
border-right-color: var(--cg-sidebar-border);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .sidebar {
height: 100dvh;
min-height: 0;
overflow: visible;
}
body.chatgpt-reference-v1.sidebar-collapsed .chatgpt-sidebar-rail {
height: 100dvh;
min-height: 0;
overflow: visible;
}
html[data-theme="dark"] body.chatgpt-reference-v1 .sidebar,
html[data-theme="dark"] body.chatgpt-reference-v1.service-product-v28 .sidebar,
html[data-theme="dark"] body.chatgpt-reference-v1.premium-product-shell-v1 .sidebar,
html[data-theme="dark"] body.chatgpt-reference-v1.sidebar-collapsed .chatgpt-sidebar-rail {
background: var(--cg-sidebar-bg);
border-right-color: var(--cg-sidebar-border);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-sidebar-head strong,
.chatgpt-reference-v1 .brand-row strong,
.chatgpt-reference-v1 .chatgpt-sidebar-link,
.chatgpt-reference-v1 .new-chat-button.chatgpt-sidebar-link,
.chatgpt-reference-v1 .new-chat-button,
.chatgpt-reference-v1 .theme-toggle,
.chatgpt-reference-v1 .nav-item,
.chatgpt-reference-v1 .nav-item span:not(.nav-icon),
.chatgpt-reference-v1 .nav-item.active span:not(.nav-icon),
.chatgpt-reference-v1 .chatgpt-recent-title,
.chatgpt-reference-v1 .recent-item,
.chatgpt-reference-v1 .recent-primary,
.chatgpt-reference-v1 .chatgpt-account-button,
.chatgpt-reference-v1 .chatgpt-account-copy strong,
.chatgpt-reference-v1 .chatgpt-account-menu-head strong,
.chatgpt-reference-v1 .chatgpt-home-title,
.chatgpt-reference-v1 .message-body,
.chatgpt-reference-v1 .message-body p,
.chatgpt-reference-v1 .message-body li,
.chatgpt-reference-v1 .message-body h3,
.chatgpt-reference-v1 .message-body h4,
.chatgpt-reference-v1 .message-body h5,
.chatgpt-reference-v1 .message-body strong,
.chatgpt-reference-v1 .message.assistant .message-body,
.chatgpt-reference-v1 .message.system .message-body,
.chatgpt-reference-v1 .composer-surface textarea,
.chatgpt-reference-v1 .composer-menu-copy strong,
.chatgpt-reference-v1 .chatgpt-settings-head h2,
.chatgpt-reference-v1 .chatgpt-settings-panel h3 {
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-icon-button,
.chatgpt-reference-v1 .chatgpt-rail-button,
.chatgpt-reference-v1 .composer-icon-button,
.chatgpt-reference-v1 .message-action-button,
.chatgpt-reference-v1 .feedback-row .message-action-button,
.chatgpt-reference-v1 .composer-menu-icon,
.chatgpt-reference-v1 .composer-menu-chevron,
.chatgpt-reference-v1 .reasoning-check,
.chatgpt-reference-v1 .composer-mode-icon,
.chatgpt-reference-v1 .composer-mode-remove {
color: var(--cg-text-soft);
}
.chatgpt-reference-v1 .chatgpt-sidebar-shortcut,
.chatgpt-reference-v1 .sidebar .section-label,
.chatgpt-reference-v1 .chatgpt-recent-title svg,
.chatgpt-reference-v1 .chatgpt-recent-header-action,
.chatgpt-reference-v1 .recent-action,
.chatgpt-reference-v1 .recent-primary small,
.chatgpt-reference-v1 .chatgpt-account-copy small,
.chatgpt-reference-v1 .chatgpt-account-menu-head small,
.chatgpt-reference-v1 .settings-description,
.chatgpt-reference-v1 .composer-model-pill,
.chatgpt-reference-v1 .composer-menu-copy small,
.chatgpt-reference-v1 .reasoning-menu-title,
.chatgpt-reference-v1 .source-snippet,
.chatgpt-reference-v1 .evidence-card summary small,
.chatgpt-reference-v1 .evidence-note {
color: var(--cg-muted);
}
/* 20260710-hover-pointer-guard (아트디렉션 P0-1): 통합 인터랙션 상태 레이어를 hover/state로 분리.
:hover는 진짜 hover 포인터에서만 — iOS Safari는 탭 후 :hover가 남아(첫탭 hover 문제, doc 147 규칙1)
아이콘버튼·사이드바·recent 행 등이 눌린 색으로 고착됐다. 상태(.active/.is-selected/[aria-expanded])는
포인터와 무관하므로 가드 밖 유지. 새 :hover 규칙은 반드시 @media (hover: hover) 안에 쓸 것. */
.chatgpt-reference-v1 .chatgpt-sidebar-link.active,
.chatgpt-reference-v1 .nav-item.active,
.chatgpt-reference-v1 .chatgpt-account-button[aria-expanded="true"],
.chatgpt-reference-v1 .chatgpt-settings-tabs button.is-active,
.chatgpt-reference-v1 .recent-item.is-selected,
.chatgpt-reference-v1 .composer-model-pill[aria-expanded="true"] {
background: var(--cg-hover);
color: var(--cg-text);
}
@media (hover: hover) {
.chatgpt-reference-v1 .chatgpt-sidebar-link:hover,
.chatgpt-reference-v1 .new-chat-button:hover,
.chatgpt-reference-v1 .theme-toggle:hover,
.chatgpt-reference-v1 .nav-item:hover,
.chatgpt-reference-v1 .chatgpt-icon-button:hover,
.chatgpt-reference-v1 .chatgpt-rail-button:hover,
.chatgpt-reference-v1 .chatgpt-account-button:hover,
.chatgpt-reference-v1 .chatgpt-settings-tabs button:hover,
.chatgpt-reference-v1 .chatgpt-recent-header-action:hover,
.chatgpt-reference-v1 .recent-item:hover,
.chatgpt-reference-v1 .recent-action:hover,
.chatgpt-reference-v1 .chatgpt-recent-menu button:hover:not(:disabled),
.chatgpt-reference-v1 .composer-icon-button:hover,
.chatgpt-reference-v1 .composer-model-pill:hover,
.chatgpt-reference-v1 .composer-menu-item:hover,
.chatgpt-reference-v1 .reasoning-menu-item:hover,
.chatgpt-reference-v1 .message-action-button:hover,
.chatgpt-reference-v1 .feedback-row .message-action-button:hover {
background: var(--cg-hover);
color: var(--cg-text);
}
}
.chatgpt-reference-v1 .chatgpt-sidebar-link.active,
.chatgpt-reference-v1 .chatgpt-sidebar-link.active:hover {
background: var(--cg-sidebar-active-bg);
}
.chatgpt-reference-v1 .chatgpt-more-menu,
.chatgpt-reference-v1 .chatgpt-account-menu,
.chatgpt-reference-v1 .chatgpt-recent-menu,
.chatgpt-reference-v1 .composer-popover,
.chatgpt-reference-v1 .reasoning-popover,
.chatgpt-reference-v1 .chatgpt-settings-dialog {
background: var(--cg-menu-bg);
border-color: var(--cg-menu-border);
color: var(--cg-text);
box-shadow: var(--cg-menu-shadow);
}
.chatgpt-reference-v1 .chatgpt-more-menu button,
.chatgpt-reference-v1 .chatgpt-account-menu button,
.chatgpt-reference-v1 .chatgpt-recent-menu button,
.chatgpt-reference-v1 .composer-menu-item,
.chatgpt-reference-v1 .reasoning-menu-item,
.chatgpt-reference-v1 .chatgpt-settings-tabs button,
.chatgpt-reference-v1 .settings-row,
.chatgpt-reference-v1 .settings-pill,
.chatgpt-reference-v1 .settings-combobox,
.chatgpt-reference-v1 .settings-switch {
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-more-menu button:hover,
.chatgpt-reference-v1 .chatgpt-account-menu button:hover {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-account-menu {
border: 0;
border-radius: var(--chatgpt-account-menu-radius, var(--wizon-ai-radius-popover));
box-shadow: var(--cg-menu-shadow);
}
.chatgpt-reference-v1 .chatgpt-settings-dialog {
border: 0;
border-radius: 16px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
}
.chatgpt-reference-v1 .reasoning-popover {
width: 124px;
min-width: 124px;
padding: 6px 0;
border: 0;
border-radius: 16px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
}
.chatgpt-reference-v1 .reasoning-model-menu {
width: 126px;
min-width: 126px;
}
.chatgpt-reference-v1 .chatgpt-recent-menu {
border: 0;
border-radius: 16px;
box-shadow: 0 8px 12px rgba(0, 0, 0, 0.08), 0 0 1px rgba(0, 0, 0, 0.62);
}
.chatgpt-reference-v1 .chatgpt-recent-menu [data-recent-menu-action^="delete"]:not(:disabled) {
color: var(--cg-danger-fg);
}
.chatgpt-reference-v1 .chatgpt-settings-tabs button:hover,
.chatgpt-reference-v1 .chatgpt-settings-tabs button.is-active {
background: rgba(0, 0, 0, 0.04);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-menu-separator,
.chatgpt-reference-v1 .composer-menu-divider,
.chatgpt-reference-v1 .chatgpt-settings-head,
.chatgpt-reference-v1 .chatgpt-settings-tabs,
.chatgpt-reference-v1 .settings-row {
border-color: var(--cg-menu-border);
}
.chatgpt-reference-v1 .chatgpt-menu-separator,
.chatgpt-reference-v1 .composer-menu-divider {
background: var(--cg-menu-border);
}
.chatgpt-reference-v1 .settings-pill,
.chatgpt-reference-v1 .settings-combobox,
.chatgpt-reference-v1 .prompt-chip {
background: var(--cg-surface);
border-color: rgba(0, 0, 0, 0);
color: var(--cg-text-soft);
}
.chatgpt-reference-v1 .settings-combobox:hover,
.chatgpt-reference-v1 .settings-pill:hover {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .settings-switch {
background: #3a83f7;
}
html[data-theme="dark"] .chatgpt-reference-v1 .settings-switch::after {
background: var(--cg-bg);
}
.chatgpt-reference-v1 .prompt-chip:hover {
background: var(--cg-hover);
border-color: var(--cg-menu-border);
color: var(--cg-text);
}
.chatgpt-reference-v1 .prompt-chip.chatgpt-action-chip {
display: flex;
align-items: center;
gap: 8px;
height: 40px;
min-height: 40px;
padding: 10px 16px 10px 14px;
/* ⓑ 하드 테두리가 바로 아래 컴포저와 시선을 다퉜다. iOS 레퍼런스의 첨부 칩처럼
«테두리 없는 연회색 면»으로 바꿔 무게를 낮춘다. 칩 자체는 제품 진입점이라 없애지
않는다. 대비 실측: 다크 13.63:1(AA 4.5 여유). 테두리는 0 이 아니라 transparent —
굵기를 지우면 레이아웃이 1px 씩 움직인다. */
border: 1px solid transparent;
border-radius: 100px;
background: var(--cg-hover-soft);
color: var(--cg-text);
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 21px;
}
.chatgpt-reference-v1 .prompt-chip.chatgpt-action-chip .prompt-chip-icon {
display: inline-flex;
width: 20px;
height: 20px;
color: #8f8f8f;
}
.chatgpt-reference-v1 .prompt-chip.chatgpt-action-chip .prompt-chip-icon svg {
width: 20px;
height: 20px;
stroke: currentColor;
}
.chatgpt-reference-v1 .prompt-chip.chatgpt-action-chip:hover {
background: rgba(0, 0, 0, 0.04);
border-color: transparent;
color: var(--cg-text);
}
html[data-theme="dark"] .chatgpt-reference-v1 .prompt-chip.chatgpt-action-chip {
border-color: transparent;
background: var(--cg-hover-soft);
color: #ececec;
}
html[data-theme="dark"] .chatgpt-reference-v1 .prompt-chip.chatgpt-action-chip .prompt-chip-icon {
color: #b4b4b4;
}
html[data-theme="dark"] .chatgpt-reference-v1 .prompt-chip.chatgpt-action-chip:hover {
background: rgba(255, 255, 255, 0.08);
border-color: transparent;
color: #ececec;
}
.chatgpt-reference-v1 .message.user .message-body {
background: var(--cg-user-bubble-bg);
color: var(--cg-text);
}
.chatgpt-reference-v1 .message-body code:not(pre code) {
background: var(--cg-hover);
color: var(--cg-text);
}
.chatgpt-reference-v1 .message-body pre,
.chatgpt-reference-v1 .code-block {
background: #0d0d0d;
color: #ececec;
}
html[data-theme="dark"] .chatgpt-reference-v1 .message-body pre,
html[data-theme="dark"] .chatgpt-reference-v1 .code-block {
background: #171717;
color: #ececec;
}
.chatgpt-reference-v1 .chatgpt-composer-shell,
.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell {
background: var(--cg-composer-bg);
border-color: var(--cg-composer-border);
color: var(--cg-text);
box-shadow: var(--cg-shadow);
}
html[data-theme="dark"] body.chatgpt-reference-v1.service-product-v28 .composer-surface.chatgpt-composer-shell,
html[data-theme="dark"] body.chatgpt-reference-v1.premium-product-shell-v1 .composer-surface.chatgpt-composer-shell {
background: var(--cg-composer-bg);
border-color: var(--cg-composer-border);
color: var(--cg-text);
box-shadow: var(--cg-shadow);
}
html[data-chat-state="empty"] .chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell {
box-shadow: var(--cg-shadow);
}
.chatgpt-reference-v1 .composer-surface textarea::placeholder {
color: var(--cg-input-placeholder);
}
.chatgpt-reference-v1 .composer-mode-chip {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .composer-send-button,
.chatgpt-reference-v1 #sendButton {
background: var(--cg-send-bg);
color: var(--cg-send-fg);
}
.chatgpt-reference-v1 .composer-send-button:hover,
.chatgpt-reference-v1 #sendButton:hover {
background: var(--cg-send-bg);
}
.chatgpt-reference-v1 #sendButton:disabled {
background: var(--cg-disabled-bg);
color: var(--cg-send-fg);
}
.chatgpt-reference-v1 .recent-actions {
background: linear-gradient(90deg, color-mix(in srgb, var(--cg-hover) 0%, transparent), var(--cg-hover) var(--chatgpt-recent-action-fade));
}
html[data-theme="dark"] .chatgpt-reference-v1 .recent-actions {
background: linear-gradient(90deg, color-mix(in srgb, var(--cg-hover) 0%, transparent), var(--cg-hover) var(--chatgpt-recent-action-fade));
}
.chatgpt-reference-v1 .recent-select-box {
background: var(--cg-surface);
border-color: var(--cg-muted-2);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-recent-menu button:disabled {
color: var(--cg-muted-2);
}
.chatgpt-reference-v1 .evidence-card,
.chatgpt-reference-v1 .source-card,
.chatgpt-reference-v1 .tool-status-card,
.chatgpt-reference-v1 .answer-activity {
background: var(--cg-menu-bg);
border-color: var(--cg-menu-border);
color: var(--cg-text);
}
.chatgpt-reference-v1 .source-card-head strong,
.chatgpt-reference-v1 .source-card-head span,
.chatgpt-reference-v1 .evidence-card summary span {
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chat-pane {
position: relative;
}
body.chatgpt-reference-v1 .chatgpt-conversation-actions {
position: absolute;
top: 8px;
right: 22px;
z-index: 40;
display: inline-flex;
align-items: flex-start;
gap: 0;
}
body.chatgpt-reference-v1 .chatgpt-conversation-actions[hidden] {
display: none;
}
body.chatgpt-reference-v1 .chatgpt-conversation-health {
position: relative;
display: inline-grid;
place-items: center;
width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
padding: 0;
border: 0;
border-radius: var(--ds-radius-sm);
background: transparent;
color: var(--cg-muted);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-conversation-health[hidden] {
display: none;
}
body.chatgpt-reference-v1 .chatgpt-conversation-health:hover,
body.chatgpt-reference-v1 .chatgpt-conversation-health:focus-visible {
background: var(--cg-hover);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-conversation-health:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring);
outline-offset: 1px;
}
body.chatgpt-reference-v1 .chatgpt-conversation-health[data-status="attention"] {
color: var(--cg-warning-fg);
}
body.chatgpt-reference-v1 .chatgpt-conversation-health[data-status="approval"] {
color: var(--ad-blue);
}
body.chatgpt-reference-v1 .chatgpt-conversation-health[data-status="unavailable"] {
color: var(--cg-danger-fg);
}
.chatgpt-conversation-health-icon,
.chatgpt-conversation-health-icon svg {
width: 20px;
height: 20px;
}
.chatgpt-conversation-health-badge {
position: absolute;
top: 1px;
right: 1px;
display: inline-grid;
place-items: center;
min-width: 14px;
height: 14px;
padding: 0 3px;
border-radius: var(--ds-radius-pill);
background: var(--cg-text);
color: var(--cg-surface);
font-size: var(--ds-text-micro-11);
font-weight: var(--wds-font-weight-semibold);
line-height: 1;
}
body.chatgpt-reference-v1 .chatgpt-conversation-health[data-status="attention"] .chatgpt-conversation-health-badge {
background: var(--cg-warning-fg);
}
body.chatgpt-reference-v1 .chatgpt-conversation-health[data-status="approval"] .chatgpt-conversation-health-badge {
background: var(--ad-blue);
}
body.chatgpt-reference-v1 .chatgpt-conversation-health[data-status="unavailable"] .chatgpt-conversation-health-badge {
background: var(--cg-danger-fg);
}
/* 20260710-conversation-actions-in-titlebar: on mobile the consolidated "..."
lives in the top title bar, immediately left of the 새 채팅(compose) icon.
z-index sits above the topbar row but below the sidebar drawer scrim (65),
so opening the drawer covers it. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-conversation-actions {
position: fixed;
top: 8px;
right: 52px;
z-index: 64;
}
}
body.chatgpt-reference-v1 .chatgpt-conversation-share,
body.chatgpt-reference-v1 .chatgpt-conversation-more {
display: inline-flex;
align-items: center;
justify-content: center;
height: 36px;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 20px;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-conversation-share {
gap: 6px;
width: 98px;
padding: 0 12px;
font-weight: 500;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-conversation-more {
width: 36px;
padding: 0;
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-conversation-share:hover,
body.chatgpt-reference-v1 .chatgpt-conversation-more:hover,
body.chatgpt-reference-v1 .chatgpt-conversation-more[aria-expanded="true"] {
background: var(--cg-hover);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-conversation-share svg {
width: 20px;
height: 20px;
}
body.chatgpt-reference-v1 .chatgpt-conversation-more svg {
width: 20px;
height: 20px;
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu {
position: absolute;
top: 36px;
right: 0;
z-index: 45;
display: grid;
/* 20260710-menu-fit: size to the widest row (그룹 채팅 시작 + 준비 중 badge) so nothing
wraps to a second line on desktop. Mobile bottom sheet overrides width below. */
width: max-content;
min-width: 186px;
max-width: 260px;
padding: 6px 0;
border: 0;
border-radius: 16px;
background: var(--cg-menu-bg);
color: var(--cg-text);
box-shadow: var(--cg-menu-shadow);
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu[hidden] {
display: none;
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu button {
display: flex;
align-items: center;
gap: 6px;
box-sizing: border-box;
width: auto;
height: 36px;
min-height: 36px;
margin: 0 6px;
padding: 6px 14px 6px 10px;
border: 0;
border-radius: var(--ds-radius-sm, 10px);
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
font-weight: 400;
line-height: 20px;
text-align: left;
white-space: nowrap;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu button:hover {
background: var(--cg-hover-soft);
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu button.danger {
color: var(--cg-danger-fg);
}
/* 20260710-conversation-menu-consolidation: the group-chat item is an honest
"준비 중" placeholder — muted, with a badge — until the workspace substrate lands. */
body.chatgpt-reference-v1 .chatgpt-conversation-menu button[aria-disabled="true"] {
color: var(--cg-muted-2);
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu-badge {
margin-left: auto;
padding: 1px 6px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-hover-soft);
color: var(--cg-muted-2);
font-size: var(--ds-text-micro-11);
font-weight: 500;
line-height: 16px;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu svg {
width: 20px;
height: 20px;
}
body.chatgpt-reference-v1 .chatgpt-share-dialog {
width: min(520px, calc(100vw - 32px));
max-width: none;
padding: 0;
border: 0;
border-radius: 16px;
background: var(--cg-menu-bg);
color: var(--cg-text);
opacity: 0;
box-shadow: var(--cg-dialog-shadow);
transform: translate3d(0, 12px, 0) scale(0.985);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
will-change: opacity, transform;
}
body.chatgpt-reference-v1 .chatgpt-share-dialog::backdrop {
background: rgba(0, 0, 0, 0.28);
opacity: 0;
transition: opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease);
}
body.chatgpt-reference-v1 .chatgpt-share-dialog[data-motion-state="open"] {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
body.chatgpt-reference-v1 .chatgpt-share-dialog[data-motion-state="closing"] {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.985);
}
body.chatgpt-reference-v1 .chatgpt-share-dialog[data-motion-state="open"]::backdrop {
opacity: 1;
}
body.chatgpt-reference-v1 .chatgpt-share-dialog[data-motion-state="closing"]::backdrop {
opacity: 0;
}
body.chatgpt-reference-v1 .chatgpt-share-shell {
display: grid;
gap: 0;
}
body.chatgpt-reference-v1 .chatgpt-share-head {
display: flex;
min-height: 56px;
align-items: center;
justify-content: space-between;
padding: 10px 10px 10px 16px;
border-bottom: 1px solid var(--cg-menu-border);
}
body.chatgpt-reference-v1 .chatgpt-share-head h2 {
margin: 0;
color: var(--cg-text);
font-size: var(--ds-text-title-18);
font-weight: 400;
line-height: 28px;
}
body.chatgpt-reference-v1 .chatgpt-share-close {
display: inline-flex;
width: 36px;
height: 36px;
align-items: center;
justify-content: center;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--cg-text);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-share-close:hover {
background: var(--cg-hover);
}
body.chatgpt-reference-v1 .chatgpt-share-body {
display: grid;
gap: 14px;
padding: 16px;
}
body.chatgpt-reference-v1 .chatgpt-share-description,
body.chatgpt-reference-v1 .chatgpt-share-status {
margin: 0;
color: var(--cg-muted);
font-size: var(--ds-text-body-14);
line-height: 20px;
}
body.chatgpt-reference-v1 .chatgpt-share-link-row {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
gap: 8px;
align-items: center;
}
body.chatgpt-reference-v1 .chatgpt-share-url {
min-width: 0;
height: 40px;
padding: 0 12px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-sm, 10px);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-body-14);
}
body.chatgpt-reference-v1 .chatgpt-share-url:focus,
body.chatgpt-reference-v1 .chatgpt-share-url:focus-visible {
outline: none;
border-color: var(--cg-menu-border);
box-shadow: none;
}
body.chatgpt-reference-v1 .chatgpt-share-copy {
height: 40px;
padding: 0 14px;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-send-bg);
color: var(--cg-send-fg);
font: inherit;
font-size: var(--ds-text-body-14);
font-weight: 500;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-search-dialog[open] {
position: fixed;
inset: 0;
width: min(680px, calc(100vw - 20px));
height: min(442px, calc(100vh - 40px));
max-height: calc(100vh - 40px);
margin: auto;
padding: 0;
overflow: visible;
border: 1px solid rgba(0, 0, 0, 0.10);
border-radius: 16px;
background: var(--cg-menu-bg, #ffffff);
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-body-16);
line-height: 24px;
box-shadow: 0 14px 62px rgba(0, 0, 0, 0.25);
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.985);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
will-change: opacity, transform;
}
body.chatgpt-reference-v1 .chatgpt-search-dialog[data-motion-state="open"] {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
body.chatgpt-reference-v1 .chatgpt-search-dialog[data-motion-state="closing"] {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.985);
}
body.chatgpt-reference-v1 .chatgpt-search-dialog::backdrop {
background: rgba(0, 0, 0, 0.50);
opacity: 0;
transition: opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease);
}
body.chatgpt-reference-v1 .chatgpt-search-dialog[data-motion-state="open"]::backdrop {
opacity: 1;
}
body.chatgpt-reference-v1 .chatgpt-search-dialog[data-motion-state="closing"]::backdrop {
opacity: 0;
}
html[data-theme="dark"] body.chatgpt-reference-v1 .chatgpt-search-dialog::backdrop {
background: rgba(0, 0, 0, 0.54);
}
body.chatgpt-reference-v1 .chatgpt-search-shell {
display: flex;
flex-direction: column;
min-width: 0;
height: 100%;
max-height: inherit;
}
body.chatgpt-reference-v1 .chatgpt-search-input-row {
display: flex;
align-items: center;
min-height: 64px;
max-height: 64px;
margin: 0 16px 0 12px;
padding: 0;
border-bottom: 0;
}
body.chatgpt-reference-v1 .chatgpt-search-divider {
flex: 0 0 1px;
width: 100%;
height: 1px;
margin: 0;
overflow: hidden;
border: 0;
background: var(--cg-menu-border, rgba(0, 0, 0, 0.10));
}
body.chatgpt-reference-v1 .chatgpt-search-input-row input {
width: 100%;
height: 40px;
min-height: 40px;
min-width: 0;
border: 0;
border-radius: 0;
outline: 0;
background: transparent;
color: var(--cg-text, #0d0d0d);
font: inherit;
font-size: var(--ds-text-body-16);
font-weight: 400;
letter-spacing: 0;
line-height: 24px;
padding: 8px 12px;
box-shadow: none;
}
body.chatgpt-reference-v1 .chatgpt-search-input-row input::placeholder {
color: var(--cg-input-placeholder, #8f8f8f);
}
body.chatgpt-reference-v1 .chatgpt-search-input-row input::-webkit-search-cancel-button,
body.chatgpt-reference-v1 .chatgpt-search-input-row input::-webkit-search-decoration {
appearance: none;
display: none;
}
body.chatgpt-reference-v1 .chatgpt-search-input-row input:focus,
body.chatgpt-reference-v1 .chatgpt-search-input-row input:focus-visible {
border-color: transparent;
box-shadow: none;
outline: none;
}
body.chatgpt-reference-v1 .chatgpt-search-input-row .chatgpt-icon-button {
display: flex;
flex: 0 0 28px;
align-items: center;
justify-content: center;
width: 28px;
height: 28px;
margin-left: 16px;
padding: 4px;
border-radius: var(--ds-radius-pill, 999px);
color: var(--cg-text, #0d0d0d);
}
body.chatgpt-reference-v1 .chatgpt-search-input-row .chatgpt-icon-button svg {
width: 20px;
height: 20px;
color: #8f8f8f;
}
body.chatgpt-reference-v1 .chatgpt-search-body {
flex: 1 1 auto;
min-height: 0;
overflow-y: auto;
padding: 8px 0;
scrollbar-gutter: stable;
}
body.chatgpt-reference-v1 .chatgpt-search-results {
min-height: 0;
overflow: visible;
margin: 0;
padding: 0;
}
body.chatgpt-reference-v1 .chatgpt-search-section {
display: grid;
gap: 0;
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-search-section h3 {
width: calc(100% - 20px);
margin: 8px 8px 8px;
padding: 8px 16px 0;
color: var(--cg-input-placeholder, #8f8f8f);
font-size: var(--ds-text-caption-12);
font-weight: 400;
letter-spacing: 0;
line-height: 16px;
}
body.chatgpt-reference-v1 .chatgpt-search-row {
display: flex;
align-items: center;
gap: 8px;
/* 20260704-search-dialog-row-chatgpt-measured: Chrome ChatGPT row is 647px wide inside a 678px shell at 1920px viewport. */
box-sizing: border-box;
width: calc(100% - 20px);
height: 44px;
min-height: 44px;
margin: 0 8px;
padding: 12px 16px;
border: 0;
border-radius: 12px;
background: transparent;
color: var(--cg-text, #0d0d0d);
font: inherit;
font-size: var(--ds-text-body-16);
line-height: 24px;
text-align: left;
text-decoration: none;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-search-row:hover,
body.chatgpt-reference-v1 .chatgpt-search-row:focus-visible,
body.chatgpt-reference-v1 .chatgpt-search-row[data-chat-search-active="true"] {
background: var(--cg-hover-soft, #f3f3f3);
}
body.chatgpt-reference-v1 .chatgpt-search-result-icon {
display: flex;
flex: 0 0 20px;
align-items: center;
justify-content: center;
place-items: center;
width: 20px;
height: 20px;
color: var(--cg-text, #0d0d0d);
}
body.chatgpt-reference-v1 .chatgpt-search-result-icon svg {
width: 20px;
height: 20px;
stroke-width: var(--wds-icon-stroke, 1.7);
}
body.chatgpt-reference-v1 .chatgpt-search-result-copy {
display: grid;
flex: 1 1 auto;
min-width: 0;
overflow: hidden;
}
body.chatgpt-reference-v1 .chatgpt-search-result-copy strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--ds-text-body-16);
font-weight: 400;
letter-spacing: 0;
line-height: 24px;
}
body.chatgpt-reference-v1 .chatgpt-search-result.is-query-result {
height: 64px;
min-height: 64px;
padding: 12px 16px;
}
body.chatgpt-reference-v1 .chatgpt-search-result.is-query-result .chatgpt-search-result-copy {
gap: 2px;
}
body.chatgpt-reference-v1 .chatgpt-search-result.is-query-result .chatgpt-search-result-copy strong {
font-size: var(--ds-text-body-16);
line-height: 24px;
}
body.chatgpt-reference-v1 .chatgpt-search-result-preview {
min-width: 0;
overflow: hidden;
color: var(--cg-muted, #8a8a8a);
font-size: var(--ds-text-caption-12);
font-weight: 400;
letter-spacing: 0;
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-search-mark {
padding: 0;
border-radius: 2px;
background: rgba(255, 214, 102, 0.42);
color: inherit;
font: inherit;
}
html[data-theme="dark"] body.chatgpt-reference-v1 .chatgpt-search-mark {
background: rgba(255, 214, 102, 0.30);
}
body.chatgpt-reference-v1 .chatgpt-search-empty {
color: var(--cg-muted, #6b7280);
font-size: var(--ds-text-body-16);
font-weight: 400;
letter-spacing: 0;
line-height: 22px;
}
body.chatgpt-reference-v1 .chatgpt-search-empty {
margin: 0;
padding: 14px 34px 24px;
}
@media (max-width: 520px) {
/* 20260708-search-dialog-mobile-fullscreen: the search dialog is a content panel, so
on mobile it goes full-screen via the shared [data-mobile-fullscreen] rule (ChatGPT
parity) instead of the old centered 420px card. Only inner layout lives here. */
body.chatgpt-reference-v1 .chatgpt-search-input-row {
min-height: 56px;
max-height: 56px;
margin: 0 10px 0 8px;
}
body.chatgpt-reference-v1 .chatgpt-search-body {
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
scroll-padding-block: 8px;
}
body.chatgpt-reference-v1 .chatgpt-search-row {
width: calc(100% - 12px);
margin: 0 6px;
padding: 10px 12px;
}
body.chatgpt-reference-v1 .chatgpt-search-result.is-query-result {
height: auto;
min-height: 64px;
}
body.chatgpt-reference-v1 .chatgpt-search-result-preview {
display: -webkit-box;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
white-space: normal;
overflow-wrap: anywhere;
}
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog[open] {
width: min(448px, calc(100vw - 32px));
padding: 0;
overflow: hidden;
border: 0;
border-radius: 16px;
background: var(--cg-menu-bg, #ffffff);
color: var(--cg-text, #0d0d0d);
box-shadow: var(--cg-dialog-shadow);
font-size: var(--ds-text-body-16);
line-height: 24px;
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.985);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
will-change: opacity, transform;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog[data-motion-state="open"] {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog[data-motion-state="closing"] {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.985);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog::backdrop {
background: rgba(0, 0, 0, 0.16);
opacity: 0;
transition: opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog[data-motion-state="open"]::backdrop {
opacity: 1;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog[data-motion-state="closing"]::backdrop {
opacity: 0;
}
html[data-theme="dark"] body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog::backdrop {
background: rgba(0, 0, 0, 0.52);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-shell {
display: flex;
flex-direction: column;
width: 100%;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-head {
display: flex;
min-height: 52px;
align-items: center;
justify-content: space-between;
padding: 10px 10px 10px 16px;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-head h2 {
margin: 0;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-title-18);
font-weight: 400;
line-height: 28px;
letter-spacing: 0;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-body {
padding: 4px 16px 16px;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-primary {
margin: 0;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-body-16);
line-height: 24px;
letter-spacing: 0;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-primary strong {
font-weight: 600;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-memory-note {
margin: 8px 0 0;
color: var(--cg-muted, #8f8f8f);
font-size: var(--ds-text-body-14);
line-height: 20px;
letter-spacing: 0;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-memory-note button {
border: 0;
padding: 0;
background: transparent;
color: inherit;
cursor: pointer;
font: inherit;
text-decoration: underline;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-actions {
display: flex;
justify-content: flex-end;
gap: 12px;
margin-top: 16px;
padding: 0;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-cancel,
body.chatgpt-reference-v1 .chatgpt-delete-confirm-danger,
body.chatgpt-reference-v1 .chatgpt-delete-confirm-primary-action {
min-width: 50px;
height: 36px;
padding: 0 12px;
border-radius: var(--ds-radius-pill, 999px);
font: inherit;
font-size: var(--ds-text-body-14);
font-weight: 500;
line-height: 20px;
cursor: pointer;
transition:
background-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
border-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
transform var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-cancel {
border: 1px solid rgba(0, 0, 0, 0.15);
background: #ffffff;
color: var(--cg-text);
}
html[data-theme="dark"] body.chatgpt-reference-v1 .chatgpt-delete-confirm-cancel {
border-color: var(--cg-menu-border);
background: var(--cg-menu-bg);
color: var(--cg-text);
}
html[data-theme="dark"] body.chatgpt-reference-v1 .chatgpt-settings-tabs button:hover,
html[data-theme="dark"] body.chatgpt-reference-v1 .chatgpt-settings-tabs button.is-active {
background: var(--cg-hover);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-cancel:hover {
background: var(--cg-hover-soft, #f4f4f4);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-danger {
border: 1px solid transparent;
background: var(--cg-danger-bg);
color: #ffffff;
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-danger:hover {
border-color: transparent;
background: var(--cg-danger-bg-hover);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-primary-action {
border: 1px solid transparent;
background: var(--cg-send-bg);
color: var(--cg-send-fg);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-primary-action:hover {
border-color: transparent;
background: var(--cg-send-bg);
}
body.chatgpt-reference-v1 .chatgpt-delete-confirm-cancel:active,
body.chatgpt-reference-v1 .chatgpt-delete-confirm-danger:active,
body.chatgpt-reference-v1 .chatgpt-delete-confirm-primary-action:active {
transform: scale(0.985);
}
body.chatgpt-reference-v1 .message-list {
width: 100%;
max-width: none;
margin: 0;
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
overscroll-behavior: contain;
padding-right: max(24px, calc((100% - 768px) / 2));
padding-left: max(24px, calc((100% - 768px) / 2));
scrollbar-gutter: stable;
}
html[data-chat-state="active"] body.chatgpt-reference-v1 .message-list,
html[data-chat-state="loading"] body.chatgpt-reference-v1 .message-list {
grid-row: 1;
padding-top: 72px;
padding-bottom: 24px;
}
body.chatgpt-reference-v1 .recent-item.is-active,
body.chatgpt-reference-v1 .recent-item.is-active:hover {
background: var(--cg-sidebar-active-bg);
}
body.chatgpt-reference-v1 .recent-item.is-active .recent-primary {
color: var(--cg-text);
}
body.chatgpt-reference-v1 .recent-item.is-active .recent-actions {
background: linear-gradient(90deg, color-mix(in srgb, var(--cg-sidebar-active-bg) 0%, transparent), var(--cg-sidebar-active-bg) var(--chatgpt-recent-action-fade));
}
html[data-theme="dark"] body.chatgpt-reference-v1 .recent-item.is-active .recent-actions {
background: linear-gradient(90deg, color-mix(in srgb, var(--cg-sidebar-active-bg) 0%, transparent), var(--cg-sidebar-active-bg) var(--chatgpt-recent-action-fade));
}
body.chatgpt-reference-v1 .composer-surface textarea:focus,
body.chatgpt-reference-v1 .composer-surface textarea:focus-visible {
border-color: transparent;
box-shadow: none;
outline: none;
}
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:focus-within,
body.chatgpt-reference-v1 .chatgpt-composer-shell:focus-within {
border-color: var(--cg-composer-border);
box-shadow: var(--cg-shadow);
outline: none;
}
body.chatgpt-reference-v1 .chatgpt-more-menu button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-account-menu button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-recent-menu button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-conversation-menu button:focus-visible,
body.chatgpt-reference-v1 .recent-action:focus-visible,
body.chatgpt-reference-v1 .composer-menu-item:focus-visible,
body.chatgpt-reference-v1 .reasoning-menu-item:focus-visible,
body.chatgpt-reference-v1 .chatgpt-settings-tabs button:focus-visible,
body.chatgpt-reference-v1 .settings-combobox:focus-visible,
body.chatgpt-reference-v1 .settings-switch:focus-visible,
body.chatgpt-reference-v1 .chatgpt-search-row:focus-visible,
body.chatgpt-reference-v1 .chatgpt-share-close:focus-visible {
outline: 1px solid var(--cg-focus-visible-ring);
outline-offset: -1px;
background: var(--cg-focus-bg);
}
body.chatgpt-reference-v1 .chatgpt-share-copy:focus-visible {
outline: 1px solid var(--cg-focus-visible-ring);
outline-offset: 2px;
}
body.chatgpt-reference-v1 .chatgpt-settings-tabs button:focus:not(:focus-visible) {
outline: none;
outline-offset: 0;
}
body.chatgpt-reference-v1 .composer-popover,
body.chatgpt-reference-v1 .chatgpt-search-body,
body.chatgpt-reference-v1 .chatgpt-settings-tabs,
body.chatgpt-reference-v1 .chatgpt-settings-panel,
body.chatgpt-reference-v1 .message-list,
body.chatgpt-reference-v1 .recent-list {
scrollbar-color: var(--cg-scrollbar-thumb) var(--cg-scrollbar-track);
scrollbar-width: thin;
}
body.chatgpt-reference-v1 .composer-popover::-webkit-scrollbar,
body.chatgpt-reference-v1 .chatgpt-search-body::-webkit-scrollbar,
body.chatgpt-reference-v1 .chatgpt-settings-tabs::-webkit-scrollbar,
body.chatgpt-reference-v1 .chatgpt-settings-panel::-webkit-scrollbar,
body.chatgpt-reference-v1 .message-list::-webkit-scrollbar,
body.chatgpt-reference-v1 .recent-list::-webkit-scrollbar {
width: 10px;
height: 10px;
}
body.chatgpt-reference-v1 .composer-popover::-webkit-scrollbar-thumb,
body.chatgpt-reference-v1 .chatgpt-search-body::-webkit-scrollbar-thumb,
body.chatgpt-reference-v1 .chatgpt-settings-tabs::-webkit-scrollbar-thumb,
body.chatgpt-reference-v1 .chatgpt-settings-panel::-webkit-scrollbar-thumb,
body.chatgpt-reference-v1 .message-list::-webkit-scrollbar-thumb,
body.chatgpt-reference-v1 .recent-list::-webkit-scrollbar-thumb {
border: 3px solid transparent;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-scrollbar-thumb);
background-clip: content-box;
}
html[data-theme="dark"] .chatgpt-reference-v1 ::selection {
background: #ffffff;
color: #000000;
}
/* WIZON motion grammar layer: Apple-like continuity on top of WDS spring tokens. */
.chatgpt-reference-v1 {
--wizon-motion-effect-fast: var(--wizon-ai-ease-enter, var(--wizon-ai-motion-effect-fast, var(--wds-spring-effect-fast, var(--wds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)))));
--wizon-motion-effect-ease: var(--wizon-ai-ease-move, var(--wizon-ai-motion-effect-ease, var(--wds-spring-effect-default, var(--wds-ease-out, cubic-bezier(0.16, 1, 0.3, 1)))));
--wizon-motion-spatial-ease: var(--wizon-ai-ease-move, var(--wizon-ai-motion-spatial-ease, var(--wds-spring-spatial-default, var(--wds-ease-emphasized-decelerate, cubic-bezier(0.05, 0.7, 0.1, 1)))));
--wizon-motion-micro-duration: var(--wizon-ai-transition-basic-duration, var(--wizon-ai-motion-micro-duration, var(--wds-spring-effect-fast-duration, 124ms)));
--wizon-motion-surface-duration: var(--wizon-ai-motion-surface-duration, var(--wds-spring-effect-default-duration, 188ms));
--wizon-motion-panel-duration: var(--wizon-ai-motion-panel-duration, var(--wds-spring-spatial-default-duration, 372ms));
--wizon-message-enter-duration: var(--wizon-ai-message-enter-duration, 420ms);
--wizon-message-action-delay: var(--wizon-ai-message-action-delay, 92ms);
}
@keyframes chatgpt-message-entrance {
from {
opacity: 0;
transform: translate3d(0, 10px, 0) scale(0.992);
filter: blur(1.5px);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
filter: blur(0);
}
}
@keyframes chatgpt-pending-breathe {
0%,
100% {
opacity: 0.46;
transform: scale(0.92);
}
50% {
opacity: 1;
transform: scale(1.08);
}
}
@keyframes chatgpt-action-rise {
from {
opacity: 0;
transform: translate3d(0, 6px, 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
body.chatgpt-reference-v1 .message {
transform-origin: center bottom;
will-change: opacity, transform;
}
body.chatgpt-reference-v1 .message[data-message-motion="enter"] {
animation: chatgpt-message-entrance var(--wizon-message-enter-duration) var(--wizon-motion-spatial-ease) both;
}
body.chatgpt-reference-v1 .message.pending .thinking-inline {
animation: chatgpt-pending-breathe 1180ms var(--wizon-motion-effect-ease) infinite;
transform-origin: center;
}
body.chatgpt-reference-v1 .message[data-message-state="pending"] .answer-activity {
transition:
background-color var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
border-color var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
}
body.chatgpt-reference-v1 .message[data-message-state="complete"] .message-actions {
animation: chatgpt-action-rise var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease) both;
animation-delay: var(--wizon-message-action-delay);
}
body.chatgpt-reference-v1 .app-shell {
transition: grid-template-columns var(--wizon-motion-panel-duration) var(--wizon-motion-spatial-ease);
}
body.chatgpt-reference-v1 .sidebar,
body.chatgpt-reference-v1 .chatgpt-sidebar-rail {
opacity: 1;
transform: translate3d(0, 0, 0);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-panel-duration) var(--wizon-motion-spatial-ease);
will-change: opacity, transform;
}
body.chatgpt-reference-v1 .sidebar[data-motion-state="opening"],
body.chatgpt-reference-v1 .sidebar[data-motion-state="closing"] {
opacity: 0;
transform: translate3d(-8px, 0, 0);
}
body.chatgpt-reference-v1 .sidebar[data-motion-state="open"],
body.chatgpt-reference-v1 .chatgpt-sidebar-rail[data-motion-state="open"] {
opacity: 1;
transform: translate3d(0, 0, 0);
}
body.chatgpt-reference-v1 .chatgpt-sidebar-rail[data-motion-state="opening"],
body.chatgpt-reference-v1 .chatgpt-sidebar-rail[data-motion-state="closing"] {
opacity: 0;
transform: translate3d(-4px, 0, 0) scale(0.985);
}
body.chatgpt-reference-v1[data-sidebar-transition="collapsing"] .sidebar,
body.chatgpt-reference-v1[data-sidebar-transition="expanding"] .sidebar {
position: absolute;
inset: 0 auto 0 0;
z-index: 120;
width: min(260px, calc(100vw - 52px));
height: 100dvh;
pointer-events: none;
}
body.chatgpt-reference-v1[data-sidebar-transition="collapsing"] .chatgpt-sidebar-rail,
body.chatgpt-reference-v1[data-sidebar-transition="expanding"] .chatgpt-sidebar-rail {
display: flex;
}
body.chatgpt-reference-v1[data-sidebar-transition] .chatgpt-tooltip {
display: none !important;
opacity: 0 !important;
visibility: hidden !important;
}
.chatgpt-reference-v1 .chatgpt-sidebar-link,
.chatgpt-reference-v1 .new-chat-button,
.chatgpt-reference-v1 .theme-toggle,
.chatgpt-reference-v1 .nav-item,
.chatgpt-reference-v1 .chatgpt-icon-button,
.chatgpt-reference-v1 .chatgpt-rail-button,
.chatgpt-reference-v1 .chatgpt-account-button,
.chatgpt-reference-v1 .chatgpt-recent-header-action,
.chatgpt-reference-v1 .recent-action,
.chatgpt-reference-v1 .prompt-chip,
.chatgpt-reference-v1 .composer-icon-button,
.chatgpt-reference-v1 .composer-model-pill,
.chatgpt-reference-v1 .composer-send-button,
.chatgpt-reference-v1 #sendButton,
.chatgpt-reference-v1 .message-action-button,
body.chatgpt-reference-v1 .chatgpt-conversation-share,
body.chatgpt-reference-v1 .chatgpt-conversation-more {
transition:
background-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
border-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
box-shadow var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
transform var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast);
will-change: transform;
}
.chatgpt-reference-v1 .chatgpt-sidebar-link:active,
.chatgpt-reference-v1 .new-chat-button:active,
.chatgpt-reference-v1 .theme-toggle:active,
.chatgpt-reference-v1 .nav-item:active,
.chatgpt-reference-v1 .chatgpt-icon-button:active,
.chatgpt-reference-v1 .chatgpt-rail-button:active,
.chatgpt-reference-v1 .chatgpt-account-button:active,
.chatgpt-reference-v1 .chatgpt-recent-header-action:active,
.chatgpt-reference-v1 .recent-action:active,
.chatgpt-reference-v1 .prompt-chip:active,
.chatgpt-reference-v1 .composer-icon-button:active,
.chatgpt-reference-v1 .composer-model-pill:active,
.chatgpt-reference-v1 .composer-send-button:active,
.chatgpt-reference-v1 #sendButton:active,
.chatgpt-reference-v1 .message-action-button:active,
body.chatgpt-reference-v1 .chatgpt-conversation-share:active,
body.chatgpt-reference-v1 .chatgpt-conversation-more:active {
transform: scale(0.985);
}
.chatgpt-reference-v1 .chatgpt-more-menu,
.chatgpt-reference-v1 .chatgpt-account-menu,
.chatgpt-reference-v1 .chatgpt-recent-menu,
.chatgpt-reference-v1 .composer-popover,
.chatgpt-reference-v1 .reasoning-popover,
body.chatgpt-reference-v1 .chatgpt-conversation-menu {
--wizon-popover-y: 6px;
opacity: 0;
pointer-events: none;
transform: translate3d(0, var(--wizon-popover-y, 6px), 0) scale(0.985);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
will-change: opacity, transform;
}
.chatgpt-reference-v1 .chatgpt-more-menu,
.chatgpt-reference-v1 .chatgpt-recent-menu,
body.chatgpt-reference-v1 .chatgpt-conversation-menu {
transform-origin: right top;
}
.chatgpt-reference-v1 .chatgpt-account-menu {
transform-origin: left bottom;
}
.chatgpt-reference-v1 .composer-popover {
transform-origin: left bottom;
}
.chatgpt-reference-v1 .reasoning-popover {
transform-origin: right bottom;
}
.chatgpt-reference-v1 .reasoning-model-menu {
transform-origin: left bottom;
}
.chatgpt-reference-v1 .chatgpt-more-menu[data-motion-state="open"],
.chatgpt-reference-v1 .chatgpt-account-menu[data-motion-state="open"],
.chatgpt-reference-v1 .chatgpt-recent-menu[data-motion-state="open"],
.chatgpt-reference-v1 .composer-popover[data-motion-state="open"],
.chatgpt-reference-v1 .reasoning-popover[data-motion-state="open"],
body.chatgpt-reference-v1 .chatgpt-conversation-menu[data-motion-state="open"] {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0) scale(1);
}
.chatgpt-reference-v1 .chatgpt-more-menu[data-motion-state="closing"],
.chatgpt-reference-v1 .chatgpt-account-menu[data-motion-state="closing"],
.chatgpt-reference-v1 .chatgpt-recent-menu[data-motion-state="closing"],
.chatgpt-reference-v1 .composer-popover[data-motion-state="closing"],
.chatgpt-reference-v1 .reasoning-popover[data-motion-state="closing"],
body.chatgpt-reference-v1 .chatgpt-conversation-menu[data-motion-state="closing"] {
opacity: 0;
pointer-events: none;
transform: translate3d(0, var(--wizon-popover-y, 6px), 0) scale(0.985);
}
.chatgpt-reference-v1 .chatgpt-more-menu button,
.chatgpt-reference-v1 .chatgpt-account-menu button,
.chatgpt-reference-v1 .chatgpt-recent-menu button,
.chatgpt-reference-v1 .composer-menu-item,
.chatgpt-reference-v1 .reasoning-menu-item,
body.chatgpt-reference-v1 .chatgpt-conversation-menu button {
transition:
background-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
transform var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast);
}
.chatgpt-reference-v1 .chatgpt-more-menu button:active,
.chatgpt-reference-v1 .chatgpt-account-menu button:active,
.chatgpt-reference-v1 .chatgpt-recent-menu button:active,
.chatgpt-reference-v1 .composer-menu-item:active,
.chatgpt-reference-v1 .reasoning-menu-item:active,
body.chatgpt-reference-v1 .chatgpt-conversation-menu button:active {
transform: scale(0.99);
}
.chatgpt-reference-v1 .chatgpt-settings-dialog[open] {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.985);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
will-change: opacity, transform;
}
.chatgpt-reference-v1 .chatgpt-settings-dialog[data-motion-state="open"] {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.chatgpt-reference-v1 .chatgpt-settings-dialog[data-motion-state="closing"] {
opacity: 0;
transform: translate3d(0, 12px, 0) scale(0.985);
}
.chatgpt-reference-v1 .chatgpt-settings-dialog::backdrop {
opacity: 0;
transition: opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease);
}
.chatgpt-reference-v1 .chatgpt-settings-dialog[data-motion-state="open"]::backdrop {
opacity: 1;
}
.chatgpt-reference-v1 .chatgpt-settings-dialog[data-motion-state="closing"]::backdrop {
opacity: 0;
}
body.chatgpt-reference-v1 .context-pane {
position: fixed;
top: 16px;
right: 16px;
bottom: 16px;
z-index: 55;
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
width: min(420px, calc(100vw - 32px));
min-width: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-lg, 18px);
background: var(--cg-menu-bg);
color: var(--cg-text);
box-shadow: 0 28px 80px rgba(0, 0, 0, 0.18), 0 8px 28px rgba(0, 0, 0, 0.10);
opacity: 0;
pointer-events: none;
transform: translate3d(24px, 0, 0) scale(0.985);
transform-origin: right center;
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-panel-duration) var(--wizon-motion-spatial-ease);
will-change: opacity, transform;
}
body.chatgpt-reference-v1 .context-pane[hidden] {
display: none;
}
body.chatgpt-reference-v1 .context-pane[data-motion-state="open"] {
opacity: 1;
pointer-events: auto;
transform: translate3d(0, 0, 0) scale(1);
}
body.chatgpt-reference-v1 .context-pane[data-motion-state="closing"] {
opacity: 0;
pointer-events: none;
transform: translate3d(24px, 0, 0) scale(0.985);
}
body.side-panel-open.chatgpt-reference-v1 .chat-pane {
transition: filter var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease);
}
body.chatgpt-reference-v1 .chatgpt-side-panel-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 16px;
min-height: 64px;
padding: 14px 16px;
border-bottom: 1px solid var(--cg-menu-border);
}
body.chatgpt-reference-v1 .chatgpt-side-panel-head h2 {
margin: 0;
color: var(--cg-text);
font-size: var(--ds-text-title-18);
font-weight: 600;
line-height: 24px;
letter-spacing: 0;
}
body.chatgpt-reference-v1 .chatgpt-side-panel-kicker {
margin: 0 0 2px;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
font-weight: 500;
line-height: 16px;
letter-spacing: 0;
}
body.chatgpt-reference-v1 .context-pane .tabs {
display: flex;
gap: 6px;
padding: 10px 12px;
overflow-x: auto;
border-bottom: 1px solid var(--cg-menu-border);
scrollbar-width: none;
}
body.chatgpt-reference-v1 .context-pane .tabs::-webkit-scrollbar {
display: none;
}
body.chatgpt-reference-v1 .context-pane .tab-button {
flex: 0 0 auto;
min-height: 32px;
padding: 0 12px;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: transparent;
color: var(--cg-text-soft);
font-size: var(--ds-text-caption-13);
font-weight: 500;
line-height: 18px;
}
body.chatgpt-reference-v1 .context-pane .tab-button:hover,
body.chatgpt-reference-v1 .context-pane .tab-button.active {
background: var(--cg-hover);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .context-pane .tab-content {
min-height: 0;
overflow-x: hidden;
overflow-y: auto;
padding: 16px;
overscroll-behavior: contain;
scrollbar-gutter: stable;
}
body.chatgpt-reference-v1 .context-pane .panel-block {
margin: 0 0 14px;
border-color: var(--cg-menu-border);
background: var(--cg-surface);
color: var(--cg-text);
}
html[data-theme="dark"] body.chatgpt-reference-v1 .context-pane {
box-shadow: 0 30px 90px rgba(0, 0, 0, 0.52), 0 8px 30px rgba(0, 0, 0, 0.36);
}
.chatgpt-reference-v1 .message-list[hidden],
.chatgpt-reference-v1 .chatgpt-composer-shell[hidden],
.chatgpt-reference-v1 .chatgpt-prompt-shelf[hidden] {
display: none !important;
}
.chatgpt-reference-v1.portal-route-open .chat-pane {
display: block;
min-height: 100vh;
overflow-y: auto;
}
/* 20260706-projects-route-no-home-composer-qa: ChatGPT route pages do not show the home chat prompt. */
.chatgpt-reference-v1.portal-route-open .message-list,
.chatgpt-reference-v1.portal-route-open .chatgpt-composer-shell,
.chatgpt-reference-v1.portal-route-open .composer-surface.chatgpt-composer-shell,
.chatgpt-reference-v1.portal-route-open .chatgpt-prompt-shelf,
/* #trustPanel is a .chatgpt-route-page too, but it is rendered as the LAST child of .chat-pane
(after the composer) — NOT a preceding sibling of .message-list — so it never matches this
thread-hide rule. Excluding it here with an ID would raise this rule's specificity and beat the
docked-file-panel's message-list override, so we keep the selector ID-free. */
.chatgpt-reference-v1 .chatgpt-route-page:not([hidden]) ~ .message-list,
.chatgpt-reference-v1 .chatgpt-route-page:not([hidden]) ~ .chatgpt-composer-shell,
.chatgpt-reference-v1 .chatgpt-route-page:not([hidden]) ~ .composer-surface.chatgpt-composer-shell,
.chatgpt-reference-v1 .chatgpt-route-page:not([hidden]) ~ .chatgpt-prompt-shelf,
html[data-chat-state="route"] body.chatgpt-reference-v1 .message-list,
html[data-chat-state="route"] body.chatgpt-reference-v1 .chatgpt-composer-shell,
html[data-chat-state="route"] body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell,
html[data-chat-state="route"] body.chatgpt-reference-v1 .chatgpt-prompt-shelf,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .message-list,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-composer-shell,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-prompt-shelf {
display: none !important;
}
.chatgpt-reference-v1 .chatgpt-route-page[hidden] {
display: none;
}
.chatgpt-reference-v1 .chatgpt-route-page {
--chatgpt-route-page-width: min(var(--wizon-ai-chat-max-width), calc(100% - (var(--wizon-ai-thread-gutter) * 6)));
--chatgpt-route-page-top: calc(var(--wizon-ai-space-unit) * 28);
--chatgpt-route-page-bottom: var(--ds-space-10, 64px);
--chatgpt-route-gap-lg: var(--ds-space-8, 40px);
--chatgpt-route-gap-md: var(--ds-space-6, 24px);
--chatgpt-route-gap-sm: var(--ds-space-3, 12px);
--chatgpt-route-gap-xs: var(--ds-space-2, 8px);
--chatgpt-route-gap-2xs: calc(var(--wizon-ai-space-unit) * 1.5);
--chatgpt-route-control-height: var(--wizon-ai-menu-row-height);
--chatgpt-route-control-pad-x: calc(var(--wizon-ai-space-unit) * 3.5);
--chatgpt-route-control-pad-y: var(--ds-space-2, 8px);
--chatgpt-route-search-width: calc(var(--wizon-ai-space-unit) * 60);
--chatgpt-route-search-icon-column: calc(var(--wizon-ai-space-unit) * 4.5);
--chatgpt-route-search-font-size: var(--wds-font-size-body-2, 14px);
--chatgpt-route-search-line-height: var(--wds-line-height-label, 20px);
--chatgpt-route-row-height: calc(var(--wizon-ai-space-unit) * 16.5);
--chatgpt-route-row-head-height: var(--wizon-ai-menu-row-height);
--chatgpt-route-row-icon-size: var(--wizon-ai-action-target-sm);
--chatgpt-route-radius-control: var(--wizon-ai-radius-control);
--chatgpt-route-radius-lg: var(--wizon-ai-radius-popover);
--chatgpt-route-radius-pill: var(--wizon-ai-radius-pill);
--chatgpt-route-body-font-size: var(--wds-font-size-body-2);
--chatgpt-route-body-line-height: var(--wds-line-height-label);
--chatgpt-route-title-size: var(--wds-font-size-headline-m, 1.75rem);
width: var(--chatgpt-route-page-width);
margin: 0 auto;
padding: var(--chatgpt-route-page-top) 0 var(--chatgpt-route-page-bottom);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-route-page-inner {
display: grid;
gap: var(--chatgpt-route-gap-lg);
}
/* The "새로 만들기" plus glyph only appears when the button collapses to an icon in the
docked panel header; the full-width library page keeps the labelled "새로 만들기 v" pill. */
.chatgpt-reference-v1 .chatgpt-route-primary-plus {
display: none;
}
.chatgpt-reference-v1 .chatgpt-route-primary-plus svg {
width: 20px;
height: 20px;
}
/* 20260710-conversation-files-desktop-dock: on desktop the chat-scoped file view (docs/153)
docks as a right rail so the conversation stays visible on the left, instead of taking over
the whole screen like mobile does. Body class is set only for fine pointers (see
syncPortalRouteSurfaceVisibility), so mobile/tablet keep the full-screen route. The chat-pane
gets a matching right padding; the route page is pinned absolutely into that reserved strip,
so in-flow chat content and the rail never overlap. */
body.library-scope-docked.chatgpt-reference-v1 .chat-pane {
position: relative;
padding-right: clamp(360px, 38%, 520px);
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage.chatgpt-route-page {
position: absolute;
inset: 0 0 0 auto;
width: clamp(360px, 38%, 520px);
margin: 0;
max-width: none;
padding: 20px 20px calc(20px + var(--wizon-safe-bottom, 0px));
overflow-y: auto;
overflow-x: hidden;
background: var(--cg-menu-bg, var(--bg));
border-left: 1px solid var(--line);
box-shadow: -14px 0 34px rgba(0, 0, 0, 0.06);
z-index: 40;
/* the route head (title + fixed-width search + 새로 만들기) is built for a wide page;
in the narrow rail let it wrap and the search go full-width. */
--chatgpt-route-search-width: 100%;
}
/* Docked header matches the mobile pattern: title + "새로 만들기" collapse to a "+" icon
(with hover tooltip) on row 1, and the search goes full-width on row 2. display:contents
dissolves the actions wrapper so h1 / 새로 만들기 / search can be placed on the grid. */
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-page-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"title new"
"search search";
align-items: center;
column-gap: 8px;
row-gap: 12px;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-page-head > h1 {
grid-area: title;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-page-actions {
display: contents;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-search {
grid-area: search;
width: 100%;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-library-menu-anchor {
grid-area: new;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-primary {
width: 36px;
height: 36px;
min-width: 36px;
padding: 0;
gap: 0;
justify-content: center;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-primary-plus {
display: inline-flex;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-primary-label,
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-primary-caret {
display: none;
}
/* keep the conversation "..." actions clear of the docked rail */
body.library-scope-docked.chatgpt-reference-v1 .chatgpt-conversation-actions {
right: calc(clamp(360px, 38%, 520px) + 22px);
}
/* 20260710-dock-motion: the desktop chat-scoped file rail is NON-modal — the conversation stays
fully visible, scrollable and interactive on the left (no dimming scrim). The rail slides in/out
from the right with the same offcanvas motion as the left sidebar drawer. Clicking the empty
chat background closes it (handleDockBackgroundClick); the closing class runs the exit slide. */
body.library-scope-docked.chatgpt-reference-v1 #portalPage.chatgpt-route-page {
animation: wizon-dock-in var(--wds-spring-spatial-default-duration, 372ms)
var(--wds-spring-effect-default, cubic-bezier(0.16, 1, 0.3, 1));
}
body.library-dock-closing.chatgpt-reference-v1 #portalPage.chatgpt-route-page {
animation: wizon-dock-out var(--wizon-sheet-exit-ms, 300ms)
var(--wizon-sheet-exit-ease, cubic-bezier(0.33, 0, 0.2, 1)) forwards;
}
@keyframes wizon-dock-in {
from { translate: 100% 0; }
to { translate: 0 0; }
}
@keyframes wizon-dock-out {
from { translate: 0 0; }
to { translate: 100% 0; }
}
@media (prefers-reduced-motion: reduce) {
body.library-scope-docked.chatgpt-reference-v1 #portalPage.chatgpt-route-page,
body.library-dock-closing.chatgpt-reference-v1 #portalPage.chatgpt-route-page {
animation: none !important;
}
}
/* 20260710-dock-chat-visible: the global "a route page is open → hide the home composer +
message-list" rules (display:none !important) also blank the conversation in the docked file
rail. In the docked view we WANT the chat visible + scrollable on the left, so a more-specific
override (extra .library-scope-docked class → wins on specificity, not just source order)
restores the message list and composer. The chat-pane already reserves the right strip
(padding-right) so the two never overlap. */
html[data-portal-route-open="true"] body.library-scope-docked.chatgpt-reference-v1 .message-list {
display: block !important;
}
/* 20260710-dock-card-redesign: the desktop chat-scoped file view is a FLOATING ROUNDED CARD on the
right (over codex's flush full-height rail), matching the Codex/ChatGPT reference — margin on all
sides, rounded corners, soft shadow. It reuses the mobile-collapsed route header and adds a
leading "‹" back button (the desktop equivalent of the mobile topbar back). The chat stays
visible on the left. These override codex's docked #portalPage rules (later source order). */
/* The card OVERLAYS the empty right gutter — it does NOT reserve space, so the centered
conversation column keeps its exact position/width (no reflow). Override codex's reservation. */
body.library-scope-docked.chatgpt-reference-v1 .chat-pane {
padding-right: 0;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage.chatgpt-route-page {
inset: 12px 12px 12px auto;
width: clamp(360px, 34%, 480px);
border: 1px solid var(--line);
border-radius: 16px;
box-shadow: 0 16px 48px rgba(0, 0, 0, 0.16);
}
/* add a leading "back" column to codex's docked header grid (title | new / search) */
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-route-page-head {
grid-template-columns: auto minmax(0, 1fr) auto;
grid-template-areas:
"back title new"
"search search search";
}
.chatgpt-reference-v1 .chatgpt-library-dock-back {
display: none;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-library-dock-back {
grid-area: back;
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
margin-right: 2px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--cg-text);
cursor: pointer;
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-library-dock-back:hover {
background: var(--cg-hover-soft);
}
body.library-scope-docked.chatgpt-reference-v1 #portalPage .chatgpt-library-dock-back svg {
width: 22px;
height: 22px;
}
.chatgpt-reference-v1 .chatgpt-route-page-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chatgpt-route-gap-md);
}
.chatgpt-reference-v1 .chatgpt-route-page-head h1 {
margin: 0;
color: var(--cg-text);
font-size: var(--chatgpt-route-title-size);
font-weight: var(--wds-font-weight-regular);
letter-spacing: 0;
line-height: calc(var(--chatgpt-route-title-size) + (var(--wizon-ai-space-unit) * 2));
}
.chatgpt-reference-v1 .chatgpt-route-page-head p {
margin: var(--chatgpt-route-gap-sm) 0 0;
color: var(--cg-muted);
font-size: var(--wds-font-size-body-1);
line-height: calc(var(--wds-font-size-body-1) * 1.5);
}
.chatgpt-reference-v1 .chatgpt-route-page-actions {
display: flex;
align-items: center;
gap: var(--chatgpt-route-gap-sm);
}
.chatgpt-reference-v1 .chatgpt-route-search {
display: inline-grid;
grid-template-columns: var(--chatgpt-route-search-icon-column) minmax(0, 1fr);
align-items: center;
gap: var(--chatgpt-route-gap-xs);
width: var(--chatgpt-route-search-width);
min-height: var(--chatgpt-route-control-height);
padding: 0 var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-pill);
background: var(--cg-surface);
color: var(--cg-muted-2);
}
.chatgpt-reference-v1 .chatgpt-route-search input {
min-width: 0;
min-height: 0;
height: calc(var(--chatgpt-route-control-height) - 2px);
padding: 0;
border: 0;
outline: none;
background: transparent;
color: var(--cg-text);
box-shadow: none;
font: inherit;
font-size: var(--chatgpt-route-search-font-size);
line-height: var(--chatgpt-route-search-line-height);
}
.chatgpt-reference-v1 .chatgpt-route-search input:focus,
.chatgpt-reference-v1 .chatgpt-route-search input:focus-visible {
border-color: transparent;
outline: none;
box-shadow: none;
}
.chatgpt-reference-v1 .chatgpt-route-primary,
.chatgpt-reference-v1 .chatgpt-route-filter {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--chatgpt-route-gap-2xs);
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-control-pad-y) var(--chatgpt-route-control-pad-x);
border: 0;
border-radius: var(--chatgpt-route-radius-pill);
background: var(--cg-send-bg);
color: var(--cg-send-fg);
font-size: var(--chatgpt-route-body-font-size);
font-weight: var(--wds-font-weight-medium);
letter-spacing: 0;
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-route-filter {
border: 1px solid var(--cg-menu-border);
background: var(--cg-surface);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-route-tabs {
display: flex;
align-items: center;
gap: var(--chatgpt-route-gap-2xs);
}
.chatgpt-reference-v1 .chatgpt-route-tabs button {
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-control-pad-y) var(--chatgpt-route-control-pad-x);
border: 0;
border-radius: var(--chatgpt-route-radius-pill);
background: transparent;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-route-tabs button.is-active {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-table {
display: grid;
gap: 0;
margin-top: calc(var(--chatgpt-route-gap-2xs) * -1);
}
.chatgpt-reference-v1 .chatgpt-library-menu-anchor {
position: relative;
display: inline-flex;
align-items: center;
}
.chatgpt-reference-v1 .chatgpt-library-popover {
position: absolute;
z-index: 35;
top: calc(100% + var(--chatgpt-route-gap-xs));
right: 0;
display: grid;
min-width: calc(var(--wizon-ai-space-unit) * 50);
padding: var(--chatgpt-route-gap-2xs);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
box-shadow: var(--cg-shadow-float-lg);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-popover strong {
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm) var(--chatgpt-route-gap-2xs);
color: var(--cg-muted);
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-medium);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-library-menu-item {
display: flex;
align-items: center;
gap: var(--chatgpt-route-gap-xs);
width: 100%;
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm);
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-text);
font-size: var(--chatgpt-route-body-font-size);
font-weight: var(--wds-font-weight-regular);
line-height: var(--chatgpt-route-body-line-height);
text-align: left;
}
.chatgpt-reference-v1 .chatgpt-library-menu-item.is-selected {
color: var(--cg-text);
font-weight: var(--wds-font-weight-medium);
}
.chatgpt-reference-v1 .chatgpt-library-menu-check {
display: inline-grid;
place-items: center;
width: var(--wizon-ai-icon-size-md);
height: var(--wizon-ai-icon-size-md);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-menu-item:hover,
.chatgpt-reference-v1 .chatgpt-library-menu-item:focus-visible {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-library-menu-item-danger {
color: var(--cg-danger-fg);
}
.chatgpt-reference-v1 .chatgpt-library-menu-item-muted {
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-library-filter-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chatgpt-route-gap-md);
}
/* 20260710-conversation-files: scope bar for "채팅 내 파일 보기" (library route scoped to one chat). */
.chatgpt-reference-v1 .chatgpt-library-scope-bar {
display: flex;
margin: 4px 0 2px;
}
.chatgpt-reference-v1 .chatgpt-library-scope-chip {
display: inline-flex;
align-items: center;
gap: 6px;
height: 30px;
padding: 0 6px 0 10px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-hover-soft);
color: var(--cg-text);
font-size: var(--ds-text-caption-13);
font-weight: 500;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-scope-chip svg {
width: 16px;
height: 16px;
}
.chatgpt-reference-v1 .chatgpt-library-scope-clear {
display: inline-flex;
align-items: center;
justify-content: center;
width: 22px;
height: 22px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
background: transparent;
color: var(--cg-muted-2);
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-library-scope-clear:hover {
background: var(--cg-hover);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-scope-clear svg {
width: 15px;
height: 15px;
}
.chatgpt-reference-v1 .chatgpt-library-scope-note {
margin: 8px 2px 0;
font-size: var(--ds-text-caption-12);
color: var(--cg-muted-2);
}
.chatgpt-reference-v1 .chatgpt-library-view-controls {
display: inline-flex;
align-items: center;
gap: var(--chatgpt-route-gap-2xs);
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-library-view-control {
position: relative;
display: inline-grid;
place-items: center;
width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
border: 0;
border-radius: var(--chatgpt-route-radius-pill);
background: transparent;
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-library-view-control:hover,
.chatgpt-reference-v1 .chatgpt-library-view-control.is-active {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-view-control[aria-pressed="true"] {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-filter-count {
position: absolute;
right: calc(var(--chatgpt-route-gap-2xs) * -1);
top: calc(var(--chatgpt-route-gap-2xs) * -1);
display: inline-grid;
place-items: center;
min-width: calc(var(--wizon-ai-space-unit) * 4);
height: calc(var(--wizon-ai-space-unit) * 4);
padding: 0 var(--chatgpt-route-gap-2xs);
border-radius: var(--chatgpt-route-radius-pill);
background: var(--cg-send-bg);
color: var(--cg-send-fg);
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-medium);
line-height: 1;
}
.chatgpt-reference-v1 .chatgpt-library-view-divider {
width: 1px;
height: var(--wizon-ai-action-target-sm);
margin: 0 var(--chatgpt-route-gap-xs);
background: var(--cg-menu-border);
}
.chatgpt-reference-v1 .chatgpt-library-action-feedback {
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 [data-library-bulk-bar] {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--chatgpt-route-gap-xs);
}
.chatgpt-reference-v1 [data-library-bulk-bar] .chatgpt-library-create-submit {
margin-left: auto;
}
.chatgpt-reference-v1 .chatgpt-library-row {
display: grid;
grid-template-columns: var(--ds-space-9, 48px) minmax(0, 1fr) calc(var(--wizon-ai-space-unit) * 40) calc(var(--wizon-ai-space-unit) * 28);
align-items: center;
width: 100%;
min-height: var(--chatgpt-route-row-height);
padding: 0;
border: 0;
border-bottom: 1px solid var(--cg-menu-border);
background: transparent;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
font-family: inherit;
line-height: var(--chatgpt-route-body-line-height);
text-align: left;
}
.chatgpt-reference-v1 .chatgpt-library-row:not(.chatgpt-library-row--head),
.chatgpt-reference-v1 .chatgpt-library-row-menu-trigger {
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-library-row:hover,
.chatgpt-reference-v1 .chatgpt-library-row:focus-visible {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-library-row:not(.chatgpt-library-row--head):active {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-row--head {
min-height: var(--chatgpt-route-row-head-height);
padding: 0;
background: transparent;
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-library-row-shell {
position: relative;
}
.chatgpt-reference-v1 .chatgpt-library-file-copy {
display: grid;
min-width: 0;
gap: 3px;
padding: 8px 12px 8px 0;
}
/* 부제(수정일 · 크기 병합)는 폰 전용 슬롯이다. 데스크톱은 열이 충분해 표가 맞으므로 숨긴다 —
숨김이라 스크린리더도 읽지 않아 date/size 열과 중복 낭독되지 않는다. 폰에서는 반대로
date/size 를 숨기고 이 줄만 남긴다(20260802-library-mobile-native-list). */
.chatgpt-reference-v1 .chatgpt-library-row-meta {
display: none;
}
.chatgpt-reference-v1 .chatgpt-library-file-name {
overflow: hidden;
color: var(--cg-text);
font-weight: var(--wds-font-weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-search-snippet {
display: flex;
align-items: center;
gap: 8px;
overflow: hidden;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
line-height: 1.35;
}
.chatgpt-reference-v1 .chatgpt-library-search-snippet > span {
display: -webkit-box;
min-width: 0;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.chatgpt-reference-v1 .chatgpt-library-search-snippet > small {
flex: 0 0 auto;
color: var(--cg-text);
font: inherit;
font-weight: var(--wds-font-weight-medium);
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-search-snippet mark {
border-radius: var(--chatgpt-route-gap-2xs);
background: color-mix(in srgb, var(--wds-brand-blue) 12%, transparent);
color: inherit;
}
.chatgpt-reference-v1 .chatgpt-library-search-status {
min-height: 18px;
margin: 0;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
.chatgpt-reference-v1 .chatgpt-library-search-status.is-error {
color: var(--cg-warning-fg);
}
.chatgpt-reference-v1 .chatgpt-library-processing-state {
overflow: hidden;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
line-height: 1.25;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-processing-state[data-state="failed"] {
color: var(--cg-danger-fg);
}
.chatgpt-reference-v1 .chatgpt-library-processing-state[data-state="background"] {
color: var(--ad-blue);
}
.chatgpt-reference-v1 .chatgpt-library-processing-state[data-state="degraded"] {
color: var(--cg-warning-fg);
}
.chatgpt-reference-v1 .chatgpt-library-processing-progress {
display: block;
appearance: none;
width: min(240px, 100%);
height: 3px;
overflow: hidden;
border: 0;
border-radius: var(--ds-radius-pill);
background: var(--cg-menu-border);
}
.chatgpt-reference-v1 .chatgpt-library-processing-progress::-webkit-progress-bar {
background: var(--cg-menu-border);
}
.chatgpt-reference-v1 .chatgpt-library-processing-progress::-webkit-progress-value,
.chatgpt-reference-v1 .chatgpt-library-processing-progress::-moz-progress-bar {
border-radius: var(--ds-radius-pill);
background: var(--ad-blue);
}
.chatgpt-reference-v1 .chatgpt-library-row.is-selected,
.chatgpt-reference-v1 .chatgpt-library-row-shell.is-selected .chatgpt-library-row {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-create-backdrop {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: var(--ds-space-6, 24px);
background: rgba(0, 0, 0, 0.38);
}
.chatgpt-reference-v1 .chatgpt-library-create-form {
display: grid;
gap: var(--chatgpt-route-gap-md);
width: min(calc(var(--wizon-ai-space-unit) * 112), calc(100vw - var(--ds-space-8, 40px)));
padding: var(--ds-space-6, 24px);
border: 1px solid var(--cg-menu-border);
border-radius: calc(var(--chatgpt-route-radius-control) + var(--chatgpt-route-gap-xs));
background: var(--cg-surface);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
color: var(--cg-text);
font-family: inherit;
}
.chatgpt-reference-v1 .chatgpt-library-create-form h2 {
margin: 0;
font-size: calc(var(--chatgpt-route-title-size) * 0.5);
font-weight: 600;
line-height: calc(var(--chatgpt-route-title-size) * 0.68);
letter-spacing: 0;
}
.chatgpt-reference-v1 .chatgpt-library-create-field {
display: grid;
gap: var(--chatgpt-route-gap-xs);
color: var(--cg-text);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-library-create-input {
min-width: 0;
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
}
.chatgpt-reference-v1 .chatgpt-library-create-input:focus-visible {
outline: 2px solid var(--cg-focus-ring, rgba(16, 163, 127, 0.45));
outline-offset: 2px;
}
.chatgpt-reference-v1 .chatgpt-library-create-actions {
display: inline-flex;
justify-content: flex-end;
align-items: center;
gap: var(--chatgpt-route-gap-xs);
}
.chatgpt-reference-v1 .chatgpt-library-create-submit,
.chatgpt-reference-v1 .chatgpt-library-create-cancel {
display: inline-grid;
place-items: center;
min-width: calc(var(--wizon-ai-space-unit) * 16);
min-height: var(--wizon-ai-action-target-sm);
padding: 0 var(--chatgpt-route-gap-sm);
border-radius: var(--chatgpt-route-radius-pill);
font: inherit;
font-weight: 600;
}
.chatgpt-reference-v1 .chatgpt-library-create-cancel {
border: 1px solid var(--cg-menu-border);
background: var(--cg-surface);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-create-submit {
border: 1px solid var(--cg-text);
background: var(--cg-text);
color: var(--cg-surface);
}
.chatgpt-reference-v1 .chatgpt-library-create-submit:hover,
.chatgpt-reference-v1 .chatgpt-library-create-submit:focus-visible,
.chatgpt-reference-v1 .chatgpt-library-create-cancel:hover,
.chatgpt-reference-v1 .chatgpt-library-create-cancel:focus-visible {
filter: brightness(0.96);
}
.chatgpt-reference-v1 .chatgpt-library-rename-backdrop {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: var(--ds-space-6, 24px);
background: rgba(0, 0, 0, 0.38);
}
.chatgpt-reference-v1 .chatgpt-library-rename-form {
display: grid;
gap: var(--chatgpt-route-gap-md);
width: min(calc(var(--wizon-ai-space-unit) * 112), calc(100vw - var(--ds-space-8, 40px)));
padding: var(--ds-space-6, 24px);
border: 1px solid var(--cg-menu-border);
border-radius: calc(var(--chatgpt-route-radius-control) + var(--chatgpt-route-gap-xs));
background: var(--cg-surface);
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.22);
color: var(--cg-text);
font-family: inherit;
}
.chatgpt-reference-v1 .chatgpt-library-rename-form h2 {
margin: 0;
font-size: calc(var(--chatgpt-route-title-size) * 0.5);
font-weight: 600;
line-height: calc(var(--chatgpt-route-title-size) * 0.68);
letter-spacing: 0;
}
.chatgpt-reference-v1 .chatgpt-library-rename-input {
min-width: 0;
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
}
.chatgpt-reference-v1 .chatgpt-library-rename-input:focus-visible {
outline: 2px solid var(--cg-focus-ring, rgba(16, 163, 127, 0.45));
outline-offset: 2px;
}
.chatgpt-reference-v1 .chatgpt-library-rename-actions {
display: inline-flex;
justify-content: flex-end;
align-items: center;
gap: var(--chatgpt-route-gap-xs);
}
.chatgpt-reference-v1 .chatgpt-library-rename-submit,
.chatgpt-reference-v1 .chatgpt-library-rename-cancel {
display: inline-grid;
place-items: center;
min-width: calc(var(--wizon-ai-space-unit) * 16);
min-height: var(--wizon-ai-action-target-sm);
padding: 0 var(--chatgpt-route-gap-sm);
border-radius: var(--chatgpt-route-radius-pill);
font: inherit;
font-weight: 600;
}
.chatgpt-reference-v1 .chatgpt-library-rename-cancel {
border: 1px solid var(--cg-menu-border);
background: var(--cg-surface);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-rename-submit {
border: 1px solid var(--cg-text);
background: var(--cg-text);
color: var(--cg-surface);
}
.chatgpt-reference-v1 .chatgpt-library-rename-submit:hover,
.chatgpt-reference-v1 .chatgpt-library-rename-submit:focus-visible,
.chatgpt-reference-v1 .chatgpt-library-rename-cancel:hover,
.chatgpt-reference-v1 .chatgpt-library-rename-cancel:focus-visible {
filter: brightness(0.96);
}
.chatgpt-reference-v1 .chatgpt-library-move-backdrop {
position: fixed;
inset: 0;
z-index: 100;
display: grid;
place-items: center;
padding: var(--ds-space-6, 24px);
background: rgba(0, 0, 0, 0.38);
}
.chatgpt-reference-v1 .chatgpt-library-move-dialog {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr) auto;
width: min(calc(var(--wizon-ai-space-unit) * 218), calc(100vw - var(--ds-space-8, 40px)));
height: min(calc(100svh - calc(var(--wizon-ai-space-unit) * 38)), calc(var(--wizon-ai-space-unit) * 157));
min-height: calc(var(--wizon-ai-space-unit) * 96);
overflow: hidden;
border: 1px solid var(--cg-menu-border);
border-radius: calc(var(--chatgpt-route-radius-control) + var(--chatgpt-route-gap-xs));
background: var(--cg-surface);
box-shadow: 0 24px 80px rgba(0, 0, 0, 0.24);
color: var(--cg-text);
font-family: inherit;
}
.chatgpt-reference-v1 .chatgpt-library-move-header {
display: flex;
align-items: center;
justify-content: space-between;
min-width: 0;
padding: var(--chatgpt-route-gap-lg) var(--chatgpt-route-gap-lg) var(--chatgpt-route-gap-sm);
}
.chatgpt-reference-v1 .chatgpt-library-move-dialog h2 {
margin: 0;
overflow: hidden;
font-size: calc(var(--chatgpt-route-title-size) * 0.5);
font-weight: 600;
line-height: calc(var(--chatgpt-route-title-size) * 0.68);
letter-spacing: 0;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-move-close {
display: inline-grid;
place-items: center;
flex: 0 0 auto;
width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
border: 0;
border-radius: var(--chatgpt-route-radius-pill);
background: transparent;
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-library-move-close:hover,
.chatgpt-reference-v1 .chatgpt-library-move-close:focus-visible {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-move-breadcrumb {
min-width: 0;
padding: 0 var(--chatgpt-route-gap-lg) var(--chatgpt-route-gap-sm);
overflow: hidden;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-move-list {
min-height: 0;
margin: 0 var(--chatgpt-route-gap-lg);
overflow: auto;
border-top: 1px solid var(--cg-menu-border);
border-bottom: 1px solid var(--cg-menu-border);
}
.chatgpt-reference-v1 .chatgpt-library-move-entry {
display: grid;
grid-template-columns: var(--chatgpt-route-row-icon-size) minmax(0, 1fr);
align-items: center;
gap: var(--chatgpt-route-gap-sm);
width: 100%;
min-height: calc(var(--wizon-ai-space-unit) * 16);
padding: 0 var(--chatgpt-route-gap-sm);
border: 0;
border-bottom: 1px solid var(--cg-menu-border);
background: transparent;
color: var(--cg-text);
font: inherit;
text-align: left;
}
.chatgpt-reference-v1 .chatgpt-library-move-entry:last-child {
border-bottom: 0;
}
.chatgpt-reference-v1 .chatgpt-library-move-entry:hover,
.chatgpt-reference-v1 .chatgpt-library-move-entry:focus-visible,
.chatgpt-reference-v1 .chatgpt-library-move-entry.is-selected {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-library-move-entry.is-disabled {
color: var(--cg-muted);
cursor: default;
}
.chatgpt-reference-v1 .chatgpt-library-move-entry.is-empty {
display: grid;
place-items: center;
min-height: calc(var(--wizon-ai-space-unit) * 24);
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-library-move-entry-icon {
display: inline-grid;
place-items: center;
width: var(--chatgpt-route-row-icon-size);
height: var(--chatgpt-route-row-icon-size);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-move-footer {
display: flex;
align-items: center;
gap: var(--chatgpt-route-gap-xs);
padding: var(--chatgpt-route-gap-md) var(--chatgpt-route-gap-lg) var(--chatgpt-route-gap-lg);
}
.chatgpt-reference-v1 .chatgpt-library-move-footer-spacer {
flex: 1 1 auto;
}
.chatgpt-reference-v1 .chatgpt-library-move-new-folder,
.chatgpt-reference-v1 .chatgpt-library-move-cancel,
.chatgpt-reference-v1 .chatgpt-library-move-submit {
display: inline-grid;
place-items: center;
min-width: calc(var(--wizon-ai-space-unit) * 16);
min-height: var(--wizon-ai-action-target-sm);
padding: 0 var(--chatgpt-route-gap-sm);
border-radius: var(--chatgpt-route-radius-pill);
font: inherit;
font-weight: 600;
}
.chatgpt-reference-v1 .chatgpt-library-move-new-folder,
.chatgpt-reference-v1 .chatgpt-library-move-cancel {
border: 1px solid var(--cg-menu-border);
background: var(--cg-surface);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-move-submit {
border: 1px solid var(--cg-text);
background: var(--cg-text);
color: var(--cg-surface);
}
.chatgpt-reference-v1 .chatgpt-library-move-new-folder:hover,
.chatgpt-reference-v1 .chatgpt-library-move-new-folder:focus-visible,
.chatgpt-reference-v1 .chatgpt-library-move-cancel:hover,
.chatgpt-reference-v1 .chatgpt-library-move-cancel:focus-visible,
.chatgpt-reference-v1 .chatgpt-library-move-submit:hover,
.chatgpt-reference-v1 .chatgpt-library-move-submit:focus-visible {
filter: brightness(0.96);
}
.chatgpt-reference-v1 .chatgpt-library-row-menu-trigger {
position: absolute;
top: 50%;
right: var(--chatgpt-route-gap-2xs);
display: inline-grid;
place-items: center;
width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
border: 0;
border-radius: var(--chatgpt-route-radius-pill);
background: transparent;
color: var(--cg-muted);
transform: translateY(-50%);
}
.chatgpt-reference-v1 .chatgpt-library-row-menu-trigger:hover,
.chatgpt-reference-v1 .chatgpt-library-row-menu-trigger:focus-visible,
.chatgpt-reference-v1 .chatgpt-library-row-menu-trigger[aria-expanded="true"] {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-file-menu {
top: calc(100% - var(--chatgpt-route-gap-2xs));
right: var(--chatgpt-route-gap-2xs);
}
.chatgpt-reference-v1 .chatgpt-library-file-icon {
display: inline-grid;
place-items: center;
width: var(--chatgpt-route-row-icon-size);
height: var(--chatgpt-route-row-icon-size);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-library-table.is-grid-view {
grid-template-columns: repeat(auto-fill, minmax(calc(var(--wizon-ai-space-unit) * 52), 1fr));
gap: var(--chatgpt-route-gap-sm);
margin-top: 0;
}
.chatgpt-reference-v1 .chatgpt-library-table.is-grid-view .chatgpt-library-row--head {
display: none;
}
.chatgpt-reference-v1 .chatgpt-library-table.is-grid-view .chatgpt-library-row-shell {
min-height: calc(var(--wizon-ai-space-unit) * 28);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
}
.chatgpt-reference-v1 .chatgpt-library-table.is-grid-view .chatgpt-library-row {
grid-template-columns: var(--chatgpt-route-row-icon-size) minmax(0, 1fr);
grid-template-rows: auto auto auto;
gap: var(--chatgpt-route-gap-2xs) var(--chatgpt-route-gap-sm);
align-content: start;
min-height: calc(var(--wizon-ai-space-unit) * 28);
padding: var(--chatgpt-route-gap-md) calc(var(--wizon-ai-action-target-sm) + var(--chatgpt-route-gap-md)) var(--chatgpt-route-gap-md) var(--chatgpt-route-gap-md);
border-bottom: 0;
}
.chatgpt-reference-v1 .chatgpt-library-table.is-grid-view .chatgpt-library-file-copy {
color: var(--cg-text);
font-weight: var(--wds-font-weight-medium);
}
.chatgpt-reference-v1 .chatgpt-library-table.is-grid-view .chatgpt-library-row-date,
.chatgpt-reference-v1 .chatgpt-library-table.is-grid-view .chatgpt-library-row-size {
grid-column: 2;
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-library-empty {
display: grid;
justify-items: center;
gap: var(--chatgpt-route-gap-sm);
padding: calc(var(--wizon-ai-space-unit) * 12) var(--chatgpt-route-gap-md);
color: var(--cg-text);
text-align: center;
}
.chatgpt-reference-v1 .chatgpt-library-empty p {
margin: 0;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-library-preview-backdrop {
position: fixed;
inset: 0;
z-index: 320;
display: flex;
background: var(--cg-surface);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-preview-dialog {
display: grid;
grid-template-rows: var(--chatgpt-header-height) minmax(0, 1fr) auto;
width: 100%;
min-width: 0;
min-height: 100svh;
background: var(--cg-surface);
outline: none;
}
.chatgpt-reference-v1 .chatgpt-library-preview-topbar {
display: grid;
grid-template-columns: var(--wizon-ai-action-target-sm) minmax(0, 1fr) auto;
align-items: center;
gap: var(--chatgpt-route-gap-md);
min-width: 0;
padding: 0 var(--chatgpt-route-gap-lg);
border-bottom: 1px solid var(--cg-menu-border);
}
.chatgpt-reference-v1 .chatgpt-library-preview-breadcrumb {
display: inline-flex;
align-items: center;
min-width: 0;
gap: var(--chatgpt-route-gap-xs);
overflow: hidden;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-preview-breadcrumb strong {
min-width: 0;
overflow: hidden;
color: var(--cg-text);
font-weight: var(--wds-font-weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-library-preview-actions {
display: inline-flex;
align-items: center;
justify-self: end;
gap: var(--chatgpt-route-gap-2xs);
}
.chatgpt-reference-v1 .chatgpt-library-preview-icon-button,
.chatgpt-reference-v1 .chatgpt-library-preview-composer-button,
.chatgpt-reference-v1 .chatgpt-library-preview-submit {
display: inline-grid;
place-items: center;
width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
border: 0;
border-radius: var(--chatgpt-route-radius-pill);
background: transparent;
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-preview-icon-button:hover,
.chatgpt-reference-v1 .chatgpt-library-preview-icon-button:focus-visible,
.chatgpt-reference-v1 .chatgpt-library-preview-composer-button:hover,
.chatgpt-reference-v1 .chatgpt-library-preview-composer-button:focus-visible {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-library-preview-stage {
display: grid;
place-items: center;
min-width: 0;
min-height: 0;
padding: var(--chatgpt-route-gap-lg);
background: var(--cg-surface);
overflow: auto;
}
.chatgpt-reference-v1 .chatgpt-library-preview-image {
display: block;
max-width: min(calc(var(--wizon-ai-space-unit) * 168), calc(100% - var(--chatgpt-route-gap-lg) * 2));
max-height: min(68svh, calc(var(--wizon-ai-space-unit) * 150));
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
object-fit: contain;
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-pane {
display: grid;
justify-items: stretch;
align-content: start;
gap: var(--chatgpt-route-gap-sm);
width: min(calc(var(--wizon-ai-space-unit) * 168), calc(100% - var(--chatgpt-route-gap-lg) * 2));
max-width: min(calc(var(--wizon-ai-space-unit) * 168), calc(100% - var(--chatgpt-route-gap-lg) * 2));
max-height: min(68svh, calc(var(--wizon-ai-space-unit) * 150));
padding: 0;
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
box-shadow: none;
text-align: left;
overflow: hidden;
}
.chatgpt-reference-v1 .chatgpt-library-preview-file-icon {
display: inline-grid;
place-items: center;
width: var(--chatgpt-route-row-icon-size);
height: var(--chatgpt-route-row-icon-size);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-title strong {
display: block;
width: 100%;
min-width: 0;
max-width: 100%;
overflow-wrap: anywhere;
word-break: break-word;
color: var(--cg-text);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-title {
display: flex;
align-items: center;
min-width: 0;
gap: var(--chatgpt-route-gap-sm);
padding: var(--chatgpt-route-gap-md) var(--chatgpt-route-gap-lg) 0;
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-title span:last-child {
color: var(--cg-muted);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-label);
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-body {
min-height: calc(var(--wizon-ai-space-unit) * 44);
max-height: min(54svh, calc(var(--wizon-ai-space-unit) * 120));
margin: var(--chatgpt-route-gap-md) 0 0;
padding: var(--chatgpt-route-gap-md) var(--chatgpt-route-gap-lg);
border: 0;
border-top: 1px solid var(--cg-menu-border);
border-radius: 0;
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
line-height: var(--chatgpt-route-body-line-height);
overflow: auto;
white-space: pre-wrap;
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-body.is-empty {
display: grid;
place-items: center;
color: var(--cg-muted);
text-align: center;
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-pane span:last-child {
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
}
.chatgpt-reference-v1 .chatgpt-library-preview-composer.chatgpt-composer-shell {
position: relative;
z-index: 1;
width: min(calc(var(--cg-chat-max-width) - (var(--cg-thread-gutter) * 2)), calc(100% - (var(--cg-thread-gutter) * 3)));
margin: 0 auto var(--chatgpt-route-gap-lg);
}
.chatgpt-reference-v1 .chatgpt-library-preview-composer .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto;
grid-template-rows: 42px;
grid-template-areas: "lead input actions";
align-items: center;
min-height: 42px;
padding: 0;
}
.chatgpt-reference-v1 .chatgpt-library-preview-composer .composer-attachment-lane {
display: none;
}
.chatgpt-reference-v1 .chatgpt-library-preview-composer .composer-textarea-scroll {
align-self: center;
display: flex;
align-items: center;
min-height: 26px;
height: 26px;
overflow-y: hidden;
}
.chatgpt-reference-v1 .chatgpt-library-preview-composer .composer-action-dock {
align-self: center;
display: inline-flex;
flex-flow: row nowrap;
align-items: center;
justify-content: flex-end;
width: auto;
min-width: 0;
min-height: 38px;
gap: 6px;
}
.chatgpt-reference-v1 .chatgpt-library-preview-prompt-input {
display: block;
width: 100%;
min-width: 0;
min-height: 26px;
height: 26px;
max-height: 26px;
padding: 0;
border: 0;
background: transparent;
color: var(--cg-text);
box-shadow: none;
font: inherit;
font-size: var(--ds-text-body-16);
line-height: 26px;
outline: none;
overflow: hidden;
resize: none;
}
.chatgpt-reference-v1 .chatgpt-library-preview-prompt-input:focus,
.chatgpt-reference-v1 .chatgpt-library-preview-prompt-input:focus-visible,
body.chatgpt-reference-v1 .chatgpt-library-preview-composer .chatgpt-library-preview-prompt-input:focus,
body.chatgpt-reference-v1 .chatgpt-library-preview-composer .chatgpt-library-preview-prompt-input:focus-visible,
body.chatgpt-reference-v1 .chatgpt-library-preview-composer:focus-within {
border-color: transparent;
outline: none;
box-shadow: none;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-prompt-input::placeholder {
color: var(--cg-input-placeholder);
}
.chatgpt-reference-v1 .chatgpt-library-preview-submit {
width: 38px;
height: 38px;
min-width: 38px;
background: var(--cg-text);
color: var(--cg-surface);
}
@media (max-width: 520px) {
.chatgpt-reference-v1 .chatgpt-library-preview-composer .composer-action-dock {
min-width: 0;
gap: 4px;
}
}
.chatgpt-reference-v1 .chatgpt-project-empty {
display: grid;
justify-items: center;
gap: calc(var(--wizon-ai-space-unit) * 4.5);
margin-top: calc(var(--wizon-ai-space-unit) * 13.5);
color: var(--cg-text);
font-size: var(--wds-font-size-body-1);
font-weight: var(--wds-font-weight-regular);
line-height: calc(var(--wds-font-size-body-1) * 1.5);
}
.chatgpt-reference-v1 .chatgpt-project-empty p {
margin: 0;
max-width: calc(var(--wizon-ai-space-unit) * 96);
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-project-action-feedback {
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-project-grid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(calc(var(--wizon-ai-space-unit) * 58), 1fr));
gap: var(--chatgpt-route-gap-sm);
}
.chatgpt-reference-v1 .chatgpt-project-card {
display: grid;
grid-template-columns: var(--wizon-ai-action-target-lg) minmax(0, 1fr);
align-items: center;
gap: var(--chatgpt-route-gap-sm);
min-height: calc(var(--wizon-ai-space-unit) * 19);
padding: var(--ds-space-4, 16px);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
text-align: left;
}
.chatgpt-reference-v1 .chatgpt-project-card:hover,
.chatgpt-reference-v1 .chatgpt-project-card:focus-visible,
.chatgpt-reference-v1 .chatgpt-project-card.is-active {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-project-card-copy {
display: grid;
gap: var(--chatgpt-route-gap-2xs);
min-width: 0;
}
.chatgpt-reference-v1 .chatgpt-project-card-copy strong,
.chatgpt-reference-v1 .chatgpt-project-card-copy small {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-project-card-copy small {
color: var(--cg-muted);
font-size: var(--wds-font-size-caption);
}
/* 20260708-project-card-manage: per-project options menu (rename / delete) + inline
rename input. The card is wrapped in a relatively-positioned shell so the ⋯ trigger
can overlay the top-right without nesting an interactive control inside the card. */
.chatgpt-reference-v1 .chatgpt-project-card-shell {
position: relative;
display: flex;
}
.chatgpt-reference-v1 .chatgpt-project-card-shell .chatgpt-project-card {
flex: 1;
min-width: 0;
padding-right: calc(var(--ds-space-4, 16px) + 28px);
}
.chatgpt-reference-v1 .chatgpt-project-card-shell.is-renaming {
align-items: center;
gap: var(--chatgpt-route-gap-sm);
min-height: calc(var(--wizon-ai-space-unit) * 19);
padding: var(--ds-space-4, 16px);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
}
.chatgpt-reference-v1 .chatgpt-project-rename-input {
flex: 1;
min-width: 0;
min-height: 36px;
padding: 0 10px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-sm, 10px);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
}
.chatgpt-reference-v1 .chatgpt-project-card-menu-anchor {
position: absolute;
top: 8px;
right: 8px;
}
.chatgpt-reference-v1 .chatgpt-project-card-menu-trigger {
display: grid;
place-items: center;
width: 28px;
height: 28px;
border-radius: 8px;
color: var(--cg-muted);
background: transparent;
}
.chatgpt-reference-v1 .chatgpt-project-card-menu-trigger:hover,
.chatgpt-reference-v1 .chatgpt-project-card-menu-trigger:focus-visible,
.chatgpt-reference-v1 .chatgpt-project-card-menu-trigger[aria-expanded="true"] {
background: var(--cg-hover-soft, #f4f4f5);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-project-card-menu {
position: absolute;
top: calc(100% + 4px);
right: 0;
z-index: 30;
display: flex;
flex-direction: column;
min-width: 148px;
padding: 6px;
border: 1px solid var(--cg-menu-border);
border-radius: 12px;
background: var(--cg-surface);
box-shadow: var(--cg-shadow);
}
.chatgpt-reference-v1 .chatgpt-project-card-menu-danger {
color: #b91c1c;
}
.chatgpt-reference-v1 .chatgpt-project-create-backdrop {
position: fixed;
inset: 0;
z-index: 90;
display: grid;
place-items: center;
padding: var(--ds-space-6, 24px);
background: rgba(0, 0, 0, 0.5);
backdrop-filter: blur(1px);
}
.chatgpt-reference-v1 .chatgpt-project-create-dialog {
display: grid;
gap: var(--chatgpt-route-gap-md);
width: min(calc(var(--wizon-ai-space-unit) * 118), calc(100vw - var(--ds-space-8, 40px)));
padding: var(--ds-space-6, 24px);
border: 1px solid var(--cg-menu-border);
border-radius: calc(var(--chatgpt-route-radius-control) + var(--chatgpt-route-gap-xs));
background: var(--cg-surface);
box-shadow: var(--cg-shadow-float-xl);
color: var(--cg-text);
font-family: inherit;
}
.chatgpt-reference-v1 .chatgpt-project-create-head {
display: flex;
align-items: center;
justify-content: flex-end;
gap: var(--chatgpt-route-gap-xs);
min-height: var(--wizon-ai-action-target-sm);
}
.chatgpt-reference-v1 .chatgpt-project-create-settings-anchor {
position: relative;
display: inline-grid;
place-items: center;
}
.chatgpt-reference-v1 .chatgpt-project-create-settings,
.chatgpt-reference-v1 .chatgpt-project-create-close {
display: inline-grid;
place-items: center;
width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-project-create-settings:hover,
.chatgpt-reference-v1 .chatgpt-project-create-close:hover,
.chatgpt-reference-v1 .chatgpt-project-create-settings:focus-visible,
.chatgpt-reference-v1 .chatgpt-project-create-close:focus-visible,
.chatgpt-reference-v1 .chatgpt-project-create-settings[aria-expanded="true"] {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-project-create-settings-menu {
position: absolute;
top: calc(100% + var(--chatgpt-route-gap-xs));
right: 0;
z-index: 2;
display: grid;
gap: var(--chatgpt-route-gap-2xs);
width: min(calc(var(--wizon-ai-space-unit) * 80), calc(100vw - var(--ds-space-8, 40px)));
padding: var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
box-shadow: var(--cg-shadow-float-md);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-project-create-settings-menu > strong {
font-size: var(--chatgpt-route-body-font-size);
font-weight: var(--wds-font-weight-semibold, 600);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-project-create-settings-menu > small {
color: var(--cg-muted);
font-size: var(--wds-font-size-caption, 0.8125rem);
line-height: calc(var(--wds-font-size-caption, 0.8125rem) * 1.4);
}
.chatgpt-reference-v1 .chatgpt-project-memory-option {
display: grid;
grid-template-columns: var(--wizon-ai-action-target-xs) minmax(0, 1fr);
gap: var(--chatgpt-route-gap-xs);
align-items: start;
min-height: calc(var(--wizon-ai-space-unit) * 15);
padding: var(--chatgpt-route-gap-xs);
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-text);
text-align: left;
font: inherit;
}
.chatgpt-reference-v1 .chatgpt-project-memory-option:hover,
.chatgpt-reference-v1 .chatgpt-project-memory-option:focus-visible,
.chatgpt-reference-v1 .chatgpt-project-memory-option[aria-checked="true"] {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .chatgpt-project-memory-option > span:first-child {
display: inline-grid;
place-items: center;
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-project-memory-option strong,
.chatgpt-reference-v1 .chatgpt-project-memory-option small {
display: block;
}
.chatgpt-reference-v1 .chatgpt-project-memory-option strong {
font-size: var(--chatgpt-route-body-font-size);
font-weight: var(--wds-font-weight-semibold, 600);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-project-memory-option small {
margin-top: var(--chatgpt-route-gap-2xs);
color: var(--cg-muted);
font-size: var(--wds-font-size-caption, 0.8125rem);
line-height: calc(var(--wds-font-size-caption, 0.8125rem) * 1.4);
}
.chatgpt-reference-v1 .chatgpt-project-create-dialog h2 {
margin: 0;
color: var(--cg-text);
font-size: var(--wds-font-size-title-l);
font-weight: var(--wds-font-weight-semibold, 600);
line-height: calc(var(--wds-font-size-title-l) * 1.35);
}
.chatgpt-reference-v1 .chatgpt-project-create-dialog p {
margin: 0;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: calc(var(--chatgpt-route-body-line-height) * 1.15);
}
.chatgpt-reference-v1 .chatgpt-project-create-field {
display: grid;
gap: var(--chatgpt-route-gap-xs);
color: var(--cg-text);
font-size: var(--chatgpt-route-body-font-size);
font-weight: var(--wds-font-weight-medium);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-project-create-input {
min-width: 0;
min-height: calc(var(--wizon-ai-space-unit) * 11);
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
}
.chatgpt-reference-v1 .chatgpt-project-create-input:focus-visible {
outline: 2px solid var(--cg-focus-ring, rgba(16, 163, 127, 0.45));
outline-offset: 2px;
}
.chatgpt-reference-v1 .chatgpt-project-create-submit {
display: inline-grid;
place-items: center;
justify-self: end;
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-control-pad-y) var(--chatgpt-route-control-pad-x);
border: 1px solid var(--cg-text);
border-radius: var(--chatgpt-route-radius-pill);
background: var(--cg-text);
color: var(--cg-surface);
font: inherit;
font-weight: var(--wds-font-weight-semibold, 600);
}
.chatgpt-reference-v1 .chatgpt-project-create-submit:disabled {
cursor: not-allowed;
opacity: 0.45;
}
.chatgpt-reference-v1 .chatgpt-route-empty-icon {
display: inline-grid;
place-items: center;
width: calc(var(--wizon-ai-space-unit) * 14);
height: calc(var(--wizon-ai-space-unit) * 14);
border-radius: var(--chatgpt-route-radius-lg);
background: var(--cg-hover);
}
.chatgpt-reference-v1 .chatgpt-route-empty-icon svg {
width: calc(var(--wizon-ai-space-unit) * 7);
height: calc(var(--wizon-ai-space-unit) * 7);
}
.chatgpt-reference-v1 .chatgpt-scheduled-page {
gap: var(--ds-space-7, 32px);
}
/* 20260708-scheduled-task-list: render actual scheduled tasks (previously the page
only ever showed an empty state). */
.chatgpt-reference-v1 .chatgpt-scheduled-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item {
display: grid;
grid-template-columns: 40px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--cg-menu-border, #ececec);
border-radius: 16px;
background: var(--cg-surface);
}
.chatgpt-reference-v1 .chatgpt-scheduled-item[data-scheduled-status="completed"] {
opacity: 0.62;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: 12px;
background: var(--cg-hover-soft, #f4f4f5);
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-title {
font-size: var(--ds-text-body-15);
font-weight: 600;
color: var(--cg-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item[data-scheduled-status="completed"] .chatgpt-scheduled-item-title {
text-decoration: line-through;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
font-size: var(--ds-text-caption-13);
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-scheduled-badge {
display: inline-flex;
align-items: center;
padding: 2px 8px;
border-radius: var(--ds-radius-pill, 999px);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.chatgpt-reference-v1 .chatgpt-scheduled-badge.is-active {
background: rgba(22, 163, 74, 0.12);
color: #15803d;
}
.chatgpt-reference-v1 .chatgpt-scheduled-badge.is-paused {
background: rgba(217, 119, 6, 0.12);
color: #b45309;
}
.chatgpt-reference-v1 .chatgpt-scheduled-badge.is-completed {
background: rgba(107, 114, 128, 0.14);
color: #4b5563;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-actions {
display: inline-flex;
align-items: center;
gap: 6px;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-action {
padding: 6px 12px;
border: 1px solid var(--cg-menu-border, #ececec);
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-surface);
color: var(--cg-text);
font-size: var(--ds-text-caption-13);
font-weight: 500;
transition: background 150ms ease, border-color 150ms ease;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-action:hover,
.chatgpt-reference-v1 .chatgpt-scheduled-item-action:focus-visible {
background: var(--cg-hover-soft, #f4f4f5);
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-action.is-danger {
color: #b91c1c;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-action.is-danger:hover,
.chatgpt-reference-v1 .chatgpt-scheduled-item-action.is-danger:focus-visible {
background: rgba(185, 28, 28, 0.08);
border-color: rgba(185, 28, 28, 0.28);
}
@media (max-width: 520px) {
.chatgpt-reference-v1 .chatgpt-scheduled-item {
grid-template-columns: 36px minmax(0, 1fr);
grid-template-areas:
"icon body"
"actions actions";
row-gap: 10px;
}
.chatgpt-reference-v1 .chatgpt-scheduled-item-icon { grid-area: icon; }
.chatgpt-reference-v1 .chatgpt-scheduled-item-body { grid-area: body; }
.chatgpt-reference-v1 .chatgpt-scheduled-item-actions {
grid-area: actions;
justify-content: flex-end;
flex-wrap: wrap;
}
}
/* 축③ S4 — 워크플로우 합집합 뷰("진행 중"). 새 색상·반경·그림자 토큰을 만들지 않는다 —
.chatgpt-scheduled-item 이 이미 쓰는 것과 같은 var() 집합만 재사용한다. */
.chatgpt-reference-v1 .workflow-inbox-page {
gap: var(--ds-space-7, 32px);
}
.chatgpt-reference-v1 .workflow-inbox-list {
display: flex;
flex-direction: column;
gap: 10px;
margin: 0;
padding: 0;
list-style: none;
}
.chatgpt-reference-v1 .workflow-inbox-item {
margin: 0;
padding: 0;
}
.chatgpt-reference-v1 .workflow-inbox-item-open {
display: grid;
width: 100%;
grid-template-columns: 40px minmax(0, 1fr);
align-items: center;
gap: 14px;
padding: 14px 16px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
color: inherit;
text-align: left;
cursor: pointer;
transition: background 150ms ease, border-color 150ms ease;
}
.chatgpt-reference-v1 .workflow-inbox-item-open:hover,
.chatgpt-reference-v1 .workflow-inbox-item-open:focus-visible {
background: var(--cg-hover-soft);
}
.chatgpt-reference-v1 .workflow-inbox-item-icon {
display: grid;
place-items: center;
width: 40px;
height: 40px;
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
color: var(--cg-muted);
}
.chatgpt-reference-v1 .workflow-inbox-item-body {
display: flex;
flex-direction: column;
gap: 5px;
min-width: 0;
}
.chatgpt-reference-v1 .workflow-inbox-item-title {
font-size: var(--ds-text-body-15);
font-weight: 600;
color: var(--cg-text);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .workflow-inbox-item-detail {
font-size: var(--ds-text-caption-13);
color: var(--cg-muted);
}
.chatgpt-reference-v1 .workflow-inbox-status {
margin: 0;
color: var(--cg-muted);
}
.chatgpt-reference-v1 .workflow-inbox-status.is-error {
color: var(--cg-text);
}
.chatgpt-reference-v1 .workflow-inbox-truncated-note {
margin: 0;
font-size: var(--ds-text-caption-13);
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-scheduled-filter-anchor {
position: relative;
display: inline-flex;
align-items: center;
}
.chatgpt-reference-v1 .chatgpt-scheduled-filter-menu {
position: absolute;
z-index: 35;
top: calc(100% + var(--chatgpt-route-gap-xs));
right: 0;
display: grid;
min-width: calc(var(--wizon-ai-space-unit) * 42);
padding: var(--chatgpt-route-gap-2xs);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
box-shadow: var(--cg-shadow-float-lg);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-scheduled-filter-option {
display: flex;
align-items: center;
width: 100%;
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs) var(--chatgpt-route-gap-sm);
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-text);
font-size: var(--chatgpt-route-body-font-size);
font-weight: var(--wds-font-weight-medium);
line-height: var(--chatgpt-route-body-line-height);
text-align: left;
}
.chatgpt-reference-v1 .chatgpt-scheduled-filter-option:hover,
.chatgpt-reference-v1 .chatgpt-scheduled-filter-option:focus-visible {
background: var(--cg-hover-soft);
outline: none;
}
.chatgpt-reference-v1 .chatgpt-scheduled-filter-option[aria-checked="true"] {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer {
display: grid;
grid-template-columns: var(--ds-space-8, 40px) minmax(0, 1fr) var(--ds-space-8, 40px);
align-items: center;
gap: calc(var(--wizon-ai-space-unit) / 2);
min-height: calc(var(--wizon-ai-space-unit) * 14.5);
padding: var(--chatgpt-route-gap-xs) calc(var(--wizon-ai-space-unit) * 2.5);
border: 1px solid var(--cg-menu-border);
border-radius: calc(var(--wizon-ai-space-unit) * 7);
background: var(--cg-surface);
box-shadow: var(--cg-shadow);
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer input {
min-width: 0;
border: 0;
outline: none;
background: transparent;
color: var(--cg-text);
font-size: var(--wds-font-size-body-1);
line-height: calc(var(--wds-font-size-body-1) * 1.5);
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer .chatgpt-route-composer-button {
display: inline-grid;
place-items: center;
width: calc(var(--wizon-ai-space-unit) * 9);
height: calc(var(--wizon-ai-space-unit) * 9);
min-width: calc(var(--wizon-ai-space-unit) * 9);
border: 0;
border-radius: var(--chatgpt-route-radius-pill);
background: transparent;
color: var(--cg-text-soft);
transition:
background-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
transform var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast);
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer .chatgpt-route-composer-button svg {
width: calc(var(--wizon-ai-space-unit) * 5);
height: calc(var(--wizon-ai-space-unit) * 5);
fill: none;
stroke: currentColor;
stroke-width: var(--wds-icon-stroke, 1.7);
stroke-linecap: round;
stroke-linejoin: round;
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer .chatgpt-route-composer-button:hover {
background: var(--cg-hover);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer .chatgpt-route-composer-button:active {
transform: scale(0.985);
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer .chatgpt-route-composer-send {
width: calc(var(--wizon-ai-space-unit) * 9.5);
height: calc(var(--wizon-ai-space-unit) * 9.5);
min-width: calc(var(--wizon-ai-space-unit) * 9.5);
background: var(--cg-send-bg);
color: var(--cg-send-fg);
}
.chatgpt-reference-v1 .chatgpt-scheduled-composer .chatgpt-route-composer-send:hover {
background: var(--cg-send-bg);
color: var(--cg-send-fg);
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-anchor {
position: relative;
display: inline-grid;
place-items: center;
min-width: 0;
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-menu {
position: absolute;
left: 0;
bottom: calc(100% + var(--chatgpt-route-gap-xs));
z-index: 40;
display: grid;
gap: var(--chatgpt-route-gap-2xs);
width: min(calc(var(--wizon-ai-space-unit) * 76), calc(100vw - var(--chatgpt-route-gap-lg) * 2));
padding: var(--chatgpt-route-gap-xs);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-surface);
box-shadow: var(--cg-shadow-float-lg);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-item {
display: grid;
grid-template-columns: var(--wizon-ai-action-target-xs) minmax(0, 1fr);
align-items: center;
gap: var(--chatgpt-route-gap-xs);
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs);
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-text);
font: inherit;
text-align: left;
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-item:hover,
.chatgpt-reference-v1 .chatgpt-scheduled-add-item:focus-visible {
background: var(--cg-hover-soft);
outline: none;
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-item svg {
width: calc(var(--wizon-ai-space-unit) * 5);
height: calc(var(--wizon-ai-space-unit) * 5);
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-item span {
display: grid;
gap: calc(var(--wizon-ai-space-unit) / 2);
min-width: 0;
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-item strong {
overflow: hidden;
color: var(--cg-text);
font-weight: var(--wds-font-weight-medium);
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-scheduled-add-item small {
overflow: hidden;
color: var(--cg-muted);
font-size: var(--wds-font-size-caption);
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-scheduled-empty {
display: grid;
justify-items: center;
gap: var(--chatgpt-route-gap-sm);
padding: calc(var(--wizon-ai-space-unit) * 8) var(--chatgpt-route-gap-md);
color: var(--cg-text);
text-align: center;
}
.chatgpt-reference-v1 .chatgpt-scheduled-empty p {
margin: 0;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-app-grid {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(calc(var(--wizon-ai-space-unit) * 55), 1fr));
gap: var(--chatgpt-route-gap-sm);
}
.chatgpt-reference-v1 .chatgpt-app-card {
display: grid;
grid-template-columns: var(--wizon-ai-action-target-sm) minmax(0, 1fr) var(--wizon-ai-action-target-xs);
align-items: center;
gap: var(--chatgpt-route-gap-xs);
min-height: calc(var(--wizon-ai-space-unit) * 18);
padding: var(--ds-space-4, 16px);
border: 1px solid var(--cg-menu-border);
border-radius: var(--chatgpt-route-gap-sm);
background: var(--cg-surface);
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
transition:
background-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast),
border-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-fast);
}
.chatgpt-reference-v1 .chatgpt-app-card:hover {
background: var(--cg-hover-soft);
border-color: var(--cg-menu-border);
}
.chatgpt-reference-v1 .chatgpt-app-card-icon,
.chatgpt-reference-v1 .chatgpt-app-card-cta {
display: inline-grid;
place-items: center;
width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
border-radius: var(--chatgpt-route-radius-control);
color: var(--cg-text-soft);
}
.chatgpt-reference-v1 .chatgpt-app-card-icon {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.chatgpt-reference-v1 .chatgpt-app-card-icon svg,
.chatgpt-reference-v1 .chatgpt-app-card-cta svg {
width: calc(var(--wizon-ai-space-unit) * 5);
height: calc(var(--wizon-ai-space-unit) * 5);
fill: none;
stroke: currentColor;
stroke-width: var(--wds-icon-stroke, 1.7);
stroke-linecap: round;
stroke-linejoin: round;
}
.chatgpt-reference-v1 .chatgpt-app-card-copy {
display: grid;
gap: var(--chatgpt-route-gap-2xs);
min-width: 0;
}
.chatgpt-reference-v1 .chatgpt-app-card-copy strong {
min-width: 0;
overflow: hidden;
color: var(--cg-text);
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-app-card-copy p,
.chatgpt-reference-v1 .chatgpt-route-empty-copy {
margin: 0;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
.chatgpt-reference-v1 .chatgpt-app-empty {
display: grid;
grid-column: 1 / -1;
justify-items: center;
gap: var(--chatgpt-route-gap-sm);
padding: calc(var(--wizon-ai-space-unit) * 10) var(--chatgpt-route-gap-md);
color: var(--cg-text);
text-align: center;
}
.chatgpt-reference-v1 .chatgpt-app-empty p {
margin: 0;
color: var(--cg-muted);
font-size: var(--chatgpt-route-body-font-size);
line-height: var(--chatgpt-route-body-line-height);
}
/* 20260704-composer-empty-optical-center-guard: keep the ChatGPT one-line prompt optically centered after new-chat, focus, and stale multiline transitions. */
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment),
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) {
grid-template-rows: 42px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 5px 8px !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto !important;
grid-template-rows: 42px !important;
grid-template-areas: "lead input actions" !important;
align-items: center !important;
min-height: 42px !important;
height: 42px !important;
padding: 0 !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-textarea-scroll,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-textarea-scroll {
align-self: center !important;
display: flex !important;
align-items: center !important;
min-height: 26px !important;
height: 26px !important;
max-height: 26px !important;
overflow-y: hidden !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) textarea {
align-self: center !important;
min-height: 26px !important;
height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
line-height: 26px !important;
overflow-y: hidden !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-leading-action,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-action-dock,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-leading-action,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-action-dock {
align-self: center !important;
}
/* 20260704-composer-hidden-attachment-center-guard: stale attachment classes must not keep an empty prompt in the tall multiline layout. */
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) {
grid-template-rows: 42px !important;
min-height: 52px !important;
max-height: 52px !important;
padding: 5px 8px !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto !important;
grid-template-rows: 42px !important;
grid-template-areas: "lead input actions" !important;
align-items: center !important;
min-height: 42px !important;
height: 42px !important;
padding: 0 !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-textarea-scroll,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-textarea-scroll {
align-self: center !important;
display: flex !important;
align-items: center !important;
min-height: 26px !important;
height: 26px !important;
max-height: 26px !important;
overflow-y: hidden !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea {
align-self: center !important;
min-height: 26px !important;
height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
line-height: 26px !important;
overflow-y: hidden !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-leading-action,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-action-dock,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-leading-action,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-action-dock {
align-self: center !important;
}
/* 20260704-composer-single-line-baseline-guard: keep the one-line prompt on the same centerline as ChatGPT's placeholder. */
body.chatgpt-reference-v1 .chatgpt-composer-shell:not(.is-multiline) textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea {
transform: none;
}
/* 20260704-composer-direct-textarea-center-guard: support stale/deployed composer DOM without the textarea scroll wrapper. */
body.chatgpt-reference-v1 .chatgpt-composer-shell:not(.is-multiline) .composer-prompt-body > textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-prompt-body > textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-prompt-body > textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body > textarea,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body > textarea {
grid-area: input !important;
align-self: center !important;
display: block !important;
min-height: 26px !important;
height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
line-height: 26px !important;
overflow-y: hidden !important;
}
/* 20260704-composer-placeholder-state-reset-guard: placeholder state must always collapse stale multiline geometry back to ChatGPT's single-line rail. */
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) {
grid-template-rows: 42px !important;
min-height: 52px !important;
height: 52px !important;
max-height: 52px !important;
padding: 5px 8px !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto !important;
grid-template-rows: 42px !important;
grid-template-areas: "lead input actions" !important;
align-items: center !important;
min-height: 42px !important;
height: 42px !important;
max-height: 42px !important;
margin: 0 !important;
padding: 0 !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-textarea-scroll {
grid-area: input !important;
align-self: stretch !important;
display: grid !important;
align-items: center !important;
min-height: 42px !important;
height: 42px !important;
max-height: 42px !important;
overflow-y: hidden !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) textarea {
align-self: center !important;
min-height: 26px !important;
height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
line-height: 26px !important;
overflow-y: hidden !important;
transform: none !important;
}
/* 20260704-composer-visible-attachment-expansion-guard: a visible attachment lane wins over stale empty-state height clamps. */
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(.composer-attachment-lane:not([hidden])),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(.composer-attachment-lane:not([hidden])) {
grid-template-rows: auto auto !important;
min-height: 84px !important;
height: auto !important;
max-height: min(360px, calc(100dvh - 24px)) !important;
padding: 5px 8px !important;
}
body.chatgpt-reference-v1 .composer-attachment-lane:not([hidden]) {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
min-width: 0;
overflow: visible;
}
/* 20260706-project-route-surface-v2: route pages must win after late empty composer clamps and cached CSS. */
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .message-list,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-composer-shell,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-prompt-shelf,
body.chatgpt-reference-v1.portal-route-open .message-list,
body.chatgpt-reference-v1.portal-route-open .chatgpt-composer-shell,
body.chatgpt-reference-v1.portal-route-open .composer-surface.chatgpt-composer-shell,
body.chatgpt-reference-v1.portal-route-open .chatgpt-prompt-shelf {
display: none !important;
}
/* 20260707-library-preview-composer-route-restore: route pages hide the home composer, but the file preview prompt is part of the detail dialog. */
html[data-chat-state="route"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell,
body.chatgpt-reference-v1.portal-route-open .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell {
display: grid !important;
}
/* 20260707-library-preview-mobile-composer-reference: match Chrome-observed ChatGPT mobile composer geometry and beat global empty-composer clamps. */
@media (max-width: 520px) {
html[data-chat-state="route"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]),
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]),
body.chatgpt-reference-v1.portal-route-open .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]),
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) {
width: calc(100% - 32px) !important;
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 74px !important;
min-height: 84px !important;
height: 84px !important;
max-height: 84px !important;
margin: 0 auto var(--chatgpt-route-gap-lg) !important;
padding: 5px 8px !important;
border-radius: 28px !important;
overflow: clip !important;
}
html[data-chat-state="route"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface.is-empty:has(textarea[data-library-preview-prompt-input]:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface.is-empty:has(textarea[data-library-preview-prompt-input]:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1.portal-route-open .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface.is-empty:has(textarea[data-library-preview-prompt-input]:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface.is-empty:has(textarea[data-library-preview-prompt-input]:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) {
grid-template-columns: minmax(0, 1fr) !important;
grid-template-rows: 74px !important;
min-height: 84px !important;
height: 84px !important;
max-height: 84px !important;
}
html[data-chat-state="route"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-prompt-body,
html[data-portal-route-open="true"] body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-prompt-body,
body.chatgpt-reference-v1.portal-route-open .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto !important;
grid-template-rows: 38px 36px !important;
grid-template-areas:
"input input input"
"lead spacer actions" !important;
align-items: center !important;
min-height: 74px !important;
height: 74px !important;
max-height: 74px !important;
gap: 0 8px !important;
padding: 0 !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-textarea-scroll {
grid-area: input !important;
align-self: stretch !important;
display: grid !important;
align-items: center !important;
min-height: 38px !important;
height: 38px !important;
max-height: 38px !important;
padding: 0 7px !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .chatgpt-library-preview-prompt-input {
align-self: center !important;
min-height: 26px !important;
height: 26px !important;
max-height: 26px !important;
padding: 0 !important;
font-size: 16px !important;
line-height: 26px !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-leading-action {
grid-area: lead !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-action-dock {
grid-area: actions !important;
align-self: center !important;
display: inline-flex !important;
flex-flow: row nowrap !important;
align-items: center !important;
justify-content: flex-end !important;
min-width: 0 !important;
min-height: 36px !important;
height: 36px !important;
gap: 4px !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-model-pill,
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-mic-button,
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-leading-action,
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .chatgpt-library-preview-submit {
display: inline-grid !important;
place-items: center !important;
min-height: 36px !important;
height: 36px !important;
border-radius: 999px !important;
background: rgba(0, 0, 0, 0.05);
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-leading-action,
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-mic-button,
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .chatgpt-library-preview-submit {
width: 36px !important;
min-width: 36px !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-model-pill {
display: inline-flex !important;
flex: 0 0 auto !important;
width: auto !important;
min-width: 74px !important;
padding: 0 14px !important;
gap: 6px !important;
color: rgb(143, 143, 143);
font-size: 16px !important;
line-height: 26px !important;
white-space: nowrap !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-model-pill > span {
flex: 0 0 auto !important;
white-space: nowrap !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .composer-caret {
width: 16px !important;
min-width: 16px !important;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog .chatgpt-library-preview-composer.chatgpt-composer-shell.composer-surface:has([data-library-preview-prompt-input]) .chatgpt-library-preview-submit {
background: #000000;
color: #ffffff;
}
}
@media (max-width: 900px) {
.chatgpt-reference-v1 .chatgpt-route-page {
--chatgpt-route-page-mobile-width: min(100%, calc(100% - (var(--wizon-ai-thread-gutter) * 2)));
/* the route title now lives in the top app bar (20260709-mobile-route-navbar),
so the page no longer needs a large top gap for a big H1 — reclaim that space */
--chatgpt-route-page-mobile-top: calc(var(--wizon-ai-space-unit) * 4);
--chatgpt-route-page-mobile-bottom: var(--ds-space-8, 40px);
/* --chatgpt-route-table-mobile-min 은 여기 있었다. 폰에서 라이브러리 표에 최소 폭을 줘 가로
스크롤을 만들던 유일한 토큰이었고, 20260802-library-mobile-native-list 로 그 표 자체가
리스트가 되면서 소비처가 0이 됐다. 정의만 남기면 죽은 토큰이라 함께 걷어낸다. */
width: var(--chatgpt-route-page-mobile-width);
padding: var(--chatgpt-route-page-mobile-top) 0 var(--chatgpt-route-page-mobile-bottom);
}
.chatgpt-reference-v1 .chatgpt-route-page-inner {
gap: var(--chatgpt-route-gap-md);
}
.chatgpt-reference-v1 .chatgpt-route-page-head {
flex-direction: column;
align-items: stretch;
gap: var(--ds-space-4, 16px);
}
/* the top app bar already shows the route title inline — drop the duplicate big
H1 on mobile so the page isn't titled twice (NN/g: no redundant chrome). */
body.portal-route-open.chatgpt-reference-v1 .chatgpt-route-page-head h1 {
display: none;
}
/* 20260706-route-mobile-rail-v1 / 20260706-library-route-mobile-rail-guard: keep library controls inside the route rail while table rows scroll internally. */
.chatgpt-reference-v1 .chatgpt-route-page-head,
.chatgpt-reference-v1 .chatgpt-route-page-actions,
.chatgpt-reference-v1 .chatgpt-library-filter-row,
.chatgpt-reference-v1 .chatgpt-library-table {
box-sizing: border-box;
width: 100%;
max-width: 100%;
min-width: 0;
}
.chatgpt-reference-v1 .chatgpt-route-page-actions {
flex-wrap: wrap;
align-items: stretch;
}
.chatgpt-reference-v1 .chatgpt-route-search {
width: 100%;
}
.chatgpt-reference-v1 .chatgpt-route-tabs,
.chatgpt-reference-v1 .chatgpt-library-table {
overflow-x: auto;
scrollbar-width: none;
}
.chatgpt-reference-v1 .chatgpt-library-filter-row {
align-items: flex-start;
gap: var(--chatgpt-route-gap-sm);
}
.chatgpt-reference-v1 .chatgpt-library-view-controls {
flex: 0 0 auto;
}
.chatgpt-reference-v1 .chatgpt-route-tabs::-webkit-scrollbar,
.chatgpt-reference-v1 .chatgpt-library-table::-webkit-scrollbar {
display: none;
}
.chatgpt-reference-v1 .chatgpt-route-tabs button {
flex: 0 0 auto;
white-space: nowrap;
}
/* 20260802-library-mobile-native-list (북극성 ③, doc 143 §3): 폰에서 라이브러리는 데이터 표가
아니라 리스트다. 배포 0583703ab 를 iPhone 17 시뮬(실 WebKit)로 재니 4열이 그대로 남아 표가
가로로 스크롤했고(폭 358px 에 scrollWidth 376), 정작 파일명은 5행 전부 말줄임이었다. 「크기」는
5행 모두 값이 없었고 「수정됨」은 5행 모두 같은 값이라 둘이 폭만 먹었다. 아이콘 한 칸 + 제목
(2줄까지) + 병합된 부제 한 줄로 접는다. 데스크톱(>=901px)은 무변경 — 거긴 표가 맞다. */
.chatgpt-reference-v1 .chatgpt-library-table {
min-width: 0;
overflow-x: visible;
}
.chatgpt-reference-v1 .chatgpt-library-row--head {
display: none;
}
.chatgpt-reference-v1 .chatgpt-library-row {
grid-template-columns: 32px minmax(0, 1fr);
grid-template-areas:
"icon name"
"icon meta";
align-items: center;
column-gap: 12px;
row-gap: 3px;
min-width: 0;
/* 오른쪽 44px 은 .chatgpt-library-row-menu-trigger(⋯) 자리 — 제목이 그 밑으로 흐르지 않게. */
padding: 12px 44px 12px 0;
}
.chatgpt-reference-v1 .chatgpt-library-file-icon {
grid-area: icon;
}
.chatgpt-reference-v1 .chatgpt-library-file-copy {
grid-area: name;
padding: 0;
}
.chatgpt-reference-v1 .chatgpt-library-file-name {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
line-height: 1.35;
white-space: normal;
}
.chatgpt-reference-v1 .chatgpt-library-row-date,
.chatgpt-reference-v1 .chatgpt-library-row-size {
display: none;
}
.chatgpt-reference-v1 .chatgpt-library-row-meta {
grid-area: meta;
display: block;
justify-self: start;
overflow: hidden;
min-width: 0;
color: var(--cg-muted);
font-size: var(--ds-text-caption-13);
text-overflow: ellipsis;
white-space: nowrap;
}
/* 20260707-library-preview-mobile-fullscreen-reference: ChatGPT mobile file detail covers the rail; no sidebar tab remains visible. */
body.chatgpt-reference-v1.sidebar-collapsed .chatgpt-library-preview-backdrop,
body.chatgpt-reference-v1 .chatgpt-library-preview-backdrop {
left: 0 !important;
right: 0 !important;
width: 100vw !important;
}
body.chatgpt-reference-v1.sidebar-collapsed .chatgpt-library-preview-dialog,
body.chatgpt-reference-v1 .chatgpt-library-preview-dialog {
width: 100vw !important;
}
.chatgpt-reference-v1 .chatgpt-library-preview-topbar {
grid-template-columns: var(--wizon-ai-action-target-sm) minmax(0, 1fr) auto;
gap: var(--chatgpt-route-gap-xs);
padding: 0 var(--chatgpt-route-gap-sm);
}
.chatgpt-reference-v1 .chatgpt-library-preview-stage {
padding: var(--chatgpt-route-gap-md) var(--chatgpt-route-gap-sm);
}
.chatgpt-reference-v1 .chatgpt-library-preview-document-pane {
width: 100%;
max-width: 100%;
}
body.chatgpt-reference-v1 .context-pane {
inset: auto 8px 8px 8px;
width: auto;
height: min(78vh, 720px);
transform: translate3d(0, 24px, 0) scale(0.985);
transform-origin: center bottom;
}
body.chatgpt-reference-v1 .context-pane[data-motion-state="closing"] {
transform: translate3d(0, 24px, 0) scale(0.985);
}
}
@media (prefers-reduced-motion: reduce) {
body.chatgpt-reference-v1 .app-shell,
body.chatgpt-reference-v1 .sidebar,
body.chatgpt-reference-v1 .chatgpt-sidebar-rail,
body.chatgpt-reference-v1 .context-pane,
body.chatgpt-reference-v1 .message[data-message-motion="enter"],
body.chatgpt-reference-v1 .message.pending .thinking-inline,
body.chatgpt-reference-v1 .message[data-message-state="complete"] .message-actions,
.chatgpt-reference-v1 .chatgpt-more-menu,
.chatgpt-reference-v1 .chatgpt-account-menu,
.chatgpt-reference-v1 .chatgpt-recent-menu,
.chatgpt-reference-v1 .composer-popover,
.chatgpt-reference-v1 .reasoning-popover,
body.chatgpt-reference-v1 .chatgpt-conversation-menu,
body.chatgpt-reference-v1 .chatgpt-share-dialog[open],
body.chatgpt-reference-v1 .chatgpt-share-dialog::backdrop,
body.chatgpt-reference-v1 .chatgpt-search-dialog[open],
body.chatgpt-reference-v1 .chatgpt-search-dialog::backdrop,
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog[open],
body.chatgpt-reference-v1 .chatgpt-delete-confirm-dialog::backdrop,
.chatgpt-reference-v1 .chatgpt-settings-dialog[open],
.chatgpt-reference-v1 .chatgpt-settings-dialog::backdrop {
transition-duration: 1ms !important;
transform: none !important;
animation-duration: 1ms !important;
animation-iteration-count: 1 !important;
}
}
/* 20260707-mobile-shell-chatgpt-parity: match ChatGPT mobile — hide the rail, full-width content, hamburger topbar opens the sidebar as an overlay drawer. */
.chatgpt-reference-v1 .chatgpt-mobile-topbar {
display: none;
align-items: center;
justify-content: space-between;
gap: 8px;
height: 54px;
padding: 4px 8px;
}
.chatgpt-reference-v1 .chatgpt-mobile-topbar-button {
width: 40px;
height: 40px;
}
/* 20260729-touch-target-a2: 상단바 아이콘(40x40) 탭 타깃을 44px로 — 시각 박스는 그대로 두고
투명 ::after로만 히트영역을 넓힌다(2026-07-10에 추가된 아트디렉션 P1-5 히트슬롭과 같은 기법이지만, 그 규칙은
@media (pointer: coarse) 단독 조건이라 실기기/에뮬레이션에서 pointer가 정확히 coarse로
보고되지 않으면 적용되지 않을 수 있다 — 여기서는 폭 기준을 별도로 추가해 390px 실측/자동화
검증 모두에서 결정적으로 적용되게 한다. 기존 규칙은 .chatgpt-icon-button도 함께 묶어 전체
다이얼로그 닫기 버튼 등 이 작업 범위 밖의 요소까지 건드리므로, 이번 작업은 범위를 좁혀
.chatgpt-mobile-topbar-button만 별도 규칙으로 추가한다). 좌/중/우 세 슬롯은 gap 8px로
서로 배타적으로만 노출되므로(syncPortalRouteSurfaceVisibility: 트레일 슬롯은 드라이브 메뉴/
휴지통 비우기/새채팅 중 항상 하나만 visible) 슬롭이 다른 아이콘과 겹칠 자리가 없다(실측). */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-mobile-topbar-button {
position: relative;
}
body.chatgpt-reference-v1 .chatgpt-mobile-topbar-button::after {
content: "";
position: absolute;
top: 50%;
left: 50%;
width: 100%;
height: 100%;
min-width: 44px;
min-height: 44px;
transform: translate(-50%, -50%);
}
}
/* 20260725-mobile-topbar-workspace: three-slot nav bar (Material 3 / Apple HIG). The old
layout was flat `space-between` children with an absolutely-positioned WIZON wordmark and a
`flex: 1` title, so the title slid sideways whenever a trailing action appeared.
20260725-mobile-topbar-grid (M1 title-centering fix): the leading/trailing slots used to share
a flex-grow factor so free space split evenly BETWEEN them — which only keeps the middle
optically centred while neither slot's min-content exceeds its equal share. A long title (less
free space to split) or an asymmetric slot (more buttons on one side) can push a slot past that
floor, and the middle drifts off-centre. `.chatgpt-mobile-topbar` is now `display: grid` with
fixed-floor side columns (see the <=900px block below) — each side's width is a function of ITS
OWN content only, independent of the title's length or the viewport width, so the centre column
never wobbles. The slots keep `display: flex` for their OWN children's internal layout. */
.chatgpt-reference-v1 .chatgpt-mobile-topbar-slot {
display: flex;
align-items: center;
gap: 4px;
min-width: 0;
}
.chatgpt-reference-v1 .chatgpt-mobile-topbar-trail {
justify-content: flex-end;
}
.chatgpt-reference-v1 .chatgpt-mobile-topbar-center {
justify-content: center;
}
/* Workspace (product mode) switcher — the middle slot's chat-surface state. It opens the very
same #productModeMenu the sidebar head opens, which is already registered as a mobile
top-layer sheet, so it escapes the drawer's stacking context with no new menu markup. */
.chatgpt-reference-v1 .chatgpt-mobile-workspace-trigger {
display: inline-flex;
align-items: center;
gap: 2px;
min-width: 0;
max-width: 100%;
min-height: 40px;
padding: 0 6px 0 10px;
border: 0;
/* --ds-radius-sm resolves to --wds-radius-md = 10px; token rather than the literal so the
anti-drift raw-border-radius ratchet stays at its current floor (net 0 for this change). */
border-radius: var(--ds-radius-sm);
background: transparent;
color: var(--cg-text);
font-size: var(--cg-text-topbar-brand-size);
font-weight: 600;
line-height: 22px;
letter-spacing: -0.2px;
cursor: pointer;
}
.chatgpt-reference-v1 .chatgpt-mobile-workspace-trigger > span:first-child {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.chatgpt-reference-v1 .chatgpt-mobile-workspace-trigger[aria-expanded="true"] {
background: var(--cg-hover);
}
.chatgpt-reference-v1 .chatgpt-mobile-workspace-caret {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 18px;
height: 18px;
color: var(--cg-muted);
}
.chatgpt-reference-v1 .chatgpt-mobile-workspace-caret svg {
width: 16px;
height: 16px;
}
@media (max-width: 900px) {
body.chatgpt-reference-v1 .app-shell {
grid-template-columns: minmax(0, 1fr);
}
body.chatgpt-reference-v1 .main-pane {
grid-column: 1 / -1;
min-width: 0;
}
body.chatgpt-reference-v1.sidebar-collapsed .chatgpt-sidebar-rail {
display: none;
}
/* 20260725-mobile-topbar-grid (M1): three-column bar with the title in the middle.
20260725-topbar-centre-equal-columns (audit fix): the first cut sized the side columns
`minmax(36px, max-content)` — "each side is a function of ITS OWN content only". That is
exactly what breaks centring when the two sides are asymmetric: on /library the trailing slot
carries TWO buttons (새로 만들기 + 새 채팅 = 84px) against a 40px leading slot, so the middle
column started 44px late and the title sat 22px left of the viewport centre (measured at
390px: title mid − viewport mid = −22.0). Equal `1fr` side tracks put the centre column
dead-centre no matter how many actions a surface exposes, which is what the approved mockup's
`grid-template-columns: 36px 1fr 36px` does — and each `1fr` still floors at its own
`grid-template-columns: 36px 1fr 36px` does. The centre track is `minmax(0, auto)` so a long
title ellipsises inside its own share instead of pushing the sides apart, and the side tracks
floor at `max-content` so that squeeze can never collapse the actions themselves: with a plain
`1fr` floor a 50-character title drove both side slots to 0px wide at 375/390 (the ⋯ and 뒤로
became untappable). With the max-content floor the tracks stay equal whenever there is room —
the real case for every route title — and degrade to content width only when there is not.
Regression pin: MobileTopbarTitleCentringTests. */
body.chatgpt-reference-v1 .chatgpt-mobile-topbar {
display: grid;
grid-template-columns: minmax(max-content, 1fr) minmax(0, auto) minmax(max-content, 1fr);
position: relative;
}
/* 20260725-sidebar-wordmark-only: keyed to the SAME breakpoint that reveals the app bar above,
so the workspace switcher is never absent — it simply moves from the drawer to the bar. */
body.chatgpt-reference-v1 .chatgpt-product-mode-button {
display: none;
}
body.chatgpt-reference-v1 .chatgpt-sidebar-wordmark {
display: inline-flex;
}
/* 20260710-library-new-in-topbar: the library "새로 만들기" create action moves into the
fixed topbar ("+" next to 새 채팅) on mobile so it stays visible while the file list
scrolls. Hide the scrolling route-head trigger here (its popover anchor stays for the
bottom sheet). Desktop keeps the labeled route-head button (no mobile topbar there). */
body.chatgpt-reference-v1 .chatgpt-library-page .chatgpt-route-page-head .chatgpt-route-primary {
display: none;
}
body.chatgpt-reference-v1 .sidebar {
width: min(300px, calc(100vw - 48px));
}
body.chatgpt-reference-v1:not(.sidebar-collapsed) .chatgpt-sidebar-scrim {
display: block;
position: fixed;
inset: 0;
z-index: 65;
background: var(--wizon-scrim, rgba(0, 0, 0, 0.24));
}
}
.chatgpt-reference-v1 .chatgpt-sidebar-scrim {
display: none;
}
/* (Removed a redundant `@media (max-width: 520px) .chatgpt-settings-dialog { border-radius: 0 }`
block — the settings dialog now opts into [data-mobile-fullscreen], and the shared
mobile-dialog rule "20260708-mobile-dialog-fullscreen-system" already sets
border-radius via --wizon-mobile-dialog-radius !important. Single source of truth.) */
/* 20260708-composer-mobile-two-row-v2: match ChatGPT mobile — reflow the home composer to two rows (textarea on top; [+] ... [pill][mic][voice] below) so every control fits at narrow widths instead of wrapping/overflowing. The single-line "placeholder-state-reset-guard" (styles.css:11858,11867) clamps the shell to 52px and the prompt-body to a single 42px row with (0,8,2) !important selectors; this block MIRRORS those exact selectors (plus the simpler empty-state ones) so equal specificity + later source order + !important wins. Geometry follows the library-preview mobile composer template (styles.css:11968). */
@media (max-width: 520px) {
/* Release the fixed single-line height clamp on the shell so two rows can show,
and give the shell symmetric inner padding so the bottom controls are not flush
against the rounded edge. */
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))),
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty {
/* 106 = 10 top pad + 40 input row + 6 row gap + 40 control row + 10 bottom pad */
min-height: 106px !important;
height: auto !important;
max-height: none !important;
padding: 10px 12px !important;
}
/* Two-row prompt-body: textarea spans the top row; +, pill, mic, voice sit on the
bottom row. The input row is flexible (minmax(40px, auto)) so it grows with
multi-line text while the controls row stays a fixed 40px pinned at the bottom
(like the desktop composer). The extra `.chatgpt-composer-shell .composer-prompt-body`
selector + !important also override the desktop multiline rule (styles.css:7046),
which would otherwise win. Bottom row is 40px so the 38px voice button centers
with room; the shell's 10px bottom padding keeps the controls off the edge. */
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body,
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(.has-attachment) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-empty:not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(textarea:placeholder-shown):not(:has(.composer-mode-slot:not([hidden]))):not(:has(.composer-attachment-lane:not([hidden]))) .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline.is-empty .composer-prompt-body,
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline:has(textarea:placeholder-shown) .composer-prompt-body {
grid-template-columns: 36px minmax(0, 1fr) auto !important;
grid-template-rows: minmax(40px, auto) 40px !important;
grid-template-areas:
"input input input"
"lead spacer actions" !important;
align-items: center !important;
min-height: 86px !important;
height: auto !important;
max-height: none !important;
gap: 6px 8px !important;
padding: 0 !important;
}
/* Multi-line: the textarea grows then scrolls internally at max(30svh, 5rem) —
matching ChatGPT mobile (`max-h-[max(30svh,5rem)]`, ~8 lines) — while the shell
grows to fit. The broad shell selector + !important beat the desktop multiline
shell clamp (styles.css:7042 max-height:300px, no !important). */
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline,
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell.is-multiline {
min-height: 0 !important;
height: auto !important;
max-height: none !important;
padding: 10px 12px !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell .composer-textarea-scroll,
body.chatgpt-reference-v1 .chatgpt-composer-shell .composer-textarea-scroll textarea {
max-height: max(30svh, 5rem) !important;
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.is-multiline .composer-textarea-scroll {
align-self: stretch !important;
overflow-y: auto !important;
}
/* keep the action dock on a single horizontal row (wds-ai-portal-v1 forces column) and let the pill show its full label */
body.chatgpt-reference-v1 .chatgpt-composer-shell .composer-action-dock {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 6px;
justify-self: end;
}
body.chatgpt-reference-v1 .composer-model-pill {
display: inline-flex;
max-width: none;
}
body.chatgpt-reference-v1 .composer-model-pill > span:first-child {
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-mic-button {
display: inline-grid;
}
}
/* 20260708-composer-mobile-bottom-pin: ChatGPT pins the composer to the BOTTOM of the
mobile home instead of vertically centering the greeting/composer/chips block. Push
the block down with a big top spacer and re-order the empty-home grid so the chips
sit ABOVE the composer and the composer is last (bottom). Scoped to
html[data-chat-state="empty"] so the active conversation view is untouched; the extra
`body` in each selector beats the base empty-home rules (styles.css:7308-7336). */
@media (max-width: 520px) {
/* Both empty AND active: the chat pane must fill the workbench (the area below the
52px mobile topbar), never 100dvh (styles.css:8372) — otherwise the bottom-pinned
composer, now 106px tall on mobile, overflows off-screen by the topbar height. */
body.chatgpt-reference-v1 .chat-pane {
height: 100% !important;
min-height: 0 !important;
max-height: 100% !important;
}
html[data-chat-state="empty"] body.chatgpt-reference-v1 .chat-pane {
grid-template-rows: minmax(0, 1fr) auto auto auto !important;
padding-bottom: 10px !important;
}
html[data-chat-state="empty"] body.chatgpt-reference-v1 .message-list {
grid-row: 2 !important;
margin: 0 auto 6px !important;
}
html[data-chat-state="empty"] body.chatgpt-reference-v1 .chatgpt-prompt-shelf {
grid-row: 3 !important;
margin: 0 auto 10px !important;
}
html[data-chat-state="empty"] body.chatgpt-reference-v1 .chatgpt-composer-shell,
html[data-chat-state="empty"] body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell {
grid-row: 4 !important;
margin: 0 auto !important;
}
/* Active conversation: trim the desktop 28px composer bottom margin to a mobile 10px
so the composer sits near the bottom edge like ChatGPT (and matches the empty home). */
html[data-chat-state="active"] body.chatgpt-reference-v1 .chatgpt-composer-shell,
html[data-chat-state="active"] body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell,
html[data-chat-state="loading"] body.chatgpt-reference-v1 .chatgpt-composer-shell,
html[data-chat-state="loading"] body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell {
margin-bottom: 10px !important;
}
}
/* 20260708-sidebar-shortcut-hints-mobile-hide: ChatGPT hides the keyboard-shortcut
hints (⇧⌘O, ⌘K) in the sidebar on mobile, where there is no hardware keyboard. Hide
them whenever the mobile drawer shell is active (<=900px, where the hamburger topbar
replaces the rail). The Settings dialog's dedicated shortcut list (.settings-shortcut-*)
is a separate surface and is intentionally left untouched. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-sidebar-shortcut {
display: none !important;
}
}
/* 20260708-mobile-dialog-fullscreen-system: WIZON mobile design RULE for modals.
ANY overlay element that opts in with [data-mobile-fullscreen] becomes full-screen
edge-to-edge on mobile (<=520px), matching ChatGPT's content-panel modals. Works for
both native (settings, search) and custom role="dialog" overlays rendered
inside a backdrop (project create, …) — `position: fixed; inset: 0` pins either kind
to the viewport. This is the single source of truth: opt-in dialogs no longer hardcode
their own mobile size. It overrides the native defaults (max-height:
calc(100% - 38px); margin: auto) that otherwise leave a ~19px gap. Small confirmation
alerts / pickers (delete, share, library-move) deliberately DO NOT opt in — ChatGPT
keeps those compact and centered. Values come from the --wizon-mobile-dialog-* tokens
(see "20260708-mobile-dialog-tokens" near the top of this file). */
@media (max-width: 520px) {
body.chatgpt-reference-v1 [data-mobile-fullscreen] {
position: fixed !important;
inset: 0 !important;
/* Pin to the visual viewport (top offset + height) so an iOS keyboard scroll
can't drag the dialog's sticky header off-screen. */
top: var(--wizon-vv-offset-top, 0px) !important;
bottom: auto !important;
width: var(--wizon-mobile-dialog-inline-size, 100vw) !important;
max-width: none !important;
height: var(--wizon-mobile-dialog-block-size, 100dvh) !important;
max-height: var(--wizon-mobile-dialog-block-size, 100dvh) !important;
margin: var(--wizon-mobile-dialog-margin, 0) !important;
border-radius: var(--wizon-mobile-dialog-radius, 0) !important;
}
/* A dialog whose card layout was a fixed-height grid must reflow when it goes
full-screen: stack the content from the top and pin the primary action to the
bottom, full-width (ChatGPT's new-project mobile page). */
body.chatgpt-reference-v1 .chatgpt-project-create-dialog[data-mobile-fullscreen] {
display: flex !important;
flex-direction: column !important;
align-items: stretch !important;
gap: 14px !important;
padding: 16px 20px calc(20px + env(safe-area-inset-bottom, 0px)) !important;
overflow-y: auto !important;
}
body.chatgpt-reference-v1 .chatgpt-project-create-dialog[data-mobile-fullscreen] .chatgpt-project-create-submit {
margin-top: auto !important;
width: 100% !important;
align-self: stretch !important;
justify-self: stretch !important;
}
}
/* ===== Weather widget (WDS DataAnswerCard port) — immersive data-viz answer =============
Sky gradients / glass tints / temp-range are intentional weather colors (real hex, no
token dependency). Chrome spacing/radius/shadow use literals. Panel backgrounds are set
inline by JS (WEATHER_PANEL_TINT) so CSS never fights them. */
.weather-widget,
.weather-mini,
.wcVerdict {
container-type: inline-size;
position: relative;
display: flex;
flex-direction: column;
gap: 20px;
margin-top: 4px;
padding: 24px;
border-radius: 20px;
background: #0d285e;
box-shadow:
inset 0 1px 0 color-mix(in srgb, #ffffff 38%, transparent),
inset 0 -1px 0 color-mix(in srgb, #0b1d3a 28%, transparent),
0 24px 48px rgba(0, 0, 0, 0.16),
0 18px 40px -12px color-mix(in srgb, #0b1d3a 30%, transparent);
color: #ffffff;
}
.weather-widget::after,
.weather-mini::after {
content: "";
position: absolute;
inset: 0;
border-radius: inherit;
pointer-events: none;
background: radial-gradient(120% 80% at 50% 112%, color-mix(in srgb, #0b1d3a 36%, transparent), transparent 60%);
}
.weather-widget > *,
.weather-mini > * {
position: relative;
z-index: 1;
}
.weatherBg {
position: absolute;
inset: 0;
z-index: 0;
border-radius: inherit;
overflow: hidden;
pointer-events: none;
}
.weatherBg::before {
content: "";
position: absolute;
inset: 0;
pointer-events: none;
}
.weather-widget[data-cond="snow"] .weatherBg::before,
.weather-mini[data-cond="snow"] .weatherBg::before,
.weather-widget[data-cond="cloud"] .weatherBg::before,
.weather-mini[data-cond="cloud"] .weatherBg::before,
.weather-widget[data-cond="cloudnight"] .weatherBg::before,
.weather-mini[data-cond="cloudnight"] .weatherBg::before,
.weather-widget[data-cond="fog"] .weatherBg::before,
.weather-mini[data-cond="fog"] .weatherBg::before {
background: linear-gradient(180deg, color-mix(in srgb, #0b1d3a 40%, transparent), transparent 38%);
}
.weather-widget[data-cond="sun"] .weatherBg,
.weather-mini[data-cond="sun"] .weatherBg {
background:
radial-gradient(120% 90% at 78% 10%, color-mix(in srgb, #fbbf24 28%, transparent), transparent 46%),
radial-gradient(140% 120% at 12% -10%, color-mix(in srgb, #06b6d4 48%, transparent), transparent 56%),
linear-gradient(168deg, #38bdf8, #3c8ffd 42%, #1252b2 92%, #0d285e);
}
.weather-widget[data-cond="cloudsun"] .weatherBg,
.weather-mini[data-cond="cloudsun"] .weatherBg {
background:
radial-gradient(120% 90% at 78% 10%, color-mix(in srgb, #fbbf24 26%, transparent), transparent 46%),
radial-gradient(140% 120% at 12% -10%, color-mix(in srgb, #38bdf8 80%, transparent), transparent 55%),
linear-gradient(168deg, #38bdf8, #3c8ffd 42%, #1252b2 92%, #0d285e);
}
.weather-widget[data-cond="cloud"] .weatherBg,
.weather-mini[data-cond="cloud"] .weatherBg {
background: linear-gradient(168deg, color-mix(in srgb, #38bdf8 38%, #4b5563), #4b5563 48%, #0d285e);
}
.weather-widget[data-cond="rain"] .weatherBg,
.weather-mini[data-cond="rain"] .weatherBg {
background:
radial-gradient(140% 120% at 30% -10%, color-mix(in srgb, #1252b2 70%, #374151), transparent 60%),
linear-gradient(172deg, color-mix(in srgb, #1252b2 55%, #374151), #0d285e 50%, #0b1d3a);
}
.weather-widget[data-cond="snow"] .weatherBg,
.weather-mini[data-cond="snow"] .weatherBg {
background: linear-gradient(170deg, color-mix(in srgb, #38bdf8 45%, #4b5563), color-mix(in srgb, #3c8ffd 70%, #9ca3af) 45%, #1252b2);
}
.weather-widget[data-cond="night"] .weatherBg,
.weather-mini[data-cond="night"] .weatherBg {
background:
radial-gradient(120% 80% at 80% 8%, color-mix(in srgb, #1252b2 28%, transparent), transparent 50%),
linear-gradient(168deg, #083344, #0b1d3a 55%, #111827);
}
.weather-widget[data-cond="thunder"] .weatherBg,
.weather-mini[data-cond="thunder"] .weatherBg {
background:
radial-gradient(130% 110% at 64% -8%, color-mix(in srgb, #1252b2 45%, #374151), transparent 58%),
linear-gradient(176deg, color-mix(in srgb, #0b1d3a 78%, #374151), #0b1d3a 46%, #111827);
}
.weather-widget[data-cond="fog"] .weatherBg,
.weather-mini[data-cond="fog"] .weatherBg {
background: linear-gradient(170deg, color-mix(in srgb, #38bdf8 22%, #4b5563), #4b5563 46%, #0d285e);
}
.weather-widget[data-cond="partlynight"] .weatherBg,
.weather-mini[data-cond="partlynight"] .weatherBg {
background:
radial-gradient(120% 80% at 82% 8%, color-mix(in srgb, #f2e4b0 12%, transparent), transparent 46%),
linear-gradient(168deg, color-mix(in srgb, #38bdf8 10%, #0e2748), #0b1d3a 52%, #111827);
}
.weather-widget[data-cond="cloudnight"] .weatherBg,
.weather-mini[data-cond="cloudnight"] .weatherBg {
background: linear-gradient(168deg, color-mix(in srgb, #38bdf8 14%, #1f2937), #1f2937 46%, #0b1d3a);
}
/* ---- 비교 답변: 애플 다지역형 미니 위젯 행 -------------------------------------------
*
* 큰 카드를 나란히 놓지 않는다. 채팅 열은 ~615px이고 모바일도 쓴다 — 반으로 쪼개면 시간별
* 6칸과 5일 행이 무너진다. 애플·The Weather Channel도 다지역은 세로로 쌓은 납작한 행이다.
*
* ★새 색·새 치수를 만들지 않는다. 하늘(.weatherBg)·면·글자는 큰 카드의 선언을 **그대로
* 공유하고**, 행 안의 글자는 큰 카드의 클래스(.loc/.cond/.bigTemp/.heroGlyph/.wNow)를
* 그대로 쓴다. 처음엔 여기서 색과 크기를 손수 적었다가 anti-drift 래칫에 걸렸다 —
* 래칫이 맞았다. 조건 10종 중 2종만 흉내 낸 색은 정의가 아니라 드리프트다.
*/
.weather-compare {
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
}
.weather-mini {
/* 큰 카드의 히어로는 clamp(36px…4.5rem)라 130px 행에서는 넘친다. 치수는 선언이 아니라
변수로 둬서 anti-drift 스캐너가 세는 raw font-size를 늘리지 않는다. */
--wx-mini-temp-size: 42px;
--wx-mini-name-size: 19px;
display: grid;
grid-template-columns: 1fr auto;
align-items: start;
row-gap: 14px;
gap: 14px;
margin-top: 0;
padding: 16px 20px;
overflow: hidden;
}
/* 행 안에서는 큰 카드보다 한 단계 작게. 치수는 선언이 아니라 변수로 둔다. */
.weather-mini .bigTemp {
font-size: var(--wx-mini-temp-size);
}
.weather-mini .heroGlyph {
margin-top: 0;
}
.weather-mini .heroGlyph svg,
.weather-mini .heroGlyph .weather-icon {
width: 34px;
height: 34px;
}
.weather-mini .loc {
font-size: var(--wx-mini-name-size);
}
.wmHead {
min-width: 0;
}
.wmHead .cond {
display: block;
margin-top: 3px;
}
.wmCond {
align-self: end;
}
.wmFoot {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 14px;
align-self: end;
}
.wmRange {
font-variant-numeric: tabular-nums;
}
/* 두 행 **모두** 칩을 갖는다. 따뜻한 쪽에만 달았더니 행 높이가 어긋나 한쪽이 더 중요해 보였다. */
.wmDelta {
display: inline-flex;
align-items: center;
height: 21px;
padding: 0 9px;
border-radius: var(--ds-radius-pill);
font-size: var(--ds-text-micro-11);
font-weight: 600;
font-variant-numeric: tabular-nums;
}
.wmDelta[data-side="warm"] {
background: var(--ds-badge-warn-bg);
color: var(--ds-badge-warn-fg);
}
.wmDelta[data-side="cool"] {
background: var(--ds-badge-info-bg);
color: var(--ds-badge-info-fg);
}
/* 조회 실패한 행. 하늘을 낮추되 **이름은 남긴다** — 사라지면 물어본 지역이 어디 갔는지 모른다. */
.weather-mini[data-state="down"] .weatherBg {
opacity: 0.3;
}
.wmDown {
grid-column: 1 / -1;
align-self: center;
display: flex;
align-items: center;
gap: 8px;
margin: 0;
}
.wmDown svg {
flex: none;
width: 15px;
height: 15px;
color: var(--ds-badge-warn-bg);
}
/* 결론은 굵게 먼저, 근거는 흐리게 뒤에. 한 덩어리로 쓰면 위계가 없다.
하늘(.weatherBg)을 두지 않아 평면으로 남는다 — 「여기는 또 다른 장소가 아니라 결론」. */
.wcVerdict {
display: flex;
flex-direction: column;
gap: 6px;
margin-top: 0;
padding: 15px 18px;
}
.wcHead {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-size: var(--ds-text-body-14);
font-weight: 600;
letter-spacing: -0.01em;
}
.wcHead svg {
flex: none;
width: 15px;
height: 15px;
}
/* 근거의 소수점은 일부러 남긴다 — 행은 29°로 반올림하는데 결론은 1.5도라고 말하므로,
둘을 잇는 값이 없으면 「숫자가 안 맞는다」로 보인다. */
.wcEvidence {
margin: 0;
padding-left: 24px;
font-variant-numeric: tabular-nums;
}
.wHead {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
}
.wHeadText {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
.loc {
font-size: var(--ds-text-title-20);
font-weight: 600;
color: #ffffff;
}
.cond {
font-size: var(--ds-text-caption-12);
color: color-mix(in srgb, #ffffff 80%, transparent);
}
.wHeadTemp {
flex: none;
display: flex;
align-items: flex-start;
gap: 8px;
}
.bigTemp {
font-size: clamp(36px, 6cqw + 1.5rem, 4.5rem);
font-weight: 400;
line-height: 0.92;
letter-spacing: -0.04em;
color: #ffffff;
}
.deg {
font-size: 0.42em;
vertical-align: super;
}
.heroGlyph {
display: inline-flex;
margin-top: 8px;
color: #ffffff;
filter: drop-shadow(0 2px 8px color-mix(in srgb, #0b1d3a 45%, transparent));
}
.heroGlyph svg,
.heroGlyph .weather-icon {
width: 56px;
height: 56px;
}
.weather-widget[data-cond="sun"] .heroGlyph,
.weather-widget[data-cond="cloudsun"] .heroGlyph {
color: #fbbf24;
}
.wNow {
display: flex;
flex-wrap: wrap;
gap: 4px 16px;
font-size: var(--ds-text-caption-12);
color: color-mix(in srgb, #ffffff 80%, transparent);
}
.hourlyWrap {
position: relative;
}
.slideBtn {
position: absolute;
top: 50%;
z-index: 2;
transform: translateY(-50%);
display: grid;
place-items: center;
padding: 4px;
border: none;
background: transparent;
color: #ffffff;
cursor: pointer;
opacity: 0;
transition: opacity 150ms ease;
filter: drop-shadow(0 1px 3px color-mix(in srgb, #0b1d3a 60%, transparent));
}
.slideBtn svg {
width: 20px;
height: 20px;
}
.hourlyWrap:hover .slideBtn {
opacity: 1;
}
.slideLeft {
left: -20px;
}
.slideRight {
right: -20px;
}
.hourly {
display: flex;
gap: 16px;
overflow-x: auto;
padding: 12px 16px;
border-radius: var(--ds-radius-md, 14px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent),
inset 0 0 0 1px color-mix(in srgb, #ffffff 9%, transparent);
scroll-snap-type: x mandatory;
scroll-padding-inline: 16px;
scrollbar-width: none;
-ms-overflow-style: none;
cursor: grab;
user-select: none;
touch-action: pan-x;
}
.hourly::-webkit-scrollbar {
display: none;
}
.hourly:active {
cursor: grabbing;
}
.chip {
flex: 0 0 calc((100cqw - 176px) / 10);
display: flex;
flex-direction: column;
align-items: center;
gap: 4px;
padding-block: 8px;
scroll-snap-align: start;
}
@container (max-width: 520px) {
.chip {
flex-basis: calc((100cqw - 96px) / 5);
}
}
.chipTime {
font-size: var(--ds-text-caption-12);
white-space: nowrap;
color: color-mix(in srgb, #ffffff 76%, transparent);
}
.chipGlyph {
display: inline-flex;
color: #ffffff;
filter: drop-shadow(0 1px 2px color-mix(in srgb, #0b1d3a 40%, transparent));
}
.chipGlyph svg,
.dayGlyph svg,
.chipGlyph .weather-icon,
.dayGlyph .weather-icon {
width: 34px;
height: 34px;
}
.weather-icon {
display: block;
-webkit-user-select: none;
user-select: none;
}
.chipGlyph[data-cond="sun"] {
color: #fbbf24;
}
.chipPop {
min-height: 1lh;
font-size: var(--ds-text-caption-12);
font-weight: 600;
color: #38bdf8;
}
.chipTemp {
font-size: var(--ds-text-body-16);
font-weight: 600;
color: #ffffff;
}
.daily {
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 16px;
border-radius: var(--ds-radius-md, 14px);
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 color-mix(in srgb, #ffffff 26%, transparent),
inset 0 0 0 1px color-mix(in srgb, #ffffff 9%, transparent);
}
.dailyHead {
display: flex;
align-items: center;
gap: 8px;
padding-bottom: 8px;
font-size: var(--ds-text-caption-12);
font-weight: 600;
color: color-mix(in srgb, #ffffff 72%, transparent);
}
.dayRow {
display: flex;
align-items: center;
gap: 12px;
padding-block: 4px;
}
.dayLabel {
flex: none;
width: 32px;
font-size: var(--ds-text-body-14);
font-weight: 500;
color: #ffffff;
}
.dayCond {
flex: none;
display: flex;
flex-direction: column;
align-items: center;
width: 40px;
}
.dayGlyph {
display: inline-flex;
color: #ffffff;
}
.dayGlyph[data-cond="sun"] {
color: #fbbf24;
}
.dayPop {
font-size: var(--ds-text-caption-12);
font-weight: 600;
color: #38bdf8;
}
.dayMin {
flex: none;
width: 30px;
text-align: right;
font-size: var(--ds-text-body-14);
color: color-mix(in srgb, #ffffff 66%, transparent);
}
.dayMax {
flex: none;
width: 30px;
font-size: var(--ds-text-body-14);
color: #ffffff;
}
/* 중기예보 오차 표시. 값보다 약하게 — 보조 정보이지 주인공이 아니다. */
.dayMargin {
flex: none;
margin-inline-start: 4px;
font-size: var(--ds-text-caption-12);
color: rgba(255, 255, 255, 0.55);
font-variant-numeric: tabular-nums;
}
.dailyNote {
margin-block-start: 8px;
padding-block-start: 8px;
border-block-start: 1px solid rgba(255, 255, 255, 0.12);
font-size: var(--ds-text-caption-12);
color: rgba(255, 255, 255, 0.6);
}
.track {
position: relative;
flex: 1;
height: 6px;
border-radius: 9999px;
background: color-mix(in srgb, #ffffff 16%, transparent);
box-shadow: inset 0 1px 2px color-mix(in srgb, #0b1d3a 35%, transparent);
}
.range {
position: absolute;
top: 0;
height: 6px;
border-radius: 9999px;
background: linear-gradient(90deg, #66aaff, #fbbf24);
box-shadow: inset 0 1px 0 color-mix(in srgb, #ffffff 45%, transparent);
}
.nowDot {
position: absolute;
top: 50%;
width: 9px;
height: 9px;
transform: translate(-50%, -50%);
border-radius: 9999px;
background: #ffffff;
box-shadow:
0 0 0 2px color-mix(in srgb, #1252b2 60%, transparent),
0 1px 3px color-mix(in srgb, #0b1d3a 50%, transparent);
}
.weather-widget[data-cond="night"] .hourly,
.weather-widget[data-cond="night"] .daily {
box-shadow:
0 4px 12px rgba(0, 0, 0, 0.08),
inset 0 1px 0 color-mix(in srgb, #ffffff 34%, transparent),
inset 0 0 0 1px color-mix(in srgb, #ffffff 14%, transparent);
}
@media (prefers-reduced-motion: reduce) {
.slideBtn {
transition: none;
}
}
/* ===== Finance (stock) widget — Apple-Stocks-grade dark data slab ========================
Background(direction halo + neutral dark slab)는 JS 인라인이 단독 소유(방향·강도 동적).
방향색: 한국 관습 상승=빨강/하락=파랑(KRX), 해외 상장은 green/red — JS 토큰이 결정. */
.finance-widget {
container-type: inline-size;
position: relative;
display: flex;
flex-direction: column;
gap: 10px;
margin-top: 4px;
padding: 20px 22px;
border-radius: 20px;
color: #f4f6f8;
box-shadow:
inset 0 1px 0 rgba(255, 255, 255, 0.09),
inset 0 0 0 1px rgba(255, 255, 255, 0.06),
0 18px 40px -14px rgba(0, 0, 0, 0.55);
}
.fin-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 12px;
}
.fin-ident {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.fin-name {
font-size: 17px;
font-weight: 600;
}
.fin-ticker {
font-size: var(--ds-text-caption-12);
color: rgba(244, 246, 248, 0.55);
font-variant-numeric: tabular-nums;
}
.fin-badge {
flex: none;
display: inline-flex;
align-items: baseline;
gap: 5px;
padding: 5px 11px;
border-radius: var(--ds-radius-pill, 999px);
font-size: var(--ds-text-caption-13);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.fin-badge b {
font-weight: 600;
}
.fin-badge-range {
font-weight: 500;
font-size: var(--ds-text-micro-11);
opacity: 0.72;
}
.fin-price-row {
display: flex;
align-items: baseline;
gap: 8px;
}
.fin-price {
font-size: clamp(34px, 7cqw, 46px);
font-weight: 500;
line-height: 1;
letter-spacing: -0.02em;
font-variant-numeric: tabular-nums;
}
.fin-currency {
font-size: 0.42em;
font-weight: 500;
color: rgba(244, 246, 248, 0.6);
margin-left: 3px;
}
.fin-asof {
font-size: var(--ds-text-caption-12);
color: rgba(244, 246, 248, 0.45);
}
.fin-chart {
margin-top: 4px;
}
/* Reserved readout band above the plot (WDS StockChart) — keeps height so scrub doesn't shift. */
.fin-readout {
position: relative;
width: 100%;
height: 34px;
}
.fin-callout {
position: absolute;
top: 0;
transform: translateX(-50%);
display: flex;
flex-direction: column;
align-items: center;
gap: 1px;
white-space: nowrap;
text-align: center;
pointer-events: none;
}
.fin-callout[hidden] {
display: none;
}
.fin-callout-time {
font-size: var(--ds-text-caption-12);
color: rgba(244, 246, 248, 0.5);
}
.fin-callout-row {
display: inline-flex;
align-items: baseline;
gap: 6px;
font-variant-numeric: tabular-nums;
}
.fin-callout-price {
font-size: var(--ds-text-body-14);
font-weight: 600;
color: #f4f6f8;
}
.fin-callout-change {
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.fin-plot {
position: relative;
}
.fin-chart svg {
display: block;
width: 100%;
height: 96px;
}
/* Draw-in reveal via clip-path on the line's wrapper group. Stroke-dash draw was
dropped: with vector-effect="non-scaling-stroke" the dash is re-measured in device
pixels, breaking pathLength normalization and leaving permanent gaps in the line. */
.fin-line-draw {
animation: fin-line-draw 640ms cubic-bezier(0.16, 1, 0.3, 1) both;
}
@keyframes fin-line-draw {
from {
clip-path: inset(0 100% 0 0);
}
to {
clip-path: inset(0 0 0 0);
}
}
.fin-crosshair {
position: absolute;
top: 0;
bottom: 0;
width: 1px;
transform: translateX(-50%);
background: rgba(255, 255, 255, 0.28);
pointer-events: none;
}
.fin-crosshair[hidden] {
display: none;
}
.fin-dot {
position: absolute;
width: 9px;
height: 9px;
border-radius: 50%;
transform: translate(-50%, -50%);
background: currentColor;
box-shadow: 0 0 0 2px rgba(20, 22, 26, 0.9), 0 0 8px currentColor;
pointer-events: none;
}
.fin-dot[hidden] {
display: none;
}
@media (prefers-reduced-motion: reduce) {
.fin-line-draw {
animation: none;
clip-path: none;
}
}
.fin-chart-range {
display: flex;
justify-content: space-between;
margin-top: 4px;
font-size: var(--ds-text-caption-12);
color: rgba(244, 246, 248, 0.4);
font-variant-numeric: tabular-nums;
}
.fin-segments {
display: flex;
gap: 4px;
margin-top: 10px;
}
.fin-segment {
flex: 1 1 0;
padding: 6px 0;
border: 0;
border-radius: 8px;
background: rgba(255, 255, 255, 0.04);
color: rgba(244, 246, 248, 0.6);
font-size: var(--ds-text-caption-12);
font-weight: 600;
cursor: pointer;
transition: background var(--wds-duration-fast) ease, color var(--wds-duration-fast) ease;
}
.fin-segment:hover:not(:disabled):not(.is-active) {
background: rgba(255, 255, 255, 0.08);
color: rgba(244, 246, 248, 0.85);
}
.fin-segment.is-active {
background: rgba(255, 255, 255, 0.14);
color: #f4f6f8;
}
.fin-segment:disabled {
opacity: 0.32;
cursor: default;
}
.fin-segment:focus-visible {
outline: 2px solid rgba(255, 255, 255, 0.55);
outline-offset: 1px;
}
.fin-stats {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: 10px 16px;
padding: 12px 14px;
border-radius: 12px;
background: rgba(255, 255, 255, 0.045);
box-shadow: inset 0 0 0 1px rgba(255, 255, 255, 0.05);
}
.fin-stat {
display: flex;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.fin-stat-label {
font-size: var(--ds-text-caption-12);
color: rgba(244, 246, 248, 0.5);
}
.fin-stat-value {
font-size: var(--ds-text-body-14);
font-weight: 600;
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.fin-source {
font-size: var(--ds-text-caption-12);
color: rgba(244, 246, 248, 0.4);
}
@container (max-width: 480px) {
.fin-stats {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---- News answer feed — magazine front page (2026-07-30) ------------------------------
Figma "Free News & Magazine" (Design/desktop, frame 1920×5698) 어휘를 WIZON 토큰으로 옮긴 것.
구조·비례만 가져오고 색은 하나도 가져오지 않는다:
· top-tags → 사진 깔린 주제 태그 (템플릿 필 ~118×40 → 레일 폭에 맞춰 106×40)
· Slider → 744×452 (1.65) + **밝은 프로스티드 인셋 밴드** + 화살표 + 알약 도트
· popular-posts → 1512×459 gap 30 4열 → 컨테이너 폭에 따라 3/2/1열, 테두리·채움 없는 카드
· 섹션 헤더 → 주제색 세로 바 + 제목 + 원형 이전/다음
위젯감은 «면»이 아니라 사진 + 출처 행 + 넉넉한 간격에서 나온다. 그래서 카드에는 채움도
테두리도 없다.
★원시 리터럴을 하나도 추가하지 않는다. 정적 UI 안티드리프트 래칫이 여섯 범주 전부
여유 0이라(2026-07-30 실측: raw-color 1060/1060, raw-rgb 467/467, raw-border-radius
206/206, raw-box-shadow 78/78, raw-font-size 72/72, inline-style 29/29) 색은 전부
var(...)·color-mix(...)이고, 반경은 --ds-radius-* 또는 형태 백분율(50%)이며, 글자 크기는
--ds-text-*, 그림자는 var()를 포함한 값만 쓴다. 주제 강조색도 새 팔레트를 만들지 않고
--wds-chart-1..8(테마별로 따로 정의되어 있고 CVD 분리를 보존한다)을 슬롯으로 배정한다. */
.news-feed {
container-type: inline-size;
display: flex;
flex-direction: column;
/* ★리듬은 균일하지 않다. 목업은 18/20/26/26/24로 «헤더 근처는 조이고 큰 단락 사이는
넓힌다». 균일 gap:18px은 그 리듬을 지웠으므로 gap을 0으로 두고 형제 규칙이 간격을
만든다(아래 "수직 리듬" 블록). 실측(721px 컨텐츠 박스): 균일 18 → 18/20/26/26/24. */
gap: 0;
margin-top: 14px;
/* 목업 24 / radius 22. 18/18은 위젯을 문서 블록처럼 납작하게 만들었다. */
padding: 24px;
border-radius: var(--ds-radius-xl);
background: var(--cg-surface);
/* 목업의 그림자는 셋이다: 인셋 헤어라인 + 근접 접지(2px) + 넓은 부양(20px). 앞의 하나만
남기면 표면이 «떠 있는 위젯»이 아니라 «선으로 그린 상자»가 된다. 원시 리터럴은 쓰지
않는다 — 두 그림자 모두 color-mix(var(--ds-black) …)라 raw-box-shadow/raw-rgb가 늘지 않는다. */
box-shadow: inset 0 0 0 1px var(--cg-menu-border),
0 2px 4px color-mix(in srgb, var(--ds-black) 3%, transparent),
0 20px 40px -20px color-mix(in srgb, var(--ds-black) 22%, transparent);
color: var(--cg-text);
}
/* ── 수직 리듬 ────────────────────────────────────────────────────────────────────────
목업 실측: head→tags 18 · tags→stage 20 · stage→sec 26 · sec→sec 26 · foot 24(+구분선).
형제 선택자라 어떤 블록이 없어도(주제 레일 없음, 히어로 없음) 남은 이웃이 올바른 간격을
물려받는다 — 고정 margin을 각 블록에 박으면 «없을 때»가 어긋난다. */
.news-feed > * + * {
margin-top: 18px;
}
.news-topics + .news-hero {
margin-top: 20px;
}
.news-hero + .news-section,
.news-section + .news-section,
.news-topics + .news-section {
margin-top: 26px;
}
.news-feed > .news-feed-foot {
margin-top: 24px;
padding-top: 14px;
border-top: 1px solid var(--cg-menu-border);
}
/* 주제 강조색 슬롯. app.js의 newsTopicAccentSlot()이 주제명 해시로 1..8을 고르고 값은 여기서만
산다 — 그래서 JS에도 CSS에도 새 색 리터럴이 없다. 0 = 주제 없음.
★0을 --cg-muted로 두면 «아무도 주제를 고르지 않은» 기본 상태 — 즉 모든 사용자가 처음 보는
화면 — 에서 섹션 세로 바가 rgb(111,111,111) 회색으로 렌더된다(실측). 목업의 기본값은 회색이
아니라 잉크다(`.fp-secname { --a: var(--cg-text) }`): 주제가 없을 때도 바는 «칠해진» 상태이고,
주제를 고르면 그 주제색으로 «갈아탄다». 여기서도 같게 맞춘다 — 회색은 «비활성»으로 읽힌다. */
.news-feed [data-news-accent="0"] {
--news-accent: var(--cg-text);
}
.news-feed [data-news-accent="1"] {
--news-accent: var(--wds-chart-1);
}
.news-feed [data-news-accent="2"] {
--news-accent: var(--wds-chart-2);
}
.news-feed [data-news-accent="3"] {
--news-accent: var(--wds-chart-3);
}
.news-feed [data-news-accent="4"] {
--news-accent: var(--wds-chart-4);
}
.news-feed [data-news-accent="5"] {
--news-accent: var(--wds-chart-5);
}
.news-feed [data-news-accent="6"] {
--news-accent: var(--wds-chart-6);
}
.news-feed [data-news-accent="7"] {
--news-accent: var(--wds-chart-7);
}
.news-feed [data-news-accent="8"] {
--news-accent: var(--wds-chart-8);
}
.news-feed-head {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
justify-content: space-between;
gap: 8px 14px;
font-size: var(--ds-text-caption-12);
font-weight: 600;
letter-spacing: 0.01em;
color: var(--cg-muted, #8f8f8f);
}
/* ★스케일의 «꼭대기». 목업의 가장 큰 활자(23px "오늘의 주요 뉴스")가 통째로 빠져 있어서,
이 위젯에서 가장 큰 글자가 히어로 제목이었고 그 히어로 제목마저 18.7px에 머물렀다 —
즉 주변 채팅 본문(16px)과 사실상 같은 층이었다. 제목이 돌아오면서 22/18/15/12/11의
단조 스케일이 성립한다(각 단계 ≥1.2배, 실측표는 test_news_magazine_front 참조).
★목업의 3분할 기간 컨트롤(24시간/48시간/7일)은 옮기지 않는다 — 포털에는 그 질의를 다시
돌릴 경로가 없고, 아무것도 못 바꾸는 컨트롤은 없는 편이 낫다(이 파일의 기존 원칙).
실제로 검색이 쓴 창은 이미 .news-facet-chip-window가 글자로 말한다. */
.news-feed-headline {
display: flex;
flex-direction: column;
gap: 4px;
min-width: 0;
}
/* ★★캐스케이드 접두사 `.chatgpt-reference-v1 .news-feed`가 «장식»이 아니다 — 없으면 이 규칙은
통째로 죽는다. 이 위젯은 .message-body 안에 살고, 그 안의 h3/h4/p에는 전역 산문 규칙이
이미 걸려 있다:
· `.chatgpt-reference-v1 .message-body p` (0,2,0, 이 파일 뒤쪽) → font-size 16 / lh 1.7
· `.message-body h3, h4, h5` (0,1,1) → margin 16px 0 9px / lh 1.25
· `.message-body h3` (0,1,1) → font-size title-20
컴포넌트 클래스 하나(0,1,0)로는 셋 다 진다. 실측으로 두 번 물렸다:
· 카드 요약이 16px/27.2px로 렌더돼 **자기 제목(14px)보다 컸다** — 위계가 뒤집혔다.
· 섹션 헤더 블록이 20px 줄에 h4 마진 16+9가 붙어 45px가 됐다(목업 30).
!important로 덮지 않는다. 접두사 두 개면 (0,3,0)이라 전역 산문 규칙보다 순서와 무관하게
이긴다 — 다른 표면의 전역 규칙은 한 글자도 건드리지 않는다.
★이 접두사를 «간결하게» 벗기지 말 것. 벗기는 순간 위 세 규칙이 되살아난다. */
.chatgpt-reference-v1 .news-feed .news-feed-title {
margin: 0;
/* ★스케일의 «꼭대기». 상한이 --ds-text-heading-28인데 실제 채팅 폭에서는 그 아래에 선다:
컨테이너 709px에서 3.7cqw = 26.23px(실측). 히어로 22px과 1.19배 벌어져 «위젯 이름»과
«리드 기사»가 서로 다른 층으로 읽힌다.
★왜 목업의 23px이 아니라 26px인가 — 목업은 피드 제목 750 / 히어로 780으로 **웨이트**가
둘을 갈랐다. 포털 타이포 계약(doc 160 T4)은 400/500/600만 허용하고 700은 모바일 워드마크
1곳으로 래칫이 걸려 있어(test_static_contract.test_typography_contract) 그 채널이 닫혀
있다. 닫힌 웨이트 채널의 몫을 크기 채널이 흡수한 값이 26px이다. */
font-size: clamp(var(--ds-text-title-20), 3.7cqw, var(--ds-text-heading-28));
font-weight: 600;
line-height: var(--ds-leading-title, 1.32);
letter-spacing: -0.024em;
color: var(--cg-text);
}
/* 다 — 위 .news-feed-title 주석의 전역 산문 규칙에 같은 이유로 접두사가 필요하다. */
.chatgpt-reference-v1 .news-feed .news-feed-meta {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 7px;
margin: 0;
font-size: var(--ds-text-micro-11);
font-weight: 500;
line-height: 1.5;
letter-spacing: normal;
}
/* ★«라이브» 점은 삭제했다(규칙도 @keyframes도). 두 가지 이유가 겹친다:
① 정직성 — 이 피드는 스트리밍이 아니라 «질의 시점에 고정된 스냅샷»이다. 맥동하는 라이브
점은 갱신되지 않는 목록에 갱신을 약속한다. 신선도는 아래 as-of가 «글자로» 말한다.
② 실측 — 그 @keyframes의 70%/100% 프레임(`box-shadow: 0 0 0 7px transparent`,
`0 0 0 0 transparent`)은 var()를 하나도 안 들고 있어서 정적 UI 안티드리프트의
raw-box-shadow로 잡혔다. 이 규칙들이 들어오면서 그 범주가 천장을 넘겼다
(2026-07-31 실측: ceiling 78 / actual 79 = RED). 삭제하면 79 → 77이 된다.
★두 규칙 다 마크업이 한 번도 없었다 — renderNewsFeed는 .news-live를 만든 적이 없고,
`grep -rn "news-live\|newsLivePulse" apps/ai-portal`은 이 파일 안에서만 잡혔다. 즉 죽은
규칙이라 지우는 데 표면 손실이 0이다. */
/* as-of는 «지금»이 아니라 «이 답변이 들고 있는 가장 신선한 기사의 시각»이다. 시각이 하나도
없으면 아예 렌더되지 않는다 — 지어낸 기준 시각은 신선도에 대한 거짓말이다. */
.news-asof {
color: var(--cg-muted);
font-variant-numeric: tabular-nums;
}
/* Query facet chips (doc 337 A1) — the header says what the answer actually searched: the
window the search really used, then the resolved topic, then the item count. These elements
only exist when the gateway ships `news_query`, so a card without facets renders exactly as
it did before. The chips carry text, never colour alone (WCAG SC 1.4.1): publisher identity
already owns the colour channel on this surface, so the facets stay neutral. */
.news-facet-chips {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
}
/* Hairline, no fill — measured live: --cg-surface resolves to the very colour the card itself
uses (#ffffff light / dark equivalent), so a "filled" chip was invisible against its own
background in both themes and only the border was ever doing the work. Follows the existing
.chatgpt-topic-tag-badge precedent (hairline pill, no fill) for a quiet metadata row. */
.news-facet-chip {
padding: 1px 6px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-xs, 6px);
color: var(--cg-text-soft);
font-weight: 500;
}
.news-facet-count {
margin-inline-start: 2px;
color: var(--cg-muted);
font-weight: 500;
}
/* Publication time (doc 337 A2) — sits next to the publisher on the same byline (.news-by). The
separator is a pseudo-element so it can never appear without a time beside it: an article
with no usable timestamp renders no .news-time at all, and a stray "·" would read as a
missing value rather than an absent one.
★색 토큰은 그대로 둔다. 2026-07-30 실측에서 이 라벨이 라이트 4.90:1로 이 표면에서 가장
빠듯했다(test_news_card_a11y의 실측표). 사진 위 프로스티드 밴드에서만 --cg-text-soft로
올려 쓴다 — 아래 .news-by-band 참조. */
.news-time {
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
white-space: nowrap;
}
.news-time::before {
content: "·";
margin-inline: 6px;
}
/* ══ ① 사진 깔린 주제 태그 (템플릿 top-tags) ═══════════════════════════════════════════
각 필의 배경은 그 주제의 «가장 신선한» 기사 사진이다 — 지어낸 그림이 아니라 그 주제가
실제로 들고 있는 사진. 사진이 없거나 로드에 실패하면 강조색 틴트가 그대로 남고 스크림은
그대로라, 라벨 대비가 두 경우 모두 동일하고 빈 자리가 생기지 않는다. */
.news-topics {
position: relative;
}
.news-topics-rail {
display: flex;
gap: 8px;
overflow-x: auto;
scrollbar-width: none;
scroll-behavior: smooth;
/* ★이 레일은 스크롤 컨테이너라 **자기 패딩 박스 밖을 잘라 낸다**. 바깥으로 그려지는 링은
전부 여기서 죽는다. 실측(조상 overflow 검사): 첫 알약과 클리퍼 사이 여백이 가로 0px이라
선택 링도 포커스 링도 왼쪽이 통째로 잘렸다 — 세로 4px도 선택 링(0 0 0 4px)에 여유가
정확히 0이었다. 포커스 링은 6px까지 나가므로 6px로 올리고, 가로도 같은 6px을 준다.
★음수 마진으로 그 6px을 되돌린다 — 안 그러면 알약 열이 피드의 나머지 콘텐츠보다 6px
안쪽으로 밀려 정렬이 깨진다. .news-topics에는 overflow가 없으므로 음수 마진은 잘리지 않는다.
★getComputedStyle은 이 결함을 **볼 수 없다**(outline 값은 정상으로 보고된다). 클리핑은
계산값이 아니라 페인트라서, 계약 테스트가 아니라 조상 overflow 검사로만 잡힌다. */
padding-block: 6px;
padding-inline-start: 6px;
margin-inline-start: -6px;
padding-inline-end: 40px;
}
.news-topics-rail::-webkit-scrollbar {
display: none;
}
.news-topic {
--news-accent: var(--cg-muted);
position: relative;
overflow: hidden;
flex: none;
/* ★고정 106×40 → 최소값. 라벨은 rem으로 커지는데 알약이 px로 고정돼 있어서 텍스트 200%
확대(WCAG SC 1.4.4)에서 라벨이 알약 밖으로 잘려 나갔다. 최소 크기만 남기고 실제 크기는
라벨이 정하게 하면, 확대하면 알약도 같이 커진다. min-width는 «가지런한 레일»이라는
원래 의도를 그대로 지킨다. */
min-width: 106px;
min-height: 40px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-sm);
background: color-mix(in srgb, var(--news-accent) 42%, var(--cg-hover));
font: inherit;
cursor: pointer;
transition: transform var(--wds-duration-fast) var(--wds-ease-out),
box-shadow var(--wds-duration-fast) ease;
}
.news-topic-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: cover;
}
/* 스크림. ★사진을 우리가 고르지 않으므로 라벨 대비를 사진에 맡길 수 없다. 순백 사진을
최악으로 놓고 손으로 계산했다(자동 측정기는 그라데이션을 배경으로 읽지 못한다):
검정 56%→78%면 라벨이 놓이는 중앙부(≈67%)에서 #fff 대비가 약 7:1, 글자 상단(≈61%)에서도
약 4.95:1로 4.5:1 하한을 넘는다. 템플릿의 48%→74%는 상단에서 4.74까지 내려간다. */
.news-topic::after {
content: "";
position: absolute;
inset: 0;
/* ★스크림은 사진 «위»에 있어야 한다. .news-topic-img가 함께 다는 .news-thumb가 z-index:1을
들고 있어서, 이걸 auto로 두면 ::after가 사진 아래로 깔린다 — 실브라우저에서 순백 사진
타일이 흰 글자를 그대로 삼켰다(1280×1000, 라이트, 첫 타일 라벨이 통째로 사라짐).
계산으로 정한 대비는 스크림이 위에 있을 때만 성립한다. */
z-index: 2;
background: linear-gradient(
180deg,
color-mix(in srgb, var(--ds-black) 56%, transparent),
color-mix(in srgb, var(--ds-black) 78%, transparent)
);
}
/* 분야별 기사 수 (doc 343 §3.4). 라벨 옆에 붙되 라벨을 밀어내지 않는다 —
8개 탭이면 어느 탭이 알찬지 보이지 않아 사용자가 빈 탭을 누르게 된다.
★색은 새로 만들지 않는다. 라벨과 같은 토큰을 쓰고 불투명도로만 뒤로 물린다 —
이 리포의 원시값 드리프트 래칫은 여유가 0이다. */
.news-topic-count {
/* 라벨 안에 살므로 z-index·position이 따로 필요 없다 — 간격은 라벨의 column-gap이 준다. */
font-size: var(--ds-text-caption-12);
font-weight: 600;
line-height: 1.4;
color: var(--ds-white);
opacity: 0.72;
font-variant-numeric: tabular-nums;
}
.news-topic-label {
position: relative;
z-index: 3; /* 사진(1) < 스크림(2) < 라벨 */
display: grid;
/* ★라벨과 건수 배지를 **한 줄에** 놓는다. 기본(row)이면 배지가 다음 줄로 떨어져 탭
높이가 37px → 64px가 된다(실브라우저 실측). */
grid-auto-flow: column;
column-gap: 4px;
place-items: center;
/* height:100% + overflow:hidden이 알약을 «넘치면 자른다»로 만들고 있었다. 확대되면 라벨이
알약을 밀어 키우도록 세로 패딩으로 바꾼다(잘림 → 성장). */
padding: 10px 12px;
font-size: var(--ds-text-caption-12);
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.005em;
color: var(--ds-white);
}
/* 선택은 색만으로 말하지 않는다: 강조색 링 + 스크림이 걷히며 사진이 드러나고, 보조기술에는
aria-pressed가 간다(SC 1.4.1). */
.news-topic[aria-selected="true"] {
box-shadow: 0 0 0 2px var(--cg-surface), 0 0 0 4px var(--news-accent);
}
.news-topic[aria-selected="true"]::after {
opacity: 0.78;
}
/* 포커스 링은 이 블록 맨 끝의 «뉴스 포커스 링» 규칙 하나가 전담한다 — 여기 있던 개별
:focus-visible 규칙은 (0,2,0)이라 전역 기본 링(0,3,3)에 져서 한 번도 그려진 적이 없다. */
.news-topics-more {
position: absolute;
inset-inline-end: 0;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
/* 목업 32 (30이었다). */
width: 32px;
height: 32px;
border: 1px solid var(--cg-menu-border);
border-radius: 50%;
background: var(--cg-surface);
color: var(--cg-text-soft);
cursor: pointer;
/* 레일 끝을 표면색으로 덮어 «더 있다»는 잘림 신호를 만든다. */
box-shadow: -12px 0 14px 8px var(--cg-surface);
}
.news-topics-more:hover {
border-color: var(--cg-text-soft);
color: var(--cg-text);
}
.news-topics-more .wds-inline-icon {
width: 16px;
height: 16px;
}
/* ══ ② 히어로 캐러셀 (템플릿 Slider 744×452 · 1.65) ═════════════════════════════════════ */
.news-hero {
position: relative;
overflow: hidden;
border-radius: var(--ds-radius-md);
}
.news-hero-track {
display: flex;
transition: transform 460ms var(--wds-ease-out);
}
/* 오프셋은 인라인 style이 아니라 여기서 산다 — 전환·감속·reduced-motion과 같은 자리. */
.news-hero-track[data-news-hero-index="1"] {
transform: translateX(-100%);
}
.news-hero-track[data-news-hero-index="2"] {
transform: translateX(-200%);
}
.news-lead {
position: relative;
flex: 0 0 100%;
display: block;
box-sizing: border-box;
overflow: hidden;
aspect-ratio: 744 / 452;
border-radius: var(--ds-radius-md);
/* Real border (not inset box-shadow): overflow:hidden clips the photo to the inner radius,
so a loaded image can never paint over the top/side frame the way it did with an inset
shadow. It also gives a near-white photo an edge to sit against. */
border: 1px solid var(--cg-menu-border);
background: var(--cg-hover);
text-decoration: none;
color: inherit;
}
/* 포커스 링 → 블록 끝의 «뉴스 포커스 링» 참조(여기 있던 (0,2,0) 규칙은 죽은 코드였다). */
.news-lead-shot {
position: absolute;
inset: 0;
}
/* ★사진 없는 리드 = 텍스트 리드. 사진 자리를 비워 두는 대신 밴드가 슬라이드 «전체»가 된다.
1.65 상자를 유지하면 커다란 빈 사각형 아래에 밴드만 놓인 모양이 되고, 그건 설계된 부재가
아니라 고장으로 읽힌다(실브라우저 확인 — 레거시 페이로드에서 정확히 그랬다).
흐릴 배경이 없으므로 프로스티드 처리도 걷는다. */
.news-lead[data-news-textonly] {
aspect-ratio: auto;
background: var(--cg-hover-soft);
}
.news-lead[data-news-textonly] .news-lead-band {
position: static;
padding: 16px 18px;
border-radius: 0;
background: transparent;
box-shadow: none;
-webkit-backdrop-filter: none;
backdrop-filter: none;
}
/* 도트가 커커·발행처 줄 위로 겹치지 않도록 그만큼만 비워 둔다(알약 22 + 점 2개 + 간격 + 인셋). */
.news-lead[data-news-textonly] .news-lead-bandtop {
padding-inline-end: 70px;
}
/* Real source thumbnail (20260709-news-thumb) — a failed load takes its whole slot with it
(bindNewsPhotoFallbacks), so the surface never shows an empty box where a photo was
promised. Subtle hover zoom gives the feed the same "alive" feel as the other widgets. */
.news-thumb {
position: absolute;
inset: 0;
z-index: 1;
width: 100%;
height: 100%;
object-fit: cover;
/* No opacity fade: an opacity transition here froze at currentTime 0 (the img is created
and revealed in the same frame), leaving thumbnails invisible over the cover. The image
just appears on load — the token background shows through until then. */
transition: transform 420ms var(--wds-ease-out);
}
/* ★템플릿의 핵심 처리 — 가장자리에서 띄운 **밝은** 프로스티드 카드. 어두운 그라데이션이 아니다.
투명도는 취향이 아니라 계산이다. 사진을 우리가 고르지 않으므로 최악(순백/순흑)을 가정한다:
라이트(surface #ffffff) · 순흑 사진 → 밴드 rgb(224) → --cg-text 대비 ≈13:1
다크 (surface #000000) · 순백 사진 → 밴드 rgb(31) → --cg-text 대비 ≈13:1
★밴드 위 보조 텍스트는 --cg-muted가 아니라 --cg-text-soft를 쓴다. --cg-muted(#6f6f6f)는
라이트 최악 밴드에서 3.46:1로 미달한다(카드 위에서는 5.02:1로 통과한다 — 배경이 다르다).
backdrop-filter가 없는 브라우저에서는 86%로 더 불투명하게 떨어뜨려 같은 하한을 지킨다
(라이트·순흑 사진 최악에서 밴드 rgb(219) → --cg-text 대비 약 13.2:1). */
.news-lead-band {
position: absolute;
z-index: 2;
/* ★13이지 14가 아니다. .news-lead에는 1px 실테두리가 있고 이 밴드는 **패딩 박스** 기준으로
자리를 잡는다. 14를 적으면 보이는 가장자리에서 15px 떨어져 보인다(실측 15). 13 + 테두리
1 = 목업의 14px. */
inset-inline: 13px;
bottom: 13px;
display: flex;
flex-direction: column;
gap: 6px;
padding: 16px 18px;
border-radius: var(--ds-radius-md);
background: color-mix(in srgb, var(--cg-surface) 86%, transparent);
box-shadow: inset 0 0 0 1px var(--cg-menu-border);
}
@supports (backdrop-filter: blur(2px)) or (-webkit-backdrop-filter: blur(2px)) {
.news-lead-band {
/* ★88% → 78%(목업값). 88%는 «프로스티드 오버레이»가 아니라 «불투명한 판»으로 읽혔다.
투명도는 취향이 아니라 계산이므로 낮추면서 하한을 다시 유도했다. 사진을 우리가 고르지
않으므로 최악(순백/순흑)을 가정한다 — 78%의 최악 밴드는:
라이트(surface #fff) · 순흑 사진 → 밴드 rgb(199) → --cg-text(#0d0d0d) 대비 11.49:1
다크 (surface #000) · 순백 사진 → 밴드 rgb(56) → --cg-text 대비는 아래 실측표 참조
보조 텍스트(--cg-text-soft)도 라이트 최악에서 6.22:1로 4.5:1을 넘는다. 즉 하한(4.5:1)은
88%가 아니라 «밴드가 만드는 대비»가 지키는 것이고, 78%도 그 하한 안쪽이다.
★핀을 «88 이상»이 아니라 «계산된 대비 하한»으로 바꿔 두었다
(test_news_magazine_front.LiveMeasuredCssInvariantTest) — 프록시가 아니라 불변식을 잰다. */
background: color-mix(in srgb, var(--cg-surface) 78%, transparent);
-webkit-backdrop-filter: blur(22px) saturate(150%);
backdrop-filter: blur(22px) saturate(150%);
}
}
.news-lead-bandtop {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 4px 10px;
}
/* 커커. ★강조색은 «점»이 나르고 주제 이름은 «글자»가 나른다. 강조색을 라벨 글자에 쓰면 사진
위 밴드에서 대비를 보장할 수 없다 — 차트 토큰 일부는 라이트 최악 밴드에서 2.5:1까지
떨어진다. 점은 바로 옆 글자가 같은 말을 하므로 장식이고, 글자는 --cg-text라 항상 안전하다. */
.news-kicker {
display: inline-flex;
align-items: center;
gap: 6px;
font-size: var(--ds-text-micro-11);
font-weight: 600;
letter-spacing: 0.02em;
color: var(--cg-text);
}
.news-kicker::before {
content: "";
flex: none;
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--news-accent, var(--cg-muted));
}
.news-lead-title {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* ★상한 22px은 «승인된 크기»인데 2.6cqw로는 **닿지 않는 죽은 팔**이었다. 실측: 컨테이너
709px에서 2.6cqw = 18.43px — 승인값보다 16.2% 작고, 주변 채팅 본문 16px의 1.15배라
사실상 같은 층이었다. 중간 팔을 3.2cqw로 올리면 컨테이너 687.5px부터 상한에 닿는다.
실제 채팅 폭(709px 실측)에서 3.2cqw = 22.69px → clamp 상한 22px로 고정된다.
★하한 body-16은 **1280만 재던 값**이었다. 390 실측(피드 컨테이너 283px): 3.2cqw = 9.06px
이라 하한 16px에 눌리는데, 섹션 이름은 고정 18px이라 **리드 제목이 섹션 헤더보다 작았다**
(16 : 18 = 0.889배). 1280에서 고친 것과 같은 종류의 위계 역전이 390에서 그대로 살아 있었다.
하한을 title-18로 올린다 — 1280에서는 상한 22px에 걸려 있으므로 한 픽셀도 바뀌지 않고
(3.2cqw × 709 = 22.69 > 22), 좁은 폭에서만 18px 바닥이 드러난다. 아래 .news-section-name /
.news-card-link도 같은 이유로 유동화해서 사다리 전체가 **순서를 지킨 채** 함께 내려온다.
웨이트는 위 .news-feed-title 주석과 같은 이유로 600이 상한이다. */
font-size: clamp(var(--ds-text-title-18), 3.2cqw, var(--ds-text-title-22));
font-weight: 600;
line-height: 1.3;
letter-spacing: -0.022em;
text-wrap: pretty;
color: var(--cg-text);
}
.news-lead:hover .news-lead-title {
text-decoration: underline;
text-underline-offset: 4px;
}
.news-lead-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: var(--ds-text-caption-12);
line-height: 1.55;
color: var(--cg-text-soft);
}
.news-hero-nav {
position: absolute;
z-index: 3;
top: 50%;
transform: translateY(-50%);
display: grid;
place-items: center;
/* 목업 38 (36이었다). */
width: 38px;
height: 38px;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--cg-surface) 84%, transparent);
color: var(--cg-text);
cursor: pointer;
box-shadow: 0 2px 10px color-mix(in srgb, var(--ds-black) 24%, transparent);
transition: opacity var(--wds-duration-fast) ease, transform var(--wds-duration-fast) ease;
}
/* 자동 넘김 재생/정지 (doc 343 §4.1, WCAG 2.2.1) — 화살표와 같은 원형 컨트롤이되
좌우가 아니라 왼쪽 아래에 앉는다(화살표·도트와 겹치지 않는 자리).
★글리프를 CSS로 그린다. WDS 아이콘셋(shared/wds/wds-icons.js)에 pause/play가 없고 그
파일은 이 작업의 범위 밖이다. app.js 폴백 맵에만 넣으면 «앱에는 있는데 WDS에는 없는»
파리티 드리프트가 생긴다 — 이 리포가 반복해 겪은 문제라 만들지 않는다.
아이콘셋에 pause/play가 들어오면 이 규칙을 renderIcon 호출로 바꿀 것. */
.news-hero-autoplay {
position: absolute;
z-index: 3;
inset-inline-start: 10px;
bottom: 10px;
display: grid;
place-items: center;
width: 32px;
height: 32px;
border: 0;
border-radius: 50%;
background: color-mix(in srgb, var(--cg-surface) 84%, transparent);
color: var(--cg-text);
cursor: pointer;
box-shadow: 0 2px 10px color-mix(in srgb, var(--ds-black) 24%, transparent);
}
.news-hero-autoplay::before,
.news-hero-autoplay::after {
content: "";
position: absolute;
top: 50%;
width: 3px;
height: 11px;
/* ★라운딩 없음. 3px 막대에 1px 라운딩은 눈에 띄지도 않는데 원시값 드리프트 래칫을
넘긴다(여유 0). 천장을 올려 통과시키지 않는다 — 그게 래칫의 존재 이유다. */
background: currentColor;
transform: translateY(-50%);
}
.news-hero-autoplay::before { inset-inline-start: calc(50% - 4px); }
.news-hero-autoplay::after { inset-inline-start: calc(50% + 1px); }
/* 멈춘 상태 = 다음 동작이 «재생»이므로 삼각형을 보인다. */
.news-hero-autoplay[aria-pressed="false"]::before {
inset-inline-start: calc(50% - 3px);
width: 0;
height: 0;
background: none;
border-top: 6px solid transparent;
border-bottom: 6px solid transparent;
border-inline-start: 9px solid currentColor;
}
.news-hero-autoplay[aria-pressed="false"]::after { content: none; }
.news-hero-nav-prev {
inset-inline-start: 10px;
}
.news-hero-nav-next {
inset-inline-end: 10px;
}
.news-hero-nav .wds-inline-icon {
width: 18px;
height: 18px;
}
/* 화살표는 hover 가능한 포인터에서만 숨는다. 터치에서 숨기면 캐러셀을 넘길 방법이 도트뿐이 된다. */
@media (hover: hover) and (pointer: fine) {
.news-hero-nav {
opacity: 0;
}
.news-hero:hover .news-hero-nav,
.news-hero-nav:focus-visible {
opacity: 1;
}
.news-hero-nav:hover {
transform: translateY(-50%) scale(1.06);
}
}
/* ★★도트는 **자기 스크림 위에** 앉는다. 도트는 이 캐러셀의 유일한 상시 위치 표시기인데,
사진 위에 바로 놓여 있던 동안 흰 도트 대 «흰 사진»이 실측 1.00:1이었다(라이트/다크,
활성/비활성 네 경우 모두). 사진은 우리가 고르지 않으므로 배경에 기댈 수 없다.
★목업을 그대로 베끼지 않는다 — 목업의 처리는 1.26:1로 더 나쁘다.
불투명도는 계산값이다. 순백 사진 최악에서 스크림 = 검정 70% → rgb(76.5):
· 활성 도트(순백 #fff) 대 스크림 → 8.51:1
· 비활성 도트(흰색 62%) 대 스크림 → 4.44:1 (둘 다 SC 1.4.11의 3:1을 통과)
활성/비활성 구분은 색이 아니라 **너비**(24 대 10)가 나른다 — SC 1.4.1. */
.news-dots {
position: absolute;
z-index: 3;
inset-inline-end: 13px;
top: 13px;
display: flex;
align-items: center;
/* 14px 간격은 장식이 아니라 SC 2.5.8 계산이다 — 아래 .news-dot::after 주석 참조. */
gap: 14px;
padding: 6px 10px;
border-radius: var(--ds-radius-pill);
background: color-mix(in srgb, var(--ds-black) 70%, transparent);
}
.news-dot {
position: relative;
/* 7 → 10. 히트 영역만 키우면 SC 2.5.8은 통과해도 **보이는** 표시기가 여전히 7px이라
읽히지 않는다. */
width: 10px;
height: 10px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-pill);
background: color-mix(in srgb, var(--ds-white) 62%, transparent);
cursor: pointer;
transition: width 280ms var(--wds-ease-out),
background var(--wds-duration-fast) ease;
}
/* ★SC 2.5.8(Target Size Minimum, AA) 계산. 이전 값(inset -9px -4px)은 7px 도트에 15×25
히트 영역을 줬다 — 가로 15 < 24라 최소 크기도 미달이고, 중심 간격이 13px / 20.5px라
«간격 예외»(24px 원이 겹치지 않을 것)도 동시에 미달이었다.
지금: 도트 10 + inset 7 양쪽 = 24×24로 최소 크기를 정면 통과하고, gap 14px이라 비활성끼리
중심 간격이 10+14 = 24px라 히트 영역이 서로 «닿기만» 하고 겹치지 않는다. */
.news-dot::after {
content: "";
position: absolute;
inset: -7px;
}
.news-dot[aria-current="true"] {
width: 24px;
background: var(--ds-white);
}
/* ══ ③ 섹션 헤더 (템플릿: 세로 바 + 제목 + 우측 원형 화살표) ═══════════════════════════ */
.news-section {
display: flex;
flex-direction: column;
gap: 14px;
}
.news-section-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
/*
다 — 접두사가 없으면 `.message-body h4`(0,1,1)의 `margin: 16px 0 9px`가 이겨서 20px짜리
글줄이 45px 블록이 된다(실측). 접두사로 (0,3,0)을 만들면 마진 0이 실제로 적용돼 30px가 된다.
크기도 body-16 → title-18: 16px은 주변 채팅 본문과 **같은 값**이라 «섹션 이름»이라는 역할이
활자로는 하나도 표시되지 않았다. 18px이면 카드 제목 15px과 1.20배로 갈라진다.
★고정 18px은 1280에서만 옳았다. 390(컨테이너 283px)에서는 히어로 제목이 하한으로 눌려
내려오는데 이것만 18px에 못 박혀 있어서 **섹션 이름이 리드 제목보다 커졌다**(실측 18 : 16).
유동화한다: 2.6cqw는 컨테이너 692.3px부터 상한 18px에 닿으므로 실채팅 폭 709px에서는
18.43 → 18px로 **1280 값이 그대로 유지**되고(실측), 좁은 폭에서만 하한 body-16이 드러난다.
하한을 14가 아니라 16으로 두는 이유는 아래 .news-card-link(하한 14)와 1.14배를 유지하기
위해서다 — 사다리의 각 칸은 좁은 폭에서도 최소 한 단계(토큰 사다리의 이웃 눈금)를 벌린다. */
.chatgpt-reference-v1 .news-feed .news-section-name {
display: flex;
align-items: center;
gap: 9px;
margin: 0;
font-size: clamp(var(--ds-text-body-16), 2.6cqw, var(--ds-text-title-18));
font-weight: 600;
line-height: 1.35;
letter-spacing: -0.02em;
color: var(--cg-text);
}
.news-section-bar {
flex: none;
width: 3px;
height: 17px;
border-radius: var(--ds-radius-2xs);
background: var(--news-accent, var(--cg-text));
}
.news-section-arrows {
display: flex;
gap: 7px;
}
.news-arrow {
display: grid;
place-items: center;
/* 목업 32 (30이었다). */
width: 32px;
height: 32px;
border: 1px solid var(--cg-menu-border);
border-radius: 50%;
background: transparent;
color: var(--cg-text-soft);
cursor: pointer;
transition: border-color var(--wds-duration-fast) ease, color var(--wds-duration-fast) ease,
background var(--wds-duration-fast) ease;
}
.news-arrow:hover {
border-color: var(--cg-text-soft);
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.news-arrow .wds-inline-icon {
width: 16px;
height: 16px;
}
/* ══ ③b 2단 — 톱과 카드 트랙 사이 두 칸 (doc 344 §10) ══════════════════════════════════
★사진이 없다. 1면의 위계는 사진 크기가 아니라 활자와 밀도로 만든다 — 톱(사진 위 밴드) →
2단(제목 + 요약 1줄) → 카드(썸네일 + 요약 2줄). 2단에 사진을 주면 톱과 같은 층이 되어
1면이 «큰 사진 세 덩이»가 된다.
★카드 트랙과 달리 여기는 **평범한 2열 격자**다. 두 칸뿐이라 페이징할 것이 없고, 트랙으로
만들면 스냅·페이저·2줄 기하가 두 벌이 된다. */
/* 구획 전체(라벨 + 격자). hidden은 여기가 든다 — 격자만 숨기면 라벨이 홀로 남는다. */
.news-second-tier {
display: block;
margin-top: 16px;
padding-top: 14px;
/* ★--cg-border는 **정의되지 않은 토큰**이다(NoPhantomCgBorderTokenTest가 잡는다). 이 표면의
구분선은 --cg-menu-border를 쓴다 — 바로 위 .news-topics + .news-hero가 같은 값이다. */
border-top: 1px solid var(--cg-menu-border);
}
/* ★`[hidden]`은 (0,0,1)이라 바로 위 `display: block` (0,1,0)에 진다 — .news-card[hidden]에서
같은 것을 실브라우저로 확인했다. 없으면 기사가 적은 분야에서 빈 구획이 선만 남기고 보인다. */
.news-second-tier[hidden] {
display: none;
}
.news-second-tier > .news-section-head {
margin-bottom: 10px;
}
.news-second {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 16px;
}
/* ★셀은 2열 격자다: 왼쪽에 제목·요약, 오른쪽에 64px 썸네일, 발행처 행은 아래를 가로지른다.
flex 세로 쌓기로는 썸네일을 «제목 옆»에 둘 수 없다. */
.news-second-cell {
position: relative;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
grid-template-rows: auto auto auto;
column-gap: 12px;
row-gap: 4px;
align-items: start;
min-width: 0;
}
.news-second-cell > .news-second-link {
grid-column: 1;
grid-row: 1;
}
.news-second-cell > .news-second-excerpt {
grid-column: 1;
grid-row: 2;
}
.news-second-cell > .news-second-shot {
grid-column: 2;
grid-row: 1 / span 2;
}
.news-second-cell > .news-second-foot {
grid-column: 1 / -1;
grid-row: 3;
}
/* 카드와 같은 «늘린 링크» 구조. 제목은 카드(15)와 톱 사이 층이라 16이다. */
.news-second-link {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
font-size: clamp(var(--ds-text-body-15), 2.4cqw, var(--ds-text-body-16));
font-weight: 600;
line-height: 1.36;
letter-spacing: -0.014em;
text-wrap: pretty;
text-decoration: none;
color: var(--cg-text);
}
.news-second-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--ds-radius-sm);
}
.news-second-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* ★ 다 — 접두사 없이는 `.chatgpt-reference-v1 .message-body p` (0,2,0)가 이겨서 요약이
16px로 렌더되고 **자기 제목보다 커진다**. .news-card-excerpt가 정확히 그렇게 깨져 있었다.
접두사 두 개 = (0,3,0)이라 파일 순서와 무관하게 이긴다(CascadeOverrideTest가 소유한다). */
.chatgpt-reference-v1 .news-feed .news-second-excerpt {
display: -webkit-box;
-webkit-line-clamp: 1;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: var(--ds-text-caption-12);
font-weight: 400;
line-height: 1.55;
color: var(--cg-muted);
}
.news-second-foot {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 6px;
}
/* ★★썸네일 두 함정 — 둘 다 라이브 DOM에 후보를 주입해서 잡았다(T6c). 합성 하네스에는
전역 `.news-thumb` 규칙이 없어 **둘 다 안 보인다**.
① `.news-thumb`는 `position: absolute`다. 감싸개가 relative가 아니면 이미지가 셀 원점으로
튀어 제목 위에 겹친다(.news-card-shot이 relative인 이유가 이것이다).
② `.news-second-shot img` (0,1,1)는 전역 `.news-thumb`에 **진다**. 접두사 두 개로
(0,3,1)을 만들어야 64px가 실제로 먹는다 — 안 그러면 이미지가 346px로 퍼진다(실측). */
.chatgpt-reference-v1 .news-feed .news-second-shot {
position: relative;
flex: none;
width: 64px;
height: 64px;
overflow: hidden;
border-radius: var(--ds-radius-sm);
background: var(--cg-hover);
}
.chatgpt-reference-v1 .news-feed .news-second-shot .news-second-img {
width: 100%;
height: 100%;
object-fit: cover;
}
/* ══ ④ 카드 (템플릿 popular-posts) ═════════════════════════════════════════════════════
채움도 테두리도 없다. 사진과 출처 행이 카드를 만든다. */
/* align-items는 stretch(기본)로 둔다. 사진 없는 기사가 섞이면 start에서는 그 카드만 위로
붙어 행이 들쭉날쭉해 보인다(실브라우저 확인) — stretch면 카드 높이가 같아지고
.news-card-foot의 margin-top:auto가 모든 출처 행을 같은 바닥선에 정렬한다. */
/* ★세로 2줄 고정 · 가로 흐름. 예전에는 3열 세로 격자여서 지면 높이가 기사 수를 그대로
따라갔다 — 24건이면 7줄, 카드 구간만 2000px을 넘었다. 이제 줄은 2로 고정이고 남는 기사는
오른쪽으로 흘러 페이지 단위로 넘어간다.
★열 수가 아니라 **줄 수**를 고정한 이유: 열 수는 컨테이너 폭에 따라 3→2→1로 접히는데,
카드를 6개씩 «페이지»로 묶어 두면 좁은 폭에서 한 페이지가 3줄·6줄이 되어 «2줄» 약속이
깨진다. 줄을 고정하고 열을 흐르게 두면 어떤 폭에서도 2줄이고, JS는 개수를 세지 않는다.
★grid-auto-columns가 한 «페이지»의 열 수를 정한다. 100%를 열 수로 나눈 값이라 한 화면에
정확히 그 수만큼 들어가고, scrollBy(clientWidth)가 곧 한 페이지가 된다. */
.news-cards {
display: grid;
grid-auto-flow: column;
grid-template-rows: repeat(2, minmax(0, auto));
grid-auto-columns: calc((100% - 32px) / 3);
gap: 16px;
overflow-x: auto;
overscroll-behavior-x: contain;
scroll-snap-type: x mandatory;
scrollbar-width: none;
/* 스크롤 컨테이너가 카드의 focus-visible 링을 잘라 먹지 않게 한다. */
padding-block: 2px;
}
.news-cards::-webkit-scrollbar {
display: none;
}
/* ══ 한 페이지에 다 들어가면 «행»으로 채운다 (2026-08-04, 사용자 지적) ═══════════════
격자는 `grid-auto-flow: column` + 2행이라 **아래로 먼저** 채운다. 기사가 12·23건인
분야에서는 그래야 페이지가 꽉 차지만, 문화처럼 **2건**뿐이면 한 열에 세로로 쌓이고
오른쪽 2/3가 빈다 — 사용자가 화면에서 지적한 모양이 이것이다.
★임계는 **4개**다. 가장 좁은 페이지(620px, 2열×2행)가 4개이므로, 4개 이하이면 어느
폭에서도 스크롤이 필요 없다. 그래서 컨테이너 쿼리는 **열 폭만** 바꾸면 되고
(`test_every_width_keeps_exactly_two_rows`의 약속), 줄 수를 건드릴 일이 없다.
★5개부터는 원래의 열 흐름·좌우 페이징 그대로다. 넘치는 분야까지 행 흐름으로 두면
컨테이너가 세로로 자라 캐러셀이 사라진다(페이저는 scrollWidth/clientWidth로 센다).
라이브 DOM 주입 실측(3열): 2개 → 1행 나란히 · 4개 → 첫 줄 3개+1개 · 5개↑ → 열 흐름 복귀. */
.news-cards:not(:has(> .news-card:nth-child(5))) {
grid-auto-flow: row;
grid-template-rows: none;
grid-template-columns: repeat(3, minmax(0, 1fr));
justify-content: start;
}
.news-cards > .news-card {
scroll-snap-align: start;
}
.news-page-count {
/* 화살표만으로는 «얼마나 더 있는지»를 알 수 없다. 이 표시가 없으면 끝을 확인하려고
끝까지 눌러 보는 수밖에 없다. aria-hidden인 이유: 같은 사실을 피드의 aria-label과
라이브 리전이 이미 문장으로 말한다. */
align-self: center;
margin-inline-end: 3px;
color: var(--cg-text-soft);
font-size: var(--ds-text-caption-12);
font-variant-numeric: tabular-nums;
}
.news-card {
position: relative;
display: flex;
flex-direction: column;
gap: 6px;
min-width: 0;
}
/* ★없으면 주제 필터가 화면에서 아무 일도 하지 않는다. selectNewsTopic이 card.hidden = true를
놓아도, 사용자 에이전트 기본 규칙 `[hidden] { display: none }`은 특이도 (0,0,1)이라
바로 위 `.news-card { display: flex }` (0,1,0)에 진다. 실브라우저에서 실측했다:
aria-pressed="true"에 hidden 속성까지 붙은 카드가 display:flex로 그대로 보였다.
DOM 스텁은 hidden을 «속성이 있으니 숨겨졌다»로 읽어 이 결함을 통과시킨다. */
.news-card[hidden] {
display: none;
}
.news-card-shot {
position: relative;
overflow: hidden;
aspect-ratio: 16 / 10;
border-radius: var(--ds-radius-sm);
background: var(--cg-hover);
}
/* ══ 사진 없는 기사의 «채워진» 자리 (2026-08-04, 사용자 지적) ══════════════════════════
사진이 없다고 칸을 통째로 빼면 카드마다 제목 시작점이 달라져 격자가 들쭉날쭉해 보인다.
`align-items: stretch`가 **발**은 맞춰 주지만 **머리**는 못 맞춘다.
★예전 결정(«빈 상자를 남기지 않는다»)과 모순이 아니다. 그때 문제는 **아무것도 없는**
사각형이었다. 여기서는 «사진 없음»으로 채운다 — 헤어라인 테두리와 글리프가 있으면
로딩 스켈레톤이나 깨진 이미지가 아니라 **의도된 부재**로 읽힌다.
★리드(히어로)는 제외다. 1.65 상자를 이렇게 채우면 커다란 슬래브가 되고, 그 모양은
실브라우저에서 이미 기각됐다(.news-lead[data-news-textonly] 참조). */
.news-card-shot[data-news-photo="empty"],
.chatgpt-reference-v1 .news-feed .news-second-shot[data-news-photo="empty"] {
display: grid;
place-items: center;
background: var(--cg-hover-soft, var(--cg-hover));
box-shadow: inset 0 0 0 1px var(--wizon-ai-popover-border);
}
.news-shot-empty {
display: grid;
place-items: center;
color: var(--cg-muted);
opacity: 0.34;
}
.news-shot-empty svg {
/* 카드는 넉넉히, 64px 2단 칸은 작게 — 칸 폭을 따라간다. */
inline-size: clamp(18px, 22%, 34px);
block-size: auto;
}
/* 카드 전체가 링크지만 안에 버튼을 넣지 않는다(무효 HTML이자 키보드 함정). 늘린 링크가
카드를 덮고, 북마크 버튼만 그 위로 올라온다. */
.news-card-link {
margin-top: 5px;
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
/* 14 → 15. 카드 제목은 요약(12)보다 위, 섹션 이름(18)보다 아래여야 한다. 14px이면
요약과 1.17배밖에 안 벌어지고, 15px이면 1.25배다.
★고정 15px이면 좁은 폭에서 사다리가 «위만» 내려오고 여기서 멈춰 칸 간격이 무너진다.
2.2cqw는 컨테이너 681.8px부터 상한 15px에 닿으므로 실채팅 폭 709px에서는 15.6 → 15px로
**1280 값이 그대로 유지**되고(실측), 390(283px)에서만 하한 body-14가 드러나 요약 12px과
1.17배를 지킨다. 하한을 13으로 더 낮추지 않는 이유가 그것이다 — 13이면 1.08배로 요약과
사실상 같은 층이 된다. */
font-size: clamp(var(--ds-text-body-14), 2.2cqw, var(--ds-text-body-15));
font-weight: 600;
line-height: 1.4;
letter-spacing: -0.014em;
text-wrap: pretty;
text-decoration: none;
color: var(--cg-text);
}
.news-card-link::after {
content: "";
position: absolute;
inset: 0;
border-radius: var(--ds-radius-sm);
}
.news-card-link:hover {
text-decoration: underline;
text-underline-offset: 3px;
}
/* 포커스 링 → 블록 끝의 «뉴스 포커스 링» 참조(여기 있던 (0,2,0) 규칙은 죽은 코드였다). */
/* ★★이 위젯에서 유일한 다. 접두사가 없던 동안 `.chatgpt-reference-v1 .message-body p`
(0,2,0)가 이겨서 요약이 **16px/27.2px**로 렌더됐다 — 자기 카드 제목(14px)보다 크다.
모든 카드에서 위계가 뒤집혀 있었다(실측). 접두사 두 개 = (0,3,0)이라 순서와 무관하게 이긴다.
위 .news-feed-title 주석에 이 캐스케이드 사고의 전모가 있다. */
.chatgpt-reference-v1 .news-feed .news-card-excerpt {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
margin: 0;
font-size: var(--ds-text-caption-12);
font-weight: 400;
line-height: 1.55;
color: var(--cg-muted);
}
.news-card-foot {
display: flex;
align-items: center;
gap: 8px;
margin-top: auto;
padding-top: 8px;
}
/* 출처 행 = 템플릿의 «아바타 + 작성자 + 날짜». 우리는 작성자가 없고 언론사가 있다. */
.news-by {
display: flex;
align-items: center;
min-width: 0;
}
.news-by-band .news-time {
/* 프로스티드 밴드 위에서만 한 단계 올린다 — 위 .news-lead-band 주석의 계산 참조. */
color: var(--cg-text-soft);
}
.news-bookmark {
/* 늘린 카드 링크(.news-card-link::after) 위로 올라와야 눌린다. */
position: relative;
z-index: 1;
flex: none;
margin-inline-start: auto;
display: grid;
place-items: center;
width: 28px;
height: 28px;
border: 0;
border-radius: var(--ds-radius-xs);
background: transparent;
color: var(--cg-muted);
cursor: pointer;
transition: color var(--wds-duration-fast) ease, background var(--wds-duration-fast) ease;
}
.news-bookmark:hover {
background: var(--cg-hover-soft);
color: var(--cg-text);
}
.news-bookmark .wds-inline-icon {
width: 16px;
height: 16px;
}
/* 눌림은 색과 «형태»를 함께 바꾼다 — 외곽선 북마크가 채워진 북마크가 된다(SC 1.4.1). */
.news-bookmark[aria-pressed="true"] {
color: var(--news-accent, var(--cg-text));
}
.news-bookmark[aria-pressed="true"] .wds-inline-icon {
fill: currentColor;
}
@media (hover: hover) and (pointer: fine) {
.news-topic:hover {
transform: translateY(-2px);
}
.news-card:hover .news-card-img {
transform: scale(1.05);
}
.news-lead:hover .news-lead-img {
transform: scale(1.04);
}
}
.news-fav {
position: relative;
overflow: hidden;
flex: none;
display: grid;
place-items: center;
width: 16px;
height: 16px;
border-radius: 4px;
font-size: 10px;
font-weight: 600;
color: #ffffff;
}
/* Branded letter fallback — sits under the favicon and shows when the favicon fails to load
(removed in mountNewsFeeds). */
.news-fav-letter {
line-height: 1;
}
/* Real site favicon layered over the letter box. White fill keeps transparent logos crisp;
object-fit contain avoids cropping the mark. */
.news-fav-img {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
object-fit: contain;
background: #ffffff;
}
.news-feed-foot {
font-size: var(--ds-text-caption-12);
color: var(--cg-muted, #8f8f8f);
}
/* ══ 뉴스 포커스 링 ═══════════════════════════════════════════════════════════════════════
★이 표면에 흩어져 있던 네 개의 :focus-visible 규칙은 **한 번도 그려진 적이 없다**. 전역
기본 링
`.chatgpt-reference-v1 :focus-visible:not(input):not(textarea):not(select):not([contenteditable="true"])`
이 (0,3,3)이라 컴포넌트 규칙 (0,2,0)을 전부 눌렀다. 실측(포커스 후 getComputedStyle):
여덟 컨트롤 전부 outline-color가 전역값 rgba(13,13,13,0.16) — 배경 대비 **1.42:1**
(다크는 rgba(255,255,255,0.18) = 1.55:1). SC 1.4.11의 3:1에 한참 못 미치고, 사진 위에서는
배경이 무엇이든 될 수 있으니 더 나쁘다.
★해결은 !important도, 전역 규칙 약화도 아니다. `:is()`는 인자 중 «가장 센 것»의 특이도를
가지므로 이 선택자는 (0,4,0) — 클래스 자리가 4 > 3이라 **순서와 무관하게** 전역을 이긴다.
다른 표면의 전역 링은 한 글자도 바뀌지 않는다.
★두 색 링(안쪽 흰색 3px + 바깥 검정 3px)인 이유: 사진 위에서는 배경 대비를 보장할 수
없으므로 **링끼리** 대비를 갖게 한다(#fff 대 #000 = 21:1). 어떤 배경에서도 둘 중 하나는
3:1을 넘는다 — 실측: 흰 배경에서 검정 링 21:1, 검은 사진에서 흰 링 21:1, 중간 회색(128)
에서 흰 3.95:1 / 검정 5.32:1.
★★그리고 이 규칙은 @media (pointer: coarse) 안의 전역 `outline: none`(같은 (0,3,3))도
이긴다 — 그래서 터치스크린 노트북·키보드 붙인 태블릿에서 뉴스 컨트롤 26개의 포커스가
«사라지지» 않는다. 그 전역 억제는 그대로 두었다(다른 표면은 종전과 동일). */
.chatgpt-reference-v1
.news-feed
:is(
.news-lead,
.news-second-link,
.news-card-link,
.news-topic,
.news-topics-more,
.news-hero-nav,
.news-hero-autoplay,
.news-arrow,
.news-dot,
.news-bookmark,
.news-subscribe-btn):focus-visible {
outline: 3px solid var(--ds-white);
outline-offset: 0;
box-shadow: 0 0 0 6px var(--ds-black);
}
/* 선택된 주제 탭은 강조색 링으로 «선택»을 말한다. 포커스 링이 그 자리를 덮어쓰지 않도록
바깥에 한 겹 더 얹는다 — 포커스와 선택이 동시에 보인다.
★aria-pressed → aria-selected. 탭은 «눌림»이 아니라 «선택»이다(doc 343 §4.3). 선택자를
같이 안 바꾸면 이 규칙이 조용히 아무 요소에도 안 걸린다. */
.chatgpt-reference-v1 .news-feed .news-topic[aria-selected="true"]:focus-visible {
box-shadow: 0 0 0 6px var(--ds-black), 0 0 0 8px var(--news-accent);
}
/* ★★히어로 슬라이드만 예외다. .news-hero는 overflow:hidden이고 슬라이드가 그 상자를 «꽉»
채우므로(실측: 클리퍼와의 여백이 사방 0px) 바깥으로 그리는 링은 통째로 잘린다 — 실제로
포커스 스크린샷에서 링이 한 픽셀도 보이지 않았다. 레일과 달리 여기엔 패딩을 줄 자리가
없다(패딩을 주면 캐러셀 트랙 계산이 어긋난다). 그래서 이 컨트롤만 링을 **안쪽**에 그린다.
★box-shadow: inset은 배경 레이어라 사진(.news-thumb, z-index:1) 아래로 깔려 보이지 않는다.
그래서 의사요소에 얹고 z-index를 사진·밴드보다 위로 올린다.
★두 겹의 순서: 목록 뒤쪽 그림자가 «뒤»에 깔린다. 흰색 0..3px이 위, 검정 0..6px이 아래라
화면에는 흰 3px(안) + 검정 3px(밖)으로 보인다 — 바깥 두 규칙과 같은 21:1 쌍이다.
★outline을 끄는 건 «포커스를 지우는 것»이 아니라 같은 요소에서 더 잘 보이는 표시로
**교체**하는 것이다. 아래 ::after가 없으면 이 규칙은 접근성 후퇴다 — 함께 지울 것. */
.chatgpt-reference-v1 .news-feed .news-lead:focus-visible {
outline: none;
box-shadow: none;
}
.chatgpt-reference-v1 .news-feed .news-lead:focus-visible::after {
content: "";
position: absolute;
inset: 0;
z-index: 4; /* 사진(1) < 밴드(2) < 화살표·도트(3) < 포커스 링 */
pointer-events: none;
border-radius: inherit;
box-shadow: inset 0 0 0 3px var(--ds-white), inset 0 0 0 6px var(--ds-black);
}
/* ---- Generated file download card (doc 171 P2 / batch D3) -----------------------------
Server-generated file (e.g. xlsx) sits below the answer body as a single download
affordance. Tone matches .md-table-copy (small outline button on --cg-* surface tokens);
layout matches .news-feed (bordered card, container query for narrow reflow). */
.generated-file-card {
container-type: inline-size;
display: flex;
/* wrap lives here, not in the @container block below: a container query styles a container's
descendants, never the container element itself, so the narrow-width rule cannot flip the
card's own flex-wrap. Without it the button's flex-basis: 100% overflows instead of wrapping. */
flex-wrap: wrap;
align-items: center;
gap: 12px;
margin-top: 14px;
padding: 14px 16px;
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--wizon-ai-menu-radius);
background: var(--cg-surface);
color: var(--cg-text);
}
.generated-file-icon {
display: grid;
flex: none;
place-items: center;
width: 36px;
height: 36px;
border-radius: var(--wizon-ai-radius-control);
color: var(--cg-text-soft, var(--muted));
}
/* The attachment artwork carries its own colour and its own paper shape, so the grey tile
the old inline glyph needed would only box it in. Kept for the svg branch in case a card
ever falls back to a line icon. */
.generated-file-icon svg,
.generated-file-icon .wds-inline-icon {
width: 18px;
height: 18px;
background: var(--cg-hover-soft, var(--surface-2));
border-radius: var(--wizon-ai-radius-control);
}
.generated-file-icon .composer-attachment-art {
width: 32px;
height: 32px;
object-fit: contain;
}
.generated-file-body {
display: flex;
flex: 1 1 auto;
flex-direction: column;
gap: 2px;
min-width: 0;
}
.generated-file-name {
overflow: hidden;
font-size: var(--ds-text-caption-13);
font-weight: 600;
text-overflow: ellipsis;
white-space: nowrap;
}
.generated-file-meta {
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft, var(--muted));
}
/* doc 171 S2c — the actions beside a generated file. Shaped from .generated-file-download
below rather than from a design-system class name: the portal stylesheet has no ds-button,
and borrowing one that does not exist is how the save button ended up as wrapped text in a
34px box on 2026-08-10. */
.generated-file-action {
display: inline-flex;
flex: none;
align-items: center;
padding: 6px 12px;
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--wizon-ai-radius-control);
background: var(--cg-text, var(--text));
color: var(--cg-surface);
font: inherit;
font-size: var(--ds-text-caption-12);
line-height: 1;
white-space: nowrap;
cursor: pointer;
}
.generated-file-more {
position: relative;
flex: none;
}
.generated-file-more-trigger {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: 30px;
padding: 6px 8px;
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--wizon-ai-radius-control);
background: var(--cg-surface);
color: var(--cg-text, var(--text));
font: inherit;
line-height: 1;
cursor: pointer;
}
.generated-file-more-menu {
position: absolute;
right: 0;
z-index: 20;
display: grid;
min-width: 168px;
margin-top: 4px;
padding: 4px;
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--wizon-ai-radius-menu-row);
background: var(--cg-surface);
box-shadow: var(--ds-shadow-md);
}
.generated-file-more-menu[hidden] {
display: none;
}
.generated-file-more-menu button {
padding: 8px 10px;
border: 0;
border-radius: var(--ds-radius-xs);
background: transparent;
color: var(--cg-text, var(--text));
font: inherit;
font-size: var(--ds-text-caption-12);
text-align: left;
white-space: nowrap;
cursor: pointer;
}
.generated-file-more-menu button:hover,
.generated-file-more-menu button:focus-visible {
background: color-mix(in srgb, var(--cg-text) 6%, transparent);
}
.generated-file-download {
display: inline-flex;
flex: none;
align-items: center;
gap: 6px;
padding: 6px 12px;
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--wizon-ai-radius-control);
background: var(--cg-surface, #fff);
color: var(--cg-text, var(--text));
font: inherit;
font-size: var(--ds-text-caption-12);
line-height: 1;
cursor: pointer;
transition: background 120ms ease, color 120ms ease, opacity 120ms ease;
}
.generated-file-download:hover {
background: var(--cg-hover-soft, var(--surface-2));
}
.generated-file-download:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring, #0d0d0d);
outline-offset: 2px;
}
.generated-file-download:disabled {
cursor: not-allowed;
opacity: 0.55;
}
.generated-file-download.is-copied {
color: var(--accent, #2f6bff);
}
.generated-file-download.is-expired {
color: var(--cg-text-soft, var(--muted));
}
.generated-file-download-icon {
display: inline-flex;
}
.generated-file-download-icon svg,
.generated-file-download-icon .wds-inline-icon {
width: 13px;
height: 13px;
}
.generated-file-card.is-expired .generated-file-icon {
opacity: 0.6;
}
.generated-file-card.is-expired .generated-file-meta {
color: var(--cg-text-soft, var(--muted));
}
@container (max-width: 520px) {
/* .generated-file-body deliberately keeps its base flex: 1 1 auto here (no flex-basis: 100%
override) so it shares the first row with the icon instead of forcing the icon to sit alone
on a mostly-empty line. Only the download button drops to its own full-width row below. */
.generated-file-download {
flex-basis: 100%;
justify-content: center;
}
}
@media (prefers-reduced-motion: reduce) {
.generated-file-download {
transition: none;
}
}
/* ---- Document summary insight card (D2, docs/53 §7.1 · specs/2026-06-03) ------------------
Evidence-backed insight surface for attached-document answers: enterprise-dense, subdued,
≤8px radius, no decorative gradients, tone via border/text (never color-only — WCAG AA). Sits
below the prose answer (attach). Container query reflows the fact tiles, not a breakpoint.
Tokens only (no raw hex — anti-drift ratchet); tone accents reuse the semantic danger/success/
accent tokens (no warning token exists, so warning shares the accent emphasis). */
/* 2026-08-26 공용 위젯 카드 셸로 이관(차별화 축① 1차 슬라이스).
컨테이너·표면·실선·모서리·여백·본문색은 이제 .wiz-card[data-wiz-density="compact"]
가 소유한다(wizon-widget-card-shell.css). 여기 남아 있던 같은 선언은 지웠다 —
두 시트가 같은 속성을 걸면 «나중에 로드된 쪽»만 이기고, 지는 선언은 화면에 한 번도
닿지 않으면서 읽는 사람만 헷갈리게 한다(이 시트 14600행대에 같은 사고 기록 있음).
raw 14px/16px 도 함께 사라진다 — 스케일 밖 값이 토큰으로 흡수된 자리다. */
.doc-summary-head {
margin-bottom: 0;
}
/* 배지와 상태 칩을 한 덩어리로 묶는 eyebrow 슬롯. 셸의 __headings 안에서 제목 위에
선다 — 이전에는 셋(배지·상태·문서명)이 한 줄에 나란했지만, 문서명은 «출처/시각»
이라 셸의 __meta 로 갈라졌다. */
.doc-summary-eyebrow {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wiz-card-gap-tight);
}
.doc-summary-badge {
padding: 2px 8px;
border-radius: var(--ds-radius-xs);
background: var(--cg-hover-soft);
color: var(--cg-text);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.doc-summary-status {
padding: 2px 8px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-pill);
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft);
}
.doc-summary-status[data-status="completed"] {
border-color: color-mix(in oklab, var(--accent) 40%, transparent);
color: var(--accent);
}
.doc-summary-doc {
margin-left: auto;
overflow: hidden;
max-width: 100%;
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft);
text-overflow: ellipsis;
white-space: nowrap;
}
/* 제목과 개요의 여백·크기·굵기·색은 셸의 .wiz-card__title / .wiz-card__subtitle 이
소유한다. 세로 리듬은 이제 margin-bottom 이 아니라 __headings 의 gap 이 만든다.
★한 가지 «의도한» 변화: 개요가 본문색(--cg-text)에서 보조색(ink-soft)으로 내려간다.
제목 아래 딸린 문장이 제목과 같은 농도로 서 있으면 위계가 안 생기고, 옆 카드
(commerce)의 부제는 이미 --wizon-ai-text-secondary 였다. 두 카드가 «부제가 무슨
색인가»에 서로 다른 답을 갖고 있던 걸 하나로 맞춘 자리다. */
/* (규칙 없음 — 셸이 전부 소유한다. 여기에 같은 속성을 한 줄이라도 남기면 «지는
선언»이 되어 읽는 사람만 속인다.) */
.doc-summary-facts {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: 8px;
margin-bottom: 10px;
}
.doc-summary-fact {
display: flex;
flex-direction: column;
gap: 3px;
padding: 10px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-sm);
background: var(--cg-hover-soft);
min-width: 0;
}
/* ★경고와 위험은 다른 단계다. 두 tone이 한 선택자에 묶여 --cg-danger-fg 하나를 쓴 탓에
화면에서 같은 빨강으로 뭉개졌다 — fact 타일의 tone 신호는 이 테두리 하나뿐이라
(app.js의 타일은 label/value에 tone별 스타일이 없다) 두 단계를 구분할 방법이 없었다.
.doc-summary-notice가 이미 warning/danger를 나눠 쓰는 것과 같은 형태로 맞춘다.
실브라우저 실측(color-mix 55% 통과 후 캔버스로 되읽은 합성 픽셀, 타일 배경
--cg-hover-soft 대비): 라이트 #b45309→#d19c73 2.19:1, 다크 #f59e0b→#956514 3.18:1.
다크는 이 자리에 있던 빨강(2.61:1)보다 오히려 나아진다. 옛 규칙을 되살려 같은
엔진에서 잰 BEFORE는 두 tone 거리가 0.0 — 말 그대로 같은 색이었다(AFTER 11.3/21.2).
★믹스 강도 55%→80%→85%(family 단위 단일 값. tone별로 다르게 두지 않는다). 55%로는
여섯 경우 중 넷이 SC 1.4.11의 3:1에 미달했다: 라이트 warning 2.19 / danger 2.59 /
positive 2.18, 다크 danger 2.61. 이 테두리가 심각도를 나르는 유일한 신호라 여기서
색은 장식이 아니라 정보다. 3:1을 처음 넘기는 값은 tone·테마별로 라이트 75/63/75%,
다크 53/63/50%(warning/danger/positive)라 라이트 warning·positive가 family 전체를
묶는 제약이다. 최저 통과값 75%는 3.01:1로 여유가 없어 토큰이 조금만 움직여도
되돌아간다.
80%(최저 3.27:1)에서 85%로 한 번 더 올린 근거는 «배경 대비»가 아니라 «중립 대비»다.
타일이 톤을 가졌다는 걸 읽히려면 톤 없는 이웃 타일과 구별돼야 하는데, 그 거리가
80%에서 다크 danger 2.70까지 내려간다. 85%면 배경 대비 최저 3.52:1, 중립 대비도
라이트 3.02 / 다크 2.97로 두 축이 함께 ~3에 선다. 중립 대비는 1.4.11의 요구사항이
«아니다»(인접색이 아니라 옆 타일이고, 색상차가 휘도비로 안 잡히는 몫을 메운다) —
요구가 아니라 «이 테두리가 유일한 신호»라는 전제를 끝까지 민 결과다. 형제
.doc-summary-notice가 같은 토큰을 믹스 없이 100%로 쓰므로 85%도 여전히 옅은 쪽이다.
강도를 var()로 빼지 않은 건 이 시트에 color-mix 퍼센트를 var로 넣은 선례가 없어서다
(검증 안 된 패턴을 새로 들이는 것보다 기존 형태 유지가 낫다). 중립 테두리
(--cg-menu-border, 라이트 1.17:1 / 다크 1.53:1)는 일부러 그대로 둔다: 메뉴·팝오버까지
쓰는 앱 전역 토큰이라 여기서 결정할 값이 아니고, 1.4.11이 겨냥하는 건 '상태'를
나르는 tone 테두리이며, 무엇보다 중립을 올리면 위의 중립 대비 거리가 «줄어» 신호가
죽는다. 별도 관측: 타일 배경 대 카드 배경은 라이트 1.10 / 다크 1.30이다.
측정은 실브라우저 합성 픽셀 캔버스 되읽기. 하네스 body class에 chatgpt-reference-v1
필수 — --cg-*는 :root가 아니라 이 클래스에 스코프되어, 빠뜨리면 전 토큰이 조용히 빈
값이 되고(테두리가 rgb(13,13,13), 타일 배경이 투명으로 떨어진다) 측정이 통째로
거짓이 된다. 가정이 아니라 클래스를 떼서 실제로 그렇게 되는 걸 확인했다. */
.doc-summary-fact[data-tone="warning"] {
border-color: color-mix(in oklab, var(--cg-warning-fg) 85%, transparent);
}
.doc-summary-fact[data-tone="danger"] {
border-color: color-mix(in oklab, var(--cg-danger-fg) 85%, transparent);
}
.doc-summary-fact[data-tone="positive"] {
border-color: color-mix(in oklab, var(--cg-success) 85%, transparent);
}
.doc-summary-fact-label {
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft);
}
.doc-summary-fact-value {
font-size: var(--ds-text-caption-13);
font-weight: 600;
overflow-wrap: anywhere;
}
.doc-summary-fact-unit {
margin-left: 2px;
font-size: var(--ds-text-caption-12);
font-weight: 500;
color: var(--cg-text-soft);
}
.doc-summary-chip {
align-self: flex-start;
margin-top: 2px;
padding: 1px 6px;
border-radius: var(--ds-radius-xs);
background: var(--cg-surface);
border: 1px solid var(--cg-menu-border);
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft);
}
.doc-summary-rows {
display: flex;
flex-direction: column;
gap: 0;
margin: 0 0 10px;
border-top: 1px solid var(--cg-menu-border);
}
.doc-summary-row {
display: flex;
flex-wrap: wrap;
align-items: baseline;
gap: 8px;
padding: 7px 0;
border-bottom: 1px solid var(--cg-menu-border);
}
.doc-summary-row-label {
flex: 0 0 auto;
min-width: 96px;
margin: 0;
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft);
}
.doc-summary-row-value {
flex: 1 1 60%;
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin: 0;
font-size: var(--ds-text-caption-13);
overflow-wrap: anywhere;
}
/* doc 234 W6 — 아티팩트 고위험 고지가 같은 레이아웃을 쓴다. 값을 복제하지 않고
선택자만 얹는다: 성격이 같은 고지가 두 모양으로 보이면 사용자는 둘을 다른 것으로
읽는다. 항목 색은 아래 .doc-summary-notice[data-tone] 규칙이 그대로 정한다. */
.doc-summary-notices,
.artifact-notices {
display: flex;
flex-direction: column;
gap: 6px;
margin-bottom: 8px;
}
/* 문서요약은 본문 위, 아티팩트 고지는 표 뒤에 붙으므로 위쪽 간격이 필요하다. */
.artifact-notices {
margin-top: 8px;
}
/* doc 234 v5 — 2줄 셀의 보조줄. 부속 열이 왼쪽 이웃 안으로 접혀 들어온 자리다.
★주값과 같은 무게로 보이면 접은 의미가 없다. 한 단계 작고 흐리게 두어 «이 값의
속성»으로 읽히게 한다. 색은 기존 토큰만 쓴다(새 리터럴 없음 — raw-color 래칫). */
/* kpi.trend — 추세 요약 띠. 정렬 기준 캡션과 같은 자리(스크롤 영역 밖, 카드 안쪽 맨 위)에
앉아 표 전체에 대한 한 줄 요약으로 읽힌다. */
/* ★접두사 필요 — `.md-table-tile-label` 주석 참조. 이 띠도
다: 접두사 없이는 전역
산문 규칙의 margin 10px가 이겨 표와의 간격이 6px가 아니게 된다. */
.message-body .md-table-wrap .md-table-trend {
display: flex;
align-items: center;
gap: var(--ds-space-2);
margin: 0 0 var(--ds-space-1);
padding: 0 2px;
}
.md-table-trend svg {
flex: none;
overflow: visible;
}
/* ★선만 그린다. 면(area)으로 채우면 0 기준처럼 보이는데 이 선은 min~max 정규화라
기준선이 0이 아니다 — 채우면 그림이 거짓말을 시작한다. */
.md-table-trend polyline {
fill: none;
/* ★데이터 마크는 «차트 계열색»을 쓴다. 원래 `var(--cg-focus-ring, var(--accent))` 였는데
포커스 링은 테두리 장식용 토큰이라 대비 예산이 다르다 — 2026-08-07 라이브 실측에서
이 선의 실효 대비가 흰 배경 대비 1.43:1 이었다(WCAG 2.2 SC 1.4.11 기준 3:1 미달).
의도했던 `var(--accent)` 폴백은 `--cg-focus-ring` 이 정의돼 있어 한 번도 발화하지
않았다 — 폴백이 죽은 토큰 선택을 가려 준 셈이다.
★같은 답변 안의 인라인 차트 선과 **같은 토큰**을 쓴다. 한 답변 안에서 추세를 말하는
그림 둘이 다른 색 언어를 쓸 이유가 없다. */
stroke: var(--ds-chart-slot-1);
stroke-width: 1.5;
stroke-linejoin: round;
stroke-linecap: round;
}
.md-table-trend-caption {
color: var(--cg-text-soft);
font-size: var(--ds-text-caption-12);
line-height: 1.45;
}
/* ★레일은 «한 번도 그려진 적이 없다» (2026-08-08 라이브 실측으로 확정).
규칙이 `td` 로만 걸려 있었는데, 렌더러는 첫 열을 `
` 로 낸다(접근성
결정). 레일이 붙는 시간 열은 대개 첫 열이므로 선택자가 **한 번도 매칭되지 않았다**.
증거: 일정 표 5행 전부 `matchesTdSelector=false`·`matchesThVariant=true`,
`padding-left` 가 규칙의 22px 이 아니라 12px, `::before`/`::after` 가 `content: none`.
★판정기는 통과하고 클래스도 붙어 있었다 — 「적용됐다」와 「그려졌다」는 다른 말이다. */
/* schedule.timeline — 시간 열의 레일. 점과 잇는 선으로 «순서»를 보여 준다.
★크기를 말하지 않는다. 이미 표에 적힌 날짜의 순서를 확인해 잇는 것뿐이라, 고위험
도메인(마감·제출기한)에서도 그린다. */
.md-table th.md-table-timeline,
.md-table td.md-table-timeline {
position: relative;
padding-left: 22px;
white-space: nowrap;
}
.md-table th.md-table-timeline::before,
.md-table td.md-table-timeline::before {
content: "";
position: absolute;
left: 5px;
top: 0;
bottom: 0;
width: 1px;
background: var(--cg-menu-border, var(--line));
}
.md-table th.md-table-timeline.is-first::before,
.md-table td.md-table-timeline.is-first::before {
top: 50%;
}
.md-table th.md-table-timeline.is-last::before,
.md-table td.md-table-timeline.is-last::before {
bottom: 50%;
}
.md-table th.md-table-timeline::after,
.md-table td.md-table-timeline::after {
content: "";
position: absolute;
left: 2px;
top: 50%;
width: 7px;
height: 7px;
margin-top: -3px;
border-radius: var(--ds-radius-pill, 999px);
/* ★폴백 원시값을 쓰지 않는다 — 드리프트 래칫이 잡았다(1050 → 1051). 점 안쪽은
카드 표면색이어야 레일 선이 점을 관통하지 않는다. */
background: var(--cg-surface);
box-shadow: inset 0 0 0 1.5px var(--cg-focus-ring, var(--accent));
}
/* 수치 열의 데이터 바 (doc 234 v5). 셀 뒤에 값에 비례하는 띠를 깔아 숫자 열을 읽지 않고도
대소가 보이게 한다. 막대는 이미 셀에 있는 숫자를 다시 그릴 뿐이라 새 주장을 얹지 않는다.
★scaleX로 늘린다 — width 애니메이션은 레이아웃을 다시 계산시키고, 여기선 정적이어도
같은 이유로 합성 가능한 속성을 쓴다. 원점을 왼쪽에 두어야 0에서 자란다. */
/* v7 — 지표 타일. 규범이 「a handful of headline numbers」에 지정한 형태다(차트가 아니다).
★깊이: 카드는 그림자로 «뜨고» 이 띠는 inset으로 «눌린다». 두 층이 생기면 표가 세 번째
층으로 자연히 뒤로 물러난다 — 카드 안이 한 층뿐이라 평평했던 것을 여기서 푼다. */
/* ── 등장 모션 (⑤, doc 234) ──
★목적이 있는 모션만 넣는다(조사: 「모든 애니메이션에 목적이 있어야 한다」).
띠는 먼저 떠올라 «여기가 요약»이라는 읽기 순서를 세우고, 자는 오른쪽 기준점에서 자라며
크기 부호화를 «재어 보이게» 한다. 장식이 아니라 위계와 인코딩을 말한다.
★★기본 상태는 «최종 상태»다. scaleX(0)·opacity 0을 기본으로 두면 reduced-motion
사용자에게 막대가 통째로 사라진다 — 애니메이션은 항상 없어도 되는 것이어야 한다. */
@keyframes md-table-tiles-in {
from {
opacity: 0;
transform: translateY(4px);
}
to {
opacity: 1;
transform: translateY(0);
}
}
/* ── 첫 열 고정 (v10-2) ──
★히트맵의 전제조건이다. 3열 이상 표는 가로 스크롤인데 행 식별자가 같이 밀려 사라지면
색만 남고 이름이 없어진다 — 「이 진한 셀이 어느 행이었지」가 되어 히트맵이 아무 말도
못 한다. 자(bar)는 값이 셀 안에 함께 있어 덜 치명적이었지만, 히트맵은 값과 이름이 갈린다.
Mobbin 실측: Stake·Formula 1·theScore가 전부 이 방식이다 — 가로 스크롤 표의 관례다.
★배경은 «불투명»이어야 한다. 없거나 반투명이면 스크롤한 셀이 밑으로 비쳐 글자가 겹친다.
★z-index가 필요하다 — 히트맵 셀에도 배경이 있어 문서 순서로는 뒤에 깔린다. */
.md-table-scroll .md-table th:first-child,
.md-table-scroll .md-table td:first-child {
position: sticky;
left: 0;
z-index: 2;
background: var(--cg-surface, var(--ds-color-surface));
box-shadow: 1px 0 0 var(--cg-menu-border, var(--line)),
6px 0 12px -8px color-mix(in srgb, var(--ds-black) 18%, transparent);
}
.md-table-scroll .md-table thead th:first-child {
z-index: 3;
/* ★v7 — 머리글 밴드를 이 모서리 칸까지 잇는다. 위 고정열 규칙이 `--cg-surface`(흰 면)를
주는데, 머리글 행이 밴드가 된 뒤로는 이 한 칸만 흰색으로 남아 밴드가 끊겨 보인다.
불투명 배경이어야 한다는 고정열의 전제는 그대로 지킨다(밴드도 불투명 토큰이다). */
background: var(--cg-hover-soft);
}
/* ★고정 열은 자기 배경을 가지므로 행 hover 배경을 상속받지 못한다 —
이 규칙이 없으면 마우스를 올렸을 때 첫 칸만 색이 안 바뀐다. */
@media (hover: hover) {
.md-table-scroll .md-table tbody tr:hover th:first-child,
.md-table-scroll .md-table tbody tr:hover td:first-child {
background: var(--cg-hover-soft, var(--ds-color-surface-muted));
}
}
/* 행 끝의 추이 열 (W2).
★Uniswap·Pinterest Trends가 쓰는 관용구다 — 숫자 넉 줄을 읽어야 알던 «올랐는가»를
한 번에 보여준다. 표를 문서에서 위젯으로 바꾸는 가장 큰 한 걸음이다.
★선은 요약이지 대체가 아니다. 값은 셀에 그대로 남고, 계획이 없는 행은 빈 칸이다 —
없는 추세를 그리느니 비워 둔다.
★색은 «추이» 종류 색을 쓴다. 히트맵 램프와 같은 계열이라 카드 안에서 따로 놀지 않는다. */
/* ★추이 열은 오른쪽에 고정한다 — 첫 열 고정의 **거울상**이다.
2026-08-02 실측: 추이 열을 붙이자 표가 83px 넘쳤고 그 넘침이 정확히 추이 열을 잘라
SVG 64px 중 15px만 남았다. 선의 77%가 화면 밖이었다. 계산값만 보면 정상이라
확대 스크린샷이 아니었으면 놓쳤다.
★업계 표준이 이 경우를 다룬다 — 「맨 왼쪽 열을 고정하고, 때로는 합계 같은 **요약을
담는 맨 오른쪽 열도** 고정한다」(Pencil & Paper). 추이 열이 그 «요약»이다.
★그림자는 방향만 뒤집는다. 같은 방향이면 표 밖으로 나가 층으로 안 읽힌다. */
.md-table-sparkline-head,
.md-table-sparkline-cell {
position: sticky;
right: 0;
z-index: 2;
background: var(--cg-surface, var(--ds-color-surface));
box-shadow: -1px 0 0 var(--cg-menu-border, var(--line)),
-6px 0 12px -8px color-mix(in srgb, var(--ds-black) 18%, transparent);
}
.md-table-sparkline-head {
/* 머리글은 다른 열과 같은 규칙을 따른다 — 여기서만 다르면 줄이 어긋나 보인다. */
text-align: center;
/* ★교차 지점에서 본문 위에 선다. 첫 열 머리글이 3인 것과 같은 이유다. */
z-index: 3;
}
.md-table-sparkline-cell {
width: 1%; /* 내용만큼만 — 데이터 열의 폭을 뺏지 않는다 */
text-align: center;
vertical-align: middle;
}
/* ★고정 열은 자기 배경을 가지므로 행 hover 배경을 상속받지 못한다 — 첫 열과 같은 처리.
토큰도 첫 열이 쓰는 것을 그대로 쓴다. 다르면 두 고정 열의 hover 색이 갈린다. */
@media (hover: hover) {
.md-table tbody tr:hover .md-table-sparkline-cell {
background: var(--cg-hover-soft, var(--ds-color-surface-muted));
}
}
.md-table-sparkline {
display: block;
width: 64px;
height: 16px;
margin: 0 auto;
overflow: visible;
}
.md-table-sparkline-line {
fill: none;
stroke: var(--ds-kind-trend-mark, currentColor);
stroke-width: 1.5;
/* 꺾이는 지점이 뾰족하면 작은 크기에서 점처럼 튄다. */
stroke-linecap: round;
stroke-linejoin: round;
vector-effect: non-scaling-stroke;
}
@media (prefers-reduced-motion: no-preference) {
/* 선이 왼쪽에서 자라난다 — 시간 방향과 같아 «읽는 방향»을 강화한다.
★`stroke-dashoffset`은 컴포지터에 남지 않지만 요소가 64×16으로 작고 행당 하나뿐이라
비용이 무시할 수준이다. 레이아웃은 건드리지 않는다.
★`--ds-motion-default`는 **지속시간+이징을 함께** 담는다(`220ms cubic-bezier(...)`).
뒤에 이징을 또 붙이면 단축 속성이 무효가 된다 — 실제로 그렇게 썼다가 애니메이션이
통째로 드롭됐다. */
.md-table-sparkline-line {
animation: md-table-sparkline-draw var(--ds-motion-default) forwards;
}
}
/* ★대시는 키프레임 «안»에만 둔다. 기본 규칙에 두면 애니메이션이 어떤 이유로든 안 돌 때
`stroke-dashoffset`만 남아 **선이 통째로 사라진다** — 2026-08-02 실화면에서 정확히 그
상태였다(선 길이 61에 오프셋 120). 모션은 실패해도 콘텐츠는 보여야 한다. */
@keyframes md-table-sparkline-draw {
from {
stroke-dasharray: 120;
stroke-dashoffset: 120;
}
to {
stroke-dasharray: 120;
stroke-dashoffset: 0;
}
}
/* 히트맵 범례 (W1-3).
★조사한 히트맵 화면은 예외 없이 범례를 갖고 있었는데(Klaviyo·Vanta·Gorgias) 우리만
없었다. 5단계로 칠하면서 무엇이 높고 낮은지 안 말하면 색각 이상 사용자에게는 아무
정보도 아니다.
★더 중요한 것은 «축»이다. 같은 색이 어떤 표에서는 이 행 안에서 크고 다른 표에서는
이 열 안에서 크다 — 안 알려주면 표 전체에서 큰 값으로 오독된다.
★견본 색은 셀 규칙에 **선택자를 덧붙여** 선언을 공유한다. 따로 쓰면 팔레트를 바꿀 때
한쪽만 바뀌어 범례가 다른 표를 설명하게 된다. */
@media (max-width: 520px) {
}
/* ── 종류 chip (④, doc 234 v9) ──
★색은 «종류»를 말하고 «평가»를 말하지 않는다. 빨강·초록은 이 제품에서 이미
danger/success를 뜻해 범주형 팔레트에서 영구 배제했다(--ds-kind-* 생성기 참조).
★이 트랙은 색각이상 «분리도»를 일부러 포기하고 대비 균일성을 샀다 — 카드당 종류가
하나만 뜨고 chip에 늘 글자가 함께 가므로 색이 안 보여도 잃는 정보가 0이다.
그래서 chip은 절대 아이콘·점만으로 서지 않는다(애플 HIG: 색에만 의존하지 말라). */
.md-table-kind-chip {
/* ★v7-1 — `flex-start` → `center`. 옛 툴바는 `align-items: flex-start` 에 제목이
두 줄(이름 + "N열 × M행")이라 칩이 첫 줄에 맞으려면 위로 붙어야 했다. v7에서 부제가
sr-only 가 되며 툴바를 `center` 로 바꿨는데 이 칩만 따라오지 않아, 실측 결과 칩
중심이 제목 중심보다 **9.8px 위**에 떠 있었다. 툴바가 가로 정렬을 소유하므로
여기서는 교차축을 거스르지 않는다. */
/* ★v11 — 채움을 뺐다. 툴바 한 줄에서 색이 채워진 유일한 요소가 «누를 수 없는» 이 칩이고
정작 선택된 세그먼트는 흰색이라, 사용자가 「추이가 선택됨」으로 읽었다(실측). 색은
여전히 «종류»를 말하지만 글자 위에서 말한다 — 이 파일의 원래 계약대로 라벨이 정보를
온전히 지므로, 채움을 빼도 잃는 정보는 0이다.
★`margin-left: auto` 도 뺐다. 이제 제목 무리 안이라 밀어낼 것이 없다. */
flex: none;
font-size: var(--ds-text-caption-12);
font-weight: var(--ds-weight-semibold);
white-space: nowrap;
}
.md-table-kind-chip[data-kind="compare"] {
color: var(--ds-kind-compare-ink);
}
.md-table-kind-chip[data-kind="trend"] {
color: var(--ds-kind-trend-ink);
}
.md-table-kind-chip[data-kind="schedule"] {
color: var(--ds-kind-schedule-ink);
}
.md-table-kind-chip[data-kind="rank"] {
color: var(--ds-kind-rank-ink);
}
/* ── 근거 표기 (④) ──
★색을 주지 않는다. 「문서 근거」에 색을 얹으면 「모델 지식보다 낫다」는 평가가 되고,
그건 색이 하면 안 되는 일이다. 구분은 글자가 한다.
★라서 접두사가 필요하다 — 없으면 전역 산문 규칙(0,2,1)에 져서 본문 크기로 렌더된다. */
.message-body .md-table-wrap .md-table-provenance {
margin: var(--ds-space-3) 0 0;
padding-top: var(--ds-space-3);
border-top: 1px solid var(--cg-menu-border, var(--line));
font-size: var(--ds-text-caption-12);
color: var(--cg-muted);
}
/* ── v7-1 아트디렉션 정합 (2026-08-07, 사용자 지적) ──
★지적: 「사각형인데 비해 상단의 요약 표는 둥근 사각형」·「간격/여백 아트디렉션도 안 맞는다」.
실측으로 확인된 어긋남 둘:
① 모서리 — 타일 14px vs 표 프레임 0px. 같은 색(#f4f4f4) 밴드가 나란히 있는데
모서리 언어만 달라 «둘이 다른 것»으로 읽힌다.
② 들여쓰기 — 표 계열은 제목·머리글·행이름이 **모두 산문 대비 12px** 로 통일돼
있는데 타일만 16px 이라 혼자 4px 더 들어가 왼쪽 정렬선이 깨졌다.
★이 값들은 카드 시절의 유물이다. 14px 은 카드의 22px 아래 «중첩된» 반경이었고,
16px 여백은 카드의 24px 여백 안에서 잡은 리듬이었다. 카드가 사라졌으므로 기준을
표 계열로 옮긴다 — 새 언어를 만들지 않고 이미 있는 리듬에 합류시킨다.
★inset 그림자도 뺀다. 「카드는 그림자로 뜨고 이 띠는 inset 으로 눌린다」는 2층 모델의
아래층인데, 위층(카드 리프트)이 없어져 혼자서는 아무 것도 말하지 않는다. */
/* ★타일 셋은 «각각의 상자»가 아니라 **하나의 격자**다 (2026-08-08).
flex 였을 때는 라벨이 2줄이 되면 그 타일의 값·부제만 내려가 기준선이 깨졌다 —
실측 375px·430px 에서 **20px 어긋남**(라벨 높이 20/20/40). 셋 중 하나만 어긋나 눈에 띈다.
★라벨 길이는 우리가 못 정한다. 「2025-Q1 대비 2025-Q4」는 **표에서 읽어 온 이름**이라
줄바꿈을 없앨 수 없다 — 자르면 무엇 대비 무엇인지가 사라진다. 그래서 줄바꿈을 허용한
채로 기준선을 지킨다: 행을 여기서 정의하고 타일이 `subgrid` 로 **상속**한다.
★행이 짧을 땐 아무 대가도 없다. 라벨이 한 줄인 표에서 띠 높이는 그대로다(실측 89px),
실제로 2줄이 될 때만 109px 로 커진다 — `min-height` 로 늘 2줄을 예약하지 않는 이유다. */
.md-table-tiles {
display: grid;
grid-auto-flow: column;
/* ★`1fr` 만으로는 부족하다 — 자동 최소 크기가 내용 폭이라 긴 값이 자기 열을 넓혀
타일 폭이 갈린다. 종전 flex 의 `flex: 1 1 0` + `min-width: 0` 이 하던 일이다. */
grid-auto-columns: minmax(0, 1fr);
grid-template-rows: auto auto auto;
margin: 0 0 var(--ds-space-3);
animation: md-table-tiles-in var(--ds-motion-default) both;
overflow: hidden;
background: var(--cg-hover-soft, var(--surface-2));
}
/* ★전정기관 민감성. 조사: reduced-motion은 킬 스위치가 아니라 «장식은 빼고 기능은 남긴다».
여기서는 최종 상태가 곧 기능이므로 애니메이션만 제거하면 끝이다 — 기본 상태가 이미
최종 상태라서(opacity 0을 기본으로 두지 않았다) 띠는 그대로 보인다.
★2026-08-08 — 이 블록은 자(bar)와 띠를 함께 다뤘고, A안에서 자 규칙을 걷어낼 때
블록이 통째로 사라졌다(게이트가 잡았다). 남은 소비자 하나로 다시 세운다. */
@media (prefers-reduced-motion: reduce) {
.md-table-tiles {
animation: none;
}
}
.md-table-tile {
position: relative;
/* ★띠의 행을 **상속**한다 — 자기 행을 만들지 않는다. 그래야 라벨이 2줄이 될 때 세
타일의 라벨 행이 «함께» 2줄이 되고 값은 같은 줄에 남는다(위 `.md-table-tiles` 주석).
★`span 3` 과 짝이다. 하나만 있으면 아무 일도 안 한다 — `subgrid` 만 있으면 한 행만
상속해 값·부제가 한 칸에 뭉치고, `span` 만 있으면 자기 행을 만들어 형제와 어긋난다.
★상자를 `display: contents` 로 녹이지 않는다 — `position: relative` 와 아래
`::before` 구분선, 패딩이 이 상자에 걸려 있다. */
display: grid;
grid-template-rows: subgrid;
grid-row: span 3;
min-width: 0;
/* 좌우 12px = 표 셀·제목과 같은 들여쓰기. 세로는 라벨+값 두 줄이라 셀(8px)보다 넉넉히. */
padding: var(--ds-space-3);
}
/* ★타일 값이 잘렸다(실기기 iPhone 402pt: 「139,822」가 「139,…」). 타일은 폭을 균등하게
나눠 가지는데 값은 nowrap+ellipsis라, 안쪽 폭이 모자라면 헤드라인 숫자가 잘린다 —
잘린 숫자는 안 보여 주는 것만 못하다. 「33,03…」은 33,033.3 이 아니라 **틀린 수**다.
실측: 22px에서 「139,822」는 80.5px. 안쪽 폭이 패딩 16일 때 75.3pt로 모자라고
패딩 8이면 91.3pt로 들어간다.
★★2026-08-08 — 「글자를 줄이는 대신 패딩을 줄여 헤드라인 크기를 지킨다」던 종전 결정을
**실측이 뒤집었다.** 패딩만으로는 모자란다(폭별 최소 여유 · 넘치는 값 개수):
값 크기 320 360 375 430 520
22px -19.3 (10) -6.3 (4) -1.3 (1) +16.7 +46.7
18px +0.7 (0) +13.7 (0) +18.7 (0) +36.7 +66.7
22px는 **375px 폰에서도** 넘친다(안전해지는 것은 ~390px부터). 범인은 원 단위 열의
평균(「33,033.3원」, 9자)으로, 요금제·단가 표에서 늘 나오는 모양이다. 헤드라인 크기를
지키려다 헤드라인 «숫자»를 틀리게 만드는 것은 거래가 안 된다 — 한 단계 내린다.
여전히 만능은 아니다: 320px에서 여유가 0.7px라 더 긴 값은 잘린다.
★★이 블록은 기본 규칙 «뒤»에 있어야 한다. @media는 특이도를 올리지 않으므로 앞에 두면
뒤의 기본 규칙이 이겨 override가 통째로 무효가 된다 — 실제로 그렇게 배포했다가
시뮬레이터에서 잘림이 그대로인 것을 보고 잡았다(reduced-motion에서도 같은 실수를 했다). */
@media (max-width: 520px) {
.md-table-tile {
padding: var(--ds-space-2);
}
}
/* 타일 사이는 선으로 가른다 — 박스를 각각 그리면 카드 안에 카드가 겹친다. */
.md-table-tile + .md-table-tile::before {
content: "";
position: absolute;
left: 0;
top: 14px;
bottom: 14px;
width: 1px;
background: var(--cg-menu-border, var(--line));
}
/* ★★접두사 `.message-body .md-table-wrap`이 «장식»이 아니다 — 카드가 만드는
는 접두사를
벗기는 순간 전역 산문 규칙에 진다. 실측으로 물렸다: 라벨이 12px/600/muted 대신
**16px/400/ink**로 렌더돼 자기 값과 같은 크기·같은 검정이 됐고, 지표 띠의 위계가
통째로 사라졌다. 토큰은 멀쩡했다 — 진 것은 캐스케이드다.
.message-body p (0,1,1) margin 10px
.premium-product-shell-v1 .message-body p (0,2,1) font-size 15
.chatgpt-reference-v1 .message-body p (0,2,1) color → ink
.chatgpt-reference-v1 .message-body p (0,2,1) font-size 16 · weight 400
컴포넌트 클래스 하나(0,1,0)로는 넷 다 진다. 클래스 셋(0,3,0)이면 파일 순서와 무관하게
이기고, 셸 클래스를 안 쓰므로 어느 셸에서도 같다. !important로 덮지 않는다 —
다른 표면의 전역 산문 규칙까지 같이 망가진다.
★이 접두사를 «간결하게» 벗기지 말 것. `test_table_card_prose_specificity.py`가 막는다. */
.message-body .md-table-wrap .md-table-tile-label {
margin: 0 0 var(--ds-space-1);
font-size: var(--ds-text-caption-12);
font-weight: 600;
color: var(--cg-muted);
}
.md-table-tile-value {
/* ★규범: 큰 독립 숫자는 비례 숫자. tabular은 121을 헐렁하게 만들고, 세로로 정렬할
이유도 없다 — 그건 표 열에서만 필요하다. */
font-size: var(--ds-text-title-22);
font-weight: 600;
line-height: 1.15;
letter-spacing: -0.02em;
font-variant-numeric: proportional-nums;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
/* ★폰에서 한 단계 내린다 — 사유와 실측표는 위 `@media (max-width: 520px)` 패딩 블록 주석에.
★★이 블록은 기본 규칙 «바로 뒤»에 있어야 한다. @media 는 특이도를 올리지 않으므로
패딩 블록(위쪽)에 함께 넣으면 뒤따르는 기본 규칙 `font-size: …title-22` 가 이겨
**선언이 통째로 죽는다.** 실제로 그렇게 짰다가 검사에 잡혔다 — 같은 파일이 같은 함정을
두 번 기록하고 있는데도 그랬다. 중단점 값은 패딩 블록과 **같은 520px** 이다. */
@media (max-width: 520px) {
.md-table-tile-value {
font-size: var(--ds-text-title-18);
}
}
/* ★접두사 필요 — 위 `.md-table-tile-label` 주석 참조. */
.message-body .md-table-wrap .md-table-tile-sub {
margin: var(--ds-space-1) 0 0;
font-size: var(--ds-text-caption-12);
color: var(--cg-muted);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}.md-table-cell-secondary {
display: block;
margin-top: 2px;
color: var(--cg-text-soft);
font-size: var(--ds-text-caption-12);
line-height: 1.45;
}
/* A안 «안전 프레임» (2026-07-30 승인). 고지가 표 카드 **안**으로 들어오면 카드 밖에
있을 때 필요했던 바깥 여백이 오히려 카드를 벌린다. 카드 내부에서는 안쪽 여백을
쓰고, 위험도 엣지가 카드 전체 높이를 관통해 표와 고지를 한 덩어리로 묶는다 —
배포 화면에서 표·고지·모델 꼬리문단이 세 개의 남남으로 읽힌 것이 이 안의 출발점이다.
색은 이미 있는 시맨틱 토큰을 그대로 쓴다(새 색 리터럴 없음). */
.md-table-wrap > .artifact-notices {
margin: 0;
padding: var(--ds-space-2) var(--ds-space-3);
}
/* ★v10 — 헤어라인도 중립색이다. v7-1 에서 여기에 등급색을 물렸는데, 나머지 표면이
전부 채도 0% 인 잉크라 채도 90% 짜리 선 하나가 «마크다운이 아닌 무언가»로 튀었다
(사용자 지적). 등급은 아래 텍스트 라벨이 진다. */
.md-table-wrap > .artifact-notices:first-child {
border-bottom: 1px solid var(--cg-menu-border);
}
.md-table-wrap > .artifact-notices:last-child {
border-top: 1px solid var(--cg-menu-border);
}
/* ── v7-1 (2026-08-07) — 관통 엣지를 걷어낸다 ──
★이 엣지는 «카드»를 전제로 만들어졌다: 카드 전체 높이를 관통해 표와 고지를 한
덩어리로 묶고, 카드의 반경 22px을 좌측만 0으로 취소했다. v7에서 카드를 걷어내자
그 전제가 통째로 깨졌고, 배포 화면에서 두 가지가 실측됐다.
① 제목의 액센트 바(4px)와 이 엣지(3px)가 **간격 0으로 맞붙었다.** 공교롭게도
바로 아래 주석이 경고하는 «이중 신호»와 같은 결함이다 — 그때는 카드 엣지와
고지 레일이었고, 이번엔 카드 엣지와 제목 바다.
② 래퍼의 3px 테두리가 표를 산문보다 3px 안쪽으로 밀어, 인라인 정렬이 이 경우에만
어긋났다. 카드 시절엔 24px 여백에 묻혀 보이지 않던 값이다.
★엣지를 지워도 등급 신호는 잃지 않는다 — 아래 밴드 tint가 이미 tone별로 갈린다
(그 자체가 «레일을 빼고 배경으로 옮긴» 앞선 결정의 결과다). 여기서는 남은 중복
채널 하나를 마저 걷어내고, tone 은 밴드 헤어라인으로 물려준다.
★선택자는 살려 둔다. 계약이 존재를 핀할 뿐 아니라, tone → 색 대응이 사라지면
밴드 경계가 등급을 잃는다. */
/* ── v10 (2026-08-07) — 등급을 «색»에서 «말»로 옮긴다 ──
★사용자 지적: 「빨간색 마크다운 방식이 좀 안 어울린다」. 실측하니 답변 표면이 전부
채도 0% 인데(머리글 밴드 0%·제목 액센트 바 0%) 고지만 헤어라인 채도 90.5%·밴드 70.7%
였고, 밴드 면적이 표 본체의 41% 였다. 잉크 규율(doc 345)과 정면으로 부딪힌다.
★색을 빼도 등급을 잃지 않는다 — 오히려 접근성이 는다. doc 231 A5 는 «필수 역할을
color 채널에만 배정 금지»(SC 1.4.1)를 요구하는데, 지금까지 danger/warning 을 가르는
가시 채널은 색뿐이었다(위치는 있었지만 색이 주였다). 등급을 **글자**로 옮기면 색각·
흑백 인쇄·저대비 환경에서도 살아남는다.
★래퍼의 `[data-risk-tone]` 은 색을 안 쓰게 되어 CSS 로는 할 일이 없다. 속성 자체는
JS 가 계속 세운다(고지 마운트 표식) — 죽은 선언을 남기지 않고 규칙만 걷어낸다. */
/* ★실브라우저에서 발견: 카드 엣지와 고지 항목의 좌측 레일이 같은 색으로 나란히
그려졌다(측정: 카드 x=856, 고지 x=904, 둘 다 rgb(186,38,35)). 「한 덩어리로 묶는다」고
만든 엣지가 신호를 이중으로 만든 것이다 — 소스로는 안 보이고 픽셀을 재야 나온다.
카드 안에서는 레일을 빼되, 지금 두 밴드의 배경이 **같은 회색**이라 레일이 tone을
구분하는 유일한 채널이므로 등급을 배경으로 옮긴다. 카드 밖(표 없는 답변)의 고지는
기존 레일을 그대로 쓴다 — 거기엔 카드 엣지가 없다. */
/* 반경은 일부러 재선언하지 않는다 — 배경이 투명하고 레일이 없으면 칠할 것이 없어
시각적으로 무의미한데, 원시 border-radius 값은 반드시 anti-drift 래칫에 잡힌다
(206 → 207로 RED가 났다). 안 쓰는 선언으로 천장을 깎지 않는다. */
.md-table-wrap > .artifact-notices .doc-summary-notice {
border-left: 0;
background: transparent;
}
/* ★밴드는 등급과 무관하게 중립 회색이다 — 머리글 밴드와 같은 톤이라 답변 안에서
«같은 언어의 형제»로 읽힌다. 등급은 아래 라벨이 진다. */
.md-table-wrap > .artifact-notices {
background: var(--cg-hover-soft);
}
/* ── 등급 라벨 (v10) ──
★색 대신 말. 「중요」(danger) · 「주의」(warning) · 「참고」(info).
★CSS `content` 로 넣는 이유: 이 문구는 정책이 정한 «고지 본문»이 아니라 UI 라벨이다.
본문에 섞으면 복사·내보내기한 원문이 오염되고, 정책 YAML 이 문구의 유일한 출처라는
계약(«모델도 렌더러도 고지를 짓지 않는다»)이 흐려진다. */
/* ★v10-1 — 카드 «밖» 고지도 같이 중립화한다.
실브라우저 검수에서 잡았다: 표가 없는 답변은 고지가 `.md-table-wrap` 밖에 붙어
v10 의 중립화가 안 닿았고, **채도 90.5% 짜리 주황 레일이 그대로** 남아 있었다
(사용자가 지적한 바로 그 색). 등급을 «말»로 옮긴 이상 레일도 중립이어야 한다.
★`.doc-summary-notice` 기본 규칙은 손대지 않는다 — 그 클래스는 문서요약 위젯도 쓰고,
거기서는 등급 레일이 여전히 유효한 신호다. 위험 고지 컨테이너(`.artifact-notices`)
안에서만 덮는다. */
/* ★★특이도를 한 칸 올린다 — `[data-tone]` 을 붙여 (0,2,0) → (0,3,0).
실브라우저에서 잡았다: (0,2,0) 으로 썼더니 라벨은 나오는데 **레일만 주황 그대로**였다.
기존 `.doc-summary-notice[data-tone="warning"]`(클래스1+속성1 = 0,2,0)와 동률인데
그쪽이 파일 뒤에 있어 이긴다. 동률은 «나중 선언»이 가져간다. */
.artifact-notices .doc-summary-notice[data-tone] {
border-left-color: var(--cg-menu-border);
}
.artifact-notices .doc-summary-notice::before {
margin-right: var(--ds-space-1);
color: var(--cg-text);
font-weight: var(--ds-weight-semibold);
}
.artifact-notices .doc-summary-notice[data-tone="danger"]::before {
content: "중요";
}
.artifact-notices .doc-summary-notice[data-tone="warning"]::before {
content: "주의";
}
.artifact-notices .doc-summary-notice[data-tone="info"]::before {
content: "참고";}
.doc-summary-notice {
margin: 0;
padding: 8px 10px;
border-radius: var(--ds-radius-xs);
border-left: 3px solid var(--cg-menu-border);
background: var(--cg-hover-soft);
font-size: var(--ds-text-caption-12);
color: var(--cg-text);
}
/* ★위험 수준을 개인 설정으로 렌더하지 않는다. 여기가 --accent였던 탓에 파란 accent를
고른 사용자에게는 «투자 자문이 아닙니다»가 파란 막대로 나왔다 — 실브라우저 실측에서
발견. 기본 accent가 우연히 먹빛이라 눈에 띄지 않았을 뿐이다. */
.doc-summary-notice[data-tone="warning"] {
border-left-color: var(--cg-warning-fg);
}
.doc-summary-notice[data-tone="danger"] {
border-left-color: var(--cg-danger-fg);
}
.doc-summary-evidence {
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft);
}
.doc-summary-evidence summary {
cursor: pointer;
padding: 4px 0;
color: var(--cg-text-soft);
}
.doc-summary-evidence ul {
margin: 4px 0 0;
padding-left: 18px;
}
.doc-summary-evidence li {
margin: 2px 0;
overflow-wrap: anywhere;
}
@container (max-width: 520px) {
.doc-summary-facts {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ---- Visual answer card v1 --------------------------------------------------------------
Generic web answers with 1–5 entity-approved HTTPS source images stay text-first:
answer/price table → source controls → optional media. Zero images use the plain answer path
and reserve no height. Compact reflow is owned by the card container. */
.visual-answer-card {
container-name: visual-answer;
container-type: inline-size;
display: flex;
flex-direction: column;
inline-size: 100%;
max-inline-size: 100%;
min-width: 0;
margin-top: var(--wds-space-1);
overflow: hidden;
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-popover);
background: var(--wizon-ai-surface);
color: var(--wizon-ai-text-primary);
box-shadow: var(--wizon-ai-popover-shadow);
}
.visual-answer-mosaic {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
min-width: 0;
max-width: 100%;
gap: var(--wds-space-1);
padding: var(--wds-space-1);
background: var(--wizon-ai-surface);
}
.visual-answer-card:not(.travel-itinerary-card)[data-visual-image-count="1"] > .visual-answer-mosaic {
grid-template-columns: minmax(0, 1fr);
}
.visual-answer-card:not(.travel-itinerary-card)[data-visual-image-count="2"] > .visual-answer-mosaic {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.visual-answer-card:not(.travel-itinerary-card)[data-visual-image-count="3"] > .visual-answer-mosaic {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.visual-answer-card:not(.travel-itinerary-card)[data-visual-image-count="4"] > .visual-answer-mosaic {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.visual-answer-card:not(.travel-itinerary-card)[data-visual-image-count="5"] > .visual-answer-mosaic {
grid-template-columns: repeat(3, minmax(0, 1fr));
}
.visual-answer-item {
display: grid;
min-width: 0;
margin: 0;
overflow: hidden;
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
}
.visual-answer-media {
position: relative;
min-width: 0;
min-height: 0;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
color: inherit;
font: inherit;
text-align: start;
text-decoration: none;
cursor: pointer;
}
.visual-answer-media:first-child:nth-last-child(3) {
grid-row: span 2;
}
.visual-answer-item .visual-answer-media {
width: 100%;
aspect-ratio: 16 / 9;
border-radius: 0;
}
.visual-answer-media img {
display: block;
width: 100%;
height: 100%;
object-fit: cover;
transition: transform var(--wizon-ai-motion-surface-duration) var(--wizon-ai-motion-effect-ease);
}
.visual-answer-media:focus-visible {
outline: 2px solid var(--wizon-ai-focus-visible-ring);
outline-offset: -2px;
}
.visual-answer-caption {
min-width: 0;
padding: var(--wds-space-2) var(--wds-space-3);
border-top: 1px solid var(--wizon-ai-popover-border);
font-size: var(--ds-text-caption-12);
line-height: 1.4;
}
.visual-answer-source-link {
display: block;
overflow: hidden;
color: var(--wizon-ai-text-secondary);
text-decoration: none;
text-overflow: ellipsis;
white-space: nowrap;
}
.visual-answer-source-link:hover,
.visual-answer-source-link:focus-visible {
color: var(--wizon-ai-text-primary);
text-decoration: underline;
}
@media (hover: hover) {
.visual-answer-media:hover img {
transform: scale(1.035);
}
}
.visual-answer-content {
display: flex;
flex-direction: column;
min-width: 0;
max-width: 100%;
gap: var(--wds-space-3);
padding: var(--wds-space-5) var(--wds-space-5) var(--wds-space-4);
}
.visual-answer-content > :first-child {
margin-top: 0;
}
.visual-answer-content > :last-child {
margin-bottom: 0;
}
.visual-answer-content .list-line,
.visual-answer-content .answer-table-line {
margin: 0;
padding-block: var(--wds-space-2);
border-top: 1px solid var(--wizon-ai-popover-border);
line-height: 1.65;
}
.visual-answer-content h3,
.visual-answer-content h4,
.visual-answer-content h5 {
margin: var(--wds-space-3) 0 0;
text-wrap: pretty;
}
.visual-answer-foot {
display: flex;
flex-wrap: wrap;
align-items: center;
min-width: 0;
max-width: 100%;
gap: var(--wds-space-2);
padding: var(--wds-space-3) var(--wds-space-5) var(--wds-space-4);
border-top: 1px solid var(--wizon-ai-popover-border);
}
.visual-answer-foot .source-pill-row,
.visual-answer-foot .trust-chips {
margin-top: 0;
}
.visual-answer-content .md-table-wrap {
max-width: 100%;
}
/* Broken fenced output stays readable as escaped source instead of becoming a partial code card.
Korean keeps word boundaries where possible; an unbroken URL/token may still wrap before it can
widen a 390px page. */
.md-plain-fallback {
max-width: 100%;
word-break: keep-all;
overflow-wrap: anywhere;
}
/* A zero-count payload never enters the card. If remote loading later leaves zero tiles,
remove the shell and keep the same Markdown/source controls as the standard answer path. */
.visual-answer-card.is-image-fallback {
overflow: visible;
border: 0;
background: transparent;
box-shadow: none;
}
.visual-answer-card.is-image-fallback .visual-answer-mosaic {
display: none;
}
.visual-answer-card.is-image-fallback .visual-answer-content,
.visual-answer-card.is-image-fallback .visual-answer-foot {
padding-inline: 0;
}
.visual-answer-card.is-image-fallback .visual-answer-content {
padding-top: 0;
}
.visual-answer-card.is-image-fallback .visual-answer-foot {
border-top: 0;
}
@container visual-answer (max-width: 520px) {
.visual-answer-card:not(.travel-itinerary-card)[data-visual-image-count="4"] > .visual-answer-mosaic,
.visual-answer-card:not(.travel-itinerary-card)[data-visual-image-count="5"] > .visual-answer-mosaic {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
.visual-answer-content {
padding: var(--wds-space-4);
}
.visual-answer-foot {
padding: var(--wds-space-3) var(--wds-space-4) var(--wds-space-4);
}
}
/* ---- Travel itinerary widget v2 -------------------------------------------------------
The travel card stays inside the visual-answer shell, but adds evidence-aware day tabs,
synchronized stops and a coordinate-backed route overview. All colors, spacing and motion
come from the existing WIZON/WDS contract; unavailable map data degrades to a route list. */
.travel-itinerary-lede {
margin: 0 0 var(--wds-space-3);
line-height: 1.65;
text-wrap: pretty;
}
.travel-itinerary-card {
container-name: travel-itinerary;
}
.travel-itinerary-hero {
grid-auto-rows: clamp(144px, 22vw, 180px);
min-height: 0;
background: var(--wizon-ai-surface);
}
.travel-itinerary-hero:has(.travel-itinerary-hero-media:only-child) {
grid-template-columns: minmax(0, 1fr);
}
.travel-itinerary-hero-media {
border-radius: calc(var(--wizon-ai-radius-control) - var(--wds-space-1));
}
.travel-itinerary-body {
gap: var(--wds-space-3);
padding-top: var(--wds-space-4);
}
.travel-itinerary-heading {
display: flex;
align-items: end;
justify-content: space-between;
gap: var(--wds-space-3);
}
.travel-itinerary-heading > span {
display: flex;
flex-direction: column;
min-width: 0;
gap: var(--wds-space-1);
}
.travel-itinerary-heading h3 {
margin: 0;
font-size: var(--wds-font-size-title-l);
line-height: calc(var(--wds-font-size-title-l) * 1.35);
}
.travel-itinerary-heading.has-long-days {
align-items: stretch;
flex-direction: column;
}
.travel-itinerary-evidence {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-label);
}
.travel-itinerary-day-nav,
.travel-itinerary-tabs {
display: flex;
align-items: center;
min-width: 0;
}
.travel-itinerary-day-nav {
flex: 0 1 auto;
gap: var(--wds-space-2);
}
.travel-itinerary-day-nav.is-long {
width: 100%;
}
.travel-itinerary-tabs {
flex: 1 1 auto;
gap: var(--wds-space-1);
max-width: 100%;
padding: var(--wds-space-1);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-canvas);
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline proximity;
scrollbar-width: none;
}
.travel-itinerary-tabs::-webkit-scrollbar {
display: none;
}
.travel-itinerary-tabs button {
flex: 0 0 auto;
min-width: 52px;
min-height: 44px;
padding: 0 var(--wds-space-3);
border: 0;
border-radius: var(--wizon-ai-radius-pill);
background: transparent;
color: var(--wizon-ai-text-secondary);
font: inherit;
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-medium);
cursor: pointer;
scroll-snap-align: center;
}
.travel-itinerary-tabs button[aria-selected="true"] {
background: var(--wizon-ai-surface);
color: var(--wizon-ai-text-primary);
box-shadow: var(--wizon-ai-popover-shadow);
}
.travel-itinerary-day-step {
display: grid;
flex: 0 0 44px;
place-items: center;
width: 44px;
height: 44px;
padding: 0;
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-surface);
color: var(--wizon-ai-text-primary);
cursor: pointer;
}
.travel-itinerary-day-step:disabled {
color: var(--wizon-ai-text-muted);
cursor: default;
opacity: 0.45;
}
.travel-itinerary-day-step svg {
width: 18px;
height: 18px;
}
.travel-itinerary-day-position {
display: inline-flex;
flex: 0 0 auto;
align-items: baseline;
gap: var(--wds-space-1);
min-width: 54px;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
.travel-itinerary-day-position strong {
color: var(--wizon-ai-text-primary);
}
.travel-itinerary-layout {
display: grid;
grid-template-columns: minmax(0, 1.08fr) minmax(220px, 0.92fr);
align-items: stretch;
gap: var(--wds-space-4);
}
.travel-itinerary-days {
min-width: 0;
}
.travel-itinerary-day ol {
margin: 0;
padding: 0;
list-style: none;
display: flex;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-itinerary-stop {
position: relative;
display: grid;
grid-template-columns: var(--wds-space-3) minmax(48px, auto) minmax(0, 1fr);
column-gap: var(--wds-space-2);
min-width: 0;
font-size: var(--wds-font-size-caption);
line-height: 1.4;
}
.travel-itinerary-stop:not(:last-child)::after {
content: "";
position: absolute;
top: var(--wds-space-3);
bottom: calc(var(--wds-space-1) * -1);
left: calc(var(--wds-space-3) / 2 - 0.5px);
width: 1px;
background: var(--wizon-ai-popover-border);
}
.travel-itinerary-stop-marker {
position: relative;
width: var(--wds-space-2);
height: var(--wds-space-2);
margin: calc(var(--wds-space-1) + 1px) auto 0;
border: 1px solid var(--wizon-ai-text-secondary);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-surface);
}
.travel-itinerary-stop.is-selected .travel-itinerary-stop-marker {
border-color: var(--wizon-ai-text-primary);
background: var(--wizon-ai-text-primary);
}
.travel-itinerary-stop-time {
color: var(--wizon-ai-text-secondary);
font-variant-numeric: tabular-nums;
}
.travel-itinerary-stop-copy,
.travel-itinerary-stop-head {
display: flex;
min-width: 0;
}
.travel-itinerary-stop-copy {
width: 100%;
min-height: 44px;
padding: var(--wds-space-2) var(--wds-space-3);
border-radius: var(--wizon-ai-radius-control);
background: transparent;
}
.travel-itinerary-stop-control {
display: flex;
flex-direction: column;
width: 100%;
min-width: 0;
min-height: 28px;
padding: 0;
border: 0;
background: transparent;
color: inherit;
text-align: left;
gap: var(--wds-space-1);
cursor: pointer;
}
.travel-itinerary-stop.is-selected .travel-itinerary-stop-copy {
background: var(--wizon-ai-canvas);
}
.travel-itinerary-stop.is-featured .travel-itinerary-stop-copy {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(108px, 132px);
column-gap: var(--wds-space-3);
}
.travel-itinerary-stop.is-featured .travel-itinerary-stop-head,
.travel-itinerary-stop.is-featured .travel-itinerary-stop-detail,
.travel-itinerary-stop.is-featured .travel-itinerary-stop-control {
grid-column: 1;
}
.travel-itinerary-stop.is-featured .travel-itinerary-stop-media {
grid-column: 2;
grid-row: 1 / span 2;
align-self: start;
margin-top: 0;
}
.travel-itinerary-stop-head {
flex-wrap: wrap;
align-items: baseline;
gap: var(--wds-space-1) var(--wds-space-3);
}
.travel-itinerary-stop-head strong {
font-weight: var(--wds-font-weight-semibold);
color: var(--wizon-ai-text-primary);
}
.travel-itinerary-stop-head span,
.travel-itinerary-stop-note,
.travel-itinerary-stop-facts {
color: var(--wizon-ai-text-secondary);
}
.travel-itinerary-stop-detail {
display: flex;
flex-direction: column;
min-width: 0;
max-height: 0;
overflow: hidden;
opacity: 0;
transition:
max-height var(--wizon-ai-motion-micro-duration) var(--wizon-ai-ease-move),
opacity var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}
.travel-itinerary-stop.is-selected .travel-itinerary-stop-detail {
max-height: 160px;
opacity: 1;
}
.travel-itinerary-stop-facts {
margin-top: var(--wds-space-1);
font-size: var(--wds-font-size-caption);
}
.travel-itinerary-stop-media {
width: min(132px, 100%);
aspect-ratio: 16 / 9;
margin-top: var(--wds-space-2);
border-radius: var(--wizon-ai-radius-control);
}
.travel-itinerary-route-preview {
min-width: 0;
min-height: 100%;
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
overflow: hidden;
}
.travel-itinerary-route-panel {
height: 100%;
padding: var(--wds-space-4);
}
.travel-itinerary-route-panel > header {
display: flex;
flex-direction: column;
gap: var(--wds-space-1);
margin-bottom: var(--wds-space-3);
}
.travel-itinerary-route-panel > header strong {
font-size: var(--wds-font-size-body-2);
line-height: var(--wds-line-height-label);
}
.travel-itinerary-route-panel > header span {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-label);
}
.travel-itinerary-route-list {
display: flex;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-itinerary-route-row {
display: flex;
align-items: center;
width: 100%;
min-height: 44px;
gap: var(--wds-space-2);
padding: var(--wds-space-2);
border: 0;
border-radius: var(--wizon-ai-radius-control);
background: transparent;
color: var(--wizon-ai-text-primary);
text-align: left;
cursor: pointer;
}
.travel-itinerary-route-row.is-selected {
background: var(--wizon-ai-surface);
}
.travel-itinerary-route-row > span {
display: grid;
place-items: center;
width: 24px;
height: 24px;
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-text-primary);
color: var(--wizon-ai-surface);
font-size: var(--wds-font-size-caption);
}
.travel-itinerary-route-row strong {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
font-size: var(--wds-font-size-caption);
}
.travel-itinerary-map {
position: relative;
min-height: 214px;
border-radius: var(--wizon-ai-radius-control);
background:
linear-gradient(var(--wizon-ai-popover-border) 1px, transparent 1px),
linear-gradient(90deg, var(--wizon-ai-popover-border) 1px, transparent 1px),
var(--wizon-ai-surface);
background-size: var(--wds-space-8) var(--wds-space-8);
overflow: hidden;
}
.travel-itinerary-map svg {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
}
.travel-itinerary-map polyline {
fill: none;
stroke: var(--wizon-ai-text-primary);
stroke-width: 1.25;
stroke-linecap: round;
stroke-linejoin: round;
stroke-dasharray: 3 3;
vector-effect: non-scaling-stroke;
}
.travel-itinerary-map-marker {
position: absolute;
left: var(--travel-map-x);
top: var(--travel-map-y);
display: grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 2px solid var(--wizon-ai-surface);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-text-secondary);
color: var(--wizon-ai-surface);
font: inherit;
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-semibold);
transform: translate(-50%, -50%);
cursor: pointer;
box-shadow: var(--wizon-ai-popover-shadow);
transition:
transform var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-spatial-ease),
background var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}
.travel-itinerary-map-marker.is-selected {
background: var(--wizon-ai-text-primary);
transform: translate(-50%, -50%) scale(1.12);
}
.travel-itinerary-map-selection {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wds-space-2);
min-height: 44px;
padding-top: var(--wds-space-2);
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-medium);
}
.travel-itinerary-map-selection a {
display: inline-flex;
align-items: center;
gap: var(--wds-space-1);
min-height: 44px;
color: var(--wizon-ai-text-secondary);
text-decoration: none;
}
.travel-itinerary-map-selection svg,
.travel-itinerary-actions svg {
width: 18px;
height: 18px;
}
.travel-itinerary-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wds-space-2);
padding-top: var(--wds-space-2);
border-top: 1px solid var(--wizon-ai-popover-border);
}
.travel-itinerary-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wds-space-1);
min-height: 44px;
padding: 0 var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-surface);
color: var(--wizon-ai-text-primary);
font: inherit;
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-medium);
cursor: pointer;
}
.travel-itinerary-adjust {
display: inline-flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wds-space-1);
}
.travel-itinerary-adjust[hidden] {
display: none;
}
.travel-itinerary-adjust > span,
.travel-itinerary-adjust-status,
.travel-itinerary-caveat {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-itinerary-adjust button {
min-width: 44px;
padding-inline: var(--wds-space-2);
}
.travel-itinerary-caveat {
margin: 0;
line-height: 1.5;
}
.travel-feature-degradation {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: var(--wds-space-2) var(--wds-space-3);
padding: var(--wds-space-3);
border-radius: var(--wizon-ai-radius-control);
/* No literal fallbacks here: both tokens come from stylesheets index.html always loads,
and --wizon-ai-surface is theme-dependent (#ffffff light / #000000 dark) -- a #ffffff
fallback would paint a white panel in dark mode on the one occasion it fired. */
background: color-mix(in srgb, var(--wds-blue-500) 8%, var(--wizon-ai-surface));
color: var(--wizon-ai-text-primary);
}
.travel-feature-degradation-icon {
display: inline-flex;
align-items: center;
justify-content: center;
width: 32px;
height: 32px;
color: var(--wds-blue-500);
}
.travel-feature-degradation-icon svg {
width: 18px;
height: 18px;
}
.travel-feature-degradation-copy {
display: grid;
min-width: 0;
gap: 2px;
}
.travel-feature-degradation-copy strong {
font-size: var(--wds-font-size-body-2);
}
.travel-feature-degradation-copy > span {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: 1.45;
}
.travel-itinerary-note {
padding-top: var(--wds-space-3);
border-top: 1px solid var(--wizon-ai-popover-border);
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-itinerary-note > :first-child,
.travel-itinerary-note > :last-child {
margin-block: 0;
}
.travel-itinerary-foot {
justify-content: space-between;
}
/* ---- Travel guidebook widget G5-5 ---------------------------------------------------
G5-4 timing and route facts remain authoritative. The card exposes partial states,
interleaves stops and legs, and renders location markers without inferred route lines. */
.travel-guidebook-card {
inline-size: 100%;
max-inline-size: 100%;
min-width: 0;
margin-top: 0;
overflow: visible;
border: 0;
border-radius: initial;
background: transparent;
box-shadow: none;
}
.travel-guidebook-card > .visual-answer-content.travel-itinerary-body {
padding: 0;
}
.travel-guidebook-card > .visual-answer-foot.travel-itinerary-foot {
padding-inline: 0;
border-top: 0;
}
.travel-guidebook-card .travel-itinerary-body {
gap: var(--wds-space-4);
}
.travel-guidebook-heading {
align-items: flex-start;
}
.travel-guidebook-heading > span {
gap: var(--wds-space-2);
}
.travel-guidebook-heading p {
max-width: var(--wizon-ai-chat-max-width);
margin: 0;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-body-2);
line-height: var(--wds-line-height-normal);
text-wrap: pretty;
}
.travel-guidebook-revalidation {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
justify-content: center;
min-height: var(--wizon-ai-action-target-touch);
gap: var(--wds-space-2);
padding: 0 var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-surface);
color: var(--wizon-ai-text-primary);
font: inherit;
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-medium);
cursor: pointer;
}
.travel-guidebook-revalidation svg {
width: var(--wds-space-5);
height: var(--wds-space-5);
}
.travel-guidebook-snapshot {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wds-space-1) var(--wds-space-3);
padding: var(--wds-space-2) 0;
border-block: 1px solid var(--wizon-ai-popover-border);
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-snapshot span {
display: inline-flex;
align-items: center;
min-height: var(--wds-space-8);
white-space: nowrap;
}
.travel-guidebook-personalization {
display: grid;
grid-template-columns: repeat(auto-fit, minmax(min(100%, var(--wizon-adaptive-right-panel-width)), 1fr));
gap: var(--wds-space-2);
}
.travel-guidebook-personalization-panel {
display: grid;
align-content: start;
gap: var(--wds-space-2);
min-width: 0;
padding: var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-surface);
}
.travel-guidebook-personalization-panel h4,
.travel-guidebook-personalization-panel p,
.travel-guidebook-personalization-chips,
.travel-guidebook-alternatives {
margin: 0;
}
.travel-guidebook-personalization-panel h4 {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-personalization-panel p,
.travel-guidebook-alternatives span,
.travel-guidebook-alternatives em {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-personalization-chips {
display: flex;
flex-wrap: wrap;
gap: var(--wds-space-1);
padding: 0;
list-style: none;
}
.travel-guidebook-personalization-chips li {
padding: var(--wds-space-1) var(--wds-space-2);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-hover-soft-bg);
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-label-s);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-personalization-check {
padding-top: var(--wds-space-2);
border-top: 1px solid var(--wizon-ai-popover-border);
}
.travel-guidebook-theme-fit,
.travel-guidebook-personalization-facts {
display: grid;
gap: var(--wds-space-1);
margin: 0;
padding: 0;
}
.travel-guidebook-theme-fit {
list-style: none;
}
.travel-guidebook-theme-fit li,
.travel-guidebook-personalization-facts > div {
display: grid;
gap: var(--wds-space-1);
padding-top: var(--wds-space-2);
border-top: 1px solid var(--wizon-ai-popover-border);
}
.travel-guidebook-theme-fit strong,
.travel-guidebook-personalization-facts dt {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-theme-fit span,
.travel-guidebook-personalization-facts dd,
.travel-guidebook-personalization-state {
margin: 0;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-label-s);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-personalization-state {
color: var(--wds-color-warning-text);
font-style: normal;
font-weight: var(--wds-font-weight-medium);
}
.travel-guidebook-alternatives {
display: grid;
gap: var(--wds-space-2);
padding: 0;
list-style: none;
}
.travel-guidebook-alternatives li {
display: grid;
gap: var(--wds-space-1);
}
.travel-guidebook-alternatives strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-alternatives em {
color: var(--wds-color-warning-text);
font-style: normal;
font-weight: var(--wds-font-weight-medium);
}
/* G5-7O: the lower guide stays single-column, but each decision surface behaves like a
compact widget rather than a document section. */
.travel-guidebook-story-flow {
grid-template-columns: minmax(0, 1fr);
gap: var(--wds-space-3);
}
.travel-guidebook-prep,
.travel-guidebook-rain-strip {
display: grid;
align-content: start;
gap: var(--wds-space-3);
min-width: 0;
padding: var(--wds-space-4);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-popover);
background: var(--wizon-ai-surface);
box-shadow: var(--wizon-ai-popover-shadow);
}
.travel-guidebook-prep header,
.travel-guidebook-prep header > span,
.travel-guidebook-rain-strip header,
.travel-guidebook-rain-strip header > span,
.travel-guidebook-readiness,
.travel-guidebook-rain-controls {
display: flex;
}
.travel-guidebook-prep header,
.travel-guidebook-rain-strip header {
align-items: baseline;
justify-content: space-between;
gap: var(--wds-space-2);
}
.travel-guidebook-rain-strip header > span {
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-guidebook-prep header > span:first-child {
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-guidebook-readiness,
.travel-guidebook-rain-controls {
align-items: center;
flex: 0 0 auto;
gap: var(--wds-space-1);
}
.travel-guidebook-rain-strip header > .travel-guidebook-rain-controls {
flex-direction: row;
}
.travel-guidebook-readiness progress {
appearance: none;
width: var(--wds-space-24);
height: var(--wds-space-2);
overflow: hidden;
border: 0;
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-canvas);
accent-color: var(--wds-color-info);
}
.travel-guidebook-readiness progress::-webkit-progress-bar {
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-canvas);
}
.travel-guidebook-readiness progress::-webkit-progress-value {
border-radius: var(--wizon-ai-radius-pill);
background: var(--wds-color-info);
}
.travel-guidebook-readiness progress::-moz-progress-bar {
border-radius: var(--wizon-ai-radius-pill);
background: var(--wds-color-info);
}
.travel-guidebook-readiness b,
.travel-guidebook-rain-controls > span {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-caption);
font-variant-numeric: tabular-nums;
}
.travel-guidebook-rain-controls button {
display: grid;
place-items: center;
width: var(--wizon-ai-action-target-touch);
height: var(--wizon-ai-action-target-touch);
padding: 0;
border: 0;
background: transparent;
color: var(--wizon-ai-text-primary);
cursor: pointer;
}
.travel-guidebook-rain-controls button:disabled {
color: var(--wizon-ai-text-muted);
cursor: default;
}
.travel-guidebook-rain-controls button svg {
width: var(--wds-space-5);
height: var(--wds-space-5);
}
.travel-guidebook-prep header strong,
.travel-guidebook-rain-strip header strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
}
.travel-guidebook-prep header span,
.travel-guidebook-rain-strip header span,
.travel-guidebook-rain-strip > p {
margin: 0;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-prep ol {
display: grid;
gap: 0;
margin: 0;
padding: 0;
overflow: hidden;
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
list-style: none;
}
.travel-guidebook-prep li {
display: grid;
grid-template-columns: var(--wds-space-10) minmax(0, 1fr);
align-items: center;
gap: var(--wds-space-3);
min-height: var(--wizon-ai-action-target-touch);
padding: var(--wds-space-3);
}
.travel-guidebook-prep li + li {
border-top: 1px solid var(--wizon-ai-popover-border);
}
.travel-guidebook-prep-icon {
display: grid;
place-items: center;
width: var(--wds-space-10);
height: var(--wds-space-10);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-hover-soft-bg);
color: var(--wds-color-info-text);
}
.travel-guidebook-prep-icon svg {
width: var(--wds-space-5);
height: var(--wds-space-5);
}
.travel-guidebook-prep-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-guidebook-prep-copy strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
}
.travel-guidebook-prep-copy > span {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
/* G5-7P: one contextual fact is visible at a time. This preserves the guidebook's
single-column reading rhythm while giving live data an interactive widget surface. */
.travel-guidebook-context-stack {
display: grid;
min-width: 0;
gap: var(--wds-space-3);
}
.travel-guidebook-live-context {
display: grid;
min-width: 0;
gap: var(--wds-space-2);
padding: var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-surface);
}
.travel-guidebook-live-context > header,
.travel-guidebook-live-context > header > span,
.travel-guidebook-live-controls,
.travel-guidebook-live-context [data-travel-live-rail],
.travel-guidebook-live-context li,
.travel-guidebook-live-copy {
display: flex;
}
.travel-guidebook-live-context > header {
align-items: center;
justify-content: space-between;
gap: var(--wds-space-3);
}
.travel-guidebook-live-context > header > span:first-child,
.travel-guidebook-live-copy {
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-guidebook-live-context > header strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
}
.travel-guidebook-live-context > header > span:first-child > span,
.travel-guidebook-live-copy > span,
.travel-guidebook-live-copy small,
.travel-guidebook-live-controls > span {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-live-controls {
align-items: center;
flex: 0 0 auto;
gap: 0;
}
.travel-guidebook-live-controls > span {
padding-inline-end: var(--wds-space-1);
font-variant-numeric: tabular-nums;
}
.travel-guidebook-live-controls button {
display: grid;
place-items: center;
width: var(--wizon-ai-action-target-touch);
height: var(--wizon-ai-action-target-touch);
padding: 0;
border: 0;
background: transparent;
color: var(--wizon-ai-text-secondary);
cursor: pointer;
}
.travel-guidebook-live-controls button:disabled {
color: var(--wizon-ai-text-muted);
cursor: default;
}
.travel-guidebook-live-controls svg {
width: var(--wds-space-4);
height: var(--wds-space-4);
}
.travel-guidebook-live-context [data-travel-live-rail] {
min-width: 0;
gap: var(--wds-space-2);
margin: 0;
padding: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scroll-snap-stop: always;
scrollbar-width: none;
list-style: none;
touch-action: pan-x;
}
.travel-guidebook-live-context li {
align-items: center;
flex: 0 0 100%;
min-width: 0;
min-height: calc(var(--wizon-ai-action-target-touch) * 2);
gap: var(--wds-space-3);
padding: var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
opacity: 0.72;
scroll-snap-align: start;
transition:
border-color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
background var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
opacity var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}
.travel-guidebook-live-context li[aria-current="true"] {
border-color: var(--wds-color-info);
background: var(--wizon-ai-hover-soft-bg);
opacity: 1;
}
.travel-guidebook-live-icon {
display: grid;
flex: 0 0 var(--wds-space-10);
place-items: center;
width: var(--wds-space-10);
height: var(--wds-space-10);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-surface);
color: var(--wds-color-info-text);
}
.travel-guidebook-live-icon svg {
width: var(--wds-space-5);
height: var(--wds-space-5);
}
.travel-guidebook-live-copy {
flex: 1 1 auto;
}
.travel-guidebook-live-copy strong {
overflow: hidden;
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
line-height: var(--wds-line-height-normal);
text-overflow: ellipsis;
white-space: nowrap;
}
.travel-guidebook-live-context .travel-guidebook-status {
flex: 0 0 auto;
}
/* G5-7S: weather is its own whole-card surface. It no longer sits inside the
neutral live-context card, so one horizontal gesture always has one owner. */
.travel-guidebook-weather-mini {
position: relative;
gap: var(--wds-space-2);
margin: 0;
min-height: 156px;
padding: var(--wds-space-4);
overflow: hidden;
border-radius: var(--wizon-ai-radius-control);
color: var(--wds-white);
}
.travel-guidebook-weather-controls {
display: flex;
}
.travel-guidebook-weather-copy > span,
.travel-guidebook-weather-copy > small,
.travel-guidebook-weather-temperatures small,
.travel-guidebook-weather-controls > span,
.travel-guidebook-weather-meta {
color: color-mix(in srgb, var(--wds-white) 78%, transparent);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-weather-hero {
display: grid;
grid-column: 1;
grid-row: 1 / span 2;
place-items: center;
width: var(--wds-space-10);
height: var(--wds-space-10);
}
.travel-guidebook-weather-hero .weather-icon { width: var(--wds-space-10); height: var(--wds-space-10); }
.travel-guidebook-weather-controls {
position: absolute;
top: var(--wds-space-2);
right: var(--wds-space-2);
align-items: center;
}
.travel-guidebook-weather-controls > span { white-space: nowrap; }
.travel-guidebook-weather-controls button {
display: grid;
place-items: center;
width: var(--wizon-ai-action-target-touch);
height: var(--wizon-ai-action-target-touch);
padding: 0;
border: 0;
background: transparent;
color: var(--wds-white);
cursor: pointer;
}
.travel-guidebook-weather-controls button:disabled { opacity: 0.45; cursor: default; }
.travel-guidebook-weather-controls svg { width: var(--wds-space-4); height: var(--wds-space-4); }
.travel-guidebook-weather-days {
display: flex;
gap: var(--wds-space-2);
width: 100%;
margin: 0;
padding: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scrollbar-width: none;
list-style: none;
touch-action: pan-x;
}
.travel-guidebook-weather-mini .travel-guidebook-weather-day {
display: grid;
grid-template-columns: var(--wds-space-10) minmax(0, 1fr) auto;
grid-template-rows: auto 1fr;
align-items: center;
flex: 0 0 100%;
gap: var(--wds-space-1) var(--wds-space-3);
min-width: 0;
min-height: 92px;
padding: 0;
border: 0;
border-radius: initial;
background: transparent;
color: var(--wds-white);
box-shadow: none;
opacity: 1;
scroll-snap-align: start;
text-align: left;
}
.travel-guidebook-weather-mini .travel-guidebook-weather-day[aria-current="true"] {
border: 0;
background: transparent;
box-shadow: none;
}
.travel-guidebook-weather-copy {
display: grid;
grid-column: 2;
grid-row: 1 / span 2;
gap: 2px;
min-width: 0;
}
.travel-guidebook-weather-copy strong {
overflow: hidden;
color: var(--wds-white);
font-size: var(--wds-font-size-body-1, 1rem);
text-overflow: ellipsis;
white-space: nowrap;
}
.travel-guidebook-weather-temperatures {
display: flex;
grid-column: 3;
grid-row: 2;
align-self: end;
justify-self: end;
gap: var(--wds-space-4);
padding-inline-end: var(--wds-space-1);
}
.travel-guidebook-weather-temperatures > span {
display: flex;
align-items: baseline;
gap: var(--wds-space-1);
}
.travel-guidebook-weather-temperatures strong {
color: var(--wds-white);
font-size: var(--wds-font-size-title-l);
}
.travel-guidebook-weather-days:focus-visible { outline: none; }
.travel-guidebook-weather-mini:has(.travel-guidebook-weather-days:focus-visible) {
box-shadow: inset 0 0 0 2px color-mix(in srgb, var(--wds-white) 72%, transparent);
}
.travel-guidebook-weather-day:focus-visible,
.travel-guidebook-weather-controls button:focus-visible { outline: 2px solid var(--wds-white); outline-offset: 2px; }
.travel-guidebook-weather-pending { margin: var(--wds-space-10) 0 var(--wds-space-4); color: color-mix(in srgb, var(--wds-white) 82%, transparent); font-size: var(--wds-font-size-caption); }
.travel-guidebook-weather-meta {
display: flex;
justify-content: space-between;
gap: var(--wds-space-2);
}
.travel-guidebook-weather-meta span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.travel-guidebook-weather-meta strong {
flex: none;
color: var(--wds-white);
font-weight: var(--wds-font-weight-semibold);
}
/* The assistant message typography layer is intentionally strong. Keep the
immersive weather card's foreground on its sky palette inside that layer. */
body.chatgpt-reference-v1 .travel-guidebook-weather-mini :is(
.travel-guidebook-weather-day,
.travel-guidebook-weather-copy strong,
.travel-guidebook-weather-temperatures strong,
.travel-guidebook-weather-meta strong
) {
color: var(--wds-white);
}
@media (max-width: 520px) {
.travel-guidebook-weather-mini { min-height: 156px; }
.travel-guidebook-weather-mini .travel-guidebook-weather-day {
grid-template-columns: var(--wds-space-10) minmax(0, 1fr);
}
.travel-guidebook-weather-copy {
grid-row: 1;
padding-inline-end: calc(var(--wizon-ai-action-target-touch) * 2 + var(--wds-space-3));
}
.travel-guidebook-weather-temperatures {
grid-column: 2;
grid-row: 2;
justify-self: start;
padding-inline-end: 0;
}
}
.travel-guidebook-rain-strip .travel-guidebook-alternatives {
display: flex;
gap: var(--wds-space-2);
margin: 0;
padding: 0;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scrollbar-width: none;
list-style: none;
}
.travel-guidebook-rain-strip .travel-guidebook-alternatives li {
display: grid;
grid-template-columns: var(--wds-space-12) minmax(0, 1fr) auto;
align-items: center;
flex: 0 0 100%;
gap: var(--wds-space-3);
min-width: 0;
min-height: 132px;
padding: var(--wds-space-4);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
opacity: 0.78;
scroll-snap-align: start;
transition:
border-color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
background var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
opacity var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}
.travel-guidebook-rain-strip .travel-guidebook-alternatives li[aria-current="true"] {
border-color: var(--wds-color-info);
background: var(--wizon-ai-hover-soft-bg);
opacity: 1;
}
.travel-guidebook-rain-icon {
display: grid;
place-items: center;
width: var(--wds-space-12);
height: var(--wds-space-12);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-surface);
color: var(--wds-color-info-text);
}
.travel-guidebook-rain-icon svg {
width: var(--wds-space-5);
height: var(--wds-space-5);
}
.travel-guidebook-rain-copy {
display: flex;
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-guidebook-rain-copy > span:first-child,
.travel-guidebook-rain-copy > span,
.travel-guidebook-rain-copy small {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-rain-copy strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-1);
}
.travel-guidebook-rain-actions {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wds-space-2);
}
.travel-guidebook-rain-actions button {
min-height: var(--wizon-ai-action-target-touch);
padding-inline: var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-surface);
color: var(--wizon-ai-text-primary);
font: inherit;
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-semibold);
cursor: pointer;
}
.travel-guidebook-rain-actions [data-travel-rain-apply] {
border-color: var(--wds-color-info);
background: var(--wds-color-info);
color: var(--wds-color-text-on-primary);
}
.travel-guidebook-rain-actions button:disabled {
border-color: var(--wizon-ai-popover-border);
background: var(--wizon-ai-canvas);
color: var(--wizon-ai-text-muted);
cursor: default;
}
.travel-guidebook-rain-actions [data-travel-rain-apply-status] {
flex: 1 1 100%;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
/* G5-7C: the media contract stays ordered and untruncated. One horizontal snap rail is
reused at every container size; touch scroll, visible controls, and keyboard movement
are equivalent paths to the same items. */
.travel-media-presentation {
display: grid;
min-width: 0;
max-width: 100%;
gap: var(--wds-space-2);
}
[data-travel-photo-rail] {
min-width: 0;
}
.travel-media-heading,
.travel-media-heading > span,
.travel-media-controls,
.travel-media-fallback,
.travel-media-fallback > span:last-child {
display: flex;
}
.travel-media-heading {
align-items: center;
justify-content: space-between;
gap: var(--wds-space-3);
}
.travel-media-heading > span:first-child {
min-width: 0;
align-items: baseline;
gap: var(--wds-space-2);
}
.travel-media-heading strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-1);
}
.travel-media-heading [data-travel-media-position] {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
font-variant-numeric: tabular-nums;
}
.travel-media-controls {
flex: 0 0 auto;
gap: 0;
}
.travel-media-controls button {
display: grid;
place-items: center;
width: var(--wizon-ai-action-target-touch);
height: var(--wizon-ai-action-target-touch);
padding: 0;
border: 0;
background: transparent;
color: var(--wizon-ai-text-secondary);
cursor: pointer;
}
.travel-media-controls button:disabled {
color: var(--wizon-ai-text-muted);
cursor: default;
}
.travel-media-controls svg,
.travel-media-fallback svg {
width: var(--wds-space-4);
height: var(--wds-space-4);
}
.travel-media-viewport {
display: flex;
min-width: 0;
max-width: 100%;
gap: var(--wds-space-3);
padding-block: var(--wds-space-1);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scroll-snap-stop: always;
scroll-padding-inline: var(--wds-space-1);
scrollbar-width: thin;
touch-action: pan-x;
}
.travel-media-card.visual-answer-media,
[data-travel-photo-rail] .travel-media-card,
[data-travel-photo-rail] > :is(button, a, li, article) {
display: grid;
flex: 0 0 min(100%, var(--wizon-adaptive-right-panel-width));
scroll-snap-align: start;
border: 1px solid var(--wizon-ai-popover-border);
background: var(--wizon-ai-surface);
transform-origin: center;
transition:
border-color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
box-shadow var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
opacity var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
transform var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-spatial-ease);
}
.travel-media-card.visual-answer-media[aria-current="true"],
.travel-media-card.visual-answer-media:is([aria-current="true"], .is-selected, [data-selected="true"]),
[data-travel-photo-rail] > :is(button, a, li, article):is([aria-current="true"], .is-selected, [data-selected="true"]) {
border-color: var(--wds-color-info);
box-shadow: inset 0 0 0 1px var(--wds-color-info);
transform: none;
}
.travel-media-card.visual-answer-media img {
aspect-ratio: 16 / 9;
height: auto;
}
.travel-media-card-copy {
display: grid;
min-width: 0;
gap: var(--wds-space-1);
padding: var(--wds-space-3);
}
.travel-media-card-copy strong {
overflow: hidden;
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
line-height: var(--wds-line-height-normal);
text-overflow: ellipsis;
white-space: nowrap;
}
.travel-media-card-copy > span {
overflow: hidden;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
text-overflow: ellipsis;
white-space: nowrap;
}
.travel-media-card-copy .travel-media-card-scope {
color: var(--wds-color-info-text);
font-weight: var(--wds-font-weight-semibold);
}
.travel-media-fallback {
align-items: center;
gap: var(--wds-space-3);
min-height: calc(var(--wizon-ai-action-target-touch) * 2);
padding: var(--wds-space-4);
border: 1px dashed var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
color: var(--wizon-ai-text-secondary);
}
.travel-media-fallback[hidden] {
display: none;
}
.travel-media-fallback > span:first-child {
display: grid;
flex: 0 0 var(--wizon-ai-action-target-touch);
place-items: center;
width: var(--wizon-ai-action-target-touch);
height: var(--wizon-ai-action-target-touch);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-hover-soft-bg);
}
.travel-media-fallback > span:last-child {
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-media-fallback strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
}
.travel-media-fallback span span {
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-media-controls button:focus-visible,
.travel-media-viewport:focus-visible,
.travel-media-card:focus-visible,
.travel-course-option:focus-visible,
.travel-itinerary-stop-control:focus-visible,
.travel-itinerary-day-step:focus-visible,
.travel-itinerary-tabs button:focus-visible,
.travel-guidebook-course-controls button:focus-visible,
.travel-guidebook-course-viewport:focus-visible,
.travel-guidebook-course-card:focus-visible,
[data-travel-photo-rail]:focus-visible,
[data-travel-course-rail]:focus-visible {
outline: 0;
box-shadow: 0 0 0 var(--wds-space-1) var(--wizon-ai-focus-visible-ring);
}
/* G5-7K: the rendering layer can add the semantic hero marker without coupling this
presentation rule to a single payload version. Selection state drives a short, readable
crossfade while the image remains the leading guidebook surface. */
:is(.travel-guidebook-hero, .travel-hero, [data-travel-guidebook-hero]) {
position: relative;
min-width: 0;
aspect-ratio: 16 / 7;
overflow: hidden;
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
isolation: isolate;
}
/* A source-backed photo keeps the cinematic ratio above. When TourAPI has no usable
image, the honest text fallback must collapse to its content instead of reserving a
large blank photographic canvas. */
.travel-guidebook-hero-fallback[data-travel-guidebook-fallback] {
aspect-ratio: auto;
overflow: visible;
background: transparent;
isolation: auto;
}
:is(.travel-guidebook-hero, .travel-hero, [data-travel-guidebook-hero]) :is(img, [data-travel-hero-image], .travel-hero-media) {
width: 100%;
min-height: 100%;
object-fit: cover;
transform: scale(1.01);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
}
:is(.travel-guidebook-hero, .travel-hero, [data-travel-guidebook-hero]):is(.is-transitioning, [data-travel-selection-state="enter"], [data-travel-selection-state="swap"]) :is(img, [data-travel-hero-image], .travel-hero-media),
:is(.travel-guidebook-hero, .travel-hero, [data-travel-guidebook-hero]):is(.is-transitioning, [data-travel-selection-state="enter"], [data-travel-selection-state="swap"]) :is(.travel-hero-copy, [data-travel-hero-copy]) {
animation: travel-guidebook-hero-in var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease) both;
}
[data-travel-guidebook-experience]:is([data-travel-selection-state="enter"], [data-travel-selection-state="swap"], [data-travel-selection-state="changing"]) [data-travel-guidebook-hero] :is(img, [data-travel-hero-image], .travel-hero-media),
[data-travel-guidebook-experience]:is([data-travel-selection-state="enter"], [data-travel-selection-state="swap"], [data-travel-selection-state="changing"]) [data-travel-guidebook-hero] :is(.travel-hero-copy, [data-travel-hero-copy], .travel-guidebook-hero-overlay) {
animation: travel-guidebook-hero-in var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease) both;
}
@keyframes travel-guidebook-hero-in {
from {
opacity: 0;
transform: translate3d(0, var(--wds-space-3), 0) scale(1.01);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
}
.travel-itinerary-day:not([hidden]),
.travel-itinerary-route-panel:not([hidden]),
.travel-guidebook-detail:not([hidden]),
[data-travel-detail-panel]:not([hidden]),
[data-travel-location-panel]:not([hidden]) {
animation: travel-guidebook-panel-in var(--wizon-ai-motion-panel-duration) var(--wizon-ai-motion-spatial-ease) both;
}
@keyframes travel-guidebook-panel-in {
from {
opacity: 0;
transform: translate3d(0, var(--wds-space-2), 0);
}
to {
opacity: 1;
transform: translate3d(0, 0, 0);
}
}
/* The hero and curated-course rail are supplied only when source-backed media exists.
A text fallback uses the same semantic hero marker, keeping the state honest without
manufacturing a photographic surface. */
.travel-guidebook-hero.has-media {
display: grid;
min-height: 0;
color: var(--wds-color-text-on-primary);
}
.travel-guidebook-hero-media {
position: absolute;
inset: 0;
width: 100%;
height: 100%;
padding: 0;
border: 0;
background: transparent;
cursor: zoom-in;
}
.travel-guidebook-hero-media::after {
content: "";
position: absolute;
inset: 0;
background: linear-gradient(90deg, color-mix(in srgb, var(--wizon-ai-text-primary) 68%, transparent), transparent);
pointer-events: none;
}
.travel-guidebook-rain-visual-fallback,
.travel-guidebook-rain-place-fallback,
.travel-guidebook-rain-map-fallback {
display: grid;
place-items: center;
align-content: center;
gap: var(--wds-space-2);
min-height: 100%;
padding: var(--wds-space-4);
background: var(--wizon-ai-hover-soft-bg);
color: var(--wizon-ai-text-secondary);
text-align: center;
}
.travel-guidebook-rain-visual-fallback[hidden],
.travel-guidebook-rain-place-fallback[hidden],
.travel-guidebook-rain-map-fallback[hidden] {
display: none;
}
.travel-guidebook-rain-visual-fallback {
position: absolute;
inset: 0;
}
.travel-guidebook-rain-visual-fallback strong,
.travel-guidebook-rain-place-fallback > span:last-child,
.travel-guidebook-rain-map-fallback > span {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
}
.travel-guidebook-rain-visual-fallback > span:last-child {
max-width: var(--wizon-adaptive-right-panel-width);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-rain-visual-fallback svg,
.travel-guidebook-rain-place-fallback svg,
.travel-guidebook-rain-map-fallback svg {
width: var(--wds-space-6);
height: var(--wds-space-6);
color: var(--wds-color-info-text);
}
.travel-guidebook-rain-place-fallback {
align-self: stretch;
min-height: var(--wds-space-24);
border-radius: calc(var(--wizon-ai-radius-control) - var(--wds-space-1));
}
.travel-guidebook-rain-map-fallback {
min-height: var(--wds-space-24);
margin: var(--wds-space-3);
border: 1px dashed var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
}
.travel-guidebook-hero-overlay {
position: relative;
align-self: end;
max-width: var(--wizon-ai-chat-max-width);
padding: var(--wds-space-5);
pointer-events: none;
}
.travel-guidebook-hero-overlay h3,
.travel-guidebook-hero-overlay p,
.travel-guidebook-hero-kicker,
.travel-guidebook-hero-status,
.travel-guidebook-hero-credit {
color: var(--wds-color-text-on-primary);
}
.travel-guidebook-hero-overlay h3,
.travel-guidebook-hero-overlay p {
margin: 0;
}
.travel-guidebook-hero-overlay h3 {
margin-top: var(--wds-space-1);
font-size: var(--wds-font-size-title-l);
}
.travel-guidebook-hero-overlay p {
max-width: var(--wizon-adaptive-right-panel-width);
margin-top: var(--wds-space-2);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-hero-kicker,
.travel-guidebook-hero-status,
.travel-guidebook-hero-credit {
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-hero-action {
position: absolute;
inset-block-start: var(--wds-space-3);
inset-inline-end: var(--wds-space-3);
}
.travel-guidebook-hero-credit {
position: absolute;
inset-block-end: var(--wds-space-2);
inset-inline-end: var(--wds-space-3);
max-width: var(--wizon-adaptive-right-panel-width);
margin: 0;
text-align: end;
}
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-hero-overlay h3,
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-hero-overlay p,
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-hero-kicker,
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-hero-status,
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-hero-credit {
color: var(--wds-color-text-on-primary);
}
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-snapshot {
gap: var(--wds-space-1);
padding: 0;
border: 0;
color: var(--wds-color-text-on-primary);
}
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-snapshot span {
min-height: var(--wds-space-6);
padding-inline: var(--wds-space-2);
border-radius: var(--wizon-ai-radius-pill);
background: color-mix(in srgb, var(--wizon-ai-text-primary) 44%, transparent);
color: var(--wds-color-text-on-primary);
}
.chatgpt-reference-v1 [data-travel-guidebook-hero] .travel-guidebook-status {
color: var(--wds-color-text-on-primary);
}
/* The no-photo hero is an editorial text header on the page canvas. Do not inherit
the white-on-photo metadata treatment from the source-backed hero. */
.chatgpt-reference-v1 .travel-guidebook-hero-fallback[data-travel-guidebook-fallback] {
color: var(--wizon-ai-text-primary);
}
.chatgpt-reference-v1 .travel-guidebook-hero-fallback[data-travel-guidebook-fallback] :is(
.travel-guidebook-hero-kicker,
.travel-guidebook-hero-status,
.travel-guidebook-status
) {
color: var(--wizon-ai-text-secondary);
}
.chatgpt-reference-v1 .travel-itinerary-card:not(.travel-guidebook-card) [data-travel-guidebook-hero] .travel-guidebook-hero-overlay h3 {
font-size: var(--wds-font-size-headline-m);
}
.travel-guidebook-hero.has-media {
aspect-ratio: 21 / 5;
}
.travel-guidebook-hero-overlay {
align-self: center;
display: grid;
width: min(58%, var(--wizon-ai-chat-max-width));
justify-items: start;
gap: var(--wds-space-1);
padding-block: var(--wds-space-5);
}
.travel-guidebook-hero-overlay h3,
.travel-guidebook-hero-overlay p {
margin-block: 0;
}
.travel-guidebook-hero-overlay .travel-guidebook-snapshot {
padding-block: var(--wds-space-1);
}
.travel-guidebook-hero-weather {
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-medium);
word-break: keep-all;
}
.travel-guidebook-hero-credit {
max-width: 46%;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.travel-media-card-selected {
position: absolute;
inset-block-start: var(--wds-space-2);
inset-inline-start: var(--wds-space-2);
display: none;
place-items: center;
width: var(--wds-space-8);
height: var(--wds-space-8);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wds-color-info);
color: var(--wds-color-text-on-primary);
}
.travel-media-card:is([aria-pressed="true"], .is-selected) .travel-media-card-selected {
display: grid;
}
.travel-media-card-selected svg {
width: var(--wds-space-4);
height: var(--wds-space-4);
}
.travel-media-card.visual-answer-media {
min-height: var(--wds-space-32);
}
.travel-media-card.visual-answer-media img {
position: absolute;
inset: 0;
height: 100%;
aspect-ratio: auto;
}
.travel-media-card-copy {
position: relative;
align-self: end;
background: linear-gradient(transparent, color-mix(in srgb, var(--wizon-ai-text-primary) 82%, transparent));
}
.chatgpt-reference-v1 .travel-media-card-copy strong,
.chatgpt-reference-v1 .travel-media-card-copy > span,
.chatgpt-reference-v1 .travel-media-card-copy .travel-media-card-scope {
color: var(--wds-color-text-on-primary);
}
@container travel-itinerary (min-width: 521px) {
.travel-media-card.visual-answer-media,
[data-travel-photo-rail] .travel-media-card,
[data-travel-photo-rail] > :is(button, a, li, article) {
flex-basis: min(24%, var(--wizon-adaptive-right-panel-width));
}
.travel-guidebook-course-card,
[data-travel-course-rail] > :is(button, a, li, article) {
flex-basis: min(38%, var(--wizon-adaptive-right-panel-width));
}
}
[data-travel-course-rail] {
display: grid;
min-width: 0;
gap: var(--wds-space-2);
}
.travel-guidebook-rail-heading,
.travel-guidebook-rail-heading > span,
.travel-guidebook-course-controls {
display: flex;
align-items: center;
}
.travel-guidebook-rail-heading {
justify-content: space-between;
gap: var(--wds-space-3);
}
.travel-guidebook-rail-heading > span:first-child {
min-width: 0;
gap: var(--wds-space-2);
}
.travel-guidebook-rail-heading strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-1);
}
.travel-guidebook-rail-heading [data-travel-course-position] {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
font-variant-numeric: tabular-nums;
}
.travel-guidebook-course-controls {
flex: 0 0 auto;
gap: 0;
}
.travel-guidebook-course-controls button {
display: grid;
place-items: center;
width: var(--wizon-ai-action-target-touch);
height: var(--wizon-ai-action-target-touch);
padding: 0;
border: 0;
background: transparent;
color: var(--wizon-ai-text-secondary);
cursor: pointer;
}
.travel-guidebook-course-controls svg {
width: var(--wds-space-4);
height: var(--wds-space-4);
}
.travel-guidebook-course-controls button:disabled {
color: var(--wizon-ai-text-muted);
cursor: default;
}
.travel-guidebook-course-viewport {
display: flex;
min-width: 0;
gap: var(--wds-space-3);
overflow-x: auto;
overflow-y: hidden;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scroll-snap-stop: always;
scrollbar-width: thin;
touch-action: pan-x;
}
.travel-guidebook-course-card {
display: grid;
grid-template-columns: minmax(var(--wds-space-24), 2fr) minmax(0, 3fr);
flex: 0 0 min(100%, var(--wizon-adaptive-right-panel-width));
min-width: 0;
padding: var(--wds-space-2);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-surface);
color: var(--wizon-ai-text-primary);
text-align: left;
scroll-snap-align: start;
transform-origin: center;
cursor: pointer;
transition:
border-color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
box-shadow var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
transform var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-spatial-ease);
}
.travel-guidebook-course-card:is(.is-selected, [aria-pressed="true"]) {
border-color: var(--wds-color-info);
background: var(--wizon-ai-hover-soft-bg);
box-shadow: inset 0 0 0 1px var(--wds-color-info);
transform: none;
}
.travel-guidebook-course-visual,
.travel-guidebook-course-visual img {
width: 100%;
height: 100%;
}
.travel-guidebook-course-visual {
align-self: start;
aspect-ratio: 4 / 3;
height: auto;
min-height: var(--wds-space-20);
overflow: hidden;
border-radius: calc(var(--wizon-ai-radius-control) - var(--wds-space-1));
}
.travel-guidebook-course-visual img {
object-fit: cover;
}
.travel-guidebook-course-copy,
.travel-guidebook-course-badges {
display: flex;
min-width: 0;
}
.travel-guidebook-course-copy {
flex-direction: column;
gap: var(--wds-space-1);
padding-inline-start: var(--wds-space-2);
}
.travel-guidebook-course-label {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-course-copy strong {
overflow: hidden;
font-size: var(--wds-font-size-body-2);
text-overflow: ellipsis;
white-space: nowrap;
}
.travel-guidebook-course-badges {
flex-wrap: wrap;
gap: var(--wds-space-1);
}
.travel-guidebook-course-badges span {
display: inline-flex;
align-items: center;
min-height: var(--wds-space-6);
padding-inline: var(--wds-space-2);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-canvas);
color: var(--wds-color-info-text);
font-size: var(--wds-font-size-label-s);
}
.travel-guidebook-plan {
display: grid;
min-width: 0;
gap: var(--wds-space-4);
padding: var(--wds-space-4);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-popover);
background: var(--wizon-ai-surface);
box-shadow: none;
}
.travel-guidebook-plan-heading,
.travel-guidebook-plan-heading > span {
display: flex;
}
.travel-guidebook-plan-heading {
align-items: flex-end;
justify-content: space-between;
gap: var(--wds-space-3);
}
.travel-guidebook-plan-heading > span:first-child {
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-guidebook-plan-heading strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-1);
}
.travel-guidebook-plan-heading > span:first-child > span {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-plan-heading .travel-itinerary-day-nav,
.travel-guidebook-plan-heading .travel-itinerary-tabs {
flex: 0 0 auto;
gap: 0;
}
.travel-guidebook-plan-heading .travel-itinerary-tabs {
width: auto;
padding: 0;
border-radius: initial;
background: transparent;
}
.travel-guidebook-plan-heading .travel-itinerary-tabs button {
min-width: auto;
padding-inline: var(--wds-space-3);
border-radius: initial;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-body-1);
}
.travel-guidebook-plan-heading .travel-itinerary-tabs button[aria-selected="true"] {
background: transparent;
color: var(--wizon-ai-text-primary);
font-weight: var(--wds-font-weight-semibold);
box-shadow: none;
transform: none;
}
.travel-guidebook-selection-layout {
grid-template-columns: minmax(0, 1fr);
gap: var(--wds-space-4);
}
.travel-guidebook-place-detail {
display: grid;
grid-template-columns: minmax(200px, 240px) minmax(0, 1fr);
align-items: center;
min-width: 0;
gap: var(--wds-space-3);
margin-top: var(--wds-space-3);
padding-top: var(--wds-space-3);
border-top: 1px solid var(--wizon-ai-popover-border);
animation: travel-guidebook-panel-in var(--wizon-ai-motion-panel-duration) var(--wizon-ai-motion-spatial-ease) both;
}
.travel-guidebook-place-detail[hidden] {
display: none;
}
.travel-guidebook-place-visual {
align-self: start;
overflow: hidden;
border-radius: calc(var(--wizon-ai-radius-control) - var(--wds-space-1));
}
.travel-guidebook-place-visual img {
display: block;
width: 100%;
aspect-ratio: 16 / 9;
object-fit: cover;
}
.travel-guidebook-location-disclosure {
min-width: 0;
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-canvas);
overflow: hidden;
}
.travel-guidebook-location-disclosure > summary {
display: flex;
align-items: center;
justify-content: space-between;
min-height: var(--wizon-ai-action-target-touch);
gap: var(--wds-space-3);
padding: var(--wds-space-2) var(--wds-space-3);
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
font-weight: var(--wds-font-weight-semibold);
cursor: pointer;
list-style: none;
}
.travel-guidebook-location-disclosure > summary::-webkit-details-marker {
display: none;
}
.travel-guidebook-location-disclosure > summary > span:first-child {
display: flex;
align-items: center;
gap: var(--wds-space-2);
}
.travel-guidebook-location-disclosure > summary > span:first-child svg,
.travel-guidebook-location-chevron svg {
width: var(--wds-space-5);
height: var(--wds-space-5);
}
.travel-guidebook-location-chevron {
display: grid;
place-items: center;
flex: 0 0 auto;
color: var(--wizon-ai-text-secondary);
transition: transform var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-spatial-ease);
}
.travel-guidebook-location-disclosure[open] .travel-guidebook-location-chevron {
transform: rotate(180deg);
}
.travel-guidebook-location-disclosure .travel-itinerary-route-preview {
min-height: 0;
margin: 0 var(--wds-space-3) var(--wds-space-3);
}
.travel-guidebook-place-copy {
display: flex;
min-width: 0;
flex-direction: column;
align-items: flex-start;
gap: var(--wds-space-1);
}
.travel-guidebook-place-copy [hidden] {
display: none;
}
.travel-guidebook-place-copy h4,
.travel-guidebook-place-copy p {
margin: 0;
}
.travel-guidebook-place-copy > span:first-child,
.travel-guidebook-place-copy p,
.travel-guidebook-place-copy small {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-place-copy h4 {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
}
.travel-guidebook-place-copy small {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
.travel-guidebook-place-timing,
[data-travel-place-timing],
[data-travel-place-route] {
color: var(--wds-color-info-text);
font-size: var(--wds-font-size-caption);
font-variant-numeric: tabular-nums;
}
.travel-course-decision {
display: grid;
gap: var(--wds-space-3);
padding: var(--wds-space-4);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-popover);
background: var(--wizon-ai-surface);
}
.travel-course-decision-heading,
.travel-course-decision-heading > span,
.travel-course-option header,
.travel-course-option header > span,
.travel-course-rationale header {
display: flex;
}
.travel-course-decision-heading,
.travel-course-option header,
.travel-course-rationale header {
align-items: flex-start;
justify-content: space-between;
gap: var(--wds-space-3);
}
.travel-course-decision-heading > span,
.travel-course-option header > span {
min-width: 0;
flex-direction: column;
gap: var(--wds-space-1);
}
.travel-course-decision h4,
.travel-course-decision p,
.travel-course-decision dl,
.travel-course-decision dd {
margin: 0;
}
.travel-course-decision h4 {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-1);
line-height: var(--wds-line-height-normal);
}
.travel-course-decision-heading p,
.travel-course-decision-heading > span:last-child,
.travel-course-option header span span,
.travel-course-option p,
.travel-course-rationale > p,
.travel-course-rationale header > span,
.travel-course-rejected li span {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-course-decision-heading > span:last-child {
flex: 0 0 auto;
white-space: nowrap;
}
.travel-course-options {
display: flex;
min-width: 0;
gap: var(--wds-space-2);
margin: 0;
padding: 0;
list-style: none;
overflow-x: auto;
overscroll-behavior-inline: contain;
scroll-behavior: smooth;
scroll-snap-type: inline mandatory;
scroll-snap-stop: always;
scrollbar-width: thin;
touch-action: pan-x;
}
.travel-course-option,
[data-travel-course-rail] > :is(button, a, li, article) {
display: grid;
flex: 0 0 min(100%, var(--wizon-adaptive-right-panel-width));
align-content: start;
gap: var(--wds-space-2);
min-width: 0;
padding: var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-surface);
scroll-snap-align: start;
transform-origin: center;
transition:
border-color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
box-shadow var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
transform var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-spatial-ease);
}
.travel-course-option:is(.is-primary, .is-selected, [aria-current="true"], [data-selected="true"]),
[data-travel-course-rail] > :is(button, a, li, article):is(.is-primary, .is-selected, [aria-current="true"], [data-selected="true"]) {
border-color: var(--wds-color-info);
background: var(--wizon-ai-hover-soft-bg);
box-shadow: inset 0 0 0 1px var(--wds-color-info);
transform: none;
}
.travel-course-option header strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
}
.travel-course-option header b {
flex: 0 0 auto;
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-h3);
font-variant-numeric: tabular-nums;
}
.travel-course-rationale {
display: grid;
gap: var(--wds-space-3);
padding-top: var(--wds-space-3);
border-top: 1px solid var(--wizon-ai-popover-border);
}
.travel-course-rationale dl {
display: grid;
grid-template-columns: repeat(4, minmax(0, 1fr));
gap: var(--wds-space-2);
}
.travel-course-rationale dl > div {
display: grid;
gap: var(--wds-space-1);
min-width: 0;
padding: var(--wds-space-3);
border-radius: var(--wizon-ai-radius-control);
background: var(--wizon-ai-hover-soft-bg);
}
.travel-course-rationale dt {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-label-s);
}
.travel-course-rationale dd {
display: grid;
gap: var(--wds-space-1);
}
.travel-course-rationale dd strong {
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-1);
font-variant-numeric: tabular-nums;
}
.travel-course-rationale dd span,
.travel-course-check {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-label-s);
line-height: var(--wds-line-height-normal);
}
.travel-course-rejected {
border-top: 1px solid var(--wizon-ai-popover-border);
}
.travel-course-rejected summary {
display: flex;
align-items: center;
min-height: var(--wizon-ai-action-target-touch);
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-semibold);
cursor: pointer;
}
.travel-course-rejected ul {
display: grid;
gap: var(--wds-space-2);
margin: 0;
padding: 0 0 var(--wds-space-2);
list-style: none;
}
.travel-course-rejected li {
display: grid;
grid-template-columns: minmax(var(--wds-space-16), auto) minmax(0, 1fr);
gap: var(--wds-space-3);
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-day-head,
.travel-guidebook-day-head > span,
.travel-guidebook-day-meta {
display: flex;
}
.travel-guidebook-day-head {
align-items: flex-start;
justify-content: space-between;
gap: var(--wds-space-3);
padding-bottom: var(--wds-space-2);
}
.travel-guidebook-day-head > span {
flex-direction: column;
min-width: 0;
gap: var(--wds-space-1);
}
.travel-guidebook-day-head strong {
font-size: var(--wds-font-size-body-2);
}
.travel-guidebook-day-head > span > span,
.travel-guidebook-day-meta {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-day-meta {
flex-wrap: wrap;
justify-content: flex-start;
gap: var(--wds-space-2);
margin-bottom: var(--wds-space-3);
padding: 0;
border: 0;
}
.travel-guidebook-day-meta > span {
display: inline-flex;
align-items: center;
gap: var(--wds-space-1);
min-height: var(--wds-space-8);
padding-inline: var(--wds-space-3);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-canvas);
}
.travel-guidebook-day-meta svg {
width: var(--wds-space-4);
height: var(--wds-space-4);
}
.travel-itinerary-stop.travel-guidebook-stop {
grid-template-columns: var(--wds-space-8) minmax(0, 1fr);
gap: var(--wds-space-2);
}
.travel-guidebook-stop .travel-itinerary-stop-marker {
display: grid;
place-items: center;
width: var(--wds-space-8);
height: var(--wds-space-8);
margin: 0;
border: 0;
background: var(--wds-color-info);
color: var(--wds-color-text-on-primary);
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-semibold);
}
.travel-guidebook-stop.is-selected .travel-itinerary-stop-marker {
background: var(--wizon-ai-text-primary);
}
.travel-guidebook-stop.travel-itinerary-stop:not(:last-child)::after {
top: var(--wds-space-8);
left: calc(var(--wds-space-8) / 2);
}
.travel-guidebook-stop .travel-itinerary-stop-copy {
flex-direction: column;
min-height: var(--wizon-ai-action-target-touch);
padding: var(--wds-space-3);
border: 1px solid transparent;
}
.travel-guidebook-stop .travel-itinerary-stop-copy > .travel-itinerary-stop-control {
width: 100%;
min-height: var(--wizon-ai-action-target-touch);
}
.travel-guidebook-stop.is-selected .travel-itinerary-stop-copy {
border-color: var(--wds-color-info);
background: var(--wizon-ai-hover-soft-bg);
box-shadow: none;
transform: none;
}
.travel-guidebook-stop .travel-itinerary-stop-head {
justify-content: flex-start;
}
.travel-guidebook-stop .travel-itinerary-stop-head > span {
display: flex;
min-width: 0;
align-items: baseline;
gap: var(--wds-space-2);
}
.travel-guidebook-stop .travel-itinerary-stop-time {
flex: 0 0 auto;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
font-variant-numeric: tabular-nums;
}
.travel-guidebook-stop .travel-itinerary-stop-detail {
display: none;
}
.travel-guidebook-stop-timing {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
font-variant-numeric: tabular-nums;
}
.travel-guidebook-stop.is-selected .travel-guidebook-stop-timing {
display: none;
}
.travel-guidebook-leg,
.travel-guidebook-remaining {
display: grid;
grid-template-columns: var(--wds-space-8) minmax(0, 1fr);
align-items: center;
gap: var(--wds-space-2);
min-height: var(--wizon-ai-action-target-touch);
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-leg-marker {
display: grid;
place-items: center;
width: var(--wds-space-8);
height: var(--wds-space-8);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-surface);
}
.travel-guidebook-leg-marker svg {
width: var(--wds-space-4);
height: var(--wds-space-4);
}
.travel-guidebook-leg-times {
color: var(--wizon-ai-text-secondary);
font-variant-numeric: tabular-nums;
}
.travel-guidebook-leg-copy,
.travel-guidebook-remaining > span:last-child {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--wds-space-1) var(--wds-space-2);
}
.travel-guidebook-leg-copy strong,
.travel-guidebook-remaining strong {
color: var(--wizon-ai-text-primary);
}
.travel-guidebook-leg-evidence {
color: var(--wizon-ai-text-muted);
font-size: var(--wds-font-size-label-s);
font-variant-numeric: tabular-nums;
}
.travel-guidebook-remaining > span:first-child {
width: var(--wds-space-3);
height: var(--wds-space-3);
margin-inline: auto;
border: 1px dashed var(--wizon-ai-text-muted);
border-radius: var(--wizon-ai-radius-pill);
}
.travel-guidebook-remaining > span:last-child {
justify-content: space-between;
min-width: 0;
}
.travel-guidebook-status {
display: inline-flex;
align-items: center;
gap: var(--wds-space-1);
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-label-s);
font-weight: var(--wds-font-weight-medium);
white-space: nowrap;
}
.travel-guidebook-status > span {
width: var(--wds-space-2);
height: var(--wds-space-2);
border-radius: var(--wizon-ai-radius-pill);
background: var(--wizon-ai-text-muted);
}
.travel-guidebook-status[data-status="passed"] {
color: var(--wds-color-success-text);
}
.travel-guidebook-status[data-status="passed"] > span {
background: var(--wds-color-success);
}
.travel-guidebook-status[data-status="needs_refresh"] {
color: var(--wds-color-warning-text);
}
.travel-guidebook-status[data-status="needs_refresh"] > span {
background: var(--wds-color-warning);
}
.travel-guidebook-status[data-status="not_checked"] {
color: var(--wds-color-info-text);
}
.travel-guidebook-status[data-status="not_checked"] > span {
background: var(--wds-color-info);
}
.travel-guidebook-status[data-status="failed"] {
color: var(--wds-color-error-text);
}
.travel-guidebook-status[data-status="failed"] > span {
background: var(--wds-color-error);
}
.travel-guidebook-map-note {
margin: var(--wds-space-2) 0 0;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
line-height: var(--wds-line-height-normal);
}
.travel-guidebook-evidence {
border-block: 1px solid var(--wizon-ai-popover-border);
}
.travel-guidebook-evidence > [data-travel-evidence-toggle] {
display: flex;
align-items: center;
width: 100%;
min-height: var(--wizon-ai-action-target-touch);
padding: 0;
border: 0;
background: transparent;
color: var(--wizon-ai-text-primary);
font-family: inherit;
font-size: var(--wds-font-size-body-2);
font-weight: var(--wds-font-weight-semibold);
text-align: start;
cursor: pointer;
}
.travel-guidebook-evidence-list {
display: grid;
gap: var(--wds-space-2);
padding-bottom: var(--wds-space-3);
}
.travel-guidebook-evidence-list p {
display: grid;
grid-template-columns: minmax(var(--wds-space-16), auto) minmax(0, 1fr);
align-items: baseline;
gap: var(--wds-space-3);
margin: 0;
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.travel-guidebook-status-legend {
display: flex;
flex-wrap: wrap;
gap: var(--wds-space-2) var(--wds-space-4);
padding: var(--wds-space-3) 0;
border-top: 1px solid var(--wizon-ai-popover-border);
}
@container travel-itinerary (max-width: 520px) {
:is(.travel-guidebook-hero, .travel-hero, [data-travel-guidebook-hero]) {
aspect-ratio: 7 / 3;
}
.travel-guidebook-hero.has-media {
aspect-ratio: 7 / 3;
}
.travel-guidebook-hero-overlay {
width: 76%;
padding: var(--wds-space-3);
}
.chatgpt-reference-v1 .travel-itinerary-card:not(.travel-guidebook-card) [data-travel-guidebook-hero] .travel-guidebook-hero-overlay h3 {
font-size: var(--wds-font-size-title-l);
}
.travel-guidebook-hero-overlay > p:not(.travel-guidebook-hero-weather),
.travel-guidebook-hero-overlay .travel-guidebook-snapshot {
display: none;
}
.travel-guidebook-hero-credit {
display: none;
}
.travel-itinerary-hero {
grid-template-columns: repeat(2, minmax(0, 1fr));
grid-auto-rows: clamp(92px, 29vw, 128px);
padding: var(--wds-space-1);
}
.travel-itinerary-body {
gap: var(--wds-space-3);
padding: var(--wds-space-4);
}
.travel-itinerary-heading {
align-items: stretch;
flex-direction: column;
}
.travel-itinerary-tabs {
width: 100%;
}
.travel-itinerary-day-nav {
width: 100%;
}
.travel-itinerary-day-nav.is-long {
display: grid;
grid-template-columns: 44px minmax(0, 1fr) auto 44px;
gap: var(--wds-space-1);
}
.travel-itinerary-day-nav.is-long .travel-itinerary-tabs {
padding-inline: var(--wds-space-1);
}
.travel-itinerary-day-position {
min-width: 48px;
justify-content: center;
}
.travel-itinerary-layout {
display: flex;
flex-direction: column;
gap: var(--wds-space-5);
}
.travel-itinerary-route-preview {
order: -1;
width: 100%;
}
.travel-itinerary-route-panel {
padding: var(--wds-space-3);
}
.travel-itinerary-map {
min-height: 180px;
}
.travel-guidebook-card .travel-itinerary-map-marker {
width: var(--wizon-ai-action-target-touch);
height: var(--wizon-ai-action-target-touch);
}
.travel-itinerary-stop {
grid-template-columns: var(--wds-space-3) 42px minmax(0, 1fr);
}
.travel-itinerary-stop-media {
width: 100%;
max-height: 112px;
}
.travel-itinerary-stop.is-featured .travel-itinerary-stop-copy {
display: flex;
}
.travel-itinerary-stop.is-featured .travel-itinerary-stop-media {
margin-top: var(--wds-space-2);
}
.travel-itinerary-actions,
.travel-itinerary-adjust {
align-items: stretch;
flex-direction: column;
}
.travel-itinerary-actions > button,
.travel-itinerary-adjust,
.travel-itinerary-adjust button {
width: 100%;
}
.travel-guidebook-card .travel-itinerary-route-preview {
order: initial;
min-height: 0;
}
.travel-guidebook-card .travel-itinerary-route-panel {
height: auto;
}
.travel-guidebook-plan-heading {
align-items: stretch;
flex-direction: column;
}
.travel-guidebook-plan,
.travel-guidebook-prep,
.travel-guidebook-rain-strip {
padding: var(--wds-space-3);
box-shadow: none;
}
.travel-guidebook-plan-heading .travel-itinerary-day-nav,
.travel-guidebook-plan-heading .travel-itinerary-tabs {
width: auto;
align-self: flex-start;
}
.travel-guidebook-place-detail {
grid-template-columns: minmax(0, 1fr);
}
.travel-guidebook-rain-strip .travel-guidebook-alternatives li {
grid-template-columns: var(--wds-space-10) minmax(0, 1fr);
min-height: 156px;
padding: var(--wds-space-3);
}
.travel-guidebook-rain-strip .travel-guidebook-status {
grid-column: 2;
}
.travel-guidebook-rain-icon {
width: var(--wds-space-10);
height: var(--wds-space-10);
}
.travel-guidebook-readiness progress {
width: var(--wds-space-16);
}
.travel-guidebook-place-visual img {
aspect-ratio: 16 / 9;
}
.travel-guidebook-revalidation {
width: 100%;
}
.travel-guidebook-hero-action {
width: auto;
gap: var(--wds-space-1);
padding-inline: var(--wds-space-2);
font-size: var(--wds-font-size-label-s);
}
.travel-media-heading,
.travel-media-heading > span:first-child {
gap: var(--wds-space-1);
}
.travel-media-heading strong {
font-size: var(--wds-font-size-body-2);
}
.travel-guidebook-snapshot {
gap: var(--wds-space-1) var(--wds-space-2);
}
.travel-media-card.visual-answer-media {
flex-basis: calc(100% - var(--wds-space-8));
}
.travel-course-decision {
padding: var(--wds-space-3);
}
.travel-course-decision-heading {
align-items: flex-start;
}
.travel-course-options,
.travel-course-rationale dl {
grid-template-columns: minmax(0, 1fr);
}
.travel-course-option,
.travel-guidebook-course-card,
[data-travel-course-rail] > :is(button, a, li, article) {
flex-basis: calc(100% - var(--wds-space-8));
}
.travel-course-rejected li {
grid-template-columns: minmax(0, 1fr);
gap: var(--wds-space-1);
}
.travel-itinerary-stop.travel-guidebook-stop,
.travel-guidebook-leg,
.travel-guidebook-remaining {
grid-template-columns: var(--wds-space-8) minmax(0, 1fr);
}
.travel-guidebook-stop .travel-itinerary-stop-copy {
padding: var(--wds-space-2);
}
.travel-guidebook-evidence-list p {
grid-template-columns: minmax(0, 1fr);
gap: var(--wds-space-1);
}
.travel-guidebook-status-legend {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
@media (prefers-reduced-motion: reduce) {
.visual-answer-media img,
.travel-media-viewport,
[data-travel-photo-rail],
[data-travel-course-rail],
.travel-media-card.visual-answer-media,
.travel-course-option,
.travel-guidebook-course-viewport,
.travel-guidebook-course-card,
.travel-guidebook-live-context [data-travel-live-rail],
.travel-guidebook-weather-days,
.travel-guidebook-weather-mini,
.travel-guidebook-live-context li,
.travel-itinerary-tabs,
.travel-itinerary-tabs button,
.travel-itinerary-stop-copy,
.travel-itinerary-stop-detail,
.travel-itinerary-map-marker,
.travel-itinerary-day,
.travel-itinerary-route-panel,
.travel-guidebook-place-detail,
.travel-guidebook-detail,
[data-travel-detail-panel],
[data-travel-location-panel],
:is(.travel-guidebook-hero, .travel-hero, [data-travel-guidebook-hero]),
:is(.travel-guidebook-hero, .travel-hero, [data-travel-guidebook-hero]) :is(img, [data-travel-hero-image], .travel-hero-media) {
transition: none;
animation: none;
transform: none;
scroll-behavior: auto;
}
}
@media (hover: hover) and (pointer: fine) {
.travel-media-controls button:not(:disabled):hover,
.travel-guidebook-course-controls button:not(:disabled):hover,
.travel-guidebook-live-controls button:not(:disabled):hover {
color: var(--wizon-ai-text-primary);
}
.travel-media-card.visual-answer-media:not([aria-current="true"]):hover,
[data-travel-photo-rail] > :is(button, a, li, article):not([aria-current="true"]):not(.is-selected):hover,
.travel-course-option:not(.is-primary):hover,
.travel-guidebook-course-card:not(.is-selected):hover,
[data-travel-course-rail] > :is(button, a, li, article):not([aria-current="true"]):not(.is-selected):hover {
transform: scale(1.01);
}
.travel-itinerary-day-step:not(:disabled):hover,
.travel-itinerary-tabs button:hover {
background: var(--wizon-ai-hover-soft-bg);
}
}
/* Image tiles open a focused preview. Source-list navigation stays exclusively on the source
pill below the answer, avoiding two controls that perform the same provenance action. */
.image-preview-dialog[open] {
position: fixed;
inset: 0;
display: block;
width: min(
calc(var(--wizon-ai-chat-max-width) + var(--wizon-adaptive-right-panel-width)),
calc(100vw - var(--wds-space-8))
);
height: min(calc(100dvh - var(--wds-space-8)), calc(var(--wizon-ai-chat-max-width) + var(--wds-space-16)));
max-width: none;
max-height: none;
margin: auto;
padding: 0;
overflow: hidden;
border: 0;
border-radius: var(--wizon-ai-radius-popover);
background: var(--wizon-ai-popover-bg);
color: var(--wizon-ai-text-primary);
box-shadow: var(--wizon-ai-dialog-shadow);
opacity: 0;
transform: translate3d(0, var(--wds-space-3), 0) scale(0.985);
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
transform var(--wizon-motion-surface-duration) var(--wizon-motion-spatial-ease);
}
.image-preview-dialog::backdrop {
background: color-mix(in srgb, var(--wds-black) 16%, transparent);
opacity: 0;
transition: opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease);
}
.image-preview-dialog[data-motion-state="open"] {
opacity: 1;
transform: translate3d(0, 0, 0) scale(1);
}
.image-preview-dialog[data-motion-state="open"]::backdrop {
opacity: 1;
}
.image-preview-dialog[data-motion-state="closing"] {
opacity: 0;
transform: translate3d(0, var(--wds-space-3), 0) scale(0.985);
}
.image-preview-dialog[data-motion-state="closing"]::backdrop {
opacity: 0;
}
html[data-theme="dark"] .image-preview-dialog::backdrop {
background: color-mix(in srgb, var(--wds-black) 52%, transparent);
}
.image-preview-dialog:focus {
outline: none;
}
.image-preview-shell {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr) auto;
height: 100%;
min-height: 0;
}
.image-preview-head {
display: grid;
grid-template-columns: minmax(0, 1fr) auto minmax(0, 1fr);
align-items: center;
gap: var(--wds-space-3);
min-height: var(--wizon-ai-action-target-touch);
padding: var(--wds-space-3) var(--wds-space-4);
border-bottom: 1px solid var(--wizon-ai-popover-border);
}
.image-preview-head-actions {
grid-column: 3;
justify-self: end;
display: flex;
align-items: center;
gap: var(--wds-space-2);
}
.image-preview-stage {
position: relative;
display: flex;
min-width: 0;
min-height: 0;
padding: var(--wds-space-5) var(--wds-space-4);
overflow: hidden;
background: var(--wizon-ai-hover-soft-bg);
touch-action: pan-y;
cursor: grab;
user-select: none;
}
.image-preview-stage.is-dragging {
cursor: grabbing;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-stage {
background: color-mix(in srgb, var(--wizon-ai-text-primary) 86%, var(--wizon-ai-popover-bg));
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-carousel-card img {
object-fit: contain;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-carousel-card.is-current {
border: 0;
border-radius: initial;
background: transparent;
box-shadow: none;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-counter,
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-source-link {
display: none;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-head {
grid-template-columns: minmax(0, auto) auto minmax(0, 1fr);
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-caption-copy {
grid-column: 1;
justify-self: start;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-title-line {
justify-content: flex-start;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-title {
flex: 0 1 auto;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-head-actions {
grid-column: 2;
justify-self: start;
}
html:not([data-wizon-viewport="compact"]) .image-preview-dialog[data-image-preview-scope="travel-place"][open] {
width: min(760px, 100vw);
height: min(540px, calc(100dvh - var(--wds-space-8)));
}
.image-preview-header-count {
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-semibold);
white-space: nowrap;
}
.image-preview-stage-control {
position: absolute;
z-index: var(--wizon-layer-sticky, 1);
top: 50%;
display: inline-flex;
align-items: center;
justify-content: center;
inline-size: 44px;
block-size: 44px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: var(--wizon-ai-surface);
cursor: pointer;
transform: translateY(-50%);
}
.image-preview-stage-control[hidden],
.image-preview-carousel-card[hidden] {
display: none;
}
.image-preview-stage-control--previous {
inset-inline-start: var(--wds-space-4);
}
.image-preview-stage-control--next {
inset-inline-end: var(--wds-space-4);
}
.image-preview-stage-control:focus-visible {
outline: 2px solid var(--wds-color-focus-ring);
outline-offset: 2px;
}
.image-preview-disclosure-slot:empty {
display: none;
}
.image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-disclosure-slot {
box-sizing: border-box;
min-block-size: 48px;
border-top: 1px solid var(--wizon-ai-popover-border);
background: var(--wizon-ai-popover-bg);
}
.image-preview-place-source-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wds-space-3);
box-sizing: border-box;
min-block-size: 48px;
padding-inline: var(--wds-space-4);
color: var(--wizon-ai-text-secondary);
font-size: var(--wds-font-size-caption);
}
.image-preview-place-source-row > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-preview-place-source-row a {
display: inline-flex;
align-items: center;
gap: var(--wds-space-1);
color: var(--wds-color-primary);
font-weight: var(--wds-font-weight-semibold);
text-decoration: none;
white-space: nowrap;
}
.image-preview-disclosure {
display: grid;
grid-template-columns: minmax(0, 1.15fr) minmax(0, 1.4fr) auto;
align-items: center;
gap: var(--wds-space-4);
padding: var(--wds-space-3) var(--wds-space-4);
border-top: 1px solid var(--wizon-ai-popover-border);
background: var(--wizon-ai-popover-bg);
}
.image-preview-disclosure-heading,
.image-preview-disclosure-list,
.image-preview-disclosure-list > div {
min-width: 0;
}
.image-preview-disclosure-heading {
display: grid;
gap: var(--wds-space-1);
}
.image-preview-disclosure-heading > span,
.image-preview-disclosure-list dt,
.image-preview-disclosure > p {
color: var(--wizon-ai-text-muted);
font-size: var(--wds-font-size-caption);
}
.image-preview-disclosure-heading strong,
.image-preview-disclosure-list dd {
overflow: hidden;
color: var(--wizon-ai-text-primary);
text-overflow: ellipsis;
white-space: nowrap;
}
.image-preview-disclosure-list {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wds-space-3);
margin: 0;
}
.image-preview-disclosure-list > div {
display: grid;
gap: var(--wds-space-1);
}
.image-preview-disclosure-list dd {
margin: 0;
font-size: var(--wds-font-size-body-2);
}
.image-preview-disclosure-link {
display: inline-flex;
align-items: center;
justify-content: center;
gap: var(--wds-space-1);
min-height: var(--wizon-ai-action-target-touch);
padding-inline: var(--wds-space-3);
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-control);
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
font-weight: var(--wds-font-weight-semibold);
text-decoration: none;
}
.image-preview-disclosure-link svg {
width: var(--wizon-ai-icon-size-md);
height: var(--wizon-ai-icon-size-md);
}
.image-preview-disclosure > p {
grid-column: 1 / -1;
margin: calc(0px - var(--wds-space-2)) 0 0;
}
.image-preview-disclosure-link:focus-visible {
outline: 2px solid var(--wizon-ai-text-primary);
outline-offset: 2px;
}
.image-preview-pagination {
position: absolute;
right: 0;
left: 0;
top: calc(50% + min(39%, calc(var(--wizon-ai-chat-max-width) * 0.34)) + var(--wds-space-3));
display: grid;
place-items: center;
min-height: var(--wds-space-5);
pointer-events: none;
}
.image-preview-counter {
padding: var(--wds-space-1) var(--wds-space-2);
border-radius: var(--wizon-ai-radius-pill);
background: color-mix(in srgb, var(--wds-black) 48%, transparent);
color: var(--wizon-ai-surface);
font-size: var(--wds-font-size-caption);
font-weight: var(--wds-font-weight-semibold);
}
.image-preview-page-dots {
display: flex;
align-items: center;
justify-content: center;
pointer-events: auto;
}
.image-preview-page-dot {
display: grid;
place-items: center;
width: var(--wds-space-5);
height: var(--wds-space-5);
padding: 0;
border: 0;
border-radius: 50%;
background: transparent;
cursor: pointer;
}
.image-preview-page-dot::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: color-mix(in srgb, var(--wizon-ai-text-muted) 18%, transparent);
content: "";
transition:
width var(--wizon-motion-micro-duration) var(--wizon-motion-effect-ease),
height var(--wizon-motion-micro-duration) var(--wizon-motion-effect-ease),
background-color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-ease);
}
.image-preview-page-dot.is-current::before {
width: 8px;
height: 8px;
background: var(--wizon-ai-text-primary);
}
.image-preview-carousel {
position: relative;
width: 100%;
height: 100%;
min-width: 0;
min-height: 0;
}
.image-preview-carousel-card {
position: absolute;
top: 50%;
left: var(--image-preview-rest-left, 50%);
display: flex;
align-items: center;
justify-content: center;
width: var(--image-preview-rest-width, 22%);
height: min(78%, calc(var(--wizon-ai-chat-max-width) * 0.68));
min-width: 0;
min-height: 0;
padding: 0;
overflow: hidden;
border: 1px solid var(--wizon-ai-popover-border);
border-radius: var(--wizon-ai-radius-popover);
background: var(--wizon-ai-popover-bg);
box-shadow: none;
cursor: pointer;
opacity: var(--image-preview-rest-opacity, 0);
pointer-events: none;
transform: translate3d(-50%, -50%, 0) scale(var(--image-preview-rest-scale, 1));
will-change: transform, opacity;
transition:
opacity var(--wizon-motion-surface-duration) var(--wizon-motion-effect-ease),
width calc(var(--wizon-motion-panel-duration) + var(--wizon-motion-surface-duration)) var(--wds-ease-standard),
left calc(var(--wizon-motion-panel-duration) + var(--wizon-motion-surface-duration)) var(--wds-ease-standard),
transform calc(var(--wizon-motion-panel-duration) + var(--wizon-motion-surface-duration)) var(--wds-ease-standard),
box-shadow calc(var(--wizon-motion-panel-duration) + var(--wizon-motion-surface-duration)) var(--wds-ease-standard);
}
.image-preview-carousel-card.is-visible {
pointer-events: auto;
}
.image-preview-carousel-card.is-current {
z-index: var(--wizon-layer-sticky, 1);
pointer-events: auto;
box-shadow: var(--wizon-ai-dialog-shadow);
}
.image-preview-carousel-card.is-wrap-jump {
opacity: 0;
transition: none;
}
.image-preview-carousel-card img {
display: block;
width: 100%;
height: 100%;
min-height: 0;
object-fit: cover;
border-radius: inherit;
background: transparent;
pointer-events: none;
}
.image-preview-stage.is-dragging .image-preview-carousel-card.is-current {
left: var(--image-preview-live-left, 50%);
width: var(--image-preview-live-width, 66%);
opacity: var(--image-preview-live-opacity, 1);
transform: translate3d(-50%, -50%, 0) scale(var(--image-preview-live-scale, 1));
}
.image-preview-stage.is-dragging .image-preview-carousel-card {
left: var(--image-preview-live-left, 50%);
width: var(--image-preview-live-width, 22%);
opacity: var(--image-preview-live-opacity, 0);
transform: translate3d(-50%, -50%, 0) scale(var(--image-preview-live-scale, 1));
transition: none;
}
.image-preview-caption-copy {
grid-column: 2;
justify-self: center;
display: grid;
justify-items: center;
gap: var(--wds-space-1);
max-width: min(46vw, var(--wizon-ai-chat-max-width));
min-width: 0;
text-align: center;
}
.image-preview-title-line {
display: flex;
justify-content: center;
align-items: baseline;
gap: var(--wds-space-2);
min-width: 0;
}
.image-preview-title {
flex: 1 1 auto;
margin: 0;
overflow: hidden;
color: var(--wizon-ai-text-primary);
font-size: var(--wds-font-size-body-2);
font-weight: var(--wds-font-weight-semibold);
line-height: var(--wds-line-height-normal);
text-overflow: ellipsis;
white-space: nowrap;
}
.image-preview-icon-button,
.image-preview-source-link {
display: inline-flex;
align-items: center;
justify-content: center;
min-width: var(--wizon-ai-action-target-touch);
min-height: var(--wizon-ai-action-target-touch);
border: 0;
background: transparent;
color: var(--wizon-ai-text-primary);
opacity: 0.72;
transition: opacity var(--wizon-motion-micro-duration) var(--wizon-motion-effect-ease);
}
.image-preview-icon-button {
padding: 0;
border-radius: var(--wizon-ai-radius-control);
cursor: pointer;
}
.image-preview-mobile-back {
display: none;
}
.image-preview-icon-button svg,
.image-preview-source-link svg {
width: var(--wizon-ai-icon-size-md);
height: var(--wizon-ai-icon-size-md);
}
.image-preview-source-link {
flex: none;
width: var(--wizon-ai-action-target-touch);
padding: 0;
border-radius: var(--wizon-ai-radius-control);
text-decoration: none;
}
.chatgpt-reference-v1 .chatgpt-tooltip-host[data-tooltip-placement="bottom"] > .chatgpt-tooltip {
top: calc(100% + var(--wds-space-2));
left: 50%;
transform: translateX(-50%) translateY(calc(0px - var(--wds-space-1)));
}
.chatgpt-reference-v1 .chatgpt-tooltip-host[data-tooltip-placement="bottom"][data-tooltip-open="true"] > .chatgpt-tooltip {
transform: translateX(-50%) translateY(0);
}
.image-preview-icon-button:focus-visible,
.image-preview-source-link:focus-visible,
.image-preview-carousel-card:focus-visible,
.image-preview-page-dot:focus-visible {
outline: 2px solid var(--wizon-ai-text-primary);
outline-offset: 2px;
}
@media (hover: hover) {
.image-preview-icon-button:hover,
.image-preview-source-link:hover {
opacity: 1;
}
.image-preview-carousel-card.is-before:hover {
opacity: 0.94;
transform: translate3d(-50%, -50%, 0) scale(0.97);
}
.image-preview-carousel-card.is-after:hover {
opacity: 0.94;
transform: translate3d(-50%, -50%, 0) scale(0.97);
}
.image-preview-carousel-card.is-current:hover {
transform: translate3d(-50%, -50%, 0) scale(1.01);
}
.image-preview-page-dot:not(.is-current):hover::before {
background: color-mix(in srgb, var(--wizon-ai-text-muted) 42%, transparent);
}
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] {
border: 0;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"][open] {
background: color-mix(in srgb, var(--wizon-ai-text-primary) 86%, var(--wizon-ai-popover-bg));
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-head {
grid-template-columns: var(--wizon-ai-action-target-sm) minmax(0, 1fr) auto;
padding-top: env(safe-area-inset-top, 0px);
border-bottom-color: color-mix(in srgb, var(--wizon-ai-surface) 16%, transparent);
background: color-mix(in srgb, var(--wizon-ai-text-primary) 86%, var(--wizon-ai-popover-bg));
color: var(--wizon-ai-surface);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-caption-copy {
grid-column: 2;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-head-actions {
grid-column: 3;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] :is(.image-preview-title, .image-preview-header-count, .image-preview-icon-button) {
color: var(--wizon-ai-surface);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-source-link {
display: none;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-stage {
padding-inline: 0;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-pagination {
top: auto;
bottom: var(--wds-space-2);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-page-dot::before {
background: color-mix(in srgb, var(--wizon-ai-surface) 32%, transparent);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-page-dot.is-current::before {
background: var(--wizon-ai-surface);
}
html[data-wizon-viewport="compact"] .image-preview-head {
grid-template-columns: var(--wizon-ai-action-target-sm) minmax(0, 1fr) auto;
height: var(--wds-space-16);
gap: var(--wds-space-4);
min-height: var(--wds-space-16);
padding: 0 var(--wds-space-4);
}
html[data-wizon-viewport="compact"] .image-preview-mobile-back {
grid-column: 1;
align-self: center;
display: inline-flex;
}
html[data-wizon-viewport="compact"] .image-preview-caption-copy {
grid-column: 2;
align-self: stretch;
justify-self: stretch;
display: flex;
align-items: center;
justify-items: start;
max-width: none;
text-align: left;
}
html[data-wizon-viewport="compact"] .image-preview-title-line {
justify-content: flex-start;
align-items: center;
width: 100%;
}
html[data-wizon-viewport="compact"] .image-preview-title {
font-size: var(--wds-font-size-body-2);
font-weight: 600;
line-height: var(--wds-line-height-label, 20px);
}
html[data-wizon-viewport="compact"] .image-preview-head-actions {
grid-column: 3;
align-self: center;
}
html[data-wizon-viewport="compact"] .image-preview-desktop-close {
display: none;
}
html[data-wizon-viewport="compact"] .image-preview-mobile-back,
html[data-wizon-viewport="compact"] .image-preview-source-link {
width: var(--wizon-ai-action-target-sm);
min-width: var(--wizon-ai-action-target-sm);
height: var(--wizon-ai-action-target-sm);
min-height: var(--wizon-ai-action-target-sm);
}
html[data-wizon-viewport="compact"] .image-preview-stage {
padding: var(--wds-space-3);
}
html[data-wizon-viewport="compact"] .image-preview-stage-control--previous {
inset-inline-start: var(--wds-space-3);
}
html[data-wizon-viewport="compact"] .image-preview-stage-control--next {
inset-inline-end: var(--wds-space-3);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-disclosure-slot {
padding-bottom: env(safe-area-inset-bottom, 0px);
border-top-color: color-mix(in srgb, var(--wizon-ai-surface) 16%, transparent);
background: color-mix(in srgb, var(--wizon-ai-text-primary) 86%, var(--wizon-ai-popover-bg));
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-place-source-row {
color: color-mix(in srgb, var(--wizon-ai-surface) 68%, transparent);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-head {
box-sizing: border-box;
min-block-size: calc(56px + env(safe-area-inset-top, 0px));
height: calc(56px + env(safe-area-inset-top, 0px));
padding: env(safe-area-inset-top, 0px) var(--wds-space-4) 0;
}
html[data-wizon-viewport="compact"] .image-preview-disclosure {
grid-template-columns: minmax(0, 1fr) auto;
gap: var(--wds-space-2) var(--wds-space-3);
padding: var(--wds-space-3) var(--wds-space-4) var(--wds-space-4);
}
html[data-wizon-viewport="compact"] .image-preview-disclosure-heading,
html[data-wizon-viewport="compact"] .image-preview-disclosure-list {
grid-column: 1 / -1;
}
html[data-wizon-viewport="compact"] .image-preview-disclosure-link {
grid-column: 2;
grid-row: 3 / span 2;
align-self: end;
}
html[data-wizon-viewport="compact"] .image-preview-disclosure > p {
grid-column: 1;
margin: 0;
}
html[data-wizon-viewport="compact"] .image-preview-pagination {
top: calc(50% + min(20vw, 120px) + var(--wds-space-3));
}
html[data-wizon-viewport="compact"] .image-preview-carousel-card {
height: min(40vw, 240px);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-carousel-card.is-current {
height: min(64vw, 360px);
}
html[data-wizon-viewport="compact"] .image-preview-source-link {
align-self: center;
}
@media (prefers-reduced-motion: reduce) {
.image-preview-dialog[open],
.image-preview-dialog::backdrop,
.image-preview-carousel-card,
.image-preview-page-dot::before {
transition: none;
}
}
/* RC22 · Common Media Viewer
One full-screen media surface is shared by travel-place and generic visual answers.
Controls float above the media so the image remains the first visual layer. */
.image-preview-dialog[open] {
inset: 0;
width: 100vw;
height: 100dvh;
margin: 0;
border-radius: 0;
background: #08090b;
color: #fff;
box-shadow: none;
transform: none;
}
html:not([data-wizon-viewport="compact"]) .image-preview-dialog[data-image-preview-scope="travel-place"][open] {
width: 100vw;
height: 100dvh;
}
.image-preview-dialog::backdrop,
html[data-theme="dark"] .image-preview-dialog::backdrop {
background: rgb(0 0 0 / 78%);
}
.image-preview-dialog[data-motion-state="open"],
.image-preview-dialog[data-motion-state="closing"] {
transform: none;
}
.image-preview-shell {
display: block;
background: #08090b;
}
.image-preview-dialog[open] .image-preview-head {
position: absolute;
z-index: 4;
inset: 0 0 auto;
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
min-height: 72px;
padding: 16px 16px 16px 28px;
border: 0;
background: linear-gradient(180deg, rgb(8 9 11 / 92%) 0%, rgb(8 9 11 / 0%) 100%);
color: #fff;
pointer-events: none;
}
.image-preview-dialog[open] .image-preview-caption-copy {
grid-column: 1;
justify-self: start;
align-self: start;
max-width: min(60vw, 720px);
color: #fff;
text-align: left;
pointer-events: auto;
}
.image-preview-dialog[open] .image-preview-title-line {
justify-content: flex-start;
align-items: center;
min-height: 48px;
}
.image-preview-dialog[open] .image-preview-title {
color: #fff;
font-size: var(--wds-font-size-body-2);
font-weight: var(--wds-font-weight-semibold);
}
.image-preview-dialog[open] .image-preview-header-count {
color: rgb(255 255 255 / 68%);
}
.image-preview-dialog[open] .image-preview-head-actions {
grid-column: 2;
justify-self: end;
align-self: start;
gap: 8px;
pointer-events: auto;
}
.image-preview-dialog[open] .image-preview-icon-button {
width: 48px;
min-width: 48px;
height: 48px;
min-height: 48px;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
opacity: 0.88;
backdrop-filter: none;
}
.image-preview-dialog[open] .image-preview-mobile-back {
display: none;
}
.image-preview-dialog[open] .image-preview-stage {
position: absolute;
inset: 0;
display: block;
padding: 84px 92px 72px;
overflow: hidden;
background: #08090b;
cursor: zoom-in;
touch-action: none;
}
.image-preview-dialog[data-image-preview-zoomed="true"] .image-preview-stage {
cursor: grab;
}
.image-preview-dialog[data-image-preview-zoomed="true"] .image-preview-stage.is-panning {
cursor: grabbing;
}
.image-preview-dialog[open] .image-preview-carousel {
width: 100%;
height: 100%;
}
.image-preview-dialog[open] .image-preview-carousel-card,
.image-preview-dialog[open] .image-preview-carousel-card.is-current,
.image-preview-dialog[open][data-image-preview-scope="travel-place"] .image-preview-carousel-card.is-current {
position: absolute;
inset: 0;
display: none;
width: 100%;
height: 100%;
padding: 0;
overflow: visible;
border: 0;
border-radius: 0;
background: transparent;
box-shadow: none;
opacity: 0;
pointer-events: none;
transform: none;
transition: none;
}
.image-preview-dialog[open] .image-preview-carousel-card.is-current,
.image-preview-dialog[open][data-image-preview-scope="travel-place"] .image-preview-carousel-card.is-current {
display: flex;
opacity: 1;
pointer-events: auto;
}
.image-preview-dialog[open] .image-preview-media {
display: block;
width: auto;
max-width: 100%;
height: auto;
max-height: 100%;
border: 0;
border-radius: 0;
background: transparent;
object-fit: contain;
pointer-events: auto;
transform:
translate3d(var(--image-preview-pan-x, 0), var(--image-preview-pan-y, 0), 0)
scale(var(--image-preview-scale, 1));
transform-origin: center;
transition: transform 120ms var(--wizon-motion-effect-ease);
user-select: none;
will-change: transform;
}
.image-preview-dialog[open] .image-preview-media--video {
min-width: min(920px, 72vw);
background: #000;
}
.image-preview-dialog[open] .image-preview-stage.is-panning .image-preview-media,
.image-preview-dialog[open] .image-preview-stage.is-dragging .image-preview-media {
transition: none;
}
.image-preview-dialog[open] .image-preview-pagination {
display: none;
}
.image-preview-dialog[open] .image-preview-stage-control {
z-index: 3;
width: 52px;
height: 52px;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
opacity: 0.88;
backdrop-filter: none;
transition: opacity var(--wizon-motion-micro-duration) var(--wizon-motion-effect-ease);
}
.image-preview-dialog[open] .image-preview-stage-control--previous {
inset-inline-start: 24px;
}
.image-preview-dialog[open] .image-preview-stage-control--next {
inset-inline-end: 24px;
}
.image-preview-zoom-controls {
position: absolute;
z-index: 4;
right: 24px;
bottom: 72px;
display: grid;
width: 52px;
overflow: hidden;
border: 1px solid rgb(255 255 255 / 12%);
border-radius: 26px;
background: rgb(16 18 22 / 76%);
color: #fff;
backdrop-filter: blur(12px);
}
.image-preview-zoom-button {
display: inline-grid;
place-items: center;
width: 52px;
min-height: 52px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: inherit;
cursor: pointer;
}
.image-preview-zoom-value {
display: grid;
place-items: center;
width: 52px;
min-height: 36px;
border-block: 1px solid rgb(255 255 255 / 10%);
color: rgb(255 255 255 / 72%);
font-size: 11px;
font-variant-numeric: tabular-nums;
line-height: 1;
pointer-events: none;
}
.image-preview-zoom-button svg {
width: 20px;
height: 20px;
}
.image-preview-zoom-button:disabled {
color: rgb(255 255 255 / 28%);
cursor: default;
}
.image-preview-dialog[data-image-preview-media-type="video"] .image-preview-zoom-controls {
display: none;
}
.image-preview-dialog[open] .image-preview-disclosure-slot {
position: absolute;
z-index: 4;
top: var(--image-preview-source-top, 0);
right: auto;
bottom: auto;
left: var(--image-preview-source-left, 0);
display: block;
width: var(--image-preview-source-width, 0);
max-width: none;
min-height: 40px;
padding: 0;
border: 0;
background: transparent;
color: rgb(255 255 255 / 66%);
pointer-events: auto;
visibility: hidden;
}
.image-preview-dialog[open] .image-preview-disclosure-slot[data-image-preview-source-positioned="true"] {
visibility: visible;
}
.image-preview-dialog[open] .image-preview-source-row {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wds-space-3);
width: 100%;
min-height: 40px;
padding: var(--wds-space-2) 0;
border: 0;
background: transparent;
font-size: var(--wds-font-size-caption);
line-height: 1.4;
}
.image-preview-dialog[open] .image-preview-source-link-text {
display: flex;
align-items: center;
align-self: stretch;
min-width: 0;
color: rgb(255 255 255 / 66%);
text-decoration: none;
transition: color var(--wizon-motion-micro-duration) var(--wizon-motion-effect-ease);
}
.image-preview-dialog[open] .image-preview-source-link-text--static {
cursor: default;
}
.image-preview-dialog[open] .image-preview-source-label {
min-width: 0;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
.image-preview-dialog[open] .image-preview-source-share {
display: inline-grid;
flex: none;
place-items: center;
width: 40px;
height: 40px;
padding: 0;
border: 0;
border-radius: 0;
background: transparent;
color: #fff;
cursor: pointer;
opacity: 0.88;
transition: opacity var(--wizon-motion-micro-duration) var(--wizon-motion-effect-ease);
}
.image-preview-dialog[open] .image-preview-source-share svg {
width: 18px;
height: 18px;
}
.image-preview-gesture-hint {
display: none;
}
.image-preview-dialog[open] :is(
.image-preview-icon-button,
.image-preview-stage-control,
.image-preview-zoom-button,
.image-preview-source-link-text,
.image-preview-source-share
):focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (hover: hover) {
.image-preview-dialog[open] :is(
.image-preview-icon-button,
.image-preview-stage-control,
.image-preview-source-share
):hover {
opacity: 1;
}
.image-preview-dialog[open] .image-preview-source-link-text:hover {
color: #fff;
}
.image-preview-dialog[open] .image-preview-zoom-button:not(:disabled):hover {
background: rgb(36 39 46 / 72%);
}
.image-preview-dialog[open] .image-preview-carousel-card.is-current:hover {
transform: none;
}
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open],
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"][open] {
width: 100vw;
height: 100dvh;
background: #08090b;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-head,
html[data-wizon-viewport="compact"] .image-preview-dialog[data-image-preview-scope="travel-place"] .image-preview-head {
grid-template-columns: 44px minmax(0, 1fr) auto;
box-sizing: border-box;
height: calc(100px + env(safe-area-inset-top, 0px));
min-height: calc(100px + env(safe-area-inset-top, 0px));
padding: calc(44px + env(safe-area-inset-top, 0px)) 8px 0;
border: 0;
background: linear-gradient(180deg, rgb(8 9 11 / 96%) 0%, rgb(8 9 11 / 0%) 100%);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-mobile-back {
grid-column: 1;
display: inline-flex;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-caption-copy {
grid-column: 2;
align-self: start;
padding-inline: 8px;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-head-actions {
grid-column: 3;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-desktop-close {
display: inline-flex;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] :is(
.image-preview-icon-button
) {
width: 44px;
min-width: 44px;
height: 44px;
min-height: 44px;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-stage {
padding: calc(112px + env(safe-area-inset-top, 0px)) 0 calc(130px + env(safe-area-inset-bottom, 0px));
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-stage-control {
display: none;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-media {
max-width: 100%;
max-height: 100%;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open][data-image-preview-scope="travel-place"] .image-preview-carousel-card.is-current {
width: 100%;
height: 100%;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-media--video {
min-width: 100%;
}
html[data-wizon-viewport="compact"] .image-preview-zoom-controls {
right: 12px;
bottom: calc(150px + env(safe-area-inset-bottom, 0px));
width: 48px;
border-radius: 24px;
}
html[data-wizon-viewport="compact"] .image-preview-zoom-button {
width: 48px;
min-height: 48px;
}
html[data-wizon-viewport="compact"] .image-preview-zoom-value {
width: 48px;
min-height: 36px;
font-size: 10px;
}
html[data-wizon-viewport="compact"] .image-preview-gesture-hint {
position: absolute;
z-index: 3;
bottom: calc(104px + env(safe-area-inset-bottom, 0px));
left: 50%;
display: block;
min-width: 172px;
margin: 0;
padding: 9px 14px;
border-radius: var(--ds-radius-pill, 999px);
background: rgb(16 18 22 / 72%);
color: rgb(255 255 255 / 88%);
font-size: 12px;
font-weight: var(--wds-font-weight-medium);
text-align: center;
transform: translateX(-50%);
pointer-events: none;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-disclosure-slot {
min-height: 44px;
padding-bottom: 0;
border: 0;
background: transparent;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-source-row {
min-height: 44px;
padding: 0;
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-source-link-text {
padding-inline-start: var(--wds-space-4);
}
html[data-wizon-viewport="compact"] .image-preview-dialog[open] .image-preview-source-share {
width: 44px;
height: 44px;
}
@media (prefers-reduced-motion: reduce) {
.image-preview-dialog[open] .image-preview-media {
transition: none;
}
}
/* ---- Sources pill + drawer (20260709) ----
접힌 요약(파비콘 클러스터+출처 N) → 드로어 근거(카드 리스트) → 원문 링크 세부, doc 82의
요약→근거→세부 순서. 데스크톱=우측 슬라이드 오버, 모바일=2-detent 바텀시트(ChatGPT 패리티). */
.source-pill {
display: inline-flex;
align-items: center;
gap: 8px;
padding: 5px 12px 5px 7px;
border: 1px solid var(--cg-menu-border, rgba(13, 13, 13, 0.08));
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-bg, #ffffff);
font: inherit;
font-size: var(--ds-text-caption-12);
color: var(--cg-text-soft, #5d5d5d);
cursor: pointer;
transition: background var(--wds-duration-fast) ease, border-color var(--wds-duration-fast) ease;
}
.source-pill:hover {
background: var(--cg-hover-soft, rgba(13, 13, 13, 0.04));
border-color: var(--cg-menu-border, rgba(13, 13, 13, 0.14));
}
.source-pill:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring, #0d0d0d);
outline-offset: 2px;
}
.travel-guidebook-card .source-pill {
min-height: 44px;
}
.source-pill-favs {
display: inline-flex;
align-items: center;
}
/* Overlapping favicon cluster — circular, ring-separated (Perplexity/ChatGPT pattern). */
.source-pill-favs .news-fav {
border-radius: var(--ds-radius-pill, 999px);
box-shadow: 0 0 0 2px var(--cg-bg, #ffffff);
}
.source-pill-favs .news-fav + .news-fav {
margin-left: -5px;
}
/* "+N" overflow — a solid ink pill (not the old low-contrast gray that read as barely legible),
set apart from the favicons rather than overlapping them so the number is clear. */
.source-pill-more {
display: grid;
place-items: center;
min-width: 18px;
height: 18px;
margin-left: 5px;
padding: 0 5px;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-text, #0d0d0d);
font-size: 10px;
font-weight: 600;
color: var(--cg-bg, #ffffff);
}
.source-pill-label {
font-weight: 500;
}
.source-pill-row {
margin-top: 10px;
}
.memory-use-rationale-shadow {
display: flex;
align-items: flex-start;
gap: 8px;
margin-top: 10px;
padding: 9px 11px;
border: 1px solid color-mix(in srgb, var(--ad-blue) 20%, transparent);
border-radius: var(--ds-radius-md, 10px);
background: color-mix(in srgb, var(--ad-blue) 5%, transparent);
color: var(--cg-text);
font-size: var(--cg-text-meta-size);
line-height: 1.45;
}
.memory-use-rationale-shadow__icon,
.memory-use-rationale-shadow__icon .wds-inline-icon {
flex: 0 0 auto;
width: 16px;
height: 16px;
color: var(--ad-blue);
}
.memory-use-rationale-shadow__copy {
display: grid;
gap: 1px;
min-width: 0;
}
.memory-use-rationale-shadow__copy strong {
font-size: var(--cg-text-meta-size);
font-weight: var(--cg-text-label-active-weight);
}
.memory-use-rationale-shadow__copy > span {
color: var(--cg-text-soft);
}
.memory-use-rationale-shadow__version {
flex: 0 0 auto;
margin-left: auto;
color: var(--cg-text-soft);
font-variant-numeric: tabular-nums;
white-space: nowrap;
}
@media (max-width: 520px) {
.memory-use-rationale-shadow {
align-items: flex-start;
}
.memory-use-rationale-shadow__version {
display: none;
}
}
/* Doc-source avatars (Phase 4 RAG): a document glyph stands in for the favicon on the pill,
drawer card, and inline citation chip. */
.source-pill-doc {
display: grid;
place-items: center;
width: 18px;
height: 18px;
color: var(--cg-text-soft, #5d5d5d);
}
.source-pill-doc .wds-inline-icon {
width: 15px;
height: 15px;
}
.citation-ref-doc {
display: inline-flex;
}
.citation-ref-doc .wds-inline-icon {
width: 12px;
height: 12px;
}
/* Inline citation chip — a source-colored number + that source's favicon (user request: color-
code the number, show the favicon instead of a raw URL). Deep-links to the drawer card. */
.citation-ref {
display: inline-flex;
align-items: center;
gap: 3px;
height: 17px;
margin: 0 2px;
padding: 0 5px 0 4px;
vertical-align: baseline;
transform: translateY(-1px);
border: 1px solid color-mix(in srgb, var(--cite-color, #5d5d5d) 30%, transparent);
border-radius: var(--ds-radius-pill, 999px);
background: color-mix(in srgb, var(--cite-color, #5d5d5d) 10%, transparent);
font: inherit;
line-height: 1;
cursor: pointer;
transition: background var(--wds-duration-fast) ease, border-color var(--wds-duration-fast) ease;
}
.citation-ref-num {
color: var(--cite-color, #5d5d5d);
font-size: var(--ds-text-caption-12);
font-weight: 600;
}
.citation-ref-fav {
width: 12px;
height: 12px;
border-radius: var(--ds-radius-2xs, 3px);
object-fit: contain;
}
.citation-ref:hover {
background: color-mix(in srgb, var(--cite-color, #5d5d5d) 20%, transparent);
border-color: color-mix(in srgb, var(--cite-color, #5d5d5d) 55%, transparent);
}
.citation-ref:focus-visible {
outline: 2px solid var(--cite-color, var(--cg-focus-visible-ring, #0d0d0d));
outline-offset: 1px;
}
/* Paragraph-end source tag (doc 161 P2-1): ChatGPT-style neutral pill at the end of a
paragraph/list item — favicon(s) or doc glyph + source name (+N). Replaces the inline
numbered chips of that block; table cells keep the compact chips. */
.citation-tag {
display: inline-flex;
align-items: center;
gap: 5px;
height: 20px;
margin: 0 0 0 6px;
padding: 0 8px 0 4px;
/* The tag (20px) is taller than the body text, so a tall inline box needs an explicit vertical
anchor. vertical-align:middle centers it on the parent's x-height (baseline + x-height/2).
The nudge is NOT eyeballed: it's the measured gap between the font's Korean-ink optical center
and that x-height midpoint — (5.64px − 4.24px) / 16px ≈ 0.088em for Pretendard. Being a font
metric (em, not px), it holds for every sentence and every text size (verified: <0.02px off,
<0.01px drift across content/size). doc 164 §후속4. */
vertical-align: middle;
transform: translateY(-0.088em);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-hover-soft, var(--surface-2));
font: inherit;
line-height: 1;
cursor: pointer;
transition: background var(--wds-duration-fast) ease, border-color var(--wds-duration-fast) ease;
}
.citation-tag:hover {
background: var(--cg-hover, var(--surface-2));
border-color: var(--cg-muted, var(--muted));
}
/* doc 161 §7 B3: document source tags read as blue-tint pills everywhere (Blue = 문서 축);
web tags stay neutral + colored favicon. Unifies the small-tag radius/color language. */
.citation-tag[data-kind="doc"] {
border-color: color-mix(in srgb, var(--ad-blue) 16%, transparent);
background: var(--ad-blue-tint);
}
.citation-tag[data-kind="doc"] .citation-tag-name {
color: var(--ad-blue);
}
.citation-tag[data-kind="doc"] .citation-tag-doc {
color: var(--ad-blue);
}
.citation-tag[data-kind="doc"]:hover {
background: var(--ad-blue-tint);
border-color: color-mix(in srgb, var(--ad-blue) 38%, transparent);
}
.citation-tag:focus-visible {
/* Strong solid ring — the faint --cg-focus-ring (16% alpha) fails 3:1 and would be a
downgrade from the saturated ring of the .citation-ref chips this tag replaces. */
outline: 2px solid var(--cg-text, #0d0d0d);
outline-offset: 1px;
}
.citation-tag-favs {
display: inline-flex;
align-items: center;
}
.citation-tag-favs > * + * {
margin-left: -4px;
}
.citation-tag-fav {
width: 14px;
height: 14px;
border-radius: 4px;
box-shadow: 0 0 0 1.5px var(--cg-surface, #fff);
}
.citation-tag-doc {
display: inline-flex;
color: var(--cg-text-soft, var(--muted));
}
.citation-tag-doc .wds-inline-icon {
width: 13px;
height: 13px;
}
.citation-tag-name {
max-width: 150px;
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--cg-text-soft, var(--muted));
font-size: var(--ds-text-caption-12);
font-weight: 500;
}
.citation-tag-more {
color: var(--cg-text-soft, var(--muted));
font-size: var(--ds-text-micro-11);
font-weight: 600;
}
/* Citation drift is attached only to the rendered claim block that owns the affected source.
The comparison itself stays server-side; this surface carries status + safe source indices only. */
.has-citation-drift {
border-radius: var(--ds-radius-sm, 8px);
background: color-mix(in srgb, var(--cg-warning-fg) 8%, transparent);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cg-warning-fg) 78%, transparent);
}
.has-citation-drift--missing {
background: color-mix(in srgb, var(--cg-danger-fg) 7%, transparent);
box-shadow: inset 3px 0 0 color-mix(in srgb, var(--cg-danger-fg) 78%, transparent);
}
.citation-drift-notice {
display: inline-flex;
align-items: center;
gap: 5px;
margin-left: 6px;
vertical-align: middle;
color: var(--cg-warning-fg);
font-size: var(--ds-text-micro-11);
font-weight: 600;
}
.citation-drift-notice[data-tone="danger"] {
color: var(--cg-danger-fg);
}
.citation-drift-label {
white-space: nowrap;
}
.citation-drift-regenerate {
min-height: 24px;
padding: 2px 7px;
border: 1px solid currentColor;
border-radius: var(--ds-radius-pill, 999px);
background: var(--cg-surface, var(--surface));
color: inherit;
font: inherit;
cursor: pointer;
}
.citation-drift-regenerate:hover:not(:disabled) {
background: color-mix(in srgb, currentColor 9%, var(--cg-surface, var(--surface)));
}
.citation-drift-regenerate:focus-visible {
outline: 2px solid currentColor;
outline-offset: 2px;
}
.citation-drift-regenerate:disabled {
cursor: progress;
opacity: 0.68;
}
.citation-drift-notice.is-reviewed {
color: var(--cg-success);
}
.citation-revision-applied {
display: grid;
gap: var(--wds-space-1);
margin: var(--wds-space-2) 0;
padding: var(--wds-space-3) var(--wds-space-4);
border-left: 3px solid var(--cg-success);
border-radius: var(--ds-radius-sm);
background: var(--ad-green-tint);
}
.citation-revision-applied > strong {
color: var(--cg-success);
font-size: var(--ds-text-caption-12);
font-weight: var(--wds-font-weight-semibold);
}
.citation-revision-applied > p {
margin: 0;
color: var(--cg-text);
font-size: var(--ds-text-body-14);
line-height: var(--wds-line-height-normal);
overflow-wrap: anywhere;
}
.citation-health-focus {
box-shadow: inset 0 0 0 2px var(--cg-focus-visible-ring);
}
/* Conversation-level evidence health reuses the trust dock. It contains only answer text and
safe ordinals; document/version references remain in JS state and the authorized API lane. */
.citation-health-summary {
display: grid;
gap: var(--wds-space-4);
padding: var(--wds-space-5);
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-lg);
background: var(--ad-blue-tint);
}
.citation-health-summary[data-status="attention"] {
background: var(--ad-amber-tint);
}
.citation-health-summary[data-status="approval"] {
border-color: var(--ad-blue);
background: var(--ad-blue-tint);
}
.citation-health-summary[data-status="reviewed"] {
background: var(--ad-green-tint);
}
.citation-health-summary[data-status="unavailable"] {
border-color: var(--cg-danger-fg);
background: var(--cg-hover-soft);
}
.citation-health-summary-copy {
display: grid;
gap: var(--wds-space-1);
}
.citation-health-summary-copy > span {
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
font-weight: var(--wds-font-weight-medium);
}
.citation-health-summary-copy > strong {
color: var(--cg-text);
font-size: var(--ds-text-title-18);
font-weight: var(--wds-font-weight-semibold);
}
.citation-health-summary-copy > p,
.citation-health-result {
margin: 0;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
line-height: var(--wds-line-height-normal);
}
.citation-health-counts {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wds-space-2);
}
.citation-health-counts > span {
display: grid;
gap: var(--wds-space-1);
padding: var(--wds-space-3);
border-radius: var(--ds-radius-sm);
background: var(--cg-surface);
color: var(--cg-muted);
font-size: var(--ds-text-micro-11);
text-align: center;
}
.citation-health-counts strong {
color: var(--cg-text);
font-size: var(--ds-text-body-15);
}
.citation-health-actions,
.citation-health-claim-actions {
display: flex;
flex-wrap: wrap;
gap: var(--wds-space-2);
}
.citation-health-actions button,
.citation-health-claim-actions button {
min-height: var(--wizon-ai-action-target-sm);
padding: var(--wds-space-2) var(--wds-space-3);
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-pill);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: var(--wds-font-weight-medium);
cursor: pointer;
}
.citation-health-actions button:hover:not(:disabled),
.citation-health-claim-actions button:hover:not(:disabled) {
background: var(--cg-hover);
}
.citation-health-actions button:focus-visible,
.citation-health-claim-actions button:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring);
outline-offset: 2px;
}
.citation-health-actions button:disabled,
.citation-health-claim-actions button:disabled {
cursor: not-allowed;
opacity: 0.6;
}
.citation-health-actions .citation-health-primary {
border-color: var(--cg-send-bg);
background: var(--cg-send-bg);
color: var(--cg-send-fg);
}
.citation-health-list {
display: grid;
gap: var(--wds-space-3);
}
.citation-recovery-steps {
display: grid;
grid-template-columns: repeat(3, minmax(0, 1fr));
gap: var(--wds-space-2);
margin: var(--wds-space-3) 0;
padding: 0;
list-style: none;
}
.citation-recovery-steps li {
display: grid;
justify-items: center;
gap: var(--wds-space-1);
min-width: 0;
padding: var(--wds-space-3) var(--wds-space-2);
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-md);
background: var(--cg-surface);
color: var(--cg-muted);
font-size: var(--ds-text-micro-11);
text-align: center;
}
.citation-recovery-steps li > span {
display: grid;
place-items: center;
width: 22px;
height: 22px;
border-radius: var(--ds-radius-pill);
background: var(--cg-hover-soft);
font-weight: var(--wds-font-weight-semibold);
}
.citation-recovery-steps li[data-status="current"] {
border-color: var(--ad-blue);
color: var(--ad-blue);
background: var(--ad-blue-tint);
}
.citation-recovery-steps li[data-status="complete"] {
color: var(--cg-success);
background: var(--ad-green-tint);
}
.citation-impact-review-list {
display: grid;
gap: 10px;
margin-top: 12px;
}
.citation-impact-review-item {
display: grid;
gap: 12px;
padding: 14px;
border: 1px solid color-mix(in srgb, currentColor 12%, transparent);
border-radius: var(--wizon-ai-menu-radius);
background: color-mix(in srgb, var(--ad-amber) 5%, transparent);
}
.citation-impact-review-item__copy {
min-width: 0;
display: grid;
gap: 4px;
}
.citation-impact-review-item__copy strong {
overflow: hidden;
color: var(--cg-text);
font-size: var(--ds-text-body-14);
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
.citation-impact-review-item__copy small,
.citation-impact-review-item__copy p {
margin: 0;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
line-height: 18px;
}
.citation-impact-review-item__actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
.citation-impact-review-item__actions button {
min-height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, currentColor 16%, transparent);
border-radius: var(--wizon-ai-radius-control);
background: transparent;
color: var(--cg-text);
cursor: pointer;
}
.citation-impact-review-item__actions button:disabled {
cursor: default;
opacity: 0.5;
}
.citation-health-claim {
display: grid;
gap: var(--wds-space-3);
padding: var(--wds-space-4);
border: 1px solid var(--cg-menu-border);
border-left-color: var(--cg-warning-fg);
border-radius: var(--ds-radius-md);
background: var(--cg-surface);
}
.citation-health-claim[data-status="missing"] {
border-left-color: var(--cg-danger-fg);
}
.citation-health-claim[data-status="approval"] {
border-left-color: var(--ad-blue);
}
.citation-health-claim.is-reviewed {
border-left-color: var(--cg-success);
}
.citation-health-claim > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wds-space-2);
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
.citation-health-claim > header strong {
color: var(--cg-warning-fg);
font-weight: var(--wds-font-weight-semibold);
}
.citation-health-claim[data-status="missing"] > header strong {
color: var(--cg-danger-fg);
}
.citation-health-claim[data-status="approval"] > header strong {
color: var(--ad-blue);
}
.citation-health-claim.is-reviewed > header strong {
color: var(--cg-success);
}
.citation-health-claim > p {
display: -webkit-box;
margin: 0;
overflow: hidden;
color: var(--cg-text);
font-size: var(--ds-text-body-14);
line-height: var(--wds-line-height-normal);
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 3;
}
.citation-health-empty {
display: grid;
justify-items: center;
gap: var(--wds-space-2);
padding: var(--wds-space-8) var(--wds-space-4);
color: var(--cg-muted);
text-align: center;
}
.citation-health-empty > span,
.citation-health-empty > span svg {
width: 28px;
height: 28px;
}
.citation-health-empty > strong {
color: var(--cg-text);
font-size: var(--ds-text-body-15);
}
.citation-health-empty > p {
margin: 0;
font-size: var(--ds-text-caption-12);
}
.citation-revision-head {
display: grid;
gap: var(--wds-space-2);
padding: var(--wds-space-4);
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-md);
background: var(--ad-blue-tint);
}
.citation-revision-head > span,
.citation-revision-head > p {
margin: 0;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
line-height: var(--wds-line-height-normal);
}
.citation-revision-head > strong {
color: var(--ad-blue);
font-size: var(--ds-text-title-18);
font-weight: var(--wds-font-weight-semibold);
}
.citation-revision-head[data-status="accepted"] {
background: var(--ad-green-tint);
}
.citation-revision-head[data-status="accepted"] > strong {
color: var(--cg-success);
}
.citation-revision-head[data-status="rejected"] {
background: var(--cg-hover-soft);
}
.citation-revision-head[data-status="rejected"] > strong {
color: var(--cg-muted);
}
.citation-revision-compare {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: var(--wds-space-3);
margin-top: var(--wds-space-4);
}
.citation-revision-compare > section {
display: grid;
align-content: start;
gap: var(--wds-space-3);
min-width: 0;
padding: var(--wds-space-4);
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-md);
background: var(--cg-surface);
}
.citation-revision-compare > .citation-revision-candidate {
border-color: var(--ad-blue);
background: var(--ad-blue-tint);
}
.citation-revision-compare header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--wds-space-2);
color: var(--cg-text);
font-size: var(--ds-text-caption-12);
font-weight: var(--wds-font-weight-semibold);
}
.citation-revision-compare header small {
color: var(--cg-muted);
font-size: var(--ds-text-micro-11);
font-weight: var(--wds-font-weight-regular);
}
.citation-revision-compare p {
margin: 0;
color: var(--cg-text);
font-size: var(--ds-text-body-14);
line-height: var(--wds-line-height-normal);
overflow-wrap: anywhere;
white-space: pre-wrap;
}
.citation-revision-actions {
display: flex;
justify-content: flex-end;
gap: var(--wds-space-2);
margin-top: var(--wds-space-4);
}
.citation-revision-actions button {
min-height: var(--wizon-ai-action-target-sm);
padding: var(--wds-space-2) var(--wds-space-4);
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-pill);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-caption-12);
font-weight: var(--wds-font-weight-medium);
cursor: pointer;
}
.citation-revision-actions button:hover:not(:disabled) {
background: var(--cg-hover);
}
.citation-revision-actions button:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring);
outline-offset: 2px;
}
.citation-revision-actions button:disabled {
cursor: wait;
opacity: 0.6;
}
.citation-revision-actions .citation-health-primary {
border-color: var(--cg-send-bg);
background: var(--cg-send-bg);
color: var(--cg-send-fg);
}
.citation-revision-decision {
margin: var(--wds-space-4) 0 0;
padding: var(--wds-space-3) var(--wds-space-4);
border-radius: var(--ds-radius-sm);
background: var(--cg-hover-soft);
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
line-height: var(--wds-line-height-normal);
}
@media (max-width: 520px) {
.citation-drift-notice {
margin: 6px 0 0;
}
.citation-health-counts {
grid-template-columns: 1fr;
}
.citation-health-actions,
.citation-health-claim-actions,
.citation-revision-actions {
display: grid;
}
.citation-health-actions button,
.citation-health-claim-actions button,
.citation-revision-actions button {
width: 100%;
}
.citation-revision-compare {
grid-template-columns: 1fr;
}
.citation-recovery-steps {
grid-template-columns: 1fr;
}
}
/* Citation hover preview (Phase 3, desktop) — a pointer-transparent floating card that peeks
the source on hover/focus without opening the drawer. Positioned in JS; fixed to the
viewport. Touch devices never trigger it (fine-pointer + hover gated in JS). */
.citation-preview {
position: fixed;
z-index: 210;
width: min(320px, calc(100vw - 24px));
padding: 8px;
border: 1px solid var(--cg-menu-border, rgba(13, 13, 13, 0.1));
border-radius: var(--ds-radius-md, 14px);
background: var(--cg-surface);
color: var(--cg-text);
box-shadow: 0 14px 40px rgba(13, 13, 13, 0.18);
/* doc 161 §7 B4: the preview is now interactive (← → pager) — clickable, kept open while
hovered via a hide grace period. Touch never triggers it (fine-pointer gated in JS). */
pointer-events: auto;
}
.citation-preview[hidden] {
display: none;
}
/* Card body reuses .source-card-v2 (same anatomy as drawer/panel). Strip its own shadow here —
the preview frame supplies the surround. */
.citation-preview .citation-preview-card {
padding: 8px 6px 6px;
box-shadow: none;
}
.citation-preview .citation-preview-card:hover {
box-shadow: none;
}
/* ← → n/m pager: only when a tag covers multiple sources. */
.citation-preview-pager {
display: flex;
align-items: center;
gap: 4px;
padding: 2px 6px 6px;
}
.citation-preview-nav {
display: inline-grid;
place-items: center;
width: 24px;
height: 24px;
border: none;
border-radius: 7px;
background: transparent;
color: var(--cg-text-soft, var(--muted));
cursor: pointer;
}
.citation-preview-nav:hover {
background: var(--cg-hover-soft, rgba(13, 13, 13, 0.06));
}
.citation-preview-nav:focus-visible {
outline: 2px solid var(--cg-focus-ring, var(--accent));
outline-offset: 1px;
}
.citation-preview-nav .wds-inline-icon {
width: 16px;
height: 16px;
}
.citation-preview-count {
margin-left: auto;
color: var(--cg-muted, var(--muted));
font-size: var(--ds-text-micro-11);
font-variant-numeric: tabular-nums;
}
@media (prefers-reduced-motion: reduce) {
.source-pill {
transition: none;
}
}
/* 템플릿은 1512폭에 4열이다. 답변 안의 카드는 그만큼 넓을 수 없으므로 3 → 2 → 1열로 접는다.
기준은 뷰포트가 아니라 컨테이너 쿼리, 즉 피드 «자신의» 폭이다 — 같은 화면에서도 사이드
패널이 열리면 폭이 달라지고 카드가 따라 접혀야 한다. 그래서 정본 폭 분기점(520/521/900/901)
래칫의 대상이 아니다. ★이 주석에 뷰포트 앳룰 이름을 글자 그대로 적지 말 것:
test_design_system_contract의 스캐너는 주석을 걷어내지 않고 `@med` + `[^{]*` 로 훑기 때문에
주석 안의 그 단어가 아래 컨테이너 쿼리까지 삼켜 620을 «비정본 분기점»으로 오검출한다. */
@container (max-width: 620px) {
.news-cards {
grid-auto-columns: calc((100% - 16px) / 2);
}
/* 행 흐름일 때의 열 수도 폭을 따라간다. ★줄 수는 건드리지 않는다. */
.news-cards:not(:has(> .news-card:nth-child(5))) {
grid-template-columns: repeat(2, minmax(0, 1fr));
}
}
/* ★여기 있던 `.news-card:last-child:nth-child(odd) { grid-column: span 2 }`는 사라졌다.
그 예외는 «3의 배수가 2열에서는 홀수일 수 있다»는, 세로 격자에서만 생기던 문제를 메우던
규칙이다. 이제 줄 수가 폭과 무관하게 2로 고정이라 pickNewsHeroCount의 짝수 역산 하나로
모든 폭에서 마지막 열이 채워지고, 메울 구멍 자체가 없다. */
@container (max-width: 380px) {
.news-cards {
grid-auto-columns: 100%;
gap: 18px;
}
.news-cards:not(:has(> .news-card:nth-child(5))) {
grid-template-columns: minmax(0, 1fr);
}
/* ★두 칸을 380px에 나란히 두면 칸당 ~180px이라 제목이 2줄 상한을 넘어 잘린다. 카드가
1열로 접히는 것과 같은 폭에서 2단도 한 줄로 쌓는다. */
.news-second {
grid-template-columns: 1fr;
}
.news-lead {
aspect-ratio: 4 / 3;
}
.news-lead-band {
inset-inline: 10px;
bottom: 10px;
padding: 12px 13px;
}
}
/* ★모션은 정보를 나르지 않는다 — 전부 꺼도 캐러셀은 «즉시» 그 슬라이드로 간다(위치는
data-news-hero-index가 이미 정한다). 확대·부양은 장식이라 그대로 사라진다. */
@media (prefers-reduced-motion: reduce) {
.news-hero-track,
.news-hero-nav,
.news-topic,
.news-arrow,
.news-bookmark,
.news-dot,
.news-thumb {
transition: none;
}
.news-topics-rail {
scroll-behavior: auto;
}
.news-topic:hover {
transform: none;
}
/* none이 아니라 기본값으로 되돌린다 — 이 버튼의 transform은 «수직 중앙»이라는 레이아웃이지
모션이 아니다. none으로 지우면 화살표가 아래로 반쯤 내려간다. */
.news-hero-nav:hover {
transform: translateY(-50%);
}
.news-card:hover .news-card-img,
.news-lead:hover .news-lead-img {
transform: none;
}
}
/* 20260709-mobile-keyboard-fix: validated on the iOS Simulator (real WebKit + soft
keyboard). Pin the shell to the visual viewport so the topbar stays fixed and the
composer rides just above the keyboard instead of the page scrolling up. The
offsetTop compensation (--wizon-vv-offset-top, written by syncMobileViewportMetrics
in app.js) is essential on iOS: when the keyboard opens iOS scrolls the layout
viewport, so a fixed shell must translate down by offsetTop to stay aligned with the
visible area — without it the composer flies to the top of the screen. Both vars fall
back to 100dvh before the first visualViewport event. Scoped to <=900px so desktop
keeps the global 100dvh chain (styles.css:8707) untouched. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .app-shell {
position: fixed;
left: 0;
top: var(--wizon-vv-offset-top, 0px);
width: 100%;
/* 20260803-shell-height-clamp — **믿지 말고 조인다.**
*
* ★실기기 실측(2026-08-03): 가로에서 컴포저 기본 액션이 잘리고 스크롤로도 닿지 않았다.
* 셸이 뷰포트(292)보다 크게 잡히는데 overflow: hidden이라 넘친 아래가 사라진다.
* 데스크톱 브라우저에서는 --wizon-vvh가 888로 낡은 것을 실제로 봤다.
*
* ★JS 값이 «언제 정착하는가»에 기대는 설계가 애초에 약했다. orientationchange 재동기화를
* 먼저 넣어 봤지만 실기기에서 증상이 그대로였다 — 이벤트 타이밍을 맞추는 방향으로는
* 닫히지 않는다. 그래서 «값을 못 믿어도 안전한» 모양으로 바꾼다.
*
* ★svh는 **브라우저 크롬을 뺀 보장 가시 높이**다(업계 권고: 레이아웃은 svh 기본, dvh는
* 근거 있을 때만). min()으로 조이면 세 경우가 모두 옳다:
* · 값이 신선하고 더 작다(키보드 열림) → 그 값을 쓴다. 기존 키보드 대응 유지.
* · 값이 낡아 더 크다 → svh로 잘려 화면 밖으로 못 나간다.
* · JS가 아직/전혀 안 돌았다 → 100svh 폴백.
*
* ★레퍼런스 대조: 같은 기기 가로에서 chatgpt.com은 컴포저가 온전히 보이고 그 아래까지
* 스크롤로 닿는다 — 셸을 뷰포트 높이에 잠그지 않는다. 우리는 앱 셸 성격을 유지하되
* «잠그는 높이»를 보장 가시 높이로 바꾼다.
*/
height: min(var(--wizon-vvh, 100svh), 100svh);
}
body.chatgpt-reference-v1 .main-pane,
body.chatgpt-reference-v1 .workbench,
body.chatgpt-reference-v1 .chat-pane {
height: 100%;
}
}
/* 20260803-dock-row-range — doc 143 항목 E. **이것이 가로 결함의 진짜 원인이었다.**
*
* 두 규칙의 미디어 범위가 어긋나 있었다:
*
* styles.css L8256 .wds-ai-portal-v1 .composer-action-dock { flex-direction: column }
* └ @media (max-width: 900px) ← 가로(874px)에서 **적용됨**
* styles.css L17310 이를 되돌리는 flex-direction: row !important
* └ @media (max-width: 520px) ← 가로에서 **적용 안 됨**
*
* body에는 `wds-ai-portal-v1`과 `chatgpt-reference-v1`이 **둘 다** 붙는다. 그래서 폭이
* 521~900px인 구간(= 폰 가로)에서만 dock이 세로로 쌓이고(실측 76×126), 기본 액션이 컴포저
* 아래로 밀려 화면 밖으로 잘렸다. 세로(402px)는 두 규칙이 모두 적용돼 되돌리는 쪽이 이기므로
* 멀쩡했다 — 결함이 «가로에서만» 나던 이유가 이것이다.
*
* ★높이는 처음부터 원인이 아니었다. 뷰포트 높이·안전영역·회전 재동기화를 차례로 의심했고
* 전부 빗나갔다. 원인은 **폭 구간의 빈틈**이었다.
*
* ★고치는 방법은 «되돌리는 규칙을 자기가 되돌리려는 규칙과 같은 범위로» 맞추는 것이다.
* L17310의 520px 블록은 그대로 두고(세로에서 이미 옳다), 그 사이 구간만 여기서 덮는다.
*/
@media (min-width: 521px) and (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-composer-shell .composer-action-dock {
flex-direction: row !important;
flex-wrap: nowrap !important;
align-items: center;
gap: 6px;
justify-self: end;
}
}
/* 20260803-short-viewport-scroll — doc 143 항목 E.
*
* ★증상(실기기 실측): iPhone 17을 가로로 돌리면 컴포저 기본 액션이 화면 아래로 잘리고
* **스크롤로도 닿을 수 없다.** 라이트·다크 양쪽에서 재현.
*
* 가로 뷰포트 874×292 (Safari 크롬이 110pt를 먹는다)
* 셸 height: var(--wizon-vvh, 100dvh) + overflow: hidden
* 문서 스크롤 없음 (scrollHeight == clientHeight)
*
* ★가설 셋을 세워 **셋 다 기각**했다(같은 길을 다시 파지 않도록 남긴다):
* · 컴포저 그리드가 2행으로 떨어진다 → 진짜 마크업 프로브가 292px에서 35px 여유.
* · 좌우 안전영역 미배선 → --wizon-safe-left/right는 이미 env()에 연결·7곳 사용.
* · 회전 시 뷰포트 값이 낡는다 → resize가 6ms 안에 2회, inner == visual == 292.
* 남은 원인은 **홈 세로 스택이 292px에 안 들어가는 것**이다. 배관이 아니라 예산 문제다.
*
* ★고르지 않은 길: 인사말·칩을 접는 안. 그 둘은 이 표면의 정체성이라 지우면 잃는 게 크고,
* 짧은 뷰포트는 예외 상황이다. 그래서 «그때만 스크롤을 연다».
*
* ★트리거가 max-height인 이유: 키보드를 올린 세로도 같은 부족이다. orientation으로 잡으면
* 그 경우를 통째로 놓친다. 460px은 가로 실측(292) 위, 세로 실측(약 700) 아래다.
*
* ★여는 것은 **본문**이지 셸이 아니다. 셸까지 열면 주소창이 오르내려 «앱처럼 보이는»
* 성질이 깨지고 상단바·컴포저 고정이 함께 무너진다. 셸 체인의 잠금은 그대로 둔다.
*/
@media (max-width: 900px) and (max-height: 460px) {
body.chatgpt-reference-v1 .chat-pane {
overflow-y: auto;
/* 이 리포는 .message-list에서 같은 문제를 이미 이렇게 닫았다 — 스크롤 체이닝으로
뒤 표면이 딸려 움직이는 것을 막는다. */
overscroll-behavior: contain;
-webkit-overflow-scrolling: touch;
}
}
/* ---- User-message hover actions + inline editor (20260709-user-edit, ChatGPT parity) ---- */
/* Stack the bubble and its actions in a right-aligned column so copy/edit sit cleanly BELOW
the bubble (not inside it). Overrides the grid layout for user turns. */
.chatgpt-reference-v1 .message.user {
display: flex;
flex-direction: column;
align-items: flex-end;
}
.message.user .user-actions {
display: flex;
gap: 2px;
justify-content: flex-end;
margin-top: 2px;
padding-right: 6px;
opacity: 0;
transition: opacity 120ms ease;
}
.message.user:hover .user-actions,
.message.user:focus-within .user-actions {
opacity: 1;
}
/* Touch: no hover, so the inline actions are hidden and a long-press context menu (below)
provides 복사/편집 instead — the ChatGPT mobile pattern. Suppress the iOS text-selection
callout so the long-press lifts the menu rather than the native magnifier. */
@media (hover: none) {
.message.user .user-actions {
display: none;
}
.chatgpt-reference-v1 .message.user .message-body {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
}
/* Long-press context menu: dimmed backdrop + a lifted clone of the pressed bubble (kept bright
above the scrim) + a popover of actions. */
.user-msg-scrim {
position: fixed;
inset: 0;
z-index: 190;
background: rgba(0, 0, 0, 0.44);
}
.user-msg-scrim[hidden] {
display: none;
}
.user-msg-lift {
position: fixed;
z-index: 195;
margin: 0 !important;
pointer-events: none;
}
.user-msg-lift .message-body {
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
transform: scale(1.02);
transform-origin: top right;
}
.user-msg-lift .user-actions {
display: none !important;
}
.user-msg-menu {
position: fixed;
z-index: 200;
min-width: 184px;
padding: 6px;
border: 1px solid var(--cg-menu-border, rgba(13, 13, 13, 0.1));
border-radius: 16px;
background: var(--cg-menu-bg, #ffffff);
box-shadow: 0 18px 50px rgba(13, 13, 13, 0.22);
}
.user-msg-menu[hidden] {
display: none;
}
.user-msg-menu-item {
display: flex;
align-items: center;
gap: 12px;
width: 100%;
padding: 12px 14px;
border: none;
border-radius: 11px;
background: transparent;
font: inherit;
font-size: var(--ds-text-body-15);
color: var(--cg-text, #0d0d0d);
cursor: pointer;
}
.user-msg-menu-item:active {
background: var(--cg-hover-soft, rgba(13, 13, 13, 0.06));
}
.user-msg-menu-item .wds-inline-icon {
width: 19px;
height: 19px;
}
/* 20260709-recent-longpress (doc 144 follow-up): touch has no hover, so a long-press on a
recent conversation lifts a snippet preview above a dimmed backdrop and opens a bottom
action sheet — the ChatGPT mobile pattern. All three live on
(not the fixed
sidebar), so a real tap-capturing scrim is safe here. */
@media (hover: none) {
.chatgpt-reference-v1 .recent-item {
-webkit-touch-callout: none;
-webkit-user-select: none;
user-select: none;
}
.chatgpt-reference-v1 .recent-item input {
-webkit-user-select: text;
user-select: text;
}
}
/* While the long-press sheet is open the finger is still down over the sheet, so lock the
whole document unselectable (JS also drops any range iOS already made) — per-element
user-select:none does not stop a selection the long-press gesture already armed. */
body.recent-longpress-open,
body.recent-longpress-open * {
-webkit-touch-callout: none !important;
-webkit-user-select: none !important;
user-select: none !important;
}
.recent-longpress-scrim {
position: fixed;
inset: 0;
z-index: 190;
background: rgba(0, 0, 0, 0.44);
}
.recent-longpress-scrim[hidden] {
display: none;
}
.recent-longpress-lift {
position: fixed;
z-index: 195;
left: 8px;
right: 8px;
box-sizing: border-box;
display: flex;
flex-direction: column;
gap: 4px;
padding: 12px 14px;
border-radius: var(--ds-radius-md, 14px);
background: var(--cg-menu-bg, #ffffff);
box-shadow: 0 16px 44px rgba(0, 0, 0, 0.3);
pointer-events: none;
}
.recent-longpress-title {
overflow: hidden;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-body-15);
font-weight: 600;
white-space: nowrap;
text-overflow: ellipsis;
}
.recent-longpress-preview {
display: -webkit-box;
-webkit-line-clamp: 2;
-webkit-box-orient: vertical;
overflow: hidden;
color: var(--cg-muted-2);
font-size: var(--ds-text-caption-13);
line-height: 18px;
}
.recent-longpress-menu {
position: fixed;
z-index: 200;
left: 0;
right: 0;
bottom: 0;
padding: 8px 8px calc(12px + var(--wizon-safe-bottom));
border-radius: 18px 18px 0 0;
background: var(--cg-menu-bg, #ffffff);
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22);
animation: wizon-sheet-up var(--wizon-motion-base) var(--wds-ease-out) both;
/* The finger is still pressing when the sheet opens under it — suppress the native text
selection / callout so the label ("공유하기" etc.) is not selected at the same time. */
-webkit-user-select: none;
user-select: none;
-webkit-touch-callout: none;
}
.recent-longpress-menu[hidden] {
display: none;
}
.recent-longpress-item {
display: flex;
align-items: center;
gap: 14px;
width: 100%;
padding: 13px 14px;
border: none;
border-radius: 12px;
background: transparent;
font: inherit;
font-size: var(--ds-text-body-16);
color: var(--cg-text, #0d0d0d);
text-align: left;
cursor: pointer;
}
.recent-longpress-item:active {
background: var(--cg-hover-soft, rgba(13, 13, 13, 0.06));
}
.recent-longpress-item.is-danger {
color: #e02e2a;
}
.recent-longpress-item .wds-inline-icon {
width: 20px;
height: 20px;
flex: 0 0 auto;
}
.recent-longpress-divider {
height: 1px;
margin: 6px 10px;
background: var(--cg-menu-border, rgba(13, 13, 13, 0.1));
}
@media (prefers-reduced-motion: reduce) {
.recent-longpress-menu {
animation: none;
}
}
/* While editing, the bubble yields to a full-width inline editor. */
.chatgpt-reference-v1 .message.user .message-body:has(.user-edit) {
max-width: 100%;
width: 100%;
padding: 0;
background: transparent;
}
.user-edit {
display: flex;
flex-direction: column;
gap: 8px;
width: min(620px, 100%);
margin-left: auto;
}
.user-edit-input {
width: 100%;
resize: none;
border-radius: var(--ds-radius-lg, 18px);
padding: 12px 16px;
border: 1px solid var(--cg-menu-border, rgba(13, 13, 13, 0.14));
background: var(--cg-surface, #ffffff);
color: var(--cg-text, #0d0d0d);
font: inherit;
line-height: 1.5;
}
.user-edit-input:focus {
outline: none;
border-color: var(--cg-text, #0d0d0d);
box-shadow: none;
}
.user-edit-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
.user-edit-cancel,
.user-edit-save {
padding: 8px 16px;
border: 0;
border-radius: var(--ds-radius-pill, 999px);
cursor: pointer;
font-size: var(--ds-text-caption-13);
font-weight: 600;
transition: background 120ms ease, opacity 120ms ease;
}
.user-edit-cancel {
background: transparent;
color: var(--cg-muted, #8f8f8f);
}
.user-edit-cancel:hover {
background: var(--cg-hover-soft, rgba(13, 13, 13, 0.04));
color: var(--cg-text, #0d0d0d);
}
.user-edit-save {
background: var(--cg-send-bg, #0d0d0d);
color: var(--cg-send-fg, #ffffff);
}
.user-edit-save:hover {
opacity: 0.9;
}
/* 20260709-mobile-route-navbar: standard single top app bar (Material 3 / Apple HIG).
On a route page (library/projects/…) the LEADING slot swaps hamburger→back and an
inline route title appears; the TRAILING new-chat action stays put (like ChatGPT's
Library). There is exactly ONE title — the route page's big H1 is hidden on mobile
(see the route-page block) so the title isn't duplicated (NN/g: no redundant chrome). */
@media (max-width: 900px) {
/* hide the hidden-attr controls even though .chatgpt-icon-button sets display */
body.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-portal-route-back][hidden],
body.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-mobile-route-title][hidden],
body.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-mobile-workspace-trigger][hidden],
body.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-mobile-library-new][hidden],
body.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-drive-mobile-menu-trigger][hidden],
body.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-mobile-trash-empty][hidden],
body.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-rail-new-chat][hidden] {
display: none !important;
}
/* route open: back replaces the hamburger; new-chat stays on the right. The title
fills the middle so new-chat is pushed to the trailing edge. */
body.portal-route-open.chatgpt-reference-v1 .chatgpt-mobile-topbar [data-sidebar-open] {
display: none;
}
/* The title sits in the CENTER slot (20260725-mobile-topbar-workspace), so it no longer
needs to grow to push the trailing action out — the equal-basis side slots already do
that. `flex: 0 1 auto` lets it shrink-with-ellipsis instead of claiming the whole bar,
which is what kept it pinned left before. */
body.portal-route-open.chatgpt-reference-v1 .chatgpt-mobile-topbar .chatgpt-mobile-route-title {
flex: 0 1 auto;
text-align: center;
margin-inline: 2px;
}
body.chatgpt-reference-v1 .chatgpt-mobile-route-title {
font-size: 17px;
font-weight: 600;
color: var(--cg-text, #0d0d0d);
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
min-width: 0;
}
}
/* 20260709-mobile-safe-area (doc 143 item A): honor device safe areas now that
viewport-fit=cover lets env() resolve. The app-shell is position:fixed at the
very top (top:offsetTop), so the topbar pads its content below the notch, the
composer clears the home indicator, and the drawer / content inset their edges
(matters in landscape where the notch is on the side). Scoped <=900px. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-mobile-topbar {
height: calc(54px + var(--wizon-safe-top));
padding-top: calc(4px + var(--wizon-safe-top));
padding-left: calc(8px + var(--wizon-safe-left));
padding-right: calc(8px + var(--wizon-safe-right));
box-sizing: border-box;
}
/* composer clears the home indicator; collapse the inset while the keyboard is
up (indicator hidden and the shell already sits on the keyboard). */
body.chatgpt-reference-v1 .chat-pane {
padding-bottom: var(--wizon-safe-bottom);
}
html.is-keyboard-open body.chatgpt-reference-v1 .chat-pane {
padding-bottom: 0;
}
/* drawer clears the notch top and the side inset in landscape */
body.chatgpt-reference-v1 .sidebar {
padding-top: var(--wizon-safe-top);
padding-left: var(--wizon-safe-left);
}
/* keep route/chat content clear of a side notch in landscape */
body.chatgpt-reference-v1 .workbench {
padding-left: var(--wizon-safe-left);
padding-right: var(--wizon-safe-right);
}
}
/* 20260709-mobile-bottom-sheet (doc 143 item C): on phones the composer "+" menu
and the model/mode selector present as bottom sheets (slide up from the bottom,
full-width, rounded top, dimming scrim + drag handle) instead of tiny dropdowns —
the standard mobile menu affordance (Material bottom sheet / iOS action sheet).
Overrides the JS dropdown positioning while the menu is open (:not([hidden])). */
@media (max-width: 520px) {
body.chatgpt-reference-v1 .composer-popover:not([hidden]),
body.chatgpt-reference-v1 .reasoning-popover:not([hidden]),
body.chatgpt-reference-v1 .chatgpt-more-menu:not([hidden]),
body.chatgpt-reference-v1 .chatgpt-account-menu:not([hidden]),
body.chatgpt-reference-v1 .chatgpt-conversation-menu:not([hidden]),
body.chatgpt-reference-v1 .chatgpt-recent-menu:not([hidden]),
body.chatgpt-reference-v1 .chatgpt-library-popover,
/* 20260818-settings-choice-sheet (doc 143 항목 C 잔여): 설정의 선택 팝오버만
아직 220px 우측 드롭다운이었다. 규칙을 새로 만들지 않고 이 목록에 더한다 —
사본을 만들면 두 시트가 서로 다르게 늙는다. 이 팝오버는 transform·will-change 를
가진 설정 다이얼로그 «안»에 있지만, 그 다이얼로그가 [data-mobile-fullscreen] 로
inset:0 이라 컨테이닝 블록이 곧 뷰포트다 — 하단이 화면 하단과 같다. */
body.chatgpt-reference-v1 .settings-choice-popover {
position: fixed !important;
left: 0 !important;
right: 0 !important;
top: auto !important;
bottom: 0 !important;
width: 100% !important;
max-width: none !important;
/* Height fits the content — the sheet is only as tall as its rows, and scrolls
(never stretches) once it would exceed the cap. `align-content: start` is critical:
these menus are display:grid, and grid's default align-content (normal→stretch)
was inflating each row (36px → 80px) to fill the capped box, spreading the items. */
height: auto !important;
max-height: min(70vh, calc(var(--wizon-vvh, 100dvh) - 96px)) !important;
align-content: start !important;
overflow-y: auto !important;
margin: 0 !important;
padding: 8px 8px calc(12px + var(--wizon-safe-bottom)) !important;
border-radius: var(--wizon-ai-radius-sheet, 18px) var(--wizon-ai-radius-sheet, 18px) 0 0 !important;
/* Interim dimming via a paint-only huge spread shadow (restored). The tap-capturing
scrim element was reverted because a body-level z-indexed scrim is rendered ABOVE
sidebar-embedded sheets (account/more/recent are trapped in the fixed sidebar's
stacking context) — it dimmed and disabled those sheets. The robust fix is the
native top layer (dialog/popover), tracked separately. */
box-shadow: 0 -10px 30px rgba(0, 0, 0, 0.22), 0 0 0 100vmax var(--wizon-scrim, rgba(0, 0, 0, 0.24)) !important;
transform: none !important;
/* 20260709-motion-m0 (doc 146 §1): motion rides the individual `translate` property, so the
`transform: none !important` above (which blocks inherited desktop transforms) never touches
it. `backwards` fill (not `both`): after the entrance settles, the base `translate: 0 0`
governs — so the M1 exit transition takes over cleanly instead of fighting a forwards fill.
Curve = WDS `effect-default` spring: an APPLE-style critically-damped `linear()` curve
that decelerates to rest WITHOUT positional overshoot. The `spatial-default` spring was
tried first but overshoots to 1.015 (translate -1.5%), which on a bottom-anchored sheet
lifts it ~6px past rest and reveals a gap below before it settles (the reported
"하단쪽 살짝 떴다가 다시 붙음"). effect-default never exceeds 1 → no lift, no gap. */
translate: 0 0;
z-index: 200 !important;
animation: wizon-sheet-up var(--wds-spring-spatial-default-duration, 372ms) var(--wds-spring-effect-default, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
}
/* 20260818-sheet-handle-dedupe: 여기 있던 `::after` 잡이를 걷었다.
배치 4(`b20c576fa`)가 「이 블록은 핸들을 한 번도 그리지 않았다(hasHandle=false)」
고 보고 `::before` 로 다시 그렸는데, 그 판단이 틀렸다 — `::after` 는 그리고
있었고 결과적으로 **막대가 두 개**가 됐다. 2026-08-18 실측(375px 라이브):
시트 8종 전부 ::before(+2px, 227 불투명)와 ::after(+8px, 138 50%)가 2px 간격을
두고 «따로» 보인다. 정본은 배치 4 의 ::before 다(Mobbin 시트 6/6 근거).
계약: apps/ai-portal/tests/test_mobile_sheet_handle_single.py */
/* 20260710-conversation-menu-consolidation: in the full-width bottom sheet the
conversation menu rows stretch edge-to-edge (the 174px desktop-popover width is a
dropdown holdover) so labels like "그룹 채팅 시작" + the "준비 중" badge stay on one line. */
body.chatgpt-reference-v1 .chatgpt-conversation-menu:not([hidden]) button {
width: auto;
}
body.chatgpt-reference-v1 .chatgpt-conversation-menu:not([hidden]) button > span:not([class]) {
white-space: nowrap;
}
}
@keyframes wizon-sheet-up {
from { translate: 0 100%; }
to { translate: 0 0; }
}
@keyframes wizon-scrim-in {
from { opacity: 0; }
to { opacity: 1; }
}
/* Exit as a keyframe animation (not a transition) — Safari paints animations, not transitions,
on top-layer popovers. See the 20260709-motion-m1 block. */
@keyframes wizon-sheet-down {
from { translate: 0 0; }
to { translate: 0 100%; }
}
@keyframes wizon-scrim-out {
from { opacity: 1; }
to { opacity: 0; }
}
/* Library sheet exit (20260710-library-sheet-motion): the new/filter menus re-render as fresh
HTML (no persistent node for setAnimatedDisclosure's exit), so their close is animated via a
cloned inert ghost that slides down AND fades — the fade also carries the paint-only dim
(box-shadow inherits element opacity) out with it, matching the ::backdrop fade of the other
sheets without needing the top layer. */
@keyframes wizon-library-sheet-out {
from { translate: 0 0; opacity: 1; }
to { translate: 0 100%; opacity: 0; }
}
/* Mobile drawer offcanvas slide (M2, doc 146 §3). `translate` (not transform) so it coexists
with the escape rule's `transform: none !important`; keyframe animation (not transition) with
no forwards fill on entry so no residual translate re-traps the child sheets (doc 144). */
@keyframes wizon-drawer-in {
from { translate: -100% 0; }
to { translate: 0 0; }
}
@keyframes wizon-drawer-out {
from { translate: 0 0; }
to { translate: -100% 0; }
}
/* 20260710-motion-m3 (doc 146 §4): mobile route transition via the View Transitions API.
The JS wraps the route render in document.startViewTransition (Safari 18+/Baseline; gated to
mobile + feature-detected + reduced-motion). The new page cross-slides in from the right, the
old slides slightly left and fades — a subtle iOS-style page transition. */
@keyframes wizon-route-in {
from { opacity: 0; transform: translateX(16px); }
to { opacity: 1; transform: translateX(0); }
}
@keyframes wizon-route-out {
from { opacity: 1; transform: translateX(0); }
to { opacity: 0; transform: translateX(-12px); }
}
@media (max-width: 900px) {
::view-transition-old(root) {
animation: wizon-route-out 160ms var(--wizon-sheet-exit-ease, cubic-bezier(0.4, 0, 1, 1)) both;
}
::view-transition-new(root) {
animation: wizon-route-in 240ms var(--wds-spring-effect-default, cubic-bezier(0.16, 1, 0.3, 1)) both;
}
}
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
::view-transition-old(root),
::view-transition-new(root) {
animation: none;
}
}
/* 20260710-motion-m4 (doc 146 §5, revised): touch tap feedback via a JS-toggled `.wds-pressed`
class, NOT CSS `:active`. iOS Safari applies `:active` unreliably on tap (and not at all on the
non- prompt chips); a pointerdown/up class toggle (see handleTapPressStart in app.js) is
identical on iOS + Android + every touch device — and is testable. Individual `scale` property so
it never fights any `transform`; base `transition: scale` eases both press and release. Bounded
whitelist of interactive chrome — never a global `*`.
★2026-08-02 (북극성 ③): 이 목록은 일곱이었고, 라이브 390px 실측이 그 경계가 빠뜨린 것을 보였다
— 드로어 49개 중 31개(63%), 라이브러리 31개 중 28개(90%), 대화 화면 30개 중 25개(83%)가 눌러도
반응이 없었다. 형제끼리 갈린 게 신호였다: .prompt-chip 은 반응하고 .followup-chip 은 아니며,
.chatgpt-sidebar-link 는 반응하고 바로 한 줄 아래 .recent-item 은 아니었다.
경계가 잘못이 아니라 «크롬»을 기준으로 그어진 게 잘못이었다 — 모바일 표면은 대부분 내용 행과
칩이다. 경계는 그대로 두되(전역 `*` 금지) 두 갈래로 나눈다: 폭 358px 짜리 행이 통째로 줄어들면
화면이 움직여 어색하고, iOS 목록 행의 규범은 축소가 아니라 «채움»이다. 그래서 행은
.wds-pressed-fill(면), 작은 것은 .wds-pressed(축소). 행 안의 작은 컨트롤은 closest() 가 더
깊은 것을 고르므로 자기 형태를 그대로 지킨다.
★면은 계산 스타일로 검증할 수 없다 — transition: background-color 때문에 페인트하지 않는
브라우저 패널에서 시작값(투명)에 얼어붙는다(같은 파일 상단바 눌림 배경 주석의 실측). 판정은
시뮬레이터 픽셀로. */
@media (pointer: coarse) {
body.chatgpt-reference-v1 .chatgpt-icon-button,
body.chatgpt-reference-v1 .chatgpt-rail-button,
body.chatgpt-reference-v1 .chatgpt-mobile-topbar-button,
body.chatgpt-reference-v1 .chatgpt-sidebar-link,
body.chatgpt-reference-v1 .composer-icon-button,
body.chatgpt-reference-v1 .prompt-chip,
body.chatgpt-reference-v1 [role="menuitem"],
body.chatgpt-reference-v1 [role="tab"],
body.chatgpt-reference-v1 .followup-chip,
body.chatgpt-reference-v1 .message-action-button,
body.chatgpt-reference-v1 .chatgpt-route-empty-action,
body.chatgpt-reference-v1 .chatgpt-library-row-menu-trigger,
body.chatgpt-reference-v1 .recent-action,
body.chatgpt-reference-v1 .chatgpt-recent-header-action,
body.chatgpt-reference-v1 .chatgpt-recent-title,
body.chatgpt-reference-v1 .chatgpt-library-view-control,
body.chatgpt-reference-v1 .composer-model-pill,
body.chatgpt-reference-v1 .chatgpt-mobile-workspace-trigger,
body.chatgpt-reference-v1 .chatgpt-conversation-more,
body.chatgpt-reference-v1 .chatgpt-conversation-health,
body.chatgpt-reference-v1 .chatgpt-account-button,
body.chatgpt-reference-v1 .citation-health-actions button,
body.chatgpt-reference-v1 .citation-health-claim-actions button,
body.chatgpt-reference-v1 .citation-revision-actions button,
body.chatgpt-reference-v1 .trust-chip,
body.chatgpt-reference-v1 .citation-tag,
body.chatgpt-reference-v1 .md-table-copy,
body.chatgpt-reference-v1 .scroll-to-bottom {
transition: scale var(--wizon-motion-fast, 140ms) ease-out;
}
body.chatgpt-reference-v1 .wds-pressed {
scale: 0.96;
}
/* 행은 줄이지 않고 채운다. 상단바 눌림 배경과 같은 토큰을 써서 «눌림 = 이 면»이라는 한 가지
언어로 통일한다. */
body.chatgpt-reference-v1 .recent-item,
body.chatgpt-reference-v1 .chatgpt-library-row {
transition: background-color var(--wizon-motion-fast, 140ms) ease-out;
}
body.chatgpt-reference-v1 .wds-pressed-fill {
background: var(--cg-hover-soft);
}
}
/* 20260728-composer-attachment-preview-v3: keep ordered attachment context on its own compact shelf.
Inline-size containment lets the rail scroll internally without widening the mobile document. */
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(.composer-attachment-lane:not([hidden])),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(.composer-attachment-lane:not([hidden])) {
grid-template-rows: auto auto !important;
min-height: 106px !important;
height: auto !important;
padding: 7px 8px 5px !important;
}
body.chatgpt-reference-v1 .composer-attachment-lane:not([hidden]) {
display: flex;
flex-wrap: nowrap;
align-items: center;
box-sizing: border-box;
contain: inline-size paint;
gap: 7px;
width: 100%;
min-width: 0;
max-width: 100%;
padding: 1px 2px 8px;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
body.chatgpt-reference-v1 .composer-attachment-lane::-webkit-scrollbar {
display: none;
}
/* 20260802-composer-attachment-navigation: fine pointers get explicit horizontal
navigation and grab-to-scroll. Touch keeps the native swipe lane with no chrome. */
body.chatgpt-reference-v1 .composer-attachment-rail:not([hidden]) {
display: flex;
align-items: center;
gap: 4px;
width: 100%;
min-width: 0;
}
body.chatgpt-reference-v1 .composer-attachment-rail .composer-attachment-lane:not([hidden]) {
flex: 1 1 auto;
width: auto;
cursor: grab;
overscroll-behavior-inline: contain;
scroll-snap-type: inline proximity;
}
body.chatgpt-reference-v1 .composer-attachment-rail .composer-attachment-lane.is-dragging {
cursor: grabbing;
scroll-snap-type: none;
user-select: none;
}
body.chatgpt-reference-v1 .composer-attachment-card,
body.chatgpt-reference-v1 .composer-attachment-manage {
scroll-snap-align: start;
}
body.chatgpt-reference-v1 .composer-attachment-nav {
display: none;
flex: 0 0 32px;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 1px solid color-mix(in srgb, var(--cg-text) 10%, transparent);
border-radius: var(--wizon-ai-radius-pill);
background: var(--cg-surface);
color: var(--cg-text);
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-nav:disabled {
opacity: 0.32;
cursor: default;
}
body.chatgpt-reference-v1 .composer-attachment-manage {
flex: 0 0 auto;
min-height: 44px;
padding: 0 12px;
border: 1px solid color-mix(in srgb, var(--cg-text) 12%, transparent);
border-radius: var(--wizon-ai-menu-radius);
background: color-mix(in srgb, var(--cg-text) 3%, var(--cg-surface));
color: var(--cg-text);
font: inherit;
font-size: var(--wizon-ai-font-size-label);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-card[data-question-active="false"] {
opacity: 0.56;
}
@media (pointer: fine) {
body.chatgpt-reference-v1 .composer-attachment-rail.has-overflow .composer-attachment-nav:not([hidden]) {
display: grid;
}
body.chatgpt-reference-v1 .composer-attachment-nav:not(:disabled):hover,
body.chatgpt-reference-v1 .composer-attachment-manage:hover {
background: var(--cg-hover-soft);
}
}
body.chatgpt-reference-v1 .composer-attachment-dialog {
width: min(520px, calc(100vw - 32px));
max-height: min(680px, calc(100dvh - 48px));
padding: 0;
border: 0;
border-radius: var(--wizon-ai-radius-sheet);
background: var(--cg-surface);
color: var(--cg-text);
box-shadow: var(--wizon-ai-dialog-shadow);
overflow: hidden;
}
body.chatgpt-reference-v1 .composer-attachment-dialog::backdrop {
background: var(--wds-modal-scrim);
backdrop-filter: blur(2px);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-shell {
display: flex;
flex-direction: column;
max-height: inherit;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: 16px;
padding: 16px;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-head h2,
body.chatgpt-reference-v1 .composer-attachment-dialog-head p {
margin: 0;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-head h2 {
font-size: var(--wizon-ai-font-size-title);
line-height: 1.35;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-head p {
margin-top: 4px;
color: var(--cg-muted);
font-size: var(--wizon-ai-font-size-caption);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-close,
body.chatgpt-reference-v1 .composer-attachment-dialog-remove,
body.chatgpt-reference-v1 .composer-attachment-dialog-toggle {
display: grid;
flex: 0 0 auto;
place-items: center;
width: 36px;
height: 36px;
padding: 0;
border: 0;
border-radius: var(--wizon-ai-radius-pill);
background: transparent;
color: inherit;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-scope {
display: grid;
grid-template-columns: repeat(2, minmax(0, 1fr));
gap: 4px;
margin: 0 16px 12px;
padding: 4px;
border-radius: var(--wizon-ai-menu-radius);
background: color-mix(in srgb, var(--cg-text) 6%, transparent);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-scope button {
min-height: 36px;
padding: 0 12px;
border: 0;
border-radius: var(--wizon-ai-radius-control);
background: transparent;
color: var(--cg-muted);
font: inherit;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-scope button.is-active {
background: var(--cg-surface);
color: var(--cg-text);
box-shadow: var(--ds-shadow-xs);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-list {
display: flex;
flex-direction: column;
gap: 4px;
min-height: 0;
padding: 0 12px 16px;
overflow-y: auto;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-item {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) 36px;
align-items: center;
min-height: 56px;
border-radius: var(--wizon-ai-menu-radius);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-item.is-active {
background: color-mix(in srgb, var(--wds-brand-blue) 7%, transparent);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-main {
display: flex;
align-items: center;
gap: 12px;
min-width: 0;
min-height: 56px;
padding: 4px 8px;
border: 0;
background: transparent;
color: inherit;
text-align: left;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-check {
display: grid;
place-items: center;
width: 20px;
height: 20px;
border: 1px solid color-mix(in srgb, var(--cg-text) 28%, transparent);
border-radius: var(--ds-radius-xs);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-toggle[aria-checked="true"] .composer-attachment-dialog-check {
border-color: var(--wds-brand-blue);
background: var(--wds-brand-blue);
color: var(--wds-color-on-primary);
}
body.chatgpt-reference-v1 .composer-attachment-dialog-copy {
display: flex;
flex-direction: column;
min-width: 0;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-copy strong,
body.chatgpt-reference-v1 .composer-attachment-dialog-copy small {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-copy small {
margin-top: 2px;
color: var(--cg-muted);
font-size: var(--wizon-ai-font-size-caption);
}
@media (pointer: fine) {
body.chatgpt-reference-v1 .composer-attachment-dialog-item:hover,
body.chatgpt-reference-v1 .composer-attachment-dialog-close:hover,
body.chatgpt-reference-v1 .composer-attachment-dialog-remove:hover {
background: var(--cg-hover-soft);
}
}
@media (max-width: 520px), (pointer: coarse) {
body.chatgpt-reference-v1 .composer-attachment-rail {
gap: 0;
}
body.chatgpt-reference-v1 .composer-attachment-nav {
display: none !important;
}
body.chatgpt-reference-v1 .composer-attachment-rail .composer-attachment-lane:not([hidden]) {
cursor: auto;
padding-inline: 2px;
-webkit-overflow-scrolling: touch;
}
body.chatgpt-reference-v1 .composer-attachment-dialog {
width: 100%;
max-width: none;
max-height: min(78dvh, 680px);
margin: auto 0 0;
border-radius: var(--wizon-ai-radius-sheet) var(--wizon-ai-radius-sheet) 0 0;
}
body.chatgpt-reference-v1 .composer-attachment-dialog-list {
scrollbar-width: none;
padding-bottom: calc(16px + env(safe-area-inset-bottom));
}
body.chatgpt-reference-v1 .composer-attachment-dialog-list::-webkit-scrollbar {
display: none;
}
}
body.chatgpt-reference-v1 .chatgpt-composer-shell.has-attachment .composer-prompt-body {
padding-top: 4px;
border-top: 1px solid color-mix(in srgb, var(--cg-text, #0d0d0d) 8%, transparent);
}
body.chatgpt-reference-v1 .composer-chip-removable.composer-attachment-card {
display: flex;
flex: 0 0 auto;
align-items: center;
gap: 0;
width: auto;
max-width: min(240px, calc(100vw - 80px));
min-height: 44px;
padding: 0 4px 0 6px;
border: 1px solid color-mix(in srgb, var(--cg-text, #0d0d0d) 11%, transparent);
border-radius: 13px;
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 4%, #fff);
box-shadow: 0 1px 2px rgba(0, 0, 0, 0.035);
}
body.chatgpt-reference-v1 .composer-attachment-open {
display: flex;
flex: 1 1 auto;
align-items: center;
gap: 8px;
min-width: 0;
height: 42px;
padding: 0 7px 0 0;
border: 0;
border-radius: 11px 0 0 11px;
background: transparent;
color: inherit;
font: inherit;
text-align: left;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-open:focus-visible {
outline: 2px solid var(--wds-brand-blue, #155eef);
outline-offset: 1px;
}
body.chatgpt-reference-v1 .composer-chip-removable.composer-attachment-policy-card {
display: grid;
grid-template-columns: minmax(0, 1fr) 1px 31px;
grid-template-rows: auto auto;
width: min(430px, calc(100vw - 80px));
max-width: min(430px, calc(100vw - 80px));
padding: 5px 4px 5px 6px;
}
body.chatgpt-reference-v1 .composer-attachment-policy-copy {
grid-row: 1;
grid-column: 1;
height: auto;
min-height: 42px;
cursor: default;
}
body.chatgpt-reference-v1 .composer-attachment-policy-card .composer-attachment-index-state {
max-width: 330px;
white-space: normal;
}
body.chatgpt-reference-v1 .composer-attachment-policy-actions {
display: flex;
grid-row: 2;
grid-column: 1 / -1;
gap: 6px;
padding: 3px 2px 0 38px;
}
body.chatgpt-reference-v1 .composer-attachment-policy-actions button {
min-height: 30px;
padding: 0 9px;
border: 1px solid color-mix(in srgb, var(--cg-text) 13%, transparent);
border-radius: var(--ds-radius-sm, 8px);
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--cg-text-meta-size);
font-weight: var(--cg-text-label-active-weight);
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-policy-actions button:hover,
body.chatgpt-reference-v1 .composer-attachment-policy-actions button:focus-visible {
border-color: color-mix(in srgb, var(--ad-blue) 38%, transparent);
background: color-mix(in srgb, var(--ad-blue) 9%, transparent);
outline: 2px solid var(--ad-blue);
outline-offset: 1px;
}
body.chatgpt-reference-v1 .composer-attachment-policy-card .composer-attachment-separator {
grid-row: 1;
grid-column: 2;
}
body.chatgpt-reference-v1 .composer-attachment-policy-card .composer-chip-remove {
grid-row: 1;
grid-column: 3;
}
body.chatgpt-reference-v1 .composer-range-context-copy {
cursor: default;
}
body.chatgpt-reference-v1 .composer-range-quick-action {
display: grid;
flex: 0 0 auto;
min-width: var(--wds-control-height-md);
height: var(--wds-control-height-md);
padding: 0 var(--ds-space-2);
place-items: center;
border: 0;
border-radius: var(--ds-radius-sm);
background: transparent;
color: var(--wds-color-text);
font: inherit;
font-size: var(--ds-text-caption-13);
font-weight: var(--ds-weight-medium);
cursor: pointer;
}
@media (hover: hover) {
body.chatgpt-reference-v1 .composer-range-quick-action:hover {
background: color-mix(in srgb, var(--wds-color-text) 8%, transparent);
}
}
body.chatgpt-reference-v1 .composer-range-quick-action:focus-visible {
outline: 2px solid var(--wds-color-focus-ring);
outline-offset: -2px;
}
body.chatgpt-reference-v1 .composer-range-quick-action:disabled {
color: var(--wds-color-text-muted);
cursor: default;
opacity: 0.55;
}
@media (pointer: coarse) {
.artifact-titlebar-button[data-artifact-range-ask] {
width: 44px;
height: 44px;
}
}
body.chatgpt-reference-v1 .composer-attachment-card .composer-attachment-file-icon {
flex: 0 0 auto;
width: 30px;
height: 30px;
border-radius: 9px;
overflow: hidden;
box-shadow: inset 0 0 0 1px var(--cg-menu-border);
}
/* The canonical 200x241 artwork paints its extension badge to y=240. Filling the
30x30 host therefore puts that ink under the host's radius-9 clip even though
object-fit:contain reports a healthy image. Keep the shared host mask, but give
attachment artwork a real two-pixel safe area on every side. */
body.chatgpt-reference-v1 .composer-attachment-card
.composer-attachment-file-icon > .wizon-file-type-icon--attachment {
width: 26px;
height: 26px;
margin: 2px;
}
body.chatgpt-reference-v1 .composer-attachment-card .composer-attachment-file-icon svg {
width: 18px;
height: 18px;
}
body.chatgpt-reference-v1 .composer-attachment-card .composer-attachment-copy {
display: flex;
flex-direction: column;
justify-content: center;
min-width: 0;
}
body.chatgpt-reference-v1 .composer-attachment-card .composer-attachment-type {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
body.chatgpt-reference-v1 .composer-attachment-card .composer-chip-label {
display: block;
overflow: hidden;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-caption-13, 13px);
font-weight: 500;
line-height: 18px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-attachment-index-state {
display: flex;
align-items: center;
gap: 4px;
color: var(--cg-muted);
font-size: smaller;
line-height: 14px;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-attachment-index-state::before {
width: 6px;
height: 6px;
border-radius: 50%;
background: var(--ad-blue);
content: "";
}
body.chatgpt-reference-v1 .composer-attachment-index-state[data-state="failed"] {
color: var(--cg-danger-fg);
}
body.chatgpt-reference-v1 .composer-attachment-index-state[data-state="failed"]::before {
background: currentColor;
}
body.chatgpt-reference-v1 .composer-attachment-index-state[data-state="background"] {
color: var(--ad-blue);
}
body.chatgpt-reference-v1 .composer-attachment-index-state[data-state="degraded"] {
color: var(--cg-warning-fg);
}
body.chatgpt-reference-v1 .composer-attachment-index-state[data-state="degraded"]::before {
background: currentColor;
}
body.chatgpt-reference-v1 .composer-attachment-progress {
position: relative;
display: block;
appearance: none;
width: 100%;
height: 2px;
margin-top: 2px;
overflow: hidden;
border: 0;
border-radius: var(--ds-radius-pill);
background: var(--cg-menu-border);
}
body.chatgpt-reference-v1 .composer-attachment-progress::-webkit-progress-bar {
background: var(--cg-menu-border);
}
body.chatgpt-reference-v1 .composer-attachment-progress::-webkit-progress-value,
body.chatgpt-reference-v1 .composer-attachment-progress::-moz-progress-bar {
border-radius: var(--ds-radius-pill);
background: var(--ad-blue);
}
body.chatgpt-reference-v1 .composer-attachment-separator {
flex: 0 0 1px;
width: 1px;
height: 22px;
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 11%, transparent);
}
body.chatgpt-reference-v1 .composer-attachment-retry {
display: grid;
flex: 0 0 auto;
width: 30px;
height: 38px;
padding: 0;
place-items: center;
border: 0;
border-radius: var(--ds-radius-sm);
background: transparent;
color: var(--cg-warning-fg);
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-attachment-retry:hover,
body.chatgpt-reference-v1 .composer-attachment-retry:focus-visible {
background: color-mix(in srgb, var(--cg-warning-fg) 10%, transparent);
outline: none;
}
body.chatgpt-reference-v1 .composer-attachment-retry svg {
width: 16px;
height: 16px;
}
body.chatgpt-reference-v1 .composer-attachment-retry:disabled {
color: var(--cg-muted);
cursor: progress;
opacity: 0.72;
}
body.chatgpt-reference-v1 .composer-attachment-card .composer-chip-remove {
width: 31px;
height: 38px;
margin-left: 2px;
color: var(--cg-muted, #6f6f6f);
}
body.chatgpt-reference-v1 .composer-attachment-card:hover,
body.chatgpt-reference-v1 .composer-attachment-card:focus-within {
border-color: color-mix(in srgb, var(--cg-text, #0d0d0d) 17%, transparent);
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 7%, #fff);
color: var(--cg-text, #0d0d0d);
}
/* Success is announced once through the existing polite live region, but does not become a
persistent green instruction above the prompt. Progress and error remain visible in place. */
body.chatgpt-reference-v1 .composer-attachment-status[data-tone="success"] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
padding: 0 !important;
margin: -1px !important;
overflow: hidden !important;
clip: rect(0, 0, 0, 0) !important;
white-space: nowrap !important;
border: 0 !important;
}
body.chatgpt-reference-v1 .composer-attachment-preview {
position: fixed;
z-index: 1250;
width: min(352px, calc(100vw - 24px));
padding: 14px;
border: 1px solid color-mix(in srgb, var(--cg-text, #0d0d0d) 12%, transparent);
border-radius: var(--ds-radius-lg, 18px);
background: var(--cg-surface, #fff);
color: var(--cg-text, #0d0d0d);
box-shadow: 0 18px 48px rgba(0, 0, 0, 0.16), 0 2px 8px rgba(0, 0, 0, 0.08);
}
body.chatgpt-reference-v1 .composer-attachment-preview[hidden],
body.chatgpt-reference-v1 .composer-attachment-preview-host[hidden] {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-preview-host[open] {
position: fixed;
inset: 0;
width: 100vw;
max-width: none;
height: 100dvh;
max-height: none;
margin: 0;
padding: 0;
overflow: hidden;
border: 0;
background: transparent;
}
body.chatgpt-reference-v1 .composer-attachment-preview-host::backdrop {
background: transparent;
}
body.chatgpt-reference-v1 .composer-attachment-preview-header {
display: flex;
align-items: center;
gap: 10px;
min-width: 0;
}
body.chatgpt-reference-v1 .composer-attachment-preview-icon {
display: inline-grid;
flex: 0 0 auto;
place-items: center;
width: 42px;
height: 42px;
overflow: hidden;
border-radius: 11px;
background: var(--cg-surface);
color: var(--ad-blue, var(--wds-brand-blue, #155eef));
box-shadow: inset 0 0 0 1px var(--cg-menu-border);
}
body.chatgpt-reference-v1 .composer-attachment-preview-icon svg {
width: 19px;
height: 19px;
}
body.chatgpt-reference-v1 .composer-attachment-preview-heading {
display: grid;
min-width: 0;
gap: 2px;
}
body.chatgpt-reference-v1 .composer-attachment-preview-heading strong {
overflow: hidden;
font-size: var(--ds-text-body-14, 14px);
font-weight: 600;
line-height: 20px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-attachment-preview-heading > span {
display: flex;
align-items: center;
gap: 6px;
overflow: hidden;
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12, 12px);
line-height: 16px;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-attachment-preview-heading i {
color: color-mix(in srgb, var(--cg-muted, #6f6f6f) 55%, transparent);
font-style: normal;
}
body.chatgpt-reference-v1 .composer-attachment-preview-content {
margin-top: 12px;
overflow: hidden;
border: 1px solid color-mix(in srgb, var(--cg-text, #0d0d0d) 9%, transparent);
border-radius: 13px;
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 2.5%, #fff);
}
body.chatgpt-reference-v1 .composer-attachment-preview-kicker {
display: block;
padding: 10px 12px 0;
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12, 12px);
font-weight: 500;
line-height: 16px;
}
body.chatgpt-reference-v1 .composer-attachment-preview-image {
display: block;
width: 100%;
height: 172px;
margin-top: 8px;
object-fit: cover;
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 5%, #fff);
}
body.chatgpt-reference-v1 .composer-attachment-preview-text,
body.chatgpt-reference-v1 .composer-attachment-preview-empty {
display: -webkit-box;
overflow: hidden;
margin: 7px 12px 12px;
color: var(--cg-text, #0d0d0d);
font-size: var(--ds-text-caption-13, 13px);
line-height: 20px;
white-space: pre-wrap;
overflow-wrap: anywhere;
-webkit-box-orient: vertical;
-webkit-line-clamp: 7;
}
body.chatgpt-reference-v1 .composer-attachment-preview-empty {
color: var(--cg-muted, #6f6f6f);
}
body.chatgpt-reference-v1 .composer-attachment-preview-hint {
display: block;
margin-top: 10px;
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12, 12px);
line-height: 16px;
}
body.chatgpt-reference-v1 .composer-document-preview-surface {
box-sizing: border-box;
min-width: 0;
color: var(--cg-text, #0d0d0d);
}
body.chatgpt-reference-v1 .composer-document-preview-quality {
display: inline-flex;
align-items: center;
align-self: flex-start;
min-height: 18px;
width: fit-content;
margin-top: 3px;
padding: 1px 6px;
border: 1px solid color-mix(in srgb, var(--wds-brand-blue, #155eef) 20%, transparent);
border-radius: var(--ds-radius-pill, 999px);
background: color-mix(in srgb, var(--wds-brand-blue, #155eef) 8%, transparent);
color: color-mix(in srgb, var(--wds-brand-blue, #155eef) 82%, var(--cg-text, #0d0d0d));
font-size: 10px;
font-weight: 600;
line-height: 14px;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-document-preview-quality.is-pending {
visibility: hidden;
}
body.chatgpt-reference-v1 .composer-document-preview-quality[data-preview-quality="converted"],
body.chatgpt-reference-v1 .composer-document-preview-quality[data-preview-quality="limited"] {
border-color: color-mix(in srgb, #f79009 25%, transparent);
background: color-mix(in srgb, #f79009 10%, transparent);
color: #9a4e00;
}
body.chatgpt-reference-v1 .composer-document-preview-quality[data-preview-quality="unavailable"] {
border-color: color-mix(in srgb, var(--cg-muted, #6f6f6f) 24%, transparent);
background: color-mix(in srgb, var(--cg-muted, #6f6f6f) 10%, transparent);
color: var(--cg-muted, #6f6f6f);
}
body.chatgpt-reference-v1 .composer-attachment-preview .composer-document-preview-surface {
height: 226px;
max-height: 226px;
margin-top: 7px;
overflow: auto;
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-loading,
body.chatgpt-reference-v1 .composer-document-preview-surface.is-state {
display: grid;
grid-template-columns: auto minmax(0, 1fr);
align-items: center;
gap: 9px;
min-height: 92px;
padding: 14px 12px;
color: var(--cg-muted, #6f6f6f);
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-loading p,
body.chatgpt-reference-v1 .composer-document-preview-surface.is-state p {
margin: 0;
font-size: var(--ds-text-caption-13, 13px);
line-height: 20px;
}
body.chatgpt-reference-v1 .composer-document-preview-state-copy {
display: grid;
grid-column: 1 / -1;
gap: 12px;
}
body.chatgpt-reference-v1 .composer-document-preview-state-actions {
display: flex;
flex-wrap: wrap;
gap: 8px;
}
body.chatgpt-reference-v1 .composer-document-preview-state-actions button {
min-height: 34px;
padding: 6px 10px;
border: 1px solid color-mix(in srgb, currentColor 28%, transparent);
border-radius: var(--ds-radius-sm, 8px);
background: transparent;
color: inherit;
font: inherit;
font-size: var(--ds-text-caption-13, 13px);
font-weight: 600;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-document-preview-state-actions button:hover,
body.chatgpt-reference-v1 .composer-document-preview-state-actions button:focus-visible {
background: color-mix(in srgb, currentColor 10%, transparent);
}
body.chatgpt-reference-v1 .composer-document-preview-spinner {
width: 16px;
height: 16px;
border: 2px solid color-mix(in srgb, var(--cg-muted, #6f6f6f) 22%, transparent);
border-top-color: var(--wds-brand-blue, #155eef);
border-radius: 50%;
animation: composer-document-preview-spin 700ms linear infinite;
}
@keyframes composer-document-preview-spin {
to { transform: rotate(360deg); }
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-visual {
display: grid;
place-items: center;
overflow: hidden;
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 4%, #fff);
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-visual img {
display: block;
width: 100%;
max-height: 226px;
object-fit: contain;
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-text pre {
box-sizing: border-box;
min-height: 92px;
margin: 0;
padding: 12px;
overflow: auto;
color: var(--cg-text, #0d0d0d);
font: 12px/1.55 ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, monospace;
tab-size: 2;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
body.chatgpt-reference-v1 .composer-document-preview-note {
margin: 0;
padding: 8px 12px;
border-top: 1px solid color-mix(in srgb, var(--cg-text, #0d0d0d) 8%, transparent);
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12, 12px);
line-height: 16px;
}
body.chatgpt-reference-v1 .composer-document-preview-sheet-tabs {
display: flex;
gap: 4px;
padding: 8px 8px 0;
overflow-x: auto;
}
body.chatgpt-reference-v1 .composer-document-preview-sheet-tabs button {
flex: 0 0 auto;
min-height: 30px;
padding: 4px 9px;
border: 1px solid transparent;
border-radius: 8px;
background: transparent;
color: var(--cg-muted, #6f6f6f);
font: inherit;
font-size: var(--ds-text-caption-12, 12px);
}
body.chatgpt-reference-v1 .composer-document-preview-sheet-tabs button[aria-selected="true"] {
border-color: color-mix(in srgb, var(--cg-text, #0d0d0d) 10%, transparent);
background: var(--cg-surface, #fff);
color: var(--cg-text, #0d0d0d);
}
body.chatgpt-reference-v1 .composer-document-preview-table-wrap {
overflow: auto;
}
body.chatgpt-reference-v1 .composer-document-preview-table-wrap table {
width: max-content;
min-width: 100%;
border-spacing: 0;
border-collapse: separate;
font-size: var(--ds-text-caption-12, 12px);
line-height: 18px;
}
body.chatgpt-reference-v1 .composer-document-preview-table-wrap th,
body.chatgpt-reference-v1 .composer-document-preview-table-wrap td {
max-width: 240px;
padding: 6px 9px;
overflow: hidden;
border-right: 1px solid color-mix(in srgb, var(--cg-text, #0d0d0d) 7%, transparent);
border-bottom: 1px solid color-mix(in srgb, var(--cg-text, #0d0d0d) 7%, transparent);
text-align: left;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-document-preview-table-wrap th {
position: sticky;
top: 0;
z-index: 1;
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 5%, var(--cg-surface, #fff));
font-weight: 600;
}
body.chatgpt-reference-v1 .composer-document-preview-table-wrap .is-search-target {
position: relative;
z-index: 2;
background: color-mix(in srgb, var(--ds-color-accent) 14%, var(--cg-surface));
box-shadow: inset 0 0 0 2px var(--ds-color-accent);
}
body.chatgpt-reference-v1 .composer-document-preview-surface mark[data-document-preview-search-target] {
padding: 1px 2px;
border-radius: var(--ds-radius-xs);
background: color-mix(in srgb, var(--ds-color-accent) 18%, var(--cg-surface));
color: inherit;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-document-pane {
width: min(1120px, calc(100% - var(--chatgpt-route-gap-lg) * 2));
max-width: min(1120px, calc(100% - var(--chatgpt-route-gap-lg) * 2));
max-height: min(72svh, 920px);
}
body.chatgpt-reference-v1 .chatgpt-library-preview-document-pane > .composer-document-preview-surface {
min-height: min(58svh, 720px);
margin-top: var(--chatgpt-route-gap-md);
overflow: auto;
border-top: 1px solid var(--cg-menu-border);
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 3%, var(--cg-surface, #fff));
}
body.chatgpt-reference-v1 .chatgpt-library-preview-document-pane > .composer-document-preview-surface.is-loading,
body.chatgpt-reference-v1 .chatgpt-library-preview-document-pane > .composer-document-preview-surface.is-state {
place-content: center;
grid-template-columns: auto minmax(0, 340px);
}
body.chatgpt-reference-v1 .chatgpt-library-preview-document-pane > .composer-document-preview-surface.is-visual img {
width: auto;
max-width: 100%;
max-height: min(62svh, 800px);
}
body.chatgpt-reference-v1 .chatgpt-library-preview-document-pane > .composer-document-preview-surface.is-text pre {
min-height: min(58svh, 720px);
padding: 24px 28px;
background: var(--cg-surface, #fff);
font-size: 14px;
line-height: 1.65;
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-pdf {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
overflow: hidden !important;
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-pdf.has-external-toolbar {
grid-template-rows: auto minmax(0, 1fr);
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-pdf.has-external-toolbar > .document-viewer-find {
grid-row: 1;
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-pdf.has-external-toolbar > .document-viewer-layout {
grid-row: 2;
}
/* doc 171 S2c — the live workbook. Same three-band grid as the PDF viewer (toolbar, notice,
stage) so both full-viewer surfaces share one chrome rhythm. The stage must get a real
height: Univer measures its container to lay out the canvas, and an auto-height parent
collapses it to nothing. */
body.chatgpt-reference-v1 .composer-document-preview-surface.is-workbook {
display: grid;
grid-template-rows: auto auto minmax(0, 1fr);
overflow: hidden !important;
}
body.chatgpt-reference-v1 .composer-document-preview-workbook {
min-height: 320px;
height: 100%;
}
/* Deliberately NOT .composer-document-preview-toolbar: that one sizes every button to a
34x34 icon box, which turned this text label into wrapped characters spilling across the
sheet (2026-08-10 live defect). */
body.chatgpt-reference-v1 .composer-document-preview-workbook-toolbar {
display: flex;
align-items: center;
gap: 10px;
padding: 8px 12px;
border-bottom: 1px solid color-mix(in srgb, var(--cg-text) 8%, transparent);
background: var(--cg-surface);
}
body.chatgpt-reference-v1 .composer-document-preview-workbook-save {
flex: 0 0 auto;
min-height: 32px;
padding: 0 14px;
border: 0;
border-radius: var(--ds-radius-pill);
background: var(--cg-text);
color: var(--cg-surface);
font-size: var(--ds-text-caption-13);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-document-preview-workbook-save:disabled {
opacity: 0.4;
cursor: not-allowed;
}
/* P3 sheet -> CPQ proposal bridge. A distinct outline treatment (not a solid fill like
Save) on purpose: this action creates a §13.4 PROPOSAL, not a saved version -- the
weight of the button should not imply it commits anything by itself. */
body.chatgpt-reference-v1 .composer-document-preview-workbook-cpq-proposal {
flex: 0 0 auto;
min-height: 32px;
padding: 0 14px;
border: 1px solid color-mix(in srgb, var(--cg-text) 24%, transparent);
border-radius: var(--ds-radius-pill);
background: transparent;
color: var(--cg-text);
font-size: var(--ds-text-caption-13);
font-weight: 600;
white-space: nowrap;
cursor: pointer;
}
body.chatgpt-reference-v1 .composer-document-preview-workbook-cpq-proposal:disabled {
opacity: 0.4;
cursor: not-allowed;
}
body.chatgpt-reference-v1 .workbook-cpq-proposal-preview {
display: grid;
gap: 8px;
margin-top: 8px;
padding: 8px;
border: 1px solid color-mix(in srgb, var(--cg-text) 12%, transparent);
border-radius: var(--ds-radius-md);
}
body.chatgpt-reference-v1 .workbook-cpq-proposal-preview p {
margin: 0;
}
body.chatgpt-reference-v1 .composer-document-preview-workbook-status {
min-width: 0;
overflow: hidden;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12, 12px);
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-document-preview-note.is-risk {
display: grid;
gap: 4px;
border-top: 1px solid color-mix(in srgb, var(--cg-warning-fg) 32%, transparent);
background: color-mix(in srgb, var(--cg-warning-fg) 8%, transparent);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .composer-document-preview-note.is-risk label {
display: flex;
align-items: center;
gap: 6px;
cursor: pointer;
}
body.chatgpt-reference-v1 .workbook-version-comparison {
display: grid;
gap: 8px;
margin-top: 8px;
padding-top: 8px;
border-top: 1px solid color-mix(in srgb, var(--cg-text) 12%, transparent);
}
body.chatgpt-reference-v1 .workbook-version-comparison p,
body.chatgpt-reference-v1 .workbook-version-comparison ul {
margin: 0;
}
body.chatgpt-reference-v1 .workbook-version-comparison-sheet {
display: grid;
gap: 6px;
min-width: 0;
margin: 0;
padding: 8px;
border: 1px solid color-mix(in srgb, var(--cg-text) 12%, transparent);
border-radius: var(--ds-radius-md);
}
body.chatgpt-reference-v1 .workbook-version-comparison-sheet ul {
display: grid;
gap: 4px;
padding-left: 18px;
}
body.chatgpt-reference-v1 .workbook-version-comparison-sheet li label {
align-items: flex-start;
}
body.chatgpt-reference-v1 .workbook-version-comparison-sheet li span {
min-width: 0;
overflow-wrap: anywhere;
}
body.chatgpt-reference-v1 .workbook-version-comparison-sheet small {
display: block;
margin-left: 24px;
color: var(--cg-muted);
}
body.chatgpt-reference-v1 .workbook-version-structure-warning {
display: grid;
gap: 4px;
padding: 8px;
border-radius: var(--ds-radius-md);
background: color-mix(in srgb, var(--cg-warning-fg) 10%, transparent);
}
body.chatgpt-reference-v1 .workbook-version-comparison-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.chatgpt-reference-v1 .workbook-ai-delta-preview {
display: grid;
gap: 8px;
margin-top: 8px;
padding: 8px;
border: 1px solid color-mix(in srgb, var(--cg-text) 12%, transparent);
border-radius: var(--ds-radius-md);
}
body.chatgpt-reference-v1 .workbook-ai-delta-preview p {
margin: 0;
}
body.chatgpt-reference-v1 .workbook-ai-delta-preview ul {
display: grid;
gap: 4px;
margin: 0;
padding: 0;
list-style: none;
}
/* Same emphasis token .workbook-version-structure-warning already uses for
"review before you commit" -- an AI-proposed cell change is exactly that. */
body.chatgpt-reference-v1 .workbook-ai-delta-preview-cell {
display: flex;
flex-wrap: wrap;
gap: 6px;
padding: 6px 8px;
border-radius: var(--ds-radius-md);
background: color-mix(in srgb, var(--cg-warning-fg) 10%, transparent);
}
body.chatgpt-reference-v1 .workbook-ai-delta-preview-cell span {
min-width: 0;
overflow-wrap: anywhere;
color: var(--cg-muted);
}
body.chatgpt-reference-v1 .workbook-ai-delta-preview-actions {
display: flex;
flex-wrap: wrap;
gap: 6px;
}
body.chatgpt-reference-v1 [data-workbook-history] button {
min-height: 28px;
padding: 3px 9px;
border: 1px solid color-mix(in srgb, var(--cg-text) 14%, transparent);
border-radius: var(--ds-radius-pill);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
cursor: pointer;
}
body.chatgpt-reference-v1 [data-workbook-history] button:disabled {
opacity: 0.45;
cursor: not-allowed;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar {
position: sticky;
top: 0;
z-index: 2;
display: flex;
align-items: center;
gap: 8px;
min-height: 44px;
padding: 6px 12px;
border-bottom: 1px solid var(--cg-menu-border);
background: color-mix(in srgb, var(--cg-surface, #fff) 94%, transparent);
backdrop-filter: blur(12px);
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar button {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: var(--cg-text, #0d0d0d);
font: inherit;
font-size: 18px;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar button:hover,
body.chatgpt-reference-v1 .composer-document-preview-toolbar button:focus-visible {
background: var(--cg-hover-soft);
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar [data-pdf-sidebar][aria-pressed="true"] {
/* 눌림은 «상태»이므로 파랑을 유지한다(doc 345 §6 — 토글 ON 과 같은 근거).
줄이는 것은 «종»뿐: --wds-color-primary-text 는 WDS 기본 #1252b2 라 포털의 정보
파랑 --ad-blue(#155eef)와 다른 파랑이 하나 더 생긴다. A 로 흡수한다. */
background: var(--wds-color-primary-container);
color: var(--ad-blue);
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar button svg {
width: 18px;
height: 18px;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar > span:not(.composer-document-preview-toolbar-spacer) {
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-13, 13px);
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar output {
min-width: 42px;
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12, 12px);
font-variant-numeric: tabular-nums;
text-align: center;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar [data-pdf-viewer-status] {
position: absolute !important;
width: 1px !important;
height: 1px !important;
min-width: 1px !important;
padding: 0 !important;
overflow: hidden !important;
clip-path: inset(50%) !important;
white-space: nowrap !important;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar-divider {
width: 1px;
height: 22px;
background: color-mix(in srgb, currentColor 16%, transparent);
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar select,
body.chatgpt-reference-v1 .document-viewer-page-form input,
body.chatgpt-reference-v1 .document-viewer-find input {
min-height: 32px;
border: 1px solid color-mix(in srgb, currentColor 18%, transparent);
border-radius: 8px;
background: color-mix(in srgb, var(--cg-surface, #fff) 92%, transparent);
color: inherit;
font: inherit;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar select {
max-width: 112px;
padding: 0 28px 0 9px;
font-size: var(--ds-text-caption-12, 12px);
}
body.chatgpt-reference-v1 .document-viewer-scale-control {
display: inline-flex;
min-width: 0;
}
body.chatgpt-reference-v1 .document-viewer-page-form {
display: inline-flex;
align-items: center;
gap: 6px;
color: var(--cg-muted, #6f6f6f);
}
body.chatgpt-reference-v1 .document-viewer-page-form input {
width: 48px;
padding: 0 6px;
text-align: center;
font-variant-numeric: tabular-nums;
}
body.chatgpt-reference-v1 .document-viewer-find {
z-index: 3;
display: flex;
align-items: center;
gap: 6px;
min-height: 44px;
padding: 6px 12px;
border-bottom: 1px solid var(--cg-menu-border);
background: color-mix(in srgb, var(--cg-surface, #fff) 96%, transparent);
}
body.chatgpt-reference-v1 .document-viewer-find[hidden] {
display: none;
}
body.chatgpt-reference-v1 .document-viewer-find input {
flex: 0 1 320px;
min-width: 140px;
padding: 0 10px;
}
body.chatgpt-reference-v1 .document-viewer-find button {
display: inline-grid;
place-items: center;
width: 32px;
height: 32px;
padding: 0;
border: 0;
border-radius: 8px;
background: transparent;
color: inherit;
}
body.chatgpt-reference-v1 .document-viewer-find button:hover,
body.chatgpt-reference-v1 .document-viewer-find button:focus-visible {
background: color-mix(in srgb, currentColor 10%, transparent);
}
body.chatgpt-reference-v1 .document-viewer-find button svg {
width: 17px;
height: 17px;
}
body.chatgpt-reference-v1 .document-viewer-find output {
flex: 1 1 auto;
min-width: 96px;
color: var(--cg-muted, #6f6f6f);
font-size: var(--ds-text-caption-12, 12px);
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar-spacer {
flex: 1 1 auto;
}
body.chatgpt-reference-v1 .document-viewer-layout {
display: grid;
grid-template-columns: 196px minmax(0, 1fr);
min-width: 0;
min-height: 0;
overflow: hidden;
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-sidebar-collapsed .document-viewer-layout {
grid-template-columns: 0 minmax(0, 1fr);
}
body.chatgpt-reference-v1 .document-viewer-sidebar {
min-width: 0;
overflow: auto;
border-right: 1px solid color-mix(in srgb, currentColor 13%, transparent);
background: color-mix(in srgb, var(--cg-text, #0d0d0d) 5%, var(--cg-surface, #fff));
transition: opacity 140ms ease;
}
body.chatgpt-reference-v1 .is-sidebar-collapsed .document-viewer-sidebar {
overflow: hidden;
opacity: 0;
pointer-events: none;
}
body.chatgpt-reference-v1 .document-viewer-thumbnails {
display: grid;
gap: 12px;
justify-items: center;
padding: 14px 10px 24px;
}
body.chatgpt-reference-v1 .document-viewer-thumbnail {
display: grid;
justify-items: center;
gap: 6px;
width: 164px;
padding: 8px;
border: 2px solid transparent;
border-radius: 8px;
background: transparent;
color: inherit;
font: inherit;
font-size: var(--ds-text-caption-12, 12px);
}
body.chatgpt-reference-v1 .document-viewer-thumbnail:hover,
body.chatgpt-reference-v1 .document-viewer-thumbnail:focus-visible {
background: color-mix(in srgb, currentColor 8%, transparent);
}
body.chatgpt-reference-v1 .document-viewer-thumbnail.is-active {
border-color: var(--wds-brand-blue, #155eef);
background: color-mix(in srgb, var(--wds-brand-blue, #155eef) 10%, transparent);
}
body.chatgpt-reference-v1 .document-viewer-thumbnail canvas {
display: block;
max-width: 144px;
min-height: 90px;
background: #fff;
box-shadow: 0 3px 14px rgba(15, 23, 42, 0.18);
}
body.chatgpt-reference-v1 .document-viewer-main {
position: relative;
min-width: 0;
min-height: 0;
}
body.chatgpt-reference-v1 .document-viewer-stage {
position: absolute;
inset: 0;
overflow: auto;
background: #25282e;
outline: none;
}
body.chatgpt-reference-v1 .document-viewer-stage:focus-visible {
box-shadow: inset 0 0 0 2px var(--wds-brand-blue, #155eef);
}
body.chatgpt-reference-v1 .document-viewer-stage > .pdfViewer {
position: relative;
min-height: 100%;
padding: 18px 0 44px;
--page-border: 1px solid rgba(0, 0, 0, 0.14);
}
body.chatgpt-reference-v1 .document-viewer-stage .pdfViewer .page {
margin: 0 auto 14px;
box-shadow: 0 10px 32px rgba(0, 0, 0, 0.28);
}
body.chatgpt-reference-v1 .composer-document-preview-canvas-wrap {
min-height: 0;
padding: 20px 12px 36px;
overflow: auto;
text-align: center;
}
body.chatgpt-reference-v1 .composer-document-preview-canvas-wrap canvas {
display: inline-block;
max-width: none;
background: #fff;
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.16);
}
body.chatgpt-reference-v1 .composer-document-preview-surface.is-hwp {
display: grid;
grid-template-rows: auto minmax(0, 1fr);
overflow: hidden !important;
}
body.chatgpt-reference-v1 .composer-document-preview-hwp-wrap {
display: grid;
grid-template-columns: auto minmax(0, auto);
place-content: center;
align-items: center;
gap: 9px;
min-height: 0;
padding: 16px;
overflow: auto;
color: var(--cg-muted, #6f6f6f);
text-align: center;
}
body.chatgpt-reference-v1 .composer-document-preview-hwp-wrap > p {
margin: 0;
font-size: var(--ds-text-caption-13, 13px);
line-height: 20px;
}
body.chatgpt-reference-v1 .composer-document-preview-hwp-wrap > img {
display: block;
grid-column: 1 / -1;
max-width: none;
height: auto;
margin: auto;
background: #fff;
box-shadow: 0 10px 32px rgba(15, 23, 42, 0.16);
}
body.chatgpt-reference-v1 .composer-attachment-preview .composer-document-preview-surface.is-hwp {
display: block;
}
body.chatgpt-reference-v1 .composer-attachment-preview .composer-document-preview-hwp-wrap {
width: 100%;
height: 226px;
padding: 0;
overflow: hidden;
}
body.chatgpt-reference-v1 .composer-attachment-preview .composer-document-preview-hwp-wrap > img {
width: 100% !important;
max-width: 100%;
max-height: 226px;
object-fit: contain;
box-shadow: none;
}
/* Composer attachment full preview reuses the common media viewer's shell/head/stage/icon
primitives and dark canvas. Its content state stays separate because the image viewer's
carousel/pan state machine cannot represent PDF pages, sheets, or selectable text. */
body.chatgpt-reference-v1 .composer-attachment-media-backdrop {
position: fixed;
inset: 0;
z-index: 1250;
display: grid;
background: rgb(8 9 11 / 88%);
color: #fff;
}
body.chatgpt-reference-v1 .composer-attachment-media-dialog {
position: relative;
display: grid;
grid-template-rows: auto minmax(0, 1fr);
width: 100vw;
height: 100dvh;
min-width: 0;
min-height: 0;
overflow: hidden;
background: transparent;
outline: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-head {
position: relative;
z-index: 3;
display: grid;
grid-template-columns: minmax(220px, 1fr) minmax(520px, auto) auto;
align-items: center;
gap: 18px;
min-height: 68px;
padding: 8px 18px 8px 24px;
border-bottom: 1px solid color-mix(in srgb, var(--wds-color-inverse-on-surface) 10%, transparent);
background: color-mix(in srgb, var(--wds-neutral-tonal-t6) 96%, transparent);
box-shadow: var(--cg-dialog-shadow);
}
body.chatgpt-reference-v1 .composer-attachment-media-file,
body.chatgpt-reference-v1 .composer-attachment-media-actions {
display: flex;
align-items: center;
min-width: 0;
gap: 10px;
}
body.chatgpt-reference-v1 .composer-attachment-media-actions.image-preview-head-actions {
grid-column: 3;
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools {
display: flex;
min-width: 0;
justify-content: center;
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools:empty {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar {
position: static;
min-width: 0;
min-height: 44px;
padding: 0;
overflow: visible;
border: 0;
background: transparent;
color: var(--wds-color-inverse-on-surface);
backdrop-filter: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar button {
color: var(--wds-color-inverse-on-surface);
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar button:hover,
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar button:focus-visible {
background: color-mix(in srgb, var(--wds-color-inverse-on-surface) 10%, transparent);
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar [data-pdf-sidebar][aria-pressed="true"] {
background: color-mix(in srgb, var(--wds-color-inverse-primary) 22%, transparent);
color: var(--wds-color-inverse-primary);
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar > span:not(.composer-document-preview-toolbar-spacer),
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar output {
color: color-mix(in srgb, var(--wds-color-inverse-on-surface) 68%, transparent);
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar select,
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .document-viewer-page-form input {
border-color: color-mix(in srgb, var(--wds-color-inverse-on-surface) 18%, transparent);
background: color-mix(in srgb, var(--wds-color-inverse-on-surface) 8%, transparent);
color: var(--wds-color-inverse-on-surface);
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar-spacer {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-dialog .composer-attachment-preview-heading strong {
color: #fff;
}
body.chatgpt-reference-v1 .composer-attachment-media-dialog .composer-attachment-preview-heading > span {
color: rgba(255, 255, 255, 0.62);
}
body.chatgpt-reference-v1 .composer-attachment-media-icon-button {
width: 48px;
height: 48px;
color: #fff;
}
body.chatgpt-reference-v1 .composer-attachment-media-icon-button svg {
width: 20px;
height: 20px;
}
body.chatgpt-reference-v1 .composer-attachment-media-icon-button:disabled {
cursor: wait;
opacity: 0.38;
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu {
position: absolute;
z-index: 8;
top: calc(100% + 8px);
right: 58px;
display: grid;
width: min(248px, calc(100vw - 24px));
padding: 6px;
border: 1px solid color-mix(in srgb, var(--wds-color-inverse-on-surface) 14%, transparent);
border-radius: var(--ds-radius-sm);
background: var(--wds-color-inverse-surface);
color: var(--wds-color-inverse-on-surface);
box-shadow: var(--cg-dialog-shadow);
backdrop-filter: blur(18px);
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu[hidden],
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel[hidden] {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button {
display: grid;
grid-template-columns: 22px minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
min-height: 42px;
padding: 8px 10px;
border: 0;
border-radius: var(--ds-radius-xs);
background: transparent;
color: inherit;
font: inherit;
text-align: left;
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button:hover,
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button:focus-visible {
background: color-mix(in srgb, var(--wds-color-inverse-on-surface) 10%, transparent);
outline: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button.is-danger {
color: var(--wds-color-error-text);
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button.is-danger:hover,
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button.is-danger:focus-visible {
background: color-mix(in srgb, var(--wds-color-error) 14%, transparent);
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button svg {
width: 18px;
height: 18px;
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu > button kbd {
color: color-mix(in srgb, var(--wds-color-inverse-on-surface) 58%, transparent);
font: inherit;
font-size: var(--ds-text-caption-12, 12px);
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu .is-mobile-only {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel {
position: absolute;
z-index: 7;
top: 76px;
right: 24px;
width: min(360px, calc(100vw - 48px));
padding: 14px;
border: 1px solid color-mix(in srgb, var(--wds-color-inverse-on-surface) 14%, transparent);
border-radius: var(--ds-radius-md);
background: var(--wds-color-inverse-surface);
color: var(--wds-color-inverse-on-surface);
box-shadow: var(--cg-dialog-shadow);
backdrop-filter: blur(18px);
}
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel > header {
display: flex;
align-items: center;
justify-content: space-between;
min-height: 36px;
padding-bottom: 10px;
border-bottom: 1px solid color-mix(in srgb, var(--wds-color-inverse-on-surface) 10%, transparent);
}
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel > header > div {
display: flex;
align-items: center;
gap: 9px;
}
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel > header svg {
width: 18px;
height: 18px;
}
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel > header button {
display: inline-grid;
place-items: center;
width: 34px;
height: 34px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-xs);
background: transparent;
color: var(--wds-color-inverse-on-surface);
}
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel > header button:hover,
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel > header button:focus-visible {
background: color-mix(in srgb, var(--wds-color-inverse-on-surface) 10%, transparent);
outline: none;
}
body.chatgpt-reference-v1 :is(.composer-attachment-shortcut-list, .composer-attachment-file-info) {
display: grid;
gap: 0;
margin: 8px 0 0;
}
body.chatgpt-reference-v1 :is(.composer-attachment-shortcut-list, .composer-attachment-file-info) > div {
display: grid;
grid-template-columns: minmax(0, 1fr) auto;
align-items: center;
gap: 16px;
min-height: 38px;
}
body.chatgpt-reference-v1 :is(.composer-attachment-shortcut-list, .composer-attachment-file-info) :is(dt, dd) {
min-width: 0;
margin: 0;
}
body.chatgpt-reference-v1 :is(.composer-attachment-shortcut-list, .composer-attachment-file-info) dt {
color: color-mix(in srgb, var(--wds-color-inverse-on-surface) 68%, transparent);
font-size: var(--ds-text-caption-13, 13px);
}
body.chatgpt-reference-v1 .composer-attachment-shortcut-list kbd {
display: inline-flex;
min-width: 58px;
justify-content: center;
padding: 4px 8px;
border: 1px solid color-mix(in srgb, var(--wds-color-inverse-on-surface) 18%, transparent);
border-radius: var(--ds-radius-xs);
background: color-mix(in srgb, var(--wds-color-inverse-on-surface) 8%, transparent);
color: var(--wds-color-inverse-on-surface);
font: inherit;
font-size: var(--ds-text-caption-12, 12px);
}
body.chatgpt-reference-v1 .composer-attachment-file-info > div {
grid-template-columns: 92px minmax(0, 1fr);
align-items: start;
padding-block: 8px;
}
body.chatgpt-reference-v1 .composer-attachment-file-info dd {
overflow-wrap: anywhere;
font-size: var(--ds-text-caption-13, 13px);
line-height: 1.45;
}
.composer-document-print-root {
position: fixed;
top: 0;
left: -100000px;
width: max-content;
background: var(--ds-color-surface-solid);
pointer-events: none;
}
.composer-document-print-page {
width: var(--composer-print-page-width);
height: var(--composer-print-page-height);
overflow: hidden;
background: var(--ds-color-surface-solid);
break-after: page;
page-break-after: always;
}
.composer-document-print-page:last-child {
break-after: auto;
page-break-after: auto;
}
.composer-document-print-page canvas {
display: block;
width: 100%;
height: 100%;
}
@media print {
@page {
margin: 0;
}
body > *:not(.composer-document-print-root) {
display: none !important;
}
.composer-document-print-root {
position: static;
display: block !important;
width: auto;
background: var(--ds-color-surface-solid);
}
.composer-document-print-page {
margin: 0 auto;
box-shadow: none;
}
}
body.chatgpt-reference-v1 .composer-attachment-media-stage {
position: relative;
display: grid;
place-items: center;
min-width: 0;
min-height: 0;
padding: 16px 24px 24px;
overflow: hidden;
background: transparent;
cursor: default;
touch-action: pan-x pan-y;
user-select: auto;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target {
position: absolute;
z-index: 8;
top: 28px;
left: 50%;
display: inline-flex;
align-items: center;
gap: 7px;
max-width: min(520px, calc(100% - 64px));
min-height: 34px;
padding: 7px 12px;
border: 1px solid color-mix(in srgb, var(--ds-color-accent) 22%, transparent);
border-radius: var(--ds-radius-pill);
background: color-mix(in srgb, var(--cg-surface) 94%, transparent);
color: var(--cg-text);
box-shadow: var(--ds-shadow-md);
font-size: var(--ds-text-caption-12, 12px);
line-height: 18px;
transform: translateX(-50%);
backdrop-filter: blur(12px);
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target svg {
width: 15px;
height: 15px;
flex: 0 0 auto;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > button {
display: inline-grid;
place-items: center;
width: 26px;
height: 26px;
flex: 0 0 auto;
padding: 0;
border: 0;
border-radius: var(--ds-radius-pill);
background: transparent;
color: inherit;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > button:hover:not(:disabled) {
background: var(--cg-hover-soft, var(--ds-color-accent-soft));
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > button:focus-visible {
outline: 2px solid var(--wizon-ai-focus-visible-ring);
outline-offset: 1px;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > .chatgpt-library-preview-target-ask {
width: auto;
padding-inline: 9px;
background: var(--cg-text);
color: var(--cg-surface);
font: inherit;
font-weight: 600;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > .chatgpt-library-preview-version-toggle {
width: auto;
padding-inline: 9px;
border: 1px solid color-mix(in srgb, var(--ds-color-accent) 30%, transparent);
color: var(--ds-color-accent);
font: inherit;
font-weight: 600;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > .chatgpt-library-preview-target-ask:hover:not(:disabled) {
background: color-mix(in srgb, var(--cg-text) 84%, transparent);
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-copy {
display: inline-flex;
align-items: baseline;
gap: 8px;
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-copy > span {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-copy small {
flex: 0 0 auto;
color: var(--cg-muted);
font: inherit;
font-variant-numeric: tabular-nums;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list {
position: absolute;
top: calc(100% + 8px);
left: 50%;
display: grid;
gap: 4px;
width: min(460px, calc(100vw - 48px));
max-height: min(420px, 56vh);
padding: 6px;
overflow-y: auto;
border: 1px solid var(--cg-menu-border);
border-radius: var(--wizon-ai-radius-popover, 16px);
background: var(--cg-menu-bg);
box-shadow: var(--cg-menu-shadow, var(--ds-shadow-lg));
color: var(--cg-text, #0d0d0d);
transform: translateX(-50%);
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list[hidden] {
display: none;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list > button {
display: grid;
gap: 5px;
width: 100%;
min-height: 54px;
padding: 9px 10px;
border: 0;
border-radius: var(--wizon-ai-radius-menu-row, 10px);
background: transparent;
color: inherit;
text-align: left;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list > button:hover,
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list > button[aria-selected="true"] {
background: var(--cg-hover-soft, var(--ds-color-accent-soft));
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list > button:focus-visible {
outline: 2px solid var(--wizon-ai-focus-visible-ring);
outline-offset: -2px;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list-head strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list-head small {
flex: 0 0 auto;
color: var(--cg-muted);
font: inherit;
font-variant-numeric: tabular-nums;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list-snippet {
display: -webkit-box;
overflow: hidden;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12, 12px);
font-weight: 400;
line-height: 1.45;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list-snippet mark {
border-radius: var(--chatgpt-route-gap-2xs);
background: color-mix(in srgb, var(--wds-brand-blue) 12%, transparent);
color: inherit;
}
@media (pointer: coarse) {
body.chatgpt-reference-v1 .chatgpt-library-preview-target {
min-height: 44px;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > button {
width: 44px;
height: 44px;
margin-block: -7px;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > .chatgpt-library-preview-target-ask {
width: auto;
padding-inline: 12px;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target > .chatgpt-library-preview-version-toggle {
width: auto;
padding-inline: 10px;
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list {
width: min(460px, calc(100vw - 24px));
}
body.chatgpt-reference-v1 .chatgpt-library-preview-target-list > button {
min-height: 58px;
}
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface {
width: min(1600px, 100%);
height: 100%;
max-height: 100%;
overflow: auto;
border: 1px solid rgba(255, 255, 255, 0.12);
border-radius: var(--ds-radius-sm);
background: #14161a;
color: #f4f4f4;
box-shadow: 0 20px 64px rgba(0, 0, 0, 0.42);
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface.is-loading,
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface.is-state {
place-content: center;
grid-template-columns: auto minmax(0, 360px);
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface.is-visual {
border: 0;
background: transparent;
box-shadow: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface.is-visual img {
width: auto;
max-width: 100%;
max-height: 100%;
object-fit: contain;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface.is-text {
width: min(920px, 100%);
background: #f8f8f6;
color: #171717;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface.is-text pre {
min-height: 100%;
padding: 28px 32px;
color: #171717;
font-size: 14px;
line-height: 1.65;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface.is-spreadsheet {
background: #f8f8f6;
color: #171717;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage .composer-document-preview-toolbar {
color: #f4f4f4;
border-color: rgba(255, 255, 255, 0.12);
background: rgba(20, 22, 26, 0.94);
}
body.chatgpt-reference-v1 .composer-attachment-media-stage .composer-document-preview-toolbar button {
color: #fff;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage .composer-document-preview-toolbar > span:not(.composer-document-preview-toolbar-spacer) {
color: rgba(255, 255, 255, 0.68);
}
body.chatgpt-reference-v1 .composer-attachment-media-stage .composer-document-preview-toolbar output {
color: rgba(255, 255, 255, 0.68);
}
body.chatgpt-reference-v1 .composer-attachment-media-stage .document-viewer-find {
border-color: rgba(255, 255, 255, 0.12);
background: rgba(20, 22, 26, 0.96);
}
body.chatgpt-reference-v1 .composer-attachment-media-stage .document-viewer-find input,
body.chatgpt-reference-v1 .composer-attachment-media-stage .composer-document-preview-toolbar select,
body.chatgpt-reference-v1 .composer-attachment-media-stage .document-viewer-page-form input {
border-color: rgba(255, 255, 255, 0.18);
background: rgba(255, 255, 255, 0.08);
color: #fff;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage .document-viewer-sidebar {
border-color: rgba(255, 255, 255, 0.12);
background: #1b1e23;
}
@media (max-width: 1200px) {
body.chatgpt-reference-v1 .composer-attachment-media-head {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas:
"file actions"
"tools tools";
gap: 4px 12px;
padding-block: 8px;
}
body.chatgpt-reference-v1 .composer-attachment-media-file {
grid-area: file;
overflow: hidden;
}
body.chatgpt-reference-v1 .composer-attachment-media-actions.image-preview-head-actions {
grid-area: actions;
grid-column: auto;
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools {
grid-area: tools;
justify-content: flex-start;
overflow-x: auto;
overflow-y: hidden;
scrollbar-width: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools::-webkit-scrollbar {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-viewer-tools .composer-document-preview-toolbar {
flex: 0 0 max-content;
width: max-content;
}
}
@media (max-width: 900px) {
body.chatgpt-reference-v1 .document-viewer-layout {
grid-template-columns: minmax(0, 1fr);
grid-template-rows: 126px minmax(0, 1fr);
}
body.chatgpt-reference-v1 .document-viewer-sidebar {
overflow-x: auto;
overflow-y: hidden;
border-right: 0;
border-bottom: 1px solid color-mix(in srgb, currentColor 13%, transparent);
scroll-snap-type: x proximity;
scrollbar-width: none;
-ms-overflow-style: none;
}
body.chatgpt-reference-v1 .document-viewer-sidebar::-webkit-scrollbar,
body.chatgpt-reference-v1 .document-viewer-stage::-webkit-scrollbar {
display: none;
width: 0;
height: 0;
}
body.chatgpt-reference-v1 .document-viewer-stage {
scrollbar-width: none;
-ms-overflow-style: none;
}
body.chatgpt-reference-v1 .document-viewer-thumbnails {
display: flex;
width: max-content;
height: 100%;
gap: 8px;
padding: 8px 12px;
}
body.chatgpt-reference-v1 .document-viewer-thumbnail {
flex: 0 0 98px;
width: 98px;
padding: 5px;
scroll-snap-align: center;
}
body.chatgpt-reference-v1 .document-viewer-thumbnail canvas {
max-width: 84px;
min-height: 64px;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar {
flex-wrap: nowrap;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar [data-pdf-sidebar] {
display: none;
}
body.chatgpt-reference-v1 .composer-document-preview-toolbar-spacer {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage {
padding-inline: 10px;
}
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-button {
min-height: 44px;
padding: 10px 16px;
border: 1px solid rgba(255, 255, 255, 0.2);
border-radius: var(--ds-radius-xl, 22px);
background: rgba(24, 27, 32, 0.9);
color: #fff;
font: inherit;
font-weight: 600;
backdrop-filter: blur(12px);
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-button.is-header-action {
flex: 0 0 auto;
min-height: 40px;
padding: 8px 14px;
border-color: color-mix(in srgb, var(--wds-color-inverse-on-surface) 18%, transparent);
border-radius: var(--ds-radius-sm);
background: color-mix(in srgb, var(--wds-color-inverse-on-surface) 8%, transparent);
white-space: nowrap;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-label-short {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-drawer {
position: absolute;
z-index: 5;
top: 76px;
right: 24px;
bottom: auto;
width: min(520px, calc(100vw - 48px));
padding: 10px;
border: 1px solid rgba(255, 255, 255, 0.14);
border-radius: 20px;
background: rgba(24, 27, 32, 0.96);
box-shadow: 0 20px 56px rgba(0, 0, 0, 0.46);
backdrop-filter: blur(18px);
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-drawer[hidden] {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-drawer .chatgpt-library-preview-composer.chatgpt-composer-shell {
width: 100%;
margin: 0;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-drawer .composer-prompt-body {
grid-template-columns: minmax(0, 1fr) auto;
grid-template-areas: "input actions";
}
/* Composer library document-version lineage. */
body.chatgpt-reference-v1 .chatgpt-library-version-badge {
display: inline-flex;
align-items: center;
margin-inline-start: 8px;
padding: 1px 6px;
border: 1px solid var(--cg-menu-border);
border-radius: var(--ds-radius-pill);
color: var(--cg-muted);
font-size: var(--ds-text-micro-11);
font-weight: 600;
line-height: 18px;
vertical-align: middle;
}
body.chatgpt-reference-v1 .chatgpt-library-version-backdrop {
z-index: 24;
}
body.chatgpt-reference-v1 .chatgpt-library-version-dialog {
width: min(640px, calc(100vw - 32px));
max-height: min(720px, calc(100dvh - 48px));
overflow: hidden;
display: flex;
flex-direction: column;
border: 1px solid var(--cg-menu-border);
border-radius: var(--wizon-ai-radius-sheet);
background: var(--cg-surface);
box-shadow: var(--cg-dialog-shadow);
}
body.chatgpt-reference-v1 .chatgpt-library-version-header,
body.chatgpt-reference-v1 .chatgpt-library-version-toolbar,
body.chatgpt-reference-v1 .chatgpt-library-version-row {
display: flex;
align-items: center;
gap: 16px;
}
body.chatgpt-reference-v1 .chatgpt-library-version-header {
justify-content: space-between;
padding: 20px 22px 14px;
}
body.chatgpt-reference-v1 .chatgpt-library-version-header h2,
body.chatgpt-reference-v1 .chatgpt-library-version-header p,
body.chatgpt-reference-v1 .chatgpt-library-version-toolbar p {
margin: 0;
}
body.chatgpt-reference-v1 .chatgpt-library-version-header p,
body.chatgpt-reference-v1 .chatgpt-library-version-toolbar p,
body.chatgpt-reference-v1 .chatgpt-library-version-copy span {
color: var(--cg-muted);
font-size: var(--ds-text-caption-13);
}
body.chatgpt-reference-v1 .chatgpt-library-version-toolbar {
justify-content: space-between;
padding: 0 22px 16px;
border-bottom: 1px solid var(--cg-menu-border);
}
body.chatgpt-reference-v1 .chatgpt-library-version-list {
min-height: 120px;
overflow-y: auto;
padding: 8px 22px 20px;
}
body.chatgpt-reference-v1 .chatgpt-library-version-row {
justify-content: space-between;
padding: 14px 0;
border-bottom: 1px solid var(--cg-menu-border);
}
body.chatgpt-reference-v1 .chatgpt-library-version-row.is-current strong {
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-library-version-copy {
display: grid;
gap: 3px;
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-library-version-actions {
display: flex;
flex-wrap: wrap;
justify-content: flex-end;
gap: 6px;
}
body.chatgpt-reference-v1 .chatgpt-library-version-actions button,
body.chatgpt-reference-v1 .chatgpt-library-version-actions a {
border: 0;
border-radius: var(--wizon-ai-radius-control);
padding: 7px 9px;
background: transparent;
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-caption-12);
text-decoration: none;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-library-version-actions button:hover,
body.chatgpt-reference-v1 .chatgpt-library-version-actions button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-library-version-actions a:hover,
body.chatgpt-reference-v1 .chatgpt-library-version-actions a:focus-visible {
background: var(--cg-hover-soft);
}
body.chatgpt-reference-v1 .chatgpt-library-version-actions .is-primary {
background: var(--cg-text);
color: var(--cg-surface);
}
body.chatgpt-reference-v1 .chatgpt-library-version-actions button:disabled,
body.chatgpt-reference-v1 .chatgpt-library-version-actions a[aria-disabled="true"] {
opacity: 0.45;
pointer-events: none;
cursor: default;
}
body.chatgpt-reference-v1 .chatgpt-library-version-empty {
padding: 32px 0;
color: var(--cg-muted);
text-align: center;
}
@media (max-width: 520px) {
body.chatgpt-reference-v1 .chatgpt-library-version-dialog {
width: 100%;
max-height: 88dvh;
margin-top: auto;
border-radius: var(--wizon-ai-radius-sheet) var(--wizon-ai-radius-sheet) 0 0;
}
body.chatgpt-reference-v1 .chatgpt-library-version-toolbar,
body.chatgpt-reference-v1 .chatgpt-library-version-row {
align-items: flex-start;
flex-direction: column;
}
body.chatgpt-reference-v1 .chatgpt-library-version-actions {
justify-content: flex-start;
}
}
body.chatgpt-reference-v1 .composer-attachment-media-dialog :is(
.composer-attachment-media-icon-button,
.composer-attachment-media-ask-button
):focus-visible {
outline: 2px solid #fff;
outline-offset: 2px;
}
@media (hover: hover) {
body.chatgpt-reference-v1 .composer-attachment-media-icon-button:hover {
background: rgba(255, 255, 255, 0.1);
opacity: 1;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-button:hover {
background: color-mix(in srgb, var(--wds-color-inverse-on-surface) 14%, transparent);
}
}
[data-theme="dark"] body.chatgpt-reference-v1 .composer-chip-removable.composer-attachment-card,
body[data-theme="dark"].chatgpt-reference-v1 .composer-chip-removable.composer-attachment-card,
[data-theme="dark"] body.chatgpt-reference-v1 .composer-attachment-preview-content,
[data-theme="dark"] body.chatgpt-reference-v1 .composer-document-preview-surface.is-visual,
[data-theme="dark"] body.chatgpt-reference-v1 .chatgpt-library-preview-document-pane > .composer-document-preview-surface {
background: color-mix(in srgb, var(--cg-text, #f4f4f4) 8%, var(--cg-surface, #212121));
}
@media (hover: none), (pointer: coarse) {
body.chatgpt-reference-v1 .composer-attachment-preview {
display: none !important;
}
}
@media (max-width: 520px) {
body.chatgpt-reference-v1 .chatgpt-composer-shell:has(.composer-attachment-lane:not([hidden])),
body.chatgpt-reference-v1 .composer-surface.chatgpt-composer-shell:has(.composer-attachment-lane:not([hidden])) {
min-height: 112px !important;
}
body.chatgpt-reference-v1 .composer-chip-removable.composer-attachment-card {
max-width: min(220px, calc(100vw - 64px));
}
body.chatgpt-reference-v1 .composer-chip-removable.composer-attachment-policy-card {
width: calc(100vw - 64px);
max-width: calc(100vw - 64px);
}
}
@media (max-width: 520px), (pointer: coarse) {
body.chatgpt-reference-v1 .composer-attachment-lane:not([hidden]) {
display: flex;
flex-wrap: nowrap;
max-width: 100%;
overflow-x: auto;
overflow-y: hidden;
scroll-snap-type: x mandatory;
scroll-padding-inline: 2px;
overscroll-behavior-inline: contain;
/* Native horizontal swipe stays available without trapping a vertical page gesture
that happened to start on the attachment shelf. */
touch-action: pan-x pan-y;
-ms-overflow-style: none;
-webkit-overflow-scrolling: touch;
}
body.chatgpt-reference-v1 .composer-chip-removable.composer-attachment-card {
flex: none;
scroll-snap-align: start;
scroll-snap-stop: normal;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-backdrop {
position: fixed;
inset: 0;
z-index: var(--wizon-layer-scrim, 190);
display: flex;
align-items: flex-end;
justify-content: center;
background: var(--ds-modal-overlay, rgba(15, 23, 42, 0.3));
}
body.chatgpt-reference-v1 .composer-attachment-sheet {
display: flex;
flex-direction: column;
box-sizing: border-box;
width: 100%;
min-height: min(48vh, 406px);
max-height: min(78vh, calc(var(--wizon-vvh, 100dvh) - 32px));
padding: 8px 16px calc(16px + var(--wizon-safe-bottom));
overflow: hidden;
border: 1px solid var(--ds-modal-border, rgba(15, 23, 42, 0.12));
border-bottom: 0;
border-radius: var(--wizon-ai-radius-sheet, var(--ds-modal-radius)) var(--wizon-ai-radius-sheet, var(--ds-modal-radius)) 0 0;
background: var(--ds-modal-surface, #fff);
color: var(--cg-text);
box-shadow: var(--ds-modal-shadow, 0 -12px 36px rgba(15, 23, 42, 0.12));
transform: translateY(var(--composer-attachment-sheet-drag-y, 0));
transition: transform var(--wizon-motion-fast, 140ms) var(--wizon-motion-spatial-ease);
will-change: transform;
animation: wizon-sheet-up var(--wizon-motion-panel-duration) var(--wizon-motion-spatial-ease) backwards;
}
body.chatgpt-reference-v1 .composer-attachment-sheet.is-dragging {
transition: none;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-grabber {
display: grid;
flex: none;
place-items: center;
width: 100%;
min-height: 28px;
margin-top: -4px;
cursor: grab;
touch-action: none;
}
body.chatgpt-reference-v1 .composer-attachment-sheet.is-dragging .composer-attachment-sheet-grabber {
cursor: grabbing;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-handle {
flex: none;
align-self: center;
width: 36px;
height: 4px;
border-radius: var(--wizon-ai-radius-pill, var(--ds-radius-pill));
background: var(--wizon-ai-text-muted-2);
opacity: 0.5;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-header {
display: grid;
grid-template-columns: auto minmax(0, 1fr) auto;
align-items: center;
gap: 10px;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-close {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-md);
background: transparent;
color: var(--cg-text);
}
body.chatgpt-reference-v1 .composer-attachment-sheet-close:focus-visible {
outline: 2px solid var(--wizon-ai-focus-ring, #155eef);
outline-offset: 1px;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-close svg {
width: 20px;
height: 20px;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-content {
flex: 1 1 auto;
min-height: 0;
margin-top: 12px;
overflow-x: hidden;
overflow-y: auto;
border: 1px solid var(--ds-modal-border, rgba(15, 23, 42, 0.1));
border-radius: var(--ds-radius-md, 12px);
background: var(--cg-surface, #fff);
overscroll-behavior: contain;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-image {
display: block;
width: 100%;
max-height: 48vh;
margin-top: 8px;
object-fit: contain;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-preview {
margin: 8px 12px 14px;
color: var(--cg-text);
font-size: var(--ds-text-body-14);
line-height: 1.55;
white-space: pre-wrap;
overflow-wrap: anywhere;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-preview.is-empty {
color: var(--cg-muted);
}
body.chatgpt-reference-v1 .composer-attachment-sheet-content .composer-document-preview-surface {
min-height: 220px;
max-height: none;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-content .composer-document-preview-surface.is-visual img {
max-height: 48vh;
}
body.chatgpt-reference-v1 .composer-attachment-sheet-full {
flex: none;
min-height: 44px;
margin-top: 12px;
border: 0;
border-radius: var(--wds-radius-md);
background: var(--cg-text, #0d0d0d);
color: var(--cg-surface, #fff);
font: inherit;
font-weight: 600;
}
body.chatgpt-reference-v1 .composer-attachment-media-head {
min-height: calc(112px + env(safe-area-inset-top, 0px));
padding: calc(6px + env(safe-area-inset-top, 0px)) 8px 6px 12px;
}
body.chatgpt-reference-v1 .composer-attachment-media-file {
gap: 8px;
}
body.chatgpt-reference-v1 .composer-attachment-media-file .composer-attachment-preview-icon {
width: 36px;
height: 36px;
border-radius: 9px;
}
body.chatgpt-reference-v1 .composer-attachment-media-actions {
gap: 0;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-button.is-header-action {
min-height: 40px;
padding-inline: 10px;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-label {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-label-short {
display: inline;
}
body.chatgpt-reference-v1 .composer-attachment-media-icon-button {
width: 44px;
height: 44px;
}
body.chatgpt-reference-v1 .composer-attachment-media-print-button {
display: none;
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu {
top: calc(100% + 4px);
right: 44px;
}
body.chatgpt-reference-v1 .composer-attachment-media-more-menu .is-mobile-only {
display: grid;
}
body.chatgpt-reference-v1 .composer-attachment-media-utility-panel {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: auto;
padding: 14px 16px calc(16px + env(safe-area-inset-bottom, 0px));
border-width: 1px 0 0;
border-radius: var(--ds-radius-lg) var(--ds-radius-lg) 0 0;
}
body.chatgpt-reference-v1 .composer-attachment-media-stage {
padding: 8px 0 calc(8px + env(safe-area-inset-bottom, 0px));
}
body.chatgpt-reference-v1 .composer-attachment-media-stage > .composer-document-preview-surface {
width: 100%;
height: 100%;
border-inline: 0;
border-radius: 0;
}
body.chatgpt-reference-v1 .composer-attachment-media-ask-drawer {
top: auto;
right: 0;
bottom: 0;
left: 0;
width: auto;
padding: 12px 12px calc(12px + env(safe-area-inset-bottom, 0px));
border-width: 1px 0 0;
border-radius: 20px 20px 0 0;
}
}
@media (prefers-reduced-motion: reduce) {
body.chatgpt-reference-v1 .composer-attachment-sheet,
body.chatgpt-reference-v1 .composer-document-preview-spinner {
animation: none;
}
}
/* Server-backed archive and trash routes. Rows remain table-like on desktop and
turn their actions into a wrapped second line on narrow touch screens. */
body.chatgpt-reference-v1 .chatgpt-route-action,
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button {
display: inline-flex;
align-items: center;
justify-content: center;
gap: 7px;
min-height: 34px;
padding: 6px 10px;
border: 1px solid var(--ds-color-line);
border-radius: var(--ds-radius-xs);
background: var(--cg-surface, #fff);
color: var(--cg-text, #0d0d0d);
font: inherit;
font-size: var(--ds-text-caption-13);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-route-action svg,
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button svg { width: 16px; height: 16px; }
body.chatgpt-reference-v1 .chatgpt-route-action:hover,
body.chatgpt-reference-v1 .chatgpt-route-action:focus-visible,
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button:hover,
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button:focus-visible { background: var(--cg-hover, #f5f5f5); outline: none; }
body.chatgpt-reference-v1 .chatgpt-route-action.is-danger,
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button.is-danger,
body.chatgpt-reference-v1 .chatgpt-lifecycle-empty.is-error { color: #b42318; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-list { border-top: 1px solid var(--ds-color-line); }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) auto;
align-items: center;
gap: 14px;
min-height: 76px;
padding: 12px 2px;
border-bottom: 1px solid var(--ds-color-line);
}
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-icon { display: inline-grid; place-items: center; color: var(--cg-muted, #737373); }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-icon svg { width: 19px; height: 19px; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-copy { min-width: 0; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-title { display: flex; align-items: center; min-width: 0; gap: 7px; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-title strong { overflow: hidden; min-width: 0; color: var(--cg-text, #0d0d0d); font-size: var(--ds-text-body-14); font-weight: 500; text-overflow: ellipsis; white-space: nowrap; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-copy p { overflow: hidden; margin: 4px 0 0; color: var(--cg-muted, #737373); font-size: var(--ds-text-caption-12); line-height: 18px; text-overflow: ellipsis; white-space: nowrap; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-retention { flex: 0 0 auto; color: var(--cg-muted, #737373); font-size: var(--ds-text-caption-12); }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-meta { display: flex; flex-wrap: wrap; gap: 5px 8px; margin-top: 4px; font-size: var(--ds-text-caption-12); line-height: 18px; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-purge { color: var(--cg-muted, #737373); font-weight: 500; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-purge.is-warning { color: #b54708; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions { display: flex; align-items: center; gap: 7px; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-empty { display: grid; justify-items: center; gap: 8px; padding: 72px 16px; color: var(--cg-muted, #737373); text-align: center; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-empty strong { color: var(--cg-text, #0d0d0d); font-size: var(--ds-text-body-15); font-weight: 500; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-empty span { font-size: var(--ds-text-caption-13); }
@media (max-width: 520px) {
body.chatgpt-reference-v1 .chatgpt-lifecycle-row { grid-template-columns: 24px minmax(0, 1fr); align-items: start; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions { grid-column: 2; flex-wrap: wrap; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button { flex: 1 1 auto; }
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-title { flex-wrap: wrap; }
}
/* 20260802-lifecycle-row-mobile-title (북극성 ③ 배치 3): 폰에서 휴지통/아카이브 행 제목이
한 줄로 강제돼 잘렸다. 라이브 /trash 390px 실측: 제목 열이 316px 인데 내용은 401~766px 라
최대 450px(대략 2/3)가 말줄임으로 사라졌고, 사라지는 쪽이 하필 두 대화를 구별해 주는
뒷부분이었다(「2026년 7월 18일부터 제주 2일 가족 자동차 여행 사진 …」). 데스크톱은 폭이
충분해 한 줄 그대로 두고(공유 규칙의 nowrap 은 계약이 함께 핀한다), 폰에서만 2줄까지 감싼다.
미리보기 도 같은 이유로 함께 푼다 — 제목과 같은 문장이면 렌더러가 아예 안 그린다. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-title strong,
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-copy > p {
display: -webkit-box;
overflow: hidden;
-webkit-box-orient: vertical;
-webkit-line-clamp: 2;
line-clamp: 2;
line-height: 1.35;
white-space: normal;
}
}
/* 20260726-trash-mobile-topbar (T3b): mobile decluttering for the archive/trash route.
(1) the subtitle under the H1 explains server behaviour that doesn't need a whole line on a
small screen — the fixed top app bar already shows the route title, so the subtitle is pure
restatement there. Scoped to .chatgpt-lifecycle-page only (NOT the shared .chatgpt-route-page
-head selector) because /scheduled renders its own unrelated
subtitle inside the very same
header shape and must stay untouched.
(2) the desktop "대화 휴지통 비우기" text button now has a same-purpose icon twin in the fixed
topbar (see .chatgpt-mobile-topbar [data-mobile-trash-empty] wiring in
syncPortalRouteSurfaceVisibility) — mirrors the established library precedent just above
(20260710-library-new-in-topbar hides .chatgpt-route-primary in the route head once its own
topbar "+" twin exists), so the redundant full-text copy is hidden here rather than duplicated
under one sticky header. Desktop is untouched — this whole block is <=900px only. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-lifecycle-page .chatgpt-route-page-head p {
display: none;
}
body.chatgpt-reference-v1 .chatgpt-lifecycle-page .chatgpt-route-page-actions {
display: none;
}
}
/* 20260729-touch-target-a2 (WCAG 2.5.5 / Apple HIG 44pt): 휴지통·아카이브 행 액션(복원/영구
삭제)과 워크스페이스 칩(전체/채팅/업무/코딩)이 390px 실측에서 각각 142x36 / 167x36 / 73x40 —
너비는 이미 44 이상이라 세로만 44로 올린다. 가로 padding은 그대로 둔다: 복원↔영구 삭제
사이 가로 간격이 7px뿐이라(파괴적 액션이 바로 옆) 가로로 넓히면 오탭 위험이 커진다. 세로는
행 높이 168px 중 132px가 여유라 겹침 없이 들어간다(실측). 44px는 이 파일 전역에 이미 40곳
넘게 리터럴로 쓰인 기존 관례(예: .btn--lg, line 7291)를 따른 것 — 이 값에 맞는 --ds-* 스케일
토큰이 없어(스페이싱 스케일 최댓값 --ds-space-10=64px) 새 토큰을 만들지 않고 그 관례를 그대로
따른다. 칩은 .chatgpt-trash-category-tabs로만 스코프해 다른 라우트의 .chatgpt-route-tabs
(예: /projects)는 건드리지 않는다. 데스크톱은 마우스라 44px가 불필요하고 지금 밀도가 의도된
디자인이므로 <=900px only. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button {
min-height: 44px;
}
body.chatgpt-reference-v1 .chatgpt-trash-category-tabs button {
min-height: 44px;
}
}
/* Title row + workspace chips pin below the fixed topbar, only the row list scrolls below them —
mirrors .chatgpt-drive-mobile-stickyhead above verbatim. `display: contents` dissolves the
wrapper on desktop so `.chatgpt-route-page-inner`'s existing layout is byte-for-byte unchanged
there; the <=900px override is the only visible change. */
body.chatgpt-reference-v1 .chatgpt-lifecycle-mobile-stickyhead {
display: contents;
}
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-lifecycle-mobile-stickyhead {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-xs);
position: sticky;
top: 0;
z-index: 5;
background: var(--cg-bg);
padding-bottom: var(--chatgpt-route-gap-xs);
}
}
/* T2 unified trash (docs/product/215): 전체/대화/드라이브 category chips reuse
.chatgpt-route-tabs verbatim (same markup/behaviour as the projects page's own filter tabs) —
only the count badge and the row-level category badge/original-path are new here. No new
color tokens: --cg-muted, --cg-hover-soft, --ds-badge-info-bg, --ds-badge-info-fg,
--ds-radius-pill, --ds-radius-md and --ds-text-caption-12 all already exist and are referenced
WITHOUT a literal hex/rgb fallback. (No glob-star before a slash inside a CSS comment — that
sequence closes the comment early and silently drops the next rule; this file has been burned
by it three times in this track.)
The anti-drift ratchet has zero headroom on raw-color/raw-rgb (measured: 2608/2608 and
658/658), but that only bars new HEX/RGB LITERALS — `background`/`color` are not scanned
properties at all, so a token-expressed distinction is free. See
tests/test_design_system_contract.py:70-73 for the scanned pattern set. */
body.chatgpt-reference-v1 .chatgpt-route-tabs-count {
margin-left: 4px;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-trash-category-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: 4px;
padding: 2px 8px;
border-radius: var(--ds-radius-pill);
background: var(--cg-hover-soft);
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
font-weight: 500;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-trash-category-badge svg { width: 13px; height: 13px; }
/* The two badges were byte-identical grey (measured: both rgb(244,244,244)/rgb(111,111,111)),
which left a mixed list with no colour signal at all — the badge WORD was the only cue, at
caption size. "Zero ratchet headroom" only forbids new raw hex/rgb: `background`/`color` are
not scanned properties, and --ds-badge-info-* is an existing Tier-3 token pair defined for
both themes (shared/design-tokens/component.css), so this distinction costs the ratchet
nothing. Drive = the foreign source being merged in, so it takes the accent; conversation
stays neutral as the page's native content. */
body.chatgpt-reference-v1 .chatgpt-trash-category-badge--drive {
background: var(--ds-badge-info-bg);
color: var(--ds-badge-info-fg);
}
/* doc 228 P3 — conversation topic tag pill (trash/archive rows). Same pill geometry as
.chatgpt-trash-category-badge just above (radius/padding/caption size) so the two read as one
family, but deliberately NOT filled and NOT iconed: the category badge answers "what KIND of
row is this" (대화/드라이브) — an axis already visible one level up in the workspace filter chips
— while this pill answers "what is this conversation ABOUT", brand-new information the reader
has never seen elsewhere on this screen. Giving it the same filled weight as the category badge
would make two different kinds of fact compete for the same attention; a hairline outline with
no icon keeps the family resemblance (still a pill, still caption-sized) while reading as
lighter, secondary, descriptive rather than classificatory.
Border token: NOT --cg-border — that name looks like this file's other generic tokens but is
never actually defined at :root (verified: only ever consumed with a literal fallback wherever
it appears elsewhere in this file, so it silently renders as no border at all wherever no
fallback is given — confirmed live, this rule rendered with zero border before the fix, using
that name). --ds-color-line is the real, already-defined Tier-2 semantic border token
(shared/design-tokens/semantic.css, light+dark) already used without a fallback dozens of times
elsewhere in this exact file (e.g. line 1471), so this adds no new color and needs none. */
body.chatgpt-reference-v1 .chatgpt-topic-tag-badge {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
padding: 2px 8px;
border: 1px solid var(--ds-color-line);
border-radius: var(--ds-radius-pill);
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
font-weight: 500;
white-space: nowrap;
}
/* Partial-failure banner: one source is missing, the rest of the list below is real. Deliberately
NOT .is-error styling — an alert-red block over a working list would read as "this list is
broken" when it is merely incomplete. */
body.chatgpt-reference-v1 .chatgpt-lifecycle-notice {
display: flex;
flex-wrap: wrap;
align-items: center;
justify-content: space-between;
gap: 8px;
margin-bottom: 12px;
padding: 10px 14px;
border-radius: var(--ds-radius-md, 12px);
background: var(--cg-hover-soft);
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-trash-original-path {
flex: 0 0 auto;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
/* Restore is disabled (not hidden) for a viewer-role drive row — the row itself already carries
a title= explaining why, this is only the visual half. */
body.chatgpt-reference-v1 .chatgpt-lifecycle-row-actions button:disabled {
opacity: 0.5;
cursor: not-allowed;
}
body.chatgpt-reference-v1 .chatgpt-trash-load-more {
margin-top: 12px;
}
/* docs/product/215-wizon-drive-design.md DR-1b explorer page. Rows/empty/toolbar
all reuse .chatgpt-route-page-* and .chatgpt-lifecycle-* above as-is (no new rules
needed for those) — only the breadcrumb, the folder-name-as-button reset, the
inline feedback line, and the new-folder dialog are new here. */
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 6px;
margin-top: 4px;
font-size: var(--ds-text-caption-13);
}
body.chatgpt-reference-v1 .chatgpt-drive-history-controls,
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-trail {
display: inline-flex;
align-items: center;
gap: 4px;
}
body.chatgpt-reference-v1 .chatgpt-drive-history-controls {
flex: 0 0 auto;
padding-right: 4px;
border-right: 1px solid var(--cg-menu-border, var(--line));
}
body.chatgpt-reference-v1 .chatgpt-drive-history-button {
display: inline-grid;
place-items: center;
width: 30px;
height: 30px;
padding: 0;
border: 0;
border-radius: var(--ds-radius-xs);
background: transparent;
color: var(--cg-text);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-history-button svg { width: 16px; height: 16px; }
body.chatgpt-reference-v1 .chatgpt-drive-history-button:hover { background: var(--cg-hover); }
body.chatgpt-reference-v1 .chatgpt-drive-history-button:disabled { color: var(--cg-muted); opacity: 0.45; cursor: default; }
body.chatgpt-reference-v1 .chatgpt-drive-history-button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-item:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring, var(--cg-focus-ring));
outline-offset: 2px;
}
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-item {
display: inline-flex;
align-items: center;
gap: 5px;
padding: 3px 7px;
border: none;
border-radius: var(--ds-radius-xs);
background: transparent;
color: var(--cg-muted);
font: inherit;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-item svg { width: 14px; height: 14px; }
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-item:hover,
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-item:focus-visible { background: var(--cg-hover); }
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-item.is-current { color: var(--cg-text); font-weight: 500; }
body.chatgpt-reference-v1 .chatgpt-drive-breadcrumb-sep { color: var(--cg-muted); }
body.chatgpt-reference-v1 .chatgpt-drive-row-open {
display: block;
min-width: 0;
border: none;
background: transparent;
padding: 0;
font: inherit;
text-align: left;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-row-open:hover strong,
body.chatgpt-reference-v1 .chatgpt-drive-row-open:focus-visible strong { text-decoration: underline; }
body.chatgpt-reference-v1 .chatgpt-drive-feedback,
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt {
margin: 0;
padding: 8px 12px;
border-radius: var(--ds-radius-xs);
background: var(--cg-hover-soft, var(--cg-hover));
color: var(--cg-text);
font-size: var(--ds-text-caption-13);
display: flex;
align-items: center;
justify-content: space-between;
gap: 12px;
}
body.chatgpt-reference-v1 .chatgpt-drive-feedback button,
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt button {
min-width: 44px;
min-height: 44px;
border: none;
border-radius: var(--ds-radius-xs);
padding: 4px 10px;
background: transparent;
color: var(--cg-text);
font: inherit;
font-weight: 600;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-feedback button:hover,
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt button:hover {
background: var(--cg-hover);
}
body.chatgpt-reference-v1 .chatgpt-drive-feedback button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt button:focus-visible {
background: var(--cg-hover);
outline: 2px solid var(--cg-focus-visible-ring, var(--cg-focus-ring));
outline-offset: 2px;
}
body.chatgpt-reference-v1 .chatgpt-drive-feedback button:disabled,
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt button:disabled {
color: var(--cg-muted);
cursor: wait;
}
/* A destructive operation remains a local, readable receipt while it is pending and after an
error; this is intentionally a compact Drive surface rather than a global toast. */
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt {
display: flex;
align-items: center;
min-height: 40px;
margin: 0;
padding: 8px 12px;
border-left: 3px solid var(--cg-focus-ring);
background: var(--cg-hover-soft, var(--cg-hover));
color: var(--cg-text);
font-size: var(--ds-text-caption-13);
}
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt > span {
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt.is-pending {
color: var(--cg-muted);
}
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt.is-error,
body.chatgpt-reference-v1 .chatgpt-drive-operation-receipt.is-partial {
border-left-color: var(--cg-danger-fg);
color: var(--cg-danger-fg);
}
body.chatgpt-reference-v1 .chatgpt-drive-new-folder-dialog form {
display: flex;
flex-direction: column;
gap: 8px;
padding: 12px;
}
body.chatgpt-reference-v1 .chatgpt-drive-new-folder-dialog label {
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-dialog-actions {
display: flex;
justify-content: flex-end;
gap: 8px;
}
body.chatgpt-reference-v1 .chatgpt-drive-dialog-actions button {
display: inline-flex;
align-items: center;
min-height: 32px;
padding: 6px 12px;
border: 1px solid var(--ds-color-line);
border-radius: var(--ds-radius-xs);
background: var(--cg-surface);
color: var(--cg-text);
font: inherit;
font-size: var(--ds-text-caption-13);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-dialog-actions button[type="submit"] {
background: var(--cg-send-bg);
color: var(--cg-send-fg);
border-color: transparent;
}
@media (hover: hover) {
body.chatgpt-reference-v1 .chatgpt-drive-dialog-actions button:hover { outline: none; }
}
body.chatgpt-reference-v1 .chatgpt-drive-dialog-actions button:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring, var(--cg-focus-ring));
outline-offset: 2px;
}
body.chatgpt-reference-v1 .chatgpt-drive-dialog-actions button[data-drive-action="permissions-save"] {
background: var(--cg-send-bg);
color: var(--cg-send-fg);
border-color: transparent;
}
/* DR-2 permission-grant dialog (docs/product/215-wizon-drive-design.md §9). Reuses
.chatgpt-library-popover/.chatgpt-drive-dialog-actions/.ds-input/.ds-chip as-is —
only the list/row/add-row layout below is new (no raw color/radius/shadow/font-size,
anti-drift net-zero: every declaration here is spacing/layout, or points at a
--cg-* and --ds-* token already used by the sibling DR-1b dialog above). */
body.chatgpt-reference-v1 .chatgpt-drive-permissions-dialog {
position: fixed;
z-index: var(--wds-z-modal);
top: 50%;
left: 50%;
right: auto;
display: flex;
flex-direction: column;
gap: 12px;
padding: 12px;
width: min(560px, calc(100vw - (var(--wizon-ai-thread-gutter) * 2)));
min-width: 520px;
max-width: 560px;
max-height: min(80vh, 760px);
transform: translate(-50%, -50%);
box-shadow: var(--cg-shadow-float-lg), 0 0 0 100vmax var(--wizon-scrim);
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: 8px;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-head h2 {
margin: 0;
font-size: var(--ds-text-body-15);
font-weight: 600;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-list {
display: flex;
flex-direction: column;
gap: 6px;
margin: 0;
padding: 0;
list-style: none;
max-height: 220px;
overflow-y: auto;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-scroll {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-md);
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-section {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-xs);
padding-bottom: var(--chatgpt-route-gap-md);
border-bottom: 1px solid var(--cg-menu-border, var(--line));
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-section:last-child {
border-bottom: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-section-head {
display: flex;
align-items: flex-start;
justify-content: space-between;
gap: var(--chatgpt-route-gap-sm);
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-section-head > span:first-child {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-2xs);
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-section-head strong {
padding: 0;
color: var(--cg-text);
font-size: var(--ds-text-caption-13);
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-section-head small,
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row-copy span,
body.chatgpt-reference-v1 .chatgpt-drive-share-list small {
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row {
display: flex;
align-items: center;
gap: 8px;
padding: 6px 8px;
border-radius: var(--ds-radius-xs);
background: var(--cg-hover-soft, var(--cg-hover));
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row.is-inherited {
border: 1px dashed var(--cg-menu-border, var(--line));
background: transparent;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row-copy {
display: flex;
flex-direction: column;
flex: 1 1 auto;
min-width: 0;
gap: 2px;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row-copy strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row select.ds-input {
flex: 0 0 auto;
width: auto;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-owner-note {
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-empty {
color: var(--cg-muted);
font-size: var(--ds-text-caption-13);
padding: 8px 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-add-row {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: 8px;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-add-row select.ds-input {
flex: 1 1 140px;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-empty-hint {
color: var(--cg-muted);
font-size: var(--ds-text-caption-13);
margin: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-inheritance-chain {
display: flex;
flex-wrap: wrap;
align-items: center;
gap: var(--chatgpt-route-gap-2xs);
margin: 0;
padding: 0;
list-style: none;
}
body.chatgpt-reference-v1 .chatgpt-drive-inheritance-chain li {
display: inline-flex;
align-items: center;
gap: var(--chatgpt-route-gap-2xs);
min-height: var(--chatgpt-route-control-height);
padding: 0 var(--chatgpt-route-gap-xs);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--chatgpt-route-radius-pill);
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-inheritance-chain li.is-boundary {
border-color: var(--cg-focus-visible-ring, var(--cg-focus-ring));
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-drive-inheritance-chain svg {
width: 14px;
height: 14px;
}
body.chatgpt-reference-v1 .chatgpt-drive-share-create,
body.chatgpt-reference-v1 .chatgpt-drive-share-created {
display: flex;
flex-wrap: wrap;
align-items: flex-end;
gap: var(--chatgpt-route-gap-xs);
}
body.chatgpt-reference-v1 .chatgpt-drive-share-create select.ds-input {
flex: 1 1 120px;
}
body.chatgpt-reference-v1 .chatgpt-drive-share-created label {
display: flex;
flex: 1 1 280px;
flex-direction: column;
gap: var(--chatgpt-route-gap-2xs);
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-share-created input {
width: 100%;
}
body.chatgpt-reference-v1 .chatgpt-drive-share-list {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-2xs);
margin: 0;
padding: 0;
list-style: none;
}
body.chatgpt-reference-v1 .chatgpt-drive-share-list li {
display: flex;
align-items: center;
gap: var(--chatgpt-route-gap-xs);
min-height: var(--chatgpt-route-control-height);
padding: var(--chatgpt-route-gap-xs);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
}
body.chatgpt-reference-v1 .chatgpt-drive-share-list li > span:first-child {
display: flex;
flex: 1 1 auto;
flex-direction: column;
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-share-list button,
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row > button {
min-height: var(--chatgpt-route-control-height);
padding: 0 var(--chatgpt-route-gap-xs);
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-text);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-error {
margin: 0;
color: var(--cg-text);
font-size: var(--ds-text-caption-12);
}
/* DR-3 administrator review queue and audit log. */
body.chatgpt-reference-v1 .chatgpt-drive-governance-dialog {
position: fixed;
z-index: var(--wds-z-modal);
top: 50%;
left: 50%;
right: auto;
display: flex;
flex-direction: column;
width: min(720px, calc(100vw - (var(--wizon-ai-thread-gutter) * 2)));
min-width: 640px;
max-width: 720px;
max-height: min(84vh, 820px);
gap: var(--chatgpt-route-gap-sm);
padding: var(--chatgpt-route-gap-md);
transform: translate(-50%, -50%);
box-shadow: var(--cg-shadow-float-lg), 0 0 0 100vmax var(--wizon-scrim);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-head,
body.chatgpt-reference-v1 .chatgpt-drive-handover-case > header,
body.chatgpt-reference-v1 .chatgpt-drive-handover-case li {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chatgpt-route-gap-sm);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-head > span,
body.chatgpt-reference-v1 .chatgpt-drive-handover-case header > span:first-child,
body.chatgpt-reference-v1 .chatgpt-drive-handover-case li > span:first-child,
body.chatgpt-reference-v1 .chatgpt-drive-handover-create > span:first-child {
display: flex;
flex-direction: column;
min-width: 0;
gap: var(--chatgpt-route-gap-2xs);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-head h2 {
margin: 0;
font-size: var(--ds-text-title-20);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-head small,
body.chatgpt-reference-v1 .chatgpt-drive-handover-case small,
body.chatgpt-reference-v1 .chatgpt-drive-handover-create small {
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-head button,
body.chatgpt-reference-v1 .chatgpt-drive-governance-tabs button,
body.chatgpt-reference-v1 .chatgpt-drive-handover-case button,
body.chatgpt-reference-v1 .chatgpt-drive-governance-error button {
min-height: var(--chatgpt-route-control-height);
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-text);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-tabs,
body.chatgpt-reference-v1 .chatgpt-drive-inspector-tabs {
display: flex;
align-items: center;
gap: var(--chatgpt-route-gap-2xs);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-tabs button,
body.chatgpt-reference-v1 .chatgpt-drive-inspector-tabs button {
min-height: var(--chatgpt-route-control-height);
padding: 0 var(--chatgpt-route-gap-sm);
border: 0;
border-bottom: 2px solid transparent;
background: transparent;
color: var(--cg-muted);
font: inherit;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-tabs button[aria-selected="true"],
body.chatgpt-reference-v1 .chatgpt-drive-inspector-tabs button[aria-selected="true"] {
border-bottom-color: var(--cg-focus-visible-ring, var(--cg-focus-ring));
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-dialog button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-drive-permissions-dialog button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-drive-inspector-tabs button:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring, var(--cg-focus-ring));
outline-offset: 2px;
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-dialog button:disabled,
body.chatgpt-reference-v1 .chatgpt-drive-permissions-dialog button:disabled {
opacity: 0.45;
cursor: default;
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-body {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-sm);
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
body.chatgpt-reference-v1 .chatgpt-drive-handover-create {
display: grid;
grid-template-columns: minmax(0, 1fr) minmax(180px, 0.8fr) auto;
align-items: end;
gap: var(--chatgpt-route-gap-xs);
padding: var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--chatgpt-route-radius-lg);
}
body.chatgpt-reference-v1 .chatgpt-drive-handover-case {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-xs);
padding: var(--chatgpt-route-gap-sm);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--chatgpt-route-radius-lg);
}
body.chatgpt-reference-v1 .chatgpt-drive-handover-case ul {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-2xs);
margin: 0;
padding: 0;
list-style: none;
}
body.chatgpt-reference-v1 .chatgpt-drive-handover-case li {
padding: var(--chatgpt-route-gap-xs);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
}
body.chatgpt-reference-v1 .chatgpt-drive-handover-case select {
min-width: 160px;
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-error {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chatgpt-route-gap-xs);
padding: var(--chatgpt-route-gap-xs);
border-radius: var(--chatgpt-route-radius-control);
background: var(--cg-hover-soft);
font-size: var(--ds-text-caption-13);
}
body.chatgpt-reference-v1 .chatgpt-drive-governance-loading {
margin: 0;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-governance,
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-copy,
body.chatgpt-reference-v1 .chatgpt-drive-rag-governance > header > span {
display: flex;
min-width: 0;
flex-direction: column;
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-governance {
gap: var(--chatgpt-route-gap-sm);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-governance > header {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chatgpt-route-gap-sm);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-governance > header > span,
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-copy {
gap: var(--chatgpt-route-gap-2xs);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-governance small,
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-copy small {
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-filters {
display: flex;
gap: var(--chatgpt-route-gap-2xs);
overflow-x: auto;
scrollbar-width: none;
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-filter {
display: inline-flex;
flex: 0 0 auto;
align-items: center;
gap: var(--chatgpt-route-gap-2xs);
min-height: var(--chatgpt-route-control-height);
padding: 0 var(--chatgpt-route-gap-xs);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--chatgpt-route-radius-pill);
background: transparent;
color: var(--cg-muted);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-filter.is-selected {
border-color: var(--cg-text);
background: var(--cg-text);
color: var(--cg-surface);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-list {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-2xs);
margin: 0;
padding: 0;
list-style: none;
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-row {
display: grid;
grid-template-columns: 36px minmax(0, 1fr) auto;
align-items: center;
gap: var(--chatgpt-route-gap-xs);
padding: var(--chatgpt-route-gap-xs);
border: 1px solid var(--cg-menu-border, var(--line));
border-radius: var(--chatgpt-route-radius-control);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-icon .wizon-file-type-icon {
width: 32px;
height: 32px;
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-copy strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-status {
display: inline-flex;
align-items: center;
gap: var(--chatgpt-route-gap-2xs);
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-status i,
body.chatgpt-reference-v1 .chatgpt-drive-ai-index-dot {
width: 7px;
height: 7px;
border-radius: var(--chatgpt-route-radius-pill);
background: var(--cg-muted);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-status[data-status="ready"] i,
body.chatgpt-reference-v1 .chatgpt-drive-ai-index-state[data-status="ready"] .chatgpt-drive-ai-index-dot {
background: var(--ad-green);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-status[data-status="failed"] i,
body.chatgpt-reference-v1 .chatgpt-drive-ai-index-state.is-error .chatgpt-drive-ai-index-dot {
background: var(--cg-danger-fg);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-status[data-status="processing"] i,
body.chatgpt-reference-v1 .chatgpt-drive-rag-status[data-status="queued"] i {
background: var(--ad-amber);
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-dialog {
position: fixed;
z-index: var(--wds-z-modal);
top: 50%;
left: 50%;
right: auto;
display: flex;
flex-direction: column;
width: min(560px, calc(100vw - (var(--wizon-ai-thread-gutter) * 2)));
min-width: 440px;
max-width: 560px;
max-height: min(80vh, 760px);
gap: var(--chatgpt-route-gap-sm);
padding: var(--chatgpt-route-gap-md);
overflow: hidden;
transform: translate(-50%, -50%);
box-shadow: var(--cg-shadow-float-lg), 0 0 0 100vmax var(--wizon-scrim);
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-head {
display: flex;
align-items: center;
justify-content: space-between;
gap: var(--chatgpt-route-gap-sm);
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-head > span {
display: flex;
flex-direction: column;
gap: var(--chatgpt-route-gap-2xs);
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-head h2 {
margin: 0;
color: var(--cg-text);
font-size: var(--ds-text-title-20);
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-head small {
overflow: hidden;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
text-overflow: ellipsis;
white-space: nowrap;
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-head button {
display: inline-grid;
place-items: center;
min-width: 44px;
min-height: 44px;
border: 0;
border-radius: var(--chatgpt-route-radius-control);
background: transparent;
color: var(--cg-text);
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-head button:focus-visible,
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-body button:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring, var(--cg-focus-ring));
outline-offset: 2px;
}
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-body {
min-height: 0;
overflow-y: auto;
overscroll-behavior: contain;
}
/* 20260812-drive-permissions-mobile-targets: production 390x844 QA measured
the native selects/actions at 31–36px. Keep the compact desktop dialog,
while making every direct permission action a non-overlapping 44px target
on touch layouts. */
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-drive-permissions-dialog,
body.chatgpt-reference-v1 .chatgpt-drive-governance-dialog,
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-dialog {
min-width: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-dialog select.ds-input,
body.chatgpt-reference-v1 .chatgpt-drive-permissions-dialog button,
body.chatgpt-reference-v1 .chatgpt-drive-governance-dialog select.ds-input,
body.chatgpt-reference-v1 .chatgpt-drive-governance-dialog button,
body.chatgpt-reference-v1 .chatgpt-drive-mobile-activity-dialog button {
min-width: 44px;
min-height: 44px;
}
body.chatgpt-reference-v1 .chatgpt-drive-permissions-row {
align-items: stretch;
}
body.chatgpt-reference-v1 .chatgpt-drive-handover-create {
grid-template-columns: 1fr;
}
body.chatgpt-reference-v1 .chatgpt-drive-handover-case li {
align-items: stretch;
flex-direction: column;
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-row {
grid-template-columns: 36px minmax(0, 1fr);
}
body.chatgpt-reference-v1 .chatgpt-drive-rag-index-row > .chatgpt-route-action {
grid-column: 1 / -1;
justify-content: center;
}
}
/* ============================================================================
* E1 2패널 탐색기(docs/product/215-wizon-drive-design.md) — 브레드크럼은 하단 경로 바로
* 이동. 라우트 자체는 중앙정렬 document 컨테이너를 풀고 전체폭으로 전환한다(아래 첫 블록,
* #artifactPanel의 ID+attribute 조합으로 베이스 .chatgpt-route-page보다 특이도를 높이는
* 패턴을 그대로 미러). 색/반경은 전부 기존 --cg-* 와 --chatgpt-route-* 토큰 재사용 — 이 블록의
* raw 리터럴은 없다(anti-drift 순증 0).
*
* 20260724-drive-shellfit (docs/product/215, 셸 정합 재구성): 위즈온 앱 셸이 이미 왼쪽에
* 260px 앱 사이드바(.app-shell)를 갖고 있어, E1이 그 옆에 또 240px 폴더 트리 레일을 두면
* "이중 사이드바"로 보였다 — 그 좌측 트리 패널(옛 .chatgpt-drive-tree*)을 데스크톱에서도
* 완전히 없애고, 목록은 전체폭 브라우즈로, 그 오른쪽을 선택 상태 기반 인스펙터 패널로
* 대체했다. 트리 렌더 CSS는 지금 실제 DOM 어디에도 쓰이지 않아 통째로 제거한다(JS의
* renderDriveTreePane/renderDriveTreeNode 자체는 남아 있지만 renderDrivePage가 더 이상
* 호출하지 않는다 — 트리 캐시(state.drive.tree.childrenByParentId)는 Miller 뷰 조상 컬럼이
* 계속 쓰므로 그대로 둔다).
* ========================================================================== */
html[data-portal-route="/drive"] #portalPage.chatgpt-route-page {
/* 20260725-drive-redesign R1: 800px 중앙문서 캡을 풀되 전체폭이 아니라 파인더식
넓은 중앙 콘텐츠(1000px)로 재중앙정렬한다 — 죽은 우측 여백 제거. 인스펙터는 더 이상
이 흐름 안 320px 컬럼이 아니라 아티팩트 패널과 동일한 position:fixed 오버레이(아래). */
--chatgpt-drive-content-max-width: 1000px;
width: 100%;
max-width: var(--chatgpt-drive-content-max-width);
margin: 0 auto;
padding: var(--chatgpt-route-page-top) var(--wizon-ai-thread-gutter) var(--chatgpt-route-page-bottom);
display: flex;
flex-direction: column;
min-height: 0;
}
html[data-portal-route="/drive"] #portalPage .chatgpt-route-page-inner {
flex: 1;
min-height: 0;
}
/* 20260724-drive-shellfit: [전체폭 브라우즈][320px 인스펙터] — 옛 [240px 트리][1fr 목록]을
대체. 인스펙터가 닫히면 .chatgpt-drive-explorer--inspector-closed가 붙어 1열로 접힌다
(renderDriveInspectorPane이 닫힘 상태에서 마크업 자체를 만들지 않으므로, 빈 grid 트랙이
생기지 않도록 트랙 정의도 같이 접어야 한다). */
/* 20260725-drive-redesign R1: 인스펙터가 흐름 밖 position:fixed 오버레이로 빠졌으므로
explorer는 인스펙터 열림/닫힘과 무관하게 항상 단일 컬럼(중앙 콘텐츠 전체폭). 옛 [1fr 320px]
2컬럼 트랙은 제거 — 인스펙터가 목록을 밀지 않고 그 위에 얹힌다(아티팩트 패널과 동일 계열). */
body.chatgpt-reference-v1 .chatgpt-drive-explorer {
display: grid;
grid-template-columns: minmax(0, 1fr);
gap: var(--chatgpt-route-gap-md);
min-height: 0;
}
body.chatgpt-reference-v1 .chatgpt-drive-explorer.chatgpt-drive-explorer--inspector-closed {
grid-template-columns: minmax(0, 1fr);
}
/* 우측 컬럼 목록(선택/이름/크기/수정일). 헤더와 행이 같은 컬럼 폭을 공유해 정렬을
맞추고, 행에만 마지막에 컨텍스트 메뉴("⋮") 트랙을 더한다(헤더는 그 트랙을 비워 둔다 —
두 selector가 동일 폭을 쓰므로 정렬은 깨지지 않는다).
20260724-drive-explorer-e2b: 맨 앞에 다중 선택 체크박스 컬럼을 추가하고, 기존에 각 행마다
따로 있던 다운로드/삭제/권한 관리 버튼은 컨텍스트 메뉴로 통합되어 마지막 트랙이 "⋮" 트리거
하나로 줄었다(그만큼 폭도 줄여 min-width로 보정).
20260725-drive-row-r2b: 유형 트랙(96px)을 통째로 제거 — 유형/권한 정보는 이제 이름 셀
안의 subline(둘째 줄)으로 옮겨 갔다(renderDriveColumnRow 참고). 남는 폭은 이름의
minmax(0, 1fr) 트랙이 그대로 흡수한다. min-width도 지워진 트랙+그 간격만큼(96px + 8px
gap) 그대로 줄여, 이름 트랙이 실제로 확보하던 최소 폭(옛 600px 기준 약 172px)을 그대로
보존한다. */
body.chatgpt-reference-v1 .chatgpt-drive-columns-pane {
min-width: 0;
overflow-x: auto;
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-head,
body.chatgpt-reference-v1 .chatgpt-drive-columns-row {
display: grid;
grid-template-columns: 28px minmax(0, 1fr) 96px 128px 40px;
align-items: center;
gap: 8px;
min-width: 496px;
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-cell-select {
display: flex;
align-items: center;
justify-content: center;
}
body.chatgpt-reference-v1 .chatgpt-drive-select-checkbox {
width: 16px;
height: 16px;
margin: 0;
cursor: pointer;
/* 20260725-drive-redesign R2: 체크 표시를 네이티브 파랑이 아니라 잉크로 — 파랑은 계정 아바타
전용(모노 규칙). 토큰 구동이라 다크에서는 밝은 잉크로 flip. */
accent-color: var(--cg-text);
}
/* 20260725-drive-redesign R2: 미세 포인터(데스크톱)에서는 체크박스를 호버/선택/포커스에서만
드러내 평소 행을 조용하게 유지 — 터치(호버 없음)에서는 항상 보여 선택 가능성을 지킨다(doc147). */
@media (hover: hover) and (pointer: fine) {
body.chatgpt-reference-v1 .chatgpt-drive-select-checkbox {
opacity: 0;
transition: opacity 0.12s ease;
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-row:hover .chatgpt-drive-select-checkbox,
body.chatgpt-reference-v1 .chatgpt-drive-columns-row.is-selected .chatgpt-drive-select-checkbox,
body.chatgpt-reference-v1 .chatgpt-drive-select-checkbox:focus-visible,
body.chatgpt-reference-v1 .chatgpt-drive-select-checkbox:checked {
opacity: 1;
}
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-row.is-selected {
background: var(--cg-hover-soft);
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-row:focus-visible,
body.chatgpt-reference-v1 .chatgpt-drive-search-result:focus-visible {
outline: 2px solid var(--cg-focus-visible-ring, var(--cg-focus-ring));
outline-offset: -2px;
}
/* 20260725-drive-redesign R2: 선택 = 표면 상승 + 좌측 잉크 바(색 하이라이트 없이 명도/위치로만). */
body.chatgpt-reference-v1 .chatgpt-drive-columns-row.is-selected::before {
content: "";
position: absolute;
left: 0;
top: 0;
bottom: 0;
width: 2px;
background: var(--cg-text);
}
/* 좌측 잉크 바는 리스트/밀러 같은 각진 행의 스파인 어포던스다. 라운드 카드(그리드·갤러리
뷰, border-radius control)에서는 직각 바가 모서리를 삐져나오므로 끄고, 카드 선택은 이미
있는 표면 상승(is-selected 배경)으로만 표시한다 — 4뷰 공유 행 마크업의 뷰별 분기. */
body.chatgpt-reference-v1 .chatgpt-drive-columns.is-grid-view .chatgpt-drive-columns-row.is-selected::before,
body.chatgpt-reference-v1 .chatgpt-drive-gallery-filmstrip .chatgpt-drive-columns-row.is-selected::before {
display: none;
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-head {
padding: 8px 12px;
border-bottom: 1px solid var(--cg-menu-border, var(--line));
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
text-transform: uppercase;
/* 20260725-drive-redesign R2: 헤더 라벨 트래킹을 넓혀 "설계된" 캡션 톤(정렬은 행과 동일 패딩). */
letter-spacing: 0.06em;
}
/* 20260725-drive-redesign R2: 30px 아이콘 칩과 함께 행 높이가 ~46px로 올라가 리듬이 생긴다.
position:relative는 선택 좌측 잉크 바(::before)의 앵커. */
body.chatgpt-reference-v1 .chatgpt-drive-columns-row {
position: relative;
padding: 8px 12px;
border-bottom: 1px solid var(--cg-menu-border, var(--line));
}
@media (hover: hover) {
body.chatgpt-reference-v1 .chatgpt-drive-columns-row:hover {
background: var(--cg-hover-soft);
}
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-cell {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--cg-muted);
font-size: var(--ds-text-caption-13);
/* 20260725-drive-redesign R2: 크기/수정일 숫자를 tabular-nums로 우측 정렬 시 자리수 맞춤(질서). */
font-variant-numeric: tabular-nums;
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-cell-name {
display: flex;
align-items: center;
gap: 11px;
min-width: 0;
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-cell-name strong {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
display: block;
min-width: 0;
color: var(--cg-text);
font-weight: 500;
/* 20260725-drive-redesign R2: 파일명에 살짝의 마이너스 자간 — 프리미엄 리스트의 "설계된" 톤. */
letter-spacing: -0.01em;
}
/* 20260725-drive-row-r2b: 이름(strong) + subline(둘째 줄)을 세로로 쌓는 래퍼 — 파일 행은
.chatgpt-drive-columns-cell-name의 바로 아래 자식, 폴더 행은 .chatgpt-drive-row-open
버튼 안쪽 자식이라 depth가 다르지만 이 규칙은 depth와 무관하게 둘 다 잡는다. min-width:0은
부모(cell-name, 폴더는 그 위에 .chatgpt-drive-row-open까지)가 flex 아이템일 때 이 래퍼가
내용 크기로 안 늘어나고 정상적으로 줄어들도록(그래야 strong/subline의 ellipsis가 먹는다). */
body.chatgpt-reference-v1 .chatgpt-drive-columns-name-text {
display: flex;
flex-direction: column;
min-width: 0;
gap: 2px;
}
/* subline = 파일 유형(driveFileTypeMeta 라벨) 또는 폴더 내 권한(driveRoleLabel), 실제
컬럼에서 옮겨온 값 — 톤은 헤더 캡션과 같은 --ds-text-caption-12 + --cg-muted. */
body.chatgpt-reference-v1 .chatgpt-drive-columns-subline {
overflow: hidden;
text-overflow: ellipsis;
white-space: nowrap;
color: var(--cg-muted);
font-size: var(--ds-text-caption-12);
}
/* File-type assets already own their complete silhouette. Keep this wrapper geometry-only so
the transparent SVG never gains a second tile, border, or clipped corner around it. */
body.chatgpt-reference-v1 .chatgpt-drive-columns-icon {
display: grid;
place-items: center;
flex: 0 0 auto;
width: 30px;
height: 30px;
overflow: hidden;
border-radius: 0;
background: transparent;
box-shadow: none;
color: var(--cg-muted);
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-icon .wizon-file-type-icon {
width: 100%;
height: 100%;
max-width: 100%;
max-height: 100%;
aspect-ratio: 1 / 1;
object-fit: contain;
}
/* 폴더 칩은 잉크 글리프로 위계 강조(색상 구분이 아니라 명도 — 모노 규칙 준수). */
body.chatgpt-reference-v1 .chatgpt-drive-columns-row[data-drive-folder-row-id] .chatgpt-drive-columns-icon {
color: var(--cg-text);
}
body.chatgpt-reference-v1 .chatgpt-drive-columns-icon svg { width: 16px; height: 16px; }
/* 모노 잉크(색상 구분 금지) — 파일 유형 아이콘은 색이 아니라 glyph로만 구분한다. */
body.chatgpt-reference-v1 .chatgpt-drive-columns-actions {
display: flex;
align-items: center;
justify-content: flex-end;
gap: 6px;
flex-wrap: wrap;
}
/* M3 스와이프 삭제(우→좌) — 모바일 전용 기능이지만, 래퍼 자체(overflow:hidden 앵커 + 행의
touch-action)는 뷰포트와 무관하게 항상 필요하다(행이 그 안에서만 좌우로 움직여야 페이지가
안 밀린다) — 그래서 이 블록은 미디어쿼리 밖에 둔다. 실제 액션 패널(.chatgpt-drive-swipe-actions)의
기본값은 display:none이고, 화면에 드러내는 규칙은 아래 <=900px 블록 "안에서만" 켠다 — M2에서
겪은 함정(칩 스타일을 미디어쿼리 안에만 둬서 그 밖의 기본 규칙이 없어 1280px 데스크톱에
스타일 없는 요소가 그대로 샌 결함)을 반복하지 않기 위해 기본값을 항상 명시적으로 밖에 둔다.
1280px에서 렌더되는지 실측 결과는 작업 보고에 기록한다. */
body.chatgpt-reference-v1 .chatgpt-drive-swipe-row {
position: relative;
overflow: hidden;
}
body.chatgpt-reference-v1 .chatgpt-drive-swipe-row .chatgpt-drive-columns-row {
/* 컴포지터 전용 속성(transform)만 애니메이션한다 — left/margin 금지. transform 값 자체는
bindDriveRowSwipe가 인라인 스타일로 쓰고, 여기서는 그 값이 바뀔 때의 전환 채널만 연다. */
transition: transform var(--wizon-motion-micro-duration, 150ms) var(--wizon-motion-effect-fast, ease);
touch-action: pan-y; /* 세로 스크롤은 브라우저에 맡기고 가로만 JS가 가져간다(preventDefault) */
}
@media (prefers-reduced-motion: reduce) {
body.chatgpt-reference-v1 .chatgpt-drive-swipe-row .chatgpt-drive-columns-row {
transition: none;
}
}
body.chatgpt-reference-v1 .chatgpt-drive-swipe-actions {
display: none;
}
@media (max-width: 900px) {
body.chatgpt-reference-v1 .chatgpt-drive-swipe-actions {
display: flex;
position: absolute;
inset: 0 0 0 auto;
align-items: stretch;
/* 닫혀 있을 때는 시각적으로도, 포커스/탭 순서에서도 존재하지 않는다 — visibility:hidden은
display:none과 달리 레이아웃 폭 계산(actionWidth 측정)은 유지하면서 상호작용만 끈다. */
visibility: hidden;
}
body.chatgpt-reference-v1 .chatgpt-drive-swipe-row.is-drive-swipe-active .chatgpt-drive-swipe-actions {
visibility: visible;
}
body.chatgpt-reference-v1 .chatgpt-drive-swipe-delete-btn {
height: 100%;
display: flex;
align-items: center;
justify-content: center;
gap: var(--ds-space-2);
padding: 0 var(--ds-space-6);
min-width: var(--ds-space-9);
border: none;
background: var(--ds-button-danger-bg);
color: var(--ds-button-danger-fg);
font-size: var(--ds-text-body-14);
font-weight: 500;
cursor: pointer;
}
body.chatgpt-reference-v1 .chatgpt-drive-swipe-delete-btn:hover,
body.chatgpt-reference-v1 .chatgpt-drive-swipe-delete-btn:focus-visible {
background: var(--ds-button-danger-bg-hover);
}
body.chatgpt-reference-v1 .chatgpt-drive-swipe-delete-btn svg {
width: 16px;
height: 16px;
}
}
/* R3a Finder-style inline folder creation (docs/product/215): the draft row (renderDriveDraftRow)
reuses the SAME row/cell classes as a real row (select/name/size/modified/actions) so list and
grid stay visually consistent — only the name cell differs (a live input instead of the
open-folder button). The select/size/modified/actions cells render empty; the row itself is a