/* ==========================================
   COMMON — 공통 CSS (베이스 · 타이포그래피 · 컴포넌트)
   ========================================== */

/* ==========================================
   BASE — 기본 설정
   ========================================== */

*, *::before, *::after {
  box-sizing: border-box;
}

* {
  margin: 0;
  padding: 0;
}

body {
  font-family: var(--font-family-base);
  font-size:   var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  color:       var(--neutral-950);
  background-color: #ffffff;
}

a {
  color: inherit;
  text-decoration: none;
}

button {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0;
  font: inherit;
}

/* Focus Visible — 키보드 탭 이동 시 포커스 표시 */
a:focus-visible,
button:focus-visible,
.btn:focus-visible,
.btn-icon:focus-visible,
.custom-select__trigger:focus-visible,
.custom-select__option:focus-visible,
.pg-icon:focus-visible,
.pg-page:focus-visible,
.tab-volume__item:focus-visible {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

.radio input[type="radio"]:focus-visible + .radio__mark,
.checkbox input[type="checkbox"]:focus-visible + .checkbox__mark {
  outline: 2px solid var(--brand-blue);
  outline-offset: 2px;
}

ul, ol, li {
  list-style: none;
}

.wrapper {
  width: 1440px;
  box-sizing: border-box;
  padding: 0 80px;
  margin: 0 auto;
}


/* ==========================================
   TYPOGRAPHY — 타이포그래피 클래스
   사용 예: <h1 class="text-h1">제목</h1>

   [Heading]
   .text-h1      | 32px Bold      | 페이지 대제목, 히어로 섹션
   .text-h1-semi | 30px Semibold  | H1보다 약한 강조 대제목
   .text-h2      | 24px Bold      | 섹션 제목
   .text-h3      | 20px Bold      | 카드 제목, 서브 섹션
   .text-h4      | 20px Semibold  | H3보다 약한 강조
   .text-h5      | 16px Bold      | 소제목, 레이블

   [Body]
   .text-b1-md   | 16px Medium    | 본문 강조
   .text-b1      | 16px Regular   | 일반 본문
   .text-b2-bold | 14px Semibold  | 보조 텍스트 강조
   .text-b2      | 14px Regular   | 보조 텍스트, 설명

   [Caption]
   .text-cap-bold | 12px Medium   | 태그, 레이블
   .text-cap      | 12px Regular  | 날짜, 부가정보
   ========================================== */

.text-h1 {
  font-family: var(--font-family-base);
  font-size:   var(--fs-3xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}
.text-h1-semi {
  font-family: var(--font-family-base);
  font-size:   var(--fs-2xl);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
.text-h2 {
  font-family: var(--font-family-base);
  font-size:   var(--fs-xl);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}
.text-h3 {
  font-family: var(--font-family-base);
  font-size:   var(--fs-lg);
  font-weight: var(--fw-bold);
  line-height: var(--lh-normal);
}
.text-h4 {
  font-family: var(--font-family-base);
  font-size:   var(--fs-lg);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
.text-h5 {
  font-family: var(--font-family-base);
  font-size:   var(--fs-md);
  font-weight: var(--fw-bold);
  line-height: var(--lh-relaxed);
}
.text-b1-md {
  font-family: var(--font-family-base);
  font-size:   var(--fs-md);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}
.text-b1 {
  font-family: var(--font-family-base);
  font-size:   var(--fs-md);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
}
.text-b2-bold {
  font-family: var(--font-family-base);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
}
.text-b2 {
  font-family: var(--font-family-base);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
}
.text-cap-bold {
  font-family: var(--font-family-base);
  font-size:   var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-tight);
}
.text-cap {
  font-family: var(--font-family-base);
  font-size:   var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
}


/* ==========================================
   BUTTON — 버튼
   ex: <button class="btn btn-m btn-blue">확인</button>

   [Size]
   .btn-s | 5px 12px  / 12px
   .btn-m | 10px 20px / 14px
   .btn-l | 16px 32px / 16px / 부모 너비에 맞춤

   [Color]
   .btn-blue         | 파란색 solid
   .btn-gray-light   | 밝은 회색 solid
   .btn-gray-dark    | 진한 회색 solid
   .btn-lightblue    | 연파란 solid
   .btn-outline-blue | 파란색 outline
   .btn-outline-gray | 회색 outline
   ========================================== */

.btn {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  border: none;
  cursor: pointer;
  font-family: var(--font-family-base);
  text-align: center;
  transition: all var(--duration-base) ease-in-out;
  text-decoration: none;
  white-space: nowrap;
  flex-shrink: 0;
}

/* Size */
.btn-s {
  padding:       5px 12px;
  font-size:     var(--fs-xs);
  font-weight:   var(--fw-medium);
  line-height:   18px;
  border-radius: var(--radius-s);
}
.btn-m {
  padding:       10px 20px;
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-semibold);
  line-height:   20px;
  border-radius: var(--radius-m);
}
.btn-l {
  padding:       16px 32px;
  font-size:     var(--fs-md);
  font-weight:   var(--fw-bold);
  line-height:   24px;
  border-radius: var(--radius-l);
  align-self:    stretch;
}

/* Color */
.btn-blue {
  background-color: var(--brand-blue);
  color: #ffffff;
}
.btn-blue:hover {
  background-color: #004ab8;
}
.btn-gray-light {
  background-color: var(--neutral-100);
  color: var(--neutral-950);
}
.btn-gray-light:hover {
  background-color: var(--neutral-200);
}
.btn-gray-dark {
  background-color: var(--neutral-300);
  color: var(--neutral-950);
}
.btn-gray-dark:hover {
  background-color: var(--neutral-400);
}
.btn-lightblue {
  background-color: var(--brand-light-blue);
  color: var(--brand-blue);
}
.btn-lightblue:hover {
  background-color: #cce0ff;
}
.btn-outline-blue {
  background-color: #ffffff;
  outline: 1px solid var(--brand-blue);
  outline-offset: -1px;
  color: var(--brand-blue);
}
.btn-outline-blue:hover {
  background-color: var(--brand-light-blue);
}
.btn-outline-gray {
  background-color: #ffffff;
  outline: 1px solid var(--neutral-300);
  outline-offset: -1px;
  color: var(--neutral-900);
}
.btn-outline-gray:hover {
  background-color: var(--neutral-50);
  outline: 1px solid var(--neutral-400);
}


/* ==========================================
   BUTTON ICON — 소형 아이콘 버튼
   사용 예:
   <button class="btn-icon">
     <span class="icon icon-s"><img src="icon.svg" /></span>
     <span class="btn-icon__text">텍스트</span>
   </button>
   ========================================== */

.btn-icon {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  gap: 4px;
  height: 28px;
  padding: 4px 6px;
  border-radius: var(--radius-s);
  border: 1px solid var(--neutral-300);
  background: #ffffff;
  cursor: pointer;
  color: var(--neutral-800);
  font-family: var(--font-family-base);
  font-size: var(--fs-xs);
  font-weight: var(--fw-medium);
  line-height: var(--lh-relaxed);
}
.btn-icon__text {
  display: inline-flex;
  align-items: center;
}
.btn-icon img {
  width: 16px;
}


/* ==========================================
   BADGE — 배지
   사용 예: <span class="badge badge-m badge-blue">NEW</span>

   [Size]
   .badge-s | 2px 4px / 12px
   .badge-m | 4px 6px / 14px

   [Color]
   .badge-blue         | 파란색
   .badge-lightblue    | 연파란색
   .badge-outline-gray | 회색 outline
   .badge-orange       | 주황색
   .badge-gray         | 회색
   .badge-green        | 초록색
   ========================================== */

.badge {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: var(--font-family-base);
  font-weight: var(--fw-semibold);      
  text-align: center;
}

/* Size */
.badge-s {
  padding:     2px 4px;
  font-size:   var(--fs-xs);
  border-radius: var(--radius-s);
  line-height: 16px;
}
.badge-m {
  padding:     4px 6px;
  font-size:   var(--fs-sm);
  border-radius: var(--radius-m);
  line-height: 18px;
}

/* Color */
.badge-blue {
  background-color: var(--brand-blue);
  color: #ffffff;
}
.badge-lightblue {
  background-color: var(--brand-light-blue);
  color: var(--brand-blue);
}
.badge-outline-gray {
  background-color: #ffffff;
  outline: 1px solid var(--neutral-300);
  outline-offset: -1px;
  color: var(--neutral-700);
}
.badge-orange {
  background-color: var(--brand-orange);
  color: #ffffff;
}
.badge-gray {
  background-color: var(--neutral-300);
  color: var(--neutral-700);
}
.badge-green {
  background-color: #e8fff2;
  color: var(--brand-green);
}


/* ==========================================
   TOOLTIP — 툴팁
   사용 예:
   <div class="tooltip-wrap">
     <button class="tooltip-trigger tooltip-trigger-blue">?</button>
     <div class="tooltip-box">툴팁 내용</div>
   </div>

   [Color]
   .tooltip-trigger-blue  | 파란색
   .tooltip-trigger-green | 초록색
   ========================================== */

.tooltip-wrap {
  position: relative;
  display: inline-flex;
}
.tooltip-trigger {
  display: inline-flex;
  justify-content: center;
  align-items: center;
  width:       20px;
  height:      20px;
  padding:     1px 2px;
  border-radius: var(--radius-full);
  font-family: var(--font-family-base);
  font-size:   13px;
  font-weight: var(--fw-semibold);
  color: #ffffff;
  border: none;
  cursor: pointer;
  flex-shrink: 0;
}
.tooltip-trigger-blue  { background-color: var(--brand-blue); }
.tooltip-trigger-green { background-color: var(--brand-green); }

.tooltip-box {
  display: none;
  position: absolute;
  bottom: calc(100% + 6px);
  left: 50%;
  transform: translateX(-50%);
  background-color: var(--neutral-900);
  color: #ffffff;
  font-size:   var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-relaxed);
  padding: 6px 10px;
  border-radius: var(--radius-m);
  white-space: nowrap;
  z-index: 100;
  pointer-events: none;
}
.tooltip-wrap:hover .tooltip-box {
  display: block;
}


/* ==========================================
   INPUT — 입력 필드
   사용 예: <input class="input" type="text" placeholder="입력하세요" />
            <input class="input input-lg" type="text" />

   [Size]
   .input    | height 40px | 회원가입 등 일반 폼
   .input-lg | height 50px | 로그인 등 강조 폼

   [State]
   .input--focus | 포커스 (파란 배경)
   .input--error | 오류 상태 (주황 테두리)
   ========================================== */

.input {
  height:        40px;
  width:         100%;
  border:        1px solid var(--neutral-300);
  border-radius: var(--radius-m);
  padding:       0 10px;
  font-family:   var(--font-family-base);
  font-size:     var(--fs-sm);
  font-weight:   var(--fw-medium);
  line-height:   var(--lh-tight);
  color:         var(--neutral-950);
  background-color: #ffffff;
  outline: none;
  transition: border-color var(--duration-base), background-color var(--duration-base);
}
.input::placeholder {
  color: var(--neutral-400);
}
.input-lg {
  height: 50px;
  font-size: var(--fs-sm);
  line-height: var(--lh-normal);
}
.input:focus,
.input--focus {
  background-color: var(--brand-light-blue);
  border-color: var(--neutral-300);
}
.input--error {
  border-color: var(--brand-orange);
}


/* ==========================================
   SELECT — 커스텀 셀렉트박스
   사용 예:
   <div class="custom-select">
     <button type="button" class="custom-select__trigger"><span>전체</span></button>
     <ul class="custom-select__options">
       <li class="custom-select__option is-selected">전체</li>
       <li class="custom-select__option">옵션 1</li>
     </ul>
   </div>

   [Size]
   .custom-select      | max-width 300px (기본)
   .custom-select--sm  | width 150px (소)

   * 화살표: ./img/arrow_down.svg 파일 사용 (::after 가상요소)
   ========================================== */

.custom-select {
  position: relative;
  display: inline-block;
  width: 100%;
  max-width: 300px;
}
.custom-select--sm {
  width: 150px;
  max-width: 150px;
}
.custom-select__trigger {
  width: 100%;
  height: 40px;
  padding: 0 12px;
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-m);
  background-color: #ffffff;
  font-family: var(--font-family-base);
  font-size: var(--fs-sm);
  color: var(--neutral-950);
  text-align: left;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: space-between;
  transition: border-color var(--duration-base), background-color var(--duration-base);
}
.custom-select__trigger::after {
  content: '';
  width: 16px;
  height: 16px;
  background-image: url('./img/arrow_down.svg');
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
  transition: transform var(--duration-base) ease;
  flex-shrink: 0;
}
.custom-select.--open .custom-select__trigger::after {
  transform: rotate(180deg);
}
.custom-select__trigger:hover,
.custom-select.--open .custom-select__trigger {
  border-color: var(--brand-blue);
}
.custom-select__options {
  display: none;
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  width: 100%;
  max-height: 240px;
  overflow-y: auto;
  background-color: #ffffff;
  border: 1px solid rgba(0, 0, 0, 0.10);
  border-radius: var(--radius-m);
  box-shadow: 0px 4px 12px rgba(0, 0, 0, 0.08);
  z-index: 999;
  list-style: none;
  padding: 4px 0;
  margin: 0;
}
.custom-select.--open .custom-select__options {
  display: block;
}
.custom-select__option {
  height: 36px;
  padding: 0 12px;
  display: flex;
  align-items: center;
  font-family: var(--font-family-base);
  font-size: var(--fs-sm);
  color: var(--neutral-900);
  cursor: pointer;
  transition: background-color var(--duration-fast);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.custom-select__option:hover {
  background-color: var(--neutral-100);
}
.custom-select__option.is-selected {
  font-weight: var(--fw-semibold);
  color: var(--brand-blue);
  background-color: var(--brand-light-blue);
}


/* ==========================================
   RADIO — 라디오 버튼
   사용 예:
   <label class="radio">
     <input type="radio" name="group" />
     <span class="radio__mark"></span>
     <span class="radio__label">라디오</span>
   </label>

   [Variant]
   .radio--type-check | 체크 마크 형태 (원형 → 체크)
   ========================================== */

.radio {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.radio input[type="radio"] {
  display: none;
}
.radio__mark {
  width:         15px;
  height:        15px;
  border:        1px solid var(--neutral-300);
  border-radius: 50%;
  background-color: var(--neutral-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: border-color var(--duration-base);
}
.radio__mark::after {
  content: '';
  width:  7px;
  height: 7px;
  border-radius: 50%;
  background-color: var(--brand-blue);
  display: none;
}
.radio input[type="radio"]:checked + .radio__mark {
  border-color: var(--brand-blue);
}
.radio input[type="radio"]:checked + .radio__mark::after {
  display: block;
}
.radio input[type="radio"]:disabled + .radio__mark {
  border-color: var(--neutral-300);
  cursor: default;
}
.radio input[type="radio"]:disabled:checked + .radio__mark::after {
  background-color: var(--neutral-300);
}
.radio input[type="radio"]:disabled ~ .radio__label {
  color: var(--neutral-400);
  cursor: default;
}
.radio__label {
  font-family: var(--font-family-base);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color:       var(--neutral-950);
}

/* 체크 마크 형태 */
.radio--type-check .radio__mark::after {
  display: none !important;
}
.radio--type-check .radio__mark::before {
  content: '';
  width: 7px;
  height: 4px;
  border-left:   2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg);
  margin-top: -1px;
  display: none;
}
.radio--type-check input[type="radio"]:checked + .radio__mark {
  background-color: var(--brand-blue);
  border-color: var(--brand-blue);
}
.radio--type-check input[type="radio"]:checked + .radio__mark::before {
  display: block;
}


/* ==========================================
   CHECKBOX — 체크박스
   사용 예:
   <label class="checkbox">
     <input type="checkbox" />
     <span class="checkbox__mark"></span>
     <span class="checkbox__label">동의합니다</span>
   </label>

   [State]
   기본(미체크) / 체크 / 비활성(disabled)
   ========================================== */

.checkbox {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  cursor: pointer;
  flex-shrink: 0;
}
.checkbox input[type="checkbox"] {
  display: none;
}
.checkbox__mark {
  width:         15px;
  height:        15px;
  border:        1px solid var(--neutral-300);
  border-radius: 2px;
  background-color: var(--neutral-50);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  transition: background-color var(--duration-base), border-color var(--duration-base);
}
.checkbox__mark::after {
  content: '';
  width:   8px;
  height:  5px;
  border-left:   2px solid #ffffff;
  border-bottom: 2px solid #ffffff;
  transform: rotate(-45deg) translateY(-1px);
  display: none;
}
.checkbox input[type="checkbox"]:checked + .checkbox__mark {
  background-color: var(--brand-blue);
  border-color:     var(--brand-blue);
}
.checkbox input[type="checkbox"]:checked + .checkbox__mark::after {
  display: block;
}
.checkbox input[type="checkbox"]:disabled + .checkbox__mark {
  background-color: var(--neutral-300);
  border-color:     var(--neutral-300);
}
.checkbox__label {
  font-family: var(--font-family-base);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  color:       var(--neutral-950);
}
.checkbox__sub-label {
  font-family: var(--font-family-base);
  font-size:   var(--fs-xs);
  font-weight: var(--fw-regular);
  line-height: var(--lh-tight);
  color:       var(--neutral-500);
}


/* ==========================================
   STATUS TEXT — 상태 텍스트
   사용 예: <span class="status-text status-text--ok">사용 가능한 아이디입니다.</span>

   .status-text--ok    | 파랑 | 사용가능, 인증완료
   .status-text--error | 주황 | 사용불가, 불일치
   .status-text--valid | 빨강 | 유효성 오류
   ========================================== */

.status-text {
  font-family: var(--font-family-base);
  font-weight: var(--fw-regular);
  line-height: var(--lh-normal);
  white-space: nowrap;
}
.status-text--ok {
  font-size: var(--fs-sm);
  color: var(--brand-blue);
}
.status-text--error {
  font-size: var(--fs-sm);
  color: var(--brand-orange);
}
.status-text--valid {
  font-size: var(--fs-xs);
  color: var(--brand-red);
}


/* ==========================================
   FORM LABEL — 폼 레이블
   사용 예:
   <div class="form-label">
     이름 <span class="form-label__required">*</span>
   </div>
   ========================================== */

.form-label {
  display: flex;
  align-items: center;
  gap: 6px;
  width: 140px;
  flex-shrink: 0;
  font-family: var(--font-family-base);
  font-size:   var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color:       var(--neutral-950);
  white-space: nowrap;
}
.form-label__required {
  color: var(--brand-orange);
  font-weight: var(--fw-semibold);
}


/* ==========================================
   ICON — 아이콘 크기 유틸리티
   사용 예:
   <span class="icon icon-m">
     <img src="icon.svg" alt="아이콘" />
   </span>

   .icon-s | 16px
   .icon-m | 24px
   .icon-l | 32px
   ========================================== */

.icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
  vertical-align: middle;
}
.icon-s { width: var(--icon-size-s); height: var(--icon-size-s); }
.icon-m { width: var(--icon-size-m); height: var(--icon-size-m); }
.icon-l { width: var(--icon-size-l); height: var(--icon-size-l); }
.icon-s svg, .icon-s img,
.icon-m svg, .icon-m img,
.icon-l svg, .icon-l img { width: 100%; height: 100%; }


/* ==========================================
   CARD — 공통 카드 컴포넌트
   사용 예: <div class="main-card">...</div>
   ========================================== */

.main-card {
  background-color: #ffffff;
  border-radius: var(--radius-l);
  box-shadow: var(--shadow-card);
  border: 1px solid var(--neutral-200);
  padding: 16px 24px 30px;
  display: flex;
  flex-direction: column;
  box-sizing: border-box;
  width: 300px;
}


/* ==========================================
   PAGINATION — 페이지네이션
   사용 예:
   <nav class="pagination">
     <button class="pg-icon" id="btn-first"></button>
     <button class="pg-icon" id="btn-prev"></button>
     <button class="pg-page active">1</button>
     <button class="pg-page">2</button>
     <button class="pg-icon" id="btn-next"></button>
     <button class="pg-icon" id="btn-last"></button>
   </nav>

   * 아이콘: ./img/ 폴더의 svg 파일 사용 (::before 가상요소)
     - double_arrow_left.svg  → btn-first
     - chevron_left.svg       → btn-prev
     - chevron_right.svg      → btn-next
     - double_arrow_right.svg → btn-last
   ========================================== */

.pagination {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 20px 0;
}

.pg-icon {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-m);
  cursor: pointer;
  flex-shrink: 0;
  transition: background var(--duration-fast);
}
.pg-icon::before {
  content: "";
  display: block;
  width: var(--icon-size-m);
  height: var(--icon-size-m);
  background-repeat: no-repeat;
  background-position: center;
  background-size: contain;
}
#btn-first::before  { background-image: url('./img/double_arrow_left.svg'); }
#btn-prev::before   { background-image: url('./img/chevron_left.svg'); }
#btn-next::before   { background-image: url('./img/chevron_right.svg'); }
#btn-last::before   { background-image: url('./img/double_arrow_right.svg'); }

