/* 공용 안내 상자 (2026-10-11, 주의 토큰 3.6.0)
   Primer Banner·Fresha 취소 규정 상자처럼 상태색은 면·테두리·아이콘에만 쓰고 제목·본문은 기본 글자색.
   새 경고·안내 상자는 페이지마다 색을 새로 적지 말고 이 클래스를 쓴다.
   <div class="wh-notice wh-notice--warn" role="status">
     <span class="material-symbols-rounded wh-notice__icon" aria-hidden="true">schedule</span>
     <div class="wh-notice__body">
       <p class="wh-notice__title">제목</p>
       <p class="wh-notice__text">본문</p>
       <a class="wh-notice__link" href="...">행동</a>
     </div>
   </div> */
.wh-notice {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 14px 16px;
  border: 1px solid var(--wh-bd-hairline, #E5E5E5);
  border-radius: var(--wh-radius-sm, 16px);
  background: var(--wh-card, #FFFFFF);
  color: var(--wh-tx, #1A1A1A);
}
.wh-notice__icon {
  flex-shrink: 0;
  width: 20px;
  height: 20px;
  font-size: 20px;
  line-height: 1;
}
.wh-notice__body { flex: 1; min-width: 0; }
.wh-notice__title {
  margin: 0 0 4px;
  font-size: var(--wh-text-sm, 0.875rem);
  font-weight: 700;
  line-height: 1.45;
  color: var(--wh-tx, #1A1A1A);
}
.wh-notice__text {
  margin: 0;
  font-size: var(--wh-text-xs, 0.8125rem);
  line-height: var(--wh-lh-body, 1.55);
  color: var(--wh-tx2, #4A4A4A);
}
.wh-notice__link {
  display: inline-block;
  margin-top: 8px;
  font-size: var(--wh-text-xs, 0.8125rem);
  font-weight: 700;
  color: var(--wh-brand, #681DC7);
  text-decoration: underline;
  text-underline-offset: 2px;
}
.wh-notice__link:focus-visible { outline: 2px solid var(--wh-focus-ring, #681DC7); outline-offset: 2px; }
.wh-notice:lang(ko) .wh-notice__title,
.wh-notice:lang(ko) .wh-notice__text { word-break: keep-all; }

.wh-notice--warn { background: var(--wh-warn-bg, #FFF6E0); border-color: var(--wh-warn-bd, #F3D58E); }
.wh-notice--warn .wh-notice__icon { color: var(--wh-warn-tx, #8A4B00); }
.wh-notice--err { background: var(--wh-err-bg); border-color: var(--wh-err-bd); }
.wh-notice--err .wh-notice__icon { color: var(--wh-err-tx); }
.wh-notice--ok { background: var(--wh-ok-bg); border-color: var(--wh-ok-bd); }
.wh-notice--ok .wh-notice__icon { color: var(--wh-ok); }