/* WIZON Settings v2 — isolated surface. Uses only current WIZON AI shell tokens. */
.settings-v2-dialog {
  width: min(1200px, calc(100vw - 40px));
  max-width: none;
  height: calc(100dvh - 40px);
  max-height: 940px;
  padding: 0;
  overflow: hidden;
  color: var(--wizon-ai-text-primary);
  background: transparent;
  border: 0;
  border-radius: var(--wizon-ai-radius-sheet);
  box-shadow: var(--wizon-ai-dialog-shadow);
  font-family: var(--wizon-ai-font-family);
}

.settings-v2-dialog::backdrop,
.settings-v2-nudge::backdrop {
  background: var(--wizon-scrim);
  backdrop-filter: blur(1px);
}

.settings-v2-shell {
  display: grid;
  grid-template-rows: 84px minmax(0, 1fr);
  width: 100%;
  height: 100%;
  overflow: hidden;
  background: var(--wizon-ai-surface);
  border: 1px solid var(--wizon-ai-popover-border);
  border-radius: inherit;
}

.settings-v2-header {
  position: relative;
  z-index: 2;
  display: grid;
  grid-template-columns: 44px minmax(0, 1fr) 44px;
  align-items: center;
  gap: 8px;
  padding: 0 28px;
  border-bottom: 1px solid var(--wizon-ai-sidebar-border);
  background: var(--wizon-ai-surface);
}

.settings-v2-header h2 {
  grid-column: 2;
  margin: 0;
  font-size: 28px;
  font-weight: 650;
  line-height: 1.2;
  letter-spacing: -0.02em;
}

/* 아이콘 버튼은 WDS IconButton 컴포넌트를 쓴다(자체 아이콘 버튼 스타일 없음). */
.settings-v2-icon svg,
.settings-v2-search svg,
.settings-v2-nav svg,
.settings-v2-scope-entry svg,
.settings-v2-status svg {
  display: block;
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

.settings-v2-close {
  grid-column: 3;
}

.settings-v2-back {
  grid-column: 1;
}

.settings-v2-back[hidden] {
  display: none;
}

/* S16 — 뒤로 버튼이 hidden이어도(데스크톱 최상위 화면) 그리드는 여전히
   왼쪽 44px 열을 예약해 제목이 오른쪽으로 밀리고 좌/우 여백이 비대칭이었다
   (judge 2026-09-12 §5 실측: 좌 80 / 우 28). 뒤로 버튼이 없는 상태에서만
   왼쪽 열을 없애 제목·닫기 버튼 2열 그리드로 되돌린다. 모바일은 리스트/
   상세 전환에 뒤로 버튼 유무가 실제로 쓰이고 제목도 별도로 중앙 정렬
   (900px 미디어쿼리)하므로 900px 초과(데스크톱)에서만 적용한다. */
@media (min-width: 901px) {
  .settings-v2-header:has(.settings-v2-back[hidden]) {
    grid-template-columns: minmax(0, 1fr) 44px;
  }

  .settings-v2-header:has(.settings-v2-back[hidden]) h2 {
    grid-column: 1;
  }

  .settings-v2-header:has(.settings-v2-back[hidden]) .settings-v2-close {
    grid-column: 2;
  }
}

.settings-v2-body {
  display: grid;
  grid-template-columns: 320px minmax(0, 1fr);
  min-height: 0;
  overflow: hidden;
}

/* 가로 여백 20px는 아래 .settings-v2-nav의 블리드 값과 짝이다 — 한쪽만 바꾸면
   스크롤바가 경계선에서 떨어지거나 항목이 잘린다. (커스텀 속성으로 묶지 않는 이유:
   이 파일의 var()는 전부 --wizon- 디자인 토큰이어야 한다는 계약이 있고, 이건
   디자인 토큰이 아니라 컴포넌트 내부 배관값이다.) */
.settings-v2-sidebar {
  display: flex;
  min-width: 0;
  min-height: 0;
  padding: 24px 20px 0;
  flex-direction: column;
  overflow: hidden;
  border-right: 1px solid var(--wizon-ai-sidebar-border);
  background: var(--wizon-ai-sidebar-bg);
}

.settings-v2-profile {
  display: grid;
  grid-template-columns: 52px minmax(0, 1fr);
  align-items: center;
  gap: 14px;
  min-height: 52px;
  padding: 8px 10px 16px;
}

/* 아바타는 WDS Avatar 컴포넌트를 쓴다(자체 아바타 스타일 없음). */

.settings-v2-profile strong,
.settings-v2-profile span {
  display: block;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-v2-profile strong {
  font-size: 16px;
  font-weight: 620;
}

.settings-v2-profile span {
  margin-top: 4px;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-label);
}

/* 검색 필드 자체는 WDS SearchField 컴포넌트가 그린다 — 여기서는 사이드바 안에서의
   여백만 잡는다(형태·색은 WDS + 토큰 브리지 담당). */
.settings-v2-search {
  margin: 4px 4px 12px;
}

.settings-v2-nav {
  min-height: 0;
  /* 오른쪽 본문은 패딩을 가진 요소 자체가 스크롤 컨테이너라 스크롤바가 테두리에 붙는다.
     사이드바는 패딩이 부모에 있고 스크롤 컨테이너가 그 안쪽 nav라, 그대로 두면 스크롤바가
     사이드바 여백(20px)만큼 안으로 뜬다. 컨테이너를 그만큼 밖으로 넓히고 같은 값을
     padding으로 되돌려, 항목 정렬은 유지한 채 스크롤바만 경계선에 붙인다.
     모바일(<=900px)은 nav 가 직접 스크롤 컨테이너다 — 이 선언이 그대로 살아있다.
     데스크톱(>=901px)은 아래 .settings-v2-nav-scroll 래퍼가 스크롤을 맡아
     이 선언을 중립화한다(바로 아래 min-width: 901px 블록). */
  margin-right: -20px;
  padding: 0 24px 20px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--wizon-ai-scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

/* 내비 스크롤 컨테이너 — nav 본문과 스코프 항목(「회사 관리」/「내 설정」)을
   하나의 스크롤 영역으로 묶는다. 예전에는 스코프 항목이 사이드바의 별도
   flex 자식(flex: 0 0 auto)으로 고정 푸터를 차지해 nav 스크롤 가능 높이를
   73.4px 갉아먹었다 — 12/13개 항목 중 마지막 1~2개가 잘리거나 살짝만
   보였다(judge 2026-09-12 §5 실측). 모바일(<=900px)에서는 이 래퍼가
   display:contents로 사라져 스코프 항목이 다시 사이드바의 직계 flex
   자식이 되고(원래의 고정 푸터 동작), nav가 다시 자기 스크롤을 갖는다
   — 아래 900px 이하 전면 시트 미디어쿼리 블록 참고. */
.settings-v2-nav-scroll {
  min-height: 0;
  /* 오른쪽 본문은 패딩을 가진 요소 자체가 스크롤 컨테이너라 스크롤바가 테두리에 붙는다.
     사이드바는 패딩이 부모에 있고 스크롤 컨테이너가 그 안쪽 nav-scroll이라, 그대로 두면
     스크롤바가 사이드바 여백(20px)만큼 안으로 뜬다. 컨테이너를 그만큼 밖으로 넓히고 같은
     값을 padding으로 되돌려, 항목 정렬은 유지한 채 스크롤바만 경계선에 붙인다. */
  margin-right: -20px;
  padding: 0 24px 20px 4px;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-color: var(--wizon-ai-scrollbar-thumb) transparent;
  scrollbar-width: thin;
}

/* 데스크톱: 스크롤은 .settings-v2-nav-scroll 이 맡는다 — 안쪽 nav 는 블리드·패딩·
   스크롤을 모두 내려놓아 이중 적용(오른쪽 -20px·패딩 24px 두 번)을 막는다. */
@media (min-width: 901px) {
  .settings-v2-nav {
    min-height: auto;
    margin-right: 0;
    padding: 0;
    overflow: visible;
  }
}

.settings-v2-nav-label {
  margin: 6px 12px 8px;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-caption);
  font-weight: 600;
}

.settings-v2-nav button,
.settings-v2-scope-entry button {
  display: grid;
  grid-template-columns: 24px minmax(0, 1fr) 20px;
  align-items: center;
  gap: 12px;
  width: 100%;
  min-height: 44px;
  padding: 0 14px;
  color: var(--wizon-ai-text-primary);
  background: transparent;
  border: 0;
  border-radius: 12px;
  text-align: left;
  font: inherit;
  font-size: 15px;
}

.settings-v2-nav button.is-active {
  background: var(--wizon-ai-sidebar-active-bg);
  font-weight: 620;
}

.settings-v2-nav button[hidden] {
  display: none;
}

/* P3: 모바일 시맨틱 그룹 카드 래퍼. 데스크톱 기본값은 display:contents로
   래퍼 자체를 레이아웃에서 투명하게 만들어 버튼들이 오늘과 동일하게 nav의
   직계 흐름에 참여하게 한다(순서·간격·hover 전부 기존과 동일). 캡션은
   데스크톱에서 숨긴다. 실제 카드 배경/보더/라운드는 모바일 폭 축소 구간
   전용 미디어쿼리 안에서만 부여한다(파일 하단 참고). */
.settings-v2-nav-group,
.settings-v2-nav-card {
  display: contents;
}

.settings-v2-nav-group-label {
  display: none;
}

.settings-v2-nav .settings-v2-chevron {
  display: none;
  justify-self: end;
}

/* P2: nav-item icons render as a ~28px rounded "ghost tile" (soft bg + subtle
   border, ink glyph) instead of a bare glyph. The chevron span also carries
   the settings-v2-icon base class, so it is explicitly excluded — it must
   stay a plain arrow, not a boxed tile (visible on mobile detail view). */
.settings-v2-nav button {
  grid-template-columns: 28px minmax(0, 1fr) 20px;
}

.settings-v2-nav .settings-v2-icon:not(.settings-v2-chevron) {
  display: inline-grid;
  width: 28px;
  height: 28px;
  place-items: center;
  color: var(--wizon-ai-text-primary);
  background: var(--wizon-ai-hover-soft-bg);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 8px;
  transition: background var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
    border-color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast),
    color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}

/* Active item inverts the tile to ink. --wizon-ai-canvas is used instead of a
   hardcoded white so the glyph stays legible in both themes: canvas is
   near-white in light mode and near-black in dark mode, i.e. always the
   inverse of --wizon-ai-text-primary (the tile's own background here). */
.settings-v2-nav button.is-active .settings-v2-icon:not(.settings-v2-chevron) {
  color: var(--wizon-ai-canvas);
  background: var(--wizon-ai-text-primary);
  border-color: var(--wizon-ai-text-primary);
}

/* nav-scroll 흐름 안의 마지막 행 — 더 이상 사이드바의 고정 푸터가 아니라
   nav 본문과 함께 스크롤된다(위 .settings-v2-nav-scroll 주석 참고). 풀블리드
   배경/좌우 -20px 벌림은 필요 없다 — nav 버튼과 같은 가로 정렬을 쓰고
   위쪽 구분선만 얹는다. 모바일(<=900px)에서는 이 규칙 전체가 아래
   @media 블록의 선언으로 대체된다(원래의 고정 푸터 지오메트리 보존). */
.settings-v2-scope-entry {
  margin-top: 12px;
  padding: 12px 0 calc(12px + var(--wizon-safe-bottom));
  border-top: 1px solid var(--wizon-ai-sidebar-border);
}

.settings-v2-scope-entry button {
  grid-template-columns: 24px minmax(0, 1fr) 20px;
}

.settings-v2-scope-entry small {
  display: block;
  margin-top: 2px;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-caption);
  font-weight: 400;
}

.settings-v2-content {
  min-width: 0;
  min-height: 0;
  padding: 44px clamp(36px, 5vw, 72px) 64px;
  overflow-x: hidden;
  overflow-y: auto;
  scroll-behavior: smooth;
  scrollbar-color: var(--wizon-ai-scrollbar-thumb) transparent;
  scrollbar-gutter: stable;
  scrollbar-width: thin;
  outline: none;
  background: var(--wizon-ai-surface);
}

.settings-v2-panel-head {
  padding-bottom: 28px;
  border-bottom: 1px solid var(--wizon-ai-sidebar-border);
}

.settings-v2-panel-head h3 {
  margin: 0;
  font-size: 30px;
  font-weight: 660;
  line-height: 1.25;
  letter-spacing: -0.025em;
}

.settings-v2-panel-head p {
  max-width: 760px;
  margin: 10px 0 0;
  color: var(--wizon-ai-text-muted);
  font-size: 15px;
  line-height: 1.6;
}

.settings-v2-section {
  padding: 30px 0;
  border-bottom: 1px solid var(--wizon-ai-sidebar-border);
}

.settings-v2-section:last-child {
  border-bottom: 0;
}

.settings-v2-section-head {
  margin-bottom: 18px;
}

.settings-v2-section-title-row {
  display: flex;
  min-width: 0;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-v2-section-title-row .settings-v2-status {
  min-height: 22px;
  padding: 0 8px;
  font-size: var(--wizon-ai-font-size-micro);
}

/* 행 타이틀 옆 상태 태그 — 섹션 헤더 태그와 같은 소형 문법으로 통일(2026-07-16).
   권한 행("확인 전")과 잠금 표시("회사 관리")가 모두 이 규칙을 탄다. */
.settings-v2-row > div > .settings-v2-status {
  /* 타이틀(15px)보다 확실히 작은 소형 칩. 높이·좌우 여백·글자를 함께 줄인다. */
  min-height: 18px;
  padding: 0 6px;
  font-size: 10.5px;
  margin-left: 8px;
  vertical-align: middle;
}

.settings-v2-section h4 {
  margin: 0;
  font-size: 19px;
  font-weight: 640;
  letter-spacing: -0.012em;
}

/* 09-07 결함 수리 — .settings-v2-section-head p, .settings-v2-description,
   .settings-v2-help 세 셀렉터가 원래 아래 .settings-v2-row 규칙과 콤마로
   이어져 있었다(이 파일 최초 커밋 83b90c9dd 부터). "빈 상태는 WDS EmptyState
   를 쓴다" 주석을 끼워 넣은 자리에서 앞 선택자의 트레일링 콤마가 안 끊겨
   세 셀렉터 전부가 .settings-v2-row 의 display:grid; grid-template-columns:
   minmax(0,1fr) auto 를 뒤집어썼다 — 자식이 하나(텍스트 한 덩이)면 그리드
   트랙 하나만 쓰여 눈에 안 띄게 넘어갔지만, <strong>부분강조</strong> +
   나머지 텍스트처럼 자식이 둘 이상이면 각 자식이 별도 그리드 아이템이 되고
   좁은 폭에서 minmax(0,1fr) 트랙이 0에 가깝게 눌려 글자가 세로로 한 줄씩
   떨어진다 — 오너가 실측한 «미배정이면 업무 폴더를 만들 수 없습니다» 낙하가
   바로 이것이었다(조직도 워크벤치 3열 붕괴와는 별개의, 더 근본적인 원인).
   덤으로 세 셀렉터는 원치 않는 min-height:74px·border-top·grid 정렬도
   함께 뒤집어쓰고 있었다 — 이 앱 전체에서 이 세 클래스를 쓰는 자리(58+22+1곳)
   모두가 대상이었다. 셋을 여기서 떼어내되 새 선언은 하나도 더하지 않는다
   (margin 등은 원래도 이 병합 규칙에 없었다 — 지금 값을 그대로 보존). */

.settings-v2-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 24px;
  min-height: 74px;
  padding: 12px 0;
  border-top: 1px solid var(--wizon-ai-sidebar-border);
}

.settings-v2-row:first-of-type {
  border-top: 0;
}

.settings-v2-row strong {
  /* inline-block: 상태 태그("확인 전"·"회사 관리")가 타이틀 옆에 붙을 수 있어야 한다
     (2026-07-16 통일). 뒤따르는 인라인이 없으면 block과 동일하게 렌더된다.
     vertical-align:middle: 타이틀과 칩 둘 다 middle 기준이라야 서로 수직 중앙이 맞는다
     (baseline 기본값이면 칩이 타이틀보다 위로 뜬다). */
  display: inline-block;
  vertical-align: middle;
  font-size: 15px;
  font-weight: 580;
}

.settings-v2-row .settings-v2-description {
  margin-top: 5px;
}

/* Form controls take their chrome and states from the shared .ds-input system
   (styles.css, 71-component-rulebook.md §4.4); only layout that is specific to
   this panel stays here. This file loads after styles.css, so re-declaring
   colour/border/height at the same specificity silently outranks the design
   system — which is how these controls drifted to their own 42px box and token
   set while the rest of the portal used .ds-input. */
.settings-v2-select {
  min-width: 148px;
}

/* ★캐스케이드 레이어 경계 — WDS CSS는 `@layer wds.components` 안에 있고 포털
   styles.css 는 레이어가 없다. CSS 규칙상 unlayered 스타일은 layered 스타일을
   특이도와 무관하게 이기므로, 전역 `select, input, textarea`(border/radius/background)
   가 WDS 컴포넌트 *내부* 입력까지 덮어 테두리가 이중으로 보였다(2026-07-21 실측:
   input border 1px·radius 14px·흰 배경).
   revert-layer 로 전역 값을 걷어내 WDS 레이어 값이 적용되게 한다 — 여기서 새 시각
   규칙을 만들지 않는다(형태·색의 소유자는 여전히 WDS다). */
