/* 사용자 앱 공통 부품 — 시안 v15 (2026-10-26 사용자 결정 "새 시안대로 반영")
 * - 근거: docs/시안v15_반영_개발계획서_2026-10-26.md 3-3 · 3-4, 화면설계서 H 홈 v0.13 C-1 · C-6 · C-7 · C-8, D 물건상세 v0.2 C-50,
 *   값은 시안 고비_화면시안_261023v15 의 v15 덮어쓰기 블록(.top:has(.gwm) · .gwm · .top > b · .sh · .box · .tabs button · .gpill · .cbg · .dlb · .gam small).
 * - 레이아웃 user-app-head.ejs 가 user-tokens.css → user-fonts.css → user-home.css → 이 파일 → 화면 전용 CSS 순서로 읽습니다.
 *   user-home.css 는 고치지 않고(홈 담당 파일) 여기서 덮어씁니다. 옛 로고 규칙(.app-logo*)은 2026-10-26 정리 때 user-home.css 에서 지움(9513836).
 * - 켜기 장치: 색 · 바탕 값은 user-tokens.css 의 .app--v15 범위가 바꿉니다. 이 파일의 부품 클래스(app-sh · app-pill · app-box …)는
 *   화면이 마크업에 쓸 때만 그려지고, 하위 화면 상단 바 모양은 .app--v15 안에서만 바뀝니다.
 *   GOBI 글자 로고 줄(C-1)은 켜기 범위 밖 — 모든 앱 레이아웃 화면에서 바로 바뀝니다(옛 로고와 새 로고가 섞이지 않게, 계획 3-5).
 * - 인라인 style 없음(CSP style-src 'self'). 누르는 영역은 48 × 48 이상(2-6) — 시안보다 작은 부품은 ::after 로 넓힘.
 * - 시안과 다르게 정한 값은 "(제안)". */

/* ---------- 로고 줄 (C-1, 시안 .top:has(.gwm)): 높이 45 · 가운데 GOBI · 오른쪽 관심 · 알림 · 아래 잉크 선 ----------
 * 시안은 72 · 1fr · 72 칸. 아이콘 버튼은 누르는 영역 48 × 48 이라 두 개(96px)가 72px 칸보다 넓음 →
 * (제안) 양옆 칸을 같은 비율(최소 72px)로 두어 GOBI 가 언제나 화면 가운데에 오게 함 */
.app-header__bar.app-headbar {
  display: grid;
  grid-template-columns: minmax(var(--layout-topbar-side), 1fr) auto minmax(var(--layout-topbar-side), 1fr);
  align-items: center;
  gap: 0;
  min-height: var(--layout-topbar-height);
  margin: 6px -2px 0;
  border-bottom: var(--border-width-rule) solid var(--color-border-inverse);
}

.app-header--dark .app-header__bar.app-headbar {
  border-bottom-color: currentColor;
}

.app-headbar__start {
  display: flex;
  align-items: center;
  justify-self: start;
  margin-inline-start: -12px;                   /* 아이콘 가운데가 화면 왼쪽 26px (오른쪽 종과 대칭) */
}

.app-headbar .app-header__actions {
  grid-column: 3;
  justify-self: end;
  margin-inline-end: -12px;                     /* 종 아이콘 가운데가 화면 오른쪽 26px (시안 위치) */
}

/* 시안 .top:has(.gwm) .ic svg: 20px, 선 2 */
.app-headbar .app-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

/* GOBI 글자 로고 (시안 .top .gwm): 명조 13.26px, 자간 .32em(왼쪽 안쪽 여백도 .32em → 글자가 가운데), 아래 빨간 밑줄 22 × 2.
 * 누르면 홈 맨 위로(data-scroll-top, user-home.js). 누르는 영역 48px, 밑줄은 글자 상자 기준(::after) */
.app-wordmark {
  grid-column: 2;
  justify-self: center;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--layout-hit-min);
  min-height: var(--layout-hit-min);
  margin-block: calc((var(--layout-topbar-height) - var(--layout-hit-min)) / 2);
  color: inherit;
  text-decoration: none;
  transition: opacity var(--motion-duration-fast) var(--motion-ease-out);
}

