/* Claude Code 업데이트 한눈에 보기 — 페이지 전용 스타일.
   ds/tokens.css, ds/components/bundle.css 다음에 불러온다.
   시스템 컴포넌트로 안 되는 부분만 둔다. 색은 시스템 토큰만, 글자 크기는 12 · 14 · 17 · 21 · 24px 단계만 쓴다.
   자간은 시스템 표(크기 · 굵기별 값)를 따른다. */

/* ── 공통 ── */
/* grid · flex로 display를 준 요소에서도 hidden 속성이 이기도록 */
[hidden] { display: none !important; }

.ps-features,
.pg-releases,
.pg-release__items,
#source-list,
#community-excluded { list-style: none; margin: 0; padding: 0; }

/* ── 상태: 데이터가 준비되기 전과 오류일 때는 내용과 바로가기를 숨긴다 ── */
/* 상태는 app.js가 head에서 <html data-state>에 붙인다: loading → ready | error */
:root:not([data-state="ready"]) [data-requires-data] { display: none; }
:root:not([data-state="ready"]) .ps-localnav__links { display: none; }
/* 정적 안내는 app.js가 상태를 정하지 못했을 때만 보인다 (스크립트 꺼짐 · 로드 실패) */
:root[data-state] #static-notice { display: none; }
/* 오류 안내는 error 상태에서만 보인다. hidden 속성 해제와 함께 이 조건도 맞아야 보인다 */
:root:not([data-state="error"]) #load-error { display: none; }

/* ── 자간: bundle.css가 .ps-root * 에 -0.02em을 걸어 끼워 넣은 숫자 · 날짜가 부모 자간을 덮는다. 부모 값을 따르게 한다 ── */
.ps-root [data-bind],
.ps-root mark,
.pg-micro *,
.pg-thread *,
.ps-table .ps-sub *,
.ps-feature__source * { letter-spacing: inherit; }
/* bundle.css의 .ps-verdict span은 보조 문장용 색을 준다. 끼워 넣은 숫자는 놓인 문장의 색을 따르게 한다 */
.ps-verdict [data-bind] { color: inherit; }

/* ── 로컬 내비게이션 바탕: bundle.css는 흰색 rgba 고정에 [data-theme="dark"]만 대응해
   prefers-color-scheme: dark에서 밝은 글자가 흰 바탕 위에 놓인다. 표면 토큰을 따르게 한다.
   var()가 든 color-mix는 미지원 브라우저에서 계산 시점에 무효가 되어 앞 선언으로 되돌아가지 않으므로 @supports로 나눈다 ── */
.ps-localnav > .ps-localnav__in,
.ps-chip:not(.ps-chip--primary) { background: var(--surface-raised); }
@supports (background: color-mix(in srgb, red 80%, transparent)) {
  .ps-localnav > .ps-localnav__in,
  .ps-chip:not(.ps-chip--primary) { background: color-mix(in srgb, var(--surface-raised) 80%, transparent); }
}

/* ── 건너뛰기 링크 ── */
.pg-skip {
  position: fixed; left: -10000px; top: 0; z-index: 11;
  font-size: 14px; line-height: 20px; padding: 8px 16px;
  border-radius: var(--radius-cell); background: var(--surface-raised); color: var(--ink);
  text-decoration: none;
}
.pg-skip:focus {
  left: max(var(--localnav-offset), env(safe-area-inset-left, 0px));
  top: calc(env(safe-area-inset-top, 0px) + var(--localnav-offset));
  outline: 2px solid var(--link); outline-offset: 2px;
}

/* ── 로컬 내비게이션: 좁은 화면에서 이름을 "Claude Code"로 줄이고, 그래도 모자라면 이름만 말줄임 ── */
.ps-localnav__title { min-width: 0; overflow: hidden; text-overflow: ellipsis; }
.ps-localnav__links { flex: none; }

/* ── 작은 글 ── */
.pg-micro { margin-top: var(--space-caption); font-size: 12px; line-height: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-tertiary); }

.pg-meta { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.pg-meta__version { font-size: 12px; line-height: 17px; letter-spacing: -0.01em; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }

/* ── 링크와 글자 버튼 ── */
.pg-link { color: var(--link); text-decoration: none; }
.pg-link:hover { text-decoration: underline; }
.pg-link:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--radius-swatch); }