#settingsV2Dialog ._wrap_1h2ox_2 input,
#settingsV2Dialog ._wrap_1h2ox_2 input:focus,
#settingsV2Dialog ._wrap_1ni9d_2 input,
#settingsV2Dialog ._wrap_1ni9d_2 input:focus {
  width: revert-layer;
  min-height: revert-layer;
  border: revert-layer;
  border-radius: revert-layer;
  background: revert-layer;
  /* 전역 `input:focus`가 파란 링(box-shadow)을 안쪽 입력에 그린다 —
     포커스 표시는 WDS 래퍼의 :focus-within 이 담당해야 한다. */
  box-shadow: revert-layer;
  outline: revert-layer;
}

/* 여러 줄 입력은 WDS Textarea가 자체 chrome을 가지므로 전역 chrome만 걷어내고,
   크기는 아래 레이아웃 규칙이 정한다(여기서 width/min-height를 건드리면 ID 특이도로
   그 규칙을 덮어버린다). */
#settingsV2Dialog ._textarea_d9fnr_2,
#settingsV2Dialog ._textarea_d9fnr_2:focus {
  border: revert-layer;
  border-radius: revert-layer;
  background: revert-layer;
  box-shadow: revert-layer;
  outline: revert-layer;
}

/* 입력은 WDS Input, 여러 줄은 WDS Textarea 컴포넌트를 쓴다.
   여기서는 설정 폼 안에서의 폭만 잡는다. */
.settings-v2-field ._wrap_1h2ox_2 {
  width: min(100%, 420px);
}

/* Multi-line control keeps its own box: the .ds-input--md size modifier would
   outrank these and collapse it to a single-line height, so the textarea takes
   only the base .ds-input chrome. */
/* 여러 줄 입력은 WDS Textarea가 그린다 — 최소 높이만 설정 폼 기준으로 잡는다. */
.settings-v2-field ._textarea_d9fnr_2 {
  width: 100%;
  min-height: 110px;
}

.settings-v2-switch {
  position: relative;
  display: inline-flex;
  align-items: center;
  width: 44px;
  height: 26px;
  padding: 0;
  background: var(--wizon-ai-disabled-bg);
  border: 0;
  border-radius: var(--wizon-ai-radius-pill);
}

.settings-v2-switch::after {
  width: 20px;
  height: 20px;
  margin-left: 3px;
  content: "";
  background: var(--wizon-ai-surface);
  border-radius: 50%;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.2);
  transition: transform var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}

/* R-32(login-screen-r32-build-a): 행 전체가 button[role=switch] 인 자리(로그인 «로그인 상태
   유지» 행)는 이 알약을 aria-hidden 시각 자식으로 두고 켬 상태를 부모 행에서 받는다 —
   같은 정본 값을 두 번 적지 않도록 선택자만 넓혔다(알약·thumb·그림자는 위 규칙 그대로). */
.settings-v2-switch[aria-checked="true"],
[role="switch"][aria-checked="true"] > .settings-v2-switch {
  background: var(--wizon-ai-action-primary-bg);
}

.settings-v2-switch[aria-checked="true"]::after,
[role="switch"][aria-checked="true"] > .settings-v2-switch::after {
  transform: translateX(18px);
}

.settings-v2-switch:disabled,
.settings-v2-select:disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

/* 시각적 컨트롤(테마 카드/스와치/세그먼트) — 승인된 목업(잉크 모노톤 토큰판)을
   실제 --wizon-ai-* 토큰으로 옮긴 것. 크롬(테두리·배경·텍스트)은 전부 토큰이라
   다크 테마는 루트 토큰 재정의만으로 대부분 따라온다. 색이 들어가는 곳은 콘텐츠
   뿐이다: 강조 컬러 스와치 자체, 테마 미리보기 카드가 실제로 라이트/다크가 어떻게
   보이는지 나타내는 고정 색(현재 테마와 무관하게 항상 같아야 하므로 하드코딩 hex). */
.settings-v2-visually-hidden {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.settings-v2-theme-cards,
.settings-v2-swatches,
.settings-v2-seg {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
}

.settings-v2-theme-cards {
  gap: 12px;
  flex-wrap: wrap;
}

.settings-v2-tcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
  font-size: var(--wizon-ai-font-size-caption);
  font-weight: 500;
  color: var(--wizon-ai-text-muted);
  cursor: pointer;
}

.settings-v2-tcard.is-selected {
  font-weight: 640;
  color: var(--wizon-ai-text-primary);
}

.settings-v2-mini {
  display: flex;
  flex-direction: column;
  width: 88px;
  height: 58px;
  overflow: hidden;
  border: 2px solid var(--wizon-ai-popover-border);
  border-radius: 9px;
  transition: transform 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),
    border-color var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}

.settings-v2-tcard:hover .settings-v2-mini,
.settings-v2-tcard:focus-within .settings-v2-mini {
  transform: translateY(-2px);
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.1);
}

.settings-v2-tcard.is-selected .settings-v2-mini,
.settings-v2-tcard:focus-within .settings-v2-mini {
  border-color: var(--wizon-ai-text-primary);
  box-shadow: 0 0 0 3px var(--wizon-ai-focus-ring);
}

.settings-v2-mini-bar {
  display: flex;
  align-items: center;
  gap: 3px;
  height: 12px;
  padding: 0 6px;
}

.settings-v2-mini-bar i {
  width: 4px;
  height: 4px;
  border-radius: 50%;
}

.settings-v2-mini-body {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 5px 6px;
}

.settings-v2-mini-body i {
  height: 4px;
  border-radius: 2px;
}

.settings-v2-mini-light {
  background: #ffffff;
}

.settings-v2-mini-light .settings-v2-mini-bar {
  background: #f1f1f3;
}

.settings-v2-mini-light .settings-v2-mini-bar i {
  background: #c9c9cd;
}

.settings-v2-mini-light .settings-v2-mini-body i {
  background: #e3e3e6;
}

.settings-v2-mini-dark {
  background: #141416;
}

.settings-v2-mini-dark .settings-v2-mini-bar {
  background: #232327;
}

.settings-v2-mini-dark .settings-v2-mini-bar i {
  background: #4c4c52;
}

.settings-v2-mini-dark .settings-v2-mini-body i {
  background: #333338;
}

.settings-v2-mini-auto {
  background: linear-gradient(105deg, #ffffff 50%, #141416 50%);
}

.settings-v2-mini-auto .settings-v2-mini-bar {
  background: linear-gradient(105deg, #f1f1f3 52%, #232327 52%);
}

.settings-v2-mini-auto .settings-v2-mini-bar i {
  background: #9a9aa0;
}

.settings-v2-mini-auto .settings-v2-mini-body i {
  background: linear-gradient(105deg, #e3e3e6 55%, #333338 55%);
}

.settings-v2-tcard-label {
  line-height: 1.3;
}

.settings-v2-swatches {
  gap: 10px;
  align-items: center;
}

.settings-v2-sw-wrap {
  position: relative;
  display: inline-flex;
  cursor: pointer;
}

.settings-v2-sw {
  position: relative;
  width: 26px;
  height: 26px;
  border: 1px solid var(--wizon-ai-popover-border);
  border-radius: 50%;
  transition: transform 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);
}

.settings-v2-sw.is-selected,
.settings-v2-sw-wrap:focus-within .settings-v2-sw {
  box-shadow: 0 0 0 2px var(--wizon-ai-canvas), 0 0 0 4px var(--wizon-ai-text-primary);
}

.settings-v2-sw.is-selected::after {
  position: absolute;
  inset: 0;
  display: grid;
  content: "✓";
  /* 스와치 배경(강조 컬러 자체)은 하드코딩 hex라 현재 테마와 무관하게 고정이다 —
     --wizon-ai-action-primary-fg를 쓰면 다크 테마에서 검정이 되어 "블랙"(#1a1a1a)
     스와치 위 체크가 사라진다(2026-07-16 실측). 목업(.sw.sel::after)과 동일하게
     항상 흰색으로 고정한다. */
  color: #ffffff;
  font-size: var(--wizon-ai-font-size-caption);
  font-weight: 800;
  place-items: center;
}

.settings-v2-seg {
  gap: 2px;
  padding: 3px;
  background: var(--wizon-ai-hover-soft-bg);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 9px;
}

.settings-v2-seg-option {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 14px;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-label);
  font-weight: 500;
  border-radius: 7px;
  cursor: pointer;
  transition: all var(--wizon-ai-motion-micro-duration) var(--wizon-ai-motion-effect-fast);
}

.settings-v2-seg-option.is-selected,
.settings-v2-seg-option:focus-within {
  color: var(--wizon-ai-text-primary);
  font-weight: 640;
  background: var(--wizon-ai-surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.12);
}

[data-theme="dark"] .settings-v2-tcard:hover .settings-v2-mini,
[data-theme="dark"] .settings-v2-tcard:focus-within .settings-v2-mini {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

[data-theme="dark"] .settings-v2-sw {
  border-color: rgba(255, 255, 255, 0.18);
}

/* P2: nav ghost tile border needs the same brightening as the swatch ring above
   — --wizon-ai-sidebar-border alone reads too faint against the dark tile fill. */
[data-theme="dark"] .settings-v2-nav .settings-v2-icon:not(.settings-v2-chevron) {
  border-color: rgba(255, 255, 255, 0.14);
}

/* 같은 반전 함정의 형제(.settings-v2-tab.is-active 참고 주석) — .settings-v2-seg
   트랙도 --wizon-ai-hover-soft-bg(다크 #212121)라 선택 옵션의 --wizon-ai-surface
   (다크 #000000)가 트랙보다 어두웠다. --wizon-ai-surface-raised 를 여기도 얹는다. */
[data-theme="dark"] .settings-v2-seg-option.is-selected,
[data-theme="dark"] .settings-v2-seg-option:focus-within {
  background: var(--wizon-ai-surface-raised);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.48);
}

/* P1-c: 형식(responseFormat) 답변 모양 미니 프리뷰 카드 — themeCardRow와 같은
   구조(카드 + 잉크 선택 링)지만 라이트/다크 대신 문장/구조/불릿 세 모양을 보여준다.
   프리뷰 자체(.settings-v2-fmini 배경·선)는 미니 테마 카드와 같은 이유로 고정
   hex다 — 지금 앱 테마와 무관하게 항상 같은 예시 도형을 보여줘야 한다. */
.settings-v2-fmt-cards {
  display: flex;
  min-width: 0;
  margin: 0;
  padding: 0;
  border: 0;
  gap: 10px;
  flex-wrap: wrap;
}

.settings-v2-fcard {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 5px;
  color: var(--wizon-ai-text-muted);
  font-size: 11.5px;
  font-weight: 500;
  cursor: pointer;
}

.settings-v2-fcard.is-selected {
  color: var(--wizon-ai-text-primary);
  font-weight: 640;
}

.settings-v2-fmini {
  display: grid;
  gap: 3px;
  align-content: start;
  width: 64px;
  height: 46px;
  padding: 7px 8px;
  background: #ffffff;
  border: 2px solid var(--wizon-ai-popover-border);
  border-radius: 8px;
  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);
}

.settings-v2-fcard:hover .settings-v2-fmini,
.settings-v2-fcard:focus-within .settings-v2-fmini {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);
}

.settings-v2-fcard.is-selected .settings-v2-fmini,
.settings-v2-fcard:focus-within .settings-v2-fmini {
  border-color: var(--wizon-ai-text-primary);
  box-shadow: 0 0 0 3px var(--wizon-ai-focus-ring);
}

.settings-v2-fl {
  height: 3.5px;
  background: #d9d9de;
  border-radius: 2px;
}

.settings-v2-fl-head {
  width: 60%;
  background: #a9a9b2;
}

.settings-v2-fl-b {
  display: flex;
  align-items: center;
  gap: 3px;
  background: transparent;
}

.settings-v2-fl-b::before {
  flex: none;
  width: 3.5px;
  height: 3.5px;
  content: "";
  background: #a9a9b2;
  border-radius: 50%;
}

.settings-v2-fl-b i {
  flex: 1;
  height: 3.5px;
  background: #d9d9de;
  border-radius: 2px;
}

.settings-v2-fcard-label {
  line-height: 1.3;
}

/* doc 672 S1 — 기본 코드 언어 미니 프리뷰. 문장/구조/불릿(위)과 같은 .settings-v2-fmini
   상자를 그대로 재사용하고(반경·테두리·선택 링 종류를 늘리지 않는다), 안쪽만 코드 카드
   헤더 문법(라벨 칩 + 코드 줄 2개)으로 바꾼다 — judge §6 안 C 카드 헤더 재사용. 배경은
   상자 기본값(흰색)을 그대로 쓰고 라벨 색만 앱의 잉크 토큰(--wizon-ai-text-muted)을
   참조한다 — 새 raw 색을 늘리지 않는다(anti-drift 래칫). font-size는 기존 raw-value
   부채 관용구(fix6, var 값 보존 폴백)로 감싼다. 폭은 .settings-v2-fl-head와 같은 방식
   (CSS 클래스)으로 주고 인라인 style을 늘리지 않는다. */
.settings-v2-fmini-codelang {
  display: grid;
  grid-template-rows: auto 1fr;
  gap: 4px;
}

.settings-v2-fmini-codehead {
  overflow: hidden;
  font-size: var(--wizon-ai-mini-codehead-font-size, 8.5px);
  font-weight: 640;
  line-height: 1.2;
  color: var(--wizon-ai-text-muted);
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-v2-fl-code-a {
  width: 82%;
}

.settings-v2-fl-code-b {
  width: 55%;
}

/* doc 672 S1 fix-b (오너 09-12 결정 1ⓐ) — 13타일(previewCardRow, 위 :has() 풀와이드
   예외로 라벨 칼럼 붕괴를 막던 시절의 구조)을 selectPreviewRow(네이티브 <select> 1개 +
   미니 프리뷰 1장)로 교체하면서 이 예외 자체가 필요 없어졌다: 옵션 13개가 select 안에
   접히므로 auto 트랙 폭은 select(min-width 148px) + 프리뷰(64px) + gap 고정이라 어떤
   뷰포트에서도 라벨 칼럼을 누르지 않는다(실측: 1440/1024/768 모두 .settings-v2-row
   grid-template-columns: minmax(0,1fr) auto 기본값 그대로). .settings-v2-select-preview-control
   만 select와 미니 프리뷰를 같은 컨트롤 열 안에서 나란히 놓는다 — selectRow(언어·지역
   등 다른 select 행)와 같은 라벨 왼쪽/컨트롤 오른쪽 그리드 규약은 그대로다. */
.settings-v2-select-preview-control {
  /* flex-wrap:wrap이면 grid의 auto 트랙 max-content 계산이 "가장 넓은 자식 1개" 로만
     떨어져(실측 09-12: select 40px 위, 미니 프리뷰 46px 아래로 쌓여 행 높이 121px —
     형식 행 97.7px과 다른 리듬) 원치 않는 줄바꿈이 생긴다. nowrap으로 select+프리뷰가
     항상 한 줄(auto 트랙 폭 = 둘의 합)에 있게 한다 — 옵션 목록이 select 안에 접혀 있는
     한(위 주석) 좁은 뷰포트에서도 줄바꿈이 필요 없다(실측 1024/768/390 확인). */
  display: flex;
  flex-wrap: nowrap;
  gap: 10px;
  align-items: center;
  justify-content: flex-end;
}

.settings-v2-select-preview {
  display: inline-flex;
}

/* reland-r10 QA(09-25): styles.css 의 `.ds-input.ds-input--md { padding: 0 14px }`(0,2,0)가
   `select.ds-input { padding-right: 32px }`(0,1,1)를 이겨 셰브런(right 12px + 12px) 자리를
   지운다 — 390 폭(WebKit·Chromium)에서 옛 기본값 문구 «자동(모델 판단)»이 셰브런 위에 겹쳐
   그려졌다. 이 행에서만 셰브런 자리를 되찾는다. 기본값 문구는 중앙 판정으로 «자동»으로
   줄였으므로(값 auto 불변) 좁은 폭에서 select 를 따로 넓히지 않는다 — 넓히면 라벨 칼럼이
   줄어 «형식» 행과 높이가 어긋났다. 같은 특이도 결함은 다른 `select.ds-input--md` 에도
   있다(부수 발견, 이 후보 범위 밖). */
.settings-v2-select-preview-control .settings-v2-select.ds-input {
  padding-right: 32px;
}

/* 마스터 스위치(responseStyle)가 꺼졌을 때의 비활성 표시 — P1 컨트롤(.settings-v2-switch:disabled
   등)과 같은 opacity/cursor 규칙을 세그먼트·프리뷰 카드에도 그대로 적용한다. 라디오
   자체는 visually-hidden이라 눈에 보이는 훅은 label에 붙인 .is-disabled뿐이다. */
.settings-v2-seg-option.is-disabled,
.settings-v2-fcard.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

/* 보기 카드(themeCardRow)·강조 컬러 스와치(swatchRow)도 회사 정책 잠금
   (personalControlLocked)이나 개인설정 로드 실패(personalMutationsAvailable=false)
   때 세그먼트·형식 카드와 같은 비활성 표시를 공유한다 — 상호작용 불가인데 회색으로
   보이지 않던 P4 LOW 패리티 픽스. hover 확대 어포던스도 함께 죽인다. */
.settings-v2-tcard.is-disabled,
.settings-v2-sw-wrap.is-disabled {
  cursor: not-allowed;
  opacity: 0.48;
}

[data-theme="dark"] .settings-v2-fcard:hover .settings-v2-fmini,
[data-theme="dark"] .settings-v2-fcard:focus-within .settings-v2-fmini {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.55);
}

