/* =============================================================================
 * 서명전에 — iOS Components (HIG)
 * ========================================================================== */

/* ---------- Stage & Frame ---------- */
.stage {
  position: fixed; inset: 0;
  display: flex; align-items: center; justify-content: center;
  background: #0a0a0f;
  padding: 20px;
  overflow: hidden;
}
.stage__wrap {
  position: relative;
  display: grid;
  place-items: center;
}
.stage__scaler {
  width: 393px;
  height: 852px;
  transform-origin: center center;
  position: absolute;
  left: 50%; top: 50%;
  margin-left: -196.5px;
  margin-top: -426px;
}

/* iPhone 15 Pro-ish */
.iphone {
  position: relative;
  width: 393px;
  height: 852px;
  background: var(--bg);
  border-radius: 54px;
  overflow: hidden;
  box-shadow:
    inset 0 0 0 2px #1a1a1c,
    0 0 0 6px #0d0d10,
    0 0 0 7px #2b2b30,
    0 40px 80px rgba(0, 0, 0, 0.5);
}
.iphone__island {
  position: absolute; top: 11px; left: 50%;
  transform: translateX(-50%);
  width: 122px; height: 37px;
  background: #000;
  border-radius: 20px;
  z-index: 100;
}
.iphone__status {
  position: absolute; top: 0; left: 0; right: 0;
  height: 54px;
  padding: 18px 28px 0;
  display: flex; align-items: center; justify-content: space-between;
  font-size: 17px; font-weight: 600;
  color: var(--label);
  z-index: 99;
  pointer-events: none;
}
.iphone__status-right {
  display: flex; align-items: center; gap: 5px;
}
.iphone__home {
  position: absolute; bottom: 8px; left: 50%;
  transform: translateX(-50%);
  width: 134px; height: 5px;
  background: var(--label);
  opacity: 0.9;
  border-radius: 3px;
  z-index: 100;
}

/* ---------- App shell ---------- */
/* Safe Area: 노치·Dynamic Island 영역이 54px보다 크면 sa-top 위에 10px만 여백.
   데스크톱·일반 모바일 Safari(sa-top=0)에서는 기본 54px가 그대로 보여요.          */
.app {
  position: relative;
  width: 100%;
  flex: 1;
  min-height: 0;
  padding-top: max(54px, calc(var(--sa-top, 0px) + 10px));
  padding-bottom: calc(var(--tabbar-h) + max(34px, var(--sa-bottom, 0px)));
  display: flex; flex-direction: column;
  background: var(--bg);
}
.app--no-tab {
  padding-bottom: max(34px, var(--sa-bottom, 0px)); /* only home indicator */
}

/* ---------- Nav Bar (standard) ---------- */
.navbar {
  height: var(--navbar-h);
  display: flex; align-items: center; justify-content: space-between;
  padding: 0 8px;
  background: var(--surface);
  border-bottom: 0.5px solid transparent;
  transition: border-color var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  position: relative;
  z-index: 10;
}
.navbar--scrolled {
  border-bottom-color: var(--separator);
  background: color-mix(in srgb, var(--surface) 80%, transparent);
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
}
.navbar__title {
  position: absolute; left: 50%; top: 50%;
  transform: translate(-50%, -50%);
  font-size: var(--fs-headline);
  font-weight: var(--w-headline);
  color: var(--label);
  letter-spacing: -0.02em;
  white-space: nowrap;
}
.navbar__btn {
  display: inline-flex; align-items: center; gap: 2px;
  min-width: 44px; min-height: 44px;
  padding: 0 6px;
  border: 0; background: transparent;
  color: var(--ios-blue);
  font-size: var(--fs-body);
  font-weight: 400;
  letter-spacing: -0.02em;
  cursor: pointer;
}
.navbar__btn:active { opacity: 0.4; }
.navbar__btn--bold { font-weight: var(--w-headline); }

/* Left-aligned variant: brand on left, single action on right */
.navbar--left { padding: 0 8px 0 14px; }
.navbar--left .navbar__brand {
  display: inline-flex;
  align-items: center;
  color: var(--brand);
  white-space: nowrap;
}

/* Large Title */
.largetitle {
  padding: 6px 20px 8px;
  background: var(--surface);
}
.largetitle__eyebrow {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.6;
  font-weight: 500;
  letter-spacing: -0.01em;
  margin-bottom: 2px;
}
.largetitle__text {
  font-size: var(--fs-largetitle);
  line-height: var(--lh-largetitle);
  font-weight: var(--w-largetitle);
  letter-spacing: -0.03em;
  color: var(--label);
  margin: 0;
}

/* ---------- Content scroll ---------- */
.scroll {
  flex: 1;
  overflow-y: auto;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  overscroll-behavior: contain;
}
.scroll--plain { background: var(--surface); }
.scroll--grouped { background: var(--bg); }

/* ---------- Inset grouped list (iOS Settings style) ---------- */
.inset-group {
  margin: 16px 20px;
}
.inset-group__header {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.6;
  padding: 0 16px 7px;
  text-transform: uppercase;
  letter-spacing: 0.02em;
  font-weight: 500;
}
.inset-group__list {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.inset-row {
  display: flex; align-items: center;
  padding: 11px 16px;
  min-height: 44px;
  gap: 12px;
  position: relative;
  background: var(--bg-2);
  cursor: pointer;
  border: 0; width: 100%; text-align: left;
  font-family: inherit; color: inherit;
}
.inset-row:active { background: var(--fill-3); }
.inset-row + .inset-row::before {
  content: ""; position: absolute; top: 0; left: 54px; right: 0;
  height: 0.5px; background: var(--separator);
}
.inset-row__icon {
  width: 29px; height: 29px; border-radius: 7px;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: #fff;
}
.inset-row__label {
  flex: 1;
  font-size: var(--fs-body);
  color: var(--label);
  white-space: nowrap;
  word-break: keep-all;
}
.inset-row__value {
  font-size: var(--fs-body);
  color: var(--label-secondary);
  opacity: 0.6;
  white-space: nowrap;
  word-break: keep-all;
}
.inset-row__chev {
  color: var(--label-secondary);
  opacity: 0.3;
  margin-left: -4px;
}
.inset-group__footer {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.6;
  padding: 7px 16px 0;
  line-height: 1.35;
}

/* ---------- Missing-items — card block ----------
 * 예전에는 점(dot) 리스트로 흐릿하게 묻혀 있었는데, 사용자가
 * '관리비/중개사 등록번호/보증보험 협조' 같은 실제로 중요한
 * 추가 체크 항목을 못 보고 지나친다는 피드백이 있어 카드 블록으로
 * 승격시킨다. 각 항목을 별도 카드로 쌓아 시선이 반드시 걸리도록.
 */
.missing-block {
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding: 0 16px;
  margin-top: 22px;
}
.missing-block__head {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 2px 2px;
}
.missing-block__head-icon {
  width: 22px; height: 22px;
  border-radius: 7px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--warn-soft, #fff9e7);
  color: var(--warn-ink, #dd7d02);
  flex-shrink: 0;
}
.missing-block__title {
  font-size: var(--fs-headline, 17px);
  font-weight: 700;
  letter-spacing: -0.015em;
  color: var(--label);
}
.missing-block__sub {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.8;
  padding: 0 2px 4px;
  line-height: 1.45;
}

.missing-card {
  background: var(--surface, #fff);
  border: 0.5px solid var(--separator);
  border-left: 3px solid var(--warn, #ffc342);
  border-radius: 14px;
  padding: 14px 16px 14px 14px;
  display: grid;
  grid-template-columns: 30px 1fr;
  grid-template-rows: auto auto;
  column-gap: 12px;
  row-gap: 4px;
  box-shadow: 0 1px 0 rgba(11, 13, 18, 0.02);
}
.missing-card__icon {
  grid-row: 1 / 3;
  grid-column: 1 / 2;
  width: 30px; height: 30px;
  border-radius: 9px;
  background: var(--warn-soft, #fff9e7);
  color: var(--warn-ink, #dd7d02);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-top: 1px;
}
.missing-card__title {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  font-size: var(--fs-body);
  font-weight: 600;
  color: var(--label);
  line-height: 1.3;
  letter-spacing: -0.005em;
  word-break: keep-all;
}
.missing-card__reason {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.88;
  line-height: 1.5;
  word-break: keep-all;
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 3; -webkit-box-orient: vertical; overflow: hidden;
}
.missing-block__more {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.65;
  padding: 4px 2px 0;
  line-height: 1.45;
}

/* Legacy compact row (아직 다른 곳에서 쓰는 경우 대비) */
.inset-row.missing-row {
  display: grid;
  grid-template-columns: 14px 1fr;
  grid-template-rows: auto auto;
  align-items: start;
  gap: 2px 10px;
  padding: 12px 16px;
  cursor: default;
  min-height: 0;
}
.missing-row__dot {
  grid-row: 1 / 2;
  grid-column: 1 / 2;
  width: 6px; height: 6px;
  border-radius: 50%;
  background: var(--label-secondary);
  opacity: 0.45;
  margin-top: 9px;
  justify-self: center;
}
.missing-row__title {
  grid-row: 1 / 2;
  grid-column: 2 / 3;
  font-size: var(--fs-body);
  color: var(--label);
  font-weight: 500;
  line-height: 1.35;
  white-space: normal;
  word-break: keep-all;
}
.missing-row__reason {
  grid-row: 2 / 3;
  grid-column: 2 / 3;
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.75;
  line-height: 1.4;
  white-space: normal;
  word-break: keep-all;
  text-wrap: pretty;
  display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; overflow: hidden;
}

/* ---------- Tab bar ---------- */
.tabbar {
  position: absolute;
  left: 0; right: 0;
  /* Safe Area: 노치 단말 홈 인디케이터(~34px) 혹은 env(safe-area-inset-bottom) 중
     큰 값만큼 탭바를 위로 띄워요. 데스크톱에선 sa-bottom=0 이라 최소값이
     적용되는데, 너무 낮게 붙어 보인다는 피드백으로 44px 로 상향.                */
  bottom: max(44px, var(--sa-bottom, 0px));
  height: var(--tabbar-h);
  display: flex;
  background: color-mix(in srgb, var(--surface) 82%, transparent);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-top: 0.5px solid var(--separator);
  z-index: 50;
}
.tab {
  flex: 1;
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 2px;
  border: 0; background: transparent;
  color: var(--label-secondary);
  opacity: 0.55;
  font-size: 10px;
  font-weight: 500;
  letter-spacing: 0.01em;
  cursor: pointer;
  padding-top: 4px;
}
.tab svg { width: 25px; height: 25px; }
.tab.is-active { color: var(--brand); opacity: 1; }
.tab--fab {
  position: relative;
}
.tab-fab {
  position: absolute;
  top: -22px;
  /* 가운데 정렬은 left+margin 으로 layout 단계에서 고정한다.
     이전엔 transform: translateX(-50%) 로 잡았는데, :active 에서 scale(0.94) 가
     같이 transform 으로 들어가면서 width 가 줄어 → translateX 의 base 가 바뀌어
     1~2px 옆으로 흔들리는 문제 발생. layout 으로 고정하면 transform 은 scale
     전용이라 흔들림 없음. */
  left: 50%;
  margin-left: -27px;       /* width 54 / 2 */
  width: 54px; height: 54px;
  border-radius: 27px;
  background: var(--brand);
  color: #fff;
  border: 0;
  display: grid; place-items: center;
  box-shadow: 0 6px 20px rgba(59, 61, 191, 0.40), 0 2px 4px rgba(59, 61, 191, 0.20);
  cursor: pointer;
  transform: scale(1);
  transform-origin: center center;
  transition: transform var(--dur-1) var(--ease), background var(--dur-1) var(--ease);
  will-change: transform;
}
.tab-fab:active { transform: scale(0.94); background: var(--brand-hover); }
.tab-fab svg { width: 26px; height: 26px; }

/* ---------- Buttons (HIG) — DEPRECATED ----------
 * Task #127 이후 신규 버튼은 TDS `Button` 컴포넌트(`.tds-button`) 를 사용해요.
 * 이 블록은 기존 .btn / .btn--filled / .btn--tinted / .btn--gray / .btn--plain /
 * .btn--destructive / .btn--block / .btn--large 호출처가 모두 정리될 때까지
 * 호환을 위해 유지합니다. 정리 작업은 Task #128 에서 진행.
 *
 *   .btn--filled       → <Button color="primary" variant="fill">
 *   .btn--tinted       → <Button color="primary" variant="weak">
 *   .btn--gray         → <Button color="dark"    variant="weak">
 *   .btn--destructive  → <Button color="danger"  variant="fill">
 *   .btn--plain        → <Button color="primary" variant="weak"> + 배경 투명 override
 *   .btn--large        → size="large"  (xlarge 가 신규 기본)
 *   .btn--block        → display="block"
 * ----------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  min-height: 44px;
  padding: 0 20px;
  border: 0;
  border-radius: var(--r-md);
  font-family: inherit;
  font-size: var(--fs-body);
  font-weight: var(--w-headline);
  letter-spacing: -0.02em;
  cursor: pointer;
  white-space: nowrap;
  word-break: keep-all;
  transition: background var(--dur-1) var(--ease), opacity var(--dur-1) var(--ease), transform var(--dur-1) var(--ease);
}
.btn:active { opacity: 0.88; transform: scale(0.98); }
.btn--filled { background: var(--brand); color: #fff; }
.btn--filled:active { background: var(--brand-hover); }
.btn--filled:disabled {
  background: var(--fill-2);
  color: var(--label-secondary);
  opacity: 0.45;
  cursor: not-allowed;
}
.btn--tinted { background: var(--brand-soft); color: var(--brand); }
.btn--gray   { background: var(--fill-2); color: var(--label); }
.btn--plain  { background: transparent; color: var(--brand); }
.btn--destructive { background: var(--alert); color: #fff; }
.btn--block  { width: 100%; }
.btn--large  { min-height: 50px; font-size: var(--fs-headline); border-radius: 14px; }

/* ---------- Pill / Badge ---------- */
.pill {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 9px;
  background: var(--fill-2);
  color: var(--label-secondary);
  border-radius: var(--r-pill);
  font-size: var(--fs-caption1);
  font-weight: 500;
  letter-spacing: -0.01em;
  line-height: 1;
}
.pill--alert { background: var(--alert-soft); color: var(--alert); }
.pill--warn  { background: var(--warn-soft);  color: var(--warn); }
.pill--safe  { background: var(--safe-soft);  color: var(--safe); }
.pill--brand { background: var(--brand-soft); color: var(--brand); }

/* ---------- Card (standard grouped) ---------- */
.card {
  background: var(--bg-2);
  border-radius: var(--r-lg);
  padding: 16px;
}

/* ---------- Sheet (HIG detent sheet) ---------- */
.sheet-root {
  position: absolute; inset: 0; z-index: 1000;
  pointer-events: none;
}
.sheet-root.is-open { pointer-events: auto; }
.sheet-root__backdrop {
  position: absolute; inset: 0;
  background: rgba(0, 0, 0, 0.35);
  opacity: 0;
  transition: opacity var(--dur-2) var(--ease);
}
.sheet-root.is-open .sheet-root__backdrop { opacity: 1; }

.sheet {
  position: absolute; left: 0; right: 0; bottom: 0;
  background: var(--bg-2);
  border-radius: var(--r-2xl) var(--r-2xl) 0 0;
  transform: translateY(100%);
  transition: transform var(--dur-3) var(--ease-spring);
  max-height: 88%;
  display: flex; flex-direction: column;
  padding-bottom: var(--sa-bottom);
  overflow: hidden;
}
.sheet-root.is-open .sheet { transform: translateY(0); }
.sheet__grabber {
  padding: 5px 0 0;
  display: flex; justify-content: center;
  flex-shrink: 0;
}
.sheet__grabber::before {
  content: "";
  width: 36px; height: 5px; border-radius: 3px;
  background: var(--fill-1);
}
.sheet__header {
  padding: 14px 20px 12px;
  display: flex; align-items: center; justify-content: space-between;
  flex-shrink: 0;
}
.sheet__title {
  font-size: var(--fs-headline);
  font-weight: var(--w-headline);
  white-space: nowrap;
  color: var(--label);
  margin: 0;
}
.sheet__body {
  padding: 0 20px 20px;
  overflow-y: auto;
}

/* Action sheet list (iOS style) */
.actionsheet {
  margin: 8px 8px calc(8px + var(--sa-bottom));
  display: flex; flex-direction: column; gap: 8px;
}
.actionsheet__group {
  background: color-mix(in srgb, var(--bg-2) 82%, transparent);
  backdrop-filter: saturate(180%) blur(24px);
  -webkit-backdrop-filter: saturate(180%) blur(24px);
  border-radius: var(--r-lg);
  overflow: hidden;
}
.actionsheet__action {
  width: 100%;
  min-height: 57px;
  border: 0; background: transparent;
  color: var(--ios-blue);
  font-family: inherit;
  font-size: 20px;
  font-weight: 400;
  letter-spacing: -0.02em;
  cursor: pointer;
  padding: 0 16px;
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
}
.actionsheet__action:active { background: var(--fill-3); }
.actionsheet__action + .actionsheet__action {
  border-top: 0.5px solid var(--separator);
}
.actionsheet__action--cancel { font-weight: var(--w-headline); }
.actionsheet__action--destructive { color: var(--alert); }
.actionsheet__action-meta {
  font-size: var(--fs-subhead);
  color: var(--label-secondary); opacity: 0.6;
}

/* ---------- Progress (analysis) ---------- */
.progress-track {
  width: 100%; height: 4px;
  background: var(--fill-3);
  border-radius: 2px;
  overflow: hidden;
}
.progress-fill {
  height: 100%;
  background: var(--brand);
  border-radius: 2px;
  transition: width var(--dur-3) var(--ease);
}

/* ---------- Search ---------- */
.searchfield {
  margin: 0 20px 10px;
  display: flex; align-items: center; gap: 6px;
  height: 36px;
  padding: 0 8px 0 28px;
  background: var(--fill-2);
  border-radius: 10px;
  position: relative;
  color: var(--label-secondary);
  opacity: 0.8;
}
.searchfield svg { position: absolute; left: 8px; opacity: 0.6; }
.searchfield input {
  border: 0; background: transparent; outline: none;
  font-family: inherit; font-size: var(--fs-body);
  flex: 1; color: var(--label);
}

/* ---------- Empty state ---------- */
.empty {
  text-align: center;
  padding: 48px 24px;
  color: var(--label-secondary);
}
.empty__icon {
  width: 52px; height: 52px;
  margin: 0 auto 16px;
  border-radius: 14px;
  background: var(--fill-3);
  display: grid; place-items: center;
  color: var(--label-secondary); opacity: 0.6;
}
.empty__title {
  font-size: var(--fs-headline);
  font-weight: var(--w-headline);
  color: var(--label);
  margin: 0 0 4px;
}
.empty__body {
  font-size: var(--fs-footnote);
  color: var(--label-secondary);
  opacity: 0.7;
  line-height: 1.4;
  max-width: 240px;
  margin: 0 auto;
}

/* ---------- Haptic tap visual ---------- */
@keyframes tap-flash {
  0% { transform: scale(1); }
  40% { transform: scale(0.94); }
  100% { transform: scale(1); }
}
.tap:active { animation: tap-flash 180ms var(--ease); }

/* =============================================================================
 * TDS Badge
 *  · 상태를 빠르게 인식할 수 있도록 항목을 강조
 *  · size: xsmall / small / medium / large
 *  · variant: fill (채도↑) / weak (채도↓)
 *  · color: blue / teal / green / red / yellow / elephant
 * ========================================================================== */
.badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  border-radius: 999px;                 /* pill */
  font-family: inherit;
  font-weight: var(--w-semibold);       /* Toss Badge 는 Semibold 기본 */
  letter-spacing: -0.01em;
  white-space: nowrap;
  word-break: keep-all;
  line-height: 1;                       /* 정확한 높이 제어는 padding 으로 */
}

/* ---- Size ---- */
.badge--xsmall {
  font-size: var(--sub-ty-10-fs);       /* 11/15 */
  padding: 3px 6px;
  min-height: 17px;
}
.badge--small {
  font-size: var(--sub-ty-9-fs);        /* 12/17 */
  padding: 3px 7px;
  min-height: 20px;
}
.badge--medium {
  font-size: var(--sub-ty-8-fs);        /* 13/19 */
  padding: 4px 8px;
  min-height: 24px;
}
.badge--large {
  font-size: var(--ty-6-fs);            /* 15/22 */
  padding: 5px 10px;
  min-height: 28px;
}

/* ---- Fill variant — 짙은 바탕에 흰 글자 ---- */
.badge--fill-blue     { background: var(--tds-blue-500);   color: #ffffff; }
.badge--fill-teal     { background: var(--tds-teal-500);   color: #ffffff; }
.badge--fill-green    { background: var(--tds-green-500);  color: #ffffff; }
.badge--fill-red      { background: var(--tds-red-500);    color: #ffffff; }
.badge--fill-yellow   { background: var(--tds-yellow-500); color: #0b0b0c; } /* 노랑은 검정 글씨로 대비 확보 */
.badge--fill-elephant { background: var(--tds-grey-600);   color: #ffffff; }

/* ---- Weak variant — 옅은 배경에 짙은 글자 ---- */
.badge--weak-blue     { background: var(--tds-blue-50);    color: var(--tds-blue-700); }
.badge--weak-teal     { background: var(--tds-teal-50);    color: var(--tds-teal-700); }
.badge--weak-green    { background: var(--tds-green-50);   color: var(--tds-green-700); }
.badge--weak-red      { background: var(--tds-red-50);     color: var(--tds-red-700); }
.badge--weak-yellow   { background: var(--tds-yellow-50);  color: var(--tds-yellow-900); }
.badge--weak-elephant { background: var(--tds-grey-100);   color: var(--tds-grey-700); }

/* =============================================================================
 * TDS Border
 *  · 요소 간 구분선(full/padding24) 또는 구간 나눔 스페이서(height16)
 *  · 색은 --separator, 굵기는 1px (시각적으로 0.5~1px hairline)
 *  · variant 기본 "full"
 * ========================================================================== */
.border {
  /* 기본 hairline — full 의 시각 기본 */
  display: block;
  border: 0;
  height: 0;
  border-top: 0.5px solid var(--separator);
}
.border--full {
  /* 추가 속성 없음 — 위 .border 가 이미 full */
}
.border--padding24 {
  margin: 0 24px;   /* 좌우 24px 안쪽으로 들여 그림 */
}
.border--height16 {
  /* 구간 나눔 — 투명한 공간만 차지, 선은 없음 */
  border-top: 0;
  height: 16px;     /* 기본 16px, height prop 으로 오버라이드 가능 */
  background: transparent;
}

/* =============================================================================
 * TDS BoardRow
 *  · Q&A 등 공간이 제한된 곳에서 정보를 아코디언 형태로 묶어 표시
 *  · 구조: <div.board-row> > <button.board-row__head> + <div.board-row__content>
 *  · 헤더: prefix(선택) + title + icon(선택)
 *  · 콘텐츠: BoardRow.Text(=Post.Paragraph) 또는 자유 children
 * ========================================================================== */
.board-row {
  border-bottom: 0.5px solid var(--separator);
}
.board-row:last-child { border-bottom: 0; }

.board-row__head {
  width: 100%;
  border: 0;
  background: transparent;
  text-align: left;
  padding: 14px 16px;
  display: flex;
  align-items: center;
  gap: 8px;                 /* prefix 와 title 사이 간격 (스펙: 8px) */
  cursor: pointer;
  font-family: inherit;
  color: var(--label);
  transition: background 140ms;
}
.board-row__head:active { background: var(--fill-3); }

.board-row__prefix {
  flex-shrink: 0;
  /* 색/굵기/사이즈는 BoardRow.Prefix 가 inline style 로 주입 */
}

.board-row__title {
  flex: 1;
  min-width: 0;
  font-size: var(--ty-6-fs);     /* 15/22 — TDS 본문 표준 */
  line-height: var(--ty-6-lh);
  font-weight: var(--w-medium);
  letter-spacing: -0.01em;
  text-wrap: pretty;
  word-break: keep-all;
  color: var(--label);
}

.board-row__icon {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  color: var(--tds-grey-400);    /* 스펙 기본 adaptive.grey400 */
  transition: transform 200ms cubic-bezier(0.22, 0.8, 0.3, 1),
              color 140ms;
}
.board-row.is-open .board-row__icon {
  /* ArrowIcon 은 right→down 으로 90도 회전 */
  transform: rotate(90deg);
  color: var(--brand);
}

.board-row__content {
  padding: 0 16px 14px;
  /* BoardRow.Text 의 typography 가 inline style 로 사이즈 주입.
     기본 색은 본문 보조색으로. */
  color: var(--label-secondary);
  text-wrap: pretty;
  word-break: keep-all;
  animation: board-row-expand 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
}
@keyframes board-row-expand {
  0%   { opacity: 0; transform: translateY(-4px); }
  100% { opacity: 1; transform: translateY(0); }
}

/* BoardRow.Text — inline 스타일로 typography 토큰 주입되지만 fallback */
.board-row__text {
  font-size: var(--ty-6-fs);     /* default typography="t6" */
  line-height: var(--ty-6-lh);
  font-weight: var(--w-regular);
  margin: 0;
}

/* =============================================================================
 * TDS BottomInfo
 *  · 화면 하단의 면책/디스클레이머 영역
 *  · backgroundImage 는 BottomInfo.jsx 에서 inline 으로 주입(기본: --bg → transparent)
 *  · 패딩/타이포/색만 토큰으로 책임짐 — 위치/스크롤은 부모 컨테이너 몫
 * ========================================================================== */
.bottom-info {
  /* 위쪽은 그라디언트가 자연스럽게 시작될 수 있도록 padding 으로 여유.
     아래쪽은 iOS 홈 인디케이터 영역까지 안전하게 떨어지도록 safe-area 합산. */
  padding: 24px 24px calc(20px + env(safe-area-inset-bottom, 0px));
  color: var(--label-secondary);
  font-size: var(--ty-7-fs);
  line-height: var(--ty-7-lh);
  font-weight: var(--w-regular);
  /* backgroundImage 는 inline style 로 주입 — 여기선 fallback 만 깔아둠. */
  background-color: transparent;
  background-repeat: no-repeat;
  background-size: 100% 100%;
}

/* BottomInfo 내부의 평문 문단/리스트가 토큰을 따라가도록 기본값 정리.
   Post 컴포넌트가 들어오면 그쪽이 우선해서 더 정밀한 제어를 가져갈 거예요. */
.bottom-info p {
  margin: 0 0 6px;
}
.bottom-info p:last-child { margin-bottom: 0; }

.bottom-info ul {
  margin: 0;
  padding: 0;
  list-style: none;
}
.bottom-info li {
  position: relative;
  padding-left: 12px;
  margin: 0 0 6px;
  text-wrap: pretty;
  word-break: keep-all;
}
.bottom-info li:last-child { margin-bottom: 0; }
.bottom-info li::before {
  content: "•";
  position: absolute;
  left: 0;
  top: 0;
  color: var(--label-secondary);
  opacity: 0.7;
}

/* =============================================================================
 * TDS BottomSheet
 *  · 화면 하단 슬라이드업 패널 + 딤 + (선택) Header / HeaderDescription / CTA
 *  · root(.bottom-sheet-root) 가 absolute 로 부모(.app/.web-viewport) 를 덮음
 *  · sheet(.bottom-sheet) 는 transform 으로 슬라이드, max-height 는 inline style
 *  · safe-area-inset-bottom 합산 — iOS 홈 인디케이터 안전구역 자동 반영
 *  · 모든 색/사이즈는 토큰 참조
 * ========================================================================== */
.bottom-sheet-root {
  position: absolute;
  inset: 0;
  z-index: 1000;
  pointer-events: none;
  /* 닫혀 있을 때는 overflow 가 sheet 를 viewport 밖으로 안전하게 숨겨줌 */
  overflow: hidden;
}
.bottom-sheet-root.is-open { pointer-events: auto; }

.bottom-sheet-root__dimmer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.45);
  opacity: 0;
  transition: opacity 240ms cubic-bezier(0.32, 0.72, 0, 1);
}
.bottom-sheet-root.is-open .bottom-sheet-root__dimmer { opacity: 1; }

.bottom-sheet {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88%;
  background: var(--bg);
  border-radius: 20px 20px 0 0;
  box-shadow: 0 -2px 24px rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 320ms cubic-bezier(0.22, 0.8, 0.3, 1),
              max-height 220ms cubic-bezier(0.22, 0.8, 0.3, 1);
  overflow: hidden;
  /* 본문 스크롤 영역의 마지막 자식이 safe-area 위로 떨어지도록 padding 합산.
     CTA 가 있을 땐 CTA 영역이 직접 safe-area 를 처리. */
  padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bottom-sheet--has-cta {
  /* CTA 영역이 자체적으로 safe-area 를 책임지므로 시트 본체 padding 은 0. */
  padding-bottom: 0;
}
.bottom-sheet-root.is-open .bottom-sheet {
  transform: translateY(0);
}
.bottom-sheet--expanded {
  /* 확장 상태 — JSX 에서 max-height 를 expandedMaxHeight 로 inline 적용 */
  border-radius: 0;
}

/* 그래버(상단 핸들) — 시각적으로 드래그 가능함을 알림 */
.bottom-sheet__handle {
  flex-shrink: 0;
  padding: 6px 0 4px;
  display: flex;
  justify-content: center;
  cursor: grab;
  touch-action: none;
}
.bottom-sheet__grabber {
  display: block;
  width: 36px;
  height: 5px;
  border-radius: 3px;
  background: var(--tds-grey-300);
}

/* Header / HeaderDescription 영역 (시트 상단 고정) */
.bottom-sheet__header-area {
  flex-shrink: 0;
  padding: 8px 24px 4px;
}

.bottom-sheet-header {
  /* TDS 스펙: 기본 t4 (19/28). 굵기는 semibold. */
  margin: 0;
  font-size: var(--ty-4-fs);
  line-height: var(--ty-4-lh);
  font-weight: var(--w-semibold);
  letter-spacing: -0.02em;
  color: var(--label);
  text-wrap: pretty;
  word-break: keep-all;
}

.bottom-sheet-header-desc {
  /* TDS 스펙: 기본 t6 (15/22). 보조색. */
  margin: 6px 0 0;
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-regular);
  color: var(--label-secondary);
  text-wrap: pretty;
  word-break: keep-all;
}

/* 본문 (스크롤 영역) */
.bottom-sheet__body {
  flex: 1;
  min-height: 0;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 12px 24px 20px;
}

/* CTA 영역 — 시트 하단 고정. safe-area 합산. */
.bottom-sheet__cta-area {
  flex-shrink: 0;
  padding: 8px 20px calc(12px + env(safe-area-inset-bottom, 0px));
  background: var(--bg);
  /* 본문 스크롤 끝에서 CTA 와의 경계가 너무 또렷하지 않도록 위쪽 살짝 그라디언트 */
  background-image:
    linear-gradient(to top, var(--bg) 70%, rgba(255, 255, 255, 0));
  background-size: 100% 100%;
}

.bottom-sheet-cta {
  /* btn--filled/large/block 가 이미 모양을 책임짐 — 추가 스타일 없음 */
}

/* DoubleCTA — 좌우 2분할 */
.bottom-sheet-double-cta {
  display: flex;
  gap: 8px;
  width: 100%;
}
.bottom-sheet-double-cta__left,
.bottom-sheet-double-cta__right {
  flex: 1;
  min-width: 0;
}
.bottom-sheet-double-cta__left .btn,
.bottom-sheet-double-cta__right .btn,
.bottom-sheet-double-cta__left .tds-button,
.bottom-sheet-double-cta__right .tds-button {
  width: 100%;
}

/* Select — iOS 라디오 리스트 */
.bottom-sheet-select {
  list-style: none;
  margin: 0;
  padding: 0;
}
.bottom-sheet-select__option {
  position: relative;
  opacity: 0;
  transform: translateY(8px);
  animation: bottom-sheet-select-in 280ms cubic-bezier(0.22, 0.8, 0.3, 1) forwards;
}
.bottom-sheet-select__option + .bottom-sheet-select__option {
  border-top: 0.5px solid var(--separator);
}
@keyframes bottom-sheet-select-in {
  to { opacity: 1; transform: translateY(0); }
}

.bottom-sheet-select__label {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 4px;
  cursor: pointer;
  min-height: 48px;
  -webkit-tap-highlight-color: transparent;
}
.bottom-sheet-select__option.is-disabled .bottom-sheet-select__label {
  cursor: not-allowed;
  opacity: 0.4;
}
.bottom-sheet-select__option.is-checked .bottom-sheet-select__name {
  font-weight: var(--w-semibold);
  color: var(--brand);
}

.bottom-sheet-select__radio {
  /* 시각적으로 숨기되 키보드/스크린리더에는 노출 */
  position: absolute;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0);
  white-space: nowrap; border: 0;
}
.bottom-sheet-select__name {
  flex: 1;
  font-size: var(--ty-5-fs);
  line-height: var(--ty-5-lh);
  font-weight: var(--w-regular);
  color: var(--label);
  letter-spacing: -0.01em;
}
.bottom-sheet-select__check {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--brand);
}

/* =============================================================================
 * TDS Bubble
 *  · 대화형 메시지 말풍선. background 로 주체(나=blue / 상대방=grey)를 구분.
 *  · withTail=true 면 blue 는 우측 하단, grey 는 좌측 하단에 꼬리가 붙어요.
 *  · 정렬(좌/우)은 호출부의 flex 컨테이너 책임 — 컴포넌트 안에서는 처리하지
 *    않아요. (TDS 원본 예시 계약과 동일.)
 *  · 꼬리는 두 개의 ::before/::after 의사요소로 만들어요. 하나는 본체와 같은
 *    배경색의 둥근 사각형으로 꼬리 윤곽을, 또 하나는 페이지 배경색(--bg) 의
 *    원으로 안쪽을 깎아내서 iOS 스타일 곡선 꼬리를 만듭니다.
 * ========================================================================== */
.bubble {
  position: relative;
  display: inline-block;
  max-width: 75%;
  padding: 9px 14px;
  border-radius: 18px;
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-regular);
  letter-spacing: -0.01em;
  word-break: break-word;
  overflow-wrap: anywhere;
}
.bubble__content {
  position: relative;
  z-index: 1;          /* 꼬리 의사요소 위에 텍스트가 올라오도록 */
  white-space: pre-wrap;
}

/* ---- 색 ---- */
.bubble--blue {
  background: var(--brand);
  color: #ffffff;
}
.bubble--grey {
  background: var(--tds-grey-100);
  color: var(--label);
}

/* ---- 꼬리 (withTail=true) ---- */
/* blue: 우측 하단 */
.bubble--blue.bubble--tail {
  border-bottom-right-radius: 6px;
}
.bubble--blue.bubble--tail::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -7px;
  width: 18px;
  height: 17px;
  background: var(--brand);
  border-bottom-left-radius: 16px 14px;
}
.bubble--blue.bubble--tail::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  right: -10px;
  width: 10px;
  height: 17px;
  background: var(--bg);
  border-bottom-left-radius: 10px;
}

/* grey: 좌측 하단 */
.bubble--grey.bubble--tail {
  border-bottom-left-radius: 6px;
}
.bubble--grey.bubble--tail::before {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -7px;
  width: 18px;
  height: 17px;
  background: var(--tds-grey-100);
  border-bottom-right-radius: 16px 14px;
}
.bubble--grey.bubble--tail::after {
  content: "";
  position: absolute;
  z-index: 0;
  bottom: 0;
  left: -10px;
  width: 10px;
  height: 17px;
  background: var(--bg);
  border-bottom-right-radius: 10px;
}

/* =============================================================================
 * TDS Button (2026-03)
 *  · 기존 .btn (HIG) 의 후속. 4 size × 4 color × 2 variant × 3 display + loading.
 *  · 색상 속성은 모두 CSS 변수로 외부 오버라이드 가능:
 *      --button-color, --button-background-color,
 *      --button-disabled-opacity-color, --button-disabled-text-opacity,
 *      --button-gradient-color, --button-loader-color,
 *      --button-loading-background-color, --button-loading-opacity,
 *      --button-pressed-background-color, --button-pressed-opacity
 *  · 기본값은 .tds-button--{color}.tds-button--{variant} 가 정의. 호출부 style
 *    에서 덮어쓰면 같은 변수 경로로 인라인 override.
 * ========================================================================== */

.tds-button {
  /* 기본값 — color×variant 클래스가 필요에 따라 덮어씀 */
  --button-color: #ffffff;
  --button-background-color: var(--brand);
  --button-pressed-background-color: #000000;
  --button-pressed-opacity: 0.08;
  --button-disabled-opacity-color: 0.4;
  --button-disabled-text-opacity: 1;
  --button-loader-color: currentColor;
  --button-loading-background-color: rgba(0, 0, 0, 0.1);
  --button-loading-opacity: 1;
  --button-gradient-color: transparent;

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  border: 0;
  border-radius: 12px;
  font-family: inherit;
  letter-spacing: -0.01em;
  white-space: nowrap;
  word-break: keep-all;
  cursor: pointer;
  text-decoration: none;
  user-select: none;
  color: var(--button-color);
  background-color: var(--button-background-color);
  transition:
    background-color var(--dur-1) var(--ease),
    color var(--dur-1) var(--ease),
    opacity var(--dur-1) var(--ease),
    transform var(--dur-1) var(--ease);
  overflow: hidden;     /* 라운드 바깥으로 딤 레이어가 튀어나오지 않게 */
}
.tds-button__label {
  position: relative;
  z-index: 2;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-weight: var(--w-semibold);
}

/* pressed 딤 — 항상 깔아두고 opacity 로 토글 */
.tds-button::after {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--button-pressed-background-color);
  opacity: 0;
  transition: opacity 120ms var(--ease);
  pointer-events: none;
  z-index: 1;
}
.tds-button:active::after {
  opacity: var(--button-pressed-opacity);
}
/* 링크(as="a") 에도 active 적용 */
.tds-button:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}

/* ---- Size ---- */
.tds-button--small {
  min-height: 32px;
  padding: 0 12px;
  border-radius: 8px;
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
}
.tds-button--medium {
  min-height: 40px;
  padding: 0 16px;
  border-radius: 10px;
  font-size: var(--ty-5-fs);
  line-height: var(--ty-5-lh);
}
.tds-button--large {
  min-height: 48px;
  padding: 0 20px;
  border-radius: 12px;
  font-size: var(--ty-4-fs);
  line-height: var(--ty-4-lh);
}
.tds-button--xlarge {
  min-height: 56px;
  padding: 0 24px;
  border-radius: 14px;
  font-size: var(--ty-4-fs);
  line-height: var(--ty-4-lh);
}

/* ---- Display ---- */
.tds-button--inline { width: auto; }
.tds-button--block  { display: flex; width: 100%; }
.tds-button--full   { display: flex; width: 100%; }  /* 시각적으로 block 과 동일 */

/* ---- Color × Variant ---- */
/* primary / fill */
.tds-button--primary.tds-button--fill {
  --button-background-color: var(--brand);
  --button-color: #ffffff;
  --button-loading-background-color: rgba(0, 0, 0, 0.18);
}
/* primary / weak */
.tds-button--primary.tds-button--weak {
  --button-background-color: var(--brand-soft);
  --button-color: var(--brand);
  --button-pressed-background-color: var(--brand);
  --button-pressed-opacity: 0.08;
  --button-loading-background-color: rgba(49, 130, 246, 0.12);
}
/* danger / fill */
.tds-button--danger.tds-button--fill {
  --button-background-color: var(--alert);
  --button-color: #ffffff;
  --button-loading-background-color: rgba(0, 0, 0, 0.18);
}
/* danger / weak */
.tds-button--danger.tds-button--weak {
  --button-background-color: var(--alert-soft);
  --button-color: var(--alert);
  --button-pressed-background-color: var(--alert);
  --button-pressed-opacity: 0.08;
  --button-loading-background-color: rgba(245, 42, 63, 0.12);
}
/* dark / fill */
.tds-button--dark.tds-button--fill {
  --button-background-color: var(--label);
  --button-color: #ffffff;
  --button-pressed-background-color: #ffffff;
  --button-pressed-opacity: 0.12;
}
/* dark / weak */
.tds-button--dark.tds-button--weak {
  --button-background-color: var(--tds-grey-100);
  --button-color: var(--label);
  --button-pressed-background-color: #000000;
  --button-pressed-opacity: 0.08;
}
/* light / fill  (brand 색 배경 위에서 사용) */
.tds-button--light.tds-button--fill {
  --button-background-color: #ffffff;
  --button-color: var(--brand);
  --button-pressed-background-color: #000000;
  --button-pressed-opacity: 0.08;
}
/* light / weak  (brand 색 배경 위에서 반투명 흰색) */
.tds-button--light.tds-button--weak {
  --button-background-color: rgba(255, 255, 255, 0.16);
  --button-color: #ffffff;
  --button-pressed-background-color: #ffffff;
  --button-pressed-opacity: 0.1;
}

/* ---- Disabled ---- */
.tds-button.is-disabled,
.tds-button:disabled,
.tds-button[aria-disabled="true"] {
  cursor: not-allowed;
  opacity: var(--button-disabled-opacity-color);
}
.tds-button.is-disabled .tds-button__label,
.tds-button:disabled .tds-button__label,
.tds-button[aria-disabled="true"] .tds-button__label {
  opacity: var(--button-disabled-text-opacity);
}
/* disabled 시 pressed 애니메이션 차단 */
.tds-button.is-disabled:active,
.tds-button:disabled:active,
.tds-button[aria-disabled="true"]:active {
  transform: none;
}
.tds-button.is-disabled:active::after,
.tds-button:disabled:active::after,
.tds-button[aria-disabled="true"]:active::after {
  opacity: 0;
}

/* ---- Loading ---- */
.tds-button.is-loading {
  cursor: progress;
}
.tds-button.is-loading .tds-button__label {
  visibility: hidden;     /* 너비 유지를 위해 visibility */
}
/* 로딩 딤 레이어 — ::before 사용 (::after 는 pressed 용) */
.tds-button.is-loading::before {
  content: "";
  position: absolute;
  inset: 0;
  background-color: var(--button-loading-background-color);
  opacity: var(--button-loading-opacity);
  pointer-events: none;
  z-index: 1;
}
.tds-button__loader {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: inline-flex;
  align-items: center;
  gap: 4px;
  z-index: 3;
}
.tds-button__dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--button-loader-color);
  animation: tds-button-dot 1s infinite ease-in-out;
}
.tds-button__dot:nth-child(2) { animation-delay: 0.15s; }
.tds-button__dot:nth-child(3) { animation-delay: 0.30s; }