.app-wordmark:active {
  opacity: var(--opacity-pressed);
}

.app-wordmark__text {
  position: relative;
  padding-left: var(--font-tracking-wordmark);
  font-family: var(--font-family-title);
  font-size: var(--font-size-wordmark);
  font-weight: var(--font-weight-semibold);   /* 시안은 400 이지만 글꼴이 600 한 굵기라 같은 모양 */
  line-height: normal;
  letter-spacing: var(--font-tracking-wordmark);
  white-space: nowrap;
}

.app-wordmark__text::after {
  content: "";
  position: absolute;
  bottom: calc(-1 * var(--layout-wordmark-rule-gap));
  left: 50%;
  width: var(--layout-wordmark-rule-width);
  height: var(--layout-wordmark-rule-height);
  background: var(--color-brand-primary);
  transform: translateX(-50%);
}

.app-header--dark .app-wordmark__text::after {
  background: var(--color-brand-primary-on-dark);
}

/* ---------- 하위 화면 상단 바 (C-1, 시안 .top:has(> button.ic:first-child)): 뒤로 · 가운데 명조 제목 · 아래 잉크 선 ----------
 * .app--v15 화면에서만 바뀜. 시안 칸 40 · 1fr · 40 → (제안) 뒤로 누르는 영역 48 유지, 아이콘 가운데는 시안처럼 화면 왼쪽 26px
 * (기존 user-guide.css 와 같은 배치 — 그 파일을 읽지 않는 화면도 같게 여기서 다시 둠) */
.app--v15 .app-header--sub {
  border-bottom: var(--border-width-rule) solid var(--color-border-inverse);
}

.app--v15 .app-topbar {
  display: grid;
  grid-template-columns: var(--layout-hit-min) minmax(0, 1fr) var(--layout-hit-min);
  align-items: center;
  min-height: var(--layout-subbar-height);
  margin-inline: -14px;
}

.app--v15 .app-topbar--action {
  grid-template-columns: var(--layout-hit-min) minmax(0, 1fr) auto;
}

/* 오른쪽 글자 버튼('초기화' 등, 화면 점검 2026-10-26): 바가 좌우 −14px 로 넓어져 있어 화면 끝에서 8px 만 떨어지던 것을
 * 다른 화면 여백과 같은 16px 로(바 끝 2px + 14px). 모양 · 누르는 영역은 화면 CSS(user-explore.css .app-topbar__action) 그대로 */
.app--v15 .app-topbar__action {
  margin-inline-end: 14px;
}

.app--v15 .app-topbar .app-icon-btn {
  margin-block: calc((var(--layout-subbar-height) - var(--layout-hit-min)) / 2);
}

.app--v15 .app-topbar .app-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2;
}

.app--v15 .app-topbar__back {
  justify-self: start;
}

.app--v15 .app-topbar__title {
  min-width: 0;
  overflow: hidden;
  font-family: var(--font-family-title);
  font-size: var(--font-size-subbar-title);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  text-align: center;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.app--v15 .app-topbar__end {
  width: var(--layout-hit-min);
}

/* ---------- 명조 글자 (제목 · 카드 이름 · 목록 가격) ---------- */
.app-serif {
  font-family: var(--font-family-title);
  font-weight: var(--font-weight-semibold);
}

/* ---------- 섹션 머리 (시안 v15 .sh): 명조 18 + 아래 잉크 선 1.5px, 위 28 · 아래 12, 오른쪽 가는 선 없음 ----------
 * 마크업: <div class="app-sh"><h2 class="app-sh__title">제목</h2><a class="app-sh__more" href="…">더보기 ›</a></div> */
.app-sh {
  display: flex;
  align-items: center;
  gap: var(--space-2);
  margin: 28px 0 var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: var(--border-width-section) solid var(--color-border-inverse);
}

.app-sh__title {
  min-width: 0;
  font-family: var(--font-family-title);
  font-size: var(--font-size-xl);
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  letter-spacing: -0.3px;
  word-break: keep-all;
}

/* 제목 안 숫자 강조 (시안 H-01 6번 "10가지 종류": 빨간 명조) */
.app-sh__title em {
  color: var(--color-brand-primary);
  font-style: normal;
}

.app-sh__more {
  position: relative;
  flex: none;
  margin-left: auto;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  text-decoration: none;
}

.app-sh__more::after {                         /* 누르는 영역 48px */
  content: "";
  position: absolute;
  inset: -16px -8px;
}

/* ---------- 알약 칩 · 태그 (시안 v15 .gpill · .cbg · .row .type): 잉크 테두리 1px, 모서리 999 ----------
 * 고른 것(.is-on) · D-day 임박(.app-pill--urgent)은 잉크 채움 + 흰 글자 */
.app-pill {
  display: inline-flex;
  align-items: center;
  flex: none;
  padding: 1px 8px;
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-primary);
  font-size: var(--font-size-2xs);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-2xs);
  letter-spacing: -0.14px;
  white-space: nowrap;
}

