/* ==========================================================================
   스마트 웰페어 — 다이얼로그 · 토스트  v2.0  (2026-09-10)
   위치: public/css/dialog.css   →   URL: /css/dialog.css
   선행: /css/tokens.css

   components.css 없이 단독으로 동작합니다 (단계적 적용을 위해).
   색·크기는 전부 tokens.css 의 var() 참조 — 리터럴 hex 없음.
   ========================================================================== */

body.sw-modal-open{ overflow: hidden; }

/* ---------------- 오버레이 · 모달 ---------------- */
.sw-overlay{
  position: fixed; inset: 0; z-index: var(--z-modal);
  display: flex; align-items: center; justify-content: center;
  padding: calc(var(--space) * 5);
  background: var(--overlay);
  animation: swFade var(--t-base, 200ms) ease;
}
.sw-modal{
  width: 100%; max-width: 440px;
  max-height: calc(100vh - var(--space) * 10);
  display: flex; flex-direction: column;
  background: var(--surface);
  border-radius: var(--r-card);
  box-shadow: var(--sh-pop);
  overflow: hidden;
  font-family: var(--font);
  font-size: var(--fs-base);
  line-height: var(--lh-base);
  color: var(--ink);
  animation: swRise var(--t-base, 200ms) ease;
}
.sw-modal--prompt{ max-width: 480px; }

.sw-modal__head{
  padding: calc(var(--space) * 4) calc(var(--space) * 5);
  background: var(--ui-header-fill);
  border-bottom: 1px solid var(--ui-border-soft);
}
.sw-modal__title{
  margin: 0; font-size: var(--fs-h3); font-weight: 600; color: var(--ink);
}
.sw-modal__body{
  padding: calc(var(--space) * 5);
  overflow-y: auto;
}
.sw-modal__msg{
  margin: 0; white-space: pre-line;
}
.sw-modal__foot{
  display: flex; justify-content: flex-end; gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 4) calc(var(--space) * 5);
  border-top: 1px solid var(--ui-border-soft);
}

/* ---------------- 버튼 (이 파일 안에서만 쓰는 최소 3종) ---------------- */
.sw-btn{
  display: inline-flex; align-items: center; justify-content: center;
  height: var(--h-btn); padding: 0 calc(var(--space) * 4);
  border: 1px solid transparent; border-radius: var(--r-field);
  font-family: var(--font); font-size: var(--fs-base); font-weight: 500;
  line-height: 1; cursor: pointer; white-space: nowrap;
  transition: background 120ms ease, border-color 120ms ease, color 120ms ease;
}
.sw-btn--primary{ background: var(--ui-btn-primary); color: var(--ink-on-accent); }
.sw-btn--primary:hover{ background: var(--ui-btn-primary-hover); }

.sw-btn--ghost{ background: var(--surface); color: var(--ink-muted); border-color: var(--ui-border); }
.sw-btn--ghost:hover{ background: var(--surface-alt); color: var(--ink); }

.sw-btn--danger{
  background: var(--status-danger-bg); color: var(--status-danger-text);
  border-color: var(--status-danger-bg);
}
.sw-btn--danger:hover{ border-color: var(--status-danger-text); }

.sw-btn:focus-visible{ outline: 2px solid var(--focus-ring); outline-offset: 2px; }

/* ---------------- 입력 (prompt 용) ---------------- */
.sw-field{ display: flex; flex-direction: column; gap: var(--space); margin-top: calc(var(--space) * 3); }
.sw-field__label{ font-size: var(--fs-sm); font-weight: 600; color: var(--ink-muted); }
.sw-input{
  width: 100%; height: var(--h-field);
  padding: 0 calc(var(--space) * 3);
  background: var(--surface);
  border: 1px solid var(--ui-border); border-radius: var(--r-field);
  font-family: var(--font); font-size: var(--fs-base); color: var(--ink);
}
.sw-input::placeholder{ color: var(--ink-placeholder); }
.sw-input:focus{
  outline: none; border-color: var(--ui-accent); box-shadow: var(--sh-focus);
}