/* 버튼은 WDS Button 컴포넌트를 쓴다(자체 버튼 스타일 없음).
   WDS에는 danger 변형이 없어 파괴적 동작만 색을 덧입힌다 — 형태는 건드리지 않는다.
   의미색 S3-b(2026-09-15) — 이 화면(settings-v2.css)은 WDS 사다리를 직접 참조하지
   않는 관례다(test_wizon_tokens_and_existing_icon_registry_are_used, 셸 토큰만
   허용). S2(aa80da014)가 여기 alias 치환을 보류한 원래 이유(postamble 리바인딩이
   스코프 안에서 값을 되돌려 렌더가 안 바뀜)는 판정 #60 뒤 postamble 삭제로
   해소됐지만, 이 화면의 셸-토큰 전용 관례상 alias 문자열로 바꾸지 않는다 — 대신
   같은 커밋의 E2(design-system/dtcg/tokens/wizon-ai*.tokens.json)가 이 토큰 자체의
   값을 WDS 사다리 값과 같게(라이트 #b91c1c·다크 #f87171) 맞춰서 정의가 두 개로
   갈리는 문제를 값 단계에서 없앤다 — 콜사이트는 그대로 셸 토큰을 읽는다. */
.settings-v2-button-danger {
  color: var(--wizon-ai-danger-text);
}

.settings-v2-button-row {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 10px;
}

.settings-v2-status {
  display: inline-flex;
  min-height: 28px;
  padding: 0 10px;
  align-items: center;
  gap: 6px;
  color: var(--wizon-ai-text-muted);
  background: var(--wizon-ai-hover-soft-bg);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-pill);
  font-size: var(--wizon-ai-font-size-caption);
  font-weight: 600;
  white-space: nowrap;
}

.settings-v2-status.is-active {
  color: var(--wizon-ai-text-primary);
}

.settings-v2-status.is-error {
  color: var(--wizon-ai-danger-text);
}

/* 안내·오류 배너는 WDS Alert 컴포넌트가 그린다. 여기서는 섹션 안에서의 바깥 여백만
   잡는다 — 색·패딩·라운드·아이콘 배지는 전부 WDS와 토큰 브리지 소관이다. */
.settings-v2-alert {
  margin: 0 0 22px;
}

.settings-v2-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 12px;
}

.settings-v2-metric {
  padding: 18px;
  background: var(--wizon-ai-hover-soft-bg);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 12px;
}

.settings-v2-metric span {
  display: block;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-caption);
}

.settings-v2-metric strong {
  display: block;
  margin-top: 8px;
  font-size: 25px;
  font-weight: 650;
}

.settings-v2-list {
  display: grid;
  gap: 10px;
}

.settings-v2-list-item {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: center;
  gap: 18px;
  min-height: 64px;
  padding: 12px 14px;
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 10px;
}

.settings-v2-list-item strong,
.settings-v2-list-item span {
  display: block;
}

.settings-v2-list-item span {
  margin-top: 4px;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-label);
}

.settings-v2-form {
  display: grid;
  gap: 16px;
}

.settings-v2-retention-options {
  display: grid;
  gap: 10px;
  min-width: 0;
  padding: 0;
  margin: 0;
  border: 0;
}

.settings-v2-retention-options legend {
  padding: 0;
  color: var(--wizon-ai-text-primary);
  font-size: var(--wizon-ai-font-size-body);
  font-weight: 580;
}

.settings-v2-retention-choice-row {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-v2-retention-choice {
  min-height: 36px;
}

.settings-v2-retention-custom-label {
  width: min(100%, 240px);
}

.settings-v2-retention-impact {
  margin: 0;
}

.settings-v2-field {
  display: grid;
  gap: 7px;
}

.settings-v2-field label {
  font-size: var(--wizon-ai-font-size-body);
  font-weight: 580;
}

/* MFA(TOTP) 등록 인라인 미니 위저드 — password/scan/recovery/disable 단계
   전부 이 리듬을 공유한다(.settings-v2-form의 세로 gap 위에 얹는다). */
.settings-v2-mfa-step {
  padding: 16px;
  background: var(--wizon-ai-hover-soft-bg);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 12px;
}

/* QR 스캔면(흰 배경)은 벤더 qrcode.js의 createSvgTag가 SVG 안에 자체 흰 rect로
   그리므로 어떤 테마에서도 스캔 가능하다. 이 컨테이너 배경(--wizon-ai-canvas)은
   QR 주위 프레임일 뿐 스캔면이 아니다(테마색을 따른다). */
.settings-v2-mfa-qr {
  display: flex;
  justify-content: center;
  padding: 20px;
  background: var(--wizon-ai-canvas);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 10px;
}

.settings-v2-mfa-qr svg {
  width: min(100%, 220px);
  height: auto;
}

.settings-v2-mfa-key {
  display: grid;
  gap: 6px;
}

.settings-v2-mfa-key-label {
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-caption);
}

.settings-v2-mfa-key-value {
  padding: 10px 12px;
  color: var(--wizon-ai-text-primary);
  background: var(--wizon-ai-surface);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--wizon-ai-font-size-body);
  letter-spacing: 0.04em;
  word-break: break-all;
  user-select: all;
}

.settings-v2-mfa-recovery-list {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.settings-v2-mfa-recovery-code {
  padding: 10px 12px;
  color: var(--wizon-ai-text-primary);
  background: var(--wizon-ai-surface);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 8px;
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--wizon-ai-font-size-body);
  letter-spacing: 0.04em;
  text-align: center;
  user-select: all;
}

/* 복구 코드 2열 그리드는 compact(정본 520px)에서 1열로 접는다 — 비정본 480은
   breakpoint 래칫(test_breakpoint_tokens…) 위반이라 정본 경계로 정렬. breakpoints.md §2. */
@media (max-width: 520px) {
  .settings-v2-mfa-recovery-list {
    grid-template-columns: 1fr;
  }
}

/* 프로필 사진 필드. 로고 미리보기와 같은 리듬을 쓰되 아바타 크기는 WDS가 정한다
   — 여기서 지오메트리를 다시 정하면 WDS Avatar 계약이 깨진다. */
.settings-v2-avatar-field {
  display: flex;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 18px;
}

.settings-v2-avatar-field > :first-child {
  flex: 0 0 auto;
}

.settings-v2-avatar-field-body {
  display: flex;
  min-width: 0;
  flex-direction: column;
  gap: 6px;
}

.settings-v2-avatar-field-body strong {
  font-size: var(--wizon-ai-font-size-body);
  color: var(--wizon-ai-text-primary);
}

.settings-v2-avatar-field .settings-v2-button-row {
  margin-top: 2px;
}

/* 섹션 행 프리미티브(.settings-v2-description/-help)는 74px 높이와 구분선을 갖는다.
   필드 안 보조 텍스트는 그 리듬을 쓰면 안 되므로 전용 타입을 둔다. */
.settings-v2-avatar-field-note,
.settings-v2-avatar-field-hint {
  margin: 0;
  font-size: var(--wizon-ai-font-size-label);
  line-height: 1.5;
  color: var(--wizon-ai-text-muted);
}

.settings-v2-avatar-field-hint {
  font-size: var(--wizon-ai-font-size-caption);
}

.settings-v2-logo-preview {
  display: grid;
  grid-template-columns: 72px minmax(0, 1fr);
  align-items: center;
  gap: 16px;
  min-height: 96px;
  margin-bottom: 18px;
  padding: 12px;
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 12px;
}

.settings-v2-logo-preview img {
  width: 72px;
  height: 72px;
  object-fit: contain;
  background: var(--wizon-ai-surface);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 10px;
}

.settings-v2-logo-fallback {
  display: grid;
  width: 72px;
  height: 72px;
  place-items: center;
  color: var(--wizon-ai-text-muted);
  background: var(--wizon-ai-hover-soft-bg);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: 10px;
  font-size: var(--wizon-ai-font-size-caption);
}

/* 스피너 자체는 WDS Spinner — 여기서는 가운데 배치만 잡는다. */
.settings-v2-loading-row {
  display: flex;
  min-height: 300px;
  align-items: center;
  justify-content: center;
  gap: 10px;
  color: var(--wizon-ai-text-muted);
}

/* 저장·확인 메시지의 시각 표면은 토스트로 통일했다. 이 노드는 스크린리더
   안내(aria-live)만 담당하도록 시각적으로 숨긴다. */
