NDS 컴포넌트 가이드 (프로젝트 로컬 · 부분 추출본)

Accordion

화면별 4종(notice/line/box/gray) — 아래 화살표를 눌러 열림/닫힘 확인 가능(이 페이지 전용 데모 스크립트).

Notice 타입

<div class="accordion-notice">
  <div class="accordion-notice__item">
    <button class="accordion-notice__trigger" aria-expanded="false">
      <span class="accordion-notice__text">
        <span class="accordion-notice__icon"><svg>...notice 아이콘...</svg></span>
        <span class="accordion-notice__title">알아두세요</span>
      </span>
      <span class="accordion-notice__arrow"><svg>...</svg></span>
    </button>
    <div class="accordion-notice__body">안내 문구</div>
  </div>
</div>

Box 타입

<div class="accordion-box">
  <div class="accordion-box__item">
    <button class="accordion-box__trigger" aria-expanded="false">
      <div class="accordion-box__title-col">
        <div class="accordion-box__title-row"><span class="accordion-box__title">제목</span></div>
        <span class="accordion-box__sub">부가 설명</span>
      </div>
      <span class="accordion-box__arrow"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">...</svg></span>
    </button>
    <div class="accordion-box__body">본문</div>
  </div>
</div>

Line / Gray 타입

<div class="accordion-line">
  <div class="accordion-line__item">
    <button class="accordion-line__trigger" aria-expanded="false">
      <span class="accordion-line__title">질문</span>
      <span class="accordion-line__arrow"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2">...</svg></span>
    </button>
    <div class="accordion-line__body">답변</div>
  </div>
</div>

Box 타입 (리스트 포함)

<div class="accordion-box">
  <div class="accordion-box__item">
    <button class="accordion-box__trigger" aria-expanded="false">
      <div class="accordion-box__title-col">
        <span class="accordion-box__badge">라벨</span>
        <div class="accordion-box__title-row"><span class="accordion-box__title">제목</span></div>
      </div>
      <span class="accordion-box__arrow"><svg>...</svg></span>
    </button>
    <div class="accordion-box__list">
      <div class="accordion-box__row"><span class="accordion-box__row-title">항목</span><span class="accordion-box__row-data">값</span></div>
    </div>
  </div>
</div>

Graybox 타입

<div class="accordion-gray">
  <div class="accordion-gray__item">
    <button class="accordion-gray__trigger" aria-expanded="false">
      <span class="accordion-gray__title">제목</span>
      <span class="accordion-gray__arrow"><svg>...</svg></span>
    </button>
    <div class="accordion-gray__list">
      <div class="accordion-gray__row">
        <span class="accordion-gray__row-text">파일명.pdf</span>
        <span class="accordion-gray__row-icons">
          <span class="accordion-gray__row-icon"><svg>...다운로드...</svg></span>
          <span class="accordion-gray__row-chevron"><svg>...>...</svg></span>
        </span>
      </div>
    </div>
  </div>
</div>

Attached File (첨부)

Figma 원본(node-id=86-2123) 기준: 썸네일형은 default/disabled/filled(삭제 배지 포함) 3종, 리스트형은 1줄/2줄 2종입니다.

썸네일형 (default / disabled / filled)

1 / 5

0 / 5

<div class="attached-thumb__item"><span class="attached-thumb__icon"><svg ...>...카메라 아이콘...</svg></span><span class="attached-thumb__count">1 / 5</span></div>
<div class="attached-thumb__item attached-thumb__item--disabled">...동일 구조, disabled는 색만 자동 변경...</div>
<div class="attached-thumb__item attached-thumb__item--filled">
  <img class="attached-thumb__img" src="사진.jpg" alt="">
  <button class="attached-thumb__remove" aria-label="삭제"><svg ...>...</svg></button>
</div>

리스트형 (1줄)

<div class="attached-list">
  <div class="attached-list__divider"></div>
  <div class="attached-list__item">
    <span class="attached-list__name">파일명.pdf</span>
    <button class="attached-list__remove" aria-label="삭제"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">...</svg></button>
  </div>
  <div class="attached-list__divider"></div>
</div>

리스트형 (2줄)

<div class="attached-list">
  <div class="attached-list__divider"></div>
  <div class="attached-list__item">...파일1...</div>
  <div class="attached-list__divider"></div>
  <div class="attached-list__item">...파일2...</div>
  <div class="attached-list__divider"></div>
</div>

Badge

