/* ============================================================
   TDS 참고 컴포넌트: Bubble / Bottom Sheet / Bottom Info /
   List Header / List Footer / Loader / Menu / Modal
   https://tossmini-docs.toss.im/tds-mobile/components/bubble/
   https://tossmini-docs.toss.im/tds-mobile/components/bottom-sheet/
   https://tossmini-docs.toss.im/tds-mobile/components/bottom-info/
   https://tossmini-docs.toss.im/tds-mobile/components/list-header/
   https://tossmini-docs.toss.im/tds-mobile/components/list-footer/
   https://tossmini-docs.toss.im/tds-mobile/components/loader/
   https://tossmini-docs.toss.im/tds-mobile/components/menu/
   https://tossmini-docs.toss.im/tds-mobile/components/modal/
   TDS 패키지를 그대로 쓰는 게 아니라, 이 프로젝트의 순수 HTML/CSS/JS 스택에 맞춰
   구조/props/동작 스펙만 참고해서 직접 구현했다. 색상/타이포는 styles.css의
   기존 디자인 토큰(--primary-*, --surface*, --font-*)을 그대로 사용한다.
   ============================================================ */

/* ---------- Bubble ---------- */
.tds-bubble-row {
  display: flex;
  margin: 6px 0;
}

.tds-bubble-row--grey {
  justify-content: flex-start;
}

.tds-bubble-row--blue {
  justify-content: flex-end;
}

.tds-bubble {
  position: relative;
  display: inline-block;
  max-width: 320px;
  padding: 12px 16px;
  border-radius: 18px;
  font-size: var(--font-15);
  line-height: 1.5;
  word-break: break-word;
}

.tds-bubble--grey {
  background: var(--surface-soft);
  color: var(--text);
}

.tds-bubble--blue {
  background: var(--primary-100);
  color: var(--surface);
}

/* 꼬리는 말풍선 배경색과 같은 색의 삼각형을 아래쪽 바깥 모서리에 붙여서 만든다.
   grey는 왼쪽 아래, blue는 오른쪽 아래로 향한다(스펙: 배경색에 따라 꼬리 위치가 자동 결정).
   꼬리가 붙는 쪽 모서리는 둥근 border-radius를 없애서(sharp corner), 삼각형이 말풍선 몸통에서
   뜨지 않고 바로 이어 붙게 만든다 - 안 그러면 둥근 모서리 때문에 꼬리가 허공에 떠 보인다 */
.tds-bubble--grey.tds-bubble--tail {
  border-bottom-left-radius: 2px;
}

.tds-bubble--blue.tds-bubble--tail {
  border-bottom-right-radius: 2px;
}

.tds-bubble--grey.tds-bubble--tail::after {
  content: "";
  position: absolute;
  bottom: 0;
  left: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 0 8px 7px;
  border-color: transparent transparent var(--surface-soft) transparent;
}

.tds-bubble--blue.tds-bubble--tail::after {
  content: "";
  position: absolute;
  bottom: 0;
  right: -7px;
  width: 0;
  height: 0;
  border-style: solid;
  border-width: 0 7px 8px 0;
  border-color: transparent transparent var(--primary-100) transparent;
}

/* ---------- Bottom Sheet ---------- */
.tds-bottom-sheet-root {
  position: fixed;
  inset: 0;
  z-index: 200;
  visibility: hidden;
  pointer-events: none;
}

.tds-bottom-sheet-root.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tds-bottom-sheet-dimmer {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 220ms ease;
}

.tds-bottom-sheet-root.is-open .tds-bottom-sheet-dimmer {
  opacity: 1;
}

.tds-bottom-sheet-root.tds-bottom-sheet--no-dimmer .tds-bottom-sheet-dimmer {
  background: transparent;
}

.tds-bottom-sheet-panel {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  max-height: 88vh;
  display: flex;
  flex-direction: column;
  background: var(--surface);
  border-radius: 20px 20px 0 0;
  box-shadow: var(--shadow);
  transform: translateY(100%);
  transition: transform 280ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tds-bottom-sheet-panel:focus {
  outline: none;
}

.tds-bottom-sheet-root.is-open .tds-bottom-sheet-panel {
  transform: translateY(0);
}

.tds-bottom-sheet-handle {
  width: 36px;
  height: 4px;
  margin: 10px auto 0;
  border-radius: 2px;
  background: var(--line);
  flex-shrink: 0;
}

.tds-bottom-sheet-header {
  padding: 20px 24px 0;
  flex-shrink: 0;
}

.tds-bottom-sheet-title {
  margin: 0;
  font-size: var(--font-20);
  font-weight: 800;
}

.tds-bottom-sheet-description {
  margin: 8px 0 0;
  color: var(--muted);
  font-size: var(--font-14);
  line-height: 1.5;
}

.tds-bottom-sheet-body {
  padding: 16px 24px;
  overflow-y: auto;
  font-size: var(--font-body);
  line-height: 1.6;
}

.tds-bottom-sheet-footer {
  display: flex;
  gap: 8px;
  padding: 12px 24px 24px;
  flex-shrink: 0;
}

.tds-bottom-sheet-footer button {
  flex: 1;
  min-height: 52px;
  border-radius: 10px;
}

.tds-bottom-sheet-cta {
  background: var(--primary-100);
  border-color: var(--primary-100);
  color: var(--surface);
}

.tds-bottom-sheet-cta--left {
  background: var(--surface);
  border-color: var(--line-strong);
  color: var(--text);
}

/* ---------- Bottom Info ---------- */
/* sticky로 동작하므로 높이가 정해진 스크롤 컨테이너(.tds-bottom-info-anchor) 안에서만 의도대로 붙는다 */
.tds-bottom-info-anchor {
  position: relative;
  overflow-y: auto;
}

.tds-bottom-info {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 20px 20px 16px;
  background-image: linear-gradient(var(--surface) 40%, rgba(255, 255, 255, 0));
}

.tds-bottom-info--no-gradient {
  background: var(--surface);
  background-image: none;
}

.tds-bottom-info__list {
  margin: 0;
  padding: 0;
  list-style: none;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tds-bottom-info__list li {
  position: relative;
  padding-left: 12px;
  color: var(--muted);
  font-size: var(--font-12);
  line-height: 1.5;
}

.tds-bottom-info__list li::before {
  content: "·";
  position: absolute;
  left: 0;
  top: 0;
}

/* ---------- List Header ---------- */
.tds-list-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 16px;
  padding: 16px 4px;
}

.tds-list-header--right-bottom {
  align-items: flex-end;
}

.tds-list-header__title-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  min-width: 0;
  flex-shrink: 1;
}