.settings-v2-feedback {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

/* WDS 토스트 컴포넌트 패턴을 위즈온 토큰으로 이식(디자인시스템 토큰 전용).
   모션은 compositor 속성(opacity/transform)만 사용한다. */
/* ★이름은 토스트지만 지금은 모달 오버레이 등장에도 쓰인다(.settings-v2-modal-overlay).
   토스트가 WDS로 옮겨간 뒤에도 지우면 안 된다 — 지우면 모달 등장 애니가 조용히 죽는다. */
@keyframes settings-v2-toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

.settings-v2-nudge {
  width: min(520px, calc(100vw - 36px));
  max-width: none;
  padding: 0;
  color: var(--wizon-ai-text-primary);
  background: transparent;
  border: 0;
  border-radius: var(--wizon-ai-radius-sheet);
  box-shadow: var(--wizon-ai-dialog-shadow);
  font-family: var(--wizon-ai-font-family);
}

.settings-v2-nudge-card {
  padding: 34px;
  background: var(--wizon-ai-surface);
  border: 1px solid var(--wizon-ai-popover-border);
  border-radius: inherit;
}

.settings-v2-nudge-card h2 {
  margin: 0;
  font-size: 25px;
  font-weight: 660;
}

.settings-v2-nudge-card p {
  margin: 14px 0 28px;
  color: var(--wizon-ai-text-muted);
  font-size: 16px;
  line-height: 1.55;
}

.settings-v2-nudge-actions {
  display: flex;
  justify-content: flex-end;
  gap: 10px;
}

/* 기본 지역 편집기. 크롬은 포털 공용 .ds-input이 전부 담당하므로 여기서는 배치만 한다 —
   입력 테두리·포커스 링을 다시 그리면 설정 화면에만 다른 모양의 입력이 생긴다. */
.default-location-input {
  width: 100%;
  margin-bottom: 14px;
}




@media (hover: hover) and (pointer: fine) {
  .settings-v2-nav button:hover,
  .settings-v2-scope-entry button:hover {
    background: var(--wizon-ai-hover-bg);
  }

  /* B1 입력수단 축(§6-2): 순수 hover 어포던스는 pointer:fine에서만 — 터치 sticky를
     막는다. 근거: design-system/foundations/breakpoints.md §2 축 B. */
  .settings-v2-sw-wrap:hover .settings-v2-sw {
    transform: scale(1.12);
  }
  .settings-v2-seg-option:hover {
    color: var(--wizon-ai-text-primary);
  }
  .settings-v2-seg-option.is-disabled:hover {
    color: var(--wizon-ai-text-muted);
  }
  .settings-v2-fcard.is-disabled:hover .settings-v2-fmini {
    box-shadow: none;
  }
  .settings-v2-tcard.is-disabled:hover .settings-v2-mini,
  .settings-v2-sw-wrap.is-disabled:hover .settings-v2-sw {
    transform: none;
  }
  .settings-v2-modal-close:hover {
    background: var(--wizon-ai-hover-bg);
    color: var(--wizon-ai-text-primary);
  }
  .settings-v2-org-node:hover {
    background: var(--wizon-ai-hover-bg);
  }
  .settings-v2-org-chip:hover,
  .settings-v2-member-affiliation:hover {
    background: var(--wizon-ai-hover-bg);
  }
  /* doc 664 S4 — 변경 이력 표 행(클릭 가능한 드로어 진입점). */
  .settings-v2-org-audit-tr:hover {
    background: var(--wizon-ai-hover-soft-bg);
  }
}

.settings-v2-dialog :focus-visible,
.settings-v2-nudge :focus-visible {
  outline: 2px solid var(--wizon-ai-text-primary);
  outline-offset: 2px;
}

@media (max-width: 900px) {
  .settings-v2-dialog {
    width: 100vw;
    height: 100dvh;
    margin: 0;
    border-radius: 0;
  }

  .settings-v2-shell {
    grid-template-rows: calc(60px + var(--wizon-safe-top)) minmax(0, 1fr);
    border: 0;
    border-radius: 0;
  }

  .settings-v2-header {
    grid-template-columns: 44px minmax(0, 1fr) 44px;
    padding: var(--wizon-safe-top) max(12px, var(--wizon-safe-right)) 0 max(12px, var(--wizon-safe-left));
  }

  .settings-v2-header h2 {
    text-align: center;
    font-size: 19px;
    font-weight: 630;
  }

  .settings-v2-body {
    display: block;
  }

  .settings-v2-sidebar {
    width: 100%;
    height: 100%;
    padding: 16px max(16px, var(--wizon-safe-right)) 0 max(16px, var(--wizon-safe-left));
    border-right: 0;
    background: var(--wizon-ai-surface);
  }

  /* 09-13: 좌측 정렬선 1개 목표 — 좌우 인셋을 0으로 맞춰 아바타 x = 카드
     테두리 x = 검색 필드 x. (세로 간격은 이 요소의 padding이 아니라 다음
     형제의 margin-top이 정한다 — .settings-v2-sidebar 가 flex column 이라
     flex item 사이에는 마진 병합이 없다. 실측: profile 의 padding-bottom을
     16→12로만 줄여봤더니 profile→검색 간격이 그대로 4px였다, 09-13 1차 시도
     회귀— 아래 search margin-top 로 정정.) */
  .settings-v2-profile {
    min-height: 74px;
    padding: 8px 0 16px;
  }

  /* 09-14 검색 필드 높이 복귀(repin-detect-set-and-search-44, 판정 report.md
     §4 XS-ⓑ): 09-13 이 여기 박았던 height 재정의를 지운다. 이 요소
     (.settings-v2-search 는 WDS SearchField 래퍼와 같은 요소에 붙는 클래스)는
     이제 재정의 없이 공용 컴포넌트의 기본 입력 높이 토큰(WDS 사다리)을 그대로
     쓴다 — settings-v2.css 계약(이 파일은 WDS 커스텀 프로퍼티를 직접 쓰지
     않는다, test_settings_v2_contract 참고)을 지키면서도 리터럴 픽셀값을
     다시 박지 않고 데스크톱과 동일해진다. 같은 화면 헤더 버튼·목록 행 옆에서
     높이 종류가 3종이던 것이 2종으로 준다(671 §9.9·게이트 C3·C10).
     padding-inline-start 는 행 아이콘 인셋(카드 테두리 16 + 버튼 padding
     10)과 맞춘다. margin-top 16 은 프로필 블록↔검색 목표값(flex item 이라
     병합되지 않으므로 이 마진 하나가 곧 그 간격이다). */
  /* flex-shrink:0 — 사이드바(.settings-v2-sidebar)는 flex column 이고 세 형제
     (프로필·검색·nav) 모두 기본값(flex-shrink:1)을 물려받는다. 프로필은 명시적
     min-height 가 있어 그 값 아래로는 안 줄지만, 이 요소는 그런 바닥값이 없어
     목록(nav)이 뷰포트를 넘칠 때 자기 콘텐츠(입력 필드 한 줄)의 최소 크기까지
     짓눌린다 — 재현: 그룹이 많은 픽스처에서 이 요소만 한 자리 숫자대 px 로
     찌그러짐(스타일 단언·Playwright 실측 둘 다 회귀 픽으로 고정). overflow 는
     의도한 대로 .settings-v2-nav(overflow-y:auto, min-height:0, 아래 규칙 무변경)
     하나가 받아야 하므로, 이 요소는 shrink 후보에서 완전히 뺀다. */
  .settings-v2-search {
    flex-shrink: 0;
    margin: 16px 0 24px;
    padding-inline-start: 10px;
    background: var(--wizon-ai-hover-soft-bg);
    border-color: transparent;
  }

  /* 09-13 중앙 게이트 반환: "내 설정" 스코프 눈썹을 그룹 눈썹과 같은 문법으로
     맞춰도(margin: 0 0 8px) 검색 바로 아래 4px 간격으로 붙어 눈썹이 2단으로
     겹쳐 보인다(캡처 확인, 전/후 공통). 모바일 타이틀바가 이미 "개인 설정"으로
     스코프를 말하고 회사 스코프는 하단 고정 "회사 관리" 행이 따로 있어 이 눈썹은
     모바일에서 정보 가치가 없다 — 렌더하지 않는다(데스크톱 사이드바는 유지,
     이 규칙은 max-width:900px 블록 안에서만 적용). 그 자리는 검색→첫 그룹 눈썹
     24 간격 그대로 유지된다(nav 의 padding-top 0 은 불변). settings-v2.js 는
     이 클래스에 클릭 핸들러나 querySelector 참조가 없어(§인접 확인 grep) 숨겨도
     스코프 전환·검색 하이라이트 로직에 영향이 없다. */
  .settings-v2-nav-label {
    display: none;
  }

  /* w3-settings-desktop-nav-fit(0acda4340) 재이식: 데스크톱 전용 스크롤
     래퍼(.settings-v2-nav-scroll, 이 재착지에서 index.html 에 새로 추가됨)를
     모바일에서는 무효화한다 — 모바일은 전면 시트 레이아웃이라 nav가 다시
     직접 사이드바의 flex 자식으로 자기 스크롤을 갖고, 스코프 항목
     (.settings-v2-scope-entry)은 원래처럼 사이드바 하단에 고정된 별도 flex
     자식으로 되돌아간다(아래 두 규칙 참고). display:contents는 이 파일이
     이미 .settings-v2-nav-group/.settings-v2-nav-card에 쓰는 것과 같은
     관용구다. */
  .settings-v2-nav-scroll {
    display: contents;
  }

  .settings-v2-nav {
    /* 전면 시트라 붙일 세로 경계선이 없고 스크롤바도 오버레이다 — 블리드를 되돌린다.
       (margin까지 되돌리지 않으면 항목이 안전영역 밖으로 밀린다.)
       09-13: 위 padding-top(4)을 없앤다 — 검색↔첫 눈썹 간격은 이제
       .settings-v2-search 의 margin-bottom(24) 하나로만 정해진다(이중 가산 금지).
       09-24 재이식 메모: nav-scroll 이 모바일에서 display:contents(위 규칙)로
       사라지므로 이 요소는 예전과 동일하게 사이드바의 직계 flex 자식으로
       남는다 — w3 cherry-pick 원본의 overflow/scrollbar 재선언은 09-13 이후
       이미 이 문구로 대체돼 불요, HEAD 값을 그대로 유지한다. */
    margin-right: 0;
    padding: 0 0 24px;
    /* 09-13 오너 «네이티브 앱은 스크롤바를 숨기던데» — WebKit은 scrollbar-color/
       -width를 지정한 컨테이너를 정지 중에도 상시 표시되는 커스텀 스크롤바로
       그린다(네이티브 오버레이는 스크롤 중에만 나타났다 사라진다). 모바일은
       auto로 되돌려 네이티브 오버레이 표시기를 복원한다 — 데스크톱은 현행 유지. */
    scrollbar-color: auto;
    scrollbar-width: auto;
  }

  .settings-v2-nav button {
    min-height: 56px;
    padding-inline: 10px;
    border-radius: 0;
    border-bottom: 1px solid var(--wizon-ai-sidebar-border);
  }

  .settings-v2-nav button.is-active {
    background: transparent;
    font-weight: inherit;
  }

  .settings-v2-nav .settings-v2-chevron {
    display: block;
  }

  /* P3: 그룹 캡션 + 라운드 카드. 캡션은 카드 바깥(그룹 래퍼 배경 없음) 위에
     떠 있고, 카드(.settings-v2-nav-card)만 표면색+보더+라운드+overflow:hidden을
     받는다 — 검색으로 첫/끝 행이 숨겨져도 overflow:hidden이 남은 행의 모서리를
     시각적으로 둥글게 잘라주므로 행마다 개별 radius를 신경 쓸 필요가 없다. */
  .settings-v2-nav-group {
    display: block;
    margin-bottom: 20px;
  }

  .settings-v2-nav-group:last-child {
    margin-bottom: 0;
  }

  .settings-v2-nav-group[hidden] {
    display: none;
  }

  /* 09-13: 좌측 정렬선 1개 목표 — 인셋(4px)을 없애 카드 테두리·검색 필드·
     프로필 아바타와 같은 x(사이드바 padding 16)에 맞춘다. */
  .settings-v2-nav-group-label {
    display: block;
    margin: 0 0 8px;
    color: var(--wizon-ai-text-muted);
    font-size: var(--wizon-ai-font-size-caption);
    font-weight: 600;
  }

  .settings-v2-nav-card {
    display: block;
    background: var(--wizon-ai-surface);
    border: 1px solid var(--wizon-ai-sidebar-border);
    border-radius: 14px;
    overflow: hidden;
  }

  /* 카드 안에서는 풀블리드 처리(border-radius:0 + border-bottom)를 걷어내고,
     보이는 행 사이에만 인셋 헤어라인을 그린다(hidden으로 걸러진 행은 셀렉터가
     자동으로 건너뛴다). */
  .settings-v2-nav-card button {
    border-bottom: 0;
  }

  .settings-v2-nav-card button:not([hidden]) + button:not([hidden]) {
    border-top: 1px solid var(--wizon-ai-sidebar-border);
  }

  /* nav-scroll이 display:contents로 사라지면서 이 규칙은 원래(변경 전)
     사이드바 flex 자식이었을 때의 전체 지오메트리를 다시 손으로 적는다 —
     데스크톱 전용 규칙(margin-top/padding 좌우 0/border만)으로는 이
     고정 푸터 모양이 나오지 않는다. */
  .settings-v2-scope-entry {
    flex: 0 0 auto;
    margin-block: 0;
    margin-inline: calc(max(16px, var(--wizon-safe-left)) * -1);
    padding-block: 12px calc(12px + var(--wizon-safe-bottom));
    padding-inline: max(16px, var(--wizon-safe-left));
    border-top: 1px solid var(--wizon-ai-sidebar-border);
    background: var(--wizon-ai-surface);
  }

  /* 09-13: 하단 고정 "회사 관리" 행도 같은 56 문법(nav 카드 행과 동일 min-height). */
  .settings-v2-scope-entry button {
    min-height: 56px;
  }

  /* 09-13 중앙 게이트 반환(오너 반려 «상세 화면은 뭐가 바뀌었나») 대응: 선언값
     (절 위 28·첫 절 16)은 렌더 픽셀과 달랐다 — 이 컨테이너의 padding-top(24)이
     section:first-of-type 의 padding-top(16)과 이중으로 쌓여 패널 상단→첫 절
     제목까지 40px 이 됐다(목표 렌더 픽셀 ≤24). top 을 0 으로 내려 section 쪽
     16 하나만 남긴다(좌우/하단 패딩은 무변경 — 안전영역·스크롤 여백 몫). */
  .settings-v2-content {
    display: none;
    width: 100%;
    height: 100%;
    padding: 0 max(18px, var(--wizon-safe-right)) calc(56px + var(--wizon-safe-bottom)) max(18px, var(--wizon-safe-left));
    /* 09-13 — 스크롤 표시기도 nav와 동일하게 네이티브 오버레이로 되돌린다. */
    scrollbar-color: auto;
    scrollbar-gutter: auto;
    scrollbar-width: auto;
  }

  .settings-v2-dialog.is-detail .settings-v2-sidebar {
    display: none;
  }

  .settings-v2-dialog.is-detail .settings-v2-content {
    display: block;
  }

  .settings-v2-dialog.is-detail .settings-v2-back {
    display: inline-grid;
  }

  .settings-v2-panel-head {
    display: none;
  }

  /* 09-13 결함 수리(§7 실측 근거): .settings-v2-content 의 실제 첫 자식은 이
     섹션이 아니라 (display:none 인) <header class="settings-v2-panel-head">
     이다(settings-v2.js renderPanel → panelHead() 가 항상 먼저 온다) — :first-child
     는 그 숨은 header 에 밀려 한 번도 매치되지 않았다("절 제목 위 여백 과다"
     신고의 실제 원인, before 픽스처 실측: section_1_head.y - section_1.y = 24,
     기대 0). :first-of-type 은 태그명(section) 기준이라 숨은 header 를 건너뛰고
     정확히 첫 section 에 매치한다. */
  .settings-v2-section:first-of-type {
    padding-top: 16px;
  }

  /* 09-13 중앙 게이트 반환 대응: 절 위/절 아래 각각 28 씩 선언하면 인접한 두
     섹션 사이(이전 섹션의 padding-bottom + 다음 섹션의 padding-top)가 56px 로
     겹쳐 쌓인다(렌더 픽셀 실측 57, 목표 28). 아래쪽은 0 으로 내려 다음 섹션의
     위쪽 28 하나만 그 간격을 정하게 한다 — 마지막 섹션의 트레일링 여백은
     `.settings-v2-content` 자신의 padding-bottom(safe-area 포함, 위에서 무변경)
     이 이미 맡고 있어 없어져도 잘리지 않는다. */
  .settings-v2-section {
    padding: 28px 0 0;
  }

  /* 09-13: 절 제목→첫 행 12(박스 기준, 기존 18은 desktop 값을 그대로 물려받은
     것). ★렌더 픽셀로 재보면 실제 "텍스트" 간격은 더 크다(theme-cards/swatches/
     segment 처럼 키가 큰 컨트롤이 같은 행에서 align-items:center 로 라벨을
     행 중앙으로 끌어내리기 때문 — 아래 :has(> fieldset) 규칙 참고). 이 마진은
     행의 "박스" 상단까지의 거리이며 그 자체는 12 로 정확하다(실측 확인). */
  .settings-v2-section-head {
    margin-bottom: 12px;
  }

  /* 09-13 중앙 게이트 반환: 절 제목→첫 행 "텍스트" 간격이 렌더 픽셀로 47(목표
     12)이었다 — 원인은 이 값이 아니라 .settings-v2-row 의 align-items:center 가
     타이틀 카드(3장)·스와치·세그먼트처럼 키 큰 fieldset 컨트롤과 짧은 라벨
     텍스트를 같은 행에서 세로 중앙 정렬해, 라벨이 행 박스 상단이 아니라 행
     중앙까지 밀려 내려간 것 — .settings-v2-row 를 쓰는 전체 자리(58+곳)에
     align-items 를 바꾸면 사이드이펙트가 크므로, fieldset 을 직계 자식으로 둔
     행(테마 카드·강조 컬러 스와치·언어 세그먼트)만 골라 상단 정렬로 좁힌다 —
     일반 토글·선택 행(fieldset 아님)은 무변경. */
  .settings-v2-row:has(> fieldset) {
    align-items: start;
  }

  /* 09-13: 행 56 — nav 카드 행·하단 고정 행과 같은 값으로 통일. */
  .settings-v2-row {
    min-height: 56px;
    gap: 14px;
  }

  .settings-v2-grid {
    grid-template-columns: 1fr;
  }

  /* 좁은 화면에서 셀렉트가 행을 밀지 않도록 폭만 제한한다.
     최소 높이(터치 타깃)는 폭이 아니라 pointer: coarse가 담당한다 — 파일 하단 참조. */
  .settings-v2-select.ds-input {
    min-width: 118px;
    max-width: 150px;
  }

  .settings-v2-retention-choice {
    flex: 1 1 calc(33.333% - 8px);
  }

  .settings-v2-retention-custom-label {
    width: 100%;
  }

  .settings-v2-theme-cards {
    gap: 8px;
  }

  .settings-v2-mini {
    width: 72px;
    height: 48px;
  }

  .settings-v2-nudge-card {
    padding: 26px 22px;
  }
}

/* compact — 폰 세로. 경계값 근거: design-system/foundations/breakpoints.md §2
   (기존 460px 블록을 표준 경계로 수렴시켰다) */
@media (max-width: 520px) {
  .settings-v2-section-title-row {
    gap: 6px;
  }

  .settings-v2-logo-preview {
    grid-template-columns: 60px minmax(0, 1fr);
  }

  .settings-v2-logo-preview img,
  .settings-v2-logo-fallback {
    width: 60px;
    height: 60px;
  }

  .settings-v2-nudge-actions {
    flex-direction: column-reverse;
  }
}


@media (prefers-reduced-motion: reduce) {
  .settings-v2-content {
    scroll-behavior: auto;
  }

  .settings-v2-switch::after {
    transition: none;
  }
}

/* 구성원·초대 한 페이지 관리(claude.ai 참조). 디자인시스템 토큰(--wizon-ai-*)만 사용. */
.settings-v2-sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0 0 0 0);
  clip-path: inset(50%);
  white-space: nowrap;
  border: 0;
}

.settings-v2-members-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.settings-v2-tabs {
  display: inline-flex;
  gap: 4px;
  padding: 3px;
  background: var(--wizon-ai-hover-soft-bg);
  border-radius: var(--wizon-ai-radius-pill);
}

.settings-v2-tab {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 6px 14px;
  border: 0;
  border-radius: var(--wizon-ai-radius-pill);
  background: transparent;
  color: var(--wizon-ai-text-secondary);
  font: inherit;
  font-size: var(--wizon-ai-font-size-label);
  cursor: pointer;
  transition: background-color var(--wizon-ai-motion-micro-duration, 150ms) var(--wizon-ai-motion-effect-fast, ease);
}

.settings-v2-tab.is-active {
  background: var(--wizon-ai-surface);
  color: var(--wizon-ai-text-primary);
  box-shadow: var(--wizon-ai-dialog-shadow);
}

/* 다크 세그먼트/탭 반전 수리(K1 k2-plan.md §5 위험#5, polish2-fix 3f893c4f0 재발 —
   settings-v2-tab-dark-inversion, 2026-09-10) — 다크에서 --wizon-ai-surface 는
   --wizon-ai-canvas 와 같은 #000000(shared/wds/wizon-ai-shell-tokens.css 다크
   블록)이다. 트랙(.settings-v2-tabs 의 --wizon-ai-hover-soft-bg, 다크 #212121)보다
   선택 알약이 더 어두워져 «채워진 면»이 아니라 «구멍」으로 읽혔다. --wizon-ai-surface-raised
   (다크 #2a2a2a, 트랙보다 밝음)를 다크 전용으로 얹는다 — box-shadow(--wizon-ai-dialog-shadow)
   는 이미 테마별로 갈라져 있어(shell 토큰 96/160행) 베이스 규칙 그대로 상속되게 두고
   여기서 다시 선언하지 않는다. 라이트는 --wizon-ai-surface(#ffffff, 트랙 #f4f4f4보다
   밝음)가 이미 올바른 방향이라 손대지 않는다(라이트 diff 0). */
[data-theme="dark"] .settings-v2-tab.is-active {
  background: var(--wizon-ai-surface-raised);
}

.settings-v2-tab-count {
  min-width: 18px;
  padding: 0 5px;
  border-radius: var(--wizon-ai-radius-pill);
  background: var(--wizon-ai-hover-bg);
  color: var(--wizon-ai-text-secondary);
  font-size: var(--wizon-ai-font-size-micro);
  text-align: center;
}

.settings-v2-tab.is-active .settings-v2-tab-count {
  background: var(--wizon-ai-action-primary-bg);
  color: var(--wizon-ai-action-primary-fg);
}

/* doc 664 S1 — 조직도 페이지 골격(브레드크럼·헤더·탭바). 값은 목업
   org-v2.css .og-crumb/.og-head/.og-tabbar 를 그대로 옮겼다(새 색·반경·
   간격 발명 없음) — 접두사만 settings-v2-org- 로 바꿨고 var()는 전부
   기존 --wizon-ai-* 토큰 그대로다. */
.settings-v2-org-crumb {
  display: flex;
  align-items: center;
  gap: 6px;
  margin: 0 0 12px;
  font-size: var(--wizon-ai-font-size-caption);
  color: var(--wizon-ai-text-muted-2);
}
.settings-v2-org-crumb b { font-weight: 500; color: var(--wizon-ai-text-muted); }
.settings-v2-org-crumb .sep { opacity: .5; }

/* 09-08 마감 레인 실측 — 옛 flex(제목+설명 한 덩어리 | 행동 묶음)에서는 설명
   문단이 우측 행동 3개에 밀려 실폭 298px(1440 창, 패널 723px)까지 좁아져 3줄로
   접혔다. ★목업(.og-head)도 같은 flex라 같은 자리에서 285.9px/3줄로 접힌다 —
   즉 이건 목업을 못 따라간 게 아니라 목업과 함께 틀린 자리다(실측 대조표
   1행). 그래서 목업을 그대로 베끼지 않고 2행 그리드로 고친다: 1행은
   제목 | 행동, 2행은 설명이 전폭(1 / -1)을 쓴다. */
.settings-v2-org-head {
  display: grid;
  grid-template-columns: minmax(0, 1fr) auto;
  align-items: start;
  column-gap: 24px;
  row-gap: 8px;
  padding-bottom: 24px;
  border-bottom: 1px solid var(--wizon-ai-sidebar-border);
}
.settings-v2-org-head h3 { grid-area: 1 / 1; margin: 0; min-width: 0; font-size: var(--wizon-ai-font-size-headline-m); font-weight: 660; line-height: 1.25; letter-spacing: -0.025em; }
/* 설명은 전폭을 받으므로 옛 620px 상한(=행동 묶음이 없을 때의 목업 상한)을
   두면 오히려 다시 좁아진다 — 패널 폭이 곧 이 문단의 단 폭이다. */
.settings-v2-org-head p { grid-area: 2 / 1 / 3 / -1; margin: 0; color: var(--wizon-ai-text-muted); font-size: var(--wizon-ai-font-size-body-1); line-height: 1.6; }
.settings-v2-org-head-actions { grid-area: 1 / 2; display: flex; align-items: center; gap: 8px; flex: none; }

.settings-v2-org-tabbar { display: flex; align-items: center; justify-content: space-between; gap: 16px; margin: 20px 0 24px; }

@media (max-width: 520px) {
  /* 좁은 폭에서는 한 열이라 그리드 영역이 의미가 없다 — 세로 순서만 정한다.
     ★DOM 순서(h3 → 행동 → p)를 그대로 쌓으면 행동 묶음이 제목과 설명 사이에
     끼어 설명이 버튼 아래로 밀린다(390 실캡처에서 확인) — order 로 제목 →
     설명 → 행동으로 되돌린다. */
  .settings-v2-org-head { display: flex; flex-direction: column; gap: 14px; }
  .settings-v2-org-head h3 { order: 1; }
  .settings-v2-org-head p { order: 2; }
  .settings-v2-org-head-actions { order: 3; width: 100%; flex-wrap: wrap; }
  .settings-v2-org-head-actions > * { flex: 1; }
  .settings-v2-org-head h3 { font-size: var(--wizon-ai-font-size-title-l); }
  .settings-v2-org-head p { font-size: var(--wizon-ai-font-size-body); }
  .settings-v2-org-tabbar {
    margin: 16px 0 18px;
    overflow-x: auto;
    /* 09-13 — 가로 스크롤 탭 행은 네이티브 관행대로 스크롤바 자체를 숨긴다
       (세그먼트/칩/리본과 같은 처리). */
    scrollbar-width: none;
  }

  .settings-v2-org-tabbar::-webkit-scrollbar {
    display: none;
  }
}