Figma 원본(node-id=87-1063) 대조 완료: New(4px dot)·Count(18px pill, 11px 흰 글자) 크기·패딩은 이미 정확했고, 배지 색상 토큰(--color-comp-badge-red)이 red-500(#EC0C0C)을 참조해 실제로는 Figma가 지정한 red-300(#E24949)보다 진하게 렌더링되던 것을 이번에 수정했습니다.

알림함3

<span class="badge"><button class="btn-icon"><img src="vendor/icons/alarm-notice-24.svg" width="20" height="20" alt="알림"></button><span class="badge__dot"></span></span>
<span class="badge"><button class="btn btn--secondary btn--sm">알림함</button><span class="badge__count">3</span></span>

Bottomsheet (팝업)

실제 열기/닫기 동작은 정적 예시로 보여주기 어려워 template_popup.html 실제 동작 템플릿으로 대신하며, 팝업에서는 h1/.popCont/.popBtnWrap .popBtn 기능 훅을 반드시 유지해야 기존 slidePopConfirm() 높이 계산 로직이 정상 동작합니다. 아래는 Figma 원본(node-id=90-559 등) 기준으로 각 변형의 실제 구조/스타일을 정적으로 보여주는 참고용입니다.

기본형 (Basic) — with-header / none-header

<!-- with-header: 상단에 타이틀+닫기(X) 행이 별도로 있음 -->
<div class="bottomsheet__header">
  <span class="bottomsheet__title">타이틀</span>
  <button class="bottomsheet__close" aria-label="닫기"><svg ...></svg></button>
</div>
<div class="bottomsheet__body"><p>내용</p></div>

<!-- none-header: 닫기 버튼 없이 타이틀이 본문 안에 포함(swipe/backdrop으로만 닫힘) -->
<div class="bottomsheet--no-header">
  <div class="bottomsheet__body">
    <div class="bottomsheet__title">타이틀</div>
    <p>내용</p>
  </div>
</div>

기본형 — with-header-display / none-header-display (하단 "3일동안 열지 않기" 바 포함)

<div class="bottomsheet__display">
  <span class="bottomsheet__display-left">3일동안 열지 않기</span>
  <span class="bottomsheet__display-right">닫기</span>
</div>

리스트형 (List) — single / multi / currency

타이틀

항목1 항목2 항목3 항목4 항목5

타이틀

항목1 항목2 항목3 항목4 항목5

확인

통화를 선택해 주세요

USD(미국 달러) AUD(호주 달러) CNY(중국 위안)

<div class="bottomsheet-list">
  <button class="bottomsheet-list__item"><span>항목1</span></button>
  <button class="bottomsheet-list__item bottomsheet-list__item--selected"><span>항목2</span><svg class="bottomsheet-list__check">...체크...</svg></button>
</div>
<!-- currency 변형은 각 항목 앞에 <img class="bottomsheet-list__flag"> 32x32 원형 국기 아이콘 추가 -->

Finance/bank — 금융기관 선택 (탭 + 아이콘 그리드 메뉴)

실제 Figma는 은행 32곳의 실제 로고를 담고 있습니다. 로고 자산까지 그대로 옮기는 대신, 구조(탭바 + 아이콘+라벨 2열 리스트, 행 간격 28px, 열 간격 8px, 14px 텍스트)를 정확히 재현하고 로고는 샘플 원형 아이콘으로 대체했습니다 — 실제 화면에서는 은행별 실제 로고 이미지로 교체해서 쓰면 됩니다.

<div class="bottomsheet-tabbar">
  <button class="bottomsheet-tabbar__item bottomsheet-tabbar__item--active">은행</button>
  <button class="bottomsheet-tabbar__item">증권사</button>
</div>
<div class="bottomsheet-grid-menu">
  <button class="bottomsheet-grid-menu__item">
    <span class="bottomsheet-grid-menu__icon"><img src="실제로고.png" alt=""></span>
    <span class="bottomsheet-grid-menu__label">NH농협</span>
  </button>
</div>

Finance/stock — 증권사 선택

동일한 탭바(은행/증권사) + 아이콘+라벨 리스트 패턴을 재사용합니다. 실제로는 증권사 30곳, 여기서는 대표 8곳만 샘플로 표기.

Finance/insurance — 보험사 선택 (탭 3개)

보험/기관 변형부터는 탭바가 3개(은행/증권사/현재 카테고리)로 늘어나고 높이가 50px로 고정됩니다 — Figma 원본 그대로 반영. 실제 보험사 20여곳 중 대표 8곳만 샘플.

Finance/organ — 국세/지방세입 (탭 3개, 항목 3개 · 실제 데이터 그대로)

이 변형은 실제 항목이 국세·지방세입·국고금 3개뿐이라 샘플 대체 없이 Figma 원본 텍스트 그대로 반영했습니다.

Account/nh-no-data — 계좌 없음(자사)

Figma 원본 placeholder 텍스트("금융사명"/"계좌번호"/"10,000원" 등)를 그대로 사용했습니다 — 실제 데이터가 아니라 Figma 컴포넌트 자체의 더미 값입니다.

Account/other-no-data — 계좌 없음(타사)

Account/nh — 계좌 목록(자사)

Account/other — 계좌 목록(타사, 정상/조회중/에러 상태)

Account/accordion — 외화 계좌 펼침

탭 2개 라벨이 Figma 원본에 둘 다 "NH농협(외화)"로 되어 있어 그대로 반영했습니다(원본 라벨링 그대로).

Account/multiple — 다중 선택(체크박스 + CTA)

Account/direct — 계좌번호 직접 입력(탭 4개 + 키패드)

키패드(.bottomsheet-keypad)는 재사용 클래스로 분리해 Keypad 컴포넌트에서도 그대로 씁니다.

Option — 거래내역 조회 설정

기본 노출 섹션은 "구분"(section1)이 꺼져 있고 조회기간·정렬·조회유형만 나옵니다. 두 라벨이 모두 "조회기간"인 것은 Figma 원본 그대로입니다.

Share — 공유하기

CS — 상담 방법을 선택해 주세요

Keypad/basic — 숫자 키패드(빈칸/0/삭제)

3열×4행 숫자패드. 1열 4번째 칸은 빈칸, 3열 4번째는 삭제(⌫) 아이콘.

Keypad/point — 소수점 포함

basic과 동일하되 1열 4번째 칸이 빈칸 대신 "." 키.

Keypad/price — 금액 입력용(00 포함)

1열 4번째 칸이 "00" 키로 바뀝니다 — 금액 입력에 특화된 배열.

Keypad/price-button — 금액 입력 + 빠른금액 버튼

Keypad/basic-input — 타이틀 + 입력창 + 키패드

Keypad/point-input — 타이틀 + 입력창 + 소수점 키패드

Keypad/price-input — 타이틀 + 금액표시 + 빠른금액 + 키패드

Picker/wheel/year-month-day — 년·월·일 휠

휠 피커는 5행이 보이고 가운데 행이 선택값(굵게, 초록)입니다. 실제로는 무한 스크롤이지만 정적 가이드에서는 한 스냅샷만 표기.

Picker/wheel/day — 이체주기(매일/매주/매월 + 요일)

Picker/wheel/hour-minute — 시·분

Picker/wheel/period — 기간(년/개월)

Picker/calendar/year-month-day — 날짜(범위 선택)

16일(from, 테두리) ~ 27일(to, 초록 채움) 범위 선택 상태를 그대로 반영. 일=빨강, 토=파랑, 이전/다음달 날짜는 회색 비활성.

Picker/calendar/month-day — 년.월 단일표시 + 날짜(만기 버튼 옵션)

year-month-day와 날짜 그리드는 동일 — 연/월 내비게이션만 "2023. 10"처럼 하나로 합쳐진 형태입니다. "만기" 보조 버튼은 옵션(prop)이라 기본 데모에는 뺐습니다.

Picker/calendar/year-month — 년·월(범위 선택, 큰 원형 셀)

월 셀은 42px 원형 + 20px 폰트로 날짜 셀보다 큽니다. 7월(from)~10월(to) 범위 선택 상태.

Float — 화면 하단 고정 요약 바

팝업이 아니라 화면 하단에 고정되는 요약 바 + CTA 조합입니다. 기본은 데이터 행 1개(list2/list3는 옵션으로 꺼져 있음).

Bottomsheet 전체 36종(Basic 4·List 3·Finance 4·Account 7+Option/Share/CS·Keypad 7·Picker 7+float) 반영을 완료했습니다.

Bullet

목록의 항목을 소개하는데 사용되는 타이포그래피 기호입니다. Body(15px)/Caption(13px)/Notice(14px) 3종 스타일이 있으며, Body·Notice는 하위 항목(2depth, 하이픈 기호)을 가질 수 있습니다.

Body

Caption

Notice

<!-- Body / Caption / Notice: bullet--body, bullet--caption, bullet--notice 중 택1 -->
<ul class="bullet bullet--body">
  <li class="bullet__item">1depth 목록 내용</li>
  <!-- 하위(2depth) 항목: 하이픈 기호 + 12px 들여쓰기 (Body/Notice만 지원) -->
  <li class="bullet__item bullet__item--depth2">2depth 목록 내용</li>
</ul>

Button

콘텐츠 또는 하단 영역에 배치되어 사용자가 기능을 실행하거나 작업을 선택하도록 유도합니다. basic(primary/secondary/tertiary) · cta · text/icon · text/link · icon/icon · floating/floating · plus-minus 7개 컴포넌트로 구성됩니다.

크기 (basic/primary, secondary, tertiary)

사이즈 지원 범위가 variant마다 다릅니다 — primary: LG·MD·RG·SM / secondary: MD·RG·SM·XS(LG 없음) / tertiary: LG·MD·RG·SM·XS(5종 모두 지원).

<button type="button" class="btn btn--primary btn--lg">Large</button>
<button type="button" class="btn btn--primary btn--sm">Small</button>

색상 variant (primary/secondary/tertiary)

<button type="button" class="btn btn--secondary btn--md">Secondary</button>

상태 (default / pressed / disabled)

<!-- pressed는 시각 데모용 클래스, 실제로는 :active 의사클래스가 자동 적용됩니다 -->
<button class="btn btn--primary btn--md is-pressed">Pressed</button>
<button class="btn btn--primary btn--md" disabled>Disabled</button>

전체 너비 / 아이콘 버튼 / 플로팅 / 플러스마이너스

전체 너비 버튼

원금손실
가능상품

plus-minus (tertiary 스타일, default/active 상태 — active는 아이콘만 초록색으로 전환)

<button type="button" class="btn-icon"><img src="vendor/icons/plus-24.svg" width="18" height="18" alt="plus"></button>
<div class="btn-floating">
  <button type="button" class="btn-floating__circle"><span>원금손실<br>가능상품</span></button>
  <button type="button" class="btn-floating__close" aria-label="닫기"><svg ...></svg></button>
</div>
<button type="button" class="btn-plusminus is-active"><svg ...plus...></svg></button>

텍스트+아이콘 (text/icon — arrow_both/arrow_left/arrow_right/more/open/closed)

<!-- arrow_left: 오른쪽 화살표는 opacity/visibility로 숨김(공간은 유지) -->
<button type="button" class="btn-arrow">
  <svg ...왼쪽 화살표...></svg>
  <span>버튼</span>
  <svg class="btn-arrow__icon--hidden" ...오른쪽 화살표...></svg>
</button>

텍스트 링크 (text/link)

<button type="button" class="btn btn--link">버튼</button>

버튼 그룹 (btn-cta) — Full / 5:5 / 3:7 / Double

basic 유형은 LG 사이즈 + 상단 흰색 그라디언트(스크롤 콘텐츠 위에 뜰 때 경계 흐림 처리), popup 유형은 MD 사이즈 + 불투명 흰색 배경입니다. 5:5/3:7 모두 좌측은 tertiary, 우측(또는 유일한 버튼)은 basic에서 primary·popup에서 secondary 스타일입니다.

popup 유형(팝업 하단 CTA, MD 사이즈) — Full은 secondary(outline) 단일 버튼입니다.

<div class="btn-cta btn-cta--basic">
  <div class="btn-cta__item btn-cta__item--fixed"><button class="btn btn--tertiary btn--full btn--lg">버튼</button></div>
  <div class="btn-cta__item"><button class="btn btn--primary btn--full btn--lg">버튼명</button></div>
</div>

Calendar

여러 개의 날짜 항목 중 하나의 옵션을 선택하는 경우 사용합니다. 각 상태는 inactive(선택 전) / filled(선택 완료) / error / readonly / disabled 5종이며, 라벨 아래 안내문구(또는 오류 시 오류 메세지) 영역을 포함합니다. tooltip·하단 텍스트버튼·체크박스·소형 버튼 행은 선택적으로 추가할 수 있는 옵션 요소입니다.

단일 날짜 (calendar-day)

Inactive

라벨

선택

안내 문구 입력

Filled

라벨

2024.01.01

안내 문구 입력

Error

라벨

2024.01.01

오류 메세지 출력

Readonly

라벨

2024.01.01

안내 문구 입력

Disabled

라벨

2024.01.01

안내 문구 입력

<div class="calendar-day"> <!-- 상태: 없음(inactive) / calendar-day--error / --readonly / --disabled -->
  <span class="calendar-day__label">라벨</span>
  <div class="calendar-day__field">
    <span class="calendar-day__text is-filled">2024.01.01</span> <!-- 값 없으면 is-filled 빼고 "선택" -->
    <span class="calendar-day__icon"><img src="vendor/icons/calendar-24.svg"></span>
  </div>
  <span class="calendar-day__message">안내 문구 입력</span> <!-- error 상태는 "오류 메세지 출력" -->
</div>

기간 (calendar-period)

Inactive

라벨

선택 ~ 선택

안내 문구 입력

Filled

라벨

2024.01.01 ~ 2024.01.01

안내 문구 입력

Error

라벨

2024.01.01 ~ 2024.01.01

오류 메세지 출력

Readonly

라벨

2024.01.01 ~ 2024.01.01

안내 문구 입력

Disabled

라벨

2024.01.01 ~ 2024.01.01

안내 문구 입력

<div class="calendar-period"> <!-- 상태: 없음(inactive) / calendar-period--error / --readonly / --disabled -->
  <span class="calendar-period__label">라벨</span>
  <div class="calendar-period__field">
    <span class="calendar-period__text is-filled">2024.01.01</span><span class="calendar-period__icon"><img src="vendor/icons/calendar-24.svg"></span>
    <span class="calendar-period__sep">~</span>
    <span class="calendar-period__text is-filled">2024.01.01</span><span class="calendar-period__icon"><img src="vendor/icons/calendar-24.svg"></span>
  </div>
  <span class="calendar-period__message">안내 문구 입력</span>
</div>

Card

다양한 정보 및 작업 내용과 동작을 모듈화된 블록 형태로 표시합니다. Figma에 정의된 15종 variant(list/list-link/date1/date2/info/divide-single/divide-single-title/divide-multi/grip/detail/input/rate/add-accordion/sum/accordion)를 순서대로 반영합니다.

list (기본형)

상단 라벨/로고/화살표아이콘/체크/라디오, 하단 캡션·오류메세지 배너 등은 옵션(기본 off, 위 데모는 label+title+subtitle+list+button+close만 기본 on)입니다.

<div class="card card--gap-24">
  <div class="card__label-row"><span class="label label--sm label--line label--gray">라벨</span></div>
  <span class="card__title">상품명</span>
  <span class="card__subtitle">부가설명</span>
  <div class="card__list-rows">
    <div class="card__list-row"><span class="card__list-row__title">타이틀</span><span class="card__list-row__data">데이터</span></div>
  </div>
  <div class="card__button-row"><button class="btn btn--tertiary btn--sm" style="flex:1;">버튼</button></div>
  <button class="card__close" aria-label="닫기"><svg ...></svg></button>
</div>

list-link

<div class="card card--link">
  <div class="card__list-link-body">
    <div class="card__list-row"><span class="card__list-row__title">타이틀</span><span class="card__list-row__data">데이터</span></div>
  </div>
  <span class="card__arrow card__arrow--top-right"><svg ...></svg></span>
</div>

date1

하단 전체너비 버튼(tertiary)은 옵션(기본 off)입니다.

date2

<div class="card">
  <div class="card__date2-row">
    <span class="card__date2-row__day">2025.01.01<span class="card__date2-row__sep"></span><span class="card__date2-row__category">타이틀</span></span>
    <span class="card__date2-row__text">텍스트</span>
    <span class="card__arrow"><svg ...></svg></span>
  </div>
  <div class="card__divider"></div>
  <div class="card__list-rows">...</div>
</div>

info

<div class="card card--gap-24">
  <div class="card__info-row">
    <div class="card__info-row__title">
      <span class="card__title card__title--semibold">상품명</span>
      <span class="card__date">2025.01.01</span>
      <span class="card__subtitle">부가설명1</span>
    </div>
    <div class="card__info-row__data">
      <span class="card__info-row__value">데이터</span>
      <span class="card__subtitle">데이터 설명</span>
    </div>
  </div>
  <div class="card__button-row"><button class="btn btn--tertiary btn--sm" style="flex:1;">버튼</button></div>
</div>

divide-single

날짜(우상단)·3/4번째 목록행 추가는 옵션(기본 off)입니다.

divide-single-title (목록 그룹별 소제목 포함)

divide-multi (구분선 없이 그룹 반복, 기본 3그룹)

<div class="card card--gap-32">
  <div style="display:flex; flex-direction:column; gap:20px; width:100%;">
    <span class="card__title">상품명</span>
    <div class="card__list-row"><span class="card__list-row__title">타이틀</span><span class="card__list-row__data">데이터</span></div>
  </div>
  <!-- 그룹 반복(기본 3개, 최대 5개), 그룹 사이 구분선 없음 -->
</div>

grip (드래그 정렬용)

<div class="card card--radius-sm" style="gap:5px;">
  <div class="card__grip">
    <span class="card__grip__name">타이틀</span>
    <div class="card__grip__actions">
      <button class="btn btn--tertiary btn--xs">버튼</button>
      <span class="card__grip__icon"><svg ...></svg></span>
    </div>
  </div>
  <p class="card__subtitle">계좌번호</p>
</div>

detail

아이콘은 등급 뱃지(실버/골드 등) 실제 이미지 자산 대신 대표 색상 원형으로 단순화했습니다.

input (금액 입력 포함)

<div class="card__input-row">
  <span class="card__input-row__label">타이틀</span>
  <div class="card__input-row__field input-line__field">
    <span class="input-line__input" style="text-align:right; color:#929292;">신청금액 입력</span>
    <span class="input-line__unit">원</span>
  </div>
</div>

rate (금리/혜택)

상단 화살표/체크/라디오(택1)는 옵션(기본 off)입니다.

sum (요약 + load-data)

add-accordion (내부 다운로드 링크 아코디언 포함)

<div class="card__accordion-box">
  <button class="card__accordion-box__head">
    <span class="card__accordion-box__title">타이틀</span>
    <span class="card__accordion-box__arrow"><svg ...></svg></span>
  </button>
  <div class="card__accordion-box__body">
    <button class="card__accordion-box__link">
      <span class="card__accordion-box__link-text">내용을 입력해 주세요.</span>
      <span class="card__accordion-box__link-icons"><svg ...다운로드...></svg><svg ...화살표...></svg></span>
    </button>
  </div>
</div>

accordion (닫힘/열림)

우상단 라벨(초록, 화살표 아이콘 옵션)·좌상단 라벨·부가설명은 옵션(기본 on)입니다.

data/highlight (하이라이트 데이터)

우측 비교 체크박스·하단 아코디언 박스는 옵션(기본 on)입니다.

data/4column

라벨·부가텍스트·안내텍스트는 옵션(기본 on)입니다.

etc/input (입력 폼 카드)

타이틀(상단)·아이콘(닫기)은 옵션(기본 off/on), 나머지 필드·라디오·버튼은 옵션(기본 on)입니다.

etc/image

account/list (연결계좌 리스트)

카테고리명·라벨·체크박스·닫기 아이콘은 옵션(기본 off), 관리점(⋮) 아이콘은 옵션(기본 on)입니다.

account/list-mall (카테고리 상품 리스트)

라벨·버튼·가이드문구는 옵션(기본 on)입니다.

account/price (연결계좌 잔액)

카테고리명·라벨·체크박스·닫기 아이콘은 옵션(기본 off), 관리점(⋮) 아이콘·새로고침 아이콘은 옵션(기본 on)입니다.

account/price-mall (카테고리 잔액)

새로고침 아이콘·버튼·메세지는 옵션(기본 on)입니다.

account/accordion (닫힘/열림)

라벨·계좌번호·체크박스·잔액(금액)은 옵션(기본 off/on), 펼치기 상태에 따라 리스트 2줄↔6줄로 전환됩니다.

summary/basic (요약 카드, 그레이 배경)

라벨·타이틀·부가설명·리스트·하단 메세지(옵션, 기본 off)는 옵션(기본 on)입니다.

summary/accordion (닫힘/열림)

공유하기 아이콘 3종은 옵션(기본 off), 펼치기 상태에 따라 리스트가 3줄(1그룹)↔6개 그룹으로 전환됩니다.

summary/accordion-multi (닫힘/열림)

타이틀(각 그룹)·리스트(2~6번째 그룹)·캡션·펼치기 버튼은 옵션(기본 on)입니다.

summary/price/single (예상 납입료 1건)

타이틀·데이터 부가설명은 옵션(기본 on)입니다.

summary/price/double (예상 납입료 2건)

타이틀·데이터 부가설명은 옵션(기본 on)입니다.

summary/price/divide (예상 납입료 그룹별 구분)

2번째·3번째 그룹은 옵션(기본 on)입니다.

summary/highlight (하이라이트 리스트)

summary/2column (2단 데이터)

Check (Checkbox)

사용자가 여러 옵션 중 하나 이상을 선택하거나 내용을 확인하는 경우 사용합니다.

basic (sm) — default / selected / select-disabled / disabled

basic (xs) — default / selected / select-disabled / disabled

<label class="check-basic"><input type="checkbox" class="check-basic__input"><span class="check-basic__icon"></span><span class="check-basic__label">체크</span></label>
<label class="check-basic check-basic--xs">...</label>  <!-- xs 사이즈 -->

survey/icon — default / selected / error

선택(selected)·오류(error) 상태에서만 하단 메세지(정답/오답 문구 + 안내문구)가 표시됩니다. 메세지의 정답/안내 문구는 각각 옵션(기본 on)입니다.

box/center-sm

레이블·상단 버튼(텍스트+아이콘)·하단 안내문구는 옵션(레이블 기본 on, 버튼/안내문구 기본 off)입니다.

box/center-lg

레이블·상단 버튼·하단 안내문구는 옵션(레이블 기본 on, 나머지 기본 off)입니다.

Chip

사용자가 원하는 콘텐츠를 선택, 필터링 또는 조작할 수 있도록 제공합니다.

basic

<span class="chip-basic"><span class="chip-basic__text">필터명</span><button class="chip-basic__close" aria-label="삭제"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">...</svg></button></span>

single — default / active

<button type="button" class="chip-single" aria-pressed="false">전체</button>
<button type="button" class="chip-single chip-single--active" aria-pressed="true">이번 달</button>

accordion (닫힘/열림)

<div class="chip-accordion">              <!-- 열렸을 때는 .is-open 추가 -->
  <div class="chip-accordion__chips">
    <button type="button" class="chip-single chip-single--active" aria-pressed="true">메뉴</button>
    <button type="button" class="chip-single" aria-pressed="false">메뉴</button>
    ...
  </div>
  <button class="chip-accordion__toggle"><svg>...화살표...</svg></button>
</div>

Controls

입력값을 조절하는 요소입니다. 숫자를 입력하거나 특정 수치를 단계별로 증가 또는 감소시킬 때 사용합니다.

stepper

<div class="controls-stepper">
  <button class="controls-stepper__btn" disabled><svg>...minus...</svg></button>
  <input class="controls-stepper__input" value="0">
  <button class="controls-stepper__btn"><svg>...plus...</svg></button>
</div>

controller — previous / next (default / disabled)

<button class="controls-controller" aria-label="이전"><svg>...</svg></button>
<button class="controls-controller" aria-label="다음"><svg>...</svg></button>
<button class="controls-controller" disabled>...</button>

Divider

불러올 데이터가 없을 때 표시되는 항목입니다.

content-8px

page-1px

list1-1px

list2-1px

dash-1px

<hr class="divider divider--content"> <!-- 콘텐츠 블록 구분, 8px, #f6f6f6 -->
<hr class="divider divider--page">    <!-- 페이지 구분, 1px, #f6f6f6 -->
<hr class="divider divider--list1">   <!-- 리스트 구분, 1px, #e1e1e1 -->
<hr class="divider divider--list2">   <!-- 리스트 구분(옅음), 1px, #f0f0f0 -->
<hr class="divider divider--dash">    <!-- 점선 구분, 1px dashed, #f6f6f6 -->

Empty (빈 상태)

불러올 데이터가 없을 때 표시되는 항목입니다.

result

result (타이틀 + 버튼 포함)

아이콘(기본 on)·상단 타이틀(기본 off)·하단 텍스트버튼(기본 off)은 옵션입니다.

<div class="empty empty--result">
  <span class="empty__icon"><svg viewBox="0 0 40 40">...말풍선+점3개...</svg></span>
  <p class="empty__text">조회 결과가 없습니다.</p>
</div>

Filter (필터)

사용자가 여러 조건을 설정하여 검색 결과를 보여줍니다.

left — 텍스트+아이콘 / 툴팁+스위치

right — 날짜+정렬 텍스트 / 아이콘

left/right 모두 상단 8px 콘텐츠 구분선, 하단 1px 페이지 구분선을 옵션으로 붙일 수 있습니다(divider--content-8px / divider--page-1px).

<div class="filter-left">
  <div class="filter-left__text"><span class="filter-left__label">최신순ㆍ3개월</span><span class="filter-left__icon">...</span></div>
  <div class="filter-left__tooltip"><span class="filter-left__tooltip-text">추천 상품<span class="filter-left__tooltip-icon">...</span></span><label class="switch switch--xs">...</label></div>
</div>

<div class="filter-right">
  <div class="filter-right__text"><span class="filter-right__date">2024.01.01~2024.03.01</span><span class="filter-right__sort">최신순</span></div>
  <span class="filter-right__icon">...</span>
</div>

Indicator

콘텐츠 진행상태를 시각적으로 표시하여 현재 위치를 명확히 나타냅니다.

Number

숫자 인디케이터는 이미지·콘텐츠 위에 겹쳐 쓰는 것을 전제로 반투명 검정 pill + 흰색 텍스트로 고정되어 있습니다(라이트/다크 모드와 무관). 아래는 Figma 참고 화면과 동일한 옅은 회색 배경 위에 표시한 것입니다.

<div class="indicator-number">
  <div class="indicator-number__paging">
    <button class="indicator-number__arrow"><svg>...chevron-left...</svg></button>
    <span class="indicator-number__count">
      <span class="indicator-number__current">1</span>
      <span class="indicator-number__dash"></span>
      <span class="indicator-number__total">3</span>
    </span>
    <button class="indicator-number__arrow"><svg>...chevron-right...</svg></button>
  </div>
  <button class="indicator-number__control"><svg>...stop(II)면 두 막대, play(▶)면 삼각형...</svg></button>
</div>

Dot

dot 개수는 콘텐츠 슬라이드 수에 맞게 늘리거나 줄일 수 있습니다(첫 번째 dot이 활성 상태 · indicator-dot__item--active).

<div class="indicator-dot">
  <span class="indicator-dot__item indicator-dot__item--active"></span>
  <span class="indicator-dot__item"></span>
  ...
  <button class="indicator-dot__control"><svg>...stop(막대2개)면, play(삼각형)...</svg></button>
</div>

Infobox

부가적인 정보나 사용에 대한 주의사항 등을 전달하는 경우 사용합니다.

basic — 타이틀 + 본문

basic — 타이틀 + 본문 + 버튼

타이틀·본문·버튼 모두 옵션입니다(버튼은 기본 off).

<div class="infobox">
  <p class="infobox__title">타이틀</p>
  <p class="infobox__body">내용을 입력해 주세요.</p>
  <button class="infobox__button">버튼<svg>...화살표...</svg></button>
</div>

Input

사용자가 텍스트·숫자·기호 등 데이터를 입력/수정하는 구성 요소입니다. Box(테두리 전체) / Line(하단 테두리만) 두 타입이 있으며, 라벨·안내문구·체크박스·버튼은 옵션입니다.

상태 (Inactive / Focus / Error / Success / Readonly / Disabled)

<div class="input-box input-box--focus">  <!-- --error / --success / --readonly / --disabled -->
  <span class="input-box__label">레이블</span>
  <div class="input-box__field"><input class="input-box__input"></div>
  <span class="input-box__message">안내 문구 입력</span>
</div>

box/basic — 텍스트 + 삭제 아이콘

<div class="input-box">
  <span class="input-box__label">라벨</span>
  <div class="input-box__field">
    <input class="input-box__input">
    <button class="input-box__clear" aria-label="삭제"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">...</svg></button>
  </div>
</div>

box/price · unit1 · unit2 · unit3 · dollar — 금액/단위

<!-- price/unit1/dollar: 필드 안에 unit·prefix-text와 input--right 조합 -->
<div class="input-box__field">
  <span class="input-box__prefix-text">USD</span>
  <input class="input-box__input input-box__input--right" placeholder="금액 입력">
</div>
<!-- unit2: input-box__row 로 필드 2개 나란히 -->
<div class="input-box__row">
  <div class="input-box__field"><input class="input-box__input input-box__input--right"><span class="input-box__unit">동</span></div>
  <div class="input-box__field"><input class="input-box__input input-box__input--right"><span class="input-box__unit">호</span></div>
</div>

box/point1 · point2 · currency · email · inner · address · password

<!-- email: ghost(직접입력) + unit(＠) + ghost--fixed(도메인) + icon -->
<div class="input-box__field">
  <span class="input-box__ghost">직접입력</span>
  <span class="input-box__unit">＠</span>
  <span class="input-box__ghost input-box__ghost--fixed">이메일선택</span>
  <span class="input-box__icon"><svg>...</svg></span>
</div>
<!-- inner: 필드 안 비활성 버튼 -->
<button class="input-box__btn input-box__btn--disabled" disabled>버튼</button>

box/rrn1 · rrn2 · combination1 · combination2 · code · 12serial · 14serial

<!-- rrn1/rrn2/address/serial 계열: 필드 안 dash 구분은 input-box__unit(필드 색) 사용 -->
<div class="input-box__field">
  <input class="input-box__input" placeholder="앞 6자리" maxlength="6">
  <span class="input-box__unit">-</span>
  <input class="input-box__input" type="password" placeholder="뒤 7자리" maxlength="7">
</div>

box/16serial · 19serial — 카드/계좌 일련번호

line/basic · price · unit · rrn · combination · password — Line 타입

<div class="input-line">
  <span class="input-line__label">레이블</span>
  <div class="input-line__field">
    <input class="input-line__input" placeholder="플레이스홀더">
    <button class="input-line__btn input-line__btn--disabled" disabled>버튼</button>
  </div>
  <span class="input-line__message">안내 문구 입력</span>
</div>

Label

특정 항목의 상태, 속성 또는 카테고리를 구분하거나 정보를 설명하거나 식별하기 위한 요소입니다.

Line/Grade-Sm — 등급 표시 (grade1~6)

<span class="label label--sm label--line label--grade1">라벨</span>  <!-- grade1~6 -->

Text-Label — 캡션 텍스트 (툴팁/번호 옵션)

<span class="label-text">레이블</span>
<span class="label-text">레이블<span class="label-text__tooltip"><svg>...</svg></span></span>
<span class="label-text"><span class="label-text__number">1</span>레이블</span>

Line/Color-Sm — 9색상

Fill/Color-Sm — 5색상

<span class="label label--sm label--line label--gray">라벨</span>   <!-- 외곽선 -->
<span class="label label--sm label--fill label--green">라벨</span>  <!-- 채우기(gray 배경만 어두운 텍스트, 나머지는 흰 텍스트) -->

Line/Color-Lg — 9색상

Fill/Color-Lg — 5색상

<span class="label label--lg label--line label--navy">라벨</span>
<span class="label label--lg label--fill label--red">라벨</span>

Etc/Icon-Sm — 아이콘 + 텍스트 + 화살표

화살표는 옵션(기본 on)입니다.

<span class="label-icon">
  <span class="label-icon__content"><span class="label-icon__icon"><svg>...</svg></span><span class="label-icon__text">라벨</span></span>
  <span class="label-icon__arrow"><svg>...</svg></span>
</span>

Link

카드 컴포넌트 내에 존재하거나 주요 정보를 보조하는 역할을 수행하는 경우 적용합니다.

Vertical — 아이콘 + 타이틀 (세로형)

<div class="link-vertical">
  <span class="link-vertical__icon"><svg>...</svg></span>
  <span class="link-vertical__title">타이틀</span>
</div>

Horizontal — 아이콘(옵션) + 타이틀 + 화살표(옵션)

<div class="link-horizontal">
  <span class="link-horizontal__title">
    <span class="link-horizontal__icon"><svg>...</svg></span>  <!-- 옵션 -->
    <span class="link-horizontal__text">타이틀</span>
  </span>
  <span class="link-horizontal__arrow"><svg>...</svg></span>  <!-- 옵션 -->
</div>

Mix — 아이콘 + 타이틀 + 부가설명

<div class="link-mix">
  <span class="link-mix__icon"><svg>...</svg></span>
  <span class="link-mix__text">
    <span class="link-mix__title">타이틀</span>
    <span class="link-mix__sub">부가설명</span>
  </span>
</div>

None — 테두리 없이 타이틀 + 화살표

<div class="link-none">
  <span class="link-none__title">타이틀</span>
  <span class="link-none__arrow"><svg>...</svg></span>
</div>

Category — 원형 아이콘 + 카테고리(위/아래 옵션) + 타이틀

카테고리 타이틀

카테고리 텍스트는 타이틀 위/아래 각각 옵션(기본 위쪽만 on)입니다.

<div class="link-category">
  <span class="link-category__body">
    <span class="link-category__icon"><img src="..." alt=""></span>
    <span class="link-category__text">
      <span class="link-category__label">카테고리</span>
      <span class="link-category__title">타이틀</span>
    </span>
  </span>
  <span class="link-category__arrow"><svg>...</svg></span>
</div>

Category2 — 아이콘 + 타이틀+화살표 + 서브텍스트

<div class="link-category2">
  <span class="link-category2__icon"><svg>...</svg></span>
  <span class="link-category2__text">
    <span class="link-category2__title-row"><span class="link-category2__title">타이틀</span><span class="link-category2__arrow"><svg>...</svg></span></span>
    <span class="link-category2__sub"><span class="link-category2__sub-text">카테고리</span><span class="link-category2__sub-spacer"></span></span>
  </span>
</div>

Divide — 구분선으로 나뉜 링크 목록 (2~4개)

기본 2개(link2Th)이며, 최대 4개(link3Th/link4th 추가)까지 늘릴 수 있습니다. 사이 구분선은 divider divider--page 재사용.

<div class="link-divide">
  <div class="link-divide__item">
    <span class="link-divide__text"><span class="link-divide__title">타이틀</span><span class="link-divide__sub">부가설명</span></span>
    <span class="link-divide__arrow"><svg>...</svg></span>
  </div>
  <hr class="divider divider--page">
  <div class="link-divide__item">...</div>
</div>

Price — 이체 내역형 (이름/일시 + 금액/잔액)

아이콘·부가설명·잔액·버튼은 모두 옵션입니다(위 데모는 버튼 on 예시).

<div class="link-price">
  <div class="link-price__row">
    <span class="link-price__name"><span class="link-price__name-text"><span class="link-price__date">2026.07.23</span><span class="link-price__person">김농협</span></span></span>
    <span class="link-price__amount"><span class="link-price__label">출금</span><span class="link-price__value">5,000,000원</span></span>
  </div>
  <button class="link-price__btn">다시보내기</button>  <!-- 옵션 -->
</div>

Product — 상품명 + 라벨 + 금리

라벨(label--sm label--line label--gray)·금리 행은 옵션입니다.

<div class="link-product">
  <span class="link-product__text">
    <span class="link-product__title-row"><span class="link-product__title">상품명</span><span class="label label--sm label--line label--gray">라벨</span></span>
    <span class="link-product__sub">부가설명</span>
  </span>
  <span class="link-product__rate"><span class="link-product__rate--primary">최고 0%</span><span class="link-product__rate--secondary">최고 0%</span></span>
</div>

List — 라벨 + 값(우측 정렬) + 화살표

<div class="link-list">
  <span class="link-list__text"><span class="link-list__label">텍스트</span><span class="link-list__value">텍스트</span></span>
  <span class="link-list__arrow"><svg>...</svg></span>
</div>

List

그룹화된 항목이나 계층 구조를 수직 방향으로 정렬하여 사용자에게 정보를 간결하고 직관적으로 제공합니다.

Key-Value — 기본 단위 (타이틀 + 데이터)

<div class="list-kv">
  <span class="list-kv__title">라벨</span>
  <span class="list-kv__data">값</span>
</div>

Card / Lg — 카드 안, 22px 강조 데이터

<div class="list-card list-card--lg">
  <div class="list-card__rows">
    <div class="list-kv"><span class="list-kv__title">타이틀</span><span class="list-kv__data">데이터</span></div>
  </div>
</div>

Card / Sm — 헤더(옵션) + 하위 xs 행(옵션)

상단 헤더(list-card__title)와 하위 xs 보조행(list-kv--xs)은 각각 옵션입니다.

<div class="list-card list-card--sm">
  <span class="list-card__title">타이틀</span>  <!-- 옵션 -->
  <div class="list-card__rows">
    <div class="list-kv"><span class="list-kv__title">타이틀</span><span class="list-kv__data">데이터</span></div>
    <div class="list-kv list-kv--xs"><span class="list-kv__title">타이틀</span><span class="list-kv__data">데이터</span></div>  <!-- 옵션 -->
  </div>
</div>

Card / Xs — 카드 하위 보조 정보 (계층 아이콘 옵션)

계층 표시가 필요하면 타이틀 앞에 커넥터 라인(depth1) 또는 불릿(depth2) 아이콘을 옵션으로 추가할 수 있습니다.

<div class="list-card list-card--xs">
  <div class="list-card__rows">
    <div class="list-kv"><span class="list-kv__title">타이틀</span><span class="list-kv__data">데이터</span></div>
  </div>
</div>

Page / Lg — 화면 전체 폭, 22px 강조 데이터

<div class="list-page list-page--lg">
  <div class="list-page__rows">
    <div class="list-kv"><span class="list-kv__title">타이틀</span><span class="list-kv__data">데이터</span></div>
  </div>
</div>

Page / Sm — 상/하단 구분선 + 헤더(옵션) + 툴팁(옵션)

<div class="list-page list-page--sm">
  <div class="list-page__divider"></div>  <!-- 옵션 -->
  <span class="list-page__title">타이틀</span>  <!-- 옵션 -->
  <div class="list-page__rows">
    <div class="list-kv"><span class="list-kv__title">타이틀<span class="list-kv__tooltip"><svg>...</svg></span></span><span class="list-kv__data">데이터</span></div>
  </div>
  <div class="list-page__divider"></div>  <!-- 옵션 -->
</div>

Page / Xs — 보조 정보용, 축소된 텍스트 (계층 아이콘 옵션)

<div class="list-page list-page--xs">
  <div class="list-page__divider"></div>
  <div class="list-page__rows">
    <div class="list-kv"><span class="list-kv__title">타이틀</span><span class="list-kv__data">데이터</span></div>
  </div>
  <div class="list-page__divider"></div>
</div>

Page / Sm-Multi — 여러 행(2~3개) + 행 사이 구분선

list-page 하나에 list-page__rows + list-page__divider를 반복해서 최대 3개 행까지 구성합니다(기존 클래스 조합, 별도 클래스 없음).

<div class="list-page list-page--sm">
  <div class="list-page__divider"></div>
  <span class="list-page__title">타이틀</span>
  <div class="list-page__rows"><div class="list-kv">...</div></div>
  <div class="list-page__divider"></div>
  <div class="list-page__rows"><div class="list-kv">...</div></div>
  <div class="list-page__divider"></div>
</div>

Account — 금융사 로고 + 이름/계좌번호 + 즐겨찾기

금융사명 계좌번호 출금가능금액 10,000원

즐겨찾기 아이콘·출금가능금액·버튼(밑줄 텍스트)은 각각 옵션입니다.

<div class="list-account">
  <span class="list-account__logo"><img src="..." alt=""></span>
  <span class="list-account__text">
    <span class="list-account__name">금융사명</span>
    <span class="list-account__number">계좌번호</span>
    <span class="list-account__price">출금가능금액 <strong>10,000원</strong></span>  <!-- 옵션 -->
  </span>
  <button class="list-account__fav" aria-label="즐겨찾기"><svg>...</svg></button>  <!-- 옵션 -->
</div>

Continue — 이어하기 상품 + 닫기

이어하기 버튼은 옵션(기본 on)이며, 닫기 버튼은 항상 노출됩니다.

<div class="list-continue">
  <span class="list-continue__text">상품명</span>
  <span class="list-continue__actions">
    <button class="list-continue__btn">이어하기</button>  <!-- 옵션 -->
    <button class="list-continue__close" aria-label="닫기"><svg>...</svg></button>
  </span>
</div>

Page / Sm-Accordion — 펼치기/접기

펼침 상태에서는 하위 list-page 행(최대 2개)이 구분선과 함께 노출되고, 토글 라벨/아이콘 방향이 바뀝니다(.is-open).

<div class="list-accordion">
  <div class="list-accordion__divider"></div>
  <div class="list-accordion__row"><span class="list-accordion__title">타이틀</span><span class="list-accordion__data">0원</span></div>
  <button class="list-accordion__toggle">펼치기<svg>...</svg></button>
  <div class="list-accordion__divider"></div>
</div>

Load data

적용된 입력 필드는 읽기 전용 상태로, 값은 표시되지만 편집할 수 없는 경우 구현합니다. 정보는 노출용으로 사용됩니다.

Basic

라벨 위 우측 텍스트버튼, 데이터 아래 텍스트+버튼 줄, 하단 텍스트버튼(화살표)은 모두 옵션입니다.

<div class="load-data">
  <div class="load-data__label"><span class="label-text">레이블</span></div>  <!-- 옵션 -->
  <div class="load-data__box">
    <div class="load-data__row"><span class="load-data__title">Label</span><span class="load-data__data">Data</span></div>
  </div>
  <p class="load-data__message">안내 문구 입력</p>  <!-- 옵션 -->
</div>

Basic — 라벨버튼 + 텍스트+버튼 + 하단버튼 (전체 옵션 on)

<div class="load-data">
  <div class="load-data__label">
    <span class="label-text">레이블<span class="label-text__tooltip"><svg>...</svg></span></span>
    <button class="load-data__label-btn">버튼<svg>...</svg></button>
  </div>
  <div class="load-data__box"><div class="load-data__row"><span class="load-data__title">Label</span><span class="load-data__data">Data</span></div></div>
  <div class="load-data__text-btn"><span class="load-data__text">텍스트 입력</span><button class="load-data__btn">버튼</button></div>
  <p class="load-data__message">안내 문구 입력</p>
  <button class="load-data__bottom-btn">버튼<svg>...</svg></button>
</div>

Highlight — 데이터 강조(제목+부가설명 2줄)

타이틀 아래 부가설명(13px) 한 줄이 추가된 강조형입니다. 나머지 옵션 구성은 Basic과 동일합니다.

<div class="load-data">
  <div class="load-data__box">
    <div class="load-data__row load-data__row--top">
      <span class="load-data__title-group"><span class="load-data__title-main">Label</span><span class="load-data__sub">부가설명</span></span>
      <span class="load-data__data">Data</span>
    </div>
  </div>
</div>

Radio

<label class="radio-box-center"><input type="radio" name="g1" class="radio-box-center__input"><span class="radio-box-center__label">전체</span></label>

Select

계좌 선택 NH올원계좌 선택

실제 구현 시 select-field__box는 <button>으로 만들어 aria-haspopup="listbox"·aria-expanded·aria-labelledby(라벨 id 연결)를 붙여야 키보드/스크린리더에서 정상 동작합니다.

<div class="select-field">
  <span class="select-field__label" id="selLabel">라벨</span>
  <button type="button" class="select-field__box" aria-haspopup="listbox" aria-expanded="false" aria-labelledby="selLabel">
    <span class="select-field__content"><span class="select-field__text">선택하세요</span></span>
    <span class="select-field__chevron" aria-hidden="true"><img src="vendor/icons/arrow-down1-24.svg" width="16" height="16" alt=""></span>
  </button>
</div>

Switch

<label class="switch"><input type="checkbox" class="switch__input"><span class="switch__track"></span></label>

Textarea-message

<div class="textarea">
  <div class="textarea__wrap"><textarea class="textarea__field"></textarea></div>
  <div class="textarea__footer"><span class="textarea__count">0/500</span></div>
</div>

Toast

<div class="toast-wrap"><div class="toast"><span class="toast__text">저장되었습니다</span></div></div>

Tooltip

<div class="tooltip-card">
  <div class="tooltip-card__header"><span class="tooltip-card__title">제목</span><button class="tooltip-card__close" aria-label="닫기"><svg viewBox="0 0 24 24" stroke="currentColor" stroke-width="2.5">...</svg></button></div>
  <p class="tooltip-card__body">설명</p>
</div>

Color (Figma 원본 대조 완료)

우측 상단 다크모드 보기 버튼을 누르면 아래 Button 상태와 Semantic 토큰이 실시간으로 다크모드 값으로 바뀝니다. Primitive는 assets/css/nds.scoped.css에 실제로 정의된 값을 그대로 추출해 표시한 것이라 코드와 100% 일치합니다.

Button 상태 (실제 .btn 컴포넌트로 검증)

위 버튼들은 index.html의 실제 .btn--primary/secondary/tertiary, .btn-floating__circle 규칙을 그대로 사용합니다(별도로 새로 그린 목업이 아님).

Semantic Color

Text (font-*)

Border (border-*)

Background (bg-*)

Icon (icon-*)

Primitive Color (라이트 값 · CSS에서 직접 추출)

Point1/2/3은 assets/css/nds.scoped.css 안에서 plant1/2/3와 값이 동일한 별칭(alias)입니다.