@keyframes tds-button-dot {
  0%, 80%, 100% { opacity: 0.3; transform: translateY(0); }
  40%           { opacity: 1;   transform: translateY(-3px); }
}

/* =============================================================================
 * TDS Checkbox
 *  · 시각: --checkbox-size (기본 24px)
 *  · 변형: .tds-checkbox--circle (원형 박스 + 체크) / .tds-checkbox--line
 *          (체크 아이콘만)
 *  · 상태: .is-checked, .is-disabled, .is-shake
 *  · 숨겨진 input 은 opacity 0 으로 라벨 위에 깔아 클릭/포커스/폼 전송을
 *    자연스럽게 처리. 시각 요소(.tds-checkbox__visual) 가 보이는 박스/체크.
 * ========================================================================== */
.tds-checkbox {
  --checkbox-size: 24px;
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: var(--checkbox-size);
  height: var(--checkbox-size);
  cursor: pointer;
  user-select: none;
  flex-shrink: 0;
  vertical-align: middle;
}
.tds-checkbox__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
  z-index: 1;       /* 시각 위에 깔아 클릭 캡처 */
}
.tds-checkbox__visual {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  border-radius: 4px;       /* 기본 — circle 에서 50% 로 덮어씀 */
  background: transparent;
  color: var(--tds-grey-300);
  transition:
    color 120ms var(--ease),
    background-color 120ms var(--ease),
    border-color 120ms var(--ease);
  z-index: 0;
}
.tds-checkbox__icon {
  width: 80%;
  height: 80%;
}

/* ---- Variant: Circle ---- */
.tds-checkbox--circle .tds-checkbox__visual {
  border-radius: 50%;
  background: transparent;
  border: 1.5px solid var(--tds-grey-300);
  color: #ffffff;
}
.tds-checkbox--circle .tds-checkbox__icon { display: none; }
.tds-checkbox--circle.is-checked .tds-checkbox__visual {
  background: var(--brand);
  border-color: var(--brand);
  color: #ffffff;
}
.tds-checkbox--circle.is-checked .tds-checkbox__icon { display: block; }

/* ---- Variant: Line ---- */
.tds-checkbox--line .tds-checkbox__visual {
  background: transparent;
  border: 0;
  color: var(--brand);
}
.tds-checkbox--line .tds-checkbox__icon { display: none; }
.tds-checkbox--line.is-checked .tds-checkbox__icon { display: block; }

/* ---- Disabled ---- */
.tds-checkbox.is-disabled {
  cursor: not-allowed;
}
.tds-checkbox.is-disabled .tds-checkbox__visual {
  opacity: 0.4;
}

/* ---- Focus ring ---- */
.tds-checkbox__input:focus-visible + .tds-checkbox__visual {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
  border-radius: 50%;
}
.tds-checkbox--line .tds-checkbox__input:focus-visible + .tds-checkbox__visual {
  border-radius: 6px;
}

/* ---- Shake (disabled 클릭 시) ---- */
@keyframes tds-checkbox-shake {
  0%, 100% { transform: translateX(0); }
  20%      { transform: translateX(-3px); }
  40%      { transform: translateX(3px); }
  60%      { transform: translateX(-2px); }
  80%      { transform: translateX(2px); }
}
.tds-checkbox.is-shake .tds-checkbox__visual {
  animation: tds-checkbox-shake 350ms ease-in-out;
}

/* =============================================================================
 * TDS GridList
 *  · 그리드 형태로 GridList.Item 들을 배치.
 *  · column: 1 | 2 | 3 (기본 3)
 *  · Item 은 <li> 로 렌더, 이미지 + 텍스트(Paragraph) 세로 스택.
 *  · 1열(col-1) 은 가로 스택(이미지 좌, 텍스트 우)으로 자동 전환 — 중요도 높은
 *    단일 메뉴를 강조할 때 자연스러워요.
 *  · onClick 이 있으면 .is-clickable 이 붙고 role="button" + tabIndex=0 +
 *    Enter/Space 키보드 핸들러가 활성화돼요.
 *  · 모바일 터치 시 scale(0.95) 로 확대/축소 피드백 (TDS 스펙의 "확대 효과").
 * ========================================================================== */
.tds-gridlist {
  display: grid;
  list-style: none;
  margin: 0;
  padding: 0;
  width: 100%;
  grid-template-columns: repeat(3, 1fr);
  gap: 0;
}
.tds-gridlist--col-1 { grid-template-columns: 1fr; }
.tds-gridlist--col-2 { grid-template-columns: repeat(2, 1fr); }
.tds-gridlist--col-3 { grid-template-columns: repeat(3, 1fr); }

.tds-gridlist-item {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: flex-start;
  gap: 8px;
  padding: 12px 8px;
  background: transparent;
  border: 0;
  color: var(--label);
  text-align: center;
  transform-origin: center;
  transition: transform 140ms var(--ease);
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  outline: none;
}
.tds-gridlist-item.is-clickable {
  cursor: pointer;
}
.tds-gridlist-item.is-clickable:active {
  transform: scale(0.95);
}
.tds-gridlist-item.is-disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.tds-gridlist-item.is-disabled:active {
  transform: none; /* disabled 는 피드백 무효화 */
}
.tds-gridlist-item.is-clickable:focus-visible {
  box-shadow: 0 0 0 2px var(--brand);
  border-radius: 12px;
}

/* 1열 그리드: 가로 스택 — 이미지 좌측, 텍스트 우측, 왼쪽 정렬 */
.tds-gridlist--col-1 .tds-gridlist-item {
  flex-direction: row;
  align-items: center;
  justify-content: flex-start;
  gap: 16px;
  padding: 14px 16px;
  text-align: left;
}

.tds-gridlist-item__image {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tds-gridlist-item__image > img,
.tds-gridlist-item__image > svg {
  display: block;
}

.tds-gridlist-item__label {
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-regular);
  color: var(--label);
  margin: 0;
  word-break: keep-all;
  overflow-wrap: break-word;
}
.tds-gridlist--col-1 .tds-gridlist-item__label {
  font-size: var(--ty-5-fs);
  line-height: var(--ty-5-lh);
  text-align: left;
  flex: 1;
}

/* =============================================================================
 * TDS Highlight (스포트라이트 / 코치마크)
 *  · open=true 가 되면 children 영역만 빛이 새어 나오고 화면 전체가 어두워져요.
 *  · 구현: spot 에 box-shadow 0 0 0 100vmax rgba(0,0,0,.7) 로 dim 페인트.
 *    box-shadow 는 hit-test 영향 없으므로 별도 fixed 투명 backdrop 이 외부
 *    클릭(onClick) 을 받아요.
 *  · message 는 root 기준 absolute 배치 — X 정렬은 left/center/right,
 *    Y 정렬은 top(spot 위) / bottom(spot 아래).
 *  · 화살표는 항상 spot 중앙(가로) 에 절대 배치 — X 정렬 무관 (TDS 계약).
 * ========================================================================== */
.tds-highlight {
  position: relative;
  display: block;
}

/* 외부 클릭 캡처용 투명 backdrop. dim 색은 spot 의 box-shadow 가 페인트 */
.tds-highlight__backdrop {
  position: fixed;
  inset: 0;
  z-index: 99998;
  background: transparent;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

/* 강조 영역 (spot) — open 일 때만 dim 발사 + 위로 띄움 */
.tds-highlight__spot {
  position: relative;
  z-index: 1;
  border-radius: 8px;
  transition: box-shadow 220ms var(--ease);
}
.tds-highlight__spot.is-open {
  z-index: 99999;
  box-shadow: 0 0 0 100vmax rgba(0, 0, 0, 0.7);
}

/* 메시지 — root 기준 absolute. X/Y 정렬 모디파이어가 위치 결정 */
.tds-highlight__message {
  position: absolute;
  z-index: 100000;
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-medium);
  max-width: 240px;
  word-break: keep-all;
  overflow-wrap: break-word;
  pointer-events: none;
  text-align: center;
  padding: 0 4px;
}

/* X 정렬 — message 박스 자체의 가로 위치 */
.tds-highlight__message--x-left   { left: 0; }
.tds-highlight__message--x-center { left: 50%; transform: translateX(-50%); }
.tds-highlight__message--x-right  { right: 0; }

/* X 정렬에 따라 텍스트 정렬도 살짝 맞춰줌 */
.tds-highlight__message--x-left   { text-align: left; }
.tds-highlight__message--x-right  { text-align: right; }

/* Y 정렬 — message 박스의 세로 위치 (spot 위/아래 12px gap) */
.tds-highlight__message--y-top    { bottom: calc(100% + 16px); }
.tds-highlight__message--y-bottom { top: calc(100% + 16px); }

/* 화살표 — X 정렬과 무관하게 항상 spot 의 가로 중앙. */
.tds-highlight__arrow {
  position: absolute;
  left: 50%;
  z-index: 100000;
  pointer-events: none;
  display: block;
  width: 12px;
  height: 8px;
  line-height: 0;
}
.tds-highlight__arrow--y-top {
  bottom: calc(100% + 6px);
  transform: translateX(-50%);
}
.tds-highlight__arrow--y-bottom {
  top: calc(100% + 6px);
  transform: translateX(-50%) rotate(180deg);
}

/* =============================================================================
 * TDS IconButton
 *  · variant: clear / fill / border
 *      - clear  : 평소 배경 없음, 누를 때 bgColor 표시
 *      - fill   : 평소 bgColor 표시, 누를 때 배경 사라짐 (반전)
 *      - border : 평소 테두리 + 배경 없음, 누를 때 bgColor 표시
 *  · 기본 컨테이너는 max(40px, iconSize + 12) — iconSize 24 기준 40×40
 *  · 아이콘 색은 --tds-iconbutton-icon-color (currentColor 기반).
 *    -mono 아이콘은 CSS mask-image + background-color 트릭으로 색 입힘.
 * ========================================================================== */
.tds-iconbutton {
  --tds-iconbutton-icon-size: 24px;
  --tds-iconbutton-bg: var(--tds-grey-opacity-100);
  --tds-iconbutton-icon-color: var(--label);

  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: max(40px, calc(var(--tds-iconbutton-icon-size) + 12px));
  height: max(40px, calc(var(--tds-iconbutton-icon-size) + 12px));
  padding: 0;
  margin: 0;
  border: 0;
  border-radius: 50%;
  background: transparent;
  color: var(--tds-iconbutton-icon-color);
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  outline: none;
  transition:
    background-color 120ms var(--ease),
    border-color 120ms var(--ease),
    opacity 120ms var(--ease);
}
.tds-iconbutton:focus-visible {
  outline: 2px solid var(--brand);
  outline-offset: 2px;
}
.tds-iconbutton:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

/* Variant: clear */
.tds-iconbutton--clear {
  background: transparent;
  border: 0;
}
.tds-iconbutton--clear:not(:disabled):active {
  background: var(--tds-iconbutton-bg);
}

/* Variant: fill */
.tds-iconbutton--fill {
  background: var(--tds-iconbutton-bg);
  border: 0;
}
.tds-iconbutton--fill:not(:disabled):active {
  background: transparent;
}

/* Variant: border */
.tds-iconbutton--border {
  background: transparent;
  border: 1px solid var(--separator);
}
.tds-iconbutton--border:not(:disabled):active {
  background: var(--tds-iconbutton-bg);
}