.pg-icon:hover {
  background: var(--state-hover);
}
.pg-icon:disabled {
  cursor: not-allowed;
  opacity: 0.3;
}

.pg-page {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 32px;
  height: 32px;
  padding: 0;
  background: none;
  border: none;
  border-radius: var(--radius-l);
  cursor: pointer;
  font-family: var(--font-family-base);
  font-size: var(--fs-sm);
  font-weight: var(--fw-semibold);
  line-height: 1;
  letter-spacing: -0.14px;
  color: var(--neutral-950);
  flex-shrink: 0;
  transition: background var(--duration-fast), color var(--duration-fast);
}
.pg-page:hover {
  background: var(--brand-light-blue);
}
.pg-page.active {
  background: var(--brand-blue);
  color: #ffffff;
  cursor: default;
  pointer-events: none;
}


/* ==========================================
   TAB — 볼륨 탭 (Soft Volume)
   사용 예:
   <div class="tab-volume">
     <button class="tab-volume__item active">물건정보</button>
     <button class="tab-volume__item">입찰내역</button>
     <button class="tab-volume__item">등기부등본</button>
   </div>

   [Layout]
   .tab-volume             | 기본 (padding형, 텍스트 길이 따라 너비)
   .tab-volume--stretch    | 너비 균등 분할 (flex: 1)
   ========================================== */

