버튼

좁은 밴드 large48px·16/24·radius10. medium34px 유지. 배너 크기는 페이지 배치 계약.

primary / default / xlarge, large, medium, small

primary / hover / xlarge, large, medium, small

primary / pressed·selected / xlarge, large, medium, small

primary / disabled / xlarge, large, medium, small

secondary / default / xlarge, large, medium, small

secondary / hover / xlarge, large, medium, small

secondary / pressed·selected / xlarge, large, medium, small

secondary / disabled / xlarge, large, medium, small

primary-line / default / xlarge, large, medium, small

primary-line / hover / xlarge, large, medium, small

primary-line / pressed·selected / xlarge, large, medium, small

primary-line / disabled / xlarge, large, medium, small

destructive-primary / default / xlarge, large, medium, small

destructive-primary / hover / xlarge, large, medium, small

destructive-primary / pressed·selected / xlarge, large, medium, small

destructive-primary / disabled / xlarge, large, medium, small

destructive-secondary / default / xlarge, large, medium, small

destructive-secondary / hover / xlarge, large, medium, small

destructive-secondary / pressed·selected / xlarge, large, medium, small

destructive-secondary / disabled / xlarge, large, medium, small

outline / default / xlarge, large, medium, small

outline + outline-strong(글자 text/01) / default

outline / hover / xlarge, large, medium, small

outline / pressed·selected / xlarge, large, medium, small

outline / disabled / xlarge, large, medium, small

아이콘 옵션 / 좌측 plus

아이콘 옵션 / 우측 chevron-right

Figma 외 접근성 상태 / focus

Figma 외 검증 상태 / error

Button text / large, medium, small

