/* ============================================================
   mlm-lookup — 다단계·후원방문판매 등록업체 조회 위젯
   - 순수 CSS. 외부 폰트·아이콘·CDN 의존 없음(호스트 페이지 로딩에 영향 0)
   - 모든 규칙이 .mlm-lookup 하위로 스코프되어 워드프레스 테마와 충돌하지 않음
   - 폭 반응은 컨테이너 쿼리 기준: 뷰포트가 아니라 "위젯 자신의 폭"을 본다.
     사이드바(약 300px)에 넣으면 데스크톱에서도 카드형으로 나온다.
   - 다크 테마 대응: prefers-color-scheme + .mlm-lookup[data-theme]
   ============================================================ */

.mlm-lookup {
  /* --- 잉크 계열: 한 가지 회색 계통(살짝 푸른 중성)으로 통일 --- */
  --mlm-ink: #16191e;
  --mlm-ink-2: #4c545f;
  --mlm-ink-3: #808894;

  --mlm-line: #e5e8ec;
  --mlm-line-strong: #ccd2da;

  --mlm-paper: #ffffff;
  --mlm-paper-2: #f7f8fa;
  --mlm-paper-3: #eef1f4;

  /* --- 강조색은 하나. 채도를 낮춘 짙은 청람(공공기록 톤) --- */
  --mlm-accent: #1f4d6b;
  --mlm-accent-ink: #163a52;
  --mlm-accent-soft: #e9f0f5;
  --mlm-accent-line: #c3d5e1;

  /* --- 근거 등급 색: 장식이 아니라 데이터 인코딩.
         명도를 서로 맞춰 한 세트로 읽히게 했다. --- */
  --mlm-grade-confirmed-ink: #14532d;
  --mlm-grade-confirmed-bg: #e2f0e7;
  --mlm-grade-confirmed-line: #b4d8c2;

  --mlm-grade-probable-ink: #163a52;
  --mlm-grade-probable-bg: #e9f0f5;
  --mlm-grade-probable-line: #c3d5e1;

  --mlm-grade-warn-ink: #7a4f07;
  --mlm-grade-warn-bg: #faf0db;
  --mlm-grade-warn-line: #e8d5a8;

  --mlm-grade-none-ink: #4c545f;
  --mlm-grade-none-bg: #f7f8fa;
  --mlm-grade-none-line: #ccd2da;

  --mlm-danger: #9c2620;
  --mlm-danger-bg: #fbeceb;

  /* --- 기관 식별 점 --- */
  --mlm-dot-kossa: #2f6fae;
  --mlm-dot-macco: #2c7a4b;
  --mlm-dot-ftc: #9a6a1f;

  /* --- 형태 --- */
  --mlm-radius: 10px;
  --mlm-radius-sm: 7px;
  /* 그림자는 검정이 아니라 강조색 색조를 띠게 — 배경에 앉은 느낌이 난다 */
  --mlm-shadow: 0 1px 2px rgba(22, 58, 82, 0.05), 0 8px 24px -12px rgba(22, 58, 82, 0.18);
  --mlm-ease: 170ms cubic-bezier(0.32, 0.72, 0.28, 1);

  --mlm-font: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
    "Helvetica Neue", Arial, "Apple SD Gothic Neo", Pretendard, "Malgun Gothic",
    "맑은 고딕", "Noto Sans KR", sans-serif;

  /* 위젯 자신의 폭을 기준점으로 등록 */
  container-type: inline-size;
  container-name: mlm;

  box-sizing: border-box;
  font-family: var(--mlm-font);
  font-size: 14px;
  line-height: 1.55;
  color: var(--mlm-ink);
  background: var(--mlm-paper);
  border: 1px solid var(--mlm-line);
  border-radius: var(--mlm-radius);
  box-shadow: var(--mlm-shadow);
  overflow: hidden; /* 내부 모서리 정리 — 자식마다 radius 계산할 필요 없음 */
  -webkit-font-smoothing: antialiased;
}

.mlm-lookup *,
.mlm-lookup *::before,
.mlm-lookup *::after {
  box-sizing: border-box;
}

