/* 토스트(잠깐 떴다 사라지는 안내 문구)의 생김새입니다 — 동작은 짝이 되는 toast.js가 맡습니다.
   어느 화면에서든 뜰 수 있어서 base.html이 모든 화면에 이 파일을 싣습니다.

   층(z-index 1000): 모달(500)보다 위, 전체 화면 스피너(9999)보다 아래입니다. 팝업이 열린 채로
   "저장하지 못했어요"가 떠도 보여야 하고, 로딩 중에는 스피너가 전부를 덮는 게 맞기 때문입니다.

   색: 화면과 반대 톤입니다(라이트 모드에선 짙은 바탕에 밝은 글자, 다크 모드에선 그 반대). 어느
   화면 위에 떠도 또렷하게 구분되도록요. 색은 전부 .toast-region의 --toast-* 토큰에서 나옵니다. */

.toast-region {
  --toast-bg: var(--color-text);
  --toast-fg: var(--color-bg);
  --toast-success: var(--color-main-400);
  --toast-error: var(--color-sub);
  --toast-action: var(--color-main-400);

  position: fixed;
  left: 0;
  right: 0;
  /* 높이는 toastRegion.js가 화면 아래의 탭 바·고정 버튼·키보드를 재서 --toast-bottom-offset에
     넣어줍니다. 그 값이 아직 없거나, 아이폰 홈 표시줄 영역보다 낮으면 그 위로 올립니다. */
  bottom: max(var(--toast-bottom-offset, 16px), calc(env(safe-area-inset-bottom, 0px) + 16px));
  z-index: 1000;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  padding: 0 16px;
  /* 영역 자체는 빈 공간이라 아래 화면의 터치를 막지 않습니다. 토스트만 눌립니다. */
  pointer-events: none;
}

/* 키보드가 올라와 있을 때: 보이는 화면의 아래 끝(키보드 바로 위)에 토스트 영역의 아래 끝을
   맞춥니다. 위치는 toastRegion.js가 --toast-keyboard-top에 넣어줍니다 — 아이폰은 키보드가 떠
   있으면 화면 아래 기준(bottom)이 흔들려서, 위쪽 기준(top)으로 잡아야 키보드 뒤에 숨지 않습니다. */
.toast-region.is-above-keyboard {
  top: var(--toast-keyboard-top, 50%);
  bottom: auto;
  transform: translateY(-100%);
}

/* 다크 모드의 토스트는 밝은 바탕이라 한 단계 짙은 색을 써야 또렷합니다(버튼 글자는 4.5:1 이상). */
:root[data-theme="dark"] .toast-region {
  --toast-success: var(--color-main-600);
  --toast-error: var(--color-sub-600);
  --toast-action: color-mix(in srgb, var(--color-main-600) 80%, #000000);
}

.toast {
  display: flex;
  align-items: center;
  gap: 10px;
  width: fit-content;
  max-width: min(420px, 100%);
  min-height: 44px;
  padding: 11px 16px;
  border-radius: var(--radius-md);
  background: var(--toast-bg);
  color: var(--toast-fg);
  box-shadow: var(--shadow-lg);
  font-size: 0.88rem;
  font-weight: 600;
  line-height: 1.45;
  pointer-events: auto;
  -webkit-tap-highlight-color: transparent;
  animation: toast-in 0.18s ease-out;
}

/* 사라지는 중: toast.js가 이 애니메이션이 끝날 즈음(0.22초 뒤) 요소를 지웁니다. 그 사이에 한 번 더
   눌리지 않게 터치도 받지 않습니다. */
.toast.is-leaving {
  animation: toast-out 0.16s ease-in forwards;
  pointer-events: none;
}

.toast-icon {
  width: 20px;
  height: 20px;
  stroke-width: 2.5;
}

.toast--success .toast-icon {
  color: var(--toast-success);
}

.toast--error .toast-icon {
  color: var(--toast-error);
}

/* 줄바꿈(\n)은 그대로 살리고, 한글은 낱말 중간에서 끊지 않되 띄어쓰기 없이 아주 긴 글(주소 등)은
   어디서든 끊어서 화면 밖으로 넘치지 않게 합니다. */
.toast-message {
  flex: 1 1 auto;
  min-width: 0;
  white-space: pre-line;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* "되돌리기" 같은 버튼입니다. 글자만 보이지만 누르는 자리는 44px 높이를 확보합니다(위아래 여백을
   음수 마진으로 토스트 안쪽 여백과 겹쳐서, 토스트 높이는 그대로입니다). */
.toast-action {
  flex: none;
  min-height: 44px;
  margin: -11px -8px -11px 0;
  padding: 0 8px;
  border: 0;
  border-radius: var(--radius-sm);
  background: transparent;
  color: var(--toast-action);
  font: inherit;
  font-weight: 800;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.toast-action:focus-visible {
  outline: 2px solid currentColor;
  outline-offset: -6px;
}

@keyframes toast-in {
  from {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes toast-out {
  to {
    opacity: 0;
    transform: translateY(8px);
  }
}

@keyframes toast-fade-in {
  from {
    opacity: 0;
  }
}

@keyframes toast-fade-out {
  to {
    opacity: 0;
  }
}

/* 움직임 줄이기를 켠 사람에게는 미끄러지지 않고 흐려지기만 합니다. */
@media (prefers-reduced-motion: reduce) {
  .toast {
    animation-name: toast-fade-in;
  }

  .toast.is-leaving {
    animation-name: toast-fade-out;
  }
}

@media (forced-colors: active) {
  .toast {
    border: 1px solid CanvasText;
  }
}