.app-pill.is-on,
.app-pill--urgent {
  border-color: var(--color-chip-on-bg);
  background: var(--color-chip-on-bg);
  color: var(--color-chip-on-text);
}

/* ---------- 알약 탭 (시안 v15 .tabs button · .seg3 button): 같은 폭, 잉크 테두리, 고른 탭은 잉크 채움 ----------
 * 마크업: <nav class="app-pill-tabs" aria-label="…"><a class="app-pill-tab is-on" aria-current="page" href="…">…</a>…</nav>
 * (탭 패널이면 role="tablist" · aria-selected="true") */
.app-pill-tabs {
  display: flex;
  gap: 6px;
}

.app-pill-tab {
  position: relative;
  flex: 1 1 0;
  min-width: 0;
  padding: 8px 0;
  border: 1px solid var(--color-chip-border);
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-primary);
  font-size: 0.78125rem;                      /* 12.5px (시안 .tabs button) */
  font-weight: var(--font-weight-semibold);
  line-height: var(--font-leading-compact);
  text-align: center;
  text-decoration: none;
  white-space: nowrap;
}

.app-pill-tab::after {                        /* 누르는 영역 48px (모양은 그대로) */
  content: "";
  position: absolute;
  inset: -8px 0;
}

.app-pill-tab.is-on,
.app-pill-tab[aria-current="page"],
.app-pill-tab[aria-selected="true"] {
  border-color: var(--color-chip-on-bg);
  background: var(--color-chip-on-bg);
  color: var(--color-chip-on-text);
}

/* ---------- 흰 상자 · 카드 (시안 v15 .box · .card.sc2 · .row): 테두리 없음, 판정 빛 없음 ---------- */
.app-box {
  padding: var(--space-1) var(--space-3_5);
  border: 0;
  border-radius: var(--radius-box);
  background: var(--color-bg-surface);
}

.app-card {
  overflow: hidden;
  border: 0;
  border-radius: var(--radius-card);
  background: var(--color-bg-surface);
  box-shadow: none;
}

/* ---------- 잉크 띠 (시안 v15 .dlb · H-01 5번 "내 조건에 맞는 더 정확한 추천 보기 ›"): 모서리 16, 흰 글자, 오른쪽 › ---------- */
.app-band {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--space-3);
  min-height: var(--layout-hit-min);
  padding: 14px 16px;
  border-radius: var(--radius-card);
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
  font-size: 0.90625rem;                      /* 14.5px (시안 v15 .dlb b) */
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-decoration: none;
  word-break: keep-all;
}

.app-band::after {
  content: "›";
  flex: none;
  opacity: 0.8;
  font-size: var(--font-size-2xl);
  font-weight: var(--font-weight-regular);
}

.app-band:active {
  background: var(--color-bg-inverse-pressed);
}

/* ---------- 금액 단위 (C-8, 시안 .gam small · unitH): 숫자 옆 단위(억 · 만원)를 작은 글자로 ----------
 * 마크업: 5,876<span class="app-unit">만원</span>, 1<span class="app-unit app-unit--mid">억</span>3,375<span class="app-unit">만원</span> */
.app-unit {
  margin-left: 0.08em;
  font-size: 0.4em;
  font-weight: var(--font-weight-bold);
  letter-spacing: 0;
}