.mlm-lookup [hidden] {
  display: none !important;
}

/* ---------- 검색 / 필터 ---------- */

.mlm-toolbar {
  display: grid;
  gap: 8px;
  padding: 14px 14px 12px;
  background: var(--mlm-paper);
}

.mlm-search,
.mlm-select {
  width: 100%;
  min-width: 0;
  font-family: inherit;
  font-size: 16px; /* iOS 자동 확대 방지 */
  line-height: 1.4;
  color: var(--mlm-ink);
  background: var(--mlm-paper);
  border: 1px solid var(--mlm-line-strong);
  border-radius: var(--mlm-radius-sm);
  padding: 9px 11px;
  transition: border-color var(--mlm-ease), box-shadow var(--mlm-ease),
    background-color var(--mlm-ease);
}

.mlm-search::placeholder {
  color: var(--mlm-ink-3);
}

.mlm-search:hover,
.mlm-select:hover {
  border-color: var(--mlm-accent-line);
}

.mlm-select {
  appearance: none;
  -webkit-appearance: none;
  /* 기본 화살표 대신 얇은 v — 선 굵기를 폼 테두리와 맞춤 */
  background-image: linear-gradient(45deg, transparent 50%, var(--mlm-ink-2) 50%),
    linear-gradient(135deg, var(--mlm-ink-2) 50%, transparent 50%);
  background-position: calc(100% - 17px) 54%, calc(100% - 12px) 54%;
  background-size: 5px 5px;
  background-repeat: no-repeat;
  padding-right: 32px;
  cursor: pointer;
}

/* 폭이 넉넉할 때만 가로 배치. 사이드바에서는 계속 세로로 쌓인다. */
@container mlm (min-width: 520px) {
  .mlm-toolbar {
    grid-template-columns: 2fr 1fr 1fr;
    align-items: center;
  }
  .mlm-search,
  .mlm-select {
    font-size: 14px;
  }
}

/* ---------- 근거 등급 토글 줄 ---------- */

.mlm-tier-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-wrap: wrap;
  gap: 4px 12px;
  padding: 0 14px 12px;
}

.mlm-tier-toggle {
  display: inline-flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  font-weight: 500;
  color: var(--mlm-ink-2);
  cursor: pointer;
  user-select: none;
  padding: 3px 8px 3px 4px;
  margin-left: -4px;
  border-radius: var(--mlm-radius-sm);
  transition: background-color var(--mlm-ease), color var(--mlm-ease);
}

.mlm-tier-toggle:hover {
  background: var(--mlm-paper-2);
  color: var(--mlm-ink);
}

.mlm-tier-toggle input {
  flex: none;
  width: 15px;
  height: 15px;
  margin: 0;
  accent-color: var(--mlm-accent);
  cursor: pointer;
}

