관리자 공통 컴포넌트

<h2 class="section-tit">현재 작업</h2>
<p class="body-medium font3-txt">색 · 굵기 유틸 : .static2-txt .static4-txt .red-txt .font2-txt .font3-txt .font4-txt / .weight400 ~ .weight700</p>

<div class="btn-list">
    <button type="button" class="square-btn main-btn btn-txt">BTN 01</button>
    <button type="button" class="square-btn sub-btn btn-txt">BTN 02</button>
    <button type="button" class="square-btn line-btn btn-txt">BTN 03</button>
    <button type="button" class="square-btn red-btn btn-txt">BTN 04</button>
    <button type="button" class="square-btn main-btn btn-txt" disabled>Disabled</button>
</div>
<div class="btn-list">
    <a class="square-btn main-btn btn-txt" href="#none"><?= icon('plus', 18) ?>예약 등록</a>
    <a class="square-btn line-btn btn-txt" href="#none"><?= icon('monitor', 18) ?>작업장 모니터</a>
    <a class="square-btn main-btn btn-txt" href="#none"><?= icon('download', 18) ?>종합 CSV</a>
</div>

<a class="txt-btn body-small" href="#none">상세보기<?= icon('external', 16) ?></a>
<div class="btn-list">
    <button type="button" class="ico-btn" aria-label="새로고침"><?= icon('refresh') ?></button>
    <button type="button" class="ico-btn" aria-label="메뉴 열기"><?= icon('menu') ?></button>
    <button type="button" class="ico-btn" aria-label="닫기"><?= icon('close') ?></button>
</div>

<div class="btn-list">
    <label class="sr-only" for="cpKeyword">검색어</label>
    <input class="custom-input body-medium" type="text" id="cpKeyword" name="keyword" placeholder="차량번호 · 고객명" style="width: 240px;">
    <label class="sr-only" for="cpStore">점포 선택</label>
    <select class="custom-select auto body-medium" id="cpStore" name="store">
        <option value="">전체 점포</option>
        <option value="pangyo">카앤쿡 판교점</option>
    </select>
    <input class="custom-input body-medium" type="text" name="disabled_sample" value="비활성" aria-label="비활성 예시" disabled style="width: 160px;">
</div>

<div class="btn-list">
    <div class="date-nav">
        <button type="button" class="date-nav-btn" aria-label="이전 날"><?= icon('chevron-left', 20) ?></button>
        <button type="button" class="date-nav-today body-medium" aria-pressed="true">오늘</button>
        <button type="button" class="date-nav-btn" aria-label="다음 날"><?= icon('chevron-right', 20) ?></button>
    </div>
    <label class="date-field body-medium" data-date-field>
        <span data-date-text>2026-10-07</span><?= icon('calendar', 18) ?>
        <input type="date" value="2026-10-07" aria-label="조회 날짜">
    </label>
    <label class="date-field body-medium" data-date-field>
        <span data-date-text>2026-10</span><?= icon('calendar', 18) ?>
        <input type="month" value="2026-10" aria-label="조회 월">
    </label>
    <button type="button" class="date-field body-medium">2026-10-07 ~ 2026-10-14<?= icon('calendar', 18) ?></button>
</div>

<div class="btn-list">
    <span class="badge blue badge-txt">회원</span>
    <span class="badge badge-txt">비회원</span>
    <span class="badge line badge-txt">점장</span>
    <span class="count-badge badge-txt">2<span class="sr-only">건</span></span>
</div>

<fieldset class="input-item">
    <legend class="input-label req body-small">프로그램<span class="sr-only">(필수)</span></legend>
    <div class="choice-list">
        <label class="choice-chip"><input type="radio" name="cp_program" value="steam" checked><span class="btn-txt">스팀 손세차</span></label>
        <label class="choice-chip"><input type="radio" name="cp_program" value="family"><span class="btn-txt">패밀리 세이프</span></label>
        <label class="choice-chip"><input type="radio" name="cp_program" value="app" disabled><span class="btn-txt">비활성</span></label>
    </div>
</fieldset>
<fieldset class="input-item">
    <legend class="input-label body-small">세부 구성</legend>
    <div class="select-card-list">
        <label class="select-card">
            <input class="custom-radio" type="radio" name="cp_variant" value="daily" checked>
            <span class="select-card-txt"><span class="select-card-tit card-tit">데일리</span><span class="select-card-desc body-medium">내·외부 스팀 손세차 · 예상 소요 40~60분</span></span>
        </label>
        <!-- 반복 -->
        <label class="select-card"><input class="custom-radio" type="radio" name="cp_variant" value="signature"><span class="select-card-txt"><span class="select-card-tit card-tit">시그니처</span><span class="select-card-desc body-medium">왁스 · 가죽 보호제 · 센터페시아 위생관리 포함</span></span></label>
    </div>