.app-unit--mid {
  margin-right: 0.22em;
}

/* ---------- 로그인 시트 (F-02 임시안, 개발계획서 시안v15 5-4 · 공통 규칙 C-4) ----------
 * 마크업: partials/user-login-sheet.ejs(비회원 화면에만), 여닫기 /static/shared/user-login-sheet.js. 옛 홈 H-03 시트(user-home.css .home-sheet*)의 모양을 일반 시트로 옮김.
 * 화면 전체를 덮는 틀(.app-sheet, 닫힘은 hidden) = 어두운 바깥(.app-sheet__scrim, 누르면 닫힘) + 아래에서 올라오는 판(.app-sheet__panel, role="dialog").
 * 판은 최대 430px 가운데, 위 모서리 16px, 흰 바탕. 손잡이 40 × 4px(끌기 영역은 판 위 24px 가로 전체, touch-action: none) · 오른쪽 위 닫기 ✕(48 × 48).
 * 가운데 정렬 제목 17px 굵게 · 설명 13px 보조 글자(F-02 시안), 버튼 세 줄(높이 48px · 모서리 12px): 잉크 "아이디로 로그인" ·
 * 테두리 "회원가입" · 카카오 노랑(#FEE500, 카카오 로그인 디자인 가이드) "카카오로 시작하기 (준비 중)" — 누를 수 없음(disabled), "(준비 중)"은 파란 글자(D-20).
 * 열려 있는 동안 문서 스크롤을 막음(:has). 닫힘 움직임 is-closing · 끄는 중 is-dragging(끈 거리는 CSSOM 사용자 정의 속성 --app-sheet-dy). */
.app-sheet {
  position: fixed;
  inset: 0;
  z-index: var(--z-sheet);
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

.app-sheet[hidden] {
  display: none;
}

html:has(.app-sheet:not([hidden])) {
  overflow: hidden;
}

.app-sheet__scrim {
  position: absolute;
  inset: 0;
  background: var(--color-bg-sheet-scrim);
  transition: opacity var(--motion-duration-sheet-close) var(--motion-ease-in);
}

.app-sheet__panel {
  position: relative;
  width: 100%;
  max-width: var(--layout-max-width);
  max-height: 92%;
  padding: var(--space-2_5) var(--app-gutter-end) calc(28px + var(--app-safe-bottom)) var(--app-gutter-start);
  overflow-y: auto;
  overscroll-behavior: contain;
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
  text-align: center;
  animation: app-sheet-up var(--motion-duration-sheet) var(--motion-ease-out);
  transition: transform var(--motion-duration-sheet-close) var(--motion-ease-out); /* 끌다 놓으면 제자리로 */
}

@keyframes app-sheet-up {
  from {
    transform: translateY(40px);
    opacity: 0.4;
  }

  to {
    transform: none;
    opacity: 1;
  }
}

.app-sheet__panel.is-dragging {
  transform: translateY(var(--app-sheet-dy, 0px)); /* 끈 거리(스크립트가 CSSOM 사용자 정의 속성으로 줌) */
  transition: none;
}

.app-sheet.is-closing .app-sheet__scrim {
  opacity: 0;
}

.app-sheet.is-closing .app-sheet__panel {
  transform: translateY(100%);
  transition-timing-function: var(--motion-ease-in);
}

.app-sheet__grab {
  position: relative;
  height: 24px;                                /* 판 위 안쪽 10px + 막대 4px + 아래 10px */
  margin: calc(-1 * var(--space-2_5)) calc(-1 * var(--app-gutter-end)) 0 calc(-1 * var(--app-gutter-start));
  touch-action: none;
  cursor: grab;
}

.app-sheet__grab::after {
  content: "";
  position: absolute;
  top: var(--space-2_5);
  left: 50%;
  width: 40px;
  height: 4px;
  margin-left: -20px;
  border-radius: 2px;
  background: var(--color-sheet-grab);
}

.app-sheet__panel.is-dragging .app-sheet__grab {
  cursor: grabbing;
}

.app-sheet__close {
  position: absolute;
  top: 0;
  right: calc(var(--app-gutter-end) - 12px);
  margin: 0;
  padding: 0;
  border: 0;
  background: transparent;
  color: var(--color-text-primary);
  cursor: pointer;
}

.app-sheet__title {
  margin: var(--space-6) var(--space-6) 0;   /* 위 손잡이 · 양옆 ✕ 자리 */
  font-size: var(--font-size-lg_5);
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-lg);
  word-break: keep-all;
  text-wrap: balance;                          /* 360dp 에서 마지막 낱말("있어요")만 다음 줄로 넘어가지 않게 두 줄을 고르게 */
}

