공통 컴포넌트

글자 크기

<p class="section-tit">섹션 제목 크기</p>
<p class="body-medium gray8-txt">색·굵기 유틸: .static1-txt .gray6-txt .gray8-txt .red-txt / .weight300 ~ .weight600</p>

컬러 토큰

square-btn 색상

<div class="btn-list">
    <a class="square-btn main-btn" href="#none">프로그램 더보기<svg>…</svg></a>
    <a class="square-btn dark-btn" href="#none">자세히 보기<svg>…</svg></a>
    <button type="button" class="square-btn sub-btn">서브 버튼</button>
    <button type="button" class="square-btn black-line-btn">검정 라인</button>
    <button type="button" class="square-btn line-btn">회색 라인</button>
    <button type="button" class="square-btn main-btn" disabled>비활성</button>
</div>

<a class="square-btn white-line-btn" href="#none">예약하기<svg>…</svg></a>

크기 · 전체폭 · 라운드

<div class="btn-list">
    <button type="button" class="square-btn small main-btn">small</button>
    <button type="button" class="square-btn main-btn">기본</button>
    <button type="button" class="square-btn large main-btn">large</button>
    <button type="button" class="round-btn">round-btn</button>
</div>
<button type="button" class="square-btn large full main-btn">예약 확인하기</button>

txt-btn · ico-btn

<a class="txt-btn" href="#none">자세히 보기<span class="sr-only"> - G80 리뉴 프로그램</span><svg>…</svg></a>

<div class="btn-list">
    <button type="button" class="ico-btn line-btn" aria-label="이전 사례" disabled><svg>…</svg></button>
    <button type="button" class="ico-btn line-btn" aria-label="다음 사례"><svg>…</svg></button>
</div>

기본 (밑줄형)

<div data-tab>
    <div class="tab-list" role="tablist" aria-label="카앤쿡만의 기준">
        <button type="button" class="tab" role="tab" id="whyTab1" aria-selected="false" aria-controls="whyPanel1" tabindex="-1">개인 맞춤관리</button>
        <button type="button" class="tab" role="tab" id="whyTab2" aria-selected="false" aria-controls="whyPanel2" tabindex="-1">혜택 통합관리</button>
        <button type="button" class="tab active" role="tab" id="whyTab3" aria-selected="true" aria-controls="whyPanel3">투명한 작업과정</button>
        <button type="button" class="tab" role="tab" id="whyTab4" aria-selected="false" aria-controls="whyPanel4" tabindex="-1">일관된 서비스</button>
    </div>
    <div class="tab-content" role="tabpanel" id="whyPanel1" aria-labelledby="whyTab1" tabindex="0"><p class="body-medium">개인 맞춤관리 패널</p></div>
    <div class="tab-content" role="tabpanel" id="whyPanel2" aria-labelledby="whyTab2" tabindex="0"><p class="body-medium">혜택 통합관리 패널</p></div>
    <div class="tab-content active" role="tabpanel" id="whyPanel3" aria-labelledby="whyTab3" tabindex="0"><p class="body-medium">작업 과정을 사진으로 남기고, 완료된 결과까지 투명하게 보여드립니다.</p></div>
    <div class="tab-content" role="tabpanel" id="whyPanel4" aria-labelledby="whyTab4" tabindex="0"><p class="body-medium">일관된 서비스 패널</p></div>
</div>

알약 탭 .pill-tab

<div data-tab>
    <div class="pill-tab-wrap">
        <div class="pill-tab-list" role="tablist" aria-label="차량 크기">
            <button type="button" class="pill-tab active" role="tab" id="sizeTab1" aria-selected="true" aria-controls="sizePanel1">소형</button>
            <button type="button" class="pill-tab" role="tab" id="sizeTab2" aria-selected="false" aria-controls="sizePanel2" tabindex="-1">중형</button>
            <button type="button" class="pill-tab" role="tab" id="sizeTab3" aria-selected="false" aria-controls="sizePanel3" tabindex="-1">대형 · SUV</button>
        </div>
    </div>
    <div class="tab-content active" role="tabpanel" id="sizePanel1" aria-labelledby="sizeTab1" tabindex="0"><p class="body-medium">소형 패널</p></div>
    <div class="tab-content" role="tabpanel" id="sizePanel2" aria-labelledby="sizeTab2" tabindex="0"><p class="body-medium">중형 패널</p></div>
    <div class="tab-content" role="tabpanel" id="sizePanel3" aria-labelledby="sizeTab3" tabindex="0"><p class="body-medium">대형 · SUV 패널</p></div>