.pg-btn {
  -webkit-appearance: none; appearance: none;
  margin: 0; padding: 2px 0; border: 0; background: none;
  font: inherit; font-size: 14px; line-height: 20px; font-weight: 400;
  color: var(--link); cursor: pointer; text-align: left;
}
.pg-btn:hover { text-decoration: underline; }
.pg-btn:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--radius-swatch); }

/* ── 비교 대상 색 (BarRow 막대, 범례 견본, 표 점이 --c로 읽는다) ── */
.pg-c-orange { --c: var(--accent-orange); }
.pg-c-blue { --c: var(--accent-blue); }

/* ── 패널 안 안내 문장 (오류, 정적 안내, 빈 결과) ── */
.ps-panel > .ps-panel__title + p,
.pg-empty__hint { margin-top: 8px; font-size: 17px; line-height: 27px; color: var(--ink-secondary); }
.ps-panel > .pg-btn { margin-top: 16px; }

/* ── 연회색(alt) 섹션의 패널 위 입력 요소: 패널이 surface-raised가 되므로 검색창 · 누르지 않은 칩은 반대 표면 surface로 둔다
   (bundle.css는 패널 안 .ps-segment를 surface-raised로 두어 alt 패널과 같은 바탕이 된다) ── */
.ps-section--alt .pg-search { background: var(--surface); }
.ps-section--alt .ps-panel .ps-segment:not([aria-pressed="true"]) { background: var(--surface); }

/* ── 필터와 검색 ── */
.pg-result { font-size: 14px; line-height: 20px; color: var(--ink-secondary); }

.pg-controls { display: flex; flex-direction: column; gap: 20px; }
.pg-controls__row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px 24px; }

.pg-field__label { display: block; margin-bottom: 8px; font-size: 12px; line-height: 16px; font-weight: 600; letter-spacing: 0; color: var(--ink-tertiary); }

.pg-search {
  -webkit-appearance: none; appearance: none;
  display: block; width: 100%; max-width: var(--text-max); margin: 0;
  padding: 12px 20px; border: 1px solid var(--line); border-radius: var(--radius-pill);
  background: var(--surface-raised); color: var(--ink);
  font: inherit; font-size: 17px; line-height: 27px; font-weight: 400;
}
.pg-search::placeholder { color: var(--ink-tertiary); opacity: 1; }
.pg-search:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }

.pg-filters { display: flex; flex-wrap: wrap; gap: 8px; }
.pg-chip { padding: 6px 14px; }
.pg-chip__count { margin-left: 6px; font-size: 12px; letter-spacing: -0.01em; color: inherit; font-variant-numeric: tabular-nums; }

.pg-check { display: inline-flex; align-items: center; gap: 8px; font-size: 14px; line-height: 20px; color: var(--ink); cursor: pointer; }
.pg-check input { margin: 0; accent-color: var(--cta); }
.pg-check input:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pg-check:has(input:disabled) { color: var(--ink-tertiary); cursor: default; }

/* ── 표: bundle.css의 숫자 칸은 오른쪽 여백이 0이라, 숫자 칸 뒤에 글자 칸이 오면 붙는다 ── */
.ps-table .ps-num + :not(.ps-num) { padding-left: 16px; }
/* 행 머리 칸(tbody th scope=row)은 bundle.css의 열 머리글 규칙(12px·600·tertiary·아래 12px·자간 0)을 받으므로 td 본문 칸 값으로 되돌린다.
   td는 글자 크기·굵기·색을 따로 정하지 않고 표(14px/20px)와 body(400·ink)에서 물려받으므로 inherit, 아래 여백과 자간은 td가 받는 값 그대로다 */
.ps-table tbody th { font-size: inherit; font-weight: inherit; color: inherit; padding-bottom: 14px; letter-spacing: -0.02em; }
/* 칸 안 보조 줄은 시스템 .ps-sub(블록 · 12px/17px · ink-tertiary)를 쓴다. 제목이나 숫자 옆에 붙는 인라인 표시(이슈 댓글의 공개 전 개설,
   스레드 제목 옆 종류 라벨, 저장소 수 옆 아래 주석)는 .ps-sub를 쓸 수 없어(블록이라 아래 줄로 떨어진다) 같은 글자 값을 따로 준다. 브라우저 기본 small(smaller)은 글자 단계 밖이다 */