.tds-list-header__description {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-14);
}

.tds-list-header__title {
  margin: 0;
  color: var(--text);
}

.tds-list-header__title-button {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 800;
}

.tds-list-header__title-button--xsmall {
  font-size: var(--font-13);
}

.tds-list-header__title-button--medium {
  font-size: var(--font-body);
}

.tds-list-header__title-button--large {
  font-size: var(--font-20);
}

.tds-list-header__title-button--underline {
  text-decoration: underline;
}

.tds-list-header__title-arrow {
  color: var(--muted);
}

.tds-list-header__title-selector {
  border: 0;
  background: none;
  font-weight: 800;
  color: var(--text);
  cursor: pointer;
}

.tds-list-header__right {
  flex-shrink: 0;
}

.tds-list-header__right-text {
  color: var(--muted);
  font-size: var(--font-14);
}

.tds-list-header__right-arrow {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--font-14);
}

/* ---------- List Footer ---------- */
.tds-list-footer {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  width: 100%;
  min-height: 52px;
  padding: 14px 20px;
  border: 0;
  background: none;
  color: var(--primary-100);
  font-size: var(--font-body);
  font-weight: 600;
  text-align: center;
}

.tds-list-footer--border-full {
  border-top: 1px solid var(--line);
}

.tds-list-footer--border-indented {
  position: relative;
}

.tds-list-footer--border-indented::before {
  content: "";
  position: absolute;
  top: 0;
  left: 20px;
  right: 0;
  border-top: 1px solid var(--line);
}

.tds-list-footer--interactive {
  cursor: pointer;
  transition: background-color 160ms ease;
}

.tds-list-footer--interactive:hover,
.tds-list-footer--interactive:focus-visible {
  background: var(--surface-soft);
}

.tds-list-footer__icon {
  font-size: var(--font-13);
}

/* ---------- Loader ---------- */
.tds-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
}

.tds-loader__spinner {
  display: block;
  border-radius: 50%;
  border: 3px solid var(--surface-mid);
  border-top-color: var(--primary-100);
  animation: tds-loader-spin 800ms linear infinite;
}

.tds-loader--small .tds-loader__spinner {
  width: 20px;
  height: 20px;
  border-width: 2px;
}

.tds-loader--medium .tds-loader__spinner {
  width: 32px;
  height: 32px;
  border-width: 3px;
}

.tds-loader--large .tds-loader__spinner {
  width: 44px;
  height: 44px;
  border-width: 4px;
}

.tds-loader--dark .tds-loader__spinner {
  border-color: var(--surface-mid);
  border-top-color: var(--text);
}

.tds-loader--light .tds-loader__spinner {
  border-color: rgba(255, 255, 255, 0.3);
  border-top-color: #ffffff;
}

.tds-loader--light .tds-loader__label {
  color: #ffffff;
}

.tds-loader__label {
  margin: 0;
  max-width: 220px;
  color: var(--muted);
  font-size: var(--font-14);
  line-height: 1.5;
  text-align: center;
  white-space: pre-line;
}

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

/* Loader의 light 타입 데모용 어두운 배경 */
.tds-loader-demo-dark-bg {
  display: flex;
  justify-content: center;
  padding: 32px;
  background: var(--grey-900);
  border-radius: 8px;
}

/* ---------- Menu ---------- */
.tds-menu-root {
  position: relative;
  display: inline-block;
}

.tds-menu-trigger {
  min-height: 44px;
  padding: 0 16px;
}

.tds-menu-dropdown {
  position: absolute;
  z-index: 30;
  min-width: 200px;
  padding: 6px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
  box-shadow: var(--shadow);
}

.tds-menu-dropdown--bottom-start {
  top: calc(100% + 6px);
  left: 0;
}

.tds-menu-dropdown--bottom-end {
  top: calc(100% + 6px);
  right: 0;
}

.tds-menu-dropdown--top-start {
  bottom: calc(100% + 6px);
  left: 0;
}

.tds-menu-dropdown--top-end {
  bottom: calc(100% + 6px);
  right: 0;
}

.tds-menu-header {
  padding: 8px 10px;
  color: var(--muted);
  font-size: var(--font-12);
  font-weight: 700;
}

.tds-menu-item {
  display: flex;
  align-items: center;
  width: 100%;
  min-height: 40px;
  gap: 8px;
  padding: 0 10px;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--font-body);
  text-align: left;
  white-space: nowrap;
}

.tds-menu-item:hover,
.tds-menu-item:focus-visible {
  background: var(--surface-soft);
}

.tds-menu-item__label {
  flex: 1;
  min-width: 0;
}

.tds-menu-item__right {
  color: var(--muted);
  font-size: var(--font-13);
}

.tds-menu-item--check .tds-menu-item__check {
  visibility: hidden;
  color: var(--primary-100);
}

.tds-menu-item--check[aria-checked="true"] .tds-menu-item__check {
  visibility: visible;
}

/* ---------- Modal ---------- */
.tds-modal-root {
  position: fixed;
  inset: 0;
  z-index: 210;
  visibility: hidden;
  pointer-events: none;
}

.tds-modal-root.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tds-modal-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 200ms ease;
}

.tds-modal-root.is-open .tds-modal-overlay {
  opacity: 1;
}

.tds-modal-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(360px, calc(100% - 40px));
  padding: 24px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.tds-modal-content:focus {
  outline: none;
}

.tds-modal-root.is-open .tds-modal-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.tds-modal-content h2 {
  margin: 0 0 8px;
  font-size: var(--font-20);
}

.tds-modal-content p {
  margin: 0;
  color: var(--muted);
  line-height: 1.5;
}

.tds-modal-content .tds-modal-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.tds-modal-content .tds-modal-actions button {
  flex: 1;
  min-height: 48px;
}

