이 사이트의 스타일은 세 층으로 이뤄져 있습니다. 기본 요소 스타일은 클래스를 붙이지 않은 HTML 태그(h2·p·input 등) 7개의 기본 모양, 디자인 토큰은 :root 에 정의된 값(색·글자 크기·간격·반경) 74개, 글로벌 스타일은 그 토큰을 조합해 블록에 붙이는 GenerateBlocks 클래스 177개입니다. 값을 바꾸면 이 화면도 같이 바뀝니다.
이 페이지는 사이트 관리자를 위한 디자인 견본입니다. 방문자 검색에 노출되지 않도록 Rank Math 에서 검색엔진 색인 안 함(noindex)으로 설정하고 사이트맵에서도 제외했습니다.
HTML 태그 선택자에 거는 기본값 7개 — 클래스를 붙이지 않은 h2·p·input 이 어떻게 보일지 정합니다. 글 본문(.entry-content)은 그 안의 제목·문단·목록 간격까지 포함합니다. 플러그인이 찍는 마크업과 에디터의 기본 블록은 이 값을 그대로 따릅니다. 본문의 제목은 항상 h2 로 씁니다. GenerateBlocks → 글로벌 스타일의 Base 분류에서 관리합니다.
Typography (타이포그래피)
제목·문단·인용·글 본문 — 한글 기준 행간·자간
body크기 16px --font-size-md행간 1.7 --line-height-md글자 #5C5C6F --color-text블록 기본 클래스 없음 — body 클래스는 워드프레스가 페이지마다 붙인다본문 기본 글꼴과 크기입니다. 닷커브는 누구나 쉽게 배우고 성장할 수 있는 온라인 강의 플랫폼입니다.
h1크기 36px --font-size-5xl굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-ink모바일(≤767px)크기 28px --font-size-3xlh2크기 24px --font-size-2xl굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-ink모바일(≤767px)크기 20px --font-size-xlh3크기 18px --font-size-lg굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-inkh4크기 16px --font-size-md굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-inkh5크기 15px --font-size-sm굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-inkh6크기 14px --font-size-xs굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-ink글 본문·플러그인이 찍는 맨 제목의 기본값. 본문의 제목은 항상 h2 로 쓴다(h1 은 페이지 제목 하나뿐, h3 이하는 h2 아래 하위 단계). 한글 기준 자간 -0.02em(h4 이하 -0.01em) · 행간 1.45. 줄바꿈은 브라우저 기본(한국어 제목에 text-wrap:balance 를 쓰지 않는다). 클래스가 붙은 제목은 그 클래스가 우선. (견본 제목은 문서 개요에서 빠지도록 role="presentation")제목 1 — 페이지 제목 급 (36px · 모바일 28px)
제목 2 — 본문 제목 (24px · 모바일 20px)
제목 3 — 본문 하위 제목 (18px)
제목 4 — 소제목 (16px)
제목 5 — 작은 소제목 (15px)
제목 6 — 라벨 급 (14px)
p행간 1.7 --line-height-md한글 본문 기본값 — 행간 1.7(--text-line-height-md) · 자간 -0.01em. 줄바꿈은 브라우저 기본(text-wrap 을 쓰지 않는다). 문단 간격은 글 본문(.entry-content)에서 정한다닷커브는 누구나 쉽게 배우고 성장할 수 있는 온라인 강의 플랫폼입니다. 한 번 배운 내용이 일과 삶에서 바로 쓰이도록, 실습과 결과물 중심으로 강의를 만듭니다.
blockquote블록 기본 클래스.wp-block-quote 코어 인용.wp-block-pullquote 코어 풀쿼트배운 내용을 바로 일에 쓰는 것이 진짜 공부입니다.
— 닷커브 수강생
.entry-content .dynamic-entry-content 글 본문(글·상품 설명) 리듬 — 제목 위 여백 48px(h2)·32px(h3)·24px(h4 이하), 문단 아래 20px(목록이 이어지면 14px), 목록 들여쓰기 24px·항목 간격 8px·마커 --contrast-30, 강조 600. 맨 위 제목과 마지막 요소의 바깥 여백은 0이런 분께 추천합니다
경험이 없어도 따라올 수 있도록 처음부터 차근차근 안내합니다.
- 처음 시작하는 분
- 혼자 연습하다 막혔던 분
이 강의에서 배우는 것
기초를 익히고 연습을 거쳐, 첫 결과물을 끝까지 완성합니다.
하위 제목
문단과 강조, 목록이 이어지는 글 본문의 리듬입니다.
Form (폼 요소)
입력·텍스트 영역·선택·버튼의 기본 모양
input블록 기본 클래스.wp-block-search__input 코어 검색.gb-form-field-control GB 폼textarea블록 기본 클래스.wp-block-post-comments-form textarea 코어 댓글 폼.gb-form-field-control GB 폼select블록 기본 클래스.wp-block-categories-dropdown select 코어 카테고리 드롭다운.gb-form-field-control GB 폼button블록 기본 클래스.wp-element-button 코어 버튼 공통.wp-block-button__link 코어 버튼.wp-block-search__button 코어 검색Media & Code (미디어·코드)
이미지·캡션·코드 블록
img블록 기본 클래스.wp-image-{ID} 코어 이미지.gb-media-{uid} GB 미디어 (블록마다 고유)
figure블록 기본 클래스.wp-block-image 코어 이미지pre블록 기본 클래스.wp-block-code 코어 코드.wp-block-preformatted 코어 서식 있는 텍스트pre — 코드 블록
:root 의 CSS 변수 74개 — 디자인의 값. 블록과 클래스는 이 값을 var(--이름) 으로 참조합니다. GenerateBlocks → 디자인 토큰에서 관리합니다.
Color (색상)
글자·배경·테두리 색. 숫자가 작을수록 진하다
Typography (타이포그래피)
글자 크기와 같은 단계의 행간 — 크기와 행간은 한 쌍으로 쓴다
Spacing (간격)
패딩·마진·gap
--space-5xs · 0.25rem (4px)
--space-4xs · 0.375rem (6px)
--space-3xs · 0.25rem (4px)
--space-2xs · 0.5rem (8px)
--space-xs · 0.75rem (12px)
--space-sm · 1rem (16px)
--space-md · 1.5rem (24px)
--space-lg · 2rem (32px)
--space-xl · 3rem (48px)
--space-2xl · 4.5rem (72px)
--space-3xl · 6rem (96px)
Border Radius (테두리 반경)
버튼·카드·입력창의 모서리
Shadow (그림자)
메뉴·툴팁·대화상자·토스트처럼 떠 있는 층에만
--shadow-card
0 0.625rem 1.875rem rgba(38,45,118,0.08)
--shadow-pop
0 0.25rem 0.25rem -0.25rem rgba(12,12,13,0.05), 0 1rem 2rem -0.25rem rgba(12,12,13,0.1)
GenerateBlocks 글로벌 클래스 177개 — 토큰을 조합한 재사용 스타일. 블록에 클래스로 붙입니다. 에디터 분류(카테고리)별로 모았고, 왼쪽은 선택자, 오른쪽은 그 클래스를 실제로 적용한 미리 보기입니다.
Section (섹션)
섹션 컨테이너와 섹션 안의 제목·본문
.section안쪽 96px 32px --space-3xl · --space-lg모바일(≤767px)안쪽 48px 24px --space-xl · --space-mdpadding: var(--space-2xl).inner-section .inner-section--lg .inner-section--sm .inner-section--xs .inner-section--lg — 80rem.inner-section — max-width: var(--gb-container-width).inner-section--sm — max-width: 60rem.inner-section--xs — 20rem.section__title .section__tagline 크기 16px --font-size-md굵기 700행간 1.65 --line-height-sm글자 #C2410C --color-accent-strong아래 여백 8px --space-2xs.section__text 크기 18px --font-size-lg굵기 500행간 1.55 --line-height-lg글자 #5C5C6F --color-text아래 여백 0모바일(≤767px)크기 16px --font-size-md섹션 제목
섹션 태그라인 — 제목을 보충하는 한 줄
섹션 본문 텍스트입니다. 섹션의 내용을 설명합니다.
.section__message .section__message-description 글자 #6B6B7D --color-text-muted404 · 검색 결과 없음 · 가입 완료 같은 안내 화면죄송합니다. 존재하지 않는 페이지입니다.
주소가 바뀌었거나 삭제된 페이지일 수 있습니다. 홈에서 다시 찾아보세요.
.sub-section 정의된 스타일 없음.sub-section__header 가로 간격 0.25rem.sub-section__title .sub-section__title-count .sub-section__text 크기 16px --font-size-md글자 #5C5C6F --color-text하위 섹션 제목
12하위 섹션 본문 텍스트입니다.
Page Header (페이지 헤더)
페이지·아카이브 제목
.page-header__title 페이지 제목
.page-header__tagline 페이지 태그라인
.archive__title 크기 36px --font-size-5xl굵기 700행간 1.35 --line-height-5xl글자 #303044 --color-ink모바일(≤767px)크기 28px --font-size-3xl아카이브 제목
Layout (레이아웃)
그리드·플렉스·정렬·여백 유틸리티
.flex-row .flex-column .padding--md .padding--2xl padding--mdpadding--2xl.vertical--center 두 줄
세
줄
.horizontal--center .width--full Card (카드)
목록에서 반복되는 카드의 조각들
.card.card__image .card__category .card__title .card__meta-text .card__text .card__regular-price .card__sale-price 카드 배치(layout)는 블록에서 정의 — 여기 배경·여백은 미리 보기용
.card__tag .card__product-cat .card__product-tag .card__brand .card__status--not-started .card__status--in-progress .card__status--completed Post (포스트)
단일 글 화면
.post__title 크기 36px --font-size-5xl굵기 700행간 1.35 --line-height-5xl글자 #303044 --color-ink모바일(≤767px)크기 28px --font-size-3xl강의실 동영상 화면이 새로워졌습니다
.post__image 반경 32px --radius-lg최대 폭 100%
Button (버튼)
주요 → 보조 → 3차 → 4차 액션 순
.button--primary 크기 16px --font-size-md굵기 600행간 1.5글자 #ffffff --color-paper배경 #00B042 --color-sub안쪽 8px 24px --space-2xs · --space-md테두리 1px solid #00B042 --color-sub추가 타깃 17개 — 플러그인 마크업에도 같은 모양
.single_add_to_cart_button:not(#_)button.acf-btn.ld-button:not(.ld-compact):not(.ld-button-alternate):not(.ld-button-transparent):not(.ld-button-reverse):not(#_).learndash_mark_complete_button:not(#_).btn-join:not(#_)#btn-join:not(#_).wpProQuiz_button:not(#_).woocommerce .button.alt:not(#_).ld-dashboard-home-btn:not(#_).learndash-wrapper input[type="submit"]:not(#_).woocommerce button[name="save_address"]:not(#_).woocommerce button[name="save_account_details"]:not(#_).amem-submit-button:not(#_).woosw-item--atc .add_to_cart_button:not(#_).ld-dashboard-add-course:not(#_).ldd-bulk__btn--primary:not(#_):not(#_).facetwp-load-more:not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--primary-sm 크기 14px --font-size-xs굵기 600행간 1.5글자 #ffffff --color-paper배경 #00B042 --color-sub안쪽 6px 16px --space-4xs · --space-sm테두리 1px solid #00B042 --color-sub추가 타깃 2개 — 플러그인 마크업에도 같은 모양
.learndash-wrapper .ld-content-actions .ld-content-action:last-child > .ld-button:not(.ld-button-transparent):not(#_):not(#_).ldd-my-assignments__filter-btn.active:not(#_):not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--primary-lg 크기 18px --font-size-lg굵기 600행간 1.5글자 #ffffff --color-paper배경 #00B042 --color-sub안쪽 12px 32px --space-xs · --space-lg테두리 1px solid #00B042 --color-sub추가 타깃 1개 — 플러그인 마크업에도 같은 모양
.learndash-wrapper .ld-alert .ld-button:not(#_):not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--secondary 크기 16px --font-size-md굵기 600행간 1.5글자 #303044 --color-ink배경 #ffffff --color-paper안쪽 8px 24px --space-2xs · --space-md테두리 1px solid #00B042 --color-sub추가 타깃 4개 — 플러그인 마크업에도 같은 모양
.ld-button.ld-button-reverse:not(#_).wpProQuiz_button2:not(#_).woocommerce .button:not(.alt):not(.single_add_to_cart_button):not(.add_to_cart_button):not([name="save_address"]):not([name="save_account_details"]):not(#_).woosw-btn:not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--secondary-sm 크기 14px --font-size-xs굵기 600행간 1.5글자 #303044 --color-ink배경 #ffffff --color-paper안쪽 6px 16px --space-4xs · --space-sm테두리 1px solid #00B042 --color-sub추가 타깃 4개 — 플러그인 마크업에도 같은 모양
.woocommerce table.shop_table .button:not(.alt):not(#_):not(#_).woocommerce-Address-title a.edit:not(#_).learndash-wrapper .ld-content-actions .ld-content-action:first-child > .ld-button:not(.ld-button-transparent):not(#_):not(#_).ld-dashboard-show-more-button:not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--secondary-lg 크기 18px --font-size-lg굵기 600행간 1.5글자 #303044 --color-ink배경 #ffffff --color-paper안쪽 12px 32px --space-xs · --space-lg테두리 1px solid #00B042 --color-sub미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--tertiary 크기 16px --font-size-md굵기 600행간 1.5글자 #ffffff --color-paper배경 #FF6800 --color-accent안쪽 8px 24px --space-2xs · --space-md테두리 1px solid #FF6800 --color-accent추가 타깃 3개 — 플러그인 마크업에도 같은 모양
.glsr-button:not(#_).fluent-comments-block .flc_button:not(#_).wook_discuss_submit:not(#_):not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--tertiary-sm 크기 14px --font-size-xs굵기 600행간 1.5글자 #ffffff --color-paper배경 #FF6800 --color-accent안쪽 6px 16px --space-4xs · --space-sm테두리 1px solid #FF6800 --color-accent추가 타깃 1개 — 플러그인 마크업에도 같은 모양
.ld-presenter-mode .ld-presenter-mode__button:not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--tertiary-lg 크기 18px --font-size-lg굵기 600행간 1.5글자 #ffffff --color-paper배경 #FF6800 --color-accent안쪽 12px 32px --space-xs · --space-lg테두리 1px solid #FF6800 --color-accent미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--quaternary 크기 16px --font-size-md굵기 600행간 1.5글자 #C2410C --color-accent-strong배경 #ffffff --color-paper안쪽 8px 24px --space-2xs · --space-md테두리 1px solid #FF6800 --color-accent추가 타깃 3개 — 플러그인 마크업에도 같은 모양
.ldd-quick-actions__btn:not(#_).ldd-bulk__btn--secondary:not(#_):not(#_).ldd-bulk__btn--outline:not(#_):not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--quaternary-sm 크기 14px --font-size-xs굵기 600행간 1.5글자 #C2410C --color-accent-strong배경 #ffffff --color-paper안쪽 6px 16px --space-4xs · --space-sm테두리 1px solid #FF6800 --color-accent추가 타깃 4개 — 플러그인 마크업에도 같은 모양
.ld-item-list-item .ld-expand-button.ld-compact:not(#_).ld-expand-button:not(.ld-compact):not(.ld-button-alternate):not(#_).ld-dashboard-export-btn:not(#_):not(#_).ldd-my-assignments__filter-btn:not(.active):not(#_):not(#_)
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button--quaternary-lg 크기 18px --font-size-lg굵기 600행간 1.5글자 #C2410C --color-accent-strong배경 #ffffff --color-paper안쪽 12px 32px --space-xs · --space-lg테두리 1px solid #FF6800 --color-accent미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
Tabs (탭)
상품 상세 탭
Search (검색)
코어 검색 블록 공통 모양
.search__inside-wrapper .search__input .search__button Header (헤더)
서비스 헤더·사이트 헤더
.service-header 배경 #F3F3F3 --color-surface안쪽 48px 32px --space-xl · --space-lg모바일(≤767px)안쪽 24px --space-md.service-header__inner 가로 간격 24px --space-md최대 폭 –gb-container-width --gb-container-width.service-header__title 크기 32px --font-size-4xl굵기 700글자 #303044 --color-ink아래 여백 0모바일(≤767px)크기 24px --font-size-2xl.service-header__navi .service-header__navigation 정의된 스타일 없음.service-header__navi-menu-container 정의된 스타일 없음.service-header__navi-menu 정의된 스타일 없음.service-header__navi-menu-item 정의된 스타일 없음블로그
.service-header__navi-menu-toggle 정의된 스타일 없음.service-header__navi-sub-menu 정의된 스타일 없음.service-header__logo 정의된 스타일 없음
Overlay Panel (오버레이 패널)
GB 오버레이 패널의 판과 닫기 버튼
.modal.modal__close 실제 패널은 GB 오버레이로 뜬다 — 여기선 판만모달 제목
오버레이 패널 안의 내용입니다.
Uncategorized
.section__inner 최대 폭 –gb-container-width --gb-container-width미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card 배경 #ffffff --color-paper반경 16px --radius-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__image 최대 폭 100%아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__title 크기 20px --font-size-xl굵기 700행간 1.5 --line-height-xl글자 #303044 --color-ink아래 여백 0모바일(≤767px)크기 16px --font-size-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__meta-text 크기 14px --font-size-xs굵기 500글자 #6B6B7D --color-text-muted미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__text 크기 15px --font-size-sm굵기 500행간 1.65 --line-height-sm글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post__meta-text 크기 15px --font-size-sm굵기 500글자 #6B6B7D --color-text-muted미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post__category 크기 14px --font-size-xs굵기 700글자 #C2410C --color-accent-strong배경 #FFF0E8 --color-accent-soft안쪽 4px 12px --space-3xs · --space-xs반경 9999px --radius-pill미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1-1 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1-1-1 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1-1-1-1 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1-3 가로 간격 48px --space-xl세로 간격 48px --space-xl미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-3-1 가로 간격 48px --space-xl세로 간격 48px --space-xl미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1-1-2 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1-3-1 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-1-2-1 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-2-1-1 가로 간격 24px --space-md세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.stack세로 간격 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.cluster가로 간격 16px --space-sm세로 간격 8px --space-2xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__category 크기 14px --font-size-xs굵기 700글자 #C2410C --color-accent-strong미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.product-tabs__tab 크기 16px --font-size-md굵기 600글자 #6B6B7D --color-text-muted안쪽 8px 24px --space-2xs · --space-md반경 9999px --radius-pill가로 간격 8px --space-2xs추가 타깃 2개 — 플러그인 마크업에도 같은 모양
.facetwp-radio.woocommerce-MyAccount-navigation li a
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.grid-2-1 가로 간격 48px --space-xl세로 간격 48px --space-xl미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.sub-section__headline 크기 24px --font-size-2xl굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-ink아래 여백 0px미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.product-tabs 배경 #FFF0E8 --color-accent-soft안쪽 6px --space-4xs반경 9999px --radius-pill가로 간격 4px --space-3xs최대 폭 100%추가 타깃 2개 — 플러그인 마크업에도 같은 모양
.facetwp-type-radio.woocommerce-MyAccount-navigation ul
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section__headline 크기 32px --font-size-4xl굵기 700행간 1.4 --line-height-3xl글자 #303044 --color-ink아래 여백 0모바일(≤767px)크기 24px --font-size-2xl미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section-hero 정의된 스타일 없음미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.sub-section-bordered 안쪽 32px --space-lg테두리 1px solid #EAECF0 --color-line반경 16px --radius-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.footer배경 #ffffff --color-paper안쪽 72px 32px 32px 32px --space-2xl · --space-lg모바일(≤767px)안쪽 48px 24px --space-xl · --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__tag 크기 14px --font-size-xs글자 #6B6B7D --color-text-muted미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__product-cat 크기 14px --font-size-xs굵기 700글자 #C2410C --color-accent-strong미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__product-tag 크기 14px --font-size-xs글자 #6B6B7D --color-text-muted미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__brand 크기 14px --font-size-xs글자 #6B6B7D --color-text-muted미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post정의된 스타일 없음미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post__text 정의된 스타일 없음미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post__tag 크기 14px --font-size-xs굵기 600글자 #5C5C6F --color-text배경 #F3F3F3 --color-surface안쪽 4px 12px --space-3xs · --space-xs반경 9999px --radius-pill추가 타깃 1개 — 플러그인 마크업에도 같은 모양
.post-tags a
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post__product-cat 크기 14px --font-size-xs굵기 700글자 #C2410C --color-accent-strong배경 #FFF0E8 --color-accent-soft안쪽 4px 12px --space-3xs · --space-xs반경 9999px --radius-pill미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post__product-tag 크기 14px --font-size-xs굵기 600글자 #5C5C6F --color-text배경 #F3F3F3 --color-surface안쪽 4px 12px --space-3xs · --space-xs반경 9999px --radius-pill미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post__brand 크기 14px --font-size-xs굵기 600글자 #5C5C6F --color-text배경 #F3F3F3 --color-surface안쪽 4px 12px --space-3xs · --space-xs반경 9999px --radius-pill미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.menu-dropdown 배경 #ffffff --color-paper안쪽 8px --space-2xs반경 16px --radius-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.menu-dropdown__item 크기 16px --font-size-md굵기 500글자 #303044 --color-ink안쪽 12px 16px --space-xs · --space-sm반경 10px --radius-xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.overlay-panel 배경 #ffffff --color-paper미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.overlay-panel__close 정의된 스타일 없음미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.text-link-styled 굵기 600글자 #C2410C --color-accent-strong미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__faq-cat 크기 14px --font-size-xs굵기 700글자 #C2410C --color-accent-strong미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.author-box__social 미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.author-box 배경 #F3F3F3 --color-surface안쪽 32px --space-lg반경 16px --radius-sm가로 간격 24px --space-md세로 간격 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.author-box__image 반경 50% --radius-circle미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.author-box__text 크기 15px --font-size-sm글자 #5C5C6F --color-text미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.author-box__title 크기 18px --font-size-lg굵기 700글자 #303044 --color-ink미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.product-tabs__tab-title 글자 inherit미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.product-tabs__tab-count 크기 12px --font-size-2xs굵기 700글자 #C2410C --color-accent-strong배경 #ffffff --color-paper반경 9999px --radius-pill추가 타깃 1개 — 플러그인 마크업에도 같은 모양
.facetwp-counter
미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__regular-price 크기 15px --font-size-sm굵기 500글자 #6B6B7D --color-text-muted미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__sale-price 크기 24px --font-size-2xl굵기 700행간 1.3글자 #FF6800 --color-accent모바일(≤767px)크기 18px --font-size-lg미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.sub-section__headline-count 아래 여백 0px미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section-bordered 안쪽 24px --space-md테두리 1px solid #EAECF0 --color-line반경 16px --radius-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__body 안쪽 24px --space-md세로 간격 12px --space-xs모바일(≤767px)안쪽 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__badge 크기 14px --font-size-xs굵기 800글자 #00B042 --color-sub배경 #ffffff --color-paper안쪽 4px 12px --space-3xs · --space-xs반경 10px --radius-xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.button__icon-circle 글자 #ffffff --color-paper배경 #2ED26B --color-sub-bright반경 50% --radius-circle미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.announcement-bar 크기 15px --font-size-sm굵기 700행간 1.65 --line-height-sm글자 #ffffff --color-paper배경 #FF6800 --color-accent안쪽 8px 24px --space-2xs · --space-md모바일(≤767px)크기 14px --font-size-xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.header배경 #ffffff --color-paper안쪽 16px 32px --space-sm · --space-lg모바일(≤767px)안쪽 12px 24px --space-xs · --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.header__nav 미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.header__mobile-menu 배경 #ffffff --color-paper안쪽 32px 24px --space-lg · --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.header__toggle 글자 #303044 --color-ink배경 rgba(255,255,255,0) --color-clear안쪽 8px --space-2xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.footer__about 크기 16px --font-size-md행간 1.7 --line-height-md글자 #5C5C6F --color-text최대 폭 26rem아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.footer__social 글자 #ffffff --color-paper배경 #00B042 --color-sub반경 4px --radius-2xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.footer__bottom 미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.footer__biz 크기 14px --font-size-xs행간 1.6 --line-height-xs글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section--surface 배경 #F3F3F3 --color-surface미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.hero__title 크기 48px --font-size-7xl굵기 700행간 1.3 --line-height-7xl글자 #303044 --color-ink아래 여백 0모바일(≤767px)크기 28px --font-size-3xl미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.hero__stat-number 크기 20px --font-size-xl굵기 700글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.hero__stat-label 크기 14px --font-size-xs굵기 500행간 1.6 --line-height-xs글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.media--rounded 반경 32px --radius-lg미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.feature__icon 글자 #C2410C --color-accent-strong배경 #FFF0E8 --color-accent-soft반경 50% --radius-circle미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.feature__title 크기 18px --font-size-lg굵기 700행간 1.55 --line-height-lg글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.feature__title--accent 글자 #C2410C --color-accent-strong미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.feature__text 크기 15px --font-size-sm굵기 500행간 1.65 --line-height-sm글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.testimonial배경 #ffffff --color-paper안쪽 32px --space-lg반경 20px --radius-md세로 간격 24px --space-md모바일(≤767px)안쪽 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.testimonial__quote 크기 16px --font-size-md행간 1.7 --line-height-md글자 #5C5C6F --color-text아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.testimonial__name 크기 16px --font-size-md굵기 700글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.testimonial__role 크기 14px --font-size-xs굵기 500글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.testimonial__avatar 테두리 2px solid #FF6800 --color-accent반경 50% --radius-circle미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.backdrop-overlay 배경 color-mix(in srgb,#303044 65%,transparent) --color-ink미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section__headline--inverse 글자 #ffffff --color-paper미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.faq-item 배경 #ffffff --color-paper테두리 1px solid #ffffff --color-paper반경 16px --radius-sm아래 여백 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.faq-item__toggle 크기 18px --font-size-lg굵기 700글자 #303044 --color-ink배경 rgba(255,255,255,0) --color-clear안쪽 24px 32px --space-md · --space-lg가로 간격 16px --space-sm모바일(≤767px)크기 16px --font-size-md안쪽 16px 24px --space-sm · --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.faq-item__content 크기 16px --font-size-md글자 #5C5C6F --color-text미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.category-tile 글자 #ffffff --color-paper안쪽 24px --space-md반경 20px --radius-md세로 간격 8px --space-2xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.category-tile__title 크기 20px --font-size-xl굵기 700행간 1.5 --line-height-xl글자 #ffffff --color-paper아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.category-tile__text 크기 14px --font-size-xs굵기 600행간 1.6 --line-height-xs글자 #ffffff --color-paper아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.amenity__icon 글자 #ffffff --color-paper배경 #FF6800 --color-accent반경 50% --radius-circle미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.amenity__label 크기 14px --font-size-xs굵기 700행간 1.6 --line-height-xs글자 #C2410C --color-accent-strong아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.amenity__text 크기 15px --font-size-sm굵기 600행간 1.65 --line-height-sm글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__badge 크기 14px --font-size-xs굵기 700행간 1.5글자 #ffffff --color-paper배경 #303044 --color-ink안쪽 8px 24px --space-2xs · --space-md반경 9999px --radius-pill미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__name 크기 15px --font-size-sm굵기 700행간 1.65 --line-height-sm글자 #009638 --color-sub-strong아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__period 크기 14px --font-size-xs굵기 700행간 1.6 --line-height-xs글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__price 크기 32px --font-size-4xl굵기 800행간 1.35 --line-height-4xl글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__text 크기 15px --font-size-sm굵기 500행간 1.65 --line-height-sm글자 #5C5C6F --color-text아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__list 세로 간격 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__feature 크기 15px --font-size-sm굵기 500행간 1.65 --line-height-sm글자 #5C5C6F --color-text가로 간격 12px --space-xs아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card__feature--off 글자 #6B6B7D --color-text-muted미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card 글자 #5C5C6F --color-text배경 #ffffff --color-paper안쪽 32px 24px --space-lg · --space-md테두리 1px solid #E3E3E7 --color-divider반경 16px --radius-sm세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.plan-card--featured 글자 #ffffff --color-paper배경 #00B042 --color-sub테두리 1px solid #00B042 --color-sub미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.course-hero 배경 #303044 --color-ink안쪽 72px 48px --space-2xl · --space-xl반경 20px --radius-md가로 간격 48px --space-xl세로 간격 32px --space-lg모바일(≤767px)안쪽 48px 24px --space-xl · --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.course-hero__title 크기 40px --font-size-6xl굵기 700행간 1.3 --line-height-6xl글자 #ffffff --color-paper아래 여백 0모바일(≤767px)크기 28px --font-size-3xl행간 1.4 --line-height-3xl미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section__text--inverse 글자 #ffffff --color-paper미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section__headline--accent 글자 #FF6800 --color-accent미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.stat-card 배경 #ffffff --color-paper안쪽 32px 24px --space-lg · --space-md반경 16px --radius-sm세로 간격 8px --space-2xs최대 폭 15rem미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.stat-card__number 크기 32px --font-size-4xl굵기 800행간 1.35 --line-height-4xl글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.stat-card__label 크기 14px --font-size-xs굵기 700행간 1.6 --line-height-xs글자 #C2410C --color-accent-strong아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.stat-card__text 크기 14px --font-size-xs굵기 500행간 1.6 --line-height-xs글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.detail-table 배경 #ffffff --color-paper안쪽 24px --space-md반경 16px --radius-sm세로 간격 24px --space-md미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.detail-table__head 크기 15px --font-size-sm굵기 600행간 1.65 --line-height-sm글자 #6B6B7D --color-text-muted가로 간격 8px --space-2xs아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.detail-table__row 가로 간격 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.detail-table__label 크기 15px --font-size-sm굵기 500행간 1.65 --line-height-sm글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.detail-table__value 크기 15px --font-size-sm굵기 600행간 1.65 --line-height-sm글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.purchase-bar 배경 #ffffff --color-paper안쪽 12px 24px calc(12px + env(safe-area-inset-bottom,0px)) 24px --space-xs · --space-md가로 간격 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.curriculum배경 #ffffff --color-paper테두리 1px solid #E3E3E7 --color-divider반경 16px --radius-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.curriculum__course 크기 16px --font-size-md굵기 700행간 1.7 --line-height-md글자 #303044 --color-ink배경 #F3F3F3 --color-surface안쪽 16px 24px --space-sm · --space-md아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.curriculum__lesson 크기 15px --font-size-sm굵기 500행간 1.65 --line-height-sm글자 #5C5C6F --color-text안쪽 16px 24px --space-sm · --space-md가로 간격 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.curriculum__preview 크기 14px --font-size-xs굵기 700행간 1.5글자 #C2410C --color-accent-strong미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.section--flush-top 미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.value-card 글자 #303044 --color-ink배경 #ffffff --color-paper안쪽 32px 24px --space-lg · --space-md반경 16px --radius-sm세로 간격 16px --space-sm미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.value-card__title 크기 16px --font-size-md굵기 700행간 1.7 --line-height-md글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.goal-card 배경 #E6F8EC --color-sub-soft안쪽 24px --space-md반경 16px --radius-sm세로 간격 8px --space-2xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.goal-card__number 크기 28px --font-size-3xl굵기 600행간 1.4 --line-height-3xl글자 #009638 --color-sub-strong아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.team-card 글자 inherit세로 간격 4px --space-3xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.team-card__avatar 배경 #EAEAEE --color-surface-strong반경 50% --radius-circle아래 여백 12px --space-xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.team-card__name 크기 16px --font-size-md굵기 700행간 1.7 --line-height-md글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.team-card__role 크기 14px --font-size-xs굵기 500행간 1.6 --line-height-xs글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.team-card__bio 크기 15px --font-size-sm굵기 500행간 1.65 --line-height-sm글자 #5C5C6F --color-text아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.contact-item 글자 #C2410C --color-accent-strong가로 간격 12px --space-xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.contact-item__label 크기 14px --font-size-xs굵기 600행간 1.6 --line-height-xs글자 #6B6B7D --color-text-muted아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.contact-item__value 크기 15px --font-size-sm굵기 600행간 1.65 --line-height-sm글자 #303044 --color-ink아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__author 크기 15px --font-size-sm굵기 500행간 1.5글자 #6B6B7D --color-text-muted가로 간격 8px --space-2xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.post-card__avatar 반경 50% --radius-circle미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.share-bar 글자 #ffffff --color-paper배경 #00B042 --color-sub안쪽 16px 24px --space-sm · --space-md반경 16px --radius-sm가로 간격 24px --space-md세로 간격 12px --space-xs미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.share-bar__text 크기 15px --font-size-sm굵기 600행간 1.65 --line-height-sm글자 #ffffff --color-paper아래 여백 0미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스
.share-bar__link 글자 #ffffff --color-paper반경 50% --radius-circle미리 보기 없음 — 다른 요소와 조합될 때만 의미가 있는 클래스