</div>

<div class="input-item">
    <label class="input-item-label req" for="cpName">이름<span class="sr-only">(필수)</span></label>
    <input class="custom-input" type="text" id="cpName" name="name" autocomplete="name" required>
</div>
<div class="input-item">
    <label class="input-item-label" for="cpPhone">연락처</label>
    <input class="custom-input" type="tel" id="cpPhone" name="phone" inputmode="numeric" placeholder="010-0000-0000" aria-describedby="cpPhoneInfo">
    <p class="info-msg" id="cpPhoneInfo">예약 안내 문자가 발송됩니다.</p>
</div>
<div class="input-item">
    <label class="input-item-label" for="cpCar">차량번호</label>
    <input class="custom-input error" type="text" id="cpCar" name="car_number" value="123가 45" aria-invalid="true" aria-describedby="cpCarError">
    <p class="error-msg" id="cpCarError">차량번호 형식을 확인해 주세요.</p>
</div>
<div class="input-item">
    <label class="input-item-label" for="cpDisabled">비활성</label>
    <input class="custom-input" type="text" id="cpDisabled" name="disabled_sample" value="수정할 수 없음" disabled>
</div>

<div class="input-item">
    <label class="input-item-label" for="cpStore">지점 선택</label>
    <select class="custom-select" id="cpStore" name="store">
        <option value="">지점을 선택하세요</option>
        <option value="dongtan">카앤쿡 동탄점</option>
        <option value="changwon">카앤쿡 창원점</option>
    </select>
</div>
<div class="input-item">
    <label class="input-item-label" for="cpAuth">휴대폰 인증</label>
    <div class="input-wrap">
        <input class="custom-input" type="text" id="cpAuth" name="auth_code" inputmode="numeric" autocomplete="one-time-code">
        <button type="button" class="square-btn dark-btn">인증요청</button>
    </div>
</div>
<div class="input-item">
    <label class="input-item-label" for="cpMsg">문의 내용</label>
    <textarea class="custom-textarea" id="cpMsg" name="message"></textarea>
</div>
<form class="input-item" role="search" action="" method="get">
    <label class="sr-only" for="cpSearch">매장 검색</label>
    <input class="custom-input search-input" type="search" id="cpSearch" name="keyword" placeholder="지역 또는 매장명">
</form>

checkbox · radio · radio-chip · switch

<fieldset>
    <legend class="input-item-label">관심 프로그램</legend>
    <div class="check-list">
        <div class="check-item"><input type="checkbox" class="custom-checkbox" id="cpProgram1" name="program[]" value="daily" checked><label for="cpProgram1">데일리</label></div>
        <div class="check-item"><input type="checkbox" class="custom-checkbox" id="cpProgram2" name="program[]" value="renew"><label for="cpProgram2">리뉴</label></div>
        <div class="check-item"><input type="checkbox" class="custom-checkbox" id="cpProgram3" name="program[]" value="family" disabled><label for="cpProgram3">패밀리세이프 (비활성)</label></div>
    </div>
</fieldset>

<fieldset>
    <legend class="input-item-label">차량 크기</legend>
    <div class="radio-list">
        <div class="check-item"><input type="radio" class="custom-radio" id="cpSize1" name="car_size" value="s" checked><label for="cpSize1">소형</label></div>
        <div class="check-item"><input type="radio" class="custom-radio" id="cpSize2" name="car_size" value="m"><label for="cpSize2">중형</label></div>
        <div class="check-item"><input type="radio" class="custom-radio" id="cpSize3" name="car_size" value="l"><label for="cpSize3">대형 · SUV</label></div>
    </div>
</fieldset>

<fieldset>
    <legend class="input-item-label">방문 시간</legend>
    <div class="btn-list">
        <div class="radio-chip"><input type="radio" id="cpTime1" name="visit_time" value="10" checked><label for="cpTime1">10:00</label></div>
        <div class="radio-chip"><input type="radio" id="cpTime2" name="visit_time" value="14"><label for="cpTime2">14:00</label></div>
        <div class="radio-chip"><input type="radio" id="cpTime3" name="visit_time" value="18" disabled><label for="cpTime3">18:00</label></div>
    </div>
