/* [project]/components/system/lite-notice.css [app-client] (css) */
.lite-note {
  z-index: 80;
  left: var(--gutter);
  bottom: var(--gutter);
  align-items: center;
  gap: var(--sp-3);
  width: min(420px, calc(100vw - 2 * var(--gutter)));
  padding: var(--sp-2) var(--sp-2) var(--sp-2) var(--sp-4);
  background: var(--color-char);
  border: 1px solid var(--color-line-2);
  border-left: 4px solid var(--color-steel);
  color: var(--color-bone-dim);
  font: 500 var(--fs-t3) / var(--lh-t3) var(--font-sans);
  animation: lite-note-in .26s var(--ease-out) both;
  display: flex;
  position: fixed;
}

.lite-note p {
  flex: 1;
  min-width: 0;
}

.lite-note a {
  color: var(--color-steel);
  text-underline-offset: 3px;
  text-decoration: underline;
}

.lite-note__x {
  width: 40px;
  height: 40px;
  color: var(--color-bone-dim);
  flex: none;
  place-items: center;
  display: grid;
}

.lite-note__x svg {
  width: 20px;
  height: 20px;
}

@media (max-width: 767px) {
  .lite-note {
    bottom: calc(56px + var(--sp-3) + env(safe-area-inset-bottom));
  }
}

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

@media (prefers-reduced-motion: reduce) {
  .lite-note {
    animation: none;
  }
}

html.lite .lite-note {
  animation: none;
}