/* ---------- Rating ---------- */
.tds-rating {
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.tds-rating__stars-box {
  position: relative;
  display: inline-flex;
}

.tds-rating__stars {
  display: inline-flex;
  gap: 2px;
}

.tds-rating--tiny .tds-rating__stars {
  font-size: 12px;
}

.tds-rating--small .tds-rating__stars {
  font-size: 14px;
}

.tds-rating--medium .tds-rating__stars {
  font-size: 18px;
}

.tds-rating--large .tds-rating__stars {
  font-size: 24px;
}

.tds-rating--big .tds-rating__stars {
  font-size: 32px;
}

.tds-rating__star {
  line-height: 1;
  color: var(--line);
}

.tds-rating__star.is-filled {
  color: var(--secondary);
}

.tds-rating__star.is-interactive {
  cursor: pointer;
}

/* 화면엔 안 보이지만 키보드(방향키)/스크린리더 전용 컨트롤로 남겨두고,
   마우스/터치 클릭은 그 아래 별 아이콘이 직접 받도록 pointer-events를 꺼둔다.
   (켜두면 이 input이 항상 위에 그려져 별 아이콘의 클릭/hover가 아예 전달되지 않는다) */
.tds-rating__range-input {
  position: absolute;
  inset: 0;
  width: 100%;
  height: 100%;
  margin: 0;
  opacity: 0;
  pointer-events: none;
}

.tds-rating__text {
  color: var(--muted);
  font-size: var(--font-13);
}

/* ---------- Result ---------- */
.tds-result {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 12px;
  padding: 40px 24px;
  text-align: center;
}

.tds-result__figure {
  font-size: 48px;
  line-height: 1;
}

.tds-result__title {
  margin: 0;
  font-size: var(--font-20);
  font-weight: 800;
}

.tds-result__description {
  margin: 0;
  max-width: 320px;
  color: var(--muted);
  font-size: var(--font-14);
  line-height: 1.6;
  white-space: pre-line;
}

.tds-result__button-area {
  margin-top: 8px;
}

/* ---------- Search Field ---------- */
.tds-search-field {
  position: relative;
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 48px;
  padding: 0 14px;
  border: 1px solid var(--line-strong);
  background: var(--surface);
}

.tds-search-field__icon {
  flex-shrink: 0;
  color: var(--muted);
  font-size: var(--font-14);
}

.tds-search-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.tds-search-field__input:focus {
  outline: none;
}

.tds-search-field__input::-webkit-search-cancel-button {
  display: none;
}

.tds-search-field__delete {
  display: none;
  flex-shrink: 0;
  min-height: auto;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  font-size: var(--font-13);
  cursor: pointer;
}

.tds-search-field.has-value .tds-search-field__delete {
  display: inline-flex;
}

.tds-search-field--fixed {
  position: sticky;
  top: 0;
  z-index: 10;
}

.tds-search-field--fixed.tds-search-field--no-space {
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

/* ---------- Segmented Control ---------- */
.tds-segmented-control {
  position: relative;
  display: inline-flex;
  gap: 2px;
  padding: 4px;
  border: 1px solid var(--line);
  background: var(--surface-soft);
}

.tds-segmented-control--fluid {
  display: flex;
  max-width: 100%;
  overflow-x: auto;
}

.tds-segmented-control__indicator {
  position: absolute;
  top: 4px;
  bottom: 4px;
  left: 0;
  background: var(--surface);
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.15);
  transition:
    transform 220ms cubic-bezier(0.22, 1, 0.36, 1),
    width 220ms cubic-bezier(0.22, 1, 0.36, 1);
  z-index: 0;
}

.tds-segmented-control__item {
  position: relative;
  z-index: 1;
  flex: 1;
  min-height: 36px;
  padding: 0 16px;
  border: 0;
  background: transparent;
  color: var(--muted);
  font-size: var(--font-14);
  white-space: nowrap;
}

.tds-segmented-control--fluid .tds-segmented-control__item {
  flex: none;
}

.tds-segmented-control--large .tds-segmented-control__item {
  min-height: 44px;
  font-size: var(--font-15);
}

.tds-segmented-control__item[aria-checked="true"] {
  color: var(--text);
  font-weight: 700;
}

/* ---------- Skeleton ---------- */
.tds-skeleton {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.tds-skeleton[data-play="hide"] {
  display: none;
}

.tds-skeleton--white {
  --tds-skeleton-base: #eeeeee;
  --tds-skeleton-highlight: #f8f8f8;
}

.tds-skeleton--grey {
  --tds-skeleton-base: var(--surface-mid);
  --tds-skeleton-highlight: var(--surface-soft);
}

.tds-skeleton--greyOpacity100 {
  --tds-skeleton-base: #d3d3d3;
  --tds-skeleton-highlight: #e6e6e6;
}

.tds-skeleton-title,
.tds-skeleton-subtitle,
.tds-skeleton-list-row,
.tds-skeleton-icon,
.tds-skeleton-card {
  background-image: linear-gradient(
    90deg,
    var(--tds-skeleton-base) 25%,
    var(--tds-skeleton-highlight) 37%,
    var(--tds-skeleton-base) 63%
  );
  background-size: 400% 100%;
  animation: tds-skeleton-shimmer 1.6s ease-in-out infinite;
  border-radius: 6px;
}

.tds-skeleton-title {
  width: 55%;
  height: 24px;
}

.tds-skeleton-subtitle {
  width: 35%;
  height: 14px;
}

.tds-skeleton-list-row {
  width: 100%;
  height: 16px;
}

.tds-skeleton-list-row--icon-wrap {
  display: flex;
  align-items: center;
  gap: 10px;
}

.tds-skeleton-icon {
  flex-shrink: 0;
  width: 36px;
  height: 36px;
  border-radius: 50%;
}

.tds-skeleton-card {
  width: 100%;
  height: 120px;
  border-radius: 12px;
}

.tds-skeleton-spacer {
  flex-shrink: 0;
}

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

/* ---------- Numeric Spinner ---------- */
.tds-numeric-spinner {
  display: inline-flex;
  align-items: center;
  border: 1px solid var(--line);
  border-radius: 8px;
  overflow: hidden;
}

.tds-numeric-spinner__btn {
  display: grid;
  place-items: center;
  min-height: 0;
  border: 0;
  background: var(--surface-soft);
  color: var(--text);
  font-weight: 700;
  cursor: pointer;
}

.tds-numeric-spinner__btn:disabled {
  color: var(--grey-400);
  cursor: not-allowed;
}

.tds-numeric-spinner__value {
  display: grid;
  place-items: center;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.tds-numeric-spinner--tiny .tds-numeric-spinner__btn {
  width: 22px;
  height: 22px;
  font-size: 12px;
}

.tds-numeric-spinner--tiny .tds-numeric-spinner__value {
  min-width: 22px;
  font-size: var(--font-11);
}

.tds-numeric-spinner--small .tds-numeric-spinner__btn {
  width: 28px;
  height: 28px;
  font-size: 14px;
}

.tds-numeric-spinner--small .tds-numeric-spinner__value {
  min-width: 28px;
  font-size: var(--font-13);
}

.tds-numeric-spinner--medium .tds-numeric-spinner__btn {
  width: 34px;
  height: 34px;
  font-size: 16px;
}

.tds-numeric-spinner--medium .tds-numeric-spinner__value {
  min-width: 34px;
  font-size: var(--font-15);
}

.tds-numeric-spinner--large .tds-numeric-spinner__btn {
  width: 44px;
  height: 44px;
  font-size: 18px;
}

.tds-numeric-spinner--large .tds-numeric-spinner__value {
  min-width: 44px;
  font-size: var(--font-18);
}

/* ---------- Post ---------- */
.tds-post {
  max-width: 640px;
}

.tds-post-heading {
  margin: 0 0 12px;
  font-weight: 800;
}

.tds-post-heading--h1 {
  font-size: var(--font-h2);
}

.tds-post-heading--h2 {
  font-size: var(--font-h3);
}

.tds-post-heading--h3 {
  margin-top: 28px;
  font-size: var(--font-20);
}

.tds-post-heading--h4 {
  margin-top: 20px;
  font-size: var(--font-body);
}

.tds-post-paragraph {
  margin: 0 0 20px;
  color: var(--muted);
  font-size: var(--font-15);
  line-height: 1.7;
}

.tds-post-list {
  margin: 0 0 20px;
  padding-left: 20px;
  color: var(--muted);
  font-size: var(--font-15);
  line-height: 1.7;
}

.tds-post-list li {
  margin-bottom: 6px;
}

.tds-post-hr {
  margin: 24px 0;
  border: 0;
  border-top: 1px solid var(--line);
}

/* ---------- Progress Stepper ---------- */
.tds-stepper {
  display: flex;
  align-items: flex-start;
}

.tds-stepper__step {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 6px;
}

.tds-stepper__label {
  font-size: var(--font-12);
  color: var(--muted);
  white-space: nowrap;
}

.tds-stepper__step.is-active .tds-stepper__label {
  color: var(--text);
  font-weight: 700;
}

.tds-stepper__connector {
  flex: 1;
  min-width: 32px;
  height: 2px;
  margin: 5px 6px 0;
  background: var(--grey-300);
}

.tds-stepper__connector.is-completed {
  background: var(--primary-100);
}

.tds-stepper--compact .tds-stepper__dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  background: var(--grey-300);
}

.tds-stepper--compact .tds-stepper__step.is-completed .tds-stepper__dot,
.tds-stepper--compact .tds-stepper__step.is-active .tds-stepper__dot {
  background: var(--primary-100);
}

.tds-stepper--icon .tds-stepper__icon {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border: 2px solid var(--grey-300);
  border-radius: 50%;
  color: var(--muted);
  font-size: var(--font-13);
  font-weight: 700;
}

.tds-stepper--icon .tds-stepper__step.is-completed .tds-stepper__icon {
  border-color: var(--primary-100);
  background: var(--primary-100);
  color: #ffffff;
}

.tds-stepper--icon .tds-stepper__step.is-active .tds-stepper__icon {
  border-color: var(--primary-100);
  color: var(--primary-100);
}

.tds-stepper--icon .tds-stepper__connector {
  margin-top: 13px;
}

/* ---------- Text Button ----------
   https://tossmini-docs.toss.im/tds-mobile/components/text-button/ */
.tds-text-button {
  display: inline-flex;
  align-items: center;
  gap: 2px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 600;
  cursor: pointer;
}

.tds-text-button--xsmall {
  font-size: var(--font-11);
}

.tds-text-button--small {
  font-size: var(--font-13);
}

.tds-text-button--medium {
  font-size: var(--font-15);
}

.tds-text-button--large {
  font-size: var(--font-body);
}

.tds-text-button--xlarge {
  font-size: var(--font-20);
}

.tds-text-button--xxlarge {
  font-size: var(--font-28);
}

.tds-text-button--underline .tds-text-button__label {
  text-decoration: underline;
}

.tds-text-button__arrow {
  color: var(--muted);
}

.tds-text-button:disabled,
.tds-text-button.is-disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

/* ---------- Toast ----------
   https://tossmini-docs.toss.im/tds-mobile/components/toast/ */
.tds-toast {
  position: absolute;
  left: 50%;
  display: flex;
  align-items: center;
  gap: 10px;
  max-width: calc(100% - 40px);
  padding: 14px 18px;
  border-radius: 999px;
  background: var(--grey-900);
  color: var(--surface);
  box-shadow: var(--shadow);
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity 0.2s ease,
    transform 0.2s ease;
  z-index: 20;
}

.tds-toast--top {
  top: 20px;
  transform: translate(-50%, -4px);
}

.tds-toast--bottom {
  bottom: 20px;
}

.tds-toast--bottom.tds-toast--higher-than-cta {
  bottom: 84px;
}

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

.tds-toast__addon {
  display: inline-flex;
  flex-shrink: 0;
}

.tds-toast__text {
  flex: 1;
  min-width: 0;
  font-size: var(--font-14);
  line-height: 1.5;
  white-space: pre-line;
}

.tds-toast__button {
  flex-shrink: 0;
  padding: 0;
  border: 0;
  background: none;
  color: var(--secondary);
  font-size: var(--font-14);
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Tooltip ----------
   https://tossmini-docs.toss.im/tds-mobile/components/tooltip/ */
.tds-tooltip-root {
  position: relative;
  display: inline-block;
}

.tds-tooltip {
  position: absolute;
  left: 50%;
  max-width: 240px;
  padding: 10px 14px;
  border-radius: 10px;
  background: var(--grey-900);
  color: var(--surface);
  text-align: left;
  font-size: var(--font-13);
  line-height: 1.5;
  opacity: 0;
  transform: translate(-50%, 4px);
  transition:
    opacity 0.15s ease,
    transform 0.15s ease;
  z-index: 30;
}

.tds-tooltip--fixed {
  position: fixed;
}

.tds-tooltip--small {
  font-size: var(--font-12);
  padding: 8px 12px;
}

.tds-tooltip--large {
  font-size: var(--font-14);
  padding: 12px 16px;
}

.tds-tooltip--align-center .tds-tooltip__message {
  text-align: center;
}

.tds-tooltip--align-right .tds-tooltip__message {
  text-align: right;
}

.tds-tooltip--bottom {
  top: calc(100% + var(--tds-tooltip-offset, 8px));
  transform: translate(-50%, 4px);
}

.tds-tooltip--top {
  bottom: calc(100% + var(--tds-tooltip-offset, 8px));
  transform: translate(-50%, -4px);
}

.tds-tooltip.is-open {
  opacity: 1;
  transform: translate(-50%, 0);
}

.tds-tooltip--motion-strong {
  transition-duration: 0.28s;
}

.tds-tooltip::before {
  content: "";
  position: absolute;
  left: var(--tds-tooltip-anchor, 50%);
  width: 10px;
  height: 10px;
  background: inherit;
  transform: translateX(-50%) rotate(45deg);
}

.tds-tooltip--bottom::before {
  top: -4px;
  border-radius: 2px 0 0 0;
}

.tds-tooltip--top::before {
  bottom: -4px;
  border-radius: 0 0 2px 0;
}

.tds-tooltip--clip-left::before {
  left: 14px;
}

.tds-tooltip--clip-right::before {
  left: calc(100% - 14px);
}

/* ---------- Top ----------
   https://tossmini-docs.toss.im/tds-mobile/components/top/ */
.tds-top {
  display: flex;
  flex-direction: column;
}

.tds-top__title-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.tds-top__title-row--right-end {
  align-items: flex-end;
}

.tds-top__title-col {
  min-width: 0;
  flex: 1;
}

.tds-top__title {
  color: var(--text);
  font-weight: 800;
  font-size: var(--font-28);
  line-height: 1.3;
}

.tds-top__title-paragraph {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.tds-top__title-paragraph--22 {
  font-size: var(--font-18);
}

.tds-top__title-paragraph--28 {
  font-size: var(--font-28);
}

.tds-top__title-button,
.tds-top__title-selector {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-weight: 800;
  font-size: var(--font-28);
  cursor: pointer;
}

.tds-top__title-selector-arrow {
  color: var(--muted);
  font-size: var(--font-20);
}

.tds-top__subtitle {
  color: var(--muted);
  font-size: var(--font-15);
}

.tds-top__subtitle--top {
  margin-bottom: 4px;
}

.tds-top__subtitle--bottom {
  margin-top: 4px;
}

.tds-top__subtitle-paragraph {
  margin: 0;
}

.tds-top__subtitle-button {
  padding: 0;
  border: 0;
  background: none;
  color: var(--primary-100);
  font-size: var(--font-15);
  font-weight: 600;
  text-decoration: underline;
  cursor: pointer;
}

.tds-top__subtitle-badges {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}

.tds-top__badge {
  padding: 3px 8px;
  border-radius: 6px;
  font-size: var(--font-12);
  font-weight: 700;
}

.tds-top__badge--fill {
  background: var(--chip-blue);
  color: var(--surface);
}

.tds-top__badge--weak {
  background: color-mix(in oklch, var(--chip-blue) 16%, white);
  color: var(--chip-blue);
}

.tds-top__badge--red.tds-top__badge--fill {
  background: var(--chip-red);
}

.tds-top__badge--red.tds-top__badge--weak {
  background: color-mix(in oklch, var(--chip-red) 16%, white);
  color: var(--chip-red);
}

.tds-top__badge--green.tds-top__badge--fill {
  background: var(--chip-green);
}

.tds-top__badge--green.tds-top__badge--weak {
  background: color-mix(in oklch, var(--chip-green) 16%, white);
  color: var(--chip-green);
}

.tds-top__badge--yellow.tds-top__badge--fill {
  background: var(--chip-yellow);
}

.tds-top__badge--yellow.tds-top__badge--weak {
  background: color-mix(in oklch, var(--chip-yellow) 16%, white);
  color: var(--chip-yellow);
}

.tds-top__upper-asset,
.tds-top__right-asset {
  display: inline-flex;
}

.tds-top__right-button {
  padding: 8px;
  border: 0;
  border-radius: 50%;
  background: var(--surface-soft);
  color: var(--text);
  cursor: pointer;
}

.tds-top__lower {
  display: flex;
}

.tds-top__lower-button {
  padding: 8px 14px;
  border: 1px solid var(--line);
  border-radius: 8px;
  background: none;
  color: var(--text);
  font-size: var(--font-14);
  font-weight: 600;
  cursor: pointer;
}

.tds-top__lower-cta {
  display: flex;
  gap: 8px;
  width: 100%;
}

.tds-top__lower-cta-button {
  flex: 1;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 10px;
  border: 1px solid transparent;
  font-size: var(--font-body);
  font-weight: 700;
  cursor: pointer;
}

.tds-top__lower-cta-button--solid {
  background: var(--primary-100);
  border-color: var(--primary-100);
  color: var(--surface);
}

.tds-top__lower-cta-button--weak {
  background: color-mix(in oklch, var(--primary-100) 12%, white);
  color: var(--primary-100);
}

/* Top을 포트폴리오의 섹션 타이틀로 쓸 때 붙이는 모디파이어. Top 기본 타이포(28px 고정)
   대신 이 사이트의 기존 h2/section-lead 타이포 토큰을 그대로 재사용해서, 페이지 전체 섹션
   타이틀 크기가 지금까지와 동일하게 보이도록 맞춘다 */
.tds-top--section .tds-top__title {
  font-size: var(--font-h2);
  line-height: var(--leading-h2);
}

.tds-top--section .tds-top__subtitle--bottom {
  max-width: 640px;
  margin-top: 18px;
  color: var(--muted);
  font-size: var(--font-body);
  line-height: 1.7;
}

/* projects 섹션처럼 title 옆에 탭 목록 등 컨트롤(right)이 붙는 경우, 좁은 화면에서는
   가로로 욱여넣지 않고 위아래로 쌓는다(예전 .section-title-row의 980px 반응형 규칙과 동일) */
@media (max-width: 980px) {
  .tds-top--section .tds-top__title-row {
    display: grid;
  }
}

/* ---------- AgreementV4 ----------
   https://tossmini-docs.toss.im/tds-mobile/components/Agreement/v4/ */
.tds-agreement-group {
  display: flex;
  flex-direction: column;
  position: relative;
}

.tds-agreement-group--gradient::after {
  content: "";
  position: sticky;
  bottom: 0;
  display: block;
  height: 24px;
  margin-top: -24px;
  background: linear-gradient(to bottom, transparent, var(--surface));
  pointer-events: none;
}

.tds-agreement-item {
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 4px;
  border: 0;
  background: none;
  text-align: left;
  cursor: default;
}

button.tds-agreement-item {
  cursor: pointer;
}

.tds-agreement-item--small,
.tds-agreement-item--small-last {
  padding: 8px 4px;
}

.tds-agreement-item__left {
  display: inline-flex;
  flex-shrink: 0;
}

.tds-agreement-item__middle {
  flex: 1;
  min-width: 0;
  display: flex;
  align-items: center;
  gap: 6px;
  flex-wrap: wrap;
}

.tds-agreement-item__right {
  display: inline-flex;
  flex-shrink: 0;
  align-items: center;
  gap: 6px;
}

.tds-agreement-checkbox {
  display: grid;
  place-items: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 2px solid var(--line);
  border-radius: 50%;
  background: none;
  color: transparent;
  cursor: pointer;
  transition: all 0.15s ease;
}

.tds-agreement-checkbox--motion-strong {
  transition-duration: 0.25s;
}

.tds-agreement-checkbox--dot {
  border-radius: 50%;
}

.tds-agreement-checkbox--dot .tds-agreement-checkbox__mark {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: currentcolor;
}

.tds-agreement-checkbox--hidden {
  visibility: hidden;
}

.tds-agreement-checkbox.is-checked {
  border-color: var(--primary-100);
  background: var(--primary-100);
  color: var(--surface);
}

.tds-agreement-checkbox:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tds-agreement-checkbox__mark {
  font-size: var(--font-13);
  font-weight: 700;
  line-height: 1;
}

.tds-agreement-text {
  padding: 0;
  border: 0;
  background: none;
  color: var(--text);
  font-size: var(--font-15);
  text-align: left;
  cursor: inherit;
}

button.tds-agreement-text {
  cursor: pointer;
}

.tds-agreement-badge {
  padding: 2px 6px;
  border-radius: 4px;
  font-size: var(--font-11);
  font-weight: 700;
}

.tds-agreement-badge--fill {
  background: var(--chip-blue);
  color: var(--surface);
}

.tds-agreement-badge--clear {
  background: none;
  border: 1px solid var(--line);
  color: var(--muted);
}

.tds-agreement-necessity {
  font-size: var(--font-13);
  font-weight: 700;
}

.tds-agreement-necessity--mandatory {
  color: var(--primary-100);
}

.tds-agreement-necessity--optional {
  color: var(--muted);
}

.tds-agreement-arrow {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  padding: 0;
  border: 0;
  background: none;
  color: var(--muted);
  cursor: pointer;
  transition: transform 0.15s ease;
}

.tds-agreement-arrow::after {
  content: "⌄";
}

.tds-agreement-arrow[aria-expanded="true"] {
  transform: rotate(180deg);
}

.tds-agreement-description {
  margin: 4px 0 0;
  padding: 0;
  color: var(--muted);
  font-size: var(--font-13);
  line-height: 1.6;
  white-space: pre-line;
}

.tds-agreement-description--box {
  padding: 10px 12px;
  border-radius: 8px;
  background: var(--surface-soft);
}

.tds-agreement-header {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.tds-agreement-header--xLarge {
  font-size: var(--font-28);
}

.tds-agreement-header--large {
  font-size: var(--font-20);
}

.tds-agreement-header--medium,
.tds-agreement-header--medium-title {
  font-size: var(--font-body);
}

.tds-agreement-header--small,
.tds-agreement-header--small-last {
  font-size: var(--font-14);
}

.tds-agreement-collapsible__content,
.tds-agreement-indent-pushable__content {
  transition: margin-left 0.15s ease;
}

@media (prefers-reduced-motion: reduce) {
  .tds-bottom-sheet-panel,
  .tds-bottom-sheet-dimmer,
  .tds-modal-content,
  .tds-modal-overlay,
  .tds-toast,
  .tds-tooltip,
  .tds-agreement-checkbox,
  .tds-agreement-arrow {
    transition-duration: 0.01ms;
  }

  .tds-loader__spinner {
    animation-duration: 1.2s;
  }

  .tds-skeleton-title,
  .tds-skeleton-subtitle,
  .tds-skeleton-list-row,
  .tds-skeleton-icon,
  .tds-skeleton-card {
    animation: none;
  }
}

/* ---------- Slider ----------
   https://tossmini-docs.toss.im/tds-mobile/components/slider/ */
.tds-slider {
  width: 100%;
}

.tds-slider__track-wrap {
  position: relative;
  padding-top: 26px;
}

.tds-slider__input {
  -webkit-appearance: none;
  appearance: none;
  width: 100%;
  height: 4px;
  margin: 0;
  border-radius: 2px;
  background: linear-gradient(
    to right,
    var(--tds-slider-color, var(--primary-100)) var(--tds-slider-percent, 0%),
    var(--surface-mid) var(--tds-slider-percent, 0%)
  );
  outline: none;
}

.tds-slider__input::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: var(--surface);
  border: 1px solid var(--line-strong);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.tds-slider__input::-moz-range-thumb {
  width: 22px;
  height: 22px;
  border: 1px solid var(--line-strong);
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  cursor: pointer;
}

.tds-slider__input::-moz-range-track {
  height: 4px;
  border-radius: 2px;
  background: var(--surface-mid);
}

.tds-slider__input::-moz-range-progress {
  height: 4px;
  border-radius: 2px;
  background: var(--tds-slider-color, var(--primary-100));
}

.tds-slider__input:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}

.tds-slider__tooltip {
  position: absolute;
  top: 0;
  left: 0;
  transform: translateX(-50%);
  padding: 2px 8px;
  border-radius: 6px;
  background: var(--grey-900);
  color: #ffffff;
  font-size: var(--font-12);
  white-space: nowrap;
}

.tds-slider__label-row {
  display: flex;
  justify-content: space-between;
  margin-top: 8px;
  color: var(--muted);
  font-size: var(--font-13);
}

.tds-slider__label-mid {
  flex: 1;
  text-align: center;
}

/* ---------- Stepper ----------
   https://tossmini-docs.toss.im/tds-mobile/components/stepper/
   progress-stepper.js가 이미 "tds-stepper" 프리픽스를 쓰고 있어(진행 상태 표시용, 별개
   컴포넌트) 충돌을 피하려고 이 컴포넌트는 "tds-stepper-list"를 쓴다. */
.tds-stepper-list {
  display: flex;
  flex-direction: column;
  margin: 0;
  padding: 0;
  list-style: none;
}

.tds-stepper-list__row {
  position: relative;
  display: flex;
  gap: 14px;
  padding: 4px 0 28px;
}

.tds-stepper-list__row::before {
  content: "";
  position: absolute;
  left: 13px;
  top: 28px;
  bottom: 0;
  width: 2px;
  background: var(--line);
}

.tds-stepper-list__row--no-line::before {
  display: none;
}

.tds-stepper-list__number {
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  width: 28px;
  height: 28px;
  border-radius: 50%;
  background: var(--primary-100);
  color: var(--surface);
  font-size: var(--font-13);
  font-weight: 800;
}

.tds-stepper-list__center {
  flex: 1;
  min-width: 0;
  padding-top: 2px;
}

.tds-stepper-list__title {
  margin: 0;
  color: var(--text);
  font-weight: 800;
}

.tds-stepper-list__title--A {
  font-size: var(--font-body);
}

.tds-stepper-list__title--B {
  font-size: var(--font-20);
}

.tds-stepper-list__title--C {
  font-size: var(--font-14);
}

.tds-stepper-list__description {
  margin: 4px 0 0;
  color: var(--muted);
  font-size: var(--font-14);
  line-height: 1.5;
}

.tds-stepper-list__right {
  flex-shrink: 0;
  align-self: center;
}

.tds-stepper-list__row--enter {
  animation: tds-stepper-list-enter 420ms cubic-bezier(0.22, 1, 0.36, 1) both;
}

@keyframes tds-stepper-list-enter {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* ---------- Switch ----------
   https://tossmini-docs.toss.im/tds-mobile/components/switch/ */
.tds-switch {
  position: relative;
  width: 48px;
  height: 28px;
  padding: 0;
  border: 0;
  border-radius: 14px;
  background: var(--surface-mid);
  transition: background-color 160ms ease;
  cursor: pointer;
}

.tds-switch.is-checked {
  background: var(--primary-100);
}

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

.tds-switch__knob {
  position: absolute;
  top: 2px;
  left: 2px;
  width: 24px;
  height: 24px;
  border-radius: 50%;
  background: var(--surface);
  box-shadow: var(--shadow);
  transition: transform 180ms cubic-bezier(0.22, 1, 0.36, 1);
}

.tds-switch.is-checked .tds-switch__knob {
  transform: translateX(20px);
}

.tds-switch--touch .tds-switch__knob::after {
  content: "";
  position: absolute;
  inset: -8px;
  border-radius: 50%;
  background: currentColor;
  opacity: 0.12;
  animation: tds-switch-touch 320ms ease-out;
}

@keyframes tds-switch-touch {
  from {
    transform: scale(0.4);
    opacity: 0.25;
  }
  to {
    transform: scale(1);
    opacity: 0;
  }
}

/* ---------- Tab ----------
   https://tossmini-docs.toss.im/tds-mobile/components/tab/
   index.html의 "프로젝트 체험" 섹션 탭 선택 UI가 이 컴포넌트로 실제 연결되어 있다. */
.tds-tab {
  display: flex;
  gap: 24px;
  border-bottom: 1px solid var(--line);
}

.tds-tab--fluid {
  overflow-x: auto;
  scrollbar-width: none;
}

.tds-tab--fluid::-webkit-scrollbar {
  display: none;
}

.tds-tab--fluid .tds-tab__item {
  flex-shrink: 0;
}

.tds-tab__item {
  position: relative;
  padding: 0 2px;
  border: 0;
  background: none;
  color: var(--muted);
  font-weight: 700;
  white-space: nowrap;
}

.tds-tab--large .tds-tab__item {
  min-height: 52px;
  font-size: var(--font-17);
}

.tds-tab--small .tds-tab__item {
  min-height: 40px;
  font-size: var(--font-14);
}

.tds-tab__item::after {
  content: "";
  position: absolute;
  left: 0;
  right: 0;
  bottom: -1px;
  height: 2px;
  background: transparent;
  transition: background-color 160ms ease;
}

.tds-tab__item.is-selected {
  color: var(--text);
}

.tds-tab__item.is-selected::after {
  background: var(--text);
}

.tds-tab__item--red-bean::before {
  content: "";
  position: absolute;
  top: 2px;
  right: -8px;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--secondary);
}

/* ---------- Table Row ----------
   https://tossmini-docs.toss.im/tds-mobile/components/table-row/
   index.html의 "프로젝트 체험" 섹션 문제/역할/결과 목록이 이 컴포넌트로 실제 연결되어 있다. */
.tds-table-row {
  display: flex;
  gap: 12px;
  padding: 10px 0;
  border-top: 1px solid var(--line);
}

.tds-table-row:first-child {
  padding-top: 0;
  border-top: 0;
}

.tds-table-row--space-between {
  justify-content: space-between;
}

.tds-table-row--left {
  justify-content: flex-start;
}

.tds-table-row__left {
  flex-shrink: 0;
  color: var(--text);
  font-weight: 800;
}

.tds-table-row__right {
  min-width: 0;
  color: var(--muted);
  font-size: var(--font-15);
  line-height: 1.55;
}

@media (prefers-reduced-motion: reduce) {
  .tds-stepper-list__row--enter {
    animation: none;
  }

  .tds-switch--touch .tds-switch__knob::after {
    animation: none;
  }

  .tds-switch__knob {
    transition-duration: 0.01ms;
  }

  .tds-tab__item::after {
    transition-duration: 0.01ms;
  }
}

/* ---------- Text Field ----------
   https://tossmini-docs.toss.im/tds-mobile/components/TextField/text-field/ */
.tds-text-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tds-text-field__label {
  color: var(--text);
  font-size: var(--font-15);
  font-weight: 800;
}

.tds-text-field__control {
  display: flex;
  align-items: center;
  gap: 8px;
  min-height: 52px;
  padding: 0 16px;
  border-radius: 12px;
  background: var(--surface-soft);
  transition: background-color 120ms ease;
}

/* 사이트 전반의 버튼과 동일하게 라인 없이, 포커스일 때 배경만 메인 컬러 톤으로 채운다 */
.tds-text-field__control:focus-within {
  background: var(--primary-10);
}

.tds-text-field.has-error .tds-text-field__control {
  background: color-mix(in oklch, var(--chip-red) 14%, var(--surface-soft));
}

.tds-text-field.is-disabled .tds-text-field__control {
  opacity: 0.5;
}

.tds-text-field__input {
  flex: 1;
  min-width: 0;
  border: 0;
  background: transparent;
  color: var(--text);
  font: inherit;
}

.tds-text-field__input:focus {
  outline: none;
}

.tds-text-field__input:disabled {
  cursor: not-allowed;
}

.tds-text-field__prefix,
.tds-text-field__suffix {
  flex-shrink: 0;
  color: var(--muted);
  font-size: var(--font-15);
}

.tds-text-field__clear {
  display: grid;
  flex-shrink: 0;
  place-items: center;
  width: 20px;
  height: 20px;
  padding: 0;
  border: 0;
  border-radius: 50%;
  background: var(--grey-400);
  color: var(--surface);
  font-size: 11px;
  line-height: 1;
  cursor: pointer;
}

.tds-text-field__right {
  display: inline-flex;
  flex-shrink: 0;
}

.tds-text-field__help {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-13);
  line-height: 1.4;
}

.tds-text-field__help:empty {
  display: none;
}

.tds-text-field.has-error .tds-text-field__help {
  color: var(--chip-red);
}

/* labelOption="appear": 값이 채워지기 전까지는 라벨을 placeholder처럼 숨겨둔다 */
.tds-text-field--label-appear .tds-text-field__label {
  display: none;
}

.tds-text-field--label-appear.has-value .tds-text-field__label {
  display: block;
}

/* ---------- Text Area ----------
   https://tossmini-docs.toss.im/tds-mobile/components/TextField/text-area/
   TextField를 확장한 컴포넌트라 label/help/error/disabled 스타일은 그대로 가져오고
   control/input만 여러 줄 입력에 맞게 다시 짰다(prefix/suffix/right는 스펙상 없음). */
.tds-text-area {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.tds-text-area__label {
  color: var(--text);
  font-size: var(--font-15);
  font-weight: 800;
}

.tds-text-area__control {
  border-radius: 12px;
  background: var(--surface-soft);
  transition: background-color 120ms ease;
}

/* TextField와 동일하게 라인 없이, 포커스일 때 배경만 메인 컬러 톤으로 채운다 */
.tds-text-area__control:focus-within {
  background: var(--primary-10);
}

.tds-text-area.has-error .tds-text-area__control {
  background: color-mix(in oklch, var(--chip-red) 14%, var(--surface-soft));
}

.tds-text-area.is-disabled .tds-text-area__control {
  opacity: 0.5;
}

.tds-text-area__input {
  display: block;
  box-sizing: border-box;
  width: 100%;
  border: 0;
  padding: 14px;
  background: transparent;
  color: var(--text);
  font: inherit;
  line-height: 1.5;
}

.tds-text-area__input:focus {
  outline: none;
}

.tds-text-area__input:disabled {
  cursor: not-allowed;
}

.tds-text-area__help {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-13);
  line-height: 1.4;
}

.tds-text-area__help:empty {
  display: none;
}

.tds-text-area.has-error .tds-text-area__help {
  color: var(--chip-red);
}

.tds-text-area--label-appear .tds-text-area__label {
  display: none;
}

.tds-text-area--label-appear.has-value .tds-text-area__label {
  display: block;
}

/* ---------- Alert Dialog ----------
   https://tossmini-docs.toss.im/tds-mobile/components/Dialog/alert-dialog/
   Modal과 딤드/등장 애니메이션은 같은 방식이지만, title/description/확인 버튼 하나로
   anatomy가 고정돼 있어 별도 클래스로 분리했다. */
.tds-alert-dialog-root {
  position: fixed;
  inset: 0;
  z-index: 220;
  visibility: hidden;
  pointer-events: none;
}

.tds-alert-dialog-root.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tds-alert-dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 200ms ease;
}

.tds-alert-dialog-root.is-open .tds-alert-dialog-overlay {
  opacity: 1;
}

.tds-alert-dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, calc(100% - 40px));
  padding: 24px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.tds-alert-dialog-content:focus {
  outline: none;
}

.tds-alert-dialog-root.is-open .tds-alert-dialog-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.tds-alert-dialog-title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: var(--font-20);
  font-weight: 800;
}