</fieldset>

<div class="check-item"><input type="checkbox" class="custom-switch" role="switch" id="cpNotice" name="notice_agree" checked><label for="cpNotice">작업 알림 받기</label></div>

가로형 .input-item.row (768 이하 세로)

<div class="input-item row">
    <label class="input-item-label" for="cpEmail">이메일</label>
    <div class="input-item-box">
        <input class="custom-input" type="email" id="cpEmail" name="email" autocomplete="email">
        <p class="info-msg">답변은 이메일로 발송됩니다.</p>
    </div>
</div>

어두운 배경 .hero-tit-wrap.white

<div class="hero-tit-wrap white">
    <span class="eng-tit">Care your car</span>
    <p class="hero-tit">당신의 차를 위한<br>가장 세심한 케어</p>
    <p class="body-large">세차부터 특수 시공까지,<br>내 차에 필요한 관리를 하나의 경험으로 제공합니다.</p>
    <div class="btn-list">
        <a class="square-btn white-line-btn" href="#none">예약하기<svg>…</svg></a>
    </div>
</div>

가운데 정렬 .hero-tit-wrap.center

<div class="hero-tit-wrap center">
    <span class="eng-tit static1-txt">Program</span>
    <p class="hero-tit">내 차에 맞는 케어</p>
    <p class="body-large">차량 상태와 생활 패턴에 맞춰 프로그램을 선택하세요.</p>
</div>

우측 버튼

<div class="section-tit-wrap">
    <div class="txt-wrap">
        <span class="eng-tit">Car care program</span>
        <h3 class="section-tit">내 차에 맞는 케어</h3>
    </div>
    <div class="btn-list">
        <a class="square-btn small main-btn" href="#none">프로그램 더보기<svg>…</svg></a>
    </div>
</div>

우측 슬라이드 화살표

<div class="section-tit-wrap">
    <div class="txt-wrap">
        <span class="eng-tit">Before &amp; after</span>
        <h3 class="section-tit">시공사례로 확인하는 차이</h3>
    </div>
    <div class="btn-list">
        <button type="button" class="ico-btn line-btn" aria-label="이전 사례" disabled><svg>…</svg></button>
        <button type="button" class="ico-btn line-btn" aria-label="다음 사례"><svg>…</svg></button>
    </div>
</div>

가운데 정렬 .section-tit-wrap.center

<div class="section-tit-wrap center">
    <div class="txt-wrap">
        <span class="eng-tit">Space</span>
        <h3 class="section-tit">전국의 카앤쿡 매장</h3>
        <p class="body-medium">가까운 매장에서 카앤쿡의 케어를 경험하세요.</p>
    </div>
</div>

가로 헤더형 (가격표)

<div class="table-wrap scroll" tabindex="0" role="region" aria-label="차량 크기별 프로그램 가격 (가로 스크롤)">
    <table class="custom-table">
        <caption>차량 크기별 프로그램 가격 (단위: 원, 샘플)</caption>
        <thead>
            <tr>
                <th scope="col">프로그램</th>
                <th scope="col">소형</th>
                <th scope="col">중형</th>
                <th scope="col">대형 · SUV</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <th scope="row">데일리</th>
                <td>00,000</td>
                <td>00,000</td>
                <td>00,000</td>
            </tr>
            <!-- 행 반복 -->
        </tbody>
    </table>
</div>

세로 헤더형 .custom-table.type-row (정보표)

<table class="custom-table type-row">
    <caption class="sr-only">카앤쿡 동탄점 매장 정보</caption>
    <tbody>
        <tr>
            <th scope="row">주소</th>
            <td>경기도 화성시 동탄구 지산1길 25-5 1층</td>
        </tr>
        <tr>
            <th scope="row">영업시간</th>
            <td>09:00 - 20:00</td>
        </tr>
    </tbody>
</table>

badge

<div class="badge-list">
    <span class="badge">기본</span>
    <span class="badge main">BEST</span>
    <span class="badge confirm">추천</span>
    <span class="badge dark">NEW</span>
    <span class="badge line">시그니처</span>
    <span class="badge cancel">마감임박</span>
    <span class="badge done">종료</span>
    <span class="badge confirm round">라운드</span>
</div>

텍스트 상태 .state-txt

<div class="btn-list">
    <span class="state-txt open">영업중</span>
    <span class="state-txt close">영업종료</span>
</div>