.ps-table .pg-note { margin-left: 4px; font-size: 12px; line-height: 17px; color: var(--ink-tertiary); white-space: nowrap; }
/* 한 칸에 보조 줄이 여러 개 쌓이면(나머지 스레드, 검색어와 검색 링크) 17px 줄이 붙어 한 덩어리로 읽힌다. Panel A 이름 칸의 .pg-thread와 같은 4px을 띄운다 */
.ps-table .ps-sub + .ps-sub { margin-top: 4px; }
/* 8열 표는 시스템 최소 폭 760px에서 스레드 제목 칸이 몇 글자씩 끊기고 날짜가 하이픈에서 갈라진다. 더 좁으면 감싼 영역 안에서 가로 스크롤한다 */
.ps-table.pg-table--wide { min-width: 960px; }

/* ── 접이식 수치 표 ── */
.pg-details { margin-top: 24px; font-size: 14px; line-height: 20px; }
.pg-details > summary { width: max-content; max-width: 100%; color: var(--link); cursor: pointer; border-radius: var(--radius-swatch); }
.pg-details > summary:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; }
.pg-details .ps-table-wrap { margin-top: 16px; }
.ps-table-wrap:focus-visible { outline: 2px solid var(--link); outline-offset: 2px; border-radius: var(--radius-swatch); }