.app-sheet__text {
  margin: var(--space-2) 0 var(--space-6);
  color: var(--color-text-secondary);
  font-size: var(--font-size-sm);
  line-height: var(--font-leading-sm);
  word-break: keep-all;
}

.app-sheet__actions {
  display: flex;
  flex-direction: column;
  gap: var(--layout-hit-gap);
}

.app-sheet__btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  width: 100%;
  min-height: var(--layout-hit-min);
  padding: var(--space-3) var(--space-4);
  border: 1px solid transparent;
  border-radius: var(--radius-md);
  font: inherit;
  font-size: 0.9375rem;                        /* 15px (옛 H-03 확인 버튼 · 시안 .btn1 과 같음) */
  font-weight: var(--font-weight-bold);
  line-height: var(--font-leading-compact);
  text-decoration: none;
}

.app-sheet__btn--ink {
  background: var(--color-bg-inverse);
  color: var(--color-text-inverse);
}

.app-sheet__btn--ink:active {
  background: var(--color-bg-inverse-pressed);
}

.app-sheet__btn--line {
  border-color: var(--color-border-inverse);
  background: var(--color-bg-surface);
  color: var(--color-text-primary);
}

.app-sheet__btn--line:active {
  background: var(--color-bg-muted);
}

.app-sheet__btn--kakao {
  background: var(--color-kakao-bg);
  color: var(--color-kakao-text);
  cursor: not-allowed;
}

.app-sheet__soon {
  color: var(--color-text-pending);
  font-weight: var(--font-weight-medium);
}

/* ---------- 시트 공통 확장 (시안 정합 G0 — partials/user-sheet) ----------
 * --center: 확인 시트(로그아웃 A-04 · 시안 logoutAsk)처럼 글자 가운데 · ✕ 없음.
 * 버튼 --red(빨강 확인, C-01D 25번) · --text(회색 글자 '취소', 26번), 폼 안 버튼(.app-sheet__form)은 다른 버튼과 같은 폭. */
.app-sheet--center .app-sheet__title,
.app-sheet--center .app-sheet__text {
  text-align: center;
}

.app-sheet--center .app-sheet__title {
  margin-inline: 0;
}

.app-sheet__form {
  display: flex;
  margin: 0;
}

.app-sheet__btn--red {
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
}

.app-sheet__btn--red:active {
  background: var(--color-brand-primary-pressed);
}

.app-sheet__btn--text {
  background: transparent;
  color: var(--color-text-secondary);
  font-weight: var(--font-weight-medium);
}

.app-sheet__btn--text:active {
  background: var(--color-bg-muted);
}

/* ---------- 머리 배지 (A-01, 시안 .hbt .hbg · .ic.bel .dot): 하트 오른쪽 위 빨간 수 · 종 오른쪽 위 빨간 점 ----------
 * 숫자 · 점은 꾸밈(aria-hidden) — 읽기 글자는 링크 aria-label(screenCopy['C-1']). 0 이면 마크업 자체가 없음. */
.app-header__actions .app-icon-btn {
  position: relative;
}

.app-badge {
  position: absolute;
  top: 6px;
  right: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: var(--layout-badge-size);
  height: var(--layout-badge-size);
  padding: 0 var(--space-1);
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  color: var(--color-text-inverse);
  font-size: var(--font-size-badge);
  font-style: normal;
  font-weight: var(--font-weight-bold);
  line-height: 1;
  font-variant-numeric: tabular-nums;
  pointer-events: none;
}

.app-dot {
  position: absolute;
  top: 13px;
  right: 14px;
  width: var(--layout-dot-size);
  height: var(--layout-dot-size);
  border-radius: var(--radius-full);
  background: var(--color-brand-primary);
  pointer-events: none;
}