/* ---------------- 체크박스 목록 (연계 내역 선택) ---------------- */
.sw-checklist{ display: flex; flex-direction: column; gap: calc(var(--space) * 2); margin-top: calc(var(--space) * 4); }
.sw-checklist__row{
  display: flex; align-items: center; gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 2) calc(var(--space) * 3);
  border: 1px solid var(--ui-border-soft); border-radius: var(--r-field);
  cursor: pointer;
}
.sw-checklist__row:hover{ background: var(--surface-alt); }
.sw-checklist__row.is-disabled{ opacity: .5; cursor: not-allowed; }
.sw-checklist__row input{ width: 16px; height: 16px; accent-color: var(--ui-accent); }
.sw-checklist__hint{ margin-left: auto; font-size: var(--fs-xs); color: var(--ink-muted); }

/* ---------------- 토스트 ---------------- */
.sw-toast-host{
  position: fixed; z-index: calc(var(--z-modal) + 100);
  right: calc(var(--space) * 5); bottom: calc(var(--space) * 5);
  display: flex; flex-direction: column; gap: calc(var(--space) * 2);
  max-width: min(92vw, 400px);
}
.sw-toast{
  display: flex; align-items: flex-start; gap: calc(var(--space) * 2);
  padding: calc(var(--space) * 3) calc(var(--space) * 4);
  border-radius: var(--r-field);
  box-shadow: var(--sh-pop);
  font-family: var(--font); font-size: var(--fs-base); line-height: var(--lh-base);
  animation: swSlide var(--t-base, 200ms) ease;
}
.sw-toast.is-out{ opacity: 0; transform: translateY(6px); transition: all 200ms ease; }
.sw-toast__bar{ width: 4px; align-self: stretch; border-radius: var(--r-chip); background: currentColor; opacity: .5; }
.sw-toast__msg{ flex: 1 1 auto; }
.sw-toast__close{
  background: none; border: 0; cursor: pointer; color: inherit;
  font-size: var(--fs-lg); line-height: 1; opacity: .6; padding: 0;
}
.sw-toast__close:hover{ opacity: 1; }

.sw-toast--info{ background: var(--ui-accent-tint);      color: var(--ui-accent); }
.sw-toast--ok  { background: var(--status-success-bg);   color: var(--status-success-text); }
.sw-toast--warn{ background: var(--status-pending-bg);   color: var(--status-pending-text); }
.sw-toast--err { background: var(--status-danger-bg);    color: var(--status-danger-text); }

@keyframes swFade { from{ opacity:0 } to{ opacity:1 } }
@keyframes swRise { from{ opacity:0; transform:translateY(10px) scale(.99) } to{ opacity:1; transform:none } }
@keyframes swSlide{ from{ opacity:0; transform:translateY(8px) } to{ opacity:1; transform:none } }

@media (max-width: 480px){
  .sw-toast-host{ left: calc(var(--space) * 3); right: calc(var(--space) * 3); max-width: none; }
}

/* ==========================================================================
   패치 (2026-09-10 브라우저 실측 후 추가)
   1) 박스모델 — 이 앱은 box-sizing 전역 리셋이 없어(index.html 에 39곳 개별
      선언, body·일반 div 는 content-box) max-width:100% 에 padding 이 더해져
      토스트가 400px 상한을 넘어 432px 로 삐져나왔습니다.
      전역 리셋은 넣지 않고 이 컴포넌트 안으로만 한정합니다.
   2) 토스트 줄바꿈 — .sw-toast__msg 의 flex-shrink 1 때문에 자리가 남아도
      글자가 눌려 접혔습니다("결재선을 저장했습니다." 12자가 2줄).
   ========================================================================== */
.sw-overlay, .sw-overlay *,
.sw-toast-host, .sw-toast-host *{
  box-sizing: border-box;
}

.sw-toast-host{
  width: min(92vw, 400px);
  align-items: flex-end;
  pointer-events: none;      /* 투명 박스가 아래 요소 클릭을 막지 않게 */
}

.sw-toast{
  width: max-content;
  max-width: 100%;
  pointer-events: auto;      /* 토스트 자신은 클릭·닫기 가능 */
  word-break: keep-all;      /* 한글 어절 단위 줄바꿈 */
}

.sw-toast__msg{
  flex: 0 0 auto;
  max-width: 100%;
}