/* Icon — img (그대로) 또는 mask span (-mono 아이콘 색 입힘) */
.tds-iconbutton__icon {
  display: block;
  flex-shrink: 0;
  pointer-events: none;
}
.tds-iconbutton__icon--mask {
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* =============================================================================
 * TDS ListFooter — 리스트의 마지막에 "더 보기" 같은 footer 액션을 배치
 *  · 기본은 <div> 로 렌더되며, onClick 이 있으면 <button> + .is-clickable
 *  · 상단 hairline:
 *      - 기본(`border` prop) → __hairline 요소를 직접 렌더 (full / indented / none)
 *      - 커스텀(`hairline` prop) → __hairline-slot 으로 렌더, 내부에 사용자가 넣은
 *        ListFooter.Hairline 이 들어와요. 절대 위치는 슬롯에서 제공.
 *  · 클릭 효과(shadow):
 *      - onClick 이 있을 때만 보여요. 기본은 __shadow (radial-gradient, blue100)
 *        커스텀은 __shadow-slot 안에 ListFooter.Shadow 가 들어가요.
 *  · 색은 CSS 변수 두 개로 제어 — --tds-listfooter-text-color / -icon-color.
 *    JSX 에서 textColor / iconColor prop 으로 주입.
 * ========================================================================== */
.tds-listfooter {
  --tds-listfooter-text-color: var(--tds-blue-500);
  --tds-listfooter-icon-color: var(--tds-blue-500);

  position: relative;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;

  width: 100%;
  min-height: 56px;
  padding: 14px 20px;
  margin: 0;

  background: transparent;
  border: 0;
  font-family: inherit;
  font-size: var(--sub-ty-2-fs, 15px);
  line-height: var(--sub-ty-2-lh, 22px);
  color: var(--tds-listfooter-text-color);

  cursor: default;
  -webkit-tap-highlight-color: transparent;
  -webkit-user-select: none;
          user-select: none;
}
.tds-listfooter.is-clickable { cursor: pointer; }

/* 상단 hairline — border prop 의 결과물 */
.tds-listfooter__hairline {
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  background: var(--separator);
  pointer-events: none;
}
.tds-listfooter__hairline--full     { left: 0; }
.tds-listfooter__hairline--indented { left: 20px; }

/* 커스텀 hairline 슬롯 — ListFooter.Hairline 을 절대 위치로 띄움 */
.tds-listfooter__hairline-slot {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 1px;
  pointer-events: none;
}

/* ListFooter.Hairline 자체 — slot 안에서 우측 끝까지 늘어나며,
   indent prop 으로 좌측 여백을 받음 */
.tds-listfooter__hairline-custom {
  position: absolute;
  top: 0;
  right: 0;
  height: 1px;
  background: var(--separator);
}

/* 클릭 효과(shadow) — 평소엔 투명, :active 일 때 fade-in */
.tds-listfooter__shadow,
.tds-listfooter__shadow-slot {
  position: absolute;
  inset: 0;
  pointer-events: none;
  opacity: 0;
  transition: opacity 160ms ease;
  border-radius: inherit;
}
.tds-listfooter__shadow {
  background: radial-gradient(closest-side, var(--tds-blue-100, #c9e2ff) 0%, transparent 100%);
}
.tds-listfooter.is-clickable:active .tds-listfooter__shadow,
.tds-listfooter.is-clickable:active .tds-listfooter__shadow-slot { opacity: 0.6; }

/* ListFooter.Shadow 자체 — 슬롯 전체를 채움. 사용자가 style 로 background 덮어씀 */
.tds-listfooter__shadow-custom {
  position: absolute;
  inset: 0;
  pointer-events: none;
}

/* Text 서브 — fontWeight 는 inline style 로 주입돼요 */
.tds-listfooter__text {
  font-weight: var(--w-medium, 500);
  position: relative;
  z-index: 1;
}

/* Icon 서브 — 기본 16px, color 는 currentColor 로 흐름 */
.tds-listfooter__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 16px;
  height: 16px;
  color: var(--tds-listfooter-icon-color);
  position: relative;
  z-index: 1;
}
.tds-listfooter__icon--mask {
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}

/* =============================================================================
 * TDS ListHeader — 페이지/섹션 상단의 제목+설명+우측 액션 헤더
 *  · 구조: [description?] · [title | right] · [description?]
 *      - descriptionPosition='top'    → 위 슬롯에 배치 (기본)
 *      - descriptionPosition='bottom' → 아래 슬롯에 배치
 *  · titleWidthRatio (기본 0.66) 으로 title/right 비율 결정.
 *    JSX 에서 inline style 로 flex-basis 주입.
 *  · rightAlignment='center'(기본) / 'bottom' — 우측 요소의 세로 정렬.
 *    title 이 두 줄이 되더라도 right 가 중앙 또는 하단에 정렬돼요.
 *  · 제목 자체는 서브 컴포넌트가 그려요. ListHeader 는 슬롯만 제공:
 *      TitleParagraph / TitleTextButton / TitleSelector
 *      RightText / RightArrow
 *      DescriptionParagraph
 * ========================================================================== */
.tds-listheader {
  display: flex;
  flex-direction: column;
  width: 100%;
  padding: 12px 20px;
  gap: 4px;
  box-sizing: border-box;
}

.tds-listheader__row {
  display: flex;
  flex-direction: row;
  width: 100%;
  gap: 8px;
}
.tds-listheader__row--align-center { align-items: center; }
.tds-listheader__row--align-bottom { align-items: flex-end; }

.tds-listheader__title {
  min-width: 0;          /* text-overflow 가능하게 */
}
.tds-listheader__title > * { margin: 0; }

.tds-listheader__right {
  min-width: 0;
  display: flex;
  justify-content: flex-end;
  align-items: inherit;
}

.tds-listheader__description {
  margin: 0;
  font-size: var(--sub-ty-8-fs);
  line-height: var(--sub-ty-8-lh);
  font-weight: var(--w-regular);
  color: var(--tds-grey-600);
}

/* ── Title.Paragraph — 일반 제목 텍스트 ── */
.tds-listheader__title-para {
  margin: 0;
  color: var(--tds-grey-800);
}

/* ── Title.Selector — 드롭다운 화살표가 붙은 제목 ── */
.tds-listheader__title-selector {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tds-grey-800);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tds-listheader__title-selector:disabled { cursor: not-allowed; opacity: 0.4; }
.tds-listheader__title-selector .tds-listheader__chev {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tds-grey-600);
}

/* ── Title.TextButton — 클릭 가능한 제목 텍스트 버튼 ── */
.tds-listheader__title-button {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  color: var(--tds-grey-800);
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  text-decoration: none;
  -webkit-tap-highlight-color: transparent;
}
.tds-listheader__title-button:disabled { cursor: not-allowed; opacity: 0.4; }
/* size — xsmall/medium/large 매핑은 JSX 에서 ty- 클래스로 처리 */
.tds-listheader__title-button--variant-clear { /* no decoration */ }
.tds-listheader__title-button--variant-underline {
  text-decoration: underline;
  text-underline-offset: 2px;
  text-decoration-thickness: 1px;
}
.tds-listheader__title-button--variant-arrow .tds-listheader__chev {
  display: inline-flex;
  color: var(--tds-grey-600);
}
.tds-listheader__title-button:not(:disabled):active { opacity: 0.6; }

/* ── Right.Text — 단순 보조 텍스트 ── */
.tds-listheader__right-text {
  margin: 0;
  color: var(--tds-grey-700);
  font-weight: var(--w-medium);
}

/* ── Right.Arrow — 텍스트 + 화살표, 클릭 가능 ── */
.tds-listheader__right-arrow {
  margin: 0;
  display: inline-flex;
  align-items: center;
  gap: 2px;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  color: var(--tds-grey-700);
  font-weight: var(--w-medium);
  -webkit-tap-highlight-color: transparent;
}
.tds-listheader__right-arrow:not(:disabled):active { opacity: 0.6; }
.tds-listheader__right-arrow .tds-listheader__chev {
  display: inline-flex;
  align-items: center;
  color: var(--tds-grey-400);
}

/* =============================================================================
 * TDS Loader — 데이터 로딩 중 시각 피드백 (회전 스피너 + 옵션 라벨)
 *  · 구현: SVG circle 두 개 (track + 회전하는 arc).
 *      - track   : 옅은 베이스 색 (currentColor 의 0.16 alpha 효과를 stroke-opacity 로)
 *      - arc     : strokeDasharray 로 1/4 호만 그림. 1.0s linear 회전 무한.
 *  · type 별 색상:
 *      primary → --tds-blue-500
 *      dark    → --tds-grey-800
 *      light   → #ffffff   (어두운 배경 위 가정 — 호출자가 dark bg 깔아야 보임)
 *  · size 별 지름:
 *      small  20px / stroke 2.5
 *      medium 32px / stroke 3
 *      large  48px / stroke 4
 *  · label: 스피너 아래 가운데 정렬. white-space: pre-line 으로 \n 줄바꿈 지원.
 *    색은 스피너와 같은 currentColor.
 * ========================================================================== */
.tds-loader {
  --tds-loader-color: var(--tds-blue-500);
  --tds-loader-track-opacity: 0.16;

  display: inline-flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 12px;
  color: var(--tds-loader-color);
}
.tds-loader--type-primary { --tds-loader-color: var(--tds-blue-500); }
.tds-loader--type-dark    { --tds-loader-color: var(--tds-grey-800); }
.tds-loader--type-light   { --tds-loader-color: #ffffff; }

.tds-loader__spinner {
  display: inline-block;
  animation: tds-loader-spin 1s linear infinite;
  /* GPU 가속 — 회전이 부드럽게 */
  transform-origin: center center;
  will-change: transform;
}
.tds-loader__spinner svg {
  display: block;
  width: 100%;
  height: 100%;
}
.tds-loader__spinner-track {
  stroke: currentColor;
  stroke-opacity: var(--tds-loader-track-opacity);
  fill: none;
}
.tds-loader__spinner-arc {
  stroke: currentColor;
  fill: none;
  stroke-linecap: round;
}

/* size 별 박스 크기 — JSX 에서 strokeWidth 도 다르게 */
.tds-loader--size-small  .tds-loader__spinner { width: 20px; height: 20px; }
.tds-loader--size-medium .tds-loader__spinner { width: 32px; height: 32px; }
.tds-loader--size-large  .tds-loader__spinner { width: 48px; height: 48px; }

/* 사용자에게 모션 줄임 옵션이 켜져 있으면 회전 속도를 매우 느리게
   (완전 정지하면 "로딩 중" 의미가 사라지므로 4s 로 둠) */
@media (prefers-reduced-motion: reduce) {
  .tds-loader__spinner { animation-duration: 4s; }
}

@keyframes tds-loader-spin {
  to { transform: rotate(360deg); }
}

.tds-loader__label {
  margin: 0;
  text-align: center;
  white-space: pre-line;     /* \n → <br> 효과 */
  font-size: var(--sub-ty-7-fs, 14px);
  line-height: var(--sub-ty-7-lh, 21px);
  font-weight: var(--w-medium, 500);
  color: currentColor;
}

/* =============================================================================
 * TDS Menu — 드롭다운 메뉴 (6 서브: Dropdown / Header / DropdownItem /
 *            DropdownIcon / DropdownCheckItem / Trigger)
 *  · Dropdown        : 드롭다운 패널 (흰 배경 + 큰 라운드 + 그림자)
 *  · Header          : 패널 안 작은 회색 라벨
 *  · DropdownItem    : left / right 슬롯이 있는 row. hover/active 시 배경 강조.
 *  · DropdownIcon    : 슬롯에 들어가는 아이콘 헬퍼. currentColor 상속.
 *  · DropdownCheckItem: DropdownItem + 우측 체크박스 (checked/onCheckedChange)
 *  · Trigger         : 자식을 감싸 클릭 시 패널을 열어 줘요.
 *      placement 12 종 (top/bottom/left/right × start/center/end)
 *      외부 클릭 + ESC 로 자동 닫힘. controlled/uncontrolled 둘 다 지원.
 *  · 패널은 .tds-menu-trigger__dropdown 으로 트리거 기준 absolute 배치.
 *    standalone 사용 시(.tds-menu-dropdown 만) flow 안에 그대로 박혀요.
 *  · 등장 애니메이션: 짧은 fade + 살짝 위로 (8px)
 *    prefers-reduced-motion 켜져 있으면 그냥 페이드만.
 * ========================================================================== */
.tds-menu-dropdown {
  display: flex;
  flex-direction: column;
  background: #ffffff;
  border-radius: 14px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.06),
    0 8px 24px rgba(0, 0, 0, 0.12);
  padding: 6px;
  min-width: 160px;
  max-width: 320px;
  /* 패널 내부 스크롤 — 항목이 많을 때 */
  max-height: min(60vh, 480px);
  overflow-y: auto;
  /* 텍스트 크기 기본 */
  font-size: var(--sub-ty-5-fs, 16px);
  line-height: var(--sub-ty-5-lh, 24px);
  color: var(--tds-grey-900, #191f28);
  /* 패널은 클릭 이벤트를 외부로 새지 않게 */
  -webkit-tap-highlight-color: transparent;
}

.tds-menu-dropdown__header {
  padding: 8px 10px 6px;
  font-size: var(--sub-ty-9-fs, 12px);
  line-height: var(--sub-ty-9-lh, 18px);
  font-weight: var(--w-medium, 500);
  color: var(--tds-grey-500, #8b95a1);
  letter-spacing: 0.01em;
  -webkit-user-select: none;
          user-select: none;
}

.tds-menu-dropdown__item {
  /* 버튼 리셋 */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  background: transparent;
  margin: 0;
  font-family: inherit;
  text-align: left;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  display: flex;
  align-items: center;
  gap: 10px;
  padding: 10px;
  border-radius: 10px;
  font-size: inherit;
  line-height: inherit;
  font-weight: var(--w-medium, 500);
  color: var(--tds-grey-900, #191f28);
  transition: background-color 120ms ease;
}
.tds-menu-dropdown__item:hover:not(:disabled),
.tds-menu-dropdown__item:focus-visible:not(:disabled) {
  background: var(--tds-grey-50, #f9fafb);
  outline: none;
}
.tds-menu-dropdown__item:active:not(:disabled) {
  background: var(--tds-grey-100, #f2f4f6);
}
.tds-menu-dropdown__item:disabled {
  cursor: not-allowed;
  opacity: 0.4;
}

.tds-menu-dropdown__item-left {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.tds-menu-dropdown__item-label {
  flex: 1 1 auto;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.tds-menu-dropdown__item-right {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  margin-left: auto;
  color: var(--tds-grey-500, #8b95a1);
}

/* 체크 항목 — 우측 슬롯에 자동으로 체크박스가 들어가요 */
.tds-menu-dropdown__check {
  width: 20px;
  height: 20px;
  border-radius: 6px;
  border: 1.5px solid var(--tds-grey-200, #e5e8eb);
  background: #ffffff;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  transition: background-color 120ms ease, border-color 120ms ease;
  flex-shrink: 0;
}
.tds-menu-dropdown__check svg {
  display: block;
  width: 14px;
  height: 14px;
  color: #ffffff;
  opacity: 0;
  transition: opacity 120ms ease;
}
.tds-menu-dropdown__item--checked .tds-menu-dropdown__check {
  background: var(--tds-blue-500, #3182f6);
  border-color: var(--tds-blue-500, #3182f6);
}
.tds-menu-dropdown__item--checked .tds-menu-dropdown__check svg {
  opacity: 1;
}

/* DropdownIcon — 아이콘 헬퍼 wrapper */
.tds-menu-dropdown__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  color: var(--tds-grey-700, #4e5968);
}
.tds-menu-dropdown__icon img,
.tds-menu-dropdown__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* mono 아이콘은 currentColor 로 칠하기 — mask 트릭 */
.tds-menu-dropdown__icon--mono {
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.tds-menu-dropdown__icon--mono img { visibility: hidden; }

/* Trigger — 자식을 감싸는 inline 래퍼 */
.tds-menu-trigger {
  position: relative;
  display: inline-block;
}

/* 트리거 기준 absolute 배치되는 패널 컨테이너 */
.tds-menu-trigger__dropdown {
  position: absolute;
  z-index: 1000;
  /* 패널 자체는 .tds-menu-dropdown 이 그리니까 wrapper 는 폭 제어만 */
  min-width: 160px;
  /* 등장 애니메이션 */
  animation: tds-menu-dropdown-in 120ms ease-out;
}
@media (prefers-reduced-motion: reduce) {
  .tds-menu-trigger__dropdown {
    animation: tds-menu-dropdown-fade 120ms ease-out;
  }
}

/* 12 placement variants — 트리거 기준
   gap 6px 으로 트리거와 패널 사이 살짝 띄움 */
.tds-menu-trigger__dropdown--top-start    { bottom: calc(100% + 6px); left: 0; }
.tds-menu-trigger__dropdown--top-center   { bottom: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.tds-menu-trigger__dropdown--top-end      { bottom: calc(100% + 6px); right: 0; }
.tds-menu-trigger__dropdown--bottom-start { top: calc(100% + 6px); left: 0; }
.tds-menu-trigger__dropdown--bottom-center{ top: calc(100% + 6px); left: 50%; transform: translateX(-50%); }
.tds-menu-trigger__dropdown--bottom-end   { top: calc(100% + 6px); right: 0; }
.tds-menu-trigger__dropdown--left-start   { right: calc(100% + 6px); top: 0; }
.tds-menu-trigger__dropdown--left-center  { right: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.tds-menu-trigger__dropdown--left-end     { right: calc(100% + 6px); bottom: 0; }
.tds-menu-trigger__dropdown--right-start  { left: calc(100% + 6px); top: 0; }
.tds-menu-trigger__dropdown--right-center { left: calc(100% + 6px); top: 50%; transform: translateY(-50%); }
.tds-menu-trigger__dropdown--right-end    { left: calc(100% + 6px); bottom: 0; }

/* center 가 들어 있는 placement 의 등장 애니메이션은 transform 충돌 방지를
   위해 별도 키프레임은 두지 않고, 그냥 fade 만 씀 (animation 으로 transform 을
   덮으면 left:50% center 정렬이 깨짐) */
.tds-menu-trigger__dropdown--top-center,
.tds-menu-trigger__dropdown--bottom-center,
.tds-menu-trigger__dropdown--left-center,
.tds-menu-trigger__dropdown--right-center {
  animation-name: tds-menu-dropdown-fade;
}

@keyframes tds-menu-dropdown-in {
  from { opacity: 0; transform: translateY(-4px); }
  to   { opacity: 1; transform: translateY(0); }
}
@keyframes tds-menu-dropdown-fade {
  from { opacity: 0; }
  to   { opacity: 1; }
}

/* =============================================================================
 * TDS Modal — 화면 위에 떠서 사용자의 집중을 가져가는 다이얼로그.
 *  · 2 서브:
 *      Modal.Overlay  : 뒤 어둡게 깔리는 dim. role="button" 으로 클릭 가능.
 *      Modal.Content  : 중앙 카드. 흰 배경 + 둥근 모서리 + 큰 그림자.
 *  · 등장: 200ms — overlay 페이드 + content 살짝 위로 슬라이드 (8px)
 *  · 퇴장: 200ms — 같은 시간만큼 reverse. transitionend 후 onExited 호출.
 *  · 외부 콘텐츠는 aria-hidden 으로 숨겨줘야 — JSX 에서 root 외 모든 형제에
 *    aria-hidden="true" 를 잠시 부여 (Modal 단계에서 처리).
 *  · 모달이 여러 개 동시에 열릴 수 있어 z-index 단계: overlay 1900, content 2000.
 *  · iOS Safari 에서 body 스크롤 락 — position:fixed 트릭 대신 단순히
 *    overflow:hidden 으로 문서 스크롤 차단 (Modal 컴포넌트 측에서 토글).
 * ========================================================================== */
.tds-modal {
  position: fixed;
  inset: 0;
  z-index: 1900;
  display: flex;
  align-items: center;
  justify-content: center;
  /* portal 자체는 클릭을 받지 않게 하고, overlay/content 가 받도록 */
  pointer-events: none;
}

/* 모달이 떠 있는 동안 body 스크롤을 막아요 (JS 에서 클래스 토글) */
.tds-modal-open {
  overflow: hidden !important;
}

.tds-modal__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  cursor: pointer;
  /* 등장/퇴장 애니메이션 — opacity 만 transition */
  opacity: 0;
  transition: opacity 200ms ease-out;
  /* role="button" 의 기본 outline 은 우리가 직접 컨트롤 */
  -webkit-tap-highlight-color: transparent;
  border: 0;
}
.tds-modal__overlay:focus { outline: none; }
.tds-modal--entered .tds-modal__overlay {
  opacity: 1;
}

.tds-modal__content {
  position: relative;
  z-index: 2000;
  pointer-events: auto;

  /* 카드 모양 */
  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.18);

  /* 모바일 기준 폭 — 좌우 24px 여백, 최대 360px */
  width: calc(100vw - 48px);
  max-width: 360px;
  /* 세로 — 화면을 넘기면 내부 스크롤 */
  max-height: calc(100dvh - 48px);
  overflow-y: auto;

  /* 등장 애니메이션 초기 상태 */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;

  /* tabIndex={0} 자동 포커스 — outline 제거 (시각적으로 거슬림) */
  outline: none;
  /* 폰트는 본문 기본 */
  color: var(--tds-grey-900, #191f28);
  font-size: var(--sub-ty-5-fs, 16px);
  line-height: var(--sub-ty-5-lh, 24px);
}
.tds-modal--entered .tds-modal__content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* 모션 줄임 — 슬라이드 없이 페이드만 */
@media (prefers-reduced-motion: reduce) {
  .tds-modal__overlay,
  .tds-modal__content {
    transition-duration: 120ms;
  }
  .tds-modal__content {
    transform: none;
  }
  .tds-modal--entered .tds-modal__content {
    transform: none;
  }
}

/* =============================================================================
 * TDS NumericSpinner — 정수 입력용 - / + 버튼 + 숫자 표시
 *  · 한 줄에 [감소버튼] [숫자] [증가버튼] 형태. 키보드 없이 누르기만으로 +1/-1.
 *  · 4 size: tiny / small / medium / large — 버튼 지름·폰트 크기·숫자 폭이 달라요.
 *  · min/max 도달 시 해당 버튼만 자동 비활성화. disable={true} 면 전체 비활성.
 *  · 버튼은 회색 배경 원형. 누를 때 살짝 어두워져요.
 *  · 숫자는 aria-live="polite" 로 변경 자동 안내.
 * ========================================================================== */
.tds-numspin {
  display: inline-flex;
  align-items: center;
  gap: 0;
  -webkit-tap-highlight-color: transparent;
  /* 색은 disable 시 한 번에 흐리게 */
  color: var(--tds-grey-900, #191f28);
}

.tds-numspin__btn {
  /* 버튼 리셋 */
  appearance: none;
  -webkit-appearance: none;
  border: 0;
  font-family: inherit;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;

  display: inline-flex;
  align-items: center;
  justify-content: center;
  background: var(--tds-grey-100, #f2f4f6);
  color: var(--tds-grey-700, #4e5968);
  border-radius: 999px;
  padding: 0;
  transition: background-color 120ms ease, opacity 120ms ease, color 120ms ease;
  flex-shrink: 0;
}
.tds-numspin__btn:hover:not(:disabled) {
  background: var(--tds-grey-200, #e5e8eb);
}
.tds-numspin__btn:active:not(:disabled) {
  background: var(--tds-grey-300, #d1d6db);
}
.tds-numspin__btn:focus-visible {
  outline: 2px solid var(--tds-blue-500, #3182f6);
  outline-offset: 2px;
}
.tds-numspin__btn:disabled {
  cursor: not-allowed;
  color: var(--tds-grey-300, #d1d6db);
  background: var(--tds-grey-50, #f9fafb);
}
.tds-numspin__btn svg {
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-linecap: round;
}

.tds-numspin__value {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-weight: var(--w-medium, 500);
  color: currentColor;
  -webkit-user-select: none;
          user-select: none;
}

/* size 별 — 버튼 지름, 폰트, 값 폭, 버튼-값 간격 */
.tds-numspin--size-tiny    .tds-numspin__btn   { width: 24px; height: 24px; }
.tds-numspin--size-tiny    .tds-numspin__btn svg { width: 12px; height: 12px; stroke-width: 1.6; }
.tds-numspin--size-tiny    .tds-numspin__value { min-width: 32px; padding: 0 6px;
  font-size: var(--sub-ty-9-fs, 12px); line-height: var(--sub-ty-9-lh, 18px); }

.tds-numspin--size-small   .tds-numspin__btn   { width: 28px; height: 28px; }
.tds-numspin--size-small   .tds-numspin__btn svg { width: 14px; height: 14px; stroke-width: 1.8; }
.tds-numspin--size-small   .tds-numspin__value { min-width: 40px; padding: 0 8px;
  font-size: var(--sub-ty-7-fs, 14px); line-height: var(--sub-ty-7-lh, 21px); }

.tds-numspin--size-medium  .tds-numspin__btn   { width: 36px; height: 36px; }
.tds-numspin--size-medium  .tds-numspin__btn svg { width: 16px; height: 16px; stroke-width: 2; }
.tds-numspin--size-medium  .tds-numspin__value { min-width: 48px; padding: 0 10px;
  font-size: var(--sub-ty-5-fs, 16px); line-height: var(--sub-ty-5-lh, 24px); }

.tds-numspin--size-large   .tds-numspin__btn   { width: 44px; height: 44px; }
.tds-numspin--size-large   .tds-numspin__btn svg { width: 18px; height: 18px; stroke-width: 2; }
.tds-numspin--size-large   .tds-numspin__value { min-width: 56px; padding: 0 12px;
  font-size: var(--sub-ty-4-fs, 18px); line-height: var(--sub-ty-4-lh, 26px); }

/* 컴포넌트 전체 비활성화 — disable=true */
.tds-numspin--disabled .tds-numspin__btn {
  cursor: not-allowed;
  color: var(--tds-grey-300, #d1d6db);
  background: var(--tds-grey-50, #f9fafb);
}
.tds-numspin--disabled .tds-numspin__value {
  color: var(--tds-grey-400, #b0b8c1);
}

/* =============================================================================
 * TDS Paragraph — 본문 텍스트 컨테이너 + 4 인라인 서브 (Text/Icon/Badge/Link)
 *  · 한 단락 안에 텍스트/아이콘/뱃지/링크를 자연스럽게 섞을 수 있어요.
 *  · typography (필수): t1~t7 (ty-1~ty-7) + st1~st13 (sub-ty-1~sub-ty-13)
 *      — JSX 에서 ty-N / sub-ty-N 클래스로 매핑
 *  · display: block (기본) / inline
 *  · ellipsisAfterLines: webkit-line-clamp 로 N 줄 후 말줄임
 *  · color: CSS color string — 루트 color 로 들어가 후손 텍스트가 상속
 *      서브에서 color 오버라이드 시 자기만 다른 색
 *  · 서브들은 inline-* — 자연스럽게 한 줄 흐름에 섞여요.
 * ========================================================================== */
.tds-paragraph {
  /* display 는 변형 클래스로 — 기본 block */
  display: block;
  margin: 0;
  /* 텍스트 본문 기본 — 호출자가 typography 클래스로 덮어 씀 */
  color: var(--tds-grey-900, #191f28);
  word-break: keep-all;       /* 한국어 어절 단위 줄바꿈 */
  overflow-wrap: anywhere;
  white-space: pre-wrap;       /* \n 줄바꿈 인정 */
}
.tds-paragraph--display-inline { display: inline; }

/* line-clamp — JSX 에서 --tds-paragraph-clamp 변수로 줄 수를 넘겨요 */
.tds-paragraph--clamp {
  display: -webkit-box;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
  -webkit-line-clamp: var(--tds-paragraph-clamp, 1);
  /* clamp 일 땐 white-space 가 normal 이어야 줄 수가 맞아요 */
  white-space: normal;
}

/* ----- Paragraph.Text ----- */
.tds-paragraph__text {
  /* 기본은 부모 폰트 상속. typography/fontWeight/color 가 있으면 자기만 덮어씀 */
  display: inline;
}

/* ----- Paragraph.Icon ----- */
/* 아이콘은 typography 의 line-height 만큼 크기로 — 기본 1em (em 은 부모 font-size 기준) */
.tds-paragraph__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  vertical-align: -0.15em;     /* 텍스트 베이스라인과 시각적 정렬 */
  width: 1.1em;
  height: 1.1em;
  color: currentColor;
  /* 글자 사이 약간 여백 */
  margin: 0 1px;
}
.tds-paragraph__icon img,
.tds-paragraph__icon svg {
  display: block;
  width: 100%;
  height: 100%;
}
/* mono 아이콘은 currentColor 칠 — mask 트릭 */
.tds-paragraph__icon--mono {
  background-color: currentColor;
  -webkit-mask-position: center;
          mask-position: center;
  -webkit-mask-repeat: no-repeat;
          mask-repeat: no-repeat;
  -webkit-mask-size: contain;
          mask-size: contain;
}
.tds-paragraph__icon--mono img { visibility: hidden; }

/* ----- Paragraph.Badge ----- */
/* Paragraph 안에 인라인으로 들어가는 작은 뱃지 — 일반 Badge 와 별도 스타일.
   본문 폰트보다 살짝 작고, 행 흐름을 깨지 않도록 vertical-align 처리 */
.tds-paragraph__badge {
  display: inline-flex;
  align-items: center;
  padding: 1px 6px;
  border-radius: 6px;
  font-size: 0.86em;            /* 본문보다 약간 작게 */
  line-height: 1.3;
  font-weight: var(--w-semibold, 600);
  vertical-align: 1px;
  margin: 0 1px;
  white-space: nowrap;
}

/* fill / weak × 6 colors */
.tds-paragraph__badge--fill-blue     { background: var(--tds-blue-500);    color: #ffffff; }
.tds-paragraph__badge--weak-blue     { background: var(--tds-blue-50);     color: var(--tds-blue-600, #1b64da); }
.tds-paragraph__badge--fill-teal     { background: var(--tds-teal-500);    color: #ffffff; }
.tds-paragraph__badge--weak-teal     { background: var(--tds-teal-50);     color: var(--tds-teal-600, #138787); }
.tds-paragraph__badge--fill-green    { background: var(--tds-green-500);   color: #ffffff; }
.tds-paragraph__badge--weak-green    { background: var(--tds-green-50);    color: var(--tds-green-600, #029559); }
.tds-paragraph__badge--fill-red      { background: var(--tds-red-500);     color: #ffffff; }
.tds-paragraph__badge--weak-red      { background: var(--tds-red-50);      color: var(--tds-red-600, #d83a45); }
.tds-paragraph__badge--fill-yellow   { background: var(--tds-yellow-500);  color: var(--tds-grey-900, #191f28); }
.tds-paragraph__badge--weak-yellow   { background: var(--tds-yellow-50);   color: var(--tds-yellow-700, #b07a00); }
/* elephant 는 우리 토큰에 없는 hue — 점잖은 회청색 톤으로 매핑 */
.tds-paragraph__badge--fill-elephant { background: var(--tds-grey-700, #4e5968); color: #ffffff; }
.tds-paragraph__badge--weak-elephant { background: var(--tds-grey-100, #f2f4f6); color: var(--tds-grey-700, #4e5968); }

/* ----- Paragraph.Link ----- */
.tds-paragraph__link {
  color: var(--tds-paragraph-link-color, var(--tds-blue-500, #3182f6));
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  /* a 태그 기본 밑줄 없음 — type 에 따라 추가 */
  text-decoration: none;
  background: transparent;
  border: 0;
  padding: 0;
  font: inherit;
}
.tds-paragraph__link--underline { text-decoration: underline; text-underline-offset: 2px; }
.tds-paragraph__link--clear     { text-decoration: none; }
.tds-paragraph__link:hover      { opacity: 0.85; }
.tds-paragraph__link:active     { opacity: 0.7; }

/* =============================================================================
 * TDS Post — 포스트 형식 줄글 (공지/이벤트/약관) 컴포넌트
 *  · 8 서브: H1/H2/H3/H4 (시멘틱 h1~h4) + Paragraph (시멘틱 p)
 *            + Ol/Ul/Li (시멘틱 ol/ul/li) + Hr (시멘틱 hr)
 *  · 공통 props:
 *      typography  t1~t7 / st1~st13 (ty-* / sub-ty-* 자동 매핑)
 *      paddingBottom  number(px) | string  — 모든 서브 공통, 자기 아래 여백
 *  · 기본 typography:
 *      H1 → t2,  H2 → t3,  H3 → st8,  H4 → t5
 *      Paragraph/Ol/Ul/Li → 부모 상속 (typography 미지정 시)
 *  · 디자인 원칙:
 *      - margin 0 으로 초기화 — 위아래 간격은 전적으로 paddingBottom 으로 제어
 *      - h1~h4 는 굵게(--w-bold) + 읽기 좋게 letter-spacing 살짝 음수
 *      - p 는 줄간격 넉넉히 (typography 의 line-height 따라가지만 추가 보강)
 *      - ol/ul 은 좌측 padding 1.4em, li 사이 6px 간격 (margin-bottom)
 *      - 중첩 ol/ul 은 첫 자식 li 바로 아래 — margin-top 4px 로 살짝만 띄움
 *      - hr 은 1px solid grey-200, my 16px 기본
 * ========================================================================== */

/* ----- 공통 reset ----- */
.tds-post__h,
.tds-post__paragraph,
.tds-post__ol,
.tds-post__ul,
.tds-post__hr {
  margin: 0;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ----- 헤딩 (h1 ~ h4) ----- */
.tds-post__h {
  color: var(--tds-grey-900, #191f28);
  font-weight: var(--w-bold, 700);
  letter-spacing: -0.01em;
  /* 기본은 위 여백 0 — 호출자가 paddingBottom 으로 다음 요소와 띄움 */
}

/* ----- 본문 단락 (p) ----- */
.tds-post__paragraph {
  color: var(--tds-grey-800, #333d4b);
  /* 본문은 typography 미지정 시 부모(또는 t6 정도) 상속 */
  white-space: pre-wrap;        /* \n 줄바꿈 인정 */
}

/* ----- 리스트 (ol / ul) ----- */
.tds-post__ol,
.tds-post__ul {
  color: var(--tds-grey-800, #333d4b);
  padding-left: 1.4em;          /* 마커가 들여쓰기 안 짤리게 */
  list-style-position: outside;
}
.tds-post__ol { list-style-type: decimal; }
.tds-post__ul { list-style-type: disc; }

/* ----- 리스트 아이템 (li) ----- */
.tds-post__li {
  margin: 0;
  padding-left: 4px;            /* 마커와 텍스트 사이 간격 */
}
/* 형제 li 사이 살짝 띄움 — 첫 li 는 위 여백 없음 */
.tds-post__li + .tds-post__li {
  margin-top: 6px;
}
/* li 안에 중첩 ol/ul 이 들어오면 살짝만 위 여백 — 텍스트와 너무 붙는 걸 방지 */
.tds-post__li > .tds-post__ol,
.tds-post__li > .tds-post__ul {
  margin-top: 4px;
}
/* 중첩이어도 마커는 모두 decimal/disc 로 유지 (TDS 스펙대로) */
.tds-post__li::marker {
  color: var(--tds-grey-700, #4e5968);
  font-weight: var(--w-medium, 500);
}

/* ----- 구분선 (hr) ----- */
.tds-post__hr {
  border: 0;
  border-top: 1px solid var(--tds-grey-200, #e5e8eb);
  margin: 16px 0;
  height: 0;
}

/* =============================================================================
 * TDS ProgressBar — 작업 진행도 표시 (수평 막대)
 *  · progress: 0.0 ~ 1.0 (JSX 에서 clamp)
 *  · size: light / normal / bold — 막대 높이만 다름
 *      light  → 4px
 *      normal → 6px
 *      bold   → 10px
 *  · color: fill 색 (CSS color string) — JSX 에서 inline style 로
 *      미지정 시 기본 var(--tds-blue-400)
 *  · animate: true 면 width 변경 시 320ms 부드럽게 — false 면 즉시
 *  · 접근성: role="progressbar" + aria-valuenow/min/max 자동
 *
 *  · 디자인:
 *      - track: grey-100 + 999px 라운드
 *      - fill: blue-400 + inherit 라운드 + transform-origin: left
 *      - width 100% 채움 — 부모가 크기를 결정
 * ========================================================================== */
.tds-progress {
  position: relative;
  display: block;
  width: 100%;
  background: var(--tds-grey-100, #f2f4f6);
  border-radius: 999px;
  overflow: hidden;
}
.tds-progress__fill {
  display: block;
  height: 100%;
  background: var(--tds-blue-400, #4593fc);
  border-radius: inherit;
  /* width 는 JSX 에서 inline style 로 % 주입 */
  width: 0;
}

/* size — 높이만 다름 */
.tds-progress--size-light  { height: 4px; }
.tds-progress--size-normal { height: 6px; }
.tds-progress--size-bold   { height: 10px; }

/* animate — width 가 부드럽게 늘어나/줄어 */
.tds-progress--animate .tds-progress__fill {
  transition: width 320ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* prefers-reduced-motion 존중 — 애니메이션 끔 */
@media (prefers-reduced-motion: reduce) {
  .tds-progress--animate .tds-progress__fill {
    transition: none;
  }
}

/* =============================================================================
 * TDS ProgressStepper — 단계별 진행 상태 (가로 배치)
 *  · 2 서브: ProgressStepper (컨테이너) + ProgressStep (각 단계)
 *  · variant:
 *      compact → 8px 도트 + 가는 connector (라벨 옵셔널)
 *      icon    → 32px 원 marker + 안에 아이콘/숫자 + 라벨
 *  · paddingTop: default 16px / wide 24px (컨테이너 위 여백)
 *  · activeStepIndex (0-based) 기준으로 각 step 의 state 결정
 *      idx <  active → past     (완료, blue-400)
 *      idx === active → current (현재, blue-400 + box-shadow ring)
 *      idx >  active → future   (미완료, grey-200)
 *  · checkForFinish (icon variant 전용): past 단계 marker 를 체크 아이콘으로
 *  · connector: marker-row 의 ::before(왼쪽) / ::after(오른쪽) 가로선
 *      첫 step 의 ::before, 마지막 step 의 ::after 는 숨김
 *      step state 가 past 면 양쪽 모두 blue-400, current 면 ::before 만 blue-400
 * ========================================================================== */
.tds-stepper {
  display: flex;
  width: 100%;
  align-items: flex-start;
  gap: 0;
  /* paddingTop 으로 위 여백 */
  padding-top: 16px;
}
.tds-stepper--pt-default { padding-top: 16px; }
.tds-stepper--pt-wide    { padding-top: 24px; }

/* 각 step — 동일 폭으로 분배 */
.tds-stepper__step {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
}

/* marker 가운데 + connector 좌우 */
.tds-stepper__marker-row {
  position: relative;
  width: 100%;
  height: 0;                       /* marker 가 자기 높이로 결정 */
  display: flex;
  align-items: center;
  justify-content: center;
}
/* connector — 트랙 색은 grey-200, marker 가 가운데이므로 좌우 50% 씩 */
.tds-stepper__marker-row::before,
.tds-stepper__marker-row::after {
  content: "";
  position: absolute;
  top: 50%;
  height: 2px;
  background: var(--tds-grey-200, #e5e8eb);
  transform: translateY(-50%);
  z-index: 0;
}
.tds-stepper__marker-row::before { left: 0;   right: 50%; }
.tds-stepper__marker-row::after  { left: 50%; right: 0;   }

/* 첫/마지막 step 의 바깥 connector 숨김 — 줄이 끊겨 보이게 */
.tds-stepper__step:first-child .tds-stepper__marker-row::before { display: none; }
.tds-stepper__step:last-child  .tds-stepper__marker-row::after  { display: none; }

/* state 별 connector 색 */
/* past — 양쪽 모두 활성색 */
.tds-stepper__step--state-past .tds-stepper__marker-row::before,
.tds-stepper__step--state-past .tds-stepper__marker-row::after {
  background: var(--tds-blue-400, #4593fc);
}
/* current — 왼쪽만 활성색 (지나온 길은 파랑, 앞 길은 회색) */
.tds-stepper__step--state-current .tds-stepper__marker-row::before {
  background: var(--tds-blue-400, #4593fc);
}

/* marker 공통 — 변형 없음. variant 별로 사이즈/배경 결정 */
.tds-stepper__marker {
  position: relative;
  z-index: 1;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background 160ms ease, box-shadow 160ms ease, color 160ms ease;
}

/* ----- variant: compact (8px 도트) ----- */
.tds-stepper--variant-compact .tds-stepper__marker {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tds-grey-200, #e5e8eb);
}
.tds-stepper--variant-compact .tds-stepper__step--state-past .tds-stepper__marker,
.tds-stepper--variant-compact .tds-stepper__step--state-current .tds-stepper__marker {
  background: var(--tds-blue-400, #4593fc);
}
.tds-stepper--variant-compact .tds-stepper__step--state-current .tds-stepper__marker {
  /* 현재 단계는 살짝 ring 으로 강조 */
  box-shadow: 0 0 0 4px rgba(69, 147, 252, 0.18);
}

/* ----- variant: icon (32px 원 + 아이콘/숫자) ----- */
.tds-stepper--variant-icon .tds-stepper__marker {
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: var(--tds-grey-100, #f2f4f6);
  color: var(--tds-grey-500, #8b95a1);
  font-size: 14px;
  font-weight: var(--w-semibold, 600);
  line-height: 1;
}
.tds-stepper--variant-icon .tds-stepper__step--state-past .tds-stepper__marker,
.tds-stepper--variant-icon .tds-stepper__step--state-current .tds-stepper__marker {
  background: var(--tds-blue-400, #4593fc);
  color: #ffffff;
}
.tds-stepper--variant-icon .tds-stepper__step--state-current .tds-stepper__marker {
  box-shadow: 0 0 0 5px rgba(69, 147, 252, 0.18);
}
/* 아이콘 자식 (svg/img/IOSIcon) 크기 정렬 */
.tds-stepper--variant-icon .tds-stepper__marker svg,
.tds-stepper--variant-icon .tds-stepper__marker img {
  width: 18px;
  height: 18px;
  display: block;
}
/* 체크 아이콘 — 자체 SVG 사용 (currentColor) */
.tds-stepper__check-svg {
  width: 16px;
  height: 16px;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.4;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ----- title (라벨) ----- */
.tds-stepper__title {
  margin-top: 8px;
  font-size: 13px;
  line-height: 1.4;
  color: var(--tds-grey-500, #8b95a1);
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* 너무 긴 라벨은 2 줄까지만 — clamp */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 2;
  overflow: hidden;
}
.tds-stepper--variant-compact .tds-stepper__title {
  margin-top: 10px;             /* 도트가 작아서 살짝 더 간격 */
}
/* current/past 라벨은 진하게 + 굵게 */
.tds-stepper__step--state-past .tds-stepper__title,
.tds-stepper__step--state-current .tds-stepper__title {
  color: var(--tds-grey-900, #191f28);
  font-weight: var(--w-semibold, 600);
}

/* prefers-reduced-motion 존중 — marker transition 끔 */
@media (prefers-reduced-motion: reduce) {
  .tds-stepper__marker { transition: none; }
}

/* =============================================================================
 * TDS Rating — 별점 평가 (readOnly / interactive)
 *  · 별 SVG + 값 텍스트로 구성. 채워진 별 yellow-400, 빈 별 grey-200.
 *  · size (interactive)  : medium 20 / large 28 / big 36   (3종)
 *  · size (readOnly)     : tiny 12 / small 16 / medium 20 / large 28 / big 36  (5종)
 *  · variant (readOnly 전용) :
 *      full     — max 개의 별 + 값 텍스트
 *      compact  — 별 1개 + 값 텍스트
 *      iconOnly — max 개의 별만
 *  · 접근성: 시각적으로 숨긴 <input type="range"> 포함 — 키보드 좌우 화살표로
 *    값 변경. 시각 요소는 aria-hidden="true".
 * ========================================================================== */

.tds-rating {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  position: relative;
  color: var(--tds-grey-200, #e5e8eb);   /* empty star */
  line-height: 1;
}
.tds-rating__stars {
  display: inline-flex;
  align-items: center;
}

/* size → 별 크기 + 값 폰트 사이즈 */
.tds-rating--size-tiny   { --tds-rating-star-size: 12px; --tds-rating-gap: 1px; --tds-rating-value-fs: var(--sub-ty-10-fs); }
.tds-rating--size-small  { --tds-rating-star-size: 16px; --tds-rating-gap: 2px; --tds-rating-value-fs: var(--sub-ty-8-fs); }
.tds-rating--size-medium { --tds-rating-star-size: 20px; --tds-rating-gap: 2px; --tds-rating-value-fs: var(--ty-6-fs); }
.tds-rating--size-large  { --tds-rating-star-size: 28px; --tds-rating-gap: 3px; --tds-rating-value-fs: var(--ty-5-fs); }
.tds-rating--size-big    { --tds-rating-star-size: 36px; --tds-rating-gap: 4px; --tds-rating-value-fs: var(--ty-4-fs); }

.tds-rating__stars { gap: var(--tds-rating-gap, 2px); }
.tds-rating--interactive { gap: var(--tds-rating-gap, 2px); }

/* 개별 별 — interactive 는 button, readOnly 는 span */
.tds-rating__star {
  width: var(--tds-rating-star-size, 20px);
  height: var(--tds-rating-star-size, 20px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  color: var(--tds-grey-200, #e5e8eb);
}
.tds-rating--interactive .tds-rating__star {
  cursor: pointer;
  transition: transform 120ms var(--ease, ease),
              color 120ms var(--ease, ease);
}
.tds-rating--interactive .tds-rating__star:active {
  transform: scale(0.92);
}
.tds-rating__star.is-filled {
  color: var(--tds-yellow-400, #ffd158);
}

/* SVG 는 부모 크기에 맞춤 */
.tds-rating__star-svg {
  width: 100%;
  height: 100%;
  fill: currentColor;
  display: block;
}

/* 값 텍스트 (full / compact) */
.tds-rating__value {
  margin-left: 2px;
  color: var(--tds-grey-900, #191f28);
  font-size: var(--tds-rating-value-fs, var(--ty-6-fs));
  font-weight: var(--w-semibold, 600);
  font-variant-numeric: tabular-nums;
  letter-spacing: -0.02em;
}

/* disabled — interactive 전용 */
.tds-rating.is-disabled {
  pointer-events: none;
  opacity: 0.4;
}
.tds-rating.is-disabled .tds-rating__star.is-filled {
  color: var(--tds-grey-300, #d1d6db);
}

/* 접근성용 visually-hidden range input
   — 포커스/키보드만 받고, 클릭은 별 버튼이 처리 */
.tds-rating__sr-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  opacity: 0;
  margin: 0;
  padding: 0;
  pointer-events: none;
}
.tds-rating:has(.tds-rating__sr-input:focus-visible) {
  outline: 2px solid var(--tds-blue-400, #4593fc);
  outline-offset: 3px;
  border-radius: 4px;
}

@media (prefers-reduced-motion: reduce) {
  .tds-rating--interactive .tds-rating__star { transition: none; }
  .tds-rating--interactive .tds-rating__star:active { transform: none; }
}

/* =============================================================================
 * TDS Result — 결과 페이지 컴포넌트
 *  · 작업 성공/실패/빈 상태를 알리는 페이지 단위 컨테이너.
 *  · 4 슬롯: figure (시각 요소) / title (h5) / description (p) / button.
 *  · figure 는 <div aria-hidden="true"> 로 감싸 장식용 처리 (alt="" 효과).
 *  · align : center (기본) | start  — 가로 정렬
 *  · size  : default (기본) | compact — 위/아래 패딩 + figure 와의 간격
 *  · 슬롯 사이 간격은 각 슬롯의 margin-top 으로 조립 (margin-collapse 없게).
 * ========================================================================== */

.tds-result {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
  /* default size 기본 패딩 — size variant 가 덮어씀 */
  padding: 40px 24px;
}

/* align — 가로 정렬 */
.tds-result--align-center {
  align-items: center;
  text-align: center;
}
.tds-result--align-start {
  align-items: flex-start;
  text-align: left;
}

/* size — 패딩 + figure 사이 간격 조절 */
.tds-result--size-default { padding: 40px 24px; }
.tds-result--size-default .tds-result__figure { margin-bottom: 20px; }
.tds-result--size-compact { padding: 24px 16px; }
.tds-result--size-compact .tds-result__figure { margin-bottom: 12px; }

.tds-result__figure {
  margin: 0 0 20px 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  /* 안에 들어오는 img/svg 의 기본 사이즈 (호출자가 덮어쓸 수 있음) */
  max-width: 100%;
}
.tds-result__figure > img,
.tds-result__figure > svg {
  display: block;
  max-width: 100%;
  height: auto;
}

.tds-result__title {
  margin: 0;
  font-size: var(--ty-3-fs, 22px);
  line-height: var(--ty-3-lh, 30px);
  font-weight: var(--w-bold, 700);
  color: var(--tds-grey-900, #191f28);
  letter-spacing: -0.01em;
  word-break: keep-all;
  /* 너무 긴 제목은 자연 줄바꿈 — clamp 안 함 */
}

.tds-result__description {
  margin: 8px 0 0 0;
  font-size: var(--sub-ty-7-fs, 14px);
  line-height: var(--sub-ty-7-lh, 21px);
  font-weight: var(--w-regular, 400);
  color: var(--tds-grey-700, #6b7684);
  /* \n / <br /> 줄바꿈 인정 */
  white-space: pre-wrap;
  word-break: keep-all;
  max-width: 320px;
}
.tds-result--align-start .tds-result__description {
  /* start 정렬일 때는 가로 폭 제한 풀어서 좌측 끝에 붙음 */
  max-width: none;
}

/* button 슬롯 — Result.Button 또는 직접 넣은 TDS Button 들의 컨테이너 */
.tds-result__button {
  margin-top: 28px;
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tds-result--align-start .tds-result__button {
  /* start 정렬 + 좁은 화면에서 자연스럽게 — max-width 풀고 알아서 */
  max-width: 100%;
}
.tds-result--size-compact .tds-result__button {
  margin-top: 16px;
}

/* Result.Button — TDS Button 위임 시 마커 클래스 (스타일 자체는 TDS Button 이 처리).
   라이브러리 안에서 위치/식별이 필요할 때만 사용. */
.tds-result-button { /* marker only */ }

/* Result.Button 폴백 — TDS Button 이 로드 안 된 환경의 native button.
   최소한의 모습은 갖추도록. */
.tds-result-button--fallback {
  appearance: none;
  -webkit-appearance: none;
  width: 100%;
  min-height: 52px;
  padding: 0 16px;
  border: 0;
  border-radius: 12px;
  background: var(--tds-blue-500, #3182f6);
  color: #fff;
  font-size: var(--sub-ty-5-fs, 16px);
  font-weight: var(--w-semibold, 600);
  cursor: pointer;
}
.tds-result-button--fallback:disabled {
  background: var(--tds-grey-200, #e5e8eb);
  color: var(--tds-grey-500, #8b95a1);
  cursor: not-allowed;
}

/* figure 만 있고 title 이 없는 경우 — figure 아래 여백 정리 */
.tds-result__figure:last-child {
  margin-bottom: 0;
}

/* =============================================================================
 * TDS SearchField — 검색 입력창
 *  · 좌측 돋보기 아이콘 + 가운데 input + 우측 X 삭제 버튼.
 *  · 변종:
 *      fixed=true     → position: fixed; 상단 고정 (스크롤해도 유지)
 *      takeSpace=true → fixed 시 placeholder 영역 (같은 높이의 빈 div) 자동 삽입
 *  · X 버튼은 value 가 비어 있으면 자동 숨김.
 *  · 둥근 14px 회색 박스, 높이 52px, sub-ty-5(16px) regular.
 * ========================================================================== */

.tds-searchfield {
  /* 외곽 wrapper — fixed 일 때 위치 기준이 됨 */
  width: 100%;
  box-sizing: border-box;
  padding: 8px 16px;
  background: #fff;
  position: relative;
  z-index: 0;
}

.tds-searchfield--fixed {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 50;
  /* iOS 노치 대응 — env(safe-area-inset-top) 만큼 추가 padding */
  padding-top: calc(8px + env(safe-area-inset-top, 0px));
}

/* takeSpace placeholder — fixed + takeSpace 시 같은 높이의 빈 div 가
   원래 자리에 들어가서 콘텐츠가 위로 점프하지 않게 함 */
.tds-searchfield__spacer {
  width: 100%;
  /* 8 + 52 + 8 = 68 — 기본 높이. fixed 시에는 top safe-area 추가 */
  height: 68px;
  pointer-events: none;
  visibility: hidden;
}
.tds-searchfield__spacer--with-safe {
  height: calc(68px + env(safe-area-inset-top, 0px));
}

/* 시각적 입력 박스 — input + 양쪽 아이콘을 담는 둥근 회색 컨테이너 */
.tds-searchfield__box {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  height: 52px;
  padding: 0 14px;
  border-radius: 14px;
  background: var(--tds-grey-100, #f2f4f6);
  transition: background 120ms var(--ease, ease),
              box-shadow 120ms var(--ease, ease);
}
.tds-searchfield__box:focus-within {
  background: var(--tds-grey-50, #f9fafb);
  box-shadow: inset 0 0 0 1.5px var(--tds-blue-400, #4593fc);
}

/* 좌측 돋보기 — 24px 아이콘 */
.tds-searchfield__icon {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tds-grey-500, #8b95a1);
}
.tds-searchfield__icon-svg {
  width: 100%;
  height: 100%;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 가운데 입력 — 진짜 input element */
.tds-searchfield__input {
  flex: 1 1 auto;
  min-width: 0;
  height: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--sub-ty-5-fs, 16px);
  line-height: var(--sub-ty-5-lh, 26px);
  font-weight: var(--w-regular, 400);
  color: var(--tds-grey-900, #191f28);
  letter-spacing: -0.01em;
  /* iOS Safari — 자동 줌 방지 (16px 이상이라 보통 안 일어나지만 안전) */
  -webkit-appearance: none;
  appearance: none;
}
.tds-searchfield__input::placeholder {
  color: var(--tds-grey-500, #8b95a1);
}
.tds-searchfield__input:disabled {
  color: var(--tds-grey-500, #8b95a1);
  cursor: not-allowed;
}
/* 브라우저 기본 search 입력의 X 버튼 / decoration 숨김 — 우리 X 버튼만 사용 */
.tds-searchfield__input::-webkit-search-cancel-button,
.tds-searchfield__input::-webkit-search-decoration,
.tds-searchfield__input::-webkit-search-results-button,
.tds-searchfield__input::-webkit-search-results-decoration {
  -webkit-appearance: none;
  appearance: none;
  display: none;
}

/* 우측 X 삭제 — 텍스트 있을 때만 표시 (JSX 에서 조건부 렌더) */
.tds-searchfield__clear {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--tds-grey-300, #d1d6db);
  color: #fff;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms var(--ease, ease),
              transform 120ms var(--ease, ease);
}
.tds-searchfield__clear:hover {
  background: var(--tds-grey-400, #b0b8c1);
}
.tds-searchfield__clear:active {
  transform: scale(0.92);
}
.tds-searchfield__clear-svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
}

@media (prefers-reduced-motion: reduce) {
  .tds-searchfield__box { transition: none; }
  .tds-searchfield__clear {
    transition: none;
  }
  .tds-searchfield__clear:active { transform: none; }
}

/* =============================================================================
 * TDS SegmentedControl — 단일 선택 라디오 그룹
 *  · 컨테이너 grey-100 둥근 pill + 안쪽 padding 2px,
 *    선택된 Item 만 흰 배경 + 살짝 떠 있는 그림자.
 *  · alignment:
 *      fixed → 모든 Item 동일 너비 (flex: 1 1 0)
 *      fluid → Item 너비 = 글자 수, 컨테이너 넘으면 가로 스크롤.
 *              스크롤로 첫 Item 가려지면 좌측 화살표 버튼 등장.
 *  · size 는 Item 단위로 적용 (parent → context → Item 클래스 자동 부여)
 * ========================================================================== */

/* 외곽 컨테이너 — 둥근 회색 pill, 좌측 화살표의 위치 기준 */
.tds-segmented {
  position: relative;
  display: block;
  width: 100%;
  box-sizing: border-box;
  background: var(--tds-grey-100, #f2f4f6);
  border-radius: 12px;
  padding: 2px;
}

/* 트랙 — 실제 Item 들이 들어가는 flex 컨테이너 */
.tds-segmented__track {
  display: flex;
  width: 100%;
  gap: 0;
  align-items: stretch;
}

/* fixed: 모든 Item 동일 너비 */
.tds-segmented--align-fixed .tds-segmented__item {
  flex: 1 1 0;
  min-width: 0;
}

/* fluid: Item 너비 = content, 트랙은 가로 스크롤 */
.tds-segmented--align-fluid .tds-segmented__track {
  overflow-x: auto;
  overflow-y: hidden;
  scrollbar-width: none;
  -ms-overflow-style: none;
  -webkit-overflow-scrolling: touch;
  scroll-behavior: smooth;
}
.tds-segmented--align-fluid .tds-segmented__track::-webkit-scrollbar {
  display: none;
}
.tds-segmented--align-fluid .tds-segmented__item {
  flex: 0 0 auto;
}

/* Item — 둥근 pill 버튼 (background transparent, 선택 시 white + shadow) */
.tds-segmented__item {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: transparent;
  border: 0;
  margin: 0;
  font-family: inherit;
  font-weight: var(--w-medium, 500);
  color: var(--tds-grey-700, #4e5968);
  cursor: pointer;
  white-space: nowrap;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  outline: 0;
  transition:
    background 160ms var(--ease, ease),
    color 160ms var(--ease, ease),
    box-shadow 160ms var(--ease, ease),
    transform 120ms var(--ease, ease);
}

.tds-segmented__item:focus-visible {
  box-shadow: 0 0 0 2px var(--tds-blue-400, #4593fc);
}

.tds-segmented__item:active {
  transform: scale(0.97);
}

/* 선택 — aria-checked="true" 또는 .tds-segmented__item--selected (둘 다 동일 효과) */
.tds-segmented__item[aria-checked="true"],
.tds-segmented__item--selected {
  background: #ffffff;
  color: var(--tds-grey-900, #191f28);
  box-shadow:
    0 1px 3px rgba(0, 0, 0, 0.06),
    0 4px 8px rgba(0, 0, 0, 0.04);
}

/* 라벨 span — 부모 button 의 line/font 상속, 추가 스타일 없음 */
.tds-segmented__item-label {
  display: inline-block;
  white-space: nowrap;
  letter-spacing: -0.01em;
}

/* SIZE — Item 단위로만 적용 (parent size 는 context 로 Item 에 클래스 주입) */
.tds-segmented__item--size-small {
  height: 32px;
  padding: 0 12px;
  font-size: var(--sub-ty-7-fs, 13px);
  line-height: var(--sub-ty-7-lh, 18px);
}
.tds-segmented__item--size-large {
  height: 40px;
  padding: 0 16px;
  font-size: var(--sub-ty-5-fs, 16px);
  line-height: var(--sub-ty-5-lh, 26px);
}

/* fluid 좌측 화살표 — 첫 아이템이 스크롤로 가려졌을 때만 표시 */
.tds-segmented__left-arrow {
  position: absolute;
  top: 50%;
  left: 4px;
  transform: translateY(-50%);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: #ffffff;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tds-grey-700, #4e5968);
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 0 0 0.5px rgba(0, 0, 0, 0.04);
  cursor: pointer;
  z-index: 2;
  opacity: 0;
  pointer-events: none;
  transition: opacity 120ms var(--ease, ease);
  outline: 0;
}
.tds-segmented__left-arrow--visible {
  opacity: 1;
  pointer-events: auto;
}
.tds-segmented__left-arrow:focus-visible {
  box-shadow:
    0 2px 6px rgba(0, 0, 0, 0.12),
    0 0 0 0.5px rgba(0, 0, 0, 0.04),
    0 0 0 2px var(--tds-blue-400, #4593fc);
}
.tds-segmented__left-arrow:active {
  transform: translateY(-50%) scale(0.92);
}
.tds-segmented__left-arrow-svg {
  width: 14px;
  height: 14px;
  display: block;
  fill: none;
  stroke: currentColor;
  stroke-width: 2.5;
  stroke-linecap: round;
  stroke-linejoin: round;
}

@media (prefers-reduced-motion: reduce) {
  .tds-segmented__item,
  .tds-segmented__left-arrow {
    transition: none;
  }
  .tds-segmented__item:active { transform: none; }
  .tds-segmented__left-arrow:active { transform: translateY(-50%); }
  .tds-segmented--align-fluid .tds-segmented__track {
    scroll-behavior: auto;
  }
}

/* =============================================================================
 * TDS Skeleton — 로딩 플레이스홀더
 *  · 데이터가 들어올 자리에 시머 애니메이션 바/카드/원을 띄워서
 *    레이아웃을 미리 보여줘요.
 *  · pattern (9 개 프리셋) 또는 custom (배열) 로 시퀀스 결정.
 *  · 마지막 요소는 `repeatLastItemCount` 만큼 반복 (기본 3, infinite=30 캡).
 *  · background:
 *      white          — 어두운 부모용 (바가 흰색)
 *      grey (기본)     — 일반 (grey-200 ↔ grey-100 시머)
 *      greyOpacity100 — 진한 회색 (grey-100 ↔ grey-50 시머, 강조)
 *  · 컨테이너 자체 배경은 transparent — 부모 색에 자연스럽게 얹힘.
 * ========================================================================== */

.tds-skeleton {
  /* 기본 grey — 바 자체의 색을 변수로 노출, --bg-* 클래스에서 덮어씀 */
  --tds-skeleton-base:    var(--tds-grey-200, #e5e8eb);
  --tds-skeleton-shimmer: var(--tds-grey-100, #f2f4f6);

  display: flex;
  flex-direction: column;
  gap: 12px;
  width: 100%;
  box-sizing: border-box;
  /* 컨테이너 배경 없음 — 부모 표면을 그대로 보여줌 */
  background: transparent;
}

/* 어두운 부모 위에 띄우는 흰색 스켈레톤 */
.tds-skeleton--bg-white {
  --tds-skeleton-base:    rgba(255, 255, 255, 0.95);
  --tds-skeleton-shimmer: rgba(255, 255, 255, 0.6);
}

/* 기본 회색 — 변수 그대로 (선언하지 않아도 됨) */
.tds-skeleton--bg-grey {
  --tds-skeleton-base:    var(--tds-grey-200, #e5e8eb);
  --tds-skeleton-shimmer: var(--tds-grey-100, #f2f4f6);
}

/* 진한 회색 — 좀 더 또렷한 강조용 */
.tds-skeleton--bg-grey-opacity-100 {
  --tds-skeleton-base:    var(--tds-grey-300, #d1d6db);
  --tds-skeleton-shimmer: var(--tds-grey-200, #e5e8eb);
}

/* 시각 요소 공통 — 시머 애니메이션 */
.tds-skeleton__bar,
.tds-skeleton__icon,
.tds-skeleton__card {
  background-color: var(--tds-skeleton-base);
  background-image: linear-gradient(
    90deg,
    var(--tds-skeleton-base) 0%,
    var(--tds-skeleton-shimmer) 50%,
    var(--tds-skeleton-base) 100%
  );
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: tds-skeleton-shimmer 1.6s linear infinite;
}

@keyframes tds-skeleton-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

/* Bar 사이즈 */
.tds-skeleton__bar { border-radius: 6px; }
.tds-skeleton__bar--title    { height: 24px; width: 60%; }
.tds-skeleton__bar--subtitle { height: 16px; width: 40%; border-radius: 4px; }
.tds-skeleton__bar--list-1   { height: 14px; width: 80%; border-radius: 4px; }
.tds-skeleton__bar--list-2   { height: 14px; width: 50%; border-radius: 4px; }

/* list — 가로형 바 2 줄 */
.tds-skeleton__list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}

/* listWithIcon — 좌측 원형 아이콘 + 우측 바 2 줄 */
.tds-skeleton__list-with-icon {
  display: flex;
  align-items: center;
  gap: 12px;
}
.tds-skeleton__list-text {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.tds-skeleton__icon {
  flex-shrink: 0;
  width: 40px;
  height: 40px;
  border-radius: 50%;
}

/* card — 직사각형 큰 블록 */
.tds-skeleton__card {
  width: 100%;
  height: 120px;
  border-radius: 12px;
}

/* spacer — 시각 요소 없이 빈 공간만 차지 */
.tds-skeleton__spacer {
  width: 100%;
  pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
  .tds-skeleton__bar,
  .tds-skeleton__icon,
  .tds-skeleton__card {
    animation: none;
    background-image: none;
  }
}

/* =============================================================================
 * TDS Slider — 막대 좌우 드래그 + 클릭 점프 + 키보드 입력
 *  · 트랙(grey-100) 위로 fill 이 색 (--tds-slider-color, 기본 blue-500) 으로 차오르고
 *    핸들(흰색 원 + 그림자) 이 그 끝에 위치해요.
 *  · color prop 으로 인라인 스타일에 --tds-slider-color 를 주입 → fill / handle ring /
 *    tooltip 화살표 모두 같은 색으로 통일.
 *  · label.min / label.mid / label.max 는 트랙 아래 가로 분배.
 *  · tooltip 은 Slider 가 핸들 가운데 위치(left%) 를 cloneElement 로 주입.
 *  · disabled 시 트랙/핸들 회색 + pointer-events: none.
 *  · prefers-reduced-motion: 트랜지션 끔.
 * ========================================================================== */

.tds-slider {
  /* 색 — 외부에서 인라인 style 로 덮어쓰면 자동 적용 */
  --tds-slider-color: var(--tds-blue-500, #3182f6);

  position: relative;
  width: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;
  gap: 8px;
  /* 핸들이 살짝 튀어나와도 클립되지 않도록 */
  padding: 12px 0;
  /* 모바일 가로 스와이프 방지 — 핸들에도 적용 */
  touch-action: none;
  user-select: none;
  -webkit-user-select: none;
}

/* 툴팁 자리 — 트랙 위 영역 */
.tds-slider__tooltip-layer {
  position: relative;
  height: 0;
  width: 100%;
  pointer-events: none;
}

.tds-slider__tooltip-slot {
  /* Slider 가 left:N% 를 인라인으로 주입 — 우리는 핸들 중앙으로 정렬 */
  position: absolute;
  bottom: 16px; /* 핸들 위로 띄움 */
  transform: translateX(-50%);
  z-index: 2;
  pointer-events: none;
  /* 부모가 정해 준 left 만큼 이동 */
  white-space: nowrap;
}

/* 툴팁 본체 — 어두운 말풍선 + 아래 화살표 */
.tds-slider__tooltip {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 6px 10px;
  border-radius: 8px;
  background: var(--tds-grey-900, #191f28);
  color: #ffffff;
  font-size: var(--sub-ty-9-fs, 12px);
  line-height: var(--sub-ty-9-lh, 16px);
  font-weight: var(--w-medium, 500);
  box-shadow: 0 2px 6px rgba(0, 0, 0, 0.18);
}
.tds-slider__tooltip-text {
  display: inline-block;
  white-space: nowrap;
}
.tds-slider__tooltip-arrow {
  position: absolute;
  left: 50%;
  bottom: -4px;
  width: 8px;
  height: 8px;
  background: var(--tds-grey-900, #191f28);
  transform: translateX(-50%) rotate(45deg);
  border-radius: 1px;
}

/* 트랙 — 클릭 가능한 4px 막대 */
.tds-slider__track {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: 999px;
  background: var(--tds-grey-100, #f2f4f6);
  cursor: pointer;
  /* 핸들이 trackoverflow 되어도 보이도록 */
  overflow: visible;
}

/* fill — 좌측에서 핸들까지 색 차오름 */
.tds-slider__fill {
  position: absolute;
  left: 0;
  top: 0;
  height: 100%;
  border-radius: 999px;
  background: var(--tds-slider-color);
  pointer-events: none;
  transition: width 80ms linear;
}

/* 핸들 — 흰 원 + 그림자, 가운데로 잡고 left% 이동 */
.tds-slider__handle {
  position: absolute;
  top: 50%;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: #ffffff;
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.16);
  transform: translate(-50%, -50%);
  cursor: grab;
  outline: none;
  /* 모바일 가로 스와이프 방지 */
  touch-action: none;
  transition: transform 80ms ease, box-shadow 120ms ease, left 80ms linear;
  /* 핸들 가운데에 색점 — 색을 섬세하게 강조 */
}
.tds-slider__handle::after {
  content: "";
  position: absolute;
  left: 50%;
  top: 50%;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--tds-slider-color);
  transform: translate(-50%, -50%);
}
.tds-slider__handle:active {
  cursor: grabbing;
  transform: translate(-50%, -50%) scale(1.08);
}
.tds-slider__handle:focus-visible {
  box-shadow:
    0 0 0 1px rgba(0, 0, 0, 0.06),
    0 2px 6px rgba(0, 0, 0, 0.16),
    0 0 0 4px rgba(49, 130, 246, 0.25);
}

/* 라벨 — 트랙 아래 가로 분배 (min · mid · max) */
.tds-slider__labels {
  display: flex;
  justify-content: space-between;
  align-items: center;
  width: 100%;
  margin-top: 4px;
  gap: 8px;
  font-size: var(--sub-ty-9-fs, 12px);
  line-height: var(--sub-ty-9-lh, 16px);
  color: var(--tds-grey-500, #8b95a1);
  font-weight: var(--w-medium, 500);
}
.tds-slider__label--min { text-align: left; }
.tds-slider__label--mid { text-align: center; flex: 1 1 auto; }
.tds-slider__label--max { text-align: right; }

/* disabled — 회색 처리 + 인터랙션 차단 */
.tds-slider--disabled .tds-slider__track,
.tds-slider--disabled .tds-slider__handle {
  pointer-events: none;
}
.tds-slider--disabled {
  --tds-slider-color: var(--tds-grey-300, #d1d6db);
  opacity: 0.6;
}
.tds-slider--disabled .tds-slider__handle {
  cursor: not-allowed;
}

@media (prefers-reduced-motion: reduce) {
  .tds-slider__fill,
  .tds-slider__handle {
    transition: none;
  }
}

/* =============================================================================
 * TDS Stepper — 단계 안내 리스트 (left + center + right + 연결선)
 *  · ProgressStepper(#142) 와 역할 구분:
 *      ProgressStepper — "1/3,2/3,3/3" 진행 위치 강조 (도트/아이콘 마커 + 마커-row).
 *      Stepper        — 절차 안내 카드 (left=숫자/에셋 + center=제목·설명 + right=화살표/버튼).
 *  · 좌측 컬럼 가운데에서 행 bottom 까지 grey-200 1px 세로선이 떨어져 다음 행의
 *    좌측과 시각적으로 이어져요. 마지막 행은 hideLine=true 로 끔.
 *  · 등장 모션: 각 row 에 keyframe `tds-stepper-row-in` (translateY 8→0 + opacity 0→1).
 *    Stepper 가 inline animation-delay 로 stagger 적용. play=false 면 inline 으로 끔.
 *  · prefers-reduced-motion 시 모션 OFF.
 * ========================================================================== */

.tds-stepper {
  display: flex;
  flex-direction: column;
  width: 100%;
  box-sizing: border-box;
}

.tds-stepper-row {
  position: relative;
  display: flex;
  align-items: flex-start;
  /* row 사이 간격 — 연결선이 다음 row 의 left column 가운데까지 닿도록 */
  padding: 0 0 16px 0;
  /* 모션 초기 상태 (animation 이 both 로 reset 함) */
  opacity: 0;
  transform: translateY(8px);
}

.tds-stepper-row--no-line {
  /* 마지막 행은 아래 padding 없앰 — 외부 wrapper 로 더 줄지 결정 */
  padding-bottom: 0;
}

.tds-stepper-row__left {
  position: relative;
  flex: 0 0 auto;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* center 컨텐츠와 가로 간격 */
  margin-right: 12px;
  /* 좌측 컬럼은 NumberIcon(28) / AssetFrame(가변) 어느 쪽이든 가운데 정렬 */
  min-width: 28px;
}

/* 연결선 — 좌측 컬럼 한가운데에서 row bottom 까지 */
.tds-stepper-row__line {
  display: block;
  width: 1px;
  flex: 1 1 auto;
  margin-top: 4px;
  margin-bottom: -16px; /* row padding-bottom 만큼 더 내려서 다음 row 와 끊김 없이 이어짐 */
  background: var(--tds-grey-200, #e5e8eb);
  align-self: center;
}

.tds-stepper-row__center {
  flex: 1 1 auto;
  min-width: 0;
  /* 텍스트 영역 — 좌측 아이콘과 baseline 보다 살짝 위 정렬 */
  padding-top: 2px;
}

.tds-stepper-row__right {
  flex: 0 0 auto;
  display: flex;
  align-items: center;
  margin-left: 12px;
  padding-top: 2px;
}

/* ----- StepperRow.Texts ----- */
.tds-stepper-text {
  display: flex;
  flex-direction: column;
  gap: 4px;
}
.tds-stepper-text__title {
  color: var(--tds-grey-900, #191f28);
  margin: 0;
  word-break: keep-all;
}
.tds-stepper-text__desc {
  color: var(--tds-grey-600, #6b7684);
  margin: 0;
  word-break: keep-all;
}

/* ----- StepperRow.NumberIcon ----- */
.tds-stepper-number-icon {
  --tds-stepper-number-color: var(--tds-blue-500, #3182f6);
  --tds-stepper-number-bg:    var(--tds-blue-50, #e8f3ff);
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--tds-stepper-number-bg);
  color: var(--tds-stepper-number-color);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sub-ty-7-fs, 13px);
  line-height: 1;
  font-weight: var(--w-bold, 700);
  font-variant-numeric: tabular-nums;
  flex-shrink: 0;
  user-select: none;
  -webkit-user-select: none;
}

/* ----- StepperRow.AssetFrame ----- */
.tds-stepper-asset-frame {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  overflow: hidden;
  flex-shrink: 0;
}
.tds-stepper-asset-frame > img {
  width: 100%;
  height: 100%;
  object-fit: cover;
  display: block;
}

/* ----- StepperRow.RightArrow ----- */
.tds-stepper-right-arrow {
  --tds-stepper-arrow-color: var(--tds-grey-400, #b0b8c1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--tds-stepper-arrow-color);
}

/* ----- StepperRow.RightButton 폴백 (TDS Button 미로드 시) ----- */
.tds-stepper-right-button--fallback {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  cursor: pointer;
  border-radius: 8px;
  font-weight: var(--w-medium, 500);
  font-family: inherit;
  transition: background 120ms ease, transform 120ms ease;
}
.tds-stepper-right-button--fallback:active {
  transform: scale(0.97);
}
.tds-stepper-right-button--size-small {
  height: 32px;
  padding: 0 12px;
  font-size: var(--sub-ty-7-fs, 13px);
}
.tds-stepper-right-button--size-medium {
  height: 36px;
  padding: 0 14px;
  font-size: var(--sub-ty-5-fs, 14px);
}
.tds-stepper-right-button--size-large {
  height: 44px;
  padding: 0 18px;
  font-size: var(--sub-ty-5-fs, 14px);
}
.tds-stepper-right-button--size-xlarge {
  height: 52px;
  padding: 0 22px;
  font-size: var(--sub-ty-3-fs, 15px);
}
.tds-stepper-right-button--color-primary {
  background: var(--tds-blue-500, #3182f6);
  color: #ffffff;
}
.tds-stepper-right-button--color-primary:hover {
  background: var(--tds-blue-600, #2272eb);
}
.tds-stepper-right-button--color-danger {
  background: var(--tds-red-500, #f04452);
  color: #ffffff;
}
.tds-stepper-right-button--color-light {
  background: var(--tds-grey-100, #f2f4f6);
  color: var(--tds-grey-900, #191f28);
}
.tds-stepper-right-button--color-light:hover {
  background: var(--tds-grey-200, #e5e8eb);
}
.tds-stepper-right-button--color-dark {
  background: var(--tds-grey-900, #191f28);
  color: #ffffff;
}

/* ----- 등장 모션 ----- */
@keyframes tds-stepper-row-in {
  0%   { opacity: 0; transform: translateY(8px); }
  100% { opacity: 1; transform: translateY(0); }
}

@media (prefers-reduced-motion: reduce) {
  .tds-stepper-row {
    animation: none !important;
    opacity: 1 !important;
    transform: none !important;
  }
  .tds-stepper-right-button--fallback {
    transition: none;
  }
}

/* =============================================================================
 * TDS Switch (Task #150)
 *  · iOS 풍 켜짐/꺼짐 토글. 51×31 트랙 + 27px 흰 thumb.
 *  · 색은 off=grey-300, on=blue-500. 250ms cubic-bezier(0.4,0,0.2,1).
 *  · hasTouchEffect=true 면 누르는 동안 thumb 가로로 살짝 늘어나고
 *    손을 떼면 ripple 한 번 → keyframe 재생.
 *  · 네이티브 input 은 visually-hidden 으로 숨기고 시각은 track/thumb 가 담당.
 *  · 외부 라벨은 .tds-switch__input 의 aria-* 속성으로 연결.
 *  · prefers-reduced-motion 일 때 transition / animation 모두 OFF.
 * ========================================================================== */

.tds-switch {
  display: inline-flex;
  align-items: center;
  position: relative;
  width: 51px;
  height: 31px;
  flex: 0 0 auto;
  cursor: pointer;
  user-select: none;
  -webkit-tap-highlight-color: transparent;
  vertical-align: middle;
  /* 외부 줄간격 영향 제거 */
  line-height: 0;
}

/* visually-hidden — 폼 전송 / 포커스 / 스크린 리더 모두 살아있음 */
.tds-switch__input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  opacity: 0;
  cursor: inherit;
  /* 키보드 포커스 가시화는 wrapper 의 :focus-within 으로 처리 */
  z-index: 1;
}

.tds-switch__track {
  display: inline-block;
  position: absolute;
  inset: 0;
  border-radius: 999px;
  background: var(--tds-grey-300, #d1d6db);
  transition: background-color 250ms cubic-bezier(0.4, 0, 0.2, 1);
  overflow: hidden; /* ripple 클리핑 */
}

.tds-switch--on .tds-switch__track {
  background: var(--tds-blue-500, #3182f6);
}

.tds-switch__thumb {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 27px;
  height: 27px;
  border-radius: 999px;
  background: #ffffff;
  box-shadow:
    0 3px 8px rgba(0, 0, 0, 0.15),
    0 1px 2px rgba(0, 0, 0, 0.06);
  transform: translateX(0);
  transform-origin: left center;
  transition:
    transform 250ms cubic-bezier(0.4, 0, 0.2, 1),
    width 180ms cubic-bezier(0.4, 0, 0.2, 1);
  /* ripple 가 thumb 안에서 퍼지도록 클리핑 */
  overflow: hidden;
  pointer-events: none; /* 클릭은 wrapper/input 이 받게 */
}

.tds-switch--on .tds-switch__thumb {
  transform: translateX(20px);
}

/* 누르는 동안 thumb 가로로 살짝 늘어나는 인디케이션 */
.tds-switch--touch.is-pressed .tds-switch__thumb {
  width: 32px;
}
.tds-switch--touch.tds-switch--on.is-pressed .tds-switch__thumb {
  /* 켜진 상태에서 늘리면 오른쪽 끝이 트랙을 넘지 않도록 transform 보정 */
  transform: translateX(15px);
}

/* 클릭 직후 ripple — 1회만 재생되고 disappear */
.tds-switch__ripple {
  position: absolute;
  top: 50%;
  left: 50%;
  width: 8px;
  height: 8px;
  border-radius: 999px;
  background: rgba(0, 0, 0, 0.18);
  transform: translate(-50%, -50%) scale(0);
  opacity: 0;
  pointer-events: none;
  animation: tds-switch-ripple 380ms cubic-bezier(0.22, 1, 0.36, 1) forwards;
}
.tds-switch--on .tds-switch__ripple {
  /* 파란 트랙 위에서는 흰색 리플이 더 잘 보임 */
  background: rgba(255, 255, 255, 0.35);
}

@keyframes tds-switch-ripple {
  0%   { transform: translate(-50%, -50%) scale(0);   opacity: 0.6; }
  60%  { opacity: 0.4; }
  100% { transform: translate(-50%, -50%) scale(6);   opacity: 0; }
}

/* 키보드 포커스 — 가시화는 wrapper 에 ring */
.tds-switch:focus-within {
  outline: none;
}
.tds-switch:focus-within .tds-switch__track {
  box-shadow: 0 0 0 3px var(--tds-blue-100, #c9e2ff);
}

/* disabled */
.tds-switch--disabled {
  cursor: not-allowed;
  opacity: 0.4;
}
.tds-switch--disabled .tds-switch__input {
  cursor: not-allowed;
}

/* prefers-reduced-motion — 모션 OFF */
@media (prefers-reduced-motion: reduce) {
  .tds-switch__track,
  .tds-switch__thumb {
    transition: none !important;
  }
  .tds-switch__ripple {
    animation: none !important;
    opacity: 0 !important;
  }
}

/* =============================================================================
 * TDS Tab (Task #151)
 *  · 한 화면에서 여러 콘텐츠를 가로 탭으로 전환.
 *  · 컨테이너 하단 1px grey-200 가이드 라인 + 선택 탭 아래 2px blue-500 underline.
 *  · fluid=false: equal-width(flex 1 1 0) — 최대 4 개 권장.
 *  · fluid=true:  콘텐츠 너비(flex 0 0 auto) + overflow-x: auto + scrollbar 숨김.
 *  · size: large(48px / sub-ty-5)·small(36px / sub-ty-7).
 *  · redBean=true: 우측 상단 빨간 6px 동그라미 + title="(업데이트 있음)".
 *  · prefers-reduced-motion 시 transition 끔.
 * ========================================================================== */

.tds-tab {
  display: flex;
  align-items: stretch;
  position: relative;
  width: 100%;
  /* 컨테이너 하단 가이드 라인 */
  box-shadow: inset 0 -1px 0 0 var(--tds-grey-200, #e5e8eb);
  /* gap 은 인라인 style 로 itemGap 이 결정 (기본 fluid=24, fixed=0) */
}

/* fixed: 모든 아이템이 동일한 너비 */
.tds-tab--fixed {
  /* 자식 flex 가 1 1 0 로 동작 */
}

/* fluid: 가로 스크롤 — scrollbar 숨김 (Webkit + FF) */
.tds-tab--fluid {
  overflow-x: auto;
  overflow-y: hidden;
  scroll-behavior: smooth;
  -ms-overflow-style: none;        /* IE 11 */
  scrollbar-width: none;            /* Firefox */
  -webkit-overflow-scrolling: touch;
}
.tds-tab--fluid::-webkit-scrollbar {
  display: none;                    /* Chrome/Safari */
  width: 0;
  height: 0;
}

/* ----- Item 공통 ----- */
.tds-tab__item {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 0 4px;
  cursor: pointer;
  color: var(--tds-grey-500, #8b95a1);
  font-weight: var(--w-medium, 500);
  white-space: nowrap;
  transition: color 160ms ease-out, font-weight 160ms ease-out;
  -webkit-tap-highlight-color: transparent;
  /* 이전 button user-agent 기본값 제거 */
  font-family: inherit;
  text-align: center;
  line-height: 1;
}

.tds-tab__item:focus { outline: none; }
.tds-tab__item:focus-visible {
  outline: 2px solid var(--tds-blue-400, #4593fc);
  outline-offset: -2px;
  border-radius: 6px;
}

/* fixed 모드: equal-width */
.tds-tab__item--fixed { flex: 1 1 0; min-width: 0; }
/* fluid 모드: 컨텐츠 너비 */
.tds-tab__item--fluid { flex: 0 0 auto; }

/* size — height + 텍스트 사이즈 */
.tds-tab__item--large {
  height: 48px;
  font-size: var(--sub-ty-5-fs, 16px);
  line-height: var(--sub-ty-5-lh, 24px);
}
.tds-tab__item--small {
  height: 36px;
  font-size: var(--sub-ty-7-fs, 14px);
  line-height: var(--sub-ty-7-lh, 20px);
}

/* 라벨 wrapper — redBean 위치 기준점 */
.tds-tab__item-label {
  position: relative;
  display: inline-block;
}

/* 선택 상태 — 텍스트 강조 + 하단 underline indicator */
.tds-tab__item.is-selected {
  color: var(--tds-grey-900, #191f28);
  font-weight: var(--w-bold, 700);
}
.tds-tab__item.is-selected::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 2px;
  background: var(--tds-blue-500, #3182f6);
  border-radius: 2px 2px 0 0;
  pointer-events: none;
}

/* hover (포인터가 가능한 환경에서만) */
@media (hover: hover) {
  .tds-tab__item:hover:not(.is-selected) {
    color: var(--tds-grey-700, #4e5968);
  }
}

/* redBean — 라벨 우측 상단 빨간 동그라미 */
.tds-tab__red-bean {
  position: absolute;
  top: -2px;
  right: -8px;
  width: 6px;
  height: 6px;
  border-radius: 999px;
  background: var(--tds-red-500, #f04452);
  pointer-events: none;
}

/* prefers-reduced-motion — transition off */
@media (prefers-reduced-motion: reduce) {
  .tds-tab__item {
    transition: none !important;
  }
  .tds-tab--fluid {
    scroll-behavior: auto;
  }
}

/* =============================================================================
 * TDS TableRow (Task #152)
 *  · [왼쪽][오른쪽] 두 슬롯의 좌우 행. align="space-between" 양 끝 / "left" 좌측 모임.
 *  · 기본: 위아래 12px 패딩 / sub-ty-5 / 라벨(left) grey-600, 값(right) grey-900.
 *  · leftRatio={N} 으로 left 슬롯 폭을 N% 로 고정 (행마다 라벨 폭을 줄로 맞출 때).
 *  · word-break: keep-all 로 한국어 가독성 유지.
 * ========================================================================== */

.tds-table-row {
  display: flex;
  align-items: center;
  width: 100%;
  padding: 12px 0;
  font-size: var(--sub-ty-5-fs, 16px);
  line-height: var(--sub-ty-5-lh, 24px);
  font-weight: var(--w-regular, 400);
  color: var(--tds-grey-900, #191f28);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* 공통 슬롯 — min-width: 0 으로 flex 자식의 텍스트가 ellipsis/줄바꿈 가능 */
.tds-table-row__left,
.tds-table-row__right {
  min-width: 0;
}

/* ----- align="space-between" ----- */
.tds-table-row--space-between {
  justify-content: space-between;
  gap: 8px;
}
.tds-table-row--space-between .tds-table-row__left {
  text-align: left;
  color: var(--tds-grey-600, #6b7684);
  flex: 0 1 auto;
}
.tds-table-row--space-between .tds-table-row__right {
  text-align: right;
  color: var(--tds-grey-900, #191f28);
  flex: 0 1 auto;
}

/* ----- align="left" ----- */
.tds-table-row--left {
  justify-content: flex-start;
  gap: 12px;
}
.tds-table-row--left .tds-table-row__left {
  text-align: left;
  color: var(--tds-grey-600, #6b7684);
  flex: 0 0 auto;
}
.tds-table-row--left .tds-table-row__right {
  text-align: left;
  color: var(--tds-grey-900, #191f28);
  flex: 1 1 auto;
}

/* leftRatio 지정 시 left 인라인 width/flex 가 우선 적용됨 (컴포넌트에서 inline style) */

/* =============================================================================
 * TDS TextButton (Task #153)
 *  · 한 줄 텍스트로 액션을 트리거하는 가장 가벼운 버튼.
 *  · 6 size (xsmall~xxlarge) × 3 variant (clear/arrow/underline) + disabled.
 *  · 기본 색 blue-500 / hover blue-600 / disabled grey-400.
 *  · ParagraphText 확장 — typography/fontWeight/color 인라인 오버라이드.
 * ========================================================================== */

.tds-text-button {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 2px;
  border: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  cursor: pointer;
  color: var(--tds-blue-500, #3182f6);
  font-weight: var(--w-medium, 500);
  font-family: inherit;
  text-decoration: none;
  text-align: inherit;
  white-space: nowrap;
  -webkit-tap-highlight-color: transparent;
  transition: opacity 120ms ease-out, color 120ms ease-out;
  /* size 별 CSS 변수로 font-size / line-height 결정 */
  font-size: var(--tds-text-button-fs, 15px);
  line-height: var(--tds-text-button-lh, 22px);
}

.tds-text-button:focus { outline: none; }
.tds-text-button:focus-visible {
  outline: 2px solid var(--tds-blue-400, #4593fc);
  outline-offset: 2px;
  border-radius: 4px;
}

@media (hover: hover) {
  .tds-text-button:hover:not(.is-disabled):not([disabled]) {
    color: var(--tds-blue-600, #2272eb);
  }
}

.tds-text-button:active:not(.is-disabled):not([disabled]) {
  opacity: 0.6;
}

/* disabled — class + native disabled 둘 다 커버 */
.tds-text-button.is-disabled,
.tds-text-button[disabled],
.tds-text-button[aria-disabled="true"] {
  color: var(--tds-grey-400, #b0b8c1);
  cursor: not-allowed;
  pointer-events: none;
}

/* size — font-size + line-height 직접 매핑 (clamp 토큰 안 씀: 예측 가능한 사이즈) */
.tds-text-button--xsmall  { --tds-text-button-fs: 12px; --tds-text-button-lh: 16px; }
.tds-text-button--small   { --tds-text-button-fs: 13px; --tds-text-button-lh: 18px; }
.tds-text-button--medium  { --tds-text-button-fs: 15px; --tds-text-button-lh: 22px; }
.tds-text-button--large   { --tds-text-button-fs: 17px; --tds-text-button-lh: 26px; }
.tds-text-button--xlarge  { --tds-text-button-fs: 20px; --tds-text-button-lh: 28px; }
.tds-text-button--xxlarge { --tds-text-button-fs: 24px; --tds-text-button-lh: 32px; }

/* variant=arrow — gap 살짝 더 + arrow 색은 currentColor */
.tds-text-button--arrow { gap: 4px; }
.tds-text-button__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: inherit;
  flex: 0 0 auto;
  /* svg 자체에 vertical-align 보정 */
  line-height: 0;
}
.tds-text-button__arrow svg {
  display: block;
}

/* variant=underline — 1px 밑줄, 약간의 오프셋 */
.tds-text-button--underline {
  text-decoration: underline;
  text-decoration-thickness: 1px;
  text-underline-offset: 3px;
}
/* underline 도 disabled 시 색만 grey-400 으로 (밑줄 유지) */

/* prefers-reduced-motion — transition 끔 */
@media (prefers-reduced-motion: reduce) {
  .tds-text-button { transition: none; }
}

/* =============================================================================
 * TDS Toast (Task #154)
 *  · 화면 상/하단에 잠깐 떠올라 작업 완료/이벤트를 알리는 피드백.
 *  · Portal 로 body 에 마운트, z-index 100001 (Modal/BottomSheet=1000, Highlight=99998~100000 위).
 *  · 가로 가운데 정렬 + max-width: calc(100vw - 32px), grey-900 배경 + 흰 텍스트.
 *  · top: 위에서 슬라이드 다운 / bottom: 아래에서 슬라이드 업.
 *  · drag-to-dismiss 위해 touch-action: pan-y. JSX 가 dragDy 를 inline transform 으로 주입.
 * ========================================================================== */
.tds-toast {
  position: fixed;
  left: 50%;
  z-index: 100001;
  display: flex;
  align-items: center;
  gap: 12px;
  width: max-content;
  max-width: calc(100vw - 32px);
  min-width: 0;
  padding: 14px 16px;
  background: var(--tds-grey-900, #191f28);
  color: var(--tds-white, #ffffff);
  border-radius: 14px;
  box-shadow: var(--shadow-elevation-medium, 0 6px 16px rgba(0, 0, 0, 0.18));
  font-size: var(--sub-ty-7-fs, 15px);
  line-height: var(--sub-ty-7-lh, 22px);
  font-weight: var(--w-medium, 500);
  /* 드래그 시 세로축은 사용자가 잡고, 가로 스와이프는 시스템에 양보 */
  touch-action: pan-y;
  /* 사용자 텍스트 선택 방지 (드래그와 충돌) */
  user-select: none;
  -webkit-user-select: none;
  /* base transform — 가로 가운데 + 진입/이탈 슬라이드 분리 */
  transform: translate3d(-50%, 0, 0);
  opacity: 0;
  transition:
    opacity 280ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: transform, opacity;
}

/* 위치 — 진입 전(=is-leaving) 시작 위치 */
.tds-toast--top {
  top: calc(env(safe-area-inset-top, 0px) + 16px);
  transform: translate3d(-50%, -8px, 0);
}
.tds-toast--bottom {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px);
  transform: translate3d(-50%, 8px, 0);
}

/* CTA 회피 — bottom 에서만 의미 있음 (FixedBottomCTA 88px 가량 위로) */
.tds-toast--bottom.tds-toast--higher-cta {
  bottom: calc(env(safe-area-inset-bottom, 0px) + 16px + 88px);
}

/* 표시 상태 — slide+fade in */
.tds-toast.is-visible {
  opacity: 1;
  transform: translate3d(-50%, 0, 0);
}

/* 이탈 상태 — slide+fade out (방향은 위치 변형에서 이미 정해짐) */
.tds-toast.is-leaving {
  opacity: 0;
}
.tds-toast--top.is-leaving    { transform: translate3d(-50%, -8px, 0); }
.tds-toast--bottom.is-leaving { transform: translate3d(-50%,  8px, 0); }

/* paused 상태는 시각적으로는 동일 — JSX 가 타이머만 멈춤 (디버그용 hook 클래스로 남김) */

/* 슬롯 */
.tds-toast__left {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tds-toast__text {
  flex: 1 1 auto;
  min-width: 0;
  /* 길어지면 줄바꿈 — 최대 2~3 줄까지 자연스럽게 */
  word-break: keep-all;
  overflow-wrap: anywhere;
}
.tds-toast__button {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
}

/* Toast.Button — 어두운 배경 위 흰 굵은 텍스트, 미니 버튼 */
.tds-toast-button {
  appearance: none;
  -webkit-appearance: none;
  background: transparent;
  border: 0;
  margin: 0;
  padding: 4px 8px;
  color: var(--tds-white, #ffffff);
  font-size: var(--sub-ty-7-fs, 15px);
  line-height: var(--sub-ty-7-lh, 22px);
  font-weight: var(--w-bold, 700);
  border-radius: 8px;
  cursor: pointer;
  transition: background-color 120ms ease-out;
}
.tds-toast-button:hover {
  background: rgba(255, 255, 255, 0.1);
}
.tds-toast-button:active {
  background: rgba(255, 255, 255, 0.18);
}
.tds-toast-button:focus-visible {
  outline: 2px solid var(--tds-blue-300, #82b8ff);
  outline-offset: 2px;
}

/* prefers-reduced-motion — transform 없이 fade 만, 더 짧게 */
@media (prefers-reduced-motion: reduce) {
  .tds-toast {
    transition: opacity 120ms ease-out;
    transform: translate3d(-50%, 0, 0);
  }
  .tds-toast--top.is-leaving,
  .tds-toast--bottom.is-leaving {
    transform: translate3d(-50%, 0, 0);
  }
  .tds-toast-button { transition: none; }
}

/* =============================================================================
 * TDS Tooltip (Task #155)
 *  · 트리거 위/아래에 떠올라 짧은 보조 정보를 보여주는 패널 + 화살표.
 *  · Portal(body) 마운트, 위치는 JSX 가 inline top/left 로 주입.
 *  · z-index 100002 (Toast=100001 보다 위 — 토스트는 자동 사라짐, 툴팁은
 *    의도적 보조설명. Toast 와 동시 노출 시 Tooltip 우선).
 *  · color: 메시지 박스/화살표 모두 grey-900 → 화살표 SVG 는 currentColor 상속.
 * ========================================================================== */
.tds-tooltip {
  position: absolute;
  z-index: 100002;
  display: inline-block;
  /* 화살표가 currentColor 라서 color 로 한 번에 색 통제 */
  color: var(--tds-grey-900, #191f28);
  /* 메시지 박스 */
  pointer-events: auto;
  /* 등장 전 — JSX 가 visible 클래스로 토글 */
  opacity: 0;
  transform: translateY(0);
  transition: opacity 120ms ease-out, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
  /* 텍스트 선택은 허용 (사용자가 메시지 복사할 수 있게) */
}

.tds-tooltip__message {
  background: currentColor;
  /* 글자 색은 흰색 — color 가 배경이라 text 는 별도 지정 */
  color: var(--tds-white, #ffffff);
  border-radius: 8px;
  box-shadow: var(--shadow-elevation-medium, 0 6px 16px rgba(0, 0, 0, 0.18));
  word-break: keep-all;
  overflow-wrap: anywhere;
  /* width 가 명시되면 messageAlign 이 의미를 가짐 */
}

/* 화살표 컨테이너 — JSX 가 left:px 로 정확한 위치 주입.
   placement 별로 위/아래에 절대 위치, transform 으로 가운데 정렬. */
.tds-tooltip__arrow {
  position: absolute;
  width: 0;
  height: 0;
  /* 색은 부모 currentColor — SVG 의 fill="currentColor" 가 받음 */
  pointer-events: none;
}
.tds-tooltip__arrow-svg {
  display: block;
  /* 좌표를 화살표 중심으로 — JSX 가 left:px 로 가운데 정렬 */
  position: absolute;
  /* 가로: SVG 폭의 절반 만큼 좌측 */
}

/* 사이즈 — padding / font / 화살표 위치 매핑 */
.tds-tooltip--small .tds-tooltip__message {
  padding: 6px 8px;
  font-size: 12px;
  line-height: 16px;
  font-weight: var(--w-medium, 500);
}
.tds-tooltip--small .tds-tooltip__arrow-svg { transform: translateX(-50%); }

.tds-tooltip--medium .tds-tooltip__message {
  padding: 8px 10px;
  font-size: 13px;
  line-height: 18px;
  font-weight: var(--w-medium, 500);
}
.tds-tooltip--medium .tds-tooltip__arrow-svg { transform: translateX(-50%); }

.tds-tooltip--large .tds-tooltip__message {
  padding: 10px 12px;
  font-size: 14px;
  line-height: 20px;
  font-weight: var(--w-medium, 500);
}
.tds-tooltip--large .tds-tooltip__arrow-svg { transform: translateX(-50%); }

/* placement=bottom: 화살표는 메시지 위에 (위쪽을 가리킴) */
.tds-tooltip--bottom .tds-tooltip__arrow {
  /* 메시지 박스 위 모서리에 바로 붙음 — translateY(-100%) 로 메시지 위로 */
  top: 0;
  transform: translateY(-100%);
}
/* small/medium/large 의 화살표 높이만큼 위로 — 위 transform 이 처리.
   여백 보정 없음 (offset 은 JSX 가 trigger ↔ tooltip 거리에 반영). */

/* placement=top: 화살표는 메시지 아래에 (아래쪽을 가리킴) — SVG 회전 */
.tds-tooltip--top .tds-tooltip__arrow {
  bottom: 0;
  transform: translateY(100%);
}
.tds-tooltip--top .tds-tooltip__arrow-svg {
  /* 위쪽 향하는 삼각형을 180° 회전해 아래쪽으로 */
  transform: translateX(-50%) rotate(180deg);
}

/* messageAlign — style.width 가 있어야 의미 있음 */
.tds-tooltip--align-left   .tds-tooltip__message { text-align: left; }
.tds-tooltip--align-center .tds-tooltip__message { text-align: center; }
.tds-tooltip--align-right  .tds-tooltip__message { text-align: right; }

/* clipToEnd — 화살표의 절반만 남김 */
.tds-tooltip--clip-left .tds-tooltip__arrow {
  /* 오른쪽 절반을 가림 → 왼쪽만 남음 */
  overflow: hidden;
  width: 50%;
  /* SVG 는 absolute 라 폭은 0 일 수 있음. clip-path 로 잘라냄 */
}
.tds-tooltip--clip-left .tds-tooltip__arrow-svg {
  clip-path: polygon(0 0, 50% 0, 50% 100%, 0 100%);
}
.tds-tooltip--clip-right .tds-tooltip__arrow-svg {
  clip-path: polygon(50% 0, 100% 0, 100% 100%, 50% 100%);
}

/* 모션 강도 */
.tds-tooltip--motion-weak {
  transition: opacity 120ms ease-out, transform 120ms cubic-bezier(0.22, 1, 0.36, 1);
}
.tds-tooltip--motion-strong {
  transition:
    opacity 200ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1);
}

/* 등장 전 위치 (placement 별로 살짝 안쪽에서 시작) */
.tds-tooltip--bottom { transform: translateY(-4px); }
.tds-tooltip--top    { transform: translateY( 4px); }
.tds-tooltip--motion-strong.tds-tooltip--bottom { transform: translateY(-8px) scale(0.96); }
.tds-tooltip--motion-strong.tds-tooltip--top    { transform: translateY( 8px) scale(0.96); }

/* visible — 제자리로 + opacity 1 */
.tds-tooltip.is-visible { opacity: 1; transform: translateY(0); }
.tds-tooltip--motion-strong.is-visible { opacity: 1; transform: translateY(0) scale(1); }

/* prefers-reduced-motion — fade 만, 더 짧게 */
@media (prefers-reduced-motion: reduce) {
  .tds-tooltip,
  .tds-tooltip--motion-weak,
  .tds-tooltip--motion-strong {
    transition: opacity 80ms ease-out;
    transform: none;
  }
  .tds-tooltip.is-visible,
  .tds-tooltip--motion-strong.is-visible { transform: none; }
}

/* =============================================================================
 * TDS Top — 페이지 최상단 헤더/타이틀 빌더 (Task #156)
 *  · 슬롯: upper / 중앙(subtitleTop + title + subtitleBottom) / right / lower
 *  · 모든 색/폰트/굵기는 토큰 var(--…) 만 사용 — 하드코딩 없음
 *  · 본문 column 과 right 슬롯은 flex row, right 슬롯은 vertical center/end
 * ========================================================================== */
.tds-top {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* upperGap / lowerGap 은 인라인 padding-top/bottom 으로 주입 */
  box-sizing: border-box;
}

/* upper 슬롯 — 본문과의 간격 16px */
.tds-top__upper {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin-bottom: 16px;
}

/* upper 가 Asset 만일 때 한 단계 더 가운데 정렬 */
.tds-top__upper-asset {
  display: flex;
  align-items: center;
  justify-content: flex-start;
  margin: 0;
}

/* 본문 가로 분할 — 좌측 텍스트 컬럼 + 우측 슬롯 */
.tds-top__main {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

/* 좌측 텍스트 컬럼 — flex 1 */
.tds-top__center {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0;
}

/* 우측 슬롯 — 자기 크기, 중앙(or 끝) 정렬 */
.tds-top__right {
  display: flex;
  flex: 0 0 auto;
  flex-direction: column;
  /* default vertical center — Top--right-end 로 끝 정렬 */
  justify-content: center;
}
.tds-top--right-end .tds-top__right { justify-content: flex-end; }
.tds-top--right-center .tds-top__right { justify-content: center; }

/* right 슬롯 안 Asset 래퍼 */
.tds-top__right-asset {
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0;
}

/* subtitle ↔ title 간격 6px */
.tds-top__subtitle--top { margin-bottom: 6px; }
.tds-top__subtitle--bottom { margin-top: 6px; }

/* 타이틀 — Paragraph 위임이라 내부 마진 0 */
.tds-top__title { margin: 0; }
.tds-top__title-paragraph { margin: 0; }
.tds-top__subtitle-paragraph { margin: 0; }

/* lower 슬롯 — 본문과의 간격 16px */
.tds-top__lower {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  margin-top: 16px;
}

/* TitleSelector / SubtitleSelector — 트랜스페런트 버튼 + chev */
.tds-top__title-selector,
.tds-top__subtitle-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
}
.tds-top__title-selector:focus-visible,
.tds-top__subtitle-selector:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}
.tds-top__title-selector:active,
.tds-top__subtitle-selector:active { opacity: 0.7; }

.tds-top__title-selector-arrow,
.tds-top__subtitle-selector-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  color: var(--tds-grey-500);
}

/* chev SVG 공통 */
.tds-top__chev { display: block; color: currentColor; }

/* RightArrow — 단독 chev-right */
.tds-top__right-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

/* SubtitleBadges — 가로 묶음 */
.tds-top__subtitle-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  align-items: center;
}

/* LowerCTA — type="2-button" : 두 버튼 가로 1:1 */
.tds-top__lower-cta {
  display: flex;
  flex-direction: row;
  gap: 8px;
  width: 100%;
}
.tds-top__lower-cta-slot {
  flex: 1 1 0;
  min-width: 0;
}
.tds-top__lower-cta-slot > .tds-button { width: 100%; }

/* LowerButton — 작은 보조 버튼 (왼쪽 정렬 기본) */
.tds-top__lower-button { /* Button 컴포넌트가 시각 담당 */ }

/* RightButton — 작은 우측 버튼 */
.tds-top__right-button { /* Button 컴포넌트가 시각 담당 */ }

/* typography / weight 인라인 매핑 — 셀렉터 라벨 전용 (Paragraph 미경유 분) */
.tds-top__typo-t1  { font-size: var(--ty-1-fs);  line-height: var(--ty-1-lh); }
.tds-top__typo-t2  { font-size: var(--ty-2-fs);  line-height: var(--ty-2-lh); }
.tds-top__typo-t3  { font-size: var(--ty-3-fs);  line-height: var(--ty-3-lh); }
.tds-top__typo-t4  { font-size: var(--ty-4-fs);  line-height: var(--ty-4-lh); }
.tds-top__typo-t5  { font-size: var(--ty-5-fs);  line-height: var(--ty-5-lh); }
.tds-top__typo-t6  { font-size: var(--ty-6-fs);  line-height: var(--ty-6-lh); }
.tds-top__typo-t7  { font-size: var(--ty-7-fs);  line-height: var(--ty-7-lh); }
.tds-top__typo-st1  { font-size: var(--sub-ty-1-fs);  line-height: var(--sub-ty-1-lh); }
.tds-top__typo-st2  { font-size: var(--sub-ty-2-fs);  line-height: var(--sub-ty-2-lh); }
.tds-top__typo-st3  { font-size: var(--sub-ty-3-fs);  line-height: var(--sub-ty-3-lh); }
.tds-top__typo-st4  { font-size: var(--sub-ty-4-fs);  line-height: var(--sub-ty-4-lh); }
.tds-top__typo-st5  { font-size: var(--sub-ty-5-fs);  line-height: var(--sub-ty-5-lh); }
.tds-top__typo-st6  { font-size: var(--sub-ty-6-fs);  line-height: var(--sub-ty-6-lh); }
.tds-top__typo-st7  { font-size: var(--sub-ty-7-fs);  line-height: var(--sub-ty-7-lh); }
.tds-top__typo-st8  { font-size: var(--sub-ty-8-fs);  line-height: var(--sub-ty-8-lh); }
.tds-top__typo-st9  { font-size: var(--sub-ty-9-fs);  line-height: var(--sub-ty-9-lh); }
.tds-top__typo-st10 { font-size: var(--sub-ty-10-fs); line-height: var(--sub-ty-10-lh); }
.tds-top__typo-st11 { font-size: var(--sub-ty-11-fs); line-height: var(--sub-ty-11-lh); }
.tds-top__typo-st12 { font-size: var(--sub-ty-12-fs); line-height: var(--sub-ty-12-lh); }
.tds-top__typo-st13 { font-size: var(--sub-ty-13-fs); line-height: var(--sub-ty-13-lh); }
.tds-top__fw-regular  { font-weight: var(--w-regular, 400); }
.tds-top__fw-medium   { font-weight: var(--w-medium); }
.tds-top__fw-semibold { font-weight: var(--w-semibold, 600); }
.tds-top__fw-bold     { font-weight: var(--w-bold); }

/* fallback 스타일 — 의존 컴포넌트(Paragraph/Button/TextButton/Badge) 미로드 시 */
.tds-top__title-paragraph--fallback {
  font-size: var(--ty-3-fs);
  line-height: var(--ty-3-lh);
  margin: 0;
}
.tds-top__subtitle-paragraph--fallback {
  font-size: var(--ty-5-fs);
  line-height: var(--ty-5-lh);
  margin: 0;
}
.tds-top__title-text-button--fallback,
.tds-top__subtitle-text-button--fallback,
.tds-top__lower-button--fallback,
.tds-top__lower-cta-button--fallback,
.tds-top__right-button--fallback {
  display: inline-flex;
  align-items: center;
  background: transparent;
  border: 0;
  padding: 0;
  cursor: pointer;
  font: inherit;
  color: inherit;
}

/* prefers-reduced-motion — Top 컴포넌트 자체에 모션은 없음 (조립 빌더), no-op */

/* =============================================================================
 * TDS AgreementV4 — 동의 화면 빌더 (Task #157)
 *  · 루트 + 15 서브 (Text/Badge/Checkbox/Necessity/RightArrow/Description/
 *    Header/Pressable/IndentPushable+Trigger+Content/Collapsible+Trigger+
 *    Content/Group). variant 6종(xLarge/large/medium/medium-title/small/small-last).
 * ========================================================================== */

/* ---------- root row ---------- */
.tds-agv4 {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  color: var(--tds-grey-800);
  font-family: var(--font);
}

.tds-agv4__left {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.tds-agv4__middle {
  flex: 1 1 auto;
  min-width: 0;
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
}

.tds-agv4__right {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: flex-end;
}

/* root variants — padding / typography */
.tds-agv4--xLarge {
  padding: 16px 0;
  font-size: var(--ty-3-fs);
  line-height: var(--ty-3-lh);
  font-weight: var(--w-bold);
}
.tds-agv4--large {
  padding: 14px 0;
  font-size: var(--ty-5-fs);
  line-height: var(--ty-5-lh);
  font-weight: var(--w-medium);
}
.tds-agv4--medium {
  padding: 12px 0;
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-regular);
}
.tds-agv4--medium-title {
  padding: 12px 0;
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-bold);
}
.tds-agv4--small {
  padding: 10px 0;
  font-size: var(--sub-ty-7-fs);
  line-height: var(--sub-ty-7-lh);
  font-weight: var(--w-regular);
}
.tds-agv4--small-last {
  padding: 10px 0 0 0;
  font-size: var(--sub-ty-7-fs);
  line-height: var(--sub-ty-7-lh);
  font-weight: var(--w-regular);
}

/* indent — 16px × n */
.tds-agv4--indent-0 { padding-left: 0; }
.tds-agv4--indent-1 { padding-left: 16px; }
.tds-agv4--indent-2 { padding-left: 32px; }
.tds-agv4--indent-3 { padding-left: 48px; }
.tds-agv4--indent-4 { padding-left: 64px; }

/* row 자체에 onPressEnd 가 있으면 cursor pointer */
.tds-agv4.is-pressable {
  cursor: pointer;
  border-radius: var(--r-sm);
  transition: background-color 120ms var(--ease);
}
.tds-agv4.is-pressable:hover {
  background-color: var(--tds-grey-50);
}
.tds-agv4.is-pressable:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
}

/* ---------- AgreementV4.Text ---------- */
.tds-agv4__text {
  display: inline-flex;
  align-items: baseline;
  gap: 6px;
  flex-wrap: wrap;
  color: inherit;
  font: inherit;
}
.tds-agv4__text-necessity {
  flex: 0 0 auto;
}
.tds-agv4__text-label {
  flex: 1 1 auto;
  min-width: 0;
}
.tds-agv4__text.is-pressable {
  cursor: pointer;
  text-decoration: underline;
  text-decoration-color: transparent;
  text-underline-offset: 3px;
  transition: text-decoration-color 120ms var(--ease);
}
.tds-agv4__text.is-pressable:hover {
  text-decoration-color: currentColor;
}
.tds-agv4__text.is-pressable:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ---------- AgreementV4.Badge ---------- */
.tds-agv4__badge {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 2px 8px;
  border-radius: var(--r-pill);
  font-size: var(--sub-ty-9-fs);
  line-height: var(--sub-ty-9-lh);
  font-weight: var(--w-medium);
  flex: 0 0 auto;
  white-space: nowrap;
}
.tds-agv4__badge--fill { /* bgColor 인라인 */ }
.tds-agv4__badge--clear {
  background-color: transparent;
  padding: 2px 4px;
}

/* ---------- AgreementV4.Checkbox ---------- */
.tds-agv4__checkbox {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  cursor: pointer;
  flex: 0 0 auto;
  -webkit-tap-highlight-color: transparent;
}
.tds-agv4__checkbox-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  cursor: inherit;
}
.tds-agv4__checkbox-visual {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  border-radius: 6px;
  background-color: var(--tds-grey-200);
  color: #ffffff;
  transition: background-color 200ms var(--ease), transform 200ms var(--ease-spring);
}
.tds-agv4__checkbox--motion-strong .tds-agv4__checkbox-visual {
  transition: background-color 220ms var(--ease), transform 240ms cubic-bezier(.34,1.56,.64,1);
}
.tds-agv4__checkbox.is-checked .tds-agv4__checkbox-visual {
  background-color: var(--tds-blue-500);
}
.tds-agv4__checkbox.is-checked.tds-agv4__checkbox--motion-strong .tds-agv4__checkbox-visual {
  transform: scale(1.06);
}
.tds-agv4__checkbox-icon {
  width: 18px;
  height: 18px;
  opacity: 0;
  transform: scale(0.6);
  transition: opacity 160ms var(--ease), transform 200ms var(--ease-spring);
}
.tds-agv4__checkbox.is-checked .tds-agv4__checkbox-icon {
  opacity: 1;
  transform: scale(1);
}
/* dot variant — 작은 점 (선택 시 파란 채움) */
.tds-agv4__checkbox--dot .tds-agv4__checkbox-visual {
  width: 16px;
  height: 16px;
  border-radius: 50%;
  background-color: transparent;
  border: 2px solid var(--tds-grey-300);
}
.tds-agv4__checkbox--dot.is-checked .tds-agv4__checkbox-visual {
  background-color: transparent;
  border-color: var(--tds-blue-500);
}
.tds-agv4__checkbox-dot {
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background-color: var(--tds-blue-500);
  opacity: 0;
  transform: scale(0.3);
  transition: opacity 160ms var(--ease), transform 200ms var(--ease-spring);
}
.tds-agv4__checkbox--dot.is-checked .tds-agv4__checkbox-dot {
  opacity: 1;
  transform: scale(1);
}
/* hidden variant — 시각만 숨김, 24px 공간은 유지 */
.tds-agv4__checkbox--hidden .tds-agv4__checkbox-visual {
  background-color: transparent;
  border: 0;
}
.tds-agv4__checkbox--hidden .tds-agv4__checkbox-icon,
.tds-agv4__checkbox--hidden .tds-agv4__checkbox-dot {
  display: none;
}
.tds-agv4__checkbox-hidden-spacer {
  display: block;
  width: 24px;
  height: 24px;
}
/* focus-visible — input 이 포커스되면 visual 에 outline */
.tds-agv4__checkbox-input:focus-visible + .tds-agv4__checkbox-visual {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
}

/* ---------- AgreementV4.Necessity ---------- */
.tds-agv4__necessity {
  display: inline-flex;
  align-items: center;
  font-size: var(--sub-ty-8-fs);
  line-height: var(--sub-ty-8-lh);
  font-weight: var(--w-medium);
  flex: 0 0 auto;
}
.tds-agv4__necessity--mandatory {
  color: var(--tds-blue-500);
}
.tds-agv4__necessity--optional {
  color: var(--tds-grey-600);
}

/* ---------- AgreementV4.RightArrow ---------- */
.tds-agv4__right-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  padding: 0;
  margin: 0;
  background: transparent;
  border: 0;
  cursor: pointer;
  color: var(--tds-grey-400);
  transition: transform 200ms var(--ease), color 120ms var(--ease);
  -webkit-tap-highlight-color: transparent;
}
.tds-agv4__right-arrow:hover { color: var(--tds-grey-600); }
.tds-agv4__right-arrow:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}
.tds-agv4__right-arrow.is-collapsed {
  transform: rotate(0deg);
}
.tds-agv4__right-arrow.is-expanded {
  transform: rotate(90deg);
}

/* ---------- AgreementV4.Description ---------- */
.tds-agv4__description {
  margin: 0;
  font-size: var(--sub-ty-8-fs);
  line-height: var(--sub-ty-8-lh);
  font-weight: var(--w-regular);
  color: var(--tds-grey-600);
}
.tds-agv4__description--normal {
  padding: 4px 0 8px 0;
}
.tds-agv4__description--box {
  padding: 12px 14px;
  background-color: var(--tds-grey-50);
  border-radius: var(--r-sm);
  margin: 4px 0 8px 0;
}
.tds-agv4__description--indent-0 { margin-left: 0; }
.tds-agv4__description--indent-1 { margin-left: 16px; }
.tds-agv4__description--indent-2 { margin-left: 32px; }
.tds-agv4__description--indent-3 { margin-left: 48px; }
.tds-agv4__description--indent-4 { margin-left: 64px; }

/* ---------- AgreementV4.Header ---------- */
.tds-agv4__header {
  display: block;
  width: 100%;
  color: var(--tds-grey-800);
  margin: 0;
}
.tds-agv4__header--xLarge {
  font-size: var(--ty-2-fs);
  line-height: var(--ty-2-lh);
  font-weight: var(--w-bold);
  padding: 24px 0 12px 0;
}
.tds-agv4__header--large {
  font-size: var(--ty-3-fs);
  line-height: var(--ty-3-lh);
  font-weight: var(--w-bold);
  padding: 20px 0 10px 0;
}
.tds-agv4__header--medium {
  font-size: var(--ty-5-fs);
  line-height: var(--ty-5-lh);
  font-weight: var(--w-semibold);
  padding: 16px 0 8px 0;
}
.tds-agv4__header--medium-title {
  font-size: var(--ty-5-fs);
  line-height: var(--ty-5-lh);
  font-weight: var(--w-bold);
  padding: 16px 0 8px 0;
}
.tds-agv4__header--small {
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-medium);
  padding: 12px 0 6px 0;
}
.tds-agv4__header--small-last {
  font-size: var(--ty-6-fs);
  line-height: var(--ty-6-lh);
  font-weight: var(--w-medium);
  padding: 12px 0 0 0;
}
.tds-agv4__header--indent-0 { padding-left: 0; }
.tds-agv4__header--indent-1 { padding-left: 16px; }
.tds-agv4__header--indent-2 { padding-left: 32px; }
.tds-agv4__header--indent-3 { padding-left: 48px; }
.tds-agv4__header--indent-4 { padding-left: 64px; }

/* ---------- AgreementV4.Pressable ---------- */
.tds-agv4__pressable {
  display: inline-flex;
  align-items: center;
  flex-wrap: wrap;
  column-gap: 8px;
  row-gap: 4px;
  cursor: pointer;
  color: inherit;
  font: inherit;
  -webkit-tap-highlight-color: transparent;
  border-radius: 4px;
}
.tds-agv4__pressable:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
}

/* ---------- AgreementV4.IndentPushable ---------- */
.tds-agv4__indent-pushable {
  display: block;
  width: 100%;
}
.tds-agv4__indent-pushable-trigger {
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tds-agv4__indent-pushable-trigger:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.tds-agv4__indent-pushable-content {
  display: block;
  width: 100%;
}

/* ---------- AgreementV4.Collapsible ---------- */
.tds-agv4__collapsible {
  display: block;
  width: 100%;
}
.tds-agv4__collapsible-trigger {
  display: block;
  width: 100%;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}
.tds-agv4__collapsible-trigger:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: var(--r-sm);
}
.tds-agv4__collapsible-content {
  display: block;
  width: 100%;
  overflow: hidden;
  transition: max-height 240ms var(--ease), opacity 200ms var(--ease);
}
.tds-agv4__collapsible-content.is-hidden {
  max-height: 0;
  opacity: 0;
  pointer-events: none;
}
.tds-agv4__collapsible-content.is-visible {
  max-height: 4000px; /* 충분히 큰 값 — 실측 height 가 작으므로 transition 가능 */
  opacity: 1;
}
/* RightArrow 가 Collapsible 안에 있으면 trigger 클릭 시 자동으로 회전 동기화 */
.tds-agv4__collapsible.is-expanded .tds-agv4__right-arrow.is-collapsed {
  /* RightArrow 컴포넌트가 자체로 ctx.collapsed 를 읽어 회전하므로 추가 룰 불요 */
}

/* ---------- AgreementV4.Group ---------- */
.tds-agv4__group {
  position: relative;
  display: block;
  width: 100%;
  padding-left: 8px; /* 그라데이션 라인 공간 */
}
.tds-agv4__group--gradient::before {
  content: "";
  position: absolute;
  left: 0;
  top: 12px;
  bottom: 12px;
  width: 2px;
  background: linear-gradient(
    to bottom,
    var(--tds-grey-300) 0%,
    var(--tds-grey-200) 50%,
    transparent 100%
  );
  border-radius: 1px;
  pointer-events: none;
}

/* prefers-reduced-motion — 체크박스/화살표/콜랩스 트랜지션 OFF */
@media (prefers-reduced-motion: reduce) {
  .tds-agv4.is-pressable,
  .tds-agv4__checkbox-visual,
  .tds-agv4__checkbox-icon,
  .tds-agv4__checkbox-dot,
  .tds-agv4__right-arrow,
  .tds-agv4__collapsible-content {
    transition: none !important;
  }
}

/* =============================================================================
 * TDS Asset (#158)  ─  Frame + Icon/Image/Lottie/Text/Video
 *  · 베이스: .tds-asset-frame (width/height/border-radius CSS 변수)
 *  · 컨텐츠: .tds-asset-frame__content (이미지/아이콘/로티/텍스트/비디오 자유)
 *  · 액세서리: .tds-asset-frame__acc (4 모서리 + circle masking)
 *  · 오버랩: ::before pseudo (border 색 = overlap.color, 합쳐졌음을 표시)
 *  · Stepper.AssetFrame(#149) 와는 다른 클래스명 — 의도적 분리
 * ========================================================================== */

/* ─── 베이스 컨테이너 ─────────────────────────────────────────────────── */
.tds-asset-frame {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width:  var(--tds-asset-w, auto);
  height: var(--tds-asset-h, auto);
  /* 기본 라운드 — 호출자가 안 주면 라운드 없음 (사각) */
  border-radius: var(--tds-asset-r, 0);
  /* 기본 배경: adaptive.grey100 (var(--tds-grey-100)) — 호출자가 backgroundColor 명시 가능 */
  background-color: transparent; /* 실제 색은 ::__bg 가 칠함 (overlap pseudo 와 z-stack 분리용) */
  color: var(--tds-asset-color, currentColor);
  overflow: hidden;
  isolation: isolate; /* z-index 격리 — 부모 stacking context 영향 X */
  vertical-align: middle;
  flex-shrink: 0;
}

/* 배경 레이어 — content 보다 뒤, 라운드 따라감 */
.tds-asset-frame__bg {
  position: absolute;
  inset: 0;
  border-radius: inherit;
  background-color: var(--tds-asset-bg, var(--tds-grey-100));
  z-index: 0;
  pointer-events: none;
}

/* 컨텐츠 슬롯 — Frame 가득 채움 */
.tds-asset-frame__content {
  position: relative;
  z-index: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
  /* content 자체는 라운드 안 따라감 — img/video 가 알아서 object-fit 으로 채움
     단 부모 .tds-asset-frame 의 overflow: hidden 으로 잘림 */
}

/* ─── 액세서리 ───────────────────────────────────────────────────────── */
.tds-asset-frame__acc {
  position: absolute;
  z-index: 2;
  width:  var(--tds-asset-acc-w, 24%);
  height: var(--tds-asset-acc-h, 24%);
  min-width: 16px;
  min-height: 16px;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}

/* 4 모서리 위치 — 기본은 모서리에 살짝 걸치도록 (transform 으로 50% 밀어냄) */
.tds-asset-frame--acc-top-left .tds-asset-frame__acc {
  top:  var(--tds-asset-acc-y, 0);
  left: var(--tds-asset-acc-x, 0);
  transform: translate(-25%, -25%);
}
.tds-asset-frame--acc-top-right .tds-asset-frame__acc {
  top:   var(--tds-asset-acc-y, 0);
  right: var(--tds-asset-acc-x, 0);
  transform: translate(25%, -25%);
}
.tds-asset-frame--acc-bottom-left .tds-asset-frame__acc {
  bottom: var(--tds-asset-acc-y, 0);
  left:   var(--tds-asset-acc-x, 0);
  transform: translate(-25%, 25%);
}
.tds-asset-frame--acc-bottom-right .tds-asset-frame__acc {
  bottom: var(--tds-asset-acc-y, 0);
  right:  var(--tds-asset-acc-x, 0);
  transform: translate(25%, 25%);
}

/* accMasking="circle" — 액세서리 아래 컨텐츠를 원형으로 파냄
   (액세서리가 컨텐츠를 덮을 때 깔끔한 시각 분리) */
.tds-asset-frame--acc-mask-circle .tds-asset-frame__content {
  -webkit-mask-image: radial-gradient(circle at var(--tds-asset-mask-cx, 100%) var(--tds-asset-mask-cy, 100%),
                       transparent var(--tds-asset-mask-r, 14%), black calc(var(--tds-asset-mask-r, 14%) + 1px));
          mask-image: radial-gradient(circle at var(--tds-asset-mask-cx, 100%) var(--tds-asset-mask-cy, 100%),
                       transparent var(--tds-asset-mask-r, 14%), black calc(var(--tds-asset-mask-r, 14%) + 1px));
}

/* ─── 오버랩 (여러 항목 합쳐짐 표시) ──────────────────────────────────── */
.tds-asset-frame--has-overlap::before {
  content: "";
  position: absolute;
  inset: calc(var(--tds-asset-overlap-spread, 0px) * -1);
  border-radius: inherit;
  background-color: var(--tds-asset-overlap-color, transparent);
  transform: translate(var(--tds-asset-overlap-x, 6px), var(--tds-asset-overlap-y, 6px));
  filter: blur(var(--tds-asset-overlap-blur, 0px));
  z-index: -1; /* isolation 으로 격리됨 — 같은 stacking context 내에서만 뒤로 */
  pointer-events: none;
}

/* ─── ContentImage ───────────────────────────────────────────────────── */
.tds-asset-content--image {
  display: block;
  /* width/height/object-fit 은 인라인 style 로 주입 — scale prop 지원 */
  border-radius: 0; /* 라운드는 부모 .tds-asset-frame 의 overflow: hidden 이 처리 */
}

/* ─── ContentIcon ────────────────────────────────────────────────────── */
.tds-asset-content--icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 70%;
  height: 70%;
  color: inherit; /* Frame 의 color CSS 변수 따라감 */
}
.tds-asset-content--icon-fallback {
  border-radius: 50%;
  background-color: var(--tds-grey-300);
}

/* ─── ContentLottie ──────────────────────────────────────────────────── */
.tds-asset-content--lottie {
  display: block;
  width: 100%;
  height: 100%;
}
.tds-asset-content--lottie > svg {
  display: block;
  width: 100%;
  height: 100%;
}

/* ─── ContentText ────────────────────────────────────────────────────── */
.tds-asset-content--text {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sub-ty-5-fs);
  line-height: var(--sub-ty-5-lh);
  font-weight: var(--w-medium);
  color: var(--tds-grey-800);
  text-align: center;
  padding: 4px 8px;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ─── ContentVideo ───────────────────────────────────────────────────── */
.tds-asset-content--video {
  display: block;
  background: transparent;
}

/* ─── prefers-reduced-motion — Lottie/Video 자동재생 그대로 두되, transition 만 OFF */
@media (prefers-reduced-motion: reduce) {
  .tds-asset-frame,
  .tds-asset-frame__bg,
  .tds-asset-frame__acc {
    transition: none !important;
  }
}

/* =============================================================================
 * TDS BottomCTA / FixedBottomCTA (#159)
 *  · 화면 하단 액션 영역.
 *  · 변종: Single (children 1개) / Double (leftButton + rightButton)
 *  · 포지션: static (기본) / fixed
 *  · 트랜지션: fade (기본) / scale / slide  ─ 240ms cubic-bezier(0.22,1,0.36,1)
 *  · 패딩: hasSafeAreaPadding (true 기본) + hasPaddingBottom (true 기본)
 *          → max(toss-safe-area, env(safe-area-inset-bottom), 20px)
 *  · 배경: default (위쪽 페이드 그라데이션) / none (투명)
 *  · 키보드 위 따라오기: --bottom-cta-keyboard-offset (translateY 로 위로)
 * ========================================================================== */

/* ─── 베이스 컨테이너 ─────────────────────────────────────────────────── */
.tds-bcta {
  /* 외부에서 오버라이드 가능한 CSS 변수 묶음 */
  --bottom-cta-padding-x: 16px;
  --bottom-cta-padding-top: 12px;
  --bottom-cta-padding-bottom: max(
    var(--toss-safe-area-bottom, 0px),
    var(--sa-bottom, 0px),
    env(safe-area-inset-bottom, 0px),
    20px
  );
  --bottom-cta-fade-h: 24px;
  --bottom-cta-z: 50;
  --bottom-cta-keyboard-offset: 0px;

  position: relative;
  display: block;
  box-sizing: border-box;
  padding:
    var(--bottom-cta-padding-top)
    var(--bottom-cta-padding-x)
    var(--bottom-cta-padding-bottom);
  /* 트랜지션 — 등장/숨김 공통.
     transform 은 animation 별로 변형, opacity 는 항상 변형. */
  transition:
    opacity 240ms cubic-bezier(0.22, 1, 0.36, 1),
    transform 240ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: opacity, transform;
}

/* hasPaddingBottom = false → 하단 패딩 0 */
.tds-bcta--no-pb {
  --bottom-cta-padding-bottom: 0px;
}

/* hasSafeAreaPadding = false → 세이프에어리어 무시, 20 px 만 (또는 no-pb 면 0) */
.tds-bcta--no-safe {
  --bottom-cta-padding-bottom: 20px;
}
.tds-bcta--no-safe.tds-bcta--no-pb {
  --bottom-cta-padding-bottom: 0px;
}

/* ─── 배경 ─────────────────────────────────────────────────────────────── */
/* default — 본문 → CTA 영역으로 자연스럽게 이어지는 위쪽 페이드. */
.tds-bcta--bg-default {
  background:
    linear-gradient(
      to bottom,
      rgba(255, 255, 255, 0) 0,
      var(--bg-2, #ffffff) var(--bottom-cta-fade-h)
    );
  background-color: var(--bg-2, #ffffff);
}
.tds-bcta--bg-default.tds-bcta--fixed {
  /* fixed 모드에서는 위쪽 페이드 길이를 더 길게 — 본문 가림이 부드럽게 보이도록 */
  --bottom-cta-fade-h: 40px;
}
.tds-bcta--bg-none {
  background: transparent;
}

/* ─── 포지션 ──────────────────────────────────────────────────────────── */
.tds-bcta--fixed {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: var(--bottom-cta-z);
  /* 키보드 위 띄움 — 키보드 만큼 위로 translate */
  transform: translateY(calc(-1 * var(--bottom-cta-keyboard-offset, 0px)));
}

/* ─── 등장/숨김 상태 ─────────────────────────────────────────────────── */
/* fade — 등장 전: opacity 0 / 등장 후: opacity 1 */
.tds-bcta--anim-fade.is-pre  { opacity: 0; }
.tds-bcta--anim-fade.is-entered { opacity: 1; }

/* scale — 등장 전: scale(0.96) opacity 0 / 등장 후: scale(1) opacity 1 */
.tds-bcta--anim-scale.is-pre {
  opacity: 0;
  transform: scale(0.96) translateY(calc(-1 * var(--bottom-cta-keyboard-offset, 0px)));
}
.tds-bcta--anim-scale.is-entered {
  opacity: 1;
  transform: scale(1) translateY(calc(-1 * var(--bottom-cta-keyboard-offset, 0px)));
}

/* slide — 등장 전: translateY(8px) opacity 0 / 등장 후: 원위치 + opacity 1 */
.tds-bcta--anim-slide.is-pre {
  opacity: 0;
  transform: translateY(calc(8px - var(--bottom-cta-keyboard-offset, 0px)));
}
.tds-bcta--anim-slide.is-entered {
  opacity: 1;
  transform: translateY(calc(-1 * var(--bottom-cta-keyboard-offset, 0px)));
}

/* fixed 가 아닌 (static) 케이스: scale/slide 의 키보드 오프셋은 의미 없음 */
.tds-bcta:not(.tds-bcta--fixed).tds-bcta--anim-scale.is-entered { transform: scale(1); }
.tds-bcta:not(.tds-bcta--fixed).tds-bcta--anim-slide.is-entered { transform: translateY(0); }
.tds-bcta:not(.tds-bcta--fixed).tds-bcta--anim-slide.is-pre     { transform: translateY(8px); }
.tds-bcta:not(.tds-bcta--fixed).tds-bcta--anim-scale.is-pre     { transform: scale(0.96); }

/* show=false 또는 hideOnScroll 트리거 — 살짝 아래로 + opacity 0 */
.tds-bcta.is-hidden,
.tds-bcta.is-hide-requested {
  opacity: 0;
  transform: translateY(8px);
  pointer-events: none;
}
.tds-bcta--fixed.is-hidden,
.tds-bcta--fixed.is-hide-requested {
  /* fixed 면 키보드 오프셋과 합쳐서 처리 */
  transform: translateY(calc(8px - var(--bottom-cta-keyboard-offset, 0px)));
}

/* ─── 슬롯 ─────────────────────────────────────────────────────────── */
.tds-bcta__top-accessory,
.tds-bcta__bottom-accessory {
  display: block;
}
.tds-bcta__top-accessory    { margin-bottom: 8px; }
.tds-bcta__bottom-accessory { margin-top: 8px; }

.tds-bcta__buttons { display: block; width: 100%; }

/* Single — 풀폭 1 개 */
.tds-bcta__single-slot { display: block; width: 100%; }
.tds-bcta__single-slot > * { width: 100%; box-sizing: border-box; }

/* Double — grid (gridTemplateColumns 은 인라인 style 로 ratio 주입) */
.tds-bcta__double-slot {
  display: grid;
  grid-template-columns: 1fr 1fr; /* 인라인 style 로 덮어씀 */
  gap: 8px;
  width: 100%;
}
.tds-bcta__double-left  > *,
.tds-bcta__double-right > * {
  width: 100%;
  box-sizing: border-box;
}

/* Spacer (takeSpace 자동 + 외부 직접 사용 공통) */
.tds-bcta__spacer {
  display: block;
  width: 100%;
  pointer-events: none;
}

/* fallback button (Button(#127) 미로드 대비) */
.tds-bcta__fallback-btn {
  display: block;
  width: 100%;
  min-height: 56px;
  border: 0;
  border-radius: 12px;
  background: var(--tds-blue-500, #3182f6);
  color: #ffffff;
  font-size: 17px;
  font-weight: 600;
  cursor: pointer;
}

/* ─── prefers-reduced-motion — 모든 transition/transform OFF ────────── */
@media (prefers-reduced-motion: reduce) {
  .tds-bcta {
    transition: none !important;
  }
  .tds-bcta.is-pre,
  .tds-bcta.is-entered,
  .tds-bcta.is-hidden,
  .tds-bcta.is-hide-requested {
    transform: none !important;
  }
  /* fixed + 키보드 오프셋만 즉시 반영 (애니메이션 없이 키보드 따라오기는 유지) */
  .tds-bcta--fixed.is-entered {
    transform: translateY(calc(-1 * var(--bottom-cta-keyboard-offset, 0px))) !important;
  }
}

/* =============================================================================
 * TDS BarChart (#160)
 *  · 막대 그래프 — 값은 maxValue 대비 비율로 높이 계산 (--tds-bchart-ratio)
 *  · 전체 높이 = --tds-bchart-h (기본 205px, props.height 로 주입)
 *  · 7 테마: blue/green/yellow/orange/red/grey/default — 테마별 막대 배경색
 *  · data.length > 12 → .tds-bchart--many 에서 중간 항목의 annotation/label 숨김
 *  · prefers-reduced-motion 시 막대 등장 transition OFF
 * ========================================================================== */

.tds-bchart {
  --tds-bchart-h: 205px;
  --tds-bchart-bar-gap: 12px;
  --tds-bchart-track-color: var(--tds-grey-100);
  --tds-bchart-track-radius: 6px;
  --tds-bchart-label-gap: 8px;
  --tds-bchart-annotation-gap: 6px;

  display: block;
  width: 100%;
  box-sizing: border-box;
}

/* ─── 막대 컨테이너 — 가로 flex ─────────────────────────────────────── */
.tds-bchart__bars {
  display: flex;
  flex-direction: row;
  align-items: stretch;
  justify-content: space-between;
  gap: var(--tds-bchart-bar-gap);
  width: 100%;
  /* 내부 항목 하나 전체 높이 = annotation + track + label 의 합.
     track 영역만 height 로 강제 + 나머지는 auto (텍스트). */
}

/* ─── 개별 칼럼 (annotation / track / label) ────────────────────────── */
.tds-bchart__col {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  /* 막대 색상 토큰 — 테마별 modifier 가 덮어씀 */
  --tds-bchart-fill: var(--tds-grey-300);
}

.tds-bchart__col--blue    { --tds-bchart-fill: var(--tds-blue-500); }
.tds-bchart__col--green   { --tds-bchart-fill: var(--tds-green-500); }
.tds-bchart__col--yellow  { --tds-bchart-fill: var(--tds-yellow-500); }
.tds-bchart__col--orange  { --tds-bchart-fill: var(--tds-orange-500); }
.tds-bchart__col--red     { --tds-bchart-fill: var(--tds-red-500); }
.tds-bchart__col--grey    { --tds-bchart-fill: var(--tds-grey-500); }
.tds-bchart__col--default { --tds-bchart-fill: var(--tds-grey-300); }

/* ─── 어노테이션 (막대 위) ──────────────────────────────────────────── */
.tds-bchart__annotation {
  font-size: var(--sub-ty-9-fs);
  line-height: var(--sub-ty-9-lh);
  font-weight: var(--w-medium);
  color: var(--tds-grey-700);
  text-align: center;
  margin-bottom: var(--tds-bchart-annotation-gap);
  min-height: 1em; /* 값이 없어도 라인 맞춤 */
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── 트랙 (회색 배경) + 막대 (색 채움) ────────────────────────────── */
.tds-bchart__track {
  position: relative;
  width: 100%;
  max-width: 28px; /* 너무 굵지 않게 — 항목이 적을 때도 얇게 */
  height: var(--tds-bchart-h);
  background-color: var(--tds-bchart-track-color);
  border-radius: var(--tds-bchart-track-radius);
  overflow: hidden;
}
.tds-bchart__bar {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  /* height = ratio × 100% — calc 로 주입 */
  height: calc(var(--tds-bchart-ratio, 0) * 100%);
  background-color: var(--tds-bchart-fill);
  border-radius: var(--tds-bchart-track-radius);
  /* 최소 두께 보장 — value > 0 인데 바가 안 보이지 않도록 */
  min-height: 0;
  transition: height 320ms cubic-bezier(0.22, 1, 0.36, 1);
  will-change: height;
}

/* ─── 하단 레이블 ───────────────────────────────────────────────────── */
.tds-bchart__label {
  font-size: var(--sub-ty-10-fs);
  line-height: var(--sub-ty-10-lh);
  font-weight: var(--w-regular);
  color: var(--tds-grey-600);
  text-align: center;
  margin-top: var(--tds-bchart-label-gap);
  min-height: 1em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 100%;
}

/* ─── 항목 > 12 — 중간 항목의 annotation + label 숨김 ──────────────── */
.tds-bchart--many .tds-bchart__col--hide-meta .tds-bchart__annotation,
.tds-bchart--many .tds-bchart__col--hide-meta .tds-bchart__label {
  visibility: hidden; /* 공간 유지 — 막대 정렬 흐트러짐 방지 */
}
/* 항목이 많으면 gap 도 좁게 */
.tds-bchart--many {
  --tds-bchart-bar-gap: 4px;
}

/* ─── 접근성 대안 — prefers-reduced-motion ─────────────────────────── */
@media (prefers-reduced-motion: reduce) {
  .tds-bchart__bar {
    transition: none !important;
  }
}

/* =============================================================================
 * TDS AlertDialog (#161)
 *  · 단일 확인 버튼 다이얼로그 — 제목 + 설명 + AlertButton.
 *  · Modal(#137) 과 유사한 portal 패턴이지만 자체 독립 구현 (서로 겹쳐 떠도 OK).
 *  · closeOnDimmerClick=false 시 딤 클릭 → .tds-alertdialog--wiggle 400ms 부여.
 *  · prefers-reduced-motion 시 fade 만 120ms.
 * ========================================================================== */
.tds-alertdialog {
  position: fixed;
  inset: 0;
  z-index: 1950;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tds-alertdialog-open {
  overflow: hidden !important;
}
.tds-alertdialog__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease-out;
  -webkit-tap-highlight-color: transparent;
  border: 0;
}
.tds-alertdialog__overlay:focus { outline: none; }
.tds-alertdialog--entered .tds-alertdialog__overlay {
  opacity: 1;
}

.tds-alertdialog__content {
  position: relative;
  z-index: 2050;
  pointer-events: auto;

  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.18);

  /* 모바일 기준 폭 — 좌우 24px 여백, 최대 360px */
  width: calc(100vw - 48px);
  max-width: 360px;
  /* 세로 — 화면을 넘기면 description 영역이 스크롤 */
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;

  /* 등장 애니메이션 초기 상태 */
  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;

  outline: none;
  color: var(--tds-grey-900);
}
.tds-alertdialog--entered .tds-alertdialog__content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── 내부 슬롯 간격 ── */
.tds-alertdialog__title-slot {
  padding: 28px 24px 0;
  text-align: center;
}
.tds-alertdialog__description-slot {
  padding: 8px 24px 0;
  text-align: center;
  /* 긴 설명은 내부 스크롤 */
  overflow-y: auto;
  /* description 단독 일 때도 title-slot 의 최소 top padding 보강 */
}
.tds-alertdialog__title-slot + .tds-alertdialog__description-slot {
  padding-top: 10px;
}
.tds-alertdialog__button-slot {
  padding: 20px 16px 16px;
  display: flex;
  justify-content: center;
  align-items: center;
  /* 설명만 있고 버튼이 이어질 때 상단 여백 보정 */
}
.tds-alertdialog__description-slot + .tds-alertdialog__button-slot,
.tds-alertdialog__title-slot + .tds-alertdialog__button-slot {
  padding-top: 24px;
}

/* ── Title ── */
.tds-alertdialog__title {
  margin: 0;
  color: var(--tds-grey-800);
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tds-alertdialog__title--t1 { font-size: var(--ty-1-fs); line-height: var(--ty-1-lh); }
.tds-alertdialog__title--t2 { font-size: var(--ty-2-fs); line-height: var(--ty-2-lh); }
.tds-alertdialog__title--t3 { font-size: var(--ty-3-fs); line-height: var(--ty-3-lh); }
.tds-alertdialog__title--t4 { font-size: var(--ty-4-fs); line-height: var(--ty-4-lh); }
.tds-alertdialog__title--t5 { font-size: var(--ty-5-fs); line-height: var(--ty-5-lh); }
.tds-alertdialog__title--t6 { font-size: var(--ty-6-fs); line-height: var(--ty-6-lh); }
.tds-alertdialog__title--t7 { font-size: var(--ty-7-fs); line-height: var(--ty-7-lh); }
.tds-alertdialog__title--st1  { font-size: var(--sub-ty-1-fs);  line-height: var(--sub-ty-1-lh); }
.tds-alertdialog__title--st2  { font-size: var(--sub-ty-2-fs);  line-height: var(--sub-ty-2-lh); }
.tds-alertdialog__title--st3  { font-size: var(--sub-ty-3-fs);  line-height: var(--sub-ty-3-lh); }
.tds-alertdialog__title--st4  { font-size: var(--sub-ty-4-fs);  line-height: var(--sub-ty-4-lh); }
.tds-alertdialog__title--st5  { font-size: var(--sub-ty-5-fs);  line-height: var(--sub-ty-5-lh); }
.tds-alertdialog__title--st6  { font-size: var(--sub-ty-6-fs);  line-height: var(--sub-ty-6-lh); }
.tds-alertdialog__title--st7  { font-size: var(--sub-ty-7-fs);  line-height: var(--sub-ty-7-lh); }
.tds-alertdialog__title--st8  { font-size: var(--sub-ty-8-fs);  line-height: var(--sub-ty-8-lh); }
.tds-alertdialog__title--st9  { font-size: var(--sub-ty-9-fs);  line-height: var(--sub-ty-9-lh); }
.tds-alertdialog__title--st10 { font-size: var(--sub-ty-10-fs); line-height: var(--sub-ty-10-lh); }
.tds-alertdialog__title--st11 { font-size: var(--sub-ty-11-fs); line-height: var(--sub-ty-11-lh); }
.tds-alertdialog__title--st12 { font-size: var(--sub-ty-12-fs); line-height: var(--sub-ty-12-lh); }
.tds-alertdialog__title--st13 { font-size: var(--sub-ty-13-fs); line-height: var(--sub-ty-13-lh); }
.tds-alertdialog__title--w-regular  { font-weight: var(--w-regular); }
.tds-alertdialog__title--w-medium   { font-weight: var(--w-medium); }
.tds-alertdialog__title--w-semibold { font-weight: var(--w-semibold); }
.tds-alertdialog__title--w-bold     { font-weight: var(--w-bold); }

/* ── Description ── */
.tds-alertdialog__description {
  margin: 0;
  color: var(--tds-grey-600);
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tds-alertdialog__description--t1 { font-size: var(--ty-1-fs); line-height: var(--ty-1-lh); }
.tds-alertdialog__description--t2 { font-size: var(--ty-2-fs); line-height: var(--ty-2-lh); }
.tds-alertdialog__description--t3 { font-size: var(--ty-3-fs); line-height: var(--ty-3-lh); }
.tds-alertdialog__description--t4 { font-size: var(--ty-4-fs); line-height: var(--ty-4-lh); }
.tds-alertdialog__description--t5 { font-size: var(--ty-5-fs); line-height: var(--ty-5-lh); }
.tds-alertdialog__description--t6 { font-size: var(--ty-6-fs); line-height: var(--ty-6-lh); }
.tds-alertdialog__description--t7 { font-size: var(--ty-7-fs); line-height: var(--ty-7-lh); }
.tds-alertdialog__description--st1  { font-size: var(--sub-ty-1-fs);  line-height: var(--sub-ty-1-lh); }
.tds-alertdialog__description--st2  { font-size: var(--sub-ty-2-fs);  line-height: var(--sub-ty-2-lh); }
.tds-alertdialog__description--st3  { font-size: var(--sub-ty-3-fs);  line-height: var(--sub-ty-3-lh); }
.tds-alertdialog__description--st4  { font-size: var(--sub-ty-4-fs);  line-height: var(--sub-ty-4-lh); }
.tds-alertdialog__description--st5  { font-size: var(--sub-ty-5-fs);  line-height: var(--sub-ty-5-lh); }
.tds-alertdialog__description--st6  { font-size: var(--sub-ty-6-fs);  line-height: var(--sub-ty-6-lh); }
.tds-alertdialog__description--st7  { font-size: var(--sub-ty-7-fs);  line-height: var(--sub-ty-7-lh); }
.tds-alertdialog__description--st8  { font-size: var(--sub-ty-8-fs);  line-height: var(--sub-ty-8-lh); }
.tds-alertdialog__description--st9  { font-size: var(--sub-ty-9-fs);  line-height: var(--sub-ty-9-lh); }
.tds-alertdialog__description--st10 { font-size: var(--sub-ty-10-fs); line-height: var(--sub-ty-10-lh); }
.tds-alertdialog__description--st11 { font-size: var(--sub-ty-11-fs); line-height: var(--sub-ty-11-lh); }
.tds-alertdialog__description--st12 { font-size: var(--sub-ty-12-fs); line-height: var(--sub-ty-12-lh); }
.tds-alertdialog__description--st13 { font-size: var(--sub-ty-13-fs); line-height: var(--sub-ty-13-lh); }
.tds-alertdialog__description--w-regular  { font-weight: var(--w-regular); }
.tds-alertdialog__description--w-medium   { font-weight: var(--w-medium); }
.tds-alertdialog__description--w-semibold { font-weight: var(--w-semibold); }
.tds-alertdialog__description--w-bold     { font-weight: var(--w-bold); }

/* ── AlertButton (TextButton 폴백용) ── */
.tds-alertdialog__alert-button--fallback {
  appearance: none;
  border: 0;
  background: transparent;
  padding: 8px 16px;
  min-height: 40px;
  font-size: var(--sub-ty-5-fs);
  line-height: var(--sub-ty-5-lh);
  cursor: pointer;
  transition: opacity 120ms ease-out;
}
.tds-alertdialog__alert-button--fallback:hover { opacity: 0.85; }
.tds-alertdialog__alert-button--fallback:active { opacity: 0.6; }
.tds-alertdialog__alert-button--fallback:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Wiggle 애니메이션 ── */
@keyframes tds-alertdialog-wiggle {
  0%   { transform: translateY(0) scale(1) translateX(0); }
  15%  { transform: translateY(0) scale(1) translateX(-6px); }
  30%  { transform: translateY(0) scale(1) translateX(6px); }
  45%  { transform: translateY(0) scale(1) translateX(-4px); }
  60%  { transform: translateY(0) scale(1) translateX(4px); }
  75%  { transform: translateY(0) scale(1) translateX(-2px); }
  100% { transform: translateY(0) scale(1) translateX(0); }
}
.tds-alertdialog--wiggle .tds-alertdialog__content {
  animation: tds-alertdialog-wiggle 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── 모션 줄임 ── */
@media (prefers-reduced-motion: reduce) {
  .tds-alertdialog__overlay,
  .tds-alertdialog__content {
    transition-duration: 120ms !important;
  }
  .tds-alertdialog__content {
    transform: none !important;
  }
  .tds-alertdialog--entered .tds-alertdialog__content {
    transform: none !important;
  }
  .tds-alertdialog--wiggle .tds-alertdialog__content {
    animation: none !important;
  }
}

/* =============================================================================
 * TDS ConfirmDialog (#162)
 *  · 취소 + 확인 2 버튼 다이얼로그. 사용자의 액션이나 선택이 필요한 상황.
 *  · AlertDialog(#161) 와 같은 portal/wiggle/popstate 패턴, 자체 독립 구현.
 *  · 버튼 텍스트가 짧으면 가로(1:1), 길면 세로(풀폭) — JS 측정 후 클래스 토글.
 *  · z-index 1960/2060 (AlertDialog 1950/2050 위에 살짝).
 * ========================================================================== */
.tds-confirmdialog {
  position: fixed;
  inset: 0;
  z-index: 1960;
  display: flex;
  align-items: center;
  justify-content: center;
  pointer-events: none;
}
.tds-confirmdialog-open {
  overflow: hidden !important;
}
.tds-confirmdialog__overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  pointer-events: auto;
  cursor: pointer;
  opacity: 0;
  transition: opacity 200ms ease-out;
  -webkit-tap-highlight-color: transparent;
  border: 0;
}
.tds-confirmdialog__overlay:focus { outline: none; }
.tds-confirmdialog--entered .tds-confirmdialog__overlay {
  opacity: 1;
}

.tds-confirmdialog__content {
  position: relative;
  z-index: 2060;
  pointer-events: auto;

  background: #ffffff;
  border-radius: 18px;
  box-shadow:
    0 1px 2px rgba(0, 0, 0, 0.08),
    0 24px 48px rgba(0, 0, 0, 0.18);

  width: calc(100vw - 48px);
  max-width: 360px;
  max-height: calc(100dvh - 48px);
  display: flex;
  flex-direction: column;

  opacity: 0;
  transform: translateY(8px) scale(0.98);
  transition:
    opacity 200ms ease-out,
    transform 200ms ease-out;

  outline: none;
  color: var(--tds-grey-900);
}
.tds-confirmdialog--entered .tds-confirmdialog__content {
  opacity: 1;
  transform: translateY(0) scale(1);
}

/* ── 내부 슬롯 ── */
.tds-confirmdialog__title-slot {
  padding: 28px 24px 0;
  text-align: center;
}
.tds-confirmdialog__description-slot {
  padding: 8px 24px 0;
  text-align: center;
  overflow-y: auto;
}
.tds-confirmdialog__title-slot + .tds-confirmdialog__description-slot {
  padding-top: 10px;
}

/* ── 버튼 행: 가로(기본) ↔ 세로(자동 전환) ── */
.tds-confirmdialog__button-row {
  padding: 20px 16px 16px;
  display: flex;
  align-items: stretch;
  justify-content: center;
  gap: 8px;
}
.tds-confirmdialog__description-slot + .tds-confirmdialog__button-row,
.tds-confirmdialog__title-slot + .tds-confirmdialog__button-row {
  padding-top: 24px;
}
.tds-confirmdialog__button-row--horizontal {
  flex-direction: row;
}
.tds-confirmdialog__button-row--vertical {
  flex-direction: column;
  gap: 4px;
}
.tds-confirmdialog__button-cell {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}
.tds-confirmdialog__button-row--vertical .tds-confirmdialog__button-cell {
  width: 100%;
  flex: 0 0 auto;
}
/* 가로 모드에서 버튼 사이 살짝의 헤어라인 분리 — 시각 가이드 */
.tds-confirmdialog__button-row--horizontal .tds-confirmdialog__button-cell + .tds-confirmdialog__button-cell {
  border-left: 1px solid var(--tds-grey-100);
}
.tds-confirmdialog__button-row--vertical .tds-confirmdialog__button-cell + .tds-confirmdialog__button-cell {
  border-top: 1px solid var(--tds-grey-100);
}

/* ── 버튼 자체 — 두 모드 모두 셀을 꽉 채움 ── */
.tds-confirmdialog__btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 8px 12px;
  text-align: center;
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: normal;
}
/* TextButton 위임 시 wrap 가능하도록 white-space override */
.tds-confirmdialog__btn .tds-textbutton__label,
.tds-confirmdialog__btn .tds-tb__label {
  white-space: normal;
}

/* ── Title ── */
.tds-confirmdialog__title {
  margin: 0;
  color: var(--tds-grey-800);
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tds-confirmdialog__title--t1 { font-size: var(--ty-1-fs); line-height: var(--ty-1-lh); }
.tds-confirmdialog__title--t2 { font-size: var(--ty-2-fs); line-height: var(--ty-2-lh); }
.tds-confirmdialog__title--t3 { font-size: var(--ty-3-fs); line-height: var(--ty-3-lh); }
.tds-confirmdialog__title--t4 { font-size: var(--ty-4-fs); line-height: var(--ty-4-lh); }
.tds-confirmdialog__title--t5 { font-size: var(--ty-5-fs); line-height: var(--ty-5-lh); }
.tds-confirmdialog__title--t6 { font-size: var(--ty-6-fs); line-height: var(--ty-6-lh); }
.tds-confirmdialog__title--t7 { font-size: var(--ty-7-fs); line-height: var(--ty-7-lh); }
.tds-confirmdialog__title--st1  { font-size: var(--sub-ty-1-fs);  line-height: var(--sub-ty-1-lh); }
.tds-confirmdialog__title--st2  { font-size: var(--sub-ty-2-fs);  line-height: var(--sub-ty-2-lh); }
.tds-confirmdialog__title--st3  { font-size: var(--sub-ty-3-fs);  line-height: var(--sub-ty-3-lh); }
.tds-confirmdialog__title--st4  { font-size: var(--sub-ty-4-fs);  line-height: var(--sub-ty-4-lh); }
.tds-confirmdialog__title--st5  { font-size: var(--sub-ty-5-fs);  line-height: var(--sub-ty-5-lh); }
.tds-confirmdialog__title--st6  { font-size: var(--sub-ty-6-fs);  line-height: var(--sub-ty-6-lh); }
.tds-confirmdialog__title--st7  { font-size: var(--sub-ty-7-fs);  line-height: var(--sub-ty-7-lh); }
.tds-confirmdialog__title--st8  { font-size: var(--sub-ty-8-fs);  line-height: var(--sub-ty-8-lh); }
.tds-confirmdialog__title--st9  { font-size: var(--sub-ty-9-fs);  line-height: var(--sub-ty-9-lh); }
.tds-confirmdialog__title--st10 { font-size: var(--sub-ty-10-fs); line-height: var(--sub-ty-10-lh); }
.tds-confirmdialog__title--st11 { font-size: var(--sub-ty-11-fs); line-height: var(--sub-ty-11-lh); }
.tds-confirmdialog__title--st12 { font-size: var(--sub-ty-12-fs); line-height: var(--sub-ty-12-lh); }
.tds-confirmdialog__title--st13 { font-size: var(--sub-ty-13-fs); line-height: var(--sub-ty-13-lh); }
.tds-confirmdialog__title--w-regular  { font-weight: var(--w-regular); }
.tds-confirmdialog__title--w-medium   { font-weight: var(--w-medium); }
.tds-confirmdialog__title--w-semibold { font-weight: var(--w-semibold); }
.tds-confirmdialog__title--w-bold     { font-weight: var(--w-bold); }

/* ── Description ── */
.tds-confirmdialog__description {
  margin: 0;
  color: var(--tds-grey-600);
  word-break: keep-all;
  overflow-wrap: anywhere;
  white-space: pre-wrap;
}
.tds-confirmdialog__description--t1 { font-size: var(--ty-1-fs); line-height: var(--ty-1-lh); }
.tds-confirmdialog__description--t2 { font-size: var(--ty-2-fs); line-height: var(--ty-2-lh); }
.tds-confirmdialog__description--t3 { font-size: var(--ty-3-fs); line-height: var(--ty-3-lh); }
.tds-confirmdialog__description--t4 { font-size: var(--ty-4-fs); line-height: var(--ty-4-lh); }
.tds-confirmdialog__description--t5 { font-size: var(--ty-5-fs); line-height: var(--ty-5-lh); }
.tds-confirmdialog__description--t6 { font-size: var(--ty-6-fs); line-height: var(--ty-6-lh); }
.tds-confirmdialog__description--t7 { font-size: var(--ty-7-fs); line-height: var(--ty-7-lh); }
.tds-confirmdialog__description--st1  { font-size: var(--sub-ty-1-fs);  line-height: var(--sub-ty-1-lh); }
.tds-confirmdialog__description--st2  { font-size: var(--sub-ty-2-fs);  line-height: var(--sub-ty-2-lh); }
.tds-confirmdialog__description--st3  { font-size: var(--sub-ty-3-fs);  line-height: var(--sub-ty-3-lh); }
.tds-confirmdialog__description--st4  { font-size: var(--sub-ty-4-fs);  line-height: var(--sub-ty-4-lh); }
.tds-confirmdialog__description--st5  { font-size: var(--sub-ty-5-fs);  line-height: var(--sub-ty-5-lh); }
.tds-confirmdialog__description--st6  { font-size: var(--sub-ty-6-fs);  line-height: var(--sub-ty-6-lh); }
.tds-confirmdialog__description--st7  { font-size: var(--sub-ty-7-fs);  line-height: var(--sub-ty-7-lh); }
.tds-confirmdialog__description--st8  { font-size: var(--sub-ty-8-fs);  line-height: var(--sub-ty-8-lh); }
.tds-confirmdialog__description--st9  { font-size: var(--sub-ty-9-fs);  line-height: var(--sub-ty-9-lh); }
.tds-confirmdialog__description--st10 { font-size: var(--sub-ty-10-fs); line-height: var(--sub-ty-10-lh); }
.tds-confirmdialog__description--st11 { font-size: var(--sub-ty-11-fs); line-height: var(--sub-ty-11-lh); }
.tds-confirmdialog__description--st12 { font-size: var(--sub-ty-12-fs); line-height: var(--sub-ty-12-lh); }
.tds-confirmdialog__description--st13 { font-size: var(--sub-ty-13-fs); line-height: var(--sub-ty-13-lh); }
.tds-confirmdialog__description--w-regular  { font-weight: var(--w-regular); }
.tds-confirmdialog__description--w-medium   { font-weight: var(--w-medium); }
.tds-confirmdialog__description--w-semibold { font-weight: var(--w-semibold); }
.tds-confirmdialog__description--w-bold     { font-weight: var(--w-bold); }

/* ── 버튼 폴백 — TextButton 미로드 환경 ── */
.tds-confirmdialog__btn--fallback {
  appearance: none;
  border: 0;
  background: transparent;
  cursor: pointer;
  font-size: var(--sub-ty-5-fs);
  line-height: var(--sub-ty-5-lh);
  transition: opacity 120ms ease-out;
}
.tds-confirmdialog__btn--fallback:hover { opacity: 0.85; }
.tds-confirmdialog__btn--fallback:active { opacity: 0.6; }
.tds-confirmdialog__btn--fallback:focus-visible {
  outline: 2px solid var(--tds-blue-400);
  outline-offset: 2px;
  border-radius: 4px;
}

/* ── Wiggle 애니메이션 ── */
@keyframes tds-confirmdialog-wiggle {
  0%   { transform: translateY(0) scale(1) translateX(0); }
  15%  { transform: translateY(0) scale(1) translateX(-6px); }
  30%  { transform: translateY(0) scale(1) translateX(6px); }
  45%  { transform: translateY(0) scale(1) translateX(-4px); }
  60%  { transform: translateY(0) scale(1) translateX(4px); }
  75%  { transform: translateY(0) scale(1) translateX(-2px); }
  100% { transform: translateY(0) scale(1) translateX(0); }
}
.tds-confirmdialog--wiggle .tds-confirmdialog__content {
  animation: tds-confirmdialog-wiggle 420ms cubic-bezier(0.36, 0.07, 0.19, 0.97) both;
}

/* ── 모션 줄임 ── */
@media (prefers-reduced-motion: reduce) {
  .tds-confirmdialog__overlay,
  .tds-confirmdialog__content {
    transition-duration: 120ms !important;
  }
  .tds-confirmdialog__content {
    transform: none !important;
  }
  .tds-confirmdialog--entered .tds-confirmdialog__content {
    transform: none !important;
  }
  .tds-confirmdialog--wiggle .tds-confirmdialog__content {
    animation: none !important;
  }
}

/* =============================================================================
 * TDS AlphabetKeypad (#163)
 *  · 알파벳을 입력하는 커스텀 키패드 (인증번호/코드 전용)
 *  · 3열 격자 + 마지막 셀은 Backspace
 *  · 셀 간 hairline 구분선으로 계산기 풍 UI
 * ========================================================================== */
.tds-alphakeypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  background: var(--bg-default, #ffffff);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* 상단 hairline — 전체 키패드 위 경계선 */
  border-top: 1px solid var(--tds-grey-opacity-200);
}

.tds-alphakeypad__cell {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--label, var(--tds-grey-900));
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ty-5-fs, 17px);
  line-height: var(--ty-5-lh, 26px);
  font-weight: var(--w-bold, 700);
  letter-spacing: 0;
  /* 셀 사이 hairline — 오른쪽 + 아래쪽 한 줄씩 */
  border: 0;
  border-right: 1px solid var(--tds-grey-opacity-200);
  border-bottom: 1px solid var(--tds-grey-opacity-200);
  /* 전체 상하 여백 포함 — 기본값 충돌 방지 */
  box-sizing: border-box;
  outline: none;
  transition: background-color 120ms ease;
}

/* 3열 구조 — 매 3번째 셀은 오른쪽 hairline 제거 (가장 우측) */
.tds-alphakeypad__cell:nth-child(3n) {
  border-right: 0;
}

.tds-alphakeypad__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tds-alphakeypad__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--label, var(--tds-grey-900));
}

/* 빈 패딩 셀 — 격자를 유지하면서 내용은 없음 */
.tds-alphakeypad__cell--empty {
  cursor: default;
  pointer-events: none;
}

/* 키 눌림 피드백 — 데스크톱 hover + 모바일 active */
.tds-alphakeypad__cell--letter:active,
.tds-alphakeypad__cell--backspace:active {
  background: var(--tds-grey-100, #f2f4f6);
}
@media (hover: hover) {
  .tds-alphakeypad__cell--letter:hover:not(:disabled),
  .tds-alphakeypad__cell--backspace:hover:not(:disabled) {
    background: var(--tds-grey-50, #f9fafb);
  }
}

/* 포커스 — 키보드 사용자 전용 */
.tds-alphakeypad__cell:focus-visible {
  outline: 2px solid var(--brand, var(--tds-blue-500));
  outline-offset: -2px;
}

/* 비활성 */
.tds-alphakeypad__cell:disabled,
.tds-alphakeypad--disabled .tds-alphakeypad__cell {
  cursor: not-allowed;
  opacity: 0.4;
}

/* 모션 줄임 */
@media (prefers-reduced-motion: reduce) {
  .tds-alphakeypad__cell {
    transition-duration: 0ms;
  }
}

/* =============================================================================
 * TDS FullSecureKeypad (#164)
 *  · 숫자 + QWERTY + 한글 듀얼 라벨 + 특수/Space/입력 완료
 *  · 각 행은 10칸 고정 격자. 빈 셀이 섞여 들어가서 키 위치 암기 방해.
 *  · 배경은 회색 톤(실제 입력 필드와 시각적으로 분리)
 * ========================================================================== */
.tds-fskeypad {
  display: flex;
  flex-direction: column;
  width: 100%;
  background: var(--tds-grey-100, #f2f4f6);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  padding: 6px 4px 10px 4px;
  gap: 6px;
  box-sizing: border-box;
}

/* 한 행 — 10칸 균등 */
.tds-fskeypad__row {
  display: grid;
  grid-template-columns: repeat(10, minmax(0, 1fr));
  gap: 5px;
  width: 100%;
}

/* 하단 액션 행 — 특수(2) / Space(6) / 입력 완료(2) 비율 */
.tds-fskeypad__row--action {
  grid-template-columns: 2fr 6fr 2fr;
}

/* 공용 셀 스타일 */
.tds-fskeypad__cell {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  padding: 0;
  margin: 0;
  background: var(--bg-default, #ffffff);
  color: var(--label, var(--tds-grey-900));
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ty-5-fs, 17px);
  line-height: 1;
  font-weight: var(--w-semibold, 600);
  box-sizing: border-box;
  outline: none;
  box-shadow: 0 1px 0 var(--tds-grey-opacity-200, rgba(0, 27, 55, 0.1));
  transition: background-color 100ms ease, transform 100ms ease;
}

/* 빈 셀 — 격자 유지용 */
.tds-fskeypad__cell--empty {
  background: transparent;
  box-shadow: none;
  cursor: default;
  pointer-events: none;
}

/* 알파벳 글자 + 한글 서브라벨 스택 */
.tds-fskeypad__cell--letter {
  flex-direction: column;
  gap: 2px;
}
.tds-fskeypad__letter-main {
  font-size: var(--ty-5-fs, 17px);
  line-height: 1;
  font-weight: var(--w-semibold, 600);
  color: var(--label, var(--tds-grey-900));
}
.tds-fskeypad__letter-sub {
  font-size: var(--ty-7-fs, 11px);
  line-height: 1;
  font-weight: var(--w-regular, 400);
  color: var(--tds-grey-500, #8b95a1);
}

/* 숫자 셀은 한글 없음 — 단일 글자 큰 크기 */
.tds-fskeypad__cell--number .tds-fskeypad__letter-main {
  font-size: calc(var(--ty-5-fs, 17px) + 1px);
  font-weight: var(--w-bold, 700);
}

/* 액션 셀 (Shift / Backspace) — 회색 톤 */
.tds-fskeypad__cell--action {
  background: var(--tds-grey-200, #e5e8eb);
  color: var(--label, var(--tds-grey-900));
}

/* Shift ON 상태 — 브랜드 색 배경 */
.tds-fskeypad__cell--shift-on {
  background: var(--brand, var(--tds-blue-500));
  color: #ffffff;
}

/* 누름 피드백 */
.tds-fskeypad__cell--letter:active,
.tds-fskeypad__cell--action:active {
  background: var(--tds-grey-200, #e5e8eb);
  transform: translateY(1px);
}
.tds-fskeypad__cell--shift-on:active {
  background: var(--brand-press, var(--tds-blue-700));
}
@media (hover: hover) {
  .tds-fskeypad__cell--letter:hover:not(:disabled),
  .tds-fskeypad__cell--action:hover:not(:disabled) {
    background: var(--tds-grey-50, #f9fafb);
  }
  .tds-fskeypad__cell--shift-on:hover:not(:disabled) {
    background: var(--brand-hover, var(--tds-blue-600));
  }
}

.tds-fskeypad__cell:focus-visible {
  outline: 2px solid var(--brand, var(--tds-blue-500));
  outline-offset: -2px;
}

/* 하단 액션 버튼 (특수 / Space / 입력 완료) */
.tds-fskeypad__action {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 48px;
  padding: 0 12px;
  margin: 0;
  border: 0;
  border-radius: 6px;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ty-6-fs, 15px);
  line-height: 1;
  font-weight: var(--w-semibold, 600);
  box-sizing: border-box;
  outline: none;
  transition: background-color 100ms ease;
}
.tds-fskeypad__action--special,
.tds-fskeypad__action--space {
  background: var(--tds-grey-200, #e5e8eb);
  color: var(--label, var(--tds-grey-900));
}
.tds-fskeypad__action--submit {
  background: var(--brand, var(--tds-blue-500));
  color: #ffffff;
  font-weight: var(--w-bold, 700);
}
.tds-fskeypad__action--special:active,
.tds-fskeypad__action--space:active {
  background: var(--tds-grey-300, #d1d6db);
}
.tds-fskeypad__action--submit:active {
  background: var(--brand-press, var(--tds-blue-700));
}
@media (hover: hover) {
  .tds-fskeypad__action--special:hover:not(:disabled),
  .tds-fskeypad__action--space:hover:not(:disabled) {
    background: var(--tds-grey-100, #f2f4f6);
  }
  .tds-fskeypad__action--submit:hover:not(:disabled) {
    background: var(--brand-hover, var(--tds-blue-600));
  }
}
.tds-fskeypad__action:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.tds-fskeypad__action:focus-visible {
  outline: 2px solid var(--brand, var(--tds-blue-500));
  outline-offset: -2px;
}

/* 모션 줄임 */
@media (prefers-reduced-motion: reduce) {
  .tds-fskeypad__cell,
  .tds-fskeypad__action {
    transition-duration: 0ms;
  }
  .tds-fskeypad__cell--letter:active,
  .tds-fskeypad__cell--action:active {
    transform: none;
  }
}

/* =============================================================================
 * TDS NumberKeypad (#165)
 *  · 숫자 0~9 키패드. 3열 × 4행 격자.
 *    레이아웃: [1 2 3] / [4 5 6] / [7 8 9] / [_빈_, 0, ⌫ Backspace]
 *  · `secure` 모드: 인접키 제외 유령 키 이벤트 2회 추가 (키로거 방어).
 *  · 시각 규격은 AlphabetKeypad 와 동일한 흰 배경 + hairline 격자.
 * ========================================================================== */
.tds-numkeypad {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  width: 100%;
  background: var(--bg-default, #ffffff);
  user-select: none;
  -webkit-user-select: none;
  -webkit-tap-highlight-color: transparent;
  /* 상단 hairline — 전체 키패드 위 경계선 */
  border-top: 1px solid var(--tds-grey-opacity-200);
}

.tds-numkeypad__cell {
  appearance: none;
  -webkit-appearance: none;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 56px;
  padding: 0;
  margin: 0;
  background: transparent;
  color: var(--label, var(--tds-grey-900));
  cursor: pointer;
  font-family: inherit;
  font-size: var(--ty-4-fs, 19px);
  line-height: var(--ty-4-lh, 28px);
  font-weight: var(--w-bold, 700);
  letter-spacing: 0;
  border: 0;
  border-right: 1px solid var(--tds-grey-opacity-200);
  border-bottom: 1px solid var(--tds-grey-opacity-200);
  box-sizing: border-box;
  outline: none;
  transition: background-color 120ms ease;
}

/* 3열 구조 — 매 3번째 셀은 오른쪽 hairline 제거 (가장 우측) */
.tds-numkeypad__cell:nth-child(3n) {
  border-right: 0;
}

.tds-numkeypad__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  line-height: 1;
}

.tds-numkeypad__icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 24px;
  height: 24px;
  color: var(--label, var(--tds-grey-900));
}

/* 빈 패딩 셀 — 격자 유지 (1열 × 4행 위치의 빈자리) */
.tds-numkeypad__cell--empty {
  cursor: default;
  pointer-events: none;
}

/* 키 눌림 피드백 */
.tds-numkeypad__cell--number:active,
.tds-numkeypad__cell--backspace:active {
  background: var(--tds-grey-100, #f2f4f6);
}
@media (hover: hover) {
  .tds-numkeypad__cell--number:hover:not(:disabled),
  .tds-numkeypad__cell--backspace:hover:not(:disabled) {
    background: var(--tds-grey-50, #f9fafb);
  }
}

/* 포커스 — 키보드 사용자 전용 */
.tds-numkeypad__cell:focus-visible {
  outline: 2px solid var(--brand, var(--tds-blue-500));
  outline-offset: -2px;
}

/* 비활성 */
.tds-numkeypad__cell:disabled,
.tds-numkeypad--disabled .tds-numkeypad__cell {
  cursor: not-allowed;
  opacity: 0.4;
}

/* 모션 줄임 */
@media (prefers-reduced-motion: reduce) {
  .tds-numkeypad__cell {
    transition-duration: 0ms;
  }
}

/* =============================================================================
 * TDS List + ListRow (#166)
 *  · 리스트 레이아웃 — left / contents / right 3 영역.
 *  · 메인: ListRow + List 래퍼.
 *  · 서브: Loader, AssetIcon, AssetImage, AssetLottie, AssetText, IconButton, Texts
 *  · ref API: shine(seconds), blink(seconds) 시각 강조 효과.
 * ========================================================================== */

/* List 래퍼 — ListRow 들을 묶는 시멘틱 컨테이너 */
.tds-list {
  display: block;
  width: 100%;
  margin: 0;
  padding: 0;
  list-style: none;
}

/* ListRow 루트 — 내부에 inner(flex) + 상단 border 라인 포함 */
.tds-listrow {
  position: relative;
  display: block;
  width: 100%;
  background: var(--bg-default, #ffffff);
  box-sizing: border-box;
}

/* 구분선 — indented(들여쓰기) / none(없음) */
.tds-listrow--border-indented::before {
  content: "";
  position: absolute;
  left: var(--tds-listrow-indent, 24px);
  right: 0;
  top: 0;
  height: 1px;
  background: var(--tds-grey-opacity-200);
  pointer-events: none;
}
.tds-listrow--border-none::before {
  content: none;
}
/* 첫 번째 행은 상단 구분선 숨김 (List 안에서만) */
.tds-list > .tds-listrow:first-child.tds-listrow--border-indented::before {
  display: none;
}

/* 좌우 패딩 — small 20px / medium 24px (TDS 스펙) */
.tds-listrow--hp-small {
  padding-left: 20px;
  padding-right: 20px;
  --tds-listrow-indent: 20px;
}
.tds-listrow--hp-medium {
  padding-left: 24px;
  padding-right: 24px;
  --tds-listrow-indent: 24px;
}

/* 상하 패딩 — small 8 / medium 12 / large 16 / xlarge 24 */
.tds-listrow--vp-small { padding-top: 8px; padding-bottom: 8px; }
.tds-listrow--vp-medium { padding-top: 12px; padding-bottom: 12px; }
.tds-listrow--vp-large { padding-top: 16px; padding-bottom: 16px; }
.tds-listrow--vp-xlarge { padding-top: 24px; padding-bottom: 24px; }

/* 클릭 가능 — touch effect / pointer */
.tds-listrow--clickable {
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
  user-select: none;
  -webkit-user-select: none;
}
.tds-listrow--clickable:active {
  background: var(--tds-grey-100, #f2f4f6);
}
@media (hover: hover) {
  .tds-listrow--clickable:hover:not(.tds-listrow--disabled) {
    background: var(--tds-grey-50, #f9fafb);
  }
}
.tds-listrow--clickable:focus-visible {
  outline: 2px solid var(--brand, var(--tds-blue-500));
  outline-offset: -2px;
}

/* 비활성화 — type1(연한 흰색 배경) / type2(추가 회색 덧입힘) */
.tds-listrow--disabled {
  cursor: not-allowed;
  pointer-events: none;
}
.tds-listrow--disabled.tds-listrow--disabled-type1 {
  opacity: 0.5;
}
.tds-listrow--disabled.tds-listrow--disabled-type2 {
  opacity: 0.5;
  background: var(--tds-grey-100, #f2f4f6);
}

/* inner — 실제 flex 행 */
.tds-listrow__inner {
  display: flex;
  align-items: stretch;
  gap: 12px;
  width: 100%;
}

/* 영역 — left / contents / right */
.tds-listrow__left,
.tds-listrow__right {
  display: flex;
  flex: 0 0 auto;
}
.tds-listrow__contents {
  display: flex;
  flex-direction: column;
  flex: 1 1 auto;
  min-width: 0; /* flex shrink 시 ellipsis 동작 */
}
.tds-listrow__align-center { align-items: center; }
.tds-listrow__align-top { align-items: flex-start; padding-top: 2px; }

/* 화살표 — withArrow */
.tds-listrow__arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 4px;
  color: var(--tds-grey-400, #b0b8c1);
  flex-shrink: 0;
}

/* 시각 강조: shine — 가로지르는 반짝임 */
@keyframes tds-listrow-shine {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(150%); }
}
.tds-listrow--shine {
  position: relative;
  overflow: hidden;
}
.tds-listrow--shine::after {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 60%;
  height: 100%;
  background: linear-gradient(
    100deg,
    rgba(255, 255, 255, 0) 30%,
    rgba(255, 255, 255, 0.55) 50%,
    rgba(255, 255, 255, 0) 70%
  );
  pointer-events: none;
  animation: tds-listrow-shine var(--tds-listrow-shine-dur, 1.6s) ease-in-out 1;
  will-change: transform;
}

/* 시각 강조: blink — 전체 깜빡임 */
@keyframes tds-listrow-blink {
  0%, 100% { background-color: var(--bg-default, #ffffff); }
  50%      { background-color: var(--tds-blue-50, #e9f3ff); }
}
.tds-listrow--blink {
  animation: tds-listrow-blink var(--tds-listrow-blink-dur, 1.2s) ease-in-out 1;
}

/* ── ListRow.IconButton ───────────────────────────────────────────────────── */
.tds-listrow-iconbutton {
  appearance: none;
  -webkit-appearance: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 0;
  background: transparent;
  padding: 6px;
  margin: 0;
  cursor: pointer;
  border-radius: 999px;
  outline: none;
  flex-shrink: 0;
}
.tds-listrow-iconbutton--clear {
  background: transparent;
}
.tds-listrow-iconbutton--fill {
  background: var(--tds-listrow-iconbutton-bg, var(--tds-grey-opacity-100, rgba(0, 27, 55, 0.05)));
}
.tds-listrow-iconbutton--border {
  background: transparent;
  border: 1px solid var(--tds-grey-200, #e5e8eb);
}
.tds-listrow-iconbutton:active {
  background: var(--tds-grey-200, #e5e8eb);
}
.tds-listrow-iconbutton:focus-visible {
  outline: 2px solid var(--brand, var(--tds-blue-500));
  outline-offset: 2px;
}
.tds-listrow-iconbutton__icon {
  display: inline-block;
  width: var(--tds-listrow-iconbutton-size, 24px);
  height: var(--tds-listrow-iconbutton-size, 24px);
  background-color: var(--tds-listrow-iconbutton-color, var(--label, var(--tds-grey-900)));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}

/* ── 공용 Asset wrapper (Icon/Image/Lottie/Text) ─────────────────────────── */
.tds-listrow-asset {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  box-sizing: border-box;
}

/* shape별 모양 */
.tds-listrow-asset--squircle {
  border-radius: 30%; /* squircle 근사 — TDS 디자인 토큰 부재 시 폴백 */
  background: var(--tds-listrow-asset-bg, var(--tds-grey-opacity-100, rgba(0, 27, 55, 0.05)));
  overflow: hidden;
}
.tds-listrow-asset--card {
  border-radius: 8px;
  background: var(--tds-listrow-asset-bg, var(--tds-grey-opacity-100, rgba(0, 27, 55, 0.05)));
  overflow: hidden;
}
.tds-listrow-asset--circle,
.tds-listrow-asset--circle-background,
.tds-listrow-asset--circle-masking {
  width: 40px;
  height: 40px;
  border-radius: 50%;
  background: var(--tds-listrow-asset-bg, var(--tds-grey-opacity-100, rgba(0, 27, 55, 0.05)));
  overflow: hidden;
}
.tds-listrow-asset--circle-masking {
  background: transparent;
}
.tds-listrow-asset--square {
  width: 52px;
  height: 52px;
  border-radius: 4px;
  background: var(--tds-listrow-asset-bg, var(--tds-grey-opacity-100, rgba(0, 27, 55, 0.05)));
  overflow: hidden;
}
.tds-listrow-asset--original {
  background: transparent;
  border-radius: 0;
}

/* size — squircle/card/AssetText 공용 */
.tds-listrow-asset--xsmall { width: 28px; height: 28px; }
.tds-listrow-asset--small  { width: 32px; height: 32px; }
.tds-listrow-asset--medium { width: 40px; height: 40px; }

/* paddingX — card shape 한정 (선택) */
.tds-listrow-asset--padx.tds-listrow-asset--xsmall { padding-left: 4px; padding-right: 4px; }
.tds-listrow-asset--padx.tds-listrow-asset--small  { padding-left: 6px; padding-right: 6px; }
.tds-listrow-asset--padx.tds-listrow-asset--medium { padding-left: 8px; padding-right: 8px; }

/* AssetIcon 내부 아이콘 (mono URL → mask) */
.tds-listrow-asseticon__svg {
  display: inline-block;
  width: 60%;
  height: 60%;
  object-fit: contain;
}
.tds-listrow-asseticon__mono {
  display: inline-block;
  width: 60%;
  height: 60%;
  background-color: var(--tds-listrow-asseticon-color, var(--label, var(--tds-grey-900)));
  -webkit-mask-position: center;
  mask-position: center;
  -webkit-mask-repeat: no-repeat;
  mask-repeat: no-repeat;
  -webkit-mask-size: contain;
  mask-size: contain;
}
/* original shape 의 아이콘은 원본 크기 유지 (배경 없음) */
.tds-listrow-asset--original .tds-listrow-asseticon__svg,
.tds-listrow-asset--original .tds-listrow-asseticon__mono {
  width: 24px;
  height: 24px;
}

/* AssetImage 내부 이미지 */
.tds-listrow-assetimage__img {
  display: block;
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.tds-listrow-asset--original .tds-listrow-assetimage__img {
  width: auto;
  height: 54px;
  object-fit: contain;
}
/* scale prop (0~1) — inline transform 으로 처리 */

/* AssetLottie 내부 (실제 로띠 재생기 부재 — 정적 placeholder) */
.tds-listrow-assetlottie__inner {
  display: inline-block;
  width: 100%;
  height: 100%;
  background-image: var(--tds-listrow-lottie-src, none);
  background-position: center;
  background-repeat: no-repeat;
  background-size: contain;
}

/* AssetText (왼쪽 작은 텍스트 라벨) */
.tds-listrow-assettext__label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--ty-7-fs, 11px);
  line-height: 1;
  font-weight: var(--w-bold, 700);
  color: var(--tds-listrow-assettext-color, var(--brand, var(--tds-blue-500)));
  text-align: center;
  padding: 2px 4px;
}
.tds-listrow-asset--medium .tds-listrow-assettext__label {
  font-size: var(--ty-6-fs, 13px);
}

/* 액세서리(badge) — acc/accPosition/accMasking */
.tds-listrow-asset__acc {
  position: absolute;
  z-index: 1;
}
.tds-listrow-asset__acc--bottom-right {
  right: -2px;
  bottom: -2px;
}
.tds-listrow-asset__acc--top-right {
  right: -2px;
  top: -2px;
}
.tds-listrow-asset__acc--masking-circle {
  border: 2px solid var(--bg-default, #ffffff);
  border-radius: 50%;
  background: var(--bg-default, #ffffff);
  padding: 0;
  line-height: 0;
}

/* ── ListRow.Texts ────────────────────────────────────────────────────────── */
.tds-listrow-texts {
  display: flex;
  flex-direction: column;
  min-width: 0;
  width: 100%;
}
.tds-listrow-texts--right {
  text-align: right;
  align-items: flex-end;
}
.tds-listrow-texts__top,
.tds-listrow-texts__middle,
.tds-listrow-texts__bottom {
  display: block;
  max-width: 100%;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* 공통 폰트 매핑 — 기본값(미지정 시 1RowTypeA 와 동일) */
.tds-listrow-texts__top {
  font-size: var(--ty-5-fs, 17px);
  line-height: var(--ty-5-lh, 26px);
  font-weight: var(--w-medium, 500);
  color: var(--label, var(--tds-grey-900));
}
.tds-listrow-texts__middle,
.tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs, 11px);
  line-height: var(--ty-7-lh, 16px);
  font-weight: var(--w-regular, 400);
  color: var(--tds-grey-600, #6b7684);
}

/* type 변형 — 타이포 매핑 (TDS 컨벤션 기반 합리적 매핑) */
/* === 1Row === */
.tds-listrow-texts--1RowTypeA .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--1RowTypeB .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--1RowTypeC .tds-listrow-texts__top {
  font-size: var(--ty-4-fs); line-height: var(--ty-4-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
/* === Right1Row === */
.tds-listrow-texts--Right1RowTypeA .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--Right1RowTypeB .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-700, #4e5968);
}
.tds-listrow-texts--Right1RowTypeC .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-600, #6b7684);
}
.tds-listrow-texts--Right1RowTypeD .tds-listrow-texts__top {
  font-size: var(--ty-6-fs); line-height: var(--ty-6-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-700, #4e5968);
}
.tds-listrow-texts--Right1RowTypeE .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500, #8b95a1);
}
/* === 2Row === */
.tds-listrow-texts--2RowTypeA .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--2RowTypeA .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500, #8b95a1);
}
.tds-listrow-texts--2RowTypeB .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--2RowTypeB .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--2RowTypeC .tds-listrow-texts__top {
  font-size: var(--ty-4-fs); line-height: var(--ty-4-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--2RowTypeC .tds-listrow-texts__bottom {
  font-size: var(--ty-6-fs); line-height: var(--ty-6-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-600, #6b7684);
}
.tds-listrow-texts--2RowTypeD .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--2RowTypeD .tds-listrow-texts__bottom {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--2RowTypeE .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--2RowTypeE .tds-listrow-texts__bottom {
  font-size: var(--ty-4-fs); line-height: var(--ty-4-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--2RowTypeF .tds-listrow-texts__top {
  font-size: var(--ty-6-fs); line-height: var(--ty-6-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-700, #4e5968);
}
.tds-listrow-texts--2RowTypeF .tds-listrow-texts__bottom {
  font-size: var(--ty-3-fs); line-height: var(--ty-3-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
/* === Right2Row === */
.tds-listrow-texts--Right2RowTypeA .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--Right2RowTypeA .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--Right2RowTypeB .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--Right2RowTypeB .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--Right2RowTypeC .tds-listrow-texts__top {
  font-size: var(--ty-4-fs); line-height: var(--ty-4-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--Right2RowTypeC .tds-listrow-texts__bottom {
  font-size: var(--ty-6-fs); line-height: var(--ty-6-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-600);
}
.tds-listrow-texts--Right2RowTypeD .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--Right2RowTypeD .tds-listrow-texts__bottom {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--Right2RowTypeE .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--Right2RowTypeE .tds-listrow-texts__bottom {
  font-size: var(--ty-3-fs); line-height: var(--ty-3-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
/* === 3Row === */
.tds-listrow-texts--3RowTypeA .tds-listrow-texts__top {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--3RowTypeA .tds-listrow-texts__middle {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeA .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeB .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeB .tds-listrow-texts__middle {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--3RowTypeB .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeC .tds-listrow-texts__top {
  font-size: var(--ty-4-fs); line-height: var(--ty-4-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--3RowTypeC .tds-listrow-texts__middle {
  font-size: var(--ty-6-fs); line-height: var(--ty-6-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-700, #4e5968);
}
.tds-listrow-texts--3RowTypeC .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeD .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeD .tds-listrow-texts__middle {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeD .tds-listrow-texts__bottom {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--3RowTypeE .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeE .tds-listrow-texts__middle {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeE .tds-listrow-texts__bottom {
  font-size: var(--ty-3-fs); line-height: var(--ty-3-lh);
  font-weight: var(--w-bold); color: var(--tds-grey-900);
}
.tds-listrow-texts--3RowTypeF .tds-listrow-texts__top {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}
.tds-listrow-texts--3RowTypeF .tds-listrow-texts__middle {
  font-size: var(--ty-5-fs); line-height: var(--ty-5-lh);
  font-weight: var(--w-medium); color: var(--tds-grey-900);
}
.tds-listrow-texts--3RowTypeF .tds-listrow-texts__bottom {
  font-size: var(--ty-7-fs); line-height: var(--ty-7-lh);
  font-weight: var(--w-regular); color: var(--tds-grey-500);
}

/* ── ListRow.Loader (스켈레톤) ─────────────────────────────────────────────── */
@keyframes tds-listrow-loader-shimmer {
  0%   { background-position: -200% 0; }
  100% { background-position: 200% 0; }
}
.tds-listrow-loader {
  display: flex;
  align-items: center;
  gap: 12px;
  padding-left: 24px;
  padding-right: 24px;
  width: 100%;
  box-sizing: border-box;
  background: var(--bg-default, #ffffff);
}
.tds-listrow-loader--vp-extraSmall { padding-top: 4px; padding-bottom: 4px; }
.tds-listrow-loader--vp-small      { padding-top: 8px; padding-bottom: 8px; }
.tds-listrow-loader--vp-medium     { padding-top: 12px; padding-bottom: 12px; }
.tds-listrow-loader--vp-large      { padding-top: 16px; padding-bottom: 16px; }

.tds-listrow-loader__shape {
  flex-shrink: 0;
  background: linear-gradient(
    90deg,
    var(--tds-grey-100, #f2f4f6) 0%,
    var(--tds-grey-50, #f9fafb) 50%,
    var(--tds-grey-100, #f2f4f6) 100%
  );
  background-size: 200% 100%;
  animation: tds-listrow-loader-shimmer 1.4s ease-in-out infinite;
}
.tds-listrow-loader__shape--square { width: 40px; height: 40px; border-radius: 8px; }
.tds-listrow-loader__shape--circle { width: 40px; height: 40px; border-radius: 50%; }
.tds-listrow-loader__shape--bar    { width: 40px; height: 16px; border-radius: 4px; }

.tds-listrow-loader__lines {
  display: flex;
  flex-direction: column;
  gap: 6px;
  flex: 1 1 auto;
}
.tds-listrow-loader__line {
  height: 14px;
  background: linear-gradient(
    90deg,
    var(--tds-grey-100, #f2f4f6) 0%,
    var(--tds-grey-50, #f9fafb) 50%,
    var(--tds-grey-100, #f2f4f6) 100%
  );
  background-size: 200% 100%;
  border-radius: 4px;
  animation: tds-listrow-loader-shimmer 1.4s ease-in-out infinite;
}
.tds-listrow-loader__line--short { width: 40%; }
.tds-listrow-loader__line--long  { width: 80%; }

/* 모션 줄임 */
@media (prefers-reduced-motion: reduce) {
  .tds-listrow--shine::after,
  .tds-listrow--blink,
  .tds-listrow-loader__shape,
  .tds-listrow-loader__line {
    animation-duration: 0ms !important;
    animation-iteration-count: 1 !important;
  }
}

/* =============================================================================
 * TDS TextField + SplitTextField + TextArea (#167~#169)
 *  · 모든 텍스트 입력 컴포넌트의 공용 기반.
 *  · 구조:
 *      .tds-tf            — 루트 래퍼 (label + body + help 를 세로 스택)
 *        .tds-tf__label    — 상단 라벨 ("sustain" 면 항상, "appear" 면 값/포커스 시)
 *        .tds-tf__body     — [prefix][input][suffix][right] 가로 박스
 *          .tds-tf__prefix / __suffix  — 텍스트 addon
 *          .tds-tf__input             — 실제 input/textarea
 *          .tds-tf__right             — 커스텀 슬롯 (Clearable X / Password eye / Button arrow …)
 *        .tds-tf__help     — 하단 보조 문구 (hasError=true 면 alert 컬러)
 *
 *  · variant (TextField 전용):
 *      box   — 높이 52px, 둥근 회색 박스 (기본값)
 *      line  — 박스 없음 · 아래 하이라인만
 *      big   — 높이 64px, label 크게 (ty-5 label + ty-4 input)
 *      hero  — 박스 없음 · input 을 ty-1 로 크게 (금액 입력 등)
 *
 *  · 포커스:
 *      box/big  → inset ring (--brand)
 *      line     → 하이라인 색이 --brand 로 변함
 *      hero     → 시각적 변화 최소 (caret 만)
 *
 *  · hasError:
 *      box/big  → ring --alert
 *      line     → 하이라인 --alert
 *      help     → --alert-ink
 *
 *  · disabled:
 *      body 배경 --tds-grey-50, 텍스트 --label-tertiary, pointer-events: none
 *
 *  · SplitTextField:
 *      .tds-tf--split 이면 body 가 아니라 별도 .tds-stf 루트.
 *      [first].tds-stf__half / .tds-stf__sep / [second].tds-stf__half
 *
 *  · TextArea:
 *      input 대신 textarea. auto-resize 는 JSX 에서 scrollHeight 측정 후 height 직접 세팅.
 * ========================================================================== */

/* ---------- 루트 래퍼 ---------- */
.tds-tf {
  display: flex;
  flex-direction: column;
  width: 100%;
  /* 라벨/input/help 사이 간격 */
  gap: 6px;
  /* 폼 안에서 쌓였을 때 간격 */
  margin: 0;
}

/* ---------- 라벨 ---------- */
.tds-tf__label {
  font-family: inherit;
  font-size: var(--sub-ty-8-fs, 13px);
  line-height: var(--sub-ty-8-lh, 19px);
  font-weight: var(--w-medium, 500);
  color: var(--label-secondary, #4e5968);
  letter-spacing: -0.01em;
  /* appear 모드에서는 기본적으로 시각적으로 가려놓고,
     값/포커스 시에만 표시 (transform 으로 살짝 내려왔다 올라오는 효과) */
  transition: opacity 150ms var(--ease, ease),
              transform 150ms var(--ease, ease);
}
.tds-tf--appear .tds-tf__label {
  opacity: 0;
  transform: translateY(4px);
  pointer-events: none;
  height: 0;
  margin: 0;
  overflow: hidden;
}
.tds-tf--appear.tds-tf--shown .tds-tf__label {
  opacity: 1;
  transform: translateY(0);
  height: auto;
}

/* big / hero 는 라벨 더 크게 */
.tds-tf--big .tds-tf__label {
  font-size: var(--ty-7-fs, 13px);
  line-height: var(--ty-7-lh, 18px);
  font-weight: var(--w-semibold, 600);
  color: var(--label-secondary, #4e5968);
}
.tds-tf--hero .tds-tf__label {
  font-size: var(--sub-ty-7-fs, 14px);
  line-height: var(--sub-ty-7-lh, 21px);
  color: var(--label-secondary, #4e5968);
}

/* label 필수 표시 (*) */
.tds-tf__label-required {
  color: var(--alert, #f04452);
  margin-left: 2px;
}

/* ---------- 본체 박스 ---------- */
.tds-tf__body {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  box-sizing: border-box;
  transition: background 120ms var(--ease, ease),
              box-shadow 120ms var(--ease, ease),
              border-color 120ms var(--ease, ease);
}

/* variant: box (기본) */
.tds-tf--box .tds-tf__body {
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tds-grey-100, #f2f4f6);
}
.tds-tf--box.tds-tf--focused .tds-tf__body {
  background: var(--tds-grey-50, #f9fafb);
  box-shadow: inset 0 0 0 1.5px var(--tds-blue-400, #4593fc);
}
.tds-tf--box.tds-tf--error .tds-tf__body {
  box-shadow: inset 0 0 0 1.5px var(--alert, #f04452);
}

/* variant: line */
.tds-tf--line .tds-tf__body {
  min-height: 48px;
  padding: 10px 0;
  border-bottom: 1.5px solid var(--separator, #e5e8eb);
  background: transparent;
}
.tds-tf--line.tds-tf--focused .tds-tf__body {
  border-bottom-color: var(--brand, #3182f6);
}
.tds-tf--line.tds-tf--error .tds-tf__body {
  border-bottom-color: var(--alert, #f04452);
}

/* variant: big */
.tds-tf--big .tds-tf__body {
  min-height: 64px;
  padding: 14px 16px;
  border-radius: 16px;
  background: var(--tds-grey-100, #f2f4f6);
}
.tds-tf--big.tds-tf--focused .tds-tf__body {
  background: var(--tds-grey-50, #f9fafb);
  box-shadow: inset 0 0 0 1.5px var(--tds-blue-400, #4593fc);
}
.tds-tf--big.tds-tf--error .tds-tf__body {
  box-shadow: inset 0 0 0 1.5px var(--alert, #f04452);
}

/* variant: hero (금액 입력) */
.tds-tf--hero .tds-tf__body {
  min-height: 56px;
  padding: 0;
  background: transparent;
  border: 0;
}
.tds-tf--hero.tds-tf--error .tds-tf__body {
  /* hero 는 박스가 없으므로 하이라인으로 에러 표시 */
  border-bottom: 1.5px solid var(--alert, #f04452);
}

/* disabled */
.tds-tf--disabled .tds-tf__body {
  background: var(--tds-grey-50, #f9fafb);
  pointer-events: none;
}
.tds-tf--disabled.tds-tf--line .tds-tf__body {
  background: transparent;
  border-bottom-color: var(--tds-grey-200, #e5e8eb);
}

/* ---------- 실제 입력 ---------- */
.tds-tf__input {
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--sub-ty-5-fs, 18px);
  line-height: var(--sub-ty-5-lh, 26px);
  font-weight: var(--w-medium, 500);
  color: var(--label, #191f28);
  letter-spacing: -0.01em;
  -webkit-appearance: none;
  appearance: none;
}
.tds-tf__input::placeholder {
  color: var(--label-tertiary, #8b95a1);
  font-weight: var(--w-regular, 400);
}
.tds-tf__input:disabled {
  color: var(--label-tertiary, #8b95a1);
  -webkit-text-fill-color: var(--label-tertiary, #8b95a1);
  cursor: not-allowed;
}

/* variant 별 input 타이포 */
.tds-tf--big .tds-tf__input {
  font-size: var(--ty-4-fs, 19px);
  line-height: var(--ty-4-lh, 28px);
  font-weight: var(--w-semibold, 600);
}
.tds-tf--hero .tds-tf__input {
  font-size: var(--ty-2-fs, 26px);
  line-height: var(--ty-2-lh, 35px);
  font-weight: var(--w-bold, 700);
  /* 금액 정렬용 tnum */
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  letter-spacing: -0.02em;
}

/* number 스피너 숨김 */
.tds-tf__input::-webkit-outer-spin-button,
.tds-tf__input::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}
.tds-tf__input[type="number"] {
  -moz-appearance: textfield;
}

/* ---------- prefix / suffix 텍스트 addon ---------- */
.tds-tf__prefix,
.tds-tf__suffix {
  flex-shrink: 0;
  font-family: inherit;
  font-size: var(--sub-ty-5-fs, 18px);
  line-height: var(--sub-ty-5-lh, 26px);
  font-weight: var(--w-regular, 400);
  color: var(--label-tertiary, #8b95a1);
  white-space: nowrap;
  user-select: none;
}
.tds-tf--hero .tds-tf__prefix,
.tds-tf--hero .tds-tf__suffix {
  font-size: var(--ty-4-fs, 19px);
  line-height: var(--ty-4-lh, 28px);
  font-weight: var(--w-semibold, 600);
  color: var(--label-secondary, #4e5968);
}

/* ---------- right 슬롯 (Clearable X / Password 눈 / Button 화살표 …) ---------- */
.tds-tf__right {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  gap: 4px;
}

/* Clearable — 회색 원 안에 X */
.tds-tf__clear {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  border-radius: 50%;
  background: var(--tds-grey-300, #d1d6db);
  color: #fff;
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: background 120ms var(--ease, ease),
              transform 120ms var(--ease, ease);
}
.tds-tf__clear:hover { background: var(--tds-grey-400, #b0b8c1); }
.tds-tf__clear:active { transform: scale(0.92); }
.tds-tf__clear svg {
  width: 12px;
  height: 12px;
  stroke: currentColor;
  stroke-width: 2.2;
  fill: none;
  stroke-linecap: round;
}

/* Password — 눈 토글 */
.tds-tf__eye {
  flex-shrink: 0;
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: transparent;
  color: var(--label-tertiary, #8b95a1);
  border: 0;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: color 120ms var(--ease, ease),
              background 120ms var(--ease, ease);
}
.tds-tf__eye:hover {
  background: var(--tds-grey-opacity-50, #00173305);
  color: var(--label-secondary, #4e5968);
}
.tds-tf__eye svg {
  width: 22px;
  height: 22px;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* Button — TextField.Button: body 전체가 눌리는 버튼 */
.tds-tf__body--button {
  cursor: pointer;
  -webkit-user-select: none;
  user-select: none;
}
.tds-tf__body--button:active {
  opacity: 0.7;
}
.tds-tf__chevron {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  color: var(--label-tertiary, #8b95a1);
  display: inline-flex;
  align-items: center;
  justify-content: center;
}
.tds-tf__chevron svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 2;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* ---------- 하단 help 문구 ---------- */
.tds-tf__help {
  font-family: inherit;
  font-size: var(--sub-ty-9-fs, 12px);
  line-height: var(--sub-ty-9-lh, 17px);
  font-weight: var(--w-regular, 400);
  color: var(--label-tertiary, #8b95a1);
  letter-spacing: -0.01em;
  margin: 0;
}
.tds-tf--error .tds-tf__help {
  color: var(--alert-ink, #d22030);
  font-weight: var(--w-medium, 500);
}

/* 커스텀 padding (paddingTop/paddingBottom props) */
.tds-tf[data-padding-top] { padding-top: var(--tf-pad-top, 0); }
.tds-tf[data-padding-bottom] { padding-bottom: var(--tf-pad-bottom, 0); }

/* =============================================================================
 * TDS SplitTextField (#168) — RRN13 / RRNFirst7
 *  · 두 개의 입력을 가로로 나란히 배치.
 *  · 구분자 (·) 또는 dash 로 시각적 구분.
 *  · 첫 번째 필드가 가득 차면 자동으로 두 번째로 포커스 이동 (JSX 에서 처리).
 * ========================================================================== */

.tds-stf {
  display: flex;
  align-items: stretch;
  gap: 0;
  width: 100%;
  box-sizing: border-box;
  min-height: 52px;
  padding: 12px 14px;
  border-radius: 14px;
  background: var(--tds-grey-100, #f2f4f6);
  transition: background 120ms var(--ease, ease),
              box-shadow 120ms var(--ease, ease);
}
.tds-stf--focused {
  background: var(--tds-grey-50, #f9fafb);
  box-shadow: inset 0 0 0 1.5px var(--tds-blue-400, #4593fc);
}
.tds-stf--error {
  box-shadow: inset 0 0 0 1.5px var(--alert, #f04452);
}
.tds-stf--disabled {
  background: var(--tds-grey-50, #f9fafb);
  pointer-events: none;
}

/* 두 반쪽 */
.tds-stf__half {
  flex: 1 1 0;
  min-width: 0;
  display: flex;
  align-items: center;
}
.tds-stf__half--second {
  /* 두 번째 필드가 RRN13 이면 mask 된 bullet, RRNFirst7 이면 숫자 하나 + mask */
  flex: 1 1 0;
}

/* 구분자 */
.tds-stf__sep {
  flex-shrink: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  color: var(--label-tertiary, #8b95a1);
  font-size: var(--sub-ty-5-fs, 18px);
  line-height: var(--sub-ty-5-lh, 26px);
  font-weight: var(--w-regular, 400);
  user-select: none;
}

/* 각 반쪽 내부 input — TextField 와 동일한 기본 타이포 */
.tds-stf__input {
  width: 100%;
  min-width: 0;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--sub-ty-5-fs, 18px);
  line-height: var(--sub-ty-5-lh, 26px);
  font-weight: var(--w-medium, 500);
  color: var(--label, #191f28);
  letter-spacing: -0.01em;
  -webkit-appearance: none;
  appearance: none;
  /* 주민번호는 숫자 중앙 정렬 */
  text-align: center;
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
}
.tds-stf__input::placeholder {
  color: var(--label-tertiary, #8b95a1);
  font-weight: var(--w-regular, 400);
}

/* RRN13/RRNFirst7 마스킹 — 글자를 bullet 으로 표시 */
.tds-stf__input--masked {
  /* CSS 는 실제 값을 가리지 못함. text-security 는 일부 브라우저에 한정.
     실제 마스킹은 JSX 에서 별도 renderer 로 처리 (위에 덧댄 div 로 ••• 표시). */
  color: transparent;
  caret-color: var(--label, #191f28);
}
.tds-stf__mask {
  /* 마스킹 오버레이 — JSX 에서 절대 배치해 숫자 대신 ••• 를 보여줌 */
  position: absolute;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-family: inherit;
  font-size: var(--sub-ty-5-fs, 18px);
  line-height: var(--sub-ty-5-lh, 26px);
  font-weight: var(--w-medium, 500);
  color: var(--label, #191f28);
  letter-spacing: 0.12em;
  pointer-events: none;
  user-select: none;
}

.tds-stf__half {
  position: relative;
}

/* =============================================================================
 * TDS TextArea (#169)
 *  · textarea 엘리먼트. 기본 CSS 는 TextField.box 와 공유.
 *  · height: 고정 모드 — props.height 를 바디에 style 로 주입.
 *  · minHeight: 자동 확장 모드 — JSX 에서 scrollHeight 로 동기화.
 * ========================================================================== */

.tds-tf--textarea .tds-tf__body {
  /* textarea 는 세로 여백이 더 필요 */
  align-items: flex-start;
  padding: 14px 16px;
  min-height: auto;
}

.tds-tf__textarea {
  /* input 과 같은 속성 + 줄바꿈 허용 */
  flex: 1 1 auto;
  min-width: 0;
  width: 100%;
  border: 0;
  outline: 0;
  background: transparent;
  padding: 0;
  margin: 0;
  font-family: inherit;
  font-size: var(--sub-ty-5-fs, 18px);
  line-height: var(--sub-ty-5-lh, 26px);
  font-weight: var(--w-medium, 500);
  color: var(--label, #191f28);
  letter-spacing: -0.01em;
  resize: none;
  overflow-y: auto;
  /* 자동 확장 시 JSX 에서 height 를 직접 세팅. 여기선 기본값만. */
  min-height: 84px;
  -webkit-appearance: none;
  appearance: none;
}
.tds-tf__textarea::placeholder {
  color: var(--label-tertiary, #8b95a1);
  font-weight: var(--w-regular, 400);
}
.tds-tf__textarea:disabled {
  color: var(--label-tertiary, #8b95a1);
  -webkit-text-fill-color: var(--label-tertiary, #8b95a1);
}

/* textarea 는 자동 스크롤바 숨김 (iOS Safari 스타일) */
.tds-tf__textarea::-webkit-scrollbar {
  width: 2px;
}
.tds-tf__textarea::-webkit-scrollbar-thumb {
  background: var(--tds-grey-300, #d1d6db);
  border-radius: 1px;
}

/* Character counter (선택: maxLength 시 우측 하단 표시) */
.tds-tf__counter {
  font-family: inherit;
  font-size: var(--sub-ty-9-fs, 12px);
  line-height: var(--sub-ty-9-lh, 17px);
  color: var(--label-tertiary, #8b95a1);
  font-variant-numeric: tabular-nums;
  font-feature-settings: "tnum";
  margin-left: auto;
}
.tds-tf--error .tds-tf__counter {
  color: var(--alert-ink, #d22030);
}

/* ---------- prefers-reduced-motion ---------- */
@media (prefers-reduced-motion: reduce) {
  .tds-tf__label,
  .tds-tf__body,
  .tds-stf,
  .tds-tf__clear,
  .tds-tf__eye {
    transition-duration: 0ms !important;
  }
}

/* =============================================================================
 * TDS Typography utility classes
 *  · 사이즈/라인하이트만 지정 — 굵기는 .w-* 별도 조합
 *  · 예) <h1 class="ty-1 w-bold">제목</h1>
 *  · 예) <span class="sub-ty-9 w-medium">메타</span>
 * ========================================================================== */
/* Main 7 */
.ty-1 { font-size: var(--ty-1-fs); line-height: var(--ty-1-lh); }
.ty-2 { font-size: var(--ty-2-fs); line-height: var(--ty-2-lh); }
.ty-3 { font-size: var(--ty-3-fs); line-height: var(--ty-3-lh); }
.ty-4 { font-size: var(--ty-4-fs); line-height: var(--ty-4-lh); }
.ty-5 { font-size: var(--ty-5-fs); line-height: var(--ty-5-lh); }
.ty-6 { font-size: var(--ty-6-fs); line-height: var(--ty-6-lh); }
.ty-7 { font-size: var(--ty-7-fs); line-height: var(--ty-7-lh); }

/* Sub 13 */
.sub-ty-1  { font-size: var(--sub-ty-1-fs);  line-height: var(--sub-ty-1-lh); }
.sub-ty-2  { font-size: var(--sub-ty-2-fs);  line-height: var(--sub-ty-2-lh); }
.sub-ty-3  { font-size: var(--sub-ty-3-fs);  line-height: var(--sub-ty-3-lh); }
.sub-ty-4  { font-size: var(--sub-ty-4-fs);  line-height: var(--sub-ty-4-lh); }
.sub-ty-5  { font-size: var(--sub-ty-5-fs);  line-height: var(--sub-ty-5-lh); }
.sub-ty-6  { font-size: var(--sub-ty-6-fs);  line-height: var(--sub-ty-6-lh); }
.sub-ty-7  { font-size: var(--sub-ty-7-fs);  line-height: var(--sub-ty-7-lh); }
.sub-ty-8  { font-size: var(--sub-ty-8-fs);  line-height: var(--sub-ty-8-lh); }
.sub-ty-9  { font-size: var(--sub-ty-9-fs);  line-height: var(--sub-ty-9-lh); }
.sub-ty-10 { font-size: var(--sub-ty-10-fs); line-height: var(--sub-ty-10-lh); }
.sub-ty-11 { font-size: var(--sub-ty-11-fs); line-height: var(--sub-ty-11-lh); }
.sub-ty-12 { font-size: var(--sub-ty-12-fs); line-height: var(--sub-ty-12-lh); }
.sub-ty-13 { font-size: var(--sub-ty-13-fs); line-height: var(--sub-ty-13-lh); }

/* Weights 5 */
.w-light    { font-weight: var(--w-light); }
.w-regular  { font-weight: var(--w-regular); }
.w-medium   { font-weight: var(--w-medium); }
.w-semibold { font-weight: var(--w-semibold); }
.w-bold     { font-weight: var(--w-bold); }


/* ---------- LLM 하이라이트 마커 (Result.jsx _renderHighlighted) ---------- */
/* LLM 이 verdict_title 등에서 [[K]]...[[/K]] 로 감싼 핵심 키워드를
   <mark className="hl"> 로 변환한 결과물. 노란 형광펜 톤. */
mark.hl {
  background: #FFF36B;
  color: inherit;
  padding: 0 4px;
  border-radius: 3px;
  font-weight: 600;
  /* 컨테이너 색이 어두울 때(severity=alert hero) 가독성 보장 */
  box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.04);
}