.tab-volume {
  display: flex;
  gap: var(--space-3);
  margin-bottom: 30px;
}
.tab-volume__item {
  padding: 10px 40px;
  font-family: var(--font-family-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-semibold);
  line-height: var(--lh-normal);
  color: var(--neutral-600);
  background-color: var(--neutral-50);
  border: 1px solid var(--neutral-300);
  border-radius: var(--radius-l);
  cursor: pointer;
  transition: all var(--duration-base) ease;
  white-space: nowrap;
}
.tab-volume__item:hover {
  background-color: var(--neutral-100);
  border-color: var(--neutral-300);
}
.tab-volume__item.active {
  color: var(--brand-blue);
  background-color: var(--brand-light-blue);
  border-color: var(--brand-blue);
  box-shadow: var(--shadow-tab-blue);
  transform: translateY(-1px);
}
.tab-volume--stretch .tab-volume__item {
  flex: 1;
  text-align: center;
  padding: 10px 0;
}


  /* ==========================================
   BOARD TABLE — 게시판형 테이블 (공통 뼈대)
   사용 예:
   <div class="board-table">
     <div class="board-th">
       <div class="col col-no">번호</div>
       <div class="col col-title">제목</div>
     </div>
     <div class="board-td">
       <div class="col-no-badge"><span class="badge badge-m badge-blue">공지</span></div>
       <div class="col-title">제목</div>
     </div>
     <div class="board-td">
       <div class="col-no">1</div>
       <div class="col-title">제목</div>
     </div>
   </div>
 
   * 컬럼 너비(.col-no, .col-title 등)는 페이지별 CSS에서 정의
     ex) .col-no { width: 100px; flex-shrink: 0; }
         .col-title { flex: 1; min-width: 0; }
   ========================================== */
 