/* doc 645/646 §5 — 조직도 탭 워크벤치(트리 + 상세). 뼈대 레인 범위: 조회·신설·
   개명·이동·폐지. 미배정 풀·선택 액션바는 다음 레인(M2-a)이 세 번째 열로 더한다. */
.settings-v2-org-panel {
  margin-top: 4px;
  /* 09-07 결함 수리 — 이 패널의 실제 폭은 설정 모달 뷰포트 미디어 쿼리와
     다르다(왼쪽 설정 내비가 공간을 먼저 가져간다: 실측 1440px 창에서 이 패널은
     723px). 뷰포트 기준 media query로는 절대 못 잡는 폭이라 컨테이너 쿼리로
     이 패널 자체의 인라인 크기를 잰다. */
  container-type: inline-size;
  container-name: settings-v2-org-panel;
}

/* has-pool 이 아닌 기본형(권한 없어 미배정 풀이 없는 조회 전용 뷰)은 세로
   방향 flex로 각 구획(대기 이동 알림 · 레일+상세)을 항상 폭 100% 행으로
   쌓는다 — 예전엔 이 셋을 한 2열 그리드에 바로 넣어 pendingBar가 있을 때만
   자동배치가 rail/detail과 열을 나눠 먹는 우연에 기대고 있었다. */
.settings-v2-org-workbench {
  display: flex;
  flex-direction: column;
  gap: 16px;
}

/* 레일 + 상세 두 칸만의 안쪽 그리드. has-pool 유무와 무관하게 이 폭만
   책임진다 — 미배정 풀 열의 존재가 이 계산에 끼어들지 않는다. */
.settings-v2-org-workbench-primary {
  display: grid;
  /* 09-08 마감 레인 — 옛 320px 상한이면 실측 723px 패널에서 상세가 387px 밖에
     못 받는다. 목업 .og-work 와 같은 300px 상한으로 내려 상세를 넓힌다. */
  grid-template-columns: minmax(220px, 300px) minmax(0, 1fr);
  gap: 16px;
  align-items: start;
  min-width: 0;
}

@container settings-v2-org-panel (max-width: 560px) {
  .settings-v2-org-workbench-primary {
    grid-template-columns: 1fr;
  }
}

.settings-v2-org-workbench.is-narrow {
  grid-template-columns: 1fr;
}

.settings-v2-org-rail {
  background: var(--wizon-ai-hover-soft-bg);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
  padding: 12px;
}

/* 09-08 마감 레인 실측 — 「조직 단위」(15/640) · 「3계층 고정(회사 → 본부 →
   팀)」 · 「＋ 하위 단위」가 한 줄에 나란히 놓여 실측 77.8px 2줄로 접혔고 세
   덩어리가 같은 위계로 보였다. 목업(.og-rail-head)처럼 제목 묶음(제목 13/600
   + 보조 캡션 12)을 왼쪽에, 행동을 오른쪽에 둔다. */
.settings-v2-org-rail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 10px;
}

