웹 컨트롤 라이브러리

:root {
  --s-1: 4px;  --s-2: 8px;
  --s-3: 12px; --s-4: 16px;
  --s-5: 24px; --s-6: 32px;
  --r-1: 2px; --r-2: 4px;
  --r-3: 6px; --r-pill: 999px;
  --shadow-1: 0 1px 0 #0001,
                 0 1px 2px #0001;
}

:root {
  --t-1: 90ms;
  --t-2: 160ms;
  --t-3: 240ms;
  --ease: cubic-bezier(.2,.7,.2,1);
}

<button class="btn btn-primary">제출</button>
<button class="btn btn-secondary">취소</button>
<button class="btn btn-ghost">건너뛰기</button>
<button class="btn btn-danger">삭제</button>

<button class="btn btn-primary btn-xs">XS</button>
<button class="btn btn-primary btn-sm">SM</button>
<button class="btn btn-primary">MD</button>
<button class="btn btn-primary btn-lg">LG</button>

<button class="btn btn-primary">
  <svg>...</svg> 새 활동
</button>

<button class="btn btn-primary is-loading">
  제출 중
</button>

<button class="iconbtn bordered" aria-label="편집">
  <svg>...</svg>
</button>

<button class="backbtn">← 뒤로</button>
<button class="backbtn is-icon" aria-label="뒤로">‹</button>

<div class="appbar">
  <button class="appbar-back" aria-label="뒤로">‹</button>
  <span class="appbar-title">방문 상세</span>
</div>

<div class="btngroup">
  <button class="btn btn-sm is-active">하루</button>
  ...
</div>

<div class="splitbtn">
  <button class="btn btn-primary">제출</button>
  <button class="iconbtn">▾</button>
</div>

<div class="field">
  <label class="field-label">
    사번 <span class="req">*</span>
  </label>
  <input class="input is-error" />
  <span class="field-help err">
    형식 오류
  </span>
</div>

<div class="input-wrap">
  <span class="prefix">₩</span>
  <input class="input" />
  <span class="suffix">/월</span>
</div>

<textarea class="input"
          rows="3">...</textarea>

<select class="input select">
  <option>수도권</option>
</select>

<div class="stepper">
  <button>−</button>
  <input value="12" />
  <button>＋</button>
</div>

<div class="combo">
  <div class="combo-input">
    <input /> <span>▾</span>
  </div>
  <div class="combo-list">...</div>
</div>

<div class="taginput">
  <span class="chip">처방 유도
    <span class="x">×</span>
  </span>
  <input />
</div>

<div class="timepick">
  <div class="tp-col">
    <div class="tp-colhead">시</div>
    <div class="tp-list">
      <div class="tp-opt is-selected">2</div>
    </div>
  </div>
</div>

<!-- 모바일: phone-frame + appbar + .datepick.is-full / .timepick.is-full -->

<div class="dropzone">
  <div class="ic-up">↑</div>
  <div class="ttl">파일 드롭</div>
  <div class="sub">...</div>
</div>

<label class="check">
  <input type="checkbox" />
  <span class="box"></span>
  옵션
</label>

<span class="switch">
  <input type="checkbox" checked />
  <span class="track"></span>
</span>

<input type="range"
       class="slider"
       min="0" max="100" />

<div class="segmented">
  <button class="is-active">목록</button>
  <button>카드</button>
</div>

<div class="banner tone-error">
  <div class="ic">✕</div>
  <div>
    <div class="ttl">제목</div>
    <div class="desc">설명</div>
  </div>
</div>

<div class="toast">
  <div class="ic">✓</div>
  <div class="ttl">저장됨</div>
  <span class="x">×</span>
</div>

<span class="tooltip-host">
  <button>...</button>
  <span class="tip">설명</span>
</span>

<div class="progress">
  <div class="bar"
       style="width:64%;"></div>
</div>

<div class="ring"
     style="--pct:64">
  <span>64</span>
</div>

<div class="acc">
  <div class="acc-item is-open">
    <div class="acc-head">...</div>
    <div class="acc-body">...</div>
  </div>
</div>

<div class="empty">
  ... 빈 상태
</div>

<nav class="tabs-under">
  <a class="is-active">전체
    <span class="count">218</span>
  </a>
</nav>

<div class="crumb">
  <a>대시보드</a>
  <span class="sep">/</span>
  <span class="cur">노트</span>
</div>

<div class="pagination">
  <button>‹</button>
  <button class="is-active">2</button>
</div>

<span class="kbd">⌘</span>
<span class="kbd">K</span>

<span class="badge tone-warn">
  <span class="dot"></span>경고
</span>

<span class="avatar">KM
  <span class="status"></span>
</span>

<div class="card-block">
  ... KPI 또는 요약 컨텐츠
</div>

<div class="card-block"
     style="border-left: 3px solid var(--accent);">
  ... 강조 카드
</div>