/* ---------- 공통 관심 하트 (partials/user-fav-heart 기본 클래스, C-6) ----------
 * 화면 카드는 자기 클래스(cls)를 넘겨 기존 모양을 쓰고, 기본 모양은 48 × 48 누름 영역의 선 하트. 담김(aria-pressed="true")이면 빨강으로 채움. */
.app-fav {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-1);
  min-width: var(--layout-hit-min);
  min-height: var(--layout-hit-min);
  padding: 0;
  border: 0;
  border-radius: var(--radius-full);
  background: transparent;
  color: var(--color-text-primary);
  font: inherit;
  text-decoration: none;
  cursor: pointer;
}

.app-fav[aria-disabled="true"] {
  color: var(--color-text-disabled);
  cursor: default;
}

.app-fav__icon {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linejoin: round;
}

.app-fav[aria-pressed="true"] {
  color: var(--color-brand-primary);
}

.app-fav[aria-pressed="true"] .app-fav__icon {
  fill: currentColor;
}

.app-fav__label {
  font-size: var(--font-size-sm);
  font-weight: var(--font-weight-bold);
}

/* ---------- 토스트 (로그인 뒤 돌아온 화면 "로그인했어요. 관심 물건 담기를 눌러 주세요", /static/shared/user-login-sheet.js 가 만듦) ----------
 * 하단 탭 위 가운데(글자 길이만큼, 최대 430px − 양옆 여백), 잉크 바탕 흰 글자, 4초 뒤 사라짐(움직임 줄이기 설정이면 바로). role="status" */
.app-toast {
  position: fixed;
  left: 50%;
  bottom: calc(100px + var(--app-safe-bottom, 0px));   /* 시안 .toast bottom 100px (하단 탭 위) */
  z-index: var(--z-toast);
  width: max-content;                          /* 시안 .toast: 글자 길이만큼(nowrap) — 긴 글은 화면 폭 안에서 줄바꿈 */
  max-width: calc(min(100%, var(--layout-max-width)) - 2 * var(--layout-gutter));
  padding: var(--space-2_5) var(--space-3_5);  /* 시안 10px 14px */
  border-radius: var(--radius-table);          /* 시안 10px */
  background: var(--color-bg-inverse);         /* 시안 rgba(27,27,30,.94) — 토큰 추가는 계획서 공통 항목 */
  color: var(--color-text-inverse);
  font-size: var(--font-size-sm);              /* 시안 13px */
  line-height: normal;
  text-align: center;
  word-break: keep-all;
  opacity: 0;
  transform: translate(-50%, 8px);
  transition: opacity var(--motion-duration-base) var(--motion-ease-out), transform var(--motion-duration-base) var(--motion-ease-out);
  pointer-events: none;
}

.app-toast:empty {
  padding: 0;
}

.app-toast.is-shown {
  opacity: 1;
  transform: translate(-50%, 0);
}

/* 회원 글 입력칸 글자 수 (/static/shared/user-text-count.js, 2026-10-30) — 칸 값은 바꾸지 않고 "n / 최대" · 넘침 경고만 */
.txt-count {
  display: block;
  margin: 4px 0 0;
  color: var(--color-text-tertiary);
  font-size: var(--font-size-xs);
  font-variant-numeric: tabular-nums;
  text-align: right;
}

.txt-count.is-over {
  color: var(--color-verdict-risk-text);
  font-weight: var(--font-weight-bold);
}

/* 입력 칸 글자 수 상한 알림 (/static/shared/user-input-limit.js, 2026-11-02 사용자 지시 "글자 제한이 넘을 경우 더이상 입력되지 못하게") —
   넘친 글자를 막았을 때만 글이 들어감 */
.input-limit-note {
  margin: 4px 0 0;
  color: var(--color-verdict-risk-text);
  font-size: var(--font-size-xs);
}

.input-limit-note:empty {
  margin: 0; /* 비어 있으면 높이 0 — aria-live 영역은 숨기지 않고 둠(낭독기가 바뀐 글을 읽게) */
}