.tds-alert-dialog-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-15);
  line-height: 1.5;
}

.tds-alert-dialog-actions {
  margin-top: 20px;
}

.tds-alert-dialog-button {
  width: 100%;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  background: var(--primary-100);
  color: var(--surface);
  font-size: var(--font-body);
  font-weight: 700;
  cursor: pointer;
}

/* ---------- Confirm Dialog ----------
   https://tossmini-docs.toss.im/tds-mobile/components/Dialog/confirm-dialog/
   취소/확인 두 버튼을 갖는다는 점만 Alert Dialog와 다르다. 버튼 텍스트가 길어서 한 줄에
   다 안 들어가면 JS가 .is-stacked를 붙여 세로로 쌓는다(문서 스펙: 텍스트 길이에 따라 레이아웃 적응). */
.tds-confirm-dialog-root {
  position: fixed;
  inset: 0;
  z-index: 220;
  visibility: hidden;
  pointer-events: none;
}

.tds-confirm-dialog-root.is-open {
  visibility: visible;
  pointer-events: auto;
}

.tds-confirm-dialog-overlay {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.5);
  opacity: 0;
  transition: opacity 200ms ease;
}

.tds-confirm-dialog-root.is-open .tds-confirm-dialog-overlay {
  opacity: 1;
}