</fieldset>
<fieldset class="input-item">
    <legend class="input-label body-small">추가 옵션 (복수 선택)</legend>
    <div class="check-card-list">
        <label class="check-card">
            <input class="custom-checkbox" type="checkbox" name="cp_option[]" value="engine">
            <span class="check-card-tit card-tit">엔진룸 클리닝·코팅</span>
            <span class="check-card-price body-medium">+50,000원</span>
        </label>
        <!-- 반복 -->
        <label class="check-card"><input class="custom-checkbox" type="checkbox" name="cp_option[]" value="sealant" checked><span class="check-card-tit card-tit">바디 실란트 왁스</span><span class="check-card-price body-medium">+20,000원</span></label>
        <label class="check-card"><input class="custom-checkbox" type="checkbox" name="cp_option[]" value="center" disabled><span class="check-card-tit card-tit">센터페시아 위생관리 (포함됨)</span><span class="check-card-price body-medium">+30,000원</span></label>
    </div>
</fieldset>

<div class="input-item" style="max-width: 280px;">
    <span class="input-label req body-small" id="cpTimeLabel">도착 시간<span class="sr-only">(필수)</span></span>
    <div class="dropdown" data-dropdown>
        <button type="button" class="dropdown-btn body-medium" id="cpTimeBtn" aria-haspopup="listbox" aria-expanded="false" aria-controls="cpTimeList" aria-labelledby="cpTimeLabel cpTimeBtn"><span data-dropdown-text>시간 선택</span></button>
        <ul class="dropdown-list" id="cpTimeList" role="listbox" aria-labelledby="cpTimeLabel" hidden>
            <li class="dropdown-option body-medium" id="cpTime0930" role="option" aria-selected="false" data-value="09:30" data-label="09:30"><span>09:30</span><span>예약 1/2</span></li>
            <li class="dropdown-option body-medium" id="cpTime1000" role="option" aria-selected="false" aria-disabled="true" data-value="10:00" data-label="10:00"><span>10:00</span><span>수용량 마감</span></li>
            <li class="dropdown-option body-medium" id="cpTime1100" role="option" aria-selected="false" data-value="11:00" data-label="11:00"><span>11:00</span><span>예약 1/2</span></li>
        </ul>
        <input type="hidden" name="cp_time" value="">
    </div>
</div>

<div class="tab-list" role="tablist" aria-label="작업 상태">
    <button type="button" class="tab-btn btn-txt" role="tab" data-value="all" aria-selected="true" tabindex="0">전체<span class="tab-count badge-txt">21</span></button>
    <button type="button" class="tab-btn btn-txt" role="tab" data-value="arrive" aria-selected="false" tabindex="-1">입고 대기<span class="tab-count badge-txt">9</span></button>
    <button type="button" class="tab-btn btn-txt" role="tab" data-value="done" aria-selected="false" tabindex="-1">완료<span class="tab-count badge-txt">8</span></button>
</div>
<div class="toggle-list" role="group" aria-label="예약 출처" data-toggle-group>
    <button type="button" class="toggle-btn body-medium" data-value="" aria-pressed="true">전체</button>
    <button type="button" class="toggle-btn body-medium" data-value="app" aria-pressed="false">앱</button>
    <button type="button" class="toggle-btn body-medium" data-value="naver" aria-pressed="false">네이버</button>
</div>

<span class="help-wrap">
    <button type="button" class="help-btn body-medium" aria-label="하루 예약 안내" aria-describedby="cpHelpTip">?</button>
    <span class="help-tip body-small" id="cpHelpTip" role="tooltip">30분 단위는 차량 도착 예약 간격입니다.</span>
</span>
<p class="notice-bar body-small">수용량 1대 적용 중 · 09:00 시간대가 기존 예약 때문에 초과 상태입니다.</p>
<div class="search-field" style="max-width: 260px;">
    <?= icon('search', 18) ?>
    <label class="sr-only" for="cpKeyword2">예약 검색</label>
    <input class="custom-input body-medium" type="search" id="cpKeyword2" name="cp_keyword" placeholder="차량번호 · 고객명 · 연락처">
</div>
<div class="progress-bar" role="progressbar" aria-label="공정 진행률" aria-valuemin="0" aria-valuemax="100" aria-valuenow="64"><span style="--progress: 64%;"></span></div>
<div class="progress-bar pause" role="progressbar" aria-label="공정 진행률 (일시정지)" aria-valuemin="0" aria-valuemax="100" aria-valuenow="50"><span style="--progress: 50%;"></span></div>
<dl class="info-list body-medium">
    <dt>고객</dt><dd>임채원</dd>
    <dt>결제</dt><dd><span class="badge orange badge-txt">추가 결제 필요</span><span>네이버 선결제</span></dd>
    <dt>요청</dt><dd><span class="ellipsis">긴 문장은 .ellipsis 로 한 줄 말줄임</span></dd>
</dl>

<div class="page-top">
    <div class="page-time">
        <time class="page-clock hero" data-clock>14:12:02</time>
        <div class="page-date">
            <p class="card-tit">2026년 10월 7일 수요일</p>
            <p class="page-date-desc body-large">오늘 · 판교점 영업 09:00-19:00</p>
        </div>
    </div>
    <div class="page-tool">
        <a class="square-btn main-btn btn-txt" href="#none"><?= icon('plus', 18) ?>예약 등록</a>
    </div>
</div>

