/* tools.deios.kr 공통 스타일 (Bootstrap 5 위에 최소한으로 덧씀) */
.tool-card { transition: transform .12s ease, box-shadow .12s ease; }
.tool-card:hover { transform: translateY(-2px); box-shadow: 0 .5rem 1rem rgba(0, 0, 0, .08); }

.ad-slot { min-height: 90px; }
.ad-placeholder {
  display: flex; align-items: center; justify-content: center;
  border: 1px dashed var(--bs-border-color); border-radius: .5rem;
}

/* 가로 스크롤 방어: 넘치는 요소가 생겨도 페이지 전체가 옆으로 밀리지 않게(clip은 sticky를 깨지 않는다) */
html, body { overflow-x: clip; }

/* 건너뛰기 링크로 옮긴 초점에는 테두리를 그리지 않는다(main 전체가 테두리로 감싸이는 것 방지) */
#main:focus { outline: none; }

/* Bootstrap에 없는 주황색(1단계 비만, bmi.js·health_ideal_weight.js가 text-/border-orange로 쓴다).
   글자는 흰 배경 대비 4.97:1로 어둡게(#fd7e14는 2.57:1이라 WCAG AA 미달), 테두리는 원래 주황 */
.text-orange { color: #b65300 !important; }
.border-orange { border-color: #fd7e14 !important; }

/* 모바일 터치 영역: 손가락으로 누르는 요소는 최소 44px 높이 (모바일 우선 규칙, CLAUDE.md) */
@media (max-width: 767.98px), (pointer: coarse) {
  .navbar-brand { min-height: 44px; display: inline-flex; align-items: center; }
  .navbar-toggler { min-height: 44px; min-width: 48px; }
  .navbar .nav-link,
  .navbar .dropdown-item { min-height: 44px; display: flex; align-items: center; }
  .form-control,
  .form-select,
  .input-group-text,
  .btn { min-height: 48px; }
  details > summary { min-height: 44px; display: flex; align-items: center; cursor: pointer; }
  .tap-target { display: inline-flex; align-items: center; min-height: 44px; }
}

/* 접이식(details) 제목: 기본 마커 대신 회전하는 아이콘 */
details > summary { list-style: none; }
details > summary::-webkit-details-marker { display: none; }
details > summary .bi-chevron-down { transition: transform .15s ease; transform: rotate(-90deg); }
details[open] > summary .bi-chevron-down { transform: none; }

/* 배지 글자 최소 12px (Bootstrap 기본 .75em은 작은 글씨 안에서 10.5px가 된다) */
.badge { font-size: max(.75em, 12px); }

/* 체크박스·라디오: 모바일에서는 라벨까지 포함한 줄 전체를 44px 높이의 터치 영역으로 */
@media (max-width: 767.98px), (pointer: coarse) {
  .form-check { min-height: 44px; display: flex; align-items: center; gap: .5rem; }
  .form-check .form-check-input { margin-top: 0; float: none; flex-shrink: 0; width: 1.25em; height: 1.25em; }
  .form-check .form-check-label { padding-block: .5rem; }
}

/* 결과 표의 금액이 "33,000 / 원"처럼 글자 단위로 쪼개지지 않게, 띄어쓰기 단위로만 줄을 바꾼다
   (white-space: nowrap은 긴 값이 320px 화면을 넘쳐서 쓰지 않는다) */
[data-result] td, [data-result] th { word-break: keep-all; }