.tds-confirm-dialog-content {
  position: absolute;
  top: 50%;
  left: 50%;
  width: min(340px, calc(100% - 40px));
  padding: 24px;
  background: var(--surface);
  border-radius: 16px;
  box-shadow: var(--shadow);
  transform: translate(-50%, -50%) scale(0.94);
  opacity: 0;
  transition:
    transform 200ms cubic-bezier(0.22, 1, 0.36, 1),
    opacity 200ms ease;
}

.tds-confirm-dialog-content:focus {
  outline: none;
}

.tds-confirm-dialog-root.is-open .tds-confirm-dialog-content {
  transform: translate(-50%, -50%) scale(1);
  opacity: 1;
}

.tds-confirm-dialog-title {
  margin: 0 0 8px;
  color: var(--text);
  font-size: var(--font-20);
  font-weight: 800;
}

.tds-confirm-dialog-description {
  margin: 0;
  color: var(--muted);
  font-size: var(--font-15);
  line-height: 1.5;
}

.tds-confirm-dialog-actions {
  display: flex;
  gap: 8px;
  margin-top: 20px;
}

.tds-confirm-dialog-actions.is-stacked {
  flex-direction: column-reverse;
}

.tds-confirm-dialog-button {
  flex: 1;
  min-height: 50px;
  padding: 0 16px;
  border: 0;
  border-radius: 10px;
  font-size: var(--font-body);
  font-weight: 700;
  cursor: pointer;
}

.tds-confirm-dialog-button--cancel {
  background: var(--surface-soft);
  color: var(--text);
}

.tds-confirm-dialog-button--confirm {
  background: var(--primary-100);
  color: var(--surface);
}

@media (prefers-reduced-motion: reduce) {
  .tds-alert-dialog-content,
  .tds-alert-dialog-overlay,
  .tds-confirm-dialog-content,
  .tds-confirm-dialog-overlay {
    transition-duration: 0.01ms;
  }
}