<section class="section-box" aria-labelledby="cpBoxDemoTit">
    <div class="section-head">
        <div class="tit-wrap">
            <h2 class="section-tit" id="cpBoxDemoTit">현재 작업</h2>
            <p class="tit-desc card-desc">진행 중 4대 중 2대 표시</p>
        </div>
        <a class="txt-btn body-small" href="#none">상세보기<?= icon('external', 16) ?></a>
    </div>
    <p class="body-medium">박스 내용</p>
</section>

<ul class="stat-list col5">
    <li class="stat-card">
        <p class="stat-label body-medium">결제매출</p>
        <p class="stat-num hero">190,000<span class="stat-unit body-medium">원</span></p>
        <p class="stat-desc body-small">전월 대비 + 10%</p>
    </li>
    <!-- 반복 -->
    <li class="stat-card"><p class="stat-label body-medium">완료 대수</p><p class="stat-num hero">2<span class="stat-unit body-medium">대</span></p><p class="stat-desc body-small">전월 대비 + 10%</p></li>
    <li class="stat-card"><p class="stat-label body-medium">대당 시공금액</p><p class="stat-num hero">80,000<span class="stat-unit body-medium">원</span></p><p class="stat-desc body-small">전월 대비 + 10%</p></li>
    <li class="stat-card"><p class="stat-label body-medium">신규 가입</p><p class="stat-num hero">0<span class="stat-unit body-medium">명</span></p><p class="stat-desc body-small">전월 대비 + 10%</p></li>
    <li class="stat-card"><p class="stat-label body-medium">예약 증원</p><p class="stat-num hero">0.7<span class="stat-unit body-medium">%</span></p><p class="stat-desc body-small">전월 대비 + 10%</p></li>
</ul>

<ul class="stat-list col3">
    <li class="stat-card"><p class="stat-label body-medium">확정 인건비</p><p class="stat-num hero">850,000<span class="stat-unit body-medium">원</span></p></li>
    <li class="stat-card"><p class="stat-label body-medium">같은 달 결제매출</p><p class="stat-num hero">4,500,000<span class="stat-unit body-medium">원</span></p></li>
    <li class="stat-card"><p class="stat-label body-medium">매출 대비 인건비율</p><p class="stat-num hero">18.9<span class="stat-unit body-medium">%</span></p></li>
</ul>

<div class="table-wrap">
    <table class="data-table body-large">
        <caption class="sr-only">예약 목록</caption>
        <thead>
            <tr class="card-tit">
                <th scope="col">시간</th>
                <th scope="col">차량</th>
                <th scope="col">고객</th>
                <th scope="col">프로그램</th>
                <th scope="col">예약 경로</th>
                <th scope="col">작업 상태</th>
                <th scope="col">결제 상태 · 경로</th>
                <th scope="col">금액</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td rowspan="2">09:00<span class="cell-sub body-small">2/2</span></td>
                <td>12가 3456<span class="cell-sub body-small">쏘나타 DN8</span></td>
                <td><span class="cell-flex">김민준<span class="badge blue badge-txt">회원</span></span><span class="cell-sub body-small">010-0000-0000</span></td>
                <td>시그니처<span class="cell-sub body-small">스팀 손세차</span></td>
                <td>앱</td>
                <td><span class="badge badge-txt">출고 완료</span></td>
                <td><span class="badge green badge-txt">결제 완료</span><span class="cell-sub body-small">앱 승인</span></td>
                <td>100,000원</td>
            </tr>
            <tr class="group-row">
                <td>245더1180<span class="cell-sub body-small">투싼 NX4 · M</span></td>
                <td><span class="cell-flex">이서연<span class="badge badge-txt">비회원</span></span><span class="cell-sub body-small">010-0000-0000</span></td>
                <td>데일리<span class="cell-sub body-small">스팀 손세차</span></td>
                <td>네이버</td>
                <td><span class="badge badge-txt">출고 완료</span></td>
                <td><span class="badge red badge-txt">출고 후 미결제</span><span class="cell-sub body-small">현장 결제</span></td>
                <td>70,000원</td>
            </tr>
            <tr>
                <td rowspan="2">10:00<span class="cell-sub body-small">1/2</span></td>
                <td>12가 3456<span class="cell-sub body-small">쏘나타 DN8</span></td>
                <td><span class="cell-flex">김민준<span class="badge badge-txt">비회원</span></span><span class="cell-sub body-small">010-0000-0000</span></td>
                <td>시그니처<span class="cell-sub body-small">스팀 손세차</span></td>
                <td>로드</td>
                <td><span class="badge badge-txt">출고 완료</span></td>
                <td><span class="badge badge-txt">회원권 차감</span><span class="cell-sub body-small">앱 승인</span></td>
                <td>회원권 1회<span class="cell-sub body-small">회차 차감</span></td>
            </tr>
            <tr class="group-row">
                <td class="empty-slot" colspan="7"><span class="body-medium">빈 자리</span></td>
            </tr>
        </tbody>
    </table>
</div>

<div class="empty-box">
    <span class="empty-ico"><?= icon('car', 22) ?></span>
    <p class="empty-desc body-medium">작업 / 대기 중인 차량이 없습니다</p>
</div>