.settings-v2-org-rail-headings {
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

.settings-v2-org-rail-title {
  font-size: var(--wizon-ai-font-size-label);
  font-weight: 600;
  line-height: 1.4;
  color: var(--wizon-ai-text-primary);
}

.settings-v2-org-rail-caption {
  font-size: var(--wizon-ai-font-size-caption);
  line-height: 1.4;
  color: var(--wizon-ai-text-muted);
}

.settings-v2-org-tree,
.settings-v2-org-tree ul {
  list-style: none;
  margin: 0;
  padding-left: 0;
}

.settings-v2-org-tree ul {
  padding-left: 18px;
}

/* 09-08 마감 레인 실측 — 트리 행이 15px(패널 상속)로 상세 표(14px)보다 컸다.
   목업 .og-node 와 같은 13px·min-height 36px 로 내린다. */
.settings-v2-org-node {
  display: flex;
  align-items: center;
  gap: 6px;
  min-height: 36px;
  padding: 6px 8px;
  font-size: var(--wizon-ai-font-size-label);
  border-radius: var(--wizon-ai-radius-control);
  cursor: pointer;
  color: var(--wizon-ai-text-secondary);
}

.settings-v2-org-node.is-selected {
  background: var(--wizon-ai-sidebar-active-bg);
  color: var(--wizon-ai-text-primary);
  font-weight: 640;
}

.settings-v2-org-node.is-retired {
  opacity: 0.7;
}

.settings-v2-org-node:focus-visible {
  outline: 2px solid var(--wizon-ai-focus-visible-ring);
  outline-offset: 2px;
}

.settings-v2-org-twist {
  width: 16px;
  flex: none;
  border: 0;
  background: transparent;
  color: inherit;
  font: inherit;
  cursor: pointer;
  padding: 0;
}

.settings-v2-org-label {
  flex: 1;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-v2-org-count {
  min-width: 20px;
  padding: 0 6px;
  border-radius: var(--wizon-ai-radius-pill);
  background: var(--wizon-ai-hover-bg);
  color: var(--wizon-ai-text-secondary);
  font-size: var(--wizon-ai-font-size-micro);
  text-align: center;
}

.settings-v2-org-expiry {
  font-size: var(--wizon-ai-font-size-micro);
  color: var(--wizon-ai-text-muted);
}

/* 09-08 마감 레인 — 표면 규칙을 하나로 통일한다. 옛 코드는 트리 고정 ON 에서만
   상세에 카드 테두리+16px 패딩을 줘서, 같은 화면 안에 「회색 채움 레일」과
   「흰 테두리 카드 상세」 두 표면 언어가 섞였다(오너 지적 3행). 목업의 규칙은
   «레일만 표면, 상세는 평면» 하나다 — 그쪽으로 맞춘다. 덤으로 고정 ON 의
   상세 내용 폭이 실측 353 → 387px 로 넓어진다.
   세로 리듬도 여기서 정한다: 옛 상태는 자식마다 margin 이 달라 8/0/14px 로
   들쭉했다(실측). 02-plan §1 «그룹 16px» 하나로. */
.settings-v2-org-detail {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

/* doc 641 §12.3 — narrow(모바일)에서는 트리 아래에 붙는 축소 패널이라 별도
   워크벤치 칼럼 폭을 요구하지 않는다. */
.settings-v2-org-detail.is-narrow {
  margin-top: 12px;
}

/* 09-07 결함 수리 — 조직 단위 0개일 때의 편집형 빈 상태(안내 + 「첫 단위
   만들기」 CTA). 구성원 초대 화면의 빈 상태와 같은 톤(문구 + 단일 기본
   버튼)을 맞추려고 새 색·반지름 토큰을 만들지 않는다. */
.settings-v2-org-empty-state {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 10px;
}

/* 09-08 마감 레인 — 목업 .og-detail-head: 좌(제목 19/640 + 메타 한 줄) /
   우(보조 행동 sm 3 + primary 1). 옛 구현은 제목·칩이 한 줄, 행동은 아래
   .settings-v2-button-row 에 md(44px) 4개가 카드 폭을 통째로 차지했다. */
.settings-v2-org-detail-head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 12px;
}

.settings-v2-org-detail-headings { min-width: 0; }

.settings-v2-org-detail-head h4 {
  margin: 0 0 6px;
  line-height: 1.25;
  font-size: var(--wizon-ai-font-size-title);
  font-weight: 640;
  letter-spacing: -0.015em;
}

.settings-v2-org-detail-meta {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 6px;
}

.settings-v2-org-detail-actions {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  justify-content: flex-end;
  /* 좁은 칸(1024 실측 560px)에서는 이 묶음이 제목 아래 줄로 접힌다. 그때
     부모의 space-between 은 «한 줄에 항목 하나»라 왼쪽 끝에 붙여버린다 —
     auto 마진으로 접히든 말든 오른쪽 정렬을 유지한다. */
  margin-left: auto;
  gap: 8px;
}

.settings-v2-org-form .settings-v2-field {
  margin-bottom: 12px;
}

/* doc 646 §18 M2-a — 미배정 풀이 붙으면 3열, 없으면(권한 없음) 기존 2열 그대로.
   09-07 결함: 예전엔 이 세 칸을 고정 px(280/111/300)로 나란히 놓아, 왼쪽
   설정 내비가 폭을 먼저 가져가는 실제 모달(실측 723px)에서 가운데 상세 칸이
   111px로 찌그러져 안내문이 한 글자씩 세로로 떨어졌다(가로 스크롤도 함께
   실측). 고정 3열 대신 [레일+상세 묶음] · [미배정 풀]의 2열로 바꾸고, 좁은
   컨테이너에서는 아래 @container로 그 자체를 세로로 쌓는다 — 이러면 레일+
   상세는 여전히 나란히(그 안쪽은 .settings-v2-org-workbench-primary 가 책임),
   미배정 풀만 그 아래 한 행으로 내려간다(work order §과제 1의 "2행"). */
.settings-v2-org-workbench.has-pool {
  display: grid;
  grid-template-columns: minmax(220px, 1fr) minmax(220px, 300px);
  gap: 16px;
  align-items: start;
}

@container settings-v2-org-panel (max-width: 900px) {
  .settings-v2-org-workbench.has-pool {
    grid-template-columns: 1fr;
  }
}

.settings-v2-org-rail--pool {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-v2-org-pool-notice {
  margin: 0;
}

.settings-v2-org-pool {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
  max-height: 320px;
  overflow-y: auto;
}

.settings-v2-org-pool-item {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 8px;
  border-radius: var(--wizon-ai-radius-control);
  background: var(--wizon-ai-surface);
  border: 1px solid var(--wizon-ai-sidebar-border);
}

.settings-v2-org-pool-item[aria-selected="true"] {
  background: var(--wizon-ai-sidebar-active-bg);
}

.settings-v2-org-pool-item.is-invited {
  opacity: 0.75;
}

.settings-v2-org-pool-item[draggable="true"] {
  cursor: grab;
}

/* doc 648 §12.5 부수 발견 수리 — 전역 styles.css의 `select, input, textarea
   { width: 100%; min-height: 42px }`가 type 구분 없이 이 체크박스에도 걸려
   645px까지 늘어나고 형제 .settings-v2-org-pool-who(이름·이메일)를 0폭으로
   밀어냈다. 전역 규칙은 블라스트 반경 때문에 그대로 둔다(150 판정 유지) —
   이 화면의 체크박스만 <label> 래퍼로 국소 수리한다. 래퍼는 44px 터치
   타깃, 안쪽 input은 원래 체크박스 크기(전역 width/min-height를 되돌린다). */
.settings-v2-org-pool-select {
  flex: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 44px;
  height: 44px;
  cursor: pointer;
}

.settings-v2-org-pool-select input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}

.settings-v2-org-pool-who {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
  overflow: hidden;
}

.settings-v2-org-pool-who strong {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-v2-org-pool-who span {
  font-size: var(--wizon-ai-font-size-micro);
  color: var(--wizon-ai-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-v2-org-pool-grip {
  color: var(--wizon-ai-text-muted);
  flex: none;
}

.settings-v2-org-pool-footer {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-v2-button-block {
  width: 100%;
  justify-content: center;
}

/* doc 646 §6.3 — 주소속·겸직은 색이 아니라 «모양»으로 갈린다: 주소속은 채운
   알약, 겸직은 점선 테두리 알약.
   의미색 S4(2026-09-15): warn(미배정) 칩이 danger 토큰(빨강)을 썼던 것은
   위 §6.3 과 무관한 오귀속이었다 — 같은 "미배정" 상태를 다루는 형제 렌더러
   renderOrgChartUnassignedCallout/renderOrgChartUnassignedAlertBanner(둘 다
   settings-v2.js)는 이미 tone:"warning"(WDS amber)로 그린다. 이름(warn)은
   맞고 값이 어긋났던 쪽이라 값을 --wizon-ai-warning-text 로 맞춘다(클래스명은
   유지 — settings-v2.js:2277,2289 소비처 전수, 사용처 이 1곳뿐). 배경 없이
   테두리만 얹는 모양 구분은 그대로 둔다. */
.settings-v2-org-chip {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: var(--wizon-ai-radius-pill);
  font-size: var(--wizon-ai-font-size-micro);
  font-weight: 600;
  border: 1px solid var(--wizon-ai-sidebar-border);
  background: none;
  cursor: default;
}

.settings-v2-org-chip--primary {
  background: var(--wizon-ai-sidebar-active-bg);
  color: var(--wizon-ai-text-primary);
  border-style: solid;
}

.settings-v2-org-chip--secondary {
  color: var(--wizon-ai-text-secondary);
  border-style: dashed;
}

.settings-v2-org-chip--warn {
  color: var(--wizon-ai-warning-text);
  border-style: solid;
}

button.settings-v2-org-chip,
button.settings-v2-member-affiliation {
  cursor: pointer;
  font: inherit;
}

/* 09-08 마감 레인 — 상위 .settings-v2-org-detail 이 flex gap 16px 로 리듬을
   잡으므로 여기 margin-top:14px 를 남기면 30px 이 된다(실측). 구획선도 뗀다:
   목업은 「구성원 N명」 섹션 제목만으로 구획하고 가로줄을 쓰지 않는다. */
.settings-v2-org-members {
  min-width: 0;
}

.settings-v2-org-members h5 {
  margin: 0 0 8px;
  font-size: var(--wizon-ai-font-size-label);
  font-weight: 640;
  color: var(--wizon-ai-text-primary);
}

.settings-v2-org-member-list {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-v2-org-member-row {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 6px 0;
}

/* doc 641 §12.3 실측(375px 캡처) — narrow에서는 「이동…」 버튼이 한 형제로
   더해지며 이름 칸(flex:1, min-width:0)이 다른 형제(직책·배지·기간·버튼)에
   완전히 밀려 안 보이는 폭이 있었다(390/430은 괜찮았지만 375는 이름이 통째로
   사라졌다). 이름이 절대 안 보이면 «누구를 이동하나»를 모르게 되므로, narrow
   에서는 이름을 한 줄 통째로 먼저 주고 나머지를 아래 줄로 접는다. */
.settings-v2-org-detail.is-narrow .settings-v2-org-member-row {
  flex-wrap: wrap;
  row-gap: 4px;
}

.settings-v2-org-detail.is-narrow .settings-v2-org-member-name {
  flex-basis: 100%;
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
}

.settings-v2-org-member-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 600;
}

.settings-v2-org-member-position {
  color: var(--wizon-ai-text-secondary);
  font-size: var(--wizon-ai-font-size-caption);
}

/* doc 641 §12.3 — 이미 배정된 구성원 표에서의 드래그(부서 이동 가속기).
   미배정 풀 드래그 항목(.settings-v2-org-pool-item[draggable]) 과 같은 커서. */
.settings-v2-org-member-row[draggable="true"] {
  cursor: grab;
}

.settings-v2-org-move-pending-note {
  font-style: italic;
}

/* 보류 중인 이동 — 저장 전까지 서버를 안 건드린다는 것을 시각적으로도
   말한다(점선 테두리, 확정된 카드류와 다른 모양). doc 641 §12.3. */
.settings-v2-org-pending-moves {
  border: 1px dashed var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
  padding: 10px 12px;
  margin-bottom: 10px;
}

.settings-v2-org-pending-list {
  list-style: none;
  margin: 6px 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* 드롭 지점은 색이 아니라 선 + (텍스트) 결과로 말한다 — doc 646 §6.1 캡션.
   dashed 아웃라인은 배경색 변화 없이도 대비를 준다. */
.settings-v2-org-node.is-drop-target {
  outline: 2px dashed var(--wizon-ai-focus-visible-ring);
  outline-offset: -2px;
}

.settings-v2-org-assign-results {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.settings-v2-org-assign-results .is-error {
  color: var(--wizon-ai-danger-text);
}

/* doc 646 §7/§9 M2-b — 그룹 탭 + 변경 이력 탭. 새 색·반지름 리터럴을 만들지
   않는다(§18.6 함정 4) — 트리·풀·구성원 표가 쓰던 토큰만 재사용한다. */
.settings-v2-org-groups {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-v2-org-group-missing {
  margin: 0;
}

.settings-v2-org-group-list {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.settings-v2-org-group-card {
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
  background: var(--wizon-ai-surface);
}

.settings-v2-org-group-summary {
  width: 100%;
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  padding: 10px 12px;
  border: 0;
  background: transparent;
  font: inherit;
  color: inherit;
  text-align: left;
  cursor: pointer;
}

.settings-v2-org-group-card.is-expanded .settings-v2-org-group-summary {
  background: var(--wizon-ai-hover-soft-bg);
  border-radius: var(--wizon-ai-radius-card) var(--wizon-ai-radius-card) 0 0;
}

.settings-v2-org-group-summary:focus-visible {
  outline: 2px solid var(--wizon-ai-focus-visible-ring);
  outline-offset: -2px;
}

.settings-v2-org-group-name {
  flex: 1;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-weight: 640;
}

/* doc 664 S3 — 그룹 탭을 WDS Table 로 바꾸면서 상세는 이제 <li> 카드 안이
   아니라 펼친 행 바로 아래 colspan <td> 안에 산다. 위아래 모두 여백을
   준다(옛 규칙은 카드 헤더가 위쪽 여백을 맡았다 — 이제 없다). */
.settings-v2-org-group-detail {
  padding: 12px;
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-v2-org-group-detail-row td {
  background: var(--wizon-ai-hover-soft-bg);
}

/* doc 664 S3 — 표 셀 1행 값 아래 보조 줄(slug·코드 등). 산문 나열이 아니라
   표시명 바로 아래 한 줄로만(02-plan §3 「보조 텍스트」, 목업 .og-cellsub와
   같은 값). 글꼴은 기존 .settings-v2-org-mono(11px 모노)를 그대로 곁들인다. */
.settings-v2-org-cellsub {
  display: block;
  margin-top: 2px;
}

/* doc 646 §10.4 — 아직 펼쳐 보지 않은 구성원 수는 «모른다»지 0이 아니다.
   점선 밑줄로 «자리표시»임을 표시한다(EmptyState 카운트의 data-state="unknown"
   과 같은 원칙, 다른 모양 — 여기는 표 셀이라 테두리 대신 밑줄로 좁게 표현). */
.settings-v2-org-count-unknown {
  color: var(--wizon-ai-text-muted-2);
  text-decoration: underline dashed;
  text-underline-offset: 3px;
  cursor: help;
}

/* doc 664 S3 — 「아직 만들지 않은 표준 그룹」 카드. --wizon-ai-radius-card 는
   S1이 신설한 값 있는 토큰이다(10px, WDS 원시 반경과 같은 값) — 이 파일은
   원시 WDS 커스텀 프로퍼티를 직접 쓰지 않는 계약이라(파일 상단 기존 테스트가
   지킨다) 이미 있는 브리지 토큰을 그대로 재사용한다. */
.settings-v2-org-card {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 16px;
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
  background: var(--wizon-ai-surface);
  margin-top: 16px;
}

.settings-v2-org-chip-list {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

/* doc 664 S4 — 필터 바 위 「N 필터 해제」 칩(entity 하나만 좁힐 때, 단위
   상세·그룹 카드의 「변경 이력」 진입점에서 온다). 툴바(검색+세그먼트+
   드롭다운) 바로 아래 한 줄로 붙는다. */
.settings-v2-org-audit-entity-chip {
  margin-top: -4px;
}

/* doc 664 S4 · 09-08 마감 레인 — 표 폭 예산.
   옛 판은 `table-layout:auto` + 여섯 열의 `min-width` 합 952px 였다. 이
   패널의 실제 폭은 723px(1440 창 실측)이라 표가 컨테이너 밖으로 **357px**
   밀려 「이전 → 이후」가 잘리고 「사유」는 아예 화면 밖에 있었다(오너
   09-08 검수: 「이게 제대로 된 결과물이 맞나요」). 내부 가로 스크롤이
   있어도 마지막 두 열은 «보이지 않는다» — 스크롤은 잘림의 해결이 아니라
   잘림의 다른 이름이다.
   그래서 `table-layout:fixed` + 백분율 예산으로 바꾼다(목업 실측 비율
   84.9/161.2/108.8/176.8/115/87.3 ≈ 12/22/15/24/16/12 를 이 화면의 셀
   내용에 맞게 조정). 합 100% — 컨테이너를 절대 넘지 않는다.
   nowrap 은 시각·동작 둘만이다(한 줄 값). 행위자·대상·이전→이후·사유는
   문장이라 줄바꿈을 허용해야 한 글자씩 세로로 쪼개지는 것을 막는다. */
.settings-v2-org-audit-table {
  table-layout: fixed;
  width: 100%;
}
.settings-v2-org-audit-nowrap {
  white-space: nowrap;
}
.settings-v2-org-audit-table th:nth-child(1),
.settings-v2-org-audit-table td:nth-child(1) {
  width: 17%;
}
.settings-v2-org-audit-table th:nth-child(2),
.settings-v2-org-audit-table td:nth-child(2) {
  width: 18%;
}
.settings-v2-org-audit-table th:nth-child(3),
.settings-v2-org-audit-table td:nth-child(3) {
  width: 15%;
}
.settings-v2-org-audit-table th:nth-child(4),
.settings-v2-org-audit-table td:nth-child(4) {
  width: 17%;
}
.settings-v2-org-audit-table th:nth-child(5),
.settings-v2-org-audit-table td:nth-child(5) {
  width: 16%;
}
.settings-v2-org-audit-table th:nth-child(6),
.settings-v2-org-audit-table td:nth-child(6) {
  width: 17%;
}
/* 「시각」은 한 줄 `YYYY-MM-DD HH:MM` 이다(초 제거, orgAuditWhenText).
   숫자 폭을 고정해 행마다 시각이 세로로 자릿수를 맞춰 선다. 실렌더 실측:
   14px 본문 크기로는 이 16글자가 17% 예산(123px) 안에 안 들어가 분이
   잘렸다(캡처 「2026-09-05 14」) — 라벨 크기(13px)로 내리고 이 열만
   좌우 패딩을 10px 로 좁힌다. 열 자체를 더 넓히는 대신 이렇게 푸는
   이유: 폭은 나머지 다섯 열에서 빼 와야 하고, 가장 긴 문장이 들어가는
   「사유」·「대상」이 그만큼 좁아지면 거기서 다시 세로로 쪼개진다. */
.settings-v2-org-audit-table td:nth-child(1),
.settings-v2-org-audit-table th:nth-child(1) {
  padding-inline: 10px;
}
.settings-v2-org-audit-table td:nth-child(1) {
  font-variant-numeric: tabular-nums;
  font-size: var(--wizon-ai-font-size-label);
}
/* 긴 코드·이메일이 열 폭을 밀어내지 못하게 — 셀 안에서 끊는다.
   (fixed 레이아웃이라 열은 안 밀리지만, 끊지 않으면 이웃 셀 위로
   넘쳐 흐른다 — 실렌더 실측: 행위자 이메일이 「동작」 배지 아래로
   흘러들어갔다.) */
.settings-v2-org-audit-table td {
  overflow-wrap: anywhere;
}
/* 행위자 칸은 구성원 표의 person 블록을 그대로 쓴다. 그 블록은 inline-flex
   라 자기 내용 폭을 갖는데, 여기서는 열이 고정폭이라 «100% 를 넘지 않는다»
   를 명시해야 안쪽 이메일의 text-overflow:ellipsis 가 실제로 걸린다
   (min-width:0 사슬이 끊기면 말줄임이 조용히 무효가 된다). */
.settings-v2-org-audit-table .settings-v2-org-member-table-person {
  max-width: 100%;
}
.settings-v2-org-audit-table .settings-v2-org-audit-actor-cell {
  max-width: 100%;
}
/* 「동작」 배지는 절대 두 줄이 되지 않는다 — 배지가 접히면 행 높이가
   혼자 튀어 「행 높이 통일」이 깨진다(before 실측 49~67px 편차). */
.settings-v2-org-audit-table td:nth-child(3) .settings-v2-org-audit-nowrap,
.settings-v2-org-audit-table td:nth-child(3) span {
  white-space: nowrap;
}
@container settings-v2-org-panel (max-width: 600px) {
  .settings-v2-org-audit-nowrap {
    white-space: normal;
  }
  /* 카드 모드에서는 각 셀이 세로로 쌓여 한 열=한 화면 폭이 된다 — 위
     백분율 폭이 남아 있으면 카드 폭이 억지로 좁아진다. */
  .settings-v2-org-audit-table {
    table-layout: auto;
  }
  .settings-v2-org-audit-table th:nth-child(n),
  .settings-v2-org-audit-table td:nth-child(n) {
    width: auto;
  }
}

/* 09-08 마감 레인 — 행위자 셀은 이제 두 줄(이름 / 이메일)이거나 배치 ID
   두 줄이다. 옛 inline-flex(가로 배치)는 아바타와 이름을 한 줄에 세우는
   용도였는데, 그 역할은 안쪽 .settings-v2-org-member-table-person 이
   가져갔다 — 바깥은 블록으로 두어야 두 줄이 세로로 쌓인다. */
.settings-v2-org-audit-actor-cell {
  display: block;
  min-width: 0;
}

/* 행 전체가 드로어를 여는 버튼이다(role="button", data-settings-v2-org-
   audit-open-drawer) — 클릭 가능한 표면임을 커서로도 알려준다(색만이
   아니라 모양으로 구분하는 같은 원칙의 연장). hover 배경은 아래 「B1
   입력수단 축」 게이트 안에 있다(터치 sticky 방지, breakpoints.md §2). */
.settings-v2-org-audit-tr {
  cursor: pointer;
}

/* 09-08 마감 레인 실측(폭 예산 스윕) — 이 표의 보조 줄(만료 일자·「가져오기
   회차」·「외 N건」·코드)이 본문과 같은 14px 이라 세 줄짜리 셀이 네 줄이
   되고 그 행 하나만 115px 로 튀었다. 캡션 크기로 내리면 최대 행 높이
   115→88px, 행 높이 편차 53→24px(목업 실측 편차 21px)다. 조직도·그룹 탭의
   같은 클래스는 이미 승인된 캡처가 있어 건드리지 않는다 — 이 표 안에서만. */
.settings-v2-org-audit-table .settings-v2-org-cellsub {
  font-size: var(--wizon-ai-font-size-caption);
}

.settings-v2-org-audit-change s {
  color: var(--wizon-ai-text-muted);
  text-decoration-color: var(--wizon-ai-text-muted);
}

/* doc 646 §9 — 「이전→이후는 색만이 아니라 모양으로」. 목업 .og-diff .to 는
   실선 밑줄이다(취소선 ↔ 실선). 굵기만으로는 취소선과 «짝»으로 읽히지
   않아서, 목업이 고른 실선을 그대로 쓴다. */
.settings-v2-org-audit-change strong {
  border-bottom: 1.5px solid currentColor;
}

.settings-v2-org-audit-change.is-insert {
  font-weight: 640;
  color: var(--wizon-ai-text-primary);
}

/* doc 646 §9 M2-4 — 가져오기 회차는 사람 이름과 «모양»이 달라야 한다. 같은 굵은
   글씨로 두면 배치 ID 가 사람 이름처럼 읽힌다. 새 색 리터럴은 만들지 않고
   그룹 탭 배지가 쓰던 토큰만 재사용한다(doc 646 §18.6 함정 4). */
/* 09-08 마감 레인 — 표 위 캡션 행(목업 .og-sec-head). 왼쪽 15px/600 제목,
   오른쪽 12px muted 안내. 표 위계가 「제목 → 표」 2단이 아니라 「제목 →
   캡션+안내 → 표」 3단이 되어야 오너가 지적한 «위계»가 선다. */
.settings-v2-org-audit-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  margin: 0 0 10px;
}

.settings-v2-org-audit-sec-head h4 {
  margin: 0;
  font-size: var(--wizon-ai-font-size-body);
  font-weight: 600;
}

.settings-v2-org-audit-sec-note {
  font-size: var(--wizon-ai-font-size-caption);
  color: var(--wizon-ai-text-muted);
}

/* 「더 보기」는 표 아래 오른쪽 끝(목업 .og-actions-end). */
.settings-v2-org-audit-more {
  display: flex;
  justify-content: flex-end;
  margin-top: 16px;
}

/* ★무채색(오너 09-08) — 「같은 중립 두 개를 구분해야 하는 자리」용 조용한
   변형. 표준 vs 사용자 정의, 적용됨 vs 되돌림처럼 둘 다 «상태»일 뿐 위험도
   성공도 아닌 짝에 색을 쓰지 않고 «채움 vs 점선 윤곽»으로 가른다. 점선
   어휘는 바로 아래 .settings-v2-org-audit-batch 가 이미 쓰던 것이다. */
.settings-v2-org-badge-quiet {
  background: transparent;
  border: 1px dashed var(--wizon-ai-sidebar-border);
  color: var(--wizon-ai-text-secondary);
}

.settings-v2-org-audit-batch {
  display: inline-block;
  padding: 1px 8px;
  border: 1px dashed var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-pill);
  font-weight: 500;
  font-variant-numeric: tabular-nums;
  color: var(--wizon-ai-text-secondary);
}

/* 09-08 마감 레인 — 「가져오기 회차 되돌리기」 절(맨 <p> + md 버튼 줄)은
   Callout 의 actions 슬롯으로 옮겼다(renderOrgBatchRevertActions). 남은
   .settings-v2-org-revert 규칙은 없다 — 아래 blockers 목록만 산다. */
.settings-v2-org-callout-actions {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  margin-top: 10px;
}

.settings-v2-org-revert-blockers {
  margin: 8px 0 0;
  padding-left: 20px;
  display: flex;
  flex-direction: column;
  gap: 4px;
}

/* doc 648 §7.7 M2-c — 가져오기 탭. 새 색·반지름 리터럴을 만들지 않는다(§18.6
   함정 4 그대로) — 그룹·이력 탭이 쓰던 토큰만 재사용한다. */
.settings-v2-org-imports-upload {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.settings-v2-org-import-file-label {
  font-size: var(--wizon-ai-font-size-caption);
  color: var(--wizon-ai-text-secondary);
}

.settings-v2-org-import-row-issues {
  margin: 0;
  padding-left: 18px;
  display: flex;
  flex-direction: column;
  gap: 4px;
  font-size: var(--wizon-ai-font-size-caption);
  color: var(--wizon-ai-text-secondary);
}

.settings-v2-org-import-unassigned-warning {
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
  padding: 8px 12px;
  background: var(--wizon-ai-hover-soft-bg);
}

/* doc 664 S3 — 1단계 템플릿/드롭존 2열(목업 .og-import-grid과 같은 값).
   컨테이너 질의로만 접는다(뷰포트 아님 — 09-07 「세로로 한 글자씩」 결함의
   원형과 같은 함정, .settings-v2-org-panel이 이미 컨테이너 컨텍스트다). */
.settings-v2-org-import-grid {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr);
  gap: 16px;
  align-items: stretch;
}
@container settings-v2-org-panel (max-width: 720px) {
  .settings-v2-org-import-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

.settings-v2-org-import-grid .settings-v2-org-card {
  margin-top: 0;
}

.settings-v2-org-import-grid .settings-v2-org-card h5 {
  margin: 0;
  font-size: var(--wizon-ai-font-size-body);
  font-weight: 600;
}

.settings-v2-org-import-grid .settings-v2-org-card p {
  margin: 0;
  font-size: var(--wizon-ai-font-size-label);
  line-height: 1.6;
  color: var(--wizon-ai-text-muted);
}

/* doc 664 §2.3 — 9열 헤더 코드 블록(목업 .og-headercols). */
.settings-v2-org-headercols {
  padding: 8px 10px;
  border-radius: var(--wizon-ai-radius-control);
  background: var(--wizon-ai-hover-soft-bg);
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--wizon-ai-font-size-micro);
  line-height: 1.8;
  color: var(--wizon-ai-text-secondary);
  overflow-wrap: anywhere;
}

/* doc 664 S3 — 2단계 요약 칩·배지 한 줄(목업 .og-summary). */
.settings-v2-org-summary {
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.settings-v2-org-actions-end {
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
  justify-content: flex-end;
}

/* doc 664 §2.3 — 「이 단계에서 쓴 행 0」 바(목업 .og-writecount). */
.settings-v2-org-writecount {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  flex-wrap: wrap;
  padding: 12px 14px;
  border-radius: var(--wizon-ai-radius-card);
  border: 1px solid var(--wizon-ai-sidebar-border);
  background: var(--wizon-ai-hover-soft-bg);
  font-size: var(--wizon-ai-font-size-label);
}

.settings-v2-org-writecount b {
  font-variant-numeric: tabular-nums;
}

/* doc 664 §2.3 — 문제 셀 강조. 색 + 굵기(색만으로 구분하지 않는다, 목업
   .og-badcell과 같은 값). */
.settings-v2-org-badcell {
  color: var(--wizon-ai-danger-text);
  font-weight: 600;
}

/* doc 664 §2.3 — 가져오기 미리보기 표는 「사유」가 주인공이므로 폭을 먼저
   준다. 코드·메일·날짜 열은 줄바꿈하지 않는다(잘못 읽히면 원인 진단이
   어긋난다) — 목업 .og-t-review와 같은 값. */
.settings-v2-org-import-review-table table {
  table-layout: auto;
}
.settings-v2-org-import-review-table th:nth-child(1),
.settings-v2-org-import-review-table td:nth-child(1) {
  width: 44px;
}
.settings-v2-org-import-review-table th:nth-child(2),
.settings-v2-org-import-review-table td:nth-child(2) {
  width: 68px;
}
.settings-v2-org-import-review-table th:nth-child(3),
.settings-v2-org-import-review-table td:nth-child(3) {
  width: 42%;
}
.settings-v2-org-import-review-table td:nth-child(n+4) {
  white-space: nowrap;
}
@container settings-v2-org-panel (max-width: 600px) {
  .settings-v2-org-import-review-table th:nth-child(n),
  .settings-v2-org-import-review-table td:nth-child(n) {
    width: auto;
  }
  .settings-v2-org-import-review-table td:nth-child(n+4) {
    white-space: normal;
  }
}

/* ══════════════════════════════════════════════════════════════════════
   doc 664 S2 — 조직도 탭 scene C(안 C): 단위 선택기 + 전폭 표 + 상세
   드로어 + 트리 고정 토글. 트리 고정이 꺼져 있으면(기본값) 레일 없이
   .settings-v2-org-detail-full 이 패널 전폭(실측 734px)을 받는다. 켜지면
   위 .settings-v2-org-workbench-primary(레일+상세 2열, S1이 만든 그대로)를
   다시 쓴다 — 새 그리드를 발명하지 않는다.
   ══════════════════════════════════════════════════════════════════════ */

/* 09-08 마감 레인 실측 — Alert(하단 margin 22px) → 툴바(4px) → 본문 순으로
   블록 사이 간격이 22/4px 로 들쭉했다. 목업 .og-body 처럼 한 flex 열이
   gap 16px 하나로 리듬을 정한다(02-plan §1 «그룹 16»). 안쪽 요소의 옛
   margin 은 이 컨테이너 안에서 0 으로 눌러 이중 간격을 막는다. */
.settings-v2-org-body {
  display: flex;
  flex-direction: column;
  gap: 16px;
  min-width: 0;
}

.settings-v2-org-body > .settings-v2-alert {
  margin: 0;
}

.settings-v2-org-toolbar {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
}

.settings-v2-org-toolbar-grow {
  flex: 1 1 160px;
  min-width: 120px;
}

/* 09-08 마감 레인 — 옛 판의 `.settings-v2-org-toolbar select.settings-v2-select`
   폭 보정은 사라졌다. 변경 이력 필터 바가 네이티브 <select> 를 버리고 WDS
   Select(버튼 + role="listbox", wdsSelectMarkup)로 갔기 때문이다. 네이티브는
   ① OS 화살표를 노출하고 ② 실측 높이 40px·radius 6px 로 같은 줄의 WDS sm
   컨트롤(32px·radius 10px)과 어긋났으며 ③ 옵션 목록이 이 화면의 팝오버가
   아니라 OS 팝업이라 다크 테마를 따라오지 않았다. */
.settings-v2-org-toolbar .settings-v2-wds-select {
  flex: 0 0 auto;
}

/* 목업 .og-spacer — 오른쪽 끝 슬롯(CSV 내보내기)을 «비운 채로» 잡아 둔다.
   내보내기 엔드포인트가 아직 없어 버튼은 렌더하지 않지만, 이 자리를 비워
   두어야 왼쪽 네 컨트롤이 목업과 같은 지점에서 끝난다. */
.settings-v2-org-toolbar-spacer {
  flex: 1 1 0;
  min-width: 0;
}

.settings-v2-org-detail-full {
  min-width: 0;
}

/* 위 .settings-v2-org-detail 이 이제 고정 ON/OFF 공통으로 평면이라 전폭 전용
   벗기기 규칙은 필요 없다 — 컨테이너만 남긴다(min-width:0 은 아래 정의). */

/* 단위 선택기 — 브레드크럼 드롭다운. 팝오버 안 트리는 기존
   .settings-v2-org-tree/.settings-v2-org-node를 그대로 재사용한다. */
.settings-v2-org-unit-picker {
  position: relative;
  flex: none;
}

.settings-v2-org-unit-picker-popover {
  position: absolute;
  /* 09-08 실브라우저 캡처 레인 실측 — 이 팝오버는 같은 마크업이 바로 앞에
     data-settings-v2-org-unit-picker-close 스크림(.settings-v2-dropdown-scrim,
     position:fixed; z-index:30)을 낳는다. 옛 z-index:6 은 그 스크림보다
     낮아 스크림이 팝오버 전체를 뒤덮고 포인터 이벤트를 가로챘다 — 실
     사용자도 팝오버 안 어떤 단위도 클릭할 수 없는 상태였다(단위 선택기가
     전제인 안 C 전체가 막힘). 이 파일의 다른 z-index(2/3/4/30/50)도 전부
     맨 숫자라 --wizon-ai-* 브릿지 토큰을 새로 만들지 않고 같은 관례를
     따른다 — 스크림(30)보다 위, 모달 오버레이(50)보다 아래인 31. */
  z-index: 31;
  top: calc(100% + 6px);
  left: 0;
  width: max(280px, 100%);
  max-height: 360px;
  overflow-y: auto;
  padding: 10px;
  background: var(--wizon-ai-surface);
  border: 1px solid var(--wizon-ai-popover-border);
  border-radius: var(--wizon-ai-radius-popover);
  box-shadow: var(--wizon-ai-dialog-shadow);
}

.settings-v2-org-mono {
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: var(--wizon-ai-font-size-micro);
}

/* 세그먼트(전체/활성/폐지 예약) — 목업 og-seg와 같은 모양(토큰만 재사용). */
/* 09-08 마감 레인 — 툴바 컨트롤 높이를 하나로 묶는다. 옛 실측: 선택기 44 /
   트리 고정 44 / 검색 44 / 세그 34.6px. 버튼·입력은 WDS 의 sm 변형
   (_sm_lt829_31 · _sm_1h2ox_22, 실측 32px)으로 내렸고, WDS 에 세그먼티드
   컴포넌트가 없는 이 세그만 여기서 같은 높이를 받는다. */
.settings-v2-org-seg {
  display: inline-flex;
  align-items: center;
  /* ★높이를 숫자로 박지 않는다 — 이 파일은 WDS 원시 토큰을 참조하지 않는
     격리 표면이고(test_wizon_tokens_and_existing_icon_registry_are_used),
     32px 리터럴은 WDS 가 그 값을 바꾸면 조용히 어긋난다. 대신 툴바 줄의
     교차축 크기를 늘여 받는다 — 같은 줄의 WDS sm 버튼·입력이 정하는 높이가
     곧 이 세그의 높이다. */
  align-self: stretch;
  gap: 2px;
  padding: 2px;
  border-radius: var(--wizon-ai-radius-pill);
  background: var(--wizon-ai-hover-soft-bg);
  flex: none;
}

/* 09-08 마감 레인 실측 결함 — 옛 `height: 100%` 는 부모(.settings-v2-org-seg)
   가 `align-self: stretch` 로 «줄의 교차축 크기»를 받을 때만 뜻이 있었다.
   툴바가 접혀 세그가 자기 줄에 혼자 남으면(390 실측) 그 줄의 교차축 크기는
   세그의 내용 높이이고, 내용 높이는 다시 버튼의 100% 라 서로를 물어 **12px**
   로 주저앉는다 — 390 에서 기간 세그먼트가 납작한 띠로 렌더됐다.
   내재 높이(패딩)를 주면 그 순환이 끊긴다. 넓은 줄에서는 여전히 부모의
   stretch 가 이겨 같은 줄 sm 컨트롤(32px)과 높이가 맞는다. */
.settings-v2-org-seg button {
  display: inline-flex;
  align-items: center;
  align-self: stretch;
  padding: 5px 12px;
  border: 0;
  border-radius: var(--wizon-ai-radius-pill);
  background: transparent;
  color: var(--wizon-ai-text-secondary);
  font: inherit;
  font-size: var(--wizon-ai-font-size-caption);
  line-height: 1;
  cursor: pointer;
}

.settings-v2-org-seg button[aria-pressed="true"] {
  background: var(--wizon-ai-surface);
  color: var(--wizon-ai-text-primary);
  font-weight: 600;
  box-shadow: var(--wizon-ai-dialog-shadow);
}

/* 요약 지표 4타일. data-state="unknown"은 점선 테두리 + 흐린 자리표시
   색으로 "0"과 다르게 그린다(02-plan §4 매트릭스). */
.settings-v2-org-metrics {
  display: flex;
  gap: 8px;
  flex-wrap: wrap;
}

/* 09-08 마감 레인 — 목업 .og-metric 은 «흰 표면 + 테두리 + radius 10» 이고
   구현은 «회색 채움 + radius 8» 이었다(실측). 회색 채움은 레일(표면)과 같은
   잉크라 «타일이 레일의 일부»처럼 보였다. 흰 표면으로 통일하고 반경도
   --wizon-ai-radius-card(10px, 카드 표면과 같은 값)로 맞춘다. 라벨/값의
   line-height 를 고정해 타일 높이도 78.3 → 63px 로 목업과 같아진다. */
.settings-v2-org-metric {
  flex: 1 1 140px;
  min-width: 120px;
  padding: 10px 12px;
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
  background: var(--wizon-ai-surface);
}

.settings-v2-org-metric span {
  display: block;
  font-size: var(--wizon-ai-font-size-caption);
  line-height: 1.35;
  color: var(--wizon-ai-text-muted);
}

.settings-v2-org-metric strong {
  display: block;
  margin-top: 3px;
  font-size: var(--wizon-ai-font-size-title);
  line-height: 1.2;
  font-weight: 640;
  font-variant-numeric: tabular-nums;
}

/* «못 읽었다」는 숫자 자리가 아니라 문장이 들어오므로 값 글자 크기를 내린다 —
   19px 로 두면 「집계 준비 중」이 타일을 넘어 줄바꿈한다(0️⃣❓ 「0건」과
   「못 읽었다」를 같게 그리지 마라). */
.settings-v2-org-metric[data-state="unknown"] strong {
  font-size: var(--wizon-ai-font-size-label);
  font-weight: 600;
  line-height: 1.4;
}

.settings-v2-org-metric[data-state="unknown"] {
  border-style: dashed;
}

.settings-v2-org-metric[data-state="unknown"] strong {
  color: var(--wizon-ai-text-muted-2);
}

.settings-v2-org-metric[data-state="zero"] strong {
  color: var(--wizon-ai-text-muted);
}

.settings-v2-org-sec-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin: 0 0 10px;
}

.settings-v2-org-sec-head h5 {
  margin: 0;
  font-size: var(--wizon-ai-font-size-body);
  font-weight: 600;
  letter-spacing: -0.01em;
}

/* doc 664 S4 — S3 잔여 나사(발주서 지시). 390 폭에서 제목(h5)과 캡션
   (span.settings-v2-help)이 같은 행에서 space-between으로 서로를
   밀어내 「기능 그룹 14개」 제목 자체가 2줄로 접혔다(실측: groups-data-
   390-light.png). 컨테이너 질의로만 접는다(뷰포트 아님 — 09-07 「세로로
   한 글자씩」 결함의 원형과 같은 함정) — 세로 스택(제목 → 캡션)으로
   바꾸면 각자 전폭을 받아 더 이상 서로를 압박하지 않는다. */
@container settings-v2-org-panel (max-width: 480px) {
  .settings-v2-org-sec-head {
    flex-direction: column;
    align-items: flex-start;
    gap: 4px;
  }
}

/* 구성원 표 셀 — WDS Table(_scroll_gsk7z_2/_table_gsk7z_10/…)에 얹는
   최소 보정만. 26px 아바타는 WDS Avatar에 그만한 변형이 없어(02-plan §6
   WDS 신설 제안) 토큰만 쓰는 로컬 클래스로 둔다. */
.settings-v2-org-member-table-person {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  min-width: 0;
}

/* 09-08 실브라우저 캡처 레인 실측 — 구성원 표의 선택 체크박스
   (<input type="checkbox">, data-settings-v2-org-member-select, 이동 권한이
   있을 때만 렌더)가 이 규칙 없이는 실계산 204×42px로 렌더돼(전역 입력
   리셋이 checkbox에도 걸린다 — 텍스트 입력용 44px 터치 타깃 규칙이 type
   구분 없이 모든 <input>에 적용) 행 위로 튕겨 올라간 것처럼 보였다
   (member-drawer-1440-light.png 캡처로 확인, 「구성원00」 행). 같은 파일의
   `.settings-v2-org-pool-select input[type="checkbox"]`가 이미 쓰는 것과
   같은 고정 크기로 맞춘다 — 새 값 발명 아님. */
/* 09-08 마감 레인 — 체크박스가 없는 행도 같은 폭의 자리를 차지해 아바타·이름의
   시작선을 맞춘다(실측: 없는 행이 26px 왼쪽에서 시작했다). */
.settings-v2-org-member-select-slot {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 18px;
  margin-right: 8px;
  vertical-align: middle;
}

[data-settings-v2-org-member-table-section] td._cellPrimary_gsk7z_205 input[type="checkbox"] {
  flex: none;
  width: 18px;
  height: 18px;
  min-height: 0;
  margin: 0;
}

.settings-v2-org-avatar {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  border-radius: var(--wizon-ai-radius-pill);
  background: var(--wizon-ai-hover-bg);
  color: var(--wizon-ai-text-secondary);
  font-size: var(--wizon-ai-font-size-micro);
  font-weight: 600;
}

/* ★09-08 마감 레인 실측 결함 — 옛 선택자 `.settings-v2-org-member-table-person
   span` (특이도 0,1,1)이 같은 셀 안 `.settings-v2-org-avatar` (0,1,0)의
   display:inline-flex 를 이겨서, 표 안 아바타만 display:block 으로 렌더됐다
   (헤드리스 실측: 표 아바타 display=block, 드로어 아바타 display=inline-flex).
   block 이면 align-items/justify-content 가 죽어 이니셜이 원 안에서 중앙에
   서지 못한다. 자식 결합자로 «이름·이메일을 감싼 두 번째 span» 만 집는다. */
.settings-v2-org-member-table-person > span + span {
  display: block;
  min-width: 0;
}

.settings-v2-org-member-table-person strong {
  display: block;
  font-size: var(--wizon-ai-font-size-label);
  font-weight: 600;
  line-height: 1.35;
}

/* 이메일: 길면 줄을 바꾸지 말고 말줄임(오너 지적 9행 — 실측: white-space
   normal 이라 셀 안에서 두 줄로 접혔다). */
.settings-v2-org-member-table-person > span + span > span {
  display: block;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  font-size: var(--wizon-ai-font-size-caption);
  line-height: 1.35;
  color: var(--wizon-ai-text-muted);
}

/* 구성원 표 행 클릭 = 드로어(커서만 — 실제 클릭 위임은 JS). */
tr[data-settings-v2-org-member-open-drawer] {
  cursor: pointer;
}

/* 드로어(구성원 상세 / 미배정 명단) — .settings-v2-dialog는 showModal의
   UA 규칙으로 position:fixed가 이미 걸려 있어(top-layer) nearest positioned
   ancestor다. 그 바로 아래 absolute로 얹으면 .settings-v2-content의
   overflow:auto를 넘어(컨테이닝 블록이 다르므로 안 잘린다) 패널 전체를
   덮고, .settings-v2-header(z-index:2) 위(4)로 올라간다 — 목업 레인이 실제
   로 밟은 결함(상단 84px 흰 띠, z-index를 안 올렸을 때)을 여기서 고정한다. */
.settings-v2-org-drawer-scrim {
  position: absolute;
  inset: 0;
  z-index: 3;
  background: var(--wizon-scrim);
  border: 0;
  padding: 0;
  cursor: default;
}

.settings-v2-org-drawer {
  position: absolute;
  z-index: 4;
  inset-block: 0;
  inset-inline-end: 0;
  width: min(420px, 100%);
  display: flex;
  flex-direction: column;
  background: var(--wizon-ai-surface);
  border-left: 1px solid var(--wizon-ai-popover-border);
  box-shadow: var(--wizon-ai-dialog-shadow);
}

.settings-v2-org-drawer-head {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 20px 20px 16px;
  border-bottom: 1px solid var(--wizon-ai-sidebar-border);
}

/* 인라인 style="flex:1;min-width:0" 을 클래스로 뺀 것 — 헤더 안에서 제목
   블록이 남는 폭을 다 먹고(flex:1) 텍스트가 길어도 닫기 버튼을 밀어내지
   않는다(min-width:0, 09-08 래칫 수리). */
.settings-v2-org-drawer-head-title {
  flex: 1;
  min-width: 0;
}

.settings-v2-org-drawer-head .settings-v2-org-avatar {
  width: 40px;
  height: 40px;
  font-size: var(--wizon-ai-font-size-body);
}

/* 09-08 마감 레인 — 목업 .og-drawer-head 실측 높이 79px, 구현 92.6px. 차이는
   전부 상속 line-height 였다(h4 29.2 대 21, p 22.4 대 16.4). */
.settings-v2-org-drawer-head h4 {
  line-height: 1.25;
  margin: 0 0 4px;
  font-size: var(--wizon-ai-font-size-title);
  font-weight: 640;
}

.settings-v2-org-drawer-head p {
  line-height: 1.4;
  margin: 0;
  font-size: var(--wizon-ai-font-size-label);
  color: var(--wizon-ai-text-muted);
}

.settings-v2-org-drawer-body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  padding: 16px 20px;
  display: flex;
  flex-direction: column;
  gap: 20px;
}

/* 드로어 안에 얹힌 미배정 풀 레일은 자기 카드 테두리를 벗는다 — 드로어
   자체가 이미 그 역할을 한다(이중 테두리 방지). 재사용한 원본
   .settings-v2-org-rail--pool 규칙은 건드리지 않는다(레일 컨텍스트에서는
   그대로 필요하다). */
.settings-v2-org-drawer-body > .settings-v2-org-rail--pool {
  border: 0;
  padding: 0;
  background: transparent;
}

.settings-v2-org-drawer-foot {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 20px;
  border-top: 1px solid var(--wizon-ai-sidebar-border);
}

/* 인라인 style="flex:1" 을 클래스로 뺀 것 — 좌측 보조 버튼과 우측 «닫기»
   사이를 벌리는 빈 스페이서(09-08 래칫 수리). */
.settings-v2-org-drawer-foot-spacer {
  flex: 1;
}

.settings-v2-org-drawer-sec h5 {
  margin: 0 0 8px;
  font-size: var(--wizon-ai-font-size-label);
  font-weight: 600;
}

.settings-v2-org-drawer-kv {
  display: grid;
  grid-template-columns: 88px minmax(0, 1fr);
  gap: 8px 12px;
  font-size: var(--wizon-ai-font-size-label);
}

.settings-v2-org-drawer-kv dt {
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-caption);
}

.settings-v2-org-drawer-kv dd {
  margin: 0;
}

/* 390에서는 우측 패널 대신 하단 시트로 내려온다(목업 member-drawer-390
   그대로) — 드로어는 항상 패널 전체를 덮는 오버레이라 «컨테이너 폭»이 곧
   뷰포트 폭과 같다(안 C 표의 컨테이너 쿼리 원칙과 충돌하지 않는다 — 이건
   표가 아니라 오버레이 배치다). */
/* fix(20260925-build-approval-sheet-dialog, inventory.md S17 행): 고정 76% 는 소프트
   키보드에 안 반응한다(M-5) — --wizon-vvh(폴백 100dvh) 기반으로 바꾼다(76vh 는 원래
   비율의 근사값, workspace-picker 가 이미 쓰는 min(Nvh, vvh-여백) 관례와 같은 모양).
   하단 안전영역도 0건이었다(M-6) — 시각 바닥에 닿는 .settings-v2-org-drawer-foot 에
   둔다(래칫 이유로 기존 padding 을 지우지 않고 더한다). */
@media (max-width: 900px) {
  .settings-v2-org-drawer {
    inset: auto 0 0 0;
    width: 100%;
    height: min(76vh, calc(var(--wizon-vvh, 100dvh) - 40px));
    border-left: 0;
    border-top-left-radius: var(--wizon-ai-radius-sheet);
    border-top-right-radius: var(--wizon-ai-radius-sheet);
    /* R-41 B1b(S17) — 이전엔 모션 0(inventory 「없음/없음」). wizon-sheet-up 은 styles.css
       (같은 문서, 전역 @keyframes)의 것을 그대로 재사용한다 — 새 키프레임 0개. 이 파일의
       계약(위 92행 — var() 는 전부 wizon 접두 토큰)을 지키려면 WDS 스프링 토큰을 직접 못
       쓴다 — shared/wds/wizon-ai-shell-tokens.css 가 이미 두는 wizon-ai-motion 브리지
       (같은 372/188/124ms·같은 곡선을 WDS 쪽에서 그대로 물려받는다)로 값만 같게 참조한다. */
    translate: 0 0;
    animation: wizon-sheet-up var(--wizon-ai-motion-panel-duration, 372ms)
      var(--wizon-ai-motion-effect-ease, cubic-bezier(0.16, 1, 0.3, 1)) backwards;
  }
  .settings-v2-org-drawer[data-motion-state="closing"] {
    animation: wizon-sheet-down var(--wizon-sheet-exit-ms, 300ms)
      var(--wizon-sheet-exit-ease, cubic-bezier(0.33, 0, 0.2, 1)) forwards !important;
  }
  .settings-v2-org-drawer-scrim {
    animation: wizon-scrim-in var(--wizon-ai-motion-surface-duration, 188ms)
      var(--wizon-ai-motion-effect-ease, cubic-bezier(0.16, 1, 0.3, 1)) both;
  }
  .settings-v2-org-drawer-scrim[data-motion-state="closing"] {
    animation: wizon-scrim-out var(--wizon-sheet-exit-ms, 300ms)
      var(--wizon-sheet-exit-ease, cubic-bezier(0.33, 0, 0.2, 1)) forwards !important;
  }
}

/* R-41 B1b(S17·M-15) — reduce 여도 0 이 아니라 124ms 흐려짐, 이동은 0. 로그인 창(app.js
   styles.css 19547행)과 같은 문법 — 새 키프레임 0개(wizon-scrim-in/-out 재사용), wizon 접두
   토큰만(위 계약, wizon-ai-motion-micro-duration 이 WDS 의 fast spring 124ms 를 물려받는다). */
@media (max-width: 900px) and (prefers-reduced-motion: reduce) {
  .settings-v2-org-drawer {
    animation: wizon-scrim-in var(--wizon-ai-motion-micro-duration, 124ms) linear both;
    animation-duration: var(--wizon-ai-motion-micro-duration, 124ms) !important;
    translate: 0 0 !important;
  }
  .settings-v2-org-drawer[data-motion-state="closing"] {
    animation: wizon-scrim-out var(--wizon-ai-motion-micro-duration, 124ms) linear forwards !important;
    translate: 0 0 !important;
  }
  .settings-v2-org-drawer-scrim {
    animation: wizon-scrim-in var(--wizon-ai-motion-micro-duration, 124ms) linear both;
    animation-duration: var(--wizon-ai-motion-micro-duration, 124ms) !important;
  }
  .settings-v2-org-drawer-scrim[data-motion-state="closing"] {
    animation: wizon-scrim-out var(--wizon-ai-motion-micro-duration, 124ms) linear forwards !important;
  }

  .settings-v2-org-drawer-foot {
    padding-bottom: calc(14px + env(safe-area-inset-bottom, 0px));
  }
}

.settings-v2-checkbox-row {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: var(--wizon-ai-font-size-caption);
}

.settings-v2-member-affiliation {
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-pill);
  padding: 2px 10px;
  background: none;
  font-size: var(--wizon-ai-font-size-micro);
}

.settings-v2-members-tools {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
}

/* 구성원 검색은 WDS SearchField 컴포넌트가 그린다 — 폭만 잡는다. */
.settings-v2-member-search-wrap {
  width: 220px;
  max-width: 100%;
}

.settings-v2-invite-emails {
  resize: vertical;
  min-height: 96px;
}

/* 초대 모달 오버레이 (claude.ai 멤버 추가 참조). 설정 dialog top-layer 안에서
   position:fixed로 화면을 덮고 카드를 가운데 띄운다. */
.settings-v2-modal-overlay {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 24px;
  background: var(--wizon-scrim, rgba(0, 0, 0, 0.4));
  animation: settings-v2-toast-in var(--wizon-ai-motion-micro-duration, 160ms)
    var(--wizon-ai-motion-effect-fast, ease);
}

.settings-v2-modal {
  width: min(460px, 100%);
  max-height: calc(100vh - 48px);
  overflow-y: auto;
  padding: 24px;
  border: 1px solid var(--wizon-ai-popover-border);
  border-radius: var(--wizon-ai-radius-sheet);
  background: var(--wizon-ai-surface);
  box-shadow: var(--wizon-ai-dialog-shadow);
}

.settings-v2-modal-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-v2-modal-head h3 {
  margin: 0;
  font-size: var(--wizon-ai-font-size-title);
  font-weight: 600;
  color: var(--wizon-ai-text-primary);
}

.settings-v2-modal-close {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  border: 0;
  border-radius: var(--wizon-ai-radius-control);
  background: transparent;
  color: var(--wizon-ai-text-muted);
  cursor: pointer;
}

.settings-v2-modal-close svg {
  width: 18px;
  height: 18px;
}

.settings-v2-modal-sub {
  margin: 6px 0 20px;
  font-size: var(--wizon-ai-font-size-label);
  line-height: 1.5;
  color: var(--wizon-ai-text-secondary);
}

.settings-v2-modal-body {
  display: flex;
  flex-direction: column;
  gap: 18px;
}

.settings-v2-modal-help {
  margin-top: 6px;
}

.settings-v2-modal-foot {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  margin-top: 4px;
}

.settings-v2-member-list {
  display: flex;
  flex-direction: column;
}

.settings-v2-member-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 4px;
  border-top: 1px solid var(--wizon-ai-sidebar-border);
}

.settings-v2-member-row:first-child {
  border-top: 0;
}

/* 아바타 + 이름을 왼쪽에 묶어 두려면 identity가 남는 공간을 먹어야 한다.
   그렇지 않으면 space-between이 셋을 균등하게 밀어 아바타만 동떨어진다. */
.settings-v2-member-identity {
  display: flex;
  flex: 1 1 auto;
  flex-direction: column;
  gap: 2px;
  min-width: 0;
}

/* 첫 자식은 항상 WDS Avatar다. 해시 클래스명에 기대지 않으려고 구조로 고른다. */
.settings-v2-member-row > :first-child {
  flex: 0 0 auto;
}

.settings-v2-member-identity strong {
  font-size: var(--wizon-ai-font-size-body);
  color: var(--wizon-ai-text-primary);
}

.settings-v2-member-identity span {
  font-size: var(--wizon-ai-font-size-caption);
  color: var(--wizon-ai-text-muted);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.settings-v2-member-controls {
  display: flex;
  align-items: center;
  gap: 8px;
  flex: none;
}

/* 발주서 실측(375/390) — .settings-v2-member-controls가 flex:none 고정폭을
   요구해 형제 .settings-v2-member-identity(flex:1, min-width:0)가 30~40px로
   눌리고, identity strong에는 white-space 제어가 없어 「구성원00」이 두 줄로
   꺾이며 이메일(overflow:hidden 대상)이 사실상 안 보였다(실측: RED 캡처
   identityRect 폭 37px@390, 22px@375). 이름·이메일을 담은 identity를 자기
   줄로 온전히 내주고, controls(소속 칩·역할·배지·메뉴)는 그 아래 줄로 접어
   각자 필요한 폭을 갖게 한다 — 이름이 wrap 없이 한 줄로 다시 들어간다. */
@media (max-width: 520px) {
  .settings-v2-member-row {
    flex-wrap: wrap;
    row-gap: 6px;
  }

  .settings-v2-member-controls {
    flex-basis: 100%;
    flex-wrap: wrap;
    justify-content: flex-start;
  }
}

.settings-v2-member-role-static {
  min-width: 96px;
  font-size: var(--wizon-ai-font-size-label);
  color: var(--wizon-ai-text-secondary);
}

.settings-v2-member-you {
  padding: 2px 8px;
  border-radius: var(--wizon-ai-radius-pill);
  background: var(--wizon-ai-hover-bg);
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-micro);
}

.settings-v2-member-menu-spacer {
  display: inline-block;
  width: 32px;
}

/* 셀렉트·드롭다운 메뉴는 WDS Select / DropdownMenu 컴포넌트를 그대로 쓴다(자체
   셀렉트를 만들지 않는다). 여기서는 설정 화면 레이아웃에 맞추는 최소 보정만 하고,
   색·모양 토큰은 wizon-ai-shell-tokens.css가 위즈온 값으로 바인딩한다. */
.settings-v2-wds-select {
  /* WDS 기본 min-width(14rem)는 구성원 행 안에서 과하게 넓다 */
  min-width: 0;
  width: 132px;
}

.settings-v2-members-tools .settings-v2-wds-select {
  width: 148px;
}

.settings-v2-modal-body .settings-v2-wds-select {
  width: 100%;
}

.settings-v2-wds-menu-root {
  display: inline-flex;
}

/* 행 오른쪽 끝에 붙는 메뉴라 오른쪽 정렬한다(WDS 기본은 left: 0). */
.settings-v2-wds-menu {
  right: 0;
  left: auto;
}

.settings-v2-dropdown-scrim {
  position: fixed;
  inset: 0;
  z-index: 30;
  border: 0;
  background: transparent;
  cursor: default;
}

.settings-v2-field-label {
  font-size: var(--wizon-ai-font-size-label);
  font-weight: 500;
  color: var(--wizon-ai-text-primary);
}

.settings-v2-member-pagination {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  margin-top: 6px;
  padding-top: 14px;
  border-top: 1px solid var(--wizon-ai-sidebar-border);
}

.settings-v2-member-pagination-summary,
.settings-v2-member-pagination-page {
  font-size: var(--wizon-ai-font-size-caption);
  color: var(--wizon-ai-text-muted);
}

.settings-v2-member-pagination-controls {
  display: flex;
  align-items: center;
  gap: 8px;
}


@media (max-width: 900px) {
  .settings-v2-members-toolbar,
  .settings-v2-members-tools {
    flex-direction: column;
    align-items: stretch;
  }

  .settings-v2-member-search-wrap {
    display: flex;
    width: 100%;
  }
}

/* 토스트는 WDS Toast 컴포넌트가 그린다. WDS 스택은 자기 여백을 WDS 간격 토큰으로만 잡고
   기기 안전영역은 모르므로 그 책임만 여기서 이어받는다(위치·형태·애니는 WDS 소관).
   퇴장 애니 정지는 WDS가 wds.base의 전역 reduced-motion kill로 처리한다. */
.settings-v2-toast-stack {
  padding-block-end: var(--wizon-safe-bottom, 0px);
  padding-inline-end: var(--wizon-safe-right, 0px);
}

/* 터치 타깃은 화면 폭이 아니라 입력 수단으로 가른다.
   폭에 묶어 두면 터치 노트북(넓은 화면)은 작은 타깃을 받고, 좁게 줄인 데스크톱
   창은 불필요하게 큰 타깃을 받는다. 근거·기준: design-system/foundations/breakpoints.md §2·§5 */
@media (pointer: coarse) {
  /* `.ds-input` 복합 선택자로 특이도를 맞춰야 `.ds-input--md`(40px)를 넘어 44px가 유지된다. */
  .settings-v2-select.ds-input {
    min-height: 44px;
  }

  /* 스위치는 시각적 필(26px)은 그대로 두고 ::before로 히트 영역만 44px로 넓힌다.
     같은 button 엘리먼트라 클릭은 이미 동작하고, 단독 우측 정렬 행이라 겹침이 없다. */
  .settings-v2-switch::before {
    position: absolute;
    top: 50%;
    left: 0;
    right: 0;
    height: 44px;
    content: "";
    transform: translateY(-50%);
  }

  .settings-v2-seg-option,
  .settings-v2-retention-choice,
  /* 발주서 §5 — 구성원 상태 탭(활성/대기 중)·조직도 하위 탭(조직도/그룹/
     가져오기/변경 이력) 이 공유하는 .settings-v2-tab 필도 다른 필·세그
     옵션과 같은 터치 타깃 관례를 아직 못 받았다(패딩 6px 14px만으로는
     44px 미만) — 여기서 같이 넣는다. */
  .settings-v2-tab {
    min-height: 44px;
  }

  .settings-v2-sw-wrap {
    min-height: 44px;
    align-items: center;
  }
}

/* 복합 hover+focus 규칙은 base에 그대로 둔다(focus-within은 모든 기기에서 살아야 하므로).
   대신 터치(coarse)에서 hover 리프트만 무효화한다 — focus-within 리프트는 유지된다.
   box-shadow:none / transform:none은 하드코딩 값이 아니라 anti-drift 검출에서 면제된다.
   근거: design-system/foundations/breakpoints.md §2 축 B / §6-2. */
@media (pointer: coarse) {
  .settings-v2-tcard:hover .settings-v2-mini {
    transform: none;
    box-shadow: none;
  }

  .settings-v2-fcard:hover .settings-v2-fmini {
    box-shadow: none;
  }
}

/* doc 681 §B-5/§B-6 — 앱 밖 알림(웹 푸시). 권한 카드는 대화 화면(app.js)에서,
   도움말 오버레이는 이 설정 다이얼로그 안에서 그려진다 — 같은 토큰 체인을 쓰도록
   여기에 함께 둔다(settings-v2.css는 index.html에 항상 로드된다). */
.wizon-push-card-anchor {
  position: fixed;
  right: 20px;
  bottom: 88px;
  z-index: 40;
  max-width: 360px;
  width: calc(100vw - 40px);
}

@media (max-width: 900px) {
  .wizon-push-card-anchor {
    left: 12px;
    right: 12px;
    bottom: 84px;
    max-width: none;
    width: auto;
  }
}

.wizon-push-card {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 14px 16px;
  margin: 12px 0;
  background: var(--wizon-ai-surface-raised);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
  color: var(--wizon-ai-text-primary);
  font-size: var(--wizon-ai-font-size-caption);
}

.wizon-push-card-note {
  margin: 0;
  color: var(--wizon-ai-text-muted);
}

.wizon-push-card-row {
  display: flex;
  gap: 8px;
}

.wizon-push-card--denied {
  color: var(--wizon-ai-danger-text);
}

/* 오너 닫기 규칙(09-25): 웹은 팝오버 우상단 ×. 이 마크업은 데스크톱 전용이다 —
   모바일(≤900px)은 이 화면이 아니라 실제 바텀시트 <dialog>(index.html
   #pushHelpSheetDialog, push-client.js openHelpSheet)로 뜬다(09-25 재작업 지시 2:
   인라인 카드 금지, R-40 M-2 안내형은 스크림·뒤로가기가 있는 진짜 시트여야 한다). */
.settings-v2-push-help {
  margin: 12px 0;
  padding: 16px;
  background: var(--wizon-ai-surface-raised);
  border: 1px solid var(--wizon-ai-sidebar-border);
  border-radius: var(--wizon-ai-radius-card);
}

.settings-v2-push-help-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.settings-v2-push-help-head h3 {
  margin: 0;
  font-size: var(--wizon-ai-font-size-body);
}

.settings-v2-push-help-close {
  border: none;
  background: transparent;
  color: var(--wizon-ai-text-muted);
  font-size: var(--wizon-ai-font-size-title);
  line-height: 1;
  cursor: pointer;
  /* 44px 터치 타깃(HIG/WCAG 2.2 §2.5.8) — 09-25 중앙 캡처 실측(26×27px)에서
     미달로 잡힌 항목. 시각 크기는 유지하고 히트슬롭만 키운다. */
  min-width: 44px;
  min-height: 44px;
  padding: 4px 8px;
}

/* ≤900px에서는 이 오버레이 자체가 렌더되지 않는다(위 JS 분기) — 그래도 스크립트가
   막 전환되는 리사이즈 창 한 프레임을 대비해 숨겨 둔다(방어적, 시각적 이중 확인). */
@media (max-width: 900px) {
  .settings-v2-push-help {
    display: none;
  }
}