/* ── 버전별 변경 기록 ── */
.pg-month { margin: 56px 0 8px; font-size: 24px; line-height: 28px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.pg-month:first-child { margin-top: 0; }
/* 앞쪽 월이 필터로 숨으면 처음 보이는 월의 위 여백을 없앤다 */
.pg-releases > :nth-child(1 of :not([hidden])) { margin-top: 0; }

.pg-release {
  border-top: 1px solid var(--line); padding: 24px 0 12px;
  scroll-margin-top: calc(env(safe-area-inset-top, 0px) + 76px);
}
.pg-release:focus { outline: 2px solid var(--link); outline-offset: 8px; border-radius: var(--radius-cell); }

.pg-release__head { display: flex; flex-wrap: wrap; align-items: baseline; gap: 8px 16px; }
.pg-release__version { font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.pg-release__date { font-size: 14px; line-height: 20px; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
.pg-release__count { font-size: 12px; line-height: 17px; letter-spacing: -0.01em; color: var(--ink-tertiary); font-variant-numeric: tabular-nums; }
.pg-release__source { margin-left: auto; font-size: 14px; line-height: 20px; }

.pg-item {
  display: grid; grid-template-columns: 13em minmax(0, 1fr) auto; gap: 4px 16px;
  padding: 14px 0; border-bottom: 1px solid var(--line);
  font-size: 14px; line-height: 22px;
}
.pg-item:last-child { border-bottom: 0; }
.pg-releases .pg-release__items > :nth-last-child(1 of :not([hidden])) { border-bottom: 0; }
/* Tag(24px)와 글자 버튼(24px)을 22px 첫 줄 가운데에 맞춘다 */
.pg-item > .ps-tag { justify-self: start; align-self: start; margin-top: -1px; }
.pg-item__toggle { align-self: start; margin-top: -1px; white-space: nowrap; }
.pg-item__ko { font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-secondary); }
.pg-item__en { grid-column: 2 / -1; margin-top: 4px; font-size: 14px; line-height: 22px; color: var(--ink-tertiary); }

.ps-root mark { background: var(--level-1); color: var(--ink); border-radius: var(--radius-swatch); padding: 0 2px; }

/* ── 출처와 기준 ── */
.pg-notes { display: flex; flex-direction: column; gap: 12px; max-width: var(--text-max); font-size: 14px; line-height: 22px; color: var(--ink-secondary); }
.pg-notes__title { font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
#source-list,
#community-excluded { display: flex; flex-direction: column; gap: 4px; }
/* .pg-notes의 12px 간격과 합쳐 소제목 위가 24px이 된다 */
.pg-notes__subtitle { margin-top: 12px; font-size: 14px; line-height: 22px; font-weight: 600; letter-spacing: -0.01em; color: var(--ink); }

/* ── 커뮤니티 반응: 값 하나짜리 점 차트 ──
   시스템 DotPlot의 행(.ps-dot-row) · 눈금선(.ps-dot-row__grid) · 표식(.ps-marker) · 요약 칸(.ps-dot-row__sum)을 그대로 쓴다.
   행마다 값이 하나라 이음선(.ps-dot-row__gap)은 없고, 행 이름이 글이라 24px .ps-dot-row__x 대신 14px 이름 칸을 둔다.
   축 글자 행(.pg-dot-axis)도 같은 열을 써야 눈금선과 글자가 맞으므로 두 행에 같은 열 정의를 준다. */
.ps-dotplot > .pg-dot-row { display: grid; grid-template-columns: minmax(0, 14em) minmax(12em, 1fr) 6em; column-gap: 16px; align-items: center; }
/* 스레드 제목(영문 최대 약 75자)이 이름 칸에 들어가도록 Panel A만 넓힌다. 눈금 칸의 최소 12em이 먼저 잡히므로
   735~1068px에서는 이름 칸이 26em보다 줄어 눈금 글자(10 ~ 10,000)끼리 겹치지 않는다 */
#community-hn-plot > .pg-dot-row { grid-template-columns: minmax(0, 26em) minmax(12em, 1fr) 6em; }
.pg-dot-row__name { font-size: 14px; line-height: 20px; color: var(--ink); overflow-wrap: anywhere; }
.pg-dot-row__name small { display: block; font-size: 12px; line-height: 17px; color: var(--ink-tertiary); }
/* 스레드가 여러 개면 한 줄씩 쌓인다. 줄 사이를 조금 띄워 서로 다른 스레드로 읽히게 한다 */
.pg-dot-row__name .pg-thread { margin-top: 4px; }
/* 시스템 표식은 top을 행마다 인라인으로 받는다. 여기서는 값이 하나라 늘 가운데 */
.pg-dot-row .ps-marker { top: 50%; }
/* 시스템 DotPlot처럼 마지막 값 행 아래에는 선을 두지 않는다(축 글자 행은 .ps-dot-row가 아니라 :last-of-type이 걸리지 않는다) */
.ps-dotplot > .ps-dot-row:has(+ .pg-dot-axis) { border-bottom: 0; }
.pg-dot-axis { padding-top: 8px; }
.pg-dot-axis .ps-dot-row__plot { height: 17px; }
.pg-dot-axis__tick {
  position: absolute; top: 0; transform: translateX(-50%);
  font-size: 12px; line-height: 17px; font-weight: 400; letter-spacing: -0.01em; color: var(--ink-tertiary);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* ps-wrap의 블록 간격이 소제목 위 여백을 맡는다 */
.pg-subhead { font-size: 21px; line-height: 29px; font-weight: 600; letter-spacing: 0; color: var(--ink); }
.pg-subhead__lead { max-width: var(--text-max); margin-top: 8px; font-size: 14px; line-height: 22px; font-weight: 400; color: var(--ink-secondary); }
.pg-builds > .ps-table-wrap { margin-top: 16px; }

/* ── 734px 이하 ── */
@media (max-width: 734px) {
  .pg-localnav__more { display: none; }

  /* 이름 → 눈금 → 값을 위에서 아래로. 시스템의 모바일 열(2.8em 1fr)보다 구체적인 선택자로 덮는다 */
  .ps-dotplot > .pg-dot-row,
  #community-hn-plot > .pg-dot-row { grid-template-columns: minmax(0, 1fr); row-gap: 4px; }
  .pg-dot-row > .ps-dot-row__sum { grid-column: auto; text-align: left; }
  .pg-dot-axis > span { display: none; }

  .pg-month { margin-top: 40px; }
  .pg-release__source { flex-basis: 100%; margin-left: 0; }

  .pg-item { grid-template-columns: minmax(0, 1fr); row-gap: 8px; }
  .pg-item__toggle { justify-self: start; margin-top: 0; }
  .pg-item__en { grid-column: 1 / -1; margin-top: 0; }
}