.board-table {
  display: flex;
  flex-direction: column;
  width: 100%;
}

/* 헤더 행 */
.board-th {
  display: flex;
  align-items: center;
  background-color: var(--neutral-50);
  border-top: 1px solid var(--neutral-700);
}
.board-th .col {
  font-family: var(--font-family-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-bold);
  color: #000000;
  letter-spacing: -0.24px;
  text-align: center;
  line-height: var(--lh-relaxed);
}

/* 데이터 행 */
.board-td {
  display: flex;
  align-items: center;
  border-top: 1px solid var(--neutral-300);
  background-color: #ffffff;
  transition: background var(--duration-fast);
  cursor: pointer;
}

.board-td:hover {
  background: linear-gradient(var(--state-hover), var(--state-hover)), #ffffff;
}

/* 행 셀 — 번호/작성자/날짜/조회수 기본 글꼴 규칙 */
.board-td .col-no,
.board-td .col-author,
.board-td .col-date,
.board-td .col-views {
  font-family: var(--font-family-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-regular);
  color: var(--neutral-800);
  letter-spacing: -0.24px;
  line-height: var(--lh-relaxed);
  text-align: center;
}

/* 행 셀 — 제목 */
.board-td .col-title {
  font-family: var(--font-family-base);
  font-size: var(--fs-md);
  font-weight: var(--fw-medium);
  color: #000000;
  letter-spacing: -0.24px;
  line-height: var(--lh-relaxed);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.col-no-badge {
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.board-table > .board-td:last-child {
  border-bottom: 1px solid var(--neutral-300);
}