Button text / small · success (#30666b) · 높이24 · 아이콘16

Button text 아이콘 옵션 / 좌측 plus

Button text 아이콘 옵션 / 우측 plus

반응형 크기 · xlarge 56px·아이콘24, 1279px 이하 large 48px·아이콘20. 이미지 아이콘은 icon + icon--image 계약을 쓴다.

다운로드

반응형 크기 · large, 1279px 이하 medium

반응형 크기 · medium 34px, 1279px 이하 large 48px

반응형 크기 · medium 34px, 599px 이하 large 48px

통합검색 입력창

승격 이유: Figma 통합검색 메인(default 3295:53862 / mobile 3295:53875)의 독립 검색창 계약. /search에서 검수한 구조를 공용으로 이동했다. 원본 재조회 불가로 기존 검수 수치를 유지한다.

DOM: form.kofa-search-field 안에 scope(범위 선택·구분선)와 query(로고·검색어·제출). default 높이85, mobile(599px 이하) 높이128. 페이지는 배치·너비·주변 간격만 소유한다.

상태: 범위 선택은 data-custom-select·native·label·menu·option 계약, details open과 선택값을 동기화한다. 검색어는 required·maxlength100, Enter와 검색 버튼은 같은 GET 제출이다. action·name·검증 정책은 사용 화면이 정한다.

전체메뉴콘텐츠게시글

전체

전체메뉴콘텐츠게시글

검색

입력

input · large · Default

input · large · filled

input · large · selected

input · large · success

input · large · error

input · large · disabled

input · large · readonly

input · large · readonly+filled

input · large · required

input · small · Default

input · small · right icon

input · small · filled

input · small · selected

input · small · success

input · small · error

input · small · disabled

input · small · readonly

input · small · readonly+filled

input · small · required

textarea · large · Default

textarea · large · filled

textarea · large · selected

textarea · large · success

textarea · large · error

textarea · large · disabled

textarea · large · readonly

textarea · large · readonly+filled

textarea · large · required

textarea · small · Default

textarea · small · filled

textarea · small · selected

textarea · small · success

textarea · small · error

textarea · small · disabled

textarea · small · readonly

textarea · small · readonly+filled

textarea · small · required

input · large · hover 고정

input · large · focus 고정

input · large · pressed 고정

input · large · description · 글자수 카운터

input · large · password · 눈 아이콘

비밀번호

textarea · large · description · 글자수 카운터

체크박스

단독 · round · default

단독 · round · selected

단독 · round · disabled

단독 · check-mark · default

단독 · check-mark · selected

단독 · check-mark · disabled

small · round · regular · default

small · round · regular · selected

small · round · regular · disabled

small · round · semibold · default

small · round · semibold · selected

small · round · semibold · disabled

small · check-mark · regular · default

small · check-mark · regular · selected

small · check-mark · regular · disabled

small · check-mark · semibold · default

small · check-mark · semibold · selected

small · check-mark · semibold · disabled

large · round · regular · default

large · round · regular · selected

large · round · regular · disabled

large · round · semibold · default

large · round · semibold · selected

large · round · semibold · disabled

large · check-mark · regular · default

large · check-mark · regular · selected

large · check-mark · regular · disabled

large · check-mark · semibold · default

large · check-mark · semibold · selected

large · check-mark · semibold · disabled

확장 상태 · hover

확장 상태 · pressed

확장 상태 · focus

확장 상태 · error

필수 항목을 선택해 주세요.

확장 상태 · indeterminate

동작 · 전체선택과 부분선택

칩과 뱃지

Chip list · 기본 gap6. 페이지 자기 선택자의 --kofa-chip-list-gap으로 폭별 간격을 지정한다.

칩: line / circle / default / small·medium·large

칩: line / circle / hovered / small·medium·large

칩: line / circle / pressed / small·medium·large

칩: line / circle / focused / small·medium·large

칩: line / circle / selected / small·medium·large

칩: line / circle / disabled / small·medium·large

칩: line / circle / error / small·medium·large

칩: line / square / default / small·medium·large

칩: line / square / hovered / small·medium·large

칩: line / square / pressed / small·medium·large

칩: line / square / focused / small·medium·large

칩: line / square / selected / small·medium·large

칩: line / square / disabled / small·medium·large

칩: line / square / error / small·medium·large

칩: fill / circle / default / small·medium·large

칩: fill / circle / hovered / small·medium·large

칩: fill / circle / pressed / small·medium·large

칩: fill / circle / focused / small·medium·large

칩: fill / circle / selected / small·medium·large

칩: fill / circle / disabled / small·medium·large

칩: fill / circle / error / small·medium·large

칩: fill / square / default / small·medium·large

칩: fill / square / hovered / small·medium·large

칩: fill / square / pressed / small·medium·large

칩: fill / square / focused / small·medium·large

칩: fill / square / selected / small·medium·large

칩: fill / square / disabled / small·medium·large

칩: fill / square / error / small·medium·large

칩 option: Choice 기본·선택

칩 option: Input 삭제 아이콘

칩 option: Filter 기본·선택

필터 필터

칩 option: number line·fill / small·medium·large

네모 뱃지: large / outline / primary·secondary·danger·success·information·gray

네모 뱃지: large / solid-pastel / primary·secondary·danger·success·information·gray

네모 뱃지: large / solid / primary·secondary·danger·success·information·gray

네모 뱃지: small / outline / primary·secondary·danger·success·information·gray

네모 뱃지: small / solid-pastel / primary·secondary·danger·success·information·gray

네모 뱃지: small / solid / primary·secondary·danger·success·information·gray

둥근 뱃지: 50×34 / outline / green

Count 뱃지: 1자리·3자리

Dot 뱃지: 6×6

가로 스크롤 목록

탭

mobile: 균등폭·최소52px·16/24, 선택 하단선2px·비선택1px. 건수 숨김. 긴 이름은 줄바꿈.

3개 · 기본 label · 둘째 항목 선택 (2370-12532)

3개 · 경로 이동형 링크 · 첫 항목 현재 페이지 (2551-104920)

상자형 유지 · kofa-tab--boxed · 1279px 이하 18px·53.5px, mobile도 상자형 (3687-96285, 3687-96597)

작은 상자형 · kofa-tab--boxed + kofa-tab--boxed-small · 599px 이하 16px·50.5px, 패널 상하20px·좌우16px (4199-29004)

고정 폭 스크롤 · kofa-tab--scroll · mobile 항목 100px 가로 스크롤, 건수 표시 (3802-95117)

5개 · 내용 폭 · 경로 이동형 링크 (3363-287059)

2개 · 보조 label · 첫 항목 선택 (2630-31871 tab3)

2개 · 기본 label · 첫 항목 선택 (2625-26145)

3개 · 기본 label · 첫 항목 선택 (2584-5955)

3개 · 기본 label · 셋째 항목 선택 (2551-104920)

상태 · default / hover / pressed / focus / selected / disabled / error

페이지네이션

페이지네이션 간격은 모든 폭에서0px. compact-mobile 변형은 mobile 이전/다음40px, 기본은60px. data-pagination + 숫자 li의 data-pagination-page: 선택 위치 중심5개, 끝 구간 보정·폭 전환·비동기 갱신 유지.

Figma 실제 조합: default × double_pre, default × pre, selected × number, default 숫자, default × next, default × double_next

서비스 확장: 생략·선택·비활성 상태

상태: default

상태: hover

상태: pressed

상태: focus

상태: selected

상태: disabled

상태: error

이전 버튼

Figma `이전 버튼` 왼쪽 묶음 · data-history-back

이전

구역 제목

1279px 이하: 제목22/700/33, 세로선4×21. desktop24/36 유지.

Figma `editor title` · h2~h4 어느 제목 요소에도 쓴다

운영 시간 · 휴관일

표 칸

Figma `table` type=title · text position=left·middle (2551-104956)

Figma `table` type=body · position=bottom·top × text position=left·middle

팝업과 바텀시트

mobile 바텀시트 하단76px: 버튼56px·상하10px·gap10. OS bar는 브라우저 영역.

팝업 · 버튼 1개 · 기본

공용 준비중 안내 · 화면에 조각을 한 번 넣고 여러 버튼에서 재사용한다. 공통 headAssets의 dialog.js가 필요하다.

<th:block th:replace="~{fragments/components/pending-dialog :: dialog}"></th:block>
<button type="button" data-dialog-open="common-pending-dialog" aria-haspopup="dialog" aria-controls="common-pending-dialog">미리보기</button>

팝업 · 버튼 2개 · 삭제 경고

팝업 · 선택 목록 (kofa-dialog--select) · Figma 3479:188209 외국인 가입 국가 선택에서 승격

DOM: kofa-dialog__title, 선택 kofa-dialog__search(검색 text-field), kofa-dialog__scroll(목록, 최대 398px·6px 스크롤바), kofa-dialog__actions(목록 위 40px 그라데이션). 목록 항목 모양은 사용 화면이 소유한다.

항목 선택

목록 항목 1

목록 항목 2

목록 항목 3

목록 항목 4

목록 항목 5

목록 항목 6

목록 항목 7

목록 항목 8

목록 항목 9

목록 항목 10

목록 항목 11

목록 항목 12

확인

바텀시트 · 모바일 · 기본/hover/pressed/focus/selected/disabled/error 항목

CMS 파일 다운로드

CMS 공통파일명 치환 출력. 부모 너비 100%. 좁은 밴드 343px 행80px·정보/다운로드 가로 배치, 컨테이너260px 이하 세로 배치·파일명 말줄임. 파일 형식 12종·첨부 여러 개·알 수 없는 형식·오류. 아래 다운로드는 퍼블리싱 예시이며 실제 파일에 연결되지 않습니다.

드롭다운

Dropdown · large × default

Dropdown · large × selected

Dropdown · large × disabled

Dropdown · large × readonly

Dropdown · large × readonly+filled

Dropdown · large × filled

Dropdown · large × error

Dropdown · small × default

Dropdown · small × selected

Dropdown · small × disabled

Dropdown · small × readonly

Dropdown · small × readonly+filled

Dropdown · small × filled

Dropdown · small × error

Dropdown · large × hover 고정

Dropdown · large × pressed 고정

Dropdown · large × focus 고정

Dropdown · small × hover 고정

Dropdown · small × pressed 고정

Dropdown · small × focus 고정

Option · large × default

Option · large × hover

Option · large × selected

Option · large × hover+selected

Option · small × default

Option · small × hover

Option · small × selected

Option · small × hover+selected

Select · large

Select · medium

Select · small

Filter · kofa-select--filter + data-custom-select-filter. 599px 이하 아이콘24 + 필터16/600, 현재 정렬값은 접근성 이름으로 유지. native·option·선택 이벤트는 기존 계약.

최신순가나다순

최신순필터

최신순가나다순

Dropdown guide · large × open, 마지막 option 절반 노출

경로와 페이지 헤더

Breadcrumb · Figma 조합 · type=home + separator + text

Breadcrumb · type=home · state=default

Breadcrumb · type=separator · state=default

Breadcrumb · type=text · state=default

Breadcrumb · type=text · state=hover

Breadcrumb · type=text · state=pressed

Breadcrumb · type=text · state=focus

Breadcrumb · type=text · state=selected

Breadcrumb · type=text · state=disabled

Breadcrumb · type=text · state=error

Breadcrumb · 긴 경로 가로 스크롤

Page header · Figma 2422:79757 · breadcrumb + title + description

Page header · 서브 레이아웃 콘텐츠 열 변형(--content) · Figma 3436:55270 · fragments/components/sub-layout :: contentHeader(title, sectionLabel, sectionHref, menuLabel, menuTargetId). 실제 페이지에서는 kofa-sub-layout__content 안에 둔다.

경로 2단계 · menuLabel null (3687:96274)

상세형 · fragments/components/sub-layout :: detailHeader(crumbs, menuTargetId). h1을 그리지 않는다. 요약 박스의 제목이 h1. 경로 단계 수 가변(3436:56693 4단계)

좌측 내비게이션

좁은 밴드 현재 메뉴: wrapper padding0, 선택기48px. 메뉴 순서 유지.

LNB 간격: Figma 시안마다 하위 목록 간격이 0/8로 섞여 있다. 소장자료는 0(--flush)으로 통일(2026-10-01 사용자 확정). 시안 간격이 다르면 사용자 확인 후 대메뉴 선택자에서 공개 변수로 정한다.

Figma 2625:26118 · 1/2 depth, 현재 위치, 펼침 아이콘

현재 그룹은 접어도 검정 유지, 현재 하위 링크는 굵게·세로선 표시. 직접 링크는 화살표 없이 현재일 때만 검정.

Figma 2584:5943 · 1 depth

조합 1 · title × Default × Show btn=true

조합 2 · title × Default × Show btn=false

조합 3 · title × selected × Show btn=true

조합 4 · title × selected × Show btn=false

조합 5 · body × Default × Show btn=true

조합 6 · body × Default × Show btn=false

조합 7 · body × selected × Show btn=true

조합 8 · body × selected × Show btn=false

상태 · hover

상태 · pressed (Figma 정의 없음: default 표시)

상태 · focus

상태 · disabled

변형 · kofa-side-nav--flush: 그룹·하위 목록 사이 4px 간격 없음(박물관 시안). 블록 class에 더한다.

상태 · error

아코디언

기본 크기 · 선행 아이콘 있음 · 접힘

기본 크기 · 선행 아이콘 있음 · 펼침

기본 크기 · 선행 아이콘 없음 · 접힘

기본 크기 · 선행 아이콘 없음 · 펼침

회원 인증 도움말 · mobile 선행 아이콘 위 · 문구 아래 · 16/700/24 유지

작은 아이콘 크기 · 선행 아이콘 있음 · 접힘

작은 아이콘 크기 · 선행 아이콘 있음 · 펼침

작은 아이콘 크기 · 선행 아이콘 없음 · 접힘

작은 아이콘 크기 · 선행 아이콘 없음 · 펼침

상태 · default

상태 · hover

상태 · pressed

상태 · focus

상태 · selected

상태 · disabled

상태 · error

빈 결과

목록·내용 0건일 때 공용 fragment. 기본 높이(최소 164px, 위아래 50px)를 항상 확보한다.

검색 결과가 없습니다.

토스트

Figma toast · type=information·success·error. 화면에서는 window.Kofa.Toast.show(문구, { type })로 599px 이하 하단 중앙, 600px 이상 우측 하단에 3초 띄운다.

전화번호가 복사되었습니다.

저장되었습니다.

복사하지 못했습니다.

이미지 없음

이미지가 없을 때 공용 fragment. 크기와 비율은 사용 화면이 정한다.

color

• --kofa-color-focus-ring #1f6feb
• --kofa-color-neutral-black-90 rgb(0 0 0 / 90%)
• --kofa-color-neutral-black-80 rgb(0 0 0 / 80%)
• --kofa-color-neutral-black-70 rgb(0 0 0 / 70%)
• --kofa-color-neutral-black-60 rgb(0 0 0 / 60%)
• --kofa-color-neutral-black-50 rgb(0 0 0 / 50%)
• --kofa-color-neutral-black-40 rgb(0 0 0 / 40%)
• --kofa-color-neutral-black-30 rgb(0 0 0 / 30%)
• --kofa-color-neutral-black-20 rgb(0 0 0 / 20%)
• --kofa-color-neutral-black-10 rgb(0 0 0 / 10%)
• --kofa-color-neutral-black-08 rgb(0 0 0 / 8%)
• --kofa-color-neutral-black-06 rgb(0 0 0 / 6%)
• --kofa-color-neutral-black-04 rgb(0 0 0 / 4%)
• --kofa-color-neutral-black-02 rgb(0 0 0 / 2%)
• --kofa-color-neutral-black-0 rgb(0 0 0 / 0%)
• --kofa-color-neutral-white-100 #ffffff
• --kofa-color-neutral-white-75 rgb(255 255 255 / 75%)
• --kofa-color-neutral-white-50 rgb(255 255 255 / 50%)
• --kofa-color-neutral-white-25 rgb(255 255 255 / 25%)
• --kofa-color-neutral-white-10 rgb(255 255 255 / 10%)
• --kofa-color-neutral-white-0 rgb(255 255 255 / 0%)
• --kofa-color-gray-50 #f9f9f9
• --kofa-color-gray-100 #ededed
• --kofa-color-gray-150 #e1e1e1
• --kofa-color-gray-200 #d4d4d6
• --kofa-color-gray-300 #bbbcbe
• --kofa-color-gray-400 #a8a9ad
• --kofa-color-gray-500 #8b8c90
• --kofa-color-gray-600 #727276
• --kofa-color-gray-700 #58585a
• --kofa-color-gray-800 #424345
• --kofa-color-gray-900 #262831
• --kofa-color-white #ffffff
• --kofa-color-brand-border-gradient linear-gradient(90deg, var(--kofa-color-icon-error), #a3586c 50%, #767c97)
• --kofa-color-black #000000
• --kofa-color-error-50 #f7e7e9
• --kofa-color-error-100 #f3d3d6
• --kofa-color-error-150 #f0bec2
• --kofa-color-error-200 #ebabb0
• --kofa-color-error-300 #e2838b
• --kofa-color-error-400 #d85c66
• --kofa-color-error-500 #cf3541
• --kofa-color-error-600 #ab2933
• --kofa-color-error-700 #841f27
• --kofa-color-error-800 #621017
• --kofa-color-error-900 #39090d
• --kofa-color-success-50 #e5f0f1
• --kofa-color-success-100 #d3e8ea
• --kofa-color-success-150 #c2e1e3
• --kofa-color-success-200 #b1d8dc
• --kofa-color-success-300 #90c8cd
• --kofa-color-success-400 #6eb8be
• --kofa-color-success-500 #4ea6ad
• --kofa-color-success-600 #3f868c
• --kofa-color-success-700 #30666b
• --kofa-color-success-800 #1c4a4e
• --kofa-color-success-900 #0f282b
• --kofa-color-warning-50 #fffaeb
• --kofa-color-warning-100 #fff5d6
• --kofa-color-warning-150 #ffe9ad
• --kofa-color-warning-200 #ffd97a
• --kofa-color-warning-300 #ffc847
• --kofa-color-warning-400 #ffb114
• --kofa-color-warning-500 #e9980c
• --kofa-color-warning-600 #bd7a0f
• --kofa-color-warning-700 #905a09
• --kofa-color-warning-800 #613905
• --kofa-color-warning-900 #3c2102
• --kofa-color-information-50 #f4f7fa
• --kofa-color-information-100 #e2ecf4
• --kofa-color-information-150 #cee0f0
• --kofa-color-information-200 #bad5eb
• --kofa-color-information-300 #94bde1
• --kofa-color-information-400 #6fa6d6
• --kofa-color-information-500 #498fcb
• --kofa-color-information-600 #3277b1
• --kofa-color-information-700 #285d8b
• --kofa-color-information-800 #1d4466
• --kofa-color-information-900 #0e2b44
• --kofa-color-red-50 #fdf8f8
• --kofa-color-red-100 #f9e4e5
• --kofa-color-red-150 #f6cfd0
• --kofa-color-red-200 #f5b8ba
• --kofa-color-red-300 #ee8e92
• --kofa-color-red-400 #e86369
• --kofa-color-red-500 #e23940
• --kofa-color-red-600 #cd1e25
• --kofa-color-red-700 #a2181e
• --kofa-color-red-800 #781216
• --kofa-color-red-900 #52070a
• --kofa-color-amber-50 #efe9e1
• --kofa-color-amber-100 #e8decf
• --kofa-color-amber-150 #e2d3be
• --kofa-color-amber-200 #dac7ad
• --kofa-color-amber-300 #cbb18b
• --kofa-color-amber-400 #bc9a6a
• --kofa-color-amber-500 #a9834c
• --kofa-color-amber-600 #88693d
• --kofa-color-amber-700 #674f2e
• --kofa-color-amber-800 #4a361a
• --kofa-color-amber-900 #261c0d
• --kofa-color-key-50 var(--kofa-color-gray-50)
• --kofa-color-key-100 var(--kofa-color-gray-100)
• --kofa-color-key-150 var(--kofa-color-gray-150)
• --kofa-color-key-200 var(--kofa-color-gray-200)
• --kofa-color-key-300 var(--kofa-color-gray-300)
• --kofa-color-key-400 var(--kofa-color-gray-400)
• --kofa-color-key-500 var(--kofa-color-gray-500)
• --kofa-color-key-600 var(--kofa-color-gray-600)
• --kofa-color-key-700 var(--kofa-color-gray-700)
• --kofa-color-key-800 var(--kofa-color-gray-800)
• --kofa-color-key-900 var(--kofa-color-gray-900)
• --kofa-color-badge-count #a0181c
• --kofa-color-badge-notice #008907
• --kofa-color-background-white var(--kofa-color-white)
• --kofa-color-background-gray-subtler var(--kofa-color-gray-50)
• --kofa-color-background-gray-subtle var(--kofa-color-gray-100)
• --kofa-color-background-inverse var(--kofa-color-gray-900)
• --kofa-color-background-bg-dim var(--kofa-color-neutral-black-50)
• --kofa-color-surface-white var(--kofa-color-white)
• --kofa-color-surface-black var(--kofa-color-black)
• --kofa-color-surface-primary-subtle var(--kofa-color-key-50)
• --kofa-color-surface-secondary-subtle var(--kofa-color-red-50)
• --kofa-color-surface-danger-subtle var(--kofa-color-error-50)
• --kofa-color-surface-success-subtle var(--kofa-color-success-50)
• --kofa-color-surface-information-subtle var(--kofa-color-information-50)
• --kofa-color-surface-warning-subtle var(--kofa-color-warning-50)
• --kofa-color-surface-gray-subtle var(--kofa-color-gray-50)
• --kofa-color-surface-primary var(--kofa-color-key-900)
• --kofa-color-surface-disabled var(--kofa-color-gray-100)
• --kofa-color-surface-inactive var(--kofa-color-gray-150)
• --kofa-color-text-01 var(--kofa-color-gray-900)
• --kofa-color-text-02 var(--kofa-color-gray-700)
• --kofa-color-text-03 var(--kofa-color-gray-600)
• --kofa-color-text-04 var(--kofa-color-gray-500)
• --kofa-color-text-white var(--kofa-color-white)
• --kofa-color-text-primary var(--kofa-color-key-900)
• --kofa-color-text-secondary-amber var(--kofa-color-amber-500)
• --kofa-color-text-secondary-red var(--kofa-color-red-500)
• --kofa-color-text-danger var(--kofa-color-error-500)
• --kofa-color-text-success var(--kofa-color-success-700)
• --kofa-color-text-information var(--kofa-color-information-700)
• --kofa-color-text-warning var(--kofa-color-warning-600)
• --kofa-color-divider-01 var(--kofa-color-gray-50)
• --kofa-color-divider-02 var(--kofa-color-gray-150)
• --kofa-color-border-primary var(--kofa-color-key-900)
• --kofa-color-border-default var(--kofa-color-gray-150)
• --kofa-color-border-inactive var(--kofa-color-gray-200)
• --kofa-color-border-gray-dark var(--kofa-color-gray-300)
• --kofa-color-border-secondary-amber var(--kofa-color-amber-400)
• --kofa-color-border-secondary-red var(--kofa-color-red-500)
• --kofa-color-border-danger var(--kofa-color-error-500)
• --kofa-color-border-success var(--kofa-color-success-500)
• --kofa-color-border-information var(--kofa-color-information-600)
• --kofa-color-border-warning var(--kofa-color-warning-600)
• --kofa-color-icon-default var(--kofa-color-gray-900)
• --kofa-color-icon-white var(--kofa-color-white)
• --kofa-color-icon-primary var(--kofa-color-key-900)
• --kofa-color-icon-disabled var(--kofa-color-gray-150)
• --kofa-color-icon-gray var(--kofa-color-gray-500)
• --kofa-color-icon-error var(--kofa-color-error-500)
• --kofa-color-icon-information var(--kofa-color-information-600)
• --kofa-color-icon-success var(--kofa-color-success-500)
• --kofa-color-icon-warning var(--kofa-color-warning-600)

outline

• --kofa-outline-focus-width 2px
• --kofa-outline-focus-offset -2px

space

• --kofa-space-base 1rem

font

• --kofa-font-body "Pretendard GOV", system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif
• --kofa-font-weight-regular 400
• --kofa-font-weight-semibold 600
• --kofa-font-weight-bold 700

line

• --kofa-line-height-base 1.5

letter

• --kofa-letter-spacing-base -0.6px

typo

• 한국영상자료원 Aa --kofa-typo-display-3-size 60px
• 한국영상자료원 Aa --kofa-typo-display-2-size 44px
• 한국영상자료원 Aa --kofa-typo-display-1-size 36px
• --kofa-typo-display-3-size-mobile 40px
• --kofa-typo-display-2-size-mobile 32px
• --kofa-typo-display-1-size-mobile 28px
• 한국영상자료원 Aa --kofa-typo-headline-6-size 40px
• 한국영상자료원 Aa --kofa-typo-headline-5-size 32px
• 한국영상자료원 Aa --kofa-typo-headline-4-size 24px
• 한국영상자료원 Aa --kofa-typo-headline-compact-size 22px
• 한국영상자료원 Aa --kofa-typo-headline-3-size 20px
• 한국영상자료원 Aa --kofa-typo-headline-2-size 18px
• 한국영상자료원 Aa --kofa-typo-headline-1-size 16px
• --kofa-typo-headline-6-size-mobile 28px
• --kofa-typo-headline-5-size-mobile 26px
• --kofa-typo-headline-4-size-mobile 20px
• --kofa-typo-headline-3-size-mobile 20px
• --kofa-typo-headline-2-size-mobile 18px
• --kofa-typo-headline-1-size-mobile 16px
• 한국영상자료원 Aa --kofa-typo-body-5-size 18px
• 한국영상자료원 Aa --kofa-typo-body-4-size 16px
• 한국영상자료원 Aa --kofa-typo-body-3-size 14px
• 한국영상자료원 Aa --kofa-typo-body-2-size 12px
• 한국영상자료원 Aa --kofa-typo-body-1-size 10px

icon

• --kofa-icon-size-12 12px
• --kofa-icon-size-16 16px
• --kofa-icon-size-20 20px
• --kofa-icon-size-24 24px
• --kofa-icon-size-32 32px
• --kofa-icon-size-40 40px
• --kofa-icon-touch-target 44px

layout

• --kofa-layout-max 1280px
• --kofa-layout-safe-gutter 40px
• --kofa-layout-safe-width min( var(--kofa-layout-max), calc(100% - (var(--kofa-layout-safe-gutter) * 2)) )

radius

• --kofa-radius-4 4px
• --kofa-radius-6 6px
• --kofa-radius-8 8px
• --kofa-radius-10 10px
• --kofa-radius-12 12px
• --kofa-radius-16 16px
• --kofa-radius-20 20px
• --kofa-radius-1000 1000px
• --kofa-radius-43 43px
• --kofa-radius-full 999px

common

• --kofa-common-header-hover-background #f5f5f5

chip

• --kofa-chip-icon-size var(--kofa-icon-size-12)
• --kofa-chip-border-color transparent
• --kofa-chip-list-gap 페이지 자기 선택자에서 간격을 지정한다. 기본 6은 시네마테크 섹션 필터(3687:74584). */ .kofa-chip-list { display: flex

badge

• --kofa-badge-color var(--kofa-color-gray-900)
• --kofa-badge-light-color var(--kofa-color-gray-50)