.mlm-tier-hint {
  font-size: 11.5px;
  color: var(--mlm-ink-3);
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

/* 등록 이력만 있는 업체를 노출할 때의 경고문 */
.mlm-notice {
  display: flex;
  gap: 9px;
  margin: 0;
  padding: 11px 14px;
  font-size: 12px;
  line-height: 1.6;
  color: var(--mlm-grade-warn-ink);
  background: var(--mlm-grade-warn-bg);
  border-top: 1px solid var(--mlm-grade-warn-line);
  border-bottom: 1px solid var(--mlm-grade-warn-line);
  word-break: keep-all;
  overflow-wrap: anywhere;
  text-wrap: pretty;
}

/* 느낌표 없이, 경계선만 긋는 표식 */
.mlm-notice::before {
  content: "";
  flex: none;
  width: 3px;
  align-self: stretch;
  border-radius: 2px;
  background: currentColor;
  opacity: 0.35;
}

/* ---------- 상태 줄 (건수 / 오류) ---------- */

.mlm-status {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 8px;
  min-height: 40px;
  padding: 9px 14px;
  font-size: 12.5px;
  color: var(--mlm-ink-2);
  background: var(--mlm-paper-2);
  border-top: 1px solid var(--mlm-line);
  border-bottom: 1px solid var(--mlm-line);
}

.mlm-status:empty {
  display: none;
}

.mlm-count {
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
}

.mlm-count strong {
  font-weight: 600;
  color: var(--mlm-ink);
}

.mlm-error-text {
  color: var(--mlm-danger);
  font-weight: 600;
}

.mlm-retry {
  font-family: inherit;
  font-size: 12.5px;
  font-weight: 600;
  color: var(--mlm-danger);
  background: transparent;
  border: 1px solid currentColor;
  border-radius: var(--mlm-radius-sm);
  padding: 4px 13px;
  cursor: pointer;
  transition: background-color var(--mlm-ease), transform var(--mlm-ease);
}

.mlm-retry:hover {
  background: var(--mlm-danger-bg);
}

.mlm-retry:active {
  transform: translateY(1px);
}

.mlm-mock-note {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.02em;
  color: var(--mlm-grade-warn-ink);
  background: var(--mlm-grade-warn-bg);
  border: 1px solid var(--mlm-grade-warn-line);
  border-radius: 4px;
  padding: 1px 7px;
  white-space: nowrap;
}

/* ---------- 로딩: 스피너 대신 결과 표 모양의 스켈레톤 ---------- */

.mlm-skeleton {
  padding: 14px;
  display: grid;
  gap: 14px;
}

.mlm-skel-row {
  display: grid;
  gap: 7px;
}

.mlm-skel-line {
  height: 11px;
  border-radius: 4px;
  background: linear-gradient(
    90deg,
    var(--mlm-paper-3) 0%,
    var(--mlm-paper-2) 40%,
    var(--mlm-paper-3) 80%
  );
  background-size: 300% 100%;
  animation: mlm-shimmer 1.5s ease-in-out infinite;
}

.mlm-skel-line--title {
  width: 58%;
  height: 13px;
}
.mlm-skel-line--sub {
  width: 82%;
}
.mlm-skel-line--chip {
  width: 96px;
  height: 16px;
  border-radius: 4px;
}

.mlm-skel-row:nth-child(2) .mlm-skel-line {
  animation-delay: 90ms;
}
.mlm-skel-row:nth-child(3) .mlm-skel-line {
  animation-delay: 180ms;
}
.mlm-skel-row:nth-child(4) .mlm-skel-line {
  animation-delay: 270ms;
}

@keyframes mlm-shimmer {
  0% {
    background-position: 120% 0;
  }
  100% {
    background-position: -40% 0;
  }
}

/* ---------- 결과 없음: 안내가 있는 화면 ---------- */

.mlm-empty {
  display: grid;
  justify-items: center;
  gap: 5px;
  padding: 40px 24px 44px; /* 아래를 조금 더 — 광학적으로 가운데로 보인다 */
  text-align: center;
}

.mlm-empty__mark {
  width: 34px;
  height: 34px;
  margin-bottom: 7px;
  color: var(--mlm-ink-3);
  opacity: 0.75;
}

.mlm-empty__title {
  font-size: 14px;
  font-weight: 600;
  letter-spacing: -0.01em;
  color: var(--mlm-ink);
}

.mlm-empty__hint {
  max-width: 34ch;
  font-size: 12.5px;
  line-height: 1.6;
  color: var(--mlm-ink-2);
  word-break: keep-all;
  text-wrap: pretty;
}

/* ---------- 결과 목록 ---------- */

.mlm-table-wrap {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  animation: mlm-fade-in 240ms ease-out both;
}

@keyframes mlm-fade-in {
  from {
    opacity: 0;
    transform: translateY(3px);
  }
  to {
    opacity: 1;
    transform: none;
  }
}

.mlm-table-wrap table {
  width: 100%;
  border-collapse: collapse;
}

.mlm-lookup th {
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.06em;
  color: var(--mlm-ink-3);
  background: var(--mlm-paper);
  border-bottom: 1px solid var(--mlm-line);
  padding: 9px 12px;
  white-space: nowrap;
}

.mlm-lookup td {
  padding: 11px 12px;
  border-bottom: 1px solid var(--mlm-line);
  vertical-align: top;
}

.mlm-lookup tbody tr {
  transition: background-color var(--mlm-ease);
}

.mlm-lookup tbody tr:hover {
  background: var(--mlm-accent-soft);
}

.mlm-lookup tbody tr:last-child td {
  border-bottom: 0;
}

.mlm-name {
  font-weight: 600;
  letter-spacing: -0.005em;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.mlm-address {
  margin-top: 3px;
  font-size: 12px;
  line-height: 1.5;
  color: var(--mlm-ink-2);
  word-break: keep-all;
  overflow-wrap: anywhere;
}

.mlm-date,
.mlm-phone {
  white-space: nowrap;
  font-variant-numeric: tabular-nums;
  letter-spacing: 0.01em;
  color: var(--mlm-ink-2);
}

/* 등록기관 — 보조 정보다. 알약 배지 대신 점 + 글자로 낮춰
   근거 등급과 시선을 다투지 않게 한다. */

.mlm-src {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  color: var(--mlm-ink-2);
  white-space: nowrap;
}

.mlm-src::before {
  content: "";
  flex: none;
  width: 6px;
  height: 6px;
  border-radius: 50%;
  background: var(--mlm-ink-3);
}

.mlm-src--kossa::before {
  background: var(--mlm-dot-kossa);
}
.mlm-src--macco::before {
  background: var(--mlm-dot-macco);
}
.mlm-src--ftc::before {
  background: var(--mlm-dot-ftc);
}

/* 근거 등급 — 이 위젯에서 가장 중요한 신호.
   유일하게 "채워진" 요소로 두어 한 눈에 잡히게 한다. */

.mlm-legal {
  display: inline-block;
  font-size: 11.5px;
  font-weight: 600;
  line-height: 1.55;
  letter-spacing: -0.005em;
  padding: 2px 8px;
  border-radius: 5px;
  white-space: nowrap;
  border: 1px solid transparent;
}

.mlm-legal--confirmed {
  color: var(--mlm-grade-confirmed-ink);
  background: var(--mlm-grade-confirmed-bg);
  border-color: var(--mlm-grade-confirmed-line);
}

.mlm-legal--probable {
  color: var(--mlm-grade-probable-ink);
  background: var(--mlm-grade-probable-bg);
  border-color: var(--mlm-grade-probable-line);
}

.mlm-legal--suspended {
  color: var(--mlm-grade-warn-ink);
  background: var(--mlm-grade-warn-bg);
  border-color: var(--mlm-grade-warn-line);
}

.mlm-legal--unknown {
  color: var(--mlm-grade-none-ink);
  background: var(--mlm-grade-none-bg);
  border-color: var(--mlm-grade-none-line);
}

/* 휴업 사유 — 원문이 길 수 있어 두 줄로 제한 */
.mlm-reason {
  margin-top: 4px;
  max-width: 22ch;
  font-size: 11.5px;
  line-height: 1.45;
  color: var(--mlm-ink-3);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  word-break: keep-all;
  overflow-wrap: anywhere;
}

/* ---------- 더 보기 ---------- */

.mlm-more {
  display: block;
  width: 100%;
  font-family: inherit;
  font-size: 13px;
  font-weight: 600;
  color: var(--mlm-accent);
  background: var(--mlm-paper);
  border: 0;
  border-top: 1px solid var(--mlm-line);
  padding: 13px;
  cursor: pointer;
  transition: background-color var(--mlm-ease), color var(--mlm-ease);
}

.mlm-more:hover:not([hidden]) {
  background: var(--mlm-accent-soft);
  color: var(--mlm-accent-ink);
}

.mlm-more:active:not([hidden]) {
  background: var(--mlm-paper-3);
}

.mlm-more__rest {
  font-weight: 500;
  color: var(--mlm-ink-3);
  font-variant-numeric: tabular-nums;
}

/* ---------- 하단 고지문 ---------- */

.mlm-disclaimer {
  position: sticky;
  bottom: 0;
  z-index: 1;
  margin: 0;
  padding: 9px 14px;
  font-size: 11.5px;
  line-height: 1.5;
  color: var(--mlm-ink-3);
  background: var(--mlm-paper-2);
  border-top: 1px solid var(--mlm-line);
  word-break: keep-all;
  text-wrap: pretty;
}

/* ---------- 접근성 ---------- */

.mlm-lookup input:focus-visible,
.mlm-lookup select:focus-visible,
.mlm-lookup button:focus-visible {
  outline: 2px solid var(--mlm-accent);
  outline-offset: 2px;
}

.mlm-lookup input:focus,
.mlm-lookup select:focus {
  border-color: var(--mlm-accent);
  box-shadow: 0 0 0 3px var(--mlm-accent-soft);
}

.mlm-tier-toggle:focus-within {
  background: var(--mlm-paper-2);
}

@media (prefers-reduced-motion: reduce) {
  .mlm-lookup *,
  .mlm-lookup *::before,
  .mlm-lookup *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---------- 좁은 폭(519px 이하): 표 → 카드형 ----------
   컨테이너 쿼리라 뷰포트가 아니라 위젯 폭을 본다.
   사이드바에 들어가면 데스크톱에서도 이 모드가 적용된다. */

@container mlm (max-width: 519px) {
  .mlm-lookup thead {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip: rect(0 0 0 0);
    clip-path: inset(50%);
    white-space: nowrap;
  }

  .mlm-table-wrap tbody {
    display: grid;
    gap: 8px;
    padding: 10px;
  }

  .mlm-table-wrap tr {
    /* 업체명·근거는 전폭, 나머지 메타는 2열로 접는다 */
    display: grid;
    grid-template-columns: 1fr 1fr;
    border: 1px solid var(--mlm-line);
    border-radius: var(--mlm-radius-sm);
    background: var(--mlm-paper);
    overflow: hidden;
  }

  .mlm-table-wrap tr:hover {
    background: var(--mlm-paper);
    border-color: var(--mlm-accent-line);
  }

  .mlm-lookup td {
    padding: 8px 11px;
    border-bottom: 0;
  }

  .mlm-lookup td:nth-child(1),
  .mlm-lookup td:nth-child(2) {
    grid-column: 1 / -1;
  }

  .mlm-lookup td:nth-child(1) {
    padding-bottom: 6px;
  }

  .mlm-lookup td:nth-child(2) {
    padding-top: 0;
    padding-bottom: 10px;
    border-bottom: 1px solid var(--mlm-line);
  }

  .mlm-lookup td[data-label]::before {
    content: attr(data-label);
    display: block;
    font-size: 10px;
    font-weight: 600;
    letter-spacing: 0.06em;
    color: var(--mlm-ink-3);
    margin-bottom: 2px;
  }

  /* 업체명·근거 칸의 라벨은 군더더기 — 값만으로 자명하다 */
  .mlm-lookup td:nth-child(1)::before,
  .mlm-lookup td:nth-child(2)::before {
    display: none;
  }

  .mlm-date,
  .mlm-phone {
    white-space: normal;
  }

  .mlm-reason {
    max-width: none;
  }
}

/* 컨테이너 쿼리 미지원 브라우저 폴백 — 뷰포트 기준으로라도 동작시킨다 */
@supports not (container-type: inline-size) {
  @media (max-width: 519px) {
    .mlm-lookup thead {
      position: absolute;
      width: 1px;
      height: 1px;
      overflow: hidden;
      clip: rect(0 0 0 0);
      white-space: nowrap;
    }
    .mlm-table-wrap tbody {
      display: grid;
      gap: 8px;
      padding: 10px;
    }
    .mlm-table-wrap tr {
      display: grid;
      grid-template-columns: 1fr 1fr;
      border: 1px solid var(--mlm-line);
      border-radius: var(--mlm-radius-sm);
      overflow: hidden;
    }
    .mlm-lookup td {
      padding: 8px 11px;
      border-bottom: 0;
    }
    .mlm-lookup td:nth-child(1),
    .mlm-lookup td:nth-child(2) {
      grid-column: 1 / -1;
    }
    .mlm-lookup td:nth-child(2) {
      border-bottom: 1px solid var(--mlm-line);
    }
    .mlm-lookup td[data-label]::before {
      content: attr(data-label);
      display: block;
      font-size: 10px;
      font-weight: 600;
      letter-spacing: 0.06em;
      color: var(--mlm-ink-3);
    }
    .mlm-lookup td:nth-child(1)::before,
    .mlm-lookup td:nth-child(2)::before {
      display: none;
    }
  }
  @media (min-width: 520px) {
    .mlm-toolbar {
      grid-template-columns: 2fr 1fr 1fr;
      align-items: center;
    }
    .mlm-search,
    .mlm-select {
      font-size: 14px;
    }
  }
}

/* ---------- 다크 테마 ----------
   워드프레스 테마가 어두울 수 있다. 기본은 시스템 설정을 따르되
   data-theme 으로 호스트가 강제 지정할 수 있게 둔다. */

@media (prefers-color-scheme: dark) {
  .mlm-lookup:not([data-theme="light"]) {
    --mlm-ink: #e7ebf0;
    --mlm-ink-2: #a3acb9;
    --mlm-ink-3: #78818e;

    --mlm-line: #2a3037;
    --mlm-line-strong: #3a424b;

    --mlm-paper: #14171b;
    --mlm-paper-2: #191d22;
    --mlm-paper-3: #222830;

    --mlm-accent: #7fb2d4;
    --mlm-accent-ink: #a8cde6;
    --mlm-accent-soft: #1a2833;
    --mlm-accent-line: #2f4759;

    --mlm-grade-confirmed-ink: #8ad3a6;
    --mlm-grade-confirmed-bg: #152419;
    --mlm-grade-confirmed-line: #2b4a35;

    --mlm-grade-probable-ink: #a8cde6;
    --mlm-grade-probable-bg: #1a2833;
    --mlm-grade-probable-line: #2f4759;

    --mlm-grade-warn-ink: #e0bb72;
    --mlm-grade-warn-bg: #231c0e;
    --mlm-grade-warn-line: #4a3c1d;

    --mlm-grade-none-ink: #a3acb9;
    --mlm-grade-none-bg: #191d22;
    --mlm-grade-none-line: #3a424b;

    --mlm-danger: #e4948e;
    --mlm-danger-bg: #2a1614;

    --mlm-dot-kossa: #6fa8d8;
    --mlm-dot-macco: #74c294;
    --mlm-dot-ftc: #d3a95f;

    --mlm-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
  }
}

.mlm-lookup[data-theme="dark"] {
  --mlm-ink: #e7ebf0;
  --mlm-ink-2: #a3acb9;
  --mlm-ink-3: #78818e;

  --mlm-line: #2a3037;
  --mlm-line-strong: #3a424b;

  --mlm-paper: #14171b;
  --mlm-paper-2: #191d22;
  --mlm-paper-3: #222830;

  --mlm-accent: #7fb2d4;
  --mlm-accent-ink: #a8cde6;
  --mlm-accent-soft: #1a2833;
  --mlm-accent-line: #2f4759;

  --mlm-grade-confirmed-ink: #8ad3a6;
  --mlm-grade-confirmed-bg: #152419;
  --mlm-grade-confirmed-line: #2b4a35;

  --mlm-grade-probable-ink: #a8cde6;
  --mlm-grade-probable-bg: #1a2833;
  --mlm-grade-probable-line: #2f4759;

  --mlm-grade-warn-ink: #e0bb72;
  --mlm-grade-warn-bg: #231c0e;
  --mlm-grade-warn-line: #4a3c1d;

  --mlm-grade-none-ink: #a3acb9;
  --mlm-grade-none-bg: #191d22;
  --mlm-grade-none-line: #3a424b;

  --mlm-danger: #e4948e;
  --mlm-danger-bg: #2a1614;

  --mlm-dot-kossa: #6fa8d8;
  --mlm-dot-macco: #74c294;
  --mlm-dot-ftc: #d3a95f;

  --mlm-shadow: 0 1px 2px rgba(0, 0, 0, 0.4), 0 8px 24px -12px rgba(0, 0, 0, 0.6);
}